chaulmark/mad-lawsuit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mad-lawsuit/cline_docs/v1_design_specifications.md
TheMaddax 80657cc209 v2.0: Laravel + Inertia + Vue foundation complete 
- Replaced Next.js + Express + React stack with Laravel + Inertia + Vue
- Created database migrations for docket_entries, documents, subscriptions, admin_users
- Built Eloquent models with relationships (DocketEntry, Document, Subscription, AdminUser)
- Implemented HomeController with Inertia.js integration
- Created Vue home page component matching v1.0 design exactly
- Installed Laravel Breeze for authentication scaffolding
- Configured Vite 7 for Vue 3 + TypeScript compilation
- Updated .gitignore for Laravel project structure
- Tested locally - website rendering correctly with empty database
- All v1.0 Next.js/Express files removed, replaced with Laravel structure

Technology Stack:
- Backend: Laravel 12.43.1, PHP 8.3.28, Eloquent ORM
- Frontend: Vue 3, TypeScript, Inertia.js, Tailwind CSS 3.x
- Build: Vite 7.x, Composer 2.9.2
- Database: SQLite (dev), PostgreSQL (production)

Next steps: Email subscription API, document downloads, admin dashboard
2025-12-17 15:44:26 -07:00

505 lines
23 KiB
Markdown
Raw Blame History

# 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.
Reference in a new issue View git blame Copy permalink