@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/crm/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/crm/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/crm/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/crm/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/crm/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/crm/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/crm/functions/createDeal.ts

@@ -0,0 +1,59 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidStage } from "../lib/pipeline";
+
+/**
+ * Create a deal, stamped with the signed-in user as owner.
+ *
+ * `ownerId` is set here rather than sent by the client: it's `.readonly()` in
+ * the schema, so a client can supply it on insert but never edit it afterwards,
+ * and taking it from `ctx.auth` means it can't be forged in the first place.
+ */
+export default mutation<
+  {
+    title: string;
+    companyId?: string;
+    contactId?: string;
+    value?: number;
+    stage?: string;
+    closeDate?: string;
+  },
+  { ok: true; id: string }
+>({
+  auth: "user",
+  args: {
+    title: v.string(),
+    companyId: v.optional(v.id("Company")),
+    contactId: v.optional(v.id("Contact")),
+    value: v.optional(v.number()),
+    stage: v.optional(v.string()),
+    closeDate: v.optional(v.string()),
+  },
+  async handler(ctx, args) {
+    const title = args.title.trim();
+    if (!title) throw ctx.error("INVALID_ARGS", "A deal needs a title.");
+
+    const stage = args.stage ?? "lead";
+    if (!isValidStage(stage)) {
+      throw ctx.error("INVALID_ARGS", `Unknown stage "${stage}".`);
+    }
+
+    // A negative forecast is always a typo, and it would quietly subtract from
+    // every column total it lands in.
+    const value = Math.max(0, Number(args.value) || 0);
+
+    const now = new Date().toISOString();
+    const id = await ctx.db.insert("Deal", {
+      title,
+      companyId: args.companyId ?? null,
+      contactId: args.contactId ?? null,
+      value,
+      stage,
+      closeDate: args.closeDate || null,
+      ownerId: ctx.auth.userId,
+      createdAt: now,
+      updatedAt: now,
+    });
+
+    return { ok: true, id: id as string } as const;
+  },
+});

package/templates/crm/functions/logActivity.ts

@@ -0,0 +1,49 @@
+import { mutation, v } from "@pylonsync/functions";
+import { ACTIVITY_KINDS } from "../lib/pipeline";
+
+/** Log a note, call, email, or meeting against a deal and/or contact. */
+export default mutation<
+  {
+    kind: string;
+    body: string;
+    dealId?: string;
+    contactId?: string;
+    companyId?: string;
+  },
+  { ok: true; id: string }
+>({
+  auth: "user",
+  args: {
+    kind: v.string(),
+    body: v.string(),
+    dealId: v.optional(v.id("Deal")),
+    contactId: v.optional(v.id("Contact")),
+    companyId: v.optional(v.id("Company")),
+  },
+  async handler(ctx, args) {
+    const body = args.body.trim();
+    if (!body) throw ctx.error("INVALID_ARGS", "An activity needs a body.");
+    if (!(ACTIVITY_KINDS as readonly string[]).includes(args.kind)) {
+      throw ctx.error("INVALID_ARGS", `Unknown activity kind "${args.kind}".`);
+    }
+
+    const id = await ctx.db.insert("Activity", {
+      kind: args.kind,
+      body,
+      dealId: args.dealId ?? null,
+      contactId: args.contactId ?? null,
+      companyId: args.companyId ?? null,
+      ownerId: ctx.auth.userId,
+      createdAt: new Date().toISOString(),
+    });
+
+    // Touching the deal keeps "last activity" honest without a second query.
+    if (args.dealId) {
+      await ctx.db.update("Deal", args.dealId, {
+        updatedAt: new Date().toISOString(),
+      });
+    }
+
+    return { ok: true, id: id as string } as const;
+  },
+});

package/templates/crm/functions/moveDeal.ts

@@ -0,0 +1,53 @@
+import { mutation, v } from "@pylonsync/functions";
+import { isValidStage, stageById } from "../lib/pipeline";
+
+/**
+ * Move a deal to another stage, and log the move on its timeline.
+ *
+ * A mutation rather than a plain `db.update` from the board, because two things
+ * have to happen together: the stage changes and the history records who moved
+ * it and when. A forecast you can't audit is a forecast nobody trusts.
+ *
+ * The stage is validated server-side — the board only ever sends known stages,
+ * but the endpoint is reachable directly and an unknown stage would strand the
+ * deal in a column that doesn't render.
+ */
+export default mutation<
+  { dealId: string; stage: string },
+  { ok: true }
+>({
+  auth: "user",
+  args: { dealId: v.id("Deal"), stage: v.string() },
+  async handler(ctx, args) {
+    if (!isValidStage(args.stage)) {
+      throw ctx.error("INVALID_ARGS", `Unknown stage "${args.stage}".`);
+    }
+
+    const deal = await ctx.db.get("Deal", args.dealId);
+    if (!deal) throw ctx.error("NOT_FOUND", "Deal not found.");
+
+    const from = String(deal.stage ?? "");
+    // Re-dropping a card in its own column reaches here on a fast double-drag.
+    // Nothing changed, so don't write a history entry claiming it did.
+    if (from === args.stage) return { ok: true } as const;
+
+    const now = new Date().toISOString();
+    await ctx.db.update("Deal", args.dealId, {
+      stage: args.stage,
+      updatedAt: now,
+    });
+
+    await ctx.db.insert("Activity", {
+      kind: "note",
+      body: `Moved from ${stageById(from)?.label ?? from} to ${
+        stageById(args.stage)?.label ?? args.stage
+      }`,
+      dealId: args.dealId,
+      companyId: deal.companyId ?? null,
+      ownerId: ctx.auth.userId,
+      createdAt: now,
+    });
+
+    return { ok: true } as const;
+  },
+});

package/templates/crm/functions/seedWorkspace.ts

@@ -0,0 +1,63 @@
+import { mutation } from "@pylonsync/functions";
+import { shapeSeed } from "../lib/seed";
+
+/**
+ * Fill a brand-new workspace with a realistic pipeline, once.
+ *
+ * An empty CRM demonstrates nothing — no board, no forecast, no sense of what
+ * the app is for. The client calls this after sign-in; it returns immediately
+ * if any company already exists, so it is safe to call on every load and can
+ * never duplicate the fixtures or touch real data.
+ *
+ * Delete this function and lib/seed.ts once the workspace has real customers.
+ */
+export default mutation<Record<string, never>, { seeded: boolean }>({
+  auth: "user",
+  args: {},
+  async handler(ctx) {
+    // The guard is "has anything at all", not "has the seed", so a workspace
+    // whose demo rows were deleted on purpose stays deleted.
+    const existing = await ctx.db.query("Company", { $limit: 1 });
+    if (existing.length > 0) return { seeded: false };
+
+    const seed = shapeSeed();
+    const owner = ctx.auth.userId;
+
+    const companyIds = new Map<string, string>();
+    for (const company of seed.companies) {
+      const id = await ctx.db.insert("Company", { ...company.row, ownerId: owner });
+      companyIds.set(company.key, id as string);
+    }
+
+    const contactIds = new Map<string, string>();
+    for (const contact of seed.contacts) {
+      const id = await ctx.db.insert("Contact", {
+        ...contact.row,
+        companyId: companyIds.get(contact.company) ?? null,
+        ownerId: owner,
+      });
+      contactIds.set(String(contact.row.name), id as string);
+    }
+
+    const dealIds = new Map<string, string>();
+    for (const deal of seed.deals) {
+      const id = await ctx.db.insert("Deal", {
+        ...deal.row,
+        companyId: companyIds.get(deal.company) ?? null,
+        contactId: contactIds.get(deal.contact) ?? null,
+        ownerId: owner,
+      });
+      dealIds.set(deal.title, id as string);
+    }
+
+    for (const activity of seed.activities) {
+      await ctx.db.insert("Activity", {
+        ...activity.row,
+        dealId: dealIds.get(activity.deal) ?? null,
+        ownerId: owner,
+      });
+    }
+
+    return { seeded: true };
+  },
+});

package/templates/crm/gitignore

@@ -0,0 +1,10 @@
+node_modules/
+.pylon/
+pylon.manifest.json
+pylon.client.ts
+web/dist/
+*.db
+*.db-*
+.env
+.env.local
+.DS_Store