Fixing small files for v.0.1.1

jorgedlcruz · jorgedlcruz · commit 4e82f266e40b · 2025-12-29T20:31:24.000Z
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -30,6 +30,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
+        suppressHydrationWarning
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ThemeProvider
diff --git a/app/vbr/dashboard/page.tsx b/app/vbr/dashboard/page.tsx
@@ -2,7 +2,7 @@
 
 export const dynamic = 'force-dynamic'
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useCallback, useRef } from "react"
 import { DashboardStats } from "@/components/dashboard-stats"
 import { SessionsOverview } from "@/components/sessions-overview"
 import { StorageCapacityWidget } from "@/components/storage-capacity-widget"
@@ -15,7 +15,8 @@ import {
     LicenseModel,
     MalwareEventModel,
     SecurityBestPracticeItem,
-    VeeamServerInfo
+    VeeamServerInfo,
+    TransferRateDataPoint
 } from "@/lib/types/veeam"
 import { calculateTransferRates } from "@/lib/utils/transfer-rate"
 import { TransferRateChart } from "@/components/transfer-rate-chart"
@@ -29,18 +30,20 @@ export default function VBRPage() {
     const [securityItems, setSecurityItems] = useState<SecurityBestPracticeItem[]>([])
     const [sessions, setSessions] = useState<VeeamSession[]>([])
     const [timeRange, setTimeRange] = useState<"7d" | "30d">("7d")
-    const [transferRateData, setTransferRateData] = useState<any[]>([])
+    const [transferRateData, setTransferRateData] = useState<TransferRateDataPoint[]>([])
 
     const [loading, setLoading] = useState(true)
     const [isRefreshing, setIsRefreshing] = useState(false)
     const [error, setError] = useState<string | null>(null)
 
     const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
 
-    const fetchData = async () => {
+    const hasLoadedOnce = useRef(false)
+
+    const fetchData = useCallback(async () => {
         try {
             // Only show full loading state on initial load
-            if (jobs.length === 0) setLoading(true)
+            if (!hasLoadedOnce.current) setLoading(true)
             else setIsRefreshing(true)
 
             setError(null)
@@ -82,21 +85,22 @@ export default function VBRPage() {
             setSecurityItems(securityData)
             setTransferRateData(calculateTransferRates(sessionsData))
             setLastUpdated(new Date())
+            hasLoadedOnce.current = true
         } catch (error) {
             console.error("Failed to fetch dashboard data:", error)
             setError(error instanceof Error ? error.message : String(error))
         } finally {
             setLoading(false)
             setIsRefreshing(false)
         }
-    }
+    }, [timeRange])
 
     useEffect(() => {
         fetchData()
         // Refresh data every 5 minutes
         const interval = setInterval(fetchData, 300000)
         return () => clearInterval(interval)
-    }, [timeRange])
+    }, [fetchData])
 
     // Calculate job stats - count jobs that are currently running
     const activeJobs = jobs.filter(j => j.isRunning || j.status === 'Running').length
diff --git a/components/sessions-overview.tsx b/components/sessions-overview.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from "recharts" // Added YAxis
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+// Tabs imports removed
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -29,7 +29,7 @@ import {
     getPaginationRowModel // Added
 } from "@tanstack/react-table"
 import { VeeamSession } from "@/lib/types/veeam"
-import { ArrowUpDown, CheckCircle2, AlertTriangle, XCircle, HelpCircle, Columns, ChevronLeft, ChevronRight, X } from "lucide-react" // Added icons
+import { ArrowUpDown, CheckCircle2, AlertTriangle, XCircle, HelpCircle, Columns, ChevronLeft, ChevronRight } from "lucide-react" // Added icons
 import { DataTableFacetedFilter } from "@/components/data-table-faceted-filter"
 import { Skeleton } from "@/components/ui/skeleton"
 
@@ -152,13 +152,20 @@ export const columns: ColumnDef<VeeamSession>[] = [
 ]
 
 // Custom Tooltip Component
-const CustomTooltip = ({ active, payload, label }: any) => {
+interface TooltipPayload {
+    name: string
+    value: number
+    color?: string
+    payload?: unknown
+}
+
+const CustomTooltip = ({ active, payload, label }: { active?: boolean, payload?: TooltipPayload[], label?: string }) => {
     if (active && payload && payload.length) {
         return (
             <div className="border border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl">
-                <div className="font-medium text-foreground">{new Date(label).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}</div>
+                <div className="font-medium text-foreground">{new Date(label || "").toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}</div>
                 <div className="grid gap-1.5">
-                    {payload.map((entry: any, index: number) => {
+                    {payload.map((entry: TooltipPayload, index: number) => {
                         if (entry.value === 0) return null; // Hide if value is 0
                         const colorMap: Record<string, string> = {
                             "Success": "#22c55e",
diff --git a/components/vbr-restore-points-calendar.tsx b/components/vbr-restore-points-calendar.tsx
@@ -5,7 +5,7 @@ import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSam
 import { ChevronLeft, ChevronRight, HardDrive, Database, Calendar as CalendarIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Card, CardContent } from "@/components/ui/card"
+// Card imports removed
 import { VeeamRestorePoint } from "@/lib/types/veeam"
 import { cn } from "@/lib/utils"
 

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ export default function RootLayout({`
`30`	`30`	`return (`
`31`	`31`	`<html lang="en" suppressHydrationWarning>`
`32`	`32`	`<body`
	`33`	`+ suppressHydrationWarning`
`33`	`34`	className={`${geistSans.variable} ${geistMono.variable} antialiased`}
`34`	`35`	`>`
`35`	`36`	`<ThemeProvider`