Getting Started

Version: 1.0.0

Route: — (start here before signing in)

Who can access: Anyone with the Demo Mode project; after login, access depends on role (admin / editor / viewer).

Screenshot(s)

What this page does

This guide gets you from zero to a working Demo Mode session of Courier Dashboard, so you can explore every documented screen with sample data.

Layout

After you sign in, the app shell always includes:

1. Top status banner: Demo Mode — offline sample data, not production
2. Header: Open menu (hamburger) · business brand · Others (right tools)
3. Main content area for the current route
4. Left sidebar (opened via Open menu) with groups: Dashboard, COD Shipments, COD Payments, Due COD, COD Claimed, COD Charges, Shipment Tally, Settings

Steps

1. Start Demo Mode

cd Demo-Mode && npm install && npm run dev

Open the URL printed by the terminal (usually http://localhost:3000).

2. Sign in

1. You land on /login.
2. Under Demo Mode accounts, click a role card (Admin, Editor, or Viewer) to fill email and password, or type them manually:

3. Click Sign in (or the form submit button shown on the page).
4. You should arrive on the Dashboard home (/) with the Demo Mode banner visible.

3. Open navigation

1. Click Open menu in the header.
2. Expand a group (chevron) such as COD Shipments, then choose a courier (e.g. TCS).
3. Example path: Click Open menu → COD Shipments → TCS.

4. Open Others tools

1. Click the right header button (Open menu / tools icon).
2. The Others drawer lists tools such as Courier Fetch and TCS Labels (Shopify). Admins also see Due COD days and TCS charges days.

5. Know your role

Permissions are can_view / can_edit / can_delete per page_key.

6. Try mobile (optional)

Narrow the browser or use a phone viewport. The same shell applies; see Mobile Overview.

Key concepts

Errors

Related links

• Login
• Dashboard
• Mobile Overview
• index.md