@crmy/web 0.5.1 → 0.5.6

package/src/components/crm/BriefingPanel.tsx

@@ -1,217 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState } from 'react';
-import { useBriefing } from '@/api/hooks';
-import { FileText, ChevronDown, ChevronUp, AlertTriangle, Activity, ClipboardList, Brain, X } from 'lucide-react';
-
-interface BriefingPanelProps {
-  subjectType: string;
-  subjectId: string;
-  onClose: () => void;
-}
-
-export function BriefingPanel({ subjectType, subjectId, onClose }: BriefingPanelProps) {
-  const [includeStale, setIncludeStale] = useState(true);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data, isLoading, error } = useBriefing(subjectType, subjectId, { format: 'json', include_stale: includeStale }) as any;
-
-  if (isLoading) {
-    return (
-      <div className="flex flex-col h-full">
-        <BriefingHeader onClose={onClose} />
-        <div className="flex-1 p-5 space-y-4 animate-pulse">
-          <div className="h-6 bg-muted rounded w-1/2" />
-          <div className="h-20 bg-muted rounded" />
-          <div className="h-20 bg-muted rounded" />
-          <div className="h-20 bg-muted rounded" />
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col h-full">
-        <BriefingHeader onClose={onClose} />
-        <div className="p-5 text-sm text-destructive">Failed to load briefing.</div>
-      </div>
-    );
-  }
-
-  const briefing = data?.briefing ?? data;
-
-  return (
-    <div className="flex flex-col h-full">
-      <BriefingHeader onClose={onClose} />
-      <div className="flex-1 overflow-y-auto p-5 space-y-4">
-        {/* Staleness warnings */}
-        {briefing?.staleness_warnings?.length > 0 && (
-          <BriefingSection
-            icon={<AlertTriangle className="w-3.5 h-3.5 text-warning" />}
-            title="Stale Context"
-            defaultOpen
-          >
-            <div className="space-y-2">
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              {briefing.staleness_warnings.map((w: any) => (
-                <div key={w.id} className="flex items-start gap-2 text-xs">
-                  <AlertTriangle className="w-3 h-3 text-warning flex-shrink-0 mt-0.5" />
-                  <div>
-                    <span className="font-medium text-foreground">{w.title ?? w.context_type}</span>
-                    <span className="text-muted-foreground ml-1.5">
-                      expired {w.valid_until ? new Date(w.valid_until).toLocaleDateString() : ''}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </BriefingSection>
-        )}
-
-        {/* Activities */}
-        {briefing?.activities?.length > 0 && (
-          <BriefingSection
-            icon={<Activity className="w-3.5 h-3.5 text-primary" />}
-            title={`Recent Activities (${briefing.activities.length})`}
-            defaultOpen
-          >
-            <div className="space-y-1.5">
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              {briefing.activities.slice(0, 10).map((a: any) => (
-                <div key={a.id} className="flex items-start gap-2 text-xs">
-                  <span className="w-16 flex-shrink-0 text-muted-foreground">
-                    {new Date(a.occurred_at ?? a.created_at).toLocaleDateString()}
-                  </span>
-                  <span className="px-1.5 py-0.5 rounded bg-muted text-[10px] font-medium capitalize flex-shrink-0">
-                    {(a.type ?? a.activity_type ?? '').replace(/_/g, ' ')}
-                  </span>
-                  <span className="text-foreground truncate">{a.description ?? a.body ?? ''}</span>
-                </div>
-              ))}
-            </div>
-          </BriefingSection>
-        )}
-
-        {/* Open Assignments */}
-        {briefing?.open_assignments?.length > 0 && (
-          <BriefingSection
-            icon={<ClipboardList className="w-3.5 h-3.5 text-primary" />}
-            title={`Open Assignments (${briefing.open_assignments.length})`}
-            defaultOpen
-          >
-            <div className="space-y-1.5">
-              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-              {briefing.open_assignments.map((a: any) => (
-                <div key={a.id} className="flex items-center gap-2 text-xs">
-                  <StatusBadge status={a.status} />
-                  <span className="text-foreground flex-1 truncate">{a.title}</span>
-                  <PriorityDot priority={a.priority} />
-                </div>
-              ))}
-            </div>
-          </BriefingSection>
-        )}
-
-        {/* Context Entries (grouped by type) */}
-        {briefing?.context_entries && Object.keys(briefing.context_entries).length > 0 && (
-          <BriefingSection
-            icon={<Brain className="w-3.5 h-3.5 text-primary" />}
-            title="Context"
-            defaultOpen
-          >
-            <div className="space-y-3">
-              {Object.entries(briefing.context_entries).map(([type, entries]) => (
-                <div key={type}>
-                  <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-1">
-                    {type.replace(/_/g, ' ')}
-                  </p>
-                  <div className="space-y-1.5">
-                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                    {(entries as any[]).map((c: any) => (
-                      <div key={c.id} className="rounded-lg bg-muted/50 p-2">
-                        {c.title && <p className="text-xs font-medium text-foreground">{c.title}</p>}
-                        <p className="text-[11px] text-muted-foreground line-clamp-2">{c.body}</p>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </BriefingSection>
-        )}
-
-        {/* Toggle stale */}
-        <div className="flex items-center gap-2 pt-2 border-t border-border">
-          <input
-            type="checkbox"
-            checked={includeStale}
-            onChange={e => setIncludeStale(e.target.checked)}
-            className="w-3.5 h-3.5 rounded border-border accent-primary"
-          />
-          <span className="text-xs text-muted-foreground">Include stale context</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BriefingHeader({ onClose }: { onClose: () => void }) {
-  return (
-    <div className="flex items-center gap-2 px-5 py-3 border-b border-border">
-      <FileText className="w-4 h-4 text-primary" />
-      <h2 className="font-display font-bold text-foreground flex-1">Briefing</h2>
-      <button onClick={onClose} className="p-1 rounded-lg hover:bg-muted transition-colors">
-        <X className="w-4 h-4 text-muted-foreground" />
-      </button>
-    </div>
-  );
-}
-
-function BriefingSection({ icon, title, children, defaultOpen = false }: {
-  icon: React.ReactNode;
-  title: string;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-}) {
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div className="rounded-xl border border-border">
-      <button
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-2 w-full p-3 text-left"
-      >
-        {icon}
-        <span className="text-xs font-display font-bold text-foreground flex-1">{title}</span>
-        {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="px-3 pb-3">{children}</div>}
-    </div>
-  );
-}
-
-function StatusBadge({ status }: { status: string }) {
-  const colors: Record<string, string> = {
-    pending: '#f59e0b',
-    accepted: '#3b82f6',
-    in_progress: '#8b5cf6',
-    blocked: '#ef4444',
-    completed: '#22c55e',
-    declined: '#94a3b8',
-    cancelled: '#94a3b8',
-  };
-  const color = colors[status] ?? '#94a3b8';
-  return (
-    <span
-      className="px-1.5 py-0.5 rounded text-[10px] font-medium capitalize flex-shrink-0"
-      style={{ backgroundColor: color + '18', color }}
-    >
-      {status.replace(/_/g, ' ')}
-    </span>
-  );
-}
-
-function PriorityDot({ priority }: { priority: string }) {
-  const colors: Record<string, string> = { urgent: '#ef4444', high: '#f97316', normal: '#3b82f6', low: '#94a3b8' };
-  return <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: colors[priority] ?? '#94a3b8' }} title={priority} />;
-}

package/src/components/crm/CommandPalette.tsx

@@ -1,254 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Command } from 'cmdk';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Users, Briefcase, LayoutDashboard, FolderKanban, Activity, Settings, Search, Building2, ClipboardList } from 'lucide-react';
-import { useAppStore } from '@/store/appStore';
-import { cn } from '@/lib/utils';
-import { ContactAvatar } from './ContactAvatar';
-import { useSearch } from '@/api/hooks';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { ENTITY_COLORS } from '@/lib/entityColors';
-
-export function CommandPalette() {
-  const { commandPaletteOpen, setCommandPaletteOpen, openDrawer } = useAppStore();
-  const navigate = useNavigate();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isMobile = useIsMobile();
-  const [query, setQuery] = useState('');
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: searchResults } = useSearch(query) as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const contacts: any[]     = searchResults?.contacts     ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const accounts: any[]     = searchResults?.accounts     ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const opportunities: any[] = searchResults?.opportunities ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const activities: any[]   = searchResults?.activities   ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const useCases: any[]     = searchResults?.useCases     ?? [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const assignments: any[]  = searchResults?.assignments  ?? [];
-
-  useEffect(() => {
-    if (commandPaletteOpen) {
-      setTimeout(() => inputRef.current?.focus(), 50);
-    } else {
-      setQuery('');
-    }
-  }, [commandPaletteOpen]);
-
-  const runAction = (fn: () => void) => {
-    fn();
-    setCommandPaletteOpen(false);
-  };
-
-  const itemClass = cn(
-    'flex items-center gap-3 px-2 py-2 rounded-md text-sm text-foreground cursor-pointer',
-    'data-[selected=true]:bg-primary/15 data-[selected=true]:text-primary',
-    isMobile && 'py-3 px-3'
-  );
-
-  const commandContent = (
-    <Command className="bg-card border-x border-border shadow-2xl overflow-hidden" shouldFilter={false}>
-      <div className="flex items-center gap-2 px-4 border-b border-border">
-        <Search className="w-4 h-4 text-muted-foreground" />
-        <Command.Input
-          ref={inputRef}
-          value={query}
-          onValueChange={setQuery}
-          placeholder="Search contacts, opportunities, or type a command..."
-          className="flex-1 py-3 text-sm bg-transparent text-foreground placeholder:text-muted-foreground outline-none"
-        />
-      </div>
-      <Command.List className="max-h-[60vh] overflow-y-auto p-2">
-        <Command.Empty className="py-6 text-center text-sm text-muted-foreground">
-          No results found.
-        </Command.Empty>
-
-        {!query && (
-          <Command.Group heading="Pages" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {[
-              { label: 'Dashboard',     icon: LayoutDashboard, path: '/',               color: ENTITY_COLORS.dashboard },
-              { label: 'Contacts',      icon: Users,           path: '/contacts',        color: ENTITY_COLORS.contacts },
-              { label: 'Accounts',      icon: Building2,       path: '/accounts',        color: ENTITY_COLORS.accounts },
-              { label: 'Opportunities', icon: Briefcase,       path: '/opportunities',   color: ENTITY_COLORS.opportunities },
-              { label: 'Use Cases',     icon: FolderKanban,    path: '/use-cases',       color: ENTITY_COLORS.useCases },
-              { label: 'Activities',    icon: Activity,        path: '/activities',      color: ENTITY_COLORS.activities },
-              { label: 'Assignments',   icon: ClipboardList,   path: '/assignments',     color: ENTITY_COLORS.assignments },
-              { label: 'Settings',      icon: Settings,        path: '/settings',        color: null },
-            ].map((page) => (
-              <Command.Item
-                key={page.path}
-                value={page.label}
-                onSelect={() => runAction(() => navigate(page.path))}
-                className={itemClass}
-              >
-                <page.icon className={cn('w-4 h-4', page.color?.text ?? 'text-muted-foreground')} />
-                {page.label}
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {contacts.length > 0 && (
-          <Command.Group heading="Contacts" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {contacts.slice(0, 5).map((c) => (
-              <Command.Item
-                key={c.id as string}
-                value={`${c.name} ${c.company} ${c.email}`}
-                onSelect={() => runAction(() => { navigate('/contacts'); openDrawer('contact', c.id as string); })}
-                className={itemClass}
-              >
-                <ContactAvatar name={c.name as string} className="w-5 h-5 rounded-full text-[8px]" />
-                <span>{c.name as string}</span>
-                {c.company && <span className="text-muted-foreground text-xs">— {c.company as string}</span>}
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {accounts.length > 0 && (
-          <Command.Group heading="Accounts" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {accounts.slice(0, 5).map((a) => (
-              <Command.Item
-                key={a.id as string}
-                value={`${a.name} ${a.domain ?? ''}`}
-                onSelect={() => runAction(() => { navigate('/accounts'); openDrawer('account', a.id as string); })}
-                className={itemClass}
-              >
-                <Building2 className={cn('w-4 h-4', ENTITY_COLORS.accounts.text)} />
-                <span>{a.name as string}</span>
-                {a.domain && <span className="text-muted-foreground text-xs">— {a.domain as string}</span>}
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {opportunities.length > 0 && (
-          <Command.Group heading="Opportunities" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {opportunities.slice(0, 5).map((d) => (
-              <Command.Item
-                key={d.id as string}
-                value={`${d.name} ${d.contact_name}`}
-                onSelect={() => runAction(() => { navigate('/opportunities'); openDrawer('opportunity', d.id as string); })}
-                className={itemClass}
-              >
-                <Briefcase className={cn('w-4 h-4', ENTITY_COLORS.opportunities.text)} />
-                <span>{d.name as string}</span>
-                {d.amount && (
-                  <span className="text-muted-foreground text-xs ml-auto">
-                    ${((d.amount as number) / 1000).toFixed(0)}K
-                  </span>
-                )}
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {activities.length > 0 && (
-          <Command.Group heading="Activities" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {activities.slice(0, 5).map((a) => (
-              <Command.Item
-                key={a.id as string}
-                value={`${a.body ?? ''} ${a.activity_type ?? ''}`}
-                onSelect={() => runAction(() => navigate('/activities'))}
-                className={itemClass}
-              >
-                <Activity className={cn('w-4 h-4', ENTITY_COLORS.activities.text)} />
-                <span className="truncate">{(a.body as string)?.slice(0, 60)}</span>
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {useCases.length > 0 && (
-          <Command.Group heading="Use Cases" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {useCases.slice(0, 5).map((u) => (
-              <Command.Item
-                key={u.id as string}
-                value={`${u.name ?? ''}`}
-                onSelect={() => runAction(() => navigate('/use-cases'))}
-                className={itemClass}
-              >
-                <FolderKanban className={cn('w-4 h-4', ENTITY_COLORS.useCases.text)} />
-                <span>{u.name as string}</span>
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-
-        {assignments.length > 0 && (
-          <Command.Group heading="Assignments" className="text-xs text-muted-foreground px-2 py-1.5 font-display">
-            {assignments.slice(0, 5).map((a) => (
-              <Command.Item
-                key={a.id as string}
-                value={`${a.title ?? ''}`}
-                onSelect={() => runAction(() => navigate('/assignments'))}
-                className={itemClass}
-              >
-                <ClipboardList className={cn('w-4 h-4', ENTITY_COLORS.assignments.text)} />
-                <span>{a.title as string}</span>
-              </Command.Item>
-            ))}
-          </Command.Group>
-        )}
-      </Command.List>
-      {!isMobile && (
-        <div className="flex items-center justify-between px-4 py-2 border-t border-border text-xs text-muted-foreground">
-          <span>Navigate with ↑↓ · Select with ↵</span>
-          <span>ESC to close</span>
-        </div>
-      )}
-    </Command>
-  );
-
-  return (
-    <AnimatePresence>
-      {commandPaletteOpen && (
-        <>
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[70] bg-black/60 backdrop-blur-sm"
-            onClick={() => setCommandPaletteOpen(false)}
-          />
-          {isMobile ? (
-            <motion.div
-              initial={{ y: '100%' }}
-              animate={{ y: 0 }}
-              exit={{ y: '100%' }}
-              transition={{ type: 'spring', damping: 30, stiffness: 300 }}
-              className="fixed left-0 right-0 bottom-0 z-[70] flex flex-col max-h-[85vh]"
-            >
-              <div className="flex justify-center py-2 bg-card rounded-t-2xl border-t border-x border-border">
-                <div className="w-10 h-1 rounded-full bg-muted-foreground/20" />
-              </div>
-              {commandContent}
-            </motion.div>
-          ) : (
-            <div className="fixed inset-0 z-[70] flex items-center justify-center px-4 pointer-events-none">
-              <motion.div
-                initial={{ opacity: 0, scale: 0.96 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.96 }}
-                transition={{ duration: 0.15 }}
-                className="w-full max-w-2xl pointer-events-auto"
-              >
-                <div className="rounded-2xl overflow-hidden border border-border shadow-2xl">
-                  {commandContent}
-                </div>
-              </motion.div>
-            </div>
-          )}
-        </>
-      )}
-    </AnimatePresence>
-  );
-}

package/src/components/crm/ContactAvatar.tsx

@@ -1,49 +0,0 @@
-import { cn } from '@/lib/utils';
-
-const AVATAR_COLORS: { bg: string; dark?: boolean }[] = [
-  { bg: '#FB990C' },   // primary
-  { bg: '#F8BB59' },   // primary light
-  { bg: '#C94408' },   // primary deep
-  { bg: '#FDBA74', dark: true },  // warm peach
-  { bg: '#F59E0B' },   // amber
-  { bg: '#EA580C' },   // burnt orange
-  { bg: '#FED7AA', dark: true },  // warm cream
-  { bg: '#FCF1C1', dark: true },  // primary pale
-];
-
-function hashName(name: string): number {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return Math.abs(hash);
-}
-
-function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  return (parts[0]?.[0] ?? '?').toUpperCase();
-}
-
-interface ContactAvatarProps {
-  name: string;
-  className?: string;
-  textClassName?: string;
-}
-
-export function ContactAvatar({ name, className, textClassName }: ContactAvatarProps) {
-  const safeName = name || '?';
-  const entry = AVATAR_COLORS[hashName(safeName) % AVATAR_COLORS.length];
-  const initials = getInitials(safeName);
-
-  return (
-    <div
-      className={cn('flex items-center justify-center flex-shrink-0 rounded-xl', className)}
-      style={{ backgroundColor: entry.bg }}
-    >
-      <span className={cn('font-display font-bold select-none', entry.dark ? 'text-[#2A2A2E]' : 'text-white', textClassName)}>
-        {safeName === '?' ? '?' : initials}
-      </span>
-    </div>
-  );
-}