From d430cc5496da6865dae007c3d21f8347474568dd Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Mon, 11 Aug 2025 16:23:40 +0200
Subject: [PATCH] feat(ui): add empty state handling for DHCP lease information

---
 ui/src/components/DhcpLeaseCard.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ui/src/components/DhcpLeaseCard.tsx b/ui/src/components/DhcpLeaseCard.tsx
index 921520f..8c2a861 100644
--- a/ui/src/components/DhcpLeaseCard.tsx
+++ b/ui/src/components/DhcpLeaseCard.tsx
@@ -5,6 +5,8 @@ import { GridCard } from "@/components/Card";
 import { LifeTimeLabel } from "@/routes/devices.$id.settings.network";
 import { NetworkState } from "@/hooks/stores";
 
+import EmptyCard from "./EmptyCard";
+
 export default function DhcpLeaseCard({
   networkState,
   setShowRenewLeaseConfirm,
@@ -12,6 +14,17 @@ export default function DhcpLeaseCard({
   networkState: NetworkState | null;
   setShowRenewLeaseConfirm: (show: boolean) => void;
 }) {
+  const isDhcpLeaseEmpty = Object.keys(networkState?.dhcp_lease || {}).length === 0;
+
+  if (isDhcpLeaseEmpty) {
+    return (
+      <EmptyCard
+        headline="No DHCP Lease information"
+        description="We haven't received any DHCP lease information from the device yet."
+      />
+    );
+  }
+
   return (
     <GridCard>
       <div className="animate-fadeIn p-4 text-black opacity-0 animation-duration-500 dark:text-white">