@burdenoff/microfe-adaptercloud 2026.614.1 → 2026.624.1

package/dist/adaptercloud/pages/customer/DirectServiceBookingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module adaptercloud/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  MapPin,\n  Calendar,\n  Clock,\n  CreditCard,\n  Smartphone,\n  Wallet,\n  CheckCircle2,\n  AlertCircle,\n  Navigation,\n  Phone,\n  Home,\n  Loader2,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { getCartById } from '../../mocks/data';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n  location: 'Location',\n  details: 'Details',\n  payment: 'Payment',\n  confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n  address: string;\n  landmark: string;\n  instructions: string;\n  phoneNumber: string;\n}\n\ninterface BookingDetails {\n  preferredTime: string;\n  specialInstructions: string;\n  isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n  bookingId: string;\n  transactionId: string;\n  estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n  const slots: { value: string; label: string }[] = [];\n  const now = new Date();\n  const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n  for (let i = 0; i < 8; i++) {\n    const time = new Date(start.getTime() + i * 30 * 60000);\n    const val = time.toTimeString().slice(0, 5);\n    const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n    slots.push({ value: val, label: lbl });\n  }\n\n  return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n  const { cartId } = useParams<{ cartId: string }>();\n  const { navigateTo } = useAdapterCloud();\n\n  const cart = useMemo(() => (cartId ? getCartById(cartId) : undefined), [cartId]);\n\n  const [step, setStep] = useState<Step>('location');\n  const [submitting, setSubmitting] = useState(false);\n\n  // Location step\n  const [location, setLocation] = useState<ServiceLocation>({\n    address: '',\n    landmark: '',\n    instructions: '',\n    phoneNumber: '',\n  });\n\n  // Details step\n  const [details, setDetails] = useState<BookingDetails>({\n    preferredTime: '',\n    specialInstructions: '',\n    isUrgent: false,\n  });\n\n  // Payment step\n  const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n  // Confirmation data\n  const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n  // Mock pricing\n  const advancePayment = 100;\n  const serviceFee = 50;\n  const balancePayment = serviceFee;\n  const totalAmount = advancePayment + serviceFee;\n\n  // --- Not found ---\n  if (!cart) {\n    return (\n      <PageLayout title=\"Cart Not Found\">\n        <EmptyState\n          icon={<Home className=\"h-12 w-12\" />}\n          title=\"Service not available\"\n          description=\"Direct service is not available for this cart.\"\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              Browse Carts\n            </button>\n          }\n        />\n      </PageLayout>\n    );\n  }\n\n  const timeSlots = generateTimeSlots();\n  const stepIndex = STEPS.indexOf(step);\n\n  // --- Geolocation ---\n  const handleGetLocation = () => {\n    if (!navigator.geolocation) {\n      alert('Geolocation is not supported by this browser.');\n      return;\n    }\n    navigator.geolocation.getCurrentPosition(\n      () => {\n        setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n        alert('Location detected successfully!');\n      },\n      () => {\n        alert('Failed to get your location. Please enter address manually.');\n      }\n    );\n  };\n\n  // --- Validation ---\n  const validateLocation = (): boolean => {\n    if (!location.address.trim()) {\n      alert('Please enter your address.');\n      return false;\n    }\n    if (!location.phoneNumber.trim()) {\n      alert('Please enter your phone number.');\n      return false;\n    }\n    return true;\n  };\n\n  const validateDetails = (): boolean => {\n    if (!details.preferredTime) {\n      alert('Please select a preferred time slot.');\n      return false;\n    }\n    return true;\n  };\n\n  // --- Navigation ---\n  const nextStep = () => {\n    if (step === 'location' && validateLocation()) setStep('details');\n    else if (step === 'details' && validateDetails()) setStep('payment');\n    else if (step === 'payment') handleBookingSubmit();\n  };\n\n  const prevStep = () => {\n    if (step === 'details') setStep('location');\n    else if (step === 'payment') setStep('details');\n  };\n\n  // --- Submit ---\n  const handleBookingSubmit = () => {\n    setSubmitting(true);\n    setTimeout(() => {\n      const bookingId = `BK-${Date.now()}`;\n      const transactionId = `TXN-${Date.now()}`;\n      const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n      setConfirmation({ bookingId, transactionId, estimatedArrival });\n      setStep('confirmation');\n      setSubmitting(false);\n    }, 1500);\n  };\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n            className=\"rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors\"\n          >\n            <ArrowLeft className=\"h-5 w-5\" />\n          </button>\n          <div>\n            <span>Book Direct Service</span>\n            <p className=\"text-xs font-normal text-muted-foreground\">{cart.name}</p>\n          </div>\n        </div>\n      }\n    >\n      {/* Progress Indicator */}\n      <div className=\"flex items-center justify-between mb-6 px-2\">\n        {STEPS.map((s, i) => {\n          const isCompleted = i < stepIndex;\n          const isCurrent = s === step;\n          return (\n            <div key={s} className=\"flex items-center\">\n              <div className=\"flex flex-col items-center\">\n                <div\n                  className={cn(\n                    'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n                    isCompleted\n                      ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                      : isCurrent\n                        ? 'bg-foreground text-background'\n                        : 'bg-muted text-muted-foreground'\n                  )}\n                >\n                  {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n                </div>\n                <span\n                  className={cn(\n                    'mt-1 text-[10px]',\n                    isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground'\n                  )}\n                >\n                  {STEP_LABELS[s]}\n                </span>\n              </div>\n              {i < STEPS.length - 1 && (\n                <div\n                  className={cn(\n                    'mx-2 h-0.5 w-8 sm:w-16',\n                    isCompleted ? 'bg-green-500/30' : 'bg-border'\n                  )}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2\">\n          {/* Step 1: Location */}\n          {step === 'location' && (\n            <div className=\"rounded-lg border border-border bg-card p-5\">\n              <h2 className=\"text-base font-semibold text-foreground mb-1 flex items-center gap-2\">\n                <MapPin className=\"h-4 w-4\" />\n                Service Location\n              </h2>\n              <p className=\"text-xs text-muted-foreground mb-5\">Where should the cart come?</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Your Address <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"flex gap-2\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"Enter your full address\"\n                      value={location.address}\n                      onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n                      className=\"flex-1 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={handleGetLocation}\n                      className=\"flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground hover:bg-accent transition-colors whitespace-nowrap\"\n                    >\n                      <Navigation className=\"h-3.5 w-3.5\" />\n                      Use Current Location\n                    </button>\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Nearby Landmark\n                  </label>\n                  <input\n                    type=\"text\"\n                    placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n                    value={location.landmark}\n                    onChange={(e) => setLocation((p) => ({ ...p, landmark: e.target.value }))}\n                    className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Instructions for Cart Owner\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any specific instructions to help us find you...\"\n                    value={location.instructions}\n                    onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n                    className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Phone Number <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"relative\">\n                    <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground\" />\n                    <input\n                      type=\"tel\"\n                      placeholder=\"Enter your phone number\"\n                      value={location.phoneNumber}\n                      onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: 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                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 2: Details */}\n          {step === 'details' && (\n            <div className=\"rounded-lg border border-border bg-card p-5\">\n              <h2 className=\"text-base font-semibold text-foreground mb-1 flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4\" />\n                Booking Details\n              </h2>\n              <p className=\"text-xs text-muted-foreground mb-5\">Choose your preferred timing</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Preferred Time Slot <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"grid grid-cols-4 gap-2\">\n                    {timeSlots.map((slot) => (\n                      <button\n                        key={slot.value}\n                        type=\"button\"\n                        onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n                        className={cn(\n                          'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n                          details.preferredTime === slot.value\n                            ? 'border-foreground bg-accent text-foreground'\n                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'\n                        )}\n                      >\n                        {slot.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-foreground mb-1.5\">\n                    Special Instructions\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any special requests or dietary preferences...\"\n                    value={details.specialInstructions}\n                    onChange={(e) =>\n                      setDetails((p) => ({ ...p, specialInstructions: e.target.value }))\n                    }\n                    className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n                  />\n                </div>\n\n                <label className=\"flex items-center gap-2 cursor-pointer\">\n                  <input\n                    type=\"checkbox\"\n                    checked={details.isUrgent}\n                    onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n                    className=\"h-4 w-4 rounded border-border\"\n                  />\n                  <span className=\"text-sm text-muted-foreground\">\n                    This is urgent (additional charges may apply)\n                  </span>\n                </label>\n              </div>\n            </div>\n          )}\n\n          {/* Step 3: Payment */}\n          {step === 'payment' && (\n            <div className=\"rounded-lg border border-border bg-card p-5\">\n              <h2 className=\"text-base font-semibold text-foreground mb-1 flex items-center gap-2\">\n                <CreditCard className=\"h-4 w-4\" />\n                Advance Payment\n              </h2>\n              <p className=\"text-xs text-muted-foreground mb-5\">Select your payment method</p>\n\n              <div className=\"space-y-4\">\n                {/* Info callout */}\n                <div className=\"flex items-start gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3\">\n                  <AlertCircle className=\"h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5\" />\n                  <p className=\"text-xs text-blue-700 dark:text-blue-300\">\n                    You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n                    in advance to confirm your booking. Pay the remaining when the cart arrives.\n                  </p>\n                </div>\n\n                {/* Payment methods */}\n                <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n                  {[\n                    {\n                      value: 'upi' as const,\n                      label: 'UPI',\n                      sub: 'Instant payment',\n                      Icon: Smartphone,\n                    },\n                    {\n                      value: 'card' as const,\n                      label: 'Card',\n                      sub: 'Secure payment',\n                      Icon: CreditCard,\n                    },\n                    {\n                      value: 'wallet' as const,\n                      label: 'Wallet',\n                      sub: 'Quick payment',\n                      Icon: Wallet,\n                    },\n                  ].map(({ value, label, sub, Icon }) => (\n                    <button\n                      key={value}\n                      type=\"button\"\n                      onClick={() => setPaymentMethod(value)}\n                      className={cn(\n                        'rounded-lg border p-3 text-center transition-colors',\n                        paymentMethod === value\n                          ? 'border-foreground bg-accent'\n                          : 'border-border hover:bg-accent'\n                      )}\n                    >\n                      <Icon className=\"mx-auto h-5 w-5 text-muted-foreground mb-1\" />\n                      <p className=\"text-sm font-medium text-foreground\">{label}</p>\n                      <p className=\"text-[10px] text-muted-foreground\">{sub}</p>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Payment Summary */}\n                <div className=\"rounded-lg bg-muted p-4\">\n                  <h3 className=\"text-sm font-medium text-foreground mb-2\">Payment Summary</h3>\n                  <div className=\"space-y-2 text-sm\">\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-muted-foreground\">Advance Payment:</span>\n                      <span className=\"text-foreground\">\n                        {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-muted-foreground\">Service Fee:</span>\n                      <span className=\"text-foreground\">\n                        {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between text-muted-foreground\">\n                      <span>Balance Payment (at arrival):</span>\n                      <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n                    </div>\n                    <div className=\"flex justify-between border-t border-border pt-2 font-semibold\">\n                      <span className=\"text-foreground\">Total Amount:</span>\n                      <span className=\"text-foreground\">\n                        {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 4: Confirmation */}\n          {step === 'confirmation' && confirmation && (\n            <div className=\"rounded-lg border border-border bg-card p-5\">\n              {/* Success header */}\n              <div className=\"text-center mb-6\">\n                <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10\">\n                  <CheckCircle2 className=\"h-7 w-7 text-green-600 dark:text-green-400\" />\n                </div>\n                <h2 className=\"text-lg font-semibold text-foreground mb-1\">Booking Confirmed!</h2>\n                <p className=\"text-sm text-muted-foreground\">\n                  Your direct service booking has been confirmed and payment processed.\n                </p>\n              </div>\n\n              {/* Booking details */}\n              <div className=\"rounded-lg bg-muted p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-foreground mb-3\">Booking Details</h3>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Booking ID</span>\n                    <p className=\"font-mono text-xs text-foreground\">{confirmation.bookingId}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Est. Arrival</span>\n                    <p className=\"text-foreground\">\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Location</span>\n                    <p className=\"text-foreground truncate\">{location.address}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Phone</span>\n                    <p className=\"text-foreground\">{location.phoneNumber}</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Payment details */}\n              <div className=\"rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-2\">\n                  <CheckCircle2 className=\"h-4 w-4\" />\n                  Payment Processed\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Transaction ID</span>\n                    <p className=\"font-mono text-xs text-foreground\">\n                      {confirmation.transactionId}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Advance Paid</span>\n                    <p className=\"font-medium text-foreground\">\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Method</span>\n                    <p className=\"capitalize text-foreground\">{paymentMethod}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-muted-foreground\">Status</span>\n                    <p className=\"font-medium text-green-600 dark:text-green-400\">Paid</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Next Steps */}\n              <div className=\"rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6\">\n                <h3 className=\"text-sm font-medium text-blue-600 dark:text-blue-400 mb-2\">\n                  Next Steps\n                </h3>\n                <div className=\"space-y-2 text-xs text-blue-700 dark:text-blue-300\">\n                  <div className=\"flex items-start gap-2\">\n                    <CheckCircle2 className=\"h-3.5 w-3.5 text-green-600 mt-0.5 shrink-0\" />\n                    <span>\n                      Payment confirmed -{' '}\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Cart will arrive around{' '}\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n                      when cart arrives\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Action buttons */}\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n                  className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n                >\n                  View Booking\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo('/customer/carts')}\n                  className=\"flex-1 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground hover:bg-accent transition-colors\"\n                >\n                  Browse More\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Navigation Buttons */}\n          {step !== 'confirmation' && (\n            <div className=\"flex justify-between mt-5\">\n              <button\n                type=\"button\"\n                onClick={prevStep}\n                disabled={step === 'location'}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium text-foreground transition-colors',\n                  step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n                )}\n              >\n                <ArrowLeft className=\"h-4 w-4\" />\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                onClick={nextStep}\n                disabled={submitting}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n                  submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n                )}\n              >\n                {submitting ? (\n                  <>\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                    {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n                  </>\n                ) : (\n                  <>\n                    {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </>\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar: Service Summary */}\n        <div className=\"lg:col-span-1\">\n          <div className=\"sticky top-6 rounded-lg border border-border bg-card p-5\">\n            <h3 className=\"text-base font-semibold text-foreground mb-4\">Service Summary</h3>\n\n            <div className=\"flex items-center gap-3 mb-4\">\n              <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n              <div>\n                <p className=\"text-sm font-medium text-foreground\">{cart.name}</p>\n                <p className=\"text-xs text-muted-foreground\">{cart.category}</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-2 text-sm border-t border-border pt-3\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Service Fee:</span>\n                <span className=\"text-foreground\">\n                  {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-muted-foreground\">Advance Payment:</span>\n                <span className=\"font-medium text-foreground\">\n                  {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border text-green-600 dark:text-green-400\">\n              <CheckCircle2 className=\"h-3.5 w-3.5\" />\n              <span className=\"text-xs\">Pay remaining amount at cart</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,IAAM,IAAgB;CAAC;CAAY;CAAW;CAAW;CAAe,EAClE,IAAoC;CACxC,UAAU;CACV,SAAS;CACT,SAAS;CACT,cAAc;CACf;AAyBD,SAAS,IAAwD;CAC/D,IAAM,IAA4C,EAAE,EAE9C,IAAQ,IAAI,sBADN,IAAI,MAAM,EACK,SAAS,GAAG,KAAK,IAAM;AAElD,MAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,IAAM,IAAO,IAAI,KAAK,EAAM,SAAS,GAAG,IAAI,KAAK,IAAM,EACjD,IAAM,EAAK,cAAc,CAAC,MAAM,GAAG,EAAE,EACrC,IAAM,EAAK,mBAAmB,EAAE,EAAE;GAAE,MAAM;GAAW,QAAQ;GAAW,CAAC;AAC/E,IAAM,KAAK;GAAE,OAAO;GAAK,OAAO;GAAK,CAAC;;AAGxC,QAAO;;AAOT,SAAgB,IAA2B;CACzC,IAAM,EAAE,cAAW,GAA+B,EAC5C,EAAE,kBAAe,GAAiB,EAElC,IAAO,QAAe,IAAS,EAAY,EAAO,GAAG,KAAA,GAAY,CAAC,EAAO,CAAC,EAE1E,CAAC,GAAM,KAAW,EAAe,WAAW,EAC5C,CAAC,GAAY,KAAiB,EAAS,GAAM,EAG7C,CAAC,GAAU,KAAe,EAA0B;EACxD,SAAS;EACT,UAAU;EACV,cAAc;EACd,aAAa;EACd,CAAC,EAGI,CAAC,GAAS,KAAc,EAAyB;EACrD,eAAe;EACf,qBAAqB;EACrB,UAAU;EACX,CAAC,EAGI,CAAC,GAAe,KAAoB,EAAoC,MAAM,EAG9E,CAAC,GAAc,KAAmB,EAAkC,KAAK;AAS/E,KAAI,CAAC,EACH,QACE,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,GAAD;GACE,MAAM,kBAAC,GAAD,EAAM,WAAU,aAAc,CAAA;GACpC,OAAM;GACN,aAAY;GACZ,QACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,kBAAkB;IAC5C,WAAU;cACX;IAEQ,CAAA;GAEX,CAAA;EACS,CAAA;CAIjB,IAAM,IAAY,GAAmB,EAC/B,IAAY,EAAM,QAAQ,EAAK,EAG/B,UAA0B;AAC9B,MAAI,CAAC,UAAU,aAAa;AAC1B,SAAM,gDAAgD;AACtD;;AAEF,YAAU,YAAY,yBACd;AAEJ,GADA,GAAa,OAAO;IAAE,GAAG;IAAG,SAAS,EAAE,WAAW;IAA6B,EAAE,EACjF,MAAM,kCAAkC;WAEpC;AACJ,SAAM,8DAA8D;IAEvE;IAIG,UACC,EAAS,QAAQ,MAAM,GAIvB,EAAS,YAAY,MAAM,GAIzB,MAHL,MAAM,kCAAkC,EACjC,OALP,MAAM,6BAA6B,EAC5B,KASL,UACC,EAAQ,gBAIN,MAHL,MAAM,uCAAuC,EACtC,KAML,UAAiB;AACrB,EAAI,MAAS,cAAc,GAAkB,GAAE,EAAQ,UAAU,GACxD,MAAS,aAAa,GAAiB,GAAE,EAAQ,UAAU,GAC3D,MAAS,aAAW,GAAqB;IAG9C,UAAiB;AACrB,EAAI,MAAS,YAAW,EAAQ,WAAW,GAClC,MAAS,aAAW,EAAQ,UAAU;IAI3C,UAA4B;AAEhC,EADA,EAAc,GAAK,EACnB,iBAAiB;AAMf,GAFA,EAAgB;IAAE,WAHA,MAAM,KAAK,KAAK;IAGL,eAFP,OAAO,KAAK,KAAK;IAEK,kBADnB,IAAI,KAAK,KAAK,KAAK,GAAG,KAAK,IAAM,CAAC,aAAa;IACV,CAAC,EAC/D,EAAQ,eAAe,EACvB,EAAc,GAAM;KACnB,KAAK;;AAGV,QACE,kBAAC,GAAD;EACE,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;IACvD,WAAU;cAEV,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;IAC1B,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAM,uBAA0B,CAAA,EAChC,kBAAC,KAAD;IAAG,WAAU;cAA6C,EAAK;IAAS,CAAA,CACpE,EAAA,CAAA,CACF;;YAdV,CAkBE,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,KAAK,GAAG,MAAM;IACnB,IAAM,IAAc,IAAI,GAClB,IAAY,MAAM;AACxB,WACE,kBAAC,OAAD;KAAa,WAAU;eAAvB,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OACE,WAAW,EACT,6EACA,IACI,uDACA,IACE,kCACA,iCACP;iBAEA,IAAc,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,GAAG,IAAI;OACtD,CAAA,EACN,kBAAC,QAAD;OACE,WAAW,EACT,oBACA,IAAY,gCAAgC,wBAC7C;iBAEA,EAAY;OACR,CAAA,CACH;SACL,IAAI,EAAM,SAAS,KAClB,kBAAC,OAAD,EACE,WAAW,EACT,0BACA,IAAc,oBAAoB,YACnC,EACD,CAAA,CAEA;OA/BI,EA+BJ;KAER;GACE,CAAA,EAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEG,MAAS,cACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAQ,WAAU,WAAY,CAAA,EAAA,mBAE3B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAA+B,CAAA;OAEjF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAoE,iBACrD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC9C;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,SAAS,EAAE,OAAO;YAAO,EAAE;WACxE,WAAU;WACV,CAAA,EACF,kBAAC,UAAD;WACE,MAAK;WACL,SAAS;WACT,WAAU;qBAHZ,CAKE,kBAAC,GAAD,EAAY,WAAU,eAAgB,CAAA,EAAA,uBAE/B;aACL;YACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAmD;UAE5D,CAAA,EACR,kBAAC,SAAD;UACE,MAAK;UACL,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,UAAU,EAAE,OAAO;WAAO,EAAE;UACzE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAmD;UAE5D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAS;UAChB,WAAW,MAAM,GAAa,OAAO;WAAE,GAAG;WAAG,cAAc,EAAE,OAAO;WAAO,EAAE;UAC7E,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAoE,iBACrD,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CAC9C;aACR,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,0EAA2E,CAAA,EAC5F,kBAAC,SAAD;WACE,MAAK;WACL,aAAY;WACZ,OAAO,EAAS;WAChB,WAAW,MAAM,GAAa,OAAO;YAAE,GAAG;YAAG,aAAa,EAAE,OAAO;YAAO,EAAE;WAC5E,WAAU;WACV,CAAA,CACE;YACF,EAAA,CAAA;SACF;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,kBAE7B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAAgC,CAAA;OAElF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CAAoE,wBAC9C,kBAAC,QAAD;WAAM,WAAU;qBAAe;WAAQ,CAAA,CACrD;aACR,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAU,KAAK,MACd,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,GAAY,OAAO;YAAE,GAAG;YAAG,eAAe,EAAK;YAAO,EAAE;WACvE,WAAW,EACT,qEACA,EAAQ,kBAAkB,EAAK,QAC3B,gDACA,4EACL;qBAEA,EAAK;WACC,EAXF,EAAK,MAWH,CACT;UACE,CAAA,CACF,EAAA,CAAA;SAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;UAAO,WAAU;oBAAmD;UAE5D,CAAA,EACR,kBAAC,YAAD;UACE,MAAM;UACN,aAAY;UACZ,OAAO,EAAQ;UACf,WAAW,MACT,GAAY,OAAO;WAAE,GAAG;WAAG,qBAAqB,EAAE,OAAO;WAAO,EAAE;UAEpE,WAAU;UACV,CAAA,CACE,EAAA,CAAA;SAEN,kBAAC,SAAD;UAAO,WAAU;oBAAjB,CACE,kBAAC,SAAD;WACE,MAAK;WACL,SAAS,EAAQ;WACjB,WAAW,MAAM,GAAY,OAAO;YAAE,GAAG;YAAG,UAAU,EAAE,OAAO;YAAS,EAAE;WAC1E,WAAU;WACV,CAAA,EACF,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAEzC,CAAA,CACD;;SACJ;;OACF;;KAIP,MAAS,aACR,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAd,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,kBAE/B;;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAqC;QAA8B,CAAA;OAEhF,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD,EAAa,WAAU,4DAA6D,CAAA,EACpF,kBAAC,KAAD;WAAG,WAAU;qBAAb;YAAwD;YACrC,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAEjF;aACA;;SAGN,kBAAC,OAAD;UAAK,WAAU;oBACZ;WACC;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACD;YACE,OAAO;YACP,OAAO;YACP,KAAK;YACL,MAAM;YACP;WACF,CAAC,KAAK,EAAE,UAAO,UAAO,QAAK,cAC1B,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,EAAiB,EAAM;WACtC,WAAW,EACT,uDACA,MAAkB,IACd,gCACA,gCACL;qBATH;YAWE,kBAAC,GAAD,EAAM,WAAU,8CAA+C,CAAA;YAC/D,kBAAC,KAAD;aAAG,WAAU;uBAAuC;aAAU,CAAA;YAC9D,kBAAC,KAAD;aAAG,WAAU;uBAAqC;aAAQ,CAAA;YACnD;aAbF,EAaE,CACT;UACE,CAAA;SAGN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBAA2C;WAAoB,CAAA,EAC7E,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAwB;cAAuB,CAAA,EAC/D,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;cACxD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAwB;cAAmB,CAAA,EAC3D,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;cACpD,CAAA,CACH;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,iCAAoC,CAAA,EAC1C,kBAAC,QAAD,EAAA,UAAO,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC,EAAQ,CAAA,CACvE;;YACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBAAkB;cAAoB,CAAA,EACtD,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAe,KAAa,EAAE,uBAAuB,GAAG,CAAC;cACrD,CAAA,CACH;;YACF;aACF;;SACF;;OACF;;KAIP,MAAS,kBAAkB,KAC1B,kBAAC,OAAD;MAAK,WAAU;gBAAf;OAEE,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD,EAAc,WAAU,8CAA+C,CAAA;UACnE,CAAA;SACN,kBAAC,MAAD;UAAI,WAAU;oBAA6C;UAAuB,CAAA;SAClF,kBAAC,KAAD;UAAG,WAAU;oBAAgC;UAEzC,CAAA;SACA;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA2C;SAAoB,CAAA,EAC7E,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAiB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBAAqC,EAAa;WAAc,CAAA,CACzE,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAmB,CAAA,EACnE,kBAAC,KAAD;WAAG,WAAU;qBACV,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;YAC9D,MAAM;YACN,QAAQ;YACT,CAAC;WACA,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAe,CAAA,EAC/D,kBAAC,KAAD;WAAG,WAAU;qBAA4B,EAAS;WAAY,CAAA,CAC1D,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAY,CAAA,EAC5D,kBAAC,KAAD;WAAG,WAAU;qBAAmB,EAAS;WAAgB,CAAA,CACrD,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAAd,CACE,kBAAC,GAAD,EAAc,WAAU,WAAY,CAAA,EAAA,oBAEjC;YACL,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAqB,CAAA,EACrE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAa;WACZ,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAmB,CAAA,EACnE,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;WAC3D,CAAA,CACA,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAa,CAAA,EAC7D,kBAAC,KAAD;WAAG,WAAU;qBAA8B;WAAkB,CAAA,CACzD,EAAA,CAAA;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAgC;WAAa,CAAA,EAC7D,kBAAC,KAAD;WAAG,WAAU;qBAAiD;WAAQ,CAAA,CAClE,EAAA,CAAA;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBAA4D;SAErE,CAAA,EACL,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,8CAA+C,CAAA,EACvE,kBAAC,QAAD,EAAA,UAAA;YAAM;YACgB;YACnB,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAC;YACzD,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,EACjD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACoB;YACvB,IAAI,KAAK,EAAa,iBAAiB,CAAC,mBAAmB,EAAE,EAAE;aAC9D,MAAM;aACN,QAAQ;aACT,CAAC;YACG,EAAA,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,+BAAgC,CAAA,EACtD,kBAAC,QAAD,EAAA,UAAA;YAAM;YACW,EAAe,IAAgB,EAAE,uBAAuB,GAAG,CAAC;YAAE;YAAI;YAE5E,EAAA,CAAA,CACH;;UACF;WACF;;OAGN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,sBAAsB,EAAa,YAAY;SACzE,WAAU;mBACX;SAEQ,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,kBAAkB;SAC5C,WAAU;mBACX;SAEQ,CAAA,CACL;;OACF;;KAIP,MAAS,kBACR,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU,MAAS;OACnB,WAAW,EACT,6HACA,MAAS,aAAa,kCAAkC,kBACzD;iBAPH,CASE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,WAE1B;UACT,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAW,EACT,uHACA,IAAa,kCAAkC,mBAChD;iBAEA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,wBAAyB,CAAA,EAC3C,MAAS,YAAY,0BAA0B,gBAC/C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACG,MAAS,YAAY,kBAAkB,QACxC,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,CACjC,EAAA,CAAA;OAEE,CAAA,CACL;;KAEJ;OAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAA+C;OAAoB,CAAA;MAEjF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,KAAK,EAAK;QAAO,KAAK,EAAK;QAAM,WAAU;QAAsC,CAAA,EACtF,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAuC,EAAK;QAAS,CAAA,EAClE,kBAAC,KAAD;QAAG,WAAU;kBAAiC,EAAK;QAAa,CAAA,CAC5D,EAAA,CAAA,CACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAwB;SAAmB,CAAA,EAC3D,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,IAAY,EAAE,uBAAuB,GAAG,CAAC;SACpD,CAAA,CACH;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAwB;SAAuB,CAAA,EAC/D,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAe,KAAgB,EAAE,uBAAuB,GAAG,CAAC;SACxD,CAAA,CACH;UACF;;MAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA,EACxC,kBAAC,QAAD;QAAM,WAAU;kBAAU;QAAmC,CAAA,CACzD;;MACF;;IACF,CAAA,CACF;KACK"}
+{"version":3,"file":"DirectServiceBookingPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/DirectServiceBookingPage.tsx"],"sourcesContent":["/**\n * Direct Service Booking Page\n * @module adaptercloud/pages/customer\n *\n * 4-step wizard: Location > Details > Payment > Confirmation.\n * Progress indicator, step validation, geolocation button,\n * address fields, preferred time slot selector (30-min slots),\n * urgent booking checkbox, payment method selection,\n * payment summary, confirmation step with checkmark/IDs/next steps.\n */\n\nimport { useState, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n  ArrowLeft,\n  ArrowRight,\n  MapPin,\n  Calendar,\n  Clock,\n  CreditCard,\n  Smartphone,\n  Wallet,\n  CheckCircle2,\n  AlertCircle,\n  Navigation,\n  Phone,\n  Home,\n  Loader2,\n} from 'lucide-react';\nimport { PageLayout } from '../../components/PageLayout';\nimport { EmptyState } from '../../components/EmptyState';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { getCartById } from '../../mocks/data';\nimport { cn } from '../../utils/cn';\nimport { formatCurrency } from '../../utils/formatters';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ntype Step = 'location' | 'details' | 'payment' | 'confirmation';\nconst STEPS: Step[] = ['location', 'details', 'payment', 'confirmation'];\nconst STEP_LABELS: Record<Step, string> = {\n  location: 'Location',\n  details: 'Details',\n  payment: 'Payment',\n  confirmation: 'Confirmation',\n};\n\ninterface ServiceLocation {\n  address: string;\n  landmark: string;\n  instructions: string;\n  phoneNumber: string;\n}\n\ninterface BookingDetails {\n  preferredTime: string;\n  specialInstructions: string;\n  isUrgent: boolean;\n}\n\ninterface ConfirmationData {\n  bookingId: string;\n  transactionId: string;\n  estimatedArrival: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction generateTimeSlots(): { value: string; label: string }[] {\n  const slots: { value: string; label: string }[] = [];\n  const now = new Date();\n  const start = new Date(now.getTime() + 30 * 60000); // 30 min from now\n\n  for (let i = 0; i < 8; i++) {\n    const time = new Date(start.getTime() + i * 30 * 60000);\n    const val = time.toTimeString().slice(0, 5);\n    const lbl = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n    slots.push({ value: val, label: lbl });\n  }\n\n  return slots;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function DirectServiceBookingPage() {\n  const { cartId } = useParams<{ cartId: string }>();\n  const { navigateTo } = useAdapterCloud();\n\n  const cart = useMemo(() => (cartId ? getCartById(cartId) : undefined), [cartId]);\n\n  const [step, setStep] = useState<Step>('location');\n  const [submitting, setSubmitting] = useState(false);\n\n  // Location step\n  const [location, setLocation] = useState<ServiceLocation>({\n    address: '',\n    landmark: '',\n    instructions: '',\n    phoneNumber: '',\n  });\n\n  // Details step\n  const [details, setDetails] = useState<BookingDetails>({\n    preferredTime: '',\n    specialInstructions: '',\n    isUrgent: false,\n  });\n\n  // Payment step\n  const [paymentMethod, setPaymentMethod] = useState<'upi' | 'card' | 'wallet'>('upi');\n\n  // Confirmation data\n  const [confirmation, setConfirmation] = useState<ConfirmationData | null>(null);\n\n  // Mock pricing\n  const advancePayment = 100;\n  const serviceFee = 50;\n  const balancePayment = serviceFee;\n  const totalAmount = advancePayment + serviceFee;\n\n  // --- Not found ---\n  if (!cart) {\n    return (\n      <PageLayout title=\"Cart Not Found\">\n        <EmptyState\n          icon={<Home className=\"h-12 w-12\" />}\n          title=\"Service not available\"\n          description=\"Direct service is not available for this cart.\"\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              Browse Carts\n            </button>\n          }\n        />\n      </PageLayout>\n    );\n  }\n\n  const timeSlots = generateTimeSlots();\n  const stepIndex = STEPS.indexOf(step);\n\n  // --- Geolocation ---\n  const handleGetLocation = () => {\n    if (!navigator.geolocation) {\n      alert('Geolocation is not supported by this browser.');\n      return;\n    }\n    navigator.geolocation.getCurrentPosition(\n      () => {\n        setLocation((p) => ({ ...p, address: p.address || 'Current location detected' }));\n        alert('Location detected successfully!');\n      },\n      () => {\n        alert('Failed to get your location. Please enter address manually.');\n      }\n    );\n  };\n\n  // --- Validation ---\n  const validateLocation = (): boolean => {\n    if (!location.address.trim()) {\n      alert('Please enter your address.');\n      return false;\n    }\n    if (!location.phoneNumber.trim()) {\n      alert('Please enter your phone number.');\n      return false;\n    }\n    return true;\n  };\n\n  const validateDetails = (): boolean => {\n    if (!details.preferredTime) {\n      alert('Please select a preferred time slot.');\n      return false;\n    }\n    return true;\n  };\n\n  // --- Navigation ---\n  const nextStep = () => {\n    if (step === 'location' && validateLocation()) setStep('details');\n    else if (step === 'details' && validateDetails()) setStep('payment');\n    else if (step === 'payment') handleBookingSubmit();\n  };\n\n  const prevStep = () => {\n    if (step === 'details') setStep('location');\n    else if (step === 'payment') setStep('details');\n  };\n\n  // --- Submit ---\n  const handleBookingSubmit = () => {\n    setSubmitting(true);\n    setTimeout(() => {\n      const bookingId = `BK-${Date.now()}`;\n      const transactionId = `TXN-${Date.now()}`;\n      const estimatedArrival = new Date(Date.now() + 30 * 60000).toISOString();\n      setConfirmation({ bookingId, transactionId, estimatedArrival });\n      setStep('confirmation');\n      setSubmitting(false);\n    }, 1500);\n  };\n\n  return (\n    <PageLayout\n      title={\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(`/customer/carts/${cart.id}`)}\n            className=\"rounded-md p-1 text-text-secondary hover:bg-accent hover:text-text-primary transition-colors\"\n          >\n            <ArrowLeft className=\"h-5 w-5\" />\n          </button>\n          <div>\n            <span>Book Direct Service</span>\n            <p className=\"text-xs font-normal text-text-secondary\">{cart.name}</p>\n          </div>\n        </div>\n      }\n    >\n      {/* Progress Indicator */}\n      <div className=\"flex items-center justify-between mb-6 px-2\">\n        {STEPS.map((s, i) => {\n          const isCompleted = i < stepIndex;\n          const isCurrent = s === step;\n          return (\n            <div key={s} className=\"flex items-center\">\n              <div className=\"flex flex-col items-center\">\n                <div\n                  className={cn(\n                    'flex h-8 w-8 items-center justify-center rounded-full text-xs font-medium',\n                    isCompleted\n                      ? 'bg-green-500/20 text-green-600 dark:text-green-400'\n                      : isCurrent\n                        ? 'bg-foreground text-background'\n                        : 'bg-bg-sunken text-text-secondary'\n                  )}\n                >\n                  {isCompleted ? <CheckCircle2 className=\"h-4 w-4\" /> : i + 1}\n                </div>\n                <span\n                  className={cn(\n                    'mt-1 text-[10px]',\n                    isCurrent ? 'font-medium text-text-primary' : 'text-text-secondary'\n                  )}\n                >\n                  {STEP_LABELS[s]}\n                </span>\n              </div>\n              {i < STEPS.length - 1 && (\n                <div\n                  className={cn(\n                    'mx-2 h-0.5 w-8 sm:w-16',\n                    isCompleted ? 'bg-green-500/30' : 'bg-border'\n                  )}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2\">\n          {/* Step 1: Location */}\n          {step === 'location' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <MapPin className=\"h-4 w-4\" />\n                Service Location\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Where should the cart come?</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Your Address <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"flex gap-2\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"Enter your full address\"\n                      value={location.address}\n                      onChange={(e) => setLocation((p) => ({ ...p, address: e.target.value }))}\n                      className=\"flex-1 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)]\"\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={handleGetLocation}\n                      className=\"flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap\"\n                    >\n                      <Navigation className=\"h-3.5 w-3.5\" />\n                      Use Current Location\n                    </button>\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Nearby Landmark\n                  </label>\n                  <input\n                    type=\"text\"\n                    placeholder=\"e.g., Near Metro Station, Opposite Mall\"\n                    value={location.landmark}\n                    onChange={(e) => setLocation((p) => ({ ...p, landmark: e.target.value }))}\n                    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)]\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Instructions for Cart Owner\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any specific instructions to help us find you...\"\n                    value={location.instructions}\n                    onChange={(e) => setLocation((p) => ({ ...p, instructions: e.target.value }))}\n                    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\"\n                  />\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Phone Number <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"relative\">\n                    <Phone className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary\" />\n                    <input\n                      type=\"tel\"\n                      placeholder=\"Enter your phone number\"\n                      value={location.phoneNumber}\n                      onChange={(e) => setLocation((p) => ({ ...p, phoneNumber: e.target.value }))}\n                      className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 2: Details */}\n          {step === 'details' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <Calendar className=\"h-4 w-4\" />\n                Booking Details\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Choose your preferred timing</p>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Preferred Time Slot <span className=\"text-red-500\">*</span>\n                  </label>\n                  <div className=\"grid grid-cols-4 gap-2\">\n                    {timeSlots.map((slot) => (\n                      <button\n                        key={slot.value}\n                        type=\"button\"\n                        onClick={() => setDetails((p) => ({ ...p, preferredTime: slot.value }))}\n                        className={cn(\n                          'rounded-lg border py-2 px-2 text-xs font-medium transition-colors',\n                          details.preferredTime === slot.value\n                            ? 'border-foreground bg-accent text-text-primary'\n                            : 'border-border-subtle text-text-secondary hover:bg-accent hover:text-text-primary'\n                        )}\n                      >\n                        {slot.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-1.5\">\n                    Special Instructions\n                  </label>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Any special requests or dietary preferences...\"\n                    value={details.specialInstructions}\n                    onChange={(e) =>\n                      setDetails((p) => ({ ...p, specialInstructions: e.target.value }))\n                    }\n                    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\"\n                  />\n                </div>\n\n                <label className=\"flex items-center gap-2 cursor-pointer\">\n                  <input\n                    type=\"checkbox\"\n                    checked={details.isUrgent}\n                    onChange={(e) => setDetails((p) => ({ ...p, isUrgent: e.target.checked }))}\n                    className=\"h-4 w-4 rounded border-border-subtle\"\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    This is urgent (additional charges may apply)\n                  </span>\n                </label>\n              </div>\n            </div>\n          )}\n\n          {/* Step 3: Payment */}\n          {step === 'payment' && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              <h2 className=\"text-base font-semibold text-text-primary mb-1 flex items-center gap-2\">\n                <CreditCard className=\"h-4 w-4\" />\n                Advance Payment\n              </h2>\n              <p className=\"text-xs text-text-secondary mb-5\">Select your payment method</p>\n\n              <div className=\"space-y-4\">\n                {/* Info callout */}\n                <div className=\"flex items-start gap-2 rounded-lg border border-blue-500/20 bg-blue-500/5 p-3\">\n                  <AlertCircle className=\"h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5\" />\n                  <p className=\"text-xs text-blue-700 dark:text-blue-300\">\n                    You need to pay {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}{' '}\n                    in advance to confirm your booking. Pay the remaining when the cart arrives.\n                  </p>\n                </div>\n\n                {/* Payment methods */}\n                <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-3\">\n                  {[\n                    {\n                      value: 'upi' as const,\n                      label: 'UPI',\n                      sub: 'Instant payment',\n                      Icon: Smartphone,\n                    },\n                    {\n                      value: 'card' as const,\n                      label: 'Card',\n                      sub: 'Secure payment',\n                      Icon: CreditCard,\n                    },\n                    {\n                      value: 'wallet' as const,\n                      label: 'Wallet',\n                      sub: 'Quick payment',\n                      Icon: Wallet,\n                    },\n                  ].map(({ value, label, sub, Icon }) => (\n                    <button\n                      key={value}\n                      type=\"button\"\n                      onClick={() => setPaymentMethod(value)}\n                      className={cn(\n                        'rounded-lg border p-3 text-center transition-colors',\n                        paymentMethod === value\n                          ? 'border-foreground bg-accent'\n                          : 'border-border-subtle hover:bg-accent'\n                      )}\n                    >\n                      <Icon className=\"mx-auto h-5 w-5 text-text-secondary mb-1\" />\n                      <p className=\"text-sm font-medium text-text-primary\">{label}</p>\n                      <p className=\"text-[10px] text-text-secondary\">{sub}</p>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Payment Summary */}\n                <div className=\"rounded-lg bg-bg-sunken p-4\">\n                  <h3 className=\"text-sm font-medium text-text-primary mb-2\">Payment Summary</h3>\n                  <div className=\"space-y-2 text-sm\">\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Advance Payment:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between\">\n                      <span className=\"text-text-secondary\">Service Fee:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                    <div className=\"flex justify-between text-text-secondary\">\n                      <span>Balance Payment (at arrival):</span>\n                      <span>{formatCurrency(balancePayment, { minimumFractionDigits: 0 })}</span>\n                    </div>\n                    <div className=\"flex justify-between border-t border-border-subtle pt-2 font-semibold\">\n                      <span className=\"text-text-primary\">Total Amount:</span>\n                      <span className=\"text-text-primary\">\n                        {formatCurrency(totalAmount, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Step 4: Confirmation */}\n          {step === 'confirmation' && confirmation && (\n            <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-5\">\n              {/* Success header */}\n              <div className=\"text-center mb-6\">\n                <div className=\"mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-green-500/10\">\n                  <CheckCircle2 className=\"h-7 w-7 text-green-600 dark:text-green-400\" />\n                </div>\n                <h2 className=\"text-lg font-semibold text-text-primary mb-1\">Booking Confirmed!</h2>\n                <p className=\"text-sm text-text-secondary\">\n                  Your direct service booking has been confirmed and payment processed.\n                </p>\n              </div>\n\n              {/* Booking details */}\n              <div className=\"rounded-lg bg-bg-sunken p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-text-primary mb-3\">Booking Details</h3>\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Booking ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">{confirmation.bookingId}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Est. Arrival</span>\n                    <p className=\"text-text-primary\">\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Location</span>\n                    <p className=\"text-text-primary truncate\">{location.address}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Phone</span>\n                    <p className=\"text-text-primary\">{location.phoneNumber}</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Payment details */}\n              <div className=\"rounded-lg border border-green-500/20 bg-green-500/5 p-4 mb-4\">\n                <h3 className=\"text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-2\">\n                  <CheckCircle2 className=\"h-4 w-4\" />\n                  Payment Processed\n                </h3>\n                <div className=\"grid grid-cols-2 gap-3 text-sm\">\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Transaction ID</span>\n                    <p className=\"font-mono text-xs text-text-primary\">\n                      {confirmation.transactionId}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Advance Paid</span>\n                    <p className=\"font-medium text-text-primary\">\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                    </p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Method</span>\n                    <p className=\"capitalize text-text-primary\">{paymentMethod}</p>\n                  </div>\n                  <div>\n                    <span className=\"text-xs text-text-secondary\">Status</span>\n                    <p className=\"font-medium text-green-600 dark:text-green-400\">Paid</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Next Steps */}\n              <div className=\"rounded-lg border border-blue-500/20 bg-blue-500/5 p-4 mb-6\">\n                <h3 className=\"text-sm font-medium text-blue-600 dark:text-blue-400 mb-2\">\n                  Next Steps\n                </h3>\n                <div className=\"space-y-2 text-xs text-blue-700 dark:text-blue-300\">\n                  <div className=\"flex items-start gap-2\">\n                    <CheckCircle2 className=\"h-3.5 w-3.5 text-green-600 mt-0.5 shrink-0\" />\n                    <span>\n                      Payment confirmed -{' '}\n                      {formatCurrency(advancePayment, { minimumFractionDigits: 0 })} paid\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <Clock className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Cart will arrive around{' '}\n                      {new Date(confirmation.estimatedArrival).toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit',\n                      })}\n                    </span>\n                  </div>\n                  <div className=\"flex items-start gap-2\">\n                    <CreditCard className=\"h-3.5 w-3.5 mt-0.5 shrink-0\" />\n                    <span>\n                      Pay remaining {formatCurrency(balancePayment, { minimumFractionDigits: 0 })}{' '}\n                      when cart arrives\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              {/* Action buttons */}\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo(`/customer/bookings/${confirmation.bookingId}`)}\n                  className=\"flex-1 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background hover:opacity-90 transition-opacity\"\n                >\n                  View Booking\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => navigateTo('/customer/carts')}\n                  className=\"flex-1 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n                >\n                  Browse More\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Navigation Buttons */}\n          {step !== 'confirmation' && (\n            <div className=\"flex justify-between mt-5\">\n              <button\n                type=\"button\"\n                onClick={prevStep}\n                disabled={step === 'location'}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg border border-border-subtle px-4 py-2.5 text-sm font-medium text-text-primary transition-colors',\n                  step === 'location' ? 'opacity-40 cursor-not-allowed' : 'hover:bg-accent'\n                )}\n              >\n                <ArrowLeft className=\"h-4 w-4\" />\n                Previous\n              </button>\n              <button\n                type=\"button\"\n                onClick={nextStep}\n                disabled={submitting}\n                className={cn(\n                  'flex items-center gap-2 rounded-lg bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity',\n                  submitting ? 'opacity-60 cursor-not-allowed' : 'hover:opacity-90'\n                )}\n              >\n                {submitting ? (\n                  <>\n                    <Loader2 className=\"h-4 w-4 animate-spin\" />\n                    {step === 'payment' ? 'Processing Payment...' : 'Processing...'}\n                  </>\n                ) : (\n                  <>\n                    {step === 'payment' ? 'Confirm & Pay' : 'Next'}\n                    <ArrowRight className=\"h-4 w-4\" />\n                  </>\n                )}\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar: Service Summary */}\n        <div className=\"lg:col-span-1\">\n          <div className=\"sticky top-6 rounded-lg border border-border-subtle bg-bg-surface p-5\">\n            <h3 className=\"text-base font-semibold text-text-primary mb-4\">Service Summary</h3>\n\n            <div className=\"flex items-center gap-3 mb-4\">\n              <img src={cart.image} alt={cart.name} className=\"h-12 w-12 rounded-lg object-cover\" />\n              <div>\n                <p className=\"text-sm font-medium text-text-primary\">{cart.name}</p>\n                <p className=\"text-xs text-text-secondary\">{cart.category}</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-2 text-sm border-t border-border-subtle pt-3\">\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Service Fee:</span>\n                <span className=\"text-text-primary\">\n                  {formatCurrency(serviceFee, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n              <div className=\"flex justify-between\">\n                <span className=\"text-text-secondary\">Advance Payment:</span>\n                <span className=\"font-medium text-text-primary\">\n                  {formatCurrency(advancePayment, { minimumFractionDigits: 0 })}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex items-center gap-2 mt-3 pt-3 border-t border-border-subtle text-green-600 dark:text-green-400\">\n              <CheckCircle2 className=\"h-3.5 w-3.5\" />\n              <span className=\"text-xs\">Pay remaining amount at cart</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/adaptercloud/pages/customer/FavoritesPage.js

@@ -94,7 +94,7 @@ function x() {
 		description: `${D.length} carts, ${O.length} products`,
 		children: [
 			/* @__PURE__ */ b("div", {
-				className: "flex flex-wrap items-center gap-4 text-sm text-muted-foreground mb-6",
+				className: "flex flex-wrap items-center gap-4 text-sm text-text-secondary mb-6",
 				children: [
 					/* @__PURE__ */ b("span", {
 						className: "flex items-center gap-1.5",
@@ -123,13 +123,13 @@ function x() {
 				]
 			}),
 			/* @__PURE__ */ y("div", {
-				className: "rounded-lg border border-border bg-card p-4 mb-6",
+				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6",
 				children: /* @__PURE__ */ b("div", {
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3",
 					children: [
 						/* @__PURE__ */ b("div", {
 							className: "relative",
-							children: [/* @__PURE__ */ y(m, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ y("input", {
+							children: [/* @__PURE__ */ y(m, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("input", {
 								type: "text",
 								placeholder: "Search favorites...",
 								value: k.searchQuery,
@@ -137,7 +137,7 @@ function x() {
 									...t,
 									searchQuery: e.target.value
 								})),
-								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"
+								className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
 							})]
 						}),
 						/* @__PURE__ */ b("select", {
@@ -146,7 +146,7 @@ function x() {
 								...t,
 								type: e.target.value
 							})),
-							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",
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ y("option", {
 									value: "all",
@@ -168,7 +168,7 @@ function x() {
 								...t,
 								category: e.target.value
 							})),
-							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",
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ y("option", {
 									value: "",
@@ -198,7 +198,7 @@ function x() {
 								...t,
 								sortBy: e.target.value
 							})),
-							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",
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
 							children: [
 								/* @__PURE__ */ y("option", {
 									value: "recent",
@@ -234,9 +234,9 @@ function x() {
 			}) : /* @__PURE__ */ b("div", {
 				className: "space-y-8",
 				children: [M.length > 0 && /* @__PURE__ */ b("section", { children: [/* @__PURE__ */ b("h3", {
-					className: "text-base font-semibold text-foreground mb-4 flex items-center gap-2",
+					className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ y(h, { className: "h-4 w-4 text-muted-foreground" }),
+						/* @__PURE__ */ y(h, { className: "h-4 w-4 text-text-secondary" }),
 						"Favorite Carts (",
 						M.length,
 						")"
@@ -244,9 +244,9 @@ function x() {
 				}), /* @__PURE__ */ y("div", {
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 					children: M.map((e) => /* @__PURE__ */ b("div", {
-						className: "rounded-lg border border-border bg-card shadow-sm overflow-hidden",
+						className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm overflow-hidden",
 						children: [/* @__PURE__ */ b("div", {
-							className: "relative h-36 bg-muted",
+							className: "relative h-36 bg-bg-sunken",
 							children: [
 								/* @__PURE__ */ y("button", {
 									type: "button",
@@ -262,13 +262,13 @@ function x() {
 									type: "button",
 									onClick: () => P(e.id),
 									title: "Remove from favorites",
-									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",
+									className: "absolute top-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-bg-surface/80 backdrop-blur-sm text-red-500 hover:bg-bg-surface transition-colors",
 									children: /* @__PURE__ */ y(d, { className: "h-4 w-4 fill-current" })
 								}),
 								/* @__PURE__ */ y("div", {
 									className: "absolute top-2 left-2",
 									children: /* @__PURE__ */ y("span", {
-										className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", e.isOpen ? "bg-green-500/20 text-green-600 dark:text-green-400" : "bg-destructive/20 text-destructive"),
+										className: t("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", e.isOpen ? "bg-green-500/20 text-green-600 dark:text-green-400" : "bg-status-error-bg/20 text-status-error-text"),
 										children: e.isOpen ? "Open" : "Closed"
 									})
 								})
@@ -279,18 +279,18 @@ function x() {
 								/* @__PURE__ */ b("div", {
 									className: "flex items-start justify-between gap-2 mb-2",
 									children: [/* @__PURE__ */ y("h4", {
-										className: "text-sm font-semibold text-foreground truncate",
+										className: "text-sm font-semibold text-text-primary truncate",
 										children: e.name
 									}), /* @__PURE__ */ b("div", {
 										className: "flex items-center gap-1 shrink-0",
 										children: [
 											/* @__PURE__ */ y(g, { className: "h-3.5 w-3.5 fill-yellow-400 text-yellow-400" }),
 											/* @__PURE__ */ y("span", {
-												className: "text-xs font-medium text-foreground",
+												className: "text-xs font-medium text-text-primary",
 												children: e.rating
 											}),
 											/* @__PURE__ */ b("span", {
-												className: "text-xs text-muted-foreground",
+												className: "text-xs text-text-secondary",
 												children: [
 													"(",
 													e.reviewCount,
@@ -301,11 +301,11 @@ function x() {
 									})]
 								}),
 								/* @__PURE__ */ y("p", {
-									className: "text-xs text-muted-foreground line-clamp-2 mb-3",
+									className: "text-xs text-text-secondary line-clamp-2 mb-3",
 									children: e.description
 								}),
 								/* @__PURE__ */ b("div", {
-									className: "space-y-1.5 text-xs text-muted-foreground",
+									className: "space-y-1.5 text-xs text-text-secondary",
 									children: [
 										/* @__PURE__ */ b("div", {
 											className: "flex justify-between",
@@ -346,7 +346,7 @@ function x() {
 									}), /* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => x(`/customer/carts/${e.id}`),
-										className: "flex-1 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground hover:bg-accent transition-colors",
+										className: "flex-1 rounded-lg border border-border-subtle px-3 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
 										children: "View Menu"
 									})]
 								})
@@ -354,9 +354,9 @@ function x() {
 						})]
 					}, e.id))
 				})] }), N.length > 0 && /* @__PURE__ */ b("section", { children: [/* @__PURE__ */ b("h3", {
-					className: "text-base font-semibold text-foreground mb-4 flex items-center gap-2",
+					className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
 					children: [
-						/* @__PURE__ */ y(_, { className: "h-4 w-4 text-muted-foreground" }),
+						/* @__PURE__ */ y(_, { className: "h-4 w-4 text-text-secondary" }),
 						"Favorite Products (",
 						N.length,
 						")"
@@ -364,7 +364,7 @@ function x() {
 				}), /* @__PURE__ */ y("div", {
 					className: "space-y-3",
 					children: N.map((e) => /* @__PURE__ */ y("div", {
-						className: "rounded-lg border border-border bg-card p-4",
+						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
 						children: /* @__PURE__ */ b("div", {
 							className: "flex flex-col sm:flex-row sm:items-center gap-4",
 							children: [
@@ -379,34 +379,34 @@ function x() {
 										/* @__PURE__ */ b("div", {
 											className: "flex items-start justify-between gap-2 mb-1",
 											children: [/* @__PURE__ */ y("h4", {
-												className: "text-sm font-semibold text-foreground",
+												className: "text-sm font-semibold text-text-primary",
 												children: e.name
 											}), /* @__PURE__ */ b("div", {
 												className: "flex items-center gap-2 shrink-0",
 												children: [/* @__PURE__ */ y("span", {
-													className: "text-base font-bold text-foreground",
+													className: "text-base font-bold text-text-primary",
 													children: o(e.price, { minimumFractionDigits: 0 })
 												}), /* @__PURE__ */ y("button", {
 													type: "button",
 													onClick: () => F(e.id),
 													title: "Remove from favorites",
-													className: "rounded-md p-1 text-red-500 hover:bg-destructive/10 transition-colors",
+													className: "rounded-md p-1 text-red-500 hover:bg-status-error-bg/10 transition-colors",
 													children: /* @__PURE__ */ y(v, { className: "h-4 w-4" })
 												})]
 											})]
 										}),
 										/* @__PURE__ */ y("p", {
-											className: "text-xs text-muted-foreground mb-2",
+											className: "text-xs text-text-secondary mb-2",
 											children: e.description
 										}),
 										/* @__PURE__ */ b("div", {
-											className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground mb-2",
+											className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary mb-2",
 											children: [
 												/* @__PURE__ */ b("span", { children: [
 													"From:",
 													" ",
 													/* @__PURE__ */ y("span", {
-														className: "font-medium text-foreground",
+														className: "font-medium text-text-primary",
 														children: e.cartName
 													})
 												] }),
@@ -438,7 +438,7 @@ function x() {
 													children: [/* @__PURE__ */ y(f, { className: "h-3 w-3" }), "Vegan"]
 												}),
 												/* @__PURE__ */ b("span", {
-													className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground",
+													className: "inline-flex items-center gap-1 rounded-full bg-bg-sunken px-2 py-0.5 text-[10px] font-medium text-text-secondary",
 													children: [
 														/* @__PURE__ */ y(u, { className: "h-3 w-3" }),
 														e.preparationTime,
@@ -459,7 +459,7 @@ function x() {
 									}), /* @__PURE__ */ y("button", {
 										type: "button",
 										onClick: () => x(`/customer/carts/${e.cartId}`),
-										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",
+										className: "flex-1 sm:flex-none rounded-lg border border-border-subtle px-4 py-2 text-xs font-medium text-text-primary hover:bg-accent transition-colors whitespace-nowrap",
 										children: "View Cart"
 									})]
 								})

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

@@ -1 +1 @@
-{"version":3,"file":"FavoritesPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/FavoritesPage.tsx"],"sourcesContent":["/**\n * Favorites Page\n * @module adaptercloud/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 { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useProviders, useOrders } from '../../hooks/useAdapterCloudApi';\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 } = useAdapterCloud();\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 AdapterCloud',\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":";;;;;;;;;;AAoFA,SAAgB,IAAgB;CAC9B,IAAM,EAAE,eAAY,mBAAgB,GAAiB,EAC/C,EAAE,MAAM,IAAY,EAAE,EAAE,WAAW,MAAuB,GAAc,EACxE,EAAE,MAAM,IAAS,EAAE,EAAE,WAAW,MAAoB,EAAU,EAClE,YAAY,GAAa,IAC1B,CAAC,EAEI,IAAgC,EAAU,MAAM,GAAG,EAAE,CAAC,KAAK,OAAO;EACtE,IAAI,EAAE;EACN,MAAM,EAAE;EACR,aAAa;EACb,UAAU,EAAE;EACZ,OAAO,EAAE;EACT,QAAQ,EAAE;EACV,aAAa,EAAE;EACf,QAAQ,EAAE;EACV,YAAY,EAAE,cAAc;EAC5B,UAAU,EAAE;EACZ,eAAe,EAAE;EACjB,mCAAkB,IAAI,MAAM,EAAC,aAAa;EAC1C,aAAa,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAE,GAAG,CAAC;EACrD,YAAY,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAE,GAAG,CAAC,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,EAAE;EACzF,EAAE,EAEG,IAAsC,CAC1C;EACE,IAAI;EACJ,MAAM;EACN,aAAa;EACb,OAAO;EACP,UAAU;EACV,OAAO;EACP,QAAQ,EAAU,IAAI,MAAM;EAC5B,UAAU,EAAU,IAAI,QAAQ;EAChC,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB,QAAQ;EACR,kBAAkB;EAClB,YAAY;EACb,CACF,EAEK,CAAC,GAAS,KAAc,EAA0B;EACtD,aAAa;EACb,MAAM;EACN,UAAU;EACV,QAAQ;EACT,CAAC,EAEI,IAAY,KAAsB,GA6DlC,EAAE,OAAO,GAAc,UAAU,MA1Df,QAAkB;EACxC,IAAI,IAAQ,CAAC,GAAG,EAAc,EAC1B,IAAW,CAAC,GAAG,EAAiB;AAGpC,MAAI,EAAQ,aAAa;GACvB,IAAM,IAAI,EAAQ,YAAY,aAAa;AAO3C,GANA,IAAQ,EAAM,QACX,MACC,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,IAChC,EAAE,YAAY,aAAa,CAAC,SAAS,EAAE,IACvC,EAAE,SAAS,aAAa,CAAC,SAAS,EAAE,CACvC,EACD,IAAW,EAAS,QACjB,MACC,EAAE,KAAK,aAAa,CAAC,SAAS,EAAE,IAChC,EAAE,YAAY,aAAa,CAAC,SAAS,EAAE,IACvC,EAAE,SAAS,aAAa,CAAC,SAAS,EAAE,IACpC,EAAE,SAAS,aAAa,CAAC,SAAS,EAAE,CACvC;;AAUH,UANI,EAAQ,aACV,IAAQ,EAAM,QAAQ,MAAM,EAAE,aAAa,EAAQ,SAAS,EAC5D,IAAW,EAAS,QAAQ,MAAM,EAAE,aAAa,EAAQ,SAAS,GAI5D,EAAQ,QAAhB;GACE,KAAK;AAIH,IAHA,EAAM,MACH,GAAG,MAAM,IAAI,KAAK,EAAE,iBAAiB,CAAC,SAAS,GAAG,IAAI,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAC1F,EACD,EAAS,MACN,GAAG,MAAM,IAAI,KAAK,EAAE,iBAAiB,CAAC,SAAS,GAAG,IAAI,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAC1F;AACD;GACF,KAAK;AAEH,IADA,EAAM,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,KAAK,CAAC,EAClD,EAAS,MAAM,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,KAAK,CAAC;AACrD;GACF,KAAK;AAEH,IADA,EAAM,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,EACzC,EAAS,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO;AAC5C;GACF,KAAK;AAEH,IADA,EAAM,MAAM,GAAG,MAAM,EAAE,cAAc,EAAE,YAAY,EACnD,EAAS,MAAM,GAAG,MAAM,EAAE,aAAa,EAAE,WAAW;AACpD;;AAMJ,SAFI,EAAQ,SAAS,UAAgB;GAAE;GAAO,UAAU,EAAE;GAAE,GACxD,EAAQ,SAAS,aAAmB;GAAE,OAAO,EAAE;GAAE;GAAU,GACxD;GAAE;GAAO;GAAU;IACzB;EAAC;EAAe;EAAkB;EAAQ,CAAC,EAE8B,EAEtE,KAAoB,MAAe;AAEvC,UAAQ,IAAI,gBAAgB,EAAG;IAG3B,KAAuB,MAAe;AAE1C,UAAQ,IAAI,mBAAmB,EAAG;IAI9B,IACJ,EAAc,QAAQ,GAAG,MAAM,IAAI,EAAE,YAAY,EAAE,GACnD,EAAiB,QAAQ,GAAG,MAAM,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE;AAYlE,QAVI,IAEA,kBAAC,GAAD;EAAY,OAAM;YAChB,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD,EAAK,WAAU,oEAAqE,CAAA;GAChF,CAAA;EACK,CAAA,GAKf,kBAAC,GAAD;EACE,OAAM;EACN,aAAa,GAAG,EAAc,OAAO,UAAU,EAAiB,OAAO;YAFzE;GAKE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAc,WAAU,eAAgB,CAAA;OACvC,EAAc;OAAO;OACjB;;KACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAU,WAAU,eAAgB,CAAA;OACnC,EAAiB;OAAO;OACpB;;KACP,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACE,kBAAC,GAAD,EAAM,WAAU,eAAgB,CAAA;;OAClB,EAAe,GAAY,EAAE,uBAAuB,GAAG,CAAC;OACjE;;KACH;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,0EAA2E,CAAA,EAC7F,kBAAC,SAAD;QACE,MAAK;QACL,aAAY;QACZ,OAAO,EAAQ;QACf,WAAW,MAAM,GAAY,OAAO;SAAE,GAAG;SAAG,aAAa,EAAE,OAAO;SAAO,EAAE;QAC3E,WAAU;QACV,CAAA,CACE;;MAGN,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MACT,GAAY,OAAO;QAAE,GAAG;QAAG,MAAM,EAAE,OAAO;QAAkC,EAAE;OAEhF,WAAU;iBALZ;QAOE,kBAAC,UAAD;SAAQ,OAAM;mBAAM;SAAsB,CAAA;QAC1C,kBAAC,UAAD;SAAQ,OAAM;mBAAQ;SAAuB,CAAA;QAC7C,kBAAC,UAAD;SAAQ,OAAM;mBAAW;SAA0B,CAAA;QAC5C;;MAGT,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MAAM,GAAY,OAAO;QAAE,GAAG;QAAG,UAAU,EAAE,OAAO;QAAO,EAAE;OACxE,WAAU;iBAHZ;QAKE,kBAAC,UAAD;SAAQ,OAAM;mBAAG;SAAuB,CAAA;QACxC,kBAAC,UAAD;SAAQ,OAAM;mBAAkB;SAAwB,CAAA;QACxD,kBAAC,UAAD;SAAQ,OAAM;mBAAc;SAAoB,CAAA;QAChD,kBAAC,UAAD;SAAQ,OAAM;mBAAe;SAAqB,CAAA;QAClD,kBAAC,UAAD;SAAQ,OAAM;mBAAY;SAAkB,CAAA;QACrC;;MAGT,kBAAC,UAAD;OACE,OAAO,EAAQ;OACf,WAAW,MACT,GAAY,OAAO;QAAE,GAAG;QAAG,QAAQ,EAAE,OAAO;QAAoC,EAAE;OAEpF,WAAU;iBALZ;QAOE,kBAAC,UAAD;SAAQ,OAAM;mBAAS;SAAuB,CAAA;QAC9C,kBAAC,UAAD;SAAQ,OAAM;mBAAO;SAAiB,CAAA;QACtC,kBAAC,UAAD;SAAQ,OAAM;mBAAS;SAAsB,CAAA;QAC7C,kBAAC,UAAD;SAAQ,OAAM;mBAAS;SAAqB,CAAA;QACrC;;MACL;;IACF,CAAA;GAGL,EAAa,WAAW,KAAK,EAAgB,WAAW,IACvD,kBAAC,GAAD;IACE,MAAM,kBAAC,GAAD,EAAO,WAAU,aAAc,CAAA;IACrC,OAAM;IACN,aAAY;IACZ,QACE,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAW,kBAAkB;KAC5C,WAAU;eACX;KAEQ,CAAA;IAEX,CAAA,GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEG,EAAa,SAAS,KACrB,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,GAAD,EAAc,WAAU,iCAAkC,CAAA;;MACzC,EAAa;MAAO;MAClC;QACL,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAa,KAAK,MACjB,kBAAC,OAAD;MAEE,WAAU;gBAFZ,CAKE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;SACvD,WAAU;mBAEV,kBAAC,OAAD;UACE,KAAK,EAAK;UACV,KAAK,EAAK;UACV,WAAU;UACV,CAAA;SACK,CAAA;QACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAiB,EAAK,GAAG;SACxC,OAAM;SACN,WAAU;mBAEV,kBAAC,GAAD,EAAO,WAAU,wBAAyB,CAAA;SACnC,CAAA;QACT,kBAAC,OAAD;SAAK,WAAU;mBACb,kBAAC,QAAD;UACE,WAAW,EACT,yEACA,EAAK,SACD,uDACA,qCACL;oBAEA,EAAK,SAAS,SAAS;UACnB,CAAA;SACH,CAAA;QACF;UAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAK;UACH,CAAA,EACL,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,GAAD,EAAM,WAAU,+CAAgD,CAAA;WAChE,kBAAC,QAAD;YAAM,WAAU;sBAAuC,EAAK;YAAc,CAAA;WAC1E,kBAAC,QAAD;YAAM,WAAU;sBAAhB;aAAgD;aAC5C,EAAK;aAAY;aACd;;WACH;YACF;;QAEN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAK;SACJ,CAAA;QAEJ,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,UAAa,CAAA,EACnB,kBAAC,QAAD,EAAA,UACG,EAAW,EAAK,kBAAkB;YACjC,MAAM,KAAA;YACN,QAAQ,KAAA;YACR,QAAQ,KAAA;YACT,CAAC,EACG,CAAA,CACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,iBAAoB,CAAA,EAC1B,kBAAC,QAAD,EAAA,UAAO,EAAK,aAAmB,CAAA,CAC3B;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,gBAAmB,CAAA,EACzB,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAe,EAAK,YAAY,EAAE,uBAAuB,GAAG,CAAC;YACzD,CAAA,CACH;;UACL,EAAK,eACJ,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD,EAAA,UAAM,iBAAoB,CAAA,EAC1B,kBAAC,QAAD,EAAA,UACG,EAAW,EAAK,aAAa;YAC5B,MAAM,KAAA;YACN,QAAQ,KAAA;YACR,QAAQ,KAAA;YACT,CAAC,EACG,CAAA,CACH;;UAEJ;;QAEN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;UACvD,WAAU;oBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA,EAAA,cAE1B;aACT,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,mBAAmB,EAAK,KAAK;UACvD,WAAU;oBACX;UAEQ,CAAA,CACL;;QACF;SACF;QA9GC,EAAK,GA8GN,CACN;KACE,CAAA,CACE,EAAA,CAAA,EAIX,EAAgB,SAAS,KACxB,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,GAAD,EAAU,WAAU,iCAAkC,CAAA;;MAClC,EAAgB;MAAO;MACxC;QACL,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAgB,KAAK,MACpB,kBAAC,OAAD;MAAsB,WAAU;gBAC9B,kBAAC,OAAD;OAAK,WAAU;iBAAf;QAEE,kBAAC,OAAD;SACE,KAAK,EAAQ;SACb,KAAK,EAAQ;SACb,WAAU;SACV,CAAA;QAGF,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,MAAD;YAAI,WAAU;sBAAyC,EAAQ;YAAU,CAAA,EACzE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,QAAD;aAAM,WAAU;uBACb,EAAe,EAAQ,OAAO,EAAE,uBAAuB,GAAG,CAAC;aACvD,CAAA,EACP,kBAAC,UAAD;aACE,MAAK;aACL,eAAe,EAAoB,EAAQ,GAAG;aAC9C,OAAM;aACN,WAAU;uBAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;aAClB,CAAA,CACL;cACF;;UAEN,kBAAC,KAAD;WAAG,WAAU;qBAAsC,EAAQ;WAAgB,CAAA;UAE3E,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,QAAD,EAAA,UAAA;aAAM;aACE;aACN,kBAAC,QAAD;cAAM,WAAU;wBAA+B,EAAQ;cAAgB,CAAA;aAClE,EAAA,CAAA;YACP,kBAAC,QAAD,EAAA,UAAA;aAAM;aAAS,EAAQ;aAAW;aAAa,EAAA,CAAA;YAC/C,kBAAC,QAAD,EAAA,UAAA;aAAM;aACG;aACN,EAAW,EAAQ,kBAAkB;cACpC,MAAM,KAAA;cACN,QAAQ,KAAA;cACR,QAAQ,KAAA;cACT,CAAC;aACG,EAAA,CAAA;YACH;;UAEN,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACG,EAAQ,gBACP,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,MAEvB;;YAER,EAAQ,WACP,kBAAC,QAAD;aAAM,WAAU;uBAAhB,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAAA,QAEvB;;YAET,kBAAC,QAAD;aAAM,WAAU;uBAAhB;cACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA;cAC5B,EAAQ;cAAgB;cACpB;;YACH;;UACF;;QAGN,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,mBAAmB,EAAQ,SAAS;UAC9D,WAAU;oBACX;UAEQ,CAAA,EACT,kBAAC,UAAD;UACE,MAAK;UACL,eAAe,EAAW,mBAAmB,EAAQ,SAAS;UAC9D,WAAU;oBACX;UAEQ,CAAA,CACL;;QACF;;MACF,EApFI,EAAQ,GAoFZ,CACN;KACE,CAAA,CACE,EAAA,CAAA,CAER;;GAEG"}
+{"version":3,"file":"FavoritesPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/customer/FavoritesPage.tsx"],"sourcesContent":["/**\n * Favorites Page\n * @module adaptercloud/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 { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useProviders, useOrders } from '../../hooks/useAdapterCloudApi';\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 } = useAdapterCloud();\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 AdapterCloud',\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-text-secondary 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-subtle bg-bg-surface 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-text-secondary\" />\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-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n            />\n          </div>\n\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-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-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-text-primary mb-4 flex items-center gap-2\">\n                <ShoppingCart className=\"h-4 w-4 text-text-secondary\" />\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-subtle bg-bg-surface shadow-sm overflow-hidden\"\n                  >\n                    {/* Image */}\n                    <div className=\"relative h-36 bg-bg-sunken\">\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-bg-surface/80 backdrop-blur-sm text-red-500 hover:bg-bg-surface 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-status-error-bg/20 text-status-error-text'\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-text-primary 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-text-primary\">{cart.rating}</span>\n                          <span className=\"text-xs text-text-secondary\">\n                            ({cart.reviewCount})\n                          </span>\n                        </div>\n                      </div>\n\n                      <p className=\"text-xs text-text-secondary line-clamp-2 mb-3\">\n                        {cart.description}\n                      </p>\n\n                      <div className=\"space-y-1.5 text-xs text-text-secondary\">\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-subtle px-3 py-2 text-xs font-medium text-text-primary 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-text-primary mb-4 flex items-center gap-2\">\n                <Utensils className=\"h-4 w-4 text-text-secondary\" />\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-subtle bg-bg-surface 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-text-primary\">{product.name}</h4>\n                          <div className=\"flex items-center gap-2 shrink-0\">\n                            <span className=\"text-base font-bold text-text-primary\">\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-status-error-bg/10 transition-colors\"\n                            >\n                              <X className=\"h-4 w-4\" />\n                            </button>\n                          </div>\n                        </div>\n\n                        <p className=\"text-xs text-text-secondary mb-2\">{product.description}</p>\n\n                        <div className=\"flex flex-wrap items-center gap-2 text-xs text-text-secondary mb-2\">\n                          <span>\n                            From:{' '}\n                            <span className=\"font-medium text-text-primary\">{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-bg-sunken px-2 py-0.5 text-[10px] font-medium text-text-secondary\">\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-subtle px-4 py-2 text-xs font-medium text-text-primary 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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"}