# vriensy/tnt architecture

> Architecture diagram of the GitHub repository vriensy/tnt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vriensy/tnt
- Repository: https://github.com/vriensy/tnt

## Overview

This is an offline-capable PAT testing asset-register PWA. A tester sets job and customer/site context, enters a tag and inspection results, saves assets, reviews or edits the register, and exports or backs up records. The architecture also includes compliance calculations, customer/site/location management, and service-worker installation and update handling. The README is empty; major capabilities are identified from the source index and excerpts, so unsampled internals and relationships are omitted where evidence is insufficient.

Main entry points: [`src/App.tsx`](https://github.com/vriensy/tnt/blob/main/src/App.tsx) (App coordinator), [`src/db.ts`](https://github.com/vriensy/tnt/blob/main/src/db.ts) (Local database), [`src/components/TagEntryForm.tsx`](https://github.com/vriensy/tnt/blob/main/src/components/TagEntryForm.tsx) (Tag entry), [`src/components/SettingsDrawer.tsx`](https://github.com/vriensy/tnt/blob/main/src/components/SettingsDrawer.tsx) (Settings and backup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_workflow["Testing workflow"]
  node_app["App coordinator<br/>[App.tsx]"]
  node_job["Job context<br/>[JobHeader.tsx]"]
  node_entity["Entity picker<br/>[EntityPicker.tsx]"]
  node_tagform["Tag entry<br/>[TagEntryForm.tsx]"]
  node_compliance["Compliance rules<br/>[compliance.ts]"]
  node_register["Asset register<br/>[AssetRegister.tsx]"]
end

subgraph group_records["Records and persistence"]
  node_customers["Customer manager"]
  node_customerhook["Customer state<br/>[useCustomers.ts]"]
  node_sitehook["Site state<br/>[useSites.ts]"]
  node_locationhook["Location state<br/>[useLocations.ts]"]
  node_jobhook["Job state<br/>[useJobInfo.ts]"]
  node_assethook["Asset state<br/>[useAssets.ts]"]
  node_database[("Local database<br/>[db.ts]")]
end

subgraph group_operations["Data operations"]
  node_settings["Settings and backup<br/>[SettingsDrawer.tsx]"]
  node_export["Export formatter<br/>[csvExport.ts]"]
end

subgraph group_pwa["PWA lifecycle"]
  node_servicehook["Service worker state"]
  node_updates["Update banner<br/>[UpdateBanner.tsx]"]
  node_worker["Service worker<br/>[sw.js]"]
end

node_tester(("Tester"))

node_tester -->|"uses"| node_app
node_app -->|"renders"| node_job
node_app -->|"renders"| node_tagform
node_app -->|"renders"| node_register
node_app -->|"renders"| node_settings
node_app -->|"renders"| node_updates
node_app -->|"uses"| node_assethook
node_app -->|"uses"| node_customerhook
node_app -->|"uses"| node_sitehook
node_app -->|"uses"| node_locationhook
node_app -->|"uses"| node_jobhook
node_app -->|"uses"| node_servicehook
node_job -->|"renders"| node_entity
node_tagform -->|"renders"| node_entity
node_tagform -->|"calculates with"| node_compliance
node_tagform -->|"checks tag"| node_database
node_app -->|"exports backup data"| node_database
node_register -->|"edit and delete"| node_app
node_customers -->|"uses"| node_sitehook
node_customers -->|"uses"| node_locationhook
node_assethook -->|"reads and writes"| node_database
node_customerhook -->|"reads and writes"| node_database
node_sitehook -->|"reads and writes"| node_database
node_locationhook -->|"reads and writes"| node_database
node_jobhook -->|"loads and saves"| node_database
node_settings -->|"backs up and restores"| node_database
node_settings -->|"downloads CSV"| node_export
node_settings -->|"checks updates"| node_servicehook
node_servicehook -->|"registers and updates"| node_worker

click node_app "https://github.com/vriensy/tnt/blob/main/src/App.tsx"
click node_job "https://github.com/vriensy/tnt/blob/main/src/components/JobHeader.tsx"
click node_entity "https://github.com/vriensy/tnt/blob/main/src/components/EntityPicker.tsx"
click node_tagform "https://github.com/vriensy/tnt/blob/main/src/components/TagEntryForm.tsx"
click node_compliance "https://github.com/vriensy/tnt/blob/main/src/compliance.ts"
click node_register "https://github.com/vriensy/tnt/blob/main/src/components/AssetRegister.tsx"
click node_customers "https://github.com/vriensy/tnt/blob/main/src/components/CustomerManager.tsx"
click node_customerhook "https://github.com/vriensy/tnt/blob/main/src/hooks/useCustomers.ts"
click node_sitehook "https://github.com/vriensy/tnt/blob/main/src/hooks/useSites.ts"
click node_locationhook "https://github.com/vriensy/tnt/blob/main/src/hooks/useLocations.ts"
click node_jobhook "https://github.com/vriensy/tnt/blob/main/src/hooks/useJobInfo.ts"
click node_assethook "https://github.com/vriensy/tnt/blob/main/src/hooks/useAssets.ts"
click node_database "https://github.com/vriensy/tnt/blob/main/src/db.ts"
click node_settings "https://github.com/vriensy/tnt/blob/main/src/components/SettingsDrawer.tsx"
click node_export "https://github.com/vriensy/tnt/blob/main/src/csvExport.ts"
click node_servicehook "https://github.com/vriensy/tnt/blob/main/src/hooks/useServiceWorker.ts"
click node_updates "https://github.com/vriensy/tnt/blob/main/src/components/UpdateBanner.tsx"
click node_worker "https://github.com/vriensy/tnt/blob/main/public/sw.js"

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_app,node_job,node_entity,node_tagform,node_compliance,node_register toneBlue
class node_customers,node_customerhook,node_sitehook,node_locationhook,node_jobhook,node_assethook,node_database toneAmber
class node_settings,node_export toneMint
class node_servicehook,node_updates,node_worker toneRose
class node_tester toneIndigo
```

## Components

### Testing workflow

- [App coordinator](https://github.com/vriensy/tnt/blob/main/src/App.tsx): `src/App.tsx`
- [Job context](https://github.com/vriensy/tnt/blob/main/src/components/JobHeader.tsx): `src/components/JobHeader.tsx`
- [Entity picker](https://github.com/vriensy/tnt/blob/main/src/components/EntityPicker.tsx): `src/components/EntityPicker.tsx`
- [Tag entry](https://github.com/vriensy/tnt/blob/main/src/components/TagEntryForm.tsx): `src/components/TagEntryForm.tsx`
- [Compliance rules](https://github.com/vriensy/tnt/blob/main/src/compliance.ts): `src/compliance.ts`
- [Asset register](https://github.com/vriensy/tnt/blob/main/src/components/AssetRegister.tsx): `src/components/AssetRegister.tsx`

### Records and persistence

- [Customer manager](https://github.com/vriensy/tnt/blob/main/src/components/CustomerManager.tsx): `src/components/CustomerManager.tsx`
- [Customer state](https://github.com/vriensy/tnt/blob/main/src/hooks/useCustomers.ts): `src/hooks/useCustomers.ts`
- [Site state](https://github.com/vriensy/tnt/blob/main/src/hooks/useSites.ts): `src/hooks/useSites.ts`
- [Location state](https://github.com/vriensy/tnt/blob/main/src/hooks/useLocations.ts): `src/hooks/useLocations.ts`
- [Job state](https://github.com/vriensy/tnt/blob/main/src/hooks/useJobInfo.ts): `src/hooks/useJobInfo.ts`
- [Asset state](https://github.com/vriensy/tnt/blob/main/src/hooks/useAssets.ts): `src/hooks/useAssets.ts`
- [Local database](https://github.com/vriensy/tnt/blob/main/src/db.ts): `src/db.ts`

### Data operations

- [Settings and backup](https://github.com/vriensy/tnt/blob/main/src/components/SettingsDrawer.tsx): `src/components/SettingsDrawer.tsx`
- [Export formatter](https://github.com/vriensy/tnt/blob/main/src/csvExport.ts): `src/csvExport.ts`

### PWA lifecycle

- [Service worker state](https://github.com/vriensy/tnt/blob/main/src/hooks/useServiceWorker.ts): `src/hooks/useServiceWorker.ts`
- [Update banner](https://github.com/vriensy/tnt/blob/main/src/components/UpdateBanner.tsx): `src/components/UpdateBanner.tsx`
- [Service worker](https://github.com/vriensy/tnt/blob/main/public/sw.js): `public/sw.js`

### Other components

- **Tester**

## Connections

- Tester → App coordinator: uses (evidence: `src/App.tsx`)
- App coordinator → Job context: renders (evidence: `src/App.tsx`)
- App coordinator → Tag entry: renders (evidence: `src/App.tsx`)
- App coordinator → Asset register: renders (evidence: `src/App.tsx`)
- App coordinator → Settings and backup: renders (evidence: `src/App.tsx`)
- App coordinator → Update banner: renders (evidence: `src/App.tsx`)
- App coordinator → Asset state: uses (evidence: `src/App.tsx`)
- App coordinator → Customer state: uses (evidence: `src/App.tsx`)
- App coordinator → Site state: uses (evidence: `src/App.tsx`)
- App coordinator → Location state: uses (evidence: `src/App.tsx`)
- App coordinator → Job state: uses (evidence: `src/App.tsx`)
- App coordinator → Service worker state: uses (evidence: `src/App.tsx`)
- Job context → Entity picker: renders (evidence: `src/components/JobHeader.tsx`)
- Tag entry → Entity picker: renders (evidence: `src/components/TagEntryForm.tsx`)
- Tag entry → Compliance rules: calculates with (evidence: `src/components/TagEntryForm.tsx`)
- Tag entry → Local database: checks tag (evidence: `src/components/TagEntryForm.tsx`)
- App coordinator → Local database: exports backup data (evidence: `src/App.tsx`)
- Asset register → App coordinator: edit and delete (evidence: `src/App.tsx`)
- Customer manager → Site state: uses (evidence: `src/components/CustomerManager.tsx`)
- Customer manager → Location state: uses (evidence: `src/components/CustomerManager.tsx`)
- Asset state → Local database: reads and writes (evidence: `src/hooks/useAssets.ts`)
- Customer state → Local database: reads and writes (evidence: `src/hooks/useCustomers.ts`)
- Site state → Local database: reads and writes (evidence: `src/hooks/useSites.ts`)
- Location state → Local database: reads and writes (evidence: `src/hooks/useLocations.ts`)
- Job state → Local database: loads and saves (evidence: `src/hooks/useJobInfo.ts`)
- Settings and backup → Local database: backs up and restores (evidence: `src/components/SettingsDrawer.tsx`)
- Settings and backup → Export formatter: downloads CSV (evidence: `src/components/SettingsDrawer.tsx`)
- Settings and backup → Service worker state: checks updates (evidence: `src/components/SettingsDrawer.tsx`)
- Service worker state → Service worker: registers and updates (evidence: `src/hooks/useServiceWorker.ts`)