Web-Frontend/client/src/components/Canvas/views/Admin.jsx

import { Box, Text, Flex, Tabs, HStack } from '@chakra-ui/react';
import { MEDataEntry } from './AdminTabs/MEDataEntry';
import { ProjectCollector } from './AdminTabs/ProjectCollector';
import { NASApplication } from './AdminTabs/NASApplication';
import { IVANS } from './AdminTabs/IVANS'
import { SearchBar } from "../CanvasComponents/SearchBar";
import { SettingsButton } from "../CanvasComponents/SettingsButton";

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"
        px={5}
        pt={3}
        pb={2}
        align="center"
        justify="space-between"
        width="100%"
      >
        <Tabs.List>
          <Tabs.Trigger value="medataentry" fontSize="lg">
            M&E Data Entry
          </Tabs.Trigger>
          <Tabs.Trigger value="projectcollector" fontSize="lg">
            Project Collector
          </Tabs.Trigger>
          <Tabs.Trigger value="nasapplication" fontSize="lg">
            NAS Application
          </Tabs.Trigger><Tabs.Trigger value="ivans" fontSize="lg">
            IVANS
          </Tabs.Trigger>
        </Tabs.List>

        <HStack width="258px" justifyContent="flex-end">
              <SearchBar />
              <SettingsButton {...settingsButtonProps}/>
        </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>
  );
}