create-crm-starter 0.1.0

package/template/extras/customer-portal/drizzle/src/components/portal/estimate-approval.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { approveEstimateByPortal, declineEstimateByPortal } from '@/lib/portal/actions';
+import { formatCurrency } from '@/lib/utils';
+import { SignaturePad } from './signature-pad';
+
+interface EstimateApprovalProps {
+  portalToken: string;
+  estimateId: string;
+  total: number;
+}
+
+export function EstimateApproval({ portalToken, estimateId, total }: EstimateApprovalProps) {
+  const [mode, setMode] = useState<'idle' | 'approving' | 'declining'>('idle');
+  const [pending, start] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const [signerName, setSignerName] = useState('');
+  const [signatureDataUrl, setSignatureDataUrl] = useState('');
+  const [declineReason, setDeclineReason] = useState('');
+
+  function handleApprove() {
+    setError(null);
+    if (!signerName.trim()) { setError('Type your full name.'); return; }
+    if (!signatureDataUrl) { setError('Please draw your signature.'); return; }
+    start(async () => {
+      try {
+        await approveEstimateByPortal({
+          portalToken,
+          estimateId,
+          signatureDataUrl,
+          signerName,
+        });
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    });
+  }
+
+  function handleDecline() {
+    setError(null);
+    start(async () => {
+      try {
+        await declineEstimateByPortal({
+          portalToken,
+          estimateId,
+          reason: declineReason || undefined,
+        });
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    });
+  }
+
+  if (mode === 'idle') {
+    return (
+      <div className="flex flex-wrap items-center gap-3 border-t pt-4">
+        <Button onClick={() => setMode('approving')} size="lg">
+          Approve & sign · {formatCurrency(total)}
+        </Button>
+        <button
+          type="button"
+          onClick={() => setMode('declining')}
+          className="text-muted-foreground hover:text-foreground text-sm underline"
+        >
+          Decline
+        </button>
+      </div>
+    );
+  }
+
+  if (mode === 'declining') {
+    return (
+      <Card className="border-t-2 mt-4">
+        <CardHeader>
+          <CardTitle className="text-base">Decline this estimate</CardTitle>
+          <CardDescription>Let us know why if you&apos;d like — it&apos;s optional.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <textarea
+            value={declineReason}
+            onChange={(e) => setDeclineReason(e.target.value)}
+            rows={3}
+            placeholder="Reason (optional)"
+            className="border-input bg-background focus-visible:ring-ring w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+          {error && <p className="text-destructive text-sm">{error}</p>}
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => setMode('idle')} disabled={pending}>
+              Back
+            </Button>
+            <Button type="button" onClick={handleDecline} variant="destructive" disabled={pending}>
+              {pending ? 'Sending…' : 'Decline estimate'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="border-brand border-t-2 mt-4">
+      <CardHeader>
+        <CardTitle className="text-base">Approve {formatCurrency(total)}</CardTitle>
+        <CardDescription>
+          By typing your name and signing below, you authorize this work to begin.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="signerName">Type your full name *</Label>
+          <Input
+            id="signerName"
+            value={signerName}
+            onChange={(e) => setSignerName(e.target.value)}
+            placeholder="e.g. Jamie Rodriguez"
+            autoComplete="name"
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>Signature *</Label>
+          <SignaturePad onChange={setSignatureDataUrl} />
+        </div>
+        {error && <p className="text-destructive text-sm">{error}</p>}
+        <div className="flex justify-end gap-2">
+          <Button type="button" variant="outline" onClick={() => setMode('idle')} disabled={pending}>
+            Cancel
+          </Button>
+          <Button type="button" onClick={handleApprove} disabled={pending}>
+            {pending ? 'Submitting…' : 'Approve & sign'}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/extras/customer-portal/drizzle/src/components/portal/signature-pad.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface SignaturePadProps {
+  /** Called whenever the user finishes a stroke, with the current data URL. */
+  onChange: (dataUrl: string) => void;
+  /** Width of the drawing area in CSS pixels. */
+  width?: number;
+  /** Height of the drawing area in CSS pixels. */
+  height?: number;
+}
+
+/**
+ * Minimal canvas-based signature pad. No external dependency. Supports
+ * mouse + touch + pointer events. High-DPI aware via devicePixelRatio
+ * scaling so strokes look crisp on retina.
+ *
+ * Strokes are rendered as smoothed black lines; the parent can clear /
+ * read the value via the imperative methods exposed through the ref.
+ */
+export function SignaturePad({ onChange, width = 480, height = 160 }: SignaturePadProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const drawing = useRef(false);
+  const [hasInk, setHasInk] = useState(false);
+
+  const resize = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = width * ratio;
+    canvas.height = height * ratio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(1, 0, 0, 1, 0, 0); // reset before scale
+    ctx.scale(ratio, ratio);
+    ctx.lineWidth = 2;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.strokeStyle = '#000';
+  }, [width, height]);
+
+  useEffect(() => { resize(); }, [resize]);
+
+  function getPoint(e: PointerEvent | React.PointerEvent<HTMLCanvasElement>): [number, number] {
+    const canvas = canvasRef.current;
+    if (!canvas) return [0, 0];
+    const rect = canvas.getBoundingClientRect();
+    return [
+      (e as PointerEvent).clientX - rect.left,
+      (e as PointerEvent).clientY - rect.top,
+    ];
+  }
+
+  function start(e: React.PointerEvent<HTMLCanvasElement>) {
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!ctx) return;
+    const [x, y] = getPoint(e);
+    drawing.current = true;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setHasInk(true);
+    canvas?.setPointerCapture(e.pointerId);
+  }
+
+  function move(e: React.PointerEvent<HTMLCanvasElement>) {
+    if (!drawing.current) return;
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) return;
+    const [x, y] = getPoint(e);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  }
+
+  function end() {
+    if (!drawing.current) return;
+    drawing.current = false;
+    const canvas = canvasRef.current;
+    if (canvas) onChange(canvas.toDataURL('image/png'));
+  }
+
+  function clear() {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) return;
+    const ratio = window.devicePixelRatio || 1;
+    ctx.clearRect(0, 0, canvas.width / ratio, canvas.height / ratio);
+    setHasInk(false);
+    onChange('');
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="relative">
+        <canvas
+          ref={canvasRef}
+          onPointerDown={start}
+          onPointerMove={move}
+          onPointerUp={end}
+          onPointerLeave={end}
+          onPointerCancel={end}
+          className="border-input bg-background w-full touch-none rounded-md border"
+        />
+        {!hasInk && (
+          <div className="text-muted-foreground pointer-events-none absolute inset-0 flex items-center justify-center text-xs">
+            Sign here
+          </div>
+        )}
+      </div>
+      <div className="flex items-center justify-between text-xs">
+        <span className="text-muted-foreground">Use your finger, mouse, or stylus.</span>
+        <button
+          type="button"
+          onClick={clear}
+          className="text-muted-foreground hover:text-foreground underline"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  );
+}

package/template/extras/customer-portal/drizzle/src/lib/portal/actions.ts

@@ -0,0 +1,107 @@
+'use server';
+
+import { and, eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { db } from '@/db/client';
+import { customers, estimates } from '@/db/schema';
+
+interface PortalEstimateContext {
+  portalToken: string;
+  estimateId: string;
+}
+
+/**
+ * Verifies that the given estimateId belongs to the customer identified
+ * by portalToken. Returns the resolved customer + estimate, or throws.
+ * This is the security boundary for portal write actions.
+ */
+async function authorizePortalEstimate({ portalToken, estimateId }: PortalEstimateContext) {
+  const [row] = await db
+    .select({ customer: customers, estimate: estimates })
+    .from(customers)
+    .innerJoin(estimates, eq(estimates.customerId, customers.id))
+    .where(and(eq(customers.publicToken, portalToken), eq(estimates.id, estimateId)))
+    .limit(1);
+  if (!row) throw new Error('Estimate not found or does not belong to this portal account.');
+  return row;
+}
+
+export interface ApproveEstimateInput {
+  portalToken: string;
+  estimateId: string;
+  /** Customer's drawn signature as a data: URL (PNG). */
+  signatureDataUrl: string;
+  /** Customer types their full name as an additional acknowledgment. */
+  signerName: string;
+}
+
+export async function approveEstimateByPortal(input: ApproveEstimateInput): Promise<void> {
+  const { estimate } = await authorizePortalEstimate(input);
+  if (!['sent', 'viewed', 'draft'].includes(estimate.status)) {
+    throw new Error(`Cannot approve an estimate in status "${estimate.status}".`);
+  }
+  if (!input.signerName.trim()) throw new Error('Please type your name to acknowledge.');
+  if (!input.signatureDataUrl.startsWith('data:image/')) {
+    throw new Error('Signature is required — please draw your signature.');
+  }
+
+  await db
+    .update(estimates)
+    .set({
+      status: 'approved',
+      approvedAt: new Date(),
+      approvedSignerName: input.signerName.trim(),
+      approvedSignatureDataUrl: input.signatureDataUrl,
+      updatedAt: new Date(),
+    })
+    .where(eq(estimates.id, input.estimateId));
+
+  revalidatePath(`/portal/${input.portalToken}`);
+  revalidatePath(`/portal/${input.portalToken}/estimates`);
+  revalidatePath(`/estimates/${input.estimateId}`);
+}
+
+export interface DeclineEstimateInput {
+  portalToken: string;
+  estimateId: string;
+  reason?: string;
+}
+
+export async function declineEstimateByPortal(input: DeclineEstimateInput): Promise<void> {
+  const { estimate } = await authorizePortalEstimate(input);
+  if (!['sent', 'viewed', 'draft'].includes(estimate.status)) {
+    throw new Error(`Cannot decline an estimate in status "${estimate.status}".`);
+  }
+
+  await db
+    .update(estimates)
+    .set({
+      status: 'declined',
+      declinedAt: new Date(),
+      declinedReason: input.reason?.trim() || null,
+      updatedAt: new Date(),
+    })
+    .where(eq(estimates.id, input.estimateId));
+
+  revalidatePath(`/portal/${input.portalToken}`);
+  revalidatePath(`/portal/${input.portalToken}/estimates`);
+  revalidatePath(`/estimates/${input.estimateId}`);
+}
+
+/**
+ * Bumps an estimate from 'sent' → 'viewed' on first portal load. Called
+ * server-side from the portal estimates page (idempotent: noop if already
+ * past 'viewed').
+ */
+export async function markEstimateViewed(portalToken: string, estimateId: string): Promise<void> {
+  try {
+    const { estimate } = await authorizePortalEstimate({ portalToken, estimateId });
+    if (estimate.status !== 'sent') return;
+    await db
+      .update(estimates)
+      .set({ status: 'viewed', updatedAt: new Date() })
+      .where(eq(estimates.id, estimateId));
+  } catch {
+    /* Silent: don't break the page render if mark-viewed fails. */
+  }
+}

package/template/extras/customer-portal/drizzle/src/lib/portal/data.ts

@@ -0,0 +1,158 @@
+import { desc, eq } from 'drizzle-orm';
+import { db } from '@/db/client';
+import {
+  customers as customersTable,
+  jobs as jobsTable,
+  estimates as estimatesTable,
+  invoices as invoicesTable,
+  invoicePayments as paymentsTable,
+} from '@/db/schema';
+import type { Job, JobStatus, LineItem } from '@/lib/jobs/types';
+import type { Estimate, EstimateLineItem, EstimateStatus } from '@/lib/estimates/types';
+import type { Invoice, InvoiceLineItem, InvoiceStatus } from '@/lib/invoices/types';
+
+export interface PortalCustomer {
+  id: string;
+  name: string;
+  email?: string;
+  phone?: string;
+}
+
+export interface PortalData {
+  customer: PortalCustomer;
+  jobs: Job[];
+  estimates: Estimate[];
+  invoices: Invoice[];
+  totals: {
+    balanceDue: number;
+    lifetimeValue: number;
+  };
+}
+
+/**
+ * Resolves a customer + all their jobs/estimates/invoices in one shot,
+ * keyed by the magic-link publicToken. Returns null when the token is
+ * unknown so the page can render notFound().
+ */
+export async function getPortalData(token: string): Promise<PortalData | null> {
+  const [customer] = await db
+    .select()
+    .from(customersTable)
+    .where(eq(customersTable.publicToken, token))
+    .limit(1);
+  if (!customer) return null;
+
+  const [jobRows, estimateRows, invoiceRows] = await Promise.all([
+    db.select().from(jobsTable).where(eq(jobsTable.customerId, customer.id)).orderBy(desc(jobsTable.createdAt)),
+    db.select().from(estimatesTable).where(eq(estimatesTable.customerId, customer.id)).orderBy(desc(estimatesTable.createdAt)),
+    db.select().from(invoicesTable).where(eq(invoicesTable.customerId, customer.id)).orderBy(desc(invoicesTable.createdAt)),
+  ]);
+
+  // Fetch all payments for these invoices in one round-trip.
+  const allPayments = invoiceRows.length === 0
+    ? []
+    : await db.select().from(paymentsTable).orderBy(desc(paymentsTable.recordedAt));
+  const paymentsByInvoice = new Map<string, (typeof paymentsTable.$inferSelect)[]>();
+  for (const p of allPayments) {
+    const arr = paymentsByInvoice.get(p.invoiceId) ?? [];
+    arr.push(p);
+    paymentsByInvoice.set(p.invoiceId, arr);
+  }
+
+  const portalCustomer: PortalCustomer = {
+    id: customer.id,
+    name: customer.name,
+    email: (customer.emails as string[])[0],
+    phone: (customer.phones as string[])[0],
+  };
+
+  const jobs: Job[] = jobRows.map((j) => ({
+    id: j.id,
+    customerId: j.customerId,
+    customerName: customer.name,
+    serviceType: j.serviceType,
+    status: j.status as JobStatus,
+    priority: j.priority as Job['priority'],
+    scheduledAt: j.scheduledAt?.toISOString(),
+    arrivalWindow: j.arrivalWindow ?? undefined,
+    assigneeIds: j.assigneeIds as string[],
+    assigneeNames: [],
+    lineItems: j.lineItems as LineItem[],
+    total: j.total,
+    notes: j.notes ?? undefined,
+    createdAt: j.createdAt.toISOString(),
+  }));
+
+  const estimates: Estimate[] = estimateRows.map((e) => {
+    const lineItems = e.lineItems as EstimateLineItem[];
+    const totalCost = lineItems.reduce((acc, li) => acc + li.qty * (li.unitCost ?? 0), 0);
+    const margin = e.total - totalCost;
+    const marginPct = e.total > 0 ? Math.round((margin / e.total) * 100) : 0;
+    return {
+      id: e.id,
+      customerId: e.customerId,
+      customerName: customer.name,
+      status: e.status as EstimateStatus,
+      lineItems,
+      subtotal: e.subtotal,
+      total: e.total,
+      totalCost,
+      margin,
+      marginPct,
+      notes: e.notes ?? undefined,
+      validUntil: e.validUntil?.toISOString(),
+      sentAt: e.sentAt?.toISOString(),
+      approvedAt: e.approvedAt?.toISOString(),
+      convertedJobId: e.convertedJobId ?? undefined,
+      createdAt: e.createdAt.toISOString(),
+    };
+  });
+
+  const invoices: Invoice[] = invoiceRows.map((i) => {
+    const amountDue = Math.max(0, i.total - i.amountPaid);
+    const isOverdue =
+      i.dueDate !== null && amountDue > 0 && new Date(i.dueDate) < new Date() &&
+      (i.status === 'sent' || i.status === 'partial');
+    return {
+      id: i.id,
+      invoiceNumber: i.invoiceNumber,
+      customerId: i.customerId,
+      customerName: customer.name,
+      jobId: i.jobId ?? undefined,
+      estimateId: i.estimateId ?? undefined,
+      status: (isOverdue ? 'overdue' : i.status) as InvoiceStatus,
+      lineItems: i.lineItems as InvoiceLineItem[],
+      subtotal: i.subtotal,
+      total: i.total,
+      amountPaid: i.amountPaid,
+      amountDue,
+      dueDate: i.dueDate?.toISOString(),
+      sentAt: i.sentAt?.toISOString(),
+      paidAt: i.paidAt?.toISOString(),
+      notes: i.notes ?? undefined,
+      createdAt: i.createdAt.toISOString(),
+      payments: (paymentsByInvoice.get(i.id) ?? []).map((p) => ({
+        id: p.id,
+        amount: p.amount,
+        method: p.method as Invoice['payments'][number]['method'],
+        recordedAt: p.recordedAt.toISOString(),
+        note: p.note ?? undefined,
+      })),
+    };
+  });
+
+  const balanceDue = invoices.reduce((acc, i) => acc + i.amountDue, 0);
+  const lifetimeValue = invoices.reduce((acc, i) => acc + i.amountPaid, 0);
+
+  return { customer: portalCustomer, jobs, estimates, invoices, totals: { balanceDue, lifetimeValue } };
+}
+
+/** Public token for a single invoice — used in portal pay buttons. */
+export async function getInvoicePublicToken(invoiceId: string): Promise<string | null> {
+  const [row] = await db
+    .select({ token: invoicesTable.publicToken })
+    .from(invoicesTable)
+    .where(eq(invoicesTable.id, invoiceId))
+    .limit(1);
+  return row?.token ?? null;
+}

package/template/extras/customers/_fragments/convex.txt

@@ -0,0 +1,28 @@
+  customers: defineTable({
+    name: v.string(),
+    phones: v.array(v.string()),
+    emails: v.array(v.string()),
+    billingAddress: v.object({
+      line1: v.string(),
+      line2: v.optional(v.string()),
+      city: v.string(),
+      state: v.string(),
+      postalCode: v.string(),
+    }),
+    serviceAddresses: v.array(
+      v.object({
+        line1: v.string(),
+        line2: v.optional(v.string()),
+        city: v.string(),
+        state: v.string(),
+        postalCode: v.string(),
+      }),
+    ),
+    tags: v.array(v.string()),
+    leadSource: v.optional(v.string()),
+    lifetimeValue: v.number(),
+    balanceDue: v.number(),
+    doNotContact: v.boolean(),
+    notes: v.optional(v.string()),
+    createdAt: v.number(),
+  }).index('by_created_at', ['createdAt']),

package/template/extras/customers/_shared/src/app/(dashboard)/customers/[id]/page.tsx

@@ -0,0 +1,81 @@
+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 { Separator } from '@/components/ui/separator';
+import { getCustomer } from '@/lib/customers/data';
+import { formatAddress } from '@/lib/customers/types';
+import { formatCurrency } from '@/lib/utils';
+
+interface PageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function CustomerDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const customer = await getCustomer(id);
+  if (!customer) notFound();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link href="/customers" className="text-muted-foreground text-sm hover:underline">
+          ← Customers
+        </Link>
+        <h1 className="mt-1 text-3xl font-bold tracking-tight">{customer.name}</h1>
+        <div className="mt-2 flex flex-wrap items-center gap-2">
+          {customer.tags.map((t) => (
+            <Badge key={t} variant="secondary" className="uppercase text-[10px]">{t}</Badge>
+          ))}
+          {customer.doNotContact && <Badge variant="destructive">Do not contact</Badge>}
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Lifetime value</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{formatCurrency(customer.lifetimeValue)}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Balance due</CardTitle></CardHeader>
+          <CardContent className={`text-2xl font-bold ${customer.balanceDue > 0 ? 'text-destructive' : ''}`}>
+            {formatCurrency(customer.balanceDue)}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Lead source</CardTitle></CardHeader>
+          <CardContent className="text-muted-foreground text-lg">{customer.leadSource ?? '—'}</CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Contact</CardTitle></CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <div>
+            <div className="text-muted-foreground text-xs uppercase">Phones</div>
+            {customer.phones.map((p) => <div key={p}>{p}</div>)}
+          </div>
+          <div>
+            <div className="text-muted-foreground text-xs uppercase">Emails</div>
+            {customer.emails.map((e) => <div key={e}>{e}</div>)}
+          </div>
+          <Separator />
+          <div>
+            <div className="text-muted-foreground text-xs uppercase">Billing address</div>
+            <div>{formatAddress(customer.billingAddress)}</div>
+          </div>
+          {customer.serviceAddresses.length > 0 && (
+            <div>
+              <div className="text-muted-foreground text-xs uppercase">Service addresses</div>
+              {customer.serviceAddresses.map((a, i) => <div key={i}>{formatAddress(a)}</div>)}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      {customer.notes && (
+        <Card>
+          <CardHeader><CardTitle>Notes</CardTitle></CardHeader>
+          <CardContent className="text-sm">{customer.notes}</CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/template/extras/customers/_shared/src/app/(dashboard)/customers/new/page.tsx

@@ -0,0 +1,16 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+export default function NewCustomerPage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New customer</h1>
+      <Card>
+        <CardHeader><CardTitle>Form goes here</CardTitle></CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Wire this form to your stack&apos;s server action / Convex mutation.
+          The customers schema is already defined — see the table in your DB.
+        </CardContent>
+      </Card>
+    </div>
+  );
+}