Dashboard - Copy this React, Tailwind Component to your project

###-**DashboardScreen:-UI/UX-Design**-####-**Purpose**-The-**DashboardScreen**-is-the-user's-main-control-center,-providing-quick-access-to-key-features,-services,-and-personalized-case-updates.-This-screen-allows-users-to-navigate-seamlessly-to-different-parts-of-the-app,-view-real-time-updates-on-their-active-cases,-and-access-essential-services.-The-layout-is-clean-and-organized-to-help-users-efficiently-manage-their-tasks-and-stay-informed-about-their-legal-matters.-----###-**Screen-Layout**-1.-**Header**---**User-Greeting**:-A-friendly-welcome-message-personalized-with-the-user’s-name-(e.g.,-"Welcome-back,-[Name]!").---**Notifications-Icon**:-Positioned-in-the-top-right-corner,-indicating-any-new-messages,-reminders,-or-alerts.-Tapping-this-opens-the-Notifications-screen.---**Settings-Icon**:-Adjacent-to-the-notifications,-it-allows-users-quick-access-to-profile-settings-and-preferences.-2.-**Quick-Access-Tiles**---Positioned-directly-below-the-header,-these-are-large,-easy-to-access-tiles-for-the-main-features:---**Case-Updates**:-A-summary-tile-displaying-the-latest-case-status-and-updates.---**Legal-Assistant**:-Direct-access-to-the-AI-powered-legal-assistant-for-quick-questions-or-guidance.---**Document-Management**:-A-shortcut-to-manage,-view,-or-upload-legal-documents.---**Appointments**:-A-tile-showing-upcoming-appointments-with-lawyers,-with-options-to-view-details-or-reschedule.---Each-tile-includes-an-icon,-a-short-title,-and-a-brief-summary-or-count-(e.g.,-"3-New-Updates").-3.-**Case-Overview-Section**---**Active-Cases-List**:-A-scrollable-list-showing-the-user’s-active-cases.-Each-case-item-displays:---**Case-Title**:-Title-or-type-of-the-case-(e.g.,-"Family-Law-–-Custody-Case").---**Progress-Bar**:-A-visual-indicator-of-the-case’s-progress-(e.g.,-60%-complete).---**Recent-Update**:-The-latest-update-or-action-taken-on-the-case,-such-as-"Court-Date-Scheduled"-or-"New-Document-Added."---**Expand-Option**:-Each-case-has-a-"View-Details"-button-to-access-the-full-case-details-on-a-dedicated-screen.-4.-**Legal-Services**---**Service-Grid**:-A-grid-layout-displaying-key-services-the-user-can-access:---**Book-a-Lawyer**:-Quickly-search-for-and-book-consultations-with-lawyers.---**Case-Evaluation**:-Start-an-AI-powered-evaluation-of-a-new-case.---**Consultation**:-Set-up-a-video-or-voice-consultation-with-a-legal-expert.---**Research-Database**:-Access-legal-research-tools-and-databases-for-case-preparation.---**Explore-More**:-A-button-that-opens-a-list-of-all-available-services-for-users-who-need-additional-legal-tools.-5.-**Recent-Activity-Feed**---**Activity-Timeline**:-Displays-the-user’s-recent-activity-in-chronological-order:---**New-Documents**:-Notifications-for-uploaded-documents-or-shared-files.---**Messages**:-Updates-on-new-messages-or-responses-from-lawyers.---**Payments**:-Summary-of-recent-transactions-or-payments-made.---**Status-Updates**:-Changes-in-case-statuses,-such-as-case-progress-or-task-completions.-6.-**Bottom-Navigation-Bar**---**Home-Icon**:-Returns-users-to-the-Dashboard-screen.---**Cases-Icon**:-Direct-access-to-view-and-manage-all-cases.---**Messages-Icon**:-Opens-the-messaging-center-for-communication-with-lawyers.---**Profile-Icon**:-Access-to-user-profile-and-settings.---**Services-Icon**:-Directs-users-to-explore-additional-services-not-on-the-dashboard.-----###-**Features-and-Functions**-1.-**Key-Service-Shortcuts**---**Quick-Access-Tiles**:-Streamline-navigation-to-critical-features-like-case-updates,-document-management,-and-appointment-scheduling.---**Dynamic-Data**:-Each-tile-is-updated-in-real-time-to-reflect-the-latest-case-status-or-scheduled-appointments,-keeping-users-informed-without-needing-to-search.-2.-**Case-Overview-and-Progress-Tracking**---**Case-List**:-Displays-a-concise-overview-of-active-cases-with-a-progress-bar,-latest-status-update,-and-an-option-to-view-full-details.---**Real-Time-Updates**:-Case-progress-and-details-are-automatically-updated,-providing-users-with-current-information.---**Progress-Visualization**:-Helps-users-visually-track-their-case-progression,-enhancing-transparency.-3.-**Legal-Services-Grid**---**Core-Legal-Services**:-Centralized-access-to-essential-services-like-booking-lawyers,-legal-consultations,-and-AI-powered-case-evaluation.---**Expandable-List**:-Users-can-explore-additional-legal-services-with-a-single-tap,-offering-flexibility-and-ease-of-use.-4.-**Recent-Activity-Feed**---**Activity-Timeline**:-Chronological-feed-of-recent-actions,-including-document-uploads,-messages,-payments,-and-status-updates.---**Quick-Links**:-Each-activity-item-links-to-the-relevant-section,-allowing-users-to-jump-directly-to-details-without-navigating-back-and-forth.-5.-**Notifications-and-Alerts**---**Real-Time-Notifications**:-Alerts-users-to-any-changes,-updates,-or-new-messages-through-the-notifications-icon-in-the-header.---**Unread-Counts**:-Shows-a-count-of-unread-notifications,-ensuring-users-don’t-miss-important-updates.-6.-**User-Profile-and-Settings-Access**---**Settings-Icon**:-Quick-access-to-settings-and-profile-customization,-allowing-users-to-manage-preferences.---**User-Greeting**:-Personalized-greeting-reinforces-the-app’s-user-centered-approach-and-enhances-engagement.-7.-**Bottom-Navigation-for-Core-Navigation**---**Persistent-Nav-Bar**:-Provides-quick-navigation-across-major-sections,-like-Cases,-Messages,-and-Services,-ensuring-users-can-move-seamlessly-within-the-app.-8.-**Accessibility-and-Customization**---**Accessible-Design**:-Elements-have-high-contrast-and-larger-tap-targets-for-ease-of-use.-Supports-screen-readers-for-visually-impaired-users.---**Dark-Mode**:-Option-for-users-to-toggle-dark-mode-for-better-readability-in-low-light-conditions.-9.-**User-Data-Persistence**---**Session-Persistence**:-Automatically-saves-user-progress-and-preferences,-so-data-is-readily-available-when-reopening-the-app.-10.-**Quick-Tips-and-Assistance**---**Tooltips**:-Brief-explanations-for-new-users-to-guide-them-through-the-dashboard's-features.---**Help-Button**:-Opens-a-guide-or-support-chat-for-additional-assistance,-ensuring-users-feel-supported.-----###-**User-Flow**-1.-**Entering-the-Dashboard**---After-logging-in-or-completing-onboarding,-the-user-is-directed-to-the-DashboardScreen,-where-they-see-an-overview-of-cases-and-services.-2.-**Viewing-and-Managing-Cases**---The-user-checks-their-active-cases,-views-progress,-and-taps-“View-Details”-for-a-comprehensive-case-update-or-to-add-notes/documents.-3.-**Accessing-Services**---If-the-user-needs-a-service-(e.g.,-booking-a-lawyer),-they-tap-the-relevant-tile-or-grid-icon-to-start-the-booking-process-or-consultation.-4.-**Checking-Recent-Activity**---The-user-scrolls-through-the-activity-feed-to-review-recent-documents,-messages,-payments,-or-status-updates,-with-the-option-to-tap-for-full-details.-5.-**Navigating-with-Bottom-Nav-Bar**---Using-the-bottom-navigation,-the-user-switches-between-dashboard,-cases,-messaging,-profile,-and-services-screens.-----###-**Notes-for-Development**---**UI-Consistency**:-Ensure-tiles,-lists,-and-grid-layouts-have-consistent-padding,-font-sizes,-and-spacing-for-a-professional-and-polished-look.---**Real-Time-Updates**:-Leverage-sockets-or-real-time-listeners-to-keep-dashboard-information-current.---**Accessibility-Compliance**:-All-elements-should-be-accessible-via-screen-readers,-and-all-tap-targets-should-be-large-enough-for-ease-of-use.---**State-Management**:-Use-persistent-state-management-for-user-data-(e.g.,-Redux-or-Context-API)-to-maintain-seamless-access-to-updates.---**Responsive-Design**:-Design-layout-should-accommodate-various-screen-sizes,-with-elements-adjusting-proportionally.-The-**DashboardScreen**-is-a-user-centric-hub-that-offers-comprehensive-access-to-key-features,-legal-services,-and-case-updates,-all-in-one-place.-The-intuitive-design-and-organized-layout-help-users-stay-productive,-manage-their-legal-needs-efficiently,-and-access-support-as-required.