# justdudeduff/crmdude architecture

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

- Interactive diagram: https://gitdiagram.com/justdudeduff/crmdude
- Repository: https://github.com/justdudeduff/crmdude

## Overview

This is a browser-based ISP/customer-management CRM, with an employee login leading into a permission-aware dashboard. The main workflow is selecting a dashboard area to manage subscribers, leads, inventory, tickets, or staff and payroll; subscriber records expose related billing, documents, inventory, and ticket views. Firebase Realtime Database and a configured HTTP API provide backend access. Several dashboard areas are identified by the source index, but their internals were not sampled; those relationships are limited to documented routing/rendering references.

Main entry points: [`src/components/New_Dashboard.js`](https://github.com/justdudeduff/crmdude/blob/main/src/components/New_Dashboard.js) (Dashboard router), [`src/components/subscriberpage/Subscriber.js`](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Subscriber.js) (Subscriber workspace), [`src/components/LeadManagment/LeadDash.js`](https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/LeadDash.js) (Lead dashboard), [`src/App.js`](https://github.com/justdudeduff/crmdude/blob/main/src/App.js) (React app and routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_app["React app and routes<br/>[App.js]"]
  node_login["Login<br/>[Login.js]"]
  node_dashboard["Dashboard router<br/>[New_Dashboard.js]"]
  node_config["Backend configuration<br/>[FirebaseConfig.js]"]
end

subgraph group_crm["Customer CRM"]
  node_subscriber["Subscriber workspace<br/>[Subscriber.js]"]
  node_subscriber_details["Subscriber details"]
  node_subscriber_personal["Personal profile"]
  node_ledger["Customer ledger<br/>[Cust_Ledger.js]"]
  node_payments["Payments and receipts<br/>[Cust_PayRecpt.js]"]
  node_subscriber_tickets["Subscriber tickets<br/>[TicketsTable.js]"]
  node_subscriber_inventory["Subscriber inventory<br/>[InventoryTable.js]"]
  node_documents["Subscriber documents<br/>[DocumentUpload.js]"]
end

subgraph group_sales["Lead management"]
  node_leads["Lead dashboard<br/>[LeadDash.js]"]
  node_lead_create["Lead creation<br/>[CreateLeadForm.js]"]
  node_enquiry["Enquiry creation<br/>[CreateEnquiry.js]"]
  node_lead_expand["Lead listing and filters<br/>[ExpandLeads.js]"]
end

subgraph group_operations["Operations"]
  node_inventory["Inventory management<br/>[InventryDash.js]"]
  node_tickets["Ticket dashboard<br/>[TicketdataDash.js]"]
  node_network["Network rack management<br/>[RackDashBoard.js]"]
  node_masters["Business configuration<br/>[MasterDash.js]"]
end

subgraph group_people["People and access"]
  node_permissions["Permission provider"]
  node_employee["Employee management"]
  node_payroll["Payroll and attendance"]
end

node_user(("Employee"))
node_firebase[("Firebase services")]
node_api["Dude API"]

node_user -->|"opens"| node_app
node_app -->|"wraps"| node_permissions
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_login -->|"uses"| node_config
node_permissions -->|"fetches permissions"| node_api
node_config -->|"initializes"| node_firebase
node_config -->|"configures"| node_api
node_dashboard -->|"renders"| node_subscriber
node_dashboard -->|"renders"| node_leads
node_dashboard -->|"renders"| node_inventory
node_dashboard -->|"renders"| node_tickets
node_dashboard -->|"renders"| node_network
node_dashboard -->|"renders"| node_employee
node_dashboard -->|"renders"| node_payroll
node_dashboard -->|"renders"| node_masters
node_subscriber -->|"reads and updates"| node_config
node_subscriber -->|"renders"| node_subscriber_details
node_subscriber -->|"renders"| node_ledger
node_subscriber -->|"renders"| node_payments
node_subscriber -->|"renders"| node_subscriber_tickets
node_subscriber -->|"renders"| node_subscriber_inventory
node_subscriber -->|"renders"| node_documents
node_subscriber_details -->|"renders"| node_subscriber_personal
node_leads -->|"reads lead data"| node_firebase
node_leads -->|"renders"| node_lead_create
node_leads -->|"renders"| node_enquiry
node_leads -->|"renders"| node_lead_expand
node_lead_expand -->|"reads and updates"| node_firebase
node_inventory -->|"manages stock"| node_api
node_payroll -->|"submits deductions"| node_api
node_payroll -->|"reads attendance"| node_firebase

click node_app "https://github.com/justdudeduff/crmdude/blob/main/src/App.js"
click node_login "https://github.com/justdudeduff/crmdude/blob/main/src/components/Login.js"
click node_dashboard "https://github.com/justdudeduff/crmdude/blob/main/src/components/New_Dashboard.js"
click node_permissions "https://github.com/justdudeduff/crmdude/blob/main/src/components/PermissionProvider.js"
click node_config "https://github.com/justdudeduff/crmdude/blob/main/src/FirebaseConfig.js"
click node_subscriber "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Subscriber.js"
click node_subscriber_details "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/SubscriberDetails.js"
click node_subscriber_personal "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/SubscriberPersonal.js"
click node_ledger "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Cust_Ledger.js"
click node_payments "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Cust_PayRecpt.js"
click node_subscriber_tickets "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/TicketsTable.js"
click node_subscriber_inventory "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/InventoryTable.js"
click node_documents "https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/DocumentUpload.js"
click node_leads "https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/LeadDash.js"
click node_lead_create "https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/CreateLeadForm.js"
click node_enquiry "https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/CreateEnquiry.js"
click node_lead_expand "https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/ExpandLeads.js"
click node_inventory "https://github.com/justdudeduff/crmdude/blob/main/src/components/InventryPage/InventryDash.js"
click node_tickets "https://github.com/justdudeduff/crmdude/blob/main/src/components/TicketData/TicketdataDash.js"
click node_network "https://github.com/justdudeduff/crmdude/blob/main/src/components/NetworkRack/RackDashBoard.js"
click node_employee "https://github.com/justdudeduff/crmdude/blob/main/src/components/EmployeePage/EmployeeProfileDash.js"
click node_payroll "https://github.com/justdudeduff/crmdude/blob/main/src/components/PayoutandAttendence/PayrollandAttendence.js"
click node_masters "https://github.com/justdudeduff/crmdude/blob/main/src/components/Master/MasterDash.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_dashboard,node_config toneBlue
class node_subscriber,node_subscriber_details,node_subscriber_personal,node_ledger,node_payments,node_subscriber_tickets,node_subscriber_inventory,node_documents,node_firebase toneAmber
class node_leads,node_lead_create,node_enquiry,node_lead_expand,node_api toneMint
class node_inventory,node_tickets,node_network,node_masters toneRose
class node_permissions,node_employee,node_payroll,node_user toneIndigo
```

## Components

### App shell

- [React app and routes](https://github.com/justdudeduff/crmdude/blob/main/src/App.js): `src/App.js`
- [Login](https://github.com/justdudeduff/crmdude/blob/main/src/components/Login.js): `src/components/Login.js`
- [Dashboard router](https://github.com/justdudeduff/crmdude/blob/main/src/components/New_Dashboard.js): `src/components/New_Dashboard.js`
- [Backend configuration](https://github.com/justdudeduff/crmdude/blob/main/src/FirebaseConfig.js): `src/FirebaseConfig.js`

### Customer CRM

- [Subscriber workspace](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Subscriber.js): `src/components/subscriberpage/Subscriber.js`
- [Subscriber details](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/SubscriberDetails.js): `src/components/subscriberpage/SubscriberDetails.js`
- [Personal profile](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/SubscriberPersonal.js): `src/components/subscriberpage/SubscriberPersonal.js`
- [Customer ledger](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Cust_Ledger.js): `src/components/subscriberpage/Cust_Ledger.js`
- [Payments and receipts](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/Cust_PayRecpt.js): `src/components/subscriberpage/Cust_PayRecpt.js`
- [Subscriber tickets](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/TicketsTable.js): `src/components/subscriberpage/TicketsTable.js`
- [Subscriber inventory](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/InventoryTable.js): `src/components/subscriberpage/InventoryTable.js`
- [Subscriber documents](https://github.com/justdudeduff/crmdude/blob/main/src/components/subscriberpage/DocumentUpload.js): `src/components/subscriberpage/DocumentUpload.js`

### Lead management

- [Lead dashboard](https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/LeadDash.js): `src/components/LeadManagment/LeadDash.js`
- [Lead creation](https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/CreateLeadForm.js): `src/components/LeadManagment/CreateLeadForm.js`
- [Enquiry creation](https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/CreateEnquiry.js): `src/components/LeadManagment/CreateEnquiry.js`
- [Lead listing and filters](https://github.com/justdudeduff/crmdude/blob/main/src/components/LeadManagment/ExpandLeads.js): `src/components/LeadManagment/ExpandLeads.js`

### Operations

- [Inventory management](https://github.com/justdudeduff/crmdude/blob/main/src/components/InventryPage/InventryDash.js): `src/components/InventryPage/InventryDash.js`
- [Ticket dashboard](https://github.com/justdudeduff/crmdude/blob/main/src/components/TicketData/TicketdataDash.js): `src/components/TicketData/TicketdataDash.js`
- [Network rack management](https://github.com/justdudeduff/crmdude/blob/main/src/components/NetworkRack/RackDashBoard.js): `src/components/NetworkRack/RackDashBoard.js`
- [Business configuration](https://github.com/justdudeduff/crmdude/blob/main/src/components/Master/MasterDash.js): `src/components/Master/MasterDash.js`

### People and access

- [Permission provider](https://github.com/justdudeduff/crmdude/blob/main/src/components/PermissionProvider.js): `src/components/PermissionProvider.js`
- [Employee management](https://github.com/justdudeduff/crmdude/blob/main/src/components/EmployeePage/EmployeeProfileDash.js): `src/components/EmployeePage/EmployeeProfileDash.js`
- [Payroll and attendance](https://github.com/justdudeduff/crmdude/blob/main/src/components/PayoutandAttendence/PayrollandAttendence.js): `src/components/PayoutandAttendence/PayrollandAttendence.js`

### Other components

- **Employee**
- **Firebase services**
- **Dude API**

## Connections

- Employee → React app and routes: opens
- React app and routes → Permission provider: wraps (evidence: `src/App.js`)
- React app and routes → Login: routes to (evidence: `src/App.js`)
- React app and routes → Dashboard router: routes to (evidence: `src/App.js`)
- Login → Backend configuration: uses (evidence: `src/components/Login.js`)
- Permission provider → Dude API: fetches permissions (evidence: `src/components/PermissionProvider.js`)
- Backend configuration → Firebase services: initializes (evidence: `src/FirebaseConfig.js`)
- Backend configuration → Dude API: configures (evidence: `src/FirebaseConfig.js`)
- Dashboard router → Subscriber workspace: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Lead dashboard: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Inventory management: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Ticket dashboard: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Network rack management: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Employee management: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Payroll and attendance: renders (evidence: `src/components/New_Dashboard.js`)
- Dashboard router → Business configuration: renders (evidence: `src/components/New_Dashboard.js`)
- Subscriber workspace → Backend configuration: reads and updates (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Subscriber details: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Customer ledger: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Payments and receipts: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Subscriber tickets: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Subscriber inventory: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber workspace → Subscriber documents: renders (evidence: `src/components/subscriberpage/Subscriber.js`)
- Subscriber details → Personal profile: renders (evidence: `src/components/subscriberpage/SubscriberDetails.js`)
- Lead dashboard → Firebase services: reads lead data (evidence: `src/components/LeadManagment/LeadDash.js`)
- Lead dashboard → Lead creation: renders (evidence: `src/components/LeadManagment/LeadDash.js`)
- Lead dashboard → Enquiry creation: renders (evidence: `src/components/LeadManagment/LeadDash.js`)
- Lead dashboard → Lead listing and filters: renders (evidence: `src/components/LeadManagment/LeadDash.js`)
- Lead listing and filters → Firebase services: reads and updates (evidence: `src/components/LeadManagment/ExpandLeads.js`)
- Inventory management → Dude API: manages stock (evidence: `src/components/InventryPage/InventryDash.js`)
- Payroll and attendance → Dude API: submits deductions (evidence: `src/components/PayoutandAttendence/PayrollandAttendence.js`)
- Payroll and attendance → Firebase services: reads attendance (evidence: `src/components/PayoutandAttendence/PayrollandAttendence.js`)