Skip to content

Commit 11337da

Browse files
GeneAIclaude
andcommitted
feat: Add Medical and Software Development dashboard pages
Created two comprehensive dashboard pages showcasing Empathy Framework wizards: Medical Workflows Dashboard (/dashboard): - 14+ Clinical monitoring capabilities - Patient trajectory analysis - Protocol compliance monitoring - Vital signs tracking with predictive alerts - Medication safety and risk assessment - Lab results analysis with trend detection Software Development Dashboard (/dev-dashboard): - 16+ Software development wizards - Advanced debugging with bug prediction - Security analysis (OWASP Top 10, vulnerability scanning) - Performance profiling and bottleneck detection - AI documentation and collaboration - Agent orchestration and multi-model workflows - RAG patterns and prompt engineering Both dashboards feature: - Level 4 Anticipatory Intelligence examples - Built with Claude Code + VS Code + MemDocs + Empathy stack - Real-world impact metrics - Interactive feature showcases - Clear "How It Works" explanations Fixes 404 errors on landing page example project links. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 90bf4e7 commit 11337da

File tree

2 files changed

+798
-0
lines changed

2 files changed

+798
-0
lines changed

website/app/dashboard/page.tsx

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
import Link from 'next/link';
2+
3+
export default function MedicalDashboard() {
4+
return (
5+
<div className="min-h-screen bg-[var(--background)]">
6+
{/* Header */}
7+
<nav className="border-b border-[var(--border)] py-4 bg-[var(--background)]">
8+
<div className="container flex justify-between items-center">
9+
<Link href="/" className="text-xl font-bold text-gradient">
10+
Smart AI Memory
11+
</Link>
12+
<div className="flex gap-6 items-center">
13+
<Link href="/" className="text-sm hover:text-[var(--primary)]">Home</Link>
14+
<Link href="/framework" className="text-sm hover:text-[var(--primary)]">Framework</Link>
15+
<Link href="/dev-dashboard" className="text-sm hover:text-[var(--primary)]">Dev Dashboard</Link>
16+
</div>
17+
</div>
18+
</nav>
19+
20+
{/* Hero */}
21+
<section className="py-12 bg-gradient-to-b from-[var(--border)] to-transparent">
22+
<div className="container">
23+
<div className="max-w-4xl mx-auto text-center">
24+
<div className="text-6xl mb-6">🏥</div>
25+
<h1 className="text-4xl font-bold mb-4">
26+
Medical Workflows <span className="text-gradient">Dashboard</span>
27+
</h1>
28+
<p className="text-xl text-[var(--text-secondary)] mb-6">
29+
Level 4 Anticipatory Intelligence for Clinical Workflows
30+
</p>
31+
<div className="flex flex-wrap gap-2 justify-center">
32+
<span className="px-3 py-1 bg-[var(--primary)] bg-opacity-10 text-[var(--primary)] rounded-full text-sm font-semibold">
33+
Claude Code
34+
</span>
35+
<span className="px-3 py-1 bg-[var(--accent)] bg-opacity-10 text-[var(--accent)] rounded-full text-sm font-semibold">
36+
Empathy Framework
37+
</span>
38+
<span className="px-3 py-1 bg-[var(--secondary)] bg-opacity-10 text-[var(--secondary)] rounded-full text-sm font-semibold">
39+
MemDocs
40+
</span>
41+
<span className="px-3 py-1 bg-[var(--border)] text-[var(--muted)] rounded-full text-sm">
42+
VS Code
43+
</span>
44+
</div>
45+
</div>
46+
</div>
47+
</section>
48+
49+
{/* Stats Overview */}
50+
<section className="py-12">
51+
<div className="container">
52+
<div className="grid md:grid-cols-4 gap-6 max-w-5xl mx-auto">
53+
<div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center">
54+
<div className="text-3xl font-bold text-[var(--primary)] mb-2">14+</div>
55+
<div className="text-sm text-[var(--text-secondary)]">Clinical Monitors</div>
56+
</div>
57+
<div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center">
58+
<div className="text-3xl font-bold text-[var(--success)] mb-2">Level 4</div>
59+
<div className="text-sm text-[var(--text-secondary)]">Anticipatory AI</div>
60+
</div>
61+
<div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center">
62+
<div className="text-3xl font-bold text-[var(--accent)] mb-2">Real-time</div>
63+
<div className="text-sm text-[var(--text-secondary)]">Patient Monitoring</div>
64+
</div>
65+
<div className="bg-[var(--background)] border-2 border-[var(--border)] p-6 rounded-lg text-center">
66+
<div className="text-3xl font-bold text-[var(--secondary)] mb-2">Predictive</div>
67+
<div className="text-sm text-[var(--text-secondary)]">Risk Assessment</div>
68+
</div>
69+
</div>
70+
</div>
71+
</section>
72+
73+
{/* Clinical Monitoring Features */}
74+
<section className="py-12 bg-[var(--border)] bg-opacity-20">
75+
<div className="container">
76+
<h2 className="text-3xl font-bold text-center mb-12">Clinical Monitoring Capabilities</h2>
77+
78+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
79+
{/* Patient Trajectory Analysis */}
80+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
81+
<div className="flex items-center gap-3 mb-4">
82+
<div className="text-3xl">📊</div>
83+
<h3 className="text-lg font-bold">Patient Trajectory Analysis</h3>
84+
</div>
85+
<p className="text-sm text-[var(--text-secondary)] mb-4">
86+
Predicts patient trajectory based on vital signs, lab results, and historical patterns.
87+
</p>
88+
<div className="space-y-2">
89+
<div className="flex items-center gap-2 text-xs">
90+
<span className="text-[var(--success)]"></span>
91+
<span>Multi-parameter trend analysis</span>
92+
</div>
93+
<div className="flex items-center gap-2 text-xs">
94+
<span className="text-[var(--success)]"></span>
95+
<span>Early deterioration warnings</span>
96+
</div>
97+
<div className="flex items-center gap-2 text-xs">
98+
<span className="text-[var(--success)]"></span>
99+
<span>Automated risk scoring</span>
100+
</div>
101+
</div>
102+
</div>
103+
104+
{/* Protocol Compliance Monitor */}
105+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
106+
<div className="flex items-center gap-3 mb-4">
107+
<div className="text-3xl">📋</div>
108+
<h3 className="text-lg font-bold">Protocol Compliance Monitor</h3>
109+
</div>
110+
<p className="text-sm text-[var(--text-secondary)] mb-4">
111+
Ensures adherence to clinical protocols and best practices in real-time.
112+
</p>
113+
<div className="space-y-2">
114+
<div className="flex items-center gap-2 text-xs">
115+
<span className="text-[var(--success)]"></span>
116+
<span>Real-time protocol checking</span>
117+
</div>
118+
<div className="flex items-center gap-2 text-xs">
119+
<span className="text-[var(--success)]"></span>
120+
<span>Deviation alerts</span>
121+
</div>
122+
<div className="flex items-center gap-2 text-xs">
123+
<span className="text-[var(--success)]"></span>
124+
<span>Best practice recommendations</span>
125+
</div>
126+
</div>
127+
</div>
128+
129+
{/* Vital Signs Monitoring */}
130+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
131+
<div className="flex items-center gap-3 mb-4">
132+
<div className="text-3xl">💓</div>
133+
<h3 className="text-lg font-bold">Vital Signs Monitoring</h3>
134+
</div>
135+
<p className="text-sm text-[var(--text-secondary)] mb-4">
136+
Continuous monitoring with predictive alerts before critical events occur.
137+
</p>
138+
<div className="space-y-2">
139+
<div className="flex items-center gap-2 text-xs">
140+
<span className="text-[var(--success)]"></span>
141+
<span>Pattern recognition</span>
142+
</div>
143+
<div className="flex items-center gap-2 text-xs">
144+
<span className="text-[var(--success)]"></span>
145+
<span>Predictive alerting</span>
146+
</div>
147+
<div className="flex items-center gap-2 text-xs">
148+
<span className="text-[var(--success)]"></span>
149+
<span>Multi-parameter correlation</span>
150+
</div>
151+
</div>
152+
</div>
153+
154+
{/* Medication Safety */}
155+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
156+
<div className="flex items-center gap-3 mb-4">
157+
<div className="text-3xl">💊</div>
158+
<h3 className="text-lg font-bold">Medication Safety</h3>
159+
</div>
160+
<p className="text-sm text-[var(--text-secondary)] mb-4">
161+
Identifies potential drug interactions and contraindications before administration.
162+
</p>
163+
<div className="space-y-2">
164+
<div className="flex items-center gap-2 text-xs">
165+
<span className="text-[var(--success)]"></span>
166+
<span>Drug interaction checking</span>
167+
</div>
168+
<div className="flex items-center gap-2 text-xs">
169+
<span className="text-[var(--success)]"></span>
170+
<span>Allergy alerts</span>
171+
</div>
172+
<div className="flex items-center gap-2 text-xs">
173+
<span className="text-[var(--success)]"></span>
174+
<span>Dosage recommendations</span>
175+
</div>
176+
</div>
177+
</div>
178+
179+
{/* Risk Assessment */}
180+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
181+
<div className="flex items-center gap-3 mb-4">
182+
<div className="text-3xl">⚠️</div>
183+
<h3 className="text-lg font-bold">Risk Assessment</h3>
184+
</div>
185+
<p className="text-sm text-[var(--text-secondary)] mb-4">
186+
Predictive risk scoring for complications, readmissions, and adverse events.
187+
</p>
188+
<div className="space-y-2">
189+
<div className="flex items-center gap-2 text-xs">
190+
<span className="text-[var(--success)]"></span>
191+
<span>Multi-factor risk modeling</span>
192+
</div>
193+
<div className="flex items-center gap-2 text-xs">
194+
<span className="text-[var(--success)]"></span>
195+
<span>Readmission prediction</span>
196+
</div>
197+
<div className="flex items-center gap-2 text-xs">
198+
<span className="text-[var(--success)]"></span>
199+
<span>Complication forecasting</span>
200+
</div>
201+
</div>
202+
</div>
203+
204+
{/* Lab Results Analyzer */}
205+
<div className="bg-[var(--background)] p-6 rounded-lg border-2 border-[var(--border)] hover:border-[var(--primary)] transition-all">
206+
<div className="flex items-center gap-3 mb-4">
207+
<div className="text-3xl">🔬</div>
208+
<h3 className="text-lg font-bold">Lab Results Analyzer</h3>
209+
</div>
210+
<p className="text-sm text-[var(--text-secondary)] mb-4">
211+
Automated interpretation of lab results with trend analysis and clinical insights.
212+
</p>
213+
<div className="space-y-2">
214+
<div className="flex items-center gap-2 text-xs">
215+
<span className="text-[var(--success)]"></span>
216+
<span>Automated interpretation</span>
217+
</div>
218+
<div className="flex items-center gap-2 text-xs">
219+
<span className="text-[var(--success)]"></span>
220+
<span>Historical trend analysis</span>
221+
</div>
222+
<div className="flex items-center gap-2 text-xs">
223+
<span className="text-[var(--success)]"></span>
224+
<span>Critical value alerting</span>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
</div>
230+
</section>
231+
232+
{/* How It Works */}
233+
<section className="py-12">
234+
<div className="container">
235+
<h2 className="text-3xl font-bold text-center mb-12">How Level 4 Anticipatory Intelligence Works</h2>
236+
237+
<div className="max-w-4xl mx-auto space-y-6">
238+
<div className="flex gap-6 items-start">
239+
<div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl">
240+
1
241+
</div>
242+
<div>
243+
<h3 className="text-xl font-bold mb-2">Continuous Monitoring</h3>
244+
<p className="text-[var(--text-secondary)]">
245+
Empathy Framework monitors patient data streams in real-time, tracking vital signs,
246+
lab results, medications, and clinical notes continuously.
247+
</p>
248+
</div>
249+
</div>
250+
251+
<div className="flex gap-6 items-start">
252+
<div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl">
253+
2
254+
</div>
255+
<div>
256+
<h3 className="text-xl font-bold mb-2">Pattern Recognition</h3>
257+
<p className="text-[var(--text-secondary)]">
258+
AI wizards identify patterns and trajectories that indicate potential issues before
259+
they become critical, using historical data and clinical protocols.
260+
</p>
261+
</div>
262+
</div>
263+
264+
<div className="flex gap-6 items-start">
265+
<div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl">
266+
3
267+
</div>
268+
<div>
269+
<h3 className="text-xl font-bold mb-2">Predictive Alerts</h3>
270+
<p className="text-[var(--text-secondary)]">
271+
The system generates anticipatory alerts with actionable recommendations,
272+
enabling clinical teams to intervene before problems escalate.
273+
</p>
274+
</div>
275+
</div>
276+
277+
<div className="flex gap-6 items-start">
278+
<div className="flex-shrink-0 w-12 h-12 bg-[var(--primary)] bg-opacity-10 rounded-full flex items-center justify-center text-[var(--primary)] font-bold text-xl">
279+
4
280+
</div>
281+
<div>
282+
<h3 className="text-xl font-bold mb-2">Continuous Learning</h3>
283+
<p className="text-[var(--text-secondary)]">
284+
MemDocs integration ensures the system learns from each case, improving predictions
285+
and recommendations over time with project-specific memory.
286+
</p>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
291+
</section>
292+
293+
{/* CTA */}
294+
<section className="py-20 bg-gradient-to-b from-transparent to-[var(--border)] bg-opacity-30">
295+
<div className="container">
296+
<div className="max-w-3xl mx-auto text-center">
297+
<h2 className="text-3xl font-bold mb-6">
298+
Build Your Own Medical Workflows
299+
</h2>
300+
<p className="text-xl text-[var(--text-secondary)] mb-8">
301+
The Empathy Framework is open source and production-ready.
302+
Start building anticipatory AI for healthcare today.
303+
</p>
304+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
305+
<Link href="/framework" className="btn btn-primary">
306+
View Framework
307+
</Link>
308+
<a
309+
href="https://github.com/Smart-AI-Memory/empathy"
310+
className="btn btn-outline"
311+
target="_blank"
312+
rel="noopener noreferrer"
313+
>
314+
View on GitHub
315+
</a>
316+
</div>
317+
</div>
318+
</div>
319+
</section>
320+
321+
{/* Footer */}
322+
<footer className="py-12 border-t border-[var(--border)]">
323+
<div className="container">
324+
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
325+
<div className="text-sm text-[var(--muted)]">
326+
© 2025 Deep Study AI, LLC. All rights reserved.
327+
</div>
328+
<div className="flex gap-6">
329+
<Link href="/" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]">
330+
Home
331+
</Link>
332+
<Link href="/framework" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]">
333+
Framework
334+
</Link>
335+
<Link href="/dev-dashboard" className="text-sm text-[var(--muted)] hover:text-[var(--primary)]">
336+
Dev Dashboard
337+
</Link>
338+
</div>
339+
</div>
340+
</div>
341+
</footer>
342+
</div>
343+
);
344+
}

0 commit comments

Comments
 (0)