@hed-hog/operations 0.0.330 → 0.0.332

package/hedhog/frontend/app/my-projects/page.tsx.ejs

@@ -19,15 +19,16 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
   CalendarDays,
+  CheckCircle2,
   Eye,
   FolderKanban,
   LayoutGrid,
   List,
   PlayCircle,
-  ShieldAlert,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
@@ -48,6 +49,12 @@ function getPersonAvatarUrl(avatarId?: number | null): string {
     : '/placeholder.png';
 }
 
+function getUserPhotoUrl(photoId?: number | null): string {
+  return typeof photoId === 'number' && photoId > 0
+    ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/avatar/${photoId}`
+    : '/placeholder.png';
+}
+
 function getInitials(value?: string | null): string {
   if (!value) return '?';
   return value
@@ -73,7 +80,11 @@ export default function OperationsMyProjectsPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-my-projects:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
     if (typeof window === 'undefined') {
       return 'table';
@@ -141,13 +152,13 @@ export default function OperationsMyProjectsPage() {
         iconContainerClassName: 'bg-green-50 text-green-600',
       },
       {
-        key: 'atRisk',
-        title: t('cards.atRisk'),
-        description: t('cards.atRiskDescription'),
-        value: projects.filter((item) => item.status === 'at_risk').length,
-        icon: ShieldAlert,
-        accentClassName: 'from-amber-500/20 via-orange-500/10 to-transparent',
-        iconContainerClassName: 'bg-amber-50 text-amber-600',
+        key: 'completed',
+        title: t('cards.completed'),
+        description: t('cards.completedDescription'),
+        value: projects.filter((item) => item.status === 'completed').length,
+        icon: CheckCircle2,
+        accentClassName: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+        iconContainerClassName: 'bg-sky-50 text-sky-600',
       },
       {
         key: 'upcomingDeliveries',
@@ -210,7 +221,6 @@ export default function OperationsMyProjectsPage() {
                   { value: 'all', label: commonT('filters.allStatuses') },
                   { value: 'planning', label: tProjectStatus('planning') },
                   { value: 'active', label: tProjectStatus('active') },
-                  { value: 'at_risk', label: tProjectStatus('at_risk') },
                   { value: 'paused', label: tProjectStatus('paused') },
                   { value: 'completed', label: tProjectStatus('completed') },
                   { value: 'archived', label: tProjectStatus('archived') },
@@ -289,7 +299,11 @@ export default function OperationsMyProjectsPage() {
                       </span>
                       <Avatar className="h-5 w-5 shrink-0">
                         <AvatarImage
-                          src={getPersonAvatarUrl(project.clientAvatarId)}
+                          src={
+                            project.clientUserPhotoId
+                              ? getUserPhotoUrl(project.clientUserPhotoId)
+                              : getPersonAvatarUrl(project.clientAvatarId)
+                          }
                           alt={project.clientName ?? ''}
                         />
                         <AvatarFallback className="text-[9px] font-medium">
@@ -398,7 +412,11 @@ export default function OperationsMyProjectsPage() {
                       <div className="flex min-w-0 items-center gap-1.5">
                         <Avatar className="h-6 w-6 shrink-0">
                           <AvatarImage
-                            src={getPersonAvatarUrl(project.clientAvatarId)}
+                            src={
+                              project.clientUserPhotoId
+                                ? getUserPhotoUrl(project.clientUserPhotoId)
+                                : getPersonAvatarUrl(project.clientAvatarId)
+                            }
                             alt={project.clientName ?? ''}
                           />
                           <AvatarFallback className="text-[9px] font-medium">