mad-lawsuit/cline_docs/v1_design_specifications.md

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

{
  id: number
  date: Date
  title: string
  summary: string
  notes: string (optional)
  documents: Document[]
  createdAt: Date
  updatedAt: Date
}

Document Object

{
  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

{
  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

# 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

# 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.