# Megastar Foods Transport CRM — Demo Prototype

**Client:** Megastar Foods Ltd. (B2B wheat processor supplying Nestlé, Pizza Hut, McDonald's)
**Scope:** Transport Procurement & Vendor Management Portal
**Total screens:** 34 (Super Admin 6 · Admin 6 · Logistics 7 · Accounts 5 · Management 3 · Transporter 7)

Open `index.html` in a browser to launch the persona selector.

---

## 10-minute demo walkthrough

Speak this out loud, click through in this order. Every persona has a **Persona switcher** in the top-right so you can jump between them without going back to `index.html`.

### Act 1 — Setup (2 min) · Super Admin
1. `index.html` → tap **Super Admin** tile → login (any password, role stays "Super Admin"). **Say:** "Rajesh is the org-owner. He can create logins, approve transporters, set discount slabs."
2. Left sidebar → **Transporters** → *Approval queue* tab. Click **Review** on **Sharma Transport Co (MSF-TR-0015)**. The KYC modal opens with all 7 documents (GST, PAN, Aadhaar, cheque, insurance, RC bundle, DLs). **Say:** "Every KYC doc mandated by the requirement doc." → Click **Approve transporter** → toast confirms.
3. Left sidebar → **Settings**. Point at the **Cash discount slabs** card — Immediate 2%, 7-day 1.5%, 15-day 1%. **Say:** "These three slabs plus standard 30-day are exactly what the client asked for."

### Act 2 — Post a load & run the bid (3 min) · Logistics
4. Top-right **Persona switcher** → **Switch to Logistics** (skips login — lands direct on Priya's dashboard). **Say:** "Priya runs the daily loads."
5. Sidebar → **Post a load**. One-page form pre-filled with Ropar → Nashik, 30 MT Flour (Maida), Nestlé Nashik DC, closing 17:00, ceiling ₹5,000. Click **Post & Notify** → toast: *"Notifying 68 approved transporters via WhatsApp + SMS"*.
6. Auto-lands on **Live bids**. **Point at the top card:** Verma Roadways is L1 at ₹4,650/MT, row highlighted green. Deep Cargo, Singla, North India Freight sit below. **Say:** "Sealed single-shot bids — each transporter submits one price. Ranks (L1..Ln) settle when the window closes at 17:00."

### Act 3 — Transporter side (1.5 min) · Transporter
7. Persona switcher → **Switch to Transporter** (mobile-first screen). Login (OTP 123456) → lands on **Home / Available loads**. Point at the contract card *Ropar → Nashik · 30 trips*. Tap **Submit quote** → bottom sheet opens showing current L1, rate field, payment term dropdown (Immediate 2% / 7-day 1.5% / 15-day 1% / Standard) → tap **Submit ₹4,600/MT**. **Say:** "Every quote also carries the payment term they'll accept."
8. Bottom tab → **My bids** → *Won* tab shows the Ropar → Nashik contract they've already won (12/30 trips done). Tap it → jumps to **My contract**.

### Act 4 — Award & plan trips (1 min) · Logistics + Transporter
9. Persona switcher → **Logistics** → sidebar **Live bids** → find the Ropar → Nashik 30-day contract row → click **Award to L1** → **Award load** page shows quote comparison + savings (₹4.23 L vs H1) → **Confirm & Award** → toast.
10. Persona switcher → **Transporter** → **Contract** tab. Hero shows the awarded contract (₹4,650/MT, 30 trips, 12/30 done). Tap **Trip 14 · Ready to dispatch** → detail sheet: assign vehicle+driver, timeline (placed → in transit → delivered), 6 upload tiles for **Receiving, LR, E-way, Invoice, Challan, GPS**, and the discount-slab dropdown. Tap **Confirm & dispatch**.

### Act 5 — Delivery verification (1 min) · Logistics
11. Persona switcher → **Logistics** → sidebar **Verify delivery** → queue lists 4 delivered trips → open **Trip 12/30**. Left column shows the trip metadata; right column shows all 6 uploaded docs (Receiving marked *match*). Click **Mark delivery verified & hand off to Accounts** → toast.

### Act 6 — Documents & payment (1.5 min) · Accounts
12. Persona switcher → **Accounts** → **Verify docs**. Same trip appears in the queue. Point at the **Amount reconciliation** table: ₹1,39,500 − 2% cash discount − 1% TDS = **₹1,35,315 net**. Click **Approve & move to Ready-to-pay**.
13. Sidebar → **Release payment**. Fields pre-filled with UTR *HDFC24071601088*. Click **Confirm & release ₹1,35,315** → toast: *"WA + SMS + Email sent"*.

### Act 7 — Transporter sees payment (30 sec) · Transporter
14. Persona switcher → **Transporter** → **Payments** tab. Show the sections mapped to client's Section 4.6: **Bills Submitted / Under Verification / Approved / Payment Released** + Discount availed + TDS deducted.

### Act 8 — Management view (30 sec) · Management
15. Persona switcher → **Management**. Dashboard shows the exact 6 KPIs from client Section 4.7 (Total Freight Spend, Lowest vs Highest, Savings, Pending Bills, Pending Docs, Monthly Freight Analysis chart). Then sidebar → **Reports** shows all 7 board reports from Section 4.9 on one page as tabs (Excel/PDF export buttons visible).

### Wrap
"So the client sees: reverse auction, discount slabs, doc verification, per-trip status, payment status — with WhatsApp/SMS/Email at every step. Exactly the requirement doc."

---

## Screen inventory (27)

### Super Admin — `super-admin/screens/`
- `login.html` · `dashboard.html` · `users.html` · `transporters.html` · `settings.html` · `notifications.html`

### Logistics — `logistics/screens/`
- `dashboard.html` · `post-load.html` · `live-bids.html` · `award-load.html` · `contracts.html` · `trip-board.html` · `verify-delivery.html`

### Accounts — `accounts/screens/`
- `dashboard.html` · `verify-docs.html` · `bills.html` · `payment.html` · `reports.html`

_Login is shared_ — the single company-side login lives at `super-admin/screens/login.html` with a role dropdown. LG/AC/MG tiles on the persona selector skip login and land directly on their dashboards for a faster demo.

### Management — `management/screens/`
- `dashboard.html` · `trips.html` · `reports.html`

### Transporter (mobile-first) — `transporter/screens/`
- `login.html` · `register.html` · `approval-pending.html` · `bid-list.html` (Home) · `my-bids.html` · `my-contract.html` · `payments.html`

---

## Client requirement coverage

| Section | Requirement | Where |
|---|---|---|
| 4.1 | Transporter registration + KYC + admin approval | `transporter/register.html` · `super-admin/transporters.html` (Approval queue) |
| 4.2 | Reverse auction | `logistics/post-load.html` + `logistics/live-bids.html` + `logistics/award-load.html` + `transporter/bid-list.html` |
| 4.3 | Discount slabs (Immediate 2%, 7-day 1.5%, 15-day 1%) | `super-admin/settings.html` · `transporter/my-contract.html` (per-bill) · `accounts/verify-docs.html` (calc) |
| 4.4 | Document upload after delivery (Receiving/LR/E-way/Invoice/Challan/GPS) | `transporter/my-contract.html` trip modal |
| 4.5 | Two-step approval (Logistics + Accounts) | `logistics/verify-delivery.html` → `accounts/verify-docs.html` |
| 4.6 | Payment tracking (Submitted/Under verification/Approved/Released) | `transporter/payments.html` (grouped) · `accounts/bills.html` (tabs) |
| 4.7 | Management dashboard (6 KPIs) | `management/dashboard.html` |
| 4.8 | Notifications (WA/SMS/Email) | `super-admin/notifications.html` + toast on Post & Notify |
| 4.9 | Reports (7 board reports) | `management/reports.html` (tabs) |
| 4.10 | Admin controls | `super-admin/users.html` · `super-admin/transporters.html` · `super-admin/settings.html` |

---

## Design system

- **V1 Megastar green** — primary `#166534`. Tokens in `assets/tokens.css`.
- **Same shell** for all 5 personas via `assets/shell.css` + `assets/shell.js`. Persona set via `<body data-persona="sa|lg|ac|mg|tr">`.
- **Web-only** — every persona (including Transporter) is a responsive web portal: sidebar + topbar + fluid content. No phone frames, no bottom-tab bars, no mobile-only viewports.
- **No external URLs** (no CDN, no Google Fonts). System font stacks only.
- **No animations**, no chart libs — the one line chart on Management dashboard is inline SVG.
- **Responsive** — sidebar collapses off-canvas at ≤900px with hamburger; content grids stack ≤768px.

## Mock data
- MSF-TR-0015 Sharma Transport Co · +91 98765 43210 · OTP 123456
- Bid/load ref `MSF-BD-260716-####`, Contract `MSF-CN-260716-####`, Trip (external) `MSF-TR-260716-####`, Trip (own fleet) `MSF-OF-260716-####`, Bill `MSF-BL-260716-####`
- Route Ropar → Nashik @ ₹4,650/MT · Contract 30 days · 30 trips · 30 trucks
- UTR HDFC24071601088 · Freight this month ₹1.24 Cr
- Consignees Nestlé (Nashik DC) · Pizza Hut · McDonald's · Plant Ropar (Ropar-Chandigarh Highway)