# petrofx7/erp-system architecture

> Architecture diagram of the GitHub repository petrofx7/erp-system, 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/petrofx7/erp-system
- Repository: https://github.com/petrofx7/erp-system

## Overview

This is a small Vue ERP orders frontend: users create clients and products, then compose and create orders whose totals are calculated automatically, and browse orders filtered by client. The graph follows the sampled app setup, routing, client/order pages, composable, and stores. Product-page/store behavior is included as documented in the README and tree; its implementation was not sampled. State is local Pinia state, with no external service or persistent database shown.

Main entry points: [`src/app/router/index.ts`](https://github.com/petrofx7/erp-system/blob/main/src/app/router/index.ts) (Route selection), [`src/pages/OrdersPage.vue`](https://github.com/petrofx7/erp-system/blob/main/src/pages/OrdersPage.vue) (Order workflow), [`src/stores/clients.ts`](https://github.com/petrofx7/erp-system/blob/main/src/stores/clients.ts) (Client state), [`src/stores/products.ts`](https://github.com/petrofx7/erp-system/blob/main/src/stores/products.ts) (Product state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_main["App bootstrap<br/>[main.ts]"]
  node_appview["App layout<br/>[App.vue]"]
  node_router["Route selection<br/>[index.ts]"]
  node_header["Navigation header<br/>[VHeader.vue]"]
end

subgraph group_workflow["ERP workflows"]
  node_home["Home page<br/>[Home.vue]"]
  node_clientsui["Client management<br/>[ClientsPage.vue]"]
  node_productsui["Product management<br/>[ProductsPage.vue]"]
  node_ordersui["Order workflow<br/>[OrdersPage.vue]"]
  node_draft["Order draft<br/>[useOrderDraft.ts]"]
end

subgraph group_domain["Domain state"]
  node_clients["Client state<br/>[clients.ts]"]
  node_products["Product state<br/>[products.ts]"]
  node_orders["Order state<br/>[orders.ts]"]
  node_types["Domain types"]
  node_idutil["ID generation<br/>[id.ts]"]
end

node_user(("ERP user"))

node_user -->|"opens app"| node_main
node_main -->|"mounts"| node_appview
node_main -->|"installs router"| node_router
node_appview -->|"renders"| node_header
node_appview -->|"shows route"| node_router
node_user -->|"selects page"| node_header
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_clientsui
node_router -->|"routes to"| node_productsui
node_router -->|"routes to"| node_ordersui
node_clientsui -->|"creates and reads"| node_clients
node_productsui -->|"creates and reads"| node_products
node_ordersui -->|"manages draft"| node_draft
node_draft -->|"reads products"| node_products
node_ordersui -->|"reads clients"| node_clients
node_ordersui -->|"reads products"| node_products
node_ordersui -->|"creates and lists"| node_orders
node_clients -->|"generates IDs"| node_idutil
node_orders -->|"generates IDs"| node_idutil
node_clients -->|"uses client type"| node_types
node_products -->|"uses product type"| node_types
node_orders -->|"uses order types"| node_types

click node_main "https://github.com/petrofx7/erp-system/blob/main/src/app/main.ts"
click node_appview "https://github.com/petrofx7/erp-system/blob/main/src/app/App.vue"
click node_router "https://github.com/petrofx7/erp-system/blob/main/src/app/router/index.ts"
click node_header "https://github.com/petrofx7/erp-system/blob/main/src/widgets/VHeader.vue"
click node_home "https://github.com/petrofx7/erp-system/blob/main/src/pages/Home.vue"
click node_clientsui "https://github.com/petrofx7/erp-system/blob/main/src/pages/ClientsPage.vue"
click node_productsui "https://github.com/petrofx7/erp-system/blob/main/src/pages/ProductsPage.vue"
click node_ordersui "https://github.com/petrofx7/erp-system/blob/main/src/pages/OrdersPage.vue"
click node_draft "https://github.com/petrofx7/erp-system/blob/main/src/composables/useOrderDraft.ts"
click node_clients "https://github.com/petrofx7/erp-system/blob/main/src/stores/clients.ts"
click node_products "https://github.com/petrofx7/erp-system/blob/main/src/stores/products.ts"
click node_orders "https://github.com/petrofx7/erp-system/blob/main/src/stores/orders.ts"
click node_types "https://github.com/petrofx7/erp-system/tree/main/src/shared/types"
click node_idutil "https://github.com/petrofx7/erp-system/blob/main/src/shared/utils/id.ts"

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_main,node_appview,node_router,node_header,node_user toneBlue
class node_home,node_clientsui,node_productsui,node_ordersui,node_draft toneAmber
class node_clients,node_products,node_orders,node_types,node_idutil toneMint
```

## Components

### App shell

- [App bootstrap](https://github.com/petrofx7/erp-system/blob/main/src/app/main.ts): `src/app/main.ts`
- [App layout](https://github.com/petrofx7/erp-system/blob/main/src/app/App.vue): `src/app/App.vue`
- [Route selection](https://github.com/petrofx7/erp-system/blob/main/src/app/router/index.ts): `src/app/router/index.ts`
- [Navigation header](https://github.com/petrofx7/erp-system/blob/main/src/widgets/VHeader.vue): `src/widgets/VHeader.vue`

### ERP workflows

- [Home page](https://github.com/petrofx7/erp-system/blob/main/src/pages/Home.vue): `src/pages/Home.vue`
- [Client management](https://github.com/petrofx7/erp-system/blob/main/src/pages/ClientsPage.vue): `src/pages/ClientsPage.vue`
- [Product management](https://github.com/petrofx7/erp-system/blob/main/src/pages/ProductsPage.vue): `src/pages/ProductsPage.vue`
- [Order workflow](https://github.com/petrofx7/erp-system/blob/main/src/pages/OrdersPage.vue): `src/pages/OrdersPage.vue`
- [Order draft](https://github.com/petrofx7/erp-system/blob/main/src/composables/useOrderDraft.ts): `src/composables/useOrderDraft.ts`

### Domain state

- [Client state](https://github.com/petrofx7/erp-system/blob/main/src/stores/clients.ts): `src/stores/clients.ts`
- [Product state](https://github.com/petrofx7/erp-system/blob/main/src/stores/products.ts): `src/stores/products.ts`
- [Order state](https://github.com/petrofx7/erp-system/blob/main/src/stores/orders.ts): `src/stores/orders.ts`
- [Domain types](https://github.com/petrofx7/erp-system/tree/main/src/shared/types): `src/shared/types`
- [ID generation](https://github.com/petrofx7/erp-system/blob/main/src/shared/utils/id.ts): `src/shared/utils/id.ts`

### Other components

- **ERP user**

## Connections

- ERP user → App bootstrap: opens app
- App bootstrap → App layout: mounts
- App bootstrap → Route selection: installs router
- App layout → Navigation header: renders
- App layout → Route selection: shows route
- ERP user → Navigation header: selects page
- Route selection → Home page: routes to
- Route selection → Client management: routes to
- Route selection → Product management: routes to
- Route selection → Order workflow: routes to
- Client management → Client state: creates and reads
- Product management → Product state: creates and reads
- Order workflow → Order draft: manages draft
- Order draft → Product state: reads products
- Order workflow → Client state: reads clients
- Order workflow → Product state: reads products
- Order workflow → Order state: creates and lists
- Client state → ID generation: generates IDs
- Order state → ID generation: generates IDs
- Client state → Domain types: uses client type
- Product state → Domain types: uses product type
- Order state → Domain types: uses order types