@crmy/web 0.5.5 → 0.5.9

package/src/pages/Contacts.tsx

@@ -1,200 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState, useMemo, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { ContactAvatar } from '@/components/crm/ContactAvatar';
-import { TopBar } from '@/components/layout/TopBar';
-import { useContacts } from '@/api/hooks';
-import { useAppStore } from '@/store/appStore';
-import { useAgentSettings } from '@/contexts/AgentSettingsContext';
-import { StageBadge } from '@/components/crm/CrmWidgets';
-import { ListToolbar, type FilterConfig, type SortOption } from '@/components/crm/ListToolbar';
-import { motion } from 'framer-motion';
-import { LayoutGrid, List, Sparkles, ChevronUp, ChevronDown } from 'lucide-react';
-import { PaginationBar } from '@/components/crm/PaginationBar';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { stageConfig } from '@/lib/stageConfig';
-
-type ViewMode = 'table' | 'cards';
-
-const filterConfigs: FilterConfig[] = [
-  { key: 'lifecycle_stage', label: 'Stage', options: Object.entries(stageConfig).map(([k, v]) => ({ value: k, label: v.label })) },
-];
-
-const sortOptions: SortOption[] = [
-  { key: 'name', label: 'Name' },
-  { key: 'company', label: 'Company' },
-  { key: 'created_at', label: 'Created' },
-  { key: 'lifecycle_stage', label: 'Stage' },
-];
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Contact = any;
-
-function displayName(c: Contact): string {
-  const parts = [c.first_name, c.last_name].filter(Boolean);
-  if (parts.length > 0) return parts.join(' ');
-  return c.email || c.company_name || 'Unknown';
-}
-
-export default function Contacts() {
-  const navigate = useNavigate();
-  const isMobile = useIsMobile();
-  const [view, setView] = useState<ViewMode>('table');
-  const effectiveView = isMobile ? 'cards' : view;
-  const { openDrawer, openQuickAdd, openAIWithContext } = useAppStore();
-  const { enabled: agentEnabled } = useAgentSettings();
-  const [search, setSearch] = useState('');
-  const [activeFilters, setActiveFilters] = useState<Record<string, string[]>>({});
-  const [sort, setSort] = useState<{ key: string; dir: 'asc' | 'desc' } | null>(null);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(25);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data, isLoading } = useContacts({ q: search || undefined, limit: 200 }) as any;
-  const allContacts: Contact[] = data?.data ?? [];
-
-  const handleFilterChange = (key: string, values: string[]) => {
-    setActiveFilters(prev => { const next = { ...prev }; if (values.length === 0) delete next[key]; else next[key] = values; return next; });
-  };
-  const handleSortChange = (key: string) => {
-    setSort(prev => prev?.key === key ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' });
-  };
-
-  const filtered = useMemo(() => {
-    let result = [...allContacts];
-    if (activeFilters.lifecycle_stage?.length) result = result.filter(c => activeFilters.lifecycle_stage.includes(c.lifecycle_stage as string));
-    if (sort) {
-      result.sort((a, b) => {
-        const aVal = (a[sort.key] ?? '') as string | number;
-        const bVal = (b[sort.key] ?? '') as string | number;
-        if (typeof aVal === 'number' && typeof bVal === 'number') return sort.dir === 'asc' ? aVal - bVal : bVal - aVal;
-        return sort.dir === 'asc' ? String(aVal).localeCompare(String(bVal)) : String(bVal).localeCompare(String(aVal));
-      });
-    }
-    return result;
-  }, [allContacts, activeFilters, sort]);
-
-  useEffect(() => { setPage(1); }, [search, activeFilters, sort]);
-  const paginated = filtered.slice((page - 1) * pageSize, page * pageSize);
-
-  const SortHeader = ({ label, sortKey }: { label: string; sortKey: string }) => (
-    <th onClick={() => handleSortChange(sortKey)}
-      className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground cursor-pointer hover:text-foreground transition-colors select-none">
-      <span className="inline-flex items-center gap-1">
-        {label}
-        {sort?.key === sortKey ? (sort.dir === 'asc' ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />) : null}
-      </span>
-    </th>
-  );
-
-  return (
-    <div className="flex flex-col h-full">
-      <TopBar title="Contacts">
-        <div className="hidden md:flex items-center gap-1 bg-muted rounded-xl p-0.5">
-          <button onClick={() => setView('table')} className={`p-1.5 rounded-lg text-sm transition-all ${view === 'table' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'}`}>
-            <List className="w-4 h-4" />
-          </button>
-          <button onClick={() => setView('cards')} className={`p-1.5 rounded-lg text-sm transition-all ${view === 'cards' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground'}`}>
-            <LayoutGrid className="w-4 h-4" />
-          </button>
-        </div>
-      </TopBar>
-
-      <ListToolbar
-        searchValue={search} onSearchChange={setSearch} searchPlaceholder="Search contacts..."
-        filters={filterConfigs} activeFilters={activeFilters} onFilterChange={handleFilterChange}
-        onClearFilters={() => setActiveFilters({})} sortOptions={sortOptions} currentSort={sort}
-        onSortChange={handleSortChange} onAdd={() => openQuickAdd('contact')} addLabel="New Contact" entityType="contacts"
-      />
-
-      <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-24 md:pb-6">
-        {isLoading ? (
-          <div className="space-y-2 pt-2">
-            {[...Array(5)].map((_, i) => <div key={i} className="h-14 bg-muted/50 rounded-xl animate-pulse" />)}
-          </div>
-        ) : filtered.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-            <p className="text-sm">No contacts found.</p>
-            <button onClick={() => { setSearch(''); setActiveFilters({}); }} className="mt-2 text-xs text-primary font-semibold hover:underline">
-              Clear all filters
-            </button>
-          </div>
-        ) : effectiveView === 'table' ? (
-          <div className="bg-card border border-border rounded-2xl overflow-hidden shadow-sm">
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-border bg-surface-sunken/50">
-                    <SortHeader label="Name" sortKey="name" />
-                    <SortHeader label="Company" sortKey="company" />
-                    <th className="text-left px-4 py-3 text-xs font-display font-semibold text-muted-foreground">Phone</th>
-                    <SortHeader label="Stage" sortKey="lifecycle_stage" />
-                    {agentEnabled && <th className="px-2 py-3 w-8"></th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {paginated.map((c, i) => (
-                    <tr key={c.id as string} onClick={() => openDrawer('contact', c.id as string)}
-                      className={`border-b border-border last:border-0 hover:bg-primary/5 cursor-pointer group transition-colors ${i % 2 === 1 ? 'bg-surface-sunken/30' : ''}`}>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-3">
-                          <ContactAvatar name={displayName(c)} className="w-8 h-8 text-xs" />
-                          <span className="font-semibold text-foreground">{displayName(c)}</span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3 text-muted-foreground">{(c.company_name as string) || '—'}</td>
-                      <td className="px-4 py-3 text-muted-foreground text-xs">{(c.phone as string) || '—'}</td>
-                      <td className="px-4 py-3">{c.lifecycle_stage ? <StageBadge stage={c.lifecycle_stage as string} /> : '—'}</td>
-                      {agentEnabled && (
-                        <td className="px-2 py-3">
-                          <button onClick={(e) => { e.stopPropagation(); openAIWithContext({ type: 'contact', id: c.id as string, name: displayName(c), detail: c.company_name as string }); navigate('/agent'); }}
-                            className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-accent/10 transition-all">
-                            <Sparkles className="w-3.5 h-3.5 text-accent" />
-                          </button>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            <div className="px-4">
-              <PaginationBar page={page} pageSize={pageSize} total={filtered.length} onPageChange={setPage} onPageSizeChange={setPageSize} />
-            </div>
-          </div>
-        ) : (
-          <>
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
-            {paginated.map((c, i) => (
-              <motion.div key={c.id as string} initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.02 }}
-                onClick={() => openDrawer('contact', c.id as string)}
-                className="bg-card border border-border rounded-2xl p-4 cursor-pointer hover:shadow-lg hover:border-primary/20 transition-all press-scale group relative">
-                {agentEnabled && (
-                  <button onClick={(e) => { e.stopPropagation(); openAIWithContext({ type: 'contact', id: c.id as string, name: displayName(c), detail: c.company_name as string }); navigate('/agent'); }}
-                    className="absolute top-3 right-3 p-1.5 rounded-lg hover:bg-accent/10 transition-all md:opacity-0 md:group-hover:opacity-100">
-                    <Sparkles className="w-3.5 h-3.5 text-accent" />
-                  </button>
-                )}
-                <div className="flex items-center gap-3 mb-3">
-                  <ContactAvatar name={displayName(c)} className="w-11 h-11 rounded-2xl text-sm" />
-                  <div>
-                    <p className="font-display font-bold text-foreground">{displayName(c)}</p>
-                    <p className="text-xs text-muted-foreground">{(c.company_name as string) || 'Individual'}</p>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2 mb-2">
-                  {c.lifecycle_stage && <StageBadge stage={c.lifecycle_stage as string} />}
-                </div>
-                {c.email && <p className="text-xs text-muted-foreground">{c.email as string}</p>}
-              </motion.div>
-            ))}
-          </div>
-          <PaginationBar page={page} pageSize={pageSize} total={filtered.length} onPageChange={setPage} onPageSizeChange={setPageSize} />
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/pages/Dashboard.tsx

@@ -1,143 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState } from 'react';
-import { TopBar } from '@/components/layout/TopBar';
-import { PipelineSnapshot, ActivityFeed, AccountHealth } from '@/components/crm/CrmWidgets';
-import { useAppStore } from '@/store/appStore';
-import { useOpportunities } from '@/api/hooks';
-import { motion } from 'framer-motion';
-import { ArrowRight, TrendingUp, UserPlus, FolderKanban, Activity, Briefcase } from 'lucide-react';
-
-function greeting() {
-  const h = new Date().getHours();
-  if (h < 12) return 'Good morning';
-  if (h < 17) return 'Good afternoon';
-  return 'Good evening';
-}
-
-export default function Dashboard() {
-  const { openDrawer, openQuickAdd } = useAppStore();
-  const [activityWindow, setActivityWindow] = useState<'today' | 'week'>('today');
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: oppsData } = useOpportunities({ limit: 10 }) as any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const opps: any[] = oppsData?.data ?? [];
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const hotDeals: any[] = opps
-    .filter((d: any) => d.stage === 'negotiation' || (d.stage === 'proposal' && d.probability > 50))
-    .slice(0, 3);
-
-  return (
-    <div className="flex flex-col h-full">
-      <TopBar title="Dashboard" />
-      <div className="flex-1 overflow-y-auto p-4 md:p-6 pb-24 md:pb-6">
-        {/* Greeting */}
-        <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} className="mb-6">
-          <h1 className="text-2xl md:text-3xl font-display font-extrabold">
-            <span className="gradient-text">{greeting()}</span>
-          </h1>
-          <p className="text-sm text-muted-foreground mt-1">Here's what needs your attention today.</p>
-        </motion.div>
-
-        {/* Quick Actions */}
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.05 }}
-          className="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-3 mb-6"
-        >
-          {[
-            { icon: UserPlus, label: 'New Contact', gradient: 'from-primary/15 to-primary/5', color: 'text-primary', action: () => openQuickAdd('contact') },
-            { icon: TrendingUp, label: 'New Opportunity', gradient: 'from-accent/15 to-accent/5', color: 'text-accent', action: () => openQuickAdd('opportunity') },
-            { icon: FolderKanban, label: 'New Use Case', gradient: 'from-success/15 to-success/5', color: 'text-success', action: () => openQuickAdd('use-case') },
-            { icon: Activity, label: 'Log Activity', gradient: 'from-warning/15 to-warning/5', color: 'text-warning', action: () => openQuickAdd('activity') },
-          ].map((action) => (
-            <button
-              key={action.label}
-              onClick={action.action}
-              className={`flex items-center gap-3 p-3 md:p-4 rounded-2xl bg-gradient-to-br ${action.gradient} border border-border/50 hover:shadow-md transition-all press-scale`}
-            >
-              <action.icon className={`w-5 h-5 ${action.color}`} />
-              <span className="text-sm font-display font-semibold text-foreground">{action.label}</span>
-            </button>
-          ))}
-        </motion.div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-6">
-          {/* Left column */}
-          <div className="lg:col-span-2 space-y-4 md:space-y-5">
-            {hotDeals.length > 0 && (
-              <motion.div
-                initial={{ opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.1 }}
-                className="bg-card border border-border rounded-2xl p-5 shadow-sm"
-              >
-                <h2 className="font-display font-bold text-foreground mb-4">Today's focus</h2>
-                <div className="space-y-2">
-                  {hotDeals.map((deal: Record<string, unknown>) => {
-                    const contactName = (deal.contact_name ?? deal.contactName ?? '') as string;
-                    const amount = (deal.amount as number) ?? 0;
-                    return (
-                      <div
-                        key={deal.id as string}
-                        onClick={() => openDrawer('opportunity', deal.id as string)}
-                        className="flex items-center gap-3 p-3 rounded-xl bg-surface hover:bg-surface-sunken cursor-pointer transition-all press-scale"
-                      >
-                        <div className="w-8 h-8 rounded-xl bg-accent/10 flex items-center justify-center flex-shrink-0">
-                          <Briefcase className="w-4 h-4 text-accent" />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <p className="text-sm font-semibold text-foreground truncate">{deal.name as string}</p>
-                          <p className="text-xs text-muted-foreground">
-                            ${amount >= 1000 ? `${(amount / 1000).toFixed(0)}K` : amount} · {contactName}
-                          </p>
-                        </div>
-                        <ArrowRight className="w-4 h-4 text-muted-foreground" />
-                      </div>
-                    );
-                  })}
-                </div>
-              </motion.div>
-            )}
-
-            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.15 }}>
-              <div className="bg-card border border-border rounded-2xl p-5 shadow-sm">
-                <div className="flex items-center justify-between mb-3">
-                  <h3 className="font-display font-bold text-foreground">Recent activity</h3>
-                  <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
-                    <button
-                      onClick={() => setActivityWindow('today')}
-                      className={`px-2.5 py-1 rounded-md text-[11px] font-semibold transition-all ${activityWindow === 'today' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-                    >
-                      Today
-                    </button>
-                    <button
-                      onClick={() => setActivityWindow('week')}
-                      className={`px-2.5 py-1 rounded-md text-[11px] font-semibold transition-all ${activityWindow === 'week' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
-                    >
-                      This Week
-                    </button>
-                  </div>
-                </div>
-                <ActivityFeed limit={8} filterWindow={activityWindow} />
-              </div>
-            </motion.div>
-          </div>
-
-          {/* Right column */}
-          <div className="space-y-4 md:space-y-5">
-            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.08 }}>
-              <PipelineSnapshot />
-            </motion.div>
-            <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.11 }}>
-              <AccountHealth />
-            </motion.div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}