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
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 14.x | React framework with App Router |
| React | 18.x | UI library |
| TypeScript | 4.9 | Type safety |
| Redux Toolkit | 1.9 | Global state management |
| Zustand | 5.x | Lightweight state (select features) |
| Tailwind CSS | 3.x | Utility-first styling |
| Shopify Polaris | 13.x | Admin UI component library |
| Ant Design | 5.x | Additional UI components |
| TipTap | 2.x | Rich text editor (blogs, pages) |
| Framer Motion | 11.x | Animations |
| Chart.js / amCharts | — | Analytics visualizations |
| js-cookie | 3.x | Cookie management for auth |
| Axios | 1.x | HTTP 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 middlewareKey Routes / Pages
Authentication Routes
| Route | Description |
|---|---|
/vendor-login | Vendor sign-in page |
/admin-login | Super admin sign-in page |
/staff-login | Staff member sign-in page |
/recoverpassword | Password recovery flow |
/security | Two-factor authentication setup |
Admin Routes
| Route | Description |
|---|---|
/admin | Admin dashboard home |
/admin/vendors/all | List and manage all vendors |
/admin/vendors/view/[id] | View specific vendor details |
/admin/plans | Manage subscription plans |
/admin/affiliate/* | Affiliate program management |
/admin/store-templates | Manage store templates |
/admin/developer-payouts | Developer payout management |
/admin/marketplace-reviews | Review theme submissions |
Vendor Routes
| Route | Description |
|---|---|
/vendor/allstore | Multi-store selector |
/vendor/[store] | Store dashboard home |
/vendor/[store]/products | Product listing & management |
/vendor/[store]/products/[id] | Edit single product |
/vendor/[store]/products/collections | Collection management |
/vendor/[store]/products/inventory | Inventory tracking |
/vendor/[store]/order | Order listing |
/vendor/[store]/order/[view] | Order detail & fulfillment |
/vendor/[store]/analytics/overview | Analytics dashboard |
/vendor/[store]/discounts | Discount code management |
/vendor/[store]/settings | Store settings |
/vendor/[store]/settings/payments | Payment gateway configuration |
/vendor/[store]/online-store/themes | Theme management |
/vendor/[store]/marketing/* | Campaigns & automations |
/vendor/[store]/manage-blogs | Blog management |
/vendor/[store]/menus | Navigation menu builder |
/vendor/[store]/manageshipping | Shipping zone management |
/vendor/[store]/billing | Plan & billing management |
/vendor/[store]/user-roles | Staff 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
- Login — Vendor/Admin credentials are sent to Next.js API routes (
/api/Vendor/login,/api/Admin/login) - Token Storage — JWT token is stored in cookies (
tokenVendorsSagartech,tokenSagartech) - API Calls — The
getCookieutility reads the token; requests are made withAuthorization: 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-urlandx-pathnameheaders for server components - Separates admin vs vendor authentication flows
Key Components
| Component | Purpose |
|---|---|
components/layouts/ | Sidebar navigation, header, page wrappers |
components/vendorLayout.tsx | Vendor 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.tsx | Data export (Excel, CSV) |
components/ImportProduct.tsx | Product import from CSV/Shopify |
components/ChooseProduct.tsx | Product picker for collections/discounts |
components/CollectionCondition.tsx | Automated collection rules |
Environment Variables
| Variable | Description |
|---|---|
NEXT_PUBLIC_ADMIN_URL | Backend API base URL |
NEXT_PUBLIC_FIREBASE_* | Firebase configuration for push notifications |
NEXT_PUBLIC_RAZORPAY_KEY_ID | Razorpay payment key |
NEXT_PUBLIC_APP_URL | Dashboard URL (self-reference) |
SECRET_KEY | JWT secret for token signing |