npm - @burdenoff/microfe-atheletebridge - Versions diffs - 2026.625.1 → 2026.626.1 - Mend

@burdenoff/microfe-atheletebridge 2026.625.1 → 2026.626.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/atheletebridge/pages/customer/OrderHistoryPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderHistoryPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/OrderHistoryPage.tsx"],"sourcesContent":["/*\n Order History Page\n * @module atheletebridge/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 { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { useOrders } from '../../hooks/useAthleteBridgeApi';\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 } = useAthleteBridge();\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-status-error-text\" />\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-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\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-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Package className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <IndianRupee className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Spent</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Average Order</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.averageOrderValue, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Clock className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Recent Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.recentOrdersCount}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface 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-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Favorite Cart</p>\n </div>\n <p className=\"text-sm font-bold text-text-primary truncate\">{orderStats.favoriteCart}</p>\n </div>\n </div>\n\n {/ Filters /}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface 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-text-secondary\" />\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-subtle bg-bg-surface pl-9 pr-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-text-secondary\">Loading orders...</p>\n </div>\n ) : displayedOrders.length === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\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-subtle bg-bg-surface 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-text-primary\">\n {order.cartName}\n </h3>\n <StatusBadge status={order.status} />\n </div>\n <p className=\"text-xs text-text-secondary mt-1\">\n Order #{order.id} · {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-text-primary\">\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-subtle px-3 py-1.5 text-xs font-medium text-text-primary 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-subtle 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-text-secondary\">\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-text-secondary\">\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-status-error-text\">\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-text-secondary italic\">\n “{order.review}”\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-subtle px-3 py-1.5 text-xs font-medium text-text-primary 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-subtle px-6 py-2.5 text-sm font-medium text-text-primary 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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"}
1	+ {"version":3,"file":"OrderHistoryPage.js","names":[],"sources":["../../../../src/atheletebridge/pages/customer/OrderHistoryPage.tsx"],"sourcesContent":["/*\n Order History Page\n * @module atheletebridge/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 { EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { EmptyState } from '../../components/EmptyState';\nimport { RatingDisplay } from '../../components/RatingDisplay';\nimport { useAthleteBridge } from '../../context/AthleteBridgeContext';\nimport { useOrders } from '../../hooks/useAthleteBridgeApi';\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 } = useAthleteBridge();\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-status-error-text\" />\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-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text\"\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 <PagePurpose className=\"mb-6\">\n A complete record of everything you've ordered. Review past and in-progress orders,\n see how much you've spent, reorder your favourites in one tap, and filter by status or\n date to find a specific order quickly.\n </PagePurpose>\n\n {/* Stats Summary /}\n <EmphasisPanel className=\"mb-6\">\n <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3\">\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Package className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.totalOrders}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <IndianRupee className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Total Spent</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.totalSpent, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <TrendingUp className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Average Order</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">\n {formatCurrency(orderStats.averageOrderValue, { minimumFractionDigits: 0 })}\n </p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3.5\">\n <div className=\"flex items-center gap-2 mb-1\">\n <Clock className=\"h-3.5 w-3.5 text-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Recent Orders</p>\n </div>\n <p className=\"text-xl font-bold text-text-primary\">{orderStats.recentOrdersCount}</p>\n </div>\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface 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-text-secondary\" />\n <p className=\"text-xs text-text-secondary\">Favorite Cart</p>\n </div>\n <p className=\"text-sm font-bold text-text-primary truncate\">{orderStats.favoriteCart}</p>\n </div>\n </div>\n </EmphasisPanel>\n\n {/ Filters /}\n <div className=\"rounded-lg border border-border-subtle bg-bg-surface 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-text-secondary\" />\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-subtle bg-bg-surface pl-9 pr-3 py-2.5 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n </div>\n\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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2.5 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-text-secondary\">Loading orders...</p>\n </div>\n ) : displayedOrders.length === 0 ? (\n <EmptyState\n illustration=\"empty-data\"\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-subtle bg-bg-surface 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-text-primary\">\n {order.cartName}\n </h3>\n <StatusBadge status={order.status} />\n </div>\n <p className=\"text-xs text-text-secondary mt-1\">\n Order #{order.id} · {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-text-primary\">\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-subtle px-3 py-1.5 text-xs font-medium text-text-primary 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-subtle 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-text-secondary\">\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-text-secondary\">\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-status-error-text\">\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-text-secondary italic\">\n “{order.review}”\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-subtle px-3 py-1.5 text-xs font-medium text-text-primary 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-subtle px-6 py-2.5 text-sm font-medium text-text-primary 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/atheletebridge/pages/customer/OrderTrackingPage.js CHANGED Viewed

@@ -9,8 +9,9 @@ import { useMemo as c, useState as l } from "react";
 import { ArrowLeft as u, CheckCircle2 as d, ChefHat as f, Circle as p, Clock as m, MapPin as h, MessageCircle as g, Package as _, Phone as v, ShoppingBag as y, Star as b, Truck as x, XCircle as S } from "lucide-react";
 import { useParams as C } from "react-router-dom";
 import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { EmphasisPanel as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/customer/OrderTrackingPage.tsx
-var E = {
+var O = {
 	pending: m,
 	confirmed: d,
 	preparing: f,
@@ -19,21 +20,21 @@ var E = {
 	out_for_delivery: x,
 	delivered: d,
 	cancelled: S
-}, D = [
+}, k = [
 	"pending",
 	"confirmed",
 	"preparing",
 	"ready",
 	"out_for_delivery",
 	"delivered"
-], O = {
+], A = {
 	pending: "Order Placed",
 	confirmed: "Confirmed",
 	preparing: "Preparing",
 	ready: "Ready",
 	out_for_delivery: "Out for Delivery",
 	delivered: "Delivered"
-}, k = {
+}, j = {
 	pending: "Your order has been received",
 	confirmed: "Cart has accepted your order",
 	preparing: "Your food is being prepared",
@@ -41,13 +42,13 @@ var E = {
 	out_for_delivery: "Your order is on the way",
 	delivered: "Order has been delivered"
 };
-function A() {
-	let { orderId: f } = C(), { navigateTo: _ } = e(), [x, A] = l(!0);
+function M() {
+	let { orderId: f } = C(), { navigateTo: _ } = e(), [x, M] = l(!0);
 	c(() => {
-		let e = setTimeout(() => A(!1), 800);
+		let e = setTimeout(() => M(!1), 800);
 		return () => clearTimeout(e);
 	}, []);
-	let j = c(() => f ? s(f) : void 0, [f]);
+	let N = c(() => f ? s(f) : void 0, [f]);
 	if (x) return /* @__PURE__ */ w(n, {
 		title: "Track Order",
 		children: /* @__PURE__ */ T("div", {
@@ -58,7 +59,7 @@ function A() {
 			})]
 		})
 	});
-	if (!j) return /* @__PURE__ */ w(n, {
+	if (!N) return /* @__PURE__ */ w(n, {
 		title: "Order Not Found",
 		children: /* @__PURE__ */ w(i, {
 			illustration: "empty-generic",
@@ -73,8 +74,8 @@ function A() {
 			})
 		})
 	});
-	let M = D.indexOf(j.status), N = j.status === "cancelled", P = j.status === "delivered", F = (e) => D.indexOf(e) <= M, I = (e) => e === j.status;
-	return /* @__PURE__ */ w(n, {
+	let P = k.indexOf(N.status), F = N.status === "cancelled", I = N.status === "delivered", L = (e) => k.indexOf(e) <= P, R = (e) => e === N.status;
+	return /* @__PURE__ */ T(n, {
 		title: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3",
 			children: [/* @__PURE__ */ w("button", {
@@ -84,14 +85,17 @@ function A() {
 				children: /* @__PURE__ */ w(u, { className: "h-5 w-5" })
 			}), /* @__PURE__ */ w("span", { children: "Track Order" })]
 		}),
-		actions: /* @__PURE__ */ w(r, { status: j.status }),
-		children: /* @__PURE__ */ T("div", {
+		actions: /* @__PURE__ */ w(r, { status: N.status }),
+		children: [/* @__PURE__ */ w(D, {
+			className: "mb-6",
+			children: "Follow your order from the moment it's placed to the moment it arrives. See its live status, a step-by-step timeline, your items and the delivery details — all in one place so you always know where your order is."
+		}), /* @__PURE__ */ T("div", {
 			className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
 			children: [/* @__PURE__ */ T("div", {
 				className: "lg:col-span-2 space-y-6",
 				children: [
-					/* @__PURE__ */ T("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
+					/* @__PURE__ */ T(E, {
+						className: "p-5",
 						children: [/* @__PURE__ */ T("div", {
 							className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3",
 							children: [/* @__PURE__ */ T("div", {
@@ -99,53 +103,53 @@ function A() {
 								children: [
 									/* @__PURE__ */ T("h2", {
 										className: "text-lg font-semibold text-text-primary",
-										children: ["Order #", j.id]
+										children: ["Order #", N.id]
 									}),
 									/* @__PURE__ */ w("p", {
 										className: "text-sm text-text-secondary",
-										children: j.cartName
+										children: N.cartName
 									}),
 									/* @__PURE__ */ w("p", {
 										className: "text-xs text-text-secondary mt-0.5",
-										children: o(j.orderDate)
+										children: o(N.orderDate)
 									})
 								]
 							}), /* @__PURE__ */ T("div", {
 								className: "text-left sm:text-right",
 								children: [/* @__PURE__ */ w("p", {
 									className: "text-xl font-bold text-text-primary",
-									children: a(j.total, { minimumFractionDigits: 0 })
+									children: a(N.total, { minimumFractionDigits: 0 })
 								}), /* @__PURE__ */ w("p", {
 									className: "text-xs text-text-secondary uppercase",
-									children: j.paymentMethod
+									children: N.paymentMethod
 								})]
 							})]
-						}), N ? /* @__PURE__ */ T("div", {
+						}), F ? /* @__PURE__ */ T("div", {
 							className: "mt-4 flex items-start gap-3 rounded-lg bg-status-error-bg/10 p-4 border border-status-error-border/20",
 							children: [/* @__PURE__ */ w(S, { className: "h-5 w-5 text-status-error-text mt-0.5 shrink-0" }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 								className: "font-medium text-status-error-text",
 								children: "Order Cancelled"
-							}), j.cancellationReason && /* @__PURE__ */ w("p", {
+							}), N.cancellationReason && /* @__PURE__ */ w("p", {
 								className: "text-sm text-status-error-text/80 mt-0.5",
-								children: j.cancellationReason
+								children: N.cancellationReason
 							})] })]
 						}) : /* @__PURE__ */ T("div", {
-							className: t("mt-4 flex items-start gap-3 rounded-lg p-4 border", P ? "bg-green-500/10 border-green-500/20" : "bg-blue-500/10 border-blue-500/20"),
-							children: [P ? /* @__PURE__ */ w(d, { className: "h-5 w-5 text-green-600 dark:text-green-400 mt-0.5 shrink-0" }) : /* @__PURE__ */ w(m, { className: "h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" }), /* @__PURE__ */ w("p", {
-								className: t("text-sm font-medium", P ? "text-green-600 dark:text-green-400" : "text-blue-600 dark:text-blue-400"),
-								children: P ? `Delivered at ${o(j.actualDeliveryTime)}` : j.estimatedDeliveryTime ? `Estimated delivery by ${o(j.estimatedDeliveryTime)}` : "Estimated delivery time: TBD"
+							className: t("mt-4 flex items-start gap-3 rounded-lg p-4 border", I ? "bg-green-500/10 border-green-500/20" : "bg-blue-500/10 border-blue-500/20"),
+							children: [I ? /* @__PURE__ */ w(d, { className: "h-5 w-5 text-green-600 dark:text-green-400 mt-0.5 shrink-0" }) : /* @__PURE__ */ w(m, { className: "h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" }), /* @__PURE__ */ w("p", {
+								className: t("text-sm font-medium", I ? "text-green-600 dark:text-green-400" : "text-blue-600 dark:text-blue-400"),
+								children: I ? `Delivered at ${o(N.actualDeliveryTime)}` : N.estimatedDeliveryTime ? `Estimated delivery by ${o(N.estimatedDeliveryTime)}` : "Estimated delivery time: TBD"
 							})]
 						})]
 					}),
-					!N && /* @__PURE__ */ T("div", {
+					!F && /* @__PURE__ */ T("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 						children: [/* @__PURE__ */ w("h3", {
 							className: "text-base font-semibold text-text-primary mb-5",
 							children: "Order Status"
 						}), /* @__PURE__ */ w("div", {
 							className: "relative space-y-0",
-							children: D.map((e, n) => {
-								let r = F(e), i = I(e), a = n === D.length - 1, o = E[e] ?? p;
+							children: k.map((e, n) => {
+								let r = L(e), i = R(e), a = n === k.length - 1, o = O[e] ?? p;
 								return /* @__PURE__ */ T("div", {
 									className: "flex items-start relative",
 									children: [
@@ -159,15 +163,15 @@ function A() {
 											children: [
 												/* @__PURE__ */ w("h4", {
 													className: t("text-sm font-semibold", r ? "text-text-primary" : "text-text-secondary"),
-													children: O[e]
+													children: A[e]
 												}),
 												/* @__PURE__ */ w("p", {
 													className: t("text-xs", r ? "text-text-secondary" : "text-text-secondary/50"),
-													children: k[e]
+													children: j[e]
 												}),
-												i && j.assignedWorker && /* @__PURE__ */ T("div", {
+												i && N.assignedWorker && /* @__PURE__ */ T("div", {
 													className: "mt-1.5 text-xs text-blue-600 dark:text-blue-400",
-													children: [/* @__PURE__ */ T("p", { children: ["Driver: ", j.assignedWorker.name] }), /* @__PURE__ */ T("p", { children: ["Contact: ", j.assignedWorker.phone] })]
+													children: [/* @__PURE__ */ T("p", { children: ["Driver: ", N.assignedWorker.name] }), /* @__PURE__ */ T("p", { children: ["Contact: ", N.assignedWorker.phone] })]
 												})
 											]
 										})
@@ -185,7 +189,7 @@ function A() {
 							}),
 							/* @__PURE__ */ w("div", {
 								className: "space-y-2",
-								children: j.items.map((e, t) => /* @__PURE__ */ T("div", {
+								children: N.items.map((e, t) => /* @__PURE__ */ T("div", {
 									className: "flex justify-between items-start pb-2 border-b border-border-subtle last:border-b-0",
 									children: [/* @__PURE__ */ T("div", {
 										className: "flex-1 pr-2",
@@ -218,23 +222,23 @@ function A() {
 								children: [
 									/* @__PURE__ */ T("div", {
 										className: "flex justify-between text-text-secondary",
-										children: [/* @__PURE__ */ w("span", { children: "Subtotal" }), /* @__PURE__ */ w("span", { children: a(j.subtotal, { minimumFractionDigits: 0 }) })]
+										children: [/* @__PURE__ */ w("span", { children: "Subtotal" }), /* @__PURE__ */ w("span", { children: a(N.subtotal, { minimumFractionDigits: 0 }) })]
 									}),
 									/* @__PURE__ */ T("div", {
 										className: "flex justify-between text-text-secondary",
-										children: [/* @__PURE__ */ w("span", { children: "Delivery Fee" }), /* @__PURE__ */ w("span", { children: j.deliveryFee === 0 ? "FREE" : a(j.deliveryFee, { minimumFractionDigits: 0 }) })]
+										children: [/* @__PURE__ */ w("span", { children: "Delivery Fee" }), /* @__PURE__ */ w("span", { children: N.deliveryFee === 0 ? "FREE" : a(N.deliveryFee, { minimumFractionDigits: 0 }) })]
 									}),
 									/* @__PURE__ */ T("div", {
 										className: "flex justify-between text-text-secondary",
-										children: [/* @__PURE__ */ w("span", { children: "Tax" }), /* @__PURE__ */ w("span", { children: a(j.taxes, { minimumFractionDigits: 0 }) })]
+										children: [/* @__PURE__ */ w("span", { children: "Tax" }), /* @__PURE__ */ w("span", { children: a(N.taxes, { minimumFractionDigits: 0 }) })]
 									}),
-									j.discount && j.discount > 0 && /* @__PURE__ */ T("div", {
+									N.discount && N.discount > 0 && /* @__PURE__ */ T("div", {
 										className: "flex justify-between text-green-600 dark:text-green-400",
-										children: [/* @__PURE__ */ w("span", { children: "Discount" }), /* @__PURE__ */ T("span", { children: ["-", a(j.discount, { minimumFractionDigits: 0 })] })]
+										children: [/* @__PURE__ */ w("span", { children: "Discount" }), /* @__PURE__ */ T("span", { children: ["-", a(N.discount, { minimumFractionDigits: 0 })] })]
 									}),
 									/* @__PURE__ */ T("div", {
 										className: "flex justify-between font-semibold pt-2 border-t border-border-subtle text-text-primary",
-										children: [/* @__PURE__ */ w("span", { children: "Total" }), /* @__PURE__ */ w("span", { children: a(j.total, { minimumFractionDigits: 0 }) })]
+										children: [/* @__PURE__ */ w("span", { children: "Total" }), /* @__PURE__ */ w("span", { children: a(N.total, { minimumFractionDigits: 0 }) })]
 									})
 								]
 							})
@@ -261,32 +265,32 @@ function A() {
 										}),
 										/* @__PURE__ */ w("p", {
 											className: "text-sm font-medium text-text-primary",
-											children: j.deliveryAddress.street
+											children: N.deliveryAddress.street
 										}),
 										/* @__PURE__ */ w("p", {
 											className: "text-sm text-text-secondary",
-											children: j.deliveryAddress.area
+											children: N.deliveryAddress.area
 										}),
 										/* @__PURE__ */ T("p", {
 											className: "text-sm text-text-secondary",
 											children: [
-												j.deliveryAddress.city,
+												N.deliveryAddress.city,
 												", ",
-												j.deliveryAddress.pincode
+												N.deliveryAddress.pincode
 											]
 										}),
-										j.deliveryAddress.landmark && /* @__PURE__ */ T("p", {
+										N.deliveryAddress.landmark && /* @__PURE__ */ T("p", {
 											className: "text-xs text-text-secondary mt-0.5",
-											children: ["Landmark: ", j.deliveryAddress.landmark]
+											children: ["Landmark: ", N.deliveryAddress.landmark]
 										})
 									] })]
 								}),
-								j.customerNotes && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+								N.customerNotes && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-xs text-text-secondary",
 									children: "Customer Notes"
 								}), /* @__PURE__ */ w("p", {
 									className: "text-sm text-text-primary",
-									children: j.customerNotes
+									children: N.customerNotes
 								})] }),
 								/* @__PURE__ */ T("div", { children: [
 									/* @__PURE__ */ w("p", {
@@ -295,17 +299,17 @@ function A() {
 									}),
 									/* @__PURE__ */ w("p", {
 										className: "text-sm font-medium text-text-primary capitalize",
-										children: j.paymentMethod
+										children: N.paymentMethod
 									}),
 									/* @__PURE__ */ w("p", {
 										className: "text-xs text-text-secondary",
-										children: j.paymentStatus === "completed" ? "Paid" : "Payment Pending"
+										children: N.paymentStatus === "completed" ? "Paid" : "Payment Pending"
 									})
 								] })
 							]
 						})]
 					}),
-					j.assignedWorker && /* @__PURE__ */ T("div", {
+					N.assignedWorker && /* @__PURE__ */ T("div", {
 						className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 						children: [/* @__PURE__ */ w("h3", {
 							className: "text-base font-semibold text-text-primary mb-3",
@@ -319,31 +323,31 @@ function A() {
 										className: "flex h-10 w-10 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
 										children: /* @__PURE__ */ w("span", {
 											className: "text-sm font-semibold",
-											children: j.assignedWorker.name.charAt(0)
+											children: N.assignedWorker.name.charAt(0)
 										})
 									}),
 									/* @__PURE__ */ T("div", {
 										className: "flex-1 min-w-0",
 										children: [/* @__PURE__ */ w("p", {
 											className: "text-sm font-medium text-text-primary",
-											children: j.assignedWorker.name
+											children: N.assignedWorker.name
 										}), /* @__PURE__ */ T("div", {
 											className: "flex items-center gap-1.5 mt-0.5",
 											children: [/* @__PURE__ */ w(b, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }), /* @__PURE__ */ T("span", {
 												className: "text-xs text-text-secondary",
-												children: [j.assignedWorker.rating, "/5"]
+												children: [N.assignedWorker.rating, "/5"]
 											})]
 										})]
 									}),
 									/* @__PURE__ */ w("a", {
-										href: `tel:${j.assignedWorker.phone}`,
+										href: `tel:${N.assignedWorker.phone}`,
 										className: "flex h-9 w-9 items-center justify-center rounded-full bg-bg-sunken text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
 										children: /* @__PURE__ */ w(v, { className: "h-4 w-4" })
 									})
 								]
 							}), /* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => window.location.href = `tel:${j.assignedWorker.phone}`,
+								onClick: () => window.location.href = `tel:${N.assignedWorker.phone}`,
 								className: "w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 								children: [/* @__PURE__ */ w(v, { className: "h-4 w-4" }), "Call Driver"]
 							})]
@@ -369,9 +373,9 @@ function A() {
 									className: "w-full flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-3 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: [/* @__PURE__ */ w(v, { className: "h-4 w-4" }), "Call Support"]
 								}),
-								P && !j.rating && /* @__PURE__ */ T("button", {
+								I && !N.rating && /* @__PURE__ */ T("button", {
 									type: "button",
-									onClick: () => _(`/customer/orders/${j.id}/rate`),
+									onClick: () => _(`/customer/orders/${N.id}/rate`),
 									className: "w-full flex items-center justify-center gap-2 rounded-lg bg-foreground px-3 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 									children: [/* @__PURE__ */ w(b, { className: "h-4 w-4" }), "Rate Order"]
 								})
@@ -380,10 +384,10 @@ function A() {
 					})
 				]
 			})]
-		})
+		})]
 	});
 }
 //#endregion
-export { A as OrderTrackingPage };
+export { M as OrderTrackingPage };
 //# sourceMappingURL=OrderTrackingPage.js.map