Add support for zigbee component

Author: jfmlima

packages/web/src/components/device-detail/device-components.tsx

@@ -1,5 +1,12 @@
 import { useTranslation } from "react-i18next";
-import { Power, Thermometer, Zap, Activity, Settings } from "lucide-react";
+import {
+  Power,
+  Thermometer,
+  Zap,
+  Activity,
+  Settings,
+  Wifi,
+} from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import {
@@ -15,6 +22,7 @@ import {
   isCoverComponent,
   isSystemComponent,
   isCloudComponent,
+  isZigbeeComponent,
 } from "@/types/api";
 import type { DeviceStatus, Component } from "@/types/api";
 
@@ -241,7 +249,7 @@ export function DeviceComponents({
           <CardHeader className="pb-3">
             <CardTitle className="flex items-center space-x-2 text-base">
               <Settings className="h-4 w-4" />
-              <span>{t("deviceDetail.components.system")}</span>
+              <span>System</span>
             </CardTitle>
             <CardDescription>
               {t("deviceDetail.components.system.description")}
@@ -333,6 +341,59 @@ export function DeviceComponents({
       );
     }
 
+    if (isZigbeeComponent(component)) {
+      const getStatusVariant = (networkState: string) => {
+        switch (networkState.toLowerCase()) {
+          case "joined":
+            return "default";
+          case "joining":
+            return "secondary";
+          default:
+            return "destructive";
+        }
+      };
+
+      const getStatusLabel = (networkState: string) => {
+        switch (networkState.toLowerCase()) {
+          case "joined":
+            return t("deviceDetail.components.zigbee.joined");
+          case "joining":
+            return t("deviceDetail.components.zigbee.joining");
+          default:
+            return t("deviceDetail.components.zigbee.disconnected");
+        }
+      };
+
+      return (
+        <Card key={component.key} className="border-l-4 border-l-orange-500">
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center justify-between text-base">
+              <div className="flex items-center space-x-2">
+                <Wifi className="h-4 w-4" />
+                <span>Zigbee</span>
+              </div>
+              <Badge variant={getStatusVariant(component.status.network_state)}>
+                {getStatusLabel(component.status.network_state)}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              {t("deviceDetail.components.zigbee.description")}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="space-y-2 text-sm">
+              <div className="flex items-center justify-between">
+                <span>{t("deviceDetail.components.zigbee.networkState")}</span>
+                <span className="font-medium">
+                  {component.status.network_state}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      );
+    }
+
     // Generic component fallback
     return (
       <Card key={component.key} className="border-l-4 border-l-gray-300">

packages/web/src/i18n/en.json

@@ -179,6 +179,13 @@
                 "enabled": "Enabled",
                 "server": "Server"
             },
+            "zigbee": {
+                "joined": "JOINED",
+                "joining": "JOINING",
+                "disconnected": "DISCONNECTED",
+                "description": "Zigbee network connectivity status",
+                "networkState": "Network State"
+            },
             "generic": {
                 "componentType": "Component type"
             }

packages/web/src/types/api.ts

@@ -108,6 +108,14 @@ export interface CloudComponent extends Component {
   };
 }
 
+export interface ZigbeeComponent extends Component {
+  type: "zigbee";
+  status: {
+    network_state: string;
+  };
+  config: Record<string, unknown>;
+}
+
 export interface UpdateInfo {
   version: string;
   build_id: string;
@@ -197,7 +205,8 @@ export type ComponentType =
   | InputComponent
   | CoverComponent
   | SystemComponent
-  | CloudComponent;
+  | CloudComponent
+  | ZigbeeComponent;
 
 export function isSwitchComponent(
   component: Component,
@@ -228,3 +237,9 @@ export function isCloudComponent(
 ): component is CloudComponent {
   return component.type === "cloud";
 }
+
+export function isZigbeeComponent(
+  component: Component,
+): component is ZigbeeComponent {
+  return component.type === "zigbee";
+}