Añadir componente PersonAvatarGroup para mostrar avatares de personas en la sección de departamentos

modules/companies/src/web/departments/list/ui/department-section.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 
 import type { CompanyDTO } from "../../../../common";
 import { DepartmentEditorDialog } from "../../shared";
+import { PersonAvatarGroup } from "../../../people";
 
 export function DepartmentSection({
   company,
@@ -56,15 +57,13 @@ export function DepartmentSection({
               company.assignments.filter(
                 (entry) => entry.departmentId === item.id && entry.endDate === null
               ).length,
-            render: (item) => (
+            render: (item) => {
-              <>
+              const people = company.assignments
-                {
+                .filter((entry) => entry.departmentId === item.id && entry.endDate === null)
-                  company.assignments.filter(
+                .map((entry) => company.people.find((person) => person.id === entry.personId))
-                    (entry) => entry.departmentId === item.id && entry.endDate === null
+                .filter((person): person is CompanyDTO["people"][number] => Boolean(person));
-                  ).length
+              return <PersonAvatarGroup companyId={company.id} people={people} peopleLabel={t("people")} />;
-                }
+            },
-              </>
-            ),
           },
           {
             id: "actions",

modules/companies/src/web/people/index.ts

@@ -1,2 +1,2 @@
 export { PeopleSection } from "./list";
-export { PersonEditorDialog, PersonForm } from "./shared";
+export { PersonEditorDialog, PersonForm, PersonAvatarGroup } from "./shared";

modules/companies/src/web/people/shared/index.ts

@@ -1 +1 @@
-export { PersonEditorDialog, PersonForm, PersonAvatar } from "./ui";
+export { PersonEditorDialog, PersonForm, PersonAvatar, PersonAvatarGroup } from "./ui";

modules/companies/src/web/people/shared/ui/index.ts

@@ -1,4 +1,4 @@
 export { PersonEditorDialog } from "./person-editor-dialog";
 export { PersonForm } from "./person-form";
 
-export { PersonAvatar } from "./person-avatar";
+export { PersonAvatar, PersonAvatarGroup } from "./person-avatar";

modules/companies/src/web/people/shared/ui/person-avatar.tsx

@@ -4,3 +4,17 @@ export function PersonAvatar({ companyId, personId, photoVersion, name, classNam
  const src = photoVersion ? `/api/companies/${companyId}/people/${personId}/photo?version=${photoVersion}` : undefined;
  return <Avatar className={className}><AvatarImage src={src} alt="" /><AvatarFallback>{initials}</AvatarFallback></Avatar>;
 }
+
+export function PersonAvatarGroup({ companyId, people, max = 3, peopleLabel = "Personas" }: { companyId: string; people: readonly { id: string; name: string; photoVersion?: string | null | undefined }[]; max?: number; peopleLabel?: string }) {
+ const visible = people.slice(0, max);
+ const remaining = people.length - visible.length;
+ if (!people.length) return <span className="text-muted-foreground">—</span>;
+ return (
+  <div className="flex items-center" aria-label={`${people.length} ${peopleLabel}`}>
+   <div className="flex -space-x-2">
+    {visible.map((person) => <PersonAvatar key={person.id} companyId={companyId} personId={person.id} photoVersion={person.photoVersion} name={person.name} className="size-8 border-2 border-background" />)}
+   </div>
+   {remaining > 0 && <span className="ml-2 inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">+{remaining}</span>}
+  </div>
+ );
+}