@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/crm/app/workspace.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { callFn, db, useRouter } from "@pylonsync/react";
+import { useAuth } from "@pylonsync/client";
+import { Sidebar } from "@/components/sidebar";
+import { CommandPalette } from "@/components/command-palette";
+import type { SearchItem } from "@/lib/search";
+
+export interface CompanyRow {
+  id: string;
+  name: string;
+  domain?: string | null;
+  industry?: string | null;
+  size?: string | null;
+  createdAt?: string | null;
+}
+export interface ContactRow {
+  id: string;
+  name: string;
+  email?: string | null;
+  phone?: string | null;
+  title?: string | null;
+  companyId?: string | null;
+  createdAt?: string | null;
+}
+export interface DealRow {
+  id: string;
+  title: string;
+  value?: number | null;
+  stage: string;
+  companyId?: string | null;
+  contactId?: string | null;
+  closeDate?: string | null;
+  ownerId?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+}
+export interface ActivityRow {
+  id: string;
+  kind: string;
+  body: string;
+  dealId?: string | null;
+  contactId?: string | null;
+  ownerId?: string | null;
+  createdAt?: string | null;
+}
+export interface UserRow {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
+export interface WorkspaceData {
+  companies: CompanyRow[];
+  contacts: ContactRow[];
+  deals: DealRow[];
+  activities: ActivityRow[];
+  companyName: (id: string | null | undefined) => string | null;
+  ownerName: (id: string | null | undefined) => string | null;
+  loading: boolean;
+}
+
+/**
+ * The app shell, and the ONLY place that touches `db`.
+ *
+ * Every screen below receives plain data through the render prop and reports
+ * changes through callbacks, which is what keeps the components in
+ * `components/` renderable from fixtures in a test with nothing mocked.
+ *
+ * Each `db.useQuery` is live: when a teammate moves a deal, the row arrives
+ * here and the board re-renders. Your own writes take exactly the same path,
+ * so there's one behaviour to reason about rather than two.
+ */
+export function Workspace({
+  email,
+  pathname,
+  children,
+}: {
+  email: string;
+  pathname: string;
+  children: (data: WorkspaceData) => React.ReactNode;
+}) {
+  const router = useRouter();
+  const { signOut } = useAuth();
+  const { data: companies, loading: loadingCompanies } =
+    db.useQuery<CompanyRow>("Company");
+  const { data: contacts } = db.useQuery<ContactRow>("Contact");
+  const { data: deals } = db.useQuery<DealRow>("Deal");
+  const { data: activities } = db.useQuery<ActivityRow>("Activity");
+  const { data: users } = db.useQuery<UserRow>("User");
+
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const seeded = useRef(false);
+
+  const companyList = companies ?? [];
+  const contactList = contacts ?? [];
+  const dealList = deals ?? [];
+
+  // A brand-new workspace gets a realistic pipeline once, so the app never
+  // opens on an empty board. `seedWorkspace` no-ops when anything exists, and
+  // the ref stops a re-render from firing a second call mid-flight.
+  useEffect(() => {
+    if (loadingCompanies || seeded.current) return;
+    if (companyList.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    callFn("seedWorkspace", {}).catch(() => {
+      // A failed seed leaves an empty workspace, which is usable — every view
+      // has an empty state that offers to create the first record.
+      seeded.current = false;
+    });
+  }, [loadingCompanies, companyList.length]);
+
+  // ⌘K / Ctrl+K anywhere, and "/" when you're not already typing.
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      const typing =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      } else if (event.key === "/" && !typing) {
+        event.preventDefault();
+        setPaletteOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  const byId = useMemo(() => {
+    const companyById = new Map(companyList.map((c) => [c.id, c] as const));
+    const userById = new Map((users ?? []).map((u) => [u.id, u] as const));
+    return { companyById, userById };
+  }, [companyList, users]);
+
+  const searchIndex = useMemo<SearchItem[]>(
+    () => [
+      ...dealList.map((deal) => ({
+        id: `deal:${deal.id}`,
+        type: "deal" as const,
+        title: deal.title,
+        subtitle: byId.companyById.get(deal.companyId ?? "")?.name,
+        href: `/deals/${deal.id}`,
+      })),
+      ...companyList.map((company) => ({
+        id: `company:${company.id}`,
+        type: "company" as const,
+        title: company.name,
+        subtitle: company.domain ?? undefined,
+        href: "/companies",
+        keywords: company.industry ?? undefined,
+      })),
+      ...contactList.map((contact) => ({
+        id: `contact:${contact.id}`,
+        type: "contact" as const,
+        title: contact.name,
+        subtitle: byId.companyById.get(contact.companyId ?? "")?.name,
+        href: "/contacts",
+        keywords: `${contact.email ?? ""} ${contact.title ?? ""}`,
+      })),
+    ],
+    [dealList, companyList, contactList, byId],
+  );
+
+  const data: WorkspaceData = {
+    companies: companyList,
+    contacts: contactList,
+    deals: dealList,
+    activities: activities ?? [],
+    companyName: (id) => byId.companyById.get(id ?? "")?.name ?? null,
+    ownerName: (id) => {
+      const user = byId.userById.get(id ?? "");
+      return user?.displayName || user?.email || null;
+    },
+    loading: loadingCompanies,
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        workspace="CRM"
+        email={email}
+        pathname={pathname}
+        counts={{
+          "/companies": companyList.length,
+          "/contacts": contactList.length,
+        }}
+        onOpenCommand={() => setPaletteOpen(true)}
+        onSignOut={async () => {
+          await signOut();
+          // Full navigation so the SSR runtime re-resolves auth from the
+          // cookie and the login page renders server-side.
+          window.location.assign("/login");
+        }}
+      />
+      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+
+      <CommandPalette
+        open={paletteOpen}
+        items={searchIndex}
+        actions={[
+          {
+            id: "new-deal",
+            label: "New deal",
+            run: () => router.push("/?new=deal"),
+          },
+          {
+            id: "go-companies",
+            label: "Go to Companies",
+            run: () => router.push("/companies"),
+          },
+          {
+            id: "go-contacts",
+            label: "Go to Contacts",
+            run: () => router.push("/contacts"),
+          },
+        ]}
+        onClose={() => setPaletteOpen(false)}
+        onSelect={(item) => router.push(item.href)}
+      />
+    </div>
+  );
+}

package/templates/crm/app.ts

@@ -0,0 +1,171 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+  font,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// crm — a sales CRM for a small team: companies, contacts, deals moving through
+// a pipeline, and an activity log.
+//
+// The realtime hook: the board subscribes to Deal, so when a teammate drags a
+// deal to "Won" it moves on everyone's board instantly. No refresh, and no
+// standup spent reconciling two people's idea of the forecast.
+//
+//   • Company  — the account. Contacts and deals hang off it.
+//   • Contact  — a person at a company. Holds email/phone, so never public.
+//   • Deal     — the opportunity: value, stage, expected close. The pipeline.
+//   • Activity — a note/call/email/meeting logged against a deal or contact.
+//   • User     — a team member (email/password).
+//
+// TRUST MODEL: an internal tool for ONE team. Every entity is readable and
+// writable by any SIGNED-IN user, and by nobody else — a CRM's whole point is a
+// shared pipeline. `ownerId` records who created a row (for "my deals" and
+// accountability) without partitioning access. For per-rep isolation, tighten
+// allowRead to "auth.userId == data.ownerId" and add a manager role.
+// ---------------------------------------------------------------------------
+
+// Signed-in team members only. Deliberately not `"true"`: an anonymous visitor
+// must never read the customer list, and `pylon lint` flags wide-open policies
+// for exactly this reason.
+const TEAM = "auth.userId != null";
+
+const Company = entity(
+  "Company",
+  {
+    name: field.string(),
+    domain: field.string().optional(),
+    industry: field.string().optional(),
+    // Free text ("1-10", "50-200") rather than an enum — headcount bands vary
+    // by who you ask, and a CRM shouldn't argue with its user about it.
+    size: field.string().optional(),
+    notes: field.string().optional(),
+    ownerId: field.id("User").readonly().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_name", fields: ["name"], unique: false }] },
+);
+
+const Contact = entity(
+  "Contact",
+  {
+    companyId: field.id("Company").optional(),
+    name: field.string(),
+    email: field.string().optional(),
+    phone: field.string().optional(),
+    title: field.string().optional(),
+    ownerId: field.id("User").readonly().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_company", fields: ["companyId"], unique: false }] },
+);
+
+// `stage` drives the board; PIPELINE in lib/pipeline.ts owns the ordered stages
+// and which of them count as closed.
+const Deal = entity(
+  "Deal",
+  {
+    title: field.string(),
+    companyId: field.id("Company").optional(),
+    contactId: field.id("Contact").optional(),
+    // Whole currency units, not cents — a forecast is read by humans, and this
+    // keeps the card, the column total, and the input in one unit.
+    value: field.number().default(0),
+    stage: field.string().default("lead"),
+    closeDate: field.datetime().optional(),
+    ownerId: field.id("User").readonly().optional(),
+    createdAt: field.datetime().defaultNow(),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_stage", fields: ["stage"], unique: false }] },
+);
+
+// The timeline. Attached to a deal, a contact, or both — logging a call against
+// a contact shouldn't require inventing a deal to hang it on.
+const Activity = entity(
+  "Activity",
+  {
+    // "note" | "call" | "email" | "meeting" — see ACTIVITY_KINDS.
+    kind: field.string().default("note"),
+    body: field.string(),
+    dealId: field.id("Deal").optional(),
+    contactId: field.id("Contact").optional(),
+    companyId: field.id("Company").optional(),
+    ownerId: field.id("User").readonly().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_deal", fields: ["dealId"], unique: false }] },
+);
+
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+const teamPolicy = (name: string, entityName: string) =>
+  policy({
+    name,
+    entity: entityName,
+    allowRead: TEAM,
+    allowInsert: TEAM,
+    allowUpdate: TEAM,
+    allowDelete: TEAM,
+  });
+
+// Team members read each other's rows so a deal can show who owns it. Nobody
+// writes User through the client — auth owns that, and passwordHash is
+// serverOnly regardless.
+const userPolicy = policy({
+  name: "user_team_read",
+  entity: "User",
+  allowRead: TEAM,
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Company, Contact, Deal, Activity, User],
+  queries: [],
+  actions: [],
+  policies: [
+    teamPolicy("company_team", "Company"),
+    teamPolicy("contact_team", "Contact"),
+    teamPolicy("deal_team", "Deal"),
+    teamPolicy("activity_team", "Activity"),
+    userPolicy,
+  ],
+  auth: auth(),
+  // Self-hosted Inter: the build fetches the woff2, serves it same-origin (no
+  // third-party request, no FOUT), preloads it, and synthesizes a size-adjusted
+  // fallback so there's no layout shift.
+  fonts: [
+    font({
+      family: "Inter",
+      variable: "--font-sans",
+      weights: ["400", "500", "600", "700"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+  ],
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/crm/bunfig

@@ -0,0 +1,4 @@
+[test]
+# Register a DOM (happy-dom) before any test runs so React component tests can
+# render under `pylon test` / `bun test`. Harmless for pure-logic tests.
+preload = ["./tests/setup.ts"]

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