Graph branch

README.md

@@ -9,7 +9,7 @@ This is a frontend dashboard application for displaying information collected by
 
 To get a local copy running, follow these steps:
 
-1. Clone the repository: `git clone git@github.com:tinyaiot-ps/frontend.git`
+1. Clone the repository: `git clone git@github.com:TinyAIoT/trashcan-frontend.git`
 2. Install [NodeJS](https://nodejs.org/en/download/)
 3. Install the dependencies: `npm install`
 4. Obtain the `.env` variables (-> cf. documentation)

app/globals.css

@@ -160,3 +160,132 @@
   visibility: visible;
   opacity: 1;
 }
+/* Add this to your global CSS or a dedicated CSS module */
+.language-switcher-container {
+  position: fixed; /* Fixed position to stay at the top-right of the viewport */
+  top: 16px; /* Distance from the top */
+  right: 16px; /* Distance from the right */
+  z-index: 1000; /* Ensure it's above other elements */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.language-switcher-container .icon-button {
+  width: 40px; /* Adjust size */
+  height: 40px;
+  background: white;
+  border-radius: 50%; /* Circular button */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.language-switcher-container .icon-button:hover {
+  transform: scale(1.1); /* Slightly enlarge on hover */
+  background-color: #f0f0f0; /* Light gray hover effect */
+}
+
+/* Apply background and text colors dynamically */
+body {
+  background-color: #ffffff; /* Light mode */
+  color: #000000;
+  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
+
+  /* Light Mode Input */
+.input {
+  background-color: hsl(var(--input)); /* Light mode background */
+  color: hsl(var(--foreground));      /* Light mode text color */
+  border: 1px solid hsl(var(--border)); /* Light mode border */
+}
+
+/* Dark Mode Input */
+html.dark .input {
+  background-color: hsl(var(--secondary)); /* Dark mode background */
+  color: hsl(var(--foreground));           /* Dark mode text color */
+  border: 1px solid hsl(var(--border));    /* Dark mode border */
+}
+
+
+}
+
+/* Additional utility classes for reusable theming */
+.card {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+
+.border {
+  border-color: hsl(var(--border));
+}
+
+.input {
+  background-color: hsl(var(--input));
+  color: hsl(var(--foreground));
+  border-color: hsl(var(--border));
+}
+
+/* Smooth transition for theme toggle */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Container for theme switcher button */
+.theme-switcher-container {
+  position: fixed;
+  top: 16px; /* Align with the language switcher */
+  right: 72px; /* Positioned near the language switcher */
+  z-index: 1000; /* Ensure it appears above other elements */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-switcher-container .icon-button {
+  width: 40px;
+  height: 40px;
+  background: white;
+  border-radius: 50%; /* Circular button */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.theme-switcher-container .icon-button:hover {
+  transform: scale(1.1); /* Hover effect */
+  background-color: #f0f0f0; /* Light gray hover effect */
+}
+
+
+html.light body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+html.dark body {
+  background-color: #1a202c; /* Dark mode */
+  color: #ffffff;
+}
+
+/* Focus state for input fields */
+.input:focus {
+  outline: none;
+  border-color: hsl(var(--ring)); /* Focus ring color */
+  box-shadow: 0 0 0 2px hsl(var(--ring)); /* Outer ring effect */
+}
+
+/* Placeholder color */
+.input::placeholder {
+  color: hsl(var(--muted-foreground)); /* Subtle placeholder color */
+}
+
+/* Dark mode placeholder */
+html.dark .input::placeholder {
+  color: hsl(var(--muted-foreground)); /* Match dark mode style */
+}

app/layout.tsx

@@ -1,17 +1,21 @@
 "use client";
 
+import { ThemeProvider, useTheme } from "@/lib/ThemeContext";
+import ThemeSwitcher from "@/components/ThemeSwitcher";
 import { Inter } from "next/font/google";
-import "./globals.css";
+import { TranslationProvider } from "../lib/TranslationContext";
+import "../app/globals.css"
 import { cn } from "../lib/utils";
 import SideNavbar from "@/components/SideNavbar";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { useEffect, useState } from "react";
+//import { useTheme } from "@/lib/ThemeContext";
+
 
 const inter = Inter({ subsets: ["latin"] });
 
 type HistoryStateArguments = [data: any, unused: string, url?: string | URL | null | undefined];
 
-// Override pushState and replaceState methods, as they otherwise don't trigger events 
-// when only navigating within the app instead of reloading the page
 const overrideHistoryMethods = () => {
   const pushState = history.pushState;
   history.pushState = function (...args: HistoryStateArguments) {
@@ -34,36 +38,40 @@ const overrideHistoryMethods = () => {
   });
 };
 
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const [showNavigation, setShowNavigation] = useState(false);
   const [token, setToken] = useState<string>("");
+
   const [loading, setLoading] = useState(true);
 
+  // Add mounted state
+  const [mounted, setMounted] = useState(false);
+
+  // Set mounted to true after client-side rendering
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   useEffect(() => {
     overrideHistoryMethods();
     const storedToken = localStorage.getItem("authToken");
     if (storedToken) setToken(storedToken);
     setLoading(false);
   }, []);
 
-  // Enforce login on all pages except the login page
   useEffect(() => {
     if (loading) return;
-    // This effect depends on `token`, so it will re-run when `token` changes.
-    // Initially, it runs after the token is retrieved from localStorage.
     const pathname = window.location.pathname;
     const noAuthPaths = ["/login"];
     if (!token && !noAuthPaths.includes(pathname)) {
-      window.location.href = "/login"; // Redirect to login page
+      window.location.href = "/login";
     }
-  }, [token, loading]); // Depend on `token` to re-run this effect when it changes
+  }, [token, loading]);
 
-  // Hide the navigation bar on some subpages
   useEffect(() => {
     const noNavigationPaths = ["/login", "/projects"];
 
@@ -72,36 +80,56 @@ export default function RootLayout({
       setShowNavigation(!noNavigationPaths.includes(pathname));
     };
 
-    handlePathChange(); // Call initially to set the correct state
+    handlePathChange();
     window.addEventListener("locationchange", handlePathChange);
 
     return () => {
       window.removeEventListener("locationchange", handlePathChange);
     };
   }, []);
 
-  return (
-    <html lang="en">
+  const { theme } = useTheme(); // Get theme context
+
+   // Prevent rendering until mounted to avoid hydration errors
+   if (!mounted) {
+    return null; // Return nothing until mounted
+  }
+
+return (
+  <ThemeProvider> 
+    <html lang="en" data-theme={theme}>
       <head>
         <title>TinyAIoT Dashboard</title>
       </head>
       <body
         className={cn(
-          "min-h-screen w-full bg-white text-black flex ",
+          `min-h-screen w-full flex ${
+            theme === "dark" ? "bg-black text-white" : "bg-white text-black"
+          }`,
           inter.className,
           {
             "debug-screens": process.env.NODE_ENV === "development",
           }
         )}
       >
-        {showNavigation && (
-          <div className="h-screen">
-            <SideNavbar />
-          </div>
-        )}
-        {/* Main page */}
-        <div className="p-8 w-full">{children}</div>
+
+
+        <TranslationProvider>
+          {/* Language Switcher in the Header */}
+          <header className="flex justify-end p-4 bg-gray-100">
+            <LanguageSwitcher />
+            <ThemeSwitcher />
+          </header>
+          {showNavigation && (
+            <div className="h-screen">
+              <SideNavbar />
+            </div>
+          )}
+          <main className="p-8 w-full">{children}</main>
+        </TranslationProvider>
+
       </body>
     </html>
+  </ThemeProvider>
   );
 }