feat: more changes and fixes

frontend/src/js/_utils.js

@@ -0,0 +1,37 @@
+/**
+ * Converts ANY valid CSS color string (oklch, hex, hsl, etc.)
+ * into a standard RGBA string that Chart.js can understand.
+ * This method uses a canvas to force the browser to compute the color.
+ * @param {string} colorString The color string to convert.
+ * @returns {string} The computed 'rgba(r, g, b, a)' string.
+ */
+window.convertColorToRgba = function convertColorToRgba(colorString) {
+    if (!colorString) return 'rgba(0,0,0,0.1)'; // Fallback
+
+    console.log(colorString)
+
+    // Create a 1x1 pixel canvas
+    let canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    let ctx = canvas.getContext('2d');
+
+    // Set the fillStyle to the color string
+    // The browser MUST parse the oklch string here
+    ctx.fillStyle = colorString.trim();
+    
+    // Draw the pixel
+    ctx.fillRect(0, 0, 1, 1);
+
+    // Get the pixel data. This is ALWAYS returned as [R, G, B, A]
+    // with values from 0-255.
+    const data = ctx.getImageData(0, 0, 1, 1).data;
+    
+    // Convert the 0-255 alpha to a 0-1 float
+    const a = data[3] / 255;
+
+    console.log(data)
+
+    // Return the standard rgba string
+    return `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${a})`;
+}

frontend/src/js/bootstrap.js

@@ -1,4 +1,4 @@
-import './js/_tooltip.js';
+import './_tooltip.js';
 import 'bootstrap/js/dist/dropdown';
 import Toast from 'bootstrap/js/dist/toast';
 import 'bootstrap/js/dist/dropdown';

frontend/src/js/style.js

@@ -1,4 +1,4 @@
 import '@fontsource-variable/jetbrains-mono/wght-italic.css';
 import '@fontsource-variable/jetbrains-mono';
-import './styles/tailwind.css';
-import './styles/style.scss';
+import '../styles/tailwind.css';
+import '../styles/style.scss';

frontend/src/main.js

@@ -0,0 +1,9 @@
+import './js/bootstrap.js';
+import './js/datepicker.js';
+import './js/htmx.js';
+import './js/select.js';
+import './js/charts.js';
+import './js/autosize.js';
+import './js/sweetalert2.js';
+import './js/style.js';
+import './js/_utils.js';

frontend/src/styles/tailwind.css

@@ -139,24 +139,46 @@
     }
 
     .text-exchange-rate {
-        @apply text-base-content/60;
+        @apply text-base-content/60 text-xs;
     }
 
     .text-subtle {
         @apply text-base-content/80;
     }
+
+    /* Card Data Display Styles */
+    .card-data-section {
+        @apply space-y-1;
+    }
+
+    .card-data-row {
+        @apply flex justify-between py-1 px-3 rounded-lg transition-colors duration-150 hover:bg-base-200/50 items-center;
+    }
+
+    .card-data-label {
+        @apply text-base-content/80; /* .text-subtle */
+        @apply text-sm font-medium;
+    }
+
+    .card-data-values {
+        @apply flex flex-col items-end gap-0.5;
+    }
+
+    .card-data-divider {
+        @apply text-base-content/60; /* .hr */
+        @apply my-3;
+    }
 }
 
 
 @layer components {
     .fab {
-    @layer daisyui.component {
-        > :nth-child(n+7) {
-            transition-delay: 150ms;
+        @layer daisyui.component {
+            > :nth-child(n+7) {
+                transition-delay: 150ms;
+            }
         }
-
-  }
-}
+    }
 
     /* === Sidebar styles === */
     .sidebar-active {
@@ -173,7 +195,7 @@
 
     .sidebar-floating {
         /* Establishes the hover group and sets the collapsed/hover widths for the container */
-        @apply lg:w-16 lg:hover:w-112;
+        @apply lg:w-16 lg:hover:w-md;
     }
 
     .sidebar-floating #sidebar {

frontend/vite.config.js

@@ -10,14 +10,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 const rollupInputs = {
-    autosize: resolve(__dirname, 'src/autosize.js'),
-    charts: resolve(__dirname, 'src/charts.js'),
-    datepicker: resolve(__dirname, 'src/datepicker.js'),
-    bootstrap: resolve(__dirname, 'src/bootstrap.js'),
-    htmx: resolve(__dirname, 'src/htmx.js'),
-    select: resolve(__dirname, 'src/select.js'),
-    style: resolve(__dirname, 'src/style.js'),
-    sweetalert2: resolve(__dirname, 'src/sweetalert2.js'),
+    main: resolve(__dirname, 'src/main.js'),
 };
 
 
@@ -42,6 +35,7 @@ export default defineConfig({
             usePolling: true,
             disableGlobbing: false,
         },
+        hmr: false,
         cors: true,
         origin: 'http://100.118.164.62:5173'
     },