86 lines
4.6 KiB
Markdown
86 lines
4.6 KiB
Markdown
# 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. |
|
|
|
|
--- te
|
|
|
|
## 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
|
|
```
|