create-crm-starter 0.1.0

package/template/extras/auth-better-auth/src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { signIn } from '@/lib/auth-client';
+
+export default function SignInPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    const result = await signIn.email({ email, password });
+    setLoading(false);
+    if (result.error) {
+      setError(result.error.message ?? 'Sign-in failed');
+      return;
+    }
+    router.push('/dashboard');
+    router.refresh();
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Welcome back. Enter your credentials.</CardDescription>
+      </CardHeader>
+      <form onSubmit={onSubmit}>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
+          </div>
+          {error && <p className="text-destructive text-sm">{error}</p>}
+        </CardContent>
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing in...' : 'Sign in'}
+          </Button>
+          <p className="text-muted-foreground text-center text-sm">
+            No account?{' '}
+            <Link href="/sign-up" className="text-brand underline">
+              Sign up
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

package/template/extras/auth-better-auth/src/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { signUp } from '@/lib/auth-client';
+
+export default function SignUpPage() {
+  const router = useRouter();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    const result = await signUp.email({ email, password, name });
+    setLoading(false);
+    if (result.error) {
+      setError(result.error.message ?? 'Sign-up failed');
+      return;
+    }
+    router.push('/dashboard');
+    router.refresh();
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Create your account</CardTitle>
+        <CardDescription>Get started with your CRM.</CardDescription>
+      </CardHeader>
+      <form onSubmit={onSubmit}>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" required value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password (min 8 chars)</Label>
+            <Input id="password" type="password" required minLength={8} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" />
+          </div>
+          {error && <p className="text-destructive text-sm">{error}</p>}
+        </CardContent>
+        <CardFooter className="flex flex-col gap-3">
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Creating account...' : 'Create account'}
+          </Button>
+          <p className="text-muted-foreground text-center text-sm">
+            Have an account?{' '}
+            <Link href="/sign-in" className="text-brand underline">
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

package/template/extras/auth-better-auth/src/app/(dashboard)/admin/page.tsx

@@ -0,0 +1,68 @@
+import { asc } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { user as userTable } from '@/db/schema';
+import { requireRole } from '@/lib/auth-server';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { formatDate } from '@/lib/utils';
+
+export default async function AdminPage() {
+  // Gate: only admins reach this page (requireRole redirects others).
+  await requireRole('admin');
+
+  const members = await db
+    .select({
+      id: userTable.id,
+      name: userTable.name,
+      email: userTable.email,
+      role: userTable.role,
+      createdAt: userTable.createdAt,
+    })
+    .from(userTable)
+    .orderBy(asc(userTable.createdAt));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Admin</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Team members and their roles. {members.length} user{members.length === 1 ? '' : 's'}.
+        </p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Team members</CardTitle>
+          <CardDescription>
+            Roles control access. The first user to sign up (or the owner email set at setup)
+            is the admin. To change a role today, update the user&apos;s <code>role</code> column in
+            your database; an in-app role editor is a good next addition.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground bg-muted/50 text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Name</th>
+                <th className="px-4 py-3 text-left font-medium">Email</th>
+                <th className="px-4 py-3 text-left font-medium">Role</th>
+                <th className="px-4 py-3 text-left font-medium">Joined</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {members.map((m) => (
+                <tr key={m.id}>
+                  <td className="px-4 py-3 font-medium">{m.name}</td>
+                  <td className="text-muted-foreground px-4 py-3">{m.email}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={m.role === 'admin' ? 'default' : 'secondary'}>{m.role}</Badge>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3">{formatDate(m.createdAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/auth-better-auth/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { requireUser } from '@/lib/auth-server';
+
+export default async function DashboardPage() {
+  const user = await requireUser();
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          Welcome back{user.name ? `, ${user.name}` : ''}.
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Your CRM dashboard. Add modules with{' '}
+          <code className="bg-muted rounded px-1.5 py-0.5">npx create-crm-starter add &lt;module&gt;</code>.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardDescription>Open jobs</CardDescription>
+            <CardTitle className="text-4xl">0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardDescription>Revenue this month</CardDescription>
+            <CardTitle className="text-4xl">$0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardDescription>AR outstanding</CardDescription>
+            <CardTitle className="text-4xl">$0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/extras/auth-better-auth/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { requireUser } from '@/lib/auth-server';
+import { SignOutButton } from '@/components/sign-out-button';
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const user = await requireUser();
+  return (
+    <div className="grid min-h-screen grid-cols-[14rem_1fr]">
+      <aside className="border-border bg-muted/30 border-r p-4">
+        <Link href="/dashboard" className="mb-6 block text-lg font-semibold">
+          CRM
+        </Link>
+        <nav className="flex flex-col gap-1 text-sm">
+          <Link href="/dashboard" className="hover:bg-accent rounded-md px-3 py-2">Dashboard</Link>
+          <Link href="/customers" className="hover:bg-accent rounded-md px-3 py-2">Customers</Link>
+          <Link href="/jobs" className="hover:bg-accent rounded-md px-3 py-2">Jobs</Link>
+          <Link href="/calendar" className="hover:bg-accent rounded-md px-3 py-2">Calendar</Link>
+          <Link href="/estimates" className="hover:bg-accent rounded-md px-3 py-2">Estimates</Link>
+          <Link href="/invoices" className="hover:bg-accent rounded-md px-3 py-2">Invoices</Link>
+          <Link href="/price-book" className="hover:bg-accent rounded-md px-3 py-2">Price Book</Link>
+          {user.role === 'admin' && (
+            <Link href="/admin" className="hover:bg-accent rounded-md px-3 py-2">Admin</Link>
+          )}
+        </nav>
+      </aside>
+      <div className="flex flex-col">
+        <header className="border-border flex h-14 items-center justify-between border-b px-6">
+          <div className="text-muted-foreground text-sm">
+            Signed in as <span className="font-medium text-foreground">{user.email}</span> ({user.role})
+          </div>
+          <SignOutButton />
+        </header>
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

package/template/extras/auth-better-auth/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { toNextJsHandler } from 'better-auth/next-js';
+import { auth } from '@/lib/auth';
+
+export const { POST, GET } = toNextJsHandler(auth);

package/template/extras/auth-better-auth/src/components/sign-out-button.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { signOut } from '@/lib/auth-client';
+
+export function SignOutButton() {
+  const router = useRouter();
+  async function handle() {
+    await signOut();
+    router.push('/');
+    router.refresh();
+  }
+  return (
+    <Button variant="outline" size="sm" onClick={handle}>
+      Sign out
+    </Button>
+  );
+}

package/template/extras/auth-better-auth/src/lib/auth-client.ts

@@ -0,0 +1,7 @@
+import { createAuthClient } from 'better-auth/react';
+
+export const authClient = createAuthClient({
+  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL ?? 'http://localhost:3000',
+});
+
+export const { signIn, signUp, signOut, useSession } = authClient;

package/template/extras/auth-better-auth/src/lib/auth-server.ts

@@ -0,0 +1,51 @@
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { auth } from './auth';
+
+export type AppRole = 'admin' | 'dispatcher' | 'technician' | 'csr' | 'sales' | 'accountant';
+
+export interface AppUser {
+  id: string;
+  email: string;
+  name: string | null;
+  role: AppRole;
+}
+
+function normalizeRole(role: string | null | undefined): AppRole {
+  switch (role) {
+    case 'admin':
+    case 'dispatcher':
+    case 'technician':
+    case 'csr':
+    case 'sales':
+    case 'accountant':
+      return role;
+    default:
+      return 'csr';
+  }
+}
+
+export async function getCurrentUser(): Promise<AppUser | null> {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session?.user) return null;
+  const u = session.user as { id: string; email: string; name: string | null; role?: string | null };
+  return {
+    id: u.id,
+    email: u.email,
+    name: u.name,
+    role: normalizeRole(u.role),
+  };
+}
+
+export async function requireUser(): Promise<AppUser> {
+  const u = await getCurrentUser();
+  if (!u) redirect('/sign-in');
+  return u;
+}
+
+export async function requireRole(role: AppRole | AppRole[]): Promise<AppUser> {
+  const u = await requireUser();
+  const allowed = Array.isArray(role) ? role : [role];
+  if (u.role === 'admin' || allowed.includes(u.role)) return u;
+  redirect('/dashboard');
+}

package/template/extras/auth-better-auth/src/lib/auth.ts

@@ -0,0 +1,76 @@
+import { betterAuth } from 'better-auth';
+import { drizzleAdapter } from 'better-auth/adapters/drizzle';
+import { nextCookies } from 'better-auth/next-js';
+import { sql } from 'drizzle-orm';
+import { db } from '@/db/client';
+import * as schema from '@/db/schema';
+
+/**
+ * Decides the role a newly-created user should get. The business owner must
+ * land as 'admin' on first sign-up, otherwise they can't reach admin UI.
+ * Two triggers, in order:
+ *   1. Their email matches ADMIN_BOOTSTRAP_EMAIL (set at scaffold time from
+ *      the owner email you entered).
+ *   2. They're the very first user in the database (robust fallback).
+ * Everyone else defaults to 'csr'.
+ */
+async function resolveSignupRole(email: string): Promise<'admin' | 'csr'> {
+  const bootstrapEmail = process.env.ADMIN_BOOTSTRAP_EMAIL?.trim().toLowerCase();
+  if (bootstrapEmail && email.trim().toLowerCase() === bootstrapEmail) {
+    return 'admin';
+  }
+  try {
+    const [{ count }] = await db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(schema.user);
+    if (count === 0) return 'admin';
+  } catch {
+    /* table may not exist yet during setup — fall through to csr */
+  }
+  return 'csr';
+}
+
+export const auth = betterAuth({
+  database: drizzleAdapter(db, {
+    provider: 'pg',
+    schema: {
+      user: schema.user,
+      session: schema.session,
+      account: schema.account,
+      verification: schema.verification,
+    },
+  }),
+  emailAndPassword: {
+    enabled: true,
+    autoSignIn: true,
+  },
+  user: {
+    additionalFields: {
+      role: {
+        type: 'string',
+        defaultValue: 'csr',
+        required: false,
+      },
+    },
+  },
+  databaseHooks: {
+    user: {
+      create: {
+        before: async (user) => {
+          const role = await resolveSignupRole(user.email);
+          return { data: { ...user, role } };
+        },
+      },
+    },
+  },
+  session: {
+    expiresIn: 60 * 60 * 24 * 7, // 7 days
+    updateAge: 60 * 60 * 24, // 1 day
+  },
+  // The mobile-api installer injects `trustedOrigins` + bearer()/expo()
+  // plugins here when you scaffold the field-tech iPhone app. nextCookies()
+  // must remain LAST in the plugins array.
+  plugins: [nextCookies()], // <crm-starter:auth-plugins>
+});
+
+export type Session = typeof auth.$Infer.Session;

package/template/extras/auth-better-auth/src/middleware.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSessionCookie } from 'better-auth/cookies';
+
+const PROTECTED = [/^\/dashboard(\/.*)?$/, /^\/admin(\/.*)?$/, /^\/customers(\/.*)?$/, /^\/jobs(\/.*)?$/, /^\/calendar(\/.*)?$/, /^\/estimates(\/.*)?$/, /^\/invoices(\/.*)?$/];
+
+export async function middleware(req: NextRequest) {
+  const { pathname } = req.nextUrl;
+  const needsAuth = PROTECTED.some((re) => re.test(pathname));
+  if (!needsAuth) return NextResponse.next();
+
+  const session = getSessionCookie(req);
+  if (!session) {
+    const url = req.nextUrl.clone();
+    url.pathname = '/sign-in';
+    url.searchParams.set('redirect', pathname);
+    return NextResponse.redirect(url);
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    '/((?!_next|api/auth|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|webmanifest)).*)',
+  ],
+};

package/template/extras/auth-clerk/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="bg-muted/30 flex min-h-screen items-center justify-center p-6">
+      {children}
+    </main>
+  );
+}

package/template/extras/auth-clerk/src/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from '@clerk/nextjs';
+
+export default function SignInPage() {
+  return <SignIn />;
+}

package/template/extras/auth-clerk/src/app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from '@clerk/nextjs';
+
+export default function SignUpPage() {
+  return <SignUp />;
+}

package/template/extras/auth-clerk/src/app/(dashboard)/admin/page.tsx

@@ -0,0 +1,37 @@
+import { requireRole } from '@/lib/auth';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default async function AdminPage() {
+  // Gate: only admins reach this page (requireRole redirects others).
+  const user = await requireRole('admin');
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Admin</h1>
+        <p className="text-muted-foreground mt-1 text-sm">Signed in as {user.email}</p>
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>Team & roles</CardTitle>
+          <CardDescription>
+            On the Clerk stack, user roles live in each user&apos;s{' '}
+            <code>publicMetadata.role</code>. Manage team members in the Clerk
+            dashboard, and set <code>{'{ "role": "admin" }'}</code> (or dispatcher,
+            technician, csr, sales, accountant) in their public metadata.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-muted-foreground space-y-2 text-sm">
+          <p>
+            To make yourself admin: open the Clerk dashboard → Users → your user →
+            Metadata → Public → add <code>{'{ "role": "admin" }'}</code>.
+          </p>
+          <p>
+            A full in-app team manager (listing users + editing roles via the Clerk
+            API) is a good next addition.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/auth-clerk/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { requireUser } from '@/lib/auth';
+
+export default async function DashboardPage() {
+  const user = await requireUser();
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          Welcome back{user.firstName ? `, ${user.firstName}` : ''}.
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Your CRM dashboard. Add modules with{' '}
+          <code className="bg-muted rounded px-1.5 py-0.5">npx create-crm-starter add &lt;module&gt;</code>.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardDescription>Open jobs</CardDescription>
+            <CardTitle className="text-4xl">0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardDescription>Revenue this month</CardDescription>
+            <CardTitle className="text-4xl">$0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardDescription>AR outstanding</CardDescription>
+            <CardTitle className="text-4xl">$0</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground text-xs">No data yet.</CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/extras/auth-clerk/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,57 @@
+import Link from 'next/link';
+import { UserButton } from '@clerk/nextjs';
+import { requireUser } from '@/lib/auth';
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const user = await requireUser();
+  return (
+    <div className="grid min-h-screen grid-cols-[14rem_1fr]">
+      <aside className="border-border bg-muted/30 border-r p-4">
+        <Link href="/dashboard" className="mb-6 block text-lg font-semibold">
+          CRM
+        </Link>
+        <nav className="flex flex-col gap-1 text-sm">
+          <Link href="/dashboard" className="hover:bg-accent rounded-md px-3 py-2">
+            Dashboard
+          </Link>
+          <Link href="/customers" className="hover:bg-accent rounded-md px-3 py-2">
+            Customers
+          </Link>
+          <Link href="/jobs" className="hover:bg-accent rounded-md px-3 py-2">
+            Jobs
+          </Link>
+          <Link href="/calendar" className="hover:bg-accent rounded-md px-3 py-2">
+            Calendar
+          </Link>
+          <Link href="/estimates" className="hover:bg-accent rounded-md px-3 py-2">
+            Estimates
+          </Link>
+          <Link href="/invoices" className="hover:bg-accent rounded-md px-3 py-2">
+            Invoices
+          </Link>
+          <Link href="/price-book" className="hover:bg-accent rounded-md px-3 py-2">
+            Price Book
+          </Link>
+          {user.role === 'admin' && (
+            <Link href="/admin" className="hover:bg-accent rounded-md px-3 py-2">
+              Admin
+            </Link>
+          )}
+        </nav>
+      </aside>
+      <div className="flex flex-col">
+        <header className="border-border flex h-14 items-center justify-between border-b px-6">
+          <div className="text-muted-foreground text-sm">
+            Signed in as <span className="font-medium text-foreground">{user.email}</span> ({user.role})
+          </div>
+          <UserButton afterSignOutUrl="/" />
+        </header>
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  );
+}