@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/helpdesk/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/helpdesk/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/helpdesk/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/helpdesk/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/helpdesk/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/helpdesk/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/helpdesk/functions/createTicket.ts

@@ -0,0 +1,62 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidPriority } from "../lib/tickets";
+
+/**
+ * Open a ticket on a customer's behalf — the "log a phone call" path.
+ *
+ * Writes the ticket and its first message together so the thread is never
+ * empty, and marks that first message as coming FROM the customer: it's their
+ * report, typed in by an agent, and the SLA clock should start unanswered.
+ */
+export default mutation<
+  {
+    subject: string;
+    body: string;
+    customerId?: string;
+    priority?: string;
+  },
+  { ok: true; id: string }
+>({
+  auth: "user",
+  args: {
+    subject: v.string(),
+    body: v.string(),
+    customerId: v.optional(v.id("Customer")),
+    priority: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const subject = args.subject.trim();
+    if (!subject) throw ctx.error("INVALID_ARGS", "A ticket needs a subject.");
+
+    const priority = args.priority ?? "normal";
+    if (!isValidPriority(priority)) {
+      throw ctx.error("INVALID_ARGS", `Unknown priority "${priority}".`);
+    }
+
+    const now = new Date().toISOString();
+    const ticketId = await ctx.db.insert("Ticket", {
+      subject,
+      status: "open",
+      priority,
+      customerId: args.customerId ?? null,
+      assigneeId: null,
+      firstRespondedAt: null,
+      createdAt: now,
+      updatedAt: now,
+    });
+
+    const body = args.body.trim();
+    if (body) {
+      await ctx.db.insert("Message", {
+        ticketId,
+        body,
+        fromCustomer: true,
+        internal: false,
+        authorId: null,
+        createdAt: now,
+      });
+    }
+
+    return { ok: true, id: ticketId as string } as const;
+  },
+});

package/templates/helpdesk/functions/replyToTicket.ts

@@ -0,0 +1,55 @@
+import { mutation, v } from "@pylonsync/functions";
+
+/**
+ * Post an agent message on a ticket.
+ *
+ * A mutation rather than a bare insert because a reply changes the ticket too:
+ * the first public reply stamps `firstRespondedAt`, which is what the SLA state
+ * is computed from. Doing that client-side would let a slow or offline tab
+ * decide when the clock stopped.
+ *
+ * An INTERNAL note deliberately does NOT stop the clock — the customer is still
+ * waiting, and a team that could clear its SLA by talking to itself would have
+ * an SLA worth nothing.
+ */
+export default mutation<
+  { ticketId: string; body: string; internal?: boolean },
+  { ok: true; id: string }
+>({
+  auth: "user",
+  args: {
+    ticketId: v.id("Ticket"),
+    body: v.string(),
+    internal: v.optional(v.boolean()),
+  },
+  async handler(ctx, args) {
+    const body = args.body.trim();
+    if (!body) throw ctx.error("INVALID_ARGS", "A reply needs a body.");
+
+    const ticket = await ctx.db.get("Ticket", args.ticketId);
+    if (!ticket) throw ctx.error("NOT_FOUND", "Ticket not found.");
+
+    const internal = args.internal ?? false;
+    const now = new Date().toISOString();
+
+    const id = await ctx.db.insert("Message", {
+      ticketId: args.ticketId,
+      body,
+      fromCustomer: false,
+      internal,
+      authorId: ctx.auth.userId,
+      createdAt: now,
+    });
+
+    const patch: Record<string, unknown> = { updatedAt: now };
+    if (!internal && !ticket.firstRespondedAt) {
+      patch.firstRespondedAt = now;
+    }
+    // Replying to something nobody owns takes ownership — the common case, and
+    // it stops two agents answering the same ticket.
+    if (!ticket.assigneeId) patch.assigneeId = ctx.auth.userId;
+    await ctx.db.update("Ticket", args.ticketId, patch);
+
+    return { ok: true, id: id as string } as const;
+  },
+});

package/templates/helpdesk/functions/seedWorkspace.ts

@@ -0,0 +1,52 @@
+import { mutation } from "@pylonsync/functions";
+import { shapeSeed } from "../lib/seed";
+
+/**
+ * Fill a brand-new helpdesk with a realistic queue, once.
+ *
+ * An empty inbox demonstrates nothing about triage, SLA, or the thread view.
+ * The client calls this after sign-in; it returns immediately if any ticket
+ * already exists, so it is safe on every load and can never duplicate the
+ * fixtures or touch real data.
+ *
+ * Delete this function and lib/seed.ts once real tickets arrive.
+ */
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  args: {},
+  async handler(ctx) {
+    const existing = await ctx.db.query("Ticket", { $limit: 1 });
+    if (existing.length > 0) return { seeded: false };
+
+    const seed = shapeSeed();
+    const me = ctx.auth.userId;
+
+    const customerIds = new Map<string, string>();
+    for (const customer of seed.customers) {
+      const id = await ctx.db.insert("Customer", customer.row);
+      customerIds.set(customer.key, id as string);
+    }
+
+    const ticketIds = new Map<string, string>();
+    for (const ticket of seed.tickets) {
+      const id = await ctx.db.insert("Ticket", {
+        ...ticket.row,
+        customerId: customerIds.get(ticket.customer) ?? null,
+        // Answered tickets are assigned to whoever is seeding; the unanswered
+        // ones stay unassigned so the queue has something to pick up.
+        assigneeId: ticket.row.firstRespondedAt ? me : null,
+      });
+      ticketIds.set(ticket.key, id as string);
+    }
+
+    for (const message of seed.messages) {
+      await ctx.db.insert("Message", {
+        ...message.row,
+        ticketId: ticketIds.get(message.ticket) ?? null,
+        authorId: message.row.fromCustomer ? null : me,
+      });
+    }
+
+    return { seeded: true };
+  },
+});

package/templates/helpdesk/functions/setTicketState.ts

@@ -0,0 +1,58 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidPriority, isValidStatus } from "../lib/tickets";
+
+/**
+ * Change a ticket's status, priority, or assignee.
+ *
+ * One mutation for all three because they share the same validation and the
+ * same `updatedAt` bump, and because a queue that accepts an unknown status
+ * strands the ticket in a filter nothing renders. Every value is checked
+ * server-side — the UI only ever offers known ones, but the endpoint is
+ * reachable directly.
+ *
+ * `assigneeId: null` explicitly unassigns; omitting it leaves the owner alone.
+ */
+export default mutation<
+  {
+    ticketId: string;
+    status?: string;
+    priority?: string;
+    assigneeId?: string | null;
+  },
+  { ok: true }
+>({
+  auth: "user",
+  args: {
+    ticketId: v.id("Ticket"),
+    status: v.optional(v.string()),
+    priority: v.optional(v.string()),
+    assigneeId: v.optional(v.id("User")),
+  },
+  async handler(ctx, args) {
+    const ticket = await ctx.db.get("Ticket", args.ticketId);
+    if (!ticket) throw ctx.error("NOT_FOUND", "Ticket not found.");
+
+    const patch: Record<string, unknown> = { updatedAt: new Date().toISOString() };
+
+    if (args.status !== undefined) {
+      if (!isValidStatus(args.status)) {
+        throw ctx.error("INVALID_ARGS", `Unknown status "${args.status}".`);
+      }
+      patch.status = args.status;
+    }
+
+    if (args.priority !== undefined) {
+      if (!isValidPriority(args.priority)) {
+        throw ctx.error("INVALID_ARGS", `Unknown priority "${args.priority}".`);
+      }
+      patch.priority = args.priority;
+    }
+
+    if (args.assigneeId !== undefined) {
+      patch.assigneeId = args.assigneeId || null;
+    }
+
+    await ctx.db.update("Ticket", args.ticketId, patch);
+    return { ok: true } as const;
+  },
+});

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