Dev

client/package.json

@@ -30,6 +30,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "framer-motion": "^12.16.0",
     "lucide-react": "^0.511.0",
     "motion": "^12.15.0",
     "react": "^18.3.1",
@@ -38,6 +39,7 @@
     "react-router-dom": "^7.6.2",
     "react-simple-typewriter": "^5.0.1",
     "recharts": "^2.15.3",
+    "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {

client/src/App.tsx

@@ -38,7 +38,7 @@ const App = () => {
 
   return (
     <div
-      className="duration-800 scrollbar-hide min-h-screen transition-colors"
+      className="duration-800 min-h-screen transition-colors"
       style={{
         backgroundColor: 'var(--background)',
         color: 'var(--foreground)',
@@ -76,19 +76,19 @@ const App = () => {
       {/* CONDITIONAL CONTENT WITH ROUTES */}
       <SignedOut>
         <div className="pt-16">
-          {' '}
-          {/* Add top padding for header */}
           <Welcome />
         </div>
       </SignedOut>
       <SignedIn>
-        <div className="pb-24 pt-16">
-          {' '}
-          {/* Add top padding for header and bottom padding for nav */}
-          <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/historical" element={<HistoricalData />} />
-          </Routes>
+        {/* Create a fixed viewport container that accounts for header and nav */}
+        <div className="fixed bottom-0 left-0 right-0 top-16 flex flex-col">
+          {/* Scrollable content area that stops at navigation bar */}
+          <div className="flex-1 overflow-y-auto pb-24">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/historical" element={<HistoricalData />} />
+            </Routes>
+          </div>
         </div>
         <NavigationBar />
       </SignedIn>

client/src/components/Bytes.tsx

@@ -1,4 +1,6 @@
-'use client';
+// ----------------------------------------------------------
+// >> DISK I/O OPERATIONS AND NETWORK TRAFFIC << //
+// ----------------------------------------------------------
 
 import * as React from 'react';
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
@@ -263,10 +265,7 @@ const Bytes: React.FC = () => {
     <Card className="pt-0">
       <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
         <div className="grid flex-1 gap-1">
-          <CardTitle>Historical GKE Metrics</CardTitle>
-          <CardDescription>
-            Disk I/O Operations and Network Traffic
-          </CardDescription>
+          <CardTitle>Disk I/O Operations and Network Traffic</CardTitle>
         </div>
         <Select value={range} onValueChange={(v) => setRange(v as Range)}>
           <SelectTrigger

client/src/components/Dashboard.tsx

@@ -3,12 +3,15 @@
 // ----------------------------------------------------------
 
 import React from 'react';
-import Metrics from './Metrics';
+import EnhancedMetrics from './EnhancedMetrics';
 
 const Dashboard: React.FC = () => {
   return (
-    <div className="flex flex-col">
-      <Metrics />
+    <div className="mx-10 mt-2 flex max-w-full flex-col">
+      {/* Remove height constraints and let it flow naturally in the scroll container */}
+      <div className="space-y-3">
+        <EnhancedMetrics />
+      </div>
     </div>
   );
 };