The California Family Law Personal Assistant is built as a mobile-first Progressive Web Application (PWA) with a local-first architecture. This document outlines the system components, data flow, and architectural decisions that enable secure, offline-capable legal document assistance.
graph TB
subgraph "User Interface Layer"
UI[Mobile UI Components]
PWA[Progressive Web App]
CAP[Capacitor Native Bridge]
end
subgraph "Application Layer"
AUTH[Authentication Service]
CASE[Case Management]
FORM[Form Management]
DOC[Document Generation]
GUIDE[Guidance System]
CALC[Calculation Engine]
end
subgraph "Data Layer"
DB[(SQLite Database)]
ENC[Encryption Service]
FILE[File Storage]
end
subgraph "External Integrations"
COURT[Court APIs]
REF[Attorney Referral]
NOTIFY[Push Notifications]
end
UI --> AUTH
UI --> CASE
UI --> FORM
UI --> DOC
UI --> GUIDE
UI --> CALC
AUTH --> ENC
CASE --> DB
FORM --> DB
DOC --> FILE
GUIDE --> DB
CALC --> DB
PWA --> CAP
CAP --> NOTIFY
CASE -.-> COURT
GUIDE -.-> REF
classDef primary fill:#3b82f6,stroke:#1e40af,color:#fff
classDef secondary fill:#059669,stroke:#047857,color:#fff
classDef data fill:#dc2626,stroke:#b91c1c,color:#fff
classDef external fill:#d97706,stroke:#b45309,color:#fff
class UI,PWA,CAP primary
class AUTH,CASE,FORM,DOC,GUIDE,CALC secondary
class DB,ENC,FILE data
class COURT,REF,NOTIFY external
graph LR
subgraph "Layout Components"
HEADER[Header]
NAV[Bottom Navigation]
SIDEBAR[Sidebar Menu]
end
subgraph "Form Components"
INPUT[Input Fields]
SELECT[Select Dropdowns]
DATE[Date Pickers]
UPLOAD[File Upload]
VALID[Validation]
end
subgraph "Display Components"
CARD[Cards]
MODAL[Modals]
ALERT[Alerts]
PROGRESS[Progress Bars]
CALENDAR[Calendar View]
end
subgraph "Interactive Components"
BUTTON[Buttons]
TOGGLE[Toggles]
SLIDER[Sliders]
STEPPER[Step Navigation]
end
// Color System
const colors = {
primary: {
50: '#eff6ff',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
900: '#1e3a8a',
},
success: '#22c55e',
warning: '#f59e0b',
error: '#ef4444',
neutral: {
50: '#f9fafb',
100: '#f3f4f6',
500: '#6b7280',
900: '#111827',
}
}
// Typography Scale
const typography = {
display: '2.25rem/2.5rem', // 36px/40px
h1: '1.875rem/2.25rem', // 30px/36px
h2: '1.5rem/2rem', // 24px/32px
body: '1rem/1.5rem', // 16px/24px
small: '0.875rem/1.25rem', // 14px/20px
}
// Spacing System (4px base unit)
const spacing = {
xs: '0.25rem', // 4px
sm: '0.5rem', // 8px
md: '1rem', // 16px
lg: '1.5rem', // 24px
xl: '2rem', // 32px
'2xl': '3rem', // 48px
}
graph TB
subgraph "Core Services"
AUTH_SVC[AuthenticationService]
CASE_SVC[CaseManager]
FORM_SVC[FormBuilder]
DOC_SVC[DocumentGenerator]
end
subgraph "Utility Services"
ENC_SVC[EncryptionService]
VAL_SVC[ValidationService]
GUIDE_SVC[GuidanceProvider]
CALC_SVC[CalculationEngine]
end
subgraph "Data Access Layer"
DB_SVC[DatabaseService]
FILE_SVC[FileService]
CACHE_SVC[CacheService]
end
AUTH_SVC --> ENC_SVC
CASE_SVC --> DB_SVC
CASE_SVC --> VAL_SVC
FORM_SVC --> VAL_SVC
FORM_SVC --> DB_SVC
DOC_SVC --> FILE_SVC
GUIDE_SVC --> DB_SVC
CALC_SVC --> VAL_SVC
DB_SVC --> ENC_SVC
FILE_SVC --> ENC_SVC
erDiagram
CASES ||--o{ FORMS : contains
CASES ||--o{ DOCUMENTS : generates
CASES ||--o{ WORKFLOW_STEPS : tracks
CASES ||--o{ CALENDAR_EVENTS : schedules
CASES ||--o{ COMMUNICATIONS : logs
CASES ||--o{ NOTES : stores
CASES ||--o{ CONTACTS : manages
CASES ||--o{ CHILDREN : involves
CASES ||--o{ FINANCIAL_RECORDS : tracks
CASES {
string id PK
string user_id
string case_type
string status
text data "encrypted"
datetime created_at
datetime updated_at
}
FORMS {
string id PK
string case_id FK
string form_type
text form_data "encrypted"
string status
datetime created_at
datetime updated_at
}
DOCUMENTS {
string id PK
string case_id FK
string document_type
string file_path
text metadata
datetime created_at
}
WORKFLOW_STEPS {
string id PK
string case_id FK
string step_name
int step_order
string status
text data
datetime completed_at
}
sequenceDiagram
participant U as User
participant UI as UI Component
participant S as Service Layer
participant DB as Database
participant E as Encryption
U->>UI: Input form data
UI->>S: Validate input
S->>S: Business logic validation
S->>E: Encrypt sensitive data
E-->>S: Encrypted data
S->>DB: Store encrypted data
DB-->>S: Confirmation
S-->>UI: Success response
UI-->>U: Update UI state
sequenceDiagram
participant U as User
participant UI as UI Component
participant FM as Form Manager
participant DG as Document Generator
participant PDF as PDF Service
participant FS as File Storage
U->>UI: Request document generation
UI->>FM: Get form data
FM->>FM: Validate completeness
FM->>DG: Send validated data
DG->>PDF: Generate PDF
PDF-->>DG: PDF blob
DG->>FS: Store document
FS-->>DG: File path
DG-->>UI: Document ready
UI-->>U: Download/preview available
interface AppState {
// Authentication state
auth: {
isAuthenticated: boolean
sessionId: string | null
user: UserInfo | null
}
// Current case state
currentCase: {
caseId: string | null
caseData: CaseData | null
currentStep: string
completedSteps: string[]
}
// Form state
forms: {
[formType: string]: {
data: FormData
isValid: boolean
isDirty: boolean
errors: ValidationError[]
}
}
// UI state
ui: {
isLoading: boolean
activeModal: string | null
notifications: Notification[]
theme: 'light' | 'dark'
}
// Offline state
offline: {
isOnline: boolean
pendingSync: SyncItem[]
lastSync: Date | null
}
}
graph LR
subgraph "UI Components"
COMP1[Form Component]
COMP2[Dashboard Component]
COMP3[Document Component]
end
subgraph "Zustand Store"
STATE[Global State]
ACTIONS[Actions]
MIDDLEWARE[Middleware]
end
subgraph "Persistence"
LOCAL[Local Storage]
DB[(SQLite DB)]
ENCRYPT[Encryption]
end
COMP1 --> STATE
COMP2 --> STATE
COMP3 --> STATE
STATE --> ACTIONS
ACTIONS --> MIDDLEWARE
MIDDLEWARE --> LOCAL
MIDDLEWARE --> DB
MIDDLEWARE --> ENCRYPT
LOCAL -.-> STATE
DB -.-> STATE
graph TB
subgraph "Client Side"
INPUT[User Input]
CRYPTO[Web Crypto API]
KEY[Session Key]
ENCRYPT[AES-256-GCM]
end
subgraph "Storage"
MEMORY[Memory]
SQLITE[SQLite DB]
FILES[File System]
end
INPUT --> CRYPTO
CRYPTO --> KEY
KEY --> ENCRYPT
ENCRYPT --> SQLITE
ENCRYPT --> FILES
KEY -.-> MEMORY
classDef secure fill:#dc2626,stroke:#b91c1c,color:#fff
classDef storage fill:#059669,stroke:#047857,color:#fff
class INPUT,CRYPTO,KEY,ENCRYPT secure
class MEMORY,SQLITE,FILES storage
stateDiagram-v2
[*] --> Unauthenticated
Unauthenticated --> Authenticating : User login
Authenticating --> Authenticated : Success
Authenticating --> Unauthenticated : Failure
Authenticated --> SessionActive : Valid session
SessionActive --> SessionExpired : Timeout
SessionExpired --> Unauthenticated : Auto logout
SessionActive --> Authenticated : Activity
Authenticated --> Unauthenticated : Manual logout
graph TB
subgraph "Loading Strategy"
LAZY[Lazy Loading]
SPLIT[Code Splitting]
CACHE[Service Worker Cache]
end
subgraph "Runtime Optimization"
VIRTUAL[Virtual Scrolling]
DEBOUNCE[Input Debouncing]
MEMO[React Memoization]
end
subgraph "Data Optimization"
COMPRESS[Data Compression]
BATCH[Batch Operations]
INDEX[Database Indexes]
end
LAZY --> VIRTUAL
SPLIT --> MEMO
CACHE --> COMPRESS
VIRTUAL --> BATCH
DEBOUNCE --> BATCH
MEMO --> INDEX
graph LR
subgraph "Online Mode"
ONLINE[Online Operations]
SYNC[Background Sync]
CLOUD[Cloud Backup]
end
subgraph "Offline Mode"
OFFLINE[Offline Operations]
QUEUE[Operation Queue]
LOCAL[Local Storage]
end
subgraph "Sync Engine"
DETECT[Connection Detection]
MERGE[Conflict Resolution]
RETRY[Retry Logic]
end
ONLINE --> SYNC
OFFLINE --> QUEUE
QUEUE --> DETECT
DETECT --> MERGE
MERGE --> RETRY
RETRY --> SYNC
graph TB
subgraph "Development"
DEV[Development Server]
TEST[Testing Environment]
BUILD[Production Build]
end
subgraph "Distribution"
CDN[Content Delivery Network]
SW[Service Worker]
MANIFEST[Web App Manifest]
end
subgraph "Native Deployment"
CAP[Capacitor Build]
IOS[iOS App Store]
ANDROID[Google Play Store]
end
DEV --> TEST
TEST --> BUILD
BUILD --> CDN
BUILD --> SW
BUILD --> MANIFEST
BUILD --> CAP
CAP --> IOS
CAP --> ANDROID
This architecture provides a solid foundation for building a secure, performant, and user-friendly California family law assistant that operates primarily offline while maintaining the flexibility for future enhancements and integrations.