@pylonsync/create-pylon 0.3.344 → 0.3.346

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

@@ -0,0 +1,103 @@
+"use client";
+
+import React from "react";
+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 { relativeTime } from "@/lib/format";
+import { reasonById, signedQuantity } from "@/lib/stock";
+import { Workspace, type MovementRow } from "../workspace";
+
+/**
+ * The ledger, newest first. Read-only by design: a movement is never edited or
+ * deleted — the policy forbids it — because rewriting history would change a
+ * past valuation and make the current level unexplainable. Corrections are new
+ * rows in the opposite direction.
+ */
+export function MovementsView({ email }: { email: string }) {
+  return (
+    <Workspace email={email} pathname="/movements">
+      {(data) => {
+        const columns: ColumnDef<MovementRow>[] = [
+          {
+            key: "when",
+            header: "When",
+            cell: (row) => (
+              <span className="text-muted-foreground">{relativeTime(row.createdAt)}</span>
+            ),
+          },
+          {
+            key: "product",
+            header: "Product",
+            cell: (row) => (
+              <span className="truncate font-medium">
+                {data.productName(row.productId) ?? "—"}
+              </span>
+            ),
+          },
+          {
+            key: "reason",
+            header: "Reason",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {reasonById(row.reason)?.label ?? row.reason}
+              </span>
+            ),
+          },
+          {
+            key: "delta",
+            header: "Change",
+            numeric: true,
+            cell: (row) => (
+              <span
+                className={
+                  row.delta > 0 ? "text-stage-won" : row.delta < 0 ? "text-destructive" : ""
+                }
+              >
+                {signedQuantity(row.delta)}
+              </span>
+            ),
+          },
+          {
+            key: "note",
+            header: "Note",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.note ?? "—"}</span>
+            ),
+          },
+          {
+            key: "who",
+            header: "By",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {data.actorName(row.actorId) ?? "—"}
+              </span>
+            ),
+          },
+        ];
+
+        const rows = [...data.movements].sort((a, b) =>
+          (b.createdAt ?? "").localeCompare(a.createdAt ?? ""),
+        );
+
+        return (
+          <>
+            <PageHeader title="Movements" count={rows.length} />
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<ArrowLeftRight />}
+                  title={data.loading ? "Loading…" : "No movements yet"}
+                  description="Every change to stock is recorded here, permanently. On-hand is the sum of these rows."
+                />
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

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

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { MovementsView } from "./movements-view";
+
+export const metadata: Metadata = {
+  title: "Movements",
+  robots: "noindex",
+};
+
+export default function MovementsPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <MovementsView email={me?.email ?? ""} />;
+}

package/templates/inventory/app/not-found.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
+// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
+// the buttons below use the client router. Not-found boundaries receive the
+// standard page props (and, matching Next, no `reset`).
+export default function NotFound(_props: NotFoundProps) {
+  const router = useRouter();
+  return (
+    <div className="space-y-6">
+      <section>
+        <h1 className="text-2xl font-semibold tracking-tight">404</h1>
+        <p className="mt-2 text-muted-foreground">
+          We couldn&apos;t find that page.
+        </p>
+      </section>
+      <div className="flex items-center gap-3">
+        <Button onClick={() => router.back()} variant="outline">
+          ← Go back
+        </Button>
+        <Button asChild>
+          <Link href="/">Home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/inventory/app/page.tsx

@@ -0,0 +1,34 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ProductsView } from "./products-view";
+
+export const metadata: Metadata = {
+  title: "Products",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the stock list.
+ *
+ * Server-side auth gate only. Reading `auth` opts this render out of caching,
+ * which is correct: every screen here is private.
+ */
+export default function ProductsPage({
+  auth,
+  response,
+  searchParams,
+  serverData,
+}: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return (
+    <ProductsView
+      email={me?.email ?? ""}
+      openNew={searchParams?.new === "product"}
+      initialFilter={searchParams?.filter}
+    />
+  );
+}

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

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ProductView } from "./product-view";
+
+export const metadata: Metadata = {
+  title: "Product",
+  robots: "noindex",
+};
+
+/** `app/products/[id]/page.tsx` -> `/products/:id`. */
+export default function ProductPage({
+  auth,
+  response,
+  params,
+  serverData,
+}: PageProps<{ id: string }>) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <ProductView email={me?.email ?? ""} productId={params.id} />;
+}

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;
+}