@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/inventory/components/ui/card.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

package/templates/inventory/components/ui/dialog.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col gap-1.5 text-left", className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/templates/inventory/components/ui/input.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({
+  className,
+  type,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Date/time inputs render a native picker indicator that ignores the
+        // text color; nudge it so it stays visible in dark mode.
+        "[&::-webkit-calendar-picker-indicator]:opacity-60 dark:[&::-webkit-calendar-picker-indicator]:invert",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/templates/inventory/components/ui/label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/templates/inventory/components/ui/select.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A styled native `<select>`.
+ *
+ * shadcn's Select is a Radix listbox; this deliberately isn't. A native select
+ * needs no extra dependency, is keyboard- and screen-reader-correct for free,
+ * and opens as the platform picker on mobile — which is what you want for the
+ * plain "pick one value" case that scaffolded forms are full of. Reach for
+ * `npx shadcn add select` when you need custom option rendering or search.
+ */
+function Select({
+  className,
+  children,
+  ...props
+}: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <div className="relative">
+      <select
+        data-slot="select"
+        className={cn(
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 opacity-50" />
+    </div>
+  );
+}
+
+export { Select };

package/templates/inventory/components/ui/table.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+// The wrapper owns the horizontal scroll so a wide table never widens the page.
+function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t bg-muted/50 font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({
+  className,
+  ...props
+}: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({
+  className,
+  ...props
+}: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("p-3 align-middle", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLTableCaptionElement>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/templates/inventory/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({
+  className,
+  ...props
+}: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/templates/inventory/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/templates/inventory/functions/recordMovement.ts

@@ -0,0 +1,72 @@
+import { mutation, v } from "@pylonsync/functions";
+import { onHand, reasonAllows, type Movement } from "../lib/stock";
+
+/**
+ * Append a stock movement.
+ *
+ * This is the ONLY way stock changes. There is no quantity column to update —
+ * on-hand is the sum of these rows — so two people receiving the same delivery
+ * produce two rows and the correct total, instead of racing on a counter and
+ * losing units.
+ *
+ * The reason has to agree with the direction: a "Sold" that ADDS stock is a
+ * mis-click, and letting it through makes the ledger untrustworthy, which is
+ * the only thing the ledger has going for it.
+ *
+ * Issuing more than you hold is refused. Negative stock is always either a
+ * miscount or a mistake, and silently recording it turns one error into a
+ * valuation that quietly lies. Correct with a "Stock count" movement instead.
+ */
+export default mutation<
+  { productId: string; delta: number; reason: string; note?: string },
+  { ok: true; onHand: number }
+>({
+  auth: "user",
+  args: {
+    productId: v.id("Product"),
+    delta: v.number(),
+    reason: v.string(),
+    note: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    // Whole units only — half a physical thing is a unit-of-measure mistake.
+    const delta = Math.trunc(Number(args.delta) || 0);
+    if (delta === 0) {
+      throw ctx.error("INVALID_ARGS", "A movement has to change the count.");
+    }
+    if (!reasonAllows(args.reason, delta)) {
+      throw ctx.error(
+        "INVALID_ARGS",
+        `"${args.reason}" can't move stock in that direction.`,
+      );
+    }
+
+    const product = await ctx.db.get("Product", args.productId);
+    if (!product) throw ctx.error("NOT_FOUND", "Product not found.");
+
+    const movements = (await ctx.db.query("Movement", {
+      productId: args.productId,
+    })) as unknown as Movement[];
+    const current = onHand(args.productId, movements);
+
+    // A "count" movement is the correction mechanism, so it's allowed to go
+    // wherever the shelf actually is.
+    if (args.reason !== "count" && current + delta < 0) {
+      throw ctx.error(
+        "INSUFFICIENT_STOCK",
+        `Only ${current} in stock — record a stock count if the shelf disagrees.`,
+      );
+    }
+
+    await ctx.db.insert("Movement", {
+      productId: args.productId,
+      delta,
+      reason: args.reason,
+      note: args.note?.trim() || null,
+      actorId: ctx.auth.userId,
+      createdAt: new Date().toISOString(),
+    });
+
+    return { ok: true, onHand: current + delta } as const;
+  },
+});

package/templates/inventory/functions/seedWorkspace.ts

@@ -0,0 +1,40 @@
+import { mutation } from "@pylonsync/functions";
+import { shapeSeed } from "../lib/seed";
+
+/**
+ * Fill a brand-new stock workspace once.
+ *
+ * Seeds a plausible SEQUENCE of receipts and sales rather than a starting
+ * quantity, because on-hand here is the sum of the ledger — a seed that wrote
+ * levels directly would contradict the app\'s own model.
+ *
+ * Returns immediately if any product exists, so it is safe on every load.
+ * Delete this function and lib/seed.ts once you stock real products.
+ */
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  args: {},
+  async handler(ctx) {
+    const existing = await ctx.db.query("Product", { $limit: 1 });
+    if (existing.length > 0) return { seeded: false };
+
+    const seed = shapeSeed();
+    const me = ctx.auth.userId;
+
+    const productIds = new Map<string, string>();
+    for (const product of seed.products) {
+      const id = await ctx.db.insert("Product", product.row);
+      productIds.set(product.key, id as string);
+    }
+
+    for (const movement of seed.movements) {
+      await ctx.db.insert("Movement", {
+        ...movement.row,
+        productId: productIds.get(movement.product) ?? null,
+        actorId: me,
+      });
+    }
+
+    return { seeded: true };
+  },
+});

package/templates/inventory/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store

package/templates/inventory/lib/format.ts

@@ -0,0 +1,53 @@
+// Small display helpers shared across views. Pure, so the timeline and the
+// queue can't drift on how they render the same instant.
+
+/** Initials for an avatar: "Dana Whitfield" → "DW", "jordan@x.com" → "JO". */
+export function initials(nameOrEmail: string | null | undefined): string {
+  const raw = (nameOrEmail ?? "").trim();
+  if (!raw) return "?";
+  const name = raw.includes("@") ? raw.split("@")[0] : raw;
+  const parts = name.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+/** A stable accent per record, so the same person keeps their colour. */
+export function accentIndex(seed: string, buckets = 6): number {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+  }
+  return Math.abs(hash) % buckets;
+}
+
+/** "just now" / "4h ago" / "Mar 3". */
+export function relativeTime(
+  iso: string | null | undefined,
+  now: number = Date.now(),
+): string {
+  if (!iso) return "";
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) return "";
+  const seconds = Math.round((now - then) / 1000);
+  if (seconds < 45) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(then).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+/** "3h 20m" / "45m" / "2d" — a duration an agent reads at a glance. */
+export function duration(minutes: number): string {
+  const abs = Math.abs(Math.round(minutes));
+  if (abs < 60) return `${abs}m`;
+  if (abs < 1440) {
+    const hours = Math.floor(abs / 60);
+    const rest = abs % 60;
+    return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
+  }
+  return `${Math.floor(abs / 1440)}d`;
+}