# bertoale/penjualan architecture

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

- Interactive diagram: https://gitdiagram.com/bertoale/penjualan
- Repository: https://github.com/bertoale/penjualan

## Overview

Penjualan App is a web-based sales and purchasing management system. Users log in, maintain product and partner records, record sales or purchases, and view or export reports. The Vue client communicates with an Express API; controllers implement domain operations using Sequelize models backed by MySQL. The tree and README document additional client features, but most frontend views and several controllers were not sampled, so their detailed wiring is not asserted.

Main entry points: [`client/src/App.vue`](https://github.com/bertoale/penjualan/blob/main/client/src/App.vue) (Vue app), [`server/app.js`](https://github.com/bertoale/penjualan/blob/main/server/app.js) (HTTP application), [`client/src/services/api.js`](https://github.com/bertoale/penjualan/blob/main/client/src/services/api.js) (API client), [`server/models/index.js`](https://github.com/bertoale/penjualan/blob/main/server/models/index.js) (Sequelize models)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue client"]
  node_app["Vue app<br/>[App.vue]"]
  node_login["Login<br/>[Login.vue]"]
  node_catalog["Catalog management<br/>[Produk.vue]"]
  node_sales_ui["Sales workflow<br/>[Penjualan.vue]"]
  node_purchase_ui["Purchase workflow<br/>[Pembelian.vue]"]
  node_reports_ui["Reports and export<br/>[Reports.vue]"]
  node_api_client["API client<br/>[api.js]"]
end

subgraph group_api["Express API"]
  node_express["HTTP application<br/>[app.js]"]
  node_user_routes["User routes<br/>[userRoutes.js]"]
  node_product_routes["Product routes<br/>[produkRoutes.js]"]
  node_sales_routes["Sales routes<br/>[penjualanRoutes.js]"]
  node_purchase_routes["Purchase routes<br/>[pembelianRoutes.js]"]
  node_reports_routes["Report routes<br/>[reportsRoutes.js]"]
end

subgraph group_domain["Business operations"]
  node_auth["Authentication<br/>[auth.js]"]
  node_user_ops["User management<br/>[userController.js]"]
  node_product_ops["Product management"]
  node_sales_ops["Sales transactions"]
  node_purchase_ops["Purchase transactions"]
  node_report_ops["Report generation"]
end

subgraph group_data["Persistence"]
  node_models["Sequelize models<br/>[index.js]"]
  node_mysql[("MySQL database")]
end

node_user(("Staff user"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_login
node_app -->|"renders"| node_catalog
node_app -->|"renders"| node_sales_ui
node_app -->|"renders"| node_purchase_ui
node_app -->|"renders"| node_reports_ui
node_login -->|"requests"| node_api_client
node_catalog -->|"requests"| node_api_client
node_sales_ui -->|"requests"| node_api_client
node_purchase_ui -->|"requests"| node_api_client
node_reports_ui -->|"requests"| node_api_client
node_api_client -->|"HTTP requests"| node_express
node_express -->|"dispatches"| node_user_routes
node_express -->|"dispatches"| node_product_routes
node_express -->|"dispatches"| node_sales_routes
node_express -->|"dispatches"| node_purchase_routes
node_express -->|"dispatches"| node_reports_routes
node_user_routes -->|"applies"| node_auth
node_product_routes -->|"applies"| node_auth
node_sales_routes -->|"applies"| node_auth
node_purchase_routes -->|"applies"| node_auth
node_user_routes -->|"dispatches"| node_user_ops
node_product_routes -->|"dispatches"| node_product_ops
node_sales_routes -->|"dispatches"| node_sales_ops
node_purchase_routes -->|"dispatches"| node_purchase_ops
node_reports_routes -->|"dispatches"| node_report_ops
node_user_ops -->|"reads/writes"| node_models
node_product_ops -->|"reads/writes"| node_models
node_sales_ops -->|"reads/writes"| node_models
node_purchase_ops -->|"reads/writes"| node_models
node_report_ops -->|"queries"| node_models
node_models -->|"persists"| node_mysql

click node_app "https://github.com/bertoale/penjualan/blob/main/client/src/App.vue"
click node_login "https://github.com/bertoale/penjualan/blob/main/client/src/views/Login.vue"
click node_catalog "https://github.com/bertoale/penjualan/blob/main/client/src/views/Produk.vue"
click node_sales_ui "https://github.com/bertoale/penjualan/blob/main/client/src/views/Penjualan.vue"
click node_purchase_ui "https://github.com/bertoale/penjualan/blob/main/client/src/views/Pembelian.vue"
click node_reports_ui "https://github.com/bertoale/penjualan/blob/main/client/src/views/Reports.vue"
click node_api_client "https://github.com/bertoale/penjualan/blob/main/client/src/services/api.js"
click node_express "https://github.com/bertoale/penjualan/blob/main/server/app.js"
click node_user_routes "https://github.com/bertoale/penjualan/blob/main/server/routes/userRoutes.js"
click node_product_routes "https://github.com/bertoale/penjualan/blob/main/server/routes/produkRoutes.js"
click node_sales_routes "https://github.com/bertoale/penjualan/blob/main/server/routes/penjualanRoutes.js"
click node_purchase_routes "https://github.com/bertoale/penjualan/blob/main/server/routes/pembelianRoutes.js"
click node_reports_routes "https://github.com/bertoale/penjualan/blob/main/server/routes/reportsRoutes.js"
click node_auth "https://github.com/bertoale/penjualan/blob/main/server/middleware/auth.js"
click node_user_ops "https://github.com/bertoale/penjualan/blob/main/server/controllers/userController.js"
click node_product_ops "https://github.com/bertoale/penjualan/blob/main/server/controllers/produkController.js"
click node_sales_ops "https://github.com/bertoale/penjualan/blob/main/server/controllers/penjualanController.js"
click node_purchase_ops "https://github.com/bertoale/penjualan/blob/main/server/controllers/pembelianController.js"
click node_report_ops "https://github.com/bertoale/penjualan/blob/main/server/controllers/reportsController.js"
click node_models "https://github.com/bertoale/penjualan/blob/main/server/models/index.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_login,node_catalog,node_sales_ui,node_purchase_ui,node_reports_ui,node_api_client,node_user toneBlue
class node_express,node_user_routes,node_product_routes,node_sales_routes,node_purchase_routes,node_reports_routes toneAmber
class node_auth,node_user_ops,node_product_ops,node_sales_ops,node_purchase_ops,node_report_ops toneMint
class node_models,node_mysql toneRose
```

## Components

### Vue client

- [Vue app](https://github.com/bertoale/penjualan/blob/main/client/src/App.vue): `client/src/App.vue`
- [Login](https://github.com/bertoale/penjualan/blob/main/client/src/views/Login.vue): `client/src/views/Login.vue`
- [Catalog management](https://github.com/bertoale/penjualan/blob/main/client/src/views/Produk.vue): `client/src/views/Produk.vue`
- [Sales workflow](https://github.com/bertoale/penjualan/blob/main/client/src/views/Penjualan.vue): `client/src/views/Penjualan.vue`
- [Purchase workflow](https://github.com/bertoale/penjualan/blob/main/client/src/views/Pembelian.vue): `client/src/views/Pembelian.vue`
- [Reports and export](https://github.com/bertoale/penjualan/blob/main/client/src/views/Reports.vue): `client/src/views/Reports.vue`
- [API client](https://github.com/bertoale/penjualan/blob/main/client/src/services/api.js): `client/src/services/api.js`

### Express API

- [HTTP application](https://github.com/bertoale/penjualan/blob/main/server/app.js): `server/app.js`
- [User routes](https://github.com/bertoale/penjualan/blob/main/server/routes/userRoutes.js): `server/routes/userRoutes.js`
- [Product routes](https://github.com/bertoale/penjualan/blob/main/server/routes/produkRoutes.js): `server/routes/produkRoutes.js`
- [Sales routes](https://github.com/bertoale/penjualan/blob/main/server/routes/penjualanRoutes.js): `server/routes/penjualanRoutes.js`
- [Purchase routes](https://github.com/bertoale/penjualan/blob/main/server/routes/pembelianRoutes.js): `server/routes/pembelianRoutes.js`
- [Report routes](https://github.com/bertoale/penjualan/blob/main/server/routes/reportsRoutes.js): `server/routes/reportsRoutes.js`

### Business operations

- [Authentication](https://github.com/bertoale/penjualan/blob/main/server/middleware/auth.js): `server/middleware/auth.js`
- [User management](https://github.com/bertoale/penjualan/blob/main/server/controllers/userController.js): `server/controllers/userController.js`
- [Product management](https://github.com/bertoale/penjualan/blob/main/server/controllers/produkController.js): `server/controllers/produkController.js`
- [Sales transactions](https://github.com/bertoale/penjualan/blob/main/server/controllers/penjualanController.js): `server/controllers/penjualanController.js`
- [Purchase transactions](https://github.com/bertoale/penjualan/blob/main/server/controllers/pembelianController.js): `server/controllers/pembelianController.js`
- [Report generation](https://github.com/bertoale/penjualan/blob/main/server/controllers/reportsController.js): `server/controllers/reportsController.js`

### Persistence

- [Sequelize models](https://github.com/bertoale/penjualan/blob/main/server/models/index.js): `server/models/index.js`
- **MySQL database**

### Other components

- **Staff user**

## Connections

- Staff user → Vue app: uses
- Vue app → Login: renders
- Vue app → Catalog management: renders
- Vue app → Sales workflow: renders
- Vue app → Purchase workflow: renders
- Vue app → Reports and export: renders
- Login → API client: requests
- Catalog management → API client: requests
- Sales workflow → API client: requests
- Purchase workflow → API client: requests
- Reports and export → API client: requests
- API client → HTTP application: HTTP requests
- HTTP application → User routes: dispatches
- HTTP application → Product routes: dispatches
- HTTP application → Sales routes: dispatches
- HTTP application → Purchase routes: dispatches
- HTTP application → Report routes: dispatches
- User routes → Authentication: applies
- Product routes → Authentication: applies
- Sales routes → Authentication: applies
- Purchase routes → Authentication: applies
- User routes → User management: dispatches
- Product routes → Product management: dispatches
- Sales routes → Sales transactions: dispatches
- Purchase routes → Purchase transactions: dispatches
- Report routes → Report generation: dispatches
- User management → Sequelize models: reads/writes
- Product management → Sequelize models: reads/writes
- Sales transactions → Sequelize models: reads/writes
- Purchase transactions → Sequelize models: reads/writes
- Report generation → Sequelize models: queries
- Sequelize models → MySQL database: persists