update

frontend/src/components/workspace/SearchableCountryPicker.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import { getAllCountries, flagEmojiFromCode, matchCountry } from '@/lib/countries';
+
+/**
+ * Table cell: shows flag only; opens searchable list of countries (full names).
+ */
+export function SearchableCountryPicker({ value, onChange, className = '' }) {
+    const countries = useMemo(() => getAllCountries(), []);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const inputRef = useRef(null);
+    const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
+
+    const matched = matchCountry(value || '', countries);
+    const flag = matched ? flagEmojiFromCode(matched.code) : '🏳️';
+    const title = matched ? matched.name : value || 'Select country';
+
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q) return countries;
+        return countries.filter(
+            (c) =>
+                c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q)
+        );
+    }, [countries, query]);
+
+    useLayoutEffect(() => {
+        if (!open || !triggerRef.current) return;
+        const r = triggerRef.current.getBoundingClientRect();
+        setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 220) });
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+        const reposition = () => {
+            if (!triggerRef.current) return;
+            const r = triggerRef.current.getBoundingClientRect();
+            setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 220) });
+        };
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        return () => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        };
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+        const t = requestAnimationFrame(() => inputRef.current?.focus());
+        return () => cancelAnimationFrame(t);
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+        const onPointerDown = (e) => {
+            const tr = triggerRef.current;
+            const menu = menuRef.current;
+            if (tr?.contains(e.target) || menu?.contains(e.target)) return;
+            setOpen(false);
+            setQuery('');
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => document.removeEventListener('pointerdown', onPointerDown);
+    }, [open]);
+
+    const pick = (row) => {
+        onChange(row.name);
+        setOpen(false);
+        setQuery('');
+    };
+
+    return (
+        <div className={cn('relative inline-flex', className)}>
+            <button
+                ref={triggerRef}
+                type="button"
+                title={title}
+                aria-haspopup="listbox"
+                aria-expanded={open}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    setOpen((o) => !o);
+                }}
+                className={cn(
+                    'flex h-8 min-w-[2.25rem] items-center justify-center rounded-md border border-transparent',
+                    'bg-transparent text-xl leading-none hover:border-slate-200 hover:bg-white',
+                    'focus:outline-none focus:ring-2 focus:ring-violet-200 focus:ring-offset-0'
+                )}
+            >
+                <span aria-hidden>{flag}</span>
+                <span className="sr-only">{title}</span>
+            </button>
+
+            {open &&
+                createPortal(
+                    <div
+                        ref={menuRef}
+                        role="listbox"
+                        data-country-picker="true"
+                        className="fixed z-[10050] rounded-md border border-slate-200 bg-white shadow-lg"
+                        style={{
+                            top: pos.top,
+                            left: pos.left,
+                            minWidth: pos.width,
+                            maxHeight: 'min(70vh, 20rem)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div className="border-b border-slate-100 p-2">
+                            <input
+                                ref={inputRef}
+                                type="search"
+                                role="combobox"
+                                aria-autocomplete="list"
+                                placeholder="Search countries…"
+                                value={query}
+                                onChange={(e) => setQuery(e.target.value)}
+                                onKeyDown={(e) => e.stopPropagation()}
+                                className="w-full rounded-md border border-slate-200 px-2 py-1.5 text-sm outline-none focus:border-violet-300 focus:ring-1 focus:ring-violet-200"
+                            />
+                        </div>
+                        <div className="overflow-y-auto p-1">
+                            <button
+                                type="button"
+                                role="option"
+                                className="flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm text-slate-600 hover:bg-slate-100"
+                                onClick={() => {
+                                    onChange('');
+                                    setOpen(false);
+                                    setQuery('');
+                                }}
+                            >
+                                <span className="text-base" aria-hidden>
+                                    🏳️
+                                </span>
+                                <span>Clear</span>
+                            </button>
+                            {filtered.map((c) => (
+                                <button
+                                    key={c.code}
+                                    type="button"
+                                    role="option"
+                                    className={cn(
+                                        'flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-slate-100',
+                                        matched?.code === c.code && 'bg-violet-50'
+                                    )}
+                                    onClick={() => pick(c)}
+                                >
+                                    <span className="text-base leading-none" aria-hidden>
+                                        {flagEmojiFromCode(c.code)}
+                                    </span>
+                                    <span>{c.name}</span>
+                                </button>
+                            ))}
+                            {filtered.length === 0 ? (
+                                <div className="px-2 py-3 text-center text-sm text-slate-500">
+                                    No matches
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>,
+                    document.body
+                )}
+        </div>
+    );
+}

frontend/src/lib/countries.js

@@ -0,0 +1,97 @@
+/** ISO 3166-1 alpha-2 → regional indicator symbols (flag emoji). */
+export function flagEmojiFromCode(code) {
+    if (!code || typeof code !== 'string' || code.length !== 2) return '🏳️';
+    const u = code.toUpperCase();
+    if (u.length !== 2 || /[^A-Z]/.test(u)) return '🏳️';
+    return String.fromCodePoint(...[...u].map((c) => 127397 + c.charCodeAt(0)));
+}
+
+const COMMON = [
+    ['US', 'United States'],
+    ['CA', 'Canada'],
+    ['GB', 'United Kingdom'],
+    ['AU', 'Australia'],
+    ['DE', 'Germany'],
+    ['FR', 'France'],
+    ['IN', 'India'],
+    ['JP', 'Japan'],
+    ['CN', 'China'],
+    ['BR', 'Brazil'],
+    ['MX', 'Mexico'],
+    ['ES', 'Spain'],
+    ['IT', 'Italy'],
+    ['NL', 'Netherlands'],
+    ['SE', 'Sweden'],
+    ['NO', 'Norway'],
+    ['DK', 'Denmark'],
+    ['FI', 'Finland'],
+    ['CH', 'Switzerland'],
+    ['AT', 'Austria'],
+    ['BE', 'Belgium'],
+    ['IE', 'Ireland'],
+    ['NZ', 'New Zealand'],
+    ['SG', 'Singapore'],
+    ['KR', 'South Korea'],
+    ['TW', 'Taiwan'],
+    ['HK', 'Hong Kong'],
+    ['ZA', 'South Africa'],
+    ['AE', 'United Arab Emirates'],
+    ['IL', 'Israel'],
+    ['PL', 'Poland'],
+    ['PT', 'Portugal'],
+    ['AR', 'Argentina'],
+    ['CL', 'Chile'],
+    ['CO', 'Colombia'],
+];
+
+let cached = null;
+
+/**
+ * @returns {{ code: string, name: string }[]}
+ */
+export function getAllCountries() {
+    if (cached) return cached;
+    if (typeof Intl !== 'undefined' && typeof Intl.supportedValuesOf === 'function') {
+        try {
+            const codes = Intl.supportedValuesOf('region').filter((c) => c.length === 2);
+            const dn = new Intl.DisplayNames(['en'], { type: 'region' });
+            const rows = codes
+                .map((code) => {
+                    let name = '';
+                    try {
+                        name = dn.of(code) || '';
+                    } catch {
+                        name = '';
+                    }
+                    return { code, name: name && name !== code ? name : '' };
+                })
+                .filter((x) => x.name);
+            rows.sort((a, b) => a.name.localeCompare(b.name));
+            cached = rows;
+            return cached;
+        } catch {
+            /* fallback */
+        }
+    }
+    cached = COMMON.map(([code, name]) => ({ code, name })).sort((a, b) =>
+        a.name.localeCompare(b.name)
+    );
+    return cached;
+}
+
+/**
+ * Match stored deal.country (full name or code) to a row.
+ * @param {string} stored
+ * @param {{ code: string, name: string }[]} countries
+ */
+export function matchCountry(stored, countries) {
+    if (!stored || typeof stored !== 'string') return null;
+    const s = stored.trim();
+    if (!s) return null;
+    const lower = s.toLowerCase();
+    const byName = countries.find((c) => c.name.toLowerCase() === lower);
+    if (byName) return byName;
+    const byCode = countries.find((c) => c.code.toLowerCase() === lower);
+    if (byCode) return byCode;
+    return countries.find((c) => c.name.toLowerCase().includes(lower)) || null;
+}

frontend/src/pages/Deals.jsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Search, Loader2, LayoutGrid, Pencil } from 'lucide-react';
+import { Loader2, LayoutGrid, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
 import MainTableWorkspace from '@/components/workspace/MainTableWorkspace';
 import SlideOverPanel from '@/components/workspace/SlideOverPanel';
 import { EditableCell, EditableDateCell } from '@/components/workspace/EditableCell';
+import { SearchableCountryPicker } from '@/components/workspace/SearchableCountryPicker';
 import { cn } from '@/lib/utils';
 
 const STAGES = [
@@ -50,11 +51,19 @@ function fmtDate(iso) {
 function isRowUiTarget(e) {
     return Boolean(
         e.target.closest(
-            'input, textarea, button, a, [role="combobox"], [role="listbox"], [data-radix-collection-item]'
+            'input, textarea, button, a, [role="combobox"], [role="listbox"], [data-radix-collection-item], [data-country-picker]'
         )
     );
 }
 
+/** Maps stored probability to Select value: __clear__ or "10"…"100" (nearest 10, min 10). */
+function closeProbabilitySelectValue(p) {
+    if (p == null || p === '') return '__clear__';
+    const n = Number(p);
+    if (!Number.isFinite(n) || n <= 0) return '__clear__';
+    return String(Math.min(100, Math.max(10, Math.round(n / 10) * 10)));
+}
+
 function focusFirstEditableInRow(tr) {
     if (!tr) return;
     const el = tr.querySelector('input:not([type="checkbox"]):not([type="hidden"]), textarea');
@@ -71,6 +80,7 @@ function sumNumeric(arr, key) {
 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';
+    const closeSel = closeProbabilitySelectValue(deal.close_probability);
     return (
         <tr
             role="button"
@@ -233,73 +243,68 @@ function DealRow({ deal, tableEditRowId, setTableEditRowId, patchDeal, updateSta
                     </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 className="px-3 py-2 align-top" onClick={(e) => e.stopPropagation()}>
+                <EditableDateCell
+                    value={deal.expected_close_date}
+                    onCommit={(dateStr) =>
+                        patchDeal(deal.id, {
+                            expected_close_date: dateStr || null,
+                        })
+                    }
+                    className="text-sm max-w-[10.5rem]"
+                />
             </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) : ''
+            <td className="px-3 py-2 align-top tabular-nums max-w-[100px]" onClick={(e) => e.stopPropagation()}>
+                <Select
+                    value={closeSel}
+                    onValueChange={(v) => {
+                        if (v === '__clear__') {
+                            patchDeal(deal.id, { close_probability: 0 });
+                            return;
                         }
-                        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>
-                )}
+                        patchDeal(deal.id, { close_probability: Number(v) });
+                    }}
+                >
+                    <SelectTrigger
+                        className={cn(
+                            'h-8 w-[min(100%,4.75rem)] border-slate-200 shadow-none justify-center gap-0.5 px-2'
+                        )}
+                    >
+                        <span className="text-sm font-medium tabular-nums text-slate-800">
+                            {closeSel === '__clear__' ? '—' : `${closeSel}%`}
+                        </span>
+                    </SelectTrigger>
+                    <SelectContent className="min-w-[5.5rem]">
+                        <SelectItem value="__clear__">
+                            <span className="text-slate-500">—</span>
+                        </SelectItem>
+                        {[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((n) => (
+                            <SelectItem key={n} value={String(n)}>
+                                <span className="tabular-nums">{n}%</span>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
             </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 className="px-3 py-2 align-top" onClick={(e) => e.stopPropagation()}>
+                <EditableDateCell
+                    value={deal.last_interaction_at}
+                    onCommit={(dateStr) =>
+                        patchDeal(deal.id, {
+                            last_interaction_at: dateStr || null,
+                        })
+                    }
+                    className="text-sm max-w-[10.5rem]"
+                />
             </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 className="px-3 py-2 align-top max-w-[4rem]" onClick={(e) => e.stopPropagation()}>
+                <SearchableCountryPicker
+                    value={deal.country || ''}
+                    onChange={(name) => patchDeal(deal.id, { country: name || null })}
+                />
             </td>
         </tr>
     );