@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/helpdesk/app/inbox-view.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { callFn, useRouter } from "@pylonsync/react";
+import { Inbox, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { Kbd } from "@/components/kbd";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { TicketList } from "@/components/ticket-list";
+import { NewTicketDialog } from "@/components/new-ticket-dialog";
+import { STATUSES, applyFilter, counts, type Filter } from "@/lib/tickets";
+import { Workspace } from "./workspace";
+
+export function InboxView({
+  email,
+  openNew,
+  initialFilter,
+}: {
+  email: string;
+  openNew?: boolean;
+  initialFilter?: string;
+}) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(Boolean(openNew));
+  const [status, setStatus] = useState<string>("open");
+  const [unassigned, setUnassigned] = useState(initialFilter === "unassigned");
+
+  // "c" opens a ticket, the way an issue tracker does. Ignored while typing so
+  // it never swallows a character in the reply box.
+  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.key === "c" && !typing && !event.metaKey && !event.ctrlKey) {
+        event.preventDefault();
+        setDialogOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const filter: Filter = {
+          ...(status === "all" ? {} : { status }),
+          ...(unassigned ? { unassigned: true } : {}),
+        };
+        const visible = applyFilter(data.tickets, filter);
+        const queue = counts(data.tickets);
+
+        return (
+          <>
+            <PageHeader title="Inbox" count={visible.length}>
+              <div className="w-32">
+                <Select
+                  aria-label="Status"
+                  value={status}
+                  onChange={(event) => setStatus(event.target.value)}
+                  className="h-7 text-[12px]"
+                >
+                  <option value="all">All statuses</option>
+                  {STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <Button
+                size="sm"
+                variant={unassigned ? "default" : "secondary"}
+                onClick={() => setUnassigned((on) => !on)}
+                title="Show only tickets with no agent"
+              >
+                Unassigned
+                <span className="tabular ml-1 opacity-70">{queue.unassigned}</span>
+              </Button>
+              <Button size="sm" onClick={() => setDialogOpen(true)}>
+                <Plus />
+                New ticket
+                <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
+                  c
+                </Kbd>
+              </Button>
+            </PageHeader>
+
+            {visible.length === 0 ? (
+              <EmptyState
+                icon={<Inbox />}
+                title={
+                  data.loading
+                    ? "Loading…"
+                    : data.tickets.length === 0
+                      ? "No tickets yet"
+                      : "Nothing matches this filter"
+                }
+                description={
+                  data.tickets.length === 0
+                    ? "When a customer writes in, their ticket lands here. You can also open one yourself after a phone call."
+                    : "Try a different status, or clear the unassigned filter."
+                }
+                action={
+                  data.tickets.length === 0 ? (
+                    <Button size="sm" onClick={() => setDialogOpen(true)}>
+                      <Plus />
+                      New ticket
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : (
+              <TicketList
+                tickets={visible}
+                customerName={data.customerName}
+                assigneeName={data.agentName}
+                onSelect={(id) => router.push(`/tickets/${id}`)}
+              />
+            )}
+
+            <NewTicketDialog
+              open={dialogOpen}
+              customers={data.customers}
+              onOpenChange={setDialogOpen}
+              onCreate={async (draft) => {
+                const result = await callFn<{ id: string }>("createTicket", {
+                  subject: draft.subject,
+                  body: draft.body,
+                  priority: draft.priority,
+                  ...(draft.customerId ? { customerId: draft.customerId } : {}),
+                });
+                if (result?.id) router.push(`/tickets/${result.id}`);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/helpdesk/app/layout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The document shell. The app chrome — sidebar, command palette, shortcuts —
+ * lives in `app/workspace.tsx` instead, because it needs the synced data; this
+ * layer only sets up the page.
+ *
+ * `class="dark"` makes dark the default theme. The light tokens in globals.css
+ * are complete and tested, so removing the class flips the whole app; swap it
+ * for a stored preference when you want a toggle.
+ */
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>__APP_NAME__</title>
+        {/* Tailwind is compiled by Pylon from app/globals.css and the
+            stylesheet link is injected here automatically. Inter is declared in
+            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
+            preload link, and a size-adjusted fallback are injected too. */}
+      </head>
+      <body className="h-full">{children}</body>
+    </html>
+  );
+}

package/templates/helpdesk/app/login/auth-form.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ApiError,
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * One form, two modes. Calls the built-in auth API (`/api/auth/password/*`),
+ * then `persistSession` writes the token so the sync engine and `callFn`
+ * authenticate as this user on the next load.
+ *
+ * The navigation is a full `assign`, not a client route change, so the SSR
+ * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
+ * workspace is already signed in.
+ */
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-3.5">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@company.com"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+          />
+        </div>
+        {error ? (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] leading-snug text-destructive">
+            {error}
+          </p>
+        ) : null}
+        <Button type="submit" disabled={pending} className="w-full">
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </Button>
+      </form>
+
+      <p className="text-center text-[12px] text-muted-foreground">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-foreground underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// `ApiError` carries a stable `.code`, so branch on the code rather than the
+// message — the copy here is ours, the message is the framework's.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known breach. Choose another.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/helpdesk/app/login/page.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { AuthForm } from "./auth-form";
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  robots: "noindex",
+};
+
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in? Nothing to do here.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) {
+    response.redirect("/");
+    return null;
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-[320px]">
+        <div className="mb-7 flex items-center gap-2">
+          <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+            C
+          </span>
+          <span className="text-[15px] font-semibold tracking-tight">CRM</span>
+        </div>
+        <h1 className="text-[19px] font-semibold tracking-tight">
+          Sign in to your workspace
+        </h1>
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Your team shares one pipeline. Anyone with an account sees it.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,38 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { InboxView } from "./inbox-view";
+
+export const metadata: Metadata = {
+  title: "Inbox",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the support queue.
+ *
+ * Server-side auth gate only. Reading `auth` opts this render out of caching,
+ * which is correct: every screen here is private.
+ *
+ * The signed-in email comes from the User row, not from `auth` — `PageAuth` is
+ * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
+ */
+export default function InboxPage({
+  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 (
+    <InboxView
+      email={me?.email ?? ""}
+      openNew={searchParams?.new === "ticket"}
+      initialFilter={searchParams?.filter}
+    />
+  );
+}

package/templates/helpdesk/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/helpdesk/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/helpdesk/app/tickets/[id]/page.tsx

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

package/templates/helpdesk/app/tickets/[id]/ticket-view.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import React from "react";
+import { Link, callFn, useRouter } from "@pylonsync/react";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { Thread } from "@/components/thread";
+import { PriorityBadge } from "@/components/priority-badge";
+import { SlaIndicator } from "@/components/sla-indicator";
+import { Avatar } from "@/components/avatar";
+import { relativeTime } from "@/lib/format";
+import { PRIORITIES, STATUSES, ticketNumber } from "@/lib/tickets";
+import { Workspace } from "../../workspace";
+
+export function TicketView({
+  email,
+  ticketId,
+}: {
+  email: string;
+  ticketId: string;
+}) {
+  const router = useRouter();
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const ticket = data.tickets.find((t) => t.id === ticketId);
+
+        if (!ticket) {
+          return (
+            <>
+              <PageHeader title="Ticket" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Ticket 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 inbox</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const customer = data.customers.find((c) => c.id === ticket.customerId);
+        const messages = data.messages.filter((m) => m.ticketId === ticket.id);
+
+        return (
+          <>
+            <PageHeader title={ticket.subject}>
+              <SlaIndicator ticket={ticket} />
+              <div className="w-28">
+                <Select
+                  aria-label="Priority"
+                  value={ticket.priority}
+                  className="h-7 text-[12px]"
+                  onChange={(event) =>
+                    void callFn("setTicketState", {
+                      ticketId: ticket.id,
+                      priority: event.target.value,
+                    })
+                  }
+                >
+                  {PRIORITIES.map((p) => (
+                    <option key={p.id} value={p.id}>
+                      {p.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <div className="w-28">
+                <Select
+                  aria-label="Status"
+                  value={ticket.status}
+                  className="h-7 text-[12px]"
+                  onChange={(event) =>
+                    void callFn("setTicketState", {
+                      ticketId: ticket.id,
+                      status: event.target.value,
+                    })
+                  }
+                >
+                  {STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </PageHeader>
+
+            <div className="flex items-center gap-3 border-b border-border px-6 py-2.5 text-[12px] text-muted-foreground">
+              <Link
+                href="/"
+                className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
+              >
+                <ArrowLeft className="size-3.5" />
+                Inbox
+              </Link>
+              <span aria-hidden="true">·</span>
+              <span className="tabular">
+                {ticketNumber(ticket.id, ticket.createdAt)}
+              </span>
+              <span aria-hidden="true">·</span>
+              <PriorityBadge priority={ticket.priority} />
+              {customer ? (
+                <>
+                  <span aria-hidden="true">·</span>
+                  <span className="flex items-center gap-1.5">
+                    <Avatar name={customer.name} size="sm" />
+                    {customer.name}
+                    {customer.company ? ` · ${customer.company}` : ""}
+                  </span>
+                </>
+              ) : null}
+              <span aria-hidden="true">·</span>
+              <span>Opened {relativeTime(ticket.createdAt)}</span>
+
+              <div className="ml-auto w-40">
+                <Select
+                  aria-label="Assignee"
+                  value={ticket.assigneeId ?? ""}
+                  className="h-7 text-[12px]"
+                  onChange={(event) =>
+                    void callFn("setTicketState", {
+                      ticketId: ticket.id,
+                      assigneeId: event.target.value,
+                    })
+                  }
+                >
+                  <option value="">Unassigned</option>
+                  {data.agents.map((agent) => (
+                    <option key={agent.id} value={agent.id}>
+                      {agent.displayName || agent.email}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <Thread
+              messages={messages}
+              authorName={data.agentName}
+              customerName={customer?.name ?? null}
+              onSend={(body, internal) =>
+                callFn("replyToTicket", { ticketId: ticket.id, body, internal })
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}