@pylonsync/create-pylon 0.3.344 → 0.3.345

package/templates/crm/components/activity-timeline.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { CalendarDays, Mail, PhoneCall, StickyNote } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ACTIVITY_KINDS, relativeTime, type ActivityKind } from "@/lib/pipeline";
+
+export interface ActivityRow {
+  id: string;
+  kind: string;
+  body: string;
+  ownerId?: string | null;
+  createdAt?: string | null;
+}
+
+const ICON: Record<string, React.ReactNode> = {
+  note: <StickyNote />,
+  call: <PhoneCall />,
+  email: <Mail />,
+  meeting: <CalendarDays />,
+};
+
+/**
+ * What happened on this deal, newest first, with the composer on top so logging
+ * a call takes one click from landing on the page.
+ */
+export function ActivityTimeline({
+  activities,
+  ownerName,
+  onLog,
+}: {
+  activities: ActivityRow[];
+  ownerName: (id: string | null | undefined) => string | null;
+  onLog: (kind: ActivityKind, body: string) => void | Promise<void>;
+}) {
+  const [kind, setKind] = useState<ActivityKind>("note");
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const ordered = [...activities].sort((a, b) =>
+    (b.createdAt ?? "").localeCompare(a.createdAt ?? ""),
+  );
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    const text = body.trim();
+    if (!text || busy) return;
+    setBusy(true);
+    try {
+      await onLog(kind, text);
+      setBody("");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <form onSubmit={submit} className="rounded-lg border border-border bg-card p-2.5">
+        <Textarea
+          value={body}
+          rows={2}
+          placeholder="Log a call, note, or next step…"
+          aria-label="Activity"
+          onChange={(event) => setBody(event.target.value)}
+          onKeyDown={(event) => {
+            // ⌘/Ctrl+Enter submits — the composer is small and always focused
+            // when you're typing into it.
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+              submit(event);
+            }
+          }}
+          className="min-h-16 resize-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0"
+        />
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <div className="w-32">
+            <Select
+              aria-label="Activity type"
+              value={kind}
+              onChange={(event) => setKind(event.target.value as ActivityKind)}
+              className="h-7 text-[12px]"
+            >
+              {ACTIVITY_KINDS.map((value) => (
+                <option key={value} value={value}>
+                  {value[0].toUpperCase() + value.slice(1)}
+                </option>
+              ))}
+            </Select>
+          </div>
+          <Button type="submit" size="sm" disabled={!body.trim() || busy}>
+            {busy ? "Saving…" : "Log"}
+          </Button>
+        </div>
+      </form>
+
+      {ordered.length === 0 ? (
+        <p className="px-1 py-6 text-center text-[12px] text-muted-foreground">
+          No activity yet. Log the first call or note above.
+        </p>
+      ) : (
+        <ol className="space-y-3">
+          {ordered.map((activity) => (
+            <li key={activity.id} className="flex gap-2.5">
+              <div
+                className={cn(
+                  "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md",
+                  "bg-surface-2 text-muted-foreground [&_svg]:size-3",
+                )}
+              >
+                {ICON[activity.kind] ?? ICON.note}
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                  <Avatar name={ownerName(activity.ownerId) ?? "?"} size="sm" />
+                  <span className="capitalize">{activity.kind}</span>
+                  <span aria-hidden="true">·</span>
+                  <time dateTime={activity.createdAt ?? undefined}>
+                    {relativeTime(activity.createdAt)}
+                  </time>
+                </div>
+                <p className="mt-1 whitespace-pre-wrap text-[13px] leading-5">
+                  {activity.body}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

package/templates/crm/components/avatar.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { accentIndex, initials } from "@/lib/pipeline";
+
+// Deterministic accent per record — the same company keeps its colour across
+// sessions and machines without storing one. Hues are muted so a dense list
+// doesn't turn into confetti.
+const ACCENTS = [
+  "bg-indigo-500/15 text-indigo-500 dark:text-indigo-300",
+  "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300",
+  "bg-amber-500/15 text-amber-600 dark:text-amber-300",
+  "bg-rose-500/15 text-rose-500 dark:text-rose-300",
+  "bg-sky-500/15 text-sky-600 dark:text-sky-300",
+  "bg-violet-500/15 text-violet-500 dark:text-violet-300",
+];
+
+export function Avatar({
+  name,
+  size = "md",
+  className,
+}: {
+  name: string | null | undefined;
+  size?: "sm" | "md";
+  className?: string;
+}) {
+  const label = initials(name);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
+        ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}

package/templates/crm/components/board-skeleton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { BOARD_STAGES } from "@/lib/pipeline";
+
+/**
+ * The board's shape while the replica hydrates.
+ *
+ * The shell is server-rendered but the deals arrive over sync, so there's a
+ * beat before the first row lands. Showing the real column structure with
+ * placeholder cards keeps that beat from reading as "you have no deals" — and
+ * because the columns are already in place, nothing jumps when the data
+ * arrives.
+ */
+export function BoardSkeleton() {
+  return (
+    <div className="flex h-full gap-3 overflow-hidden p-4" aria-hidden="true">
+      {BOARD_STAGES.map((stage, column) => (
+        <section
+          key={stage.id}
+          className="flex w-[268px] shrink-0 flex-col rounded-xl border border-border bg-surface-1/50"
+        >
+          <header className="flex items-center gap-2 px-3 py-2.5">
+            <span className="text-[12px] font-medium text-muted-foreground">
+              {stage.label}
+            </span>
+          </header>
+          <div className="flex flex-col gap-2 px-2 pb-2">
+            {/* Fewer cards further down the funnel, so the placeholder reads
+                like a pipeline rather than a grid. */}
+            {Array.from({ length: Math.max(1, 3 - column) }).map((_, card) => (
+              <div
+                key={card}
+                className="animate-pulse rounded-lg border border-border bg-card p-2.5"
+              >
+                <div className="h-3 w-3/4 rounded bg-muted" />
+                <div className="mt-2 h-2.5 w-1/2 rounded bg-muted" />
+                <div className="mt-3 h-4 w-4 rounded-full bg-muted" />
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

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>
+  );
+}