1. Application Overview
LegalHub AI is an AI-powered legal management platform designed to streamline legal processes, facilitate connections between clients and lawyers, and provide comprehensive tools for case management. It bridges the gap between legal service providers and those seeking legal assistance through intelligent matching, efficient document handling, and secure communication channels.
This platform provides a direct, safe, worldwide interactive arrangement for both law firms/lawyers and clients.
Case ID linked to a Client ID and shared with the assigned lawyer — ensuring transparent, linked, and fully traceable legal workflows across the platform.// LegalHub AI — System Architecture
┌──────────────────────────────────────────────────────────┐
│ USER INTERFACE LAYER (React) │
│ ┌─────────────┐ ┌──────────────┐ ┌────────────┐ │
│ │ Client App │ │ Lawyer App │ │ Dev Panel │ │
│ │ Dashboard │ │ Dashboard │ │/dev-manager│ │
│ │ CaseFinder │ │ LawyerPortal │ │ │ │
│ │ Directory │ │ CaseStatus │ │ │ │
│ │ Messages │ │ Expenses │ │ │ │
│ └──────┬───────┘ └──────┬───────┘ └─────┬──────┘ │
└─────────┼─────────────────┼────────────────┼───────────┘
│ │ │
▼ ▼ ▼
┌──────────────────────────────────────────────────────────┐
│ base44Client SDK (React Query + Auth) │
└────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────┐
│ BASE44 PLATFORM (BaaS) │
│ ┌──────────────┐ ┌──────────────┐ ┌────────────────┐ │
│ │ Auth / OTP │ │ Entity Store │ │ Deno Functions │ │
│ │ Sessions │ │ Lawyer │ │ lawyerAuth │ │
│ │ Tokens │ │ LegalCase │ │ clientAuth │ │
│ │ │ │ Agreement │ │ sendOTP │ │
│ │ │ │ Message │ │ sendEmail │ │
│ │ │ │ Proposal │ │ │ │
│ │ │ │ CaseExpense │ │ │ │
│ │ │ │ CaseAssign. │ │ │ │
│ └──────────────┘ └──────────────┘ └────────────────┘ │
└──────────────────────────────────────────────────────────┘
2.1 Home Page
PublicThe Home page is a common public page — no login authentication required. It is accessible to all visitors.
Navigation Bar
About · Services · Pricing · Support · FAQs · Language Selection · Sign In (Client / Lawyer split) · Get Started CTA
Hero Section
AI-powered search bar supporting any language. Two primary login paths: Client (I Need Legal Help) and Lawyer/Firm (I'm a Lawyer/Firm)
Statistics
10,000+ Cases Resolved · 2,500+ Verified Lawyers · 80+ Countries · 4.9★ Average Rating
How It Works
4-step workflow: Describe Case → AI Analysis → Choose Lawyer → Get Resolution
Legal Services Grid
Corporate Law, Family Law, Immigration, Intellectual Property, Civil Litigation, Tax Law
For Lawyers & Firms
AI-matched clients, digital onboarding, proposal & agreement tools, secure messaging
Client & Lawyer Workflow Map
Visual workflow diagrams showing the full journey for both clients and lawyers
FAQ & Footer
Expandable FAQ section + footer with platform links, company info, and legal links
2.2 Client Sign-Up Flow
ClientEmail Entry
Client enters email address to start registration
Phone Number
Country-code-aware phone number input
OTP Verification
One-time password sent via WhatsApp + Email for dual verification
Full Name
Client enters their full legal name
Country
Country of residence / legal need
Full Address
Complete postal / mailing address
Brief Description
Short description of the legal service needed
Registration Complete
Unique Client ID created and linked to the account
2.3 Client Dashboard Features
ClientCase Submission (CaseFinder)
AI-driven analysis helps categorize cases and recommend the right legal expertise
Lawyer Directory
Browse lawyers by expertise, jurisdiction, ratings, firm info, country, and area of law
Personalized Dashboard
Track case status, view proposals, manage agreements in real-time
Secure Messaging
Direct encrypted communication with assigned lawyers per case
Lawyer Selection
Select lawyers from directory, request appointments, get best quotes, create agreements via AI agent
Case Progress Monitor
Real-time tracking linked to the assigned lawyer's account and the shared Case ID
Unique Client + Case ID
System creates a common Case ID for client and lawyer firm, enabling direct linkage
Agreement Signing
Digitally sign agreements for selected lawyer/firm in selected country
Multi-Firm Search
Search and approach multiple law firms or lawyers based on country and area of law
Case Assignment Fields
| Field | Description |
|---|---|
| case_id | Unique case identifier |
| lawyer_id | Assigned lawyer |
| role | Primary / Secondary / Paralegal / Specialist |
| start_date | Assignment start date |
| visibility | Client-facing |
2.4 Law Firm / Lead Lawyer Sign-Up Flow
LawyerEmail Entry
Firm/lawyer email address
OTP Verification
Email OTP to verify identity
Firm / Lawyer Name
Legal entity or professional name
Upload License Photo
Bar license / professional accreditation document
Upload Logo
Firm logo or profile photo
Office Contact
Phone with country code selection
Communication Email
Primary contact email for client communications
License / Bar Number
Official registration number
Fee Structure & Currency
Fixed fee / Hourly / Retainer / Hybrid + currency code
Specialties
Areas of legal expertise selected from predefined list
Details & Service Description
Bio, years of experience, jurisdictions, languages
Registration Complete
Status: pending_review — awaiting admin approval before appearing in directory
2.5 Lawyer Dashboard Features
LawyerAssociate Lawyer Management
Register/delete associated legal professionals, manage profiles and availability
Central Dashboard
Manage full caseload, track finances, monitor agreements, manage documents
Case Management
View/update case status, track milestones, access AI analysis (unique Case ID linked to client)
Agreement Management
Draft and track agreements: fixed-fee, hourly, retainer, and hybrid
Expense Tracking
Record and categorize case-specific expenses with receipt uploads
Communication Log
Centralized messaging interface per case
Calendar
Manage hearing dates and appointments with visual monthly grid
Lawyer Directory Listing
Approved profiles visible publicly in directory with ratings, pricing, and availability
Case Progress Monitor
Linked to client view — both parties see the same real-time case status
Firm Profile Management
Update firm information, fees, expertise, and availability at any time
2.6 Associated Lawyer Module
CoreLawyer Roles
Owns the case, visible to client, responsible for strategy/filings/hearings, approves documents, invoices and settlement decisions.
Support tasks: drafting, research, evidence review. Dynamically reassignable throughout the case lifecycle.
Admin tasks: document collection, client follow-ups, evidence organization.
Optional: Compliance officer (KYC/AML), Finance officer (billing disputes), External counsel.
Assignment Table
| Field | Description |
|---|---|
| case_id | Unique case identifier |
| lawyer_id | Assigned lawyer |
| role | Primary / Secondary / Paralegal / Specialist |
| start_date | Assignment start date |
| end_date | If reassigned or removed |
| workload_weight | % of responsibility (0–100) |
| visibility | Internal / Client-facing |
Auto-Assignment Engine
Triggers
Matching Rules
Lawyer Dashboard (Internal)
My Cases
· Active cases
· Upcoming hearings
· Pending tasks
· Documents requiring approval
· Client messages
· Billing items
Workload Heatmap
· Active matters count
· Time tracked
· Billable vs non-billable
· Deadlines at risk
Performance Metrics
· Case success rate
· Avg resolution time
· Client satisfaction score
· Revenue generated
Client Dashboard View
Assigned Primary Lawyer
Name, photo, contact details, experience summary
Supporting Team
Paralegal, secondary lawyer, compliance officer (if applicable)
Availability Indicators
"In court today" · "On leave" · "Available for call"
Communication Options
Secure chat · Schedule meeting · Upload documents
2.7 AI-Powered Enhancements
AIAI Workload Balancer
Predicts lawyer overload, suggests optimal reassignments, and identifies workflow bottlenecks before they impact case progress.
AI Case Briefing
When a new lawyer joins a case: auto-generated case summary, evidence highlights, risk assessment, and list of pending tasks.
AI Performance Insights
Identifies which lawyer handles which case type best, predicts expected case duration, and measures billing efficiency.
AI Case Analysis
AI-driven case categorization, jurisdiction detection, complexity scoring, and recommended legal expertise on case submission.
Multilingual Support
AI search and case description input supports all major languages — English, Arabic, Chinese, Spanish, French, Hindi, and more.
2.8 Compliance & Audit
Automated Conflict Check
Before any assignment, the system cross-checks the client list and opposing parties to detect conflicts of interest.
Full Audit Trail
Every assignment change is logged with: timestamp, user who made the change, and reason. No record is ever silently modified.
Role-Based Access Control
Primary lawyer: full access · Secondary: limited access · Paralegal: admin access · Client: read-only
GDPR & Data Compliance
All communications and documents are end-to-end encrypted. Platform complies with international data protection standards.
2.9 Administrative / Platform Features
Developer Manager (/dev-manager)
Password-protected interface for viewing and managing all application entities, including record deletion for platform maintenance and testing.
Lawyer Approval Workflow
Newly registered lawyers remain in pending_review status until an admin approves them. Only approved lawyers appear in the public directory.
3. User Roles
👤
Client
Individuals or organizations seeking legal services. Submit cases, find lawyers, select representation, monitor progress, manage agreements, and communicate securely.
⚖️
Lawyer / Firm
Legal professionals on the platform. Manage profiles, respond to cases, submit proposals, sign agreements, track expenses, update case progress, communicate with clients.
🛡️
Developer / Admin
Internal platform administrators with elevated privileges via /dev-manager. Responsible for data management, entity oversight, and system troubleshooting.
4. Client–Lawyer Linkage
Shared Case ID
Each case is directly linked to both client and assigned lawyer through a unique Case ID — enabling full end-to-end traceability.
Client Dashboard Sync
Client dashboard displays documents, status updates, tasks, and communication history linked to the lawyer's activity.
Lawyer Document Requests
Lawyers can request additional information or documents through their portal; clients receive notifications and upload via their profile.
Full Interaction Log
All interactions are logged within the case record for compliance and legal traceability.
// Entity Relationship Diagram
Client (client_email, client_id)
│
├── creates ──────────▶ LegalCase (case_id, client_email)
│ │
│ ├── has many ──▶ Message (case_id)
│ ├── has many ──▶ Proposal (case_id)
│ ├── has one ──▶ Agreement (case_id)
│ ├── has many ──▶ CaseExpense (case_id)
│ ├── has many ──▶ CaseAssignment (case_id)
│ │
│ └── assigned_to ─▶ Lawyer (lawyer_id)
│ │
└── selects ──────────────────────────────────────────┘
5. Technical Design
5.1 Frontend Stack
5.2 Backend Stack
6. Core Entities & Data Model
7. Application File Structure
src/
├── pages/ # Top-level route pages
│ ├── Home.jsx # Public landing (no auth required)
│ ├── ClientRegister.jsx / ClientLogin.jsx
│ ├── ClientDashboard.jsx
│ ├── CaseFinder.jsx
│ ├── LawyerPortal.jsx / LawyerLogin.jsx
│ ├── LawyerDashboard.jsx
│ ├── LawyerDirectory.jsx
│ ├── Cases.jsx / CaseDetail.jsx
│ ├── Agreements.jsx / Messages.jsx
│ ├── ProfileSettings.jsx
│ ├── DevManager.jsx # /dev-manager (protected)
│ └── AppDocumentation.jsx
├── components/ # Reusable UI components
│ ├── ui/ # Shadcn components
│ ├── layout/ # AppLayout, Sidebar, BottomNav
│ ├── lawyer/ # Lawyer-specific panels
│ ├── cases/ # CaseDetail, AssignedLawyersPanel, ReviewForm
│ ├── common/ # PageHeader, StatusBadge
│ └── dashboard/ # StatCard widgets
├── entities/ # JSON schema definitions
├── functions/ # Deno backend functions
│ ├── lawyerAuth.js / clientAuth.js
│ ├── sendOTP.js / sendConfirmEmail.js
├── lib/ # AuthContext, utils, query-client
├── api/ # base44Client SDK init
├── App.jsx # Router + Auth providers
├── index.css # CSS variables / design tokens
└── tailwind.config.js # Theme configuration
8. Design Principles
Clean & Modern Aesthetic
UI adheres to contemporary design standards, prioritizing readability, whitespace, and ease of use.
Intuitive UX
Navigation and workflows designed for both legal professionals and clients, minimizing friction at every step.
Fully Responsive
Mobile-first layouts adapting to desktop, tablet, and mobile using Tailwind responsive utilities.
Component-Based Architecture
Small, focused, reusable React components for maintainability and scalability.
Data Consistency
All data stored via Base44 entities with enforced JSON schemas ensuring validated, structured data.
Linked IDs & Traceability
Every Case ID links to a Client ID and is shared with the assigned lawyer for end-to-end traceability.
Security First
End-to-end encrypted communication, OTP verification, role-based access control, and GDPR compliance.
AI-Augmented Workflows
AI assists at every step — case analysis, lawyer matching, workload balancing, and case briefing.
Application Documentation · SOW v1.0 · April 2026
Built on Base44 Platform · React · Tailwind CSS · Deno