npm - create-crm-starter - Versions diffs - 0.1.0 - Mend

create-crm-starter 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (261) hide show

package/template/extras/db-convex/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { Providers } from '@/components/providers';
+export const metadata: Metadata = {
+  title: 'CRM',
+  description: 'A home-services CRM built with create-crm-starter',
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground min-h-screen antialiased">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/extras/db-convex/src/components/providers.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+'use client';
+import { ClerkProvider, useAuth } from '@clerk/nextjs';
+import { ConvexProviderWithClerk } from 'convex/react-clerk';
+import { ConvexReactClient } from 'convex/react';
+// Use a placeholder URL when env is unset so client construction doesn't throw
+// during a build before the user has run `npx convex dev`.
+const convexUrl =
+  process.env.NEXT_PUBLIC_CONVEX_URL && process.env.NEXT_PUBLIC_CONVEX_URL.startsWith('http')
+    ? process.env.NEXT_PUBLIC_CONVEX_URL
+    : 'https://placeholder.convex.cloud';
+const convex = new ConvexReactClient(convexUrl);
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider
+      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
+      signInUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL ?? '/sign-in'}
+      signUpUrl={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL ?? '/sign-up'}
+    >
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        {children}
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+  );
+}

package/template/extras/db-convex/src/lib/convex.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ConvexHttpClient } from 'convex/browser';
+// Server-side Convex HTTP client for use in server actions / route handlers.
+export function convexServer() {
+  return new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL ?? '');
+}

package/template/extras/db-drizzle-pg/docker-compose.yml ADDED Viewed

@@ -0,0 +1,21 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: crm-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: crm
+    ports:
+      - '5432:5432'
+    volumes:
+      - crm-pgdata:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+volumes:
+  crm-pgdata:

package/template/extras/db-drizzle-pg/drizzle.config.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { defineConfig } from 'drizzle-kit';
+import { config } from 'dotenv';
+// drizzle-kit is a standalone CLI — it does NOT auto-load Next's env files.
+// Load .env.local first (takes precedence) then .env, so `pnpm db:push` /
+// `db:generate` / `db:studio` find DATABASE_URL from the same .env.local
+// the Next app uses.
+config({ path: '.env.local' });
+config({ path: '.env' });
+export default defineConfig({
+  schema: './src/db/schema/index.ts',
+  out: './drizzle',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+  verbose: true,
+  // `strict: true` makes `drizzle-kit push` ask for approval before every
+  // change — which hangs in CI / non-interactive shells. Left off so a fresh
+  // `pnpm db:push` applies cleanly first-try. drizzle-kit still warns before
+  // genuinely destructive ops interactively.
+  strict: false,
+});

package/template/extras/db-drizzle-pg/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import { Providers } from '@/components/providers';
+export const metadata: Metadata = {
+  title: 'CRM',
+  description: 'A home-services CRM built with create-crm-starter',
+};
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en">
+      <body className="bg-background text-foreground min-h-screen antialiased">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/extras/db-drizzle-pg/src/components/providers.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+'use client';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [client] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: { staleTime: 30_000, refetchOnWindowFocus: false },
+        },
+      }),
+  );
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}

package/template/extras/db-drizzle-pg/src/db/client.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+import * as schema from './schema';
+const connectionString = process.env.DATABASE_URL ?? 'postgres://postgres:postgres@localhost:5432/crm';
+// Reuse the postgres client across hot reloads in dev.
+const globalForDb = globalThis as unknown as { __pg?: ReturnType<typeof postgres> };
+const client = globalForDb.__pg ?? postgres(connectionString, { prepare: false, max: 10 });
+if (process.env.NODE_ENV !== 'production') globalForDb.__pg = client;
+export const db = drizzle(client, { schema });
+export type DB = typeof db;

package/template/extras/db-drizzle-pg/src/db/schema/auth.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import { pgTable, text, timestamp, boolean } from 'drizzle-orm/pg-core';
+/**
+ * Tables required by Better-Auth. Names and shapes match Better-Auth's
+ * drizzle adapter expectations. Do not rename without updating the adapter
+ * config in `src/lib/auth.ts`.
+ */
+export const user = pgTable('user', {
+  id: text('id').primaryKey(),
+  name: text('name').notNull(),
+  email: text('email').notNull().unique(),
+  emailVerified: boolean('emailVerified').notNull().default(false),
+  image: text('image'),
+  // App-specific: role for RBAC.
+  role: text('role').notNull().default('csr'),
+  createdAt: timestamp('createdAt').notNull().defaultNow(),
+  updatedAt: timestamp('updatedAt').notNull().defaultNow(),
+});
+export const session = pgTable('session', {
+  id: text('id').primaryKey(),
+  userId: text('userId')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+  token: text('token').notNull().unique(),
+  expiresAt: timestamp('expiresAt').notNull(),
+  ipAddress: text('ipAddress'),
+  userAgent: text('userAgent'),
+  createdAt: timestamp('createdAt').notNull().defaultNow(),
+  updatedAt: timestamp('updatedAt').notNull().defaultNow(),
+});
+export const account = pgTable('account', {
+  id: text('id').primaryKey(),
+  userId: text('userId')
+    .notNull()
+    .references(() => user.id, { onDelete: 'cascade' }),
+  accountId: text('accountId').notNull(),
+  providerId: text('providerId').notNull(),
+  accessToken: text('accessToken'),
+  refreshToken: text('refreshToken'),
+  idToken: text('idToken'),
+  accessTokenExpiresAt: timestamp('accessTokenExpiresAt'),
+  refreshTokenExpiresAt: timestamp('refreshTokenExpiresAt'),
+  scope: text('scope'),
+  password: text('password'),
+  createdAt: timestamp('createdAt').notNull().defaultNow(),
+  updatedAt: timestamp('updatedAt').notNull().defaultNow(),
+});
+export const verification = pgTable('verification', {
+  id: text('id').primaryKey(),
+  identifier: text('identifier').notNull(),
+  value: text('value').notNull(),
+  expiresAt: timestamp('expiresAt').notNull(),
+  createdAt: timestamp('createdAt').notNull().defaultNow(),
+  updatedAt: timestamp('updatedAt').notNull().defaultNow(),
+});
+export type User = typeof user.$inferSelect;
+export type Session = typeof session.$inferSelect;

package/template/extras/db-drizzle-pg/src/db/schema/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+// Aggregates all schema tables. Feature modules add their own files here.
+export * from './auth';
+// <crm-starter:exports>

package/template/extras/emergency-dispatch/src/app/(dashboard)/emergency/page.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+const QUEUE = [
+  { id: 'e1', customer: 'Jamie Rodriguez', issue: 'Burst pipe — water everywhere', minutesAgo: 4,  status: 'unassigned' },
+  { id: 'e2', customer: 'Acme Property Mgmt', issue: 'Sewer backup at 120 Main', minutesAgo: 12, status: 'dispatched' },
+  { id: 'e3', customer: 'Mason Hardware Co.', issue: 'No hot water — restaurant', minutesAgo: 28, status: 'en_route' },
+];
+const VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  unassigned: 'destructive',
+  dispatched: 'secondary',
+  en_route: 'default',
+};
+export default function EmergencyPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Emergency queue</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          After-hours and emergency calls. Surcharges apply per your business rules.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-3">
+        {QUEUE.map((e) => (
+          <Card key={e.id} className={e.status === 'unassigned' ? 'border-destructive' : ''}>
+            <CardHeader className="flex flex-row items-start justify-between space-y-0">
+              <div>
+                <CardTitle className="text-base">{e.customer}</CardTitle>
+                <p className="text-muted-foreground mt-1 text-sm">{e.issue}</p>
+              </div>
+              <div className="flex flex-col items-end gap-1">
+                <Badge variant={VARIANT[e.status]}>{e.status.replace('_', ' ')}</Badge>
+                <span className="text-muted-foreground text-xs">{e.minutesAgo}m ago</span>
+              </div>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/extras/equipment-tracking/src/app/(dashboard)/equipment/page.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { formatDate } from '@/lib/utils';
+const EQUIPMENT = [
+  { id: 'eq_001', customer: 'Acme Property Mgmt', address: '120 Main St', kind: 'AC Condenser', model: 'Carrier 24ABC6', serial: 'A12345', installed: '2022-06-15', warrantyEnd: '2032-06-15' },
+  { id: 'eq_002', customer: 'Acme Property Mgmt', address: '845 Oak Ave', kind: 'Furnace',      model: 'Trane S9V2', serial: 'B22221', installed: '2021-11-08', warrantyEnd: '2031-11-08' },
+  { id: 'eq_003', customer: 'Jamie Rodriguez',    address: '32 Elm Ct',   kind: 'Heat Pump',    model: 'Lennox XP25', serial: 'C99012', installed: '2024-03-22', warrantyEnd: '2034-03-22' },
+];
+export default function EquipmentPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Equipment</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          HVAC units tracked per service address. Scan a serial barcode in the field app to log new equipment.
+        </p>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>All equipment</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50 text-muted-foreground text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Customer / Address</th>
+                <th className="px-4 py-3 text-left font-medium">Type</th>
+                <th className="px-4 py-3 text-left font-medium">Model</th>
+                <th className="px-4 py-3 text-left font-medium">Serial</th>
+                <th className="px-4 py-3 text-left font-medium">Installed</th>
+                <th className="px-4 py-3 text-left font-medium">Warranty</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {EQUIPMENT.map((e) => {
+                const expired = new Date(e.warrantyEnd) < new Date();
+                return (
+                  <tr key={e.id}>
+                    <td className="px-4 py-3">
+                      <div className="font-medium">{e.customer}</div>
+                      <div className="text-muted-foreground text-xs">{e.address}</div>
+                    </td>
+                    <td className="px-4 py-3">{e.kind}</td>
+                    <td className="text-muted-foreground px-4 py-3">{e.model}</td>
+                    <td className="text-muted-foreground px-4 py-3 font-mono text-xs">{e.serial}</td>
+                    <td className="text-muted-foreground px-4 py-3">{formatDate(e.installed)}</td>
+                    <td className="px-4 py-3">
+                      <Badge variant={expired ? 'destructive' : 'default'}>
+                        {expired ? 'Expired' : 'Active'} · {formatDate(e.warrantyEnd)}
+                      </Badge>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/app/(dashboard)/estimates/[id]/page.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getEstimate } from '@/lib/estimates/data';
+import { ESTIMATE_STATUS_LABEL, ESTIMATE_STATUS_VARIANT } from '@/lib/estimates/types';
+import { ConvertToJobButton } from '@/components/estimates/convert-to-job-button';
+import { formatCurrency, formatDate } from '@/lib/utils';
+interface PageProps { params: Promise<{ id: string }>; }
+export default async function EstimateDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const estimate = await getEstimate(id);
+  if (!estimate) notFound();
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link href="/estimates" className="text-muted-foreground text-sm hover:underline">← Estimates</Link>
+        <div className="mt-1 flex items-center gap-3">
+          <h1 className="text-3xl font-bold tracking-tight">Estimate #{estimate.id.slice(-6)}</h1>
+          <Badge variant={ESTIMATE_STATUS_VARIANT[estimate.status]}>
+            {ESTIMATE_STATUS_LABEL[estimate.status]}
+          </Badge>
+          {estimate.status === 'approved' && !estimate.convertedJobId && (
+            <div className="ml-auto">
+              <ConvertToJobButton estimateId={estimate.id} />
+            </div>
+          )}
+        </div>
+        <Link href={`/customers/${estimate.customerId}`} className="text-muted-foreground hover:underline">
+          {estimate.customerName}
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Total</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{formatCurrency(estimate.total)}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Total cost</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold text-muted-foreground">
+            {formatCurrency(estimate.totalCost)}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Margin</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatCurrency(estimate.margin)}</div>
+            <div className={`text-sm mt-1 ${estimate.marginPct < 25 ? 'text-destructive' : 'text-muted-foreground'}`}>
+              {estimate.marginPct}%
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Valid until</CardTitle></CardHeader>
+          <CardContent className="text-sm">
+            {estimate.validUntil ? (
+              <>
+                <div className="font-medium">{formatDate(estimate.validUntil)}</div>
+                {new Date(estimate.validUntil) < new Date() && (
+                  <div className="text-destructive mt-1 text-xs">EXPIRED</div>
+                )}
+              </>
+            ) : (
+              <span className="text-muted-foreground">No expiration</span>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Line items</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground bg-muted/50 text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Description</th>
+                <th className="px-4 py-3 text-right font-medium">Qty</th>
+                <th className="px-4 py-3 text-right font-medium">Unit cost</th>
+                <th className="px-4 py-3 text-right font-medium">Unit price</th>
+                <th className="px-4 py-3 text-right font-medium">Subtotal</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {estimate.lineItems.map((li, i) => (
+                <tr key={i}>
+                  <td className="px-4 py-3">
+                    {li.description}
+                    {!li.taxable && <span className="text-muted-foreground ml-2 text-xs">(non-taxable)</span>}
+                  </td>
+                  <td className="px-4 py-3 text-right">{li.qty}</td>
+                  <td className="text-muted-foreground px-4 py-3 text-right">
+                    {li.unitCost !== undefined ? formatCurrency(li.unitCost) : '—'}
+                  </td>
+                  <td className="px-4 py-3 text-right">{formatCurrency(li.unitPrice)}</td>
+                  <td className="px-4 py-3 text-right font-medium">{formatCurrency(li.qty * li.unitPrice)}</td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot className="bg-muted/30 text-sm">
+              <tr>
+                <td colSpan={4} className="px-4 py-3 text-right text-muted-foreground">Total</td>
+                <td className="px-4 py-3 text-right font-bold">{formatCurrency(estimate.total)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </CardContent>
+      </Card>
+      {estimate.notes && (
+        <Card>
+          <CardHeader><CardTitle>Notes</CardTitle></CardHeader>
+          <CardContent className="text-sm whitespace-pre-wrap">{estimate.notes}</CardContent>
+        </Card>
+      )}
+      {estimate.convertedJobId && (
+        <p className="text-muted-foreground text-sm">
+          Converted to <Link href={`/jobs/${estimate.convertedJobId}`} className="underline">job #{estimate.convertedJobId.slice(-6)}</Link>.
+        </p>
+      )}
+    </div>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/app/(dashboard)/estimates/new/page.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+/**
+ * Default stub. When you scaffolded with the Drizzle stack, this file is
+ * overwritten by a working server-action-backed form (in src/components/
+ * estimates/new-estimate-form.tsx).
+ */
+export default function NewEstimatePage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New estimate</h1>
+      <Card>
+        <CardHeader><CardTitle>Form goes here</CardTitle></CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Wire this to your stack to enable. See the Drizzle path in
+          <code className="bg-muted ml-1 rounded px-1 py-0.5">cli/template/extras/estimates-invoices/drizzle/</code>
+          for the reference implementation.
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/app/(dashboard)/estimates/page.tsx ADDED Viewed

@@ -0,0 +1,102 @@
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { getEstimates } from '@/lib/estimates/data';
+import { ESTIMATE_STATUS_LABEL, ESTIMATE_STATUS_VARIANT } from '@/lib/estimates/types';
+import { formatCurrency, formatDate } from '@/lib/utils';
+export default async function EstimatesPage() {
+  const estimates = await getEstimates();
+  const draftCount = estimates.filter((e) => e.status === 'draft').length;
+  const openValue = estimates
+    .filter((e) => ['sent', 'viewed'].includes(e.status))
+    .reduce((acc, e) => acc + e.total, 0);
+  const approvedValue = estimates
+    .filter((e) => e.status === 'approved')
+    .reduce((acc, e) => acc + e.total, 0);
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Estimates</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            {estimates.length} total · {draftCount} draft
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/estimates/new">New estimate</Link>
+        </Button>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Open</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{formatCurrency(openValue)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Sent + viewed estimates awaiting decision</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Approved (pending convert)</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{formatCurrency(approvedValue)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Click an estimate to convert it to a job</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Drafts</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{draftCount}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Not yet sent to customer</p>
+          </CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>All estimates</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50 text-muted-foreground text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Customer</th>
+                <th className="px-4 py-3 text-left font-medium">Status</th>
+                <th className="px-4 py-3 text-left font-medium">Sent</th>
+                <th className="px-4 py-3 text-left font-medium">Valid until</th>
+                <th className="px-4 py-3 text-right font-medium">Margin %</th>
+                <th className="px-4 py-3 text-right font-medium">Total</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {estimates.map((e) => (
+                <tr key={e.id} className="hover:bg-muted/30">
+                  <td className="px-4 py-3">
+                    <Link href={`/estimates/${e.id}`} className="font-medium hover:underline">
+                      {e.customerName}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3">
+                    <Badge variant={ESTIMATE_STATUS_VARIANT[e.status]}>
+                      {ESTIMATE_STATUS_LABEL[e.status]}
+                    </Badge>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3">
+                    {e.sentAt ? formatDate(e.sentAt) : <span className="text-muted-foreground/50">—</span>}
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3">
+                    {e.validUntil ? formatDate(e.validUntil) : <span className="text-muted-foreground/50">—</span>}
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <span className={e.marginPct < 25 ? 'text-destructive font-medium' : ''}>
+                      {e.marginPct}%
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-right font-medium">{formatCurrency(e.total)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}