# Modal Design Audit Report This file audits every modal in `client/src` against the premium **New Course Modal** design style (backdrop blur, `rounded-[2.5rem]` border-radius, and top-right watermark background icons). ### Summary - **🎨 Premium Modals:** 125 (real modals) + 1 flagged non-modal (Nav.tsx bottom nav) = 126 table rows - **⚠️ Legacy Modals (Needs Redesign):** 0 - **Last verified:** Modal redesign pass on `feature/modal-audit` worktree (dev branch). All listed modals carry the premium styling. Two modals were missing from the original audit and were added: the "New Chat / Group" drawer and "Attachment Preview" modal in `pages/Messages.tsx`. `pages/enrollments/EnrollmentsPage.tsx` had two modals originally mislabeled as premium — both were missing the watermark and `rounded-[2.5rem]` and have since been corrected. The mobile sidebar overlay in `components/Nav.tsx:577` is excluded per the audit scope (sidebar, not modal). Net real-modal count went from 123 (original audit, excluding the mislabeled Nav.tsx bottom-nav row) → **125** after adding the two Messages.tsx modals. | Status | Modal Name / Title | File Location | Line | Backdrop Blur | rounded-[2.5rem] | Watermark Icon | Required Changes | | :---: | :--- | :--- | :---: | :---: | :---: | :---: | :---: | ## Premium Modal Design Details (New Course Modal Reference) The New Course modal sets the premium design standard that all modals should follow. Below are the specific design details to replicate: ### Backdrop - Fixed position covering the entire viewport: `fixed inset-0` - Background color with opacity: e.g., `bg-[#002147]/60` (a dark blue at 60% opacity; adjust to match your theme's overlay color) - Backdrop blur: `backdrop-blur-sm` (Tailwind's small blur effect) - Z-index: `z-[150]` (high enough to stay above most content) - Flex container for centering: `flex items-center justify-center p-4` ### Modal Container - Background: `bg-card` (theme's card background color) - Border radius: `rounded-[2.5rem]` (large rounded corners) - Dimensions: `w-full max-w-xl max-h-[90vh]` (full width, max width, max height) - Layout: `flex flex-col` - Shadow: `shadow-2xl` - Overflow: `overflow-hidden` (to clip content with radius) - Animation: `animate-in zoom-in-95 duration-200` (fade and zoom-in entrance animation) - Border: `border border-border` (subtle border using the theme's border color) ### Header - Padding: `px-10 py-8` - Background: `bg-muted/50` (semi-transparent muted background) - Bottom border: `border-b border-border` - Layout: `flex justify-between items-center relative overflow-hidden flex-shrink-0` - Watermark icon: - Position: `absolute right-[-20px] top-[-20px]` - Opacity: `opacity-[0.03]` - Rotation: `rotate-12` - Icon: `` (or similar sparkle icon from your icon library) - Title: `text-2xl font-black text-text tracking-tight font-heading` - Subtitle: `text-xs font-bold text-text-muted uppercase tracking-widest mt-1` ### Close Button - Position: `relative z-10` - Size: `w-10 h-10` - Layout: `flex items-center justify-center` - Border radius: `rounded-xl` - Background: `bg-card` - Border: `border border-border` - Text color: `text-text-muted` - Hover effect: `hover:text-rose-500` - Transition: `transition-all` - Icon: `` ### Note Other modal content (forms, buttons, etc.) should follow your application's design system but must respect the modal container's rounded corners and `overflow-hidden` to maintain the curved clipping. --- | 🎨 Premium | **Download** | [AttachmentPreviewModal.tsx](file:///E:/nextgen/next-gen/client/src/components/AttachmentPreviewModal.tsx#L153) | 153 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **New Game / Puzzle** | [EdutainmentGames.tsx](file:///E:/nextgen/next-gen/client/src/components/EdutainmentGames.tsx#L1206) | 1206 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Mobile Bottom Nav** (not a modal) | [Nav.tsx](file:///E:/nextgen/next-gen/client/src/components/Nav.tsx#L561) | 561 | ✅ | ✅ | ✅ | Not a modal — listed here only to flag the original audit row was misclassified. The actual mobile sidebar overlay at Nav.tsx:577 is excluded per audit scope. | | 🎨 Premium | **Pay School Fees** | [PaynowPayment.tsx](file:///E:/nextgen/next-gen/client/src/components/PaynowPayment.tsx#L127) | 127 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Test Mode - Payment Initiated** | [PaynowPayment.tsx](file:///E:/nextgen/next-gen/client/src/components/PaynowPayment.tsx#L276) | 276 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Payment Initiated** | [PaynowPayment.tsx](file:///E:/nextgen/next-gen/client/src/components/PaynowPayment.tsx#L350) | 350 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Payment Successful!** | [PaynowPayment.tsx](file:///E:/nextgen/next-gen/client/src/components/PaynowPayment.tsx#L430) | 430 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [StudentSocialDoc.tsx](file:///E:/nextgen/next-gen/client/src/components/StudentSocialDoc.tsx#L103) | 103 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [AuditLogs.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/AuditLogs.tsx#L224) | 224 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Offboarding Details** | [Offboarding.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Offboarding.tsx#L240) | 240 | ✅ | ✅ | ✅ | None (upgraded to centered Modal with backdrop blur & watermark) | | 🎨 Premium | **Initiate User Offboarding** | [InitiateOffboardingModal.tsx](file:///E:/nextgen/next-gen/client/src/components/InitiateOffboardingModal.tsx#L1) | 1 | ✅ | ✅ | ✅ | None (built using shared Modal with live database user search & dropdown selectors) | | 🎨 Premium | **** | [Departments.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Departments.tsx#L783) | 783 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **** | [Departments.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Departments.tsx#L1018) | 1018 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Departments.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Departments.tsx#L1214) | 1214 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [AdmissionEnquiry.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/AdmissionEnquiry.tsx#L471) | 471 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [AdmissionEnquiry.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/AdmissionEnquiry.tsx#L662) | 662 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Complaints.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/Complaints.tsx#L262) | 262 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Complaints.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/Complaints.tsx#L417) | 417 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [PhoneCalls.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/PhoneCalls.tsx#L328) | 328 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [PhoneCalls.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/PhoneCalls.tsx#L738) | 738 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [PostalDispatch.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/PostalDispatch.tsx#L331) | 331 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [PostalDispatch.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/PostalDispatch.tsx#L709) | 709 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [VisitorLog.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/front-office/VisitorLog.tsx#L255) | 255 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Register Hostel** | [HostelPortal.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HostelPortal.tsx#L572) | 572 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Add Room** | [HostelPortal.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HostelPortal.tsx#L678) | 678 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Allocate Bed** | [HostelPortal.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HostelPortal.tsx#L764) | 764 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Onboard Staff** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L959) | 959 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1167) | 1167 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Staff Documents** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1435) | 1435 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Leave Audit Intel** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1487) | 1487 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New Payroll Run** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1567) | 1567 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Create Job Vacancy** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1606) | 1606 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Vacancy Details** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1702) | 1702 | ✅ | ✅ | ✅ | None (upgraded — was audit row 1690) | | 🎨 Premium | **Review Candidate** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1885) | 1885 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Register Candidate** | [HRManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/HRManagement.tsx#L1946) | 1946 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add Stock** | [Inventory.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Inventory.tsx#L739) | 739 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Issue School Asset** | [Inventory.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Inventory.tsx#L825) | 825 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Return Asset** | [Inventory.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Inventory.tsx#L1131) | 1131 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add New Item** | [Inventory.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Inventory.tsx#L1211) | 1211 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Register / Update Book** | [Library.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Library.tsx#L646) | 646 | ✅ | ✅ | ✅ | None (upgraded — was audit row "Book Details") | | 🎨 Premium | **Circulate Asset** | [Library.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Library.tsx#L719) | 719 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Finalize Circulation** | [Library.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Library.tsx#L839) | 839 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **General Modal / Overlay** | [NoticeBoard.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/NoticeBoard.tsx#L382) | 382 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Institutional Audit Report** | [Reports.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Reports.tsx#L484) | 484 | ✅ | ✅ | ✅ | None (upgraded — was audit row "General Modal / Overlay") | | 🎨 Premium | **Subject Marks Summary** | [Reports.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Reports.tsx#L620) | 620 | ✅ | ✅ | ✅ | None (upgraded — was audit row "General Modal / Overlay") | | 🎨 Premium | **Register Vehicle** | [TransportDashboard.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/TransportDashboard.tsx#L630) | 630 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Define Route** | [TransportDashboard.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/TransportDashboard.tsx#L741) | 741 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Allocate Transport** | [TransportDashboard.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/TransportDashboard.tsx#L884) | 884 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Assign Route Unit** | [TransportDashboard.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/TransportDashboard.tsx#L1001) | 1001 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Users.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Users.tsx#L386) | 386 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Users.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Users.tsx#L773) | 773 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Link Student to Parent** | [Users.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Users.tsx#L903) | 903 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Education Level** | [Settings.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Settings.tsx#L1040) | 1040 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Remove education level?** | [Settings.tsx](file:///E:/nextgen/next-gen/client/src/pages/admin/Settings.tsx#L1212) | 1212 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **New Section** | [Classes.tsx](file:///E:/nextgen/next-gen/client/src/pages/Classes.tsx#L467) | 467 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Classes.tsx](file:///E:/nextgen/next-gen/client/src/pages/Classes.tsx#L506) | 506 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Create Club / Edit Club** | [ClubManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/clubs_head/ClubManagement.tsx#L637) | 637 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Assign Leader** | [ClubManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/clubs_head/ClubManagement.tsx#L764) | 764 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Club Members** | [ClubManagement.tsx](file:///E:/nextgen/next-gen/client/src/pages/clubs_head/ClubManagement.tsx#L890) | 890 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New Crossword Puzzle** | [CrosswordPage.tsx](file:///E:/nextgen/next-gen/client/src/pages/crossword/CrosswordPage.tsx#L284) | 284 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Crossword Finished** | [CrosswordPage.tsx](file:///E:/nextgen/next-gen/client/src/pages/crossword/CrosswordPage.tsx#L797) | 797 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Server Runtime Logs** | [SysAdminDashboard.tsx](file:///E:/nextgen/next-gen/client/src/pages/dashboard/SysAdminDashboard.tsx#L371) | 371 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **General Modal / Overlay** | [EnrollmentsPage.tsx](file:///E:/nextgen/next-gen/client/src/pages/enrollments/EnrollmentsPage.tsx#L352) | 352 | ✅ | ✅ | ✅ | None (was mislabeled premium — missing watermark + rounded-[2.5rem], now corrected) | | 🎨 Premium | **Request Enrollment** | [EnrollmentsPage.tsx](file:///E:/nextgen/next-gen/client/src/pages/enrollments/EnrollmentsPage.tsx#L439) | 439 | ✅ | ✅ | ✅ | None (was mislabeled premium — missing watermark + rounded-[2.5rem], now corrected) | | 🎨 Premium | **Establish Event** | [Events.tsx](file:///E:/nextgen/next-gen/client/src/pages/Events.tsx#L396) | 396 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **New Exam** | [ExamViews.tsx](file:///E:/nextgen/next-gen/client/src/pages/exams/ExamViews.tsx#L282) | 282 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Finalize Transmission?** | [ExamViews.tsx](file:///E:/nextgen/next-gen/client/src/pages/exams/ExamViews.tsx#L878) | 878 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Create Fee Group** | [Fees.tsx](file:///E:/nextgen/next-gen/client/src/pages/Fees.tsx#L429) | 429 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Assign Fees** | [Fees.tsx](file:///E:/nextgen/next-gen/client/src/pages/Fees.tsx#L456) | 456 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Record Payment** | [Fees.tsx](file:///E:/nextgen/next-gen/client/src/pages/Fees.tsx#L486) | 486 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Edit Fee Group** | [Fees.tsx](file:///E:/nextgen/next-gen/client/src/pages/Fees.tsx#L560) | 560 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete bank account?** | [BankingAccounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/BankingAccounts.tsx#L255) | 255 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New / Edit bank account** | [BankingAccounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/BankingAccounts.tsx#L335) | 335 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete chart account?** | [ChartOfAccounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/ChartOfAccounts.tsx#L211) | 211 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New / Edit chart account** | [ChartOfAccounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/ChartOfAccounts.tsx#L347) | 347 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Revoke discount?** | [Discounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Discounts.tsx#L230) | 230 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Discount** | [Discounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Discounts.tsx#L294) | 294 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Assign Discount** | [Discounts.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Discounts.tsx#L368) | 368 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete expense?** | [Expenses.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Expenses.tsx#L432) | 432 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Reject expense?** | [Expenses.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Expenses.tsx#L463) | 463 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New Expense** | [Expenses.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Expenses.tsx#L551) | 551 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Revoke plan?** | [FeePlans.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/FeePlans.tsx#L255) | 255 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Apply Fee Plan** | [FeePlans.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/FeePlans.tsx#L313) | 313 | ✅ | ✅ | ✅ | None (upgraded — no separate Add/Edit modal exists; `/finance/plans/new` is a dead route) | | 🎨 Premium | **Add / Edit Invoice** | [Invoices.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Invoices.tsx#L258) | 258 | ✅ | ✅ | ✅ | None (drawer modal — watermark + rounded-[2.5rem] on inner panel) | | 🎨 Premium | **New payroll run** | [PayrollRuns.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/PayrollRuns.tsx#L328) | 328 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **View Payslip** | [Payslips.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Payslips.tsx#L263) | 263 | ✅ | ✅ | ✅ | None (drawer modal — watermark + rounded-[2.5rem] on inner panel) | | 🎨 Premium | **Remove member?** | [StudentGroupDetail.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/StudentGroupDetail.tsx#L108) | 108 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete group?** | [StudentGroups.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/StudentGroups.tsx#L230) | 230 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Group** | [StudentGroups.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/StudentGroups.tsx#L297) | 297 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Manage Group Members** | [StudentGroups.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/StudentGroups.tsx#L364) | 364 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete supplier?** | [Suppliers.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Suppliers.tsx#L216) | 216 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Supplier** | [Suppliers.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Suppliers.tsx#L283) | 283 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Record trip payment** | [TripDetail.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/TripDetail.tsx#L262) | 262 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Assign students to trip** | [TripDetail.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/TripDetail.tsx#L300) | 300 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Delete trip?** | [Trips.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Trips.tsx#L243) | 243 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Trip** | [Trips.tsx](file:///E:/nextgen/next-gen/client/src/pages/finance/Trips.tsx#L323) | 323 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Reject Leave Request** | [LeaveApproval.tsx](file:///E:/nextgen/next-gen/client/src/pages/hr/LeaveApproval.tsx#L309) | 309 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Add / Edit Staff** | [StaffDirectory.tsx](file:///E:/nextgen/next-gen/client/src/pages/hr/StaffDirectory.tsx#L242) | 242 | ✅ | ✅ | ✅ | None (drawer modal — watermark + rounded-[2.5rem] on inner panel) | | 🎨 Premium | **General Modal / Overlay** | [Books.tsx](file:///E:/nextgen/next-gen/client/src/pages/librarian/Books.tsx#L326) | 326 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Bulk Import** | [Books.tsx](file:///E:/nextgen/next-gen/client/src/pages/librarian/Books.tsx#L465) | 465 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Issue Book** | [Issues.tsx](file:///E:/nextgen/next-gen/client/src/pages/librarian/Issues.tsx#L340) | 340 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Return Book** | [Issues.tsx](file:///E:/nextgen/next-gen/client/src/pages/librarian/Issues.tsx#L526) | 526 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Report Card Modal** | [AcademicProgress.tsx](file:///E:/nextgen/next-gen/client/src/pages/parent/AcademicProgress.tsx#L791) | 791 | ✅ | ✅ | ✅ | None (upgraded — was audit row "Marks Detail Overlay") | | 🎨 Premium | **Preview Script Modal** | [AcademicProgress.tsx](file:///E:/nextgen/next-gen/client/src/pages/parent/AcademicProgress.tsx#L963) | 963 | ✅ | ✅ | ✅ | None (upgraded — audit row "Term Selection Overlay" referred to a non-existent modal; corrected to match actual purpose) | | 🎨 Premium | **** | [Profile.tsx](file:///E:/nextgen/next-gen/client/src/pages/Profile.tsx#L557) | 557 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Preview Modal** | [Assignments.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Assignments.tsx#L969) | 969 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **View Assignment Details** | [Assignments.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Assignments.tsx#L747) | 747 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **View Homework Details** | [Homework.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Homework.tsx#L91) | 91 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Submit Homework** | [Homework.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Homework.tsx#L291) | 291 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **View Test Details** | [Tests.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Tests.tsx#L89) | 89 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Take / Start Test** | [Tests.tsx](file:///E:/nextgen/next-gen/client/src/pages/student/Tests.tsx#L284) | 284 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Learner Registry** | [Students.tsx](file:///E:/nextgen/next-gen/client/src/pages/Students.tsx#L347) | 347 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **General Modal / Overlay** | [Assignments.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Assignments.tsx#L565) | 565 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Create Assignment** | [Assignments.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Assignments.tsx#L716) | 716 | ✅ | ✅ | ✅ | None (upgraded — watermark icon swapped from generic Sparkles to PlusCircle) | | 🎨 Premium | **Grade Submission** | [Assignments.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Assignments.tsx#L812) | 812 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **Create Activity** | [Extracurriculars.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Extracurriculars.tsx#L520) | 520 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Post Announcement** | [Extracurriculars.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Extracurriculars.tsx#L582) | 582 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Add Student** | [Extracurriculars.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Extracurriculars.tsx#L617) | 617 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Edit Activity** | [Extracurriculars.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Extracurriculars.tsx#L727) | 727 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Create Homework** | [Homework.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Homework.tsx#L343) | 343 | ✅ | ✅ | ✅ | None (upgraded — rounded-3xl → rounded-[2.5rem]; watermark Sparkles → BookOpen) | | 🎨 Premium | **Homework Details** | [Homework.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Homework.tsx#L484) | 484 | ✅ | ✅ | ✅ | None (upgraded — drawer modal) | | 🎨 Premium | **Grade Homework** | [Homework.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Homework.tsx#L563) | 563 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **New Course** | [MyCourses.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/MyCourses.tsx#L377) | 377 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **** | [Students.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Students.tsx#L393) | 393 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Add** | [TeacherTools.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/TeacherTools.tsx#L672) | 672 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **Create Test** | [Tests.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Tests.tsx#L355) | 355 | ✅ | ✅ | ✅ | None (upgraded — rounded-3xl → rounded-[2.5rem]; watermark Sparkles → PlusCircle) | | 🎨 Premium | **Test Details** | [Tests.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Tests.tsx#L508) | 508 | ✅ | ✅ | ✅ | None (upgraded — drawer modal) | | 🎨 Premium | **Grade Test** | [Tests.tsx](file:///E:/nextgen/next-gen/client/src/pages/teacher/Tests.tsx#L587) | 587 | ✅ | ✅ | ✅ | None (upgraded) | | 🎨 Premium | **** | [Teachers.tsx](file:///E:/nextgen/next-gen/client/src/pages/Teachers.tsx#L385) | 385 | ✅ | ✅ | ✅ | None (already premium) | | 🎨 Premium | **New Chat / New Group** | [Messages.tsx](file:///E:/nextgen/next-gen/client/src/pages/Messages.tsx#L740) | 740 | ✅ | ✅ | ✅ | None (drawer modal — watermark + rounded-r-[2.5rem] on inner panel; was missing from original audit) | | 🎨 Premium | **Attachment Preview** | [Messages.tsx](file:///E:/nextgen/next-gen/client/src/pages/Messages.tsx#L856) | 856 | ✅ | ✅ | ✅ | None (was missing from original audit) | --- # Premium Modal Redesign Specification (UX & Technical Details) To elevate all legacy modals to the premium standard of the **New Course Modal**, use the following unified design token blueprint. This ensures consistency in visual rhythm, depth, accessibility, and interactive micro-interactions. ```mermaid graph TD Backdrop["Backdrop Overlay
bg-[#002147]/60 backdrop-blur-sm z-[150]"] --> Container["Modal Container
bg-card rounded-[2.5rem] shadow-2xl border border-border overflow-hidden animate-in zoom-in-95"] Container --> Header["Header Block
px-10 py-8 bg-muted/50 border-b relative overflow-hidden flex-shrink-0"] Container --> Form["Form & Content Area
p-10 space-y-6 overflow-y-auto flex-1"] Header --> Watermark["Watermark Icon
absolute right-[-20px] top-[-20px] opacity-[0.03] rotate-12"] Header --> TitleSec["Title Section
text-2xl font-black + text-xs uppercase tracking-widest subtitle"] Header --> CloseBtn["Close Button
relative z-10 w-10 h-10 rounded-xl bg-card border hover:text-rose-500 hover:border-rose-500/20"] Form --> FormInputs["Premium Fields
Labels: tracking-[2px] uppercase
Inputs: rounded-2xl bg-muted/50 focus:ring-4"] ``` --- ## 1. Unified CSS Token Blueprint ### A. Backdrop & Portal * **Tailwind Class:** `fixed inset-0 bg-[#002147]/60 backdrop-blur-sm z-[150] flex items-center justify-center p-4` * **Portal Requirement (mandatory):** Always render the modal via a React portal to `document.body`, e.g. ```tsx import { createPortal } from 'react-dom'; // ... {showModal && createPortal(
setShowModal(false)}> {/* modal panel */}
, document.body )} ``` `position: fixed` anchors to the **viewport** by default. **However**, if any ancestor has `transform`, `filter`, `perspective`, `will-change: transform`, or `contain: [layout|paint|strict|content]` set, that ancestor becomes the containing block instead and the backdrop is clipped to its bounding box. This is a real failure mode in this codebase — pages with active CSS animations (e.g. `animate-spin` on a status icon inside a card, `group-hover:scale-110` on a tile icon) silently create that containing block and the full-viewport backdrop renders only inside the transformed ancestor's box. Portaling to `document.body` removes the modal from the page's React subtree and guarantees the backdrop covers the full viewport regardless of any ancestor styling. Click-outside-to-close (close on backdrop click + `stopPropagation` on the panel) is also wired up here so the dark area is interactive, not just visual. * **UX/UI Rationale:** * The `#002147` navy background creates a deep brand-aligned overlay instead of generic grey/black transparency. * `backdrop-blur-sm` filters out complex background dashboard content, lowering cognitive load and creating a clear focus state. * Centered positioning (`items-center justify-center`) with outer padding (`p-4`) ensures the modal doesn't clip on small viewport sizes. * Portaling to `document.body` is mandatory — see above. ### B. Modal Container * **Tailwind Class:** `bg-card rounded-[2.5rem] w-full max-w-xl max-h-[90vh] flex flex-col shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200 border border-border` * **UX/UI Rationale:** * `rounded-[2.5rem]` provides a smooth, modern organic shape resembling high-end mobile application sheets. * `overflow-hidden` clips any child elements (like form scroll zones or header backgrounds) to preserve the rounded corners. * Entry animations (`animate-in zoom-in-95 duration-200`) prevent jarring page popups, creating a polished transition. ### C. Header Block * **Tailwind Class:** `px-10 py-8 bg-muted/50 border-b border-border flex justify-between items-center relative overflow-hidden flex-shrink-0` * **UX/UI Rationale:** * Generous padding (`px-10 py-8`) establishes breathing room for scanning headings. * `relative overflow-hidden` allows watermark icons to be absolutely positioned inside the header without breaking out of boundaries. ### D. Header Title & Subtitle * **Title Class:** `text-2xl font-black text-text tracking-tight font-heading` * **Subtitle Class:** `text-xs font-bold text-text-muted uppercase tracking-widest mt-1` * **UX/UI Rationale:** * Tight font-heading tracking looks compact and modern. * Subtitles act as metadata summaries (e.g., "Establish new academic record") rather than leaving inputs unexplained. ### E. Background Watermark Icon * **Tailwind Class:** `absolute right-[-20px] top-[-20px] opacity-[0.03] rotate-12` * **Sizing:** `size={180}` (or `size={200}` for wider modals) * **UX/UI Rationale:** * A barely-visible, rotated decorative icon provides immediate, pre-attentive semantic context (e.g., a Coins icon suggests a payment context). ### F. Standardized Close Button * **Tailwind Class:** `relative z-10 w-10 h-10 flex items-center justify-center rounded-xl bg-card border border-border text-text-muted hover:text-rose-500 hover:border-rose-500/20 hover:bg-rose-50/5 transition-all` * **Content:** Lucide `` (never raw text `×`). * **UX/UI Rationale:** * Elevated click target (`w-10 h-10` with `rounded-xl`) makes closing easy. * Transition from standard borders to a soft rose alert color on hover provides reactive feedback. --- ## 2. Detailed Legacy Modals Redesign Specifications (Grouped by File) Below is the file-by-file specification of required changes for each of the 80 legacy modals, showing the exact class names, sub-text copy, and contextual Lucide icons to use as watermarks. --- ### 📂 File: `client/src/pages/admin/HRManagement.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **1435** | **Staff Documents** | `` | Add `relative overflow-hidden flex-shrink-0` to the header. Insert watermark absolute container. Update close button to standard block with ``. | | **1487** | **Leave Audit Intel** | `` | Add `relative overflow-hidden` and `flex-shrink-0` to header. Set subtitle to `"Audit staff time-off request history"`. Insert watermark. | | **1567** | **New Payroll Run** | `` | Add `relative overflow-hidden` and `flex-shrink-0` to header. Set subtitle to `"Generate new batch salary transaction sheet"`. Insert watermark. | | **1606** | **Create Job Vacancy** | `` | Add `relative overflow-hidden` and `flex-shrink-0` to header. Set subtitle to `"Post new employment opportunity details"`. Insert watermark. | | **1690** | **General Modal / Overlay** (Candidate Details) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Review applicant credentials and hiring pipeline status"`. Insert watermark. | | **1873** | **Review Candidate** (Interview details) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Submit final feedback and score notes"`. Insert watermark. | | **1934** | **Register Candidate** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Add new candidate to recruitment database"`. Insert watermark. | --- ### 📂 File: `client/src/pages/admin/Inventory.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **739** | **Add Stock** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Update physical inventory levels"`. Insert watermark. | | **821** | **General Modal / Overlay** (Stock Details) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Detailed item ledger and movement ledger"`. Insert watermark. | | **1126** | **Return Asset** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Process item return back to warehouse"`. Insert watermark. | | **1202** | **Add New Item** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Create new listing in product catalog"`. Insert watermark. | --- ### 📂 File: `client/src/pages/admin/Library.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **646** | **General Modal / Overlay** (Book Details) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"View book catalog details and availability"`. Insert watermark. | | **718** | **Circulate Asset** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Lend asset to student or staff member"`. Insert watermark. | | **835** | **Finalize Circulation** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Review returning books and assess fees"`. Insert watermark. | --- ### 📂 File: `client/src/pages/admin/Reports.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **484** | **General Modal / Overlay** (Report Config) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Configure visual report generation parameters"`. Insert watermark. | | **614** | **General Modal / Overlay** (Export Details) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Download analytics output spreadsheet"`. Insert watermark. | --- ### 📂 File: `client/src/pages/admin/Users.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **903** | **Link Student to Parent** | `` | Add `relative overflow-hidden` on header. Set subtitle to `"Associate academic profile with parent accounts"`. Insert watermark. | --- ### 📂 File: `client/src/pages/admin/Settings.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **1040** | **Add / Edit Education Level** | `` | None (already premium) | | **1212** | **Remove education level?** | `` | None (already premium) | --- ### 📂 File: `client/src/pages/clubs_head/ClubManagement.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **637** | **General Modal / Overlay** (Create Club) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Establish new student society or organization"`. Insert watermark. | | **764** | **General Modal / Overlay** (Assign Leader) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Appoint student leadership board officials"`. Insert watermark. | | **890** | **General Modal / Overlay** (Club Members) | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Manage enrollment and society roster"`. Insert watermark. | --- ### 📂 File: `client/src/pages/crossword/CrosswordPage.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **284** | **New Crossword Puzzle** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Design crossword layout and character hints"`. Insert watermark. | | **797** | **Crossword Finished** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Congratulations! Grid solved successfully"`. Insert watermark. | --- ### 📂 File: `client/src/pages/dashboard/SysAdminDashboard.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **371** | **Server Runtime Logs** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Inspect live system events and process stdout"`. Insert watermark. | --- ### 📂 File: `client/src/pages/exams/ExamViews.tsx` | Line | Modal Name / Context | Watermark Icon | Subtitle & Action Required | | :--- | :--- | :--- | :--- | | **878** | **Finalize Transmission?** | `` | Add `relative overflow-hidden` to header. Set subtitle to `"Publish results to student and parent dashboards"`. Insert watermark. | --- ### 📂 File: `client/src/pages/Fees.tsx` | Line | Modal Name / Context | Watermark Icon | Required Style Transformations | | :--- | :--- | :--- | :--- | | **429** | **Create Fee Group** | `` | Change backdrop from `bg-slate-900/60` to `bg-[#002147]/60 backdrop-blur-sm z-[150]`. Update container boundary: `rounded-3xl` to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Replace close text button `×` with standardized close `