# edwardshami/attendance-app architecture

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

- Interactive diagram: https://gitdiagram.com/edwardshami/attendance-app
- Repository: https://github.com/edwardshami/attendance-app

## Overview

This is a browser-based attendance and leave-management application with administrator, manager, and employee workflows. Users sign in or create the first administrator account; the app loads shared records, then presents role-specific screens. Employees record attendance, request leave, and review notifications; administrators manage employees, attendance records, leave decisions, and work settings. Firestore persistence and Firebase initialization form the main internal data layer. The excerpts show these core paths, but do not expose every operation or all app-to-login wiring.

Main entry points: [`app.js`](https://github.com/edwardshami/attendance-app/blob/main/app.js) (App State and Routing), [`utils/store.js`](https://github.com/edwardshami/attendance-app/blob/main/utils/store.js) (Firestore Operations), [`components/EmployeeView.js`](https://github.com/edwardshami/attendance-app/blob/main/components/EmployeeView.js) (Employee Console), [`components/Login.js`](https://github.com/edwardshami/attendance-app/blob/main/components/Login.js) (Sign-in and Setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and Shell"]
  node_app["App State and Routing<br/>[app.js]"]
  node_login["Sign-in and Setup<br/>[Login.js]"]
  node_navbar["Navigation and Notices<br/>[Navbar.js]"]
end

subgraph group_workflows["Workforce Workflows"]
  node_admin["Admin Console<br/>[AdminView.js]"]
  node_employee["Employee Console<br/>[EmployeeView.js]"]
end

subgraph group_data["Persistence"]
  node_store["Firestore Operations<br/>[store.js]"]
  node_firestore[("Firestore")]
end

subgraph group_platform["Browser Platform"]
  node_firebase["Firebase Setup<br/>[firebase-init.js]"]
  node_time["Time Service"]
  node_serviceworker["Network-first Worker<br/>[sw.js]"]
end

node_user(("User"))

node_user -.->|"signs in"| node_login
node_login -->|"returns user"| node_app
node_app -->|"loads records"| node_store
node_app -->|"writes records"| node_store
node_app -->|"renders for admins"| node_admin
node_app -->|"renders for employees"| node_employee
node_app -->|"renders shell"| node_navbar
node_admin -->|"invokes actions"| node_app
node_employee -->|"invokes actions"| node_app
node_employee -->|"adds notices"| node_store
node_navbar -->|"updates notices"| node_store
node_store -->|"reads and writes"| node_firestore
node_firebase -->|"initializes"| node_firestore
node_app -->|"fetches current time"| node_time
node_serviceworker -->|"serves requests"| node_user

click node_app "https://github.com/edwardshami/attendance-app/blob/main/app.js"
click node_login "https://github.com/edwardshami/attendance-app/blob/main/components/Login.js"
click node_navbar "https://github.com/edwardshami/attendance-app/blob/main/components/Navbar.js"
click node_admin "https://github.com/edwardshami/attendance-app/blob/main/components/AdminView.js"
click node_employee "https://github.com/edwardshami/attendance-app/blob/main/components/EmployeeView.js"
click node_store "https://github.com/edwardshami/attendance-app/blob/main/utils/store.js"
click node_firebase "https://github.com/edwardshami/attendance-app/blob/main/firebase-init.js"
click node_serviceworker "https://github.com/edwardshami/attendance-app/blob/main/sw.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_navbar,node_user toneBlue
class node_admin,node_employee toneAmber
class node_store,node_firestore toneMint
class node_firebase,node_time,node_serviceworker toneRose
```

## Components

### Access and Shell

- [App State and Routing](https://github.com/edwardshami/attendance-app/blob/main/app.js): `app.js`
- [Sign-in and Setup](https://github.com/edwardshami/attendance-app/blob/main/components/Login.js): `components/Login.js`
- [Navigation and Notices](https://github.com/edwardshami/attendance-app/blob/main/components/Navbar.js): `components/Navbar.js`

### Workforce Workflows

- [Admin Console](https://github.com/edwardshami/attendance-app/blob/main/components/AdminView.js): `components/AdminView.js`
- [Employee Console](https://github.com/edwardshami/attendance-app/blob/main/components/EmployeeView.js): `components/EmployeeView.js`

### Persistence

- [Firestore Operations](https://github.com/edwardshami/attendance-app/blob/main/utils/store.js): `utils/store.js`
- **Firestore**

### Browser Platform

- [Firebase Setup](https://github.com/edwardshami/attendance-app/blob/main/firebase-init.js): `firebase-init.js`
- **Time Service**
- [Network-first Worker](https://github.com/edwardshami/attendance-app/blob/main/sw.js): `sw.js`

### Other components

- **User**

## Connections

- User → Sign-in and Setup: signs in
- Sign-in and Setup → App State and Routing: returns user (evidence: `components/Login.js`)
- App State and Routing → Firestore Operations: loads records (evidence: `app.js`)
- App State and Routing → Firestore Operations: writes records (evidence: `app.js`)
- App State and Routing → Admin Console: renders for admins (evidence: `app.js`)
- App State and Routing → Employee Console: renders for employees (evidence: `app.js`)
- App State and Routing → Navigation and Notices: renders shell (evidence: `app.js`)
- Admin Console → App State and Routing: invokes actions (evidence: `components/AdminView.js`)
- Employee Console → App State and Routing: invokes actions (evidence: `components/EmployeeView.js`)
- Employee Console → Firestore Operations: adds notices (evidence: `components/EmployeeView.js`)
- Navigation and Notices → Firestore Operations: updates notices (evidence: `components/Navbar.js`)
- Firestore Operations → Firestore: reads and writes (evidence: `utils/store.js`)
- Firebase Setup → Firestore: initializes (evidence: `firebase-init.js`)
- App State and Routing → Time Service: fetches current time (evidence: `app.js`)
- Network-first Worker → User: serves requests (evidence: `sw.js`)