@crmy/web 0.5.5 → 0.5.9

package/src/components/crm/ListToolbar.tsx

@@ -1,252 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { Search, Filter, X, ChevronDown, Plus, ArrowUpDown } from 'lucide-react';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Checkbox } from '@/components/ui/checkbox';
-
-export type FilterConfig = {
-  key: string;
-  label: string;
-  options: { value: string; label: string }[];
-};
-
-export type SortOption = {
-  key: string;
-  label: string;
-};
-
-interface ListToolbarProps {
-  searchValue: string;
-  onSearchChange: (val: string) => void;
-  searchPlaceholder?: string;
-  filters: FilterConfig[];
-  activeFilters: Record<string, string[]>;
-  onFilterChange: (key: string, values: string[]) => void;
-  onClearFilters: () => void;
-  sortOptions: SortOption[];
-  currentSort: { key: string; dir: 'asc' | 'desc' } | null;
-  onSortChange: (key: string) => void;
-  onAdd: () => void;
-  addLabel: string;
-  entityType: string;
-}
-
-const ENTITY_GRADIENTS: Record<string, string> = {
-  contacts:      'from-primary to-primary/80',
-  accounts:      'from-[#8b5cf6] to-[#8b5cf6]/80',
-  opportunities: 'from-accent to-accent/80',
-  'use cases':   'from-success to-success/80',
-  activities:    'from-warning to-warning/80',
-  assignments:   'from-destructive to-destructive/80',
-};
-
-export function ListToolbar({
-  searchValue,
-  onSearchChange,
-  searchPlaceholder = 'Search...',
-  filters,
-  activeFilters,
-  onFilterChange,
-  onClearFilters,
-  sortOptions,
-  currentSort,
-  onSortChange,
-  onAdd,
-  addLabel,
-  entityType,
-}: ListToolbarProps) {
-  const gradientClasses = ENTITY_GRADIENTS[entityType] ?? 'from-primary to-primary/80';
-  const searchRef = useRef<HTMLInputElement>(null);
-  const activeFilterCount = Object.values(activeFilters).reduce((sum, arr) => sum + arr.length, 0);
-
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
-      const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
-      if (e.key === '/' && !isInput) {
-        e.preventDefault();
-        searchRef.current?.focus();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-2 px-4 md:px-6 py-2 md:py-3">
-      {/* Single row: search + filter + sort + add */}
-      <div className="flex items-center gap-2">
-        {/* Search */}
-        <div className="relative flex-1 min-w-0 max-w-sm">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <input
-            ref={searchRef}
-            value={searchValue}
-            onChange={(e) => onSearchChange(e.target.value)}
-            placeholder={searchPlaceholder}
-            className="w-full h-9 pl-9 pr-8 rounded-xl border border-border bg-card text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-primary/30 transition-all"
-          />
-          {searchValue && (
-            <button onClick={() => onSearchChange('')} className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1">
-              <X className="w-3.5 h-3.5 text-muted-foreground hover:text-foreground" />
-            </button>
-          )}
-          {!searchValue && (
-            <kbd className="absolute right-2.5 top-1/2 -translate-y-1/2 hidden md:inline-flex items-center px-1.5 py-0.5 rounded-md text-[10px] font-mono text-muted-foreground/50 bg-muted border border-border">
-              /
-            </kbd>
-          )}
-        </div>
-
-        {/* Filter */}
-        <Popover>
-          <PopoverTrigger asChild>
-            <button className="h-9 px-3 flex items-center gap-1.5 rounded-xl border border-border bg-card text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 transition-all flex-shrink-0 press-scale">
-              <Filter className="w-3.5 h-3.5" />
-              <span className="hidden sm:inline">Filter</span>
-              {activeFilterCount > 0 && (
-                <span className="ml-0.5 px-1.5 py-0.5 rounded-full bg-primary text-primary-foreground text-[10px] font-semibold">
-                  {activeFilterCount}
-                </span>
-              )}
-            </button>
-          </PopoverTrigger>
-          <PopoverContent className="w-72 p-0 rounded-xl" align="start">
-            <div className="p-3 border-b border-border flex items-center justify-between">
-              <span className="text-sm font-display font-bold text-foreground">Filters</span>
-              {activeFilterCount > 0 && (
-                <button onClick={onClearFilters} className="text-xs text-muted-foreground hover:text-foreground">
-                  Clear all
-                </button>
-              )}
-            </div>
-            <div className="p-2 max-h-80 overflow-y-auto space-y-1">
-              {filters.map((filter) => (
-                <FilterSection
-                  key={filter.key}
-                  filter={filter}
-                  selected={activeFilters[filter.key] || []}
-                  onChange={(values) => onFilterChange(filter.key, values)}
-                />
-              ))}
-            </div>
-          </PopoverContent>
-        </Popover>
-
-        {/* Sort */}
-        <Popover>
-          <PopoverTrigger asChild>
-            <button className="h-9 px-3 flex items-center gap-1.5 rounded-xl border border-border bg-card text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 transition-all flex-shrink-0 press-scale">
-              <ArrowUpDown className="w-3.5 h-3.5" />
-              <span className="hidden sm:inline">
-                {currentSort ? sortOptions.find(s => s.key === currentSort.key)?.label || 'Sort' : 'Sort'}
-              </span>
-              {currentSort && (
-                <span className="text-[10px] font-mono">{currentSort.dir === 'asc' ? '↑' : '↓'}</span>
-              )}
-            </button>
-          </PopoverTrigger>
-          <PopoverContent className="w-48 p-1 rounded-xl" align="start">
-            {sortOptions.map((opt) => (
-              <button
-                key={opt.key}
-                onClick={() => onSortChange(opt.key)}
-                className={`w-full text-left px-3 py-2.5 text-sm rounded-lg transition-colors ${
-                  currentSort?.key === opt.key ? 'bg-muted text-foreground font-medium' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
-                }`}
-              >
-                {opt.label}
-                {currentSort?.key === opt.key && (
-                  <span className="ml-auto float-right text-[10px] font-mono">{currentSort.dir === 'asc' ? '↑' : '↓'}</span>
-                )}
-              </button>
-            ))}
-          </PopoverContent>
-        </Popover>
-
-        {/* Add New */}
-        <button
-          onClick={onAdd}
-          className={`h-9 px-4 flex items-center gap-1.5 rounded-xl bg-gradient-to-r ${gradientClasses} text-primary-foreground text-sm font-semibold hover:shadow-md transition-all flex-shrink-0 press-scale`}
-        >
-          <Plus className="w-4 h-4" />
-          <span className="hidden sm:inline">{addLabel}</span>
-        </button>
-      </div>
-
-      {/* Active filter pills */}
-      {activeFilterCount > 0 && (
-        <div className="flex items-center gap-1.5 flex-wrap">
-          {Object.entries(activeFilters).map(([key, values]) =>
-            values.map((val) => {
-              const filterConfig = filters.find(f => f.key === key);
-              const optionLabel = filterConfig?.options.find(o => o.value === val)?.label || val;
-              return (
-                <span
-                  key={`${key}-${val}`}
-                  className="inline-flex items-center gap-1 px-2.5 py-1 rounded-lg bg-muted text-xs text-foreground"
-                >
-                  <span className="text-muted-foreground">{filterConfig?.label}:</span> {optionLabel}
-                  <button
-                    onClick={() => onFilterChange(key, values.filter(v => v !== val))}
-                    className="ml-0.5 hover:text-destructive p-0.5"
-                  >
-                    <X className="w-3 h-3" />
-                  </button>
-                </span>
-              );
-            })
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function FilterSection({
-  filter,
-  selected,
-  onChange,
-}: {
-  filter: FilterConfig;
-  selected: string[];
-  onChange: (values: string[]) => void;
-}) {
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div className="rounded-lg">
-      <button
-        onClick={() => setOpen(!open)}
-        className="w-full flex items-center justify-between px-2 py-2 text-xs font-display font-semibold text-muted-foreground hover:text-foreground"
-      >
-        {filter.label}
-        {selected.length > 0 && (
-          <span className="text-primary font-sans">{selected.length}</span>
-        )}
-        <ChevronDown className={`w-3 h-3 transition-transform ${open ? '' : '-rotate-90'}`} />
-      </button>
-      {open && (
-        <div className="space-y-0.5 pl-1 pb-1">
-          {filter.options.map((opt) => {
-            const checked = selected.includes(opt.value);
-            return (
-              <label
-                key={opt.value}
-                className="flex items-center gap-2 px-2 py-2 text-sm text-foreground hover:bg-muted/50 rounded-lg cursor-pointer min-h-[40px]"
-              >
-                <Checkbox
-                  checked={checked}
-                  onCheckedChange={() => {
-                    onChange(checked ? selected.filter(v => v !== opt.value) : [...selected, opt.value]);
-                  }}
-                  className="w-4 h-4"
-                />
-                {opt.label}
-              </label>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/crm/OpportunityDrawer.tsx

@@ -1,372 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState } from 'react';
-import { useOpportunity, useUpdateOpportunity, useDeleteOpportunity, useUsers, useCustomFields } from '@/api/hooks';
-import { useNavigate } from 'react-router-dom';
-import { useAppStore } from '@/store/appStore';
-import { useAgentSettings } from '@/contexts/AgentSettingsContext';
-import { StageBadge, CustomFieldsSection } from './CrmWidgets';
-import { Sparkles, TrendingUp, Calendar, User, Pencil, ChevronLeft, Trash2, FileText } from 'lucide-react';
-import { ContextPanel } from './ContextPanel';
-import { BriefingPanel } from './BriefingPanel';
-import { toast } from '@/components/ui/use-toast';
-import { DatePicker } from '@/components/ui/date-picker';
-
-const inputClass = 'w-full h-10 px-3 rounded-md border border-border bg-background text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring';
-const labelClass = 'text-xs font-mono text-muted-foreground uppercase tracking-wider';
-
-const OPP_STAGES = ['prospecting', 'qualification', 'proposal', 'negotiation', 'closed_won', 'closed_lost'];
-
-function OpportunityEditForm({
-  opportunity,
-  onSave,
-  onCancel,
-  onDelete,
-  isSaving,
-}: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  opportunity: any;
-  onSave: (data: Record<string, unknown>) => void;
-  onCancel: () => void;
-  onDelete: () => void;
-  isSaving: boolean;
-}) {
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [fields, setFields] = useState<Record<string, string>>({
-    name: opportunity.name ?? '',
-    amount: opportunity.amount != null ? String(opportunity.amount) : '',
-    stage: opportunity.stage ?? 'prospecting',
-    close_date: opportunity.close_date ? opportunity.close_date.slice(0, 10) : '',
-    probability: opportunity.probability != null ? String(opportunity.probability) : '',
-    description: opportunity.description ?? '',
-    owner_id: opportunity.owner_id ?? '',
-  });
-
-  const [customFieldValues, setCustomFieldValues] = useState<Record<string, string>>(() => {
-    const init: Record<string, string> = {};
-    if (opportunity.custom_fields) {
-      for (const [k, v] of Object.entries(opportunity.custom_fields as Record<string, unknown>)) {
-        init[k] = String(v ?? '');
-      }
-    }
-    return init;
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: usersData } = useUsers() as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const users: any[] = usersData?.data ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: customFieldDefs } = useCustomFields('opportunity') as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const fieldDefs: any[] = customFieldDefs?.fields ?? [];
-
-  const set = (key: string, val: string) => setFields(prev => ({ ...prev, [key]: val }));
-  const setCF = (key: string, val: string) => setCustomFieldValues(prev => ({ ...prev, [key]: val }));
-
-  const handleSave = () => {
-    const payload: Record<string, unknown> = {};
-    for (const [k, v] of Object.entries(fields)) {
-      if (v === '') continue;
-      if (k === 'amount' || k === 'probability') payload[k] = Number(v) || 0;
-      else payload[k] = v;
-    }
-    const cfPayload: Record<string, unknown> = {};
-    for (const def of fieldDefs) {
-      const val = customFieldValues[def.field_key] ?? '';
-      if (val === '') continue;
-      if (def.field_type === 'number') cfPayload[def.field_key] = Number(val);
-      else if (def.field_type === 'boolean') cfPayload[def.field_key] = val === 'true';
-      else cfPayload[def.field_key] = val;
-    }
-    if (Object.keys(cfPayload).length > 0) payload.custom_fields = cfPayload;
-    onSave(payload);
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center gap-2 px-5 py-3 border-b border-border">
-        <button onClick={onCancel} className="flex items-center gap-1 text-xs text-accent hover:underline">
-          <ChevronLeft className="w-3.5 h-3.5" /> Back
-        </button>
-        <span className="text-xs text-muted-foreground ml-auto">Editing opportunity</span>
-      </div>
-      <div className="flex-1 overflow-y-auto p-5 space-y-4">
-        <div className="space-y-1.5">
-          <label className={labelClass}>Opportunity Name<span className="text-destructive ml-0.5">*</span></label>
-          <input type="text" value={fields.name} onChange={e => set('name', e.target.value)} placeholder="e.g. Acme Enterprise" className={inputClass} />
-        </div>
-        <div className="space-y-1.5">
-          <label className={labelClass}>Stage</label>
-          <select value={fields.stage} onChange={e => set('stage', e.target.value)} className={`${inputClass} pr-3`}>
-            {OPP_STAGES.map(s => <option key={s} value={s}>{s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}</option>)}
-          </select>
-        </div>
-        {[
-          { key: 'amount', label: 'Amount ($)', type: 'number', placeholder: '50000' },
-          { key: 'close_date', label: 'Close Date', type: 'date', placeholder: '' },
-          { key: 'probability', label: 'Probability (%)', type: 'number', placeholder: '50' },
-        ].map(f => (
-          <div key={f.key} className="space-y-1.5">
-            <label className={labelClass}>{f.label}</label>
-            {f.type === 'date' ? (
-              <DatePicker
-                value={fields[f.key] ?? ''}
-                onChange={val => set(f.key, val)}
-                placeholder="Select close date"
-              />
-            ) : (
-              <input type={f.type} value={fields[f.key]} onChange={e => set(f.key, e.target.value)} placeholder={f.placeholder} className={inputClass} />
-            )}
-          </div>
-        ))}
-        {users.length > 0 && (
-          <div className="space-y-1.5">
-            <label className={labelClass}>Owner</label>
-            <select value={fields.owner_id} onChange={e => set('owner_id', e.target.value)} className={`${inputClass} pr-3`}>
-              <option value="">Unassigned</option>
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              {users.map((u: any) => (
-                <option key={u.id} value={u.id}>{u.name || u.email}</option>
-              ))}
-            </select>
-          </div>
-        )}
-        <div className="space-y-1.5">
-          <label className={labelClass}>Description</label>
-          <textarea
-            value={fields.description}
-            onChange={e => set('description', e.target.value)}
-            placeholder="Optional notes"
-            rows={3}
-            className="w-full px-3 py-2 rounded-md border border-border bg-background text-sm text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring resize-none"
-          />
-        </div>
-        {fieldDefs.length > 0 && (
-          <>
-            <div className="border-t border-border pt-2">
-              <p className={labelClass}>Custom Fields</p>
-            </div>
-            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-            {fieldDefs.map((def: any) => (
-              <div key={def.field_key} className="space-y-1.5">
-                <label className={labelClass}>{def.label}{def.required && <span className="text-destructive ml-0.5">*</span>}</label>
-                {(def.field_type === 'text' || !def.field_type) && (
-                  <input type="text" value={customFieldValues[def.field_key] ?? ''} onChange={e => setCF(def.field_key, e.target.value)} className={inputClass} />
-                )}
-                {def.field_type === 'number' && (
-                  <input type="number" value={customFieldValues[def.field_key] ?? ''} onChange={e => setCF(def.field_key, e.target.value)} className={inputClass} />
-                )}
-                {def.field_type === 'date' && (
-                  <DatePicker
-                    value={customFieldValues[def.field_key] ?? ''}
-                    onChange={val => setCF(def.field_key, val)}
-                    required={def.required}
-                  />
-                )}
-                {def.field_type === 'boolean' && (
-                  <div className="flex items-center gap-2 h-10">
-                    <input type="checkbox" checked={customFieldValues[def.field_key] === 'true'} onChange={e => setCF(def.field_key, e.target.checked ? 'true' : 'false')} className="w-4 h-4 rounded border-border accent-primary" />
-                    <span className="text-sm text-foreground">Yes</span>
-                  </div>
-                )}
-                {(def.field_type === 'select' || def.field_type === 'multi_select') && (
-                  <select value={customFieldValues[def.field_key] ?? ''} onChange={e => setCF(def.field_key, e.target.value)} className={`${inputClass} pr-3`}>
-                    <option value="">Select…</option>
-                    {(def.options ?? []).map((opt: string) => <option key={opt} value={opt}>{opt}</option>)}
-                  </select>
-                )}
-              </div>
-            ))}
-          </>
-        )}
-        {opportunity.created_at && (
-          <div className="flex items-center justify-between py-2 border-t border-border mt-2">
-            <span className="text-xs text-muted-foreground">Created</span>
-            <span className="text-xs text-muted-foreground">{new Date(opportunity.created_at as string).toLocaleDateString()}</span>
-          </div>
-        )}
-        <button
-          onClick={handleSave}
-          disabled={!fields.name.trim() || isSaving}
-          className="w-full h-10 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-40 transition-colors"
-        >
-          {isSaving ? 'Saving…' : 'Save Changes'}
-        </button>
-        {!confirmDelete ? (
-          <button
-            onClick={() => setConfirmDelete(true)}
-            className="w-full h-9 rounded-md border border-destructive/40 text-destructive text-sm font-medium hover:bg-destructive/10 transition-colors flex items-center justify-center gap-1.5"
-          >
-            <Trash2 className="w-3.5 h-3.5" /> Delete Opportunity
-          </button>
-        ) : (
-          <div className="flex gap-2">
-            <button onClick={() => setConfirmDelete(false)} className="flex-1 h-9 rounded-md border border-border text-sm text-muted-foreground hover:bg-muted/50 transition-colors">
-              Cancel
-            </button>
-            <button onClick={onDelete} className="flex-1 h-9 rounded-md bg-destructive text-destructive-foreground text-sm font-medium hover:bg-destructive/90 transition-colors">
-              Confirm Delete
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function OpportunityDrawer() {
-  const { drawerEntityId, openAIWithContext, closeDrawer } = useAppStore();
-  const { enabled: agentEnabled } = useAgentSettings();
-  const navigate = useNavigate();
-  const [editing, setEditing] = useState(false);
-  const [briefing, setBriefing] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: oppData, isLoading } = useOpportunity(drawerEntityId ?? '') as any;
-  const updateOpportunity = useUpdateOpportunity(drawerEntityId ?? '');
-  const deleteOpportunity = useDeleteOpportunity(drawerEntityId ?? '');
-
-  if (isLoading) {
-    return (
-      <div className="flex flex-col gap-4 p-6 animate-pulse">
-        <div className="h-6 bg-muted rounded w-3/4" />
-        <div className="h-4 bg-muted rounded w-1/2" />
-      </div>
-    );
-  }
-
-  if (!oppData?.opportunity) {
-    return <div className="p-4 text-muted-foreground">Opportunity not found</div>;
-  }
-
-  const opportunity = oppData.opportunity;
-  const name: string = opportunity.name ?? '';
-  const amount: number = opportunity.amount ?? 0;
-  const stage: string = opportunity.stage ?? '';
-  const probability: number = opportunity.probability ?? 0;
-  const forecastCat: string = opportunity.forecast_cat ?? '';
-  const closeDate: string = opportunity.close_date ? new Date(opportunity.close_date as string).toLocaleDateString() : '—';
-
-  if (briefing) {
-    return <BriefingPanel subjectType="opportunity" subjectId={drawerEntityId!} onClose={() => setBriefing(false)} />;
-  }
-
-  if (editing) {
-    return (
-      <OpportunityEditForm
-        opportunity={opportunity}
-        onSave={async (data) => {
-          try {
-            await updateOpportunity.mutateAsync(data);
-            setEditing(false);
-            toast({ title: 'Opportunity updated' });
-          } catch (err) {
-            toast({ title: 'Failed to update opportunity', description: err instanceof Error ? err.message : 'Please try again.', variant: 'destructive' });
-          }
-        }}
-        onCancel={() => setEditing(false)}
-        onDelete={async () => {
-          try {
-            await deleteOpportunity.mutateAsync();
-            closeDrawer();
-            toast({ title: 'Opportunity deleted' });
-          } catch (err) {
-            toast({ title: 'Failed to delete opportunity', description: err instanceof Error ? err.message : 'Please try again.', variant: 'destructive' });
-          }
-        }}
-        isSaving={updateOpportunity.isPending}
-      />
-    );
-  }
-
-  return (
-    <div className="flex flex-col">
-      {/* Header */}
-      <div className="p-6 border-b border-border">
-        <h2 className="font-display font-extrabold text-xl text-foreground">{name}</h2>
-        <p className="text-3xl font-display font-extrabold text-foreground mt-2">
-          ${amount >= 1000 ? `${(amount / 1000).toFixed(0)}K` : amount}
-        </p>
-        <div className="flex items-center gap-2 mt-3">
-          {stage && <StageBadge stage={stage} />}
-          {probability > 0 && (
-            <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-accent/10 text-accent">
-              {probability}% probability
-            </span>
-          )}
-        </div>
-        <div className="flex gap-2 mt-4">
-          <button
-            onClick={() => setEditing(true)}
-            className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-muted text-foreground text-sm font-medium hover:bg-muted/80 transition-all press-scale"
-          >
-            <Pencil className="w-3.5 h-3.5" /> Edit
-          </button>
-          <button
-            onClick={() => setBriefing(true)}
-            className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-muted text-foreground text-sm font-medium hover:bg-muted/80 transition-all press-scale"
-          >
-            <FileText className="w-3.5 h-3.5" /> Brief
-          </button>
-          {agentEnabled && (
-            <button
-              onClick={() => {
-                openAIWithContext({ type: 'opportunity', id: opportunity.id, name, detail: `$${(amount / 1000).toFixed(0)}K` });
-                closeDrawer();
-                navigate('/agent');
-              }}
-              className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl border border-accent/30 bg-accent/5 text-accent text-sm font-semibold hover:bg-accent/10 transition-all ml-auto press-scale"
-            >
-              <Sparkles className="w-3.5 h-3.5" /> Chat
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Stats */}
-      <div className="grid grid-cols-3 gap-3 p-4 mx-4 mt-4">
-        {[
-          { icon: TrendingUp, label: 'Probability', value: `${probability}%` },
-          { icon: Calendar, label: 'Close Date', value: closeDate },
-          { icon: User, label: 'Forecast', value: forecastCat || '—' },
-        ].map((stat) => (
-          <div key={stat.label} className="bg-muted/50 rounded-xl p-3 text-center">
-            <stat.icon className="w-4 h-4 text-muted-foreground mx-auto mb-1" />
-            <p className="text-sm font-display font-bold text-foreground truncate">{stat.value}</p>
-            <p className="text-[10px] text-muted-foreground">{stat.label}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Details */}
-      <div className="p-4 mx-4 mt-2 space-y-3">
-        <h3 className="text-xs font-display font-bold text-muted-foreground uppercase tracking-wide">Details</h3>
-        {[
-          { label: 'Stage', value: stage },
-          { label: 'Forecast', value: forecastCat || undefined },
-          { label: 'Created', value: opportunity.created_at ? new Date(opportunity.created_at as string).toLocaleDateString() : undefined },
-        ]
-          .filter((f) => f.value)
-          .map((field) => (
-            <div key={field.label} className="flex items-center justify-between">
-              <span className="text-xs text-muted-foreground">{field.label}</span>
-              <span className="text-sm text-foreground">{field.value}</span>
-            </div>
-          ))}
-        {opportunity.notes && (
-          <div>
-            <p className="text-xs text-muted-foreground mb-1">Notes</p>
-            <p className="text-sm text-foreground leading-relaxed">{opportunity.notes as string}</p>
-          </div>
-        )}
-      </div>
-
-      {/* Custom Fields */}
-      <CustomFieldsSection objectType="opportunity" values={(opportunity.custom_fields ?? {}) as Record<string, unknown>} />
-
-      {/* Context */}
-      <ContextPanel subjectType="opportunity" subjectId={drawerEntityId!} />
-    </div>
-  );
-}