feat: Implement dark mode styling across UI components and update README with roadmap and system requirements.
This commit is contained in:
@@ -25,16 +25,16 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-transparent text-gray-900 dark:text-white transition-colors duration-300">
|
||||
<div className="flex min-h-screen bg-slate-50 dark:bg-transparent text-slate-900 dark:text-white transition-colors duration-300">
|
||||
{/* Sidebar */}
|
||||
<aside className="w-64 border-r border-black/5 dark:border-white/5 bg-gray-50/50 dark:bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8">
|
||||
<aside className="w-64 border-r border-slate-200 dark:border-white/5 bg-white dark:bg-black/20 backdrop-blur-xl p-6 flex flex-col gap-8 shadow-sm dark:shadow-none">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
|
||||
<ShieldCheck className="text-white" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-black text-xs uppercase tracking-widest text-gray-500 leading-tight">Control Panel</h2>
|
||||
<h1 className="font-black text-lg tracking-tighter">SUPER ADMIN</h1>
|
||||
<h2 className="font-black text-[10px] uppercase tracking-widest text-slate-400 dark:text-gray-500 leading-tight">Control Panel</h2>
|
||||
<h1 className="font-black text-lg tracking-tighter text-slate-900 dark:text-white">SUPER ADMIN</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -44,8 +44,8 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-bold text-sm transition-all ${pathname === item.href
|
||||
? "bg-indigo-600/10 text-indigo-400 border border-indigo-500/20 shadow-glow-sm"
|
||||
: "text-gray-500 hover:text-white hover:bg-white/5 border border-transparent"
|
||||
? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/30"
|
||||
: "text-slate-500 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-white/5 border border-transparent"
|
||||
}`}
|
||||
>
|
||||
<item.icon size={18} />
|
||||
@@ -54,10 +54,10 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="pt-6 border-t border-white/5">
|
||||
<div className="pt-6 border-t border-slate-200 dark:border-white/5">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-gray-600 hover:text-white transition-colors"
|
||||
className="flex items-center gap-2 text-xs font-black uppercase tracking-widest text-slate-400 dark:text-gray-600 hover:text-slate-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft size={14} />
|
||||
Back to Studio
|
||||
@@ -66,7 +66,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
|
||||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 p-12 overflow-y-auto">
|
||||
<main className="flex-1 p-8 md:p-12 overflow-y-auto">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -4,16 +4,20 @@ import { useState, useEffect } from 'react';
|
||||
import { cmsApi, Organization, getImageUrl, API_BASE_URL } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import Image from 'next/image';
|
||||
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X, Fingerprint, Key, Settings2 } from 'lucide-react';
|
||||
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X, Fingerprint, Key, Settings2, Edit2 } from 'lucide-react';
|
||||
|
||||
export default function OrganizationsPage() {
|
||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// Create/Edit States
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editingOrgId, setEditingOrgId] = useState<string | null>(null);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newDomain, setNewDomain] = useState('');
|
||||
|
||||
// Admin User States
|
||||
// Admin User States (Only for creation)
|
||||
const [adminFullName, setAdminFullName] = useState('');
|
||||
const [adminEmail, setAdminEmail] = useState('');
|
||||
const [adminPassword, setAdminPassword] = useState('');
|
||||
@@ -54,26 +58,47 @@ export default function OrganizationsPage() {
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await cmsApi.provisionOrganization({
|
||||
org_name: newName,
|
||||
org_domain: newDomain || undefined,
|
||||
admin_full_name: adminFullName,
|
||||
admin_email: adminEmail,
|
||||
admin_password: adminPassword
|
||||
});
|
||||
setNewName('');
|
||||
setNewDomain('');
|
||||
setAdminFullName('');
|
||||
setAdminEmail('');
|
||||
setAdminPassword('');
|
||||
setIsModalOpen(false);
|
||||
if (isEditing && editingOrgId) {
|
||||
await cmsApi.updateOrganization(editingOrgId, {
|
||||
name: newName,
|
||||
domain: newDomain || undefined
|
||||
});
|
||||
} else {
|
||||
await cmsApi.provisionOrganization({
|
||||
org_name: newName,
|
||||
org_domain: newDomain || undefined,
|
||||
admin_full_name: adminFullName,
|
||||
admin_email: adminEmail,
|
||||
admin_password: adminPassword
|
||||
});
|
||||
}
|
||||
resetForm();
|
||||
loadOrganizations();
|
||||
} catch (error) {
|
||||
console.error('Failed to create organization', error);
|
||||
alert('Failed to provision organization. Please ensure the email is unique.');
|
||||
console.error('Failed to save organization', error);
|
||||
alert('Failed to save organization. Please check the details.');
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setNewName('');
|
||||
setNewDomain('');
|
||||
setAdminFullName('');
|
||||
setAdminEmail('');
|
||||
setAdminPassword('');
|
||||
setIsEditing(false);
|
||||
setEditingOrgId(null);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
const openEdit = (org: Organization) => {
|
||||
setNewName(org.name);
|
||||
setNewDomain(org.domain || '');
|
||||
setEditingOrgId(org.id);
|
||||
setIsEditing(true);
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const openBranding = (org: Organization) => {
|
||||
setSelectedOrg(org);
|
||||
setPrimaryColor(org.primary_color || '#3B82F6');
|
||||
@@ -170,7 +195,7 @@ export default function OrganizationsPage() {
|
||||
<ShieldCheck className="w-12 h-12 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
||||
<p className="text-gray-400">Only system administrators can access this page.</p>
|
||||
<p className="text-gray-600 dark:text-gray-400">Only system administrators can access this page.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -179,11 +204,11 @@ export default function OrganizationsPage() {
|
||||
<div className="space-y-6 md:space-y-8 animate-in fade-in duration-500 p-4 md:p-0">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Organizations</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
|
||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Organizations</h1>
|
||||
<p className="text-slate-600 dark:text-gray-400 mt-1 text-sm">Manage tenants and isolated environments.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
onClick={() => { resetForm(); setIsModalOpen(true); }}
|
||||
className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 shadow-glow"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
@@ -194,7 +219,7 @@ export default function OrganizationsPage() {
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-48 rounded-xl glass animate-pulse" />
|
||||
<div key={i} className="h-48 rounded-xl bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
@@ -202,59 +227,68 @@ export default function OrganizationsPage() {
|
||||
{organizations.map((org) => (
|
||||
<div
|
||||
key={org.id}
|
||||
className="group relative p-6 rounded-xl bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
|
||||
className="group relative p-6 rounded-xl bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden shadow-sm dark:shadow-none"
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity text-slate-400 dark:text-white">
|
||||
<Building2 className="w-16 h-16" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative">
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative border border-blue-500/20">
|
||||
{org.logo_url ? (
|
||||
<Image src={getImageUrl(org.logo_url)} alt={org.name} fill className="object-contain" unoptimized />
|
||||
) : (
|
||||
<Building2 className="w-6 h-6" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg text-gray-900 dark:text-white">{org.name}</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-gray-400">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<h3 className="font-semibold text-lg text-slate-900 dark:text-white truncate">{org.name}</h3>
|
||||
<button
|
||||
onClick={() => openEdit(org)}
|
||||
className="p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-white/10 text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors"
|
||||
title="Edit Organization"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-gray-400">
|
||||
<Globe className="w-3 h-3" />
|
||||
{org.domain || 'No custom domain'}
|
||||
<span className="truncate">{org.domain || 'No custom domain'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mt-4 mb-2">
|
||||
<div className="flex-1 h-1 rounded-full" style={{ backgroundColor: org.primary_color || '#3B82F6' }} title="Primary Color" />
|
||||
<div className="flex-1 h-1 rounded-full" style={{ backgroundColor: org.secondary_color || '#8B5CF6' }} title="Secondary Color" />
|
||||
<div className="flex-1 h-1 rounded-full opacity-60" style={{ backgroundColor: org.primary_color || '#3B82F6' }} title="Primary Color" />
|
||||
<div className="flex-1 h-1 rounded-full opacity-60" style={{ backgroundColor: org.secondary_color || '#8B5CF6' }} title="Secondary Color" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mt-4">
|
||||
<div className="flex items-center justify-between text-xs text-gray-600 dark:text-gray-500 bg-black/5 dark:bg-black/20 p-2 rounded-lg">
|
||||
<div className="flex items-center justify-between text-xs text-slate-500 dark:text-gray-500 bg-slate-50 dark:bg-black/20 p-2 rounded-lg border border-slate-100 dark:border-white/5">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
Created: {new Date(org.created_at).toLocaleDateString()}
|
||||
{new Date(org.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-blue-500 font-mono">
|
||||
<div className="text-blue-600 dark:text-blue-500 font-mono">
|
||||
{org.id.split('-')[0]}...
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<button
|
||||
onClick={() => openBranding(org)}
|
||||
className="py-2 px-2 text-[10px] font-medium border border-blue-500/20 bg-blue-500/5 hover:bg-blue-500/10 text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
||||
className="py-2 px-2 text-[10px] font-bold border border-blue-500/20 bg-blue-50 dark:bg-blue-500/5 hover:bg-blue-100 dark:hover:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
<Palette className="w-3 h-3" /> Brand
|
||||
<Palette className="w-3 h-3" /> BRAND
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openSSOConfig(org)}
|
||||
className="py-2 px-2 text-[10px] font-medium border border-blue-500/20 bg-blue-500/5 hover:bg-blue-500/10 text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
||||
className="py-2 px-2 text-[10px] font-bold border border-indigo-500/20 bg-indigo-50 dark:bg-indigo-500/5 hover:bg-indigo-100 dark:hover:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
<Fingerprint className="w-3 h-3" /> SSO
|
||||
</button>
|
||||
<button className="py-2 px-2 text-[10px] font-medium border border-black/10 dark:border-white/5 bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-600 dark:text-gray-400">
|
||||
Docs <ExternalLink className="w-3 h-3" />
|
||||
<button className="py-2 px-2 text-[10px] font-bold border border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-slate-600 dark:text-gray-400">
|
||||
DOCS <ExternalLink className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,85 +297,99 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Organization Modal */}
|
||||
{/* Create/Edit Organization Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-md bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-6">Create New Organization</h2>
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl overflow-y-auto max-h-[90vh]">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
{isEditing ? 'Edit Organization' : 'Create New Organization'}
|
||||
</h2>
|
||||
<button onClick={resetForm} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Organization Name</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Organization Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={newName}
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="e.g. Acme Corp"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Domain (Optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newDomain}
|
||||
onChange={(e) => setNewDomain(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
||||
placeholder="e.g. acme.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-white/5">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-blue-500 mb-4">Initial Administrator</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={adminFullName}
|
||||
onChange={(e) => setAdminFullName(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
||||
placeholder="e.g. John Doe"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={adminEmail}
|
||||
onChange={(e) => setAdminEmail(e.target.value)}
|
||||
className="w-full bg-black/5 dark:bg-black/40 border border-black/10 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-gray-900 dark:text-white"
|
||||
placeholder="admin@acme.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Password</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={adminPassword}
|
||||
onChange={(e) => setAdminPassword(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Domain (Optional)</label>
|
||||
<div className="relative">
|
||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={newDomain}
|
||||
onChange={(e) => setNewDomain(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="e.g. acme.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isEditing && (
|
||||
<div className="pt-4 border-t border-slate-100 dark:border-white/5">
|
||||
<h3 className="text-xs font-black uppercase tracking-widest text-blue-600 dark:text-blue-500 mb-4">Initial Administrator</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Full Name</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={adminFullName}
|
||||
onChange={(e) => setAdminFullName(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="e.g. John Doe"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={adminEmail}
|
||||
onChange={(e) => setAdminEmail(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="admin@acme.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Admin Password</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={adminPassword}
|
||||
onChange={(e) => setAdminPassword(e.target.value)}
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all"
|
||||
onClick={resetForm}
|
||||
className="flex-1 px-4 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-lg transition-all text-slate-600 dark:text-white font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20"
|
||||
className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 font-bold"
|
||||
>
|
||||
Create
|
||||
{isEditing ? 'Save Changes' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -351,14 +399,14 @@ export default function OrganizationsPage() {
|
||||
|
||||
{/* Branding Management Modal */}
|
||||
{isBrandingModalOpen && selectedOrg && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-2xl bg-white dark:bg-gray-900 border border-black/10 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900 dark:text-white">Branding Management</h2>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{selectedOrg.name}</p>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Branding Management</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-gray-400">{selectedOrg.name}</p>
|
||||
</div>
|
||||
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 text-gray-500 hover:bg-black/5 dark:hover:bg-white/5 rounded-full transition-colors">
|
||||
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -367,22 +415,22 @@ export default function OrganizationsPage() {
|
||||
<div className="space-y-6">
|
||||
{/* Logo Upload */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-3 text-brand">Organization Logo</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-3 uppercase tracking-wider text-[10px] font-black">Organization Logo</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden relative">
|
||||
<div className="w-20 h-20 rounded-xl bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
<Image src={getImageUrl(selectedOrg.logo_url)} alt="Preview" fill className="object-contain" unoptimized />
|
||||
) : (
|
||||
<Building2 className="w-8 h-8 text-gray-600" />
|
||||
<Building2 className="w-8 h-8 text-slate-300 dark:text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="relative flex items-center justify-center gap-2 px-4 py-2 bg-blue-600/10 hover:bg-blue-600/20 text-blue-400 rounded-lg cursor-pointer transition-all border border-blue-500/20">
|
||||
<label className="relative flex items-center justify-center gap-2 px-4 py-2 bg-blue-600/10 hover:bg-blue-600/20 text-blue-600 dark:text-blue-400 rounded-lg cursor-pointer transition-all border border-blue-500/20 font-bold text-xs uppercase">
|
||||
<Upload className="w-4 h-4" />
|
||||
{uploadingLogo ? 'Uploading...' : 'Upload Logo'}
|
||||
<input type="file" className="hidden" accept="image/*" onChange={handleLogoUpload} disabled={uploadingLogo} />
|
||||
</label>
|
||||
<p className="text-[10px] text-gray-500 mt-2">PNG, JPG or SVG. Max 2MB.</p>
|
||||
<p className="text-[10px] text-slate-500 mt-2">PNG, JPG or SVG. Max 2MB.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -390,36 +438,36 @@ export default function OrganizationsPage() {
|
||||
{/* Colors */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Primary Color</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={primaryColor}
|
||||
onChange={(e) => setPrimaryColor(e.target.value)}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent border-none"
|
||||
className="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 p-1 bg-white dark:bg-black/40"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={primaryColor}
|
||||
onChange={(e) => setPrimaryColor(e.target.value)}
|
||||
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono"
|
||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-mono text-slate-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-2">Secondary Color</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={secondaryColor}
|
||||
onChange={(e) => setSecondaryColor(e.target.value)}
|
||||
className="w-10 h-10 rounded cursor-pointer bg-transparent border-none"
|
||||
className="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 p-1 bg-white dark:bg-black/40"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={secondaryColor}
|
||||
onChange={(e) => setSecondaryColor(e.target.value)}
|
||||
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono"
|
||||
className="flex-1 bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-3 py-2 text-sm font-mono text-slate-900 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -428,10 +476,10 @@ export default function OrganizationsPage() {
|
||||
|
||||
{/* Live Preview */}
|
||||
<div className="space-y-4">
|
||||
<label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Experience Portal Preview</label>
|
||||
<div className="rounded-xl border border-black/10 dark:border-white/10 overflow-hidden bg-gray-50 dark:bg-slate-900 shadow-inner">
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-gray-400 mb-2 uppercase tracking-wider text-[10px] font-black">Portal Preview</label>
|
||||
<div className="rounded-xl border border-slate-200 dark:border-white/10 overflow-hidden bg-white dark:bg-slate-950 shadow-inner">
|
||||
{/* Mock Experience Header */}
|
||||
<div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
|
||||
<div className="h-10 px-4 flex items-center justify-between border-b border-black/5" style={{ backgroundColor: primaryColor }}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
|
||||
{selectedOrg.logo_url ? (
|
||||
@@ -446,24 +494,24 @@ export default function OrganizationsPage() {
|
||||
</div>
|
||||
</div>
|
||||
{/* Mock Experience Content */}
|
||||
<div className="p-4 space-y-3 bg-gray-50 dark:bg-[#0a0c10]">
|
||||
<div className="w-2/3 h-4 bg-white/10 rounded mb-2" />
|
||||
<div className="w-full h-24 bg-white/5 rounded-lg border border-white/5 p-3">
|
||||
<div className="p-4 space-y-3 bg-slate-50 dark:bg-[#0a0c10]">
|
||||
<div className="w-2/3 h-4 bg-slate-200 dark:bg-white/10 rounded mb-2" />
|
||||
<div className="w-full h-24 bg-white dark:bg-white/5 rounded-lg border border-slate-200 dark:border-white/5 p-3 shadow-sm">
|
||||
<div className="w-1/3 h-3 rounded mb-2" style={{ backgroundColor: secondaryColor }} />
|
||||
<div className="w-full h-2 bg-white/5 rounded mb-1" />
|
||||
<div className="w-full h-2 bg-white/5 rounded mb-1" />
|
||||
<div className="w-1/2 h-2 bg-white/5 rounded" />
|
||||
<div className="w-full h-2 bg-slate-100 dark:bg-white/5 rounded mb-1" />
|
||||
<div className="w-full h-2 bg-slate-100 dark:bg-white/5 rounded mb-1" />
|
||||
<div className="w-1/2 h-2 bg-slate-100 dark:bg-white/5 rounded" />
|
||||
<div className="mt-4 flex justify-end">
|
||||
<div className="px-3 py-1.5 rounded text-[8px] font-bold text-white" style={{ backgroundColor: primaryColor }}>
|
||||
<div className="px-3 py-1.5 rounded text-[8px] font-bold text-white shadow-sm" style={{ backgroundColor: primaryColor }}>
|
||||
GET STARTED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
||||
<p className="text-[10px] text-blue-400 leading-relaxed">
|
||||
This is a real-time preview of how the brand identity will apply to the student's learning experience.
|
||||
<div className="p-3 rounded-lg bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20">
|
||||
<p className="text-[10px] text-blue-700 dark:text-blue-400 leading-relaxed font-medium">
|
||||
Real-time preview of the brand application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -472,14 +520,14 @@ export default function OrganizationsPage() {
|
||||
<div className="flex gap-3 mt-10">
|
||||
<button
|
||||
onClick={() => setIsBrandingModalOpen(false)}
|
||||
className="flex-1 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all font-medium"
|
||||
className="flex-1 px-4 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl transition-all font-medium text-slate-600 dark:text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleBrandingSave}
|
||||
disabled={isSavingBranding}
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2 uppercase tracking-wide"
|
||||
>
|
||||
{isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
||||
Save Branding
|
||||
@@ -490,32 +538,32 @@ export default function OrganizationsPage() {
|
||||
)}
|
||||
{/* SSO Configuration Modal */}
|
||||
{isSSOModalOpen && selectedOrg && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-xl glass border border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<div className="p-2 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
|
||||
<Fingerprint className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">Single Sign-On (OIDC)</h2>
|
||||
<p className="text-sm text-gray-400">{selectedOrg.name}</p>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Single Sign-On (OIDC)</h2>
|
||||
<p className="text-sm text-slate-600 dark:text-gray-400">{selectedOrg.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setIsSSOModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
||||
<button onClick={() => setIsSSOModalOpen(false)} className="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-white rounded-full transition-colors">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/10">
|
||||
<div>
|
||||
<h3 className="font-medium text-white">Enable OIDC SSO</h3>
|
||||
<p className="text-xs text-gray-500">Allow users to log in via your identity provider.</p>
|
||||
<div className="flex items-center justify-between p-4 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10">
|
||||
<div className="pr-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white">Enable OIDC SSO</h3>
|
||||
<p className="text-xs text-slate-500 dark:text-gray-500">Allow users to log in via your identity provider.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSsoEnabled(!ssoEnabled)}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative ${ssoEnabled ? 'bg-blue-600' : 'bg-gray-700'}`}
|
||||
className={`w-12 h-6 rounded-full transition-colors relative shrink-0 ${ssoEnabled ? 'bg-blue-600' : 'bg-slate-300 dark:bg-gray-700'}`}
|
||||
>
|
||||
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${ssoEnabled ? 'right-1' : 'left-1'}`} />
|
||||
</button>
|
||||
@@ -523,55 +571,55 @@ export default function OrganizationsPage() {
|
||||
|
||||
<div className="space-y-4 pt-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Issuer URL</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Issuer URL</label>
|
||||
<div className="relative">
|
||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="url"
|
||||
value={issuerUrl}
|
||||
onChange={(e) => setIssuerUrl(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
||||
placeholder="https://accounts.google.com or https://okta.com/..."
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="https://accounts.google.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Client ID</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Client ID</label>
|
||||
<div className="relative">
|
||||
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={clientId}
|
||||
onChange={(e) => setClientId(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="Your OIDC Client ID"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Client Secret</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Client Secret</label>
|
||||
<div className="relative">
|
||||
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="password"
|
||||
value={clientSecret}
|
||||
onChange={(e) => setClientSecret(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="••••••••••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 rounded-xl bg-blue-500/10 border border-blue-500/20 space-y-2">
|
||||
<div className="flex items-center gap-2 text-blue-400 text-xs font-bold">
|
||||
<div className="p-4 rounded-xl bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/20 space-y-2">
|
||||
<div className="flex items-center gap-2 text-blue-700 dark:text-blue-400 text-xs font-black uppercase tracking-wider">
|
||||
<Settings2 className="w-4 h-4" /> CONFIGURATION STEPS
|
||||
</div>
|
||||
<p className="text-[10px] text-blue-300 leading-relaxed">
|
||||
1. Register OpenCCB as an application in your Identity Provider (Okta, Google, Azure AD).<br />
|
||||
2. Set the Redirect URI to: <span className="font-mono bg-blue-500/20 px-1">{API_BASE_URL}/auth/sso/callback</span><br />
|
||||
3. Copy the Issuer URL, Client ID, and Client Secret here.
|
||||
<p className="text-[10px] text-blue-800 dark:text-blue-300 leading-relaxed font-medium">
|
||||
1. Register OpenCCB in your IDP.<br />
|
||||
2. Redirect URI: <span className="font-mono bg-blue-200 dark:bg-blue-500/20 px-1 rounded">{API_BASE_URL}/auth/sso/callback</span><br />
|
||||
3. Copy the Issuer, ID and Secret here.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -580,14 +628,14 @@ export default function OrganizationsPage() {
|
||||
<div className="flex gap-3 mt-8">
|
||||
<button
|
||||
onClick={() => setIsSSOModalOpen(false)}
|
||||
className="flex-1 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all font-medium"
|
||||
className="flex-1 px-4 py-3 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-xl transition-all font-medium text-slate-600 dark:text-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSSOSave}
|
||||
disabled={isSavingSSO}
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
||||
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2 uppercase tracking-wide"
|
||||
>
|
||||
{isSavingSSO ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
||||
Save SSO Settings
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cmsApi, User, Organization } from '@/lib/api';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { UserCog, Mail, Search, Filter, ShieldCheck, Plus, X, UserPlus, Key, User as UserIcon } from 'lucide-react';
|
||||
import { UserCog, Mail, Search, Filter, ShieldCheck, Plus, X, UserPlus, Key, User as UserIcon, Building2 } from 'lucide-react';
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
@@ -19,7 +19,8 @@ export default function UsersPage() {
|
||||
email: '',
|
||||
password: '',
|
||||
full_name: '',
|
||||
role: 'student'
|
||||
role: 'student',
|
||||
organization_id: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -54,7 +55,7 @@ export default function UsersPage() {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await cmsApi.createUser(newUser);
|
||||
setNewUser({ email: '', password: '', full_name: '', role: 'student' });
|
||||
setNewUser({ email: '', password: '', full_name: '', role: 'student', organization_id: '' });
|
||||
setIsModalOpen(false);
|
||||
loadData();
|
||||
} catch (error) {
|
||||
@@ -72,50 +73,50 @@ export default function UsersPage() {
|
||||
|
||||
if (currentUser?.role !== 'admin') {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center p-4">
|
||||
<div className="p-4 rounded-full bg-red-500/10 mb-4">
|
||||
<ShieldCheck className="w-12 h-12 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
||||
<p className="text-gray-400">Only system administrators can access this page.</p>
|
||||
<h1 className="text-2xl font-bold mb-2 text-slate-900 dark:text-white">Access Denied</h1>
|
||||
<p className="text-slate-600 dark:text-gray-400">Only system administrators can access this page.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="space-y-6 md:space-y-8 animate-in fade-in duration-500 p-4 md:p-0">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">User Management</h1>
|
||||
<p className="text-gray-400 mt-1">Manage users, roles, and organization assignments.</p>
|
||||
<h1 className="text-2xl md:text-3xl font-bold tracking-tight text-slate-900 dark:text-white">User Management</h1>
|
||||
<p className="text-slate-600 dark:text-gray-400 mt-1 text-sm">Manage users, roles, and organization assignments.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20"
|
||||
className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Add User
|
||||
<span>Add User</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search users..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
className="w-full bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-slate-900 dark:text-white shadow-sm dark:shadow-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Filter className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<select
|
||||
value={roleFilter}
|
||||
onChange={(e) => setRoleFilter(e.target.value)}
|
||||
className="bg-black/40 border border-white/10 rounded-lg pl-10 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/50 appearance-none cursor-pointer"
|
||||
className="bg-white dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500/50 appearance-none cursor-pointer text-slate-900 dark:text-white h-full shadow-sm dark:shadow-none"
|
||||
>
|
||||
<option value="">All Roles</option>
|
||||
<option value="admin">Admin</option>
|
||||
@@ -126,74 +127,79 @@ export default function UsersPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="glass border border-white/10 rounded-xl overflow-hidden">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-white/5 border-b border-white/10">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-sm font-semibold">User</th>
|
||||
<th className="px-6 py-4 text-sm font-semibold">Role</th>
|
||||
<th className="px-6 py-4 text-sm font-semibold">Organization</th>
|
||||
<th className="px-6 py-4 text-sm font-semibold text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{loading ? (
|
||||
[1, 2, 3, 4, 5].map(i => (
|
||||
<tr key={i} className="animate-pulse">
|
||||
<td className="px-6 py-4"><div className="h-4 w-32 bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4"><div className="h-4 w-16 bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4"><div className="h-4 w-24 bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4 text-right"><div className="h-4 w-8 bg-white/10 ml-auto rounded" /></td>
|
||||
</tr>
|
||||
))
|
||||
) : filteredUsers.map((u) => (
|
||||
<tr key={u.id} className="hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-400">
|
||||
{u.full_name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">{u.full_name}</div>
|
||||
<div className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Mail className="w-3 h-3" /> {u.email}
|
||||
<div className="bg-white dark:bg-white/[0.02] border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm dark:shadow-none">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">User</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">Role</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400">Organization</th>
|
||||
<th className="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-gray-400 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-white/5">
|
||||
{loading ? (
|
||||
[1, 2, 3, 4, 5].map(i => (
|
||||
<tr key={i} className="animate-pulse">
|
||||
<td className="px-6 py-4"><div className="h-4 w-32 bg-slate-100 dark:bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4"><div className="h-4 w-16 bg-slate-100 dark:bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4"><div className="h-4 w-24 bg-slate-100 dark:bg-white/10 rounded" /></td>
|
||||
<td className="px-6 py-4 text-right"><div className="h-4 w-8 bg-slate-100 dark:bg-white/10 ml-auto rounded" /></td>
|
||||
</tr>
|
||||
))
|
||||
) : filteredUsers.map((u) => (
|
||||
<tr key={u.id} className="hover:bg-slate-50 dark:hover:bg-white/[0.02] transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold border border-blue-500/20">
|
||||
{u.full_name[0].toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-900 dark:text-white text-sm">{u.full_name}</div>
|
||||
<div className="text-[10px] text-slate-500 dark:text-gray-500 flex items-center gap-1 font-mono">
|
||||
<Mail className="w-3 h-3" /> {u.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<select
|
||||
value={u.role}
|
||||
onChange={(e) => handleUpdateUser(u.id, e.target.value, u.organization_id || '00000000-0000-0000-0000-000000000000')}
|
||||
className="bg-black/20 border border-white/5 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500/50"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="instructor">Instructor</option>
|
||||
<option value="student">Student</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<select
|
||||
value={u.organization_id || '00000000-0000-0000-0000-000000000000'}
|
||||
onChange={(e) => handleUpdateUser(u.id, u.role, e.target.value)}
|
||||
className="bg-black/20 border border-white/5 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500/50 max-w-[150px]"
|
||||
>
|
||||
{organizations.map(org => (
|
||||
<option key={org.id} value={org.id}>{org.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button className="p-2 hover:bg-white/10 rounded-lg transition-all text-gray-400 hover:text-white opacity-0 group-hover:opacity-100">
|
||||
<UserCog className="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<select
|
||||
value={u.role}
|
||||
onChange={(e) => handleUpdateUser(u.id, e.target.value, u.organization_id || '00000000-0000-0000-0000-000000000000')}
|
||||
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/5 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500/50 text-slate-900 dark:text-white"
|
||||
>
|
||||
<option value="admin">Admin</option>
|
||||
<option value="instructor">Instructor</option>
|
||||
<option value="student">Student</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="w-3 h-3 text-slate-400" />
|
||||
<select
|
||||
value={u.organization_id || '00000000-0000-0000-0000-000000000000'}
|
||||
onChange={(e) => handleUpdateUser(u.id, u.role, e.target.value)}
|
||||
className="bg-white dark:bg-black/20 border border-slate-200 dark:border-white/5 rounded px-2 py-1 text-xs focus:ring-1 focus:ring-blue-500/50 max-w-[150px] text-slate-900 dark:text-white"
|
||||
>
|
||||
{organizations.map(org => (
|
||||
<option key={org.id} value={org.id}>{org.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button className="p-2 hover:bg-slate-200 dark:hover:bg-white/10 rounded-lg transition-all text-slate-400 hover:text-slate-900 dark:hover:text-white opacity-0 group-hover:opacity-100 shadow-sm">
|
||||
<UserCog className="w-4 h-4" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{!loading && filteredUsers.length === 0 && (
|
||||
<div className="p-12 text-center text-gray-500">
|
||||
<div className="p-12 text-center text-slate-500 dark:text-gray-500">
|
||||
No users found matching your search.
|
||||
</div>
|
||||
)}
|
||||
@@ -201,72 +207,72 @@ export default function UsersPage() {
|
||||
|
||||
{/* Create User Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-md glass border border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-md bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-2xl p-8 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-400">
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400">
|
||||
<UserPlus className="w-5 h-5" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold">Add New User</h2>
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Add New User</h2>
|
||||
</div>
|
||||
<button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors text-gray-500">
|
||||
<button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-full transition-colors text-slate-400">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCreateUser} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Full Name</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Full Name</label>
|
||||
<div className="relative">
|
||||
<UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<UserIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={newUser.full_name}
|
||||
onChange={(e) => setNewUser({ ...newUser, full_name: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="e.g. John Doe"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Email Address</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Email Address</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={newUser.email}
|
||||
onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">Initial Password</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Initial Password</label>
|
||||
<div className="relative">
|
||||
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={newUser.password}
|
||||
onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all text-slate-900 dark:text-white placeholder-slate-400"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-1.5">User Role</label>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">User Role</label>
|
||||
<select
|
||||
value={newUser.role}
|
||||
onChange={(e) => setNewUser({ ...newUser, role: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all appearance-none cursor-pointer"
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all appearance-none cursor-pointer text-slate-900 dark:text-white"
|
||||
>
|
||||
<option value="student">Student</option>
|
||||
<option value="instructor">Instructor</option>
|
||||
@@ -274,11 +280,25 @@ export default function UsersPage() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-600 dark:text-gray-400 mb-1.5">Organization</label>
|
||||
<select
|
||||
value={newUser.organization_id}
|
||||
onChange={(e) => setNewUser({ ...newUser, organization_id: e.target.value })}
|
||||
className="w-full bg-slate-50 dark:bg-black/40 border border-slate-200 dark:border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all appearance-none cursor-pointer text-slate-900 dark:text-white"
|
||||
>
|
||||
<option value="">Default (Current Context)</option>
|
||||
{organizations.map(org => (
|
||||
<option key={org.id} value={org.id}>{org.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all"
|
||||
className="flex-1 px-4 py-2.5 bg-slate-50 dark:bg-white/5 hover:bg-slate-100 dark:hover:bg-white/10 border border-slate-200 dark:border-white/10 rounded-lg transition-all text-slate-600 dark:text-white font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user