feat: Implement functional System Settings page with diagnostics
This commit is contained in:
cawcenter
143
frontend/src/components/admin/SettingsManager.tsx
Normal file
143
frontend/src/components/admin/SettingsManager.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
export default function SettingsManager() {
|
||||
const [activeTab, setActiveTab] = useState('general');
|
||||
const [health, setHealth] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
checkHealth();
|
||||
}, []);
|
||||
|
||||
const checkHealth = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const start = Date.now();
|
||||
const res = await fetch('/api/seo/stats');
|
||||
const latency = Date.now() - start;
|
||||
const data = await res.json();
|
||||
setHealth({
|
||||
api: res.ok,
|
||||
latency,
|
||||
version: '1.0.0',
|
||||
directus: data.success ? 'Connected' : 'Error',
|
||||
env: process.env.NODE_ENV || 'production'
|
||||
});
|
||||
} catch (e: any) {
|
||||
setHealth({ api: false, error: e.message });
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold text-white">System Settings</h1>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex border-b border-slate-700 space-x-6">
|
||||
<button
|
||||
onClick={() => setActiveTab('general')}
|
||||
className={`pb-3 px-1 text-sm font-medium transition-colors ${activeTab === 'general' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
|
||||
>
|
||||
General
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('health')}
|
||||
className={`pb-3 px-1 text-sm font-medium transition-colors ${activeTab === 'health' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-400 hover:text-slate-200'}`}
|
||||
>
|
||||
System Health
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* General Tab */}
|
||||
{activeTab === 'general' && (
|
||||
<div className="grid gap-6">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Admin Profile</CardTitle>
|
||||
<CardDescription>Current session information</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-400">Role</label>
|
||||
<div className="p-2 bg-slate-950 border border-slate-800 rounded text-white">Administrator</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-400">Access Level</label>
|
||||
<div className="p-2 bg-slate-950 border border-slate-800 rounded text-white">Full System Access</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:bg-slate-800" onClick={() => window.open('https://spark.jumpstartscaling.com/admin/users', '_blank')}>
|
||||
Manage Users in Directus ↗
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">Configuration</CardTitle>
|
||||
<CardDescription>Global system defaults</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-sm text-slate-400 mb-4">
|
||||
Configuration for API limits, default SEO constraints, and other system-wide constants are managed via Environment Variables or the Directus Settings collection.
|
||||
</div>
|
||||
<Button className="bg-slate-800 hover:bg-slate-700 mx-2" onClick={() => window.open('https://spark.jumpstartscaling.com/admin/settings', '_blank')}>
|
||||
Open Directus Settings ↗
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Health Tab */}
|
||||
{activeTab === 'health' && (
|
||||
<div className="grid gap-6">
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white">System Diagnostics</CardTitle>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardDescription>Real-time system status check</CardDescription>
|
||||
<Button size="sm" onClick={checkHealth} disabled={loading}>
|
||||
{loading ? 'Checking...' : 'Refresh Status'}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
|
||||
<span className="text-slate-300">API Connectivity</span>
|
||||
{health?.api ? (
|
||||
<Badge className="bg-green-600">Online ({health.latency}ms)</Badge>
|
||||
) : (
|
||||
<Badge variant="destructive">Offline</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
|
||||
<span className="text-slate-300">Directus Backend</span>
|
||||
<Badge className={health?.directus === 'Connected' ? 'bg-green-600' : 'bg-red-600'}>
|
||||
{health?.directus || 'Checking...'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
|
||||
<span className="text-slate-300">Frontend Version</span>
|
||||
<span className="text-white font-mono">{health?.version || '1.0.0'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-slate-950 rounded border border-slate-800">
|
||||
<span className="text-slate-300">Environment</span>
|
||||
<span className="text-white font-mono uppercase">{health?.env || 'PRODUCTION'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,9 @@
|
||||
---
|
||||
import Layout from '@/layouts/AdminLayout.astro';
|
||||
import SettingsManager from '@/components/admin/SettingsManager';
|
||||
---
|
||||
|
||||
<Layout title="System Settings">
|
||||
<div class="p-6">
|
||||
<h1 class="text-3xl font-bold text-slate-100 mb-6">System Settings</h1>
|
||||
|
||||
<div class="bg-slate-800 rounded-lg border border-slate-700 p-8 text-center">
|
||||
<div class="w-16 h-16 bg-slate-700 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-white mb-2">Global Configuration</h2>
|
||||
<p class="text-slate-400 max-w-md mx-auto">
|
||||
System-wide settings for API keys, user management, and global defaults will go here.
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<SettingsManager client:load />
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Reference in New Issue
Block a user