Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement dark mode styling across UI components and update README with roadmap and system requirements.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-03-02 11:29:55 -03:00
parent 8c6cba6d2e
commit 81e1830563
15 changed files with 555 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/app/admin/page.tsx
+32 -32
View File
@@ -49,7 +49,7 @@ export default function AdminDashboard() {
label: "Organizations",
value: stats.orgs,
icon: Building2,
color: "text-blue-400",
color: "text-blue-600 dark:text-blue-400",
bg: "bg-blue-500/10",
desc: "Active institutional tenants"
},
@@ -57,7 +57,7 @@ export default function AdminDashboard() {
label: "Total Users",
value: stats.users,
icon: Users,
color: "text-purple-400",
color: "text-purple-600 dark:text-purple-400",
bg: "bg-purple-500/10",
desc: "Registered globally"
},
@@ -65,7 +65,7 @@ export default function AdminDashboard() {
label: "Global Courses",
value: stats.courses,
icon: BookOpen,
color: "text-green-400",
color: "text-green-600 dark:text-green-400",
bg: "bg-green-500/10",
desc: "Managed across all orgs"
},
@@ -74,21 +74,21 @@ export default function AdminDashboard() {
return (
<div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
<div>
<h1 className="text-4xl font-black tracking-tight mb-2">System Overview</h1>
<p className="text-gray-400">Holistic view of the OpenCCB ecosystem.</p>
<h1 className="text-4xl font-black tracking-tight mb-2 text-slate-900 dark:text-white">System Overview</h1>
<p className="text-slate-500 dark:text-gray-400">Holistic view of the OpenCCB ecosystem.</p>
</div>
{/* Stat Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{cards.map((card) => (
<div key={card.label} className="p-8 rounded-3xl glass-card border-white/5 bg-white/[0.02] flex flex-col gap-4">
<div key={card.label} className="p-8 rounded-3xl bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/5 flex flex-col gap-4 shadow-sm dark:shadow-none">
<div className={`w-12 h-12 rounded-xl ${card.bg} flex items-center justify-center ${card.color}`}>
<card.icon size={24} />
</div>
<div>
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500 mb-1">{card.label}</div>
<div className="text-4xl font-black">{loading ? "..." : card.value}</div>
<p className="text-xs text-gray-500 mt-2">{card.desc}</p>
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 mb-1">{card.label}</div>
<div className="text-4xl font-black text-slate-900 dark:text-white">{loading ? "..." : card.value}</div>
<p className="text-xs text-slate-500 dark:text-gray-500 mt-2">{card.desc}</p>
</div>
</div>
))}
@@ -97,56 +97,56 @@ export default function AdminDashboard() {
{/* System Health */}
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-sm font-black uppercase tracking-widest text-gray-500">Service Status</h2>
<div className="flex items-center gap-2 text-green-400 text-xs font-bold">
<div className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
<h2 className="text-sm font-black uppercase tracking-widest text-slate-400 dark:text-gray-500">Service Status</h2>
<div className="flex items-center gap-2 text-green-600 dark:text-green-400 text-xs font-bold">
<div className="w-2 h-2 rounded-full bg-green-500 dark:bg-green-400 animate-pulse" />
All systems operational
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
<div className="p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.01] flex items-center justify-between shadow-sm dark:shadow-none">
<div className="flex items-center gap-4">
<Server className="text-blue-400" size={20} />
<Server className="text-blue-600 dark:text-blue-400" size={20} />
<div>
<div className="text-sm font-bold">API Services (CMS/LMS)</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Rust Axum Cluster</div>
<div className="text-sm font-bold text-slate-900 dark:text-white">API Services (CMS/LMS)</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest">Rust Axum Cluster</div>
</div>
</div>
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
<span className="text-[10px] bg-green-500/10 text-green-600 dark:text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
</div>
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
<div className="p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.01] flex items-center justify-between shadow-sm dark:shadow-none">
<div className="flex items-center gap-4">
<Zap className="text-amber-400" size={20} />
<Zap className="text-amber-600 dark:text-amber-400" size={20} />
<div>
<div className="text-sm font-bold">Local AI Services</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Whisper + Ollama</div>
<div className="text-sm font-bold text-slate-900 dark:text-white">Local AI Services</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest">Whisper + Ollama</div>
</div>
</div>
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
<span className="text-[10px] bg-green-500/10 text-green-600 dark:text-green-400 px-2 py-1 rounded-full font-black uppercase">Online</span>
</div>
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
<div className="p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.01] flex items-center justify-between shadow-sm dark:shadow-none">
<div className="flex items-center gap-4">
<Clock className="text-indigo-400" size={20} />
<Clock className="text-indigo-600 dark:text-indigo-400" size={20} />
<div>
<div className="text-sm font-bold">Background Workers</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">Notification Scheduler</div>
<div className="text-sm font-bold text-slate-900 dark:text-white">Background Workers</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest">Notification Scheduler</div>
</div>
</div>
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Running</span>
<span className="text-[10px] bg-green-500/10 text-green-600 dark:text-green-400 px-2 py-1 rounded-full font-black uppercase">Running</span>
</div>
<div className="p-6 rounded-2xl border border-white/5 bg-white/[0.01] flex items-center justify-between">
<div className="p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-white/[0.01] flex items-center justify-between shadow-sm dark:shadow-none">
<div className="flex items-center gap-4">
<ShieldAlert className="text-red-400" size={20} />
<ShieldAlert className="text-red-600 dark:text-red-400" size={20} />
<div>
<div className="text-sm font-bold">Security Engine</div>
<div className="text-[10px] text-gray-500 font-bold uppercase tracking-widest">JWT & RBAC Middleware</div>
<div className="text-sm font-bold text-slate-900 dark:text-white">Security Engine</div>
<div className="text-[10px] text-slate-400 dark:text-gray-500 font-bold uppercase tracking-widest">JWT & RBAC Middleware</div>
</div>
</div>
<span className="text-[10px] bg-green-500/10 text-green-400 px-2 py-1 rounded-full font-black uppercase">Active</span>
<span className="text-[10px] bg-green-500/10 text-green-600 dark:text-green-400 px-2 py-1 rounded-full font-black uppercase">Active</span>
</div>
</div>
</div>