forked from baron/baron-sso
682 lines
26 KiB
TypeScript
682 lines
26 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import { KeyRound, Plus, Search, ShieldCheck, X } from "lucide-react";
|
|
import { useDeferredValue, useMemo, useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { PageHeader } from "../../../../common/core/components/page";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
import { Input } from "../../components/ui/input";
|
|
import { Label } from "../../components/ui/label";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../components/ui/table";
|
|
import { Textarea } from "../../components/ui/textarea";
|
|
import { toast } from "../../components/ui/use-toast";
|
|
import {
|
|
createDeveloperGrant,
|
|
type DevAssignableUser,
|
|
fetchDeveloperGrants,
|
|
fetchDevUser,
|
|
fetchDevUsers,
|
|
revokeDeveloperGrant,
|
|
} from "../../lib/devApi";
|
|
import { t } from "../../lib/i18n";
|
|
import { resolveProfileRole } from "../../lib/role";
|
|
import { fetchMe } from "../auth/authApi";
|
|
import {
|
|
type DeveloperAccessPage,
|
|
developerAccessPagesToLabel,
|
|
getDeveloperAccessPageOptions,
|
|
normalizeDeveloperAccessPageSelection,
|
|
normalizeDeveloperAccessPages,
|
|
} from "../developer-access/developerAccessPages";
|
|
|
|
function formatUserLabel(user: DevAssignableUser) {
|
|
const primary = user.name.trim() || user.email.trim();
|
|
return `${primary} (${user.email.trim()})`;
|
|
}
|
|
|
|
export default function DeveloperGrantsPage() {
|
|
const auth = useAuth();
|
|
const queryClient = useQueryClient();
|
|
const hasAccessToken = Boolean(auth.user?.access_token);
|
|
const userProfile = auth.user?.profile as Record<string, unknown> | undefined;
|
|
const role = resolveProfileRole(userProfile);
|
|
|
|
const { data: me, isLoading: isLoadingMe } = useQuery({
|
|
queryKey: ["userMe"],
|
|
queryFn: fetchMe,
|
|
enabled: hasAccessToken,
|
|
});
|
|
const profileRole = me?.role?.trim() || role;
|
|
const isSuperAdmin = profileRole === "super_admin";
|
|
const developerAccessPageOptions = getDeveloperAccessPageOptions();
|
|
|
|
const [userSearch, setUserSearch] = useState("");
|
|
const deferredUserSearch = useDeferredValue(userSearch.trim());
|
|
const [selectedUser, setSelectedUser] = useState<DevAssignableUser | null>(
|
|
null,
|
|
);
|
|
const [selectedAccessPages, setSelectedAccessPages] = useState<
|
|
DeveloperAccessPage[]
|
|
>(["all"]);
|
|
const [grantNotes, setGrantNotes] = useState("");
|
|
const [adminNotes, setAdminNotes] = useState<Record<number, string>>({});
|
|
|
|
const { data: userSearchData, isFetching: isUserSearchLoading } = useQuery({
|
|
queryKey: ["developer-grant-users", deferredUserSearch],
|
|
queryFn: () => fetchDevUsers(deferredUserSearch, 10),
|
|
enabled:
|
|
hasAccessToken &&
|
|
isSuperAdmin &&
|
|
deferredUserSearch.length > 0 &&
|
|
selectedUser == null,
|
|
});
|
|
|
|
const { data: selectedUserDetail, isFetching: isSelectedUserDetailLoading } =
|
|
useQuery({
|
|
queryKey: ["developer-grant-user", selectedUser?.id],
|
|
queryFn: () => fetchDevUser(selectedUser?.id || ""),
|
|
enabled: hasAccessToken && isSuperAdmin && selectedUser != null,
|
|
});
|
|
|
|
const {
|
|
data: grants,
|
|
isLoading: isLoadingGrants,
|
|
error: grantsError,
|
|
} = useQuery({
|
|
queryKey: ["developer-grants"],
|
|
queryFn: () => fetchDeveloperGrants(),
|
|
enabled: hasAccessToken && isSuperAdmin,
|
|
});
|
|
|
|
const grantList = grants ?? [];
|
|
|
|
const filteredGrantedUsers = useMemo(() => {
|
|
return [...grantList].sort((a, b) => {
|
|
const tenantCompare = a.organization.localeCompare(b.organization);
|
|
if (tenantCompare !== 0) {
|
|
return tenantCompare;
|
|
}
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
}, [grantList]);
|
|
|
|
const createGrantMutation = useMutation({
|
|
mutationFn: createDeveloperGrant,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["developer-grants"] });
|
|
toast(
|
|
t(
|
|
"msg.dev.grants.create_success",
|
|
"개발자 권한이 직접 부여되었습니다.",
|
|
),
|
|
"success",
|
|
);
|
|
setSelectedUser(null);
|
|
setUserSearch("");
|
|
setSelectedAccessPages(["all"]);
|
|
setGrantNotes("");
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }> | Error) => {
|
|
toast(
|
|
(err as AxiosError<{ error?: string }>).response?.data?.error ||
|
|
(err as Error).message ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
"error",
|
|
);
|
|
},
|
|
});
|
|
|
|
const revokeGrantMutation = useMutation({
|
|
mutationFn: ({ id, adminNotes }: { id: number; adminNotes: string }) =>
|
|
revokeDeveloperGrant(id, adminNotes),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["developer-grants"] });
|
|
toast(
|
|
t("msg.dev.grants.revoke_success", "개발자 권한이 회수되었습니다."),
|
|
"success",
|
|
);
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }> | Error) => {
|
|
toast(
|
|
(err as AxiosError<{ error?: string }>).response?.data?.error ||
|
|
(err as Error).message ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
"error",
|
|
);
|
|
},
|
|
});
|
|
|
|
if (isLoadingMe) {
|
|
return (
|
|
<div className="p-8 text-center">
|
|
{t("ui.common.loading", "Loading...")}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isSuperAdmin) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
icon={<ShieldCheck size={20} />}
|
|
title={t("ui.dev.nav.developer_grants", "개발자 권한 부여")}
|
|
description={t(
|
|
"msg.dev.grants.forbidden_desc",
|
|
"이 화면은 super admin만 사용할 수 있습니다.",
|
|
)}
|
|
/>
|
|
<Card className="border-amber-500/30 bg-amber-500/10">
|
|
<CardContent className="p-4 text-sm text-foreground">
|
|
{t(
|
|
"msg.dev.grants.forbidden",
|
|
"개발자 권한 직접 부여는 super admin만 사용할 수 있습니다.",
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleGrant = () => {
|
|
if (!selectedUser) {
|
|
toast(
|
|
t("msg.dev.grants.user_required", "부여할 사용자를 선택해주세요."),
|
|
"error",
|
|
);
|
|
return;
|
|
}
|
|
const tenantId =
|
|
selectedUserDetail?.tenant?.id?.trim() ||
|
|
selectedUserDetail?.tenantSlug?.trim() ||
|
|
selectedUserDetail?.companyCode?.trim() ||
|
|
"";
|
|
|
|
createGrantMutation.mutate({
|
|
userId: selectedUser.id,
|
|
tenantId,
|
|
reason: grantNotes.trim() || "직접 부여",
|
|
adminNotes: grantNotes.trim(),
|
|
accessPages: normalizeDeveloperAccessPageSelection(selectedAccessPages),
|
|
});
|
|
};
|
|
|
|
const handleSelectUser = (user: DevAssignableUser) => {
|
|
setSelectedUser(user);
|
|
setUserSearch(formatUserLabel(user));
|
|
setSelectedAccessPages(["all"]);
|
|
};
|
|
|
|
const handleAccessPageToggle = (page: DeveloperAccessPage) => {
|
|
setSelectedAccessPages((current) => {
|
|
if (page === "all") {
|
|
return ["all"];
|
|
}
|
|
const withoutAll = current.filter((item) => item !== "all");
|
|
if (withoutAll.includes(page)) {
|
|
const next = withoutAll.filter((item) => item !== page);
|
|
return next.length > 0 ? next : ["all"];
|
|
}
|
|
return normalizeDeveloperAccessPageSelection([...withoutAll, page]);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<PageHeader
|
|
icon={<KeyRound size={20} />}
|
|
title={t("ui.dev.nav.developer_grants", "개발자 권한 부여")}
|
|
description={t(
|
|
"msg.dev.grants.description",
|
|
"사용자에게 개발자 권한을 직접 부여하고, 부여된 권한을 회수할 수 있습니다.",
|
|
)}
|
|
actions={
|
|
<Badge variant="muted">
|
|
{t("msg.dev.grants.count", "총 {{count}}건", {
|
|
count: filteredGrantedUsers.length,
|
|
})}
|
|
</Badge>
|
|
}
|
|
/>
|
|
|
|
<Card className="glass-panel">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">
|
|
{t("ui.dev.grants.form.title", "직접 부여")}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.grants.form.description",
|
|
"사용자를 선택하면 현재 소속 정보가 표시되고, 그 사용자에게 개발자 권한을 즉시 부여합니다.",
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-5">
|
|
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
|
|
<Card className="border-primary/10 bg-primary/5 shadow-sm">
|
|
<CardHeader className="space-y-1 pb-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<CardTitle className="text-base">
|
|
{t("ui.dev.grants.user_section", "사용자 선택")}
|
|
</CardTitle>
|
|
<Badge variant="outline">
|
|
{t("ui.dev.grants.input_section", "입력")}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.grants.user_section_description",
|
|
"검색어를 입력해 사용자를 선택합니다. 선택 전에는 다음 단계 정보가 비어 있습니다.",
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2 pt-0">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="user-search">
|
|
{t("ui.dev.grants.user", "사용자")}{" "}
|
|
<span className="text-destructive">*</span>
|
|
</Label>
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
id="user-search"
|
|
className="pl-10"
|
|
placeholder={t(
|
|
"ui.dev.grants.user_search_placeholder",
|
|
"이름 또는 이메일 검색...",
|
|
)}
|
|
value={userSearch}
|
|
onChange={(event) => {
|
|
setSelectedUser(null);
|
|
setUserSearch(event.target.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
{selectedUser && (
|
|
<p className="text-xs text-muted-foreground">
|
|
{t(
|
|
"msg.dev.grants.selected_user",
|
|
"선택된 사용자: {{user}}",
|
|
{ user: formatUserLabel(selectedUser) },
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{userSearch.trim() !== "" && selectedUser == null && (
|
|
<div className="mt-2 max-h-64 overflow-y-auto rounded-lg border border-border/70 bg-muted/20 shadow-sm">
|
|
{isUserSearchLoading ? (
|
|
<div className="px-3 py-3 text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.grants.search_loading",
|
|
"사용자를 찾는 중입니다...",
|
|
)}
|
|
</div>
|
|
) : (userSearchData?.items ?? []).length > 0 ? (
|
|
(userSearchData?.items ?? []).map((user) => (
|
|
<button
|
|
key={user.id}
|
|
type="button"
|
|
className="flex w-full flex-col gap-1 border-b border-border/40 px-3 py-2 text-left last:border-b-0 hover:bg-primary/5"
|
|
onMouseDown={(event) => {
|
|
event.preventDefault();
|
|
handleSelectUser(user);
|
|
}}
|
|
>
|
|
<span className="text-sm font-semibold">
|
|
{user.name || user.email}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{user.email}
|
|
{user.loginId ? ` · ${user.loginId}` : ""}
|
|
</span>
|
|
</button>
|
|
))
|
|
) : (
|
|
<div className="px-3 py-4 text-center text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.dev.grants.search_empty",
|
|
"검색 결과가 없습니다.",
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-dashed bg-muted/20 shadow-none">
|
|
<CardHeader className="space-y-1 pb-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<CardTitle className="text-base">
|
|
{t("ui.dev.grants.selected_info", "선택된 사용자 정보")}
|
|
</CardTitle>
|
|
<Badge variant="secondary">
|
|
{t("ui.dev.grants.read_only", "읽기 전용")}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.grants.selected_info_description",
|
|
"선택된 사용자의 소속, 이메일, 전화번호를 확인합니다.",
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 pt-0">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="tenant-readonly">
|
|
{t("ui.dev.grants.tenant", "소속")}
|
|
</Label>
|
|
<Input
|
|
id="tenant-readonly"
|
|
className="border-dashed bg-background/70 text-foreground/90 shadow-none focus-visible:border-input focus-visible:ring-0 focus-visible:ring-offset-0"
|
|
value={
|
|
selectedUserDetail?.tenant?.name ||
|
|
selectedUserDetail?.tenantSlug ||
|
|
selectedUserDetail?.companyCode ||
|
|
(selectedUser && !isSelectedUserDetailLoading
|
|
? t("ui.common.na", "없음")
|
|
: "")
|
|
}
|
|
readOnly
|
|
placeholder={
|
|
selectedUser
|
|
? isSelectedUserDetailLoading
|
|
? t("msg.common.loading", "Loading...")
|
|
: t(
|
|
"msg.dev.grants.tenant_missing",
|
|
"선택한 사용자의 테넌트 정보가 없습니다.",
|
|
)
|
|
: t(
|
|
"msg.dev.grants.user_required",
|
|
"부여할 사용자를 선택해주세요.",
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email-readonly">
|
|
{t("ui.dev.grants.email", "이메일")}
|
|
</Label>
|
|
<Input
|
|
id="email-readonly"
|
|
className="border-dashed bg-background/70 text-foreground/90 shadow-none focus-visible:border-input focus-visible:ring-0 focus-visible:ring-offset-0"
|
|
value={
|
|
selectedUserDetail?.email || selectedUser?.email || ""
|
|
}
|
|
readOnly
|
|
placeholder={t(
|
|
"msg.dev.grants.user_required",
|
|
"부여할 사용자를 선택해주세요.",
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone-readonly">
|
|
{t("ui.dev.grants.phone", "전화번호")}
|
|
</Label>
|
|
<Input
|
|
id="phone-readonly"
|
|
className="border-dashed bg-background/70 text-foreground/90 shadow-none focus-visible:border-input focus-visible:ring-0 focus-visible:ring-offset-0"
|
|
value={selectedUserDetail?.phone || ""}
|
|
readOnly
|
|
placeholder={t(
|
|
"msg.dev.grants.phone_missing",
|
|
"등록된 전화번호가 없습니다.",
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>
|
|
{t("ui.dev.grants.pages", "권한 페이지")}{" "}
|
|
<span className="text-destructive">*</span>
|
|
</Label>
|
|
<div className="grid gap-2 rounded-lg border border-border/60 bg-muted/20 p-3">
|
|
{developerAccessPageOptions.map((option) => {
|
|
const checked =
|
|
option.value === "all"
|
|
? selectedAccessPages.includes("all")
|
|
: selectedAccessPages.includes(option.value);
|
|
return (
|
|
<label
|
|
key={option.value}
|
|
className="flex items-center gap-3 rounded-md px-2 py-1.5 text-sm hover:bg-background/60"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() =>
|
|
handleAccessPageToggle(option.value)
|
|
}
|
|
/>
|
|
<span className="font-medium">{option.label}</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t(
|
|
"msg.dev.grants.pages_hint",
|
|
"전체를 선택하면 개요, 연동 앱 추가, 감사로그가 모두 포함됩니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="border-border/70 bg-background/80 shadow-sm">
|
|
<CardHeader className="space-y-1 pb-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<CardTitle className="text-base">
|
|
{t("ui.dev.grants.admin_notes", "부여 사유")}
|
|
</CardTitle>
|
|
</div>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.grants.admin_notes_description",
|
|
"직접 부여의 근거를 간단히 남겨 두면 추후 회수와 검토에 도움이 됩니다.",
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 pt-0">
|
|
<Textarea
|
|
id="admin-notes"
|
|
value={grantNotes}
|
|
onChange={(event) => setGrantNotes(event.target.value)}
|
|
className="min-h-[132px] bg-background"
|
|
placeholder={t(
|
|
"msg.dev.grants.admin_notes_placeholder",
|
|
"예: 테스트 환경 확인 후 권한 부여",
|
|
)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
{t(
|
|
"msg.dev.grants.admin_notes_hint",
|
|
"회수는 목록의 회수 버튼으로 처리합니다.",
|
|
)}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleGrant}
|
|
disabled={createGrantMutation.isPending}
|
|
className="gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{createGrantMutation.isPending
|
|
? t("ui.common.submitting", "제출 중...")
|
|
: t("ui.dev.grants.grant", "직접 부여")}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="glass-panel">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">
|
|
{t("ui.dev.grants.list.title", "부여된 권한")}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.dev.grants.list.description",
|
|
"현재 부여된 개발자 권한 목록입니다.",
|
|
)}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isLoadingGrants ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">
|
|
{t("msg.common.loading", "Loading...")}
|
|
</div>
|
|
) : grantsError ? (
|
|
<div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
|
|
{t(
|
|
"msg.dev.grants.load_error",
|
|
"개발자 권한 목록을 불러오지 못했습니다.",
|
|
)}
|
|
</div>
|
|
) : filteredGrantedUsers.length === 0 ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">
|
|
{t("msg.dev.grants.empty", "부여된 권한이 없습니다.")}
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("ui.dev.grants.user", "사용자")}</TableHead>
|
|
<TableHead>{t("ui.dev.grants.tenant", "테넌트")}</TableHead>
|
|
<TableHead>
|
|
{t("ui.dev.grants.reason", "부여 사유")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.dev.grants.pages", "권한 페이지")}
|
|
</TableHead>
|
|
<TableHead>{t("ui.dev.grants.status", "상태")}</TableHead>
|
|
<TableHead>{t("ui.dev.grants.date", "부여일")}</TableHead>
|
|
<TableHead className="text-right">
|
|
{t("ui.dev.grants.actions", "관리")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredGrantedUsers.map((grant) => (
|
|
<TableRow key={grant.id}>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="font-medium">
|
|
{grant.name || grant.email || grant.userId}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{grant.email || grant.userId}
|
|
</div>
|
|
<div className="font-mono text-xs text-muted-foreground">
|
|
{grant.userId}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="font-medium">
|
|
{grant.organization ||
|
|
grant.tenantId ||
|
|
t("ui.common.na", "없음")}
|
|
</div>
|
|
<div className="font-mono text-xs text-muted-foreground">
|
|
{grant.tenantId || t("ui.common.na", "없음")}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="max-w-md">
|
|
<div className="truncate" title={grant.reason}>
|
|
{grant.reason}
|
|
</div>
|
|
{grant.adminNotes && (
|
|
<div className="mt-1 text-xs text-muted-foreground">
|
|
{grant.adminNotes}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(grant.accessPages?.length
|
|
? normalizeDeveloperAccessPages(grant.accessPages)
|
|
: ["all"]
|
|
).map((page) => (
|
|
<Badge key={page} variant="outline">
|
|
{developerAccessPagesToLabel([page])}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="success">
|
|
{t("ui.dev.grants.approved", "승인됨")}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{new Date(grant.createdAt).toLocaleDateString()}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="ml-auto flex min-w-[220px] flex-col items-end gap-2">
|
|
<Input
|
|
placeholder={t(
|
|
"ui.dev.grants.revoke_notes_placeholder",
|
|
"회수 메모 (선택)...",
|
|
)}
|
|
className="h-8 text-xs"
|
|
value={adminNotes[grant.id] || ""}
|
|
onChange={(event) =>
|
|
setAdminNotes({
|
|
...adminNotes,
|
|
[grant.id]: event.target.value,
|
|
})
|
|
}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-destructive hover:bg-destructive/10"
|
|
disabled={revokeGrantMutation.isPending}
|
|
onClick={() => {
|
|
revokeGrantMutation.mutate({
|
|
id: grant.id,
|
|
adminNotes: adminNotes[grant.id] || "",
|
|
});
|
|
}}
|
|
>
|
|
<X className="mr-1 h-3 w-3" />
|
|
{t("ui.dev.grants.revoke", "회수")}
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|