update

frontend/src/pages/Deals.jsx

@@ -9,6 +9,7 @@ import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import { EditableCell, EditableDateCell } from '@/components/workspace/EditableCell';
 import { SearchableCountryPicker } from '@/components/workspace/SearchableCountryPicker';
 import { cn } from '@/lib/utils';
+import { flagEmojiFromCode, getAllCountries, matchCountry } from '@/lib/countries';
 
 const STAGES = [
     { value: 'new', label: 'New', className: 'bg-slate-800 text-white' },
@@ -19,6 +20,18 @@ const STAGES = [
     { value: 'lost', label: 'Lost', className: 'bg-red-500 text-white' },
 ];
 
+const EMPTY_COUNTRY_KEY = '__country_none__';
+const EMPTY_OWNER_KEY = '__owner_none__';
+
+/** Accent bars for By Country / By Owner groups (rotate). */
+const GROUP_BAR_ROTATING = [
+    'border-l-[6px] border-l-indigo-500 bg-indigo-50/75',
+    'border-l-[6px] border-l-sky-600 bg-sky-50/70',
+    'border-l-[6px] border-l-amber-500 bg-amber-50/70',
+    'border-l-[6px] border-l-teal-600 bg-teal-50/70',
+    'border-l-[6px] border-l-rose-500 bg-rose-50/70',
+];
+
 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',
@@ -77,6 +90,85 @@ function sumNumeric(arr, key) {
     }, 0);
 }
 
+function CountryGroupHeaderTitle({ displayLabel, dealCount }) {
+    const countries = useMemo(() => getAllCountries(), []);
+    const matched =
+        displayLabel === 'No country' ? null : matchCountry(displayLabel, countries);
+    const flag = matched ? flagEmojiFromCode(matched.code) : '🏳️';
+    return (
+        <div className="flex flex-wrap items-center gap-2">
+            <span className="text-xl leading-none" aria-hidden>
+                {flag}
+            </span>
+            <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800">
+                {displayLabel}
+            </span>
+            <span className="text-sm text-slate-600">
+                {dealCount} {dealCount === 1 ? 'deal' : 'deals'}
+            </span>
+        </div>
+    );
+}
+
+function GroupedDealTbody({
+    barClassName,
+    headerContent,
+    deals,
+    tableEditRowId,
+    setTableEditRowId,
+    patchDeal,
+    updateStage,
+    openDeal,
+    createBusy,
+    onAddDeal,
+}) {
+    const sumDeal = sumNumeric(deals, 'deal_value');
+    const sumForecast = sumNumeric(deals, 'forecast_value');
+    return (
+        <tbody className="border-b border-slate-200">
+            <tr className={barClassName}>
+                <td colSpan={12} className="px-3 py-2.5">
+                    {headerContent}
+                </td>
+            </tr>
+            {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"
+                        disabled={createBusy}
+                        onClick={onAddDeal}
+                    >
+                        + Add deal
+                    </Button>
+                </td>
+            </tr>
+        </tbody>
+    );
+}
+
 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';
@@ -365,6 +457,45 @@ export default function Deals() {
         })).filter((g) => g.deals.length > 0);
     }, [deals]);
 
+    const dealsByCountry = useMemo(() => {
+        const map = new Map();
+        for (const d of deals) {
+            const raw = (d.country || '').trim();
+            const sortKey = raw ? raw.toLowerCase() : EMPTY_COUNTRY_KEY;
+            if (!map.has(sortKey)) {
+                map.set(sortKey, { sortKey, displayLabel: raw || 'No country', deals: [] });
+            }
+            map.get(sortKey).deals.push(d);
+        }
+        const groups = [...map.values()].filter((g) => g.deals.length > 0);
+        groups.sort((a, b) => {
+            if (a.sortKey === EMPTY_COUNTRY_KEY) return 1;
+            if (b.sortKey === EMPTY_COUNTRY_KEY) return -1;
+            return a.displayLabel.localeCompare(b.displayLabel, undefined, { sensitivity: 'base' });
+        });
+        return groups;
+    }, [deals]);
+
+    const dealsByOwner = useMemo(() => {
+        const map = new Map();
+        for (const d of deals) {
+            const raw = (d.owner_initials || '').trim();
+            const sortKey = raw ? raw.toUpperCase() : EMPTY_OWNER_KEY;
+            if (!map.has(sortKey)) {
+                const label = raw ? raw.toUpperCase() : 'Unassigned';
+                map.set(sortKey, { sortKey, displayLabel: label, deals: [] });
+            }
+            map.get(sortKey).deals.push(d);
+        }
+        const groups = [...map.values()].filter((g) => g.deals.length > 0);
+        groups.sort((a, b) => {
+            if (a.sortKey === EMPTY_OWNER_KEY) return 1;
+            if (b.sortKey === EMPTY_OWNER_KEY) return -1;
+            return a.displayLabel.localeCompare(b.displayLabel);
+        });
+        return groups;
+    }, [deals]);
+
     const seedDemo = async () => {
         setSeedBusy(true);
         try {
@@ -477,6 +608,16 @@ export default function Deals() {
                         active: dealsView === 'byStage',
                         onClick: () => setDealsView('byStage'),
                     },
+                    {
+                        label: 'By Country',
+                        active: dealsView === 'byCountry',
+                        onClick: () => setDealsView('byCountry'),
+                    },
+                    {
+                        label: 'By Owner',
+                        active: dealsView === 'byOwner',
+                        onClick: () => setDealsView('byOwner'),
+                    },
                     { label: 'Pipeline', active: false, disabled: true },
                 ]}
                 primaryAction={{
@@ -563,75 +704,97 @@ export default function Deals() {
                                         />
                                     ))}
                                 </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.5 py-0.5 text-xs font-semibold',
-                                                                group.className
-                                                            )}
-                                                        >
-                                                            {group.label}
-                                                        </span>
-                                                        <span className="text-sm text-slate-600">
-                                                            {group.deals.length}{' '}
-                                                            {group.deals.length === 1 ? 'deal' : 'deals'}
-                                                        </span>
-                                                    </div>
-                                                </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"
-                                                        disabled={createBusy}
-                                                        onClick={() => createDeal(group.value)}
-                                                    >
-                                                        + Add deal
-                                                    </Button>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    );
-                                })
-                            )}
+                            ) : dealsView === 'byStage' ? (
+                                dealsByStage.map((group) => (
+                                    <GroupedDealTbody
+                                        key={`stage-${group.value}`}
+                                        barClassName={
+                                            STAGE_GROUP_HEADER[group.value] ||
+                                            'border-l-[6px] border-l-slate-400 bg-slate-50'
+                                        }
+                                        headerContent={
+                                            <div className="flex flex-wrap items-center gap-2">
+                                                <span
+                                                    className={cn(
+                                                        'rounded-full px-2.5 py-0.5 text-xs font-semibold',
+                                                        group.className
+                                                    )}
+                                                >
+                                                    {group.label}
+                                                </span>
+                                                <span className="text-sm text-slate-600">
+                                                    {group.deals.length}{' '}
+                                                    {group.deals.length === 1 ? 'deal' : 'deals'}
+                                                </span>
+                                            </div>
+                                        }
+                                        deals={group.deals}
+                                        tableEditRowId={tableEditRowId}
+                                        setTableEditRowId={setTableEditRowId}
+                                        patchDeal={patchDeal}
+                                        updateStage={updateStage}
+                                        openDeal={openDeal}
+                                        createBusy={createBusy}
+                                        onAddDeal={() => createDeal(group.value)}
+                                    />
+                                ))
+                            ) : dealsView === 'byCountry' ? (
+                                dealsByCountry.map((group, idx) => (
+                                    <GroupedDealTbody
+                                        key={`country-${group.sortKey}`}
+                                        barClassName={
+                                            GROUP_BAR_ROTATING[idx % GROUP_BAR_ROTATING.length]
+                                        }
+                                        headerContent={
+                                            <CountryGroupHeaderTitle
+                                                displayLabel={group.displayLabel}
+                                                dealCount={group.deals.length}
+                                            />
+                                        }
+                                        deals={group.deals}
+                                        tableEditRowId={tableEditRowId}
+                                        setTableEditRowId={setTableEditRowId}
+                                        patchDeal={patchDeal}
+                                        updateStage={updateStage}
+                                        openDeal={openDeal}
+                                        createBusy={createBusy}
+                                        onAddDeal={() => createDeal('new')}
+                                    />
+                                ))
+                            ) : dealsView === 'byOwner' ? (
+                                dealsByOwner.map((group, idx) => (
+                                    <GroupedDealTbody
+                                        key={`owner-${group.sortKey}`}
+                                        barClassName={
+                                            GROUP_BAR_ROTATING[idx % GROUP_BAR_ROTATING.length]
+                                        }
+                                        headerContent={
+                                            <div className="flex flex-wrap items-center gap-2">
+                                                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-semibold text-violet-800 border border-violet-200">
+                                                    {group.sortKey === EMPTY_OWNER_KEY
+                                                        ? '?'
+                                                        : group.displayLabel.slice(0, 2)}
+                                                </div>
+                                                <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-800">
+                                                    {group.displayLabel}
+                                                </span>
+                                                <span className="text-sm text-slate-600">
+                                                    {group.deals.length}{' '}
+                                                    {group.deals.length === 1 ? 'deal' : 'deals'}
+                                                </span>
+                                            </div>
+                                        }
+                                        deals={group.deals}
+                                        tableEditRowId={tableEditRowId}
+                                        setTableEditRowId={setTableEditRowId}
+                                        patchDeal={patchDeal}
+                                        updateStage={updateStage}
+                                        openDeal={openDeal}
+                                        createBusy={createBusy}
+                                        onAddDeal={() => createDeal('new')}
+                                    />
+                                ))
+                            ) : null}
                         </table>
                     )}
                 </div>