547 lines
23 KiB
TypeScript
547 lines
23 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { apiFetch, createEventSourceFor } from "./api";
|
|
import { downloadFile } from "./export";
|
|
import { downloadExport } from "./exportHistory";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type Tenant = {
|
|
id: string;
|
|
name: string;
|
|
isActive: boolean;
|
|
_count?: { users: number; mailboxAccounts: number; jobs: number };
|
|
};
|
|
|
|
type User = {
|
|
id: string;
|
|
email: string;
|
|
role: string;
|
|
isActive: boolean;
|
|
tenant?: { id: string; name: string } | null;
|
|
};
|
|
|
|
type Account = {
|
|
id: string;
|
|
email: string;
|
|
provider: string;
|
|
isActive: boolean;
|
|
hasOauth?: boolean;
|
|
oauthExpiresAt?: string | null;
|
|
oauthLastCheckedAt?: string | null;
|
|
oauthLastErrorCode?: string | null;
|
|
tenant?: { id: string; name: string } | null;
|
|
};
|
|
|
|
type Job = {
|
|
id: string;
|
|
status: string;
|
|
createdAt: string;
|
|
tenant?: { id: string; name: string } | null;
|
|
mailboxAccount?: { id: string; email: string } | null;
|
|
};
|
|
|
|
type Props = {
|
|
token: string;
|
|
onImpersonate: (token: string) => void;
|
|
};
|
|
|
|
export default function AdminPanel({ token, onImpersonate }: Props) {
|
|
const { t } = useTranslation();
|
|
const [tenants, setTenants] = useState<Tenant[]>([]);
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [accounts, setAccounts] = useState<Account[]>([]);
|
|
const [jobs, setJobs] = useState<Job[]>([]);
|
|
const [activeTab, setActiveTab] = useState<"tenants" | "users" | "accounts" | "jobs">("tenants");
|
|
const [resetUserId, setResetUserId] = useState<string | null>(null);
|
|
const [resetPassword, setResetPassword] = useState("");
|
|
const [exportTenantId, setExportTenantId] = useState<string | null>(null);
|
|
const [exportStatus, setExportStatus] = useState<"idle" | "loading" | "done" | "failed">("idle");
|
|
const [exportJobId, setExportJobId] = useState<string | null>(null);
|
|
const [exportHistory, setExportHistory] = useState<{ id: string; status: string; expiresAt?: string | null; createdAt?: string; progress?: number }[]>([]);
|
|
const [exportFilter, setExportFilter] = useState<"all" | "active" | "done" | "failed" | "expired">("all");
|
|
const [exportScope, setExportScope] = useState<"all" | "users" | "accounts" | "jobs" | "rules">("all");
|
|
const [exportFormat, setExportFormat] = useState<"json" | "csv" | "zip">("json");
|
|
const [tenantSort, setTenantSort] = useState<"recent" | "oldest" | "name">("recent");
|
|
const [userSort, setUserSort] = useState<"recent" | "oldest" | "email">("recent");
|
|
const [accountSort, setAccountSort] = useState<"recent" | "oldest" | "email">("recent");
|
|
const [jobSort, setJobSort] = useState<"recent" | "oldest" | "status">("recent");
|
|
|
|
const loadAll = async () => {
|
|
const tenantData = await apiFetch("/admin/tenants", {}, token);
|
|
setTenants(tenantData.tenants ?? []);
|
|
|
|
const usersData = await apiFetch("/admin/users", {}, token);
|
|
setUsers(usersData.users ?? []);
|
|
|
|
const accountsData = await apiFetch("/admin/accounts", {}, token);
|
|
setAccounts(accountsData.accounts ?? []);
|
|
|
|
const jobsData = await apiFetch("/admin/jobs", {}, token);
|
|
setJobs(jobsData.jobs ?? []);
|
|
const exportsData = await apiFetch("/admin/exports", {}, token);
|
|
setExportHistory(exportsData.exports ?? []);
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadAll().catch(() => undefined);
|
|
}, []);
|
|
|
|
const toggleTenant = async (tenant: Tenant) => {
|
|
const result = await apiFetch(
|
|
`/admin/tenants/${tenant.id}`,
|
|
{ method: "PUT", body: JSON.stringify({ isActive: !tenant.isActive }) },
|
|
token
|
|
);
|
|
setTenants((prev) => prev.map((item) => (item.id === tenant.id ? result.tenant : item)));
|
|
};
|
|
|
|
const exportTenant = async (tenant: Tenant) => {
|
|
setExportTenantId(tenant.id);
|
|
setExportStatus("loading");
|
|
if (exportFormat === "json") {
|
|
const result = await apiFetch(`/admin/tenants/${tenant.id}/export?scope=${exportScope}`, {}, token);
|
|
const blob = new Blob([JSON.stringify(result, null, 2)], { type: "application/json" });
|
|
downloadFile(blob, `tenant-${tenant.id}.json`);
|
|
} else if (exportFormat === "csv") {
|
|
await exportTenantCsv(tenant);
|
|
return;
|
|
} else {
|
|
const result = await apiFetch(`/admin/tenants/${tenant.id}/export?format=zip&scope=${exportScope}`, {}, token);
|
|
setExportJobId(result.jobId);
|
|
setExportHistory((prev) => [{ id: result.jobId, status: "QUEUED" }, ...prev]);
|
|
const source = createEventSourceFor(`exports/${result.jobId}`, token);
|
|
source.onmessage = async (event) => {
|
|
const data = JSON.parse(event.data);
|
|
setExportHistory((prev) =>
|
|
prev.map((item) => (item.id === data.id ? { ...item, status: data.status, expiresAt: data.expiresAt, progress: data.progress } : item))
|
|
);
|
|
if (data.status === "DONE") {
|
|
const response = await downloadExport(token, result.jobId);
|
|
const blob = await response.blob();
|
|
downloadFile(blob, `tenant-${tenant.id}.zip`);
|
|
setExportStatus("done");
|
|
source.close();
|
|
setTimeout(() => setExportStatus("idle"), 1500);
|
|
} else if (data.status === "FAILED") {
|
|
setExportStatus("failed");
|
|
source.close();
|
|
}
|
|
};
|
|
return;
|
|
}
|
|
setExportStatus("done");
|
|
setTimeout(() => setExportStatus("idle"), 1500);
|
|
};
|
|
|
|
const exportTenantCsv = async (tenant: Tenant) => {
|
|
setExportTenantId(tenant.id);
|
|
setExportStatus("loading");
|
|
const base = import.meta.env.VITE_API_URL ?? "http://localhost:8000";
|
|
const response = await fetch(`${base}/admin/tenants/${tenant.id}/export?format=csv&scope=${exportScope}`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
});
|
|
const text = await response.text();
|
|
const blob = new Blob([text], { type: "text/csv" });
|
|
downloadFile(blob, `tenant-${tenant.id}.csv`);
|
|
setExportStatus("done");
|
|
setTimeout(() => setExportStatus("idle"), 1500);
|
|
};
|
|
|
|
const deleteTenant = async (tenant: Tenant) => {
|
|
if (!confirm(t("adminDeleteConfirm", { name: tenant.name }))) return;
|
|
await apiFetch(`/admin/tenants/${tenant.id}`, { method: "DELETE" }, token);
|
|
setTenants((prev) => prev.filter((item) => item.id !== tenant.id));
|
|
};
|
|
|
|
const toggleUser = async (user: User) => {
|
|
const result = await apiFetch(
|
|
`/admin/users/${user.id}`,
|
|
{ method: "PUT", body: JSON.stringify({ isActive: !user.isActive }) },
|
|
token
|
|
);
|
|
setUsers((prev) => prev.map((item) => (item.id === user.id ? result.user : item)));
|
|
};
|
|
|
|
const toggleAccount = async (account: Account) => {
|
|
const result = await apiFetch(
|
|
`/admin/accounts/${account.id}`,
|
|
{ method: "PUT", body: JSON.stringify({ isActive: !account.isActive }) },
|
|
token
|
|
);
|
|
setAccounts((prev) => prev.map((item) => (item.id === account.id ? result.account : item)));
|
|
};
|
|
|
|
const setRole = async (user: User, role: "USER" | "ADMIN") => {
|
|
const result = await apiFetch(
|
|
`/admin/users/${user.id}/role`,
|
|
{ method: "PUT", body: JSON.stringify({ role }) },
|
|
token
|
|
);
|
|
setUsers((prev) => prev.map((item) => (item.id === user.id ? result.user : item)));
|
|
};
|
|
|
|
const impersonate = async (user: User) => {
|
|
const result = await apiFetch(`/admin/impersonate/${user.id}`, { method: "POST" }, token);
|
|
onImpersonate(result.token);
|
|
};
|
|
|
|
const resetPasswordForUser = async () => {
|
|
if (!resetUserId || resetPassword.length < 10) return;
|
|
await apiFetch(`/admin/users/${resetUserId}/reset`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ password: resetPassword })
|
|
}, token);
|
|
setResetUserId(null);
|
|
setResetPassword("");
|
|
};
|
|
|
|
const cancelJob = async (job: Job) => {
|
|
await apiFetch(`/admin/jobs/${job.id}/cancel`, { method: "POST" }, token);
|
|
setJobs((prev) => prev.map((item) => (item.id === job.id ? { ...item, status: "CANCELED" } : item)));
|
|
};
|
|
|
|
const retryJob = async (job: Job) => {
|
|
await apiFetch(`/admin/jobs/${job.id}/retry`, { method: "POST" }, token);
|
|
loadAll().catch(() => undefined);
|
|
};
|
|
|
|
const sortBy = <T,>(items: T[], mode: string, getKey: (item: T) => string) => {
|
|
const sorted = [...items];
|
|
if (mode === "name" || mode === "email" || mode === "status") {
|
|
sorted.sort((a, b) => getKey(a).localeCompare(getKey(b)));
|
|
} else if (mode === "oldest") {
|
|
sorted.reverse();
|
|
}
|
|
return sorted;
|
|
};
|
|
|
|
const tenantsSorted = sortBy(tenants, tenantSort, (t) => t.name);
|
|
const usersSorted = sortBy(users, userSort, (u) => u.email);
|
|
const accountsSorted = sortBy(accounts, accountSort, (a) => a.email);
|
|
const jobsSorted = sortBy(jobs, jobSort, (j) => j.status);
|
|
const exportsFiltered = exportHistory.filter((item) => {
|
|
const expired = item.expiresAt ? new Date(item.expiresAt) < new Date() : false;
|
|
if (exportFilter === "expired") return expired;
|
|
if (exportFilter === "active") return item.status === "QUEUED" || item.status === "RUNNING";
|
|
if (exportFilter === "done") return item.status === "DONE";
|
|
if (exportFilter === "failed") return item.status === "FAILED";
|
|
return true;
|
|
});
|
|
const mapJobStatus = (status: string) => {
|
|
switch (status) {
|
|
case "RUNNING":
|
|
return t("statusRunning");
|
|
case "QUEUED":
|
|
return t("statusQueued");
|
|
case "SUCCEEDED":
|
|
return t("statusSucceeded");
|
|
case "FAILED":
|
|
return t("statusFailed");
|
|
case "CANCELED":
|
|
return t("statusCanceled");
|
|
default:
|
|
return status;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="admin-panel">
|
|
<div className="admin-tabs">
|
|
{(["tenants", "users", "accounts", "jobs"] as const).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
className={activeTab === tab ? "active" : ""}
|
|
onClick={() => setActiveTab(tab)}
|
|
>
|
|
{t(`admin${tab.charAt(0).toUpperCase()}${tab.slice(1)}`)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === "tenants" && (
|
|
<div className="card">
|
|
<h3>{t("adminTenants")}</h3>
|
|
<div className="filter-row">
|
|
<label>
|
|
{t("adminSortLabel")}
|
|
<select value={tenantSort} onChange={(event) => setTenantSort(event.target.value as typeof tenantSort)}>
|
|
<option value="recent">{t("adminSortRecent")}</option>
|
|
<option value="oldest">{t("adminSortOldest")}</option>
|
|
<option value="name">{t("adminSortName")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div className="export-panel">
|
|
<h4>{t("adminTenantExport")}</h4>
|
|
<p className="status-note">{t("adminExportHint")}</p>
|
|
<label className="toggle">
|
|
<span>{t("adminExportScope")}</span>
|
|
<select value={exportScope} onChange={(event) => setExportScope(event.target.value as typeof exportScope)}>
|
|
<option value="all">{t("adminExportAll")}</option>
|
|
<option value="users">{t("adminExportUsers")}</option>
|
|
<option value="accounts">{t("adminExportAccounts")}</option>
|
|
<option value="jobs">{t("adminExportJobs")}</option>
|
|
<option value="rules">{t("adminExportRules")}</option>
|
|
</select>
|
|
</label>
|
|
<label className="toggle">
|
|
<span>{t("adminExportFormat")}</span>
|
|
<select value={exportFormat} onChange={(event) => setExportFormat(event.target.value as typeof exportFormat)}>
|
|
<option value="json">{t("exportFormatJson")}</option>
|
|
<option value="csv">{t("exportFormatCsv")}</option>
|
|
<option value="zip">{t("exportFormatZip")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{tenantsSorted.map((tenant) => (
|
|
<div key={tenant.id} className="list-item">
|
|
<div>
|
|
<div className="badge">
|
|
<strong>{tenant.name}</strong>
|
|
<span className={`status-badge ${tenant.isActive ? "" : "missing"}`}>
|
|
{tenant.isActive ? t("adminActive") : t("adminInactive")}
|
|
</span>
|
|
</div>
|
|
<p>
|
|
{t("countUsers", { count: tenant._count?.users ?? 0 })} ·{" "}
|
|
{t("countAccounts", { count: tenant._count?.mailboxAccounts ?? 0 })} ·{" "}
|
|
{t("countJobs", { count: tenant._count?.jobs ?? 0 })}
|
|
</p>
|
|
</div>
|
|
<div className="inline-actions">
|
|
<button className="ghost" onClick={() => exportTenant(tenant)}>{t("adminExportStart")}</button>
|
|
<button className="ghost" onClick={() => toggleTenant(tenant)}>
|
|
{tenant.isActive ? t("adminDisable") : t("adminEnable")}
|
|
</button>
|
|
<button className="ghost" onClick={() => deleteTenant(tenant)}>{t("adminDelete")}</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{exportTenantId && (
|
|
<p className="status-note">
|
|
{exportStatus === "loading"
|
|
? t("adminExporting")
|
|
: exportStatus === "done"
|
|
? t("adminExportDone")
|
|
: exportStatus === "failed"
|
|
? t("adminExportFailed")
|
|
: ""}
|
|
</p>
|
|
)}
|
|
{exportHistory.length > 0 && (
|
|
<div className="export-history">
|
|
<h4>{t("exportHistory")}</h4>
|
|
<div className="filter-row">
|
|
<label>
|
|
{t("adminSortLabel")}
|
|
<select value={exportFilter} onChange={(event) => setExportFilter(event.target.value as typeof exportFilter)}>
|
|
<option value="all">{t("adminExportAll")}</option>
|
|
<option value="active">{t("exportStatusRunning")}</option>
|
|
<option value="done">{t("exportStatusDone")}</option>
|
|
<option value="failed">{t("exportStatusFailed")}</option>
|
|
<option value="expired">{t("exportStatusExpired")}</option>
|
|
</select>
|
|
</label>
|
|
<button
|
|
className="ghost"
|
|
onClick={async () => {
|
|
await apiFetch("/admin/exports/purge", { method: "POST" }, token);
|
|
loadAll().catch(() => undefined);
|
|
}}
|
|
>
|
|
{t("adminExportPurge")}
|
|
</button>
|
|
</div>
|
|
{exportsFiltered.map((item) => (
|
|
<div key={item.id} className="list-item">
|
|
<div>
|
|
<strong>{item.id.slice(0, 6)}</strong>
|
|
<p>
|
|
{item.expiresAt && new Date(item.expiresAt) < new Date()
|
|
? t("exportStatusExpired")
|
|
: item.status === "QUEUED"
|
|
? t("exportStatusQueued")
|
|
: item.status === "RUNNING"
|
|
? t("exportStatusRunning")
|
|
: item.status === "DONE"
|
|
? t("exportStatusDone")
|
|
: t("exportStatusFailed")}
|
|
</p>
|
|
{item.progress !== undefined && (
|
|
<p>{t("exportProgress", { progress: item.progress })}</p>
|
|
)}
|
|
</div>
|
|
<div className="inline-actions">
|
|
<span>
|
|
{item.createdAt ? new Date(item.createdAt).toLocaleString() : "-"} ·{" "}
|
|
{t("exportExpires")}: {item.expiresAt ? new Date(item.expiresAt).toLocaleString() : "-"}
|
|
</span>
|
|
<button
|
|
className="ghost"
|
|
disabled={item.status !== "DONE" || (item.expiresAt ? new Date(item.expiresAt) < new Date() : false)}
|
|
onClick={async () => {
|
|
const response = await downloadExport(token, item.id);
|
|
if (response.ok) {
|
|
const blob = await response.blob();
|
|
downloadFile(blob, `export-${item.id}.zip`);
|
|
}
|
|
}}
|
|
>
|
|
{t("exportDownload")}
|
|
</button>
|
|
<button
|
|
className="ghost"
|
|
onClick={async () => {
|
|
await apiFetch(`/admin/exports/${item.id}`, { method: "DELETE" }, token);
|
|
loadAll().catch(() => undefined);
|
|
}}
|
|
>
|
|
{t("delete")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "users" && (
|
|
<div className="card">
|
|
<h3>{t("adminUsers")}</h3>
|
|
<div className="filter-row">
|
|
<label>
|
|
{t("adminSortLabel")}
|
|
<select value={userSort} onChange={(event) => setUserSort(event.target.value as typeof userSort)}>
|
|
<option value="recent">{t("adminSortRecent")}</option>
|
|
<option value="oldest">{t("adminSortOldest")}</option>
|
|
<option value="email">{t("adminSortEmail")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{usersSorted.map((user) => (
|
|
<div key={user.id} className="list-item">
|
|
<div>
|
|
<div className="badge">
|
|
<strong>{user.email}</strong>
|
|
<span className={`status-badge ${user.isActive ? "" : "missing"}`}>
|
|
{user.isActive ? t("adminActive") : t("adminInactive")}
|
|
</span>
|
|
</div>
|
|
<p>{user.role} · {user.tenant?.name ?? "-"}</p>
|
|
</div>
|
|
<div className="inline-actions">
|
|
<button className="ghost" onClick={() => setRole(user, user.role === "ADMIN" ? "USER" : "ADMIN")}>
|
|
{user.role === "ADMIN" ? t("adminMakeUser") : t("adminMakeAdmin")}
|
|
</button>
|
|
<button className="ghost" onClick={() => toggleUser(user)}>
|
|
{user.isActive ? t("adminDisable") : t("adminEnable")}
|
|
</button>
|
|
<button className="ghost" onClick={() => impersonate(user)}>
|
|
{t("adminImpersonate")}
|
|
</button>
|
|
<button className="ghost" onClick={() => setResetUserId(user.id)}>
|
|
{t("adminResetPassword")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{resetUserId && (
|
|
<div className="admin-modal">
|
|
<div className="modal-content">
|
|
<h4>{t("adminResetTitle")}</h4>
|
|
<input
|
|
placeholder={t("adminResetPlaceholder")}
|
|
type="password"
|
|
value={resetPassword}
|
|
onChange={(event) => setResetPassword(event.target.value)}
|
|
/>
|
|
<div className="inline-actions">
|
|
<button className="ghost" onClick={() => setResetUserId(null)}>{t("adminCancel")}</button>
|
|
<button className="primary" onClick={resetPasswordForUser}>{t("adminConfirmReset")}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "accounts" && (
|
|
<div className="card">
|
|
<h3>{t("adminAccounts")}</h3>
|
|
<div className="filter-row">
|
|
<label>
|
|
{t("adminSortLabel")}
|
|
<select value={accountSort} onChange={(event) => setAccountSort(event.target.value as typeof accountSort)}>
|
|
<option value="recent">{t("adminSortRecent")}</option>
|
|
<option value="oldest">{t("adminSortOldest")}</option>
|
|
<option value="email">{t("adminSortEmail")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{accountsSorted.map((account) => (
|
|
<div key={account.id} className="list-item">
|
|
<div>
|
|
<div className="badge">
|
|
<strong>{account.email}</strong>
|
|
<span className={`status-badge ${account.isActive ? "" : "missing"}`}>
|
|
{account.isActive ? t("adminActive") : t("adminInactive")}
|
|
</span>
|
|
</div>
|
|
<p>{account.provider} · {account.tenant?.name ?? "-"}</p>
|
|
{account.hasOauth && (
|
|
<p className="status-note">
|
|
{t("statusLabel")}: {account.oauthLastErrorCode ? t("badgeUnhealthy") : t("badgeHealthy")} ·{" "}
|
|
{t("adminExpiresAt")}: {account.oauthExpiresAt ? new Date(account.oauthExpiresAt).toLocaleString() : t("oauthStatusUnknown")} ·{" "}
|
|
{t("adminLastConnected")}: {account.oauthLastCheckedAt ? new Date(account.oauthLastCheckedAt).toLocaleString() : t("oauthStatusUnknown")}
|
|
</p>
|
|
)}
|
|
{account.oauthLastErrorCode && (
|
|
<p className="status-note">
|
|
{account.oauthLastErrorCode === "invalid_grant"
|
|
? t("oauthErrorInvalidGrant")
|
|
: account.oauthLastErrorCode === "token_expired"
|
|
? t("oauthErrorExpired")
|
|
: t("oauthErrorUnknown")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button className="ghost" onClick={() => toggleAccount(account)}>
|
|
{account.isActive ? t("adminDisable") : t("adminEnable")}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === "jobs" && (
|
|
<div className="card">
|
|
<h3>{t("adminJobs")}</h3>
|
|
<div className="filter-row">
|
|
<label>
|
|
{t("adminSortLabel")}
|
|
<select value={jobSort} onChange={(event) => setJobSort(event.target.value as typeof jobSort)}>
|
|
<option value="recent">{t("adminSortRecent")}</option>
|
|
<option value="oldest">{t("adminSortOldest")}</option>
|
|
<option value="status">{t("adminSortStatus")}</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{jobsSorted.map((job) => (
|
|
<div key={job.id} className="list-item">
|
|
<div>
|
|
<strong>{mapJobStatus(job.status)}</strong>
|
|
<p>{job.tenant?.name ?? "-"} · {job.mailboxAccount?.email ?? "-"}</p>
|
|
</div>
|
|
<div className="inline-actions">
|
|
<button className="ghost" onClick={() => retryJob(job)}>{t("adminRetry")}</button>
|
|
<button className="ghost" onClick={() => cancelJob(job)}>{t("adminCancelJob")}</button>
|
|
<span>{new Date(job.createdAt).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|