62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Settings, AlertCircle, Loader2 } from "lucide-react";
|
|
import { useSystemPage } from "./useSystemPage";
|
|
import { CleanupSection } from "./CleanupSection";
|
|
import { DiskSpaceCard } from "./DiskSpaceCard";
|
|
import { ProviderStatus } from "../ProviderStatus";
|
|
|
|
export default function AdminSystemPage() {
|
|
const { data, isLoading, error, isPurging, purgeResult, handleCleanup } = useSystemPage();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-purple-600/20 rounded-lg flex items-center justify-center">
|
|
<Settings className="w-5 h-5 text-purple-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-foreground">Système</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Surveiller l'état du système et gérer les ressources
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-red-200/30 bg-red-500/10 px-4 py-3 text-red-500">
|
|
<AlertCircle className="size-4" />
|
|
<span className="text-sm">{error}</span>
|
|
</div>
|
|
)}
|
|
|
|
{isLoading && !data ? (
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
{[1, 2].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="h-[88px] animate-pulse rounded-lg border border-border bg-card"
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<DiskSpaceCard
|
|
usedPercent={data?.system?.disk?.used_percent}
|
|
totalGb={data?.system?.disk?.total_gb}
|
|
freeGb={data?.system?.disk?.free_gb}
|
|
/>
|
|
<CleanupSection
|
|
trackedFilesCount={data?.cleanup?.tracked_files_count ?? 0}
|
|
isPurging={isPurging}
|
|
purgeResult={purgeResult}
|
|
onCleanup={handleCleanup}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<ProviderStatus data={data} isLoading={isLoading} />
|
|
</div>
|
|
);
|
|
}
|