Skip to Content
Apps & ServicesVendor Dashboard

Vendor Dashboard

Overview

The Vendor Dashboard (app.siyahfy.com) is the primary management interface for Siyahfy vendors and platform administrators. Vendors use it to manage their online stores — products, orders, customers, analytics, themes, settings, and more. Admins use a separate section to oversee all vendors, manage plans, handle affiliate programs, and review marketplace submissions.

Users: Vendors (store owners), Staff members, Super Admins

Tech Stack

TechnologyVersionPurpose
Next.js14.xReact framework with App Router
React18.xUI library
TypeScript4.9Type safety
Redux Toolkit1.9Global state management
Zustand5.xLightweight state (select features)
Tailwind CSS3.xUtility-first styling
Shopify Polaris13.xAdmin UI component library
Ant Design5.xAdditional UI components
TipTap2.xRich text editor (blogs, pages)
Framer Motion11.xAnimations
Chart.js / amChartsAnalytics visualizations
js-cookie3.xCookie management for auth
Axios1.xHTTP client

Folder Structure

app.siyahfy.com/ ├── app/ │ ├── (auth)/ # Authentication pages │ │ ├── admin-login/ # Admin login with sidebar slot │ │ ├── vendor-login/ # Vendor login │ │ ├── staff-login/ # Staff login │ │ ├── recoverpassword/ # Password recovery │ │ └── security/ # 2FA setup │ ├── (root)/ # Authenticated layouts │ │ ├── (admin)/admin/ # Super admin pages │ │ │ ├── vendors/ # Vendor management │ │ │ ├── plans/ # Plan management │ │ │ ├── affiliate/ # Affiliate system │ │ │ ├── store-templates/ # Template management │ │ │ └── ... │ │ └── (vendor)/vendor/ # Vendor dashboard pages │ │ ├── [store]/ # Dynamic store context │ │ │ ├── (pages)/ # All store management pages │ │ │ │ ├── products/ # Product management │ │ │ │ ├── order/ # Order management │ │ │ │ ├── analytics/ # Analytics dashboard │ │ │ │ ├── discounts/ # Discount codes │ │ │ │ ├── customers/ # Customer management │ │ │ │ ├── settings/ # Store settings │ │ │ │ ├── marketing/ # Campaigns & automations │ │ │ │ └── ... │ │ │ ├── billing/ # Plan billing │ │ │ ├── onboarding/ # New store setup │ │ │ └── managecustomer/# Customer detail views │ │ └── allstore/ # Multi-store selector │ └── api/ # Next.js API routes │ ├── Admin/ # Admin auth endpoints │ ├── Vendor/ # Vendor auth endpoints │ └── verify/ # Token verification ├── components/ # Shared components │ ├── layouts/ # Sidebar, header layouts │ ├── (Vendor)/ # Vendor-specific components │ ├── ui/ # Base UI components │ ├── tiptap-ui/ # Rich text editor UI │ └── theme/ # Theme-related components ├── store/ # Redux store & slices ├── hooks/ # Custom React hooks ├── utils/ # Helper utilities ├── contexts/ # React context providers ├── config/ # App configuration ├── styles/ # Global styles & SCSS ├── assets/ # Static assets ├── fonts/ # Custom fonts └── middleware.ts # Auth middleware

Key Routes / Pages

Authentication Routes

RouteDescription
/vendor-loginVendor sign-in page
/admin-loginSuper admin sign-in page
/staff-loginStaff member sign-in page
/recoverpasswordPassword recovery flow
/securityTwo-factor authentication setup

Admin Routes

RouteDescription
/adminAdmin dashboard home
/admin/vendors/allList and manage all vendors
/admin/vendors/view/[id]View specific vendor details
/admin/plansManage subscription plans
/admin/affiliate/*Affiliate program management
/admin/store-templatesManage store templates
/admin/developer-payoutsDeveloper payout management
/admin/marketplace-reviewsReview theme submissions

Vendor Routes

RouteDescription
/vendor/allstoreMulti-store selector
/vendor/[store]Store dashboard home
/vendor/[store]/productsProduct listing & management
/vendor/[store]/products/[id]Edit single product
/vendor/[store]/products/collectionsCollection management
/vendor/[store]/products/inventoryInventory tracking
/vendor/[store]/orderOrder listing
/vendor/[store]/order/[view]Order detail & fulfillment
/vendor/[store]/analytics/overviewAnalytics dashboard
/vendor/[store]/discountsDiscount code management
/vendor/[store]/settingsStore settings
/vendor/[store]/settings/paymentsPayment gateway configuration
/vendor/[store]/online-store/themesTheme management
/vendor/[store]/marketing/*Campaigns & automations
/vendor/[store]/manage-blogsBlog management
/vendor/[store]/menusNavigation menu builder
/vendor/[store]/manageshippingShipping zone management
/vendor/[store]/billingPlan & billing management
/vendor/[store]/user-rolesStaff roles & permissions

State Management

The dashboard uses Redux Toolkit as the primary state management solution with 34 slices organized in the store/ directory. A few features also use Zustand for lighter state needs.

Redux Store Structure

const rootReducer = combineReducers({ themeConfig: themeConfigSlice, // UI theme preferences admin: adminslice, // Admin session data vendor: vendorSlice, // Vendor session data modal: modalslice, // Global modal state currency, // Active currency currentDraftOrderStatus, // Draft order workflow fulfillorder, // Fulfillment workflow editOrder, // Order editing state refundedit, // Refund workflow returnSlice, // Return workflow analytics, // Analytics data ordersAnalytics, // Order analytics categoryAnalytics, // Category analytics discountstoreSlice, // Discount management storeVendor, // Current store context roleListSlice, // User roles reviewSlice, // Product reviews menuslice, // Navigation menus themeStore, // Theme settings themeModal, // Theme selection modal shippingZone, // Shipping zones managetaxesSlice, // Tax settings headerSlice, // Header search categorySlice, // Categories plan, // Subscription plan access, // Access permissions addonsModal, // Addon selection installedApps, // Installed apps appCredits, // App credit balance prefilledChat, // Chat templates storeMenus, // Store menu config firstProductModal, // Onboarding modal });

API Communication

The dashboard communicates with the backend using a cookie-based authentication pattern:

Authentication Flow

  1. Login — Vendor/Admin credentials are sent to Next.js API routes (/api/Vendor/login, /api/Admin/login)
  2. Token Storage — JWT token is stored in cookies (tokenVendorsSagartech, tokenSagartech)
  3. API Calls — The getCookie utility reads the token; requests are made with Authorization: Bearer <token> headers

API Call Pattern

import { getCookie } from '@/utils/cookie'; const ADMINURL = process.env.NEXT_PUBLIC_ADMIN_URL; // Backend base URL // Typical fetch call const response = await fetch(`${ADMINURL}/api/products/all`, { method: 'GET', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${getCookie('tokenVendorsSagartech')}` } });

Middleware

The Next.js middleware (middleware.ts) handles route protection:

  • Redirects unauthenticated users to login pages
  • Redirects authenticated users away from login pages
  • Injects x-full-url and x-pathname headers for server components
  • Separates admin vs vendor authentication flows

Key Components

ComponentPurpose
components/layouts/Sidebar navigation, header, page wrappers
components/vendorLayout.tsxVendor dashboard layout with sidebar
components/tiptap-ui/Rich text editor for blogs, pages, and product descriptions
components/theme/Theme customization components
components/plan/Plan upgrade prompts and billing UI
components/Modal/Reusable modal dialogs
components/ProductUploading/Multi-step product creation
components/ExportComponents.tsxData export (Excel, CSV)
components/ImportProduct.tsxProduct import from CSV/Shopify
components/ChooseProduct.tsxProduct picker for collections/discounts
components/CollectionCondition.tsxAutomated collection rules

Environment Variables

VariableDescription
NEXT_PUBLIC_ADMIN_URLBackend API base URL
NEXT_PUBLIC_FIREBASE_*Firebase configuration for push notifications
NEXT_PUBLIC_RAZORPAY_KEY_IDRazorpay payment key
NEXT_PUBLIC_APP_URLDashboard URL (self-reference)
SECRET_KEYJWT secret for token signing