@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/projects/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/projects/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/projects/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/projects/functions/logTime.ts

@@ -0,0 +1,49 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Log time against a task.
+ *
+ * A mutation rather than a bare insert so `projectId` is taken from the TASK
+ * rather than trusted from the client — a mislabelled entry would land on
+ * another client\'s invoice, which is the worst failure this app has.
+ *
+ * Entries are append-only (see the policy). A correction is a NEGATIVE entry,
+ * which stays visible in the history rather than quietly changing what someone
+ * was billed.
+ */
+export default mutation<
+  { taskId: string; minutes: number; note?: string },
+  { ok: true; id: string }
+>({
+  auth: "user",
+  args: {
+    taskId: v.id("Task"),
+    minutes: v.number(),
+    note: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const minutes = Math.trunc(Number(args.minutes) || 0);
+    if (minutes === 0) {
+      throw ctx.error("INVALID_ARGS", "Log a non-zero number of minutes.");
+    }
+    // A day has 1440 minutes; anything past that is a typo, and a typo on a
+    // timesheet becomes a typo on an invoice.
+    if (Math.abs(minutes) > 1440) {
+      throw ctx.error("INVALID_ARGS", "That's more than a day — check the value.");
+    }
+
+    const task = await ctx.db.get("Task", args.taskId);
+    if (!task) throw ctx.error("NOT_FOUND", "Task not found.");
+
+    const id = await ctx.db.insert("TimeEntry", {
+      taskId: args.taskId,
+      projectId: task.projectId,
+      minutes,
+      note: args.note?.trim() || null,
+      userId: ctx.auth.userId,
+      spentOn: new Date().toISOString(),
+    });
+
+    return { ok: true, id: id as string } as const;
+  },
+});

package/templates/projects/functions/moveTask.ts

@@ -0,0 +1,40 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidTaskStatus } from "../lib/work";
+
+/**
+ * Move a task to another column.
+ *
+ * Validated server-side: the board only sends known statuses, but the endpoint
+ * is reachable directly and an unknown status would strand the task in a column
+ * that never renders.
+ *
+ * The new position is the end of the target column, computed here rather than
+ * sent by the client — two people dragging into the same column simultaneously
+ * would otherwise both claim the same index.
+ */
+export default mutation<{ taskId: string; status: string }, { ok: true }>({
+  auth: "user",
+  args: { taskId: v.id("Task"), status: v.string() },
+  async handler(ctx, args) {
+    if (!isValidTaskStatus(args.status)) {
+      throw ctx.error("INVALID_ARGS", `Unknown status "${args.status}".`);
+    }
+
+    const task = await ctx.db.get("Task", args.taskId);
+    if (!task) throw ctx.error("NOT_FOUND", "Task not found.");
+    if (task.status === args.status) return { ok: true } as const;
+
+    const siblings = (await ctx.db.query("Task", {
+      projectId: task.projectId,
+    })) as Array<{ status?: string; position?: number }>;
+    const end = siblings.filter((row) => row.status === args.status).length;
+
+    await ctx.db.update("Task", args.taskId, {
+      status: args.status,
+      position: end,
+      updatedAt: new Date().toISOString(),
+    });
+
+    return { ok: true } as const;
+  },
+});

package/templates/projects/functions/seedWorkspace.ts

@@ -0,0 +1,59 @@
+import { mutation } from "@pylonsync/functions";
+import { shapeSeed } from "../lib/seed";
+
+/**
+ * Fill a brand-new delivery workspace once.
+ *
+ * Seeds time as ENTRIES rather than totals, because logged time here is the sum
+ * of the ledger — a seed that wrote totals would contradict the app\'s own model.
+ * One project lands over its budget so that state is visible on first load.
+ *
+ * Returns immediately if any project exists, so it is safe on every load.
+ */
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  args: {},
+  async handler(ctx) {
+    const existing = await ctx.db.query("Project", { $limit: 1 });
+    if (existing.length > 0) return { seeded: false };
+
+    const seed = shapeSeed();
+    const me = ctx.auth.userId;
+
+    const clientIds = new Map<string, string>();
+    for (const client of seed.clients) {
+      const id = await ctx.db.insert("Client", client.row);
+      clientIds.set(client.key, id as string);
+    }
+
+    const projectIds = new Map<string, string>();
+    for (const project of seed.projects) {
+      const id = await ctx.db.insert("Project", {
+        ...project.row,
+        clientId: clientIds.get(project.client) ?? null,
+      });
+      projectIds.set(project.key, id as string);
+    }
+
+    const taskIds = new Map<string, string>();
+    for (const task of seed.tasks) {
+      const id = await ctx.db.insert("Task", {
+        ...task.row,
+        projectId: projectIds.get(task.project) ?? null,
+        assigneeId: me,
+      });
+      taskIds.set(task.key, id as string);
+    }
+
+    for (const entry of seed.entries) {
+      await ctx.db.insert("TimeEntry", {
+        ...entry.row,
+        taskId: taskIds.get(entry.task) ?? null,
+        projectId: projectIds.get(entry.project) ?? null,
+        userId: me,
+      });
+    }
+
+    return { seeded: true };
+  },
+});

package/templates/projects/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/projects/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`;
+}

package/templates/projects/lib/search.ts

@@ -0,0 +1,78 @@
+// Client-side search powering the ⌘K palette.
+//
+// A small team's CRM fits in the synced replica, so search runs locally against
+// data already in memory: results appear as you type, with no request per
+// keystroke. Swap in `db.useSearch` (Pylon's FTS) when a workspace outgrows
+// that — the component boundary doesn't change, only this file.
+
+export interface SearchItem {
+  id: string;
+  type: "deal" | "company" | "contact";
+  title: string;
+  /** Second line: the company for a contact, the domain for a company. */
+  subtitle?: string;
+  href: string;
+  /** Extra text matched but not displayed — an email, say. */
+  keywords?: string;
+}
+
+export interface Scored extends SearchItem {
+  score: number;
+}
+
+/**
+ * Rank items against a query. Prefix matches beat word-boundary matches, which
+ * beat substring matches; ties break on the shorter title, so "Acme" ranks
+ * above "Acme Corporation Holdings" for the query "acme".
+ */
+export function searchItems(
+  items: SearchItem[],
+  query: string,
+  limit = 8,
+): SearchItem[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return items.slice(0, limit);
+
+  const scored: Scored[] = [];
+  for (const item of items) {
+    const score = scoreItem(item, q);
+    if (score > 0) scored.push({ ...item, score });
+  }
+  scored.sort(
+    (a, b) => b.score - a.score || a.title.length - b.title.length ||
+      a.title.localeCompare(b.title),
+  );
+  return scored.slice(0, limit);
+}
+
+function scoreItem(item: SearchItem, q: string): number {
+  const title = item.title.toLowerCase();
+  if (title.startsWith(q)) return 100;
+  if (wordStart(title, q)) return 80;
+  if (title.includes(q)) return 60;
+
+  const haystack = `${item.subtitle ?? ""} ${item.keywords ?? ""}`.toLowerCase();
+  if (wordStart(haystack, q)) return 40;
+  if (haystack.includes(q)) return 20;
+  return 0;
+}
+
+function wordStart(haystack: string, needle: string): boolean {
+  let from = 0;
+  for (;;) {
+    const at = haystack.indexOf(needle, from);
+    if (at === -1) return false;
+    if (at === 0 || /[\s._@/-]/.test(haystack[at - 1])) return true;
+    from = at + 1;
+  }
+}
+
+/** Move through a list with arrow keys, wrapping at both ends. */
+export function moveSelection(
+  current: number,
+  delta: number,
+  length: number,
+): number {
+  if (length === 0) return 0;
+  return (current + delta + length) % length;
+}

package/templates/projects/lib/seed.ts

@@ -0,0 +1,140 @@
+// Demo data for a brand-new delivery workspace.
+//
+// An empty project list shows nothing about boards, budgets, or time. The first
+// sign-in seeds two live projects — one comfortably inside its budget, one over
+// it — so the budget states are visible rather than theoretical.
+
+export interface SeedClient {
+  key: string;
+  name: string;
+  email: string;
+}
+
+export interface SeedProject {
+  key: string;
+  client: string;
+  name: string;
+  status: string;
+  /** Agreed budget in hours. */
+  budgetHours: number;
+  hourlyRate: number;
+  dueInDays: number;
+}
+
+export interface SeedTask {
+  key: string;
+  project: string;
+  title: string;
+  status: string;
+  estimateHours: number;
+  /** Hours logged against it; each becomes one or more entries. */
+  loggedHours: number[];
+}
+
+export const SEED_CLIENTS: SeedClient[] = [
+  { key: "northwind", name: "Northwind Logistics", email: "dana@northwind.co" },
+  { key: "hallmark", name: "Hallmark Dental", email: "priya@hallmarkdental.com" },
+];
+
+export const SEED_PROJECTS: SeedProject[] = [
+  {
+    key: "dispatch",
+    client: "northwind",
+    name: "Dispatch portal",
+    status: "active",
+    budgetHours: 80,
+    hourlyRate: 165,
+    dueInDays: 24,
+  },
+  // Over budget: 40h agreed, ~46h logged.
+  {
+    key: "intake",
+    client: "hallmark",
+    name: "Patient intake rebuild",
+    status: "active",
+    budgetHours: 40,
+    hourlyRate: 150,
+    dueInDays: 9,
+  },
+];
+
+export const SEED_TASKS: SeedTask[] = [
+  { key: "d-auth", project: "dispatch", title: "SSO with their identity provider", status: "done", estimateHours: 8, loggedHours: [3, 4.5] },
+  { key: "d-model", project: "dispatch", title: "Route + stop data model", status: "done", estimateHours: 6, loggedHours: [5] },
+  { key: "d-board", project: "dispatch", title: "Dispatcher board UI", status: "doing", estimateHours: 20, loggedHours: [6, 4] },
+  { key: "d-mobile", project: "dispatch", title: "Driver mobile view", status: "review", estimateHours: 12, loggedHours: [9] },
+  { key: "d-report", project: "dispatch", title: "Weekly utilisation report", status: "todo", estimateHours: 6, loggedHours: [] },
+  { key: "d-import", project: "dispatch", title: "Import legacy stop history", status: "todo", estimateHours: 10, loggedHours: [] },
+
+  { key: "i-forms", project: "intake", title: "Form builder", status: "done", estimateHours: 16, loggedHours: [8, 7, 4] },
+  { key: "i-sig", project: "intake", title: "Consent signatures", status: "done", estimateHours: 8, loggedHours: [6, 5] },
+  { key: "i-sync", project: "intake", title: "Sync to practice software", status: "doing", estimateHours: 12, loggedHours: [9, 7] },
+  { key: "i-train", project: "intake", title: "Staff training session", status: "todo", estimateHours: 4, loggedHours: [] },
+];
+
+export interface ShapedSeed {
+  clients: Array<{ key: string; row: Record<string, unknown> }>;
+  projects: Array<{ key: string; client: string; row: Record<string, unknown> }>;
+  tasks: Array<{ key: string; project: string; row: Record<string, unknown> }>;
+  entries: Array<{ task: string; project: string; row: Record<string, unknown> }>;
+}
+
+export function shapeSeed(now: number = Date.now()): ShapedSeed {
+  const at = (days: number) => new Date(now + days * 86_400_000).toISOString();
+
+  const tasks: ShapedSeed["tasks"] = [];
+  const entries: ShapedSeed["entries"] = [];
+  const positions = new Map<string, number>();
+
+  SEED_TASKS.forEach((task, index) => {
+    const columnKey = `${task.project}:${task.status}`;
+    const position = positions.get(columnKey) ?? 0;
+    positions.set(columnKey, position + 1);
+
+    tasks.push({
+      key: task.key,
+      project: task.project,
+      row: {
+        title: task.title,
+        status: task.status,
+        estimateMinutes: Math.round(task.estimateHours * 60),
+        position,
+        createdAt: at(-30 + index),
+        updatedAt: at(-2),
+      },
+    });
+
+    task.loggedHours.forEach((hours, entryIndex) => {
+      entries.push({
+        task: task.key,
+        project: task.project,
+        row: {
+          minutes: Math.round(hours * 60),
+          note: null,
+          spentOn: at(-14 + entryIndex * 2),
+        },
+      });
+    });
+  });
+
+  return {
+    clients: SEED_CLIENTS.map((c) => ({
+      key: c.key,
+      row: { name: c.name, email: c.email, createdAt: at(-90) },
+    })),
+    projects: SEED_PROJECTS.map((p) => ({
+      key: p.key,
+      client: p.client,
+      row: {
+        name: p.name,
+        status: p.status,
+        budgetMinutes: Math.round(p.budgetHours * 60),
+        hourlyRateCents: Math.round(p.hourlyRate * 100),
+        dueDate: at(p.dueInDays),
+        createdAt: at(-45),
+      },
+    })),
+    tasks,
+    entries,
+  };
+}

package/templates/projects/lib/utils.ts

@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// `cn` — the shadcn class merger. clsx resolves conditional/array class
+// inputs; tailwind-merge then dedupes conflicting Tailwind utilities so
+// the last one wins (e.g. `cn("px-2", "px-4")` → "px-4"). Every shadcn
+// component routes its className through this.
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}