update

frontend/src/components/workspace/SlideOverPanel.jsx

@@ -41,7 +41,11 @@ export default function SlideOverPanel({
             >
                 <div className="flex justify-between items-start gap-4 mb-6">
                     <div className="min-w-0 pr-2 flex-1">
-                        <h3 className="text-lg font-bold text-slate-900 truncate">{title}</h3>
+                        {typeof title === 'string' || title == null ? (
+                            <h3 className="text-lg font-bold text-slate-900 truncate">{title || ''}</h3>
+                        ) : (
+                            <div className="w-full min-w-0">{title}</div>
+                        )}
                         {subtitle ? (
                             <p className="text-sm text-slate-500 mt-1 break-words">{subtitle}</p>
                         ) : null}

frontend/src/pages/Deals.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { GitBranch, Loader2, LayoutGrid, MessageSquare, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
 import AppShell from '@/components/layout/AppShell';
 import MainTableWorkspace from '@/components/workspace/MainTableWorkspace';
@@ -82,6 +83,13 @@ function isRowUiTarget(e) {
     );
 }
 
+function isoToDateInput(iso) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return '';
+    return d.toISOString().slice(0, 10);
+}
+
 /** Maps stored probability to Select value: __clear__ or "10"…"100" (nearest 10, min 10). */
 function closeProbabilitySelectValue(p) {
     if (p == null || p === '') return '__clear__';
@@ -591,6 +599,8 @@ export default function Deals() {
     const [createBusy, setCreateBusy] = useState(false);
     const [companyFetchLoading, setCompanyFetchLoading] = useState(false);
     const [companyFetchError, setCompanyFetchError] = useState('');
+    const [dealPanelForm, setDealPanelForm] = useState(null);
+    const [dealPanelSaving, setDealPanelSaving] = useState(false);
 
     const fetchDeals = useCallback(async () => {
         setLoading(true);
@@ -812,6 +822,7 @@ export default function Deals() {
         if (!opts.keepTableEdit) setTableEditRowId(null);
         setPanelOpen(true);
         setDealDetail(deal);
+        setDealPanelForm(null);
         try {
             const res = await fetch(`/api/deals/${deal.id}`);
             if (res.ok) {
@@ -823,6 +834,50 @@ export default function Deals() {
         }
     };
 
+    useEffect(() => {
+        if (!dealDetail) {
+            setDealPanelForm(null);
+            return;
+        }
+        setDealPanelForm({
+            name: dealDetail.name || '',
+            deal_value: dealDetail.deal_value != null ? String(dealDetail.deal_value) : '',
+            close_prob: closeProbabilitySelectValue(dealDetail.close_probability),
+            expected_close: isoToDateInput(dealDetail.expected_close_date),
+            contact_display: dealDetail.contact_display || '',
+            last_interaction: isoToDateInput(dealDetail.last_interaction_at),
+        });
+    }, [dealDetail]);
+
+    const saveDealPanel = async () => {
+        if (!dealDetail || !dealPanelForm) return;
+        setDealPanelSaving(true);
+        try {
+            let deal_value = null;
+            if (dealPanelForm.deal_value.trim() !== '') {
+                const n = Math.round(Number(dealPanelForm.deal_value));
+                if (Number.isFinite(n)) deal_value = n;
+            }
+            let close_probability = 0;
+            if (dealPanelForm.close_prob !== '__clear__') {
+                close_probability = Number(dealPanelForm.close_prob);
+                if (!Number.isFinite(close_probability)) close_probability = 0;
+            }
+            await patchDeal(dealDetail.id, {
+                name: dealPanelForm.name.trim() || 'Untitled deal',
+                deal_value,
+                close_probability,
+                expected_close_date: dealPanelForm.expected_close.trim() ? dealPanelForm.expected_close.trim() : null,
+                contact_display: dealPanelForm.contact_display.trim(),
+                last_interaction_at: dealPanelForm.last_interaction.trim()
+                    ? dealPanelForm.last_interaction.trim()
+                    : null,
+            });
+        } finally {
+            setDealPanelSaving(false);
+        }
+    };
+
     const closePanel = () => {
         setTableEditRowId(null);
         setPanelOpen(false);
@@ -1053,7 +1108,21 @@ export default function Deals() {
             <SlideOverPanel
                 open={panelOpen && !!dealDetail}
                 onClose={closePanel}
-                title={dealDetail?.name || 'Deal'}
+                title={
+                    dealPanelForm ? (
+                        <Input
+                            value={dealPanelForm.name}
+                            onChange={(e) =>
+                                setDealPanelForm((f) => ({ ...f, name: e.target.value }))
+                            }
+                            className="text-lg font-semibold text-slate-900 border-slate-200 h-10 px-3 w-full max-w-full shadow-sm"
+                            placeholder="Deal name"
+                            aria-label="Deal name"
+                        />
+                    ) : (
+                        dealDetail?.name || 'Deal'
+                    )
+                }
                 subtitle={
                     dealDetail?.stage
                         ? `Stage: ${stageMeta(dealDetail.stage).label} · Forecast ${fmtMoney(dealDetail.forecast_value)}`
@@ -1061,9 +1130,132 @@ export default function Deals() {
                 }
                 widthClassName="max-w-xl"
             >
-                {dealDetail && (
+                {dealDetail && dealPanelForm && (
                     <div className="space-y-6 text-sm">
-                        <section>
+                        <section className="rounded-xl border border-slate-200 bg-slate-50/50 p-4">
+                            <h4 className="text-sm font-semibold text-slate-800 mb-3">Deal information</h4>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-500 mb-1">
+                                        Deal value (USD)
+                                    </label>
+                                    <Input
+                                        type="number"
+                                        min={0}
+                                        step={1}
+                                        value={dealPanelForm.deal_value}
+                                        onChange={(e) =>
+                                            setDealPanelForm((f) => ({
+                                                ...f,
+                                                deal_value: e.target.value,
+                                            }))
+                                        }
+                                        className="text-sm tabular-nums bg-white"
+                                        placeholder="—"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-500 mb-1">
+                                        Close probability
+                                    </label>
+                                    <Select
+                                        value={dealPanelForm.close_prob}
+                                        onValueChange={(v) =>
+                                            setDealPanelForm((f) => ({ ...f, close_prob: v }))
+                                        }
+                                    >
+                                        <SelectTrigger className="h-10 border-slate-200 bg-white shadow-sm">
+                                            <span className="tabular-nums">
+                                                {dealPanelForm.close_prob === '__clear__'
+                                                    ? '—'
+                                                    : `${dealPanelForm.close_prob}%`}
+                                            </span>
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <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>
+                                </div>
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-500 mb-1">
+                                        Expected close
+                                    </label>
+                                    <Input
+                                        type="date"
+                                        value={dealPanelForm.expected_close}
+                                        onChange={(e) =>
+                                            setDealPanelForm((f) => ({
+                                                ...f,
+                                                expected_close: e.target.value,
+                                            }))
+                                        }
+                                        className="text-sm bg-white"
+                                    />
+                                </div>
+                                <div>
+                                    <label className="block text-xs font-medium text-slate-500 mb-1">
+                                        Last interaction
+                                    </label>
+                                    <Input
+                                        type="date"
+                                        value={dealPanelForm.last_interaction}
+                                        onChange={(e) =>
+                                            setDealPanelForm((f) => ({
+                                                ...f,
+                                                last_interaction: e.target.value,
+                                            }))
+                                        }
+                                        className="text-sm bg-white"
+                                    />
+                                </div>
+                                <div className="sm:col-span-2">
+                                    <label className="block text-xs font-medium text-slate-500 mb-1">
+                                        Contact (display)
+                                    </label>
+                                    <Input
+                                        value={dealPanelForm.contact_display}
+                                        onChange={(e) =>
+                                            setDealPanelForm((f) => ({
+                                                ...f,
+                                                contact_display: e.target.value,
+                                            }))
+                                        }
+                                        className="text-sm bg-white"
+                                        placeholder="Name shown on deal card"
+                                    />
+                                </div>
+                            </div>
+                            <Button
+                                type="button"
+                                className="w-full sm:w-auto"
+                                onClick={saveDealPanel}
+                                disabled={dealPanelSaving}
+                            >
+                                {dealPanelSaving ? (
+                                    <>
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
+                                        Saving…
+                                    </>
+                                ) : (
+                                    'Save deal'
+                                )}
+                            </Button>
+                            {dealDetail.source_campaign_name ? (
+                                <p className="mt-3 text-xs text-slate-500">
+                                    Source campaign:{' '}
+                                    <span className="text-slate-700">{dealDetail.source_campaign_name}</span>
+                                </p>
+                            ) : null}
+                        </section>
+
+                        <section className="border-t border-slate-100 pt-6">
                             <h4 className="text-sm font-semibold text-slate-800 mb-2">Contact details</h4>
                             <DealContactSearch
                                 linkedContactId={dealDetail.contact_id}
@@ -1094,35 +1286,6 @@ export default function Deals() {
                             )}
                         </section>
 
-                        <dl className="space-y-3 border-t border-slate-100 pt-6">
-                            <div>
-                                <dt className="text-slate-500">Deal value</dt>
-                                <dd className="font-medium tabular-nums">{fmtMoney(dealDetail.deal_value)}</dd>
-                            </div>
-                            <div>
-                                <dt className="text-slate-500">Close probability</dt>
-                                <dd>{dealDetail.close_probability ?? '—'}%</dd>
-                            </div>
-                            <div>
-                                <dt className="text-slate-500">Expected close</dt>
-                                <dd>{fmtDate(dealDetail.expected_close_date)}</dd>
-                            </div>
-                            <div>
-                                <dt className="text-slate-500">Contact (display)</dt>
-                                <dd>{dealDetail.contact_display || '—'}</dd>
-                            </div>
-                            <div>
-                                <dt className="text-slate-500">Last interaction</dt>
-                                <dd>{fmtDate(dealDetail.last_interaction_at)}</dd>
-                            </div>
-                            {dealDetail.source_campaign_name ? (
-                                <div>
-                                    <dt className="text-slate-500">Source campaign</dt>
-                                    <dd>{dealDetail.source_campaign_name}</dd>
-                                </div>
-                            ) : null}
-                        </dl>
-
                         <section className="border-t border-slate-100 pt-6 mt-2">
                             <h4 className="text-sm font-semibold text-slate-800 mb-2">Company details</h4>
                             <DealCompanySearch onPatchDeal={(patch) => patchDeal(dealDetail.id, patch)} />