Employee Filter

This commit is contained in:
npcdazai
2024-10-16 19:50:14 +05:30
parent a9c23b8289
commit c983a666aa

View File

@@ -49,7 +49,7 @@ import {
AccordionButton,
AccordionPanel,
} from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";
import { ChevronRightIcon } from "@chakra-ui/icons";
const Employees = () => {
const { employees } = useContext(GlobalStateContext);
@@ -335,7 +335,7 @@ const Employees = () => {
>
Filter
</MenuButton>
<MenuList>
<MenuList w="350px" h="300px" overflowY="scroll">
<VStack p={2} alignItems="flex-start">
<HStack alignItems="center">
<IoFilterSharp fontSize="small" />{" "}
@@ -344,63 +344,61 @@ const Employees = () => {
</Text>
</HStack>
<Box w="100%" borderBottom="1px solid #D8D8D8" />
<Accordion allowMultiple>
{/* Department Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<h2>
<Box w="100%">
<Accordion allowMultiple border="0px solid white">
{/* Department Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
<Box flex="1" textAlign="left">
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
<Box flex="1" textAlign="left" ml={2}>
Department
</Box>
</AccordionButton>
<AccordionPanel pb={2}>
<VStack align="start">
<Checkbox defaultChecked>Design</Checkbox>
<Checkbox>Finance</Checkbox>
<Checkbox defaultChecked>IT</Checkbox>
<Checkbox>Development</Checkbox>
<Checkbox>Sales</Checkbox>
<Checkbox>QA</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
{/* Status Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<AccordionButton>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack align="start">
<Checkbox defaultChecked>Design</Checkbox>
<Checkbox>Finance</Checkbox>
<Checkbox defaultChecked>IT</Checkbox>
<Checkbox>Development</Checkbox>
<Checkbox>Sales</Checkbox>
<Checkbox>QA</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
{/* Status Section */}
<AccordionItem>
{({ isExpanded }) => (
<>
<h2>
<AccordionButton>
<Box flex="1" textAlign="left">
<Box flex="1" textAlign="left" ml={4}>
Status
</Box>
{isExpanded ? (
<ChevronDownIcon fontSize="24px" />
) : (
<ChevronRightIcon fontSize="24px" />
)}
</AccordionButton>
</h2>
<AccordionPanel pb={4}>
<VStack align="start">
<Checkbox>Active</Checkbox>
<Checkbox>Inactive</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
<AccordionPanel pb={4}>
<VStack align="start">
<Checkbox>Active</Checkbox>
<Checkbox>Inactive</Checkbox>
</VStack>
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
</Box>
</VStack>
</MenuList>
</Menu>