VIZO ERP — Sales · Inventory · Purchases · Accounting
Production-grade ERP system designed for VIZO Pakistan (mobile accessories distribution — Karachi · Lahore · Islamabad).
Multi-branch, double-entry accounting, credit control, AI-assisted insights, SMS notifications, and more.
📂 Repository Structure
.
├── docs/ # Design documentation (markdown)
│ ├── VIZO_ERP_System_Design.md # ~3,100 lines — full system blueprint v2.0
│ └── UI_SITEMAP.md # ~1,200 lines — UI sitemap & IA
│
├── ui-prototype/ # HTML/CSS/JS prototype (reference only)
│ ├── index.html # Login screen
│ ├── pages/dashboard.html # SuperAdmin dashboard
│ └── assets/ # Logos, CSS, JS
│
├── vizo-erp/ # ★ Production Next.js 16 application
│ ├── src/
│ │ ├── app/
│ │ │ ├── (app)/ # All authenticated pages (sidebar shell)
│ │ │ │ ├── dashboard/
│ │ │ │ ├── parties/ # Customers + Suppliers (unified)
│ │ │ │ ├── sales/ # Orders · Invoices · Returns · Credit Holds
│ │ │ │ ├── purchases/ # POs · GRNs · Invoices · Returns
│ │ │ │ ├── inventory/ # Products · Stock · Transfers · Warehouses
│ │ │ │ ├── accounting/ # COA · JE · Vouchers · TB · P&L · BS · CF
│ │ │ │ ├── zakat/
│ │ │ │ ├── reports/ # Aging · Top Customers · Slow Moving · Dead Stock
│ │ │ │ ├── notifications/ # SMS history · templates · gateways
│ │ │ │ ├── ai-assistant/ # LLM chat
│ │ │ │ ├── admin/ # Users · Roles · Branches · Audit · Backup · LLM Usage
│ │ │ │ └── profile/
│ │ │ └── login/ # Auth screens
│ │ ├── components/
│ │ │ ├── ui/ # Button · Card · Badge · Input · DataTable · Tabs · etc.
│ │ │ ├── layout/ # Sidebar · TopBar · AIDrawer · ThemeToggle
│ │ │ ├── widgets/ # SalesTrendChart · StatCard · etc.
│ │ │ └── providers/ # ThemeProvider
│ │ ├── data/ # Mock data (mobile accessories — VIZO catalog)
│ │ ├── lib/ # nav-config · format · utils
│ │ └── types/
│ └── public/
│ ├── vizo-logo.png
│ └── vizo-logo-dark.jpg
│
├── proposal.docx # Original client proposal
└── Sales, Inventory, ... .pdf # Original client requirements
🛠 Tech Stack
Frontend
- Next.js 16 (App Router, React 19, Turbopack), deployed on Vercel
- TypeScript strict mode
- Tailwind CSS v4 (CSS-based config)
- shadcn-style components (custom-built with VIZO theme) on Radix UI primitives
- react-hook-form + Zod for forms and validation
- axios for API calls, @microsoft/signalr for the live notification bell
- Recharts for charts (loaded dynamically, never in the shared bundle)
- Lucide icons, next-themes for dark mode
- Web Push via a service worker (
public/sw.js)
Backend — ASP.NET Core 8 Web API (backend/vizo-backend)
- .NET 8, controllers-based REST API, Swagger in Development
- EF Core 8 + Npgsql on PostgreSQL (hosted on Neon, Singapore)
- JWT bearer auth (BCrypt password hashes); authorisation is by permission
(
perm:xxx policies), not by role name
- SignalR hub for live notifications; WebPush (VAPID) for browser push
- Hosted background services — nightly insights, order-confirmation reminders
(no Hangfire)
- Cloudinary for stored documents (PDFs) and images — two accounts
- MailKit (SMTP) for password-reset e-mail
- Invoices and every other document are rendered to PDF by the API itself
(
Documents/), and spreadsheets by its own XLSX writer — no third-party
reporting library
AI / Integrations
- Gemini Flash — SQL does the maths, the model only explains; it never writes SQL
- Planned, not built: SMS gateway (Jazz BizSMS / Telenor / Twilio PK) and
Easypaisa / JazzCash / HBL payment methods
🎨 Design System
| Token | Value | Usage |
|---|
| Brand Yellow | #EDC705 | Active states, primary CTAs, accents — used sparingly |
| Brand Navy | #031833 | Headings, dark mode bg |
| Font (UI) | Inter | All text |
| Font (Numbers) | JetBrains Mono | Money, IDs, tabular figures |
| Inspiration | Stripe Dashboard · Tailwind UI · Zoho One | — |
Dark mode is first-class, not bolted on.
🚀 Run Locally
cd vizo-erp
npm install
npm run dev
Open http://localhost:3000 → login with any credentials → explore.
✨ What's Built (v1 frontend complete)
- 63 pages across 11 modules
- 0 TypeScript errors
- All routes return 200
- Light + Dark mode on every page
- Responsive for desktop/tablet/mobile
Modules
- Dashboard — role-based widgets, AI insight banner, stat cards, charts
- Parties — unified customers + suppliers, 6-tab detail, visit tracking, credit settings
- Sales — orders with state machine, credit holds, invoices (printable), partial returns
- Purchases — POs, GRNs (with damaged tracking), purchase invoices, returns
- Inventory — products, multi-warehouse stock, transfers (Kanban), movements log
- Accounting — branch-aware COA, JE, vouchers (with mobile wallet support), full reports (TB, P&L, BS, CF), period close
- Zakat — Hijri periods, nisab calculation, finalization
- Reports — AR/AP aging, top customers, slow-moving, dead stock, sales trends
- Notifications — SMS history, templates, gateway management
- AI Assistant — LLM chat with suggested prompts and audit log
- Administration — users, roles, branches, audit log, backup & restore, settings, LLM usage
📋 Next Phase
- Backend scaffolding (ASP.NET Core 8 + EF Core + Postgres)
- Auth API integration (JWT + refresh tokens)
- Real data wiring (replace mocks)
- Background jobs (SMS dispatch, daily backup, MV refresh)
- AI tool implementations (Gemini integration)
Client: Umer Memon · VIZO Pakistan
Stack decision date: 2026-04-10
Frontend completion: 2026-05-01
