# vdharshan4214-boop/claim-x-ai architecture

> Architecture diagram of the GitHub repository vdharshan4214-boop/claim-x-ai, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vdharshan4214-boop/claim-x-ai
- Repository: https://github.com/vdharshan4214-boop/claim-x-ai

## Overview

#### Purpose and Runtime
This is a TypeScript React claims-operations application: claim creation, pending-claim review, settlements, fraud alerts, and setup are represented as dedicated screens. It runs as a Vite-style browser client, with a separate Node/TypeScript server entry point at `server.ts`.

Key entry points:
- `src/main.tsx` bootstraps the client.
- `src/App.tsx` composes the application experience.
- `server.ts` is the server-side entry point.
- `index.html` is the browser document host.

#### Application Shell and Navigation
The application shell is centralized rather than duplicated across pages. `src/components/layout/index.tsx` likely owns persistent layout concerns such as navigation and page framing, while reusable visual primitives are exported through `src/components/ui/index.tsx`.

Primary composition boundary:
- `src/App.tsx`
- `src/components/layout/index.tsx`
- `src/components/ui/index.tsx`

#### Claims Workflow Screens
The product is organized around operational stages of a claim lifecycle. `src/pages/NewClaim.tsx` initiates claim intake; `src/pages/PendingClaims.tsx` supports review or work queues; and `src/pages/Settlements.tsx` handles post-decision settlement operations.

Core workflow paths:
- `src/pages/NewClaim.tsx`
- `src/pages/PendingClaims.tsx`
- `src/pages/Settlements.tsx`

#### Operational Monitoring and Configuration
Dashboard, fraud, and setup concerns are intentionally separate from claim transaction pages. `src/pages/Overview.tsx` is the operational landing/dashboard surface, `src/pages/FraudAlerts.tsx` represents fraud signal handling, and `src/pages/Setup.tsx` provides application or integration configuration.

Paths:
- `src/pages/Overview.tsx`
- `src/pages/FraudAlerts.tsx`
- `src/pages/Setup.tsx`

#### State and Persistence Boundary
Claim-oriented client state is centralized in `src/store/useClaimStore.ts`, providing a shared state boundary between workflow pages and UI components. Browser-side persistence utilities reside in `src/lib/storage.ts`. Supabase access is isolated behind `src/lib/supabase.ts`, preventing page components from needing to own backend client setup.

Paths:
- `src/store/useClaimStore.ts`
- `src/lib/storage.ts`
- `src/lib/supabase.ts`

#### AI and External Services
Gemini integration is encapsulated in `src/services/geminiService.ts`; callers should route AI-related claim analysis or assistance through this service rather than directly using API credentials. The required `GEMINI_API_KEY` is supplied via local environment configuration. Supabase is the other material external service implied by the repository.

Paths:
- `src/services/geminiService.ts`
- `.env.example`
- `src/lib/supabase.ts`

#### Authentication and Control Flow
`src/pages/Auth.tsx` provides the authentication boundary before users reach operational claim screens. The expected control flow is: client bootstrap → app/layout composition → authentication state → selected operational page → shared claim state and persistence/service calls. Shared utility logic belongs below UI and page layers in `src/lib/utils.ts`.

Paths:
- `src/main.tsx`
- `src/pages/Auth.tsx`
- `src/lib/utils.ts`

Main entry points: [`src/components/layout/index.tsx`](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/components/layout/index.tsx) (Application shell), [`src/store/useClaimStore.ts`](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/store/useClaimStore.ts) (Claim state), [`src/App.tsx`](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/App.tsx) (Application composition), [`src/pages/FraudAlerts.tsx`](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/FraudAlerts.tsx) (Fraud alerts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_html["Browser document<br/>HTML host<br/>[index.html]"]
  node_main["Client bootstrap<br/>React entry<br/>[main.tsx]"]
  node_app["Application composition<br/>React app<br/>[App.tsx]"]
  node_layout["Application shell<br/>layout<br/>[index.tsx]"]
  node_ui["UI primitives<br/>component exports<br/>[index.tsx]"]
  node_auth["Authentication<br/>page<br/>[Auth.tsx]"]
end

subgraph group_workflow["Claims operations"]
  node_overview["Operations overview<br/>dashboard page<br/>[Overview.tsx]"]
  node_new_claim["New claim<br/>intake page<br/>[NewClaim.tsx]"]
  node_pending_claims["Pending claims<br/>review queue page<br/>[PendingClaims.tsx]"]
  node_settlements["Settlements<br/>operations page<br/>[Settlements.tsx]"]
  node_fraud_alerts["Fraud alerts<br/>monitoring page<br/>[FraudAlerts.tsx]"]
  node_setup["Setup<br/>configuration page<br/>[Setup.tsx]"]
end

subgraph group_platform["State and services"]
  node_claim_store["Claim state<br/>shared client store<br/>[useClaimStore.ts]"]
  node_storage[("Browser persistence<br/>storage utility<br/>[storage.ts]")]
  node_supabase["Supabase client<br/>backend adapter<br/>[supabase.ts]"]
  node_gemini["Gemini service<br/>AI service adapter<br/>[geminiService.ts]"]
  node_utils["Shared utilities<br/>utility module<br/>[utils.ts]"]
  node_env["Environment template<br/>environment config<br/>[.env.example]"]
end

node_server["Server entry<br/>Node entry<br/>[server.ts]"]

node_html -->|"loads"| node_main
node_main -->|"bootstraps"| node_app
node_app -->|"composes"| node_layout
node_app -->|"auth flow"| node_auth
node_auth -->|"authenticated access"| node_overview
node_layout -->|"hosts"| node_overview
node_layout -->|"hosts"| node_new_claim
node_layout -->|"hosts"| node_pending_claims
node_layout -->|"hosts"| node_settlements
node_layout -->|"hosts"| node_fraud_alerts
node_layout -->|"hosts"| node_setup
node_layout -->|"uses"| node_ui
node_new_claim -->|"creates claims"| node_claim_store
node_pending_claims -->|"reviews claims"| node_claim_store
node_settlements -->|"settles claims"| node_claim_store
node_fraud_alerts -->|"reads claim context"| node_claim_store
node_claim_store -->|"persists client state"| node_storage
node_claim_store -->|"accesses backend"| node_supabase
node_fraud_alerts -->|"requests analysis"| node_gemini
node_gemini -.->|"uses API key"| node_env
node_app -.->|"uses shared logic"| node_utils

click node_html "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/index.html"
click node_main "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/main.tsx"
click node_app "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/App.tsx"
click node_layout "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/components/layout/index.tsx"
click node_ui "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/components/ui/index.tsx"
click node_auth "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Auth.tsx"
click node_overview "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Overview.tsx"
click node_new_claim "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/NewClaim.tsx"
click node_pending_claims "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/PendingClaims.tsx"
click node_settlements "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Settlements.tsx"
click node_fraud_alerts "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/FraudAlerts.tsx"
click node_setup "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Setup.tsx"
click node_claim_store "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/store/useClaimStore.ts"
click node_storage "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/storage.ts"
click node_supabase "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/supabase.ts"
click node_gemini "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/services/geminiService.ts"
click node_utils "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/utils.ts"
click node_server "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/server.ts"
click node_env "https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/.env.example"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_html,node_main,node_app,node_layout,node_ui,node_auth toneBlue
class node_overview,node_new_claim,node_pending_claims,node_settlements,node_fraud_alerts,node_setup toneAmber
class node_claim_store,node_storage,node_supabase,node_gemini,node_utils,node_env toneMint
class node_server toneNeutral
```

## Components

### Browser client

- [Browser document](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/index.html): HTML host · `index.html`
- [Client bootstrap](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/main.tsx): React entry · `src/main.tsx`
- [Application composition](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/App.tsx): React app · `src/App.tsx`
- [Application shell](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/components/layout/index.tsx): layout · Provides persistent navigation and page framing. · `src/components/layout/index.tsx`
- [UI primitives](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/components/ui/index.tsx): component exports · `src/components/ui/index.tsx`
- [Authentication](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Auth.tsx): page · Gates access to operations screens. · `src/pages/Auth.tsx`

### Claims operations

- [Operations overview](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Overview.tsx): dashboard page · `src/pages/Overview.tsx`
- [New claim](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/NewClaim.tsx): intake page · `src/pages/NewClaim.tsx`
- [Pending claims](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/PendingClaims.tsx): review queue page · `src/pages/PendingClaims.tsx`
- [Settlements](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Settlements.tsx): operations page · `src/pages/Settlements.tsx`
- [Fraud alerts](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/FraudAlerts.tsx): monitoring page · `src/pages/FraudAlerts.tsx`
- [Setup](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/pages/Setup.tsx): configuration page · `src/pages/Setup.tsx`

### State and services

- [Claim state](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/store/useClaimStore.ts): shared client store · Central shared state boundary for claim workflows. · `src/store/useClaimStore.ts`
- [Browser persistence](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/storage.ts): storage utility · `src/lib/storage.ts`
- [Supabase client](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/supabase.ts): backend adapter · Isolates backend client setup from pages. · `src/lib/supabase.ts`
- [Gemini service](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/services/geminiService.ts): AI service adapter · Encapsulates AI claim analysis access. · `src/services/geminiService.ts`
- [Shared utilities](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/src/lib/utils.ts): utility module · `src/lib/utils.ts`
- [Environment template](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/.env.example): environment config · Defines the required Gemini API key. · `.env.example`

### Other components

- [Server entry](https://github.com/vdharshan4214-boop/claim-x-ai/blob/master/server.ts): Node entry · Separate Node/TypeScript server runtime. · `server.ts`

## Connections

- Browser document → Client bootstrap: loads
- Client bootstrap → Application composition: bootstraps
- Application composition → Application shell: composes
- Application composition → Authentication: auth flow
- Authentication → Operations overview: authenticated access
- Application shell → Operations overview: hosts
- Application shell → New claim: hosts
- Application shell → Pending claims: hosts
- Application shell → Settlements: hosts
- Application shell → Fraud alerts: hosts
- Application shell → Setup: hosts
- Application shell → UI primitives: uses
- New claim → Claim state: creates claims
- Pending claims → Claim state: reviews claims
- Settlements → Claim state: settles claims
- Fraud alerts → Claim state: reads claim context
- Claim state → Browser persistence: persists client state
- Claim state → Supabase client: accesses backend
- Fraud alerts → Gemini service: requests analysis
- Gemini service → Environment template: uses API key
- Application composition → Shared utilities: uses shared logic