@burdenoff/microfe-coolandlovely 2026.614.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenterPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/common/NotificationCenterPage.tsx"],"sourcesContent":["/**\n * Notification Center Page\n * @module coolandlovely/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 { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\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 CoolAndLovely 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-muted text-muted-foreground',\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 } = useCoolAndLovely();\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 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground 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 px-3 py-2 text-sm font-medium text-foreground 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 bg-card p-3 text-center\">\n          <p className=\"text-2xl font-bold text-foreground\">{notifications.length}</p>\n          <p className=\"text-xs text-muted-foreground\">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-muted-foreground\">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-muted-foreground\">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-muted-foreground\">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-muted-foreground\">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-primary/10 text-foreground'\n                  : 'border-border text-muted-foreground hover:text-foreground 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-primary text-primary-foreground'\n                    : 'bg-muted text-muted-foreground'\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-muted-foreground\" />\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 bg-card py-2.5 pl-10 pr-9 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-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-muted-foreground hover:text-foreground\"\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 px-3 py-2.5 text-sm font-medium text-foreground 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 bg-card 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-primary/10 text-foreground font-medium'\n                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'\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 px-4 py-2 text-sm font-medium text-foreground 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 px-4 py-2 text-sm font-medium text-foreground 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-muted-foreground\">\n                  {group.label}\n                </h3>\n                <div className=\"flex-1 border-t border-border\" />\n                <span className=\"text-xs text-muted-foreground\">\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 bg-card 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-foreground',\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-primary 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-muted-foreground 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-muted-foreground\">\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-muted-foreground\">\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-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/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 px-3 py-1.5 text-xs font-medium text-foreground 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 px-3 py-1.5 text-xs font-medium text-destructive hover:bg-destructive/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-muted-foreground/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 bg-card px-4 py-3\">\n          <p className=\"text-sm text-muted-foreground\">\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/coolandlovely/pages/common/SettingsPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings Page
+ * @module coolandlovely/pages/common
+ *
+ * Full-featured settings with 5 tabs: Profile, Preferences, Security,
+ * Privacy, and Billing. Form validation, save state, sidebar navigation.
+ */
+export declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SettingsPage.d.ts.map

package/dist/coolandlovely/pages/common/SettingsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/common/SettingsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA8OH,wBAAgB,YAAY,4CA04B3B"}