ea8d701a8d
- BiddingListClient: MobileFilter 컴포넌트 적용 - ContractListClient: MobileFilter 컴포넌트 적용 - EstimateListClient: MobileFilter 컴포넌트 적용 - HandoverReportListClient: MobileFilter 컴포넌트 적용 - IssueManagementListClient: MobileFilter 컴포넌트 적용 - ItemManagementClient: MobileFilter 컴포넌트 적용 - LaborManagementClient: MobileFilter 컴포넌트 적용 - PricingListClient: MobileFilter 컴포넌트 적용 - SiteBriefingListClient: MobileFilter 컴포넌트 적용 - SiteManagementListClient: MobileFilter 컴포넌트 적용 - StructureReviewListClient: MobileFilter 컴포넌트 적용 - WorkerStatusListClient: MobileFilter 컴포넌트 적용 - TodayIssueSection: CEO 대시보드 이슈 섹션 개선 - EmployeeForm: 사원등록 폼 개선 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
679 lines
22 KiB
TypeScript
679 lines
22 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo, useCallback, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { AlertTriangle, Pencil, Plus, Inbox, Clock, CheckCircle, XCircle, Undo2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { TableCell, TableRow } from '@/components/ui/table';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { MultiSelectOption } from '@/components/ui/multi-select-combobox';
|
|
import { IntegratedListTemplateV2, TableColumn, StatCard, FilterFieldConfig, FilterValues } from '@/components/templates/IntegratedListTemplateV2';
|
|
import { MobileCard } from '@/components/molecules/MobileCard';
|
|
import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { toast } from 'sonner';
|
|
import type {
|
|
Issue,
|
|
IssueStats,
|
|
} from './types';
|
|
import {
|
|
ISSUE_STATUS_OPTIONS,
|
|
ISSUE_PRIORITY_OPTIONS,
|
|
ISSUE_CATEGORY_OPTIONS,
|
|
ISSUE_SORT_OPTIONS,
|
|
ISSUE_STATUS_STYLES,
|
|
ISSUE_STATUS_LABELS,
|
|
ISSUE_PRIORITY_STYLES,
|
|
ISSUE_PRIORITY_LABELS,
|
|
ISSUE_CATEGORY_LABELS,
|
|
MOCK_ISSUE_PARTNERS,
|
|
MOCK_ISSUE_SITES,
|
|
MOCK_ISSUE_REPORTERS,
|
|
MOCK_ISSUE_ASSIGNEES,
|
|
} from './types';
|
|
import {
|
|
getIssueList,
|
|
getIssueStats,
|
|
withdrawIssues,
|
|
} from './actions';
|
|
|
|
// 테이블 컬럼 정의
|
|
// 체크박스, 번호, 이슈번호, 시공번호, 거래처, 현장, 구분, 제목, 보고자, 이슈보고일, 이슈해결일, 담당자, 중요도, 상태, 작업
|
|
const tableColumns: TableColumn[] = [
|
|
{ key: 'no', label: '번호', className: 'w-[50px] text-center' },
|
|
{ key: 'issueNumber', label: '이슈번호', className: 'w-[120px]' },
|
|
{ key: 'constructionNumber', label: '시공번호', className: 'w-[100px]' },
|
|
{ key: 'partnerName', label: '거래처', className: 'w-[100px]' },
|
|
{ key: 'siteName', label: '현장', className: 'min-w-[120px]' },
|
|
{ key: 'category', label: '구분', className: 'w-[80px] text-center' },
|
|
{ key: 'title', label: '제목', className: 'min-w-[150px]' },
|
|
{ key: 'reporter', label: '보고자', className: 'w-[80px]' },
|
|
{ key: 'reportDate', label: '이슈보고일', className: 'w-[100px]' },
|
|
{ key: 'resolvedDate', label: '이슈해결일', className: 'w-[100px]' },
|
|
{ key: 'assignee', label: '담당자', className: 'w-[80px]' },
|
|
{ key: 'priority', label: '중요도', className: 'w-[80px] text-center' },
|
|
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
|
{ key: 'actions', label: '작업', className: 'w-[80px] text-center' },
|
|
];
|
|
|
|
interface IssueManagementListClientProps {
|
|
initialData?: Issue[];
|
|
initialStats?: IssueStats;
|
|
}
|
|
|
|
export default function IssueManagementListClient({
|
|
initialData = [],
|
|
initialStats,
|
|
}: IssueManagementListClientProps) {
|
|
const router = useRouter();
|
|
|
|
// 상태
|
|
const [issues, setIssues] = useState<Issue[]>(initialData);
|
|
const [stats, setStats] = useState<IssueStats | null>(initialStats || null);
|
|
const [searchValue, setSearchValue] = useState('');
|
|
// 다중선택 필터 (빈 배열 = 전체)
|
|
const [partnerFilters, setPartnerFilters] = useState<string[]>([]);
|
|
const [siteFilters, setSiteFilters] = useState<string[]>([]);
|
|
const [categoryFilters, setCategoryFilters] = useState<string[]>([]);
|
|
const [reporterFilters, setReporterFilters] = useState<string[]>([]);
|
|
const [assigneeFilters, setAssigneeFilters] = useState<string[]>([]);
|
|
// 단일선택 필터
|
|
const [priorityFilter, setPriorityFilter] = useState<string>('all');
|
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
|
const [sortBy, setSortBy] = useState<string>('latest');
|
|
const [startDate, setStartDate] = useState<string>('');
|
|
const [endDate, setEndDate] = useState<string>('');
|
|
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [activeStatTab, setActiveStatTab] = useState<'all' | 'received' | 'in_progress' | 'resolved' | 'unresolved'>('all');
|
|
const [withdrawDialogOpen, setWithdrawDialogOpen] = useState(false);
|
|
const itemsPerPage = 20;
|
|
|
|
// 데이터 로드
|
|
const loadData = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const [listResult, statsResult] = await Promise.all([
|
|
getIssueList({
|
|
size: 1000,
|
|
startDate: startDate || undefined,
|
|
endDate: endDate || undefined,
|
|
}),
|
|
getIssueStats(),
|
|
]);
|
|
|
|
if (listResult.success && listResult.data) {
|
|
setIssues(listResult.data.items);
|
|
}
|
|
if (statsResult.success && statsResult.data) {
|
|
setStats(statsResult.data);
|
|
}
|
|
} catch {
|
|
toast.error('데이터 로드에 실패했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [startDate, endDate]);
|
|
|
|
// 초기 데이터가 없으면 로드
|
|
useEffect(() => {
|
|
if (initialData.length === 0) {
|
|
loadData();
|
|
}
|
|
}, [initialData.length, loadData]);
|
|
|
|
// 다중선택 필터 옵션 변환 (MultiSelectCombobox용)
|
|
const partnerOptions: MultiSelectOption[] = useMemo(() =>
|
|
MOCK_ISSUE_PARTNERS.map(p => ({ value: p.value, label: p.label })),
|
|
[]);
|
|
const siteOptions: MultiSelectOption[] = useMemo(() =>
|
|
MOCK_ISSUE_SITES.map(s => ({ value: s.value, label: s.label })),
|
|
[]);
|
|
const categoryOptions: MultiSelectOption[] = useMemo(() =>
|
|
ISSUE_CATEGORY_OPTIONS.filter(c => c.value !== 'all').map(c => ({ value: c.value, label: c.label })),
|
|
[]);
|
|
const reporterOptions: MultiSelectOption[] = useMemo(() =>
|
|
MOCK_ISSUE_REPORTERS.map(r => ({ value: r.value, label: r.label })),
|
|
[]);
|
|
const assigneeOptions: MultiSelectOption[] = useMemo(() =>
|
|
MOCK_ISSUE_ASSIGNEES.map(a => ({ value: a.value, label: a.label })),
|
|
[]);
|
|
|
|
// 필터링된 데이터
|
|
const filteredIssues = useMemo(() => {
|
|
return issues.filter((item) => {
|
|
// 상태 탭 필터
|
|
if (activeStatTab !== 'all' && item.status !== activeStatTab) return false;
|
|
|
|
// 상태 필터
|
|
if (statusFilter !== 'all' && item.status !== statusFilter) return false;
|
|
|
|
// 중요도 필터
|
|
if (priorityFilter !== 'all' && item.priority !== priorityFilter) return false;
|
|
|
|
// 거래처 필터 (다중선택)
|
|
if (partnerFilters.length > 0) {
|
|
const matchingPartner = MOCK_ISSUE_PARTNERS.find((p) => p.label === item.partnerName);
|
|
if (!matchingPartner || !partnerFilters.includes(matchingPartner.value)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 현장 필터 (다중선택)
|
|
if (siteFilters.length > 0) {
|
|
const matchingSite = MOCK_ISSUE_SITES.find((s) => s.label === item.siteName);
|
|
if (!matchingSite || !siteFilters.includes(matchingSite.value)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 구분 필터 (다중선택)
|
|
if (categoryFilters.length > 0) {
|
|
if (!categoryFilters.includes(item.category)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 보고자 필터 (다중선택)
|
|
if (reporterFilters.length > 0) {
|
|
const matchingReporter = MOCK_ISSUE_REPORTERS.find((r) => r.label === item.reporter);
|
|
if (!matchingReporter || !reporterFilters.includes(matchingReporter.value)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 담당자 필터 (다중선택)
|
|
if (assigneeFilters.length > 0) {
|
|
const matchingAssignee = MOCK_ISSUE_ASSIGNEES.find((a) => a.label === item.assignee);
|
|
if (!matchingAssignee || !assigneeFilters.includes(matchingAssignee.value)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 검색 필터
|
|
if (searchValue) {
|
|
const search = searchValue.toLowerCase();
|
|
return (
|
|
item.issueNumber.toLowerCase().includes(search) ||
|
|
item.constructionNumber.toLowerCase().includes(search) ||
|
|
item.partnerName.toLowerCase().includes(search) ||
|
|
item.siteName.toLowerCase().includes(search) ||
|
|
item.title.toLowerCase().includes(search) ||
|
|
item.reporter.toLowerCase().includes(search) ||
|
|
item.assignee.toLowerCase().includes(search)
|
|
);
|
|
}
|
|
return true;
|
|
});
|
|
}, [issues, activeStatTab, statusFilter, priorityFilter, partnerFilters, siteFilters, categoryFilters, reporterFilters, assigneeFilters, searchValue]);
|
|
|
|
// 정렬
|
|
const sortedIssues = useMemo(() => {
|
|
const sorted = [...filteredIssues];
|
|
switch (sortBy) {
|
|
case 'latest':
|
|
sorted.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
|
break;
|
|
case 'oldest':
|
|
sorted.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
|
|
break;
|
|
case 'reportDate':
|
|
sorted.sort((a, b) => new Date(b.reportDate).getTime() - new Date(a.reportDate).getTime());
|
|
break;
|
|
case 'priorityHigh':
|
|
const priorityOrder: Record<string, number> = { urgent: 0, normal: 1 };
|
|
sorted.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
|
|
break;
|
|
case 'priorityLow':
|
|
const priorityOrderLow: Record<string, number> = { urgent: 1, normal: 0 };
|
|
sorted.sort((a, b) => priorityOrderLow[a.priority] - priorityOrderLow[b.priority]);
|
|
break;
|
|
}
|
|
return sorted;
|
|
}, [filteredIssues, sortBy]);
|
|
|
|
// 페이지네이션
|
|
const totalPages = Math.ceil(sortedIssues.length / itemsPerPage);
|
|
const paginatedData = useMemo(() => {
|
|
const start = (currentPage - 1) * itemsPerPage;
|
|
return sortedIssues.slice(start, start + itemsPerPage);
|
|
}, [sortedIssues, currentPage, itemsPerPage]);
|
|
|
|
// 핸들러
|
|
const handleSearchChange = useCallback((value: string) => {
|
|
setSearchValue(value);
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
const handleToggleSelection = useCallback((id: string) => {
|
|
setSelectedItems((prev) => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(id)) {
|
|
newSet.delete(id);
|
|
} else {
|
|
newSet.add(id);
|
|
}
|
|
return newSet;
|
|
});
|
|
}, []);
|
|
|
|
const handleToggleSelectAll = useCallback(() => {
|
|
if (selectedItems.size === paginatedData.length) {
|
|
setSelectedItems(new Set());
|
|
} else {
|
|
setSelectedItems(new Set(paginatedData.map((c) => c.id)));
|
|
}
|
|
}, [selectedItems.size, paginatedData]);
|
|
|
|
const handleRowClick = useCallback(
|
|
(item: Issue) => {
|
|
router.push(`/ko/construction/project/issue-management/${item.id}`);
|
|
},
|
|
[router]
|
|
);
|
|
|
|
const handleEdit = useCallback(
|
|
(e: React.MouseEvent, itemId: string) => {
|
|
e.stopPropagation();
|
|
router.push(`/ko/construction/project/issue-management/${itemId}/edit`);
|
|
},
|
|
[router]
|
|
);
|
|
|
|
const handleCreateIssue = useCallback(() => {
|
|
router.push('/ko/construction/project/issue-management/new');
|
|
}, [router]);
|
|
|
|
// 철회 다이얼로그 열기
|
|
const handleWithdrawClick = useCallback(() => {
|
|
if (selectedItems.size === 0) {
|
|
toast.error('철회할 이슈를 선택해주세요.');
|
|
return;
|
|
}
|
|
setWithdrawDialogOpen(true);
|
|
}, [selectedItems.size]);
|
|
|
|
// 철회 실행
|
|
const handleWithdraw = useCallback(async () => {
|
|
try {
|
|
const ids = Array.from(selectedItems);
|
|
const result = await withdrawIssues(ids);
|
|
if (result.success) {
|
|
toast.success(`${ids.length}건의 이슈가 철회되었습니다.`);
|
|
setSelectedItems(new Set());
|
|
loadData();
|
|
} else {
|
|
toast.error(result.error || '이슈 철회에 실패했습니다.');
|
|
}
|
|
} catch {
|
|
toast.error('이슈 철회에 실패했습니다.');
|
|
} finally {
|
|
setWithdrawDialogOpen(false);
|
|
}
|
|
}, [selectedItems, loadData]);
|
|
|
|
// 날짜 포맷
|
|
const formatDate = (dateStr: string | null) => {
|
|
if (!dateStr) return '-';
|
|
return dateStr.split('T')[0];
|
|
};
|
|
|
|
// 테이블 행 렌더링
|
|
const renderTableRow = useCallback(
|
|
(item: Issue, index: number, globalIndex: number) => {
|
|
const isSelected = selectedItems.has(item.id);
|
|
|
|
return (
|
|
<TableRow
|
|
key={item.id}
|
|
className="cursor-pointer hover:bg-muted/50"
|
|
onClick={() => handleRowClick(item)}
|
|
>
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<Checkbox
|
|
checked={isSelected}
|
|
onCheckedChange={() => handleToggleSelection(item.id)}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
|
|
<TableCell>{item.issueNumber}</TableCell>
|
|
<TableCell>{item.constructionNumber}</TableCell>
|
|
<TableCell>{item.partnerName}</TableCell>
|
|
<TableCell>{item.siteName}</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
|
|
{ISSUE_CATEGORY_LABELS[item.category]}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="max-w-[200px] truncate" title={item.title}>{item.title}</TableCell>
|
|
<TableCell>{item.reporter}</TableCell>
|
|
<TableCell>{formatDate(item.reportDate)}</TableCell>
|
|
<TableCell>{formatDate(item.resolvedDate)}</TableCell>
|
|
<TableCell>{item.assignee}</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${ISSUE_PRIORITY_STYLES[item.priority]}`}>
|
|
{ISSUE_PRIORITY_LABELS[item.priority]}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${ISSUE_STATUS_STYLES[item.status]}`}>
|
|
{ISSUE_STATUS_LABELS[item.status]}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
{isSelected && (
|
|
<div className="flex items-center justify-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={(e) => handleEdit(e, item.id)}
|
|
>
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
},
|
|
[selectedItems, handleToggleSelection, handleRowClick, handleEdit]
|
|
);
|
|
|
|
// 모바일 카드 렌더링
|
|
const renderMobileCard = useCallback(
|
|
(item: Issue, index: number, globalIndex: number, isSelected: boolean, onToggle: () => void) => {
|
|
return (
|
|
<MobileCard
|
|
title={item.title}
|
|
subtitle={item.issueNumber}
|
|
badge={ISSUE_STATUS_LABELS[item.status]}
|
|
badgeVariant="secondary"
|
|
isSelected={isSelected}
|
|
onToggle={onToggle}
|
|
onClick={() => handleRowClick(item)}
|
|
details={[
|
|
{ label: '거래처', value: item.partnerName },
|
|
{ label: '현장', value: item.siteName },
|
|
{ label: '보고일', value: formatDate(item.reportDate) },
|
|
{ label: '중요도', value: ISSUE_PRIORITY_LABELS[item.priority] },
|
|
]}
|
|
/>
|
|
);
|
|
},
|
|
[handleRowClick]
|
|
);
|
|
|
|
// 헤더 액션 (DateRangeSelector + 이슈 등록 버튼)
|
|
const headerActions = (
|
|
<DateRangeSelector
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
onStartDateChange={setStartDate}
|
|
onEndDateChange={setEndDate}
|
|
extraActions={
|
|
<Button onClick={handleCreateIssue}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
이슈 등록
|
|
</Button>
|
|
}
|
|
/>
|
|
);
|
|
|
|
// 통계 카드 클릭 핸들러
|
|
const handleStatClick = useCallback((tab: 'all' | 'received' | 'in_progress' | 'resolved' | 'unresolved') => {
|
|
setActiveStatTab(tab);
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
// 통계 카드 데이터
|
|
const statsCardsData: StatCard[] = [
|
|
{
|
|
label: '접수',
|
|
value: stats?.received ?? 0,
|
|
icon: Inbox,
|
|
iconColor: 'text-blue-600',
|
|
onClick: () => handleStatClick('received'),
|
|
isActive: activeStatTab === 'received',
|
|
},
|
|
{
|
|
label: '처리중',
|
|
value: stats?.inProgress ?? 0,
|
|
icon: Clock,
|
|
iconColor: 'text-yellow-600',
|
|
onClick: () => handleStatClick('in_progress'),
|
|
isActive: activeStatTab === 'in_progress',
|
|
},
|
|
{
|
|
label: '해결완료',
|
|
value: stats?.resolved ?? 0,
|
|
icon: CheckCircle,
|
|
iconColor: 'text-green-600',
|
|
onClick: () => handleStatClick('resolved'),
|
|
isActive: activeStatTab === 'resolved',
|
|
},
|
|
{
|
|
label: '미해결',
|
|
value: stats?.unresolved ?? 0,
|
|
icon: XCircle,
|
|
iconColor: 'text-red-600',
|
|
onClick: () => handleStatClick('unresolved'),
|
|
isActive: activeStatTab === 'unresolved',
|
|
},
|
|
];
|
|
|
|
// ===== filterConfig 기반 통합 필터 시스템 =====
|
|
const filterConfig: FilterFieldConfig[] = useMemo(() => [
|
|
{
|
|
key: 'partner',
|
|
label: '거래처',
|
|
type: 'multi',
|
|
options: partnerOptions.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
{
|
|
key: 'site',
|
|
label: '현장명',
|
|
type: 'multi',
|
|
options: siteOptions.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
{
|
|
key: 'category',
|
|
label: '구분',
|
|
type: 'multi',
|
|
options: categoryOptions.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
{
|
|
key: 'reporter',
|
|
label: '보고자',
|
|
type: 'multi',
|
|
options: reporterOptions.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
{
|
|
key: 'assignee',
|
|
label: '담당자',
|
|
type: 'multi',
|
|
options: assigneeOptions.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
},
|
|
{
|
|
key: 'priority',
|
|
label: '중요도',
|
|
type: 'single',
|
|
options: ISSUE_PRIORITY_OPTIONS.filter(o => o.value !== 'all').map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
allOptionLabel: '전체',
|
|
},
|
|
{
|
|
key: 'status',
|
|
label: '상태',
|
|
type: 'single',
|
|
options: ISSUE_STATUS_OPTIONS.filter(o => o.value !== 'all').map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
allOptionLabel: '전체',
|
|
},
|
|
{
|
|
key: 'sortBy',
|
|
label: '정렬',
|
|
type: 'single',
|
|
options: ISSUE_SORT_OPTIONS.map(o => ({
|
|
value: o.value,
|
|
label: o.label,
|
|
})),
|
|
allOptionLabel: '최신순',
|
|
},
|
|
], [partnerOptions, siteOptions, categoryOptions, reporterOptions, assigneeOptions]);
|
|
|
|
const filterValues: FilterValues = useMemo(() => ({
|
|
partner: partnerFilters,
|
|
site: siteFilters,
|
|
category: categoryFilters,
|
|
reporter: reporterFilters,
|
|
assignee: assigneeFilters,
|
|
priority: priorityFilter,
|
|
status: statusFilter,
|
|
sortBy: sortBy,
|
|
}), [partnerFilters, siteFilters, categoryFilters, reporterFilters, assigneeFilters, priorityFilter, statusFilter, sortBy]);
|
|
|
|
const handleFilterChange = useCallback((key: string, value: string | string[]) => {
|
|
switch (key) {
|
|
case 'partner':
|
|
setPartnerFilters(value as string[]);
|
|
break;
|
|
case 'site':
|
|
setSiteFilters(value as string[]);
|
|
break;
|
|
case 'category':
|
|
setCategoryFilters(value as string[]);
|
|
break;
|
|
case 'reporter':
|
|
setReporterFilters(value as string[]);
|
|
break;
|
|
case 'assignee':
|
|
setAssigneeFilters(value as string[]);
|
|
break;
|
|
case 'priority':
|
|
setPriorityFilter(value as string);
|
|
break;
|
|
case 'status':
|
|
setStatusFilter(value as string);
|
|
break;
|
|
case 'sortBy':
|
|
setSortBy(value as string);
|
|
break;
|
|
}
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
const handleFilterReset = useCallback(() => {
|
|
setPartnerFilters([]);
|
|
setSiteFilters([]);
|
|
setCategoryFilters([]);
|
|
setReporterFilters([]);
|
|
setAssigneeFilters([]);
|
|
setPriorityFilter('all');
|
|
setStatusFilter('all');
|
|
setSortBy('latest');
|
|
setCurrentPage(1);
|
|
}, []);
|
|
|
|
// 철회 버튼 (bulkActions용)
|
|
const bulkActions = selectedItems.size > 0 ? (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleWithdrawClick}
|
|
className="text-orange-600 border-orange-300 hover:bg-orange-50"
|
|
>
|
|
<Undo2 className="mr-2 h-4 w-4" />
|
|
철회 ({selectedItems.size})
|
|
</Button>
|
|
) : null;
|
|
|
|
return (
|
|
<>
|
|
<IntegratedListTemplateV2
|
|
title="이슈관리"
|
|
description="이슈 목록을 관리합니다"
|
|
icon={AlertTriangle}
|
|
headerActions={headerActions}
|
|
stats={statsCardsData}
|
|
filterConfig={filterConfig}
|
|
filterValues={filterValues}
|
|
onFilterChange={handleFilterChange}
|
|
onFilterReset={handleFilterReset}
|
|
filterTitle="이슈 필터"
|
|
bulkActions={bulkActions}
|
|
searchValue={searchValue}
|
|
onSearchChange={handleSearchChange}
|
|
searchPlaceholder="이슈번호, 시공번호, 거래처, 현장, 제목, 보고자, 담당자 검색"
|
|
tableColumns={tableColumns}
|
|
data={paginatedData}
|
|
allData={sortedIssues}
|
|
getItemId={(item) => item.id}
|
|
renderTableRow={renderTableRow}
|
|
renderMobileCard={renderMobileCard}
|
|
selectedItems={selectedItems}
|
|
onToggleSelection={handleToggleSelection}
|
|
onToggleSelectAll={handleToggleSelectAll}
|
|
pagination={{
|
|
currentPage,
|
|
totalPages,
|
|
totalItems: sortedIssues.length,
|
|
itemsPerPage,
|
|
onPageChange: setCurrentPage,
|
|
}}
|
|
/>
|
|
|
|
{/* 철회 확인 다이얼로그 */}
|
|
<AlertDialog open={withdrawDialogOpen} onOpenChange={setWithdrawDialogOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>이슈 철회</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
선택한 {selectedItems.size}건의 이슈를 철회하시겠습니까?
|
|
<br />
|
|
철회된 이슈는 복구할 수 없습니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleWithdraw}
|
|
className="bg-orange-600 hover:bg-orange-700"
|
|
>
|
|
철회
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</>
|
|
);
|
|
} |