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 }) {
  // Prop Forwarding
  // const { view, layout, setLayout, setOriginalLayout,  onLayoutChange, onChangeView, onCancel, setOriginalWidgets,
  //   isDelete, setIsDelete, beginEditIfNeeded, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
  
  // const MyDashboardProps = { layout, onLayoutChange, isEditable, beginEditIfNeeded, isDelete, DeleteWidget, widgetArray, 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>
  );
}  


  // 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 onEditWidgets={onEditWidgets} appendWidget={appendWidget}/>
  //         </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>
  //   );
  // }