Styled Modal - Copy this React, Mui Component to your project
Create-a-user-friendly-Teacher-Job-Type-Management-Page-for-an-admin-dashboard-in-a-teaching-jobs-portal.-This-page-allows-administrators-to-manage-the-types-of-teaching-jobs-available-on-the-platform,-such-as-Home-Tutor,-Private-School-Teacher,-Coaching-Tutor,-etc.-The-design-should-support-CRUD-(Create,-Read,-Update,-Delete)-operations-and-emphasize-efficiency,-clarity,-and-responsiveness.-1.-Header-Section-Page-Title:-Manage-Teacher-Job-Types.-Subtitle:-"Add,-edit,-or-delete-job-types-to-keep-the-platform-updated-with-relevant-teaching-opportunities."-Action-Button:-Add-New-Job-Type-button-with-a-"+"-icon-to-open-a-form-or-modal-for-creating-a-new-job-type.-2.-Job-Types-Table-Section-Display-a-dynamic-table-with-the-following-columns:-ID:-Auto-generated-identifier.-Job-Type:-Name-of-the-job-type-(e.g.,-Home-Tutor,-Private-School-Teacher).-Description:-Optional-field-with-a-brief-explanation-of-the-job-type.-Actions:-Edit:-Pencil-icon-to-update-the-job-type.-Delete:-Trash-icon-to-remove-the-job-type-(with-a-confirmation-modal).-Features:-Search-Bar:-To-filter-job-types-by-name.-Pagination:-For-a-large-number-of-job-types.-Sorting:-Sort-by-job-type-or-ID.-3.-Add/Edit-Job-Type-Modal-A-modal-or-dedicated-section-for-creating-or-updating-a-job-type.-Include:-Form-Fields:-Job-Type-Name:-Input-field-for-the-name-(e.g.,-Home-Tutor).-Description:-Text-area-for-additional-details-(optional).-Buttons:-Save:-To-add-or-update-the-job-type.-Cancel:-To-close-the-modal-without-saving.-Validation:-Prevent-duplicate-names-and-ensure-required-fields-are-filled.-4.-Delete-Confirmation-Modal-Modal-Content:-"Are-you-sure-you-want-to-delete-this-job-type?-This-action-cannot-be-undone."-Buttons:-Confirm:-Executes-the-delete-operation.-Cancel:-Closes-the-modal-without-deleting.-5.-Additional-Features-Error-Handling:-Messages-for-invalid-entries,-duplicate-names,-or-failed-operations.-Success-Notifications:-Toast-or-alert-messages-for-successful-actions-(e.g.,-"Job-type-added-successfully!").-Audit-Logs-(Optional):-Track-who-created,-updated,-or-deleted-job-types.-6.-Responsive-Design-Optimize-for-smaller-screens:-Replace-the-table-with-collapsible-cards-for-each-job-type.-Prioritize-essential-actions-like-Add-and-Search-for-mobile-users.-7.-Visual-and-UI-Enhancements-Use-professional-and-accessible-color-schemes:-Green-for-successful-actions.-Red-for-delete-confirmations.-Hover-effects-for-interactive-elements-like-table-rows-and-buttons.-Icons-next-to-headings-(e.g.,-briefcase-icon-near-Job-Type).-8.-Footer-Section-Include-links-for-quick-navigation:-Manage-Teachers.-Manage-Class-Categories.-Support.-This-Teacher-Job-Type-Page-will-provide-an-efficient-and-intuitive-way-to-manage-the-types-of-teaching-jobs-available,-ensuring-administrators-can-keep-the-portal-updated-and-relevant.
