Prototype documentation

A plain-language guide to what this build is, how to sign in, and what every screen is showing you.

What this is — and isn't

This is a static, front-end-only prototype of an FMCG ERP system, built to demonstrate the product idea end-to-end: sales & distribution, invoicing, inventory with batch traceability, production, field force tracking, full IFRS-style financial statements, cost accounting, journal & ledger, fixed-asset depreciation, treasury, VAT, attendance and payroll — plus a simulated AI audit layer.

There is no backend. All data you see is sample/mock data baked into the page. Nothing you enter (invoices, leave requests, punches) is saved anywhere — a page refresh resets everything. The login checks a hardcoded list of demo accounts in the browser; it is not real authentication and must not be treated as one. A production build would need a real API, database, authentication service and access-control layer behind every one of these screens.

Open index.html directly in any modern browser — there is nothing to install or build.

How to log in

Sign in with any of the demo accounts below (same password for all of them), or use the quick demo access cards under the sign-in form on the login screen, which fill the form and sign you in with one click.

Role	Email	Password
Managing Director	`[email protected]`	`Demo@123`
Accounts Manager	`[email protected]`	`Demo@123`
Sales Manager	`[email protected]`	`Demo@123`
Factory Manager	`[email protected]`	`Demo@123`
HR Manager	`[email protected]`	`Demo@123`
Marketing Manager	`[email protected]`	`Demo@123`
Procurement Manager	`[email protected]`	`Demo@123`
Field Sales Officer	`[email protected]`	`Demo@123`

"Forgot password" is present for realism but isn't wired up — there's no email service behind a static prototype. Use one of the accounts above instead.

Roles & access

Every login only ever sees the modules that role is permitted to use — the left-hand menu itself changes per role, not just page content:

Managing Director

Full visibility across every module and every location, including AI Insights for all departments.

Accounts Manager

Financial statements, cost statement, journal & ledger, depreciation, treasury, VAT, procurement payables, read-only sales, and Finance-scoped AI Insights.

Sales Manager

Distributors, CRM & quotations, invoicing, credit control, distribution & logistics, field force, stock, and Sales-scoped AI Insights.

Factory Manager

Work orders, BOM, production planning, QC, yield, wastage, inventory, cost statement, depreciation, attendance register, and Production-scoped AI Insights.

HR Manager

Attendance register, leave approvals, payroll, workforce (directory, recruitment, performance), and HR-scoped AI Insights.

Marketing Manager

Campaigns, trade promotions, spend vs. budget, read-only sales, and Marketing-scoped AI Insights.

Procurement Manager

Supplier master, purchase orders, goods receipt, inventory, and Procurement-scoped AI Insights.

Field Sales Officer

Self-service only — the four My space pages (attendance, payslips, leave, profile). No company-wide data.

Module tour

Dashboard — headline KPIs, the attendance calendar for the signed-in user, a six-month primary vs. secondary sales trend, top products, and a "needs attention" digest.
My space is four separate pages rather than one crowded screen, so every role — including field officers, who otherwise only had a single nav item — gets proper navigation: My attendance (live punch clock, the same attendance calendar, recent check-ins, manager card and daily record), My payslips, My leave (balances and an apply button), and My profile.
Sales & distribution — distributor credit exposure and territory achievement against target.
CRM & quotations — the opportunity pipeline (new → contacted → quotation sent → negotiation → won/lost) with a stage funnel chart, and a quotations list that converts into a real invoice.
New invoice — build an invoice line by line; trade-scheme discount (4% at 50+ cartons, 7% at 100+) and 15% VAT calculate automatically, and a credit check runs against the distributor's limit.
Inventory & batch — every batch carries a manufacture/expiry date and a full forward trace (raw material → production shift → QC → depot → distributors → remaining stock).
Raw materials — the raw-material & packaging stock register with reorder levels, and the stock-adjustment/write-off log. Split out from Inventory & batch so each page stays focused.
Production — work orders against planned output, yield vs. standard, and material variance.
Production planning — the bill-of-materials cost breakdown, a 5-day production plan, and quality-control check results. Split out from Production for the same reason.
Distribution & logistics — today's dispatch board (vehicle, route, ETA, status) and depot-to-depot stock transfers.
Field force — live officer check-ins, outlet coverage and orders booked, from the mobile app.
Marketing & promotions — campaigns with budget vs. spend, a channel-mix donut, and the trade-promotion schedule by territory and product.
Procurement & suppliers — supplier master with payment terms and outstanding payable, purchase orders through to goods receipt (GRN), and spend by category.
Financial statements — pick any one statement (profit or loss, financial position, cash flows, changes in equity, key ratios) from the selector, or open Break-even analysis for an interactive, graphical break-even chart — edit fixed cost, variable cost per carton or selling price and the chart and break-even figures recalculate live. The P&L tab includes a donut of where revenue goes, and the ratios tab includes a six-month margin trend line.
Cost statement — cost of goods manufactured built up from raw material, direct labour and factory overhead, plus standard-vs-actual per-carton cost.
Journal & ledger — a step-by-step accounting-equation walkthrough, the general journal, posted T-accounts, and a trial balance derived from those same postings.
Fixed assets & depreciation — straight-line, units-of-activity and declining-balance schedules for the same asset, recalculated live as you change any input.
Receivables & treasury — receivable ageing (as a table and as a donut chart), bank reconciliation status, and net book value of fixed assets by class.
Ledger & VAT — trial balance, the Mushak 6.3 output-VAT register, and the five ledger postings one invoice generates automatically.
Attendance register — today's company-wide punches across factory, depot and head office.
Leave approvals — the approval queue for requests raised from My workspace; Approve/Reject updates the request status and the pending/approved/rejected counts immediately.
HR & payroll — the payroll register, with field-officer incentive pulled straight from verified field achievement data.
Workforce — the employee directory, the recruitment pipeline by open position, and the current performance-appraisal cycle.
AI Insights — see the next section.

Beyond the tables and meters already on each screen, several pages now carry a second way to read the same numbers at a glance: a donut chart (product mix, expense composition, receivable ageing, wastage breakdown, attendance status mix on the calendar), a gauge (credit health, production yield), a line chart (margin trend), and a horizontal bar chart with a target marker (territory achievement) — all built with the same dependency-free inline SVG technique as the original sales-trend and break-even charts, so nothing needs a charting library or an internet connection.

AI Insights — how it actually works

AI Insights and the small "AI suggestion" callouts on the Sales, Production, HR, Treasury, Marketing and Procurement screens are a rule-based simulation, not a live call to an AI or ML service. Two categories are genuinely computed from the prototype's own data at evaluation time:

Credit risk — every distributor's utilisation and overdue days are evaluated against fixed thresholds (overdue > 7 days → critical, utilisation ≥ 95% → warning).
Stock ageing — every batch's days-to-expiry is evaluated the same way (≤ 20 days → critical, ≤ 30 days → warning).

The remaining findings (cost variance, ratio trend, attendance risk) are curated to match what those screens already show, since a full computation over every dataset was out of scope for this build. The health score, severity mix and department filter are all real and update when you change the filters or press "Re-run analysis".

For a production version: replace the curated findings with real computation across the live database, and optionally route the narrative text (title/detail/suggestion) through an actual LLM call — the rule engine already produces exactly the structured input (severity, department, metric, threshold) an LLM would need to write a better-worded recommendation. That call would need to run server-side, since an API key can never be safely embedded in a static, client-side page like this one.

NILA — the chat assistant

The chat bubble in the bottom-right corner (visible once you're signed in) is NILA, a rule-based question-answering assistant over the same data the rest of the app shows. Like AI Insights, it is a simulated AI, not a live call to an external model: your message is matched against a fixed list of keyword-tagged intents (credit risk, stock expiry, sales performance, revenue & margin, ratios, break-even, VAT, production yield, company attendance, payroll, marketing campaigns & spend, purchase orders & suppliers, and "my own" attendance/leave/payslip), and the matching intent's handler reads the live figures and writes the reply.

It respects the same role scoping as everywhere else in the app. If you ask something your login isn't permitted to see — e.g. a Field Sales Officer asking about company-wide financial ratios — NILA declines and tells you which role does have access, the same way the left-hand menu itself would never show that screen to that login. Questions about your own attendance, leave or payslip are always answered, regardless of role, since that's always your own data.

For a production version: the intent list and role-gating logic here are exactly the routing layer a real assistant would need — swap the keyword matcher for an actual LLM call (server-side, with the same role/department check applied before the model ever sees the question or the data) and the rest of the design carries over unchanged.

Known limitations

No persistence — invoices, leave requests, punches and AI "re-runs" only exist until you refresh.
No real authentication, authorization or encryption — credentials live in client-side JavaScript.
All figures (sales, financial statements, payroll, attendance) are illustrative sample data, not a real company's books.
"Download PDF" uses the browser's native print-to-PDF; there is no server-side PDF generation.
The attendance calendar is deterministically generated per role/date so it looks the same every time you view it, but it is not a record of anything that actually happened.
NILA answers from a fixed intent list, not free-form understanding — unusual phrasing may fall back to a generic "try asking about…" reply rather than a wrong answer.

← Back to the app