@hed-hog/contact 0.0.293 → 0.0.295

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

@@ -10,6 +10,14 @@ import {
 } 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,
@@ -21,12 +29,10 @@ import {
 import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
 import {
   Sheet,
   SheetContent,
@@ -52,7 +58,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   CalendarClock,
   CalendarDays,
+  Check,
   CheckCircle2,
+  ChevronsUpDown,
   Clock3,
   Loader2,
   Plus,
@@ -71,6 +79,9 @@ type PaginatedResult<T> = {
   total: number;
   page: number;
   pageSize: number;
+  lastPage?: number;
+  prev?: number | null;
+  next?: number | null;
 };
 
 type Person = {
@@ -85,15 +96,26 @@ type Person = {
   last_interaction_at?: string | null;
 };
 
+type PersonOption = {
+  id: number;
+  name: string;
+};
+
 type FollowupStatus = 'today' | 'upcoming' | 'overdue';
 
-type FollowupRow = {
+type FollowupListItem = {
   person: Person;
-  nextActionAt: string;
+  next_action_at: string;
+  last_interaction_at?: string | null;
   status: FollowupStatus;
 };
 
-const SOURCE_PAGE_SIZE = 500;
+type FollowupStats = {
+  total: number;
+  today: number;
+  overdue: number;
+  upcoming: number;
+};
 
 function toInputDateTimeValue(value?: string | null) {
   if (!value) {
@@ -115,37 +137,6 @@ function toInputDateTimeValue(value?: string | null) {
   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';
@@ -186,12 +177,16 @@ export default function CrmFollowupsPage() {
 
   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(() => {
@@ -202,22 +197,35 @@ export default function CrmFollowupsPage() {
     return () => clearTimeout(timeout);
   }, [searchInput]);
 
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedPersonSearch(personSearch.trim());
+    }, 300);
+
+    return () => clearTimeout(timeout);
+  }, [personSearch]);
+
   const {
-    data: source = { data: [], total: 0, page: 1, pageSize: SOURCE_PAGE_SIZE },
-    isLoading,
-    refetch,
-  } = useQuery<PaginatedResult<Person>>({
-    queryKey: ['contact-followups-source', debouncedSearch, currentLocaleCode],
+    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();
-      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()}`,
+      const queryString = params.toString();
+      const response = await request<FollowupStats>({
+        url: queryString
+          ? `/person/followups/stats?${queryString}`
+          : '/person/followups/stats',
         method: 'GET',
       });
 
@@ -225,62 +233,97 @@ export default function CrmFollowupsPage() {
     },
     placeholderData: (previous) =>
       previous ?? {
-        data: [],
         total: 0,
-        page: 1,
-        pageSize: SOURCE_PAGE_SIZE,
+        today: 0,
+        overdue: 0,
+        upcoming: 0,
       },
   });
 
-  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 {
+    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);
       }
-
-      const targetDate = new Date(item.nextActionAt);
-
       if (dateFrom) {
-        const min = startOfDay(new Date(`${dateFrom}T00:00:00`));
-        if (targetDate < min) {
-          return false;
-        }
+        params.set('date_from', dateFrom);
       }
-
       if (dateTo) {
-        const max = startOfDay(new Date(`${dateTo}T00:00:00`));
-        max.setDate(max.getDate() + 1);
-        if (targetDate >= max) {
-          return false;
-        }
+        params.set('date_to', dateTo);
       }
 
-      return true;
-    });
-  }, [allFollowups, statusFilter, dateFrom, 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,
-    Math.ceil(filteredFollowups.length / pageSize)
+    paginate.lastPage ?? (Math.ceil((paginate.total || 0) / pageSize) || 1)
   );
 
   useEffect(() => {
@@ -289,40 +332,6 @@ export default function CrmFollowupsPage() {
     }
   }, [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',
@@ -363,6 +372,10 @@ export default function CrmFollowupsPage() {
   ];
 
   const openCreateSheet = () => {
+    setSelectedPersonLabel('');
+    setPersonSearch('');
+    setDebouncedPersonSearch('');
+    setPersonPickerOpen(false);
     form.reset({
       personId: '',
       next_action_at: '',
@@ -371,10 +384,14 @@ export default function CrmFollowupsPage() {
     setSheetOpen(true);
   };
 
-  const openRescheduleSheet = (row: FollowupRow) => {
+  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.nextActionAt),
+      next_action_at: toInputDateTimeValue(row.next_action_at),
       notes: '',
     });
     setSheetOpen(true);
@@ -407,7 +424,8 @@ export default function CrmFollowupsPage() {
 
       toast.success(t('toasts.scheduleSuccess'));
       setSheetOpen(false);
-      await refetch();
+      setPersonPickerOpen(false);
+      await Promise.all([refetchFollowups(), refetchStats()]);
     } catch {
       toast.error(t('toasts.scheduleError'));
     } finally {
@@ -415,6 +433,13 @@ export default function CrmFollowupsPage() {
     }
   };
 
+  const selectedPersonName =
+    personOptions.find(
+      (option) => String(option.id) === String(form.watch('personId') || '')
+    )?.name ||
+    selectedPersonLabel ||
+    '';
+
   const statsCards = [
     {
       key: 'total',
@@ -479,8 +504,9 @@ export default function CrmFollowupsPage() {
             setPage(1);
           }}
           onSearch={() => {
+            setDebouncedSearch(searchInput.trim());
             setPage(1);
-            void refetch();
+            void Promise.all([refetchFollowups(), refetchStats()]);
           }}
           placeholder={t('filters.searchPlaceholder')}
           controls={searchControls}
@@ -492,7 +518,7 @@ export default function CrmFollowupsPage() {
               <Skeleton key={index} className="h-12 w-full" />
             ))}
           </div>
-        ) : pageData.length === 0 ? (
+        ) : paginate.data.length === 0 ? (
           <EmptyState
             icon={<CalendarClock className="h-12 w-12" />}
             title={t('empty.title')}
@@ -517,8 +543,8 @@ export default function CrmFollowupsPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {pageData.map((row) => (
-                  <TableRow key={row.person.id}>
+                {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>
@@ -537,15 +563,15 @@ export default function CrmFollowupsPage() {
                     </TableCell>
                     <TableCell>
                       {formatDateTime(
-                        row.nextActionAt,
+                        row.next_action_at,
                         getSettingValue,
                         currentLocaleCode
                       )}
                     </TableCell>
                     <TableCell>
-                      {row.person.last_interaction_at
+                      {row.last_interaction_at
                         ? formatDateTime(
-                            row.person.last_interaction_at,
+                            row.last_interaction_at,
                             getSettingValue,
                             currentLocaleCode
                           )
@@ -584,7 +610,7 @@ export default function CrmFollowupsPage() {
           <PaginationFooter
             currentPage={page}
             pageSize={pageSize}
-            totalItems={filteredFollowups.length}
+            totalItems={paginate.total}
             onPageChange={setPage}
             onPageSizeChange={(nextPageSize) => {
               setPageSize(nextPageSize);
@@ -599,6 +625,9 @@ export default function CrmFollowupsPage() {
         onOpenChange={(open) => {
           if (!isSubmitting) {
             setSheetOpen(open);
+            if (!open) {
+              setPersonPickerOpen(false);
+            }
           }
         }}
       >
@@ -617,24 +646,84 @@ export default function CrmFollowupsPage() {
                 control={form.control}
                 name="personId"
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="flex flex-col">
                     <FormLabel>{t('form.person')}</FormLabel>
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <FormControl>
-                        <SelectTrigger className="w-full">
-                          <SelectValue
-                            placeholder={t('form.personPlaceholder')}
+                    <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}
                           />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {personOptions.map((option) => (
-                          <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                          <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>
                 )}