patient: profile

Author: linasliyakath

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

@@ -7,6 +7,8 @@ import { useRouter } from 'next/navigation';
 import { Eye, EyeOff, User } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { promise } from 'zod';
+import { resolve } from 'path';
 
 export default function LoginPage() {
   const { loginSuccess } = useAuth();
@@ -26,6 +28,7 @@ export default function LoginPage() {
     try {
       const data = await loginPatient(email, password);
       loginSuccess(data);
+      await new Promise(resolve => setTimeout(resolve,50));
       router.push('/dashboard');
     } catch {
       setError('Invalid email or password');

frontend/src/auth/auth.provider.tsx

@@ -8,10 +8,13 @@ import {
   useState,
   ReactNode,
 } from 'react';
+
 import { Patient } from './auth.types';
-import { refreshPatient } from './auth.service';
+import { refreshPatient, logoutPatient } from './auth.service';
 import { api } from '../lib/api';
-import { logoutPatient } from './auth.service';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { getProfile } from '@/src/features/patient/api/getProfile';
 
 type AuthState = {
   accessToken: string | null;
@@ -24,14 +27,16 @@ type AuthContextType = {
   loginSuccess: (data: {
     accessToken: string;
     patient: Patient;
-    
   }) => void;
   logout: () => void;
 };
 
 const AuthContext = createContext<AuthContextType | null>(null);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
+
+  const queryClient = useQueryClient();
+
   const [auth, setAuth] = useState<AuthState>({
     accessToken: null,
     patient: null,
@@ -42,12 +47,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const refreshingRef = useRef<Promise<string> | null>(null);
   const interceptorsInitialized = useRef(false);
 
-  // Keep token ref in sync
+  // Keep token ref synced
   useEffect(() => {
     accessTokenRef.current = auth.accessToken;
   }, [auth.accessToken]);
 
-  // Setup Axios interceptors once
+  // Axios interceptors
   useEffect(() => {
     if (interceptorsInitialized.current) return;
     interceptorsInitialized.current = true;
@@ -62,6 +67,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     const resId = api.interceptors.response.use(
       res => res,
       async error => {
+
         const original = error.config;
 
         if (
@@ -77,123 +83,171 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         original._retry = true;
 
         try {
+
           if (!refreshingRef.current) {
-            refreshingRef.current = refreshPatient().then(res => {
-              setAuth(prev => ({
-                ...prev,
-                accessToken: res.accessToken,
-              }));
-              refreshingRef.current = null;
-              return res.accessToken;
-            });
+
+refreshingRef.current = refreshPatient().then(res => {
+
+  api.defaults.headers.common['Authorization'] = `Bearer ${res.accessToken}`;
+
+  setAuth(prev => ({
+    ...prev,
+    accessToken: res.accessToken
+  }));
+
+  refreshingRef.current = null;
+
+  return res.accessToken;
+});
+
           }
 
           const newToken = await refreshingRef.current;
+
           original.headers.Authorization = `Bearer ${newToken}`;
+
           return api(original);
+
         } catch {
+
           refreshingRef.current = null;
+
           setAuth({
             accessToken: null,
             patient: null,
             isRestoring: false,
           });
+
           return Promise.reject(error);
+
         }
+
       }
     );
 
     return () => {
       api.interceptors.request.eject(reqId);
       api.interceptors.response.eject(resId);
     };
+
   }, []);
 
-  // 🔁 Restore session on page load
-// 🔁 Restore session ONLY if no accessToken
-// 🔁 Restore session ONCE on mount
-useEffect(() => {
-  let cancelled = false;
-
-  (async () => {
-    // 🔥 IMPORTANT FIX
-    if (accessTokenRef.current) {
-      setAuth(prev => ({
-        ...prev,
-        isRestoring: false,
-      }));
-      return;
-    }
+  /*
+    Restore session on page load
+  */
 
-    try {
-      const refreshRes = await refreshPatient();
+  useEffect(() => {
+
+    let cancelled = false;
+
+    (async () => {
+
+      if (accessTokenRef.current) {
+        setAuth(prev => ({
+          ...prev,
+          isRestoring: false
+        }));
+        return;
+      }
+
+      try {
 
-      accessTokenRef.current = refreshRes.accessToken;
+        const refreshRes = await refreshPatient();
 
-      const profileRes = await api.get('/patients/public/auth/me');
+        accessTokenRef.current = refreshRes.accessToken;
 
-      if (cancelled) return;
+        const profileRes = await api.get('/patients/public/auth/me');
 
-      setAuth({
-        accessToken: refreshRes.accessToken,
-        patient: profileRes.data,
-        isRestoring: false,
-      });
-    } catch {
-      if (cancelled) return;
+        if (cancelled) return;
 
-      setAuth({
-        accessToken: null,
-        patient: null,
-        isRestoring: false,
-      });
-    }
-  })();
+        setAuth({
+          accessToken: refreshRes.accessToken,
+          patient: profileRes.data,
+          isRestoring: false
+        });
 
-  return () => {
-    cancelled = true;
-  };
-}, []);
+      } catch {
 
+        if (cancelled) return;
 
+        setAuth({
+          accessToken: null,
+          patient: null,
+          isRestoring: false
+        });
+
+      }
+
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+
+  }, []);
+
+  /*
+    Login success handler
+  */
 
 function loginSuccess(data: {
   accessToken: string;
   patient: Patient;
 }) {
-  accessTokenRef.current = data.accessToken; // 🔥 ADD THIS LINE
+
+  accessTokenRef.current = data.accessToken;
+
+  // 🔥 Ensure axios always has the token immediately
+  api.defaults.headers.common['Authorization'] = `Bearer ${data.accessToken}`;
 
   setAuth({
     accessToken: data.accessToken,
     patient: data.patient,
-    isRestoring: false,
+    isRestoring: false
   });
-}
 
-async function logout() {
-  try {
-    await logoutPatient();
-  } catch {}
+  queryClient.invalidateQueries({
+    queryKey: ['patient-profile']
+  });
 
-  setAuth({
-    accessToken: null,
-    patient: null,
-    isRestoring: false,
+  queryClient.prefetchQuery({
+    queryKey: ['patient-profile'],
+    queryFn: getProfile
   });
 }
 
+  async function logout() {
+
+    try {
+      await logoutPatient();
+    } catch {}
+
+    setAuth({
+      accessToken: null,
+      patient: null,
+      isRestoring: false
+    });
+
+    queryClient.clear();
+
+  }
 
   return (
     <AuthContext.Provider value={{ auth, loginSuccess, logout }}>
       {children}
     </AuthContext.Provider>
   );
+
 }
 
 export function useAuth() {
+
   const ctx = useContext(AuthContext);
+
   if (!ctx) {
     throw new Error('useAuth must be used inside AuthProvider');
   }
+
   return ctx;
-}
+
+}

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

@@ -1,24 +1,41 @@
 'use client';
 
 import AppointmentCard from './AppointmentCard';
+import { CalendarX } from 'lucide-react';
 
 interface Props {
   appointments: any[];
 }
 
 export default function AppointmentList({ appointments }: Props) {
+  // Enhanced Empty State
   if (!appointments.length) {
-    return <p>No appointments found.</p>;
+    return (
+      <div className="flex flex-col items-center justify-center py-20 px-4 bg-slate-50/50 rounded-[2.5rem] border-2 border-dashed border-slate-200">
+        <div className="h-16 w-16 bg-white rounded-2xl shadow-sm flex items-center justify-center text-slate-300 mb-4">
+          <CalendarX size={32} />
+        </div>
+        <h3 className="text-lg font-bold text-slate-900">No appointments found</h3>
+        <p className="text-slate-500 text-sm mt-1 text-center max-w-[250px]">
+          We couldn't find any scheduled visits in your history.
+        </p>
+      </div>
+    );
   }
 
   return (
-    <div className="space-y-4">
-      {appointments.map((appt) => (
-        <AppointmentCard
-          key={appt.id}
-          appointment={appt}
-        />
-      ))}
+    <div className="relative">
+      {/* Optional: Simple timeline line decoration for desktop */}
+      <div className="hidden lg:block absolute left-[40px] top-0 bottom-0 w-[2px] bg-slate-100 -z-10" />
+      
+      <div className="space-y-6">
+        {appointments.map((appt) => (
+          <AppointmentCard
+            key={appt.id}
+            appointment={appt}
+          />
+        ))}
+      </div>
     </div>
   );
 }