Getting Started with Fabrk: The Complete Setup Guide

$node --version
$# Should output v22.x.x or higher

$# Using nvm (Node Version Manager)
$nvm install 22
$nvm use 22
$nvm alias default 22

$# Using fnm (Fast Node Manager) - recommended for speed
$fnm install 22
$fnm use 22
$fnm default 22

$# Using Homebrew on macOS
$brew install node@22

$# Check if PostgreSQL is installed
$psql --version
$# Should output psql (PostgreSQL) 15.x or higher

$# Using Homebrew
$brew install postgresql@15
$brew services start postgresql@15

$# Add to PATH (add to your .zshrc or .bashrc)
$export PATH="/opt/homebrew/opt/postgresql@15/bin:$PATH"

$# Add PostgreSQL repository
$sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
$wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
$sudo apt-get update
$sudo apt-get install postgresql-15

$npm --version
$# Should output 10.x.x or higher

$# If you need to upgrade npm manually
$npm install -g npm@latest

$git --version
$# Should output git version 2.x.x

$# macOS
$brew install git

$# Ubuntu/Debian
$sudo apt-get install git

$# Windows
$# Download from https://git-scm.com/download/win

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "prisma.prisma",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-typescript-next"
  ]
}

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "tailwindCSS.experimental.classRegex": [
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

$# Check Docker installation
$docker --version
$docker-compose --version

$# macOS/Windows: Download Docker Desktop
$# https://www.docker.com/products/docker-desktop

$# Linux: Install Docker Engine
$curl -fsSL https://get.docker.com -o get-docker.sh
$sudo sh get-docker.sh

$npm install -g vercel
$vercel login

$# Clone with a custom project name
$git clone https://github.com/fabrk/fabrk-dev.git my-saas-app
$cd my-saas-app

$# Or clone with default name
$git clone https://github.com/fabrk/fabrk-dev.git
$cd fabrk-dev

$npm install

$# Clear npm cache and reinstall
$rm -rf node_modules package-lock.json
$npm cache clean --force
$npm install

$# Alternative: Use legacy peer deps
$npm install --legacy-peer-deps

$npm run setup

$npm run setup -- --dry-run

$# Copy environment template
$cp .env.example .env.local

$# Edit with your preferred editor
$code .env.local

$# Install PostgreSQL
$brew install postgresql@15
$brew services start postgresql@15

$# Create database
$createdb my_saas_dev

$# Verify connection
$psql -d my_saas_dev -c "SELECT version();"

$DATABASE_URL="postgresql://$(whoami)@localhost:5432/my_saas_dev"

version: '3.8'

services:
  db:
    image: postgres:16-alpine
    container_name: fabrk_postgres
    restart: unless-stopped
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: my_saas_dev
    ports:
      - '5432:5432'
    volumes:
      - postgres_data:/var/lib/postgresql/data
      - ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init.sql:ro
    healthcheck:
      test: ['CMD-SHELL', 'pg_isready -U postgres']
      interval: 10s
      timeout: 5s
      retries: 5

  # Optional: pgAdmin for visual database management
  pgadmin:
    image: dpage/pgadmin4:latest
    container_name: fabrk_pgadmin
    restart: unless-stopped
    environment:
      PGADMIN_DEFAULT_EMAIL: admin@localhost.com
      PGADMIN_DEFAULT_PASSWORD: admin
      PGADMIN_CONFIG_SERVER_MODE: 'False'
    ports:
      - '5050:80'
    depends_on:
      - db
    volumes:
      - pgadmin_data:/var/lib/pgadmin

volumes:
  postgres_data:
  pgadmin_data:

$# Start in background
$docker-compose up -d

$# View logs
$docker-compose logs -f db

$# Stop services
$docker-compose down

$# Stop and remove volumes (reset data)
$docker-compose down -v

$DATABASE_URL="postgresql://postgres:postgres@localhost:5432/my_saas_dev"

$DATABASE_URL="postgres://default:xxxxx@region-postgres.vercel-storage.com:5432/verceldb?sslmode=require"

$# Link to Vercel project
$vercel link

$# Pull environment variables
$vercel env pull .env.local

$DATABASE_URL="postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true"

$# For migrations (direct connection)
$DIRECT_URL="postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:5432/postgres"

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

$DATABASE_URL="postgresql://user:password@ep-cool-name-123456.us-east-2.aws.neon.tech/neondb?sslmode=require"

$DATABASE_URL="postgresql://postgres:xxxxx@containers-us-west-123.railway.app:5432/railway"

$# =============================================================================
$# FABRK ENVIRONMENT CONFIGURATION
$# =============================================================================
$# Copy this file to .env.local and fill in your values
$# NEVER commit .env.local to version control
$# =============================================================================

$# =============================================================================
$# DATABASE
$# =============================================================================
$# PostgreSQL connection string
$# Format: postgresql://USER:PASSWORD@HOST:PORT/DATABASE
$# Add ?sslmode=require for cloud databases
$DATABASE_URL="postgresql://postgres:postgres@localhost:5432/my_saas_dev"

$# Direct connection URL (for Supabase with connection pooling)
$# DIRECT_URL="postgresql://..."

$# =============================================================================
$# AUTHENTICATION
$# =============================================================================
$# NextAuth secret - REQUIRED
$# Generate with: openssl rand -base64 32
$# Must be at least 32 characters
$NEXTAUTH_SECRET="K7gJ9mP2xYvNqR5sT8wC3bF6hA1dE4iL0oU7yZn="

$# Canonical URL for authentication callbacks
$# Development: http://localhost:3000
$# Production: https://yourdomain.com
$NEXTAUTH_URL="http://localhost:3000"

$# Trust host header (set to true for proxied deployments)
$AUTH_TRUST_HOST="true"

$# =============================================================================
$# OAUTH PROVIDERS (Optional)
$# =============================================================================
$# GitHub OAuth
$# Create at: https://github.com/settings/developers
$AUTH_GITHUB_ID=""
$AUTH_GITHUB_SECRET=""

$# Google OAuth
$# Create at: https://console.cloud.google.com/apis/credentials
$AUTH_GOOGLE_ID=""
$AUTH_GOOGLE_SECRET=""

$# Discord OAuth
$# Create at: https://discord.com/developers/applications
$AUTH_DISCORD_ID=""
$AUTH_DISCORD_SECRET=""

$# =============================================================================
$# APPLICATION
$# =============================================================================
$# Public URL of your application
$# Used for generating absolute URLs (emails, webhooks, etc.)
$NEXT_PUBLIC_APP_URL="http://localhost:3000"

$# Application name displayed in UI and emails
$NEXT_PUBLIC_APP_NAME="My SaaS"

$# Application description for SEO
$NEXT_PUBLIC_APP_DESCRIPTION="A modern SaaS application built with Fabrk"

$# =============================================================================
$# EMAIL (Resend - Recommended)
$# =============================================================================
$# API key from: https://resend.com/api-keys
$RESEND_API_KEY=""

$# Verified sender email address
$# Must be verified in Resend dashboard
$EMAIL_FROM="noreply@yourdomain.com"

$# =============================================================================
$# PAYMENTS - STRIPE
$# =============================================================================
$# Secret key from: https://dashboard.stripe.com/apikeys
$# Use sk_test_... for development, sk_live_... for production
$STRIPE_SECRET_KEY=""

$# Publishable key (safe to expose in browser)
$NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""

$# Webhook secret from: https://dashboard.stripe.com/webhooks
$# Generate with: stripe listen --forward-to localhost:3000/api/stripe/webhook
$STRIPE_WEBHOOK_SECRET=""

$# Stripe Price IDs for your subscription plans
$# Create at: https://dashboard.stripe.com/products
$STRIPE_PRICE_ID_STARTER=""
$STRIPE_PRICE_ID_PRO=""
$STRIPE_PRICE_ID_ENTERPRISE=""

$# =============================================================================
$# PAYMENTS - POLAR (Alternative)
$# =============================================================================
$# POLAR_ACCESS_TOKEN=""
$# POLAR_ORGANIZATION_ID=""
$# POLAR_WEBHOOK_SECRET=""
$# NEXT_PUBLIC_POLAR_ORGANIZATION_ID=""

$# =============================================================================
$# PAYMENTS - LEMONSQUEEZY (Alternative)
$# =============================================================================
$# LEMONSQUEEZY_API_KEY=""
$# LEMONSQUEEZY_STORE_ID=""
$# LEMONSQUEEZY_WEBHOOK_SECRET=""

$# =============================================================================
$# AI FEATURES (Optional)
$# =============================================================================
$# Anthropic API for AI features
$# Get key from: https://console.anthropic.com/
$ANTHROPIC_API_KEY=""

$# AI daily budget per user (in USD)
$AI_DAILY_BUDGET="5.00"

$# =============================================================================
$# ANALYTICS (Optional)
$# =============================================================================
$# Vercel Analytics
$NEXT_PUBLIC_VERCEL_ANALYTICS_ID=""

$# PostHog
$NEXT_PUBLIC_POSTHOG_KEY=""
$NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com"

$# =============================================================================
$# FEATURE FLAGS (Optional)
$# =============================================================================
$# Enable/disable features
$NEXT_PUBLIC_ENABLE_BLOG="true"
$NEXT_PUBLIC_ENABLE_CHANGELOG="true"
$NEXT_PUBLIC_ENABLE_AI_FEATURES="false"

$# =============================================================================
$# DEVELOPMENT
$# =============================================================================
$# Set to "development" for local, "production" for deployed
$NODE_ENV="development"

$# Enable debug logging
$DEBUG="false"

$# Generate NEXTAUTH_SECRET
$openssl rand -base64 32

$# Alternative using Node.js
$node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

$# Generate webhook secrets
$openssl rand -hex 32

// src/lib/env/index.ts
import { z } from 'zod';

const envSchema = z.object({
  // Required
  DATABASE_URL: z.string().url(),
  NEXTAUTH_SECRET: z.string().min(32),
  NEXTAUTH_URL: z.string().url(),
  NEXT_PUBLIC_APP_URL: z.string().url(),

  // Optional with defaults
  NEXT_PUBLIC_APP_NAME: z.string().default('Fabrk'),
  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),

  // Conditional (required in production)
  RESEND_API_KEY: z.string().optional(),
  STRIPE_SECRET_KEY: z.string().optional(),
});

export const env = envSchema.parse(process.env);

$npm run db:push

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

// ============================================================================
// AUTHENTICATION MODELS
// ============================================================================

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  password      String?   // Hashed password for credentials auth
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt

  accounts      Account[]
  sessions      Session[]
  memberships   OrganizationMember[]
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

// ============================================================================
// ORGANIZATION MODELS
// ============================================================================

model Organization {
  id        String   @id @default(cuid())
  name      String
  slug      String   @unique
  image     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  members       OrganizationMember[]
  subscription  Subscription?
  invitations   Invitation[]
  apiKeys       ApiKey[]
}

model OrganizationMember {
  id             String       @id @default(cuid())
  role           MemberRole   @default(MEMBER)
  userId         String
  organizationId String
  createdAt      DateTime     @default(now())

  user         User         @relation(fields: [userId], references: [id], onDelete: Cascade)
  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)

  @@unique([userId, organizationId])
}

enum MemberRole {
  OWNER
  ADMIN
  MEMBER
}

model Invitation {
  id             String       @id @default(cuid())
  email          String
  role           MemberRole   @default(MEMBER)
  token          String       @unique
  expires        DateTime
  organizationId String
  invitedById    String?
  createdAt      DateTime     @default(now())

  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)

  @@unique([email, organizationId])
}

// ============================================================================
// BILLING MODELS
// ============================================================================

model Subscription {
  id                   String             @id @default(cuid())
  organizationId       String             @unique
  status               SubscriptionStatus @default(TRIALING)
  plan                 String             @default("free")

  // Payment provider fields
  stripeCustomerId     String?            @unique
  stripeSubscriptionId String?            @unique
  stripePriceId        String?

  // Billing period
  currentPeriodStart   DateTime?
  currentPeriodEnd     DateTime?
  cancelAtPeriodEnd    Boolean            @default(false)

  createdAt            DateTime           @default(now())
  updatedAt            DateTime           @updatedAt

  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
}

enum SubscriptionStatus {
  TRIALING
  ACTIVE
  PAST_DUE
  CANCELED
  UNPAID
}

// ============================================================================
// API & DEVELOPER MODELS
// ============================================================================

model ApiKey {
  id             String    @id @default(cuid())
  name           String
  key            String    @unique
  lastUsedAt     DateTime?
  expiresAt      DateTime?
  organizationId String
  createdAt      DateTime  @default(now())

  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
}

$npm run db:studio

$npm run db:seed

// prisma/seed.ts
import { PrismaClient } from '@prisma/client';
import { hash } from 'bcryptjs';

const prisma = new PrismaClient();

async function main() {
  console.log('[ SEEDING DATABASE ]');

  // Create users
  const hashedPassword = await hash('password123', 12);

  const testUser = await prisma.user.upsert({
    where: { email: 'test@example.com' },
    update: {},
    create: {
      email: 'test@example.com',
      name: 'Test User',
      password: hashedPassword,
      emailVerified: new Date(),
    },
  });

  console.log('Created user:', testUser.email);

  // Create organization
  const org = await prisma.organization.upsert({
    where: { slug: 'acme-corp' },
    update: {},
    create: {
      name: 'Acme Corp',
      slug: 'acme-corp',
    },
  });

  console.log('Created organization:', org.name);

  // Create membership
  await prisma.organizationMember.upsert({
    where: {
      userId_organizationId: {
        userId: testUser.id,
        organizationId: org.id,
      },
    },
    update: {},
    create: {
      userId: testUser.id,
      organizationId: org.id,
      role: 'OWNER',
    },
  });

  // Create subscription
  await prisma.subscription.upsert({
    where: { organizationId: org.id },
    update: {},
    create: {
      organizationId: org.id,
      status: 'ACTIVE',
      plan: 'pro',
      currentPeriodStart: new Date(),
      currentPeriodEnd: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
    },
  });

  console.log('[ SEEDING COMPLETE ]');
}

main()
  .catch((e) => {
    console.error(e);
    process.exit(1);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

$npm run db:reset

$npm run dev

$npm run dev -- --turbo

$DEBUG=true npm run dev

$# Terminal 1
$npm run dev

$# Terminal 2
$npm run db:studio

// src/app/(public)/layout.tsx
export default function PublicLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <MarketingHeader />
      <main>{children}</main>
      <MarketingFooter />
    </>
  );
}

// src/app/(platform)/layout.tsx
export default function PlatformLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <div className="flex-1">
        <PlatformHeader />
        <main className="p-6">{children}</main>
      </div>
    </div>
  );
}

// src/app/(platform)/layout.tsx
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function PlatformLayout({ children }: { children: React.ReactNode }) {
  const session = await auth();

  if (!session) {
    redirect('/login');
  }

  return (
    <div className="flex min-h-screen">
      {/* Layout content */}
    </div>
  );
}

// src/app/(platform)/loading.tsx
import { Skeleton } from '@/components/ui/skeleton';

export default function Loading() {
  return (
    <div className="p-6 space-y-4">
      <Skeleton className="h-8 w-64" />
      <Skeleton className="h-64 w-full" />
    </div>
  );
}

// src/app/(admin)/layout.tsx
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';
import { AdminSidebar } from '@/components/admin/admin-sidebar';

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const session = await auth();

  // Check for admin role
  if (!session || session.user.role !== 'ADMIN') {
    redirect('/dashboard');
  }

  return (
    <div className="flex min-h-screen bg-muted">
      <AdminSidebar />
      <main className="flex-1 p-8">
        {children}
      </main>
    </div>
  );
}

import { mode } from '@/design-system';
import { cn } from '@/lib/utils';

// Using mode for styling
<div className={cn(
  'border border-border bg-card p-4',
  mode.radius,
  mode.font
)}>
  Content
</div>

// src/design-system/index.ts
export const mode = {
  // Border radius (dynamic via CSS variable)
  radius: 'rounded-dynamic',

  // Font family
  font: 'font-mono',

  // Color tokens
  color: {
    bg: {
      primary: 'bg-background',
      secondary: 'bg-card',
      muted: 'bg-muted',
      accent: 'bg-primary',
    },
    text: {
      primary: 'text-foreground',
      secondary: 'text-muted-foreground',
      accent: 'text-primary',
    },
    border: {
      default: 'border-border',
      accent: 'border-primary',
    },
  },

  // Spacing (8-point grid)
  spacing: {
    xs: 'gap-1',   // 4px
    sm: 'gap-2',   // 8px
    md: 'gap-4',   // 16px
    lg: 'gap-6',   // 24px
    xl: 'gap-8',   // 32px
  },
};

// Correct
<Card className={cn('border border-border', mode.radius)}>

<Button className={cn(mode.radius, 'px-4 py-2')}>

// Correct - partial border, no radius
<div className="border-b border-border py-2">

// Correct - switch is always pill-shaped
<Switch className="rounded-full">

/* Primary semantic tokens */
--background       /* Page background */
--foreground       /* Primary text */
--card             /* Card backgrounds */
--card-foreground  /* Card text */
--muted            /* Subtle backgrounds */
--muted-foreground /* Subtle text */
--primary          /* Brand/accent color */
--primary-foreground /* Text on primary */
--secondary        /* Secondary actions */
--border           /* Borders */
--ring             /* Focus rings */
--destructive      /* Error/danger states */

// Background colors
<div className="bg-background">    {/* Page background */}
<div className="bg-card">          {/* Card background */}
<div className="bg-muted">         {/* Subtle background */}
<div className="bg-primary">       {/* Accent background */}

// Text colors
<p className="text-foreground">    {/* Primary text */}
<p className="text-muted-foreground"> {/* Secondary text */}
<p className="text-primary">       {/* Accent text */}
<p className="text-destructive">   {/* Error text */}

// Border colors
<div className="border border-border">    {/* Default border */}
<div className="border border-primary">   {/* Accent border */}

// NEVER use hardcoded colors
<div className="bg-green-500">     {/* BAD - breaks themes */}
<div className="text-gray-600">    {/* BAD - breaks themes */}

import { Input } from '@/components/ui/input';
import { InputSearch } from '@/components/ui/input-search';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';
import { Slider } from '@/components/ui/slider';

// Example usage
<Input placeholder="Enter email..." />
<InputSearch placeholder="Search..." />
<Textarea rows={4} />
<Select>
  <SelectTrigger>Select option</SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>
<Checkbox label="Accept terms" />
<Switch />

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Sheet, SheetTrigger, SheetContent } from '@/components/ui/sheet';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Separator } from '@/components/ui/separator';

// Card example
<Card className={cn('border border-border', mode.radius)}>
  <CardHeader>
    <span className="text-xs text-muted-foreground">[ SYSTEM ]</span>
    <CardTitle>DASHBOARD</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Content goes here</p>
  </CardContent>
  <CardFooter>
    <Button>> SAVE</Button>
  </CardFooter>
</Card>

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Skeleton } from '@/components/ui/skeleton';
import { toast } from '@/components/ui/use-toast';

// Alert example
<Alert variant="destructive">
  <AlertTitle>ERROR</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>

// Badge examples
<Badge variant="default">ACTIVE</Badge>
<Badge variant="secondary">PENDING</Badge>
<Badge variant="destructive">ERROR</Badge>
<Badge variant="outline">DRAFT</Badge>

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
import { Command, CommandInput, CommandList, CommandItem } from '@/components/ui/command';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@/components/ui/breadcrumb';

// Dropdown example
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost">OPTIONS</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import { BarChart } from '@/components/charts/bar-chart';
import { LineChart } from '@/components/charts/line-chart';
import { AreaChart } from '@/components/charts/area-chart';
import { DonutChart } from '@/components/charts/donut-chart';
import { Sparkline } from '@/components/charts/sparkline';

// Bar chart example
const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 500 },
];

<BarChart
  data={data}
  xKey="name"
  yKey="value"
  className="h-64"
/>

// Sparkline for inline metrics
<Sparkline data={[10, 20, 15, 30, 25]} className="w-24 h-8" />

model Project {
  id             String        @id @default(cuid())
  name           String
  description    String?
  status         ProjectStatus @default(ACTIVE)
  organizationId String
  createdById    String
  createdAt      DateTime      @default(now())
  updatedAt      DateTime      @updatedAt

  organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
  createdBy    User         @relation(fields: [createdById], references: [id])
  tasks        Task[]

  @@index([organizationId])
  @@index([createdById])
}

model Task {
  id          String     @id @default(cuid())
  title       String
  description String?
  status      TaskStatus @default(TODO)
  priority    Priority   @default(MEDIUM)
  dueDate     DateTime?
  projectId   String
  assigneeId  String?
  createdAt   DateTime   @default(now())
  updatedAt   DateTime   @updatedAt

  project  Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
  assignee User?   @relation(fields: [assigneeId], references: [id])

  @@index([projectId])
  @@index([assigneeId])
}

enum ProjectStatus {
  ACTIVE
  ARCHIVED
  COMPLETED
}

enum TaskStatus {
  TODO
  IN_PROGRESS
  IN_REVIEW
  DONE
}

enum Priority {
  LOW
  MEDIUM
  HIGH
  URGENT
}

$npm run db:push

// src/app/api/projects/route.ts
import { auth } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
import { NextResponse } from 'next/server';
import { z } from 'zod';

const createProjectSchema = z.object({
  name: z.string().min(1, 'Name is required').max(100),
  description: z.string().max(500).optional(),
});

// GET /api/projects - List all projects
export async function GET() {
  try {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.json(
        { error: 'Unauthorized' },
        { status: 401 }
      );
    }

    const projects = await prisma.project.findMany({
      where: { organizationId: session.user.organizationId },
      include: {
        createdBy: {
          select: { name: true, image: true },
        },
        _count: {
          select: { tasks: true },
        },
      },
      orderBy: { createdAt: 'desc' },
    });

    return NextResponse.json({ projects });
  } catch (error) {
    console.error('[ API ] Error fetching projects:', error);
    return NextResponse.json(
      { error: 'Failed to fetch projects' },
      { status: 500 }
    );
  }
}

// POST /api/projects - Create new project
export async function POST(request: Request) {
  try {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.json(
        { error: 'Unauthorized' },
        { status: 401 }
      );
    }

    const body = await request.json();
    const result = createProjectSchema.safeParse(body);

    if (!result.success) {
      return NextResponse.json(
        { error: 'Validation failed', issues: result.error.issues },
        { status: 400 }
      );
    }

    const project = await prisma.project.create({
      data: {
        name: result.data.name,
        description: result.data.description,
        organizationId: session.user.organizationId,
        createdById: session.user.id,
      },
    });

    return NextResponse.json({ project }, { status: 201 });
  } catch (error) {
    console.error('[ API ] Error creating project:', error);
    return NextResponse.json(
      { error: 'Failed to create project' },
      { status: 500 }
    );
  }
}

// src/app/api/projects/[id]/route.ts
import { auth } from '@/lib/auth';
import { prisma } from '@/lib/prisma';
import { NextResponse } from 'next/server';
import { z } from 'zod';

const updateProjectSchema = z.object({
  name: z.string().min(1).max(100).optional(),
  description: z.string().max(500).optional(),
  status: z.enum(['ACTIVE', 'ARCHIVED', 'COMPLETED']).optional(),
});

// GET /api/projects/[id]
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }

    const project = await prisma.project.findFirst({
      where: {
        id: params.id,
        organizationId: session.user.organizationId,
      },
      include: {
        tasks: {
          orderBy: { createdAt: 'desc' },
        },
        createdBy: {
          select: { name: true, image: true },
        },
      },
    });

    if (!project) {
      return NextResponse.json({ error: 'Project not found' }, { status: 404 });
    }

    return NextResponse.json({ project });
  } catch (error) {
    console.error('[ API ] Error fetching project:', error);
    return NextResponse.json(
      { error: 'Failed to fetch project' },
      { status: 500 }
    );
  }
}

// PATCH /api/projects/[id]
export async function PATCH(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }

    const body = await request.json();
    const result = updateProjectSchema.safeParse(body);

    if (!result.success) {
      return NextResponse.json(
        { error: 'Validation failed', issues: result.error.issues },
        { status: 400 }
      );
    }

    const project = await prisma.project.updateMany({
      where: {
        id: params.id,
        organizationId: session.user.organizationId,
      },
      data: result.data,
    });

    if (project.count === 0) {
      return NextResponse.json({ error: 'Project not found' }, { status: 404 });
    }

    const updated = await prisma.project.findUnique({
      where: { id: params.id },
    });

    return NextResponse.json({ project: updated });
  } catch (error) {
    console.error('[ API ] Error updating project:', error);
    return NextResponse.json(
      { error: 'Failed to update project' },
      { status: 500 }
    );
  }
}

// DELETE /api/projects/[id]
export async function DELETE(
  request: Request,
  { params }: { params: { id: string } }
) {
  try {
    const session = await auth();

    if (!session?.user) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }

    const project = await prisma.project.deleteMany({
      where: {
        id: params.id,
        organizationId: session.user.organizationId,
      },
    });

    if (project.count === 0) {
      return NextResponse.json({ error: 'Project not found' }, { status: 404 });
    }

    return NextResponse.json({ success: true });
  } catch (error) {
    console.error('[ API ] Error deleting project:', error);
    return NextResponse.json(
      { error: 'Failed to delete project' },
      { status: 500 }
    );
  }
}