# chrisdij/prototype architecture

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

- Interactive diagram: https://gitdiagram.com/chrisdij/prototype
- Repository: https://github.com/chrisdij/prototype

## Overview

Shoplytics is a local analytics dashboard for synthetic retail transactions. A signed-in user selects dates and grouping, then views summary metrics, activity charts and tables; primary users can drill into monetary metrics, while reporting users receive restricted views. The server validates sessions and permissions, reads persisted records, computes coverage-aware analytics, adds calendar context and can render a PDF report. Feedback and audit events are persisted separately. README documents the wider calendar, export and role capabilities; unsampled browser details and setup wiring are represented only where documented.

Main entry points: [`server.mjs`](https://github.com/chrisdij/prototype/blob/main/server.mjs) (Local HTTP server), [`public/app.js`](https://github.com/chrisdij/prototype/blob/main/public/app.js) (Dashboard UI), [`database.mjs`](https://github.com/chrisdij/prototype/blob/main/database.mjs) (SQLite database), [`presentation.mjs`](https://github.com/chrisdij/prototype/blob/main/presentation.mjs) (Calendar context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_ui["Dashboard UI<br/>[app.js]"]
  node_assets["Page shell<br/>[index.html]"]
  node_styles["Responsive styling<br/>[styles.css]"]
end

subgraph group_service["Application service"]
  node_http["Local HTTP server<br/>[server.mjs]"]
  node_access["Role capabilities<br/>[permissions.mjs]"]
end

subgraph group_analytics["Analytics and reporting"]
  node_seed["Synthetic records<br/>[analytics.mjs]"]
  node_analysis["Coverage analytics<br/>[analytics.mjs]"]
  node_calendar["Calendar context<br/>[presentation.mjs]"]
  node_presentation["Grouping and series<br/>[presentation.mjs]"]
  node_pdf["PDF reports<br/>[report.mjs]"]
end

subgraph group_state["Persistent state"]
  node_store[("SQLite database<br/>[database.mjs]")]
  node_calendar_data["2026 calendar<br/>[calendar-2026.json]"]
end

node_visitor(("Dashboard user"))
node_accounts(("Signed-in accounts"))

node_visitor -->|"uses"| node_ui
node_ui -->|"API requests"| node_http
node_http -->|"serves assets"| node_ui
node_ui -->|"loads page"| node_assets
node_ui -->|"loads styles"| node_styles
node_http -->|"authenticates; reads/writes"| node_store
node_http -->|"checks capabilities"| node_access
node_http -->|"requests summary"| node_analysis
node_store -->|"supplies records and coverage"| node_analysis
node_seed -->|"initializes transaction data"| node_store
node_http -->|"formats results"| node_presentation
node_presentation -->|"adds context"| node_calendar
node_calendar -->|"reads calendar"| node_calendar_data
node_http -->|"renders permitted export"| node_pdf
node_pdf -->|"PDF download"| node_visitor
node_store -.->|"provisions credentials"| node_accounts

click node_ui "https://github.com/chrisdij/prototype/blob/main/public/app.js"
click node_assets "https://github.com/chrisdij/prototype/blob/main/public/index.html"
click node_styles "https://github.com/chrisdij/prototype/blob/main/public/styles.css"
click node_http "https://github.com/chrisdij/prototype/blob/main/server.mjs"
click node_access "https://github.com/chrisdij/prototype/blob/main/permissions.mjs"
click node_store "https://github.com/chrisdij/prototype/blob/main/database.mjs"
click node_seed "https://github.com/chrisdij/prototype/blob/main/analytics.mjs"
click node_analysis "https://github.com/chrisdij/prototype/blob/main/analytics.mjs"
click node_calendar "https://github.com/chrisdij/prototype/blob/main/presentation.mjs"
click node_presentation "https://github.com/chrisdij/prototype/blob/main/presentation.mjs"
click node_pdf "https://github.com/chrisdij/prototype/blob/main/report.mjs"
click node_calendar_data "https://github.com/chrisdij/prototype/blob/main/data/calendar-2026.json"

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_ui,node_assets,node_styles,node_visitor toneBlue
class node_http,node_access toneAmber
class node_seed,node_analysis,node_calendar,node_presentation,node_pdf toneMint
class node_store,node_calendar_data toneRose
class node_accounts toneIndigo
```

## Components

### Web interface

- [Dashboard UI](https://github.com/chrisdij/prototype/blob/main/public/app.js): `public/app.js`
- [Page shell](https://github.com/chrisdij/prototype/blob/main/public/index.html): `public/index.html`
- [Responsive styling](https://github.com/chrisdij/prototype/blob/main/public/styles.css): `public/styles.css`

### Application service

- [Local HTTP server](https://github.com/chrisdij/prototype/blob/main/server.mjs): `server.mjs`
- [Role capabilities](https://github.com/chrisdij/prototype/blob/main/permissions.mjs): `permissions.mjs`

### Analytics and reporting

- [Synthetic records](https://github.com/chrisdij/prototype/blob/main/analytics.mjs): `analytics.mjs`
- [Coverage analytics](https://github.com/chrisdij/prototype/blob/main/analytics.mjs): `analytics.mjs`
- [Calendar context](https://github.com/chrisdij/prototype/blob/main/presentation.mjs): `presentation.mjs`
- [Grouping and series](https://github.com/chrisdij/prototype/blob/main/presentation.mjs): `presentation.mjs`
- [PDF reports](https://github.com/chrisdij/prototype/blob/main/report.mjs): `report.mjs`

### Persistent state

- [SQLite database](https://github.com/chrisdij/prototype/blob/main/database.mjs): `database.mjs`
- [2026 calendar](https://github.com/chrisdij/prototype/blob/main/data/calendar-2026.json): `data/calendar-2026.json`

### Other components

- **Dashboard user**
- **Signed-in accounts**

## Connections

- Dashboard user → Dashboard UI: uses
- Dashboard UI → Local HTTP server: API requests
- Local HTTP server → Dashboard UI: serves assets
- Dashboard UI → Page shell: loads page
- Dashboard UI → Responsive styling: loads styles
- Local HTTP server → SQLite database: authenticates; reads/writes
- Local HTTP server → Role capabilities: checks capabilities
- Local HTTP server → Coverage analytics: requests summary
- SQLite database → Coverage analytics: supplies records and coverage
- Synthetic records → SQLite database: initializes transaction data
- Local HTTP server → Grouping and series: formats results
- Grouping and series → Calendar context: adds context
- Calendar context → 2026 calendar: reads calendar
- Local HTTP server → PDF reports: renders permitted export
- PDF reports → Dashboard user: PDF download
- SQLite database → Signed-in accounts: provisions credentials