fix: fix a bug beat maybe null will throw error

src/client/components/monitor/MonitorHealthBar.tsx

@@ -12,7 +12,9 @@ interface MonitorHealthBarProps {
   count?: number;
   size?: HealthBarProps['size'];
   showCurrentStatus?: boolean;
-  onBeatsItemUpdate?: (items: { value: number; createdAt: string }[]) => void;
+  onBeatsItemUpdate?: (
+    items: ({ value: number; createdAt: string | Date } | null)[]
+  ) => void;
 }
 export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
   (props) => {

src/client/components/monitor/MonitorList.tsx

@@ -28,10 +28,10 @@ export const MonitorList: React.FC = React.memo(() => {
     return null;
   }, []);
   const [beats, setBeats] = useState<
-    {
+    ({
       value: number;
-      createdAt: string;
+      createdAt: string | Date;
-    }[]
+    } | null)[]
   >([]);
 
   const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
@@ -41,6 +41,10 @@ export const MonitorList: React.FC = React.memo(() => {
   const upPercent = useMemo(() => {
     let up = 0;
     beats.forEach((b) => {
+      if (!b) {
+        return;
+      }
+
       if (b.value >= 0) {
         up++;
       }

src/client/pages/Monitor/index.tsx

@@ -12,7 +12,7 @@ export const MonitorPage: React.FC = React.memo(() => {
   return (
     <div className="h-full flex flex-col">
       <div className="flex-1">
-        <div className="p-4">
+        <div className="px-4 pt-4">
           <div
             className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer"
             onClick={() => navigate('/monitor/add')}