worked on the model of the manage, subadmin and model
This commit is contained in:
76
src/components/AddModel.tsx
Normal file
76
src/components/AddModel.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Button } from "./ui/button"
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
|
||||
import { Field, Grid, Input, Stack, Text } from "@chakra-ui/react"
|
||||
import { IoMdAdd } from "react-icons/io"
|
||||
import { Checkbox } from "./ui/checkbox"
|
||||
|
||||
function AddModel() {
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
{/* <Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button> */}
|
||||
<Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button>
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
w={{ base: "90%", md: "400px" }}
|
||||
maxW="90vw"
|
||||
h="auto"
|
||||
p={4}
|
||||
>
|
||||
<DialogHeader bg="white" p={3}>
|
||||
<DialogTitle alignSelf="center" color="black">Add Sub Admin Account</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack p={4} >
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={2}>First Name</Field.Label>
|
||||
<Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label color="black" pt={2}>Last Name</Field.Label>
|
||||
<Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">DOB</Field.Label>
|
||||
<Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">Gender</Field.Label>
|
||||
<Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
<Field.Label pt={2} color="black">permission</Field.Label>
|
||||
</Field.Root>
|
||||
<Grid templateColumns="repeat(2, 1fr)" gap={4} maxH={"100px"} overflowY={"auto"}>
|
||||
<Checkbox color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center">
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default AddModel
|
||||
@@ -92,7 +92,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
|
||||
_hover={{ bgColor: "white" }}
|
||||
variant="outline"
|
||||
borderRadius="sm"
|
||||
border="1px solid #007F33"
|
||||
border="1px solid black"
|
||||
size={"xs"}
|
||||
>
|
||||
No
|
||||
@@ -101,7 +101,8 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
|
||||
<Button
|
||||
borderRadius="sm"
|
||||
width="50%"
|
||||
bgColor="#007F33"
|
||||
// bgColor="#007F33"
|
||||
bgColor={'#02A0A0'}
|
||||
color="white"
|
||||
// colorPalette="#007F33"
|
||||
onClick={onConfirm}
|
||||
|
||||
75
src/components/EditSubAdmin.tsx
Normal file
75
src/components/EditSubAdmin.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import { Button } from "./ui/button"
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
|
||||
import { Field, Grid, Input, Stack, Text } from "@chakra-ui/react"
|
||||
import { Checkbox } from "./ui/checkbox"
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
function EditSubAdmin() {
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
<Button bg={"transparent"} size="sm">
|
||||
<FaRegEdit style={{ cursor: "pointer", }} />
|
||||
</Button>
|
||||
{/* <Button><FaRegEdit /></Button> */}
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
w={{ base: "90%", md: "400px" }}
|
||||
maxW="90vw"
|
||||
h="auto"
|
||||
p={4}
|
||||
>
|
||||
<DialogHeader bg="white" p={3}>
|
||||
<DialogTitle alignSelf="center" color="black">Edit Sub Admin Account</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack p={4} >
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={2}>First Name</Field.Label>
|
||||
<Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label color="black" pt={2}>Last Name</Field.Label>
|
||||
<Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">DOB</Field.Label>
|
||||
<Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">Gender</Field.Label>
|
||||
<Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
<Field.Label pt={2} color="black">permission</Field.Label>
|
||||
</Field.Root>
|
||||
<Grid templateColumns="repeat(2, 1fr)" gap={4} maxH={"100px"} overflowY={"auto"}>
|
||||
<Checkbox color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
<DialogFooter display="flex" justifyContent="center">
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default EditSubAdmin
|
||||
87
src/components/ViewDailog.tsx
Normal file
87
src/components/ViewDailog.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { MdOutlineRemoveRedEye } from "react-icons/md"
|
||||
import { Button } from "./ui/button"
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
|
||||
import { Field, Image, Input, Stack } from "@chakra-ui/react"
|
||||
import img from "../assets/waterfall.jpg"
|
||||
function ViewDailog() {
|
||||
return (
|
||||
// <DialogRoot placement={"center"}
|
||||
// >
|
||||
// <DialogTrigger asChild>
|
||||
// <Button variant="outline" size="sm">
|
||||
// <MdOutlineRemoveRedEye
|
||||
// style={{ cursor: "pointer", fontSize: "16px" }}
|
||||
// /> </Button>
|
||||
// </DialogTrigger>
|
||||
// <DialogContent w={"700px"} h={"346px"}>
|
||||
// <DialogHeader bg={'#fff'} p={3}>
|
||||
// <DialogTitle alignSelf={"center"} color={"black"}>View Details</DialogTitle>
|
||||
// </DialogHeader>
|
||||
// <DialogBody bg={"#fff"}>
|
||||
// <Stack p={4}>
|
||||
// <Field.Root>
|
||||
// <Field.Label color={"black"}>Title</Field.Label>
|
||||
// <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
|
||||
// <Field.Label color={"black"}>Title</Field.Label>
|
||||
// <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
|
||||
// <Field.Label color={"black"}>Title</Field.Label>
|
||||
// <Input placeholder="Enter the Title" bgColor={'#EEEEEE'} color={"black"} border={"none"} pl={2} />
|
||||
// <Field.Label color={"black"}>Image</Field.Label>
|
||||
// <Image src={img} />
|
||||
// </Field.Root>
|
||||
|
||||
// </Stack>
|
||||
// </DialogBody>
|
||||
// {/* <DialogFooter>
|
||||
// <DialogActionTrigger asChild>
|
||||
// <Button variant="outline">Cancel</Button>
|
||||
// </DialogActionTrigger>
|
||||
// <Button>Save</Button>
|
||||
// </DialogFooter> */}
|
||||
// <DialogCloseTrigger color={'black'} />
|
||||
// </DialogContent>
|
||||
// </DialogRoot>
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
<Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
w={{ base: "90%", md: "400px" }}
|
||||
maxW="90vw"
|
||||
h="auto"
|
||||
p={4}
|
||||
>
|
||||
<DialogHeader bg="white" p={3}>
|
||||
<DialogTitle alignSelf="center" color="black">View Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack p={4} >
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={2}>Title</Field.Label>
|
||||
<Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label color="black" pt={2}>Subtitle</Field.Label>
|
||||
<Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">Description</Field.Label>
|
||||
<Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">Image</Field.Label>
|
||||
<Image src={img} w="100%" maxH="150px" objectFit="contain" />
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ViewDailog
|
||||
76
src/components/ViewSubAdmin.tsx
Normal file
76
src/components/ViewSubAdmin.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { Button } from "./ui/button"
|
||||
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
|
||||
import { Field, Grid, Input, Stack, Text } from "@chakra-ui/react"
|
||||
import { Checkbox } from "./ui/checkbox"
|
||||
import { FaRegEdit } from "react-icons/fa";
|
||||
import { MdOutlineRemoveRedEye } from "react-icons/md";
|
||||
function ViewSubAdmin() {
|
||||
return (
|
||||
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
<Button bg={"transparent"} size="sm">
|
||||
<MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
|
||||
</Button>
|
||||
{/* <Button><FaRegEdit /></Button> */}
|
||||
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
w={{ base: "90%", md: "400px" }}
|
||||
maxW="90vw"
|
||||
h="auto"
|
||||
p={4}
|
||||
>
|
||||
<DialogHeader bg="white" p={3}>
|
||||
<DialogTitle alignSelf="center" color="black">View Sub Admin Account</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody bg="white">
|
||||
<Stack p={4} >
|
||||
|
||||
<Field.Root>
|
||||
<Field.Label color="black" pt={2}>First Name</Field.Label>
|
||||
<Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label color="black" pt={2}>Last Name</Field.Label>
|
||||
<Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">DOB</Field.Label>
|
||||
<Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
|
||||
<Field.Label pt={2} color="black">Gender</Field.Label>
|
||||
<Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={2} />
|
||||
<Field.Label pt={2} color="black">permission</Field.Label>
|
||||
</Field.Root>
|
||||
<Grid templateColumns="repeat(2, 1fr)" gap={4} maxH={"100px"} overflowY={"auto"}>
|
||||
<Checkbox color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
|
||||
<Checkbox color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
|
||||
<Checkbox color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
{/* <DialogFooter display="flex" justifyContent="center">
|
||||
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
||||
Save
|
||||
</Button>
|
||||
</DialogFooter> */}
|
||||
|
||||
<DialogCloseTrigger color="black" />
|
||||
</DialogContent>
|
||||
</DialogRoot >
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ViewSubAdmin
|
||||
Reference in New Issue
Block a user