@hed-hog/contact 0.0.279 → 0.0.286

package/hedhog/frontend/app/person/_components/person-interaction-dialog.tsx.ejs

@@ -119,9 +119,10 @@ export function PersonInteractionDialog({
     try {
       setIsSubmitting(true);
       await request({
-        url: `/person/${person.id}`,
-        method: 'PATCH',
-        data: { next_action_at: values.next_action_at },
+        url: `/person/${person.id}/followup`,
+        method: 'POST',
+        data: values,
+        showErrors: false,
       });
       toast.success(t('followupSuccess'));
       onOpenChange(false);

package/hedhog/frontend/app/person/_components/person-types.ts.ejs

@@ -128,6 +128,11 @@ export type Person = {
   source?: PersonSource | null;
   lifecycle_stage?: PersonLifecycleStage | null;
   next_action_at?: string | null;
+  score?: number | null;
+  deal_value?: number | null;
+  tags?: string[] | null;
+  last_interaction_at?: string | null;
+  interaction_count?: number | null;
   employer_company_id?: number | null;
   employer_company?: PersonRelationSummary | null;
   created_at: string;
@@ -136,6 +141,15 @@ export type Person = {
   document?: PersonDocument[];
 };
 
+export type PersonInteraction = {
+  id: number;
+  type: PersonInteractionType;
+  notes?: string | null;
+  created_at: string;
+  user_id?: number | null;
+  user_name?: string | null;
+};
+
 export type ContactTypeOption = {
   id: number;
   code: string;

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

@@ -1,8 +1,14 @@
 'use client';
 
-import { CrmNav } from '../_components/crm-nav';
 import { CopyButton } from '@/components/copy-button';
-import { Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+  type SearchBarControl,
+} from '@/components/entity-list';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -14,14 +20,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -48,10 +47,6 @@ import {
   Building2,
   CalendarDays,
   CheckCircle2,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
   FileText,
   LayoutGrid,
   List,
@@ -61,7 +56,6 @@ import {
   Pencil,
   Phone,
   Plus,
-  Search,
   Trash2,
   User,
   UserCheck,
@@ -718,6 +712,78 @@ export default function PeoplePage() {
 
   const peopleRows = table.getRowModel().rows;
 
+  const statsCards = [
+    {
+      key: 'total',
+      title: t('statsTotal'),
+      value: stats.total,
+      icon: Users,
+      accentClassName: 'from-slate-500/20 via-slate-400/10 to-transparent',
+      iconContainerClassName: 'bg-slate-100 text-slate-700',
+    },
+    {
+      key: 'active',
+      title: t('statsActive'),
+      value: stats.active,
+      icon: CheckCircle2,
+      accentClassName: 'from-green-500/20 via-emerald-500/10 to-transparent',
+      iconContainerClassName: 'bg-green-50 text-green-600',
+    },
+    {
+      key: 'individual',
+      title: t('statsIndividual'),
+      value: stats.individual,
+      icon: UserCheck,
+      accentClassName: 'from-blue-500/20 via-cyan-500/10 to-transparent',
+      iconContainerClassName: 'bg-blue-50 text-blue-600',
+    },
+    {
+      key: 'company',
+      title: t('statsCompany'),
+      value: stats.company,
+      icon: Building2,
+      accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
+      iconContainerClassName: 'bg-amber-50 text-amber-600',
+    },
+  ];
+
+  const searchControls: SearchBarControl[] = [
+    ...(allowCompanyRegistration
+      ? [
+          {
+            id: 'type-filter',
+            type: 'select' as const,
+            value: typeFilter,
+            onChange: (value: string) => {
+              setTypeFilter(value);
+              setPage(1);
+            },
+            placeholder: t('filterByType'),
+            options: [
+              { value: 'all', label: t('allTypes') },
+              { value: 'individual', label: t('individual') },
+              { value: 'company', label: t('company') },
+            ],
+          },
+        ]
+      : []),
+    {
+      id: 'status-filter',
+      type: 'select',
+      value: statusFilter,
+      onChange: (value: string) => {
+        setStatusFilter(value);
+        setPage(1);
+      },
+      placeholder: t('filterByStatus'),
+      options: [
+        { value: 'all', label: t('allStatuses') },
+        { value: 'active', label: t('active') },
+        { value: 'inactive', label: t('inactive') },
+      ],
+    },
+  ];
+
   return (
     <Page>
       <PageHeader
@@ -745,104 +811,26 @@ export default function PeoplePage() {
         ]}
       />
 
-      <CrmNav currentHref="/contact/person" />
-
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        <Card className="py-0">
-          <CardContent className="flex items-center justify-between p-4">
-            <div>
-              <p className="text-xs text-muted-foreground">{t('statsTotal')}</p>
-              <p className="text-xl font-semibold">{stats.total}</p>
-            </div>
-            <Users className="h-5 w-5 text-muted-foreground" />
-          </CardContent>
-        </Card>
-        <Card className="py-0">
-          <CardContent className="flex items-center justify-between p-4">
-            <div>
-              <p className="text-xs text-muted-foreground">
-                {t('statsActive')}
-              </p>
-              <p className="text-xl font-semibold">{stats.active}</p>
-            </div>
-            <CheckCircle2 className="h-5 w-5 text-green-600" />
-          </CardContent>
-        </Card>
-        <Card className="py-0">
-          <CardContent className="flex items-center justify-between p-4">
-            <div>
-              <p className="text-xs text-muted-foreground">
-                {t('statsIndividual')}
-              </p>
-              <p className="text-xl font-semibold">{stats.individual}</p>
-            </div>
-            <UserCheck className="h-5 w-5 text-blue-600" />
-          </CardContent>
-        </Card>
-        <Card className="py-0">
-          <CardContent className="flex items-center justify-between p-4">
-            <div>
-              <p className="text-xs text-muted-foreground">
-                {t('statsCompany')}
-              </p>
-              <p className="text-xl font-semibold">{stats.company}</p>
-            </div>
-            <Building2 className="h-5 w-5 text-amber-600" />
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={statsCards} />
 
       <div className="flex flex-col gap-4 xl:flex-row xl:items-center">
-        <div className="relative flex-1">
-          <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={searchInput}
-            onChange={(event) => {
-              setSearchInput(event.target.value);
+        <div className="flex-1">
+          <SearchBar
+            searchQuery={searchInput}
+            onSearchChange={(value) => {
+              setSearchInput(value);
               setPage(1);
             }}
+            onSearch={() => {
+              setPage(1);
+              void refetch();
+            }}
             placeholder={t('searchByNamePlaceholder')}
-            className="pl-9"
+            controls={searchControls}
           />
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
-          {allowCompanyRegistration ? (
-            <Select
-              value={typeFilter}
-              onValueChange={(value) => {
-                setTypeFilter(value);
-                setPage(1);
-              }}
-            >
-              <SelectTrigger className="w-full sm:w-44">
-                <SelectValue placeholder={t('filterByType')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t('allTypes')}</SelectItem>
-                <SelectItem value="individual">{t('individual')}</SelectItem>
-                <SelectItem value="company">{t('company')}</SelectItem>
-              </SelectContent>
-            </Select>
-          ) : null}
-
-          <Select
-            value={statusFilter}
-            onValueChange={(value) => {
-              setStatusFilter(value);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-full sm:w-36">
-              <SelectValue placeholder={t('filterByStatus')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('allStatuses')}</SelectItem>
-              <SelectItem value="active">{t('active')}</SelectItem>
-              <SelectItem value="inactive">{t('inactive')}</SelectItem>
-            </SelectContent>
-          </Select>
-
           <div className="flex items-center justify-between gap-3 sm:justify-start">
             <span className="text-xs font-medium text-muted-foreground">
               {t('viewMode')}
@@ -908,17 +896,14 @@ export default function PeoplePage() {
           </div>
         )
       ) : paginate.data.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <Users className="mb-4 h-12 w-12 text-muted-foreground/50" />
-          <h3 className="text-lg font-medium">{t('emptyStateTitle')}</h3>
-          <p className="mb-4 max-w-sm text-sm text-muted-foreground">
-            {t('emptyStateDescription')}
-          </p>
-          <Button onClick={openCreateSheet}>
-            <Plus className="mr-2 h-4 w-4" />
-            {t('newPerson')}
-          </Button>
-        </div>
+        <EmptyState
+          icon={<Users className="h-12 w-12" />}
+          title={t('emptyStateTitle')}
+          description={t('emptyStateDescription')}
+          actionLabel={t('newPerson')}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={openCreateSheet}
+        />
       ) : (
         <>
           {viewMode === 'table' ? (
@@ -1230,81 +1215,18 @@ export default function PeoplePage() {
             </div>
           )}
 
-          <div className="flex flex-col gap-4 border-t p-4 lg:flex-row lg:items-center lg:justify-between">
-            <div className="text-sm text-muted-foreground">
-              {t('resultsCount', { count: paginate.total })}
-            </div>
-
-            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-muted-foreground">
-                  {t('rowsPerPage')}
-                </span>
-                <Select
-                  value={String(pageSize)}
-                  onValueChange={(value) => {
-                    setPageSize(Number(value));
-                    setPage(1);
-                  }}
-                >
-                  <SelectTrigger className="w-20">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {[12, 20, 30, 40, 50].map((size) => (
-                      <SelectItem key={size} value={String(size)}>
-                        {size}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setPage(1)}
-                  disabled={page <= 1}
-                >
-                  <ChevronsLeft className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() =>
-                    setPage((previous) => Math.max(1, previous - 1))
-                  }
-                  disabled={page <= 1}
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="min-w-32 text-center text-sm">
-                  {t('paginationLabel', {
-                    current: page,
-                    total: pageCount,
-                  })}
-                </span>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() =>
-                    setPage((previous) => Math.min(pageCount, previous + 1))
-                  }
-                  disabled={page >= pageCount}
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  onClick={() => setPage(pageCount)}
-                  disabled={page >= pageCount}
-                >
-                  <ChevronsRight className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
+          <div className="border-t p-4">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={pageSize}
+              totalItems={paginate.total}
+              onPageChange={setPage}
+              onPageSizeChange={(nextPageSize) => {
+                setPageSize(nextPageSize);
+                setPage(1);
+              }}
+              pageSizeOptions={[12, 20, 30, 40, 50]}
+            />
           </div>
         </>
       )}