73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
import React, { useState, useCallback } from 'react'
|
|
import { View, Text, FlatList, StyleSheet, RefreshControl, ScrollView } from 'react-native'
|
|
import { useFocusEffect } from 'expo-router'
|
|
import { COLORS } from '../../constants/Config'
|
|
import { getInstitutionStats } from '../../services/api'
|
|
|
|
export default function InstitutionCompareScreen() {
|
|
const [rows, setRows] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true)
|
|
try { const r = await getInstitutionStats(); setRows(r.data?.items ?? r.data ?? []) }
|
|
catch { setRows([]) }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
useFocusEffect(useCallback(() => { load() }, [load]))
|
|
|
|
const max = Math.max(...rows.map(r => r.total_sr ?? 0), 1)
|
|
|
|
return (
|
|
<ScrollView
|
|
style={{ flex: 1, backgroundColor: COLORS.bg }}
|
|
refreshControl={<RefreshControl refreshing={loading} onRefresh={load} />}
|
|
>
|
|
{/* 헤더 */}
|
|
<View style={s.thead}>
|
|
<Text style={[s.th, { flex: 2 }]}>기관</Text>
|
|
<Text style={s.th}>전체</Text>
|
|
<Text style={s.th}>완료</Text>
|
|
<Text style={s.th}>SLA</Text>
|
|
<Text style={s.th}>처리율</Text>
|
|
</View>
|
|
|
|
{rows.map((item, i) => {
|
|
const rate = item.total_sr > 0 ? Math.round((item.completed_sr / item.total_sr) * 100) : 0
|
|
const barW = Math.round(((item.total_sr ?? 0) / max) * 100)
|
|
const slaColor = (item.sla_compliance_rate ?? 0) >= 95 ? COLORS.success : (item.sla_compliance_rate ?? 0) >= 80 ? COLORS.warning : COLORS.danger
|
|
return (
|
|
<View key={i} style={s.row}>
|
|
<View style={{ flex: 2 }}>
|
|
<Text style={s.instName} numberOfLines={1}>{item.institution_name ?? item.inst_code}</Text>
|
|
<View style={s.barBg}>
|
|
<View style={[s.barFill, { width: `${barW}%` }]} />
|
|
</View>
|
|
</View>
|
|
<Text style={s.td}>{item.total_sr ?? 0}</Text>
|
|
<Text style={s.td}>{item.completed_sr ?? 0}</Text>
|
|
<Text style={[s.td, { color: slaColor, fontWeight: '700' }]}>{item.sla_compliance_rate ?? 0}%</Text>
|
|
<Text style={s.td}>{rate}%</Text>
|
|
</View>
|
|
)
|
|
})}
|
|
|
|
{rows.length === 0 && !loading && (
|
|
<Text style={s.empty}>기관 데이터가 없습니다.</Text>
|
|
)}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
thead: { flexDirection: 'row', backgroundColor: COLORS.gnbBg, paddingHorizontal: 12, paddingVertical: 10 },
|
|
th: { flex: 1, fontSize: 12, color: '#fff', fontWeight: '700', textAlign: 'center' },
|
|
row: { flexDirection: 'row', backgroundColor: '#fff', marginHorizontal: 8, marginTop: 4, borderRadius: 8, padding: 10, alignItems: 'center', gap: 4 },
|
|
instName: { fontSize: 12, fontWeight: '700', color: COLORS.text, marginBottom: 4 },
|
|
barBg: { height: 4, backgroundColor: COLORS.border, borderRadius: 2 },
|
|
barFill: { height: 4, backgroundColor: COLORS.accent, borderRadius: 2 },
|
|
td: { flex: 1, fontSize: 12, color: COLORS.text, textAlign: 'center' },
|
|
empty: { textAlign: 'center', color: COLORS.muted, marginTop: 40 },
|
|
})
|