80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { SettingsSection } from "@/components/workspace/settings/settings-section";
|
|
import { useAllUsers } from "@/core/auth/hooks";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
|
|
export function UserManagementPage() {
|
|
const { t } = useI18n();
|
|
const { data: users, isLoading, error } = useAllUsers(true);
|
|
|
|
return (
|
|
<div className="flex size-full min-h-0 flex-col gap-6 overflow-auto p-6">
|
|
<SettingsSection
|
|
title={t.adminUsers.title}
|
|
description={t.adminUsers.description}
|
|
>
|
|
{isLoading && (
|
|
<div className="flex items-center gap-2 text-muted-foreground py-8 justify-center">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
<span>{t.common.loading}</span>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="text-destructive text-sm py-4">
|
|
{String(error)}
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && !error && users && users.length === 0 && (
|
|
<div className="text-muted-foreground text-sm py-8 text-center">
|
|
{t.adminUsers.empty}
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && !error && users && users.length > 0 && (
|
|
<div className="rounded-md border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-muted/50">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.email}</th>
|
|
<th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.role}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.skillCount}</th>
|
|
<th className="text-right px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.agentCount}</th>
|
|
<th className="text-left px-4 py-3 font-medium text-muted-foreground">{t.adminUsers.userId}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map((user, i) => (
|
|
<tr
|
|
key={user.id}
|
|
className={i % 2 === 0 ? "bg-background" : "bg-muted/20"}
|
|
>
|
|
<td className="px-4 py-3">{user.email}</td>
|
|
<td className="px-4 py-3">
|
|
{user.system_role === "admin" ? (
|
|
<Badge variant="default">{t.adminUsers.roleAdmin}</Badge>
|
|
) : (
|
|
<Badge variant="secondary">{t.adminUsers.roleUser}</Badge>
|
|
)}
|
|
</td>
|
|
<td className="px-4 py-3 text-right tabular-nums">{user.skill_count}</td>
|
|
<td className="px-4 py-3 text-right tabular-nums">{user.agent_count}</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-muted-foreground truncate max-w-[160px]">
|
|
{user.id}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</SettingsSection>
|
|
</div>
|
|
);
|
|
}
|