@pylonsync/create-pylon 0.3.343 → 0.3.345

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

@@ -0,0 +1,178 @@
+"use client";
+
+import React, { useState } from "react";
+import { Link, callFn, useRouter } from "@pylonsync/react";
+import { ArrowLeft, ArrowLeftRight } 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 { MovementDialog } from "@/components/movement-dialog";
+import { relativeTime } from "@/lib/format";
+import { money, reasonById, signedQuantity } from "@/lib/stock";
+import { Workspace } from "../../workspace";
+
+export function ProductView({
+  email,
+  productId,
+}: {
+  email: string;
+  productId: string;
+}) {
+  const [moveOpen, setMoveOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const product = data.products.find((p) => p.id === productId);
+
+        if (!product) {
+          return (
+            <>
+              <PageHeader title="Product" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Product not found"}
+                description={
+                  data.loading ? undefined : "It may have been deleted, or the link is wrong."
+                }
+                action={
+                  data.loading ? undefined : (
+                    <Button size="sm" variant="secondary" asChild>
+                      <Link href="/">Back to products</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const quantity = data.levels.get(product.id) ?? 0;
+        // Newest first, and running backwards from the current level so each
+        // row shows what the shelf held right after it — the question you
+        // actually ask when auditing a count.
+        const history = data.movements
+          .filter((movement) => movement.productId === product.id)
+          .sort((a, b) => (b.createdAt ?? "").localeCompare(a.createdAt ?? ""));
+        let running = quantity;
+        const withBalance = history.map((movement) => {
+          const after = running;
+          running -= Math.trunc(Number(movement.delta) || 0);
+          return { movement, after };
+        });
+
+        return (
+          <>
+            <PageHeader title={product.name}>
+              <Button size="sm" onClick={() => setMoveOpen(true)}>
+                <ArrowLeftRight />
+                Record movement
+              </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>
+
+                <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>
+                  </Field>
+                  <Field label="On hand">
+                    <StockLevel
+                      quantity={quantity}
+                      reorderPoint={product.reorderPoint}
+                    />
+                  </Field>
+                  <Field label="Unit cost">{money(product.unitCostCents)}</Field>
+                  <Field label="Stock value">
+                    {money(Math.max(0, quantity) * (Number(product.unitCostCents) || 0))}
+                  </Field>
+                </dl>
+
+                <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.
+                  </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">
+                      {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]"
+                        >
+                          <span
+                            className={
+                              "tabular w-12 shrink-0 font-medium " +
+                              (movement.delta > 0 ? "text-stage-won" : "text-destructive")
+                            }
+                          >
+                            {signedQuantity(movement.delta)}
+                          </span>
+                          <span className="shrink-0">
+                            {reasonById(movement.reason)?.label ?? movement.reason}
+                          </span>
+                          {movement.note ? (
+                            <span className="truncate text-muted-foreground">
+                              {movement.note}
+                            </span>
+                          ) : null}
+                          <span className="tabular ml-auto shrink-0 text-muted-foreground">
+                            → {after}
+                          </span>
+                          <time
+                            className="w-20 shrink-0 text-right text-muted-foreground"
+                            dateTime={movement.createdAt ?? undefined}
+                          >
+                            {relativeTime(movement.createdAt)}
+                          </time>
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </section>
+              </div>
+            </div>
+
+            <MovementDialog
+              open={moveOpen}
+              products={data.products.filter((p) => !p.archived)}
+              currentLevel={(id) => data.levels.get(id) ?? 0}
+              defaultProductId={product.id}
+              onOpenChange={setMoveOpen}
+              onRecord={(pid, delta, reason, note) =>
+                callFn("recordMovement", {
+                  productId: pid,
+                  delta,
+                  reason,
+                  ...(note ? { note } : {}),
+                })
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dd className="mt-1 truncate text-[13px]">{children}</dd>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { callFn, db, useRouter } from "@pylonsync/react";
+import { Boxes, Plus, ArrowLeftRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Kbd } from "@/components/kbd";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+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 { Workspace, type ProductRow } from "./workspace";
+
+export function ProductsView({
+  email,
+  openNew,
+  initialFilter,
+}: {
+  email: string;
+  openNew?: boolean;
+  initialFilter?: string;
+}) {
+  const router = useRouter();
+  const [newOpen, setNewOpen] = useState(Boolean(openNew));
+  const [moveOpen, setMoveOpen] = useState(false);
+  const [reorderOnly, setReorderOnly] = useState(initialFilter === "reorder");
+
+  // "m" records a movement — the thing you do twenty times a day. Ignored
+  // while typing.
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      const typing =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      if (typing || event.metaKey || event.ctrlKey) return;
+      if (event.key === "m") {
+        event.preventDefault();
+        setMoveOpen(true);
+      } else if (event.key === "c") {
+        event.preventDefault();
+        setNewOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <Workspace email={email} 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>,
+          },
+          {
+            key: "category",
+            header: "Category",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.category ?? "—"}</span>
+            ),
+          },
+          {
+            key: "onhand",
+            header: "On hand",
+            numeric: true,
+            cell: (row) => (
+              <StockLevel quantity={level(row.id)} reorderPoint={row.reorderPoint} />
+            ),
+          },
+          {
+            key: "reorder",
+            header: "Reorder at",
+            numeric: true,
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.reorderPoint || "—"}</span>
+            ),
+          },
+          {
+            key: "value",
+            header: "Value",
+            numeric: true,
+            cell: (row) =>
+              money(Math.max(0, level(row.id)) * (Number(row.unitCostCents) || 0)),
+          },
+        ];
+
+        const rows = data.products
+          .filter((product) => !product.archived)
+          .filter((product) =>
+            reorderOnly
+              ? stockState(level(product.id), product.reorderPoint) !== "ok"
+              : true,
+          )
+          .sort((a, b) => a.sku.localeCompare(b.sku));
+
+        return (
+          <>
+            <PageHeader title="Products" count={rows.length}>
+              <Button
+                size="sm"
+                variant={reorderOnly ? "default" : "secondary"}
+                onClick={() => setReorderOnly((on) => !on)}
+              >
+                Needs reorder
+              </Button>
+              <Button size="sm" variant="secondary" onClick={() => setMoveOpen(true)}>
+                <ArrowLeftRight />
+                Movement
+                <Kbd className="ml-1">m</Kbd>
+              </Button>
+              <Button size="sm" onClick={() => setNewOpen(true)}>
+                <Plus />
+                New product
+              </Button>
+            </PageHeader>
+
+            <SummaryBar products={data.products} movements={data.movements} />
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              onRowClick={(row) => router.push(`/products/${row.id}`)}
+              empty={
+                <EmptyState
+                  icon={<Boxes />}
+                  title={
+                    data.loading
+                      ? "Loading…"
+                      : reorderOnly
+                        ? "Nothing needs reordering"
+                        : "No products yet"
+                  }
+                  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."
+                  }
+                  action={
+                    reorderOnly ? undefined : (
+                      <Button size="sm" onClick={() => setNewOpen(true)}>
+                        <Plus />
+                        New product
+                      </Button>
+                    )
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={newOpen}
+              title="New product"
+              submitLabel="Create product"
+              onOpenChange={setNewOpen}
+              fields={[
+                { name: "sku", label: "SKU", required: true, placeholder: "CFE-001" },
+                { name: "name", label: "Name", required: true, placeholder: "House Blend, 1kg" },
+                { name: "category", label: "Category", placeholder: "Coffee" },
+                { name: "unitCost", label: "Unit cost", placeholder: "9.40" },
+                { name: "unitPrice", label: "Unit price", placeholder: "18.00" },
+                { name: "reorderPoint", label: "Reorder at", placeholder: "12" },
+              ]}
+              onCreate={async (values) => {
+                // Money and counts are parsed here, at the edge — everything
+                // below this line is integers.
+                await db.insert("Product", {
+                  sku: values.sku,
+                  name: values.name,
+                  category: values.category ?? null,
+                  unitCostCents: parseAmount(values.unitCost ?? "") ?? 0,
+                  unitPriceCents: parseAmount(values.unitPrice ?? "") ?? 0,
+                  reorderPoint: parseCount(values.reorderPoint ?? "") ?? 0,
+                  archived: false,
+                });
+              }}
+            />
+
+            <MovementDialog
+              open={moveOpen}
+              products={data.products.filter((p) => !p.archived)}
+              currentLevel={level}
+              onOpenChange={setMoveOpen}
+              onRecord={(productId, delta, reason, note) =>
+                callFn("recordMovement", {
+                  productId,
+                  delta,
+                  reason,
+                  ...(note ? { note } : {}),
+                })
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/inventory/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. The default export may also be async.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the authenticated app and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/inventory/app/sitemap.ts

@@ -0,0 +1,27 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. The default export can be async, so
+// it can enumerate dynamic pages from your database. Point SITE_URL at your
+// domain in production.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  // Only public pages belong here — /dashboard is private (and noindex), so
+  // it's intentionally left out.
+  const staticRoutes: Sitemap = [
+    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    { url: `${SITE}/login`, changeFrequency: "yearly", priority: 0.3 },
+    { url: `${SITE}/signup`, changeFrequency: "yearly", priority: 0.5 },
+  ];
+
+  // The export is async, so you can enumerate dynamic pages from a DB read:
+  //
+  //   const posts = await fetchPublishedPosts();
+  //   const postRoutes: Sitemap = posts.map((p) => ({
+  //     url: `${SITE}/blog/${p.slug}`,
+  //     lastModified: p.updatedAt,
+  //   }));
+  //   return [...staticRoutes, ...postRoutes];
+
+  return staticRoutes;
+}

package/templates/inventory/app/workspace.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+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 { CommandPalette } from "@/components/command-palette";
+import type { SearchItem } from "@/lib/search";
+import { onHandByProduct, summarize, type Movement, type Product } from "@/lib/stock";
+
+export type ProductRow = Product;
+export type MovementRow = Movement;
+export interface UserRow {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
+export interface WorkspaceData {
+  products: ProductRow[];
+  movements: MovementRow[];
+  /** On-hand for every product, computed once per render rather than per row. */
+  levels: Map<string, number>;
+  productName: (id: string | null | undefined) => string | null;
+  actorName: (id: string | null | undefined) => string | null;
+  loading: boolean;
+}
+
+/**
+ * The app shell, and the ONLY place that touches `db`.
+ *
+ * Every view below receives plain data through the render prop and reports
+ * changes through callbacks, which is what lets the components in `components/`
+ * render from fixtures in a test with nothing mocked.
+ *
+ * The queries are live: a movement recorded at the back door updates the level
+ * on the shop floor\'s screen immediately, so nobody sells what was just
+ * damaged.
+ */
+export function Workspace({
+  email,
+  pathname,
+  children,
+}: {
+  email: string;
+  pathname: string;
+  children: (data: WorkspaceData) => React.ReactNode;
+}) {
+  const router = useRouter();
+  const { signOut } = useAuth();
+  const { data: products, loading } = db.useQuery<ProductRow>("Product");
+  const { data: movements } = db.useQuery<MovementRow>("Movement");
+  const { data: users } = db.useQuery<UserRow>("User");
+
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const seeded = useRef(false);
+
+  const productList = products ?? [];
+  const movementList = movements ?? [];
+
+  useEffect(() => {
+    if (loading || seeded.current) return;
+    if (productList.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    callFn("seedWorkspace", {}).catch(() => {
+      seeded.current = false;
+    });
+  }, [loading, productList.length]);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      const typing =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      } else if (event.key === "/" && !typing) {
+        event.preventDefault();
+        setPaletteOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  // One pass over the ledger for the whole render — calling onHand() per row
+  // would be O(products x movements).
+  const levels = useMemo(() => onHandByProduct(movementList), [movementList]);
+  const productById = useMemo(
+    () => new Map(productList.map((p) => [p.id, p] as const)),
+    [productList],
+  );
+  const userById = useMemo(
+    () => new Map((users ?? []).map((u) => [u.id, u] as const)),
+    [users],
+  );
+
+  const searchIndex = useMemo<SearchItem[]>(
+    () =>
+      productList.map((product) => ({
+        id: `product:${product.id}`,
+        type: "company" as const,
+        title: product.name,
+        subtitle: product.sku,
+        href: `/products/${product.id}`,
+        keywords: product.category ?? undefined,
+      })),
+    [productList],
+  );
+
+  const summary = summarize(productList, movementList);
+
+  const data: WorkspaceData = {
+    products: productList,
+    movements: movementList,
+    levels,
+    productName: (id) => productById.get(id ?? "")?.name ?? null,
+    actorName: (id) => {
+      const user = userById.get(id ?? "");
+      return user?.displayName || user?.email || null;
+    },
+    loading,
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        workspace="Inventory"
+        email={email}
+        pathname={pathname}
+        counts={{ "/": summary.skuCount }}
+        onOpenCommand={() => setPaletteOpen(true)}
+        onSignOut={async () => {
+          await signOut();
+          window.location.assign("/login");
+        }}
+      />
+      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+
+      <CommandPalette
+        open={paletteOpen}
+        items={searchIndex}
+        actions={[
+          {
+            id: "new-product",
+            label: "New product",
+            run: () => router.push("/?new=product"),
+          },
+          {
+            id: "reorder",
+            label: `Needs reorder (${summary.lowCount + summary.outCount})`,
+            run: () => router.push("/?filter=reorder"),
+          },
+          {
+            id: "go-movements",
+            label: "Go to Movements",
+            run: () => router.push("/movements"),
+          },
+        ]}
+        onClose={() => setPaletteOpen(false)}
+        onSelect={(item) => router.push(item.href)}
+      />
+    </div>
+  );
+}