Server Trash Manager - Copy this React, Mui Component to your project
# Server Trash Manager UI/UX Prompt ## Overview Server Trash Manager là công cụ để quản lý và dọn dẹp các folder_id mồ côi (orphaned folders) những folder tồn tại trên R2 nhưng không có reference trong database. ## Layout Structure Giao diện chia làm 2 phần chính: 1. Dashboard Cards (giống layout hiện tại) 2. Orphaned Folders Table ### 1. Dashboard Cards #### A. Total Orphaned Folders Hiển thị tổng số folder_id mồ côi Biểu đồ line chart thể hiện xu hướng phát sinh folders mồ côi theo thời gian Phân loại theo username #### B. Storage Usage Tổng dung lượng của các folder mồ côi Biểu đồ bar chart thể hiện dung lượng theo tháng % thay đổi so với tháng trước #### C. Cleanup Status Số lượng folders đã cleanup trong tháng Dung lượng đã giải phóng Biểu đồ thể hiện hiệu quả cleanup ### 2. Orphaned Folders Table Bảng hiển thị chi tiết các folder mồ côi với các cột: Username Folder ID Created Date (nếu có) Storage Size Last Modified Status Actions (Delete button) ### Features 1. **Bulk Actions** Nút "Delete All" để xóa toàn bộ folders mồ côi Checkbox để chọn nhiều folders cùng lúc 2. **Filters & Search** Filter theo username Filter theo dung lượng Search theo folder_id 3. **Sorting** Sort theo dung lượng Sort theo thời gian Sort theo username 4. **Confirmation & Safety** Dialog xác nhận trước khi xóa Hiển thị preview nội dung folder trước khi xóa Log lại các thao tác xóa 5. **Analytics** Thống kê theo username Thống kê theo thời gian Báo cáo dung lượng đã giải phóng ### Technical Requirements 1. **Database Queries** Query để phát hiện folder_id mồ côi Cross check giữa R2 và database 2. **R2 Integration** List objects trong folders Tính toán dung lượng Xóa objects và folders 3. **API Endpoints** GET /api/admin/trash/orphaned folders DELETE /api/admin/trash/folders/:id POST /api/admin/trash/bulk delete GET /api/admin/trash/stats 4. **Performance** Pagination cho large datasets Lazy loading cho folder contents Caching cho stats và analytics ### UI Components 1. **Dashboard Cards** Material UI Cards Recharts cho biểu đồ Progress indicators 2. **Data Table** Material UI DataGrid Custom action buttons Status indicators 3. **Modals & Dialogs** Confirmation dialogs Preview modals Loading indicators ### Error Handling 1. **User Feedback** Success/Error messages Progress indicators Confirmation messages 2. **Edge Cases** Empty states Loading states Error states Network issues ### Security 1. **Access Control** Admin only access Action logging Audit trail 2. **Data Protection** Validation trước khi xóa Backup mechanism (optional) Rate limiting yêu cầu reponsive đầy đủ cho table, miobile, PC hiển thị đẹp thẩm mỹ cao