@pylonsync/create-pylon 0.3.269 → 0.3.270

package/templates/default/app/dashboard/members/page.tsx

@@ -0,0 +1,37 @@
+import React, { use } from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { Members } from "../dashboard-client";
+
+export const metadata: Metadata = {
+  title: "Members — Acme",
+  robots: "noindex",
+};
+
+// `/dashboard/members` — the active org's roster + invites. The roster (with
+// real emails) is loaded client-side from the framework's org-members endpoint;
+// invites are gated to owners/admins both here and on the server.
+export default function MembersPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = auth.tenant_id
+    ? use(serverData.get<{ name?: string }>("Org", auth.tenant_id))
+    : null;
+  return (
+    <DashboardShell
+      active="members"
+      title="Members"
+      userEmail={me?.email ?? ""}
+      orgName={org?.name}
+    >
+      <Members
+        tenantId={auth.tenant_id}
+        currentUserId={auth.user_id}
+        role={auth.roles?.[0] ?? ""}
+      />
+    </DashboardShell>
+  );
+}

package/templates/default/app/dashboard/page.tsx

@@ -0,0 +1,64 @@
+import React, { use } from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { DashboardShell } from "@/components/dashboard-shell";
+import {
+  Overview,
+  type Project,
+  type OrgMemberRow,
+  type Subscription,
+} from "./dashboard-client";
+
+export const metadata: Metadata = {
+  title: "Dashboard — Acme",
+  robots: "noindex",
+};
+
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate, then the
+// active org (`auth.tenant_id`) + this org's rows are read during the render
+// via `serverData` + React 19 `use()` — resolved server-side and replayed on
+// hydration, so the dashboard paints with real data on the first byte (no
+// client fetch, no empty-state flash). The marketing nav/footer are suppressed
+// for /dashboard in the root layout; the shell is the only chrome here.
+export default function DashboardPage({
+  auth,
+  response,
+  serverData,
+}: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = auth.tenant_id
+    ? use(serverData.get<{ name?: string }>("Org", auth.tenant_id))
+    : null;
+  const projects = use(serverData.list<Project>("Project"));
+  const members = use(serverData.list<OrgMemberRow>("OrgMember"));
+  // The OrgMember read policy returns this user's memberships across every org,
+  // so scope the count to the active workspace.
+  const memberCount = members.filter((m) => m.orgId === auth.tenant_id).length;
+  // Active-plan badge from the workspace's Stripe subscription (Free until one
+  // exists). Scoped to the active tenant by the plugin's read policy.
+  const subs = auth.tenant_id
+    ? use(serverData.list<Subscription>("StripeSubscription"))
+    : [];
+  const active = subs.find((s) =>
+    ["active", "trialing", "past_due"].includes(s.status),
+  );
+  const plan = active ? active.plan : "free";
+  return (
+    <DashboardShell
+      active="overview"
+      title="Overview"
+      userEmail={me?.email ?? ""}
+      orgName={org?.name}
+    >
+      <Overview
+        tenantId={auth.tenant_id}
+        projects={projects}
+        memberCount={memberCount}
+        plan={plan}
+      />
+    </DashboardShell>
+  );
+}

package/templates/default/app/dashboard/projects/page.tsx

@@ -0,0 +1,37 @@
+import React, { use } from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { DashboardShell } from "@/components/dashboard-shell";
+import { Projects, type Project } from "../dashboard-client";
+
+export const metadata: Metadata = {
+  title: "Projects — Acme",
+  robots: "noindex",
+};
+
+// `/dashboard/projects` — this org's projects, server-resolved via `use()` then
+// kept live + optimistic by `db` on the client.
+export default function ProjectsPage({
+  auth,
+  response,
+  serverData,
+}: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = auth.tenant_id
+    ? use(serverData.get<{ name?: string }>("Org", auth.tenant_id))
+    : null;
+  const projects = use(serverData.list<Project>("Project"));
+  return (
+    <DashboardShell
+      active="projects"
+      title="Projects"
+      userEmail={me?.email ?? ""}
+      orgName={org?.name}
+    >
+      <Projects tenantId={auth.tenant_id} initial={projects} />
+    </DashboardShell>
+  );
+}

package/templates/default/app/dashboard/settings/page.tsx

@@ -0,0 +1,45 @@
+import React, { use } from "react";
+import { type Metadata, type PageProps } from "@pylonsync/react";
+import { DashboardShell } from "@/components/dashboard-shell";
+import {
+  Settings,
+  type OrgInfo,
+  type OrgMemberRow,
+} from "../dashboard-client";
+
+export const metadata: Metadata = {
+  title: "Settings — Acme",
+  robots: "noindex",
+};
+
+// `/dashboard/settings` — workspace settings: rename (owners/admins) and delete
+// (owners). The active org + member count are resolved server-side so the page
+// paints with real values on the first byte.
+export default function SettingsPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const org = auth.tenant_id
+    ? use(serverData.get<OrgInfo>("Org", auth.tenant_id))
+    : null;
+  const members = use(serverData.list<OrgMemberRow>("OrgMember"));
+  const memberCount = members.filter(
+    (m) => m.orgId === auth.tenant_id,
+  ).length;
+  return (
+    <DashboardShell
+      active="settings"
+      title="Settings"
+      userEmail={me?.email ?? ""}
+      orgName={org?.name}
+    >
+      <Settings
+        org={org}
+        role={auth.roles?.[0] ?? ""}
+        memberCount={memberCount}
+      />
+    </DashboardShell>
+  );
+}

package/templates/{ssr → default}/app/globals.css

@@ -6,6 +6,10 @@
    markup elsewhere. */
 @source "../app/**/*.{tsx,ts,jsx,js}";
 @source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+/* @pylonsync/client ships raw .tsx (OrganizationSwitcher, etc.) with Tailwind
+   classes — scan it too or its dropdowns/menus render unstyled. */
+@source "../node_modules/@pylonsync/client/**/*.{tsx,ts,jsx,js}";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -15,6 +19,11 @@
    on <html>. */
 :root {
   --radius: 0.625rem;
+  /* Brand accent (blue) + surfaces used by the marketing pages. Re-theme the
+     whole landing page by editing these three. */
+  --brand: #2563eb;
+  --brand-soft: #e8f0fe;
+  --paper: #fafafa;
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -105,6 +114,9 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-soft: var(--brand-soft);
+  --color-paper: var(--paper);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -132,6 +144,8 @@
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
   }
   button {
     cursor: pointer;