Merged DataStore into DataCard and DataRow, fixed gaps between collapsed cards, and allowed cards to be collapsed from message name header.

Author: elisedrouillard

pecan/Frontend/pecan-live-dashboard/package-lock.json

@@ -7,22 +7,28 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "node production-server.js",
+    "prod": "npm run build && npm run start"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "@tailwindcss/vite": "^4.1.13",
     "bootstrap": "^5.3.8",
+    "candied": "^2.2.0",
     "react": "^19.1.1",
     "react-bootstrap": "^2.10.10",
     "react-dom": "^19.1.1",
     "react-router": "^7.9.3",
-    "tailwindcss": "^4.1.13"
+    "tailwindcss": "^4.1.13",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@types/node": "^24.7.1",
     "@types/react": "^19.1.17",
     "@types/react-dom": "^19.1.9",
+    "@types/ws": "^8.18.1",
     "@vitejs/plugin-react": "^5.0.3",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",

pecan/Frontend/pecan-live-dashboard/package.json

@@ -1,12 +1,24 @@
-import { useState } from "react";
-import "./index.css";
+import { useState, useEffect } from "react";
+import "./App.css";
 import Sidebar from "./components/Sidebar";
 import Hamburger from "./components/HamburgerMenu";
+import { processTestMessages } from "./utils/canProcessor";
 import { Outlet } from "react-router";
+import { webSocketService } from "./services/WebSocketService";
 
 function App() {
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
 
+  // Initialize WebSocket service once when app loads
+  useEffect(() => {
+    webSocketService.initialize();
+    
+    // Cleanup on unmount
+    return () => {
+      webSocketService.disconnect();
+    };
+  }, []); // Empty dependency array = runs once on mount
+
   return (
     <div className="h-screen flex flex-row ">
       <div className="h-screen w-[60px]">
@@ -21,6 +33,11 @@ function App() {
       <main id="main-content" className=" w-100 h-full">
         <Outlet />
       </main>
+
+      <div style={{ position: 'absolute', top: 0, right: 0, width: 200, height: 60, background: '#f0f0f0', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 0 }}>
+      </div>
+
+      <button onClick={processTestMessages} style={{ position: 'absolute', top: 10, right: 10, zIndex: 1 }}>Process Test Messages</button>
     </div>
   );
 }