@pylonsync/create-pylon 0.3.344 → 0.3.345

package/templates/crm/app/page.tsx

@@ -0,0 +1,38 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { PipelineView } from "./pipeline-view";
+
+export const metadata: Metadata = {
+  title: "Pipeline",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the pipeline board.
+ *
+ * Server-side auth gate only. Reading `auth` opts this render out of caching,
+ * which is correct: every screen in this app is private.
+ *
+ * The signed-in email comes from the User row, not from `auth` — `PageAuth` is
+ * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
+ */
+export default function PipelinePage({
+  auth,
+  response,
+  searchParams,
+  serverData,
+}: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+
+  return (
+    <PipelineView
+      email={me?.email ?? ""}
+      // The ⌘K "New deal" action navigates here with ?new=deal.
+      openNew={searchParams?.new === "deal"}
+    />
+  );
+}

package/templates/crm/app/pipeline-view.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { callFn, useRouter } from "@pylonsync/react";
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Kbd } from "@/components/kbd";
+import { PageHeader } from "@/components/page-header";
+import { MetricsBar } from "@/components/metrics-bar";
+import { PipelineBoard } from "@/components/pipeline-board";
+import { BoardSkeleton } from "@/components/board-skeleton";
+import { DealDialog } from "@/components/deal-dialog";
+import { Workspace } from "./workspace";
+
+export function PipelineView({
+  email,
+  openNew,
+}: {
+  email: string;
+  openNew?: boolean;
+}) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(Boolean(openNew));
+
+  // "c" creates a deal, the way an issue tracker does. Ignored while typing so
+  // it never swallows a character in the search box or the activity composer.
+  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.key === "c" && !typing && !event.metaKey && !event.ctrlKey) {
+        event.preventDefault();
+        setDialogOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => (
+        <>
+          <PageHeader title="Pipeline" count={data.deals.length}>
+            <Button size="sm" onClick={() => setDialogOpen(true)}>
+              <Plus />
+              New deal
+              <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
+                c
+              </Kbd>
+            </Button>
+          </PageHeader>
+
+          <MetricsBar deals={data.deals} />
+
+          <div className="min-h-0 flex-1">
+            {data.loading ? (
+              <BoardSkeleton />
+            ) : (
+              <PipelineBoard
+                deals={data.deals}
+                companyName={data.companyName}
+                ownerName={data.ownerName}
+                onOpen={(id) => router.push(`/deals/${id}`)}
+                onMove={(dealId, stage) => {
+                  // Through the mutation, not a bare update: moving a deal also
+                  // writes a history entry, and the stage is validated
+                  // server-side.
+                  void callFn("moveDeal", { dealId, stage });
+                }}
+              />
+            )}
+          </div>
+
+          <DealDialog
+            open={dialogOpen}
+            companies={data.companies}
+            onOpenChange={setDialogOpen}
+            onCreate={async (draft) => {
+              await callFn("createDeal", {
+                title: draft.title,
+                value: draft.value,
+                stage: draft.stage,
+                ...(draft.companyId ? { companyId: draft.companyId } : {}),
+                ...(draft.closeDate
+                  ? { closeDate: new Date(draft.closeDate).toISOString() }
+                  : {}),
+              });
+            }}
+          />
+        </>
+      )}
+    </Workspace>
+  );
+}

package/templates/crm/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. The default export may also be async.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the authenticated app and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/crm/app/sitemap.ts

@@ -0,0 +1,27 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. The default export can be async, so
+// it can enumerate dynamic pages from your database. Point SITE_URL at your
+// domain in production.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  // Only public pages belong here — /dashboard is private (and noindex), so
+  // it's intentionally left out.
+  const staticRoutes: Sitemap = [
+    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    { url: `${SITE}/login`, changeFrequency: "yearly", priority: 0.3 },
+    { url: `${SITE}/signup`, changeFrequency: "yearly", priority: 0.5 },
+  ];
+
+  // The export is async, so you can enumerate dynamic pages from a DB read:
+  //
+  //   const posts = await fetchPublishedPosts();
+  //   const postRoutes: Sitemap = posts.map((p) => ({
+  //     url: `${SITE}/blog/${p.slug}`,
+  //     lastModified: p.updatedAt,
+  //   }));
+  //   return [...staticRoutes, ...postRoutes];
+
+  return staticRoutes;
+}

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"]