Progress bar

src/app/(private)/hangouts/_components/HangoutList.tsx

@@ -1,8 +1,11 @@
 "use client";
-import React, { useState } from "react";
+
+import React, { useState, useEffect } from "react";
 import HangoutActionButton from "./HangoutActionButton";
 import ConfirmLocationModal from "../_components/FinalConfirmationModal";
+import HangoutProgressBar from "./HangoutProgressBar";
 import { Participant } from "./Hangouts";
+import { getApiBase } from "@/utils/etc/apiBase";
 
 interface HangoutListProps {
   name: string;
@@ -15,6 +18,17 @@ interface HangoutListProps {
   participants: Participant[];
 }
 
+const flowStatusIndexMap: Record<string, number> = {
+  "pending-time-input": 0,
+  "pending-time-vote": 1,
+  "pending-confirm-time": 2,
+  "pending-location-vote": 3,
+  "pending-confirm-location": 4,
+  "accepted-final-confirmation": 5,
+};
+
+const knownStages = Object.keys(flowStatusIndexMap);
+
 export default function HangoutList({
   name,
   id,
@@ -25,8 +39,38 @@ export default function HangoutList({
   flowStatus,
   participants,
 }: HangoutListProps) {
-  const [isConfirmationModal, setIsConfirmationModal] =
-    useState<boolean>(false);
+  const [isConfirmationModal, setIsConfirmationModal] = useState(false);
+  const [progress, setProgress] = useState<{
+    currentStageIndex: number;
+    completed: number;
+    total: number;
+  } | null>(null);
+
+  useEffect(() => {
+    async function fetchHangoutProgress() {
+      try {
+        const res = await fetch(`${getApiBase()}/get_hangout_progress/${id}`);
+        const data = await res.json();
+
+        if (data.status === 200) {
+          const stageKey = data.current_stage;
+          if (knownStages.includes(stageKey)) {
+            setProgress(prev => ({
+              currentStageIndex: flowStatusIndexMap[stageKey],
+              completed: data.stage_count,
+              total: data.total_count,
+            }));
+          } else {
+            setProgress(prev => prev ?? null);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to fetch hangout progress:", err);
+      }
+    }
+
+    fetchHangoutProgress();
+  }, [id]);
 
   return (
     <>
@@ -50,6 +94,16 @@ export default function HangoutList({
           </div>
         </div>
 
+        {progress && (
+          <HangoutProgressBar
+            currentStageIndex={progress.currentStageIndex}
+            completed={progress.completed}
+            total={progress.total}
+            stages={5} 
+            flowStatus={flowStatus} 
+          />
+        )}
+
         <div className="flex flex-row justify-between space-y-1">
           <div className="flex items-center space-x-2">
             <div className="flex items-center">

src/app/(private)/hangouts/_components/HangoutProgressBar.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+interface HangoutProgressBarProps {
+  currentStageIndex: number; 
+  completed: number;
+  total: number;
+  stages: number;
+  flowStatus: string;
+}
+
+const stageLabels = [
+  "Submit Availability",     // 0
+  "Vote on Availability",    // 1
+  "Confirm Details",         // 2
+  "Vote on Location",        // 2
+  "Confirm Location",        // 3
+  "Hangout Scheduled"                // 4
+];
+
+export default function HangoutProgressBar({
+  currentStageIndex,
+  completed,
+  total,
+  stages,
+  flowStatus,
+}: HangoutProgressBarProps) {
+  const label =
+    flowStatus === "pending-confirm-details"
+      ? "Confirm Details"
+      : stageLabels[currentStageIndex] ?? "Progress";
+
+  const showRemaining =
+    currentStageIndex !== stageLabels.length - 1 && total - completed > 0;
+
+  return (
+    <div className="flex flex-col items-center mt-2 mb-1">
+      <span className="text-xs text-gray-600 font-medium mb-1">
+        {label}
+        {showRemaining && <> • {total - completed} remaining</>}
+      </span>
+      <div className="flex space-x-1">
+        {Array.from({ length: stages }).map((_, i) => (
+          <div
+            key={i}
+            className={`w-4 h-2 rounded-sm transition-colors duration-200 ${
+              (i < currentStageIndex || i === currentStageIndex && currentStageIndex === stages - 1)
+                ? "bg-yellow-500"
+                : i === currentStageIndex
+                ? "bg-yellow-300"
+                : "bg-gray-300"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/utils/etc/informationStrings.ts

@@ -2,7 +2,7 @@ export const informationStrings = {
   startHangout:
     "Start a new Hangout by giving it a title and inviting your friends. ",
   hangouts:
-    "View and manage all your hangouts here.\nEach hangout shows its current status, and available action buttons will appear depending on the stage.",
+    " View and manage all your hangouts here.\n Each hangout shows its current status, and available action buttons will appear depending on the stage.\n----------------------\nA progress bar visually tracks the hangout’s flow through four key stages:\n1. Submit Availability – attendees share their available times.\n2. Vote on Availability – attendees vote on the best time options.\n3. Vote on Location – attendees vote on where to meet.\n4. Confirm Location – final confirmation of the meeting place and time.\n----------------------\n The bar will also show how many members have completed the current stage before going onto the next.",
   availabilityInput:
     "Add all the dates and times you are available. These will become the options that attendees vote on.\nThe more options you provide, the easier it will be to find a time that works for everyone!",
   availabilityVoting: