# black23cat/admin-api-client architecture

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

- Interactive diagram: https://gitdiagram.com/black23cat/admin-api-client
- Repository: https://github.com/black23cat/admin-api-client

## Overview

Polygraphic Admin API Client is a React administration frontend for purchase orders, invoices, payments, and production jobs. Users enter through JWT-backed authentication, then navigate protected pages to manage operational and financial records; the PO workflow can create an invoice from selected orders and confirm its details. Filtering and pagination are shared UI layers. The sampled source shows routing, PO and invoice actions, and job-file parsing; several page implementations and their API calls were not sampled, so those links are marked unverified or omitted.

Main entry points: [`src/components/PoPage/PoPage.jsx`](https://github.com/black23cat/admin-api-client/blob/main/src/components/PoPage/PoPage.jsx) (PO management), [`src/routes.jsx`](https://github.com/black23cat/admin-api-client/blob/main/src/routes.jsx) (Route configuration), [`src/components/JobData/JobData.jsx`](https://github.com/black23cat/admin-api-client/blob/main/src/components/JobData/JobData.jsx) (Production job data), [`src/components/Sidebar/Sidebar.jsx`](https://github.com/black23cat/admin-api-client/blob/main/src/components/Sidebar/Sidebar.jsx) (Sidebar navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and navigation"]
  node_app["App shell and auth<br/>[App.jsx]"]
  node_router["Route configuration<br/>[routes.jsx]"]
  node_login["Login form<br/>[LoginForm.jsx]"]
  node_navigation["Sidebar navigation<br/>[Sidebar.jsx]"]
end

subgraph group_orders["Purchase orders"]
  node_po_page["PO management<br/>[PoPage.jsx]"]
  node_po_form["PO editor and upload<br/>[PoForm.jsx]"]
  node_po_card["PO card actions<br/>[PoCard.jsx]"]
end

subgraph group_finance["Invoices and payments"]
  node_invoice_form["Invoice confirmation"]
  node_invoice_page["Invoice management<br/>[InvoicePage.jsx]"]
  node_invoice_card["Invoice actions<br/>[InvoiceCard.jsx]"]
  node_payment_form["Payment form<br/>[PaymentForm.jsx]"]
  node_payment_data["Payment tracking<br/>[PaymentData.jsx]"]
end

subgraph group_production["Production and shared UI"]
  node_job_data["Production job data<br/>[JobData.jsx]"]
  node_file_details["Production file parsing<br/>[getFileDetails.js]"]
  node_filter["Filtering and search<br/>[FilterForm.jsx]"]
  node_pagination["Page navigation<br/>[PageNavigation.jsx]"]
  node_format["Currency formatting<br/>[formatter.js]"]
  node_patterns["Filename validation<br/>[regexPattern.js]"]
end

node_user(("Administrator"))
node_api{{"Polygraphic Admin API"}}

node_user -->|"opens"| node_app
node_app -->|"shows when unauthenticated"| node_login
node_app -->|"renders"| node_navigation
node_router -->|"mounts shell"| node_app
node_router -->|"routes to"| node_po_page
node_router -->|"routes to"| node_po_form
node_router -->|"routes to"| node_invoice_page
node_router -->|"routes to"| node_job_data
node_router -->|"routes to"| node_payment_data
node_navigation -->|"navigates to"| node_po_page
node_navigation -->|"navigates to"| node_invoice_page
node_navigation -->|"navigates to"| node_job_data
node_navigation -->|"navigates to"| node_payment_data
node_po_page -->|"fetches and creates invoices"| node_api
node_po_page -->|"opens confirmation"| node_invoice_form
node_po_page -->|"renders"| node_po_card
node_po_page -->|"uses filters"| node_filter
node_po_page -->|"uses pagination"| node_pagination
node_po_form -->|"creates or updates orders"| node_api
node_po_form -->|"validates filenames"| node_patterns
node_po_card -->|"opens editor"| node_po_form
node_invoice_page -->|"renders"| node_invoice_card
node_invoice_page -->|"uses filters"| node_filter
node_invoice_page -->|"uses pagination"| node_pagination
node_invoice_card -->|"records payment or cancellation"| node_api
node_invoice_card -->|"opens payment form"| node_payment_form
node_payment_data -.->|"loads payment records"| node_api
node_job_data -.->|"loads job records"| node_api
node_job_data -->|"parses filenames"| node_file_details
node_job_data -->|"uses filters"| node_filter
node_job_data -->|"uses pagination"| node_pagination
node_invoice_card -->|"formats amounts"| node_format
node_payment_data -->|"formats amounts"| node_format

click node_app "https://github.com/black23cat/admin-api-client/blob/main/src/App.jsx"
click node_router "https://github.com/black23cat/admin-api-client/blob/main/src/routes.jsx"
click node_login "https://github.com/black23cat/admin-api-client/blob/main/src/components/LoginForm/LoginForm.jsx"
click node_navigation "https://github.com/black23cat/admin-api-client/blob/main/src/components/Sidebar/Sidebar.jsx"
click node_po_page "https://github.com/black23cat/admin-api-client/blob/main/src/components/PoPage/PoPage.jsx"
click node_po_form "https://github.com/black23cat/admin-api-client/blob/main/src/components/PoForm/PoForm.jsx"
click node_po_card "https://github.com/black23cat/admin-api-client/blob/main/src/components/PoCard/PoCard.jsx"
click node_invoice_form "https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoiceConfirmForm/InvoiceConfirmForm.jsx"
click node_invoice_page "https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoicePage/InvoicePage.jsx"
click node_invoice_card "https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoiceCard/InvoiceCard.jsx"
click node_payment_form "https://github.com/black23cat/admin-api-client/blob/main/src/components/PaymentForm/PaymentForm.jsx"
click node_payment_data "https://github.com/black23cat/admin-api-client/blob/main/src/components/PaymentData/PaymentData.jsx"
click node_job_data "https://github.com/black23cat/admin-api-client/blob/main/src/components/JobData/JobData.jsx"
click node_file_details "https://github.com/black23cat/admin-api-client/blob/main/src/utils/getFileDetails.js"
click node_filter "https://github.com/black23cat/admin-api-client/blob/main/src/components/FilterForm/FilterForm.jsx"
click node_pagination "https://github.com/black23cat/admin-api-client/blob/main/src/components/PageNavigation/PageNavigation.jsx"
click node_format "https://github.com/black23cat/admin-api-client/blob/main/src/utils/formatter.js"
click node_patterns "https://github.com/black23cat/admin-api-client/blob/main/src/utils/regexPattern.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_router,node_login,node_navigation toneBlue
class node_po_page,node_po_form,node_po_card toneAmber
class node_invoice_form,node_invoice_page,node_invoice_card,node_payment_form,node_payment_data,node_api toneMint
class node_job_data,node_file_details,node_filter,node_pagination,node_format,node_patterns toneRose
class node_user toneIndigo
```

## Components

### Access and navigation

- [App shell and auth](https://github.com/black23cat/admin-api-client/blob/main/src/App.jsx): `src/App.jsx`
- [Route configuration](https://github.com/black23cat/admin-api-client/blob/main/src/routes.jsx): `src/routes.jsx`
- [Login form](https://github.com/black23cat/admin-api-client/blob/main/src/components/LoginForm/LoginForm.jsx): `src/components/LoginForm/LoginForm.jsx`
- [Sidebar navigation](https://github.com/black23cat/admin-api-client/blob/main/src/components/Sidebar/Sidebar.jsx): `src/components/Sidebar/Sidebar.jsx`

### Purchase orders

- [PO management](https://github.com/black23cat/admin-api-client/blob/main/src/components/PoPage/PoPage.jsx): `src/components/PoPage/PoPage.jsx`
- [PO editor and upload](https://github.com/black23cat/admin-api-client/blob/main/src/components/PoForm/PoForm.jsx): `src/components/PoForm/PoForm.jsx`
- [PO card actions](https://github.com/black23cat/admin-api-client/blob/main/src/components/PoCard/PoCard.jsx): `src/components/PoCard/PoCard.jsx`

### Invoices and payments

- [Invoice confirmation](https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoiceConfirmForm/InvoiceConfirmForm.jsx): `src/components/InvoiceConfirmForm/InvoiceConfirmForm.jsx`
- [Invoice management](https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoicePage/InvoicePage.jsx): `src/components/InvoicePage/InvoicePage.jsx`
- [Invoice actions](https://github.com/black23cat/admin-api-client/blob/main/src/components/InvoiceCard/InvoiceCard.jsx): `src/components/InvoiceCard/InvoiceCard.jsx`
- [Payment form](https://github.com/black23cat/admin-api-client/blob/main/src/components/PaymentForm/PaymentForm.jsx): `src/components/PaymentForm/PaymentForm.jsx`
- [Payment tracking](https://github.com/black23cat/admin-api-client/blob/main/src/components/PaymentData/PaymentData.jsx): `src/components/PaymentData/PaymentData.jsx`

### Production and shared UI

- [Production job data](https://github.com/black23cat/admin-api-client/blob/main/src/components/JobData/JobData.jsx): `src/components/JobData/JobData.jsx`
- [Production file parsing](https://github.com/black23cat/admin-api-client/blob/main/src/utils/getFileDetails.js): `src/utils/getFileDetails.js`
- [Filtering and search](https://github.com/black23cat/admin-api-client/blob/main/src/components/FilterForm/FilterForm.jsx): `src/components/FilterForm/FilterForm.jsx`
- [Page navigation](https://github.com/black23cat/admin-api-client/blob/main/src/components/PageNavigation/PageNavigation.jsx): `src/components/PageNavigation/PageNavigation.jsx`
- [Currency formatting](https://github.com/black23cat/admin-api-client/blob/main/src/utils/formatter.js): `src/utils/formatter.js`
- [Filename validation](https://github.com/black23cat/admin-api-client/blob/main/src/utils/regexPattern.js): `src/utils/regexPattern.js`

### Other components

- **Administrator**
- **Polygraphic Admin API**

## Connections

- Administrator → App shell and auth: opens (evidence: `README.md`)
- App shell and auth → Login form: shows when unauthenticated (evidence: `src/App.jsx`)
- App shell and auth → Sidebar navigation: renders (evidence: `src/App.jsx`)
- Route configuration → App shell and auth: mounts shell (evidence: `src/routes.jsx`)
- Route configuration → PO management: routes to (evidence: `src/routes.jsx`)
- Route configuration → PO editor and upload: routes to (evidence: `src/routes.jsx`)
- Route configuration → Invoice management: routes to (evidence: `src/routes.jsx`)
- Route configuration → Production job data: routes to (evidence: `src/routes.jsx`)
- Route configuration → Payment tracking: routes to (evidence: `src/routes.jsx`)
- Sidebar navigation → PO management: navigates to (evidence: `src/components/Sidebar/Sidebar.jsx`)
- Sidebar navigation → Invoice management: navigates to (evidence: `src/components/Sidebar/Sidebar.jsx`)
- Sidebar navigation → Production job data: navigates to (evidence: `src/components/Sidebar/Sidebar.jsx`)
- Sidebar navigation → Payment tracking: navigates to (evidence: `src/components/Sidebar/Sidebar.jsx`)
- PO management → Polygraphic Admin API: fetches and creates invoices (evidence: `src/components/PoPage/PoPage.jsx`)
- PO management → Invoice confirmation: opens confirmation (evidence: `src/components/PoPage/PoPage.jsx`)
- PO management → PO card actions: renders (evidence: `src/components/PoPage/PoPage.jsx`)
- PO management → Filtering and search: uses filters (evidence: `src/components/PoPage/PoPage.jsx`)
- PO management → Page navigation: uses pagination (evidence: `src/components/PoPage/PoPage.jsx`)
- PO editor and upload → Polygraphic Admin API: creates or updates orders (evidence: `src/components/PoForm/PoForm.jsx`)
- PO editor and upload → Filename validation: validates filenames (evidence: `src/components/PoForm/PoForm.jsx`)
- PO card actions → PO editor and upload: opens editor (evidence: `src/components/PoCard/PoCard.jsx`)
- Invoice management → Invoice actions: renders (evidence: `src/components/InvoicePage/InvoicePage.jsx`)
- Invoice management → Filtering and search: uses filters (evidence: `src/components/InvoicePage/InvoicePage.jsx`)
- Invoice management → Page navigation: uses pagination (evidence: `src/components/InvoicePage/InvoicePage.jsx`)
- Invoice actions → Polygraphic Admin API: records payment or cancellation (evidence: `src/components/InvoiceCard/InvoiceCard.jsx`)
- Invoice actions → Payment form: opens payment form (evidence: `src/components/InvoiceCard/InvoiceCard.jsx`)
- Payment tracking → Polygraphic Admin API: loads payment records
- Production job data → Polygraphic Admin API: loads job records
- Production job data → Production file parsing: parses filenames (evidence: `src/components/JobData/JobData.jsx`)
- Production job data → Filtering and search: uses filters (evidence: `src/components/JobData/JobData.jsx`)
- Production job data → Page navigation: uses pagination (evidence: `src/components/JobData/JobData.jsx`)
- Invoice actions → Currency formatting: formats amounts (evidence: `src/components/InvoiceCard/InvoiceCard.jsx`)
- Payment tracking → Currency formatting: formats amounts (evidence: `src/components/PaymentData/PaymentData.jsx`)