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

UPDATE

Browse Source
This commit is contained in:
Siddhesh More
2025-01-16 12:10:28 +05:30
parent 6012ba6ffe
commit 9688f07e4f
10 changed files with 319 additions and 126 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.jlpvaemfr1"
"revision": "0.7mpt2f2te58"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

30
src/Constants/Constaants.tsx
View File

@@ -1,30 +0,0 @@
export const getTitle = (loactions:string) =>{
if (loactions==='/') {
return 'Dashboard'
}else if (loactions==='/register-user') {
return 'Manage User - Register User'
} else if (loactions==='/deactivate-accounts') {
return 'Manage User - Deactivated User'
} else if (loactions==='/manage-post') {
return 'Manage Post'
} else if (loactions==='/manage-sub-admin') {
return 'Manage Sub Admin'
} else if (loactions==='/manage-jobs') {
return 'Manage Jobs'
} else if (loactions==='/manage-contact-us') {
return 'Manage Contact Us'
} else if (loactions==='/manage-contact-us') {
return 'Manage Contact Us'
}else if (loactions==='/faq') {
return 'Manage CMS - FAQ'
}else if (loactions==='/about-us') {
return 'Manage CMS - About Us'
}else if (loactions==='/privacy-policy') {
return 'Manage CMS - Privacy Policy'
}else if (loactions==='/terms-and-condition') {
return 'Manage CMS - Tems And Condition'
}else if (loactions==='/profile') {
return 'My Profile'
}
}

19
src/Constants/Constants.tsx Normal file
View File

@@ -0,0 +1,19 @@
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-post': 'Manage Post',
'/manage-sub-admin': 'Manage Sub Admin',
'/manage-jobs': 'Manage Jobs',
'/manage-contact-us': 'Manage Contact Us',
'/manage-cms/faq': 'Manage CMS',
'/manage-cms/about-us': 'Manage CMS',
'/manage-cms/privacy-policy': 'Manage CMS',
'/manage-cms/terms-and-condition': 'Manage CMS',
'/profile': 'My Profile',
};
return titles[location] || 'Page Not Found';
};

22
src/Layouts/DefaultLayout.tsx
View File

@@ -6,12 +6,14 @@ import { nav } from "../Routes/Nav";
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/Constaants";
import { getTitle } from "../Constants/Constants";
const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
const navigate = useNavigate()
const location = useLocation()
const headerTitle = getTitle(location?.pathname)
console.log(location);
@@ -19,27 +21,27 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
return (
<HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" >
<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 w={'100%'} p={3}>
{nav?.map(({ title, path, Icon, type, children }, 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' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
<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 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' }} />{title}</Text></AccordionItemTrigger>
<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'} pe={3} gap={6}>
<Text fontSize={'sm'} ms={1} fontWeight={600} color={'#013e3e'}>{headerTitle}</Text>
<HStack justifyContent={'center'}>
<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" />

5
src/Pages/ManagePost/ManagePost.tsx
View File

@@ -1,7 +1,10 @@
import MainFrame from "../../components/MainFrame"
const ManagePost = () => {
return (
<div>ManagePost</div>
<MainFrame>
</MainFrame>
)
}

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

@@ -1,9 +1,234 @@
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",
];
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>
<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>
<DataTable tableHeadRow={tableHeadRow} data={usersData} />
</MainFrame>
)
}

18
src/Routes/Nav.ts
View File

@@ -17,18 +17,19 @@ export const nav = [
},
{
title: "Manage Users",
path: "/register-user",
path: "/manage-user/register-user",
initPath:'/manage-user',
Icon: TiUserOutline,
type:'multiple',
children: [
{
title: "Register Users",
path: "/register-user",
path: "/manage-user/register-user",
Icon: GoDotFill,
},
{
title: "Deactivated Accounts",
path: "/deactivate-accounts",
path: "/manage-user/deactivate-accounts",
Icon: GoDotFill,
},
],
@@ -60,28 +61,29 @@ export const nav = [
{
title: "Manage CMS",
path: "/faq",
initPath:'/manage-cms',
path: "/manage-cms/faq",
Icon: TiDocumentText,
type:'multiple',
children: [
{
title: "FAQ",
path: "/faq",
path: "/manage-cms/faq",
Icon: GoDotFill,
},
{
title: "About Us",
path: "/about-us",
path: "/manage-cms/about-us",
Icon: GoDotFill,
},
{
title: "Privacy Policy",
path: "/privacy-policy",
path: "/manage-cms/privacy-policy",
Icon: GoDotFill,
},
{
title: "Terms And Conditions",
path: "/terms-and-condition",
path: "/manage-cms/terms-and-condition",
Icon: GoDotFill,
},
],

12
src/Routes/Routes.ts
View File

@@ -12,24 +12,24 @@ import RegisterUsers from "../Pages/ManageUser/RegisterUsers/RegisterUsers";
import Profile from "../Pages/Profile/Profile";
export const RouteLink = [
{ path: "/", Component: Dashboard },
{ path: "/register-user", Component: RegisterUsers },
{ path: "/deactivate-accounts", Component: DeactivatedAccounts },
{ path: "/manage-user/register-user", Component: RegisterUsers },
{ path: "/manage-user/deactivate-accounts", Component: DeactivatedAccounts },
{ path: "/manage-post", Component: ManagePost },
{ path: "/manage-sub-admin", Component: ManageSubAdmin },
{ path: "/manage-jobs", Component: ManageJobs },
{ path: "/manage-contact-us", Component: ManageContactUs },
{ path: "/faq", Component: FreqAskQuestion },
{ path: "/manage-cms/faq", Component: FreqAskQuestion },
{ path: "/about-us", Component: AboutUs },
{ path: "/manage-cms/about-us", Component: AboutUs },
{ path: "/privacy-policy", Component: PrivacyPolicy },
{ path: "/manage-cms/privacy-policy", Component: PrivacyPolicy },
{ path: "/terms-and-condition", Component: PrivacyPolicy },
{ path: "/manage-cms/terms-and-condition", Component: PrivacyPolicy },

35
src/components/DataTable.tsx Normal file
View File

@@ -0,0 +1,35 @@
import { Stack, Table } from "@chakra-ui/react"
interface TableProps {
tableHeadRow: string[];
data: Record<string, any>[];
}
const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
return (
<Stack mt={4} color={'#000000CC'} gap="10">
<Table.Root key={'line'} size="sm" variant={'line'}>
<Table.Header >
<Table.Row bg={'#02A0A0'} >
{tableHeadRow.map((item, index)=><Table.ColumnHeader fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
</Table.Row>
</Table.Header>
<Table.Body>
{data.map((item:any, index) => (
<Table.Row
bg={index % 2 === 0 ? "#fff" : "#02A0A020"} >
{tableHeadRow.map((heading)=><Table.Cell key={index} fontSize={'xs'} fontWeight={500} border={'none'}>{item[heading]}</Table.Cell> )}
</Table.Row>))}
</Table.Body>
</Table.Root>
</Stack>
)
}
export default DataTable

77
src/index.css
View File

@@ -1,4 +1,4 @@
*{
body{
margin: 0;
padding: 0;
box-sizing: border-box;
@@ -21,7 +21,12 @@
/* background-color: #e2e8f01c !important; */
}
.active>.css-1ic543h {
-webkit-transition: rotate 0.2s;
transition: rotate 0.2s;
transform-origin: center;
color: #fff;
}
.linkChild:hover{
color: #02A0A0 !important;
@@ -48,71 +53,3 @@
/* background-color: #e2e8f01c !important; */
}
/* Sphere.css */
/* ✅ Red Spheres */
.red-sphere-1,
.red-sphere-2,
.red-sphere-3{
position: absolute;
border-radius: 50%;
background-color: #D90B2E46;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
filter: blur(100px);
}
/* ✅ Blue Spheres */
.blue-sphere-1,
.blue-sphere-2,
.blue-sphere-3{
position: absolute;
border-radius: 50%;
background-color: #009DAB46;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
filter: blur(100px);
}
/* 🔧 Positioning for Spheres */
.red-sphere-1 {
width: 250px;
height: 250px;
top: 10%;
left: 5%;
}
.blue-sphere-1 {
width: 320px;
height: 320px;
top: 30%;
right: 0%;
}
.red-sphere-2 {
width: 180px;
height: 180px;
bottom: 15%;
left: 20%;
}
.blue-sphere-2 {
width: 140px;
height: 140px;
bottom: 5%;
right: 25%;
}
.red-sphere-3 {
width: 480px;
height: 480px;
bottom: 55%;
left: 40%;
}
.blue-sphere-3{
width: 300px;
height: 300px;
bottom: 10%;
right: 40%;
}