clean

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;

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);
-              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`,
+                    left: `${5 + (columnIndex * 9)}px`,
+                    width: '6px',
                   }}
-                    title={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`}
-                    aria-label={`${startTime} - ${endTime}${segmentLabel ? ` : ${segmentLabel}` : ''}`}
-                    key={`${formatDateKey(day)}-${start}-${end}`}
+                  title={`${username} : ${startTime} - ${endTime}`}
+                  aria-label={`${username} : ${startTime} - ${endTime}`}
+                  key={`${formatDateKey(day)}-${username}`}
                 >
-                    {users.map(({ username, color }) => (
                   <span
                     className="attendance-user-bar"
                     style={{ backgroundColor: color }}
                     title={`${username} : ${startTime} - ${endTime}`}
                     aria-label={`${username} : ${startTime} - ${endTime}`}
-                        key={username}
                   />
-                    ))}
                 </div>
-                ) : (
+              );
+            }) : getAttendanceSegments(getAttendancesForDay(day)).map(({ start, end, users }) => {
+              const startTime = formatSegmentTime(start);
+              const endTime = formatSegmentTime(end);
+              const segmentLabel = users.map(({ username }) => username).join(', ');
+              return (
                 <div
                   className="attendance-block"
                   style={getAttendanceStyle(start, end, startHour, endHour, hourHeight)}
+                  title={segmentLabel}
                   key={`${formatDateKey(day)}-${start}-${end}`}
                 >
                   <strong>{startTime} - {endTime}</strong>
-                    <span />
+                  <span>{segmentLabel}</span>
                 </div>
-                )
               );
             })}
           </div>