@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/crm/components/command-palette.tsx

@@ -0,0 +1,162 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Building2, Plus, Search, User } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Kbd } from "@/components/kbd";
+import { moveSelection, searchItems, type SearchItem } from "@/lib/search";
+
+const TYPE_ICON: Record<SearchItem["type"], React.ReactNode> = {
+  deal: <Search />,
+  company: <Building2 />,
+  contact: <User />,
+};
+
+export interface CommandAction {
+  id: string;
+  label: string;
+  run: () => void;
+}
+
+/**
+ * ⌘K. Searches the synced replica in memory, so results land as you type with
+ * no request per keystroke — see lib/search.ts for the ranking.
+ *
+ * Presentational: items and actions come in as props, selection is delegated
+ * through onSelect. Keyboard handling lives here because it belongs to the
+ * widget, not to the page that opened it.
+ */
+export function CommandPalette({
+  open,
+  items,
+  actions = [],
+  onClose,
+  onSelect,
+}: {
+  open: boolean;
+  items: SearchItem[];
+  actions?: CommandAction[];
+  onClose: () => void;
+  onSelect: (item: SearchItem) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [index, setIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const results = useMemo(() => searchItems(items, query), [items, query]);
+  const shownActions = query.trim() ? [] : actions;
+  const rows = useMemo(
+    () => [
+      ...shownActions.map((a) => ({ kind: "action" as const, action: a })),
+      ...results.map((item) => ({ kind: "item" as const, item })),
+    ],
+    [shownActions, results],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setIndex(0);
+    // Focus after paint so the dialog is mounted and the caret lands.
+    const id = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+
+  useEffect(() => {
+    setIndex(0);
+  }, [query]);
+
+  if (!open) return null;
+
+  function commit(at: number) {
+    const row = rows[at];
+    if (!row) return;
+    if (row.kind === "action") row.action.run();
+    else onSelect(row.item);
+    onClose();
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[12vh]"
+      // Clicking the backdrop dismisses; clicks inside the panel must not.
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Search"
+        className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover shadow-2xl"
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            onClose();
+          } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setIndex((i) => moveSelection(i, 1, rows.length));
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setIndex((i) => moveSelection(i, -1, rows.length));
+          } else if (event.key === "Enter") {
+            event.preventDefault();
+            commit(index);
+          }
+        }}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-3">
+          <Search className="size-4 shrink-0 text-muted-foreground" />
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search deals, companies, contacts…"
+            aria-label="Search deals, companies and contacts"
+            className="h-11 flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground"
+          />
+          <Kbd>esc</Kbd>
+        </div>
+
+        <div className="max-h-80 overflow-y-auto p-1.5">
+          {rows.length === 0 ? (
+            <p className="px-3 py-6 text-center text-[12px] text-muted-foreground">
+              No matches for “{query}”
+            </p>
+          ) : (
+            rows.map((row, at) => (
+              <button
+                key={row.kind === "action" ? row.action.id : row.item.id}
+                type="button"
+                // Pointer hover moves selection so mouse and keyboard agree.
+                onMouseMove={() => setIndex(at)}
+                onClick={() => commit(at)}
+                aria-selected={at === index}
+                className={cn(
+                  "flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-[13px] transition-colors",
+                  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
+                  at === index ? "bg-surface-2" : "hover:bg-surface-2/60",
+                )}
+              >
+                {row.kind === "action" ? (
+                  <>
+                    <Plus />
+                    <span className="flex-1 truncate">{row.action.label}</span>
+                  </>
+                ) : (
+                  <>
+                    {TYPE_ICON[row.item.type]}
+                    <span className="flex-1 truncate">{row.item.title}</span>
+                    {row.item.subtitle ? (
+                      <span className="truncate text-[12px] text-muted-foreground">
+                        {row.item.subtitle}
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/crm/components/data-table.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface ColumnDef<Row> {
+  key: string;
+  header: string;
+  /** Cell content. Return a string and it's rendered as-is. */
+  cell: (row: Row) => React.ReactNode;
+  /** Right-align and tabular-figure a numeric column. */
+  numeric?: boolean;
+  className?: string;
+}
+
+/**
+ * A dense list view. Rows are 36px so a screenful is a screenful of data, and
+ * the header sticks while the body scrolls.
+ *
+ * Generic and presentational — every view here uses the same one, which is why
+ * companies and contacts look like the same product.
+ */
+export function DataTable<Row extends { id: string }>({
+  rows,
+  columns,
+  onRowClick,
+  empty,
+}: {
+  rows: Row[];
+  columns: ColumnDef<Row>[];
+  onRowClick?: (row: Row) => void;
+  empty?: React.ReactNode;
+}) {
+  if (rows.length === 0 && empty) return <>{empty}</>;
+
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      <table className="w-full border-collapse text-[13px]">
+        <thead className="sticky top-0 z-10 bg-background">
+          <tr className="hairline">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={cn(
+                  "h-8 px-4 text-left text-[11px] font-medium text-muted-foreground",
+                  column.numeric && "text-right",
+                  column.className,
+                )}
+              >
+                {column.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr
+              key={row.id}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              onKeyDown={
+                onRowClick
+                  ? (event) => {
+                      if (event.key === "Enter") onRowClick(row);
+                    }
+                  : undefined
+              }
+              className={cn(
+                "border-b border-border/60 transition-colors",
+                onRowClick && "cursor-pointer hover:bg-surface-1",
+              )}
+            >
+              {columns.map((column) => (
+                <td
+                  key={column.key}
+                  className={cn(
+                    "h-9 max-w-0 truncate px-4",
+                    column.numeric && "tabular text-right",
+                    column.className,
+                  )}
+                >
+                  {column.cell(row)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/crm/components/deal-card.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { daysUntil, money, type Deal } from "@/lib/pipeline";
+
+/**
+ * One deal on the board. Draggable, but never the source of truth for where it
+ * sits — the parent decides that from the synced row, so a teammate's move
+ * lands here through the same path as your own.
+ */
+export function DealCard({
+  deal,
+  company,
+  owner,
+  onOpen,
+  onDragStart,
+  onDragEnd,
+  dragging,
+}: {
+  deal: Deal;
+  company?: string | null;
+  owner?: string | null;
+  onOpen: (id: string) => void;
+  onDragStart: (id: string) => void;
+  onDragEnd: () => void;
+  dragging?: boolean;
+}) {
+  const days = daysUntil(deal.closeDate);
+  // Only surface a date when it's actionable: overdue, or inside a week.
+  const overdue = days !== null && days < 0;
+  const soon = days !== null && days >= 0 && days <= 7;
+
+  return (
+    <article
+      draggable
+      onDragStart={(event) => {
+        // setData is required for Firefox to start a drag at all.
+        event.dataTransfer.setData("text/plain", deal.id);
+        event.dataTransfer.effectAllowed = "move";
+        onDragStart(deal.id);
+      }}
+      onDragEnd={onDragEnd}
+      onClick={() => onOpen(deal.id)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onOpen(deal.id);
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      aria-label={`${deal.title}${company ? `, ${company}` : ""}`}
+      className={cn(
+        "group cursor-pointer rounded-lg border border-border bg-card p-2.5 transition-all",
+        "hover:border-ring/40 focus-visible:border-ring",
+        dragging && "opacity-40",
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <p className="line-clamp-2 flex-1 text-[13px] font-medium leading-snug">
+          {deal.title}
+        </p>
+        <span className="tabular shrink-0 text-[12px] font-medium text-muted-foreground">
+          {money(deal.value)}
+        </span>
+      </div>
+
+      {company ? (
+        <p className="mt-1 truncate text-[12px] text-muted-foreground">{company}</p>
+      ) : null}
+
+      <div className="mt-2.5 flex items-center justify-between gap-2">
+        {owner ? <Avatar name={owner} size="sm" /> : <span />}
+        {overdue || soon ? (
+          <span
+            className={cn(
+              "tabular text-[11px]",
+              overdue ? "text-destructive" : "text-muted-foreground",
+            )}
+          >
+            {overdue
+              ? `${Math.abs(days as number)}d overdue`
+              : days === 0
+                ? "Today"
+                : `${days}d`}
+          </span>
+        ) : null}
+      </div>
+    </article>
+  );
+}

package/templates/crm/components/deal-dialog.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
+import { BOARD_STAGES } from "@/lib/pipeline";
+
+export interface DealDraft {
+  title: string;
+  companyId: string;
+  value: number;
+  stage: string;
+  closeDate: string;
+}
+
+/**
+ * New deal. A dialog rather than an inline row: creating is deliberate and
+ * occasional, and a permanent form above the board would push the pipeline —
+ * the thing you came to look at — off the screen.
+ */
+export function DealDialog({
+  open,
+  companies,
+  defaultStage = "lead",
+  onOpenChange,
+  onCreate,
+}: {
+  open: boolean;
+  companies: Array<{ id: string; name: string }>;
+  defaultStage?: string;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (draft: DealDraft) => void | Promise<void>;
+}) {
+  const [title, setTitle] = useState("");
+  const [companyId, setCompanyId] = useState("");
+  const [value, setValue] = useState("");
+  const [stage, setStage] = useState(defaultStage);
+  const [closeDate, setCloseDate] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  // Reset on each open so a cancelled draft doesn't reappear next time.
+  useEffect(() => {
+    if (!open) return;
+    setTitle("");
+    setCompanyId("");
+    setValue("");
+    setStage(defaultStage);
+    setCloseDate("");
+    setBusy(false);
+  }, [open, defaultStage]);
+
+  const canSubmit = title.trim().length > 0 && !busy;
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      await onCreate({
+        title: title.trim(),
+        companyId,
+        value: Number(value) || 0,
+        stage,
+        closeDate,
+      });
+      onOpenChange(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New deal</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={submit} className="grid gap-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="deal-title">Title</Label>
+            <Input
+              id="deal-title"
+              autoFocus
+              value={title}
+              placeholder="Fleet dispatch rollout"
+              onChange={(event) => setTitle(event.target.value)}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="deal-company">Company</Label>
+            <Select
+              id="deal-company"
+              value={companyId}
+              onChange={(event) => setCompanyId(event.target.value)}
+            >
+              <option value="">—</option>
+              {companies.map((company) => (
+                <option key={company.id} value={company.id}>
+                  {company.name}
+                </option>
+              ))}
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="deal-value">Value</Label>
+              <Input
+                id="deal-value"
+                type="number"
+                min="0"
+                step="100"
+                inputMode="numeric"
+                value={value}
+                placeholder="10000"
+                onChange={(event) => setValue(event.target.value)}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="deal-stage">Stage</Label>
+              <Select
+                id="deal-stage"
+                value={stage}
+                onChange={(event) => setStage(event.target.value)}
+              >
+                {BOARD_STAGES.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="deal-close">Expected close</Label>
+            <Input
+              id="deal-close"
+              type="date"
+              value={closeDate}
+              onChange={(event) => setCloseDate(event.target.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy ? "Creating…" : "Create deal"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/crm/components/empty-state.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * An empty state that says what this screen is for and offers the one action
+ * that fills it. "No records found" tells a new user nothing and gives them
+ * nowhere to go.
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center px-6 py-16 text-center",
+        className,
+      )}
+    >
+      {icon ? (
+        <div className="mb-3 flex size-9 items-center justify-center rounded-lg bg-surface-2 text-muted-foreground [&_svg]:size-4">
+          {icon}
+        </div>
+      ) : null}
+      <p className="text-[13px] font-medium">{title}</p>
+      {description ? (
+        <p className="mt-1 max-w-sm text-[12px] leading-5 text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
+      {action ? <div className="mt-4">{action}</div> : null}
+    </div>
+  );
+}

package/templates/crm/components/kbd.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/** A keyboard hint. Present in the UI because the shortcuts are real. */
+export function Kbd({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <kbd
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-border bg-surface-2 px-1.5",
+        "font-sans text-[10px] font-medium text-muted-foreground",
+        className,
+      )}
+    >
+      {children}
+    </kbd>
+  );
+}

package/templates/crm/components/metrics-bar.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { metrics, money, percent, type Deal } from "@/lib/pipeline";
+
+/**
+ * The four numbers a sales lead actually looks at. Derived, never stored — see
+ * lib/pipeline.ts, where the arithmetic is unit-tested.
+ */
+export function MetricsBar({ deals }: { deals: Deal[] }) {
+  const m = metrics(deals);
+  return (
+    <dl className="grid grid-cols-2 gap-px border-b border-border bg-border sm:grid-cols-4">
+      <Metric
+        label="Open pipeline"
+        value={money(m.open)}
+        hint={`${m.openCount} deal${m.openCount === 1 ? "" : "s"}`}
+      />
+      <Metric
+        label="Weighted"
+        value={money(m.weighted)}
+        hint="by stage probability"
+      />
+      <Metric label="Won" value={money(m.won)} hint="closed" />
+      <Metric label="Win rate" value={percent(m.winRate)} hint="of closed deals" />
+    </dl>
+  );
+}
+
+function Metric({
+  label,
+  value,
+  hint,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+}) {
+  return (
+    <div className="bg-background px-4 py-3">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="tabular mt-0.5 text-[18px] font-semibold tracking-tight">
+        {value}
+      </dd>
+      <p className="mt-0.5 text-[11px] text-muted-foreground">{hint}</p>
+    </div>
+  );
+}

package/templates/crm/components/page-header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The bar at the top of every view: title on the left, actions on the right.
+ * Fixed height so switching pages doesn't shift the content below it.
+ */
+export function PageHeader({
+  title,
+  count,
+  children,
+  className,
+}: {
+  title: string;
+  /** Shown beside the title — the number of rows in view. */
+  count?: number;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        "flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-baseline gap-2">
+        <h1 className="truncate text-[13px] font-semibold">{title}</h1>
+        {typeof count === "number" ? (
+          <span className="tabular text-[12px] text-muted-foreground">{count}</span>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-2">{children}</div>
+    </header>
+  );
+}