vision refactor

app/vision/page.tsx

@@ -406,6 +406,43 @@ export default function VisionPage() {
     return canJoin;
   };
 
+  // Get meeting status for display
+  const getMeetingStatus = (meeting: ScheduledMeeting): 'before' | 'active' | 'ended' | 'no-link' => {
+    if (!meeting.location) {
+      return 'no-link';
+    }
+
+    if (!meeting.start || !meeting.end) {
+      return 'no-link';
+    }
+
+    const now = new Date();
+    const start = new Date(meeting.start);
+    const end = new Date(meeting.end);
+
+    // Validate dates
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+      return 'no-link';
+    }
+
+    // Calculate 5 minutes before start
+    const fiveMinutesBeforeStart = new Date(start);
+    fiveMinutesBeforeStart.setMinutes(fiveMinutesBeforeStart.getMinutes() - 5);
+
+    // Check if meeting has ended
+    if (now > end) {
+      return 'ended';
+    }
+
+    // Check if meeting is active (5 minutes before start until end)
+    if (now >= fiveMinutesBeforeStart && now <= end) {
+      return 'active';
+    }
+
+    // Before the meeting starts
+    return 'before';
+  };
+
   // Check if there's an active meeting for a group or mission (5 minutes before start until end)
   const hasActiveMeeting = (type: "group" | "mission", entityId: string): boolean => {
     const now = new Date();
@@ -810,20 +847,39 @@ export default function VisionPage() {
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
-                      {canJoinMeeting(meeting) && meeting.location ? (
-                        <Button
-                          size="sm"
-                          className="bg-blue-600 hover:bg-blue-700 text-white"
-                          onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName, meeting.location)}
-                        >
-                          <Video className="h-4 w-4 mr-1" />
-                          Rejoindre
-                        </Button>
-                      ) : (
-                        <span className="text-xs text-gray-400">
-                          {!meeting.location ? 'Pas de lien' : 'Bientôt disponible'}
-                        </span>
-                      )}
+                      {(() => {
+                        const status = getMeetingStatus(meeting);
+                        if (status === 'active') {
+                          return (
+                            <Button
+                              size="sm"
+                              className="bg-blue-600 hover:bg-blue-700 text-white"
+                              onClick={() => handleConferenceClick(meeting.type, meeting.entityId, meeting.entityName, meeting.location!)}
+                            >
+                              <Video className="h-4 w-4 mr-1" />
+                              Rejoindre
+                            </Button>
+                          );
+                        } else if (status === 'before') {
+                          return (
+                            <span className="text-xs text-gray-400">
+                              Bientôt disponible
+                            </span>
+                          );
+                        } else if (status === 'ended') {
+                          return (
+                            <span className="text-xs text-gray-400">
+                              Terminé
+                            </span>
+                          );
+                        } else {
+                          return (
+                            <span className="text-xs text-gray-400">
+                              Pas de lien
+                            </span>
+                          );
+                        }
+                      })()}
                     </div>
                   </div>
                 ))}