bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Build [v1.14.24]

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-25 12:04:02 +03:00
parent 33c1555d8c
commit 3257a2cf48
50 changed files with 837 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/components/admin/AiManager.tsx
View File

@@ -32,13 +32,13 @@ export default function AiManager({
onUpdatePrompt
}: AiManagerProps) {
return (
<section data-testid="ai-config" className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/ai">
<section data-testid="ai-config" className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/ai">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Brain size={20} />
</div>
<h2 className="text-xl font-normal text-white tracking-tight">AI Intelligence</h2>
<h2 className="text-xl font-normal text-foreground tracking-tight">AI Intelligence</h2>
</div>
</div>
@@ -49,33 +49,33 @@ export default function AiManager({
data-testid="provider-option"
onClick={() => handleUpdateAiProvider(p.id)}
className={cn(
"p-4 rounded-2xl border transition-all text-left flex items-center justify-between group",
"p-4 border transition-all text-left flex items-center justify-between group",
p.active
? "bg-primary border-primary shadow-xl shadow-primary/10"
: "bg-background/60 border-slate-800 hover:border-primary/40"
: "bg-background/60 border-outline/30 hover:border-primary/40"
)}
>
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-lg flex items-center justify-center transition-colors",
p.active ? "bg-white/20 text-white" : "bg-primary/10 text-primary group-hover:bg-primary/20"
"w-8 h-8 flex items-center justify-center transition-colors",
p.active ? "bg-white/20 text-foreground" : "bg-primary/10 text-primary group-hover:bg-primary/20"
)}>
{p.id === 'gemini' ? <Cpu size={16} /> : <Zap size={16} />}
</div>
<div>
<p className={cn("text-xs font-normal tracking-tight", p.active ? "text-white" : "text-secondary")}>{p.name}</p>
<p className={cn("text-xs font-normal tracking-tight", p.active ? "text-foreground" : "text-secondary")}>{p.name}</p>
<p className={cn(
"text-xs font-normal mt-1 px-0.5 rounded",
"text-xs font-normal mt-1 px-0.5 ",
p.active
? (p.configured ? "text-emerald-200" : "text-rose-100")
: (p.configured ? "text-emerald-500" : "text-rose-500")
: (p.configured ? "text-emerald-500" : "text-error")
)}>
{p.configured ? "● Key Configured" : "○ Missing Api Key"}
</p>
</div>
</div>
{p.active && (
<div className="bg-white/20 px-2.5 py-1 rounded-full text-xs font-normal text-white tracking-tight">
<div className="bg-white/20 px-2.5 py-1 text-xs font-normal text-foreground tracking-tight">
Active
</div>
)}
@@ -83,17 +83,17 @@ export default function AiManager({
))}
</div>
<div className="bg-primary/5 border border-primary/10 rounded-[2rem] p-5 space-y-3">
<div className="bg-primary/5 border border-primary/10 ] p-5 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg text-primary"><Lock size={14} /></div>
<div className="p-2 bg-primary/10 text-primary"><Lock size={14} /></div>
<h3 className="text-sm font-normal text-secondary tracking-tight">Provider Access Keys</h3>
</div>
<button
onClick={onSaveAiKeys}
disabled={isSavingKeys}
data-testid="save-settings-button"
className="px-5 py-2 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
className="px-5 py-2 bg-primary hover:bg-primary text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingKeys ? <RotateCcw size={14} className="animate-spin" /> : <Lock size={14} />}
{isSavingKeys ? "Storing..." : "Store API Keys"}
@@ -110,16 +110,16 @@ export default function AiManager({
value={aiKeys.gemini}
onChange={(e) => setAiKeys({...aiKeys, gemini: e.target.value})}
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'gemini')?.masked_key || "Enter Gemini Key..."}
className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
className="flex-1 bg-background/80 border border-outline/30 py-1.5 px-4 text-xs text-foreground outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
/>
<button
onClick={() => onTestAiKey('gemini')}
disabled={isTestingKeys.gemini}
className={cn(
"px-3 py-1.5 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
"px-3 py-1.5 text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.gemini
? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary"
? "bg-surface-container border-outline-variant text-secondary cursor-wait"
: "bg-primary border-primary text-foreground hover:bg-primary"
)}
>
{isTestingKeys.gemini ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
@@ -136,16 +136,16 @@ export default function AiManager({
value={aiKeys.claude}
onChange={(e) => setAiKeys({...aiKeys, claude: e.target.value})}
placeholder={aiConfig?.providers?.find((p: any) => p.id === 'claude')?.masked_key || "Enter Claude Key..."}
className="flex-1 bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs text-white outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
className="flex-1 bg-background/80 border border-outline/30 py-1.5 px-4 text-xs text-foreground outline-none focus:border-primary/50 transition-all placeholder:text-secondary"
/>
<button
onClick={() => onTestAiKey('claude')}
disabled={isTestingKeys.claude}
className={cn(
"px-3 py-1.5 rounded-xl text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
"px-3 py-1.5 text-xs font-normal tracking-tight transition-all border shadow-lg flex items-center gap-1.5",
isTestingKeys.claude
? "bg-slate-800 border-slate-700 text-muted cursor-wait"
: "bg-primary border-primary text-white hover:bg-primary"
? "bg-surface-container border-outline-variant text-secondary cursor-wait"
: "bg-primary border-primary text-foreground hover:bg-primary"
)}
>
{isTestingKeys.claude ? <RotateCcw size={12} className="animate-spin" /> : <Wifi size={12} />}
@@ -163,7 +163,7 @@ export default function AiManager({
<button
onClick={onUpdatePrompt}
disabled={isSavingPrompt}
className="px-5 py-1.5 bg-primary hover:bg-primary text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
className="px-5 py-1.5 bg-primary hover:bg-primary text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center gap-2"
>
{isSavingPrompt ? <RotateCcw size={14} className="animate-spin" /> : <FileText size={14} />}
{isSavingPrompt ? "Saving..." : "Save Prompt"}
@@ -172,11 +172,11 @@ export default function AiManager({
<textarea
value={aiPrompt}
onChange={(e) => setAiPrompt(e.target.value)}
className="w-full bg-background/80 border border-slate-800 rounded-2xl p-4 text-xs font-mono font-normal text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
className="w-full bg-background/80 border border-outline/30 p-4 text-xs font-mono font-normal text-secondary leading-relaxed outline-none focus:border-purple-500/50 transition-all min-h-[200px] custom-scrollbar shadow-inner"
/>
</div>
<div className="bg-primary/5 border border-purple-500/10 rounded-2xl p-4 flex gap-3 items-start">
<div className="p-2 bg-primary/10 rounded-lg text-purple-400 shrink-0"><Shield size={14} /></div>
<div className="bg-primary/5 border border-purple-500/10 p-4 flex gap-3 items-start">
<div className="p-2 bg-primary/10 text-purple-400 shrink-0"><Shield size={14} /></div>
<p className="text-xs font-normal text-secondary leading-relaxed">
This prompt instructs the Vision AI core on label interpretation. Ensure it defines explicit mapping for technical attributes like <span className="text-purple-400">Item</span>, <span className="text-purple-400">Type</span>, and <span className="text-purple-400">Part Number</span> to avoid extraction null-pointers and ensure inventory data integrity.
</p>

28
frontend/components/admin/CategoryManager.tsx
View File

@@ -23,18 +23,18 @@ export default function CategoryManager({
onUpdateCategorySubmit
}: CategoryManagerProps) {
return (
<section className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/categories">
<section className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/categories">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Layers size={20} />
</div>
<h2 className="text-xl font-normal text-white tracking-tight">Category Groups</h2>
<h2 className="text-xl font-normal text-foreground tracking-tight">Category Groups</h2>
</div>
<button
onClick={onAddCategory}
data-testid="add-category-button"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-5 py-2 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
className="flex items-center gap-2 bg-primary hover:bg-primary text-foreground px-5 py-2 text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
>
<Plus size={14} /> New Group
</button>
@@ -42,7 +42,7 @@ export default function CategoryManager({
<div data-testid="category-list" className="grid sm:grid-cols-2 lg:grid-cols-4 gap-2.5">
{categories.map(cat => (
<div key={cat.id} data-testid="category-item" className="p-4 bg-background/40 border border-slate-800/50 rounded-2xl flex items-center justify-between group hover:border-primary/40 transition-all">
<div key={cat.id} data-testid="category-item" className="p-4 bg-background/40 border border-outline/30/50 flex items-center justify-between group hover:border-primary/40 transition-all">
<div className="min-w-0 pr-4">
<p className="card-title group-hover:text-primary transition-colors">{cat.name}</p>
<p className="card-subtitle">{cat.description || 'General storage'}</p>
@@ -53,14 +53,14 @@ export default function CategoryManager({
setEditingCategory(cat);
setEditCatForm({ name: cat.name, description: cat.description || '' });
}}
className="p-2 text-secondary hover:text-white hover:bg-slate-800 rounded-lg transition-all"
className="p-2 text-secondary hover:text-foreground hover:bg-surface-container transition-all"
>
<Edit2 size={14} />
</button>
<button
onClick={() => onDeleteCategory(cat.id, cat.name)}
data-testid="delete-category-button"
className="p-2 text-secondary hover:text-rose-500 hover:bg-rose-500/5 rounded-lg transition-all"
className="p-2 text-secondary hover:text-error hover:bg-error/5 transition-all"
>
<Trash2 size={14} />
</button>
@@ -72,15 +72,15 @@ export default function CategoryManager({
{/* Edit Category Modal */}
{editingCategory && (
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 shadow-2xl space-y-3 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-outline/30 ] sm: p-6 shadow-2xl space-y-3 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Edit2 size={20} />
</div>
<h3 className="text-xl font-normal text-white tracking-tight">Modify Group</h3>
<h3 className="text-xl font-normal text-foreground tracking-tight">Modify Group</h3>
</div>
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-surface-container text-secondary transition-colors border border-outline/30">
<X size={20} />
</button>
</div>
@@ -92,7 +92,7 @@ export default function CategoryManager({
type="text"
value={editCatForm.name}
onChange={(e) => setEditCatForm({...editCatForm, name: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all"
className="w-full bg-background border border-outline/30 py-1.5 px-4 text-sm text-foreground focus:border-primary outline-none transition-all"
/>
</div>
<div className="space-y-1">
@@ -100,10 +100,10 @@ export default function CategoryManager({
<textarea
value={editCatForm.description}
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all h-24 resize-none"
className="w-full bg-background border border-outline/30 py-1.5 px-4 text-sm text-foreground focus:border-primary outline-none transition-all h-24 resize-none"
/>
</div>
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-2.5 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm tracking-tight">
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-foreground font-normal py-2.5 shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm tracking-tight">
Update Asset Group
</button>
</div>

50
frontend/components/admin/DatabaseManager.tsx
View File

@@ -35,24 +35,24 @@ export default function DatabaseManager({
return (
<div className="space-y-3 md:space-y-4 h-full">
<div data-testid="database-info" className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl overflow-hidden relative group transition-all">
<div data-testid="database-info" className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 shadow-2xl overflow-hidden relative group transition-all">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Database size={20} />
</div>
<h2 className="text-xl font-normal text-white tracking-tight">System Integrity</h2>
<h2 className="text-xl font-normal text-foreground tracking-tight">System Integrity</h2>
</div>
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="space-y-1 sm:pr-4">
<p className="text-xs font-normal text-muted tracking-tight">Database Health</p>
<p className="text-xs font-normal text-secondary tracking-tight">Database Health</p>
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
<div className="w-2 h-2 bg-success animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.3)]" />
<span className="text-sm font-normal text-secondary">Operational</span>
</div>
</div>
<div className="sm:pl-4 sm:border-l border-slate-800">
<p className="text-xs font-normal text-muted tracking-tight">Last Backup</p>
<div className="sm:pl-4 sm:border-l border-outline/30">
<p className="text-xs font-normal text-secondary tracking-tight">Last Backup</p>
<p className="text-sm font-normal text-secondary tabular-nums">{dbStats.backup_count > 0 ? 'Verified' : 'Pending...'}</p>
</div>
<div className="ml-auto">
@@ -60,7 +60,7 @@ export default function DatabaseManager({
onClick={onCreateBackup}
disabled={isBackingUp}
data-testid="backup-button"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary text-foreground text-sm font-normal transition-all active:scale-95 disabled:opacity-50 shadow-xl shadow-primary/10 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Create database backup"
>
{isBackingUp ? <RotateCcw size={14} className="animate-spin" /> : <Database size={14} />}
@@ -70,32 +70,32 @@ export default function DatabaseManager({
</div>
</div>
<div className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4">
<div className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 shadow-2xl space-y-4">
<div className="space-y-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<History size={20} />
</div>
<div>
<h3 className="text-lg font-normal text-white tracking-tight">Storage Policy</h3>
<h3 className="text-lg font-normal text-foreground tracking-tight">Storage Policy</h3>
<p className="text-sm text-secondary font-normal tracking-tight">Retention & Maintenance</p>
</div>
</div>
<div className="grid sm:grid-cols-3 gap-3">
<div className="space-y-1">
<label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-sm font-normal text-secondary tracking-tight ml-1 flex items-center gap-2">
<History size={10} /> Max Backups
</label>
<input
type="number"
value={dbSettings.retention_count}
onChange={(e) => onUpdateDbSettings({...dbSettings, retention_count: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-1">
<label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-sm font-normal text-secondary tracking-tight ml-1 flex items-center gap-2">
<Clock size={10} /> Schedule (Hour)
</label>
<input
@@ -103,11 +103,11 @@ export default function DatabaseManager({
min="0" max="23"
value={dbSettings.schedule_hour}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_hour: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
<div className="space-y-1">
<label className="text-sm font-normal text-muted tracking-tight ml-1 flex items-center gap-2">
<label className="text-sm font-normal text-secondary tracking-tight ml-1 flex items-center gap-2">
<Zap size={10} /> Frequency (Days)
</label>
<input
@@ -115,7 +115,7 @@ export default function DatabaseManager({
min="1"
value={dbSettings.schedule_freq_days}
onChange={(e) => onUpdateDbSettings({...dbSettings, schedule_freq_days: parseInt(e.target.value)})}
className="w-full bg-background/80 border border-slate-800 rounded-xl py-1.5 px-4 text-xs font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none transition-all tabular-nums"
/>
</div>
</div>
@@ -123,17 +123,17 @@ export default function DatabaseManager({
<div className="space-y-2">
<div className="flex items-center justify-between px-1">
<label className="text-sm font-normal text-muted tracking-tight">Recovery Points</label>
<div className="text-xs font-normal text-primary tracking-tight bg-primary/5 px-3 py-1 rounded-full border border-primary/10">
<label className="text-sm font-normal text-secondary tracking-tight">Recovery Points</label>
<div className="text-xs font-normal text-primary tracking-tight bg-primary/5 px-3 py-1 border border-primary/10">
{formatSize(dbStats.total_size_bytes)} Used
</div>
</div>
<div className="space-y-1 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="space-y-1 pr-2 overflow-y-auto max-h-[300px] scrollbar-thin scrollbar-thumb-surface-container scrollbar-track-transparent">
{backups.map((bak: any) => (
<div key={bak.filename} className="flex items-center justify-between p-3 bg-background/40 border border-slate-800/40 rounded-2xl group/item hover:border-primary/30 transition-all">
<div key={bak.filename} className="flex items-center justify-between p-3 bg-background/40 border border-outline/30/40 group/item hover:border-primary/30 transition-all">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-muted">
<div className="w-8 h-8 bg-surface-container flex items-center justify-center text-secondary">
<Database size={14} />
</div>
<div>
@@ -144,7 +144,7 @@ export default function DatabaseManager({
</div>
<button
onClick={() => onRestore(bak.filename)}
className="p-2 text-secondary hover:text-primary hover:bg-primary/5 rounded-xl transition-all opacity-0 group-hover/item:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="p-2 text-secondary hover:text-primary hover:bg-primary/5 transition-all opacity-0 group-hover/item:opacity-100 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label={`Restore backup ${bak.filename}`}
>
<RotateCcw size={16} />
@@ -157,7 +157,7 @@ export default function DatabaseManager({
<div className="grid grid-cols-2 gap-3 pt-1">
<button
onClick={onExport}
className="flex items-center justify-center gap-2 py-2.5 bg-background border border-slate-800 hover:border-primary/50 text-primary rounded-2xl text-sm font-normal transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center justify-center gap-2 py-2.5 bg-background border border-outline/30 hover:border-primary/50 text-primary text-sm font-normal transition-all active:scale-95 tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Export database"
>
<Download size={14} /> Export Database
@@ -170,7 +170,7 @@ export default function DatabaseManager({
className="absolute inset-0 opacity-0 cursor-pointer z-10"
/>
<button
className="w-full flex items-center justify-center gap-2 py-2.5 bg-background border border-slate-800 hover:border-rose-500/50 text-rose-500 rounded-2xl text-sm font-normal transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
className="w-full flex items-center justify-center gap-2 py-2.5 bg-background border border-outline/30 hover:border-error/50 text-error text-sm font-normal transition-all tracking-tight shadow-xl shadow-black/20 focus-visible:ring-2 focus-visible:ring-error focus-visible:outline-none"
aria-label="Import database"
>
<Upload size={14} /> Import Database

30
frontend/components/admin/ExportPanel.tsx
View File

@@ -29,26 +29,26 @@ export function ExportPanel() {
};
return (
<div data-testid="admin-tab-exports" className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 flex flex-col shadow-2xl transition-all h-full">
<div data-testid="admin-tab-exports" className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 flex flex-col shadow-2xl transition-all h-full">
<div className="flex items-center gap-3 mb-4 md:mb-6">
<div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 border border-indigo-500/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<FileDown size={20} />
</div>
<div>
<h2 className="text-xl font-normal text-white tracking-tight">Export & Reports</h2>
<p className="text-[10px] md:text-xs text-muted font-normal tracking-tight">Download system snapshots and action logs</p>
<h2 className="text-xl font-normal text-foreground tracking-tight">Export & Reports</h2>
<p className="text-[10px] md:text-xs text-secondary font-normal tracking-tight">Download system snapshots and action logs</p>
</div>
</div>
<div className="grid md:grid-cols-2 gap-4">
{/* Inventory Snapshot Section */}
<div className="p-4 bg-background/40 border border-slate-800/40 rounded-2xl hover:border-primary/20 transition-all group flex flex-col justify-between">
<div className="p-4 bg-background/40 border border-outline/30/40 hover:border-primary/20 transition-all group flex flex-col justify-between">
<div className="mb-4">
<h3 className="text-sm font-normal text-secondary flex items-center gap-2">
<FileSpreadsheet size={14} className="text-primary" />
Inventory Snapshot
</h3>
<p className="text-xs text-muted mt-1 leading-relaxed">
<p className="text-xs text-secondary mt-1 leading-relaxed">
Export current inventory state with all item details and locations.
</p>
</div>
@@ -57,7 +57,7 @@ export function ExportPanel() {
<button
onClick={() => handleExportSnapshot("csv")}
disabled={isLoading}
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
aria-label="Export inventory snapshot as CSV"
>
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileText size={14} />}
@@ -66,7 +66,7 @@ export function ExportPanel() {
<button
onClick={() => handleExportSnapshot("xlsx")}
disabled={isLoading}
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
aria-label="Export inventory snapshot as Excel"
>
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileSpreadsheet size={14} />}
@@ -76,13 +76,13 @@ export function ExportPanel() {
</div>
{/* Audit Trail Section */}
<div className="p-4 bg-background/40 border border-slate-800/40 rounded-2xl hover:border-primary/20 transition-all group flex flex-col justify-between">
<div className="p-4 bg-background/40 border border-outline/30/40 hover:border-primary/20 transition-all group flex flex-col justify-between">
<div className="mb-4">
<h3 className="text-sm font-normal text-secondary flex items-center gap-2">
<FileText size={14} className="text-indigo-400" />
<FileText size={14} className="text-primary" />
Audit Trail
</h3>
<p className="text-xs text-muted mt-1 leading-relaxed">
<p className="text-xs text-secondary mt-1 leading-relaxed">
Complete history of system actions, changes, and user operations.
</p>
</div>
@@ -90,7 +90,7 @@ export function ExportPanel() {
<button
onClick={() => handleExportAuditTrail("csv")}
disabled={isLoading}
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
aria-label="Export audit trail as CSV"
>
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileText size={14} />}
@@ -99,7 +99,7 @@ export function ExportPanel() {
<button
onClick={() => handleExportAuditTrail("xlsx")}
disabled={isLoading}
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-white rounded-xl text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
className="px-5 py-1.5 bg-primary hover:bg-primary/90 text-foreground text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/10 tracking-tight border border-primary/30 flex items-center justify-center gap-2 disabled:opacity-50"
aria-label="Export audit trail as Excel"
>
{isLoading ? <Loader2 size={14} className="animate-spin" /> : <FileSpreadsheet size={14} />}
@@ -110,8 +110,8 @@ export function ExportPanel() {
</div>
{error && (
<div className="mt-4 p-3 bg-rose-500/10 border border-rose-500/20 rounded-xl text-rose-500 text-[10px] flex items-center gap-2 animate-in slide-in-from-top-2 duration-300">
<div className="w-1.5 h-1.5 bg-rose-500 rounded-full animate-pulse" />
<div className="mt-4 p-3 bg-error/10 border border-error/20 text-error text-[10px] flex items-center gap-2 animate-in slide-in-from-top-2 duration-300">
<div className="w-1.5 h-1.5 bg-error animate-pulse" />
<span className="font-normal truncate">Error: {error}</span>
</div>
)}

36
frontend/components/admin/IdentityManager.tsx
View File

@@ -24,31 +24,31 @@ export default function IdentityManager({
onUpdateUserSubmit
}: IdentityManagerProps) {
return (
<div className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 flex flex-col shadow-2xl transition-all group/identity h-full">
<div className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 flex flex-col shadow-2xl transition-all group/identity h-full">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<User size={20} />
</div>
<h2 className="text-xl font-normal text-white tracking-tight">Identity Management</h2>
<h2 className="text-xl font-normal text-foreground tracking-tight">Identity Management</h2>
</div>
<button
onClick={onAddUser}
data-testid="add-user-button"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-blue-600 text-white rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex items-center gap-2 px-5 py-2.5 bg-primary hover:bg-primary text-foreground text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Add new user"
>
<UserPlus size={16} /> Add User
</button>
</div>
<div className="flex-1 space-y-1 pr-2 -mr-2 overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="flex-1 space-y-1 pr-2 -mr-2 overflow-y-auto max-h-[400px] scrollbar-thin scrollbar-thumb-surface-container scrollbar-track-transparent">
{users.map((user) => (
<div key={user.id} className="flex items-center justify-between p-3 bg-background/40 border border-slate-800/40 rounded-2xl hover:border-primary/30 transition-all group">
<div key={user.id} className="flex items-center justify-between p-3 bg-background/40 border border-outline/30/40 hover:border-primary/30 transition-all group">
<div className="flex items-center gap-3 min-w-0">
<div className={cn(
"w-9 h-9 rounded-xl flex items-center justify-center transition-colors shadow-inner shrink-0",
user.role === 'admin' ? "bg-primary/10 text-primary border border-primary/20" : "bg-slate-800 text-muted border border-slate-700"
"w-9 h-9 flex items-center justify-center transition-colors shadow-inner shrink-0",
user.role === 'admin' ? "bg-primary/10 text-primary border border-primary/20" : "bg-surface-container text-secondary border border-outline-variant"
)}>
{user.role === 'admin' ? <Shield size={16} /> : <User size={16} />}
</div>
@@ -63,7 +63,7 @@ export default function IdentityManager({
setEditingUser(user);
setEditUserForm({ username: user.username, password: '', role: user.role });
}}
className="p-2 text-secondary hover:text-primary hover:bg-primary/5 rounded-xl transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="p-2 text-secondary hover:text-primary hover:bg-primary/5 transition-all focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label={`Edit user ${user.username}`}
>
<Edit2 size={16} />
@@ -72,7 +72,7 @@ export default function IdentityManager({
<button
onClick={() => onDeleteUser(user.id, user.username)}
data-testid="delete-user-button"
className="p-2 text-secondary hover:text-rose-500 hover:bg-rose-500/5 rounded-xl transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
className="p-2 text-secondary hover:text-error hover:bg-error/5 transition-all focus-visible:ring-2 focus-visible:ring-error focus-visible:outline-none"
aria-label={`Delete user ${user.username}`}
>
<Trash2 size={16} />
@@ -85,13 +85,13 @@ export default function IdentityManager({
{/* Edit User Modal */}
{editingUser && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="bg-surface border border-slate-800 rounded-[2.5rem] p-6 w-full max-w-md shadow-2xl">
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
<div className="bg-surface border border-outline/30 ] p-6 w-full max-w-md shadow-2xl">
<div className="flex justify-between items-center mb-3">
<h3 className="text-xl font-normal text-white tracking-tight">Edit Identity</h3>
<h3 className="text-xl font-normal text-foreground tracking-tight">Edit Identity</h3>
<button
onClick={() => setEditingUser(null)}
className="p-2 text-muted hover:text-white transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded"
className="p-2 text-secondary hover:text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Close edit dialog"
>
<X size={20} />
@@ -105,7 +105,7 @@ export default function IdentityManager({
type="text"
value={editUserForm.username}
onChange={(e) => setEditUserForm({ ...editUserForm, username: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-sm font-normal text-foreground outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/>
</div>
<div className="space-y-1">
@@ -115,7 +115,7 @@ export default function IdentityManager({
value={editUserForm.password}
onChange={(e) => setEditUserForm({ ...editUserForm, password: e.target.value })}
placeholder="********"
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-sm font-normal text-foreground outline-none focus:border-primary/50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 transition-all font-mono"
/>
</div>
<div className="space-y-1">
@@ -123,7 +123,7 @@ export default function IdentityManager({
<select
value={editUserForm.role}
onChange={(e) => setEditUserForm({ ...editUserForm, role: e.target.value })}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 px-4 text-sm font-normal text-white outline-none focus:border-primary/50 transition-all appearance-none"
className="w-full bg-background/80 border border-outline/30 py-1.5 px-4 text-sm font-normal text-foreground outline-none focus:border-primary/50 transition-all appearance-none"
>
<option value="user">Standard User</option>
<option value="admin">Administrator</option>
@@ -132,7 +132,7 @@ export default function IdentityManager({
<button
onClick={onUpdateUserSubmit}
className="w-full bg-primary hover:bg-primary/80 text-white rounded-2xl py-2.5 text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
className="w-full bg-primary hover:bg-primary/80 text-foreground py-2.5 text-sm font-normal transition-all active:scale-95 shadow-xl shadow-primary/20 tracking-tight mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container focus-visible:ring-primary focus-visible:outline-none"
>
Apply Changes
</button>

54
frontend/components/admin/LdapManager.tsx
View File

@@ -18,27 +18,27 @@ export default function LdapManager({
onUpdateLdap
}: LdapManagerProps) {
return (
<div className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-3 transition-all group/ldap">
<div className="bg-surface/50 border border-outline/30/50 ] p-4 md:p-6 shadow-2xl space-y-3 transition-all group/ldap">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<div className="w-10 h-10 bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Globe size={20} />
</div>
<h2 className="text-xl font-normal text-white tracking-tight">Enterprise LDAP</h2>
<h2 className="text-xl font-normal text-foreground tracking-tight">Enterprise LDAP</h2>
</div>
</div>
<div className="flex items-center justify-between p-4 bg-background/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-primary/30">
<div className="flex items-center justify-between p-4 bg-background/40 border border-outline/30/60 group transition-all hover:border-primary/30">
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-xl flex items-center justify-center transition-all shadow-inner",
ldapConfig.ldap_enabled ? "bg-green-500/10 text-green-500" : "bg-slate-800 text-muted"
"w-8 h-8 flex items-center justify-center transition-all shadow-inner",
ldapConfig.ldap_enabled ? "bg-success/10 text-success" : "bg-surface-container text-secondary"
)}>
<Power size={14} />
</div>
<div>
<p className="card-title leading-none">LDAP Authorization</p>
<p className={cn("card-subtitle mt-1", ldapConfig.ldap_enabled ? "text-green-500/80" : "text-muted")}>
<p className={cn("card-subtitle mt-1", ldapConfig.ldap_enabled ? "text-success/80" : "text-secondary")}>
{ldapConfig.ldap_enabled ? "External Directory Active" : "Internal Authentication Only"}
</p>
</div>
@@ -46,12 +46,12 @@ export default function LdapManager({
<button
onClick={() => setLdapConfig({...ldapConfig, ldap_enabled: !ldapConfig.ldap_enabled})}
className={cn(
"w-10 h-5 rounded-full relative transition-all duration-300 shadow-inner border",
ldapConfig.ldap_enabled ? "bg-primary border-primary" : "bg-slate-800 border-slate-700"
"w-10 h-5 relative transition-all duration-300 shadow-inner border",
ldapConfig.ldap_enabled ? "bg-primary border-primary" : "bg-surface-container border-outline-variant"
)}
>
<div className={cn(
"absolute top-0.5 w-3.5 h-3.5 bg-white rounded-full transition-all shadow-sm",
"absolute top-0.5 w-3.5 h-3.5 bg-white transition-all shadow-sm",
ldapConfig.ldap_enabled ? "right-0.5" : "left-0.5"
)} />
</button>
@@ -61,26 +61,26 @@ export default function LdapManager({
<div className="space-y-1">
<label className="text-sm font-normal text-secondary tracking-tight ml-1">LDAP URI</label>
<div className="relative">
<Server className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" size={14} />
<Server className="absolute left-3 top-1/2 -translate-y-1/2 text-secondary" size={14} />
<input
type="text"
placeholder="ldap://host:389"
value={ldapConfig.server_uri}
onChange={(e) => setLdapConfig({...ldapConfig, server_uri: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 pl-9 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 pl-9 pr-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Context DN</label>
<div className="relative">
<Shield className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" size={14} />
<Shield className="absolute left-3 top-1/2 -translate-y-1/2 text-secondary" size={14} />
<input
type="text"
placeholder="dc=example,dc=com"
value={ldapConfig.base_dn}
onChange={(e) => setLdapConfig({...ldapConfig, base_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 pl-9 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 pl-9 pr-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
@@ -90,42 +90,42 @@ export default function LdapManager({
<div className="space-y-1">
<label className="text-sm font-normal text-secondary tracking-tight ml-1">User DN Template</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" size={14} />
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-secondary" size={14} />
<input
type="text"
placeholder="uid={username},ou=people..."
value={ldapConfig.user_template}
onChange={(e) => setLdapConfig({...ldapConfig, user_template: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 pl-9 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 pl-9 pr-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
<div className="space-y-1">
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Groups Base DN</label>
<div className="relative">
<Layers className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" size={14} />
<Layers className="absolute left-3 top-1/2 -translate-y-1/2 text-secondary" size={14} />
<input
type="text"
placeholder="ou=groups"
value={ldapConfig.groups_dn}
onChange={(e) => setLdapConfig({...ldapConfig, groups_dn: e.target.value})}
className="w-full bg-background/80 border border-slate-800 rounded-2xl py-1.5 pl-9 pr-4 text-xs font-normal text-white outline-none focus:border-primary/50 transition-all font-mono"
className="w-full bg-background/80 border border-outline/30 py-1.5 pl-9 pr-4 text-xs font-normal text-foreground outline-none focus:border-primary/50 transition-all font-mono"
/>
</div>
</div>
</div>
<div className="flex items-center justify-between p-4 bg-background/40 border border-slate-800/60 rounded-2xl group transition-all hover:border-primary/30">
<div className="flex items-center justify-between p-4 bg-background/40 border border-outline/30/60 group transition-all hover:border-primary/30">
<div className="flex items-center gap-3">
<div className={cn(
"w-8 h-8 rounded-xl flex items-center justify-center transition-all shadow-inner",
ldapConfig.use_tls ? "bg-primary/10 text-primary" : "bg-slate-800 text-muted"
"w-8 h-8 flex items-center justify-center transition-all shadow-inner",
ldapConfig.use_tls ? "bg-primary/10 text-primary" : "bg-surface-container text-secondary"
)}>
<Lock size={14} />
</div>
<div>
<p className="card-title leading-none">Use TLS</p>
<p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-primary/80" : "text-muted")}>
<p className={cn("card-subtitle mt-1", ldapConfig.use_tls ? "text-primary/80" : "text-secondary")}>
{ldapConfig.use_tls ? "Encrypted Channel" : "Standard Link"}
</p>
</div>
@@ -133,12 +133,12 @@ export default function LdapManager({
<button
onClick={() => setLdapConfig({...ldapConfig, use_tls: !ldapConfig.use_tls})}
className={cn(
"w-10 h-5 rounded-full relative transition-all duration-300 shadow-inner border",
ldapConfig.use_tls ? "bg-primary border-primary" : "bg-slate-800 border-slate-700"
"w-10 h-5 relative transition-all duration-300 shadow-inner border",
ldapConfig.use_tls ? "bg-primary border-primary" : "bg-surface-container border-outline-variant"
)}
>
<div className={cn(
"absolute top-0.5 w-3.5 h-3.5 bg-white rounded-full transition-all shadow-sm",
"absolute top-0.5 w-3.5 h-3.5 bg-white transition-all shadow-sm",
ldapConfig.use_tls ? "right-0.5" : "left-0.5"
)} />
</button>
@@ -148,14 +148,14 @@ export default function LdapManager({
<button
onClick={onTestLdap}
disabled={testingLdap}
className="flex-1 bg-primary hover:bg-primary text-white rounded-xl py-1.5 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
className="flex-1 bg-primary hover:bg-primary text-foreground py-1.5 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 disabled:opacity-50 flex items-center justify-center gap-2 border border-primary/30"
>
{testingLdap ? <RotateCcw size={14} className="animate-spin" /> : <Wifi size={14} />}
Test Connection
</button>
<button
onClick={onUpdateLdap}
className="flex-[2] bg-primary hover:bg-primary text-white rounded-xl py-2 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
className="flex-[2] bg-primary hover:bg-primary text-foreground py-2 text-sm font-normal shadow-xl shadow-primary/10 transition-all active:scale-95 flex items-center justify-center gap-2 border border-primary/30 tracking-tight"
>
<Shield size={14} /> Save LDAP Policy
</button>