# shakeelaijaz1233223/shakeel-networking-it-lab architecture

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

- Interactive diagram: https://gitdiagram.com/shakeelaijaz1233223/shakeel-networking-it-lab
- Repository: https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab

## Overview

Shakeel Networking is an offline, browser-only IT lab management application. Users open the shell, navigate domain pages to manage computers, staff systems, repairs, parts and purchases, then review dashboards, archives and downloadable reports or back up their data. Records persist in browser storage; maintenance and purchasing operations also affect the stock ledger. The README documents capabilities whose full source was not sampled, so those modules are included while only evidenced relationships are drawn. The optional service worker is omitted because it is not required for product behavior.

Main entry points: [`js/storage.js`](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/storage.js) (Local storage), [`js/app.js`](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/app.js) (Bootstrap and chrome), [`js/maintenance.js`](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/maintenance.js) (Maintenance), [`index.html`](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/index.html) (Application shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_shell["Application shell<br/>[index.html]"]
  node_gate["Password gate<br/>[gate.js]"]
  node_router["Page router<br/>[router.js]"]
  node_app["Bootstrap and chrome<br/>[app.js]"]
end

subgraph group_operations["Lab operations"]
  node_inventory["PC inventory<br/>[inventory.js]"]
  node_staff["Staff systems<br/>[staff.js]"]
  node_maintenance["Maintenance<br/>[maintenance.js]"]
  node_archive["Monthly archive<br/>[archive.js]"]
end

subgraph group_stock["Stock and procurement"]
  node_store["Store inventory<br/>[store.js]"]
  node_purchases["Purchases<br/>[purchases.js]"]
  node_stockengine["Stock movement<br/>[stock.js]"]
end

subgraph group_insights["Insights and exchange"]
  node_dashboard["Dashboard<br/>[dashboard.js]"]
  node_reports["Reports<br/>[reports.js]"]
  node_excel["Excel import/export<br/>[excel.js]"]
  node_importer["Import wizard<br/>[importer.js]"]
  node_backup["Backup and restore<br/>[backup.js]"]
  node_search["Global search<br/>[search.js]"]
end

subgraph group_foundation["Runtime foundation"]
  node_settings["Settings<br/>[settings.js]"]
  node_state["Domain state<br/>[state.js]"]
  node_storage[("Local storage<br/>[storage.js]")]
  node_activity["Activity log<br/>[activity-log.js]"]
  node_schemas["Data schemas<br/>[schemas.js]"]
  node_ui["Shared UI<br/>[ui.js]"]
  node_seed["Starting dataset<br/>[seed-data.js]"]
end

node_user(("Lab user"))

node_user -->|"opens"| node_shell
node_shell -.->|"presents gate"| node_gate
node_shell -.->|"loads shell"| node_app
node_app -.->|"initializes"| node_router
node_router -.->|"mounts pages"| node_inventory
node_user -->|"navigates"| node_router
node_app -->|"loads if empty"| node_seed
node_inventory -.->|"persists records"| node_storage
node_staff -.->|"persists records"| node_storage
node_maintenance -.->|"persists records"| node_storage
node_store -.->|"persists records"| node_storage
node_purchases -.->|"persists records"| node_storage
node_settings -.->|"reads and writes"| node_storage
node_storage -.->|"provides records"| node_state
node_maintenance -->|"applies consumption"| node_stockengine
node_purchases -->|"adds stock"| node_stockengine
node_store -.->|"shows transactions"| node_stockengine
node_maintenance -->|"records summarized"| node_archive
node_user -->|"reviews status"| node_dashboard
node_user -->|"requests reports"| node_reports
node_reports -->|"generates workbooks"| node_excel
node_user -->|"imports workbook"| node_importer
node_importer -.->|"parses workbook"| node_excel
node_user -->|"backs up data"| node_backup
node_user -->|"searches records"| node_search
node_backup -->|"shows audit trail"| node_activity
node_app -->|"refreshes preferences"| node_settings
node_app -->|"reads alerts"| node_state
node_inventory -.->|"renders tables"| node_ui
node_schemas -.->|"defines fields"| node_excel

click node_shell "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/index.html"
click node_gate "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/gate.js"
click node_router "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/router.js"
click node_app "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/app.js"
click node_inventory "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/inventory.js"
click node_staff "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/staff.js"
click node_maintenance "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/maintenance.js"
click node_archive "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/archive.js"
click node_store "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/store.js"
click node_purchases "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/purchases.js"
click node_stockengine "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/stock.js"
click node_dashboard "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/dashboard.js"
click node_reports "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/reports.js"
click node_excel "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/excel.js"
click node_importer "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/importer.js"
click node_backup "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/backup.js"
click node_search "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/search.js"
click node_settings "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/settings.js"
click node_state "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/state.js"
click node_storage "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/storage.js"
click node_activity "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/activity-log.js"
click node_schemas "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/schemas.js"
click node_ui "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/ui.js"
click node_seed "https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/seed-data.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_shell,node_gate,node_router,node_app,node_user toneBlue
class node_inventory,node_staff,node_maintenance,node_archive toneAmber
class node_store,node_purchases,node_stockengine toneMint
class node_dashboard,node_reports,node_excel,node_importer,node_backup,node_search toneRose
class node_settings,node_state,node_storage,node_activity,node_schemas,node_ui,node_seed toneIndigo
```

## Components

### Application shell

- [Application shell](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/index.html): `index.html`
- [Password gate](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/gate.js): `js/gate.js`
- [Page router](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/router.js): `js/router.js`
- [Bootstrap and chrome](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/app.js): `js/app.js`

### Lab operations

- [PC inventory](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/inventory.js): `js/inventory.js`
- [Staff systems](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/staff.js): `js/staff.js`
- [Maintenance](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/maintenance.js): `js/maintenance.js`
- [Monthly archive](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/archive.js): `js/archive.js`

### Stock and procurement

- [Store inventory](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/store.js): `js/store.js`
- [Purchases](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/purchases.js): `js/purchases.js`
- [Stock movement](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/stock.js): `js/stock.js`

### Insights and exchange

- [Dashboard](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/dashboard.js): `js/dashboard.js`
- [Reports](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/reports.js): `js/reports.js`
- [Excel import/export](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/excel.js): `js/excel.js`
- [Import wizard](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/importer.js): `js/importer.js`
- [Backup and restore](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/backup.js): `js/backup.js`
- [Global search](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/search.js): `js/search.js`

### Runtime foundation

- [Settings](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/settings.js): `js/settings.js`
- [Domain state](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/state.js): `js/state.js`
- [Local storage](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/storage.js): `js/storage.js`
- [Activity log](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/activity-log.js): `js/activity-log.js`
- [Data schemas](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/schemas.js): `js/schemas.js`
- [Shared UI](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/ui.js): `js/ui.js`
- [Starting dataset](https://github.com/shakeelaijaz1233223/shakeel-networking-it-lab/blob/main/js/seed-data.js): `js/seed-data.js`

### Other components

- **Lab user**

## Connections

- Lab user → Application shell: opens (evidence: `README.md`)
- Application shell → Password gate: presents gate
- Application shell → Bootstrap and chrome: loads shell
- Bootstrap and chrome → Page router: initializes
- Page router → PC inventory: mounts pages
- Lab user → Page router: navigates (evidence: `js/router.js`)
- Bootstrap and chrome → Starting dataset: loads if empty (evidence: `js/app.js`)
- PC inventory → Local storage: persists records
- Staff systems → Local storage: persists records
- Maintenance → Local storage: persists records
- Store inventory → Local storage: persists records
- Purchases → Local storage: persists records
- Settings → Local storage: reads and writes
- Local storage → Domain state: provides records
- Maintenance → Stock movement: applies consumption (evidence: `js/maintenance.js`)
- Purchases → Stock movement: adds stock (evidence: `js/purchases.js`)
- Store inventory → Stock movement: shows transactions
- Maintenance → Monthly archive: records summarized (evidence: `README.md`)
- Lab user → Dashboard: reviews status (evidence: `README.md`)
- Lab user → Reports: requests reports (evidence: `README.md`)
- Reports → Excel import/export: generates workbooks (evidence: `js/reports.js`)
- Lab user → Import wizard: imports workbook (evidence: `README.md`)
- Import wizard → Excel import/export: parses workbook
- Lab user → Backup and restore: backs up data (evidence: `README.md`)
- Lab user → Global search: searches records (evidence: `README.md`)
- Backup and restore → Activity log: shows audit trail (evidence: `js/backup.js`)
- Bootstrap and chrome → Settings: refreshes preferences (evidence: `js/app.js`)
- Bootstrap and chrome → Domain state: reads alerts (evidence: `js/app.js`)
- PC inventory → Shared UI: renders tables
- Data schemas → Excel import/export: defines fields