[V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]xml:file="public/v0-logo-dark.svg" isMerged="true" [V0_FILE]xml:file="public/v0-logo-light.svg" isMerged="true" [V0_FILE]typescriptreact:file="contexts/rbac-context.tsx" isMerged="true" "use client"; import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react"; import { type Role, ROLE_LABELS } from "@/lib/rbac"; import { can, canAll, canAny, getAllowedActions } from "@/lib/rbac/permissions"; import type { ActionId } from "@/lib/rbac/action-catalog"; import { useDevUser, type DevScopeType } from "@/lib/rbac/devUserContext"; import { hasAction, hasAnyAction, hasAllActions } from "@/lib/rbac/usePermission"; // --------------------------------------------------------------------------- // Template -> Role reverse mapping (for backward compat) // --------------------------------------------------------------------------- const TEMPLATE_TO_ROLE: Record = { tpl_platform_super_admin: "super_admin", tpl_platform_admin: "system_admin", tpl_customer_admin: "operator", tpl_maintenance_operator: "maintenance", tpl_municipality_viewer: "viewer", tpl_installer_operator: "maintenance", }; // --------------------------------------------------------------------------- // Context type // --------------------------------------------------------------------------- interface RBACContextType { currentRole: Role; setCurrentRole: (role: Role) => void; roleLabel: string; /** Action-based authorization (dev-mode-aware). */ can: (action: ActionId) => boolean; canAll: (actions: ActionId[]) => boolean; canAny: (actions: ActionId[]) => boolean; /** Dev-mode scope info */ devScopeType: DevScopeType; devScopeId: string; devRoleKey: string; /** Flat list of allowed actions for hasAction / hasAnyAction */ userActions: readonly ActionId[]; } const RBACContext = createContext(null); export function RBACProvider({ children }: { children: ReactNode }) { const [currentRole, setCurrentRole] = useState("super_admin"); const devUser = useDevUser(); // In dev mode, DevUser drives everything; derive Role from template for backward compat const effectiveRole = TEMPLATE_TO_ROLE[devUser.roleKey] ?? currentRole; const effectiveActions: readonly ActionId[] = devUser.actions; const canAction = useCallback( (action: ActionId) => hasAction(effectiveActions, action), [effectiveActions], ); const canAllActions = useCallback( (actions: ActionId[]) => hasAllActions(effectiveActions, actions), [effectiveActions], ); const canAnyActions = useCallback( (actions: ActionId[]) => hasAnyAction(effectiveActions, actions), [effectiveActions], ); // Sync effectiveRole back to currentRole so old hasAccess/getPermission still work const setRoleWithSync = useCallback((role: Role) => { setCurrentRole(role); }, []); return ( {children} ); } export function useRBAC() { const context = useContext(RBACContext); if (!context) { throw new Error("useRBAC must be used within a RBACProvider"); } return context; } [V0_FILE]typescript:file="lib/rbac.ts" isMerged="true" export type Role = | "super_admin" | "system_admin" | "operator" | "maintenance" | "viewer"; export const ROLE_LABELS: Record = { super_admin: "최고 관리자", system_admin: "시스템 관리자", operator: "운영자", maintenance: "현장 유지보수", viewer: "모니터링 사용자", }; export type Section = "admin" | "cms" | "rms" | "tablet" | "registry" | "analysis" | "field_ops"; export type Permission = "full" | "partial" | "read_only" | "summary" | "none"; // Access matrix for each section/role combination export const ACCESS_MATRIX: Record> = { admin: { super_admin: "full", system_admin: "partial", operator: "none", maintenance: "none", viewer: "none", }, registry: { super_admin: "full", system_admin: "full", operator: "read_only", maintenance: "read_only", viewer: "none", }, cms: { super_admin: "full", system_admin: "full", operator: "full", // scoped full access maintenance: "none", viewer: "read_only", }, rms: { super_admin: "full", system_admin: "full", operator: "summary", maintenance: "full", viewer: "read_only", }, tablet: { super_admin: "read_only", system_admin: "read_only", operator: "none", maintenance: "full", viewer: "none", }, analysis: { super_admin: "full", system_admin: "full", operator: "read_only", maintenance: "read_only", viewer: "read_only", }, field_ops: { super_admin: "full", system_admin: "full", operator: "partial", maintenance: "full", viewer: "read_only", }, }; export function hasAccess(role: Role, section: Section): boolean { return ACCESS_MATRIX[section][role] !== "none"; } export function getPermission(role: Role, section: Section): Permission { return ACCESS_MATRIX[section][role]; } export function isReadOnly(role: Role, section: Section): boolean { return ACCESS_MATRIX[section][role] === "read_only"; } export function canPerformActions(role: Role, section: Section): boolean { const permission = ACCESS_MATRIX[section][role]; return permission === "full" || permission === "partial"; } /** * SSOT: DevTools access check. * Only super_admin may access DevTools pages (state engine validation, data contract, etc.). * This is the single source of truth -- used by sidebar, route guards, and page components. */ export function canAccessDevTools(role: Role): boolean { return role === "super_admin"; } [V0_FILE]typescriptreact:file="components/app-header.tsx" isMerged="true" "use client"; import { Bell, ChevronDown, Search, User, LogOut, Key, AlertTriangle, WifiOff } from "lucide-react"; import { useRBAC } from "@/contexts/rbac-context"; import { EnvironmentSwitcher } from "@/components/dev/EnvironmentSwitcher"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { SidebarTrigger } from "@/components/ui/sidebar"; import { ScopeSwitcher } from "@/components/scope-switcher"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; // System status indicator showing CRITICAL and OFFLINE device counts function SystemStatusIndicator() { // Mock data - in production, this would come from a real-time context/API const criticalCount = 2; const offlineCount = 5; if (criticalCount === 0 && offlineCount === 0) { return (

정상 운영

모든 장치가 정상 운영 중입니다

); } return (

{criticalCount > 0 && ( {criticalCount} )} {offlineCount > 0 && ( {offlineCount} )}

CRITICAL: {criticalCount}대 / OFFLINE: {offlineCount}대

); } export function AppHeader() { const { currentRole, setCurrentRole, roleLabel } = useRBAC(); return (

{/* Scope Switcher */} {/* Global Search */}

{/* System Status Indicator */} {/* Environment Switcher (DEV only) */} {/* Notifications */} 알림

장치 오프라인 알림

정류장-004 연결 끊김 (2시간 전)

배터리 경고

정류장-003 배터리 23% (1시간 전)

배포 완료

설 연휴 콘텐츠 업데이트 ��료 (3시간 전)

{/* User Profile Menu */} 내 계정 프로필 비밀번호 변경 로그아웃

); } [V0_FILE]typescriptreact:file="components/access-denied.tsx" isMerged="true" "use client"; import { ShieldX } from "lucide-react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; export function AccessDenied() { return (

접근 권한 없음 현재 역할로는 이 페이지에 접근할 수 없습니다.
필요한 경우 관리자에게 문의하세요.

); } [V0_FILE]typescriptreact:file="app/display/layout.tsx" isMerged="true" import React from "react"; import type { Metadata, Viewport } from "next"; export const metadata: Metadata = { title: "버스정보안내", description: "E-paper 버스정보시스템 단말 화면", }; export const viewport: Viewport = { themeColor: "#ffffff", width: "device-width", initialScale: 1, userScalable: false, }; export default function DisplayLayout({ children, }: { children: React.ReactNode; }) { return (

{children}

); } [V0_FILE]plaintext:file="app/(portal)/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(portal)/admin/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(portal)/admin/audit/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(portal)/admin/roles/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(portal)/admin/scopes/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="app/(portal)/admin/users/.gitkeep" isMerged="true" [V0_FILE]typescriptreact:file="app/display/state/normal/page.tsx" isMerged="true" import DisplayFrame from "@/components/display/DisplayFrame"; import { DisplayRenderer } from "@/components/display/DisplayRenderer"; import { resolveDisplayViewModel } from "@/lib/display/resolver/shared-display-resolver"; import { buildMockContent, buildMockRoutes } from "@/lib/display/resolver/mock-data"; export default function DisplayNormalPreviewPage({ searchParams, }: { searchParams?: { deviceId?: string; deviceProfile?: string }; }) { const deviceId = searchParams?.deviceId; const deviceProfile = (searchParams?.deviceProfile ?? "SOLAR") as "GRID" | "SOLAR"; const vm = resolveDisplayViewModel({ content: buildMockContent(), context: { deviceId: deviceId ?? "preview", deviceProfile, displayState: "NORMAL", socLevel: "NORMAL", now: new Date(), routes: buildMockRoutes("NORMAL"), }, }); return ( {deviceId && (

ID: {deviceId}

)} ); } [V0_FILE]typescriptreact:file="app/display/state/low/page.tsx" isMerged="true" import DisplayFrame from "@/components/display/DisplayFrame"; import { DisplayRenderer } from "@/components/display/DisplayRenderer"; import { resolveDisplayViewModel } from "@/lib/display/resolver/shared-display-resolver"; import { buildMockContent, buildMockRoutes } from "@/lib/display/resolver/mock-data"; export default function DisplayLowPowerPreviewPage({ searchParams, }: { searchParams?: { deviceId?: string; deviceProfile?: string }; }) { const deviceId = searchParams?.deviceId; const deviceProfile = (searchParams?.deviceProfile ?? "SOLAR") as "GRID" | "SOLAR"; const vm = resolveDisplayViewModel({ content: buildMockContent(), context: { deviceId: deviceId ?? "preview", deviceProfile, // LOW_POWER is derived from SOC, not displayState displayState: "NORMAL", socLevel: "LOW_POWER", now: new Date(), routes: buildMockRoutes("LOW_POWER"), }, }); return ( {deviceId && (

ID: {deviceId}

)} ); } [V0_FILE]typescriptreact:file="app/display/state/critical/page.tsx" isMerged="true" import DisplayFrame from "@/components/display/DisplayFrame"; import { DisplayRenderer } from "@/components/display/DisplayRenderer"; import { resolveDisplayViewModel } from "@/lib/display/resolver/shared-display-resolver"; import { buildMockContent, buildMockRoutes } from "@/lib/display/resolver/mock-data"; export default function DisplayCriticalPreviewPage({ searchParams, }: { searchParams?: { deviceId?: string; deviceProfile?: string }; }) { const deviceId = searchParams?.deviceId; const deviceProfile = (searchParams?.deviceProfile ?? "SOLAR") as "GRID" | "SOLAR"; const vm = resolveDisplayViewModel({ content: buildMockContent(), context: { deviceId: deviceId ?? "preview", deviceProfile, displayState: "CRITICAL", socLevel: "NORMAL", now: new Date(), routes: buildMockRoutes("CRITICAL"), }, }); return ( {deviceId && (

ID: {deviceId}

)} ); } [V0_FILE]typescriptreact:file="app/display/state/offline/page.tsx" isMerged="true" import DisplayFrame from "@/components/display/DisplayFrame"; import { DisplayRenderer } from "@/components/display/DisplayRenderer"; import { resolveDisplayViewModel } from "@/lib/display/resolver/shared-display-resolver"; import { buildMockContent, buildMockRoutes } from "@/lib/display/resolver/mock-data"; export default function DisplayOfflinePreviewPage({ searchParams, }: { searchParams?: { deviceId?: string; deviceProfile?: string }; }) { const deviceId = searchParams?.deviceId; const deviceProfile = (searchParams?.deviceProfile ?? "SOLAR") as "GRID" | "SOLAR"; const vm = resolveDisplayViewModel({ content: buildMockContent(), context: { deviceId: deviceId ?? "preview", deviceProfile, displayState: "OFFLINE", socLevel: "NORMAL", now: new Date(), routes: buildMockRoutes("OFFLINE"), }, }); return ( {deviceId && (

ID: {deviceId}

)} ); } [V0_FILE]typescriptreact:file="contexts/scope-context.tsx" isMerged="true" "use client"; import { createContext, useContext, useState, useMemo, type ReactNode } from "react"; import type { Role } from "@/lib/rbac"; // --- Scope hierarchy types --- export interface BIS { id: string; name: string; // e.g. "강남역 1번출구" deviceId: string; // linked device ID } export interface BISGroup { id: string; name: string; // e.g. "강남구 그룹 A" bisList: BIS[]; } export interface Customer { id: string; name: string; // e.g. "서울교통공사" bisGroups: BISGroup[]; } export interface Stakeholder { id: string; name: string; // e.g. "E-paper BIS 서비스" customers: Customer[]; } // --- Selected scope --- export type ScopeLevel = "all" | "customer" | "bisGroup" | "bis"; export interface SelectedScope { level: ScopeLevel; stakeholderId?: string; customerId?: string; bisGroupId?: string; bisId?: string; label: string; // human-readable label for the header } // --- Mock registry data --- export const REGISTRY: Stakeholder = { id: "STK001", name: "E-paper BIS 서비스", customers: [ { id: "CUS001", name: "서울교통공사", bisGroups: [ { id: "GRP001", name: "강남구 그룹 A", bisList: [ { id: "BIS001", name: "강남역 1번출구", deviceId: "DEV001" }, { id: "BIS002", name: "역삼역 2번출구", deviceId: "DEV002" }, ], }, { id: "GRP002", name: "서초구 그룹 B", bisList: [ { id: "BIS003", name: "서초역 3번출구", deviceId: "DEV003" }, { id: "BIS004", name: "교대역 앞", deviceId: "DEV004" }, ], }, ], }, { id: "CUS002", name: "경기교통정보센터", bisGroups: [ { id: "GRP003", name: "성남시 그룹", bisList: [ { id: "BIS005", name: "분당 정자역 앞", deviceId: "DEV005" }, { id: "BIS006", name: "야탑역 1번출구", deviceId: "DEV006" }, ], }, ], }, { id: "CUS003", name: "인천교통공사", bisGroups: [ { id: "GRP004", name: "연수구 그룹", bisList: [ { id: "BIS007", name: "연수구청역 앞", deviceId: "DEV007" }, ], }, { id: "GRP005", name: "남동구 그룹", bisList: [ { id: "BIS008", name: "인천시청역 앞", deviceId: "DEV008" }, ], }, ], }, ], }; // Role-based access to customers const ROLE_CUSTOMER_ACCESS: Record = { super_admin: "all", system_admin: "all", operator: ["CUS001"], // only their own customer maintenance: ["CUS001", "CUS002"], // assigned customers viewer: ["CUS001"], }; // --- Context --- interface ScopeContextType { scope: SelectedScope; setScope: (scope: SelectedScope) => void; registry: Stakeholder; accessibleCustomers: Customer[]; canSelectAll: boolean; } const ScopeContext = createContext(null); export function ScopeProvider({ children, currentRole, }: { children: ReactNode; currentRole: Role; }) { const [scope, setScope] = useState({ level: "all", label: "전체 고객사", }); const accessibleCustomers = useMemo(() => { const access = ROLE_CUSTOMER_ACCESS[currentRole]; if (access === "all") return REGISTRY.customers; return REGISTRY.customers.filter((c) => access.includes(c.id)); }, [currentRole]); const canSelectAll = useMemo(() => { return currentRole === "super_admin" || currentRole === "system_admin"; }, [currentRole]); // Reset scope if role changes and current scope is no longer accessible useMemo(() => { if (!canSelectAll && scope.level === "all") { if (accessibleCustomers.length === 1) { setScope({ level: "customer", customerId: accessibleCustomers[0].id, label: accessibleCustomers[0].name, }); } } }, [canSelectAll, accessibleCustomers, scope.level]); return ( {children} ); } export function useScope() { const context = useContext(ScopeContext); if (!context) { throw new Error("useScope must be used within a ScopeProvider"); } return context; } [V0_FILE]typescript:file="lib/permission-helpers.ts" isMerged="true" /** * Permission-aware data filtering utilities. * * Roles & visibility rules: * - super_admin / system_admin → all customers, all groups, all BIS. * - operator (customer user) → own customer's data only. * - maintenance → assigned customers; can manage devices & peripherals. * - viewer → own customer's data, read-only. */ import type { Role } from "@/lib/rbac"; import type { SelectedScope } from "@/contexts/scope-context"; // --------------------------------------------------------------------------- // 1. Customer access mapping (mirrors ROLE_CUSTOMER_ACCESS in scope-context) // --------------------------------------------------------------------------- const ROLE_CUSTOMER_ACCESS: Record = { super_admin: "all", system_admin: "all", operator: ["CUS001"], maintenance: ["CUS001", "CUS002"], viewer: ["CUS001"], }; export function getAccessibleCustomerIds(role: Role): string[] | "all" { return ROLE_CUSTOMER_ACCESS[role]; } export function canAccessCustomer(role: Role, customerId: string): boolean { const access = ROLE_CUSTOMER_ACCESS[role]; if (access === "all") return true; return access.includes(customerId); } // --------------------------------------------------------------------------- // 2. Device → Customer mapping // --------------------------------------------------------------------------- /** Derive the customer ID that owns a given device. */ const DEVICE_CUSTOMER_MAP: Record = { DEV001: "CUS001", DEV002: "CUS001", DEV003: "CUS001", DEV004: "CUS001", DEV005: "CUS002", DEV006: "CUS002", DEV007: "CUS003", DEV008: "CUS003", }; export function getDeviceCustomerId(deviceId: string): string { return DEVICE_CUSTOMER_MAP[deviceId] || ""; } // --------------------------------------------------------------------------- // 3. Region → Customer mapping (for CMS messages that have region but no customerId) // --------------------------------------------------------------------------- const REGION_CUSTOMER_MAP: Record = { 서울: ["CUS001"], 경기: ["CUS002"], 인천: ["CUS003"], 전체: ["CUS001", "CUS002", "CUS003"], }; export function getCustomersByRegion(region: string): string[] { return REGION_CUSTOMER_MAP[region] || []; } // --------------------------------------------------------------------------- // 4. Group → Customer mapping (CMS target groups use region-based groups) // --------------------------------------------------------------------------- const GROUP_CUSTOMER_MAP: Record = { 강남구: "CUS001", 서초구: "CUS001", 성남시: "CUS002", 연수구: "CUS003", 남동구: "CUS003", }; export function getGroupCustomerId(groupName: string): string { return GROUP_CUSTOMER_MAP[groupName] || ""; } // --------------------------------------------------------------------------- // 5. Generic scope-based filter predicate // --------------------------------------------------------------------------- /** * Returns true if an item (identified by its customerId) should be visible * for the given role + selected scope. */ export function isItemVisibleByScope( role: Role, scope: SelectedScope, itemCustomerId: string ): boolean { // Step 1: role-based access check if (!canAccessCustomer(role, itemCustomerId)) return false; // Step 2: scope-level narrowing (if scope is set to a specific customer) if (scope.level === "all") return true; if (scope.customerId && scope.customerId !== itemCustomerId) return false; return true; } /** * Checks whether a device matches the current scope down to BIS-group or individual BIS. */ export function isDeviceVisibleByScope( role: Role, scope: SelectedScope, deviceId: string, deviceGroup?: string // optional group name (e.g. "강남구") ): boolean { const customerId = getDeviceCustomerId(deviceId); if (!isItemVisibleByScope(role, scope, customerId)) return false; // Narrow to BIS group if (scope.level === "bisGroup" && scope.bisGroupId) { // Map scope bisGroupId → group name via REGISTRY // For simplicity, we check by group name if provided if (deviceGroup) { const groupCustomer = getGroupCustomerId(deviceGroup); if (groupCustomer !== customerId) return false; } } // Narrow to individual BIS if (scope.level === "bis" && scope.bisId) { // BIS ID maps to device ID in our mock data const bisToDevice: Record = { BIS001: "DEV001", BIS002: "DEV002", BIS003: "DEV003", BIS004: "DEV004", BIS005: "DEV005", BIS006: "DEV006", BIS007: "DEV007", BIS008: "DEV008", }; const mappedDeviceId = bisToDevice[scope.bisId]; if (mappedDeviceId && mappedDeviceId !== deviceId) return false; } return true; } // --------------------------------------------------------------------------- // 6. CMS-specific: check if message is visible (uses region + groups + devices) // --------------------------------------------------------------------------- export function isCMSMessageVisible( role: Role, scope: SelectedScope, msg: { region: string; targetScope: string; targetGroups: string[]; targetDevices: string[]; } ): boolean { const accessibleIds = getAccessibleCustomerIds(role); // For "all" target scope messages, check if any of the user's customers match the region if (msg.targetScope === "all") { if (accessibleIds === "all") { // Further narrow by scope selection if (scope.level === "all") return true; return true; // "all" targeted messages are always relevant within any scope } // Check if any accessible customer is in the message's region const regionCustomers = getCustomersByRegion(msg.region); if (!regionCustomers.some((c) => accessibleIds.includes(c))) return false; } // For group-targeted messages if (msg.targetScope === "group") { const msgCustomers = msg.targetGroups.map(getGroupCustomerId); if (accessibleIds !== "all") { if (!msgCustomers.some((c) => accessibleIds.includes(c))) return false; } // Scope narrowing if (scope.level === "customer" && scope.customerId) { if (!msgCustomers.includes(scope.customerId)) return false; } } // For individual device-targeted messages if (msg.targetScope === "individual") { const msgCustomers = msg.targetDevices.map(getDeviceCustomerId); if (accessibleIds !== "all") { if (!msgCustomers.some((c) => accessibleIds.includes(c))) return false; } if (scope.level === "customer" && scope.customerId) { if (!msgCustomers.includes(scope.customerId)) return false; } } return true; } // --------------------------------------------------------------------------- // 7. Action permissions // --------------------------------------------------------------------------- /** * Whether the current role can create CMS content (messages). * Maintenance vendors cannot access CMS content creation. */ export function canCreateCMSContent(role: Role): boolean { return role !== "maintenance" && role !== "viewer"; } /** * Whether the current role can manage devices and peripherals (registry). * Maintenance vendors can manage at customer→group→BIS level for assigned customers. */ export function canManageDevices(role: Role): boolean { return ["super_admin", "system_admin", "maintenance"].includes(role); } /** * Whether an action button should be shown (hidden rather than disabled). */ export function shouldShowAction( role: Role, action: "create" | "edit" | "delete" | "deploy" | "approve" ): boolean { switch (action) { case "create": case "edit": return ["super_admin", "system_admin", "operator"].includes(role); case "delete": return ["super_admin", "system_admin"].includes(role); case "deploy": return ["super_admin", "system_admin", "operator"].includes(role); case "approve": return ["super_admin", "system_admin"].includes(role); default: return false; } } [V0_FILE]typescriptreact:file="components/scope-switcher.tsx" isMerged="true" "use client"; import { useState, useMemo, useRef, useEffect } from "react"; import { Building2, ChevronDown, ChevronRight, Globe, Layers, MapPin, Check, Search, X, } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Button } from "@/components/ui/button"; import { useScope, type ScopeLevel, type Customer } from "@/contexts/scope-context"; import { cn } from "@/lib/utils"; // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const SCOPE_ICONS: Record = { all: Globe, customer: Building2, bisGroup: Layers, bis: MapPin, }; const LEVEL_LABELS: Record = { all: "전체", customer: "고객사", bisGroup: "BIS 그룹", bis: "개별 BIS", }; // --------------------------------------------------------------------------- // Breadcrumb builder // --------------------------------------------------------------------------- function buildBreadcrumb( level: ScopeLevel, label: string, customers: Customer[], ids: { customerId?: string; bisGroupId?: string; bisId?: string } ): string[] { if (level === "all") return ["전체 고객사"]; const parts: string[] = []; const cust = customers.find((c) => c.id === ids.customerId); if (!cust) return [label]; parts.push(cust.name); if (level === "customer") return parts; const grp = cust.bisGroups.find((g) => g.id === ids.bisGroupId); if (!grp) return parts; parts.push(grp.name); if (level === "bisGroup") return parts; const bis = grp.bisList.find((b) => b.id === ids.bisId); if (bis) parts.push(bis.name); return parts; } // --------------------------------------------------------------------------- // Search matching helpers // --------------------------------------------------------------------------- interface SearchMatch { type: ScopeLevel; label: string; parentPath: string; customerId: string; bisGroupId?: string; bisId?: string; } function searchTree(customers: Customer[], query: string): SearchMatch[] { const q = query.toLowerCase(); const results: SearchMatch[] = []; for (const cust of customers) { if (cust.name.toLowerCase().includes(q)) { results.push({ type: "customer", label: cust.name, parentPath: "", customerId: cust.id, }); } for (const grp of cust.bisGroups) { if (grp.name.toLowerCase().includes(q)) { results.push({ type: "bisGroup", label: grp.name, parentPath: cust.name, customerId: cust.id, bisGroupId: grp.id, }); } for (const bis of grp.bisList) { if ( bis.name.toLowerCase().includes(q) || bis.deviceId.toLowerCase().includes(q) ) { results.push({ type: "bis", label: bis.name, parentPath: `${cust.name} / ${grp.name}`, customerId: cust.id, bisGroupId: grp.id, bisId: bis.id, }); } } } } return results; } // --------------------------------------------------------------------------- // Total BIS count // --------------------------------------------------------------------------- function countBIS(customers: Customer[]): number { return customers.reduce( (sum, c) => sum + c.bisGroups.reduce((gs, g) => gs + g.bisList.length, 0), 0 ); } // --------------------------------------------------------------------------- // Component // --------------------------------------------------------------------------- export function ScopeSwitcher() { const { scope, setScope, accessibleCustomers, canSelectAll } = useScope(); const [open, setOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [expandedCustomers, setExpandedCustomers] = useState>( new Set() ); const [expandedGroups, setExpandedGroups] = useState>( new Set() ); const searchRef = useRef(null); // Focus search input when popover opens useEffect(() => { if (open) { setTimeout(() => searchRef.current?.focus(), 0); } else { setSearchQuery(""); } }, [open]); // Search results const searchResults = useMemo(() => { if (!searchQuery.trim()) return null; return searchTree(accessibleCustomers, searchQuery.trim()); }, [searchQuery, accessibleCustomers]); const toggleCustomer = (id: string) => { setExpandedCustomers((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; const toggleGroup = (id: string) => { setExpandedGroups((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; const handleSelect = ( level: ScopeLevel, label: string, ids: { customerId?: string; bisGroupId?: string; bisId?: string } ) => { setScope({ level, label, ...ids }); setOpen(false); }; // Breadcrumb parts for the trigger const breadcrumbParts = buildBreadcrumb( scope.level, scope.label, accessibleCustomers, { customerId: scope.customerId, bisGroupId: scope.bisGroupId, bisId: scope.bisId } ); const ScopeIcon = SCOPE_ICONS[scope.level]; return ( {/* ---------------------------------------------------------------- */} {/* Trigger: breadcrumb-like label */} {/* ---------------------------------------------------------------- */} {/* ---------------------------------------------------------------- */} {/* Content */} {/* ---------------------------------------------------------------- */} {/* Header */}

운영 범위 선택

선택한 범위에 따라 CMS/RMS 화면의 데이터가 필터링됩니다

{/* Search */}

setSearchQuery(e.target.value)} placeholder="고객사 / BIS 그룹 / 개별 BIS 검색..." className="w-full rounded-md border border-input bg-background px-8 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" /> {searchQuery && ( )}

{/* ------------------------------------------------------------ */} {/* Search results mode */} {/* ------------------------------------------------------------ */} {searchResults !== null ? (

{searchResults.length === 0 ? (

검색 결과가 없습니다

) : ( searchResults.map((item, idx) => { const Icon = SCOPE_ICONS[item.type]; const isSelected = scope.level === item.type && (item.type === "customer" ? scope.customerId === item.customerId : item.type === "bisGroup" ? scope.bisGroupId === item.bisGroupId : scope.bisId === item.bisId); return ( ); }) )}

) : ( /* ---------------------------------------------------------- */ /* Tree browse mode */ /* ---------------------------------------------------------- */

{/* "All Customers" root node */} {canSelectAll && ( )} {/* Customer nodes */} {accessibleCustomers.map((customer) => { const isCustExpanded = expandedCustomers.has(customer.id); const isCustSelected = scope.level === "customer" && scope.customerId === customer.id; const custBISCount = customer.bisGroups.reduce( (s, g) => s + g.bisList.length, 0 ); return (

{/* Customer row */}

{/* BIS Group children */} {isCustExpanded && customer.bisGroups.map((group) => { const isGrpExpanded = expandedGroups.has(group.id); const isGrpSelected = scope.level === "bisGroup" && scope.bisGroupId === group.id; return (

{/* Group row */}

{/* Individual BIS leaves */} {isGrpExpanded && group.bisList.map((bis) => { const isBisSelected = scope.level === "bis" && scope.bisId === bis.id; return ( ); })}

); })}

)} {/* Footer: scope guidance */}

현재: {LEVEL_LABELS[scope.level]} {scope.label}

선택된 범위가 대시보드, CMS 콘텐츠 목록, RMS 모니터링 BIS 단말 목록, 알림 등 모든 화면의 데이터 필터로 적용됩니다.

); } [V0_FILE]typescriptreact:file="components/registry/common/RegistryInlineConfirm.tsx" isMerged="true" "use client"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Ban } from "lucide-react"; import { cn } from "@/lib/utils"; export interface RegistryInlineConfirmProps { /** Heading text, e.g. "삭제 확인" */ title: string; /** 1 or more description lines rendered sequentially */ descriptions: string[]; /** Label for the confirm button (default: "삭제") */ confirmLabel?: string; /** Label for the cancel button (default: "취소") */ cancelLabel?: string; onConfirm: () => void; onCancel: () => void; /** Optionally disable the confirm button */ disabled?: boolean; className?: string; } /** * Inline confirmation card for destructive actions. * Replaces modal dialogs per Registry Constitution. */ export function RegistryInlineConfirm({ title, descriptions, confirmLabel = "삭제", cancelLabel = "취소", onConfirm, onCancel, disabled = false, className, }: RegistryInlineConfirmProps) { return ( {title} {descriptions.map((desc, i) => (

{desc}

))}

); } [V0_FILE]typescriptreact:file="components/registry/common/RegistryDangerZone.tsx" isMerged="true" "use client"; import { Button } from "@/components/ui/button"; import { AlertTriangle, ShieldAlert, Trash2 } from "lucide-react"; import { RegistryInlineConfirm } from "./RegistryInlineConfirm"; export interface RegistryDangerZoneProps { /** Primary label for the action button, e.g. "삭제" */ actionLabel: string; /** Short description of what the action does */ actionDescription: string; /** Whether the action is blocked by constraints */ disabled?: boolean; /** Reason shown when disabled */ disabledReason?: string; /** Whether the inline confirmation is currently visible */ confirming: boolean; /** Title for the inline confirmation card */ confirmTitle: string; /** Description lines for the inline confirmation card */ confirmDescriptions: string[]; /** Called when the user clicks the danger zone button (initiate confirmation) */ onInitiate: () => void; /** Called when the user confirms the action */ onConfirm: () => void; /** Called when the user cancels the confirmation */ onCancel: () => void; /** Override the section heading (default: "위험 구역") */ title?: string; /** Hide the section heading entirely */ hideTitle?: boolean; } /** * Standard Danger Zone section for Registry detail panels. * Toggles between the action button and inline confirmation. * No modal dialogs per Registry Constitution. */ export function RegistryDangerZone({ actionLabel, actionDescription, disabled = false, disabledReason, confirming, confirmTitle, confirmDescriptions, onInitiate, onConfirm, onCancel, title: sectionTitle = "위험 구역", hideTitle = false, }: RegistryDangerZoneProps) { if (confirming) { return (

); } return (

{!hideTitle &&

{sectionTitle}

}

{actionDescription}

{disabled && disabledReason && (

{disabledReason}

)}

); } [V0_FILE]typescriptreact:file="app/(portal)/cms/messages/[id]/archived/page.tsx" isMerged="true" "use client"; import React from "react" import { useParams, useRouter } from "next/navigation"; import { ArrowLeft, Clock, CheckCircle2, XCircle, Send, Archive, Radio, FileText, } from "lucide-react"; import { useRBAC } from "@/contexts/rbac-context"; import { mockCMSMessages } from "@/lib/mock-data"; import type { MessageType, TargetScope, ApprovalHistoryEntry } from "@/lib/mock-data"; import { AccessDenied } from "@/components/access-denied"; import { PageHeader } from "@/components/page-header"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Card, CardContent, CardHeader, CardTitle, CardDescription, } from "@/components/ui/card"; // ============================================================================ // Label maps // ============================================================================ const typeLabels: Record< MessageType, { label: string; variant: "default" | "secondary" | "outline" | "destructive" } > = { operation: { label: "운영", variant: "default" }, emergency: { label: "비상", variant: "destructive" }, promotion: { label: "홍보", variant: "secondary" }, default: { label: "기본", variant: "outline" }, }; const scopeLabels: Record = { all: "전체", region: "지역", group: "그룹", individual: "개별", }; const historyActionLabels: Record; color: string }> = { created: { label: "메시지 생성", icon: FileText, color: "text-muted-foreground" }, approval_requested: { label: "승인 요청", icon: Send, color: "text-blue-600" }, approved: { label: "승인 완료", icon: CheckCircle2, color: "text-green-600" }, rejected: { label: "반려", icon: XCircle, color: "text-destructive" }, published: { label: "배포 시작", icon: Radio, color: "text-primary" }, publish_ended: { label: "배포 종료", icon: Clock, color: "text-orange-600" }, archived: { label: "보관 처리", icon: Archive, color: "text-muted-foreground" }, }; // ============================================================================ // Timeline sub-component // ============================================================================ function ApprovalTimeline({ history }: { history: ApprovalHistoryEntry[] }) { return (

{/* Vertical line */}

{history.map((entry, index) => { const config = historyActionLabels[entry.action] ?? { label: entry.action, icon: Clock, color: "text-muted-foreground", }; const Icon = config.icon; const isLast = index === history.length - 1; return (

{config.label} {entry.actor}

{entry.timestamp}

{entry.detail && (

{entry.detail}

)}

); })}

); } // ============================================================================ // Main page // ============================================================================ export default function ArchivedMessageDetailPage() { const { id } = useParams<{ id: string }>(); const router = useRouter(); const { can } = useRBAC(); if (!can("cms.content.read")) { return ; } const message = mockCMSMessages.find( (m) => m.id === id && m.lifecycle === "archived" ); if (!message) { return (

해당 보관 메시지를 찾을 수 없습니다.

); } return (

{/* Back button */}

{/* Left: Message summary + content */}

{/* Summary card */}

보관됨 {typeLabels[message.type].label} {message.id}

{message.title} {message.archivedAt && `보관일: ${message.archivedAt}`} {/* Content read-only */}

메시지 내용

{message.content}

{/* Metadata grid */}

유형: {typeLabels[message.type].label}

지역: {message.region}

적용 범위: {scopeLabels[message.targetScope]} {message.targetScope === "group" && message.targetGroups.length > 0 && ` (${message.targetGroups.join(", ")})`} {message.targetScope === "individual" && message.targetDevices.length > 0 && ` (${message.targetDevices.join(", ")})`}

작성자: {message.createdBy}

생성일: {message.createdAt}

최종 수정일: {message.updatedAt || message.createdAt}

{message.approvedBy && (

승인자: {message.approvedBy}

)} {message.deployedAt && (

배포일: {message.deployedAt}

)} {message.publishEndedAt && (

배포 종료일: {message.publishEndedAt}

)}

{/* Right: Approval & Publish History Timeline */}

승인 및 배포 이력 메시지의 전체 승인/배포 타임라인입니다. {message.history && message.history.length > 0 ? ( ) : (

이력 정보가 없습니다.

)}

); } [V0_FILE]typescriptreact:file="contexts/emergency-context.tsx" isMerged="true" "use client"; import React, { createContext, useContext, useState, useCallback } from "react"; import type { EmergencyModeState, EmergencyModeStatus, EmergencyAuditEntry } from "@/lib/mock-data"; import { initialEmergencyModeState, mockEmergencyAuditLog } from "@/lib/mock-data"; interface EmergencyContextValue { emergencyState: EmergencyModeState; auditLog: EmergencyAuditEntry[]; requestEmergency: (messageId: string, reason: string, requestedBy: string) => void; approveEmergency: (approvedBy: string) => void; deactivateEmergency: (deactivatedBy: string, reason: string) => void; isEmergencyActive: boolean; isEmergencyRequested: boolean; } const EmergencyContext = createContext(null); export function EmergencyProvider({ children }: { children: React.ReactNode }) { const [emergencyState, setEmergencyState] = useState(initialEmergencyModeState); const [auditLog, setAuditLog] = useState(mockEmergencyAuditLog); const requestEmergency = useCallback((messageId: string, reason: string, requestedBy: string) => { const now = new Date().toISOString().replace("T", " ").slice(0, 16); setEmergencyState({ status: "requested", messageId, reason, requestedBy, requestedAt: now, }); setAuditLog((prev) => [ { id: `EA${String(prev.length + 1).padStart(3, "0")}`, action: "requested", actor: requestedBy, timestamp: now, reason, messageId, }, ...prev, ]); }, []); const approveEmergency = useCallback((approvedBy: string) => { const now = new Date().toISOString().replace("T", " ").slice(0, 16); setEmergencyState((prev) => ({ ...prev, status: "active", approvedBy, activatedAt: now, })); setAuditLog((prev) => [ { id: `EA${String(prev.length + 1).padStart(3, "0")}`, action: "activated", actor: approvedBy, timestamp: now, reason: `비상 모드 승인 및 활성화`, messageId: emergencyState.messageId, }, ...prev, ]); }, [emergencyState.messageId]); const deactivateEmergency = useCallback((deactivatedBy: string, reason: string) => { const now = new Date().toISOString().replace("T", " ").slice(0, 16); setAuditLog((prev) => [ { id: `EA${String(prev.length + 1).padStart(3, "0")}`, action: "deactivated", actor: deactivatedBy, timestamp: now, reason, messageId: emergencyState.messageId, }, ...prev, ]); setEmergencyState({ ...emergencyState, status: "inactive", deactivatedAt: now, deactivationReason: reason, deactivatedBy, }); }, [emergencyState]); return ( {children} ); } export function useEmergency() { const ctx = useContext(EmergencyContext); if (!ctx) { throw new Error("useEmergency must be used within EmergencyProvider"); } return ctx; } [V0_FILE]typescriptreact:file="app/display/device/[id]/page.tsx" isMerged="true" import Link from "next/link"; import DisplayFrame from "@/components/display/DisplayFrame"; import { getOverallSnapshot } from "@/components/rms/shared/overall-state-mock"; import { resolveDisplayState, buildDisplayStateInput, DISPLAY_STATE_ROUTE, DISPLAY_STATE_LABEL, DISPLAY_STATE_DESC, LOW_POWER_SOC_THRESHOLD, type DisplayState, } from "@/lib/display-state"; // --------------------------------------------------------------------------- // Mock battery data per device (in production: from device telemetry) // --------------------------------------------------------------------------- const MOCK_BATTERY_SOC: Record = { DEV001: 82, DEV002: 45, DEV003: 8, // Low battery + Overall "경고" -> test conflict rule DEV004: 92, DEV005: 12, // Low battery + Overall "치명" -> CRITICAL wins DEV006: 67, DEV007: 35, DEV008: 55, DEV009: 10, DEV010: 5, // Low battery + Overall "오프라인" -> OFFLINE wins DEV011: 75, DEV012: 60, }; const MOCK_EMERGENCY_FLAG = false; // --------------------------------------------------------------------------- // All possible display states for the override picker // --------------------------------------------------------------------------- const ALL_STATES: DisplayState[] = ["NORMAL", "LOW_POWER", "CRITICAL", "OFFLINE", "EMERGENCY"]; export default async function DisplayDevicePreviewPage({ params, }: { params: Promise<{ id: string }>; }) { const { id } = await params; // -- Resolve display state using the hybrid engine (single source of truth) -- const snapshot = getOverallSnapshot(id); const soc = MOCK_BATTERY_SOC[id] ?? 50; const input = buildDisplayStateInput( snapshot.overallState, soc, MOCK_EMERGENCY_FLAG, ); const computedState = resolveDisplayState(input); const isLowPower = soc <= LOW_POWER_SOC_THRESHOLD; const computedRoute = `${DISPLAY_STATE_ROUTE[computedState]}?deviceId=${encodeURIComponent(id)}`; return (

{/* Header */}

단말 프리뷰

Hybrid 상태 판단 엔진이 실시간으로 Display 화면을 결정합니다.

ID: {id}

{/* Computed State Card */}

Hybrid Engine Result

{computedState} ({DISPLAY_STATE_LABEL[computedState]})

{DISPLAY_STATE_DESC[computedState]}

{/* Input summary */}

Overall

{snapshot.overallState}

Battery SOC

{soc}% {isLowPower && ( {"(<="}{LOW_POWER_SOC_THRESHOLD}{"% = LOW_POWER)"} )}

Emergency

{input.emergencyFlag ? "YES" : "NO"}

{/* Conflict rule applied */} {isLowPower && computedState !== "LOW_POWER" && (

{"Conflict rule: battery is low (SOC={soc}%), but Overall=\"{snapshot.overallState}\" " .replace("{soc}", String(soc)) .replace("{snapshot.overallState}", snapshot.overallState)} {"=> "} {computedState} wins over LOW_POWER

)} {/* Go to computed screen */}

{"Computed Screen: "}{computedState} {"->"} CMS Rendering {"->"}

{/* Manual State Override Links */}

Manual Override (프리뷰 직접 선택)

{ALL_STATES.map((state) => { const isComputed = state === computedState; return ( ); })}

{/* Footer */}

); } function PreviewLink({ href, title, desc, isActive, }: { href: string; title: string; desc: string; isActive?: boolean; }) { return (

{title}

{desc} {isActive && (= computed)}

); } [V0_FILE]typescript:file="lib/google-maps-loader.ts" isMerged="true" /** * Shared Google Maps script loader. * Ensures the Google Maps JS API is loaded exactly once across the entire app. * Both DeviceMap (dashboard) and LocationMapPanel (registry) reuse this. */ let loadPromise: Promise | null = null; /** * Fetches the API key from the server-side route and loads the Google Maps script. * Returns a resolved promise if already loaded. Throws if loading fails. */ export async function loadGoogleMapsScript(): Promise { // Already loaded if (window.google?.maps) return; // Already loading — deduplicate if (loadPromise) return loadPromise; loadPromise = (async () => { // 1. Fetch API key from server let apiKey = ""; try { const res = await fetch("/api/maps-key"); const data = await res.json(); apiKey = data.key; } catch { throw new Error("API 키를 가져올 수 없습니다."); } if (!apiKey) { throw new Error("Google Maps API 키가 설정되지 않았습니다."); } // 2. Check again — another component might have loaded it while we fetched if (window.google?.maps) return; // 3. Inject script tag return new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=marker,geometry,places&v=weekly`; script.async = true; script.onload = () => resolve(); script.onerror = () => { loadPromise = null; // allow retry reject(new Error("Google Maps 스크립트를 불러오는데 실패했습니다.")); }; document.head.appendChild(script); }); })(); return loadPromise; } [V0_FILE]typescript:file="app/api/maps-key/route.ts" isMerged="true" import { NextResponse } from "next/server"; export async function GET() { const apiKey = process.env.GOOGLE_MAPS_API_KEY || ""; return NextResponse.json({ key: apiKey }); } [V0_FILE]typescriptreact:file="components/registry/locations/LocationMinibar.tsx" isMerged="true" "use client"; import { X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { RegistryStatusBadge } from "@/components/registry/registry-shell"; import type { BusStopLocation } from "@/lib/mock-data"; interface LocationMinibarProps { location: BusStopLocation; onRestore: () => void; onClose: () => void; } export function LocationMinibar({ location, onRestore, onClose }: LocationMinibarProps) { return (

{location.name}

); } [V0_FILE]typescriptreact:file="components/registry/registry-shell.tsx" isMerged="true" "use client"; /** * Registry UI Grammar - Shared Components * * These components define the reusable visual language for all Registry screens. * Reference model: BIS Device Configuration screen. * * Pattern: * RegistryShell -> page-level two-column (or single-column) wrapper * RegistryKPIRow -> summary cards at the top * RegistryListPanel -> left-side filterable list with table * RegistryDetailPanel -> right-side detail/preview card area * RegistryStatusBadge -> consistent status badge rendering * RegistryEmptyState -> consistent empty state messaging * RegistryAssetBadge -> "In Use" / "Available" asset pool badges */ import React from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Search, Plus, Pencil, Trash2, MoreHorizontal } from "lucide-react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; // ============================================================================ // 1. RegistryShell - Two-column layout wrapper // ============================================================================ interface RegistryShellProps { /** Left column (list) content */ list: React.ReactNode; /** Right column (detail/preview) content, or null for full-width list */ detail: React.ReactNode | null; /** * @deprecated Use the default 50/50 split. * Kept for backward compat but ignored -- both panels are always 50%. */ listWidth?: string; /** If true, list takes full width (detail hidden) */ fullWidthList?: boolean; } /** * Two-column layout enforcing a strict 50 / 50 vertical split. * Both the list (left) and detail (right) panels occupy exactly half * the available width so neither dominates. Each panel scrolls internally. */ export function RegistryShell({ list, detail, fullWidthList = false, }: RegistryShellProps) { if (fullWidthList || !detail) { return

{list}

; } return (

{/* List panel -- exactly 50% */}

{list}

{/* Detail panel -- exactly 50% */}

{detail}

); } // ============================================================================ // 2. RegistryKPIRow - Summary stat cards row // ============================================================================ interface KPIStat { label: string; value: string | number; icon: React.ElementType; /** Optional accent color class for the value text, e.g. "text-green-600" */ accent?: string; /** Optional icon accent color class */ iconAccent?: string; /** Click handler for filtering */ onClick?: () => void; /** Whether this card is currently active/selected */ active?: boolean; } export function RegistryKPIRow({ stats, subtext }: { stats: KPIStat[]; subtext?: string }) { return (

{stats.map((s) => { const Icon = s.icon; const isClickable = !!s.onClick; return (

{s.label}

{s.value}

); })}

{subtext &&

{subtext}

}

); } // ============================================================================ // 3. RegistryListToolbar - Search bar + filters + action button // ============================================================================ export interface FilterOption { value: string; label: string; } interface RegistryListToolbarProps { searchPlaceholder: string; searchValue: string; onSearchChange: (v: string) => void; /** Array of filter dropdowns */ filters?: { value: string; onChange: (v: string) => void; options: FilterOption[]; placeholder?: string; width?: string; }[]; /** Total count label, e.g. "총 8건" */ countLabel?: string; /** Primary action button */ actionLabel?: string; onAction?: () => void; actionVisible?: boolean; /** Custom action element (replaces actionLabel/onAction) */ customAction?: React.ReactNode; } export function RegistryListToolbar({ searchPlaceholder, searchValue, onSearchChange, filters, countLabel, actionLabel, onAction, actionVisible = true, customAction, }: RegistryListToolbarProps) { return (

onSearchChange(e.target.value)} className="pl-8 h-9" />

{filters?.map((f, i) => ( ))}

{countLabel && ( {countLabel} )}

{customAction || (actionLabel && onAction && actionVisible && ( ))}

); } // ============================================================================ // 4. RegistryDetailHeader - Detail panel header with title + actions // ============================================================================ interface RegistryDetailHeaderProps { title: string; subtitle?: string; icon?: React.ElementType; status?: React.ReactNode; actions?: React.ReactNode; } export function RegistryDetailHeader({ title, subtitle, icon: Icon, status, actions, }: RegistryDetailHeaderProps) { return (

{Icon && }

{title}

{subtitle && (

{subtitle}

)}

{status &&

{status}

}

{actions &&

{actions}

}

); } // ============================================================================ // 5. RegistryStatusBadge - Consistent status rendering // ============================================================================ const STATUS_CONFIGS: Record< string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" } > = { active: { label: "운영중", variant: "default" }, inactive: { label: "비활성", variant: "secondary" }, onboarding: { label: "설정중", variant: "outline" }, online: { label: "온라인", variant: "default" }, offline: { label: "오프라인", variant: "secondary" }, warning: { label: "주의", variant: "outline" }, maintenance: { label: "점검중", variant: "outline" }, normal: { label: "정상", variant: "default" }, fault: { label: "장애", variant: "destructive" }, unapproved: { label: "미승인", variant: "outline" }, approved: { label: "승인됨", variant: "default" }, suspended: { label: "정지됨", variant: "destructive" }, critical: { label: "심각", variant: "destructive" }, degraded: { label: "저하", variant: "outline" }, good: { label: "양호", variant: "default" }, assigned: { label: "배정됨", variant: "default" }, unassigned: { label: "미배정", variant: "outline" }, }; export function RegistryStatusBadge({ status, className, customLabel, }: { status: string; className?: string; customLabel?: string; }) { const config = STATUS_CONFIGS[status] || { label: status, variant: "secondary" as const, }; return ( {customLabel || config.label} ); } // ============================================================================ // 6. RegistryAssetBadge - "In Use" / "Available" status for asset pool items // ============================================================================ export function RegistryAssetBadge({ assigned }: { assigned: boolean }) { return assigned ? ( 사용 중 ) : ( 미배정 ); } // ============================================================================ // 7. RegistryEmptyState - Consistent empty state for lists and tables // ============================================================================ export function RegistryEmptyState({ icon: Icon, message, className, }: { icon?: React.ElementType; message: string; className?: string; }) { return (

{Icon && } {message}

); } // ============================================================================ // 8. RegistryFieldGrid - Key-value display grid for detail panels // ============================================================================ export function RegistryFieldGrid({ fields, labelWidth = "120px", }: { fields: { label: string; value: React.ReactNode }[]; labelWidth?: string; }) { return (

{fields.map((f) => ( {f.label}

{f.value}

))}

); } // ============================================================================ // 9. RegistryDetailPanelWrapper - Three-state detail panel (Empty / Read / Edit) // ============================================================================ import { X, Save, Lock, LockOpen, Clock, UserCheck } from "lucide-react"; import { Label } from "@/components/ui/label"; import { Separator } from "@/components/ui/separator"; export type DetailPanelMode = "empty" | "read" | "edit" | "create"; interface RegistryDetailPanelWrapperProps { mode: DetailPanelMode; /** Content for Empty state */ emptyState: React.ReactNode; /** Content for Read state */ readContent: React.ReactNode; /** Content for Edit / Create state (inline form) */ editContent: React.ReactNode; /** Called when user clicks the Edit button (transitions Read -> Edit) */ onEdit?: () => void; /** Called when user clicks Save in edit/create mode */ onSave?: () => void; /** Called when user clicks Cancel in edit/create mode */ onCancel?: () => void; /** Whether save button is disabled (e.g. form not valid) */ saveDisabled?: boolean; /** Whether to show the edit button in Read mode */ canEdit?: boolean; /** Title shown in the edit/create form header */ editTitle?: string; /** Override for the detail header actions in Read mode */ readActions?: React.ReactNode; /** Lock held by another user on this item (shown in Read mode) */ otherUserLock?: EditLockInfo | null; } /** * Manages the three states of a Registry detail panel: * - Empty: no item selected, shows guide message * - Read: displays selected item info, shows Edit button * - Edit/Create: inline form replaces the read view, shows Save/Cancel * * The list panel remains visible at all times. * Cancelling edit returns to Read state. Cancelling create returns to Empty. */ export function RegistryDetailPanelWrapper({ mode, emptyState, readContent, editContent, onEdit, onSave, onCancel, saveDisabled = false, canEdit = true, editTitle, readActions, otherUserLock, }: RegistryDetailPanelWrapperProps) { if (mode === "empty") { return (

{emptyState}

); } if (mode === "edit" || mode === "create") { return (

{/* Edit/Create header bar */}

{editTitle || (mode === "create" ? "신규 등록" : "수정")}

{/* Scrollable edit form */}

{editContent}

); } // mode === "read" return (

{otherUserLock && } {readContent}

); } /** * Editable field wrapper for inline forms inside the detail panel. * Renders label + input consistently. */ export function RegistryFormField({ label, children, required = false, }: { label: string; children: React.ReactNode; required?: boolean; }) { return (

{label} {required && *} {children}

); } // ============================================================================ // 10. EditLock System - Concurrent editing prevention // ============================================================================ /** * Represents a lock held by another user on a registry item. * In production this comes from a server; here we simulate it client-side. */ export interface EditLockInfo { /** The ID of the item being edited */ itemId: string; /** Display name of the user holding the lock */ lockedBy: string; /** ISO timestamp when the lock was acquired */ lockedAt: string; /** Auto-release timeout in ms (default 5 min) */ timeoutMs?: number; } /** * Simulated lock store. In production this would be backed by a server/DB. * Maps `${entityType}:${itemId}` -> EditLockInfo */ const _lockStore = new Map(); /** Current user name for demo purposes */ const CURRENT_USER = "나 (현재 사용자)"; function lockKey(entityType: string, itemId: string) { return `${entityType}:${itemId}`; } /** * Hook to manage edit locks for a specific entity type. * Returns helpers to acquire, release, and query locks. */ export function useEditLock(entityType: string) { const [, forceUpdate] = React.useState(0); const rerender = React.useCallback(() => forceUpdate((n) => n + 1), []); const acquireLock = React.useCallback( (itemId: string): boolean => { const key = lockKey(entityType, itemId); const existing = _lockStore.get(key); if (existing && existing.lockedBy !== CURRENT_USER) { // Check timeout const elapsed = Date.now() - new Date(existing.lockedAt).getTime(); const timeout = existing.timeoutMs || 5 * 60 * 1000; if (elapsed < timeout) return false; // still locked } _lockStore.set(key, { itemId, lockedBy: CURRENT_USER, lockedAt: new Date().toISOString(), timeoutMs: 5 * 60 * 1000, }); rerender(); return true; }, [entityType, rerender], ); const releaseLock = React.useCallback( (itemId: string) => { const key = lockKey(entityType, itemId); const existing = _lockStore.get(key); if (existing?.lockedBy === CURRENT_USER) { _lockStore.delete(key); rerender(); } }, [entityType, rerender], ); const getLock = React.useCallback( (itemId: string): EditLockInfo | null => { const key = lockKey(entityType, itemId); const existing = _lockStore.get(key); if (!existing) return null; // Check if expired const elapsed = Date.now() - new Date(existing.lockedAt).getTime(); const timeout = existing.timeoutMs || 5 * 60 * 1000; if (elapsed >= timeout) { _lockStore.delete(key); return null; } return existing; }, [entityType], ); const isLockedByOther = React.useCallback( (itemId: string): boolean => { const lock = getLock(itemId); return !!lock && lock.lockedBy !== CURRENT_USER; }, [getLock], ); const isLockedByMe = React.useCallback( (itemId: string): boolean => { const lock = getLock(itemId); return !!lock && lock.lockedBy === CURRENT_USER; }, [getLock], ); return { acquireLock, releaseLock, getLock, isLockedByOther, isLockedByMe }; } // ============================================================================ // 11. Lock UI Components - Banners, indicators, field wrappers // ============================================================================ /** * Banner shown at the top of a detail panel when the item is locked by another user. */ export function EditLockBanner({ lock }: { lock: EditLockInfo }) { const lockedAt = new Date(lock.lockedAt); const timeStr = lockedAt.toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", }); return (

{lock.lockedBy}님이 {timeStr}부터 편집 중입니다. 편집이 완료되거나 세션이 만료될 때까지 수정할 수 없습니다.

); } /** * Small lock icon indicator for list rows showing locked items. */ export function EditLockRowIndicator({ lock, }: { lock: EditLockInfo | null; }) { if (!lock) return null; const isMine = lock.lockedBy === CURRENT_USER; return ( {isMine ? ( ) : ( )} {isMine ? "내가 편집 중" : `${lock.lockedBy}님이 편집 중`} ); } // ============================================================================ // 12. Field Locking Components - Immutable, Conditionally Locked, Editable // ============================================================================ /** * Immutable Field: system identifiers that can never be changed. * Shows a lock icon and "시스템 필드" label. Always disabled. */ export function ImmutableField({ label, value, className, }: { label: string; value: React.ReactNode; className?: string; }) { return (

{label} 시스템 필드

{value}

); } /** * Conditionally Locked Field: cannot be changed when related data exists. * Disabled when locked, with a clear reason message. */ export function ConditionallyLockedField({ label, value, locked, lockReason, children, required = false, }: { label: string; value?: React.ReactNode; locked: boolean; lockReason: string; children?: React.ReactNode; required?: boolean; }) { if (locked) { return (

{label} {required && *}

{value}

{lockReason}

); } return (

{label} {required && *} {children}

); } // ============================================================================ // 13. RegistryRowActions - Row-level Edit/Delete actions (icon buttons or dropdown) // ============================================================================ export interface RegistryRowActionsProps { /** Called when the Edit action is triggered */ onEdit?: () => void; /** Called when the Delete action is triggered (opens confirmation) */ onDelete?: () => void; /** If true, the delete button is disabled */ deleteDisabled?: boolean; /** Reason displayed when delete is disabled (tooltip) */ deleteDisabledReason?: string; /** Label override for the delete action, defaults to "삭제" */ deleteLabel?: string; /** If true, hide the edit action entirely */ hideEdit?: boolean; /** If true, hide the delete action entirely */ hideDelete?: boolean; } /** * Inline icon-button pair for Edit and Delete at the list row level. * Renders as two small icon buttons. Delete can be disabled with a tooltip reason. * Click handlers are stopped from propagating to the row onClick. */ export function RegistryRowActions({ onEdit, onDelete, deleteDisabled = false, deleteDisabledReason, deleteLabel, hideEdit = false, hideDelete = false, }: RegistryRowActionsProps) { return (

e.stopPropagation()} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }} > {!hideEdit && onEdit && ( 수정 )} {!hideDelete && ( {deleteDisabled && deleteDisabledReason ? deleteDisabledReason : (deleteLabel || "삭제")} )}

); } // ============================================================================ // 10. DangerZoneSection - Bottom-of-detail destructive action area // ============================================================================ import { AlertTriangle, ShieldAlert } from "lucide-react"; export type DeleteSemantics = "hard_delete" | "soft_delete" | "dissolve" | "unlink"; const SEMANTICS_LABEL: Record = { hard_delete: "영구 삭제", soft_delete: "비활성화", dissolve: "구성 해제", unlink: "연결 해제", }; export interface DangerZoneSectionProps { /** Primary label for the action, e.g. "고객사 비활성화" */ actionLabel: string; /** Short description of what the action does */ actionDescription: string; /** Called when the button is clicked (should open confirm dialog) */ onAction: () => void; /** Whether the action is currently blocked by constraints */ disabled?: boolean; /** Reason shown when disabled */ disabledReason?: string; /** The kind of destructive operation */ semantics?: DeleteSemantics; } /** * Danger Zone section placed at the very bottom of a Registry detail panel. * Visually separated from informational cards. * Only rendered when the user has permission (`canEdit`). */ export function DangerZoneSection({ actionLabel, actionDescription, onAction, disabled = false, disabledReason, semantics = "hard_delete", }: DangerZoneSectionProps) { return (

위험 구역

{actionDescription}

{disabled && disabledReason && (

{disabledReason}

)}

); } // ============================================================================ // 11. RegistryDeleteDialog - Enhanced confirmation dialog for destructive actions // ============================================================================ export interface RegistryDeleteDialogProps { open: boolean; onOpenChange: (open: boolean) => void; /** Title displayed in the dialog header */ title: string; /** Target item identification (name, ID) */ targetName?: string; /** Description / warning message */ description: string | React.ReactNode; /** Effect description: what happens after confirmation */ effectDescription?: string | React.ReactNode; /** Whether the action is irreversible */ irreversible?: boolean; /** Label for the confirm button. Default: "삭제" */ confirmLabel?: string; /** Called on confirm */ onConfirm: () => void; } /** * Reusable AlertDialog for all destructive Registry actions. * Enhanced with: * - Clear target identification * - Effect explanation * - Irreversibility warning * - Prominent destructive styling */ export function RegistryDeleteDialog({ open, onOpenChange, title, targetName, description, effectDescription, irreversible = false, confirmLabel = "삭제", onConfirm, }: RegistryDeleteDialogProps) { return (

{title}

{targetName && (

대상: {targetName}

)}

{description}

{effectDescription && (

실행 결과: {effectDescription}

)} {irreversible && (

이 작업은 되돌릴 수 없습니다.

)}

취소 {confirmLabel} ); } [V0_FILE]typescriptreact:file="components/device-map.tsx" isMerged="true" "use client"; import React, { useEffect, useRef, useState } from "react"; import { mockDevices } from "@/lib/mock-data"; import { RefreshCw, AlertCircle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { loadGoogleMapsScript } from "@/lib/google-maps-loader"; interface DeviceMapProps { onDeviceClick?: (deviceId: string) => void; } export function DeviceMap({ onDeviceClick }: DeviceMapProps) { const mapRef = useRef(null); const mapInstanceRef = useRef(null); const markersRef = useRef([]); const [isLoaded, setIsLoaded] = useState(false); const [error, setError] = useState(null); const statusCounts = { online: mockDevices.filter((d) => d.status === "online").length, warning: mockDevices.filter((d) => d.status === "warning").length, offline: mockDevices.filter((d) => d.status === "offline").length, maintenance: mockDevices.filter((d) => d.status === "maintenance").length, }; useEffect(() => { let cancelled = false; const initializeMap = async () => { if (!mapRef.current) return; try { // Load Google Maps script await loadGoogleMapsScript(); if (cancelled || !window.google) return; const { Map } = (await window.google.maps.importLibrary("maps")) as google.maps.MapsLibrary; const { AdvancedMarkerElement } = (await window.google.maps.importLibrary( "marker" )) as google.maps.MarkerLibrary; // Center on Seoul/Korea const map = new Map(mapRef.current, { center: { lat: 37.45, lng: 127.0 }, zoom: 10, mapId: "device-map-id", disableDefaultUI: false, zoomControl: true, mapTypeControl: false, streetViewControl: false, fullscreenControl: true, }); mapInstanceRef.current = map; // Clear existing markers markersRef.current.forEach((marker) => { marker.map = null; }); markersRef.current = []; // Add markers for each device mockDevices.forEach((device) => { const statusColor = device.status === "online" ? "#22c55e" : device.status === "warning" ? "#f59e0b" : device.status === "offline" ? "#ef4444" : "#6b7280"; const markerContent = document.createElement("div"); markerContent.className = "device-marker"; markerContent.innerHTML = `

`; const marker = new AdvancedMarkerElement({ map, position: { lat: device.lat, lng: device.lng }, content: markerContent, title: device.stopName, }); // Info window on click const infoWindow = new window.google.maps.InfoWindow({ content: `

${device.stopName}

${device.bisDeviceId}

${ device.status === "online" ? "정상" : device.status === "warning" ? "주의" : device.status === "offline" ? "오프라인" : "점검중" }

배터리: ${device.batteryLevel}%

지역: ${device.region} ${device.group}

`, }); marker.addListener("click", () => { infoWindow.open(map, marker); if (onDeviceClick) { onDeviceClick(device.id); } }); markersRef.current.push(marker); }); setIsLoaded(true); } catch (err) { console.error("Map initialization error:", err); setError("지도 초기화에 실패했습니다."); } }; loadGoogleMapsScript() .then(() => { if (!cancelled) initializeMap(); }) .catch((err) => { if (!cancelled) setError(err.message); }); return () => { cancelled = true; markersRef.current.forEach((marker) => { marker.map = null; }); markersRef.current = []; }; }, [onDeviceClick]); const handleReset = () => { if (mapInstanceRef.current) { mapInstanceRef.current.setCenter({ lat: 37.45, lng: 127.0 }); mapInstanceRef.current.setZoom(10); } }; if (error) { return (

{error}

환경 변수 GOOGLE_MAPS_API_KEY를 설정해 주세요.

); } return (

{/* Map container */}

{/* Loading state */} {!isLoaded && (

지도 로딩 중...

)} {/* Legend */}

BIS 단말 상태

정상 {statusCounts.online}

주의 {statusCounts.warning}

오프라인 {statusCounts.offline}

점검 {statusCounts.maintenance}

{/* Map controls */}

); } [V0_FILE]typescript:file="lib/device-status.ts" isMerged="true" /** * Device Status Derivation Logic (SSOT) * * Centralizes all device health calculation, severity mapping, * and derived operational status logic used across RMS. */ import type { Device } from "@/lib/mock-data"; // --------------------------------------------------------------------------- // Severity & Status Configs (4-level) // --------------------------------------------------------------------------- export const SEVERITY = { critical: { label: "심각", bg: "bg-red-100 dark:bg-red-950/40", text: "text-red-700 dark:text-red-400", dot: "bg-red-500", border: "border-red-200 dark:border-red-900" }, warning: { label: "경고", bg: "bg-amber-100 dark:bg-amber-950/40", text: "text-amber-700 dark:text-amber-400", dot: "bg-amber-500", border: "border-amber-200 dark:border-amber-900" }, info: { label: "주의", bg: "bg-blue-100 dark:bg-blue-950/40", text: "text-blue-700 dark:text-blue-400", dot: "bg-blue-500", border: "border-blue-200 dark:border-blue-900" }, normal: { label: "정상", bg: "bg-green-100 dark:bg-green-950/40", text: "text-green-700 dark:text-green-400", dot: "bg-green-500", border: "border-green-200 dark:border-green-900" }, } as const; export type SeverityKey = keyof typeof SEVERITY; // Legacy raw status mapping export const statusConfig: Record = { online: { label: "정상", severity: "normal" }, offline: { label: "오프라인", severity: "critical" }, warning: { label: "주의", severity: "warning" }, maintenance: { label: "점검중", severity: "info" }, }; // --------------------------------------------------------------------------- // SSOT Derived Device Status (5-state + 점검중 overlay) // --------------------------------------------------------------------------- export type DerivedStatus = "오프라인" | "장애" | "경고" | "주의" | "정상"; export const DERIVED_STATUS_META: Record = { "오프라인": { severity: "critical", order: 0, color: "#6b7280" }, "장애": { severity: "critical", order: 1, color: "#ef4444" }, "경고": { severity: "warning", order: 2, color: "#f59e0b" }, "주의": { severity: "info", order: 3, color: "#3b82f6" }, "정상": { severity: "normal", order: 4, color: "#22c55e" }, }; // --------------------------------------------------------------------------- // Critical Timer Management (module-level shared state) // --------------------------------------------------------------------------- export const CRITICAL_PERSIST_MS = 2 * 60 * 1000; // 2 minutes let _criticalTimers: Map = new Map(); export function getCriticalTimers(): Map { return _criticalTimers; } export function setCriticalTimers(m: Map) { _criticalTimers = m; } // --------------------------------------------------------------------------- // SOC / Network configs // --------------------------------------------------------------------------- export const socLevelConfig = { NORMAL: { label: "정상", severity: "normal" as SeverityKey }, LOW: { label: "낮음", severity: "warning" as SeverityKey }, CRITICAL: { label: "위험", severity: "critical" as SeverityKey }, }; export const networkStatusConfig = { connected: { label: "연결됨", severity: "normal" as SeverityKey }, disconnected: { label: "끊김", severity: "critical" as SeverityKey }, unstable: { label: "불안정", severity: "warning" as SeverityKey }, }; // --------------------------------------------------------------------------- // Mock Environment Sensors // --------------------------------------------------------------------------- export function mockEnv(deviceId: string) { const seed = deviceId.charCodeAt(deviceId.length - 1); return { temperature: 18 + (seed % 15), humidity: 35 + (seed % 30), cpu: 10 + (seed % 60), ram: 20 + (seed % 50), }; } /** * Temperature severity check * Normal: -10~40, Warning: -20~-10 or 40~50, Critical: <-20 or >50 */ export function tempSeverity(temp: number): SeverityKey { if (temp < -20 || temp > 50) return "critical"; if (temp < -10 || temp > 40) return "warning"; return "normal"; } /** * Humidity severity check * Normal: 30~70%, Warning: 20~30% or 70~85%, Critical: <20% or >85% */ export function humiditySeverity(humidity: number): SeverityKey { if (humidity < 20 || humidity > 85) return "critical"; if (humidity < 30 || humidity > 70) return "warning"; return "normal"; } // --------------------------------------------------------------------------- // 3-STAGE MONITORING LOGIC (BIS 모니터링 정의 및 로직) // --------------------------------------------------------------------------- /** * 1단계: 기기 임계치 기반 결함 판정 (Hardware Fault Classification) * * 기기의 CPU, RAM, 온도, 습도 센서 값을 기반으로 경미/중대/치명 결함 판정 * 임계치 조건: 일부는 지속 시간 조건 포함 */ export type HardwareFaultSeverity = "none" | "minor" | "major" | "critical"; interface HardwareFaultResult { severity: HardwareFaultSeverity; faultType?: string; details?: string; durationSec?: number; } /** * CPU 사용률 기반 결함 판정 * 경미: 70~85%, 중대: 85~90%, 치명: 90% 이상 */ export function cpuFaultCheck(cpuUsage: number, durationSec?: number): HardwareFaultResult { if (cpuUsage >= 90) return { severity: "critical", faultType: "cpu", durationSec }; if (cpuUsage >= 85) return { severity: "major", faultType: "cpu", durationSec }; if (cpuUsage >= 70) return { severity: "minor", faultType: "cpu", durationSec }; return { severity: "none" }; } /** * RAM 사용률 기반 결함 판정 * 경미: 70~85%, 중대: 85~90%, 치명: 90% 이상 */ export function ramFaultCheck(ramUsage: number, durationSec?: number): HardwareFaultResult { if (ramUsage >= 90) return { severity: "critical", faultType: "ram", durationSec }; if (ramUsage >= 85) return { severity: "major", faultType: "ram", durationSec }; if (ramUsage >= 70) return { severity: "minor", faultType: "ram", durationSec }; return { severity: "none" }; } /** * 내부 온도 기반 결함 판정 * 경미: -5°C 미만/40°C 초과 (≥10분 지속), 중대: -15°C 미만/50°C 초과 (≥5분 반복), 치명: -30°C 미만/60°C 초과 (≥10분 반복) */ export function internalTemperatureFaultCheck(temp: number, durationSec?: number): HardwareFaultResult { const isCritical = (temp <= -30 || temp >= 60); const isMajor = (temp <= -15 || temp >= 50); const isMinor = (temp <= -5 || temp >= 40); // 치명: ≥10분 지속 if (isCritical && (durationSec === undefined || durationSec >= 600)) { return { severity: "critical", faultType: "internal_temp", durationSec }; } // 중대: ≥5분 반복 if (isMajor && (durationSec === undefined || durationSec >= 300)) { return { severity: "major", faultType: "internal_temp", durationSec }; } // 경미: ≥10분 지속 if (isMinor && (durationSec === undefined || durationSec >= 600)) { return { severity: "minor", faultType: "internal_temp", durationSec }; } return { severity: "none" }; } /** * 외부 온도 기반 결함 판정 * 경미: -10°C 미만/30°C 초과, 중대: -25°C 미만/40°C 초과, 치명: -35°C 미만/50°C 초과 */ export function externalTemperatureFaultCheck(temp: number): HardwareFaultResult { if (temp <= -35 || temp >= 50) return { severity: "critical", faultType: "external_temp" }; if (temp <= -25 || temp >= 40) return { severity: "major", faultType: "external_temp" }; if (temp <= -10 || temp >= 30) return { severity: "minor", faultType: "external_temp" }; return { severity: "none" }; } /** * 내부 습도 기반 결함 판정 * 경미: 15%미만/85%초과 (≥10분 반복/6시간), 중대: 10%미만/90%초과 (≥10분 반복/3시간), 치명: 5%미만/95%초과 (≥10분 반복/1시간) */ export function internalHumidityFaultCheck(humidity: number, durationSec?: number): HardwareFaultResult { const isCritical = (humidity <= 5 || humidity >= 95); const isMajor = (humidity <= 10 || humidity >= 90); const isMinor = (humidity <= 15 || humidity >= 85); // 치명: ≥10분 반복 / 1시간 내 if (isCritical && (durationSec === undefined || durationSec >= 600)) { return { severity: "critical", faultType: "internal_humidity", durationSec }; } // 중대: ≥10분 반복 / 3시간 내 if (isMajor && (durationSec === undefined || durationSec >= 600)) { return { severity: "major", faultType: "internal_humidity", durationSec }; } // 경미: ≥10분 반복 / 6시간 내 if (isMinor && (durationSec === undefined || durationSec >= 600)) { return { severity: "minor", faultType: "internal_humidity", durationSec }; } return { severity: "none" }; } /** * 1단계 종합 결함 판정 (Overall Hardware Fault) */ export function getHardwareFaultSeverity(d: Device): HardwareFaultResult { const checks = [ cpuFaultCheck(d.cpuUsage ?? 0, d.cpuUsageDurationSec), ramFaultCheck(d.ramUsage ?? 0, d.ramUsageDurationSec), internalTemperatureFaultCheck(d.internalTemperature ?? 25, d.internalTempDurationSec), externalTemperatureFaultCheck(d.externalTemperature ?? 20), internalHumidityFaultCheck(d.internalHumidity ?? 50, d.internalHumidityDurationSec), ]; // 최고 심각도로 판정 if (checks.some(c => c.severity === "critical")) return { severity: "critical", details: "임계치 초과" }; if (checks.some(c => c.severity === "major")) return { severity: "major", details: "중대 결함" }; if (checks.some(c => c.severity === "minor")) return { severity: "minor", details: "경미 결함" }; return { severity: "none" }; } /** * 2단계: 운영 상태 판정 (Operational Status Determination) * * 배터리, 충전, 통신 상태를 기반으로 정상/경고/장애/오프라인 판정 */ export type OperationalStatus = "normal" | "warning" | "fault" | "offline"; interface OperationalStatusResult { status: OperationalStatus; components: { battery: OperationalStatus; charging: OperationalStatus; communication: OperationalStatus; }; } /** * 배터리(SOC) 상태 판정 */ export function getBatteryStatus(socPercent: number, socLevel: "NORMAL" | "LOW" | "CRITICAL"): OperationalStatus { if (socPercent < 10 || socLevel === "CRITICAL") return "fault"; if (socPercent < 20 || socLevel === "LOW") return "warning"; return "normal"; } /** * 충전 상태 판정 */ export function getChargingStatus(isCharging: boolean, continuousNoChargeHours: number): OperationalStatus { if (continuousNoChargeHours > 24) return "fault"; if (continuousNoChargeHours > 6) return "warning"; return "normal"; } /** * 통신 상태 판정 (네트워크 + 통신 실패 횟수) */ export function getCommunicationStatus(networkStatus: "connected" | "disconnected" | "unstable", commFailCount: number): OperationalStatus { if (networkStatus === "disconnected") return "offline"; if (commFailCount > 10 || networkStatus === "unstable") return "fault"; if (commFailCount > 5) return "warning"; return "normal"; } /** * 2단계 종합 운영 상태 판정 */ export function getOperationalStatus(d: Device): OperationalStatusResult { const batteryStatus = getBatteryStatus(d.socPercent, d.socLevel); const chargingStatus = getChargingStatus(d.isCharging, d.continuousNoChargeHours ?? 0); const commStatus = getCommunicationStatus(d.networkStatus, d.commFailCount); // 최악의 상태로 종합 판정 const statuses = [batteryStatus, chargingStatus, commStatus]; let overallStatus: OperationalStatus = "normal"; if (statuses.includes("offline")) overallStatus = "offline"; else if (statuses.includes("fault")) overallStatus = "fault"; else if (statuses.includes("warning")) overallStatus = "warning"; return { status: overallStatus, components: { battery: batteryStatus, charging: chargingStatus, communication: commStatus, }, }; } /** * 3단계: 복합 판정 (Composite Device State) * * 1단계 (기기 결함) + 2단계 (운영 상태) → 최종 5단계 상태 (정상/저하/위험/오프라인/긴급) */ export type CompositeDeviceState = "정상" | "저하" | "위험" | "오프라인" | "긴급"; export const COMPOSITE_STATE_META: Record = { "정상": { severity: "normal", order: 4, color: "#22c55e", label: "정상 운영" }, "저하": { severity: "info", order: 3, color: "#3b82f6", label: "성능 저하" }, "위험": { severity: "warning", order: 2, color: "#f59e0b", label: "위험" }, "오프라인": { severity: "critical", order: 1, color: "#6b7280", label: "오프라인" }, "긴급": { severity: "critical", order: 0, color: "#ef4444", label: "긴급" }, }; /** * 복합 판정 매트릭스 * * 1단계(기기 결함) × 2단계(운영 상태) → 3단계(최종 상태) */ export function getCompositeDeviceState(d: Device): CompositeDeviceState { const hardwareFault = getHardwareFaultSeverity(d); const operationalStatus = getOperationalStatus(d); // 통신 끊김 → 오프라인 if (operationalStatus.status === "offline") return "오프라인"; // 기기 결함 없음 + 운영 상태 정상 → 정상 if (hardwareFault.severity === "none" && operationalStatus.status === "normal") { return "정상"; } // 기기 결함(경미) + 운영 상태(정상/경고) → 저하 if (hardwareFault.severity === "minor" && (operationalStatus.status === "normal" || operationalStatus.status === "warning")) { return "저하"; } // 기기 결함(경미) + 운영 상태(장애) → 위험 if (hardwareFault.severity === "minor" && operationalStatus.status === "fault") { return "위험"; } // 기기 결함(중대) → 위험 if (hardwareFault.severity === "major") { return "위험"; } // 운영 상태(경고) + 기기 결함 없음 → 저하 if (hardwareFault.severity === "none" && operationalStatus.status === "warning") { return "저하"; } // 운영 상태(장애) + 기기 결함(없음/경미) → 위험 if (operationalStatus.status === "fault" && hardwareFault.severity !== "critical") { return "위험"; } // 기기 결함(치명) → 위험 또는 긴급 if (hardwareFault.severity === "critical") { return operationalStatus.status === "fault" ? "긴급" : "위험"; } return "정상"; } export function commGrade(d: Device): { label: string; severity: SeverityKey } { if (d.networkStatus === "disconnected") return { label: "F", severity: "critical" }; if (d.commFailCount > 10) return { label: "D", severity: "critical" }; if (d.commFailCount > 5 || d.networkStatus === "unstable") return { label: "C", severity: "warning" }; if (d.commFailCount > 2) return { label: "B", severity: "info" }; return { label: "A", severity: "normal" }; } export function overallHealthSeverity(d: Device): { severity: SeverityKey; label: string } { const env = mockEnv(d.id); const comm = commGrade(d); const severities: SeverityKey[] = [ tempSeverity(env.temperature), humiditySeverity(env.humidity), comm.severity, ]; if (severities.includes("critical")) return { severity: "critical", label: "치명" }; if (severities.includes("warning")) return { severity: "warning", label: "중대" }; if (severities.includes("info")) return { severity: "info", label: "경미" }; return { severity: "normal", label: "예방" }; } // --------------------------------------------------------------------------- // Derived Device Status (SSOT) // --------------------------------------------------------------------------- export function deriveDeviceStatus(d: Device): { status: DerivedStatus; isMaintenance: boolean } { const isMaintenance = d.status === "maintenance"; const health = overallHealthSeverity(d); const hasActiveIncident = d.hasFault; // 1) Heartbeat missing -> 오프라인 if (d.status === "offline") return { status: "오프라인", isMaintenance: false }; // 2) Health = 치명 if (health.label === "치명") { const firstSeen = _criticalTimers.get(d.id); const elapsed = firstSeen ? Date.now() - firstSeen : 0; if (elapsed >= CRITICAL_PERSIST_MS || hasActiveIncident) { return { status: "장애", isMaintenance }; } return { status: "경고", isMaintenance }; } // 3) Active manual incident without 치명 -> 장애 if (hasActiveIncident) return { status: "장애", isMaintenance }; // 4) Health = 중대 -> 경고 if (health.label === "중대") return { status: "경고", isMaintenance }; // 5) Health = 경미 -> 주의 if (health.label === "경미") return { status: "주의", isMaintenance }; // 6) Health = 예방 -> 정상 return { status: "정상", isMaintenance }; } // Risk priority sort export function riskPriority(d: Device): number { return DERIVED_STATUS_META[deriveDeviceStatus(d).status].order; } // Derive the single top-risk badge for a device export function topRiskBadge(d: Device): { severity: SeverityKey; label: string; isMaintenance: boolean } { const derived = deriveDeviceStatus(d); const meta = DERIVED_STATUS_META[derived.status]; return { severity: meta.severity, label: derived.status, isMaintenance: derived.isMaintenance }; } // --------------------------------------------------------------------------- // Shared Constants // --------------------------------------------------------------------------- export const SEVERITY_BADGE_SOLID: Record = { critical: "bg-red-600 text-white dark:bg-red-700", warning: "bg-amber-500 text-white dark:bg-amber-600", info: "bg-blue-500 text-white dark:bg-blue-600", normal: "bg-green-600/15 text-green-700 dark:bg-green-900/40 dark:text-green-400", }; export const COMPACT_ROW_SEVERITY_BG: Record = { critical: "bg-red-50 dark:bg-red-950/20", warning: "bg-amber-50 dark:bg-amber-950/20", info: "bg-blue-50/50 dark:bg-blue-950/10", normal: "", }; // Customer ID → Name map export const CUSTOMER_NAME_MAP: Record = { CUS001: "서울교통공사", CUS002: "경기교통정보센터", CUS003: "인천교통공사", }; export function customerName(id: string): string { return CUSTOMER_NAME_MAP[id] || id; } // Device ID → Customer name map export const DEVICE_CUSTOMER_MAP: Record = { DEV001: "서울교통공사", DEV002: "서울교통공사", DEV003: "서울교통공사", DEV004: "서울교통공사", DEV005: "경기교통정보센터", DEV006: "경기교통정보센터", DEV007: "인천교통공사", DEV008: "인천교통공사", DEV009: "경기교통정보센터", DEV010: "경기교통정보센터", DEV011: "서울교통공사", DEV012: "인천교통공사", }; export const SERVICE_OPERATOR_NAME = "이페이퍼솔루션즈"; // Scope maps export const GROUP_DEVICE_MAP: Record = { GRP001: ["DEV001", "DEV002"], GRP002: ["DEV003", "DEV004", "DEV011"], GRP003: ["DEV005", "DEV006", "DEV009", "DEV010"], GRP004: ["DEV007"], GRP005: ["DEV008", "DEV012"], }; export const BIS_DEVICE_MAP: Record = { BIS001: "DEV001", BIS002: "DEV002", BIS003: "DEV003", BIS004: "DEV004", BIS005: "DEV005", BIS006: "DEV006", BIS007: "DEV007", BIS008: "DEV008", BIS009: "DEV009", BIS010: "DEV010", BIS011: "DEV011", BIS012: "DEV012", }; // Remote action labels export const remoteActions = [ { key: "status_check", label: "상태 재조회", level: 1 }, { key: "app_restart", label: "Runtime 재시작", level: 1 }, { key: "screen_refresh", label: "화면 전체 갱신", level: 2 }, { key: "reboot", label: "BIS 단말 재부팅", level: 2 }, { key: "ota_retry", label: "OTA 업데이트 재시도", level: 3 }, ] as const; // Fault type label export function faultTypeLabel(type: string) { const map: Record = { comm_failure: "통신 장애", power_critical: "전력 위험", display_error: "화면 오류", bms_protection: "BMS 보호모드", sensor_failure: "센서 장애", update_failure: "업데이트 실패", health_critical: "Health 치명", }; return map[type] || type; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react"; import type { Metadata, Viewport } from "next"; import { Noto_Sans_KR } from "next/font/google"; import { Toaster } from "sonner"; import "./globals.css"; const notoSansKR = Noto_Sans_KR({ subsets: ["latin"] }); export const metadata: Metadata = { title: "E-paper BIS 관리 시스템", description: "E-paper 버스정보시스템 운영 관리 포털", }; export const viewport: Viewport = { themeColor: "#ffffff", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescriptreact:file="components/rms/maintenance/approval-detail-panel.tsx" isMerged="true" "use client"; import React, { useState } from "react"; import { X, Circle, Phone, Mail, Check, RotateCcw, XCircle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; import type { Fault } from "@/lib/mock-data"; import { mockDevices, mockBISGroups, getBisDeviceId } from "@/lib/mock-data"; import { overallHealthSeverity } from "@/lib/device-status"; import { useRBAC } from "@/contexts/rbac-context"; // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const SERVICE_COMPANY = "이페이퍼솔루션즈"; const MOCK_WRITERS_REMOTE = ["김시스템", "박유지", "이관리"]; const MOCK_WRITERS_ONSITE = ["김기술", "이수리", "박정비"]; const MOCK_CONTACTS: Record = { "김시스템": { phone: "010-1234-5678", email: "kim.system@epaper.co.kr" }, "박유지": { phone: "010-2345-6789", email: "park.yuji@epaper.co.kr" }, "이관리": { phone: "010-3456-7890", email: "lee.admin@epaper.co.kr" }, "김기술": { phone: "010-4567-8901", email: "kim.tech@hke-service.co.kr" }, "이수리": { phone: "010-5678-9012", email: "lee.repair@hke-service.co.kr" }, "박정비": { phone: "010-6789-0123", email: "park.maint@hke-service.co.kr" }, }; const FOLLOW_UP_NOTES: Record = { critical: "24시간 내 재점검 필요. 장비 교체 검토 권장.", warning: "주간 모니터링 강화 대상.", }; const MOCK_REVIEWERS = ["관리자A", "관리자B"]; // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- export type ApprovalStatus = "draft" | "submitted" | "approved" | "revision_required" | "rejected" | "resubmitted"; export interface ApprovalLog { time: string; action: ApprovalStatus; reviewer: string; role?: string; company?: string; prevStatus?: ApprovalStatus; nextStatus?: ApprovalStatus; reason?: string; } export type ReviewSlaStatus = "정상" | "임박" | "지연"; export interface ReviewSlaInfo { dueAt: string; remainingMs: number; remainingLabel: string; isOverdue: boolean; slaStatus: ReviewSlaStatus; slaOutcome?: "withinSLA" | "outOfSLA"; } export interface ApprovalRecord { fault: Fault; approvalStatus: ApprovalStatus; submittedAt: string; reviewer: string | null; logs: ApprovalLog[]; sla: ReviewSlaInfo; } // --------------------------------------------------------------------------- // SLA computation // --------------------------------------------------------------------------- const SLA_URGENT_HOURS = 2; const SLA_NORMAL_HOURS = 8; /** Determine if a fault is urgent (긴급 플래그 or linked to 치명/중대 severity) */ export function isUrgentFault(fault: Fault): boolean { if (fault.severity === "critical" || fault.severity === "warning") return true; return false; } /** Compute review SLA info for an approval record */ export function computeReviewSla( submittedAt: string, fault: Fault, approvalStatus: ApprovalStatus, logs: ApprovalLog[], ): ReviewSlaInfo { const slaHours = isUrgentFault(fault) ? SLA_URGENT_HOURS : SLA_NORMAL_HOURS; const submitted = new Date(submittedAt).getTime(); const dueAt = submitted + slaHours * 60 * 60 * 1000; const dueAtStr = new Date(dueAt).toISOString().slice(0, 16).replace("T", " "); // If decided (approved/revision_required/rejected), use decision time const decisionLog = logs.find((l) => l.action === "approved" || l.action === "revision_required" || l.action === "rejected" ); const now = decisionLog ? new Date(decisionLog.time).getTime() : Date.now(); const remainingMs = dueAt - now; const isOverdue = remainingMs < 0; const thresholdMs = slaHours * 60 * 60 * 1000 * 0.2; // 20% of SLA window const slaStatus: ReviewSlaStatus = isOverdue ? "지연" : (remainingMs <= thresholdMs ? "임박" : "정상"); const absMs = Math.abs(remainingMs); const hours = Math.floor(absMs / (1000 * 60 * 60)); const minutes = Math.floor((absMs % (1000 * 60 * 60)) / (1000 * 60)); const remainingLabel = isOverdue ? `지연 ${hours}h ${minutes}m` : `남은 ${hours}h ${minutes}m`; // If decision was made, determine SLA outcome let slaOutcome: "withinSLA" | "outOfSLA" | undefined; if (decisionLog) { const decisionTime = new Date(decisionLog.time).getTime(); slaOutcome = decisionTime <= dueAt ? "withinSLA" : "outOfSLA"; } return { dueAt: dueAtStr, remainingMs, remainingLabel, isOverdue, slaStatus, slaOutcome }; } export const APPROVAL_STATUS_LABELS: Record = { draft: "작성 중", submitted: "제출", approved: "승인", revision_required: "보완요청", rejected: "반려", resubmitted: "재제출", }; export const REVIEW_SLA_COLORS: Record = { "정상": "border-border text-muted-foreground bg-muted/30", "임박": "border-amber-200 dark:border-amber-800 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30", "지연": "border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30", }; export const APPROVAL_STATUS_COLORS: Record = { draft: "border-border text-muted-foreground bg-muted/30", submitted: "border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/30", approved: "border-emerald-200 dark:border-emerald-800 text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/30", revision_required: "border-amber-200 dark:border-amber-800 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30", rejected: "border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/30", resubmitted: "border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-950/30", }; // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- function deriveActionMethod(fault: Fault): "원격" | "현장" | "혼합" { const tl = fault.timeline; if (!tl || tl.length === 0) return "원격"; const actions = tl.map((t) => t.action.toLowerCase()).join(" "); const hasRemote = /원격|자동|재시도|재부팅|리셋|재시작|갱신|조회|업데이트/.test(actions); const hasOnsite = /현장|방문|교체|점검/.test(actions); if (hasRemote && hasOnsite) return "혼합"; if (hasOnsite) return "현장"; return "원격"; } function isOnsiteAction(actionText: string): boolean { return /현장|방문|교체|점검/.test(actionText.toLowerCase()); } function deriveStage(actionText: string): "점검" | "조치" | "확인" { const t = actionText.toLowerCase(); if (/점검|검사|확인.*상태|상태.*확인|모니터링|감지/.test(t)) return "점검"; if (/확인|검증|완료.*확인|복구 확인|정상 확인/.test(t)) return "확인"; return "조치"; } function deriveDetailDescription(action: string, stage: string): string { if (stage === "점검") return `${action}\n현장 상태 기록 완료. 추가 이상 징후 없음 확인.`; if (stage === "확인") return `${action}\n복구 상태 및 정상 운영 여부 확인 완료.`; return `${action}\n조치 수행 완료. 시스템 정상 동작 확인 후 종료.`; } // --------------------------------------------------------------------------- // Sub-components // --------------------------------------------------------------------------- function ContactRevealButton({ writer }: { writer: string }) { const [revealed, setRevealed] = useState(false); const contact = MOCK_CONTACTS[writer]; if (!contact) return null; if (!revealed) { return ( ); } return (

{contact.phone} {contact.email}

); } // --------------------------------------------------------------------------- // Audit Trail Event Card // --------------------------------------------------------------------------- function AuditTrailEvent({ log, isLast, slaOutcome, }: { log: ApprovalLog; isLast: boolean; slaOutcome?: "withinSLA" | "outOfSLA"; }) { const isDecision = log.action === "approved" || log.action === "revision_required" || log.action === "rejected"; const roleLabel = log.role || (log.reviewer === "시스템" ? "시스템" : "Super Admin"); const companyLabel = log.company || (log.reviewer === "시스템" ? "" : "플랫폼운영사"); return (

{/* Dot + vertical line */}

{!isLast &&

}

{/* Card */}

{/* Row 1: Action badge + state transition */}

{APPROVAL_STATUS_LABELS[log.action]} {log.prevStatus && log.nextStatus && ( {log.prevStatus.toUpperCase()} → {log.nextStatus.toUpperCase()} )} {log.time}

{/* Row 2: Reviewer info */}

{log.reviewer} {roleLabel} {companyLabel && ` · ${companyLabel}`}

{/* Row 3: Comment/reason */} {log.reason && (

{log.reason}

)} {/* Row 4: SLA outcome (on decision events only) */} {isDecision && slaOutcome && (

기한: {slaOutcome === "withinSLA" ? "준수" : "지연"}

)}

); } interface EnrichedTimelineItem { time: string; action: string; itemMethod: "원격" | "현장"; itemActor: string; stage: "점검" | "조치" | "확인"; writer: string; detailDescription: string; } function EventCard({ item, isLast, isSuperAdmin, faultSeverity, }: { item: EnrichedTimelineItem; isLast: boolean; isSuperAdmin: boolean; faultSeverity: string; }) { const stageBadgeColor = item.stage === "점검" ? "border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400" : item.stage === "확인" ? "border-emerald-200 dark:border-emerald-800 text-emerald-600 dark:text-emerald-400" : "border-border text-muted-foreground"; const followUp = FOLLOW_UP_NOTES[faultSeverity] || null; return (

{!isLast &&

}

{item.stage} {item.itemMethod} {item.itemActor} {item.time}

작성자

{item.writer}

{isSuperAdmin && }

소속

{item.itemActor}

{item.action}

조치 상세 설명

{item.detailDescription}

{followUp && (

후속 조치 및 특이 사항

{followUp}

)}

); } // --------------------------------------------------------------------------- // Main Component // --------------------------------------------------------------------------- interface ApprovalDetailPanelProps { record: ApprovalRecord | null; onClose: () => void; onApprove: (faultId: string) => void; onRevision: (faultId: string, reason: string) => void; onReject: (faultId: string, reason: string) => void; } export function ApprovalDetailPanel({ record, onClose, onApprove, onRevision, onReject }: ApprovalDetailPanelProps) { const isOpen = !!record; const [approveDialogOpen, setApproveDialogOpen] = useState(false); const [revisionDialogOpen, setRevisionDialogOpen] = useState(false); const [rejectDialogOpen, setRejectDialogOpen] = useState(false); const [reasonText, setReasonText] = useState(""); const { currentRole } = useRBAC(); const isSuperAdmin = currentRole === "super_admin"; if (!isOpen) { return ( <>

); } const fault = record.fault; const device = mockDevices.find((d) => d.id === fault.deviceId); const bisId = getBisDeviceId(fault.deviceId); const bisGroup = mockBISGroups.find((g) => g.primaryDeviceIds.includes(fault.deviceId)); const assignedVendor = bisGroup?.maintenanceVendorName || fault.assignedTeam || "-"; const method = deriveActionMethod(fault); const timelineItems: EnrichedTimelineItem[] = (fault.timeline || []).map((t, idx) => { const onsite = isOnsiteAction(t.action); const itemMethod: "원격" | "현장" = onsite ? "현장" : "원격"; const itemActor = onsite ? (assignedVendor !== "-" ? assignedVendor : SERVICE_COMPANY) : SERVICE_COMPANY; const stage = deriveStage(t.action); const writerPool = onsite ? MOCK_WRITERS_ONSITE : MOCK_WRITERS_REMOTE; const writer = writerPool[idx % writerPool.length]; const detailDescription = deriveDetailDescription(t.action, stage); return { ...t, itemMethod, itemActor, stage, writer, detailDescription }; }); const canTakeAction = isSuperAdmin && record.approvalStatus === "submitted"; const handleApproveConfirm = () => { onApprove(fault.id); setApproveDialogOpen(false); }; const handleRevisionConfirm = () => { if (!reasonText.trim()) return; onRevision(fault.id, reasonText.trim()); setRevisionDialogOpen(false); setReasonText(""); }; const handleRejectConfirm = () => { if (!reasonText.trim()) return; onReject(fault.id, reasonText.trim()); setRejectDialogOpen(false); setReasonText(""); }; return ( <> {/* Backdrop */}

{/* Panel */}

{/* Header */}

{APPROVAL_STATUS_LABELS[record.approvalStatus]}

{fault.shortDescription || fault.description}

{fault.deviceName} · {bisId}

{/* SLA Warning Banner */} {(record.sla.slaStatus === "임박" || record.sla.slaStatus === "지연") && record.approvalStatus === "submitted" && (

{record.sla.slaStatus === "지연" ? "검토 기한이 지연되었습니다." : "검토 기한 마감이 임박했습니다."} {record.sla.remainingLabel}

)} {/* 제출 정보 + 검토 기한 */}

제출 정보

제출 시각

{record.submittedAt}

검토자

{record.reviewer || "-"}

배정 유지보수 업체

{assignedVendor}

조치 방식

{method}

{/* 검토 기한 Block */}

검토 마감 시각

{record.sla.dueAt}

기한 상태

{record.sla.slaStatus} {record.sla.remainingLabel}

{record.sla.slaOutcome && (

기한 결과

{record.sla.slaOutcome === "withinSLA" ? "기한 준수" : "기한 지연"}

)}

검토 기한 기준은 관리자 설정에서 변경 가능 (추후 적용)

{/* 작업 보고 내용 (read-only) */}

작업 보고 내용

{timelineItems.length > 0 ? (

{timelineItems.map((item, idx) => ( ))}

) : (

작업 보고 내역이 없습니다.

)}

{/* 승인·검토 이력 (Audit Trail) */} {record.logs.length > 0 && ( <>

승인·검토 이력 (Audit Trail)

{[...record.logs].reverse().map((log, idx) => ( ))}

)}

{/* Action buttons (Super Admin only) */} {canTakeAction && (

)}

{/* Approve confirm dialog */} 승인 확인 이 유지보수 보고서를 승인하시겠습니까? 승인 후에는 변경할 수 없습니다. 취소 승인 {/* Revision request dialog */}