Exam Management - Copy this React, Tailwind Component to your project

Design-a-professional-and-user-friendly-Exam-Management-Page-for-the-admin-dashboard-of-a-teaching-jobs-portal.-This-page-allows-administrators-to-manage-all-aspects-of-exams,-including-creating,-viewing,-editing,-and-deleting-exams.-The-page-should-be-designed-with-CRUD-(Create,-Read,-Update,-Delete)-functionality-and-should-integrate-the-following-fields-from-the-Exam-model:-name,-description,-subject,-level,-class-category,-total-marks,-duration,-and-timestamps-(created_at-and-updated_at).-The-design-should-ensure-clarity,-efficiency,-and-responsiveness-while-presenting-relevant-exam-data-and-actions-in-a-clean-layout.-1.-Header-Section-Page-Title:-Manage-Exams.-Subtitle:-"Add,-edit,-or-delete-exams-and-organize-them-by-subject,-level,-and-class-category."-Action-Button:-Add-New-Exam-button-with-a-"+"-icon-to-open-a-form-or-modal-for-creating-a-new-exam.-2.-Exams-Table-Section-Display-a-dynamic-table-that-lists-all-exams-with-the-following-columns:-ID:-Auto-generated-identifier.-Name:-Name-of-the-exam-(e.g.,-Math-Midterm,-Science-Final).-Subject:-The-subject-associated-with-the-exam-(e.g.,-Mathematics,-Science).-Level:-The-difficulty-level-(e.g.,-Beginner,-Intermediate,-Advanced).-Class-Category:-The-associated-class-range-(e.g.,-6-to-8).-Total-Marks:-The-maximum-score-achievable.-Duration:-Duration-in-minutes.-Actions:-View:-Eye-icon-to-view-detailed-information-about-the-exam.-Edit:-Pencil-icon-to-update-exam-details.-Delete:-Trash-icon-to-remove-the-exam-(with-a-confirmation-modal).-Features:-Search-Bar:-To-filter-exams-by-name,-subject,-or-class-category.-Filters:-Dropdowns-for-filtering-by-subject,-level,-and-class-category.-Pagination:-For-managing-a-large-number-of-exams.-3.-Add/Edit-Exam-Modal-A-modal-or-dedicated-section-for-adding-or-editing-an-exam.-Include:-Form-Fields:-Name:-Input-field-for-the-exam-name.-Description:-Text-area-for-additional-details-(optional).-Subject:-Dropdown-to-select-from-available-subjects.-Level:-Dropdown-for-selecting-the-difficulty-level.-Class-Category:-Dropdown-for-selecting-the-associated-class-range.-Total-Marks:-Input-field-for-the-maximum-marks.-Duration:-Input-field-for-duration-in-minutes.-Buttons:-Save:-To-create-or-update-the-exam.-Cancel:-To-close-the-modal-without-saving-changes.-Validation:-Ensure-all-required-fields-are-filled-and-values-are-valid.-4.-View-Exam-Details-Modal-A-modal-that-shows-detailed-information-about-the-exam,-including:-Name.-Description.-Subject.-Level.-Class-Category.-Total-Marks.-Duration.-Created-At-and-Updated-At-timestamps.-Include-a-close-button-to-exit-the-modal.-5.-Delete-Confirmation-Modal-Modal-Content:-"Are-you-sure-you-want-to-delete-this-exam?-This-action-cannot-be-undone."-Buttons:-Confirm:-Executes-the-delete-operation.-Cancel:-Closes-the-modal-without-deleting.-6.-Analytics-Section-(Optional)-Include-basic-analytics-to-give-the-admin-insights,-such-as:-Total-number-of-exams.-Exams-grouped-by-subject,-level,-or-class-category-(displayed-as-charts-or-graphs).-7.-Responsive-Design-Optimize-the-layout-for-smaller-screens:-Replace-the-table-with-a-collapsible-list-view-for-exams.-Ensure-action-buttons-(e.g.,-Add,-Edit,-Delete)-are-touch-friendly.-8.-Notifications-and-Error-Handling-Show-toast-notifications-for:-Successful-actions-(e.g.,-"Exam-added-successfully!").-Errors-(e.g.,-"Failed-to-delete-exam.-Please-try-again.").-9.-Footer-Section-Quick-links-for-navigation-to-related-pages-like:-Manage-Subjects.-Manage-Class-Categories.-Manage-Levels.-This-Exam-Management-Page-should-provide-an-intuitive-interface-for-handling-exams,-ensuring-data-integrity,-and-improving-administrative-efficiency."-You-said:-recruiter-dashboard-page-ChatGPT-said:-ChatGPT-Here’s-a-detailed-text-prompt-for-designing-a-Recruiter-Dashboard-Page-tailored-to-your-project:-Design-Prompt:-"Create-a-modern-and-professional-Recruiter-Dashboard-Page-for-a-platform-connecting-teachers-with-teaching-jobs.-This-page-serves-as-the-central-hub-for-recruiters-(schools,-organizations,-or-individuals)-to-manage-and-monitor-their-activities,-including-viewing-posted-jobs,-tracking-teacher-applications,-and-managing-interviews.-The-design-should-prioritize-user-engagement,-data-visualization,-and-an-intuitive-layout.-1.-Header-Section-Page-Title:-Recruiter-Dashboard.-Subtitle:-"Overview-of-your-posted-jobs,-applications,-and-recruitment-progress."-Welcome-Message:-"Welcome-back,-[Recruiter-Name]!-Here’s-what’s-happening-with-your-job-postings."-Date/Time-Display:-Current-date-and-time-at-the-top-right-corner.-2.-Key-Metrics-(Statistics-Cards)-Show-summarized-statistics-at-the-top-in-card-format:-Active-Job-Postings:-Number-of-currently-open-job-postings.-Applications-Received:-Total-number-of-applications-for-all-active-jobs.-Interviews-Scheduled:-Number-of-upcoming-interviews.-Hires-Completed:-Number-of-teachers-hired-successfully.-Each-card-should-have:-A-relevant-icon.-Dynamic-numbers-updated-in-real-time.-A-link-to-drill-down-for-more-details.-3.-Job-Postings-Section-Table/List-View:-Display-active-and-past-job-postings-with-the-following-columns:-Job-Title:-Name-of-the-teaching-position.-Applications:-Number-of-applications-received.-Status:-Current-status-(e.g.,-Open,-Closed,-In-Progress).-Actions:-Buttons-for:-View-Details:-To-see-job-specific-stats-and-applications.-Edit:-To-modify-the-job-posting.-Close-Job:-To-archive-the-posting.-4.-Recent-Applications-Section-Show-the-latest-teacher-applications-with-a-brief-overview:-Teacher-Name:-Name-of-the-applicant.-Applied-For:-Job-title-or-position.-Application-Date:-When-they-applied.-Actions:-View-Profile:-To-see-teacher-details.-Shortlist/Reject:-Buttons-for-quick-decision-making.-5.-Recruitment-Progress-Section-Visual-representation-of-progress-using:-Bar-Chart-or-Funnel-Chart:-To-show-the-recruitment-pipeline-(e.g.,-Applications-→-Shortlisted-→-Interviewed-→-Hired).-Pie-Chart:-Breakdown-of-applications-by-job-posting-or-status.-6.-Notifications-Section-A-panel-or-dropdown-for-real-time-notifications,-including:-New-applications-received.-Teachers-responding-to-interview-invites.-Reminders-for-scheduled-interviews.-7.-Quick-Actions-Section-Highlight-important-actions-with-prominent-buttons/icons:-Post-a-New-Job.-View-Shortlisted-Candidates.-Schedule-Interviews.-Manage-Job-Postings.-8.-Insights/Recommendations-Section-(Optional)-Provide-AI-powered-insights,-such-as:-Recommended-teacher-profiles-based-on-job-postings.-Tips-to-attract-more-applicants.-Insights-on-similar-job-postings-in-the-market.-9.-Footer-Section-Include:-Links-to-related-pages-(e.g.,-Manage-Teachers,-Reports,-Settings).-Support-contact-information-or-a-feedback-option.-10.-Responsive-Design-Optimize-for-smaller-screens:-Replace-tables-with-collapsible-lists.-Ensure-charts-and-cards-adapt-gracefully-to-screen-sizes.-Visual-Design-Notes-Use-a-clean-and-professional-color-scheme:-Primary:-Shades-of-blue-or-green-for-trust-and-activity.-Accent:-Yellow-or-orange-for-call-to-action-buttons.-Icons-and-visual-aids-for-quick-identification-of-sections/actions.-Hover-effects-for-interactive-elements.