"Added src/components/ViewDailog.tsx"

This commit is contained in:
YasinShaikh123
2025-02-06 15:12:43 +05:30
18 changed files with 847 additions and 335 deletions

View File

@@ -1,76 +0,0 @@
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

View File

@@ -55,7 +55,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
</DialogTrigger>
<DialogContent bgColor="#fff">
{/* <DialogHeader display="flex" justifyContent="center"> */}
{/* <Image src={alertIcon} h={"39px"} /> */}
{/* <Image src={alertIcon} h={"39px"} /> */}
{/* </DialogHeader> */}
<DialogBody

View File

@@ -1,6 +1,6 @@
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 { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "./ui/checkbox"
import { FaRegEdit } from "react-icons/fa";
function EditSubAdmin() {
@@ -17,45 +17,47 @@ function EditSubAdmin() {
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
w={{ lg: "60%", md: "230px" }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" p={3}>
<DialogTitle alignSelf="center" color="black">Edit Sub Admin Account</DialogTitle>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={4} >
<Stack p={2} >
<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={1} fontSize="12px">First Name</Field.Label>
<Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<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 color="black" pt={1} fontSize="12px">Last Name</Field.Label>
<Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={2} color="black">DOB</Field.Label>
<Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={2} />
<Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
<Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
<Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
<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 templateColumns="repeat(2, 1fr)" gap={4}>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage contact us</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage User</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage CMS</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Post</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Reports</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>My profile</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> manage feedbacks</Text></Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage community</Text> </Checkbox>
<Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> Notification</Text></Checkbox>
</Grid>
</Stack>
</DialogBody>

View File

@@ -1,125 +0,0 @@
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;

View File

@@ -1,76 +0,0 @@
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