From a622eacfe7c117d89cf0944547829080ed497a0a Mon Sep 17 00:00:00 2001
From: David <darranz@rodax-software.com>
Date: Fri, 9 Oct 2026 23:02:52 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20componente=20PersonAvatarGroup=20?=
 =?UTF-8?q?para=20mostrar=20avatares=20de=20personas=20en=20la=20secci?=
 =?UTF-8?q?=C3=B3n=20de=20departamentos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../departments/list/ui/department-section.tsx  | 17 ++++++++---------
 modules/companies/src/web/people/index.ts       |  2 +-
 .../companies/src/web/people/shared/index.ts    |  2 +-
 .../companies/src/web/people/shared/ui/index.ts |  2 +-
 .../src/web/people/shared/ui/person-avatar.tsx  | 14 ++++++++++++++
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/modules/companies/src/web/departments/list/ui/department-section.tsx b/modules/companies/src/web/departments/list/ui/department-section.tsx
index d509c3a..cee05b7 100644
--- a/modules/companies/src/web/departments/list/ui/department-section.tsx
+++ b/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) => (
-              <>
-                {
-                  company.assignments.filter(
-                    (entry) => entry.departmentId === item.id && entry.endDate === null
-                  ).length
-                }
-              </>
-            ),
+            render: (item) => {
+              const people = company.assignments
+                .filter((entry) => entry.departmentId === item.id && entry.endDate === null)
+                .map((entry) => company.people.find((person) => person.id === entry.personId))
+                .filter((person): person is CompanyDTO["people"][number] => Boolean(person));
+              return <PersonAvatarGroup companyId={company.id} people={people} peopleLabel={t("people")} />;
+            },
           },
           {
             id: "actions",
diff --git a/modules/companies/src/web/people/index.ts b/modules/companies/src/web/people/index.ts
index 0d8a350..b311610 100644
--- a/modules/companies/src/web/people/index.ts
+++ b/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";
diff --git a/modules/companies/src/web/people/shared/index.ts b/modules/companies/src/web/people/shared/index.ts
index 10da975..739b52c 100644
--- a/modules/companies/src/web/people/shared/index.ts
+++ b/modules/companies/src/web/people/shared/index.ts
@@ -1 +1 @@
-export { PersonEditorDialog, PersonForm, PersonAvatar } from "./ui";
+export { PersonEditorDialog, PersonForm, PersonAvatar, PersonAvatarGroup } from "./ui";
diff --git a/modules/companies/src/web/people/shared/ui/index.ts b/modules/companies/src/web/people/shared/ui/index.ts
index c568f44..8af0b3c 100644
--- a/modules/companies/src/web/people/shared/ui/index.ts
+++ b/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";
diff --git a/modules/companies/src/web/people/shared/ui/person-avatar.tsx b/modules/companies/src/web/people/shared/ui/person-avatar.tsx
index e2d99c4..db8a507 100644
--- a/modules/companies/src/web/people/shared/ui/person-avatar.tsx
+++ b/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>
+ );
+}