@hed-hog/operations 0.0.319 → 0.0.322

package/hedhog/frontend/app/_components/collaborator-details-screen.tsx.ejs

@@ -66,39 +66,39 @@ export function CollaboratorDetailsScreen({
     createdAt: string;
   };
 
-  const { data: compensationHistory = [] } =
-    useQuery<CompensationHistoryEntry[]>({
-      queryKey: [
-        'operations-collaborator-compensation-history',
-        currentLocaleCode,
+  const { data: compensationHistory = [] } =
+    useQuery<CompensationHistoryEntry[]>({
+      queryKey: [
+        'operations-collaborator-compensation-history',
+        currentLocaleCode,
         collaboratorId,
       ],
       enabled: access.isDirector,
       queryFn: () =>
         fetchOperations<CompensationHistoryEntry[]>(
           request,
-          `/operations/collaborators/${collaboratorId}/compensation-history`
-        ),
-    });
-
-  if (!collaborator) {
-    return (
-      <Page>
-        <OperationsHeader
-          title={t('title')}
-          description={t('description')}
-          current={t('breadcrumb')}
-        />
-        <EmptyState
-          icon={<UserRound className="size-12" />}
+          `/operations/collaborators/${collaboratorId}/compensation-history`
+        ),
+    });
+
+  if (!collaborator) {
+    return (
+      <Page>
+        <OperationsHeader
+          title={t('title')}
+          description={t('description')}
+          current={t('breadcrumb')}
+        />
+        <EmptyState
+          icon={<UserRound className="size-12" />}
           title={commonT('states.emptyTitle')}
           description={t('notFound')}
           actionLabel={commonT('actions.refresh')}
           onAction={() => void refetch()}
-        />
-      </Page>
-    );
-  }
+        />
+      </Page>
+    );
+  }
 
   const summaryCards = [
     {

package/hedhog/frontend/app/_components/person-select-with-create.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
   Command,
@@ -49,6 +50,8 @@ import { z } from 'zod';
 type PersonOption = {
   id: number | string;
   name: string;
+  avatarId?: number | null;
+  avatar_id?: number | null;
 };
 
 type CreatePersonValues = {
@@ -661,7 +664,10 @@ export function PersonSelectWithCreate({
         }
 
         if (payload && 'data' in payload && Array.isArray(payload.data)) {
-          return payload.data as PersonOption[];
+          return payload.data.map((p) => ({
+            ...p,
+            avatarId: (p as any).avatar_id ?? p.avatarId ?? null,
+          })) as PersonOption[];
         }
 
         return [];
@@ -674,14 +680,12 @@ export function PersonSelectWithCreate({
       ? String(value)
       : '';
   const hasValue = normalizedValue.length > 0;
-  const displayLabel =
-    hasValue
-      ? (personOptionsData.find(
-          (person) => String(person.id) === normalizedValue
-        )?.name ??
-        selectedPersonLabel ??
-        `ID #${normalizedValue}`)
-      : selectedPersonLabel || selectPlaceholder;
+  const displayLabel = hasValue
+    ? (personOptionsData.find((person) => String(person.id) === normalizedValue)
+        ?.name ??
+      selectedPersonLabel ??
+      `ID #${normalizedValue}`)
+    : selectedPersonLabel || selectPlaceholder;
   const hasSelection = hasValue || Boolean(selectedPersonLabel);
 
   return (
@@ -747,19 +751,42 @@ export function PersonSelectWithCreate({
                     )}
                   </CommandEmpty>
                   <CommandGroup>
-                    {personOptionsData.map((person) => (
-                      <CommandItem
-                        key={String(person.id)}
-                        value={`${person.name}-${person.id}`}
-                        onSelect={() => {
-                          onChange(Number(person.id), person.name);
-                          setSelectedPersonLabel(person.name);
-                          setPersonOpen(false);
-                        }}
-                      >
-                        {person.name}
-                      </CommandItem>
-                    ))}
+                    {personOptionsData.map((person) => {
+                      const avatarId =
+                        person.avatarId ?? person.avatar_id ?? null;
+                      const avatarSrc =
+                        typeof avatarId === 'number' && avatarId > 0
+                          ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/person/avatar/${avatarId}`
+                          : undefined;
+                      const initials = person.name
+                        .trim()
+                        .split(' ')
+                        .filter(Boolean)
+                        .slice(0, 2)
+                        .map((w) => w[0]!.toUpperCase())
+                        .join('');
+                      return (
+                        <CommandItem
+                          key={String(person.id)}
+                          value={`${person.name}-${person.id}`}
+                          onSelect={() => {
+                            onChange(Number(person.id), person.name);
+                            setSelectedPersonLabel(person.name);
+                            setPersonOpen(false);
+                          }}
+                        >
+                          <Avatar className="mr-2 h-6 w-6 shrink-0">
+                            {avatarSrc ? (
+                              <AvatarImage src={avatarSrc} alt={person.name} />
+                            ) : null}
+                            <AvatarFallback className="text-[9px] font-medium">
+                              {initials}
+                            </AvatarFallback>
+                          </Avatar>
+                          {person.name}
+                        </CommandItem>
+                      );
+                    })}
                   </CommandGroup>
                 </CommandList>
               </Command>