@pylonsync/create-pylon 0.3.343 → 0.3.345

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

@@ -0,0 +1,30 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ProjectsView } from "./projects-view";
+
+export const metadata: Metadata = {
+  title: "Projects",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the project 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 ProjectsPage({
+  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 (
+    <ProjectsView email={me?.email ?? ""} openNew={searchParams?.new === "project"} />
+  );
+}

package/templates/projects/app/projects/[id]/page.tsx

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ProjectView } from "./project-view";
+
+export const metadata: Metadata = {
+  title: "Project",
+  robots: "noindex",
+};
+
+/** `app/projects/[id]/page.tsx` -> `/projects/:id`. */
+export default function ProjectPage({
+  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 <ProjectView email={me?.email ?? ""} projectId={params.id} />;
+}

package/templates/projects/app/projects/[id]/project-view.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import React, { useState } from "react";
+import { Link, callFn, db, useRouter } from "@pylonsync/react";
+import { ArrowLeft, Clock, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { TaskBoard } from "@/components/task-board";
+import { BoardSkeleton } from "@/components/board-skeleton";
+import { BudgetBar } from "@/components/budget-bar";
+import { TimeDialog } from "@/components/time-dialog";
+import { PROJECT_STATUSES, duration, minutesForProject, progress } from "@/lib/work";
+import { Workspace } from "../../workspace";
+
+export function ProjectView({
+  email,
+  projectId,
+}: {
+  email: string;
+  projectId: string;
+}) {
+  const router = useRouter();
+  const [newTask, setNewTask] = useState("");
+  const [timeFor, setTimeFor] = useState<{ id: string; title: string } | null>(null);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const project = data.projects.find((p) => p.id === projectId);
+
+        if (!project) {
+          return (
+            <>
+              <PageHeader title="Project" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Project 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 projects</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        // Captured after the guard above: TypeScript's narrowing doesn't reach
+        // into the nested handler, and widening the check would hide a real bug.
+        const current = project;
+        const tasks = data.tasks.filter((task) => task.projectId === current.id);
+        const logged = minutesForProject(current.id, data.entries);
+        const p = progress(tasks);
+
+        async function addTask(event: React.FormEvent) {
+          event.preventDefault();
+          const title = newTask.trim();
+          if (!title) return;
+          setNewTask("");
+          await db.insert("Task", {
+            projectId: current.id,
+            title,
+            status: "todo",
+            position: tasks.filter((t) => t.status === "todo").length,
+          });
+        }
+
+        return (
+          <>
+            <PageHeader title={project.name}>
+              <span className="tabular text-[12px] text-muted-foreground">
+                {p.done}/{p.total} done · {duration(logged)}
+              </span>
+              <div className="w-28">
+                <Select
+                  aria-label="Project status"
+                  value={project.status}
+                  className="h-7 text-[12px]"
+                  onChange={(event) =>
+                    void db.update("Project", project.id, {
+                      status: event.target.value,
+                    })
+                  }
+                >
+                  {PROJECT_STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </PageHeader>
+
+            <div className="flex items-center gap-6 border-b border-border px-4 py-3">
+              <Link
+                href="/"
+                className="inline-flex shrink-0 items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
+              >
+                <ArrowLeft className="size-3.5" />
+                Projects
+              </Link>
+              <span className="shrink-0 text-[12px] text-muted-foreground">
+                {data.clientName(project.clientId) ?? "No client"}
+              </span>
+              <div className="min-w-0 flex-1 max-w-md">
+                <BudgetBar
+                  budgetMinutes={project.budgetMinutes}
+                  loggedMinutes={logged}
+                  hourlyRateCents={project.hourlyRateCents}
+                />
+              </div>
+              <form onSubmit={addTask} className="ml-auto flex shrink-0 items-center gap-2">
+                <Input
+                  aria-label="New task"
+                  placeholder="Add a task…"
+                  value={newTask}
+                  onChange={(event) => setNewTask(event.target.value)}
+                  className="h-7 w-48 text-[12px]"
+                />
+                <Button type="submit" size="sm" className="h-7" disabled={!newTask.trim()}>
+                  <Plus />
+                </Button>
+              </form>
+            </div>
+
+            <div className="min-h-0 flex-1">
+              {data.loading ? (
+                <BoardSkeleton />
+              ) : tasks.length === 0 ? (
+                <EmptyState
+                  icon={<Clock />}
+                  title="No tasks yet"
+                  description="Add the first one above. Drag it between columns as it moves, and log time against it from the card."
+                />
+              ) : (
+                <TaskBoard
+                  tasks={tasks}
+                  assigneeName={data.memberName}
+                  minutesFor={(taskId) => data.taskMinutes.get(taskId) ?? 0}
+                  onMove={(taskId, status) => {
+                    // Through the mutation: the new position is computed
+                    // server-side so two simultaneous drags don\'t collide.
+                    void callFn("moveTask", { taskId, status });
+                  }}
+                  onOpen={(taskId) => {
+                    const task = tasks.find((t) => t.id === taskId);
+                    if (task) setTimeFor({ id: task.id, title: task.title });
+                  }}
+                />
+              )}
+            </div>
+
+            <TimeDialog
+              open={timeFor !== null}
+              taskTitle={timeFor?.title ?? ""}
+              onOpenChange={(open) => {
+                if (!open) setTimeFor(null);
+              }}
+              onLog={(minutes, note) =>
+                callFn("logTime", {
+                  taskId: timeFor?.id ?? "",
+                  minutes,
+                  ...(note ? { note } : {}),
+                })
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

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