@burdenoff/microfe-kadaikodi 2026.704.3 → 2026.704.5

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

@@ -3,18 +3,21 @@ import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
 import { StatusBadge as r } from "../../components/StatusBadge.js";
 import { EmptyState as i } from "../../components/EmptyState.js";
-import { useOrder as a } from "../../hooks/useKadaikodiApi.js";
-import { formatCurrency as o, formatDate as s } from "../../utils/formatters.js";
-import { useMemo as c, useState as l } from "react";
-import { ArrowLeft as u, CalendarCheck as d, CheckCircle2 as f, Circle as p, Headphones as m, MapPin as h, ShoppingBag as g, Star as _, XCircle as v } from "lucide-react";
-import { useParams as y } from "react-router-dom";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
+import { useCreateReview as a, useOrder as o, useUpdateOrderStatus as s } from "../../hooks/useKadaikodiApi.js";
+import { formatCurrency as c, formatDate as l } from "../../utils/formatters.js";
+import { Timeline as u } from "../../components/viz/Timeline.js";
+import "../../components/viz/index.js";
+import { useMemo as d, useState as f } from "react";
+import { ArrowLeft as p, CalendarCheck as m, CheckCircle2 as h, Headphones as g, Loader2 as _, MapPin as v, ShoppingBag as y, Star as b, X 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 { GlassCard as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/customer/BookingDetailsPage.tsx
-function w() {
-	let { bookingId: w } = y(), { navigateTo: T } = e(), { data: E, isLoading: D } = a(w), [O, k] = l(null), A = (e) => {
-		k(e), setTimeout(() => k(null), 3e3);
-	}, j = c(() => E ? E.timeline.length > 0 ? E.timeline.map((e) => ({
+var O = "support@kadaikodi.com";
+function k() {
+	let { bookingId: k } = C(), { navigateTo: A, currentUser: j } = e(), { data: M, isLoading: N } = o(k), P = a(), F = s(), [I, L] = f(null), [R, z] = f(!1), [B, V] = f(5), [H, U] = f(""), W = (e) => {
+		L(e), setTimeout(() => L(null), 3e3);
+	}, G = d(() => M ? M.timeline.length > 0 ? M.timeline.map((e) => ({
 		status: e.status,
 		label: e.description || e.status,
 		timestamp: e.timestamp,
@@ -22,328 +25,408 @@ function w() {
 	})) : [{
 		status: "placed",
 		label: "Order placed",
-		timestamp: E.orderDate,
+		timestamp: M.orderDate,
 		completed: !0
-	}] : [], [E]);
-	if (D) return /* @__PURE__ */ b(n, {
+	}] : [], [M]);
+	if (N) return /* @__PURE__ */ w(n, {
 		title: "Booking Details",
-		children: /* @__PURE__ */ b("div", {
+		children: /* @__PURE__ */ w("div", {
 			className: "flex items-center justify-center py-20",
-			children: /* @__PURE__ */ b("div", { className: "h-12 w-12 animate-spin rounded-full border-b-2 border-foreground" })
+			children: /* @__PURE__ */ w("div", { className: "h-12 w-12 animate-spin rounded-full border-b-2 border-foreground" })
 		})
 	});
-	if (!E) return /* @__PURE__ */ b(n, {
+	if (!M) return /* @__PURE__ */ w(n, {
 		title: "Booking Not Found",
-		children: /* @__PURE__ */ b(i, {
-			icon: /* @__PURE__ */ b(d, { className: "h-12 w-12" }),
+		children: /* @__PURE__ */ w(i, {
+			icon: /* @__PURE__ */ w(m, { className: "h-12 w-12" }),
 			title: "Booking not found",
-			description: `No booking found with ID "${w}".`,
-			action: /* @__PURE__ */ b("button", {
+			description: `No booking found with ID "${k}".`,
+			action: /* @__PURE__ */ w("button", {
 				type: "button",
-				onClick: () => T("/customer/dashboard"),
+				onClick: () => A("/customer/dashboard"),
 				className: "rounded-lg bg-foreground px-4 py-2 text-sm font-medium text-background hover:opacity-90 transition-opacity",
 				children: "Go to Dashboard"
 			})
 		})
 	});
-	let M = E.status === "cancelled", N = E.status === "delivered", P = !M && !N, F = E.deliveryAddress, I = !!(F.street || F.area || F.city);
-	return /* @__PURE__ */ x(n, {
-		title: /* @__PURE__ */ x("div", {
+	let K = M.status === "cancelled", q = M.status === "delivered", J = !K && !q, Y = M.deliveryAddress, X = !!(Y.street || Y.area || Y.city), Z = M.rating != null && M.rating > 0;
+	return /* @__PURE__ */ T(n, {
+		title: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3",
-			children: [/* @__PURE__ */ b("button", {
+			children: [/* @__PURE__ */ w("button", {
 				type: "button",
-				onClick: () => T("/customer/dashboard"),
+				onClick: () => A("/customer/dashboard"),
 				className: "rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
-				children: /* @__PURE__ */ b(u, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ x("span", { children: ["Booking #", E.id] })]
+				children: /* @__PURE__ */ w(p, { className: "h-5 w-5" })
+			}), /* @__PURE__ */ T("span", { children: ["Booking #", M.id] })]
 		}),
-		actions: /* @__PURE__ */ b(r, { status: E.status }),
+		actions: /* @__PURE__ */ w(r, { status: M.status }),
 		children: [
-			/* @__PURE__ */ b(C, {
+			/* @__PURE__ */ w(D, {
 				className: "mb-4",
 				children: "The full picture of one service booking — who's providing it, what was ordered, what it costs, and the actions you can take such as contacting support or cancelling."
 			}),
-			O && /* @__PURE__ */ x("div", {
+			I && /* @__PURE__ */ T("div", {
 				className: "mb-4 rounded-lg border border-status-success-text/30 bg-status-success-bg-subtle p-3 flex items-center gap-2",
-				children: [/* @__PURE__ */ b(f, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ b("p", {
+				children: [/* @__PURE__ */ w(h, { className: "h-4 w-4 text-status-success-text shrink-0" }), /* @__PURE__ */ w("p", {
 					className: "text-sm text-status-success-text",
-					children: O
+					children: I
 				})]
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ T("div", {
 				className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ x("div", {
+				children: [/* @__PURE__ */ T("div", {
 					className: "lg:col-span-2 space-y-6",
 					children: [
-						/* @__PURE__ */ x(S, {
+						/* @__PURE__ */ T(E, {
 							treatment: "glass",
 							glow: !0,
 							className: "p-6",
 							children: [
-								/* @__PURE__ */ b("h2", {
+								/* @__PURE__ */ w("h2", {
 									className: "text-lg font-semibold text-text-primary",
-									children: E.cartName
+									children: M.cartName
 								}),
-								/* @__PURE__ */ x("p", {
+								/* @__PURE__ */ T("p", {
 									className: "mt-1 text-sm text-text-secondary",
-									children: ["Order placed on ", s(E.orderDate)]
+									children: ["Order placed on ", l(M.orderDate)]
 								}),
-								E.items.length > 0 && /* @__PURE__ */ b("div", {
+								M.items.length > 0 && /* @__PURE__ */ w("div", {
 									className: "mt-4 space-y-1.5",
-									children: E.items.map((e, t) => /* @__PURE__ */ x("div", {
+									children: M.items.map((e, t) => /* @__PURE__ */ T("div", {
 										className: "flex justify-between text-sm",
-										children: [/* @__PURE__ */ x("span", {
+										children: [/* @__PURE__ */ T("span", {
 											className: "text-text-primary",
 											children: [
 												e.quantity,
 												"x ",
 												e.name
 											]
-										}), /* @__PURE__ */ b("span", {
+										}), /* @__PURE__ */ w("span", {
 											className: "text-text-secondary",
-											children: o(e.price * e.quantity, { minimumFractionDigits: 0 })
+											children: c(e.price * e.quantity, { minimumFractionDigits: 0 })
 										})]
 									}, e.id || t))
 								})
 							]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-							children: [/* @__PURE__ */ b("h2", {
+							children: [/* @__PURE__ */ w("h2", {
 								className: "text-base font-semibold text-text-primary mb-4",
 								children: "Service Provider"
-							}), /* @__PURE__ */ x("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "flex items-center gap-4",
 								children: [
-									/* @__PURE__ */ b("div", {
+									/* @__PURE__ */ w("div", {
 										className: "flex h-12 w-12 items-center justify-center rounded-full bg-bg-sunken text-text-secondary",
-										children: /* @__PURE__ */ b(g, { className: "h-6 w-6" })
+										children: /* @__PURE__ */ w(y, { className: "h-6 w-6" })
 									}),
-									/* @__PURE__ */ b("div", {
+									/* @__PURE__ */ w("div", {
 										className: "flex-1 min-w-0",
-										children: /* @__PURE__ */ b("p", {
+										children: /* @__PURE__ */ w("p", {
 											className: "text-sm font-semibold text-text-primary",
-											children: E.cartName
+											children: M.cartName
 										})
 									}),
-									/* @__PURE__ */ b("button", {
+									/* @__PURE__ */ w("button", {
 										type: "button",
-										onClick: () => T(`/customer/carts/${E.cartId}`),
+										onClick: () => A(`/customer/cart/${M.cartId}`),
 										className: "rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 										children: "View Cart"
 									})
 								]
 							})]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
-							children: [/* @__PURE__ */ b("h2", {
+							children: [/* @__PURE__ */ w("h2", {
 								className: "text-base font-semibold text-text-primary mb-5",
 								children: "Booking Timeline"
-							}), /* @__PURE__ */ b("div", {
-								className: "relative",
-								children: j.map((e, n) => {
-									let r = n === j.length - 1, i = e.status === "cancelled", a = i ? v : e.completed ? f : p;
-									return /* @__PURE__ */ x("div", {
-										className: "flex gap-4",
-										children: [/* @__PURE__ */ x("div", {
-											className: "flex flex-col items-center",
-											children: [/* @__PURE__ */ b("div", {
-												className: t("flex h-8 w-8 shrink-0 items-center justify-center rounded-full", i ? "bg-status-error-bg-subtle text-status-error-text" : e.completed ? "bg-status-success-bg-subtle text-status-success-text" : "bg-bg-sunken text-text-secondary"),
-												children: /* @__PURE__ */ b(a, { className: "h-4 w-4" })
-											}), !r && /* @__PURE__ */ b("div", { className: t("w-0.5 flex-1 my-1", e.completed ? "bg-status-success-bg-subtle" : "bg-border") })]
-										}), /* @__PURE__ */ x("div", {
-											className: t("pb-6", r && "pb-0"),
-											children: [/* @__PURE__ */ b("p", {
-												className: "text-sm font-medium text-text-primary",
-												children: e.label
-											}), /* @__PURE__ */ b("p", {
-												className: "mt-0.5 text-xs text-text-secondary",
-												children: e.timestamp ? s(e.timestamp) : "Pending"
-											})]
-										})]
-									}, `${e.status}-${n}`);
-								})
-							})]
+							}), /* @__PURE__ */ w(u, { items: G.map((e, t) => ({
+								id: `${e.status}-${t}`,
+								title: e.label,
+								tone: e.status === "cancelled" ? "danger" : e.completed ? "success" : "muted",
+								time: e.timestamp ? l(e.timestamp) : "Pending"
+							})) })]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "flex flex-col sm:flex-row gap-3",
-							children: [/* @__PURE__ */ x("button", {
-								type: "button",
-								onClick: () => {
-									A("Support team will contact you shortly.");
-								},
+							children: [/* @__PURE__ */ T("a", {
+								href: `mailto:${O}?subject=${encodeURIComponent(`Support request — Booking #${M.id}`)}`,
 								className: "flex-1 flex items-center justify-center gap-2 rounded-lg border border-border-subtle px-4 py-3 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
-								children: [/* @__PURE__ */ b(m, { className: "h-4 w-4" }), "Contact Support"]
-							}), N && /* @__PURE__ */ x("button", {
+								children: [/* @__PURE__ */ w(g, { className: "h-4 w-4" }), "Contact Support"]
+							}), q && /* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => {
-									A("Thank you! Rating feature coming soon.");
-								},
-								className: "flex-1 flex items-center justify-center gap-2 rounded-lg bg-foreground px-4 py-3 text-sm font-medium text-background hover:opacity-90 transition-opacity",
-								children: [/* @__PURE__ */ b(_, { className: "h-4 w-4" }), "Rate Service"]
+								disabled: Z,
+								onClick: () => z(!0),
+								className: t("flex-1 flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-medium transition-opacity", Z ? "bg-bg-sunken text-text-secondary cursor-not-allowed" : "bg-foreground text-background hover:opacity-90"),
+								children: [/* @__PURE__ */ w(b, { className: "h-4 w-4" }), Z ? "Rated" : "Rate Service"]
 							})]
 						})
 					]
-				}), /* @__PURE__ */ x("div", {
+				}), /* @__PURE__ */ T("div", {
 					className: "space-y-6",
 					children: [
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ w("h3", {
 									className: "text-base font-semibold text-text-primary mb-3",
 									children: "Cart Information"
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ T("div", {
 									className: "flex items-center gap-3 mb-4",
-									children: [/* @__PURE__ */ b("div", {
+									children: [/* @__PURE__ */ w("div", {
 										className: "flex h-14 w-14 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary",
-										children: /* @__PURE__ */ b(g, { className: "h-6 w-6" })
-									}), /* @__PURE__ */ b("div", {
+										children: /* @__PURE__ */ w(y, { className: "h-6 w-6" })
+									}), /* @__PURE__ */ w("div", {
 										className: "min-w-0",
-										children: /* @__PURE__ */ b("p", {
+										children: /* @__PURE__ */ w("p", {
 											className: "text-sm font-semibold text-text-primary",
-											children: E.cartName
+											children: M.cartName
 										})
 									})]
 								}),
-								/* @__PURE__ */ b("button", {
+								/* @__PURE__ */ w("button", {
 									type: "button",
-									onClick: () => T(`/customer/carts/${E.cartId}`),
+									onClick: () => A(`/customer/cart/${M.cartId}`),
 									className: "w-full rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 									children: "View Cart Menu"
 								})
 							]
 						}),
-						I && /* @__PURE__ */ x("div", {
+						X && /* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-							children: [/* @__PURE__ */ b("h3", {
+							children: [/* @__PURE__ */ w("h3", {
 								className: "text-base font-semibold text-text-primary mb-3",
 								children: "Service Location"
-							}), /* @__PURE__ */ x("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "flex items-start gap-3",
-								children: [/* @__PURE__ */ b(h, { className: "mt-0.5 h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ x("div", { children: [
-									F.street && /* @__PURE__ */ b("p", {
+								children: [/* @__PURE__ */ w(v, { className: "mt-0.5 h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ T("div", { children: [
+									Y.street && /* @__PURE__ */ w("p", {
 										className: "text-sm text-text-primary",
-										children: F.street
+										children: Y.street
 									}),
-									/* @__PURE__ */ x("p", {
+									/* @__PURE__ */ T("p", {
 										className: "text-sm text-text-secondary",
-										children: [[F.area, F.city].filter(Boolean).join(", "), F.pincode ? ` - ${F.pincode}` : ""]
+										children: [[Y.area, Y.city].filter(Boolean).join(", "), Y.pincode ? ` - ${Y.pincode}` : ""]
 									}),
-									F.landmark && /* @__PURE__ */ x("p", {
+									Y.landmark && /* @__PURE__ */ T("p", {
 										className: "text-xs text-text-secondary mt-1",
-										children: ["Landmark: ", F.landmark]
+										children: ["Landmark: ", Y.landmark]
 									})
 								] })]
 							})]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-							children: [/* @__PURE__ */ b("h3", {
+							children: [/* @__PURE__ */ w("h3", {
 								className: "text-base font-semibold text-text-primary mb-3",
 								children: "Price Breakdown"
-							}), /* @__PURE__ */ x("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "space-y-2.5 text-sm",
 								children: [
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ T("div", {
 										className: "flex justify-between",
-										children: [/* @__PURE__ */ b("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "text-text-secondary",
 											children: "Subtotal"
-										}), /* @__PURE__ */ b("span", {
+										}), /* @__PURE__ */ w("span", {
 											className: "text-text-primary",
-											children: o(E.subtotal, { minimumFractionDigits: 0 })
+											children: c(M.subtotal, { minimumFractionDigits: 0 })
 										})]
 									}),
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ T("div", {
 										className: "flex justify-between",
-										children: [/* @__PURE__ */ b("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "text-text-secondary",
 											children: "Delivery Fee"
-										}), /* @__PURE__ */ b("span", {
+										}), /* @__PURE__ */ w("span", {
 											className: "text-text-primary",
-											children: E.deliveryFee === 0 ? "FREE" : o(E.deliveryFee, { minimumFractionDigits: 0 })
+											children: M.deliveryFee === 0 ? "FREE" : c(M.deliveryFee, { minimumFractionDigits: 0 })
 										})]
 									}),
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ T("div", {
 										className: "flex justify-between",
-										children: [/* @__PURE__ */ b("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "text-text-secondary",
 											children: "Tax"
-										}), /* @__PURE__ */ b("span", {
+										}), /* @__PURE__ */ w("span", {
 											className: "text-text-primary",
-											children: o(E.taxes, { minimumFractionDigits: 0 })
+											children: c(M.taxes, { minimumFractionDigits: 0 })
 										})]
 									}),
-									E.discount != null && E.discount > 0 && /* @__PURE__ */ x("div", {
+									M.discount != null && M.discount > 0 && /* @__PURE__ */ T("div", {
 										className: "flex justify-between",
-										children: [/* @__PURE__ */ b("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "text-status-success-text",
 											children: "Discount"
-										}), /* @__PURE__ */ x("span", {
+										}), /* @__PURE__ */ T("span", {
 											className: "text-status-success-text",
-											children: ["-", o(E.discount, { minimumFractionDigits: 0 })]
+											children: ["-", c(M.discount, { minimumFractionDigits: 0 })]
 										})]
 									}),
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ T("div", {
 										className: "flex justify-between border-t border-border-subtle pt-2.5",
-										children: [/* @__PURE__ */ b("span", {
+										children: [/* @__PURE__ */ w("span", {
 											className: "font-semibold text-text-primary",
 											children: "Total"
-										}), /* @__PURE__ */ b("span", {
+										}), /* @__PURE__ */ w("span", {
 											className: "font-bold text-text-primary",
-											children: o(E.total, { minimumFractionDigits: 0 })
+											children: c(M.total, { minimumFractionDigits: 0 })
 										})]
 									})
 								]
 							})]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-5",
-							children: [/* @__PURE__ */ b("h3", {
+							children: [/* @__PURE__ */ w("h3", {
 								className: "text-base font-semibold text-text-primary mb-3",
 								children: "Booking Info"
-							}), /* @__PURE__ */ x("div", {
+							}), /* @__PURE__ */ T("div", {
 								className: "space-y-3",
-								children: [/* @__PURE__ */ x("div", {
+								children: [/* @__PURE__ */ T("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ b(d, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									children: [/* @__PURE__ */ w(m, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 										className: "text-xs text-text-secondary",
 										children: "Booked On"
-									}), /* @__PURE__ */ b("p", {
+									}), /* @__PURE__ */ w("p", {
 										className: "text-sm text-text-primary",
-										children: s(E.orderDate)
+										children: l(M.orderDate)
 									})] })]
-								}), /* @__PURE__ */ x("div", {
+								}), /* @__PURE__ */ T("div", {
 									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ b(f, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									children: [/* @__PURE__ */ w(h, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 										className: "text-xs text-text-secondary",
 										children: "Payment"
-									}), /* @__PURE__ */ x("p", {
+									}), /* @__PURE__ */ T("p", {
 										className: "text-sm text-text-primary capitalize",
 										children: [
-											E.paymentMethod,
+											M.paymentMethod,
 											" · ",
-											E.paymentStatus
+											M.paymentStatus
 										]
 									})] })]
 								})]
 							})]
 						}),
-						P && /* @__PURE__ */ x("button", {
+						J && /* @__PURE__ */ T("button", {
 							type: "button",
-							className: "w-full inline-flex items-center justify-center gap-2 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-3 text-sm font-medium text-status-error-text hover:bg-status-error-bg-subtle transition-colors",
-							children: [/* @__PURE__ */ b(v, { className: "h-4 w-4" }), "Cancel Booking"]
+							onClick: () => {
+								window.confirm("Cancel this booking? This cannot be undone.") && F.mutate({
+									id: M.id,
+									status: "CANCELLED"
+								}, {
+									onSuccess: () => W("Your booking has been cancelled."),
+									onError: () => W("Could not cancel the booking. Please try again.")
+								});
+							},
+							disabled: F.isPending,
+							className: t("w-full inline-flex items-center justify-center gap-2 rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-3 text-sm font-medium text-status-error-text transition-colors", F.isPending ? "opacity-60 cursor-not-allowed" : "hover:bg-status-error-bg-subtle"),
+							children: [F.isPending ? /* @__PURE__ */ w(_, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ w(S, { className: "h-4 w-4" }), "Cancel Booking"]
 						})
 					]
 				})]
+			}),
+			R && /* @__PURE__ */ w("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
+				children: /* @__PURE__ */ w("div", {
+					className: "w-full max-w-md rounded-lg border border-border-subtle bg-bg-surface shadow-lg",
+					children: /* @__PURE__ */ T("div", {
+						className: "p-5",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "flex items-center justify-between mb-4",
+								children: [/* @__PURE__ */ w("h3", {
+									className: "text-lg font-semibold text-text-primary",
+									children: "Rate this service"
+								}), /* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => z(!1),
+									className: "rounded-md p-2 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors",
+									children: /* @__PURE__ */ w(x, { className: "h-4 w-4" })
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "mb-4",
+								children: [/* @__PURE__ */ w("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Your rating"
+								}), /* @__PURE__ */ w("div", {
+									className: "flex items-center gap-1",
+									children: [
+										1,
+										2,
+										3,
+										4,
+										5
+									].map((e) => /* @__PURE__ */ w("button", {
+										type: "button",
+										onClick: () => V(e),
+										className: "p-0.5",
+										"aria-label": `${e} star${e > 1 ? "s" : ""}`,
+										children: /* @__PURE__ */ w(b, { className: t("h-7 w-7", e <= B ? "fill-status-warning-text text-status-warning-text" : "fill-none text-text-secondary/40") })
+									}, e))
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "mb-5",
+								children: [/* @__PURE__ */ T("label", {
+									className: "block text-sm font-medium text-text-primary mb-1.5",
+									children: ["Review ", /* @__PURE__ */ w("span", {
+										className: "text-text-secondary font-normal",
+										children: "(optional)"
+									})]
+								}), /* @__PURE__ */ w("textarea", {
+									rows: 4,
+									value: H,
+									onChange: (e) => U(e.target.value),
+									placeholder: "Share your experience with this service...",
+									className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] resize-none"
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ T("button", {
+									type: "button",
+									onClick: () => {
+										if (!j?.id) {
+											W("Please sign in to rate this service.");
+											return;
+										}
+										P.mutate({
+											providerId: M.cartId,
+											orderId: M.id,
+											customerId: j.id,
+											rating: B,
+											review: H.trim() || void 0
+										}, {
+											onSuccess: () => {
+												z(!1), U(""), W("Thanks! Your rating has been submitted.");
+											},
+											onError: () => W("Could not submit your rating. Please try again.")
+										});
+									},
+									disabled: P.isPending,
+									className: t("flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity", P.isPending ? "opacity-60 cursor-not-allowed" : "hover:opacity-90"),
+									children: [P.isPending && /* @__PURE__ */ w(_, { className: "h-4 w-4 animate-spin" }), "Submit Rating"]
+								}), /* @__PURE__ */ w("button", {
+									type: "button",
+									onClick: () => z(!1),
+									className: "rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
+									children: "Cancel"
+								})]
+							})
+						]
+					})
+				})
 			})
 		]
 	});
 }
 //#endregion
-export { w as BookingDetailsPage };
+export { k as BookingDetailsPage };
 
 //# sourceMappingURL=BookingDetailsPage.js.map