# v1.0 Design Specifications - For v2.0 Replication ## Overview This document captures the complete design and functionality of the v1.0 website (Next.js + Express) to guide the v2.0 Laravel + Inertia + Vue implementation. ## Visual Design ### Color Scheme - **Primary Background**: Dark slate blue/gray (#3f4a5c, #4a5568) - **Secondary Background**: Medium gray/brown (#6b6b6b, #7a7a7a) - **Card Background**: White (#ffffff) - **Text Primary**: Black (#000000) - **Text Secondary**: Gray (#6b7280, #9ca3af) - **Accent Green**: Light green for status badges (#d1fae5, #10b981) - **Button Green**: Medium green (#6b9080, #5a8070) - **Button Hover**: Darker green (#4a6050) ### Typography - **Main Heading**: Large, bold, white text - "ELIZABETH KRAGH v. MONTANA ASSOCIATION OF THE DEAF" - **Subheading**: Light gray text - "Court Docket & Legal Documents" - **Section Headers**: Bold, centered - "Case Information", "Court Docket Entries" - **Body Text**: Standard weight, readable size - **Dates**: Small, gray text above entry titles ### Layout Structure #### 1. Hero Section (Top) ``` ┌─────────────────────────────────────────────────────────┐ │ Dark Blue Background │ │ │ │ ELIZABETH KRAGH │ │ v. │ │ MONTANA ASSOCIATION OF THE DEAF │ │ │ │ Court Docket & Legal Documents │ │ │ │ Stay Informed │ │ [Email Input] [Subscribe to Updates Button] │ │ │ └─────────────────────────────────────────────────────────┘ ``` #### 2. Case Information Card ``` ┌─────────────────────────────────────────────────────────┐ │ Case Information │ │ │ │ Case Title │ │ Elizabeth Kragh v. Montana Association of the Deaf │ │ │ │ Status │ │ [Active Litigation Badge] │ │ │ │ Last Updated │ │ November 12, 2025 │ │ │ └─────────────────────────────────────────────────────────┘ ``` #### 3. Court Docket Entries Section ``` ┌─────────────────────────────────────────────────────────┐ │ Court Docket Entries │ │ │ │ Chronological record of all court filings and │ │ proceedings │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ [#] May 7, 2025 [▼] │ │ │ │ Complaint Exhibits │ │ │ │ │ │ │ │ Brief Summary: │ │ │ │ The exhibits show the Montana Association... │ │ │ │ │ │ │ │ [View PDF Button] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ [#] May 7, 2025 [▼] │ │ │ │ Affidavit in Support of Complaint... │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ... (more entries) │ │ │ └─────────────────────────────────────────────────────────┘ ``` ## Component Specifications ### 1. Email Subscription Form - **Input Field**: - Placeholder: "Enter your email address" - White background - Rounded corners - Border styling - **Button**: - Text: "Subscribe to Updates" - Green background (#6b9080) - White text - Icon: Mail/envelope icon - Hover effect: Darker green ### 2. Case Information Card - **Container**: White background, rounded corners, shadow - **Labels**: Gray text, smaller font - **Values**: Black text, larger font, bold - **Status Badge**: - Light green background (#d1fae5) - Dark green text (#10b981) - Rounded pill shape - Text: "Active Litigation" ### 3. Docket Entry Cards - **Container**: White background, rounded corners, shadow - **Number Badge**: - Dark circle with white number - Positioned on left side - **Date**: Small gray text at top - **Title**: Bold black text, larger font - **Expand/Collapse Icon**: Chevron down/up on right - **Expanded State Shows**: - "Brief Summary:" label - Summary text in paragraph - "View PDF" button (green, white text) - **Hover Effect**: Slight shadow increase ### 4. View PDF Button - **Style**: Green background, white text, rounded - **Icon**: Document/file icon - **Text**: "View PDF" - **Action**: Opens PDF in new tab or viewer ## Functional Requirements ### 1. Email Subscription - Input validation for email format - Subscribe button sends POST request to `/api/subscriptions/subscribe` - Success message displayed after subscription - Error handling for duplicate emails ### 2. Docket Entry Expansion - Click anywhere on entry card to expand/collapse - Smooth animation for expand/collapse - Only one entry expanded at a time (accordion behavior) - Chevron icon rotates on expand/collapse ### 3. PDF Viewing - "View PDF" button opens document - PDFs served from `/api/documents/{id}/download` - Opens in new browser tab - Proper MIME type handling ### 4. Responsive Design - Mobile-friendly layout - Cards stack vertically on small screens - Email form adjusts for mobile - Touch-friendly tap targets ## Data Structure ### Docket Entry Object ```typescript { id: number date: Date title: string summary: string notes: string (optional) documents: Document[] createdAt: Date updatedAt: Date } ``` ### Document Object ```typescript { id: number docketEntryId: number title: string originalFilename: string storedFilename: string filePath: string fileSize: number mimeType: string summary: string (optional) notes: string (optional) displayOrder: number createdAt: Date updatedAt: Date } ``` ### Subscription Object ```typescript { id: number email: string isActive: boolean unsubscribeToken: string createdAt: Date } ``` ## API Endpoints (for v2.0 Implementation) ### Public Endpoints - `GET /api/docket-entries` - Fetch all docket entries with documents - `POST /api/subscriptions/subscribe` - Subscribe to email updates - `GET /api/documents/{id}/download` - Download/view PDF document - `GET /api/health` - Health check ### Admin Endpoints (Protected) - `POST /api/auth/login` - Admin login - `GET /api/auth/verify` - Verify JWT token - `GET /api/docket-entries/{id}` - Get single entry - `POST /api/docket-entries` - Create new entry (triggers email) - `PUT /api/docket-entries/{id}` - Update entry - `DELETE /api/docket-entries/{id}` - Delete entry - `POST /api/documents/upload` - Upload PDF document ## Animation & Interactions ### Hover Effects - **Buttons**: Darken background color - **Cards**: Increase shadow, slight lift effect - **Links**: Underline or color change ### Transitions - **Card Expansion**: 300ms ease-in-out - **Button Hover**: 200ms ease - **Page Load**: Fade in effect ### Loading States - Spinner or skeleton screens while fetching data - Disabled state for buttons during submission ## Footer - **Text**: "Designed by DeafGain LLC" - **Link**: http://deafgain.org - **Style**: - Dark background matching hero section - Gray text with yellow link (#fbbf24) - Centered alignment - Border top separator ## Notes for v2.0 Implementation ### Key Differences to Maintain 1. **Same visual appearance** - colors, fonts, spacing 2. **Same user interactions** - expand/collapse, email subscription 3. **Same data structure** - compatible with v1.0 database export 4. **Same API contract** - frontend expects same response format ### Technology Mapping - **Next.js Pages** → **Inertia.js Pages (Vue)** - **React Components** → **Vue Components** - **Express Routes** → **Laravel Routes** - **Prisma ORM** → **Laravel Eloquent ORM** - **JWT Auth** → **Laravel Sanctum/Passport** - **Tailwind CSS** → **Tailwind CSS** (same) ### Priority Features for v2.0 1. ✅ Public docket viewing (exact same layout) 2. ✅ Email subscription (same functionality) 3. ✅ PDF document viewing (same behavior) 4. ✅ Admin authentication (Laravel-based) 5. ✅ Admin dashboard (CRUD operations) 6. ✅ Document upload (with validation) 7. ✅ Email notifications (on new entries) ## Current Production Data (Verified from Live Database) ### Database Statistics - **63 docket entries** with dates from May 7, 2025 to November 12, 2025 - **63 PDF documents** (158MB total, 1 document per entry) - **28 email subscribers** (27 active, 1 inactive) - **1 admin user** with secure authentication - **Active litigation status** - **Last updated**: November 12, 2025 ### Sample Docket Entries (Most Recent) ``` ID: 73 | Date: Nov 12, 2025 Title: Reply Brief in Support of Motion to Modify Scheduling Order Summary: Plaintiff Elizabeth Kragh asks the judge to extend the October 31 deadline... ID: 75 | Date: Nov 12, 2025 Title: Reply Brief in Support of Motion for Additional Discovery Time Summary: Plaintiff Elizabeth Kragh responds to MAD's opposition, arguing the organization admits... ID: 76 | Date: Nov 12, 2025 Title: Reply Brief in Support of Motion to Compel Discovery Summary: Plaintiff Elizabeth Kragh responds to MAD's opposition, emphasizing that MAD admits... ID: 72 | Date: Oct 29, 2025 Title: Order Granting Motion to Extend Time For Filing Reply Briefs Summary: This is the court's electronic filing receipt confirming that Judge Tara Elliott granted... ID: 71 | Date: Oct 28, 2025 Title: Motion to Extend Time for Filing Reply Briefs Summary: This motion requests more time to file reply briefs in response to the Montana Association... ``` ### Sample Documents ``` ID: 4 | Entry: 1 | Title: 05-07-25-affidavit | Size: 2.8MB ID: 5 | Entry: 5 | Title: 05-07-25-complaint | Size: 12MB ID: 6 | Entry: 6 | Title: 05-07-25-exhibits-complaint | Size: 40MB ID: 8 | Entry: 8 | Title: 05-16-25-amended-cert-of-service | Size: 848KB ID: 9 | Entry: 9 | Title: 05-14-25-cert-service | Size: 823KB ``` ### Email Subscribers (28 total) - **Most recent**: quarks.tattoo-09@icloud.com (Nov 19, 2025) - **Includes**: eliza.kragh@gmail.com, chris@sigd.net, and 26 other supporters - **Active**: 27 subscribers receiving notifications - **Inactive**: 1 subscriber (mike.crago@gmail.com) ### File Storage - **Location**: `/docker/websites/mad-lawsuit/uploads/` - **Naming**: UUID-based (e.g., `004f5cd2-d600-4125-86da-bca491183fcb.pdf`) - **Total size**: 158MB across 63 PDF files - **File sizes**: Range from 441KB to 40MB - **Format**: All application/pdf MIME type ## Admin Dashboard (v1.0 Implementation) ### Admin Authentication - **Route**: `/admin` - **Login Form**: - Username input field - Password input field (masked) - "Login" button - Error message display for failed attempts - **Authentication**: JWT-based with bcrypt password hashing - **Session**: Token stored in localStorage/cookies - **Protected Routes**: All `/admin/*` routes require valid JWT ### Admin Dashboard Layout **Route**: `/admin/dashboard` ``` ┌─────────────────────────────────────────────────────────┐ │ Header: "Admin Dashboard" | [Logout Button] │ ├─────────────────────────────────────────────────────────┤ │ │ │ Navigation Tabs: │ │ [Docket Entries] [Upload Document] [Subscribers] │ │ │ ├─────────────────────────────────────────────────────────┤ │ │ │ Docket Entries Management: │ │ │ │ [+ Create New Entry Button] │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ Entry #73 | Nov 12, 2025 │ │ │ │ Reply Brief in Support of Motion... │ │ │ │ [Edit] [Delete] [View] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ Entry #75 | Nov 12, 2025 │ │ │ │ Reply Brief in Support of Motion... │ │ │ │ [Edit] [Delete] [View] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ... (pagination for all 63 entries) │ │ │ └─────────────────────────────────────────────────────────┘ ``` ### Create/Edit Docket Entry Form **Fields**: - **Date**: Date picker (required) - **Title**: Text input, max 500 characters (required) - **Summary**: Textarea, rich text (required) - **Notes**: Textarea, optional - **Document Upload**: File input (PDF only, max 10MB) - Shows file name after selection - Validates file type and size - Displays upload progress - **Actions**: - [Save Entry] button (green) - [Cancel] button (gray) - [Delete Entry] button (red, edit mode only) **Behavior**: - Creating new entry triggers email notification to all active subscribers - Editing entry does NOT trigger email (only new entries) - Deleting entry also deletes associated document file - Form validation before submission - Success/error messages displayed ### Upload Document Page **Route**: `/admin/upload` ``` ┌─────────────────────────────────────────────────────────┐ │ Upload Document to Existing Entry │ │ │ │ Select Docket Entry: │ │ [Dropdown: All entries with date and title] │ │ │ │ Document Title: │ │ [Text input] │ │ │ │ Choose PDF File: │ │ [File input] [Browse...] │ │ │ │ Summary (optional): │ │ [Textarea] │ │ │ │ Notes (optional): │ │ [Textarea] │ │ │ │ [Upload Document Button] │ │ │ └─────────────────────────────────────────────────────────┘ ``` **Validation**: - PDF files only (application/pdf MIME type) - Maximum file size: 10MB - Required: docket_entry_id, title, file - Optional: summary, notes ### Subscribers Management Page **Route**: `/admin/subscribers` ``` ┌─────────────────────────────────────────────────────────┐ │ Email Subscribers (28 total, 27 active) │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ quarks.tattoo-09@icloud.com │ │ │ │ Subscribed: Nov 19, 2025 | Status: Active │ │ │ │ [Deactivate] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ letsgetonacid222@gmail.com │ │ │ │ Subscribed: Oct 28, 2025 | Status: Active │ │ │ │ [Deactivate] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────────────────────┐ │ │ │ mike.crago@gmail.com │ │ │ │ Subscribed: Jul 14, 2025 | Status: Inactive │ │ │ │ [Activate] │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ... (all 28 subscribers listed) │ │ │ └─────────────────────────────────────────────────────────┘ ``` **Features**: - View all subscribers with email, subscription date, and status - Toggle active/inactive status - Search/filter subscribers - Export subscriber list (optional) - No delete function (preserve data integrity) ### Admin Dashboard Features Summary 1. **Authentication**: Secure JWT-based login 2. **Docket Management**: Full CRUD operations on entries 3. **Document Upload**: PDF upload with validation 4. **Subscriber Management**: View and manage email list 5. **Email Notifications**: Automatic on new entry creation 6. **Responsive Design**: Works on desktop and tablet 7. **Error Handling**: Comprehensive validation and error messages 8. **Logout**: Clear session and redirect to login ## Data Export Strategy for v2.0 Migration ### Database Export ```bash # Export all tables as SQL dump ssh chaulmark@10.4.0.205 cd ~/websites/mad-lawsuit.org docker compose exec postgres pg_dump -U docket_user -d docket_db > mad-lawsuit-v1-export.sql # Or export as JSON for Laravel seeders docker compose exec postgres psql -U docket_user -d docket_db -c "COPY (SELECT * FROM docket_entries) TO STDOUT WITH CSV HEADER" > docket_entries.csv docker compose exec postgres psql -U docket_user -d docket_db -c "COPY (SELECT * FROM documents) TO STDOUT WITH CSV HEADER" > documents.csv docker compose exec postgres psql -U docket_user -d docket_db -c "COPY (SELECT * FROM subscriptions) TO STDOUT WITH CSV HEADER" > subscriptions.csv ``` ### File Export ```bash # Copy all PDF files rsync -avz chaulmark@10.4.0.205:/docker/websites/mad-lawsuit/uploads/ ./v1-uploads/ # Total: 158MB, 63 files ``` ### Import into v2.0 Laravel 1. **Database**: Create Laravel migrations matching v1.0 schema 2. **Seeders**: Import CSV data into Laravel database 3. **Storage**: Copy PDFs to Laravel storage/app/public/documents/ 4. **Mapping**: Update file_path in documents table to Laravel paths This specification ensures v2.0 will be a pixel-perfect, functionally identical replacement for v1.0, just built with Laravel + Inertia + Vue instead of Next.js + Express.