From 279e453ad610cb389e89b340e258d207377d8c66 Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Wed, 11 Mar 2026 22:01:43 +0800
Subject: [PATCH] feat(web): add tooltip for charge point status with
 online/offline indication

---
 apps/web/app/dashboard/charge-points/page.tsx | 34 +++++++++++++++----
 apps/web/app/dashboard/charge/page.tsx        |  2 +-
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/dashboard/charge-points/page.tsx b/apps/web/app/dashboard/charge-points/page.tsx
index c03d05e..f4f80b7 100644
--- a/apps/web/app/dashboard/charge-points/page.tsx
+++ b/apps/web/app/dashboard/charge-points/page.tsx
@@ -13,6 +13,7 @@ import {
   Spinner,
   Table,
   TextField,
+  Tooltip,
 } from "@heroui/react";
 import {
   Plus,
@@ -424,12 +425,33 @@ export default function ChargePointsPage() {
               {chargePoints.map((cp) => (
                 <Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
                   <Table.Cell>
-                    <Link
-                      href={`/dashboard/charge-points/${cp.id}`}
-                      className="font-medium text-accent"
-                    >
-                      {cp.chargePointIdentifier}
-                    </Link>
+                    <Tooltip delay={0}>
+                      <Tooltip.Trigger>
+                        <div className="flex items-center gap-2">
+                          <span
+                            className={`size-2 shrink-0 rounded-full ${
+                              cp.lastHeartbeatAt &&
+                              dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
+                                ? "bg-success"
+                                : "bg-gray-300"
+                            }`}
+                          />
+                          <Link
+                            href={`/dashboard/charge-points/${cp.id}`}
+                            className="font-medium text-accent"
+                          >
+                            {cp.chargePointIdentifier}
+                          </Link>
+                        </div>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content placement="start">
+                        {cp.lastHeartbeatAt
+                          ? dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
+                            ? "在线"
+                            : "离线"
+                          : "从未连接"}
+                      </Tooltip.Content>
+                    </Tooltip>
                   </Table.Cell>
                   {isAdmin && (
                     <Table.Cell>
diff --git a/apps/web/app/dashboard/charge/page.tsx b/apps/web/app/dashboard/charge/page.tsx
index 0889c0c..7e66488 100644
--- a/apps/web/app/dashboard/charge/page.tsx
+++ b/apps/web/app/dashboard/charge/page.tsx
@@ -265,7 +265,7 @@ export default function ChargePage() {
   });
 
   const selectedCp = chargePoints.find((cp) => cp.id === selectedCpId) ?? null;
-  const myTags = idTags.filter((t) => t.status === "Accepted");
+  const myTags = idTags?.filter((t) => t.status === "Accepted") ?? [];
 
   const startMutation = useMutation({
     mutationFn: async () => {