# Supplier Portal - View & Navigation Guide

This guide explains how to start the development server, navigate the screens, and view the onboarding flows and simulated dashboard preview.

## 1. Running the Portal Locally

To start the Vite development server, run the following command in the project root:

```bash
npm run dev
```

By default, the server runs at **[http://localhost:5173/](http://localhost:5173/)** (or the port specified in your console).

---

## 2. Page Routing & State Mapping

The portal uses a client-side state router mapping component views to logical routes:

| Route State | Component/View Description | Navigable Via |
| :--- | :--- | :--- |
| `home` | **Landing Page**: Brand value proposition, hero banner, primary action CTAs. | Logo click, "Platform" header link. |
| `about` | **About Us**: Organization mission details and team profiles. | "Success Stories" header link. |
| `contact` | **Contact Support**: "Get in Touch" inquiry form and help desk coordinates. | "Support" header link. |
| `login` | **Supplier Login**: Account login via password credentials or OTP mock. | "Login" header button. |
| `signup` | **Supplier Registration**: Fields for business email, password, and GSTIN. | "Get Started" header button. |
| `profile-completion` | **Profile Wizard (Step 2)**: Logo picker, bio, and interactive GSTIN validation. | Auto-redirect on Signup form submit. |
| `confirmation` | **Dashboard Preview (Step 3)**: Payout status notifications and mock graphs. | Auto-redirect on Profile Completion save. |
| `dashboard` | **Seller Dashboard & Tools**: Overview performance metrics, single/bulk product uploads, orders tracking log, returns approvals, wallet payouts, and settings configuration. | Click "Go to Dashboard" button in confirmation, or submit Login form. |

---

## 3. Navigating the Phase 1 Onboarding Flow

You can step through the interactive onboarding flow sequentially to experience the full walkthrough:

### Step A: The Landing Page
- Open the application. You will see the **Global Artisans Hub** landing page with the primary theme (Deep Navy Blue headers/footers, Amber Gold accents, and Warm Cream backgrounds).
- Click **Platform**, **Success Stories** (About Us), or **Support** (Contact Us) in the header navigation to view the respective information layouts.

### Step B: Account Registration
1. Click **Get Started** in the header.
2. The view will switch to the **Register** tab.
3. Fill in the required fields:
   - **Business Email**
   - **Mobile Number**
   - **Create Password**
   - **GSTIN / Tax ID**
4. Click **Register Business**.

### Step C: Profile Completion (Step 2 of 3)
1. You will be taken to the **Complete Your Supplier Profile** wizard.
2. Enter a **Store Display Name**.
3. (Optional) Choose an image file to upload. It will immediately show an avatar logo preview.
4. Enter an **About Your Craft / Business** description.
5. Fill in the **Business Address for Pickup** fields (Street Address, City, State, Pincode).
6. Enter a GSTIN, and click **Verify GSTIN**. The button will show a loading spinner, then update to **Verified ✓** status.
7. Click **Save & Continue**.

### Step D: Onboarding Confirmation (Step 3 of 3)
- You will arrive at the **Welcome to Global Artisans Hub!** confirmation view.
- Click **Go to Dashboard (Preview Only)** to go to the live seller portal dashboard page.
- Alternatively, you can directly access the dashboard page by going to **Login** -> enter credentials -> click **Secure Login**.

### Step E: Navigating the Seller Dashboard & Tools
Once inside the active dashboard (`/dashboard`), use the left sidebar menu to navigate the tools:
1. **Overview & Analytics**: View Sales, net margins, stock, and returns. Toggle the date filters (Year, Week, Day, Custom Date) to see the metrics update dynamically.
2. **Manage Products**: 
   - View your active inventory listing.
   - Fill out the **Upload Product** form on the right to add a product or click **Edit** on a row to modify it.
   - Click the bulk upload zone to simulate importing products via CSV files.
3. **Orders & Transit**: Track active orders, status (Ready to Ship, Shipped, Delivered), carriers, and tracking coordinates.
4. **Returns Management**: View buyer return requests. Click **Approve** or **Reject** to update their logistics status in the warehouse transit log.
5. **Wallet & Payouts**: Enter an amount to process a withdrawal from your outstanding ready balance.
6. **Store Settings**: Update your store name, logo file, bio, and pickup coordinates.

---

## 4. Run Automated Component Tests

To run the Vitest unit tests verifying these navigation flows and tools, execute:

```bash
npm run test
```