@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/sales/pipeline/lead-drawer.js

@@ -0,0 +1,139 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { Button, Fact, FactList, Progress, Select } from "@withpotter/ui-kit";
+import { StatusPill } from "../../audit/status-pill";
+import { adminSalesApi } from "@withpotter/lib/admin-sales-api";
+import { AdmLoading, Drawer } from "../../_ui";
+import { CountryLabel } from "../../_ui/country-label";
+import { SOURCES, STAGE, daysSince } from "../stage-meta";
+import { useSalesLead, useSalesMutation, useSalesOwners } from "../use-sales";
+import { LeadTimeline } from "./lead-timeline";
+import { LogContactDialog } from "./log-contact-dialog";
+import { MoveStageDialog } from "./move-stage-dialog";
+import styles from "./pipeline.module.css";
+const when = (iso) => iso ? new Date(iso).toLocaleString("en-GB", {
+  dateStyle: "medium",
+  timeStyle: "short"
+}) : "Not set";
+function LeadDrawer({
+  leadId,
+  onClose
+}) {
+  const { data: lead, isLoading } = useSalesLead(leadId);
+  const { data: owners = [] } = useSalesOwners();
+  const [dialog, setDialog] = useState(null);
+  const assign = useSalesMutation(adminSalesApi.update, "Owner not changed");
+  const ownerOptions = [
+    { value: "", label: "No owner" },
+    ...owners.map((o) => ({ value: o.id, label: o.name ?? o.email }))
+  ];
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      open: Boolean(leadId),
+      onClose,
+      title: lead?.businessName ?? "Lead",
+      subtitle: lead ? `${STAGE[lead.stage].label} \xB7 ${daysSince(lead.stageChangedAt) ?? 0} days in stage` : void 0,
+      meta: lead && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          StatusPill,
+          {
+            status: STAGE[lead.stage].badge,
+            label: STAGE[lead.stage].label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CountryLabel,
+          {
+            country: lead.country,
+            code: lead.countryCode,
+            muted: true
+          }
+        )
+      ] }),
+      actions: lead && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => setDialog("log"), children: "Log contact" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            disabled: lead.stage === "first_sale",
+            onClick: () => setDialog("move"),
+            children: "Move stage"
+          }
+        )
+      ] }),
+      children: [
+        isLoading || !lead ? /* @__PURE__ */ jsx(AdmLoading, { label: "Loading lead\u2026" }) : /* @__PURE__ */ jsxs("div", { className: styles.drawerBody, children: [
+          /* @__PURE__ */ jsxs(FactList, { columns: 2, children: [
+            /* @__PURE__ */ jsx(Fact, { label: "Source", value: SOURCES[lead.source] ?? lead.source }),
+            /* @__PURE__ */ jsx(Fact, { label: "Next follow-up", value: when(lead.nextFollowUpAt) }),
+            /* @__PURE__ */ jsx(
+              Fact,
+              {
+                label: "Contact",
+                value: lead.contactName ?? lead.email ?? "\u2013"
+              }
+            ),
+            /* @__PURE__ */ jsx(Fact, { label: "Phone", value: lead.phone ?? "\u2013" }),
+            /* @__PURE__ */ jsx(Fact, { label: "Last contact", value: when(lead.lastContactAt) }),
+            /* @__PURE__ */ jsx(Fact, { label: "Last active", value: when(lead.lastActiveAt) })
+          ] }),
+          lead.setupPct !== null && /* @__PURE__ */ jsxs("div", { className: styles.setup, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Setup ",
+              lead.setupPct,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(Progress, { value: lead.setupPct })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: lead.ownerAdminId ?? "",
+              onChange: (v) => assign.mutate([lead.id, { ownerAdminId: v || null }]),
+              options: ownerOptions,
+              ariaLabel: "Lead owner",
+              disabled: assign.isPending
+            }
+          ),
+          lead.tenantId && /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: `/admin/tenants/${lead.tenantId}`,
+              className: styles.link,
+              children: "Open merchant"
+            }
+          ),
+          /* @__PURE__ */ jsx(LeadTimeline, { activities: lead.activities })
+        ] }),
+        lead && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            LogContactDialog,
+            {
+              lead,
+              open: dialog === "log",
+              onClose: () => setDialog(null)
+            },
+            `log-${dialog === "log"}`
+          ),
+          /* @__PURE__ */ jsx(
+            MoveStageDialog,
+            {
+              lead,
+              open: dialog === "move",
+              onClose: () => setDialog(null)
+            },
+            `move-${dialog === "move"}`
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  LeadDrawer
+};
+//# sourceMappingURL=lead-drawer.js.map

package/dist/admin/sales/pipeline/lead-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/lead-drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { Button, Fact, FactList, Progress, Select } from '@withpotter/ui-kit';\nimport { StatusPill } from '../../audit/status-pill';\nimport { adminSalesApi } from '@withpotter/lib/admin-sales-api';\nimport { AdmLoading, Drawer } from '../../_ui';\nimport { CountryLabel } from '../../_ui/country-label';\nimport { SOURCES, STAGE, daysSince } from '../stage-meta';\nimport { useSalesLead, useSalesMutation, useSalesOwners } from '../use-sales';\nimport { LeadTimeline } from './lead-timeline';\nimport { LogContactDialog } from './log-contact-dialog';\nimport { MoveStageDialog } from './move-stage-dialog';\nimport styles from './pipeline.module.css';\n\nconst when = (iso: string | null) =>\n  iso\n    ? new Date(iso).toLocaleString('en-GB', {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      })\n    : 'Not set';\n\n/** One lead: where it stands, who owns it, what's next, and every contact. */\nexport function LeadDrawer({\n  leadId,\n  onClose,\n}: {\n  leadId: string | null;\n  onClose: () => void;\n}) {\n  const { data: lead, isLoading } = useSalesLead(leadId);\n  const { data: owners = [] } = useSalesOwners();\n  const [dialog, setDialog] = useState<'log' | 'move' | null>(null);\n  const assign = useSalesMutation(adminSalesApi.update, 'Owner not changed');\n  const ownerOptions = [\n    { value: '', label: 'No owner' },\n    ...owners.map((o) => ({ value: o.id, label: o.name ?? o.email })),\n  ];\n\n  return (\n    <Drawer\n      open={Boolean(leadId)}\n      onClose={onClose}\n      title={lead?.businessName ?? 'Lead'}\n      subtitle={\n        lead\n          ? `${STAGE[lead.stage].label} · ${daysSince(lead.stageChangedAt) ?? 0} days in stage`\n          : undefined\n      }\n      meta={\n        lead && (\n          <>\n            <StatusPill\n              status={STAGE[lead.stage].badge}\n              label={STAGE[lead.stage].label}\n            />\n            <CountryLabel\n              country={lead.country}\n              code={lead.countryCode}\n              muted\n            />\n          </>\n        )\n      }\n      actions={\n        lead && (\n          <div className=\"flex gap-2\">\n            <Button onClick={() => setDialog('log')}>Log contact</Button>\n            <Button\n              variant=\"secondary\"\n              disabled={lead.stage === 'first_sale'}\n              onClick={() => setDialog('move')}\n            >\n              Move stage\n            </Button>\n          </div>\n        )\n      }\n    >\n      {isLoading || !lead ? (\n        <AdmLoading label=\"Loading lead…\" />\n      ) : (\n        <div className={styles.drawerBody}>\n          <FactList columns={2}>\n            <Fact label=\"Source\" value={SOURCES[lead.source] ?? lead.source} />\n            <Fact label=\"Next follow-up\" value={when(lead.nextFollowUpAt)} />\n            <Fact\n              label=\"Contact\"\n              value={lead.contactName ?? lead.email ?? '–'}\n            />\n            <Fact label=\"Phone\" value={lead.phone ?? '–'} />\n            <Fact label=\"Last contact\" value={when(lead.lastContactAt)} />\n            <Fact label=\"Last active\" value={when(lead.lastActiveAt)} />\n          </FactList>\n          {lead.setupPct !== null && (\n            <div className={styles.setup}>\n              <span>Setup {lead.setupPct}%</span>\n              <Progress value={lead.setupPct} />\n            </div>\n          )}\n          <Select\n            value={lead.ownerAdminId ?? ''}\n            onChange={(v) =>\n              assign.mutate([lead.id, { ownerAdminId: v || null }])\n            }\n            options={ownerOptions}\n            ariaLabel=\"Lead owner\"\n            disabled={assign.isPending}\n          />\n          {lead.tenantId && (\n            <Link\n              href={`/admin/tenants/${lead.tenantId}`}\n              className={styles.link}\n            >\n              Open merchant\n            </Link>\n          )}\n          <LeadTimeline activities={lead.activities} />\n        </div>\n      )}\n      {lead && (\n        <>\n          <LogContactDialog\n            key={`log-${dialog === 'log'}`}\n            lead={lead}\n            open={dialog === 'log'}\n            onClose={() => setDialog(null)}\n          />\n          <MoveStageDialog\n            key={`move-${dialog === 'move'}`}\n            lead={lead}\n            open={dialog === 'move'}\n            onClose={() => setDialog(null)}\n          />\n        </>\n      )}\n    </Drawer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/sales/pipeline/lead-timeline.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CONTACT_TYPES, OUTCOMES, STAGE, ago } from "../stage-meta";
+import styles from "./pipeline.module.css";
+function activityLine(a) {
+  if (a.type === "stage_change") {
+    const from = a.fromStage ? STAGE[a.fromStage].label : "";
+    const to = a.toStage ? STAGE[a.toStage].label : "";
+    return `Moved ${from} \u2192 ${to}`;
+  }
+  if (a.type === "system") return a.body ?? "Automatic";
+  const outcome = a.outcome ? ` \xB7 ${OUTCOMES[a.outcome]}` : "";
+  return `${CONTACT_TYPES[a.type]}${outcome}`;
+}
+function LeadTimeline({ activities }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Timeline", children: [
+    /* @__PURE__ */ jsx("h3", { className: styles.timelineHead, children: "Timeline" }),
+    !activities.length && /* @__PURE__ */ jsx("p", { className: styles.empty, children: "No contact yet." }),
+    /* @__PURE__ */ jsx("ol", { className: styles.timeline, children: activities.map((a) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("span", { className: styles.timelineLine, children: activityLine(a) }),
+      /* @__PURE__ */ jsxs("span", { className: styles.cardMeta, children: [
+        a.adminName ?? (a.adminId ? "Admin" : "Automatic"),
+        " \xB7",
+        " ",
+        ago(a.occurredAt)
+      ] }),
+      a.body && a.type !== "system" && /* @__PURE__ */ jsx("span", { className: styles.timelineBody, children: a.body })
+    ] }, a.id)) })
+  ] });
+}
+export {
+  LeadTimeline,
+  activityLine
+};
+//# sourceMappingURL=lead-timeline.js.map

package/dist/admin/sales/pipeline/lead-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/lead-timeline.tsx"],"sourcesContent":["import type { LeadActivity } from '@withpotter/lib/admin-sales-api';\nimport { CONTACT_TYPES, OUTCOMES, STAGE, ago } from '../stage-meta';\nimport styles from './pipeline.module.css';\n\nexport function activityLine(a: LeadActivity): string {\n  if (a.type === 'stage_change') {\n    const from = a.fromStage ? STAGE[a.fromStage].label : '';\n    const to = a.toStage ? STAGE[a.toStage].label : '';\n\n    return `Moved ${from} → ${to}`;\n  }\n\n  if (a.type === 'system') return a.body ?? 'Automatic';\n\n  const outcome = a.outcome ? ` · ${OUTCOMES[a.outcome]}` : '';\n\n  return `${CONTACT_TYPES[a.type]}${outcome}`;\n}\n\n/** Every contact and move, newest first. Nothing here can be edited. */\nexport function LeadTimeline({ activities }: { activities: LeadActivity[] }) {\n  return (\n    <section aria-label=\"Timeline\">\n      <h3 className={styles.timelineHead}>Timeline</h3>\n      {!activities.length && <p className={styles.empty}>No contact yet.</p>}\n      <ol className={styles.timeline}>\n        {activities.map((a) => (\n          <li key={a.id}>\n            <span className={styles.timelineLine}>{activityLine(a)}</span>\n            <span className={styles.cardMeta}>\n              {a.adminName ?? (a.adminId ? 'Admin' : 'Automatic')} ·{' '}\n              {ago(a.occurredAt)}\n            </span>\n            {a.body && a.type !== 'system' && (\n              <span className={styles.timelineBody}>{a.body}</span>\n            )}\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"AAuBM,cAMM,YANN;AAtBN,SAAS,eAAe,UAAU,OAAO,WAAW;AACpD,OAAO,YAAY;AAEZ,SAAS,aAAa,GAAyB;AACpD,MAAI,EAAE,SAAS,gBAAgB;AAC7B,UAAM,OAAO,EAAE,YAAY,MAAM,EAAE,SAAS,EAAE,QAAQ;AACtD,UAAM,KAAK,EAAE,UAAU,MAAM,EAAE,OAAO,EAAE,QAAQ;AAEhD,WAAO,SAAS,IAAI,WAAM,EAAE;AAAA,EAC9B;AAEA,MAAI,EAAE,SAAS,SAAU,QAAO,EAAE,QAAQ;AAE1C,QAAM,UAAU,EAAE,UAAU,SAAM,SAAS,EAAE,OAAO,CAAC,KAAK;AAE1D,SAAO,GAAG,cAAc,EAAE,IAAI,CAAC,GAAG,OAAO;AAC3C;AAGO,SAAS,aAAa,EAAE,WAAW,GAAmC;AAC3E,SACE,qBAAC,aAAQ,cAAW,YAClB;AAAA,wBAAC,QAAG,WAAW,OAAO,cAAc,sBAAQ;AAAA,IAC3C,CAAC,WAAW,UAAU,oBAAC,OAAE,WAAW,OAAO,OAAO,6BAAe;AAAA,IAClE,oBAAC,QAAG,WAAW,OAAO,UACnB,qBAAW,IAAI,CAAC,MACf,qBAAC,QACC;AAAA,0BAAC,UAAK,WAAW,OAAO,cAAe,uBAAa,CAAC,GAAE;AAAA,MACvD,qBAAC,UAAK,WAAW,OAAO,UACrB;AAAA,UAAE,cAAc,EAAE,UAAU,UAAU;AAAA,QAAa;AAAA,QAAG;AAAA,QACtD,IAAI,EAAE,UAAU;AAAA,SACnB;AAAA,MACC,EAAE,QAAQ,EAAE,SAAS,YACpB,oBAAC,UAAK,WAAW,OAAO,cAAe,YAAE,MAAK;AAAA,SAPzC,EAAE,EASX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/sales/pipeline/log-contact-dialog.js

@@ -0,0 +1,126 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Button,
+  DateField,
+  Field,
+  FormDialog,
+  OptionButton,
+  OptionGroup,
+  Select,
+  Textarea,
+  useToast
+} from "@withpotter/ui-kit";
+import {
+  adminSalesApi
+} from "@withpotter/lib/admin-sales-api";
+import { CONTACT_TYPES, OUTCOMES } from "../stage-meta";
+import { useSalesMutation } from "../use-sales";
+const TIMES = Array.from({ length: 24 }, (_, h) => {
+  const v = `${String(h).padStart(2, "0")}:00`;
+  return { value: v, label: v };
+});
+const OUTCOME_OPTIONS = [
+  { value: "", label: "No outcome" },
+  ...Object.entries(OUTCOMES).map(([value, label]) => ({ value, label }))
+];
+function LogContactDialog({
+  lead,
+  open,
+  onClose
+}) {
+  const { toast } = useToast();
+  const [type, setType] = useState("call");
+  const [outcome, setOutcome] = useState("");
+  const [body, setBody] = useState("");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("10:00");
+  const log = useSalesMutation(adminSalesApi.logContact, "Contact not logged");
+  const isNote = type === "note";
+  const save = async () => {
+    try {
+      await log.mutateAsync([
+        lead.id,
+        {
+          type,
+          outcome: !isNote && outcome ? outcome : void 0,
+          body: body.trim() || void 0,
+          nextFollowUpAt: date ? (/* @__PURE__ */ new Date(`${date}T${time}:00`)).toISOString() : void 0
+        }
+      ]);
+    } catch {
+      return;
+    }
+    toast({
+      title: lead.stage === "new" && !isNote ? "Logged \xB7 moved to Contacted" : "Logged"
+    });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      title: `Log contact \xB7 ${lead.businessName}`,
+      onClose,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            loading: log.isPending,
+            disabled: isNote && !body.trim(),
+            onClick: () => void save(),
+            children: "Log"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(OptionGroup, { children: Object.keys(CONTACT_TYPES).map((t) => /* @__PURE__ */ jsx(
+          OptionButton,
+          {
+            selected: type === t,
+            onClick: () => setType(t),
+            children: CONTACT_TYPES[t]
+          },
+          t
+        )) }),
+        !isNote && /* @__PURE__ */ jsx(Field, { label: "Outcome", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: outcome,
+            onChange: setOutcome,
+            options: OUTCOME_OPTIONS,
+            ariaLabel: "Outcome"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: isNote ? "Note" : "What was said (optional)",
+            value: body,
+            onChange: (e) => setBody(e.target.value),
+            rows: 3,
+            maxLength: 2e3
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Next follow-up (optional)", children: /* @__PURE__ */ jsx(DateField, { value: date, onChange: setDate }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Time", children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: time,
+              onChange: setTime,
+              options: TIMES,
+              ariaLabel: "Follow-up time"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  LogContactDialog
+};
+//# sourceMappingURL=log-contact-dialog.js.map

package/dist/admin/sales/pipeline/log-contact-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/log-contact-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Button,\n  DateField,\n  Field,\n  FormDialog,\n  OptionButton,\n  OptionGroup,\n  Select,\n  Textarea,\n  useToast,\n} from '@withpotter/ui-kit';\nimport {\n  adminSalesApi,\n  type ContactOutcome,\n  type ContactType,\n  type SalesLead,\n} from '@withpotter/lib/admin-sales-api';\nimport { CONTACT_TYPES, OUTCOMES } from '../stage-meta';\nimport { useSalesMutation } from '../use-sales';\n\nconst TIMES = Array.from({ length: 24 }, (_, h) => {\n  const v = `${String(h).padStart(2, '0')}:00`;\n\n  return { value: v, label: v };\n});\n\nconst OUTCOME_OPTIONS = [\n  { value: '', label: 'No outcome' },\n  ...Object.entries(OUTCOMES).map(([value, label]) => ({ value, label })),\n];\n\n/** Record a call, email, WhatsApp, meeting or note, and the next follow-up. */\nexport function LogContactDialog({\n  lead,\n  open,\n  onClose,\n}: {\n  lead: SalesLead;\n  open: boolean;\n  onClose: () => void;\n}) {\n  const { toast } = useToast();\n  const [type, setType] = useState<ContactType>('call');\n  const [outcome, setOutcome] = useState('');\n  const [body, setBody] = useState('');\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('10:00');\n  const log = useSalesMutation(adminSalesApi.logContact, 'Contact not logged');\n  const isNote = type === 'note';\n\n  const save = async () => {\n    try {\n      await log.mutateAsync([\n        lead.id,\n        {\n          type,\n          outcome: !isNote && outcome ? (outcome as ContactOutcome) : undefined,\n          body: body.trim() || undefined,\n          nextFollowUpAt: date\n            ? new Date(`${date}T${time}:00`).toISOString()\n            : undefined,\n        },\n      ]);\n    } catch {\n      return; // the mutation's toast has said why\n    }\n\n    toast({\n      title:\n        lead.stage === 'new' && !isNote\n          ? 'Logged · moved to Contacted'\n          : 'Logged',\n    });\n    onClose();\n  };\n\n  return (\n    <FormDialog\n      open={open}\n      title={`Log contact · ${lead.businessName}`}\n      onClose={onClose}\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button\n            loading={log.isPending}\n            disabled={isNote && !body.trim()}\n            onClick={() => void save()}\n          >\n            Log\n          </Button>\n        </>\n      }\n    >\n      <div className=\"flex flex-col gap-4\">\n        <OptionGroup>\n          {(Object.keys(CONTACT_TYPES) as ContactType[]).map((t) => (\n            <OptionButton\n              key={t}\n              selected={type === t}\n              onClick={() => setType(t)}\n            >\n              {CONTACT_TYPES[t]}\n            </OptionButton>\n          ))}\n        </OptionGroup>\n        {!isNote && (\n          <Field label=\"Outcome\">\n            <Select\n              value={outcome}\n              onChange={setOutcome}\n              options={OUTCOME_OPTIONS}\n              ariaLabel=\"Outcome\"\n            />\n          </Field>\n        )}\n        <Textarea\n          label={isNote ? 'Note' : 'What was said (optional)'}\n          value={body}\n          onChange={(e) => setBody(e.target.value)}\n          rows={3}\n          maxLength={2000}\n        />\n        <div className=\"flex gap-3\">\n          <Field label=\"Next follow-up (optional)\">\n            <DateField value={date} onChange={setDate} />\n          </Field>\n          <Field label=\"Time\">\n            <Select\n              value={time}\n              onChange={setTime}\n              options={TIMES}\n              ariaLabel=\"Follow-up time\"\n            />\n          </Field>\n        </div>\n      </div>\n    </FormDialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/sales/pipeline/move-stage-dialog.js

@@ -0,0 +1,119 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Banner,
+  Button,
+  Field,
+  FormDialog,
+  Select,
+  Textarea,
+  useToast
+} from "@withpotter/ui-kit";
+import {
+  adminSalesApi
+} from "@withpotter/lib/admin-sales-api";
+import { LOST_REASONS, STAGE } from "../stage-meta";
+import { useSalesMutation } from "../use-sales";
+const MOVES = {
+  new: ["contacted", "onboarding", "lost"],
+  contacted: ["onboarding", "lost"],
+  onboarding: ["lost"],
+  activated: ["lost"],
+  first_sale: [],
+  lost: ["contacted"]
+};
+const REASONS = Object.entries(LOST_REASONS).map(([value, label]) => ({
+  value,
+  label
+}));
+function MoveStageDialog({
+  lead,
+  open,
+  onClose
+}) {
+  const { toast } = useToast();
+  const options = MOVES[lead.stage].map((s) => ({
+    value: s,
+    label: lead.stage === "lost" ? "Reopen as Contacted" : STAGE[s].label
+  }));
+  const [stage, setStage] = useState(options[0]?.value ?? "");
+  const [reason, setReason] = useState("");
+  const [note, setNote] = useState("");
+  const move = useSalesMutation(adminSalesApi.move, "Lead not moved");
+  const lost = stage === "lost";
+  const save = async () => {
+    try {
+      await move.mutateAsync([
+        lead.id,
+        {
+          stage,
+          lostReason: lost ? reason : void 0,
+          note: note.trim() || void 0
+        }
+      ]);
+    } catch {
+      return;
+    }
+    toast({ title: `Moved to ${STAGE[stage].label}` });
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    FormDialog,
+    {
+      open,
+      title: `Move ${lead.businessName}`,
+      description: `Now: ${STAGE[lead.stage].label}`,
+      onClose,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            loading: move.isPending,
+            disabled: !stage || lost && !reason,
+            variant: lost ? "danger" : "primary",
+            onClick: () => void save(),
+            children: "Move"
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Banner, { tone: "info", children: "Activated and First sale move on their own when the merchant finishes setup and takes a first payment." }),
+        /* @__PURE__ */ jsx(Field, { label: "Move to", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: stage,
+            onChange: setStage,
+            options,
+            ariaLabel: "Stage"
+          }
+        ) }),
+        lost && /* @__PURE__ */ jsx(Field, { label: "Why was it lost?", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: reason,
+            onChange: setReason,
+            options: REASONS,
+            placeholder: "Choose a reason",
+            ariaLabel: "Lost reason"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: "Note (optional)",
+            value: note,
+            onChange: (e) => setNote(e.target.value),
+            rows: 2,
+            maxLength: 1e3
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  MoveStageDialog
+};
+//# sourceMappingURL=move-stage-dialog.js.map

package/dist/admin/sales/pipeline/move-stage-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/move-stage-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Banner,\n  Button,\n  Field,\n  FormDialog,\n  Select,\n  Textarea,\n  useToast,\n} from '@withpotter/ui-kit';\nimport {\n  adminSalesApi,\n  type SalesLead,\n  type SalesStage,\n} from '@withpotter/lib/admin-sales-api';\nimport { LOST_REASONS, STAGE } from '../stage-meta';\nimport { useSalesMutation } from '../use-sales';\n\n/**\n * Moves sales may make by hand. Activated and First sale are not here:\n * they follow the merchant's own data. Mirrors the API's rules.\n */\nconst MOVES: Record<SalesStage, SalesStage[]> = {\n  new: ['contacted', 'onboarding', 'lost'],\n  contacted: ['onboarding', 'lost'],\n  onboarding: ['lost'],\n  activated: ['lost'],\n  first_sale: [],\n  lost: ['contacted'],\n};\n\nconst REASONS = Object.entries(LOST_REASONS).map(([value, label]) => ({\n  value,\n  label,\n}));\n\nexport function MoveStageDialog({\n  lead,\n  open,\n  onClose,\n}: {\n  lead: SalesLead;\n  open: boolean;\n  onClose: () => void;\n}) {\n  const { toast } = useToast();\n  const options = MOVES[lead.stage].map((s) => ({\n    value: s,\n    label: lead.stage === 'lost' ? 'Reopen as Contacted' : STAGE[s].label,\n  }));\n  const [stage, setStage] = useState<string>(options[0]?.value ?? '');\n  const [reason, setReason] = useState('');\n  const [note, setNote] = useState('');\n  const move = useSalesMutation(adminSalesApi.move, 'Lead not moved');\n  const lost = stage === 'lost';\n\n  const save = async () => {\n    try {\n      await move.mutateAsync([\n        lead.id,\n        {\n          stage: stage as SalesStage,\n          lostReason: lost ? reason : undefined,\n          note: note.trim() || undefined,\n        },\n      ]);\n    } catch {\n      return;\n    }\n\n    toast({ title: `Moved to ${STAGE[stage as SalesStage].label}` });\n    onClose();\n  };\n\n  return (\n    <FormDialog\n      open={open}\n      title={`Move ${lead.businessName}`}\n      description={`Now: ${STAGE[lead.stage].label}`}\n      onClose={onClose}\n      footer={\n        <>\n          <Button variant=\"secondary\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button\n            loading={move.isPending}\n            disabled={!stage || (lost && !reason)}\n            variant={lost ? 'danger' : 'primary'}\n            onClick={() => void save()}\n          >\n            Move\n          </Button>\n        </>\n      }\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Banner tone=\"info\">\n          Activated and First sale move on their own when the merchant finishes\n          setup and takes a first payment.\n        </Banner>\n        <Field label=\"Move to\">\n          <Select\n            value={stage}\n            onChange={setStage}\n            options={options}\n            ariaLabel=\"Stage\"\n          />\n        </Field>\n        {lost && (\n          <Field label=\"Why was it lost?\">\n            <Select\n              value={reason}\n              onChange={setReason}\n              options={REASONS}\n              placeholder=\"Choose a reason\"\n              ariaLabel=\"Lost reason\"\n            />\n          </Field>\n        )}\n        <Textarea\n          label=\"Note (optional)\"\n          value={note}\n          onChange={(e) => setNote(e.target.value)}\n          rows={2}\n          maxLength={1000}\n        />\n      </div>\n    </FormDialog>\n  );\n}\n"],"mappings":";AAmFQ,mBACE,KADF;AAjFR,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,OAGK;AACP,SAAS,cAAc,aAAa;AACpC,SAAS,wBAAwB;AAMjC,MAAM,QAA0C;AAAA,EAC9C,KAAK,CAAC,aAAa,cAAc,MAAM;AAAA,EACvC,WAAW,CAAC,cAAc,MAAM;AAAA,EAChC,YAAY,CAAC,MAAM;AAAA,EACnB,WAAW,CAAC,MAAM;AAAA,EAClB,YAAY,CAAC;AAAA,EACb,MAAM,CAAC,WAAW;AACpB;AAEA,MAAM,UAAU,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO;AAAA,EACpE;AAAA,EACA;AACF,EAAE;AAEK,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,UAAU,MAAM,KAAK,KAAK,EAAE,IAAI,CAAC,OAAO;AAAA,IAC5C,OAAO;AAAA,IACP,OAAO,KAAK,UAAU,SAAS,wBAAwB,MAAM,CAAC,EAAE;AAAA,EAClE,EAAE;AACF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,QAAQ,CAAC,GAAG,SAAS,EAAE;AAClE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,OAAO,iBAAiB,cAAc,MAAM,gBAAgB;AAClE,QAAM,OAAO,UAAU;AAEvB,QAAM,OAAO,YAAY;AACvB,QAAI;AACF,YAAM,KAAK,YAAY;AAAA,QACrB,KAAK;AAAA,QACL;AAAA,UACE;AAAA,UACA,YAAY,OAAO,SAAS;AAAA,UAC5B,MAAM,KAAK,KAAK,KAAK;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH,QAAQ;AACN;AAAA,IACF;AAEA,UAAM,EAAE,OAAO,YAAY,MAAM,KAAmB,EAAE,KAAK,GAAG,CAAC;AAC/D,YAAQ;AAAA,EACV;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,QAAQ,KAAK,YAAY;AAAA,MAChC,aAAa,QAAQ,MAAM,KAAK,KAAK,EAAE,KAAK;AAAA,MAC5C;AAAA,MACA,QACE,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,SAAS,oBAE9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,KAAK;AAAA,YACd,UAAU,CAAC,SAAU,QAAQ,CAAC;AAAA,YAC9B,SAAS,OAAO,WAAW;AAAA,YAC3B,SAAS,MAAM,KAAK,KAAK;AAAA,YAC1B;AAAA;AAAA,QAED;AAAA,SACF;AAAA,MAGF,+BAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAO,MAAK,QAAO,oHAGpB;AAAA,QACA,oBAAC,SAAM,OAAM,WACX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV;AAAA,YACA,WAAU;AAAA;AAAA,QACZ,GACF;AAAA,QACC,QACC,oBAAC,SAAM,OAAM,oBACX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ,GACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO;AAAA,YACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,YACvC,MAAM;AAAA,YACN,WAAW;AAAA;AAAA,QACb;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/admin/sales/pipeline/pipeline-board.js

@@ -0,0 +1,77 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AdmLoading } from "../../_ui";
+import { LoadFailed } from "../../audit/load-failed";
+import { BOARD_STAGES, STAGE } from "../stage-meta";
+import { useDebounced } from "../use-debounced";
+import { useSalesLeads } from "../use-sales";
+import { AddLeadDialog } from "./add-lead-dialog";
+import { LeadCard } from "./lead-card";
+import { LeadDrawer } from "./lead-drawer";
+import { PipelineFilters } from "./pipeline-filters";
+import styles from "./pipeline.module.css";
+function PipelineBoard() {
+  const [filters, setFilters] = useState({});
+  const [open, setOpen] = useState(null);
+  const [adding, setAdding] = useState(false);
+  const { showLost, ...rest } = filters;
+  const search = useDebounced(rest.search);
+  const query = { ...rest, search };
+  const { data, isLoading, isError, refetch } = useSalesLeads(
+    showLost ? { ...query, stage: "lost" } : query
+  );
+  const stages = showLost ? ["lost"] : BOARD_STAGES;
+  const rows = data?.rows ?? [];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PipelineFilters,
+      {
+        value: filters,
+        onChange: setFilters,
+        onAdd: () => setAdding(true)
+      }
+    ),
+    isError && /* @__PURE__ */ jsx(
+      LoadFailed,
+      {
+        message: "The pipeline could not be loaded.",
+        onRetry: () => void refetch()
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx(AdmLoading, { label: "Loading pipeline\u2026" }),
+    data && /* @__PURE__ */ jsx("div", { className: styles.board, "data-single": showLost ? "" : void 0, children: stages.map((stage) => {
+      const cards = rows.filter((l) => l.stage === stage);
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: styles.column,
+          "aria-label": STAGE[stage].label,
+          children: [
+            /* @__PURE__ */ jsxs("h3", { className: styles.columnHead, children: [
+              STAGE[stage].label,
+              /* @__PURE__ */ jsx("span", { children: cards.length })
+            ] }),
+            cards.map((lead) => /* @__PURE__ */ jsx(
+              LeadCard,
+              {
+                lead,
+                selected: lead.id === open,
+                onOpen: () => setOpen(lead.id)
+              },
+              lead.id
+            )),
+            !cards.length && /* @__PURE__ */ jsx("p", { className: styles.empty, children: "Nobody here" })
+          ]
+        },
+        stage
+      );
+    }) }),
+    /* @__PURE__ */ jsx(LeadDrawer, { leadId: open, onClose: () => setOpen(null) }),
+    /* @__PURE__ */ jsx(AddLeadDialog, { open: adding, onClose: () => setAdding(false) })
+  ] });
+}
+export {
+  PipelineBoard
+};
+//# sourceMappingURL=pipeline-board.js.map

package/dist/admin/sales/pipeline/pipeline-board.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/pipeline-board.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport type { SalesStage } from '@withpotter/lib/admin-sales-api';\nimport { AdmLoading } from '../../_ui';\nimport { LoadFailed } from '../../audit/load-failed';\nimport { BOARD_STAGES, STAGE } from '../stage-meta';\nimport { useDebounced } from '../use-debounced';\nimport { useSalesLeads } from '../use-sales';\nimport { AddLeadDialog } from './add-lead-dialog';\nimport { LeadCard } from './lead-card';\nimport { LeadDrawer } from './lead-drawer';\nimport { PipelineFilters, type BoardFilters } from './pipeline-filters';\nimport styles from './pipeline.module.css';\n\n/**\n * The pipeline: a column per stage from New to First sale. A card opens the\n * lead's drawer, where sales logs contact and moves it on.\n */\nexport function PipelineBoard() {\n  const [filters, setFilters] = useState<BoardFilters>({});\n  const [open, setOpen] = useState<string | null>(null);\n  const [adding, setAdding] = useState(false);\n  const { showLost, ...rest } = filters;\n  const search = useDebounced(rest.search);\n  const query = { ...rest, search };\n  const { data, isLoading, isError, refetch } = useSalesLeads(\n    showLost ? { ...query, stage: 'lost' } : query,\n  );\n  const stages: SalesStage[] = showLost ? ['lost'] : BOARD_STAGES;\n  const rows = data?.rows ?? [];\n\n  return (\n    <>\n      <PipelineFilters\n        value={filters}\n        onChange={setFilters}\n        onAdd={() => setAdding(true)}\n      />\n\n      {isError && (\n        <LoadFailed\n          message=\"The pipeline could not be loaded.\"\n          onRetry={() => void refetch()}\n        />\n      )}\n      {isLoading && <AdmLoading label=\"Loading pipeline…\" />}\n\n      {data && (\n        <div className={styles.board} data-single={showLost ? '' : undefined}>\n          {stages.map((stage) => {\n            const cards = rows.filter((l) => l.stage === stage);\n\n            return (\n              <section\n                key={stage}\n                className={styles.column}\n                aria-label={STAGE[stage].label}\n              >\n                <h3 className={styles.columnHead}>\n                  {STAGE[stage].label}\n                  <span>{cards.length}</span>\n                </h3>\n                {cards.map((lead) => (\n                  <LeadCard\n                    key={lead.id}\n                    lead={lead}\n                    selected={lead.id === open}\n                    onOpen={() => setOpen(lead.id)}\n                  />\n                ))}\n                {!cards.length && <p className={styles.empty}>Nobody here</p>}\n              </section>\n            );\n          })}\n        </div>\n      )}\n\n      <LeadDrawer leadId={open} onClose={() => setOpen(null)} />\n      <AddLeadDialog open={adding} onClose={() => setAdding(false)} />\n    </>\n  );\n}\n"],"mappings":";AAiCI,mBACE,KAyBU,YA1BZ;AA/BJ,SAAS,gBAAgB;AAEzB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,cAAc,aAAa;AACpC,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAA0C;AACnD,OAAO,YAAY;AAMZ,SAAS,gBAAgB;AAC9B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,QAAM,SAAS,aAAa,KAAK,MAAM;AACvC,QAAM,QAAQ,EAAE,GAAG,MAAM,OAAO;AAChC,QAAM,EAAE,MAAM,WAAW,SAAS,QAAQ,IAAI;AAAA,IAC5C,WAAW,EAAE,GAAG,OAAO,OAAO,OAAO,IAAI;AAAA,EAC3C;AACA,QAAM,SAAuB,WAAW,CAAC,MAAM,IAAI;AACnD,QAAM,OAAO,MAAM,QAAQ,CAAC;AAE5B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,OAAO,MAAM,UAAU,IAAI;AAAA;AAAA,IAC7B;AAAA,IAEC,WACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,KAAK,QAAQ;AAAA;AAAA,IAC9B;AAAA,IAED,aAAa,oBAAC,cAAW,OAAM,0BAAoB;AAAA,IAEnD,QACC,oBAAC,SAAI,WAAW,OAAO,OAAO,eAAa,WAAW,KAAK,QACxD,iBAAO,IAAI,CAAC,UAAU;AACrB,YAAM,QAAQ,KAAK,OAAO,CAAC,MAAM,EAAE,UAAU,KAAK;AAElD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,OAAO;AAAA,UAClB,cAAY,MAAM,KAAK,EAAE;AAAA,UAEzB;AAAA,iCAAC,QAAG,WAAW,OAAO,YACnB;AAAA,oBAAM,KAAK,EAAE;AAAA,cACd,oBAAC,UAAM,gBAAM,QAAO;AAAA,eACtB;AAAA,YACC,MAAM,IAAI,CAAC,SACV;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA,UAAU,KAAK,OAAO;AAAA,gBACtB,QAAQ,MAAM,QAAQ,KAAK,EAAE;AAAA;AAAA,cAHxB,KAAK;AAAA,YAIZ,CACD;AAAA,YACA,CAAC,MAAM,UAAU,oBAAC,OAAE,WAAW,OAAO,OAAO,yBAAW;AAAA;AAAA;AAAA,QAhBpD;AAAA,MAiBP;AAAA,IAEJ,CAAC,GACH;AAAA,IAGF,oBAAC,cAAW,QAAQ,MAAM,SAAS,MAAM,QAAQ,IAAI,GAAG;AAAA,IACxD,oBAAC,iBAAc,MAAM,QAAQ,SAAS,MAAM,UAAU,KAAK,GAAG;AAAA,KAChE;AAEJ;","names":[]}

package/dist/admin/sales/pipeline/pipeline-filters.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@withpotter/ui-kit";
+import { FilterPress, FilterSearch, Filters } from "../../_ui";
+function PipelineFilters({
+  value,
+  onChange,
+  onAdd
+}) {
+  const toggle = (key) => onChange({ ...value, [key]: !value[key] });
+  const owner = (who) => onChange({ ...value, owner: value.owner === who ? void 0 : who });
+  return /* @__PURE__ */ jsxs(Filters, { label: "Filter leads", children: [
+    /* @__PURE__ */ jsx(
+      FilterSearch,
+      {
+        value: value.search ?? "",
+        onChange: (search) => onChange({ ...value, search }),
+        placeholder: "Search business or email\u2026"
+      }
+    ),
+    /* @__PURE__ */ jsx(FilterPress, { on: value.owner === "me", onToggle: () => owner("me"), children: "My leads" }),
+    /* @__PURE__ */ jsx(FilterPress, { on: value.owner === "none", onToggle: () => owner("none"), children: "No owner" }),
+    /* @__PURE__ */ jsx(
+      FilterPress,
+      {
+        on: Boolean(value.stalled),
+        onToggle: () => toggle("stalled"),
+        children: "Stalled"
+      }
+    ),
+    /* @__PURE__ */ jsx(FilterPress, { on: Boolean(value.due), onToggle: () => toggle("due"), children: "Due today" }),
+    /* @__PURE__ */ jsx(
+      FilterPress,
+      {
+        on: Boolean(value.showLost),
+        onToggle: () => toggle("showLost"),
+        children: "Lost"
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { onClick: onAdd, children: "Add lead" })
+  ] });
+}
+export {
+  PipelineFilters
+};
+//# sourceMappingURL=pipeline-filters.js.map

package/dist/admin/sales/pipeline/pipeline-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/admin/sales/pipeline/pipeline-filters.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@withpotter/ui-kit';\nimport type { LeadFilters } from '@withpotter/lib/admin-sales-api';\nimport { FilterPress, FilterSearch, Filters } from '../../_ui';\n\nexport type BoardFilters = LeadFilters & { showLost?: boolean };\n\n/** Quick filters sales use all day: mine, stalled, due, unowned, lost. */\nexport function PipelineFilters({\n  value,\n  onChange,\n  onAdd,\n}: {\n  value: BoardFilters;\n  onChange: (next: BoardFilters) => void;\n  onAdd: () => void;\n}) {\n  const toggle = (key: 'due' | 'stalled' | 'showLost') =>\n    onChange({ ...value, [key]: !value[key] });\n  const owner = (who: 'me' | 'none') =>\n    onChange({ ...value, owner: value.owner === who ? undefined : who });\n\n  return (\n    <Filters label=\"Filter leads\">\n      <FilterSearch\n        value={value.search ?? ''}\n        onChange={(search) => onChange({ ...value, search })}\n        placeholder=\"Search business or email…\"\n      />\n      <FilterPress on={value.owner === 'me'} onToggle={() => owner('me')}>\n        My leads\n      </FilterPress>\n      <FilterPress on={value.owner === 'none'} onToggle={() => owner('none')}>\n        No owner\n      </FilterPress>\n      <FilterPress\n        on={Boolean(value.stalled)}\n        onToggle={() => toggle('stalled')}\n      >\n        Stalled\n      </FilterPress>\n      <FilterPress on={Boolean(value.due)} onToggle={() => toggle('due')}>\n        Due today\n      </FilterPress>\n      <FilterPress\n        on={Boolean(value.showLost)}\n        onToggle={() => toggle('showLost')}\n      >\n        Lost\n      </FilterPress>\n      <Button onClick={onAdd}>Add lead</Button>\n    </Filters>\n  );\n}\n"],"mappings":";AAwBI,SACE,KADF;AAtBJ,SAAS,cAAc;AAEvB,SAAS,aAAa,cAAc,eAAe;AAK5C,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,SAAS,CAAC,QACd,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC;AAC3C,QAAM,QAAQ,CAAC,QACb,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM,UAAU,MAAM,SAAY,IAAI,CAAC;AAErE,SACE,qBAAC,WAAQ,OAAM,gBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM,UAAU;AAAA,QACvB,UAAU,CAAC,WAAW,SAAS,EAAE,GAAG,OAAO,OAAO,CAAC;AAAA,QACnD,aAAY;AAAA;AAAA,IACd;AAAA,IACA,oBAAC,eAAY,IAAI,MAAM,UAAU,MAAM,UAAU,MAAM,MAAM,IAAI,GAAG,sBAEpE;AAAA,IACA,oBAAC,eAAY,IAAI,MAAM,UAAU,QAAQ,UAAU,MAAM,MAAM,MAAM,GAAG,sBAExE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ,MAAM,OAAO;AAAA,QACzB,UAAU,MAAM,OAAO,SAAS;AAAA,QACjC;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,eAAY,IAAI,QAAQ,MAAM,GAAG,GAAG,UAAU,MAAM,OAAO,KAAK,GAAG,uBAEpE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ,MAAM,QAAQ;AAAA,QAC1B,UAAU,MAAM,OAAO,UAAU;AAAA,QAClC;AAAA;AAAA,IAED;AAAA,IACA,oBAAC,UAAO,SAAS,OAAO,sBAAQ;AAAA,KAClC;AAEJ;","names":[]}