598 lines
23 KiB
TypeScript
598 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo, useEffect, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable";
|
|
import {
|
|
Search,
|
|
RotateCcw,
|
|
Package,
|
|
ClipboardList,
|
|
Factory,
|
|
MapPin,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Loader2,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
getWorkOrders,
|
|
getMaterialStatus,
|
|
getWarehouses,
|
|
type WorkOrder,
|
|
type MaterialData,
|
|
type WarehouseData,
|
|
} from "@/lib/api/materialStatus";
|
|
|
|
const formatDate = (date: Date) => {
|
|
const y = date.getFullYear();
|
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
const d = String(date.getDate()).padStart(2, "0");
|
|
return `${y}-${m}-${d}`;
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
const map: Record<string, string> = {
|
|
planned: "계획",
|
|
in_progress: "진행중",
|
|
completed: "완료",
|
|
pending: "대기",
|
|
cancelled: "취소",
|
|
};
|
|
return map[status] || status;
|
|
};
|
|
|
|
const getStatusStyle = (status: string) => {
|
|
const map: Record<string, string> = {
|
|
planned: "bg-amber-100 text-amber-700 border-amber-200",
|
|
pending: "bg-amber-100 text-amber-700 border-amber-200",
|
|
in_progress: "bg-blue-100 text-blue-700 border-blue-200",
|
|
completed: "bg-emerald-100 text-emerald-700 border-emerald-200",
|
|
cancelled: "bg-gray-100 text-gray-500 border-gray-200",
|
|
};
|
|
return map[status] || "bg-gray-100 text-gray-500 border-gray-200";
|
|
};
|
|
|
|
export default function MaterialStatusPage() {
|
|
const today = new Date();
|
|
const monthAgo = new Date(today);
|
|
monthAgo.setMonth(today.getMonth() - 1);
|
|
|
|
const [searchDateFrom, setSearchDateFrom] = useState(formatDate(monthAgo));
|
|
const [searchDateTo, setSearchDateTo] = useState(formatDate(today));
|
|
const [searchItemCode, setSearchItemCode] = useState("");
|
|
const [searchItemName, setSearchItemName] = useState("");
|
|
|
|
const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
|
|
const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
|
|
const [checkedWoIds, setCheckedWoIds] = useState<number[]>([]);
|
|
const [selectedWoId, setSelectedWoId] = useState<number | null>(null);
|
|
|
|
const [warehouses, setWarehouses] = useState<WarehouseData[]>([]);
|
|
const [warehouse, setWarehouse] = useState("");
|
|
const [materialSearch, setMaterialSearch] = useState("");
|
|
const [showShortageOnly, setShowShortageOnly] = useState(false);
|
|
const [materials, setMaterials] = useState<MaterialData[]>([]);
|
|
const [materialsLoading, setMaterialsLoading] = useState(false);
|
|
|
|
// 창고 목록 초기 로드
|
|
useEffect(() => {
|
|
(async () => {
|
|
const res = await getWarehouses();
|
|
if (res.success && res.data) {
|
|
setWarehouses(res.data);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
// 작업지시 검색
|
|
const handleSearch = useCallback(async () => {
|
|
setWorkOrdersLoading(true);
|
|
try {
|
|
const res = await getWorkOrders({
|
|
dateFrom: searchDateFrom,
|
|
dateTo: searchDateTo,
|
|
itemCode: searchItemCode || undefined,
|
|
itemName: searchItemName || undefined,
|
|
});
|
|
if (res.success && res.data) {
|
|
setWorkOrders(res.data);
|
|
setCheckedWoIds([]);
|
|
setSelectedWoId(null);
|
|
setMaterials([]);
|
|
}
|
|
} finally {
|
|
setWorkOrdersLoading(false);
|
|
}
|
|
}, [searchDateFrom, searchDateTo, searchItemCode, searchItemName]);
|
|
|
|
// 초기 로드
|
|
useEffect(() => {
|
|
handleSearch();
|
|
}, []);
|
|
|
|
const isAllChecked =
|
|
workOrders.length > 0 && checkedWoIds.length === workOrders.length;
|
|
|
|
const handleCheckAll = useCallback(
|
|
(checked: boolean) => {
|
|
setCheckedWoIds(checked ? workOrders.map((wo) => wo.id) : []);
|
|
},
|
|
[workOrders]
|
|
);
|
|
|
|
const handleCheckWo = useCallback((id: number, checked: boolean) => {
|
|
setCheckedWoIds((prev) =>
|
|
checked ? [...prev, id] : prev.filter((i) => i !== id)
|
|
);
|
|
}, []);
|
|
|
|
const handleSelectWo = useCallback((id: number) => {
|
|
setSelectedWoId((prev) => (prev === id ? null : id));
|
|
}, []);
|
|
|
|
// 선택된 작업지시의 자재 조회
|
|
const handleLoadSelectedMaterials = useCallback(async () => {
|
|
if (checkedWoIds.length === 0) {
|
|
alert("자재를 조회할 작업지시를 선택해주세요.");
|
|
return;
|
|
}
|
|
|
|
setMaterialsLoading(true);
|
|
try {
|
|
const res = await getMaterialStatus({
|
|
planIds: checkedWoIds,
|
|
warehouseCode: warehouse || undefined,
|
|
});
|
|
if (res.success && res.data) {
|
|
setMaterials(res.data);
|
|
}
|
|
} finally {
|
|
setMaterialsLoading(false);
|
|
}
|
|
}, [checkedWoIds, warehouse]);
|
|
|
|
const handleResetSearch = useCallback(() => {
|
|
const t = new Date();
|
|
const m = new Date(t);
|
|
m.setMonth(t.getMonth() - 1);
|
|
setSearchDateFrom(formatDate(m));
|
|
setSearchDateTo(formatDate(t));
|
|
setSearchItemCode("");
|
|
setSearchItemName("");
|
|
setMaterialSearch("");
|
|
setShowShortageOnly(false);
|
|
}, []);
|
|
|
|
const filteredMaterials = useMemo(() => {
|
|
return materials.filter((m) => {
|
|
const searchLower = materialSearch.toLowerCase();
|
|
const matchesSearch =
|
|
!materialSearch ||
|
|
m.code.toLowerCase().includes(searchLower) ||
|
|
m.name.toLowerCase().includes(searchLower);
|
|
const matchesShortage = !showShortageOnly || m.current < m.required;
|
|
return matchesSearch && matchesShortage;
|
|
});
|
|
}, [materials, materialSearch, showShortageOnly]);
|
|
|
|
return (
|
|
<div className="flex h-[calc(100vh-4rem)] flex-col gap-4 bg-muted/30 p-4">
|
|
{/* 헤더 */}
|
|
<div className="shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
<Package className="h-7 w-7 text-primary" />
|
|
<div>
|
|
<h1 className="text-2xl font-bold">자재현황</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
작업지시 대비 원자재 재고 현황
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 검색 영역 */}
|
|
<Card className="shrink-0">
|
|
<CardContent className="flex flex-wrap items-end gap-3 p-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">기간</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="date"
|
|
className="h-9 w-[140px]"
|
|
value={searchDateFrom}
|
|
onChange={(e) => setSearchDateFrom(e.target.value)}
|
|
/>
|
|
<span className="text-muted-foreground">~</span>
|
|
<Input
|
|
type="date"
|
|
className="h-9 w-[140px]"
|
|
value={searchDateTo}
|
|
onChange={(e) => setSearchDateTo(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">품목코드</Label>
|
|
<Input
|
|
placeholder="품목코드"
|
|
className="h-9 w-[140px]"
|
|
value={searchItemCode}
|
|
onChange={(e) => setSearchItemCode(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs text-muted-foreground">품목명</Label>
|
|
<Input
|
|
placeholder="품목명"
|
|
className="h-9 w-[140px]"
|
|
value={searchItemName}
|
|
onChange={(e) => setSearchItemName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9"
|
|
onClick={handleResetSearch}
|
|
>
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
초기화
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="h-9"
|
|
onClick={handleSearch}
|
|
disabled={workOrdersLoading}
|
|
>
|
|
{workOrdersLoading ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Search className="mr-2 h-4 w-4" />
|
|
)}
|
|
검색
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 메인 콘텐츠 (좌우 분할) */}
|
|
<div className="flex-1 overflow-hidden rounded-lg border bg-background shadow-sm">
|
|
<ResizablePanelGroup direction="horizontal">
|
|
{/* 왼쪽: 작업지시 리스트 */}
|
|
<ResizablePanel defaultSize={35} minSize={25}>
|
|
<div className="flex h-full flex-col">
|
|
{/* 패널 헤더 */}
|
|
<div className="flex items-center justify-between border-b bg-muted/10 p-3 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={isAllChecked}
|
|
onCheckedChange={handleCheckAll}
|
|
/>
|
|
<ClipboardList className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-semibold">작업지시 리스트</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="font-normal">
|
|
{workOrders.length}
|
|
</Badge>
|
|
<Button
|
|
size="sm"
|
|
className="h-8"
|
|
onClick={handleLoadSelectedMaterials}
|
|
disabled={materialsLoading}
|
|
>
|
|
{materialsLoading ? (
|
|
<Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Search className="mr-1.5 h-3.5 w-3.5" />
|
|
)}
|
|
자재조회
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 작업지시 목록 */}
|
|
<div className="flex-1 space-y-2 overflow-auto p-3">
|
|
{workOrdersLoading ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
|
|
<p className="text-sm text-muted-foreground">
|
|
작업지시를 조회하고 있습니다...
|
|
</p>
|
|
</div>
|
|
) : workOrders.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<ClipboardList className="mb-3 h-10 w-10 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">
|
|
작업지시가 없습니다
|
|
</p>
|
|
</div>
|
|
) : (
|
|
workOrders.map((wo) => (
|
|
<div
|
|
key={wo.id}
|
|
className={cn(
|
|
"flex gap-3 rounded-lg border-2 p-3 transition-all cursor-pointer",
|
|
"hover:border-primary hover:shadow-md hover:-translate-y-0.5",
|
|
selectedWoId === wo.id
|
|
? "border-primary bg-primary/5 shadow-md"
|
|
: "border-border"
|
|
)}
|
|
onClick={() => handleSelectWo(wo.id)}
|
|
>
|
|
<div
|
|
className="flex items-start pt-0.5"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Checkbox
|
|
checked={checkedWoIds.includes(wo.id)}
|
|
onCheckedChange={(c) =>
|
|
handleCheckWo(wo.id, c as boolean)
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-1 flex-col gap-1.5">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-bold text-primary">
|
|
{wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
|
|
getStatusStyle(wo.status)
|
|
)}
|
|
>
|
|
{getStatusLabel(wo.status)}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-sm font-semibold">
|
|
{wo.item_name}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
({wo.item_code})
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<span>수량:</span>
|
|
<span className="font-semibold text-foreground">
|
|
{Number(wo.plan_qty).toLocaleString()}개
|
|
</span>
|
|
<span className="mx-1">|</span>
|
|
<span>일자:</span>
|
|
<span className="font-semibold text-foreground">
|
|
{wo.plan_date
|
|
? new Date(wo.plan_date)
|
|
.toISOString()
|
|
.slice(0, 10)
|
|
: "-"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 오른쪽: 원자재 현황 */}
|
|
<ResizablePanel defaultSize={65} minSize={35}>
|
|
<div className="flex h-full flex-col">
|
|
{/* 패널 헤더 */}
|
|
<div className="flex items-center gap-2 border-b bg-muted/10 p-3 shrink-0">
|
|
<Factory className="h-4 w-4 text-muted-foreground" />
|
|
<span className="text-sm font-semibold">원자재 재고 현황</span>
|
|
</div>
|
|
|
|
{/* 필터 */}
|
|
<div className="flex flex-wrap items-center gap-3 border-b bg-muted/5 px-4 py-3 shrink-0">
|
|
<Input
|
|
placeholder="원자재 검색"
|
|
className="h-9 min-w-[150px] flex-1"
|
|
value={materialSearch}
|
|
onChange={(e) => setMaterialSearch(e.target.value)}
|
|
/>
|
|
<Select value={warehouse} onValueChange={setWarehouse}>
|
|
<SelectTrigger className="h-9 w-[200px]">
|
|
<SelectValue placeholder="전체 창고" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="__all__">전체 창고</SelectItem>
|
|
{warehouses.map((wh) => (
|
|
<SelectItem
|
|
key={wh.warehouse_code}
|
|
value={wh.warehouse_code}
|
|
>
|
|
{wh.warehouse_name}
|
|
{wh.warehouse_type
|
|
? ` (${wh.warehouse_type})`
|
|
: ""}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<label className="flex cursor-pointer items-center gap-2 text-sm font-medium">
|
|
<Checkbox
|
|
checked={showShortageOnly}
|
|
onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
|
|
/>
|
|
<span>부족한 것만 보기</span>
|
|
</label>
|
|
<span className="ml-auto text-sm font-semibold text-muted-foreground">
|
|
{filteredMaterials.length}개 품목
|
|
</span>
|
|
</div>
|
|
|
|
{/* 원자재 목록 */}
|
|
<div className="flex-1 space-y-2 overflow-auto p-3">
|
|
{materialsLoading ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Loader2 className="mb-3 h-8 w-8 animate-spin text-primary" />
|
|
<p className="text-sm text-muted-foreground">
|
|
자재현황을 조회하고 있습니다...
|
|
</p>
|
|
</div>
|
|
) : materials.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">
|
|
작업지시를 선택하고 자재조회 버튼을 클릭해주세요
|
|
</p>
|
|
</div>
|
|
) : filteredMaterials.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<Package className="mb-3 h-10 w-10 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">
|
|
조회된 원자재가 없습니다
|
|
</p>
|
|
</div>
|
|
) : (
|
|
filteredMaterials.map((material) => {
|
|
const shortage = material.required - material.current;
|
|
const isShortage = shortage > 0;
|
|
const percentage =
|
|
material.required > 0
|
|
? Math.min(
|
|
(material.current / material.required) * 100,
|
|
100
|
|
)
|
|
: 100;
|
|
|
|
return (
|
|
<div
|
|
key={material.code}
|
|
className={cn(
|
|
"rounded-lg border-2 p-3 transition-all hover:shadow-md hover:-translate-y-0.5",
|
|
isShortage
|
|
? "border-destructive/40 bg-destructive/2"
|
|
: "border-emerald-300/50 bg-emerald-50/20"
|
|
)}
|
|
>
|
|
{/* 메인 정보 라인 */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-sm font-bold">
|
|
{material.name}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
({material.code})
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
|
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
필요:
|
|
</span>
|
|
<span className="text-xs font-semibold text-blue-600">
|
|
{material.required.toLocaleString()}
|
|
{material.unit}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
|
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
현재:
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"text-xs font-semibold",
|
|
isShortage
|
|
? "text-destructive"
|
|
: "text-foreground"
|
|
)}
|
|
>
|
|
{material.current.toLocaleString()}
|
|
{material.unit}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
|
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{isShortage ? "부족:" : "여유:"}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"text-xs font-semibold",
|
|
isShortage
|
|
? "text-destructive"
|
|
: "text-emerald-600"
|
|
)}
|
|
>
|
|
{Math.abs(shortage).toLocaleString()}
|
|
{material.unit}
|
|
</span>
|
|
<span className="text-xs font-semibold text-muted-foreground">
|
|
({percentage.toFixed(0)}%)
|
|
</span>
|
|
|
|
{isShortage ? (
|
|
<span className="ml-auto inline-flex items-center gap-1 rounded-md border border-destructive bg-destructive/10 px-2 py-0.5 text-[11px] font-semibold text-destructive">
|
|
<AlertTriangle className="h-3 w-3" />
|
|
부족
|
|
</span>
|
|
) : (
|
|
<span className="ml-auto inline-flex items-center gap-1 rounded-md border border-emerald-500 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-semibold text-emerald-600">
|
|
<CheckCircle2 className="h-3 w-3" />
|
|
충분
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 위치별 재고 */}
|
|
{material.locations.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap items-center gap-1.5">
|
|
<MapPin className="h-3.5 w-3.5 text-muted-foreground" />
|
|
{material.locations.map((loc, idx) => (
|
|
<span
|
|
key={idx}
|
|
className="inline-flex items-center gap-1 rounded bg-muted/40 px-2 py-0.5 text-xs transition-colors hover:bg-muted/60"
|
|
>
|
|
<span className="font-semibold font-mono text-primary">
|
|
{loc.location || loc.warehouse}
|
|
</span>
|
|
<span className="font-semibold">
|
|
{loc.qty.toLocaleString()}
|
|
{material.unit}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|