kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

프론트엔드 UI/UX를 전면 개편

Browse Source
This commit is contained in:
조찬영
2026-02-20 17:56:53 +09:00
parent 2ec2653bfb
commit 919bcd27e8
18 changed files with 1092 additions and 736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
adminfront/src/features/user-groups/routes/GlobalUserGroupListPage.tsx
View File

@@ -1,141 +0,0 @@
import { useQuery } from "@tanstack/react-query";
import { Building2, Plus, Users } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "../../../components/ui/card";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../../../components/ui/table";
import { fetchGroups, fetchTenants } from "../../../lib/adminApi";
export default function GlobalUserGroupListPage() {
const { data: tenantList, isLoading: isTenantsLoading } = useQuery({
queryKey: ["admin-tenants"],
queryFn: () => fetchTenants(100, 0),
});
if (isTenantsLoading)
return <div className="p-8">Loading tenants and groups...</div>;
return (
<div className="space-y-8">
<header className="flex items-start justify-between">
<div className="space-y-1">
<h2 className="text-3xl font-bold tracking-tight">User Groups</h2>
<p className="text-muted-foreground">
모든 테넌트의 유저 그룹을 관리합니다. 권한 상속의 주체가 되는 그룹을
설정하세요.
</p>
</div>
</header>
<div className="grid gap-6">
{tenantList?.items.map((tenant) => (
<TenantGroupCard key={tenant.id} tenant={tenant} />
))}
</div>
</div>
);
}
function TenantGroupCard({ tenant }: { tenant: any }) {
const { data: groups, isLoading } = useQuery({
queryKey: ["tenant-user-groups", tenant.id],
queryFn: () => fetchGroups(tenant.id),
});
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<div className="space-y-1">
<CardTitle className="text-xl flex items-center gap-2">
<Building2 size={20} className="text-muted-foreground" />
{tenant.name}
<Badge variant="outline" className="ml-2">
{tenant.slug}
</Badge>
</CardTitle>
<CardDescription>
이 테넌트에 정의된 유저 그룹 목록입니다.
</CardDescription>
</div>
<Button size="sm" variant="outline" asChild>
<Link to={`/tenants/${tenant.id}/user-groups`}>
<Plus size={16} className="mr-2" />
그룹 관리
</Link>
</Button>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[250px]">그룹명</TableHead>
<TableHead>설명</TableHead>
<TableHead className="w-[100px]">멤버 수</TableHead>
<TableHead className="text-right">작업</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={4} className="text-center">
Loading...
</TableCell>
</TableRow>
) : groups?.length === 0 ? (
<TableRow>
<TableCell
colSpan={4}
className="text-center text-muted-foreground py-4"
>
등록된 유저 그룹이 없습니다.
</TableCell>
</TableRow>
) : (
groups?.map((group) => (
<TableRow key={group.id}>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<Users size={14} className="text-primary" />
<Link
to={`/tenants/${tenant.id}/user-groups/${group.id}`}
className="hover:underline"
>
{group.name}
</Link>
</div>
</TableCell>
<TableCell>{group.description || "-"}</TableCell>
<TableCell>{group.members?.length || 0} 명</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm" asChild>
<Link
to={`/tenants/${tenant.id}/user-groups/${group.id}`}
>
상세보기
</Link>
</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</CardContent>
</Card>
);
}

340
adminfront/src/features/user-groups/routes/TenantUserGroupsTab.tsx
View File

@@ -1,7 +1,9 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Plus, Trash2, Users } from "lucide-react";
import { useState } from "react";
import { Plus, Trash2, Upload, Users } from "lucide-react";
import { useRef, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { toast } from "sonner";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
Card,
@@ -29,14 +31,23 @@ import {
TableHeader,
TableRow,
} from "../../../components/ui/table";
import { createGroup, deleteGroup, fetchGroups } from "../../../lib/adminApi";
import {
createGroup,
deleteGroup,
fetchGroups,
importOrgChart,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
export function TenantUserGroupsTab() {
const { tenantId } = useParams<{ tenantId: string }>();
const queryClient = useQueryClient();
const fileInputRef = useRef<HTMLInputElement>(null);
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [newGroupName, setNewGroupName] = useState("");
const [newGroupDesc, setNewGroupDesc] = useState("");
const [newParentId, setNewParentId] = useState("");
const [newUnitType, setNewUnitType] = useState("");
const { data: groups, isLoading } = useQuery({
queryKey: ["tenant-user-groups", tenantId],
@@ -46,7 +57,12 @@ export function TenantUserGroupsTab() {
const createMutation = useMutation({
mutationFn: () =>
createGroup(tenantId!, { name: newGroupName, description: newGroupDesc }),
createGroup(tenantId!, {
name: newGroupName,
description: newGroupDesc,
parentId: newParentId || undefined,
unitType: newUnitType || undefined,
}),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ["tenant-user-groups", tenantId],
@@ -54,10 +70,25 @@ export function TenantUserGroupsTab() {
setIsCreateOpen(false);
setNewGroupName("");
setNewGroupDesc("");
alert("User group created successfully");
setNewParentId("");
setNewUnitType("");
toast.success(t("msg.admin.groups.list.create_success", "조직 단위가 생성되었습니다."));
},
onError: (error: any) => {
alert(error.message || "Failed to create user group");
toast.error(t("msg.admin.groups.list.create_error", { error: error.message }));
},
});
const importMutation = useMutation({
mutationFn: (file: File) => importOrgChart(tenantId!, file),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ["tenant-user-groups", tenantId],
});
toast.success(t("msg.admin.groups.list.import_success", "조직도가 임포트되었습니다."));
},
onError: (error: any) => {
toast.error(t("msg.admin.groups.list.import_error", { error: error.message }));
},
});
@@ -67,137 +98,204 @@ export function TenantUserGroupsTab() {
queryClient.invalidateQueries({
queryKey: ["tenant-user-groups", tenantId],
});
alert("User group deleted successfully");
toast.success(t("msg.admin.groups.list.delete_success", "조직 단위가 삭제되었습니다."));
},
});
if (isLoading) return <div>Loading user groups...</div>;
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) {
importMutation.mutate(file);
}
};
if (isLoading) return <div className="p-8 text-center text-muted-foreground">{t("msg.admin.groups.list.loading", "로딩 중...")}</div>;
return (
<div className="space-y-6">
<Card>
<div className="space-y-6 mt-6">
<Card className="border-none shadow-sm bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>User Groups</CardTitle>
<div className="space-y-1">
<CardTitle className="text-2xl font-bold">
{t("ui.admin.groups.list.title", "조직 관리")}
</CardTitle>
<CardDescription>
Manage user groups within this tenant for collective permission
assignment.
{t("msg.admin.groups.list.subtitle", "이 테넌트에 정의된 조직 단위들을 관리합니다.")}
</CardDescription>
</div>
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
<DialogTrigger asChild>
<Button size="sm">
<Plus size={16} className="mr-2" />
Create Group
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Create User Group</DialogTitle>
<DialogDescription>
Create a new group to manage users collectively.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="name">Group Name</Label>
<Input
id="name"
placeholder="e.g. Developers, Project A Managers"
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Input
id="description"
placeholder="Brief description of the group"
value={newGroupDesc}
onChange={(e) => setNewGroupDesc(e.target.value)}
/>
</div>
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setIsCreateOpen(false)}
>
Cancel
<div className="flex gap-2">
<input
type="file"
ref={fileInputRef}
className="hidden"
accept=".csv"
onChange={handleFileChange}
/>
<Button
variant="outline"
size="sm"
onClick={() => fileInputRef.current?.click()}
disabled={importMutation.isPending}
>
{importMutation.isPending ? (
t("ui.common.requesting", "요청 중...")
) : (
<>
<Upload size={16} className="mr-2" />
{t("ui.admin.groups.import_csv", "CSV 임포트")}
</>
)}
</Button>
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
<DialogTrigger asChild>
<Button size="sm">
<Plus size={16} className="mr-2" />
{t("ui.admin.groups.add_unit", "조직 추가")}
</Button>
<Button
onClick={() => createMutation.mutate()}
disabled={!newGroupName || createMutation.isPending}
>
{createMutation.isPending ? "Creating..." : "Create Group"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{t("ui.admin.groups.create.title", "새 조직 단위 생성")}</DialogTitle>
<DialogDescription>
{t("ui.admin.groups.create.description", "부서나 팀과 같은 새로운 조직 단위를 추가합니다.")}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="name">{t("ui.admin.groups.form.name_label", "조직명")}</Label>
<Input
id="name"
placeholder={t("ui.admin.groups.form.name_placeholder", "예: 개발팀")}
value={newGroupName}
onChange={(e) => setNewGroupName(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label htmlFor="parentId">{t("ui.admin.groups.form.parent_label", "상위 조직")}</Label>
<select
id="parentId"
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
value={newParentId}
onChange={(e) => setNewParentId(e.target.value)}
>
<option value="">{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}</option>
{groups?.map((g) => (
<option key={g.id} value={g.id}>
{g.name}
</option>
))}
</select>
</div>
<div className="space-y-2">
<Label htmlFor="unitType">{t("ui.admin.groups.form.unit_level_label", "조직 레벨")}</Label>
<Input
id="unitType"
placeholder={t("ui.admin.groups.form.unit_level_placeholder", "예: 본부, 팀")}
value={newUnitType}
onChange={(e) => setNewUnitType(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label htmlFor="description">{t("ui.admin.groups.form.desc_label", "설명")}</Label>
<Input
id="description"
placeholder={t("ui.admin.groups.form.desc_placeholder", "설명을 입력하세요.")}
value={newGroupDesc}
onChange={(e) => setNewGroupDesc(e.target.value)}
/>
</div>
</div>
<DialogFooter>
<Button
variant="outline"
onClick={() => setIsCreateOpen(false)}
>
{t("ui.common.cancel", "취소")}
</Button>
<Button
onClick={() => createMutation.mutate()}
disabled={!newGroupName || createMutation.isPending}
>
{createMutation.isPending ? t("ui.common.requesting", "생성 중...") : t("ui.admin.groups.form.submit", "생성하기")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Description</TableHead>
<TableHead>Created At</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{groups?.length === 0 ? (
<div className="rounded-md border border-border overflow-hidden">
<Table>
<TableHeader className="bg-muted/30">
<TableRow>
<TableCell
colSpan={4}
className="text-center py-8 text-muted-foreground"
>
No user groups found for this tenant.
</TableCell>
<TableHead className="font-bold">{t("ui.admin.groups.table.name", "이름")}</TableHead>
<TableHead className="font-bold">{t("ui.admin.groups.table.level", "레벨")}</TableHead>
<TableHead className="font-bold">{t("ui.admin.groups.form.desc_label", "설명")}</TableHead>
<TableHead className="font-bold">{t("ui.admin.groups.table.created_at", "생성일")}</TableHead>
<TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
</TableRow>
) : (
groups?.map((group) => (
<TableRow key={group.id}>
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<Users size={16} className="text-muted-foreground" />
<Link
to={`/tenants/${tenantId}/user-groups/${group.id}`}
className="hover:underline text-primary"
>
{group.name}
</Link>
</div>
</TableCell>
<TableCell>{group.description || "-"}</TableCell>
<TableCell>
{group.createdAt
? new Date(group.createdAt).toLocaleDateString()
: "-"}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive hover:text-destructive hover:bg-destructive/10"
onClick={() => {
if (
confirm(
"Are you sure you want to delete this group?",
)
) {
deleteMutation.mutate(group.id);
}
}}
>
<Trash2 size={16} />
</Button>
</TableHeader>
<TableBody>
{groups?.length === 0 ? (
<TableRow>
<TableCell
colSpan={5}
className="text-center py-12 text-muted-foreground"
>
{t("msg.admin.groups.list.empty", "테넌트에 등록된 조직 단위가 없습니다.")}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
) : (
groups?.map((group) => (
<TableRow key={group.id} className="hover:bg-muted/30 transition-colors">
<TableCell className="font-medium">
<div className="flex items-center gap-2">
<Users size={16} className="text-muted-foreground" />
<Link
to={`/tenants/${tenantId}/organization/${group.id}`}
className="hover:underline text-primary"
>
{group.name}
</Link>
</div>
</TableCell>
<TableCell>
{group.unitType ? (
<Badge variant="secondary" className="font-normal">{group.unitType}</Badge>
) : (
"-"
)}
</TableCell>
<TableCell className="max-w-[200px] truncate">{group.description || "-"}</TableCell>
<TableCell className="text-muted-foreground text-sm">
{group.createdAt
? new Date(group.createdAt).toLocaleDateString()
: "-"}
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive hover:bg-destructive/10"
onClick={() => {
if (
confirm(
t("msg.admin.groups.list.delete_confirm", "정말로 삭제하시겠습니까?")
)
) {
deleteMutation.mutate(group.id);
}
}}
>
<Trash2 size={16} />
</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
</div>

311
adminfront/src/features/user-groups/routes/UserGroupDetailPage.tsx
View File

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft, Plus, Shield, Trash2, UserPlus, Users } from "lucide-react";
import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { toast } from "sonner";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
@@ -47,6 +48,7 @@ import {
removeGroupMember,
removeGroupRole,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
export function UserGroupDetailPage() {
const { tenantId, id } = useParams<{ tenantId: string; id: string }>();
@@ -99,10 +101,10 @@ export function UserGroupDetailPage() {
queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
setIsAddMemberOpen(false);
setSelectedUserId("");
alert("Member added successfully");
toast.success(t("msg.admin.groups.members.add_success", "구성원이 추가되었습니다."));
},
onError: (error: any) => {
alert(error.message || "Failed to add member");
toast.error(error.message || t("err.common.unknown", "오류가 발생했습니다."));
},
});
@@ -110,7 +112,7 @@ export function UserGroupDetailPage() {
mutationFn: (userId: string) => removeGroupMember(tenantId!, id!, userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-detail", id] });
alert("Member removed successfully");
toast.success(t("msg.admin.groups.members.remove_success", "구성원이 제외되었습니다."));
},
});
@@ -120,10 +122,10 @@ export function UserGroupDetailPage() {
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
setIsAddRoleOpen(false);
alert(`Role '${selectedRelation}' assigned successfully`);
toast.success(t("msg.admin.groups.roles.assign_success", "역할이 할당되었습니다."));
},
onError: (error: any) => {
alert(error.message || "Failed to assign role");
toast.error(error.message || t("err.common.unknown", "오류가 발생했습니다."));
},
});
@@ -132,7 +134,7 @@ export function UserGroupDetailPage() {
removeGroupRole(tenantId!, id!, role.targetTenantId, role.relation),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["user-group-roles", id] });
alert("Role removed successfully");
toast.success(t("msg.admin.groups.roles.remove_success", "역할이 회수되었습니다."));
},
});
@@ -141,7 +143,7 @@ export function UserGroupDetailPage() {
<div className="flex items-center justify-center p-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
<span className="ml-3 text-muted-foreground">
Loading group details...
{t("msg.common.loading", "로딩 중...")}
</span>
</div>
);
@@ -150,32 +152,25 @@ export function UserGroupDetailPage() {
return (
<div className="p-8 text-center space-y-4">
<h3 className="text-xl font-semibold text-destructive">
Could not load group
조직 단위를 불러올 수 없습니다
</h3>
<div className="p-4 bg-red-50 text-red-700 rounded-md text-left text-sm font-mono overflow-auto max-w-xl mx-auto border border-red-100">
<div className="p-4 bg-destructive/10 text-destructive rounded-md text-left text-sm font-mono overflow-auto max-w-xl mx-auto border border-destructive/20">
<p>
Error:{" "}
{(error as any)?.response?.data?.error ||
(error as any)?.message ||
"Not found"}
</p>
<p className="mt-2 text-red-500 opacity-70">
Path: /admin/tenants/{tenantId}/user-groups/{id}
</p>
</div>
<p className="text-muted-foreground pt-2">
The group ID might be invalid or you don't have sufficient
permissions.
</p>
<Button variant="outline" onClick={() => window.location.reload()}>
Retry
{t("ui.common.retry", "다시 시도")}
</Button>
<div className="pt-4 border-t">
<Link
to={`/tenants/${tenantId}/user-groups`}
to={`/tenants/${tenantId}/organization`}
className="text-primary hover:underline text-sm"
>
Return to Group List
{t("ui.admin.groups.detail.breadcrumb_org", "조직 관리 목록으로 돌아가기")}
</Link>
</div>
</div>
@@ -185,72 +180,84 @@ export function UserGroupDetailPage() {
<div className="space-y-8">
<header className="flex flex-wrap items-start justify-between gap-4">
<div className="space-y-2">
<div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Link
to={`/tenants/${tenantId}`}
className="inline-flex items-center gap-2 hover:text-foreground transition-colors"
>
<ArrowLeft size={14} />
Tenant Detail
{t("ui.admin.groups.detail.breadcrumb_tenant", "테넌트 상세")}
</Link>
<span>/</span>
<span className="text-foreground">User Group</span>
<Link
to={`/tenants/${tenantId}/organization`}
className="hover:text-foreground transition-colors"
>
{t("ui.admin.groups.detail.breadcrumb_org", "조직 관리")}
</Link>
<span>/</span>
<span className="text-foreground">{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}</span>
</div>
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg">
<Users size={24} className="text-primary" />
</div>
<h2 className="text-3xl font-semibold">{currentGroup.name}</h2>
{currentGroup.unitType && (
<Badge variant="secondary" className="h-6 font-normal">
{currentGroup.unitType}
</Badge>
)}
</div>
<p className="text-sm text-[var(--color-muted)]">
{currentGroup.description || "No description provided."}
<p className="text-sm text-muted-foreground">
{currentGroup.description || t("msg.common.no_description", "설명이 없습니다.")}
</p>
</div>
<div className="flex gap-2">
<Badge variant="outline">User Group</Badge>
<Badge variant="muted">Tenant: {tenantId?.split("-")[0]}...</Badge>
<Badge variant="outline" className="font-normal">{t("ui.admin.groups.detail.breadcrumb_unit", "조직 단위")}</Badge>
<Badge variant="muted" className="font-normal">ID: {id?.split("-")[0]}...</Badge>
</div>
</header>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Members Management */}
<Card>
<Card className="border-none shadow-sm bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>Members</CardTitle>
<CardDescription>Manage users in this group.</CardDescription>
<CardTitle>{t("ui.admin.groups.detail.members_title", "구성원 관리")}</CardTitle>
<CardDescription>{t("ui.admin.groups.detail.members_subtitle", "이 조직에 소속된 사용자를 관리합니다.")}</CardDescription>
</div>
<Dialog open={isAddMemberOpen} onOpenChange={setIsAddMemberOpen}>
<DialogTrigger asChild>
<Button size="sm" variant="outline">
<UserPlus size={16} className="mr-2" />
Add Member
{t("ui.common.add", "추가")}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add Member</DialogTitle>
<DialogTitle>{t("ui.admin.groups.detail.members_title", "구성원 추가")}</DialogTitle>
<DialogDescription>
Select a user to add to this group.
{t("ui.admin.groups.detail.members_subtitle", "사용자를 검색하여 조직 구성원으로 추가합니다.")}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Search User</Label>
<Label>{t("ui.common.search", "사용자 검색")}</Label>
<Input
placeholder="Search by email or name..."
placeholder={t("ui.admin.users.list.search_placeholder", "이메일 또는 이름으로 검색...")}
value={searchUser}
onChange={(e) => setSearchUser(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label>Select User</Label>
<Label>{t("ui.common.select", "사용자 선택")}</Label>
<Select
value={selectedUserId}
onValueChange={setSelectedUserId}
>
<SelectTrigger>
<SelectValue placeholder="Choose a user" />
<SelectValue placeholder={t("ui.common.select_placeholder", "사용자를 선택하세요")} />
</SelectTrigger>
<SelectContent>
{userList?.items.map((user) => (
@@ -267,98 +274,108 @@ export function UserGroupDetailPage() {
variant="outline"
onClick={() => setIsAddMemberOpen(false)}
>
Cancel
{t("ui.common.cancel", "취소")}
</Button>
<Button
onClick={() => addMemberMutation.mutate(selectedUserId)}
disabled={!selectedUserId || addMemberMutation.isPending}
>
Add
{t("ui.common.add", "추가")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>User</TableHead>
<TableHead className="text-right">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{!currentGroup.members || currentGroup.members.length === 0 ? (
<div className="rounded-md border border-border overflow-hidden">
<Table>
<TableHeader className="bg-muted/30">
<TableRow>
<TableCell
colSpan={2}
className="text-center py-4 text-muted-foreground"
>
No members in this group.
</TableCell>
<TableHead className="font-bold">{t("ui.admin.users.list.table.name_email", "사용자")}</TableHead>
<TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
</TableRow>
) : (
currentGroup.members.map((member) => (
<TableRow key={member.id}>
<TableCell>
<div>
<p className="font-medium">{member.name}</p>
<p className="text-xs text-muted-foreground">
{member.email}
</p>
</div>
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive"
onClick={() => removeMemberMutation.mutate(member.id)}
>
<Trash2 size={14} />
</Button>
</TableHeader>
<TableBody>
{!currentGroup.members || currentGroup.members.length === 0 ? (
<TableRow>
<TableCell
colSpan={2}
className="text-center py-8 text-muted-foreground"
>
{t("msg.admin.groups.members.empty", "구성원이 없습니다.")}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
) : (
currentGroup.members.map((member) => (
<TableRow key={member.id} className="hover:bg-muted/30 transition-colors">
<TableCell>
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
{member.name.charAt(0)}
</div>
<div>
<p className="font-medium text-sm">{member.name}</p>
<p className="text-xs text-muted-foreground">
{member.email}
</p>
</div>
</div>
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm(t("msg.admin.groups.members.remove_confirm", { name: member.name }))) {
removeMemberMutation.mutate(member.id);
}
}}
>
<Trash2 size={14} />
</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
{/* Roles/Permissions Management (Keto Based) */}
<Card>
<Card className="border-none shadow-sm bg-[var(--color-panel)]">
<CardHeader className="flex flex-row items-center justify-between">
<div>
<CardTitle>Permissions</CardTitle>
<CardTitle>{t("ui.admin.groups.detail.permissions_title", "권한 관리")}</CardTitle>
<CardDescription>
Tenant roles assigned to this group.
{t("ui.admin.groups.detail.permissions_subtitle", "이 조직이 다른 테넌트에 가지는 역할을 정의합니다.")}
</CardDescription>
</div>
<Dialog open={isAddRoleOpen} onOpenChange={setIsAddRoleOpen}>
<DialogTrigger asChild>
<Button size="sm" variant="outline">
<Shield size={16} className="mr-2" />
Assign Role
{t("ui.common.assign", "할당")}
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Assign Tenant Role</DialogTitle>
<DialogTitle>{t("ui.admin.groups.detail.permissions_title", "테넌트 역할 할당")}</DialogTitle>
<DialogDescription>
Members of this group will inherit this role on the target
tenant.
{t("msg.admin.groups.roles.description", "이 조직의 구성원들이 대상 테넌트에서 상속받을 역할을 선택하세요.")}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label>Target Tenant</Label>
<Label>{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}</Label>
<Select
value={selectedTargetTenantId}
onValueChange={setSelectedTargetTenantId}
>
<SelectTrigger>
<SelectValue placeholder="Select target tenant" />
<SelectValue placeholder={t("ui.admin.tenants.list.select_placeholder", "테넌트를 선택하세요")} />
</SelectTrigger>
<SelectContent>
{tenantList?.items.map((t) => (
@@ -370,7 +387,7 @@ export function UserGroupDetailPage() {
</Select>
</div>
<div className="space-y-2">
<Label>Role (Relation)</Label>
<Label>{t("ui.admin.users.detail.form.role", "역할 (Relation)")}</Label>
<Select
value={selectedRelation}
onValueChange={setSelectedRelation}
@@ -379,12 +396,12 @@ export function UserGroupDetailPage() {
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="view">View (Read-only)</SelectItem>
<SelectItem value="view">View (조회 권한)</SelectItem>
<SelectItem value="manage">
Manage (Read/Write)
Manage (운영 권한)
</SelectItem>
<SelectItem value="admins">
Admin (Full Control)
Admin (모든 권한)
</SelectItem>
</SelectContent>
</Select>
@@ -395,7 +412,7 @@ export function UserGroupDetailPage() {
variant="outline"
onClick={() => setIsAddRoleOpen(false)}
>
Cancel
{t("ui.common.cancel", "취소")}
</Button>
<Button
onClick={() => assignRoleMutation.mutate()}
@@ -403,70 +420,74 @@ export function UserGroupDetailPage() {
!selectedTargetTenantId || assignRoleMutation.isPending
}
>
Assign
{t("ui.common.assign", "할당")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Target Tenant</TableHead>
<TableHead>Role</TableHead>
<TableHead className="text-right">Action</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isRolesLoading ? (
<div className="rounded-md border border-border overflow-hidden">
<Table>
<TableHeader className="bg-muted/30">
<TableRow>
<TableCell colSpan={3} className="text-center">
Loading...
</TableCell>
<TableHead className="font-bold">{t("ui.admin.users.detail.form.tenant", "대상 테넌트")}</TableHead>
<TableHead className="font-bold">{t("ui.admin.users.detail.form.role", "역할")}</TableHead>
<TableHead className="text-right font-bold">{t("ui.admin.groups.table.actions", "액션")}</TableHead>
</TableRow>
) : !groupRoles || groupRoles.length === 0 ? (
<TableRow>
<TableCell
colSpan={3}
className="text-center py-4 text-muted-foreground"
>
No roles assigned.
</TableCell>
</TableRow>
) : (
groupRoles.map((role, idx) => (
<TableRow key={`${role.tenantId}-${role.relation}-${idx}`}>
<TableCell>
<div className="font-medium">
{role.tenantName || role.tenantId}
</div>
</TableCell>
<TableCell>
<Badge variant="outline" className="capitalize">
{role.relation}
</Badge>
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive"
onClick={() =>
removeRoleMutation.mutate({
targetTenantId: role.tenantId,
relation: role.relation,
})
}
>
<Trash2 size={14} />
</Button>
</TableHeader>
<TableBody>
{isRolesLoading ? (
<TableRow>
<TableCell colSpan={3} className="text-center py-8">
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary mx-auto"></div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
) : !groupRoles || groupRoles.length === 0 ? (
<TableRow>
<TableCell
colSpan={3}
className="text-center py-8 text-muted-foreground"
>
{t("msg.admin.groups.roles.empty", "할당된 역할이 없습니다.")}
</TableCell>
</TableRow>
) : (
groupRoles.map((role, idx) => (
<TableRow key={`${role.tenantId}-${role.relation}-${idx}`} className="hover:bg-muted/30 transition-colors">
<TableCell>
<div className="font-medium text-sm">
{role.tenantName || role.tenantId}
</div>
</TableCell>
<TableCell>
<Badge variant="outline" className="capitalize font-normal">
{role.relation}
</Badge>
</TableCell>
<TableCell className="text-right">
<Button
variant="ghost"
size="icon"
className="text-destructive hover:bg-destructive/10"
onClick={() => {
if (confirm(t("msg.admin.groups.roles.remove_confirm"))) {
removeRoleMutation.mutate({
targetTenantId: role.tenantId,
relation: role.relation,
});
}
}}
>
<Trash2 size={14} />
</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
</div>