Display TpLink Tapo power usage values

app/page.tsx

@@ -9,15 +9,18 @@ import StatsGrid from "./components/StatsGrid";
 import ServicesCard from "./components/ServicesCard";
 import UptimeCard from "./components/UptimeCard";
 import NetworkCard from "./components/NetworkCard";
+import PowerGrid from "./components/PowerGrid";
 import LinksGrid from "./components/LinksGrid";
 import { useCheckAuth } from "@/hooks/useCheckAuth";
 import { useRouter } from "next/navigation";
+import { getPower, type PowerData } from "./lib/getPower";
 
 export default function Home() {
 	const router = useRouter();
 	useCheckAuth();
 
 	const [stats, setStats] = useState<Stats | null>(null);
+	const [power, setPower] = useState<PowerData | null>(null);
 	const [netSpeed, setNetSpeed] = useState<
 		Record<string, { rx: number; tx: number }>
 	>({});
@@ -76,6 +79,21 @@ export default function Home() {
 
 		// Clean up on unmount so we don't have multiple intervals running
 		return () => clearInterval(id);
+	}, []);
+
+	useEffect(() => {
+		const fetchPower = async () => {
+			try {
+				setPower(await getPower());
+			} catch (e) {
+				if (e instanceof Error && e.message === "UNAUTHORIZED") return;
+				console.error("Power fetch failed:", e);
+			}
+		};
+
+		fetchPower();
+		const id = setInterval(fetchPower, 10000);
+		return () => clearInterval(id);
 	}, []); // Empty array means this setup only happens ONCE.
 
 	// Derived values for the UI
@@ -115,6 +133,14 @@ export default function Home() {
 				</div>
 			</div>
 
+			<div className="flex items-baseline justify-between mb-5">
+				<h2 className="text-lg font-medium tracking-tight text-gray-900">
+					Power Consumption
+				</h2>
+			</div>
+
+			<PowerGrid power={power} />
+
 			<LinksGrid />
 		</div>
 	);