Compare commits
No commits in common. "8b759c3fb3f535fa515ca2b00899c16e1e8e4932" and "33ff3d5cc71fb68b516a8db91d5931baa2f905da" have entirely different histories.
8b759c3fb3
...
33ff3d5cc7
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<!-- Favicon pointing to local file -->
|
<!-- Favicon pointing to local file -->
|
||||||
<!-- <link rel="icon" href="/favicon.ico" /> -->
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
|
|
@ -28,17 +28,10 @@
|
||||||
|
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-color: #f9fff6;
|
background-color: #E9ECFF;
|
||||||
background-image: url('../src/assets/Image/Pattern.png');
|
font-family: Manrope;
|
||||||
background-size: cover;
|
}
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
background-position: center;
|
|
||||||
background-blend-mode: overlay;
|
|
||||||
font-family: Manrope;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.hideonmobile {
|
.hideonmobile {
|
||||||
|
|
@ -60,7 +53,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<title>PaisaVara</title>
|
<title>Ezhisab</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 530 B |
Binary file not shown.
|
Before Width: | Height: | Size: 456 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 751 B |
|
|
@ -128,7 +128,6 @@ body {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -136,7 +135,6 @@ body {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -144,7 +142,6 @@ body {
|
||||||
font-family: "Manrope";
|
font-family: "Manrope";
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
color: #002300;
|
color: #002300;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
|
|
@ -229,7 +226,7 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
gap:10px;
|
gap:120px;
|
||||||
}
|
}
|
||||||
.avatar {
|
.avatar {
|
||||||
|
|
||||||
|
|
@ -296,16 +293,14 @@ body {
|
||||||
}
|
}
|
||||||
.nav-menu-drop {
|
.nav-menu-drop {
|
||||||
white-space: nowrap; /* Prevent wrapping */
|
white-space: nowrap; /* Prevent wrapping */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu-drop {
|
.nav-menu-drop {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 80%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* margin-left: 140px; */
|
|
||||||
top: 100%; /* Positions dropdown below the parent */
|
top: 100%; /* Positions dropdown below the parent */
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|
@ -323,7 +318,7 @@ body {
|
||||||
color: #002300;
|
color: #002300;
|
||||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
width: auto;
|
width: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
|
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
|
||||||
|
|
@ -361,14 +356,11 @@ body {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
/* Grid system */
|
/* Grid system */
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 40px;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.col-2 {
|
.col-2 {
|
||||||
flex: 0 0 16.6667%;
|
flex: 0 0 16.6667%;
|
||||||
|
|
@ -503,7 +495,7 @@ body {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.search-container input::placeholder {
|
.search-container input::placeholder {
|
||||||
color: #ffffff;
|
color: #a9a9a9;
|
||||||
}
|
}
|
||||||
.search-container input:focus {
|
.search-container input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -629,16 +621,10 @@ body {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-color: #4545db;
|
background-color: #4545db;
|
||||||
border-color: #4545db;
|
border-color: #4545db;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
.form-check-input[type="radio"] {
|
.form-check-input[type="radio"] {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-check-input[type=checkbox] {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-button {
|
.filter-button {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -725,13 +711,12 @@ h3 {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 60px;
|
||||||
background-color: #FFAF32;
|
background-color: #007bff;
|
||||||
color: rgb(0, 0, 0);
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* transition: background-color 0.3s; */
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expense-searchcontainerstart {
|
.expense-searchcontainerstart {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import "./Invoice.css";
|
import "./Invoice.css";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import { DatePicker } from "antd";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
|
|
||||||
|
|
@ -19,20 +18,15 @@ const ATMDepositTable = (props) => {
|
||||||
const [vendors, setVendors] = useState([]);
|
const [vendors, setVendors] = useState([]);
|
||||||
const [fromDate, setFromDate] = useState("");
|
const [fromDate, setFromDate] = useState("");
|
||||||
const [toDate, setToDate] = useState("");
|
const [toDate, setToDate] = useState("");
|
||||||
const [dateRange, setDateRange] = useState([]);
|
|
||||||
|
|
||||||
|
|
||||||
const { Get, Delete } = useApi();
|
const { Get, Delete } = useApi();
|
||||||
|
|
||||||
|
|
||||||
function filterByTransactionType(dataArray, transactionType) {
|
function filterByTransactionType(dataArray, transactionType) {
|
||||||
return dataArray.filter(record => record.transaction_type === transactionType);
|
return dataArray.filter(record => record.transaction_type === transactionType);
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchInvoices = async () => {
|
const fetchInvoices = async () => {
|
||||||
await Get("transactionData")
|
await Get("transactionData")
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
let type = (props.transaction_type) ? props.transaction_type : "Bank Deposit";
|
let type = (props.transaction_type)?props.transaction_type:"Bank Deposit";
|
||||||
setInvoices(filterByTransactionType(response, type));
|
setInvoices(filterByTransactionType(response, type));
|
||||||
const uniqueVendors = [
|
const uniqueVendors = [
|
||||||
...new Set(response.map((invoice) => invoice.vendor_department_name)),
|
...new Set(response.map((invoice) => invoice.vendor_department_name)),
|
||||||
|
|
@ -45,39 +39,31 @@ const ATMDepositTable = (props) => {
|
||||||
};
|
};
|
||||||
fetchInvoices();
|
fetchInvoices();
|
||||||
}, [props.reloadData]);
|
}, [props.reloadData]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let filteredInvoices = invoices;
|
|
||||||
|
|
||||||
// Filter by date range
|
|
||||||
if (dateRange.length === 2) {
|
|
||||||
const [start, end] = dateRange;
|
|
||||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
|
||||||
const invoiceDate = new Date(invoice.date);
|
|
||||||
return invoiceDate >= start && invoiceDate <= end;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setInvoices(filteredInvoices);
|
|
||||||
}, [dateRange, invoices]);
|
|
||||||
|
|
||||||
const applyFilters = () => {
|
const applyFilters = () => {
|
||||||
let filteredInvoices = invoices;
|
let filteredInvoices = invoices;
|
||||||
|
|
||||||
// Apply status filter
|
|
||||||
if (selectedStatus !== "All") {
|
if (selectedStatus !== "All") {
|
||||||
filteredInvoices = filteredInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.status === selectedStatus
|
(invoice) => invoice.status === selectedStatus
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply vendor filter
|
|
||||||
if (selectedVendor) {
|
if (selectedVendor) {
|
||||||
filteredInvoices = filteredInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (fromDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (toDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
setInvoices(filteredInvoices);
|
setInvoices(filteredInvoices);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -132,37 +118,37 @@ const ATMDepositTable = (props) => {
|
||||||
};
|
};
|
||||||
const handleDelete = async (id) => {
|
const handleDelete = async (id) => {
|
||||||
const result = await Swal.fire({
|
const result = await Swal.fire({
|
||||||
title: "Are you sure?",
|
title: "Are you sure?",
|
||||||
text: "You won't be able to revert this!",
|
text: "You won't be able to revert this!",
|
||||||
icon: "warning",
|
icon: "warning",
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
confirmButtonColor: "#d33",
|
confirmButtonColor: "#d33",
|
||||||
cancelButtonColor: "#3085d6",
|
cancelButtonColor: "#3085d6",
|
||||||
confirmButtonText: "Yes, delete it!",
|
confirmButtonText: "Yes, delete it!",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Check if the user clicked the confirm button
|
// Check if the user clicked the confirm button
|
||||||
if (!result.isConfirmed) return; // Exit if the user cancels
|
if (!result.isConfirmed) return; // Exit if the user cancels
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await Delete(`transactionData`, id);
|
await Delete(`transactionData`, id);
|
||||||
|
|
||||||
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
|
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
|
||||||
setInvoices(updatedInvoices);
|
setInvoices(updatedInvoices);
|
||||||
|
|
||||||
// Show success notification
|
// Show success notification
|
||||||
toast.success("Invoice successfully deleted!");
|
toast.success("Invoice successfully deleted!");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
toast.error(`Error deleting invoice: ${error.response.data}`);
|
toast.error(`Error deleting invoice: ${error.response.data}`);
|
||||||
toast.error(`Status code: ${error.response.status}`);
|
toast.error(`Status code: ${error.response.status}`);
|
||||||
} else if (error.request) {
|
} else if (error.request) {
|
||||||
toast.error("No response received");
|
toast.error("No response received");
|
||||||
} else {
|
} else {
|
||||||
toast.error(`Error setting up request: ${error.message}`);
|
toast.error(`Error setting up request: ${error.message}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleEdit = (invoice) => {
|
const handleEdit = (invoice) => {
|
||||||
|
|
@ -264,7 +250,7 @@ const ATMDepositTable = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pagination">
|
<div className="pagination">
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handlePrevPage}
|
onClick={handlePrevPage}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
|
|
@ -278,11 +264,11 @@ const ATMDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
|
|
||||||
{paginationItems}
|
{paginationItems}
|
||||||
|
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handleNextPage}
|
onClick={handleNextPage}
|
||||||
disabled={currentPage === totalPages}
|
disabled={currentPage === totalPages}
|
||||||
|
|
@ -296,99 +282,19 @@ const ATMDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: "16px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
margin: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Invoice due this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff8e6",
|
|
||||||
border: "1px solid #ffd700",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$19,864,63,521
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="searchcontainer">
|
<div className="searchcontainer">
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ width: "300px", height: "50px" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -427,8 +333,8 @@ const ATMDepositTable = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
{/* <div
|
<div
|
||||||
className="filtercontainer"
|
className="filtercontainer"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#f4f4f4",
|
backgroundColor: "#f4f4f4",
|
||||||
|
|
@ -478,7 +384,7 @@ const ATMDepositTable = (props) => {
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
|
|
@ -564,7 +470,7 @@ const ATMDepositTable = (props) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<div className="mb-2">
|
<div className="mb-2">
|
||||||
<select
|
<select
|
||||||
id="selectStatus"
|
id="selectStatus"
|
||||||
className="form-select"
|
className="form-select"
|
||||||
|
|
@ -604,7 +510,7 @@ const ATMDepositTable = (props) => {
|
||||||
className="row col-md-12"
|
className="row col-md-12"
|
||||||
style={{ width: "100%", justifyContent: "space-around" }}
|
style={{ width: "100%", justifyContent: "space-around" }}
|
||||||
>
|
>
|
||||||
{/* <div className="col-5">
|
<div className="col-5">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
borderRadius: "60px",
|
borderRadius: "60px",
|
||||||
|
|
@ -631,7 +537,7 @@ const ATMDepositTable = (props) => {
|
||||||
value={toDate}
|
value={toDate}
|
||||||
onChange={(e) => setToDate(e.target.value)}
|
onChange={(e) => setToDate(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div> */}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="text-center mt-2">
|
<li className="text-center mt-2">
|
||||||
|
|
@ -646,21 +552,14 @@ const ATMDepositTable = (props) => {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Date Filters using Ant Design RangePicker */}
|
|
||||||
<div>
|
|
||||||
<DatePicker.RangePicker
|
|
||||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
|
||||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
<table className="table table-borderless table-responsive">
|
<table className="table table-borderless table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
|
{["date", "bank_deposite_type", "amount","Transaction Type", "actions"].map(
|
||||||
(header, index) => (
|
(header, index) => (
|
||||||
<th
|
<th
|
||||||
key={header}
|
key={header}
|
||||||
|
|
@ -668,10 +567,12 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: index === 0 ? "30px" : "0",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||||
|
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||||
|
borderTopRightRadius: index === 4 ? "60px" : "0",
|
||||||
|
borderBottomRightRadius: index === 4 ? "60px" : "0",
|
||||||
textAlign: "start",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
backgroundColor:'#282e26',
|
|
||||||
color:'#ffffff'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{header
|
{header
|
||||||
|
|
@ -709,49 +610,49 @@ const ATMDepositTable = (props) => {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody style={{ textAlign: "center" }}>
|
<tbody style={{ textAlign: "center" }}>
|
||||||
{currentInvoices.length !== 0 ?
|
{currentInvoices.length !== 0?
|
||||||
currentInvoices.map((invoice) => (
|
currentInvoices.map((invoice) => (
|
||||||
<tr key={invoice.id}>
|
<tr key={invoice.id}>
|
||||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
{invoice.date}
|
{invoice.date}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||||
{invoice.bank_deposite_type
|
{invoice.bank_deposite_type
|
||||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||||
invoice.bank_deposite_type.slice(1)
|
invoice.bank_deposite_type.slice(1)
|
||||||
: "N/A"}
|
: "N/A"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||||
<td style={{ textAlign: 'left' }}>
|
<td style={{ textAlign: 'left' }}>
|
||||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||||
{invoice.transaction_type ?
|
{invoice.transaction_type ?
|
||||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||||
'N/A'}
|
'N/A'}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="dropdown">
|
<div className="dropdown">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-outline-secondary dropdown-vertical "
|
className="btn btn-sm btn-outline-secondary dropdown-vertical "
|
||||||
type="button"
|
type="button"
|
||||||
id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
|
id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
|
||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
|
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
className="bi bi-three-dots"
|
className="bi bi-three-dots"
|
||||||
style={{ transform: "rotate(90deg)", display: "block" }}
|
style={{ transform: "rotate(90deg)", display: "block" }}
|
||||||
></i>
|
></i>
|
||||||
</button>
|
</button>
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu"
|
className="dropdown-menu"
|
||||||
aria-labelledby={`actionDropdown-${invoice.id}`}
|
aria-labelledby={`actionDropdown-${invoice.id}`}
|
||||||
>
|
>
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<a
|
<a
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() => handleEdit(invoice)}
|
onClick={() => handleEdit(invoice)}
|
||||||
|
|
@ -759,34 +660,34 @@ const ATMDepositTable = (props) => {
|
||||||
Edit
|
Edit
|
||||||
</a>
|
</a>
|
||||||
</li> */}
|
</li> */}
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
onClick={() => handleDelete(invoice.id)}
|
onClick={() => handleDelete(invoice.id)}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
|
|
||||||
: (
|
:(
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan="7" style={{
|
<td colSpan="7" style={{
|
||||||
textAlign: "center", fontFamily: 'Manrope',
|
textAlign: "center", fontFamily: 'Manrope',
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
fontSize: '40px',
|
fontSize: '40px',
|
||||||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
||||||
WebkitBackgroundClip: 'text',
|
WebkitBackgroundClip: 'text',
|
||||||
WebkitTextFillColor: 'transparent',
|
WebkitTextFillColor: 'transparent',
|
||||||
}}>
|
}}>
|
||||||
No data found
|
No data found
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -819,8 +720,8 @@ const getPaymentMethodStyle = (method) => ({
|
||||||
const statusStyles = {
|
const statusStyles = {
|
||||||
All: { backgroundColor: "#4545DB" },
|
All: { backgroundColor: "#4545DB" },
|
||||||
"Business cash": { backgroundColor: "#38400B" },
|
"Business cash": { backgroundColor: "#38400B" },
|
||||||
"Lottery cash": { backgroundColor: "#CAC59D" },
|
"Lottery cash": { backgroundColor: "#CAC59D" },
|
||||||
"Gas cash": { backgroundColor: "#57A09C" },
|
"Gas cash": { backgroundColor: "#57A09C" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusStyle = (status) => ({
|
const getStatusStyle = (status) => ({
|
||||||
|
|
|
||||||
|
|
@ -9,8 +9,6 @@ import TableComponent from "./InvoiceTable";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
||||||
import AddVendorModal from "../../ReusableForm/AddVendorModal";
|
import AddVendorModal from "../../ReusableForm/AddVendorModal";
|
||||||
import { colors } from "@mui/material";
|
|
||||||
import { Space } from "antd";
|
|
||||||
|
|
||||||
function AddInvoice() {
|
function AddInvoice() {
|
||||||
const { Get, Post } = useApi();
|
const { Get, Post } = useApi();
|
||||||
|
|
@ -271,7 +269,7 @@ function AddInvoice() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 1,
|
row: 1,
|
||||||
column: "col-md-4",
|
column: "col-md-5",
|
||||||
label: "Vendor",
|
label: "Vendor",
|
||||||
type: "select-vendor",
|
type: "select-vendor",
|
||||||
name: "vendor_department_name",
|
name: "vendor_department_name",
|
||||||
|
|
@ -280,7 +278,7 @@ function AddInvoice() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 1,
|
row: 1,
|
||||||
column: "col-md-2",
|
column: "col-md-5",
|
||||||
label: "Invoice Number",
|
label: "Invoice Number",
|
||||||
type: "invoice_no",
|
type: "invoice_no",
|
||||||
name: "invoice_no",
|
name: "invoice_no",
|
||||||
|
|
@ -288,18 +286,9 @@ function AddInvoice() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 2,
|
row: 2,
|
||||||
column: "col-md-3",
|
column: "col-md-12",
|
||||||
label: "Amount",
|
|
||||||
name: "amount",
|
|
||||||
type: "prefix-input",
|
|
||||||
placeholder: "Amount",
|
|
||||||
// prefixText: "USD",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
row: 2,
|
|
||||||
column: "col-md-5",
|
|
||||||
name: "pay_method_status",
|
name: "pay_method_status",
|
||||||
// label: "Payment Method:",
|
label: "Payment Method:",
|
||||||
type: "radio",
|
type: "radio",
|
||||||
options: [
|
options: [
|
||||||
{ value: "pay_later", label: "Pay Later" },
|
{ value: "pay_later", label: "Pay Later" },
|
||||||
|
|
@ -308,20 +297,20 @@ function AddInvoice() {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 4,
|
row: 3,
|
||||||
column: "col-md-6",
|
column: "col-md-12",
|
||||||
label: "Payment Method Options",
|
label: "Payment Method Options",
|
||||||
type: "payment-method-options",
|
type: "payment-method-options",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 4,
|
row: 4,
|
||||||
column: "col-md-6",
|
column: "col-md-12",
|
||||||
label: "Payment Method Options",
|
label: "Payment Method Options",
|
||||||
type: "pay-bank-options",
|
type: "pay-bank-options",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 5,
|
row: 4,
|
||||||
column: "col-md-3",
|
column: "col-md-6",
|
||||||
label: "Due Days",
|
label: "Due Days",
|
||||||
type: "select-dueDays",
|
type: "select-dueDays",
|
||||||
name: "due_days",
|
name: "due_days",
|
||||||
|
|
@ -331,14 +320,14 @@ function AddInvoice() {
|
||||||
// The "Notes" field is conditionally rendered based on pay_method_status
|
// The "Notes" field is conditionally rendered based on pay_method_status
|
||||||
...(formData.pay_method_status !== "pay_now"
|
...(formData.pay_method_status !== "pay_now"
|
||||||
? [
|
? [
|
||||||
// {
|
{
|
||||||
// row: 5,
|
row: 5,
|
||||||
// column: "col-md-6",
|
column: "col-md-6",
|
||||||
// label: "Notes",
|
label: "Notes",
|
||||||
// type: "text",
|
type: "text",
|
||||||
// name: "note",
|
name: "note",
|
||||||
// placeholder: "Notes",
|
placeholder: "Notes",
|
||||||
// },
|
},
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
{
|
{
|
||||||
|
|
@ -348,7 +337,15 @@ function AddInvoice() {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "prepaid_tax",
|
name: "prepaid_tax",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
row: 6,
|
||||||
|
column: "col-md-6",
|
||||||
|
label: "Amount",
|
||||||
|
name: "amount",
|
||||||
|
type: "prefix-input",
|
||||||
|
placeholder: "Amount",
|
||||||
|
prefixText: "USD",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const paymentMethodOptions = [
|
const paymentMethodOptions = [
|
||||||
|
|
@ -385,7 +382,7 @@ function AddInvoice() {
|
||||||
setIsOpen(false); // Close the dropdown after clicking a link
|
setIsOpen(false); // Close the dropdown after clicking a link
|
||||||
|
|
||||||
navigate(path); // Navigate to the clicked path
|
navigate(path); // Navigate to the clicked path
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderField = (field) => {
|
const renderField = (field) => {
|
||||||
|
|
@ -450,16 +447,15 @@ function AddInvoice() {
|
||||||
borderBottom: "1px solid #f4f4f4",
|
borderBottom: "1px solid #f4f4f4",
|
||||||
paddingBottom: "16px",
|
paddingBottom: "16px",
|
||||||
height: "50px",
|
height: "50px",
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-groups">
|
<div className="input-group">
|
||||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
{field.prefixText}
|
{field.prefixText}
|
||||||
</span> */}
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text" // Set input type to 'text' to allow decimals
|
type="text" // Set input type to 'text' to allow decimals
|
||||||
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
|
style={{ border: "none" }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name={field.name}
|
name={field.name}
|
||||||
placeholder={field.placeholder}
|
placeholder={field.placeholder}
|
||||||
|
|
@ -582,69 +578,54 @@ function AddInvoice() {
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
case "radio":
|
case "radio":
|
||||||
return (
|
return (
|
||||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
<div className="form-group d-flex">
|
||||||
<label className="me-4">{field.label}</label>
|
<label className="me-4">{field.label}</label>
|
||||||
{field.options.map((option, index) => (
|
{field.options.map((option, index) => (
|
||||||
<div
|
<div key={index} className="form-check me-4">
|
||||||
key={index}
|
{" "}
|
||||||
className="form-check me-4"
|
<input
|
||||||
style={{
|
type="radio"
|
||||||
cursor: 'pointer',
|
className="form-check-input"
|
||||||
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
|
name={field.name}
|
||||||
padding: '5px 15px', // Add padding for better appearance
|
value={option.value}
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
checked={formData[field.name] === option.value}
|
||||||
}}
|
onChange={handlePaymentMethodChange}
|
||||||
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
|
/>
|
||||||
>
|
<label className="form-check-label">{option.label}</label>
|
||||||
<label
|
</div>
|
||||||
className="form-check-label"
|
))}
|
||||||
style={{
|
</div>
|
||||||
fontWeight: 'normal',
|
);
|
||||||
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
|
|
||||||
}}
|
case "payment-method-options":
|
||||||
>
|
return (
|
||||||
{option.label}
|
formData.pay_method_status === "pay_now" && (
|
||||||
</label>
|
<div className="form-group d-flex">
|
||||||
|
{/* Align items vertically */}
|
||||||
|
<label className="me-4">Payment Method Options:</label>{" "}
|
||||||
|
{/* Extra space after the main label */}
|
||||||
|
{paymentMethodOptions.map((option, index) => (
|
||||||
|
<div key={index} className="form-check me-4">
|
||||||
|
{" "}
|
||||||
|
{/* Space between options */}
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="form-check-input"
|
||||||
|
name="pay_method"
|
||||||
|
value={option.value}
|
||||||
|
checked={formData.pay_method === option.value}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">{option.label}</label>{" "}
|
||||||
|
{/* Space between radio and label */}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
|
);
|
||||||
|
|
||||||
case "payment-method-options":
|
|
||||||
return (
|
|
||||||
formData.pay_method_status === "pay_now" && (
|
|
||||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
|
||||||
{paymentMethodOptions.map((option, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="form-check me-4"
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
|
|
||||||
padding: '5px 25px', // Add padding for better appearance
|
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
|
||||||
}}
|
|
||||||
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="form-check-label"
|
|
||||||
style={{
|
|
||||||
fontWeight: 'normal',
|
|
||||||
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
case "checkbox":
|
case "checkbox":
|
||||||
return (
|
return (
|
||||||
<div className="form-check">
|
<div className="form-check">
|
||||||
|
|
@ -659,47 +640,47 @@ function AddInvoice() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
case "pay-bank-options":
|
case "pay-bank-options":
|
||||||
return (
|
return (
|
||||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
(formData.pay_method === "cheque" ||
|
||||||
<div className="row align-items-center">
|
formData.pay_method === "bank") && (
|
||||||
<div className="col-md-4">
|
<div className="row mb-3">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="form-group">
|
||||||
|
<select
|
||||||
|
required
|
||||||
|
className="form-control-borderless"
|
||||||
|
name="bank"
|
||||||
|
value={formData.bank}
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<option value="">Select Bank</option>
|
||||||
|
{banks.map((bank) => (
|
||||||
|
<option key={bank.id} value={bank.id}>
|
||||||
|
{bank.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque
|
||||||
|
<div className="col-md-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<select
|
<input
|
||||||
required
|
required
|
||||||
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="bank"
|
name="cheque_no"
|
||||||
value={formData.bank}
|
placeholder="Enter Cheque Number"
|
||||||
|
value={formData.cheque_no}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
>
|
maxLength={20}
|
||||||
<option value="">Select Bank</option>
|
/>
|
||||||
{banks.map((bank) => (
|
|
||||||
<option key={bank.id} value={bank.id}>
|
|
||||||
{bank.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
{formData.pay_method === "cheque" && (
|
<div className="col-md-12">
|
||||||
<div className="col-md-4">
|
|
||||||
<div className="form-group">
|
|
||||||
<input
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
className="form-control-borderless"
|
|
||||||
name="cheque_no"
|
|
||||||
placeholder="Cheque Number"
|
|
||||||
value={formData.cheque_no}
|
|
||||||
onChange={handleChange}
|
|
||||||
maxLength={20}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<input
|
<input
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -709,9 +690,7 @@ function AddInvoice() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -723,127 +702,117 @@ function AddInvoice() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
|
||||||
Add Invoice
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
|
||||||
>
|
|
||||||
Pay Invoice
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
|
||||||
>
|
|
||||||
Bank Deposit
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
|
||||||
>
|
|
||||||
ATM Deposit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="formcontainer">
|
|
||||||
<div
|
|
||||||
className="container"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "white",
|
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
|
||||||
borderRadius: "40px"
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
Add Invoice
|
||||||
|
</button>
|
||||||
{/* Render Fields */}
|
<button
|
||||||
{Object.keys(groupedFields).map((rowKey) => (
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
<div className="row mb-3" key={rowKey}>
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
{groupedFields[rowKey].map((field, index) => (
|
>
|
||||||
<div key={index} className={field.column}>
|
Pay Invoice
|
||||||
{renderField(field)}
|
</button>
|
||||||
</div>
|
<button
|
||||||
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
))}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
|
>
|
||||||
</div>
|
Bank Deposit
|
||||||
|
</button>
|
||||||
))}
|
<button
|
||||||
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
{/* Prepaid Tax Field */}
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
{formData.prepaid_tax && (
|
>
|
||||||
<div className="row mb-3">
|
ATM Deposit
|
||||||
<div className="col-md-6">
|
</button>
|
||||||
<div className="form-group">
|
|
||||||
{/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control-borderless"
|
|
||||||
name="prepaid_amount"
|
|
||||||
id="prepaid_amount"
|
|
||||||
placeholder="Enter Prepaid Tax"
|
|
||||||
value={formData.prepaid_amount}
|
|
||||||
onChange={handleChange}
|
|
||||||
onInput={(e) => {
|
|
||||||
// Allow only numbers and one decimal point with two digits after it
|
|
||||||
e.target.value = e.target.value
|
|
||||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
|
||||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
|
|
||||||
.slice(0, 12); // Limit input length
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="">
|
|
||||||
{/* Action Buttons */}
|
|
||||||
<div className="d-flex justify-content-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-contained me-2"
|
|
||||||
onClick={handleCancel}
|
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<ToastContainer />
|
<div className="formcontainer">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="container mt-5"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TableComponent reloadData={reloadData} />
|
<form onSubmit={handleSubmit}>
|
||||||
<AddVendorModal
|
<div className="">
|
||||||
show={showModal}
|
{/* Action Buttons */}
|
||||||
handleClose={handleClose}
|
<div className="d-flex justify-content-end">
|
||||||
onVendorAdded={handleVendorAdded}
|
<button
|
||||||
/>
|
type="button"
|
||||||
</div>
|
className="btn btn-contained me-2"
|
||||||
|
onClick={handleCancel}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Render Fields */}
|
||||||
|
{Object.keys(groupedFields).map((rowKey) => (
|
||||||
|
<div className="row mb-3" key={rowKey}>
|
||||||
|
{groupedFields[rowKey].map((field, index) => (
|
||||||
|
<div key={index} className={field.column}>
|
||||||
|
{renderField(field)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Prepaid Tax Field */}
|
||||||
|
{formData.prepaid_tax && (
|
||||||
|
<div className="row mb-3">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="prepaid_amount">Prepaid Tax</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control-borderless"
|
||||||
|
name="prepaid_amount"
|
||||||
|
id="prepaid_amount"
|
||||||
|
placeholder="Enter Prepaid Tax"
|
||||||
|
value={formData.prepaid_amount}
|
||||||
|
onChange={handleChange}
|
||||||
|
onInput={(e) => {
|
||||||
|
// Allow only numbers and one decimal point with two digits after it
|
||||||
|
e.target.value = e.target.value
|
||||||
|
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||||
|
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
|
||||||
|
.slice(0, 12); // Limit input length
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
|
<ToastContainer />
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="container mt-5"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "white",
|
||||||
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TableComponent reloadData={reloadData} />
|
||||||
|
<AddVendorModal
|
||||||
|
show={showModal}
|
||||||
|
handleClose={handleClose}
|
||||||
|
onVendorAdded={handleVendorAdded}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default AddInvoice;
|
export default AddInvoice;
|
||||||
|
|
@ -17,13 +17,13 @@ function AtmDeposit() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
||||||
|
|
||||||
const [activeButton, setActiveButton] = useState('');
|
const [activeButton, setActiveButton] = useState('');
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveButton(location.pathname); // Set the active button based on the current location
|
setActiveButton(location.pathname); // Set the active button based on the current location
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [banks, setBanks] = useState([]);
|
const [banks, setBanks] = useState([]);
|
||||||
|
|
@ -148,47 +148,61 @@ function AtmDeposit() {
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
>
|
>
|
||||||
Bank Deposit
|
Bank Deposit
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
>
|
>
|
||||||
ATM Deposit
|
ATM Deposit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
<div
|
<div
|
||||||
className="container"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
borderRadius: "40px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="">
|
||||||
|
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-contained me-2"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className=" col-md-12 row mb-3">
|
<div className="col-md-12 row mb-3">
|
||||||
<div className="col-md-4 mb-3">
|
<div className="mb-3 col-md-4">
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -198,44 +212,6 @@ function AtmDeposit() {
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-3 mb-3">
|
|
||||||
<select
|
|
||||||
className="form-select custom-select"
|
|
||||||
id="bank_deposite_type"
|
|
||||||
name="bank_deposite_type"
|
|
||||||
value={formData.bank_deposite_type}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<option value="">Select a type</option>
|
|
||||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
|
||||||
<option key={type} value={type}>
|
|
||||||
{type}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
|
|
||||||
<div className="input-group" style={{ width: "100%" }}>
|
|
||||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
|
||||||
USD
|
|
||||||
</span> */}
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
|
|
||||||
className="form-control-borderless"
|
|
||||||
name="cash_amount"
|
|
||||||
placeholder="Amount"
|
|
||||||
value={formData.cash_amount}
|
|
||||||
onChange={handleChange}
|
|
||||||
onInput={(e) => {
|
|
||||||
e.target.value = e.target.value
|
|
||||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
|
||||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
|
||||||
.slice(0, 12); // Limit input length
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-3 col-md-4">
|
<div className="mb-3 col-md-4">
|
||||||
<input
|
<input
|
||||||
|
|
@ -249,9 +225,31 @@ function AtmDeposit() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-3 row">
|
<div className="col-md-12 row">
|
||||||
|
<div className="mb-3 col-md-12" style={{ marginLeft: "10px" }}>
|
||||||
|
<div className="d-flex flex-row">
|
||||||
|
Type:
|
||||||
|
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||||
|
<div className="form-check me-3" key={type}>
|
||||||
|
<input
|
||||||
|
className="form-check-input"
|
||||||
|
type="radio"
|
||||||
|
name="bank_deposite_type"
|
||||||
|
id={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
value={type}
|
||||||
|
checked={formData.bank_deposite_type === type}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/* <div className="mb-3 mt-2 col-md-4 ">
|
{/* <div className="mb-3 mt-2 col-md-4 ">
|
||||||
<select
|
<select
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -269,22 +267,37 @@ function AtmDeposit() {
|
||||||
</select>
|
</select>
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
<div className="">
|
className="form-group col-md-5 mt-3"
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
<div className="d-flex justify-content-end">
|
alignItems: "center",
|
||||||
<button
|
borderBottom: "1px solid #f4f4f4",
|
||||||
type="button"
|
paddingBottom: "16px",
|
||||||
className="btn btn-contained me-2"
|
height: "50px",
|
||||||
onClick={() => navigate("/")}
|
}}
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
>
|
||||||
>
|
<div className="input-group">
|
||||||
Cancel
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
</button>
|
USD
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
</span>
|
||||||
Save
|
<input
|
||||||
</button>
|
type="number"
|
||||||
|
style={{ border: "none" }}
|
||||||
|
className="form-control-borderless"
|
||||||
|
name="cash_amount"
|
||||||
|
placeholder="Amount"
|
||||||
|
value={formData.cash_amount}
|
||||||
|
onChange={handleChange}
|
||||||
|
onInput={(e) => {
|
||||||
|
// Allow only numbers and a decimal point with two digits after it
|
||||||
|
e.target.value = e.target.value
|
||||||
|
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||||
|
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||||
|
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||||
|
}}
|
||||||
|
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -297,7 +310,7 @@ function AtmDeposit() {
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,13 @@ function BankDeposit() {
|
||||||
const { Get, Post } = useApi();
|
const { Get, Post } = useApi();
|
||||||
const storeid = user.store;
|
const storeid = user.store;
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [activeButton, setActiveButton] = useState('');
|
const [activeButton, setActiveButton] = useState('');
|
||||||
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [reloadData, setReloadData] = useState(false);
|
const [reloadData, setReloadData] = useState(false);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveButton(location.pathname); // Set the active button based on the current location
|
setActiveButton(location.pathname); // Set the active button based on the current location
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
@ -156,46 +156,57 @@ function BankDeposit() {
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
>
|
>
|
||||||
Bank Deposit
|
Bank Deposit
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
>
|
>
|
||||||
ATM Deposit
|
ATM Deposit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
<div
|
<div
|
||||||
className="container"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
|
||||||
borderRadius: "40px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="">
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-contained me-2"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="col-md-12 row mb-3">
|
<div className="col-md-12 row mb-3">
|
||||||
<div className="mb-3 col-md-4">
|
<div className="mb-3 col-md-4">
|
||||||
|
|
@ -224,73 +235,93 @@ function BankDeposit() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3 col-md-3">
|
<div className="mb-3 col-md-4">
|
||||||
<select
|
<input
|
||||||
className="form-select custom-select"
|
type="text"
|
||||||
id="bank_deposite_type"
|
className="form-control-borderless"
|
||||||
name="bank_deposite_type"
|
name="note"
|
||||||
value={formData.bank_deposite_type}
|
value={formData.note}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
>
|
placeholder="Notes"
|
||||||
<option value="" enable>
|
/>
|
||||||
Select a type
|
|
||||||
</option>
|
|
||||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
|
||||||
<option key={type} value={type}>
|
|
||||||
{type}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-12 row">
|
||||||
<div
|
<div className="mb-3 col-md-12">
|
||||||
className="col-md-12"
|
<div className="d-flex flex-row">
|
||||||
style={{
|
Type:
|
||||||
display: "flex",
|
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||||
alignItems: "center",
|
<div className="form-check me-3" key={type}>
|
||||||
justifyContent: "space-between", // Adjust spacing between items
|
<input
|
||||||
gap: "50px", // Add gap for consistent spacing
|
className="form-check-input"
|
||||||
}}
|
type="radio"
|
||||||
>
|
name="bank_deposite_type"
|
||||||
|
id={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
value={type}
|
||||||
|
checked={formData.bank_deposite_type === type}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12 row mt-4">
|
||||||
<div
|
<div
|
||||||
className="form-group "
|
className="form-group col-md-5"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
borderBottom: "2px solid #e4e5e7",
|
borderBottom: "1px solid #f4f4f4",
|
||||||
|
paddingBottom: "16px",
|
||||||
height: "50px",
|
height: "50px",
|
||||||
flex: "1", // Allow the field to adjust in size
|
marginLeft: "10px"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
|
USD
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text" // Change to text because we want to handle the regex validation manually
|
||||||
style={{ border: "none", width: "100%" }}
|
style={{ border: "none" }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cash_amount"
|
name="cash_amount"
|
||||||
placeholder="Cash Amount"
|
placeholder="Cash Amount"
|
||||||
value={formData.cash_amount || ""}
|
value={formData.cash_amount || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
maxLength={10}
|
maxLength={10} // Limit input to 10 digits
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
className="form-group "
|
className="form-group col-md-5"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
borderBottom: "2px solid #e4e5e7",
|
borderBottom: "1px solid #f4f4f4",
|
||||||
|
paddingBottom: "16px",
|
||||||
height: "50px",
|
height: "50px",
|
||||||
flex: "1",
|
marginLeft: "10px"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
|
<span
|
||||||
|
className="input-group-text"
|
||||||
|
style={{ border: "none" }}
|
||||||
|
>
|
||||||
|
USD
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
style={{ border: "none", width: "100%" }}
|
style={{ border: "none" }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cheque_amount"
|
name="cheque_amount"
|
||||||
placeholder="Cheque Amount"
|
placeholder="Cheque Amount"
|
||||||
|
|
@ -299,48 +330,8 @@ function BankDeposit() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
className="form-group"
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
borderBottom: "2px solid #e4e5e7",
|
|
||||||
height: "50px",
|
|
||||||
flex: "1",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control-borderless"
|
|
||||||
name="note"
|
|
||||||
value={formData.note}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="Notes"
|
|
||||||
style={{
|
|
||||||
border: "none",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-contained me-2"
|
|
||||||
onClick={() => navigate("/")}
|
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import "./Invoice.css";
|
import "./Invoice.css";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import { DatePicker } from "antd";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
|
|
||||||
|
|
@ -19,8 +18,7 @@ const BankDepositTable = (props) => {
|
||||||
const [vendors, setVendors] = useState([]);
|
const [vendors, setVendors] = useState([]);
|
||||||
const [fromDate, setFromDate] = useState("");
|
const [fromDate, setFromDate] = useState("");
|
||||||
const [toDate, setToDate] = useState("");
|
const [toDate, setToDate] = useState("");
|
||||||
const [dateRange, setDateRange] = useState([]);
|
|
||||||
const { RangePicker } = DatePicker;
|
|
||||||
const { Get, Delete } = useApi();
|
const { Get, Delete } = useApi();
|
||||||
function filterByTransactionType(dataArray, transactionType) {
|
function filterByTransactionType(dataArray, transactionType) {
|
||||||
return dataArray.filter(record => record.transaction_type === transactionType);
|
return dataArray.filter(record => record.transaction_type === transactionType);
|
||||||
|
|
@ -42,46 +40,33 @@ const BankDepositTable = (props) => {
|
||||||
};
|
};
|
||||||
fetchInvoices();
|
fetchInvoices();
|
||||||
}, [props.reloadData]);
|
}, [props.reloadData]);
|
||||||
useEffect(() => {
|
const applyFilters = () => {
|
||||||
let filteredInvoices = invoices;
|
let filteredInvoices = invoices;
|
||||||
|
|
||||||
// Apply date range filter
|
|
||||||
if (dateRange.length === 2) {
|
|
||||||
const [start, end] = dateRange;
|
|
||||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
|
||||||
const invoiceDate = new Date(invoice.date);
|
|
||||||
return invoiceDate >= start && invoiceDate <= end;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply other filters on top of date filtering
|
|
||||||
applyFilters(filteredInvoices);
|
|
||||||
}, [dateRange]);
|
|
||||||
|
|
||||||
const applyFilters = (filteredInvoices = invoices) => {
|
|
||||||
let updatedInvoices = filteredInvoices;
|
|
||||||
|
|
||||||
// Apply status filter
|
|
||||||
if (selectedStatus !== "All") {
|
if (selectedStatus !== "All") {
|
||||||
updatedInvoices = updatedInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.bank_deposite_type === selectedStatus
|
(invoice) => invoice.bank_deposite_type === selectedStatus
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply vendor filter
|
|
||||||
if (selectedVendor) {
|
if (selectedVendor) {
|
||||||
updatedInvoices = updatedInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
setInvoices(updatedInvoices);
|
if (fromDate) {
|
||||||
};
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (toDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Update filters when status or vendor changes
|
setInvoices(filteredInvoices);
|
||||||
useEffect(() => {
|
};
|
||||||
applyFilters();
|
|
||||||
}, [selectedStatus, selectedVendor]);
|
|
||||||
|
|
||||||
const handleSort = (column) => {
|
const handleSort = (column) => {
|
||||||
const direction =
|
const direction =
|
||||||
|
|
@ -270,7 +255,7 @@ const BankDepositTable = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pagination">
|
<div className="pagination">
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handlePrevPage}
|
onClick={handlePrevPage}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
|
|
@ -284,11 +269,11 @@ const BankDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
|
|
||||||
{paginationItems}
|
{paginationItems}
|
||||||
|
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handleNextPage}
|
onClick={handleNextPage}
|
||||||
disabled={currentPage === totalPages}
|
disabled={currentPage === totalPages}
|
||||||
|
|
@ -302,99 +287,19 @@ const BankDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: "16px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
margin: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Invoice due this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff8e6",
|
|
||||||
border: "1px solid #ffd700",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$19,864,63,521
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center mb-3">
|
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="searchcontainer">
|
<div className="searchcontainer">
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ width: "300px", height: "50px" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -434,7 +339,7 @@ const BankDepositTable = (props) => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
{/* <div
|
<div
|
||||||
className="filtercontainer"
|
className="filtercontainer"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#f4f4f4",
|
backgroundColor: "#f4f4f4",
|
||||||
|
|
@ -484,7 +389,7 @@ const BankDepositTable = (props) => {
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
|
|
@ -606,7 +511,7 @@ const BankDepositTable = (props) => {
|
||||||
</div>
|
</div>
|
||||||
</li> */}
|
</li> */}
|
||||||
<li className="mt-2">
|
<li className="mt-2">
|
||||||
{/* <div
|
<div
|
||||||
className="row col-md-12"
|
className="row col-md-12"
|
||||||
style={{ width: "100%", justifyContent: "space-around" }}
|
style={{ width: "100%", justifyContent: "space-around" }}
|
||||||
>
|
>
|
||||||
|
|
@ -638,7 +543,7 @@ const BankDepositTable = (props) => {
|
||||||
onChange={(e) => setToDate(e.target.value)}
|
onChange={(e) => setToDate(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="text-center mt-2">
|
<li className="text-center mt-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -652,15 +557,6 @@ const BankDepositTable = (props) => {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<RangePicker
|
|
||||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
|
||||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
|
|
@ -675,8 +571,10 @@ const BankDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: index === 0 ? "30px" : "0",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
backgroundColor:'#282e26',
|
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||||
color:'#ffffff',
|
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||||
|
borderTopRightRadius: index === 5 ? "60px" : "0",
|
||||||
|
borderBottomRightRadius: index === 5 ? "60px" : "0",
|
||||||
textAlign: "start",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-radius: 40px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle::after {
|
.dropdown-toggle::after {
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
gap: 10px; /* Adjust the spacing between buttons */
|
gap: 10px; /* Adjust the spacing between buttons */
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: 44px;
|
border-radius: 20px;
|
||||||
padding: 10px 50px;
|
padding: 10px 50px;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -37,10 +37,44 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dash-drop-menu {
|
||||||
|
white-space: nowrap; /* Prevent wrapping */
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%; /* Positions dropdown below the parent */
|
||||||
|
left: 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #F6F6F6;
|
||||||
|
z-index: 1000;
|
||||||
|
border-radius: 10px;
|
||||||
|
min-width: 190px; /* Optional minimum width */
|
||||||
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-drop-menu-item {
|
||||||
|
padding: 10px 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #002300;
|
||||||
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-drop-menu-item:hover {
|
||||||
|
background-color: transparent; /* Prevent background change */
|
||||||
|
color: #002300; /* Maintain original text color */
|
||||||
|
cursor: default; /* Maintain default cursor */
|
||||||
|
}
|
||||||
|
|
||||||
.form-container {
|
.form-container {
|
||||||
width: 1328px;
|
width: 1328px;
|
||||||
height: 461px;
|
height: 461px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
|
|
@ -94,7 +128,7 @@
|
||||||
|
|
||||||
.input-group .form-control {
|
.input-group .form-control {
|
||||||
border: none;
|
border: none;
|
||||||
/* background-color: transparent; */
|
background-color: transparent;
|
||||||
outline: none; /* Removes the outline */
|
outline: none; /* Removes the outline */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -310,18 +344,3 @@ input[type="color"]:focus,
|
||||||
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
|
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* style for dropdown --> select type in bank deposite and atm deposite */
|
|
||||||
.custom-select {
|
|
||||||
border: none; /* Remove default borders */
|
|
||||||
border-bottom: 2px solid #e4e5e7; /* Add a bottom border */
|
|
||||||
border-radius: 0; /* Remove border radius for a flat look */
|
|
||||||
outline: none; /* Remove the outline on focus */
|
|
||||||
padding: 0.375rem 0.75rem; /* Adjust padding if necessary */
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select:focus {
|
|
||||||
border-bottom: 2px solid #e4e5e7; /* Change color on focus */
|
|
||||||
box-shadow: none; /* Remove any shadow */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import "./Invoice.css";
|
import "./Invoice.css";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import { DatePicker } from "antd";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
|
import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
|
||||||
|
|
@ -23,7 +23,6 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
const [fromDate, setFromDate] = useState("");
|
const [fromDate, setFromDate] = useState("");
|
||||||
const [toDate, setToDate] = useState("");
|
const [toDate, setToDate] = useState("");
|
||||||
const [originalInvoices, setOriginalInvoices] = useState([]);
|
const [originalInvoices, setOriginalInvoices] = useState([]);
|
||||||
const [dateRange, setDateRange] = useState([]);
|
|
||||||
|
|
||||||
const [reloaData, setReloadData] = useState(false);
|
const [reloaData, setReloadData] = useState(false);
|
||||||
|
|
||||||
|
|
@ -54,22 +53,6 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
fetchInvoices();
|
fetchInvoices();
|
||||||
}, [reloadData]);
|
}, [reloadData]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let filteredInvoices = originalInvoices;
|
|
||||||
|
|
||||||
// Filter by date range
|
|
||||||
if (dateRange.length === 2) {
|
|
||||||
const [start, end] = dateRange;
|
|
||||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
|
||||||
const invoiceDate = new Date(invoice.date);
|
|
||||||
return invoiceDate >= start && invoiceDate <= end;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setInvoices(filteredInvoices);
|
|
||||||
|
|
||||||
}, [dateRange, originalInvoices]);
|
|
||||||
|
|
||||||
const applyFilters = () => {
|
const applyFilters = () => {
|
||||||
let filteredInvoices = originalInvoices;
|
let filteredInvoices = originalInvoices;
|
||||||
|
|
||||||
|
|
@ -87,10 +70,22 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply date filters
|
||||||
|
if (fromDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (toDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the state with filtered invoices
|
||||||
setInvoices(filteredInvoices);
|
setInvoices(filteredInvoices);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleSort = (column) => {
|
const handleSort = (column) => {
|
||||||
const direction =
|
const direction =
|
||||||
sortOrder.column === column && sortOrder.direction === "asc"
|
sortOrder.column === column && sortOrder.direction === "asc"
|
||||||
|
|
@ -284,100 +279,15 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: "16px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
margin: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Invoice due this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff8e6",
|
|
||||||
border: "1px solid #ffd700",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$19,864,63,521
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="searchcontainer">
|
<div className="searchcontainer">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="input-group flexiblesearch"
|
className="input-group flexiblesearch"
|
||||||
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ height: "50px" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
style={{ border: "none", backgroundColor: "transparent" }}
|
style={{ border: "none", backgroundColor: "transparent" }}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
width="22"
|
width="22"
|
||||||
|
|
@ -407,20 +317,13 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
|
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex align-items-center">
|
|
||||||
|
|
||||||
<div className="date-filters d-flex justify-content-between mb-3 ">
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
<div className="d-flex align-items-center">
|
||||||
{/* <div
|
<div
|
||||||
className="filtercontainer"
|
className="filtercontainer"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#f4f4f4",
|
backgroundColor: "#f4f4f4",
|
||||||
|
|
@ -470,7 +373,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
|
|
@ -559,9 +462,8 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="mt-2">
|
<li className="mt-2">
|
||||||
{/* <div
|
<div
|
||||||
className="row col-md-12"
|
className="row col-md-12"
|
||||||
style={{ width: "100%", justifyContent: "space-around" }}
|
style={{ width: "100%", justifyContent: "space-around" }}
|
||||||
>
|
>
|
||||||
|
|
@ -593,7 +495,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
onChange={(e) => setToDate(e.target.value)}
|
onChange={(e) => setToDate(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="text-center mt-2">
|
<li className="text-center mt-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -606,17 +508,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/* Date Filters using Ant Design RangePicker */}
|
|
||||||
<div>
|
|
||||||
<DatePicker.RangePicker
|
|
||||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
|
||||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
|
|
@ -750,21 +642,21 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const paymentMethodStyles = {
|
const paymentMethodStyles = {
|
||||||
bank: { backgroundColor: "" },
|
bank: { backgroundColor: "#57A09C" },
|
||||||
"Business Cash": { backgroundColor: "" },
|
"Business Cash": { backgroundColor: "#38400B" },
|
||||||
"Credit Card": { backgroundColor: "" },
|
"Credit Card": { backgroundColor: "#28a745" },
|
||||||
cash: { backgroundColor: "" },
|
cash: { backgroundColor: "#CAC59D" },
|
||||||
cheque: { backgroundColor: "" },
|
cheque: { backgroundColor: "#38400B" },
|
||||||
pay_later: { backgroundColor: "" },
|
pay_later: { backgroundColor: "#E55477" },
|
||||||
pay_now: { backgroundColor: "" },
|
pay_now: { backgroundColor: "#A9B0F0" },
|
||||||
credit_invoice: { backgroundColor: "" },
|
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPaymentMethodStyle = (method) => ({
|
const getPaymentMethodStyle = (method) => ({
|
||||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
padding: "10px 20px",
|
padding: "10px 20px",
|
||||||
color: "#000",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
const statusStyles = {
|
const statusStyles = {
|
||||||
|
|
|
||||||
|
|
@ -334,16 +334,26 @@ function PayInvoice() {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
borderRadius:"40px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="">
|
<div className="">
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-contained me-2"
|
||||||
|
onClick={handleCancel}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" className="btn btn-primary">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 row" style={{gap:"10%"}}>
|
<div className="col-md-12 row">
|
||||||
<div className="mb-3 col-md-2" >
|
<div className="mb-3 col-md-3">
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -410,6 +420,47 @@ function PayInvoice() {
|
||||||
</select> */}
|
</select> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className="mb-3 d-flex align-items-center"
|
||||||
|
style={{ paddingLeft: "10px" }}
|
||||||
|
>
|
||||||
|
<span className="me-4">Payment Method:</span>
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="form-check-input"
|
||||||
|
name="pay_method"
|
||||||
|
value="cash"
|
||||||
|
checked={formData.pay_method === "cash"}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">Cash</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-check me-3">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="form-check-input"
|
||||||
|
name="pay_method"
|
||||||
|
value="cheque"
|
||||||
|
checked={formData.pay_method === "cheque"}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">Cheque</label>
|
||||||
|
</div>
|
||||||
|
<div className="form-check">
|
||||||
|
<input
|
||||||
|
required
|
||||||
|
type="radio"
|
||||||
|
className="form-check-input"
|
||||||
|
name="pay_method"
|
||||||
|
value="bank"
|
||||||
|
checked={formData.pay_method === "bank"}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label className="form-check-label">Bank Card (ACH/EFT)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mb-3 col-md-12 row">
|
<div className="mb-3 col-md-12 row">
|
||||||
<div className="col-md-2">
|
<div className="col-md-2">
|
||||||
<input
|
<input
|
||||||
|
|
@ -457,69 +508,8 @@ function PayInvoice() {
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mb-3 col-md-12 row mt-3">
|
||||||
<div className="col-md-3">
|
<div className="col-md-3 mt-4">
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Grand Total"
|
|
||||||
value={grandTotal || ""}
|
|
||||||
readOnly
|
|
||||||
style={{
|
|
||||||
border: 'none', // Remove all borders
|
|
||||||
backgroundColor:'transparent',
|
|
||||||
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
|
|
||||||
|
|
||||||
outline: 'none', // Remove outline
|
|
||||||
padding: '6px 0', // Optional: Add padding to the top and bottom
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
className=" d-flex align-items-center"
|
|
||||||
style={{
|
|
||||||
border: '2px solid #ACB4AA',
|
|
||||||
padding: '5px 40px',
|
|
||||||
width: 'fit-content',
|
|
||||||
borderRadius: '40px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{['cash', 'cheque', 'bank'].map((method) => (
|
|
||||||
<div className="me-3" key={method}>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="form-check-input"
|
|
||||||
name="pay_method"
|
|
||||||
value={method}
|
|
||||||
checked={formData.pay_method === method}
|
|
||||||
onChange={handleChange}
|
|
||||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
|
||||||
style={{ display: 'none' }} // Hide the actual radio button
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label cursor-pointer"
|
|
||||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
|
||||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
|
||||||
style={{
|
|
||||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
|
||||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
|
||||||
padding: '5px 25px', // Add padding for better appearance
|
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="">
|
|
||||||
{/* <div className="col-md-3 mt-4">
|
|
||||||
<input
|
<input
|
||||||
name="after_discount"
|
name="after_discount"
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -529,14 +519,22 @@ function PayInvoice() {
|
||||||
placeholder="After Discount Amount"
|
placeholder="After Discount Amount"
|
||||||
readOnly
|
readOnly
|
||||||
/>
|
/>
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-3">
|
||||||
|
<label>Grand Total:</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
value={grandTotal || ""}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-md-12">
|
||||||
{formData.pay_method === "cheque" && (
|
{formData.pay_method === "cheque" && (
|
||||||
<div className="">
|
<div className="mb-3">
|
||||||
<div className="col-md-12 row">
|
<div className="col-md-12 row">
|
||||||
<div className="mb-3 col-md-6">
|
<div className="mb-3 col-md-6">
|
||||||
<select
|
<select
|
||||||
|
|
@ -614,19 +612,6 @@ function PayInvoice() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-contained me-2"
|
|
||||||
onClick={handleCancel}
|
|
||||||
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@ import "./Invoice.css";
|
||||||
import { toast, ToastContainer } from "react-toastify";
|
import { toast, ToastContainer } from "react-toastify";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import { DatePicker } from "antd";
|
|
||||||
const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
const { Get, Delete } = useApi();
|
const { Get, Delete } = useApi();
|
||||||
|
|
||||||
|
|
@ -19,7 +18,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
const [vendors, setVendors] = useState([]);
|
const [vendors, setVendors] = useState([]);
|
||||||
const [fromDate, setFromDate] = useState("");
|
const [fromDate, setFromDate] = useState("");
|
||||||
const [toDate, setToDate] = useState("");
|
const [toDate, setToDate] = useState("");
|
||||||
const [dateRange, setDateRange] = useState([]);
|
|
||||||
|
|
||||||
|
|
||||||
const fetchInvoices = async () => {
|
const fetchInvoices = async () => {
|
||||||
|
|
@ -44,39 +43,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
fetchInvoices();
|
fetchInvoices();
|
||||||
}, [reloadData]);
|
}, [reloadData]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let filteredInvoices = invoices;
|
|
||||||
|
|
||||||
// Filter by date range
|
|
||||||
if (dateRange.length === 2) {
|
|
||||||
const [start, end] = dateRange;
|
|
||||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
|
||||||
const invoiceDate = new Date(invoice.date);
|
|
||||||
return invoiceDate >= start && invoiceDate <= end;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setInvoices(filteredInvoices);
|
|
||||||
|
|
||||||
}, [dateRange, invoices]);
|
|
||||||
|
|
||||||
const applyFilters = () => {
|
const applyFilters = () => {
|
||||||
let filteredInvoices = invoices;
|
let filteredInvoices = invoices;
|
||||||
|
|
||||||
// Apply status filter
|
|
||||||
if (selectedStatus !== "All") {
|
if (selectedStatus !== "All") {
|
||||||
filteredInvoices = filteredInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.status === selectedStatus
|
(invoice) => invoice.status === selectedStatus
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply vendor filter
|
|
||||||
if (selectedVendor) {
|
if (selectedVendor) {
|
||||||
filteredInvoices = filteredInvoices.filter(
|
filteredInvoices = filteredInvoices.filter(
|
||||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply date filters
|
||||||
|
if (fromDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (toDate) {
|
||||||
|
filteredInvoices = filteredInvoices.filter(
|
||||||
|
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the state with filtered invoices
|
||||||
setInvoices(filteredInvoices);
|
setInvoices(filteredInvoices);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -146,11 +140,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
await Delete(`invoiceData`, id)
|
await Delete(`invoiceData`, id)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
|
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
|
||||||
|
|
||||||
setInvoices(updatedInvoices);
|
setInvoices(updatedInvoices);
|
||||||
onEdit(null);
|
onEdit(null);
|
||||||
toast.success("Invoice successfully deleted!");
|
toast.success("Invoice successfully deleted!");
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
|
|
@ -272,7 +266,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pagination">
|
<div className="pagination">
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handlePrevPage}
|
onClick={handlePrevPage}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
|
|
@ -286,11 +280,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
>
|
>
|
||||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
|
|
||||||
{paginationItems}
|
{paginationItems}
|
||||||
|
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handleNextPage}
|
onClick={handleNextPage}
|
||||||
disabled={currentPage === totalPages}
|
disabled={currentPage === totalPages}
|
||||||
|
|
@ -304,101 +298,20 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
>
|
>
|
||||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ToastContainer />
|
<ToastContainer/>
|
||||||
<div
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: "16px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
margin: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Invoice due this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff8e6",
|
|
||||||
border: "1px solid #ffd700",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$19,864,63,521
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "400px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center mb-3">
|
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="searchcontainer" style={{ gap: "10px" }}>
|
<div className="searchcontainer">
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ width: "300px", height: "50px" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -439,7 +352,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
|
|
||||||
{/* Filter and Actions */}
|
{/* Filter and Actions */}
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
{/* <div
|
<div
|
||||||
className="filtercontainer"
|
className="filtercontainer"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#f4f4f4",
|
backgroundColor: "#f4f4f4",
|
||||||
|
|
@ -490,7 +403,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div> */}
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
|
|
@ -615,7 +528,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="mt-2">
|
<li className="mt-2">
|
||||||
{/* <div
|
<div
|
||||||
className="row col-md-12"
|
className="row col-md-12"
|
||||||
style={{ width: "100%", justifyContent: "space-around" }}
|
style={{ width: "100%", justifyContent: "space-around" }}
|
||||||
>
|
>
|
||||||
|
|
@ -647,7 +560,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
onChange={(e) => setToDate(e.target.value)}
|
onChange={(e) => setToDate(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li className="text-center mt-2">
|
<li className="text-center mt-2">
|
||||||
<button
|
<button
|
||||||
|
|
@ -661,13 +574,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<DatePicker.RangePicker
|
|
||||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
|
||||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
|
||||||
format="YYYY-MM-DD"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
|
|
@ -690,8 +596,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: index === 0 ? "30px" : "0",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
backgroundColor: '#282e26',
|
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||||
color: '#ffffff',
|
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||||
|
borderTopRightRadius: index === 7 ? "60px" : "0",
|
||||||
|
borderBottomRightRadius: index === 7 ? "60px" : "0",
|
||||||
textAlign: "start",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
}}
|
}}
|
||||||
|
|
@ -848,34 +756,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const paymentMethodStyles = {
|
const paymentMethodStyles = {
|
||||||
bank: { backgroundColor: "" },
|
bank: { backgroundColor: "#57A09C" },
|
||||||
"Business Cash": { backgroundColor: "" },
|
"Business Cash": { backgroundColor: "#38400B" },
|
||||||
"Credit Card": { backgroundColor: "" },
|
"Credit Card": { backgroundColor: "#28a745" },
|
||||||
cash: { backgroundColor: "" },
|
cash: { backgroundColor: "#CAC59D" },
|
||||||
cheque: { backgroundColor: "" },
|
cheque: { backgroundColor: "#38400B" },
|
||||||
pay_later: { backgroundColor: "" },
|
pay_later: { backgroundColor: "#E55477" },
|
||||||
pay_now: { backgroundColor: "" },
|
pay_now: { backgroundColor: "#A9B0F0" },
|
||||||
credit_invoice: { backgroundColor: "" },
|
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPaymentMethodStyle = (method) => ({
|
const getPaymentMethodStyle = (method) => ({
|
||||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d", }),
|
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "10px 20px",
|
padding: "5px 10px",
|
||||||
color: "#000",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
const statusStyles = {
|
const statusStyles = {
|
||||||
All: { backgroundColor: "#4545DB" },
|
All: { backgroundColor: "#4545DB" },
|
||||||
// draft: { backgroundColor: "#4545DB7C" },
|
// draft: { backgroundColor: "#4545DB7C" },
|
||||||
unpaid: { backgroundColor: "#ff2024" },
|
unpaid: { backgroundColor: "#EF3E49" },
|
||||||
partially_paid: { backgroundColor: "#0c8ce9" },
|
partially_paid: { backgroundColor: "#4545DB7C" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusStyle = (status) => ({
|
const getStatusStyle = (status) => ({
|
||||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
...(statusStyles[status] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "10px 20px",
|
padding: "5px 10px",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,6 @@ import { useNavigate } from "react-router-dom";
|
||||||
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
||||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
|
|
||||||
import expensetype from '../../../../assets/Image/expenses type .png'
|
|
||||||
import vendor from '../../../../assets/Image/vendor.png'
|
|
||||||
|
|
||||||
export default function Expense() {
|
export default function Expense() {
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
|
|
@ -451,24 +448,24 @@ export default function Expense() {
|
||||||
try {
|
try {
|
||||||
let response;
|
let response;
|
||||||
if (editingInvoiceId) {
|
if (editingInvoiceId) {
|
||||||
// Editing an existing invoice
|
// Editing an existing invoice
|
||||||
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
||||||
if (!originalInvoice) {
|
if (!originalInvoice) {
|
||||||
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine the new status based on payment method and remaining amount
|
// Determine the new status based on payment method and remaining amount
|
||||||
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
|
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
|
||||||
let newStatus = originalInvoice.status; // Start with the original status
|
let newStatus = originalInvoice.status; // Start with the original status
|
||||||
|
|
||||||
if (formData.pay_method_status === "pay_now") {
|
if (formData.pay_method_status === "pay_now") {
|
||||||
newStatus = "paid"; // Always "paid" if paid now
|
newStatus = "paid"; // Always "paid" if paid now
|
||||||
} else if (formData.pay_method_status === "pay_later") {
|
} else if (formData.pay_method_status === "pay_later") {
|
||||||
newStatus = "unpaid"; // Ensure unpaid if paying later
|
newStatus = "unpaid"; // Ensure unpaid if paying later
|
||||||
} else if (newRemainingAmount < originalInvoice.amount) {
|
} else if (newRemainingAmount < originalInvoice.amount) {
|
||||||
newStatus = "partially_paid"; // Adjust if partially paid
|
newStatus = "partially_paid"; // Adjust if partially paid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Ensure pay_amount is included when editing
|
// Ensure pay_amount is included when editing
|
||||||
|
|
@ -628,148 +625,15 @@ export default function Expense() {
|
||||||
<div className="main-container">
|
<div className="main-container">
|
||||||
<div className="d-flex p-2">
|
<div className="d-flex p-2">
|
||||||
<div className="expensecontainer d-flex flex-column pd-2">
|
<div className="expensecontainer d-flex flex-column pd-2">
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
<h3 className="mb-1">Expense</h3>
|
||||||
|
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||||
|
{" "}
|
||||||
+ Add Invoice
|
+ Add Invoice
|
||||||
<img
|
|
||||||
src={invoiceIcon}
|
|
||||||
alt="Invoice Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
<button style={{
|
|
||||||
backgroundColor: "#4A5546",
|
|
||||||
boxShadow: "none",
|
|
||||||
outline: "none",
|
|
||||||
width: "auto",
|
|
||||||
height: "42px",
|
|
||||||
padding: "8px 12px",
|
|
||||||
fontSize: "16px",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}>
|
|
||||||
|
|
||||||
+ Add New Vendor
|
|
||||||
<img
|
|
||||||
src={vendor}
|
|
||||||
alt="Invoice Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<button style={{
|
|
||||||
backgroundColor: "#4A5546",
|
|
||||||
boxShadow: "none",
|
|
||||||
outline: "none",
|
|
||||||
width: "auto",
|
|
||||||
height: "42px",
|
|
||||||
padding: "8px 12px",
|
|
||||||
fontSize: "16px",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
+ Add Expense Type
|
|
||||||
<img
|
|
||||||
src={expensetype}
|
|
||||||
alt="Invoice Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
gap: "16px",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
margin: "20px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Invoice due this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#fff8e6",
|
|
||||||
border: "1px solid #ffd700",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "300px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "300px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$1900
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "300px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
|
|
||||||
|
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<DataTable
|
<DataTable
|
||||||
data={expenseInvoice}
|
data={expenseInvoice}
|
||||||
|
|
@ -796,7 +660,7 @@ export default function Expense() {
|
||||||
className="modal-container"
|
className="modal-container"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
style={{
|
style={{
|
||||||
width: "1200px",
|
width: "700px",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
margin: "100px auto",
|
margin: "100px auto",
|
||||||
padding: "20px",
|
padding: "20px",
|
||||||
|
|
@ -830,16 +694,13 @@ export default function Expense() {
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<form>
|
<form>
|
||||||
<div className="form-row form-group col-md-12 position-relative d-flex">
|
<div className="form-row form-group col-md-12 position-relative d-flex">
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
paddingRight: "10px",
|
paddingRight: "10px"
|
||||||
|
|
||||||
}}
|
}}
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -850,16 +711,12 @@ export default function Expense() {
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
outline: "none", // Remove outline to prevent default focus styling
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -869,15 +726,15 @@ export default function Expense() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex col-md-12">
|
||||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -907,18 +764,12 @@ export default function Expense() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
|
|
||||||
<div className="d-flex col-md-12">
|
|
||||||
|
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
|
||||||
<select
|
<select
|
||||||
className="form-control"
|
className="form-control"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
name="vendor_department_service_titles"
|
name="vendor_department_service_titles"
|
||||||
|
|
@ -927,7 +778,7 @@ export default function Expense() {
|
||||||
id="expenseType"
|
id="expenseType"
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<option value="">Expense Type</option>
|
<option value="">Select Expense Type</option>
|
||||||
<option value="add-expense">Add Expense Type</option>
|
<option value="add-expense">Add Expense Type</option>
|
||||||
{filteredExpenseTypes.map((service) => (
|
{filteredExpenseTypes.map((service) => (
|
||||||
<option key={service.id} value={service.title}>
|
<option key={service.id} value={service.title}>
|
||||||
|
|
@ -936,207 +787,85 @@ export default function Expense() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
className="form-row d-flex col-md-3 "
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="input-group col-md-6">
|
|
||||||
<div
|
|
||||||
className="input-group-prepend"
|
|
||||||
style={{
|
|
||||||
background: "#ffffff",
|
|
||||||
height: "100%",
|
|
||||||
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <span
|
|
||||||
className="input-group-text prefixtext"
|
|
||||||
style={{
|
|
||||||
border: "none",
|
|
||||||
fontSize: "14px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
USD
|
|
||||||
</span> */}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
className="form-control sampletext"
|
|
||||||
placeholder="Amount"
|
|
||||||
aria-label="Amount"
|
|
||||||
aria-describedby="addon-wrapping"
|
|
||||||
name={editingInvoiceId ? "amount" : "amount"}
|
|
||||||
value={
|
|
||||||
editingInvoiceId && formData.pay_amount === undefined
|
|
||||||
? formData.remaining_amount
|
|
||||||
: formData.amount || formData.amount
|
|
||||||
}
|
|
||||||
onInput={(e) => {
|
|
||||||
// Allow only numbers and a decimal point with two digits after it
|
|
||||||
e.target.value = e.target.value
|
|
||||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
|
||||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
|
||||||
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
|
||||||
}}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '2px solid #ACB4AA',
|
|
||||||
padding: '10px 10px',
|
|
||||||
width: 'fit-content',
|
|
||||||
borderRadius: '40px',
|
|
||||||
// marginTop:'20px',
|
|
||||||
display: 'flex', // Use flexbox
|
|
||||||
gap: '10px', // Add spacing between the options
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="pay_later"
|
|
||||||
checked={formData.pay_method_status === 'pay_later'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Pay Later
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="pay_now"
|
|
||||||
checked={formData.pay_method_status === 'pay_now'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Pay Now
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="credit_invoice"
|
|
||||||
checked={formData.pay_method_status === 'credit_invoice'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Credit Invoice
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex col-md-12" style={{ paddingTop: "15px" }}>
|
||||||
|
<p>Payment Method : </p>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="pay_later"
|
||||||
|
checked={formData.pay_method_status === "pay_later"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Pay Later
|
||||||
|
</label>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="pay_now"
|
||||||
|
checked={formData.pay_method_status === "pay_now"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Pay Now
|
||||||
|
</label>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="credit_invoice"
|
||||||
|
checked={formData.pay_method_status === "credit_invoice"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Credit Invoice
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{showPaymentOptions && (
|
{showPaymentOptions && (
|
||||||
<div
|
<div className="d-flex col-md-6 mb-3">
|
||||||
className="d-flex col-md-6 mb-3"
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
style={{
|
<input
|
||||||
border: '2px solid #ACB4AA',
|
type="radio"
|
||||||
padding: '10px 10px',
|
name="specificPaymentMethod"
|
||||||
width: 'fit-content',
|
value="cash"
|
||||||
borderRadius: '40px',
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
display: 'flex', // Use flexbox for inner items
|
/>{" "}
|
||||||
gap: '10px', // Add spacing between the options
|
Cash
|
||||||
marginTop: '20px', // Keep this if you want some space above
|
</label>
|
||||||
}}
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
>
|
<input
|
||||||
{[
|
type="radio"
|
||||||
{ value: "cash", label: "Cash" },
|
name="specificPaymentMethod"
|
||||||
{ value: "cheque", label: "Check" },
|
value="cheque"
|
||||||
{ value: "bank", label: "Bank Card/ACH/EFT" }
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
].map((method) => (
|
/>{" "}
|
||||||
<label
|
Check
|
||||||
key={method.value}
|
</label>
|
||||||
className="radio-inline"
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
style={{
|
<input
|
||||||
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
|
type="radio"
|
||||||
color: formData.pay_method === method.value ? "white" : "black",
|
name="specificPaymentMethod"
|
||||||
|
value="bank"
|
||||||
padding: '5px 10px', // Add padding for better appearance
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
/>{" "}
|
||||||
cursor: "pointer",
|
Bank Card/ACH/EFT
|
||||||
}}
|
</label>
|
||||||
>
|
</div>
|
||||||
<input
|
)}
|
||||||
type="radio"
|
|
||||||
name="specificPaymentMethod"
|
|
||||||
value={method.value}
|
|
||||||
onChange={handleSpecificPaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
{method.label} {/* Use the label defined in the array */}
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{(formData.pay_method_status === "pay_later" ||
|
{(formData.pay_method_status === "pay_later" ||
|
||||||
formData.pay_method_status === "credit_invoice") && (
|
formData.pay_method_status === "credit_invoice") && (
|
||||||
<div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop:'20px' }}>
|
<div className="col-md-6 d-flex" style={{ paddingRight: "10px" }}>
|
||||||
<select
|
<select
|
||||||
className="form-control col-md-6 me-2"
|
className="form-control col-md-6 me-2"
|
||||||
name="days"
|
name="days"
|
||||||
value={formData.days || ""}
|
value={formData.days || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
required
|
required
|
||||||
|
|
@ -1152,11 +881,8 @@ export default function Expense() {
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "50px",
|
height: "50px",
|
||||||
}}
|
}}
|
||||||
className="form-control d-flex col-md-5"
|
className="form-control d-flex col-md-5"
|
||||||
|
|
@ -1174,11 +900,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1201,10 +924,8 @@ export default function Expense() {
|
||||||
className="form-control me-2"
|
className="form-control me-2"
|
||||||
placeholder="Check Number"
|
placeholder="Check Number"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1218,10 +939,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1237,10 +956,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1260,10 +977,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1291,10 +1006,8 @@ export default function Expense() {
|
||||||
|
|
||||||
{formData.prepaid_tax && (
|
{formData.prepaid_tax && (
|
||||||
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}>
|
}}>
|
||||||
<div className="input-group col-md-6">
|
<div className="input-group col-md-6">
|
||||||
|
|
@ -1308,7 +1021,7 @@ export default function Expense() {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <span
|
<span
|
||||||
className="input-group-text prefixtext"
|
className="input-group-text prefixtext"
|
||||||
style={{
|
style={{
|
||||||
border: "none",
|
border: "none",
|
||||||
|
|
@ -1316,7 +1029,7 @@ export default function Expense() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
USD
|
USD
|
||||||
</span> */}
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -1338,7 +1051,57 @@ export default function Expense() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="form-row d-flex col-md-6 p-2 mt-2"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
|
height: "52px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="input-group col-md-6">
|
||||||
|
<div
|
||||||
|
className="input-group-prepend"
|
||||||
|
style={{
|
||||||
|
background: "#F5F5F5",
|
||||||
|
height: "100%",
|
||||||
|
borderRadius: "10px 0 0 10px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="input-group-text prefixtext"
|
||||||
|
style={{
|
||||||
|
border: "none",
|
||||||
|
fontSize: "14px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
USD
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
className="form-control sampletext"
|
||||||
|
placeholder="Amount"
|
||||||
|
aria-label="Amount"
|
||||||
|
aria-describedby="addon-wrapping"
|
||||||
|
name={editingInvoiceId ? "amount" : "amount"}
|
||||||
|
value={
|
||||||
|
editingInvoiceId && formData.pay_amount === undefined
|
||||||
|
? formData.remaining_amount
|
||||||
|
: formData.amount || formData.amount
|
||||||
|
}
|
||||||
|
onInput={(e) => {
|
||||||
|
// Allow only numbers and a decimal point with two digits after it
|
||||||
|
e.target.value = e.target.value
|
||||||
|
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||||
|
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||||
|
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||||
|
}}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1352,8 +1115,7 @@ export default function Expense() {
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
style={{backgroundColor:'#282E26' ,color:"#fff"}}
|
className="btn btn-primary"
|
||||||
className="btn"
|
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
|
|
|
||||||
|
|
@ -130,46 +130,40 @@ const PayrollTable = ({
|
||||||
padding: "5px 10px",
|
padding: "5px 10px",
|
||||||
},
|
},
|
||||||
unpaid: {
|
unpaid: {
|
||||||
backgroundColor: "#ff2024",
|
backgroundColor: "#EF3E49",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "10px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
textAlign:'center',
|
|
||||||
alignItems:'center'
|
|
||||||
},
|
},
|
||||||
paid: {
|
paid: {
|
||||||
backgroundColor: "#198f51",
|
backgroundColor: "#5856AC",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "10px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
textAlign:'center',
|
|
||||||
alignItems:'center'
|
|
||||||
},
|
},
|
||||||
partially_paid: {
|
partially_paid: {
|
||||||
backgroundColor: "#0c8ce9",
|
backgroundColor: "#FFB830",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "10px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
textAlign:'center',
|
|
||||||
alignItems:'center'
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const paymentMethodStyles = {
|
const paymentMethodStyles = {
|
||||||
bank: { backgroundColor: "" },
|
bank: { backgroundColor: "#57A09C" },
|
||||||
"Business Cash": { backgroundColor: "" },
|
"Business Cash": { backgroundColor: "#38400B" },
|
||||||
"Credit Card": { backgroundColor: "" },
|
"Credit Card": { backgroundColor: "#28a745" },
|
||||||
cash: { backgroundColor: "" },
|
cash: { backgroundColor: "#CAC59D" },
|
||||||
cheque: { backgroundColor: "" },
|
cheque: { backgroundColor: "#38400B" },
|
||||||
pay_later: { backgroundColor: "" },
|
pay_later: { backgroundColor: "#E55477" },
|
||||||
pay_now: { backgroundColor: "" },
|
pay_now: { backgroundColor: "#A9B0F0" },
|
||||||
credit_invoice: { backgroundColor: "" },
|
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPaymentMethodStyle = (method) => ({
|
const getPaymentMethodStyle = (method) => ({
|
||||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "30px",
|
borderRadius: "30px",
|
||||||
padding: "5px 10px",
|
padding: "5px 10px",
|
||||||
color: "#000",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
const downloadCSV = () => {
|
const downloadCSV = () => {
|
||||||
|
|
@ -192,20 +186,17 @@ const PayrollTable = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="data-table-container">
|
<div className="data-table-container">
|
||||||
<div className="d-flex mb-3">
|
<div className="d-flex mb-3">
|
||||||
<div className="expense-searchcontainerstart d-flex">
|
<div className="expense-searchcontainerstart d-flex">
|
||||||
<div className="search-container"
|
<div className="search-container">
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
|
||||||
/>
|
/>
|
||||||
<SearchIcon />
|
<SearchIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-outline-dark custbtn"
|
className="btn btn-outline-dark custbtn"
|
||||||
|
|
@ -227,8 +218,6 @@ const PayrollTable = ({
|
||||||
</svg>
|
</svg>
|
||||||
Export To Excel
|
Export To Excel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
{/* <button className="btn custbtn2" type="submit">
|
{/* <button className="btn custbtn2" type="submit">
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
width="24"
|
||||||
|
|
@ -249,39 +238,12 @@ const PayrollTable = ({
|
||||||
Filter
|
Filter
|
||||||
</button> */}
|
</button> */}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||||
<div style={{marginRight:"60%"}}>
|
<h3 className="me-2">Show</h3>
|
||||||
<div
|
|
||||||
className="expense-search d-flex align-items-center"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#4A5546",
|
|
||||||
boxShadow: "none",
|
|
||||||
outline: "none",
|
|
||||||
width: "auto",
|
|
||||||
height: "42px",
|
|
||||||
|
|
||||||
padding: "8px 12px",
|
|
||||||
fontSize: "16px",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h6 className="" style={{margin:'10px'}}>Show</h6>
|
|
||||||
<select
|
<select
|
||||||
name="option"
|
name="option"
|
||||||
id="pageSelect"
|
id="pageSelect"
|
||||||
className="selectoptions"
|
className="selectoptions"
|
||||||
style={{
|
|
||||||
height: "30px",
|
|
||||||
|
|
||||||
padding: "2px 6px",
|
|
||||||
border: "1px solid #ccc",
|
|
||||||
backgroundColor: "#282E26",
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "14px",
|
|
||||||
}}
|
|
||||||
value={rowsPerPage}
|
value={rowsPerPage}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setRowsPerPage(Number(e.target.value));
|
setRowsPerPage(Number(e.target.value));
|
||||||
|
|
@ -294,8 +256,6 @@ const PayrollTable = ({
|
||||||
<option value={20}>20</option>
|
<option value={20}>20</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table rounded-table">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
|
|
@ -526,7 +486,7 @@ const PayrollTable = ({
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="pagination">
|
<ul className="pagination">
|
||||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
{/* <span
|
<span
|
||||||
style={{
|
style={{
|
||||||
width: "30px",
|
width: "30px",
|
||||||
height: "30px",
|
height: "30px",
|
||||||
|
|
@ -541,7 +501,7 @@ const PayrollTable = ({
|
||||||
onClick={handlePrev}
|
onClick={handlePrev}
|
||||||
>
|
>
|
||||||
<PrevIcon />
|
<PrevIcon />
|
||||||
</span> */}
|
</span>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
|
|
@ -550,7 +510,7 @@ const PayrollTable = ({
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
||||||
{/* <span
|
<span
|
||||||
style={{
|
style={{
|
||||||
width: "30px",
|
width: "30px",
|
||||||
height: "30px",
|
height: "30px",
|
||||||
|
|
@ -565,7 +525,7 @@ const PayrollTable = ({
|
||||||
onClick={handleNext}
|
onClick={handleNext}
|
||||||
>
|
>
|
||||||
<NextIcon />
|
<NextIcon />
|
||||||
</span> */}
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,6 @@
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
/*===========================================================================Bank container=================================================================*/
|
/*===========================================================================Bank container=================================================================*/
|
||||||
|
|
@ -575,7 +574,6 @@ input[type="date"] {
|
||||||
.pagination .page-link {
|
.pagination .page-link {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid #F4F4F4;
|
border: 1px solid #F4F4F4;
|
||||||
background-color: #b6d7a8;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: #002300;
|
color: #002300;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -587,17 +585,30 @@ input[type="date"] {
|
||||||
transition: background-color 0.3s, color 0.3s;
|
transition: background-color 0.3s, color 0.3s;
|
||||||
}
|
}
|
||||||
.pagination .page-link:hover {
|
.pagination .page-link:hover {
|
||||||
background-color: #ffaf32;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
.pagination .page-item.active .page-link {
|
.pagination .page-item.active .page-link {
|
||||||
background-color: #ffaf32; /* Yellow background */
|
background-color: #FFFFFF;
|
||||||
color: #002300;
|
color: #002300;
|
||||||
border-color:#fbfbfbfb;
|
border-color:#fbfbfbfb;
|
||||||
border: 1px solid #d3d3d3fb;
|
border: 1px solid #d3d3d3fb;
|
||||||
}
|
}
|
||||||
.pagination .page-item.disabled .page-link {
|
.pagination .page-item.disabled .page-link {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
.pagination .prev-next {
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #F4F4F4;
|
||||||
|
color: #002300;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
.pagination .prev-next:hover {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import backgroundimg from "../../assets/Image/loginbackgound.png";
|
import backgroundimg from "../../assets/img/BackgroundBody.png";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import "./Formlayout.css";
|
import "./Formlayout.css";
|
||||||
const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -21,7 +21,21 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
height: "860px",
|
||||||
|
width: "1440px",
|
||||||
|
borderRadius: "30px",
|
||||||
|
overflow: "hidden",
|
||||||
|
position: "relative",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#ffffff",
|
||||||
|
flexDirection: "row",
|
||||||
|
"@media (maxWidth: 768px)": {
|
||||||
|
flexDirection: "column",
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{/* Left side: Form */}
|
{/* Left side: Form */}
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,8 +49,6 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
boxSizing: "border-box",
|
boxSizing: "border-box",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
|
|
||||||
borderRadius:"40px",
|
|
||||||
position: "relative",
|
position: "relative",
|
||||||
"@media (maxWidth: 768px)": {
|
"@media (maxWidth: 768px)": {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
|
@ -44,7 +56,22 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "30px",
|
||||||
|
left: "70px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link to="/login">
|
||||||
|
<img
|
||||||
|
src={logoSrc}
|
||||||
|
alt="Logo"
|
||||||
|
style={{ height: "70px", width: "100px" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
flex: "1",
|
flex: "1",
|
||||||
|
|
@ -57,7 +84,48 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Right side: Background image */}
|
{/* Right side: Background image */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: "1",
|
||||||
|
backgroundColor: "#DADAF8",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
position: "relative",
|
||||||
|
height: "860px", // Updated height
|
||||||
|
width: "827px", // Updated width
|
||||||
|
"@media (maxWidth: 768px)": {
|
||||||
|
display: "none",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
className="hideonmobile"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={TopImage}
|
||||||
|
alt="Background"
|
||||||
|
style={{
|
||||||
|
width: "461.13px",
|
||||||
|
height: "120px",
|
||||||
|
objectFit: "contain",
|
||||||
|
position: "absolute",
|
||||||
|
top: 50,
|
||||||
|
right: 0,
|
||||||
|
left: 220,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={backgroundImageSrc}
|
||||||
|
alt="Background"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
objectFit: "contain",
|
||||||
|
position: "absolute",
|
||||||
|
top: 230,
|
||||||
|
right: 0,
|
||||||
|
left: 80,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png";
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const { logOutUser } = useContext(AuthContext);
|
const { logOutUser } = useContext(AuthContext);
|
||||||
const [settingsDropOpen, setsettingsDropOpen] = useState(false);
|
const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false);
|
||||||
const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
|
const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
|
||||||
const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
|
const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
|
||||||
const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
|
const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
|
||||||
|
|
@ -47,7 +47,6 @@ const Header = () => {
|
||||||
try {
|
try {
|
||||||
const checkuser = await Get(`checkUserType`);
|
const checkuser = await Get(`checkUserType`);
|
||||||
setUserRole(checkuser.role_name);
|
setUserRole(checkuser.role_name);
|
||||||
// console.log()
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
|
|
@ -83,7 +82,7 @@ const Header = () => {
|
||||||
const response = await Post("selectStore", { store_id: storeId });
|
const response = await Post("selectStore", { store_id: storeId });
|
||||||
navigate("/");
|
navigate("/");
|
||||||
setDropdownVisible(false);
|
setDropdownVisible(false);
|
||||||
setsettingsDropOpen(false);
|
setAvatarDropdownOpen(false);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error selecting store:", error);
|
console.error("Error selecting store:", error);
|
||||||
} finally {
|
} finally {
|
||||||
|
|
@ -134,7 +133,7 @@ const Header = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const closeDropdowns = () => {
|
const closeDropdowns = () => {
|
||||||
setsettingsDropOpen(false);
|
setAvatarDropdownOpen(false);
|
||||||
setSettingsDropdownOpen(false);
|
setSettingsDropdownOpen(false);
|
||||||
setGeneralDropdownOpen(false);
|
setGeneralDropdownOpen(false);
|
||||||
setExpenseDropdownOpen(false);
|
setExpenseDropdownOpen(false);
|
||||||
|
|
@ -578,25 +577,25 @@ const Header = () => {
|
||||||
src={shopeKeeper}
|
src={shopeKeeper}
|
||||||
className="avatar"
|
className="avatar"
|
||||||
alt="User Avatar"
|
alt="User Avatar"
|
||||||
|
onClick={() => {
|
||||||
|
closeDropdowns();
|
||||||
|
setAvatarDropdownOpen(!avatarDropdownOpen);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{/* Display role_name here */}
|
|
||||||
<div className="user-role">
|
|
||||||
{userRole && <span>{userRole}</span>}
|
|
||||||
</div>
|
|
||||||
{/* Settings Icon Button */}
|
{/* Settings Icon Button */}
|
||||||
<button
|
<button
|
||||||
className="settings-button"
|
className="settings-button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation(); // Prevent the click from triggering the avatar's click
|
e.stopPropagation(); // Prevent the click from triggering the avatar's click
|
||||||
closeDropdowns();
|
closeDropdowns();
|
||||||
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
|
setAvatarDropdownOpen(!avatarDropdownOpen); // Toggle dropdown
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Optional: Add an icon here */}
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{settingsDropOpen && (
|
{avatarDropdownOpen && (
|
||||||
<ul className="nav-menu-drop">
|
<ul className="nav-menu-drop">
|
||||||
<li>
|
<li>
|
||||||
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
|
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
|
||||||
|
|
@ -659,7 +658,6 @@ const Header = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
|
||||||
import LoginPage from "./WithUi/LoginPage";
|
import LoginPage from "./WithUi/LoginPage";
|
||||||
function Login() {
|
function Login() {
|
||||||
return (
|
return (
|
||||||
<FormLayout logoSrc={logo} >
|
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}>
|
||||||
<LoginPage />
|
<LoginPage />
|
||||||
</FormLayout>
|
</FormLayout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -305,7 +305,6 @@ function AccountCreate() {
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
lineHeight: "40px",
|
lineHeight: "40px",
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
// width:'500px',
|
|
||||||
marginTop: "100px",
|
marginTop: "100px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -315,8 +314,8 @@ function AccountCreate() {
|
||||||
className="mb-3"
|
className="mb-3"
|
||||||
style={{ fontSize: "14px", color: "#002300" }}
|
style={{ fontSize: "14px", color: "#002300" }}
|
||||||
>
|
>
|
||||||
{/* Start managing your finances effortlessly. Sign up to access your
|
Start managing your finances effortlessly. Sign up to access your
|
||||||
personal ledger and gain control of your transactions with ease! */}
|
personal ledger and gain control of your transactions with ease!
|
||||||
</p>
|
</p>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -428,14 +427,13 @@ function AccountCreate() {
|
||||||
className="card-title mb-3"
|
className="card-title mb-3"
|
||||||
style={{
|
style={{
|
||||||
|
|
||||||
fontSize: "30px",
|
fontSize: "40px",
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
marginTop: "80px",
|
marginTop: "80px",
|
||||||
// width:"500px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Enter store details
|
Enter the Details
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
|
|
@ -446,9 +444,8 @@ function AccountCreate() {
|
||||||
color: "#002300",
|
color: "#002300",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Get started with your personal ledger. */}
|
Get started with your personal ledger. Fill in your information to track
|
||||||
{/* Fill in your information to track
|
transactions and manage your finances seamlessly!
|
||||||
transactions and manage your finances seamlessly! */}
|
|
||||||
</p>
|
</p>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -547,11 +544,11 @@ function AccountCreate() {
|
||||||
<div className="mb-3 mt-4">
|
<div className="mb-3 mt-4">
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn rounded-pill"
|
className="btn btn-primary rounded-pill"
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "60px",
|
height: "60px",
|
||||||
backgroundColor: "#4A5546",
|
backgroundColor: "#4545DB",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
padding: "10px 0px",
|
padding: "10px 0px",
|
||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
|
|
|
||||||
|
|
@ -62,9 +62,9 @@ const LoginPage = () => {
|
||||||
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
||||||
Welcome Back
|
Welcome Back
|
||||||
</p>
|
</p>
|
||||||
{/* <p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
|
<p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
|
||||||
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
|
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
|
||||||
</p> */}
|
</p>
|
||||||
<form onSubmit={loginUser}>
|
<form onSubmit={loginUser}>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -120,11 +120,11 @@ const LoginPage = () => {
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn rounded-pill"
|
className="btn btn-primary rounded-pill"
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "60px",
|
height: "60px",
|
||||||
backgroundColor: "#4A5546",
|
backgroundColor: "#4545DB",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
padding: "10px 10px",
|
padding: "10px 10px",
|
||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
|
|
@ -139,7 +139,7 @@ const LoginPage = () => {
|
||||||
</form>
|
</form>
|
||||||
<div className="text-center mt-4">
|
<div className="text-center mt-4">
|
||||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
||||||
<span>New to PaisaVara?</span>
|
<span>New to Ezhisab?</span>
|
||||||
<Link
|
<Link
|
||||||
to="/create-user"
|
to="/create-user"
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -147,7 +147,6 @@ const LoginPage = () => {
|
||||||
marginLeft: "5px",
|
marginLeft: "5px",
|
||||||
fontSize: "22px",
|
fontSize: "22px",
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
color:"#000"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Create an Account
|
Create an Account
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 28px 26px;
|
padding: 28px 26px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #9FAA9A; /* Your border color */
|
border: 1px solid #4545db4d; /* Your border color */
|
||||||
opacity: 1; /* Ensure inputs are visible */
|
opacity: 1; /* Ensure inputs are visible */
|
||||||
box-shadow: none; /* Remove any box-shadow if applied */
|
box-shadow: none; /* Remove any box-shadow if applied */
|
||||||
font-size: 16px; /* Optional: Set font size for the input text */
|
font-size: 16px; /* Optional: Set font size for the input text */
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
.custom-input:focus {
|
.custom-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 1px solid #9FAA9A;
|
border: 1px solid #4545db4d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-error {
|
.input-error {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue