Photo Finder Interface

Cấu trúc giao diện chính **Kích thước cửa sổ mặc định:** 1024x768px. **Bố cục:** **Sidebar (400px):** Bên trái. **Main Content:** Bên phải. **Theme màu:** Tông sáng, hiện đại. ### 2. Sidebar (400px) **Logo/Header:** Hiển thị tiêu đề `Photo Finder`. **Button điều khiển:** `Stop` | `Bắt đầu thủ công` | `Auto`. **Mục Folders:** **Source Folder:** 📂 Click để chọn thư mục. Khóa thư mục với biểu tượng khóa. **Output Folder:** 💾 Click để chọn thư mục. Khóa thư mục với biểu tượng khóa. **Ô Input:** Nhập mã số văn bản. **Checkbox tuùy chọn:** `Auto Sub`. **Hiển thị đường dẫn:** `Source Path`. `Output Path`. ### 3. Main Content **Bảng kết quả:** **Các cột:** Folder. Trạng thái: ✅/❌. Đường dẫn: `Source → Destination`. **Chức năng:** Click từng dòng để mở folder chứa file. **Bảng thông báo:** **Báo cáo kết quả:** Số lượng file tìm kiếm hoàn thành/lỗi. Click vào từng báo cáo để mở rộng kết quả. **Ví dụ:** Input có 30 mã số, tìm được 29 mã số thì hiển thị: `29/30 mã đã hoàn thành, 1 mã [ghi mã chưa hoàn thành]`. **Mã trùng lặp:** Hiển thị số lượng mã trùng lặp. **Thanh tiến trình:** **Hiển thị:** Phần trăm hoàn thành. Số file đã xử lý / Tổng số file. **Progress Bar:** Trực quan [███░░░]. ### 4. Tương tác người dùng **Chức năng chính:** Đường dẫn có thể click để mở folder. Thông báo tự động cập nhật. Thanh tiến trình cập nhật theo thời gian thực. **Responsive:** Tự động thích ứng khi thay đổi kích thước cửa sổ. ### 5. Thiết kế giao diện **Font chữ:** Sans serif, dễ đọc. **Màu sắc:** Tương phản vừa đủ. **Thông báo:** Phân biệt màu lỗi/thành công. **Icons:** Rõ ràng, dễ nhận biết. ### 6. Yêu cầu kỹ thuật **Công nghệ:** Electron.js (desktop app). React + MUI (UI). **Hiệu năng:** Xử lý tốt với số lượng lớn file.