vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
supplier_central_frontend/guide.md

4.6 KiB
Raw Blame History

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:

npm run dev

By default, the server runs at 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:

npm run test