Build a high-end, modern medical dashboard for a clinical startup called "UzPRS-Diab". The platform predicts Type 2 Diabetes using Polygenic Risk Scores (PRS). Use a clean white background with corporate dark blue and medical teal/cyan accents. Use Tailwind CSS and Lucide React icons.
Layout requirements: 1. Left Sidebar: Dark blue background. Include a glowing DNA logo and "UzPRS-Diab". Menu items: "Dashboard", "Patient Database", "PRS Analysis", "Genomic Reports", "Settings". 2. Top Header: Search bar, notification bell, and Doctor's profile (Dr. Abduqaxxorov M.). 3. Main Content Area: Show a specific patient profile. - Patient Info Card: Name: Rustamov A. Age: 35. Ethnicity: Uzbek. Region: Sirdaryo. Clinical Status: Undiagnosed (Healthy). - Main Widget (Polygenic Risk Score): Create a large circular gauge chart or progress bar showing the PRS Score. The needle should be in the red zone. Big text: "HIGH RISK - TOP 10%". Subtext: "AUC Accuracy: 0.74". - Genomic Data Widget: Show a small DNA icon with text: "Calibrated with 1000 Uzbek Genomes Reference Panel". Show a mini bar chart of Risk Alleles (Dosage). - Clinical Recommendations Widget (Alert style): "1. Start Type 2 Diabetes screening 5 years earlier. 2. Intensive lifestyle modification required. 3. Monitor HbA1c every 6 months." Make the UI look extremely professional, trustworthy, and ready for a hospital environment. Use glassmorphism effects where appropriate.
Now I'll build this comprehensive medical dashboard. Let me update the globals.css with the medical theme colors, update the layout, and create all the dashboard components.
Now let me create the dashboard components:
Now let me create the main page that brings all components together:
The medical dashboard for UzPRS-Diab is now complete. Here's what I've built:
Layout Structure:
Main Content Components:
The design uses a professional medical color scheme with corporate dark blue and medical teal/cyan accents, glassmorphism effects on cards, and subtle shadows for a hospital-grade, trustworthy aesthetic.
Now I have a complete picture of all the components. I'll make them mobile-responsive by:
The dashboard is now fully mobile-responsive. Here's what I changed:
Sidebar: Added a mobile drawer pattern with a hamburger menu icon in the header. On mobile, the sidebar slides in from the left as an overlay with a backdrop, and can be closed by tapping the X button or the backdrop. The desktop sidebar remains as a fixed collapsible panel.
Header: Added the hamburger menu button that only shows on mobile (lg:hidden). Adjusted padding and spacing for smaller screens, with the doctor's profile info hiding on medium screens and below.
Main Page: Converted to a client component to manage the mobile menu state. All cards now stack vertically in a single column on mobile, with the Genomic Data widget appearing after Recommendations for better content flow.
All Widgets: Applied responsive scaling throughout - smaller text sizes (text-xs to text-sm), reduced padding (p-2.5 to p-4), and adjusted icon sizes for mobile. The PRS gauge shrinks proportionally while maintaining readability, and the quick stats grid now shows 2 columns on mobile instead of 1.
You can send messages while the preview loads