# ivanpavlovic-web/modern-pos-suite architecture

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

- Interactive diagram: https://gitdiagram.com/ivanpavlovic-web/modern-pos-suite
- Repository: https://github.com/ivanpavlovic-web/modern-pos-suite

## Overview

POS Sistem is a browser-based point-of-sale application backed by a Django REST API. Cashiers authenticate, browse or scan products, manage open sales, and check out; the frontend then requests a receipt PDF. Managers and admins have separate workflows for catalog administration, refunds, reports, audit review, and receipt settings. The tree and README establish these capabilities, while sampled code confirms POS API calls, JWT authentication, inventory WebSockets, and Redis channel configuration. Backend endpoint-to-model details were not sampled, so those links are shown only at the documented API and persistence level.

Main entry points: [`frontend/src/App.jsx`](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/App.jsx) (Routes and Roles), [`frontend/src/api.js`](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/api.js) (HTTP API Client), [`backend/pos/views.py`](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/views.py) (REST API), [`frontend/src/pages/POS.jsx`](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/POS.jsx) (Cashier Register)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Cashier Interface"]
  node_app["Routes and Roles<br/>[App.jsx]"]
  node_auth_ui["Login Session<br/>[auth.jsx]"]
  node_pos_ui["Cashier Register<br/>[POS.jsx]"]
  node_api_client["HTTP API Client<br/>[api.js]"]
  node_ws_hook["WebSocket Client<br/>[useWebSocket.js]"]
end

subgraph group_operations["Store Operations"]
  node_admin_ui["Catalog Admin<br/>[Admin.jsx]"]
  node_refund_ui["Refunds<br/>[Refunds.jsx]"]
  node_reports_ui["Reports<br/>[Reports.jsx]"]
  node_daily_ui["Daily Report"]
  node_periodic_ui["Periodic Report"]
  node_audit_ui["Audit Log<br/>[AuditLog.jsx]"]
  node_receipt_settings["Receipt Settings"]
end

subgraph group_backend["Django Services"]
  node_api["REST API<br/>[views.py]"]
  node_permissions["Access Rules<br/>[permissions.py]"]
  node_data_models["POS Domain Models<br/>[models.py]"]
  node_reports_service["Report Generation<br/>[reports.py]"]
  node_receipt_pdf["Receipt PDF<br/>[pdf.py]"]
  node_ws_service["Inventory and Sales Events<br/>[consumers.py]"]
end

subgraph group_infrastructure["Runtime State"]
  node_postgres[("PostgreSQL<br/>[settings.py]")]
  node_redis["Redis Channels<br/>[settings.py]"]
end

node_operator(("Cashier or Manager"))

node_operator -->|"uses"| node_app
node_app -->|"routes login"| node_auth_ui
node_app -->|"routes register"| node_pos_ui
node_app -->|"routes admin"| node_admin_ui
node_app -->|"routes refunds"| node_refund_ui
node_app -->|"routes reports"| node_reports_ui
node_app -->|"routes daily"| node_daily_ui
node_app -->|"routes periodic"| node_periodic_ui
node_app -->|"routes audit"| node_audit_ui
node_app -->|"routes settings"| node_receipt_settings
node_auth_ui -->|"requests auth"| node_api_client
node_pos_ui -->|"requests sales"| node_api_client
node_pos_ui -->|"subscribes inventory"| node_ws_hook
node_admin_ui -->|"requests catalog"| node_api_client
node_refund_ui -->|"requests refunds"| node_api_client
node_reports_ui -->|"requests reports"| node_api_client
node_daily_ui -->|"requests report"| node_api_client
node_periodic_ui -->|"requests report"| node_api_client
node_audit_ui -->|"requests audit"| node_api_client
node_receipt_settings -->|"requests settings"| node_api_client
node_api_client -->|"sends HTTP"| node_api
node_api -->|"checks access"| node_permissions
node_api -->|"reads and writes"| node_data_models
node_data_models -->|"persists records"| node_postgres
node_api -->|"generates reports"| node_reports_service
node_api -->|"creates receipt"| node_receipt_pdf
node_ws_hook -->|"opens socket"| node_ws_service
node_ws_service -->|"uses channel layer"| node_redis
node_api -.->|"publishes events"| node_redis

click node_app "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/App.jsx"
click node_auth_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/auth.jsx"
click node_pos_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/POS.jsx"
click node_admin_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Admin.jsx"
click node_refund_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Refunds.jsx"
click node_reports_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Reports.jsx"
click node_daily_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/DailyReportPage.jsx"
click node_periodic_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/PeriodicReportPage.jsx"
click node_audit_ui "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/AuditLog.jsx"
click node_receipt_settings "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/ReceiptSettings.jsx"
click node_api_client "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/api.js"
click node_ws_hook "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/hooks/useWebSocket.js"
click node_api "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/views.py"
click node_permissions "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/permissions.py"
click node_data_models "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/models.py"
click node_reports_service "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/reports.py"
click node_receipt_pdf "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/pdf.py"
click node_ws_service "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/consumers.py"
click node_postgres "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/config/settings.py"
click node_redis "https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/config/settings.py"

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_auth_ui,node_pos_ui,node_api_client,node_ws_hook toneBlue
class node_admin_ui,node_refund_ui,node_reports_ui,node_daily_ui,node_periodic_ui,node_audit_ui,node_receipt_settings toneAmber
class node_api,node_permissions,node_data_models,node_reports_service,node_receipt_pdf,node_ws_service toneMint
class node_postgres,node_redis toneRose
class node_operator toneIndigo
```

## Components

### Cashier Interface

- [Routes and Roles](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Login Session](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/auth.jsx): `frontend/src/auth.jsx`
- [Cashier Register](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/POS.jsx): `frontend/src/pages/POS.jsx`
- [HTTP API Client](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/api.js): `frontend/src/api.js`
- [WebSocket Client](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/hooks/useWebSocket.js): `frontend/src/hooks/useWebSocket.js`

### Store Operations

- [Catalog Admin](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Admin.jsx): `frontend/src/pages/Admin.jsx`
- [Refunds](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Refunds.jsx): `frontend/src/pages/Refunds.jsx`
- [Reports](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/Reports.jsx): `frontend/src/pages/Reports.jsx`
- [Daily Report](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/DailyReportPage.jsx): `frontend/src/pages/DailyReportPage.jsx`
- [Periodic Report](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/PeriodicReportPage.jsx): `frontend/src/pages/PeriodicReportPage.jsx`
- [Audit Log](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/AuditLog.jsx): `frontend/src/pages/AuditLog.jsx`
- [Receipt Settings](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/frontend/src/pages/ReceiptSettings.jsx): `frontend/src/pages/ReceiptSettings.jsx`

### Django Services

- [REST API](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/views.py): `backend/pos/views.py`
- [Access Rules](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/permissions.py): `backend/pos/permissions.py`
- [POS Domain Models](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/models.py): `backend/pos/models.py`
- [Report Generation](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/reports.py): `backend/pos/reports.py`
- [Receipt PDF](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/pdf.py): `backend/pos/pdf.py`
- [Inventory and Sales Events](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/pos/consumers.py): `backend/pos/consumers.py`

### Runtime State

- [PostgreSQL](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/config/settings.py): `backend/config/settings.py`
- [Redis Channels](https://github.com/ivanpavlovic-web/modern-pos-suite/blob/main/backend/config/settings.py): `backend/config/settings.py`

### Other components

- **Cashier or Manager**

## Connections

- Cashier or Manager → Routes and Roles: uses
- Routes and Roles → Login Session: routes login
- Routes and Roles → Cashier Register: routes register
- Routes and Roles → Catalog Admin: routes admin
- Routes and Roles → Refunds: routes refunds
- Routes and Roles → Reports: routes reports
- Routes and Roles → Daily Report: routes daily
- Routes and Roles → Periodic Report: routes periodic
- Routes and Roles → Audit Log: routes audit
- Routes and Roles → Receipt Settings: routes settings
- Login Session → HTTP API Client: requests auth
- Cashier Register → HTTP API Client: requests sales
- Cashier Register → WebSocket Client: subscribes inventory
- Catalog Admin → HTTP API Client: requests catalog
- Refunds → HTTP API Client: requests refunds
- Reports → HTTP API Client: requests reports
- Daily Report → HTTP API Client: requests report
- Periodic Report → HTTP API Client: requests report
- Audit Log → HTTP API Client: requests audit
- Receipt Settings → HTTP API Client: requests settings
- HTTP API Client → REST API: sends HTTP
- REST API → Access Rules: checks access
- REST API → POS Domain Models: reads and writes
- POS Domain Models → PostgreSQL: persists records
- REST API → Report Generation: generates reports
- REST API → Receipt PDF: creates receipt
- WebSocket Client → Inventory and Sales Events: opens socket
- Inventory and Sales Events → Redis Channels: uses channel layer
- REST API → Redis Channels: publishes events