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:
AnsariTufail
2025-02-12 12:01:08 +05:30
parent dbde49fffa 688f674062
commit 4ab8daaaf8
46 changed files with 633 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dev-dist/sw.js
View File

@@ -82,7 +82,11 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
<<<<<<< HEAD
"revision": "0.iv1sobg60j"
=======
"revision": "0.3bv9k3911i8"
>>>>>>> 688f6740627f6cdb421849d1fb012420be1d9d10
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

50
src/App.tsx
View File

@@ -1,21 +1,47 @@
import { useContext } from 'react';
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import GlobalStateContext from './Contexts/GlobalStateContext';
import DefaultLayout from './Layouts/DefaultLayout';
import Login from './Pages/Login';
import { RouteLink } from './Routes/Routes';
import { useContext, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import GlobalStateContext from "./Contexts/GlobalStateContext";
import DefaultLayout from "./Layouts/DefaultLayout";
import Login from "./Pages/Login";
import { RouteLink } from "./Routes/Routes";
function App() {
function App() {
const context = useContext(GlobalStateContext);
if (!context) throw new Error('App must be used within a GlobalStateProvider');
const { isAuthenticate } = context;
if (!context) throw new Error("App must be used within a GlobalStateProvider");
const { isAuthenticate, setIsAuthenticate } = context;
useEffect(() => {
const token = localStorage.getItem("token");
setIsAuthenticate(!!token); // Converts token to boolean
}, [setIsAuthenticate]);
console.log("Auth Status:", isAuthenticate);
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/*" element={localStorage.getItem("token")? (<DefaultLayout><Routes>{RouteLink.map(({ path, Component }, index) => (<Route key={index} path={path} element={<Component />} />))}</Routes></DefaultLayout>) : (<Login />)} />
<Route path="*" element={<Login />} />
{/* Redirect logged-in users away from login */}
<Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} />
{/* Protected Routes */}
<Route
path="/*"
element={isAuthenticate && localStorage.getItem("token") ? (
<DefaultLayout>
<Routes>
{RouteLink.map(({ path, Component }, index) => (
<Route key={index} path={path} element={<Component />} />
))}
</Routes>
</DefaultLayout>
) : (
<Navigate to="/login" />
)}
/>
{/* Catch-all route to prevent unauthorized access */}
<Route path="*" element={<Navigate to="/login" />} />
</Routes>
</Router>
);

58
src/Layouts/DefaultLayout.tsx
View File

@@ -1,5 +1,5 @@
import { HStack, Image, Text, VStack } from "@chakra-ui/react";
import React, { FC } from "react";
import React, { FC, useContext } from "react";
import { RiNotificationLine } from "react-icons/ri";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { nav } from "../Routes/Nav";
@@ -7,43 +7,72 @@ import logo from '../assets/logo.svg';
import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
import { Avatar } from "../components/ui/avatar";
import { LuLogOut } from "react-icons/lu";
import { logout, setToken } from "../Redux/Service/authSlice";
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 }) => {
const dispatch = useDispatch()
const navigate = useNavigate()
const location = useLocation()
const context = useContext(GlobalStateContext);
if (!context) {
throw new Error('App must be used within a GlobalStateProvider');
}
const { setIsAuthenticate } = context;
const [ logOutAdmin ] = useLogOutMutation()
// Logout function
const handleLogout = async () => {
try {
// ✅ Call mutation and wait for the response
const res = await logOutAdmin().unwrap();
console.log("Logout Success:", res);
// ✅ Clear local storage & update authentication state
dispatch(logout());
localStorage.removeItem("token");
setIsAuthenticate(false);
// ✅ Redirect to login page
navigate("/login");
} catch (error) {
console.error("Logout Failed:", error);
}
};
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 bg={'#fff'} rounded={'lg'} collapsible>
<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>
<AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
<AccordionItemTrigger className="Oxygen" 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', }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
{children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${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:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
</AccordionItem>
</AccordionRoot>)}
</VStack>
<VStack w={'100%'} p={3} pt={0}>
<HStack onClick={()=>{dispatch(logout()), navigate('/login')}} className="link" 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'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
<HStack onClick={handleLogout} className="link" 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'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
</VStack>
</VStack>
<VStack gap={0} h="100%" w="85%" >
<HStack h={'12%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
<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" />
@@ -56,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>
);
};

65
src/Pages/ForgetPassword.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { Field, Input, Stack, Text } from "@chakra-ui/react";
import { Button } from "../components/ui/button";
import {
DialogBody,
DialogContent,
DialogFooter,
DialogHeader,
DialogRoot,
DialogTitle,
DialogTrigger,
} from "../components/ui/dialog";
function ForgetPassword() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Text w={"100%"} textAlign={"end"} mt={2} cursor={"pointer"}>
Forgot password?
</Text>
</DialogTrigger>
<DialogContent
bg={"#fff"}
w={{ base: "90%", md: "400px" }}
p={2}
bgSize={"md"}
>
<DialogHeader bg="white" pt={3} pb={2}>
<DialogTitle
alignSelf="center"
color="black"
fontSize="18px"
textAlign={"center"}
>
Forgot Password
</DialogTitle>
</DialogHeader>
<DialogBody bg="white" pt={5}>
<Stack p={2}>
<Field.Root>
<Field.Label color="black" pt={1} fontSize="12px">
Please Enter Email Address
</Field.Label>
<Input
color="black"
p={2}
fontSize="sm"
type="text"
border="1px solid grey"
size={"sm"}
/>
</Field.Root>
</Stack>
</DialogBody>
<DialogFooter display="flex" justifyContent="center" mt={2} p={2}>
<Button w="100%" bg="#02A0A0" color={"#fff"}>
Reset Password
</Button>
</DialogFooter>
</DialogContent>
</DialogRoot>
);
}
export default ForgetPassword;

207
src/Pages/Login.tsx
View File

@@ -1,45 +1,54 @@
import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
import axios from "axios"
import { useContext, useState } from "react"
import { useForm } from "react-hook-form"
import { useDispatch } from "react-redux"
import GlobalStateContext from "../Contexts/GlobalStateContext"
import { setToken } from "../Redux/Service/authSlice"
import logo from '../assets/logo.svg'
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { Toaster } from "../components/ui/toaster"
import { PasswordInput } from "../components/ui/password-input"
import { useNavigate } from "react-router-dom"
import {
Box,
Center,
HStack,
Image,
Input,
Text,
Theme,
VStack,
} from "@chakra-ui/react";
import axios from "axios";
import { useContext, useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import { setToken } from "../Redux/Service/authSlice";
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 { PasswordInput } from "../components/ui/password-input";
import { useNavigate } from "react-router-dom";
import ForgetPassword from "./ForgetPassword";
interface FormValues {
mobileNumber: number
password: string
mobileNumber: number;
password: string;
}
const Login = () => {
const navigate = useNavigate()
const dispatch = useDispatch()
const [isLoading, setIsLoading] = useState<boolean>(false)
const navigate = useNavigate();
const dispatch = useDispatch();
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(async (data) => {
setIsLoading(true);
// Encode Basic Auth Credentials
const username = import.meta.env.VITE_USER_NAME||''; // Replace with actual username
const password = import.meta.env.VITE_PASSWORD||''; // Replace with actual password
const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
const basicAuth = `${username} : ${password}`; // Encode to Base64
try {
const res = await axios.post(
`${import.meta.env.VITE_API_URL}/login`,
@@ -52,89 +61,135 @@ const Login = () => {
Authorization: `Basic ${basicAuth}`,
"Content-Type": "application/json",
},
}
);
console.log("============",res);
if (res.data) {
setIsAuthenticate(true)
console.log('====================================');
setIsAuthenticate(true);
console.log("====================================");
console.log(res.data?.data);
console.log('====================================');
navigate('/dashboard')
console.log("====================================");
navigate("/dashboard");
dispatch(setToken(String(res.data?.data["access-token"])));
} else {
console.log("====================================");
console.log(res);
console.log("====================================");
}
} catch (error) {
console.log('error', error);
if (error) {
console.error("Login failed", error);
setIsLoading(false)
toaster.create({
// title: error?.response?.data?.message,
title: "Something Went Wrong",
type: "info",
})
// console.log("Login failed", error?.response?.data?.message);
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'}>
<VStack appearance={'light'} 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>
<Box
as={"form"}
onSubmit={onSubmit}
p={{ base: 4, md: 16 }}
w={{ base: "100%", md: "50%" }}
h={"100%"}
>
<VStack gap={2} w={"100%"}>
<Text
w={"100%"}
textAlign={"center"}
fontSize={"24px"}
fontWeight={"normal"}
color={"#313039"}
>
LOGIN
</Text>
<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 type="number" 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> */}
<Box mt={6} gap={4} w={"full"}>
<Field
color={"#313039"}
label={"Enter Mobile Number"}
w={"100%"}
invalid={!!errors.mobileNumber}
errorText={errors.mobileNumber?.message}
mb={4}
>
<Input
type="number"
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> */}
</Field>
<Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.password} errorText={errors.password?.message} >
<PasswordInput ps={3} {...register("password", { required: "Pasword is required" })} placeholder="Enter password" />
{/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
<Field
color={"#313039"}
label={"Enter password."}
w={"100%"}
invalid={!!errors.password}
errorText={errors.password?.message}
mb={2}
>
<PasswordInput
ps={3}
{...register("password", { required: "Pasword is required" })}
placeholder="Enter password"
/>
{/* <Text 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">Login</Button>
<Text>Forgot password</Text>
</VStack>
<Button
loading={isLoading}
mt={4}
size={"sm"}
bg={"#02A0A0"}
rounded={"md"}
w={"100%"}
color={"#ffffff"}
type="submit"
>
Login
</Button>
<ForgetPassword />
</Box>
</VStack>
</Center>
</Box>
<Toaster />
</HStack>
</VStack>
)
}
);
};
export default Login
export default Login;

16
src/Pages/ManageCMS/FAQ/EditDetails.tsx
View File

@@ -1,15 +1,23 @@
import { TbEdit } from "react-icons/tb";
import { Button } from "../../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
import { Field, Grid, Icon, Input, Stack, Text, Textarea } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa";
function EditDetails() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<FaRegEdit style={{ cursor: "pointer", fontSize:'16px' }} color="#000" />
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
{/* <Button><FaRegEdit /></Button> */}
</DialogTrigger>

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}

17
src/Pages/ManageGroups/EditDetailGroup.tsx
View File

@@ -1,19 +1,26 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Avatar, Box, Field, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
import { Switch } from "../../components/ui/switch";
import { FaRegEdit } from "react-icons/fa";
import { AvatarGroup } from "../../components/ui/avatar";
import { TbEdit } from "react-icons/tb";
function EditDetailGroups() {
return (
<DialogRoot placement="center" >
<DialogTrigger asChild>
<FaRegEdit style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/>
{/* <Button><FaRegEdit /></Button> */}
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
</DialogTrigger>
<DialogContent

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}

16
src/Pages/ManageGroups/ViewManageGroup.tsx
View File

@@ -1,19 +1,27 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Avatar, Box, Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Avatar, Box, Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "../../components/ui/checkbox"
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Switch } from "../../components/ui/switch";
import { AvatarGroup } from "../../components/ui/avatar";
import { TbEdit } from "react-icons/tb";
function ViewManageGroup() {
return (
<DialogRoot placement="center" >
<DialogTrigger asChild>
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/>
{/* <Button><FaRegEdit /></Button> */}
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<MdOutlineRemoveRedEye />
</Icon>
</DialogTrigger>

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

@@ -1,15 +1,11 @@
import { Box, createListCollection, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../components/MainFrame"
import ViewSubAdmin from "../SubAdmin/ViewSubAdmin";
import EditSubAdmin from "../../components/EditSubAdmin";
import AlertDailog from "../../components/AlertDailog";
import { InputGroup } from "../../components/ui/input-group";
import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
import { LuSearch } from "react-icons/lu";
import AddModel from "../SubAdmin/AddModel";
import DataTable from "../../components/DataTable";
import { RiDeleteBin5Line } from "react-icons/ri";
import AlertDailog from "../../components/AlertDailog";
import DataTable from "../../components/DataTable";
import MainFrame from "../../components/MainFrame";
import { InputGroup } from "../../components/ui/input-group";
import ManageJobsAdd from "./ManageJobsAdd";
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValueText } from "../../components/ui/select";
import ViewManageJob from "./ViewManageJob";
@@ -87,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}

23
src/Pages/ManageJobs/ManageJobsAdd.tsx
View File

@@ -1,9 +1,9 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
import { Field, Icon, Input, SelectValueText, Stack, createListCollection } from "@chakra-ui/react";
import { Button } from "../../components/ui/button";
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
import { FaRegEdit } from "react-icons/fa"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
import { TbEdit } from "react-icons/tb";
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select";
const frameworks = createListCollection({
items: [
@@ -19,9 +19,16 @@ function ManageJobsAdd() {
<DialogRoot placement="center">
<DialogTrigger asChild>
<FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
</DialogTrigger>
<DialogContent

18
src/Pages/ManageJobs/ViewManageJob.tsx
View File

@@ -1,10 +1,9 @@
import { Field, Icon, Input, SelectValueText, Stack, createListCollection, } from "@chakra-ui/react"
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
import { FaRegEdit } from "react-icons/fa"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
import { MdOutlineRemoveRedEye } from "react-icons/md"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
const frameworks = createListCollection({
items: [
@@ -20,9 +19,16 @@ function ViewManageJob() {
<DialogRoot placement="center">
<DialogTrigger asChild>
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000"/>
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<MdOutlineRemoveRedEye />
</Icon>
</DialogTrigger>
<DialogContent

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

@@ -27,7 +27,7 @@ const managepost: any[] = [
"Sr. No": i + 1,
"Images": (
// <Image w={50} src={img} />
<Image w={100} h={50} src={img} />
<Image rounded={'lg'} w={100} h={50} src={img} />
),
@@ -36,8 +36,8 @@ const managepost: any[] = [
</Text>),
"Publish Data": "12/01/2025",
"Activate/Deactivate": (
<Box>
<Switch colorPalette={'teal'} />
<Box w={'100%'} >
<Switch size={'sm'} colorPalette={'teal'} />
</Box>
),
"Action": (
@@ -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}

21
src/Pages/ManagePost/ViewDailog.tsx
View File

@@ -1,16 +1,23 @@
import { MdOutlineRemoveRedEye } from "react-icons/md"
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Image, Input, Stack } from "@chakra-ui/react"
import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
import { TbEdit } from "react-icons/tb"
import img from "../../assets/waterfall.jpg"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
function ViewDailog() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
</DialogTrigger>
<DialogContent

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

@@ -21,7 +21,7 @@ const manageUser: any[] = [
"Company name": "9876543210",
"Activate/Deactivate": (
<Box display={'flex'} justifyContent={'center'}>
<Switch colorPalette={'teal'} />
<Switch size={'sm'} colorPalette={'teal'} />
</Box>
),
})),
@@ -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}

6
src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
View File

@@ -1,5 +1,5 @@
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Input, Stack } from "@chakra-ui/react";
import { Field, Icon, Input, Stack } from "@chakra-ui/react";
import {
DialogActionTrigger,
DialogBody,
@@ -13,12 +13,14 @@ import {
} from "../../../components/ui/dialog";
import { BiEdit } from "react-icons/bi";
import { Button } from "../../../components/ui/button";
import { TbEdit } from "react-icons/tb";
import Edit from "../../../components/ActionIcons/Edit";
function EditRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
<Edit/>
</DialogTrigger>
<DialogContent

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

@@ -33,7 +33,7 @@ const registerUser: any[] = [
"Language": "Mumbai",
"Activate/Deactivate": (
<Box>
<Switch colorPalette={'teal'} />
<Switch size={'sm'} colorPalette={'teal'} />
</Box>
),
"Action": (
@@ -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}

16
src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
View File

@@ -1,5 +1,5 @@
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { Field, Input, Stack } from "@chakra-ui/react";
import { Field, Icon, Input, Stack } from "@chakra-ui/react";
import {
DialogBody,
DialogCloseTrigger,
@@ -14,10 +14,16 @@ function ViewRegisterUsers() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<MdOutlineRemoveRedEye
color="#000"
style={{ cursor: "pointer", fontSize: "16px" }}
/>
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<MdOutlineRemoveRedEye />
</Icon>
</DialogTrigger>
<DialogContent

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

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

16
src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
View File

@@ -1,7 +1,8 @@
import { FaRegEdit } from "react-icons/fa"
import { Button } from "../../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Field, Input, Stack, } from "@chakra-ui/react"
import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
import { TbEdit } from "react-icons/tb"
function EditAgencyMaster() {
@@ -10,9 +11,16 @@ function EditAgencyMaster() {
<DialogRoot placement="center">
<DialogTrigger asChild>
<FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }} color="#000"/>
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
</DialogTrigger>
<DialogContent

14
src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
View File

@@ -1,5 +1,5 @@
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Field, Input, Stack, } from "@chakra-ui/react"
import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
import { MdOutlineRemoveRedEye } from "react-icons/md"
import { Button } from "../../../components/ui/button"
@@ -11,8 +11,16 @@ function ViewAgencyMaster() {
<DialogRoot placement="center">
<DialogTrigger asChild>
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000"/>
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<MdOutlineRemoveRedEye />
</Icon>
</DialogTrigger>
<DialogContent

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}

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

@@ -28,8 +28,8 @@ const managepost: any[] = [
"Images": (
// <Image w={50} src={img} />
<HStack >
<Image w={100} h={50} src={img} />
<Image w={100} h={50} src={Templateimg} />
<Image rounded={'lg'} w={100} h={50} src={img} />
<Image rounded={'lg'} w={100} h={50} src={Templateimg} />
</HStack>
@@ -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/AddModel.tsx
View File

@@ -12,7 +12,7 @@ function AddModel() {
{/* <Button bg={"transparent"} size="sm">
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
</Button> */}
<Button px={4} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
<Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
</DialogTrigger>

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

@@ -76,11 +76,11 @@ const SubAdmin = () => {
p={3}
w={300}
bg={"#fff"}
colorPalette={"blue"}
colorPalette={"cyan"}
_focus={{ border: "1px solid #02A0A0" }}
rounded={"md"}
size={"2xs"}
fontSize={"2sm"}
size={"xs"}
fontSize={"sm"}
placeholder="Search..."
bgColor={'#EEEEEE'}
ps={8}

17
src/Pages/SubAdmin/ViewSubAdmin.tsx
View File

@@ -1,17 +1,28 @@
import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
import { Checkbox } from "../../components/ui/checkbox"
import { MdOutlineRemoveRedEye } from "react-icons/md";
import { FaRegEdit } from "react-icons/fa";
function ViewSubAdmin() {
return (
<DialogRoot placement="center" >
<DialogTrigger asChild>
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<MdOutlineRemoveRedEye />
</Icon>
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/>
{/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
{/* <Button><FaRegEdit /></Button> */}
{/* <Button><MdOutlineRemoveRedEye /></Button> */}
</DialogTrigger>

10
src/Redux/Service/apiSlice.tsx
View File

@@ -51,6 +51,14 @@ export const dashboard = createApi({
getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
// 🔹 POST: Create a new post
logOut: builder.mutation<void, void>({
query: () => ({
url: "/logout",
method: "POST",
}),
}),
@@ -58,7 +66,7 @@ export const dashboard = createApi({
}),
});
export const { useGetPostsQuery } = dashboard;
export const { useGetPostsQuery, useLogOutMutation } = dashboard;
export type Post = {
id: number;

36
src/Redux/Service/forget.password.service.ts Normal file
View File

@@ -0,0 +1,36 @@
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQueryWithReauth } from "./apiSlice";
export const forgetPassword = createApi({
reducerPath: "aboutUs",
baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
endpoints: (builder) => ({
// 🔹 GET: Fetch all posts
getAboutUs: builder.query<AboutUs[], void>({
query: () => "/send-otp",
}),
}),
});
export const {
useGetAboutUsQuery,
} = forgetPassword;
// Define Post type
export type Post = {
id: number;
title: string;
body: string;
};
export type AboutUs = {
id: number;
language_master_xid: number;
content: string;
is_active: boolean;
};

6
src/Routes/Nav.ts
View File

@@ -17,7 +17,7 @@ export const nav = [
},
{
title: "Manage Users",
path: "",
path: "/register-users",
Icon: BiUserPin,
type:'multiple',
children: [
@@ -65,7 +65,7 @@ export const nav = [
},
{
title: "Manage CMS",
path: "",
path: "/faq",
Icon: AiOutlineFileText,
type:'multiple',
children: [
@@ -104,7 +104,7 @@ export const nav = [
},
{
title: "Master Module",
path: "",
path: "/agency-master",
Icon: BsBoxes,
type:'multiple',
children: [

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},
]

22
src/components/ActionIcons/Edit.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Icon } from '@chakra-ui/react'
import { TbEdit } from 'react-icons/tb'
import { Tooltip } from '../ui/tooltip'
const Edit = () => {
return (
<Tooltip content='Edit' >
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
</Tooltip>
)
}
export default Edit

21
src/components/EditSubAdmin.tsx
View File

@@ -1,4 +1,7 @@
import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react";
import { TbEdit } from "react-icons/tb";
import { Button } from "./ui/button";
import { Checkbox } from "./ui/checkbox";
import {
DialogBody,
DialogCloseTrigger,
@@ -9,16 +12,22 @@ import {
DialogTitle,
DialogTrigger,
} from "./ui/dialog";
import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react";
import { Checkbox } from "./ui/checkbox";
import { FaRegEdit } from "react-icons/fa";
function EditSubAdmin() {
return (
<DialogRoot placement="center">
<DialogTrigger asChild>
<Button bg={"transparent"} size="sm">
<FaRegEdit style={{ cursor: "pointer" }} color="#000" />
</Button>
{/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
<Icon
cursor={"pointer"}
p={0.5}
_hover={{ bg: "#00000015" }}
rounded={"md"}
boxSize={5}
// color={iconColor && iconColor}
>
<TbEdit />
</Icon>
{/* <Button><FaRegEdit /></Button> */}
</DialogTrigger>

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} 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>

2
src/components/ui/password-input.tsx
View File

@@ -86,7 +86,7 @@ const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
<IconButton
tabIndex={-1}
ref={ref}
me="-2"
me="2"
aspectRatio="square"
size="sm"
variant="ghost"

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

@@ -17,17 +17,17 @@ 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%">
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
<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>
)}

43
src/index.css
View File

@@ -14,12 +14,26 @@ body {
margin: 0;
padding: 0;
font-family: "Roboto", serif;
background-color: #fff;
}
.Oxygen {
font-family: "Oxygen", serif
}
/* Change text selection color */
::selection {
background-color: #02A0A0; /* Yellow */
color: #fff; /* Black */
}
/* For Firefox */
::-moz-selection {
background-color: #02A0A0;
color: #fff;
}
.active {
background-color: #02A0A0 !important;
@@ -133,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;
}
@@ -170,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;
}