feat: Add inspection record and result management pages for multiple companies
- Introduced new pages for managing equipment inspection records and quality inspection results across COMPANY_10, COMPANY_16, COMPANY_29, and COMPANY_30. - Implemented dynamic search filters, data fetching, and Excel export functionality to enhance user experience. - Added responsive table layouts with loading states and badges for status representation, improving data visibility and interaction. These changes aim to provide a comprehensive interface for monitoring and managing inspection processes across multiple companies.
This commit is contained in:
kjs
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, Wrench, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionRecord {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item_objid: string;
|
||||
inspection_date: string;
|
||||
status: string;
|
||||
inspector: string;
|
||||
remark: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionItem {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
inspection_item: string;
|
||||
inspection_cycle: string;
|
||||
inspection_content: string;
|
||||
inspection_method: string;
|
||||
lower_limit: string;
|
||||
upper_limit: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface EquipmentInfo {
|
||||
id: string;
|
||||
equipment_code: string;
|
||||
equipment_name: string;
|
||||
}
|
||||
|
||||
const RECORD_TABLE = "equipment_inspection_record";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function EquipmentInspectionRecordPage() {
|
||||
const [records, setRecords] = useState<InspectionRecord[]>([]);
|
||||
const [inspectionItems, setInspectionItems] = useState<Map<string, InspectionItem>>(new Map());
|
||||
const [equipments, setEquipments] = useState<Map<string, EquipmentInfo>>(new Map());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 데이터 조회 ────────────────────────────────────────
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const [recordRes, itemRes, equipRes] = await Promise.all([
|
||||
apiClient.post(`/table-management/tables/${RECORD_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
}),
|
||||
apiClient.post(`/table-management/tables/equipment_inspection_item/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
apiClient.post(`/table-management/tables/equipment_mng/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
}).catch(() => ({ data: { data: { data: [] } } })),
|
||||
]);
|
||||
|
||||
const rRows: InspectionRecord[] = recordRes.data?.data?.data ?? recordRes.data?.data?.rows ?? [];
|
||||
setRecords(rRows);
|
||||
|
||||
const iRows: InspectionItem[] = itemRes.data?.data?.data ?? itemRes.data?.data?.rows ?? [];
|
||||
const iMap = new Map<string, InspectionItem>();
|
||||
iRows.forEach((i) => iMap.set(i.id, i));
|
||||
setInspectionItems(iMap);
|
||||
|
||||
const eRows: EquipmentInfo[] = equipRes.data?.data?.data ?? equipRes.data?.data?.rows ?? [];
|
||||
const eMap = new Map<string, EquipmentInfo>();
|
||||
eRows.forEach((e) => {
|
||||
eMap.set(e.equipment_code, e);
|
||||
eMap.set(e.id, e);
|
||||
});
|
||||
setEquipments(eMap);
|
||||
} catch (err) {
|
||||
console.error("점검기록 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ─── 선택된 레코드 ─────────────────────────────────────
|
||||
|
||||
const selectedRecord = useMemo(() => records.find((r) => r.id === selectedId), [records, selectedId]);
|
||||
const selectedItem = useMemo(
|
||||
() => (selectedRecord ? inspectionItems.get(selectedRecord.inspection_item_objid) : undefined),
|
||||
[selectedRecord, inspectionItems],
|
||||
);
|
||||
|
||||
// ─── 설비명 조회 ───────────────────────────────────────
|
||||
|
||||
const getEquipName = (code: string) => equipments.get(code)?.equipment_name || code || "-";
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
const data = records.map((r) => ({
|
||||
설비코드: r.equipment_code,
|
||||
설비명: getEquipName(r.equipment_code),
|
||||
점검항목: inspectionItems.get(r.inspection_item_objid)?.inspection_item || "-",
|
||||
점검일자: fmtDate(r.inspection_date),
|
||||
상태: r.status,
|
||||
점검자: r.inspector,
|
||||
비고: r.remark,
|
||||
}));
|
||||
await exportToExcel(data, "설비점검기록.xlsx", "점검기록");
|
||||
};
|
||||
|
||||
// ─── 날짜/상태 포맷 ────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
const statusBadge = (v: string) => {
|
||||
if (!v) return <Badge variant="outline" className="text-xs">-</Badge>;
|
||||
const lower = v.toLowerCase();
|
||||
if (["완료", "pass", "정상", "합격", "completed"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">{v}</Badge>;
|
||||
if (["이상", "fail", "불합격", "비정상"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200 text-xs">{v}</Badge>;
|
||||
if (["점검중", "진행", "in_progress"].includes(lower))
|
||||
return <Badge className="bg-blue-500/10 text-blue-600 border-blue-200 text-xs">{v}</Badge>;
|
||||
return <Badge variant="outline" className="text-xs">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={RECORD_TABLE}
|
||||
filterId="equip-inspection-record"
|
||||
onFilterChange={(filters) => setFilterValues(filters)}
|
||||
dataCount={records.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Wrench className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">점검관리</h2>
|
||||
<Badge variant="secondary">{records.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchData} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 점검기록 테이블 */}
|
||||
<ResizablePanel defaultSize={60} minSize={35}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : records.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">점검 기록이 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[100px]">설비코드</TableHead>
|
||||
<TableHead className="min-w-[120px]">설비명</TableHead>
|
||||
<TableHead className="min-w-[140px]">점검항목</TableHead>
|
||||
<TableHead className="min-w-[100px]">점검일자</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">상태</TableHead>
|
||||
<TableHead className="min-w-[80px]">점검자</TableHead>
|
||||
<TableHead className="min-w-[150px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{records.map((row, idx) => {
|
||||
const item = inspectionItems.get(row.inspection_item_objid);
|
||||
return (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn("cursor-pointer", selectedId === row.id && "bg-primary/5")}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.equipment_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{getEquipName(row.equipment_code)}</TableCell>
|
||||
<TableCell className="text-sm">{item?.inspection_item || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">{statusBadge(row.status)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{row.remark || "-"}</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 점검항목 상세 */}
|
||||
<ResizablePanel defaultSize={40} minSize={25}>
|
||||
{!selectedId || !selectedRecord ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 점검 기록을 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full overflow-auto">
|
||||
{/* 점검 기록 요약 */}
|
||||
<div className="px-4 py-3 border-b bg-muted/50 shrink-0">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 기록 정보</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="설비" value={getEquipName(selectedRecord.equipment_code)} />
|
||||
<DetailRow label="설비코드" value={selectedRecord.equipment_code} />
|
||||
<DetailRow label="점검일자" value={fmtDate(selectedRecord.inspection_date)} />
|
||||
<DetailRow label="점검자" value={selectedRecord.inspector || "-"} />
|
||||
<DetailRow label="상태" value={selectedRecord.status || "-"} badge={statusBadge(selectedRecord.status)} />
|
||||
<DetailRow label="비고" value={selectedRecord.remark || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 점검 항목 상세 */}
|
||||
{selectedItem ? (
|
||||
<div className="px-4 py-3">
|
||||
<h3 className="text-[13px] font-bold mb-2">점검 항목 상세</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailRow label="점검항목" value={selectedItem.inspection_item || "-"} />
|
||||
<DetailRow label="점검주기" value={selectedItem.inspection_cycle || "-"} />
|
||||
<DetailRow label="점검내용" value={selectedItem.inspection_content || "-"} span2 />
|
||||
<DetailRow label="점검방법" value={selectedItem.inspection_method || "-"} span2 />
|
||||
<DetailRow label="하한치" value={selectedItem.lower_limit || "-"} />
|
||||
<DetailRow label="상한치" value={selectedItem.upper_limit || "-"} />
|
||||
<DetailRow label="단위" value={selectedItem.unit || "-"} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||||
<p className="text-sm">점검 항목 정보가 없습니다</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 상세 행 ──────────────────────────────────────────────
|
||||
|
||||
function DetailRow({
|
||||
label,
|
||||
value,
|
||||
badge,
|
||||
span2,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
badge?: React.ReactNode;
|
||||
span2?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-0.5", span2 && "col-span-2")}>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">{label}</span>
|
||||
{badge || <span className="text-xs">{value}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { RefreshCw, Loader2, Inbox, ClipboardCheck, Download } from "lucide-react";
|
||||
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { exportToExcel } from "@/lib/utils/excelExport";
|
||||
|
||||
// ─── 타입 ─────────────────────────────────────────────────
|
||||
|
||||
interface InspectionMng {
|
||||
id: string;
|
||||
inspection_number: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
total_qty: number;
|
||||
good_qty: number;
|
||||
bad_qty: number;
|
||||
overall_judgment: string;
|
||||
inspector: string;
|
||||
inspection_date: string;
|
||||
is_completed: string;
|
||||
defect_description: string;
|
||||
memo: string;
|
||||
supplier_name: string;
|
||||
supplier_code: string;
|
||||
created_date: string;
|
||||
}
|
||||
|
||||
interface InspectionDetail {
|
||||
id: string;
|
||||
master_id: string;
|
||||
inspection_item_name: string;
|
||||
inspection_standard: string;
|
||||
pass_criteria: string;
|
||||
measured_value: string;
|
||||
judgment: string;
|
||||
is_required: string;
|
||||
memo: string;
|
||||
item_code: string;
|
||||
item_name: string;
|
||||
inspection_type: string;
|
||||
}
|
||||
|
||||
const MASTER_TABLE = "inspection_result_mng";
|
||||
const DETAIL_TABLE = "inspection_result";
|
||||
|
||||
// ─── 메인 컴포넌트 ───────────────────────────────────────
|
||||
|
||||
export default function InspectionResultPage() {
|
||||
const [masterData, setMasterData] = useState<InspectionMng[]>([]);
|
||||
const [detailData, setDetailData] = useState<InspectionDetail[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [filterValues, setFilterValues] = useState<FilterValue[]>([]);
|
||||
|
||||
// ─── 마스터 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchMaster = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const search: Record<string, any> = {};
|
||||
filterValues.forEach((f) => {
|
||||
if (f.value) search[f.column] = f.value;
|
||||
});
|
||||
|
||||
const res = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 1000,
|
||||
autoFilter: true,
|
||||
search,
|
||||
});
|
||||
const rows: InspectionMng[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setMasterData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사결과 조회 실패:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [filterValues]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMaster();
|
||||
}, [fetchMaster]);
|
||||
|
||||
// ─── 디테일 데이터 조회 ─────────────────────────────────
|
||||
|
||||
const fetchDetail = useCallback(async (masterId: string) => {
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
||||
page: 1,
|
||||
size: 500,
|
||||
autoFilter: true,
|
||||
search: { master_id: masterId },
|
||||
});
|
||||
const rows: InspectionDetail[] = res.data?.data?.data ?? res.data?.data?.rows ?? [];
|
||||
setDetailData(rows);
|
||||
} catch (err) {
|
||||
console.error("검사상세 조회 실패:", err);
|
||||
setDetailData([]);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedId) fetchDetail(selectedId);
|
||||
else setDetailData([]);
|
||||
}, [selectedId, fetchDetail]);
|
||||
|
||||
// ─── 선택된 마스터 ──────────────────────────────────────
|
||||
|
||||
const selectedMaster = useMemo(
|
||||
() => masterData.find((m) => m.id === selectedId),
|
||||
[masterData, selectedId],
|
||||
);
|
||||
|
||||
// ─── 엑셀 다운로드 ─────────────────────────────────────
|
||||
|
||||
const handleExcel = async () => {
|
||||
await exportToExcel(masterData, "검사결과관리.xlsx", "검사결과");
|
||||
};
|
||||
|
||||
// ─── 판정 배지 ──────────────────────────────────────────
|
||||
|
||||
const judgmentBadge = (v: string) => {
|
||||
if (!v) return null;
|
||||
const lower = v.toLowerCase();
|
||||
if (["합격", "pass", "적합"].includes(lower))
|
||||
return <Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200">{v}</Badge>;
|
||||
if (["불합격", "fail", "부적합"].includes(lower))
|
||||
return <Badge className="bg-red-500/10 text-red-600 border-red-200">{v}</Badge>;
|
||||
return <Badge variant="outline">{v}</Badge>;
|
||||
};
|
||||
|
||||
// ─── 날짜 포맷 ──────────────────────────────────────────
|
||||
|
||||
const fmtDate = (d: string) => {
|
||||
if (!d) return "-";
|
||||
try {
|
||||
return new Date(d).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" });
|
||||
} catch {
|
||||
return d;
|
||||
}
|
||||
};
|
||||
|
||||
// ─── 렌더링 ─────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 검색 필터 */}
|
||||
<div className="shrink-0">
|
||||
<DynamicSearchFilter
|
||||
tableName={MASTER_TABLE}
|
||||
filterId="inspection-result-mng"
|
||||
onFilterChange={(filters) => {
|
||||
setFilterValues(filters);
|
||||
}}
|
||||
dataCount={masterData.length}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-4 py-2.5 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<ClipboardCheck className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-base font-bold">검사관리</h2>
|
||||
<Badge variant="secondary">{masterData.length}건</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleExcel}>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
엑셀 다운로드
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={fetchMaster} disabled={loading}>
|
||||
<RefreshCw className={cn("h-4 w-4 mr-1", loading && "animate-spin")} />
|
||||
새로고침
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 분할 패널 */}
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* 좌측: 마스터 테이블 */}
|
||||
<ResizablePanel defaultSize={55} minSize={30}>
|
||||
<div className="h-full overflow-auto">
|
||||
{loading && masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Loader2 className="h-8 w-8 animate-spin mb-3" />
|
||||
<span className="text-sm">데이터를 불러오는 중...</span>
|
||||
</div>
|
||||
) : masterData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
||||
<Inbox className="h-10 w-10 mb-3" />
|
||||
<span className="text-sm">검사 데이터가 없습니다</span>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper className="min-w-max">
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사번호</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사유형</TableHead>
|
||||
<TableHead className="min-w-[120px]">품목코드</TableHead>
|
||||
<TableHead className="min-w-[140px]">품목명</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">검사수량</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">양품</TableHead>
|
||||
<TableHead className="min-w-[80px] text-right">불량</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[80px]">검사자</TableHead>
|
||||
<TableHead className="min-w-[100px]">검사일자</TableHead>
|
||||
<TableHead className="min-w-[80px] text-center">완료</TableHead>
|
||||
<TableHead className="min-w-[120px]">거래처</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{masterData.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selectedId === row.id && "bg-primary/5",
|
||||
)}
|
||||
onClick={() => setSelectedId(row.id)}
|
||||
>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.inspection_number || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="text-xs">{row.inspection_type || "-"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-sm">{row.item_code || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{row.item_name || "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm">{row.total_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-emerald-600">{row.good_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-right text-sm text-red-600">{row.bad_qty ?? "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(row.overall_judgment)}</TableCell>
|
||||
<TableCell className="text-sm">{row.inspector || "-"}</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{fmtDate(row.inspection_date)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{row.is_completed === "Y" ? (
|
||||
<Badge className="bg-emerald-500/10 text-emerald-600 border-emerald-200 text-xs">완료</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">진행중</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{row.supplier_name || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
|
||||
{/* 우측: 디테일 */}
|
||||
<ResizablePanel defaultSize={45} minSize={25}>
|
||||
{!selectedId ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
|
||||
<Inbox className="w-10 h-10 text-muted-foreground/40" />
|
||||
<p className="text-sm">좌측에서 검사를 선택해주세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 상세 헤더 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50 shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-[13px] font-bold">검사 상세</h3>
|
||||
{selectedMaster && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{selectedMaster.inspection_number}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{selectedMaster && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>{selectedMaster.item_name}</span>
|
||||
<span>·</span>
|
||||
{judgmentBadge(selectedMaster.overall_judgment)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 상세 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{detailLoading ? (
|
||||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||||
<Loader2 className="h-6 w-6 animate-spin" />
|
||||
</div>
|
||||
) : detailData.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
|
||||
<Inbox className="h-8 w-8 mb-2 opacity-40" />
|
||||
<p className="text-sm">검사 항목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table noWrapper>
|
||||
<TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
|
||||
<TableRow className="hover:bg-muted">
|
||||
<TableHead className="w-10 text-center">#</TableHead>
|
||||
<TableHead className="min-w-[140px]">검사항목</TableHead>
|
||||
<TableHead className="min-w-[120px]">검사기준</TableHead>
|
||||
<TableHead className="min-w-[100px]">합격기준</TableHead>
|
||||
<TableHead className="min-w-[90px]">측정값</TableHead>
|
||||
<TableHead className="min-w-[70px] text-center">판정</TableHead>
|
||||
<TableHead className="min-w-[60px] text-center">필수</TableHead>
|
||||
<TableHead className="min-w-[120px]">비고</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detailData.map((d, idx) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell className="text-center text-muted-foreground text-xs">{idx + 1}</TableCell>
|
||||
<TableCell className="text-sm font-medium">{d.inspection_item_name || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.inspection_standard || "-"}</TableCell>
|
||||
<TableCell className="text-sm">{d.pass_criteria || "-"}</TableCell>
|
||||
<TableCell className="text-sm font-mono">{d.measured_value || "-"}</TableCell>
|
||||
<TableCell className="text-center">{judgmentBadge(d.judgment)}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{d.is_required === "Y" ? (
|
||||
<Badge className="bg-amber-500/10 text-amber-600 border-amber-200 text-xs">필수</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-muted-foreground">{d.memo || "-"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -110,6 +110,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_7/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_7/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/production/bom": dynamic(() => import("@/app/(main)/COMPANY_7/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_7/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_7/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_7/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/logistics/outbound": dynamic(() => import("@/app/(main)/COMPANY_7/logistics/outbound/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -144,6 +145,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_16/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_16/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/production/bom": dynamic(() => import("@/app/(main)/COMPANY_16/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_16/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_16/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_16/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_16/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_16/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -157,6 +159,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_7/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_7/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_7/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_7/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_7/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_7/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_7/mold/info": dynamic(() => import("@/app/(main)/COMPANY_7/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/logistics/material-status": dynamic(() => import("@/app/(main)/COMPANY_16/logistics/material-status/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -173,6 +176,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_16/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_16/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_16/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_16/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_16/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_16/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/mold/info": dynamic(() => import("@/app/(main)/COMPANY_16/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_16/design/project": dynamic(() => import("@/app/(main)/COMPANY_16/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -198,6 +202,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_8/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_8/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/production/bom": dynamic(() => import("@/app/(main)/COMPANY_8/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_8/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_8/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_8/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_8/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_8/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -217,6 +222,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_8/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_8/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_8/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_8/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_8/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_8/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/mold/info": dynamic(() => import("@/app/(main)/COMPANY_8/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_8/design/project": dynamic(() => import("@/app/(main)/COMPANY_8/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -242,6 +248,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_10/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_10/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/production/bom": dynamic(() => import("@/app/(main)/COMPANY_10/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_10/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_10/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_10/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_10/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_10/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -261,6 +268,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_10/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_10/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_10/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_10/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_10/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_10/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/mold/info": dynamic(() => import("@/app/(main)/COMPANY_10/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_10/design/project": dynamic(() => import("@/app/(main)/COMPANY_10/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -286,6 +294,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_29/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_29/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/production/bom": dynamic(() => import("@/app/(main)/COMPANY_29/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_29/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_29/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_29/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_29/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_29/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -305,6 +314,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_29/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_29/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_29/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_29/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_29/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_29/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/mold/info": dynamic(() => import("@/app/(main)/COMPANY_29/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_29/design/project": dynamic(() => import("@/app/(main)/COMPANY_29/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -330,6 +340,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_9/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_9/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/production/bom": dynamic(() => import("@/app/(main)/COMPANY_9/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_9/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_9/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_9/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_9/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_9/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -349,6 +360,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_9/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_9/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_9/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_9/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_9/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_9/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/mold/info": dynamic(() => import("@/app/(main)/COMPANY_9/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_9/design/project": dynamic(() => import("@/app/(main)/COMPANY_9/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -375,6 +387,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_30/production/plan-management": dynamic(() => import("@/app/(main)/COMPANY_30/production/plan-management/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/production/bom": dynamic(() => import("@/app/(main)/COMPANY_30/production/bom/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/equipment/info": dynamic(() => import("@/app/(main)/COMPANY_30/equipment/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/equipment/inspection-record": dynamic(() => import("@/app/(main)/COMPANY_30/equipment/inspection-record/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/equipment/plc-settings": dynamic(() => import("@/app/(main)/COMPANY_30/equipment/plc-settings/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/monitoring/production": dynamic(() => import("@/app/(main)/COMPANY_30/monitoring/production/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/monitoring/equipment": dynamic(() => import("@/app/(main)/COMPANY_30/monitoring/equipment/page"), { ssr: false, loading: LoadingFallback }),
|
||||
@@ -394,6 +407,7 @@ const ADMIN_PAGE_REGISTRY: Record<string, React.ComponentType<any>> = {
|
||||
"/COMPANY_30/purchase/purchase-item": dynamic(() => import("@/app/(main)/COMPANY_30/purchase/purchase-item/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/purchase/supplier": dynamic(() => import("@/app/(main)/COMPANY_30/purchase/supplier/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/quality/inspection": dynamic(() => import("@/app/(main)/COMPANY_30/quality/inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/quality/inspection-result": dynamic(() => import("@/app/(main)/COMPANY_30/quality/inspection-result/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/quality/item-inspection": dynamic(() => import("@/app/(main)/COMPANY_30/quality/item-inspection/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/mold/info": dynamic(() => import("@/app/(main)/COMPANY_30/mold/info/page"), { ssr: false, loading: LoadingFallback }),
|
||||
"/COMPANY_30/design/project": dynamic(() => import("@/app/(main)/COMPANY_30/design/project/page"), { ssr: false, loading: LoadingFallback }),
|
||||
|
||||
Reference in New Issue
Block a user