Modern Crypto Exchange Admin Dashboard
Tạo Modern Admin Dashboard theo phong cách Crypto Exchange với các yêu cầu: 1. Theme & Layout: Dark/Light mode switch với animation mượt mà Glass morphism effect cho cards (backdrop filter: blur) Gradient backgrounds với màu sắc: + Light: linear gradient(120deg, #f6f8fc, #ffffff) + Dark: linear gradient(120deg, #1a1f2c, #121721) Accent colors: + Primary: #3B82F6 (blue) + Success: #10B981 (green) + Warning: #F59E0B (orange) + Danger: #EF4444 (red) Box shadows với blur effect Border radius: 16px cho cards, 12px cho buttons Font: Inter hoặc SF Pro Display 2. Dashboard Layout: Sidebar fixed bên trái với glass effect Header với: + Dark/Light mode toggle + User profile dropdown + Notifications bell Main content area với grid layout Smooth transitions giữa các elements 3. Storage Management Tab: Overview Cards với: + Total Storage Used + Total Users + Active Users + Storage Limit Modern data table với: + Rounded corners + Hover effect với subtle glow + Animated progress bars + Action buttons với hover effects + Search bar với glass effect Edit Modal: + Centered design + Floating labels + Smooth animations + Modern number input + Loading states với skeleton 4. Server Trash Tab: Settings Panel: + Modern toggle switches + Sleek number inputs + Save button với ripple effect Orphaned Folders Grid: + Card based layout + Usage statistics với circular progress + Hover effects với scale transform + Delete button với fade animation Auto refresh indicator Toast notifications với slide animation 5. Interactive Elements: Hover Effects: + Scale transform: 1.02 + Shadow increase + Brightness adjustment Loading States: + Skeleton loaders + Pulse animations + Shimmer effects Buttons: + Gradient backgrounds + Hover glow + Click ripple effect Inputs: + Floating labels + Focus states với glow + Validation với subtle animations 6. Responsive Design: Fluid grid system Adaptive layouts: + Desktop: 3 column grid + Tablet: 2 column grid + Mobile: 1 column stack Collapsible sidebar Mobile optimized tables Touch friendly controls 7. Advanced Features: Real time updates với subtle animations CSV export với progress indicator Bulk actions với floating action bar Search với debounced API calls Sorting với smooth reordering Filtering với dynamic chips 8. Performance: Code splitting cho routes Lazy loading cho components Optimized images Cached API responses Debounced event handlers Suggested Tech Stack: Next.js 13+ với App Router Tailwind CSS cho styling Framer Motion cho animations React Query cho data fetching Zustand cho state management React Hook Form cho forms Radix UI cho accessible components Components Structure:
