Working on the Master Module
This commit is contained in:
61
src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
Normal file
61
src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
|
||||
import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
|
||||
import { Button } from "../../../components/ui/button"
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
|
||||
|
||||
function EditJobStatusModel() {
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
{/* <Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button> */}
|
||||
<Button bg={"transparent"} size="sm">
|
||||
<FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000"/>
|
||||
</Button>
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
// w={{ lg: "60%", md: "230px" }}
|
||||
w={{ base: '90%', md: '400px' }}
|
||||
height={'auto'}
|
||||
|
||||
overflowX="hidden"
|
||||
p={3} // Reduced padding
|
||||
bgSize={'md'}
|
||||
>
|
||||
<DialogHeader bg="white" >
|
||||
<DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack py={3}>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
|
||||
<Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default EditJobStatusModel
|
||||
@@ -1,12 +1,86 @@
|
||||
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
|
||||
import MainFrame from "../../../components/MainFrame"
|
||||
import { InputGroup } from "../../../components/ui/input-group";
|
||||
import { LuSearch } from "react-icons/lu";
|
||||
import DataTable from "../../../components/DataTable";
|
||||
import { Switch } from "../../../components/ui/switch";
|
||||
import JobStatusAddModel from "./JobStatusAddModel";
|
||||
import EditJobStatusModel from "./EditJobStatusModel";
|
||||
|
||||
|
||||
|
||||
// table data
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
"Title",
|
||||
"Action"
|
||||
|
||||
];
|
||||
|
||||
const managepost: any[] = [
|
||||
...Array.from({ length: 12 }, (_, i) => ({
|
||||
"Sr. No": i + 1,
|
||||
"Title": "Lorem Ipsum",
|
||||
"Action": (
|
||||
<HStack justifyContent="center">
|
||||
<EditJobStatusModel />
|
||||
<Box>
|
||||
<Switch colorPalette={'teal'} size={"xs"}/>
|
||||
</Box>
|
||||
</HStack>
|
||||
),
|
||||
})),
|
||||
];
|
||||
|
||||
const JobStatus = () => {
|
||||
return (
|
||||
|
||||
<MainFrame>
|
||||
JobStatus
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
export default JobStatus
|
||||
return (
|
||||
|
||||
<MainFrame>
|
||||
<Box>
|
||||
<HStack
|
||||
w={"100%"}
|
||||
justifyContent={"space-between"}
|
||||
mb={4}
|
||||
py={0}
|
||||
px={3}
|
||||
>
|
||||
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
|
||||
Job Status
|
||||
</Text>
|
||||
|
||||
<HStack mr={5}>
|
||||
<InputGroup marginRight={"1rem"}
|
||||
startElement={
|
||||
<LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
|
||||
}
|
||||
color={"#000"}
|
||||
>
|
||||
<Input
|
||||
p={3}
|
||||
w={300}
|
||||
bg={"#fff"}
|
||||
colorPalette={"blue"}
|
||||
_focus={{ border: "1px solid #02A0A0" }}
|
||||
rounded={"md"}
|
||||
size={"2xs"}
|
||||
fontSize={"2sm"}
|
||||
placeholder="Search..."
|
||||
bgColor={'#EEEEEE'}
|
||||
ps={8}
|
||||
/>
|
||||
</InputGroup>
|
||||
{/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
|
||||
<JobStatusAddModel />
|
||||
</HStack>
|
||||
</HStack>
|
||||
<DataTable
|
||||
sortableColumns={["Name", "Registration Date "]}
|
||||
tableHeadRow={tableHeadRow}
|
||||
data={managepost}
|
||||
/>
|
||||
</Box>
|
||||
</MainFrame>
|
||||
)
|
||||
}
|
||||
export default JobStatus
|
||||
58
src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
Normal file
58
src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
|
||||
import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
|
||||
import { IoMdAdd } from "react-icons/io"
|
||||
import { Button } from "../../../components/ui/button"
|
||||
|
||||
function JobStatusAddModel() {
|
||||
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
{/* <Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button> */}
|
||||
<Button px={5} size={"xs"} bg={"#02A0A0"}>
|
||||
<IoMdAdd /> <Text>Add</Text>
|
||||
</Button>
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
// w={{ lg: "60%", md: "230px" }}
|
||||
w={{ base: '90%', md: '400px' }}
|
||||
height={'auto'}
|
||||
|
||||
overflowX="hidden"
|
||||
p={3} // Reduced padding
|
||||
bgSize={'md'}
|
||||
>
|
||||
<DialogHeader bg="white" >
|
||||
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack py={3}>
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
|
||||
<Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default JobStatusAddModel
|
||||
Reference in New Issue
Block a user