Siddhesh.More/SSA-Admin-Panel
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel

Browse Source
This commit is contained in:
YasinShaikh123
2025-02-06 15:16:52 +05:30
parent 39b16bd6e6 0c3ccce916
commit 5029837c1b
12 changed files with 642 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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",

2
package.json
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",

107
src/Pages/Dashboard/Dashboard.tsx
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;

128
src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx Normal file
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;

125
src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx Normal file
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;

27
src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
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

126
src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx Normal file
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;

6
src/Routes/Nav.ts
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
src/components/AlertDailog.tsx
View File

@@ -9,6 +9,7 @@ import {
DialogRoot,
DialogTrigger,
} from "./ui/dialog";
import DeleteICN from '../assets/deleteIcon.png'
interface DeleteConfirmationDialogProps {
onConfirm?: () => void;
@@ -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%"

49
src/components/Charts/BarChart.tsx Normal file
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;

64
src/components/Charts/SemiDoughnutChart.tsx Normal file
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;