Siddhesh.More/optifii-employee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sidebar Update 🎲

Browse Source
This commit is contained in:
Siddhesh More
2024-09-04 12:19:31 +05:30
parent 8952e08f58
commit a4bee197f9
9 changed files with 62 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://www.wdipl.com/public/img/wdi_logo.svg" />
<link rel="icon" type="image/svg+xml" href="./src/assets/fav_optifii_logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webzilla</title>
<title>Optifii</title>
</head>
<body>
<div id="root"></div>

4
package-lock.json generated
View File

@@ -1,11 +1,11 @@
{
"name": "tanami-admin-dashboard",
"name": "optifii-employee",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "tanami-admin-dashboard",
"name": "optifii-employee",
"version": "0.0.0",
"dependencies": {
"@chakra-ui/icons": "^2.1.1",

2
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "tanami-admin-dashboard",
"name": "optifii-employee",
"private": true,
"version": "0.0.0",
"type": "module",

7
src/App.css
View File

@@ -3,15 +3,18 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/* font-family: "League Spartan", sans-serif !important; */
font-family: "Poppins", sans-serif !important;
/* font-family: "Poppins", sans-serif !important; */
/* font-family: "Lato", sans-serif !important; */
font-family: "Montserrat", sans-serif !important;
}
.pointer {

24
src/Components/HeaderMain.jsx
View File

@@ -39,15 +39,15 @@ const HeaderMain = ({
icon,
logOutHandler,
slideDirecttion,
isDrawerOpen,
toggleDrawer
}) => {
const navigate = useNavigate();
const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [openDrawerClick, setOpenDrawerClick] = useState(true);
const [searchTerm, setSearchTerm] = useState("");
const openDrawerOnClick = () => {
setOpenDrawerClick(!openDrawerClick);
};
return (
@@ -60,13 +60,12 @@ const HeaderMain = ({
>
<div
className={`d-flex ${
isDrawerOpen || openDrawerClick
isDrawerOpen
? "justify-content-start"
: "justify-content-center"
} p-4 pt-0 pb-0 position-relative `}
height={"10%"}
>
{isDrawerOpen || openDrawerClick ? (
<Image
style={{
width: 100,
@@ -76,24 +75,13 @@ const HeaderMain = ({
onClick={() => navigate("/")}
cursor={"pointer"}
/>
) : (
<Image
style={{
width: 50,
}}
src={mainLogo}
alt="Logo"
onClick={() => navigate("/")}
cursor={"pointer"}
/>
)}
</div>
<Button
colorScheme={"forestGreen"}
rounded={"lg"}
// onMouseOver={() => setIsDrawerOpen(true)}
// onMouseLeave={() => setIsDrawerOpen(false)}
onClick={openDrawerOnClick}
onClick={toggleDrawer}
style={{
width: "28px",
height: "28px",
@@ -105,7 +93,7 @@ const HeaderMain = ({
backgroundColor:"#6311CB29"
}}
>
{isDrawerOpen || openDrawerClick ? (
{isDrawerOpen ? (
<ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
) : (
<ArrowRightIcon className="web-text-small " />

95
src/Layout/DefaultLayout.jsx
View File

@@ -78,7 +78,6 @@ const DashboardLayout = ({ isOnline }) => {
const location = useLocation();
const path = location.pathname;
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [openDrawerClick, setOpenDrawerClick] = useState(true);
const {
setIsAuthenticate,
colorMode,
@@ -112,8 +111,8 @@ const DashboardLayout = ({ isOnline }) => {
return () => clearTimeout(timer);
}, []);
const openDrawerOnClick = () => {
setOpenDrawerClick(!openDrawerClick);
const toggleDrawer = () => {
setIsDrawerOpen(!isDrawerOpen);
};
const logOutHandler = () => {
@@ -328,14 +327,13 @@ const DashboardLayout = ({ isOnline }) => {
return (
<Box>
<Box>
<HeaderMain
slideDirecttion={slideFromRight}
isDrawerOpen={isDrawerOpen}
logOutHandler={logOutHandler}
toggleDrawer={toggleDrawer}
icon
title={getTitle()}
/>
</Box>
<Box
style={{
height: "100vh",
@@ -364,46 +362,18 @@ const DashboardLayout = ({ isOnline }) => {
No Internet !
</Alert>
{/* <Box
bottom={4}
right={!slideFromRight ? 4 : "auto"}
left={slideFromRight ? 4 : "auto"}
backgroundColor={"#fff"}
rounded={"full"}
p={2}
w={8}
h={8}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
color={"#004118"}
fontWeight={"800"}
cursor={"pointer"}
position={"absolute"}
transition={"0.5s"}
boxShadow={"md"}
onClick={() => setSlideFormRight(!slideFromRight)}
_hover={{
opacity: 1,
}}
zIndex={999}
>
<IoMdSwap />
</Box> */}
{slideFromRight ? null : (
<aside
className="h-100 position-relative sideBar "
// onMouseOver={() => setIsDrawerOpen(true)}
// onMouseLeave={() => setIsDrawerOpen(false)}
style={{
width: isDrawerOpen || openDrawerClick ? 230 : 74,
transition: "width 0.3s ease-in-out", // Smooth transition for width change
backgroundColor: "#210A33",
position: "relative",
color: "#fff",
}}
>
<Box
className="h-100 position-relative sideBar"
style={{
width: isDrawerOpen ? 230 : 0,
transition: "width 0.3s ease-in-out, transform 0.3s ease-in-out", // Smooth transition for width and transform
backgroundColor: "#210A33",
position: "relative",
color: "#fff",
transform: isDrawerOpen ? "translateX(0)" : "translateX(-230px)", // Move box to the left when closed
}}
>
<Box
@@ -431,7 +401,7 @@ const DashboardLayout = ({ isOnline }) => {
style={{ height: "auto" }}
_hover={{ bg: "#ced8e6a2" }}
className={`${
isDrawerOpen || openDrawerClick
true
? "p-2 web-text-medium ps-3 justify-content-between"
: "p-2 ps-1 web-text-xlarge justify-content-center"
} rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
@@ -451,7 +421,7 @@ const DashboardLayout = ({ isOnline }) => {
<Text
as={"span"}
display={
isDrawerOpen || openDrawerClick
true
? "flex"
: "none"
}
@@ -488,14 +458,14 @@ const DashboardLayout = ({ isOnline }) => {
position: "relative",
}}
className={`${
isDrawerOpen || openDrawerClick
true
? " web-text-medium ps-3"
: " web-text-xlarge justify-content-center"
} d-flex align-items-center p-0`}
>
<NavLink
className={`${
isDrawerOpen || openDrawerClick
true
? "p-2 ps-1 ms-2 web-text-medium "
: "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
} rounded-1 link d-flex align-items-center gap-2 w-100 `}
@@ -511,7 +481,7 @@ const DashboardLayout = ({ isOnline }) => {
<Text
as={"span"}
display={
isDrawerOpen || openDrawerClick
true
? "flex"
: "none"
}
@@ -543,7 +513,7 @@ const DashboardLayout = ({ isOnline }) => {
key={index}
style={{ height: "auto", position: "relative" }}
className={`${
isDrawerOpen || openDrawerClick
true
? "p-2 web-text-medium"
: "p-2 ps-0 web-text-xlarge justify-content-start"
} rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
@@ -553,7 +523,7 @@ const DashboardLayout = ({ isOnline }) => {
<Text
as={"span"}
display={
isDrawerOpen || openDrawerClick ? "flex" : "none"
true ? "flex" : "none"
}
alignItems="center"
overflow="hidden"
@@ -571,33 +541,20 @@ const DashboardLayout = ({ isOnline }) => {
</Box>
<Text
textAlign={"center"}
fontWeight={500}
fontSize={"xs"}
color={"gray.600"}
>
{getCountdownTimer(localStorage.getItem("accessTokenExp"))}
</Text>
</aside>
)}
</Box>
<main
className={`h-100 ${
slideFromRight ? "pe-3" : "ps-3"
} d-flex flex-column gap-0`}
className={`h-100 d-flex flex-column gap-0`}
style={{
width: `calc(100% - ${
isDrawerOpen || openDrawerClick ? 230 : 74
isDrawerOpen ? 230 : 0
}px)`,
transition: "width 0.3s ease-in-out",
background:
"linear-gradient(90deg, rgba(232, 232, 238, 0.6) 0%, rgba(200, 200, 210, 0.6) 100%)",
}}
>
<header className="p-2 ps-0 pt-3 fw-400 border-bottom">
<span className="fs-5">{getTitle()}</span>
</header>
{/* <HeaderMain
slideDirecttion={slideFromRight}

28
src/Pages/Login.jsx
View File

@@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import Input01 from "../Components/Inputs/Input01";
import logo from "../assets/logo2.png";
import logo from "../assets/optifii_logo.png";
import { useDispatch, useSelector } from "react-redux";
import { loginUser } from "../Redux/Slice/auth";
import { useContext, useEffect, useState } from "react";
@@ -124,14 +124,7 @@ const Login = () => {
className="rubix-primary"
>
<Box width={"450px"} display={'flex'} justifyContent={'center'}>
<Image
w={150}
src={"https://www.wdipl.com/public/img/black_logo.svg"}
alt="img"
/></Box>
<Box
as="form"
onSubmit={handleSubmit(onSubmit)}
@@ -149,14 +142,17 @@ const Login = () => {
}}
rounded={'sm'}
>
{/* <div className="d-flex flex-column"> */}
<Text fontSize={'lg'} fontWeight={600} color={'gray.900'} className="mt-2 rubix-text-dark text-center">
LOGIN
<Image
w={100}
src={logo}
alt="img"
/>
<div className="d-flex flex-column">
<Text fontSize={'lg'} fontWeight={600} color={'gray.900'} className="mt-2 rubix-text-dark text-start">
Welcome
</Text>
{/* <span className="fw-500 web-text-large text-secondary text-start">
Login to manage tanami.
</span> */}
{/* </div> */}
</div>
<FormControl className=" mb-3">
<FormLabel className="rubix-text-dark ps-1 web-text-medium fw-bold">

9
src/Pages/NotFound.jsx
View File

@@ -13,7 +13,14 @@ const NotFound = () => {
flexDirection={'column'}
gap={8}
>
<Image src={robot} w={"500px"} />
{/* <Image src={robot} w={"500px"} /> */}<Text
bgGradient='linear(to-l, #5000FF, #50006B)'
bgClip='text'
fontSize='6xl'
fontWeight='bold'
>
Comming Soon...
</Text>
<Text color={'green.800'} as={'span'} fontSize={'small'}>🚧 Developing something amazing for you. 🚧</Text>
</Box>
)

BIN
src/assets/fav_optifii_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB