forked from baron/baron-sso
2261 lines
79 KiB
TypeScript
2261 lines
79 KiB
TypeScript
import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query";
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import type { AxiosError } from "axios";
|
|
import {
|
|
ArrowDown,
|
|
ArrowUp,
|
|
ArrowUpDown,
|
|
Building2,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Download,
|
|
FileSpreadsheet,
|
|
LayoutDashboard,
|
|
List,
|
|
Network,
|
|
Plus,
|
|
RefreshCw,
|
|
Search,
|
|
Trash2,
|
|
Upload,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
import { Link, useNavigate, useOutletContext } from "react-router-dom";
|
|
import { PageHeader } from "../../../../../common/core/components/page";
|
|
import {
|
|
type SortConfig,
|
|
type SortResolverMap,
|
|
sortItems,
|
|
toggleSort,
|
|
} from "../../../../../common/core/utils";
|
|
import { SearchFilterBar } from "../../../../../common/ui/search-filter-bar";
|
|
import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
|
|
import { Badge } from "../../../components/ui/badge";
|
|
import { Button } from "../../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../../components/ui/card";
|
|
import { Checkbox } from "../../../components/ui/checkbox";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../../../components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "../../../components/ui/dropdown-menu";
|
|
import { Input } from "../../../components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "../../../components/ui/select";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../../components/ui/table";
|
|
import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs";
|
|
import { toast } from "../../../components/ui/use-toast";
|
|
import {
|
|
deleteTenantsBulk,
|
|
exportTenantsCSV,
|
|
fetchMe,
|
|
fetchTenants,
|
|
importTenantsCSV,
|
|
type TenantImportDetail,
|
|
type TenantImportResult,
|
|
type TenantSummary,
|
|
updateTenant,
|
|
} from "../../../lib/adminApi";
|
|
import { t } from "../../../lib/i18n";
|
|
import { normalizeAdminRole } from "../../../lib/roles";
|
|
import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";
|
|
import { cn } from "../../../lib/utils";
|
|
import {
|
|
buildAuthenticatedOrgChartTenantPickerUrl,
|
|
filterNonHanmacFamilyTenants,
|
|
isHanmacFamilyUser,
|
|
parseOrgChartTenantSelection,
|
|
} from "../../users/orgChartPicker";
|
|
import { isSeedTenant } from "../utils/protectedTenants";
|
|
import {
|
|
buildTenantImportParentOptionGroups,
|
|
buildTenantImportPreview,
|
|
inferTenantImportRootParentSlug,
|
|
parseTenantCSV,
|
|
serializeTenantImportCSV,
|
|
type TenantImportPreviewRow,
|
|
type TenantImportResolution,
|
|
} from "../utils/tenantCsvImport";
|
|
import {
|
|
TENANT_VISIBILITY_OPTIONS,
|
|
type TenantVisibility,
|
|
} from "../utils/orgConfig";
|
|
import {
|
|
filterTenantsByScope,
|
|
filterTenantViewRowsBySearch,
|
|
getTenantSearchMatchIds,
|
|
getTenantViewRows,
|
|
resolveTenantSelectionIds,
|
|
type TenantViewMode,
|
|
type TenantViewRow,
|
|
} from "./tenantListView";
|
|
|
|
const tenantCSVTemplate =
|
|
"name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type,worksmobile_sync\n";
|
|
const tenantPageSize = 500;
|
|
const _tenantVirtualizationThreshold = 250;
|
|
const _tenantEstimatedRowHeight = 73;
|
|
type TenantSortKey = keyof TenantSummary | "recursiveMemberCount";
|
|
|
|
const tenantTableHeadClassName =
|
|
"h-9 px-3 py-1 text-xs leading-tight align-middle whitespace-nowrap";
|
|
const tenantTableHeadInteractiveClassName = `${tenantTableHeadClassName} cursor-pointer transition-colors hover:bg-muted/50`;
|
|
const tenantTableHeadContentClassName = "flex h-full items-center gap-1";
|
|
const _tenantLoadAheadPx = 360;
|
|
const _tenantLoadAheadRows = 30;
|
|
const backendTenantSortKeys = new Set<TenantSortKey>([
|
|
"createdAt",
|
|
"id",
|
|
"name",
|
|
"slug",
|
|
"status",
|
|
"type",
|
|
"updatedAt",
|
|
]);
|
|
const bulkTenantTypeOptions = [
|
|
{ value: "COMPANY", label: "COMPANY (일반 기업)" },
|
|
{ value: "COMPANY_GROUP", label: "COMPANY_GROUP (그룹사/지주사)" },
|
|
{ value: "ORGANIZATION", label: "ORGANIZATION (정규 조직)" },
|
|
{ value: "USER_GROUP", label: "USER_GROUP (내부 부서/팀)" },
|
|
{ value: "PERSONAL", label: "PERSONAL (개인 워크스페이스)" },
|
|
] as const;
|
|
|
|
const getTenantIcon = (type?: string) => {
|
|
switch (type?.toUpperCase()) {
|
|
case "COMPANY_GROUP":
|
|
return Network;
|
|
case "ORGANIZATION":
|
|
case "USER_GROUP":
|
|
return Network;
|
|
default:
|
|
return Building2;
|
|
}
|
|
};
|
|
|
|
function getTenantTypeLabel(type?: string) {
|
|
if (!type) return "-";
|
|
return t(`domain.tenant_type.${type.toLowerCase()}`, type);
|
|
}
|
|
|
|
function splitTenantTypeLabel(label: string) {
|
|
const match = label.match(/^(.*?)\s*(\(.+\))$/);
|
|
if (!match) {
|
|
return { primary: label, secondary: null as string | null };
|
|
}
|
|
return {
|
|
primary: match[1].trim(),
|
|
secondary: match[2].trim(),
|
|
};
|
|
}
|
|
|
|
function abbreviateUuid(value: string) {
|
|
const parts = value.split("-");
|
|
if (parts.length < 4) {
|
|
return value;
|
|
}
|
|
return `${parts.slice(0, 4).join("-")}-...`;
|
|
}
|
|
|
|
function getTenantTypeTextClass(type?: string) {
|
|
switch (type?.toUpperCase()) {
|
|
case "COMPANY_GROUP":
|
|
return "text-sky-700";
|
|
case "COMPANY":
|
|
return "text-violet-700";
|
|
case "ORGANIZATION":
|
|
return "text-emerald-700";
|
|
case "USER_GROUP":
|
|
return "text-amber-700";
|
|
case "PERSONAL":
|
|
return "text-slate-700";
|
|
default:
|
|
return "text-muted-foreground";
|
|
}
|
|
}
|
|
|
|
function buildTenantParentPathMap(tenants: TenantSummary[]) {
|
|
const tenantById = new Map(tenants.map((tenant) => [tenant.id, tenant]));
|
|
const pathMap = new Map<string, string[]>();
|
|
|
|
for (const tenant of tenants) {
|
|
const names: string[] = [];
|
|
const visited = new Set<string>();
|
|
let currentParentId = tenant.parentId;
|
|
|
|
while (currentParentId && !visited.has(currentParentId)) {
|
|
visited.add(currentParentId);
|
|
const parent = tenantById.get(currentParentId);
|
|
if (!parent) break;
|
|
names.unshift(parent.name);
|
|
currentParentId = parent.parentId;
|
|
}
|
|
|
|
pathMap.set(tenant.id, names);
|
|
}
|
|
|
|
return pathMap;
|
|
}
|
|
|
|
const noImportParentRef = "__none__";
|
|
|
|
function tenantParentRef(tenantId: string) {
|
|
return `tenant:${tenantId}`;
|
|
}
|
|
|
|
function previewParentRef(rowNumber: number) {
|
|
return `row:${rowNumber}`;
|
|
}
|
|
|
|
function slugParentRef(slug: string) {
|
|
return `slug:${slug}`;
|
|
}
|
|
|
|
function getImportParentGroupLabel(type: string) {
|
|
switch (type) {
|
|
case "COMPANY_GROUP":
|
|
return t(
|
|
"ui.admin.tenants.import_preview.parent_company_groups",
|
|
"기존 Company Group",
|
|
);
|
|
case "COMPANY":
|
|
return t(
|
|
"ui.admin.tenants.import_preview.parent_companies",
|
|
"기존 Company",
|
|
);
|
|
case "ORGANIZATION":
|
|
return t(
|
|
"ui.admin.tenants.import_preview.parent_organizations",
|
|
"기존 Organization",
|
|
);
|
|
default:
|
|
return type;
|
|
}
|
|
}
|
|
|
|
function resolveDefaultImportParentRef(
|
|
preview: TenantImportPreviewRow,
|
|
previewRows: TenantImportPreviewRow[],
|
|
tenants: TenantSummary[],
|
|
) {
|
|
if (preview.row.parentTenantId) {
|
|
const parentPreview = previewRows.find(
|
|
(candidate) =>
|
|
candidate.row.rowNumber !== preview.row.rowNumber &&
|
|
candidate.row.tenantId === preview.row.parentTenantId,
|
|
);
|
|
if (parentPreview) {
|
|
return previewParentRef(parentPreview.row.rowNumber);
|
|
}
|
|
return tenantParentRef(preview.row.parentTenantId);
|
|
}
|
|
if (!preview.row.parentTenantSlug) {
|
|
return noImportParentRef;
|
|
}
|
|
|
|
const normalizedSlug = preview.row.parentTenantSlug.toLowerCase();
|
|
const existingTenant = tenants.find(
|
|
(tenant) => tenant.slug.toLowerCase() === normalizedSlug,
|
|
);
|
|
if (existingTenant) {
|
|
return tenantParentRef(existingTenant.id);
|
|
}
|
|
|
|
const parentPreview = previewRows.find(
|
|
(candidate) =>
|
|
candidate.row.rowNumber !== preview.row.rowNumber &&
|
|
candidate.row.slug.toLowerCase() === normalizedSlug,
|
|
);
|
|
if (parentPreview) {
|
|
return previewParentRef(parentPreview.row.rowNumber);
|
|
}
|
|
|
|
return slugParentRef(preview.row.parentTenantSlug);
|
|
}
|
|
|
|
function selectedImportSlug(
|
|
preview: TenantImportPreviewRow,
|
|
selectedCreateSlugs: Record<number, string>,
|
|
) {
|
|
return (
|
|
selectedCreateSlugs[preview.row.rowNumber] || preview.defaultCreateSlug
|
|
);
|
|
}
|
|
|
|
function resolveImportParentSelection(
|
|
parentRef: string,
|
|
previewRows: TenantImportPreviewRow[],
|
|
selectedMatches: Record<number, string>,
|
|
selectedCreateSlugs: Record<number, string>,
|
|
) {
|
|
if (!parentRef || parentRef === noImportParentRef) {
|
|
return { parentTenantId: "", parentTenantSlug: "" };
|
|
}
|
|
if (parentRef.startsWith("tenant:")) {
|
|
return {
|
|
parentTenantId: parentRef.slice("tenant:".length),
|
|
parentTenantSlug: "",
|
|
};
|
|
}
|
|
if (parentRef.startsWith("slug:")) {
|
|
return { parentTenantSlug: parentRef.slice("slug:".length) };
|
|
}
|
|
if (parentRef.startsWith("row:")) {
|
|
const rowNumber = Number(parentRef.slice("row:".length));
|
|
const selected = selectedMatches[rowNumber] ?? "__create__";
|
|
if (selected && selected !== "__create__") {
|
|
return { parentTenantId: selected, parentTenantSlug: "" };
|
|
}
|
|
const parentPreview = previewRows.find(
|
|
(preview) => preview.row.rowNumber === rowNumber,
|
|
);
|
|
return {
|
|
parentTenantSlug: parentPreview
|
|
? selectedImportSlug(parentPreview, selectedCreateSlugs)
|
|
: "",
|
|
};
|
|
}
|
|
return {};
|
|
}
|
|
|
|
function TenantListPage() {
|
|
const navigate = useNavigate();
|
|
const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
|
|
const [viewMode, setViewMode] = React.useState<TenantViewMode>("tree");
|
|
const [scopeTenantId, setScopeTenantId] = React.useState("");
|
|
const [scopePickerOpen, setScopePickerOpen] = React.useState(false);
|
|
const [sortConfig, setSortConfig] =
|
|
React.useState<SortConfig<TenantSortKey> | null>({
|
|
key: "createdAt",
|
|
direction: "desc",
|
|
});
|
|
const fileInputRef = React.useRef<HTMLInputElement | null>(null);
|
|
const [importMessage, setImportMessage] = React.useState("");
|
|
const [previewRows, setPreviewRows] = React.useState<
|
|
TenantImportPreviewRow[]
|
|
>([]);
|
|
const [selectedMatches, setSelectedMatches] = React.useState<
|
|
Record<number, string>
|
|
>({});
|
|
const [selectedCreateSlugs, setSelectedCreateSlugs] = React.useState<
|
|
Record<number, string>
|
|
>({});
|
|
const [selectedParentRefs, setSelectedParentRefs] = React.useState<
|
|
Record<number, string>
|
|
>({});
|
|
const [previewOpen, setPreviewOpen] = React.useState(false);
|
|
const [importResult, setImportResult] =
|
|
React.useState<TenantImportResult | null>(null);
|
|
const [importResultOpen, setImportResultOpen] = React.useState(false);
|
|
const [importResultFilter, setImportResultFilter] = React.useState<
|
|
"all" | "created" | "updated" | "failed" | "skipped"
|
|
>("all");
|
|
|
|
const filteredImportDetails = React.useMemo(() => {
|
|
if (!importResult) return [];
|
|
if (importResultFilter === "all") return importResult.details;
|
|
if (importResultFilter === "failed")
|
|
return importResult.details.filter((d: TenantImportDetail) => !d.success);
|
|
return importResult.details.filter(
|
|
(d: TenantImportDetail) => d.action === importResultFilter,
|
|
);
|
|
}, [importResult, importResultFilter]);
|
|
const [search, setSearch] = React.useState("");
|
|
const debouncedSearch = React.useDeferredValue(search.trim());
|
|
const [selectedBulkStatus, setSelectedBulkStatus] = React.useState("");
|
|
const [selectedBulkType, setSelectedBulkType] = React.useState("");
|
|
const [selectedBulkVisibility, setSelectedBulkVisibility] = React.useState<
|
|
TenantVisibility | ""
|
|
>("");
|
|
const _tenantTableScrollRef = React.useRef<HTMLDivElement | null>(null);
|
|
|
|
const { data: profile } = useQuery({
|
|
queryKey: ["me"],
|
|
queryFn: fetchMe,
|
|
});
|
|
const profileRole = normalizeAdminRole(profile?.role);
|
|
const isWritable =
|
|
profileRole === "super_admin" ||
|
|
!!profile?.systemPermissions?.manage_tenants;
|
|
const backendSortKey =
|
|
sortConfig && backendTenantSortKeys.has(sortConfig.key)
|
|
? sortConfig.key
|
|
: undefined;
|
|
|
|
const query = useInfiniteQuery({
|
|
queryKey: [
|
|
"tenants",
|
|
"lazy",
|
|
debouncedSearch,
|
|
scopeTenantId,
|
|
backendSortKey,
|
|
sortConfig?.direction,
|
|
],
|
|
queryFn: ({ pageParam }) =>
|
|
fetchTenants(
|
|
tenantPageSize,
|
|
0,
|
|
scopeTenantId || undefined,
|
|
pageParam ? (pageParam as string) : undefined,
|
|
debouncedSearch,
|
|
backendSortKey,
|
|
sortConfig?.direction,
|
|
),
|
|
initialPageParam: "",
|
|
getNextPageParam: (lastPage) =>
|
|
lastPage.nextCursor || lastPage.next_cursor || undefined,
|
|
});
|
|
|
|
const rawTenants = React.useMemo(
|
|
() => query.data?.pages.flatMap((page) => page.items) ?? [],
|
|
[query.data?.pages],
|
|
);
|
|
|
|
const deleteBulkMutation = useMutation({
|
|
mutationFn: (ids: string[]) => deleteTenantsBulk(ids),
|
|
onSuccess: () => {
|
|
setSelectedIds([]);
|
|
query.refetch();
|
|
},
|
|
});
|
|
|
|
const bulkUpdateTenantsMutation = useMutation({
|
|
mutationFn: async ({
|
|
tenantIds,
|
|
status,
|
|
type,
|
|
visibility,
|
|
}: {
|
|
tenantIds: string[];
|
|
status?: string;
|
|
type?: string;
|
|
visibility?: TenantVisibility;
|
|
}) => {
|
|
await Promise.all(
|
|
tenantIds.map((id) => {
|
|
const source = rawTenants.find((tenant) => tenant.id === id);
|
|
return updateTenant(id, {
|
|
...(status ? { status } : {}),
|
|
...(type ? { type } : {}),
|
|
...(visibility
|
|
? { config: { ...(source?.config ?? {}), visibility } }
|
|
: {}),
|
|
});
|
|
}),
|
|
);
|
|
},
|
|
onSuccess: () => {
|
|
query.refetch();
|
|
setSelectedIds([]);
|
|
setSelectedBulkStatus("");
|
|
setSelectedBulkType("");
|
|
setSelectedBulkVisibility("");
|
|
toast.success(
|
|
t(
|
|
"msg.admin.tenants.bulk.update_success",
|
|
"선택한 테넌트들의 상태가 수정되었습니다.",
|
|
),
|
|
);
|
|
},
|
|
onError: () => {
|
|
toast.error(
|
|
t(
|
|
"msg.admin.tenants.bulk.update_error",
|
|
"테넌트 일괄 상태 변경에 실패했습니다.",
|
|
),
|
|
);
|
|
},
|
|
});
|
|
|
|
const handleApplyBulkStatus = () => {
|
|
if (
|
|
selectedIds.length === 0 ||
|
|
(!selectedBulkStatus && !selectedBulkType && !selectedBulkVisibility)
|
|
) {
|
|
return;
|
|
}
|
|
bulkUpdateTenantsMutation.mutate({
|
|
tenantIds: selectedIds,
|
|
...(selectedBulkStatus ? { status: selectedBulkStatus } : {}),
|
|
...(selectedBulkType ? { type: selectedBulkType } : {}),
|
|
...(selectedBulkVisibility ? { visibility: selectedBulkVisibility } : {}),
|
|
});
|
|
};
|
|
|
|
const exportMutation = useMutation({
|
|
mutationFn: (includeIds: boolean) => exportTenantsCSV(includeIds),
|
|
onSuccess: ({ blob, filename }) => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
window.URL.revokeObjectURL(url);
|
|
},
|
|
});
|
|
|
|
const importMutation = useMutation({
|
|
mutationFn: (file: File) => importTenantsCSV(file),
|
|
onSuccess: (result) => {
|
|
setImportResult(result);
|
|
setImportResultOpen(true);
|
|
setImportMessage(
|
|
t(
|
|
"msg.admin.tenants.import_result",
|
|
"생성 {{created}}, 갱신 {{updated}}, 실패 {{failed}}",
|
|
{
|
|
created: result.created,
|
|
updated: result.updated,
|
|
failed: result.failed,
|
|
},
|
|
),
|
|
);
|
|
setPreviewOpen(false);
|
|
setPreviewRows([]);
|
|
setSelectedMatches({});
|
|
setSelectedParentRefs({});
|
|
query.refetch();
|
|
},
|
|
onError: (error: AxiosError<{ error?: string }>) => {
|
|
setImportMessage(
|
|
error.response?.data?.error ??
|
|
t(
|
|
"msg.admin.tenants.import_error",
|
|
"테넌트 가져오기에 실패했습니다.",
|
|
),
|
|
);
|
|
},
|
|
});
|
|
|
|
const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
|
|
?.data?.error;
|
|
const fallbackError =
|
|
!errorMsg && query.isError
|
|
? t("msg.admin.tenants.fetch_error", "테넌트 목록 조회에 실패했습니다.")
|
|
: null;
|
|
|
|
const hanmacFamilyTenantId = React.useMemo(() => {
|
|
const envTenantId = import.meta.env.VITE_HANMAC_FAMILY_TENANT_ID;
|
|
if (typeof envTenantId === "string" && envTenantId.trim()) {
|
|
return envTenantId.trim();
|
|
}
|
|
return rawTenants.find((tenant) => tenant.slug === "hanmac-family")?.id;
|
|
}, [rawTenants]);
|
|
const allTenants = React.useMemo(() => {
|
|
if (profileRole === "super_admin") {
|
|
return rawTenants;
|
|
}
|
|
if (
|
|
profile &&
|
|
isHanmacFamilyUser(profile, rawTenants, hanmacFamilyTenantId)
|
|
) {
|
|
return rawTenants;
|
|
}
|
|
return filterNonHanmacFamilyTenants(rawTenants, hanmacFamilyTenantId);
|
|
}, [hanmacFamilyTenantId, profile, profileRole, rawTenants]);
|
|
const scopedTenants = React.useMemo(
|
|
() => filterTenantsByScope(allTenants, scopeTenantId),
|
|
[allTenants, scopeTenantId],
|
|
);
|
|
const selectedScopeTenant = React.useMemo(
|
|
() => allTenants.find((tenant) => tenant.id === scopeTenantId),
|
|
[allTenants, scopeTenantId],
|
|
);
|
|
const scopePickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
|
|
import.meta.env.ORGFRONT_URL,
|
|
hanmacFamilyTenantId ? { tenantId: hanmacFamilyTenantId } : {},
|
|
);
|
|
const importParentOptionGroups =
|
|
buildTenantImportParentOptionGroups(allTenants);
|
|
|
|
const requestSort = (key: TenantSortKey) => {
|
|
setSortConfig((current) => toggleSort(current, key));
|
|
};
|
|
|
|
const getSortIcon = (key: TenantSortKey) => {
|
|
if (!sortConfig || sortConfig.key !== key) {
|
|
return <ArrowUpDown size={14} className="ml-1 opacity-50" />;
|
|
}
|
|
return sortConfig.direction === "asc" ? (
|
|
<ArrowUp size={14} className="ml-1" />
|
|
) : (
|
|
<ArrowDown size={14} className="ml-1" />
|
|
);
|
|
};
|
|
|
|
const deletableTenants = React.useMemo(
|
|
() => scopedTenants.filter((tenant) => !isSeedTenant(tenant)),
|
|
[scopedTenants],
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
const selectableIds = new Set(deletableTenants.map((tenant) => tenant.id));
|
|
setSelectedIds((prev) => {
|
|
const next = prev.filter((id) => selectableIds.has(id));
|
|
if (next.length === prev.length) {
|
|
return prev;
|
|
}
|
|
return next;
|
|
});
|
|
}, [deletableTenants]);
|
|
|
|
React.useEffect(() => {
|
|
if (!scopePickerOpen) return;
|
|
|
|
const onMessage = (event: MessageEvent) => {
|
|
const selection = parseOrgChartTenantSelection(event.data);
|
|
if (!selection) return;
|
|
if (!allTenants.some((tenant) => tenant.id === selection.id)) return;
|
|
|
|
setScopeTenantId(selection.id);
|
|
setScopePickerOpen(false);
|
|
};
|
|
|
|
window.addEventListener("message", onMessage);
|
|
return () => window.removeEventListener("message", onMessage);
|
|
}, [allTenants, scopePickerOpen]);
|
|
|
|
if (
|
|
profile &&
|
|
profileRole !== "super_admin" &&
|
|
!profile?.systemPermissions?.tenants
|
|
) {
|
|
return (
|
|
<div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
|
|
<h3 className="text-lg font-bold">
|
|
{t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
|
|
</h3>
|
|
<Button onClick={() => navigate("/")}>
|
|
{t("ui.common.go_home", "홈으로 이동")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
if (checked) {
|
|
setSelectedIds(deletableTenants.map((t) => t.id));
|
|
} else {
|
|
setSelectedIds([]);
|
|
}
|
|
};
|
|
|
|
const handleSelect = (tenant: TenantSummary, checked: boolean) => {
|
|
if (isSeedTenant(tenant)) {
|
|
return;
|
|
}
|
|
setSelectedIds((prev) =>
|
|
resolveTenantSelectionIds({
|
|
currentIds: prev,
|
|
tenant,
|
|
checked,
|
|
tenants: allTenants,
|
|
deletableTenants,
|
|
}),
|
|
);
|
|
};
|
|
|
|
const handleDeleteBulk = () => {
|
|
if (selectedIds.length === 0) return;
|
|
const deletableIds = selectedIds.filter((id) =>
|
|
deletableTenants.some((tenant) => tenant.id === id),
|
|
);
|
|
if (deletableIds.length === 0) return;
|
|
if (
|
|
!window.confirm(
|
|
t(
|
|
"msg.admin.tenants.delete_bulk_confirm",
|
|
"선택한 {{count}}개 테넌트를 삭제할까요?",
|
|
{ count: deletableIds.length },
|
|
),
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
deleteBulkMutation.mutate(deletableIds);
|
|
};
|
|
|
|
const handleTemplateDownload = () => {
|
|
const blob = new Blob([tenantCSVTemplate], { type: "text/csv" });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = "tenant-import-template.csv";
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
window.URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const handleImportFile = async (
|
|
event: React.ChangeEvent<HTMLInputElement>,
|
|
) => {
|
|
const file = event.target.files?.[0];
|
|
event.target.value = "";
|
|
if (!file) return;
|
|
setImportMessage("");
|
|
const text = await file.text();
|
|
const rows = parseTenantCSV(text, {
|
|
rootParentSlug: inferTenantImportRootParentSlug(file.name, allTenants),
|
|
});
|
|
if (rows.length === 0) {
|
|
setImportMessage(
|
|
t("msg.admin.tenants.import_empty", "가져올 테넌트 행이 없습니다."),
|
|
);
|
|
return;
|
|
}
|
|
const preview = buildTenantImportPreview(rows, allTenants);
|
|
setPreviewRows(preview);
|
|
setSelectedMatches(
|
|
Object.fromEntries(
|
|
preview.map((row) => [
|
|
row.row.rowNumber,
|
|
row.defaultTenantId || "__create__",
|
|
]),
|
|
),
|
|
);
|
|
setSelectedCreateSlugs(
|
|
Object.fromEntries(
|
|
preview.map((row) => [row.row.rowNumber, row.defaultCreateSlug]),
|
|
),
|
|
);
|
|
setSelectedParentRefs(
|
|
Object.fromEntries(
|
|
preview.map((row) => [
|
|
row.row.rowNumber,
|
|
resolveDefaultImportParentRef(row, preview, allTenants),
|
|
]),
|
|
),
|
|
);
|
|
setPreviewOpen(true);
|
|
};
|
|
|
|
const handleImportConfirm = () => {
|
|
const resolutions: Record<number, TenantImportResolution> =
|
|
Object.fromEntries(
|
|
previewRows.map((preview) => {
|
|
const selected = selectedMatches[preview.row.rowNumber] ?? "";
|
|
if (selected && selected !== "__create__") {
|
|
return [
|
|
preview.row.rowNumber,
|
|
{
|
|
mode: "existing",
|
|
tenantId: selected,
|
|
...resolveImportParentSelection(
|
|
selectedParentRefs[preview.row.rowNumber] ??
|
|
resolveDefaultImportParentRef(
|
|
preview,
|
|
previewRows,
|
|
allTenants,
|
|
),
|
|
previewRows,
|
|
selectedMatches,
|
|
selectedCreateSlugs,
|
|
),
|
|
},
|
|
];
|
|
}
|
|
|
|
return [
|
|
preview.row.rowNumber,
|
|
{
|
|
mode: "create",
|
|
slug:
|
|
selectedCreateSlugs[preview.row.rowNumber] ||
|
|
preview.defaultCreateSlug,
|
|
...resolveImportParentSelection(
|
|
selectedParentRefs[preview.row.rowNumber] ??
|
|
resolveDefaultImportParentRef(
|
|
preview,
|
|
previewRows,
|
|
allTenants,
|
|
),
|
|
previewRows,
|
|
selectedMatches,
|
|
selectedCreateSlugs,
|
|
),
|
|
},
|
|
];
|
|
}),
|
|
);
|
|
const csv = serializeTenantImportCSV(previewRows, resolutions);
|
|
const file = new File([csv], "tenants.csv", { type: "text/csv" });
|
|
importMutation.mutate(file);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
|
|
<PageHeader
|
|
sticky
|
|
titleAs="h2"
|
|
icon={<Building2 size={20} />}
|
|
title={t("ui.admin.tenants.title", "테넌트 목록")}
|
|
description={t(
|
|
"msg.admin.tenants.subtitle",
|
|
"시스템에 등록된 모든 테넌트를 평면 목록으로 확인하고 관리합니다.",
|
|
)}
|
|
actions={
|
|
<div className="min-w-0 space-y-2">
|
|
<SearchFilterBar
|
|
primary={
|
|
<>
|
|
<div className="relative w-56">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t(
|
|
"ui.admin.tenants.list.search_placeholder",
|
|
"이름 또는 슬러그, ID 검색",
|
|
)}
|
|
className="h-9 pl-9"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
query.refetch();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="flex rounded-md border bg-background p-0.5"
|
|
data-testid="tenant-view-mode-toggle"
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant={viewMode === "tree" ? "default" : "ghost"}
|
|
size="sm"
|
|
className="h-9 gap-1.5"
|
|
aria-pressed={viewMode === "tree"}
|
|
onClick={() => setViewMode("tree")}
|
|
data-testid="tenant-view-tree-btn"
|
|
>
|
|
<Network size={14} />
|
|
{t("ui.admin.tenants.view.tree", "트리")}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant={viewMode === "table" ? "default" : "ghost"}
|
|
size="sm"
|
|
className="h-9 gap-1.5"
|
|
aria-pressed={viewMode === "table"}
|
|
onClick={() => setViewMode("table")}
|
|
data-testid="tenant-view-table-btn"
|
|
>
|
|
<List size={14} />
|
|
{t("ui.admin.tenants.view.table", "평면")}
|
|
</Button>
|
|
</div>
|
|
|
|
<Button
|
|
type="button"
|
|
variant={scopeTenantId ? "default" : "outline"}
|
|
size="sm"
|
|
className="h-9 gap-2"
|
|
onClick={() => setScopePickerOpen(true)}
|
|
data-testid="tenant-scope-picker-btn"
|
|
>
|
|
<Network size={16} />
|
|
{selectedScopeTenant
|
|
? t("ui.admin.tenants.scope.active", "{{name}} 하위", {
|
|
name: selectedScopeTenant.name,
|
|
})
|
|
: t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
|
|
</Button>
|
|
{scopeTenantId ? (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-9"
|
|
onClick={() => setScopeTenantId("")}
|
|
data-testid="tenant-scope-clear-btn"
|
|
>
|
|
{t("ui.common.clear", "초기화")}
|
|
</Button>
|
|
) : null}
|
|
</>
|
|
}
|
|
actions={
|
|
<>
|
|
{isWritable && (
|
|
<>
|
|
<input
|
|
ref={fileInputRef}
|
|
name="tenant-import-file"
|
|
type="file"
|
|
accept=".csv,text/csv"
|
|
className="hidden"
|
|
data-testid="tenant-import-input"
|
|
onChange={handleImportFile}
|
|
/>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
data-testid="tenant-data-mgmt-btn"
|
|
className="gap-2 h-9"
|
|
>
|
|
<LayoutDashboard size={16} />
|
|
{t("ui.admin.tenants.data_mgmt", "데이터 관리")}
|
|
<ChevronDown size={14} className="opacity-50" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
<DropdownMenuItem
|
|
onClick={handleTemplateDownload}
|
|
data-testid="tenant-template-menu-item"
|
|
className="cursor-pointer"
|
|
>
|
|
<FileSpreadsheet
|
|
size={16}
|
|
className="mr-2 opacity-50"
|
|
/>
|
|
{t(
|
|
"ui.admin.tenants.csv_template",
|
|
"템플릿 다운로드",
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => fileInputRef.current?.click()}
|
|
disabled={importMutation.isPending}
|
|
data-testid="tenant-import-menu-item"
|
|
className="cursor-pointer"
|
|
>
|
|
<Upload size={16} className="mr-2 opacity-50" />
|
|
{t("ui.admin.tenants.import", "CSV 가져오기")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => exportMutation.mutate(false)}
|
|
disabled={exportMutation.isPending}
|
|
data-testid="tenant-export-menu-item"
|
|
className="cursor-pointer"
|
|
>
|
|
<Download size={16} className="mr-2 opacity-50" />
|
|
{t(
|
|
"ui.admin.tenants.export_without_ids",
|
|
"UUID 제외 내보내기",
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => exportMutation.mutate(true)}
|
|
disabled={exportMutation.isPending}
|
|
data-testid="tenant-export-with-ids-menu-item"
|
|
className="cursor-pointer"
|
|
>
|
|
<Download size={16} className="mr-2 opacity-50" />
|
|
{t(
|
|
"ui.admin.tenants.export_with_ids",
|
|
"UUID 포함 내보내기",
|
|
)}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</>
|
|
)}
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => query.refetch()}
|
|
disabled={query.isFetching}
|
|
className="h-9 w-9 px-0"
|
|
title={t("ui.common.refresh", "새로고침")}
|
|
>
|
|
<RefreshCw size={16} />
|
|
<span className="sr-only">
|
|
{t("ui.common.refresh", "새로고침")}
|
|
</span>
|
|
</Button>
|
|
{isWritable && (
|
|
<Button asChild size="sm" className="h-9">
|
|
<Link to="/tenants/new">
|
|
<Plus size={16} />
|
|
{t("ui.admin.tenants.add", "테넌트 추가")}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</>
|
|
}
|
|
/>
|
|
{importMessage ? (
|
|
<div
|
|
className="rounded-md border border-border bg-secondary px-3 py-2 text-sm"
|
|
data-testid="tenant-import-summary"
|
|
>
|
|
{importMessage}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
}
|
|
/>
|
|
|
|
<Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
|
|
<CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
|
|
<div className="flex items-center gap-6">
|
|
<div>
|
|
<CardTitle className="text-lg font-bold flex items-center gap-2">
|
|
{t("ui.admin.tenants.registry.title", "Tenant Registry")}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.admin.tenants.registry.count",
|
|
"총 {{count}}개의 테넌트가 등록되어 있습니다.",
|
|
{
|
|
count: scopeTenantId
|
|
? scopedTenants.length
|
|
: allTenants.length,
|
|
},
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 flex flex-col min-h-0 pt-0">
|
|
{(errorMsg || fallbackError) && (
|
|
<div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive flex-shrink-0">
|
|
{errorMsg ?? fallbackError}
|
|
</div>
|
|
)}
|
|
|
|
<TenantHierarchyView
|
|
tenants={allTenants}
|
|
selectedIds={selectedIds}
|
|
onSelect={handleSelect}
|
|
onSelectAll={handleSelectAll}
|
|
search={search}
|
|
deletableTenants={deletableTenants}
|
|
sortConfig={sortConfig}
|
|
requestSort={requestSort}
|
|
getSortIcon={getSortIcon}
|
|
viewMode={viewMode}
|
|
scopeTenantId={scopeTenantId}
|
|
fetchNextPage={query.fetchNextPage}
|
|
hasNextPage={!!query.hasNextPage}
|
|
isFetchingNextPage={query.isFetchingNextPage}
|
|
isLoading={query.isLoading}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog open={scopePickerOpen} onOpenChange={setScopePickerOpen}>
|
|
<DialogContent className="max-w-[480px] p-4">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t(
|
|
"msg.admin.tenants.scope.description",
|
|
"orgfront 조직 선택기에서 상위 테넌트를 선택하면 해당 하위 테넌트만 표시합니다.",
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<iframe
|
|
title={t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
|
|
src={scopePickerUrl}
|
|
className="h-[600px] w-full rounded-md border"
|
|
data-testid="tenant-scope-picker-frame"
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Bulk Action Bar */}
|
|
{selectedIds.length > 0 && (
|
|
<div
|
|
className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 px-6 py-3 rounded-2xl bg-foreground text-background shadow-2xl animate-in slide-in-from-bottom-4 duration-300"
|
|
data-testid="tenant-bulk-action-bar"
|
|
>
|
|
<span className="text-sm font-medium border-r border-background/20 pr-4 mr-2">
|
|
{t("ui.admin.tenants.bulk.selected_count", "{{count}}개 선택됨", {
|
|
count: selectedIds.length,
|
|
})}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Select
|
|
value={selectedBulkStatus}
|
|
onValueChange={setSelectedBulkStatus}
|
|
>
|
|
<SelectTrigger
|
|
className="h-8 w-[150px] bg-transparent border-background/20 text-background text-xs"
|
|
data-testid="tenant-bulk-status-select"
|
|
>
|
|
<SelectValue
|
|
placeholder={t(
|
|
"ui.admin.tenants.bulk.status_placeholder",
|
|
"상태 선택",
|
|
)}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{/* Available tenant status options */}
|
|
<SelectItem value="active">
|
|
{t("ui.common.status.active", "활성화")}
|
|
</SelectItem>
|
|
<SelectItem value="inactive">
|
|
{t("ui.common.status.inactive", "비활성화")}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select
|
|
value={selectedBulkType}
|
|
onValueChange={setSelectedBulkType}
|
|
>
|
|
<SelectTrigger
|
|
className="h-8 w-[180px] bg-transparent border-background/20 text-background text-xs"
|
|
data-testid="tenant-bulk-type-select"
|
|
>
|
|
<SelectValue
|
|
placeholder={t(
|
|
"ui.admin.tenants.bulk.type_placeholder",
|
|
"유형 선택",
|
|
)}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{bulkTenantTypeOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{t(
|
|
`domain.tenant_type.${option.value.toLowerCase()}`,
|
|
option.label,
|
|
)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select
|
|
value={selectedBulkVisibility}
|
|
onValueChange={(value) =>
|
|
setSelectedBulkVisibility(value as TenantVisibility)
|
|
}
|
|
>
|
|
<SelectTrigger
|
|
className="h-8 w-[130px] bg-transparent border-background/20 text-background text-xs"
|
|
data-testid="tenant-bulk-visibility-select"
|
|
>
|
|
<SelectValue
|
|
placeholder={t(
|
|
"ui.admin.tenants.bulk.visibility_placeholder",
|
|
"공개 범위",
|
|
)}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{TENANT_VISIBILITY_OPTIONS.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-background hover:bg-background/10 h-8"
|
|
onClick={handleApplyBulkStatus}
|
|
disabled={
|
|
(!selectedBulkStatus &&
|
|
!selectedBulkType &&
|
|
!selectedBulkVisibility) ||
|
|
bulkUpdateTenantsMutation.isPending
|
|
}
|
|
data-testid="tenant-bulk-apply-btn"
|
|
>
|
|
{t("ui.common.apply", "적용")}
|
|
</Button>
|
|
<div className="w-px h-4 bg-background/20 mx-1" />
|
|
{isWritable && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive-foreground hover:bg-destructive/20 h-8 gap-1.5"
|
|
onClick={handleDeleteBulk}
|
|
disabled={deleteBulkMutation.isPending}
|
|
data-testid="tenant-bulk-delete-btn"
|
|
>
|
|
<Trash2 size={14} />
|
|
{t("ui.common.delete", "삭제")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-background/50 hover:text-background h-8 w-8 ml-2"
|
|
onClick={() => setSelectedIds([])}
|
|
aria-label={t("ui.common.close", "닫기")}
|
|
data-testid="tenant-bulk-close-btn"
|
|
>
|
|
<Plus size={16} className="rotate-45" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
<Dialog open={importResultOpen} onOpenChange={setImportResultOpen}>
|
|
<DialogContent className="max-w-5xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t(
|
|
"ui.admin.tenants.import_result.title",
|
|
"가져오기 결과 리포트",
|
|
)}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{importResult && (
|
|
<div
|
|
className="grid grid-cols-4 gap-4 py-4"
|
|
data-testid="tenant-import-report"
|
|
>
|
|
<div className="flex flex-col items-center rounded-lg border bg-muted/30 p-3 shadow-sm">
|
|
<span className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
|
|
Total
|
|
</span>
|
|
<span className="text-2xl font-bold">
|
|
{importResult.details.length}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 shadow-sm">
|
|
<span className="text-[10px] font-bold tracking-wider text-emerald-600 dark:text-emerald-400 uppercase">
|
|
Created
|
|
</span>
|
|
<span className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
|
|
{importResult.created}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-center rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 shadow-sm">
|
|
<span className="text-[10px] font-bold tracking-wider text-amber-600 dark:text-amber-400 uppercase">
|
|
Updated
|
|
</span>
|
|
<span className="text-2xl font-bold text-amber-600 dark:text-amber-400">
|
|
{importResult.updated}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-center rounded-lg border border-destructive/20 bg-destructive/5 p-3 shadow-sm">
|
|
<span className="text-[10px] font-bold tracking-wider text-destructive uppercase">
|
|
Failed
|
|
</span>
|
|
<span className="text-2xl font-bold text-destructive">
|
|
{importResult.failed}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Tabs
|
|
value={importResultFilter}
|
|
onValueChange={(v) =>
|
|
setImportResultFilter(
|
|
v as "all" | "created" | "updated" | "failed" | "skipped",
|
|
)
|
|
}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="grid h-11 w-full grid-cols-5 bg-muted/50 p-1">
|
|
<TabsTrigger
|
|
value="all"
|
|
className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm"
|
|
>
|
|
ALL
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="created"
|
|
className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-emerald-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-emerald-400"
|
|
>
|
|
CREATED
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="updated"
|
|
className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-amber-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-amber-400"
|
|
>
|
|
UPDATED
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="failed"
|
|
className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-destructive data-[state=active]:shadow-sm"
|
|
>
|
|
FAILED
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="skipped"
|
|
className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
>
|
|
SKIPPED
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<div className="max-h-[50vh] overflow-auto rounded-md border">
|
|
<Table>
|
|
<TableHeader className={commonStickyTableHeaderClass}>
|
|
<TableRow>
|
|
<TableHead className="w-[72px]">
|
|
{t("ui.common.row", "행")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.table.name", "NAME")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.table.slug", "SLUG")}
|
|
</TableHead>
|
|
<TableHead className="w-[120px]">
|
|
{t("ui.admin.tenants.import_result.status", "상태")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.import_result.message", "상세 내용")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredImportDetails.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={5}
|
|
className="h-24 text-center text-muted-foreground"
|
|
>
|
|
{t("ui.common.no_results", "표시할 결과가 없습니다.")}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredImportDetails.map((detail: TenantImportDetail) => (
|
|
<TableRow key={detail.row}>
|
|
<TableCell className="font-mono text-xs text-muted-foreground">
|
|
{detail.row}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{detail.name}
|
|
</TableCell>
|
|
<TableCell className="font-mono text-xs">
|
|
{detail.slug}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant={
|
|
detail.action === "created"
|
|
? "success"
|
|
: detail.action === "updated"
|
|
? "warning"
|
|
: detail.action === "skipped"
|
|
? "outline"
|
|
: "destructive"
|
|
}
|
|
className="w-full justify-center text-[10px]"
|
|
>
|
|
{detail.action.toUpperCase()}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-xs">
|
|
{detail.message}
|
|
{detail.modifiedFields &&
|
|
detail.modifiedFields.length > 0 && (
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
<span className="mr-1 text-[10px] text-muted-foreground">
|
|
{t(
|
|
"ui.admin.tenants.import_result.modified",
|
|
"수정됨:",
|
|
)}
|
|
</span>
|
|
{detail.modifiedFields.map((field: string) => (
|
|
<Badge
|
|
key={field}
|
|
variant="outline"
|
|
className="h-4 bg-muted px-1 text-[9px] font-normal"
|
|
>
|
|
{field}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button onClick={() => setImportResultOpen(false)}>
|
|
{t("ui.common.confirm", "확인")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
|
|
<DialogContent className="max-w-5xl">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("ui.admin.tenants.import_preview.title", "CSV 가져오기 확인")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t(
|
|
"msg.admin.tenants.import_preview.description",
|
|
"tenant_id가 없는 행은 기존 테넌트 후보와 비교한 뒤 신규 생성 또는 기존 테넌트 갱신으로 처리합니다.",
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="max-h-[60vh] overflow-auto rounded-md border">
|
|
<Table>
|
|
<TableHeader className={commonStickyTableHeaderClass}>
|
|
<TableRow>
|
|
<TableHead className="w-[72px]">
|
|
{t("ui.common.row", "행")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.table.name", "NAME")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.table.slug", "SLUG")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.import_preview.parent", "상위")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.import_preview.match", "매칭")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.tenants.import_preview.candidates", "후보")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{previewRows.map((preview) => (
|
|
<TableRow
|
|
key={preview.row.rowNumber}
|
|
data-testid={`tenant-import-preview-row-${preview.row.rowNumber}`}
|
|
>
|
|
<TableCell className="font-mono text-xs">
|
|
{preview.row.rowNumber}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{preview.row.name}
|
|
</TableCell>
|
|
<TableCell className="font-mono text-xs">
|
|
{preview.row.slug}
|
|
{preview.conflicts.length > 0 && (
|
|
<div className="mt-1 flex flex-wrap gap-1">
|
|
{preview.conflicts.map((conflict) => (
|
|
<Badge
|
|
key={conflict}
|
|
variant="outline"
|
|
className="text-[10px]"
|
|
>
|
|
{conflict === "external_tenant_id"
|
|
? t(
|
|
"ui.admin.tenants.import_preview.external_id",
|
|
"외부 ID",
|
|
)
|
|
: conflict === "slug_exists"
|
|
? t(
|
|
"ui.admin.tenants.import_preview.slug_exists",
|
|
"slug 충돌",
|
|
)
|
|
: t(
|
|
"ui.admin.tenants.import_preview.parent_unresolved",
|
|
"부모 확인 필요",
|
|
)}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<select
|
|
id={`tenant-import-parent-select-${preview.row.rowNumber}`}
|
|
name={`tenant-import-parent-select-${preview.row.rowNumber}`}
|
|
className="h-9 w-full min-w-[220px] rounded-md border border-input bg-background px-3 text-sm"
|
|
value={
|
|
selectedParentRefs[preview.row.rowNumber] ??
|
|
resolveDefaultImportParentRef(
|
|
preview,
|
|
previewRows,
|
|
allTenants,
|
|
)
|
|
}
|
|
data-testid={`tenant-import-parent-select-${preview.row.rowNumber}`}
|
|
onChange={(event) =>
|
|
setSelectedParentRefs((prev) => ({
|
|
...prev,
|
|
[preview.row.rowNumber]: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
<option value={noImportParentRef}>
|
|
{t("ui.common.none", "없음")}
|
|
</option>
|
|
{importParentOptionGroups.map((group) => (
|
|
<optgroup
|
|
key={group.type}
|
|
label={getImportParentGroupLabel(group.type)}
|
|
>
|
|
{group.tenants.map((tenant) => (
|
|
<option
|
|
key={tenant.id}
|
|
value={tenantParentRef(tenant.id)}
|
|
>
|
|
{tenant.name} ({tenant.slug}) - {tenant.type}
|
|
</option>
|
|
))}
|
|
</optgroup>
|
|
))}
|
|
<optgroup
|
|
label={t(
|
|
"ui.admin.tenants.import_preview.csv_parents",
|
|
"가져오기 CSV",
|
|
)}
|
|
>
|
|
{previewRows
|
|
.filter(
|
|
(candidate) =>
|
|
candidate.row.rowNumber !==
|
|
preview.row.rowNumber,
|
|
)
|
|
.map((candidate) => (
|
|
<option
|
|
key={candidate.row.rowNumber}
|
|
value={previewParentRef(
|
|
candidate.row.rowNumber,
|
|
)}
|
|
>
|
|
{candidate.row.name} (
|
|
{selectedImportSlug(
|
|
candidate,
|
|
selectedCreateSlugs,
|
|
)}
|
|
)
|
|
</option>
|
|
))}
|
|
</optgroup>
|
|
{(
|
|
selectedParentRefs[preview.row.rowNumber] ??
|
|
resolveDefaultImportParentRef(
|
|
preview,
|
|
previewRows,
|
|
allTenants,
|
|
)
|
|
).startsWith("slug:") && (
|
|
<option
|
|
value={
|
|
selectedParentRefs[preview.row.rowNumber] ??
|
|
resolveDefaultImportParentRef(
|
|
preview,
|
|
previewRows,
|
|
allTenants,
|
|
)
|
|
}
|
|
>
|
|
{preview.row.parentTenantSlug}
|
|
</option>
|
|
)}
|
|
</select>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-2">
|
|
<select
|
|
id={`tenant-import-match-select-${preview.row.rowNumber}`}
|
|
name={`tenant-import-match-select-${preview.row.rowNumber}`}
|
|
className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
|
|
value={
|
|
selectedMatches[preview.row.rowNumber] ??
|
|
"__create__"
|
|
}
|
|
data-testid={`tenant-import-match-select-${preview.row.rowNumber}`}
|
|
onChange={(event) =>
|
|
setSelectedMatches((prev) => ({
|
|
...prev,
|
|
[preview.row.rowNumber]: event.target.value,
|
|
}))
|
|
}
|
|
>
|
|
<option value="__create__">
|
|
{t(
|
|
"ui.admin.tenants.import_preview.create_new_reset",
|
|
"신규 생성 (ID/slug 재설정)",
|
|
)}
|
|
</option>
|
|
{preview.candidates.map((candidate) => (
|
|
<option
|
|
key={candidate.tenantId}
|
|
value={candidate.tenantId}
|
|
>
|
|
{candidate.name} ({candidate.slug})
|
|
</option>
|
|
))}
|
|
</select>
|
|
{(selectedMatches[preview.row.rowNumber] ??
|
|
"__create__") === "__create__" && (
|
|
<Input
|
|
value={
|
|
selectedCreateSlugs[preview.row.rowNumber] ?? ""
|
|
}
|
|
data-testid={`tenant-import-create-slug-${preview.row.rowNumber}`}
|
|
onChange={(event) =>
|
|
setSelectedCreateSlugs((prev) => ({
|
|
...prev,
|
|
[preview.row.rowNumber]: event.target.value,
|
|
}))
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{preview.candidates.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{preview.candidates.map((candidate) => (
|
|
<Badge
|
|
key={candidate.tenantId}
|
|
variant={
|
|
candidate.score >= 0.95 ? "default" : "outline"
|
|
}
|
|
data-testid="tenant-import-candidate"
|
|
>
|
|
{candidate.name}{" "}
|
|
{Math.round(candidate.score * 100)}%
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-sm text-muted-foreground">
|
|
{t(
|
|
"ui.admin.tenants.import_preview.no_candidates",
|
|
"후보 없음",
|
|
)}
|
|
</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setPreviewOpen(false)}>
|
|
{t("ui.common.cancel", "취소")}
|
|
</Button>
|
|
<Button
|
|
onClick={handleImportConfirm}
|
|
disabled={importMutation.isPending}
|
|
data-testid="tenant-import-confirm-btn"
|
|
>
|
|
{t("ui.admin.tenants.import_preview.confirm", "가져오기 실행")}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- Internal Support Components ---
|
|
|
|
const TenantHierarchyView: React.FC<{
|
|
tenants: TenantSummary[];
|
|
selectedIds: string[];
|
|
onSelect: (tenant: TenantSummary, checked: boolean) => void;
|
|
onSelectAll: (checked: boolean) => void;
|
|
search: string;
|
|
deletableTenants: TenantSummary[];
|
|
sortConfig: SortConfig<TenantSortKey> | null;
|
|
requestSort: (key: TenantSortKey) => void;
|
|
getSortIcon: (key: TenantSortKey) => React.ReactNode;
|
|
viewMode: TenantViewMode;
|
|
scopeTenantId: string;
|
|
fetchNextPage: () => void;
|
|
hasNextPage: boolean;
|
|
isFetchingNextPage: boolean;
|
|
isLoading: boolean;
|
|
}> = ({
|
|
tenants,
|
|
selectedIds,
|
|
onSelect,
|
|
onSelectAll,
|
|
search,
|
|
deletableTenants,
|
|
sortConfig,
|
|
requestSort,
|
|
getSortIcon,
|
|
viewMode,
|
|
scopeTenantId,
|
|
fetchNextPage,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
isLoading,
|
|
}) => {
|
|
const parentRef = React.useRef<HTMLDivElement>(null);
|
|
const isSidebarCollapsed = useOutletContext<boolean>() ?? false;
|
|
const isTest =
|
|
(typeof process !== "undefined" && process.env.NODE_ENV === "test") ||
|
|
(typeof window !== "undefined" &&
|
|
(window as Window & { _IS_TEST_MODE?: boolean })._IS_TEST_MODE);
|
|
const tenantTableGridTemplateColumns = React.useMemo(
|
|
() =>
|
|
isSidebarCollapsed
|
|
? "48px minmax(380px, 1fr) 310px 140px 240px 120px 120px 110px"
|
|
: "48px minmax(500px, 1fr) 240px 130px 226px 100px 100px 110px",
|
|
[isSidebarCollapsed],
|
|
);
|
|
const tenantTableMinWidth = "100%";
|
|
|
|
const { subTree } = React.useMemo(
|
|
() => buildTenantFullTree(tenants, scopeTenantId || undefined, !!search),
|
|
[scopeTenantId, tenants, search],
|
|
);
|
|
const tenantParentPathMap = React.useMemo(
|
|
() => buildTenantParentPathMap(tenants),
|
|
[tenants],
|
|
);
|
|
|
|
// Initial expanded state: everything open
|
|
const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
|
|
const ids = new Set<string>();
|
|
const collect = (nodes: TenantNode[]) => {
|
|
for (const n of nodes) {
|
|
ids.add(n.id);
|
|
if (n.children) collect(n.children);
|
|
}
|
|
};
|
|
collect(subTree);
|
|
return ids;
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
const ids = new Set<string>();
|
|
const collect = (nodes: TenantNode[]) => {
|
|
for (const n of nodes) {
|
|
ids.add(n.id);
|
|
if (n.children) collect(n.children);
|
|
}
|
|
};
|
|
collect(subTree);
|
|
setExpandedIds((prev) => new Set([...prev, ...ids]));
|
|
}, [subTree]);
|
|
|
|
const toggleExpand = (id: string) => {
|
|
setExpandedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const tenantSortResolvers = React.useMemo<
|
|
SortResolverMap<TenantNode, TenantSortKey>
|
|
>(
|
|
() => ({
|
|
recursiveMemberCount: (tenant) => tenant.recursiveMemberCount,
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const flattenedRows = React.useMemo(() => {
|
|
if (viewMode === "table") {
|
|
const rows = sortItems(
|
|
getTenantViewRows(tenants, "table", scopeTenantId, !!search),
|
|
sortConfig,
|
|
tenantSortResolvers,
|
|
);
|
|
return filterTenantViewRowsBySearch(rows, search);
|
|
}
|
|
|
|
const result: TenantViewRow[] = [];
|
|
|
|
const collect = (nodes: TenantNode[], depth: number) => {
|
|
// Sort nodes at the current depth
|
|
const sortedNodes = sortItems(nodes, sortConfig, tenantSortResolvers);
|
|
|
|
for (const node of sortedNodes) {
|
|
result.push({ ...node, depth });
|
|
if (
|
|
expandedIds.has(node.id) &&
|
|
node.children &&
|
|
node.children.length > 0
|
|
) {
|
|
collect(node.children, depth + 1);
|
|
}
|
|
}
|
|
};
|
|
collect(subTree, 0);
|
|
return filterTenantViewRowsBySearch(result, search);
|
|
}, [
|
|
expandedIds,
|
|
scopeTenantId,
|
|
sortConfig,
|
|
subTree,
|
|
tenantSortResolvers,
|
|
tenants,
|
|
viewMode,
|
|
search,
|
|
]);
|
|
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: flattenedRows.length,
|
|
getScrollElement: () => parentRef.current,
|
|
estimateSize: () => _tenantEstimatedRowHeight,
|
|
overscan: isTest && flattenedRows.length < 100 ? flattenedRows.length : 10,
|
|
initialRect: isTest ? { width: 1180, height: 1000 } : undefined,
|
|
});
|
|
|
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
const shouldVirtualizeRows = !(isTest && flattenedRows.length < 100);
|
|
const searchMatchIds = React.useMemo(
|
|
() => new Set(getTenantSearchMatchIds(flattenedRows, search)),
|
|
[flattenedRows, search],
|
|
);
|
|
|
|
React.useEffect(() => {
|
|
if (isTest) return;
|
|
const lastItem = virtualRows[virtualRows.length - 1];
|
|
if (!lastItem) return;
|
|
|
|
if (
|
|
lastItem.index >= flattenedRows.length - 1 &&
|
|
hasNextPage &&
|
|
!isFetchingNextPage
|
|
) {
|
|
fetchNextPage();
|
|
}
|
|
}, [
|
|
virtualRows,
|
|
flattenedRows.length,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
isTest,
|
|
]);
|
|
|
|
const visibleSelectableIds = React.useMemo(
|
|
() => new Set(deletableTenants.map((tenant) => tenant.id)),
|
|
[deletableTenants],
|
|
);
|
|
const visibleSelectedCount = selectedIds.filter((id) =>
|
|
visibleSelectableIds.has(id),
|
|
).length;
|
|
const normalizedSearch = search.trim();
|
|
const emptyMessage = React.useMemo(() => {
|
|
if (normalizedSearch) {
|
|
return t(
|
|
"msg.admin.tenants.empty_search",
|
|
"검색 조건에 맞는 테넌트가 없습니다.",
|
|
);
|
|
}
|
|
if (scopeTenantId) {
|
|
return t(
|
|
"msg.admin.tenants.empty_scope",
|
|
"선택한 범위에 표시할 하위 테넌트가 없습니다.",
|
|
);
|
|
}
|
|
return t("msg.admin.tenants.empty", "아직 등록된 테넌트가 없습니다.");
|
|
}, [normalizedSearch, scopeTenantId]);
|
|
|
|
const renderRow = (
|
|
node: TenantViewRow,
|
|
index: number,
|
|
virtualRow?: { start: number; end: number },
|
|
) => {
|
|
const isSelected = selectedIds.includes(node.id);
|
|
const isSearchMatch = searchMatchIds.has(node.id);
|
|
const hasChildren =
|
|
viewMode === "tree" && node.children && node.children.length > 0;
|
|
const isExpanded =
|
|
viewMode === "tree" && (expandedIds.has(node.id) || !!search);
|
|
const TypeIcon = getTenantIcon(node.type);
|
|
|
|
return (
|
|
<TableRow
|
|
key={node.id}
|
|
data-index={index}
|
|
ref={virtualRow ? rowVirtualizer.measureElement : undefined}
|
|
className={cn(
|
|
isSelected ? "bg-primary/5" : "",
|
|
isSearchMatch
|
|
? "bg-amber-50/80 ring-1 ring-inset ring-amber-300"
|
|
: "",
|
|
"h-[73px]",
|
|
virtualRow ? "absolute left-0 w-full" : "",
|
|
)}
|
|
style={
|
|
virtualRow
|
|
? {
|
|
display: "grid",
|
|
gridTemplateColumns: tenantTableGridTemplateColumns,
|
|
minWidth: tenantTableMinWidth,
|
|
position: "absolute",
|
|
transform: `translateY(${virtualRow.start}px)`,
|
|
width: "100%",
|
|
}
|
|
: {
|
|
display: "grid",
|
|
gridTemplateColumns: tenantTableGridTemplateColumns,
|
|
minWidth: tenantTableMinWidth,
|
|
}
|
|
}
|
|
>
|
|
<TableCell className="text-center px-4">
|
|
{isSeedTenant(node) ? (
|
|
<span className="inline-block h-4 w-4" />
|
|
) : (
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={(checked) => onSelect(node, !!checked)}
|
|
/>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="p-0 font-semibold">
|
|
<div
|
|
className="flex h-full min-h-[3rem] items-center py-1"
|
|
style={{
|
|
paddingLeft:
|
|
viewMode === "tree" ? `${node.depth * 28 + 12}px` : "12px",
|
|
}}
|
|
>
|
|
{viewMode === "tree" && (
|
|
<div className="w-5 flex-shrink-0 items-center justify-center mr-1.5">
|
|
{hasChildren && !search ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleExpand(node.id)}
|
|
className="cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground"
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown size={16} />
|
|
) : (
|
|
<ChevronRight size={16} />
|
|
)}
|
|
</button>
|
|
) : (
|
|
node.depth > 0 && (
|
|
<div className="h-1 w-1 rounded-full bg-border" />
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<TypeIcon
|
|
size={14}
|
|
className="mr-2 flex-shrink-0 text-muted-foreground"
|
|
/>
|
|
|
|
<div className="min-w-0">
|
|
<div className="flex min-w-0 flex-wrap items-center gap-2">
|
|
<Link
|
|
to={`/tenants/${node.id}`}
|
|
className="block max-w-full truncate text-foreground transition-colors hover:text-primary hover:underline"
|
|
>
|
|
{node.name}
|
|
</Link>
|
|
{isSeedTenant(node) && (
|
|
<Badge
|
|
variant="secondary"
|
|
className="flex-shrink-0 text-[10px]"
|
|
>
|
|
{t("ui.admin.tenants.seed_badge", "초기 설정")}
|
|
</Badge>
|
|
)}
|
|
{isSearchMatch && (
|
|
<Badge
|
|
variant="outline"
|
|
className="flex-shrink-0 border-amber-300 bg-amber-100 text-[10px] font-semibold text-amber-900"
|
|
data-testid={`tenant-search-match-${node.id}`}
|
|
>
|
|
{t("ui.admin.tenants.search_match_badge", "검색 일치")}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{(() => {
|
|
const parentPath = tenantParentPathMap.get(node.id) ?? [];
|
|
return (
|
|
<p className="mt-0.5 truncate text-xs font-normal text-muted-foreground">
|
|
{parentPath.length > 0
|
|
? parentPath.join(" / ")
|
|
: t("ui.admin.tenants.path.root", "최상위")}
|
|
</p>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell
|
|
className="whitespace-nowrap overflow-hidden pl-5"
|
|
data-testid={`tenant-internal-id-${node.id}`}
|
|
>
|
|
<code className="inline-block max-w-full overflow-hidden rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground text-ellipsis">
|
|
{abbreviateUuid(node.id)}
|
|
</code>
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap overflow-visible">
|
|
{(() => {
|
|
const { primary, secondary } = splitTenantTypeLabel(
|
|
getTenantTypeLabel(node.type),
|
|
);
|
|
return (
|
|
<div className="flex min-w-0 flex-col leading-tight">
|
|
<span
|
|
className={cn(
|
|
"block max-w-full text-xs font-medium uppercase tracking-[0.04em]",
|
|
getTenantTypeTextClass(node.type),
|
|
)}
|
|
>
|
|
{primary}
|
|
</span>
|
|
{secondary ? (
|
|
<span className="mt-0.5 block max-w-none whitespace-nowrap text-[11px] text-muted-foreground">
|
|
{secondary}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})()}
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap overflow-hidden">
|
|
<code className="inline-flex max-w-full items-center overflow-hidden rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground text-ellipsis">
|
|
{node.slug}
|
|
</code>
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap">
|
|
<Badge
|
|
variant={node.status === "active" ? "default" : "muted"}
|
|
className={cn(
|
|
"px-3 py-1 text-xs uppercase",
|
|
node.status === "active"
|
|
? "border-transparent bg-blue-500 text-white hover:bg-blue-500/90 hover:text-white"
|
|
: "border-border bg-secondary/60 text-muted-foreground",
|
|
)}
|
|
>
|
|
{node.status === "active"
|
|
? t("ui.common.status.active", "활성")
|
|
: t("ui.common.status.inactive", "비활성")}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap pl-3">
|
|
<div className="flex flex-col leading-tight">
|
|
<span className="font-medium">
|
|
{t("ui.admin.tenants.table.members_count", "{{count}}명", {
|
|
count: node.recursiveMemberCount,
|
|
})}
|
|
</span>
|
|
<span className="mt-0.5 text-xs text-muted-foreground">
|
|
{t("ui.admin.tenants.table.members_recursive", "하위 포함")}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap text-right pl-1">
|
|
{node.updatedAt ? (
|
|
<div className="flex flex-col items-end leading-tight">
|
|
<span className="text-xs">
|
|
{new Date(node.updatedAt).toLocaleDateString("ko-KR")}
|
|
</span>
|
|
<span className="mt-0.5 text-xs text-muted-foreground">
|
|
{new Date(node.updatedAt).toLocaleTimeString("ko-KR")}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<span className="text-xs">-</span>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col overflow-hidden rounded-md border">
|
|
<div
|
|
ref={parentRef}
|
|
className="custom-scrollbar relative flex-1 overflow-auto"
|
|
data-testid="tenant-table-container"
|
|
>
|
|
<Table
|
|
className="relative border-separate border-spacing-0"
|
|
style={{ display: "grid", minWidth: tenantTableMinWidth }}
|
|
>
|
|
<TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
|
|
<TableRow
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: tenantTableGridTemplateColumns,
|
|
minWidth: tenantTableMinWidth,
|
|
}}
|
|
>
|
|
<TableHead
|
|
className={`${tenantTableHeadClassName} w-[48px] text-center`}
|
|
>
|
|
<div className="flex h-full items-center justify-center">
|
|
<Checkbox
|
|
checked={
|
|
deletableTenants.length > 0 &&
|
|
visibleSelectedCount === deletableTenants.length
|
|
}
|
|
onCheckedChange={(checked) => onSelectAll(!!checked)}
|
|
/>
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={`${tenantTableHeadInteractiveClassName} min-w-[500px]`}
|
|
onClick={() => requestSort("name")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.name", "NAME")}
|
|
{getSortIcon("name")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={`${tenantTableHeadInteractiveClassName} min-w-[220px] pl-5`}
|
|
onClick={() => requestSort("id")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.id", "ID")}
|
|
{getSortIcon("id")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={`${tenantTableHeadInteractiveClassName} pl-5`}
|
|
onClick={() => requestSort("type")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.type", "TYPE")}
|
|
{getSortIcon("type")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={`${tenantTableHeadInteractiveClassName} pl-5`}
|
|
onClick={() => requestSort("slug")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.slug", "SLUG")}
|
|
{getSortIcon("slug")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={`${tenantTableHeadInteractiveClassName} pl-5`}
|
|
onClick={() => requestSort("status")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.status", "STATUS")}
|
|
{getSortIcon("status")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={tenantTableHeadInteractiveClassName}
|
|
onClick={() => requestSort("recursiveMemberCount")}
|
|
>
|
|
<div className={tenantTableHeadContentClassName}>
|
|
{t("ui.admin.tenants.table.members", "MEMBERS")}
|
|
{getSortIcon("recursiveMemberCount")}
|
|
</div>
|
|
</TableHead>
|
|
<TableHead
|
|
className={tenantTableHeadInteractiveClassName}
|
|
onClick={() => requestSort("updatedAt")}
|
|
>
|
|
<div
|
|
className={`${tenantTableHeadContentClassName} justify-end`}
|
|
>
|
|
{t("ui.admin.tenants.table.updated", "UPDATED")}
|
|
{getSortIcon("updatedAt")}
|
|
</div>
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody
|
|
className="relative"
|
|
style={
|
|
shouldVirtualizeRows
|
|
? {
|
|
display: "grid",
|
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
minWidth: tenantTableMinWidth,
|
|
position: "relative",
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{flattenedRows.length === 0 && !isLoading && (
|
|
<TableRow
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: tenantTableGridTemplateColumns,
|
|
minWidth: tenantTableMinWidth,
|
|
}}
|
|
>
|
|
<TableCell
|
|
colSpan={8}
|
|
className="py-8 text-center text-muted-foreground"
|
|
style={{ gridColumn: "1 / -1" }}
|
|
>
|
|
{emptyMessage}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
|
|
{!shouldVirtualizeRows
|
|
? flattenedRows.map((row, index) => renderRow(row, index))
|
|
: virtualRows.map((virtualRow) =>
|
|
renderRow(
|
|
flattenedRows[virtualRow.index],
|
|
virtualRow.index,
|
|
virtualRow,
|
|
),
|
|
)}
|
|
|
|
{isFetchingNextPage && (
|
|
<TableRow
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: tenantTableGridTemplateColumns,
|
|
minWidth: tenantTableMinWidth,
|
|
}}
|
|
>
|
|
<TableCell colSpan={8} className="py-4 text-center">
|
|
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
|
<RefreshCw size={16} className="animate-spin" />
|
|
{t("msg.common.loading_more", "Loading more...")}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TenantListPage;
|