@hed-hog/contact 0.0.294 → 0.0.295

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

@@ -12,6 +12,7 @@ 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,
@@ -23,7 +24,7 @@ import {
 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 { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   Activity,
   CalendarCheck,
@@ -34,6 +35,7 @@ import {
   Eye,
   LayoutGrid,
   List,
+  Loader2,
   Mail,
   MessageCircle,
   NotebookPen,
@@ -42,165 +44,21 @@ import {
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, 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';
+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';
 
-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;
@@ -210,38 +68,23 @@ function getTypeIcon(type: ActivityType) {
   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';
-  }
-
+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 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';
-  }
-
+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 { currentLocaleCode, getSettingValue } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
 
-  const [activities, setActivities] = useState<CrmActivity[]>(() =>
-    createMockActivities()
-  );
   const [searchInput, setSearchInput] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
@@ -250,147 +93,90 @@ export default function CrmActivitiesPage() {
   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().toLowerCase());
-    }, 250);
-
+    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);
-      }
+      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);
+  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 },
     });
-  }, [
-    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',
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 12,
+      lastPage: 1,
+      prev: null,
+      next: null,
     },
-    {
-      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',
+    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;
     },
-    {
-      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',
-    },
-  ];
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 12,
+        lastPage: 1,
+        prev: null,
+        next: null,
+      },
+  });
 
   const controls: SearchBarControl[] = [
     {
@@ -446,32 +232,16 @@ export default function CrmActivitiesPage() {
     },
   ];
 
-  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 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;
-    }
-
+    if (value !== 'table' && value !== 'timeline') return;
     setViewMode(value);
-
     try {
       window.localStorage.setItem(ACTIVITIES_VIEW_STORAGE_KEY, value);
     } catch {
@@ -479,6 +249,20 @@ export default function CrmActivitiesPage() {
     }
   };
 
+  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
@@ -506,37 +290,26 @@ export default function CrmActivitiesPage() {
         />
 
         <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')}
-            >
+          <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')}
-            >
+            <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 ? (
+        {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')}
@@ -562,15 +335,14 @@ export default function CrmActivitiesPage() {
                   <TableHead>{t('table.dueAt')}</TableHead>
                   <TableHead>{t('table.status')}</TableHead>
                   <TableHead>{t('table.priority')}</TableHead>
-                  <TableHead className="text-right">
-                    {t('table.actions')}
-                  </TableHead>
+                  <TableHead className="text-right">{t('table.actions')}</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {pageData.map((item) => {
+                {paginate.data.map((item) => {
                   const TypeIcon = getTypeIcon(item.type);
-                  const completed = item.status === 'completed';
+                  const isCompleted = item.status === 'completed';
+                  const isCompleting = completingActivityId === item.id;
 
                   return (
                     <TableRow key={item.id}>
@@ -580,83 +352,25 @@ export default function CrmActivitiesPage() {
                             <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>
+                          <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.createdAt,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {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.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><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={() => handleView(item.subject)}
-                          >
+                          <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={completed}
-                            className={cn(
-                              completed && 'cursor-not-allowed opacity-60'
-                            )}
-                          >
-                            <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
+                          <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>
@@ -669,119 +383,41 @@ export default function CrmActivitiesPage() {
           </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="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) => {
+              {paginate.data.map((item) => {
                 const TypeIcon = getTypeIcon(item.type);
-                const completed = item.status === 'completed';
+                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"
-                  >
+                  <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>
+                            <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>
+                          <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',
-                            statusBadgeClass(item.status)
-                          )}
-                        >
-                          {t(`status.${item.status}`)}
-                        </Badge>
+                        <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.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 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',
-                            priorityBadgeClass(item.priority)
-                          )}
-                        >
-                          {t(`priority.${item.priority}`)}
-                        </Badge>
-
+                        <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={() => handleView(item.subject)}
-                          >
+                          <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={completed}
-                            className={cn(
-                              completed && 'cursor-not-allowed opacity-60'
-                            )}
-                          >
-                            <CheckCircle2 className="mr-2 h-3.5 w-3.5" />
+                          <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>
@@ -796,9 +432,9 @@ export default function CrmActivitiesPage() {
 
         <div className="border-t p-4">
           <PaginationFooter
-            currentPage={page}
-            pageSize={pageSize}
-            totalItems={filteredActivities.length}
+            currentPage={paginate.page}
+            pageSize={paginate.pageSize}
+            totalItems={paginate.total}
             onPageChange={setPage}
             onPageSizeChange={(nextPageSize) => {
               setPageSize(nextPageSize);
@@ -807,6 +443,18 @@ export default function CrmActivitiesPage() {
           />
         </div>
       </div>
+
+      <ActivityDetailSheet
+        activityId={selectedActivityId}
+        open={detailOpen}
+        refreshKey={detailRefreshKey}
+        isCompleting={selectedActivityId === completingActivityId}
+        onOpenChange={(open) => {
+          setDetailOpen(open);
+          if (!open) setSelectedActivityId(null);
+        }}
+        onComplete={handleComplete}
+      />
     </Page>
   );
 }