Display max participant

src/pages/EventDetail/components/EventTask/EventTask.module.css

@@ -21,6 +21,65 @@
     animation-delay: calc(var(--i) * 0.1s);
 }
 
+.participants {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.participantsHeader {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.participantsLabel {
+    font-size: 0.8rem;
+    opacity: 0.55;
+}
+
+.participantsBadge {
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 2px 10px;
+    border-radius: 999px;
+}
+
+.badgeOpen {
+    background: rgba(34, 197, 94, 0.15);
+    color: #4ade80;
+}
+
+.badgeAlmost {
+    background: rgba(234, 179, 8, 0.15);
+    color: #facc15;
+}
+
+.badgeFull {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+}
+
+.progressBar {
+    width: 100%;
+    max-width: 200px;
+    height: 5px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+}
+
+.progressFill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.4s ease;
+}
+
+.fillOpen  { background: #4ade80; }
+.fillAlmost { background: #facc15; }
+.fillFull  { background: #f87171; }
+
 .modalContent {
     text-align: center;
 }

src/pages/EventDetail/components/EventTask/EventTask.tsx

@@ -91,6 +91,32 @@ export default function EventTask({ task, index, eventId }: EventTaskProps) {
                         {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
                     </p>
                     <p>{task.description}</p>
+                    <div className={styles.participants}>
+                        <div className={styles.participantsHeader}>
+                            <span className={styles.participantsLabel}>Participants</span>
+                            <span className={`${styles.participantsBadge} ${
+                                task.users_count >= task.max_participants
+                                    ? styles.badgeFull
+                                    : task.users_count / task.max_participants >= 0.75
+                                    ? styles.badgeAlmost
+                                    : styles.badgeOpen
+                            }`}>
+                                {task.users_count} / {task.max_participants}
+                            </span>
+                        </div>
+                        <div className={styles.progressBar}>
+                            <div
+                                className={`${styles.progressFill} ${
+                                    task.users_count >= task.max_participants
+                                        ? styles.fillFull
+                                        : task.users_count / task.max_participants >= 0.75
+                                        ? styles.fillAlmost
+                                        : styles.fillOpen
+                                }`}
+                                style={{ width: `${Math.min((task.users_count / task.max_participants) * 100, 100)}%` }}
+                            />
+                        </div>
+                    </div>
                 </div>
 
                 <div className={styles.manageTaskBtn}>