# eloxbdeveloper/web-based-inventory-control-for-pharmacies architecture

> Architecture diagram of the GitHub repository eloxbdeveloper/web-based-inventory-control-for-pharmacies, 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/eloxbdeveloper/web-based-inventory-control-for-pharmacies
- Repository: https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies
- Video tour (about a minute): https://gitdiagram.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/video

## Overview

Web Inventory Control is a browser-based pharmacy inventory reconciliation application. Its main workflow loads and parses an Excel inventory, prepares and renders product rows, updates physical counts from barcode scans, and exports the currently visible results. Filters support discrepancy review, alphabetical lookup, duplicate cleanup, and restoring the full view. The README describes manual Excel loading as an operational capability, but the sampled entry point demonstrates automatic loading of the bundled example. Filter internals are sampled; other wiring is shown only where the sampled bootstrap or README supports it.

Main entry points: [`Src/Services/Bootstrap.js`](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/Bootstrap.js) (Application setup), [`Src/main.js`](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/main.js) (Browser entry), [`Src/Services/exportExcel.js`](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/exportExcel.js) (Excel export), [`Src/Models/excel.js`](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/excel.js) (Excel model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Application entry"]
  node_main["Browser entry<br/>[main.js]"]
  node_bootstrap["Application setup<br/>[Bootstrap.js]"]
  node_state["Control visibility<br/>[state.js]"]
end

subgraph group_inventory["Inventory data"]
  node_excelmodel["Excel model<br/>[excel.js]"]
  node_rows["Row collection<br/>[rowsCollection.js]"]
  node_row["Product row<br/>[row.js]"]
end

subgraph group_counting["Counting and review"]
  node_table["Inventory table<br/>[table.js]"]
  node_scanner["Barcode counting<br/>[scanner.js]"]
  node_filters["Inventory filters<br/>[filters.js]"]
end

subgraph group_exchange["Excel exchange"]
  node_sample["Example inventory<br/>[Example_Excel.xlsx]"]
  node_excelreader["Excel reader"]
  node_export["Excel export<br/>[exportExcel.js]"]
  node_xlsx["Excel writer"]
end

node_user(("Pharmacy staff"))
node_browser["Browser DOM"]

node_user -->|"opens app"| node_main
node_main -->|"fetches workbook"| node_sample
node_main -->|"parses workbook"| node_excelreader
node_excelreader -->|"returns rows"| node_main
node_main -->|"initializes with rows"| node_bootstrap
node_bootstrap -->|"creates model"| node_excelmodel
node_bootstrap -->|"renders inventory"| node_table
node_bootstrap -->|"initializes filters"| node_filters
node_bootstrap -->|"initializes scanner"| node_scanner
node_bootstrap -->|"enables controls"| node_state
node_bootstrap -->|"registers export action"| node_export
node_excelmodel -->|"creates collection"| node_rows
node_rows -->|"wraps row data"| node_row
node_table -->|"reads inventory"| node_excelmodel
node_table -->|"renders table"| node_browser
node_user -->|"scans barcode"| node_scanner
node_scanner -->|"updates count and difference"| node_browser
node_scanner -->|"colors difference"| node_table
node_user -->|"selects review filter"| node_filters
node_filters -->|"filters table rows"| node_browser
node_filters -->|"reads descriptions"| node_excelmodel
node_user -->|"requests export"| node_export
node_export -->|"reads visible rows"| node_browser
node_export -->|"reads headers"| node_excelmodel
node_export -->|"writes workbook"| node_xlsx
node_state -->|"toggles controls"| node_browser

click node_main "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/main.js"
click node_sample "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Multimedia/Example_Excel.xlsx"
click node_bootstrap "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/Bootstrap.js"
click node_excelmodel "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/excel.js"
click node_rows "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/rowsCollection.js"
click node_row "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/row.js"
click node_table "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/table.js"
click node_scanner "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/scanner.js"
click node_filters "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/filters.js"
click node_state "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/state.js"
click node_export "https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/exportExcel.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_main,node_bootstrap,node_state,node_browser toneBlue
class node_excelmodel,node_rows,node_row toneAmber
class node_table,node_scanner,node_filters toneMint
class node_sample,node_excelreader,node_export,node_xlsx toneRose
class node_user toneIndigo
```

## Components

### Application entry

- [Browser entry](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/main.js): `Src/main.js`
- [Application setup](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/Bootstrap.js): `Src/Services/Bootstrap.js`
- [Control visibility](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/state.js): `Src/UI/state.js`

### Inventory data

- [Excel model](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/excel.js): `Src/Models/excel.js`
- [Row collection](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/rowsCollection.js): `Src/Models/rowsCollection.js`
- [Product row](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Models/row.js): `Src/Models/row.js`

### Counting and review

- [Inventory table](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/table.js): `Src/UI/table.js`
- [Barcode counting](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/scanner.js): `Src/UI/scanner.js`
- [Inventory filters](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/UI/filters.js): `Src/UI/filters.js`

### Excel exchange

- [Example inventory](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Multimedia/Example_Excel.xlsx): `Src/Multimedia/Example_Excel.xlsx`
- **Excel reader**
- [Excel export](https://github.com/eloxbdeveloper/web-based-inventory-control-for-pharmacies/blob/main/Src/Services/exportExcel.js): `Src/Services/exportExcel.js`
- **Excel writer**

### Other components

- **Pharmacy staff**
- **Browser DOM**

## Connections

- Pharmacy staff → Browser entry: opens app
- Browser entry → Example inventory: fetches workbook
- Browser entry → Excel reader: parses workbook
- Excel reader → Browser entry: returns rows
- Browser entry → Application setup: initializes with rows
- Application setup → Excel model: creates model
- Application setup → Inventory table: renders inventory
- Application setup → Inventory filters: initializes filters
- Application setup → Barcode counting: initializes scanner
- Application setup → Control visibility: enables controls
- Application setup → Excel export: registers export action
- Excel model → Row collection: creates collection
- Row collection → Product row: wraps row data
- Inventory table → Excel model: reads inventory
- Inventory table → Browser DOM: renders table
- Pharmacy staff → Barcode counting: scans barcode
- Barcode counting → Browser DOM: updates count and difference
- Barcode counting → Inventory table: colors difference
- Pharmacy staff → Inventory filters: selects review filter
- Inventory filters → Browser DOM: filters table rows
- Inventory filters → Excel model: reads descriptions
- Pharmacy staff → Excel export: requests export
- Excel export → Browser DOM: reads visible rows
- Excel export → Excel model: reads headers
- Excel export → Excel writer: writes workbook
- Control visibility → Browser DOM: toggles controls