390 أسطر
16 KiB
TypeScript
390 أسطر
16 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { LogOut, RefreshCcw, RotateCcw, Save } from "lucide-react";
|
|
|
|
import { NoPermissionState } from "@/components/auth/no-permission-state";
|
|
import { useSuperAdminSession } from "@/components/auth/session-context";
|
|
import { PageHeader } from "@/components/dashboard/page-header";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useToast } from "@/components/ui/toast";
|
|
import { listSuperAdminSessions } from "@/lib/api/auth";
|
|
import {
|
|
getSuperAdminSettings,
|
|
getSuperAdminSettingsHistory,
|
|
restoreSuperAdminSettingsHistory,
|
|
updateSuperAdminSettings,
|
|
} from "@/lib/api/superadmin";
|
|
import { logoutSuperAdmin, refreshSuperAdmin } from "@/lib/auth/client";
|
|
import { formatDateTime } from "@/lib/format";
|
|
import { SUPERADMIN_PERMISSIONS, hasPermission } from "@/lib/permissions";
|
|
import type {
|
|
SessionItem,
|
|
SessionsResponse,
|
|
SuperAdminSettingsHistoryEntry,
|
|
SuperAdminSettingsResponse,
|
|
} from "@/types/api";
|
|
|
|
const EMPTY_SESSIONS: SessionsResponse = { items: [] };
|
|
|
|
export default function SettingsPage() {
|
|
const { permissions } = useSuperAdminSession();
|
|
const [historyItems, setHistoryItems] = useState<SuperAdminSettingsHistoryEntry[]>([]);
|
|
const [sessions, setSessions] = useState<SessionItem[]>([]);
|
|
const [settingsResponse, setSettingsResponse] = useState<SuperAdminSettingsResponse | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const { toast } = useToast();
|
|
const router = useRouter();
|
|
|
|
const canReadSettings = hasPermission(permissions, SUPERADMIN_PERMISSIONS.SETTINGS_READ);
|
|
const canWriteSettings = hasPermission(permissions, SUPERADMIN_PERMISSIONS.SETTINGS_WRITE);
|
|
const canManageSessions = hasPermission(
|
|
permissions,
|
|
SUPERADMIN_PERMISSIONS.SESSIONS_MANAGE,
|
|
);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
const loadData = async () => {
|
|
if (!canReadSettings) {
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const [sessionsResponse, nextSettings, nextHistory] = await Promise.all([
|
|
canManageSessions ? listSuperAdminSessions() : Promise.resolve(EMPTY_SESSIONS),
|
|
getSuperAdminSettings(),
|
|
getSuperAdminSettingsHistory({ page: 1, limit: 8, sortOrder: "desc" }),
|
|
]);
|
|
if (!active) return;
|
|
setSessions(sessionsResponse.items ?? []);
|
|
setSettingsResponse(nextSettings);
|
|
setHistoryItems(nextHistory.items ?? []);
|
|
} catch (error) {
|
|
if (!active) return;
|
|
toast({ title: "Failed to load settings", description: String(error), variant: "danger" });
|
|
}
|
|
};
|
|
|
|
void loadData();
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [canManageSessions, canReadSettings, toast]);
|
|
|
|
const settings = settingsResponse?.settings;
|
|
const runtime = settingsResponse?.runtime;
|
|
|
|
const updateField = <K extends keyof NonNullable<typeof settings>>(key: K, value: NonNullable<typeof settings>[K]) => {
|
|
setSettingsResponse((prev) =>
|
|
prev
|
|
? {
|
|
...prev,
|
|
settings: {
|
|
...prev.settings,
|
|
[key]: value,
|
|
},
|
|
}
|
|
: prev,
|
|
);
|
|
};
|
|
|
|
if (!canReadSettings) {
|
|
return (
|
|
<div className="space-y-5 pb-8">
|
|
<PageHeader
|
|
title="Settings"
|
|
subtitle="Central SuperAdmin runtime settings with change history and rollback."
|
|
/>
|
|
<NoPermissionState description="This page needs the settings.read permission." />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5 pb-8">
|
|
<PageHeader
|
|
title="Settings"
|
|
subtitle="Stored SuperAdmin settings, history, and live runtime visibility."
|
|
actions={
|
|
<Button
|
|
onClick={async () => {
|
|
if (!settings || !canWriteSettings) return;
|
|
setSaving(true);
|
|
try {
|
|
const next = await updateSuperAdminSettings(settings);
|
|
setSettingsResponse(next);
|
|
const history = await getSuperAdminSettingsHistory({ page: 1, limit: 8, sortOrder: "desc" });
|
|
setHistoryItems(history.items ?? []);
|
|
toast({ title: "Settings saved", description: "Central settings updated successfully.", variant: "success" });
|
|
} catch (error) {
|
|
toast({ title: "Save failed", description: String(error), variant: "danger" });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}}
|
|
disabled={!settings || !canWriteSettings || saving}
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
Save settings
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<section className="grid gap-4 xl:grid-cols-12">
|
|
<Card className="xl:col-span-4">
|
|
<CardHeader>
|
|
<CardTitle>Session controls</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full"
|
|
disabled={loading}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
try {
|
|
await refreshSuperAdmin();
|
|
toast({ title: "Session refreshed", description: "Cookies were refreshed successfully.", variant: "success" });
|
|
} catch (error) {
|
|
toast({ title: "Refresh failed", description: String(error), variant: "danger" });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
<RefreshCcw className="h-4 w-4" />
|
|
Refresh session
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
className="w-full"
|
|
disabled={loading}
|
|
onClick={async () => {
|
|
setLoading(true);
|
|
try {
|
|
await logoutSuperAdmin();
|
|
router.replace("/login");
|
|
} catch (error) {
|
|
toast({ title: "Logout failed", description: String(error), variant: "danger" });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Logout
|
|
</Button>
|
|
{canManageSessions ? (
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">Visible sessions</div>
|
|
<div className="mt-2 text-2xl font-bold text-foreground">{sessions.length}</div>
|
|
</div>
|
|
) : null}
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">Session strategy</div>
|
|
<div className="mt-2 text-sm text-foreground">{runtime?.sessionStrategy ?? "httpOnly_cookies"}</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="xl:col-span-8">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Stored settings</CardTitle>
|
|
<Badge variant={canWriteSettings ? "warning" : "muted"}>
|
|
{canWriteSettings ? "Editable" : "Read only"}
|
|
</Badge>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<Input
|
|
disabled={!canWriteSettings}
|
|
placeholder="Site name"
|
|
value={settings?.siteName ?? ""}
|
|
onChange={(event) => updateField("siteName", event.target.value)}
|
|
/>
|
|
<Input
|
|
disabled={!canWriteSettings}
|
|
placeholder="PUBLIC_BASE_URL"
|
|
value={settings?.publicBaseUrl ?? ""}
|
|
onChange={(event) => updateField("publicBaseUrl", event.target.value)}
|
|
/>
|
|
</div>
|
|
<Input
|
|
disabled={!canWriteSettings}
|
|
placeholder="Dashboard API base URL"
|
|
value={settings?.dashboardApiBaseUrl ?? ""}
|
|
onChange={(event) => updateField("dashboardApiBaseUrl", event.target.value)}
|
|
/>
|
|
<Input
|
|
disabled={!canWriteSettings}
|
|
placeholder="CORS origins comma separated"
|
|
value={(settings?.corsOrigins ?? []).join(",")}
|
|
onChange={(event) =>
|
|
updateField(
|
|
"corsOrigins",
|
|
event.target.value
|
|
.split(",")
|
|
.map((value) => value.trim())
|
|
.filter(Boolean),
|
|
)
|
|
}
|
|
/>
|
|
<Textarea
|
|
disabled={!canWriteSettings}
|
|
placeholder="Operational notes"
|
|
value={settings?.notes ?? ""}
|
|
onChange={(event) => updateField("notes", event.target.value)}
|
|
/>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="flex items-center justify-between rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">Maintenance mode</div>
|
|
<div className="text-xs text-muted-foreground">Stored toggle, not an immediate runtime switch.</div>
|
|
</div>
|
|
<Switch
|
|
className={!canWriteSettings ? "pointer-events-none opacity-50" : undefined}
|
|
checked={Boolean(settings?.maintenanceMode)}
|
|
onCheckedChange={(value) => {
|
|
if (!canWriteSettings) return;
|
|
updateField("maintenanceMode", value);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">Email enabled</div>
|
|
<div className="text-xs text-muted-foreground">Mirrors stored email capability policy.</div>
|
|
</div>
|
|
<Switch
|
|
className={!canWriteSettings ? "pointer-events-none opacity-50" : undefined}
|
|
checked={Boolean(settings?.emailEnabled)}
|
|
onCheckedChange={(value) => {
|
|
if (!canWriteSettings) return;
|
|
updateField("emailEnabled", value);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">Marketplace auto approve</div>
|
|
<div className="text-xs text-muted-foreground">Stored policy for future moderation behavior.</div>
|
|
</div>
|
|
<Switch
|
|
className={!canWriteSettings ? "pointer-events-none opacity-50" : undefined}
|
|
checked={Boolean(settings?.marketplaceAutoApprove)}
|
|
onCheckedChange={(value) => {
|
|
if (!canWriteSettings) return;
|
|
updateField("marketplaceAutoApprove", value);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">Auto hide flagged content</div>
|
|
<div className="text-xs text-muted-foreground">Stored moderation policy for future use.</div>
|
|
</div>
|
|
<Switch
|
|
className={!canWriteSettings ? "pointer-events-none opacity-50" : undefined}
|
|
checked={Boolean(settings?.contentAutoHideFlagged)}
|
|
onCheckedChange={(value) => {
|
|
if (!canWriteSettings) return;
|
|
updateField("contentAutoHideFlagged", value);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
<section className="grid gap-4 xl:grid-cols-12">
|
|
<Card className="xl:col-span-5">
|
|
<CardHeader>
|
|
<CardTitle>Live runtime snapshot</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">API base</div>
|
|
<div className="mt-2 break-all text-sm text-foreground">{runtime?.publicBaseUrl ?? "-"}</div>
|
|
</div>
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">Global prefix</div>
|
|
<div className="mt-2 text-sm text-foreground">{runtime?.globalPrefix ?? "-"}</div>
|
|
</div>
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">Storage</div>
|
|
<div className="mt-2 text-sm text-foreground">
|
|
{runtime?.storageProvider ?? "-"} / {runtime?.storageBasePath ?? "-"}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="text-xs text-muted-foreground">Infrastructure</div>
|
|
<div className="mt-2 text-sm text-foreground">
|
|
queue={String(runtime?.queueEnabled ?? false)} / redis={String(runtime?.redisEnabled ?? false)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="xl:col-span-7">
|
|
<CardHeader>
|
|
<CardTitle>Settings history</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{historyItems.map((item) => (
|
|
<div key={item._id} className="rounded-xl border border-border/70 bg-secondary/20 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-sm font-medium text-foreground">{item.updatedBy}</div>
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{formatDateTime(item.createdAt)} - {(item.changedFields ?? []).join(", ") || "no fields"}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={!canWriteSettings}
|
|
onClick={async () => {
|
|
try {
|
|
const restored = await restoreSuperAdminSettingsHistory(item._id);
|
|
setSettingsResponse(restored);
|
|
const history = await getSuperAdminSettingsHistory({ page: 1, limit: 8, sortOrder: "desc" });
|
|
setHistoryItems(history.items ?? []);
|
|
toast({ title: "Version restored", description: item._id, variant: "warning" });
|
|
} catch (error) {
|
|
toast({ title: "Restore failed", description: String(error), variant: "danger" });
|
|
}
|
|
}}
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
Restore
|
|
</Button>
|
|
</div>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{(item.changedFields ?? []).map((field) => (
|
|
<Badge key={field} variant="muted">
|
|
{field}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|