# 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: `<Sparkles size={180} />` (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: `<X size={20} />`

### 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<br/>bg-[#002147]/60 backdrop-blur-sm z-[150]"] --> Container["Modal Container<br/>bg-card rounded-[2.5rem] shadow-2xl border border-border overflow-hidden animate-in zoom-in-95"]
    Container --> Header["Header Block<br/>px-10 py-8 bg-muted/50 border-b relative overflow-hidden flex-shrink-0"]
    Container --> Form["Form & Content Area<br/>p-10 space-y-6 overflow-y-auto flex-1"]
    Header --> Watermark["Watermark Icon<br/>absolute right-[-20px] top-[-20px] opacity-[0.03] rotate-12"]
    Header --> TitleSec["Title Section<br/>text-2xl font-black + text-xs uppercase tracking-widest subtitle"]
    Header --> CloseBtn["Close Button<br/>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<br/>Labels: tracking-[2px] uppercase<br/>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(
    <div className="fixed inset-0 bg-[#002147]/60 backdrop-blur-sm z-[150] flex items-center justify-center p-4"
         onClick={() => setShowModal(false)}>
      {/* modal panel */}
    </div>,
    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 `<X size={20} />` (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** | `<FolderOpen size={180} />` | Add `relative overflow-hidden flex-shrink-0` to the header. Insert watermark absolute container. Update close button to standard block with `<X />`. |
| **1487** | **Leave Audit Intel** | `<CalendarDays size={180} />` | 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** | `<Coins size={180} />` | 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** | `<Briefcase size={180} />` | 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) | `<UserCheck size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Review applicant credentials and hiring pipeline status"`. Insert watermark. |
| **1873** | **Review Candidate** (Interview details) | `<ClipboardCheck size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Submit final feedback and score notes"`. Insert watermark. |
| **1934** | **Register Candidate** | `<UserPlus size={180} />` | 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** | `<Package size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Update physical inventory levels"`. Insert watermark. |
| **821** | **General Modal / Overlay** (Stock Details) | `<Layers size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Detailed item ledger and movement ledger"`. Insert watermark. |
| **1126** | **Return Asset** | `<Undo2 size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Process item return back to warehouse"`. Insert watermark. |
| **1202** | **Add New Item** | `<Tag size={180} />` | 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) | `<BookOpen size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"View book catalog details and availability"`. Insert watermark. |
| **718** | **Circulate Asset** | `<ArrowRightLeft size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Lend asset to student or staff member"`. Insert watermark. |
| **835** | **Finalize Circulation** | `<CheckCircle2 size={180} />` | 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) | `<BarChart3 size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Configure visual report generation parameters"`. Insert watermark. |
| **614** | **General Modal / Overlay** (Export Details) | `<Download size={180} />` | 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** | `<Link2 size={180} />` | 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** | `<BookOpen size={200} />` | None (already premium) |
| **1212** | **Remove education level?** | `<Trash2 size={180} />` | 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) | `<Compass size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Establish new student society or organization"`. Insert watermark. |
| **764** | **General Modal / Overlay** (Assign Leader) | `<Crown size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Appoint student leadership board officials"`. Insert watermark. |
| **890** | **General Modal / Overlay** (Club Members) | `<Users size={180} />` | 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** | `<Grid size={180} />` | Add `relative overflow-hidden` to header. Set subtitle to `"Design crossword layout and character hints"`. Insert watermark. |
| **797** | **Crossword Finished** | `<Trophy size={180} />` | 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** | `<Terminal size={180} />` | 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?** | `<Send size={180} />` | 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** | `<Coins size={180} />` | 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 `<button>` container holding `<X size={20} />`. |
| **456** | **Assign Fees** | `<UserPlus size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **486** | **Record Payment** | `<CreditCard size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **560** | **Edit Fee Group** | `<Edit3 size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/BankingAccounts.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **255** | **Delete bank account?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **327** | **Add/Edit Account** | `<Landmark size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/ChartOfAccounts.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **211** | **Delete chart account?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **339** | **Add/Edit Ledger** | `<FileSpreadsheet size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Discounts.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **230** | **Revoke discount?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **284** | **Add/Edit Discount** | `<Percent size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **358** | **Assign Discount** | `<UserCheck size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Expenses.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **432** | **Delete expense?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **463** | **Reject expense?** | `<XOctagon size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **551** | **New Expense** | `<PlusCircle size={200} />` | None (already premium) |

---

### 📂 File: `client/src/pages/finance/FeePlans.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **255** | **Revoke plan?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **305** | **Add/Edit Fee Plan** | `<CalendarDays size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Invoices.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **258** | **Add/Edit Invoice** | `<Receipt size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/PayrollRuns.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **328** | **New Payroll Run** | `<Wallet size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Payslips.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **263** | **View Payslip** | `<Receipt size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/StudentGroupDetail.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **108** | **Remove Group Member?** | `<UserMinus size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/StudentGroups.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **230** | **Delete Group?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **289** | **Add/Edit Group** | `<Users size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **356** | **Manage Group Members** | `<UserCheck size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Suppliers.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **216** | **Delete Supplier?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **278** | **Add/Edit Supplier** | `<Truck size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/TripDetail.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **262** | **Record Trip Payment** | `<CreditCard size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **296** | **Assign Students to Trip** | `<Bus size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/finance/Trips.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **243** | **Delete Trip?** | `<AlertTriangle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |
| **318** | **Add/Edit Trip** | `<Compass size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/hr/LeaveApproval.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **309** | **Reject Leave Request** | `<CalendarX size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/hr/StaffDirectory.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **242** | **Add/Edit Staff** | `<UserPlus size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close text button with standard icon. |

---

### 📂 File: `client/src/pages/parent/AcademicProgress.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **767** | **Marks Detail Overlay** | `<Award size={180} />` | Add `relative overflow-hidden` on header. Insert watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **936** | **Term Selection Overlay** | `<CalendarDays size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

---

### 📂 File: `client/src/pages/student/Assignments.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **942** | **View Assignment details** | `<FileText size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **969** | **Preview Modal** | `<Eye size={180} />` | None (already premium) |

---

### 📂 File: `client/src/pages/student/Homework.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **90** | **View Homework details** | `<BookOpen size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **297** | **Submit Homework** | `<UploadCloud size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

---

### 📂 File: `client/src/pages/student/Tests.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **88** | **View Test details** | `<FileQuestion size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **298** | **Take/Start Test** | `<Timer size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

---

### 📂 File: `client/src/pages/teacher/Assignments.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **716** | **Create Assignment** | `<PlusCircle size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **803** | **Grade Submission** | `<CheckSquare size={180} />` | Add `relative overflow-hidden` on header. Insert watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

---

### 📂 File: `client/src/pages/teacher/Homework.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **343** | **Create Homework** | `<BookOpen size={180} />` | Update container to `rounded-[2.5rem]`. Add standard close button structure with `<X size={20} />` and hover states. |
| **476** | **Homework Details** | `<BookOpen size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **556** | **Grade Homework** | `<CheckSquare size={180} />` | Add `relative overflow-hidden` on header. Insert watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

---

### 📂 File: `client/src/pages/teacher/Tests.tsx`

| Line | Modal Name / Context | Watermark Icon | Required Style Transformations |
| :--- | :--- | :--- | :--- |
| **355** | **Create Test** | `<PlusCircle size={180} />` | Update container to `rounded-[2.5rem]`. Standardize header background, title tracking, and close button structure. |
| **500** | **Test Details** | `<FileQuestion size={180} />` | Change backdrop. Update container to `rounded-[2.5rem]`. Add `relative overflow-hidden` on header. Add watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |
| **580** | **Grade Test** | `<CheckSquare size={180} />` | Add `relative overflow-hidden` on header. Insert watermark. Re-align title structure to premium tracking. Replace close button with standard icon. |

