@pylonsync/create-pylon 0.3.344 → 0.3.345

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

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

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { cn } from "@/lib/utils";
+import { DealCard } from "@/components/deal-card";
+import { BOARD_STAGES, groupByStage, money, type Deal } from "@/lib/pipeline";
+
+/**
+ * The pipeline, as columns you can drag deals between.
+ *
+ * Presentational on purpose: it renders whatever deals it's handed and reports
+ * a move through `onMove`. The container writes to `db`, the write syncs, and
+ * the new rows arrive back here — which is also how a teammate's move appears,
+ * so there is exactly one code path for "a deal changed stage".
+ */
+export function PipelineBoard({
+  deals,
+  companyName,
+  ownerName,
+  onMove,
+  onOpen,
+}: {
+  deals: Deal[];
+  companyName: (id: string | null | undefined) => string | null;
+  ownerName: (id: string | null | undefined) => string | null;
+  onMove: (dealId: string, stage: string) => void;
+  onOpen: (dealId: string) => void;
+}) {
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [over, setOver] = useState<string | null>(null);
+  const columns = groupByStage(deals, BOARD_STAGES);
+
+  return (
+    <div className="flex h-full gap-3 overflow-x-auto p-4">
+      {columns.map((column) => {
+        const isTarget = over === column.stage.id;
+        return (
+          <section
+            key={column.stage.id}
+            onDragOver={(event) => {
+              // Preventing default is what marks this a valid drop target.
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+              if (over !== column.stage.id) setOver(column.stage.id);
+            }}
+            onDragLeave={(event) => {
+              // Ignore bubbling from children, or the highlight flickers.
+              if (event.currentTarget.contains(event.relatedTarget as Node)) return;
+              setOver((current) => (current === column.stage.id ? null : current));
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              const id = event.dataTransfer.getData("text/plain") || dragging;
+              setOver(null);
+              setDragging(null);
+              if (!id) return;
+              const deal = deals.find((d) => d.id === id);
+              // A drop back on the same column is a no-op, not a write.
+              if (!deal || deal.stage === column.stage.id) return;
+              onMove(id, column.stage.id);
+            }}
+            className={cn(
+              "flex w-[268px] shrink-0 flex-col rounded-xl border transition-colors",
+              isTarget
+                ? "border-ring/60 bg-surface-2/60"
+                : "border-border bg-surface-1/50",
+            )}
+            aria-label={column.stage.label}
+          >
+            <header className="flex items-center gap-2 px-3 py-2.5">
+              <h2 className="text-[12px] font-medium">{column.stage.label}</h2>
+              <span className="tabular text-[11px] text-muted-foreground">
+                {column.deals.length}
+              </span>
+              <span className="tabular ml-auto text-[11px] text-muted-foreground">
+                {money(column.total)}
+              </span>
+            </header>
+
+            <div className="flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
+              {column.deals.map((deal) => (
+                <DealCard
+                  key={deal.id}
+                  deal={deal}
+                  company={companyName(deal.companyId)}
+                  owner={ownerName(deal.ownerId)}
+                  dragging={dragging === deal.id}
+                  onOpen={onOpen}
+                  onDragStart={setDragging}
+                  onDragEnd={() => {
+                    setDragging(null);
+                    setOver(null);
+                  }}
+                />
+              ))}
+              {column.deals.length === 0 ? (
+                <p className="px-1 py-6 text-center text-[11px] text-muted-foreground">
+                  {isTarget ? "Drop here" : "Nothing here"}
+                </p>
+              ) : null}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+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";
+
+export interface FieldSpec {
+  name: string;
+  label: string;
+  type?: "text" | "email" | "tel";
+  placeholder?: string;
+  required?: boolean;
+  /** Renders a picker instead of a text input. */
+  options?: Array<{ value: string; label: string }>;
+}
+
+/**
+ * A create dialog driven by a field list — used for companies and contacts,
+ * which differ only in their fields. Deals get their own dialog because value,
+ * stage and close date need real layout rather than a stack of text inputs.
+ */
+export function RecordDialog({
+  open,
+  title,
+  fields,
+  submitLabel,
+  onOpenChange,
+  onCreate,
+}: {
+  open: boolean;
+  title: string;
+  fields: FieldSpec[];
+  submitLabel: string;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (values: Record<string, string>) => void | Promise<void>;
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setValues({});
+    setBusy(false);
+  }, [open]);
+
+  const missing = fields.some(
+    (field) => field.required && !(values[field.name] ?? "").trim(),
+  );
+  const canSubmit = !missing && !busy;
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      const trimmed: Record<string, string> = {};
+      for (const [key, value] of Object.entries(values)) {
+        const clean = value.trim();
+        if (clean) trimmed[key] = clean;
+      }
+      await onCreate(trimmed);
+      onOpenChange(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={submit} className="grid gap-4">
+          {fields.map((field, index) => (
+            <div key={field.name} className="space-y-1.5">
+              <Label htmlFor={`record-${field.name}`}>{field.label}</Label>
+              {field.options ? (
+                <Select
+                  id={`record-${field.name}`}
+                  value={values[field.name] ?? ""}
+                  onChange={(event) =>
+                    setValues((v) => ({ ...v, [field.name]: event.target.value }))
+                  }
+                >
+                  <option value="">—</option>
+                  {field.options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              ) : (
+                <Input
+                  id={`record-${field.name}`}
+                  autoFocus={index === 0}
+                  type={field.type ?? "text"}
+                  placeholder={field.placeholder}
+                  value={values[field.name] ?? ""}
+                  onChange={(event) =>
+                    setValues((v) => ({ ...v, [field.name]: event.target.value }))
+                  }
+                />
+              )}
+            </div>
+          ))}
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy ? "Saving…" : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/crm/components/sidebar.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { Building2, Command, LayoutGrid, LogOut, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { Kbd } from "@/components/kbd";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  count?: number;
+}
+
+export const NAV: Array<Omit<NavItem, "count">> = [
+  { href: "/", label: "Pipeline", icon: <LayoutGrid /> },
+  { href: "/companies", label: "Companies", icon: <Building2 /> },
+  { href: "/contacts", label: "Contacts", icon: <Users /> },
+];
+
+/**
+ * The fixed left rail. Presentational: the active path, the counts, and the
+ * sign-out handler all arrive as props, so it renders identically in a test.
+ */
+export function Sidebar({
+  workspace,
+  email,
+  pathname,
+  counts,
+  onOpenCommand,
+  onSignOut,
+}: {
+  workspace: string;
+  email: string;
+  pathname: string;
+  counts?: Record<string, number>;
+  onOpenCommand: () => void;
+  onSignOut: () => void;
+}) {
+  return (
+    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
+      <div className="flex h-12 items-center gap-2 px-3">
+        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
+          {workspace.slice(0, 1).toUpperCase()}
+        </span>
+        <span className="truncate text-[13px] font-semibold">{workspace}</span>
+      </div>
+
+      <div className="px-2 pb-2">
+        <button
+          type="button"
+          onClick={onOpenCommand}
+          className={cn(
+            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
+            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+          )}
+        >
+          <Command className="size-3.5" />
+          <span className="flex-1 text-left">Search…</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      </div>
+
+      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+        {NAV.map((item) => {
+          const active =
+            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
+                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                active
+                  ? "bg-surface-2 font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+              )}
+            >
+              {item.icon}
+              <span className="flex-1 truncate">{item.label}</span>
+              {counts?.[item.href] ? (
+                <span className="tabular text-[11px] text-muted-foreground">
+                  {counts[item.href]}
+                </span>
+              ) : null}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="border-t border-border p-2">
+        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
+          <Avatar name={email} size="sm" />
+          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
+            {email}
+          </span>
+          <button
+            type="button"
+            onClick={onSignOut}
+            title="Sign out"
+            aria-label="Sign out"
+            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+          >
+            <LogOut className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/templates/crm/components/stage-badge.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { stageById } from "@/lib/pipeline";
+
+const DOT: Record<string, string> = {
+  lead: "bg-stage-lead",
+  qualified: "bg-stage-qualified",
+  proposal: "bg-stage-proposal",
+  won: "bg-stage-won",
+  lost: "bg-stage-lost",
+};
+
+/**
+ * A stage as a dot plus a label. A dot carries the status at a glance in a
+ * dense row without the visual weight of a filled chip on every line.
+ */
+export function StageBadge({
+  stage,
+  className,
+}: {
+  stage: string;
+  className?: string;
+}) {
+  const meta = stageById(stage);
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}>
+      <span
+        className={cn("size-1.5 shrink-0 rounded-full", DOT[stage] ?? "bg-muted-foreground")}
+      />
+      <span className="text-muted-foreground">{meta?.label ?? stage}</span>
+    </span>
+  );
+}