@hed-hog/contact 0.0.301 → 0.0.303

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

@@ -10,6 +10,7 @@ import {
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
 import {
   Command,
   CommandEmpty,
@@ -51,6 +52,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { formatDateTime } from '@/lib/format-date';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -62,6 +64,8 @@ import {
   CheckCircle2,
   ChevronsUpDown,
   Clock3,
+  LayoutGrid,
+  List,
   Loader2,
   Plus,
   RotateCw,
@@ -117,6 +121,10 @@ type FollowupStats = {
   upcoming: number;
 };
 
+type FollowupViewMode = 'table' | 'cards';
+
+const FOLLOWUPS_VIEW_STORAGE_KEY = 'contact-followups-view-mode';
+
 function toInputDateTimeValue(value?: string | null) {
   if (!value) {
     return '';
@@ -185,6 +193,7 @@ export default function CrmFollowupsPage() {
   const [dateTo, setDateTo] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(12);
+  const [viewMode, setViewMode] = useState<FollowupViewMode>('table');
   const [sheetOpen, setSheetOpen] = useState(false);
   const [personPickerOpen, setPersonPickerOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -205,6 +214,19 @@ export default function CrmFollowupsPage() {
     return () => clearTimeout(timeout);
   }, [personSearch]);
 
+  useEffect(() => {
+    try {
+      const savedViewMode = window.localStorage.getItem(
+        FOLLOWUPS_VIEW_STORAGE_KEY
+      );
+      if (savedViewMode === 'table' || savedViewMode === 'cards') {
+        setViewMode(savedViewMode);
+      }
+    } catch {
+      // Ignore storage read failures.
+    }
+  }, []);
+
   const {
     data: stats = {
       total: 0,
@@ -475,6 +497,19 @@ export default function CrmFollowupsPage() {
     },
   ];
 
+  const handleViewModeChange = (value: string) => {
+    if (value !== 'table' && value !== 'cards') {
+      return;
+    }
+
+    setViewMode(value);
+    try {
+      window.localStorage.setItem(FOLLOWUPS_VIEW_STORAGE_KEY, value);
+    } catch {
+      // Ignore storage write failures.
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -495,22 +530,59 @@ export default function CrmFollowupsPage() {
       />
 
       <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}
-        />
+        <KpiCardsGrid items={statsCards} className="mb-4" />
+
+        <div className="flex flex-col gap-4 xl:flex-row xl:items-center mb-4">
+          <div className="flex-1">
+            <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}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+            <div className="flex items-center justify-between gap-3 sm:justify-start">
+              <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="cards"
+                  className="gap-1.5 px-2.5"
+                  aria-label={t('viewModeCards')}
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                  <span className="hidden sm:inline">{t('viewModeCards')}</span>
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </div>
+          </div>
+        </div>
 
         {isLoading ? (
           <div className="space-y-2">
@@ -527,7 +599,7 @@ export default function CrmFollowupsPage() {
             actionIcon={<Plus className="mr-2 h-4 w-4" />}
             onAction={openCreateSheet}
           />
-        ) : (
+        ) : viewMode === 'table' ? (
           <div className="overflow-x-auto rounded-md border">
             <Table>
               <TableHeader>
@@ -546,7 +618,7 @@ export default function CrmFollowupsPage() {
                 {paginate.data.map((row) => (
                   <TableRow key={`${row.person.id}-${row.next_action_at}`}>
                     <TableCell>
-                      <div className="min-w-[180px]">
+                      <div className="min-w-45">
                         <div className="font-medium">{row.person.name}</div>
                         <div className="text-xs text-muted-foreground">
                           #{row.person.id}
@@ -604,6 +676,86 @@ export default function CrmFollowupsPage() {
               </TableBody>
             </Table>
           </div>
+        ) : (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {paginate.data.map((row) => (
+              <Card
+                key={`${row.person.id}-${row.next_action_at}`}
+                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">
+                      <p className="line-clamp-2 text-sm font-semibold text-foreground">
+                        {row.person.name}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        #{row.person.id}
+                      </p>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'shrink-0 border',
+                        getStatusBadgeClass(row.status)
+                      )}
+                    >
+                      {t(`status.${row.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('table.owner')}
+                      </span>
+                      <span className="truncate font-medium text-foreground">
+                        {row.person.owner_user?.name || t('unassigned')}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-muted-foreground">
+                        {t('table.nextAction')}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {formatDateTime(
+                          row.next_action_at,
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-muted-foreground">
+                        {t('table.lastInteraction')}
+                      </span>
+                      <span className="font-medium text-foreground">
+                        {row.last_interaction_at
+                          ? formatDateTime(
+                              row.last_interaction_at,
+                              getSettingValue,
+                              currentLocaleCode
+                            )
+                          : '-'}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      onClick={() => openRescheduleSheet(row)}
+                    >
+                      <RotateCw className="mr-2 h-3.5 w-3.5" />
+                      {t('reschedule')}
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
         )}
 
         <div className="border-t p-4">
@@ -640,7 +792,7 @@ export default function CrmFollowupsPage() {
           <Form {...form}>
             <form
               onSubmit={form.handleSubmit(handleSubmit)}
-              className="mt-6 flex h-full flex-col gap-4"
+              className="mt-6 flex h-full flex-col gap-4 px-4"
             >
               <FormField
                 control={form.control}
@@ -708,9 +860,7 @@ export default function CrmFollowupsPage() {
                                     <Check
                                       className={cn(
                                         'mr-2 h-4 w-4',
-                                        isSelected
-                                          ? 'opacity-100'
-                                          : 'opacity-0'
+                                        isSelected ? 'opacity-100' : 'opacity-0'
                                       )}
                                     />
                                     <span className="truncate">

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

@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation';
 
 export default function ContactPage() {
-  redirect('/contact/dashboard');
+  redirect('/contact/person');
 }

package/hedhog/frontend/app/person/_components/person-form-sheet.tsx.ejs

@@ -1421,7 +1421,7 @@ export function PersonFormSheet({
   return (
     <>
       <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-        <SheetContent className="flex h-full w-full max-w-full flex-col overflow-hidden p-0 lg:max-w-4xl xl:max-w-5xl">
+        <SheetContent className="flex h-full w-full max-w-[95vw] flex-col overflow-hidden p-0 sm:max-w-3xl lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl">
           <SheetHeader className="shrink-0 border-b p-4">
             <div className="flex items-center gap-3">
               <div

package/hedhog/frontend/app/pipeline/_components/lead-detail-sheet.tsx.ejs

@@ -306,7 +306,7 @@ export function LeadDetailSheet({
 
   return (
     <Sheet open={open} onOpenChange={handleSheetOpenChange}>
-      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-lg">
+      <SheetContent className="flex h-full w-full max-w-[95vw] flex-col overflow-hidden p-0 sm:max-w-4xl xl:max-w-5xl">
         <SheetHeader className="shrink-0 border-b px-5 py-4 text-left">
           <div className="flex items-start gap-3 pr-6">
             <div className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-muted text-muted-foreground">