Web-Frontend/client/src/pages/home/Home.jsx

import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react";
import {NavLink, Outlet, useLocation} from "react-router-dom";
import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";

// 1. Import your icons (Swap these for whichever you prefer!)
import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";

// 2. Define the tabs array
const HOME_TABS = [
  {name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
  {name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
  {name: "Gas", url: "/home/gas", icon: Cloud},
  {name: "Remote Sensing", url: "/home/remote", icon: Satellite},
  {name: "Seismic", url: "/home/seismic", icon: Activity},
];

export default function Home() {
  const recipe = useRecipe({key: "glassTab"});
  const tabStyles = recipe();

  const location = useLocation();
  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";

  return (
    <Flex direction="column" height="100%" width="100%">

      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
            justify="space-between" width="100%">

        {/* TABS CONTAINER */}
        <Flex gap={2} alignItems="center">
          {HOME_TABS.map((tab) => {
            const Icon = tab.icon;
            return (
              <Box
                key={tab.name}
                as={NavLink}
                to={tab.url}
                end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
                css={tabStyles}
              >
                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
                <Icon size={24} style={{flexShrink: 0}}/>
                <Box as="span">{tab.name}</Box>
              </Box>
            );
          })}

          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
          {isPersonalDashboard && <SettingsButton/>}
        </Flex>

        {/* EDIT MODE BUTTONS & CONTROLS */}
        {/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
        <HStack width="258px" justifyContent="flex-end">
          {/* Future global controls go here */}
        </HStack>
      </Flex>

      {/* TABS CONTENT */}
      <Flex flex="1" overflow="auto">
        <Outlet/>
      </Flex>

    </Flex>
  );
}