create-bw-app 0.3.0

package/template/base/config/env.ts

@@ -0,0 +1,64 @@
+export type StarterEnvScope = "public" | "server";
+
+export type StarterEnvRequirement = {
+  key: string;
+  scope: StarterEnvScope;
+  description: string;
+  requiredFor: string[];
+};
+
+export type StarterEnvStatus = StarterEnvRequirement & {
+  present: boolean;
+};
+
+export const starterEnvRequirements: StarterEnvRequirement[] = [
+  {
+    key: "NEXT_PUBLIC_APP_URL",
+    scope: "public",
+    description: "Canonical base URL used by auth callbacks and platform links.",
+    requiredFor: ["core-auth"],
+  },
+  {
+    key: "NEXT_PUBLIC_SUPABASE_URL",
+    scope: "public",
+    description: "Supabase project URL for client-side and server-side API access.",
+    requiredFor: ["crm", "projects", "admin"],
+  },
+  {
+    key: "NEXT_PUBLIC_SUPABASE_ANON_KEY",
+    scope: "public",
+    description: "Supabase anonymous key for browser auth and RPC calls.",
+    requiredFor: ["crm", "projects", "admin"],
+  },
+  {
+    key: "SUPABASE_SERVICE_ROLE_KEY",
+    scope: "server",
+    description: "Server role key for privileged admin, CRM, and project actions.",
+    requiredFor: ["crm", "projects", "admin"],
+  },
+  {
+    key: "RESEND_API_KEY",
+    scope: "server",
+    description: "Email delivery key for auth and marketing-related server flows.",
+    requiredFor: ["core-auth"],
+  },
+];
+
+export function getStarterEnvStatus() {
+  return starterEnvRequirements.map(
+    (requirement) =>
+      ({
+        ...requirement,
+        present: typeof process.env[requirement.key] === "string" && process.env[requirement.key]!.trim().length > 0,
+      }) satisfies StarterEnvStatus,
+  );
+}
+
+export function isStarterEnvReady(requiredModules: string[]) {
+  const relevant = getStarterEnvStatus().filter((item) => item.requiredFor.some((moduleKey) => requiredModules.includes(moduleKey)));
+  return {
+    allReady: relevant.every((item) => item.present),
+    items: relevant,
+    missing: relevant.filter((item) => !item.present),
+  };
+}

package/template/base/config/modules.ts

@@ -0,0 +1,62 @@
+export type StarterModuleKey = "core-auth" | "crm" | "projects" | "admin";
+
+export type StarterModuleConfig = {
+  key: StarterModuleKey;
+  label: string;
+  description: string;
+  enabled: boolean;
+  packageName: string;
+  playgroundHref?: string;
+  placement: "core" | "primary" | "admin";
+};
+
+function envFlag(value: string | undefined, defaultValue: boolean) {
+  if (typeof value !== "string") return defaultValue;
+  const normalized = value.trim().toLowerCase();
+  if (["1", "true", "yes", "on"].includes(normalized)) return true;
+  if (["0", "false", "no", "off"].includes(normalized)) return false;
+  return defaultValue;
+}
+
+export const starterModuleConfig: StarterModuleConfig[] = [
+  {
+    key: "core-auth",
+    label: "Core Auth",
+    description: "Login, reset-password, callback URLs, and shared auth validation utilities.",
+    enabled: true,
+    packageName: "@brightweblabs/core-auth",
+    playgroundHref: "/playground/auth",
+    placement: "core",
+  },
+  {
+    key: "crm",
+    label: "CRM",
+    description: "Contacts, marketing audience, and CRM server/data layer.",
+    enabled: envFlag(process.env.NEXT_PUBLIC_ENABLE_CRM, true),
+    packageName: "@brightweblabs/module-crm",
+    playgroundHref: "/playground/crm",
+    placement: "primary",
+  },
+  {
+    key: "projects",
+    label: "Projects",
+    description: "Project portfolio, detail routes, and work-management server logic.",
+    enabled: envFlag(process.env.NEXT_PUBLIC_ENABLE_PROJECTS, true),
+    packageName: "@brightweblabs/module-projects",
+    playgroundHref: "/playground/projects",
+    placement: "primary",
+  },
+  {
+    key: "admin",
+    label: "Admin",
+    description: "User role governance, admin tools, and access-control surfaces.",
+    enabled: envFlag(process.env.NEXT_PUBLIC_ENABLE_ADMIN, true),
+    packageName: "@brightweblabs/module-admin",
+    playgroundHref: "/playground/admin",
+    placement: "admin",
+  },
+];
+
+export function getEnabledStarterModules() {
+  return starterModuleConfig.filter((moduleConfig) => moduleConfig.enabled);
+}

package/template/base/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/base/public/brand/logo-dark.svg

@@ -0,0 +1,7 @@
+<svg width="176" height="44" viewBox="0 0 176 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="44" height="44" rx="12" fill="#F5F4EC"/>
+  <path d="M12 30V14H21.72C25.24 14 27.68 16.08 27.68 19.24C27.68 21.78 26.22 23.63 23.99 24.32L29.3 30H24.9L20.15 24.86H15.8V30H12Z" fill="#102015"/>
+  <circle cx="32.5" cy="12.5" r="3.5" fill="#2C8A53"/>
+  <text x="58" y="19" fill="#F5F4EC" font-family="Georgia, serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
+  <text x="58" y="33" fill="#C8D0C9" font-family="'IBM Plex Sans', sans-serif" font-size="15">starter client</text>
+</svg>

package/template/base/public/brand/logo-light.svg

@@ -0,0 +1,7 @@
+<svg width="176" height="44" viewBox="0 0 176 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="44" height="44" rx="12" fill="#13251A"/>
+  <path d="M12 30V14H21.72C25.24 14 27.68 16.08 27.68 19.24C27.68 21.78 26.22 23.63 23.99 24.32L29.3 30H24.9L20.15 24.86H15.8V30H12Z" fill="#F5F4EC"/>
+  <circle cx="32.5" cy="12.5" r="3.5" fill="#71C48B"/>
+  <text x="58" y="19" fill="#13251A" font-family="Georgia, serif" font-size="11" letter-spacing="2">BRIGHTWEB</text>
+  <text x="58" y="33" fill="#516252" font-family="'IBM Plex Sans', sans-serif" font-size="15">starter client</text>
+</svg>

package/template/base/public/brand/logo-mark.svg

@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" rx="18" fill="#13251A"/>
+  <path d="M19 42V22H31.8C36.4 22 39.6 24.7 39.6 28.8C39.6 32.1 37.7 34.5 34.8 35.4L41.8 42H36L29.7 36H24V42H19ZM24 31.9H31.1C33.5 31.9 34.7 30.8 34.7 29C34.7 27.2 33.5 26.1 31.1 26.1H24V31.9Z" fill="#F5F4EC"/>
+  <circle cx="46.5" cy="18.5" r="4.5" fill="#71C48B"/>
+</svg>

package/template/base/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/template/modules/admin/app/api/admin/users/roles/route.ts

@@ -0,0 +1,6 @@
+export const dynamic = "force-dynamic";
+
+export async function POST(request: Request) {
+  const { handleAdminUsersRoleChangeRequest } = await import("@brightweblabs/module-admin");
+  return handleAdminUsersRoleChangeRequest(request);
+}

package/template/modules/admin/app/api/admin/users/route.ts

@@ -0,0 +1,6 @@
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  const { handleAdminUsersGetRequest } = await import("@brightweblabs/module-admin");
+  return handleAdminUsersGetRequest(request);
+}

package/template/modules/admin/app/playground/admin/page.tsx

@@ -0,0 +1,102 @@
+export const dynamic = "force-dynamic";
+
+function formatError(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "Unknown error";
+}
+
+export default async function AdminPlaygroundPage() {
+  try {
+    const { getAdminUsersPageData } = await import("@brightweblabs/module-admin");
+    const { users } = await getAdminUsersPageData();
+
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">Admin Module</p>
+            <h1>Admin users and roles playground</h1>
+            <p className="muted">
+              This route previews the shared admin governance module without relying on the BeGreen client app.
+            </p>
+          </div>
+        </article>
+
+        <article className="grid">
+          <div className="panel">
+            <div className="panel-inner">
+              <p className="status ok">Connected</p>
+              <h2>User governance snapshot</h2>
+              <ul className="list">
+                <li>Total users in page: {users.data.length}</li>
+                <li>Total users overall: {users.pagination.total}</li>
+                <li>Current page: {users.pagination.page}</li>
+                <li>Total pages: {users.pagination.totalPages}</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="panel">
+            <div className="panel-inner">
+              <h2>Role mix</h2>
+              <div className="code-box">
+                <pre>
+                  {JSON.stringify(
+                    users.data.reduce<Record<string, number>>((acc, row) => {
+                      acc[row.role] = (acc[row.role] ?? 0) + 1;
+                      return acc;
+                    }, {}),
+                    null,
+                    2,
+                  )}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner">
+            <h2>First admin users</h2>
+            <div className="code-box">
+              <pre>{JSON.stringify(users.data.slice(0, 5), null, 2)}</pre>
+            </div>
+          </div>
+        </article>
+      </>
+    );
+  } catch (error) {
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">Admin Module</p>
+            <h1>Admin users and roles playground</h1>
+            <p className="muted">
+              The admin package is wired, but this starter app still needs a configured client database and admin-ready
+              auth environment.
+            </p>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner stack">
+            <p className="status warn">Configuration required</p>
+            <div className="result-box">
+              <strong>Current error</strong>
+              <p>{formatError(error)}</p>
+            </div>
+            <ul className="list">
+              <li>Set the Supabase public URL and anon key.</li>
+              <li>Set the Supabase service role key.</li>
+              <li>Ensure the client database includes the admin role assignment tables and RPCs.</li>
+            </ul>
+          </div>
+        </article>
+      </>
+    );
+  }
+}

package/template/modules/crm/app/playground/crm/page.tsx

@@ -0,0 +1,103 @@
+export const dynamic = "force-dynamic";
+
+function formatError(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "Unknown error";
+}
+
+export default async function CrmPlaygroundPage() {
+  try {
+    const { getCrmDashboardData } = await import("@brightweblabs/module-crm");
+    const data = await getCrmDashboardData();
+
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">CRM Module</p>
+            <h1>CRM server/data playground</h1>
+            <p className="muted">
+              This route calls the external `@brightweblabs/module-crm` package directly and shows a thin data summary.
+            </p>
+          </div>
+        </article>
+
+        <article className="grid">
+          <div className="panel">
+            <div className="panel-inner">
+              <p className="status ok">Connected</p>
+              <h2>Snapshot</h2>
+              <ul className="list">
+                <li>Total contacts: {data.stats.total}</li>
+                <li>Organizations loaded: {data.organizations.length}</li>
+                <li>Timeline events: {data.statusLog.length}</li>
+                <li>Owner options: {data.ownerOptions.length}</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="panel">
+            <div className="panel-inner">
+              <h2>Statuses</h2>
+              <div className="code-box">
+                <pre>{JSON.stringify(data.stats.byStatus, null, 2)}</pre>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner">
+            <h2>First records</h2>
+            <div className="code-box">
+              <pre>
+                {JSON.stringify(
+                  {
+                    organizations: data.organizations.slice(0, 2),
+                    contacts: data.contacts.slice(0, 3),
+                    statusLog: data.statusLog.slice(0, 3),
+                  },
+                  null,
+                  2,
+                )}
+              </pre>
+            </div>
+          </div>
+        </article>
+      </>
+    );
+  } catch (error) {
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">CRM Module</p>
+            <h1>CRM server/data playground</h1>
+            <p className="muted">
+              The package is wired, but this sandbox still needs valid environment variables and database access.
+            </p>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner stack">
+            <p className="status warn">Configuration required</p>
+            <div className="result-box">
+              <strong>Current error</strong>
+              <p>{formatError(error)}</p>
+            </div>
+            <ul className="list">
+              <li>Set `NEXT_PUBLIC_APP_URL`.</li>
+              <li>Set `NEXT_PUBLIC_SUPABASE_URL`.</li>
+              <li>Set `NEXT_PUBLIC_SUPABASE_ANON_KEY`.</li>
+              <li>If you need CRM writes or email flows, also set the server-only keys in the platform repo.</li>
+            </ul>
+          </div>
+        </article>
+      </>
+    );
+  }
+}

package/template/modules/projects/app/playground/projects/page.tsx

@@ -0,0 +1,93 @@
+export const dynamic = "force-dynamic";
+
+function formatError(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return "Unknown error";
+}
+
+export default async function ProjectsPlaygroundPage() {
+  try {
+    const { getProjectsPortfolioPageData } = await import("@brightweblabs/module-projects");
+    const data = await getProjectsPortfolioPageData();
+
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">Projects Module</p>
+            <h1>Projects portfolio playground</h1>
+            <p className="muted">
+              This route calls the external `@brightweblabs/module-projects` package directly and shows a thin portfolio
+              snapshot for a starter client.
+            </p>
+          </div>
+        </article>
+
+        <article className="grid">
+          <div className="panel">
+            <div className="panel-inner">
+              <p className={`status ${data.schemaMissing ? "warn" : "ok"}`}>{data.schemaMissing ? "Schema missing" : "Connected"}</p>
+              <h2>Portfolio snapshot</h2>
+              <ul className="list">
+                <li>Total open projects: {data.portfolioStats.total}</li>
+                <li>At risk: {data.portfolioStats.atRisk}</li>
+                <li>Overdue: {data.portfolioStats.overdue}</li>
+                <li>Organizations loaded: {data.organizationOptions.length}</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="panel">
+            <div className="panel-inner">
+              <h2>Status distribution</h2>
+              <div className="code-box">
+                <pre>{JSON.stringify(data.portfolioStats, null, 2)}</pre>
+              </div>
+            </div>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner">
+            <h2>First project records</h2>
+            <div className="code-box">
+              <pre>{JSON.stringify(data.result.items.slice(0, 3), null, 2)}</pre>
+            </div>
+          </div>
+        </article>
+      </>
+    );
+  } catch (error) {
+    return (
+      <>
+        <article className="panel">
+          <div className="panel-inner">
+            <p className="eyebrow">Projects Module</p>
+            <h1>Projects portfolio playground</h1>
+            <p className="muted">
+              The package is wired, but this starter app still needs the client project infrastructure configured.
+            </p>
+          </div>
+        </article>
+
+        <article className="panel">
+          <div className="panel-inner stack">
+            <p className="status warn">Configuration required</p>
+            <div className="result-box">
+              <strong>Current error</strong>
+              <p>{formatError(error)}</p>
+            </div>
+            <ul className="list">
+              <li>Set the Supabase public URL and anon key.</li>
+              <li>Set the Supabase service role key for server access.</li>
+              <li>Ensure the projects schema exists in the target client database.</li>
+            </ul>
+          </div>
+        </article>
+      </>
+    );
+  }
+}

package/template/site/base/app/globals.css

@@ -0,0 +1,68 @@
+@import "tailwindcss";
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-display: var(--font-display);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-panel: var(--panel);
+  --color-accent: var(--accent);
+  --color-accent-soft: var(--accent-soft);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+  --background: #f5efe6;
+  --foreground: #1e1e1a;
+  --muted-foreground: #5d5b55;
+  --border: rgba(32, 31, 27, 0.12);
+  --panel: rgba(255, 251, 246, 0.72);
+  --accent: #ab6436;
+  --accent-soft: rgba(171, 100, 54, 0.12);
+  --ring: rgba(171, 100, 54, 0.35);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(216, 168, 124, 0.18), transparent 22rem),
+    radial-gradient(circle at 85% 15%, rgba(81, 111, 95, 0.14), transparent 16rem),
+    linear-gradient(180deg, #fcf9f4 0%, var(--background) 46%, #ede4d4 100%);
+  color: var(--foreground);
+  font-family: var(--font-sans), sans-serif;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(32, 31, 27, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(32, 31, 27, 0.03) 1px, transparent 1px);
+  background-size: 7rem 7rem;
+  mask-image: radial-gradient(circle at center, black, transparent 80%);
+  opacity: 0.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+::selection {
+  background: rgba(171, 100, 54, 0.18);
+}

package/template/site/base/app/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import { siteConfig } from "@/config/site";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: siteConfig.name,
+  description: siteConfig.description,
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}