From ca77602a677e4841a4b0471d09ece42e559222e0 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 29 Oct 2026 19:16:07 +0530
Subject: [PATCH] feat: add Navbar component and seller type definitions

---
 src/components/common/Preloader.tsx       | 11 +++++++----
 src/components/layout/DashboardLayout.tsx | 24 ++++++++++++++++++-----
 src/components/layout/Navbar.tsx          | 22 +++++++++++++++++++++
 src/pages/dashboard/OverviewPage.tsx      | 20 +++++++++++++++++++
 src/pages/dashboard/SettingsPage.tsx      | 17 ++++++++++++++++
 src/types/seller.ts                       |  3 +++
 6 files changed, 88 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Preloader.tsx b/src/components/common/Preloader.tsx
index 7755a33..49eb358 100644
--- a/src/components/common/Preloader.tsx
+++ b/src/components/common/Preloader.tsx
@@ -89,13 +89,16 @@ export const Preloader: React.FC = () => {
 
               {/* Central Artisan Logo / Icon */}
               <div
-                className="absolute w-10 h-10 rounded-full flex items-center justify-center text-white shadow-sm"
+                className="absolute w-10 h-10 rounded-full flex items-center justify-center overflow-hidden bg-white shadow-sm border border-orange-100"
                 style={{
-                  backgroundColor: '#701A29',
-                  boxShadow: '0 2px 8px rgba(112, 26, 41, 0.35)'
+                  boxShadow: '0 2px 8px rgba(112, 26, 41, 0.25)'
                 }}
               >
-                <span style={{ fontWeight: 900, fontSize: '1.1rem', fontFamily: 'serif' }}>T</span>
+                <img 
+                  src="/images/landing/tradhox-logo.png" 
+                  alt="Tradhox" 
+                  style={{ width: '28px', height: '28px', objectFit: 'contain' }} 
+                />
               </div>
             </div>
 
diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx
index d3bcc9c..5544ec2 100644
--- a/src/components/layout/DashboardLayout.tsx
+++ b/src/components/layout/DashboardLayout.tsx
@@ -75,10 +75,17 @@ export const DashboardLayout: React.FC = () => {
         <div>
           {/* Logo */}
           <div className="mb-5 pl-2">
-            <Link to="/dashboard" style={{ textDecoration: 'none' }}>
-              <span style={{ fontSize: '1.45rem', fontWeight: 800, color: '#701A29', letterSpacing: '-0.03em' }}>
-                Tradhox
-              </span>
+            <Link to="/dashboard" className="is-flex is-align-items-center" style={{ textDecoration: 'none' }}>
+              <img 
+                src="/logo_nav.png" 
+                alt="Tradhox" 
+                style={{ 
+                  height: '38px', 
+                  maxWidth: '175px', 
+                  objectFit: 'contain',
+                  display: 'block' 
+                }} 
+              />
             </Link>
           </div>
 
@@ -219,7 +226,7 @@ export const DashboardLayout: React.FC = () => {
             zIndex: 25
           }}
         >
-          {/* Mobile Sidebar Toggle */}
+          {/* Mobile Sidebar Toggle & Real Logo */}
           <div className="is-flex is-align-items-center">
             <button
               className="button is-small is-ghost mr-2 is-hidden-desktop"
@@ -229,6 +236,13 @@ export const DashboardLayout: React.FC = () => {
             >
               {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
             </button>
+            <Link to="/dashboard" className="is-hidden-desktop is-flex is-align-items-center" style={{ textDecoration: 'none' }}>
+              <img 
+                src="/logo_nav.png" 
+                alt="Tradhox" 
+                style={{ height: '32px', maxWidth: '140px', objectFit: 'contain' }} 
+              />
+            </Link>
           </div>
 
           {/* Right Header Actions */}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 1631e5f..6dcc37a 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -34,6 +34,7 @@ export const Navbar: React.FC = () => {
 
   const sellerName = user?.name || user?.storeName || onboarding.tradeName || onboarding.fullName || 'Seller Partner';
   const sellerStore = onboarding.tradeName || user?.storeName || 'Maker Store';
+  const sellerMid = user?.profile?.merchant_id || user?.merchant_id || onboarding.merchantId || (user?.id ? `TRDPX${String(user.id).padStart(6, '0')}` : undefined);
   const avatarInitials = (sellerName.replace(/[^a-zA-Z]/g, '') || 'SP').slice(0, 2).toUpperCase();
 
   const navLinks = [
@@ -317,6 +318,27 @@ export const Navbar: React.FC = () => {
                           </div>
                         </div>
 
+                        {sellerMid && (
+                          <div 
+                            style={{ 
+                              marginTop: '8px',
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              gap: '6px',
+                              padding: '2px 8px',
+                              borderRadius: '6px',
+                              backgroundColor: '#EFF6FF',
+                              border: '1px solid #DBEAFE',
+                              fontSize: '0.68rem',
+                              fontWeight: 700,
+                              color: '#1D4ED8',
+                              letterSpacing: '0.04em'
+                            }}
+                          >
+                            <span>MID: {sellerMid}</span>
+                          </div>
+                        )}
+
                         <div 
                           style={{ 
                             marginTop: '8px', 
diff --git a/src/pages/dashboard/OverviewPage.tsx b/src/pages/dashboard/OverviewPage.tsx
index 3ff2e15..131662c 100644
--- a/src/pages/dashboard/OverviewPage.tsx
+++ b/src/pages/dashboard/OverviewPage.tsx
@@ -28,6 +28,7 @@ import { useSeller } from '../../context/SellerContext';
 
 export const OverviewPage: React.FC = () => {
   const { orders, inventory, walletBalance, onboarding, user } = useSeller();
+  const sellerMid = user?.profile?.merchant_id || user?.merchant_id || onboarding.merchantId || (user?.id ? `TRDPX${String(user.id).padStart(6, '0')}` : undefined);
   const [bannerVisible, setBannerVisible] = useState(true);
   const [restockQty, setRestockQty] = useState('25');
   const [activeOrderTab, setActiveOrderTab] = useState<'all' | 'new' | 'ready' | 'scheduled' | 'transit'>('all');
@@ -185,6 +186,25 @@ export const OverviewPage: React.FC = () => {
             <span>{onboarding.tradeName || onboarding.city || user?.storeName || user?.name || 'Artisan Seller Hub'}</span>
           </span>
 
+          {sellerMid && (
+            <span
+              className="is-inline-flex is-align-items-center"
+              style={{
+                backgroundColor: '#EFF6FF',
+                color: '#1D4ED8',
+                border: '1px solid #DBEAFE',
+                fontSize: '0.72rem',
+                fontWeight: 700,
+                borderRadius: '9999px',
+                padding: '3px 10px',
+                letterSpacing: '0.04em'
+              }}
+              title="Unique Seller Merchant ID (MID) for internal tracking"
+            >
+              <span>MID: {sellerMid}</span>
+            </span>
+          )}
+
           <span
             style={{
               backgroundColor: '#FFF3E0',
diff --git a/src/pages/dashboard/SettingsPage.tsx b/src/pages/dashboard/SettingsPage.tsx
index a38f804..8c8aa5b 100644
--- a/src/pages/dashboard/SettingsPage.tsx
+++ b/src/pages/dashboard/SettingsPage.tsx
@@ -5,6 +5,7 @@ import { api } from '../../services/api';
 
 export function SettingsPage() {
   const { user, onboarding, updateProfile, logout } = useSeller();
+  const sellerMid = user?.profile?.merchant_id || user?.merchant_id || onboarding.merchantId || (user?.id ? `TRDPX${String(user.id).padStart(6, '0')}` : undefined);
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState('business');
   const [showToast, setShowToast] = useState(false);
@@ -211,6 +212,22 @@ export function SettingsPage() {
               </div>
               
               <div className="flex flex-col gap-4">
+                {/* Merchant ID (MID) - Internal Platform Tracking */}
+                {sellerMid && (
+                  <div className="flex items-center justify-between p-3.5 rounded-xl bg-blue-50/60 dark:bg-blue-900/10 border border-blue-200/60">
+                    <div className="flex items-center gap-3">
+                      <span className="material-symbols-outlined text-blue-600">badge</span>
+                      <div>
+                        <span className="font-label-md text-sm font-bold text-gray-900">Merchant Identification Number (MID)</span>
+                        <p className="text-xs text-gray-600">Unique seller ID for internal Tradhox platform tracking</p>
+                      </div>
+                    </div>
+                    <span className="px-3 py-1 font-mono font-bold text-sm bg-white border border-blue-300 text-blue-700 rounded-lg shadow-xs">
+                      {sellerMid}
+                    </span>
+                  </div>
+                )}
+
                 {/* Storefront Branding: Cover Photo & Logo */}
                 <div className="flex flex-col gap-2 p-4 rounded-xl bg-surface-container-low border border-outline-variant/30">
                   <div className="flex items-center justify-between">
diff --git a/src/types/seller.ts b/src/types/seller.ts
index 04bee3f..6bd7606 100644
--- a/src/types/seller.ts
+++ b/src/types/seller.ts
@@ -6,7 +6,9 @@ export interface UserProfile {
   role: string;
   avatar: string;
   storeName: string;
+  merchant_id?: string;
   profile?: {
+    merchant_id?: string;
     phone?: string;
     logo_url?: string;
     store_name?: string;
@@ -75,6 +77,7 @@ export interface OnboardingData {
   // Step 7: Store Profile & Lineage
   storeName: string;
   storeSlug?: string;
+  merchantId?: string;
   craftLineageYears: number;
   artisanBio: string;
   workshopLocation: string;