update

.gitignore

@@ -30,7 +30,6 @@ datasets/
 datasets/*
 
 # Legacy Prototype Folders
-app/
 clinical_engine/
 evaluation/
 rag/

frontend/src/app/admin/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Sidebar } from "@/components/Sidebar";
+import { MetricCard } from "@/components/MetricCard";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { useAuth } from "@/lib/auth-context";
+import { adminApi } from "@/lib/api";
+import {
+  ShieldAlert,
+  Users,
+  FileText,
+  Cpu,
+  Lock,
+  Clock,
+  Sparkles,
+  CheckCircle,
+} from "lucide-react";
+
+export default function AdminPage() {
+  const { user, quickLogin } = useAuth();
+  const [stats, setStats] = useState<any>(null);
+  const [auditLogs, setAuditLogs] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (user?.role === "ADMIN") {
+      Promise.allSettled([adminApi.getStats(), adminApi.getAuditLogs(50)])
+        .then(([statsRes, logsRes]) => {
+          if (statsRes.status === "fulfilled") setStats(statsRes.value.data.data);
+          if (logsRes.status === "fulfilled") setAuditLogs(logsRes.value.data.data || []);
+        })
+        .finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, [user]);
+
+  if (user?.role !== "ADMIN") {
+    return (
+      <div className="flex-1 flex bg-slate-50">
+        <Sidebar />
+        <div className="flex-1 p-8 max-w-2xl mx-auto my-auto space-y-4 text-center">
+          <div className="w-12 h-12 rounded-xl bg-purple-100 text-purple-700 flex items-center justify-center mx-auto shadow-xs">
+            <Lock className="w-6 h-6" />
+          </div>
+          <h1 className="text-xl font-bold text-slate-900">Administrator Access Required</h1>
+          <p className="text-xs text-slate-500 max-w-md mx-auto">
+            This module displays privileged platform health metrics, neural model telemetry, and immutable security audit logs.
+          </p>
+          <button
+            onClick={() => quickLogin("admin")}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-xs font-semibold shadow-xs transition-colors"
+          >
+            <Sparkles className="w-4 h-4" />
+            <span>Switch to Demo Admin Account</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
+        {/* Header */}
+        <div>
+          <div className="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-md bg-purple-100 text-purple-800 text-[10px] font-extrabold uppercase tracking-wider mb-1">
+            System Administration
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
+            <ShieldAlert className="w-6 h-6 text-purple-600" />
+            <span>Platform Operations & Security Audit</span>
+          </h1>
+          <p className="text-xs text-slate-500 mt-0.5">
+            Monitor model telemetry, aggregate clinical entities, and inspect access logs.
+          </p>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Metric Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MetricCard
+            title="Total Users"
+            value={stats?.total_users ?? "--"}
+            subtitle="Registered accounts"
+            icon={Users}
+            iconBg="bg-blue-50"
+            iconColor="text-blue-600"
+          />
+          <MetricCard
+            title="Processed Documents"
+            value={stats?.total_documents ?? "--"}
+            subtitle="Clinical reports in DB"
+            icon={FileText}
+            iconBg="bg-teal-50"
+            iconColor="text-teal-600"
+          />
+          <MetricCard
+            title="Biomedical Entities"
+            value={stats?.total_entities_extracted ?? "--"}
+            subtitle="BC5CDR extractions"
+            icon={Cpu}
+            iconBg="bg-emerald-50"
+            iconColor="text-emerald-600"
+          />
+          <MetricCard
+            title="Model Status"
+            value="RoBERTa-large"
+            subtitle={stats?.model_status?.device ? `Device: ${stats.model_status.device}` : "Active"}
+            icon={ShieldAlert}
+            iconBg="bg-purple-50"
+            iconColor="text-purple-600"
+          />
+        </div>
+
+        {/* Security Audit Table */}
+        <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
+          <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+            <Clock className="w-4 h-4 text-purple-600" />
+            <span>Security & Access Audit Trail</span>
+          </h2>
+
+          {auditLogs.length === 0 ? (
+            <p className="text-xs text-slate-400 py-6 text-center">No audit logs recorded.</p>
+          ) : (
+            <div className="overflow-x-auto border border-slate-200 rounded-xl">
+              <table className="w-full text-left text-xs">
+                <thead className="bg-slate-50 text-slate-500 border-b border-slate-200">
+                  <tr>
+                    <th className="py-2.5 px-3 font-semibold">Action</th>
+                    <th className="py-2.5 px-3 font-semibold">Status</th>
+                    <th className="py-2.5 px-3 font-semibold">Details</th>
+                    <th className="py-2.5 px-3 font-semibold">Timestamp</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100 font-mono">
+                  {auditLogs.map((log) => (
+                    <tr key={log.id} className="hover:bg-slate-50/80 transition-colors">
+                      <td className="py-2.5 px-3 font-bold text-slate-900">{log.action}</td>
+                      <td className="py-2.5 px-3">
+                        <span
+                          className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${
+                            log.status === "SUCCESS"
+                              ? "bg-emerald-100 text-emerald-800"
+                              : "bg-rose-100 text-rose-800"
+                          }`}
+                        >
+                          {log.status}
+                        </span>
+                      </td>
+                      <td className="py-2.5 px-3 text-slate-700 font-sans text-xs">{log.details || "--"}</td>
+                      <td className="py-2.5 px-3 text-slate-400 text-[11px]">
+                        {new Date(log.created_at).toLocaleString()}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/assistant/page.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { chatApi } from "@/lib/api";
+import {
+  MessageSquareHeart,
+  Send,
+  Plus,
+  Trash2,
+  AlertTriangle,
+  HelpCircle,
+  Sparkles,
+  Bot,
+  User as UserIcon,
+  ShieldAlert,
+  Info,
+} from "lucide-react";
+
+interface StructuredData {
+  summary: string;
+  possible_considerations?: string[];
+  relevant_medical_info?: string[];
+  questions_for_doctor?: string[];
+  safety_warning?: string;
+  is_emergency?: boolean;
+  emergency_instructions?: string;
+}
+
+interface Message {
+  id?: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  structured_data?: StructuredData | null;
+  model_provider?: string;
+  created_at?: string;
+}
+
+interface Conversation {
+  id: string;
+  title: string;
+  messages: Message[];
+  created_at: string;
+}
+
+const SAMPLE_PROMPTS = [
+  "What are typical dietary recommendations for managing Type 2 Diabetes?",
+  "Can you explain why metformin is taken with meals and its gastrointestinal profile?",
+  "I am having severe crushing chest pain, shortness of breath, and left arm numbness.",
+];
+
+export default function AssistantPage() {
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [activeConvId, setActiveConvId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputText, setInputText] = useState<string>("");
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const fetchConversations = async () => {
+    try {
+      const res = await chatApi.listConversations();
+      const list = res.data.data || [];
+      setConversations(list);
+      if (list.length > 0 && !activeConvId) {
+        setActiveConvId(list[0].id);
+        setMessages(list[0].messages || []);
+      }
+    } catch (err) {
+      console.error("Error fetching conversations:", err);
+    }
+  };
+
+  useEffect(() => {
+    fetchConversations();
+  }, []);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSelectConversation = async (id: string) => {
+    setActiveConvId(id);
+    try {
+      const res = await chatApi.getConversation(id);
+      setMessages(res.data.data.messages || []);
+    } catch (err) {
+      console.error("Error loading conversation:", err);
+    }
+  };
+
+  const handleNewConversation = () => {
+    setActiveConvId(null);
+    setMessages([]);
+  };
+
+  const handleDeleteConversation = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    try {
+      await chatApi.deleteConversation(id);
+      setConversations((prev) => prev.filter((c) => c.id !== id));
+      if (activeConvId === id) {
+        handleNewConversation();
+      }
+    } catch (err) {
+      console.error("Error deleting conversation:", err);
+    }
+  };
+
+  const handleSend = async (customPrompt?: string) => {
+    const textToSend = customPrompt || inputText;
+    if (!textToSend.trim() || isSending) return;
+
+    const userMessage: Message = {
+      role: "user",
+      content: textToSend,
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputText("");
+    setIsSending(true);
+
+    try {
+      const res = await chatApi.sendMessage(textToSend, activeConvId || undefined);
+      const data = res.data.data;
+
+      if (!activeConvId) {
+        setActiveConvId(data.conversation_id);
+      }
+
+      setMessages((prev) => [...prev, data.message]);
+      fetchConversations();
+    } catch (err: any) {
+      const errMsg: Message = {
+        role: "assistant",
+        content: err.response?.data?.error?.message || "Failed to reach AI assistant service.",
+      };
+      setMessages((prev) => [...prev, errMsg]);
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 flex flex-col md:flex-row h-[calc(100vh-61px)]">
+        {/* Left Sub-Sidebar: Conversation History */}
+        <div className="w-full md:w-72 bg-white border-r border-slate-200/80 flex flex-col p-4 space-y-3">
+          <button
+            onClick={handleNewConversation}
+            className="w-full py-2 px-3 bg-teal-600 hover:bg-teal-700 text-white rounded-xl text-xs font-semibold shadow-xs transition-colors flex items-center justify-center gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            <span>New Medical Consultation</span>
+          </button>
+
+          <div className="flex-1 overflow-y-auto space-y-1.5 pt-2">
+            <p className="text-[10px] font-bold uppercase tracking-wider text-slate-400 px-2 mb-1">
+              Previous Consultations
+            </p>
+            {conversations.length === 0 ? (
+              <p className="text-xs text-slate-400 px-2 py-4 italic">No previous chats.</p>
+            ) : (
+              conversations.map((c) => (
+                <div
+                  key={c.id}
+                  onClick={() => handleSelectConversation(c.id)}
+                  className={`group flex items-center justify-between px-3 py-2.5 rounded-xl text-xs font-medium cursor-pointer transition-all ${
+                    activeConvId === c.id
+                      ? "bg-teal-50 text-teal-900 border border-teal-200 font-semibold"
+                      : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
+                  }`}
+                >
+                  <span className="truncate flex-1">{c.title}</span>
+                  <button
+                    onClick={(e) => handleDeleteConversation(e, c.id)}
+                    className="opacity-0 group-hover:opacity-100 p-1 hover:text-rose-600 transition-opacity"
+                    title="Delete Chat"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Main Chat Workspace */}
+        <div className="flex-1 flex flex-col bg-slate-50 min-w-0">
+          {/* Top Banner Notice */}
+          <div className="p-3 bg-white border-b border-slate-200/80">
+            <MedicalDisclaimer compact />
+          </div>
+
+          {/* Messages Thread */}
+          <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
+            {messages.length === 0 ? (
+              <div className="max-w-xl mx-auto my-auto py-12 text-center space-y-6">
+                <div className="w-14 h-14 rounded-2xl bg-teal-100 text-teal-700 flex items-center justify-center mx-auto shadow-xs">
+                  <Bot className="w-8 h-8" />
+                </div>
+                <div className="space-y-1.5">
+                  <h2 className="text-xl font-bold text-slate-900">Clinical AI Consultation Assistant</h2>
+                  <p className="text-xs text-slate-500 max-w-md mx-auto">
+                    Ask questions about medical conditions, pharmacological mechanisms, lab reports, or drug interactions.
+                  </p>
+                </div>
+
+                {/* Prompt suggestions */}
+                <div className="space-y-2 text-left">
+                  <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Suggested Queries:</p>
+                  <div className="space-y-1.5">
+                    {SAMPLE_PROMPTS.map((prompt, i) => (
+                      <button
+                        key={i}
+                        onClick={() => handleSend(prompt)}
+                        className={`w-full text-left p-3 rounded-xl border text-xs font-medium transition-all ${
+                          i === 2
+                            ? "bg-rose-50 hover:bg-rose-100 text-rose-900 border-rose-200"
+                            : "bg-white hover:bg-slate-50 text-slate-700 border-slate-200 hover:border-teal-300"
+                        }`}
+                      >
+                        {i === 2 && <span className="font-bold text-rose-700 mr-1.5">[Emergency Triage Test]</span>}
+                        {prompt}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              messages.map((m, idx) => (
+                <div key={idx} className={`flex gap-3 ${m.role === "user" ? "justify-end" : "justify-start"}`}>
+                  {m.role === "assistant" && (
+                    <div className="w-8 h-8 rounded-lg bg-teal-600 text-white flex items-center justify-center flex-shrink-0 mt-1 shadow-xs">
+                      <Bot className="w-4 h-4" />
+                    </div>
+                  )}
+
+                  <div className={`max-w-2xl rounded-2xl p-4 text-xs sm:text-sm ${
+                    m.role === "user"
+                      ? "bg-teal-600 text-white shadow-xs ml-8"
+                      : "bg-white border border-slate-200/80 text-slate-800 shadow-xs mr-8 space-y-3"
+                  }`}>
+                    {/* Plain Text or Summary */}
+                    <p className="leading-relaxed whitespace-pre-wrap">{m.content}</p>
+
+                    {/* Structured AI Output Rendering */}
+                    {m.structured_data && (
+                      <div className="space-y-3 pt-2 border-t border-slate-100 text-xs">
+                        {/* Emergency Alert Box */}
+                        {m.structured_data.is_emergency && (
+                          <div className="p-3 bg-rose-50 border-2 border-rose-500 rounded-xl text-rose-950 space-y-1">
+                            <div className="flex items-center gap-1.5 font-bold text-rose-800">
+                              <ShieldAlert className="w-4 h-4 text-rose-600" />
+                              <span>POTENTIAL MEDICAL EMERGENCY DETECTED</span>
+                            </div>
+                            <p className="leading-relaxed">{m.structured_data.emergency_instructions}</p>
+                          </div>
+                        )}
+
+                        {/* Clinical Considerations */}
+                        {(m.structured_data.possible_considerations || []).length > 0 && (
+                          <div className="bg-slate-50 p-3 rounded-xl border border-slate-100 space-y-1.5">
+                            <p className="font-bold text-slate-900 flex items-center gap-1.5">
+                              <Info className="w-3.5 h-3.5 text-teal-600" />
+                              <span>Clinical Considerations</span>
+                            </p>
+                            <ul className="space-y-1 text-slate-700 pl-2">
+                              {m.structured_data.possible_considerations?.map((item, i) => (
+                                <li key={i} className="list-disc list-inside">
+                                  {item}
+                                </li>
+                              ))}
+                            </ul>
+                          </div>
+                        )}
+
+                        {/* Questions for Doctor */}
+                        {(m.structured_data.questions_for_doctor || []).length > 0 && (
+                          <div className="bg-amber-50/60 p-3 rounded-xl border border-amber-200/80 space-y-1.5">
+                            <p className="font-bold text-amber-950 flex items-center gap-1.5">
+                              <HelpCircle className="w-3.5 h-3.5 text-amber-600" />
+                              <span>Recommended Questions for your Physician</span>
+                            </p>
+                            <ul className="space-y-1 text-amber-900 pl-2">
+                              {m.structured_data.questions_for_doctor?.map((q, i) => (
+                                <li key={i} className="list-disc list-inside">
+                                  {q}
+                                </li>
+                              ))}
+                            </ul>
+                          </div>
+                        )}
+
+                        {/* Model Source Pill */}
+                        <div className="flex items-center justify-between text-[10px] text-slate-400 font-mono pt-1">
+                          <span>Provider: {m.model_provider || "Google Gemini / Local Engine"}</span>
+                          <span>Non-Diagnostic Support</span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {m.role === "user" && (
+                    <div className="w-8 h-8 rounded-lg bg-slate-200 text-slate-700 flex items-center justify-center flex-shrink-0 mt-1">
+                      <UserIcon className="w-4 h-4" />
+                    </div>
+                  )}
+                </div>
+              ))
+            )}
+            {isSending && (
+              <div className="flex items-center gap-2 text-xs text-slate-500 pl-11">
+                <span className="w-4 h-4 border-2 border-teal-600 border-t-transparent rounded-full animate-spin"></span>
+                <span>Generating clinical decision support guidance...</span>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input Box */}
+          <div className="p-4 bg-white border-t border-slate-200/80">
+            <div className="max-w-4xl mx-auto flex items-center gap-2">
+              <input
+                type="text"
+                value={inputText}
+                onChange={(e) => setInputText(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && handleSend()}
+                placeholder="Ask about medications, symptoms, or clinical guidelines..."
+                className="flex-1 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+              <button
+                onClick={() => handleSend()}
+                disabled={isSending || !inputText.trim()}
+                className="p-3 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white rounded-xl shadow-xs transition-colors"
+                title="Send Message"
+              >
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/dashboard/page.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { Sidebar } from "@/components/Sidebar";
+import { MetricCard } from "@/components/MetricCard";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { EntityBadge } from "@/components/EntityBadge";
+import { useAuth } from "@/lib/auth-context";
+import { documentApi, profileApi, historyApi } from "@/lib/api";
+import {
+  FileText,
+  Activity,
+  Pill,
+  MessageSquareHeart,
+  Upload,
+  Cpu,
+  ArrowRight,
+  Clock,
+  CheckCircle,
+} from "lucide-react";
+
+export default function DashboardPage() {
+  const { user } = useAuth();
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [profile, setProfile] = useState<any>(null);
+  const [history, setHistory] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [docsRes, profileRes, historyRes] = await Promise.allSettled([
+          documentApi.list(),
+          profileApi.getProfile(),
+          historyApi.getHistory(5),
+        ]);
+
+        if (docsRes.status === "fulfilled") setDocuments(docsRes.value.data.data || []);
+        if (profileRes.status === "fulfilled") setProfile(profileRes.value.data.data || null);
+        if (historyRes.status === "fulfilled") setHistory(historyRes.value.data.data || []);
+      } catch (err) {
+        console.error("Dashboard fetch error:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // Aggregate conditions and medications from documents and profile
+  const conditions = Array.from(
+    new Set([
+      ...(profile?.chronic_conditions || []),
+      ...documents.flatMap((d) => d.analysis?.detected_conditions || []),
+    ])
+  );
+
+  const medications = Array.from(
+    new Set([
+      ...(profile?.current_medications || []),
+      ...documents.flatMap((d) => d.analysis?.detected_medications || []),
+    ])
+  );
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
+        {/* Welcome Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+              Clinical Intelligence Dashboard
+            </h1>
+            <p className="text-xs text-slate-500 mt-0.5">
+              Welcome back, <span className="font-semibold text-slate-800">{user?.full_name || "Guest Clinician"}</span>.
+              Here is your active healthcare summary.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Link
+              href="/ner"
+              className="inline-flex items-center gap-1.5 px-3 py-2 bg-teal-50 hover:bg-teal-100 text-teal-800 border border-teal-200 rounded-xl text-xs font-semibold shadow-xs transition-colors"
+            >
+              <Cpu className="w-3.5 h-3.5 text-teal-600" />
+              <span>Biomedical NER</span>
+            </Link>
+            <Link
+              href="/reports"
+              className="inline-flex items-center gap-1.5 px-3.5 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-xl text-xs font-semibold shadow-xs transition-colors"
+            >
+              <Upload className="w-3.5 h-3.5" />
+              <span>Upload Report</span>
+            </Link>
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Metric Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MetricCard
+            title="Reports Analyzed"
+            value={documents.length}
+            subtitle="Clinical documents parsed"
+            icon={FileText}
+            iconBg="bg-blue-50"
+            iconColor="text-blue-600"
+          />
+          <MetricCard
+            title="Detected Conditions"
+            value={conditions.length}
+            subtitle="Clinical indications"
+            icon={Activity}
+            iconBg="bg-rose-50"
+            iconColor="text-rose-600"
+          />
+          <MetricCard
+            title="Active Medications"
+            value={medications.length}
+            subtitle="Pharmaceutical agents"
+            icon={Pill}
+            iconBg="bg-emerald-50"
+            iconColor="text-emerald-600"
+          />
+          <MetricCard
+            title="AI Model Status"
+            value="BC5CDR"
+            subtitle="RoBERTa-large Local GPU"
+            icon={Cpu}
+            iconBg="bg-teal-50"
+            iconColor="text-teal-600"
+          />
+        </div>
+
+        {/* 2-Column Content: Reports & Entities */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left 2 Cols: Recent Documents */}
+          <div className="lg:col-span-2 bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+                <FileText className="w-4 h-4 text-teal-600" />
+                <span>Recent Analyzed Medical Reports</span>
+              </h2>
+              <Link href="/reports" className="text-xs font-semibold text-teal-600 hover:underline flex items-center gap-1">
+                View All <ArrowRight className="w-3 h-3" />
+              </Link>
+            </div>
+
+            {documents.length === 0 ? (
+              <div className="text-center py-10 border border-dashed border-slate-200 rounded-xl bg-slate-50/50 space-y-3">
+                <FileText className="w-8 h-8 text-slate-300 mx-auto" />
+                <p className="text-xs text-slate-500">No medical reports uploaded yet.</p>
+                <Link
+                  href="/reports"
+                  className="inline-flex items-center gap-1 px-3 py-1.5 bg-teal-600 text-white rounded-lg text-xs font-semibold"
+                >
+                  Upload First Report
+                </Link>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {documents.slice(0, 3).map((doc) => (
+                  <div
+                    key={doc.id}
+                    className="p-3.5 rounded-xl border border-slate-100 bg-slate-50/50 hover:bg-slate-50 hover:border-slate-200 transition-all flex items-start justify-between gap-3"
+                  >
+                    <div className="space-y-1.5 flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="font-semibold text-xs text-slate-900 truncate">
+                          {doc.original_filename}
+                        </span>
+                        <span className="text-[10px] uppercase font-bold bg-emerald-100 text-emerald-800 px-1.5 py-0.5 rounded">
+                          {doc.status}
+                        </span>
+                      </div>
+                      {doc.analysis?.summary && (
+                        <p className="text-[11px] text-slate-600 line-clamp-2 leading-relaxed">
+                          {doc.analysis.summary}
+                        </p>
+                      )}
+                      <div className="flex flex-wrap gap-1.5 pt-1">
+                        {(doc.analysis?.detected_conditions || []).slice(0, 2).map((c: string) => (
+                          <EntityBadge key={c} label="DISEASE" text={c} />
+                        ))}
+                        {(doc.analysis?.detected_medications || []).slice(0, 2).map((m: string) => (
+                          <EntityBadge key={m} label="CHEMICAL" text={m} />
+                        ))}
+                      </div>
+                    </div>
+                    <Link
+                      href={`/reports/${doc.id}`}
+                      className="text-xs font-semibold text-teal-600 hover:text-teal-700 self-center whitespace-nowrap"
+                    >
+                      View Report →
+                    </Link>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Right Col: Extracted Health Entities & Activity */}
+          <div className="space-y-6">
+            {/* Extracted Conditions & Meds */}
+            <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
+              <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+                <Activity className="w-4 h-4 text-rose-600" />
+                <span>Extracted Entities</span>
+              </h2>
+
+              <div className="space-y-3">
+                <div>
+                  <p className="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Conditions</p>
+                  {conditions.length === 0 ? (
+                    <p className="text-xs text-slate-400">None detected yet</p>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {conditions.map((c: any) => (
+                        <EntityBadge key={c} label="DISEASE" text={c} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div className="pt-2 border-t border-slate-100">
+                  <p className="text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Medications</p>
+                  {medications.length === 0 ? (
+                    <p className="text-xs text-slate-400">None detected yet</p>
+                  ) : (
+                    <div className="flex flex-wrap gap-1.5">
+                      {medications.map((m: any) => (
+                        <EntityBadge key={m} label="CHEMICAL" text={m} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Recent Timeline */}
+            <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-3">
+              <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+                <Clock className="w-4 h-4 text-teal-600" />
+                <span>Recent Activity</span>
+              </h2>
+
+              {history.length === 0 ? (
+                <p className="text-xs text-slate-400">No recent activity recorded.</p>
+              ) : (
+                <div className="space-y-2.5">
+                  {history.map((h) => (
+                    <div key={h.id} className="flex items-start gap-2 text-xs">
+                      <CheckCircle className="w-3.5 h-3.5 text-teal-600 mt-0.5 flex-shrink-0" />
+                      <div>
+                        <p className="text-slate-800 font-medium">{h.description}</p>
+                        <p className="text-[10px] text-slate-400 font-mono">
+                          {new Date(h.created_at).toLocaleDateString()} {new Date(h.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/demo/page.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { useAuth } from "@/lib/auth-context";
+import {
+  Sparkles,
+  Cpu,
+  FileText,
+  MessageSquareHeart,
+  User,
+  ShieldCheck,
+  ArrowRight,
+  CheckCircle2,
+  ExternalLink,
+} from "lucide-react";
+
+export default function DemoPage() {
+  const { quickLogin } = useAuth();
+  const [activeStep, setActiveStep] = useState(1);
+
+  const steps = [
+    {
+      id: 1,
+      title: "1. Verified Local ML Engine",
+      subtitle: "RoBERTa-large BC5CDR Token Classification",
+      desc: "Demonstrate that the model is loaded entirely locally from disk (models/bc5cdr-ner) with zero external cloud NER dependencies.",
+      link: "/ner",
+      actionText: "Open NER Inference Visualizer",
+      icon: Cpu,
+      color: "text-teal-600",
+      bg: "bg-teal-50",
+    },
+    {
+      id: 2,
+      title: "2. Medical Document Analysis",
+      subtitle: "Multi-Format PDF/Text Extraction & Summarization",
+      desc: "Upload or inspect clinical reports to see automated chemical and disease extraction, key findings, and non-diagnostic summaries.",
+      link: "/reports",
+      actionText: "Open Document Intelligence",
+      icon: FileText,
+      color: "text-blue-600",
+      bg: "bg-blue-50",
+    },
+    {
+      id: 3,
+      title: "3. Clinical AI Consultation & Emergency Triage",
+      subtitle: "Decision Support & Non-Diagnostic Guardrails",
+      desc: "Interact with the medical assistant. Test the heuristic red-flag detector with acute symptom queries (e.g. chest pain) to see emergency triage notices.",
+      link: "/assistant",
+      actionText: "Open AI Assistant",
+      icon: MessageSquareHeart,
+      color: "text-purple-600",
+      bg: "bg-purple-50",
+    },
+    {
+      id: 4,
+      title: "4. Longitudinal Health Profile & Timeline",
+      subtitle: "Patient Anthropometrics & Allergy Tracking",
+      desc: "Review patient physiological indicators, chronic conditions, and chronological activity records with full traceability.",
+      link: "/profile",
+      actionText: "Open Health Profile",
+      icon: User,
+      color: "text-emerald-600",
+      bg: "bg-emerald-50",
+    },
+    {
+      id: 5,
+      title: "5. Security, RBAC & Immutable Audit Logs",
+      subtitle: "Role-Based Access & Operation Traceability",
+      desc: "Switch to the Admin account to view platform statistics and tamper-evident audit logs of all authentication and document activities.",
+      link: "/admin",
+      actionText: "Open Admin & Audit Logs",
+      icon: ShieldCheck,
+      color: "text-rose-600",
+      bg: "bg-rose-50",
+    },
+  ];
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-5xl mx-auto w-full">
+        {/* Header */}
+        <div className="bg-gradient-to-r from-teal-900 to-slate-900 rounded-2xl p-6 sm:p-8 text-white space-y-3 shadow-md">
+          <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-teal-500/20 text-teal-300 text-[10px] font-extrabold uppercase tracking-wider">
+            <Sparkles className="w-3.5 h-3.5" />
+            <span>Mentor Presentation Guide</span>
+          </div>
+          <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight">
+            SanjeevaniAI Demonstration Walkthrough
+          </h1>
+          <p className="text-xs sm:text-sm text-slate-300 max-w-2xl leading-relaxed">
+            Follow this 5-step guided walkthrough to demonstrate every architectural component, local neural model inference,
+            clinical safety guardrails, and secure document processing to your technical mentor.
+          </p>
+
+          <div className="pt-2 flex flex-wrap gap-2">
+            <button
+              onClick={() => quickLogin("patient")}
+              className="px-3 py-1.5 bg-white text-slate-900 hover:bg-slate-100 rounded-lg text-xs font-bold transition-colors shadow-xs"
+            >
+              Demo as Patient (Alex Mercer)
+            </button>
+            <button
+              onClick={() => quickLogin("doctor")}
+              className="px-3 py-1.5 bg-teal-700 hover:bg-teal-600 text-white rounded-lg text-xs font-bold transition-colors"
+            >
+              Demo as Doctor (Dr. Jenkins)
+            </button>
+            <button
+              onClick={() => quickLogin("admin")}
+              className="px-3 py-1.5 bg-purple-700 hover:bg-purple-600 text-white rounded-lg text-xs font-bold transition-colors"
+            >
+              Demo as Admin
+            </button>
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Guided Steps */}
+        <div className="space-y-4">
+          {steps.map((step) => {
+            const Icon = step.icon;
+            return (
+              <div
+                key={step.id}
+                className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs hover:border-teal-300 transition-all flex flex-col md:flex-row md:items-center md:justify-between gap-4"
+              >
+                <div className="flex items-start gap-4">
+                  <div className={`p-3 rounded-xl ${step.bg} ${step.color} flex-shrink-0 mt-0.5`}>
+                    <Icon className="w-6 h-6" />
+                  </div>
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <h3 className="text-sm font-bold text-slate-900">{step.title}</h3>
+                      <span className="text-[10px] font-semibold text-slate-500 bg-slate-100 px-2 py-0.5 rounded">
+                        {step.subtitle}
+                      </span>
+                    </div>
+                    <p className="text-xs text-slate-600 leading-relaxed max-w-xl">{step.desc}</p>
+                  </div>
+                </div>
+
+                <Link
+                  href={step.link}
+                  className="inline-flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-teal-600 text-white rounded-xl text-xs font-semibold shadow-xs transition-colors self-start md:self-center whitespace-nowrap"
+                >
+                  <span>{step.actionText}</span>
+                  <ArrowRight className="w-3.5 h-3.5" />
+                </Link>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/globals.css

@@ -0,0 +1,62 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 210 40% 98%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 173 80% 36%;
+    --primary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --border: 214.3 31.8% 91.4%;
+  }
+
+  body {
+    @apply bg-slate-50 text-slate-900 antialiased selection:bg-teal-500 selection:text-white;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+}
+
+/* Custom scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* NER Highlights */
+.entity-chemical {
+  background-color: #ecfdf5;
+  border: 1px solid #10b981;
+  color: #065f46;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.entity-disease {
+  background-color: #fef2f2;
+  border: 1px solid #ef4444;
+  color: #991b1b;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}

frontend/src/app/history/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { historyApi } from "@/lib/api";
+import { History as HistoryIcon, Clock, FileText, MessageSquareHeart, UserCheck, Activity } from "lucide-react";
+
+export default function HistoryPage() {
+  const [history, setHistory] = useState<any[]>([]);
+  const [filter, setFilter] = useState<string>("ALL");
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    historyApi
+      .getHistory(100)
+      .then((res) => setHistory(res.data.data || []))
+      .catch((err) => console.error("Error loading history:", err))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const filteredHistory = filter === "ALL" ? history : history.filter((h) => h.action_type === filter);
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case "REPORT_ANALYSIS":
+        return <FileText className="w-4 h-4 text-blue-600" />;
+      case "CHAT":
+        return <MessageSquareHeart className="w-4 h-4 text-teal-600" />;
+      case "PROFILE_UPDATE":
+        return <UserCheck className="w-4 h-4 text-emerald-600" />;
+      default:
+        return <Activity className="w-4 h-4 text-slate-600" />;
+    }
+  };
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-5xl mx-auto w-full">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
+              <HistoryIcon className="w-6 h-6 text-teal-600" />
+              <span>Medical History & Activity Log</span>
+            </h1>
+            <p className="text-xs text-slate-500 mt-0.5">
+              Traceable chronological record of clinical report analyses, AI consultations, and profile updates.
+            </p>
+          </div>
+
+          {/* Filter Pills */}
+          <div className="flex items-center gap-1.5 bg-white p-1 rounded-xl border border-slate-200 shadow-xs text-xs">
+            {["ALL", "REPORT_ANALYSIS", "CHAT", "PROFILE_UPDATE"].map((t) => (
+              <button
+                key={t}
+                onClick={() => setFilter(t)}
+                className={`px-3 py-1.5 rounded-lg font-medium transition-all ${
+                  filter === t
+                    ? "bg-teal-600 text-white shadow-xs"
+                    : "text-slate-600 hover:bg-slate-100"
+                }`}
+              >
+                {t.replace("_", " ")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Timeline */}
+        <div className="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-xs">
+          {isLoading ? (
+            <div className="text-center py-8">
+              <span className="w-6 h-6 border-2 border-teal-600 border-t-transparent rounded-full animate-spin inline-block"></span>
+              <p className="text-xs text-slate-500 mt-2">Loading timeline...</p>
+            </div>
+          ) : filteredHistory.length === 0 ? (
+            <div className="text-center py-12 border border-dashed border-slate-200 rounded-xl space-y-2">
+              <Clock className="w-8 h-8 text-slate-300 mx-auto" />
+              <p className="text-xs text-slate-500">No activity records found.</p>
+            </div>
+          ) : (
+            <div className="relative pl-6 space-y-6 before:absolute before:left-2.5 before:top-2 before:bottom-2 before:w-0.5 before:bg-slate-200">
+              {filteredHistory.map((item) => (
+                <div key={item.id} className="relative flex items-start gap-4">
+                  <div className="absolute -left-6 top-1 w-5 h-5 rounded-full bg-white border-2 border-teal-600 flex items-center justify-center">
+                    <span className="w-1.5 h-1.5 rounded-full bg-teal-600"></span>
+                  </div>
+
+                  <div className="flex-1 bg-slate-50 border border-slate-200/70 p-3.5 rounded-xl flex items-start justify-between gap-3">
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        {getIcon(item.action_type)}
+                        <span className="text-xs font-bold text-slate-900">{item.description}</span>
+                      </div>
+                      <p className="text-[10px] text-slate-400 font-mono">
+                        {new Date(item.created_at).toLocaleString()}
+                      </p>
+                    </div>
+
+                    {item.entity_count > 0 && (
+                      <span className="text-[10px] font-bold bg-teal-100 text-teal-800 px-2 py-0.5 rounded">
+                        {item.entity_count} Entities Extracted
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { AuthProvider } from "@/lib/auth-context";
+import { Navbar } from "@/components/Navbar";
+
+export const metadata: Metadata = {
+  title: "SanjeevaniAI — Healthcare Intelligence Platform",
+  description: "Industry-grade AI-powered healthcare intelligence and clinical decision-support system.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-slate-50 font-sans flex flex-col">
+        <AuthProvider>
+          <Navbar />
+          <main className="flex-1 flex flex-col">{children}</main>
+        </AuthProvider>
+      </body>
+    </html>
+  );
+}

frontend/src/app/login/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth-context";
+import { Activity, Lock, Mail, AlertCircle, Sparkles, ArrowRight } from "lucide-react";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { login, quickLogin } = useAuth();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await login(email, password);
+      router.push("/dashboard");
+    } catch (err: any) {
+      setError(err.response?.data?.error?.message || "Invalid email or password.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleQuickLogin = async (role: "patient" | "doctor" | "admin") => {
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await quickLogin(role);
+      router.push("/dashboard");
+    } catch (err: any) {
+      setError("Failed to log in with synthetic demo account.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-[calc(100vh-61px)] flex items-center justify-center p-4 bg-slate-50">
+      <div className="max-w-md w-full bg-white border border-slate-200/80 rounded-2xl p-6 sm:p-8 shadow-sm space-y-6">
+        <div className="text-center space-y-2">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-teal-600 to-emerald-500 flex items-center justify-center text-white mx-auto shadow-xs">
+            <Activity className="w-6 h-6" />
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900">Sign in to SanjeevaniAI</h1>
+          <p className="text-xs text-slate-500">Access your healthcare intelligence portal</p>
+        </div>
+
+        {error && (
+          <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-800 text-xs flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 text-rose-600 flex-shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">Email Address</label>
+            <div className="relative">
+              <Mail className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="name@example.com"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">Password</label>
+            <div className="relative">
+              <Lock className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
+              <input
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="••••••••••••"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full py-2.5 px-4 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white text-xs font-semibold rounded-xl shadow-xs transition-all flex items-center justify-center gap-2"
+          >
+            {isSubmitting ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+
+        {/* Demo Fast-Login Section */}
+        <div className="pt-4 border-t border-slate-100 space-y-3">
+          <div className="flex items-center gap-1.5 text-xs font-bold text-slate-700">
+            <Sparkles className="w-3.5 h-3.5 text-teal-600" />
+            <span>Mentor Presentation Quick Logins</span>
+          </div>
+
+          <div className="grid grid-cols-3 gap-2">
+            <button
+              onClick={() => handleQuickLogin("patient")}
+              disabled={isSubmitting}
+              className="px-2 py-1.5 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-200 rounded-lg text-[11px] font-semibold transition-colors"
+            >
+              Patient
+            </button>
+            <button
+              onClick={() => handleQuickLogin("doctor")}
+              disabled={isSubmitting}
+              className="px-2 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-800 border border-blue-200 rounded-lg text-[11px] font-semibold transition-colors"
+            >
+              Doctor
+            </button>
+            <button
+              onClick={() => handleQuickLogin("admin")}
+              disabled={isSubmitting}
+              className="px-2 py-1.5 bg-purple-50 hover:bg-purple-100 text-purple-800 border border-purple-200 rounded-lg text-[11px] font-semibold transition-colors"
+            >
+              Admin
+            </button>
+          </div>
+        </div>
+
+        <div className="text-center text-xs text-slate-500">
+          Don&apos;t have an account?{" "}
+          <Link href="/register" className="text-teal-600 font-semibold hover:underline">
+            Register here
+          </Link>
+        </div>
+
+        <MedicalDisclaimer compact />
+      </div>
+    </div>
+  );
+}

frontend/src/app/ner/page.tsx

@@ -0,0 +1,361 @@
+"use client";
+
+import React, { useState } from "react";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { EntityBadge } from "@/components/EntityBadge";
+import { nerApi } from "@/lib/api";
+import {
+  Cpu,
+  Sparkles,
+  Play,
+  Clock,
+  CheckCircle2,
+  AlertCircle,
+  Pill,
+  Activity,
+  Layers,
+  Copy,
+  Check,
+} from "lucide-react";
+
+interface NEREntity {
+  text: string;
+  label: string;
+  start: number;
+  end: number;
+  confidence?: number | null;
+  model: string;
+}
+
+interface NERResult {
+  request_id: string;
+  model: {
+    name: string;
+    version: string;
+    provider: string;
+    device: string;
+    status: string;
+  };
+  entities: NEREntity[];
+  entity_count: number;
+  processing_time_ms: number;
+  text_length: number;
+}
+
+const PRESETS = [
+  {
+    title: "Diabetes & Hypertension (Standard Case)",
+    text: "The patient was prescribed metformin 500mg and lisinopril 10mg for type 2 diabetes mellitus and secondary hypertension.",
+  },
+  {
+    title: "Cardiology Acute Coronary Syndrome",
+    text: "Following acute myocardial infarction, the patient received loading doses of aspirin, clopidogrel, and unfractionated heparin.",
+  },
+  {
+    title: "Rheumatology & Autoimmune Therapy",
+    text: "Patient diagnosed with active rheumatoid arthritis was initiated on methotrexate alongside daily folic acid supplementation.",
+  },
+  {
+    title: "Oncology & Chemotherapy Protocol",
+    text: "Patient with metastatic colorectal cancer undergoing treatment with oxaliplatin, fluorouracil, and leucovorin with peripheral neuropathy monitoring.",
+  },
+];
+
+export default function NERPage() {
+  const [text, setText] = useState<string>(PRESETS[0].text);
+  const [result, setResult] = useState<NERResult | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleAnalyze = async (inputText?: string) => {
+    const textToAnalyze = inputText !== undefined ? inputText : text;
+    if (!textToAnalyze.trim()) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await nerApi.analyze(textToAnalyze);
+      setResult(res.data);
+    } catch (err: any) {
+      setError(err.response?.data?.error?.message || "Failed to execute NER model inference.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCopy = () => {
+    if (!result) return;
+    navigator.clipboard.writeText(JSON.stringify(result, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // Helper to render text with highlighted entities
+  const renderHighlightedText = () => {
+    if (!result || result.entities.length === 0) {
+      return <p className="text-sm text-slate-700 leading-relaxed font-mono">{text}</p>;
+    }
+
+    // Sort entities by start offset
+    const sorted = [...result.entities].sort((a, b) => a.start - b.start);
+    const elements: React.ReactNode[] = [];
+    let lastIndex = 0;
+
+    sorted.forEach((ent, i) => {
+      // Add plain text before entity
+      if (ent.start > lastIndex) {
+        elements.push(
+          <span key={`plain-${lastIndex}`}>{text.substring(lastIndex, ent.start)}</span>
+        );
+      }
+
+      // Add highlighted entity
+      const isChemical = ent.label === "CHEMICAL";
+      elements.push(
+        <mark
+          key={`ent-${i}`}
+          className={`px-1.5 py-0.5 rounded-md font-semibold text-xs transition-all cursor-help border inline-block my-0.5 ${
+            isChemical
+              ? "bg-emerald-100/90 text-emerald-950 border-emerald-400"
+              : "bg-rose-100/90 text-rose-950 border-rose-400"
+          }`}
+          title={`${ent.label} (Confidence: ${ent.confidence ? Math.round(ent.confidence * 100) + "%" : "N/A"})`}
+        >
+          {text.substring(ent.start, ent.end)}
+          <span
+            className={`ml-1 text-[9px] uppercase font-bold px-1 py-0.2 rounded ${
+              isChemical ? "bg-emerald-200 text-emerald-900" : "bg-rose-200 text-rose-900"
+            }`}
+          >
+            {ent.label}
+          </span>
+        </mark>
+      );
+
+      lastIndex = ent.end;
+    });
+
+    // Add remaining plain text
+    if (lastIndex < text.length) {
+      elements.push(
+        <span key={`plain-${lastIndex}`}>{text.substring(lastIndex)}</span>
+      );
+    }
+
+    return <div className="text-sm leading-loose font-mono bg-slate-50/70 p-4 rounded-xl border border-slate-200">{elements}</div>;
+  };
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
+        {/* Page Header with Model Spec Badge */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <span className="px-2.5 py-0.5 bg-teal-100 text-teal-800 rounded text-[10px] font-extrabold uppercase tracking-wider">
+                Pretrained ML Engine
+              </span>
+              <span className="flex items-center gap-1 text-[11px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded">
+                <CheckCircle2 className="w-3 h-3 text-emerald-600" />
+                Loaded Locally (D:\SanjeevaniAI\models\bc5cdr-ner)
+              </span>
+            </div>
+            <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
+              <Cpu className="w-6 h-6 text-teal-600" />
+              <span>Biomedical Named Entity Recognition (NER)</span>
+            </h1>
+            <p className="text-xs text-slate-500 mt-0.5">
+              Live token classification using RoBERTa-large fine-tuned on BioCreative V CDR (BC5CDR).
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs font-mono text-slate-600 bg-white border border-slate-200 p-2 rounded-xl shadow-xs">
+            <span className="font-bold text-slate-800">Architecture:</span>
+            <span>RobertaForTokenClassification (1.4 GB)</span>
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Presets Bar */}
+        <div className="bg-white rounded-2xl border border-slate-200/80 p-4 shadow-xs space-y-2.5">
+          <p className="text-xs font-bold text-slate-700 flex items-center gap-1.5">
+            <Sparkles className="w-3.5 h-3.5 text-teal-600" />
+            <span>Mentor Demonstration Presets:</span>
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {PRESETS.map((p, idx) => (
+              <button
+                key={idx}
+                onClick={() => {
+                  setText(p.text);
+                  handleAnalyze(p.text);
+                }}
+                className="px-3 py-1.5 bg-slate-50 hover:bg-teal-50 hover:text-teal-900 hover:border-teal-300 border border-slate-200 rounded-lg text-xs font-medium text-slate-700 transition-all text-left"
+              >
+                {p.title}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Main 2-Column Inference Workspace */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Left Column: Input Text Area */}
+          <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs flex flex-col space-y-4">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-2">
+                <Layers className="w-4 h-4 text-teal-600" />
+                <span>Input Clinical Text</span>
+              </label>
+              <span className="text-[11px] text-slate-400 font-mono">{text.length} characters</span>
+            </div>
+
+            <textarea
+              rows={8}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder="Enter patient notes, clinical summaries, or medical text containing diseases and medications..."
+              className="w-full p-3.5 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-mono leading-relaxed focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+            />
+
+            <div className="flex items-center justify-between pt-2">
+              <div className="flex items-center gap-3 text-xs text-slate-500">
+                <span className="flex items-center gap-1 text-emerald-700 font-semibold">
+                  <span className="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> CHEMICAL
+                </span>
+                <span className="flex items-center gap-1 text-rose-700 font-semibold">
+                  <span className="w-2.5 h-2.5 rounded-full bg-rose-500"></span> DISEASE
+                </span>
+              </div>
+
+              <button
+                onClick={() => handleAnalyze()}
+                disabled={isLoading || !text.trim()}
+                className="px-5 py-2.5 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white rounded-xl text-xs font-bold shadow-xs transition-all flex items-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+                    <span>Running Inference...</span>
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-3.5 h-3.5 fill-current" />
+                    <span>Run BC5CDR Inference</span>
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+
+          {/* Right Column: Visualizer & Entity Output */}
+          <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs flex flex-col space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-2">
+                <Sparkles className="w-4 h-4 text-teal-600" />
+                <span>Extracted Entities & Visualizer</span>
+              </h2>
+
+              {result && (
+                <div className="flex items-center gap-3">
+                  <span className="flex items-center gap-1 text-xs text-slate-600 font-mono">
+                    <Clock className="w-3.5 h-3.5 text-teal-600" />
+                    <strong>{result.processing_time_ms} ms</strong>
+                  </span>
+                  <button
+                    onClick={handleCopy}
+                    className="p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded transition-colors"
+                    title="Copy JSON response"
+                  >
+                    {copied ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
+                  </button>
+                </div>
+              )}
+            </div>
+
+            {error && (
+              <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-800 text-xs flex items-center gap-2">
+                <AlertCircle className="w-4 h-4 text-rose-600 flex-shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            {!result && !isLoading && !error && (
+              <div className="flex-1 flex flex-col items-center justify-center p-8 text-center text-slate-400 border border-dashed border-slate-200 rounded-xl bg-slate-50/50 space-y-2">
+                <Cpu className="w-10 h-10 text-slate-300" />
+                <p className="text-xs font-medium">Click &quot;Run BC5CDR Inference&quot; or choose a preset.</p>
+                <p className="text-[11px] text-slate-400">Tokens are processed by the local neural model.</p>
+              </div>
+            )}
+
+            {result && (
+              <div className="space-y-4 flex-1">
+                {/* Visual Highlight Rendering */}
+                <div>
+                  <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1.5">
+                    Token Span Highlighting
+                  </p>
+                  {renderHighlightedText()}
+                </div>
+
+                {/* Entity Table */}
+                <div>
+                  <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
+                    Detected Biomedical Entities ({result.entity_count})
+                  </p>
+                  {result.entities.length === 0 ? (
+                    <p className="text-xs text-slate-500 italic">No chemical or disease entities detected in text.</p>
+                  ) : (
+                    <div className="overflow-x-auto border border-slate-200 rounded-xl">
+                      <table className="w-full text-left text-xs">
+                        <thead className="bg-slate-50 text-slate-500 border-b border-slate-200">
+                          <tr>
+                            <th className="py-2 px-3 font-semibold">Entity Text</th>
+                            <th className="py-2 px-3 font-semibold">Class</th>
+                            <th className="py-2 px-3 font-semibold">Char Spans</th>
+                            <th className="py-2 px-3 font-semibold">Confidence</th>
+                          </tr>
+                        </thead>
+                        <tbody className="divide-y divide-slate-100 font-mono">
+                          {result.entities.map((ent, idx) => (
+                            <tr key={idx} className="hover:bg-slate-50/80 transition-colors">
+                              <td className="py-2 px-3 font-bold text-slate-900">{ent.text}</td>
+                              <td className="py-2 px-3">
+                                {ent.label === "CHEMICAL" ? (
+                                  <span className="inline-flex items-center gap-1 text-[10px] uppercase font-bold text-emerald-800 bg-emerald-100 px-1.5 py-0.5 rounded">
+                                    <Pill className="w-3 h-3 text-emerald-600" />
+                                    Chemical
+                                  </span>
+                                ) : (
+                                  <span className="inline-flex items-center gap-1 text-[10px] uppercase font-bold text-rose-800 bg-rose-100 px-1.5 py-0.5 rounded">
+                                    <Activity className="w-3 h-3 text-rose-600" />
+                                    Disease
+                                  </span>
+                                )}
+                              </td>
+                              <td className="py-2 px-3 text-slate-500 text-[11px]">
+                                [{ent.start}:{ent.end}]
+                              </td>
+                              <td className="py-2 px-3 font-bold text-slate-800">
+                                {ent.confidence ? `${Math.round(ent.confidence * 100)}%` : "N/A"}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import Link from "next/link";
+import {
+  Activity,
+  Cpu,
+  FileText,
+  MessageSquareHeart,
+  ShieldCheck,
+  Zap,
+  ArrowRight,
+  Database,
+  Lock,
+} from "lucide-react";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen bg-slate-50 flex flex-col">
+      {/* Top Banner */}
+      <div className="bg-slate-900 text-slate-200 text-xs py-2 px-4 text-center font-medium">
+        <span className="bg-teal-500/20 text-teal-300 px-2 py-0.5 rounded mr-2 font-mono text-[10px] uppercase tracking-wider">
+          Industry-Grade Clinical AI
+        </span>
+        Decision-support intelligence powered by verified local RoBERTa-large BC5CDR models.
+      </div>
+
+      {/* Hero Section */}
+      <section className="relative overflow-hidden pt-12 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
+        <div className="text-center max-w-3xl mx-auto space-y-6">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-teal-50 border border-teal-200 text-teal-800 text-xs font-semibold">
+            <Activity className="w-3.5 h-3.5 text-teal-600" />
+            <span>SanjeevaniAI Platform v1.0</span>
+          </div>
+
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-tight">
+            AI-Powered Healthcare <br />
+            <span className="bg-gradient-to-r from-teal-600 to-emerald-500 bg-clip-text text-transparent">
+              Intelligence & Decision Support
+            </span>
+          </h1>
+
+          <p className="text-base sm:text-lg text-slate-600 leading-relaxed max-w-2xl mx-auto">
+            A production-quality clinical AI system providing biomedical Named Entity Recognition (NER),
+            automated medical document analysis, structured clinical summarization, and interactive AI consultation.
+          </p>
+
+          {/* CTAs */}
+          <div className="flex flex-wrap items-center justify-center gap-4 pt-4">
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-teal-600 hover:bg-teal-700 text-white font-semibold shadow-md hover:shadow-lg transition-all text-sm"
+            >
+              <span>Explore Platform</span>
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+            <Link
+              href="/ner"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-white hover:bg-slate-100 text-slate-800 border border-slate-300 font-semibold shadow-xs transition-all text-sm"
+            >
+              <Cpu className="w-4 h-4 text-teal-600" />
+              <span>Test Local NER Model</span>
+            </Link>
+            <Link
+              href="/demo"
+              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-amber-50 hover:bg-amber-100 text-amber-900 border border-amber-300 font-semibold text-sm transition-all"
+            >
+              <span>Mentor Demo Mode</span>
+            </Link>
+          </div>
+
+          {/* Prominent Medical Disclaimer */}
+          <div className="pt-6 max-w-2xl mx-auto text-left">
+            <MedicalDisclaimer />
+          </div>
+        </div>
+      </section>
+
+      {/* Feature Grid */}
+      <section className="bg-white border-y border-slate-200/80 py-16 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center max-w-2xl mx-auto mb-12">
+            <h2 className="text-2xl sm:text-3xl font-bold text-slate-900">Core Clinical AI Capabilities</h2>
+            <p className="text-slate-500 text-sm mt-2">
+              Engineered with medical privacy principles, reproducible ML inference, and explicit safety boundaries.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {/* Feature 1 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center mb-4">
+                <Cpu className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Local Biomedical NER</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Powered by a locally fine-tuned <strong>tner/roberta-large-bc5cdr</strong> token classification model.
+                Extracts <span className="text-emerald-700 font-semibold">CHEMICAL</span> and{" "}
+                <span className="text-rose-700 font-semibold">DISEASE</span> entities with exact offsets and confidence scores.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center mb-4">
+                <FileText className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Medical Document Analysis</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Secure multi-format PDF and text pipeline with SHA-256 integrity verification, automated clinical
+                findings extraction, and structured pharmacological summarization.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-purple-100 text-purple-700 flex items-center justify-center mb-4">
+                <MessageSquareHeart className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Clinical AI Assistant</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Multi-provider LLM abstraction (Gemini + MockLLM) adhering to non-diagnostic safety guardrails,
+                automatic emergency red-flag triage, and patient profile context awareness.
+              </p>
+            </div>
+
+            {/* Feature 4 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center mb-4">
+                <Database className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Health Profile & History</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Patient longitudinal timeline tracking medications, allergies, chronic conditions, and chronological
+                analysis logs with audit traceability.
+              </p>
+            </div>
+
+            {/* Feature 5 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-amber-100 text-amber-700 flex items-center justify-center mb-4">
+                <Lock className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Security & RBAC</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Role-based access control (PATIENT, DOCTOR, ADMIN), bcrypt password hashing, JWT session management,
+                and comprehensive security audit logging.
+              </p>
+            </div>
+
+            {/* Feature 6 */}
+            <div className="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 hover:bg-white hover:shadow-md transition-all">
+              <div className="w-12 h-12 rounded-xl bg-rose-100 text-rose-700 flex items-center justify-center mb-4">
+                <ShieldCheck className="w-6 h-6" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-900 mb-2">Emergency Triage Engine</h3>
+              <p className="text-xs text-slate-600 leading-relaxed">
+                Heuristic emergency symptom detection identifying critical cardiovascular and respiratory red flags
+                with instant emergency escalation notices.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="mt-auto bg-slate-900 text-slate-400 text-xs py-8 px-4 sm:px-6 lg:px-8 border-t border-slate-800">
+        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2 text-slate-200 font-bold">
+            <Activity className="w-4 h-4 text-teal-400" />
+            <span>SanjeevaniAI</span>
+          </div>
+          <p className="text-center sm:text-left">
+            Designed with healthcare-data privacy and clinical safety principles in mind.
+          </p>
+          <div className="flex items-center gap-4 text-slate-400">
+            <Link href="/demo" className="hover:text-teal-300">Mentor Demo</Link>
+            <Link href="/ner" className="hover:text-teal-300">NER Demo</Link>
+            <Link href="/dashboard" className="hover:text-teal-300">Dashboard</Link>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

frontend/src/app/profile/page.tsx

@@ -0,0 +1,372 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { profileApi } from "@/lib/api";
+import {
+  User,
+  Heart,
+  AlertTriangle,
+  Pill,
+  Activity,
+  Save,
+  CheckCircle2,
+  AlertCircle,
+  Phone,
+} from "lucide-react";
+
+export default function ProfilePage() {
+  const [profile, setProfile] = useState<any>({
+    age: "",
+    gender: "",
+    blood_group: "",
+    height_cm: "",
+    weight_kg: "",
+    known_allergies: [],
+    chronic_conditions: [],
+    current_medications: [],
+    emergency_contact: "",
+  });
+
+  const [allergyInput, setAllergyInput] = useState("");
+  const [conditionInput, setConditionInput] = useState("");
+  const [medicationInput, setMedicationInput] = useState("");
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    profileApi
+      .getProfile()
+      .then((res) => {
+        if (res.data.data) {
+          setProfile({
+            age: res.data.data.age || "",
+            gender: res.data.data.gender || "",
+            blood_group: res.data.data.blood_group || "",
+            height_cm: res.data.data.height_cm || "",
+            weight_kg: res.data.data.weight_kg || "",
+            known_allergies: res.data.data.known_allergies || [],
+            chronic_conditions: res.data.data.chronic_conditions || [],
+            current_medications: res.data.data.current_medications || [],
+            emergency_contact: res.data.data.emergency_contact || "",
+          });
+        }
+      })
+      .catch((err) => console.error("Error fetching profile:", err))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  const calculateBMI = () => {
+    const h = parseFloat(profile.height_cm);
+    const w = parseFloat(profile.weight_kg);
+    if (!h || !w || h <= 0 || w <= 0) return null;
+    const bmi = w / Math.pow(h / 100, 2);
+    return bmi.toFixed(1);
+  };
+
+  const handleAddChip = (field: string, value: string, setter: (v: string) => void) => {
+    if (!value.trim()) return;
+    setProfile((prev: any) => ({
+      ...prev,
+      [field]: [...(prev[field] || []), value.trim()],
+    }));
+    setter("");
+  };
+
+  const handleRemoveChip = (field: string, index: number) => {
+    setProfile((prev: any) => ({
+      ...prev,
+      [field]: prev[field].filter((_: any, i: number) => i !== index),
+    }));
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSaving(true);
+    setError(null);
+    setSaveSuccess(false);
+
+    try {
+      const payload = {
+        age: profile.age ? parseInt(profile.age) : null,
+        gender: profile.gender || null,
+        blood_group: profile.blood_group || null,
+        height_cm: profile.height_cm ? parseFloat(profile.height_cm) : null,
+        weight_kg: profile.weight_kg ? parseFloat(profile.weight_kg) : null,
+        known_allergies: profile.known_allergies,
+        chronic_conditions: profile.chronic_conditions,
+        current_medications: profile.current_medications,
+        emergency_contact: profile.emergency_contact || null,
+      };
+      await profileApi.updateProfile(payload);
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 3000);
+    } catch (err: any) {
+      setError(err.response?.data?.error?.message || "Failed to update profile.");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const bmi = calculateBMI();
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-5xl mx-auto w-full">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
+              <User className="w-6 h-6 text-teal-600" />
+              <span>Patient Health Profile</span>
+            </h1>
+            <p className="text-xs text-slate-500 mt-0.5">
+              Maintain physiological parameters, allergy profiles, and chronic conditions for clinical AI context.
+            </p>
+          </div>
+
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="inline-flex items-center gap-2 px-5 py-2.5 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white rounded-xl text-xs font-bold shadow-xs transition-all self-start sm:self-auto"
+          >
+            <Save className="w-4 h-4" />
+            <span>{isSaving ? "Saving..." : "Save Health Profile"}</span>
+          </button>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {saveSuccess && (
+          <div className="p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-900 text-xs flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4 text-emerald-600 flex-shrink-0" />
+            <span>Health profile saved successfully! Context will be used in clinical AI consultations.</span>
+          </div>
+        )}
+
+        {error && (
+          <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-900 text-xs flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 text-rose-600 flex-shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Profile Form */}
+        <form onSubmit={handleSave} className="space-y-6">
+          {/* Physiological Metrics */}
+          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-4">
+            <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+              <Heart className="w-4 h-4 text-rose-600" />
+              <span>Vitals & Anthropometrics</span>
+            </h2>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Age (Years)</label>
+                <input
+                  type="number"
+                  value={profile.age}
+                  onChange={(e) => setProfile({ ...profile, age: e.target.value })}
+                  placeholder="e.g. 45"
+                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Gender</label>
+                <select
+                  value={profile.gender}
+                  onChange={(e) => setProfile({ ...profile, gender: e.target.value })}
+                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                >
+                  <option value="">Select Gender</option>
+                  <option value="Male">Male</option>
+                  <option value="Female">Female</option>
+                  <option value="Other">Other</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Blood Group</label>
+                <select
+                  value={profile.blood_group}
+                  onChange={(e) => setProfile({ ...profile, blood_group: e.target.value })}
+                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                >
+                  <option value="">Select Blood Group</option>
+                  <option value="A+">A+</option>
+                  <option value="A-">A-</option>
+                  <option value="B+">B+</option>
+                  <option value="B-">B-</option>
+                  <option value="AB+">AB+</option>
+                  <option value="AB-">AB-</option>
+                  <option value="O+">O+</option>
+                  <option value="O-">O-</option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Calculated BMI</label>
+                <div className="px-3 py-2 bg-slate-100 border border-slate-200 rounded-xl text-xs font-bold text-slate-800">
+                  {bmi ? `${bmi} kg/m²` : "--"}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Height (cm)</label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={profile.height_cm}
+                  onChange={(e) => setProfile({ ...profile, height_cm: e.target.value })}
+                  placeholder="e.g. 175"
+                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Weight (kg)</label>
+                <input
+                  type="number"
+                  step="0.1"
+                  value={profile.weight_kg}
+                  onChange={(e) => setProfile({ ...profile, weight_kg: e.target.value })}
+                  placeholder="e.g. 74.5"
+                  className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                />
+              </div>
+
+              <div className="sm:col-span-2">
+                <label className="block text-xs font-semibold text-slate-700 mb-1">Emergency Contact</label>
+                <div className="relative">
+                  <Phone className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
+                  <input
+                    type="text"
+                    value={profile.emergency_contact}
+                    onChange={(e) => setProfile({ ...profile, emergency_contact: e.target.value })}
+                    placeholder="Name - +1 (555) 000-0000"
+                    className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Allergies, Conditions, Medications Chips */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {/* Allergies */}
+            <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-2">
+                <AlertTriangle className="w-4 h-4 text-amber-500" />
+                <span>Known Allergies</span>
+              </h3>
+
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={allergyInput}
+                  onChange={(e) => setAllergyInput(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleAddChip("known_allergies", allergyInput, setAllergyInput))}
+                  placeholder="e.g. Penicillin"
+                  className="flex-1 px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleAddChip("known_allergies", allergyInput, setAllergyInput)}
+                  className="px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold"
+                >
+                  Add
+                </button>
+              </div>
+
+              <div className="flex flex-wrap gap-1.5 min-h-[60px] p-2 bg-slate-50 rounded-xl border border-slate-100">
+                {profile.known_allergies.map((a: string, i: number) => (
+                  <span key={i} className="inline-flex items-center gap-1 px-2 py-0.5 bg-amber-100 text-amber-900 rounded-md text-xs font-medium">
+                    <span>{a}</span>
+                    <button type="button" onClick={() => handleRemoveChip("known_allergies", i)} className="hover:text-rose-600">×</button>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Chronic Conditions */}
+            <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-2">
+                <Activity className="w-4 h-4 text-rose-500" />
+                <span>Chronic Conditions</span>
+              </h3>
+
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={conditionInput}
+                  onChange={(e) => setConditionInput(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleAddChip("chronic_conditions", conditionInput, setConditionInput))}
+                  placeholder="e.g. Hypertension"
+                  className="flex-1 px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleAddChip("chronic_conditions", conditionInput, setConditionInput)}
+                  className="px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold"
+                >
+                  Add
+                </button>
+              </div>
+
+              <div className="flex flex-wrap gap-1.5 min-h-[60px] p-2 bg-slate-50 rounded-xl border border-slate-100">
+                {profile.chronic_conditions.map((c: string, i: number) => (
+                  <span key={i} className="inline-flex items-center gap-1 px-2 py-0.5 bg-rose-100 text-rose-900 rounded-md text-xs font-medium">
+                    <span>{c}</span>
+                    <button type="button" onClick={() => handleRemoveChip("chronic_conditions", i)} className="hover:text-rose-600">×</button>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* Medications */}
+            <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+              <h3 className="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-2">
+                <Pill className="w-4 h-4 text-emerald-500" />
+                <span>Active Medications</span>
+              </h3>
+
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={medicationInput}
+                  onChange={(e) => setMedicationInput(e.target.value)}
+                  onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), handleAddChip("current_medications", medicationInput, setMedicationInput))}
+                  placeholder="e.g. Metformin 500mg"
+                  className="flex-1 px-3 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-xs"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleAddChip("current_medications", medicationInput, setMedicationInput)}
+                  className="px-2.5 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-xs font-semibold"
+                >
+                  Add
+                </button>
+              </div>
+
+              <div className="flex flex-wrap gap-1.5 min-h-[60px] p-2 bg-slate-50 rounded-xl border border-slate-100">
+                {profile.current_medications.map((m: string, i: number) => (
+                  <span key={i} className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-100 text-emerald-900 rounded-md text-xs font-medium">
+                    <span>{m}</span>
+                    <button type="button" onClick={() => handleRemoveChip("current_medications", i)} className="hover:text-rose-600">×</button>
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/app/register/page.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth-context";
+import { Activity, Lock, Mail, User, AlertCircle } from "lucide-react";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const { register } = useAuth();
+
+  const [email, setEmail] = useState("");
+  const [fullName, setFullName] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState("PATIENT");
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+    try {
+      await register(email, password, fullName, role);
+      router.push("/dashboard");
+    } catch (err: any) {
+      setError(err.response?.data?.error?.message || "Registration failed. Please check your information.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="min-h-[calc(100vh-61px)] flex items-center justify-center p-4 bg-slate-50">
+      <div className="max-w-md w-full bg-white border border-slate-200/80 rounded-2xl p-6 sm:p-8 shadow-sm space-y-6">
+        <div className="text-center space-y-2">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-teal-600 to-emerald-500 flex items-center justify-center text-white mx-auto shadow-xs">
+            <Activity className="w-6 h-6" />
+          </div>
+          <h1 className="text-2xl font-bold text-slate-900">Create your Account</h1>
+          <p className="text-xs text-slate-500">Join SanjeevaniAI Healthcare Intelligence</p>
+        </div>
+
+        {error && (
+          <div className="p-3 bg-rose-50 border border-rose-200 rounded-xl text-rose-800 text-xs flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 text-rose-600 flex-shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">Full Name</label>
+            <div className="relative">
+              <User className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
+              <input
+                type="text"
+                required
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value)}
+                placeholder="Dr. / Mr. / Ms. Full Name"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">Email Address</label>
+            <div className="relative">
+              <Mail className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="name@example.com"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">Password</label>
+            <div className="relative">
+              <Lock className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
+              <input
+                type="password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Minimum 8 characters"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-slate-700 mb-1">User Role</label>
+            <select
+              value={role}
+              onChange={(e) => setRole(e.target.value)}
+              className="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs focus:bg-white focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-500 transition-all"
+            >
+              <option value="PATIENT">Patient Account</option>
+              <option value="DOCTOR">Healthcare Professional / Doctor</option>
+              <option value="ADMIN">Platform Administrator</option>
+            </select>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full py-2.5 px-4 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 text-white text-xs font-semibold rounded-xl shadow-xs transition-all flex items-center justify-center gap-2"
+          >
+            {isSubmitting ? "Creating Account..." : "Create Account"}
+          </button>
+        </form>
+
+        <div className="text-center text-xs text-slate-500">
+          Already have an account?{" "}
+          <Link href="/login" className="text-teal-600 font-semibold hover:underline">
+            Sign In
+          </Link>
+        </div>
+
+        <MedicalDisclaimer compact />
+      </div>
+    </div>
+  );
+}

frontend/src/app/reports/[id]/page.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { EntityBadge } from "@/components/EntityBadge";
+import { documentApi } from "@/lib/api";
+import {
+  FileText,
+  ArrowLeft,
+  Activity,
+  Pill,
+  Clock,
+  ShieldCheck,
+  CheckCircle,
+  Copy,
+  Check,
+  Cpu,
+  Layers,
+} from "lucide-react";
+
+export default function ReportDetailPage() {
+  const params = useParams();
+  const docId = params.id as string;
+
+  const [doc, setDoc] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [copied, setCopied] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!docId) return;
+    documentApi
+      .getById(docId)
+      .then((res) => setDoc(res.data.data))
+      .catch((err) => console.error("Error fetching report details:", err))
+      .finally(() => setIsLoading(false));
+  }, [docId]);
+
+  const handleCopyText = () => {
+    if (!doc?.analysis?.raw_text) return;
+    navigator.clipboard.writeText(doc.analysis.raw_text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex bg-slate-50">
+        <Sidebar />
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center space-y-3">
+            <span className="w-8 h-8 border-3 border-teal-600 border-t-transparent rounded-full animate-spin inline-block"></span>
+            <p className="text-xs text-slate-500 font-medium">Loading report analysis...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!doc) {
+    return (
+      <div className="flex-1 flex bg-slate-50">
+        <Sidebar />
+        <div className="flex-1 p-8 max-w-4xl mx-auto space-y-4">
+          <Link href="/reports" className="inline-flex items-center gap-1.5 text-xs text-teal-600 font-semibold hover:underline">
+            <ArrowLeft className="w-4 h-4" /> Back to Reports
+          </Link>
+          <div className="bg-white p-8 rounded-2xl border border-slate-200 text-center space-y-2">
+            <p className="text-sm font-bold text-slate-800">Report Not Found</p>
+            <p className="text-xs text-slate-500">The requested medical report does not exist or has been deleted.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const analysis = doc.analysis;
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-5xl mx-auto w-full">
+        {/* Navigation & Title */}
+        <div className="space-y-3">
+          <Link href="/reports" className="inline-flex items-center gap-1.5 text-xs text-teal-600 font-semibold hover:underline">
+            <ArrowLeft className="w-4 h-4" /> Back to Reports
+          </Link>
+
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
+            <div>
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl font-bold text-slate-900">{doc.original_filename}</h1>
+                <span className="text-[10px] uppercase font-bold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">
+                  {doc.status}
+                </span>
+              </div>
+              <div className="flex flex-wrap items-center gap-3 text-xs text-slate-400 font-mono mt-1">
+                <span>Format: {doc.file_type.toUpperCase()}</span>
+                <span>•</span>
+                <span>Size: {Math.round(doc.file_size / 1024)} KB</span>
+                <span>•</span>
+                <span>SHA-256: {doc.file_hash.substring(0, 16)}...</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleCopyText}
+                className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200/80 text-slate-700 text-xs font-semibold rounded-lg transition-colors flex items-center gap-1.5"
+              >
+                {copied ? <Check className="w-3.5 h-3.5 text-emerald-600" /> : <Copy className="w-3.5 h-3.5" />}
+                <span>{copied ? "Copied" : "Copy Extracted Text"}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Clinical Summary & Findings */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Summary Card */}
+          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+            <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+              <Activity className="w-4 h-4 text-teal-600" />
+              <span>Automated Clinical Summary</span>
+            </h2>
+            <p className="text-xs text-slate-700 leading-relaxed bg-slate-50 p-3.5 rounded-xl border border-slate-100">
+              {analysis?.summary || "Summary not generated."}
+            </p>
+          </div>
+
+          {/* Important Findings */}
+          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+            <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+              <CheckCircle className="w-4 h-4 text-emerald-600" />
+              <span>Key Clinical Findings</span>
+            </h2>
+            <ul className="space-y-2 text-xs text-slate-700">
+              {(analysis?.important_findings || []).map((f: string, i: number) => (
+                <li key={i} className="flex items-start gap-2 bg-emerald-50/50 p-2.5 rounded-lg border border-emerald-100">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mt-1.5 flex-shrink-0"></span>
+                  <span>{f}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Extracted Conditions & Medications */}
+        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-4">
+          <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+            <Cpu className="w-4 h-4 text-teal-600" />
+            <span>Biomedical Entities Identified (RoBERTa-large BC5CDR)</span>
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="p-4 bg-rose-50/40 border border-rose-100 rounded-xl space-y-2">
+              <p className="text-xs font-bold text-rose-900 uppercase tracking-wider">Identified Conditions</p>
+              <div className="flex flex-wrap gap-1.5">
+                {(analysis?.detected_conditions || []).map((c: string) => (
+                  <EntityBadge key={c} label="DISEASE" text={c} />
+                ))}
+              </div>
+            </div>
+
+            <div className="p-4 bg-emerald-50/40 border border-emerald-100 rounded-xl space-y-2">
+              <p className="text-xs font-bold text-emerald-900 uppercase tracking-wider">Pharmaceutical Agents</p>
+              <div className="flex flex-wrap gap-1.5">
+                {(analysis?.detected_medications || []).map((m: string) => (
+                  <EntityBadge key={m} label="CHEMICAL" text={m} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Raw Text Viewer */}
+        <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-3">
+          <h2 className="text-sm font-bold text-slate-900 flex items-center gap-2">
+            <Layers className="w-4 h-4 text-teal-600" />
+            <span>Extracted Document Text</span>
+          </h2>
+          <pre className="p-4 bg-slate-900 text-slate-100 rounded-xl text-xs font-mono whitespace-pre-wrap leading-relaxed max-h-80 overflow-y-auto">
+            {analysis?.raw_text || "No text available."}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/reports/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { Sidebar } from "@/components/Sidebar";
+import { MedicalDisclaimer } from "@/components/MedicalDisclaimer";
+import { EntityBadge } from "@/components/EntityBadge";
+import { documentApi } from "@/lib/api";
+import {
+  FileText,
+  Upload,
+  Trash2,
+  Eye,
+  AlertCircle,
+  CheckCircle2,
+  FileCheck,
+  Download,
+  Plus,
+} from "lucide-react";
+
+export default function ReportsPage() {
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
+
+  const fetchDocuments = async () => {
+    try {
+      const res = await documentApi.list();
+      setDocuments(res.data.data || []);
+    } catch (err) {
+      console.error("Error fetching documents:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchDocuments();
+  }, []);
+
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploadError(null);
+    setUploadSuccess(null);
+    setIsUploading(true);
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const res = await documentApi.upload(formData);
+      setUploadSuccess(`Report '${file.name}' analyzed successfully with local BC5CDR model!`);
+      fetchDocuments();
+    } catch (err: any) {
+      setUploadError(err.response?.data?.error?.message || "Failed to analyze medical report.");
+    } finally {
+      setIsUploading(false);
+      e.target.value = "";
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this report and its analysis?")) return;
+    try {
+      await documentApi.delete(id);
+      setDocuments((prev) => prev.filter((d) => d.id !== id));
+    } catch (err) {
+      alert("Failed to delete document.");
+    }
+  };
+
+  return (
+    <div className="flex-1 flex bg-slate-50">
+      <Sidebar />
+
+      <div className="flex-1 p-4 sm:p-6 lg:p-8 space-y-6 max-w-7xl mx-auto w-full">
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2">
+              <FileText className="w-6 h-6 text-teal-600" />
+              <span>Medical Reports & Document Intelligence</span>
+            </h1>
+            <p className="text-xs text-slate-500 mt-0.5">
+              Securely upload clinical PDFs, DOCX, and discharge summaries for automated entity extraction and summarization.
+            </p>
+          </div>
+
+          <div>
+            <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2.5 bg-teal-600 hover:bg-teal-700 text-white rounded-xl text-xs font-bold shadow-xs transition-all">
+              <Upload className="w-4 h-4" />
+              <span>{isUploading ? "Extracting & Analyzing..." : "Upload Medical Document"}</span>
+              <input
+                type="file"
+                accept=".pdf,.txt,.docx"
+                onChange={handleFileUpload}
+                disabled={isUploading}
+                className="hidden"
+              />
+            </label>
+          </div>
+        </div>
+
+        <MedicalDisclaimer />
+
+        {/* Upload Notifications */}
+        {uploadSuccess && (
+          <div className="p-3.5 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-900 text-xs flex items-center gap-2">
+            <CheckCircle2 className="w-4 h-4 text-emerald-600 flex-shrink-0" />
+            <span>{uploadSuccess}</span>
+          </div>
+        )}
+
+        {uploadError && (
+          <div className="p-3.5 bg-rose-50 border border-rose-200 rounded-xl text-rose-900 text-xs flex items-center gap-2">
+            <AlertCircle className="w-4 h-4 text-rose-600 flex-shrink-0" />
+            <span>{uploadError}</span>
+          </div>
+        )}
+
+        {/* Document List */}
+        <div className="bg-white rounded-2xl border border-slate-200/80 p-5 shadow-xs space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-bold text-slate-900">Analyzed Reports ({documents.length})</h2>
+          </div>
+
+          {documents.length === 0 ? (
+            <div className="text-center py-12 border border-dashed border-slate-200 rounded-xl bg-slate-50/50 space-y-3">
+              <FileCheck className="w-10 h-10 text-slate-300 mx-auto" />
+              <p className="text-xs font-medium text-slate-600">No medical reports uploaded yet.</p>
+              <p className="text-[11px] text-slate-400">Supported formats: PDF, DOCX, TXT (up to 25MB).</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-slate-100">
+              {documents.map((doc) => (
+                <div
+                  key={doc.id}
+                  className="py-4 first:pt-0 last:pb-0 flex flex-col md:flex-row md:items-center md:justify-between gap-4"
+                >
+                  <div className="space-y-1.5 flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="font-bold text-sm text-slate-900 truncate">
+                        {doc.original_filename}
+                      </span>
+                      <span className="text-[10px] uppercase font-mono font-bold bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded">
+                        {doc.file_type}
+                      </span>
+                      <span className="text-[10px] uppercase font-bold bg-emerald-100 text-emerald-800 px-1.5 py-0.5 rounded">
+                        {doc.status}
+                      </span>
+                    </div>
+
+                    {doc.analysis?.summary && (
+                      <p className="text-xs text-slate-600 line-clamp-2 leading-relaxed">
+                        {doc.analysis.summary}
+                      </p>
+                    )}
+
+                    <div className="flex flex-wrap items-center gap-1.5 pt-1">
+                      {(doc.analysis?.detected_conditions || []).slice(0, 3).map((c: string) => (
+                        <EntityBadge key={c} label="DISEASE" text={c} />
+                      ))}
+                      {(doc.analysis?.detected_medications || []).slice(0, 3).map((m: string) => (
+                        <EntityBadge key={m} label="CHEMICAL" text={m} />
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2 self-end md:self-center">
+                    <Link
+                      href={`/reports/${doc.id}`}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-teal-50 hover:bg-teal-100 text-teal-800 rounded-lg text-xs font-semibold transition-colors"
+                    >
+                      <Eye className="w-3.5 h-3.5" />
+                      <span>View Analysis</span>
+                    </Link>
+                    <button
+                      onClick={() => handleDelete(doc.id)}
+                      className="p-1.5 text-slate-400 hover:text-rose-600 hover:bg-rose-50 rounded-lg transition-colors"
+                      title="Delete Report"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}