85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import styles from './DashboardPage.module.css'
|
|
import Header from '../components/layout/Header'
|
|
import BuildingCard from '../components/dashboard/BuildingCard'
|
|
import BatteryHealthCard from '../components/dashboard/BatteryHealthCard'
|
|
|
|
// 건물 데이터 (추후 API 연동)
|
|
const buildings = [
|
|
{ id: 1, name: '물류동', workers: 1107, anchorNormal: 6, anchorBroken: 0 },
|
|
{ id: 2, name: '생산동', workers: 1107, anchorNormal: 12, anchorBroken: 3 },
|
|
{ id: 3, name: '관리동', workers: 1107, anchorNormal: 2, anchorBroken: 3 },
|
|
{ id: 4, name: '위험물', workers: 117, anchorNormal: 12, anchorBroken: 0 },
|
|
{ id: 5, name: '휴게동', workers: 1107, anchorNormal: 120, anchorBroken: 1 },
|
|
{ id: 6, name: '식당', workers: 25, anchorNormal: 6, anchorBroken: 0 },
|
|
]
|
|
|
|
export default function DashboardPage() {
|
|
return (
|
|
<div className={styles.container}>
|
|
{/* Background blur effect */}
|
|
<div className={styles.bgBlur} />
|
|
|
|
{/* Header */}
|
|
<Header showMenu logoPosition="left" />
|
|
|
|
{/* 전체 현황 섹션 */}
|
|
<section className={styles.statusSection}>
|
|
<h2 className={styles.sectionTitle}>전체 현황</h2>
|
|
<div className={styles.statusMetrics}>
|
|
<div className={styles.metric}>
|
|
<span className={styles.metricLabel}>등록된 작업자</span>
|
|
<span className={styles.metricValue}>4,597</span>
|
|
</div>
|
|
<div className={styles.metric}>
|
|
<span className={styles.metricLabel}>단지내 재실자</span>
|
|
<span className={styles.metricValue}>4,487</span>
|
|
</div>
|
|
<div className={styles.metric}>
|
|
<span className={styles.metricLabel}>미입실</span>
|
|
<span className={styles.metricValue}>110</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 건물 선택 섹션 */}
|
|
<section className={styles.buildingSection}>
|
|
<div className={styles.buildingSectionHeader}>
|
|
<span className={styles.buildingSectionTitle}>건물을 선택해주세요.</span>
|
|
<ChevronIcon />
|
|
</div>
|
|
<div className={styles.buildingGrid}>
|
|
{buildings.map((building) => (
|
|
<BuildingCard
|
|
key={building.id}
|
|
name={building.name}
|
|
workers={building.workers}
|
|
anchorNormal={building.anchorNormal}
|
|
anchorBroken={building.anchorBroken}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 배터리 헬스 체크 섹션 */}
|
|
<section className={styles.batterySection}>
|
|
<div className={styles.batterySectionHeader}>
|
|
<span className={styles.batterySectionTitle}>배터리 헬스 체크</span>
|
|
<ChevronIcon />
|
|
</div>
|
|
<div className={styles.batteryGrid}>
|
|
<BatteryHealthCard level="high" value={4490} />
|
|
<BatteryHealthCard level="low" value={104} />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ChevronIcon() {
|
|
return (
|
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: 'rotate(-90deg)' }}>
|
|
<path d="M20.1481 11L14.5 17L8.85189 11" stroke="white" strokeWidth="1.5"/>
|
|
</svg>
|
|
)
|
|
}
|