Spaces:

vineelagampa
/

PRMSChallenge

Sleeping

App Files Files Community

Vineela Gampa commited on Oct 3

Commit

e871e34

unverified ·

1 Parent(s): 6a15a6c

minor UI Fixes

Browse files

Files changed (6) hide show

data/app.db +0 -0
web/analyzer.html +5 -6
web/index.html +5 -7
web/login.html +0 -4
web/past_data.html +343 -240
web/profile.html +196 -188

data/app.db CHANGED Viewed

Binary files a/data/app.db and b/data/app.db differ

web/analyzer.html CHANGED Viewed

@@ -12,16 +12,15 @@
     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
-      <div class="flex items-center px-6 py-4 max-w-7xl mx-auto">
         <a
           href="index.html"
-          class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
           >CTRL + ALT + HEAL</a
         >
         <!-- Desktop Links -->
         <ul class="hidden md:flex space-x-6 font-medium text-gray-800 ml-auto">
-          <li><a href="index.html" class="nav-link">Home</a></li>
           <li><a href="profile.html" class="nav-link">Profile</a></li>
           <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
           <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
@@ -69,10 +68,10 @@
       });
     </script>
-    <main class="max-w-5xl mx-auto px-4 mb-16 pt-24">
       <!-- Upload Section -->
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
-        <h2 class="text-xl font-semibold mb-4">
           Upload & Analyze Your Medical PDF or Image
         </h2>
         <input
@@ -107,7 +106,7 @@
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
-        <h3 class="text-lg font-semibold mb-3">AI Findings</h3>
         <div
           id="recommendations-output"
           class="bg-[#F9FAFB] text-sm border border-[var(--wisteria)] rounded p-4 space-y-4"

     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
+      <div class="flex justify-between items-center w-full px-6 py-4">
         <a
           href="index.html"
+          class="text-2xl font-bold text-black hover:text-sky-700 transition"
           >CTRL + ALT + HEAL</a
         >
         <!-- Desktop Links -->
         <ul class="hidden md:flex space-x-6 font-medium text-gray-800 ml-auto">
           <li><a href="profile.html" class="nav-link">Profile</a></li>
           <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
           <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
       });
     </script>
+    <main class="container mx-auto px-6 pt-24">
       <!-- Upload Section -->
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
+        <h2 class="text-xl font-semibold mb-4 text-sky-700">
           Upload & Analyze Your Medical PDF or Image
         </h2>
         <input
       <div
         class="bg-[var(--latte-cream)] border border-[var(--wisteria)] rounded-lg p-6 mb-8"
       >
+        <h3 class="text-lg font-semibold mb-3 text-sky-700">AI Findings</h3>
         <div
           id="recommendations-output"
           class="bg-[#F9FAFB] text-sm border border-[var(--wisteria)] rounded p-4 space-y-4"

web/index.html CHANGED Viewed

@@ -7,14 +7,12 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
     <!-- NAVBAR -->
     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
-      <div
-        class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center"
-      >
         <!-- Logo -->
         <a
           href="index.html"
@@ -230,8 +228,8 @@
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
         appId: "1:491093197824:web:9f86659034af7e6a8244e5",
-        measurementId: "G-JM7T9N6ZLZ"
-      };
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
@@ -311,4 +309,4 @@
       }
     </script>
   </body>
-</html>

     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
+  <body class="min-h-screen flex flex-col">
     <!-- NAVBAR -->
     <nav
       class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
     >
+      <div class="flex justify-between items-center w-full px-6 py-4">
         <!-- Logo -->
         <a
           href="index.html"
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
         appId: "1:491093197824:web:9f86659034af7e6a8244e5",
+        measurementId: "G-JM7T9N6ZLZ",
+      };
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       }
     </script>
   </body>
+</html>

web/login.html CHANGED Viewed

@@ -70,10 +70,6 @@
         <!-- Desktop Menu -->
         <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
           <li><a href="index.html" class="nav-link">Home</a></li>
-          <li><a href="profile.html" class="nav-link">Profile</a></li>
-          <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
-          <li><a href="past_data.html" class="nav-link">Past Report</a></li>
         <button
           id="hamburger"
           class="md:hidden text-[var(--latte-cream)] text-2xl"

         <!-- Desktop Menu -->
         <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
           <li><a href="index.html" class="nav-link">Home</a></li>
         <button
           id="hamburger"
           class="md:hidden text-[var(--latte-cream)] text-2xl"

web/past_data.html CHANGED Viewed

@@ -1,140 +1,196 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Past Analyzes - CTRL + ALT + HEAL</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="stylesheet" href="style.css"></script>
-  <script src="script.js"></script>
-</head>
-<body class="bg-[#F7F8F9] min-h-screen">
-  <nav class="bg-white border border-gray-200 px-6 py-4 mb-8">
-    <div class="container mx-auto flex justify-between items-center">
-      <a href="index.html" class="text-2xl font-bold text-[#6B9080]">CTRL + ALT + HEAL</a>
-      <ul class="flex space-x-6 text-sm font-medium text-gray-700">
-        <li><a href="index.html" class="hover:text-[#6B9080]">Home</a></li>
-        <li><a href="analyzer.html" class="hover:text-[#6B9080]">Analyzer</a></li>
-        <li><a href="past_data.html" class="hover:text-[#6B9080]">Past Reports</a></li>
-        <li><a href="profile.html" class="hover:text-[#6B9080]">Profile</a></li>
-        <li id="authNavItem"><a href="login.html" class="hover:text-[#6B9080]">Login</a></li>
-      </ul>
-    </div>
-  </nav>
-  <main class="max-w-4xl mx-auto px-4">
-    <h1 class="text-2xl font-bold text-green-700 mb-4">Your Past Analyzes</h1>
-    <p id="auth-status" class="text-sm text-gray-500 mb-6">Checking sign-in status…</p>
-    <div id="recs-container" class="space-y-4">
-      <p class="text-sm text-gray-500"></p>
-    </div>
-  </main>
-  <script type="module">
-    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
-    import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';
-    import { getFirestore, collection, query, orderBy, getDocs } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
-    const firebaseConfig = {
-      apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
-      authDomain: "login-tutorial-7a9e1.firebaseapp.com",
-      projectId: "login-tutorial-7a9e1",
-      storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
-      messagingSenderId: "491093197824",
-      appId: "1:491093197824:web:9f86659034af7e6a8244e5",
-      measurementId: "G-JM7T9N6ZLZ"
-    };
-    const app  = initializeApp(firebaseConfig);
-    const auth = getAuth(app);
-    const db   = getFirestore(app);
-    let currentUser = null;
-    onAuthStateChanged(auth, (user) => {
-      const authNavItem = document.getElementById("authNavItem");
-      if (authNavItem) {
-        if (user) {
-          authNavItem.innerHTML =
-            '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
-        } else {
-          authNavItem.innerHTML =
-            '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
         }
       }
-    });
-    window.logout = async () => {
-      try {
-        await signOut(auth);
-        localStorage.clear();
-        window.location.href = "login.html";
-      } catch (error) {
-        console.error("Error signing out:", error);
       }
-    };
-    const statusEl = document.getElementById("auth-status");
-    const recsEl   = document.getElementById("recs-container");
-    function dbg(label, data) {
-      console.log(`[PastReports][${new Date().toISOString()}] ${label}:`, data);
-    }
-    const SHOW_DEBUG = true;
-    let debugBannerEl = null;
-    if (SHOW_DEBUG) {
-      debugBannerEl = document.createElement('div');
-      debugBannerEl.style.cssText = 'font-size:12px;margin-top:6px;color:#6b7280;';
-      statusEl.after(debugBannerEl);
-    }
-    function setDebugBanner(msg) {
-      if (debugBannerEl) debugBannerEl.textContent = `Debug: ${msg}`;
-    }
-    window.toggleBox = function (id) {
-      const content = document.getElementById(`box-content-${id}`);
-      const arrow = document.getElementById(`box-arrow-${id}`);
-      if (!content || !arrow) return;
-      const open = content.style.maxHeight && content.style.maxHeight !== "0px";
-      if (open) {
-        content.style.maxHeight = "0px";
-        arrow.style.transform = "rotate(0deg)";
-      } else {
-        content.style.maxHeight = content.scrollHeight + "px";
-        arrow.textContent = "Close Full View";
       }
-    };
-    function safeJson(x) {
-      try { return typeof x === "string" ? JSON.parse(x) : x; } catch { return x; }
-    }
-    function topAnomalyLabels(anoms, n = 3) {
-      const arr = Array.isArray(anoms) ? anoms : [];
-      return arr.slice(0, n).map(a =>
-        (a?.findings ?? a?.condition ?? a?.measurement ?? "").toString()
-      ).filter(Boolean);
-    }
-    function deriveReportName(row) {
-      if (row.filename) return row.filename;
-      if (row.report_date) return `Report ${new Date(row.report_date).toLocaleDateString()}`;
-      if (row.ocr_text) {
-        const first = row.ocr_text.split(/\r?\n/).find(l => l.trim());
-        if (first) return first.slice(0, 50) + (first.length > 50 ? "…" : "");
       }
-      return "Report";
-    }
-    function renderBackendReportCollapsible(row, idx) {
-      const id = `r${row.id || idx}`;
-      const created = row.created_at ? new Date(row.created_at).toLocaleString() : "";
-      const reportName = deriveReportName(row);
-      const anomaliesRaw = safeJson(row.anomalies);
-      const anomalies = Array.isArray(anomaliesRaw) ? anomaliesRaw : [];
-      const top3 = topAnomalyLabels(anomalies, 3);
-      return `
         <div class="bg-white border border-gray-200 rounded-lg shadow">
           <!-- Header (clickable) -->
           <button
@@ -143,15 +199,19 @@
           >
             <div class="min-w-0">
               <div class="text-xs text-gray-500">${created || "—"}</div>
-              <div class="font-semibold text-green-700 truncate">${reportName}</div>
               ${
                 top3.length
                   ? `<div class="flex flex-wrap gap-2 mt-2">
-                      ${top3.map(t => `
                         <span class="text-xs bg-gray-100 border border-gray-200 px-2 py-1 rounded">
                           ${t}
                         </span>
-                      `).join("")}
                     </div>`
                   : `<div class="text-xs text-gray-400 mt-2">No anomalies detected</div>`
               }
@@ -165,25 +225,32 @@
             class="overflow-hidden transition-all duration-300 max-h-0 border-t border-gray-200"
           >
             <div class="p-4 space-y-3">
-              <!-- OCR -->
-              <div>
-                <div class="font-medium mb-1">OCR Text</div>
-                <pre class="whitespace-pre-wrap text-sm text-gray-700 bg-gray-50 border rounded p-3">${row.ocr_text || ""}</pre>
-              </div>
               <!-- Full anomalies list -->
               ${
                 anomalies.length
                   ? `
                     <div class="pt-2 border-t border-gray-100">
                       <div class="font-medium mb-2">Findings</div>
-                      ${anomalies.map((a, i) => `
                         <div class="border-t border-gray-200 pt-2 mt-2">
-                          <div class="font-medium">Finding ${i + 1}: ${a?.findings ?? ""}</div>
-                          <div class="text-sm text-gray-600">Severity: ${a?.severity ?? ""}</div>
-                          <div class="text-sm text-gray-600">Recommendations: ${(Array.isArray(a?.recommendations) ? a.recommendations : []).join(", ")}</div>
                         </div>
-                      `).join("")}
                     </div>
                   `
                   : ""
@@ -192,22 +259,24 @@
           </div>
         </div>
       `;
-    }
-    function renderFirestoreReportCollapsible(item, idx) {
-      const id = `f${idx}`;
-      const created =
-        item?.createdAt && item.createdAt.toDate
-          ? item.createdAt.toDate().toLocaleString()
-          : "";
-      const reportName = item?.reportDate
-        ? `Report ${item.reportDate}`
-        : "Report";
-      const anomalies = Array.isArray(item?.resolutions) ? item.resolutions : [];
-      const top3 = topAnomalyLabels(anomalies, 3);
-      return `
         <div class="bg-white border border-gray-200 rounded-lg shadow">
           <!-- Header (clickable) -->
           <button
@@ -216,7 +285,7 @@
           >
             <div class="min-w-0">
               <div class="text-xs text-gray-500">${created || "—"}</div>
-              <div class="font-semibold text-green-700 truncate">${reportName}</div>
               ${
                 top3.length
                   ? `<div class="flex flex-wrap gap-2 mt-2">
@@ -242,12 +311,7 @@
           >
             <div class="p-4 space-y-3">
               <!-- OCR -->
-              <div>
-                <div class="font-medium mb-1">OCR Text</div>
-                <pre class="whitespace-pre-wrap text-sm text-gray-700 bg-gray-50 border rounded p-3">${
-                  item?.ocr_text || ""
-                }</pre>
-              </div>
               <!-- Full anomalies list -->
               ${
@@ -259,8 +323,12 @@
                         .map(
                           (a, i) => `
                         <div class="border-t border-gray-200 pt-2 mt-2">
-                          <div class="font-medium">Finding ${i + 1}: ${a?.findings ?? ""}</div>
-                          <div class="text-sm text-gray-600">Severity: ${a?.severity ?? ""}</div>
                           <div class="text-sm text-gray-600">Recommendations: ${
                             Array.isArray(a?.recommendations)
                               ? a.recommendations.join(", ")
@@ -277,97 +345,132 @@
           </div>
         </div>
       `;
-    }
-    function renderBackendRow(row) {
-      const created = row.created_at ? new Date(row.created_at).toLocaleString() : '';
-      const reportDate = row.report_date || 'N/A';
-      const anomalies = (() => {
-        try { return Array.isArray(row.anomalies) ? row.anomalies : JSON.parse(row.anomalies || '[]'); }
-        catch { return []; }
-      })();
-      return `
         <div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
           <div class="flex justify-between mb-2">
-            <div class="font-semibold text-green-700">Report: ${reportDate}</div>
             <div class="text-xs text-gray-500">${created}</div>
           </div>
-          <pre class="whitespace-pre-wrap text-sm text-gray-700 mb-2">${row.ocr_text || ''}</pre>
-          ${anomalies.map((r,i)=>`
             <div class="border-t border-gray-200 pt-2 mt-2">
-              <div class="font-medium">Finding ${i+1}: ${r?.findings ?? ''}</div>
-              <div class="text-sm text-gray-600">Severity: ${r?.severity ?? ''}</div>
-              <div class="text-sm text-gray-600">Recommendations: ${(Array.isArray(r?.recommendations)?r.recommendations:[]).join(', ')}</div>
             </div>
-          `).join('')}
         </div>`;
-    }
-    function renderList(htmlItems) {
-      recsEl.innerHTML = htmlItems && htmlItems.length
-        ? htmlItems.join('')
-        : '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
-    }
-    async function loadFromBackend(user) {
-      try {
-        const userId = user.email || user.uid;
-        const url = api('reports/', { user_id: userId });
-        dbg('Backend URL', url);
-        const res = await fetch(url, { method: 'GET' });
-        dbg('Backend HTTP status', res.status);
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data = await res.json();
-        dbg('Backend payload', data);
-        return Array.isArray(data) ? data : [];
-      } catch (e) {
-        console.error('Backend fetch failed:', e);
-        dbg('Backend fetch error', e.message || e);
-        return [];
       }
-    }
-    async function loadFromFirestore(user) {
-      try {
-        const q = query(collection(db, 'users', user.uid, 'analyses'), orderBy('createdAt', 'desc'));
-        dbg('Firestore query uid', user.uid);
-        const snap = await getDocs(q);
-        const rows = snap.docs.map(d => d.data());
-        dbg('Firestore count', rows.length);
-        return rows;
-      } catch (e) {
-        console.error('Firestore fetch failed:', e);
-        dbg('Firestore fetch error', e.message || e);
-        return [];
       }
-    }
-    onAuthStateChanged(auth, async (user) => {
-      if (!user) {
-        statusEl.textContent = 'Not signed in.';
-        renderList([]);
-        setDebugBanner('User is not signed in.');
-        return;
       }
-      statusEl.textContent = `Signed in as ${user.email || user.uid}`;
-      const backendRows   = await loadFromBackend(user);
-      const firestoreRows = await loadFromFirestore(user);
-      setDebugBanner(`backend: ${backendRows.length} | firestore: ${firestoreRows.length}`);
-      dbg('Summary', { backend: backendRows.length, firestore: firestoreRows.length });
-      if (backendRows.length > 0) {
-        recsEl.innerHTML = backendRows.map((row, i) => renderBackendReportCollapsible(row, i)).join("");
-      } else if (firestoreRows.length > 0) {
-        recsEl.innerHTML = firestoreRows.map((row, i) => renderFirestoreReportCollapsible(row, i)).join("");
-      } else {
-        recsEl.innerHTML = '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
-      }
-    });
-  </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Past Analyzes - CTRL + ALT + HEAL</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="stylesheet" href="style.css"></script>
+    <script src="script.js"></script>
+  </head>
+  <body class="bg-[#F7F8F9] min-h-screen">
+    <nav
+      class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
+    >
+      <div class="flex justify-between items-center w-full px-6 py-4">
+        <a
+          href="index.html"
+          class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
+        >
+          CTRL + ALT + HEAL
+        </a>
+        <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
+          <li>
+            <a
+              href="profile.html"
+              class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+              >Profile</a
+            >
+          </li>
+          <li>
+            <a
+              href="analyzer.html"
+              class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+              >Analyzer</a
+            >
+          </li>
+          <li>
+            <a
+              href="past_data.html"
+              class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+              >Past Reports</a
+            >
+          </li>
+          <li id="authNavItem">
+            <a
+              href="login.html"
+              class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+              >Login</a
+            >
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <main class="container mx-auto px-6 pt-24">
+      <h2 class="text-xl font-semibold mb-4 text-sky-700">
+        Your Past Analyzes
+      </h2>
+      <p id="auth-status" class="text-sm text-gray-500 mb-6">
+        Checking sign-in status…
+      </p>
+      <div id="recs-container" class="space-y-4">
+        <p class="text-sm text-gray-500"></p>
+      </div>
+    </main>
+    <script type="module">
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
+      import {
+        getAuth,
+        onAuthStateChanged,
+        signOut,
+      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
+      import {
+        getFirestore,
+        collection,
+        query,
+        orderBy,
+        getDocs,
+      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
+      const firebaseConfig = {
+        apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
+        authDomain: "login-tutorial-7a9e1.firebaseapp.com",
+        projectId: "login-tutorial-7a9e1",
+        storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
+        messagingSenderId: "491093197824",
+        appId: "1:491093197824:web:9f86659034af7e6a8244e5",
+        measurementId: "G-JM7T9N6ZLZ",
+      };
+      const app = initializeApp(firebaseConfig);
+      const auth = getAuth(app);
+      const db = getFirestore(app);
+      let currentUser = null;
+      onAuthStateChanged(auth, (user) => {
+        const authNavItem = document.getElementById("authNavItem");
+        if (authNavItem) {
+          if (user) {
+            authNavItem.innerHTML =
+              '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
+          } else {
+            authNavItem.innerHTML =
+              '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
+          }
+        }
+      });
+      window.logout = async () => {
+        try {
+          await signOut(auth);
+          localStorage.clear();
+          window.location.href = "login.html";
+        } catch (error) {
+          console.error("Error signing out:", error);
         }
+      };
+      const statusEl = document.getElementById("auth-status");
+      const recsEl = document.getElementById("recs-container");
+      function dbg(label, data) {
+        console.log(
+          `[PastReports][${new Date().toISOString()}] ${label}:`,
+          data
+        );
       }
+      const SHOW_DEBUG = true;
+      let debugBannerEl = null;
+      if (SHOW_DEBUG) {
+        debugBannerEl = document.createElement("div");
+        debugBannerEl.style.cssText =
+          "font-size:12px;margin-top:6px;color:#6b7280;";
+        statusEl.after(debugBannerEl);
+      }
+      function setDebugBanner(msg) {
+        if (debugBannerEl) debugBannerEl.textContent = `Debug: ${msg}`;
       }
+      window.toggleBox = function (id) {
+        const content = document.getElementById(`box-content-${id}`);
+        const arrow = document.getElementById(`box-arrow-${id}`);
+        if (!content || !arrow) return;
+        const open =
+          content.style.maxHeight && content.style.maxHeight !== "0px";
+        if (open) {
+          content.style.maxHeight = "0px";
+          arrow.style.transform = "rotate(0deg)";
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+          arrow.textContent = "Close Full View";
+        }
+      };
+      function safeJson(x) {
+        try {
+          return typeof x === "string" ? JSON.parse(x) : x;
+        } catch {
+          return x;
+        }
       }
+      function topAnomalyLabels(anoms, n = 3) {
+        const arr = Array.isArray(anoms) ? anoms : [];
+        return arr
+          .slice(0, n)
+          .map((a) =>
+            (a?.findings ?? a?.condition ?? a?.measurement ?? "").toString()
+          )
+          .filter(Boolean);
+      }
+      function deriveReportName(row) {
+        if (row.filename) return row.filename;
+        if (row.report_date)
+          return `Report ${new Date(row.report_date).toLocaleDateString()}`;
+        if (row.ocr_text) {
+          const first = row.ocr_text.split(/\r?\n/).find((l) => l.trim());
+          if (first) return first.slice(0, 50) + (first.length > 50 ? "…" : "");
+        }
+        return "Report";
       }
+      function renderBackendReportCollapsible(row, idx) {
+        const id = `r${row.id || idx}`;
+        const created = row.created_at
+          ? new Date(row.created_at).toLocaleString()
+          : "";
+        const reportName = deriveReportName(row);
+        const anomaliesRaw = safeJson(row.anomalies);
+        const anomalies = Array.isArray(anomaliesRaw) ? anomaliesRaw : [];
+        const top3 = topAnomalyLabels(anomalies, 3);
+        return `
         <div class="bg-white border border-gray-200 rounded-lg shadow">
           <!-- Header (clickable) -->
           <button
           >
             <div class="min-w-0">
               <div class="text-xs text-gray-500">${created || "—"}</div>
+              <div class="font-semibold text-sky-700 truncate">${reportName}</div>
               ${
                 top3.length
                   ? `<div class="flex flex-wrap gap-2 mt-2">
+                      ${top3
+                        .map(
+                          (t) => `
                         <span class="text-xs bg-gray-100 border border-gray-200 px-2 py-1 rounded">
                           ${t}
                         </span>
+                      `
+                        )
+                        .join("")}
                     </div>`
                   : `<div class="text-xs text-gray-400 mt-2">No anomalies detected</div>`
               }
             class="overflow-hidden transition-all duration-300 max-h-0 border-t border-gray-200"
           >
             <div class="p-4 space-y-3">
               <!-- Full anomalies list -->
               ${
                 anomalies.length
                   ? `
                     <div class="pt-2 border-t border-gray-100">
                       <div class="font-medium mb-2">Findings</div>
+                      ${anomalies
+                        .map(
+                          (a, i) => `
                         <div class="border-t border-gray-200 pt-2 mt-2">
+                          <div class="font-medium">Finding ${i + 1}: ${
+                            a?.findings ?? ""
+                          }</div>
+                          <div class="text-sm text-gray-600">Severity: ${
+                            a?.severity ?? ""
+                          }</div>
+                          <div class="text-sm text-gray-600">Recommendations: ${(Array.isArray(
+                            a?.recommendations
+                          )
+                            ? a.recommendations
+                            : []
+                          ).join(", ")}</div>
                         </div>
+                      `
+                        )
+                        .join("")}
                     </div>
                   `
                   : ""
           </div>
         </div>
       `;
+      }
+      function renderFirestoreReportCollapsible(item, idx) {
+        const id = `f${idx}`;
+        const created =
+          item?.createdAt && item.createdAt.toDate
+            ? item.createdAt.toDate().toLocaleString()
+            : "";
+        const reportName = item?.reportDate
+          ? `Report ${item.reportDate}`
+          : "Report";
+        const anomalies = Array.isArray(item?.resolutions)
+          ? item.resolutions
+          : [];
+        const top3 = topAnomalyLabels(anomalies, 3);
+        return `
         <div class="bg-white border border-gray-200 rounded-lg shadow">
           <!-- Header (clickable) -->
           <button
           >
             <div class="min-w-0">
               <div class="text-xs text-gray-500">${created || "—"}</div>
+              <div class="font-semibold text-blue-700 truncate">${reportName}</div>
               ${
                 top3.length
                   ? `<div class="flex flex-wrap gap-2 mt-2">
           >
             <div class="p-4 space-y-3">
               <!-- OCR -->
               <!-- Full anomalies list -->
               ${
                         .map(
                           (a, i) => `
                         <div class="border-t border-gray-200 pt-2 mt-2">
+                          <div class="font-medium">Finding ${i + 1}: ${
+                            a?.findings ?? ""
+                          }</div>
+                          <div class="text-sm text-gray-600">Severity: ${
+                            a?.severity ?? ""
+                          }</div>
                           <div class="text-sm text-gray-600">Recommendations: ${
                             Array.isArray(a?.recommendations)
                               ? a.recommendations.join(", ")
           </div>
         </div>
       `;
+      }
+      function renderBackendRow(row) {
+        const created = row.created_at
+          ? new Date(row.created_at).toLocaleString()
+          : "";
+        const reportDate = row.report_date || "N/A";
+        const anomalies = (() => {
+          try {
+            return Array.isArray(row.anomalies)
+              ? row.anomalies
+              : JSON.parse(row.anomalies || "[]");
+          } catch {
+            return [];
+          }
+        })();
+        return `
         <div class="bg-white border border-gray-200 rounded-lg p-4 shadow">
           <div class="flex justify-between mb-2">
+            <div class="font-semibold text-blue-700">Report: ${reportDate}</div>
             <div class="text-xs text-gray-500">${created}</div>
           </div>
+          <pre class="whitespace-pre-wrap text-sm text-gray-700 mb-2">${
+            row.ocr_text || ""
+          }</pre>
+          ${anomalies
+            .map(
+              (r, i) => `
             <div class="border-t border-gray-200 pt-2 mt-2">
+              <div class="font-medium">Finding ${i + 1}: ${
+                r?.findings ?? ""
+              }</div>
+              <div class="text-sm text-gray-600">Severity: ${
+                r?.severity ?? ""
+              }</div>
+              <div class="text-sm text-gray-600">Recommendations: ${(Array.isArray(
+                r?.recommendations
+              )
+                ? r.recommendations
+                : []
+              ).join(", ")}</div>
             </div>
+          `
+            )
+            .join("")}
         </div>`;
       }
+      function renderList(htmlItems) {
+        recsEl.innerHTML =
+          htmlItems && htmlItems.length
+            ? htmlItems.join("")
+            : '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
       }
+      async function loadFromBackend(user) {
+        try {
+          const userId = user.email || user.uid;
+          const url = api('reports/', { user_id: userId });
+          dbg("Backend URL", url);
+          const res = await fetch(url, { method: "GET" });
+          dbg("Backend HTTP status", res.status);
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          const data = await res.json();
+          dbg("Backend payload", data);
+          return Array.isArray(data) ? data : [];
+        } catch (e) {
+          console.error("Backend fetch failed:", e);
+          dbg("Backend fetch error", e.message || e);
+          return [];
+        }
       }
+      async function loadFromFirestore(user) {
+        try {
+          const q = query(
+            collection(db, "users", user.uid, "analyses"),
+            orderBy("createdAt", "desc")
+          );
+          dbg("Firestore query uid", user.uid);
+          const snap = await getDocs(q);
+          const rows = snap.docs.map((d) => d.data());
+          dbg("Firestore count", rows.length);
+          return rows;
+        } catch (e) {
+          console.error("Firestore fetch failed:", e);
+          dbg("Firestore fetch error", e.message || e);
+          return [];
+        }
+      }
+      onAuthStateChanged(auth, async (user) => {
+        if (!user) {
+          statusEl.textContent = "Not signed in.";
+          renderList([]);
+          setDebugBanner("User is not signed in.");
+          return;
+        }
+        statusEl.textContent = `Signed in as ${user.email || user.uid}`;
+        const backendRows = await loadFromBackend(user);
+        const firestoreRows = await loadFromFirestore(user);
+        setDebugBanner(
+          `backend: ${backendRows.length} | firestore: ${firestoreRows.length}`
+        );
+        dbg("Summary", {
+          backend: backendRows.length,
+          firestore: firestoreRows.length,
+        });
+        if (backendRows.length > 0) {
+          recsEl.innerHTML = backendRows
+            .map((row, i) => renderBackendReportCollapsible(row, i))
+            .join("");
+        } else if (firestoreRows.length > 0) {
+          recsEl.innerHTML = firestoreRows
+            .map((row, i) => renderFirestoreReportCollapsible(row, i))
+            .join("");
+        } else {
+          recsEl.innerHTML =
+            '<p class="text-sm text-gray-500">No saved analyses yet.</p>';
+        }
+      });
+    </script>
+  </body>
+</html>

web/profile.html CHANGED Viewed

@@ -102,23 +102,16 @@
       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
         <!-- PROFILE VIEW -->
         <div id="profileViewSection">
-          <div class="flex items-start space-x-6 mb-10">
-            <div class="flex flex-col items-center">
-              <img src="https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1256-80.jpg.webp"
-     alt="Profile Tree"
-     class="w-32 h-32 object-cover rounded-full border border-gray-300">
-              <button id="editProfileBtn" class="mt-2 px-4 py-2 rounded">
-                Edit Profile
-              </button>
-              <a href="analyzer.html">
-                <button id="analyzerBtn" class="mt-2 px-4 py-2 rounded">
-                  Go To Analyzer
-                </button>
-              </a>
             </div>
-            <div>
-              <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
               <p class="mb-2">
                 Name: <span id="userName" class="font-medium">Loading...</span>
               </p>
@@ -126,17 +119,26 @@
                 DOB: <span id="userDOB" class="font-medium">Loading...</span>
               </p>
             </div>
           </div>
         </div>
         <!-- PROFILE EDIT -->
         <div id="profileEditSection" class="hidden mb-10">
           <div class="flex flex-col sm:flex-row items-start space-x-6">
-            <div class="flex flex-col items-center mb-4 sm:mb-0">
-              <img src="https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1256-80.jpg.webp"
-     alt="Profile Tree"
-     class="w-32 h-32 object-cover rounded-full border border-gray-300">
             </div>
             <div class="flex-1">
               <h1 class="text-3xl font-semibold mb-4">Edit Profile</h1>
@@ -175,7 +177,7 @@
         </div>
         <!-- RANGE BARS -->
-        <h2 class="text-xl font-semibold mb-4">Your Current Health Summary</h2>
         <div class="tabs">
           <div class="tab active" data-tab="out-range">
             Out of Range <span class="count-badge">0</span>
@@ -210,8 +212,8 @@
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
         appId: "1:491093197824:web:9f86659034af7e6a8244e5",
-        measurementId: "G-JM7T9N6ZLZ"
-      };
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
@@ -227,174 +229,183 @@
       // Fetch measurements from backend API
       async function getUserMeasurements(userId) {
-      try {
-    const url = api("user_measurements/", { user_id: userId });
-    const res = await fetch(url);
-    if (!res.ok) throw new Error("Failed to fetch measurements");
-        const data = await res.json();
-    return (data.measurements || []).map((m) => ({
-      name: m.measurement_type,
-      value: Number(m.value),
-      min: Number(m.min),
-      max: Number(m.max),
-      tab: m.status === "HIGH" || m.status === "LOW" ? "out-range" : "in-range",
-      impacts: m.impacts || [],
-    }));
-  } catch (e) {
-    console.error("Error fetching user measurements:", e);
-    return [];
-  }
-}
       function getLatestByType(measurements) {
-  const latest = {};
-  measurements.forEach(m => {
-    if (!latest[m.name] || new Date(m.timestamp) > new Date(latest[m.name].timestamp)) {
-      latest[m.name] = m;
-    }
-  });
-  return Object.values(latest);
-}
-      // Render bars in the UI based on measurement array
-function renderBars(measurements) {
-  console.log("measurements",measurements);
-  const counts = { "in-range": 0, "out-range": 0 };
-  const tabs = document.querySelectorAll(".tab");
-  const contents = document.querySelectorAll(".tab-content");
-  // Clear existing content
-  contents.forEach((c) => (c.innerHTML = ""));
-  measurements.forEach((m) => {
-    counts[m.tab]++;
-    const container = document.getElementById(m.tab);
-    const card = document.createElement("div");
-    card.className = "range-card";
-    const title = document.createElement("h3");
-    title.className = "measurement-title";
-    title.textContent = m.name;
-    card.appendChild(title);
-    if (m.impacts?.length) {
-      const impactLabel = document.createElement("div");
-      impactLabel.className = "impact-label";
-      impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
-      card.appendChild(impactLabel);
-    }
-    const barContainer = document.createElement("div");
-    barContainer.className = "range-bar-container";
-    const bar = document.createElement("div");
-    bar.className = "range-bar";
-    let normalPercent = 100;
-    let overflowPercent = 0;
-    if (m.tab === "out-range" && m.value > m.max) {
-      normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
-      overflowPercent = 100 - normalPercent;
-    }
-    const normalDiv = document.createElement("div");
-    normalDiv.className = "normal-range";
-    normalDiv.style.width = normalPercent + "%";
-    bar.appendChild(normalDiv);
-    if (overflowPercent > 0) {
-      const overflowDiv = document.createElement("div");
-      overflowDiv.className = "overflow-range";
-      overflowDiv.style.left = normalPercent + "%";
-      overflowDiv.style.width = overflowPercent + "%";
-      bar.appendChild(overflowDiv);
-    }
-    let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
-    valuePercent = Math.min(Math.max(valuePercent, 0), 100);
-    const marker = document.createElement("div");
-    marker.className = "marker";
-    marker.style.left = valuePercent + "%";
-    bar.appendChild(marker);
-    const valueLabel = document.createElement("div");
-    valueLabel.className = "value-label";
-    valueLabel.style.left = valuePercent + "%";
-    valueLabel.textContent = m.value;
-    bar.appendChild(valueLabel);
-    barContainer.appendChild(bar);
-    const minMaxDiv = document.createElement("div");
-    minMaxDiv.className = "min-max-labels relative w-full";
-    const minLabel = document.createElement("span");
-    minLabel.textContent = "Min: " + m.min;
-    minLabel.style.position = "absolute";
-    minLabel.style.left = "0";
-    const maxLabel = document.createElement("span");
-    maxLabel.textContent = "Max: " + m.max;
-    maxLabel.style.position = "absolute";
-    let maxPercent = 100;
-    if (m.value > m.max) maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
-    maxLabel.style.left = maxPercent + "%";
-    maxLabel.style.transform = "translateX(-100%)";
-    minMaxDiv.appendChild(minLabel);
-    minMaxDiv.appendChild(maxLabel);
-    barContainer.appendChild(minMaxDiv);
-    card.appendChild(barContainer);
-    container.appendChild(card);
-  });
-  // Update tab badges
-  tabs.forEach((tab) => {
-    const t = tab.dataset.tab;
-    const badge = tab.querySelector(".count-badge");
-    badge.textContent = counts[t];
-    tab.addEventListener("click", () => {
-      tabs.forEach((t) => t.classList.remove("active"));
-      tab.classList.add("active");
-      contents.forEach((c) =>
-        c.id === t ? c.classList.add("active") : c.classList.remove("active")
-      );
-    });
-  });
-}
       // ✅ Auth State Handling
       onAuthStateChanged(auth, async (user) => {
-  const authNavItem = document.getElementById("authNavItem");
-  if (user) {
-    currentUser = user;
-    await loadUserProfile();
-    // ✅ fetch and render bars after user is ready
-    console.log("currentuser data",currentUser);
-    // const measurements = await getUserMeasurements(currentUser.uid);
-    let measurements = await getUserMeasurements(currentUser.email);
-      measurements = getLatestByType(measurements);
-    renderBars(measurements);
-    authNavItem.innerHTML = '<button onclick="logout()" style="color:red">Logout</button>';
-    if (homeNavDesktop) homeNavDesktop.style.display = "none";
-    if (homeNavMobile) homeNavMobile.style.display = "none";
-  } else {
-    authNavItem.innerHTML = '<a href="login.html">Login</a>';
-    if (homeNavDesktop) homeNavDesktop.style.display = "";
-    if (homeNavMobile) homeNavMobile.style.display = "";
-    window.location.href = "login.html";
-  }
-});
       async function loadUserProfile() {
         try {
@@ -450,8 +461,6 @@ function renderBars(measurements) {
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
@@ -477,8 +486,7 @@ function renderBars(measurements) {
         // RANGE BARS LOGIC
         const tabs = document.querySelectorAll(".tab");
         const contents = document.querySelectorAll(".tab-content");
       });
     </script>
   </body>
-</html>

       <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
         <!-- PROFILE VIEW -->
         <div id="profileViewSection">
+          <div class="grid grid-cols-10">
+            <div class="col-span-1">
+              <img
+                src="https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1256-80.jpg.webp"
+                alt="Profile Tree"
+                class="w-32 h-32 object-cover rounded-full border border-gray-300"
+              />
             </div>
+            <div class="col-span-5">
+              <h2 class="text-xl font-semibold mb-4 text-sky-700">Your Profile</h2>
               <p class="mb-2">
                 Name: <span id="userName" class="font-medium">Loading...</span>
               </p>
                 DOB: <span id="userDOB" class="font-medium">Loading...</span>
               </p>
             </div>
+            <div class="col-span-4">
+              <button id="editProfileBtn" class="mt-2 px-4 py-2 rounded">
+                Edit Profile
+              </button>
+              <button id="analyzerBtn" class="mt-2 px-4 py-2 rounded">
+                Go To Analyzer
+              </button>
+            </div>
           </div>
         </div>
         <!-- PROFILE EDIT -->
         <div id="profileEditSection" class="hidden mb-10">
           <div class="flex flex-col sm:flex-row items-start space-x-6">
+            <div>
+              <img
+                src="https://cdn.mos.cms.futurecdn.net/ARWms77gyVZ5u2MZkQqcKc-1256-80.jpg.webp"
+                alt="Profile Tree"
+                class="w-32 h-32 object-cover rounded-full border border-gray-300"
+              />
             </div>
             <div class="flex-1">
               <h1 class="text-3xl font-semibold mb-4">Edit Profile</h1>
         </div>
         <!-- RANGE BARS -->
+        <h2 class="text-xl font-semibold mb-4 text-sky-700">Your Current Health Summary</h2>
         <div class="tabs">
           <div class="tab active" data-tab="out-range">
             Out of Range <span class="count-badge">0</span>
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
         appId: "1:491093197824:web:9f86659034af7e6a8244e5",
+        measurementId: "G-JM7T9N6ZLZ",
+      };
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       // Fetch measurements from backend API
       async function getUserMeasurements(userId) {
+        try {
+         // const url = api("https://vineelagampa-prmschallenge.hf.space/user_measurements/", { user_id: userId });
+         const url = api("user_measurements/", { user_id: userId });
+          const res = await fetch(url);
+          if (!res.ok) throw new Error("Failed to fetch measurements");
+          const data = await res.json();
+          return (data.measurements || []).map((m) => ({
+            name: m.measurement_type,
+            value: Number(m.value),
+            min: Number(m.min),
+            max: Number(m.max),
+            tab:
+              m.status === "HIGH" || m.status === "LOW"
+                ? "out-range"
+                : "in-range",
+            impacts: m.impacts || [],
+          }));
+        } catch (e) {
+          console.error("Error fetching user measurements:", e);
+          return [];
+        }
+      }
       function getLatestByType(measurements) {
+        const latest = {};
+        measurements.forEach((m) => {
+          if (
+            !latest[m.name] ||
+            new Date(m.timestamp) > new Date(latest[m.name].timestamp)
+          ) {
+            latest[m.name] = m;
+          }
+        });
+        return Object.values(latest);
+      }
+      // Render bars in the UI based on measurement array
+      function renderBars(measurements) {
+        console.log("measurements", measurements);
+        const counts = { "in-range": 0, "out-range": 0 };
+        const tabs = document.querySelectorAll(".tab");
+        const contents = document.querySelectorAll(".tab-content");
+        // Clear existing content
+        contents.forEach((c) => (c.innerHTML = ""));
+        measurements.forEach((m) => {
+          counts[m.tab]++;
+          const container = document.getElementById(m.tab);
+          const card = document.createElement("div");
+          card.className = "range-card";
+          const title = document.createElement("h3");
+          title.className = "measurement-title";
+          title.textContent = m.name;
+          card.appendChild(title);
+          if (m.impacts?.length) {
+            const impactLabel = document.createElement("div");
+            impactLabel.className = "impact-label";
+            impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
+            card.appendChild(impactLabel);
+          }
+          const barContainer = document.createElement("div");
+          barContainer.className = "range-bar-container";
+          const bar = document.createElement("div");
+          bar.className = "range-bar";
+          let normalPercent = 100;
+          let overflowPercent = 0;
+          if (m.tab === "out-range" && m.value > m.max) {
+            normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+            overflowPercent = 100 - normalPercent;
+          }
+          const normalDiv = document.createElement("div");
+          normalDiv.className = "normal-range";
+          normalDiv.style.width = normalPercent + "%";
+          bar.appendChild(normalDiv);
+          if (overflowPercent > 0) {
+            const overflowDiv = document.createElement("div");
+            overflowDiv.className = "overflow-range";
+            overflowDiv.style.left = normalPercent + "%";
+            overflowDiv.style.width = overflowPercent + "%";
+            bar.appendChild(overflowDiv);
+          }
+          let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
+          valuePercent = Math.min(Math.max(valuePercent, 0), 100);
+          const marker = document.createElement("div");
+          marker.className = "marker";
+          marker.style.left = valuePercent + "%";
+          bar.appendChild(marker);
+          const valueLabel = document.createElement("div");
+          valueLabel.className = "value-label";
+          valueLabel.style.left = valuePercent + "%";
+          valueLabel.textContent = m.value;
+          bar.appendChild(valueLabel);
+          barContainer.appendChild(bar);
+          const minMaxDiv = document.createElement("div");
+          minMaxDiv.className = "min-max-labels relative w-full";
+          const minLabel = document.createElement("span");
+          minLabel.textContent = "Min: " + m.min;
+          minLabel.style.position = "absolute";
+          minLabel.style.left = "0";
+          const maxLabel = document.createElement("span");
+          maxLabel.textContent = "Max: " + m.max;
+          maxLabel.style.position = "absolute";
+          let maxPercent = 100;
+          if (m.value > m.max)
+            maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+          maxLabel.style.left = maxPercent + "%";
+          maxLabel.style.transform = "translateX(-100%)";
+          minMaxDiv.appendChild(minLabel);
+          minMaxDiv.appendChild(maxLabel);
+          barContainer.appendChild(minMaxDiv);
+          card.appendChild(barContainer);
+          container.appendChild(card);
+        });
+        // Update tab badges
+        tabs.forEach((tab) => {
+          const t = tab.dataset.tab;
+          const badge = tab.querySelector(".count-badge");
+          badge.textContent = counts[t];
+          tab.addEventListener("click", () => {
+            tabs.forEach((t) => t.classList.remove("active"));
+            tab.classList.add("active");
+            contents.forEach((c) =>
+              c.id === t
+                ? c.classList.add("active")
+                : c.classList.remove("active")
+            );
+          });
+        });
+      }
       // ✅ Auth State Handling
       onAuthStateChanged(auth, async (user) => {
+        const authNavItem = document.getElementById("authNavItem");
+        if (user) {
+          currentUser = user;
+          await loadUserProfile();
+          // ✅ fetch and render bars after user is ready
+          console.log("currentuser data", currentUser);
+          // const measurements = await getUserMeasurements(currentUser.uid);
+          let measurements = await getUserMeasurements(currentUser.email);
+          measurements = getLatestByType(measurements);
+          renderBars(measurements);
+          authNavItem.innerHTML =
+            '<button onclick="logout()" style="color:red">Logout</button>';
+          if (homeNavDesktop) homeNavDesktop.style.display = "none";
+          if (homeNavMobile) homeNavMobile.style.display = "none";
+        } else {
+          authNavItem.innerHTML = '<a href="login.html">Login</a>';
+          if (homeNavDesktop) homeNavDesktop.style.display = "";
+          if (homeNavMobile) homeNavMobile.style.display = "";
+          window.location.href = "login.html";
+        }
+      });
       async function loadUserProfile() {
         try {
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
         // RANGE BARS LOGIC
         const tabs = document.querySelectorAll(".tab");
         const contents = document.querySelectorAll(".tab-content");
       });
     </script>
   </body>
+</html>