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

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

Browse Source
This commit is contained in:
Siddhesh More
2025-02-07 20:14:59 +05:30
parent 3e2cae6eef 6b5a732b15
commit f952385288
11 changed files with 677 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dev-dist/sw.js
View File

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

2
src/App.tsx
View File

@@ -5,6 +5,7 @@ import DefaultLayout from "./Layouts/DefaultLayout";
import Login from "./Pages/Login";
import { RouteLink } from "./Routes/Routes";
import LoginOtp from "./Pages/OnBoarding/LoginOtp";
import CreatePass from "./Pages/OnBoarding/CreatePass";
function App() {
const context = useContext(GlobalStateContext);
@@ -17,6 +18,7 @@ function App() {
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/login/login-otp" element={<LoginOtp />} />
<Route path="/login/create-password" element={<CreatePass/>}/>
<Route
path="/*"
element={

2
src/Constants/Constants.tsx
View File

@@ -2,7 +2,7 @@ export const getTitle = (location: string): string => {
const titles: { [key: string]: string } = {
'/': 'Dashboard',
'/manage-user/register-user': 'Manage User',
'/manage-user/deactivate-accounts': 'Manage User',
'/manage-user/active-user': 'Manage User',
'/manage-post': 'Manage Post',
'/manage-sub-admin': 'Manage Sub Admin',
'/manage-jobs': 'Manage Jobs',

2
src/Contexts/GlobalStateProvider.tsx
View File

@@ -5,7 +5,7 @@ import GlobalStateContext from './GlobalStateContext';
const GlobalStateProvider = ({ children }:{children:ReactNode}) => {
const [isAuthenticate, setIsAuthenticate] = useState<boolean>(false);
const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
return (
<GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>

218
src/Layouts/DefaultLayout.tsx
View File

@@ -3,53 +3,199 @@ import React, { FC } from "react";
import { RiNotificationLine } from "react-icons/ri";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { nav } from "../Routes/Nav";
import logo from '../assets/logo.svg';
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
import logo from "../assets/logo.svg";
import {
AccordionItem,
AccordionItemContent,
AccordionItemTrigger,
AccordionRoot,
} from "../components/ui/accordion";
import { Avatar } from "../components/ui/avatar";
import { getTitle } from "../Constants/Constants";
const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
const navigate = useNavigate()
const location = useLocation()
const headerTitle = getTitle(location?.pathname)
const navigate = useNavigate();
const location = useLocation();
const headerTitle = getTitle(location?.pathname);
console.log(location);
return (
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} pt={2} w="100%" h="100vh" >
<VStack zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" >
<HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'center'}>
<HStack
position={"relative"}
bg="#F2F2F2"
backgroundPosition="center"
backgroundRepeat="repeat"
backgroundSize="cover"
gap={0}
pt={2}
w="100%"
h="100vh"
>
<VStack zIndex={1} gap={0} rounded={"lg"} h="100%" w="15%">
<HStack w={"100%"} p={3} h={"6.5%"} justifyContent={"center"}>
<Image w={55} src={logo} />
</HStack>
<VStack overflow={'scroll'} w={'100%'} p={3}>
{nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
<NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px', backgroundColor:'#fff', width:28, color:location?.pathname === path ? '#02A0A0':'#000', padding:2, borderRadius:'50%' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
<AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
<AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} borderBottom={'none'} p={0} key={index} value={title}>
<AccordionItemTrigger className={`link ${location?.pathname.startsWith(initPath??'') && 'active'}`} color={'#fff'} onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000', fontSize: '14px', fontWeight:'normal' }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px', backgroundColor:'#fff', width:23, color:location?.pathname.startsWith(initPath??'') ? '#02A0A0':'#000', padding:2, borderRadius:'50%' }} />{title}</Text></AccordionItemTrigger>
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000' }} ><Icon style={{ fontSize: '16px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
</AccordionItem>
</AccordionRoot>)}
<VStack w={"100%"} p={3}>
{nav?.map(({ title, path, Icon, type, children, initPath }, index) =>
type === "single" ? (
<NavLink
className="link"
key={index}
to={path}
style={{
cursor: "pointer",
borderRadius: "8px",
padding: "6px",
width: "100%",
display: "flex",
alignItems: "center",
gap: 6,
border: "1px solid #ffffff",
backgroundColor: "#fff",
color: "#000",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
}}
>
<Icon
style={{
fontSize: "20px",
backgroundColor: "#fff",
width: 28,
color: location?.pathname === path ? "#02A0A0" : "#000",
padding: 2,
borderRadius: "50%",
}}
/>{" "}
<Text fontSize={"xs"} w={"100%"}>
{title}
</Text>
</NavLink>
) : (
<AccordionRoot bg={"#fff"} rounded={"lg"} collapsible>
<AccordionItem
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
rounded={"lg"}
borderBottom={"none"}
p={0}
key={index}
value={title}
>
<AccordionItemTrigger
className={`link ${location?.pathname.startsWith(initPath ?? "") && "active"}`}
color={"#fff"}
onClick={() => navigate(path)}
gap={0}
style={{
cursor: "pointer",
borderRadius: "8px",
padding: "5px",
width: "100%",
display: "flex",
alignItems: "center",
border: "1px solid #ffffff",
backgroundColor: "#fff",
color: "#000",
fontSize: "14px",
fontWeight: "normal",
}}
>
{" "}
<Text
fontSize={"xs"}
gap={1}
display={"flex"}
alignItems={"center"}
>
<Icon
style={{
fontSize: "20px",
backgroundColor: "#fff",
width: 23,
color: location?.pathname.startsWith(initPath ?? "")
? "#02A0A0"
: "#000",
padding: 2,
borderRadius: "50%",
}}
/>
{title}
</Text>
</AccordionItemTrigger>
{children?.map(({ title, path, Icon }, index) => (
<AccordionItemContent
className={`linkChild ${location?.pathname === path && "activeChild"}`}
key={index}
onClick={() => navigate(path)}
style={{
marginTop: 6,
cursor: "pointer",
borderRadius: "8px",
padding: "6px",
width: "100%",
display: "flex",
alignItems: "center",
gap: 6,
border: "1px solid #ffffff",
backgroundColor: "#fff",
color: "#000",
}}
>
<Icon style={{ fontSize: "16px" }} />{" "}
<Text fontSize={"xs"} w={"100%"}>
{title}
</Text>
</AccordionItemContent>
))}
</AccordionItem>
</AccordionRoot>
)
)}
</VStack>
</VStack>
<VStack gap={0} h="100%" w="85%" >
<HStack h={'6.5%'} w={'100%'} justifyContent={'space-between'} alignItems={'flex-end'} pe={3} gap={6}>
<Text mb={1} fontSize={'sm'} ms={1} fontWeight={600} color={'#013e3e'}>{headerTitle}</Text>
<HStack bg={'#fff'} h={'100%'} justifyContent={'center'} p={2} rounded={'md'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}>
<RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} />
<HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
<Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
<VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
<Text fontSize={'sm'} fontWeight={'bold'}>Ritesh Pandey</Text>
<Text fontSize={'xs'} >ritesh.pandey@wdimails.com</Text>
</VStack>
</HStack>
<VStack overflowY="hidden" gap={0} h="100%" w="85%">
<HStack
h={"6.5%"}
w={"100%"}
justifyContent={"space-between"}
alignItems={"flex-end"}
pe={3}
gap={6}
p={4}
>
<Text
mb={1}
fontSize={"sm"}
ms={1}
fontWeight={600}
color={"#013e3e"}
>
{headerTitle}
</Text>
<HStack
// bg={"#fff"}
h={"100%"}
justifyContent={"center"}
p={2}
rounded={"md"}
// boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
>
<RiNotificationLine
color="#013e3e"
cursor={"pointer"}
style={{ fontSize: "22px" }}
/>
<HStack cursor={"pointer"} onClick={() => navigate("/profile")}>
<Avatar
size={"sm"}
src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg"
/>
<VStack color={"#013e3e"} gap={0} alignItems={"flex-start"}>
<Text fontSize={"sm"} fontWeight={"bold"}>
Ritesh Pandey
</Text>
<Text fontSize={"xs"}>ritesh.pandey@wdimails.com</Text>
</VStack>
</HStack>
</HStack>
</HStack>
{children}

135
src/Pages/Login.tsx
View File

@@ -1,96 +1,127 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import { useContext, useState } from "react"
import { useForm } from "react-hook-form"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import logo from '../assets/logo.svg'
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { Toaster, toaster } from "../components/ui/toaster"
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import logo from "../assets/logo.svg";
import { Button } from "../components/ui/button";
import { Field } from "../components/ui/field";
import { Toaster, toaster } from "../components/ui/toaster";
import { LuUser } from "react-icons/lu";
interface FormValues {
mobileNumber: number
mobileNumber: number;
}
const Login = () => {
const [isLoading, setIsLoading] = useState<boolean>(false)
const [isLoading, setIsLoading] = useState<boolean>(false);
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error('App must be used within a GlobalStateProvider');
throw new Error("App must be used within a GlobalStateProvider");
}
const { setIsAuthenticate } = context;
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>()
} = useForm<FormValues>();
const onSubmit = handleSubmit((data) => {
setIsLoading(true)
setIsLoading(true);
if (data?.mobileNumber === 1234567890) {
setTimeout(() => {
setIsAuthenticate(true);
setIsLoading(false)
setIsLoading(false);
}, 3000); // 3-second delay
} else {
toaster.create({
title: `Invalid Credentials`,
type: "error",
})
setIsLoading(false)
});
setIsLoading(false);
}
});
return (
<VStack
w={'100%'} h={'100vh'} bg={'#ffffff'} >
<HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
<Image w={50} src={logo} />
<VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
<HStack
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
w={"100%"}
ps={8}
h={"7%"}
justifyContent={"flex-start"}
>
<Image w={50} src={logo} />
</HStack>
<HStack
w={'100%'} h={'93%'} p={8} gap={8}>
<Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
<HStack w={"100%"} h={"93%"} p={8} gap={8}>
<Center
display={{ base: "none", md: "flex" }}
bg={"#02A0A033"}
w={"50%"}
h={"100%"}
rounded={"3xl"}
>
<Image w={250} src={logo} />
</Center>
<Center
as={"form"}
onSubmit={onSubmit}
p={{ base: 4, md: 16 }}
w={{ base: "100%", md: "50%" }}
h={"100%"}
>
<VStack gap={2} w={"100%"} alignItems={"flex-start"}>
<Text
w={"100%"}
textAlign={"center"}
fontSize={"24px"}
fontWeight={"normal"}
color={"#313039"}
>
LOGIN
</Text>
<VStack mt={6} gap={4} w={"full"}>
<Field
color={"#313039"}
label={"Enter Mobile Number"}
w={"100%"}
invalid={!!errors.mobileNumber}
errorText={errors.mobileNumber?.message}
>
<Input
ps={3}
{...register("mobileNumber", {
required: "Mobile Number address is required",
})}
placeholder="Mobile Number Address"
/>
<Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
<VStack gap={2} w={'100%'} alignItems={'flex-start'}>
<Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
<VStack mt={6} gap={4} w={'full'}>
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
<Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
{/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
<Text cursor="pointer" as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>
</Field>
<Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>
<Button
loading={isLoading}
mt={4}
size={"sm"}
bg={"#02A0A0"}
rounded={"md"}
w={"100%"}
color={"#ffffff"}
type="submit"
>
Send OTP
</Button>
<Text>Forgot password</Text>
</VStack>
</VStack>
</Center>
<Toaster />
</HStack>
</VStack>
)
}
);
};
export default Login
export default Login;

447
src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx
View File

@@ -1,236 +1,233 @@
import { Box, HStack, Input, Stack, Table, 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 { Box, HStack, Input, Stack, Table, 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";
// Table setup
const tableHeadRow = [
"Sr. No",
"First Name",
"Mobile number",
"Gender",
"DOB",
"Type of User",
"Language",
"Status",
"Action",
];
// Table setup
const tableHeadRow = [
"Sr. No",
"First Name",
"Mobile number",
"Gender",
"DOB",
"Type of User",
"Language",
"Status",
"Action",
];
const usersData:any[] = [
{
"Sr. No": 1,
"First Name": "Ritesh",
"Mobile number": "9876543210",
"Gender": "Male",
"DOB": "15-01-1990",
"Type of User": "Admin",
"Language": "English",
"Status": "Active",
"Action": "Edit/Delete",
},
{
'Sr. No': 2,
"First Name": "Anjali",
"Mobile number": "9123456789",
"Gender": "Female",
"DOB": "21-06-1995",
"Type of User": "Customer",
"Language": "Hindi",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 3,
"First Name": "Rajesh",
"Mobile number": "9871234560",
"Gender": "Male",
"DOB": "12-12-1985",
"Type of User": "Vendor",
"Language": "English",
"Status": "Active",
"Action": "Edit/Delete",
},
{
'Sr. No': 4,
"First Name": "Priya",
"Mobile number": "9988776655",
"Gender": "Female",
"DOB": "05-05-1998",
"Type of User": "Customer",
"Language": "Tamil",
"Status": "Active",
"Action": "Edit/Delete",
},
{
'Sr. No': 5,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 6,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 7,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 5,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 6,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 7,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 8,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 9,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 10,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 11,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 12,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
{
'Sr. No': 13,
"First Name": "Amit",
"Mobile number": "8899665544",
"Gender": "Male",
"DOB": "03-03-1992",
"Type of User": "Admin",
"Language": "Gujarati",
"Status": "Inactive",
"Action": "Edit/Delete",
},
];
const usersData: any[] = [
{
"Sr. No": 1,
"First Name": "Ritesh",
"Mobile number": "9876543210",
Gender: "Male",
DOB: "15-01-1990",
"Type of User": "Admin",
Language: "English",
Status: "Active",
Action: "Edit/Delete",
},
{
"Sr. No": 2,
"First Name": "Anjali",
"Mobile number": "9123456789",
Gender: "Female",
DOB: "21-06-1995",
"Type of User": "Customer",
Language: "Hindi",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 3,
"First Name": "Rajesh",
"Mobile number": "9871234560",
Gender: "Male",
DOB: "12-12-1985",
"Type of User": "Vendor",
Language: "English",
Status: "Active",
Action: "Edit/Delete",
},
{
"Sr. No": 4,
"First Name": "Priya",
"Mobile number": "9988776655",
Gender: "Female",
DOB: "05-05-1998",
"Type of User": "Customer",
Language: "Tamil",
Status: "Active",
Action: "Edit/Delete",
},
{
"Sr. No": 5,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 6,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 7,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 5,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 6,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 7,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 8,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 9,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 10,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 11,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 12,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
{
"Sr. No": 13,
"First Name": "Amit",
"Mobile number": "8899665544",
Gender: "Male",
DOB: "03-03-1992",
"Type of User": "Admin",
Language: "Gujarati",
Status: "Inactive",
Action: "Edit/Delete",
},
];
const RegisterUsers = () => {
return (
<MainFrame>
<HStack w={'100%'} justifyContent={'space-between'} p={3}>
<Text as={'span'} fontSize={'sm'} fontWeight={'bolder'} color={'#000'}>Register User</Text>
<HStack w={"100%"} justifyContent={"space-between"} p={3}>
<Text as={"span"} fontSize={"sm"} fontWeight={"bolder"} color={"#000"}>
Register User
</Text>
<Box w={'30%'}>
<Box w={"30%"}>
<InputGroup
bgSize={'xs'}
flex="1"
startElement={<LuSearch />}
w={'100%'}
color={'#000'}
>
<Input w={'100%'} bg={'#EEEEEE'} _focus={{border:'1px #02A0A0 solid'}} border={'1px #EEEEEE solid'} rounded={'full'} size={'sm'} placeholder="Search..." />
</InputGroup>
</Box>
</HStack>
bgSize={"xs"}
flex="1"
startElement={<LuSearch />}
w={"100%"}
color={"#000"}
>
<Input
w={"100%"}
bg={"#EEEEEE"}
_focus={{ border: "1px #02A0A0 solid" }}
border={"1px #EEEEEE solid"}
rounded={"full"}
size={"sm"}
placeholder="Search..."
/>
</InputGroup>
</Box>
</HStack>
<DataTable tableHeadRow={tableHeadRow} data={usersData} />
<DataTable tableHeadRow={tableHeadRow} data={usersData} />
</MainFrame>
)
}
);
};
export default RegisterUsers
export default RegisterUsers;

149
src/Pages/OnBoarding/CreatePass.tsx Normal file
View File

@@ -0,0 +1,149 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import logo from "../../assets/logo.svg";
import { Button } from "../../components/ui/button";
import { Field } from "../../components/ui/field";
import { Toaster, toaster } from "../../components/ui/toaster";
interface FormValues {
password: string;
confirmPassword: string;
}
const CreatePass = () => {
const [isLoading, setIsLoading] = useState<boolean>(false);
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error("App must be used within a GlobalStateProvider");
}
const { setIsAuthenticate } = context;
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>();
const onSubmit = handleSubmit((data) => {
setIsLoading(true);
if (data?.password === "password123") {
setTimeout(() => {
setIsAuthenticate(true);
setIsLoading(false);
}, 3000);
} else {
toaster.create({
title: `Invalid Credentials`,
type: "error",
});
setIsLoading(false);
}
});
return (
<VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
<HStack
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
w={"100%"}
ps={8}
h={"7%"}
justifyContent={"flex-start"}
>
<Image w={50} src={logo} />
</HStack>
<HStack w={"100%"} h={"93%"} p={8} gap={8}>
<Center
display={{ base: "none", md: "flex" }}
bg={"#02A0A033"}
w={"50%"}
h={"100%"}
rounded={"3xl"}
>
<Image w={250} src={logo} />
</Center>
<Center
as={"form"}
onSubmit={onSubmit}
p={{ base: 4, md: 16 }}
w={{ base: "100%", md: "50%" }}
h={"100%"}
>
<VStack gap={2} w={"100%"} alignItems={"flex-start"}>
<Text
w={"100%"}
textAlign={"center"}
fontSize={"24px"}
fontWeight={"normal"}
color={"#313039"}
textTransform={"uppercase"}
>
create a password
</Text>
<VStack mt={6} gap={4} w={"full"}>
<Field
color={"#313039"}
label={"Enter password"}
w={"100%"}
invalid={!!errors.password}
errorText={errors.password?.message}
>
<Input
ps={3}
type="password"
{...register("password", {
required: "Password is required",
minLength: {
value: 6,
message: "Password must be at least 6 characters long",
},
})}
placeholder="Enter your password"
/>
</Field>
<Field
color={"#313039"}
label={"Confirm password"}
w={"100%"}
invalid={!!errors.confirmPassword}
errorText={errors.confirmPassword?.message}
>
<Input
ps={3}
type="password"
{...register("confirmPassword", {
required: "Please confirm your password",
validate: (value) =>
value === getValues("password") || "Passwords do not match",
})}
placeholder="Confirm your password"
/>
</Field>
<Button
loading={isLoading}
mt={4}
size={"sm"}
bg={"#02A0A0"}
rounded={"md"}
w={"100%"}
color={"#ffffff"}
type="submit"
textTransform="capitalize"
>
Confirm Password
</Button>
<Text>Forgot password</Text>
</VStack>
</VStack>
</Center>
<Toaster />
</HStack>
</VStack>
);
};
export default CreatePass;

12
src/Pages/OnBoarding/LoginOtp.tsx
View File

@@ -1,4 +1,4 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
@@ -106,6 +106,16 @@ const LoginOtp = () => {
<VStack mt={6} gap={4} w={"full"}>
<PinInput />
<Text
w={"100%"}
textAlign={"center"}
fontSize={"sm"}
fontWeight={"600"}
color={"#4746F4"}
textDecoration="underline"
>
Resend OTP
</Text>
<Button
loading={isLoading}
mt={4}

2
src/components/MainFrame.tsx
View File

@@ -13,7 +13,7 @@ interface MainFrameProps {
const MainFrame: FC<MainFrameProps> = ({ children }) => {
return (
<MotionVStack {...OPACITY_ON_LOAD} w="100%" h="94.5%" p={3} ps={1} pt={3} >
<MotionVStack overflowY="scroll" {...OPACITY_ON_LOAD} w="100%" h="94.5%" p={3} pe={0} ps={0} pt={3} >
<Box
w="100%"
h="100%"

24
src/index.css
View File

@@ -53,3 +53,27 @@ body{
/* background-color: #e2e8f01c !important; */
}
/* Style the scrollbar */
::-webkit-scrollbar {
width: 12px; /* Width of the vertical scrollbar */
height: 12px; /* Height of the horizontal scrollbar */
}
/* Style the scrollbar track (the background area) */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* Light gray track */
border-radius: 10px;
}
/* Style the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background-color: #02A0A0; /* Gray color for the thumb */
border-radius: 10px;
border: 3px solid #f1f1f1; /* Border around the thumb */
}
/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Darker gray when hovered */
}