Create src/components/SystemSettings.tsx

src/components/SystemSettings.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { useOncologyStore } from '../store/useOncologyStore';
+import { 
+  Settings, 
+  Trash2, 
+  Download, 
+  Moon, 
+  Sun, 
+  Monitor, 
+  Database, 
+  AlertTriangle,
+  Activity
+} from 'lucide-react';
+
+const SystemSettings: React.FC = () => {
+  const { 
+    theme, 
+    setTheme, 
+    isToxicityModelEnabled, 
+    toggleToxicityModel, 
+    sessions,
+    setView
+  } = useOncologyStore();
+
+  const exportVault = () => {
+    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(sessions));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute("href", dataStr);
+    downloadAnchorNode.setAttribute("download", `abyssinia_vault_${Date.now()}.json`);
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+  };
+
+  const clearVault = () => {
+    if (window.confirm("CRITICAL: THIS WILL PERMANENTLY ERASE ALL CLINICAL SESSIONS. PROCEED?")) {
+      localStorage.removeItem('abyssinia-v15-vault');
+      window.location.reload();
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <header className="pb-6 border-b border-slate-800">
+        <div className="flex items-center gap-3">
+          <Settings className="w-6 h-6 text-gemini-500" />
+          <h2 className="text-2xl font-black italic uppercase tracking-tighter text-slate-100">
+            System Configuration
+          </h2>
+        </div>
+        <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-2">
+          V15.0.0-STABLE / KERNEL: PRODUCTION / ARCH: x64
+        </p>
+      </header>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Appearance Section */}
+        <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
+          <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
+            <Monitor className="w-4 h-4" /> Visual Engine
+          </h3>
+          
+          <div className="grid grid-cols-3 gap-2">
+            {[
+              { id: 'light', icon: Sun, label: 'Light' },
+              { id: 'dark', icon: Moon, label: 'Dark' },
+              { id: 'system', icon: Monitor, label: 'Auto' }
+            ].map((t) => (
+              <button
+                key={t.id}
+                onClick={() => setTheme(t.id as any)}
+                className={`flex flex-col items-center gap-2 p-3 rounded-xl border transition-all ${
+                  theme === t.id 
+                    ? 'bg-gemini-500/10 border-gemini-500 text-gemini-500' 
+                    : 'bg-slate-950/50 border-slate-800 text-slate-500 hover:border-slate-700'
+                }`}
+              >
+                <t.icon className="w-5 h-5" />
+                <span className="text-[10px] font-bold uppercase">{t.label}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+
+        {/* Model Configuration */}
+        <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
+          <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
+            <Activity className="w-4 h-4" /> Predictive Analytics
+          </h3>
+          
+          <div className="flex items-center justify-between p-4 bg-slate-950/50 border border-slate-800 rounded-xl">
+            <div>
+              <p className="text-xs font-bold text-slate-200 uppercase">Toxicity Forecasting</p>
+              <p className="text-[10px] text-slate-500 mt-1">Pharmacological AE mapping engine</p>
+            </div>
+            <button 
+              onClick={toggleToxicityModel}
+              className={`w-12 h-6 rounded-full transition-colors relative ${
+                isToxicityModelEnabled ? 'bg-gemini-500' : 'bg-slate-800'
+              }`}
+            >
+              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${
+                isToxicityModelEnabled ? 'left-7' : 'left-1'
+              }`} />
+            </button>
+          </div>
+        </section>
+      </div>
+
+      {/* Data Management Section */}
+      <section className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 space-y-6">
+        <h3 className="text-[11px] font-black uppercase text-slate-400 tracking-[0.2em] flex items-center gap-2">
+          <Database className="w-4 h-4" /> Clinical Vault Management
+        </h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <button 
+            onClick={exportVault}
+            className="flex items-center justify-between p-4 bg-slate-950/50 border border-slate-800 hover:border-gemini-500/50 rounded-xl transition-all group"
+          >
+            <div className="text-left">
+              <p className="text-xs font-bold text-slate-200 uppercase">Export Case History</p>
+              <p className="text-[10px] text-slate-500 mt-1">Download encrypted JSON archive</p>
+            </div>
+            <Download className="w-5 h-5 text-slate-600 group-hover:text-gemini-500 transition-colors" />
+          </button>
+
+          <button 
+            onClick={clearVault}
+            className="flex items-center justify-between p-4 bg-red-500/5 border border-red-500/20 hover:bg-red-500/10 hover:border-red-500/50 rounded-xl transition-all group"
+          >
+            <div className="text-left">
+              <p className="text-xs font-bold text-red-400 uppercase">Purge Local Vault</p>
+              <p className="text-[10px] text-red-500/60 mt-1">Erase all records and signatures</p>
+            </div>
+            <Trash2 className="w-5 h-5 text-red-900 group-hover:text-red-500 transition-colors" />
+          </button>
+        </div>
+
+        <div className="p-4 bg-amber-500/5 border border-amber-500/20 rounded-xl flex gap-4 items-start">
+          <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+          <p className="text-[10px] text-amber-500/80 leading-relaxed uppercase font-medium">
+            Note: All data is stored locally in this browser. Clearing the cache or using a 
+            different workstation will result in the loss of case history unless a JSON 
+            export is performed beforehand.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default SystemSettings;