Acctz UI

Acctz UI is a progressive web application branded acctz.ai ("Accounting. Automated."). Built with Vite, React 18, and TypeScript, it provides a modern accounting interface backed by Firebase Authentication and Firestore.

---

Tech Stack

↑ Back to top

Layer	Technology
Framework	React 18, TypeScript
Build	Vite 7, PWA via vite-plugin-pwa
UI	MUI Joy + MUI Material v7, Emotion, SCSS
State	Zustand, Redux Toolkit
Auth	Firebase Authentication (email/password, Google)
Database	Firebase Firestore (realtime subscriptions, persistent local cache)
Routing	react-router-dom v7 (createBrowserRouter)
Charts	MUI X Charts v8
Shared types	acctz-core (local package)
API Proxy	Vite dev proxy /api → localhost:3500 (Acctz Node)

---

Features

↑ Back to top

• Dashboard — Landing page with navigation
• Chart of Accounts — Desktop table and mobile card views, search, type filtering, inactive toggle
• Account Register — Drill into individual accounts from the chart of accounts
• Banking — Banking operations view
• Customers — Customer management
• Vendors — Vendor center with transaction views
• Privacy Policy — Dedicated privacy page
• Firebase Auth — Email/password and Google sign-in with protected routes
• PWA — Installable progressive web app with offline caching via Workbox
• Theming — User-configurable color schemes and layout options (nav position, header colors)

---

Project Structure

↑ Back to top

acctz-ui/
├── src/
│   ├── components/       # UI screens and widgets
│   │   ├── Dashboard.tsx
│   │   ├── ChartOfAccounts2.tsx
│   │   ├── Register.tsx
│   │   ├── Banking.tsx
│   │   ├── Customers.tsx
│   │   ├── Vendors.tsx
│   │   ├── Login.tsx
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── ...
│   ├── firebase/         # Firebase config and data layer
│   │   ├── config.ts
│   │   ├── accounts.ts
│   │   ├── journal-entries.ts
│   │   └── user.ts
│   ├── model/            # TypeScript interfaces
│   ├── shared/           # State, routing, themes, utilities
│   │   ├── zustand.ts
│   │   ├── router.tsx
│   │   ├── AuthContext.tsx
│   │   ├── themes.ts
│   │   └── ...
│   ├── App.tsx
│   └── index.tsx
├── public/               # Static assets, logos, screenshots
├── scripts/
│   └── deploy.sh         # Firebase Hosting deploy script
├── vite.config.ts
└── package.json

---

Running Locally

↑ Back to top

cd ui
npm install
npm run dev

The dev server starts with --host for network access. Vite proxies /api requests to http://localhost:3500 (Acctz Node REST API).

---

Deployment

↑ Back to top

The UI is deployed to Firebase Hosting (app.acctz.dev, project acctz-ai-fs) via:

./ui/scripts/deploy.sh

The script rebuilds the core package, regenerates the lockfile, runs vite build, and deploys the dist/ output with firebase-tools.

---

Architecture Notes

↑ Back to top

Authentication Flow

The app wraps all routes in an AuthProvider. Firebase onAuthStateChanged drives the auth state. Unauthenticated users see the Login screen; authenticated users get the full app shell with header, content outlet, and footer.

State Management

Zustand holds the global app state including:

• Current user and Firebase user data
• Chart of accounts (loaded from Firestore)
• User options (theme colors, nav position, drawer state)
• Entity list from the user's Firestore profile

Data Layer

Chart of accounts and user data are loaded from Firestore with realtime subscriptions. The subscribeAccountsRealtime function re-subscribes on auth state changes to keep the COA in sync.

Routing

Routes are defined via createBrowserRouter with the App component as the layout wrapper. The default route redirects to /dashboard.

Path	Component
/dashboard	Dashboard
/accounts	ChartOfAccounts2
/accounts/:accountCode/register	Register
/banking	Banking
/customers	Customers
/vendors	Vendors
/privacy	PrivacyPolicy