@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/invoices/components/line-items.tsx

@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  lineTotalCents,
+  money,
+  parseAmount,
+  parseQuantity,
+  quantity,
+  type LineItem,
+} from "@/lib/billing";
+
+export interface LineDraft {
+  description: string;
+  quantityMilli: number;
+  unitPriceCents: number;
+}
+
+/**
+ * The billable lines, and the row that adds one.
+ *
+ * Editing is deliberately limited to add and remove: an invoice that has been
+ * sent is a document someone is paying against, and silently mutating a line
+ * after the fact is how the copy in their inbox stops matching yours. Correct a
+ * sent invoice by voiding it and issuing another.
+ */
+export function LineItems({
+  items,
+  editable,
+  onAdd,
+  onRemove,
+}: {
+  items: LineItem[];
+  /** False once the invoice leaves draft. */
+  editable: boolean;
+  onAdd: (draft: LineDraft) => void | Promise<void>;
+  onRemove: (id: string) => void | Promise<void>;
+}) {
+  const [description, setDescription] = useState("");
+  const [qty, setQty] = useState("1");
+  const [price, setPrice] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const parsedQty = parseQuantity(qty);
+  const parsedPrice = parseAmount(price);
+  const canAdd =
+    description.trim().length > 0 &&
+    parsedQty !== null &&
+    parsedQty > 0 &&
+    parsedPrice !== null &&
+    !busy;
+
+  async function add(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canAdd) return;
+    setBusy(true);
+    try {
+      await onAdd({
+        description: description.trim(),
+        quantityMilli: parsedQty as number,
+        unitPriceCents: parsedPrice as number,
+      });
+      setDescription("");
+      setQty("1");
+      setPrice("");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const ordered = [...items].sort(
+    (a, b) =>
+      (Number((a as { position?: number }).position) || 0) -
+      (Number((b as { position?: number }).position) || 0),
+  );
+
+  return (
+    <div className="rounded-lg border border-border bg-card">
+      <table className="w-full border-collapse text-[13px]">
+        <thead>
+          <tr className="hairline">
+            <th scope="col" className="h-8 px-3 text-left text-[11px] font-medium text-muted-foreground">
+              Description
+            </th>
+            <th scope="col" className="h-8 w-20 px-3 text-right text-[11px] font-medium text-muted-foreground">
+              Qty
+            </th>
+            <th scope="col" className="h-8 w-28 px-3 text-right text-[11px] font-medium text-muted-foreground">
+              Unit
+            </th>
+            <th scope="col" className="h-8 w-28 px-3 text-right text-[11px] font-medium text-muted-foreground">
+              Amount
+            </th>
+            {editable ? <th className="w-10" /> : null}
+          </tr>
+        </thead>
+        <tbody>
+          {ordered.length === 0 ? (
+            <tr>
+              <td
+                colSpan={editable ? 5 : 4}
+                className="px-3 py-6 text-center text-[12px] text-muted-foreground"
+              >
+                No lines yet.
+              </td>
+            </tr>
+          ) : (
+            ordered.map((item) => (
+              <tr key={item.id} className="border-b border-border/60 last:border-0">
+                <td className="px-3 py-2">{item.description}</td>
+                <td className="tabular px-3 py-2 text-right text-muted-foreground">
+                  {quantity(item.quantityMilli)}
+                </td>
+                <td className="tabular px-3 py-2 text-right text-muted-foreground">
+                  {money(item.unitPriceCents)}
+                </td>
+                <td className="tabular px-3 py-2 text-right">
+                  {money(lineTotalCents(item))}
+                </td>
+                {editable ? (
+                  <td className="px-2 py-2 text-right">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      aria-label={`Remove ${item.description}`}
+                      onClick={() => onRemove(item.id)}
+                      className="size-7 text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 />
+                    </Button>
+                  </td>
+                ) : null}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+
+      {editable ? (
+        <form onSubmit={add} className="flex items-end gap-2 border-t border-border p-2">
+          <Input
+            aria-label="Description"
+            placeholder="Senior engineering"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            className="h-8 flex-1"
+          />
+          <Input
+            aria-label="Quantity"
+            inputMode="decimal"
+            value={qty}
+            onChange={(event) => setQty(event.target.value)}
+            className="h-8 w-20 text-right"
+          />
+          <Input
+            aria-label="Unit price"
+            inputMode="decimal"
+            placeholder="165.00"
+            value={price}
+            onChange={(event) => setPrice(event.target.value)}
+            className="h-8 w-28 text-right"
+          />
+          <Button type="submit" size="sm" disabled={!canAdd} className="h-8">
+            <Plus />
+            Add
+          </Button>
+        </form>
+      ) : null}
+    </div>
+  );
+}

package/templates/invoices/components/page-header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The bar at the top of every view: title on the left, actions on the right.
+ * Fixed height so switching pages doesn't shift the content below it.
+ */
+export function PageHeader({
+  title,
+  count,
+  children,
+  className,
+}: {
+  title: string;
+  /** Shown beside the title — the number of rows in view. */
+  count?: number;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        "flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-baseline gap-2">
+        <h1 className="truncate text-[13px] font-semibold">{title}</h1>
+        {typeof count === "number" ? (
+          <span className="tabular text-[12px] text-muted-foreground">{count}</span>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-2">{children}</div>
+    </header>
+  );
+}

package/templates/invoices/components/payment-dialog.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
+import { money, parseAmount } from "@/lib/billing";
+
+const METHODS = ["bank", "card", "cash", "other"];
+
+/**
+ * Record a payment against an invoice.
+ *
+ * Defaults to the outstanding balance, because "paid in full" is what happens
+ * most of the time and retyping the figure is how a typo gets in. Over-payment
+ * is rejected here rather than silently producing a negative balance — a credit
+ * is a decision, not a rounding outcome.
+ */
+export function PaymentDialog({
+  open,
+  balanceCents,
+  onOpenChange,
+  onRecord,
+}: {
+  open: boolean;
+  balanceCents: number;
+  onOpenChange: (open: boolean) => void;
+  onRecord: (amountCents: number, method: string, reference: string) => void | Promise<void>;
+}) {
+  const [amount, setAmount] = useState("");
+  const [method, setMethod] = useState("bank");
+  const [reference, setReference] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setAmount((balanceCents / 100).toFixed(2));
+    setMethod("bank");
+    setReference("");
+    setBusy(false);
+  }, [open, balanceCents]);
+
+  const parsed = parseAmount(amount);
+  const tooMuch = parsed !== null && parsed > balanceCents;
+  const canSubmit = parsed !== null && parsed > 0 && !tooMuch && !busy;
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      await onRecord(parsed as number, method, reference.trim());
+      onOpenChange(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Record payment</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={submit} className="grid gap-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="payment-amount">Amount</Label>
+            <Input
+              id="payment-amount"
+              autoFocus
+              inputMode="decimal"
+              value={amount}
+              onChange={(event) => setAmount(event.target.value)}
+            />
+            <p className="text-[11px] text-muted-foreground">
+              Balance due {money(balanceCents)}
+            </p>
+            {tooMuch ? (
+              <p className="text-[11px] text-destructive">
+                More than the balance — record the exact amount received.
+              </p>
+            ) : null}
+            {parsed === null && amount.trim() ? (
+              <p className="text-[11px] text-destructive">That isn't an amount.</p>
+            ) : null}
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="payment-method">Method</Label>
+              <Select
+                id="payment-method"
+                value={method}
+                onChange={(event) => setMethod(event.target.value)}
+              >
+                {METHODS.map((m) => (
+                  <option key={m} value={m}>
+                    {m[0].toUpperCase() + m.slice(1)}
+                  </option>
+                ))}
+              </Select>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="payment-reference">Reference</Label>
+              <Input
+                id="payment-reference"
+                placeholder="Optional"
+                value={reference}
+                onChange={(event) => setReference(event.target.value)}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy ? "Recording…" : "Record payment"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/invoices/components/record-dialog.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select } from "@/components/ui/select";
+
+export interface FieldSpec {
+  name: string;
+  label: string;
+  type?: "text" | "email" | "tel";
+  placeholder?: string;
+  required?: boolean;
+  /** Renders a picker instead of a text input. */
+  options?: Array<{ value: string; label: string }>;
+}
+
+/**
+ * A create dialog driven by a field list — used for companies and contacts,
+ * which differ only in their fields. Deals get their own dialog because value,
+ * stage and close date need real layout rather than a stack of text inputs.
+ */
+export function RecordDialog({
+  open,
+  title,
+  fields,
+  submitLabel,
+  onOpenChange,
+  onCreate,
+}: {
+  open: boolean;
+  title: string;
+  fields: FieldSpec[];
+  submitLabel: string;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (values: Record<string, string>) => void | Promise<void>;
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setValues({});
+    setBusy(false);
+  }, [open]);
+
+  const missing = fields.some(
+    (field) => field.required && !(values[field.name] ?? "").trim(),
+  );
+  const canSubmit = !missing && !busy;
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      const trimmed: Record<string, string> = {};
+      for (const [key, value] of Object.entries(values)) {
+        const clean = value.trim();
+        if (clean) trimmed[key] = clean;
+      }
+      await onCreate(trimmed);
+      onOpenChange(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={submit} className="grid gap-4">
+          {fields.map((field, index) => (
+            <div key={field.name} className="space-y-1.5">
+              <Label htmlFor={`record-${field.name}`}>{field.label}</Label>
+              {field.options ? (
+                <Select
+                  id={`record-${field.name}`}
+                  value={values[field.name] ?? ""}
+                  onChange={(event) =>
+                    setValues((v) => ({ ...v, [field.name]: event.target.value }))
+                  }
+                >
+                  <option value="">—</option>
+                  {field.options.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              ) : (
+                <Input
+                  id={`record-${field.name}`}
+                  autoFocus={index === 0}
+                  type={field.type ?? "text"}
+                  placeholder={field.placeholder}
+                  value={values[field.name] ?? ""}
+                  onChange={(event) =>
+                    setValues((v) => ({ ...v, [field.name]: event.target.value }))
+                  }
+                />
+              )}
+            </div>
+          ))}
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy ? "Saving…" : submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/invoices/components/sidebar.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { Command, FileText, LogOut, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { Kbd } from "@/components/kbd";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  count?: number;
+}
+
+export const NAV: Array<Omit<NavItem, "count">> = [
+  { href: "/", label: "Invoices", icon: <FileText /> },
+  { href: "/clients", label: "Clients", icon: <Users /> },
+];
+
+/**
+ * The fixed left rail. Presentational: the active path, the counts, and the
+ * sign-out handler all arrive as props, so it renders identically in a test.
+ */
+export function Sidebar({
+  workspace,
+  email,
+  pathname,
+  counts,
+  onOpenCommand,
+  onSignOut,
+}: {
+  workspace: string;
+  email: string;
+  pathname: string;
+  counts?: Record<string, number>;
+  onOpenCommand: () => void;
+  onSignOut: () => void;
+}) {
+  return (
+    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
+      <div className="flex h-12 items-center gap-2 px-3">
+        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
+          {workspace.slice(0, 1).toUpperCase()}
+        </span>
+        <span className="truncate text-[13px] font-semibold">{workspace}</span>
+      </div>
+
+      <div className="px-2 pb-2">
+        <button
+          type="button"
+          onClick={onOpenCommand}
+          className={cn(
+            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
+            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+          )}
+        >
+          <Command className="size-3.5" />
+          <span className="flex-1 text-left">Search…</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      </div>
+
+      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+        {NAV.map((item) => {
+          const active =
+            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
+                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                active
+                  ? "bg-surface-2 font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+              )}
+            >
+              {item.icon}
+              <span className="flex-1 truncate">{item.label}</span>
+              {counts?.[item.href] ? (
+                <span className="tabular text-[11px] text-muted-foreground">
+                  {counts[item.href]}
+                </span>
+              ) : null}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="border-t border-border p-2">
+        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
+          <Avatar name={email} size="sm" />
+          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
+            {email}
+          </span>
+          <button
+            type="button"
+            onClick={onSignOut}
+            title="Sign out"
+            aria-label="Sign out"
+            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+          >
+            <LogOut className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/templates/invoices/components/status-badge.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { statusById } from "@/lib/billing";
+
+// "overdue" isn't a stored status — it's derived in lib/billing.ts — but it's
+// the one the eye needs to find first, so it gets the only alarming colour.
+const STYLE: Record<string, string> = {
+  draft: "border-border text-muted-foreground",
+  sent: "border-stage-qualified/40 text-stage-qualified",
+  overdue: "border-destructive/50 text-destructive",
+  paid: "border-stage-won/40 text-stage-won",
+  void: "border-border text-muted-foreground line-through",
+};
+
+const LABEL: Record<string, string> = { overdue: "Overdue" };
+
+export function StatusBadge({
+  status,
+  className,
+}: {
+  status: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 items-center rounded border px-1.5 text-[11px] font-medium whitespace-nowrap",
+        STYLE[status] ?? "border-border text-muted-foreground",
+        className,
+      )}
+    >
+      {LABEL[status] ?? statusById(status)?.label ?? status}
+    </span>
+  );
+}

package/templates/invoices/components/summary-bar.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { money, summarize, type Invoice, type LineItem, type Payment } from "@/lib/billing";
+
+/**
+ * The four numbers a small business checks daily. All derived from the line
+ * items and payments — see lib/billing.ts, where the arithmetic is unit-tested.
+ */
+export function SummaryBar({
+  invoices,
+  items,
+  payments,
+  now,
+}: {
+  invoices: Invoice[];
+  items: LineItem[];
+  payments: Payment[];
+  /** Injectable so a test gets a deterministic "overdue". */
+  now?: number;
+}) {
+  const s = summarize(invoices, items, payments, now);
+  return (
+    <dl className="grid grid-cols-2 gap-px border-b border-border bg-border sm:grid-cols-4">
+      <Metric label="Outstanding" value={money(s.outstandingCents)} hint="sent, unpaid" />
+      <Metric
+        label="Overdue"
+        value={money(s.overdueCents)}
+        hint={`${s.overdueCount} invoice${s.overdueCount === 1 ? "" : "s"}`}
+        alarming={s.overdueCents > 0}
+      />
+      <Metric label="Collected" value={money(s.paidCents)} hint="all time" />
+      <Metric
+        label="Drafts"
+        value={String(s.draftCount)}
+        hint="not yet sent"
+      />
+    </dl>
+  );
+}
+
+function Metric({
+  label,
+  value,
+  hint,
+  alarming,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+  alarming?: boolean;
+}) {
+  return (
+    <div className="bg-background px-4 py-3">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd
+        className={
+          "tabular mt-0.5 text-[18px] font-semibold tracking-tight" +
+          (alarming ? " text-destructive" : "")
+        }
+      >
+        {value}
+      </dd>
+      <p className="mt-0.5 text-[11px] text-muted-foreground">{hint}</p>
+    </div>
+  );
+}