live queue updation & emergency case & doctor delay

Author: linasliyakath

api-gateway/src/app.ts

@@ -38,10 +38,13 @@ app.use(
   authenticate,
   (req: any, _res, next) => {
     if (req.user) {
-      req.headers['x-user-id'] = req.user.sub;
-      req.headers['x-user-role'] = req.user.role;
-      req.headers['x-user-type'] = req.user.type;
+      if (req.user.sub) req.headers['x-user-id'] = String(req.user.sub);
+
+      if (req.user.role) req.headers['x-user-role'] = String(req.user.role);
+
+      if (req.user.type) req.headers['x-user-type'] = String(req.user.type);
     }
+
     next();
   },
   createProxyMiddleware({

frontend/src/app/(patient)/dashboard/page.tsx

@@ -1,13 +1,24 @@
+'use client';
+
+import MyQueueCard from '@/src/features/appointments/components/MyQueueCard';
+
 export default function DashboardHome() {
   return (
-    <div>
-      <h1 className="text-2xl font-bold mb-4">
-        Welcome to your Dashboard
-      </h1>
-
-      <p>
-        Overview content goes here.
-      </p>
+    <div className="space-y-8">
+
+      <div>
+        <h1 className="text-2xl font-bold mb-2">
+          Welcome to your Dashboard
+        </h1>
+
+        <p className="text-gray-600">
+          Track your appointment and queue status in real time.
+        </p>
+      </div>
+
+      {/* 🔥 Live Queue Card */}
+      <MyQueueCard />
+
     </div>
   );
 }

frontend/src/app/staff/dashboard/queue/page.tsx

@@ -1,56 +1,59 @@
 'use client';
 
+import { useState } from 'react';
 import { useStaffAuth } from '../../../../staff/auth/staff.auth.provider';
 import { useDoctorQueue } from '../../../../features/appointments/hooks/useDoctorQueue';
+import {
+  useStartAppointment,
+  useCompleteAppointment,
+  useCheckInAppointment,
+} from '../../../../features/appointments/hooks/useStaffActions';
+import { useEmergency } from '../../../../features/appointments/hooks/useEmergency';
 
 export default function QueuePage() {
   const { auth } = useStaffAuth();
-
   const doctorId = auth.staff?.id;
 
-  // Wait until auth restoration finishes
-  if (auth.isRestoring) {
-    return <p>Loading authentication...</p>;
-  }
+  const [showEmergency, setShowEmergency] = useState(false);
+  const [patientId, setPatientId] = useState('');
+
+  if (auth.isRestoring) return <p>Loading authentication...</p>;
+  if (!doctorId) return <p>Doctor information not available.</p>;
 
-  if (!doctorId) {
-    return <p>Doctor information not available.</p>;
-  }
+  const { data, isLoading } = useDoctorQueue(doctorId);
 
-  const { data, isLoading, isError } =
-    useDoctorQueue(doctorId);
+  const startMutation = useStartAppointment();
+  const completeMutation = useCompleteAppointment();
+  const checkInMutation = useCheckInAppointment();
+  const emergencyMutation = useEmergency(doctorId);
 
   if (isLoading) return <p>Loading queue...</p>;
-  if (isError) return <p>Failed to load queue.</p>;
   if (!data) return <p>No queue found.</p>;
 
   const { queue, doctor_status } = data;
+  const someoneInProgress = queue.some((q: any) => q.status === 'IN_PROGRESS');
 
   return (
     <div className="space-y-8">
 
-      <h1 className="text-2xl font-bold">
-        Today's Queue
-      </h1>
+      {/* 🔴 Emergency Button */}
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold">Today's Queue</h1>
+
+        <button
+          onClick={() => setShowEmergency(true)}
+          className="bg-red-600 text-white px-4 py-2 rounded-lg shadow hover:bg-red-700 transition"
+        >
+          + Emergency Case
+        </button>
+      </div>
 
       {/* Doctor Status Panel */}
       <div className="bg-white p-6 rounded shadow space-y-2">
-        <p>
-          <strong>Total Appointments:</strong>{' '}
-          {doctor_status.total_appointments}
-        </p>
-        <p>
-          <strong>Checked In:</strong>{' '}
-          {doctor_status.checked_in_count}
-        </p>
-        <p>
-          <strong>Doctor Delay:</strong>{' '}
-          {doctor_status.doctor_delay_minutes} min
-        </p>
-        <p>
-          <strong>Remaining Queue:</strong>{' '}
-          {doctor_status.remaining_queue_minutes} min
-        </p>
+        <p><strong>Total:</strong> {doctor_status.total_appointments}</p>
+        <p><strong>Checked In:</strong> {doctor_status.checked_in_count}</p>
+        <p><strong>Delay:</strong> {doctor_status.doctor_delay_minutes} min</p>
+        <p><strong>Remaining:</strong> {doctor_status.remaining_queue_minutes} min</p>
       </div>
 
       {/* Queue List */}
@@ -59,32 +62,97 @@ export default function QueuePage() {
           <div
             key={item.id}
             className={`p-4 rounded border shadow-sm ${
-              item.is_current
-                ? 'bg-green-100 border-green-400'
-                : item.priority === 'HIGH'
+              item.priority === 'HIGH'
                 ? 'bg-red-50 border-red-300'
+                : item.is_current
+                ? 'bg-green-100 border-green-400'
                 : 'bg-white'
             }`}
           >
-            <div className="flex justify-between items-center">
-              <div>
-                <p className="font-semibold">
-                  Patient ID: {item.patient_id}
-                </p>
-                <p>Status: {item.status}</p>
-                <p>Position: {item.position}</p>
-                <p>Delay: {item.delay_minutes} min</p>
-              </div>
-
-              {item.priority === 'HIGH' && (
-                <span className="px-3 py-1 text-sm bg-red-500 text-white rounded-full">
-                  HIGH
-                </span>
+            <p className="font-semibold">
+              Patient ID: {item.patient_id}
+            </p>
+            <p>Status: {item.status}</p>
+            <p>Position: {item.position}</p>
+
+            <div className="flex gap-2 mt-3">
+
+              {item.status === 'SCHEDULED' && (
+                <button
+                  onClick={() => checkInMutation.mutate(item.id)}
+                  className="px-3 py-1 bg-yellow-500 text-white rounded text-sm"
+                >
+                  Check In
+                </button>
+              )}
+
+              {item.status === 'CHECKED_IN' && !someoneInProgress && (
+                <button
+                  onClick={() => startMutation.mutate(item.id)}
+                  className="px-3 py-1 bg-blue-600 text-white rounded text-sm"
+                >
+                  Start
+                </button>
               )}
+
+              {item.status === 'IN_PROGRESS' && (
+                <button
+                  onClick={() => completeMutation.mutate(item.id)}
+                  className="px-3 py-1 bg-green-600 text-white rounded text-sm"
+                >
+                  Complete
+                </button>
+              )}
+
             </div>
           </div>
         ))}
       </div>
+
+      {/* 🔴 Emergency Modal */}
+      {showEmergency && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center">
+
+          <div className="bg-white p-6 rounded-xl w-96 space-y-4 shadow-xl">
+
+            <h2 className="text-xl font-semibold text-red-600">
+              Create Emergency Case
+            </h2>
+
+            <input
+              type="text"
+              placeholder="Enter Patient ID"
+              value={patientId}
+              onChange={(e) => setPatientId(e.target.value)}
+              className="w-full border rounded px-3 py-2"
+            />
+
+            <div className="flex justify-end gap-3">
+
+              <button
+                onClick={() => setShowEmergency(false)}
+                className="px-4 py-2 rounded border"
+              >
+                Cancel
+              </button>
+
+              <button
+                onClick={() => {
+                  emergencyMutation.mutate(patientId);
+                  setShowEmergency(false);
+                  setPatientId('');
+                }}
+                className="px-4 py-2 bg-red-600 text-white rounded"
+              >
+                Confirm Emergency
+              </button>
+
+            </div>
+
+          </div>
+        </div>
+      )}
+
     </div>
   );
 }

frontend/src/features/appointments/api/createEmergency.ts

@@ -0,0 +1,9 @@
+import { api } from '@/src/lib/api';
+
+export async function createEmergency(data: {
+  doctorId: string;
+  patientId: string;
+}) {
+  const res = await api.post('/appointments/emergency', data);
+  return res.data;
+}

frontend/src/features/appointments/api/staffQueue.api.ts

@@ -0,0 +1,16 @@
+import { api } from '@/src/lib/api';
+
+export async function startAppointment(id: string) {
+  const { data } = await api.post(`/appointments/start/${id}`);
+  return data;
+}
+
+export async function completeAppointment(id: string) {
+  const { data } = await api.post(`/appointments/complete/${id}`);
+  return data;
+}
+
+export async function checkInAppointment(id: string) {
+  const { data } = await api.post(`/appointments/check-in/${id}`);
+  return data;
+}

frontend/src/features/appointments/components/AppointmentCard.tsx

@@ -9,6 +9,7 @@ interface Props {
 }
 
 export default function AppointmentCard({ appointment }: Props) {
+  console.log(appointment);
   const cancelMutation = useCancelAppointment();
   const [showReschedule, setShowReschedule] = useState(false);
 
@@ -27,7 +28,7 @@ export default function AppointmentCard({ appointment }: Props) {
   return (
     <div className="bg-white p-4 rounded-lg shadow space-y-2">
       <p>
-        <strong>Doctor:</strong> {appointment.doctor_name}
+        <strong>Doctor:</strong> {appointment.doctor_id}
       </p>
 
       <p>

frontend/src/features/appointments/components/ConsultationTimer.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface Props {
+  startTime: string;
+  durationMinutes: number;
+}
+
+export default function ConsultationTimer({
+  startTime,
+  durationMinutes,
+}: Props) {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+
+  useEffect(() => {
+    const start = new Date(startTime).getTime();
+
+    const interval = setInterval(() => {
+      const now = Date.now();
+      const diff = Math.max(0, Math.floor((now - start) / 1000));
+      setElapsedSeconds(diff);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [startTime]);
+
+  const plannedSeconds = durationMinutes * 60;
+
+  const overtimeSeconds =
+    elapsedSeconds > plannedSeconds
+      ? elapsedSeconds - plannedSeconds
+      : 0;
+
+  const formatTime = (total: number) => {
+    const mins = Math.floor(total / 60)
+      .toString()
+      .padStart(2, '0');
+    const secs = (total % 60)
+      .toString()
+      .padStart(2, '0');
+    return `${mins}:${secs}`;
+  };
+
+  return (
+    <div className="mt-3 p-3 rounded-lg border bg-gray-50 space-y-1">
+      <p className="font-semibold">
+        ⏱ {formatTime(elapsedSeconds)} elapsed
+      </p>
+
+      <p className="text-sm text-gray-600">
+        Planned: {durationMinutes} min
+      </p>
+
+      {overtimeSeconds > 0 && (
+        <p className="text-red-600 font-medium">
+          ⚠ Running {Math.floor(overtimeSeconds / 60)} min late
+        </p>
+      )}
+    </div>
+  );
+}