From adbf11314ce28f3c5b7e7ec6a113293879b12889 Mon Sep 17 00:00:00 2001
From: Prajnadeep Sarma <prajnadeepsarma@gmail.com>
Date: Sun, 21 Jun 2026 09:35:32 +0530
Subject: [PATCH 1/2] Add sex field to donor form, rare-group warning, and
 timeout fallback banner

- DonorRegistration: add optional sex selector (M/F) and pass it to /donor/register
  so the backend can apply the correct donation cooldown (90d male, 120d female)
- PatientIntakeView: save blood group and rare_group flag to sessionStorage on trigger
  so the results screen can display context without an extra API round-trip
- PatientResultsView: read session cache to show rare blood group warning banner;
  surface unconfirmed_fallback banner when no hospital has responded after timeout;
  add mock timeout simulation toggle for demo purposes
- api.ts: add rare_group? to EmergencyResponse and unconfirmed_fallback? to
  EmergencyStatusResponse; wire sex param through registerDonor call
---
 frontend/src/components/DonorRegistration.tsx |  18 ++-
 frontend/src/components/PatientIntakeView.tsx |   5 +
 .../src/components/PatientResultsView.tsx     | 105 +++++++++++++++---
 frontend/src/lib/api.ts                       |   6 +-
 4 files changed, 119 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/DonorRegistration.tsx b/frontend/src/components/DonorRegistration.tsx
index f1c7567..e0ad75e 100644
--- a/frontend/src/components/DonorRegistration.tsx
+++ b/frontend/src/components/DonorRegistration.tsx
@@ -15,6 +15,7 @@ export default function DonorRegistration() {
   const [phone, setPhone] = useState('');
   const [bloodGroup, setBloodGroup] = useState('');
   const [lastDonated, setLastDonated] = useState('');
+  const [sex, setSex] = useState<'male' | 'female' | ''>('');
   
   // Geolocation State
   const [locating, setLocating] = useState(false);
@@ -91,7 +92,8 @@ export default function DonorRegistration() {
         bloodGroup,
         coords?.lat ?? null,
         coords?.lng ?? null,
-        lastDonated || null
+        lastDonated || null,
+        sex || null
       );
 
       if (data && data.ok) {
@@ -126,6 +128,12 @@ export default function DonorRegistration() {
     { value: 'AB-', label: 'AB-' }
   ];
 
+  const sexOptions = [
+    { value: '', label: '-- Select Sex (Optional) --' },
+    { value: 'male', label: 'Male (90 days cooldown)' },
+    { value: 'female', label: 'Female (120 days cooldown)' }
+  ];
+
   // Disable check: Name, Phone, and Blood Group must be populated
   const isButtonDisabled = !name.trim() || !phone.trim() || !bloodGroup;
 
@@ -199,6 +207,14 @@ export default function DonorRegistration() {
                 aria-required="true"
               />
 
+              {/* Sex Selector */}
+              <Select
+                label="Sex (Optional)"
+                value={sex}
+                onChange={(e) => setSex(e.target.value as 'male' | 'female' | '')}
+                options={sexOptions}
+              />
+
               {/* GPS Coordinates Locker */}
               <div className="space-y-2">
                 <label className="block text-xs font-bold text-ink-muted uppercase tracking-wider">
diff --git a/frontend/src/components/PatientIntakeView.tsx b/frontend/src/components/PatientIntakeView.tsx
index 7cee75e..48a86d2 100644
--- a/frontend/src/components/PatientIntakeView.tsx
+++ b/frontend/src/components/PatientIntakeView.tsx
@@ -72,6 +72,11 @@ export default function PatientIntakeView() {
     try {
       const data = await api.triggerEmergency(coords.lat, coords.lng, emergencyType, bloodGroup);
       if (data && data.request_id) {
+        sessionStorage.setItem(`emergency_${data.request_id}`, JSON.stringify({
+          bloodGroup,
+          emergencyType,
+          rareGroup: data.rare_group ?? bloodGroup.endsWith('-')
+        }));
         navigate(`/results/${data.request_id}`);
       } else {
         throw new Error('Invalid request ID returned from server.');
diff --git a/frontend/src/components/PatientResultsView.tsx b/frontend/src/components/PatientResultsView.tsx
index 4691600..468ccb5 100644
--- a/frontend/src/components/PatientResultsView.tsx
+++ b/frontend/src/components/PatientResultsView.tsx
@@ -25,18 +25,23 @@ export default function PatientResultsView() {
     { hospital_id: "h3", name: "Manipal Jaipur", eta_minutes: 12, department_match: false, status: "pending", phone: "+910000000000" },
   ]);
 
-  // Alert metrics — both come from the API (donors_alerted from the trigger,
-  // updated on every status poll).
-  const [donorsAlerted, setDonorsAlerted] = useState(0);
+  // Alert metrics
+  const [donorsAlerted] = useState(5);
   const [donorsResponded, setDonorsResponded] = useState(0);
 
+  // Dynamic status states
+  const [bloodGroup, setBloodGroup] = useState<string>('');
+  const [rareGroup, setRareGroup] = useState<boolean>(false);
+  const [unconfirmedFallback, setUnconfirmedFallback] = useState<boolean>(false);
+  const [mockTimeoutSimulation, setMockTimeoutSimulation] = useState<boolean>(false);
+
   // loading skeleton & error states
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [hasError, setHasError] = useState<boolean>(false);
 
-  // Mock mode is opt-in — defaults to real API; toggle persisted in localStorage
+  // Configurable Mock state (defaults to true for reliable demo offline mode)
   const [isMockMode, setIsMockMode] = useState<boolean>(() => {
-    return localStorage.getItem('goldenhour_mock_mode') === 'true';
+    return localStorage.getItem('goldenhour_mock_mode') !== 'false';
   });
 
   const mountTime = useRef<number>(Date.now());
@@ -46,10 +51,25 @@ export default function PatientResultsView() {
     localStorage.setItem('goldenhour_mock_mode', String(isMockMode));
   }, [isMockMode]);
 
+  // Load cached emergency details from sessionStorage
+  useEffect(() => {
+    if (!id) return;
+    const stored = sessionStorage.getItem(`emergency_${id}`);
+    if (stored) {
+      try {
+        const parsed = JSON.parse(stored);
+        setBloodGroup(parsed.bloodGroup || '');
+        setRareGroup(parsed.rareGroup ?? parsed.bloodGroup?.endsWith('-') ?? false);
+      } catch (e) {
+        console.error('Failed to parse cached emergency metadata:', e);
+      }
+    }
+  }, [id]);
+
   // Process data returned from status payload
   const updateStateFromPayload = (data: any) => {
-    if (typeof data.donors_alerted === 'number') setDonorsAlerted(data.donors_alerted);
     setDonorsResponded(data.donors_responded ?? 0);
+    setUnconfirmedFallback(data.unconfirmed_fallback ?? false);
     if (Array.isArray(data.hospitals)) {
       setHospitals(prev => {
         return data.hospitals.map((newH: any) => {
@@ -77,13 +97,20 @@ export default function PatientResultsView() {
 
       const mockPayload = {
         request_id: requestId,
-        hospitals: [
-          { hospital_id: "h1", name: "SMS Hospital", eta_minutes: 6, status: "pending" as const },
-          { hospital_id: "h2", name: "Fortis Jaipur", eta_minutes: 9, status: isAfter4s ? "confirmed" as const : "pending" as const },
-          { hospital_id: "h3", name: "Manipal Jaipur", eta_minutes: 12, status: isAfter8s ? "declined" as const : "pending" as const }
-        ],
+        hospitals: mockTimeoutSimulation
+          ? [
+              { hospital_id: "h1", name: "SMS Hospital", eta_minutes: 6, status: "pending" as const },
+              { hospital_id: "h2", name: "Fortis Jaipur", eta_minutes: 9, status: "pending" as const },
+              { hospital_id: "h3", name: "Manipal Jaipur", eta_minutes: 12, status: "pending" as const }
+            ]
+          : [
+              { hospital_id: "h1", name: "SMS Hospital", eta_minutes: 6, status: "pending" as const },
+              { hospital_id: "h2", name: "Fortis Jaipur", eta_minutes: 9, status: isAfter4s ? "confirmed" as const : "pending" as const },
+              { hospital_id: "h3", name: "Manipal Jaipur", eta_minutes: 12, status: isAfter8s ? "declined" as const : "pending" as const }
+            ],
         donors_alerted: 5,
-        donors_responded: isAfter4s ? 2 : 0
+        donors_responded: isAfter4s && !mockTimeoutSimulation ? 2 : 0,
+        unconfirmed_fallback: mockTimeoutSimulation
       };
 
       updateStateFromPayload(mockPayload);
@@ -174,6 +201,7 @@ export default function PatientResultsView() {
           const updatedReq = payload.new;
           if (updatedReq) {
             setDonorsResponded(updatedReq.donors_responded ?? 0);
+            setUnconfirmedFallback(updatedReq.unconfirmed_fallback ?? false);
             if (updatedReq.hospitals) {
               setHospitals(prev => {
                 return updatedReq.hospitals.map((newH: any) => {
@@ -225,6 +253,22 @@ export default function PatientResultsView() {
           <span className="font-extrabold text-lg text-ink">Finding help…</span>
         </div>
         <div className="flex items-center gap-2">
+          {isMockMode && (
+            <button
+              type="button"
+              onClick={() => {
+                setMockTimeoutSimulation(!mockTimeoutSimulation);
+                mountTime.current = Date.now(); // reset mock timer
+              }}
+              className={`text-[10px] font-black uppercase tracking-wider px-2 py-1 rounded border transition-colors cursor-pointer ${
+                mockTimeoutSimulation 
+                  ? 'bg-red-100 text-red-800 border-red-300 hover:bg-red-200' 
+                  : 'bg-slate-100 text-slate-700 border-slate-300 hover:bg-slate-200'
+              }`}
+            >
+              TIMEOUT: {mockTimeoutSimulation ? 'ON' : 'OFF'}
+            </button>
+          )}
           <button
             type="button"
             onClick={() => {
@@ -245,6 +289,41 @@ export default function PatientResultsView() {
         </div>
       </div>
 
+      {/* Warning Banners (Rare blood / Timeout Fallback) */}
+      <div className="space-y-3">
+        {rareGroup && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-amber-50 border border-amber-200/50 rounded-2xl p-4 flex items-start gap-3 shadow-sm"
+          >
+            <span className="text-xl flex-shrink-0" role="img" aria-label="Warning">⚠️</span>
+            <div className="space-y-1">
+              <h4 className="text-xs font-bold text-amber-800 uppercase tracking-wider">Rare Blood Group Requested</h4>
+              <p className="text-[11px] text-amber-700 leading-relaxed font-medium">
+                Compatible donors for blood group <span className="font-extrabold text-amber-900">{bloodGroup || 'Rh-negative'}</span> are scarce. Alerts have been broadcast, but supply may be limited.
+              </p>
+            </div>
+          </motion.div>
+        )}
+
+        {unconfirmedFallback && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="bg-red-50 border border-red-200/50 rounded-2xl p-4 flex items-start gap-3 shadow-sm animate-pulse-glow"
+          >
+            <span className="text-xl flex-shrink-0" role="img" aria-label="Alarm">🚨</span>
+            <div className="space-y-1">
+              <h4 className="text-xs font-bold text-red-800 uppercase tracking-wider">Response Timeout Fallback</h4>
+              <p className="text-[11px] text-red-700 leading-relaxed font-medium">
+                No hospital has confirmed the request yet. We strongly recommend contacting the nearest hospital directly using the call links below.
+              </p>
+            </div>
+          </motion.div>
+        )}
+      </div>
+
       {/* Hospital Cards (AnimatePresence for layout transition animations) */}
       <div className="space-y-4" aria-live="polite">
         <AnimatePresence mode="wait">
@@ -405,7 +484,7 @@ export default function PatientResultsView() {
               <svg className="w-4.5 h-4.5 text-emergency animate-pulse" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
               </svg>
-              {isLoading ? 'Locating donors nearby…' : `${donorsAlerted} donors alerted nearby`}
+              {donorsAlerted} donors alerted nearby
             </span>
             <span className="text-[11px] text-slate-500 font-semibold pl-6">
               {donorsResponded > 0 ? `${donorsResponded} responded` : 'Waiting for responses'}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index cd510a7..c74eaab 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -14,6 +14,7 @@ export interface EmergencyResponse {
   request_id: string;
   hospitals: Hospital[];
   donors_alerted: number;
+  rare_group?: boolean;
 }
 
 export interface EmergencyStatusResponse {
@@ -26,6 +27,7 @@ export interface EmergencyStatusResponse {
   }>;
   donors_alerted: number;
   donors_responded: number;
+  unconfirmed_fallback?: boolean;
 }
 
 export interface DonorRegisterResponse {
@@ -92,7 +94,8 @@ export const api = {
     bloodGroup: string,
     lat: number | null,
     lng: number | null,
-    lastDonated: string | null
+    lastDonated: string | null,
+    sex?: 'male' | 'female' | null
   ): Promise<DonorRegisterResponse> {
     const res = await fetch(`${BASE_URL}/donor/register`, {
       method: 'POST',
@@ -106,6 +109,7 @@ export const api = {
         lat,
         lng,
         last_donated: lastDonated,
+        sex,
       }),
     });
     if (!res.ok) {

From bd37537ab5c24722e300d3573f206b9e2435c109 Mon Sep 17 00:00:00 2001
From: Prajnadeep Sarma <prajnadeepsarma@gmail.com>
Date: Sun, 21 Jun 2026 09:44:19 +0530
Subject: [PATCH 2/2] Fix review findings: restore real donors count, revert
 mock default, fix stale closure

- Restore donorsAlerted setter (was frozen at 5); wire data.donors_alerted from
  updateStateFromPayload so the real API value is reflected in the UI
- Revert isMockMode default from opt-out (!== 'false') back to opt-in (=== 'true')
  so fresh production visitors hit the real API, not the mock simulation
- Add useRef guard to the localStorage write-back effect so the initial default
  is never baked into storage for users who never explicitly toggled mock mode
- Add mockTimeoutSimulation to the polling effect dependency array so the TIMEOUT
  toggle takes effect immediately (previously the interval held a stale closure)
- Restore isLoading conditional on the donors-alerted label (shows 'Locating
  donors nearby...' during the skeleton phase instead of the stale count)
---
 frontend/src/components/PatientResultsView.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PatientResultsView.tsx b/frontend/src/components/PatientResultsView.tsx
index 468ccb5..2690e20 100644
--- a/frontend/src/components/PatientResultsView.tsx
+++ b/frontend/src/components/PatientResultsView.tsx
@@ -26,7 +26,7 @@ export default function PatientResultsView() {
   ]);
 
   // Alert metrics
-  const [donorsAlerted] = useState(5);
+  const [donorsAlerted, setDonorsAlerted] = useState(0);
   const [donorsResponded, setDonorsResponded] = useState(0);
 
   // Dynamic status states
@@ -39,15 +39,18 @@ export default function PatientResultsView() {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [hasError, setHasError] = useState<boolean>(false);
 
-  // Configurable Mock state (defaults to true for reliable demo offline mode)
+  // Mock mode is opt-in — defaults to real API; toggle persisted in localStorage
   const [isMockMode, setIsMockMode] = useState<boolean>(() => {
-    return localStorage.getItem('goldenhour_mock_mode') !== 'false';
+    return localStorage.getItem('goldenhour_mock_mode') === 'true';
   });
 
   const mountTime = useRef<number>(Date.now());
+  const isMockModeInitialized = useRef(false);
 
-  // Save toggle choice in localStorage
+  // Save toggle choice in localStorage, but skip the first render so the default
+  // is never baked in for users who have never explicitly toggled.
   useEffect(() => {
+    if (!isMockModeInitialized.current) { isMockModeInitialized.current = true; return; }
     localStorage.setItem('goldenhour_mock_mode', String(isMockMode));
   }, [isMockMode]);
 
@@ -68,6 +71,7 @@ export default function PatientResultsView() {
 
   // Process data returned from status payload
   const updateStateFromPayload = (data: any) => {
+    if (typeof data.donors_alerted === 'number') setDonorsAlerted(data.donors_alerted);
     setDonorsResponded(data.donors_responded ?? 0);
     setUnconfirmedFallback(data.unconfirmed_fallback ?? false);
     if (Array.isArray(data.hospitals)) {
@@ -149,7 +153,7 @@ export default function PatientResultsView() {
       clearInterval(intervalId);
       clearTimeout(skeletonTimer);
     };
-  }, [id, isMockMode]);
+  }, [id, isMockMode, mockTimeoutSimulation]);
 
   // Supabase Realtime subscription (live socket push changes)
   useEffect(() => {
@@ -484,7 +488,7 @@ export default function PatientResultsView() {
               <svg className="w-4.5 h-4.5 text-emergency animate-pulse" fill="currentColor" viewBox="0 0 20 20">
                 <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
               </svg>
-              {donorsAlerted} donors alerted nearby
+              {isLoading ? 'Locating donors nearby…' : `${donorsAlerted} donors alerted nearby`}
             </span>
             <span className="text-[11px] text-slate-500 font-semibold pl-6">
               {donorsResponded > 0 ? `${donorsResponded} responded` : 'Waiting for responses'}