@hed-hog/contact 0.0.285 → 0.0.286

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

@@ -1,15 +1,812 @@
 'use client';
 
-import { CrmComingSoon } from '../_components/crm-coming-soon';
-import { Activity } from 'lucide-react';
+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 (
-    <CrmComingSoon
-      currentHref="/contact/activities"
-      titleKey="activities"
-      descriptionKey="activities"
-      icon={Activity}
-    />
+    <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>
   );
 }