@withpotter/components 0.13.0-next.101

package/dist/features/loyalty.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Star, Gift, TrendingUp, Users, Settings } from "lucide-react";
+import { StatsGrid } from "@withpotter/components/shared/stat-card";
+import { RangeField, ToggleRow } from "@withpotter/ui-kit";
+function LoyaltyFeature() {
+  const [pointsPerDollar, setPointsPerDollar] = useState(1);
+  const [rewardThreshold, setRewardThreshold] = useState(100);
+  const [birthdayRewards, setBirthdayRewards] = useState(true);
+  const [referralBonus, setReferralBonus] = useState(true);
+  const stats = [
+    {
+      label: "Active members",
+      value: "847",
+      icon: Users,
+      iconVariant: "accent"
+    },
+    {
+      label: "Points earned",
+      value: "45,230",
+      icon: Star,
+      iconVariant: "warning"
+    },
+    {
+      label: "Rewards redeemed",
+      value: "156",
+      icon: Gift,
+      iconVariant: "success"
+    },
+    {
+      label: "Engagement rate",
+      value: "72%",
+      icon: TrendingUp,
+      iconVariant: "accent"
+    }
+  ];
+  const recentActivity = [
+    { name: "Sarah J.", action: "Earned 50 points", time: "2 hours ago" },
+    { name: "Michael C.", action: "Redeemed 100 points", time: "5 hours ago" },
+    { name: "Emily D.", action: "Earned 75 points", time: "1 day ago" },
+    { name: "James W.", action: "Joined loyalty program", time: "1 day ago" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-[var(--text-primary)]", children: "Loyalty program" }),
+      /* @__PURE__ */ jsx("p", { className: "hidden sm:block text-sm text-[var(--text-secondary)] mt-1", children: "Reward your customers and build lasting relationships" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(StatsGrid, { columns: "grid-cols-1 md:grid-cols-4", stats }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-6", children: [
+          /* @__PURE__ */ jsx(Settings, { className: "size-5 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)]", children: "Program settings" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            RangeField,
+            {
+              label: "Points per dollar spent",
+              min: 1,
+              max: 10,
+              value: pointsPerDollar,
+              onChange: setPointsPerDollar,
+              hint: `Customers earn ${pointsPerDollar} point(s) for every $1 spent`
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            RangeField,
+            {
+              label: "Reward threshold",
+              min: 50,
+              max: 500,
+              step: 50,
+              value: rewardThreshold,
+              onChange: setRewardThreshold,
+              hint: `${rewardThreshold} points = $10 reward`
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "-mx-6 border-t border-[var(--border-subtle)]", children: [
+            /* @__PURE__ */ jsx(
+              ToggleRow,
+              {
+                label: "Birthday rewards",
+                hint: "Give bonus points on customer birthdays",
+                checked: birthdayRewards,
+                onChange: setBirthdayRewards
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToggleRow,
+              {
+                label: "Referral bonus",
+                hint: "Reward customers for referrals",
+                checked: referralBonus,
+                onChange: setReferralBonus
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "surface p-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[var(--text-primary)] mb-6", children: "Recent activity" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: recentActivity.map((activity, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between py-3 border-b border-[var(--border-subtle)] last:border-0",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-[var(--bg-muted)] squircle flex items-center justify-center text-sm font-medium text-[var(--text-secondary)]", children: activity.name.charAt(0) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium text-[var(--text-primary)]", children: activity.name }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: activity.action })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-tertiary)]", children: activity.time })
+            ]
+          },
+          i
+        )) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  LoyaltyFeature
+};
+//# sourceMappingURL=loyalty.js.map

package/dist/features/loyalty.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/loyalty.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Star, Gift, TrendingUp, Users, Settings } from 'lucide-react';\nimport { StatsGrid } from '@withpotter/components/shared/stat-card';\nimport type { StatCardProps } from '@withpotter/components/shared/stat-card';\nimport { RangeField, ToggleRow } from '@withpotter/ui-kit';\n\nexport function LoyaltyFeature() {\n  const [pointsPerDollar, setPointsPerDollar] = useState(1);\n  const [rewardThreshold, setRewardThreshold] = useState(100);\n  const [birthdayRewards, setBirthdayRewards] = useState(true);\n  const [referralBonus, setReferralBonus] = useState(true);\n\n  const stats: StatCardProps[] = [\n    {\n      label: 'Active members',\n      value: '847',\n      icon: Users,\n      iconVariant: 'accent',\n    },\n    {\n      label: 'Points earned',\n      value: '45,230',\n      icon: Star,\n      iconVariant: 'warning',\n    },\n    {\n      label: 'Rewards redeemed',\n      value: '156',\n      icon: Gift,\n      iconVariant: 'success',\n    },\n    {\n      label: 'Engagement rate',\n      value: '72%',\n      icon: TrendingUp,\n      iconVariant: 'accent',\n    },\n  ];\n\n  const recentActivity = [\n    { name: 'Sarah J.', action: 'Earned 50 points', time: '2 hours ago' },\n    { name: 'Michael C.', action: 'Redeemed 100 points', time: '5 hours ago' },\n    { name: 'Emily D.', action: 'Earned 75 points', time: '1 day ago' },\n    { name: 'James W.', action: 'Joined loyalty program', time: '1 day ago' },\n  ];\n\n  return (\n    <div className=\"space-y-6\">\n      <div>\n        <h1 className=\"text-title font-semibold text-[var(--text-primary)]\">\n          Loyalty program\n        </h1>\n        <p className=\"hidden sm:block text-sm text-[var(--text-secondary)] mt-1\">\n          Reward your customers and build lasting relationships\n        </p>\n      </div>\n\n      <div className=\"hidden lg:block\">\n        <StatsGrid columns=\"grid-cols-1 md:grid-cols-4\" stats={stats} />\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n        <div className=\"surface p-4\">\n          <div className=\"flex items-center gap-2 mb-6\">\n            <Settings className=\"size-5 text-[var(--text-muted)]\" />\n            <h3 className=\"font-semibold text-[var(--text-primary)]\">\n              Program settings\n            </h3>\n          </div>\n\n          <div className=\"space-y-6\">\n            <div>\n              <RangeField\n                label=\"Points per dollar spent\"\n                min={1}\n                max={10}\n                value={pointsPerDollar}\n                onChange={setPointsPerDollar}\n                hint={`Customers earn ${pointsPerDollar} point(s) for every $1 spent`}\n              />\n            </div>\n\n            <div>\n              <RangeField\n                label=\"Reward threshold\"\n                min={50}\n                max={500}\n                step={50}\n                value={rewardThreshold}\n                onChange={setRewardThreshold}\n                hint={`${rewardThreshold} points = $10 reward`}\n              />\n            </div>\n\n            <div className=\"-mx-6 border-t border-[var(--border-subtle)]\">\n              <ToggleRow\n                label=\"Birthday rewards\"\n                hint=\"Give bonus points on customer birthdays\"\n                checked={birthdayRewards}\n                onChange={setBirthdayRewards}\n              />\n              <ToggleRow\n                label=\"Referral bonus\"\n                hint=\"Reward customers for referrals\"\n                checked={referralBonus}\n                onChange={setReferralBonus}\n              />\n            </div>\n          </div>\n        </div>\n\n        <div className=\"surface p-4\">\n          <h3 className=\"font-semibold text-[var(--text-primary)] mb-6\">\n            Recent activity\n          </h3>\n          <div className=\"space-y-4\">\n            {recentActivity.map((activity, i) => (\n              <div\n                key={i}\n                className=\"flex items-center justify-between py-3 border-b border-[var(--border-subtle)] last:border-0\"\n              >\n                <div className=\"flex items-center gap-3\">\n                  <div className=\"w-8 h-8 bg-[var(--bg-muted)] squircle flex items-center justify-center text-sm font-medium text-[var(--text-secondary)]\">\n                    {activity.name.charAt(0)}\n                  </div>\n                  <div>\n                    <p className=\"font-medium text-[var(--text-primary)]\">\n                      {activity.name}\n                    </p>\n                    <p className=\"text-sm text-[var(--text-secondary)]\">\n                      {activity.action}\n                    </p>\n                  </div>\n                </div>\n                <span className=\"text-sm text-[var(--text-tertiary)]\">\n                  {activity.time}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/offer-countdown.d.ts

@@ -0,0 +1,14 @@
+/**
+ * How long is left on a waitlist offer.
+ *
+ * The engine gives a customer a fixed window to take a freed slot and moves to
+ * the next person when it lapses. The board showed the status — "Offer sent" —
+ * and nothing else, so the one number on the screen that is actually running
+ * out was the one number nobody could see. Ticks every minute; below an hour it
+ * carries warning colour, because that is when a desk would ring instead of
+ * waiting.
+ */
+export declare function OfferCountdown({ expiresAt, className, }: {
+    expiresAt: string;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/features/offer-countdown.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function OfferCountdown({
+  expiresAt,
+  className = ""
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 6e4);
+    return () => clearInterval(id);
+  }, []);
+  const deadline = new Date(expiresAt).getTime();
+  if (Number.isNaN(deadline)) return null;
+  const minutes = Math.floor((deadline - now) / 6e4);
+  if (minutes <= 0) {
+    return /* @__PURE__ */ jsx("span", { className: `text-xs text-[var(--text-muted)] ${className}`, children: "Offer lapsed" });
+  }
+  const hours = Math.floor(minutes / 60);
+  const left = hours > 0 ? `${hours}h ${minutes % 60}m` : `${minutes}m`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `text-xs tabular-nums ${minutes < 60 ? "text-[var(--warning)]" : "text-[var(--text-tertiary)]"} ${className}`,
+      children: [
+        "Expires in ",
+        left
+      ]
+    }
+  );
+}
+export {
+  OfferCountdown
+};
+//# sourceMappingURL=offer-countdown.js.map

package/dist/features/offer-countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/offer-countdown.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * How long is left on a waitlist offer.\n *\n * The engine gives a customer a fixed window to take a freed slot and moves to\n * the next person when it lapses. The board showed the status — \"Offer sent\" —\n * and nothing else, so the one number on the screen that is actually running\n * out was the one number nobody could see. Ticks every minute; below an hour it\n * carries warning colour, because that is when a desk would ring instead of\n * waiting.\n */\nexport function OfferCountdown({\n  expiresAt,\n  className = '',\n}: {\n  expiresAt: string;\n  className?: string;\n}) {\n  const [now, setNow] = useState(() => Date.now());\n\n  useEffect(() => {\n    const id = setInterval(() => setNow(Date.now()), 60_000);\n    return () => clearInterval(id);\n  }, []);\n\n  const deadline = new Date(expiresAt).getTime();\n  if (Number.isNaN(deadline)) return null;\n\n  const minutes = Math.floor((deadline - now) / 60_000);\n\n  if (minutes <= 0) {\n    return (\n      <span className={`text-xs text-[var(--text-muted)] ${className}`}>\n        Offer lapsed\n      </span>\n    );\n  }\n\n  const hours = Math.floor(minutes / 60);\n  const left = hours > 0 ? `${hours}h ${minutes % 60}m` : `${minutes}m`;\n\n  return (\n    <span\n      className={`text-xs tabular-nums ${minutes < 60 ? 'text-[var(--warning)]' : 'text-[var(--text-tertiary)]'} ${className}`}\n    >\n      Expires in {left}\n    </span>\n  );\n}\n"],"mappings":";AAmCM,cAUF,YAVE;AAjCN,SAAS,WAAW,gBAAgB;AAY7B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,YAAY;AACd,GAGG;AACD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,MAAM,KAAK,IAAI,CAAC;AAE/C,YAAU,MAAM;AACd,UAAM,KAAK,YAAY,MAAM,OAAO,KAAK,IAAI,CAAC,GAAG,GAAM;AACvD,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,IAAI,KAAK,SAAS,EAAE,QAAQ;AAC7C,MAAI,OAAO,MAAM,QAAQ,EAAG,QAAO;AAEnC,QAAM,UAAU,KAAK,OAAO,WAAW,OAAO,GAAM;AAEpD,MAAI,WAAW,GAAG;AAChB,WACE,oBAAC,UAAK,WAAW,oCAAoC,SAAS,IAAI,0BAElE;AAAA,EAEJ;AAEA,QAAM,QAAQ,KAAK,MAAM,UAAU,EAAE;AACrC,QAAM,OAAO,QAAQ,IAAI,GAAG,KAAK,KAAK,UAAU,EAAE,MAAM,GAAG,OAAO;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,wBAAwB,UAAU,KAAK,0BAA0B,6BAA6B,IAAI,SAAS;AAAA,MACvH;AAAA;AAAA,QACa;AAAA;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/features/payments.d.ts

@@ -0,0 +1 @@
+export declare function PaymentsFeature(): import("react").JSX.Element;

package/dist/features/payments.js

@@ -0,0 +1,279 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LIST_PAGE_SIZE } from "@withpotter/lib/list-page-size";
+import { useState, useEffect } from "react";
+import {
+  CreditCard,
+  Coins,
+  ArrowUpRight,
+  ArrowDownLeft,
+  Filter,
+  MoreHorizontal,
+  CheckCircle2,
+  Clock,
+  XCircle
+} from "lucide-react";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { datedCsvFilename, downloadCsv } from "@withpotter/lib/csv";
+import { StatsGrid } from "@withpotter/components/shared/stat-card";
+import { TablePagination } from "@withpotter/ui-kit/table-pagination";
+import { TableShell, Th, TableRow } from "@withpotter/ui-kit/table-shell";
+import { StackedCell } from "@withpotter/ui-kit/table-cells";
+import { Button } from "@withpotter/ui-kit/button";
+import { OverflowMenu, OverflowItem } from "@withpotter/ui-kit/overflow-menu";
+import { SearchField } from "@withpotter/ui-kit";
+const mockTransactions = [
+  {
+    id: "TXN001",
+    description: "Deep Tissue Massage Booking",
+    customer: "Amara Johnson",
+    amount: 15e3,
+    type: "income",
+    status: "completed",
+    date: "2026-01-18",
+    method: "Card"
+  },
+  {
+    id: "TXN002",
+    description: "Hot Stone Therapy Booking",
+    customer: "Chidi Okonkwo",
+    amount: 25e3,
+    type: "income",
+    status: "pending",
+    date: "2026-01-18",
+    method: "Transfer"
+  },
+  {
+    id: "TXN003",
+    description: "Refund - Cancelled Appointment",
+    customer: "Ngozi Eze",
+    amount: 18e3,
+    type: "refund",
+    status: "completed",
+    date: "2026-01-17",
+    method: "Card"
+  },
+  {
+    id: "TXN004",
+    description: "Facial Treatment Package",
+    customer: "Folake Adeyemi",
+    amount: 45e3,
+    type: "income",
+    status: "completed",
+    date: "2026-01-16",
+    method: "Card"
+  },
+  {
+    id: "TXN005",
+    description: "Weekly Payout",
+    customer: "Business Account",
+    amount: 35e4,
+    type: "payout",
+    status: "completed",
+    date: "2026-01-15",
+    method: "Bank Transfer"
+  }
+];
+const statusConfig = {
+  completed: {
+    label: "Completed",
+    color: "text-[var(--success)]",
+    bgColor: "bg-[var(--success-bg)]",
+    icon: CheckCircle2
+  },
+  pending: {
+    label: "Pending",
+    color: "text-[var(--warning)]",
+    bgColor: "bg-[var(--warning-bg)]",
+    icon: Clock
+  },
+  failed: {
+    label: "Failed",
+    color: "text-[var(--error)]",
+    bgColor: "bg-[var(--error-bg)]",
+    icon: XCircle
+  }
+};
+function formatDate(dateString) {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function PaymentsFeature() {
+  const formatCurrency = useFormatCurrency();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [transactions] = useState(mockTransactions);
+  const [page, setPage] = useState(1);
+  const pageSize = LIST_PAGE_SIZE;
+  const totalRevenue = transactions.filter((t) => t.type === "income" && t.status === "completed").reduce((acc, t) => acc + t.amount, 0);
+  const pendingAmount = transactions.filter((t) => t.status === "pending").reduce((acc, t) => acc + t.amount, 0);
+  const filteredTransactions = transactions.filter(
+    (t) => t.description.toLowerCase().includes(searchQuery.toLowerCase()) || t.customer.toLowerCase().includes(searchQuery.toLowerCase()) || t.id.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredTransactions.length / pageSize)
+  );
+  const paginatedTransactions = filteredTransactions.slice(
+    (page - 1) * pageSize,
+    page * pageSize
+  );
+  const handleExport = () => {
+    downloadCsv(
+      datedCsvFilename("payments"),
+      [
+        "Reference",
+        "Description",
+        "Customer",
+        "Amount",
+        "Type",
+        "Status",
+        "Method",
+        "Date"
+      ],
+      filteredTransactions.map((transaction) => [
+        transaction.id,
+        transaction.description,
+        transaction.customer,
+        transaction.amount,
+        transaction.type,
+        transaction.status,
+        transaction.method,
+        transaction.date
+      ])
+    );
+  };
+  useEffect(() => {
+    setPage(1);
+  }, [searchQuery]);
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 lg:mb-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-[var(--text-primary)]", children: "Payments" }) }),
+      /* @__PURE__ */ jsx(OverflowMenu, { children: /* @__PURE__ */ jsx(OverflowItem, { onClick: handleExport, children: "Export CSV" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(
+      StatsGrid,
+      {
+        columns: "grid-cols-1 md:grid-cols-4",
+        className: "mb-6",
+        stats: [
+          {
+            label: "Total revenue",
+            value: formatCurrency(totalRevenue),
+            icon: Coins
+          },
+          {
+            label: "Pending",
+            value: formatCurrency(pendingAmount),
+            icon: Clock
+          },
+          {
+            label: "Completed transactions",
+            value: transactions.filter((t) => t.status === "completed").length,
+            icon: CreditCard
+          },
+          {
+            label: "Last payout",
+            value: formatCurrency(35e4),
+            icon: ArrowDownLeft
+          }
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "surface overflow-x-auto", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-[var(--border-subtle)] flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            className: "flex-1 max-w-md",
+            placeholder: "Search transactions",
+            value: searchQuery,
+            onChange: setSearchQuery
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { "aria-label": "Filter", variant: "secondary", size: "icon", className: "ml-3", children: /* @__PURE__ */ jsx(Filter, { className: "size-4 text-[var(--text-secondary)]" }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        TableShell,
+        {
+          bare: true,
+          minWidth: 500,
+          head: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(Th, { children: "Transaction" }),
+            /* @__PURE__ */ jsx(Th, { className: "hidden sm:table-cell", children: "Customer" }),
+            /* @__PURE__ */ jsx(Th, { children: "Amount" }),
+            /* @__PURE__ */ jsx(Th, { children: "Status" }),
+            /* @__PURE__ */ jsx(Th, { className: "hidden sm:table-cell", children: "Date" }),
+            /* @__PURE__ */ jsx(Th, { align: "right", children: "Actions" })
+          ] }),
+          children: paginatedTransactions.map((transaction) => {
+            const status = statusConfig[transaction.status];
+            const StatusIcon = status.icon;
+            return /* @__PURE__ */ jsxs(TableRow, { children: [
+              /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${transaction.type === "income" ? "bg-[var(--success-bg)]" : transaction.type === "refund" ? "bg-[var(--error-bg)]" : "bg-[var(--accent-secondary)]/10"}`,
+                    children: transaction.type === "income" ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "text-[var(--success)]" }) : transaction.type === "refund" ? /* @__PURE__ */ jsx(ArrowDownLeft, { className: "text-[var(--error)]" }) : /* @__PURE__ */ jsx(ArrowDownLeft, { className: "text-[var(--accent-secondary)]" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  StackedCell,
+                  {
+                    value: transaction.description,
+                    sub: `${transaction.id} \u2022 ${transaction.method}`
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx("td", { className: "hidden text-[var(--text-secondary)] sm:table-cell", children: transaction.customer }),
+              /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `font-medium tabular-nums ${transaction.type === "income" ? "text-[var(--success)]" : transaction.type === "refund" ? "text-[var(--error)]" : "text-[var(--accent-secondary)]"}`,
+                  children: [
+                    transaction.type === "income" ? "+" : "-",
+                    formatCurrency(transaction.amount)
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `inline-flex items-center gap-2 rounded-full px-2 py-0.5 text-xs font-medium ${status.bgColor} ${status.color}`,
+                  children: [
+                    /* @__PURE__ */ jsx(StatusIcon, {}),
+                    status.label
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("td", { className: "hidden text-[var(--text-secondary)] sm:table-cell", children: formatDate(transaction.date) }),
+              /* @__PURE__ */ jsx("td", { className: "text-right", children: /* @__PURE__ */ jsx(Button, { "aria-label": "More actions", variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(MoreHorizontal, {}) }) })
+            ] }, transaction.id);
+          })
+        }
+      ),
+      filteredTransactions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsx(CreditCard, { className: "size-12 text-[var(--text-muted)] mx-auto mb-4" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[var(--text-tertiary)]", children: "No transactions found" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TablePagination,
+      {
+        page,
+        totalPages,
+        pageSize,
+        totalItems: filteredTransactions.length,
+        entityName: "transactions",
+        onPageChange: setPage
+      }
+    )
+  ] });
+}
+export {
+  PaymentsFeature
+};
+//# sourceMappingURL=payments.js.map

package/dist/features/payments.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/payments.tsx"],"sourcesContent":["'use client';\n\nimport { LIST_PAGE_SIZE } from '@withpotter/lib/list-page-size';\nimport { useState, useEffect } from 'react';\nimport {\n  CreditCard,\n  Coins,\n  ArrowUpRight,\n  ArrowDownLeft,\n  Filter,\n  Search,\n  MoreHorizontal,\n  CheckCircle2,\n  Clock,\n  XCircle,\n} from 'lucide-react';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { datedCsvFilename, downloadCsv } from '@withpotter/lib/csv';\nimport { StatsGrid } from '@withpotter/components/shared/stat-card';\nimport { TablePagination } from '@withpotter/ui-kit/table-pagination';\nimport { TableShell, Th, TableRow } from '@withpotter/ui-kit/table-shell';\nimport { StackedCell } from '@withpotter/ui-kit/table-cells';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { OverflowMenu, OverflowItem } from '@withpotter/ui-kit/overflow-menu';\nimport { SearchField } from '@withpotter/ui-kit';\n\ninterface Transaction {\n  id: string;\n  description: string;\n  customer: string;\n  amount: number;\n  type: 'income' | 'refund' | 'payout';\n  status: 'completed' | 'pending' | 'failed';\n  date: string;\n  method: string;\n}\n\nconst mockTransactions: Transaction[] = [\n  {\n    id: 'TXN001',\n    description: 'Deep Tissue Massage Booking',\n    customer: 'Amara Johnson',\n    amount: 15000,\n    type: 'income',\n    status: 'completed',\n    date: '2026-01-18',\n    method: 'Card',\n  },\n  {\n    id: 'TXN002',\n    description: 'Hot Stone Therapy Booking',\n    customer: 'Chidi Okonkwo',\n    amount: 25000,\n    type: 'income',\n    status: 'pending',\n    date: '2026-01-18',\n    method: 'Transfer',\n  },\n  {\n    id: 'TXN003',\n    description: 'Refund - Cancelled Appointment',\n    customer: 'Ngozi Eze',\n    amount: 18000,\n    type: 'refund',\n    status: 'completed',\n    date: '2026-01-17',\n    method: 'Card',\n  },\n  {\n    id: 'TXN004',\n    description: 'Facial Treatment Package',\n    customer: 'Folake Adeyemi',\n    amount: 45000,\n    type: 'income',\n    status: 'completed',\n    date: '2026-01-16',\n    method: 'Card',\n  },\n  {\n    id: 'TXN005',\n    description: 'Weekly Payout',\n    customer: 'Business Account',\n    amount: 350000,\n    type: 'payout',\n    status: 'completed',\n    date: '2026-01-15',\n    method: 'Bank Transfer',\n  },\n];\n\nconst statusConfig = {\n  completed: {\n    label: 'Completed',\n    color: 'text-[var(--success)]',\n    bgColor: 'bg-[var(--success-bg)]',\n    icon: CheckCircle2,\n  },\n  pending: {\n    label: 'Pending',\n    color: 'text-[var(--warning)]',\n    bgColor: 'bg-[var(--warning-bg)]',\n    icon: Clock,\n  },\n  failed: {\n    label: 'Failed',\n    color: 'text-[var(--error)]',\n    bgColor: 'bg-[var(--error-bg)]',\n    icon: XCircle,\n  },\n};\n\nfunction formatDate(dateString: string): string {\n  return new Date(dateString).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n  });\n}\n\nexport function PaymentsFeature() {\n  const formatCurrency = useFormatCurrency();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [transactions] = useState<Transaction[]>(mockTransactions);\n  const [page, setPage] = useState(1);\n  const pageSize = LIST_PAGE_SIZE;\n\n  const totalRevenue = transactions\n    .filter((t) => t.type === 'income' && t.status === 'completed')\n    .reduce((acc, t) => acc + t.amount, 0);\n\n  const pendingAmount = transactions\n    .filter((t) => t.status === 'pending')\n    .reduce((acc, t) => acc + t.amount, 0);\n\n  const filteredTransactions = transactions.filter(\n    (t) =>\n      t.description.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      t.customer.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      t.id.toLowerCase().includes(searchQuery.toLowerCase()),\n  );\n\n  const totalPages = Math.max(\n    1,\n    Math.ceil(filteredTransactions.length / pageSize),\n  );\n  const paginatedTransactions = filteredTransactions.slice(\n    (page - 1) * pageSize,\n    page * pageSize,\n  );\n\n  const handleExport = () => {\n    downloadCsv(\n      datedCsvFilename('payments'),\n      [\n        'Reference',\n        'Description',\n        'Customer',\n        'Amount',\n        'Type',\n        'Status',\n        'Method',\n        'Date',\n      ],\n      filteredTransactions.map((transaction) => [\n        transaction.id,\n        transaction.description,\n        transaction.customer,\n        transaction.amount,\n        transaction.type,\n        transaction.status,\n        transaction.method,\n        transaction.date,\n      ]),\n    );\n  };\n\n  // Reset page on search change\n  useEffect(() => {\n    setPage(1);\n  }, [searchQuery]);\n\n  return (\n    <div className=\"max-w-7xl mx-auto\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between gap-3 mb-4 lg:mb-6\">\n        <div className=\"min-w-0\">\n          <h1 className=\"text-title font-semibold text-[var(--text-primary)]\">\n            Payments\n          </h1>\n        </div>\n        {/* Behind the ⋯, like every export in the app. See OverflowMenu. */}\n        <OverflowMenu>\n          <OverflowItem onClick={handleExport}>\n            Export CSV\n          </OverflowItem>\n        </OverflowMenu>\n      </div>\n\n      {/* Stats — desktop only */}\n      <div className=\"hidden lg:block\">\n        <StatsGrid\n          columns=\"grid-cols-1 md:grid-cols-4\"\n          className=\"mb-6\"\n          stats={[\n            {\n              label: 'Total revenue',\n              value: formatCurrency(totalRevenue),\n              icon: Coins,\n            },\n            {\n              label: 'Pending',\n              value: formatCurrency(pendingAmount),\n              icon: Clock,\n            },\n            {\n              label: 'Completed transactions',\n              value: transactions.filter((t) => t.status === 'completed')\n                .length,\n              icon: CreditCard,\n            },\n            {\n              label: 'Last payout',\n              value: formatCurrency(350000),\n              icon: ArrowDownLeft,\n            },\n          ]}\n        />\n      </div>\n\n      {/* Transactions Table */}\n      <div className=\"surface overflow-x-auto\">\n        <div className=\"p-4 border-b border-[var(--border-subtle)] flex items-center justify-between\">\n          <SearchField\n            className=\"flex-1 max-w-md\"\n            placeholder=\"Search transactions\"\n            value={searchQuery}\n            onChange={setSearchQuery}\n          />\n          <Button aria-label=\"Filter\" variant=\"secondary\" size=\"icon\" className=\"ml-3\">\n            <Filter className=\"size-4 text-[var(--text-secondary)]\" />\n          </Button>\n        </div>\n\n        <TableShell\n          bare\n          minWidth={500}\n          head={\n            <tr>\n              <Th>Transaction</Th>\n              <Th className=\"hidden sm:table-cell\">Customer</Th>\n              <Th>Amount</Th>\n              <Th>Status</Th>\n              <Th className=\"hidden sm:table-cell\">Date</Th>\n              <Th align=\"right\">Actions</Th>\n            </tr>\n          }\n        >\n          {paginatedTransactions.map((transaction) => {\n            const status = statusConfig[transaction.status];\n            const StatusIcon = status.icon;\n            return (\n              <TableRow key={transaction.id}>\n                <td>\n                  <div className=\"flex items-center gap-3\">\n                    {/* The direction mark, at the house avatar size. It was\n                        40px in a 32px row slot, which is what made these rows\n                        16px tall while every other list ran 12px. */}\n                    <div\n                      className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md ${\n                        transaction.type === 'income'\n                          ? 'bg-[var(--success-bg)]'\n                          : transaction.type === 'refund'\n                            ? 'bg-[var(--error-bg)]'\n                            : 'bg-[var(--accent-secondary)]/10'\n                      }`}\n                    >\n                      {transaction.type === 'income' ? (\n                        <ArrowUpRight className=\"text-[var(--success)]\" />\n                      ) : transaction.type === 'refund' ? (\n                        <ArrowDownLeft className=\"text-[var(--error)]\" />\n                      ) : (\n                        <ArrowDownLeft className=\"text-[var(--accent-secondary)]\" />\n                      )}\n                    </div>\n                    <StackedCell\n                      value={transaction.description}\n                      sub={`${transaction.id} • ${transaction.method}`}\n                    />\n                  </div>\n                </td>\n                <td className=\"hidden text-[var(--text-secondary)] sm:table-cell\">\n                  {transaction.customer}\n                </td>\n                <td>\n                  {/* Money keeps its colour: this column says which way the\n                      money went, which is the one thing colour is for here. */}\n                  <span\n                    className={`font-medium tabular-nums ${\n                      transaction.type === 'income'\n                        ? 'text-[var(--success)]'\n                        : transaction.type === 'refund'\n                          ? 'text-[var(--error)]'\n                          : 'text-[var(--accent-secondary)]'\n                    }`}\n                  >\n                    {transaction.type === 'income' ? '+' : '-'}\n                    {formatCurrency(transaction.amount)}\n                  </span>\n                </td>\n                <td>\n                  <span\n                    className={`inline-flex items-center gap-2 rounded-full px-2 py-0.5 text-xs font-medium ${status.bgColor} ${status.color}`}\n                  >\n                    <StatusIcon />\n                    {status.label}\n                  </span>\n                </td>\n                <td className=\"hidden text-[var(--text-secondary)] sm:table-cell\">\n                  {formatDate(transaction.date)}\n                </td>\n                <td className=\"text-right\">\n                  <Button aria-label=\"More actions\" variant=\"ghost\" size=\"icon\">\n                    <MoreHorizontal />\n                  </Button>\n                </td>\n              </TableRow>\n            );\n          })}\n        </TableShell>\n\n        {filteredTransactions.length === 0 && (\n          <div className=\"text-center py-12\">\n            <CreditCard className=\"size-12 text-[var(--text-muted)] mx-auto mb-4\" />\n            <p className=\"text-[var(--text-tertiary)]\">No transactions found</p>\n          </div>\n        )}\n      </div>\n\n      {/* Pagination */}\n      <TablePagination\n        page={page}\n        totalPages={totalPages}\n        pageSize={pageSize}\n        totalItems={filteredTransactions.length}\n        entityName=\"transactions\"\n        onPageChange={setPage}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/product-form/basics-step.d.ts

@@ -0,0 +1,44 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { type useSensors } from '@dnd-kit/core';
+import type { ProductMedia } from '@withpotter/lib/product-types';
+import type { FormStep } from '@withpotter/ui-kit/form-stepper-panel';
+export interface ProductGalleryItem extends ProductMedia {
+    id: string;
+}
+export declare const MAX_GALLERY_ITEMS = 20;
+interface BasicsStepProps {
+    title: string;
+    setTitle: Dispatch<SetStateAction<string>>;
+    heroImage: ProductMedia | null;
+    setHeroImage: Dispatch<SetStateAction<ProductMedia | null>>;
+    showHeroImageModal: boolean;
+    setShowHeroImageModal: Dispatch<SetStateAction<boolean>>;
+    galleryItems: ProductGalleryItem[];
+    setGalleryItems: Dispatch<SetStateAction<ProductGalleryItem[]>>;
+    gallerySensors: ReturnType<typeof useSensors>;
+    handleGalleryDragEnd: (event: DragEndEvent) => void;
+    showGalleryMediaModal: boolean;
+    setShowGalleryMediaModal: Dispatch<SetStateAction<boolean>>;
+    editingGalleryIndex: number | null;
+    setEditingGalleryIndex: Dispatch<SetStateAction<number | null>>;
+    description: string;
+    setDescription: Dispatch<SetStateAction<string>>;
+    currencySymbol: string;
+    priceFocused: boolean;
+    setPriceFocused: Dispatch<SetStateAction<boolean>>;
+    priceDisplay: string;
+    setPriceDisplay: Dispatch<SetStateAction<string>>;
+    price: number | undefined;
+    setPrice: Dispatch<SetStateAction<number | undefined>>;
+    compareFocused: boolean;
+    setCompareFocused: Dispatch<SetStateAction<boolean>>;
+    compareDisplay: string;
+    setCompareDisplay: Dispatch<SetStateAction<string>>;
+    compareAtPrice: number | undefined;
+    setCompareAtPrice: Dispatch<SetStateAction<number | undefined>>;
+    formatCurrency: (value: number | undefined) => string;
+    parseCurrency: (value: string) => number | undefined;
+}
+export declare function createBasicsStep({ title, setTitle, heroImage, setHeroImage, showHeroImageModal, setShowHeroImageModal, galleryItems, setGalleryItems, gallerySensors, handleGalleryDragEnd, showGalleryMediaModal, setShowGalleryMediaModal, editingGalleryIndex, setEditingGalleryIndex, description, setDescription, currencySymbol, priceFocused, setPriceFocused, priceDisplay, setPriceDisplay, price, setPrice, compareFocused, setCompareFocused, compareDisplay, setCompareDisplay, compareAtPrice, setCompareAtPrice, formatCurrency, parseCurrency, }: BasicsStepProps): FormStep;
+export {};