Web-Frontend/client/src/pages/admin/Admin.jsx

import { Flex, Tabs, HStack } from '@chakra-ui/react';
import { MEDataEntry } from './tabs/MEDataEntry.jsx';
import { ProjectCollector } from './tabs/ProjectCollector.jsx';
import { NASApplication } from './tabs/NASApplication.jsx';
import { IVANS } from './tabs/IVANS.jsx'
import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";
import { CanvasHeaderTabs } from '../../components/dashboard/CanvasHeaderTabs.jsx';
import { ADMIN_TABS } from '@/constants/viewKeys.js';

// TODO - refactor this. Currently Admin doesn't use onEditWidgets or appendWidget
export default function Admin({ view, onChangeView, onEditWidgets, appendWidget }) {
  const settingsButtonProps = { onEditWidgets, appendWidget };
  
  return (
    /* HEADER */
    <Tabs.Root 
      width="100%"
      height="100%"
      lazyMount 
      value={ view }
      variant="line"
      // Prevent navigation away from 'My Dashboard' while in Edit mode
      onValueChange={(e) => {
        const nextView = e.value;
        onChangeView(nextView); 
      }}
    >
      <Flex 
        as="header"
        position="sticky"
        top="0"
        zIndex="dropdown" // zIndex: 1100
        bg="base200"
        pl={5}
        pr={2}
        pt={3}
        pb={2}
        align="center"
        justify="space-between"
        width="100%"
      >
        {/* HEADER */}
        <CanvasHeaderTabs tabs={ADMIN_TABS} />
        <HStack width="258px" justifyContent="flex-end">
            <SearchBar />
            <SettingsButton />
        </HStack>
      </Flex>

      {/* CANVAS */}
      <Tabs.Content value="medataentry">
          <MEDataEntry />
        </Tabs.Content>
        <Tabs.Content value="projectcollector">
          <ProjectCollector />
        </Tabs.Content>
        <Tabs.Content value="nasapplication">
          <NASApplication />
        </Tabs.Content>
        <Tabs.Content value="ivans">
          <IVANS />
        </Tabs.Content>
    </Tabs.Root>
  );
}