@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/invoices/app/invoices-view.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { callFn, useRouter } from "@pylonsync/react";
+import { FileText, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Kbd } from "@/components/kbd";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+import { SummaryBar } from "@/components/summary-bar";
+import { StatusBadge } from "@/components/status-badge";
+import {
+  daysOverdue,
+  displayStatus,
+  money,
+  totals,
+} from "@/lib/billing";
+import { Workspace, type InvoiceRow } from "./workspace";
+
+export function InvoicesView({
+  email,
+  openNew,
+}: {
+  email: string;
+  openNew?: boolean;
+}) {
+  const router = useRouter();
+  const [creating, setCreating] = useState(false);
+
+  async function create() {
+    if (creating) return;
+    setCreating(true);
+    try {
+      // The number is allocated server-side from the existing series, so the
+      // client never invents one.
+      const result = await callFn<{ id: string }>("createInvoice", {});
+      if (result?.id) router.push(`/invoices/${result.id}`);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  // ?new=invoice from the ⌘K action.
+  useEffect(() => {
+    if (openNew) void create();
+    // Fire once on mount for the deep link; `create` is stable enough here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openNew]);
+
+  // "c" creates an invoice. Ignored while 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.key === "c" && !typing && !event.metaKey && !event.ctrlKey) {
+        event.preventDefault();
+        void create();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [creating]);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const columns: ColumnDef<InvoiceRow>[] = [
+          {
+            key: "number",
+            header: "Invoice",
+            cell: (row) => <span className="tabular font-medium">{row.number}</span>,
+          },
+          {
+            key: "client",
+            header: "Client",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {data.clientName(row.clientId) ?? "—"}
+              </span>
+            ),
+          },
+          {
+            key: "status",
+            header: "Status",
+            cell: (row) => {
+              const t = totals(row, data.items, data.payments);
+              return <StatusBadge status={displayStatus(row, t.balanceCents)} />;
+            },
+          },
+          {
+            key: "due",
+            header: "Due",
+            cell: (row) => {
+              const t = totals(row, data.items, data.payments);
+              const late = displayStatus(row, t.balanceCents) === "overdue";
+              const days = daysOverdue(row);
+              if (!row.dueDate) return <span className="text-muted-foreground">—</span>;
+              return (
+                <span className={late ? "text-destructive" : "text-muted-foreground"}>
+                  {late && days !== null
+                    ? `${days}d overdue`
+                    : new Date(row.dueDate).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                      })}
+                </span>
+              );
+            },
+          },
+          {
+            key: "total",
+            header: "Total",
+            numeric: true,
+            cell: (row) => money(totals(row, data.items, data.payments).totalCents),
+          },
+          {
+            key: "balance",
+            header: "Balance",
+            numeric: true,
+            cell: (row) => {
+              const t = totals(row, data.items, data.payments);
+              return (
+                <span className={t.balanceCents > 0 ? "" : "text-muted-foreground"}>
+                  {money(t.balanceCents)}
+                </span>
+              );
+            },
+          },
+        ];
+
+        // Newest first — an invoice list is read from the top, and the number
+        // series already encodes the order.
+        const rows = [...data.invoices].sort((a, b) =>
+          b.number.localeCompare(a.number),
+        );
+
+        return (
+          <>
+            <PageHeader title="Invoices" count={rows.length}>
+              <Button size="sm" onClick={() => void create()} disabled={creating}>
+                <Plus />
+                {creating ? "Creating…" : "New invoice"}
+                <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
+                  c
+                </Kbd>
+              </Button>
+            </PageHeader>
+
+            <SummaryBar
+              invoices={data.invoices}
+              items={data.items}
+              payments={data.payments}
+            />
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              onRowClick={(row) => router.push(`/invoices/${row.id}`)}
+              empty={
+                <EmptyState
+                  icon={<FileText />}
+                  title={data.loading ? "Loading…" : "No invoices yet"}
+                  description="Create one, add the billable lines, then send it. Totals and ageing are derived — there's nothing to keep in sync."
+                  action={
+                    <Button size="sm" onClick={() => void create()}>
+                      <Plus />
+                      New invoice
+                    </Button>
+                  }
+                />
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/invoices/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/invoices/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/invoices/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/invoices/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>
+  );
+}

package/templates/invoices/app/page.tsx

@@ -0,0 +1,36 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { InvoicesView } from "./invoices-view";
+
+export const metadata: Metadata = {
+  title: "Invoices",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the invoice list.
+ *
+ * Server-side auth gate only. Reading `auth` opts this render out of caching,
+ * which is correct: every screen here is private.
+ *
+ * The signed-in email comes from the User row — `PageAuth` is
+ * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
+ */
+export default function InvoicesPage({
+  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 (
+    <InvoicesView
+      email={me?.email ?? ""}
+      openNew={searchParams?.new === "invoice"}
+    />
+  );
+}

package/templates/invoices/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/invoices/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/invoices/app/workspace.tsx

@@ -0,0 +1,174 @@
+"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";
+import type { Invoice, LineItem, Payment } from "@/lib/billing";
+
+export interface ClientRow {
+  id: string;
+  name: string;
+  email?: string | null;
+  address?: string | null;
+  taxId?: string | null;
+  createdAt?: string | null;
+}
+export type InvoiceRow = Invoice & { ownerId?: string | null };
+export type LineItemRow = LineItem & { position?: number };
+export type PaymentRow = Payment & { reference?: string | null };
+export interface UserRow {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
+export interface WorkspaceData {
+  clients: ClientRow[];
+  invoices: InvoiceRow[];
+  items: LineItemRow[];
+  payments: PaymentRow[];
+  clientName: (id: string | null | undefined) => string | null;
+  loading: boolean;
+}
+
+/**
+ * The app shell, and the ONLY place that touches `db`.
+ *
+ * Every view below receives plain data through the render prop and reports
+ * changes through callbacks, which is what lets the components in `components/`
+ * render from fixtures in a test with nothing mocked.
+ *
+ * The queries are live: recording a payment updates the balance and flips the
+ * status on every open tab, so two people chasing the same overdue invoice stop
+ * the moment one of them marks it paid.
+ */
+export function Workspace({
+  email,
+  pathname,
+  children,
+}: {
+  email: string;
+  pathname: string;
+  children: (data: WorkspaceData) => React.ReactNode;
+}) {
+  const router = useRouter();
+  const { signOut } = useAuth();
+  const { data: invoices, loading } = db.useQuery<InvoiceRow>("Invoice");
+  const { data: clients } = db.useQuery<ClientRow>("Client");
+  const { data: items } = db.useQuery<LineItemRow>("LineItem");
+  const { data: payments } = db.useQuery<PaymentRow>("Payment");
+
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const seeded = useRef(false);
+
+  const invoiceList = invoices ?? [];
+  const clientList = clients ?? [];
+
+  // A brand-new workspace gets a realistic book once, so the list never opens
+  // empty. `seedWorkspace` no-ops when anything exists; the ref stops a
+  // re-render from firing a second call mid-flight.
+  useEffect(() => {
+    if (loading || seeded.current) return;
+    if (invoiceList.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    callFn("seedWorkspace", {}).catch(() => {
+      seeded.current = false;
+    });
+  }, [loading, invoiceList.length]);
+
+  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 clientById = useMemo(
+    () => new Map(clientList.map((c) => [c.id, c] as const)),
+    [clientList],
+  );
+
+  const searchIndex = useMemo<SearchItem[]>(
+    () => [
+      ...invoiceList.map((invoice) => ({
+        id: `invoice:${invoice.id}`,
+        type: "deal" as const,
+        title: invoice.number,
+        subtitle: clientById.get(invoice.clientId ?? "")?.name,
+        href: `/invoices/${invoice.id}`,
+      })),
+      ...clientList.map((client) => ({
+        id: `client:${client.id}`,
+        type: "company" as const,
+        title: client.name,
+        subtitle: client.email ?? undefined,
+        href: "/clients",
+      })),
+    ],
+    [invoiceList, clientList, clientById],
+  );
+
+  const data: WorkspaceData = {
+    clients: clientList,
+    invoices: invoiceList,
+    items: items ?? [],
+    payments: payments ?? [],
+    clientName: (id) => clientById.get(id ?? "")?.name ?? null,
+    loading,
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        workspace="Invoices"
+        email={email}
+        pathname={pathname}
+        counts={{ "/": invoiceList.length, "/clients": clientList.length }}
+        onOpenCommand={() => setPaletteOpen(true)}
+        onSignOut={async () => {
+          await signOut();
+          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-invoice",
+            label: "New invoice",
+            run: () => router.push("/?new=invoice"),
+          },
+          {
+            id: "go-clients",
+            label: "Go to Clients",
+            run: () => router.push("/clients"),
+          },
+        ]}
+        onClose={() => setPaletteOpen(false)}
+        onSelect={(item) => router.push(item.href)}
+      />
+    </div>
+  );
+}