@hed-hog/contact 0.0.279 → 0.0.286

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

@@ -1,15 +1,696 @@
-'use client';
-
-import { CrmComingSoon } from '../_components/crm-coming-soon';
-import { CalendarClock } from 'lucide-react';
-
-export default function CrmFollowupsPage() {
-  return (
-    <CrmComingSoon
-      currentHref="/contact/follow-ups"
-      titleKey="followups"
-      descriptionKey="followups"
-      icon={CalendarClock}
-    />
-  );
-}
+'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 {
+  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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+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,
+  CheckCircle2,
+  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;
+};
+
+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 FollowupStatus = 'today' | 'upcoming' | 'overdue';
+
+type FollowupRow = {
+  person: Person;
+  nextActionAt: string;
+  status: FollowupStatus;
+};
+
+const SOURCE_PAGE_SIZE = 500;
+
+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 startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function getFollowupStatus(nextActionAt: string): FollowupStatus {
+  const target = new Date(nextActionAt);
+  const now = new Date();
+  const todayStart = startOfDay(now);
+  const tomorrowStart = new Date(todayStart);
+  tomorrowStart.setDate(tomorrowStart.getDate() + 1);
+
+  if (target < todayStart) {
+    return 'overdue';
+  }
+
+  if (target >= todayStart && target < tomorrowStart) {
+    return 'today';
+  }
+
+  return 'upcoming';
+}
+
+function isValidDateString(value?: string | null) {
+  if (!value) {
+    return false;
+  }
+
+  const date = new Date(value);
+  return !Number.isNaN(date.getTime());
+}
+
+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 [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 [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  const {
+    data: source = { data: [], total: 0, page: 1, pageSize: SOURCE_PAGE_SIZE },
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResult<Person>>({
+    queryKey: ['contact-followups-source', debouncedSearch, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', '1');
+      params.set('pageSize', String(SOURCE_PAGE_SIZE));
+      if (debouncedSearch) {
+        params.set('search', debouncedSearch);
+      }
+
+      const response = await request<PaginatedResult<Person>>({
+        url: `/person?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+    placeholderData: (previous) =>
+      previous ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: SOURCE_PAGE_SIZE,
+      },
+  });
+
+  const allFollowups = useMemo<FollowupRow[]>(() => {
+    return (source.data || [])
+      .filter((person) => isValidDateString(person.next_action_at))
+      .map((person) => {
+        const nextActionAt = String(person.next_action_at);
+
+        return {
+          person,
+          nextActionAt,
+          status: getFollowupStatus(nextActionAt),
+        };
+      })
+      .sort(
+        (a, b) =>
+          new Date(a.nextActionAt).getTime() -
+          new Date(b.nextActionAt).getTime()
+      );
+  }, [source.data]);
+
+  const filteredFollowups = useMemo(() => {
+    return allFollowups.filter((item) => {
+      if (statusFilter !== 'all' && item.status !== statusFilter) {
+        return false;
+      }
+
+      const targetDate = new Date(item.nextActionAt);
+
+      if (dateFrom) {
+        const min = startOfDay(new Date(`${dateFrom}T00:00:00`));
+        if (targetDate < min) {
+          return false;
+        }
+      }
+
+      if (dateTo) {
+        const max = startOfDay(new Date(`${dateTo}T00:00:00`));
+        max.setDate(max.getDate() + 1);
+        if (targetDate >= max) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [allFollowups, statusFilter, dateFrom, dateTo]);
+
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredFollowups.length / pageSize)
+  );
+
+  useEffect(() => {
+    if (page > totalPages) {
+      setPage(totalPages);
+    }
+  }, [page, totalPages]);
+
+  const pageData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    const end = start + pageSize;
+
+    return filteredFollowups.slice(start, end);
+  }, [filteredFollowups, page, pageSize]);
+
+  const stats = useMemo(() => {
+    const total = allFollowups.length;
+    const today = allFollowups.filter((item) => item.status === 'today').length;
+    const overdue = allFollowups.filter(
+      (item) => item.status === 'overdue'
+    ).length;
+    const upcoming = allFollowups.filter(
+      (item) => item.status === 'upcoming'
+    ).length;
+
+    return {
+      total,
+      today,
+      overdue,
+      upcoming,
+    };
+  }, [allFollowups]);
+
+  const personOptions = useMemo(
+    () =>
+      source.data.map((person) => ({
+        value: String(person.id),
+        label: person.name,
+      })),
+    [source.data]
+  );
+
+  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 = () => {
+    form.reset({
+      personId: '',
+      next_action_at: '',
+      notes: '',
+    });
+    setSheetOpen(true);
+  };
+
+  const openRescheduleSheet = (row: FollowupRow) => {
+    form.reset({
+      personId: String(row.person.id),
+      next_action_at: toInputDateTimeValue(row.nextActionAt),
+      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);
+      await refetch();
+    } catch {
+      toast.error(t('toasts.scheduleError'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  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={() => {
+            setPage(1);
+            void refetch();
+          }}
+          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>
+        ) : pageData.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>
+                {pageData.map((row) => (
+                  <TableRow key={row.person.id}>
+                    <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.nextActionAt,
+                        getSettingValue,
+                        currentLocaleCode
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {row.person.last_interaction_at
+                        ? formatDateTime(
+                            row.person.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={filteredFollowups.length}
+            onPageChange={setPage}
+            onPageSizeChange={(nextPageSize) => {
+              setPageSize(nextPageSize);
+              setPage(1);
+            }}
+          />
+        </div>
+      </div>
+
+      <Sheet
+        open={sheetOpen}
+        onOpenChange={(open) => {
+          if (!isSubmitting) {
+            setSheetOpen(open);
+          }
+        }}
+      >
+        <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>
+                    <FormLabel>{t('form.person')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue
+                            placeholder={t('form.personPlaceholder')}
+                          />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {personOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <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>
+  );
+}