Generate a fully responsive Sales Dashboard UI for the MICE Central OS using React, Next.js, Tailwind CSS, and ShadCN UI components.The design should follow a bold, modern, forward-looking aesthetic with vibrant color usage, fluid spacing, and clear visual hierarchy.Use Tailwind utility classes for layout and spacing. Use ShadCN UI components (such as <Card />, <Button />, <Tabs />, <Badge />, etc.) wherever applicable. Prioritize user experience: fast load, intuitive controls, clear feedback.Design requirements:modern, bold design with:Contemporary color palette with high contrastModern typography with bold hierarchiesRefined spacing and layout patternsSubtle shadows and modern visual effectsUpdated component styling with current design trendsEnhanced visual hierarchy and better use of whitespaceModern Design Elements:Clean, bold typography with improved hierarchy and spacingContemporary color palette with vibrant gradients and proper contrastRounded corners, subtle shadows, and modern component stylingGlass morphism effects and sophisticated visual treatmentsEnhanced Visual Design:Modern metric cards with progress bars and interactive hover effectsRedesigned sidebar with contemporary navigation patternsUpdated header with modern search functionality and profile areaRefined table design with better data visualization and micro-interactionsContemporary UX Patterns:Smooth animations and transitions throughout the interfaceImproved accessibility with better focus states and keyboard navigationModern loading states and interactive feedbackResponsive design that adapts beautifully to different screen sizes---## ⚙️ 1. Global Layout & Navigation* Sidebar (72px wide, full height)  * Background: #1E1E2F (rich charcoal)  * Icons (SVG or FontIcon) stacked vertically for:    1. 🏠 Sales Dashboard (active state)    2. 📥 Leads Dashboard    3. 🌍 Destination Dashboard    4. ⚙️ Operations & Contracts    5. 🛂 Visa Dashboard    6. 🎟️ Exhibitions  * Active icon: white fill + a 6px orange border on its right (#FF6600).  * Hover: icon color transitions to orange over 0.2s.* Header Bar (80px tall, full width minus sidebar)  * Background: #FFFFFF  * Left: empty (reserve for logo if needed)  * Right: icons with spacing—🔍 AI Search, 🔔 Notifications, 👤 User Profile    * Icon color: #333333, hover color: #FF6600    * All icons have cursor: pointer and :focus outlines for accessibility.* Main Content Area (to the right of sidebar, below header)  * Padding: 24px all around  * Background: #F8F9FA---## 📊 2. Metrics Overview SectionPlace at top of main area, a flex container with 4 gradient cards:1. Active Quotes   * Value: large 236 (48px, white, weight 800)   * Subtitle: “This Month” (14px, 70% white)   * Delta pill: “+23%” (12px, white on semi‑transparent black)   * Gradient: linear-gradient(135deg, #FF6600, #FF3D00)2. Quotes This Week   * Value: 23, Subtitle: “This Week”, Delta: +8%   * Gradient: linear-gradient(135deg, #2563EB, #3083FF)3. Conversion Rate   * Value: 72%, Subtitle: “This Quarter”, Delta: +12%   * Gradient: linear-gradient(135deg, #10B981, #0FA670)4. Pipeline Value   * Value: ₹24.5 Cr, Subtitle: “Next 60 Days”, Delta: +52%   * Gradient: linear-gradient(135deg, #7C3AED, #A55EEA)Card Styling:* Width: calc(25% - 18px) with 18px gap* Padding: 24px* Border-radius: 16px* Box-shadow: 0 4px 16px rgba(0,0,0,0.1)* Hover: transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15)---## 📨 3. Lead Requests PanelLeft column (below metrics, width ~50%):* Header: “Lead Requests” (18px, weight 700) + right-aligned text button “View All” (14px, #2563EB, underline on hover).* List Items: three cards stacked vertically, each:  * Company name (16px, 700)  * Badges: destination and pax (12px, white text on #FF6600 background)  * “Received” date (12px, #666666)  * CTA: “Inspire Me” (32px-high outlined pill, border 2px solid #FF6600, text #FF6600)* Card Styling: white background, border-radius 12px, box-shadow, padding 16px, margin-bottom 16px.* Hover: border-color darkens to #e65500, button background → #FF6600, text → white.---## ⏳ 4. Activity TimelineRight column (below metrics, width ~50%):* Header: “Activity Timeline” (18px, 700)* Feed Items: a vertical <ul> of items:  * Status dot (10px circle) color-coded (🟢, 🟡, 🔴)  * Text: “Client ABC generated AI Quote for XYZ (120 pax)” (14px)  * Timestamp right-aligned (12px, #999999)  * Items have background #FFFFFF, border-radius 8px, padding 12px, margin-bottom 8px.* Scroll Behavior: if overflow, custom scrollbar styled thin and orange on hover.---## 📈 5. Team Performance TableFull width under panels:* Header Bar: “Team Performance” (18px, 700) + right-aligned Export CSV button (outlined pill, 32px-high, border 1.5px solid #2563EB, text #2563EB).* Table:  * <table> with <thead> black text on #F3F4F6, uppercase, 14px, weight 600.  * Columns: Sales Rep, Quotes Sent, Win %, Pipeline Value, Avg Deal Time.  * <tbody> rows: 48px-high, 16px padding.  * Row Hover: background → #FFFFFF → #F0F4FF.* Sorting: JS click handler on <th> toggles sort (arrow indicator).* Pagination: below table:  * “Rows per page” dropdown (10/25/50), page numbers, Prev/Next buttons, all styled as small pills.## 📈 6. Ai insights sectionLists 3-5 live insights based on the activity going on ---## 🤖 6. JavaScript Interactivity* Sidebar nav: click adds .active, logs view name.* Metrics tooltips: on hover over delta pill, show a tooltip with “Last month: X”.* Inspire Me buttons: console.log("Inspire me for [Company]").* Table sorting & pagination: implement basic array sort and slice logic.* Export CSV: gather table rows into CSV string, create a blob, and trigger download.  * Sidebar collapses to 48px; labels hidden.  * Metrics stack in two rows of two.  * Lead/Activity panels stack vertically.Attached design images for reference---