@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/inventory/app/movements/movements-view.tsx

@@ -5,6 +5,7 @@ import { ArrowLeftRight } from "lucide-react";
 import { PageHeader } from "@/components/page-header";
 import { DataTable, type ColumnDef } from "@/components/data-table";
 import { EmptyState } from "@/components/empty-state";
+import { Avatar } from "@/components/avatar";
 import { relativeTime } from "@/lib/format";
 import { reasonById, signedQuantity } from "@/lib/stock";
 import { RequireAuth } from "@/components/require-auth";
@@ -18,13 +19,14 @@ import { Workspace, type MovementRow } from "../workspace";
  */
 export function MovementsView() {
   return (
-    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/movements">
       {(data) => {
         const columns: ColumnDef<MovementRow>[] = [
           {
             key: "when",
             header: "When",
+            className: "w-[84px] md:w-[100px]",
             cell: (row) => (
               <span className="text-muted-foreground">{relativeTime(row.createdAt)}</span>
             ),
@@ -32,15 +34,23 @@ export function MovementsView() {
           {
             key: "product",
             header: "Product",
+            className: "md:w-[30%]",
             cell: (row) => (
-              <span className="truncate font-medium">
-                {data.productName(row.productId) ?? "—"}
+              <span className="min-w-0">
+                <span className="block truncate font-medium">
+                  {data.productName(row.productId) ?? "—"}
+                </span>
+                <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                  {reasonById(row.reason)?.label ?? row.reason}
+                </span>
               </span>
             ),
           },
           {
             key: "reason",
             header: "Reason",
+            hideBelow: "md",
+            className: "w-[130px]",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {reasonById(row.reason)?.label ?? row.reason}
@@ -51,6 +61,7 @@ export function MovementsView() {
             key: "delta",
             header: "Change",
             numeric: true,
+            className: "w-[80px] md:w-[90px]",
             cell: (row) => (
               <span
                 className={
@@ -64,6 +75,7 @@ export function MovementsView() {
           {
             key: "note",
             header: "Note",
+            hideBelow: "lg",
             cell: (row) => (
               <span className="text-muted-foreground">{row.note ?? "—"}</span>
             ),
@@ -71,11 +83,19 @@ export function MovementsView() {
           {
             key: "who",
             header: "By",
-            cell: (row) => (
-              <span className="text-muted-foreground">
-                {data.actorName(row.actorId) ?? "—"}
-              </span>
-            ),
+            hideBelow: "sm",
+            className: "w-[170px]",
+            cell: (row) => {
+              const name = data.actorName(row.actorId);
+              return name ? (
+                <span className="flex min-w-0 items-center gap-2">
+                  <Avatar name={name} size="sm" />
+                  <span className="truncate text-muted-foreground">{name}</span>
+                </span>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              );
+            },
           },
         ];
 
@@ -85,14 +105,16 @@ export function MovementsView() {
 
         return (
           <>
-            <PageHeader title="Movements" count={rows.length} />
+            <PageHeader title="Movements" count={data.navCounts["/movements"]} />
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Stock movements"
               empty={
                 <EmptyState
                   icon={<ArrowLeftRight />}
-                  title={data.loading ? "Loading…" : "No movements yet"}
+                  title="No movements yet"
                   description="Every change to stock is recorded here, permanently. On-hand is the sum of these rows."
                 />
               }

package/templates/inventory/app/movements/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { MovementsView } from "./movements-view";
 
 export const metadata: Metadata = {
-  title: "Movements",
+  title: `Movements · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/inventory/app/page.tsx

@@ -1,20 +1,18 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { ProductsView } from "./products-view";
 
 export const metadata: Metadata = {
-  title: "Products",
+  title: `Products · ${BRAND.name}`,
   robots: "noindex",
 };
 
-/**
- * `/` — the stock list.
- *
- */
+/** `/` — the stock list. */
 export default function ProductsPage({ searchParams }: PageProps) {
   return (
     <ProductsView
-          openNew={searchParams?.new === "product"}
+      openNew={searchParams?.new === "product"}
       initialFilter={searchParams?.filter}
     />
   );

package/templates/inventory/app/products/[id]/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { ProductView } from "./product-view";
 
 export const metadata: Metadata = {
-  title: "Product",
+  title: `Product · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/inventory/app/products/[id]/product-view.tsx

@@ -2,11 +2,13 @@
 
 import React, { useState } from "react";
 import { Link, callFn, useRouter } from "@pylonsync/react";
-import { ArrowLeft, ArrowLeftRight } from "lucide-react";
+import { ArrowLeftRight, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
 import { StockLevel } from "@/components/stock-level";
+import { CategoryTile } from "@/components/category-tile";
+import { Avatar } from "@/components/avatar";
 import { MovementDialog } from "@/components/movement-dialog";
 import { relativeTime } from "@/lib/format";
 import { money, reasonById, signedQuantity } from "@/lib/stock";
@@ -21,7 +23,7 @@ export function ProductView({
   const [moveOpen, setMoveOpen] = useState(false);
 
   return (
-    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const product = data.products.find((p) => p.id === productId);
@@ -31,7 +33,7 @@ export function ProductView({
             <>
               <PageHeader title="Product" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Product not found"}
+                title={data.loading ? "Loading product…" : "Product not found"}
                 description={
                   data.loading ? undefined : "It may have been deleted, or the link is wrong."
                 }
@@ -63,31 +65,48 @@ export function ProductView({
 
         return (
           <>
-            <PageHeader title={product.name}>
+            <PageHeader
+              title={product.name}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
+                >
+                  Products
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
               <Button size="sm" onClick={() => setMoveOpen(true)}>
                 <ArrowLeftRight />
-                Record movement
+                <span className="max-sm:sr-only">Record movement</span>
               </Button>
             </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" />
-                  Products
-                </Link>
+              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-4 py-5 md:px-8 md:py-8">
+                <div className="flex items-center gap-3.5">
+                  <CategoryTile category={product.category} className="size-11 rounded-lg [&_svg]:size-5" />
+                  <div className="min-w-0">
+                    <h2 className="truncate text-[20px] font-semibold tracking-[-0.015em] md:text-[22px]">
+                      {product.name}
+                    </h2>
+                    <p className="mt-0.5 text-[12.5px] text-muted-foreground">
+                      <span className="font-mono">{product.sku}</span>
+                      {product.category ? ` · ${product.category}` : ""}
+                    </p>
+                  </div>
+                </div>
 
-                <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="SKU">
-                    <span className="tabular">{product.sku}</span>
+                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-xl border border-border bg-surface-1 p-4 sm:grid-cols-4">
+                  <Field label="Reorder at">
+                    <span className="tabular">{product.reorderPoint || "—"}</span>
                   </Field>
                   <Field label="On hand">
                     <StockLevel
                       quantity={quantity}
                       reorderPoint={product.reorderPoint}
+                      className="justify-start [&>span:last-child]:min-w-0 [&>span:last-child]:text-left"
                     />
                   </Field>
                   <Field label="Unit cost">{money(product.unitCostCents)}</Field>
@@ -99,19 +118,19 @@ export function ProductView({
                 <section>
                   <h2 className="mb-2 text-[13px] font-semibold">History</h2>
                   <p className="mb-3 text-[12px] text-muted-foreground">
-                    On hand is the sum of these movements. Nothing here is ever
-                    edited — a correction is another movement.
+                    On hand is the sum of these movements. Movements are never
+                    edited; a correction is another movement.
                   </p>
                   {withBalance.length === 0 ? (
                     <p className="py-6 text-center text-[12px] text-muted-foreground">
                       No movements yet.
                     </p>
                   ) : (
-                    <ol className="space-y-1.5">
+                    <ol className="divide-y divide-border/70 overflow-hidden rounded-xl border border-border">
                       {withBalance.map(({ movement, after }) => (
                         <li
                           key={movement.id}
-                          className="flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-[12px]"
+                          className="flex h-11 items-center gap-3 bg-card px-3.5 text-[13px]"
                         >
                           <span
                             className={
@@ -125,15 +144,26 @@ export function ProductView({
                             {reasonById(movement.reason)?.label ?? movement.reason}
                           </span>
                           {movement.note ? (
-                            <span className="truncate text-muted-foreground">
+                            <span className="hidden truncate text-muted-foreground sm:inline">
                               {movement.note}
                             </span>
                           ) : null}
-                          <span className="tabular ml-auto shrink-0 text-muted-foreground">
+                          <span className="ml-auto hidden shrink-0 items-center gap-1.5 text-[12.5px] text-muted-foreground md:flex">
+                            {data.actorName(movement.actorId) ? (
+                              <>
+                                <Avatar name={data.actorName(movement.actorId)} size="sm" />
+                                {data.actorName(movement.actorId)}
+                              </>
+                            ) : null}
+                          </span>
+                          <span
+                            className="tabular ml-auto w-14 shrink-0 text-right text-muted-foreground md:ml-0"
+                            title="On hand after this movement"
+                          >
                             → {after}
                           </span>
                           <time
-                            className="w-20 shrink-0 text-right text-muted-foreground"
+                            className="w-16 shrink-0 text-right text-muted-foreground"
                             dateTime={movement.createdAt ?? undefined}
                           >
                             {relativeTime(movement.createdAt)}
@@ -172,8 +202,8 @@ export function ProductView({
 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>
+      <dt className="text-[11.5px] font-medium text-muted-foreground">{label}</dt>
+      <dd className="mt-1 truncate text-[14px] font-medium">{children}</dd>
     </div>
   );
 }

package/templates/inventory/app/products-view.tsx

@@ -12,7 +12,17 @@ import { RecordDialog } from "@/components/record-dialog";
 import { SummaryBar } from "@/components/summary-bar";
 import { StockLevel } from "@/components/stock-level";
 import { MovementDialog } from "@/components/movement-dialog";
-import { money, parseAmount, parseCount, stockState } from "@/lib/stock";
+import { FilterTabs } from "@/components/filter-tabs";
+import { CategoryTile } from "@/components/category-tile";
+import {
+  STOCK_TABS,
+  inStockTab,
+  money,
+  parseAmount,
+  parseCount,
+  stockState,
+  stockTabCounts,
+} from "@/lib/stock";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type ProductRow } from "./workspace";
 
@@ -26,7 +36,13 @@ export function ProductsView({
   const router = useRouter();
   const [newOpen, setNewOpen] = useState(Boolean(openNew));
   const [moveOpen, setMoveOpen] = useState(false);
-  const [reorderOnly, setReorderOnly] = useState(initialFilter === "reorder");
+  const [tab, setTab] = useState(initialFilter === "reorder" ? "reorder" : "all");
+
+  // ⌘K "Needs reorder" navigates here with ?filter=reorder while the list may
+  // already be mounted.
+  useEffect(() => {
+    if (initialFilter === "reorder") setTab("reorder");
+  }, [initialFilter]);
 
   // "m" records a movement — the thing you do twenty times a day. Ignored
   // while typing.
@@ -52,25 +68,39 @@ export function ProductsView({
   }, []);
 
   return (
-    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const level = (id: string) => data.levels.get(id) ?? 0;
 
         const columns: ColumnDef<ProductRow>[] = [
-          {
-            key: "sku",
-            header: "SKU",
-            cell: (row) => <span className="tabular text-muted-foreground">{row.sku}</span>,
-          },
           {
             key: "name",
             header: "Product",
-            cell: (row) => <span className="truncate font-medium">{row.name}</span>,
+            className: "w-[60%] md:w-[34%]",
+            cell: (row) => (
+              <span className="flex min-w-0 items-center gap-3">
+                <CategoryTile category={row.category} />
+                <span className="min-w-0">
+                  <span className="block truncate font-medium">{row.name}</span>
+                  <span className="block truncate font-mono text-[11.5px] text-muted-foreground md:hidden">
+                    {row.sku}
+                  </span>
+                </span>
+              </span>
+            ),
+          },
+          {
+            key: "sku",
+            header: "SKU",
+            hideBelow: "md",
+            className: "w-[110px]",
+            cell: (row) => <span className="font-mono text-[12px] text-muted-foreground">{row.sku}</span>,
           },
           {
             key: "category",
             header: "Category",
+            hideBelow: "lg",
             cell: (row) => (
               <span className="text-muted-foreground">{row.category ?? "—"}</span>
             ),
@@ -79,6 +109,7 @@ export function ProductsView({
             key: "onhand",
             header: "On hand",
             numeric: true,
+            className: "w-[120px] md:w-[170px]",
             cell: (row) => (
               <StockLevel quantity={level(row.id)} reorderPoint={row.reorderPoint} />
             ),
@@ -87,6 +118,8 @@ export function ProductsView({
             key: "reorder",
             header: "Reorder at",
             numeric: true,
+            hideBelow: "lg",
+            className: "w-[100px]",
             cell: (row) => (
               <span className="text-muted-foreground">{row.reorderPoint || "—"}</span>
             ),
@@ -95,69 +128,77 @@ export function ProductsView({
             key: "value",
             header: "Value",
             numeric: true,
+            hideBelow: "sm",
+            className: "w-[110px]",
             cell: (row) =>
               money(Math.max(0, level(row.id)) * (Number(row.unitCostCents) || 0)),
           },
         ];
 
+        const tabCounts = stockTabCounts(data.summary);
         const rows = data.products
           .filter((product) => !product.archived)
           .filter((product) =>
-            reorderOnly
-              ? stockState(level(product.id), product.reorderPoint) !== "ok"
-              : true,
+            inStockTab(tab, stockState(level(product.id), product.reorderPoint)),
           )
           .sort((a, b) => a.sku.localeCompare(b.sku));
 
         return (
           <>
-            <PageHeader title="Products" count={rows.length}>
+            <PageHeader title="Products" count={data.navCounts["/"]}>
               <Button
                 size="sm"
-                variant={reorderOnly ? "default" : "secondary"}
-                onClick={() => setReorderOnly((on) => !on)}
+                variant="outline"
+                onClick={() => setMoveOpen(true)}
+                title="Record a movement (m)"
               >
-                Needs reorder
-              </Button>
-              <Button size="sm" variant="secondary" onClick={() => setMoveOpen(true)}>
                 <ArrowLeftRight />
-                Movement
-                <Kbd className="ml-1">m</Kbd>
+                <span className="max-sm:sr-only">Movement</span>
+                <Kbd className="ml-0.5 hidden md:inline-flex">M</Kbd>
               </Button>
-              <Button size="sm" onClick={() => setNewOpen(true)}>
+              <Button size="sm" onClick={() => setNewOpen(true)} title="New product (c)">
                 <Plus />
-                New product
+                <span className="max-sm:sr-only">New product</span>
               </Button>
             </PageHeader>
 
-            <SummaryBar products={data.products} movements={data.movements} />
+            <SummaryBar summary={data.summary} />
+
+            <FilterTabs
+              label="Stock level"
+              value={tab}
+              onChange={setTab}
+              tabs={STOCK_TABS.map((t) => ({ id: t.id, label: t.label, count: tabCounts[t.id] }))}
+            />
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Products"
               onRowClick={(row) => router.push(`/products/${row.id}`)}
               empty={
                 <EmptyState
                   icon={<Boxes />}
                   title={
-                    data.loading
-                      ? "Loading…"
-                      : reorderOnly
-                        ? "Nothing needs reordering"
-                        : "No products yet"
+                    tab === "all"
+                      ? "No products yet"
+                      : tab === "out"
+                        ? "Nothing is out of stock"
+                        : "Nothing needs reordering"
                   }
                   description={
-                    reorderOnly
-                      ? "Every line is above its reorder point."
-                      : "Add a product, then record what you receive. On-hand is the sum of those movements — there is no quantity to keep in sync."
+                    tab === "all"
+                      ? "Add a product, then record what you receive. On-hand is the sum of those movements, so there is no quantity to keep in sync."
+                      : "Every active product is above its reorder point."
                   }
                   action={
-                    reorderOnly ? undefined : (
+                    tab === "all" ? (
                       <Button size="sm" onClick={() => setNewOpen(true)}>
                         <Plus />
                         New product
                       </Button>
-                    )
+                    ) : undefined
                   }
                 />
               }

package/templates/inventory/app/workspace.tsx

@@ -3,10 +3,17 @@
 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 { Package } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
-import { onHandByProduct, summarize, type Movement, type Product } from "@/lib/stock";
+import {
+  onHandByProduct,
+  summarize,
+  type Movement,
+  type Product,
+  type Summary,
+} from "@/lib/stock";
 
 export type ProductRow = Product;
 export type MovementRow = Movement;
@@ -23,6 +30,13 @@ export interface WorkspaceData {
   levels: Map<string, number>;
   productName: (id: string | null | undefined) => string | null;
   actorName: (id: string | null | undefined) => string | null;
+  /** Totals from the ledger: SKUs, units, value, low and out counts. */
+  summary: Summary;
+  /**
+   * The number beside each nav link, keyed by href. Page headers and tabs
+   * read the same summary, so the sidebar and the page can't disagree.
+   */
+  navCounts: Record<string, number>;
   loading: boolean;
 }
 
@@ -56,8 +70,7 @@ export function Workspace({
 
   // Whoever is signed in, named from the synced User row rather than an
   // SSR prop — see the note on useAuth above.
-  const signedInEmail =
-    (users ?? []).find((user) => user.id === userId)?.email ?? "";
+  const me = (users ?? []).find((user) => user.id === userId);
 
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -113,7 +126,7 @@ export function Workspace({
     () =>
       productList.map((product) => ({
         id: `product:${product.id}`,
-        type: "company" as const,
+        type: "product",
         title: product.name,
         subtitle: product.sku,
         href: `/products/${product.id}`,
@@ -123,6 +136,7 @@ export function Workspace({
   );
 
   const summary = summarize(productList, movementList);
+  const navCounts = { "/": summary.skuCount, "/movements": movementList.length };
 
   const data: WorkspaceData = {
     products: productList,
@@ -133,20 +147,22 @@ export function Workspace({
       const user = userById.get(id ?? "");
       return user?.displayName || user?.email || null;
     },
+    summary,
+    navCounts,
     loading,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="Inventory"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{ "/": summary.skuCount }}
-        onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={() => void signOut()}
-      />
-      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+    <AppShell
+      sidebar={{
+        user: { name: me?.displayName ?? "", email: me?.email ?? "" },
+        pathname,
+        counts: navCounts,
+        onOpenCommand: () => setPaletteOpen(true),
+        onSignOut: () => void signOut(),
+      }}
+    >
+      {children(data)}
 
       <CommandPalette
         open={paletteOpen}
@@ -168,9 +184,11 @@ export function Workspace({
             run: () => router.push("/movements"),
           },
         ]}
+        placeholder="Search products by name, SKU, or category…"
+        icons={{ product: <Package /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/inventory/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// inventory — stock control for a small business: products, an append-only
+// Stockroom (the inventory template) — stock control for a small business: products, an append-only
 // ledger of movements, and the levels derived from it.
 //
 // THE CENTRAL DECISION: there is no `quantity` column. On-hand is the SUM of a
@@ -144,13 +144,21 @@ const manifest = buildManifest({
   auth: auth(),
   fonts: [
     font({
-      family: "Inter",
+      family: "IBM Plex Sans",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],
       display: "swap",
       preload: true,
     }),
+    // SKUs and quantities in the ledger read best in a fixed-width face.
+    font({
+      family: "IBM Plex Mono",
+      variable: "--font-mono",
+      weights: ["400", "500"],
+      subsets: ["latin"],
+      display: "swap",
+    }),
   ],
   routes: await discoverAppRoutes(),
 });