From ba33de65643673867ad3c69f439e505aedaec0fe Mon Sep 17 00:00:00 2001
From: Louis Mazin <louismazindev@gmail.com>
Date: Tue, 15 Sep 2026 20:54:19 +0200
Subject: [PATCH] clean

---
 frontend/src/pages/WeeklySummaryPage.css |  1 -
 frontend/src/pages/WeeklySummaryPage.jsx | 87 +++++++++++++++---------
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/WeeklySummaryPage.css b/frontend/src/pages/WeeklySummaryPage.css
index 82753c3..299682f 100644
--- a/frontend/src/pages/WeeklySummaryPage.css
+++ b/frontend/src/pages/WeeklySummaryPage.css
@@ -224,7 +224,6 @@
 
 .multi-user-schedule .attendance-bar-group {
   position: absolute;
-  left: 5px;
   display: flex;
   gap: 3px;
   overflow: visible;
diff --git a/frontend/src/pages/WeeklySummaryPage.jsx b/frontend/src/pages/WeeklySummaryPage.jsx
index 39af15b..98dd7e7 100644
--- a/frontend/src/pages/WeeklySummaryPage.jsx
+++ b/frontend/src/pages/WeeklySummaryPage.jsx
@@ -150,6 +150,28 @@ const WeeklySummaryPage = ({ userId }) => {
     }).filter(Boolean);
   };
 
+  const getAttendanceColumns = (dayAttendances) => {
+    const columns = new Map();
+
+    dayAttendances.forEach((attendance) => {
+      const start = getMinutes(getTimeValue(attendance, 'start_time'));
+      const end = getMinutes(getTimeValue(attendance, 'end_time'));
+      const username = attendance.username;
+
+      if (start === null || end === null || end <= start || !username) return;
+
+      const currentColumn = columns.get(username);
+      columns.set(username, {
+        username,
+        color: getUserColor(username),
+        start: currentColumn ? Math.min(currentColumn.start, start) : start,
+        end: currentColumn ? Math.max(currentColumn.end, end) : end,
+      });
+    });
+
+    return [...columns.values()];
+  };
+
   const navigateWeek = (direction) => {
     const newWeek = new Date(currentWeek);
     newWeek.setDate(currentWeek.getDate() + (direction * 7));
@@ -259,42 +281,43 @@ const WeeklySummaryPage = ({ userId }) => {
         {weekDays.map((day) => (
           <div className="schedule-day-column" key={formatDateKey(day)}>
             {hours.map((hour) => <span className="schedule-hour-line" key={hour} />)}
-            {getAttendanceSegments(getAttendancesForDay(day)).map(({ start, end, users }) => {
+            {isAdmin ? getAttendanceColumns(getAttendancesForDay(day)).map(({ start, end, username, color }, columnIndex) => {
+              const startTime = formatSegmentTime(start);
+              const endTime = formatSegmentTime(end);
+              return (
+                <div
+                  className="attendance-bar-group"
+                  style={{
+                    ...getAttendanceStyle(start, end, startHour, endHour, hourHeight),
+                    left: `${5 + (columnIndex * 9)}px`,
+                    width: '6px',
+                  }}
+                  title={`${username} : ${startTime} - ${endTime}`}
+                  aria-label={`${username} : ${startTime} - ${endTime}`}
+                  key={`${formatDateKey(day)}-${username}`}
+                >
+                  <span
+                    className="attendance-user-bar"
+                    style={{ backgroundColor: color }}
+                    title={`${username} : ${startTime} - ${endTime}`}
+                    aria-label={`${username} : ${startTime} - ${endTime}`}
+                  />
+                </div>
+              );
+            }) : getAttendanceSegments(getAttendancesForDay(day)).map(({ start, end, users }) => {
               const startTime = formatSegmentTime(start);
               const endTime = formatSegmentTime(end);
               const segmentLabel = users.map(({ username }) => username).join(', ');
               return (
-                isAdmin ? (
-                  <div
-                    className="attendance-bar-group"
-                    style={{
-                      ...getAttendanceStyle(start, end, startHour, endHour, hourHeight),
-                      width: `${(users.length * 6) + ((users.length - 1) * 3)}px`,
-                    }}
-                    title={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`}
-                    aria-label={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`}
-                    key={`${formatDateKey(day)}-${start}-${end}`}
-                  >
-                    {users.map(({ username, color }) => (
-                      <span
-                        className="attendance-user-bar"
-                        style={{ backgroundColor: color }}
-                        title={`${username} : ${startTime} - ${endTime}`}
-                        aria-label={`${username} : ${startTime} - ${endTime}`}
-                        key={username}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <div
-                    className="attendance-block"
-                    style={getAttendanceStyle(start, end, startHour, endHour, hourHeight)}
-                    key={`${formatDateKey(day)}-${start}-${end}`}
-                  >
-                    <strong>{startTime} - {endTime}</strong>
-                    <span />
-                  </div>
-                )
+                <div
+                  className="attendance-block"
+                  style={getAttendanceStyle(start, end, startHour, endHour, hourHeight)}
+                  title={segmentLabel}
+                  key={`${formatDateKey(day)}-${start}-${end}`}
+                >
+                  <strong>{startTime} - {endTime}</strong>
+                  <span>{segmentLabel}</span>
+                </div>
               );
             })}
           </div>