@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/crm/app/deals/[id]/deal-view.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import React from "react";
+import { Link, callFn, db, useRouter } from "@pylonsync/react";
+import { ArrowLeft, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { ActivityTimeline } from "@/components/activity-timeline";
+import { StageBadge } from "@/components/stage-badge";
+import { Avatar } from "@/components/avatar";
+import { PIPELINE, daysUntil, money, relativeTime } from "@/lib/pipeline";
+import { Workspace } from "../../workspace";
+
+export function DealView({ email, dealId }: { email: string; dealId: string }) {
+  const router = useRouter();
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const deal = data.deals.find((d) => d.id === dealId);
+
+        if (!deal) {
+          return (
+            <>
+              <PageHeader title="Deal" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Deal not found"}
+                description={
+                  data.loading
+                    ? undefined
+                    : "It may have been deleted, or the link is wrong."
+                }
+                action={
+                  data.loading ? undefined : (
+                    <Button size="sm" variant="secondary" asChild>
+                      <Link href="/">Back to pipeline</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const contact = data.contacts.find((c) => c.id === deal.contactId);
+        const activities = data.activities.filter((a) => a.dealId === deal.id);
+        const days = daysUntil(deal.closeDate);
+
+        return (
+          <>
+            <PageHeader title={deal.title}>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={async () => {
+                  await db.delete("Deal", deal.id);
+                  router.push("/");
+                }}
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 />
+                Delete
+              </Button>
+            </PageHeader>
+
+            <div className="min-h-0 flex-1 overflow-y-auto">
+              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-6">
+                <Link
+                  href="/"
+                  className="inline-flex w-fit items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <ArrowLeft className="size-3.5" />
+                  Pipeline
+                </Link>
+
+                <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
+                  <h1 className="text-[22px] font-semibold tracking-tight">
+                    {deal.title}
+                  </h1>
+                  <span className="tabular text-[18px] font-medium text-muted-foreground">
+                    {money(deal.value)}
+                  </span>
+                </div>
+
+                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-lg border border-border bg-card p-4 sm:grid-cols-4">
+                  <Field label="Stage">
+                    {/* Changing stage here goes through the same mutation the
+                        board uses, so it's logged identically. */}
+                    <Select
+                      aria-label="Stage"
+                      value={deal.stage}
+                      className="h-7 text-[12px]"
+                      onChange={(event) =>
+                        void callFn("moveDeal", {
+                          dealId: deal.id,
+                          stage: event.target.value,
+                        })
+                      }
+                    >
+                      {PIPELINE.map((stage) => (
+                        <option key={stage.id} value={stage.id}>
+                          {stage.label}
+                        </option>
+                      ))}
+                    </Select>
+                  </Field>
+
+                  <Field label="Company">
+                    {data.companyName(deal.companyId) ?? "—"}
+                  </Field>
+
+                  <Field label="Contact">
+                    {contact ? (
+                      <span className="flex items-center gap-1.5">
+                        <Avatar name={contact.name} size="sm" />
+                        {contact.name}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Field>
+
+                  <Field label="Expected close">
+                    {deal.closeDate ? (
+                      <span className={days !== null && days < 0 ? "text-destructive" : ""}>
+                        {new Date(deal.closeDate).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}
+                      </span>
+                    ) : (
+                      "—"
+                    )}
+                  </Field>
+                </dl>
+
+                <div className="flex items-center gap-3 text-[12px] text-muted-foreground">
+                  <StageBadge stage={deal.stage} />
+                  <span aria-hidden="true">·</span>
+                  <span>Created {relativeTime(deal.createdAt)}</span>
+                  {data.ownerName(deal.ownerId) ? (
+                    <>
+                      <span aria-hidden="true">·</span>
+                      <span>Owned by {data.ownerName(deal.ownerId)}</span>
+                    </>
+                  ) : null}
+                </div>
+
+                <section>
+                  <h2 className="mb-3 text-[13px] font-semibold">Activity</h2>
+                  <ActivityTimeline
+                    activities={activities}
+                    ownerName={data.ownerName}
+                    onLog={(kind, body) =>
+                      callFn("logActivity", {
+                        kind,
+                        body,
+                        dealId: deal.id,
+                        ...(deal.companyId ? { companyId: deal.companyId } : {}),
+                      })
+                    }
+                  />
+                </section>
+              </div>
+            </div>
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}
+
+function Field({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="mt-1 truncate text-[13px]">{children}</dd>
+    </div>
+  );
+}

package/templates/crm/app/deals/[id]/page.tsx

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { DealView } from "./deal-view";
+
+export const metadata: Metadata = {
+  title: "Deal",
+  robots: "noindex",
+};
+
+/** `app/deals/[id]/page.tsx` → `/deals/:id`. */
+export default function DealPage({
+  auth,
+  response,
+  params,
+  serverData,
+}: PageProps<{ id: string }>) {
+  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 <DealView email={me?.email ?? ""} dealId={params.id} />;
+}

package/templates/crm/app/error.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+
+// `app/error.tsx` → the error boundary for this segment. It catches a throw
+// in any page/layout below it and renders at HTTP 500. It's HYDRATED, so
+// this is a real interactive client component: `reset()` re-attempts the
+// route, and useState/onClick work. The thrown error reaches the client as
+// `{ message, digest }` only — the stack stays in the dev overlay
+// (PYLON_DEV_MODE) and the server logs, never in the page.
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  const [tries, setTries] = React.useState(0);
+  return (
+    <div className="space-y-6">
+      <section>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Something went wrong
+        </h1>
+        <p className="mt-2 text-muted-foreground">{error.message}</p>
+        {error.digest ? (
+          <p className="mt-1 text-xs text-muted-foreground/70">
+            Reference: <code>{error.digest}</code>
+          </p>
+        ) : null}
+      </section>
+      <div className="flex items-center gap-3">
+        <Button
+          onClick={() => {
+            setTries((n) => n + 1);
+            reset();
+          }}
+        >
+          Try again
+        </Button>
+        {tries > 0 ? (
+          <span className="text-sm text-muted-foreground">
+            Retried {tries} {tries === 1 ? "time" : "times"}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/crm/app/globals.css

@@ -0,0 +1,201 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ---------------------------------------------------------------------------
+   Design tokens.
+
+   Tuned for a dense internal tool rather than a marketing page: a near-neutral
+   surface ramp, hairline borders instead of shadows, and one accent used
+   sparingly so status colour still means something. Dark is the primary theme —
+   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
+   alternative, not an afterthought.
+
+   These are the same variable names shadcn/ui generates against, so
+   `npx shadcn@latest add <component>` drops in already themed.
+--------------------------------------------------------------------------- */
+:root {
+  --radius: 0.5rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.21 0.006 285.9);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.55 0.204 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.002 286.4);
+  --secondary-foreground: oklch(0.27 0.006 286);
+  --muted: oklch(0.972 0.002 286.4);
+  --muted-foreground: oklch(0.53 0.013 286);
+  --accent: oklch(0.96 0.003 286.4);
+  --accent-foreground: oklch(0.27 0.006 286);
+  --destructive: oklch(0.58 0.216 27.3);
+
+  --border: oklch(0.918 0.004 286.3);
+  --input: oklch(0.918 0.004 286.3);
+  --ring: oklch(0.55 0.204 274.5);
+
+  /* Surfaces above the page: sidebar, popovers, hover rows. */
+  --surface-1: oklch(0.985 0.001 286.4);
+  --surface-2: oklch(0.968 0.002 286.4);
+
+  /* Pipeline + status. Muted on purpose — a board of saturated chips is
+     unreadable, and the eye should land on the one that's actually urgent. */
+  --stage-lead: oklch(0.62 0.03 264);
+  --stage-qualified: oklch(0.6 0.13 240);
+  --stage-proposal: oklch(0.68 0.15 78);
+  --stage-won: oklch(0.6 0.15 155);
+  --stage-lost: oklch(0.6 0.11 25);
+}
+
+.dark {
+  --background: oklch(0.165 0.004 285.9);
+  --foreground: oklch(0.93 0.002 286.3);
+  --card: oklch(0.196 0.005 285.9);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.216 0.006 285.9);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.62 0.19 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.25 0.006 286);
+  --secondary-foreground: oklch(0.93 0.002 286.3);
+  --muted: oklch(0.25 0.006 286);
+  --muted-foreground: oklch(0.65 0.012 286);
+  --accent: oklch(0.26 0.006 286);
+  --accent-foreground: oklch(0.93 0.002 286.3);
+  --destructive: oklch(0.65 0.19 25);
+
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.62 0.19 274.5);
+
+  --surface-1: oklch(0.186 0.004 285.9);
+  --surface-2: oklch(0.216 0.006 285.9);
+
+  --stage-lead: oklch(0.68 0.03 264);
+  --stage-qualified: oklch(0.68 0.13 240);
+  --stage-proposal: oklch(0.75 0.14 78);
+  --stage-won: oklch(0.7 0.15 155);
+  --stage-lost: oklch(0.68 0.14 25);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 3px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+
+  --color-stage-lead: var(--stage-lead);
+  --color-stage-qualified: var(--stage-qualified);
+  --color-stage-proposal: var(--stage-proposal);
+  --color-stage-won: var(--stage-won);
+  --color-stage-lost: var(--stage-lost);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+
+  html {
+    /* An internal tool is a fixed shell with scrolling panes, not a scrolling
+       document — this keeps the sidebar and header from drifting. */
+    height: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    height: 100%;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    /* 13px is the density these screens are designed at; the slight negative
+       tracking is what keeps Inter from looking loose at that size. */
+    font-size: 13px;
+    line-height: 1.5;
+    letter-spacing: -0.006em;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  /* Numbers that sit in columns must not jitter as they change. */
+  .tabular,
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Thin, self-effacing scrollbars — the board has several at once. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-foreground) 18%, transparent)
+      transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-foreground) 16%, transparent);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Only show focus rings for keyboard users; a mouse click shouldn't ring. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 1px;
+  }
+}
+
+@layer components {
+  /* A hairline that reads at 1px on any DPR without the doubling you get from
+     a plain border on retina. */
+  .hairline {
+    box-shadow: inset 0 -1px 0 0 var(--color-border);
+  }
+}

package/templates/crm/app/layout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The document shell. The app chrome — sidebar, command palette, shortcuts —
+ * lives in `app/workspace.tsx` instead, because it needs the synced data; this
+ * layer only sets up the page.
+ *
+ * `class="dark"` makes dark the default theme. The light tokens in globals.css
+ * are complete and tested, so removing the class flips the whole app; swap it
+ * for a stored preference when you want a toggle.
+ */
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>__APP_NAME__</title>
+        {/* Tailwind is compiled by Pylon from app/globals.css and the
+            stylesheet link is injected here automatically. Inter is declared in
+            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
+            preload link, and a size-adjusted fallback are injected too. */}
+      </head>
+      <body className="h-full">{children}</body>
+    </html>
+  );
+}

package/templates/crm/app/login/auth-form.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ApiError,
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * One form, two modes. Calls the built-in auth API (`/api/auth/password/*`),
+ * then `persistSession` writes the token so the sync engine and `callFn`
+ * authenticate as this user on the next load.
+ *
+ * The navigation is a full `assign`, not a client route change, so the SSR
+ * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
+ * workspace is already signed in.
+ */
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-3.5">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@company.com"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+          />
+        </div>
+        {error ? (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] leading-snug text-destructive">
+            {error}
+          </p>
+        ) : null}
+        <Button type="submit" disabled={pending} className="w-full">
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </Button>
+      </form>
+
+      <p className="text-center text-[12px] text-muted-foreground">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-foreground underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// `ApiError` carries a stable `.code`, so branch on the code rather than the
+// message — the copy here is ours, the message is the framework's.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known breach. Choose another.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/crm/app/login/page.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { AuthForm } from "./auth-form";
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  robots: "noindex",
+};
+
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in? Nothing to do here.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) {
+    response.redirect("/");
+    return null;
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-[320px]">
+        <div className="mb-7 flex items-center gap-2">
+          <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+            C
+          </span>
+          <span className="text-[15px] font-semibold tracking-tight">CRM</span>
+        </div>
+        <h1 className="text-[19px] font-semibold tracking-tight">
+          Sign in to your workspace
+        </h1>
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Your team shares one pipeline. Anyone with an account sees it.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/crm/app/not-found.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
+// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
+// the buttons below use the client router. Not-found boundaries receive the
+// standard page props (and, matching Next, no `reset`).
+export default function NotFound(_props: NotFoundProps) {
+  const router = useRouter();
+  return (
+    <div className="space-y-6">
+      <section>
+        <h1 className="text-2xl font-semibold tracking-tight">404</h1>
+        <p className="mt-2 text-muted-foreground">
+          We couldn&apos;t find that page.
+        </p>
+      </section>
+      <div className="flex items-center gap-3">
+        <Button onClick={() => router.back()} variant="outline">
+          ← Go back
+        </Button>
+        <Button asChild>
+          <Link href="/">Home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}