update

frontend/src/pages/Deals.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Search, Loader2, LayoutGrid, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -18,6 +18,15 @@ const STAGES = [
     { value: 'lost', label: 'Lost', className: 'bg-red-500 text-white' },
 ];
 
+const STAGE_GROUP_HEADER = {
+    new: 'border-l-[6px] border-l-violet-600 bg-violet-50/90',
+    discovery: 'border-l-[6px] border-l-cyan-500 bg-cyan-50/70',
+    proposal: 'border-l-[6px] border-l-sky-500 bg-sky-50/70',
+    negotiation: 'border-l-[6px] border-l-teal-600 bg-teal-50/70',
+    won: 'border-l-[6px] border-l-emerald-600 bg-emerald-50/70',
+    lost: 'border-l-[6px] border-l-red-600 bg-red-50/70',
+};
+
 function stageMeta(v) {
     return STAGES.find((s) => s.value === v) || STAGES[0];
 }
@@ -52,6 +61,250 @@ function focusFirstEditableInRow(tr) {
     el?.focus?.();
 }
 
+function sumNumeric(arr, key) {
+    return arr.reduce((a, d) => {
+        const v = d[key];
+        return a + (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+    }, 0);
+}
+
+function DealRow({ deal, tableEditRowId, setTableEditRowId, patchDeal, updateStage, openDeal }) {
+    const meta = stageMeta(deal.stage);
+    const safeStage = STAGES.some((s) => s.value === deal.stage) ? deal.stage : 'new';
+    return (
+        <tr
+            role="button"
+            tabIndex={0}
+            onClick={(e) => {
+                if (isRowUiTarget(e)) return;
+                setTableEditRowId(null);
+                openDeal(deal);
+            }}
+            onKeyDown={(e) => {
+                if (isRowUiTarget(e)) return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setTableEditRowId(null);
+                    openDeal(deal);
+                }
+            }}
+            className="border-b border-slate-100 hover:bg-violet-50/40 cursor-pointer"
+        >
+            <td className="px-1 py-1.5 w-[4.25rem]" onClick={(e) => e.stopPropagation()}>
+                <div className="flex flex-col items-center gap-0.5">
+                    <input type="checkbox" className="rounded border-slate-300" />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                            'h-7 w-7 text-slate-500 hover:text-violet-700',
+                            tableEditRowId === deal.id && 'bg-violet-100 text-violet-800 hover:bg-violet-100'
+                        )}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            const tr = e.currentTarget.closest('tr');
+                            if (tableEditRowId === deal.id) {
+                                setTableEditRowId(null);
+                                return;
+                            }
+                            setTableEditRowId(deal.id);
+                            requestAnimationFrame(() => focusFirstEditableInRow(tr));
+                        }}
+                        aria-label={
+                            tableEditRowId === deal.id
+                                ? `Stop editing row for ${deal.name || 'deal'}`
+                                : `Edit fields in row for ${deal.name || 'deal'}`
+                        }
+                    >
+                        <Pencil className="h-3.5 w-3.5" aria-hidden />
+                    </Button>
+                </div>
+            </td>
+            <td className="px-3 py-2 align-top max-w-[220px] font-medium">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        value={deal.name || ''}
+                        onCommit={(v) => patchDeal(deal.id, { name: v })}
+                        inputClassName="font-medium text-slate-900"
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm font-medium text-slate-900 truncate">
+                        {deal.name || '—'}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
+                <Select value={safeStage} onValueChange={(v) => updateStage(deal.id, v)}>
+                    <SelectTrigger className={cn('h-8 w-[min(100%,150px)] border-slate-200 shadow-none')}>
+                        <span className={cn('rounded-full px-2 py-0.5 text-xs font-medium', meta.className)}>
+                            {meta.label}
+                        </span>
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[180px]">
+                        {STAGES.map((s) => (
+                            <SelectItem key={s.value} value={s.value}>
+                                <span
+                                    className={cn(
+                                        'rounded-full px-2 py-0.5 text-xs font-medium inline-block',
+                                        s.className
+                                    )}
+                                >
+                                    {s.label}
+                                </span>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </td>
+            <td className="px-3 py-2 align-top">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        value={deal.owner_initials || ''}
+                        onCommit={(v) =>
+                            patchDeal(deal.id, {
+                                owner_initials: (v || '').slice(0, 8).toUpperCase(),
+                            })
+                        }
+                        inputClassName="text-center uppercase tracking-wide max-w-[4.5rem] font-semibold"
+                    />
+                ) : (
+                    <div className="h-8 w-8 rounded-full bg-violet-100 text-violet-700 text-xs font-semibold flex items-center justify-center border border-violet-200">
+                        {deal.owner_initials || '?'}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top tabular-nums max-w-[120px]">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        type="number"
+                        value={deal.deal_value != null ? String(deal.deal_value) : ''}
+                        onCommit={(v) => {
+                            if (v.trim() === '') {
+                                patchDeal(deal.id, { deal_value: null });
+                                return;
+                            }
+                            const n = Math.round(Number(v));
+                            if (!Number.isFinite(n)) return;
+                            patchDeal(deal.id, { deal_value: n });
+                        }}
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
+                        {fmtMoney(deal.deal_value)}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top max-w-[180px]">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        value={deal.contact_display || ''}
+                        onCommit={(v) => patchDeal(deal.id, { contact_display: v })}
+                        inputClassName="text-xs"
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1">
+                        {deal.contact_display ? (
+                            <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-800">
+                                {deal.contact_display}
+                            </span>
+                        ) : (
+                            <span className="text-slate-500">—</span>
+                        )}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top max-w-[200px]">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        value={deal.account_name || ''}
+                        onCommit={(v) => patchDeal(deal.id, { account_name: v })}
+                        inputClassName="text-xs"
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1">
+                        {deal.account_name ? (
+                            <span className="inline-flex rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
+                                {deal.account_name}
+                            </span>
+                        ) : (
+                            <span className="text-slate-500">—</span>
+                        )}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top">
+                {tableEditRowId === deal.id ? (
+                    <EditableDateCell
+                        value={deal.expected_close_date}
+                        onCommit={(dateStr) =>
+                            patchDeal(deal.id, {
+                                expected_close_date: dateStr || null,
+                            })
+                        }
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
+                        {fmtDate(deal.expected_close_date)}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top tabular-nums max-w-[90px]">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        type="number"
+                        value={
+                            deal.close_probability != null ? String(deal.close_probability) : ''
+                        }
+                        onCommit={(v) => {
+                            if (v.trim() === '') {
+                                patchDeal(deal.id, { close_probability: 0 });
+                                return;
+                            }
+                            const n = Math.min(100, Math.max(0, Math.round(Number(v))));
+                            if (!Number.isFinite(n)) return;
+                            patchDeal(deal.id, { close_probability: n });
+                        }}
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
+                        {deal.close_probability ?? '—'}%
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 tabular-nums text-slate-700" title="Forecast = deal value × close %">
+                {fmtMoney(deal.forecast_value)}
+            </td>
+            <td className="px-3 py-2 align-top">
+                {tableEditRowId === deal.id ? (
+                    <EditableDateCell
+                        value={deal.last_interaction_at}
+                        onCommit={(dateStr) =>
+                            patchDeal(deal.id, {
+                                last_interaction_at: dateStr || null,
+                            })
+                        }
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
+                        {fmtDate(deal.last_interaction_at)}
+                    </div>
+                )}
+            </td>
+            <td className="px-3 py-2 align-top max-w-[120px]">
+                {tableEditRowId === deal.id ? (
+                    <EditableCell
+                        value={deal.country || ''}
+                        onCommit={(v) => patchDeal(deal.id, { country: v })}
+                    />
+                ) : (
+                    <div className="min-h-[2rem] py-1 text-sm text-slate-700">{deal.country || '—'}</div>
+                )}
+            </td>
+        </tr>
+    );
+}
+
 export default function Deals() {
     const [deals, setDeals] = useState([]);
     const [total, setTotal] = useState(0);
@@ -62,6 +315,7 @@ export default function Deals() {
     const [panelOpen, setPanelOpen] = useState(false);
     const [dealDetail, setDealDetail] = useState(null);
     const [tableEditRowId, setTableEditRowId] = useState(null);
+    const [dealsView, setDealsView] = useState('main');
 
     const fetchDeals = useCallback(async () => {
         setLoading(true);
@@ -90,6 +344,20 @@ export default function Deals() {
         return () => clearTimeout(t);
     }, [fetchDeals]);
 
+    useEffect(() => {
+        setTableEditRowId(null);
+    }, [dealsView]);
+
+    const dealsByStage = useMemo(() => {
+        return STAGES.map((s) => ({
+            ...s,
+            deals: deals.filter((d) => {
+                const st = STAGES.some((x) => x.value === d.stage) ? d.stage : 'new';
+                return st === s.value;
+            }),
+        })).filter((g) => g.deals.length > 0);
+    }, [deals]);
+
     const seedDemo = async () => {
         setSeedBusy(true);
         try {
@@ -154,8 +422,16 @@ export default function Deals() {
         >
             <MainTableWorkspace
                 tabs={[
-                    { label: 'Main table', active: true },
-                    { label: 'By Stage', active: false, disabled: true },
+                    {
+                        label: 'Main table',
+                        active: dealsView === 'main',
+                        onClick: () => setDealsView('main'),
+                    },
+                    {
+                        label: 'By Stage',
+                        active: dealsView === 'byStage',
+                        onClick: () => setDealsView('byStage'),
+                    },
                     { label: 'Pipeline', active: false, disabled: true },
                 ]}
                 primaryAction={{ label: 'New deal', onClick: () => {} }}
@@ -210,281 +486,88 @@ export default function Deals() {
                                     <th className="px-3 py-2 font-medium">Country</th>
                                 </tr>
                             </thead>
-                            <tbody>
-                                {deals.map((deal) => {
-                                    const meta = stageMeta(deal.stage);
-                                    const safeStage = STAGES.some((s) => s.value === deal.stage)
-                                        ? deal.stage
-                                        : 'new';
-                                    return (
-                                        <tr
+                            {dealsView === 'main' ? (
+                                <tbody>
+                                    {deals.map((deal) => (
+                                        <DealRow
                                             key={deal.id}
-                                            role="button"
-                                            tabIndex={0}
-                                            onClick={(e) => {
-                                                if (isRowUiTarget(e)) return;
-                                                setTableEditRowId(null);
-                                                openDeal(deal);
-                                            }}
-                                            onKeyDown={(e) => {
-                                                if (isRowUiTarget(e)) return;
-                                                if (e.key === 'Enter' || e.key === ' ') {
-                                                    e.preventDefault();
-                                                    setTableEditRowId(null);
-                                                    openDeal(deal);
-                                                }
-                                            }}
-                                            className="border-b border-slate-100 hover:bg-violet-50/40 cursor-pointer"
-                                        >
-                                            <td
-                                                className="px-1 py-1.5 w-[4.25rem]"
-                                                onClick={(e) => e.stopPropagation()}
-                                            >
-                                                <div className="flex flex-col items-center gap-0.5">
-                                                    <input type="checkbox" className="rounded border-slate-300" />
-                                                    <Button
-                                                        type="button"
-                                                        variant="ghost"
-                                                        size="icon"
-                                                        className={cn(
-                                                            'h-7 w-7 text-slate-500 hover:text-violet-700',
-                                                            tableEditRowId === deal.id &&
-                                                                'bg-violet-100 text-violet-800 hover:bg-violet-100'
-                                                        )}
-                                                        onClick={(e) => {
-                                                            e.stopPropagation();
-                                                            const tr = e.currentTarget.closest('tr');
-                                                            if (tableEditRowId === deal.id) {
-                                                                setTableEditRowId(null);
-                                                                return;
-                                                            }
-                                                            setTableEditRowId(deal.id);
-                                                            requestAnimationFrame(() =>
-                                                                focusFirstEditableInRow(tr)
-                                                            );
-                                                        }}
-                                                        aria-label={
-                                                            tableEditRowId === deal.id
-                                                                ? `Stop editing row for ${deal.name || 'deal'}`
-                                                                : `Edit fields in row for ${deal.name || 'deal'}`
-                                                        }
-                                                    >
-                                                        <Pencil className="h-3.5 w-3.5" aria-hidden />
-                                                    </Button>
-                                                </div>
-                                            </td>
-                                            <td className="px-3 py-2 align-top max-w-[220px] font-medium">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        value={deal.name || ''}
-                                                        onCommit={(v) => patchDeal(deal.id, { name: v })}
-                                                        inputClassName="font-medium text-slate-900"
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm font-medium text-slate-900 truncate">
-                                                        {deal.name || '—'}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
-                                                <Select
-                                                    value={safeStage}
-                                                    onValueChange={(v) => updateStage(deal.id, v)}
-                                                >
-                                                    <SelectTrigger
-                                                        className={cn(
-                                                            'h-8 w-[min(100%,150px)] border-slate-200 shadow-none'
-                                                        )}
-                                                    >
+                                            deal={deal}
+                                            tableEditRowId={tableEditRowId}
+                                            setTableEditRowId={setTableEditRowId}
+                                            patchDeal={patchDeal}
+                                            updateStage={updateStage}
+                                            openDeal={openDeal}
+                                        />
+                                    ))}
+                                </tbody>
+                            ) : (
+                                dealsByStage.map((group) => {
+                                    const sumDeal = sumNumeric(group.deals, 'deal_value');
+                                    const sumForecast = sumNumeric(group.deals, 'forecast_value');
+                                    const bar =
+                                        STAGE_GROUP_HEADER[group.value] ||
+                                        'border-l-[6px] border-l-slate-400 bg-slate-50';
+                                    return (
+                                        <tbody key={group.value} className="border-b border-slate-200">
+                                            <tr className={cn(bar)}>
+                                                <td colSpan={12} className="px-3 py-2.5">
+                                                    <div className="flex flex-wrap items-center gap-2">
                                                         <span
                                                             className={cn(
-                                                                'rounded-full px-2 py-0.5 text-xs font-medium',
-                                                                meta.className
+                                                                'rounded-full px-2.5 py-0.5 text-xs font-semibold',
+                                                                group.className
                                                             )}
                                                         >
-                                                            {meta.label}
+                                                            {group.label}
+                                                        </span>
+                                                        <span className="text-sm text-slate-600">
+                                                            {group.deals.length}{' '}
+                                                            {group.deals.length === 1 ? 'deal' : 'deals'}
                                                         </span>
-                                                    </SelectTrigger>
-                                                    <SelectContent className="min-w-[180px]">
-                                                        {STAGES.map((s) => (
-                                                            <SelectItem key={s.value} value={s.value}>
-                                                                <span
-                                                                    className={cn(
-                                                                        'rounded-full px-2 py-0.5 text-xs font-medium inline-block',
-                                                                        s.className
-                                                                    )}
-                                                                >
-                                                                    {s.label}
-                                                                </span>
-                                                            </SelectItem>
-                                                        ))}
-                                                    </SelectContent>
-                                                </Select>
-                                            </td>
-                                            <td className="px-3 py-2 align-top">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        value={deal.owner_initials || ''}
-                                                        onCommit={(v) =>
-                                                            patchDeal(deal.id, {
-                                                                owner_initials: (v || '')
-                                                                    .slice(0, 8)
-                                                                    .toUpperCase(),
-                                                            })
-                                                        }
-                                                        inputClassName="text-center uppercase tracking-wide max-w-[4.5rem] font-semibold"
-                                                    />
-                                                ) : (
-                                                    <div className="h-8 w-8 rounded-full bg-violet-100 text-violet-700 text-xs font-semibold flex items-center justify-center border border-violet-200">
-                                                        {deal.owner_initials || '?'}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top tabular-nums max-w-[120px]">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        type="number"
-                                                        value={
-                                                            deal.deal_value != null ? String(deal.deal_value) : ''
-                                                        }
-                                                        onCommit={(v) => {
-                                                            if (v.trim() === '') {
-                                                                patchDeal(deal.id, { deal_value: null });
-                                                                return;
-                                                            }
-                                                            const n = Math.round(Number(v));
-                                                            if (!Number.isFinite(n)) return;
-                                                            patchDeal(deal.id, { deal_value: n });
-                                                        }}
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
-                                                        {fmtMoney(deal.deal_value)}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top max-w-[180px]">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        value={deal.contact_display || ''}
-                                                        onCommit={(v) =>
-                                                            patchDeal(deal.id, { contact_display: v })
-                                                        }
-                                                        inputClassName="text-xs"
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1">
-                                                        {deal.contact_display ? (
-                                                            <span className="inline-flex rounded-md bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-800">
-                                                                {deal.contact_display}
-                                                            </span>
-                                                        ) : (
-                                                            <span className="text-slate-500">—</span>
-                                                        )}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top max-w-[200px]">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        value={deal.account_name || ''}
-                                                        onCommit={(v) => patchDeal(deal.id, { account_name: v })}
-                                                        inputClassName="text-xs"
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1">
-                                                        {deal.account_name ? (
-                                                            <span className="inline-flex rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-800">
-                                                                {deal.account_name}
-                                                            </span>
-                                                        ) : (
-                                                            <span className="text-slate-500">—</span>
-                                                        )}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableDateCell
-                                                        value={deal.expected_close_date}
-                                                        onCommit={(dateStr) =>
-                                                            patchDeal(deal.id, {
-                                                                expected_close_date: dateStr || null,
-                                                            })
-                                                        }
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
-                                                        {fmtDate(deal.expected_close_date)}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top tabular-nums max-w-[90px]">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        type="number"
-                                                        value={
-                                                            deal.close_probability != null
-                                                                ? String(deal.close_probability)
-                                                                : ''
-                                                        }
-                                                        onCommit={(v) => {
-                                                            if (v.trim() === '') {
-                                                                patchDeal(deal.id, { close_probability: 0 });
-                                                                return;
-                                                            }
-                                                            const n = Math.min(
-                                                                100,
-                                                                Math.max(0, Math.round(Number(v)))
-                                                            );
-                                                            if (!Number.isFinite(n)) return;
-                                                            patchDeal(deal.id, { close_probability: n });
-                                                        }}
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700 tabular-nums">
-                                                        {deal.close_probability ?? '—'}%
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td
-                                                className="px-3 py-2 tabular-nums text-slate-700"
-                                                title="Forecast = deal value × close %"
-                                            >
-                                                {fmtMoney(deal.forecast_value)}
-                                            </td>
-                                            <td className="px-3 py-2 align-top">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableDateCell
-                                                        value={deal.last_interaction_at}
-                                                        onCommit={(dateStr) =>
-                                                            patchDeal(deal.id, {
-                                                                last_interaction_at: dateStr || null,
-                                                            })
-                                                        }
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-600">
-                                                        {fmtDate(deal.last_interaction_at)}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            <td className="px-3 py-2 align-top max-w-[120px]">
-                                                {tableEditRowId === deal.id ? (
-                                                    <EditableCell
-                                                        value={deal.country || ''}
-                                                        onCommit={(v) => patchDeal(deal.id, { country: v })}
-                                                    />
-                                                ) : (
-                                                    <div className="min-h-[2rem] py-1 text-sm text-slate-700">
-                                                        {deal.country || '—'}
                                                     </div>
-                                                )}
-                                            </td>
-                                        </tr>
+                                                </td>
+                                            </tr>
+                                            {group.deals.map((deal) => (
+                                                <DealRow
+                                                    key={deal.id}
+                                                    deal={deal}
+                                                    tableEditRowId={tableEditRowId}
+                                                    setTableEditRowId={setTableEditRowId}
+                                                    patchDeal={patchDeal}
+                                                    updateStage={updateStage}
+                                                    openDeal={openDeal}
+                                                />
+                                            ))}
+                                            <tr className="bg-slate-50/90 text-slate-700 border-b border-slate-100">
+                                                <td colSpan={4} className="px-3 py-2 text-right text-xs text-slate-500">
+                                                    Group total
+                                                </td>
+                                                <td className="px-3 py-2 font-semibold tabular-nums">
+                                                    {fmtMoney(sumDeal)}
+                                                </td>
+                                                <td colSpan={4} />
+                                                <td className="px-3 py-2 font-semibold tabular-nums">
+                                                    {fmtMoney(sumForecast)}
+                                                </td>
+                                                <td colSpan={2} />
+                                            </tr>
+                                            <tr>
+                                                <td colSpan={12} className="px-3 py-1.5">
+                                                    <Button
+                                                        type="button"
+                                                        variant="ghost"
+                                                        size="sm"
+                                                        className="h-8 text-violet-700 hover:text-violet-900 hover:bg-violet-50"
+                                                        onClick={() => {}}
+                                                    >
+                                                        + Add deal
+                                                    </Button>
+                                                </td>
+                                            </tr>
+                                        </tbody>
                                     );
-                                })}
-                            </tbody>
+                                })
+                            )}
                         </table>
                     )}
                 </div>