@crmy/web 0.5.1 → 0.5.6

package/src/components/crm/CrmWidgets.tsx

@@ -1,417 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState } from 'react';
-import { Phone, Mail, StickyNote, CheckSquare, MessageSquare, ChevronDown, ChevronUp, Presentation, FileText, Search, ArrowRightLeft, RefreshCw, Activity, Heart, Bot, User } from 'lucide-react';
-import { ContactAvatar } from './ContactAvatar';
-import { useOpportunities, useUseCases, useAccounts, useActivities, useCustomFields } from '@/api/hooks';
-import { useAppStore } from '@/store/appStore';
-import { stageConfig, useCaseStageConfig } from '@/lib/stageConfig';
-
-export function StageBadge({ stage }: { stage: string }) {
-  const config = stageConfig[stage] ?? { label: stage, color: '#94a3b8' };
-  return (
-    <span
-      className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
-      style={{ backgroundColor: config.color + '18', color: config.color }}
-    >
-      {config.label}
-    </span>
-  );
-}
-
-export function LeadScoreBadge({ score }: { score: number }) {
-  const color = score >= 80 ? 'hsl(152, 55%, 42%)' : score >= 50 ? 'hsl(38, 92%, 50%)' : 'hsl(var(--muted-foreground))';
-  return (
-    <span
-      className="inline-flex items-center justify-center w-8 h-6 rounded-lg text-xs font-mono font-bold"
-      style={{ backgroundColor: color + '18', color }}
-    >
-      {score}
-    </span>
-  );
-}
-
-export function AgentStatusDot() {
-  return <div className="w-2.5 h-2.5 rounded-full bg-success animate-pulse-dot" />;
-}
-
-export function activityIcon(type: string) {
-  switch (type) {
-    case 'call': return <Phone className="w-3.5 h-3.5" />;
-    case 'email': return <Mail className="w-3.5 h-3.5" />;
-    case 'meeting': return <MessageSquare className="w-3.5 h-3.5" />;
-    case 'task': return <CheckSquare className="w-3.5 h-3.5" />;
-    case 'demo': return <Presentation className="w-3.5 h-3.5" />;
-    case 'proposal': return <FileText className="w-3.5 h-3.5" />;
-    case 'research': return <Search className="w-3.5 h-3.5" />;
-    case 'handoff': return <ArrowRightLeft className="w-3.5 h-3.5" />;
-    case 'status_update': return <Activity className="w-3.5 h-3.5" />;
-    case 'stage_change': return <RefreshCw className="w-3.5 h-3.5" />;
-    case 'health_update': return <Heart className="w-3.5 h-3.5" />;
-    default: return <StickyNote className="w-3.5 h-3.5" />;
-  }
-}
-
-const OUTCOME_COLORS: Record<string, string> = {
-  connected: 'hsl(152, 55%, 42%)',
-  positive: 'hsl(152, 55%, 42%)',
-  voicemail: 'hsl(38, 92%, 50%)',
-  neutral: 'hsl(38, 92%, 50%)',
-  follow_up_needed: 'hsl(38, 92%, 50%)',
-  negative: 'hsl(var(--destructive))',
-  no_show: 'hsl(var(--destructive))',
-};
-
-function OutcomeBadge({ outcome }: { outcome: string }) {
-  const color = OUTCOME_COLORS[outcome] ?? 'hsl(var(--muted-foreground))';
-  const label = outcome.replace(/_/g, ' ');
-  return (
-    <span
-      className="inline-flex items-center px-1.5 py-0.5 rounded-md text-[10px] font-medium capitalize"
-      style={{ backgroundColor: color + '18', color }}
-    >
-      {label}
-    </span>
-  );
-}
-
-const SUBJECT_TYPE_LABELS: Record<string, string> = {
-  contact: 'Contact',
-  account: 'Account',
-  opportunity: 'Opp',
-  use_case: 'Use Case',
-};
-
-type DrawerType = 'contact' | 'opportunity' | 'use-case' | 'account';
-const SUBJECT_TYPE_DRAWER: Record<string, DrawerType> = {
-  contact: 'contact',
-  account: 'account',
-  opportunity: 'opportunity',
-  use_case: 'use-case',
-};
-
-export interface ActivityItem {
-  id: string;
-  type: string;
-  subject?: string;
-  description?: string;
-  body?: string;
-  contact_name?: string;
-  contactName?: string;
-  created_at?: string;
-  timestamp?: string;
-  // Context Engine fields
-  subject_type?: string;
-  subject_id?: string;
-  occurred_at?: string;
-  outcome?: string;
-  performed_by?: string;
-  performer_name?: string;
-  contact_id?: string;
-  account_id?: string;
-  opportunity_id?: string;
-}
-
-interface ActivityFeedProps {
-  limit?: number;
-  activities?: ActivityItem[];
-  filterWindow?: 'today' | 'week';
-}
-
-export function ActivityFeed({ limit, activities: propActivities, filterWindow }: ActivityFeedProps) {
-  const { openDrawer } = useAppStore();
-  const fetchLimit = filterWindow ? 100 : (limit ?? 20);
-  const { data, isLoading } = useActivities(propActivities ? undefined : { limit: fetchLimit });
-  let items: ActivityItem[] = (propActivities ?? data?.data ?? []) as ActivityItem[];
-
-  if (filterWindow) {
-    const cutoff = new Date();
-    if (filterWindow === 'today') {
-      cutoff.setHours(0, 0, 0, 0);
-    } else {
-      cutoff.setDate(cutoff.getDate() - 7);
-      cutoff.setHours(0, 0, 0, 0);
-    }
-    items = items.filter((a) => {
-      const ts = a.occurred_at ?? a.created_at ?? a.timestamp;
-      return ts ? new Date(ts) >= cutoff : false;
-    });
-  }
-
-  const displayed = limit ? items.slice(0, limit) : items;
-
-  if (isLoading && !propActivities) {
-    return (
-      <div className="space-y-3">
-        {[...Array(4)].map((_, i) => (
-          <div key={i} className="flex gap-3 animate-pulse">
-            <div className="w-7 h-7 rounded-xl bg-muted flex-shrink-0" />
-            <div className="flex-1 space-y-1">
-              <div className="h-3 bg-muted rounded w-3/4" />
-              <div className="h-2.5 bg-muted rounded w-1/2" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (displayed.length === 0) {
-    return <p className="text-sm text-muted-foreground">No activity yet.</p>;
-  }
-
-  return (
-    <div className="space-y-1">
-      {displayed.map((a) => {
-        const name = a.contact_name ?? a.contactName ?? '';
-        const desc = a.description ?? a.body ?? a.subject ?? '';
-        const ts = a.occurred_at ?? a.created_at ?? a.timestamp ?? '';
-        const contactId = a.contact_id;
-        const hasSubjectLink = a.subject_type && a.subject_id;
-        const isClickable = hasSubjectLink || contactId;
-
-        const handleClick = () => {
-          if (hasSubjectLink) {
-            const drawerType = SUBJECT_TYPE_DRAWER[a.subject_type!];
-            if (drawerType) openDrawer(drawerType, a.subject_id!);
-          } else if (contactId) {
-            openDrawer('contact', contactId);
-          }
-        };
-
-        // Build metadata segments
-        const meta: string[] = [];
-        if (a.performer_name) meta.push(a.performer_name);
-        else if (name) meta.push(name);
-        if (ts) meta.push(new Date(ts).toLocaleDateString());
-
-        return (
-          <div
-            key={a.id}
-            className={`flex gap-3 py-2 ${isClickable ? 'cursor-pointer hover:bg-muted/40 rounded-xl px-2 -mx-2 transition-colors' : ''}`}
-            onClick={isClickable ? handleClick : undefined}
-          >
-            <div className="w-7 h-7 rounded-xl bg-muted flex items-center justify-center text-muted-foreground flex-shrink-0 mt-0.5">
-              {activityIcon(a.type)}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="flex items-start gap-2">
-                <p className="text-sm text-foreground flex-1 min-w-0 truncate">
-                  {desc || `${a.type}${name ? ` with ${name}` : ''}`}
-                </p>
-                {a.outcome && <OutcomeBadge outcome={a.outcome} />}
-              </div>
-              <div className="flex items-center gap-1.5 mt-0.5 flex-wrap">
-                {hasSubjectLink && (
-                  <span className="inline-flex items-center gap-0.5 text-[10px] font-medium text-primary/80 bg-primary/8 px-1.5 py-0.5 rounded">
-                    {SUBJECT_TYPE_LABELS[a.subject_type!] ?? a.subject_type}
-                  </span>
-                )}
-                {a.performer_name && (
-                  <span className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground">
-                    {a.performed_by ? <Bot className="w-2.5 h-2.5" /> : <User className="w-2.5 h-2.5" />}
-                    {a.performer_name}
-                  </span>
-                )}
-                <span className="text-xs text-muted-foreground">
-                  {meta.filter(Boolean).join(' · ')}
-                </span>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export function PipelineSnapshot() {
-  const [view, setView] = useState<'opportunities' | 'use-cases'>('opportunities');
-  const { data: oppsData } = useOpportunities({ limit: 200 });
-  const { data: ucData } = useUseCases({ limit: 200 });
-
-  const opps = (oppsData?.data ?? []) as Record<string, unknown>[];
-  const ucs = (ucData?.data ?? []) as Record<string, unknown>[];
-
-  const dealStages = ['prospecting', 'qualification', 'proposal', 'negotiation', 'closed_won', 'closed_lost'];
-  const ucStages = ['discovery', 'poc', 'production', 'scaling', 'sunset'];
-
-  const dealData = dealStages.map((stage) => {
-    const stageDeals = opps.filter((d: Record<string, unknown>) => d.stage === stage);
-    const cfg = stageConfig[stage] ?? { label: stage, color: '#94a3b8' };
-    return {
-      key: stage,
-      label: cfg.label,
-      color: cfg.color,
-      count: stageDeals.length,
-      total: stageDeals.reduce((sum: number, d: Record<string, unknown>) => sum + (parseFloat(String(d.amount ?? 0)) || 0), 0),
-    };
-  });
-
-  const ucStateData = ucStages.map((stage) => {
-    const stageUCs = ucs.filter((u: Record<string, unknown>) => u.stage === stage);
-    const cfg = useCaseStageConfig[stage] ?? { label: stage, color: '#94a3b8' };
-    return {
-      key: stage,
-      label: cfg.label,
-      color: cfg.color,
-      count: stageUCs.length,
-      total: stageUCs.reduce((sum: number, u: Record<string, unknown>) => sum + (parseFloat(String(u.attributed_arr ?? 0)) || 0), 0),
-    };
-  });
-
-  const data = view === 'opportunities' ? dealData : ucStateData;
-  const maxTotal = Math.max(...data.map((s) => s.total), 1);
-  const valueLabel = (v: number): string => {
-    if (!isFinite(v) || isNaN(v) || v <= 0) return '$0';
-    if (v >= 1e12) return `$${(v / 1e12).toFixed(1)}T`;
-    if (v >= 1e9) return `$${v >= 10e9 ? Math.round(v / 1e9) : (v / 1e9).toFixed(1)}B`;
-    if (v >= 1e6) return `$${v >= 10e6 ? Math.round(v / 1e6) : (v / 1e6).toFixed(1)}M`;
-    if (v >= 1e3) return `$${v >= 10e3 ? Math.round(v / 1e3) : (v / 1e3).toFixed(1)}K`;
-    return `$${Math.round(v)}`;
-  };
-
-  return (
-    <div className="bg-card border border-border rounded-2xl p-5 shadow-sm">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="font-display font-bold text-foreground">Pipeline health</h3>
-        <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
-          <button
-            onClick={() => setView('opportunities')}
-            className={`px-2.5 py-1 rounded-md text-[11px] font-semibold transition-all ${view === 'opportunities' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-          >
-            Opps
-          </button>
-          <button
-            onClick={() => setView('use-cases')}
-            className={`px-2.5 py-1 rounded-md text-[11px] font-semibold transition-all ${view === 'use-cases' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-          >
-            Use Cases
-          </button>
-        </div>
-      </div>
-      <div className="flex gap-3 overflow-x-auto no-scrollbar md:hidden pb-1 -mx-1 px-1">
-        {data.map((s) => (
-          <div key={s.key} className="flex-shrink-0 w-28 rounded-xl p-3 border border-border" style={{ backgroundColor: s.color + '08' }}>
-            <div className="w-3 h-3 rounded-full mb-2" style={{ backgroundColor: s.color }} />
-            <p className="text-[10px] text-muted-foreground font-medium truncate">{s.label}</p>
-            <p className="text-lg font-display font-bold text-foreground">{s.count}</p>
-            <p className="text-[10px] text-muted-foreground font-mono truncate">{valueLabel(s.total)}</p>
-          </div>
-        ))}
-      </div>
-      <div className="hidden md:block space-y-3">
-        {data.map((s) => (
-          <div key={s.key} className="flex items-center gap-2">
-            <span className="text-xs w-24 flex-shrink-0 truncate font-medium" style={{ color: s.color }}>{s.label}</span>
-            <div className="flex-1 min-w-0 h-2.5 bg-muted rounded-full overflow-hidden">
-              <div className="h-full rounded-full transition-all duration-700" style={{ width: `${(s.total / maxTotal) * 100}%`, backgroundColor: s.color }} />
-            </div>
-            <span className="text-xs text-muted-foreground font-mono w-6 flex-shrink-0 text-right">{s.count}</span>
-            <span className="text-xs text-foreground font-mono w-[4.5rem] flex-shrink-0 text-right truncate">{valueLabel(s.total)}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function AccountHealth() {
-  const { data } = useAccounts({ limit: 200 });
-  const accounts = (data?.data ?? []) as Record<string, unknown>[];
-
-  const green = accounts.filter((a: Record<string, unknown>) => ((a.health_score as number) ?? 0) >= 80);
-  const yellow = accounts.filter((a: Record<string, unknown>) => {
-    const s = (a.health_score as number) ?? 0;
-    return s >= 50 && s < 80;
-  });
-  const red = accounts.filter((a: Record<string, unknown>) => ((a.health_score as number) ?? 0) < 50);
-  const total = accounts.length;
-
-  const segments = [
-    { label: 'Healthy', count: green.length, color: 'hsl(152, 55%, 42%)' },
-    { label: 'At Risk', count: yellow.length, color: 'hsl(38, 92%, 50%)' },
-    { label: 'Critical', count: red.length, color: 'hsl(var(--destructive))' },
-  ];
-
-  return (
-    <div className="bg-card border border-border rounded-2xl p-5 shadow-sm">
-      <h3 className="font-display font-bold text-foreground mb-4">Account health</h3>
-      <div className="flex gap-3 overflow-x-auto no-scrollbar md:hidden pb-1 -mx-1 px-1">
-        {segments.map((s) => (
-          <div key={s.label} className="flex-shrink-0 w-28 rounded-xl p-3 border border-border" style={{ backgroundColor: s.color + '08' }}>
-            <div className="w-3 h-3 rounded-full mb-2" style={{ backgroundColor: s.color }} />
-            <p className="text-[10px] text-muted-foreground font-medium truncate">{s.label}</p>
-            <p className="text-lg font-display font-bold text-foreground">{s.count}</p>
-            <p className="text-[10px] text-muted-foreground font-mono">{total > 0 ? Math.round((s.count / total) * 100) : 0}%</p>
-          </div>
-        ))}
-      </div>
-      <div className="hidden md:block space-y-3">
-        {segments.map((s) => (
-          <div key={s.label} className="flex items-center gap-3">
-            <span className="text-xs w-28 truncate font-medium" style={{ color: s.color }}>{s.label}</span>
-            <div className="flex-1 h-2.5 bg-muted rounded-full overflow-hidden">
-              <div className="h-full rounded-full transition-all duration-700" style={{ width: total > 0 ? `${(s.count / total) * 100}%` : '0%', backgroundColor: s.color }} />
-            </div>
-            <span className="text-xs text-foreground font-mono">{s.count}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function formatCustomFieldValue(fieldType: string, val: unknown): string {
-  if (val === null || val === undefined) return '—';
-  if (fieldType === 'boolean') return val ? 'Yes' : 'No';
-  if (fieldType === 'date') { try { return new Date(String(val)).toLocaleDateString(); } catch { return String(val); } }
-  if (Array.isArray(val)) return val.join(', ');
-  return String(val);
-}
-
-export function CustomFieldsSection({ objectType, values }: { objectType: string; values: Record<string, unknown> }) {
-  const [open, setOpen] = useState(false);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data } = useCustomFields(objectType) as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const fieldDefs: any[] = data?.fields ?? [];
-
-  if (fieldDefs.length === 0) return null;
-
-  return (
-    <div className="px-4 mx-4 mt-2 border-t border-border pt-3">
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 w-full text-left"
-      >
-        <h3 className="text-xs font-display font-bold text-muted-foreground uppercase tracking-wide flex-1">
-          Custom Fields
-          <span className="ml-1.5 font-mono font-normal text-muted-foreground/50">({fieldDefs.length})</span>
-        </h3>
-        {open ? <ChevronUp className="w-3.5 h-3.5 text-muted-foreground" /> : <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />}
-      </button>
-      {open && (
-        <div className="mt-3 space-y-2">
-          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-          {fieldDefs.map((def: any) => {
-            const val = values?.[def.field_key];
-            const hasValue = val !== undefined && val !== null && val !== '';
-            return (
-              <div key={def.field_key} className="flex items-center justify-between gap-4">
-                <span className="text-xs text-muted-foreground shrink-0">
-                  {def.label}
-                  {def.is_required && <span className="text-destructive ml-0.5">*</span>}
-                </span>
-                <span className={hasValue ? 'text-sm text-foreground text-right' : 'text-xs text-muted-foreground/50'}>
-                  {hasValue ? formatCustomFieldValue(def.field_type, val) : '—'}
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/crm/DrawerShell.tsx

@@ -1,77 +0,0 @@
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, GripHorizontal } from 'lucide-react';
-import { useAppStore } from '@/store/appStore';
-
-interface DrawerShellProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export function DrawerShell({ children, title }: DrawerShellProps) {
-  const { drawerOpen, closeDrawer } = useAppStore();
-
-  return (
-    <AnimatePresence>
-      {drawerOpen && (
-        <>
-          {/* Overlay */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[65] bg-foreground/20 backdrop-blur-sm"
-            onClick={closeDrawer}
-          />
-
-          {/* Desktop: slide from right */}
-          <motion.div
-            initial={{ x: '100%' }}
-            animate={{ x: 0 }}
-            exit={{ x: '100%' }}
-            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
-            className="hidden md:flex fixed right-0 top-0 h-full w-[480px] z-[70] bg-card border-l border-border shadow-2xl flex-col rounded-l-2xl"
-          >
-            <div className="flex items-center justify-between h-14 px-5 border-b border-border">
-              {title && <h2 className="font-display font-bold text-foreground">{title}</h2>}
-              <button
-                onClick={closeDrawer}
-                className="ml-auto p-2 rounded-xl hover:bg-muted text-muted-foreground transition-colors"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              {children}
-            </div>
-          </motion.div>
-
-          {/* Mobile: slide from bottom */}
-          <motion.div
-            initial={{ y: '100%' }}
-            animate={{ y: 0 }}
-            exit={{ y: '100%' }}
-            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
-            className="md:hidden fixed left-0 right-0 bottom-0 z-[70] bg-card border-t border-border shadow-2xl flex flex-col rounded-t-3xl max-h-[90vh]"
-          >
-            {/* Drag handle */}
-            <div className="flex justify-center py-2">
-              <div className="w-10 h-1 rounded-full bg-muted-foreground/20" />
-            </div>
-            <div className="flex items-center justify-between px-5 pb-3 border-b border-border">
-              {title && <h2 className="font-display font-bold text-foreground">{title}</h2>}
-              <button
-                onClick={closeDrawer}
-                className="ml-auto p-2 rounded-xl hover:bg-muted text-muted-foreground transition-colors"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto pb-safe">
-              {children}
-            </div>
-          </motion.div>
-        </>
-      )}
-    </AnimatePresence>
-  );
-}