fix: add ConfirmDialog for renewing DHCP lease and improve network settings layout

- Integrated ConfirmDialog component to confirm DHCP lease renewal.
- Enhanced the layout of network settings, including better organization of IPv4 and IPv6 information.
- Updated state management for displaying network settings and lease information.
- Improved user experience with clearer descriptions and structured UI elements.

ui/src/routes/devices.$id.settings.network.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
 
 import {
   IPv4Mode,
@@ -23,6 +24,7 @@ import { SelectMenuBasic } from "../components/SelectMenuBasic";
 
 import { SettingsItem } from "./devices.$id.settings";
 import Fieldset from "../components/Fieldset";
+import { ConfirmDialog } from "../components/ConfirmDialog";
 
 dayjs.extend(relativeTime);
 
@@ -206,12 +208,15 @@ export default function SettingsNetworkRoute() {
     [networkSettingsLoaded],
   );
 
-  console.log("firstNetworkSettings", firstNetworkSettings.current);
-  console.log("networkSettings", networkSettings);
+  const [showRenewLeaseConfirm, setShowRenewLeaseConfirm] = useState(false);
 
   return (
+    <>
       <Fieldset disabled={!networkSettingsLoaded} className="space-y-4">
-      <SettingsPageHeader title="Network" description="Configure your network settings" />
+        <SettingsPageHeader
+          title="Network"
+          description="Configure your network settings"
+        />
         <div className="space-y-4">
           <SettingsItem
             title="MAC Address"
@@ -251,7 +256,10 @@ export default function SettingsNetworkRoute() {
 
         <div className="space-y-4">
           <div className="space-y-4">
-          <SettingsItem title="Domain" description="Network domain suffix for the device">
+            <SettingsItem
+              title="Domain"
+              description="Network domain suffix for the device"
+            >
               <div className="space-y-2">
                 <SelectMenuBasic
                   size="SM"
@@ -353,7 +361,7 @@ export default function SettingsNetworkRoute() {
               <div className="p-4">
                 <div className="space-y-4">
                   <h3 className="text-base font-bold text-slate-900 dark:text-white">
-                  Current DHCP Lease
+                    DHCP Lease
                   </h3>
 
                   <div className="flex gap-x-6 gap-y-2">
@@ -540,9 +548,11 @@ export default function SettingsNetworkRoute() {
                   <div>
                     <Button
                       size="SM"
-                    theme="primary"
-                    text="Renew lease"
-                    onClick={handleRenewLease}
+                      theme="light"
+                      className="text-red-500"
+                      text="Renew DHCP Lease"
+                      LeadingIcon={ArrowPathIcon}
+                      onClick={() => setShowRenewLeaseConfirm(true)}
                     />
                   </div>
                 </div>
@@ -672,5 +682,18 @@ export default function SettingsNetworkRoute() {
           </SettingsItem>
         </div>
       </Fieldset>
+      <ConfirmDialog
+        open={showRenewLeaseConfirm}
+        onClose={() => setShowRenewLeaseConfirm(false)}
+        title="Renew DHCP Lease"
+        description="This will request a new IP address from your DHCP server. Your device may temporarily lose network connectivity during this process."
+        variant="danger"
+        confirmText="Renew Lease"
+        onConfirm={() => {
+          handleRenewLease();
+          setShowRenewLeaseConfirm(false);
+        }}
+      />
+    </>
   );
 }