diff --git a/frontend/src/tabs/assets/components/AssetManagement.tsx b/frontend/src/tabs/assets/components/AssetManagement.tsx index d566003..f479e40 100644 --- a/frontend/src/tabs/assets/components/AssetManagement.tsx +++ b/frontend/src/tabs/assets/components/AssetManagement.tsx @@ -12,6 +12,7 @@ function AssetManagement() { const [regionFilter, setRegionFilter] = useState('all') const [searchTerm, setSearchTerm] = useState('') const [typeFilterVal, setTypeFilterVal] = useState('all') + const [equipFilter, setEquipFilter] = useState('all') const [currentPage, setCurrentPage] = useState(1) const [loading, setLoading] = useState(true) const pageSize = 15 @@ -44,6 +45,16 @@ function AssetManagement() { const filtered = organizations.filter(o => { if (regionFilter !== 'all' && !o.jurisdiction.includes(regionFilter)) return false if (typeFilterVal !== 'all' && o.type !== typeFilterVal) return false + if (equipFilter !== 'all') { + const equipMap: Record boolean> = { + vessel: org => org.vessel > 0, + skimmer: org => org.skimmer > 0, + pump: org => org.pump > 0, + vehicle: org => org.vehicle > 0, + sprayer: org => org.sprayer > 0, + } + if (equipMap[equipFilter] && !equipMap[equipFilter](o)) return false + } if (searchTerm && !o.name.includes(searchTerm) && !o.address.includes(searchTerm)) return false return true }) @@ -54,7 +65,7 @@ function AssetManagement() { // 필터 변경 시 첫 페이지로 // eslint-disable-next-line react-hooks/set-state-in-effect - useEffect(() => { setCurrentPage(1) }, [regionFilter, typeFilterVal, searchTerm]) + useEffect(() => { setCurrentPage(1) }, [regionFilter, typeFilterVal, equipFilter, searchTerm]) const regionShort = (j: string) => { if (j.includes('중부')) return '중부청' @@ -129,6 +140,14 @@ function AssetManagement() { + @@ -152,11 +171,15 @@ function AssetManagement() { - {['번호', '유형', '관할청', '기관명', '주소', '방제선', '유회수기', '이송펌프', '방제차량', '살포장치', '총자산'].map((h, i) => ( - + {['번호', '유형', '관할청', '기관명', '주소', '방제선', '유회수기', '이송펌프', '방제차량', '살포장치', '총자산'].map((h, i) => { + const equipColMap: Record = { vessel: 5, skimmer: 6, pump: 7, vehicle: 8, sprayer: 9 } + const isHighlight = equipFilter !== 'all' && equipColMap[equipFilter] === i + return ( + {h} - ))} + ) + })} @@ -175,11 +198,11 @@ function AssetManagement() { {regionShort(org.jurisdiction)} {org.name} {org.address} - {org.vessel}척 - {org.skimmer}대 - {org.pump}대 - {org.vehicle}대 - {org.sprayer}대 + {org.vessel}척 + {org.skimmer}대 + {org.pump}대 + {org.vehicle}대 + {org.sprayer}대 {org.totalAssets} ))} @@ -187,6 +210,29 @@ function AssetManagement() { + {/* Totals Summary */} +
+ + 합계 ({filtered.length}개 기관) + + {[ + { key: 'vessel', label: '방제선', value: filtered.reduce((s, o) => s + o.vessel, 0), unit: '척' }, + { key: 'skimmer', label: '유회수기', value: filtered.reduce((s, o) => s + o.skimmer, 0), unit: '대' }, + { key: 'pump', label: '이송펌프', value: filtered.reduce((s, o) => s + o.pump, 0), unit: '대' }, + { key: 'vehicle', label: '방제차량', value: filtered.reduce((s, o) => s + o.vehicle, 0), unit: '대' }, + { key: 'sprayer', label: '살포장치', value: filtered.reduce((s, o) => s + o.sprayer, 0), unit: '대' }, + { key: 'total', label: '총자산', value: filtered.reduce((s, o) => s + o.totalAssets, 0), unit: '' }, + ].map((t) => { + const isActive = equipFilter === t.key || t.key === 'total' + return ( +
+ {t.label} + {t.value.toLocaleString()}{t.unit} +
+ ) + })} +
+ {/* Pagination */}