10 Commits

Author SHA1 Message Date
YasinShaikh123
0c3ccce916 Merge branch 'tufail' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin 2025-02-06 15:14:33 +05:30
YasinShaikh123
07a5d4dd52 "Added src/components/ViewDailog.tsx" 2025-02-06 15:12:43 +05:30
YasinShaikh123
aabbbfff8b [ working👷‍♂️ ] 2025-02-06 15:07:42 +05:30
AnsariTufail
a64731f79a Worked on this ContactUs, Manage CMS 2025-02-06 14:48:27 +05:30
7ac9c41556 worked on the managegroup, managepost, subAdmin 2025-02-06 14:43:31 +05:30
YasinShaikh123
127cce73e6 Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel 2025-02-05 12:35:06 +05:30
YasinShaikh123
ea3ae8b621 [ working ] 2025-02-05 12:34:16 +05:30
13e6260ea2 worked on the model of the manage, subadmin and model 2025-02-05 12:33:20 +05:30
e23067bb1b Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into parth 2025-02-04 15:05:02 +05:30
6cccadb1a9 first commit 2025-02-04 15:02:56 +05:30
40 changed files with 2520 additions and 113 deletions

View File

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.jlpvaemfr1"
"revision": "0.57smkc9q598"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

30
package-lock.json generated
View File

@@ -11,9 +11,11 @@
"@chakra-ui/react": "^3.2.3",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"chart.js": "^4.4.7",
"framer-motion": "^11.18.0",
"next-themes": "^0.4.4",
"react": "^18.3.1",
"react-chartjs-2": "^5.3.0",
"react-dom": "^18.3.1",
"react-hook-form": "^7.54.2",
"react-icons": "^5.4.0",
@@ -2660,6 +2662,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
"license": "MIT"
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5220,6 +5228,18 @@
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/chart.js": {
"version": "4.4.7",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
"integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
"license": "MIT",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -8048,6 +8068,16 @@
"node": ">=0.10.0"
}
},
"node_modules/react-chartjs-2": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
"integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
"license": "MIT",
"peerDependencies": {
"chart.js": "^4.1.1",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",

View File

@@ -13,9 +13,11 @@
"@chakra-ui/react": "^3.2.3",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"chart.js": "^4.4.7",
"framer-motion": "^11.18.0",
"next-themes": "^0.4.4",
"react": "^18.3.1",
"react-chartjs-2": "^5.3.0",
"react-dom": "^18.3.1",
"react-hook-form": "^7.54.2",
"react-icons": "^5.4.0",

View File

@@ -1,8 +1,105 @@
import {
Box,
createListCollection,
Heading,
HStack,
Stack,
Status,
Tabs,
Text,
} from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame";
import BarChart from "../../components/Charts/BarChart";
import {
SelectContent,
SelectItem,
SelectLabel,
SelectRoot,
SelectTrigger,
SelectValueText,
} from "../../components/ui/select";
import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
const Dashboard = () => {
return (
<div>Dashboard</div>
)
}
const frameworks = createListCollection({
items: [
{ label: "React.js", value: "react" },
{ label: "Vue.js", value: "vue" },
{ label: "Angular", value: "angular" },
{ label: "Svelte", value: "svelte" },
],
});
export default Dashboard
return (
<MainFrame>
<Box display={"flex"} p={"20px"} gap={5}>
<Box w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
<Heading fontSize={"sm"} p={2}>
Total Users
</Heading>
<Tabs.Root
size={"sm"}
w={"80%"}
m={"auto"}
variant="enclosed"
fitted
defaultValue={"tab-1"}
mb={6}
>
<Tabs.List>
<Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
<Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Box>
<SemiDoughnutChart />
</Box>
<Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
<Status.Root colorPalette="blue">
<Status.Indicator />
Recruiter <Text fontWeight={500}>2554</Text>
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
Customer <Text fontWeight={500}>1224</Text>
</Status.Root>
</Box>
</Box>
<Box
p={"20px"}
w={"50%"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
>
<HStack alignItems={"center"} mb={4}>
<Text fontSize={"sm"}>Item approvals in</Text>
<SelectRoot collection={frameworks} size="xs" width="200px">
<SelectTrigger>
<SelectValueText p={2} placeholder="Select movie" />
</SelectTrigger>
<SelectContent p={2}>
{frameworks.items.map((movie) => (
<SelectItem item={movie} key={movie.value}>
{movie.label}
</SelectItem>
))}
</SelectContent>
</SelectRoot>
</HStack>
<BarChart />
</Box>
<Box
w={"20%"}
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
></Box>
</Box>
<Box p={"20px"} display={"flex"} gap={5}>
<Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
<Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
</Box>
</MainFrame>
);
};
export default Dashboard;

View File

@@ -1,12 +1,38 @@
import { Box, HStack, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import { p } from "framer-motion/client";
import AboutUsAddModel from "../../../components/AboutUsAddModel";
const AboutUs = () => {
return (
<MainFrame >
AboutUs
</MainFrame>
)
}
export default AboutUs
return (
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
AboutUs
</Text>
<HStack mr={5}>
<AboutUsAddModel />
</HStack>
</HStack>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
</Box>
</MainFrame>
)
}
export default AboutUs

View File

@@ -1,12 +1,97 @@
import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import EditDetails from "../../../components/EditDetails";
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 { Switch } from "../../../components/ui/switch";
import FaqAddModel from "../../../components/FaqAddModel";
// table data
const tableHeadRow = [
"Sr. No",
"Question",
"Answer",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Question": "Lorem Ipsum",
"Answer": "Lorem Ipsum",
"Action": (
<HStack justifyContent="center">
<Box>
<Switch colorPalette={'teal'} size={"xs"}/>
</Box>
<EditDetails />
<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 FAQ = () => {
return (
<MainFrame >
FAQ
</MainFrame>
)
}
export default FAQ
return (
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
FAQs
</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> */}
<FaqAddModel />
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box>
</MainFrame>
)
}
export default FAQ

View File

@@ -1,12 +1,38 @@
import { Box, HStack, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import { p } from "framer-motion/client";
import PrivacyPolicyAddModel from "../../../components/PrivacyPolicyAddModel";
const PrivacyPolicy = () => {
return (
<MainFrame >
PrivacyPolicy
</MainFrame>
)
}
export default PrivacyPolicy
return (
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Privacy Policy
</Text>
<HStack mr={5}>
<PrivacyPolicyAddModel />
</HStack>
</HStack>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
</Box>
</MainFrame>
)
}
export default PrivacyPolicy

View File

@@ -1,12 +1,38 @@
import { Box, HStack, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import { p } from "framer-motion/client";
import TermsAndConditionsAddModel from "../../../components/TermsAndConditionsAddModel";
const TermsAndConditions = () => {
return (
<MainFrame >
TermsAndConditions
</MainFrame>
)
}
export default TermsAndConditions
return (
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Terms And Conditions
</Text>
<HStack mr={5}>
<TermsAndConditionsAddModel />
</HStack>
</HStack>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
<Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis?
</Text>
</Box>
</MainFrame>
)
}
export default TermsAndConditions

View File

@@ -1,10 +1,82 @@
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame"
import PendingRequests from "../../components/PendingRequests";
import { InputGroup } from "../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../components/DataTable";
// table data
const tableHeadRow = [
"Sr. No",
"Email id",
"Name",
"Date",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Email id": "ABC@gmail.com",
"Name": "Pooja",
"Date": "11/02/1989",
"Action": (
<HStack justifyContent="center">
<PendingRequests />
</HStack>
),
})),
];
const ManageContact = () => {
return (
<MainFrame >
ManageContact
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Contact Requests
</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> */}
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box>
</MainFrame>
)
}

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,12 +1,109 @@
import { Box, createListCollection, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame"
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 "../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
const tableHeadRow = [
"Sr. No",
"Job Title",
"Workspace mode",
"Category",
"Sub-category",
"Salary",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Job Title": "Freelance content writer",
"Workspace mode": "Onsite",
"Category": "IT",
"Sub-category": "Flutter dev",
"Salary": "3.5 LPA",
"Action": (
<HStack justifyContent="center">
{/* <MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/> */}
{/* <ViewDailog /> */}
<ViewManageJob />
<ManageJobsAdd />
{/* <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 ManageJobs = () => {
return (
<MainFrame>
ManageJobs
</MainFrame>
)
}
export default ManageJobs
return (
<MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
View job Posting
</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> */}
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box>
</MainFrame>
)
}
export default ManageJobs

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

@@ -1,10 +1,110 @@
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 { Switch } from '../../components/ui/switch'
import img from "../../assets/waterfall.jpg"
import { RiDeleteBin5Line } from "react-icons/ri";
import ViewDailog from './ViewDailog'
// import ViewDailog from './ViewDailog'
// table data
const tableHeadRow = [
"Sr. No",
"Images",
"Description",
"Publish Data",
"Activate/Deactivate",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Images": (
// <Image w={50} src={img} />
<Image w={100} h={50} src={img} />
),
"Description": (<Text>
{`Lorem ipsum dolor, sit amet consectetur adipisicing elit.`.slice(0, 30) + '...'}
</Text>),
"Publish Data": "12/01/2025",
"Activate/Deactivate": (
<Box>
<Switch colorPalette={'teal'} />
</Box>
),
"Action": (
<HStack justifyContent="center">
{/* <MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/> */}
<ViewDailog />
{/* <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 ManagePost = () => {
return (
<MainFrame>
ManagePost
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
{/* Manage Post */}
</Text>
<HStack>
<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}
/>
</InputGroup>
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box>
</MainFrame>
)
}

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

@@ -1,12 +1,78 @@
import MainFrame from "../../../components/MainFrame"
import { Box, HStack, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import DataTable from "../../../components/DataTable";
import { Switch } from "../../../components/ui/switch";
import { InputGroup } from "../../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
const tableHeadRow = [
"Sr. No",
"First Name",
"Last Name",
"Company name",
"Activate/Deactivate",
];
const manageUser: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"First Name": "Ritesh",
"Last Name": "akanksha@gmail.com",
"Company name": "9876543210",
"Activate/Deactivate": (
<Box display={'flex'} justifyContent={'center'}>
<Switch colorPalette={'teal'} />
</Box>
),
})),
];
const DeactivatedAccounts = () => {
return (
<MainFrame>
DeactivatedAccounts
</MainFrame>
)
}
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Deactivated User Accounts
</Text>
export default DeactivatedAccounts
<HStack>
<InputGroup
startElement={
<LuSearch fontSize={"xs"} style={{position:'relative',left:'10px'}} />
}
color={"#000"}
>
<Input
p={4}
w={300}
bg={"#fff"}
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}
/>
</InputGroup>
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={manageUser}
/>
</Box>
</MainFrame>
);
};
export default DeactivatedAccounts;

View File

@@ -0,0 +1,128 @@
import { Field, Input, Stack } from "@chakra-ui/react";
import {
DialogActionTrigger,
DialogBody,
DialogCloseTrigger,
DialogContent,
DialogFooter,
DialogHeader,
DialogRoot,
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
import { Button } from "../../../components/ui/button";
import { IoMdAdd } from "react-icons/io";
function AddRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button px={5} size={"xs"} bg={"#02A0A0"}>
<IoMdAdd /> Add
</Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" p={0}>
<DialogTitle fontSize={"sm"} alignSelf="center" color="black">
Add User Accounts
</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack pt={3} pb={3}>
<Field.Root>
<Field.Label color="black" pt={2} fontSize={"xs"}>
First Name
</Field.Label>
<Input
name="Priyanka"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label color="black" pt={2} fontSize={"xs"}>
Last Name
</Field.Label>
<Input
name="Joshi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Gender
</Field.Label>
<Input
name="Female"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
DOB
</Field.Label>
<Input
name="11/02/1989"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
OTP Verified
</Field.Label>
<Input
name="Yes"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Language
</Field.Label>
<Input
name="English, Hindi, Marathi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter mt={5}>
<DialogActionTrigger asChild>
<Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
Save
</Button>
</DialogActionTrigger>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
);
}
export default AddRegisterUsers;

View File

@@ -0,0 +1,125 @@
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Input, Stack } from "@chakra-ui/react";
import {
DialogActionTrigger,
DialogBody,
DialogCloseTrigger,
DialogContent,
DialogFooter,
DialogHeader,
DialogRoot,
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
import { BiEdit } from "react-icons/bi";
import { Button } from "../../../components/ui/button";
function EditRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" p={0}>
<DialogTitle fontSize={"sm"} alignSelf="center" color="black">
Edit user Accounts
</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack pt={3} pb={3}>
<Field.Root>
<Field.Label color="black" pt={2} fontSize={"xs"}>
First Name
</Field.Label>
<Input
name="Priyanka"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label color="black" pt={2} fontSize={"xs"}>
Last Name
</Field.Label>
<Input
name="Joshi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Gender
</Field.Label>
<Input
name="Female"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
DOB
</Field.Label>
<Input
name="11/02/1989"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
OTP Verified
</Field.Label>
<Input
name="Yes"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Language
</Field.Label>
<Input
name="English, Hindi, Marathi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
size={"xs"}
/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter mt={5}>
<DialogActionTrigger asChild>
<Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
</DialogActionTrigger>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
);
}
export default EditRegisterUsers;

View File

@@ -1,22 +1,23 @@
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import AlertDailog from "../../../components/AlertDailog";
import { FcCancel } from "react-icons/fc";
import { NavLink } from "react-router-dom";
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { RiDeleteBin5Line } from "react-icons/ri";
import DataTable from "../../../components/DataTable";
import { HiCheck } from "react-icons/hi2";
import { HiX } from "react-icons/hi";
import { Switch } from "../../../components/ui/switch";
import { Button } from "../../../components/ui/button";
import { InputGroup } from "../../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import { BiEdit } from "react-icons/bi";
import ViewRegisterUsers from "./ViewRegisterUsers";
import EditRegisterUsers from "./EditRegisterUsers";
import { Button } from "../../../components/ui/button";
import { IoMdAdd } from "react-icons/io";
import AddRegisterUsers from "./AddRegisterUsers";
const tableHeadRow = [
"Sr. No",
"First Name",
"Mobile Number ",
"Mobile Number",
"Gender",
"DOB",
"Type Of User",
@@ -29,7 +30,7 @@ const registerUser: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"First Name": "Ritesh",
"Mobile Number ": "akanksha@gmail.com",
"Mobile Number": "akanksha@gmail.com",
"Gender": "9876543210",
"DOB": "Female",
"Type Of User": "15-01-1990",
@@ -40,28 +41,15 @@ const registerUser: any[] = [
</Box>
),
"Action": (
<HStack justifyContent="center">
<AlertDailog
AltertTiggerIcon={FcCancel}
alertText="Suspend User"
alertIcon={<Image src={""} h={"39px"} />}
alertCaption="Are you sure you want to deactivate this user?"
onConfirm={() => {
console.log("User deleted:", i + 1);
}}
/>
<NavLink to="/manage-user/active-user/view-active-user">
<MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/>
</NavLink>
<HStack justifyContent="center">
<ViewRegisterUsers />
<EditRegisterUsers />
{/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
<AlertDailog
AltertTiggerIcon={RiDeleteBin5Line}
alertText="Delete Users"
alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
alertCaption="are you sure you want to delete ?"
alertCaption="Are You Sure You Want To Delete This User ?"
onConfirm={() => {
console.log("User deleted:", i + 1);
}}
@@ -75,7 +63,7 @@ const RegisterUsers = () => {
return (
<MainFrame>
<Box>
<HStack
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
@@ -83,18 +71,18 @@ const RegisterUsers = () => {
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
Register Users
Register Users
</Text>
<HStack>
<InputGroup
startElement={
<LuSearch fontSize={"xs"} style={{position:'relative',left:'10px'}} />
<LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
}
color={"#000"}
>
<Input
p={4}
p={3}
w={300}
bg={"#fff"}
colorPalette={"blue"}
@@ -107,6 +95,7 @@ const RegisterUsers = () => {
ps={8}
/>
</InputGroup>
<AddRegisterUsers />
</HStack>
</HStack>
<DataTable

View File

@@ -0,0 +1,126 @@
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Input, Stack } from "@chakra-ui/react";
import {
DialogBody,
DialogCloseTrigger,
DialogContent,
DialogHeader,
DialogRoot,
DialogTitle,
DialogTrigger,
} from "../../../components/ui/dialog";
function ViewRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<MdOutlineRemoveRedEye
color="#000"
style={{ cursor: "pointer", fontSize: "16px" }}
/>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" p={0}>
<DialogTitle fontSize={"sm"} alignSelf="center" color="black">
View Details
</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack pt={3} pb={3}>
<Field.Root>
<Field.Label color="black" pt={2} fontSize={"xs"}>
First Name
</Field.Label>
<Input
value="Priyanka"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
<Field.Label color="black" pt={2} fontSize={"xs"}>
Last Name
</Field.Label>
<Input
value="Joshi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Gender
</Field.Label>
<Input
value="Female"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
DOB
</Field.Label>
<Input
value="11/02/1989"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
OTP Verified
</Field.Label>
<Input
value="Yes"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
<Field.Label pt={2} color="black" fontSize={"xs"}>
Language
</Field.Label>
<Input
value="English, Hindi, Marathi"
bgColor="#EEEEEE"
color="black"
border="none"
pl={2}
readOnly
size={"xs"}
/>
</Field.Root>
</Stack>
</DialogBody>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot>
);
}
export default ViewRegisterUsers;

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

@@ -1,11 +1,106 @@
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 "./AddModel"
import EditSubAdmin from "../../components/EditSubAdmin"
import ViewSubAdmin from "./ViewSubAdmin"
// table data
const tableHeadRow = [
"Sr. No",
"Id",
"First Name",
"last Name",
"DOB",
"Gender",
"Action",
];
const managepost: any[] = [
...Array.from({ length: 12 }, (_, i) => ({
"Sr. No": i + 1,
"Id": 12565,
"First Name": "Kamlesh",
"last Name": "Pandey",
"DOB": "12/01/1987",
"Gender": "Male",
"Action": (
<HStack justifyContent="center">
{/* <MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/> */}
{/* <ViewDailog /> */}
<ViewSubAdmin />
<EditSubAdmin />
{/* <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 SubAdmin = () => {
return (
<MainFrame >
SubAdmin
</MainFrame>
<Box>
<HStack
w={"100%"}
justifyContent={"space-between"}
mb={4}
py={0}
px={3}
>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
{/* Manage Post */}
</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> */}
<AddModel />
</HStack>
</HStack>
<DataTable
sortableColumns={["Name", "Registration Date "]}
tableHeadRow={tableHeadRow}
data={managepost}
/>
</Box> </MainFrame>
)
}
export default SubAdmin

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

@@ -17,7 +17,7 @@ export const nav = [
},
{
title: "Manage Users",
path: "/register-users",
path: "",
Icon: BiUserPin,
type:'multiple',
children: [
@@ -65,7 +65,7 @@ export const nav = [
},
{
title: "Manage CMS",
path: "/faq",
path: "",
Icon: AiOutlineFileText,
type:'multiple',
children: [
@@ -104,7 +104,7 @@ export const nav = [
},
{
title: "Master Module",
path: "/agency-master",
path: "",
Icon: BsBoxes,
type:'multiple',
children: [

BIN
src/assets/deleteIcon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/waterfall.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@@ -0,0 +1,51 @@
import { FaRegEdit } from "react-icons/fa"
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
function AboutUsAddModel() {
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}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3} >
<DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>AboutUs</Field.Label>
<Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" pt={"5"}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default AboutUsAddModel

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,
@@ -9,6 +9,7 @@ import {
DialogRoot,
DialogTrigger,
} from "./ui/dialog";
import DeleteICN from '../assets/deleteIcon.png'
interface DeleteConfirmationDialogProps {
onConfirm?: () => void;
@@ -54,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
@@ -65,7 +66,8 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
p={8}
gap={2}
>
{alertIcon && alertIcon}
{/* {alertIcon && alertIcon} */}
<Image w={'40px'} src={DeleteICN} />
<Text
mt={3}
fontWeight={600}
@@ -84,7 +86,7 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
{" "}
{alertCaption}
</Text>
<HStack mt={2} w={"100%"}>
<HStack mt={4} w={"100%"}>
<DialogActionTrigger asChild>
<Button
width="50%"
@@ -92,7 +94,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 +103,8 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
<Button
borderRadius="sm"
width="50%"
bgColor="#007F33"
// bgColor="#007F33"
bgColor={'#02A0A0'}
color="white"
// colorPalette="#007F33"
onClick={onConfirm}

View File

@@ -0,0 +1,49 @@
import React from "react";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
import { BiBorderRadius } from "react-icons/bi";
// ✅ Register the required components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
const BarChart = () => {
// 📊 Chart Data
const data = {
labels: ["Jan", "Jan", "Jan", "Jan", "Jan","Jan", "Jan", "Jan"],
datasets: [
{
label: "Sales ($)",
data: [1, 2, 3, 5, 4,6,5,8],
backgroundColor: "#6976EB", // Light blue color
borderColor: "#6976EB",
borderWidth: 1,
borderRadius:4
},
],
};
// ⚙️ Chart Options
const options = {
responsive: true,
plugins: {
legend: { display: false },
title: { display: false, text: "Monthly Sales Data" },
},
};
return (
<div>
<Bar data={data} options={options} />
</div>
);
};
export default BarChart;

View File

@@ -0,0 +1,64 @@
import React from "react";
import { Doughnut } from "react-chartjs-2";
import {
Chart as ChartJS,
ArcElement,
Tooltip,
Legend,
} from "chart.js";
import { FaUser } from "react-icons/fa";
// ✅ Register required components
ChartJS.register(ArcElement, Tooltip, Legend);
const SemiDoughnutChart = () => {
// 📊 Chart Data
const data = {
labels: ["Recruiter", "Customer"],
datasets: [
{
data: [2554, 2800], // Values
backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
borderWidth: 0, // No border
cutout: "90%", // Makes it a doughnut shape
circumference: 270, // Semi-circle
rotation: 225, // Starts from the top
},
],
};
// ⚙️ Chart Options
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }, // Hide legend
tooltip: { enabled: true },
},
};
return (
<div style={{ position: "relative" }}>
<Doughnut data={data} options={options} />
<div
style={{
position: "absolute",
top: "55%",
left: "50%",
transform: "translate(-50%, -50%)",
fontSize: "20px",
fontWeight: "bold",
color: "#3D5AFE",
backgroundColor:'#ECEAF8',
padding:'15px',
borderRadius:'50%'
}}
>
<FaUser />
</div>
</div>
);
};
export default SemiDoughnutChart;

View File

@@ -0,0 +1,54 @@
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa";
function EditDetails() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg={"transparent"} size="sm">
<FaRegEdit style={{ cursor: "pointer", }} color="#000" />
</Button>
{/* <Button><FaRegEdit /></Button> */}
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3}>
<DialogTitle alignSelf="center" color="black">Edit Details</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>Questions</Field.Label>
<Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
<Field.Label color="black" pt={2}>Answer</Field.Label>
<Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" pt={"5"}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default EditDetails

View File

@@ -0,0 +1,77 @@
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Grid, Heading, 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={{ lg: "60%", md: "230px" }}
height={'80vh'}
overflow={'scroll'}
p={2} // Reduced padding
bgSize={'md'}
>
<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={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 EditSubAdmin

View File

@@ -0,0 +1,55 @@
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
import { IoMdAdd } from "react-icons/io"
function FaqAddModel() {
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 color="#000" /> <Text color={"#00000099"}>Add</Text></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3}>
<DialogTitle alignSelf="center" color="black">Add</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>Questions</Field.Label>
<Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
<Field.Label color="black" pt={2}>Answer</Field.Label>
<Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" pt={"5"}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default FaqAddModel

View File

@@ -0,0 +1,77 @@
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, HStack, Input, Stack, Textarea, } from "@chakra-ui/react"
function PendingRequests() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg={"transparent"} fontSize={"xs"} color="#000000CC" fontWeight="700" textDecoration="underline">
{/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} /> */}
Answer request
</Button>
{/* <Button><FaRegEdit /></Button> */}
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3}>
<DialogTitle alignSelf="center" color="black">Pending Requests</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>Request Type</Field.Label>
<Input placeholder="Message" bgColor="#EEEEEE" color="black" border="none" pl={2} />
<Field.Label color="black" pt={2}>Solution</Field.Label>
<Textarea placeholder="" bgColor="#EEEEEE" height={"80px"} color="black" border="none" pl={2} pt={2}/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display={{base:'block', md:'flex'}} justifyContent="center" gap={1} pt={5}>
<HStack mt={2} w={"100%"}>
<Button
width="50%"
color="black"
_hover={{ bgColor: "white" }}
variant="outline"
borderRadius="sm"
border="1px solid black"
size={"xs"}
>
Unresolved
</Button>
<Button
borderRadius="sm"
width="50%"
// bgColor="#007F33"
bgColor={'#02A0A0'}
color="white"
// colorPalette="#007F33"
size={"xs"}
>
Resolved{" "}
</Button>
</HStack>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default PendingRequests

View File

@@ -0,0 +1,51 @@
import { FaRegEdit } from "react-icons/fa"
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
function PrivacyPolicyAddModel() {
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}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3} >
<DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>PrivacyPolicy</Field.Label>
<Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" pt={"5"}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default PrivacyPolicyAddModel

View File

@@ -0,0 +1,51 @@
import { FaRegEdit } from "react-icons/fa"
import { Button } from "./ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
function TermsAndConditionsAddModel() {
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}> <FaRegEdit color="#000" style={{height:'14px', width:'14px'}}/> <Text color={"#000"} mt={1}>Edit</Text></Button>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
maxW="90vw"
h="auto"
p={4}
>
<DialogHeader bg="white" py={3} >
<DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
</DialogHeader>
<DialogBody bg="white">
<Stack >
<Field.Root>
<Field.Label color="black" pt={2}>TermsAndConditions</Field.Label>
<Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" pt={"5"}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Save
</Button>
</DialogFooter>
<DialogCloseTrigger color="black" />
</DialogContent>
</DialogRoot >
)
}
export default TermsAndConditionsAddModel

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;
}