Exam Management - Copy this React, Tailwind Component to your project
Page-Overview:-Design-a-professional,-fully-responsive-"Exam-Management"-web-page-for-managing-question-papers-(exams).-The-interface-should-display-a-list-of-all-exams-in-a-tabular-format-with-pagination,-filtering-options,-and-a-search-bar.-The-page-should-allow-admins-to-view-the-exam-status-(Scheduled,-Ongoing,-Ended)-based-on-current-time-compared-to-the-exam's-startTime-and-endTime.-Layout-and-Features:-Page-Title-and-Description:-Add-a-bold-and-professional-title:-"Exam-Management".-Provide-a-short-description:-"Manage-all-exams-efficiently.-Use-the-filters-and-search-bar-to-find-specific-exams-quickly."-Icon:-Use-MdManageSearch-or-MdAssignment-next-to-the-title-for-a-professional-touch.-Search-and-Filter-Section:-Search-Bar:-Placeholder:-"Search-by-Title-or-Paper-Key...".-Use-an-input-field-with-a-clear-icon-(MdClear)-to-reset-the-search.-Add-a-search-icon-(MdSearch)-for-visual-clarity.-Filters:-Date-Filter:-A-date-picker-to-select-a-specific-range.-Class-Year-Filter:-Dropdown-menu-with-options-(e.g.,-"2024",-"2025",-etc.).-Exam-Status-Filter:-Dropdown-with-options:-Scheduled-(Start-time->-Current-time)-Ongoing-(Start-time-≤-Current-time-<-End-time)-Ended-(End-time-<-Current-time)-Use-icons-like-MdDateRange,-MdFilterList,-and-MdCheckCircle-for-enhanced-UI.-Wrap-all-filters-and-the-search-bar-in-a-flex-container-with-proper-spacing-and-alignment.-Table-Design-for-Exams:-Display-the-exam-list-in-a-responsive-table:-Columns:-Title-(Exam-Name)-Class-Year-(e.g.,-"2024")-Start-Time-(Formatted-date-and-time)-End-Time-(Formatted-date-and-time)-Status-(Scheduled,-Ongoing,-Ended)-Actions-(Buttons:-View,-Edit,-Delete)-Use-professional-icons-for-actions:-View:-MdVisibility-Edit:-MdEdit-Delete:-MdDeleteOutline-Status-Column:-Add-color-coded-badges:-Green-for-Ongoing-(MdPlayCircleOutline)-Blue-for-Scheduled-(MdEventNote)-Red-for-Ended-(MdStopCircle).-Pagination:-Display-10-entries-per-page-with-navigation-for-next/previous-pages.-Include-a-dropdown-to-change-the-number-of-entries-per-page.-Action-Buttons:-Add-a-Create-New-Exam-button-above-the-table:-Gradient-style-(from-blue-500-to-blue-700)-with-hover-effects.-Icon:-MdAddCircleOutline.-Responsive-Design:-Mobile:-Collapse-table-into-cards-with-each-row-displayed-as-a-card.-Show-key-information:-Title,-Status,-Class-Year,-Start/End-Times,-Actions.-Tablet/Desktop:-Standard-table-layout-with-a-horizontal-scroll-for-smaller-screens.-Error-and-Feedback-Handling:-No-Results-Found:-Display-a-centered-message-with-an-icon-(MdWarning)-when-no-exams-match-the-filters-or-search.-Confirmation-Modals:-For-Delete-Action:-Use-a-modal-with-a-warning-icon-(MdErrorOutline).-For-Success:-Show-a-toast-notification-or-alert.-Animations-and-Interactions:-Add-subtle-hover-effects-for-table-rows-and-buttons.-Smooth-transitions-for-dropdowns-and-modals.-JavaScript-Logic:-Search-Functionality:-Filter-exams-by-title-or-paper-key-using-a-case-insensitive-substring-match.-Filters:-Dynamically-filter-results-based-on-date-range,-class-year,-and-exam-status.-Pagination:-Calculate-and-display-the-appropriate-rows-based-on-the-current-page-and-selected-entries-per-page.-Status-Calculation:-Compare-startTime-and-endTime-with-the-current-time-to-determine-and-display-the-status-dynamically.-Icons-Suggested:-MdManageSearch,-MdAssignment,-MdSearch,-MdClear,-MdDateRange,-MdFilterList,-MdCheckCircle,-MdVisibility,-MdEdit,-MdDeleteOutline,-MdAddCircleOutline,-MdWarning,-MdErrorOutline,-MdEventNote,-MdPlayCircleOutline,-MdStopCircle.
