[ working👷♂️ ]
This commit is contained in:
@@ -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;
|
||||
|
||||
128
src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
Normal file
128
src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
Normal 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;
|
||||
125
src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
Normal file
125
src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
Normal 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;
|
||||
@@ -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
|
||||
|
||||
126
src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
Normal file
126
src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user