diff --git a/src/Components/Doughnut/ApexLine.jsx b/src/Components/Doughnut/ApexLine.jsx index 8e27e25..57b1aea 100644 --- a/src/Components/Doughnut/ApexLine.jsx +++ b/src/Components/Doughnut/ApexLine.jsx @@ -5,19 +5,19 @@ function ApexLine() { const [chartOptions, setChartOptions] = useState({ series: [{ name: 'Rate', - data: [45, 23, 70, 65, 5, 34, 32], + data: ["0","20k", "60k", "50k", "110k","90k", "100k"], gradientToColors: ['#004017'], }], options: { chart: { - height: 350, + height: 500, type: 'line', toolbar: { show: false // Hide the action icons } }, stroke: { - width: 5, + width: 2, curve: 'smooth', colors: ['#598369'], // Customize the line color here }, @@ -29,11 +29,11 @@ function ApexLine() { }, xaxis: { type: 'category', // Change from 'datetime' to 'category' - categories: ['BH', 'KW', 'OM', 'QA', 'SA', 'UAE', 'IND'], + categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], tickAmount: 7 }, title: { - text: 'Exchange Rate Currency', // Adjust the title if needed + text: 'Spend summary', // Adjust the title if needed align: 'left', style: { fontSize: '15px', @@ -58,7 +58,7 @@ function ApexLine() { return (
- +
); } diff --git a/src/Components/Doughnut/PieCharts.jsx b/src/Components/Doughnut/PieCharts.jsx new file mode 100644 index 0000000..62abfe0 --- /dev/null +++ b/src/Components/Doughnut/PieCharts.jsx @@ -0,0 +1,66 @@ +import React, { useEffect, useRef } from 'react'; +import { Chart, ArcElement, Tooltip, Legend } from 'chart.js'; // Import necessary components +import { Box, Text } from '@chakra-ui/react'; + +function PieCharts() { + const chartRef = useRef(null); + + useEffect(() => { + // Register required components + Chart.register(ArcElement, Tooltip, Legend); + + const ctx = chartRef.current.getContext('2d'); + + const myChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Food', 'Fuel', 'Travel', 'Sales call'], + datasets: [ + { + data: [25, 15, 30, 30], // Adjust the values as needed + backgroundColor: ['#ff6384', '#ffce56', '#36a2eb', '#4bc0c0'], + borderColor: ['#fff', '#fff', '#fff', '#fff'], + borderWidth: 1, + borderRadius:0, + }, + ], + }, + options: { + cutout: '75%', + responsive: true, + plugins: { + legend: { + position: 'bottom', + borderRadius:"0px", + labels: { + usePointStyle: true, + usePointStyle: false, // Disables the point style + boxWidth: 25, // Adjust this to make square boxes + padding: 15, + paddingTop:70, + }, + }, + }, + }, + }); + + return () => { + myChart.destroy(); + }; + }, []); + + return ( +
+ Total spent by category + + + + Total Value + ₹9,999.99 + + +
+ ); +} + +export default PieCharts; diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx index b0fae47..e5576b7 100644 --- a/src/Contexts/GlobalStateProvider.jsx +++ b/src/Contexts/GlobalStateProvider.jsx @@ -2015,9 +2015,6 @@ const GlobalStateProvider = ({ children }) => { }, ]); - - - // Recent report const [recentReports, setRecentReports] = useState([ { @@ -2203,6 +2200,163 @@ const GlobalStateProvider = ({ children }) => { ]); + const [transactionHistory, setTransactionHistory] = useState([ + { + id: 1, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + { + id: 2, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + { + id: 3, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + { + id: 4, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + { + id: 5, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + { + id: 6, + employeeName: "Reethik thota", + employeeID: "#356567", + department: "Sales", + wallet: "FOOD", + merchant: "Dine In", + natureExpense: "Reimbursed", + dateTime: "12 July 24, 10am", + amount: "₹ 5000", + }, + ]); + + const [reportStatus, setReportStatus] = useState([ + { + id: 1, + reportName: "Food", + // reportBy: "#356567", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Fully Reimbursed", + approver: "Reimbursed", + disburser: "12 July 24, 10am", + action: "₹ 5000", + }, + { + id: 2, + reportName: "Food", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Partially Reimbursed", + }, + { + id: 3, + reportName: "Food", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Fully Reimbursed", + }, + { + id: 4, + reportName: "Food", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Fully Reimbursed", + }, + { + id: 5, + reportName: "Food", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Approved", + }, + { + id: 6, + reportName: "Food", + reportAmount: "₹ 5000", + dateTime: "Jun 10, 2024", + status: "Approved", + }, + + ]); + + const [viewReports, setViewReports] = useState([ + { + id: 1, + inVoice: "Invoice #01 - Dec 2023", + amount: "₹ 5000", + paidWallet: "Food", + status: "Approved", + }, + { + id: 2, + inVoice: "Invoice #01 - Dec 2023", + amount: "₹ 5000", + paidWallet: "Food", + status: "Approved", + }, + { + id: 3, + inVoice: "Invoice #01 - Dec 2023", + amount: "₹ 5000", + paidWallet: "Food", + status: "Approved", + }, + { + id: 4, + inVoice: "Invoice #01 - Dec 2023", + amount: "₹ 5000", + paidWallet: "Food", + status: "Approved", + }, + { + id: 5, + inVoice: "Invoice #01 - Dec 2023", + amount: "₹ 5000", + paidWallet: "Food", + status: "Approved", + }, + ]); + return ( { walletProgram, SupportAndTicket, setSupportAndTicket, - recentReports, setRecentReports, recentTransaction, setRecentTransaction, walletExpense, setWalletExpense, dash, - setDash + setDash, + transactionHistory, + setTransactionHistory, + reportStatus, + setReportStatus, + viewReports, + setViewReports, }} > {children} diff --git a/src/Pages/NoInternetScreen.jsx b/src/Pages/NoInternetScreen.jsx index c469cad..065f3e5 100644 --- a/src/Pages/NoInternetScreen.jsx +++ b/src/Pages/NoInternetScreen.jsx @@ -12,10 +12,10 @@ const NoInternetScreen = () => { position={"relative"} gap={5} > - + {/* */} {/* No Internet ! */} - Tanami v1.0 + Optifii v1.0 ) diff --git a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx index e9c4554..22685c4 100644 --- a/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx +++ b/src/Pages/OptiFiiExpense/ReimbursementRequest.jsx @@ -44,7 +44,7 @@ const ReimbursementRequest = () => { // ===============================[ Table Header ] const tableHeadRow = [ - "Select", + // "Select", "Sr. No", "Name", "Status", diff --git a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx index 82c68b0..c39dbf7 100644 --- a/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx +++ b/src/Pages/OptiFiiGifsAndVouchers/GiftDashboard.jsx @@ -14,7 +14,7 @@ import { LuListFilter } from 'react-icons/lu'; import { ArrowForwardIcon, ChevronDownIcon, SearchIcon } from '@chakra-ui/icons'; import info from "../../assets/info.png"; import redinfo from "../../assets/redinfo.png"; -import { NavLink } from 'react-router-dom'; +import { Link, NavLink } from 'react-router-dom'; import { CiCalendar } from 'react-icons/ci'; import ReactApexChart from 'react-apexcharts'; import { GoDotFill } from 'react-icons/go'; @@ -794,6 +794,7 @@ const GiftDashboard = () => { flex={1} position={"relative"} > + { w={10} h={6} > - Apply for brand voucher @@ -829,6 +829,7 @@ const GiftDashboard = () => { opacity={0.7} > + {/* GPR Card */} diff --git a/src/Pages/Report/Report.jsx b/src/Pages/Report/Report.jsx index be4d491..51fd112 100644 --- a/src/Pages/Report/Report.jsx +++ b/src/Pages/Report/Report.jsx @@ -1,9 +1,17 @@ import { + Badge, Box, Button, Divider, + Heading, HStack, Icon, + Image, + Menu, + MenuButton, + MenuItem, + MenuList, + Select, Tag, TagLabel, Text, @@ -13,16 +21,24 @@ 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, ChevronDownIcon, EmailIcon, ViewIcon } from "@chakra-ui/icons"; import { OPACITY_ON_LOAD } from "../../Layout/animations"; -import { MdNotificationsNone, MdOutlineHeadsetMic } from "react-icons/md"; +import { MdNotificationsNone, MdOutlineHeadsetMic, MdOutlineUnarchive } from "react-icons/md"; import { RiDeleteBin5Line, RiWallet3Line } from "react-icons/ri"; -import { AiOutlineEdit } from "react-icons/ai"; +import { AiOutlineCalendar, AiOutlineEdit } from "react-icons/ai"; import { FaRegEye } from "react-icons/fa"; import { PiReceipt } from "react-icons/pi"; +import ApexChart from "../../Components/Doughnut/ApexDonut"; +import ApexLine from "../../Components/Doughnut/ApexLine"; +import PieCharts from "../../Components/Doughnut/PieCharts"; +import { GoDotFill } from "react-icons/go"; +import { Link } from "react-router-dom"; +import { FaArrowUpFromBracket } from "react-icons/fa6"; +import { IoMdArrowDropdown } from "react-icons/io"; const Report = () => { - const { reportsHistory } = useContext(GlobalStateContext); + const { transactionHistory } = useContext(GlobalStateContext); + const { reportStatus } = useContext(GlobalStateContext); const [isLoading, setIsLoading] = useState(false); useEffect(() => { @@ -40,138 +56,207 @@ const Report = () => { // ===============================[ Table Header ] const tableHeadRow = [ - "Name", - "Last Update", - "Report type", - "Total Expense", - "Status", - "Actions", + "Employee Name", + "Employee ID", + "Department", + "Wallet", + "Merchant", + "Nature of expense", + "Date & time", + "Amount", ]; // const extractedArray = reportsHistory.map((item)=>({ })) - - const extractedArray = reportsHistory.map((item, index) => ({ + const extractedArray = transactionHistory.map((item, index) => ({ Name: {item?.name}, - "Last Update": - item?.lastUpdated, - "Report type": item?.reportType, - "Total Expense": item?.totalExpense, - Status: ( - - {item?.status} - - ), - Actions: ( - - - - - + "Employee Name": + item?.employeeName, + "Employee ID": item?.employeeID, + "Department": item?.department, + "Wallet": item?.wallet, + "Merchant": item?.merchant, + "Nature of expense": item?.natureExpense, + "Date & time": item?.dateTime, + "Amount":( + {item?.amount} ), })); + + // ===============================[ Table Header ] + const tableHeadRowReport = [ + "Report Name", + "Report by", + "Report amount", + "Date & time", + "Status", + "Approver", + "Disburser", + "Action", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + const extractedArrayReport = reportStatus.map((item, index) => ({ + Name: + {item?.name}, + "Report Name":item?.reportName, + "Report by":( + + Dan Abramov + + Pooja Shah + + + ), + "Report amount": item?.reportAmount, + "Date & time": item?.dateTime, + "Status": ( + + + {item?.status} + + ), + "Approver": ( + + Dan Abramov + + Ravi Sharma + + + ), + "Disburser":( + + Dan Abramov + + Karan Johar + + + ), + "Action":( + View Reports + ), + })); + return ( - - + + + Report + + + + + Time Period : + + + + Feb 20 - Jan 30, 2024{" "} + + + + + + + + + + + + + + + - - - Reports - - - - - - - - + + Transaction history + + + + { isLoading={isLoading} /> + + + Reimbursement status + + + + + + ); }; diff --git a/src/Pages/Report/ViewReports.jsx b/src/Pages/Report/ViewReports.jsx new file mode 100644 index 0000000..e0b7ce1 --- /dev/null +++ b/src/Pages/Report/ViewReports.jsx @@ -0,0 +1,201 @@ +import { Box, Button, Divider, Heading, HStack, Image, Menu, MenuButton, MenuItem, MenuList, Tag, TagLabel, Text } from "@chakra-ui/react"; +import React, { useContext, useEffect, useState } from "react"; +import GlobalStateContext from "../../Contexts/GlobalStateContext"; +import NormalTable from "../../Components/DataTable/NormalTable"; +import { LiaFileInvoiceSolid } from "react-icons/lia"; +import { OPACITY_ON_LOAD } from "../../Layout/animations"; +import { GrDownload } from "react-icons/gr"; +import { GoDotFill } from "react-icons/go"; +import { FaArrowUpFromBracket } from "react-icons/fa6"; +import { ChevronDownIcon } from "@chakra-ui/icons"; +import pdfIcon from "../../assets/pdfIcon.svg"; +import ExcelIcon from "../../assets/ExcelIcon.svg"; + +const ViewReports = () => { + const { viewReports } = useContext(GlobalStateContext); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + setIsLoading(true); + const timer = setTimeout(() => { + setIsLoading(false); + }, 500); + + return () => clearTimeout(timer); + }, []); + + // ======================= [ Table Header ] ======================= + const tableHeadRow = [ + "Invoice", + "Amount", + "Paid from wallet", + "Status", + "Action", + ]; + + // const extractedArray = reportsHistory.map((item)=>({ })) + + const extractedArray = viewReports.map((item, index) => ({ + Invoice: ( + + + + + + {item?.inVoice} + + + ), + Amount: item?.amount, + "Paid from wallet": item?.paidWallet, + Status:( + + + {item?.status} + + ), + Action: ( + + ), + })); + + return ( + + + + + Food expense June 2024 + + + + Fully Reimbursed + + + + + + + Report by + + + Kartikey Gautam + + + + + Report amount + + + ₹ 10,000 + + + + + Date & time + + + 22 June, 2024 + + + + + Approver + + + Pooja Patade + + + + + Disburser + + + Pooja Patade + + + + + + + + Food expense June 2024 + + + } + rightIcon={} + fontSize={"xs"} + colorScheme="gray" + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Export + + + + Export as PDF + + + Export as Excel + + + + + + + + ); +}; + +export default ViewReports; diff --git a/src/Pages/SupportAndTicket/SupportAndTicket.jsx b/src/Pages/SupportAndTicket/SupportAndTicket.jsx index eb9d000..b7e8d17 100644 --- a/src/Pages/SupportAndTicket/SupportAndTicket.jsx +++ b/src/Pages/SupportAndTicket/SupportAndTicket.jsx @@ -20,6 +20,7 @@ import { useDisclosure, Select, Textarea, + Flex, } from "@chakra-ui/react"; import React, { useContext, useEffect, useState } from "react"; import MiniHeader from "../../Components/MiniHeader"; @@ -34,6 +35,8 @@ import { FaArrowUpFromBracket } from "react-icons/fa6"; import { PiIdentificationBadge } from "react-icons/pi"; import PrimaryButton from "../../Components/Buttons/PrimaryButton"; import SecondaryButton from "../../Components/Buttons/SecondaryButton"; +import { BsFilterRight } from "react-icons/bs"; +import { LuListFilter } from "react-icons/lu"; const SupportAndTicket = () => { @@ -58,7 +61,7 @@ const SupportAndTicket = () => { // ===============================[ Table Header ] const tableHeadRow = [ - "Select", + // "Select", "Ticket ID", "Subject", "Status", @@ -178,6 +181,64 @@ const SupportAndTicket = () => {
+ + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Sort + + + Ascending + Descending + Recently Viewed + Recently Added + + + + Show + + entries + + + + + + + } + rightIcon={} + fontSize={"xs"} + color={"gray.700"} + variant="outline" + size={"sm"} + me={2} + > + Filter + + + Ascending + Descending + Recently Viewed + Recently Added + + + + { {/* modal */} - + - Add New ticket + Add New ticket diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js index efe5f52..ee406ea 100644 --- a/src/Routes/Routes.js +++ b/src/Routes/Routes.js @@ -38,6 +38,7 @@ import BrandVoucherTable from "../Pages/OptiFiiGifsAndVouchers/BrandVoucherTable import PaymentaVoucher from "../Pages/OptiFiiGifsAndVouchers/Payment/PaymentaVoucher"; import Profile from "../Pages/Profile/Profile"; import WalletsPullBackFunds from "../Pages/ManageHumanResource/WalletsPullBackFunds"; +import ViewReports from "../Pages/Report/ViewReports"; export const RouteLink = [ { path: "/", Component: Dashbaord }, { path: "/expenses", Component: Expenses }, @@ -58,6 +59,7 @@ export const RouteLink = [ { path: "/optiFii-benefit", Component: OptiFiiExpenseDashboard }, { path: "/optiFii-vouchers", Component: OptiFiiGifsAndVouchers }, { path: "/reports", Component: Report }, + { path: "/reports/view-report", Component: ViewReports }, { path: "/support-ticket", Component: SupportAndTicket }, { path: "/settings", Component: Settings }, { path: "/department", Component: Department },