@burdenoff/microfe-coolandlovely 2026.614.1

package/dist/coolandlovely/pages/customer/FavoritesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoritesPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/customer/FavoritesPage.tsx"],"sourcesContent":["/**\n * Favorites Page\n * @module coolandlovely/pages/customer\n *\n * Favorite carts AND products with stats header, 4 filters\n * (search, type, category, sort), Order Again / View Menu per cart,\n * Add to Cart / View Cart + remove per product, Veg badges,\n * prep time, 3 mock favorite products, 2 mock favorite carts.\n */\n\nimport { useState, useCallback, useEffect } from 'react';\nimport {\n  Heart,\n  Star,\n  MapPin,\n  Clock,\n  CheckCircle2,\n  Search,\n  ShoppingCart,\n  Leaf,\n  Utensils,\n  RotateCcw,\n  ListFilter,\n  X,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useProviders, useOrders } from '../../hooks/useCoolAndLovelyApi';\nimport { mockCarts } from '../../mocks/data';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency, formatDate, formatDistance } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface FavoriteCart {\n  id: string;\n  name: string;\n  description: string;\n  category: string;\n  image: string;\n  rating: number;\n  reviewCount: number;\n  isOpen: boolean;\n  isVerified: boolean;\n  distance: number;\n  estimatedTime: number;\n  addedToFavorites: string;\n  lastOrdered?: string;\n  totalOrders: number;\n  totalSpent: number;\n}\n\ninterface FavoriteProduct {\n  id: string;\n  name: string;\n  description: string;\n  price: number;\n  category: string;\n  image: string;\n  cartId: string;\n  cartName: string;\n  isVegetarian: boolean;\n  isVegan: boolean;\n  preparationTime: number;\n  rating: number;\n  addedToFavorites: string;\n  lastOrdered?: string;\n  orderCount: number;\n}\n\ninterface FavoriteFilters {\n  searchQuery: string;\n  type: 'all' | 'carts' | 'products';\n  category: string;\n  sortBy: 'recent' | 'name' | 'rating' | 'orders';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function FavoritesPage() {\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const { data: providers = [], isLoading: isLoadingProviders } = useProviders();\n  const { data: orders = [], isLoading: isLoadingOrders } = useOrders({\n    customerId: currentUser?.id,\n  });\n\n  const favoriteCarts: FavoriteCart[] = providers.slice(0, 2).map((p) => ({\n    id: p.id,\n    name: p.name,\n    description: 'Authentic services from CoolAndLovely',\n    category: p.category,\n    image: p.image,\n    rating: p.rating,\n    reviewCount: p.totalRatings,\n    isOpen: p.isOpen,\n    isVerified: p.isVerified || false,\n    distance: p.distance,\n    estimatedTime: p.estimatedTime,\n    addedToFavorites: new Date().toISOString(),\n    totalOrders: orders.filter((o) => o.cartId === p.id).length,\n    totalSpent: orders.filter((o) => o.cartId === p.id).reduce((acc, o) => acc + o.total, 0),\n  }));\n\n  const favoriteProducts: FavoriteProduct[] = [\n    {\n      id: 'prod-001',\n      name: 'Masala Dosa',\n      description: 'Crispy rice crepe with spiced potato filling',\n      price: 120,\n      category: 'South Indian',\n      image: 'https://images.unsplash.com/photo-1630383249896-424e482df921?w=300',\n      cartId: providers[0]?.id || 'FOOD-001',\n      cartName: providers[0]?.name || 'Dosa Express',\n      isVegetarian: true,\n      isVegan: false,\n      preparationTime: 15,\n      rating: 4.7,\n      addedToFavorites: '2024-02-20T12:30:00Z',\n      orderCount: 8,\n    },\n  ];\n\n  const [filters, setFilters] = useState<FavoriteFilters>({\n    searchQuery: '',\n    type: 'all',\n    category: '',\n    sortBy: 'recent',\n  });\n\n  const isLoading = isLoadingProviders || isLoadingOrders;\n\n  // --- Derived data ---\n  const getDisplayItems = useCallback(() => {\n    let carts = [...favoriteCarts];\n    let products = [...favoriteProducts];\n\n    // Search\n    if (filters.searchQuery) {\n      const q = filters.searchQuery.toLowerCase();\n      carts = carts.filter(\n        (c) =>\n          c.name.toLowerCase().includes(q) ||\n          c.description.toLowerCase().includes(q) ||\n          c.category.toLowerCase().includes(q)\n      );\n      products = products.filter(\n        (p) =>\n          p.name.toLowerCase().includes(q) ||\n          p.description.toLowerCase().includes(q) ||\n          p.category.toLowerCase().includes(q) ||\n          p.cartName.toLowerCase().includes(q)\n      );\n    }\n\n    // Category\n    if (filters.category) {\n      carts = carts.filter((c) => c.category === filters.category);\n      products = products.filter((p) => p.category === filters.category);\n    }\n\n    // Sort\n    switch (filters.sortBy) {\n      case 'recent':\n        carts.sort(\n          (a, b) => new Date(b.addedToFavorites).getTime() - new Date(a.addedToFavorites).getTime()\n        );\n        products.sort(\n          (a, b) => new Date(b.addedToFavorites).getTime() - new Date(a.addedToFavorites).getTime()\n        );\n        break;\n      case 'name':\n        carts.sort((a, b) => a.name.localeCompare(b.name));\n        products.sort((a, b) => a.name.localeCompare(b.name));\n        break;\n      case 'rating':\n        carts.sort((a, b) => b.rating - a.rating);\n        products.sort((a, b) => b.rating - a.rating);\n        break;\n      case 'orders':\n        carts.sort((a, b) => b.totalOrders - a.totalOrders);\n        products.sort((a, b) => b.orderCount - a.orderCount);\n        break;\n    }\n\n    // Type filter\n    if (filters.type === 'carts') return { carts, products: [] };\n    if (filters.type === 'products') return { carts: [], products };\n    return { carts, products };\n  }, [favoriteCarts, favoriteProducts, filters]);\n\n  const { carts: displayCarts, products: displayProducts } = getDisplayItems();\n\n  const handleRemoveCart = (id: string) => {\n    // In real app, this would call an API\n    console.log('Remove cart:', id);\n  };\n\n  const handleRemoveProduct = (id: string) => {\n    // In real app, this would call an API\n    console.log('Remove product:', id);\n  };\n\n  // Stats\n  const totalSaved =\n    favoriteCarts.reduce((s, c) => s + c.totalSpent, 0) +\n    favoriteProducts.reduce((s, p) => s + p.price * p.orderCount, 0);\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"My Favorites\">\n        <div className=\"flex items-center justify-center py-20\">\n          <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-foreground\" />\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout\n      title=\"My Favorites\"\n      description={`${favoriteCarts.length} carts, ${favoriteProducts.length} products`}\n    >\n      {/* Stats Header */}\n      <div className=\"flex flex-wrap items-center gap-4 text-sm text-muted-foreground mb-6\">\n        <span className=\"flex items-center gap-1.5\">\n          <ShoppingCart className=\"h-3.5 w-3.5\" />\n          {favoriteCarts.length} carts\n        </span>\n        <span className=\"flex items-center gap-1.5\">\n          <Utensils className=\"h-3.5 w-3.5\" />\n          {favoriteProducts.length} products\n        </span>\n        <span className=\"flex items-center gap-1.5\">\n          <Star className=\"h-3.5 w-3.5\" />\n          Total saved: {formatCurrency(totalSaved, { minimumFractionDigits: 0 })}\n        </span>\n      </div>\n\n      {/* Filters */}\n      <div className=\"rounded-lg border border-border bg-card p-4 mb-6\">\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\n          {/* Search */}\n          <div className=\"relative\">\n            <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n            <input\n              type=\"text\"\n              placeholder=\"Search favorites...\"\n              value={filters.searchQuery}\n              onChange={(e) => setFilters((p) => ({ ...p, searchQuery: e.target.value }))}\n              className=\"w-full rounded-lg border border-border bg-card py-2 pl-9 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n            />\n          </div>\n\n          {/* Type */}\n          <select\n            value={filters.type}\n            onChange={(e) =>\n              setFilters((p) => ({ ...p, type: e.target.value as FavoriteFilters['type'] }))\n            }\n            className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            <option value=\"all\">All Favorites</option>\n            <option value=\"carts\">Favorite Carts</option>\n            <option value=\"products\">Favorite Products</option>\n          </select>\n\n          {/* Category */}\n          <select\n            value={filters.category}\n            onChange={(e) => setFilters((p) => ({ ...p, category: e.target.value }))}\n            className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            <option value=\"\">All Categories</option>\n            <option value=\"Food & Beverage\">Food & Beverage</option>\n            <option value=\"Street Food\">Street Food</option>\n            <option value=\"South Indian\">South Indian</option>\n            <option value=\"Beverages\">Beverages</option>\n          </select>\n\n          {/* Sort */}\n          <select\n            value={filters.sortBy}\n            onChange={(e) =>\n              setFilters((p) => ({ ...p, sortBy: e.target.value as FavoriteFilters['sortBy'] }))\n            }\n            className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            <option value=\"recent\">Recently Added</option>\n            <option value=\"name\">Name A-Z</option>\n            <option value=\"rating\">Highest Rated</option>\n            <option value=\"orders\">Most Ordered</option>\n          </select>\n        </div>\n      </div>\n\n      {/* Content */}\n      {displayCarts.length === 0 && displayProducts.length === 0 ? (\n        <EmptyState\n          icon={<Heart className=\"h-12 w-12\" />}\n          title=\"No favorites yet\"\n          description=\"Browse carts and tap the heart icon to add them to your favorites.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/carts')}\n              className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n            >\n              Discover Carts\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"space-y-8\">\n          {/* Favorite Carts */}\n          {displayCarts.length > 0 && (\n            <section>\n              <h3 className=\"text-base font-semibold text-foreground mb-4 flex items-center gap-2\">\n                <ShoppingCart className=\"h-4 w-4 text-muted-foreground\" />\n                Favorite Carts ({displayCarts.length})\n              </h3>\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n                {displayCarts.map((cart) => (\n                  <div\n                    key={cart.id}\n                    className=\"rounded-lg border border-border bg-card shadow-sm overflow-hidden\"\n                  >\n                    {/* Image */}\n                    <div className=\"relative h-36 bg-muted\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n                        className=\"block h-full w-full\"\n                      >\n                        <img\n                          src={cart.image}\n                          alt={cart.name}\n                          className=\"h-full w-full object-cover\"\n                        />\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => handleRemoveCart(cart.id)}\n                        title=\"Remove from favorites\"\n                        className=\"absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-card/80 backdrop-blur-sm text-red-500 hover:bg-card transition-colors\"\n                      >\n                        <Heart className=\"h-4 w-4 fill-current\" />\n                      </button>\n                      <div className=\"absolute top-2 left-2\">\n                        <span\n                          className={cn(\n                            'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',\n                            cart.isOpen\n                              ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                              : 'bg-destructive/20 text-destructive'\n                          )}\n                        >\n                          {cart.isOpen ? 'Open' : 'Closed'}\n                        </span>\n                      </div>\n                    </div>\n\n                    {/* Details */}\n                    <div className=\"p-4\">\n                      <div className=\"flex items-start justify-between gap-2 mb-2\">\n                        <h4 className=\"text-sm font-semibold text-foreground truncate\">\n                          {cart.name}\n                        </h4>\n                        <div className=\"flex items-center gap-1 shrink-0\">\n                          <Star className=\"h-3.5 w-3.5 fill-yellow-400 text-yellow-400\" />\n                          <span className=\"text-xs font-medium text-foreground\">{cart.rating}</span>\n                          <span className=\"text-xs text-muted-foreground\">\n                            ({cart.reviewCount})\n                          </span>\n                        </div>\n                      </div>\n\n                      <p className=\"text-xs text-muted-foreground line-clamp-2 mb-3\">\n                        {cart.description}\n                      </p>\n\n                      <div className=\"space-y-1.5 text-xs text-muted-foreground\">\n                        <div className=\"flex justify-between\">\n                          <span>Added:</span>\n                          <span>\n                            {formatDate(cart.addedToFavorites, {\n                              hour: undefined,\n                              minute: undefined,\n                              hour12: undefined,\n                            })}\n                          </span>\n                        </div>\n                        <div className=\"flex justify-between\">\n                          <span>Total orders:</span>\n                          <span>{cart.totalOrders}</span>\n                        </div>\n                        <div className=\"flex justify-between\">\n                          <span>Total spent:</span>\n                          <span className=\"font-medium\">\n                            {formatCurrency(cart.totalSpent, { minimumFractionDigits: 0 })}\n                          </span>\n                        </div>\n                        {cart.lastOrdered && (\n                          <div className=\"flex justify-between\">\n                            <span>Last ordered:</span>\n                            <span>\n                              {formatDate(cart.lastOrdered, {\n                                hour: undefined,\n                                minute: undefined,\n                                hour12: undefined,\n                              })}\n                            </span>\n                          </div>\n                        )}\n                      </div>\n\n                      <div className=\"flex gap-2 mt-4\">\n                        <button\n                          type=\"button\"\n                          onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n                          className=\"flex-1 flex items-center justify-center gap-1.5 rounded-lg bg-foreground px-3 py-2 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n                        >\n                          <RotateCcw className=\"h-3 w-3\" />\n                          Order Again\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n                          className=\"flex-1 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground hover:bg-accent transition-colors\"\n                        >\n                          View Menu\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </section>\n          )}\n\n          {/* Favorite Products */}\n          {displayProducts.length > 0 && (\n            <section>\n              <h3 className=\"text-base font-semibold text-foreground mb-4 flex items-center gap-2\">\n                <Utensils className=\"h-4 w-4 text-muted-foreground\" />\n                Favorite Products ({displayProducts.length})\n              </h3>\n              <div className=\"space-y-3\">\n                {displayProducts.map((product) => (\n                  <div key={product.id} className=\"rounded-lg border border-border bg-card p-4\">\n                    <div className=\"flex flex-col sm:flex-row sm:items-center gap-4\">\n                      {/* Image */}\n                      <img\n                        src={product.image}\n                        alt={product.name}\n                        className=\"w-20 h-20 rounded-lg object-cover shrink-0 mx-auto sm:mx-0\"\n                      />\n\n                      {/* Info */}\n                      <div className=\"flex-1 min-w-0\">\n                        <div className=\"flex items-start justify-between gap-2 mb-1\">\n                          <h4 className=\"text-sm font-semibold text-foreground\">{product.name}</h4>\n                          <div className=\"flex items-center gap-2 shrink-0\">\n                            <span className=\"text-base font-bold text-foreground\">\n                              {formatCurrency(product.price, { minimumFractionDigits: 0 })}\n                            </span>\n                            <button\n                              type=\"button\"\n                              onClick={() => handleRemoveProduct(product.id)}\n                              title=\"Remove from favorites\"\n                              className=\"rounded-md p-1 text-red-500 hover:bg-destructive/10 transition-colors\"\n                            >\n                              <X className=\"h-4 w-4\" />\n                            </button>\n                          </div>\n                        </div>\n\n                        <p className=\"text-xs text-muted-foreground mb-2\">{product.description}</p>\n\n                        <div className=\"flex flex-wrap items-center gap-2 text-xs text-muted-foreground mb-2\">\n                          <span>\n                            From:{' '}\n                            <span className=\"font-medium text-foreground\">{product.cartName}</span>\n                          </span>\n                          <span>Ordered {product.orderCount} times</span>\n                          <span>\n                            Added:{' '}\n                            {formatDate(product.addedToFavorites, {\n                              hour: undefined,\n                              minute: undefined,\n                              hour12: undefined,\n                            })}\n                          </span>\n                        </div>\n\n                        <div className=\"flex flex-wrap items-center gap-2\">\n                          {product.isVegetarian && (\n                            <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n                              <Leaf className=\"h-3 w-3\" />\n                              Veg\n                            </span>\n                          )}\n                          {product.isVegan && (\n                            <span className=\"inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-[10px] font-medium text-green-600 dark:text-green-400\">\n                              <Leaf className=\"h-3 w-3\" />\n                              Vegan\n                            </span>\n                          )}\n                          <span className=\"inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n                            <Clock className=\"h-3 w-3\" />\n                            {product.preparationTime} min\n                          </span>\n                        </div>\n                      </div>\n\n                      {/* Actions */}\n                      <div className=\"flex sm:flex-col gap-2 shrink-0\">\n                        <button\n                          type=\"button\"\n                          onClick={() => navigateTo(`/customer/carts/${product.cartId}`)}\n                          className=\"flex-1 sm:flex-none rounded-lg bg-foreground px-4 py-2 text-xs font-medium text-background hover:opacity-90 transition-opacity whitespace-nowrap\"\n                        >\n                          Add to Cart\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => navigateTo(`/customer/carts/${product.cartId}`)}\n                          className=\"flex-1 sm:flex-none rounded-lg border border-border px-4 py-2 text-xs font-medium text-foreground hover:bg-accent transition-colors whitespace-nowrap\"\n                        >\n                          View Cart\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </section>\n          )}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/customer/OrderHistoryPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Order History Page
+ * @module coolandlovely/pages/customer
+ *
+ * Full list of customer orders with stats summary, search, status/date/sort
+ * filters, rating display, reorder, cancellation reason, and Load More pagination.
+ */
+export declare function OrderHistoryPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrderHistoryPage.d.ts.map

package/dist/coolandlovely/pages/customer/OrderHistoryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderHistoryPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/customer/OrderHistoryPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAiEH,wBAAgB,gBAAgB,4CAmZ/B"}

package/dist/coolandlovely/pages/customer/OrderHistoryPage.js

@@ -0,0 +1,438 @@
+import { useCoolAndLovely as e } from "../../context/CoolAndLovelyContext.js";
+import { PageLayout as t } from "../../components/PageLayout.js";
+import { StatusBadge as n } from "../../components/StatusBadge.js";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useOrders as i } from "../../hooks/useCoolAndLovelyApi.js";
+import { formatCurrency as a, formatDate as o } from "../../utils/formatters.js";
+import { RatingDisplay as s } from "../../components/RatingDisplay.js";
+import { useMemo as c, useState as l } from "react";
+import { AlertCircle as u, CheckCircle2 as d, ChevronDown as f, Clock as p, Eye as m, Heart as h, IndianRupee as g, Loader2 as _, Package as v, RotateCcw as y, Search as b, ShoppingBag as x, Star as S, TrendingUp as C, Truck as w, XCircle as T } from "lucide-react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/coolandlovely/pages/customer/OrderHistoryPage.tsx
+var O = 10, k = [
+	{
+		value: "",
+		label: "All Status"
+	},
+	{
+		value: "pending",
+		label: "Pending"
+	},
+	{
+		value: "confirmed",
+		label: "Confirmed"
+	},
+	{
+		value: "preparing",
+		label: "Preparing"
+	},
+	{
+		value: "ready",
+		label: "Ready"
+	},
+	{
+		value: "out_for_delivery",
+		label: "Out for Delivery"
+	},
+	{
+		value: "delivered",
+		label: "Delivered"
+	},
+	{
+		value: "cancelled",
+		label: "Cancelled"
+	}
+], A = [
+	{
+		value: "7days",
+		label: "Last 7 Days"
+	},
+	{
+		value: "30days",
+		label: "Last 30 Days"
+	},
+	{
+		value: "90days",
+		label: "Last 90 Days"
+	},
+	{
+		value: "all",
+		label: "All Time"
+	}
+], j = [
+	{
+		value: "recent",
+		label: "Most Recent"
+	},
+	{
+		value: "oldest",
+		label: "Oldest First"
+	},
+	{
+		value: "amount_high",
+		label: "Amount: High to Low"
+	},
+	{
+		value: "amount_low",
+		label: "Amount: Low to High"
+	}
+];
+function M() {
+	let { navigateTo: M, currentUser: N } = e(), [P, F] = l(O), [I, L] = l({
+		status: "",
+		dateRange: "30days",
+		searchQuery: "",
+		sortBy: "recent"
+	}), { data: R = [], isLoading: z, isError: B } = i({ customerId: N?.id }), V = c(() => {
+		let e = R.length, t = R.reduce((e, t) => e + t.total, 0), n = e > 0 ? Math.round(t / e) : 0, r = R.filter((e) => new Date(e.orderDate) > /* @__PURE__ */ new Date(Date.now() - 10080 * 60 * 1e3)).length, i = {};
+		for (let e of R) i[e.cartName] = (i[e.cartName] || 0) + 1;
+		return {
+			totalOrders: e,
+			totalSpent: t,
+			averageOrderValue: n,
+			recentOrdersCount: r,
+			favoriteCart: Object.entries(i).sort((e, t) => t[1] - e[1])[0]?.[0] || "No orders yet"
+		};
+	}, [R]), H = c(() => {
+		let e = [...R];
+		if (I.status && (e = e.filter((e) => e.status === I.status)), I.dateRange !== "all") {
+			let t = /* @__PURE__ */ new Date(), n = /* @__PURE__ */ new Date();
+			switch (I.dateRange) {
+				case "7days":
+					n.setDate(t.getDate() - 7);
+					break;
+				case "30days":
+					n.setDate(t.getDate() - 30);
+					break;
+				case "90days":
+					n.setDate(t.getDate() - 90);
+					break;
+			}
+			e = e.filter((e) => new Date(e.orderDate) >= n);
+		}
+		if (I.searchQuery) {
+			let t = I.searchQuery.toLowerCase();
+			e = e.filter((e) => e.id.toLowerCase().includes(t) || e.cartName.toLowerCase().includes(t) || e.items.some((e) => e.name.toLowerCase().includes(t)));
+		}
+		switch (I.sortBy) {
+			case "recent":
+				e.sort((e, t) => new Date(t.orderDate).getTime() - new Date(e.orderDate).getTime());
+				break;
+			case "oldest":
+				e.sort((e, t) => new Date(e.orderDate).getTime() - new Date(t.orderDate).getTime());
+				break;
+			case "amount_high":
+				e.sort((e, t) => t.total - e.total);
+				break;
+			case "amount_low":
+				e.sort((e, t) => e.total - t.total);
+				break;
+		}
+		return e;
+	}, [R, I]), U = c(() => H.slice(0, P), [H, P]), W = P < H.length, G = (e, t) => {
+		L((n) => ({
+			...n,
+			[e]: t
+		})), F(O);
+	}, K = (e) => {
+		M(`/customer/cart/${e.cartId}`), alert("Add items to cart to reorder");
+	};
+	return z ? /* @__PURE__ */ E(t, {
+		title: "Order History",
+		description: "Loading your orders...",
+		children: /* @__PURE__ */ E("div", {
+			className: "flex h-[60vh] items-center justify-center",
+			children: /* @__PURE__ */ E(_, { className: "h-8 w-8 animate-spin text-primary" })
+		})
+	}) : B ? /* @__PURE__ */ E(t, {
+		title: "Order History",
+		description: "Error loading orders",
+		children: /* @__PURE__ */ D("div", {
+			className: "flex h-[60vh] flex-col items-center justify-center gap-4",
+			children: [
+				/* @__PURE__ */ E(u, { className: "h-12 w-12 text-destructive" }),
+				/* @__PURE__ */ E("h2", {
+					className: "text-xl font-semibold",
+					children: "Error loading your orders"
+				}),
+				/* @__PURE__ */ E("button", {
+					type: "button",
+					onClick: () => window.location.reload(),
+					className: "rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground",
+					children: "Retry"
+				})
+			]
+		})
+	}) : /* @__PURE__ */ D(t, {
+		title: "Order History",
+		description: "View all your past and current orders",
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-6",
+				children: [
+					/* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border bg-card p-3.5",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ E(v, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ E("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Total Orders"
+							})]
+						}), /* @__PURE__ */ E("p", {
+							className: "text-xl font-bold text-foreground",
+							children: V.totalOrders
+						})]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border bg-card p-3.5",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ E(g, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ E("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Total Spent"
+							})]
+						}), /* @__PURE__ */ E("p", {
+							className: "text-xl font-bold text-foreground",
+							children: a(V.totalSpent, { minimumFractionDigits: 0 })
+						})]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border bg-card p-3.5",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ E(C, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ E("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Average Order"
+							})]
+						}), /* @__PURE__ */ E("p", {
+							className: "text-xl font-bold text-foreground",
+							children: a(V.averageOrderValue, { minimumFractionDigits: 0 })
+						})]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border bg-card p-3.5",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ E(p, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ E("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Recent Orders"
+							})]
+						}), /* @__PURE__ */ E("p", {
+							className: "text-xl font-bold text-foreground",
+							children: V.recentOrdersCount
+						})]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "rounded-lg border border-border bg-card p-3.5 col-span-2 md:col-span-1",
+						children: [/* @__PURE__ */ D("div", {
+							className: "flex items-center gap-2 mb-1",
+							children: [/* @__PURE__ */ E(h, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ E("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Favorite Cart"
+							})]
+						}), /* @__PURE__ */ E("p", {
+							className: "text-sm font-bold text-foreground truncate",
+							children: V.favoriteCart
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "rounded-lg border border-border bg-card p-4 mb-6",
+				children: /* @__PURE__ */ D("div", {
+					className: "grid grid-cols-1 md:grid-cols-4 gap-3",
+					children: [
+						/* @__PURE__ */ D("div", {
+							className: "relative",
+							children: [/* @__PURE__ */ E(b, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ E("input", {
+								type: "text",
+								placeholder: "Search orders...",
+								value: I.searchQuery,
+								onChange: (e) => G("searchQuery", e.target.value),
+								className: "w-full rounded-lg border border-border bg-background pl-9 pr-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+							})]
+						}),
+						/* @__PURE__ */ E("select", {
+							value: I.status,
+							onChange: (e) => G("status", e.target.value),
+							className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+							children: k.map((e) => /* @__PURE__ */ E("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						}),
+						/* @__PURE__ */ E("select", {
+							value: I.dateRange,
+							onChange: (e) => G("dateRange", e.target.value),
+							className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+							children: A.map((e) => /* @__PURE__ */ E("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						}),
+						/* @__PURE__ */ E("select", {
+							value: I.sortBy,
+							onChange: (e) => G("sortBy", e.target.value),
+							className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+							children: j.map((e) => /* @__PURE__ */ E("option", {
+								value: e.value,
+								children: e.label
+							}, e.value))
+						})
+					]
+				})
+			}),
+			z ? /* @__PURE__ */ D("div", {
+				className: "flex flex-col items-center justify-center py-12 text-center",
+				children: [/* @__PURE__ */ E("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4" }), /* @__PURE__ */ E("p", {
+					className: "text-sm text-muted-foreground",
+					children: "Loading orders..."
+				})]
+			}) : U.length === 0 ? /* @__PURE__ */ E(r, {
+				icon: /* @__PURE__ */ E(x, { className: "h-12 w-12" }),
+				title: "No orders found",
+				description: I.searchQuery || I.status ? "Try adjusting your filters" : "You haven't placed any orders yet",
+				action: /* @__PURE__ */ E("button", {
+					type: "button",
+					onClick: () => M("/customer/carts"),
+					className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
+					children: "Start Ordering"
+				})
+			}) : /* @__PURE__ */ E("div", {
+				className: "space-y-4",
+				children: U.map((e) => /* @__PURE__ */ E("div", {
+					className: "rounded-lg border border-border bg-card hover:shadow-md transition-shadow",
+					children: /* @__PURE__ */ D("div", {
+						className: "p-4 md:p-5",
+						children: [
+							/* @__PURE__ */ D("div", {
+								className: "flex flex-col md:flex-row md:items-center justify-between mb-3",
+								children: [/* @__PURE__ */ D("div", {
+									className: "mb-3 md:mb-0",
+									children: [/* @__PURE__ */ D("div", {
+										className: "flex flex-col sm:flex-row sm:items-center gap-2",
+										children: [/* @__PURE__ */ E("h3", {
+											className: "text-base font-semibold text-foreground",
+											children: e.cartName
+										}), /* @__PURE__ */ E(n, { status: e.status })]
+									}), /* @__PURE__ */ D("p", {
+										className: "text-xs text-muted-foreground mt-1",
+										children: [
+											"Order #",
+											e.id,
+											" · ",
+											o(e.orderDate)
+										]
+									})]
+								}), /* @__PURE__ */ D("div", {
+									className: "flex flex-col sm:flex-row sm:items-center gap-2",
+									children: [/* @__PURE__ */ E("p", {
+										className: "text-lg font-bold text-foreground",
+										children: a(e.total, { minimumFractionDigits: 0 })
+									}), /* @__PURE__ */ D("div", {
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ D("button", {
+											type: "button",
+											onClick: () => M(`/customer/orders/${e.id}`),
+											className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent transition-colors",
+											children: [/* @__PURE__ */ E(m, { className: "h-3 w-3" }), "Track Order"]
+										}), e.status === "delivered" && /* @__PURE__ */ D("button", {
+											type: "button",
+											onClick: () => K(e),
+											className: "flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity",
+											children: [/* @__PURE__ */ E(y, { className: "h-3 w-3" }), "Reorder"]
+										})]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ E("div", {
+								className: "border-t border-border pt-3",
+								children: /* @__PURE__ */ D("div", {
+									className: "flex flex-wrap gap-1",
+									children: [e.items.slice(0, 3).map((t, n) => /* @__PURE__ */ D("span", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											t.name,
+											" (",
+											t.quantity,
+											")",
+											n < Math.min(2, e.items.length - 1) && ", "
+										]
+									}, n)), e.items.length > 3 && /* @__PURE__ */ D("span", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											"+",
+											e.items.length - 3,
+											" more items"
+										]
+									})]
+								})
+							}),
+							/* @__PURE__ */ D("div", {
+								className: "mt-3",
+								children: [
+									e.status === "delivered" && /* @__PURE__ */ D("div", {
+										className: "flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400",
+										children: [/* @__PURE__ */ E(d, { className: "h-3 w-3" }), /* @__PURE__ */ E("span", { children: "Order delivered successfully" })]
+									}),
+									e.status === "cancelled" && /* @__PURE__ */ D("div", {
+										className: "flex items-center gap-1.5 text-xs text-destructive",
+										children: [/* @__PURE__ */ E(T, { className: "h-3 w-3" }), /* @__PURE__ */ D("span", { children: ["Cancelled", e.cancellationReason && ` - ${e.cancellationReason}`] })]
+									}),
+									[
+										"pending",
+										"confirmed",
+										"preparing",
+										"ready",
+										"out_for_delivery"
+									].includes(e.status) && /* @__PURE__ */ D("div", {
+										className: "flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400",
+										children: [/* @__PURE__ */ E(w, { className: "h-3 w-3" }), /* @__PURE__ */ D("span", { children: [
+											"Estimated delivery by",
+											" ",
+											e.estimatedDeliveryTime ? o(e.estimatedDeliveryTime) : "TBD"
+										] })]
+									})
+								]
+							}),
+							e.status === "delivered" && /* @__PURE__ */ E("div", {
+								className: "mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2",
+								children: e.rating ? /* @__PURE__ */ D("div", {
+									className: "flex flex-col sm:flex-row sm:items-center gap-2",
+									children: [/* @__PURE__ */ E(s, { value: e.rating }), e.review && /* @__PURE__ */ D("p", {
+										className: "text-xs text-muted-foreground italic",
+										children: [
+											"“",
+											e.review,
+											"”"
+										]
+									})]
+								}) : /* @__PURE__ */ D("button", {
+									type: "button",
+									onClick: () => M(`/customer/orders/${e.id}/rate`),
+									className: "flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent transition-colors",
+									children: [/* @__PURE__ */ E(S, { className: "h-3 w-3" }), "Rate Order"]
+								})
+							})
+						]
+					})
+				}, e.id))
+			}),
+			W && !z && /* @__PURE__ */ E("div", {
+				className: "text-center mt-8",
+				children: /* @__PURE__ */ D("button", {
+					type: "button",
+					onClick: () => {
+						F((e) => e + O);
+					},
+					className: "inline-flex items-center gap-2 rounded-lg border border-border px-6 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors",
+					children: [/* @__PURE__ */ E(f, { className: "h-4 w-4" }), "Load More Orders"]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { M as OrderHistoryPage };
+
+//# sourceMappingURL=OrderHistoryPage.js.map

package/dist/coolandlovely/pages/customer/OrderHistoryPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderHistoryPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/customer/OrderHistoryPage.tsx"],"sourcesContent":["/**\n * Order History Page\n * @module coolandlovely/pages/customer\n *\n * Full list of customer orders with stats summary, search, status/date/sort\n * filters, rating display, reorder, cancellation reason, and Load More pagination.\n */\n\nimport { useState, useMemo, useCallback, useEffect } from 'react';\nimport {\n  ShoppingBag,\n  Search,\n  Star,\n  RotateCcw,\n  Eye,\n  ChevronDown,\n  Package,\n  IndianRupee,\n  TrendingUp,\n  Clock,\n  Heart,\n  CheckCircle2,\n  XCircle,\n  Truck,\n  Loader2,\n  AlertCircle,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { useCoolAndLovely } from '../../context/CoolAndLovelyContext';\nimport { useOrders } from '../../hooks/useCoolAndLovelyApi';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency, formatDate } from '../../utils/formatters';\nimport type { OrderStatus, MockOrder } from '../../types';\n\ninterface OrderFilters {\n  status: string;\n  dateRange: string;\n  searchQuery: string;\n  sortBy: string;\n}\n\nconst PAGE_SIZE = 10;\n\nconst statusOptions = [\n  { value: '', label: 'All Status' },\n  { value: 'pending', label: 'Pending' },\n  { value: 'confirmed', label: 'Confirmed' },\n  { value: 'preparing', label: 'Preparing' },\n  { value: 'ready', label: 'Ready' },\n  { value: 'out_for_delivery', label: 'Out for Delivery' },\n  { value: 'delivered', label: 'Delivered' },\n  { value: 'cancelled', label: 'Cancelled' },\n];\n\nconst dateRangeOptions = [\n  { value: '7days', label: 'Last 7 Days' },\n  { value: '30days', label: 'Last 30 Days' },\n  { value: '90days', label: 'Last 90 Days' },\n  { value: 'all', label: 'All Time' },\n];\n\nconst sortOptions = [\n  { value: 'recent', label: 'Most Recent' },\n  { value: 'oldest', label: 'Oldest First' },\n  { value: 'amount_high', label: 'Amount: High to Low' },\n  { value: 'amount_low', label: 'Amount: Low to High' },\n];\n\nexport function OrderHistoryPage() {\n  const { navigateTo, currentUser } = useCoolAndLovely();\n  const [displayCount, setDisplayCount] = useState(PAGE_SIZE);\n  const [filters, setFilters] = useState<OrderFilters>({\n    status: '',\n    dateRange: '30days',\n    searchQuery: '',\n    sortBy: 'recent',\n  });\n\n  const { data: allOrders = [], isLoading, isError } = useOrders({ customerId: currentUser?.id });\n\n  // Calculate stats from all orders\n  const orderStats = useMemo(() => {\n    const totalOrders = allOrders.length;\n    const totalSpent = allOrders.reduce((sum, o) => sum + o.total, 0);\n    const averageOrderValue = totalOrders > 0 ? Math.round(totalSpent / totalOrders) : 0;\n    const recentOrdersCount = allOrders.filter(\n      (o) => new Date(o.orderDate) > new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)\n    ).length;\n\n    // Find favorite cart (most ordered from)\n    const cartCounts: Record<string, number> = {};\n    for (const o of allOrders) {\n      cartCounts[o.cartName] = (cartCounts[o.cartName] || 0) + 1;\n    }\n    const favoriteCart =\n      Object.entries(cartCounts).sort((a, b) => b[1] - a[1])[0]?.[0] || 'No orders yet';\n\n    return { totalOrders, totalSpent, averageOrderValue, recentOrdersCount, favoriteCart };\n  }, [allOrders]);\n\n  // Filter and sort orders\n  const filteredOrders = useMemo(() => {\n    let orders = [...allOrders];\n\n    // Filter by status\n    if (filters.status) {\n      orders = orders.filter((o) => o.status === filters.status);\n    }\n\n    // Filter by date range\n    if (filters.dateRange !== 'all') {\n      const now = new Date();\n      const dateLimit = new Date();\n      switch (filters.dateRange) {\n        case '7days':\n          dateLimit.setDate(now.getDate() - 7);\n          break;\n        case '30days':\n          dateLimit.setDate(now.getDate() - 30);\n          break;\n        case '90days':\n          dateLimit.setDate(now.getDate() - 90);\n          break;\n      }\n      orders = orders.filter((o) => new Date(o.orderDate) >= dateLimit);\n    }\n\n    // Search filter\n    if (filters.searchQuery) {\n      const query = filters.searchQuery.toLowerCase();\n      orders = orders.filter(\n        (o) =>\n          o.id.toLowerCase().includes(query) ||\n          o.cartName.toLowerCase().includes(query) ||\n          o.items.some((item) => item.name.toLowerCase().includes(query))\n      );\n    }\n\n    // Sort\n    switch (filters.sortBy) {\n      case 'recent':\n        orders.sort((a, b) => new Date(b.orderDate).getTime() - new Date(a.orderDate).getTime());\n        break;\n      case 'oldest':\n        orders.sort((a, b) => new Date(a.orderDate).getTime() - new Date(b.orderDate).getTime());\n        break;\n      case 'amount_high':\n        orders.sort((a, b) => b.total - a.total);\n        break;\n      case 'amount_low':\n        orders.sort((a, b) => a.total - b.total);\n        break;\n    }\n\n    return orders;\n  }, [allOrders, filters]);\n\n  const displayedOrders = useMemo(\n    () => filteredOrders.slice(0, displayCount),\n    [filteredOrders, displayCount]\n  );\n\n  const hasMore = displayCount < filteredOrders.length;\n\n  const handleFilterChange = (key: keyof OrderFilters, value: string) => {\n    setFilters((prev) => ({ ...prev, [key]: value }));\n    setDisplayCount(PAGE_SIZE);\n  };\n\n  const handleReorder = (order: MockOrder) => {\n    navigateTo(`/customer/cart/${order.cartId}`);\n    alert('Add items to cart to reorder');\n  };\n\n  const handleLoadMore = () => {\n    setDisplayCount((prev) => prev + PAGE_SIZE);\n  };\n\n  if (isLoading) {\n    return (\n      <PageLayout title=\"Order History\" description=\"Loading your orders...\">\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=\"Order History\" description=\"Error loading orders\">\n        <div className=\"flex h-[60vh] flex-col items-center justify-center gap-4\">\n          <AlertCircle className=\"h-12 w-12 text-destructive\" />\n          <h2 className=\"text-xl font-semibold\">Error loading your orders</h2>\n          <button\n            type=\"button\"\n            onClick={() => window.location.reload()}\n            className=\"rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground\"\n          >\n            Retry\n          </button>\n        </div>\n      </PageLayout>\n    );\n  }\n\n  return (\n    <PageLayout title=\"Order History\" description=\"View all your past and current orders\">\n      {/* Stats Summary */}\n      <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 mb-6\">\n        <div className=\"rounded-lg border border-border bg-card p-3.5\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <Package className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            <p className=\"text-xs text-muted-foreground\">Total Orders</p>\n          </div>\n          <p className=\"text-xl font-bold text-foreground\">{orderStats.totalOrders}</p>\n        </div>\n        <div className=\"rounded-lg border border-border bg-card p-3.5\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <IndianRupee className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            <p className=\"text-xs text-muted-foreground\">Total Spent</p>\n          </div>\n          <p className=\"text-xl font-bold text-foreground\">\n            {formatCurrency(orderStats.totalSpent, { minimumFractionDigits: 0 })}\n          </p>\n        </div>\n        <div className=\"rounded-lg border border-border bg-card p-3.5\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <TrendingUp className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            <p className=\"text-xs text-muted-foreground\">Average Order</p>\n          </div>\n          <p className=\"text-xl font-bold text-foreground\">\n            {formatCurrency(orderStats.averageOrderValue, { minimumFractionDigits: 0 })}\n          </p>\n        </div>\n        <div className=\"rounded-lg border border-border bg-card p-3.5\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <Clock className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            <p className=\"text-xs text-muted-foreground\">Recent Orders</p>\n          </div>\n          <p className=\"text-xl font-bold text-foreground\">{orderStats.recentOrdersCount}</p>\n        </div>\n        <div className=\"rounded-lg border border-border bg-card p-3.5 col-span-2 md:col-span-1\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <Heart className=\"h-3.5 w-3.5 text-muted-foreground\" />\n            <p className=\"text-xs text-muted-foreground\">Favorite Cart</p>\n          </div>\n          <p className=\"text-sm font-bold text-foreground truncate\">{orderStats.favoriteCart}</p>\n        </div>\n      </div>\n\n      {/* Filters */}\n      <div className=\"rounded-lg border border-border bg-card p-4 mb-6\">\n        <div className=\"grid grid-cols-1 md:grid-cols-4 gap-3\">\n          {/* Search */}\n          <div className=\"relative\">\n            <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n            <input\n              type=\"text\"\n              placeholder=\"Search orders...\"\n              value={filters.searchQuery}\n              onChange={(e) => handleFilterChange('searchQuery', e.target.value)}\n              className=\"w-full rounded-lg border border-border bg-background pl-9 pr-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n            />\n          </div>\n\n          {/* Status Filter */}\n          <select\n            value={filters.status}\n            onChange={(e) => handleFilterChange('status', e.target.value)}\n            className=\"w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            {statusOptions.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </select>\n\n          {/* Date Range */}\n          <select\n            value={filters.dateRange}\n            onChange={(e) => handleFilterChange('dateRange', e.target.value)}\n            className=\"w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            {dateRangeOptions.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </select>\n\n          {/* Sort */}\n          <select\n            value={filters.sortBy}\n            onChange={(e) => handleFilterChange('sortBy', e.target.value)}\n            className=\"w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n          >\n            {sortOptions.map((opt) => (\n              <option key={opt.value} value={opt.value}>\n                {opt.label}\n              </option>\n            ))}\n          </select>\n        </div>\n      </div>\n\n      {/* Orders List */}\n      {isLoading ? (\n        <div className=\"flex flex-col items-center justify-center py-12 text-center\">\n          <div className=\"animate-spin rounded-full h-12 w-12 border-b-2 border-foreground mx-auto mb-4\" />\n          <p className=\"text-sm text-muted-foreground\">Loading orders...</p>\n        </div>\n      ) : displayedOrders.length === 0 ? (\n        <EmptyState\n          icon={<ShoppingBag className=\"h-12 w-12\" />}\n          title=\"No orders found\"\n          description={\n            filters.searchQuery || filters.status\n              ? 'Try adjusting your filters'\n              : \"You haven't placed any orders yet\"\n          }\n          action={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/customer/carts')}\n              className=\"rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n            >\n              Start Ordering\n            </button>\n          }\n        />\n      ) : (\n        <div className=\"space-y-4\">\n          {displayedOrders.map((order) => (\n            <div\n              key={order.id}\n              className=\"rounded-lg border border-border bg-card hover:shadow-md transition-shadow\"\n            >\n              <div className=\"p-4 md:p-5\">\n                {/* Order Header */}\n                <div className=\"flex flex-col md:flex-row md:items-center justify-between mb-3\">\n                  <div className=\"mb-3 md:mb-0\">\n                    <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n                      <h3 className=\"text-base font-semibold text-foreground\">{order.cartName}</h3>\n                      <StatusBadge status={order.status} />\n                    </div>\n                    <p className=\"text-xs text-muted-foreground mt-1\">\n                      Order #{order.id} &middot; {formatDate(order.orderDate)}\n                    </p>\n                  </div>\n                  <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n                    <p className=\"text-lg font-bold text-foreground\">\n                      {formatCurrency(order.total, { minimumFractionDigits: 0 })}\n                    </p>\n                    <div className=\"flex gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/customer/orders/${order.id}`)}\n                        className=\"flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent transition-colors\"\n                      >\n                        <Eye className=\"h-3 w-3\" />\n                        Track Order\n                      </button>\n                      {order.status === 'delivered' && (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleReorder(order)}\n                          className=\"flex items-center gap-1.5 rounded-lg bg-foreground px-3 py-1.5 text-xs font-medium text-background hover:opacity-90 transition-opacity\"\n                        >\n                          <RotateCcw className=\"h-3 w-3\" />\n                          Reorder\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Order Items Summary */}\n                <div className=\"border-t border-border pt-3\">\n                  <div className=\"flex flex-wrap gap-1\">\n                    {order.items.slice(0, 3).map((item, index) => (\n                      <span key={index} className=\"text-xs text-muted-foreground\">\n                        {item.name} ({item.quantity})\n                        {index < Math.min(2, order.items.length - 1) && ', '}\n                      </span>\n                    ))}\n                    {order.items.length > 3 && (\n                      <span className=\"text-xs text-muted-foreground\">\n                        +{order.items.length - 3} more items\n                      </span>\n                    )}\n                  </div>\n                </div>\n\n                {/* Status Message */}\n                <div className=\"mt-3\">\n                  {order.status === 'delivered' && (\n                    <div className=\"flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400\">\n                      <CheckCircle2 className=\"h-3 w-3\" />\n                      <span>Order delivered successfully</span>\n                    </div>\n                  )}\n                  {order.status === 'cancelled' && (\n                    <div className=\"flex items-center gap-1.5 text-xs text-destructive\">\n                      <XCircle className=\"h-3 w-3\" />\n                      <span>\n                        Cancelled{order.cancellationReason && ` - ${order.cancellationReason}`}\n                      </span>\n                    </div>\n                  )}\n                  {['pending', 'confirmed', 'preparing', 'ready', 'out_for_delivery'].includes(\n                    order.status\n                  ) && (\n                    <div className=\"flex items-center gap-1.5 text-xs text-blue-600 dark:text-blue-400\">\n                      <Truck className=\"h-3 w-3\" />\n                      <span>\n                        Estimated delivery by{' '}\n                        {order.estimatedDeliveryTime\n                          ? formatDate(order.estimatedDeliveryTime)\n                          : 'TBD'}\n                      </span>\n                    </div>\n                  )}\n                </div>\n\n                {/* Rating Section */}\n                {order.status === 'delivered' && (\n                  <div className=\"mt-3 flex flex-col sm:flex-row sm:items-center justify-between gap-2\">\n                    {order.rating ? (\n                      <div className=\"flex flex-col sm:flex-row sm:items-center gap-2\">\n                        <RatingDisplay value={order.rating} />\n                        {order.review && (\n                          <p className=\"text-xs text-muted-foreground italic\">\n                            &ldquo;{order.review}&rdquo;\n                          </p>\n                        )}\n                      </div>\n                    ) : (\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/customer/orders/${order.id}/rate`)}\n                        className=\"flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent transition-colors\"\n                      >\n                        <Star className=\"h-3 w-3\" />\n                        Rate Order\n                      </button>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Load More */}\n      {hasMore && !isLoading && (\n        <div className=\"text-center mt-8\">\n          <button\n            type=\"button\"\n            onClick={handleLoadMore}\n            className=\"inline-flex items-center gap-2 rounded-lg border border-border px-6 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors\"\n          >\n            <ChevronDown className=\"h-4 w-4\" />\n            Load More Orders\n          </button>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/coolandlovely/pages/customer/OrderTrackingPage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Order Tracking Page
+ * @module coolandlovely/pages/customer
+ *
+ * Real-time order tracking with status timeline, delivery partner info,
+ * price breakdown, Need Help sidebar, and rate order functionality.
+ */
+export declare function OrderTrackingPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OrderTrackingPage.d.ts.map

package/dist/coolandlovely/pages/customer/OrderTrackingPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderTrackingPage.d.ts","sourceRoot":"","sources":["../../../../src/coolandlovely/pages/customer/OrderTrackingPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAmEH,wBAAgB,iBAAiB,4CAqYhC"}