@hed-hog/contact 0.0.294 → 0.0.296

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

@@ -1,812 +1,460 @@
-'use client';
-
-import {
-  EmptyState,
-  Page,
-  PageHeader,
-  PaginationFooter,
-  SearchBar,
-  type SearchBarControl,
-} from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { formatDateTime } from '@/lib/format-date';
-import { cn } from '@/lib/utils';
-import { useApp } from '@hed-hog/next-app-provider';
-import {
-  Activity,
-  CalendarCheck,
-  CalendarClock,
-  CheckCircle2,
-  CircleAlert,
-  Clock3,
-  Eye,
-  LayoutGrid,
-  List,
-  Mail,
-  MessageCircle,
-  NotebookPen,
-  Phone,
-  User,
-  Users,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
-import { crmMockLeads, crmOwners } from '../_lib/crm-mocks';
-
-type ActivityType = 'call' | 'email' | 'meeting' | 'whatsapp' | 'task' | 'note';
-type ActivityPriority = 'high' | 'medium' | 'low';
-type ActivityStatus = 'pending' | 'overdue' | 'completed';
-type ActivityViewMode = 'table' | 'timeline';
-
-const ACTIVITIES_VIEW_STORAGE_KEY = 'contact-activities-view-mode';
-
-type CrmActivity = {
-  id: number;
-  personId: number;
-  ownerId: number | null;
-  type: ActivityType;
-  subject: string;
-  notes: string;
-  dueAt: string;
-  completedAt?: string | null;
-  createdAt: string;
-  priority: ActivityPriority;
-};
-
-function buildMockDate(offsetDays: number, hour: number, minute: number) {
-  const value = new Date();
-  value.setSeconds(0, 0);
-  value.setDate(value.getDate() + offsetDays);
-  value.setHours(hour, minute, 0, 0);
-  return value.toISOString();
-}
-
-function createMockActivities(): CrmActivity[] {
-  const leads = crmMockLeads.slice(0, 10);
-
-  return [
-    {
-      id: 9001,
-      personId: leads[0]?.id ?? 101,
-      ownerId: 1,
-      type: 'call',
-      subject: 'Follow-up da proposta comercial',
-      notes: 'Validar decisão até o final da tarde.',
-      dueAt: buildMockDate(-1, 10, 30),
-      createdAt: buildMockDate(-3, 8, 45),
-      priority: 'high',
-    },
-    {
-      id: 9002,
-      personId: leads[1]?.id ?? 102,
-      ownerId: 2,
-      type: 'email',
-      subject: 'Enviar comparativo de planos',
-      notes: 'Anexar proposta enterprise com SLA.',
-      dueAt: buildMockDate(0, 14, 0),
-      createdAt: buildMockDate(-2, 9, 15),
-      priority: 'medium',
-    },
-    {
-      id: 9003,
-      personId: leads[2]?.id ?? 103,
-      ownerId: 1,
-      type: 'whatsapp',
-      subject: 'Confirmar data da demo',
-      notes: 'Cliente pediu nova janela para sexta.',
-      dueAt: buildMockDate(1, 11, 0),
-      createdAt: buildMockDate(-1, 16, 10),
-      priority: 'low',
-    },
-    {
-      id: 9004,
-      personId: leads[3]?.id ?? 104,
-      ownerId: 3,
-      type: 'meeting',
-      subject: 'Reunião de alinhamento técnico',
-      notes: 'Levar material de integração.',
-      dueAt: buildMockDate(2, 15, 30),
-      createdAt: buildMockDate(-4, 10, 0),
-      priority: 'high',
-    },
-    {
-      id: 9005,
-      personId: leads[4]?.id ?? 105,
-      ownerId: 4,
-      type: 'task',
-      subject: 'Atualizar CRM com objeções de preço',
-      notes: 'Tag de sensibilidade ao valor.',
-      dueAt: buildMockDate(-2, 17, 0),
-      createdAt: buildMockDate(-5, 8, 30),
-      priority: 'medium',
-    },
-    {
-      id: 9006,
-      personId: leads[5]?.id ?? 106,
-      ownerId: 2,
-      type: 'note',
-      subject: 'Resumo do comitê de compra',
-      notes: 'Decisão prevista para próxima semana.',
-      dueAt: buildMockDate(3, 9, 45),
-      createdAt: buildMockDate(-1, 11, 50),
-      priority: 'low',
-    },
-    {
-      id: 9007,
-      personId: leads[6]?.id ?? 107,
-      ownerId: 3,
-      type: 'call',
-      subject: 'Reengajar oportunidade inativa',
-      notes: 'Sondar timing para reabertura.',
-      dueAt: buildMockDate(0, 16, 10),
-      createdAt: buildMockDate(-2, 13, 25),
-      completedAt: buildMockDate(0, 16, 40),
-      priority: 'low',
-    },
-    {
-      id: 9008,
-      personId: leads[7]?.id ?? 108,
-      ownerId: null,
-      type: 'email',
-      subject: 'Enviar material de onboarding',
-      notes: 'Sem owner definido, fila do SDR.',
-      dueAt: buildMockDate(1, 10, 0),
-      createdAt: buildMockDate(-1, 9, 0),
-      priority: 'high',
-    },
-    {
-      id: 9009,
-      personId: leads[8]?.id ?? 109,
-      ownerId: 4,
-      type: 'meeting',
-      subject: 'Sessão de revisão contratual',
-      notes: 'Ajustar cláusulas de prazo.',
-      dueAt: buildMockDate(-1, 12, 0),
-      createdAt: buildMockDate(-3, 15, 10),
-      completedAt: buildMockDate(-1, 12, 50),
-      priority: 'high',
-    },
-    {
-      id: 9010,
-      personId: leads[9]?.id ?? 110,
-      ownerId: 1,
-      type: 'task',
-      subject: 'Registrar decisão de comitê',
-      notes: 'Atualizar etapa no pipeline após retorno.',
-      dueAt: buildMockDate(4, 14, 15),
-      createdAt: buildMockDate(-1, 10, 20),
-      priority: 'medium',
-    },
-  ];
-}
-
-function resolveActivityStatus(activity: CrmActivity): ActivityStatus {
-  if (activity.completedAt) {
-    return 'completed';
-  }
-
-  return new Date(activity.dueAt) < new Date() ? 'overdue' : 'pending';
-}
-
-function getTypeIcon(type: ActivityType) {
-  if (type === 'call') return Phone;
-  if (type === 'email') return Mail;
-  if (type === 'meeting') return Users;
-  if (type === 'whatsapp') return MessageCircle;
-  if (type === 'note') return NotebookPen;
-  return Activity;
-}
-
-function statusBadgeClass(status: ActivityStatus) {
-  if (status === 'completed') {
-    return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
-  }
-
-  if (status === 'overdue') {
-    return 'border-red-500/25 bg-red-500/10 text-red-700';
-  }
-
-  return 'border-amber-500/25 bg-amber-500/10 text-amber-700';
-}
-
-function priorityBadgeClass(priority: ActivityPriority) {
-  if (priority === 'high') {
-    return 'border-red-500/25 bg-red-500/10 text-red-700';
-  }
-
-  if (priority === 'medium') {
-    return 'border-sky-500/25 bg-sky-500/10 text-sky-700';
-  }
-
-  return 'border-slate-500/25 bg-slate-500/10 text-slate-700';
-}
-
-export default function CrmActivitiesPage() {
-  const t = useTranslations('contact.CrmActivities');
-  const crmT = useTranslations('contact.CrmMenu');
-  const { currentLocaleCode, getSettingValue } = useApp();
-
-  const [activities, setActivities] = useState<CrmActivity[]>(() =>
-    createMockActivities()
-  );
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [typeFilter, setTypeFilter] = useState('all');
-  const [priorityFilter, setPriorityFilter] = useState('all');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [viewMode, setViewMode] = useState<ActivityViewMode>('table');
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedSearch(searchInput.trim().toLowerCase());
-    }, 250);
-
-    return () => clearTimeout(timeout);
-  }, [searchInput]);
-
-  useEffect(() => {
-    try {
-      const saved = window.localStorage.getItem(ACTIVITIES_VIEW_STORAGE_KEY);
-      if (saved === 'table' || saved === 'timeline') {
-        setViewMode(saved);
-      }
-    } catch {
-      // Ignore storage read failures.
-    }
-  }, []);
-
-  const enrichedActivities = useMemo(() => {
-    return activities
-      .map((activity) => {
-        const lead = crmMockLeads.find((item) => item.id === activity.personId);
-        const owner = crmOwners.find((item) => item.id === activity.ownerId);
-
-        return {
-          ...activity,
-          personName: lead?.name || t('unassignedPerson'),
-          ownerName: owner?.name || t('unassignedOwner'),
-          status: resolveActivityStatus(activity),
-        };
-      })
-      .sort(
-        (left, right) =>
-          new Date(left.dueAt).getTime() - new Date(right.dueAt).getTime()
-      );
-  }, [activities, t]);
-
-  const filteredActivities = useMemo(() => {
-    return enrichedActivities.filter((activity) => {
-      if (statusFilter !== 'all' && activity.status !== statusFilter) {
-        return false;
-      }
-
-      if (typeFilter !== 'all' && activity.type !== typeFilter) {
-        return false;
-      }
-
-      if (priorityFilter !== 'all' && activity.priority !== priorityFilter) {
-        return false;
-      }
-
-      if (!debouncedSearch) {
-        return true;
-      }
-
-      const target = [
-        activity.subject,
-        activity.notes,
-        activity.personName,
-        activity.ownerName,
-      ]
-        .join(' ')
-        .toLowerCase();
-
-      return target.includes(debouncedSearch);
-    });
-  }, [
-    enrichedActivities,
-    statusFilter,
-    typeFilter,
-    priorityFilter,
-    debouncedSearch,
-  ]);
-
-  const totalPages = Math.max(
-    1,
-    Math.ceil(filteredActivities.length / pageSize)
-  );
-
-  useEffect(() => {
-    if (page > totalPages) {
-      setPage(totalPages);
-    }
-  }, [page, totalPages]);
-
-  const pageData = useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return filteredActivities.slice(start, start + pageSize);
-  }, [filteredActivities, page, pageSize]);
-
-  const stats = useMemo(() => {
-    const total = enrichedActivities.length;
-    const pending = enrichedActivities.filter(
-      (item) => item.status === 'pending'
-    ).length;
-    const overdue = enrichedActivities.filter(
-      (item) => item.status === 'overdue'
-    ).length;
-    const completed = enrichedActivities.filter(
-      (item) => item.status === 'completed'
-    ).length;
-
-    return { total, pending, overdue, completed };
-  }, [enrichedActivities]);
-
-  const statsCards = [
-    {
-      key: 'total',
-      title: t('stats.total'),
-      value: stats.total,
-      icon: Activity,
-      accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
-      iconContainerClassName: 'bg-violet-500/10 text-violet-700',
-    },
-    {
-      key: 'pending',
-      title: t('stats.pending'),
-      value: stats.pending,
-      icon: Clock3,
-      accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
-      iconContainerClassName: 'bg-amber-500/10 text-amber-700',
-    },
-    {
-      key: 'overdue',
-      title: t('stats.overdue'),
-      value: stats.overdue,
-      icon: CircleAlert,
-      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
-      iconContainerClassName: 'bg-red-500/10 text-red-700',
-    },
-    {
-      key: 'completed',
-      title: t('stats.completed'),
-      value: stats.completed,
-      icon: CalendarCheck,
-      accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
-      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
-    },
-  ];
-
-  const controls: SearchBarControl[] = [
-    {
-      id: 'activities-status-filter',
-      type: 'select',
-      value: statusFilter,
-      onChange: (value) => {
-        setStatusFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filters.statusPlaceholder'),
-      options: [
-        { value: 'all', label: t('filters.allStatuses') },
-        { value: 'pending', label: t('status.pending') },
-        { value: 'overdue', label: t('status.overdue') },
-        { value: 'completed', label: t('status.completed') },
-      ],
-    },
-    {
-      id: 'activities-type-filter',
-      type: 'select',
-      value: typeFilter,
-      onChange: (value) => {
-        setTypeFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filters.typePlaceholder'),
-      options: [
-        { value: 'all', label: t('filters.allTypes') },
-        { value: 'call', label: t('type.call') },
-        { value: 'email', label: t('type.email') },
-        { value: 'meeting', label: t('type.meeting') },
-        { value: 'whatsapp', label: t('type.whatsapp') },
-        { value: 'task', label: t('type.task') },
-        { value: 'note', label: t('type.note') },
-      ],
-    },
-    {
-      id: 'activities-priority-filter',
-      type: 'select',
-      value: priorityFilter,
-      onChange: (value) => {
-        setPriorityFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filters.priorityPlaceholder'),
-      options: [
-        { value: 'all', label: t('filters.allPriorities') },
-        { value: 'high', label: t('priority.high') },
-        { value: 'medium', label: t('priority.medium') },
-        { value: 'low', label: t('priority.low') },
-      ],
-    },
-  ];
-
-  const handleComplete = (activityId: number) => {
-    setActivities((previous) =>
-      previous.map((item) =>
-        item.id === activityId
-          ? {
-              ...item,
-              completedAt: new Date().toISOString(),
-            }
-          : item
-      )
-    );
-
-    toast.success(t('toasts.markedAsCompleted'));
-  };
-
-  const handleView = (subject: string) => {
-    toast.info(t('toasts.openDetails', { subject }));
-  };
-
-  const handleViewModeChange = (value: string) => {
-    if (value !== 'table' && value !== 'timeline') {
-      return;
-    }
-
-    setViewMode(value);
-
-    try {
-      window.localStorage.setItem(ACTIVITIES_VIEW_STORAGE_KEY, value);
-    } catch {
-      // Ignore storage write failures.
-    }
-  };
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
-          { label: t('title') },
-        ]}
-        title={t('title')}
-        description={t('description')}
-      />
-
-      <div className="space-y-6">
-        <KpiCardsGrid items={statsCards} />
-
-        <SearchBar
-          searchQuery={searchInput}
-          onSearchChange={(value) => {
-            setSearchInput(value);
-            setPage(1);
-          }}
-          onSearch={() => setPage(1)}
-          placeholder={t('filters.searchPlaceholder')}
-          controls={controls}
-        />
-
-        <div className="flex items-center justify-end gap-3">
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('viewMode')}
-          </span>
-          <ToggleGroup
-            type="single"
-            value={viewMode}
-            onValueChange={handleViewModeChange}
-            variant="outline"
-            size="sm"
-            aria-label={t('viewMode')}
-          >
-            <ToggleGroupItem
-              value="table"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewModeTable')}
-            >
-              <List className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTable')}</span>
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="timeline"
-              className="gap-1.5 px-2.5"
-              aria-label={t('viewModeTimeline')}
-            >
-              <LayoutGrid className="h-4 w-4" />
-              <span className="hidden sm:inline">{t('viewModeTimeline')}</span>
-            </ToggleGroupItem>
-          </ToggleGroup>
-        </div>
-
-        {pageData.length === 0 ? (
-          <EmptyState
-            icon={<CalendarClock className="h-12 w-12" />}
-            title={t('empty.title')}
-            description={t('empty.description')}
-            actionLabel={t('empty.resetFilters')}
-            onAction={() => {
-              setSearchInput('');
-              setDebouncedSearch('');
-              setStatusFilter('all');
-              setTypeFilter('all');
-              setPriorityFilter('all');
-              setPage(1);
-            }}
-          />
-        ) : viewMode === 'table' ? (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('table.activity')}</TableHead>
-                  <TableHead>{t('table.person')}</TableHead>
-                  <TableHead>{t('table.owner')}</TableHead>
-                  <TableHead>{t('table.dueAt')}</TableHead>
-                  <TableHead>{t('table.status')}</TableHead>
-                  <TableHead>{t('table.priority')}</TableHead>
-                  <TableHead className="text-right">
-                    {t('table.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {pageData.map((item) => {
-                  const TypeIcon = getTypeIcon(item.type);
-                  const completed = item.status === 'completed';
-
-                  return (
-                    <TableRow key={item.id}>
-                      <TableCell>
-                        <div className="min-w-[260px] space-y-1">
-                          <div className="flex items-center gap-2">
-                            <TypeIcon className="h-4 w-4 text-muted-foreground" />
-                            <p className="font-medium">{item.subject}</p>
-                          </div>
-                          <p className="line-clamp-2 text-xs text-muted-foreground">
-                            {item.notes}
-                          </p>
-                          <div className="text-[11px] text-muted-foreground">
-                            {t('table.createdAt')}:{' '}
-                            {formatDateTime(
-                              item.createdAt,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="inline-flex items-center gap-2">
-                          <Users className="h-3.5 w-3.5 text-muted-foreground" />
-                          <span>{item.personName}</span>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <div className="inline-flex items-center gap-2">
-                          <User className="h-3.5 w-3.5 text-muted-foreground" />
-                          <span>{item.ownerName}</span>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        {formatDateTime(
-                          item.dueAt,
-                          getSettingValue,
-                          currentLocaleCode
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant="outline"
-                          className={cn(
-                            'border',
-                            statusBadgeClass(item.status)
-                          )}
-                        >
-                          {t(`status.${item.status}`)}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant="outline"
-                          className={cn(
-                            'border',
-                            priorityBadgeClass(item.priority)
-                          )}
-                        >
-                          {t(`priority.${item.priority}`)}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <div className="inline-flex items-center gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => handleView(item.subject)}
-                          >
-                            <Eye className="mr-2 h-3.5 w-3.5" />
-                            {t('actions.view')}
-                          </Button>
-
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => handleComplete(item.id)}
-                            disabled={completed}
-                            className={cn(
-                              completed && 'cursor-not-allowed opacity-60'
-                            )}
-                          >
-                            <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
-                            {t('actions.complete')}
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div className="rounded-md border border-dashed border-border/70 bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
-              {t('timeline.description')}
-            </div>
-
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {pageData.map((item) => {
-                const TypeIcon = getTypeIcon(item.type);
-                const completed = item.status === 'completed';
-
-                return (
-                  <Card
-                    key={item.id}
-                    className="h-full overflow-hidden border-border/70 py-0"
-                  >
-                    <CardContent className="space-y-3 p-4">
-                      <div className="flex items-start justify-between gap-3">
-                        <div className="min-w-0 space-y-1">
-                          <div className="flex items-center gap-2">
-                            <TypeIcon className="h-4 w-4 text-muted-foreground" />
-                            <p className="line-clamp-2 text-sm font-semibold">
-                              {item.subject}
-                            </p>
-                          </div>
-                          <p className="line-clamp-2 text-xs text-muted-foreground">
-                            {item.notes}
-                          </p>
-                        </div>
-                        <Badge
-                          variant="outline"
-                          className={cn(
-                            'shrink-0 border',
-                            statusBadgeClass(item.status)
-                          )}
-                        >
-                          {t(`status.${item.status}`)}
-                        </Badge>
-                      </div>
-
-                      <div className="grid gap-2 rounded-md border border-border/70 bg-background px-3 py-2 text-xs">
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-muted-foreground">
-                            {t('timeline.dueLabel')}
-                          </span>
-                          <span className="font-medium text-foreground">
-                            {formatDateTime(
-                              item.dueAt,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </span>
-                        </div>
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-muted-foreground">
-                            {t('timeline.createdLabel')}
-                          </span>
-                          <span className="font-medium text-foreground">
-                            {formatDateTime(
-                              item.createdAt,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
-                          </span>
-                        </div>
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-muted-foreground">
-                            {t('table.person')}
-                          </span>
-                          <span className="truncate font-medium text-foreground">
-                            {item.personName}
-                          </span>
-                        </div>
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-muted-foreground">
-                            {t('table.owner')}
-                          </span>
-                          <span className="truncate font-medium text-foreground">
-                            {item.ownerName}
-                          </span>
-                        </div>
-                      </div>
-
-                      <div className="flex items-center justify-between gap-2">
-                        <Badge
-                          variant="outline"
-                          className={cn(
-                            'border',
-                            priorityBadgeClass(item.priority)
-                          )}
-                        >
-                          {t(`priority.${item.priority}`)}
-                        </Badge>
-
-                        <div className="inline-flex items-center gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => handleView(item.subject)}
-                          >
-                            <Eye className="mr-2 h-3.5 w-3.5" />
-                            {t('actions.view')}
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => handleComplete(item.id)}
-                            disabled={completed}
-                            className={cn(
-                              completed && 'cursor-not-allowed opacity-60'
-                            )}
-                          >
-                            <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
-                            {t('actions.complete')}
-                          </Button>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        <div className="border-t p-4">
-          <PaginationFooter
-            currentPage={page}
-            pageSize={pageSize}
-            totalItems={filteredActivities.length}
-            onPageChange={setPage}
-            onPageSizeChange={(nextPageSize) => {
-              setPageSize(nextPageSize);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-    </Page>
-  );
-}
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  Activity,
+  CalendarCheck,
+  CalendarClock,
+  CheckCircle2,
+  CircleAlert,
+  Clock3,
+  Eye,
+  LayoutGrid,
+  List,
+  Loader2,
+  Mail,
+  MessageCircle,
+  NotebookPen,
+  Phone,
+  User,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { ActivityDetailSheet } from './_components/activity-detail-sheet';
+import type {
+  ActivityListItem,
+  ActivityPriority,
+  ActivityStats,
+  ActivityStatus,
+  ActivityType,
+  ActivityViewMode,
+  PaginatedResult,
+} from './_components/activity-types';
+
+const ACTIVITIES_VIEW_STORAGE_KEY = 'contact-activities-view-mode';
+
+function getTypeIcon(type: ActivityType) {
+  if (type === 'call') return Phone;
+  if (type === 'email') return Mail;
+  if (type === 'meeting') return Users;
+  if (type === 'whatsapp') return MessageCircle;
+  if (type === 'note') return NotebookPen;
+  return Activity;
+}
+
+function getStatusBadgeClass(status: ActivityStatus) {
+  if (status === 'completed') return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
+  if (status === 'overdue') return 'border-red-500/25 bg-red-500/10 text-red-700';
+  return 'border-amber-500/25 bg-amber-500/10 text-amber-700';
+}
+
+function getPriorityBadgeClass(priority: ActivityPriority) {
+  if (priority === 'high') return 'border-red-500/25 bg-red-500/10 text-red-700';
+  if (priority === 'medium') return 'border-sky-500/25 bg-sky-500/10 text-sky-700';
+  return 'border-slate-500/25 bg-slate-500/10 text-slate-700';
+}
+
+export default function CrmActivitiesPage() {
+  const t = useTranslations('contact.CrmActivities');
+  const crmT = useTranslations('contact.CrmMenu');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [priorityFilter, setPriorityFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<ActivityViewMode>('table');
+  const [selectedActivityId, setSelectedActivityId] = useState<number | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [completingActivityId, setCompletingActivityId] = useState<number | null>(null);
+  const [detailRefreshKey, setDetailRefreshKey] = useState(0);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedSearch(searchInput.trim()), 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  useEffect(() => {
+    try {
+      const saved = window.localStorage.getItem(ACTIVITIES_VIEW_STORAGE_KEY);
+      if (saved === 'table' || saved === 'timeline') setViewMode(saved);
+    } catch {
+      // Ignore storage read failures.
+    }
+  }, []);
+
+  const { data: stats = { total: 0, pending: 0, overdue: 0, completed: 0 }, refetch: refetchStats } =
+    useQuery<ActivityStats>({
+      queryKey: ['contact-activities-stats', currentLocaleCode],
+      queryFn: async () => {
+        const response = await request<ActivityStats>({
+          url: '/person/activities/stats',
+          method: 'GET',
+        });
+        return response.data;
+      },
+      placeholderData: (previous) =>
+        previous ?? { total: 0, pending: 0, overdue: 0, completed: 0 },
+    });
+
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 12,
+      lastPage: 1,
+      prev: null,
+      next: null,
+    },
+    isLoading,
+    refetch: refetchActivities,
+  } = useQuery<PaginatedResult<ActivityListItem>>({
+    queryKey: [
+      'contact-activities',
+      page,
+      pageSize,
+      debouncedSearch,
+      statusFilter,
+      typeFilter,
+      priorityFilter,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (statusFilter !== 'all') params.set('status', statusFilter);
+      if (typeFilter !== 'all') params.set('type', typeFilter);
+      if (priorityFilter !== 'all') params.set('priority', priorityFilter);
+
+      const response = await request<PaginatedResult<ActivityListItem>>({
+        url: `/person/activities?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 12,
+        lastPage: 1,
+        prev: null,
+        next: null,
+      },
+  });
+
+  const controls: SearchBarControl[] = [
+    {
+      id: 'activities-status-filter',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filters.statusPlaceholder'),
+      options: [
+        { value: 'all', label: t('filters.allStatuses') },
+        { value: 'pending', label: t('status.pending') },
+        { value: 'overdue', label: t('status.overdue') },
+        { value: 'completed', label: t('status.completed') },
+      ],
+    },
+    {
+      id: 'activities-type-filter',
+      type: 'select',
+      value: typeFilter,
+      onChange: (value) => {
+        setTypeFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filters.typePlaceholder'),
+      options: [
+        { value: 'all', label: t('filters.allTypes') },
+        { value: 'call', label: t('type.call') },
+        { value: 'email', label: t('type.email') },
+        { value: 'meeting', label: t('type.meeting') },
+        { value: 'whatsapp', label: t('type.whatsapp') },
+        { value: 'task', label: t('type.task') },
+        { value: 'note', label: t('type.note') },
+      ],
+    },
+    {
+      id: 'activities-priority-filter',
+      type: 'select',
+      value: priorityFilter,
+      onChange: (value) => {
+        setPriorityFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filters.priorityPlaceholder'),
+      options: [
+        { value: 'all', label: t('filters.allPriorities') },
+        { value: 'high', label: t('priority.high') },
+        { value: 'medium', label: t('priority.medium') },
+        { value: 'low', label: t('priority.low') },
+      ],
+    },
+  ];
+
+  const statsCards = [
+    { key: 'total', title: t('stats.total'), value: stats.total, icon: Activity, accentClassName: 'from-violet-500/20 via-fuchsia-500/10 to-transparent', iconContainerClassName: 'bg-violet-500/10 text-violet-700' },
+    { key: 'pending', title: t('stats.pending'), value: stats.pending, icon: Clock3, accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent', iconContainerClassName: 'bg-amber-500/10 text-amber-700' },
+    { key: 'overdue', title: t('stats.overdue'), value: stats.overdue, icon: CircleAlert, accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent', iconContainerClassName: 'bg-red-500/10 text-red-700' },
+    { key: 'completed', title: t('stats.completed'), value: stats.completed, icon: CalendarCheck, accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent', iconContainerClassName: 'bg-emerald-500/10 text-emerald-700' },
+  ];
+
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'timeline') return;
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(ACTIVITIES_VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore storage write failures.
+    }
+  };
+
+  const handleComplete = async (activityId: number) => {
+    setCompletingActivityId(activityId);
+    try {
+      await request({ url: `/person/activities/${activityId}/complete`, method: 'POST' });
+      setDetailRefreshKey((current) => current + 1);
+      await Promise.all([refetchActivities(), refetchStats()]);
+      toast.success(t('toasts.markedAsCompleted'));
+    } catch {
+      toast.error(t('toasts.completeError'));
+    } finally {
+      setCompletingActivityId(null);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      <div className="space-y-6">
+        <KpiCardsGrid items={statsCards} />
+
+        <SearchBar
+          searchQuery={searchInput}
+          onSearchChange={(value) => {
+            setSearchInput(value);
+            setPage(1);
+          }}
+          onSearch={() => setPage(1)}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={controls}
+        />
+
+        <div className="flex items-center justify-end gap-3">
+          <span className="text-xs font-medium text-muted-foreground">{t('viewMode')}</span>
+          <ToggleGroup type="single" value={viewMode} onValueChange={handleViewModeChange} variant="outline" size="sm" aria-label={t('viewMode')}>
+            <ToggleGroupItem value="table" className="gap-1.5 px-2.5" aria-label={t('viewModeTable')}>
+              <List className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTable')}</span>
+            </ToggleGroupItem>
+            <ToggleGroupItem value="timeline" className="gap-1.5 px-2.5" aria-label={t('viewModeTimeline')}>
+              <LayoutGrid className="h-4 w-4" />
+              <span className="hidden sm:inline">{t('viewModeTimeline')}</span>
+            </ToggleGroupItem>
+          </ToggleGroup>
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-3">
+            <Skeleton className="h-14 w-full" />
+            <Skeleton className="h-14 w-full" />
+            <Skeleton className="h-14 w-full" />
+          </div>
+        ) : paginate.data.length === 0 ? (
+          <EmptyState
+            icon={<CalendarClock className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('empty.resetFilters')}
+            onAction={() => {
+              setSearchInput('');
+              setDebouncedSearch('');
+              setStatusFilter('all');
+              setTypeFilter('all');
+              setPriorityFilter('all');
+              setPage(1);
+            }}
+          />
+        ) : viewMode === 'table' ? (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.activity')}</TableHead>
+                  <TableHead>{t('table.person')}</TableHead>
+                  <TableHead>{t('table.owner')}</TableHead>
+                  <TableHead>{t('table.dueAt')}</TableHead>
+                  <TableHead>{t('table.status')}</TableHead>
+                  <TableHead>{t('table.priority')}</TableHead>
+                  <TableHead className="text-right">{t('table.actions')}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginate.data.map((item) => {
+                  const TypeIcon = getTypeIcon(item.type);
+                  const isCompleted = item.status === 'completed';
+                  const isCompleting = completingActivityId === item.id;
+
+                  return (
+                    <TableRow key={item.id}>
+                      <TableCell>
+                        <div className="min-w-[260px] space-y-1">
+                          <div className="flex items-center gap-2">
+                            <TypeIcon className="h-4 w-4 text-muted-foreground" />
+                            <p className="font-medium">{item.subject}</p>
+                          </div>
+                          <p className="line-clamp-2 text-xs text-muted-foreground">{item.notes || t('detail.emptyNotes')}</p>
+                          <div className="text-[11px] text-muted-foreground">
+                            {t('table.createdAt')}: {formatDateTime(item.created_at, getSettingValue, currentLocaleCode)}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell><div className="inline-flex items-center gap-2"><Users className="h-3.5 w-3.5 text-muted-foreground" /><span>{item.person.name}</span></div></TableCell>
+                      <TableCell><div className="inline-flex items-center gap-2"><User className="h-3.5 w-3.5 text-muted-foreground" /><span>{item.owner_user?.name || t('unassignedOwner')}</span></div></TableCell>
+                      <TableCell>{formatDateTime(item.due_at, getSettingValue, currentLocaleCode)}</TableCell>
+                      <TableCell><Badge variant="outline" className={cn('border', getStatusBadgeClass(item.status))}>{t(`status.${item.status}`)}</Badge></TableCell>
+                      <TableCell><Badge variant="outline" className={cn('border', getPriorityBadgeClass(item.priority))}>{t(`priority.${item.priority}`)}</Badge></TableCell>
+                      <TableCell className="text-right">
+                        <div className="inline-flex items-center gap-2">
+                          <Button type="button" variant="outline" size="sm" onClick={() => { setSelectedActivityId(item.id); setDetailOpen(true); }}>
+                            <Eye className="mr-2 h-3.5 w-3.5" />
+                            {t('actions.view')}
+                          </Button>
+                          <Button type="button" variant="outline" size="sm" onClick={() => handleComplete(item.id)} disabled={isCompleted || isCompleting} className={cn((isCompleted || isCompleting) && 'cursor-not-allowed opacity-60')}>
+                            {isCompleting ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="mr-2 h-3.5 w-3.5" />}
+                            {t('actions.complete')}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="rounded-md border border-dashed border-border/70 bg-muted/20 px-4 py-3 text-sm text-muted-foreground">{t('timeline.description')}</div>
+            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {paginate.data.map((item) => {
+                const TypeIcon = getTypeIcon(item.type);
+                const isCompleted = item.status === 'completed';
+                const isCompleting = completingActivityId === item.id;
+
+                return (
+                  <Card key={item.id} className="h-full overflow-hidden border-border/70 py-0">
+                    <CardContent className="space-y-3 p-4">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0 space-y-1">
+                          <div className="flex items-center gap-2">
+                            <TypeIcon className="h-4 w-4 text-muted-foreground" />
+                            <p className="line-clamp-2 text-sm font-semibold">{item.subject}</p>
+                          </div>
+                          <p className="line-clamp-2 text-xs text-muted-foreground">{item.notes || t('detail.emptyNotes')}</p>
+                        </div>
+                        <Badge variant="outline" className={cn('shrink-0 border', getStatusBadgeClass(item.status))}>{t(`status.${item.status}`)}</Badge>
+                      </div>
+                      <div className="grid gap-2 rounded-md border border-border/70 bg-background px-3 py-2 text-xs">
+                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('timeline.dueLabel')}</span><span className="font-medium text-foreground">{formatDateTime(item.due_at, getSettingValue, currentLocaleCode)}</span></div>
+                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('timeline.createdLabel')}</span><span className="font-medium text-foreground">{formatDateTime(item.created_at, getSettingValue, currentLocaleCode)}</span></div>
+                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('table.person')}</span><span className="truncate font-medium text-foreground">{item.person.name}</span></div>
+                        <div className="flex items-center justify-between gap-2"><span className="text-muted-foreground">{t('table.owner')}</span><span className="truncate font-medium text-foreground">{item.owner_user?.name || t('unassignedOwner')}</span></div>
+                      </div>
+                      <div className="flex items-center justify-between gap-2">
+                        <Badge variant="outline" className={cn('border', getPriorityBadgeClass(item.priority))}>{t(`priority.${item.priority}`)}</Badge>
+                        <div className="inline-flex items-center gap-2">
+                          <Button type="button" variant="outline" size="sm" onClick={() => { setSelectedActivityId(item.id); setDetailOpen(true); }}>
+                            <Eye className="mr-2 h-3.5 w-3.5" />
+                            {t('actions.view')}
+                          </Button>
+                          <Button type="button" variant="outline" size="sm" onClick={() => handleComplete(item.id)} disabled={isCompleted || isCompleting} className={cn((isCompleted || isCompleting) && 'cursor-not-allowed opacity-60')}>
+                            {isCompleting ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="mr-2 h-3.5 w-3.5" />}
+                            {t('actions.complete')}
+                          </Button>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <div className="border-t p-4">
+          <PaginationFooter
+            currentPage={paginate.page}
+            pageSize={paginate.pageSize}
+            totalItems={paginate.total}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+          />
+        </div>
+      </div>
+
+      <ActivityDetailSheet
+        activityId={selectedActivityId}
+        open={detailOpen}
+        refreshKey={detailRefreshKey}
+        isCompleting={selectedActivityId === completingActivityId}
+        onOpenChange={(open) => {
+          setDetailOpen(open);
+          if (!open) setSelectedActivityId(null);
+        }}
+        onComplete={handleComplete}
+      />
+    </Page>
+  );
+}