cosmic-lawyer

As a user I want to sign in to cosmic-lawyer via a polished login page. Implement the Login page based on the existing JSX design (v2): two-column layout with BrandingPanel (courtroom illustration, gold spotlight, trust badges) and LoginCard (frosted-glass card, email input, password input with show/hide, forgot password link, Sign In CTA with gavel-strike animation, restricted access note). Mobile collapses to single column. Connects to existing authentication backend.

As a user I want to view key firm metrics on a dashboard after login. Implement the Dashboard page (v2): TopBar, Sidebar (Dashboard active), StatsCards (Total Cases, Active Cases, Completed Cases, Upcoming Hearings, Recently Added Clients, Pending Tasks), ActivityChart, RecentItems, QuickActions, Notifications panel, and Footer. Admin sees full metrics; User sees assigned tasks view. Based on existing JSX design.

As a user I want to view hearing schedules and daily/weekly plans on the Calendar page. Implement Calendar page (v2): full calendar view with monthly/weekly/daily toggle, hearing date markers, upcoming hearing alerts, IST timezone display, and event detail panel on click. Admin and User both access this page from Dashboard. Based on existing JSX design.

As an admin I want to generate and view reports on case activity on the Reports page. Implement Reports page (v2): ReportsHeader (Generate Report CTA), ReportFiltersBar (report type, date range, lawyer, status filters), ReportSummaryCards (Total Cases, Active, Completed, Pending), CasesByStatusChart (donut chart), CasesByLawyerChart (horizontal bar chart), MonthlyCaseActivityChart (multi-line area chart with IST year selector), ReportDataTable (sortable, searchable, paginated), ExportActionsBar (Export PDF/CSV/Print with gavel animation). Based on existing JSX design.

As a user I want to create, assign, and track tasks related to cases on the Tasks page. Implement Tasks page (v2): TasksPageHeader (with New Task FAB on mobile), TaskStatsStrip (Total, In Progress, Completed, Overdue), TaskFilterBar (List/Kanban toggle, status/priority/assignee/case/date filters), TaskBoard (List view with rows; Kanban with 4 columns — To Do, In Progress, Completed, Overdue; drag-and-drop cards), TaskDetailDrawer (title, status, priority, assignee, linked case, due date, description, sub-tasks, activity log, attachments). Based on existing JSX design.

As an admin I want to add team members, assign roles, and manage permissions on the Users page. Implement Users page (v2): PageHeader (Add New Member CTA), StatsStrip (Total Members, Active Lawyers, Associates & Staff, Pending Role Assignments), SearchFilterBar, UsersTable (avatar, name, role badge — gold/Admin, blue/Lawyer, grey/Associate/Staff, email, phone, assigned cases count, status toggle, actions — edit/delete/assign role, pagination, empty state), AddEditUserDrawer (form with name, email, phone, role, permissions checklist, status), RolePermissionsPanel (permissions matrix accordion). Based on existing JSX design.

As a user I want to add and manage client records on the Clients page. Implement Clients page (v2): client list/table with avatar, name, Client ID, phone, email, address, case count link, and actions (Edit, Delete, View Cases). Add/Edit client drawer with all fields and notes section. Client ID auto-generation. View all cases related to a client. Based on existing JSX design.

As a user I want to create, view, assign, and manage legal cases on the Cases page. Implement Cases page (v2): case list/table with columns for Case No., Title, Type, Court, Assigned Lawyer, Status badge, Priority badge, Next Hearing date, and Actions. Includes Create Case drawer/modal with all fields (title, number, type, court name, opponent details, description, dates, status, priority). Admin can assign cases to lawyers. Filtering by status and lawyer. Based on existing JSX design.

As a user I want to use backend APIs to create, assign, update, and track tasks. Implement FastAPI endpoints: POST /tasks, GET /tasks, GET /tasks/{id}, PUT /tasks/{id}, DELETE /tasks/{id}, PATCH /tasks/{id}/status. Fields: title, description, assigned_to, case_id, due_date, priority, status (To Do / In Progress / Completed / Overdue). Role-based: Admin can assign; Users see own tasks.

As an admin I want to use backend APIs to add team members, assign roles, and manage permissions. Implement FastAPI endpoints: GET /users, POST /users, PUT /users/{id}, DELETE /users/{id}, PATCH /users/{id}/role, GET /users/{id}/permissions, PUT /users/{id}/permissions. Roles: Admin, Lawyer, Associate, Staff. Permission matrix per module. Role-based access enforcement.

As a user I want to use backend APIs to retrieve and manage hearing schedules on the calendar. Implement FastAPI endpoints: GET /calendar/hearings (with date range filter), POST /calendar/hearings, PUT /calendar/hearings/{id}, DELETE /calendar/hearings/{id}. IST timezone handling. Integration with Cases next_hearing_date field. Alert/reminder scheduling hooks.

As a user I want to use backend APIs to create, retrieve, update, and delete cases. Implement FastAPI endpoints: POST /cases, GET /cases, GET /cases/{id}, PUT /cases/{id}, DELETE /cases/{id}, POST /cases/{id}/assign. Include case fields: title, number, type, court name, opponent details, description, start date, next hearing date, status, priority. Role-based access: Admins can assign; Users view assigned only. MySQL storage with Alembic migration.

As an admin I want to use backend APIs to generate reports on case activity. Implement FastAPI endpoints: GET /reports/cases-by-status, GET /reports/cases-by-lawyer, GET /reports/monthly-activity (with year/month params), GET /reports/export?format=pdf|csv. Aggregate queries from cases, tasks, clients. IST-aware date grouping. PDF/CSV export generation.

As a user I want to upload, categorize, preview, and attach documents to cases on the Documents page. Implement Documents page (v2): TopNavigationBar, Sidebar (Documents active), PageHeaderBreadcrumb, SearchFilterToolbar (case, category, file type, date range filters), UploadDropzone (drag-and-drop, progress bars, 50MB limit), DocumentStatsBar, DocumentGridListView (grid/list toggle, file-type icons, case tag, preview/download/attach actions), PaginationBar, and Footer. Based on existing JSX design.

As a user I want to view the event history of a case on the Timeline page. Implement Timeline page (v2): chronological timeline of case events, hearing history with notes, upcoming hearing reminders, case detail header, IST-formatted timestamps, and add-note interaction. Accessible from Cases page (Cases → Update Details → View History). Based on existing JSX design.

As a user I want to use backend APIs to manage client records. Implement FastAPI endpoints: POST /clients, GET /clients, GET /clients/{id}, PUT /clients/{id}, DELETE /clients/{id}, GET /clients/{id}/cases, POST /clients/{id}/notes. Auto-generate unique Client IDs. Store name, phone, email, address, notes. MySQL storage.

As a user I want to use backend APIs to view and record case timeline events. Implement FastAPI endpoints: GET /cases/{id}/timeline, POST /cases/{id}/timeline/events, PUT /cases/{id}/timeline/events/{event_id}, DELETE /cases/{id}/timeline/events/{event_id}. Store event type, description, hearing notes, IST timestamp. Linked to case ID.

As a user I want to use backend APIs to upload, retrieve, categorize, and attach documents to cases. Implement FastAPI endpoints: POST /documents/upload (multipart, max 50MB), GET /documents, GET /documents/{id}, PUT /documents/{id}, DELETE /documents/{id}, POST /documents/{id}/attach-case. Support PDF, DOCX, XLSX, images, video. File storage integration (local/S3). Category and case-link fields.

As a user I want to receive reminders for upcoming hearings and task deadlines via the notifications system. Implement backend notification service: scheduled jobs (APScheduler/Celery) to check upcoming hearing dates and task deadlines (IST), create notification records, deliver in-app alerts via WebSocket or polling endpoint GET /notifications, PATCH /notifications/{id}/read. Frontend notification bell badge updates in real time on TopBar.

As a user I want to use backend APIs to search clients by name, search cases by number, and filter cases by status or lawyer. Implement FastAPI endpoints: GET /search?q= (global search across clients and cases), GET /cases?status=&lawyer_id= (filtered), GET /clients?name= (filtered). Full-text search with MySQL LIKE or full-text index. Results paginated.

As a user I want all pages to be fully connected to the live backend APIs replacing mock data. Wire all page components (Dashboard, Cases, Clients, Documents, Tasks, Calendar, Timeline, Users, Reports) to their respective FastAPI endpoints using axios/fetch with JWT auth headers. Implement loading states, error boundaries, and empty states throughout. Handle IST timezone display consistently across all date fields.