Drawer Width - Copy this React, Mui Component to your project

### 1. 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. - **Hỗ trợ chế độ:** Dark Mode / Light Mode.