From a17320b8619f63553b7ddd3d2e39a0a155164079 Mon Sep 17 00:00:00 2001
From: lethemanh <themanhle1234@gmail.com>
Date: Wed, 18 Mar 2026 19:59:32 +0700
Subject: [PATCH] #654 assign icon based on icon property (#662)

Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
---
 src/components/Attendees/PeopleSearch.tsx     |  2 +-
 src/components/Attendees/ResourceIcon.tsx     | 57 ++++---------------
 src/components/Attendees/ResourceSearch.tsx   |  2 +-
 src/components/Calendar/CalendarResources.tsx |  2 +-
 4 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/src/components/Attendees/PeopleSearch.tsx b/src/components/Attendees/PeopleSearch.tsx
index 77cec0c..e74d657 100644
--- a/src/components/Attendees/PeopleSearch.tsx
+++ b/src/components/Attendees/PeopleSearch.tsx
@@ -295,7 +295,7 @@ export function PeopleSearch({
             <ListItem key={key + option?.email} {...otherProps} disableGutters>
               <ListItemAvatar>
                 {isResource ? (
-                  <ResourceIcon displayName={option.displayName} />
+                  <ResourceIcon avatarUrl={option.avatarUrl} />
                 ) : (
                   <Avatar
                     {...stringAvatar(option.displayName || option.email)}
diff --git a/src/components/Attendees/ResourceIcon.tsx b/src/components/Attendees/ResourceIcon.tsx
index 2237ece..6fe17d3 100644
--- a/src/components/Attendees/ResourceIcon.tsx
+++ b/src/components/Attendees/ResourceIcon.tsx
@@ -1,54 +1,21 @@
 import { Avatar } from "@linagora/twake-mui";
-import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
-import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
-import PhoneIphoneOutlinedIcon from "@mui/icons-material/PhoneIphoneOutlined";
-import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
-import VideoCameraBackOutlinedIcon from "@mui/icons-material/VideoCameraBackOutlined";
-import MeetingRoomOutlinedIcon from "@mui/icons-material/MeetingRoomOutlined";
 import LayersOutlinedIcon from "@mui/icons-material/LayersOutlined";
-import ViewComfyAltOutlinedIcon from "@mui/icons-material/ViewComfyAltOutlined";
-import TvOutlinedIcon from "@mui/icons-material/TvOutlined";
-import type { SvgIconComponent } from "@mui/icons-material";
-
-/**
- * displayName → MUI icon mapping.
- * Add new entries here when new resources are created.
- */
-const RESOURCE_ICON_MAP: Record<string, SvgIconComponent> = {
-  "Astreinte OSSA": PeopleAltOutlinedIcon,
-  "Chômage Partiel": CalendarMonthOutlinedIcon,
-  Congés: CalendarMonthOutlinedIcon,
-  COPIL: CalendarMonthOutlinedIcon,
-  "Iphone 11 Pro Max": PhoneIphoneOutlinedIcon,
-  "Note de Service": DescriptionOutlinedIcon,
-  "OSS Events": CalendarMonthOutlinedIcon,
-  "Permanence OSSA": PeopleAltOutlinedIcon,
-  "Projo salle 404": VideoCameraBackOutlinedIcon,
-  "Salle-bat-A-S215-visio-15p": MeetingRoomOutlinedIcon,
-  "Salle-bat-A-S216-ecran-5p": MeetingRoomOutlinedIcon,
-  "Salle-bat-B-S217-10p": MeetingRoomOutlinedIcon,
-  "Salle-bat-C-S218-ecran-20p": MeetingRoomOutlinedIcon,
-  "Salle-bat-D-S218-visio-amphi-200p": MeetingRoomOutlinedIcon,
-  Télétravail: LayersOutlinedIcon,
-  "TV - VN": TvOutlinedIcon,
-  "Veille COPIL": LayersOutlinedIcon,
-  "White Board - VN": ViewComfyAltOutlinedIcon,
-};
-
-function getIconForDisplayName(displayName: string): SvgIconComponent {
-  return RESOURCE_ICON_MAP[displayName] ?? LayersOutlinedIcon;
-}
 
 interface ResourceIconProps {
-  displayName: string;
+  avatarUrl?: string;
 }
 
-export function ResourceIcon({ displayName }: ResourceIconProps) {
-  const IconComponent = getIconForDisplayName(displayName);
-
-  return (
-    <Avatar sx={{ backgroundColor: "transparent" }}>
-      <IconComponent fontSize="medium" />
+export function ResourceIcon({ avatarUrl }: ResourceIconProps) {
+  return avatarUrl ? (
+    <Avatar
+      sx={{ backgroundColor: "transparent", width: "24px", height: "24px" }}
+      src={avatarUrl}
+    />
+  ) : (
+    <Avatar
+      sx={{ backgroundColor: "transparent", width: "24px", height: "24px" }}
+    >
+      <LayersOutlinedIcon />
     </Avatar>
   );
 }
diff --git a/src/components/Attendees/ResourceSearch.tsx b/src/components/Attendees/ResourceSearch.tsx
index 2bf5178..d63affc 100644
--- a/src/components/Attendees/ResourceSearch.tsx
+++ b/src/components/Attendees/ResourceSearch.tsx
@@ -290,7 +290,7 @@ export function ResourceSearch({
               disableGutters
             >
               <ListItemAvatar>
-                <ResourceIcon displayName={option.displayName} />
+                <ResourceIcon avatarUrl={option.avatarUrl} />
               </ListItemAvatar>
               <ListItemText primary={option.displayName} />
             </ListItem>
diff --git a/src/components/Calendar/CalendarResources.tsx b/src/components/Calendar/CalendarResources.tsx
index 8ea8232..21d708e 100644
--- a/src/components/Calendar/CalendarResources.tsx
+++ b/src/components/Calendar/CalendarResources.tsx
@@ -46,7 +46,7 @@ function CalendarItem({
       gap={2}
     >
       <Box display="flex" alignItems="center" gap={1}>
-        <ResourceIcon displayName={cal.owner.displayName} />
+        <ResourceIcon avatarUrl={cal.owner.avatarUrl} />
         <Typography variant="body1">
           {renameDefault(cal.cal["dav:name"], cal.owner.displayName, t, false)}
         </Typography>