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-02-12 11:54:21 +05:30
parent b960b116dc
commit 688f674062
25 changed files with 121 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/Layouts/DefaultLayout.tsx
View File

@@ -11,6 +11,7 @@ import { logout } from "../Redux/Service/authSlice";
import { useDispatch } from "react-redux";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import { useLogOutMutation } from "../Redux/Service/apiSlice";
import ProgressBar from "../components/ProgressBar/ProgressBar";
const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -46,12 +47,15 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
};
return (
<HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
<VStack zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'auto'} >
<HStack w={'100%'} p={3} h={'8%'} justifyContent={'center'}>
<VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
<ProgressBar isLoading={false} />
<HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)" p={0}>
<VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
<HStack w={'100%'} p={3} h={'7%'} justifyContent={'center'}>
<Image w={55} src={logo} />
</HStack>
<VStack w={'100%'} p={4} pt={0}>
<VStack w={'100%'} p={2} pt={0}>
{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> :
<AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
@@ -66,7 +70,9 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
</VStack>
</VStack>
<VStack gap={0} h="100%" w="85%" >
<HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
<NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
<HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
<Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
@@ -79,6 +85,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
{children}
</VStack>
</HStack>
</VStack>
);
};

2
src/Pages/Dashboard/Dashboard.tsx
View File

@@ -26,6 +26,7 @@ import {
SelectValueText
} from "../../components/ui/select";
import AgencyName from "./AgencyName";
import { Spinner } from "../../components/Sipnner/Spinner";
const Dashboard = () => {
const frameworks = createListCollection({
@@ -186,6 +187,7 @@ const Dashboard = () => {
<AgencyName />
</Box>
</Box>
</MainFrame>
);
};

6
src/Pages/Login.tsx
View File

@@ -5,6 +5,7 @@ import {
Image,
Input,
Text,
Theme,
VStack,
} from "@chakra-ui/react";
import axios from "axios";
@@ -78,6 +79,8 @@ const Login = () => {
console.log("====================================");
}
} catch (error) {
console.log('error', error);
if (error) {
toaster.create({
// title: error?.response?.data?.message,
@@ -91,7 +94,8 @@ const Login = () => {
});
return (
<VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
<VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
<HStack
boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
w={"100%"}

2
src/Pages/ManageCMS/FAQ/FAQ.tsx
View File

@@ -74,7 +74,7 @@ const FAQ = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
size={"xs"}
fontSize={"2sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}

4
src/Pages/ManageContact/ManageContact.tsx
View File

@@ -60,8 +60,8 @@ const ManageContact = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/ManageGroups/ManageGroups.tsx
View File

@@ -82,8 +82,8 @@ const ManageGroups = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/ManageJobs/ManageJobs.tsx
View File

@@ -83,8 +83,8 @@ const ManageJobs = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

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

@@ -90,8 +90,8 @@ const ManagePost = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

2
src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
View File

@@ -57,7 +57,7 @@ const DeactivatedAccounts = () => {
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
View File

@@ -84,8 +84,8 @@ const RegisterUsers = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

2
src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
View File

@@ -77,7 +77,7 @@ const AgencyMaster = () => {
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"xs"}
fontSize={"2sm"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/MasterModule/Country/Country.tsx
View File

@@ -63,8 +63,8 @@ const Country = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/MasterModule/JobStatus/JobStatus.tsx
View File

@@ -63,8 +63,8 @@ const JobStatus = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/MasterModule/JobType/JobType.tsx
View File

@@ -63,8 +63,8 @@ const JobType = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
View File

@@ -76,8 +76,8 @@ const TemplateMaster = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

4
src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
View File

@@ -63,8 +63,8 @@ const WorkspaceMode = () => {
colorPalette={"blue"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

2
src/Pages/SubAdmin/SubAdmin.tsx
View File

@@ -80,7 +80,7 @@ const SubAdmin = () => {
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"xs"}
fontSize={"2sm"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

3
src/Routes/Routes.ts
View File

@@ -22,6 +22,7 @@ import Country from "../Pages/MasterModule/Country/Country";
import JobStatus from "../Pages/MasterModule/JobStatus/JobStatus";
import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers";
import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts";
import { Spinner } from "../components/Sipnner/Spinner";
export const RouteLink = [
{ path: "/", Component: Dashboard },
@@ -47,4 +48,6 @@ export const RouteLink = [
{ path: "/workspace-mode", Component: WorkspaceMode},
{ path: "/country", Component: Country},
{ path: "/job-status", Component: JobStatus},
// { path: "/job-status", Component: Spinner},
]

3
src/components/MainFrame.tsx
View File

@@ -13,7 +13,7 @@ interface MainFrameProps {
const MainFrame: FC<MainFrameProps> = ({ children }) => {
return (
<MotionVStack rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0} pe={2} pb={2}>
<MotionVStack rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0} pe={2} ps={1.5} pb={2}>
<Box
w="100%"
// h="100%"
@@ -22,6 +22,7 @@ const MainFrame: FC<MainFrameProps> = ({ children }) => {
rounded="lg"
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
pt={3}
>
{children}
</Box>

20
src/components/ProgressBar/ProgessBar.css Normal file
View File

@@ -0,0 +1,20 @@
/* HTML: <div class="progressbar"></div> */
.progressbar {
height: 4px;
width: 100%;
--c: no-repeat linear-gradient(#02A0A0 0 0);
background: var(--c), var(--c), #B8F8F8;
background-size: 60% 100%;
animation: l16 3s infinite;
}
@keyframes l16 {
0% {background-position: -150% 0, -150% 0}
66% {background-position: 250% 0, -150% 0}
100% {background-position: 250% 0, 250% 0}
}
.progressbarInactive{
height: 4px;
width: 100%;
}

12
src/components/ProgressBar/ProgressBar.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React from "react";
import './ProgessBar.css';
interface ProgressBarProps {
isLoading: boolean;
}
const ProgressBar: React.FC<ProgressBarProps> = ({ isLoading }) => {
return <span className={isLoading ? "progressbar" : "progressbarInactive"} />;
};
export default ProgressBar;

28
src/components/Sipnner/Spinner.css Normal file
View File

@@ -0,0 +1,28 @@
/* HTML: <div class="loader"></div> */
.loader {
width: 25px;
aspect-ratio: 1;
display: grid;
border-radius: 50%;
background:
linear-gradient(0deg, rgba(2, 160, 160, 0.5) 30%, transparent 0 70%, rgba(2, 160, 160, 1) 0) 50% / 8% 100%,
linear-gradient(90deg, rgba(2, 160, 160, 0.25) 30%, transparent 0 70%, rgba(2, 160, 160, 0.75) 0) 50% / 100% 8%;
background-repeat: no-repeat;
animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
border-radius: 50%;
background: inherit;
opacity: 0.915;
transform: rotate(30deg);
}
.loader::after {
opacity: 0.83;
transform: rotate(60deg);
}
@keyframes l23 {
100% {transform: rotate(1turn)}
}

7
src/components/Sipnner/Spinner.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { Center } from '@chakra-ui/react'
import './Spinner.css'
export const Spinner = () => <Center w={'100%'} h={'100%'}> <div className='loader'/></Center>

6
src/components/ui/toaster.tsx
View File

@@ -17,16 +17,16 @@ export const toaster = createToaster({
export const Toaster = () => {
return (
<Portal>
<Portal >
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
{(toast) => (
<Toast.Root width={{ md: "sm" }}>
<Toast.Root width={{ md: "sm" }}>
{toast.type === "loading" ? (
<Spinner size="sm" color="blue.solid" />
) : (
<Toast.Indicator />
)}
<Stack rounded={'full'} gap="1" flex="1" maxWidth="100%">
<Stack appearance={'light'} rounded={'full'} gap="1" flex="1" maxWidth="100%">
{toast.title && <Toast.Title p={2} color="#02A0A0">{toast.title}</Toast.Title>}
{toast.description && (
<Toast.Description>{toast.description}</Toast.Description>

29
src/index.css
View File

@@ -147,32 +147,10 @@ body {
}
/* Style the scrollbar */
::-webkit-scrollbar {
width: 6px;
/* 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;
border-radius: 10px;
}
/* Style the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background-color: #c8c8c8cf;
/* Gray color for the thumb */
border-radius: 10px;
border: 1px solid #f1f1f1;
/* Border around the thumb */
}
/* Scrollbar width */
::-webkit-scrollbar {
width: 8px;
width: 6px;
height: 8px;
cursor: pointer;
}
@@ -184,14 +162,15 @@ body {
/* Scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3); /* Light black (30% opacity) */
background: rgba(0, 0, 0, 0.2); /* Light black (30% opacity) */
border-radius: 10px; /* Rounded edges */
transition: background 0.3s;
}
/* On hover, make it darker */
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.411);
cursor: pointer;
}