@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/invoices/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/invoices/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/invoices/app/invoices/[id]/invoice-view.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import React, { useState } 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 { StatusBadge } from "@/components/status-badge";
+import { LineItems } from "@/components/line-items";
+import { TotalsPanel } from "@/components/totals-panel";
+import { PaymentDialog } from "@/components/payment-dialog";
+import { relativeTime } from "@/lib/format";
+import { STATUSES, displayStatus, money, totals } from "@/lib/billing";
+import { Workspace } from "../../workspace";
+
+export function InvoiceView({
+  email,
+  invoiceId,
+}: {
+  email: string;
+  invoiceId: string;
+}) {
+  const router = useRouter();
+  const [payOpen, setPayOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const invoice = data.invoices.find((i) => i.id === invoiceId);
+
+        if (!invoice) {
+          return (
+            <>
+              <PageHeader title="Invoice" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Invoice 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 invoices</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const t = totals(invoice, data.items, data.payments);
+        const shown = displayStatus(invoice, t.balanceCents);
+        const client = data.clients.find((c) => c.id === invoice.clientId);
+        const lines = data.items.filter((item) => item.invoiceId === invoice.id);
+        const paid = data.payments
+          .filter((payment) => payment.invoiceId === invoice.id)
+          .sort((a, b) => (b.paidAt ?? "").localeCompare(a.paidAt ?? ""));
+        // A sent invoice is a document someone is paying against; editing its
+        // lines after the fact desyncs it from the copy in their inbox.
+        const editable = invoice.status === "draft";
+
+        return (
+          <>
+            <PageHeader title={invoice.number}>
+              <StatusBadge status={shown} />
+              <div className="w-28">
+                <Select
+                  aria-label="Status"
+                  value={invoice.status}
+                  className="h-7 text-[12px]"
+                  onChange={(event) =>
+                    void callFn("setInvoiceStatus", {
+                      invoiceId: invoice.id,
+                      status: event.target.value,
+                    })
+                  }
+                >
+                  {STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              {t.balanceCents > 0 && invoice.status !== "void" ? (
+                <Button size="sm" onClick={() => setPayOpen(true)}>
+                  Record payment
+                </Button>
+              ) : null}
+              {editable ? (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={async () => {
+                    await db.delete("Invoice", invoice.id);
+                    router.push("/");
+                  }}
+                  className="text-muted-foreground hover:text-destructive"
+                >
+                  <Trash2 />
+                </Button>
+              ) : null}
+            </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" />
+                  Invoices
+                </Link>
+
+                <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="Client">
+                    <Select
+                      aria-label="Client"
+                      value={invoice.clientId ?? ""}
+                      className="h-7 text-[12px]"
+                      onChange={(event) =>
+                        void db.update("Invoice", invoice.id, {
+                          clientId: event.target.value || null,
+                        })
+                      }
+                    >
+                      <option value="">—</option>
+                      {data.clients.map((c) => (
+                        <option key={c.id} value={c.id}>
+                          {c.name}
+                        </option>
+                      ))}
+                    </Select>
+                  </Field>
+                  <Field label="Issued">
+                    {invoice.issueDate
+                      ? new Date(invoice.issueDate).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })
+                      : "—"}
+                  </Field>
+                  <Field label="Due">
+                    {invoice.dueDate
+                      ? new Date(invoice.dueDate).toLocaleDateString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })
+                      : "—"}
+                  </Field>
+                  <Field label="Balance">
+                    <span
+                      className={
+                        "tabular font-medium" +
+                        (t.balanceCents > 0 ? " text-destructive" : "")
+                      }
+                    >
+                      {money(t.balanceCents)}
+                    </span>
+                  </Field>
+                </dl>
+
+                {client?.address ? (
+                  <div className="text-[12px] text-muted-foreground">
+                    <p className="mb-1 font-medium text-foreground">Billed to</p>
+                    <p className="whitespace-pre-wrap">{client.address}</p>
+                  </div>
+                ) : null}
+
+                <LineItems
+                  items={lines}
+                  editable={editable}
+                  onAdd={async (draft) => {
+                    await db.insert("LineItem", {
+                      ...draft,
+                      invoiceId: invoice.id,
+                      position: lines.length,
+                    });
+                  }}
+                  onRemove={async (id) => {
+                    await db.delete("LineItem", id);
+                  }}
+                />
+
+                <TotalsPanel totals={t} taxRateBps={invoice.taxRateBps} />
+
+                {paid.length > 0 ? (
+                  <section>
+                    <h2 className="mb-2 text-[13px] font-semibold">Payments</h2>
+                    <ul className="space-y-1.5">
+                      {paid.map((payment) => (
+                        <li
+                          key={payment.id}
+                          className="flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-[12px]"
+                        >
+                          <span className="tabular font-medium">
+                            {money(payment.amountCents)}
+                          </span>
+                          <span className="text-muted-foreground capitalize">
+                            {payment.method ?? "other"}
+                          </span>
+                          {payment.reference ? (
+                            <span className="truncate text-muted-foreground">
+                              {payment.reference}
+                            </span>
+                          ) : null}
+                          <time
+                            className="ml-auto text-muted-foreground"
+                            dateTime={payment.paidAt ?? undefined}
+                          >
+                            {relativeTime(payment.paidAt)}
+                          </time>
+                        </li>
+                      ))}
+                    </ul>
+                  </section>
+                ) : null}
+              </div>
+            </div>
+
+            <PaymentDialog
+              open={payOpen}
+              balanceCents={t.balanceCents}
+              onOpenChange={setPayOpen}
+              onRecord={(amountCents, method, reference) =>
+                callFn("recordPayment", {
+                  invoiceId: invoice.id,
+                  amountCents,
+                  method,
+                  ...(reference ? { reference } : {}),
+                })
+              }
+            />
+          </>
+        );
+      }}
+    </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/invoices/app/invoices/[id]/page.tsx

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { InvoiceView } from "./invoice-view";
+
+export const metadata: Metadata = {
+  title: "Invoice",
+  robots: "noindex",
+};
+
+/** `app/invoices/[id]/page.tsx` -> `/invoices/:id`. */
+export default function InvoicePage({
+  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 <InvoiceView email={me?.email ?? ""} invoiceId={params.id} />;
+}