I want to redesign the UI/UX of my existing Telegram bot Adm...
Prompt
I want to redesign the UI/UX of my existing Telegram bot Admin Panel. Use the attached Artificial Analysis dashboard screenshot ONLY as visual inspiration. Do not copy its branding, logo, text, or proprietary assets. The goal is to make my existing admin panel feel like a premium, modern, minimal SaaS analytics dashboard. IMPORTANT: This is a UI/UX redesign. Do NOT change or remove any existing backend functionality, database structure, authentication, authorization, Telegram bot logic, file delivery system, required-channel verification, or API behavior. First inspect the existing project structure and frontend. Understand the current routes, components, data flow, and existing functionality. Then redesign the frontend around the existing functionality. VISUAL STYLE: - Premium modern SaaS dashboard - Clean white / very light gray background - Minimal black and dark-gray typography - Very subtle borders - Generous whitespace - Thin elegant icons - Restrained rounded corners - Minimal shadows - No excessive gradients - No glassmorphism - No unnecessary animations - Black active sidebar item with white text - Large elegant page headings - Clean readable UI typography - Professional and polished - Responsive on desktop, tablet and mobile LAYOUT: Use a left sidebar navigation. MAIN - Dashboard CONTENT - Files - Required Channels BOT - Users - Statistics SYSTEM - Settings - Audit Logs Keep all existing routes and functionality. DASHBOARD: Redesign the dashboard around the real data already available in the project. Include appropriate cards for: - Total Files - Total Users - Total Downloads - Active Required Channels Also provide: - Download activity - Recent files - Recent activity - System status FILES: Create a polished file-management interface using the existing functionality. Include: - Search - Filters - File type - Status - Downloads - Upload date - File details - Edit caption - Deep-link copy - Enable/disable - Delete REQUIRED CHANNELS: Create a clean management interface for the existing required-channel system. Include: - Channel/group name - Username/link - Type - Status - Add channel - Edit - Enable/disable - Delete USERS: Use the existing user data and functionality. Show useful information such as: - Telegram ID - Username/name when available - First seen - Last activity - Download count - Status STATISTICS: Create a visually strong analytics page using the real available data. Show useful charts and metrics for: - Downloads - Users - Files - Membership verification - Activity over time SETTINGS: Keep all existing settings functionality, but redesign the interface to match the new design system. DESIGN SYSTEM: Create reusable components for: - Sidebar - Header - Cards - Tables - Buttons - Inputs - Selects - Badges - Modals - Dropdowns - Toasts - Loading states - Empty states - Error states IMPORTANT IMPLEMENTATION RULES: - Do not rewrite the application unnecessarily. - Reuse existing components and dependencies when possible. - Do not replace working functionality just to achieve the visual design. - Do not invent backend data. - Preserve the existing API contracts. - Preserve authentication and permissions. - Preserve all Telegram functionality. Before making changes, explain briefly: 1. What frontend architecture you found. 2. Which components/routes you will modify. 3. How you will preserve existing functionality. Then implement the redesign. After implementation: - Run lint. - Run tests. - Run the production build. - Fix all TypeScript/build errors. - Verify that existing functionality still works. The final result should feel like a premium, minimalist, high-end analytics/admin dashboard inspired by the visual language of Artificial Analysis, while remaining an original design for my Telegram bot.
Response not available