Employee Filter
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user