@hed-hog/contact 0.0.296 → 0.0.298

package/hedhog/frontend/app/follow-ups/page.tsx.ejs

@@ -1,785 +1,785 @@
-'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 {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { formatDateTime } from '@/lib/format-date';
-import { cn } from '@/lib/utils';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import {
-  CalendarClock,
-  CalendarDays,
-  Check,
-  CheckCircle2,
-  ChevronsUpDown,
-  Clock3,
-  Loader2,
-  Plus,
-  RotateCw,
-  TriangleAlert,
-  User,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-type PaginatedResult<T> = {
-  data: T[];
-  total: number;
-  page: number;
-  pageSize: number;
-  lastPage?: number;
-  prev?: number | null;
-  next?: number | null;
-};
-
-type Person = {
-  id: number;
-  name: string;
-  status: 'active' | 'inactive';
-  owner_user?: {
-    id: number;
-    name: string;
-  } | null;
-  next_action_at?: string | null;
-  last_interaction_at?: string | null;
-};
-
-type PersonOption = {
-  id: number;
-  name: string;
-};
-
-type FollowupStatus = 'today' | 'upcoming' | 'overdue';
-
-type FollowupListItem = {
-  person: Person;
-  next_action_at: string;
-  last_interaction_at?: string | null;
-  status: FollowupStatus;
-};
-
-type FollowupStats = {
-  total: number;
-  today: number;
-  overdue: number;
-  upcoming: number;
-};
-
-function toInputDateTimeValue(value?: string | null) {
-  if (!value) {
-    return '';
-  }
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return '';
-  }
-
-  const pad = (part: number) => String(part).padStart(2, '0');
-  const year = date.getFullYear();
-  const month = pad(date.getMonth() + 1);
-  const day = pad(date.getDate());
-  const hour = pad(date.getHours());
-  const minute = pad(date.getMinutes());
-
-  return `${year}-${month}-${day}T${hour}:${minute}`;
-}
-
-function getStatusBadgeClass(status: FollowupStatus) {
-  if (status === 'overdue') {
-    return 'border-red-500/25 bg-red-500/10 text-red-700';
-  }
-
-  if (status === 'today') {
-    return 'border-amber-500/25 bg-amber-500/10 text-amber-700';
-  }
-
-  return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
-}
-
-export default function CrmFollowupsPage() {
-  const t = useTranslations('contact.CrmFollowups');
-  const crmT = useTranslations('contact.CrmMenu');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
-
-  const scheduleSchema = useMemo(
-    () =>
-      z.object({
-        personId: z.string().min(1, t('form.personRequired')),
-        next_action_at: z.string().min(1, t('form.dateRequired')),
-        notes: z.string().optional(),
-      }),
-    [t]
-  );
-
-  type ScheduleFormValues = z.infer<typeof scheduleSchema>;
-
-  const form = useForm<ScheduleFormValues>({
-    resolver: zodResolver(scheduleSchema),
-    defaultValues: {
-      personId: '',
-      next_action_at: '',
-      notes: '',
-    },
-  });
-
-  const [searchInput, setSearchInput] = useState('');
-  const [debouncedSearch, setDebouncedSearch] = useState('');
-  const [personSearch, setPersonSearch] = useState('');
-  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
-  const [selectedPersonLabel, setSelectedPersonLabel] = useState('');
-  const [statusFilter, setStatusFilter] = useState('all');
-  const [dateFrom, setDateFrom] = useState('');
-  const [dateTo, setDateTo] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const [personPickerOpen, setPersonPickerOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedSearch(searchInput.trim());
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [searchInput]);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setDebouncedPersonSearch(personSearch.trim());
-    }, 300);
-
-    return () => clearTimeout(timeout);
-  }, [personSearch]);
-
-  const {
-    data: stats = {
-      total: 0,
-      today: 0,
-      overdue: 0,
-      upcoming: 0,
-    },
-    refetch: refetchStats,
-  } = useQuery<FollowupStats>({
-    queryKey: ['contact-followups-stats', debouncedSearch, currentLocaleCode],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      if (debouncedSearch) {
-        params.set('search', debouncedSearch);
-      }
-
-      const queryString = params.toString();
-      const response = await request<FollowupStats>({
-        url: queryString
-          ? `/person/followups/stats?${queryString}`
-          : '/person/followups/stats',
-        method: 'GET',
-      });
-
-      return response.data;
-    },
-    placeholderData: (previous) =>
-      previous ?? {
-        total: 0,
-        today: 0,
-        overdue: 0,
-        upcoming: 0,
-      },
-  });
-
-  const {
-    data: paginate = {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 12,
-      lastPage: 1,
-    },
-    isLoading,
-    refetch: refetchFollowups,
-  } = useQuery<PaginatedResult<FollowupListItem>>({
-    queryKey: [
-      'contact-followups',
-      page,
-      pageSize,
-      debouncedSearch,
-      statusFilter,
-      dateFrom,
-      dateTo,
-      currentLocaleCode,
-    ],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', String(page));
-      params.set('pageSize', String(pageSize));
-      if (debouncedSearch) {
-        params.set('search', debouncedSearch);
-      }
-      if (statusFilter !== 'all') {
-        params.set('status', statusFilter);
-      }
-      if (dateFrom) {
-        params.set('date_from', dateFrom);
-      }
-      if (dateTo) {
-        params.set('date_to', dateTo);
-      }
-
-      const response = await request<PaginatedResult<FollowupListItem>>({
-        url: `/person/followups?${params.toString()}`,
-        method: 'GET',
-      });
-
-      return response.data;
-    },
-    placeholderData: (previous) =>
-      previous ?? {
-        data: [],
-        total: 0,
-        page: 1,
-        pageSize: 12,
-        lastPage: 1,
-      },
-  });
-
-  const { data: personOptions = [], isLoading: isLoadingPersons } = useQuery<
-    PersonOption[]
-  >({
-    queryKey: [
-      'contact-followup-person-options',
-      debouncedPersonSearch,
-      currentLocaleCode,
-    ],
-    queryFn: async () => {
-      const params = new URLSearchParams();
-      params.set('page', '1');
-      params.set('pageSize', '20');
-      if (debouncedPersonSearch) {
-        params.set('search', debouncedPersonSearch);
-      }
-
-      const response = await request<PaginatedResult<PersonOption>>({
-        url: `/person?${params.toString()}`,
-        method: 'GET',
-      });
-
-      return response.data.data || [];
-    },
-    placeholderData: (previous) => previous ?? [],
-  });
-
-  const totalPages = Math.max(
-    1,
-    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
-  );
-
-  useEffect(() => {
-    if (page > totalPages) {
-      setPage(totalPages);
-    }
-  }, [page, totalPages]);
-
-  const searchControls: SearchBarControl[] = [
-    {
-      id: 'followup-status',
-      type: 'select',
-      value: statusFilter,
-      onChange: (value: string) => {
-        setStatusFilter(value);
-        setPage(1);
-      },
-      placeholder: t('filters.statusPlaceholder'),
-      options: [
-        { value: 'all', label: t('filters.statusAll') },
-        { value: 'today', label: t('status.today') },
-        { value: 'upcoming', label: t('status.upcoming') },
-        { value: 'overdue', label: t('status.overdue') },
-      ],
-    },
-    {
-      id: 'followup-date-from',
-      type: 'date',
-      value: dateFrom,
-      onChange: (value: string) => {
-        setDateFrom(value);
-        setPage(1);
-      },
-      className: 'sm:w-[170px]',
-    },
-    {
-      id: 'followup-date-to',
-      type: 'date',
-      value: dateTo,
-      onChange: (value: string) => {
-        setDateTo(value);
-        setPage(1);
-      },
-      className: 'sm:w-[170px]',
-    },
-  ];
-
-  const openCreateSheet = () => {
-    setSelectedPersonLabel('');
-    setPersonSearch('');
-    setDebouncedPersonSearch('');
-    setPersonPickerOpen(false);
-    form.reset({
-      personId: '',
-      next_action_at: '',
-      notes: '',
-    });
-    setSheetOpen(true);
-  };
-
-  const openRescheduleSheet = (row: FollowupListItem) => {
-    setSelectedPersonLabel(row.person.name);
-    setPersonSearch(row.person.name);
-    setDebouncedPersonSearch(row.person.name);
-    setPersonPickerOpen(false);
-    form.reset({
-      personId: String(row.person.id),
-      next_action_at: toInputDateTimeValue(row.next_action_at),
-      notes: '',
-    });
-    setSheetOpen(true);
-  };
-
-  const handleSubmit = async (values: ScheduleFormValues) => {
-    const parsedPersonId = Number(values.personId);
-    const nextActionDate = new Date(values.next_action_at);
-
-    if (!Number.isFinite(parsedPersonId) || parsedPersonId <= 0) {
-      toast.error(t('errors.invalidPerson'));
-      return;
-    }
-
-    if (Number.isNaN(nextActionDate.getTime())) {
-      toast.error(t('errors.invalidDate'));
-      return;
-    }
-
-    try {
-      setIsSubmitting(true);
-      await request({
-        url: `/person/${parsedPersonId}/followup`,
-        method: 'POST',
-        data: {
-          next_action_at: nextActionDate.toISOString(),
-          notes: values.notes?.trim() || undefined,
-        },
-      });
-
-      toast.success(t('toasts.scheduleSuccess'));
-      setSheetOpen(false);
-      setPersonPickerOpen(false);
-      await Promise.all([refetchFollowups(), refetchStats()]);
-    } catch {
-      toast.error(t('toasts.scheduleError'));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const selectedPersonName =
-    personOptions.find(
-      (option) => String(option.id) === String(form.watch('personId') || '')
-    )?.name ||
-    selectedPersonLabel ||
-    '';
-
-  const statsCards = [
-    {
-      key: 'total',
-      title: t('stats.total'),
-      value: stats.total,
-      icon: CalendarClock,
-      accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
-      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
-    },
-    {
-      key: 'today',
-      title: t('stats.today'),
-      value: stats.today,
-      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: TriangleAlert,
-      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
-      iconContainerClassName: 'bg-red-500/10 text-red-700',
-    },
-    {
-      key: 'upcoming',
-      title: t('stats.upcoming'),
-      value: stats.upcoming,
-      icon: CheckCircle2,
-      accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
-      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
-    },
-  ];
-
-  return (
-    <Page>
-      <PageHeader
-        breadcrumbs={[
-          { label: 'Home', href: '/' },
-          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
-          { label: t('title') },
-        ]}
-        title={t('title')}
-        description={t('description')}
-        actions={[
-          {
-            label: t('newFollowup'),
-            onClick: openCreateSheet,
-            icon: <Plus className="h-4 w-4" />,
-          },
-        ]}
-      />
-
-      <div className="space-y-6">
-        <KpiCardsGrid items={statsCards} />
-
-        <SearchBar
-          searchQuery={searchInput}
-          onSearchChange={(value) => {
-            setSearchInput(value);
-            setPage(1);
-          }}
-          onSearch={() => {
-            setDebouncedSearch(searchInput.trim());
-            setPage(1);
-            void Promise.all([refetchFollowups(), refetchStats()]);
-          }}
-          placeholder={t('filters.searchPlaceholder')}
-          controls={searchControls}
-        />
-
-        {isLoading ? (
-          <div className="space-y-2">
-            {Array.from({ length: 7 }).map((_, index) => (
-              <Skeleton key={index} className="h-12 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('newFollowup')}
-            actionIcon={<Plus className="mr-2 h-4 w-4" />}
-            onAction={openCreateSheet}
-          />
-        ) : (
-          <div className="overflow-x-auto rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t('table.person')}</TableHead>
-                  <TableHead>{t('table.owner')}</TableHead>
-                  <TableHead>{t('table.nextAction')}</TableHead>
-                  <TableHead>{t('table.lastInteraction')}</TableHead>
-                  <TableHead>{t('table.status')}</TableHead>
-                  <TableHead className="text-right">
-                    {t('table.actions')}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginate.data.map((row) => (
-                  <TableRow key={`${row.person.id}-${row.next_action_at}`}>
-                    <TableCell>
-                      <div className="min-w-[180px]">
-                        <div className="font-medium">{row.person.name}</div>
-                        <div className="text-xs text-muted-foreground">
-                          #{row.person.id}
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="inline-flex items-center gap-2 text-sm">
-                        <User className="h-3.5 w-3.5 text-muted-foreground" />
-                        <span>
-                          {row.person.owner_user?.name || t('unassigned')}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {formatDateTime(
-                        row.next_action_at,
-                        getSettingValue,
-                        currentLocaleCode
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {row.last_interaction_at
-                        ? formatDateTime(
-                            row.last_interaction_at,
-                            getSettingValue,
-                            currentLocaleCode
-                          )
-                        : '-'}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant="outline"
-                        className={cn(
-                          'border',
-                          getStatusBadgeClass(row.status)
-                        )}
-                      >
-                        {t(`status.${row.status}`)}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Button
-                        type="button"
-                        size="sm"
-                        variant="outline"
-                        onClick={() => openRescheduleSheet(row)}
-                      >
-                        <RotateCw className="mr-2 h-3.5 w-3.5" />
-                        {t('reschedule')}
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-
-        <div className="border-t p-4">
-          <PaginationFooter
-            currentPage={page}
-            pageSize={pageSize}
-            totalItems={paginate.total}
-            onPageChange={setPage}
-            onPageSizeChange={(nextPageSize) => {
-              setPageSize(nextPageSize);
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-
-      <Sheet
-        open={sheetOpen}
-        onOpenChange={(open) => {
-          if (!isSubmitting) {
-            setSheetOpen(open);
-            if (!open) {
-              setPersonPickerOpen(false);
-            }
-          }
-        }}
-      >
-        <SheetContent className="w-full sm:max-w-lg">
-          <SheetHeader>
-            <SheetTitle>{t('sheet.title')}</SheetTitle>
-            <SheetDescription>{t('sheet.description')}</SheetDescription>
-          </SheetHeader>
-
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(handleSubmit)}
-              className="mt-6 flex h-full flex-col gap-4"
-            >
-              <FormField
-                control={form.control}
-                name="personId"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel>{t('form.person')}</FormLabel>
-                    <Popover
-                      open={personPickerOpen}
-                      onOpenChange={setPersonPickerOpen}
-                    >
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            role="combobox"
-                            className={cn(
-                              'w-full justify-between',
-                              !field.value && 'text-muted-foreground'
-                            )}
-                          >
-                            <span className="truncate">
-                              {field.value
-                                ? selectedPersonName ||
-                                  `#${String(field.value)}`
-                                : t('form.personPlaceholder')}
-                            </span>
-                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent
-                        className="p-0"
-                        style={{ width: 'var(--radix-popover-trigger-width)' }}
-                        align="start"
-                      >
-                        <Command shouldFilter={false}>
-                          <CommandInput
-                            placeholder={t('form.personSearchPlaceholder')}
-                            value={personSearch}
-                            onValueChange={setPersonSearch}
-                          />
-                          <CommandList>
-                            <CommandEmpty>
-                              {isLoadingPersons
-                                ? t('form.personLoading')
-                                : t('form.personEmpty')}
-                            </CommandEmpty>
-                            <CommandGroup>
-                              {personOptions.map((option) => {
-                                const optionValue = String(option.id);
-                                const isSelected = field.value === optionValue;
-
-                                return (
-                                  <CommandItem
-                                    key={optionValue}
-                                    value={`${option.name} ${optionValue}`}
-                                    onSelect={() => {
-                                      field.onChange(optionValue);
-                                      setSelectedPersonLabel(option.name);
-                                      setPersonPickerOpen(false);
-                                    }}
-                                  >
-                                    <Check
-                                      className={cn(
-                                        'mr-2 h-4 w-4',
-                                        isSelected
-                                          ? 'opacity-100'
-                                          : 'opacity-0'
-                                      )}
-                                    />
-                                    <span className="truncate">
-                                      {option.name}
-                                    </span>
-                                  </CommandItem>
-                                );
-                              })}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="next_action_at"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('form.date')}</FormLabel>
-                    <FormControl>
-                      <Input type="datetime-local" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t('form.notes')}</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        {...field}
-                        value={field.value || ''}
-                        placeholder={t('form.notesPlaceholder')}
-                        rows={5}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <SheetFooter className="mt-auto border-t pt-4">
-                <Button
-                  type="submit"
-                  className="w-full"
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? (
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  ) : (
-                    <CalendarDays className="mr-2 h-4 w-4" />
-                  )}
-                  {t('sheet.submit')}
-                </Button>
-              </SheetFooter>
-            </form>
-          </Form>
-        </SheetContent>
-      </Sheet>
-    </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 {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  CalendarClock,
+  CalendarDays,
+  Check,
+  CheckCircle2,
+  ChevronsUpDown,
+  Clock3,
+  Loader2,
+  Plus,
+  RotateCw,
+  TriangleAlert,
+  User,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+type PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage?: number;
+  prev?: number | null;
+  next?: number | null;
+};
+
+type Person = {
+  id: number;
+  name: string;
+  status: 'active' | 'inactive';
+  owner_user?: {
+    id: number;
+    name: string;
+  } | null;
+  next_action_at?: string | null;
+  last_interaction_at?: string | null;
+};
+
+type PersonOption = {
+  id: number;
+  name: string;
+};
+
+type FollowupStatus = 'today' | 'upcoming' | 'overdue';
+
+type FollowupListItem = {
+  person: Person;
+  next_action_at: string;
+  last_interaction_at?: string | null;
+  status: FollowupStatus;
+};
+
+type FollowupStats = {
+  total: number;
+  today: number;
+  overdue: number;
+  upcoming: number;
+};
+
+function toInputDateTimeValue(value?: string | null) {
+  if (!value) {
+    return '';
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  const pad = (part: number) => String(part).padStart(2, '0');
+  const year = date.getFullYear();
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  const hour = pad(date.getHours());
+  const minute = pad(date.getMinutes());
+
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+}
+
+function getStatusBadgeClass(status: FollowupStatus) {
+  if (status === 'overdue') {
+    return 'border-red-500/25 bg-red-500/10 text-red-700';
+  }
+
+  if (status === 'today') {
+    return 'border-amber-500/25 bg-amber-500/10 text-amber-700';
+  }
+
+  return 'border-emerald-500/25 bg-emerald-500/10 text-emerald-700';
+}
+
+export default function CrmFollowupsPage() {
+  const t = useTranslations('contact.CrmFollowups');
+  const crmT = useTranslations('contact.CrmMenu');
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const scheduleSchema = useMemo(
+    () =>
+      z.object({
+        personId: z.string().min(1, t('form.personRequired')),
+        next_action_at: z.string().min(1, t('form.dateRequired')),
+        notes: z.string().optional(),
+      }),
+    [t]
+  );
+
+  type ScheduleFormValues = z.infer<typeof scheduleSchema>;
+
+  const form = useForm<ScheduleFormValues>({
+    resolver: zodResolver(scheduleSchema),
+    defaultValues: {
+      personId: '',
+      next_action_at: '',
+      notes: '',
+    },
+  });
+
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [personSearch, setPersonSearch] = useState('');
+  const [debouncedPersonSearch, setDebouncedPersonSearch] = useState('');
+  const [selectedPersonLabel, setSelectedPersonLabel] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [personPickerOpen, setPersonPickerOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedPersonSearch(personSearch.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [personSearch]);
+
+  const {
+    data: stats = {
+      total: 0,
+      today: 0,
+      overdue: 0,
+      upcoming: 0,
+    },
+    refetch: refetchStats,
+  } = useQuery<FollowupStats>({
+    queryKey: ['contact-followups-stats', debouncedSearch, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      if (debouncedSearch) {
+        params.set('search', debouncedSearch);
+      }
+
+      const queryString = params.toString();
+      const response = await request<FollowupStats>({
+        url: queryString
+          ? `/person/followups/stats?${queryString}`
+          : '/person/followups/stats',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        total: 0,
+        today: 0,
+        overdue: 0,
+        upcoming: 0,
+      },
+  });
+
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize: 12,
+      lastPage: 1,
+    },
+    isLoading,
+    refetch: refetchFollowups,
+  } = useQuery<PaginatedResult<FollowupListItem>>({
+    queryKey: [
+      'contact-followups',
+      page,
+      pageSize,
+      debouncedSearch,
+      statusFilter,
+      dateFrom,
+      dateTo,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (debouncedSearch) {
+        params.set('search', debouncedSearch);
+      }
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+      if (dateFrom) {
+        params.set('date_from', dateFrom);
+      }
+      if (dateTo) {
+        params.set('date_to', dateTo);
+      }
+
+      const response = await request<PaginatedResult<FollowupListItem>>({
+        url: `/person/followups?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 12,
+        lastPage: 1,
+      },
+  });
+
+  const { data: personOptions = [], isLoading: isLoadingPersons } = useQuery<
+    PersonOption[]
+  >({
+    queryKey: [
+      'contact-followup-person-options',
+      debouncedPersonSearch,
+      currentLocaleCode,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', '1');
+      params.set('pageSize', '20');
+      if (debouncedPersonSearch) {
+        params.set('search', debouncedPersonSearch);
+      }
+
+      const response = await request<PaginatedResult<PersonOption>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const totalPages = Math.max(
+    1,
+    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
+  );
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages);
+    }
+  }, [page, totalPages]);
+
+  const searchControls: SearchBarControl[] = [
+    {
+      id: 'followup-status',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value: string) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filters.statusPlaceholder'),
+      options: [
+        { value: 'all', label: t('filters.statusAll') },
+        { value: 'today', label: t('status.today') },
+        { value: 'upcoming', label: t('status.upcoming') },
+        { value: 'overdue', label: t('status.overdue') },
+      ],
+    },
+    {
+      id: 'followup-date-from',
+      type: 'date',
+      value: dateFrom,
+      onChange: (value: string) => {
+        setDateFrom(value);
+        setPage(1);
+      },
+      className: 'sm:w-[170px]',
+    },
+    {
+      id: 'followup-date-to',
+      type: 'date',
+      value: dateTo,
+      onChange: (value: string) => {
+        setDateTo(value);
+        setPage(1);
+      },
+      className: 'sm:w-[170px]',
+    },
+  ];
+
+  const openCreateSheet = () => {
+    setSelectedPersonLabel('');
+    setPersonSearch('');
+    setDebouncedPersonSearch('');
+    setPersonPickerOpen(false);
+    form.reset({
+      personId: '',
+      next_action_at: '',
+      notes: '',
+    });
+    setSheetOpen(true);
+  };
+
+  const openRescheduleSheet = (row: FollowupListItem) => {
+    setSelectedPersonLabel(row.person.name);
+    setPersonSearch(row.person.name);
+    setDebouncedPersonSearch(row.person.name);
+    setPersonPickerOpen(false);
+    form.reset({
+      personId: String(row.person.id),
+      next_action_at: toInputDateTimeValue(row.next_action_at),
+      notes: '',
+    });
+    setSheetOpen(true);
+  };
+
+  const handleSubmit = async (values: ScheduleFormValues) => {
+    const parsedPersonId = Number(values.personId);
+    const nextActionDate = new Date(values.next_action_at);
+
+    if (!Number.isFinite(parsedPersonId) || parsedPersonId <= 0) {
+      toast.error(t('errors.invalidPerson'));
+      return;
+    }
+
+    if (Number.isNaN(nextActionDate.getTime())) {
+      toast.error(t('errors.invalidDate'));
+      return;
+    }
+
+    try {
+      setIsSubmitting(true);
+      await request({
+        url: `/person/${parsedPersonId}/followup`,
+        method: 'POST',
+        data: {
+          next_action_at: nextActionDate.toISOString(),
+          notes: values.notes?.trim() || undefined,
+        },
+      });
+
+      toast.success(t('toasts.scheduleSuccess'));
+      setSheetOpen(false);
+      setPersonPickerOpen(false);
+      await Promise.all([refetchFollowups(), refetchStats()]);
+    } catch {
+      toast.error(t('toasts.scheduleError'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const selectedPersonName =
+    personOptions.find(
+      (option) => String(option.id) === String(form.watch('personId') || '')
+    )?.name ||
+    selectedPersonLabel ||
+    '';
+
+  const statsCards = [
+    {
+      key: 'total',
+      title: t('stats.total'),
+      value: stats.total,
+      icon: CalendarClock,
+      accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-sky-500/10 text-sky-700',
+    },
+    {
+      key: 'today',
+      title: t('stats.today'),
+      value: stats.today,
+      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: TriangleAlert,
+      accentClassName: 'from-red-500/20 via-rose-500/10 to-transparent',
+      iconContainerClassName: 'bg-red-500/10 text-red-700',
+    },
+    {
+      key: 'upcoming',
+      title: t('stats.upcoming'),
+      value: stats.upcoming,
+      icon: CheckCircle2,
+      accentClassName: 'from-emerald-500/20 via-green-500/10 to-transparent',
+      iconContainerClassName: 'bg-emerald-500/10 text-emerald-700',
+    },
+  ];
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: 'Home', href: '/' },
+          { label: crmT('breadcrumbs.crm'), href: '/contact/dashboard' },
+          { label: t('title') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: t('newFollowup'),
+            onClick: openCreateSheet,
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <div className="space-y-6">
+        <KpiCardsGrid items={statsCards} />
+
+        <SearchBar
+          searchQuery={searchInput}
+          onSearchChange={(value) => {
+            setSearchInput(value);
+            setPage(1);
+          }}
+          onSearch={() => {
+            setDebouncedSearch(searchInput.trim());
+            setPage(1);
+            void Promise.all([refetchFollowups(), refetchStats()]);
+          }}
+          placeholder={t('filters.searchPlaceholder')}
+          controls={searchControls}
+        />
+
+        {isLoading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 7 }).map((_, index) => (
+              <Skeleton key={index} className="h-12 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('newFollowup')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={openCreateSheet}
+          />
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.person')}</TableHead>
+                  <TableHead>{t('table.owner')}</TableHead>
+                  <TableHead>{t('table.nextAction')}</TableHead>
+                  <TableHead>{t('table.lastInteraction')}</TableHead>
+                  <TableHead>{t('table.status')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginate.data.map((row) => (
+                  <TableRow key={`${row.person.id}-${row.next_action_at}`}>
+                    <TableCell>
+                      <div className="min-w-[180px]">
+                        <div className="font-medium">{row.person.name}</div>
+                        <div className="text-xs text-muted-foreground">
+                          #{row.person.id}
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="inline-flex items-center gap-2 text-sm">
+                        <User className="h-3.5 w-3.5 text-muted-foreground" />
+                        <span>
+                          {row.person.owner_user?.name || t('unassigned')}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {formatDateTime(
+                        row.next_action_at,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {row.last_interaction_at
+                        ? formatDateTime(
+                            row.last_interaction_at,
+                            getSettingValue,
+                            currentLocaleCode
+                          )
+                        : '-'}
+                    </TableCell>
+                    <TableCell>
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'border',
+                          getStatusBadgeClass(row.status)
+                        )}
+                      >
+                        {t(`status.${row.status}`)}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        onClick={() => openRescheduleSheet(row)}
+                      >
+                        <RotateCw className="mr-2 h-3.5 w-3.5" />
+                        {t('reschedule')}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+
+        <div className="border-t p-4">
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={paginate.total}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+          />
+        </div>
+      </div>
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          if (!isSubmitting) {
+            setSheetOpen(open);
+            if (!open) {
+              setPersonPickerOpen(false);
+            }
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-lg">
+          <SheetHeader>
+            <SheetTitle>{t('sheet.title')}</SheetTitle>
+            <SheetDescription>{t('sheet.description')}</SheetDescription>
+          </SheetHeader>
+
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="mt-6 flex h-full flex-col gap-4"
+            >
+              <FormField
+                control={form.control}
+                name="personId"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>{t('form.person')}</FormLabel>
+                    <Popover
+                      open={personPickerOpen}
+                      onOpenChange={setPersonPickerOpen}
+                    >
+                      <PopoverTrigger asChild>
+                        <FormControl>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            role="combobox"
+                            className={cn(
+                              'w-full justify-between',
+                              !field.value && 'text-muted-foreground'
+                            )}
+                          >
+                            <span className="truncate">
+                              {field.value
+                                ? selectedPersonName ||
+                                  `#${String(field.value)}`
+                                : t('form.personPlaceholder')}
+                            </span>
+                            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                          </Button>
+                        </FormControl>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        className="p-0"
+                        style={{ width: 'var(--radix-popover-trigger-width)' }}
+                        align="start"
+                      >
+                        <Command shouldFilter={false}>
+                          <CommandInput
+                            placeholder={t('form.personSearchPlaceholder')}
+                            value={personSearch}
+                            onValueChange={setPersonSearch}
+                          />
+                          <CommandList>
+                            <CommandEmpty>
+                              {isLoadingPersons
+                                ? t('form.personLoading')
+                                : t('form.personEmpty')}
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {personOptions.map((option) => {
+                                const optionValue = String(option.id);
+                                const isSelected = field.value === optionValue;
+
+                                return (
+                                  <CommandItem
+                                    key={optionValue}
+                                    value={`${option.name} ${optionValue}`}
+                                    onSelect={() => {
+                                      field.onChange(optionValue);
+                                      setSelectedPersonLabel(option.name);
+                                      setPersonPickerOpen(false);
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        'mr-2 h-4 w-4',
+                                        isSelected
+                                          ? 'opacity-100'
+                                          : 'opacity-0'
+                                      )}
+                                    />
+                                    <span className="truncate">
+                                      {option.name}
+                                    </span>
+                                  </CommandItem>
+                                );
+                              })}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="next_action_at"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.date')}</FormLabel>
+                    <FormControl>
+                      <Input type="datetime-local" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="notes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.notes')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        value={field.value || ''}
+                        placeholder={t('form.notesPlaceholder')}
+                        rows={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <SheetFooter className="mt-auto border-t pt-4">
+                <Button
+                  type="submit"
+                  className="w-full"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <CalendarDays className="mr-2 h-4 w-4" />
+                  )}
+                  {t('sheet.submit')}
+                </Button>
+              </SheetFooter>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+    </Page>
+  );
+}