@withpotter/components 0.13.0-next.82 → 0.13.0-next.85

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

@@ -1,21 +1,20 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Copy,
-  Download,
-  Gift,
-  History,
-  Mail,
-  Plus,
-  Search,
-  X
-} from "lucide-react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Copy, Download, Gift, History, Mail, Plus, Search } 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";
@@ -34,6 +33,15 @@ 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;
@@ -65,24 +73,6 @@ 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,
@@ -90,6 +80,16 @@ 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,178 +115,233 @@ function IssueGiftCardModal({
       setSaving(false);
     }
   };
-  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" }),
+  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" }),
         /* @__PURE__ */ jsx(
-          "input",
+          Button,
           {
-            className: inputClass,
-            type: "email",
-            value: form.recipientEmail ?? "",
-            onChange: (event) => setField("recipientEmail", event.target.value)
+            type: "submit",
+            form: formId,
+            disabled: saving || form.originalAmount <= 0,
+            children: saving ? "Issuing..." : "Issue 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 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",
-        {
-          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",
+      children: /* @__PURE__ */ jsxs(
+        "form",
         {
-          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"
+          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
+                }
+              )
+            ] })
+          ]
         }
       )
-    ] })
-  ] }) });
+    }
+  );
 }
 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);
@@ -304,35 +359,36 @@ function BalanceModal({ onClose, initialCode = "" }) {
       setChecking(false);
     }
   };
-  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);
-          }
+  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);
         }
-      )
-    ] }),
-    result && /* @__PURE__ */ jsx(
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: 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"
       }
     )
@@ -409,7 +465,7 @@ function GiftCardDetailModal({
     if (!tenant?.slug) return;
     setSaving(true);
     try {
-      await giftCardsApi.delete(tenant.slug, giftCard.id);
+      await giftcardsApi.cancel(tenant.slug, giftCard.id);
       toast({ title: "Gift card cancelled" });
       onChanged();
       onClose();
@@ -418,60 +474,63 @@ function GiftCardDetailModal({
       setSaving(false);
     }
   };
-  return /* @__PURE__ */ jsx(Modal, { title: "Gift card details", onClose, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
+  return /* @__PURE__ */ jsx(FormDialog, { title: "Gift card details", onClose, children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
     /* @__PURE__ */ jsx(GiftCardArtwork, { ...artworkData }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(
+        Button,
         {
           type: "button",
+          variant: "secondary",
+          icon: /* @__PURE__ */ jsx(Download, {}),
           onClick: () => downloadGiftCardArtwork(artworkData),
-          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"
-          ]
+          children: "Download"
         }
       ),
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(
+        Tooltip,
         {
-          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"
-          ]
+          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"
+            }
+          ) })
         }
       )
     ] }),
     /* @__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 uppercase text-[var(--text-muted)]", children: "Code" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium 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,
-            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" })
+            children: /* @__PURE__ */ jsx(Copy, {})
           }
         )
       ] }),
       /* @__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" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Balance left" }),
           /* @__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: "Issued value" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: "Original value" }),
           /* @__PURE__ */ jsx("p", { className: "font-semibold text-[var(--text-primary)]", children: formatCurrency(
             Number(giftCard.originalAmount),
             giftCard.currency
@@ -491,44 +550,41 @@ 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,
-            placeholder: "Amount",
+            "aria-required": true,
             value: amount,
-            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"
+            onChange: (event) => setAmount(event.target.value)
           }
         ),
         /* @__PURE__ */ jsx(
-          "input",
+          Input,
           {
-            placeholder: "Order or reference ID",
+            label: "Order or reference ID (optional)",
             value: referenceId,
-            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"
+            onChange: (event) => setReferenceId(event.target.value)
           }
         )
       ] }),
       /* @__PURE__ */ jsx(
-        "input",
+        Input,
         {
-          placeholder: "Note (optional)",
+          label: "Note (optional)",
           value: note,
-          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"
+          onChange: (event) => setNote(event.target.value)
         }
       ),
       /* @__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"
         }
       )
@@ -556,8 +612,15 @@ function GiftCardDetailModal({
         redemption.id
       )) })
     ] }),
-    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(
+    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(
       InlineDeleteButton,
       {
         onDelete: remove,
@@ -573,12 +636,14 @@ 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);
@@ -586,313 +651,386 @@ 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 (!tenant?.slug) return;
+      if (!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, giftCardStats] = await Promise.all([
-          giftCardsApi.list(tenant.slug, {
-            ...status ? { status } : {},
-            ...search.trim() ? { search: search.trim() } : {},
-            page,
-            limit: PAGE_SIZE
-          }),
-          giftCardsApi.stats(tenant.slug)
-        ]);
+        const list = await dedupe.run(
+          `list:${slug}:${JSON.stringify(query)}`,
+          () => giftCardsApi.list(slug, query)
+        );
         if (read !== latestRead.current) return;
         setGiftCards(list.rows);
         setCount(list.count);
-        setStats(giftCardStats);
       } catch (loadError) {
         if (quiet) throw loadError;
-        toast({
+        toastRef.current({
           title: "Unable to load gift cards",
           description: errorMessage(loadError)
         });
       } finally {
-        if (!quiet) setLoading(false);
+        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;
       }
     },
-    [page, search, status, tenant?.slug, toast]
+    [dedupe, slug]
+  );
+  const reloadAll = useCallback(
+    () => Promise.all([readGiftCards(false), readStats(false)]),
+    [readGiftCards, readStats]
   );
-  const loadGiftCards = useCallback(() => readGiftCards(false), [readGiftCards]);
   useEffect(() => {
-    loadGiftCards();
-  }, [loadGiftCards]);
+    readGiftCards(false);
+  }, [readGiftCards]);
+  useEffect(() => {
+    readStats(false);
+  }, [readStats]);
   useQuietPoll(
-    useCallback(() => readGiftCards(true), [readGiftCards]),
+    useCallback(
+      () => Promise.all([readGiftCards(true), readStats(true)]),
+      [readGiftCards, readStats]
+    ),
     LIVE_REFRESH_MS,
     LIVE
   );
-  useRegisterRefresh(loadGiftCards);
+  useRegisterRefresh(reloadAll);
   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 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,
-        {
-          label: "Issued value",
-          value: formatCurrency(stats?.totalIssued ?? 0, currency)
-        }
-      ),
-      /* @__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) })
-      ] }),
-      /* @__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",
+  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,
         {
-          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"
-          ]
+          title: "Gift cards",
+          action: hasCards ? { label: "Issue gift card", onClick: openIssue } : void 0
         }
       ),
-      /* @__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: "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"
-          }
-        )
+      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("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" })
+      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: "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 })
+            /* @__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 })
             ] })
-          ]
-        },
-        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",
-            {
-              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",
+          ] })
+        ] }),
+        hasCards && /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto lg:hidden", children: /* @__PURE__ */ jsx(
+          Button,
           {
-            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",
+            variant: "secondary",
+            shape: "pill",
+            icon: /* @__PURE__ */ jsx(Search, {}),
+            onClick: openBalance,
+            children: "Check balance"
+          }
+        ) }),
+        !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",
+            {
+              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,
                   {
                     type: "button",
-                    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" })
+                    size: "sm",
+                    variant: pressed ? "secondary" : "ghost",
+                    "aria-pressed": pressed,
+                    className: "shrink-0",
+                    onClick: () => {
+                      setStatus(filter.value);
+                      setPage(1);
+                    },
+                    children: filter.label
                   }
-                )
-              ] }) }),
-              /* @__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",
+                ) }, 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",
                 {
-                  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
-      }
-    )
-  ] });
+                  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
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   GiftCardsFeature