GH-94 : [UI][STYLES] Update states, redirects and chart visuals

package.json

@@ -35,9 +35,9 @@
     "highcharts": "^12.4.0",
     "highcharts-react-official": "^3.2.2",
     "i": "^0.3.7",
-    "lucide-react": "^0.515.0",
-    "jspdf": "^3.0.3",
+    "jspdf": "^4.0.0",
     "jspdf-autotable": "^5.0.2",
+    "lucide-react": "^0.515.0",
     "npm": "^11.5.2",
     "react": "^19.2.1",
     "react-chartjs-2": "^5.3.0",
@@ -74,4 +74,4 @@
     "tw-animate-css": "^1.4.0",
     "vite": "^6.3.5"
   }
-}
+}

src/components/version.jsx

@@ -1,18 +1,11 @@
-import { useEffect, useState } from "react";
-
 export default function Version() {
-  const [version, setVersion] = useState("");
+  const version = window?.configs?.version || "";
 
-  useEffect(() => {
-    const version = window?.configs?.version
-      ? window.configs.version
-      : "rc-1-1";
-    setVersion(version);
-  }, []);
+  if (!version) return null;
 
   return (
-    <div className="text-center inline-flex items-center space-x-2 bg-blue-900/20 border border-blue-800/30 rounded-full px-4 py-1 text-blue-400 text-sm font-mono mb-4">
-      <span className="text-xs">{version}</span>
-    </div>
+    <sup className="text-[0.4em] ml-1 px-1 py-0.5 rounded bg-accent/10 border border-accent/30 text-accent font-semibold align-super">
+      {version}
+    </sup>
   );
 }

src/hooks/useGetDatasetsByYears.js

@@ -34,8 +34,10 @@ export const useGetDatasetsByYears = (selectedYears = [], yearToDatasetId = {})
             .filter(Boolean);
     }, [selectedYears, queries]);
 
-    // Check if any query is loading
+    // Check if any query is loading or has error
     const isAnyLoading = queries.some((query) => query.isLoading);
+    const isError = queries.some((query) => query.isError);
+    const error = queries.find((query) => query.error)?.error;
 
     // Get the current loading year (first loading query)
     const loadingYear = useMemo(() => {
@@ -46,6 +48,8 @@ export const useGetDatasetsByYears = (selectedYears = [], yearToDatasetId = {})
     return {
         fetchedDatasets,
         loadingYear,
-        isAnyLoading
+        isAnyLoading,
+        isError,
+        error
     };
 };

src/index.css

@@ -17,22 +17,25 @@
   --primary: oklch(0.15 0 0);
   --primary-foreground: oklch(0.98 0 0);
 
-  --secondary: oklch(0.65 0.2 240);       /* soft blue */
+  --secondary: oklch(0.65 0.2 240);
+  /* soft blue */
   --secondary-foreground: oklch(1 0 0);
 
   --muted: oklch(0.92 0 0);
   --muted-foreground: oklch(0.5 0 0);
 
-  --accent: oklch(0.65 0.2 240);          /* same as secondary for accent */
+  --accent: oklch(0.65 0.2 240);
+  /* same as secondary for accent */
   --accent-foreground: oklch(1 0 0);
 
-  --destructive: oklch(0.577 0.245 27.325); /* red for destructive stays */
+  --destructive: oklch(0.577 0.245 27.325);
+  /* red for destructive stays */
   --destructive-foreground: oklch(0.577 0.245 27.325);
 
   --border: oklch(89.143% 0.0001 271.152);
   --input: oklch(0.92 0 0);
   --ring: oklch(0.65 0.2 240);
-  
+
   --active-green: oklch(72.3% 0.219 149.579);
 
   --purple-light: oklch(71.4% 0.203 305.504);
@@ -116,18 +119,19 @@ body {
 
 .react-datepicker {
   display: flex !important;
-  gap: 1rem; 
+  gap: 1rem;
 }
 
 .react-datepicker__month-container {
   float: none !important;
 }
 
 .scroll-wrapper {
-  scrollbar-width: thin; 
+  scrollbar-width: thin;
   scrollbar-color: transparent transparent;
   transition: scrollbar-color 0.3s;
 }
+
 .react-datepicker__month-container {
   width: 100% !important;
 }
@@ -136,6 +140,7 @@ body {
   width: 100% !important;
 
 }
+
 .react-datepicker__day-names {
   width: 100% !important;
   display: flex;
@@ -170,20 +175,23 @@ body {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background-color: rgba(100, 100, 100, 0.4); /* Thumb color */
+  background-color: rgba(100, 100, 100, 0.4);
+  /* Thumb color */
   border-radius: 4px;
 }
 
 /* Scrollbar Styling for Firefox */
 .custom-scrollbar {
-  scrollbar-width: thin; /* Makes it thin */
+  scrollbar-width: thin;
+  /* Makes it thin */
   scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -195,33 +203,28 @@ body {
 
 /* Hide scrollbar but allow scroll */
 .no-scrollbar {
-  -ms-overflow-style: none;  
-  scrollbar-width: none;    
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
+
 .no-scrollbar::-webkit-scrollbar {
-  display: none;             
+  display: none;
 }
 
 ::-webkit-scrollbar {
-  width: 7px;              
-  height: 5px;           
+  width: 5px;
+  height: 3px;
 }
 
 ::-webkit-scrollbar-track {
-  background: #1e293b; 
+  background: #d6dcdf;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #043077;
+  background-color: #0099ee;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #06359c; /* darker on hover */
-}
-
-
-
-
-
-
+  background-color: #036fa9;
+}