Compare commits
No commits in common. "main" and "24_12_sonali" have entirely different histories.
main
...
24_12_sona
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
|
|
@ -8,7 +8,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" rel="stylesheet" />
|
||||
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
|
@ -29,13 +29,14 @@
|
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<style>
|
||||
body {
|
||||
background-image: url('Background.png');
|
||||
background-color: #f9fff6;
|
||||
font-family: "Comfortaa";
|
||||
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-color: #E9ECFF;
|
||||
background-image: url('../src/assets/Image/Pattern.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-position: center;
|
||||
background-blend-mode: overlay;
|
||||
font-family: Manrope;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -93,34 +93,25 @@ body {
|
|||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
width: 400px;
|
||||
height: 81px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
border-radius: 20px;
|
||||
height: 90px;
|
||||
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-radius: 20px;
|
||||
}
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
width: 1200px;
|
||||
height: 81px;
|
||||
|
||||
height: 90px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex: 1; /* Takes the remaining space between navbar-left and the center header */
|
||||
|
|
@ -132,7 +123,7 @@ font-weight: bold;
|
|||
.navbar .nav-item.active .nav-link {
|
||||
color: #ffffff; /* Active link color */
|
||||
background-color: #282e26;
|
||||
border-radius: 40px;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold; /* Bold text for active link */
|
||||
}
|
||||
|
|
@ -153,7 +144,7 @@ font-weight: bold;
|
|||
align-items: center;
|
||||
}
|
||||
.nav-link {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-family: "Manrope";
|
||||
font-size: 16px !important;
|
||||
color: #002300;
|
||||
|
||||
|
|
@ -315,25 +306,7 @@ font-weight: bold;
|
|||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
/* margin-left: 140px; */
|
||||
top: 100%; /* Positions dropdown below the parent */
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #F6F6F6;
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
min-width: 120px; /* Optional minimum width */
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
|
||||
}
|
||||
|
||||
.nav-menu-drop {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
margin-left: 80%;
|
||||
position: absolute;
|
||||
/* margin-left: 140px; */
|
||||
top: 100%; /* Positions dropdown below the parent */
|
||||
|
|
@ -441,7 +414,6 @@ font-weight: bold;
|
|||
.table-darkcustom td {
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Styling for the last header cell */
|
||||
|
|
@ -512,7 +484,7 @@ font-weight: bold;
|
|||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
top: 50%;
|
||||
left: 15px; /* Adjust as needed */
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none; /* Prevent clicks on the icon */
|
||||
|
|
@ -521,7 +493,6 @@ font-weight: bold;
|
|||
.search-container {
|
||||
position: relative;
|
||||
flex: 3;
|
||||
margin-left: 0px;
|
||||
max-width: 300px;
|
||||
}
|
||||
.search-container input {
|
||||
|
|
@ -530,7 +501,6 @@ font-weight: bold;
|
|||
height: 50px;
|
||||
background: #f4f4f4;
|
||||
border-radius: 50px;
|
||||
|
||||
border: none;
|
||||
padding-left: 40px;
|
||||
font-size: 16px;
|
||||
|
|
@ -544,8 +514,8 @@ font-weight: bold;
|
|||
}
|
||||
.search-container-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 47%;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -736,7 +706,6 @@ font-weight: bold;
|
|||
margin: auto;
|
||||
background-color: white;
|
||||
width: 90%;
|
||||
|
||||
/* Changed from 1600px to a percentage */
|
||||
max-width: 1600px;
|
||||
/* Maximum width for larger screens */
|
||||
|
|
@ -756,7 +725,6 @@ h3 {
|
|||
box-shadow: none;
|
||||
outline: none;
|
||||
width: auto;
|
||||
|
||||
height: 42px;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
|
|
@ -770,7 +738,6 @@ h3 {
|
|||
|
||||
.expense-searchcontainerstart {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
.custbtn {
|
||||
box-shadow: none;
|
||||
|
|
@ -828,15 +795,13 @@ h3 {
|
|||
.table-responsive th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.table-responsives {
|
||||
border: 0.5px solid #f4f4f4;
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.table-responsive {
|
||||
border-left: 1px solid #ebeaf2;
|
||||
border-right: 1px solid #ebeaf2;
|
||||
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.expensetableheader th:first-child {
|
||||
|
|
|
|||
|
|
@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
|
|||
return (
|
||||
<div>
|
||||
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "50px",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -318,30 +318,20 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -351,30 +341,20 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -384,30 +364,20 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -418,7 +388,7 @@ const ATMDepositTable = (props) => {
|
|||
<div className="searchcontainer">
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -513,16 +483,9 @@ const ATMDepositTable = (props) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
|
||||
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -540,7 +503,6 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -586,7 +548,7 @@ const ATMDepositTable = (props) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -697,12 +659,7 @@ const ATMDepositTable = (props) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<tr>
|
||||
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
|
||||
(header, index) => (
|
||||
<th
|
||||
|
|
@ -711,7 +668,7 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
textAlign: "center",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff'
|
||||
|
|
@ -755,11 +712,11 @@ const ATMDepositTable = (props) => {
|
|||
{currentInvoices.length !== 0 ?
|
||||
currentInvoices.map((invoice) => (
|
||||
<tr key={invoice.id}>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
{invoice.date}
|
||||
</td>
|
||||
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||
{invoice.bank_deposite_type
|
||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||
|
|
@ -767,8 +724,8 @@ const ATMDepositTable = (props) => {
|
|||
: "N/A"}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||
{invoice.transaction_type ?
|
||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import React, { useState, useEffect, useContext, useRef } from "react";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import "./Invoice.css";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import TableComponent from "./InvoiceTable";
|
||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
||||
|
|
@ -28,7 +28,7 @@ function AddInvoice() {
|
|||
const handleShow = () => setShowModal(true);
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const [activeButton, setActiveButton] = useState("");
|
||||
const [activeButton, setActiveButton] = useState('');
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
|
|
@ -48,12 +48,12 @@ function AddInvoice() {
|
|||
vendor_department: "",
|
||||
vendor_department_name: "",
|
||||
invoice_no: "", // This will now have a default value from the last invoice
|
||||
pay_method_status: "pay_now",
|
||||
pay_method_status: "",
|
||||
prepaid_tax: false,
|
||||
prepaid_tax_percentage: "",
|
||||
amount: "",
|
||||
remaining_amount: "",
|
||||
pay_method: "cash",
|
||||
pay_method: "",
|
||||
due_date: null,
|
||||
note: "",
|
||||
bank: "",
|
||||
|
|
@ -81,7 +81,8 @@ function AddInvoice() {
|
|||
cheque_no: null,
|
||||
type: "",
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setFormData((prevData) => ({
|
||||
|
|
@ -94,6 +95,7 @@ function AddInvoice() {
|
|||
const [banks, setBanks] = useState([]);
|
||||
const [dueDays, setDueDays] = useState([]);
|
||||
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -121,9 +123,9 @@ function AddInvoice() {
|
|||
|
||||
const invoiceStatus =
|
||||
formData.pay_method_status === "pay_now" &&
|
||||
(formData.pay_method === "cash" ||
|
||||
formData.pay_method === "bank" ||
|
||||
formData.pay_method === "cheque")
|
||||
(formData.pay_method === "cash" ||
|
||||
formData.pay_method === "bank" ||
|
||||
formData.pay_method === "cheque")
|
||||
? "paid"
|
||||
: "unpaid";
|
||||
|
||||
|
|
@ -155,22 +157,25 @@ function AddInvoice() {
|
|||
}),
|
||||
};
|
||||
|
||||
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
|
||||
.then((response) => {
|
||||
toast.success("Invoice submitted successfully!");
|
||||
// Reload the component by navigating to the same route
|
||||
setReloadData(!reloadData);
|
||||
makeBlank();
|
||||
// navigate(0);
|
||||
})
|
||||
.catch((error) => {
|
||||
setReloadData(!reloadData);
|
||||
toast.error(
|
||||
"An error occurred while submitting the invoice. Please check your network and try again."
|
||||
);
|
||||
});
|
||||
|
||||
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit).then((response) => {
|
||||
toast.success("Invoice submitted successfully!");
|
||||
// Reload the component by navigating to the same route
|
||||
setReloadData(!reloadData);
|
||||
makeBlank();
|
||||
// navigate(0);
|
||||
|
||||
}).catch((error) => {
|
||||
setReloadData(!reloadData);
|
||||
toast.error(
|
||||
"An error occurred while submitting the invoice. Please check your network and try again."
|
||||
);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all(
|
||||
|
|
@ -225,6 +230,7 @@ function AddInvoice() {
|
|||
[name]: type === "checkbox" ? checked : value,
|
||||
}));
|
||||
}
|
||||
|
||||
};
|
||||
const handlePaymentMethodChange = (e) => {
|
||||
const value = e.target.value;
|
||||
|
|
@ -234,8 +240,8 @@ function AddInvoice() {
|
|||
value === "credit_invoice"
|
||||
? "credit_invoice"
|
||||
: value === "pay_later"
|
||||
? "pay_later"
|
||||
: "";
|
||||
? "pay_later"
|
||||
: "";
|
||||
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
|
|
@ -250,7 +256,7 @@ function AddInvoice() {
|
|||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
makeBlank();
|
||||
makeBlank()
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
|
@ -274,7 +280,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 1,
|
||||
column: "col-md-3",
|
||||
column: "col-md-2",
|
||||
label: "Invoice Number",
|
||||
type: "invoice_no",
|
||||
name: "invoice_no",
|
||||
|
|
@ -282,7 +288,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-2",
|
||||
column: "col-md-3",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
|
|
@ -296,20 +302,20 @@ function AddInvoice() {
|
|||
// label: "Payment Method:",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "pay_now", label: "Pay Now" },
|
||||
{ value: "pay_later", label: "Pay Later" },
|
||||
{ value: "pay_now", label: "Pay Now" },
|
||||
{ value: "credit_invoice", label: "Credit Invoice" },
|
||||
],
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-5",
|
||||
column: "col-md-6",
|
||||
label: "Payment Method Options",
|
||||
type: "payment-method-options",
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-5",
|
||||
column: "col-md-6",
|
||||
label: "Payment Method Options",
|
||||
type: "pay-bank-options",
|
||||
},
|
||||
|
|
@ -325,15 +331,15 @@ function AddInvoice() {
|
|||
// The "Notes" field is conditionally rendered based on pay_method_status
|
||||
...(formData.pay_method_status !== "pay_now"
|
||||
? [
|
||||
// {
|
||||
// row: 5,
|
||||
// column: "col-md-6",
|
||||
// label: "Notes",
|
||||
// type: "text",
|
||||
// name: "note",
|
||||
// placeholder: "Notes",
|
||||
// },
|
||||
]
|
||||
// {
|
||||
// row: 5,
|
||||
// column: "col-md-6",
|
||||
// label: "Notes",
|
||||
// type: "text",
|
||||
// name: "note",
|
||||
// placeholder: "Notes",
|
||||
// },
|
||||
]
|
||||
: []),
|
||||
{
|
||||
row: 5,
|
||||
|
|
@ -342,12 +348,13 @@ function AddInvoice() {
|
|||
type: "checkbox",
|
||||
name: "prepaid_tax",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
const paymentMethodOptions = [
|
||||
{ value: "cash", label: "Cash" },
|
||||
{ value: "bank", label: "Bank Card (ACH/EFT)" },
|
||||
{ value: "cheque", label: "Cheque" },
|
||||
{ value: "bank", label: "Bank Card (ACH/EFT)" },
|
||||
];
|
||||
|
||||
const groupedFields = fields.reduce((acc, field) => {
|
||||
|
|
@ -378,6 +385,7 @@ function AddInvoice() {
|
|||
setIsOpen(false); // Close the dropdown after clicking a link
|
||||
|
||||
navigate(path); // Navigate to the clicked path
|
||||
|
||||
};
|
||||
|
||||
const renderField = (field) => {
|
||||
|
|
@ -398,7 +406,7 @@ function AddInvoice() {
|
|||
placeholder={field.placeholder}
|
||||
value={formData[field.name]}
|
||||
onChange={handleChange}
|
||||
// onBlur={handleChange}
|
||||
// onBlur={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -413,11 +421,12 @@ function AddInvoice() {
|
|||
value={formData[field.name]}
|
||||
onChange={handleChange}
|
||||
maxLength={14} // Set maxLength to 14
|
||||
// onBlur={handleChange}
|
||||
// onBlur={handleChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
case "date":
|
||||
return (
|
||||
<div className="form-group">
|
||||
|
|
@ -441,6 +450,7 @@ function AddInvoice() {
|
|||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
|
||||
}}
|
||||
>
|
||||
<div className="input-groups">
|
||||
|
|
@ -449,7 +459,7 @@ function AddInvoice() {
|
|||
</span> */}
|
||||
<input
|
||||
type="text" // Set input type to 'text' to allow decimals
|
||||
style={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
|
||||
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
|
||||
className="form-control-borderless"
|
||||
name={field.name}
|
||||
placeholder={field.placeholder}
|
||||
|
|
@ -458,8 +468,8 @@ function AddInvoice() {
|
|||
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
|
||||
.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)
|
||||
}}
|
||||
/>
|
||||
|
|
@ -471,7 +481,7 @@ function AddInvoice() {
|
|||
return (
|
||||
<div className="form-group">
|
||||
<select
|
||||
className="input-select"
|
||||
className="form-control-borderless"
|
||||
name="vendor_department"
|
||||
value={formData.vendor_department}
|
||||
onChange={(e) => {
|
||||
|
|
@ -498,6 +508,7 @@ function AddInvoice() {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -571,47 +582,27 @@ function AddInvoice() {
|
|||
)
|
||||
);
|
||||
|
||||
case "radio":
|
||||
return (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: "1px solid #ACB4AA",
|
||||
padding: "5px 5px",
|
||||
width: "fit-content",
|
||||
borderRadius: "40px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
<label className="">{field.label}</label>
|
||||
<div className="d-flex">
|
||||
case "radio":
|
||||
return (
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
||||
<label className="me-4">{field.label}</label>
|
||||
{field.options.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check"
|
||||
className="form-check me-4"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
formData[field.name] === option.value
|
||||
? "#4a5546"
|
||||
: "transparent",
|
||||
padding: "5px 25px",
|
||||
borderRadius: "20px",
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 15px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
onClick={() =>
|
||||
handlePaymentMethodChange({
|
||||
target: { name: field.name, value: option.value },
|
||||
})
|
||||
}
|
||||
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
style={{
|
||||
fontWeight: "normal",
|
||||
color:
|
||||
formData[field.name] === option.value
|
||||
? "#ffffff"
|
||||
: "#282e26",
|
||||
fontWeight: 'normal',
|
||||
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
|
@ -619,59 +610,41 @@ function AddInvoice() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
case "payment-method-options":
|
||||
return (
|
||||
formData.pay_method_status === "pay_now" && (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
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={{
|
||||
border: "2px solid #ACB4AA",
|
||||
padding: "5px 5px", // Add padding to give space on both sides
|
||||
width: "fit-content",
|
||||
borderRadius: "40px",
|
||||
marginBottom: "30px",
|
||||
fontWeight: 'normal',
|
||||
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{paymentMethodOptions.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check "
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
formData.pay_method === option.value
|
||||
? "#4a5546"
|
||||
: "transparent",
|
||||
padding: "5px 25px",
|
||||
borderRadius: "20px",
|
||||
}}
|
||||
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>
|
||||
)
|
||||
);
|
||||
{option.label}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<div className="form-check">
|
||||
|
|
@ -686,47 +659,46 @@ function AddInvoice() {
|
|||
</div>
|
||||
);
|
||||
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" ||
|
||||
formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<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" && (
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
<input
|
||||
<select
|
||||
required
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="cheque_no"
|
||||
placeholder="Cheque Number"
|
||||
value={formData.cheque_no}
|
||||
name="bank"
|
||||
value={formData.bank}
|
||||
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>
|
||||
)}
|
||||
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<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">
|
||||
<input
|
||||
|
|
@ -737,7 +709,9 @@ function AddInvoice() {
|
|||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
@ -752,31 +726,29 @@ function AddInvoice() {
|
|||
<div className="d-flex justify-content-between mb-4">
|
||||
<div className="button-groups">
|
||||
<button
|
||||
className={`btn ${activeButton === "/" ? "active" : ""}`}
|
||||
onClick={() => handleLinkClick("/")}
|
||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Bill/Invoice
|
||||
Add Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === "/payInvoice" ? "active" : ""}`}
|
||||
onClick={() => handleLinkClick("/payInvoice")}
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Bill/Invoice
|
||||
Pay Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === "/atmDeposit" ? "active" : ""}`}
|
||||
onClick={() => handleLinkClick("/atmDeposit")}
|
||||
>
|
||||
ATM Deposit
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === "/bankDeposit" ? "active" : ""}`}
|
||||
onClick={() => handleLinkClick("/bankDeposit")}
|
||||
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">
|
||||
|
|
@ -784,37 +756,32 @@ function AddInvoice() {
|
|||
className="container"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #EBEAF2",
|
||||
boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
|
||||
borderRadius: "40px",
|
||||
// height: "479px";
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
{/* Render Fields */}
|
||||
{Object.keys(groupedFields).map((rowKey) => (
|
||||
<div
|
||||
className="row mb-3"
|
||||
style={{
|
||||
gap: "10%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
key={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 ">
|
||||
<div className="col-md-3">
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -826,47 +793,30 @@ function AddInvoice() {
|
|||
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
|
||||
.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
|
||||
}}
|
||||
style={{ marginLeft: "60px" }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
<div className="">
|
||||
{/* Action Buttons */}
|
||||
<div
|
||||
className="d-flex justify-content-end"
|
||||
style={{ gap: "15px" }}
|
||||
>
|
||||
<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",
|
||||
borderRadius: "40px",
|
||||
width: "181px",
|
||||
height: "45px",
|
||||
}}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn"
|
||||
style={{
|
||||
color: "white",
|
||||
backgroundColor: "#282e26",
|
||||
borderRadius: "40px",
|
||||
width: "181px",
|
||||
height: "45px",
|
||||
}}
|
||||
>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -891,8 +841,9 @@ function AddInvoice() {
|
|||
onVendorAdded={handleVendorAdded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddInvoice;
|
||||
export default AddInvoice;
|
||||
|
|
@ -148,33 +148,31 @@ function AtmDeposit() {
|
|||
<div className="dashboard-container">
|
||||
<ToastContainer />
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div className="button-groups">
|
||||
<div className="button-groups">
|
||||
<button
|
||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Bill/Invoice
|
||||
Add Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Bill/Invoice
|
||||
Pay Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
>
|
||||
ATM Deposit
|
||||
</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">
|
||||
|
|
@ -189,13 +187,8 @@ function AtmDeposit() {
|
|||
<form onSubmit={handleSubmit}>
|
||||
|
||||
|
||||
<div className=" col-md-12 row mb-3"
|
||||
style={{
|
||||
gap: "6%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}>
|
||||
<div className="col-md-3 mb-2">
|
||||
<div className=" col-md-12 row mb-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -207,13 +200,13 @@ function AtmDeposit() {
|
|||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<select
|
||||
className="input-select"
|
||||
className="form-select custom-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select Cash type</option>
|
||||
<option value="">Select a type</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
|
|
@ -221,14 +214,14 @@ function AtmDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-3 mb-4">
|
||||
<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, }}
|
||||
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Amount"
|
||||
|
|
@ -244,7 +237,7 @@ function AtmDeposit() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="mb-3 col-md-4">
|
||||
<div className="mb-3 col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -253,7 +246,7 @@ function AtmDeposit() {
|
|||
onChange={handleChange}
|
||||
placeholder="Notes"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-3 row">
|
||||
|
|
@ -280,16 +273,16 @@ function AtmDeposit() {
|
|||
<div className="">
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<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' , borderRadius: '40px' , width: "181px", height:"45px" }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -302,7 +295,6 @@ function AtmDeposit() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
|
||||
}}
|
||||
>
|
||||
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
||||
|
|
|
|||
|
|
@ -161,28 +161,26 @@ function BankDeposit() {
|
|||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Bill/Invoice
|
||||
Add Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Bill/Invoice
|
||||
Pay Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
>
|
||||
ATM Deposit
|
||||
</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">
|
||||
|
|
@ -191,9 +189,7 @@ function BankDeposit() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px",
|
||||
|
||||
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
|
@ -201,11 +197,8 @@ function BankDeposit() {
|
|||
|
||||
|
||||
|
||||
<div className="col-md-12 row " style={{
|
||||
gap: "4%",
|
||||
marginLeft:"3px"
|
||||
}}>
|
||||
<div className=" col-md-3">
|
||||
<div className="col-md-12 row ">
|
||||
<div className=" col-md-4">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -215,30 +208,6 @@ function BankDeposit() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<select
|
||||
className="input-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
style={{ borderBottom: "1px solid #e4e5e7" }}
|
||||
>
|
||||
<option value="" enable>
|
||||
Select Cash type
|
||||
</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<select
|
||||
className="form-control-borderless"
|
||||
|
|
@ -255,33 +224,51 @@ function BankDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3 col-md-3">
|
||||
<select
|
||||
className="form-select custom-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<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
|
||||
className="col-md-12"
|
||||
className="col-md-12 mb-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between", // Adjust spacing between items
|
||||
gap: "50px", // Add gap for consistent spacing
|
||||
|
||||
// marginBottom:"30px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="form-group col-3"
|
||||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
||||
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1", // Allow the field to adjust in size
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
|
||||
className="form-control"
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Cash Amount"
|
||||
value={formData.cash_amount || ""}
|
||||
|
|
@ -295,16 +282,16 @@ function BankDeposit() {
|
|||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
|
||||
|
||||
|
||||
alignItems: "center",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="number"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cheque_amount"
|
||||
placeholder="Cheque Amount"
|
||||
|
|
@ -319,12 +306,12 @@ function BankDeposit() {
|
|||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border:"none",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
{/* <input
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="note"
|
||||
|
|
@ -335,22 +322,22 @@ function BankDeposit() {
|
|||
border: "none",
|
||||
width: "100%",
|
||||
}}
|
||||
/> */}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<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', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -309,124 +309,92 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
|
||||
|
||||
<div
|
||||
<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",
|
||||
gap: "50px",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
<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: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</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: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</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" }}>
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer" >
|
||||
<div className="searchcontainer">
|
||||
<div
|
||||
className="input-group"
|
||||
style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -521,10 +489,9 @@ const BankDepositTable = (props) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
|
||||
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -542,7 +509,6 @@ const BankDepositTable = (props) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -588,7 +554,7 @@ const BankDepositTable = (props) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -700,23 +666,18 @@ const BankDepositTable = (props) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
textAlign:"center"
|
||||
}}>
|
||||
<tr>
|
||||
{["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
|
||||
(header, index) => (
|
||||
<th
|
||||
key={header}
|
||||
onClick={() => handleSort(header)}
|
||||
style={{
|
||||
paddingLeft: "50px",
|
||||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff',
|
||||
textAlign: "left",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
}}
|
||||
>
|
||||
|
|
@ -758,13 +719,13 @@ const BankDepositTable = (props) => {
|
|||
{currentInvoices.length !== 0 ?
|
||||
currentInvoices.map((invoice) => (
|
||||
<tr key={invoice.id}>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
{invoice.date}
|
||||
</td>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
{invoice.bank_name}
|
||||
</td>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||
{invoice.bank_deposite_type
|
||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||
|
|
@ -772,8 +733,8 @@ const BankDepositTable = (props) => {
|
|||
: "N/A"}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||
{invoice.transaction_type ?
|
||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -10,20 +9,6 @@
|
|||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.invoice-table-container {
|
||||
max-width: 1320px;
|
||||
width: 100%;
|
||||
|
||||
border-radius: 40px;
|
||||
height: 735px;
|
||||
display: flex;
|
||||
justify-content: center; /* Horizontal centering */
|
||||
align-items: center; /* Vertical centering */
|
||||
margin: 0 auto; /* Ensures centering in case of block layout */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none; /* This will remove the default dropdown arrow */
|
||||
}
|
||||
|
|
@ -33,27 +18,24 @@
|
|||
}
|
||||
.button-groups {
|
||||
display: flex;
|
||||
justify-content: space-between; /* Space between buttons */
|
||||
align-items: center; /* Center align buttons vertically */
|
||||
margin: 0 auto; /* Center the entire button group */
|
||||
margin-left: 35%;
|
||||
gap: 10px; /* Adjust the spacing between buttons */
|
||||
width: auto; /* Fixed width */
|
||||
height: 60px; /* Fixed height */
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
background-color: #ffffff;
|
||||
width: auto;
|
||||
border-radius: 44px;
|
||||
padding: 0 8px; /* Equal padding on left and right sides */
|
||||
}
|
||||
padding: 10px 50px;
|
||||
|
||||
|
||||
/* Active button styles */
|
||||
.btn.active {
|
||||
}
|
||||
|
||||
|
||||
/* Active button styles */
|
||||
.btn.active {
|
||||
background-color: #ffaf32; /* Yellow background */
|
||||
border-radius: 27px;
|
||||
border-radius: 20px;
|
||||
color: black; /* Black text */
|
||||
padding: 10px 20px; /* Ensure padding consistency for buttons */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.form-container {
|
||||
width: 1328px;
|
||||
|
|
@ -74,11 +56,11 @@
|
|||
.form-control-borderless {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
color: #999999;
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: none;
|
||||
|
|
@ -119,26 +101,19 @@
|
|||
|
||||
.table th {
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
/* margin-right: 50px; */
|
||||
height: 60px;
|
||||
background-color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
text-align: center;
|
||||
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -154,11 +129,8 @@
|
|||
padding: 10px;
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
background-color: #ffffff;
|
||||
border-left: 2px solid #ebeaf2;
|
||||
border-Right: 2px solid #ebeaf2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pgbtn {
|
||||
|
|
@ -167,7 +139,7 @@
|
|||
border: #ced4da;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.active-pgbtn {
|
||||
|
|
@ -175,17 +147,11 @@
|
|||
border: 1px solid #00230007;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.filterbutton {
|
||||
background: #FFFFFF;
|
||||
|
||||
border: 1px solid #DBDBDB;
|
||||
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
|
||||
gap:'20px'
|
||||
|
||||
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
|
@ -358,22 +324,3 @@ input[type="color"]:focus,
|
|||
box-shadow: none; /* Remove any shadow */
|
||||
}
|
||||
|
||||
/* for selct dropdown style --> dashboard // */
|
||||
|
||||
|
||||
|
||||
.input-select{
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: transparent;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -284,118 +284,86 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<div
|
||||
<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",
|
||||
gap: "50px",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$19,864
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
<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"}}>
|
||||
|
|
@ -405,7 +373,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
<div
|
||||
className="input-group flexiblesearch"
|
||||
style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -507,8 +475,10 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
height: "50px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -525,7 +495,6 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
aria-expanded="false"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
marginLeft:'6px',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
|
|
@ -536,7 +505,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
}}
|
||||
>
|
||||
<FilterButton />
|
||||
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -651,13 +620,11 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
</div>
|
||||
|
||||
{/* Table of Invoices */}
|
||||
{/* <div className="">
|
||||
<div className=""> */}
|
||||
<div className="">
|
||||
<div className="">
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr
|
||||
|
||||
>
|
||||
<tr>
|
||||
{[
|
||||
"date",
|
||||
"vendor Name",
|
||||
|
|
@ -674,7 +641,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
|
||||
textAlign: "center",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff'
|
||||
|
|
@ -709,24 +676,18 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
|
||||
|
||||
}}
|
||||
|
||||
>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status
|
||||
.replace(/_/g, " ")
|
||||
.split(" ")
|
||||
.map(
|
||||
(word) => word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status
|
||||
.replace(/_/g, " ")
|
||||
.split(" ")
|
||||
.map(
|
||||
(word) =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
|
|
@ -779,13 +740,12 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{renderPagination()}
|
||||
</div>
|
||||
// </div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
// </div>
|
||||
{renderPagination()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -809,75 +769,44 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
draft: {
|
||||
backgroundColor: "#D1D1EF",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Flexbox for alignment
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function PayInvoice() {
|
|||
date: "",
|
||||
status: "paid",
|
||||
pay_method_status: "pay_now",
|
||||
pay_method: "cash",
|
||||
pay_method: "",
|
||||
amount: "",
|
||||
remaining_amount: "", // Initialize as empty string or 0
|
||||
discount: 0,
|
||||
|
|
@ -306,28 +306,26 @@ function PayInvoice() {
|
|||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Bill/Invoice
|
||||
Add Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Bill/Invoice
|
||||
Pay Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
>
|
||||
ATM Deposit
|
||||
</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">
|
||||
|
|
@ -344,16 +342,8 @@ function PayInvoice() {
|
|||
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="col-md-12 row"
|
||||
style={{
|
||||
gap: "12%",
|
||||
paddingLeft: "3%", // Add equal padding
|
||||
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
>
|
||||
<div className="mb-3 col-md-3">
|
||||
<div className="col-md-12 row" style={{ gap: "15%" }}>
|
||||
<div className="mb-3 col-md-2" >
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -365,16 +355,16 @@ function PayInvoice() {
|
|||
|
||||
<div className="mb-3 col-md-3">
|
||||
<select
|
||||
className="input-select"
|
||||
className="form-control-borderless"
|
||||
name="vendor_department"
|
||||
value={formData.vendor_department}
|
||||
onChange={(e) => {
|
||||
const selectedValue = e.target.value;
|
||||
if (selectedValue === "add-vendor") {
|
||||
handleShow(); // Function to open modal
|
||||
handleShow(); // Modal ko open karne ke liye function
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
vendor_department: "", // Reset the field
|
||||
vendor_department: "", // Field ko reset karne ke liye
|
||||
}));
|
||||
} else {
|
||||
handleChange(e); // Existing handler for normal options
|
||||
|
|
@ -383,7 +373,6 @@ function PayInvoice() {
|
|||
>
|
||||
<option value="">Select Vendor</option>
|
||||
<option value="add-vendor">Add Vendor</option>{" "}
|
||||
|
||||
{/* Add Vendor Option */}
|
||||
{vendors
|
||||
.filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
|
||||
|
|
@ -404,11 +393,25 @@ function PayInvoice() {
|
|||
placeholder="Invoice No"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{/* <select
|
||||
className="form-control-borderless"
|
||||
onChange={(e) =>
|
||||
handleInvoiceSelect(
|
||||
filteredInvoices.find((inv) => inv.id === e.target.value)
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">Select Invoice</option>
|
||||
{filteredInvoices.map((invoice) => (
|
||||
<option key={invoice.id} value={invoice.id}>
|
||||
{invoice.invoice_no}
|
||||
</option>
|
||||
))}
|
||||
</select> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} >
|
||||
<div className="col-md-3 " >
|
||||
<div className="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
|
||||
<div className="col-md-3">
|
||||
<input
|
||||
name="amount"
|
||||
type="text"
|
||||
|
|
@ -419,7 +422,7 @@ function PayInvoice() {
|
|||
style={{ backgroundColor: "#fafafa" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-2" >
|
||||
<div className="col-md-2">
|
||||
<input
|
||||
|
||||
type="text"
|
||||
|
|
@ -478,8 +481,8 @@ function PayInvoice() {
|
|||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
|
|
@ -492,50 +495,48 @@ function PayInvoice() {
|
|||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="md-col-12 " style={{ marginLeft: "3%", marginTop: "35px" }}>
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '1px solid #ACB4AA',
|
||||
padding: '5px',
|
||||
width: "fit-content",
|
||||
borderRadius: '40px',
|
||||
|
||||
}}
|
||||
>
|
||||
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
|
||||
<div className="" 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="md-col-12 ">
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '2px 20px', // Same left and right padding
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="" 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>
|
||||
<div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
|
||||
<div className="col-md-12 mt-3" >
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="row "> {/* Use row class for Bootstrap grid */}
|
||||
|
|
@ -570,7 +571,16 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{formData.pay_method === "Bank Card/ACH/EFT" && (
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{formData.pay_method === "bank" && (
|
||||
<div className="mb-3">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
|
|
@ -615,16 +625,16 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<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', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -312,15 +312,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
return (
|
||||
<div>
|
||||
<ToastContainer />
|
||||
|
||||
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "50px",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -328,30 +326,20 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "24px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -361,30 +349,20 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -394,42 +372,33 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "390px",
|
||||
height: "130px",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
marginTop:"20px"
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
<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" }}>
|
||||
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer" style={{ gap: "10px" }}>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -526,10 +495,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
// marginLeft: "10px",
|
||||
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
height: "50px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -547,7 +516,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -593,7 +561,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -681,7 +649,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li className="text-center mt-2" >
|
||||
<li className="text-center mt-2">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ width: "163px", height: "40px" }}
|
||||
|
|
@ -705,24 +673,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr
|
||||
style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
|
||||
}}
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
<tr>
|
||||
{[
|
||||
"date",
|
||||
"vendor_department_name",
|
||||
"amount",
|
||||
"remaining_amount",
|
||||
// "updated date",
|
||||
"updated date",
|
||||
"payment_method",
|
||||
"status",
|
||||
"actions",
|
||||
|
|
@ -735,9 +692,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
cursor: "pointer",
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
textAlign: "center",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
// Add a border for separation
|
||||
}}
|
||||
>
|
||||
{header
|
||||
|
|
@ -749,7 +705,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
|
||||
<div className="dropdown">
|
||||
<ul className="dropdown-menu" aria-labelledby="actionDropdown">
|
||||
|
||||
{/* <li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
|
|
@ -797,9 +752,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
>
|
||||
{invoice.remaining_amount}
|
||||
</td>
|
||||
{/* <td onClick={() => handleCellClick(invoice, "updated_at")}>
|
||||
<td onClick={() => handleCellClick(invoice, "updated_at")}>
|
||||
{invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
|
||||
</td> */}
|
||||
</td>
|
||||
<td onClick={() => handleCellClick(invoice, "payment_method")}>
|
||||
<span style={getPaymentMethodStyle(invoice.pay_method)}>
|
||||
{invoice.pay_method &&
|
||||
|
|
@ -813,9 +768,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td onClick={() => handleCellClick(invoice, "status")}
|
||||
|
||||
>
|
||||
<td onClick={() => handleCellClick(invoice, "status")}>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status &&
|
||||
invoice.status
|
||||
|
|
@ -913,71 +866,43 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
draft: {
|
||||
backgroundColor: "#D1D1EF",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
Loading…
Reference in New Issue