worked on the managegroup, managepost, subAdmin

This commit is contained in:
2025-02-06 14:43:31 +05:30
parent 127cce73e6
commit 7ac9c41556
18 changed files with 848 additions and 298 deletions

View File

@@ -0,0 +1,67 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Switch } from "../../components/ui/switch";
import { IoMdAdd } from "react-icons/io";
function AddGroup() {
return (
<DialogRoot placement="center" >
<DialogTrigger asChild>
<Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}><IoMdAdd /> <Text>Add</Text></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="xs">Group Name</Field.Label>
<Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label color="black" pt={1} fontSize="xs">Group Introduction</Field.Label>
<Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
</Field.Root>
<Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
Add Member
</Button>
<Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
<Switch />
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center">
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default AddGroup

View File

@@ -0,0 +1,85 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Switch } from "../../components/ui/switch";
import { FaRegEdit } from "react-icons/fa";
import { AvatarGroup } from "../../components/ui/avatar";
function EditDetailGroups() {
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' }}
overflow={'scroll'}
p={2} // Reduced padding
>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
<Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
<Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
<Box
bgColor="#EEEEEE"
border="none"
w="100%"
display="flex"
p={1}
rounded={4}
>
<AvatarGroup gap="0" spaceX="-3" size={"xs"} >
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
</Avatar.Root>
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
</Avatar.Root>
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
</Avatar.Root>
<Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
<Avatar.Fallback ml={5}>+3</Avatar.Fallback>
</Avatar.Root>
</AvatarGroup>
</Box>
</Field.Root>
<Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
<Switch />
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center">
<Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter> <DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default EditDetailGroups

View File

@@ -1,11 +1,107 @@
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 AlertDailog from "../../components/AlertDailog"
import { RiDeleteBin5Line } from "react-icons/ri";
import AddModel from "../SubAdmin/AddModel"
import EditSubAdmin from "../../components/EditSubAdmin"
import ViewManageGroup from "./ViewManageGroup"
import EditDetailGroups from "./EditDetailGroup"
import AddGroup from "./AddGroup"
// import ViewSubAdmin from "./ViewSubAdmin"
// table data
const tableHeadRow = [
"Sr. No",
"Group Name",
"Description",
"Date",
"Group type",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Group Name": "ABC",
"Description": "Lorem ipsum",
"Date": "12/01/1987",
"Group type": "Private",
"Action": (
<HStack justifyContent="center">
{/* <MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/> */}
<ViewManageGroup />
<EditDetailGroups />
{/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
<AlertDailog
AltertTiggerIcon={RiDeleteBin5Line}
alertText="Delete Users"
alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
alertCaption="are you sure you want to delete ?"
onConfirm={() => {
console.log("User deleted:", i + 1);
}}
/>
</HStack>
),
})),
];
const ManageGroups = () => {
return (
<MainFrame >
ManageGroups
</MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Manage Groups
</Text>
<HStack gap={4}>
<InputGroup
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}
border={'none'}
/>
</InputGroup>
{/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
<AddGroup />
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box> </MainFrame>
)
}
export default ManageGroups

View File

@@ -0,0 +1,93 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "../../components/ui/checkbox"
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Switch } from "../../components/ui/switch";
import { AvatarGroup } from "../../components/ui/avatar";
function ViewManageGroup() {
return (
<DialogRoot placement="center" >
<DialogTrigger asChild>
<Button bg={"transparent"} size="sm">
<MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
</Button>
{/* <Button><FaRegEdit /></Button> */}
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
// height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
<Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
<Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
<Box
bgColor="#EEEEEE"
border="none"
w="100%"
display="flex"
p={1}
rounded={4}
>
<AvatarGroup gap="0" spaceX="-3" size={"xs"} >
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
</Avatar.Root>
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
</Avatar.Root>
<Avatar.Root border={'none'}>
<Avatar.Fallback />
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
</Avatar.Root>
<Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
<Avatar.Fallback ml={5}>+3</Avatar.Fallback>
</Avatar.Root>
</AvatarGroup>
</Box>
</Field.Root>
<Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
<Switch />
</Stack>
</DialogBody>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default ViewManageGroup

View File

@@ -1,13 +1,16 @@
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
import { Box, createListCollection, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame"
import ViewSubAdmin from "../../components/ViewSubAdmin";
import ViewSubAdmin from "../SubAdmin/ViewSubAdmin";
import EditSubAdmin from "../../components/EditSubAdmin";
import AlertDailog from "../../components/AlertDailog";
import { InputGroup } from "../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import AddModel from "../../components/AddModel";
import AddModel from "../SubAdmin/AddModel";
import DataTable from "../../components/DataTable";
import { RiDeleteBin5Line } from "react-icons/ri";
import ManageJobsAdd from "./ManageJobsAdd";
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValueText } from "../../components/ui/select";
import ViewManageJob from "./ViewManageJob";
// table data
@@ -37,9 +40,8 @@ const managepost: any[] = [
style={{ cursor: "pointer", fontSize: "16px" }}
/> */}
{/* <ViewDailog /> */}
<ViewSubAdmin />
<EditSubAdmin />
<ViewManageJob />
<ManageJobsAdd />
{/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
<AlertDailog
AltertTiggerIcon={RiDeleteBin5Line}

View File

@@ -0,0 +1,109 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
const frameworks = createListCollection({
items: [
{ label: "React.js", value: "react" },
{ label: "Vue.js", value: "vue" },
{ label: "Angular", value: "angular" },
{ label: "Svelte", value: "svelte" },
],
})
function ManageJobsAdd() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg={"transparent"} size="sm">
<FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} />
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" p={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
<Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
<Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
<Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
<Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
<Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
<Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
<Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
{/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
<Input placeholder="Enter the Country Selection" /> */}
<SelectRoot collection={frameworks} size="sm" w={'100%'}>
<SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
<SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
borderRadius={"5px"}>
<SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
</SelectTrigger>
<SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
{frameworks.items.map((movie) => (
<SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
fontSize="12px" >
{movie.label}
</SelectItem>
))}
</SelectContent>
</SelectRoot>
<Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
<Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
<Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
<Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center">
<Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
)
}
export default ManageJobsAdd

View File

@@ -0,0 +1,112 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
import { MdOutlineRemoveRedEye } from "react-icons/md"
const frameworks = createListCollection({
items: [
{ label: "React.js", value: "react" },
{ label: "Vue.js", value: "vue" },
{ label: "Angular", value: "angular" },
{ label: "Svelte", value: "svelte" },
],
})
function ViewManageJob() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg={"transparent"} size="sm">
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }} />
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
// w={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" p={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
<Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
<Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
<Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
<Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
<Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
<Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
<Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
{/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
<Input placeholder="Enter the Country Selection" /> */}
<SelectRoot collection={frameworks} size="sm" w={'100%'}>
<SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
<SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
borderRadius={"5px"}>
<SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
</SelectTrigger>
<SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
{frameworks.items.map((movie) => (
<SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
fontSize="12px" >
{movie.label}
</SelectItem>
))}
</SelectContent>
</SelectRoot>
<Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
<Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
<Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
<Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
<Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
<Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center">
<Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
)
}
export default ViewManageJob

View File

@@ -8,7 +8,8 @@ import AlertDailog from '../../components/AlertDailog'
import { Switch } from '../../components/ui/switch'
import img from "../../assets/waterfall.jpg"
import { RiDeleteBin5Line } from "react-icons/ri";
import ViewDailog from '../../components/ViewDailog'
import ViewDailog from './ViewDailog'
// import ViewDailog from './ViewDailog'
// table data

View File

@@ -0,0 +1,51 @@
import { MdOutlineRemoveRedEye } from "react-icons/md"
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/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 bg={"transparent"} size="sm">
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
</Button>
</DialogTrigger>
<DialogContent
w={{ base: '90%', md: '400px' }}
bg={"#fff"}
h="auto"
p={2} // Reduced padding
>
<DialogHeader bg="white" p={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
<Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
<Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
<Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">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

@@ -0,0 +1,80 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { IoMdAdd } from "react-icons/io"
import { Checkbox } from "../../components/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={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px"
>Add Sub Admin Account</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<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={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 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.Root>
<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>
<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

@@ -3,12 +3,11 @@ import MainFrame from "../../components/MainFrame"
import { InputGroup } from "../../components/ui/input-group"
import { LuSearch } from "react-icons/lu"
import DataTable from "../../components/DataTable"
import ViewDailog from "../../components/ViewDailog"
import AlertDailog from "../../components/AlertDailog"
import { RiDeleteBin5Line } from "react-icons/ri";
import AddModel from "../../components/AddModel"
import AddModel from "./AddModel"
import EditSubAdmin from "../../components/EditSubAdmin"
import ViewSubAdmin from "../../components/ViewSubAdmin"
import ViewSubAdmin from "./ViewSubAdmin"
// table data

View File

@@ -0,0 +1,84 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "../../components/ui/checkbox"
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={{ lg: "60%", md: "230px" }}
w={{ base: '90%', md: '400px' }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<DialogHeader bg="white" pt={1} pb={2}>
<DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack p={2} >
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
<Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
<Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">ID</Field.Label>
<Input value="ID" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
<Input value="11/02/1989" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
<Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
<Input value="Male" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly
/>
<Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
</Field.Root>
<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>
{/* <DialogFooter display="flex" justifyContent="center">
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter> */}
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default ViewSubAdmin

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

@@ -1,6 +1,6 @@
import React from "react";
import { DialogBody, HStack, Icon, Text } from "@chakra-ui/react";
import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
import { Button } from "./ui/button";
import {
DialogActionTrigger,
@@ -54,7 +54,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,87 +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

View File

@@ -3,7 +3,7 @@
*{
* {
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -16,8 +16,8 @@ body {
font-family: "Roboto", serif;
}
.Oxygen{
font-family: "Oxygen", serif
.Oxygen {
font-family: "Oxygen", serif
}
@@ -39,12 +39,12 @@ body {
.linkChild:hover{
.linkChild:hover {
color: #02A0A0 !important;
transition: all 0.5s;
}
.activeChild{
.activeChild {
color: #02A0A0 !important;
/* border: 1px solid #02A0A0 !important; */
@@ -52,7 +52,7 @@ body {
border-radius: 8px;
}
.link{
.link {
transition: all 0.5s;
}
@@ -69,8 +69,8 @@ body {
/* ✅ Red Spheres */
.red-sphere-1,
.red-sphere-2,
.red-sphere-3{
.red-sphere-2,
.red-sphere-3 {
position: absolute;
border-radius: 50%;
background-color: #D90B2E46;
@@ -81,7 +81,7 @@ body {
/* ✅ Blue Spheres */
.blue-sphere-1,
.blue-sphere-2,
.blue-sphere-3{
.blue-sphere-3 {
position: absolute;
border-radius: 50%;
background-color: #009DAB46;
@@ -125,7 +125,7 @@ body {
left: 40%;
}
.blue-sphere-3{
.blue-sphere-3 {
width: 300px;
height: 300px;
bottom: 10%;
@@ -135,8 +135,10 @@ body {
/* Style the scrollbar */
::-webkit-scrollbar {
width: 6px; /* Width of the vertical scrollbar */
height: 12px; /* Height of the horizontal scrollbar */
width: 6px;
/* Width of the vertical scrollbar */
height: 12px;
/* Height of the horizontal scrollbar */
}
/* Style the scrollbar track (the background area) */
@@ -150,14 +152,20 @@ body {
background-color: #c8c8c8cf;
/* Gray color for the thumb */
border-radius: 10px;
border: 1px solid #f1f1f1; /* Border around the thumb */
border: 1px solid #f1f1f1;
/* Border around the thumb */
}
/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Darker gray when hovered */
background-color: #555;
/* Darker gray when hovered */
}
input:focus-visible {
border: none !important;
}
.css-1ilznyv {
border: none;
}