- © {new Date().getFullYear()} Intelligent IoT · {note}
+
);
diff --git a/new-frontend/frontend/src/components/Header.jsx b/new-frontend/frontend/src/components/Header.jsx
index b11fb68..c79cbe1 100644
--- a/new-frontend/frontend/src/components/Header.jsx
+++ b/new-frontend/frontend/src/components/Header.jsx
@@ -1,19 +1,228 @@
-export default function Header({ brand = "Intelligent IoT", nav = [] }) {
+import React, { useState, useCallback } from "react";
+import { Link as RouterLink, useLocation, useNavigate } from "react-router-dom";
+import {
+ AppBar, Toolbar, Typography, Button, IconButton, Box,
+ List, ListItem, ListItemButton, ListItemText, useTheme, Drawer, Container
+} from "@mui/material";
+import { Sun, Moon, Menu } from "lucide-react";
+
+const Header = ({ toggleTheme, isDarkMode }) => {
+ const theme = useTheme();
+ const location = useLocation();
+ const navigate = useNavigate();
+ const [mobileOpen, setMobileOpen] = useState(false);
+
+ const handleDrawerToggle = () => setMobileOpen((p) => !p);
+
+ const navItems = [
+ { label: "Home", to: "/" },
+ { label: "Features", href: "/#features" },
+ { label: "Data Selection", href: "/#data-selection" },
+ { label: "Graphs", href: "/#graphs" },
+ { label: "Login", to: "/login" },
+ { label: "Analyze", to: "/analyze" },
+ ];
+
+ const handleHashNav = useCallback(
+ (href) => (e) => {
+ if (!href?.startsWith("/#")) return;
+ e.preventDefault();
+ const [, hash] = href.split("#");
+
+ const scrollTo = () => {
+ const el = document.getElementById(hash);
+ if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+ };
+ if (location.pathname !== "/") {
+ navigate("/");
+ setTimeout(scrollTo, 50);
+ } else {
+ scrollTo();
+ }
+ setMobileOpen(false);
+ },
+ [location.pathname, navigate]
+ );
+
+ const isActive = (item) => {
+ if (item.to) return location.pathname === item.to || location.pathname.startsWith(item.to + "/");
+ if (item.href?.startsWith("/#")) {
+ const currentHash = location.hash?.replace("#", "");
+ const itemHash = item.href.split("#")[1];
+ return location.pathname === "/" && currentHash === itemHash;
+ }
+ return false;
+ };
+
+ const linkSx = (active) => ({
+ color: active ? "#673ab7" : theme.palette.text.primary,
+ fontSize: "0.95rem",
+ textTransform: "none",
+ px: 2,
+ py: 1,
+ borderRadius: "999px",
+ fontWeight: 500,
+ position: "relative",
+ transition: "all 0.25s ease",
+ textDecoration: "none",
+ "&:hover": {
+ backgroundColor: theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "#f4f4f4",
+ boxShadow: "0 8px 20px rgba(0,0,0,0.08)",
+ color: "#673ab7",
+ textDecoration: "none",
+ },
+ });
+
+ const drawer = (
+
+
+ {navItems.map(({ label, to, href }) => (
+
+ {to ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ ))}
+
+
+ );
+
return (
-
-
-
-
- IoT
-
- {brand}
-
-
-
+ <>
+
+
+
+ {/* Mobile Menu Button */}
+
+
+
+
+ {/* Brand (badge + title) */}
+
+
+ IoT
+
+
+ Intelligent IoT
+
+
+
+ {/* Nav Links */}
+
+ {navItems.map((item) =>
+ item.to ? (
+
+ ) : (
+
+ )
+ )}
+
+
+ {/* Theme Toggle */}
+
+ {isDarkMode ? : }
+
+
+
+
+
+ {/* Drawer Menu */}
+
+ {drawer}
+
+
);
-}
\ No newline at end of file
+};
+
+export default Header;
diff --git a/new-frontend/frontend/src/index.css b/new-frontend/frontend/src/index.css
index a461c50..f1d8c73 100644
--- a/new-frontend/frontend/src/index.css
+++ b/new-frontend/frontend/src/index.css
@@ -1 +1 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
diff --git a/new-frontend/frontend/src/main.jsx b/new-frontend/frontend/src/main.jsx
index dd938ab..e9fcff7 100644
--- a/new-frontend/frontend/src/main.jsx
+++ b/new-frontend/frontend/src/main.jsx
@@ -1,15 +1,30 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import './index.css';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-
-
-
-);
+import React, { useMemo, useState, useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import { createTheme, ThemeProvider, CssBaseline } from "@mui/material";
+import App from "./App.jsx";
+import "./index.css";
+function Root() {
+ const [mode, setMode] = useState("light");
+ const theme = useMemo(() => createTheme({ palette: { mode } }), [mode]);
+ // Toggle Tailwind dark class on
+ useEffect(() => {
+ document.documentElement.classList.toggle("dark", mode === "dark");
+ }, [mode]);
+ const toggleTheme = () => setMode((m) => (m === "light" ? "dark" : "light"));
+ return (
+
+
+
+
+ );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+
+);
diff --git a/new-frontend/frontend/src/pages/DashboardPage.jsx b/new-frontend/frontend/src/pages/DashboardPage.jsx
index 9d85c29..db7dad2 100755
--- a/new-frontend/frontend/src/pages/DashboardPage.jsx
+++ b/new-frontend/frontend/src/pages/DashboardPage.jsx
@@ -5,9 +5,20 @@ const DashboardPage = () => {
const { id } = useParams(); // e.g. 'sensor1'
return (
-
-
Dashboard for {id}
-
+
+ {/* page container centered */}
+
+
+ Dashboard for {id}
+
+
+ {/* center the dashboard content */}
+
+
);
};
diff --git a/new-frontend/frontend/src/pages/HomePage.jsx b/new-frontend/frontend/src/pages/HomePage.jsx
index c154acf..7365f6d 100644
--- a/new-frontend/frontend/src/pages/HomePage.jsx
+++ b/new-frontend/frontend/src/pages/HomePage.jsx
@@ -4,20 +4,23 @@ import DatasetsGrid from "../components/DatasetsGrid";
import Footer from "../components/Footer";
import useDatasets from "../hooks/useDatasets";
-export default function HomePage() {
+export default function HomePage({ toggleTheme, isDarkMode }) {
const { datasets, loading, error } = useDatasets();
return (
-
-
+ // Light: soft gradient | Dark: pure black (no gradient)
+
+
+
-
+
IoT Sensors Dashboard
-
+
Time-series data, anomaly awareness, and correlation insights — all in one place.
+
diff --git a/new-frontend/frontend/tailwind.config.js b/new-frontend/frontend/tailwind.config.js
index 76ab992..e3fe85c 100644
--- a/new-frontend/frontend/tailwind.config.js
+++ b/new-frontend/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
+ darkMode: "class",
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: { extend: {} },
plugins: [],