kjs
e693963c2a
- Implemented a `parseRemark` function to convert JSON remarks into human-readable text, improving clarity in the inbound-outbound page. - Updated the category filtering logic to utilize parsed remarks, enhancing data representation. - Added unit label mapping for better display of item units in the inbound-outbound page. - Enhanced the material status page with a status mapping feature, allowing for dynamic styling based on status labels. - These changes aim to improve user experience by providing clearer information and better data management across multiple company implementations.
662 lines
27 KiB
TypeScript
662 lines
27 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";
|
|
// Card 제거 — rounded-lg border bg-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,
|
|
Inbox,
|
|
Settings2,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
getWorkOrders,
|
|
getMaterialStatus,
|
|
getWarehouses,
|
|
type WorkOrder,
|
|
type MaterialData,
|
|
type WarehouseData,
|
|
} from "@/lib/api/materialStatus";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
const GRID_COLUMNS = [
|
|
{ key: "plan_no", label: "계획번호" },
|
|
{ key: "item_code", label: "품목코드" },
|
|
{ key: "item_name", label: "품목명" },
|
|
{ key: "plan_qty", label: "수량" },
|
|
{ key: "plan_date", label: "일자" },
|
|
{ key: "status", label: "상태" },
|
|
];
|
|
|
|
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 FALLBACK_STATUS_MAP: Record<string, string> = {
|
|
planned: "계획",
|
|
in_progress: "진행중",
|
|
completed: "완료",
|
|
pending: "대기",
|
|
cancelled: "취소",
|
|
};
|
|
|
|
const STATUS_STYLE_MAP: Record<string, string> = {
|
|
planned: "bg-secondary text-secondary-foreground border-border",
|
|
pending: "bg-secondary text-secondary-foreground border-border",
|
|
in_progress: "bg-primary/10 text-primary border-primary/20",
|
|
completed: "bg-accent text-accent-foreground border-accent/50",
|
|
cancelled: "bg-muted text-muted-foreground border-border",
|
|
};
|
|
|
|
// 카테고리 라벨 기반으로 스타일 매칭
|
|
const LABEL_STYLE_MAP: Record<string, string> = {
|
|
"일반": "bg-secondary text-secondary-foreground border-border",
|
|
"긴급": "bg-destructive/10 text-destructive border-destructive/20",
|
|
"계획": "bg-secondary text-secondary-foreground border-border",
|
|
"대기": "bg-secondary text-secondary-foreground border-border",
|
|
"진행중": "bg-primary/10 text-primary border-primary/20",
|
|
"완료": "bg-accent text-accent-foreground border-accent/50",
|
|
"취소": "bg-muted text-muted-foreground border-border",
|
|
};
|
|
|
|
export default function MaterialStatusPage() {
|
|
const ts = useTableSettings("c16-material-status", "work_instruction", GRID_COLUMNS);
|
|
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 [statusMap, setStatusMap] = useState<Record<string, string>>({});
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const res = await apiClient.get("/table-categories/work_instruction/status/values");
|
|
if (res.data?.success && res.data.data?.length > 0) {
|
|
const map: Record<string, string> = {};
|
|
const flatten = (vals: any[]) => {
|
|
for (const v of vals) {
|
|
map[v.valueCode] = v.valueLabel;
|
|
if (v.children?.length) flatten(v.children);
|
|
}
|
|
};
|
|
flatten(res.data.data);
|
|
setStatusMap(map);
|
|
}
|
|
} catch { /* ignore */ }
|
|
})();
|
|
}, []);
|
|
|
|
const getStatusLabel = useCallback((status: string) => {
|
|
return statusMap[status] || FALLBACK_STATUS_MAP[status] || status;
|
|
}, [statusMap]);
|
|
|
|
const [workOrders, setWorkOrders] = useState<WorkOrder[]>([]);
|
|
const [workOrdersLoading, setWorkOrdersLoading] = useState(false);
|
|
const [checkedWoIds, setCheckedWoIds] = useState<string[]>([]);
|
|
const [selectedWoId, setSelectedWoId] = useState<string | 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: string, checked: boolean) => {
|
|
setCheckedWoIds((prev) =>
|
|
checked ? [...prev, id] : prev.filter((i) => i !== id)
|
|
);
|
|
}, []);
|
|
|
|
const handleSelectWo = useCallback((id: string) => {
|
|
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-3 p-3">
|
|
{/* 검색 영역 */}
|
|
<div className="shrink-0 flex flex-wrap items-end gap-3 rounded-lg border bg-card p-3">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">기간</span>
|
|
<div className="flex items-center gap-1.5">
|
|
<Input
|
|
type="date"
|
|
className="h-9 w-[140px]"
|
|
value={searchDateFrom}
|
|
onChange={(e) => setSearchDateFrom(e.target.value)}
|
|
/>
|
|
<span className="text-muted-foreground/50 text-xs">~</span>
|
|
<Input
|
|
type="date"
|
|
className="h-9 w-[140px]"
|
|
value={searchDateTo}
|
|
onChange={(e) => setSearchDateTo(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목코드</span>
|
|
<Input
|
|
placeholder="품목코드"
|
|
className="h-9 w-[140px]"
|
|
value={searchItemCode}
|
|
onChange={(e) => setSearchItemCode(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">품목명</span>
|
|
<Input
|
|
placeholder="품목명"
|
|
className="h-9 w-[140px]"
|
|
value={searchItemName}
|
|
onChange={(e) => setSearchItemName(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1" />
|
|
|
|
<div className="flex items-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-9"
|
|
onClick={handleResetSearch}
|
|
>
|
|
<RotateCcw className="mr-1 h-4 w-4" />
|
|
초기화
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
className="h-9"
|
|
onClick={handleSearch}
|
|
disabled={workOrdersLoading}
|
|
>
|
|
{workOrdersLoading ? (
|
|
<Loader2 className="mr-1 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Search className="mr-1 h-4 w-4" />
|
|
)}
|
|
검색
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메인 콘텐츠 (좌우 분할) */}
|
|
<div className="flex-1 overflow-hidden rounded-lg border bg-card">
|
|
<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/30 px-3 py-2.5 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">
|
|
<span className="rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
|
|
{workOrders.length}건
|
|
</span>
|
|
<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>
|
|
<Button variant="ghost" size="sm" className="h-8" onClick={() => ts.setOpen(true)} title="테이블 설정">
|
|
<Settings2 className="h-4 w-4" />
|
|
</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="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
|
|
<Inbox className="h-10 w-10 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">
|
|
조회된 작업지시가 없어요
|
|
</p>
|
|
</div>
|
|
) : (
|
|
ts.groupData(workOrders).map((wo) => {
|
|
if ((wo as any)._isGroupSummary || (wo as any)._isGroupHeader) return null;
|
|
return (
|
|
<div
|
|
key={wo.id}
|
|
className={cn(
|
|
"flex gap-3 rounded-lg border p-3 transition-all cursor-pointer",
|
|
"hover:border-primary/50 hover:shadow-sm",
|
|
selectedWoId === wo.id
|
|
? "border-primary bg-primary/5 shadow-sm"
|
|
: "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">
|
|
{ts.isVisible("plan_no") && (
|
|
<span className="text-sm font-bold text-primary">
|
|
{wo.plan_no || wo.work_order_no || `WO-${wo.id}`}
|
|
</span>
|
|
)}
|
|
{ts.isVisible("status") && (
|
|
<span
|
|
className={cn(
|
|
"ml-auto rounded-md border px-2 py-0.5 text-[11px] font-semibold",
|
|
STATUS_STYLE_MAP[wo.status] || LABEL_STYLE_MAP[getStatusLabel(wo.status)] || "bg-muted text-muted-foreground border-border"
|
|
)}
|
|
>
|
|
{getStatusLabel(wo.status)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
{ts.isVisible("item_name") && (
|
|
<span className="text-sm font-semibold">
|
|
{wo.item_name}
|
|
</span>
|
|
)}
|
|
{ts.isVisible("item_code") && (
|
|
<span className="text-xs text-muted-foreground">
|
|
({wo.item_code})
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
{ts.isVisible("plan_qty") && (
|
|
<>
|
|
<span>수량:</span>
|
|
<span className="font-semibold text-foreground">
|
|
{Number(wo.plan_qty).toLocaleString()}개
|
|
</span>
|
|
</>
|
|
)}
|
|
{ts.isVisible("plan_qty") && ts.isVisible("plan_date") && (
|
|
<span className="mx-1">|</span>
|
|
)}
|
|
{ts.isVisible("plan_date") && (
|
|
<>
|
|
<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/30 px-3 py-2.5 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/30 px-4 py-2.5 shrink-0">
|
|
<Input
|
|
placeholder="원자재 검색"
|
|
className="h-8 min-w-[150px] flex-1 text-xs"
|
|
value={materialSearch}
|
|
onChange={(e) => setMaterialSearch(e.target.value)}
|
|
/>
|
|
<Select value={warehouse} onValueChange={setWarehouse}>
|
|
<SelectTrigger className="h-8 w-[180px] text-xs">
|
|
<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-xs font-medium">
|
|
<Checkbox
|
|
checked={showShortageOnly}
|
|
onCheckedChange={(c) => setShowShortageOnly(c as boolean)}
|
|
/>
|
|
<span>부족한 것만 보기</span>
|
|
</label>
|
|
<span className="ml-auto rounded-full border border-primary/15 bg-primary/8 px-2 py-0.5 font-mono text-[11px] font-bold text-primary">
|
|
{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="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
|
|
<Inbox className="h-10 w-10 text-muted-foreground/30" />
|
|
<p className="text-sm text-muted-foreground">
|
|
작업지시를 선택하고 자재조회 버튼을 클릭해주세요
|
|
</p>
|
|
</div>
|
|
) : filteredMaterials.length === 0 ? (
|
|
<div className="m-3 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border py-12 text-center">
|
|
<Package className="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 p-3 transition-all hover:shadow-sm",
|
|
isShortage
|
|
? "border-destructive/30 bg-destructive/5"
|
|
: "border-primary/15 bg-primary/5"
|
|
)}
|
|
>
|
|
{/* 메인 정보 라인 */}
|
|
<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-primary">
|
|
{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-primary"
|
|
)}
|
|
>
|
|
{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-primary bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
|
|
<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>
|
|
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|