@pyreon/create-zero 0.14.0 → 0.15.0

package/templates/dashboard/src/routes/app/_layout.tsx

@@ -0,0 +1,76 @@
+import { signal } from "@pyreon/reactivity"
+import { onMount } from "@pyreon/core"
+import { RouterView, useRouter } from "@pyreon/router"
+import { Link } from "@pyreon/zero/link"
+import { ThemeToggle } from "@pyreon/zero/theme"
+import { getSession, type SessionInfo } from "../../lib/auth"
+
+/**
+ * Auth-gated route group. Every `/app/*` route runs through this layout,
+ * which checks the session client-side on mount and redirects to `/login`
+ * if missing. Pyreon doesn't ship a loader-side `throw redirect()` pattern
+ * (unlike Remix / React Router), so the gate runs after first paint —
+ * brief flash of the layout shell is acceptable since unauthorized users
+ * see no real data (the data-fetching helpers in `lib/db.ts` should
+ * additionally enforce authorization on the server).
+ *
+ * For SSR-side enforcement, set the session cookie on the server-rendered
+ * response and add a route middleware that 302s anonymous requests at the
+ * adapter layer (vercel.json rewrites, Cloudflare Pages function, etc.).
+ */
+export function layout() {
+  const session = signal<SessionInfo | null>(null)
+  const router = useRouter()
+
+  onMount(() => {
+    const sid = readSessionCookie()
+    void getSession(sid).then((info) => {
+      if (!info) {
+        void router.push("/login")
+        return
+      }
+      session.set(info)
+    })
+  })
+
+  return (
+    <div class="app-shell">
+      <aside class="app-sidebar">
+        <div class="brand">Dashboard</div>
+        <Link href="/app/dashboard" prefetch="hover" exactActiveClass="nav-active">
+          Overview
+        </Link>
+        <Link href="/app/users" prefetch="hover" exactActiveClass="nav-active">
+          Users
+        </Link>
+        <Link href="/app/invoices" prefetch="hover" activeClass="nav-active">
+          Invoices
+        </Link>
+        <Link href="/app/settings" prefetch="hover" activeClass="nav-active">
+          Settings
+        </Link>
+
+        <div class="app-sidebar-footer">
+          {() => {
+            const s = session()
+            return s ? <div>{s.email}</div> : <div>Loading…</div>
+          }}
+          <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
+            <a href="/api/signout">Sign out</a>
+            <ThemeToggle />
+          </div>
+        </div>
+      </aside>
+
+      <main class="app-content">
+        <RouterView />
+      </main>
+    </div>
+  )
+}
+
+function readSessionCookie(): string | undefined {
+  if (typeof document === "undefined") return undefined
+  const m = /(?:^|;\s*)sid=([^;]+)/.exec(document.cookie)
+  return m?.[1]
+}

package/templates/dashboard/src/routes/app/dashboard.tsx

@@ -0,0 +1,92 @@
+import { computed, signal } from "@pyreon/reactivity"
+import { onMount } from "@pyreon/core"
+import { useHead } from "@pyreon/head"
+import { type Invoice, invoiceTotal, listInvoices, listUsers, type User } from "../../lib/db"
+
+export const meta = { title: "Overview" }
+
+export default function Dashboard() {
+  useHead({ title: meta.title })
+
+  const users = signal<User[]>([])
+  const invoices = signal<Invoice[]>([])
+
+  onMount(() => {
+    void Promise.all([listUsers(), listInvoices()]).then(([u, i]) => {
+      users.set(u)
+      invoices.set(i)
+    })
+  })
+
+  const revenue = computed(() =>
+    invoices()
+      .filter((i) => i.status === "paid")
+      .reduce((sum, i) => sum + invoiceTotal(i), 0),
+  )
+  const outstanding = computed(() =>
+    invoices()
+      .filter((i) => i.status === "pending")
+      .reduce((sum, i) => sum + invoiceTotal(i), 0),
+  )
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Overview</h1>
+      </div>
+
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="label">Users</div>
+          <div class="value">{() => users().length}</div>
+          <div class="delta">+2 this month</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Invoices</div>
+          <div class="value">{() => invoices().length}</div>
+          <div class="delta">{() => invoices().filter((i) => i.status === "paid").length} paid</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Revenue</div>
+          <div class="value">{() => `$${revenue().toLocaleString()}`}</div>
+          <div class="delta">YTD</div>
+        </div>
+        <div class="stat-card">
+          <div class="label">Outstanding</div>
+          <div class="value">{() => `$${outstanding().toLocaleString()}`}</div>
+          <div class="delta" style="color: var(--c-warning);">
+            {() => invoices().filter((i) => i.status === "pending").length} pending
+          </div>
+        </div>
+      </div>
+
+      <h2 style="font-size: 1.125rem; margin-bottom: 0.75rem;">Recent invoices</h2>
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Number</th>
+            <th>Customer</th>
+            <th>Total</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {() =>
+            invoices()
+              .slice(0, 5)
+              .map((inv) => (
+                <tr>
+                  <td>{inv.number}</td>
+                  <td>{inv.customer.name}</td>
+                  <td>${invoiceTotal(inv).toLocaleString()}</td>
+                  <td>
+                    <span class={`pill ${inv.status}`}>{inv.status}</span>
+                  </td>
+                </tr>
+              ))
+          }
+        </tbody>
+      </table>
+    </>
+  )
+}

package/templates/dashboard/src/routes/app/invoices/[id].tsx

@@ -0,0 +1,197 @@
+import { signal } from "@pyreon/reactivity"
+import { onMount } from "@pyreon/core"
+import { useHead } from "@pyreon/head"
+import { useRoute } from "@pyreon/router"
+import { Link } from "@pyreon/zero/link"
+import {
+  DocDocument,
+  DocPage,
+  DocSection,
+  DocHeading,
+  DocText,
+  DocTable,
+  DocSpacer,
+  DocDivider,
+  extractDocNode,
+} from "@pyreon/document-primitives"
+import { render } from "@pyreon/document"
+import { type Invoice, invoiceById, invoiceTotal } from "../../../lib/db"
+
+export const meta = { title: "Invoice" }
+
+/**
+ * The headline demo of `@pyreon/document-primitives`: this template renders
+ * directly in the browser preview AND exports to PDF/email/etc. without
+ * being re-authored. `extractDocNode(template)` walks the JSX and produces
+ * a renderer-agnostic `DocNode`; `@pyreon/document`'s `render()` then
+ * formats it for whatever output the user clicks.
+ */
+function InvoiceTemplate(inv: Invoice) {
+  return () => (
+    <DocDocument
+      title={`Invoice ${inv.number}`}
+      author="Your Company"
+      subject={`Invoice for ${inv.customer.name}`}
+    >
+      <DocPage>
+        <DocSection>
+          <DocHeading level="h1">Invoice {inv.number}</DocHeading>
+          <DocText>Issued {inv.issuedAt.toLocaleDateString()}</DocText>
+        </DocSection>
+
+        <DocSpacer />
+
+        <DocSection>
+          <DocHeading level="h3">Bill to</DocHeading>
+          <DocText>{inv.customer.name}</DocText>
+          <DocText>{inv.customer.email}</DocText>
+          <DocText>{inv.customer.address}</DocText>
+        </DocSection>
+
+        <DocDivider />
+
+        <DocTable
+          rows={[
+            ["Description", "Qty", "Unit price", "Line total"],
+            ...inv.items.map((it) => [
+              it.description,
+              String(it.qty),
+              `$${it.unitPrice.toLocaleString()}`,
+              `$${(it.qty * it.unitPrice).toLocaleString()}`,
+            ]),
+          ]}
+        />
+
+        <DocSpacer />
+
+        <DocSection>
+          <DocHeading level="h3">Total: ${invoiceTotal(inv).toLocaleString()}</DocHeading>
+        </DocSection>
+      </DocPage>
+    </DocDocument>
+  )
+}
+
+export default function InvoiceDetail() {
+  const route = useRoute()
+  const inv = signal<Invoice | null>(null)
+  const notFound = signal(false)
+
+  onMount(() => {
+    const id = route().params.id
+    void invoiceById(id).then((found) => {
+      if (!found) notFound.set(true)
+      else inv.set(found)
+    })
+  })
+
+  useHead({ title: meta.title })
+
+  async function exportPdf() {
+    const found = inv()
+    if (!found) return
+    const node = extractDocNode(InvoiceTemplate(found))
+    const result = await render(node, "pdf")
+    if (typeof window === "undefined") return
+    const blob = result instanceof Blob ? result : new Blob([result as BlobPart], { type: "application/pdf" })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `${found.number}.pdf`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  function sendEmail() {
+    // Real impl: POST the rendered email HTML to /api/email and let
+    // the email scaffold (lib/email.ts + emails/welcome.tsx) handle the
+    // SMTP transport via Resend. The point of the demo is that the SAME
+    // `InvoiceTemplate` renders both the PDF above and the email body —
+    // no re-authoring per channel.
+    alert(
+      "Email send is wired up via Resend (lib/email.ts). The same template renders to email HTML — try the PDF export above to see the document-primitives output.",
+    )
+  }
+
+  return () => {
+    if (notFound()) {
+      return (
+        <>
+          <h1>Invoice not found</h1>
+          <p>
+            <Link href="/app/invoices">← Back to invoices</Link>
+          </p>
+        </>
+      )
+    }
+
+    const found = inv()
+    if (!found) {
+      return (
+        <>
+          <div class="app-page-header">
+            <h1>Loading…</h1>
+          </div>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <div class="app-page-header">
+          <h1>{found.number}</h1>
+          <span class={`pill ${found.status}`}>{found.status}</span>
+        </div>
+
+        <div class="invoice-detail">
+          <div class="invoice-preview">
+            <h2>Invoice {found.number}</h2>
+            <p>Issued {found.issuedAt.toLocaleDateString()}</p>
+            <p style="margin-top: 1.5rem;">
+              <strong>Bill to</strong>
+            </p>
+            <p>{found.customer.name}</p>
+            <p>{found.customer.email}</p>
+            <p>{found.customer.address}</p>
+            <table>
+              <thead>
+                <tr>
+                  <th>Description</th>
+                  <th>Qty</th>
+                  <th>Unit price</th>
+                  <th>Line total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {found.items.map((it) => (
+                  <tr>
+                    <td>{it.description}</td>
+                    <td>{it.qty}</td>
+                    <td>${it.unitPrice.toLocaleString()}</td>
+                    <td>${(it.qty * it.unitPrice).toLocaleString()}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <div class="total">Total: ${invoiceTotal(found).toLocaleString()}</div>
+          </div>
+
+          <aside class="invoice-actions">
+            <strong>Actions</strong>
+            <button class="btn btn-primary" onClick={exportPdf}>
+              Export to PDF
+            </button>
+            <button class="btn btn-secondary" onClick={sendEmail}>
+              Send by email
+            </button>
+            <p style="font-size: 0.8125rem; color: var(--c-text-muted); margin-top: 1rem;">
+              The preview above and the PDF export are rendered from the SAME{" "}
+              <code>InvoiceTemplate</code> component tree. That's what{" "}
+              <code>@pyreon/document-primitives</code> buys you.
+            </p>
+          </aside>
+        </div>
+      </>
+    )
+  }
+}

package/templates/dashboard/src/routes/app/invoices/index.tsx

@@ -0,0 +1,61 @@
+import { signal } from "@pyreon/reactivity"
+import { onMount } from "@pyreon/core"
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { type Invoice, invoiceTotal, listInvoices } from "../../../lib/db"
+
+export const meta = { title: "Invoices" }
+
+export default function Invoices() {
+  useHead({ title: meta.title })
+
+  const invoices = signal<Invoice[]>([])
+
+  onMount(() => {
+    void listInvoices().then((i) => invoices.set(i))
+  })
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Invoices</h1>
+        <button class="btn btn-primary">New invoice</button>
+      </div>
+
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Number</th>
+            <th>Customer</th>
+            <th>Total</th>
+            <th>Status</th>
+            <th>Issued</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {() =>
+            invoices().map((inv) => (
+              <tr>
+                <td>
+                  <Link href={`/app/invoices/${inv.id}`}>{inv.number}</Link>
+                </td>
+                <td>{inv.customer.name}</td>
+                <td>${invoiceTotal(inv).toLocaleString()}</td>
+                <td>
+                  <span class={`pill ${inv.status}`}>{inv.status}</span>
+                </td>
+                <td>{inv.issuedAt.toLocaleDateString()}</td>
+                <td>
+                  <Link href={`/app/invoices/${inv.id}`} class="btn btn-secondary">
+                    Open →
+                  </Link>
+                </td>
+              </tr>
+            ))
+          }
+        </tbody>
+      </table>
+    </>
+  )
+}

package/templates/dashboard/src/routes/app/settings/account.tsx

@@ -0,0 +1,31 @@
+import { useHead } from "@pyreon/head"
+
+export const meta = { title: "Account settings" }
+
+export default function AccountSettings() {
+  useHead({ title: meta.title })
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Account</h1>
+      </div>
+
+      <form style="max-width: 480px; display: grid; gap: 1rem;">
+        <div class="field">
+          <label for="name">Name</label>
+          <input id="name" type="text" placeholder="Your name" />
+        </div>
+        <div class="field">
+          <label for="email">Email</label>
+          <input id="email" type="email" placeholder="you@example.com" />
+        </div>
+        <div>
+          <button type="submit" class="btn btn-primary">
+            Save changes
+          </button>
+        </div>
+      </form>
+    </>
+  )
+}

package/templates/dashboard/src/routes/app/settings/billing.tsx

@@ -0,0 +1,28 @@
+import { useHead } from "@pyreon/head"
+
+export const meta = { title: "Billing" }
+
+export default function Billing() {
+  useHead({ title: meta.title })
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Billing</h1>
+      </div>
+
+      <div class="stat-card" style="max-width: 480px;">
+        <div class="label">Plan</div>
+        <div class="value" style="font-size: 1.125rem; margin-bottom: 1rem;">
+          Free trial
+        </div>
+        <button class="btn btn-primary">Upgrade to Pro</button>
+        <p style="margin-top: 1rem; font-size: 0.8125rem; color: var(--c-text-muted);">
+          Wire Stripe Checkout into <code>/api/billing/checkout</code> in a follow-up. The
+          dashboard template ships the UI shell — payment integration is intentionally left
+          to the user since pricing models vary widely.
+        </p>
+      </div>
+    </>
+  )
+}

package/templates/dashboard/src/routes/app/settings/index.tsx

@@ -0,0 +1,29 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+
+export const meta = { title: "Settings" }
+
+export default function Settings() {
+  useHead({ title: meta.title })
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Settings</h1>
+      </div>
+
+      <ul style="list-style: none; display: grid; gap: 1rem; padding: 0;">
+        <li>
+          <Link href="/app/settings/account" class="btn btn-secondary" style="width: 100%; justify-content: space-between;">
+            Account <span>→</span>
+          </Link>
+        </li>
+        <li>
+          <Link href="/app/settings/billing" class="btn btn-secondary" style="width: 100%; justify-content: space-between;">
+            Billing <span>→</span>
+          </Link>
+        </li>
+      </ul>
+    </>
+  )
+}

package/templates/dashboard/src/routes/app/users.tsx

@@ -0,0 +1,50 @@
+import { signal } from "@pyreon/reactivity"
+import { onMount } from "@pyreon/core"
+import { useHead } from "@pyreon/head"
+import { listUsers, type User } from "../../lib/db"
+
+export const meta = { title: "Users" }
+
+export default function Users() {
+  useHead({ title: meta.title })
+
+  const users = signal<User[]>([])
+
+  onMount(() => {
+    void listUsers().then((u) => users.set(u))
+  })
+
+  return (
+    <>
+      <div class="app-page-header">
+        <h1>Users</h1>
+        <button class="btn btn-primary">Invite user</button>
+      </div>
+
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Created</th>
+          </tr>
+        </thead>
+        <tbody>
+          {() =>
+            users().map((u) => (
+              <tr>
+                <td>{u.name}</td>
+                <td>{u.email}</td>
+                <td>
+                  <span class="pill">{u.role}</span>
+                </td>
+                <td>{u.createdAt.toLocaleDateString()}</td>
+              </tr>
+            ))
+          }
+        </tbody>
+      </table>
+    </>
+  )
+}

package/templates/dashboard/src/routes/index.tsx

@@ -0,0 +1,40 @@
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { MarketingHeader } from "./_layout"
+
+export const meta = {
+  title: "Dashboard — your SaaS in a box",
+  description: "A SaaS-shape Pyreon Zero starter. Auth, invoices, users, settings — out of the box.",
+}
+
+export default function Home() {
+  useHead({
+    title: meta.title,
+    meta: [{ name: "description", content: meta.description }],
+  })
+
+  return (
+    <>
+      <MarketingHeader />
+
+      <section class="hero">
+        <h1>Your SaaS in a box.</h1>
+        <p>
+          A Pyreon Zero starter with auth, table views, settings, and an invoice export
+          pipeline that renders the same component tree to PDF and email.
+        </p>
+        <div class="hero-actions">
+          <Link href="/signup" class="btn btn-primary">
+            Create an account
+          </Link>
+          <Link href="/login" class="btn btn-secondary">
+            Sign in
+          </Link>
+        </div>
+        <p style="margin-top: 1.5rem; font-size: 0.875rem; color: var(--c-text-muted);">
+          Demo login: <code>demo@example.com</code> / <code>demo1234</code>
+        </p>
+      </section>
+    </>
+  )
+}

package/templates/dashboard/src/routes/login.tsx

@@ -0,0 +1,79 @@
+import { signal } from "@pyreon/reactivity"
+import { useHead } from "@pyreon/head"
+import { Link } from "@pyreon/zero/link"
+import { useRouter } from "@pyreon/router"
+import { signIn } from "../lib/auth"
+
+export const meta = { title: "Sign in" }
+
+export default function Login() {
+  useHead({ title: meta.title })
+
+  const email = signal("demo@example.com")
+  const password = signal("demo1234")
+  const error = signal<string | null>(null)
+  const submitting = signal(false)
+
+  const router = useRouter()
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault()
+    error.set(null)
+    submitting.set(true)
+
+    const result = signIn(email(), password())
+    submitting.set(false)
+
+    if ("error" in result) {
+      error.set(result.error)
+      return
+    }
+
+    // Persist the stub session id client-side. Real impl uses an HttpOnly cookie
+    // set by the auth handler. See @pyreon/auth-lucia for the production path.
+    if (typeof document !== "undefined") {
+      document.cookie = `sid=${result.sessionId}; path=/; max-age=${7 * 24 * 60 * 60}`
+    }
+    await router.push("/app/dashboard")
+  }
+
+  return (
+    <div class="auth-shell">
+      <form class="auth-card" onSubmit={handleSubmit}>
+        <h1>Sign in</h1>
+
+        <div class="field">
+          <label for="email">Email</label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onInput={(e) => email.set((e.currentTarget as HTMLInputElement).value)}
+            required
+          />
+        </div>
+
+        <div class="field">
+          <label for="password">Password</label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onInput={(e) => password.set((e.currentTarget as HTMLInputElement).value)}
+            required
+          />
+        </div>
+
+        {() => (error() ? <div class="error">{error()}</div> : null)}
+
+        <button type="submit" class="btn btn-primary" disabled={submitting} style="width: 100%; justify-content: center; margin-top: 1rem;">
+          {() => (submitting() ? "Signing in…" : "Sign in")}
+        </button>
+
+        <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--c-text-muted); text-align: center;">
+          No account? <Link href="/signup">Create one</Link>
+        </p>
+      </form>
+    </div>
+  )
+}