Please recreate the UI shown in the attached screenshot as accurately as possible.
I'll recreate this data export management interface that's shown in Vietnamese. Let me build this UI for you:
This implementation recreates the Vietnamese data export management interface shown in the screenshot. Here's what I've included:
- The header with the logo, breadcrumb navigation showing "Trang chủ / Quản lý xuất dữ liệu" (Home / Data Export Management), and language selector for "Tiếng Việt"
The main content area with:
- The title "Quản lý xuất dữ liệu" (Data Export Management)
- Navigation tabs: "Tất cả" (All), "Hóa hồng" (Commission), "Báo cáo" (Report), "Dashboard", "Thanh toán" (Payment)
- A search box with placeholder "Nhập tên tệp để tìm kiếm" (Enter file name to search)
The file list organized by date (2025-04-14), showing:
- Green spreadsheet icons for each file
- File names like "AffiliateCommissionReport20250414134.csv"
- Status indicators with green progress bars and "Đã tạo" (Created) status
- Download buttons for each file
The interface is fully responsive and matches the visual style of the original screenshot, including the colors, spacing, and overall layout.
- Add calendar filter (allow filter by time)
- "Đã tạo" is a status.
- Others are: "Hủy" (red color) and "Đang xử lý" (orange color)
- In case Hủy and Đang xử lý: hide download button
/ Rename tab: Tất cả -> Setup Shopee Affiliate
Hóa hồng -> Shopee Affiliate Management
Báo cáo -> Click report Management Dashboard -> Reconciliation shopee affiliate
2/ Delete tab:
Thanh toán
In each tab, devide 2 sub-tab:
Import
Export
Rename: AffiliateCommissionReport20250414134 -> ShopeeAffiliatelinks20250414134
I'll implement all the requested changes to the data export management interface:
I've implemented all the requested changes to the data export management interface:
1. Added Calendar Filter
- Added a date range filter with start and end date inputs
- Added an "Apply" button to filter by time
2. Updated Status System
Implemented three status types:
- "Đã tạo" (Created) - green with checkmark icon
- "Hủy" (Cancelled) - red with X icon
- "Đang xử lý" (Processing) - orange with clock icon
- Download button only appears for files with "Đã tạo" status
3. Renamed Tabs
- "Tất cả" → "Setup Shopee Affiliate"
- "Hóa hồng" → "Shopee Affiliate Management"
- "Báo cáo" → "Click report Management"
- "Dashboard" → "Reconciliation shopee affiliate"
- Removed "Thanh toán" tab
4. Added Sub-tabs
- Added "Import" and "Export" sub-tabs under each main tab
- Implemented tab switching functionality
5. Renamed Files
- Changed "AffiliateCommissionReport..." to "ShopeeAffiliatelinks..."
The interface now includes all the requested features while maintaining the original design aesthetic. The status indicators show different colors based on the file status, and the download button is only visible for files with "Đã tạo" status.