Acctz AI UI

Acctz AI 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, Emotion, SCSS
State	Zustand
Auth	Firebase Authentication (email/password, Google)
Database	Firebase Firestore (persistent local cache, multi-tab)
Routing	react-router-dom v7 (createBrowserRouter)
Charts	MUI X Charts
API Proxy	Vite dev proxy to localhost:3500 (Acctz AI Node)

---

Features

↑ Back to top

• Dashboard -- Landing page with navigation (expanded views coming soon)
• 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-ai-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
│   │   ├── account.ts
│   │   ├── entity.ts
│   │   ├── journal.ts
│   │   ├── user.ts
│   │   └── vendor.ts
│   ├── shared/           # State, routing, themes, utilities
│   │   ├── zustand.ts
│   │   ├── router.tsx
│   │   ├── AuthContext.tsx
│   │   ├── themes.ts
│   │   └── ...
│   ├── App.tsx
│   └── index.tsx
├── public/               # Static assets, logos, screenshots
├── vite.config.ts
├── Dockerfile
├── nginx.conf
└── package.json

---

Running Locally

↑ Back to top

Prerequisites

• Node.js 18+
• Acctz AI Node server running on port 3500 (for API proxy)

Development

cd acctz-ai-ui
npm install
npm run dev

The dev server starts with --host for network access. Vite proxies /api requests to http://localhost:3500/api.

Production Build

npm run build

---

Deployment

↑ Back to top

The app uses a multi-stage Docker build:

1. Build stage -- Node 21 runs npm install and npm run build
2. Serve stage -- Nginx serves the static /dist output

docker build -t kgs/acctz-ai-ui:latest .
docker run --name acctz-ai-ui -p 80:80 kgs/acctz-ai-ui:latest

The image is pushed to a private registry and deployed via kubectl rollout restart.

---

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