@burdenoff/microfe-atheletebridge 2026.624.1 → 2026.625.1

package/dist/atheletebridge/pages/HomePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.js","names":[],"sources":["../../../src/atheletebridge/pages/HomePage.tsx"],"sourcesContent":["/**\n * Home Page\n * @module atheletebridge/pages\n *\n * Role-based landing page with hero section, quick stats, quick actions,\n * featured carts, recent orders, how-it-works, category browsing,\n * platform stats, and welcome banner for new users.\n */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Search,\n  ShoppingBag,\n  Store,\n  ClipboardList,\n  TrendingUp,\n  LayoutDashboard,\n  Users,\n  IndianRupee,\n  Activity,\n  ArrowRight,\n  Star,\n  MapPin,\n  Clock,\n  ChefHat,\n  Scissors,\n  Wrench,\n  Home,\n  Shirt,\n  Heart,\n  GraduationCap,\n  Package,\n  ShoppingCart,\n  BarChart3,\n  Wallet,\n  CheckCircle2,\n  Zap,\n  Shield,\n  Sparkles,\n  HandCoins,\n  UserCheck,\n  Truck,\n  BadgeCheck,\n  FileText,\n  Settings,\n  Loader2,\n  AlertCircle,\n} from 'lucide-react';\nimport { PageLayout } from '../components/PageLayout';\nimport { MetricsCard } from '../components/MetricsCard';\nimport { CartCard } from '../components/CartCard';\nimport { StatusBadge } from '../components/StatusBadge';\nimport { EmptyState } from '../components/EmptyState';\nimport { useAthleteBridge } from '../context/AthleteBridgeContext';\nimport { useAthleteBridgeApi } from '../hooks/useAthleteBridgeApi';\nimport { cn } from '../utils/cn';\nimport {\n  formatCurrency,\n  formatDate,\n  formatRelativeTime,\n  formatDistance,\n} from '../utils/formatters';\nimport type { UserRole, MockCart, MockOrder, DashboardStats } from '../types';\n\n// ---------------------------------------------------------------------------\n// Role-based Quick Action configs\n// ---------------------------------------------------------------------------\n\ninterface QuickAction {\n  label: string;\n  description: string;\n  icon: React.ReactNode;\n  path: string;\n  color: string;\n}\n\nconst quickActionsByRole: Record<UserRole, QuickAction[]> = {\n  customer: [\n    {\n      label: 'Discover Services',\n      description: 'Browse carts near you',\n      icon: <Search className=\"h-5 w-5\" />,\n      path: '/customer/carts',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'My Orders',\n      description: 'Track your orders',\n      icon: <ShoppingBag className=\"h-5 w-5\" />,\n      path: '/customer/orders',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Favorites',\n      description: 'Your saved carts',\n      icon: <Heart className=\"h-5 w-5\" />,\n      path: '/customer/favorites',\n      color: 'bg-pink-500/10 text-pink-600 dark:text-pink-400',\n    },\n    {\n      label: 'Settings',\n      description: 'Manage preferences',\n      icon: <Settings className=\"h-5 w-5\" />,\n      path: '/settings',\n      color: 'bg-bg-sunken text-text-secondary',\n    },\n  ],\n  cart_owner: [\n    {\n      label: 'My Cart',\n      description: 'Manage your cart',\n      icon: <Store className=\"h-5 w-5\" />,\n      path: '/owner/dashboard',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n    {\n      label: 'Orders',\n      description: 'Incoming orders',\n      icon: <ShoppingBag className=\"h-5 w-5\" />,\n      path: '/owner/orders',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Analytics',\n      description: 'Revenue & insights',\n      icon: <BarChart3 className=\"h-5 w-5\" />,\n      path: '/owner/analytics',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n    {\n      label: 'Staff',\n      description: 'Manage workers',\n      icon: <Users className=\"h-5 w-5\" />,\n      path: '/owner/staff',\n      color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n    },\n  ],\n  worker: [\n    {\n      label: 'My Tasks',\n      description: 'View assigned tasks',\n      icon: <ClipboardList className=\"h-5 w-5\" />,\n      path: '/worker/dashboard',\n      color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n    },\n    {\n      label: 'Schedule',\n      description: 'View shifts',\n      icon: <Clock className=\"h-5 w-5\" />,\n      path: '/worker/schedule',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Earnings',\n      description: 'Track pay',\n      icon: <Wallet className=\"h-5 w-5\" />,\n      path: '/worker/earnings',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Performance',\n      description: 'Ratings & stats',\n      icon: <Star className=\"h-5 w-5\" />,\n      path: '/worker/performance',\n      color: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n    },\n  ],\n  investor: [\n    {\n      label: 'Portfolio',\n      description: 'Your investments',\n      icon: <TrendingUp className=\"h-5 w-5\" />,\n      path: '/investor/dashboard',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n    {\n      label: 'Opportunities',\n      description: 'New investments',\n      icon: <HandCoins className=\"h-5 w-5\" />,\n      path: '/investor/opportunities',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Returns',\n      description: 'Earnings history',\n      icon: <IndianRupee className=\"h-5 w-5\" />,\n      path: '/investor/returns',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Reports',\n      description: 'Performance reports',\n      icon: <FileText className=\"h-5 w-5\" />,\n      path: '/investor/reports',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n  ],\n  admin: [\n    {\n      label: 'Dashboard',\n      description: 'Platform overview',\n      icon: <LayoutDashboard className=\"h-5 w-5\" />,\n      path: '/admin/dashboard',\n      color: 'bg-red-500/10 text-red-600 dark:text-red-400',\n    },\n    {\n      label: 'Users',\n      description: 'Manage accounts',\n      icon: <Users className=\"h-5 w-5\" />,\n      path: '/admin/users',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Carts',\n      description: 'Approve & manage',\n      icon: <Store className=\"h-5 w-5\" />,\n      path: '/admin/carts',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n    {\n      label: 'Analytics',\n      description: 'Revenue reports',\n      icon: <BarChart3 className=\"h-5 w-5\" />,\n      path: '/admin/analytics',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n  ],\n};\n\n// ---------------------------------------------------------------------------\n// Role-based Quick Stats configs\n// ---------------------------------------------------------------------------\n\nfunction getStatsForRole(\n  role: UserRole,\n  orders: MockOrder[],\n  dashboardStats: DashboardStats | undefined\n) {\n  switch (role) {\n    case 'customer':\n      return [\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: orders.length.toString(),\n          label: 'Total Orders',\n          trend: 'up' as const,\n          trendValue: '+2 this week',\n        },\n        {\n          icon: <Store className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeProviders ?? 0).toString(),\n          label: 'Nearby Providers',\n          trend: 'up' as const,\n          trendValue: '+3',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: (dashboardStats?.avgRating ?? 0).toFixed(1),\n          label: 'Avg. Rating',\n          trend: 'up' as const,\n          trendValue: '+0.1',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(\n            orders.reduce((s, o) => s + o.total, 0),\n            { minimumFractionDigits: 0 }\n          ),\n          label: 'Total Spent',\n          trend: 'neutral' as const,\n          trendValue: '',\n        },\n      ];\n    case 'cart_owner':\n      return [\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: '48',\n          label: 'Orders Today',\n          trend: 'up' as const,\n          trendValue: '+12%',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(12850, { minimumFractionDigits: 0 }),\n          label: \"Today's Revenue\",\n          trend: 'up' as const,\n          trendValue: '+8%',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: '4.6',\n          label: 'Cart Rating',\n          trend: 'up' as const,\n          trendValue: '+0.2',\n        },\n        {\n          icon: <Users className=\"h-5 w-5\" />,\n          value: '5',\n          label: 'Active Staff',\n          trend: 'neutral' as const,\n          trendValue: '',\n        },\n      ];\n    case 'worker':\n      return [\n        {\n          icon: <ClipboardList className=\"h-5 w-5\" />,\n          value: '5',\n          label: 'Tasks Today',\n          trend: 'up' as const,\n          trendValue: '+2',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(425, { minimumFractionDigits: 0 }),\n          label: \"Today's Earnings\",\n          trend: 'up' as const,\n          trendValue: '+15%',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: '4.7',\n          label: 'Rating',\n          trend: 'up' as const,\n          trendValue: '+0.1',\n        },\n        {\n          icon: <CheckCircle2 className=\"h-5 w-5\" />,\n          value: '96.8%',\n          label: 'Completion Rate',\n          trend: 'up' as const,\n          trendValue: '+0.5%',\n        },\n      ];\n    case 'investor':\n      return [\n        {\n          icon: <TrendingUp className=\"h-5 w-5\" />,\n          value: '3',\n          label: 'Active Investments',\n          trend: 'up' as const,\n          trendValue: '+1',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(450000, { minimumFractionDigits: 0 }),\n          label: 'Total Invested',\n          trend: 'up' as const,\n          trendValue: '',\n        },\n        {\n          icon: <HandCoins className=\"h-5 w-5\" />,\n          value: '16.5%',\n          label: 'Avg. Returns',\n          trend: 'up' as const,\n          trendValue: '+2.1%',\n        },\n        {\n          icon: <BarChart3 className=\"h-5 w-5\" />,\n          value: formatCurrency(74250, { minimumFractionDigits: 0 }),\n          label: 'Total Returns',\n          trend: 'up' as const,\n          trendValue: '+8.5%',\n        },\n      ];\n    case 'admin':\n    default:\n      return [\n        {\n          icon: <Users className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeCustomers ?? 0).toLocaleString('en-IN'),\n          label: 'Active Customers',\n          trend: 'up' as const,\n          trendValue: '+50',\n        },\n        {\n          icon: <Store className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeProviders ?? 0).toString(),\n          label: 'Service Providers',\n          trend: 'up' as const,\n          trendValue: '+3',\n        },\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: (dashboardStats?.totalOrders ?? 0).toLocaleString('en-IN'),\n          label: 'Total Orders',\n          trend: 'up' as const,\n          trendValue: '+12%',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(dashboardStats?.totalRevenue ?? 0, { minimumFractionDigits: 0 }),\n          label: 'Total Revenue',\n          trend: 'up' as const,\n          trendValue: '+8.5%',\n        },\n      ];\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Category data\n// ---------------------------------------------------------------------------\n\nconst categories = [\n  {\n    label: 'Food & Beverage',\n    icon: <ChefHat className=\"h-6 w-6\" />,\n    color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n  },\n  {\n    label: 'Personal Care & Beauty',\n    icon: <Scissors className=\"h-6 w-6\" />,\n    color: 'bg-pink-500/10 text-pink-600 dark:text-pink-400',\n  },\n  {\n    label: 'Repair & Maintenance',\n    icon: <Wrench className=\"h-6 w-6\" />,\n    color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n  },\n  {\n    label: 'Home Services',\n    icon: <Home className=\"h-6 w-6\" />,\n    color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n  },\n  {\n    label: 'Clothing & Fashion',\n    icon: <Shirt className=\"h-6 w-6\" />,\n    color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n  },\n  {\n    label: 'Health & Wellness',\n    icon: <Heart className=\"h-6 w-6\" />,\n    color: 'bg-red-500/10 text-red-600 dark:text-red-400',\n  },\n  {\n    label: 'Education & Skills',\n    icon: <GraduationCap className=\"h-6 w-6\" />,\n    color: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  },\n  {\n    label: 'Retail & Merchandise',\n    icon: <Package className=\"h-6 w-6\" />,\n    color: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400',\n  },\n  {\n    label: 'Grocery & Essentials',\n    icon: <ShoppingCart className=\"h-6 w-6\" />,\n    color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  },\n];\n\n// ---------------------------------------------------------------------------\n// How It Works steps\n// ---------------------------------------------------------------------------\n\nconst howItWorks = [\n  {\n    step: 1,\n    title: 'Browse Services',\n    description: 'Discover local service providers and carts near you.',\n    icon: <Search className=\"h-6 w-6\" />,\n  },\n  {\n    step: 2,\n    title: 'Place an Order',\n    description: 'Select items or services and place your order seamlessly.',\n    icon: <ShoppingBag className=\"h-6 w-6\" />,\n  },\n  {\n    step: 3,\n    title: 'Track in Real-time',\n    description: 'Get live updates on your order from confirmation to delivery.',\n    icon: <Truck className=\"h-6 w-6\" />,\n  },\n  {\n    step: 4,\n    title: 'Rate & Review',\n    description: 'Share your experience and help others find great services.',\n    icon: <Star className=\"h-6 w-6\" />,\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Recent activity mock\n// ---------------------------------------------------------------------------\n\nconst mockRecentActivity = [\n  {\n    id: 'ha-1',\n    description: 'New order placed at Dosa Express',\n    time: '2 mins ago',\n    type: 'order',\n  },\n  {\n    id: 'ha-2',\n    description: 'Quick Cuts Salon received a new review',\n    time: '15 mins ago',\n    type: 'review',\n  },\n  {\n    id: 'ha-3',\n    description: 'Investment opportunity funded: Spotless Cleaning',\n    time: '1 hour ago',\n    type: 'investment',\n  },\n  {\n    id: 'ha-4',\n    description: 'New cart registered: Gadget Zone Brigade',\n    time: '3 hours ago',\n    type: 'cart',\n  },\n  {\n    id: 'ha-5',\n    description: 'Order delivered: Fix-It Mobile Repair',\n    time: '5 hours ago',\n    type: 'order',\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Platform Stats\n// ---------------------------------------------------------------------------\n\nconst platformStats = [\n  { label: 'Service Providers', value: '21+', icon: <Store className=\"h-5 w-5\" /> },\n  { label: 'Categories', value: '9', icon: <Package className=\"h-5 w-5\" /> },\n  { label: 'Happy Customers', value: '534+', icon: <Users className=\"h-5 w-5\" /> },\n  { label: 'Orders Completed', value: '1,247+', icon: <CheckCircle2 className=\"h-5 w-5\" /> },\n];\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function HomePage() {\n  const { navigateTo, currentUser } = useAthleteBridge();\n  const { t: translate } = useI18n();\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const { providers, orders, dashboardStats } = useAthleteBridgeApi();\n\n  const t = useCallback(\n    (key: string, fallback: string): string => {\n      const value = translate(key);\n      return value === key ? fallback : value;\n    },\n    [translate]\n  );\n\n  const firstName = currentUser?.firstName ?? currentUser?.name ?? 'there';\n  const userRole: UserRole = (currentUser?.role as UserRole) ?? 'customer';\n\n  const roleLabel: Record<UserRole, string> = {\n    customer: t('atheletebridge.home.role.customer', 'Customer'),\n    cart_owner: t('atheletebridge.home.role.cartOwner', 'Cart Owner'),\n    worker: t('atheletebridge.home.role.worker', 'Worker'),\n    investor: t('atheletebridge.home.role.investor', 'Investor'),\n    admin: t('atheletebridge.home.role.admin', 'Administrator'),\n  };\n\n  const roleGreetings: Record<UserRole, string> = {\n    customer: t('atheletebridge.home.greeting.customer', 'Discover amazing services near you'),\n    cart_owner: t('atheletebridge.home.greeting.cartOwner', 'Manage your business and grow'),\n    worker: t('atheletebridge.home.greeting.worker', 'Check your tasks and earnings'),\n    investor: t('atheletebridge.home.greeting.investor', 'Track your investments and returns'),\n    admin: t('atheletebridge.home.greeting.admin', 'Monitor and manage the platform'),\n  };\n\n  const quickActions = quickActionsByRole[userRole] ?? quickActionsByRole.customer;\n  const stats = getStatsForRole(userRole, orders.data ?? [], dashboardStats.data);\n\n  // Featured carts (top-rated, open)\n  const featuredCarts = useMemo(() => {\n    let carts = (providers.data ?? []).filter((c) => c.isOpen);\n    if (searchQuery) {\n      const q = searchQuery.toLowerCase();\n      carts = carts.filter(\n        (c) => c.name.toLowerCase().includes(q) || c.category.toLowerCase().includes(q)\n      );\n    }\n    return carts.sort((a, b) => b.rating - a.rating).slice(0, 6);\n  }, [providers.data, searchQuery]);\n\n  // Recent orders\n  const recentOrders = useMemo(() => {\n    return [...(orders.data ?? [])]\n      .sort((a, b) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime())\n      .slice(0, 3);\n  }, [orders.data]);\n\n  const activityIcons: Record<string, string> = {\n    order: 'text-blue-600 dark:text-blue-400',\n    review: 'text-yellow-600 dark:text-yellow-400',\n    investment: 'text-green-600 dark:text-green-400',\n    cart: 'text-purple-600 dark:text-purple-400',\n  };\n\n  // Check if \"new user\" (no orders)\n  const isNewUser = (orders.data ?? []).length === 0 && !orders.isLoading;\n\n  const isLoading = providers.isLoading || orders.isLoading || dashboardStats.isLoading;\n  const isError = providers.isError || orders.isError || dashboardStats.isError;\n\n  if (isLoading) {\n    return (\n      <PageLayout title={t('atheletebridge.common.loading', 'Loading...')}>\n        <div className=\"flex h-[60vh] items-center justify-center\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title={t('atheletebridge.common.error', 'Error')}>\n        <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n          <AlertCircle className=\"h-12 w-12 text-status-error-text\" />\n          <h2 className=\"text-xl font-semibold\">\n            {t('atheletebridge.common.errorLoading', 'Error loading data')}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {t('atheletebridge.common.tryAgain', 'Please try again later.')}\n          </p>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title={`${t('atheletebridge.home.hello', 'Hello')}, ${firstName}!`}\n      description={roleGreetings[userRole]}\n    >\n      {/* Welcome Banner for New Users */}\n      {isNewUser && (\n        <section className=\"mb-6 rounded-xl border border-border-subtle bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 p-6\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10\">\n              <Sparkles className=\"h-6 w-6 text-primary\" />\n            </div>\n            <div className=\"flex-1\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {t('atheletebridge.home.welcomeTitle', 'Welcome to AthleteBridge!')}\n              </h2>\n              <p className=\"mt-1 text-sm text-text-secondary\">\n                {t(\n                  'atheletebridge.home.welcomeDescription',\n                  'Your local services marketplace. Start by exploring service providers near you or browse categories to find what you need.'\n                )}\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo('/customer/carts')}\n                className=\"mt-3 inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n              >\n                <Search className=\"h-4 w-4\" />\n                {t('atheletebridge.home.exploreServices', 'Explore Services')}\n              </button>\n            </div>\n          </div>\n        </section>\n      )}\n\n      {/* Hero Section with Role Info */}\n      <section className=\"mb-6 rounded-xl border border-border-subtle bg-bg-surface p-6\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div className=\"flex items-center gap-2 mb-1\">\n              <span className=\"inline-flex items-center rounded-full bg-action-primary-bg/10 px-2.5 py-0.5 text-xs font-medium text-primary\">\n                <BadgeCheck className=\"mr-1 h-3 w-3\" />\n                {roleLabel[userRole]}\n              </span>\n            </div>\n            <h2 className=\"text-xl font-bold text-text-primary\">\n              {t('atheletebridge.home.good', 'Good')}{' '}\n              {new Date().getHours() < 12\n                ? t('atheletebridge.home.time.morning', 'morning')\n                : new Date().getHours() < 17\n                  ? t('atheletebridge.home.time.afternoon', 'afternoon')\n                  : t('atheletebridge.home.time.evening', 'evening')}\n              , {firstName}\n            </h2>\n            <p className=\"mt-1 text-sm text-text-secondary\">{roleGreetings[userRole]}</p>\n          </div>\n          <div className=\"relative w-full sm:w-72\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <input\n              type=\"text\"\n              placeholder={t('atheletebridge.home.searchPlaceholder', 'Search services, carts...')}\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n            />\n          </div>\n        </div>\n      </section>\n\n      {/* Quick Stats */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.quickStats', 'Quick Stats')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {stats.map((stat) => (\n            <MetricsCard\n              key={stat.label}\n              icon={stat.icon}\n              value={stat.value}\n              label={stat.label}\n              trend={stat.trend}\n              trendValue={stat.trendValue}\n            />\n          ))}\n        </div>\n      </section>\n\n      {/* Quick Actions */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.quickActions', 'Quick Actions')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {quickActions.map((action) => (\n            <button\n              key={action.label}\n              type=\"button\"\n              onClick={() => navigateTo(action.path)}\n              className={cn(\n                'flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 text-left shadow-sm transition-all',\n                'hover:border-accent-foreground/20 hover:shadow-md'\n              )}\n            >\n              <div\n                className={cn(\n                  'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',\n                  action.color\n                )}\n              >\n                {action.icon}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"text-sm font-semibold text-text-primary\">{action.label}</p>\n                <p className=\"mt-0.5 text-xs text-text-secondary\">{action.description}</p>\n              </div>\n              <ArrowRight className=\"h-4 w-4 text-text-secondary shrink-0 mt-1\" />\n            </button>\n          ))}\n        </div>\n      </section>\n\n      {/* Featured / Nearby Carts */}\n      <section className=\"mb-8\">\n        <div className=\"flex items-center justify-between mb-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {searchQuery\n              ? t('atheletebridge.home.searchResults', 'Search Results')\n              : t('atheletebridge.home.featuredCarts', 'Featured Carts')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/customer/carts')}\n            className=\"flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n          >\n            {t('atheletebridge.common.viewAll', 'View All')} <ArrowRight className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n\n        {featuredCarts.length === 0 ? (\n          <EmptyState\n            icon={<Search className=\"h-10 w-10\" />}\n            title={t('atheletebridge.home.noCartsFound', 'No carts found')}\n            description={t(\n              'atheletebridge.home.noCartsDescription',\n              'Try adjusting your search or browse all categories'\n            )}\n            action={\n              <button\n                type=\"button\"\n                onClick={() => setSearchQuery('')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                {t('atheletebridge.home.clearSearch', 'Clear Search')}\n              </button>\n            }\n          />\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {featuredCarts.map((cart) => (\n              <div\n                key={cart.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => navigateTo(`/customer/cart/${cart.id}`)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    navigateTo(`/customer/cart/${cart.id}`);\n                  }\n                }}\n                className=\"rounded-lg border border-border-subtle bg-bg-surface shadow-sm overflow-hidden transition-all hover:shadow-md hover:border-accent-foreground/20 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                {/* Image */}\n                <div className=\"relative h-40 bg-bg-sunken\">\n                  <img\n                    src={cart.image}\n                    alt={cart.name}\n                    className=\"h-full w-full object-cover\"\n                    loading=\"lazy\"\n                  />\n                  <div className=\"absolute top-2 right-2\">\n                    <StatusBadge status={cart.isOpen ? 'open' : 'closed'} />\n                  </div>\n                  {cart.isVerified && (\n                    <div className=\"absolute top-2 left-2\">\n                      <span className=\"inline-flex items-center gap-1 rounded-full bg-blue-500/90 px-2 py-0.5 text-xs font-medium text-white backdrop-blur-sm\">\n                        <BadgeCheck className=\"h-3 w-3\" />{' '}\n                        {t('atheletebridge.home.verified', 'Verified')}\n                      </span>\n                    </div>\n                  )}\n                  <div className=\"absolute bottom-2 right-2\">\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm\">\n                      <Clock className=\"h-3 w-3\" /> {cart.estimatedTime} min\n                    </span>\n                  </div>\n                </div>\n\n                {/* Details */}\n                <div className=\"p-4\">\n                  <div className=\"flex items-start justify-between\">\n                    <div className=\"min-w-0 flex-1\">\n                      <h3 className=\"text-base font-semibold text-text-primary truncate\">\n                        {cart.name}\n                      </h3>\n                      <p className=\"mt-0.5 text-sm text-text-secondary\">{cart.category}</p>\n                    </div>\n                    <div className=\"flex items-center gap-1 rounded bg-green-600 px-1.5 py-0.5 ml-2 shrink-0\">\n                      <Star className=\"h-3 w-3 fill-white text-white\" />\n                      <span className=\"text-xs font-bold text-white\">{cart.rating}</span>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-3 flex items-center gap-4 text-xs text-text-secondary\">\n                    <span className=\"flex items-center gap-1\">\n                      <MapPin className=\"h-3 w-3\" /> {formatDistance(cart.distance)}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3\" /> {cart.totalRatings}{' '}\n                      {t('atheletebridge.home.reviews', 'reviews')}\n                    </span>\n                    {cart.averageOrderValue && (\n                      <span className=\"flex items-center gap-1\">\n                        <IndianRupee className=\"h-3 w-3\" /> {t('atheletebridge.home.average', 'Avg.')}{' '}\n                        {formatCurrency(cart.averageOrderValue, { minimumFractionDigits: 0 })}\n                      </span>\n                    )}\n                  </div>\n\n                  {/* Tags / service types */}\n                  {cart.serviceTypes && cart.serviceTypes.length > 0 && (\n                    <div className=\"mt-3 flex flex-wrap gap-1.5\">\n                      {cart.serviceTypes.slice(0, 3).map((st) => (\n                        <span\n                          key={st}\n                          className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n                        >\n                          {st.replace(/_/g, ' ')}\n                        </span>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </section>\n\n      {/* Recent Orders */}\n      {recentOrders.length > 0 && (\n        <section className=\"mb-8\">\n          <div className=\"flex items-center justify-between mb-4\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {t('atheletebridge.home.recentOrders', 'Recent Orders')}\n            </h2>\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/orders')}\n              className=\"flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n            >\n              {t('atheletebridge.common.viewAll', 'View All')} <ArrowRight className=\"h-3.5 w-3.5\" />\n            </button>\n          </div>\n          <div className=\"rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border\">\n            {recentOrders.map((order) => (\n              <div\n                key={order.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => navigateTo(`/customer/order/${order.id}`)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    navigateTo(`/customer/order/${order.id}`);\n                  }\n                }}\n                className=\"flex items-center gap-4 px-4 py-3 hover:bg-accent/50 transition-colors cursor-pointer\"\n              >\n                <img\n                  src={order.cartImage}\n                  alt={order.cartName}\n                  className=\"h-12 w-12 rounded-lg object-cover shrink-0\"\n                />\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    <p className=\"text-sm font-medium text-text-primary truncate\">{order.cartName}</p>\n                    <StatusBadge status={order.status} />\n                  </div>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">\n                    {order.items.map((i) => i.name).join(', ')}\n                  </p>\n                </div>\n                <div className=\"text-right shrink-0\">\n                  <p className=\"text-sm font-semibold text-text-primary\">\n                    {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n                  </p>\n                  <p className=\"text-xs text-text-secondary\">\n                    {formatRelativeTime(order.orderDate)}\n                  </p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {/* How It Works */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.howItWorks', 'How It Works')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {howItWorks.map((item) => (\n            <div\n              key={item.step}\n              className=\"relative rounded-lg border border-border-subtle bg-bg-surface p-5 text-center\"\n            >\n              <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                <span className=\"inline-flex h-6 w-6 items-center justify-center rounded-full bg-action-primary-bg text-xs font-bold text-action-primary-text\">\n                  {item.step}\n                </span>\n              </div>\n              <div className=\"mt-2 flex justify-center text-text-secondary mb-3\">{item.icon}</div>\n              <h3 className=\"text-sm font-semibold text-text-primary\">{item.title}</h3>\n              <p className=\"mt-1 text-xs text-text-secondary\">{item.description}</p>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Browse by Category */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.browseByCategory', 'Browse by Category')}\n        </h2>\n        <div className=\"grid grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-5\">\n          {categories.map((cat) => (\n            <button\n              key={cat.label}\n              type=\"button\"\n              onClick={() =>\n                navigateTo(`/customer/carts?category=${encodeURIComponent(cat.label)}`)\n              }\n              className=\"flex flex-col items-center gap-2 rounded-lg border border-border-subtle bg-bg-surface p-4 text-center hover:shadow-sm hover:border-accent-foreground/20 transition-all\"\n            >\n              <div\n                className={cn('flex h-12 w-12 items-center justify-center rounded-full', cat.color)}\n              >\n                {cat.icon}\n              </div>\n              <span className=\"text-xs font-medium text-text-primary leading-tight\">{cat.label}</span>\n            </button>\n          ))}\n        </div>\n      </section>\n\n      {/* Platform Stats */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.platformStats', 'Platform Stats')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {platformStats.map((stat) => (\n            <div\n              key={stat.label}\n              className=\"flex items-center gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4\"\n            >\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-action-primary-bg/10 text-primary shrink-0\">\n                {stat.icon}\n              </div>\n              <div>\n                <p className=\"text-lg font-bold text-text-primary\">{stat.value}</p>\n                <p className=\"text-xs text-text-secondary\">{stat.label}</p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Recent Activity */}\n      <section>\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.recentActivity', 'Recent Activity')}\n        </h2>\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border\">\n          {mockRecentActivity.map((item) => (\n            <div key={item.id} className=\"flex items-center gap-3 px-4 py-3\">\n              <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-bg-sunken\">\n                <Activity\n                  className={cn('h-4 w-4', activityIcons[item.type] ?? 'text-text-secondary')}\n                />\n              </div>\n              <div className=\"flex-1 min-w-0\">\n                <p className=\"text-sm text-text-primary truncate\">{item.description}</p>\n              </div>\n              <span className=\"text-xs text-text-secondary whitespace-nowrap\">{item.time}</span>\n            </div>\n          ))}\n        </div>\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"HomePage.js","names":[],"sources":["../../../src/atheletebridge/pages/HomePage.tsx"],"sourcesContent":["/**\n * Home Page\n * @module atheletebridge/pages\n *\n * Role-based landing page with hero section, quick stats, quick actions,\n * featured carts, recent orders, how-it-works, category browsing,\n * platform stats, and welcome banner for new users.\n */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Search,\n  ShoppingBag,\n  Store,\n  ClipboardList,\n  TrendingUp,\n  LayoutDashboard,\n  Users,\n  IndianRupee,\n  Activity,\n  ArrowRight,\n  Star,\n  MapPin,\n  Clock,\n  ChefHat,\n  Scissors,\n  Wrench,\n  Home,\n  Shirt,\n  Heart,\n  GraduationCap,\n  Package,\n  ShoppingCart,\n  BarChart3,\n  Wallet,\n  CheckCircle2,\n  Zap,\n  Shield,\n  Sparkles,\n  HandCoins,\n  UserCheck,\n  Truck,\n  BadgeCheck,\n  FileText,\n  Settings,\n  Loader2,\n  AlertCircle,\n} from 'lucide-react';\nimport { EmphasisPanel, GradientText, ShowMore } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../components/PageLayout';\nimport { MetricsCard } from '../components/MetricsCard';\nimport { CartCard } from '../components/CartCard';\nimport { StatusBadge } from '../components/StatusBadge';\nimport { EmptyState } from '../components/EmptyState';\nimport { useAthleteBridge } from '../context/AthleteBridgeContext';\nimport { useAthleteBridgeApi } from '../hooks/useAthleteBridgeApi';\nimport { cn } from '../utils/cn';\nimport {\n  formatCurrency,\n  formatDate,\n  formatRelativeTime,\n  formatDistance,\n} from '../utils/formatters';\nimport type { UserRole, MockCart, MockOrder, DashboardStats } from '../types';\n\n// ---------------------------------------------------------------------------\n// Role-based Quick Action configs\n// ---------------------------------------------------------------------------\n\ninterface QuickAction {\n  label: string;\n  description: string;\n  icon: React.ReactNode;\n  path: string;\n  color: string;\n}\n\nconst quickActionsByRole: Record<UserRole, QuickAction[]> = {\n  customer: [\n    {\n      label: 'Discover Services',\n      description: 'Browse carts near you',\n      icon: <Search className=\"h-5 w-5\" />,\n      path: '/customer/carts',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'My Orders',\n      description: 'Track your orders',\n      icon: <ShoppingBag className=\"h-5 w-5\" />,\n      path: '/customer/orders',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Favorites',\n      description: 'Your saved carts',\n      icon: <Heart className=\"h-5 w-5\" />,\n      path: '/customer/favorites',\n      color: 'bg-pink-500/10 text-pink-600 dark:text-pink-400',\n    },\n    {\n      label: 'Settings',\n      description: 'Manage preferences',\n      icon: <Settings className=\"h-5 w-5\" />,\n      path: '/settings',\n      color: 'bg-bg-sunken text-text-secondary',\n    },\n  ],\n  cart_owner: [\n    {\n      label: 'My Cart',\n      description: 'Manage your cart',\n      icon: <Store className=\"h-5 w-5\" />,\n      path: '/owner/dashboard',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n    {\n      label: 'Orders',\n      description: 'Incoming orders',\n      icon: <ShoppingBag className=\"h-5 w-5\" />,\n      path: '/owner/orders',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Analytics',\n      description: 'Revenue & insights',\n      icon: <BarChart3 className=\"h-5 w-5\" />,\n      path: '/owner/analytics',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n    {\n      label: 'Staff',\n      description: 'Manage workers',\n      icon: <Users className=\"h-5 w-5\" />,\n      path: '/owner/staff',\n      color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n    },\n  ],\n  worker: [\n    {\n      label: 'My Tasks',\n      description: 'View assigned tasks',\n      icon: <ClipboardList className=\"h-5 w-5\" />,\n      path: '/worker/dashboard',\n      color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n    },\n    {\n      label: 'Schedule',\n      description: 'View shifts',\n      icon: <Clock className=\"h-5 w-5\" />,\n      path: '/worker/schedule',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Earnings',\n      description: 'Track pay',\n      icon: <Wallet className=\"h-5 w-5\" />,\n      path: '/worker/earnings',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Performance',\n      description: 'Ratings & stats',\n      icon: <Star className=\"h-5 w-5\" />,\n      path: '/worker/performance',\n      color: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n    },\n  ],\n  investor: [\n    {\n      label: 'Portfolio',\n      description: 'Your investments',\n      icon: <TrendingUp className=\"h-5 w-5\" />,\n      path: '/investor/dashboard',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n    {\n      label: 'Opportunities',\n      description: 'New investments',\n      icon: <HandCoins className=\"h-5 w-5\" />,\n      path: '/investor/opportunities',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Returns',\n      description: 'Earnings history',\n      icon: <IndianRupee className=\"h-5 w-5\" />,\n      path: '/investor/returns',\n      color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n    },\n    {\n      label: 'Reports',\n      description: 'Performance reports',\n      icon: <FileText className=\"h-5 w-5\" />,\n      path: '/investor/reports',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n  ],\n  admin: [\n    {\n      label: 'Dashboard',\n      description: 'Platform overview',\n      icon: <LayoutDashboard className=\"h-5 w-5\" />,\n      path: '/admin/dashboard',\n      color: 'bg-red-500/10 text-red-600 dark:text-red-400',\n    },\n    {\n      label: 'Users',\n      description: 'Manage accounts',\n      icon: <Users className=\"h-5 w-5\" />,\n      path: '/admin/users',\n      color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n    },\n    {\n      label: 'Carts',\n      description: 'Approve & manage',\n      icon: <Store className=\"h-5 w-5\" />,\n      path: '/admin/carts',\n      color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n    },\n    {\n      label: 'Analytics',\n      description: 'Revenue reports',\n      icon: <BarChart3 className=\"h-5 w-5\" />,\n      path: '/admin/analytics',\n      color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n    },\n  ],\n};\n\n// ---------------------------------------------------------------------------\n// Role-based Quick Stats configs\n// ---------------------------------------------------------------------------\n\nfunction getStatsForRole(\n  role: UserRole,\n  orders: MockOrder[],\n  dashboardStats: DashboardStats | undefined\n) {\n  switch (role) {\n    case 'customer':\n      return [\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: orders.length.toString(),\n          label: 'Total Orders',\n          trend: 'up' as const,\n          trendValue: '+2 this week',\n        },\n        {\n          icon: <Store className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeProviders ?? 0).toString(),\n          label: 'Nearby Providers',\n          trend: 'up' as const,\n          trendValue: '+3',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: (dashboardStats?.avgRating ?? 0).toFixed(1),\n          label: 'Avg. Rating',\n          trend: 'up' as const,\n          trendValue: '+0.1',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(\n            orders.reduce((s, o) => s + o.total, 0),\n            { minimumFractionDigits: 0 }\n          ),\n          label: 'Total Spent',\n          trend: 'neutral' as const,\n          trendValue: '',\n        },\n      ];\n    case 'cart_owner':\n      return [\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: '48',\n          label: 'Orders Today',\n          trend: 'up' as const,\n          trendValue: '+12%',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(12850, { minimumFractionDigits: 0 }),\n          label: \"Today's Revenue\",\n          trend: 'up' as const,\n          trendValue: '+8%',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: '4.6',\n          label: 'Cart Rating',\n          trend: 'up' as const,\n          trendValue: '+0.2',\n        },\n        {\n          icon: <Users className=\"h-5 w-5\" />,\n          value: '5',\n          label: 'Active Staff',\n          trend: 'neutral' as const,\n          trendValue: '',\n        },\n      ];\n    case 'worker':\n      return [\n        {\n          icon: <ClipboardList className=\"h-5 w-5\" />,\n          value: '5',\n          label: 'Tasks Today',\n          trend: 'up' as const,\n          trendValue: '+2',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(425, { minimumFractionDigits: 0 }),\n          label: \"Today's Earnings\",\n          trend: 'up' as const,\n          trendValue: '+15%',\n        },\n        {\n          icon: <Star className=\"h-5 w-5\" />,\n          value: '4.7',\n          label: 'Rating',\n          trend: 'up' as const,\n          trendValue: '+0.1',\n        },\n        {\n          icon: <CheckCircle2 className=\"h-5 w-5\" />,\n          value: '96.8%',\n          label: 'Completion Rate',\n          trend: 'up' as const,\n          trendValue: '+0.5%',\n        },\n      ];\n    case 'investor':\n      return [\n        {\n          icon: <TrendingUp className=\"h-5 w-5\" />,\n          value: '3',\n          label: 'Active Investments',\n          trend: 'up' as const,\n          trendValue: '+1',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(450000, { minimumFractionDigits: 0 }),\n          label: 'Total Invested',\n          trend: 'up' as const,\n          trendValue: '',\n        },\n        {\n          icon: <HandCoins className=\"h-5 w-5\" />,\n          value: '16.5%',\n          label: 'Avg. Returns',\n          trend: 'up' as const,\n          trendValue: '+2.1%',\n        },\n        {\n          icon: <BarChart3 className=\"h-5 w-5\" />,\n          value: formatCurrency(74250, { minimumFractionDigits: 0 }),\n          label: 'Total Returns',\n          trend: 'up' as const,\n          trendValue: '+8.5%',\n        },\n      ];\n    case 'admin':\n    default:\n      return [\n        {\n          icon: <Users className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeCustomers ?? 0).toLocaleString('en-IN'),\n          label: 'Active Customers',\n          trend: 'up' as const,\n          trendValue: '+50',\n        },\n        {\n          icon: <Store className=\"h-5 w-5\" />,\n          value: (dashboardStats?.activeProviders ?? 0).toString(),\n          label: 'Service Providers',\n          trend: 'up' as const,\n          trendValue: '+3',\n        },\n        {\n          icon: <ShoppingBag className=\"h-5 w-5\" />,\n          value: (dashboardStats?.totalOrders ?? 0).toLocaleString('en-IN'),\n          label: 'Total Orders',\n          trend: 'up' as const,\n          trendValue: '+12%',\n        },\n        {\n          icon: <IndianRupee className=\"h-5 w-5\" />,\n          value: formatCurrency(dashboardStats?.totalRevenue ?? 0, { minimumFractionDigits: 0 }),\n          label: 'Total Revenue',\n          trend: 'up' as const,\n          trendValue: '+8.5%',\n        },\n      ];\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Category data\n// ---------------------------------------------------------------------------\n\nconst categories = [\n  {\n    label: 'Food & Beverage',\n    icon: <ChefHat className=\"h-6 w-6\" />,\n    color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400',\n  },\n  {\n    label: 'Personal Care & Beauty',\n    icon: <Scissors className=\"h-6 w-6\" />,\n    color: 'bg-pink-500/10 text-pink-600 dark:text-pink-400',\n  },\n  {\n    label: 'Repair & Maintenance',\n    icon: <Wrench className=\"h-6 w-6\" />,\n    color: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n  },\n  {\n    label: 'Home Services',\n    icon: <Home className=\"h-6 w-6\" />,\n    color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n  },\n  {\n    label: 'Clothing & Fashion',\n    icon: <Shirt className=\"h-6 w-6\" />,\n    color: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',\n  },\n  {\n    label: 'Health & Wellness',\n    icon: <Heart className=\"h-6 w-6\" />,\n    color: 'bg-red-500/10 text-red-600 dark:text-red-400',\n  },\n  {\n    label: 'Education & Skills',\n    icon: <GraduationCap className=\"h-6 w-6\" />,\n    color: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  },\n  {\n    label: 'Retail & Merchandise',\n    icon: <Package className=\"h-6 w-6\" />,\n    color: 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400',\n  },\n  {\n    label: 'Grocery & Essentials',\n    icon: <ShoppingCart className=\"h-6 w-6\" />,\n    color: 'bg-green-500/10 text-green-600 dark:text-green-400',\n  },\n];\n\n// ---------------------------------------------------------------------------\n// How It Works steps\n// ---------------------------------------------------------------------------\n\nconst howItWorks = [\n  {\n    step: 1,\n    title: 'Browse Services',\n    description: 'Discover local service providers and carts near you.',\n    icon: <Search className=\"h-6 w-6\" />,\n  },\n  {\n    step: 2,\n    title: 'Place an Order',\n    description: 'Select items or services and place your order seamlessly.',\n    icon: <ShoppingBag className=\"h-6 w-6\" />,\n  },\n  {\n    step: 3,\n    title: 'Track in Real-time',\n    description: 'Get live updates on your order from confirmation to delivery.',\n    icon: <Truck className=\"h-6 w-6\" />,\n  },\n  {\n    step: 4,\n    title: 'Rate & Review',\n    description: 'Share your experience and help others find great services.',\n    icon: <Star className=\"h-6 w-6\" />,\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Recent activity mock\n// ---------------------------------------------------------------------------\n\nconst mockRecentActivity = [\n  {\n    id: 'ha-1',\n    description: 'New order placed at Dosa Express',\n    time: '2 mins ago',\n    type: 'order',\n  },\n  {\n    id: 'ha-2',\n    description: 'Quick Cuts Salon received a new review',\n    time: '15 mins ago',\n    type: 'review',\n  },\n  {\n    id: 'ha-3',\n    description: 'Investment opportunity funded: Spotless Cleaning',\n    time: '1 hour ago',\n    type: 'investment',\n  },\n  {\n    id: 'ha-4',\n    description: 'New cart registered: Gadget Zone Brigade',\n    time: '3 hours ago',\n    type: 'cart',\n  },\n  {\n    id: 'ha-5',\n    description: 'Order delivered: Fix-It Mobile Repair',\n    time: '5 hours ago',\n    type: 'order',\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Platform Stats\n// ---------------------------------------------------------------------------\n\nconst platformStats = [\n  { label: 'Service Providers', value: '21+', icon: <Store className=\"h-5 w-5\" /> },\n  { label: 'Categories', value: '9', icon: <Package className=\"h-5 w-5\" /> },\n  { label: 'Happy Customers', value: '534+', icon: <Users className=\"h-5 w-5\" /> },\n  { label: 'Orders Completed', value: '1,247+', icon: <CheckCircle2 className=\"h-5 w-5\" /> },\n];\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function HomePage() {\n  const { navigateTo, currentUser } = useAthleteBridge();\n  const { t: translate } = useI18n();\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const { providers, orders, dashboardStats } = useAthleteBridgeApi();\n\n  const t = useCallback(\n    (key: string, fallback: string): string => {\n      const value = translate(key);\n      return value === key ? fallback : value;\n    },\n    [translate]\n  );\n\n  const firstName = currentUser?.firstName ?? currentUser?.name ?? 'there';\n  const userRole: UserRole = (currentUser?.role as UserRole) ?? 'customer';\n\n  const roleLabel: Record<UserRole, string> = {\n    customer: t('atheletebridge.home.role.customer', 'Customer'),\n    cart_owner: t('atheletebridge.home.role.cartOwner', 'Cart Owner'),\n    worker: t('atheletebridge.home.role.worker', 'Worker'),\n    investor: t('atheletebridge.home.role.investor', 'Investor'),\n    admin: t('atheletebridge.home.role.admin', 'Administrator'),\n  };\n\n  const roleGreetings: Record<UserRole, string> = {\n    customer: t('atheletebridge.home.greeting.customer', 'Discover amazing services near you'),\n    cart_owner: t('atheletebridge.home.greeting.cartOwner', 'Manage your business and grow'),\n    worker: t('atheletebridge.home.greeting.worker', 'Check your tasks and earnings'),\n    investor: t('atheletebridge.home.greeting.investor', 'Track your investments and returns'),\n    admin: t('atheletebridge.home.greeting.admin', 'Monitor and manage the platform'),\n  };\n\n  const quickActions = quickActionsByRole[userRole] ?? quickActionsByRole.customer;\n  const stats = getStatsForRole(userRole, orders.data ?? [], dashboardStats.data);\n\n  // Featured carts (top-rated, open)\n  const featuredCarts = useMemo(() => {\n    let carts = (providers.data ?? []).filter((c) => c.isOpen);\n    if (searchQuery) {\n      const q = searchQuery.toLowerCase();\n      carts = carts.filter(\n        (c) => c.name.toLowerCase().includes(q) || c.category.toLowerCase().includes(q)\n      );\n    }\n    return carts.sort((a, b) => b.rating - a.rating).slice(0, 6);\n  }, [providers.data, searchQuery]);\n\n  // Recent orders\n  const recentOrders = useMemo(() => {\n    return [...(orders.data ?? [])]\n      .sort((a, b) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime())\n      .slice(0, 3);\n  }, [orders.data]);\n\n  const activityIcons: Record<string, string> = {\n    order: 'text-blue-600 dark:text-blue-400',\n    review: 'text-yellow-600 dark:text-yellow-400',\n    investment: 'text-green-600 dark:text-green-400',\n    cart: 'text-purple-600 dark:text-purple-400',\n  };\n\n  // Check if \"new user\" (no orders)\n  const isNewUser = (orders.data ?? []).length === 0 && !orders.isLoading;\n\n  const isLoading = providers.isLoading || orders.isLoading || dashboardStats.isLoading;\n  const isError = providers.isError || orders.isError || dashboardStats.isError;\n\n  if (isLoading) {\n    return (\n      <PageLayout title={t('atheletebridge.common.loading', 'Loading...')}>\n        <div className=\"flex h-[60vh] items-center justify-center\">\n          <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  if (isError) {\n    return (\n      <PageLayout title={t('atheletebridge.common.error', 'Error')}>\n        <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n          <AlertCircle className=\"h-12 w-12 text-status-error-text\" />\n          <h2 className=\"text-xl font-semibold\">\n            {t('atheletebridge.common.errorLoading', 'Error loading data')}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {t('atheletebridge.common.tryAgain', 'Please try again later.')}\n          </p>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      hero\n      title={\n        <>\n          {t('atheletebridge.home.hello', 'Hello')}, <GradientText>{firstName}</GradientText>!\n        </>\n      }\n      description={roleGreetings[userRole]}\n    >\n      {/* Welcome Banner for New Users */}\n      {isNewUser && (\n        <section className=\"mb-6 rounded-xl border border-border-subtle bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5 p-6\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-action-primary-bg/10\">\n              <Sparkles className=\"h-6 w-6 text-primary\" />\n            </div>\n            <div className=\"flex-1\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">\n                {t('atheletebridge.home.welcomeTitle', 'Welcome to AthleteBridge!')}\n              </h2>\n              <p className=\"mt-1 text-sm text-text-secondary\">\n                {t(\n                  'atheletebridge.home.welcomeDescription',\n                  'Your local services marketplace. Start by exploring service providers near you or browse categories to find what you need.'\n                )}\n              </p>\n              <button\n                type=\"button\"\n                onClick={() => navigateTo('/customer/carts')}\n                className=\"mt-3 inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n              >\n                <Search className=\"h-4 w-4\" />\n                {t('atheletebridge.home.exploreServices', 'Explore Services')}\n              </button>\n            </div>\n          </div>\n        </section>\n      )}\n\n      {/* Hero Section with Role Info */}\n      <EmphasisPanel className=\"mb-6\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div className=\"flex items-center gap-2 mb-1\">\n              <span className=\"inline-flex items-center rounded-full bg-action-primary-bg/10 px-2.5 py-0.5 text-xs font-medium text-primary\">\n                <BadgeCheck className=\"mr-1 h-3 w-3\" />\n                {roleLabel[userRole]}\n              </span>\n            </div>\n            <h2 className=\"text-xl font-bold text-text-primary\">\n              {t('atheletebridge.home.good', 'Good')}{' '}\n              {new Date().getHours() < 12\n                ? t('atheletebridge.home.time.morning', 'morning')\n                : new Date().getHours() < 17\n                  ? t('atheletebridge.home.time.afternoon', 'afternoon')\n                  : t('atheletebridge.home.time.evening', 'evening')}\n              , {firstName}\n            </h2>\n            <p className=\"mt-1 text-sm text-text-secondary\">{roleGreetings[userRole]}</p>\n          </div>\n          <div className=\"relative w-full sm:w-72\">\n            <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n            <input\n              type=\"text\"\n              placeholder={t('atheletebridge.home.searchPlaceholder', 'Search services, carts...')}\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n            />\n          </div>\n        </div>\n      </EmphasisPanel>\n\n      {/* Quick Stats */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.quickStats', 'Quick Stats')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {stats.map((stat, index) => (\n            <MetricsCard\n              key={stat.label}\n              icon={stat.icon}\n              value={stat.value}\n              label={stat.label}\n              trend={stat.trend}\n              trendValue={stat.trendValue}\n              featured={index === 0}\n            />\n          ))}\n        </div>\n      </section>\n\n      {/* Quick Actions */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.quickActions', 'Quick Actions')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {quickActions.map((action) => (\n            <button\n              key={action.label}\n              type=\"button\"\n              onClick={() => navigateTo(action.path)}\n              className={cn(\n                'flex items-start gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4 text-left shadow-sm transition-all',\n                'hover:border-accent-foreground/20 hover:shadow-md'\n              )}\n            >\n              <div\n                className={cn(\n                  'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',\n                  action.color\n                )}\n              >\n                {action.icon}\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"text-sm font-semibold text-text-primary\">{action.label}</p>\n                <p className=\"mt-0.5 text-xs text-text-secondary\">{action.description}</p>\n              </div>\n              <ArrowRight className=\"h-4 w-4 text-text-secondary shrink-0 mt-1\" />\n            </button>\n          ))}\n        </div>\n      </section>\n\n      {/* Featured / Nearby Carts */}\n      <section className=\"mb-8\">\n        <div className=\"flex items-center justify-between mb-4\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {searchQuery\n              ? t('atheletebridge.home.searchResults', 'Search Results')\n              : t('atheletebridge.home.featuredCarts', 'Featured Carts')}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/customer/carts')}\n            className=\"flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n          >\n            {t('atheletebridge.common.viewAll', 'View All')} <ArrowRight className=\"h-3.5 w-3.5\" />\n          </button>\n        </div>\n\n        {featuredCarts.length === 0 ? (\n          <EmptyState\n            illustration=\"empty-search\"\n            title={t('atheletebridge.home.noCartsFound', 'No carts found')}\n            description={t(\n              'atheletebridge.home.noCartsDescription',\n              'Try adjusting your search or browse all categories'\n            )}\n            action={\n              <button\n                type=\"button\"\n                onClick={() => setSearchQuery('')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                {t('atheletebridge.home.clearSearch', 'Clear Search')}\n              </button>\n            }\n          />\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {featuredCarts.map((cart) => (\n              <div\n                key={cart.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => navigateTo(`/customer/cart/${cart.id}`)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    navigateTo(`/customer/cart/${cart.id}`);\n                  }\n                }}\n                className=\"rounded-lg border border-border-subtle bg-bg-surface shadow-sm overflow-hidden transition-all hover:shadow-md hover:border-accent-foreground/20 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                {/* Image */}\n                <div className=\"relative h-40 bg-bg-sunken\">\n                  <img\n                    src={cart.image}\n                    alt={cart.name}\n                    className=\"h-full w-full object-cover\"\n                    loading=\"lazy\"\n                  />\n                  <div className=\"absolute top-2 right-2\">\n                    <StatusBadge status={cart.isOpen ? 'open' : 'closed'} />\n                  </div>\n                  {cart.isVerified && (\n                    <div className=\"absolute top-2 left-2\">\n                      <span className=\"inline-flex items-center gap-1 rounded-full bg-blue-500/90 px-2 py-0.5 text-xs font-medium text-white backdrop-blur-sm\">\n                        <BadgeCheck className=\"h-3 w-3\" />{' '}\n                        {t('atheletebridge.home.verified', 'Verified')}\n                      </span>\n                    </div>\n                  )}\n                  <div className=\"absolute bottom-2 right-2\">\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm\">\n                      <Clock className=\"h-3 w-3\" /> {cart.estimatedTime} min\n                    </span>\n                  </div>\n                </div>\n\n                {/* Details */}\n                <div className=\"p-4\">\n                  <div className=\"flex items-start justify-between\">\n                    <div className=\"min-w-0 flex-1\">\n                      <h3 className=\"text-base font-semibold text-text-primary truncate\">\n                        {cart.name}\n                      </h3>\n                      <p className=\"mt-0.5 text-sm text-text-secondary\">{cart.category}</p>\n                    </div>\n                    <div className=\"flex items-center gap-1 rounded bg-green-600 px-1.5 py-0.5 ml-2 shrink-0\">\n                      <Star className=\"h-3 w-3 fill-white text-white\" />\n                      <span className=\"text-xs font-bold text-white\">{cart.rating}</span>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-3 flex items-center gap-4 text-xs text-text-secondary\">\n                    <span className=\"flex items-center gap-1\">\n                      <MapPin className=\"h-3 w-3\" /> {formatDistance(cart.distance)}\n                    </span>\n                    <span className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3\" /> {cart.totalRatings}{' '}\n                      {t('atheletebridge.home.reviews', 'reviews')}\n                    </span>\n                    {cart.averageOrderValue && (\n                      <span className=\"flex items-center gap-1\">\n                        <IndianRupee className=\"h-3 w-3\" />{' '}\n                        {t('atheletebridge.home.average', 'Avg.')}{' '}\n                        {formatCurrency(cart.averageOrderValue, { minimumFractionDigits: 0 })}\n                      </span>\n                    )}\n                  </div>\n\n                  {/* Tags / service types */}\n                  {cart.serviceTypes && cart.serviceTypes.length > 0 && (\n                    <div className=\"mt-3 flex flex-wrap gap-1.5\">\n                      {cart.serviceTypes.slice(0, 3).map((st) => (\n                        <span\n                          key={st}\n                          className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n                        >\n                          {st.replace(/_/g, ' ')}\n                        </span>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </section>\n\n      {/* Recent Orders */}\n      {recentOrders.length > 0 && (\n        <section className=\"mb-8\">\n          <div className=\"flex items-center justify-between mb-4\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {t('atheletebridge.home.recentOrders', 'Recent Orders')}\n            </h2>\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/orders')}\n              className=\"flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n            >\n              {t('atheletebridge.common.viewAll', 'View All')}{' '}\n              <ArrowRight className=\"h-3.5 w-3.5\" />\n            </button>\n          </div>\n          <div className=\"rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border\">\n            {recentOrders.map((order) => (\n              <div\n                key={order.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => navigateTo(`/customer/order/${order.id}`)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault();\n                    navigateTo(`/customer/order/${order.id}`);\n                  }\n                }}\n                className=\"flex items-center gap-4 px-4 py-3 hover:bg-accent/50 transition-colors cursor-pointer\"\n              >\n                <img\n                  src={order.cartImage}\n                  alt={order.cartName}\n                  className=\"h-12 w-12 rounded-lg object-cover shrink-0\"\n                />\n                <div className=\"flex-1 min-w-0\">\n                  <div className=\"flex items-center gap-2\">\n                    <p className=\"text-sm font-medium text-text-primary truncate\">\n                      {order.cartName}\n                    </p>\n                    <StatusBadge status={order.status} />\n                  </div>\n                  <p className=\"text-xs text-text-secondary mt-0.5\">\n                    {order.items.map((i) => i.name).join(', ')}\n                  </p>\n                </div>\n                <div className=\"text-right shrink-0\">\n                  <p className=\"text-sm font-semibold text-text-primary\">\n                    {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n                  </p>\n                  <p className=\"text-xs text-text-secondary\">\n                    {formatRelativeTime(order.orderDate)}\n                  </p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {/* How It Works */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.howItWorks', 'How It Works')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {howItWorks.map((item) => (\n            <div\n              key={item.step}\n              className=\"relative rounded-lg border border-border-subtle bg-bg-surface p-5 text-center\"\n            >\n              <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                <span className=\"inline-flex h-6 w-6 items-center justify-center rounded-full bg-action-primary-bg text-xs font-bold text-action-primary-text\">\n                  {item.step}\n                </span>\n              </div>\n              <div className=\"mt-2 flex justify-center text-text-secondary mb-3\">{item.icon}</div>\n              <h3 className=\"text-sm font-semibold text-text-primary\">{item.title}</h3>\n              <p className=\"mt-1 text-xs text-text-secondary\">{item.description}</p>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Browse by Category */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.browseByCategory', 'Browse by Category')}\n        </h2>\n        <div className=\"grid grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-5\">\n          {categories.map((cat) => (\n            <button\n              key={cat.label}\n              type=\"button\"\n              onClick={() =>\n                navigateTo(`/customer/carts?category=${encodeURIComponent(cat.label)}`)\n              }\n              className=\"flex flex-col items-center gap-2 rounded-lg border border-border-subtle bg-bg-surface p-4 text-center hover:shadow-sm hover:border-accent-foreground/20 transition-all\"\n            >\n              <div\n                className={cn('flex h-12 w-12 items-center justify-center rounded-full', cat.color)}\n              >\n                {cat.icon}\n              </div>\n              <span className=\"text-xs font-medium text-text-primary leading-tight\">\n                {cat.label}\n              </span>\n            </button>\n          ))}\n        </div>\n      </section>\n\n      {/* Platform Stats */}\n      <section className=\"mb-8\">\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.platformStats', 'Platform Stats')}\n        </h2>\n        <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n          {platformStats.map((stat) => (\n            <div\n              key={stat.label}\n              className=\"flex items-center gap-3 rounded-lg border border-border-subtle bg-bg-surface p-4\"\n            >\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-action-primary-bg/10 text-primary shrink-0\">\n                {stat.icon}\n              </div>\n              <div>\n                <p className=\"text-lg font-bold text-text-primary\">{stat.value}</p>\n                <p className=\"text-xs text-text-secondary\">{stat.label}</p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Recent Activity */}\n      <section>\n        <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n          {t('atheletebridge.home.recentActivity', 'Recent Activity')}\n        </h2>\n        <ShowMore collapsedHeight={180}>\n          <div className=\"rounded-card border border-border-seam bg-bg-surface divide-y divide-border\">\n            {mockRecentActivity.map((item) => (\n              <div key={item.id} className=\"flex items-center gap-3 px-4 py-3\">\n                <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-bg-sunken\">\n                  <Activity\n                    className={cn('h-4 w-4', activityIcons[item.type] ?? 'text-text-secondary')}\n                  />\n                </div>\n                <div className=\"flex-1 min-w-0\">\n                  <p className=\"text-sm text-text-primary truncate\">{item.description}</p>\n                </div>\n                <span className=\"text-xs text-text-secondary whitespace-nowrap\">{item.time}</span>\n              </div>\n            ))}\n          </div>\n        </ShowMore>\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/atheletebridge/pages/common/NotificationCenterPage.js

@@ -518,6 +518,7 @@ function B() {
 				})]
 			}),
 			G.length === 0 ? /* @__PURE__ */ A(r, {
+				illustration: "empty-notifications",
 				icon: /* @__PURE__ */ A(d, { className: "h-12 w-12" }),
 				title: "No notifications",
 				description: x ? "No notifications match your search. Try different keywords." : g === "unread" ? "You're all caught up! No unread notifications." : "No notifications in this category yet.",

package/dist/atheletebridge/pages/common/NotificationCenterPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenterPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/common/NotificationCenterPage.tsx"],"sourcesContent":["/**\n * Notification Center Page\n * @module atheletebridge/pages/common\n *\n * Full-featured notification center with tab filters (All, Orders,\n * Promotions, System, Unread), date grouping (Today, Yesterday, Earlier),\n * mark-as-read / mark-all-as-read, delete notification, search,\n * type/priority badges, action buttons, stats overview, and empty states.\n */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport {\n  Bell,\n  ShoppingBag,\n  TrendingUp,\n  Star,\n  AlertCircle,\n  CheckCircle2,\n  CreditCard,\n  Users,\n  AlertTriangle,\n  Megaphone,\n  Check,\n  CheckCheck,\n  Trash2,\n  Search,\n  X,\n  MailOpen,\n  Clock,\n  Truck,\n  UserCheck,\n  Inbox,\n  RefreshCw,\n  SlidersHorizontal,\n  ArrowUpDown,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatRelativeTime } from '../../utils/formatters';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype NotificationType =\n  | 'order_update'\n  | 'payment'\n  | 'promotion'\n  | 'system'\n  | 'review'\n  | 'staff'\n  | 'investment'\n  | 'alert'\n  | 'delivery'\n  | 'account';\n\ntype NotificationPriority = 'low' | 'medium' | 'high' | 'urgent';\n\ntype TabId = 'all' | 'orders' | 'promotions' | 'system' | 'unread';\n\ntype SortOption = 'recent' | 'priority' | 'unread';\n\ninterface Notification {\n  id: string;\n  type: NotificationType;\n  title: string;\n  message: string;\n  priority: NotificationPriority;\n  isRead: boolean;\n  createdAt: string;\n  actionUrl?: string;\n  actionText?: string;\n  metadata?: {\n    orderId?: string;\n    cartId?: string;\n    amount?: number;\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Mock notifications (14 items, rich variety)\n// ---------------------------------------------------------------------------\n\nconst initialNotifications: Notification[] = [\n  {\n    id: 'n-001',\n    type: 'order_update',\n    title: 'Order Delivered Successfully!',\n    message:\n      'Your order #ORD-001 from Dosa Express has been delivered. Rate your experience to help others!',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 8 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/order/ORD-001',\n    actionText: 'Rate Order',\n    metadata: { orderId: 'ORD-001', cartId: 'FOOD-001' },\n  },\n  {\n    id: 'n-002',\n    type: 'payment',\n    title: 'Payment Confirmed',\n    message:\n      'Your payment of \\u20B9495 for order #ORD-002 at Quick Cuts Salon has been processed successfully.',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 35 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-002', amount: 495 },\n  },\n  {\n    id: 'n-003',\n    type: 'promotion',\n    title: '20% Off Beauty Services This Weekend!',\n    message:\n      \"Glow Beauty Services is offering 20% off on all treatments this weekend only. Don't miss out!\",\n    priority: 'low',\n    isRead: false,\n    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/cart/SERV-002',\n    actionText: 'Book Now',\n    metadata: { cartId: 'SERV-002' },\n  },\n  {\n    id: 'n-004',\n    type: 'review',\n    title: 'New Review Response',\n    message:\n      'Dosa Express replied to your review: \"Thank you so much for your kind words! We hope to serve you again soon.\"',\n    priority: 'low',\n    isRead: false,\n    createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/reviews',\n    actionText: 'View Reply',\n  },\n  {\n    id: 'n-005',\n    type: 'system',\n    title: 'App Update Available',\n    message:\n      'Version 2.4.0 of AthleteBridge is available with improved performance, new category filters, and bug fixes.',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 7 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/settings',\n    actionText: 'Update Now',\n  },\n  {\n    id: 'n-006',\n    type: 'order_update',\n    title: 'Appointment Confirmed',\n    message:\n      'Your appointment at Quick Cuts Salon has been confirmed for tomorrow at 3:00 PM. The stylist Suresh will be serving you.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/order/ORD-002',\n    actionText: 'View Details',\n    metadata: { orderId: 'ORD-002' },\n  },\n  {\n    id: 'n-007',\n    type: 'investment',\n    title: 'Monthly Returns Credited',\n    message:\n      'You received \\u20B91,250 in monthly returns from your Quick Cuts Salon investment. Total portfolio value: \\u20B92,12,500.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/investor/portfolio',\n    actionText: 'View Portfolio',\n    metadata: { amount: 1250 },\n  },\n  {\n    id: 'n-008',\n    type: 'delivery',\n    title: 'Delivery Worker Assigned',\n    message:\n      'Ravi Kumar (rated 4.8) has been assigned to deliver your order from Biryani Pot. Estimated arrival: 25 minutes.',\n    priority: 'high',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1.5 * 24 * 60 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-003' },\n  },\n  {\n    id: 'n-009',\n    type: 'alert',\n    title: 'Unusual Login Attempt Detected',\n    message:\n      'We detected a login attempt from a new device in Mumbai. If this was not you, please change your password immediately.',\n    priority: 'urgent',\n    isRead: true,\n    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/settings',\n    actionText: 'Review Activity',\n  },\n  {\n    id: 'n-010',\n    type: 'promotion',\n    title: 'Flash Sale: Mobile Accessories',\n    message:\n      'Gadget Zone Brigade is running a flash sale! Up to 30% off on bluetooth headphones, cases, and chargers.',\n    priority: 'low',\n    isRead: true,\n    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/cart/RETAIL-003',\n    actionText: 'Shop Now',\n    metadata: { cartId: 'RETAIL-003' },\n  },\n  {\n    id: 'n-011',\n    type: 'system',\n    title: 'Scheduled Platform Maintenance',\n    message:\n      'Platform maintenance is scheduled for Sunday 2:00 AM - 4:00 AM IST. Some services may be briefly unavailable during this window.',\n    priority: 'high',\n    isRead: true,\n    createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'n-012',\n    type: 'account',\n    title: 'KYC Verification Complete',\n    message:\n      'Your KYC verification has been completed successfully. You now have full access to all platform features including investments.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'n-013',\n    type: 'staff',\n    title: 'Staff Schedule Updated',\n    message:\n      'Priya Sharma has updated her availability for this week. She will be unavailable on Wednesday and Thursday.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/owner/staff',\n    actionText: 'View Schedule',\n  },\n  {\n    id: 'n-014',\n    type: 'payment',\n    title: 'Refund Processed',\n    message:\n      'Your refund of \\u20B9280 for order #ORD-005 has been processed. The amount will reflect in your account within 3-5 business days.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-005', amount: 280 },\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Type icon/color configuration\n// ---------------------------------------------------------------------------\n\nconst typeConfig: Record<string, { icon: typeof Bell; color: string; bg: string; label: string }> =\n  {\n    order_update: {\n      icon: ShoppingBag,\n      color: 'text-blue-600 dark:text-blue-400',\n      bg: 'bg-blue-500/10',\n      label: 'Order',\n    },\n    payment: {\n      icon: CreditCard,\n      color: 'text-green-600 dark:text-green-400',\n      bg: 'bg-green-500/10',\n      label: 'Payment',\n    },\n    promotion: {\n      icon: Megaphone,\n      color: 'text-orange-600 dark:text-orange-400',\n      bg: 'bg-orange-500/10',\n      label: 'Promo',\n    },\n    system: {\n      icon: AlertCircle,\n      color: 'text-purple-600 dark:text-purple-400',\n      bg: 'bg-purple-500/10',\n      label: 'System',\n    },\n    review: {\n      icon: Star,\n      color: 'text-yellow-600 dark:text-yellow-400',\n      bg: 'bg-yellow-500/10',\n      label: 'Review',\n    },\n    staff: {\n      icon: Users,\n      color: 'text-indigo-600 dark:text-indigo-400',\n      bg: 'bg-indigo-500/10',\n      label: 'Staff',\n    },\n    investment: {\n      icon: TrendingUp,\n      color: 'text-emerald-600 dark:text-emerald-400',\n      bg: 'bg-emerald-500/10',\n      label: 'Investment',\n    },\n    alert: {\n      icon: AlertTriangle,\n      color: 'text-red-600 dark:text-red-400',\n      bg: 'bg-red-500/10',\n      label: 'Alert',\n    },\n    delivery: {\n      icon: Truck,\n      color: 'text-cyan-600 dark:text-cyan-400',\n      bg: 'bg-cyan-500/10',\n      label: 'Delivery',\n    },\n    account: {\n      icon: UserCheck,\n      color: 'text-teal-600 dark:text-teal-400',\n      bg: 'bg-teal-500/10',\n      label: 'Account',\n    },\n  };\n\n// ---------------------------------------------------------------------------\n// Priority styling\n// ---------------------------------------------------------------------------\n\nconst priorityStyles: Record<NotificationPriority, string> = {\n  urgent: 'bg-red-500/20 text-red-600 dark:text-red-400',\n  high: 'bg-orange-500/20 text-orange-600 dark:text-orange-400',\n  medium: 'bg-blue-500/20 text-blue-600 dark:text-blue-400',\n  low: 'bg-bg-sunken text-text-secondary',\n};\n\nconst priorityBorderColors: Record<NotificationPriority, string> = {\n  urgent: 'border-l-red-500',\n  high: 'border-l-orange-500',\n  medium: 'border-l-blue-500',\n  low: 'border-l-border',\n};\n\nconst priorityOrder: Record<NotificationPriority, number> = {\n  urgent: 4,\n  high: 3,\n  medium: 2,\n  low: 1,\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\n\nconst tabs: { id: TabId; label: string; icon: typeof Bell }[] = [\n  { id: 'all', label: 'All', icon: Inbox },\n  { id: 'orders', label: 'Orders', icon: ShoppingBag },\n  { id: 'promotions', label: 'Promotions', icon: Megaphone },\n  { id: 'system', label: 'System', icon: AlertCircle },\n  { id: 'unread', label: 'Unread', icon: Bell },\n];\n\n// ---------------------------------------------------------------------------\n// Date grouping helpers\n// ---------------------------------------------------------------------------\n\nfunction getDateGroup(dateStr: string): string {\n  const date = new Date(dateStr);\n  const now = new Date();\n  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);\n\n  if (date >= today) return 'Today';\n  if (date >= yesterday) return 'Yesterday';\n  return 'Earlier';\n}\n\nfunction groupByDate(items: Notification[]): { label: string; items: Notification[] }[] {\n  const groups: { label: string; items: Notification[] }[] = [];\n  const map = new Map<string, Notification[]>();\n  const order = ['Today', 'Yesterday', 'Earlier'];\n\n  for (const n of items) {\n    const group = getDateGroup(n.createdAt);\n    if (!map.has(group)) map.set(group, []);\n    map.get(group)!.push(n);\n  }\n\n  for (const label of order) {\n    const items = map.get(label);\n    if (items && items.length > 0) {\n      groups.push({ label, items });\n    }\n  }\n\n  return groups;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function NotificationCenterPage() {\n  const { navigateTo } = useAthleteBridge();\n  const [notifications, setNotifications] = useState<Notification[]>(initialNotifications);\n  const [activeTab, setActiveTab] = useState<TabId>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [sortBy, setSortBy] = useState<SortOption>('recent');\n  const [showSortMenu, setShowSortMenu] = useState(false);\n\n  // ---------------------------------------------------------------------------\n  // Derived counts\n  // ---------------------------------------------------------------------------\n\n  const unreadCount = useMemo(() => notifications.filter((n) => !n.isRead).length, [notifications]);\n\n  const urgentCount = useMemo(\n    () => notifications.filter((n) => n.priority === 'urgent').length,\n    [notifications]\n  );\n\n  const todayCount = useMemo(\n    () => notifications.filter((n) => getDateGroup(n.createdAt) === 'Today').length,\n    [notifications]\n  );\n\n  const thisWeekCount = useMemo(() => {\n    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);\n    return notifications.filter((n) => new Date(n.createdAt) >= weekAgo).length;\n  }, [notifications]);\n\n  const tabCounts = useMemo(() => {\n    const counts: Record<TabId, number> = {\n      all: 0,\n      orders: 0,\n      promotions: 0,\n      system: 0,\n      unread: 0,\n    };\n    for (const n of notifications) {\n      counts.all++;\n      if (!n.isRead) counts.unread++;\n      if (n.type === 'order_update' || n.type === 'delivery') counts.orders++;\n      if (n.type === 'promotion') counts.promotions++;\n      if (n.type === 'system' || n.type === 'alert' || n.type === 'account') counts.system++;\n    }\n    return counts;\n  }, [notifications]);\n\n  // ---------------------------------------------------------------------------\n  // Filtered & sorted list\n  // ---------------------------------------------------------------------------\n\n  const filteredNotifications = useMemo(() => {\n    let list = [...notifications];\n\n    // Tab filter\n    switch (activeTab) {\n      case 'orders':\n        list = list.filter((n) => n.type === 'order_update' || n.type === 'delivery');\n        break;\n      case 'promotions':\n        list = list.filter((n) => n.type === 'promotion');\n        break;\n      case 'system':\n        list = list.filter(\n          (n) => n.type === 'system' || n.type === 'alert' || n.type === 'account'\n        );\n        break;\n      case 'unread':\n        list = list.filter((n) => !n.isRead);\n        break;\n    }\n\n    // Search filter\n    if (searchQuery) {\n      const q = searchQuery.toLowerCase();\n      list = list.filter(\n        (n) => n.title.toLowerCase().includes(q) || n.message.toLowerCase().includes(q)\n      );\n    }\n\n    // Sort\n    switch (sortBy) {\n      case 'recent':\n        list.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());\n        break;\n      case 'priority':\n        list.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]);\n        break;\n      case 'unread':\n        list.sort((a, b) => (a.isRead === b.isRead ? 0 : a.isRead ? 1 : -1));\n        break;\n    }\n\n    return list;\n  }, [notifications, activeTab, searchQuery, sortBy]);\n\n  // Grouped by date\n  const grouped = useMemo(() => groupByDate(filteredNotifications), [filteredNotifications]);\n\n  // ---------------------------------------------------------------------------\n  // Actions\n  // ---------------------------------------------------------------------------\n\n  const markAsRead = useCallback((id: string) => {\n    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, isRead: true } : n)));\n  }, []);\n\n  const markAllAsRead = useCallback(() => {\n    setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })));\n  }, []);\n\n  const deleteNotification = useCallback((id: string) => {\n    setNotifications((prev) => prev.filter((n) => n.id !== id));\n  }, []);\n\n  const handleAction = useCallback(\n    (notif: Notification) => {\n      if (!notif.isRead) markAsRead(notif.id);\n      if (notif.actionUrl) navigateTo(notif.actionUrl);\n    },\n    [markAsRead, navigateTo]\n  );\n\n  const clearAll = useCallback(() => {\n    if (window.confirm('Are you sure you want to clear all notifications?')) {\n      setNotifications([]);\n    }\n  }, []);\n\n  // ---------------------------------------------------------------------------\n  // Render\n  // ---------------------------------------------------------------------------\n\n  return (\n    <PageLayout\n      title=\"Notifications\"\n      description={\n        unreadCount > 0\n          ? `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`\n          : 'All caught up!'\n      }\n      actions={\n        <div className=\"flex items-center gap-2\">\n          {notifications.length > 0 && (\n            <button\n              type=\"button\"\n              onClick={clearAll}\n              className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-accent transition-colors\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              <span className=\"hidden sm:inline\">Clear All</span>\n            </button>\n          )}\n          {unreadCount > 0 && (\n            <button\n              type=\"button\"\n              onClick={markAllAsRead}\n              className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n            >\n              <CheckCheck className=\"h-4 w-4\" />\n              Mark All Read\n            </button>\n          )}\n        </div>\n      }\n    >\n      {/* ---- Stats Overview ---- */}\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-5 mb-6\">\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3 text-center\">\n          <p className=\"text-2xl font-bold text-text-primary\">{notifications.length}</p>\n          <p className=\"text-xs text-text-secondary\">Total</p>\n        </div>\n        <div className=\"rounded-lg border border-blue-500/30 bg-blue-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-blue-600 dark:text-blue-400\">{unreadCount}</p>\n          <p className=\"text-xs text-text-secondary\">Unread</p>\n        </div>\n        <div className=\"rounded-lg border border-red-500/30 bg-red-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-red-600 dark:text-red-400\">{urgentCount}</p>\n          <p className=\"text-xs text-text-secondary\">Urgent</p>\n        </div>\n        <div className=\"rounded-lg border border-green-500/30 bg-green-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-green-600 dark:text-green-400\">{todayCount}</p>\n          <p className=\"text-xs text-text-secondary\">Today</p>\n        </div>\n        <div className=\"rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-yellow-600 dark:text-yellow-400\">{thisWeekCount}</p>\n          <p className=\"text-xs text-text-secondary\">This Week</p>\n        </div>\n      </div>\n\n      {/* ---- Tabs ---- */}\n      <div className=\"flex items-center gap-2 mb-4 overflow-x-auto pb-1\">\n        {tabs.map((tab) => {\n          const TabIcon = tab.icon;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.id)}\n              className={cn(\n                'flex items-center gap-1.5 whitespace-nowrap rounded-full border px-3 py-1.5 text-sm font-medium transition-colors',\n                activeTab === tab.id\n                  ? 'border-primary bg-action-primary-bg/10 text-text-primary'\n                  : 'border-border-subtle text-text-secondary hover:text-text-primary hover:border-accent-foreground/20'\n              )}\n            >\n              <TabIcon className=\"h-3.5 w-3.5\" />\n              {tab.label}\n              <span\n                className={cn(\n                  'inline-flex h-5 min-w-[20px] items-center justify-center rounded-full px-1 text-xs',\n                  activeTab === tab.id\n                    ? 'bg-action-primary-bg text-action-primary-text'\n                    : 'bg-bg-sunken text-text-secondary'\n                )}\n              >\n                {tabCounts[tab.id]}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n\n      {/* ---- Search & Sort ---- */}\n      <div className=\"flex items-center gap-3 mb-6\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <input\n            type=\"text\"\n            placeholder=\"Search notifications...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n          {searchQuery && (\n            <button\n              type=\"button\"\n              onClick={() => setSearchQuery('')}\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          )}\n        </div>\n\n        {/* Sort dropdown */}\n        <div className=\"relative\">\n          <button\n            type=\"button\"\n            onClick={() => setShowSortMenu(!showSortMenu)}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n          >\n            <ArrowUpDown className=\"h-4 w-4\" />\n            <span className=\"hidden sm:inline\">Sort</span>\n          </button>\n          {showSortMenu && (\n            <>\n              {/* Backdrop */}\n              <div className=\"fixed inset-0 z-10\" onClick={() => setShowSortMenu(false)} />\n              <div className=\"absolute right-0 top-full mt-1 z-20 w-44 rounded-lg border border-border-subtle bg-bg-surface shadow-lg py-1\">\n                {(\n                  [\n                    { value: 'recent', label: 'Most Recent' },\n                    { value: 'priority', label: 'By Priority' },\n                    { value: 'unread', label: 'Unread First' },\n                  ] as const\n                ).map((opt) => (\n                  <button\n                    key={opt.value}\n                    type=\"button\"\n                    onClick={() => {\n                      setSortBy(opt.value);\n                      setShowSortMenu(false);\n                    }}\n                    className={cn(\n                      'w-full text-left px-3 py-2 text-sm transition-colors',\n                      sortBy === opt.value\n                        ? 'bg-action-primary-bg/10 text-text-primary font-medium'\n                        : 'text-text-secondary hover:bg-accent hover:text-text-primary'\n                    )}\n                  >\n                    {opt.label}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* ---- Notification List ---- */}\n      {filteredNotifications.length === 0 ? (\n        <EmptyState\n          icon={<Bell className=\"h-12 w-12\" />}\n          title=\"No notifications\"\n          description={\n            searchQuery\n              ? 'No notifications match your search. Try different keywords.'\n              : activeTab === 'unread'\n                ? \"You're all caught up! No unread notifications.\"\n                : 'No notifications in this category yet.'\n          }\n          action={\n            searchQuery ? (\n              <button\n                type=\"button\"\n                onClick={() => setSearchQuery('')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                Clear Search\n              </button>\n            ) : activeTab !== 'all' ? (\n              <button\n                type=\"button\"\n                onClick={() => setActiveTab('all')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                View All Notifications\n              </button>\n            ) : undefined\n          }\n        />\n      ) : (\n        <div className=\"space-y-6\">\n          {grouped.map((group) => (\n            <div key={group.label}>\n              {/* Date group header */}\n              <div className=\"flex items-center gap-3 mb-2\">\n                <h3 className=\"text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                  {group.label}\n                </h3>\n                <div className=\"flex-1 border-t border-border-subtle\" />\n                <span className=\"text-xs text-text-secondary\">\n                  {group.items.length} notification{group.items.length !== 1 ? 's' : ''}\n                </span>\n              </div>\n\n              {/* Notification cards */}\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border overflow-hidden\">\n                {group.items.map((notif) => {\n                  const config = typeConfig[notif.type] ?? typeConfig.system;\n                  const NotifIcon = config.icon;\n\n                  return (\n                    <div\n                      key={notif.id}\n                      className={cn(\n                        'flex items-start gap-3 px-4 py-4 border-l-4 transition-colors',\n                        priorityBorderColors[notif.priority],\n                        !notif.isRead && 'bg-accent/30'\n                      )}\n                    >\n                      {/* Type icon */}\n                      <div\n                        className={cn(\n                          'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',\n                          config.bg\n                        )}\n                      >\n                        <NotifIcon className={cn('h-5 w-5', config.color)} />\n                      </div>\n\n                      {/* Content */}\n                      <div className=\"flex-1 min-w-0\">\n                        {/* Title row */}\n                        <div className=\"flex items-center gap-2 flex-wrap\">\n                          <h4\n                            className={cn(\n                              'text-sm text-text-primary',\n                              !notif.isRead ? 'font-semibold' : 'font-medium'\n                            )}\n                          >\n                            {notif.title}\n                          </h4>\n                          {!notif.isRead && (\n                            <span className=\"h-2 w-2 rounded-full bg-action-primary-bg shrink-0\" />\n                          )}\n                          <span\n                            className={cn(\n                              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                              priorityStyles[notif.priority]\n                            )}\n                          >\n                            {notif.priority}\n                          </span>\n                        </div>\n\n                        {/* Message */}\n                        <p className=\"mt-1 text-sm text-text-secondary leading-relaxed\">\n                          {notif.message}\n                        </p>\n\n                        {/* Metadata row */}\n                        <div className=\"mt-2 flex items-center gap-3 flex-wrap\">\n                          <span className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                            <Clock className=\"h-3 w-3\" />\n                            {formatRelativeTime(notif.createdAt)}\n                          </span>\n                          <span\n                            className={cn(\n                              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                              config.bg,\n                              config.color\n                            )}\n                          >\n                            {config.label}\n                          </span>\n                          {notif.metadata?.orderId && (\n                            <span className=\"text-xs text-text-secondary\">\n                              #{notif.metadata.orderId}\n                            </span>\n                          )}\n                        </div>\n\n                        {/* Action buttons row */}\n                        <div className=\"mt-3 flex items-center gap-2 flex-wrap\">\n                          {notif.actionUrl && (\n                            <button\n                              type=\"button\"\n                              onClick={() => handleAction(notif)}\n                              className=\"rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n                            >\n                              {notif.actionText ?? 'View'}\n                            </button>\n                          )}\n                          {!notif.isRead && (\n                            <button\n                              type=\"button\"\n                              onClick={() => markAsRead(notif.id)}\n                              title=\"Mark as read\"\n                              className=\"flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n                            >\n                              <Check className=\"h-3 w-3\" />\n                              Mark Read\n                            </button>\n                          )}\n                          <button\n                            type=\"button\"\n                            onClick={() => deleteNotification(notif.id)}\n                            title=\"Delete notification\"\n                            className=\"flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors\"\n                          >\n                            <Trash2 className=\"h-3 w-3\" />\n                            Delete\n                          </button>\n                        </div>\n                      </div>\n\n                      {/* Read/unread indicator */}\n                      <div className=\"shrink-0 pt-1\">\n                        {notif.isRead ? (\n                          <MailOpen className=\"h-4 w-4 text-text-secondary/40\" />\n                        ) : (\n                          <Bell className=\"h-4 w-4 text-primary\" />\n                        )}\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* ---- Footer summary ---- */}\n      {filteredNotifications.length > 0 && (\n        <div className=\"mt-6 flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface px-4 py-3\">\n          <p className=\"text-sm text-text-secondary\">\n            Showing {filteredNotifications.length} of {notifications.length} notifications\n          </p>\n          {activeTab !== 'all' && (\n            <button\n              type=\"button\"\n              onClick={() => {\n                setActiveTab('all');\n                setSearchQuery('');\n              }}\n              className=\"flex items-center gap-1.5 text-sm font-medium text-primary hover:underline\"\n            >\n              <RefreshCw className=\"h-3.5 w-3.5\" />\n              Show All\n            </button>\n          )}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"NotificationCenterPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/common/NotificationCenterPage.tsx"],"sourcesContent":["/**\n * Notification Center Page\n * @module atheletebridge/pages/common\n *\n * Full-featured notification center with tab filters (All, Orders,\n * Promotions, System, Unread), date grouping (Today, Yesterday, Earlier),\n * mark-as-read / mark-all-as-read, delete notification, search,\n * type/priority badges, action buttons, stats overview, and empty states.\n */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport {\n  Bell,\n  ShoppingBag,\n  TrendingUp,\n  Star,\n  AlertCircle,\n  CheckCircle2,\n  CreditCard,\n  Users,\n  AlertTriangle,\n  Megaphone,\n  Check,\n  CheckCheck,\n  Trash2,\n  Search,\n  X,\n  MailOpen,\n  Clock,\n  Truck,\n  UserCheck,\n  Inbox,\n  RefreshCw,\n  SlidersHorizontal,\n  ArrowUpDown,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { cn } from '../../utils/cn';\nimport { formatRelativeTime } from '../../utils/formatters';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype NotificationType =\n  | 'order_update'\n  | 'payment'\n  | 'promotion'\n  | 'system'\n  | 'review'\n  | 'staff'\n  | 'investment'\n  | 'alert'\n  | 'delivery'\n  | 'account';\n\ntype NotificationPriority = 'low' | 'medium' | 'high' | 'urgent';\n\ntype TabId = 'all' | 'orders' | 'promotions' | 'system' | 'unread';\n\ntype SortOption = 'recent' | 'priority' | 'unread';\n\ninterface Notification {\n  id: string;\n  type: NotificationType;\n  title: string;\n  message: string;\n  priority: NotificationPriority;\n  isRead: boolean;\n  createdAt: string;\n  actionUrl?: string;\n  actionText?: string;\n  metadata?: {\n    orderId?: string;\n    cartId?: string;\n    amount?: number;\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Mock notifications (14 items, rich variety)\n// ---------------------------------------------------------------------------\n\nconst initialNotifications: Notification[] = [\n  {\n    id: 'n-001',\n    type: 'order_update',\n    title: 'Order Delivered Successfully!',\n    message:\n      'Your order #ORD-001 from Dosa Express has been delivered. Rate your experience to help others!',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 8 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/order/ORD-001',\n    actionText: 'Rate Order',\n    metadata: { orderId: 'ORD-001', cartId: 'FOOD-001' },\n  },\n  {\n    id: 'n-002',\n    type: 'payment',\n    title: 'Payment Confirmed',\n    message:\n      'Your payment of \\u20B9495 for order #ORD-002 at Quick Cuts Salon has been processed successfully.',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 35 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-002', amount: 495 },\n  },\n  {\n    id: 'n-003',\n    type: 'promotion',\n    title: '20% Off Beauty Services This Weekend!',\n    message:\n      \"Glow Beauty Services is offering 20% off on all treatments this weekend only. Don't miss out!\",\n    priority: 'low',\n    isRead: false,\n    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/cart/SERV-002',\n    actionText: 'Book Now',\n    metadata: { cartId: 'SERV-002' },\n  },\n  {\n    id: 'n-004',\n    type: 'review',\n    title: 'New Review Response',\n    message:\n      'Dosa Express replied to your review: \"Thank you so much for your kind words! We hope to serve you again soon.\"',\n    priority: 'low',\n    isRead: false,\n    createdAt: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/reviews',\n    actionText: 'View Reply',\n  },\n  {\n    id: 'n-005',\n    type: 'system',\n    title: 'App Update Available',\n    message:\n      'Version 2.4.0 of AthleteBridge is available with improved performance, new category filters, and bug fixes.',\n    priority: 'medium',\n    isRead: false,\n    createdAt: new Date(Date.now() - 7 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/settings',\n    actionText: 'Update Now',\n  },\n  {\n    id: 'n-006',\n    type: 'order_update',\n    title: 'Appointment Confirmed',\n    message:\n      'Your appointment at Quick Cuts Salon has been confirmed for tomorrow at 3:00 PM. The stylist Suresh will be serving you.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/order/ORD-002',\n    actionText: 'View Details',\n    metadata: { orderId: 'ORD-002' },\n  },\n  {\n    id: 'n-007',\n    type: 'investment',\n    title: 'Monthly Returns Credited',\n    message:\n      'You received \\u20B91,250 in monthly returns from your Quick Cuts Salon investment. Total portfolio value: \\u20B92,12,500.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/investor/portfolio',\n    actionText: 'View Portfolio',\n    metadata: { amount: 1250 },\n  },\n  {\n    id: 'n-008',\n    type: 'delivery',\n    title: 'Delivery Worker Assigned',\n    message:\n      'Ravi Kumar (rated 4.8) has been assigned to deliver your order from Biryani Pot. Estimated arrival: 25 minutes.',\n    priority: 'high',\n    isRead: true,\n    createdAt: new Date(Date.now() - 1.5 * 24 * 60 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-003' },\n  },\n  {\n    id: 'n-009',\n    type: 'alert',\n    title: 'Unusual Login Attempt Detected',\n    message:\n      'We detected a login attempt from a new device in Mumbai. If this was not you, please change your password immediately.',\n    priority: 'urgent',\n    isRead: true,\n    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/settings',\n    actionText: 'Review Activity',\n  },\n  {\n    id: 'n-010',\n    type: 'promotion',\n    title: 'Flash Sale: Mobile Accessories',\n    message:\n      'Gadget Zone Brigade is running a flash sale! Up to 30% off on bluetooth headphones, cases, and chargers.',\n    priority: 'low',\n    isRead: true,\n    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/customer/cart/RETAIL-003',\n    actionText: 'Shop Now',\n    metadata: { cartId: 'RETAIL-003' },\n  },\n  {\n    id: 'n-011',\n    type: 'system',\n    title: 'Scheduled Platform Maintenance',\n    message:\n      'Platform maintenance is scheduled for Sunday 2:00 AM - 4:00 AM IST. Some services may be briefly unavailable during this window.',\n    priority: 'high',\n    isRead: true,\n    createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'n-012',\n    type: 'account',\n    title: 'KYC Verification Complete',\n    message:\n      'Your KYC verification has been completed successfully. You now have full access to all platform features including investments.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),\n  },\n  {\n    id: 'n-013',\n    type: 'staff',\n    title: 'Staff Schedule Updated',\n    message:\n      'Priya Sharma has updated her availability for this week. She will be unavailable on Wednesday and Thursday.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),\n    actionUrl: '/owner/staff',\n    actionText: 'View Schedule',\n  },\n  {\n    id: 'n-014',\n    type: 'payment',\n    title: 'Refund Processed',\n    message:\n      'Your refund of \\u20B9280 for order #ORD-005 has been processed. The amount will reflect in your account within 3-5 business days.',\n    priority: 'medium',\n    isRead: true,\n    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),\n    metadata: { orderId: 'ORD-005', amount: 280 },\n  },\n];\n\n// ---------------------------------------------------------------------------\n// Type icon/color configuration\n// ---------------------------------------------------------------------------\n\nconst typeConfig: Record<string, { icon: typeof Bell; color: string; bg: string; label: string }> =\n  {\n    order_update: {\n      icon: ShoppingBag,\n      color: 'text-blue-600 dark:text-blue-400',\n      bg: 'bg-blue-500/10',\n      label: 'Order',\n    },\n    payment: {\n      icon: CreditCard,\n      color: 'text-green-600 dark:text-green-400',\n      bg: 'bg-green-500/10',\n      label: 'Payment',\n    },\n    promotion: {\n      icon: Megaphone,\n      color: 'text-orange-600 dark:text-orange-400',\n      bg: 'bg-orange-500/10',\n      label: 'Promo',\n    },\n    system: {\n      icon: AlertCircle,\n      color: 'text-purple-600 dark:text-purple-400',\n      bg: 'bg-purple-500/10',\n      label: 'System',\n    },\n    review: {\n      icon: Star,\n      color: 'text-yellow-600 dark:text-yellow-400',\n      bg: 'bg-yellow-500/10',\n      label: 'Review',\n    },\n    staff: {\n      icon: Users,\n      color: 'text-indigo-600 dark:text-indigo-400',\n      bg: 'bg-indigo-500/10',\n      label: 'Staff',\n    },\n    investment: {\n      icon: TrendingUp,\n      color: 'text-emerald-600 dark:text-emerald-400',\n      bg: 'bg-emerald-500/10',\n      label: 'Investment',\n    },\n    alert: {\n      icon: AlertTriangle,\n      color: 'text-red-600 dark:text-red-400',\n      bg: 'bg-red-500/10',\n      label: 'Alert',\n    },\n    delivery: {\n      icon: Truck,\n      color: 'text-cyan-600 dark:text-cyan-400',\n      bg: 'bg-cyan-500/10',\n      label: 'Delivery',\n    },\n    account: {\n      icon: UserCheck,\n      color: 'text-teal-600 dark:text-teal-400',\n      bg: 'bg-teal-500/10',\n      label: 'Account',\n    },\n  };\n\n// ---------------------------------------------------------------------------\n// Priority styling\n// ---------------------------------------------------------------------------\n\nconst priorityStyles: Record<NotificationPriority, string> = {\n  urgent: 'bg-red-500/20 text-red-600 dark:text-red-400',\n  high: 'bg-orange-500/20 text-orange-600 dark:text-orange-400',\n  medium: 'bg-blue-500/20 text-blue-600 dark:text-blue-400',\n  low: 'bg-bg-sunken text-text-secondary',\n};\n\nconst priorityBorderColors: Record<NotificationPriority, string> = {\n  urgent: 'border-l-red-500',\n  high: 'border-l-orange-500',\n  medium: 'border-l-blue-500',\n  low: 'border-l-border',\n};\n\nconst priorityOrder: Record<NotificationPriority, number> = {\n  urgent: 4,\n  high: 3,\n  medium: 2,\n  low: 1,\n};\n\n// ---------------------------------------------------------------------------\n// Tab definitions\n// ---------------------------------------------------------------------------\n\nconst tabs: { id: TabId; label: string; icon: typeof Bell }[] = [\n  { id: 'all', label: 'All', icon: Inbox },\n  { id: 'orders', label: 'Orders', icon: ShoppingBag },\n  { id: 'promotions', label: 'Promotions', icon: Megaphone },\n  { id: 'system', label: 'System', icon: AlertCircle },\n  { id: 'unread', label: 'Unread', icon: Bell },\n];\n\n// ---------------------------------------------------------------------------\n// Date grouping helpers\n// ---------------------------------------------------------------------------\n\nfunction getDateGroup(dateStr: string): string {\n  const date = new Date(dateStr);\n  const now = new Date();\n  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n  const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);\n\n  if (date >= today) return 'Today';\n  if (date >= yesterday) return 'Yesterday';\n  return 'Earlier';\n}\n\nfunction groupByDate(items: Notification[]): { label: string; items: Notification[] }[] {\n  const groups: { label: string; items: Notification[] }[] = [];\n  const map = new Map<string, Notification[]>();\n  const order = ['Today', 'Yesterday', 'Earlier'];\n\n  for (const n of items) {\n    const group = getDateGroup(n.createdAt);\n    if (!map.has(group)) map.set(group, []);\n    map.get(group)!.push(n);\n  }\n\n  for (const label of order) {\n    const items = map.get(label);\n    if (items && items.length > 0) {\n      groups.push({ label, items });\n    }\n  }\n\n  return groups;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function NotificationCenterPage() {\n  const { navigateTo } = useAthleteBridge();\n  const [notifications, setNotifications] = useState<Notification[]>(initialNotifications);\n  const [activeTab, setActiveTab] = useState<TabId>('all');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [sortBy, setSortBy] = useState<SortOption>('recent');\n  const [showSortMenu, setShowSortMenu] = useState(false);\n\n  // ---------------------------------------------------------------------------\n  // Derived counts\n  // ---------------------------------------------------------------------------\n\n  const unreadCount = useMemo(() => notifications.filter((n) => !n.isRead).length, [notifications]);\n\n  const urgentCount = useMemo(\n    () => notifications.filter((n) => n.priority === 'urgent').length,\n    [notifications]\n  );\n\n  const todayCount = useMemo(\n    () => notifications.filter((n) => getDateGroup(n.createdAt) === 'Today').length,\n    [notifications]\n  );\n\n  const thisWeekCount = useMemo(() => {\n    const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);\n    return notifications.filter((n) => new Date(n.createdAt) >= weekAgo).length;\n  }, [notifications]);\n\n  const tabCounts = useMemo(() => {\n    const counts: Record<TabId, number> = {\n      all: 0,\n      orders: 0,\n      promotions: 0,\n      system: 0,\n      unread: 0,\n    };\n    for (const n of notifications) {\n      counts.all++;\n      if (!n.isRead) counts.unread++;\n      if (n.type === 'order_update' || n.type === 'delivery') counts.orders++;\n      if (n.type === 'promotion') counts.promotions++;\n      if (n.type === 'system' || n.type === 'alert' || n.type === 'account') counts.system++;\n    }\n    return counts;\n  }, [notifications]);\n\n  // ---------------------------------------------------------------------------\n  // Filtered & sorted list\n  // ---------------------------------------------------------------------------\n\n  const filteredNotifications = useMemo(() => {\n    let list = [...notifications];\n\n    // Tab filter\n    switch (activeTab) {\n      case 'orders':\n        list = list.filter((n) => n.type === 'order_update' || n.type === 'delivery');\n        break;\n      case 'promotions':\n        list = list.filter((n) => n.type === 'promotion');\n        break;\n      case 'system':\n        list = list.filter(\n          (n) => n.type === 'system' || n.type === 'alert' || n.type === 'account'\n        );\n        break;\n      case 'unread':\n        list = list.filter((n) => !n.isRead);\n        break;\n    }\n\n    // Search filter\n    if (searchQuery) {\n      const q = searchQuery.toLowerCase();\n      list = list.filter(\n        (n) => n.title.toLowerCase().includes(q) || n.message.toLowerCase().includes(q)\n      );\n    }\n\n    // Sort\n    switch (sortBy) {\n      case 'recent':\n        list.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());\n        break;\n      case 'priority':\n        list.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]);\n        break;\n      case 'unread':\n        list.sort((a, b) => (a.isRead === b.isRead ? 0 : a.isRead ? 1 : -1));\n        break;\n    }\n\n    return list;\n  }, [notifications, activeTab, searchQuery, sortBy]);\n\n  // Grouped by date\n  const grouped = useMemo(() => groupByDate(filteredNotifications), [filteredNotifications]);\n\n  // ---------------------------------------------------------------------------\n  // Actions\n  // ---------------------------------------------------------------------------\n\n  const markAsRead = useCallback((id: string) => {\n    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, isRead: true } : n)));\n  }, []);\n\n  const markAllAsRead = useCallback(() => {\n    setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })));\n  }, []);\n\n  const deleteNotification = useCallback((id: string) => {\n    setNotifications((prev) => prev.filter((n) => n.id !== id));\n  }, []);\n\n  const handleAction = useCallback(\n    (notif: Notification) => {\n      if (!notif.isRead) markAsRead(notif.id);\n      if (notif.actionUrl) navigateTo(notif.actionUrl);\n    },\n    [markAsRead, navigateTo]\n  );\n\n  const clearAll = useCallback(() => {\n    if (window.confirm('Are you sure you want to clear all notifications?')) {\n      setNotifications([]);\n    }\n  }, []);\n\n  // ---------------------------------------------------------------------------\n  // Render\n  // ---------------------------------------------------------------------------\n\n  return (\n    <PageLayout\n      title=\"Notifications\"\n      description={\n        unreadCount > 0\n          ? `${unreadCount} unread notification${unreadCount !== 1 ? 's' : ''}`\n          : 'All caught up!'\n      }\n      actions={\n        <div className=\"flex items-center gap-2\">\n          {notifications.length > 0 && (\n            <button\n              type=\"button\"\n              onClick={clearAll}\n              className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-accent transition-colors\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              <span className=\"hidden sm:inline\">Clear All</span>\n            </button>\n          )}\n          {unreadCount > 0 && (\n            <button\n              type=\"button\"\n              onClick={markAllAsRead}\n              className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n            >\n              <CheckCheck className=\"h-4 w-4\" />\n              Mark All Read\n            </button>\n          )}\n        </div>\n      }\n    >\n      {/* ---- Stats Overview ---- */}\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-5 mb-6\">\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3 text-center\">\n          <p className=\"text-2xl font-bold text-text-primary\">{notifications.length}</p>\n          <p className=\"text-xs text-text-secondary\">Total</p>\n        </div>\n        <div className=\"rounded-lg border border-blue-500/30 bg-blue-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-blue-600 dark:text-blue-400\">{unreadCount}</p>\n          <p className=\"text-xs text-text-secondary\">Unread</p>\n        </div>\n        <div className=\"rounded-lg border border-red-500/30 bg-red-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-red-600 dark:text-red-400\">{urgentCount}</p>\n          <p className=\"text-xs text-text-secondary\">Urgent</p>\n        </div>\n        <div className=\"rounded-lg border border-green-500/30 bg-green-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-green-600 dark:text-green-400\">{todayCount}</p>\n          <p className=\"text-xs text-text-secondary\">Today</p>\n        </div>\n        <div className=\"rounded-lg border border-yellow-500/30 bg-yellow-500/5 p-3 text-center\">\n          <p className=\"text-2xl font-bold text-yellow-600 dark:text-yellow-400\">{thisWeekCount}</p>\n          <p className=\"text-xs text-text-secondary\">This Week</p>\n        </div>\n      </div>\n\n      {/* ---- Tabs ---- */}\n      <div className=\"flex items-center gap-2 mb-4 overflow-x-auto pb-1\">\n        {tabs.map((tab) => {\n          const TabIcon = tab.icon;\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              onClick={() => setActiveTab(tab.id)}\n              className={cn(\n                'flex items-center gap-1.5 whitespace-nowrap rounded-full border px-3 py-1.5 text-sm font-medium transition-colors',\n                activeTab === tab.id\n                  ? 'border-primary bg-action-primary-bg/10 text-text-primary'\n                  : 'border-border-subtle text-text-secondary hover:text-text-primary hover:border-accent-foreground/20'\n              )}\n            >\n              <TabIcon className=\"h-3.5 w-3.5\" />\n              {tab.label}\n              <span\n                className={cn(\n                  'inline-flex h-5 min-w-[20px] items-center justify-center rounded-full px-1 text-xs',\n                  activeTab === tab.id\n                    ? 'bg-action-primary-bg text-action-primary-text'\n                    : 'bg-bg-sunken text-text-secondary'\n                )}\n              >\n                {tabCounts[tab.id]}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n\n      {/* ---- Search & Sort ---- */}\n      <div className=\"flex items-center gap-3 mb-6\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <input\n            type=\"text\"\n            placeholder=\"Search notifications...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-10 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n          {searchQuery && (\n            <button\n              type=\"button\"\n              onClick={() => setSearchQuery('')}\n              className=\"absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          )}\n        </div>\n\n        {/* Sort dropdown */}\n        <div className=\"relative\">\n          <button\n            type=\"button\"\n            onClick={() => setShowSortMenu(!showSortMenu)}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n          >\n            <ArrowUpDown className=\"h-4 w-4\" />\n            <span className=\"hidden sm:inline\">Sort</span>\n          </button>\n          {showSortMenu && (\n            <>\n              {/* Backdrop */}\n              <div className=\"fixed inset-0 z-10\" onClick={() => setShowSortMenu(false)} />\n              <div className=\"absolute right-0 top-full mt-1 z-20 w-44 rounded-lg border border-border-subtle bg-bg-surface shadow-lg py-1\">\n                {(\n                  [\n                    { value: 'recent', label: 'Most Recent' },\n                    { value: 'priority', label: 'By Priority' },\n                    { value: 'unread', label: 'Unread First' },\n                  ] as const\n                ).map((opt) => (\n                  <button\n                    key={opt.value}\n                    type=\"button\"\n                    onClick={() => {\n                      setSortBy(opt.value);\n                      setShowSortMenu(false);\n                    }}\n                    className={cn(\n                      'w-full text-left px-3 py-2 text-sm transition-colors',\n                      sortBy === opt.value\n                        ? 'bg-action-primary-bg/10 text-text-primary font-medium'\n                        : 'text-text-secondary hover:bg-accent hover:text-text-primary'\n                    )}\n                  >\n                    {opt.label}\n                  </button>\n                ))}\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* ---- Notification List ---- */}\n      {filteredNotifications.length === 0 ? (\n        <EmptyState\n          illustration=\"empty-notifications\"\n          icon={<Bell className=\"h-12 w-12\" />}\n          title=\"No notifications\"\n          description={\n            searchQuery\n              ? 'No notifications match your search. Try different keywords.'\n              : activeTab === 'unread'\n                ? \"You're all caught up! No unread notifications.\"\n                : 'No notifications in this category yet.'\n          }\n          action={\n            searchQuery ? (\n              <button\n                type=\"button\"\n                onClick={() => setSearchQuery('')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                Clear Search\n              </button>\n            ) : activeTab !== 'all' ? (\n              <button\n                type=\"button\"\n                onClick={() => setActiveTab('all')}\n                className=\"rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n              >\n                View All Notifications\n              </button>\n            ) : undefined\n          }\n        />\n      ) : (\n        <div className=\"space-y-6\">\n          {grouped.map((group) => (\n            <div key={group.label}>\n              {/* Date group header */}\n              <div className=\"flex items-center gap-3 mb-2\">\n                <h3 className=\"text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                  {group.label}\n                </h3>\n                <div className=\"flex-1 border-t border-border-subtle\" />\n                <span className=\"text-xs text-text-secondary\">\n                  {group.items.length} notification{group.items.length !== 1 ? 's' : ''}\n                </span>\n              </div>\n\n              {/* Notification cards */}\n              <div className=\"rounded-lg border border-border-subtle bg-bg-surface divide-y divide-border overflow-hidden\">\n                {group.items.map((notif) => {\n                  const config = typeConfig[notif.type] ?? typeConfig.system;\n                  const NotifIcon = config.icon;\n\n                  return (\n                    <div\n                      key={notif.id}\n                      className={cn(\n                        'flex items-start gap-3 px-4 py-4 border-l-4 transition-colors',\n                        priorityBorderColors[notif.priority],\n                        !notif.isRead && 'bg-accent/30'\n                      )}\n                    >\n                      {/* Type icon */}\n                      <div\n                        className={cn(\n                          'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',\n                          config.bg\n                        )}\n                      >\n                        <NotifIcon className={cn('h-5 w-5', config.color)} />\n                      </div>\n\n                      {/* Content */}\n                      <div className=\"flex-1 min-w-0\">\n                        {/* Title row */}\n                        <div className=\"flex items-center gap-2 flex-wrap\">\n                          <h4\n                            className={cn(\n                              'text-sm text-text-primary',\n                              !notif.isRead ? 'font-semibold' : 'font-medium'\n                            )}\n                          >\n                            {notif.title}\n                          </h4>\n                          {!notif.isRead && (\n                            <span className=\"h-2 w-2 rounded-full bg-action-primary-bg shrink-0\" />\n                          )}\n                          <span\n                            className={cn(\n                              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                              priorityStyles[notif.priority]\n                            )}\n                          >\n                            {notif.priority}\n                          </span>\n                        </div>\n\n                        {/* Message */}\n                        <p className=\"mt-1 text-sm text-text-secondary leading-relaxed\">\n                          {notif.message}\n                        </p>\n\n                        {/* Metadata row */}\n                        <div className=\"mt-2 flex items-center gap-3 flex-wrap\">\n                          <span className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                            <Clock className=\"h-3 w-3\" />\n                            {formatRelativeTime(notif.createdAt)}\n                          </span>\n                          <span\n                            className={cn(\n                              'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                              config.bg,\n                              config.color\n                            )}\n                          >\n                            {config.label}\n                          </span>\n                          {notif.metadata?.orderId && (\n                            <span className=\"text-xs text-text-secondary\">\n                              #{notif.metadata.orderId}\n                            </span>\n                          )}\n                        </div>\n\n                        {/* Action buttons row */}\n                        <div className=\"mt-3 flex items-center gap-2 flex-wrap\">\n                          {notif.actionUrl && (\n                            <button\n                              type=\"button\"\n                              onClick={() => handleAction(notif)}\n                              className=\"rounded-lg bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors\"\n                            >\n                              {notif.actionText ?? 'View'}\n                            </button>\n                          )}\n                          {!notif.isRead && (\n                            <button\n                              type=\"button\"\n                              onClick={() => markAsRead(notif.id)}\n                              title=\"Mark as read\"\n                              className=\"flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors\"\n                            >\n                              <Check className=\"h-3 w-3\" />\n                              Mark Read\n                            </button>\n                          )}\n                          <button\n                            type=\"button\"\n                            onClick={() => deleteNotification(notif.id)}\n                            title=\"Delete notification\"\n                            className=\"flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-error-text hover:bg-status-error-bg/10 transition-colors\"\n                          >\n                            <Trash2 className=\"h-3 w-3\" />\n                            Delete\n                          </button>\n                        </div>\n                      </div>\n\n                      {/* Read/unread indicator */}\n                      <div className=\"shrink-0 pt-1\">\n                        {notif.isRead ? (\n                          <MailOpen className=\"h-4 w-4 text-text-secondary/40\" />\n                        ) : (\n                          <Bell className=\"h-4 w-4 text-primary\" />\n                        )}\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* ---- Footer summary ---- */}\n      {filteredNotifications.length > 0 && (\n        <div className=\"mt-6 flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface px-4 py-3\">\n          <p className=\"text-sm text-text-secondary\">\n            Showing {filteredNotifications.length} of {notifications.length} notifications\n          </p>\n          {activeTab !== 'all' && (\n            <button\n              type=\"button\"\n              onClick={() => {\n                setActiveTab('all');\n                setSearchQuery('');\n              }}\n              className=\"flex items-center gap-1.5 text-sm font-medium text-primary hover:underline\"\n            >\n              <RefreshCw className=\"h-3.5 w-3.5\" />\n              Show All\n            </button>\n          )}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/atheletebridge/pages/customer/BookingDetailsPage.js

@@ -192,6 +192,7 @@ function D() {
 	if (!A) return /* @__PURE__ */ C(n, {
 		title: "Booking Not Found",
 		children: /* @__PURE__ */ C(i, {
+			illustration: "empty-generic",
 			icon: /* @__PURE__ */ C(f, { className: "h-12 w-12" }),
 			title: "Booking not found",
 			description: `No booking found with ID "${T}".`,