create somAI

components/Chat.tsx

@@ -0,0 +1,333 @@
+
+import React, { useRef, useEffect, useState } from 'react';
+import { MessageSquare, Send, ClipboardList, Activity, Mic, Volume2, Camera, X, ArrowLeft, Sparkles, ScanEye, Info } from 'lucide-react';
+import { ChatMessage, AppMode } from '../types';
+import { generateQuickReplies } from '../services/geminiService';
+
+interface ChatProps {
+  chatHistory: ChatMessage[];
+  currentInput: string;
+  setCurrentInput: (val: string) => void;
+  onSendMessage: (image?: string) => void;
+  isProcessing: boolean;
+  mode: AppMode;
+  setMode: (mode: AppMode) => void;
+  onSummarize: () => void;
+  isSummarizing: boolean;
+  chatSummary?: string;
+}
+
+const Chat: React.FC<ChatProps> = ({
+  chatHistory,
+  currentInput,
+  setCurrentInput,
+  onSendMessage,
+  isProcessing,
+  mode,
+  setMode,
+  onSummarize,
+  isSummarizing,
+  chatSummary
+}) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const [isListening, setIsListening] = useState(false);
+  const [speakingId, setSpeakingId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'chat' | 'summary'>('chat');
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [quickReplies, setQuickReplies] = useState<string[]>([]);
+  const [showVisionTip, setShowVisionTip] = useState(true);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [chatHistory, isProcessing, quickReplies]);
+
+  // Generate quick replies when AI responds
+  useEffect(() => {
+    const lastMsg = chatHistory[chatHistory.length - 1];
+    if (lastMsg && lastMsg.role === 'model') {
+      generateQuickReplies(lastMsg.text).then(setQuickReplies);
+    } else {
+      setQuickReplies([]);
+    }
+  }, [chatHistory]);
+
+  const handleSummarizeClick = async () => {
+    await onSummarize();
+    setViewMode('summary');
+  };
+
+  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedImage(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+      // Automatically hide tip if user uses feature
+      setShowVisionTip(false);
+    }
+  };
+
+  const handleSend = () => {
+    if (!currentInput.trim() && !selectedImage) return;
+    onSendMessage(selectedImage || undefined);
+    setSelectedImage(null);
+    setQuickReplies([]);
+  };
+
+  const speakText = (text: string, id: string) => {
+    if ('speechSynthesis' in window) {
+       if (speakingId === id) {
+         window.speechSynthesis.cancel();
+         setSpeakingId(null);
+         return;
+       }
+       window.speechSynthesis.cancel();
+       const utterance = new SpeechSynthesisUtterance(text);
+       utterance.onend = () => setSpeakingId(null);
+       setSpeakingId(id);
+       window.speechSynthesis.speak(utterance);
+    }
+  };
+
+  const toggleListening = () => {
+    if (!('webkitSpeechRecognition' in window)) {
+      alert("Voice input is not supported in this browser.");
+      return;
+    }
+
+    if (isListening) {
+      setIsListening(false);
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const recognition = new (window as any).webkitSpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = false;
+    recognition.lang = 'en-US';
+
+    recognition.onstart = () => setIsListening(true);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    recognition.onresult = (event: any) => {
+      const transcript = event.results[0][0].transcript;
+      setCurrentInput(transcript);
+      setIsListening(false);
+    };
+    recognition.onerror = () => setIsListening(false);
+    recognition.onend = () => setIsListening(false);
+    recognition.start();
+  };
+
+  if (viewMode === 'summary') {
+    return (
+      <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 h-full">
+         <div className="glass-panel rounded-2xl h-[calc(100vh-150px)] p-8 flex flex-col relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-96 h-96 bg-neon-green/5 rounded-full blur-3xl -z-10 pointer-events-none"></div>
+            
+            <div className="flex justify-between items-center mb-6 border-b border-white/10 pb-4">
+              <button 
+                onClick={() => setViewMode('chat')}
+                className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors text-sm font-mono font-bold uppercase"
+              >
+                <ArrowLeft size={16} /> Back to Chat
+              </button>
+              <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                <ClipboardList className="text-neon-yellow" /> Session Brief
+              </h2>
+            </div>
+
+            <div className="flex-1 overflow-y-auto">
+               {isSummarizing ? (
+                 <div className="flex flex-col items-center justify-center h-64 text-gray-500 gap-4">
+                    <Activity className="animate-spin text-neon-green" size={32} />
+                    <p className="font-mono text-xs animate-pulse">ANALYZING CONVERSATION...</p>
+                 </div>
+               ) : (
+                 <div className="bg-white/5 p-6 rounded-xl border border-white/10 leading-relaxed text-gray-200 text-base whitespace-pre-wrap">
+                    {chatSummary || "No summary available."}
+                 </div>
+               )}
+            </div>
+         </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="glass-panel rounded-2xl flex flex-col h-[calc(100vh-150px)] relative overflow-hidden">
+        {/* Header */}
+        <div className="p-4 bg-white/5 border-b border-white/5 flex justify-between items-center z-10">
+          <div className="flex gap-2">
+            <button 
+              onClick={() => setMode(AppMode.GENERAL)}
+              className={`px-3 py-1.5 rounded-lg text-[10px] md:text-xs font-mono font-bold uppercase tracking-wider transition-all ${mode === AppMode.GENERAL ? 'bg-neon-blue text-black' : 'text-gray-400 hover:text-white'}`}
+            >
+              Medical Guide
+            </button>
+            <button 
+              onClick={() => setMode(AppMode.THERAPY)}
+              className={`px-3 py-1.5 rounded-lg text-[10px] md:text-xs font-mono font-bold uppercase tracking-wider transition-all ${mode === AppMode.THERAPY ? 'bg-purple-500 text-white' : 'text-gray-400 hover:text-white'}`}
+            >
+              Therapist (CBT)
+            </button>
+          </div>
+          <button 
+            onClick={handleSummarizeClick}
+            disabled={chatHistory.length === 0}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-mono font-bold transition-all border border-white/10 text-gray-300 hover:text-white hover:border-white/30 bg-white/5 disabled:opacity-50"
+          >
+            <ClipboardList size={16} /> <span className="hidden md:inline">BRIEF</span>
+          </button>
+        </div>
+
+        {/* Messages */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6 relative">
+          {chatHistory.length === 0 && (
+            <div className="flex flex-col items-center justify-center h-full text-gray-600">
+               <div className="p-4 rounded-full bg-white/5 mb-4 relative">
+                  <div className="absolute -top-1 -right-1 w-3 h-3 bg-neon-green rounded-full animate-pulse"></div>
+                  <MessageSquare size={32} className="opacity-50" />
+               </div>
+               <p className="font-medium text-lg">Start a session with SomAI.</p>
+               <p className="text-xs mt-2 opacity-50 flex items-center gap-2">
+                 <span className="flex items-center gap-1"><ScanEye size={12}/> Vision Enabled</span> • 
+                 <span>Secure</span> • 
+                 <span>Private</span>
+               </p>
+            </div>
+          )}
+          
+          {chatHistory.map((msg) => (
+            <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-[85%] md:max-w-[75%] rounded-2xl px-5 py-3 shadow-lg relative group ${
+                msg.role === 'user' 
+                  ? 'bg-neon-green/10 text-white border border-neon-green/20 rounded-tr-none' 
+                  : 'bg-black/40 text-gray-200 border border-white/10 rounded-tl-none'
+              }`}>
+                {msg.image && (
+                  <div className="mb-3 rounded-lg overflow-hidden border border-white/10">
+                    <img src={msg.image} alt="Upload" className="max-w-full h-auto max-h-64 object-cover" />
+                  </div>
+                )}
+                <p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
+                
+                {msg.role === 'model' && (
+                  <button 
+                    onClick={() => speakText(msg.text, msg.id)}
+                    className={`absolute -right-10 top-2 p-2 rounded-full hover:bg-white/10 transition-all ${speakingId === msg.id ? 'text-neon-blue opacity-100' : 'text-gray-500 opacity-0 group-hover:opacity-100'}`}
+                  >
+                     <Volume2 size={16} className={speakingId === msg.id ? "animate-pulse" : ""} />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+          
+          {isProcessing && (
+            <div className="flex justify-start">
+              <div className="bg-black/20 px-4 py-3 rounded-2xl rounded-tl-none border border-white/5 flex gap-1.5 items-center">
+                <span className="w-1.5 h-1.5 bg-neon-green rounded-full animate-bounce"></span>
+                <span className="w-1.5 h-1.5 bg-neon-green rounded-full animate-bounce delay-100"></span>
+                <span className="w-1.5 h-1.5 bg-neon-green rounded-full animate-bounce delay-200"></span>
+              </div>
+            </div>
+          )}
+          <div ref={scrollRef}></div>
+        </div>
+
+        {/* Quick Replies */}
+        {!isProcessing && quickReplies.length > 0 && (
+          <div className="px-4 pb-2 flex gap-2 overflow-x-auto scrollbar-hide">
+            {quickReplies.map((reply, i) => (
+              <button
+                key={i}
+                onClick={() => { setCurrentInput(reply); handleSend(); }}
+                className="whitespace-nowrap px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs text-gray-300 hover:bg-neon-blue/20 hover:text-neon-blue hover:border-neon-blue/30 transition-all flex items-center gap-1"
+              >
+                <Sparkles size={10} /> {reply}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* Input Area */}
+        <div className="p-4 bg-black/50 border-t border-white/5 z-20 relative">
+          
+          {/* SomAI Vision Tip */}
+          {showVisionTip && !selectedImage && (
+             <div className="absolute -top-12 left-4 z-30 animate-in fade-in slide-in-from-bottom-2">
+                <div className="bg-neon-blue/10 backdrop-blur-md border border-neon-blue/30 text-neon-blue text-[10px] md:text-xs px-3 py-2 rounded-lg shadow-lg flex items-center gap-2">
+                   <ScanEye size={14} />
+                   <span><span className="font-bold">SomAI Vision:</span> Upload nutrition labels, skin symptoms, or reports for analysis.</span>
+                   <button onClick={() => setShowVisionTip(false)} className="hover:text-white ml-2"><X size={12}/></button>
+                </div>
+                {/* Arrow */}
+                <div className="absolute -bottom-1 left-4 w-2 h-2 bg-neon-blue/10 border-b border-r border-neon-blue/30 transform rotate-45"></div>
+             </div>
+          )}
+
+          {selectedImage && (
+            <div className="flex items-center gap-2 mb-3 bg-white/5 p-2 rounded-lg w-fit border border-white/10">
+               <div className="w-8 h-8 rounded bg-gray-800 overflow-hidden">
+                 <img src={selectedImage} alt="Selected" className="w-full h-full object-cover" />
+               </div>
+               <span className="text-xs text-gray-400">Image attached</span>
+               <button onClick={() => setSelectedImage(null)} className="p-1 hover:bg-white/10 rounded-full text-gray-500 hover:text-white ml-2">
+                 <X size={14} />
+               </button>
+            </div>
+          )}
+          <div className="flex items-center gap-3">
+            <input 
+              type="file" 
+              accept="image/*" 
+              className="hidden" 
+              ref={fileInputRef}
+              onChange={handleImageSelect}
+            />
+            <button 
+              onClick={() => fileInputRef.current?.click()}
+              className={`p-3 rounded-xl transition-all relative ${selectedImage ? 'bg-neon-blue/20 text-neon-blue' : 'bg-white/5 text-gray-400 hover:text-white hover:bg-white/10'}`}
+              title="SomAI Vision"
+            >
+              <Camera size={20} />
+            </button>
+            
+            <div className="flex-1 relative">
+               <input 
+                 value={currentInput}
+                 onChange={(e) => setCurrentInput(e.target.value)}
+                 onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+                 placeholder={isListening ? "Listening..." : "Message SomAI..."}
+                 className="w-full bg-black/40 border border-white/10 rounded-xl py-3 pl-4 pr-10 text-white placeholder-gray-600 focus:border-neon-blue outline-none transition-all"
+               />
+               <button 
+                 onClick={toggleListening}
+                 className={`absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-lg transition-all ${isListening ? 'text-red-500 animate-pulse' : 'text-gray-500 hover:text-white'}`}
+               >
+                 <Mic size={18} />
+               </button>
+            </div>
+
+            <button 
+              onClick={handleSend}
+              disabled={(!currentInput.trim() && !selectedImage) || isProcessing}
+              className="p-3 rounded-xl bg-neon-blue text-black font-bold hover:bg-neon-blue/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-[0_0_15px_rgba(0,204,255,0.3)]"
+            >
+              <Send size={20} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Chat;

components/Dashboard.tsx

@@ -0,0 +1,203 @@
+
+import React from 'react';
+import { Activity, HeartPulse, FileText, ShieldCheck } from 'lucide-react';
+import { ClinicalVitals, RiskAnalysisResult, PatientProfile, Medication, ChatMessage } from '../types';
+import GaugeChart from './GaugeChart';
+import ReportView from './ReportView';
+
+interface DashboardProps {
+  vitals: ClinicalVitals;
+  setVitals: React.Dispatch<React.SetStateAction<ClinicalVitals>>;
+  riskResult: RiskAnalysisResult | null;
+  chatSummary: string;
+  handleRunAnalysis: () => void;
+  isAnalyzing: boolean;
+  onPrint: () => void;
+  // New props for full report
+  profile: PatientProfile;
+  medications: Medication[];
+  chatHistory: ChatMessage[];
+}
+
+const Dashboard: React.FC<DashboardProps> = ({ 
+  vitals, 
+  setVitals, 
+  riskResult,
+  chatSummary,
+  handleRunAnalysis, 
+  isAnalyzing,
+  onPrint,
+  profile,
+  medications,
+  chatHistory
+}) => {
+  const handleVitalChange = (key: keyof ClinicalVitals, val: number) => {
+    setVitals(prev => ({ ...prev, [key]: val }));
+  };
+
+  return (
+    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+        {/* LEFT COLUMN: CONTROLS */}
+        <div className="space-y-6">
+          <div className="glass-panel p-6 rounded-2xl border-t border-neon-green">
+            <h2 className="text-lg font-bold mb-6 flex items-center gap-2 text-white">
+              <Activity className="text-neon-green" size={20} /> Clinical Vitals Input
+            </h2>
+            
+            <div className="space-y-6">
+              <div>
+                <div className="flex justify-between text-sm mb-2">
+                  <span className="text-gray-400 font-medium">Systolic BP</span>
+                  <span className="font-mono text-neon-green font-bold">{vitals.systolicBp} mmHg</span>
+                </div>
+                <input 
+                  type="range" min="90" max="200" 
+                  value={vitals.systolicBp}
+                  onChange={e => handleVitalChange('systolicBp', parseInt(e.target.value))}
+                  className="w-full h-2 bg-black rounded-lg appearance-none cursor-pointer accent-neon-green"
+                />
+              </div>
+              
+              <div>
+                <div className="flex justify-between text-sm mb-2">
+                  <span className="text-gray-400 font-medium">Glucose</span>
+                  <span className="font-mono text-neon-yellow font-bold">{vitals.glucose} mg/dL</span>
+                </div>
+                <input 
+                  type="range" min="70" max="300" 
+                  value={vitals.glucose}
+                  onChange={e => handleVitalChange('glucose', parseInt(e.target.value))}
+                  className="w-full h-2 bg-black rounded-lg appearance-none cursor-pointer accent-neon-yellow"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-sm mb-2">
+                  <span className="text-gray-400 font-medium">Sleep Quality</span>
+                  <span className="font-mono text-neon-blue font-bold">{vitals.sleepQuality}/10</span>
+                </div>
+                <input 
+                  type="range" min="0" max="10" 
+                  value={vitals.sleepQuality}
+                  onChange={e => handleVitalChange('sleepQuality', parseInt(e.target.value))}
+                  className="w-full h-2 bg-black rounded-lg appearance-none cursor-pointer accent-neon-blue"
+                />
+              </div>
+
+              <div>
+                <div className="flex justify-between text-sm mb-2">
+                  <span className="text-gray-400 font-medium">Missed Doses (7d)</span>
+                  <span className="font-mono text-neon-red font-bold">{vitals.missedDoses}</span>
+                </div>
+                <input 
+                  type="range" min="0" max="14" 
+                  value={vitals.missedDoses}
+                  onChange={e => handleVitalChange('missedDoses', parseInt(e.target.value))}
+                  className="w-full h-2 bg-black rounded-lg appearance-none cursor-pointer accent-neon-red"
+                />
+              </div>
+
+              <button 
+                onClick={handleRunAnalysis}
+                disabled={isAnalyzing}
+                className="w-full mt-4 bg-neon-green hover:bg-neon-green/90 text-black py-4 rounded-xl font-mono font-bold transition-all flex justify-center items-center gap-2 shadow-[0_0_20px_rgba(0,255,128,0.2)] disabled:opacity-50"
+              >
+                {isAnalyzing ? <span className="animate-spin">⏳</span> : <HeartPulse size={20} />}
+                {isAnalyzing ? 'PROCESSING...' : 'RUN ANALYSIS'}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT COLUMN: ANALYSIS */}
+        <div className="space-y-6">
+          <div className="glass-panel p-6 rounded-2xl min-h-[500px] flex flex-col">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-xl font-bold text-white">SomAI Analysis</h3>
+              <button 
+                onClick={onPrint}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-mono font-bold transition-all border border-white/10 text-gray-300 hover:text-white hover:border-white/30 bg-white/5"
+              >
+                <FileText size={14} />
+                EXPORT PDF
+              </button>
+            </div>
+            
+            {riskResult ? (
+              <div className="flex flex-col gap-6 animate-in fade-in">
+                <div className="flex flex-col md:flex-row items-center gap-6">
+                   <div className="w-full md:w-56">
+                      <GaugeChart value={riskResult.numericScore} />
+                   </div>
+                   <div className="flex-1">
+                      <h4 className="text-xs text-neon-blue font-bold uppercase mb-2">Clinical Summary</h4>
+                      <p className="text-base text-gray-200 leading-relaxed">{riskResult.summary}</p>
+                   </div>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                   <div className="glass-card p-4 rounded-xl">
+                      <h4 className="text-xs font-mono text-gray-500 uppercase mb-3 font-bold">Recommended Actions</h4>
+                      <ul className="space-y-2">
+                        {riskResult.actionItems.map((item, i) => (
+                          <li key={i} className="flex items-start gap-2 text-sm text-gray-300">
+                            <span className="text-neon-green mt-1">✓</span> {item}
+                          </li>
+                        ))}
+                      </ul>
+                   </div>
+                   <div className="glass-card p-4 rounded-xl">
+                      <h4 className="text-xs font-mono text-gray-500 uppercase mb-3 font-bold flex items-center gap-2">
+                         <ShieldCheck size={14} className="text-purple-400"/> Medical Coding Pipeline
+                      </h4>
+                      <div className="space-y-2">
+                        {riskResult.codingPipeline?.map((code, i) => (
+                           <div key={i} className="flex justify-between items-center text-xs border-b border-white/5 pb-1 last:border-0">
+                              <span className="text-gray-400">{code.description}</span>
+                              <span className="font-mono text-purple-300 bg-purple-500/10 px-1.5 py-0.5 rounded">{code.code}</span>
+                           </div>
+                        ))}
+                        {(!riskResult.codingPipeline || riskResult.codingPipeline.length === 0) && (
+                           <div className="flex flex-wrap gap-2">
+                             {riskResult.icd10Codes.map((code, i) => (
+                               <span key={i} className="px-2 py-1 bg-white/5 rounded text-xs text-purple-300 font-mono">
+                                 {code}
+                               </span>
+                             ))}
+                           </div>
+                        )}
+                      </div>
+                      {riskResult.insuranceNote && (
+                         <div className="mt-3 pt-3 border-t border-white/5">
+                            <p className="text-[10px] text-gray-500 uppercase font-bold mb-1">Insurance Justification</p>
+                            <p className="text-xs text-gray-300 italic">"{riskResult.insuranceNote}"</p>
+                         </div>
+                      )}
+                   </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex-1 flex flex-col items-center justify-center text-gray-600 border-2 border-dashed border-white/10 rounded-xl">
+                <Activity size={48} className="mb-4 opacity-30" />
+                <p className="font-medium text-lg text-gray-500">Awaiting Clinical Data</p>
+                <p className="text-sm mt-2 opacity-50">Input vitals on the left to generate analysis</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* FULL REPORT PREVIEW SECTION */}
+      <ReportView 
+        profile={profile}
+        vitals={vitals}
+        riskResult={riskResult}
+        chatHistory={chatHistory}
+        chatSummary={chatSummary}
+        medications={medications}
+      />
+    </div>
+  );
+};
+
+export default Dashboard;

components/GaugeChart.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
+
+interface GaugeChartProps {
+  value: number; // 0 to 100
+}
+
+const GaugeChart: React.FC<GaugeChartProps> = ({ value }) => {
+  const data = [
+    { name: 'Low', value: 40, color: '#00ff80' },
+    { name: 'Medium', value: 40, color: '#ffc300' },
+    { name: 'High', value: 20, color: '#ff3300' },
+  ];
+
+  const cx = "50%";
+  const cy = "70%";
+  const iR = 60;
+  const oR = 80;
+
+  const needleValue = Math.min(Math.max(value, 0), 100);
+  // Calculate needle rotation
+  const needleAngle = 180 - (needleValue / 100) * 180;
+
+  return (
+    // Added min-w-[200px] and min-h to prevent Recharts -1 width calculation error
+    <div className="relative h-48 w-full min-w-[200px] flex flex-col items-center justify-center overflow-hidden">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            dataKey="value"
+            startAngle={180}
+            endAngle={0}
+            data={data}
+            cx={cx}
+            cy={cy}
+            innerRadius={iR}
+            outerRadius={oR}
+            paddingAngle={2}
+            stroke="none"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} fillOpacity={0.3} stroke={entry.color} strokeWidth={1} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+      
+      {/* Needle Overlay */}
+      <div className="absolute top-0 left-0 w-full h-full pointer-events-none flex items-end justify-center pb-[30%]">
+         <div 
+           className="w-1 h-16 bg-white origin-bottom transition-transform duration-1000 ease-out shadow-[0_0_10px_rgba(255,255,255,0.8)]"
+           style={{ transform: `rotate(${needleValue * 1.8 - 90}deg)` }}
+         />
+         <div className="absolute w-4 h-4 bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,0.8)]" />
+      </div>
+
+      <div className="absolute bottom-4 flex flex-col items-center">
+        <span className="text-4xl font-mono font-bold text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.3)]">
+          {Math.round(value)}
+        </span>
+        <span className="text-xs text-gray-400 uppercase tracking-widest mt-1">Risk Score</span>
+      </div>
+    </div>
+  );
+};
+
+export default GaugeChart;

components/MedicationTracker.tsx

@@ -0,0 +1,332 @@
+
+import React, { useState, useCallback } from 'react';
+import { Plus, Trash2, CheckCircle, Trophy, AlertTriangle, Quote, Calendar, Edit2, X, Save } from 'lucide-react';
+import { Medication, PatientProfile } from '../types';
+
+interface MedicationTrackerProps {
+  medications: Medication[];
+  setMedications: React.Dispatch<React.SetStateAction<Medication[]>>;
+  profile: PatientProfile;
+  setProfile: React.Dispatch<React.SetStateAction<PatientProfile>>;
+}
+
+const MOTIVATIONAL_QUOTES = [
+  "Success is stumbling from failure to failure with no loss of enthusiasm. – Winston Churchill",
+  "Fall seven times, stand up eight. – Japanese Proverb",
+  "The only real mistake is the one from which we learn nothing. – Henry Ford",
+  "It does not matter how slowly you go as long as you do not stop. – Confucius"
+];
+
+// Memoized item to prevent lag when typing in form
+const MedicationItem = React.memo(({ med, editingId, onToggle, onEdit, onDelete }: { 
+  med: Medication; 
+  editingId: string | null; 
+  onToggle: (id: string) => void;
+  onEdit: (med: Medication) => void;
+  onDelete: (id: string) => void;
+}) => (
+  <div className={`glass-card p-4 rounded-xl flex justify-between items-center group transition-all relative ${editingId === med.id ? 'border-neon-yellow/50 bg-neon-yellow/5' : (med.taken ? 'border-green-500/30 bg-green-500/5' : 'border-white/5')}`}>
+    <div className="flex items-center gap-4">
+        <button 
+          onClick={() => onToggle(med.id)}
+          className={`w-8 h-8 rounded-full flex items-center justify-center border transition-all ${
+            med.taken 
+            ? 'bg-green-500 border-green-500 text-black' 
+            : 'border-gray-500 text-transparent hover:border-green-400'
+          }`}
+        >
+          <CheckCircle size={16} />
+        </button>
+        <div>
+          <p className={`font-bold ${med.taken ? 'text-green-400 line-through' : 'text-white'}`}>{med.name}</p>
+          <div className="flex flex-col gap-0.5 mt-1">
+            <span className="text-xs text-gray-400">{med.dosage} • {med.time}</span>
+            {(med.startDate || med.endDate) && (
+              <span className="text-[10px] text-gray-500 flex items-center gap-1">
+                  <Calendar size={10} /> {med.startDate || 'Now'} → {med.endDate || 'Ongoing'}
+              </span>
+            )}
+          </div>
+        </div>
+    </div>
+    
+    <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button 
+          onClick={() => onEdit(med)}
+          className="p-2 rounded-lg text-gray-400 hover:text-neon-yellow hover:bg-neon-yellow/10 transition-colors"
+          title="Edit"
+        >
+            <Edit2 size={16} />
+        </button>
+        <button 
+          onClick={() => onDelete(med.id)} 
+          className="p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-400/10 transition-colors"
+          title="Delete"
+        >
+            <Trash2 size={16} />
+        </button>
+    </div>
+  </div>
+));
+
+const MedicationTracker: React.FC<MedicationTrackerProps> = ({ 
+  medications, 
+  setMedications, 
+  profile, 
+  setProfile 
+}) => {
+  const [newMedName, setNewMedName] = useState('');
+  const [newMedDosage, setNewMedDosage] = useState('');
+  const [newMedTime, setNewMedTime] = useState('09:00');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  
+  // Edit Mode State
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setNewMedName('');
+    setNewMedDosage('');
+    setNewMedTime('09:00');
+    setStartDate('');
+    setEndDate('');
+    setEditingId(null);
+  };
+
+  const handleEdit = useCallback((med: Medication) => {
+    setNewMedName(med.name);
+    setNewMedDosage(med.dosage);
+    setNewMedTime(med.time);
+    setStartDate(med.startDate || '');
+    setEndDate(med.endDate || '');
+    setEditingId(med.id);
+  }, []);
+
+  const handleUpdate = () => {
+    if (!editingId || !newMedName || !newMedDosage) return;
+    
+    setMedications(prev => prev.map(med => {
+      if (med.id === editingId) {
+        return {
+          ...med,
+          name: newMedName,
+          dosage: newMedDosage,
+          time: newMedTime,
+          startDate: startDate || undefined,
+          endDate: endDate || undefined
+        };
+      }
+      return med;
+    }));
+    resetForm();
+  };
+
+  const addMedication = () => {
+    if (!newMedName || !newMedDosage) return;
+    const newMed: Medication = {
+      id: Date.now().toString(),
+      name: newMedName,
+      dosage: newMedDosage,
+      time: newMedTime,
+      taken: false,
+      startDate: startDate || undefined,
+      endDate: endDate || undefined
+    };
+    setMedications(prev => [...prev, newMed]);
+    resetForm();
+  };
+
+  const removeMedication = useCallback((id: string) => {
+    setMedications(prev => prev.filter(m => m.id !== id));
+    if (editingId === id) resetForm();
+  }, [editingId, setMedications]);
+
+  const toggleTaken = useCallback((id: string) => {
+    // 1. Calculate new state immediately
+    const updatedMeds = medications.map(m => {
+      if (m.id === id) {
+        return { ...m, taken: !m.taken };
+      }
+      return m;
+    });
+
+    // 2. Determine Streak Changes
+    const allTakenNow = updatedMeds.length > 0 && updatedMeds.every(m => m.taken);
+    
+    const today = new Date();
+    today.setHours(0,0,0,0);
+    const todayStr = today.toISOString();
+    
+    const lastUpdate = new Date(profile.lastStreakUpdate);
+    lastUpdate.setHours(0,0,0,0);
+    const lastUpdateStr = lastUpdate.toISOString();
+
+    const isToday = today.getTime() === lastUpdate.getTime();
+
+    let newStreak = profile.streak;
+    let newLastUpdate = profile.lastStreakUpdate;
+
+    if (allTakenNow) {
+      if (!isToday) {
+        // First time finishing today -> Increment
+        newStreak += 1;
+        newLastUpdate = new Date().toISOString(); // store full timestamp for exactness
+      }
+    } else {
+      // Not all taken
+      if (isToday) {
+        // If we previously marked today as done, we need to revert it.
+        // Decrement streak (min 0)
+        newStreak = Math.max(0, newStreak - 1);
+        // Set update date to yesterday so if they re-complete it, it counts as "new" for today
+        const yesterday = new Date(today);
+        yesterday.setDate(yesterday.getDate() - 1);
+        newLastUpdate = yesterday.toISOString();
+      }
+    }
+
+    // 3. Batch Updates
+    setMedications(updatedMeds);
+    if (newStreak !== profile.streak || newLastUpdate !== profile.lastStreakUpdate) {
+      setProfile(prev => ({ 
+        ...prev, 
+        streak: newStreak,
+        lastStreakUpdate: newLastUpdate
+      }));
+    }
+  }, [medications, profile.streak, profile.lastStreakUpdate, setMedications, setProfile]);
+
+  const pendingMeds = medications.filter(m => !m.taken).length;
+  const randomQuote = MOTIVATIONAL_QUOTES[Math.floor(Math.random() * MOTIVATIONAL_QUOTES.length)];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      
+      <div className="space-y-6">
+        <div className={`glass-panel p-6 rounded-2xl border-t ${editingId ? 'border-neon-yellow' : 'border-neon-blue'} transition-colors`}>
+          <div className="flex justify-between items-center mb-4">
+             <h2 className={`text-xl font-bold transition-colors flex items-center gap-2 ${editingId ? 'text-neon-yellow' : 'text-white'}`}>
+               {editingId ? <Edit2 size={20} /> : <Plus className="text-neon-blue" size={20} />}
+               {editingId ? 'Edit Medication' : 'Add Medication'}
+             </h2>
+             {editingId && (
+               <button onClick={resetForm} className="text-xs text-gray-400 hover:text-white flex items-center gap-1">
+                 <X size={14} /> Cancel
+               </button>
+             )}
+          </div>
+          
+          <div className="grid grid-cols-2 gap-4 mb-4">
+             <input 
+               value={newMedName} onChange={e => setNewMedName(e.target.value)}
+               placeholder="Medication Name"
+               className="bg-black/40 border border-white/10 rounded-lg p-3 text-white text-sm focus:border-neon-blue outline-none col-span-2"
+             />
+             <input 
+               value={newMedDosage} onChange={e => setNewMedDosage(e.target.value)}
+               placeholder="Dosage (e.g. 10mg)"
+               className="bg-black/40 border border-white/10 rounded-lg p-3 text-white text-sm focus:border-neon-blue outline-none"
+             />
+             <input 
+               type="time"
+               value={newMedTime} onChange={e => setNewMedTime(e.target.value)}
+               className="bg-black/40 border border-white/10 rounded-lg p-3 text-white text-sm focus:border-neon-blue outline-none"
+             />
+             
+             <div className="col-span-2 grid grid-cols-2 gap-4">
+               <div>
+                  <label className="text-[10px] text-gray-500 uppercase font-bold mb-1 block">Start Date</label>
+                  <input 
+                    type="date"
+                    value={startDate} onChange={e => setStartDate(e.target.value)}
+                    className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-white text-sm focus:border-neon-blue outline-none"
+                  />
+               </div>
+               <div>
+                  <label className="text-[10px] text-gray-500 uppercase font-bold mb-1 block">Finish Date (Opt)</label>
+                  <input 
+                    type="date"
+                    value={endDate} onChange={e => setEndDate(e.target.value)}
+                    className="w-full bg-black/40 border border-white/10 rounded-lg p-3 text-white text-sm focus:border-neon-blue outline-none"
+                  />
+               </div>
+             </div>
+
+             {editingId ? (
+                <button 
+                  onClick={handleUpdate}
+                  disabled={!newMedName}
+                  className="bg-neon-yellow text-black font-bold rounded-lg py-3 hover:bg-neon-yellow/90 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 col-span-2 mt-2 shadow-[0_0_15px_rgba(255,195,0,0.2)]"
+                >
+                  <Save size={18} /> Update Medication
+                </button>
+             ) : (
+                <button 
+                  onClick={addMedication}
+                  disabled={!newMedName}
+                  className="bg-neon-blue text-black font-bold rounded-lg py-3 hover:bg-neon-blue/90 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 col-span-2 mt-2 shadow-[0_0_15px_rgba(0,204,255,0.2)]"
+                >
+                  <Plus size={18} /> Add to Schedule
+                </button>
+             )}
+          </div>
+        </div>
+
+        <div className="space-y-3">
+          {medications.map(med => (
+             <MedicationItem 
+               key={med.id} 
+               med={med} 
+               editingId={editingId} 
+               onToggle={toggleTaken} 
+               onEdit={handleEdit} 
+               onDelete={removeMedication} 
+             />
+          ))}
+          {medications.length === 0 && (
+             <p className="text-center text-gray-500 text-sm py-4 italic">No medications tracked.</p>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-6">
+         <div className="glass-panel p-8 rounded-2xl text-center relative overflow-hidden flex flex-col items-center justify-center min-h-[300px]">
+            <div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent ${profile.streak > 0 ? 'via-yellow-500' : 'via-gray-500'} to-transparent`}></div>
+            
+            <Trophy size={64} className={`${profile.streak > 0 ? 'text-yellow-400 drop-shadow-[0_0_10px_rgba(234,179,8,0.5)]' : 'text-gray-700'} mb-4 transition-colors duration-500`} />
+
+            <h3 className={`text-4xl font-mono font-bold ${profile.streak > 0 ? 'text-white' : 'text-gray-500'} mb-2`}>{profile.streak} Days</h3>
+            <p className="text-gray-400/80 font-bold uppercase tracking-widest text-xs">Current Streak</p>
+            
+            {profile.streak === 0 && (
+                <div className="mt-8 bg-white/5 p-4 rounded-xl border border-white/5">
+                    <Quote size={16} className="text-gray-500 mx-auto mb-2" />
+                    <p className="text-sm text-gray-300 italic">"{randomQuote}"</p>
+                </div>
+            )}
+
+            {profile.streak > 0 && (
+                <p className="mt-6 text-gray-400 text-sm max-w-xs">
+                Keep going! You are building a healthier future.
+                </p>
+            )}
+         </div>
+
+         {pendingMeds > 0 && (
+           <div className="glass-card p-4 rounded-xl border-l-4 border-l-neon-red flex items-start gap-4">
+              <div className="p-2 bg-neon-red/10 rounded-lg text-neon-red">
+                 <AlertTriangle size={24} />
+              </div>
+              <div>
+                 <h4 className="font-bold text-white">Missed Doses Pending</h4>
+                 <p className="text-sm text-gray-400 mt-1">You have <span className="text-neon-red font-bold">{pendingMeds}</span> medication(s) pending for today.</p>
+              </div>
+           </div>
+         )}
+      </div>
+
+    </div>
+  );
+};
+
+export default MedicationTracker;

components/PrintReport.tsx

@@ -0,0 +1,273 @@
+
+import React from 'react';
+import { PatientProfile, ClinicalVitals, RiskAnalysisResult, ChatMessage, Medication } from '../types';
+import { Activity, Pill, AlertTriangle, CheckCircle, MessageSquare, ClipboardList, User, ShieldCheck } from 'lucide-react';
+
+interface PrintReportProps {
+  profile: PatientProfile;
+  vitals: ClinicalVitals;
+  riskResult: RiskAnalysisResult | null;
+  chatHistory: ChatMessage[];
+  chatSummary: string;
+  medications?: Medication[];
+}
+
+const PrintReport: React.FC<PrintReportProps> = ({
+  profile,
+  vitals,
+  riskResult,
+  chatHistory,
+  chatSummary,
+  medications = []
+}) => {
+  return (
+    <div className="p-8 max-w-[210mm] mx-auto bg-white text-black font-sans leading-normal">
+      {/* Header */}
+      <header className="flex justify-between items-start border-b-4 border-black pb-6 mb-8">
+        <div>
+          <h1 className="text-4xl font-black text-black tracking-tight flex items-center gap-3">
+             <Activity className="text-black" size={32} />
+             SomAI <span className="text-gray-400 font-light">Report</span>
+          </h1>
+          <p className="text-gray-600 text-sm mt-1 font-medium tracking-wide uppercase">Patient Education & Clinical Risk Assessment</p>
+        </div>
+        <div className="text-right">
+          <div className="inline-block bg-black text-white px-3 py-1 text-xs font-bold uppercase tracking-wider mb-2">Confidential</div>
+          <p className="text-gray-900 font-mono text-sm">{new Date().toLocaleDateString()}</p>
+          <p className="text-gray-500 text-xs">{new Date().toLocaleTimeString()}</p>
+        </div>
+      </header>
+
+      {/* Patient Profile & Vitals Grid */}
+      <div className="grid grid-cols-2 gap-8 mb-8">
+        {/* Patient Info */}
+        <section className="break-inside-avoid">
+          <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+            <User size={16} /> Patient Demographics
+          </h2>
+          <div className="bg-gray-50 p-4 rounded-xl border border-gray-100 space-y-3">
+            <div className="grid grid-cols-3 text-sm">
+              <span className="text-gray-500 font-medium">Name</span>
+              <span className="col-span-2 font-bold text-gray-900">{profile.name}</span>
+            </div>
+            <div className="grid grid-cols-3 text-sm">
+              <span className="text-gray-500 font-medium">Age</span>
+              <span className="col-span-2 font-bold text-gray-900">{profile.age} years</span>
+            </div>
+            <div className="grid grid-cols-3 text-sm">
+              <span className="text-gray-500 font-medium">Condition</span>
+              <span className="col-span-2 font-bold text-gray-900">{profile.condition}</span>
+            </div>
+            <div className="grid grid-cols-3 text-sm">
+              <span className="text-gray-500 font-medium">Allergies</span>
+              <span className="col-span-2 font-bold text-red-600">{profile.allergies}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-200 mt-2">
+              <span className="block text-xs font-bold text-gray-400 uppercase mb-1">History</span>
+              <p className="text-sm text-gray-700 leading-snug">{profile.history}</p>
+            </div>
+          </div>
+        </section>
+
+        {/* Clinical Snapshot */}
+        <section className="break-inside-avoid">
+          <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+            <Activity size={16} /> Clinical Vitals
+          </h2>
+          <div className="grid grid-cols-2 gap-3">
+             <div className="bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col items-center justify-center text-center">
+               <span className="text-[10px] font-bold text-gray-400 uppercase">Systolic BP</span>
+               <span className={`text-2xl font-black ${vitals.systolicBp > 140 ? 'text-red-600' : 'text-gray-900'}`}>{vitals.systolicBp}</span>
+               <span className="text-[10px] text-gray-500">mmHg</span>
+             </div>
+             <div className="bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col items-center justify-center text-center">
+               <span className="text-[10px] font-bold text-gray-400 uppercase">Glucose</span>
+               <span className={`text-2xl font-black ${vitals.glucose > 180 ? 'text-red-600' : 'text-gray-900'}`}>{vitals.glucose}</span>
+               <span className="text-[10px] text-gray-500">mg/dL</span>
+             </div>
+             <div className="bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col items-center justify-center text-center">
+               <span className="text-[10px] font-bold text-gray-400 uppercase">Sleep Quality</span>
+               <span className="text-2xl font-black text-gray-900">{vitals.sleepQuality}<span className="text-sm text-gray-400">/10</span></span>
+             </div>
+             <div className="bg-gray-50 p-3 rounded-lg border border-gray-100 flex flex-col items-center justify-center text-center">
+               <span className="text-[10px] font-bold text-gray-400 uppercase">Risk Score</span>
+               <span className={`text-2xl font-black ${riskResult && riskResult.numericScore > 60 ? 'text-red-600' : 'text-green-600'}`}>
+                 {riskResult ? riskResult.numericScore : '--'}
+               </span>
+               <span className="text-[10px] text-gray-500">/100</span>
+             </div>
+          </div>
+        </section>
+      </div>
+
+      {/* AI Analysis */}
+      <section className="mb-8 break-inside-avoid">
+        <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+          <AlertTriangle size={16} /> AI Clinical Analysis
+        </h2>
+        {riskResult ? (
+          <div className="bg-blue-50/50 rounded-xl border border-blue-100 p-6">
+             <div className="mb-6">
+                <h3 className="text-xs font-bold text-blue-800 uppercase tracking-wide mb-2">Clinical Summary</h3>
+                <p className="text-sm text-blue-950 leading-relaxed font-medium">{riskResult.summary}</p>
+             </div>
+             
+             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div>
+                   <h3 className="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3">Action Items</h3>
+                   <ul className="space-y-2">
+                      {riskResult.actionItems.map((item, i) => (
+                        <li key={i} className="flex items-start gap-2 text-sm text-gray-800">
+                           <CheckCircle size={14} className="text-green-600 mt-0.5 flex-shrink-0" />
+                           {item}
+                        </li>
+                      ))}
+                   </ul>
+                </div>
+                {/* Medical Coding Table */}
+                <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                   <div className="bg-gray-50 px-3 py-2 border-b border-gray-200 text-xs font-bold text-gray-500 uppercase flex items-center gap-2">
+                      <ShieldCheck size={14} /> Coding Pipeline
+                   </div>
+                   <table className="w-full text-xs text-left">
+                     <thead>
+                       <tr className="bg-gray-50 text-gray-400">
+                         <th className="px-3 py-1 font-medium">Type</th>
+                         <th className="px-3 py-1 font-medium">Code</th>
+                         <th className="px-3 py-1 font-medium">Desc</th>
+                       </tr>
+                     </thead>
+                     <tbody className="divide-y divide-gray-100">
+                       {riskResult.codingPipeline?.map((code, i) => (
+                         <tr key={i}>
+                           <td className="px-3 py-1.5 text-gray-500">{code.type}</td>
+                           <td className="px-3 py-1.5 font-bold font-mono text-blue-600">{code.code}</td>
+                           <td className="px-3 py-1.5 text-gray-800">{code.description}</td>
+                         </tr>
+                       ))}
+                       {(!riskResult.codingPipeline || riskResult.codingPipeline.length === 0) && (
+                         <tr><td colSpan={3} className="px-3 py-2 text-gray-400 italic">No codes generated.</td></tr>
+                       )}
+                     </tbody>
+                   </table>
+                   {riskResult.insuranceNote && (
+                     <div className="p-3 bg-gray-50 border-t border-gray-200">
+                       <p className="text-[10px] text-gray-400 font-bold uppercase mb-0.5">Insurance Note</p>
+                       <p className="text-xs text-gray-600 italic">"{riskResult.insuranceNote}"</p>
+                     </div>
+                   )}
+                </div>
+             </div>
+          </div>
+        ) : (
+          <div className="bg-gray-100 p-6 rounded-lg border-2 border-dashed border-gray-300 text-center">
+             <p className="text-gray-600 font-bold text-sm">Analysis Not Run</p>
+             <p className="text-gray-500 text-xs">Run analysis in dashboard before printing.</p>
+          </div>
+        )}
+      </section>
+
+      {/* Medication Adherence */}
+      <section className="mb-8 break-inside-avoid">
+        <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+          <Pill size={16} /> Medication Schedule
+        </h2>
+        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+          <table className="w-full text-sm text-left">
+            <thead className="bg-gray-50 text-gray-500 font-bold text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3">Medication</th>
+                <th className="px-4 py-3">Dosage</th>
+                <th className="px-4 py-3">Time</th>
+                <th className="px-4 py-3">Duration</th>
+                <th className="px-4 py-3 text-right">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+               {medications.length > 0 ? medications.map(med => (
+                 <tr key={med.id}>
+                   <td className="px-4 py-3 font-bold text-gray-900">{med.name}</td>
+                   <td className="px-4 py-3 text-gray-600">{med.dosage}</td>
+                   <td className="px-4 py-3 font-mono text-gray-600">{med.time}</td>
+                   <td className="px-4 py-3 text-gray-500 text-xs">
+                     {med.startDate ? `${med.startDate} → ${med.endDate || 'Ongoing'}` : 'Continuous'}
+                   </td>
+                   <td className="px-4 py-3 text-right">
+                     {med.taken ? (
+                       <span className="inline-flex items-center gap-1 text-xs font-bold text-green-700 bg-green-50 px-2 py-1 rounded-full">
+                         <CheckCircle size={10} /> Taken
+                       </span>
+                     ) : (
+                       <span className="inline-flex items-center gap-1 text-xs font-bold text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
+                         Pending
+                       </span>
+                     )}
+                   </td>
+                 </tr>
+               )) : (
+                 <tr>
+                   <td colSpan={5} className="px-4 py-6 text-center text-gray-500 italic">No medications recorded.</td>
+                 </tr>
+               )}
+            </tbody>
+          </table>
+          {medications.length > 0 && (
+             <div className="bg-gray-50 px-4 py-3 border-t border-gray-200 flex justify-end items-center gap-3">
+                <span className="text-xs font-bold text-gray-500 uppercase">Current Streak</span>
+                <span className="text-lg font-black text-gray-900">{profile.streak} Days</span>
+             </div>
+          )}
+        </div>
+      </section>
+
+      {/* Chat Summary */}
+      <section className="mb-8 break-inside-avoid">
+         <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+           <ClipboardList size={16} /> Consultation Brief
+         </h2>
+         <div className="bg-yellow-50/50 p-6 rounded-xl border border-yellow-100">
+           {chatSummary ? (
+             <p className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap font-medium">{chatSummary}</p>
+           ) : (
+             <p className="text-gray-500 italic text-sm">No session summary available.</p>
+           )}
+         </div>
+      </section>
+
+      {/* Full Transcript */}
+      <section>
+         <h2 className="flex items-center gap-2 text-sm font-black uppercase tracking-wider text-black border-b border-gray-200 pb-2 mb-4">
+           <MessageSquare size={16} /> Conversation Transcript
+         </h2>
+         <div className="space-y-1">
+            {chatHistory.map((m) => (
+               <div key={m.id} className="grid grid-cols-12 gap-4 py-2 border-b border-gray-100 break-inside-avoid text-xs">
+                  <div className="col-span-2 font-bold text-gray-500 uppercase tracking-wider pt-1">
+                    {m.role === 'user' ? 'Patient' : 'SomAI'}
+                  </div>
+                  <div className="col-span-10 text-gray-800 leading-relaxed">
+                    {m.image && <div className="text-[10px] text-blue-600 mb-1 font-bold">[Image Attachment]</div>}
+                    {m.text}
+                  </div>
+               </div>
+            ))}
+            {chatHistory.length === 0 && <p className="text-gray-400 italic text-xs">No messages logged.</p>}
+         </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="mt-12 pt-6 border-t-2 border-gray-900 flex justify-between items-center text-[10px] text-gray-500 break-inside-avoid">
+        <div className="max-w-[60%]">
+          <p className="font-bold text-gray-900 mb-1 uppercase tracking-wider">Disclaimer</p>
+          <p>This report is generated by an AI assistant for educational purposes only. It is not a medical device. Always consult a qualified healthcare provider for diagnosis and treatment.</p>
+        </div>
+        <div className="text-right">
+          <p className="font-bold text-gray-900">SomAI</p>
+          <p>Powered by Google Gemini</p>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default PrintReport;

components/Profile.tsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { Save, Check, FileText } from 'lucide-react';
+import { PatientProfile, RiskAnalysisResult, ClinicalVitals, ChatMessage, Medication } from '../types';
+import ReportView from './ReportView';
+
+interface ProfileProps {
+  profile: PatientProfile;
+  setProfile: React.Dispatch<React.SetStateAction<PatientProfile>>;
+  onProfileUpdate?: () => void;
+  riskResult: RiskAnalysisResult | null;
+  chatSummary: string;
+  onPrint: () => void;
+  // New props for full report
+  vitals: ClinicalVitals;
+  medications: Medication[];
+  chatHistory: ChatMessage[];
+}
+
+const Profile: React.FC<ProfileProps> = ({ 
+  profile, 
+  setProfile, 
+  onProfileUpdate,
+  riskResult,
+  chatSummary,
+  onPrint,
+  vitals,
+  medications,
+  chatHistory
+}) => {
+  const [isSaved, setIsSaved] = useState(false);
+
+  const handleChange = (field: keyof PatientProfile, value: string | number) => {
+    setProfile(prev => ({ ...prev, [field]: value }));
+    setIsSaved(false); 
+  };
+
+  const handleManualSave = () => {
+    try {
+      localStorage.setItem('somai_profile', JSON.stringify(profile));
+    } catch(e) {
+      console.error("Failed to save profile:", e)
+    }
+    
+    if (onProfileUpdate) {
+      onProfileUpdate();
+    }
+
+    setIsSaved(true);
+    setTimeout(() => setIsSaved(false), 3000);
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <div>
+             <h2 className="text-2xl font-bold text-white mb-1">Patient Identity</h2>
+             <p className="text-gray-400 text-sm">Manage core patient demographics and history.</p>
+          </div>
+          <button 
+              onClick={onPrint}
+              className="flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-mono font-bold transition-all border border-white/10 text-gray-300 hover:text-white hover:border-white/30 bg-white/5"
+            >
+              <FileText size={14} />
+              EXPORT PDF
+            </button>
+        </div>
+
+        <div className="glass-panel p-8 rounded-2xl border-t border-neon-border relative overflow-hidden">
+          <div className="absolute top-0 right-0 w-64 h-64 bg-purple-500/5 rounded-full blur-3xl -z-10 pointer-events-none"></div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-mono font-bold text-gray-500 mb-2 uppercase tracking-wider">Full Name</label>
+                <input 
+                  value={profile.name}
+                  onChange={e => handleChange('name', e.target.value)}
+                  className="w-full bg-black/40 border border-white/10 rounded-lg p-4 text-white placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all"
+                  placeholder="Enter patient name"
+                />
+              </div>
+              
+              <div>
+                <label className="block text-xs font-mono font-bold text-gray-500 mb-2 uppercase tracking-wider">Age</label>
+                <input 
+                  type="number"
+                  value={profile.age}
+                  onChange={e => handleChange('age', parseInt(e.target.value) || 0)}
+                  className="w-full bg-black/40 border border-white/10 rounded-lg p-4 text-white placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-mono font-bold text-gray-500 mb-2 uppercase tracking-wider">Primary Condition</label>
+                <input 
+                  value={profile.condition}
+                  onChange={e => handleChange('condition', e.target.value)}
+                  className="w-full bg-black/40 border border-white/10 rounded-lg p-4 text-white placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all"
+                  placeholder="e.g. Type 2 Diabetes"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-mono font-bold text-gray-500 mb-2 uppercase tracking-wider">Medical History</label>
+                <textarea 
+                  value={profile.history}
+                  onChange={e => handleChange('history', e.target.value)}
+                  className="w-full bg-black/40 border border-white/10 rounded-lg p-4 text-white placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all h-32 resize-none"
+                  placeholder="Brief medical history..."
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-mono font-bold text-gray-500 mb-2 uppercase tracking-wider">Allergies & Sensitivities</label>
+                <textarea 
+                  value={profile.allergies}
+                  onChange={e => handleChange('allergies', e.target.value)}
+                  className="w-full bg-black/40 border border-white/10 rounded-lg p-4 text-white placeholder-gray-600 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50 outline-none transition-all h-32 resize-none"
+                  placeholder="e.g. Penicillin, Peanuts, Latex"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-8 flex justify-end pt-6 border-t border-white/5">
+            <button 
+              type="button"
+              onClick={handleManualSave}
+              className={`flex items-center gap-2 px-6 py-3 rounded-lg font-mono font-bold transition-all ${
+                isSaved 
+                  ? 'bg-green-500/20 text-green-400 border border-green-500/50' 
+                  : 'bg-neon-green text-black hover:bg-neon-green/90 shadow-[0_0_15px_rgba(0,255,128,0.3)]'
+              }`}
+            >
+              {isSaved ? <Check size={18} /> : <Save size={18} />}
+              {isSaved ? 'PROFILE SAVED' : 'SAVE CHANGES'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+       {/* FULL REPORT PREVIEW SECTION */}
+       <ReportView 
+        profile={profile}
+        vitals={vitals}
+        riskResult={riskResult}
+        chatHistory={chatHistory}
+        chatSummary={chatSummary}
+        medications={medications}
+      />
+    </div>
+  );
+};
+
+export default Profile;

components/ReportView.tsx

@@ -0,0 +1,157 @@
+
+import React from 'react';
+import { PatientProfile, ClinicalVitals, RiskAnalysisResult, ChatMessage, Medication } from '../types';
+import { FileText, User, Activity, Pill, MessageSquare, ShieldCheck } from 'lucide-react';
+
+interface ReportViewProps {
+  profile: PatientProfile;
+  vitals: ClinicalVitals;
+  riskResult: RiskAnalysisResult | null;
+  chatHistory: ChatMessage[];
+  chatSummary: string;
+  medications: Medication[];
+}
+
+const ReportView: React.FC<ReportViewProps> = ({
+  profile,
+  vitals,
+  riskResult,
+  chatHistory,
+  chatSummary,
+  medications
+}) => {
+  return (
+    <div className="space-y-6 mt-12 pt-8 border-t border-white/10">
+        <h2 className="text-2xl font-bold text-white flex items-center gap-2">
+            <FileText className="text-neon-green" /> Full Clinical Report
+        </h2>
+
+        <div className="glass-panel p-6 rounded-2xl space-y-8">
+            {/* Demographics */}
+            <section>
+                <h3 className="text-sm font-mono font-bold text-gray-400 uppercase mb-4 border-b border-white/5 pb-2 flex items-center gap-2">
+                    <User size={16} /> Patient Demographics
+                </h3>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                    <div><span className="text-gray-500 block text-xs uppercase tracking-wide">Name</span><span className="text-white">{profile.name}</span></div>
+                    <div><span className="text-gray-500 block text-xs uppercase tracking-wide">Age</span><span className="text-white">{profile.age}</span></div>
+                    <div className="col-span-2"><span className="text-gray-500 block text-xs uppercase tracking-wide">Condition</span><span className="text-white">{profile.condition}</span></div>
+                    <div className="col-span-4"><span className="text-gray-500 block text-xs uppercase tracking-wide">Medical History</span><span className="text-white">{profile.history || 'N/A'}</span></div>
+                </div>
+            </section>
+
+            {/* Vitals & Risk */}
+            <section>
+                <h3 className="text-sm font-mono font-bold text-gray-400 uppercase mb-4 border-b border-white/5 pb-2 flex items-center gap-2">
+                    <Activity size={16} /> Clinical Analysis
+                </h3>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                     <div className="bg-white/5 p-3 rounded-lg text-center border border-white/5">
+                        <span className="text-gray-500 text-xs block">Systolic BP</span>
+                        <span className="font-mono font-bold text-neon-green text-lg">{vitals.systolicBp}</span>
+                     </div>
+                     <div className="bg-white/5 p-3 rounded-lg text-center border border-white/5">
+                        <span className="text-gray-500 text-xs block">Glucose</span>
+                        <span className="font-mono font-bold text-neon-yellow text-lg">{vitals.glucose}</span>
+                     </div>
+                     <div className="bg-white/5 p-3 rounded-lg text-center border border-white/5">
+                        <span className="text-gray-500 text-xs block">Risk Score</span>
+                        <span className="font-mono font-bold text-neon-red text-lg">{riskResult?.numericScore ?? 'N/A'}</span>
+                     </div>
+                </div>
+                {riskResult ? (
+                    <div className="space-y-4">
+                        <div className="text-sm text-gray-300 bg-black/20 p-4 rounded-lg border border-white/5">
+                            <p><strong className="text-neon-blue font-mono text-xs uppercase block mb-1">Summary</strong> {riskResult.summary}</p>
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
+                              <div>
+                                  <strong className="text-neon-green font-mono text-xs uppercase block mb-1">Recommended Actions</strong>
+                                  <ul className="list-disc list-inside text-gray-400">
+                                    {riskResult.actionItems.map((item, idx) => <li key={idx}>{item}</li>)}
+                                  </ul>
+                              </div>
+                            </div>
+                        </div>
+
+                        {/* Medical Coding Pipeline Table */}
+                        <div className="bg-black/20 rounded-lg border border-white/5 overflow-hidden">
+                           <div className="px-4 py-2 bg-purple-500/10 border-b border-white/5 flex items-center gap-2 text-purple-300 font-bold text-xs uppercase tracking-wide">
+                              <ShieldCheck size={14} /> Insurance & Coding Pipeline
+                           </div>
+                           <table className="w-full text-xs text-left">
+                              <thead className="text-gray-500 border-b border-white/5">
+                                 <tr>
+                                    <th className="px-4 py-2">Diagnosis Type</th>
+                                    <th className="px-4 py-2">ICD-10 Code</th>
+                                    <th className="px-4 py-2">Description</th>
+                                 </tr>
+                              </thead>
+                              <tbody className="divide-y divide-white/5 text-gray-300">
+                                 {riskResult.codingPipeline?.map((code, idx) => (
+                                    <tr key={idx} className="hover:bg-white/5">
+                                       <td className="px-4 py-2 text-gray-400">{code.type}</td>
+                                       <td className="px-4 py-2 font-mono text-purple-400 font-bold">{code.code}</td>
+                                       <td className="px-4 py-2">{code.description}</td>
+                                    </tr>
+                                 ))}
+                                 {(!riskResult.codingPipeline || riskResult.codingPipeline.length === 0) && (
+                                     <tr>
+                                        <td colSpan={3} className="px-4 py-2 italic text-gray-500">Pipeline empty. Run analysis to generate.</td>
+                                     </tr>
+                                 )}
+                              </tbody>
+                           </table>
+                           {riskResult.insuranceNote && (
+                              <div className="px-4 py-2 border-t border-white/5 bg-white/5">
+                                 <p className="text-[10px] text-gray-500 uppercase font-bold">Medical Necessity Note</p>
+                                 <p className="text-xs text-gray-300 italic">{riskResult.insuranceNote}</p>
+                              </div>
+                           )}
+                        </div>
+                    </div>
+                ) : (
+                    <p className="text-gray-500 text-sm italic">Analysis not yet performed.</p>
+                )}
+            </section>
+
+             {/* Meds */}
+            <section>
+                <h3 className="text-sm font-mono font-bold text-gray-400 uppercase mb-4 border-b border-white/5 pb-2 flex items-center gap-2">
+                    <Pill size={16} /> Medication Schedule
+                </h3>
+                <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                    {medications.length > 0 ? medications.map(med => (
+                        <li key={med.id} className="flex justify-between items-center text-sm bg-white/5 p-3 rounded-lg border border-white/5">
+                            <div>
+                               <span className="font-bold text-white block">{med.name}</span>
+                               <span className="text-xs text-gray-500">{med.dosage} • {med.time}</span>
+                            </div>
+                            <span className={`px-2 py-1 rounded text-xs font-bold ${med.taken ? "bg-green-500/20 text-green-400" : "bg-yellow-500/20 text-yellow-400"}`}>
+                               {med.taken ? 'Taken' : 'Pending'}
+                            </span>
+                        </li>
+                    )) : <li className="text-gray-500 text-sm italic">No medications recorded.</li>}
+                </ul>
+            </section>
+
+            {/* Chat Summary */}
+            <section>
+                <h3 className="text-sm font-mono font-bold text-gray-400 uppercase mb-4 border-b border-white/5 pb-2 flex items-center gap-2">
+                    <MessageSquare size={16} /> Consultation Brief
+                </h3>
+                {chatSummary ? (
+                   <div className="bg-black/20 p-4 rounded-lg border border-white/5">
+                      <p className="text-sm text-gray-300 whitespace-pre-wrap leading-relaxed">
+                          {chatSummary}
+                      </p>
+                   </div>
+                ) : (
+                   <p className="text-gray-500 text-sm italic">No consultation summary available.</p>
+                )}
+            </section>
+        </div>
+    </div>
+  );
+};
+
+export default ReportView;

components/Sidebar.tsx

@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { Activity, MessageSquare, User, Pill } from 'lucide-react';
+
+interface SidebarProps {
+  activeTab: 'dashboard' | 'chat' | 'profile' | 'medication';
+  setActiveTab: (tab: 'dashboard' | 'chat' | 'profile' | 'medication') => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
+  const navItems = [
+    { id: 'dashboard', label: 'Dashboard', icon: Activity },
+    { id: 'chat', label: 'AI Companion', icon: MessageSquare },
+    { id: 'medication', label: 'Meds & Rewards', icon: Pill },
+    { id: 'profile', label: 'Patient Profile', icon: User },
+  ] as const;
+
+  return (
+    <aside className="hidden md:flex flex-col w-64 h-screen fixed glass-panel border-r border-neon-border z-20 top-0 left-0">
+      <div className="p-8">
+        <h1 className="text-2xl font-mono font-bold text-white tracking-tighter flex items-center gap-3">
+          <div className="p-2 bg-neon-green/10 rounded-lg">
+            <Activity className="text-neon-green" size={24} /> 
+          </div>
+          SomAI
+        </h1>
+        <p className="text-xs text-gray-400 mt-3 font-medium tracking-wide">CLINICAL COMPANION v1.0</p>
+      </div>
+      
+      <nav className="flex-1 px-4 space-y-2 mt-4">
+        {navItems.map((item) => (
+          <button 
+            key={item.id}
+            onClick={() => setActiveTab(item.id)}
+            className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${
+              activeTab === item.id 
+                ? 'bg-white/10 text-white border border-white/10 shadow-lg shadow-black/20' 
+                : 'text-gray-400 hover:bg-white/5 hover:text-white'
+            }`}
+          >
+            <item.icon 
+              size={20} 
+              className={`transition-colors ${activeTab === item.id ? 'text-neon-green' : 'text-gray-500 group-hover:text-gray-300'}`} 
+            /> 
+            <span className="font-medium text-sm">{item.label}</span>
+          </button>
+        ))}
+      </nav>
+
+      <div className="p-6 border-t border-white/5">
+        <div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
+          <div className="w-2 h-2 rounded-full bg-neon-green animate-pulse-slow"></div>
+          SYSTEM ONLINE
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;