@hed-hog/contact 0.0.278 → 0.0.285

package/hedhog/frontend/app/pipeline/page.tsx.ejs

@@ -1,299 +1,1074 @@
-'use client';
-
-import { CrmNav } from '../_components/crm-nav';
-import { crmMockLeads, crmOwners, crmStageOrder } from '../_lib/crm-mocks';
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { cn } from '@/lib/utils';
-import {
-  CalendarClock,
-  CircleDollarSign,
-  Filter,
-  Target,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-
-function daysSince(date: string) {
-  const diff =
-    new Date('2026-03-16T00:00:00.000Z').getTime() - new Date(date).getTime();
-  return Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)));
-}
-
-export default function CrmPipelinePage() {
-  const t = useTranslations('contact.CrmPipeline');
-  const dashboardT = useTranslations('contact.CrmDashboard');
-  const [ownerFilter, setOwnerFilter] = useState('all');
-
-  const filteredLeads = useMemo(
-    () =>
-      ownerFilter === 'all'
-        ? crmMockLeads
-        : crmMockLeads.filter(
-            (lead) => String(lead.owner_user_id ?? 'unassigned') === ownerFilter
-          ),
-    [ownerFilter]
-  );
-
-  const conversionRate = Math.round(
-    (filteredLeads.filter((lead) => lead.lifecycle_stage === 'customer')
-      .length /
-      Math.max(filteredLeads.length, 1)) *
-      100
-  );
-  const overdue = filteredLeads.filter(
-    (lead) =>
-      lead.next_action_at &&
-      new Date(lead.next_action_at) < new Date('2026-03-16T00:00:00.000Z')
-  ).length;
-  const nextActions = filteredLeads.filter(
-    (lead) => lead.next_action_at
-  ).length;
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.crm'), href: '/contact/dashboard' },
-          { label: t('breadcrumbs.pipeline') },
-        ]}
-        title={t('title')}
-        description={t('subtitle')}
-      />
-
-      <div className="min-w-0 space-y-6 overflow-x-hidden">
-        <CrmNav currentHref="/contact/pipeline" />
-
-        <Card className="overflow-hidden border-sky-200/70 bg-gradient-to-br from-sky-50 via-background to-cyan-50 py-0">
-          <CardContent className="grid gap-4 px-6 py-6 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
-            <div className="space-y-2">
-              <Badge className="w-fit rounded-full bg-sky-500/10 px-3 py-1 text-sky-700 hover:bg-sky-500/10">
-                <Filter className="mr-2 size-3.5" />
-                {t('filterBadge')}
-              </Badge>
-              <h2 className="text-3xl font-semibold tracking-tight">
-                {t('heroTitle')}
-              </h2>
-              <p className="max-w-2xl text-sm leading-6 text-muted-foreground">
-                {t('heroDescription')}
-              </p>
-            </div>
-
-            <div className="w-full max-w-xs space-y-2">
-              <label className="text-sm font-medium">
-                {t('ownerFilterLabel')}
-              </label>
-              <Select value={ownerFilter} onValueChange={setOwnerFilter}>
-                <SelectTrigger className="w-full bg-background">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">{t('ownerFilterAll')}</SelectItem>
-                  <SelectItem value="unassigned">
-                    {dashboardT('common.unassigned')}
-                  </SelectItem>
-                  {crmOwners.map((owner) => (
-                    <SelectItem key={owner.id} value={String(owner.id)}>
-                      {owner.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </CardContent>
-        </Card>
-
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-          {[
-            { key: 'total', value: filteredLeads.length, icon: Users },
-            { key: 'conversion', value: `${conversionRate}%`, icon: Target },
-            { key: 'overdue', value: overdue, icon: CalendarClock },
-            {
-              key: 'pipelineValue',
-              value: new Intl.NumberFormat('pt-BR', {
-                style: 'currency',
-                currency: 'BRL',
-                maximumFractionDigits: 0,
-              }).format(
-                filteredLeads.reduce((sum, lead) => sum + lead.dealValue, 0)
-              ),
-              icon: CircleDollarSign,
-            },
-          ].map((item) => (
-            <Card key={item.key} className="py-0">
-              <CardContent className="flex items-center justify-between gap-3 p-4">
-                <div className="min-w-0">
-                  <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
-                    {t(`summary.${item.key}.title`)}
-                  </p>
-                  <p className="mt-2 text-2xl font-semibold">{item.value}</p>
-                  <p className="text-sm text-muted-foreground">
-                    {t(`summary.${item.key}.description`, {
-                      count: nextActions,
-                    })}
-                  </p>
-                </div>
-                <div className="rounded-2xl bg-muted p-3 text-muted-foreground">
-                  <item.icon className="size-5" />
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-
-        <div className="grid min-w-0 gap-4 xl:grid-cols-7">
-          {crmStageOrder.map((stage) => {
-            const stageLeads = filteredLeads.filter(
-              (lead) => lead.lifecycle_stage === stage
-            );
-
-            return (
-              <Card
-                key={stage}
-                className="min-w-0 overflow-hidden py-0 xl:col-span-1"
-              >
-                <CardHeader className="border-b bg-muted/30">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                      <CardTitle className="truncate text-base">
-                        {dashboardT(`stageLabels.${stage}`)}
-                      </CardTitle>
-                      <CardDescription>
-                        {t('stageCount', { count: stageLeads.length })}
-                      </CardDescription>
-                    </div>
-                    <Badge variant="secondary">{stageLeads.length}</Badge>
-                  </div>
-                </CardHeader>
-                <CardContent className="p-0">
-                  <ScrollArea className="h-[520px]">
-                    <div className="space-y-3 p-4">
-                      {stageLeads.length === 0 ? (
-                        <div className="rounded-2xl border border-dashed p-4 text-center text-sm text-muted-foreground">
-                          {t('emptyStage')}
-                        </div>
-                      ) : (
-                        stageLeads.map((lead) => (
-                          <div
-                            key={lead.id}
-                            className="rounded-2xl border border-border/70 bg-card p-4 shadow-sm"
-                          >
-                            <div className="flex items-start justify-between gap-3">
-                              <div className="min-w-0">
-                                <p className="line-clamp-2 font-medium">
-                                  {lead.name}
-                                </p>
-                                <p className="truncate text-xs text-muted-foreground">
-                                  {lead.trade_name ||
-                                    lead.companyLabel ||
-                                    dashboardT(
-                                      `sourceLabels.${lead.source ?? 'other'}`
-                                    )}
-                                </p>
-                              </div>
-                              <Badge
-                                variant="outline"
-                                className={cn(
-                                  'shrink-0',
-                                  lead.status === 'active'
-                                    ? 'border-green-500/20 bg-green-500/10 text-green-600'
-                                    : 'border-red-500/20 bg-red-500/10 text-red-600'
-                                )}
-                              >
-                                {lead.status === 'active'
-                                  ? t('active')
-                                  : t('inactive')}
-                              </Badge>
-                            </div>
-
-                            <div className="mt-3 flex flex-wrap gap-2">
-                              <Badge variant="secondary">
-                                {lead.owner_user?.name ||
-                                  dashboardT('common.unassigned')}
-                              </Badge>
-                              <Badge variant="outline">
-                                {dashboardT(
-                                  `sourceLabels.${lead.source ?? 'other'}`
-                                )}
-                              </Badge>
-                            </div>
-
-                            <div className="mt-4 space-y-2 text-sm text-muted-foreground">
-                              <div className="flex items-center justify-between gap-3">
-                                <span>{t('card.dealValue')}</span>
-                                <span className="font-medium text-foreground">
-                                  {new Intl.NumberFormat('pt-BR', {
-                                    style: 'currency',
-                                    currency: 'BRL',
-                                    maximumFractionDigits: 0,
-                                  }).format(lead.dealValue)}
-                                </span>
-                              </div>
-                              <div className="flex items-center justify-between gap-3">
-                                <span>{t('card.score')}</span>
-                                <span className="font-medium text-foreground">
-                                  {lead.score}
-                                </span>
-                              </div>
-                              <div className="flex items-center justify-between gap-3">
-                                <span>{t('card.age')}</span>
-                                <span className="font-medium text-foreground">
-                                  {t('card.days', {
-                                    count: daysSince(lead.created_at),
-                                  })}
-                                </span>
-                              </div>
-                              <div className="flex items-center justify-between gap-3">
-                                <span>{t('card.nextAction')}</span>
-                                <span className="truncate text-right font-medium text-foreground">
-                                  {lead.next_action_at
-                                    ? new Date(
-                                        lead.next_action_at
-                                      ).toLocaleDateString('pt-BR')
-                                    : t('card.noFollowup')}
-                                </span>
-                              </div>
-                            </div>
-
-                            <div className="mt-4 flex flex-wrap gap-2">
-                              {lead.tags.map((tag) => (
-                                <Badge
-                                  key={tag}
-                                  variant="outline"
-                                  className="text-[11px]"
-                                >
-                                  {tag}
-                                </Badge>
-                              ))}
-                            </div>
-                          </div>
-                        ))
-                      )}
-                    </div>
-                  </ScrollArea>
-                </CardContent>
-              </Card>
-            );
-          })}
-        </div>
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+  type UniqueIdentifier,
+} from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  Page,
+  PageHeader,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useDebounce } from '@/hooks/use-debounce';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  CalendarCheck,
+  CalendarClock,
+  CalendarX,
+  ChevronDown,
+  ChevronsDownUp,
+  ChevronsUpDown,
+  ChevronUp,
+  CircleDollarSign,
+  CircleUser,
+  Plus,
+  Star,
+  Tag,
+  Target,
+  TrendingUp,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { toast } from 'sonner';
+import { crmImplementedSections } from '../_lib/crm-sections';
+import { crmStageOrder, type CrmLead } from '../_lib/crm-mocks';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+  PaginatedResult,
+  Person,
+  PersonLifecycleStage,
+  UserOption,
+} from '../person/_components/person-types';
+import { PersonFormSheet } from '../person/_components/person-form-sheet';
+import { LeadDetailSheet } from './_components/lead-detail-sheet';
+
+const PIPELINE_EXPANDED_KEY = 'contact:crm-pipeline:expanded-leads';
+const LEAD_DND_PREFIX = 'lead-';
+const STAGE_DND_PREFIX = 'stage-';
+
+function stageDropId(stage: PersonLifecycleStage) {
+  return `${STAGE_DND_PREFIX}${stage}`;
+}
+
+function leadDragId(leadId: number) {
+  return `${LEAD_DND_PREFIX}${leadId}`;
+}
+
+function parseLeadId(dndId: UniqueIdentifier | null | undefined) {
+  if (!dndId) return null;
+  const value = String(dndId);
+  if (!value.startsWith(LEAD_DND_PREFIX)) return null;
+  const parsed = Number(value.slice(LEAD_DND_PREFIX.length));
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function parseStage(dndId: UniqueIdentifier | null | undefined) {
+  if (!dndId) return null;
+  const value = String(dndId);
+  if (!value.startsWith(STAGE_DND_PREFIX)) return null;
+  const candidate = value.slice(STAGE_DND_PREFIX.length);
+  return crmStageOrder.includes(candidate as PersonLifecycleStage)
+    ? (candidate as PersonLifecycleStage)
+    : null;
+}
+
+type StageDropZoneProps = {
+  stage: PersonLifecycleStage;
+  children: (isOver: boolean) => ReactNode;
+};
+
+function StageDropZone({ stage, children }: StageDropZoneProps) {
+  const { isOver, setNodeRef } = useDroppable({ id: stageDropId(stage) });
+
+  return <div ref={setNodeRef}>{children(isOver)}</div>;
+}
+
+type DraggableLeadCardProps = {
+  leadId: number;
+  className?: string;
+  onClick: () => void;
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+  children: ReactNode;
+};
+
+function DraggableLeadCard({
+  leadId,
+  className,
+  onClick,
+  onKeyDown,
+  children,
+}: DraggableLeadCardProps) {
+  const { attributes, isDragging, listeners, setNodeRef, transform } =
+    useDraggable({
+      id: leadDragId(leadId),
+    });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform) }}
+      className={cn(
+        className,
+        'touch-none',
+        isDragging && 'z-30 opacity-60 shadow-lg ring-1 ring-primary/30'
+      )}
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      {...listeners}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+}
+
+function daysSince(date: string) {
+  const diff =
+    new Date('2026-03-16T00:00:00.000Z').getTime() - new Date(date).getTime();
+  return Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)));
+}
+
+function nextActionUrgency(nextActionAt: string | null | undefined) {
+  if (!nextActionAt) return 'none';
+  const now = new Date('2026-03-16T00:00:00.000Z');
+  const date = new Date(nextActionAt);
+  const diffDays = Math.floor(
+    (date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  if (diffDays < 0) return 'overdue';
+  if (diffDays <= 3) return 'soon';
+  return 'ok';
+}
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function loadExpandedFromStorage(): Set<number> {
+  try {
+    const raw = localStorage.getItem(PIPELINE_EXPANDED_KEY);
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return new Set<number>(parsed);
+  } catch {
+    // ignore
+  }
+  return new Set();
+}
+
+function saveExpandedToStorage(ids: Set<number>) {
+  try {
+    localStorage.setItem(PIPELINE_EXPANDED_KEY, JSON.stringify([...ids]));
+  } catch {
+    // ignore
+  }
+}
+
+function mapPersonToCrmLead(person: Person): CrmLead {
+  return {
+    id: person.id,
+    name: person.name,
+    type: person.type,
+    status: person.status,
+    trade_name: person.trade_name ?? null,
+    owner_user_id: person.owner_user_id ?? null,
+    owner_user: person.owner_user ?? null,
+    source: person.source ?? 'other',
+    lifecycle_stage: person.lifecycle_stage ?? 'new',
+    next_action_at: person.next_action_at ?? null,
+    created_at: person.created_at,
+    score: Math.max(0, Math.min(100, Number(person.score) || 0)),
+    dealValue: Number(person.deal_value) || 0,
+    lastInteractionAt: person.last_interaction_at || person.created_at,
+    companyLabel:
+      person.type === 'company'
+        ? person.trade_name || null
+        : person.employer_company?.name || null,
+    tags: Array.isArray(person.tags) ? person.tags.filter(Boolean) : [],
+  };
+}
+
+export default function CrmPipelinePage() {
+  const t = useTranslations('contact.CrmPipeline');
+  const dashboardT = useTranslations('contact.CrmDashboard');
+  const { request, currentLocaleCode } = useApp();
+  const [ownerFilter, setOwnerFilter] = useState('all');
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearch = useDebounce(searchTerm);
+  const [formSheetOpen, setFormSheetOpen] = useState(false);
+  const [selectedLead, setSelectedLead] = useState<CrmLead | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [activeDragLeadId, setActiveDragLeadId] = useState<number | null>(null);
+  const [stageOverrides, setStageOverrides] = useState<
+    Record<number, PersonLifecycleStage>
+  >({});
+  const preventCardClickRef = useRef(false);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 6 },
+    })
+  );
+
+  const [expandedIds, setExpandedIds] = useState<Set<number>>(() =>
+    loadExpandedFromStorage()
+  );
+
+  const { data: owners = [] } = useQuery<UserOption[]>({
+    queryKey: ['contact-person-owner-options', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<UserOption[]>({
+        url: '/person/owner-options',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-person-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-person-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const {
+    data: paginate = { data: [], total: 0, page: 1, pageSize: 500 },
+    refetch,
+  } = useQuery<PaginatedResult<Person>>({
+    queryKey: ['contact-crm-pipeline', debouncedSearch, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', '1');
+      params.set('pageSize', '500');
+      if (debouncedSearch) params.set('search', debouncedSearch);
+
+      const response = await request<PaginatedResult<Person>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? { data: [], total: 0, page: 1, pageSize: 500 },
+  });
+
+  const filteredLeads = useMemo(() => {
+    return paginate.data.map(mapPersonToCrmLead).filter((lead) => {
+      if (ownerFilter === 'all') return true;
+      if (ownerFilter === 'unassigned') return !lead.owner_user_id;
+      return String(lead.owner_user_id ?? '') === ownerFilter;
+    });
+  }, [ownerFilter, paginate.data]);
+
+  const visibleLeads = useMemo(
+    () =>
+      filteredLeads.map((lead) => ({
+        ...lead,
+        lifecycle_stage: stageOverrides[lead.id] ?? lead.lifecycle_stage,
+      })),
+    [filteredLeads, stageOverrides]
+  );
+
+  const visibleLeadsById = useMemo(
+    () => new Map(visibleLeads.map((lead) => [lead.id, lead])),
+    [visibleLeads]
+  );
+
+  const activeDragLead = useMemo(() => {
+    if (!activeDragLeadId) return null;
+    return visibleLeadsById.get(activeDragLeadId) ?? null;
+  }, [activeDragLeadId, visibleLeadsById]);
+
+  // Normalise persisted IDs to only those present in current filtered set.
+  useEffect(() => {
+    const filteredIds = new Set(visibleLeads.map((l) => l.id));
+    setExpandedIds((prev) => {
+      const next = new Set<number>(
+        [...prev].filter((id) => filteredIds.has(id))
+      );
+      if (next.size !== prev.size) saveExpandedToStorage(next);
+      return next;
+    });
+  }, [visibleLeads]);
+
+  useEffect(() => {
+    setStageOverrides((prev) => {
+      const baseById = new Map(
+        filteredLeads.map((lead) => [lead.id, lead.lifecycle_stage])
+      );
+
+      let changed = false;
+      const next: Record<number, PersonLifecycleStage> = {};
+
+      for (const [idRaw, stage] of Object.entries(prev)) {
+        const id = Number(idRaw);
+        const baseStage = baseById.get(id);
+
+        if (!baseStage) {
+          changed = true;
+          continue;
+        }
+
+        if (baseStage !== stage) {
+          next[id] = stage;
+          continue;
+        }
+
+        changed = true;
+      }
+
+      return changed ? next : prev;
+    });
+  }, [filteredLeads]);
+
+  const toggleExpanded = useCallback((id: number) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      saveExpandedToStorage(next);
+      return next;
+    });
+  }, []);
+
+  const expandAll = useCallback(() => {
+    const next = new Set<number>(visibleLeads.map((l) => l.id));
+    setExpandedIds(next);
+    saveExpandedToStorage(next);
+  }, [visibleLeads]);
+
+  const collapseAll = useCallback(() => {
+    const next = new Set<number>();
+    setExpandedIds(next);
+    saveExpandedToStorage(next);
+  }, []);
+
+  const searchControls: SearchBarControl[] = [
+    {
+      id: 'owner',
+      type: 'select',
+      value: ownerFilter,
+      onChange: setOwnerFilter,
+      placeholder: t('ownerFilterLabel'),
+      options: [
+        { value: 'all', label: t('ownerFilterAll') },
+        { value: 'unassigned', label: dashboardT('common.unassigned') },
+        ...owners.map((owner) => ({
+          value: String(owner.id),
+          label: owner.name,
+        })),
+      ],
+      className: 'sm:w-56',
+    },
+  ];
+
+  const conversionRate = Math.round(
+    (visibleLeads.filter((lead) => lead.lifecycle_stage === 'customer').length /
+      Math.max(visibleLeads.length, 1)) *
+      100
+  );
+  const overdue = visibleLeads.filter(
+    (lead) =>
+      lead.next_action_at &&
+      new Date(lead.next_action_at) < new Date('2026-03-16T00:00:00.000Z')
+  ).length;
+  const nextActions = visibleLeads.filter((lead) => lead.next_action_at).length;
+  const fallbackKpiAccentClass =
+    'from-sky-500/20 via-cyan-500/10 to-transparent';
+
+  const kpiCards = [
+    { key: 'total', value: filteredLeads.length, icon: Users },
+    { key: 'conversion', value: `${conversionRate}%`, icon: Target },
+    { key: 'overdue', value: overdue, icon: CalendarClock },
+    {
+      key: 'pipelineValue',
+      value: formatCurrency(
+        visibleLeads.reduce((sum, lead) => sum + lead.dealValue, 0)
+      ),
+      icon: CircleDollarSign,
+    },
+  ] as const;
+
+  const allExpanded =
+    visibleLeads.length > 0 && visibleLeads.every((l) => expandedIds.has(l.id));
+
+  const openLeadDetail = useCallback((lead: CrmLead) => {
+    setSelectedLead(lead);
+    setDetailOpen(true);
+  }, []);
+
+  const refreshLead = useCallback(
+    async (leadId: number) => {
+      const response = await request<Person>({
+        url: `/person/${leadId}`,
+        method: 'GET',
+      });
+
+      const nextLead = mapPersonToCrmLead(response.data);
+      setSelectedLead(nextLead);
+      return nextLead;
+    },
+    [request]
+  );
+
+  const handleLeadUpdated = useCallback(
+    async (lead: CrmLead) => {
+      await refetch();
+      if (detailOpen) {
+        await refreshLead(lead.id);
+      }
+    },
+    [detailOpen, refetch, refreshLead]
+  );
+
+  const handleMoveStage = useCallback(
+    async (lead: CrmLead, stage: PersonLifecycleStage) => {
+      try {
+        await request({
+          url: `/person/${lead.id}/lifecycle-stage`,
+          method: 'POST',
+          data: { lifecycle_stage: stage },
+        });
+
+        toast.success(
+          t('detail.stageMoveSuccess', {
+            stage: dashboardT(`stageLabels.${stage}`),
+          })
+        );
+
+        await handleLeadUpdated(lead);
+      } catch {
+        toast.error(t('detail.stageMoveError'));
+      }
+    },
+    [dashboardT, handleLeadUpdated, request, t]
+  );
+
+  const resolveStageFromDropTarget = useCallback(
+    (dndId: UniqueIdentifier | null | undefined) => {
+      const dropStage = parseStage(dndId);
+      if (dropStage) return dropStage;
+
+      const dropLeadId = parseLeadId(dndId);
+      if (!dropLeadId) return null;
+
+      return visibleLeadsById.get(dropLeadId)?.lifecycle_stage ?? null;
+    },
+    [visibleLeadsById]
+  );
+
+  const onDragStart = useCallback((event: DragStartEvent) => {
+    const leadId = parseLeadId(event.active.id);
+    setActiveDragLeadId(leadId);
+    preventCardClickRef.current = true;
+  }, []);
+
+  const onDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const sourceLeadId = parseLeadId(event.active.id);
+      const targetStage = resolveStageFromDropTarget(event.over?.id);
+
+      setActiveDragLeadId(null);
+      window.setTimeout(() => {
+        preventCardClickRef.current = false;
+      }, 0);
+
+      if (!sourceLeadId || !targetStage) return;
+
+      const sourceLead = visibleLeadsById.get(sourceLeadId);
+      if (!sourceLead || sourceLead.lifecycle_stage === targetStage) return;
+
+      const previousStage = sourceLead.lifecycle_stage;
+
+      setStageOverrides((prev) => ({ ...prev, [sourceLeadId]: targetStage }));
+      setSelectedLead((prev) =>
+        prev && prev.id === sourceLeadId
+          ? { ...prev, lifecycle_stage: targetStage }
+          : prev
+      );
+
+      try {
+        await request({
+          url: `/person/${sourceLead.id}/lifecycle-stage`,
+          method: 'POST',
+          data: { lifecycle_stage: targetStage },
+        });
+
+        toast.success(
+          t('detail.stageMoveSuccess', {
+            stage: dashboardT(`stageLabels.${targetStage}`),
+          })
+        );
+
+        await handleLeadUpdated(sourceLead);
+      } catch {
+        setStageOverrides((prev) => ({
+          ...prev,
+          [sourceLeadId]: previousStage,
+        }));
+        setSelectedLead((prev) =>
+          prev && prev.id === sourceLeadId
+            ? { ...prev, lifecycle_stage: previousStage }
+            : prev
+        );
+        toast.error(t('detail.stageMoveError'));
+      }
+    },
+    [
+      dashboardT,
+      handleLeadUpdated,
+      request,
+      resolveStageFromDropTarget,
+      t,
+      visibleLeadsById,
+    ]
+  );
+
+  const closeLeadDetail = useCallback((open: boolean) => {
+    setDetailOpen(open);
+    if (!open) {
+      setSelectedLead(null);
+    }
+  }, []);
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.crm'), href: '/contact/dashboard' },
+          { label: t('breadcrumbs.pipeline') },
+        ]}
+        title={t('title')}
+        description={t('subtitle')}
+        actions={[
+          {
+            label: t('controls.expandAll'),
+            onClick: expandAll,
+            icon: <ChevronsUpDown className="h-4 w-4" />,
+            variant: 'secondary',
+          },
+          {
+            label: t('controls.collapseAll'),
+            onClick: collapseAll,
+            icon: <ChevronsDownUp className="h-4 w-4" />,
+            variant: 'secondary',
+          },
+          {
+            label: t('newPerson'),
+            onClick: () => setFormSheetOpen(true),
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <div className="min-w-0 space-y-6 overflow-x-hidden">
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          {kpiCards.map((item, index) => {
+            const sectionStyle =
+              crmImplementedSections[index % crmImplementedSections.length] ??
+              crmImplementedSections[0];
+
+            return (
+              <Card
+                key={item.key}
+                className="min-w-0 overflow-hidden border-border/70 py-0"
+              >
+                <div
+                  className={cn(
+                    'h-1 w-full bg-linear-to-r',
+                    sectionStyle?.colorClass ?? fallbackKpiAccentClass
+                  )}
+                />
+                <CardContent className="flex items-start justify-between gap-3 px-6 py-5">
+                  <div className="min-w-0">
+                    <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                      {t(`summary.${item.key}.title`)}
+                    </p>
+                    <p className="mt-2 text-3xl font-semibold tracking-tight">
+                      {item.value}
+                    </p>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {t(`summary.${item.key}.description`, {
+                        count: nextActions,
+                      })}
+                    </p>
+                  </div>
+                  <div
+                    className={cn(
+                      'rounded-2xl p-3',
+                      sectionStyle?.glowClass ?? 'bg-sky-500/10 text-sky-700'
+                    )}
+                  >
+                    <item.icon className="size-5" />
+                  </div>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+
+        <SearchBar
+          searchQuery={searchTerm}
+          onSearchChange={setSearchTerm}
+          onSearch={() => undefined}
+          placeholder={t('searchPlaceholder')}
+          controls={searchControls}
+        />
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd}
+        >
+          <div className="overflow-x-auto pb-2">
+            <div className="grid min-w-[1540px] grid-cols-7 gap-2">
+              {crmStageOrder.map((stage) => {
+                const stageLeads = visibleLeads.filter(
+                  (lead) => lead.lifecycle_stage === stage
+                );
+
+                return (
+                  <StageDropZone key={stage} stage={stage}>
+                    {(isOver) => (
+                      <Card
+                        className={cn(
+                          'min-w-[210px] snap-start overflow-hidden py-0 transition-colors',
+                          isOver && 'border-primary/40 bg-primary/5'
+                        )}
+                      >
+                        <CardHeader className="border-b bg-muted/35 px-4 py-4">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="min-w-0">
+                              <CardTitle className="truncate text-sm font-semibold">
+                                {dashboardT(`stageLabels.${stage}`)}
+                              </CardTitle>
+                              <CardDescription className="text-xs">
+                                {t('stageCount', { count: stageLeads.length })}
+                              </CardDescription>
+                            </div>
+                            <Badge variant="secondary">
+                              {stageLeads.length}
+                            </Badge>
+                          </div>
+                        </CardHeader>
+                        <CardContent className="p-0">
+                          <ScrollArea className="h-[400px] lg:h-[350px] xl:h-[400px]">
+                            <div className="space-y-2 p-2">
+                              {stageLeads.length === 0 ? (
+                                <div className="rounded-xl border border-dashed p-4 text-center text-sm text-muted-foreground">
+                                  {t('emptyStage')}
+                                </div>
+                              ) : (
+                                stageLeads.map((lead) => {
+                                  const isOpen = expandedIds.has(lead.id);
+                                  const urgency = nextActionUrgency(
+                                    lead.next_action_at
+                                  );
+                                  const visibleTags = lead.tags.slice(0, 2);
+                                  const hiddenTags = lead.tags.slice(2);
+                                  const age = daysSince(lead.created_at);
+
+                                  return (
+                                    <Collapsible
+                                      key={lead.id}
+                                      open={isOpen}
+                                      onOpenChange={() =>
+                                        toggleExpanded(lead.id)
+                                      }
+                                    >
+                                      <DraggableLeadCard
+                                        leadId={lead.id}
+                                        className="cursor-pointer rounded-xl border border-border/60 bg-card shadow-xs transition-colors hover:border-primary/30 hover:bg-muted/10"
+                                        onClick={() => {
+                                          if (preventCardClickRef.current)
+                                            return;
+                                          openLeadDetail(lead);
+                                        }}
+                                        onKeyDown={(event) => {
+                                          if (
+                                            event.key === 'Enter' ||
+                                            event.key === ' '
+                                          ) {
+                                            event.preventDefault();
+                                            openLeadDetail(lead);
+                                          }
+                                        }}
+                                      >
+                                        {/* ── Always-visible layer ── */}
+                                        <div className="p-3">
+                                          {/* Row 1: name + status badge */}
+                                          <div className="flex items-start justify-between gap-2">
+                                            <p className="line-clamp-2 min-w-0 flex-1 text-xs font-semibold leading-4">
+                                              {lead.name}
+                                            </p>
+                                            <Tooltip>
+                                              <TooltipTrigger asChild>
+                                                <Badge
+                                                  variant="outline"
+                                                  className={cn(
+                                                    'shrink-0 cursor-default whitespace-nowrap text-[10px] leading-3 px-1.5 py-0.5',
+                                                    lead.status === 'active'
+                                                      ? 'border-green-500/30 bg-green-500/10 text-green-600'
+                                                      : 'border-red-500/30 bg-red-500/10 text-red-600'
+                                                  )}
+                                                >
+                                                  {lead.status === 'active'
+                                                    ? t('active')
+                                                    : t('inactive')}
+                                                </Badge>
+                                              </TooltipTrigger>
+                                              <TooltipContent side="top">
+                                                {lead.status === 'active'
+                                                  ? t('tooltips.statusActive')
+                                                  : t(
+                                                      'tooltips.statusInactive'
+                                                    )}
+                                              </TooltipContent>
+                                            </Tooltip>
+                                          </div>
+
+                                          {/* Row 2: company/source subtitle */}
+                                          <p className="mt-0.5 truncate text-[11px] text-muted-foreground">
+                                            {lead.trade_name ||
+                                              lead.companyLabel ||
+                                              dashboardT(
+                                                `sourceLabels.${lead.source ?? 'other'}`
+                                              )}
+                                          </p>
+
+                                          {/* Row 3: owner chip */}
+                                          <div className="mt-2 flex items-center gap-1.5">
+                                            <Tooltip>
+                                              <TooltipTrigger asChild>
+                                                <div className="flex min-w-0 cursor-default items-center gap-1 rounded-md bg-muted/60 px-1.5 py-0.5">
+                                                  <CircleUser className="size-3 shrink-0 text-muted-foreground" />
+                                                  <span className="truncate text-[11px] text-muted-foreground">
+                                                    {lead.owner_user?.name ||
+                                                      dashboardT(
+                                                        'common.unassigned'
+                                                      )}
+                                                  </span>
+                                                </div>
+                                              </TooltipTrigger>
+                                              <TooltipContent side="top">
+                                                {t('tooltips.owner')}
+                                              </TooltipContent>
+                                            </Tooltip>
+                                          </div>
+
+                                          {/* Row 4: value + next action */}
+                                          <div className="mt-2.5 flex items-center justify-between gap-2">
+                                            <Tooltip>
+                                              <TooltipTrigger asChild>
+                                                <div className="flex cursor-default items-center gap-1 text-[11px] text-muted-foreground">
+                                                  <CircleDollarSign className="size-3 shrink-0 text-emerald-500" />
+                                                  <span className="font-medium text-foreground">
+                                                    {formatCurrency(
+                                                      lead.dealValue
+                                                    )}
+                                                  </span>
+                                                </div>
+                                              </TooltipTrigger>
+                                              <TooltipContent side="top">
+                                                {t('tooltips.dealValue')}
+                                              </TooltipContent>
+                                            </Tooltip>
+
+                                            <Tooltip>
+                                              <TooltipTrigger asChild>
+                                                <div
+                                                  className={cn(
+                                                    'flex cursor-default items-center gap-1 text-[11px]',
+                                                    urgency === 'overdue' &&
+                                                      'text-red-500',
+                                                    urgency === 'soon' &&
+                                                      'text-amber-500',
+                                                    urgency === 'ok' &&
+                                                      'text-blue-500',
+                                                    urgency === 'none' &&
+                                                      'text-muted-foreground'
+                                                  )}
+                                                >
+                                                  {urgency === 'overdue' ? (
+                                                    <CalendarX className="size-3 shrink-0" />
+                                                  ) : urgency === 'soon' ? (
+                                                    <CalendarClock className="size-3 shrink-0" />
+                                                  ) : urgency === 'ok' ? (
+                                                    <CalendarCheck className="size-3 shrink-0" />
+                                                  ) : (
+                                                    <CalendarClock className="size-3 shrink-0" />
+                                                  )}
+                                                  <span className="font-medium">
+                                                    {lead.next_action_at
+                                                      ? new Date(
+                                                          lead.next_action_at
+                                                        ).toLocaleDateString(
+                                                          'pt-BR'
+                                                        )
+                                                      : t('card.noFollowup')}
+                                                  </span>
+                                                </div>
+                                              </TooltipTrigger>
+                                              <TooltipContent side="top">
+                                                {urgency === 'overdue'
+                                                  ? t(
+                                                      'tooltips.nextActionOverdue'
+                                                    )
+                                                  : urgency === 'soon'
+                                                    ? t(
+                                                        'tooltips.nextActionSoon'
+                                                      )
+                                                    : urgency === 'ok'
+                                                      ? t(
+                                                          'tooltips.nextActionOk'
+                                                        )
+                                                      : t(
+                                                          'tooltips.nextActionNone'
+                                                        )}
+                                              </TooltipContent>
+                                            </Tooltip>
+                                          </div>
+
+                                          {/* Row 5: up to 2 tags */}
+                                          {visibleTags.length > 0 && (
+                                            <div className="mt-2 flex flex-wrap gap-1">
+                                              {visibleTags.map((tag) => (
+                                                <Badge
+                                                  key={tag}
+                                                  variant="outline"
+                                                  className="px-1.5 py-0 text-[10px]"
+                                                >
+                                                  {tag}
+                                                </Badge>
+                                              ))}
+                                              {hiddenTags.length > 0 &&
+                                                !isOpen && (
+                                                  <Badge
+                                                    variant="secondary"
+                                                    className="px-1.5 py-0 text-[10px]"
+                                                  >
+                                                    +{hiddenTags.length}
+                                                  </Badge>
+                                                )}
+                                            </div>
+                                          )}
+                                        </div>
+
+                                        {/* ── Expand/collapse trigger ── */}
+                                        <CollapsibleTrigger asChild>
+                                          <button
+                                            className="flex w-full items-center justify-center gap-1 border-t border-border/40 py-1.5 text-[10px] text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground"
+                                            aria-label={
+                                              isOpen
+                                                ? t('controls.hideDetails')
+                                                : t('controls.showDetails')
+                                            }
+                                            onClick={(event) =>
+                                              event.stopPropagation()
+                                            }
+                                          >
+                                            {isOpen ? (
+                                              <>
+                                                {t('controls.hideDetails')}
+                                                <ChevronUp className="size-3" />
+                                              </>
+                                            ) : (
+                                              <>
+                                                {t('controls.showDetails')}
+                                                <ChevronDown className="size-3" />
+                                              </>
+                                            )}
+                                          </button>
+                                        </CollapsibleTrigger>
+
+                                        {/* ── Collapsible details ── */}
+                                        <CollapsibleContent>
+                                          <div className="space-y-2 border-t border-border/30 px-3 py-2.5 text-[11px] text-muted-foreground">
+                                            <div className="flex items-center justify-between gap-2">
+                                              <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                  <div className="flex cursor-default items-center gap-1">
+                                                    <Star className="size-3 shrink-0 text-amber-400" />
+                                                    <span>
+                                                      {t('card.score')}
+                                                    </span>
+                                                  </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="left">
+                                                  {t('tooltips.score')}
+                                                </TooltipContent>
+                                              </Tooltip>
+                                              <span className="font-semibold text-foreground">
+                                                {lead.score}
+                                              </span>
+                                            </div>
+
+                                            <div className="flex items-center justify-between gap-2">
+                                              <Tooltip>
+                                                <TooltipTrigger asChild>
+                                                  <div className="flex cursor-default items-center gap-1">
+                                                    <TrendingUp className="size-3 shrink-0 text-violet-400" />
+                                                    <span>{t('card.age')}</span>
+                                                  </div>
+                                                </TooltipTrigger>
+                                                <TooltipContent side="left">
+                                                  {t('tooltips.age')}
+                                                </TooltipContent>
+                                              </Tooltip>
+                                              <span className="font-semibold text-foreground">
+                                                {t('card.days', { count: age })}
+                                              </span>
+                                            </div>
+
+                                            <div className="flex items-center justify-between gap-2">
+                                              <div className="flex items-center gap-1">
+                                                <Tag className="size-3 shrink-0 text-sky-400" />
+                                                <span>
+                                                  {dashboardT(
+                                                    `sourceLabels.${lead.source ?? 'other'}`
+                                                  )}
+                                                </span>
+                                              </div>
+                                            </div>
+
+                                            {hiddenTags.length > 0 && (
+                                              <div className="flex flex-wrap gap-1 pt-0.5">
+                                                {hiddenTags.map((tag) => (
+                                                  <Badge
+                                                    key={tag}
+                                                    variant="outline"
+                                                    className="px-1.5 py-0 text-[10px]"
+                                                  >
+                                                    {tag}
+                                                  </Badge>
+                                                ))}
+                                              </div>
+                                            )}
+                                          </div>
+                                        </CollapsibleContent>
+                                      </DraggableLeadCard>
+                                    </Collapsible>
+                                  );
+                                })
+                              )}
+                            </div>
+                          </ScrollArea>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </StageDropZone>
+                );
+              })}
+            </div>
+          </div>
+
+          <DragOverlay>
+            {activeDragLead ? (
+              <div className="w-[210px] rounded-xl border border-primary/30 bg-card p-3 shadow-lg">
+                <p className="line-clamp-2 text-xs font-semibold leading-4">
+                  {activeDragLead.name}
+                </p>
+                <p className="mt-1 text-[11px] text-muted-foreground">
+                  {dashboardT(`stageLabels.${activeDragLead.lifecycle_stage}`)}
+                </p>
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+
+        <LeadDetailSheet
+          lead={selectedLead}
+          open={detailOpen}
+          onOpenChange={closeLeadDetail}
+          onEditCadastro={() => closeLeadDetail(false)}
+          onMoveStage={handleMoveStage}
+          onLeadUpdated={handleLeadUpdated}
+        />
+
+        <PersonFormSheet
+          open={formSheetOpen}
+          person={null}
+          contactTypes={contactTypes}
+          documentTypes={documentTypes}
+          onOpenChange={setFormSheetOpen}
+          onSuccess={() => {
+            void refetch();
+          }}
+        />
+      </div>
+    </Page>
+  );
+}