@withpotter/components 0.13.0-next.124 → 0.13.0-next.58

package/dist/features/gift-cards/gift-cards-feature.js

@@ -1,20 +1,21 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { Copy, Download, Gift, History, Mail, Plus, Search } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Copy,
+  Download,
+  Gift,
+  History,
+  Mail,
+  Plus,
+  Search,
+  X
+} from "lucide-react";
 import { useAuth } from "@withpotter/lib/auth-context";
 import { normalizeCurrencyCode } from "@withpotter/lib/utils";
-import { Button } from "@withpotter/ui-kit/button";
-import { Field } from "@withpotter/ui-kit/field";
-import { FormDialog } from "@withpotter/ui-kit/form-dialog";
 import { InlineDeleteButton } from "@withpotter/ui-kit/inline-delete-button";
-import { Input } from "@withpotter/ui-kit/input";
-import { ListPage } from "@withpotter/ui-kit/list-page";
-import { Textarea } from "@withpotter/ui-kit/textarea";
-import { Tooltip } from "@withpotter/ui-kit/tooltip";
 import {
   giftCardsApi,
-  giftcardsApi,
   communicationsApi
 } from "@withpotter/lib/api";
 import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
@@ -33,15 +34,6 @@ import {
   GiftCardArtwork,
   GIFT_CARD_PRESETS
 } from "../gift-card-artwork";
-import {
-  createInFlightDeduper,
-  currencySymbol,
-  isFirstRun,
-  PAGE_HINT_LINES,
-  STATUS_FILTERS,
-  STATUS_LABEL
-} from "./gift-card-logic";
-import { Hint } from "./hint";
 const PAGE_SIZE = 20;
 const LIVE = process.env.NEXT_PUBLIC_BOX_GIFT_CARDS_LIVE === "true";
 const LIVE_REFRESH_MS = 2e3;
@@ -73,6 +65,24 @@ function statusClass(status) {
       return "bg-[var(--bg-muted)] text-[var(--text-tertiary)]";
   }
 }
+function Modal({ title, onClose, children }) {
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-end justify-center bg-black/40 sm:items-center sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "max-h-[92vh] w-full overflow-y-auto bg-[var(--bg-base)] sm:max-w-xl sm:rounded-md sm:border sm:border-[var(--border-default)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between border-b border-[var(--border-default)] bg-[var(--bg-base)] px-4 py-3", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-[var(--text-primary)]", children: title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-md p-2 text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)]",
+          "aria-label": "Close",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    children
+  ] }) });
+}
 function IssueGiftCardModal({
   currency,
   merchantName,
@@ -80,16 +90,6 @@ function IssueGiftCardModal({
   onCreated
 }) {
   const { tenant } = useAuth();
-  const formId = useId();
-  const ids = {
-    amount: `${formId}-amount`,
-    recipientName: `${formId}-recipient-name`,
-    recipientEmail: `${formId}-recipient-email`,
-    purchaserName: `${formId}-purchaser-name`,
-    purchaserEmail: `${formId}-purchaser-email`,
-    message: `${formId}-message`,
-    expiresAt: `${formId}-expires-at`
-  };
   const [form, setForm] = useState({
     originalAmount: 0,
     currency,
@@ -115,233 +115,178 @@ function IssueGiftCardModal({
       setSaving(false);
     }
   };
-  const symbol = currencySymbol(form.currency || currency);
-  return /* @__PURE__ */ jsx(
-    FormDialog,
-    {
-      title: "Issue gift card",
-      description: "We create the code for you. Fields marked * are required.",
-      size: "lg",
-      className: "max-w-4xl",
-      onClose,
-      footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }),
+  const inputClass = "w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm text-[var(--text-primary)] focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20";
+  return /* @__PURE__ */ jsx(Modal, { title: "Issue gift card", onClose, children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-5 p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] sm:items-start", children: [
+      /* @__PURE__ */ jsx(
+        GiftCardArtwork,
+        {
+          design: form.design ?? GIFT_CARD_PRESETS[0],
+          merchantName,
+          amount: form.originalAmount > 0 ? new Intl.NumberFormat(void 0, {
+            style: "currency",
+            currency: form.currency || currency
+          }).format(form.originalAmount) : void 0,
+          recipientName: form.recipientName,
+          senderName: form.purchaserName
+        }
+      ),
+      /* @__PURE__ */ jsxs("fieldset", { children: [
+        /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Design" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-4 gap-2 sm:grid-cols-1", children: GIFT_CARD_PRESETS.map((design) => {
+          const selected = form.design?.designId === design.designId;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setField("design", design),
+              className: `flex min-w-0 items-center gap-2 rounded-md border p-2 text-left text-xs font-medium ${selected ? "border-brand-500 bg-brand-500/10 text-[var(--text-primary)]" : "border-[var(--border-default)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
+              "aria-label": design.name,
+              "aria-pressed": selected,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "h-5 w-5 shrink-0 rounded-sm border border-black/10",
+                    style: { backgroundColor: design.palette.background }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "hidden truncate sm:block", children: design.name })
+              ]
+            },
+            design.designId
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Amount" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            type: "number",
+            min: "0.01",
+            step: "0.01",
+            required: true,
+            value: form.originalAmount || "",
+            onChange: (event) => setField("originalAmount", Number(event.target.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Currency" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            readOnly: true,
+            required: true,
+            value: form.currency
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Recipient name" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            value: form.recipientName ?? "",
+            onChange: (event) => setField("recipientName", event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-muted)]", children: "The person who receives the gift card and spends it." })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Recipient email" }),
         /* @__PURE__ */ jsx(
-          Button,
+          "input",
           {
-            type: "submit",
-            form: formId,
-            disabled: saving || form.originalAmount <= 0,
-            children: saving ? "Issuing..." : "Issue gift card"
+            className: inputClass,
+            type: "email",
+            value: form.recipientEmail ?? "",
+            onChange: (event) => setField("recipientEmail", event.target.value)
           }
         )
       ] }),
-      children: /* @__PURE__ */ jsxs(
-        "form",
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Purchaser name" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            value: form.purchaserName ?? "",
+            onChange: (event) => setField("purchaserName", event.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-muted)]", children: "The person paying for the gift card." })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Purchaser email" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: inputClass,
+            type: "email",
+            value: form.purchaserEmail ?? "",
+            onChange: (event) => setField("purchaserEmail", event.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Personal message" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
         {
-          id: formId,
-          onSubmit: submit,
-          className: "grid gap-6 md:grid-cols-[17rem_minmax(0,1fr)]",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:self-start", children: [
-              /* @__PURE__ */ jsx(
-                GiftCardArtwork,
-                {
-                  design: form.design ?? GIFT_CARD_PRESETS[0],
-                  merchantName,
-                  amount: form.originalAmount > 0 ? new Intl.NumberFormat(void 0, {
-                    style: "currency",
-                    currency: form.currency || currency
-                  }).format(form.originalAmount) : void 0,
-                  recipientName: form.recipientName,
-                  senderName: form.purchaserName
-                }
-              ),
-              /* @__PURE__ */ jsxs("fieldset", { children: [
-                /* @__PURE__ */ jsx("legend", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Design" }),
-                /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-4 gap-2 md:grid-cols-2", children: GIFT_CARD_PRESETS.map((design) => {
-                  const selected = form.design?.designId === design.designId;
-                  return /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => setField("design", design),
-                      className: `flex min-w-0 items-center gap-2 rounded-md border p-2 text-left text-xs font-medium ${selected ? "border-brand-500 bg-brand-500/10 text-[var(--text-primary)]" : "border-[var(--border-default)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
-                      "aria-label": design.name,
-                      "aria-pressed": selected,
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: "h-5 w-5 shrink-0 rounded-sm border border-black/10",
-                            style: { backgroundColor: design.palette.background }
-                          }
-                        ),
-                        /* @__PURE__ */ jsx("span", { className: "hidden truncate md:block", children: design.name })
-                      ]
-                    },
-                    design.designId
-                  );
-                }) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx(
-                Field,
-                {
-                  label: "Amount",
-                  htmlFor: ids.amount,
-                  required: true,
-                  hint: `In ${form.currency || currency}, your business currency. It cannot be changed here.`,
-                  children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "aria-hidden": true,
-                        className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm text-[var(--text-tertiary)]",
-                        children: symbol
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        id: ids.amount,
-                        type: "number",
-                        min: "0.01",
-                        step: "0.01",
-                        required: true,
-                        "aria-required": true,
-                        className: symbol.length > 2 ? "pl-14" : "pl-8",
-                        value: form.originalAmount || "",
-                        onChange: (event) => setField("originalAmount", Number(event.target.value))
-                      }
-                    )
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                /* @__PURE__ */ jsx(
-                  Field,
-                  {
-                    label: "Recipient name",
-                    htmlFor: ids.recipientName,
-                    hint: "Optional. Who receives and spends the card.",
-                    children: /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        id: ids.recipientName,
-                        value: form.recipientName ?? "",
-                        onChange: (event) => setField("recipientName", event.target.value)
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Field,
-                  {
-                    label: "Recipient email",
-                    htmlFor: ids.recipientEmail,
-                    hint: "Optional. Nothing is emailed when you issue. Send it from the card's details.",
-                    children: /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        id: ids.recipientEmail,
-                        type: "email",
-                        value: form.recipientEmail ?? "",
-                        onChange: (event) => setField("recipientEmail", event.target.value)
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Field,
-                  {
-                    label: "Purchaser name",
-                    htmlFor: ids.purchaserName,
-                    hint: "Optional. Who is paying for the card.",
-                    children: /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        id: ids.purchaserName,
-                        value: form.purchaserName ?? "",
-                        onChange: (event) => setField("purchaserName", event.target.value)
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Field,
-                  {
-                    label: "Purchaser email",
-                    htmlFor: ids.purchaserEmail,
-                    hint: "Optional.",
-                    children: /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        id: ids.purchaserEmail,
-                        type: "email",
-                        value: form.purchaserEmail ?? "",
-                        onChange: (event) => setField("purchaserEmail", event.target.value)
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                Field,
-                {
-                  label: "Personal message",
-                  htmlFor: ids.message,
-                  hint: "Optional. Up to 500 characters.",
-                  children: /* @__PURE__ */ jsx(
-                    Textarea,
-                    {
-                      id: ids.message,
-                      rows: 3,
-                      maxLength: 500,
-                      value: form.personalMessage ?? "",
-                      onChange: (event) => setField("personalMessage", event.target.value)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Field,
-                {
-                  label: "Expiration date",
-                  htmlFor: ids.expiresAt,
-                  hint: "Optional. Leave it empty and the card has no expiry date.",
-                  children: /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      id: ids.expiresAt,
-                      type: "date",
-                      min: minimumExpirationDate(),
-                      value: form.expiresAt ?? "",
-                      onChange: (event) => setField("expiresAt", event.target.value)
-                    }
-                  )
-                }
-              ),
-              error && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  role: "alert",
-                  className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]",
-                  children: error
-                }
-              )
-            ] })
-          ]
+          className: `${inputClass} min-h-24 resize-y`,
+          maxLength: 500,
+          value: form.personalMessage ?? "",
+          onChange: (event) => setField("personalMessage", event.target.value)
         }
       )
-    }
-  );
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Expiration date" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: inputClass,
+          type: "date",
+          min: minimumExpirationDate(),
+          value: form.expiresAt ?? "",
+          onChange: (event) => setField("expiresAt", event.target.value)
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-[var(--border-default)] pt-4", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-md border border-[var(--border-default)] px-4 py-2 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: saving || form.originalAmount <= 0,
+          className: "rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-[var(--text-inverse)] hover:bg-brand-600 disabled:opacity-50",
+          children: saving ? "Issuing..." : "Issue gift card"
+        }
+      )
+    ] })
+  ] }) });
 }
 function BalanceModal({ onClose, initialCode = "" }) {
   const { tenant } = useAuth();
   const formatCurrency = useFormatCurrency();
-  const codeId = useId();
   const [code, setCode] = useState(initialCode);
   const [checking, setChecking] = useState(false);
   const [result, setResult] = useState(null);
@@ -359,36 +304,35 @@ function BalanceModal({ onClose, initialCode = "" }) {
       setChecking(false);
     }
   };
-  return /* @__PURE__ */ jsx(FormDialog, { title: "Check gift card balance", size: "sm", onClose, children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
-    /* @__PURE__ */ jsx(Field, { label: "Gift card code", htmlFor: codeId, required: true, children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: codeId,
-        required: true,
-        "aria-required": true,
-        autoComplete: "off",
-        spellCheck: false,
-        className: "font-mono uppercase",
-        value: code,
-        onChange: (event) => {
-          setCode(event.target.value.toUpperCase());
-          setResult(null);
+  return /* @__PURE__ */ jsx(Modal, { title: "Check gift card balance", onClose, children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4 p-4", children: [
+    /* @__PURE__ */ jsxs("label", { className: "block space-y-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "Gift card code" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: true,
+          className: "w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 font-mono text-sm uppercase text-[var(--text-primary)] focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20",
+          value: code,
+          onChange: (event) => {
+            setCode(event.target.value.toUpperCase());
+            setResult(null);
+          }
         }
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: result && /* @__PURE__ */ jsx(
+      )
+    ] }),
+    result && /* @__PURE__ */ jsx(
       "div",
       {
         className: `rounded-md p-4 ${result.valid ? "bg-[var(--success-bg)] text-[var(--success)]" : "bg-[var(--error-bg)] text-[var(--error)]"}`,
         children: result.valid ? `Available balance: ${formatCurrency(result.balance ?? 0)}` : result.error || "This gift card is not valid."
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx(
-      Button,
+      "button",
       {
         type: "submit",
-        className: "w-full",
         disabled: checking || !code.trim(),
+        className: "w-full rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-[var(--text-inverse)] hover:bg-brand-600 disabled:opacity-50",
         children: checking ? "Checking..." : "Check balance"
       }
     )
@@ -465,7 +409,7 @@ function GiftCardDetailModal({
     if (!tenant?.slug) return;
     setSaving(true);
     try {
-      await giftcardsApi.cancel(tenant.slug, giftCard.id);
+      await giftCardsApi.delete(tenant.slug, giftCard.id);
       toast({ title: "Gift card cancelled" });
       onChanged();
       onClose();
@@ -474,63 +418,60 @@ function GiftCardDetailModal({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ jsx(FormDialog, { title: "Gift card details", onClose, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+  return /* @__PURE__ */ jsx(Modal, { title: "Gift card details", onClose, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsx(GiftCardArtwork, { ...artworkData }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Button,
+      /* @__PURE__ */ jsxs(
+        "button",
         {
           type: "button",
-          variant: "secondary",
-          icon: /* @__PURE__ */ jsx(Download, {}),
           onClick: () => downloadGiftCardArtwork(artworkData),
-          children: "Download"
+          className: "flex items-center justify-center gap-2 rounded-md border border-[var(--border-default)] px-3 py-2 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]",
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+            "Download"
+          ]
         }
       ),
-      /* @__PURE__ */ jsx(
-        Tooltip,
+      /* @__PURE__ */ jsxs(
+        "button",
         {
-          label: giftCard.recipientEmail ? "" : "Add a recipient email to send this card",
-          children: /* @__PURE__ */ jsx("span", { className: "block", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "secondary",
-              icon: /* @__PURE__ */ jsx(Mail, {}),
-              className: "w-full",
-              onClick: sendByEmail,
-              disabled: sharing || !giftCard.recipientEmail,
-              children: sharing ? "Sending..." : "Send by email"
-            }
-          ) })
+          type: "button",
+          onClick: sendByEmail,
+          disabled: sharing || !giftCard.recipientEmail,
+          title: giftCard.recipientEmail ? void 0 : "Add a recipient email to send this card",
+          className: "flex items-center justify-center gap-2 rounded-md bg-brand-500 px-3 py-2 text-sm font-medium text-[var(--text-inverse)] hover:bg-brand-600 disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4" }),
+            sharing ? "Sending..." : "Send by email"
+          ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-[var(--border-default)] bg-[var(--bg-subtle)] p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--text-muted)]", children: "Code" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-[var(--text-muted)]", children: "Code" }),
           /* @__PURE__ */ jsx("p", { className: "mt-1 font-mono text-xl font-semibold text-[var(--text-primary)]", children: giftCard.code })
         ] }),
         /* @__PURE__ */ jsx(
-          Button,
+          "button",
           {
             type: "button",
-            variant: "secondary",
-            size: "icon-sm",
-            "aria-label": "Copy code",
             onClick: copyCode,
-            children: /* @__PURE__ */ jsx(Copy, {})
+            className: "rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] p-2 text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]",
+            title: "Copy code",
+            children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Balance left" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Balance" }),
           /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) })
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Original value" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Issued value" }),
           /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(
             Number(giftCard.originalAmount),
             giftCard.currency
@@ -550,41 +491,44 @@ function GiftCardDetailModal({
       /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Redeem value" }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsx(
-          Input,
+          "input",
           {
-            label: "Amount",
             type: "number",
             min: "0.01",
             max: Number(giftCard.balance),
             step: "0.01",
             required: true,
-            "aria-required": true,
+            placeholder: "Amount",
             value: amount,
-            onChange: (event) => setAmount(event.target.value)
+            onChange: (event) => setAmount(event.target.value),
+            className: "rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
           }
         ),
         /* @__PURE__ */ jsx(
-          Input,
+          "input",
           {
-            label: "Order or reference ID (optional)",
+            placeholder: "Order or reference ID",
             value: referenceId,
-            onChange: (event) => setReferenceId(event.target.value)
+            onChange: (event) => setReferenceId(event.target.value),
+            className: "rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
           }
         )
       ] }),
       /* @__PURE__ */ jsx(
-        Input,
+        "input",
         {
-          label: "Note (optional)",
+          placeholder: "Note (optional)",
           value: note,
-          onChange: (event) => setNote(event.target.value)
+          onChange: (event) => setNote(event.target.value),
+          className: "w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-3 py-2 text-sm focus:border-brand-500 focus:outline-none"
         }
       ),
       /* @__PURE__ */ jsx(
-        Button,
+        "button",
         {
           type: "submit",
           disabled: saving || !amount || Number(amount) <= 0,
+          className: "rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-[var(--text-inverse)] hover:bg-brand-600 disabled:opacity-50",
           children: saving ? "Redeeming..." : "Redeem gift card"
         }
       )
@@ -612,15 +556,8 @@ function GiftCardDetailModal({
         redemption.id
       )) })
     ] }),
-    error && /* @__PURE__ */ jsx(
-      "p",
-      {
-        role: "alert",
-        className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]",
-        children: error
-      }
-    ),
-    giftCard.status !== "cancelled" && /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-[var(--border-default)] pt-4", children: /* @__PURE__ */ jsx(
+    error && /* @__PURE__ */ jsx("p", { className: "rounded-md bg-[var(--error-bg)] px-3 py-2 text-sm text-[var(--error)]", children: error }),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-[var(--border-default)] pt-4", children: /* @__PURE__ */ jsx(
       InlineDeleteButton,
       {
         onDelete: remove,
@@ -636,14 +573,12 @@ function GiftCardsFeature() {
   const { tenant } = useAuth();
   const formatCurrency = useFormatCurrency();
   const { toast } = useToast();
-  const slug = tenant?.slug;
   const currency = normalizeCurrencyCode(
     tenant?.settings?.currency
   );
   const [giftCards, setGiftCards] = useState([]);
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [loaded, setLoaded] = useState(false);
   const [search, setSearch] = useState("");
   const [status, setStatus] = useState("");
   const [page, setPage] = useState(1);
@@ -651,386 +586,313 @@ function GiftCardsFeature() {
   const [showIssue, setShowIssue] = useState(false);
   const [showBalance, setShowBalance] = useState(false);
   const [selected, setSelected] = useState(null);
-  const [dedupe] = useState(createInFlightDeduper);
-  const toastRef = useRef(toast);
-  useEffect(() => {
-    toastRef.current = toast;
-  });
   const latestRead = useRef(0);
   const readGiftCards = useCallback(
     async (quiet) => {
-      if (!slug) return;
+      if (!tenant?.slug) return;
       const read = quiet ? latestRead.current : ++latestRead.current;
       if (!quiet) setLoading(true);
-      const query = {
-        ...status ? { status } : {},
-        ...search.trim() ? { search: search.trim() } : {},
-        page,
-        limit: PAGE_SIZE
-      };
       try {
-        const list = await dedupe.run(
-          `list:${slug}:${JSON.stringify(query)}`,
-          () => giftCardsApi.list(slug, query)
-        );
+        const [list, giftCardStats] = await Promise.all([
+          giftCardsApi.list(tenant.slug, {
+            ...status ? { status } : {},
+            ...search.trim() ? { search: search.trim() } : {},
+            page,
+            limit: PAGE_SIZE
+          }),
+          giftCardsApi.stats(tenant.slug)
+        ]);
         if (read !== latestRead.current) return;
         setGiftCards(list.rows);
         setCount(list.count);
+        setStats(giftCardStats);
       } catch (loadError) {
         if (quiet) throw loadError;
-        toastRef.current({
+        toast({
           title: "Unable to load gift cards",
           description: errorMessage(loadError)
         });
       } finally {
-        if (!quiet && read === latestRead.current) {
-          setLoading(false);
-          setLoaded(true);
-        }
-      }
-    },
-    [dedupe, page, search, slug, status]
-  );
-  const readStats = useCallback(
-    async (quiet) => {
-      if (!slug) return;
-      try {
-        setStats(await dedupe.run(`stats:${slug}`, () => giftCardsApi.stats(slug)));
-      } catch (statsError) {
-        if (quiet) throw statsError;
+        if (!quiet) setLoading(false);
       }
     },
-    [dedupe, slug]
-  );
-  const reloadAll = useCallback(
-    () => Promise.all([readGiftCards(false), readStats(false)]),
-    [readGiftCards, readStats]
+    [page, search, status, tenant?.slug, toast]
   );
+  const loadGiftCards = useCallback(() => readGiftCards(false), [readGiftCards]);
   useEffect(() => {
-    readGiftCards(false);
-  }, [readGiftCards]);
-  useEffect(() => {
-    readStats(false);
-  }, [readStats]);
+    loadGiftCards();
+  }, [loadGiftCards]);
   useQuietPoll(
-    useCallback(
-      () => Promise.all([readGiftCards(true), readStats(true)]),
-      [readGiftCards, readStats]
-    ),
+    useCallback(() => readGiftCards(true), [readGiftCards]),
     LIVE_REFRESH_MS,
     LIVE
   );
-  useRegisterRefresh(reloadAll);
+  useRegisterRefresh(loadGiftCards);
   const copyCode = async (event, code) => {
     event.stopPropagation();
     await navigator.clipboard.writeText(code);
     toast({ title: "Gift card code copied", description: code });
   };
   const totalPages = Math.max(1, Math.ceil(count / PAGE_SIZE));
-  const hasFilters = Boolean(search.trim() || status);
-  const firstRun = loaded && isFirstRun({
-    loading,
-    search,
-    status,
-    count,
-    totalIssued: stats?.totalIssued
-  });
-  const hasCards = loaded && !firstRun;
-  const showStats = hasCards && stats !== null;
-  const openIssue = () => setShowIssue(true);
-  const openBalance = () => setShowBalance(true);
-  return /* @__PURE__ */ jsxs(
-    ListPage,
-    {
-      largeTitle: true,
-      title: "Gift cards",
-      mobileHeader: /* @__PURE__ */ jsx(
-        MobilePageHeader,
+  const filters = [
+    { value: "", label: "All" },
+    { value: "active", label: "Active" },
+    { value: "used", label: "Used" },
+    { value: "expired", label: "Expired" },
+    { value: "cancelled", label: "Cancelled" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl space-y-5 lg:space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      MobilePageHeader,
+      {
+        title: "Gift cards",
+        action: { label: "Issue gift card", onClick: () => setShowIssue(true) }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "hidden items-center justify-between gap-3 lg:flex", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-[var(--text-primary)]", children: "Gift cards" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-tertiary)]", children: "Credit a customer pays for now and spends later. Discounts and loyalty points cost the customer nothing." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        !LIVE && /* @__PURE__ */ jsx(RefreshButton, { onClick: loadGiftCards, refreshing: loading }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowBalance(true),
+            className: "flex items-center gap-2 rounded-md border border-[var(--border-default)] px-3 py-2 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]",
+            children: [
+              /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" }),
+              "Check balance"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowIssue(true),
+            className: "flex items-center gap-2 rounded-md bg-brand-500 px-4 py-2 text-sm font-medium text-[var(--text-inverse)] hover:bg-brand-600",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+              "Issue gift card"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs(MetricRow, { children: [
+      /* @__PURE__ */ jsx(
+        MetricTile,
         {
-          title: "Gift cards",
-          action: hasCards ? { label: "Issue gift card", onClick: openIssue } : void 0
+          label: "Issued value",
+          value: formatCurrency(stats?.totalIssued ?? 0, currency)
         }
       ),
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Hint, { lines: PAGE_HINT_LINES, topic: "gift cards" }),
-        !LIVE && /* @__PURE__ */ jsx(RefreshButton, { onClick: reloadAll, refreshing: loading }),
-        hasCards && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "secondary",
-              icon: /* @__PURE__ */ jsx(Search, {}),
-              onClick: openBalance,
-              children: "Check balance"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "button", icon: /* @__PURE__ */ jsx(Plus, {}), onClick: openIssue, children: "Issue gift card" })
-        ] })
+      /* @__PURE__ */ jsx(
+        MetricTile,
+        {
+          label: "Outstanding",
+          value: formatCurrency(stats?.outstanding ?? 0, currency)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MetricTile,
+        {
+          label: "Redeemed",
+          value: formatCurrency(stats?.redeemed ?? 0, currency)
+        }
+      ),
+      /* @__PURE__ */ jsx(MetricTile, { label: "Active cards", value: stats?.activeCards ?? 0 })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-px overflow-hidden rounded-md bg-[var(--border-default)] lg:hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Outstanding" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: formatCurrency(stats?.outstanding ?? 0, currency) })
       ] }),
-      children: [
-        showStats && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxs(MetricRow, { children: [
-            /* @__PURE__ */ jsx(
-              MetricTile,
-              {
-                label: "Total sold",
-                value: formatCurrency(stats?.totalIssued ?? 0, currency)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              MetricTile,
-              {
-                label: "Still to spend",
-                value: formatCurrency(stats?.outstanding ?? 0, currency)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              MetricTile,
-              {
-                label: "Spent",
-                value: formatCurrency(stats?.redeemed ?? 0, currency)
-              }
-            ),
-            /* @__PURE__ */ jsx(MetricTile, { label: "Cards in use", value: stats?.activeCards ?? 0 })
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-px overflow-hidden rounded-md bg-[var(--border-default)] lg:hidden", children: [
-            /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Still to spend" }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: formatCurrency(stats?.outstanding ?? 0, currency) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Cards in use" }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: stats?.activeCards ?? 0 })
-            ] })
-          ] })
-        ] }),
-        hasCards && /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto lg:hidden", children: /* @__PURE__ */ jsx(
-          Button,
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] p-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Active cards" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold text-[var(--text-primary)]", children: stats?.activeCards ?? 0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 overflow-x-auto lg:hidden", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowIssue(true),
+          className: "flex shrink-0 items-center gap-1.5 rounded-full bg-brand-500 px-3.5 py-2 text-sm font-medium text-[var(--text-inverse)]",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+            "Issue gift card"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowBalance(true),
+          className: "flex shrink-0 items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-3.5 py-2 text-sm font-medium text-[var(--text-secondary)]",
+          children: [
+            /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" }),
+            "Check balance"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            type: "button",
-            variant: "secondary",
-            shape: "pill",
-            icon: /* @__PURE__ */ jsx(Search, {}),
-            onClick: openBalance,
-            children: "Check balance"
+            type: "search",
+            placeholder: "Search code, recipient, or email",
+            value: search,
+            onChange: (event) => {
+              setSearch(event.target.value);
+              setPage(1);
+            },
+            className: "w-full rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] py-2 pl-10 pr-3 text-sm focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
           }
-        ) }),
-        !firstRun && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-            /* @__PURE__ */ jsx(
-              Search,
-              {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-[var(--text-muted)]"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "search",
-                "aria-label": "Search gift cards",
-                placeholder: "Search code, recipient, or email",
-                value: search,
-                onChange: (event) => {
-                  setSearch(event.target.value);
-                  setPage(1);
-                },
-                className: "pl-10"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto", children: filters.map((filter) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setStatus(filter.value);
+            setPage(1);
+          },
+          className: `shrink-0 rounded-md px-3 py-2 text-sm font-medium ${status === filter.value ? "bg-brand-500 text-[var(--text-inverse)]" : "border border-[var(--border-default)] bg-[var(--bg-base)] text-[var(--text-secondary)] hover:bg-[var(--interactive-hover)]"}`,
+          children: filter.label
+        },
+        filter.value
+      )) })
+    ] }),
+    loading && giftCards.length === 0 && /* @__PURE__ */ jsx(InlineListSkeleton, {}),
+    !loading && giftCards.length === 0 && /* @__PURE__ */ jsx(
+      TableEmptyState,
+      {
+        icon: Gift,
+        title: search || status ? "No gift cards found" : "Issue your first gift card",
+        description: search || status ? "Try changing the search or status filter" : "Create a stored-value card for a customer or walk-in purchase"
+      }
+    ),
+    giftCards.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2 lg:hidden", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setSelected(giftCard),
+          className: "flex w-full items-center justify-between gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] p-4 text-left",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-sm font-semibold text-[var(--text-primary)]", children: giftCard.code }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[var(--text-tertiary)]", children: giftCard.recipientName || giftCard.recipientEmail || "Walk-in" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
+              /* @__PURE__ */ jsx("span", { className: `text-xs capitalize ${statusClass(giftCard.status)}`, children: giftCard.status })
+            ] })
+          ]
+        },
+        giftCard.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden overflow-x-auto rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] lg:block", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[760px]", children: [
+        /* @__PURE__ */ jsx("thead", { className: "border-b border-[var(--border-default)] bg-[var(--bg-subtle)]", children: /* @__PURE__ */ jsx("tr", { children: ["Code", "Recipient", "Issued", "Balance", "Expires", "Status"].map(
+          (heading) => /* @__PURE__ */ jsx(
+            "th",
             {
-              role: "group",
-              "aria-label": "Filter by status",
-              className: "flex gap-1 overflow-x-auto",
-              children: STATUS_FILTERS.map((filter) => {
-                const pressed = status === filter.value;
-                return /* @__PURE__ */ jsx(Tooltip, { label: filter.hint, children: /* @__PURE__ */ jsx(
-                  Button,
+              className: "px-4 py-3 text-left text-xs font-medium uppercase text-[var(--text-tertiary)]",
+              children: heading
+            },
+            heading
+          )
+        ) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-[var(--border-default)]", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            onClick: () => setSelected(giftCard),
+            className: "cursor-pointer hover:bg-[var(--interactive-hover)]",
+            children: [
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-medium text-[var(--text-primary)]", children: giftCard.code }),
+                /* @__PURE__ */ jsx(
+                  "button",
                   {
                     type: "button",
-                    size: "sm",
-                    variant: pressed ? "secondary" : "ghost",
-                    "aria-pressed": pressed,
-                    className: "shrink-0",
-                    onClick: () => {
-                      setStatus(filter.value);
-                      setPage(1);
-                    },
-                    children: filter.label
+                    onClick: (event) => copyCode(event, giftCard.code),
+                    className: "rounded p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]",
+                    title: "Copy code",
+                    children: /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
                   }
-                ) }, filter.value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("h2", { className: "sr-only", children: "Issued gift cards" }),
-        !loaded && /* @__PURE__ */ jsx(InlineListSkeleton, {}),
-        loading && loaded && giftCards.length === 0 && /* @__PURE__ */ jsx(InlineListSkeleton, {}),
-        firstRun && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            TableEmptyState,
-            {
-              icon: Gift,
-              title: "Issue your first gift card",
-              description: "Create a stored-value card for a customer or walk-in purchase",
-              action: { label: "Issue gift card", onClick: openIssue }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              icon: /* @__PURE__ */ jsx(Search, {}),
-              onClick: openBalance,
-              children: "Check balance"
-            }
-          ) })
-        ] }),
-        loaded && !loading && !firstRun && giftCards.length === 0 && /* @__PURE__ */ jsx(
-          TableEmptyState,
-          {
-            icon: Gift,
-            title: "No gift cards found",
-            description: "Try changing the search or status filter",
-            action: hasFilters ? {
-              label: "Clear search and filters",
-              onClick: () => {
-                setSearch("");
-                setStatus("");
-                setPage(1);
-              }
-            } : void 0
-          }
-        ),
-        giftCards.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "space-y-2 lg:hidden", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setSelected(giftCard),
-              className: "flex w-full items-center justify-between gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] p-4 text-left",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-sm font-semibold text-[var(--text-primary)]", children: giftCard.code }),
-                  /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[var(--text-tertiary)]", children: giftCard.recipientName || giftCard.recipientEmail || "Walk-in" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
-                  /* @__PURE__ */ jsx("span", { className: `text-xs ${statusClass(giftCard.status)}`, children: STATUS_LABEL[giftCard.status] })
-                ] })
-              ]
-            },
-            giftCard.id
-          )) }),
-          /* @__PURE__ */ jsx("div", { className: "hidden overflow-x-auto rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] lg:block", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[760px]", children: [
-            /* @__PURE__ */ jsx("thead", { className: "border-b border-[var(--border-default)] bg-[var(--bg-subtle)]", children: /* @__PURE__ */ jsx("tr", { children: ["Code", "Recipient", "Issued", "Balance", "Expires", "Status"].map(
-              (heading) => /* @__PURE__ */ jsx(
-                "th",
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: giftCard.recipientName || "Walk-in" }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: giftCard.recipientEmail })
+              ] }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: formatCurrency(
+                Number(giftCard.originalAmount),
+                giftCard.currency
+              ) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm font-medium text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: dateLabel(giftCard.expiresAt) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                "span",
                 {
-                  scope: "col",
-                  className: "px-4 py-3 text-left text-xs font-medium uppercase text-[var(--text-tertiary)]",
-                  children: heading
-                },
-                heading
-              )
-            ) }) }),
-            /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-[var(--border-default)]", children: giftCards.map((giftCard) => /* @__PURE__ */ jsxs(
-              "tr",
-              {
-                tabIndex: 0,
-                "aria-label": `Open gift card ${giftCard.code}`,
-                onClick: () => setSelected(giftCard),
-                onKeyDown: (event) => {
-                  if (event.target !== event.currentTarget) return;
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    setSelected(giftCard);
-                  }
-                },
-                className: "cursor-pointer hover:bg-[var(--interactive-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--focus-ring)]",
-                children: [
-                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-medium text-[var(--text-primary)]", children: giftCard.code }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-sm",
-                        "aria-label": `Copy code ${giftCard.code}`,
-                        onClick: (event) => copyCode(event, giftCard.code),
-                        children: /* @__PURE__ */ jsx(Copy, {})
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxs("td", { className: "px-4 py-3", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-primary)]", children: giftCard.recipientName || "Walk-in" }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: giftCard.recipientEmail })
-                  ] }),
-                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: formatCurrency(
-                    Number(giftCard.originalAmount),
-                    giftCard.currency
-                  ) }),
-                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm font-medium text-[var(--text-primary)]", children: formatCurrency(Number(giftCard.balance), giftCard.currency) }),
-                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-sm text-[var(--text-secondary)]", children: dateLabel(giftCard.expiresAt) }),
-                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${statusClass(giftCard.status)}`,
-                      children: STATUS_LABEL[giftCard.status]
-                    }
-                  ) })
-                ]
-              },
-              giftCard.id
-            )) })
-          ] }) }),
-          /* @__PURE__ */ jsx(
-            TablePagination,
-            {
-              page,
-              totalPages,
-              pageSize: PAGE_SIZE,
-              totalItems: count,
-              entityName: "gift cards",
-              onPageChange: setPage
-            }
-          )
-        ] }),
-        showIssue && /* @__PURE__ */ jsx(
-          IssueGiftCardModal,
-          {
-            currency,
-            merchantName: tenant?.businessName || "Gift card",
-            onClose: () => setShowIssue(false),
-            onCreated: (giftCard) => {
-              setShowIssue(false);
-              setSelected(giftCard);
-              toast({
-                title: "Gift card issued",
-                description: giftCard.code
-              });
-              reloadAll();
-            }
-          }
-        ),
-        showBalance && /* @__PURE__ */ jsx(BalanceModal, { onClose: () => setShowBalance(false) }),
-        selected && /* @__PURE__ */ jsx(
-          GiftCardDetailModal,
-          {
-            giftCard: selected,
-            onClose: () => setSelected(null),
-            onChanged: reloadAll
-          }
-        )
-      ]
-    }
-  );
+                  className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium capitalize ${statusClass(giftCard.status)}`,
+                  children: giftCard.status
+                }
+              ) })
+            ]
+          },
+          giftCard.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        TablePagination,
+        {
+          page,
+          totalPages,
+          pageSize: PAGE_SIZE,
+          totalItems: count,
+          entityName: "gift cards",
+          onPageChange: setPage
+        }
+      )
+    ] }),
+    showIssue && /* @__PURE__ */ jsx(
+      IssueGiftCardModal,
+      {
+        currency,
+        merchantName: tenant?.businessName || "Gift card",
+        onClose: () => setShowIssue(false),
+        onCreated: (giftCard) => {
+          setShowIssue(false);
+          setSelected(giftCard);
+          toast({
+            title: "Gift card issued",
+            description: giftCard.code
+          });
+          loadGiftCards();
+        }
+      }
+    ),
+    showBalance && /* @__PURE__ */ jsx(BalanceModal, { onClose: () => setShowBalance(false) }),
+    selected && /* @__PURE__ */ jsx(
+      GiftCardDetailModal,
+      {
+        giftCard: selected,
+        onClose: () => setSelected(null),
+        onChanged: loadGiftCards
+      }
+    )
+  ] });
 }
 export {
   GiftCardsFeature