feat: [worker-screen] 사이드바 대기/완료 탭 분리 (기본: 대기만 표시)
This commit is contained in:
@@ -1780,6 +1780,7 @@ function SidebarContent({
|
||||
apiOrders,
|
||||
}: SidebarContentProps) {
|
||||
const [sidebarTab, setSidebarTab] = useState<'orders' | 'wip'>('orders');
|
||||
const [showCompleted, setShowCompleted] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
// 수주목록 / 재공품 분리
|
||||
@@ -1790,15 +1791,23 @@ function SidebarContent({
|
||||
apiOrders.filter((o) => o.subType === 'wip'),
|
||||
[apiOrders]);
|
||||
|
||||
// 완료/미완료 필터링
|
||||
const pendingRegular = useMemo(() => regularOrders.filter(o => o.status !== 'completed'), [regularOrders]);
|
||||
const completedRegular = useMemo(() => regularOrders.filter(o => o.status === 'completed'), [regularOrders]);
|
||||
const pendingWip = useMemo(() => wipOrders.filter(o => o.status !== 'completed'), [wipOrders]);
|
||||
const completedWip = useMemo(() => wipOrders.filter(o => o.status === 'completed'), [wipOrders]);
|
||||
|
||||
// 검색 필터링
|
||||
const displayOrders = useMemo(() => {
|
||||
const source = sidebarTab === 'orders' ? regularOrders : wipOrders;
|
||||
if (!searchTerm.trim()) return source;
|
||||
const baseOrders = sidebarTab === 'orders'
|
||||
? (showCompleted ? completedRegular : pendingRegular)
|
||||
: (showCompleted ? completedWip : pendingWip);
|
||||
if (!searchTerm.trim()) return baseOrders;
|
||||
const q = searchTerm.toLowerCase();
|
||||
return source.filter((o) =>
|
||||
return baseOrders.filter((o) =>
|
||||
o.siteName.toLowerCase().includes(q) || o.date.includes(q)
|
||||
);
|
||||
}, [sidebarTab, regularOrders, wipOrders, searchTerm]);
|
||||
}, [sidebarTab, showCompleted, pendingRegular, completedRegular, pendingWip, completedWip, searchTerm]);
|
||||
|
||||
const renderOrders = (orders: SidebarOrder[]) => (
|
||||
<>
|
||||
@@ -1861,7 +1870,7 @@ function SidebarContent({
|
||||
<div className="flex border-b">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSidebarTab('orders'); setSearchTerm(''); }}
|
||||
onClick={() => { setSidebarTab('orders'); setShowCompleted(false); setSearchTerm(''); }}
|
||||
className={cn(
|
||||
'flex-1 text-sm font-medium py-2 border-b-2 transition-colors',
|
||||
sidebarTab === 'orders'
|
||||
@@ -1869,11 +1878,11 @@ function SidebarContent({
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
)}
|
||||
>
|
||||
수주목록 ({regularOrders.length})
|
||||
수주목록 ({pendingRegular.length})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setSidebarTab('wip'); setSearchTerm(''); }}
|
||||
onClick={() => { setSidebarTab('wip'); setShowCompleted(false); setSearchTerm(''); }}
|
||||
className={cn(
|
||||
'flex-1 text-sm font-medium py-2 border-b-2 transition-colors',
|
||||
sidebarTab === 'wip'
|
||||
@@ -1881,7 +1890,31 @@ function SidebarContent({
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
)}
|
||||
>
|
||||
재공품 ({wipOrders.length})
|
||||
재공품 ({pendingWip.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 대기/완료 토글 */}
|
||||
<div className="flex gap-1 px-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCompleted(false)}
|
||||
className={cn(
|
||||
'flex-1 text-xs font-medium py-1.5 rounded-md transition-colors',
|
||||
!showCompleted ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
||||
)}
|
||||
>
|
||||
대기 ({sidebarTab === 'orders' ? pendingRegular.length : pendingWip.length})
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCompleted(true)}
|
||||
className={cn(
|
||||
'flex-1 text-xs font-medium py-1.5 rounded-md transition-colors',
|
||||
showCompleted ? 'bg-gray-600 text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
||||
)}
|
||||
>
|
||||
완료 ({sidebarTab === 'orders' ? completedRegular.length : completedWip.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user