-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/fems-app/src/app/(dashboard)/layout.tsx b/fems-app/src/app/(dashboard)/layout.tsx
deleted file mode 100644
index eacd0ba..0000000
--- a/fems-app/src/app/(dashboard)/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// src/app/(dashboard)/layout.tsx
-import { SideNav } from '@/components/layout/SideNav'
-import { TopNav } from '@/components/layout/TopNav'
-
-export default function DashboardLayout({
- children,
-}: {
- children: React.ReactNode
-}) {
- return (
-
- )
-}
\ No newline at end of file
diff --git a/fems-app/src/app/(equipment)/layout.tsx b/fems-app/src/app/(equipment)/layout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/fems-app/src/app/(general)/dashboard/overview/page.tsx b/fems-app/src/app/(general)/dashboard/overview/page.tsx
new file mode 100644
index 0000000..97711d9
--- /dev/null
+++ b/fems-app/src/app/(general)/dashboard/overview/page.tsx
@@ -0,0 +1,196 @@
+// src/app/(general)/dashboard/overview/page.tsx
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Legend,
+} from "recharts";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle, AlertTriangle, Info } from "lucide-react";
+import { formatNumber } from "@/lib/utils";
+import { api } from "@/lib/api";
+
+// API 응답 타입 정의
+interface EnergyUsage {
+ timestamp: string;
+ electricity: number;
+ gas: number;
+ water: number;
+ steam: number;
+}
+
+interface EnergyCost {
+ category: string;
+ amount: number;
+ previousAmount: number;
+ change: number;
+}
+
+interface AlertItem {
+ id: string;
+ type: "error" | "warning" | "info";
+ message: string;
+ createdAt: string;
+}
+
+export default function DashboardOverviewPage() {
+ // 에너지 사용량 데이터 불러오기
+ const { data: energyUsageData, isLoading: loadingUsage } = useQuery({
+ queryKey: ["energy-usage"],
+ queryFn: async () => {
+ const { data } = await api.get
(
+ "/api/v1/app/dashboard/energy-usage"
+ );
+ return data;
+ },
+ });
+
+ // 에너지 비용 데이터 불러오기
+ const { data: energyCostsData, isLoading: loadingCosts } = useQuery({
+ queryKey: ["energy-costs"],
+ queryFn: async () => {
+ const { data } = await api.get(
+ "/api/v1/app/dashboard/energy-costs"
+ );
+ return data;
+ },
+ });
+
+ // 알림 데이터 불러오기
+ const { data: alertsData, isLoading: loadingAlerts } = useQuery({
+ queryKey: ["alerts"],
+ queryFn: async () => {
+ const { data } = await api.get("/api/v1/app/dashboard/alerts");
+ return data;
+ },
+ });
+
+ if (loadingUsage || loadingCosts || loadingAlerts) {
+ return Loading...
; // 로딩 상태 표시
+ }
+
+ return (
+
+ {/* 에너지 비용 카드 */}
+
+ {energyCostsData?.map((cost) => (
+
+
+
+ {cost.category} 비용
+
+ 0 ? "text-red-500" : "text-green-500"
+ }`}
+ >
+ {cost.change > 0 ? "+" : ""}
+ {cost.change.toFixed(1)}%
+
+
+
+
+ {formatNumber(cost.amount)}원
+
+
+ 전월: {formatNumber(cost.previousAmount)}원
+
+
+
+ ))}
+
+
+ {/* 에너지 사용량 차트 */}
+
+
+ 에너지 사용량 추이
+
+
+
+
+
+
+ {
+ return new Date(value).toLocaleDateString("ko-KR", {
+ month: "short",
+ year: "numeric",
+ });
+ }}
+ />
+
+
+ new Date(label).toLocaleDateString("ko-KR")
+ }
+ formatter={(value) => [`${value} kWh`, ""]}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {/* 알림 섹션 */}
+
+
+ 최근 알림
+
+
+ {alertsData?.map((alert) => (
+
+ {alert.type === "error" && }
+ {alert.type === "warning" && (
+
+ )}
+ {alert.type === "info" && }
+
+ {alert.message}
+
+ {new Date(alert.createdAt).toLocaleTimeString()}
+
+
+
+ ))}
+
+
+
+ {/* 왼쪽 사이드바 */}
+
+
+ {/* 오른쪽 메인 영역 */}
+
+ {/* 상단 헤더 */}
+
+
+ {/* 메인 컨텐츠 영역 */}
+ {children}
+
+
+
+
{pageTitles[pathname]}
+
+
+
+
+
+
+
+
+
+
+
+
+ {menuItems.map((section) => (
+
+
+ {section.title}
+
+
+ {section.items.map((item) => (
+
+
+ {item.title}
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+