admin/tool-evaluator
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): full app + docs localization (de/en)
Build & Push Docker Image / build (push) Successful in 2m33s
Details

Browse Source 
- translate remaining pages/components (admin, analytics, redundancy,
  trash, compare, browse, watchlist, admin tools tab, category combobox,
  theme toggle, tool preview card, tool-new/edit) to t() calls
- locales: 453 keys each, parity verified
- docs: bilingual handbook + release notes via *.en.md variants,
  language-aware docs.tsx (markdown paths, nav titles, search index),
  LanguageSwitcher in docs header
- generate-docs: emit per-locale handbook/release/search output,
  localized index.json fields (fileEn/titleEn), en-aware snapshots
This commit is contained in:
opencode
2026-08-04 08:35:05 +02:00
parent a65e2eb92c
commit 3de59ccaaf
77 changed files with 3786 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/toolrate/src/pages/admin.tsx
+72 -71
View File
@@ -29,8 +29,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Users, ScrollText, ShieldAlert, Plus, Pencil, Trash2, Clock, AlertTriangle, Wrench, Server } from "lucide-react";
import { format } from "date-fns";
import { AdminToolsTab } from "@/components/admin-tools-tab";
import { useTranslation } from "react-i18next";
export default function Admin() {
const { t } = useTranslation();
const [, setLocation] = useLocation();
const { user, isAdmin, isLoading: authLoading } = useAuth();
const { toast } = useToast();
@@ -68,9 +70,9 @@ export default function Admin() {
<Layout>
<div className="flex flex-col items-center justify-center py-20 gap-4">
<ShieldAlert className="w-12 h-12 text-muted-foreground" />
<h2 className="text-2xl font-bold">Admin Access Required</h2>
<p className="text-muted-foreground">You need admin rights to view this page.</p>
<Button variant="outline" onClick={() => setLocation("/")}>Go Home</Button>
<h2 className="text-2xl font-bold">{t("admin.accessRequired")}</h2>
<p className="text-muted-foreground">{t("admin.accessRequiredSub")}</p>
<Button variant="outline" onClick={() => setLocation("/")}>{t("admin.goHome")}</Button>
</div>
</Layout>
);
@@ -82,7 +84,7 @@ export default function Admin() {
{ data: { username: newUsername, password: newPassword, email: newEmail || undefined, role: newRole, tier: newTier } },
{
onSuccess: () => {
toast({ title: "User created", description: `${newUsername} has been created.` });
toast({ title: t("admin.toastUserCreated"), description: t("admin.toastUserCreatedSub", { username: newUsername }) });
queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
setCreateOpen(false);
setNewUsername("");
@@ -91,7 +93,7 @@ export default function Admin() {
setNewRole("user");
},
onError: (err) => {
toast({ title: "Failed to create user", description: err.data?.error ?? err.message, variant: "destructive" });
toast({ title: t("admin.toastUserCreateFailed"), description: err.data?.error ?? err.message, variant: "destructive" });
},
},
);
@@ -103,12 +105,12 @@ export default function Admin() {
{ id: editUser.id, data: { role: editUser.role as "admin" | "user", tier: editUser.tier as "free" | "premium" | "enterprise" } },
{
onSuccess: () => {
toast({ title: "User updated" });
toast({ title: t("admin.toastUserUpdated") });
queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
setEditUser(null);
},
onError: (err) => {
toast({ title: "Failed to update user", description: err.data?.error ?? err.message, variant: "destructive" });
toast({ title: t("admin.toastUserUpdateFailed"), description: err.data?.error ?? err.message, variant: "destructive" });
},
},
);
@@ -117,18 +119,18 @@ export default function Admin() {
const handleSetUserPassword = () => {
if (!editUser || !editPassword) return;
if (editPassword.length < 6) {
toast({ title: "Password too short", description: "Minimum 6 characters.", variant: "destructive" });
toast({ title: t("admin.toastPwTooShort"), description: t("admin.toastPwTooShortSub"), variant: "destructive" });
return;
}
setUserPassword.mutate(
{ id: editUser.id, data: { password: editPassword } },
{
onSuccess: () => {
toast({ title: "Password updated", description: `Password for ${editUser.username} has been set.` });
toast({ title: t("admin.toastPwUpdated"), description: t("admin.toastPwUpdatedSub", { username: editUser.username }) });
setEditPassword("");
},
onError: (err) => {
toast({ title: "Failed to set password", description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
toast({ title: t("admin.toastPwSetFailed"), description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
},
},
);
@@ -140,12 +142,12 @@ export default function Admin() {
{ id: deleteConfirm.id },
{
onSuccess: () => {
toast({ title: "User deleted", description: `${deleteConfirm.username} has been removed.` });
toast({ title: t("admin.toastUserDeleted"), description: t("admin.toastUserDeletedSub", { username: deleteConfirm.username }) });
queryClient.invalidateQueries({ queryKey: getListUsersQueryKey() });
setDeleteConfirm(null);
},
onError: (err) => {
toast({ title: "Failed to delete user", description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
toast({ title: t("admin.toastUserDeleteFailed"), description: (err.data as { error?: string } | null)?.error ?? err.message, variant: "destructive" });
},
},
);
@@ -163,11 +165,11 @@ export default function Admin() {
<div>
<div className="flex items-start justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight mb-2">Admin Panel</h1>
<p className="text-muted-foreground">Manage users and review system changes.</p>
<h1 className="text-3xl font-bold tracking-tight mb-2">{t("admin.panel")}</h1>
<p className="text-muted-foreground">{t("admin.panelSub")}</p>
</div>
<Button asChild variant="outline" size="sm" className="gap-2">
<Link href="/admin/redundancy"><AlertTriangle className="w-4 h-4" /> Redundancy Dashboard</Link>
<Link href="/admin/redundancy"><AlertTriangle className="w-4 h-4" /> {t("admin.redundancyDashboard")}</Link>
</Button>
</div>
</div>
@@ -175,16 +177,16 @@ export default function Admin() {
<Tabs defaultValue="users">
<TabsList className="mb-4">
<TabsTrigger value="users" className="gap-2">
<Users className="w-4 h-4" /> Users
<Users className="w-4 h-4" /> {t("admin.tabUsers")}
</TabsTrigger>
<TabsTrigger value="tools" className="gap-2">
<Wrench className="w-4 h-4" /> Tools
<Wrench className="w-4 h-4" /> {t("admin.tabTools")}
</TabsTrigger>
<TabsTrigger value="audit" className="gap-2">
<ScrollText className="w-4 h-4" /> Audit Log
<ScrollText className="w-4 h-4" /> {t("admin.tabAudit")}
</TabsTrigger>
<TabsTrigger value="system" className="gap-2">
<Server className="w-4 h-4" /> System
<Server className="w-4 h-4" /> {t("admin.tabSystem")}
</TabsTrigger>
</TabsList>
@@ -192,11 +194,11 @@ export default function Admin() {
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>Local Users</CardTitle>
<CardDescription>Manage accounts for local authentication.</CardDescription>
<CardTitle>{t("admin.localUsers")}</CardTitle>
<CardDescription>{t("admin.localUsersSub")}</CardDescription>
</div>
<Button size="sm" onClick={() => setCreateOpen(true)}>
<Plus className="w-4 h-4 mr-2" /> Add User
<Plus className="w-4 h-4 mr-2" /> {t("admin.addUser")}
</Button>
</CardHeader>
<CardContent>
@@ -248,7 +250,7 @@ export default function Admin() {
</div>
))}
{(!users || users.length === 0) && (
<p className="text-sm text-muted-foreground py-4 text-center">No users yet.</p>
<p className="text-sm text-muted-foreground py-4 text-center">{t("admin.noUsersYet")}</p>
)}
</div>
)}
@@ -263,8 +265,8 @@ export default function Admin() {
<TabsContent value="audit">
<Card>
<CardHeader>
<CardTitle>Audit Log</CardTitle>
<CardDescription>All create, update and delete operations tracked by the system.</CardDescription>
<CardTitle>{t("admin.auditLog")}</CardTitle>
<CardDescription>{t("admin.auditLogSub")}</CardDescription>
</CardHeader>
<CardContent>
{loadingLogs ? (
@@ -289,8 +291,7 @@ export default function Admin() {
</span>
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<span>by <span className="font-medium text-foreground">{log.username}</span></span>
{log.changes && (
<span>{t("admin.by")} <span className="font-medium text-foreground">{log.username}</span></span> {log.changes && (
<span className="truncate max-w-[400px] font-mono bg-muted px-1.5 py-0.5 rounded text-[11px]">
{log.changes.length > 120 ? log.changes.slice(0, 120) + "…" : log.changes}
</span>
@@ -299,7 +300,7 @@ export default function Admin() {
</div>
))}
{(!auditLogs || auditLogs.length === 0) && (
<p className="text-sm text-muted-foreground py-4 text-center">No audit entries yet.</p>
<p className="text-sm text-muted-foreground py-4 text-center">{t("admin.noAuditEntries")}</p>
)}
</div>
)}
@@ -310,17 +311,17 @@ export default function Admin() {
<TabsContent value="system">
<Card>
<CardHeader>
<CardTitle>System</CardTitle>
<CardDescription>Build information of the currently live deployment.</CardDescription>
<CardTitle>{t("admin.system")}</CardTitle>
<CardDescription>{t("admin.systemSub")}</CardDescription>
</CardHeader>
<CardContent>
<div className="divide-y">
<div className="flex items-center justify-between py-3">
<span className="text-sm text-muted-foreground">Version</span>
<span className="text-sm text-muted-foreground">{t("admin.version")}</span>
<span className="text-sm font-medium">{versionInfo?.version || "dev"}</span>
</div>
<div className="flex items-center justify-between py-3">
<span className="text-sm text-muted-foreground">Commit</span>
<span className="text-sm text-muted-foreground">{t("admin.commit")}</span>
{versionInfo?.commitSha ? (
<a
href={`https://git.kubebase.de/admin/tool-evaluator/commit/${versionInfo.commitSha}`}
@@ -336,17 +337,17 @@ export default function Admin() {
)}
</div>
<div className="flex items-center justify-between py-3">
<span className="text-sm text-muted-foreground">Build date</span>
<span className="text-sm text-muted-foreground">{t("admin.buildDate")}</span>
<span className="text-sm">
{versionInfo?.buildDate ? format(new Date(versionInfo.buildDate), "dd.MM.yyyy HH:mm") : "—"}
</span>
</div>
<div className="flex items-center justify-between py-3">
<span className="text-sm text-muted-foreground">Trash retention</span>
<span className="text-sm text-muted-foreground">{t("admin.trashRetention")}</span>
<span className="text-sm">
{(versionInfo?.trashRetentionDays ?? 0) > 0
? `${versionInfo?.trashRetentionDays} days`
: "Keep forever"}
? `${versionInfo?.trashRetentionDays} ${t("admin.days")}`
: t("admin.keepForever")}
</span>
</div>
</div>
@@ -359,51 +360,51 @@ export default function Admin() {
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Create New User</DialogTitle>
<DialogTitle>{t("admin.createNewUser")}</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="space-y-2">
<Label>Username</Label>
<Input value={newUsername} onChange={(e) => setNewUsername(e.target.value)} placeholder="username" />
<Label>{t("admin.username")}</Label>
<Input value={newUsername} onChange={(e) => setNewUsername(e.target.value)} placeholder={t("admin.usernamePlaceholder")} />
</div>
<div className="space-y-2">
<Label>Password</Label>
<PasswordInput value={newPassword} onChange={(e) => setNewPassword(e.target.value)} placeholder="min. 6 characters" />
<Label>{t("admin.password")}</Label>
<PasswordInput value={newPassword} onChange={(e) => setNewPassword(e.target.value)} placeholder={t("admin.minPasswordPlaceholder")} />
</div>
<div className="space-y-2">
<Label>Email (Optional)</Label>
<Input type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} placeholder="user@example.com" />
<Label>{t("admin.emailOptional")}</Label>
<Input type="email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} placeholder={t("admin.emailPlaceholder")} />
</div>
<div className="space-y-2">
<Label>Role</Label>
<Label>{t("admin.role")}</Label>
<Select value={newRole} onValueChange={(v) => setNewRole(v as "admin" | "user")}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
<SelectItem value="user">{t("admin.roleUser")}</SelectItem>
<SelectItem value="admin">{t("admin.roleAdmin")}</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Plan</Label>
<Label>{t("admin.plan")}</Label>
<Select value={newTier} onValueChange={(v) => setNewTier(v as "free" | "premium" | "enterprise")}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="free">Free</SelectItem>
<SelectItem value="premium">Premium</SelectItem>
<SelectItem value="enterprise">Enterprise</SelectItem>
<SelectItem value="free">{t("admin.planFree")}</SelectItem>
<SelectItem value="premium">{t("admin.planPremium")}</SelectItem>
<SelectItem value="enterprise">{t("admin.planEnterprise")}</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
<Button variant="outline" onClick={() => setCreateOpen(false)}>{t("common.cancel")}</Button>
<Button onClick={handleCreateUser} disabled={createUser.isPending || !newUsername || !newPassword}>
{createUser.isPending ? "Creating…" : "Create User"}
{createUser.isPending ? t("admin.creating") : t("admin.createUser")}
</Button>
</DialogFooter>
</DialogContent>
@@ -412,11 +413,11 @@ export default function Admin() {
<Dialog open={!!editUser} onOpenChange={(open) => { if (!open) { setEditUser(null); setEditPassword(""); } }}>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Edit User — {editUser?.username}</DialogTitle>
<DialogTitle>{t("admin.editUser", { username: editUser?.username })}</DialogTitle>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="space-y-2">
<Label>Role</Label>
<Label>{t("admin.role")}</Label>
<Select
value={editUser?.role || "user"}
onValueChange={(v) => setEditUser(editUser ? { ...editUser, role: v } : null)}
@@ -425,13 +426,13 @@ export default function Admin() {
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
<SelectItem value="user">{t("admin.roleUser")}</SelectItem>
<SelectItem value="admin">{t("admin.roleAdmin")}</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Plan</Label>
<Label>{t("admin.plan")}</Label>
<Select
value={editUser?.tier || "free"}
onValueChange={(v) => setEditUser(editUser ? { ...editUser, tier: v } : null)}
@@ -440,36 +441,36 @@ export default function Admin() {
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="free">Free</SelectItem>
<SelectItem value="premium">Premium</SelectItem>
<SelectItem value="enterprise">Enterprise</SelectItem>
<SelectItem value="free">{t("admin.planFree")}</SelectItem>
<SelectItem value="premium">{t("admin.planPremium")}</SelectItem>
<SelectItem value="enterprise">{t("admin.planEnterprise")}</SelectItem>
</SelectContent>
</Select>
</div>
{editUser?.authProvider !== "oidc" ? (
<div className="space-y-2 border-t pt-4">
<Label>Set Password</Label>
<Label>{t("admin.setPassword")}</Label>
<PasswordInput
value={editPassword}
onChange={(e) => setEditPassword(e.target.value)}
placeholder="min. 6 characters"
placeholder={t("admin.minPasswordPlaceholder")}
data-testid="input-set-password"
/>
<p className="text-xs text-muted-foreground">Resets the user's password immediately.</p>
<p className="text-xs text-muted-foreground">{t("admin.resetsPassword")}</p>
</div>
) : (
<div className="space-y-2 border-t pt-4 text-sm text-muted-foreground">
Password is managed by the identity provider (Keycloak). Reset it there.
{t("admin.idpManaged")}
</div>
)}
</div>
<DialogFooter className="flex-col sm:flex-row sm:justify-end gap-2">
<Button variant="outline" onClick={() => { setEditUser(null); setEditPassword(""); }}>Cancel</Button>
<Button variant="outline" onClick={() => { setEditUser(null); setEditPassword(""); }}>{t("common.cancel")}</Button>
<Button
onClick={handleUpdateUser}
disabled={updateUser.isPending}
>
Save
{t("common.save")}
</Button>
{editUser?.authProvider !== "oidc" && (
<Button
@@ -477,7 +478,7 @@ export default function Admin() {
onClick={handleSetUserPassword}
disabled={setUserPassword.isPending || !editPassword}
>
{setUserPassword.isPending ? "Setting…" : "Set Password"}
{setUserPassword.isPending ? t("admin.setting") : t("admin.setPassword")}
</Button>
)}
</DialogFooter>
@@ -487,15 +488,15 @@ export default function Admin() {
<Dialog open={!!deleteConfirm} onOpenChange={(open) => !open && setDeleteConfirm(null)}>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Delete User</DialogTitle>
<DialogTitle>{t("admin.deleteUser")}</DialogTitle>
</DialogHeader>
<p className="text-sm text-muted-foreground py-2">
Are you sure you want to delete <span className="font-medium text-foreground">{deleteConfirm?.username}</span>? This cannot be undone.
{t("admin.deleteUserConfirm", { username: deleteConfirm?.username })}
</p>
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteConfirm(null)}>Cancel</Button>
<Button variant="outline" onClick={() => setDeleteConfirm(null)}>{t("common.cancel")}</Button>
<Button variant="destructive" onClick={handleDeleteUser} disabled={deleteUser.isPending}>
{deleteUser.isPending ? "Deleting…" : "Delete"}
{deleteUser.isPending ? t("detail.deleting") : t("common.delete")}
</Button>
</DialogFooter>
</DialogContent>