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

bugs fixed

Browse Source
This commit is contained in:
priyanshuvish
2024-10-10 11:27:55 +05:30
parent e07a240dd5
commit f19b5e4c9f
17 changed files with 940 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/App.css
View File

@@ -22,36 +22,52 @@
}
.activee {
text-decoration: none; /* Remove underline */
font-weight: bold; /* Optionally change font weight for active link */
background: linear-gradient(
to right,
text-decoration: none;
/* Remove underline */
font-weight: bold;
/* Optionally change font weight for active link */
background: linear-gradient(to right,
#7a45fb,
/* #764aaf67, */
#de41b5
); /* Gradient background */
-webkit-background-clip: text; /* Clip text to the background area */
-webkit-text-fill-color: transparent; /* Fill text with the background color */
#de41b5);
/* Gradient background */
-webkit-background-clip: text;
/* Clip text to the background area */
-webkit-text-fill-color: transparent;
/* Fill text with the background color */
transition: all 0.3s ease-in-out;
}
.active {
/* background-color: #210A33; */
/* background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
color: #fff;
font-weight: 600 !important; */
background: linear-gradient(90deg, #5a47b2 50%, #6342ac 50%);
color: #fff;
font-weight: 600 !important;
border-radius: 4px;
padding-left: 4px;
}
.custom-active {
background: transparent;
color: #fff;
/* background-color: black; */
font-weight: 600 !important;
}
a.single.active {
border-left: 2px solid #fff;
background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
}
.chakra-accordion__item.css-1t7rcca:has(.active) {
background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
border-left: 2px solid #fff;
}
.chakra-accordion__item .link:hover{
/* .chakra-accordion__item .link:hover{
background:transparent !important;
}
} */
.link {
text-decoration: none;
transition: all 0.2s ease-in-out;
@@ -81,9 +97,11 @@ a.single.active{
.web-text-small {
font-size: 12px !important;
}
.web-text-xxsmall {
font-size: 9px !important;
}
.web-text-xsmall {
font-size: 11px !important;
}
@@ -117,15 +135,18 @@ a.single.active{
}
.greeting {
text-decoration: none; /* Remove underline */
font-weight: bold; /* Optionally change font weight for active link */
background: linear-gradient(
to right,
text-decoration: none;
/* Remove underline */
font-weight: bold;
/* Optionally change font weight for active link */
background: linear-gradient(to right,
#7a45fb,
#de41b5
); /* Gradient background */
-webkit-background-clip: text; /* Clip text to the background area */
-webkit-text-fill-color: transparent; /* Fill text with the background color */
#de41b5);
/* Gradient background */
-webkit-background-clip: text;
/* Clip text to the background area */
-webkit-text-fill-color: transparent;
/* Fill text with the background color */
transition: all 0.3s ease-in-out;
}
@@ -146,15 +167,14 @@ a.single.active{
color: #000;
font-weight: 700;
right: 110px;
background-image: radial-gradient(
circle,
background-image: radial-gradient(circle,
#ffffff,
#eee2f2,
#e7c3dc,
#e5a3ba,
#de858e
);
#de858e);
}
.team-slider .swiper-button-prev:after {
position: absolute;
top: 185px;
@@ -168,14 +188,12 @@ a.single.active{
color: #000;
font-weight: 700;
left: 110px;
background-image: radial-gradient(
circle,
background-image: radial-gradient(circle,
#ffffff,
#eee2f2,
#e7c3dc,
#e5a3ba,
#de858e
);
#de858e);
}
.text-animate {
@@ -224,6 +242,7 @@ a.single.active{
right: 0;
opacity: 0.1;
}
.goog-te-banner-frame {
display: none;
}
@@ -231,9 +250,11 @@ a.single.active{
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
.goog-logo-link {
display: none !important;
}
.goog-te-gadget {
color: transparent !important;
}
@@ -244,14 +265,17 @@ a.single.active{
color: #DE858E;
/* margin-bottom: -40px; */
}
30% {
letter-spacing: 10px;
/* margin-bottom: -40px; */
}
85% {
letter-spacing: 8px;
/* margin-bottom: -40px; */
}
100% {
/* margin-bottom: 20px; */
}
@@ -265,6 +289,7 @@ a.single.active{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
@@ -276,6 +301,7 @@ a.single.active{
width: 64px;
height: 10px;
}
.lds-ellipsis div {
position: absolute;
width: 10px;
@@ -284,42 +310,52 @@ a.single.active{
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}

57
src/Components/Doughnut/BarCharts.jsx Normal file
View File

@@ -0,0 +1,57 @@
import React from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
// Register components in Chart.js
ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);
const BarChart = () => {
// Data for the bar chart
const data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Sales',
data: [10, 40, 20, 50, 25, 45, 30, 10, 30, 50, 25, 60],
backgroundColor: '#7f3ad8',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
borderRadius: 8,
width:"10px",
},
],
};
// Options for the bar chart
const options = {
scales: {
x: {
barPercentage: 0.4, // Decrease this value to make bars narrower
categoryPercentage: 0.6, // Adjust this to control the space between categories
},
y: {
beginAtZero: true,
ticks: {
// Add 'k' to the labels
callback: function (value) {
return value + 'k';
},
},
},
},
plugins: {
tooltip: {
callbacks: {
// Customize the tooltip label
label: function (context) {
return context.raw + 'k';
},
},
},
},
};
return <Bar data={data} options={options} />;
};
export default BarChart;

44
src/Components/HeaderMain.jsx
View File

@@ -12,6 +12,7 @@ import {
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverFooter,
PopoverTrigger,
Portal,
Text,
@@ -26,27 +27,38 @@ import GlobalStateContext from "../Contexts/GlobalStateContext";
import mainLogo from "../assets/optifii_logo.svg";
import PrimaryButton from "./Buttons/PrimaryButton";
import Notifications from "../Pages/Notifications/Notifications";
import { FaRegUser } from "react-icons/fa6";
import { BiLogOut } from "react-icons/bi";
import Cookies from "js-cookie"; // Import the Cookies library
const HeaderMain = ({
logOutHandler,
slideDirecttion,
isDrawerOpen,
toggleDrawer,
}) => {
const navigate = useNavigate();
const { image } = useContext(GlobalStateContext);
const { image, setIsAuthenticate } = useContext(GlobalStateContext);
const [searchTerm, setSearchTerm] = useState("");
const logOutHandler = () => {
setIsAuthenticate(false);
Cookies.remove("isAuthenticated");
localStorage.removeItem("refreshToken");
localStorage.removeItem("accessToken");
localStorage.removeItem("refreshTokenExp");
navigate("/");
};
// For controlling the modal
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<Box
w={"100%"}
h={{ base: "8%", xl: "6%" }}
h={{ base: "8%", xl: "9%" }}
position={"relative"}
className={`pt-2 pb-2 fw-400 border-bottom d-flex ${
slideDirecttion ? "ps-2" : ""
className={`pt-2 pb-2 fw-400 border-bottom d-flex ${slideDirecttion ? "ps-2" : ""
} justify-content-between align-items-center`}
zIndex={999}
>
@@ -136,6 +148,27 @@ const HeaderMain = ({
</Text>
<PrimaryButton onClick={() => navigate("/profile")} title={"View Profile"} />
</PopoverBody>
<PopoverFooter border={"none"} pt={0} mb={4}>
<HStack pl={6} spacing={1} cursor={"pointer"} w="fit-content" >
<FaRegUser size={"16"} color="#666666" />
<Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
View as Admin
</Text>
</HStack>
<HStack
mt={2}
pl={6}
spacing={1}
onClick={logOutHandler}
cursor={"pointer"}
w="fit-content"
>
<BiLogOut size={"16"} color="#666666" />
<Text as={"span"} fontSize={"sm"} color={"#666666"} fontWeight={500} mb={0}>
Logout
</Text>
</HStack>
</PopoverFooter>
</PopoverContent>
</Portal>
@@ -164,4 +197,3 @@ const HeaderMain = ({
};
export default HeaderMain;

2
src/Components/PayCards/Platinium.jsx
View File

@@ -81,7 +81,7 @@ const Platinium = () => {
</VStack>
<Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
<Image src={platinum} />
<Image w={12} src={platinum} />
<Image w={24} src={RuPay} me={0.5} />
</Box>

2
src/Components/PayCards/PlatiniumGift.jsx
View File

@@ -87,7 +87,7 @@ const PlatiniumGift = () => {
<Box
zIndex={9} width={"100%"} display={"flex"} justifyContent={"space-between"}>
<Image src={platinum} />
<Image w={12} src={platinum} />
<Image w={24} src={RuPay} me={0.5} />
</Box>

130
src/Contexts/GlobalStateProvider.jsx
View File

@@ -51,7 +51,8 @@ const GlobalStateProvider = ({ children }) => {
const [reportsHistory, setReportsHistory] = useState([
{
"id": 1,
"name": "Office Supplies - July 2024",
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
@@ -59,7 +60,8 @@ const GlobalStateProvider = ({ children }) => {
},
{
"id": 2,
"name": "Travel Reimbursement - Q2 2024",
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "15-08-2024 02:45 pm",
"reportType": "Expense",
"totalExpense": 1250.00,
@@ -67,7 +69,8 @@ const GlobalStateProvider = ({ children }) => {
},
{
"id": 3,
"name": "Client Meeting Expenses - August 2024",
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "28-08-2024 09:30 am",
"reportType": "Expense",
"totalExpense": 600.50,
@@ -75,7 +78,8 @@ const GlobalStateProvider = ({ children }) => {
},
{
"id": 4,
"name": "Marketing Campaign - Q3 2024",
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "10-09-2024 11:00 am",
"reportType": "Expense",
"totalExpense": 2300.00,
@@ -83,136 +87,136 @@ const GlobalStateProvider = ({ children }) => {
},
{
"id": 5,
"name": "Team Building Event - September 2024",
"lastUpdated": "22-09-2024 04:20 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "22-09-2024 04:20 pm",
"reportType": "Expense",
"totalExpense": 800.00,
"status": "Fully Reimbursed"
},
{
"id": 6,
"name": "Office Renovation - Phase 1",
"lastUpdated": "30-09-2024 03:10 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "30-09-2024 03:10 pm",
"reportType": "Expense",
"totalExpense": 4500.00,
"status": "Saved"
},
{
"id": 7,
"name": "Software Licenses - 2024 Renewal",
"lastUpdated": "05-10-2024 01:50 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
"reportType": "Expense",
"totalExpense": 3200.00,
"status": "Saved"
},
{
"id": 8,
"name": "Conference Attendance - October 2024",
"lastUpdated": "15-10-2024 09:00 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
"reportType": "Expense",
"totalExpense": 1500.00,
"status": "Partially Reimbursed"
},
{
"id": 9,
"name": "Holiday Party - December 2024",
"lastUpdated": "20-12-2024 05:30 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
"reportType": "Expense",
"totalExpense": 2500.00,
"status": "Saved"
},
{
"id": 10,
"name": "Client Gifts - End of Year 2024",
"lastUpdated": "31-12-2024 02:00 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
"reportType": "Expense",
"totalExpense": 1200.00,
"status": "Approved"
},
{
"id": 11,
"name": "Training Programs - January 2025",
"lastUpdated": "15-01-2025 10:30 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
"reportType": "Expense",
"totalExpense": 900.00,
"status": "Saved"
},
{
"id": 7,
"name": "Software Licenses - 2024 Renewal",
"lastUpdated": "05-10-2024 01:50 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
"reportType": "Expense",
"totalExpense": 3200.00,
"status": "Saved"
},
{
"id": 8,
"name": "Conference Attendance - October 2024",
"lastUpdated": "15-10-2024 09:00 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
"reportType": "Expense",
"totalExpense": 1500.00,
"status": "Partially Reimbursed"
},
{
"id": 9,
"name": "Holiday Party - December 2024",
"lastUpdated": "20-12-2024 05:30 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
"reportType": "Expense",
"totalExpense": 2500.00,
"status": "Saved"
},
{
"id": 10,
"name": "Client Gifts - End of Year 2024",
"lastUpdated": "31-12-2024 02:00 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
"reportType": "Expense",
"totalExpense": 1200.00,
"status": "Approved"
},
{
"id": 11,
"name": "Training Programs - January 2025",
"lastUpdated": "15-01-2025 10:30 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
"reportType": "Expense",
"totalExpense": 900.00,
"status": "Saved"
},
{
"id": 7,
"name": "Software Licenses - 2024 Renewal",
"lastUpdated": "05-10-2024 01:50 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "05-10-2024 01:50 pm",
"reportType": "Expense",
"totalExpense": 3200.00,
"status": "Saved"
},
{
"id": 8,
"name": "Conference Attendance - October 2024",
"lastUpdated": "15-10-2024 09:00 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-10-2024 09:00 am",
"reportType": "Expense",
"totalExpense": 1500.00,
"status": "Partially Reimbursed"
},
{
"id": 9,
"name": "Holiday Party - December 2024",
"lastUpdated": "20-12-2024 05:30 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "20-12-2024 05:30 pm",
"reportType": "Expense",
"totalExpense": 2500.00,
"status": "Saved"
},
{
"id": 10,
"name": "Client Gifts - End of Year 2024",
"lastUpdated": "31-12-2024 02:00 pm",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "31-12-2024 02:00 pm",
"reportType": "Expense",
"totalExpense": 1200.00,
"status": "Approved"
},
{
"id": 11,
"name": "Training Programs - January 2025",
"lastUpdated": "15-01-2025 10:30 am",
"name": "Reimbursement",
"reportFor": "Report for June 2024", "lastUpdated": "15-01-2025 10:30 am",
"reportType": "Expense",
"totalExpense": 900.00,
"status": "Saved"
@@ -220,6 +224,55 @@ const GlobalStateProvider = ({ children }) => {
]
)
const [reportsHistoryMini, setReportsHistoryMini] = useState([
{
"id": 1,
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
"status": "Approved"
},
{
"id": 2,
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
"status": "Rejected"
},
{
"id": 3,
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
"status": "Approved"
},
{
"id": 4,
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
"status": "Rejected"
},
{
"id": 5,
"name": "Reimbursement",
"reportFor": "Report for June 2024",
"lastUpdated": "31-07-2024 10:15 am",
"reportType": "Expense",
"totalExpense": 350.75,
"status": "Approved"
},
]
)
const [requestsTable, setRequestTable] = useState([
@@ -386,6 +439,7 @@ const GlobalStateProvider = ({ children }) => {
requestsTable,
setRequestTable, image, setImage,
walletTable, setWalletTable,
reportsHistoryMini, setReportsHistoryMini
}}
>
{children}

2
src/Layout/DefaultLayout.jsx
View File

@@ -442,7 +442,7 @@ const DashboardLayout = ({ isOnline }) => {
} d-flex align-items-center p-0`}
>
<NavLink
style={{ borderRadius: "2px" }}
style={{ borderRadius: "4px" }}
className={`${
true
? "p-2 ps-1 ms-2 web-text-medium "

10
src/Pages/ContactUs/ContactUs.jsx
View File

@@ -19,8 +19,7 @@ const ContactUs = () => {
boxShadow={'sm'}
p={8}
>
<HStack gap={12} alignItems={"flex-start"} flexWrap={"wrap"} justify={"center"}>
<HStack gap={12} alignItems={"center"} flexWrap={"wrap"} justify={"center"}>
<Box>
<Box
@@ -41,9 +40,10 @@ const ContactUs = () => {
</Box>
<Box w={"50%"} pl={16}>
<ContactUsField label="Subject" placeholder="Enter your name" defaultValue="" />
<ContactUsField label="Email ID" placeholder="Enter your email" defaultValue="" />
<ContactUsField label="Your Message" placeholder="Enter your message" defaultValue="" isTextarea />
<Text fontWeight={600} fontSize={"xl"} textAlign={"center"} mb={6}>Get in touch</Text>
<ContactUsField label="Subject" placeholder="Subject" defaultValue="" />
<ContactUsField label="Email ID" placeholder="Email ID" defaultValue="" />
<ContactUsField label="Your Message" placeholder="Type your message here..." defaultValue="" isTextarea />
<PrimaryButton title={'Send'} width="100%" />
</Box>
</HStack>

1
src/Pages/Expenses/RequestReimbursement.jsx
View File

@@ -284,6 +284,7 @@ const RequestReimbursement = () => {
<HStack mt={6} justifyContent={"center"}>
<PrimaryButton title={"Request Reimbursement"} />
</HStack>
</Box>

6
src/Pages/Gifts/VouchersTab.jsx
View File

@@ -1,5 +1,5 @@
import { Button } from "@chakra-ui/button";
import { Search2Icon } from "@chakra-ui/icons";
import { ChevronDownIcon, Search2Icon } from "@chakra-ui/icons";
import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
import { Box, HStack, VStack } from "@chakra-ui/layout";
import React, { useState } from "react";
@@ -12,6 +12,8 @@ import optifii_purple from '../../assets/optifii_purple.svg'
import bewakoof from '../../assets/bewakoof.svg'
import nyka from '../../assets/nyka.svg'
import hAndm from '../../assets/h&m.svg'
import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
import { LuArrowDownWideNarrow, LuListFilter } from "react-icons/lu";
const VouchersTab = () => {
const [activeTab, setActiveTab] = useState("My Voucher"); // Set default active tab
@@ -165,6 +167,7 @@ const VouchersTab = () => {
</InputGroup>
<Button
size={"sm"}
rightIcon={<ChevronDownIcon />}
variant={"outline"}
rounded={"md"}
fontWeight={500}
@@ -175,6 +178,7 @@ const VouchersTab = () => {
</Button>
<Button
size={"sm"}
rightIcon={<LuArrowDownWideNarrow color="#3725EA"/>}
variant={"outline"}
rounded={"md"}
fontWeight={500}

209
src/Pages/Home/Home.jsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import { Box, HStack, Text, VStack } from "@chakra-ui/layout";
import { Box, Divider, HStack, Text, VStack } from "@chakra-ui/layout";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import RupayCard from "../../Components/PayCards/RupayCard";
import Platinium from "../../Components/PayCards/Platinium";
@@ -9,8 +9,138 @@ import { HiOutlineCreditCard } from "react-icons/hi2";
import { Progress } from "@chakra-ui/progress";
import { Icon } from "@chakra-ui/icon";
import { ArrowForwardIcon } from "@chakra-ui/icons";
import { Select } from "@chakra-ui/react";
import BarChart from "../../Components/Doughnut/BarCharts";
import { BiWalletAlt } from "react-icons/bi";
import { MdOutlineRamenDining } from "react-icons/md";
import {
Button,
Radio,
Tag,
TagLabel,
useDisclosure,
} from "@chakra-ui/react";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { RiDeleteBin5Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { FaRegEye } from "react-icons/fa";
import { PiScrollLight } from "react-icons/pi";
import { useNavigate } from "react-router-dom";
const Home = () => {
const { reportsHistoryMini } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const navigate = useNavigate();
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false); // Set isLoading to false after 3 seconds
}, 500);
// Cleanup the timer when the component unmounts or when the useEffect re-runs
return () => clearTimeout(timer);
}, []); // Empty dependency array means this effect runs once after the component mounts
// ===============================[ Table Header ]
const tableHeadRow = [
"Name",
"Last Update",
"Report type",
"Total Expense",
"Status",
];
const extractedArray = reportsHistoryMini.map((item, index) => ({
Name: <HStack>
<Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
<Box>
<Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
{item?.name}
</Text>
<Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
{item?.reportFor}
</Text>
</Box>
</HStack>
,
"Last Update":
item?.lastUpdated,
"Report type": item?.reportType,
"Total Expense": item?.totalExpense,
Status: (
<Tag
my={1}
size="sm"
borderRadius="full"
color={item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}
border={`1px solid ${item?.status === "Approved" ? "green.500" : item?.status === "Rejected" ? "red.500" : "gray.500"}`}
bg={item?.status === "Approved" ? "green.100" : item?.status === "Rejected" ? "red.100" : "gray.100"}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
}));
const transactions = [
{
id: 1,
type: 'Dine In',
icon: BiWalletAlt,
date: '22 March 2024 - 01:12 PM',
amount: '+ $500',
color: 'green.500',
},
{
id: 2,
type: 'Takeaway',
icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
date: '21 March 2024 - 05:45 PM',
amount: '+ $200',
color: 'green.500',
},
{
id: 3,
type: 'Delivery',
icon: BiWalletAlt, // Replace with appropriate icon if needed
date: '20 March 2024 - 11:30 AM',
amount: '- $50',
color: 'red.500',
},
{
id: 3,
type: 'Delivery',
icon: BiWalletAlt, // Replace with appropriate icon if needed
date: '20 March 2024 - 11:30 AM',
amount: '- $50',
color: 'red.500',
},
{
id: 2,
type: 'Takeaway',
icon: MdOutlineRamenDining, // Replace with appropriate icon if needed
date: '21 March 2024 - 05:45 PM',
amount: '+ $200',
color: 'green.500',
},
// Add more objects as needed
];
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"auto"}>
<MiniHeader
@@ -18,6 +148,7 @@ const Home = () => {
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
<Box>
<HStack justifyContent={"start"} w={"100%"} h={"372px"} gap={4} mb={4}>
<VStack
gap={4}
@@ -157,6 +288,80 @@ const Home = () => {
<PlatiniumGift />
</HStack>
</Box>
<HStack alignItems={"start"} spacing={4}>
<Box flex={1} rounded={"md"} mb={4} p={4} bg={"#fff"}>
<HStack justifyContent={"space-between"}>
<Text as={"span"} fontSize={"md"} fontWeight={600}>
Wallet history
</Text>
<HStack>
<Select placeholder="Monthly" size={"sm"} rounded={"md"}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</Select>
</HStack>
</HStack>
<BarChart />
</Box>
<Box w={"35%"} h={400} rounded={"md"} mb={4} p={4} bg={"#fff"}>
<HStack justifyContent={"space-between"}>
<Text as={"span"} fontSize={"md"} fontWeight={600}>
Wallet history
</Text>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"}>
See All
</Text>
</HStack>
<Box>
<VStack pt={3}>
{transactions?.map(({ id, type, icon, date, amount, color }) => <HStack id={id} bg={''} mb={2} alignItems={'center'} w={'100%'} justifyContent={'space-between'}>
<HStack >
<Icon color={'gray.800'} boxSize={10} rounded={'full'} p={2} bg={'#F6F6F6'} as={icon} />
<VStack alignItems={'start'} gap={0}>
<Text as={'span'} fontWeight={500} fontSize={'sm'} >{type}</Text>
<Text as={'span'} fontWeight={500} color={'gray.500'} fontSize={'xs'} >{date}</Text>
</VStack>
</HStack>
<Text me={2} fontSize={'sm'} fontWeight={500} as={'span'} color={color}>{amount}</Text>
</HStack>)}
</VStack>
</Box>
</Box>
</HStack>
<Box
rounded={"md"}
p={4}
bg={"#fff"}
shadow={"md"}
>
<HStack justifyContent={"space-between"} mb={4}>
<Text fontSize={"lg"} fontWeight={600} mb={0}>
Reports
</Text>
<Text
onClick={() => navigate("/reports/history")}
as={"span"} fontSize={"sm"} fontWeight={500} color={"#818181"} cursor={"pointer"}>
See All
</Text>
</HStack>
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
</Box>
);
};

4
src/Pages/Profile/Profile.jsx
View File

@@ -6,7 +6,7 @@ import { OPACITY_ON_LOAD } from '../../Layout/animations';
import { AiOutlineEdit } from "react-icons/ai";
import { BiCloudUpload } from "react-icons/bi";
import { RxLockClosed } from "react-icons/rx";
import { RiArrowRightSLine } from "react-icons/ri";
import { RiArrowRightSLine, RiRotateLockLine } from "react-icons/ri";
import { GoArrowSwitch } from "react-icons/go";
import DisplayProfile from './DisplayProfile';
import SwitchProfileModal from './SwitchProfileModal';
@@ -94,7 +94,7 @@ const Profile = () => {
bg={"#fff"}
justify={"center"}
>
<RxLockClosed color='#6311CB' />
<RiRotateLockLine color='#6311CB' />
</HStack>
<Text
color={"#383838"}

31
src/Pages/Report/Report.jsx
View File

@@ -4,6 +4,9 @@ import {
Divider,
HStack,
Icon,
Input,
InputGroup,
InputLeftElement,
Radio,
Tag,
TagLabel,
@@ -15,13 +18,13 @@ import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { CalendarIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons";
import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import { FaRegEye } from "react-icons/fa";
import { PiReceipt } from "react-icons/pi";
import { PiReceipt, PiScrollLight } from "react-icons/pi";
import AddReportModal from "../Requests/AddReportModal";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
@@ -29,6 +32,8 @@ const Report = () => {
const { reportsHistory } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure()
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
// Set isLoading to true
@@ -59,7 +64,7 @@ const Report = () => {
Name: <Radio colorScheme='purple' value='1'>
<Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
<Icon as={PiReceipt} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
<Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />{item?.name}</Text>
</Radio>
,
"Last Update":
@@ -84,8 +89,7 @@ const Report = () => {
? "orange"
: "gray" // default color scheme if status doesn't match any condition
}
border={`1px solid ${
item?.status === "Approved"
border={`1px solid ${item?.status === "Approved"
? "green"
: item?.status === "Fully Reimbursed"
? "purple"
@@ -146,6 +150,22 @@ const Report = () => {
Reports
</Text>
<HStack w={"100%"} justifyContent={"space-between"}>
<HStack>
<InputGroup width={300} size="sm" >
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.300" />
</InputLeftElement>
<Input
type="search"
placeholder="Type to search..."
rounded="md"
focusBorderColor="#3725EA"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
<Button
fontWeight={500}
size={"sm"}
@@ -157,6 +177,7 @@ const Report = () => {
>
Select Date Range
</Button>
</HStack>
<PrimaryButton title={'Add to Report'} onClick={onOpen} />
</HStack>
</VStack>

204
src/Pages/Report/ReportsHistory.jsx
View File

@@ -1,24 +1,202 @@
import { Box, Input, Text, HStack, Button, Icon, Tag, Divider, flexbox, } from '@chakra-ui/react'
import React, { useContext } from 'react'
import MiniHeader from '../../Components/MiniHeader'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import { MdOutlineRamenDining } from "react-icons/md";
import { RiDeleteBin5Line } from "react-icons/ri";
import { FaRegFilePdf } from "react-icons/fa";
import {
Box,
Button,
Divider,
HStack,
Icon,
Input,
InputGroup,
InputLeftElement,
Radio,
Tag,
TagLabel,
Text,
VStack,
useDisclosure,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import MiniHeader from "../../Components/MiniHeader";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import NormalTable from "../../Components/DataTable/NormalTable";
import { CalendarIcon, EmailIcon, SearchIcon, ViewIcon } from "@chakra-ui/icons";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md";
import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri";
import { AiOutlineEdit } from "react-icons/ai";
import GlobalStateContext from '../../Contexts/GlobalStateContext';
import { FaRegEye } from "react-icons/fa";
import { PiReceipt, PiScrollLight } from "react-icons/pi";
import AddReportModal from "../Requests/AddReportModal";
import PrimaryButton from "../../Components/Buttons/PrimaryButton";
const ReportsHistory = () => {
const { reportsHistory } = useContext(GlobalStateContext);
const [isLoading, setIsLoading] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure()
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
// Set isLoading to true
setIsLoading(true);
// Simulate a 3-second delay
const timer = setTimeout(() => {
setIsLoading(false); // Set isLoading to false after 3 seconds
}, 500);
// Cleanup the timer when the component unmounts or when the useEffect re-runs
return () => clearTimeout(timer);
}, []); // Empty dependency array means this effect runs once after the component mounts
// ===============================[ Table Header ]
const tableHeadRow = [
"Name",
"Last Update",
"Report type",
"Total Expense",
"Status",
"Actions",
];
// const extractedArray = reportsHistory.map((item)=>({ }))
const extractedArray = reportsHistory.map((item, index) => ({
Name: <HStack>
<Icon as={PiScrollLight} boxSize={8} p={1.5} bg={index % 2 === 0 ? "#6311cb14" : "#fff"} rounded={'full'} />
<Box>
<Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
{item?.name}
</Text>
<Text as={'span'} display={'flex'} gap={2} alignItems={'center'} fontSize={'xs'}>
{item?.reportFor}
</Text>
</Box>
</HStack>
,
"Last Update":
item?.lastUpdated,
"Report type": item?.reportType,
"Total Expense": item?.totalExpense,
Status: (
<Tag
my={1}
size={"sm"}
borderRadius="full"
colorScheme={
item?.status === "Approved"
? "green"
: item?.status === "Fully Reimbursed"
? "purple"
: item?.status === "Disapproved"
? "red"
: item?.status === "Saved"
? "yellow"
: item?.status === "Partially Reimbursed"
? "orange"
: "gray" // default color scheme if status doesn't match any condition
}
border={`1px solid ${item?.status === "Approved"
? "green"
: item?.status === "Fully Reimbursed"
? "purple"
: item?.status === "Disapproved"
? "red"
: item?.status === "Saved"
? "orange"
: item?.status === "Partially Reimbursed"
? "orange"
: "gray" // default border color if status doesn't match any condition
}`}
p={1}
px={3}
>
<TagLabel>{item?.status}</TagLabel>
</Tag>
),
Actions: (
<Box
display={"flex"}
gap={1}
alignItems={"center"}
justifyContent={"center"}
>
<Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
<FaRegEye fontSize={"18px"} />
</Button>
<Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
<AiOutlineEdit fontSize={"19px"} />
</Button>
<Button _hover={{ color: "gray.800", bg: "gray.100" }} transition={'0.5s'} size={"sm"} bg={"none"} p={0} color="gray.600">
<RiDeleteBin5Line fontSize={"18px"} />
</Button>
</Box>
),
}));
return (
<Box {...OPACITY_ON_LOAD} p={4} overflowX={"scroll"}>
<MiniHeader
title={"Reports History"}
backButton={true}
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
backButton={true}
/>
</Box>
)
}
<Box
rounded={"xl"}
py={3}
// pb={0}
display={"flex"}
flexDirection={"column"}
bg={"#fff"}
shadow={"md"}
minH={"100%"}
>
<VStack mb={0} px={3} alignItems={"start"} gap={0}>
<Text fontSize={"lg"} fontWeight={600}>
Reports
</Text>
<HStack w={"100%"} justifyContent={"space-between"}>
export default ReportsHistory
<InputGroup width={300} size="sm" >
<InputLeftElement pointerEvents="none">
<SearchIcon color="gray.300" />
</InputLeftElement>
<Input
type="search"
placeholder="Type to search..."
rounded="md"
focusBorderColor="#3725EA"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</InputGroup>
<Button
fontWeight={500}
size={"sm"}
leftIcon={<CalendarIcon color={"purple.800"} />}
colorScheme="gray"
color={"gray.700"}
variant="outline"
fontSize={"xs"}
>
Select Date Range
</Button>
</HStack>
</VStack>
<Divider />
<NormalTable
emptyMessage={`We don't have any Sponers `}
tableHeadRow={tableHeadRow}
data={extractedArray}
isLoading={isLoading}
/>
</Box>
<AddReportModal isOpen={isOpen} onClose={onClose} />
</Box>
);
};
export default ReportsHistory;

2
src/Pages/Requests/AddReportModal.jsx
View File

@@ -15,7 +15,7 @@ const AddReportModal = ({isOpen, onClose}) => {
<ModalHeader textAlign={'center'} fontSize={'md'}>Add Report</ModalHeader>
<ModalCloseButton />
<ModalBody display={'flex'} justifyContent={'center'} flexDirection={'column'} gap={3} p={6} >
<SeccondaryButton onClick={()=> navigate('/reports/add-new-report')} leftIcon={<AddIcon />} title={"Add To Report"}/>
<SeccondaryButton onClick={()=> navigate('/reports/add-new-report')} leftIcon={<AddIcon />} title={"Add to New Report"}/>
<SeccondaryButton onClick={()=> navigate('/reports')} leftIcon={<PiReceiptBold />} title={"Add To Existing Report"}/>
</ModalBody>

7
src/Routes/Nav.js
View File

@@ -1,13 +1,14 @@
import { HiOutlineNewspaper } from "react-icons/hi";
import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb";
import {
RiCustomerService2Fill,
RiLogoutBoxLine,
RiMoneyDollarBoxLine,
} from "react-icons/ri";
import { RiExchangeBoxLine } from "react-icons/ri";
import { VscSymbolClass } from "react-icons/vsc";
import { FiHome, FiUsers } from "react-icons/fi";
import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
import {MdLogout, MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
import { GrNotification } from "react-icons/gr";
import HomeIcon from "../assets/homeIcon.png"
import { PiReceiptBold } from "react-icons/pi";
@@ -61,13 +62,13 @@ export const nav = [
title: "Help & Support",
type: "single",
path: "/help-support",
Icon: MdOutlineLiveHelp,
Icon: RiCustomerService2Fill,
},
{
title: "Logout",
type: "single",
path: "/",
Icon: RiLogoutBoxLine,
Icon: MdLogout,
},
];

2
src/Routes/Routes.js
View File

@@ -16,6 +16,7 @@ import BuyVoucherCard from "../Pages/Gifts/SelectDenomination";
import ForWhom from "../Pages/Gifts/ForWhom";
import WelcomeToOptifiiComponent from "../Pages/Onboarding/WelcomeFrame";
import RequestReimbursement from "../Pages/Expenses/RequestReimbursement";
import ReportsHistory from "../Pages/Report/ReportsHistory";
@@ -25,6 +26,7 @@ export const RouteLink = [
{ path: "/home", Component: Home },
{ path: "/expenses", Component: Expenses },
{ path: "/reports", Component: Report },
{ path: "/reports/history", Component: ReportsHistory },
{ path: "/reports/add-new-report", Component: AddNewReport },
// { path: "/reports/reports-history", Component: ReportsHistory },
{ path: "/requests", Component: Requests },