@crmy/web 0.5.1

package/src/pages/Contacts.tsx

@@ -0,0 +1,200 @@
+// 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

@@ -0,0 +1,143 @@
+// 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>
+  );
+}