@pylonsync/create-pylon 0.3.275 → 0.3.277

package/templates/agency/lib/agency.ts

@@ -1,5 +1,7 @@
-// Shared agency types. The Inquiry row is what the owner dashboard sees (with
-// PII); the client imports only the type, never server code.
+// Shared agency types. The Inquiry / Client / Invoice rows are what the owner
+// dashboard sees (with PII + money); the client imports only the types, never
+// server code. Project is public, so it's read on both the marketing site and
+// the dashboard.
 
 export interface InquiryRow {
   id: string;
@@ -15,7 +17,9 @@ export interface InquiryRow {
 
 // inquiriesForOwner returns a discriminated result rather than throwing on a
 // non-owner (a query has no `ctx.error`; a bare throw becomes a stripped
-// HANDLER_ERROR). A non-owner gets `{ authorized: false }` and NO data.
+// HANDLER_ERROR). A non-owner gets `{ authorized: false }` and NO data. The
+// other owner-gated queries (clientsForOwner / invoicesForOwner) follow the
+// same shape — see OwnerResult below.
 export type OwnerInquiriesResult =
   | { authorized: true; inquiries: InquiryRow[] }
   | { authorized: false };
@@ -25,3 +29,161 @@ export interface CapacityData {
   label: string; // booking window, e.g. "Q3 2026"
   openSlots: number;
 }
+
+// A portfolio piece + case study. Public — read on the marketing site AND in
+// the dashboard. `selected` features it on the homepage; `published` toggles
+// whether the public site shows it (drafts stay owner-only).
+export interface ProjectRow {
+  id: string;
+  title: string;
+  slug: string;
+  client: string;
+  summary: string;
+  year?: string | null;
+  tags?: string | null; // comma-separated
+  selected: boolean;
+  published: boolean;
+  order: number;
+  challenge?: string | null;
+  approach?: string | null;
+  outcome?: string | null;
+  liveUrl?: string | null;
+  createdAt: string;
+}
+
+// A CRM contact (owner-only — PII).
+export interface ClientRow {
+  id: string;
+  name: string;
+  company?: string | null;
+  email?: string | null;
+  phone?: string | null;
+  status: string; // "prospect" | "active" | "past"
+  notes?: string | null;
+  createdAt: string;
+}
+
+// One line on an invoice. `unitCents` is the per-unit price in integer cents;
+// the line total is `quantity * unitCents`.
+export interface InvoiceLineItem {
+  description: string;
+  quantity: number;
+  unitCents: number;
+}
+
+// A bill tied to a client, + optional project (owner-only — money + PII).
+// `amountCents` is the integer-cents total; `lineItems` is the JSON-encoded
+// breakdown (parse with `parseLineItems`).
+export interface InvoiceRow {
+  id: string;
+  number: string;
+  clientId: string;
+  clientName: string;
+  projectId?: string | null;
+  projectTitle?: string | null;
+  lineItems?: string | null; // JSON array of InvoiceLineItem
+  amountCents: number;
+  status: string; // "draft" | "sent" | "paid" | "overdue"
+  issuedAt?: string | null;
+  dueAt?: string | null;
+  notes?: string | null;
+  createdAt: string;
+}
+
+// Owner-gated queries that carry private rows use the same discriminated shape
+// as inquiries: `{ authorized: false }` for a non-owner, otherwise the data.
+export type OwnerClientsResult =
+  | { authorized: true; clients: ClientRow[] }
+  | { authorized: false };
+
+export type OwnerInvoicesResult =
+  | { authorized: true; invoices: InvoiceRow[] }
+  | { authorized: false };
+
+/* ------------------------------ helpers ------------------------------ */
+
+// Split a comma-separated tag string into trimmed, non-empty tags.
+export function parseTags(tags?: string | null): string[] {
+  return (tags ?? "")
+    .split(",")
+    .map((t) => t.trim())
+    .filter(Boolean);
+}
+
+// Format integer cents as a currency string ("$1,500.00"). Whole-dollar amounts
+// drop the cents ("$1,500").
+export function money(cents: number): string {
+  const dollars = (cents || 0) / 100;
+  const whole = Number.isInteger(dollars);
+  return dollars.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: whole ? 0 : 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+// Parse the JSON line-item blob off an invoice into a clean, typed array.
+// Tolerant: bad JSON or missing fields yield an empty list / zeroed fields
+// rather than throwing, so a malformed row never crashes the dashboard or PDF.
+export function parseLineItems(raw?: string | null): InvoiceLineItem[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.map((it) => ({
+      description: String(it?.description ?? ""),
+      quantity: Number(it?.quantity) || 0,
+      unitCents: Math.trunc(Number(it?.unitCents) || 0),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+// Total of a line-item list, in integer cents.
+export function lineItemsTotal(items: InvoiceLineItem[]): number {
+  return items.reduce((sum, it) => sum + Math.round(it.quantity * it.unitCents), 0);
+}
+
+// Slugify a project title for its /work/[slug] URL.
+export function slugify(s: string): string {
+  return s
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+}
+
+// A normalized project shape the public pages render — tags already split, the
+// storage flags (selected/published/order) dropped. Built from a DB row
+// (`viewFromRow`) or, before the portfolio is seeded, from a config case study,
+// so the marketing pages render identically either way.
+export interface ProjectView {
+  slug: string;
+  title: string;
+  client: string;
+  summary: string;
+  year?: string | null;
+  tags: string[];
+  challenge?: string | null;
+  approach?: string | null;
+  outcome?: string | null;
+  liveUrl?: string | null;
+}
+
+export function viewFromRow(r: ProjectRow): ProjectView {
+  return {
+    slug: r.slug,
+    title: r.title,
+    client: r.client,
+    summary: r.summary,
+    year: r.year,
+    tags: parseTags(r.tags),
+    challenge: r.challenge,
+    approach: r.approach,
+    outcome: r.outcome,
+    liveUrl: r.liveUrl,
+  };
+}

package/templates/agency/lib/invoice-pdf.tsx

@@ -0,0 +1,174 @@
+import React from "react";
+import { Document, Page, View, Text, StyleSheet, pdf } from "@react-pdf/renderer";
+import { money, type InvoiceLineItem } from "./agency";
+
+// Invoice → PDF, with @react-pdf/renderer (the React-to-PDF renderer — note
+// `react-pdf` proper is a *viewer* for existing PDFs; this is the generator).
+//
+// This module is imported DYNAMICALLY from the dashboard's "Download PDF" click
+// handler (`await import("@/lib/invoice-pdf")`), never during render — so the
+// ~1MB renderer + this document never touch SSR or the initial client bundle;
+// it loads only when the owner actually exports a bill. The PDF mirrors the
+// on-screen invoice view so what you see is what you download.
+
+export interface InvoicePdfData {
+  number: string;
+  status: string;
+  issuedAt?: string | null;
+  dueAt?: string | null;
+  notes?: string | null;
+  projectTitle?: string | null;
+  items: InvoiceLineItem[];
+  amountCents: number;
+  billTo: { name: string; company?: string | null; email?: string | null };
+  studio: {
+    name: string;
+    addressLines: string[];
+    paymentTerms: string;
+    footerNote: string;
+    brandColor: string;
+  };
+}
+
+// Build (and return) the invoice PDF as a Blob the caller can download.
+export async function buildInvoiceBlob(data: InvoicePdfData): Promise<Blob> {
+  return await pdf(<InvoiceDocument data={data} />).toBlob();
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  draft: "#71717a",
+  sent: "#2563eb",
+  paid: "#16a34a",
+  overdue: "#dc2626",
+};
+
+function InvoiceDocument({ data }: { data: InvoicePdfData }) {
+  const { studio, billTo } = data;
+  const s = makeStyles(studio.brandColor);
+  // A bill with no explicit line items still prints one line for its total.
+  const items =
+    data.items.length > 0
+      ? data.items
+      : [{ description: "Services", quantity: 1, unitCents: data.amountCents }];
+
+  return (
+    <Document title={`Invoice ${data.number}`} author={studio.name}>
+      <Page size="A4" style={s.page}>
+        {/* Header */}
+        <View style={s.header}>
+          <View>
+            <Text style={s.studioName}>{studio.name}</Text>
+            {studio.addressLines.map((l, i) => (
+              <Text key={i} style={s.muted}>
+                {l}
+              </Text>
+            ))}
+          </View>
+          <View style={s.headerRight}>
+            <Text style={s.invoiceLabel}>INVOICE</Text>
+            <Text style={s.invoiceNumber}>{data.number}</Text>
+            <Text style={[s.status, { color: STATUS_COLOR[data.status] ?? "#71717a" }]}>
+              {data.status.toUpperCase()}
+            </Text>
+          </View>
+        </View>
+
+        <View style={s.rule} />
+
+        {/* Bill-to + meta */}
+        <View style={s.cols}>
+          <View style={s.col}>
+            <Text style={s.sectionLabel}>BILL TO</Text>
+            <Text style={s.strong}>{billTo.name}</Text>
+            {billTo.company ? <Text style={s.muted}>{billTo.company}</Text> : null}
+            {billTo.email ? <Text style={s.muted}>{billTo.email}</Text> : null}
+          </View>
+          <View style={s.colRight}>
+            {data.projectTitle ? <Meta s={s} label="Project" value={data.projectTitle} /> : null}
+            {data.issuedAt ? <Meta s={s} label="Issued" value={data.issuedAt} /> : null}
+            {data.dueAt ? <Meta s={s} label="Due" value={data.dueAt} /> : null}
+            <Meta s={s} label="Terms" value={studio.paymentTerms} />
+          </View>
+        </View>
+
+        {/* Line items */}
+        <View style={s.table}>
+          <View style={s.tableHead}>
+            <Text style={[s.cell, s.cDesc, s.headCell]}>Description</Text>
+            <Text style={[s.cell, s.cQty, s.headCell]}>Qty</Text>
+            <Text style={[s.cell, s.cUnit, s.headCell]}>Unit</Text>
+            <Text style={[s.cell, s.cAmt, s.headCell]}>Amount</Text>
+          </View>
+          {items.map((it, i) => (
+            <View key={i} style={s.tableRow}>
+              <Text style={[s.cell, s.cDesc]}>{it.description}</Text>
+              <Text style={[s.cell, s.cQty]}>{it.quantity}</Text>
+              <Text style={[s.cell, s.cUnit]}>{money(it.unitCents)}</Text>
+              <Text style={[s.cell, s.cAmt]}>{money(Math.round(it.quantity * it.unitCents))}</Text>
+            </View>
+          ))}
+          <View style={s.totalRow}>
+            <Text style={s.totalLabel}>Total due</Text>
+            <Text style={s.totalValue}>{money(data.amountCents)}</Text>
+          </View>
+        </View>
+
+        {data.notes ? (
+          <View style={s.notes}>
+            <Text style={s.sectionLabel}>NOTES</Text>
+            <Text style={s.muted}>{data.notes}</Text>
+          </View>
+        ) : null}
+
+        <Text style={s.footer} fixed>
+          {studio.footerNote}
+        </Text>
+      </Page>
+    </Document>
+  );
+}
+
+function Meta({ s, label, value }: { s: ReturnType<typeof makeStyles>; label: string; value: string }) {
+  return (
+    <View style={s.metaRow}>
+      <Text style={s.metaLabel}>{label}</Text>
+      <Text style={s.metaValue}>{value}</Text>
+    </View>
+  );
+}
+
+function makeStyles(brand: string) {
+  return StyleSheet.create({
+    page: { padding: 48, fontSize: 10, color: "#27272a", fontFamily: "Helvetica", lineHeight: 1.4 },
+    header: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start" },
+    studioName: { fontSize: 18, fontFamily: "Helvetica-Bold", color: "#18181b", marginBottom: 4 },
+    headerRight: { alignItems: "flex-end" },
+    invoiceLabel: { fontSize: 11, letterSpacing: 2, color: brand, fontFamily: "Helvetica-Bold" },
+    invoiceNumber: { fontSize: 13, marginTop: 2, fontFamily: "Helvetica-Bold", color: "#18181b" },
+    status: { fontSize: 9, marginTop: 4, fontFamily: "Helvetica-Bold", letterSpacing: 1 },
+    muted: { color: "#71717a" },
+    rule: { borderBottomWidth: 1, borderBottomColor: "#e4e4e7", marginVertical: 18 },
+    cols: { flexDirection: "row", justifyContent: "space-between", marginBottom: 24 },
+    col: { width: "55%" },
+    colRight: { width: "40%" },
+    sectionLabel: { fontSize: 8, letterSpacing: 1.5, color: "#a1a1aa", fontFamily: "Helvetica-Bold", marginBottom: 5 },
+    strong: { fontFamily: "Helvetica-Bold", color: "#18181b", fontSize: 11 },
+    metaRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 3 },
+    metaLabel: { color: "#a1a1aa" },
+    metaValue: { color: "#27272a", fontFamily: "Helvetica-Bold" },
+    table: { marginTop: 4 },
+    tableHead: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#27272a", paddingBottom: 6 },
+    headCell: { fontFamily: "Helvetica-Bold", color: "#18181b", fontSize: 9, letterSpacing: 0.5 },
+    tableRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#f4f4f5", paddingVertical: 8 },
+    cell: { fontSize: 10 },
+    cDesc: { width: "52%", paddingRight: 8 },
+    cQty: { width: "12%", textAlign: "right" },
+    cUnit: { width: "18%", textAlign: "right" },
+    cAmt: { width: "18%", textAlign: "right" },
+    totalRow: { flexDirection: "row", justifyContent: "flex-end", marginTop: 12, paddingTop: 4 },
+    totalLabel: { fontSize: 11, fontFamily: "Helvetica-Bold", color: "#18181b", marginRight: 16 },
+    totalValue: { fontSize: 14, fontFamily: "Helvetica-Bold", color: brand, minWidth: 90, textAlign: "right" },
+    notes: { marginTop: 28 },
+    footer: { position: "absolute", bottom: 36, left: 48, right: 48, fontSize: 9, color: "#a1a1aa", textAlign: "center" },
+  });
+}

package/templates/agency/lib/site.config.ts

@@ -28,11 +28,61 @@ export type BaseConfig = {
 };
 
 export type Service = { title: string; body: string; icon?: string };
-export type CaseStudy = { title: string; client: string; summary: string; tags: string[] };
+
+// A portfolio piece + case study. `seedProjects` writes these into the public
+// Project entity on first visit; after that the owner curates them from the
+// dashboard. `selected` features it on the homepage; the challenge/approach/
+// outcome render on the /work/[slug] case-study page. `slug` is the URL segment
+// (auto-derived from the title if omitted).
+export type CaseStudy = {
+  title: string;
+  slug?: string;
+  client: string; // display label, e.g. "Fintech · 0→1"
+  summary: string;
+  year?: string;
+  tags: string[];
+  selected?: boolean; // featured on the homepage "Selected work" grid
+  challenge?: string;
+  approach?: string;
+  outcome?: string;
+  liveUrl?: string;
+};
+
 export type ProcessStep = { title: string; body: string };
 export type TeamMember = { name: string; role: string };
 export type Testimonial = { quote: string; name: string; role: string };
 
+// Demo back-office rows. `seedStudioBackoffice` (owner-gated) writes these into
+// the private Client + Invoice entities on the owner's first dashboard visit, so
+// the dashboard isn't an empty shell. `invoices[].client` matches a `clients[]`
+// name; `invoices[].projectSlug` (optional) ties a bill to a case study.
+export type ClientSeed = {
+  name: string;
+  company?: string;
+  email?: string;
+  phone?: string;
+  status?: "prospect" | "active" | "past";
+  notes?: string;
+};
+export type InvoiceSeed = {
+  number: string;
+  client: string; // matches a clients[].name
+  projectSlug?: string; // matches a work.items[].slug
+  // Line items drive the total — `amountCents` is computed from them on seed.
+  lineItems: { description: string; quantity: number; unitCents: number }[];
+  status?: "draft" | "sent" | "paid" | "overdue";
+  issuedAt?: string; // "2026-04-01"
+  dueAt?: string;
+};
+
+// The studio's billing identity — the "from" block + terms on every invoice and
+// its PDF. Edit these to make the invoices yours.
+export type Billing = {
+  addressLines: string[]; // shown under the studio name on the invoice
+  paymentTerms: string; // e.g. "Net 30"
+  footerNote: string; // a thank-you / payment note in the invoice footer
+};
+
 export type AgencyConfig = BaseConfig & {
   hero: {
     tagline: string;
@@ -48,6 +98,10 @@ export type AgencyConfig = BaseConfig & {
   logos: { eyebrow: string; names: string[] };
   services: { eyebrow: string; headline: string; items: Service[] };
   work: { eyebrow: string; headline: string; items: CaseStudy[] };
+  // The studio's invoice "from" identity + terms.
+  billing: Billing;
+  // Demo CRM + billing rows seeded into the owner dashboard on first visit.
+  backoffice: { clients: ClientSeed[]; invoices: InvoiceSeed[] };
   process: { eyebrow: string; headline: string; steps: ProcessStep[] };
   team: { eyebrow: string; headline: string; members: TeamMember[] };
   testimonials?: { eyebrow: string; headline: string; items: Testimonial[] };
@@ -143,31 +197,156 @@ export const siteConfig: AgencyConfig = {
     items: [
       {
         title: "Ledger",
+        slug: "ledger",
         client: "Fintech · 0→1",
+        year: "2026",
         summary: "A consumer banking app from first sketch to App Store launch in one quarter.",
         tags: ["Product design", "iOS", "Brand"],
+        selected: true,
+        challenge:
+          "A two-founder fintech had funding and a thesis, but no product, no brand, and a hard 12-week runway to a launchable app the App Store would approve.",
+        approach:
+          "We ran a one-week scope sprint, then designed and built in parallel — a clickable prototype on real data by week three, weekly TestFlight builds after that. Brand and UI moved together so nothing felt bolted on.",
+        outcome:
+          "Shipped to the App Store in the 11th week with a 4.8★ launch rating. The founders closed their seed round two weeks later using the live app as the demo.",
+        liveUrl: "https://example.com",
       },
       {
         title: "Atlas Health",
+        slug: "atlas-health",
         client: "Healthcare · Platform",
+        year: "2025",
         summary: "Rebuilt a clinical scheduling tool used by 4,000 providers, with zero downtime.",
         tags: ["Web", "Design system"],
+        selected: true,
+        challenge:
+          "A scheduling platform 4,000 clinicians depended on daily had become impossible to change — every release risked an outage no hospital could tolerate.",
+        approach:
+          "We introduced a typed design system and migrated screen by screen behind feature flags, shipping to a few clinics at a time and watching the metrics before widening the rollout.",
+        outcome:
+          "Replaced the entire front end over a quarter with zero scheduled downtime, and cut the time to ship a new screen from two weeks to two days.",
       },
       {
         title: "Cohort",
+        slug: "cohort",
         client: "B2B SaaS · Rebrand",
+        year: "2025",
         summary: "New identity and marketing site that lifted demo requests 40% in six weeks.",
         tags: ["Brand", "Web"],
+        selected: true,
+        challenge:
+          "A profitable B2B SaaS had outgrown the brand it launched with — the site read like a side project and was quietly losing enterprise deals at the first click.",
+        approach:
+          "A focused rebrand: new name treatment, a confident visual system, and a marketing site rebuilt around the two proof points buyers actually asked about.",
+        outcome:
+          "Demo requests rose 40% in the first six weeks, and the sales team stopped apologizing for the website on calls.",
       },
       {
         title: "Vela",
+        slug: "vela",
         client: "Logistics · Mobile",
+        year: "2024",
         summary: "A driver app with live routing that cut dispatch calls in half.",
         tags: ["Product design", "Android"],
+        selected: false,
+        challenge:
+          "Dispatchers spent their day on the phone because drivers had no live view of their own routes — every change meant a call.",
+        approach:
+          "We designed an offline-first driver app with live routing and a single, glanceable 'what's next' screen, built for one-handed use in a moving vehicle.",
+        outcome:
+          "Dispatch calls dropped by half within a month, and on-time delivery climbed eight points.",
       },
     ],
   },
 
+  backoffice: {
+    clients: [
+      {
+        name: "Erin Caldwell",
+        company: "Ledger",
+        email: "erin@ledger.example",
+        phone: "+1 (214) 555-0142",
+        status: "active",
+        notes: "Founder. Seed round closed; discussing a phase-2 retainer for Q4.",
+      },
+      {
+        name: "Tom Reyes",
+        company: "Atlas Health",
+        email: "tom@atlashealth.example",
+        status: "active",
+        notes: "VP Product. Rollout complete; on a monthly maintenance retainer.",
+      },
+      {
+        name: "Sofia Marin",
+        company: "Cohort",
+        email: "sofia@cohort.example",
+        status: "past",
+        notes: "Rebrand shipped. Happy to be a reference.",
+      },
+      {
+        name: "Grant Whitaker",
+        company: "Northwind",
+        email: "grant@northwind.example",
+        status: "prospect",
+        notes: "Inbound about a 0→1 mobile app. Sent a proposal; awaiting reply.",
+      },
+    ],
+    invoices: [
+      {
+        number: "INV-001",
+        client: "Erin Caldwell",
+        projectSlug: "ledger",
+        lineItems: [
+          { description: "Product design & iOS build — Ledger (12-week engagement)", quantity: 1, unitCents: 4800000 },
+        ],
+        status: "paid",
+        issuedAt: "2026-01-15",
+        dueAt: "2026-02-14",
+      },
+      {
+        number: "INV-002",
+        client: "Tom Reyes",
+        projectSlug: "atlas-health",
+        lineItems: [
+          { description: "Platform rebuild & design system", quantity: 1, unitCents: 5500000 },
+          { description: "Discovery & scoping sprint", quantity: 1, unitCents: 700000 },
+        ],
+        status: "paid",
+        issuedAt: "2026-03-01",
+        dueAt: "2026-03-31",
+      },
+      {
+        number: "INV-003",
+        client: "Tom Reyes",
+        projectSlug: "atlas-health",
+        lineItems: [
+          { description: "Maintenance retainer — June", quantity: 1, unitCents: 850000 },
+        ],
+        status: "sent",
+        issuedAt: "2026-06-01",
+        dueAt: "2026-07-01",
+      },
+      {
+        number: "INV-004",
+        client: "Sofia Marin",
+        projectSlug: "cohort",
+        lineItems: [
+          { description: "Brand identity & system", quantity: 1, unitCents: 1400000 },
+          { description: "Marketing site design & build", quantity: 1, unitCents: 1000000 },
+        ],
+        status: "overdue",
+        issuedAt: "2026-04-10",
+        dueAt: "2026-05-10",
+      },
+    ],
+  },
+
+  billing: {
+    addressLines: ["Halyard Studio", "Dallas, TX", "hello@halyard.example"],
+    paymentTerms: "Net 30",
+    footerNote: "Thank you. Please reference the invoice number with payment.",
+  },
+
   process: {
     eyebrow: "How we work",
     headline: "Senior, hands-on, and fast.",

package/templates/agency/package.json

@@ -22,7 +22,8 @@
     "clsx": "^2.1.1",
     "tailwind-merge": "^2.5.0",
     "lucide-react": "^0.460.0",
-    "@radix-ui/react-slot": "^1.1.0"
+    "@radix-ui/react-slot": "^1.1.0",
+    "@react-pdf/renderer": "^4.5.1"
   },
   "devDependencies": {
     "@pylonsync/cli": "^__PYLON_VERSION__",