Add full CRM application with HF Spaces Docker deployment

Includes CRM features (contacts, companies, deals, pipelines, activities),
NextAuth authentication, SQLite database with seed data, and Docker
configuration for Hugging Face Spaces deployment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+.next
+.git
+.gitignore
+.env*
+.DS_Store
+.vercel
+coverage
+data/*.db
+data/*.db-wal
+data/*.db-shm
+npm-debug.log*
+yarn-debug.log*
+.pnpm-debug.log*
+*.tsbuildinfo

.gitignore

@@ -39,3 +39,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# sqlite database
+/data/*.db
+/data/*.db-wal
+/data/*.db-shm

Dockerfile

@@ -0,0 +1,69 @@
+# ============================================
+# Stage 1: Install dependencies
+# ============================================
+FROM node:20-slim AS dependencies
+
+WORKDIR /app
+
+# Install build tools needed for better-sqlite3 native compilation
+RUN apt-get update && apt-get install -y \
+    python3 \
+    make \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY package.json package-lock.json ./
+
+RUN npm ci
+
+# ============================================
+# Stage 2: Build the Next.js application
+# ============================================
+FROM node:20-slim AS builder
+
+WORKDIR /app
+
+COPY --from=dependencies /app/node_modules ./node_modules
+COPY . .
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Seed the database at build time so the image ships with data.
+# The seed script creates ./data/crm.db if it does not exist.
+RUN npx tsx src/lib/db/seed.ts
+
+RUN npm run build
+
+# ============================================
+# Stage 3: Production runner
+# ============================================
+FROM node:20-slim AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# Copy public assets (not included in standalone output)
+COPY --from=builder --chown=node:node /app/public ./public
+
+# Create .next directory owned by node for prerender cache
+RUN mkdir -p .next && chown node:node .next
+
+# Copy standalone server + static assets
+COPY --from=builder --chown=node:node /app/.next/standalone ./
+COPY --from=builder --chown=node:node /app/.next/static ./.next/static
+
+# Copy the seeded SQLite database
+COPY --from=builder --chown=node:node /app/data ./data
+
+# HF Spaces runs containers as UID 1000.
+# The node user in official Node images is already UID 1000.
+USER node
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]

README.md

@@ -6,6 +6,7 @@ colorTo: gray
 sdk: docker
 pinned: false
 short_description: 'pipedrive clone '
+app_port: 3000
 ---
 
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/lib/db/schema.ts",
+  out: "./drizzle",
+  dialect: "sqlite",
+  dbCredentials: {
+    url: "./data/crm.db",
+  },
+});

next.config.ts

@@ -1,7 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone",
+  serverExternalPackages: ["better-sqlite3"],
 };
 
 export default nextConfig;

package.json

@@ -6,21 +6,50 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "seed": "npx tsx src/lib/db/seed.ts",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tanstack/react-table": "^8.21.3",
+    "bcryptjs": "^3.0.3",
+    "better-sqlite3": "^12.6.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "drizzle-orm": "^0.45.1",
+    "lucide-react": "^0.575.0",
     "next": "16.1.6",
+    "next-auth": "^5.0.0-beta.30",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-day-picker": "^9.14.0",
+    "react-dom": "19.2.3",
+    "recharts": "^3.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "drizzle-kit": "^0.31.9",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.5",
     "tailwindcss": "^4",
+    "tsx": "^4.21.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5"
   }
 }

src/app/(app)/activities/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ActivityItem } from "@/components/activities/activity-item";
+import { ActivityForm } from "@/components/activities/activity-form";
+import { Plus, Phone, Mail, Calendar, CheckSquare, StickyNote } from "lucide-react";
+import { toast } from "sonner";
+
+const typeFilters = [
+  { value: "", label: "All", icon: null },
+  { value: "call", label: "Calls", icon: Phone },
+  { value: "email", label: "Emails", icon: Mail },
+  { value: "meeting", label: "Meetings", icon: Calendar },
+  { value: "task", label: "Tasks", icon: CheckSquare },
+  { value: "note", label: "Notes", icon: StickyNote },
+];
+
+export default function ActivitiesPage() {
+  const [activities, setActivities] = useState<any[]>([]);
+  const [typeFilter, setTypeFilter] = useState("");
+  const [doneFilter, setDoneFilter] = useState<string>("");
+  const [showForm, setShowForm] = useState(false);
+
+  const load = useCallback(async () => {
+    const params = new URLSearchParams();
+    if (typeFilter) params.set("type", typeFilter);
+    if (doneFilter !== "") params.set("isDone", doneFilter);
+    const res = await fetch(`/api/activities?${params}`);
+    if (res.ok) setActivities(await res.json());
+  }, [typeFilter, doneFilter]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // Group by date
+  const grouped = activities.reduce<Record<string, any[]>>((acc, a) => {
+    const date = a.dueDate || "No date";
+    if (!acc[date]) acc[date] = [];
+    acc[date].push(a);
+    return acc;
+  }, {});
+
+  const sortedDates = Object.keys(grouped).sort((a, b) => {
+    if (a === "No date") return 1;
+    if (b === "No date") return -1;
+    return b.localeCompare(a);
+  });
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-bold">Activities</h1>
+        <Button onClick={() => setShowForm(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Activity
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {typeFilters.map((f) => (
+          <Button
+            key={f.value}
+            variant={typeFilter === f.value ? "default" : "outline"}
+            size="sm"
+            onClick={() => setTypeFilter(f.value)}
+          >
+            {f.icon && <f.icon className="h-3 w-3 mr-1" />}
+            {f.label}
+          </Button>
+        ))}
+        <div className="w-px bg-border mx-1" />
+        <Button
+          variant={doneFilter === "" ? "default" : "outline"}
+          size="sm"
+          onClick={() => setDoneFilter("")}
+        >
+          All
+        </Button>
+        <Button
+          variant={doneFilter === "false" ? "default" : "outline"}
+          size="sm"
+          onClick={() => setDoneFilter("false")}
+        >
+          Pending
+        </Button>
+        <Button
+          variant={doneFilter === "true" ? "default" : "outline"}
+          size="sm"
+          onClick={() => setDoneFilter("true")}
+        >
+          Done
+        </Button>
+      </div>
+
+      {showForm && (
+        <div className="mb-6">
+          <ActivityForm
+            onSuccess={() => {
+              setShowForm(false);
+              load();
+              toast.success("Activity created");
+            }}
+            onCancel={() => setShowForm(false)}
+          />
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {sortedDates.map((date) => (
+          <div key={date}>
+            <h3 className="text-sm font-medium text-muted-foreground mb-2">
+              {date === "No date"
+                ? "No date"
+                : new Date(date + "T00:00:00").toLocaleDateString("en-US", {
+                    weekday: "long",
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+            </h3>
+            <div className="space-y-2">
+              {grouped[date].map((a: any) => (
+                <ActivityItem
+                  key={a.id}
+                  activity={a}
+                  onToggle={async () => {
+                    await fetch(`/api/activities/${a.id}`, {
+                      method: "PATCH",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify({ isDone: !a.isDone }),
+                    });
+                    load();
+                    toast.success(a.isDone ? "Marked as pending" : "Marked as done");
+                  }}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+        {activities.length === 0 && (
+          <p className="text-center text-muted-foreground py-8">No activities found.</p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/(app)/companies/[id]/page.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { ArrowLeft, Globe, Phone, MapPin, Users, Handshake } from "lucide-react";
+import { formatCurrency } from "@/lib/utils";
+import Link from "next/link";
+
+export default function CompanyDetailPage() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [company, setCompany] = useState<any>(null);
+  const [contacts, setContacts] = useState<any[]>([]);
+  const [deals, setDeals] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetch(`/api/companies/${id}`).then((r) => r.ok && r.json()).then(setCompany);
+    fetch(`/api/contacts?companyId=${id}&limit=100`).then((r) => r.ok && r.json()).then((d) => setContacts(d?.data || []));
+    fetch(`/api/deals`).then((r) => r.ok && r.json()).then((d) =>
+      setDeals((d || []).filter((deal: any) => deal.companyId === parseInt(id as string)))
+    );
+  }, [id]);
+
+  if (!company) return <div>Loading...</div>;
+
+  return (
+    <div className="max-w-4xl">
+      <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4">
+        <ArrowLeft className="h-4 w-4 mr-2" />
+        Back
+      </Button>
+
+      <h1 className="text-2xl font-bold mb-6">{company.name}</h1>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6 space-y-3">
+          {company.domain && (
+            <div className="flex items-center gap-2">
+              <Globe className="h-4 w-4 text-muted-foreground" />
+              <span>{company.domain}</span>
+            </div>
+          )}
+          {company.phone && (
+            <div className="flex items-center gap-2">
+              <Phone className="h-4 w-4 text-muted-foreground" />
+              <span>{company.phone}</span>
+            </div>
+          )}
+          {company.address && (
+            <div className="flex items-center gap-2">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <span>{company.address}</span>
+            </div>
+          )}
+          {company.notes && (
+            <p className="text-sm text-muted-foreground">{company.notes}</p>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Users className="h-4 w-4" />
+              Contacts ({contacts.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {contacts.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No contacts</p>
+            ) : (
+              <div className="space-y-2">
+                {contacts.map((c: any) => (
+                  <Link
+                    key={c.id}
+                    href={`/contacts/${c.id}`}
+                    className="block p-2 rounded hover:bg-muted"
+                  >
+                    <p className="text-sm font-medium">{c.firstName} {c.lastName}</p>
+                    <p className="text-xs text-muted-foreground">{c.jobTitle || c.email}</p>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Handshake className="h-4 w-4" />
+              Deals ({deals.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {deals.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No deals</p>
+            ) : (
+              <div className="space-y-2">
+                {deals.map((d: any) => (
+                  <Link
+                    key={d.id}
+                    href={`/deals/${d.id}`}
+                    className="flex items-center justify-between p-2 rounded hover:bg-muted"
+                  >
+                    <div>
+                      <p className="text-sm font-medium">{d.title}</p>
+                      <p className="text-xs text-muted-foreground">{d.stageName}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-semibold">{formatCurrency(d.value)}</p>
+                      <Badge variant="outline" className="text-xs">{d.status}</Badge>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/app/(app)/companies/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTable } from "@/components/shared/data-table";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Plus, Search, Pencil, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+
+type Company = {
+  id: number;
+  name: string;
+  domain: string | null;
+  phone: string | null;
+  address: string | null;
+  notes: string | null;
+  createdAt: string;
+};
+
+export default function CompaniesPage() {
+  const router = useRouter();
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [search, setSearch] = useState("");
+  const [showForm, setShowForm] = useState(false);
+  const [editing, setEditing] = useState<Company | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Company | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const load = useCallback(async () => {
+    const res = await fetch(`/api/companies?search=${encodeURIComponent(search)}&limit=100`);
+    if (res.ok) {
+      const data = await res.json();
+      setCompanies(data.data);
+    }
+  }, [search]);
+
+  useEffect(() => { load(); }, [load]);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    const form = new FormData(e.currentTarget);
+    const data = {
+      name: form.get("name") as string,
+      domain: (form.get("domain") as string) || null,
+      phone: (form.get("phone") as string) || null,
+      address: (form.get("address") as string) || null,
+      notes: (form.get("notes") as string) || null,
+    };
+
+    const url = editing ? `/api/companies/${editing.id}` : "/api/companies";
+    const method = editing ? "PATCH" : "POST";
+    const res = await fetch(url, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    setLoading(false);
+    if (res.ok) {
+      toast.success(editing ? "Company updated" : "Company created");
+      setShowForm(false);
+      setEditing(null);
+      load();
+    }
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    const res = await fetch(`/api/companies/${deleteTarget.id}`, { method: "DELETE" });
+    if (res.ok) {
+      toast.success("Company deleted");
+      load();
+    }
+    setDeleteTarget(null);
+  }
+
+  const columns: ColumnDef<Company>[] = [
+    { accessorKey: "name", header: "Name" },
+    { accessorKey: "domain", header: "Domain" },
+    { accessorKey: "phone", header: "Phone" },
+    {
+      id: "actions",
+      cell: ({ row }) => (
+        <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => { setEditing(row.original); setShowForm(true); }}
+          >
+            <Pencil className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-destructive"
+            onClick={() => setDeleteTarget(row.original)}
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-bold">Companies</h1>
+        <Button onClick={() => { setEditing(null); setShowForm(true); }}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Company
+        </Button>
+      </div>
+
+      <div className="relative mb-4 max-w-sm">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search companies..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={companies}
+        onRowClick={(row) => router.push(`/companies/${row.id}`)}
+      />
+
+      <Dialog open={showForm} onOpenChange={setShowForm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editing ? "Edit Company" : "New Company"}</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" name="name" defaultValue={editing?.name} required />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="domain">Domain</Label>
+              <Input id="domain" name="domain" defaultValue={editing?.domain || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="phone">Phone</Label>
+              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="address">Address</Label>
+              <Input id="address" name="address" defaultValue={editing?.address || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="notes">Notes</Label>
+              <Textarea id="notes" name="notes" defaultValue={editing?.notes || ""} />
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading ? "Saving..." : editing ? "Update" : "Create"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={() => setDeleteTarget(null)}
+        title="Delete Company"
+        description={`Are you sure you want to delete "${deleteTarget?.name}"? This cannot be undone.`}
+        onConfirm={handleDelete}
+        destructive
+      />
+    </div>
+  );
+}

src/app/(app)/contacts/[id]/page.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ArrowLeft, Mail, Phone, Briefcase, Building2, Handshake } from "lucide-react";
+import { formatCurrency } from "@/lib/utils";
+import { ActivityForm } from "@/components/activities/activity-form";
+import { ActivityItem } from "@/components/activities/activity-item";
+import Link from "next/link";
+import { toast } from "sonner";
+
+export default function ContactDetailPage() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [contact, setContact] = useState<any>(null);
+  const [deals, setDeals] = useState<any[]>([]);
+  const [activities, setActivities] = useState<any[]>([]);
+  const [showActivityForm, setShowActivityForm] = useState(false);
+
+  function loadData() {
+    fetch(`/api/contacts/${id}`).then((r) => r.ok && r.json()).then(setContact);
+    fetch(`/api/deals`).then((r) => r.ok && r.json()).then((d) =>
+      setDeals((d || []).filter((deal: any) => deal.contactId === parseInt(id as string)))
+    );
+    fetch(`/api/activities?contactId=${id}`).then((r) => r.ok && r.json()).then(setActivities);
+  }
+
+  useEffect(() => { loadData(); }, [id]);
+
+  if (!contact) return <div>Loading...</div>;
+
+  return (
+    <div className="max-w-4xl">
+      <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4">
+        <ArrowLeft className="h-4 w-4 mr-2" />
+        Back
+      </Button>
+
+      <h1 className="text-2xl font-bold mb-6">
+        {contact.firstName} {contact.lastName}
+      </h1>
+
+      <Card className="mb-6">
+        <CardContent className="pt-6 space-y-3">
+          {contact.email && (
+            <div className="flex items-center gap-2">
+              <Mail className="h-4 w-4 text-muted-foreground" />
+              <span>{contact.email}</span>
+            </div>
+          )}
+          {contact.phone && (
+            <div className="flex items-center gap-2">
+              <Phone className="h-4 w-4 text-muted-foreground" />
+              <span>{contact.phone}</span>
+            </div>
+          )}
+          {contact.jobTitle && (
+            <div className="flex items-center gap-2">
+              <Briefcase className="h-4 w-4 text-muted-foreground" />
+              <span>{contact.jobTitle}</span>
+            </div>
+          )}
+          {contact.companyName && (
+            <Link href={`/companies/${contact.companyId}`} className="flex items-center gap-2 hover:underline">
+              <Building2 className="h-4 w-4 text-muted-foreground" />
+              <span>{contact.companyName}</span>
+            </Link>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Handshake className="h-4 w-4" />
+              Deals ({deals.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {deals.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No deals</p>
+            ) : (
+              <div className="space-y-2">
+                {deals.map((d: any) => (
+                  <Link
+                    key={d.id}
+                    href={`/deals/${d.id}`}
+                    className="flex items-center justify-between p-2 rounded hover:bg-muted"
+                  >
+                    <div>
+                      <p className="text-sm font-medium">{d.title}</p>
+                      <p className="text-xs text-muted-foreground">{d.stageName}</p>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-sm font-semibold">{formatCurrency(d.value)}</p>
+                      <Badge variant="outline" className="text-xs">{d.status}</Badge>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-base">Activities</CardTitle>
+            <Button size="sm" onClick={() => setShowActivityForm(true)}>Add</Button>
+          </CardHeader>
+          <CardContent>
+            {showActivityForm && (
+              <div className="mb-4">
+                <ActivityForm
+                  contactId={parseInt(id as string)}
+                  onSuccess={() => {
+                    setShowActivityForm(false);
+                    loadData();
+                    toast.success("Activity added");
+                  }}
+                  onCancel={() => setShowActivityForm(false)}
+                />
+              </div>
+            )}
+            {activities.length === 0 ? (
+              <p className="text-sm text-muted-foreground">No activities</p>
+            ) : (
+              <div className="space-y-2">
+                {activities.map((a: any) => (
+                  <ActivityItem
+                    key={a.id}
+                    activity={a}
+                    onToggle={async () => {
+                      await fetch(`/api/activities/${a.id}`, {
+                        method: "PATCH",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ isDone: !a.isDone }),
+                      });
+                      loadData();
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/app/(app)/contacts/page.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTable } from "@/components/shared/data-table";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Search, Pencil, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+
+type Contact = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string | null;
+  phone: string | null;
+  jobTitle: string | null;
+  companyId: number | null;
+  companyName: string | null;
+  createdAt: string;
+};
+
+export default function ContactsPage() {
+  const router = useRouter();
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [companies, setCompanies] = useState<{ id: number; name: string }[]>([]);
+  const [search, setSearch] = useState("");
+  const [showForm, setShowForm] = useState(false);
+  const [editing, setEditing] = useState<Contact | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Contact | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const load = useCallback(async () => {
+    const res = await fetch(`/api/contacts?search=${encodeURIComponent(search)}&limit=100`);
+    if (res.ok) {
+      const data = await res.json();
+      setContacts(data.data);
+    }
+  }, [search]);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    fetch("/api/companies?limit=100").then((r) => r.ok && r.json()).then((d) => setCompanies(d?.data || []));
+  }, []);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    const form = new FormData(e.currentTarget);
+    const companyIdVal = form.get("companyId") as string;
+    const data = {
+      firstName: form.get("firstName") as string,
+      lastName: form.get("lastName") as string,
+      email: (form.get("email") as string) || null,
+      phone: (form.get("phone") as string) || null,
+      jobTitle: (form.get("jobTitle") as string) || null,
+      companyId: companyIdVal && companyIdVal !== "none" ? parseInt(companyIdVal) : null,
+    };
+
+    const url = editing ? `/api/contacts/${editing.id}` : "/api/contacts";
+    const method = editing ? "PATCH" : "POST";
+    const res = await fetch(url, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    setLoading(false);
+    if (res.ok) {
+      toast.success(editing ? "Contact updated" : "Contact created");
+      setShowForm(false);
+      setEditing(null);
+      load();
+    }
+  }
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    await fetch(`/api/contacts/${deleteTarget.id}`, { method: "DELETE" });
+    toast.success("Contact deleted");
+    load();
+    setDeleteTarget(null);
+  }
+
+  const columns: ColumnDef<Contact>[] = [
+    {
+      id: "name",
+      header: "Name",
+      accessorFn: (row) => `${row.firstName} ${row.lastName}`,
+    },
+    { accessorKey: "email", header: "Email" },
+    { accessorKey: "phone", header: "Phone" },
+    { accessorKey: "jobTitle", header: "Job Title" },
+    { accessorKey: "companyName", header: "Company" },
+    {
+      id: "actions",
+      cell: ({ row }) => (
+        <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={() => { setEditing(row.original); setShowForm(true); }}
+          >
+            <Pencil className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-destructive"
+            onClick={() => setDeleteTarget(row.original)}
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-bold">Contacts</h1>
+        <Button onClick={() => { setEditing(null); setShowForm(true); }}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Contact
+        </Button>
+      </div>
+
+      <div className="relative mb-4 max-w-sm">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search contacts..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-9"
+        />
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={contacts}
+        onRowClick={(row) => router.push(`/contacts/${row.id}`)}
+      />
+
+      <Dialog open={showForm} onOpenChange={setShowForm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editing ? "Edit Contact" : "New Contact"}</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="firstName">First Name</Label>
+                <Input id="firstName" name="firstName" defaultValue={editing?.firstName} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName">Last Name</Label>
+                <Input id="lastName" name="lastName" defaultValue={editing?.lastName} required />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" name="email" type="email" defaultValue={editing?.email || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="phone">Phone</Label>
+              <Input id="phone" name="phone" defaultValue={editing?.phone || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="jobTitle">Job Title</Label>
+              <Input id="jobTitle" name="jobTitle" defaultValue={editing?.jobTitle || ""} />
+            </div>
+            <div className="space-y-2">
+              <Label>Company</Label>
+              <Select name="companyId" defaultValue={editing?.companyId ? String(editing.companyId) : "none"}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select company..." />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">No company</SelectItem>
+                  {companies.map((c) => (
+                    <SelectItem key={c.id} value={String(c.id)}>
+                      {c.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={loading}>
+                {loading ? "Saving..." : editing ? "Update" : "Create"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={() => setDeleteTarget(null)}
+        title="Delete Contact"
+        description={`Are you sure you want to delete "${deleteTarget?.firstName} ${deleteTarget?.lastName}"?`}
+        onConfirm={handleDelete}
+        destructive
+      />
+    </div>
+  );
+}

src/app/(app)/dashboard/page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatCurrency } from "@/lib/utils";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts";
+import { DollarSign, Handshake, Target, CalendarCheck, Phone, Mail, Calendar, CheckSquare, StickyNote } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+const PIE_COLORS = ["#22c55e", "#ef4444"];
+
+const typeIcons: Record<string, any> = {
+  call: Phone,
+  email: Mail,
+  meeting: Calendar,
+  task: CheckSquare,
+  note: StickyNote,
+};
+
+export default function DashboardPage() {
+  const [data, setData] = useState<any>(null);
+
+  useEffect(() => {
+    fetch("/api/dashboard").then((r) => r.ok && r.json()).then(setData);
+  }, []);
+
+  if (!data) return <div>Loading dashboard...</div>;
+
+  const { summary, dealsByStage, forecast, wonLost, recentActivities } = data;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Handshake className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Open Deals</p>
+                <p className="text-2xl font-bold">{summary.openDeals}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-green-100 rounded-lg">
+                <DollarSign className="h-5 w-5 text-green-600" />
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Pipeline Value</p>
+                <p className="text-2xl font-bold">{formatCurrency(summary.totalOpenValue)}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-purple-100 rounded-lg">
+                <Target className="h-5 w-5 text-purple-600" />
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Win Rate</p>
+                <p className="text-2xl font-bold">{summary.winRate}%</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-orange-100 rounded-lg">
+                <CalendarCheck className="h-5 w-5 text-orange-600" />
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">Activities This Week</p>
+                <p className="text-2xl font-bold">{summary.activitiesThisWeek}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Deals by Stage</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={dealsByStage}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="stage" fontSize={12} />
+                <YAxis fontSize={12} />
+                <Tooltip formatter={(value) => formatCurrency(Number(value))} />
+                <Bar dataKey="value" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Revenue Forecast</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={300}>
+              <AreaChart data={forecast}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="month" fontSize={12} />
+                <YAxis fontSize={12} />
+                <Tooltip formatter={(value) => formatCurrency(Number(value))} />
+                <Area
+                  type="monotone"
+                  dataKey="total"
+                  stroke="#94a3b8"
+                  fill="#f1f5f9"
+                  name="Total"
+                />
+                <Area
+                  type="monotone"
+                  dataKey="weighted"
+                  stroke="#3b82f6"
+                  fill="#dbeafe"
+                  name="Weighted"
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Won vs Lost</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={200}>
+              <PieChart>
+                <Pie
+                  data={wonLost}
+                  dataKey="value"
+                  nameKey="name"
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={50}
+                  outerRadius={80}
+                  label={({ name, value }) => `${name}: ${value}`}
+                >
+                  {wonLost.map((_: any, idx: number) => (
+                    <Cell key={idx} fill={PIE_COLORS[idx]} />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </PieChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="text-base">Recent Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {recentActivities.map((a: any) => {
+                const Icon = typeIcons[a.type] || StickyNote;
+                return (
+                  <div key={a.id} className="flex items-center gap-3">
+                    <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <span className={`text-sm flex-1 ${a.isDone ? "line-through text-muted-foreground" : ""}`}>
+                      {a.subject}
+                    </span>
+                    <Badge variant="outline" className="text-xs shrink-0">{a.type}</Badge>
+                  </div>
+                );
+              })}
+              {recentActivities.length === 0 && (
+                <p className="text-sm text-muted-foreground">No recent activities</p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/app/(app)/deals/[id]/page.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { formatCurrency, formatDate } from "@/lib/utils";
+import { ActivityForm } from "@/components/activities/activity-form";
+import { ActivityItem } from "@/components/activities/activity-item";
+import {
+  ArrowLeft,
+  Trophy,
+  XCircle,
+  Building2,
+  User,
+  Calendar,
+  DollarSign,
+  Target,
+} from "lucide-react";
+import { toast } from "sonner";
+import Link from "next/link";
+
+export default function DealDetailPage() {
+  const { id } = useParams();
+  const router = useRouter();
+  const [deal, setDeal] = useState<any>(null);
+  const [showActivityForm, setShowActivityForm] = useState(false);
+
+  async function loadDeal() {
+    const res = await fetch(`/api/deals/${id}`);
+    if (res.ok) setDeal(await res.json());
+  }
+
+  useEffect(() => { loadDeal(); }, [id]);
+
+  async function markStatus(status: "won" | "lost") {
+    const res = await fetch(`/api/deals/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status }),
+    });
+    if (res.ok) {
+      toast.success(`Deal marked as ${status}`);
+      loadDeal();
+    }
+  }
+
+  if (!deal) return <div className="p-6">Loading...</div>;
+
+  const statusColors: Record<string, string> = {
+    open: "bg-blue-100 text-blue-800",
+    won: "bg-green-100 text-green-800",
+    lost: "bg-red-100 text-red-800",
+  };
+
+  return (
+    <div className="max-w-4xl">
+      <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4">
+        <ArrowLeft className="h-4 w-4 mr-2" />
+        Back to Deals
+      </Button>
+
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">{deal.title}</h1>
+          <Badge className={`mt-2 ${statusColors[deal.status]}`}>
+            {deal.status.toUpperCase()}
+          </Badge>
+        </div>
+        {deal.status === "open" && (
+          <div className="flex gap-2">
+            <Button variant="outline" className="text-green-600" onClick={() => markStatus("won")}>
+              <Trophy className="h-4 w-4 mr-2" />
+              Mark Won
+            </Button>
+            <Button variant="outline" className="text-red-600" onClick={() => markStatus("lost")}>
+              <XCircle className="h-4 w-4 mr-2" />
+              Mark Lost
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Deal Info</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-2">
+              <DollarSign className="h-4 w-4 text-muted-foreground" />
+              <span className="font-semibold">{formatCurrency(deal.value)}</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Target className="h-4 w-4 text-muted-foreground" />
+              <span>{deal.stageName} ({deal.stageProbability}%)</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span>{formatDate(deal.expectedCloseDate) || "No close date"}</span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Related</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {deal.contactFirstName && (
+              <Link href={`/contacts/${deal.contactId}`} className="flex items-center gap-2 hover:underline">
+                <User className="h-4 w-4 text-muted-foreground" />
+                <span>{deal.contactFirstName} {deal.contactLastName}</span>
+              </Link>
+            )}
+            {deal.companyName && (
+              <Link href={`/companies/${deal.companyId}`} className="flex items-center gap-2 hover:underline">
+                <Building2 className="h-4 w-4 text-muted-foreground" />
+                <span>{deal.companyName}</span>
+              </Link>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Separator className="my-6" />
+
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Activities</h2>
+        <Button size="sm" onClick={() => setShowActivityForm(true)}>Add Activity</Button>
+      </div>
+
+      {showActivityForm && (
+        <div className="mb-4">
+          <ActivityForm
+            dealId={deal.id}
+            contactId={deal.contactId}
+            companyId={deal.companyId}
+            onSuccess={() => {
+              setShowActivityForm(false);
+              loadDeal();
+              toast.success("Activity added");
+            }}
+            onCancel={() => setShowActivityForm(false)}
+          />
+        </div>
+      )}
+
+      <div className="space-y-2">
+        {deal.activities?.length === 0 && (
+          <p className="text-sm text-muted-foreground">No activities yet.</p>
+        )}
+        {deal.activities?.map((activity: any) => (
+          <ActivityItem
+            key={activity.id}
+            activity={activity}
+            onToggle={async () => {
+              await fetch(`/api/activities/${activity.id}`, {
+                method: "PATCH",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ isDone: !activity.isDone }),
+              });
+              loadDeal();
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(app)/deals/page.tsx

@@ -0,0 +1,75 @@
+import { db } from "@/lib/db";
+import { deals, pipelineStages, pipelines, contacts, companies } from "@/lib/db/schema";
+import { auth } from "@/lib/auth";
+import { eq, asc } from "drizzle-orm";
+import { redirect } from "next/navigation";
+import { KanbanBoard } from "@/components/deals/kanban-board";
+
+export default async function DealsPage() {
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+
+  const userId = parseInt(session.user.id);
+
+  const allPipelines = db.select().from(pipelines).where(eq(pipelines.userId, userId)).all();
+  const pipeline = allPipelines[0];
+  if (!pipeline) return <div>No pipeline found. Go to Settings to create one.</div>;
+
+  const stages = db
+    .select()
+    .from(pipelineStages)
+    .where(eq(pipelineStages.pipelineId, pipeline.id))
+    .orderBy(asc(pipelineStages.position))
+    .all();
+
+  const allDeals = db
+    .select({
+      id: deals.id,
+      title: deals.title,
+      value: deals.value,
+      status: deals.status,
+      position: deals.position,
+      expectedCloseDate: deals.expectedCloseDate,
+      stageId: deals.stageId,
+      stageName: pipelineStages.name,
+      contactId: deals.contactId,
+      contactFirstName: contacts.firstName,
+      contactLastName: contacts.lastName,
+      companyId: deals.companyId,
+      companyName: companies.name,
+      pipelineId: deals.pipelineId,
+    })
+    .from(deals)
+    .leftJoin(contacts, eq(deals.contactId, contacts.id))
+    .leftJoin(companies, eq(deals.companyId, companies.id))
+    .leftJoin(pipelineStages, eq(deals.stageId, pipelineStages.id))
+    .where(eq(deals.userId, userId))
+    .all();
+
+  const allContacts = db
+    .select({
+      id: contacts.id,
+      firstName: contacts.firstName,
+      lastName: contacts.lastName,
+      companyId: contacts.companyId,
+    })
+    .from(contacts)
+    .where(eq(contacts.userId, userId))
+    .all();
+
+  const allCompanies = db
+    .select({ id: companies.id, name: companies.name })
+    .from(companies)
+    .where(eq(companies.userId, userId))
+    .all();
+
+  return (
+    <KanbanBoard
+      initialDeals={allDeals}
+      stages={stages}
+      pipelineId={pipeline.id}
+      contacts={allContacts}
+      companies={allCompanies}
+    />
+  );
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { SessionProvider } from "next-auth/react";
+import { Sidebar } from "@/components/layout/sidebar";
+import { Topbar } from "@/components/layout/topbar";
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  return (
+    <SessionProvider session={session}>
+      <div className="flex min-h-screen">
+        <Sidebar />
+        <div className="flex-1 flex flex-col">
+          <Topbar />
+          <main className="flex-1 p-6">{children}</main>
+        </div>
+      </div>
+    </SessionProvider>
+  );
+}

src/app/(app)/settings/page.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Plus, GripVertical, Trash2, Save } from "lucide-react";
+import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+
+type Stage = {
+  id: number;
+  name: string;
+  position: number;
+  probability: number;
+  pipelineId: number;
+};
+
+export default function SettingsPage() {
+  const [stages, setStages] = useState<Stage[]>([]);
+  const [pipelineId, setPipelineId] = useState<number | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Stage | null>(null);
+  const [newStageName, setNewStageName] = useState("");
+
+  async function loadStages() {
+    const pipRes = await fetch("/api/pipelines");
+    if (!pipRes.ok) return;
+    const pips = await pipRes.json();
+    if (pips.length === 0) return;
+    setPipelineId(pips[0].id);
+
+    const stagesRes = await fetch(`/api/stages?pipelineId=${pips[0].id}`);
+    if (stagesRes.ok) setStages(await stagesRes.json());
+  }
+
+  useEffect(() => { loadStages(); }, []);
+
+  async function addStage() {
+    if (!newStageName.trim() || !pipelineId) return;
+    const maxPos = stages.length > 0 ? Math.max(...stages.map((s) => s.position)) + 1 : 0;
+    const res = await fetch("/api/stages", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        name: newStageName.trim(),
+        position: maxPos,
+        probability: 0,
+        pipelineId,
+      }),
+    });
+    if (res.ok) {
+      toast.success("Stage added");
+      setNewStageName("");
+      loadStages();
+    }
+  }
+
+  async function updateStage(stage: Stage, updates: Partial<Stage>) {
+    const res = await fetch(`/api/stages/${stage.id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(updates),
+    });
+    if (res.ok) {
+      toast.success("Stage updated");
+      loadStages();
+    }
+  }
+
+  async function deleteStage() {
+    if (!deleteTarget) return;
+    const res = await fetch(`/api/stages/${deleteTarget.id}`, { method: "DELETE" });
+    if (res.ok) {
+      toast.success("Stage deleted");
+      loadStages();
+    } else {
+      const data = await res.json();
+      toast.error(data.error || "Failed to delete stage");
+    }
+    setDeleteTarget(null);
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <h1 className="text-2xl font-bold mb-6">Settings</h1>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Pipeline Stages</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {stages
+            .sort((a, b) => a.position - b.position)
+            .map((stage) => (
+              <div key={stage.id} className="flex items-center gap-3 p-2 border rounded-md">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+                <Input
+                  defaultValue={stage.name}
+                  className="flex-1"
+                  onBlur={(e) => {
+                    if (e.target.value !== stage.name) {
+                      updateStage(stage, { name: e.target.value });
+                    }
+                  }}
+                />
+                <div className="flex items-center gap-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    max={100}
+                    defaultValue={stage.probability}
+                    className="w-20"
+                    onBlur={(e) => {
+                      const val = parseInt(e.target.value);
+                      if (val !== stage.probability) {
+                        updateStage(stage, { probability: val });
+                      }
+                    }}
+                  />
+                  <span className="text-sm text-muted-foreground">%</span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-destructive"
+                  onClick={() => setDeleteTarget(stage)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+
+          <div className="flex gap-2 pt-2">
+            <Input
+              placeholder="New stage name..."
+              value={newStageName}
+              onChange={(e) => setNewStageName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addStage()}
+            />
+            <Button onClick={addStage} disabled={!newStageName.trim()}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Stage
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={() => setDeleteTarget(null)}
+        title="Delete Stage"
+        description={`Delete "${deleteTarget?.name}"? This only works if no deals are in this stage.`}
+        onConfirm={deleteStage}
+        destructive
+      />
+    </div>
+  );
+}

src/app/(auth)/login/page.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    const formData = new FormData(e.currentTarget);
+    const result = await signIn("credentials", {
+      email: formData.get("email") as string,
+      password: formData.get("password") as string,
+      redirect: false,
+    });
+
+    if (result?.error) {
+      setError("Invalid email or password");
+      setLoading(false);
+    } else {
+      router.push("/deals");
+      router.refresh();
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted/40">
+      <Card className="w-full max-w-sm">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl font-bold">PipeCRM</CardTitle>
+          <CardDescription>Sign in to your account</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="admin@local.host"
+                defaultValue="admin@local.host"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                defaultValue="admin123"
+                required
+              />
+            </div>
+            {error && (
+              <p className="text-sm text-destructive">{error}</p>
+            )}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Signing in..." : "Sign in"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/api/activities/[id]/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { activities } from "@/lib/db/schema";
+import { activitySchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, and } from "drizzle-orm";
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const body = await req.json();
+  const parsed = activitySchema.partial().safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const updated = db
+    .update(activities)
+    .set({ ...parsed.data, updatedAt: new Date().toISOString() })
+    .where(and(eq(activities.id, parseInt(id)), eq(activities.userId, parseInt(session.user.id))))
+    .returning()
+    .get();
+
+  if (!updated) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const deleted = db
+    .delete(activities)
+    .where(and(eq(activities.id, parseInt(id)), eq(activities.userId, parseInt(session.user.id))))
+    .returning()
+    .all();
+
+  if (!deleted.length) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json({ success: true });
+}

src/app/api/activities/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { activities, contacts, deals, companies } from "@/lib/db/schema";
+import { activitySchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, desc } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const type = req.nextUrl.searchParams.get("type");
+  const isDone = req.nextUrl.searchParams.get("isDone");
+  const dealId = req.nextUrl.searchParams.get("dealId");
+  const contactId = req.nextUrl.searchParams.get("contactId");
+  const companyId = req.nextUrl.searchParams.get("companyId");
+  const userId = parseInt(session.user.id);
+
+  let results = db
+    .select({
+      id: activities.id,
+      type: activities.type,
+      subject: activities.subject,
+      description: activities.description,
+      dueDate: activities.dueDate,
+      isDone: activities.isDone,
+      dealId: activities.dealId,
+      dealTitle: deals.title,
+      contactId: activities.contactId,
+      contactFirstName: contacts.firstName,
+      contactLastName: contacts.lastName,
+      companyId: activities.companyId,
+      companyName: companies.name,
+      createdAt: activities.createdAt,
+    })
+    .from(activities)
+    .leftJoin(deals, eq(activities.dealId, deals.id))
+    .leftJoin(contacts, eq(activities.contactId, contacts.id))
+    .leftJoin(companies, eq(activities.companyId, companies.id))
+    .where(eq(activities.userId, userId))
+    .orderBy(desc(activities.dueDate))
+    .all();
+
+  if (type) results = results.filter((a) => a.type === type);
+  if (isDone !== null && isDone !== undefined && isDone !== "") {
+    results = results.filter((a) => a.isDone === (isDone === "true"));
+  }
+  if (dealId) results = results.filter((a) => a.dealId === parseInt(dealId));
+  if (contactId) results = results.filter((a) => a.contactId === parseInt(contactId));
+  if (companyId) results = results.filter((a) => a.companyId === parseInt(companyId));
+
+  return NextResponse.json(results);
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = activitySchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const now = new Date().toISOString();
+  const activity = db
+    .insert(activities)
+    .values({
+      ...parsed.data,
+      userId: parseInt(session.user.id),
+      createdAt: now,
+      updatedAt: now,
+    })
+    .returning()
+    .get();
+
+  return NextResponse.json(activity, { status: 201 });
+}

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,2 @@
+import { handlers } from "@/lib/auth";
+export const { GET, POST } = handlers;

src/app/api/companies/[id]/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { companies } from "@/lib/db/schema";
+import { companySchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, and } from "drizzle-orm";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const company = db
+    .select()
+    .from(companies)
+    .where(and(eq(companies.id, parseInt(id)), eq(companies.userId, parseInt(session.user.id))))
+    .get();
+
+  if (!company) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(company);
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const body = await req.json();
+  const parsed = companySchema.partial().safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const updated = db
+    .update(companies)
+    .set({ ...parsed.data, updatedAt: new Date().toISOString() })
+    .where(and(eq(companies.id, parseInt(id)), eq(companies.userId, parseInt(session.user.id))))
+    .returning()
+    .get();
+
+  if (!updated) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const deleted = db
+    .delete(companies)
+    .where(and(eq(companies.id, parseInt(id)), eq(companies.userId, parseInt(session.user.id))))
+    .returning()
+    .all();
+
+  if (!deleted.length) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json({ success: true });
+}

src/app/api/companies/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { companies } from "@/lib/db/schema";
+import { companySchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, desc, like, or } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const search = req.nextUrl.searchParams.get("search") || "";
+  const page = parseInt(req.nextUrl.searchParams.get("page") || "1");
+  const limit = parseInt(req.nextUrl.searchParams.get("limit") || "20");
+  const offset = (page - 1) * limit;
+
+  const userId = parseInt(session.user.id);
+  const conditions = [eq(companies.userId, userId)];
+  if (search) {
+    conditions.push(
+      or(
+        like(companies.name, `%${search}%`),
+        like(companies.domain, `%${search}%`)
+      )!
+    );
+  }
+
+  const where = conditions.length > 1
+    ? (() => {
+        const [userCond, searchCond] = conditions;
+        return (t: any, { and }: any) => and(userCond, searchCond);
+      })()
+    : eq(companies.userId, userId);
+
+  const data = db
+    .select()
+    .from(companies)
+    .where(typeof where === "function" ? undefined : where)
+    .orderBy(desc(companies.createdAt))
+    .limit(limit)
+    .offset(offset)
+    .all();
+
+  // Re-do query with proper filtering
+  let results;
+  if (search) {
+    results = db
+      .select()
+      .from(companies)
+      .where(eq(companies.userId, userId))
+      .orderBy(desc(companies.createdAt))
+      .all()
+      .filter(
+        (c) =>
+          c.name.toLowerCase().includes(search.toLowerCase()) ||
+          (c.domain && c.domain.toLowerCase().includes(search.toLowerCase()))
+      );
+  } else {
+    results = db
+      .select()
+      .from(companies)
+      .where(eq(companies.userId, userId))
+      .orderBy(desc(companies.createdAt))
+      .all();
+  }
+
+  const total = results.length;
+  const paged = results.slice(offset, offset + limit);
+
+  return NextResponse.json({ data: paged, total, page, limit });
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = companySchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const now = new Date().toISOString();
+  const company = db
+    .insert(companies)
+    .values({
+      ...parsed.data,
+      userId: parseInt(session.user.id),
+      createdAt: now,
+      updatedAt: now,
+    })
+    .returning()
+    .get();
+
+  return NextResponse.json(company, { status: 201 });
+}

src/app/api/contacts/[id]/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { contacts, companies } from "@/lib/db/schema";
+import { contactSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, and } from "drizzle-orm";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const contact = db
+    .select({
+      id: contacts.id,
+      firstName: contacts.firstName,
+      lastName: contacts.lastName,
+      email: contacts.email,
+      phone: contacts.phone,
+      jobTitle: contacts.jobTitle,
+      companyId: contacts.companyId,
+      companyName: companies.name,
+      createdAt: contacts.createdAt,
+      updatedAt: contacts.updatedAt,
+    })
+    .from(contacts)
+    .leftJoin(companies, eq(contacts.companyId, companies.id))
+    .where(and(eq(contacts.id, parseInt(id)), eq(contacts.userId, parseInt(session.user.id))))
+    .get();
+
+  if (!contact) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(contact);
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const body = await req.json();
+  const parsed = contactSchema.partial().safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const updated = db
+    .update(contacts)
+    .set({ ...parsed.data, email: parsed.data.email || null, updatedAt: new Date().toISOString() })
+    .where(and(eq(contacts.id, parseInt(id)), eq(contacts.userId, parseInt(session.user.id))))
+    .returning()
+    .get();
+
+  if (!updated) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const deleted = db
+    .delete(contacts)
+    .where(and(eq(contacts.id, parseInt(id)), eq(contacts.userId, parseInt(session.user.id))))
+    .returning()
+    .all();
+
+  if (!deleted.length) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json({ success: true });
+}

src/app/api/contacts/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { contacts, companies } from "@/lib/db/schema";
+import { contactSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, desc } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const search = req.nextUrl.searchParams.get("search") || "";
+  const companyId = req.nextUrl.searchParams.get("companyId");
+  const page = parseInt(req.nextUrl.searchParams.get("page") || "1");
+  const limit = parseInt(req.nextUrl.searchParams.get("limit") || "20");
+  const offset = (page - 1) * limit;
+  const userId = parseInt(session.user.id);
+
+  let results = db
+    .select({
+      id: contacts.id,
+      firstName: contacts.firstName,
+      lastName: contacts.lastName,
+      email: contacts.email,
+      phone: contacts.phone,
+      jobTitle: contacts.jobTitle,
+      companyId: contacts.companyId,
+      companyName: companies.name,
+      createdAt: contacts.createdAt,
+      updatedAt: contacts.updatedAt,
+    })
+    .from(contacts)
+    .leftJoin(companies, eq(contacts.companyId, companies.id))
+    .where(eq(contacts.userId, userId))
+    .orderBy(desc(contacts.createdAt))
+    .all();
+
+  if (companyId) {
+    results = results.filter((c) => c.companyId === parseInt(companyId));
+  }
+  if (search) {
+    const s = search.toLowerCase();
+    results = results.filter(
+      (c) =>
+        c.firstName.toLowerCase().includes(s) ||
+        c.lastName.toLowerCase().includes(s) ||
+        (c.email && c.email.toLowerCase().includes(s)) ||
+        (c.companyName && c.companyName.toLowerCase().includes(s))
+    );
+  }
+
+  const total = results.length;
+  const paged = results.slice(offset, offset + limit);
+
+  return NextResponse.json({ data: paged, total, page, limit });
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = contactSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const now = new Date().toISOString();
+  const contact = db
+    .insert(contacts)
+    .values({
+      ...parsed.data,
+      email: parsed.data.email || null,
+      userId: parseInt(session.user.id),
+      createdAt: now,
+      updatedAt: now,
+    })
+    .returning()
+    .get();
+
+  return NextResponse.json(contact, { status: 201 });
+}

src/app/api/dashboard/route.ts

@@ -0,0 +1,106 @@
+import { NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { deals, activities, pipelineStages } from "@/lib/db/schema";
+import { auth } from "@/lib/auth";
+import { eq, desc } from "drizzle-orm";
+
+export async function GET() {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const userId = parseInt(session.user.id);
+
+  const allDeals = db.select().from(deals).where(eq(deals.userId, userId)).all();
+  const allStages = db.select().from(pipelineStages).all();
+  const allActivities = db
+    .select()
+    .from(activities)
+    .where(eq(activities.userId, userId))
+    .orderBy(desc(activities.createdAt))
+    .all();
+
+  const openDeals = allDeals.filter((d) => d.status === "open");
+  const wonDeals = allDeals.filter((d) => d.status === "won");
+  const lostDeals = allDeals.filter((d) => d.status === "lost");
+
+  // Summary cards
+  const totalOpenValue = openDeals.reduce((sum, d) => sum + d.value, 0);
+  const totalWonValue = wonDeals.reduce((sum, d) => sum + d.value, 0);
+  const winRate =
+    wonDeals.length + lostDeals.length > 0
+      ? Math.round((wonDeals.length / (wonDeals.length + lostDeals.length)) * 100)
+      : 0;
+
+  // Activities this week
+  const weekAgo = new Date();
+  weekAgo.setDate(weekAgo.getDate() - 7);
+  const weekStr = weekAgo.toISOString().split("T")[0];
+  const activitiesThisWeek = allActivities.filter(
+    (a) => a.dueDate && a.dueDate >= weekStr
+  ).length;
+
+  // Deals by stage
+  const stageMap = new Map(allStages.map((s) => [s.id, s]));
+  const dealsByStage = allStages
+    .sort((a, b) => a.position - b.position)
+    .map((stage) => {
+      const stageDeals = openDeals.filter((d) => d.stageId === stage.id);
+      return {
+        stage: stage.name,
+        count: stageDeals.length,
+        value: stageDeals.reduce((sum, d) => sum + d.value, 0),
+      };
+    });
+
+  // Revenue forecast (next 6 months, weighted by stage probability)
+  const forecast: { month: string; weighted: number; total: number }[] = [];
+  for (let i = 0; i < 6; i++) {
+    const date = new Date();
+    date.setMonth(date.getMonth() + i);
+    const monthStr = date.toISOString().slice(0, 7);
+    const monthLabel = date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+
+    const monthDeals = openDeals.filter(
+      (d) => d.expectedCloseDate && d.expectedCloseDate.slice(0, 7) === monthStr
+    );
+
+    const total = monthDeals.reduce((sum, d) => sum + d.value, 0);
+    const weighted = monthDeals.reduce((sum, d) => {
+      const stage = stageMap.get(d.stageId);
+      const prob = stage ? stage.probability / 100 : 0;
+      return sum + d.value * prob;
+    }, 0);
+
+    forecast.push({ month: monthLabel, weighted: Math.round(weighted), total: Math.round(total) });
+  }
+
+  // Won/Lost breakdown
+  const wonLost = [
+    { name: "Won", value: wonDeals.length },
+    { name: "Lost", value: lostDeals.length },
+  ];
+
+  // Recent activities
+  const recentActivities = allActivities.slice(0, 10).map((a) => ({
+    id: a.id,
+    type: a.type,
+    subject: a.subject,
+    dueDate: a.dueDate,
+    isDone: a.isDone,
+    createdAt: a.createdAt,
+  }));
+
+  return NextResponse.json({
+    summary: {
+      openDeals: openDeals.length,
+      totalOpenValue,
+      totalWonValue,
+      winRate,
+      activitiesThisWeek,
+    },
+    dealsByStage,
+    forecast,
+    wonLost,
+    recentActivities,
+  });
+}

src/app/api/deals/[id]/route.ts

@@ -0,0 +1,90 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { deals, contacts, companies, pipelineStages, activities } from "@/lib/db/schema";
+import { dealSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, and, desc } from "drizzle-orm";
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const deal = db
+    .select({
+      id: deals.id,
+      title: deals.title,
+      value: deals.value,
+      status: deals.status,
+      position: deals.position,
+      expectedCloseDate: deals.expectedCloseDate,
+      stageId: deals.stageId,
+      stageName: pipelineStages.name,
+      stageProbability: pipelineStages.probability,
+      contactId: deals.contactId,
+      contactFirstName: contacts.firstName,
+      contactLastName: contacts.lastName,
+      contactEmail: contacts.email,
+      companyId: deals.companyId,
+      companyName: companies.name,
+      pipelineId: deals.pipelineId,
+      createdAt: deals.createdAt,
+      updatedAt: deals.updatedAt,
+    })
+    .from(deals)
+    .leftJoin(contacts, eq(deals.contactId, contacts.id))
+    .leftJoin(companies, eq(deals.companyId, companies.id))
+    .leftJoin(pipelineStages, eq(deals.stageId, pipelineStages.id))
+    .where(and(eq(deals.id, parseInt(id)), eq(deals.userId, parseInt(session.user.id))))
+    .get();
+
+  if (!deal) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  // Get activities for this deal
+  const dealActivities = db
+    .select()
+    .from(activities)
+    .where(eq(activities.dealId, parseInt(id)))
+    .orderBy(desc(activities.createdAt))
+    .all();
+
+  return NextResponse.json({ ...deal, activities: dealActivities });
+}
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const body = await req.json();
+  const parsed = dealSchema.partial().safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const updated = db
+    .update(deals)
+    .set({ ...parsed.data, updatedAt: new Date().toISOString() })
+    .where(and(eq(deals.id, parseInt(id)), eq(deals.userId, parseInt(session.user.id))))
+    .returning()
+    .get();
+
+  if (!updated) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  // Delete associated activities first
+  db.delete(activities).where(eq(activities.dealId, parseInt(id))).run();
+
+  const deleted = db
+    .delete(deals)
+    .where(and(eq(deals.id, parseInt(id)), eq(deals.userId, parseInt(session.user.id))))
+    .returning()
+    .all();
+
+  if (!deleted.length) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json({ success: true });
+}

src/app/api/deals/reorder/route.ts

@@ -0,0 +1,76 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { deals } from "@/lib/db/schema";
+import { dealReorderSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, and } from "drizzle-orm";
+import Database from "better-sqlite3";
+import path from "path";
+
+export async function PATCH(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = dealReorderSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const { dealId, newStageId, newPosition } = parsed.data;
+  const userId = parseInt(session.user.id);
+
+  // Use raw sqlite for transaction
+  const dbPath = path.join(process.cwd(), "data", "crm.db");
+  const sqlite = new Database(dbPath);
+  sqlite.pragma("foreign_keys = ON");
+
+  const txn = sqlite.transaction(() => {
+    const now = new Date().toISOString();
+
+    // Get the deal's current stage
+    const deal = sqlite
+      .prepare("SELECT stage_id FROM deals WHERE id = ? AND user_id = ?")
+      .get(dealId, userId) as { stage_id: number } | undefined;
+
+    if (!deal) throw new Error("Deal not found");
+
+    const oldStageId = deal.stage_id;
+
+    // Update the deal's stage and position
+    sqlite
+      .prepare("UPDATE deals SET stage_id = ?, position = ?, updated_at = ? WHERE id = ?")
+      .run(newStageId, newPosition, now, dealId);
+
+    // Re-index positions in the new stage
+    const newStageDeals = sqlite
+      .prepare("SELECT id FROM deals WHERE stage_id = ? AND user_id = ? AND id != ? ORDER BY position")
+      .all(newStageId, userId, dealId) as { id: number }[];
+
+    // Insert the moved deal at the right position
+    const reordered = [...newStageDeals];
+    reordered.splice(newPosition, 0, { id: dealId });
+
+    reordered.forEach((d, idx) => {
+      sqlite.prepare("UPDATE deals SET position = ? WHERE id = ?").run(idx, d.id);
+    });
+
+    // Re-index positions in the old stage (if different)
+    if (oldStageId !== newStageId) {
+      const oldStageDeals = sqlite
+        .prepare("SELECT id FROM deals WHERE stage_id = ? AND user_id = ? ORDER BY position")
+        .all(oldStageId, userId) as { id: number }[];
+
+      oldStageDeals.forEach((d, idx) => {
+        sqlite.prepare("UPDATE deals SET position = ? WHERE id = ?").run(idx, d.id);
+      });
+    }
+  });
+
+  try {
+    txn();
+    sqlite.close();
+    return NextResponse.json({ success: true });
+  } catch (e: any) {
+    sqlite.close();
+    return NextResponse.json({ error: e.message }, { status: 400 });
+  }
+}

src/app/api/deals/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { deals, contacts, companies, pipelineStages } from "@/lib/db/schema";
+import { dealSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, desc } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const pipelineId = req.nextUrl.searchParams.get("pipelineId");
+  const status = req.nextUrl.searchParams.get("status");
+  const userId = parseInt(session.user.id);
+
+  let results = db
+    .select({
+      id: deals.id,
+      title: deals.title,
+      value: deals.value,
+      status: deals.status,
+      position: deals.position,
+      expectedCloseDate: deals.expectedCloseDate,
+      stageId: deals.stageId,
+      stageName: pipelineStages.name,
+      contactId: deals.contactId,
+      contactFirstName: contacts.firstName,
+      contactLastName: contacts.lastName,
+      companyId: deals.companyId,
+      companyName: companies.name,
+      pipelineId: deals.pipelineId,
+      createdAt: deals.createdAt,
+      updatedAt: deals.updatedAt,
+    })
+    .from(deals)
+    .leftJoin(contacts, eq(deals.contactId, contacts.id))
+    .leftJoin(companies, eq(deals.companyId, companies.id))
+    .leftJoin(pipelineStages, eq(deals.stageId, pipelineStages.id))
+    .where(eq(deals.userId, userId))
+    .orderBy(deals.position)
+    .all();
+
+  if (pipelineId) {
+    results = results.filter((d) => d.pipelineId === parseInt(pipelineId));
+  }
+  if (status) {
+    results = results.filter((d) => d.status === status);
+  }
+
+  return NextResponse.json(results);
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = dealSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  // Get max position in the target stage
+  const existing = db
+    .select({ position: deals.position })
+    .from(deals)
+    .where(eq(deals.stageId, parsed.data.stageId))
+    .all();
+  const maxPos = existing.length > 0 ? Math.max(...existing.map((d) => d.position)) + 1 : 0;
+
+  const now = new Date().toISOString();
+  const deal = db
+    .insert(deals)
+    .values({
+      ...parsed.data,
+      position: maxPos,
+      userId: parseInt(session.user.id),
+      createdAt: now,
+      updatedAt: now,
+    })
+    .returning()
+    .get();
+
+  return NextResponse.json(deal, { status: 201 });
+}

src/app/api/pipelines/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { pipelines, pipelineStages } from "@/lib/db/schema";
+import { auth } from "@/lib/auth";
+import { eq } from "drizzle-orm";
+
+export async function GET() {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const userId = parseInt(session.user.id);
+  const results = db
+    .select()
+    .from(pipelines)
+    .where(eq(pipelines.userId, userId))
+    .all();
+
+  return NextResponse.json(results);
+}

src/app/api/search/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { deals, contacts, companies } from "@/lib/db/schema";
+import { auth } from "@/lib/auth";
+import { eq } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const q = (req.nextUrl.searchParams.get("q") || "").toLowerCase();
+  if (q.length < 2) return NextResponse.json([]);
+
+  const userId = parseInt(session.user.id);
+
+  const allDeals = db.select().from(deals).where(eq(deals.userId, userId)).all();
+  const allContacts = db.select().from(contacts).where(eq(contacts.userId, userId)).all();
+  const allCompanies = db.select().from(companies).where(eq(companies.userId, userId)).all();
+
+  const results: { id: number; type: string; title: string; subtitle: string }[] = [];
+
+  allDeals
+    .filter((d) => d.title.toLowerCase().includes(q))
+    .slice(0, 5)
+    .forEach((d) =>
+      results.push({
+        id: d.id,
+        type: "deal",
+        title: d.title,
+        subtitle: `$${d.value.toLocaleString()} - ${d.status}`,
+      })
+    );
+
+  allContacts
+    .filter(
+      (c) =>
+        c.firstName.toLowerCase().includes(q) ||
+        c.lastName.toLowerCase().includes(q) ||
+        (c.email && c.email.toLowerCase().includes(q))
+    )
+    .slice(0, 5)
+    .forEach((c) =>
+      results.push({
+        id: c.id,
+        type: "contact",
+        title: `${c.firstName} ${c.lastName}`,
+        subtitle: c.email || c.jobTitle || "",
+      })
+    );
+
+  allCompanies
+    .filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        (c.domain && c.domain.toLowerCase().includes(q))
+    )
+    .slice(0, 5)
+    .forEach((c) =>
+      results.push({
+        id: c.id,
+        type: "company",
+        title: c.name,
+        subtitle: c.domain || "",
+      })
+    );
+
+  return NextResponse.json(results.slice(0, 15));
+}

src/app/api/stages/[id]/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { pipelineStages, deals } from "@/lib/db/schema";
+import { stageSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq } from "drizzle-orm";
+
+export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  const body = await req.json();
+  const parsed = stageSchema.partial().safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const updated = db
+    .update(pipelineStages)
+    .set(parsed.data)
+    .where(eq(pipelineStages.id, parseInt(id)))
+    .returning()
+    .get();
+
+  if (!updated) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(updated);
+}
+
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const { id } = await params;
+  // Check for deals in this stage
+  const dealsInStage = db
+    .select()
+    .from(deals)
+    .where(eq(deals.stageId, parseInt(id)))
+    .all();
+
+  if (dealsInStage.length > 0) {
+    return NextResponse.json(
+      { error: "Cannot delete stage with existing deals. Move or delete deals first." },
+      { status: 400 }
+    );
+  }
+
+  const deleted = db
+    .delete(pipelineStages)
+    .where(eq(pipelineStages.id, parseInt(id)))
+    .returning()
+    .all();
+
+  if (!deleted.length) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json({ success: true });
+}

src/app/api/stages/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { pipelineStages } from "@/lib/db/schema";
+import { stageSchema } from "@/lib/validators";
+import { auth } from "@/lib/auth";
+import { eq, asc } from "drizzle-orm";
+
+export async function GET(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const pipelineId = req.nextUrl.searchParams.get("pipelineId");
+  let results = db
+    .select()
+    .from(pipelineStages)
+    .orderBy(asc(pipelineStages.position))
+    .all();
+
+  if (pipelineId) {
+    results = results.filter((s) => s.pipelineId === parseInt(pipelineId));
+  }
+
+  return NextResponse.json(results);
+}
+
+export async function POST(req: NextRequest) {
+  const session = await auth();
+  if (!session?.user?.id) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = await req.json();
+  const parsed = stageSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+
+  const now = new Date().toISOString();
+  const stage = db
+    .insert(pipelineStages)
+    .values({ ...parsed.data, createdAt: now })
+    .returning()
+    .get();
+
+  return NextResponse.json(stage, { status: 201 });
+}

src/app/globals.css

@@ -1,26 +1,126 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "PipeCRM",
+  description: "CRM with deal pipelines, contacts, and activity tracking",
 };
 
 export default function RootLayout({
@@ -28,6 +29,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Toaster />
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,65 +1,5 @@
-import Image from "next/image";
+import { redirect } from "next/navigation";
 
 export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
+  redirect("/deals");
 }

src/components/activities/activity-form.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent } from "@/components/ui/card";
+import { Phone, Mail, Calendar, CheckSquare, StickyNote } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const activityTypes = [
+  { value: "call", label: "Call", icon: Phone },
+  { value: "email", label: "Email", icon: Mail },
+  { value: "meeting", label: "Meeting", icon: Calendar },
+  { value: "task", label: "Task", icon: CheckSquare },
+  { value: "note", label: "Note", icon: StickyNote },
+];
+
+type Props = {
+  dealId?: number | null;
+  contactId?: number | null;
+  companyId?: number | null;
+  onSuccess: () => void;
+  onCancel: () => void;
+};
+
+export function ActivityForm({ dealId, contactId, companyId, onSuccess, onCancel }: Props) {
+  const [type, setType] = useState("call");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+
+    const form = new FormData(e.currentTarget);
+    const data = {
+      type,
+      subject: form.get("subject") as string,
+      description: (form.get("description") as string) || null,
+      dueDate: (form.get("dueDate") as string) || null,
+      isDone: false,
+      dealId: dealId || null,
+      contactId: contactId || null,
+      companyId: companyId || null,
+    };
+
+    const res = await fetch("/api/activities", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    setLoading(false);
+    if (res.ok) onSuccess();
+  }
+
+  return (
+    <Card>
+      <CardContent className="pt-4">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="flex gap-2">
+            {activityTypes.map((t) => (
+              <Button
+                key={t.value}
+                type="button"
+                variant={type === t.value ? "default" : "outline"}
+                size="sm"
+                onClick={() => setType(t.value)}
+                className="gap-1"
+              >
+                <t.icon className="h-3 w-3" />
+                {t.label}
+              </Button>
+            ))}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="subject">Subject</Label>
+            <Input id="subject" name="subject" required placeholder="What needs to be done?" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea id="description" name="description" placeholder="Optional details..." rows={2} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="dueDate">Due Date</Label>
+            <Input id="dueDate" name="dueDate" type="date" defaultValue={new Date().toISOString().split("T")[0]} />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" size="sm" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" disabled={loading}>
+              {loading ? "Adding..." : "Add Activity"}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

src/components/activities/activity-item.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { formatDate } from "@/lib/utils";
+import { Phone, Mail, Calendar, CheckSquare, StickyNote } from "lucide-react";
+import Link from "next/link";
+
+const typeIcons = {
+  call: Phone,
+  email: Mail,
+  meeting: Calendar,
+  task: CheckSquare,
+  note: StickyNote,
+};
+
+const typeColors: Record<string, string> = {
+  call: "bg-blue-100 text-blue-800",
+  email: "bg-purple-100 text-purple-800",
+  meeting: "bg-orange-100 text-orange-800",
+  task: "bg-green-100 text-green-800",
+  note: "bg-gray-100 text-gray-800",
+};
+
+type Props = {
+  activity: {
+    id: number;
+    type: string;
+    subject: string;
+    dueDate: string | null;
+    isDone: boolean;
+    dealId?: number | null;
+    dealTitle?: string | null;
+    contactId?: number | null;
+    contactFirstName?: string | null;
+    contactLastName?: string | null;
+    companyId?: number | null;
+    companyName?: string | null;
+  };
+  onToggle: () => void;
+};
+
+export function ActivityItem({ activity, onToggle }: Props) {
+  const Icon = typeIcons[activity.type as keyof typeof typeIcons] || StickyNote;
+
+  return (
+    <div className="flex items-start gap-3 p-3 rounded-lg border">
+      <Checkbox
+        checked={activity.isDone}
+        onCheckedChange={onToggle}
+        className="mt-0.5"
+      />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1">
+          <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <span className={`text-sm font-medium ${activity.isDone ? "line-through text-muted-foreground" : ""}`}>
+            {activity.subject}
+          </span>
+        </div>
+        <div className="flex flex-wrap gap-1.5">
+          <Badge variant="outline" className={`text-xs ${typeColors[activity.type]}`}>
+            {activity.type}
+          </Badge>
+          {activity.dueDate && (
+            <span className="text-xs text-muted-foreground">
+              {formatDate(activity.dueDate)}
+            </span>
+          )}
+          {activity.dealTitle && (
+            <Link href={`/deals/${activity.dealId}`} className="text-xs text-primary hover:underline">
+              {activity.dealTitle}
+            </Link>
+          )}
+          {activity.contactFirstName && (
+            <Link href={`/contacts/${activity.contactId}`} className="text-xs text-primary hover:underline">
+              {activity.contactFirstName} {activity.contactLastName}
+            </Link>
+          )}
+          {activity.companyName && (
+            <Link href={`/companies/${activity.companyId}`} className="text-xs text-primary hover:underline">
+              {activity.companyName}
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/deals/deal-form.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Deal, Stage } from "./kanban-board";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deal: Deal | null;
+  stages: Stage[];
+  contacts: { id: number; firstName: string; lastName: string; companyId: number | null }[];
+  companies: { id: number; name: string }[];
+  pipelineId: number;
+  onSuccess: () => void;
+};
+
+export function DealFormDialog({
+  open,
+  onOpenChange,
+  deal,
+  stages,
+  contacts,
+  companies,
+  pipelineId,
+  onSuccess,
+}: Props) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+
+    const form = new FormData(e.currentTarget);
+    const data = {
+      title: form.get("title") as string,
+      value: parseFloat(form.get("value") as string) || 0,
+      stageId: parseInt(form.get("stageId") as string),
+      contactId: form.get("contactId") ? parseInt(form.get("contactId") as string) : null,
+      companyId: form.get("companyId") ? parseInt(form.get("companyId") as string) : null,
+      expectedCloseDate: (form.get("expectedCloseDate") as string) || null,
+      pipelineId,
+    };
+
+    const url = deal ? `/api/deals/${deal.id}` : "/api/deals";
+    const method = deal ? "PATCH" : "POST";
+
+    const res = await fetch(url, {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    setLoading(false);
+    if (res.ok) onSuccess();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{deal ? "Edit Deal" : "New Deal"}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="title">Title</Label>
+            <Input id="title" name="title" defaultValue={deal?.title} required />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="value">Value ($)</Label>
+            <Input
+              id="value"
+              name="value"
+              type="number"
+              step="0.01"
+              defaultValue={deal?.value || ""}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Stage</Label>
+            <Select name="stageId" defaultValue={String(deal?.stageId || stages[0]?.id)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {stages
+                  .sort((a, b) => a.position - b.position)
+                  .map((s) => (
+                    <SelectItem key={s.id} value={String(s.id)}>
+                      {s.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>Contact</Label>
+            <Select name="contactId" defaultValue={deal?.contactId ? String(deal.contactId) : ""}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select contact..." />
+              </SelectTrigger>
+              <SelectContent>
+                {contacts.map((c) => (
+                  <SelectItem key={c.id} value={String(c.id)}>
+                    {c.firstName} {c.lastName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label>Company</Label>
+            <Select name="companyId" defaultValue={deal?.companyId ? String(deal.companyId) : ""}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select company..." />
+              </SelectTrigger>
+              <SelectContent>
+                {companies.map((c) => (
+                  <SelectItem key={c.id} value={String(c.id)}>
+                    {c.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="expectedCloseDate">Expected Close Date</Label>
+            <Input
+              id="expectedCloseDate"
+              name="expectedCloseDate"
+              type="date"
+              defaultValue={deal?.expectedCloseDate || ""}
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : deal ? "Update" : "Create"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/deals/kanban-board.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragStartEvent,
+  DragEndEvent,
+  DragOverEvent,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { KanbanColumn } from "./kanban-column";
+import { KanbanCard } from "./kanban-card";
+import { DealFormDialog } from "./deal-form";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+
+export type Deal = {
+  id: number;
+  title: string;
+  value: number;
+  status: string;
+  position: number;
+  expectedCloseDate: string | null;
+  stageId: number;
+  stageName: string | null;
+  contactId: number | null;
+  contactFirstName: string | null;
+  contactLastName: string | null;
+  companyId: number | null;
+  companyName: string | null;
+  pipelineId: number;
+};
+
+export type Stage = {
+  id: number;
+  name: string;
+  position: number;
+  probability: number;
+  pipelineId: number;
+};
+
+type Props = {
+  initialDeals: Deal[];
+  stages: Stage[];
+  pipelineId: number;
+  contacts: { id: number; firstName: string; lastName: string; companyId: number | null }[];
+  companies: { id: number; name: string }[];
+};
+
+export function KanbanBoard({ initialDeals, stages, pipelineId, contacts, companies }: Props) {
+  const [deals, setDeals] = useState<Deal[]>(initialDeals);
+  const [activeId, setActiveId] = useState<number | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [editingDeal, setEditingDeal] = useState<Deal | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const activeDeal = deals.find((d) => d.id === activeId);
+
+  function getDealsByStage(stageId: number) {
+    return deals
+      .filter((d) => d.stageId === stageId)
+      .sort((a, b) => a.position - b.position);
+  }
+
+  function handleDragStart(event: DragStartEvent) {
+    setActiveId(event.active.id as number);
+  }
+
+  function handleDragOver(event: DragOverEvent) {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id as number;
+    const overId = over.id;
+
+    const activeDeal = deals.find((d) => d.id === activeId);
+    if (!activeDeal) return;
+
+    // Determine target stage
+    let targetStageId: number;
+    const overDeal = deals.find((d) => d.id === overId);
+    if (overDeal) {
+      targetStageId = overDeal.stageId;
+    } else {
+      // Over a column
+      targetStageId = overId as number;
+    }
+
+    if (activeDeal.stageId !== targetStageId) {
+      setDeals((prev) => {
+        const updated = prev.map((d) =>
+          d.id === activeId ? { ...d, stageId: targetStageId } : d
+        );
+        return updated;
+      });
+    }
+  }
+
+  async function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    setActiveId(null);
+
+    if (!over) return;
+
+    const activeId = active.id as number;
+    const overId = over.id;
+
+    const activeDeal = deals.find((d) => d.id === activeId);
+    if (!activeDeal) return;
+
+    let targetStageId = activeDeal.stageId;
+    let newPosition = 0;
+
+    const overDeal = deals.find((d) => d.id === overId);
+    if (overDeal) {
+      targetStageId = overDeal.stageId;
+      const stageDeals = getDealsByStage(targetStageId).filter((d) => d.id !== activeId);
+      const overIndex = stageDeals.findIndex((d) => d.id === overId);
+      newPosition = overIndex >= 0 ? overIndex : stageDeals.length;
+    } else {
+      targetStageId = overId as number;
+      newPosition = getDealsByStage(targetStageId).filter((d) => d.id !== activeId).length;
+    }
+
+    // Optimistic update
+    setDeals((prev) => {
+      const updated = prev.map((d) =>
+        d.id === activeId ? { ...d, stageId: targetStageId, position: newPosition } : d
+      );
+      // Re-index positions
+      const stageDeals = updated
+        .filter((d) => d.stageId === targetStageId && d.id !== activeId)
+        .sort((a, b) => a.position - b.position);
+      stageDeals.splice(newPosition, 0, { ...activeDeal, stageId: targetStageId });
+      const reindexed = stageDeals.map((d, i) => ({ ...d, position: i }));
+
+      return updated.map((d) => {
+        const reindexedDeal = reindexed.find((r) => r.id === d.id);
+        return reindexedDeal || d;
+      });
+    });
+
+    try {
+      await fetch("/api/deals/reorder", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ dealId: activeId, newStageId: targetStageId, newPosition }),
+      });
+    } catch {
+      toast.error("Failed to reorder deal");
+    }
+  }
+
+  async function handleDealCreated() {
+    const res = await fetch(`/api/deals?pipelineId=${pipelineId}`);
+    if (res.ok) setDeals(await res.json());
+    setShowForm(false);
+    setEditingDeal(null);
+    toast.success("Deal saved");
+  }
+
+  async function handleDealDeleted(dealId: number) {
+    await fetch(`/api/deals/${dealId}`, { method: "DELETE" });
+    setDeals((prev) => prev.filter((d) => d.id !== dealId));
+    toast.success("Deal deleted");
+  }
+
+  const stageValue = (stageId: number) =>
+    deals
+      .filter((d) => d.stageId === stageId)
+      .reduce((sum, d) => sum + d.value, 0);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-bold">Deals</h1>
+        <Button onClick={() => { setEditingDeal(null); setShowForm(true); }}>
+          <Plus className="h-4 w-4 mr-2" />
+          Add Deal
+        </Button>
+      </div>
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCorners}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex gap-4 overflow-x-auto pb-4">
+          {stages
+            .sort((a, b) => a.position - b.position)
+            .map((stage) => (
+              <KanbanColumn
+                key={stage.id}
+                stage={stage}
+                deals={getDealsByStage(stage.id)}
+                totalValue={stageValue(stage.id)}
+                onEdit={(deal) => { setEditingDeal(deal); setShowForm(true); }}
+                onDelete={handleDealDeleted}
+              />
+            ))}
+        </div>
+
+        <DragOverlay>
+          {activeDeal ? <KanbanCard deal={activeDeal} isOverlay /> : null}
+        </DragOverlay>
+      </DndContext>
+
+      <DealFormDialog
+        open={showForm}
+        onOpenChange={setShowForm}
+        deal={editingDeal}
+        stages={stages}
+        contacts={contacts}
+        companies={companies}
+        pipelineId={pipelineId}
+        onSuccess={handleDealCreated}
+      />
+    </div>
+  );
+}

src/components/deals/kanban-card.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreHorizontal, Pencil, Trash2, Calendar, User, Building2 } from "lucide-react";
+import { formatCurrency, formatDate } from "@/lib/utils";
+import Link from "next/link";
+import type { Deal } from "./kanban-board";
+
+type Props = {
+  deal: Deal;
+  isOverlay?: boolean;
+  onEdit?: () => void;
+  onDelete?: () => void;
+};
+
+export function KanbanCard({ deal, isOverlay, onEdit, onDelete }: Props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: deal.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={`p-3 cursor-grab active:cursor-grabbing ${
+        isOverlay ? "shadow-lg ring-2 ring-primary" : ""
+      }`}
+    >
+      <div className="flex items-start justify-between">
+        <Link href={`/deals/${deal.id}`} className="hover:underline flex-1" onClick={(e) => e.stopPropagation()}>
+          <h4 className="text-sm font-medium leading-tight">{deal.title}</h4>
+        </Link>
+        {!isOverlay && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <MoreHorizontal className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onEdit}>
+                <Pencil className="h-3 w-3 mr-2" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                <Trash2 className="h-3 w-3 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+      <p className="text-sm font-semibold text-primary mt-1">
+        {formatCurrency(deal.value)}
+      </p>
+      <div className="flex flex-wrap gap-1 mt-2 text-xs text-muted-foreground">
+        {deal.contactFirstName && (
+          <span className="flex items-center gap-1">
+            <User className="h-3 w-3" />
+            {deal.contactFirstName} {deal.contactLastName}
+          </span>
+        )}
+        {deal.companyName && (
+          <span className="flex items-center gap-1">
+            <Building2 className="h-3 w-3" />
+            {deal.companyName}
+          </span>
+        )}
+        {deal.expectedCloseDate && (
+          <span className="flex items-center gap-1">
+            <Calendar className="h-3 w-3" />
+            {formatDate(deal.expectedCloseDate)}
+          </span>
+        )}
+      </div>
+    </Card>
+  );
+}

src/components/deals/kanban-column.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { KanbanCard } from "./kanban-card";
+import { formatCurrency } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { Deal, Stage } from "./kanban-board";
+
+type Props = {
+  stage: Stage;
+  deals: Deal[];
+  totalValue: number;
+  onEdit: (deal: Deal) => void;
+  onDelete: (dealId: number) => void;
+};
+
+export function KanbanColumn({ stage, deals, totalValue, onEdit, onDelete }: Props) {
+  const { setNodeRef, isOver } = useDroppable({ id: stage.id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`flex flex-col w-72 min-w-72 rounded-lg bg-muted/50 ${
+        isOver ? "ring-2 ring-primary/50" : ""
+      }`}
+    >
+      <div className="p-3 border-b">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold text-sm">{stage.name}</h3>
+          <span className="text-xs text-muted-foreground bg-muted rounded-full px-2 py-0.5">
+            {deals.length}
+          </span>
+        </div>
+        <p className="text-xs text-muted-foreground mt-1">
+          {formatCurrency(totalValue)}
+        </p>
+      </div>
+      <ScrollArea className="flex-1 p-2" style={{ maxHeight: "calc(100vh - 240px)" }}>
+        <SortableContext
+          items={deals.map((d) => d.id)}
+          strategy={verticalListSortingStrategy}
+        >
+          <div className="space-y-2 min-h-[40px]">
+            {deals.map((deal) => (
+              <KanbanCard
+                key={deal.id}
+                deal={deal}
+                onEdit={() => onEdit(deal)}
+                onDelete={() => onDelete(deal.id)}
+              />
+            ))}
+          </div>
+        </SortableContext>
+      </ScrollArea>
+    </div>
+  );
+}

src/components/layout/sidebar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import {
+  LayoutDashboard,
+  Handshake,
+  Users,
+  Building2,
+  CalendarCheck,
+  Settings,
+  ChevronLeft,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+const navItems = [
+  { href: "/deals", label: "Deals", icon: Handshake },
+  { href: "/contacts", label: "Contacts", icon: Users },
+  { href: "/companies", label: "Companies", icon: Building2 },
+  { href: "/activities", label: "Activities", icon: CalendarCheck },
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/settings", label: "Settings", icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <aside
+      className={cn(
+        "flex flex-col bg-zinc-900 text-zinc-100 transition-all duration-200 h-screen sticky top-0",
+        collapsed ? "w-16" : "w-60"
+      )}
+    >
+      <div className="flex items-center justify-between px-4 h-14 border-b border-zinc-800">
+        {!collapsed && (
+          <Link href="/deals" className="text-lg font-bold tracking-tight">
+            PipeCRM
+          </Link>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="text-zinc-400 hover:text-zinc-100 hover:bg-zinc-800 ml-auto"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <ChevronLeft
+            className={cn("h-4 w-4 transition-transform", collapsed && "rotate-180")}
+          />
+        </Button>
+      </div>
+      <nav className="flex-1 py-4 space-y-1 px-2">
+        {navItems.map((item) => {
+          const isActive = pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                isActive
+                  ? "bg-zinc-800 text-white"
+                  : "text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-100"
+              )}
+            >
+              <item.icon className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>{item.label}</span>}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

src/components/layout/topbar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { signOut, useSession } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { LogOut, Search } from "lucide-react";
+import { GlobalSearch } from "@/components/shared/global-search";
+
+export function Topbar() {
+  const { data: session } = useSession();
+  const initials = session?.user?.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase() || "U";
+
+  return (
+    <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-6">
+      <GlobalSearch />
+      <div className="ml-auto flex items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+              <Avatar className="h-8 w-8">
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                  {initials}
+                </AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem className="text-sm text-muted-foreground" disabled>
+              {session?.user?.email}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  onConfirm: () => void;
+  destructive?: boolean;
+};
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  destructive,
+}: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant={destructive ? "destructive" : "default"}
+            onClick={() => {
+              onConfirm();
+              onOpenChange(false);
+            }}
+          >
+            Confirm
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/shared/data-table.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight, ChevronsUpDown, ChevronUp, ChevronDown } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  onRowClick?: (row: TData) => void;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  onRowClick,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+    initialState: { pagination: { pageSize: 15 } },
+  });
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className={header.column.getCanSort() ? "cursor-pointer select-none" : ""}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    <div className="flex items-center gap-1">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                      {header.column.getCanSort() && (
+                        <span className="ml-1">
+                          {header.column.getIsSorted() === "asc" ? (
+                            <ChevronUp className="h-3 w-3" />
+                          ) : header.column.getIsSorted() === "desc" ? (
+                            <ChevronDown className="h-3 w-3" />
+                          ) : (
+                            <ChevronsUpDown className="h-3 w-3 text-muted-foreground/50" />
+                          )}
+                        </span>
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className={onRowClick ? "cursor-pointer" : ""}
+                  onClick={() => onRowClick?.(row.original)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-between py-4">
+        <p className="text-sm text-muted-foreground">
+          {table.getFilteredRowModel().rows.length} row(s)
+        </p>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/shared/global-search.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Search, Handshake, Users, Building2 } from "lucide-react";
+
+type SearchResult = {
+  id: number;
+  type: "deal" | "contact" | "company";
+  title: string;
+  subtitle: string;
+};
+
+export function GlobalSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const router = useRouter();
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
+  useEffect(() => {
+    if (!query || query.length < 2) {
+      setResults([]);
+      return;
+    }
+    const timer = setTimeout(async () => {
+      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      if (res.ok) setResults(await res.json());
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  function handleSelect(result: SearchResult) {
+    setOpen(false);
+    setQuery("");
+    const paths = {
+      deal: `/deals/${result.id}`,
+      contact: `/contacts/${result.id}`,
+      company: `/companies/${result.id}`,
+    };
+    router.push(paths[result.type]);
+  }
+
+  const icons = {
+    deal: Handshake,
+    contact: Users,
+    company: Building2,
+  };
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className="relative h-9 w-full max-w-sm justify-start text-sm text-muted-foreground"
+        onClick={() => setOpen(true)}
+      >
+        <Search className="mr-2 h-4 w-4" />
+        Search...
+        <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100">
+          <span className="text-xs">&#8984;</span>K
+        </kbd>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput
+          placeholder="Search deals, contacts, companies..."
+          value={query}
+          onValueChange={setQuery}
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {results.length > 0 && (
+            <CommandGroup heading="Results">
+              {results.map((r) => {
+                const Icon = icons[r.type];
+                return (
+                  <CommandItem
+                    key={`${r.type}-${r.id}`}
+                    onSelect={() => handleSelect(r)}
+                  >
+                    <Icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-sm font-medium">{r.title}</div>
+                      <div className="text-xs text-muted-foreground">{r.subtitle}</div>
+                    </div>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}