[ working👷‍♂️ ]

This commit is contained in:
YasinShaikh123
2025-02-06 15:07:42 +05:30
parent 127cce73e6
commit aabbbfff8b
13 changed files with 758 additions and 107 deletions

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

@@ -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,18 +1,18 @@
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",
@@ -42,24 +42,14 @@ const registerUser: any[] = [
),
"Action": (
<HStack justifyContent="center">
<NavLink to="/manage-user/active-user/view-active-user">
<MdOutlineRemoveRedEye
style={{ cursor: "pointer", fontSize: "16px" }}
/>
</NavLink>
<NavLink to="/manage-user/active-user/view-active-user">
<BiEdit
style={{ cursor: "pointer", fontSize: "16px" }}
/>
</NavLink>
<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);
}}
@@ -105,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;