@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/projects/app/projects-view.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import React, { useState } from "react";
+import { db, useRouter } from "@pylonsync/react";
+import { FolderKanban, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+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 {
+  budgetState,
+  duration,
+  isOpen,
+  minutesForProject,
+  parseDuration,
+  progress,
+} from "@/lib/work";
+import { Workspace, type ProjectRow } from "./workspace";
+
+export function ProjectsView({
+  email,
+  openNew,
+}: {
+  email: string;
+  openNew?: boolean;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(Boolean(openNew));
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const columns: ColumnDef<ProjectRow>[] = [
+          {
+            key: "name",
+            header: "Project",
+            cell: (row) => <span className="truncate font-medium">{row.name}</span>,
+          },
+          {
+            key: "client",
+            header: "Client",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {data.clientName(row.clientId) ?? "—"}
+              </span>
+            ),
+          },
+          {
+            key: "tasks",
+            header: "Tasks",
+            cell: (row) => {
+              const tasks = data.tasks.filter((t) => t.projectId === row.id);
+              const p = progress(tasks);
+              return (
+                <span className="tabular text-muted-foreground">
+                  {p.done}/{p.total}
+                </span>
+              );
+            },
+          },
+          {
+            key: "open",
+            header: "Open",
+            numeric: true,
+            cell: (row) =>
+              data.tasks.filter((t) => t.projectId === row.id && isOpen(t)).length,
+          },
+          {
+            key: "time",
+            header: "Logged",
+            numeric: true,
+            cell: (row) => {
+              const logged = minutesForProject(row.id, data.entries);
+              const state = budgetState(row.budgetMinutes, logged);
+              return (
+                <span
+                  className={
+                    state === "over"
+                      ? "text-destructive"
+                      : state === "near"
+                        ? "text-stage-proposal"
+                        : ""
+                  }
+                  title={
+                    row.budgetMinutes
+                      ? `Budget ${duration(row.budgetMinutes)}`
+                      : undefined
+                  }
+                >
+                  {duration(logged)}
+                </span>
+              );
+            },
+          },
+          {
+            key: "due",
+            header: "Due",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {row.dueDate
+                  ? new Date(row.dueDate).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })
+                  : "—"}
+              </span>
+            ),
+          },
+        ];
+
+        // Active first, then by name — a finished project shouldn\'t sit above
+        // the work in flight.
+        const rows = [...data.projects].sort((a, b) => {
+          const rank = (p: ProjectRow) => (p.status === "active" ? 0 : p.status === "paused" ? 1 : 2);
+          return rank(a) - rank(b) || a.name.localeCompare(b.name);
+        });
+
+        return (
+          <>
+            <PageHeader title="Projects" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New project
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              onRowClick={(row) => router.push(`/projects/${row.id}`)}
+              empty={
+                <EmptyState
+                  icon={<FolderKanban />}
+                  title={data.loading ? "Loading…" : "No projects yet"}
+                  description="A project holds a task board and the time logged against it. Create one to get started."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New project
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New project"
+              submitLabel="Create project"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Dispatch portal" },
+                {
+                  name: "clientId",
+                  label: "Client",
+                  options: data.clients
+                    .slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((c) => ({ value: c.id, label: c.name })),
+                },
+                { name: "budget", label: "Budget", placeholder: "80h" },
+                { name: "rate", label: "Hourly rate", placeholder: "165" },
+              ]}
+              onCreate={async (values) => {
+                // Parsed at the edge — everything below this line is integers.
+                await db.insert("Project", {
+                  name: values.name,
+                  clientId: values.clientId ?? null,
+                  status: "active",
+                  budgetMinutes: parseDuration(values.budget ?? "") ?? 0,
+                  hourlyRateCents: Math.round(Number(values.rate ?? 0) * 100) || 0,
+                });
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/projects/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/projects/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/projects/app/workspace.tsx

@@ -0,0 +1,190 @@
+"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 { minutesByTask, type Project, type Task, type TimeEntry } from "@/lib/work";
+
+export interface ClientRow {
+  id: string;
+  name: string;
+  email?: string | null;
+  createdAt?: string | null;
+}
+export type ProjectRow = Project;
+export type TaskRow = Task;
+export type TimeEntryRow = TimeEntry;
+export interface UserRow {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
+export interface WorkspaceData {
+  clients: ClientRow[];
+  projects: ProjectRow[];
+  tasks: TaskRow[];
+  entries: TimeEntryRow[];
+  /** Minutes per task, computed once per render rather than per card. */
+  taskMinutes: Map<string, number>;
+  clientName: (id: string | null | undefined) => string | null;
+  memberName: (id: string | null | undefined) => string | null;
+  members: UserRow[];
+  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: drag a task and it moves on every teammate\'s board, so
+ * a standup doesn\'t start with reconciling two views of the work.
+ */
+export function Workspace({
+  email,
+  pathname,
+  children,
+}: {
+  email: string;
+  pathname: string;
+  children: (data: WorkspaceData) => React.ReactNode;
+}) {
+  const router = useRouter();
+  const { signOut } = useAuth();
+  const { data: projects, loading } = db.useQuery<ProjectRow>("Project");
+  const { data: clients } = db.useQuery<ClientRow>("Client");
+  const { data: tasks } = db.useQuery<TaskRow>("Task");
+  const { data: entries } = db.useQuery<TimeEntryRow>("TimeEntry");
+  const { data: users } = db.useQuery<UserRow>("User");
+
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const seeded = useRef(false);
+
+  const projectList = projects ?? [];
+  const clientList = clients ?? [];
+  const taskList = tasks ?? [];
+  const entryList = entries ?? [];
+
+  useEffect(() => {
+    if (loading || seeded.current) return;
+    if (projectList.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    callFn("seedWorkspace", {}).catch(() => {
+      seeded.current = false;
+    });
+  }, [loading, projectList.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 — per-card lookups would be
+  // O(tasks x entries).
+  const taskMinutes = useMemo(() => minutesByTask(entryList), [entryList]);
+  const clientById = useMemo(
+    () => new Map(clientList.map((c) => [c.id, c] as const)),
+    [clientList],
+  );
+  const userById = useMemo(
+    () => new Map((users ?? []).map((u) => [u.id, u] as const)),
+    [users],
+  );
+
+  const searchIndex = useMemo<SearchItem[]>(
+    () => [
+      ...projectList.map((project) => ({
+        id: `project:${project.id}`,
+        type: "company" as const,
+        title: project.name,
+        subtitle: clientById.get(project.clientId ?? "")?.name,
+        href: `/projects/${project.id}`,
+      })),
+      ...taskList.map((task) => ({
+        id: `task:${task.id}`,
+        type: "deal" as const,
+        title: task.title,
+        href: `/projects/${task.projectId}`,
+      })),
+    ],
+    [projectList, taskList, clientById],
+  );
+
+  const data: WorkspaceData = {
+    clients: clientList,
+    projects: projectList,
+    tasks: taskList,
+    entries: entryList,
+    taskMinutes,
+    clientName: (id) => clientById.get(id ?? "")?.name ?? null,
+    memberName: (id) => {
+      const user = userById.get(id ?? "");
+      return user?.displayName || user?.email || null;
+    },
+    members: users ?? [],
+    loading,
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        workspace="Projects"
+        email={email}
+        pathname={pathname}
+        counts={{
+          "/": projectList.filter((p) => p.status === "active").length,
+          "/clients": clientList.length,
+        }}
+        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-project",
+            label: "New project",
+            run: () => router.push("/?new=project"),
+          },
+          {
+            id: "go-clients",
+            label: "Go to Clients",
+            run: () => router.push("/clients"),
+          },
+        ]}
+        onClose={() => setPaletteOpen(false)}
+        onSelect={(item) => router.push(item.href)}
+      />
+    </div>
+  );
+}

package/templates/projects/app.ts

@@ -0,0 +1,186 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+  font,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// projects — client project delivery for a small team: projects, a task board,
+// and time logged against the work.
+//
+// TIME IS A LEDGER. A task\'s logged hours are the sum of its TimeEntry rows,
+// never a running total on the task. Two people logging against the same task at
+// once is normal, and a mutable total loses one of them. It also means every
+// hour on an invoice traces to who logged it and when — the question a client
+// asks.
+//
+//   • Client    — who the work is for.
+//   • Project   — budget, rate, due date, status.
+//   • Task      — the board. Status, assignee, estimate.
+//   • TimeEntry — minutes against a task. Append-only.
+//   • User      — a team member (email/password).
+//
+// Minutes are integers. Hours as floats produce 7.999999 on a timesheet.
+//
+// The realtime hook: drag a task and it moves on every teammate\'s board
+// instantly, so a standup doesn\'t start with reconciling two views of the work.
+//
+// TRUST MODEL: an internal tool for ONE team. Every entity is readable and
+// writable by any SIGNED-IN user and by nobody else. There is no client portal —
+// adding one means a separate, narrower policy for that client\'s own projects.
+// ---------------------------------------------------------------------------
+
+const TEAM = "auth.userId != null";
+
+const Client = entity(
+  "Client",
+  {
+    name: field.string(),
+    email: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_name", fields: ["name"], unique: false }] },
+);
+
+const Project = entity(
+  "Project",
+  {
+    name: field.string(),
+    clientId: field.id("Client").optional(),
+    // "active" | "paused" | "complete" — see PROJECT_STATUSES.
+    status: field.string().default("active"),
+    // Agreed budget in whole MINUTES; 0 means no budget to track against.
+    budgetMinutes: field.number().default(0),
+    hourlyRateCents: field.number().default(0),
+    dueDate: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_status", fields: ["status"], unique: false },
+      { name: "by_client", fields: ["clientId"], unique: false },
+    ],
+  },
+);
+
+const Task = entity(
+  "Task",
+  {
+    projectId: field.id("Project"),
+    title: field.string(),
+    // "todo" | "doing" | "review" | "done" — see TASK_STATUSES.
+    status: field.string().default("todo"),
+    assigneeId: field.id("User").optional(),
+    estimateMinutes: field.number().default(0),
+    // Manual order within a column, so dragging is stable.
+    position: field.number().default(0),
+    createdAt: field.datetime().defaultNow(),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_project", fields: ["projectId"], unique: false },
+      { name: "by_status", fields: ["status"], unique: false },
+    ],
+  },
+);
+
+// APPEND-ONLY, like a stock ledger. `projectId` is denormalised so project
+// totals don\'t need a join through Task on every read — the task can\'t change
+// project, so it can\'t go stale.
+const TimeEntry = entity(
+  "TimeEntry",
+  {
+    taskId: field.id("Task"),
+    projectId: field.id("Project"),
+    minutes: field.number(),
+    note: field.string().optional(),
+    userId: field.id("User").readonly().optional(),
+    spentOn: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_task", fields: ["taskId"], unique: false },
+      { name: "by_project", fields: ["projectId"], unique: false },
+    ],
+  },
+);
+
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+const teamPolicy = (name: string, entityName: string) =>
+  policy({
+    name,
+    entity: entityName,
+    allowRead: TEAM,
+    allowInsert: TEAM,
+    allowUpdate: TEAM,
+    allowDelete: TEAM,
+  });
+
+// Logged time is insert-only: editing an entry would quietly change what a
+// client was billed, and deleting one would make a total unexplainable. A
+// correction is a negative entry, which stays visible in the history.
+const timePolicy = policy({
+  name: "time_append_only",
+  entity: "TimeEntry",
+  allowRead: TEAM,
+  allowInsert: TEAM,
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const userPolicy = policy({
+  name: "user_team_read",
+  entity: "User",
+  allowRead: TEAM,
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Client, Project, Task, TimeEntry, User],
+  queries: [],
+  actions: [],
+  policies: [
+    teamPolicy("client_team", "Client"),
+    teamPolicy("project_team", "Project"),
+    teamPolicy("task_team", "Task"),
+    timePolicy,
+    userPolicy,
+  ],
+  auth: auth(),
+  fonts: [
+    font({
+      family: "Inter",
+      variable: "--font-sans",
+      weights: ["400", "500", "600", "700"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+  ],
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/projects/bunfig

@@ -0,0 +1,4 @@
+[test]
+# Register a DOM (happy-dom) before any test runs so React component tests can
+# render under `pylon test` / `bun test`. Harmless for pure-logic tests.
+preload = ["./tests/setup.ts"]

package/templates/projects/components/avatar.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { accentIndex, initials } from "@/lib/format";
+
+// Deterministic accent per record — the same company keeps its colour across
+// sessions and machines without storing one. Hues are muted so a dense list
+// doesn't turn into confetti.
+const ACCENTS = [
+  "bg-indigo-500/15 text-indigo-500 dark:text-indigo-300",
+  "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300",
+  "bg-amber-500/15 text-amber-600 dark:text-amber-300",
+  "bg-rose-500/15 text-rose-500 dark:text-rose-300",
+  "bg-sky-500/15 text-sky-600 dark:text-sky-300",
+  "bg-violet-500/15 text-violet-500 dark:text-violet-300",
+];
+
+export function Avatar({
+  name,
+  size = "md",
+  className,
+}: {
+  name: string | null | undefined;
+  size?: "sm" | "md";
+  className?: string;
+}) {
+  const label = initials(name);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
+        ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}

package/templates/projects/components/board-skeleton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { TASK_STATUSES } from "@/lib/work";
+
+/**
+ * The board\'s shape while the replica hydrates. Showing the real columns keeps
+ * the beat before the first row lands from reading as "this project has no
+ * tasks", and nothing jumps when the data arrives.
+ */
+export function BoardSkeleton() {
+  return (
+    <div className="flex h-full gap-3 overflow-hidden p-4" aria-hidden="true">
+      {TASK_STATUSES.map((status, column) => (
+        <section
+          key={status.id}
+          className="flex w-[268px] shrink-0 flex-col rounded-xl border border-border bg-surface-1/50"
+        >
+          <header className="flex items-center gap-2 px-3 py-2.5">
+            <span className="text-[12px] font-medium text-muted-foreground">
+              {status.label}
+            </span>
+          </header>
+          <div className="flex flex-col gap-2 px-2 pb-2">
+            {Array.from({ length: Math.max(1, 3 - column) }).map((_, card) => (
+              <div
+                key={card}
+                className="animate-pulse rounded-lg border border-border bg-card p-2.5"
+              >
+                <div className="h-3 w-3/4 rounded bg-muted" />
+                <div className="mt-3 h-4 w-4 rounded-full bg-muted" />
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}