# karanratiya123/coffee-shop-management-system architecture

> Architecture diagram of the GitHub repository karanratiya123/coffee-shop-management-system, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-02). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/karanratiya123/coffee-shop-management-system
- Repository: https://github.com/karanratiya123/coffee-shop-management-system

## Overview

#### Purpose and Delivery Model
BrewOS is a browser-only coffee-shop POS prototype built with vanilla HTML, CSS, and JavaScript. Each screen is a separate static HTML entry point; no server, API, database, build system, or framework is present. Client-side browser storage provides persistence.

#### Entry and Session Boundary
Operator sign-in begins at `index.html`, with PIN/operator validation in `script.js`. Successful authentication writes operator/session context to `sessionStorage`, which downstream POS pages use; logout returns the user to the sign-in flow. The defined operator PINs are embedded application behavior rather than externally managed identity.

#### POS Dashboard and Order Lifecycle
`dashboard.html` and `dashboard.js` form the primary cashier workflow:
- Search and category controls filter the product catalog.
- Product selections populate a live cart.
- Cart logic calculates subtotal, threshold discount, tax, and total.
- Payment produces a receipt-oriented checkout flow and clears the active cart.
- Hold actions generate a reference and preserve an unfinished transaction.

This is the central control boundary between transient active-cart state and persisted transaction records.

#### Local Transaction Persistence and History
Completed and held orders are persisted in browser `localStorage` by the dashboard flow. `history.html` and `history.js` read that local order store, render transaction status and totals, and provide history filtering/search. Data is therefore scoped to the browser/device profile and is not shared between terminals.

#### Catalog Exploration
`menu.html` and `menu.js` provide a menu-board/catalog-oriented view separate from checkout. It supports search and category/dietary filtering while exposing product details such as ingredients, nutrition, and stock. The dashboard and menu views represent distinct consumption contexts over catalog state, though no central backend catalog service exists.

#### Feedback and Operator Preferences
`feedback.html` with `feedback.js` accepts ratings/comments, validates submissions, persists reviews locally, and recomputes visible feedback metrics. `settings.html` and `settings.js` manage operator-oriented UI preferences—such as display/font behavior and checkout preferences—persisted per operator in `localStorage`. These are local personalization domains, not access-control or administrative systems.

#### Shared Presentation Runtime
`style.css` is the shared responsive visual system across all static views. `bg-circles.js` supplies reusable ambient background animation. Assets under `assets` provide visual media, including the README-referenced dashboard and login imagery. The runtime dependency surface is limited to standard browser DOM APIs, `sessionStorage`, `localStorage`, and browser printing/modal behavior.

Main entry points: [`dashboard.html`](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/dashboard.html) (Cashier dashboard), [`style.css`](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/style.css) (Shared visual system), [`script.js`](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/script.js) (PIN validation), [`settings.js`](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/settings.js) (Preference management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry & Session"]
  node_signin["Sign-in<br/>static page<br/>[index.html]"]
  node_auth["PIN validation<br/>client logic<br/>[script.js]"]
  node_session[("Session context<br/>sessionStorage")]
end

subgraph group_pos["POS Workflow"]
  node_dashboard["Cashier dashboard<br/>static page<br/>[dashboard.html]"]
  node_checkout["Cart &amp; checkout<br/>client logic<br/>[dashboard.js]"]
  node_orders[("Local orders<br/>localStorage")]
end

subgraph group_views["Supporting Views"]
  node_history["Order history<br/>static page<br/>[history.html]"]
  node_history_logic["History search<br/>client logic<br/>[history.js]"]
  node_menu["Menu board<br/>static page<br/>[menu.html]"]
  node_menu_logic["Catalog exploration<br/>client logic<br/>[menu.js]"]
  node_feedback["Feedback<br/>static page<br/>[feedback.html]"]
  node_feedback_logic["Review handling<br/>client logic<br/>[feedback.js]"]
  node_settings["Operator settings<br/>static page<br/>[settings.html]"]
  node_settings_logic["Preference management<br/>client logic<br/>[settings.js]"]
end

subgraph group_browser["Browser Runtime"]
  node_reviews[("Local reviews<br/>localStorage")]
  node_preferences[("Local preferences<br/>localStorage")]
  node_styles["Shared visual system<br/>CSS<br/>[style.css]"]
  node_background["Background animation<br/>browser script<br/>[bg-circles.js]"]
  node_assets["Visual assets<br/>media assets"]
end

node_signin -->|"loads"| node_auth
node_auth -->|"writes on sign-in"| node_session
node_auth -->|"redirects after auth"| node_dashboard
node_session -->|"operator context"| node_dashboard
node_dashboard -->|"loads"| node_checkout
node_checkout -->|"persists held/completed orders"| node_orders
node_history -->|"loads"| node_history_logic
node_history_logic -->|"reads and filters"| node_orders
node_menu -->|"loads"| node_menu_logic
node_feedback -->|"loads"| node_feedback_logic
node_feedback_logic -->|"persists reviews"| node_reviews
node_settings -->|"loads"| node_settings_logic
node_settings_logic -->|"persists per operator"| node_preferences
node_session -->|"identifies operator"| node_settings_logic
node_dashboard -.->|"shared styling"| node_styles
node_menu -.->|"shared styling"| node_styles
node_history -.->|"shared styling"| node_styles
node_feedback -.->|"shared styling"| node_styles
node_settings -.->|"shared styling"| node_styles
node_signin -.->|"ambient runtime"| node_background
node_dashboard -.->|"uses imagery"| node_assets

click node_signin "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/index.html"
click node_auth "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/script.js"
click node_dashboard "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/dashboard.html"
click node_checkout "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/dashboard.js"
click node_history "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/history.html"
click node_history_logic "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/history.js"
click node_menu "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/menu.html"
click node_menu_logic "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/menu.js"
click node_feedback "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/feedback.html"
click node_feedback_logic "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/feedback.js"
click node_settings "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/settings.html"
click node_settings_logic "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/settings.js"
click node_styles "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/style.css"
click node_background "https://github.com/karanratiya123/coffee-shop-management-system/blob/main/bg-circles.js"
click node_assets "https://github.com/karanratiya123/coffee-shop-management-system/tree/main/assets"

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_signin,node_auth,node_session toneBlue
class node_dashboard,node_checkout,node_orders toneAmber
class node_history,node_history_logic,node_menu,node_menu_logic,node_feedback,node_feedback_logic,node_settings,node_settings_logic toneMint
class node_reviews,node_preferences,node_styles,node_background,node_assets toneRose
```

## Components

### Entry & Session

- [Sign-in](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/index.html): static page · Validates embedded operator PINs and starts a session. · `index.html`
- [PIN validation](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/script.js): client logic · `script.js`
- **Session context**: sessionStorage · Operator context shared only within the browser session.

### POS Workflow

- [Cashier dashboard](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/dashboard.html): static page · Primary checkout entry point. · `dashboard.html`
- [Cart & checkout](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/dashboard.js): client logic · Builds carts, calculates discount/tax/totals, and completes or holds orders. · `dashboard.js`
- **Local orders**: localStorage · Held and completed transactions scoped to one browser profile.

### Supporting Views

- [Order history](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/history.html): static page · `history.html`
- [History search](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/history.js): client logic · Renders and filters locally stored transactions. · `history.js`
- [Menu board](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/menu.html): static page · `menu.html`
- [Catalog exploration](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/menu.js): client logic · Filters catalog items and exposes detail, nutrition, and stock. · `menu.js`
- [Feedback](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/feedback.html): static page · `feedback.html`
- [Review handling](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/feedback.js): client logic · Validates reviews and recomputes visible metrics. · `feedback.js`
- [Operator settings](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/settings.html): static page · `settings.html`
- [Preference management](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/settings.js): client logic · Stores display and checkout preferences per operator. · `settings.js`

### Browser Runtime

- **Local reviews**: localStorage
- **Local preferences**: localStorage · Per-operator UI and checkout personalization.
- [Shared visual system](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/style.css): CSS · Responsive presentation shared by static views. · `style.css`
- [Background animation](https://github.com/karanratiya123/coffee-shop-management-system/blob/main/bg-circles.js): browser script · `bg-circles.js`
- [Visual assets](https://github.com/karanratiya123/coffee-shop-management-system/tree/main/assets): media assets · Login and dashboard imagery. · `assets`

## Connections

- Sign-in → PIN validation: loads
- PIN validation → Session context: writes on sign-in
- PIN validation → Cashier dashboard: redirects after auth
- Session context → Cashier dashboard: operator context
- Cashier dashboard → Cart & checkout: loads
- Cart & checkout → Local orders: persists held/completed orders
- Order history → History search: loads
- History search → Local orders: reads and filters
- Menu board → Catalog exploration: loads
- Feedback → Review handling: loads
- Review handling → Local reviews: persists reviews
- Operator settings → Preference management: loads
- Preference management → Local preferences: persists per operator
- Session context → Preference management: identifies operator
- Cashier dashboard → Shared visual system: shared styling
- Menu board → Shared visual system: shared styling
- Order history → Shared visual system: shared styling
- Feedback → Shared visual system: shared styling
- Operator settings → Shared visual system: shared styling
- Sign-in → Background animation: ambient runtime
- Cashier dashboard → Visual assets: uses imagery