Compare commits
No commits in common. "main" and "2012__UIChange" have entirely different histories.
main
...
2012__UICh
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
|
|
@ -4,11 +4,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- 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="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,16 +29,18 @@
|
|||
<!-- <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-image: url('../src/assets/Image/Pattern.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
background-position: center;
|
||||
background-blend-mode: overlay;
|
||||
font-family: Manrope;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hideonmobile {
|
||||
display: none;
|
||||
|
|
@ -59,7 +61,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<title>PaisaVara</title>
|
||||
<title>Ezhisab</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 555 B |
Binary file not shown.
|
Before Width: | Height: | Size: 657 B |
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: 965 B |
Binary file not shown.
|
Before Width: | Height: | Size: 675 B |
Binary file not shown.
|
Before Width: | Height: | Size: 484 B |
Binary file not shown.
|
Before Width: | Height: | Size: 751 B |
|
|
@ -37,7 +37,6 @@ body {
|
|||
color: #000;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
|
||||
width: 100px;
|
||||
|
|
@ -93,34 +92,24 @@ 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,15 +121,13 @@ font-weight: bold;
|
|||
.navbar .nav-item.active .nav-link {
|
||||
color: #ffffff; /* Active link color */
|
||||
background-color: #282e26;
|
||||
border-radius: 40px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold; /* Bold text for active link */
|
||||
}
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -148,15 +135,13 @@ font-weight: bold;
|
|||
.nav-item {
|
||||
margin: 0 15px;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-link {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-size: 16px !important;
|
||||
font-family: "Manrope";
|
||||
font-size: 18px !important;
|
||||
color: #002300;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-link:hover {
|
||||
|
|
@ -315,25 +300,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 */
|
||||
|
|
@ -397,7 +364,7 @@ font-weight: bold;
|
|||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
gap: 40px;
|
||||
|
||||
}
|
||||
.col-2 {
|
||||
|
|
@ -441,7 +408,6 @@ font-weight: bold;
|
|||
.table-darkcustom td {
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Styling for the last header cell */
|
||||
|
|
@ -512,7 +478,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,31 +487,28 @@ font-weight: bold;
|
|||
.search-container {
|
||||
position: relative;
|
||||
flex: 3;
|
||||
margin-left: 0px;
|
||||
max-width: 300px;
|
||||
}
|
||||
.search-container input {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
height: 50px;
|
||||
background: #f4f4f4;
|
||||
border-radius: 50px;
|
||||
|
||||
border: none;
|
||||
padding-left: 40px;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search-container input::placeholder {
|
||||
color: #282E26;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
.search-container input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.search-container-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 47%;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -736,7 +699,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,21 +718,18 @@ h3 {
|
|||
box-shadow: none;
|
||||
outline: none;
|
||||
width: auto;
|
||||
|
||||
height: 42px;
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-color: #FFAF32;
|
||||
color: rgb(0, 0, 0);
|
||||
border-radius: 60px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
/* transition: background-color 0.3s; */
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.expense-searchcontainerstart {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
.custbtn {
|
||||
box-shadow: none;
|
||||
|
|
@ -826,17 +785,14 @@ h3 {
|
|||
|
||||
|
||||
.table-responsive th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.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 {
|
||||
|
|
@ -890,18 +846,14 @@ h5 {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.modal-container {
|
||||
max-width: 768px; /* Updated to 768px */
|
||||
margin: 0;
|
||||
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
|
|
|
|||
|
|
@ -307,10 +307,10 @@ const ATMDepositTable = (props) => {
|
|||
<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();
|
||||
|
||||
|
|
@ -155,22 +157,25 @@ function AddInvoice() {
|
|||
}),
|
||||
};
|
||||
|
||||
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
|
||||
.then((response) => {
|
||||
|
||||
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) => {
|
||||
|
||||
}).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;
|
||||
|
|
@ -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,12 +288,12 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-2",
|
||||
column: "col-md-5",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
placeholder: "Amount",
|
||||
// prefixText: "USD",
|
||||
prefixText: "USD",
|
||||
},
|
||||
{
|
||||
row: 2,
|
||||
|
|
@ -296,26 +302,26 @@ 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-12",
|
||||
label: "Payment Method Options",
|
||||
type: "payment-method-options",
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-5",
|
||||
column: "col-md-12",
|
||||
label: "Payment Method Options",
|
||||
type: "pay-bank-options",
|
||||
},
|
||||
{
|
||||
row: 3,
|
||||
column: "col-md-3",
|
||||
row: 4,
|
||||
column: "col-md-6",
|
||||
label: "Due Days",
|
||||
type: "select-dueDays",
|
||||
name: "due_days",
|
||||
|
|
@ -325,14 +331,14 @@ 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",
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -418,6 +426,7 @@ function AddInvoice() {
|
|||
</div>
|
||||
);
|
||||
|
||||
|
||||
case "date":
|
||||
return (
|
||||
<div className="form-group">
|
||||
|
|
@ -434,7 +443,7 @@ function AddInvoice() {
|
|||
case "prefix-input":
|
||||
return (
|
||||
<div
|
||||
className="form-group col-md-12"
|
||||
className="form-group col-md-6"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
|
@ -443,13 +452,13 @@ function AddInvoice() {
|
|||
height: "50px",
|
||||
}}
|
||||
>
|
||||
<div className="input-groups">
|
||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
||||
<div className="input-group">
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
{field.prefixText}
|
||||
</span> */}
|
||||
</span>
|
||||
<input
|
||||
type="text" // Set input type to 'text' to allow decimals
|
||||
style={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
|
||||
style={{ border: "none" }}
|
||||
className="form-control-borderless"
|
||||
name={field.name}
|
||||
placeholder={field.placeholder}
|
||||
|
|
@ -458,8 +467,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 +480,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 +507,7 @@ function AddInvoice() {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -573,99 +583,46 @@ 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">
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px', }}>
|
||||
<label className="me-4">{field.label}</label>
|
||||
{field.options.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
formData[field.name] === option.value
|
||||
? "#4a5546"
|
||||
: "transparent",
|
||||
padding: "5px 25px",
|
||||
borderRadius: "20px",
|
||||
}}
|
||||
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",
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</label>
|
||||
<div key={index} className="form-check me-4">
|
||||
{" "}
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name={field.name}
|
||||
value={option.value}
|
||||
checked={formData[field.name] === option.value}
|
||||
onChange={handlePaymentMethodChange}
|
||||
/>
|
||||
<label className="form-check-label">{option.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "payment-method-options":
|
||||
return (
|
||||
formData.pay_method_status === "pay_now" && (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: "2px solid #ACB4AA",
|
||||
padding: "5px 5px", // Add padding to give space on both sides
|
||||
width: "fit-content",
|
||||
borderRadius: "40px",
|
||||
marginBottom: "30px",
|
||||
}}
|
||||
>
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px' }}>
|
||||
{/* 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 "
|
||||
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 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>
|
||||
|
|
@ -690,8 +647,8 @@ function AddInvoice() {
|
|||
return (
|
||||
(formData.pay_method === "cheque" ||
|
||||
formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<div className="row mb-3" >
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<select
|
||||
required
|
||||
|
|
@ -710,15 +667,15 @@ function AddInvoice() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="col-md-4">
|
||||
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="cheque_no"
|
||||
placeholder="Cheque Number"
|
||||
placeholder="Enter Cheque Number"
|
||||
value={formData.cheque_no}
|
||||
onChange={handleChange}
|
||||
maxLength={20}
|
||||
|
|
@ -726,8 +683,7 @@ function AddInvoice() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-12">
|
||||
<div className="form-group">
|
||||
<input
|
||||
className="form-control-borderless"
|
||||
|
|
@ -737,7 +693,9 @@ function AddInvoice() {
|
|||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
@ -752,31 +710,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 +740,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">
|
||||
<label htmlFor="prepaid_amount">Prepaid Tax</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -826,47 +777,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,6 +825,7 @@ function AddInvoice() {
|
|||
onVendorAdded={handleVendorAdded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,28 +153,26 @@ function AtmDeposit() {
|
|||
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" }}>
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span> */}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
style={{ flex: 1, }}
|
||||
style={{ border: "none", flex: 1 }}
|
||||
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 mb-3">
|
||||
<div className="mb-3 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,56 +224,93 @@ function BankDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
className="col-md-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between", // Adjust spacing between items
|
||||
gap: "50px", // Add gap for consistent spacing
|
||||
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="form-group col-3"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
||||
|
||||
flex: "1", // Allow the field to adjust in size
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<div className="mb-3 col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
|
||||
className="form-control"
|
||||
name="cash_amount"
|
||||
placeholder="Cash Amount"
|
||||
value={formData.cash_amount || ""}
|
||||
className="form-control-borderless"
|
||||
name="note"
|
||||
value={formData.note}
|
||||
onChange={handleChange}
|
||||
maxLength={10}
|
||||
placeholder="Notes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-12">
|
||||
<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="col-md-12 row mt-4">
|
||||
<div
|
||||
className="form-group "
|
||||
className="form-group col-md-5"
|
||||
style={{
|
||||
display: "flex",
|
||||
|
||||
|
||||
|
||||
flex: "1",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="text" // Change to text because we want to handle the regex validation manually
|
||||
style={{ border: "none" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Cash Amount"
|
||||
value={formData.cash_amount || ""}
|
||||
onChange={handleChange}
|
||||
maxLength={10} // Limit input to 10 digits
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="form-group col-md-5"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span
|
||||
className="input-group-text"
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
|
||||
style={{ border: "none" }}
|
||||
className="form-control-borderless"
|
||||
name="cheque_amount"
|
||||
placeholder="Cheque Amount"
|
||||
|
|
@ -313,44 +319,18 @@ function BankDeposit() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="form-group"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border:"none",
|
||||
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 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>
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div className="pagination">
|
||||
{/* <button
|
||||
<button
|
||||
className="pgbtn"
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
|
|
@ -284,11 +284,11 @@ const BankDepositTable = (props) => {
|
|||
>
|
||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||
</svg>
|
||||
</button> */}
|
||||
</button>
|
||||
|
||||
{paginationItems}
|
||||
|
||||
{/* <button
|
||||
<button
|
||||
className="pgbtn"
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
|
|
@ -302,22 +302,20 @@ const BankDepositTable = (props) => {
|
|||
>
|
||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||
</svg>
|
||||
</button> */}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "50px",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -325,30 +323,20 @@ const BankDepositTable = (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>
|
||||
|
|
@ -358,30 +346,20 @@ const BankDepositTable = (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>
|
||||
|
|
@ -391,42 +369,32 @@ const BankDepositTable = (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>
|
||||
</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="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,20 @@ 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",
|
||||
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderTopRightRadius: index === 5 ? "60px" : "0",
|
||||
borderBottomRightRadius: index === 5 ? "60px" : "0",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
}}
|
||||
>
|
||||
|
|
@ -758,13 +721,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 +735,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,25 +18,22 @@
|
|||
}
|
||||
.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 {
|
||||
background-color: #ffaf32; /* Yellow background */
|
||||
border-radius: 27px;
|
||||
border-radius: 20px;
|
||||
color: black; /* Black text */
|
||||
padding: 10px 20px; /* Ensure padding consistency for buttons */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -107,7 +89,7 @@
|
|||
.input-group {
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 50px;
|
||||
/* background-color: #f4f4f4; */
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
|
|
@ -119,26 +101,19 @@
|
|||
|
||||
.table th {
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
/* margin-right: 50px; */
|
||||
background-color: #ffffff;
|
||||
height: 60px;
|
||||
background-color: #f9f9f9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
text-align: center;
|
||||
|
||||
border-bottom: .5px solid #f4f4f4;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -152,13 +127,10 @@
|
|||
border-end-start-radius: 24px;
|
||||
border-end-end-radius: 24px;
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
background-color: #ffffff;
|
||||
border-left: 2px solid #ebeaf2;
|
||||
border-Right: 2px solid #ebeaf2;
|
||||
|
||||
background-color: #f4f4f4;
|
||||
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 {
|
||||
|
|
@ -344,7 +310,8 @@ input[type="color"]:focus,
|
|||
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 */
|
||||
|
|
@ -358,22 +325,4 @@ 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,15 +284,13 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "50px",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -300,30 +298,20 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
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>
|
||||
|
|
@ -333,30 +321,20 @@ const InvoiceTable = ({ 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,864
|
||||
<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>
|
||||
|
|
@ -366,36 +344,26 @@ const InvoiceTable = ({ 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: "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>
|
||||
</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={{
|
||||
|
||||
|
||||
}}
|
||||
|
||||
>
|
||||
<td>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status
|
||||
.replace(/_/g, " ")
|
||||
.split(" ")
|
||||
.map(
|
||||
(word) => word.charAt(0).toUpperCase() + word.slice(1)
|
||||
(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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{renderPagination()}
|
||||
</div>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -803,81 +763,24 @@ const paymentMethodStyles = {
|
|||
const getPaymentMethodStyle = (method) => ({
|
||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||
borderRadius: "5px",
|
||||
|
||||
padding: "10px 20px",
|
||||
color: "#000",
|
||||
});
|
||||
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
All: { backgroundColor: "#4545DB" },
|
||||
// draft: { backgroundColor: '#4545DB7C' },
|
||||
unpaid: { backgroundColor: "#ff2024" },
|
||||
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
padding: "10px 20px",
|
||||
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:"10%"}}>
|
||||
<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,24 +393,36 @@ 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">
|
||||
<div className="col-md-2">
|
||||
<input
|
||||
name="amount"
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control-borderless"
|
||||
value={formData.amount}
|
||||
readOnly
|
||||
placeholder="Amount"
|
||||
style={{ backgroundColor: "#fafafa" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<input
|
||||
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="pay_amount"
|
||||
|
|
@ -465,9 +466,12 @@ function PayInvoice() {
|
|||
value={grandTotal || ""}
|
||||
readOnly
|
||||
style={{
|
||||
border: 'none', // Remove all borders
|
||||
backgroundColor:'transparent',
|
||||
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
|
||||
|
||||
backgroundColor: '#fafafa',
|
||||
|
||||
outline: 'none', // Remove outline
|
||||
padding: '6px 0', // Optional: Add padding to the top and bottom
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -475,38 +479,17 @@ function PayInvoice() {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
maxLength={2}
|
||||
className="form-control"
|
||||
value={formData.after_discount || ""}
|
||||
placeholder="After Discount Amount"
|
||||
readOnly
|
||||
/>
|
||||
</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",
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 40px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
|
||||
}}
|
||||
>
|
||||
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
|
||||
<div className="" key={method}>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="me-3" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
|
|
@ -526,7 +509,6 @@ function PayInvoice() {
|
|||
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 */}
|
||||
|
|
@ -534,15 +516,32 @@ function PayInvoice() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
|
||||
|
||||
|
||||
<div className="">
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
maxLength={2}
|
||||
className="form-control"
|
||||
value={formData.after_discount || ""}
|
||||
placeholder="After Discount Amount"
|
||||
readOnly
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="row "> {/* Use row class for Bootstrap grid */}
|
||||
<div className="col-md-2 mb-3"> {/* First column for bank select */}
|
||||
<div className="">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
<select
|
||||
required
|
||||
className="form-control-borderless" // Keep Bootstrap styles
|
||||
className="form-control-borderless"
|
||||
name="bank"
|
||||
value={formData.bank}
|
||||
onChange={handleChange}
|
||||
|
|
@ -555,8 +554,7 @@ function PayInvoice() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
|
||||
<div className="mb-3 col-md-6">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
|
|
@ -568,9 +566,10 @@ function PayInvoice() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 +614,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
|
||||
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
|
||||
|
|
@ -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,19 @@ 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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
},
|
||||
All: { backgroundColor: "#4545DB" },
|
||||
// draft: { backgroundColor: "#4545DB7C" },
|
||||
unpaid: { backgroundColor: "#ff2024" },
|
||||
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
|
||||
padding: "10px 20px",
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -9,9 +9,6 @@ import { useNavigate } from "react-router-dom";
|
|||
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||
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() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -628,148 +625,15 @@ export default function Expense() {
|
|||
<div className="main-container">
|
||||
<div className="d-flex p-2">
|
||||
<div className="expensecontainer d-flex flex-column pd-2">
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
||||
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 className="mb-1">Expense</h3>
|
||||
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||
{" "}
|
||||
+ Add Invoice
|
||||
<img
|
||||
src={invoiceIcon}
|
||||
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 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 className="table-responsive">
|
||||
|
||||
|
||||
<ToastContainer />
|
||||
<DataTable
|
||||
data={expenseInvoice}
|
||||
|
|
@ -796,7 +660,7 @@ export default function Expense() {
|
|||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "1200px",
|
||||
width: "700px",
|
||||
backgroundColor: "white",
|
||||
margin: "100px auto",
|
||||
padding: "20px",
|
||||
|
|
@ -811,7 +675,6 @@ export default function Expense() {
|
|||
</h5>
|
||||
|
||||
<svg
|
||||
|
||||
onClick={toggleModal}
|
||||
width="14"
|
||||
height="14"
|
||||
|
|
@ -831,16 +694,13 @@ export default function Expense() {
|
|||
<div className="modal-body">
|
||||
<form>
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
paddingRight: "10px",
|
||||
|
||||
paddingRight: "10px"
|
||||
}}
|
||||
type="date"
|
||||
className="form-control"
|
||||
|
|
@ -851,16 +711,12 @@ export default function Expense() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
outline: "none", // Remove outline to prevent default focus styling
|
||||
|
||||
}}
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -870,15 +726,15 @@ export default function Expense() {
|
|||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex col-md-12">
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control"
|
||||
|
|
@ -908,18 +764,12 @@ export default function Expense() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex col-md-12">
|
||||
|
||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
className="form-control"
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
name="vendor_department_service_titles"
|
||||
|
|
@ -928,7 +778,7 @@ export default function Expense() {
|
|||
id="expenseType"
|
||||
required
|
||||
>
|
||||
<option value="">Expense Type</option>
|
||||
<option value="">Select Expense Type</option>
|
||||
<option value="add-expense">Add Expense Type</option>
|
||||
{filteredExpenseTypes.map((service) => (
|
||||
<option key={service.id} value={service.title}>
|
||||
|
|
@ -937,207 +787,85 @@ export default function Expense() {
|
|||
))}
|
||||
</select>
|
||||
</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={{
|
||||
backgroundColor: "#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"
|
||||
|
||||
>
|
||||
<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'}
|
||||
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"
|
||||
|
||||
>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="pay_now"
|
||||
checked={formData.pay_method_status === '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"
|
||||
|
||||
>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="credit_invoice"
|
||||
checked={formData.pay_method_status === '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>
|
||||
|
||||
|
||||
|
||||
{showPaymentOptions && (
|
||||
<div
|
||||
className="d-flex col-md-6 mb-3"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '10px 10px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
display: 'flex', // Use flexbox for inner items
|
||||
gap: '10px', // Add spacing between the options
|
||||
marginTop: '20px', // Keep this if you want some space above
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ value: "cash", label: "Cash" },
|
||||
{ value: "cheque", label: "Check" },
|
||||
{ value: "bank", label: "Bank Card/ACH/EFT" }
|
||||
].map((method) => (
|
||||
<label
|
||||
key={method.value}
|
||||
className="radio-inline"
|
||||
style={{
|
||||
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
|
||||
color: formData.pay_method === method.value ? "white" : "black",
|
||||
|
||||
padding: '5px 10px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<div className="d-flex col-md-6 mb-3">
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value={method.value}
|
||||
value="cash"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
{method.label} {/* Use the label defined in the array */}
|
||||
/>{" "}
|
||||
Cash
|
||||
</label>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="cheque"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Check
|
||||
</label>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="bank"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Bank Card/ACH/EFT
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{(formData.pay_method_status === "pay_later" ||
|
||||
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
|
||||
className="form-control col-md-6 me-2"
|
||||
name="days"
|
||||
value={formData.days || ""}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
required
|
||||
|
|
@ -1153,11 +881,8 @@ export default function Expense() {
|
|||
<input
|
||||
type="text"
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "50px",
|
||||
}}
|
||||
className="form-control d-flex col-md-5"
|
||||
|
|
@ -1175,11 +900,8 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-4 mt-2">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1202,10 +924,8 @@ export default function Expense() {
|
|||
className="form-control me-2"
|
||||
placeholder="Check Number"
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1219,10 +939,8 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-4 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -1238,10 +956,8 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1261,10 +977,8 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -1292,10 +1006,8 @@ export default function Expense() {
|
|||
|
||||
{formData.prepaid_tax && (
|
||||
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}>
|
||||
<div className="input-group col-md-6">
|
||||
|
|
@ -1309,7 +1021,7 @@ export default function Expense() {
|
|||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* <span
|
||||
<span
|
||||
className="input-group-text prefixtext"
|
||||
style={{
|
||||
border: "none",
|
||||
|
|
@ -1317,7 +1029,7 @@ export default function Expense() {
|
|||
}}
|
||||
>
|
||||
USD
|
||||
</span> */}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -1339,7 +1051,57 @@ export default function Expense() {
|
|||
</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>
|
||||
|
||||
</div>
|
||||
|
|
@ -1348,14 +1110,12 @@ export default function Expense() {
|
|||
type="button"
|
||||
className="btn btn-secondary-outline"
|
||||
onClick={toggleModal}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
|
||||
className="btn"
|
||||
className="btn btn-primary"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
|
|
|
|||
|
|
@ -296,7 +296,7 @@ const GasTypeTable = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@ const HouseChargeTable = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const LotteryInventoryTable = ({
|
|||
|
||||
return (
|
||||
<div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
{columns.map((col, index) => (
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ const LotteryReportTable = ({
|
|||
<div className="d-flex mb-3">
|
||||
<div className="expense-searchcontainerstart d-flex"></div>
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ const LotteryTable = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
{columns.map((col, index) => (
|
||||
|
|
|
|||
|
|
@ -335,7 +335,7 @@ const WeeklyInvoiceTable = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<table className="data-table custom-table">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const DataTable = ({
|
|||
};
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
@ -180,7 +180,7 @@ const DataTable = ({
|
|||
{showFooter && (
|
||||
<nav>
|
||||
<ul className="pagination">
|
||||
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<span
|
||||
|
||||
style={{
|
||||
|
|
@ -196,9 +196,9 @@ const DataTable = ({
|
|||
textAlign: "center"
|
||||
}}
|
||||
onClick={handlePrev}><</span>
|
||||
</li> */}
|
||||
</li>
|
||||
{renderPagination()}
|
||||
{/* <li
|
||||
<li
|
||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -219,7 +219,7 @@ const DataTable = ({
|
|||
textAlign: "center"
|
||||
}}
|
||||
onClick={handleNext}>> </span>
|
||||
</li> */}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -126,62 +126,44 @@ const PayrollTable = ({
|
|||
draft: {
|
||||
backgroundColor: "#D1D1EF",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
backgroundColor: "#EF3E49",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 20px",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px",
|
||||
textAlign: 'center',
|
||||
alignItems: 'center'
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
backgroundColor: "#5856AC",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 20px",
|
||||
textAlign: 'center',
|
||||
alignItems: 'center',
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
backgroundColor: "#FFB830",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 20px",
|
||||
textAlign: 'center',
|
||||
alignItems: 'center',
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
},
|
||||
};
|
||||
const paymentMethodStyles = {
|
||||
bank: { backgroundColor: "" },
|
||||
"Business Cash": { backgroundColor: "" },
|
||||
"Credit Card": { backgroundColor: "" },
|
||||
cash: { backgroundColor: "" },
|
||||
cheque: { backgroundColor: "" },
|
||||
pay_later: { backgroundColor: "" },
|
||||
pay_now: { backgroundColor: "" },
|
||||
credit_invoice: { backgroundColor: "" },
|
||||
bank: { backgroundColor: "#57A09C" },
|
||||
"Business Cash": { backgroundColor: "#38400B" },
|
||||
"Credit Card": { backgroundColor: "#28a745" },
|
||||
cash: { backgroundColor: "#CAC59D" },
|
||||
cheque: { backgroundColor: "#38400B" },
|
||||
pay_later: { backgroundColor: "#E55477" },
|
||||
pay_now: { backgroundColor: "#A9B0F0" },
|
||||
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||
};
|
||||
|
||||
const getPaymentMethodStyle = (method) => ({
|
||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
color: "#000",
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
const downloadCSV = () => {
|
||||
|
|
@ -206,18 +188,15 @@ const PayrollTable = ({
|
|||
<div className="data-table-container">
|
||||
<div className="d-flex mb-3">
|
||||
<div className="expense-searchcontainerstart d-flex">
|
||||
<div className="search-container"
|
||||
>
|
||||
<div className="search-container">
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search"
|
||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
/>
|
||||
<SearchIcon />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-dark custbtn"
|
||||
|
|
@ -239,8 +218,6 @@ const PayrollTable = ({
|
|||
</svg>
|
||||
Export To Excel
|
||||
</button>
|
||||
|
||||
|
||||
{/* <button className="btn custbtn2" type="submit">
|
||||
<svg
|
||||
width="24"
|
||||
|
|
@ -261,57 +238,16 @@ const PayrollTable = ({
|
|||
Filter
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
<div style={{ marginRight: "58%" }}>
|
||||
<div
|
||||
className="expense-search d-flex align-items-center"
|
||||
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid #DBDBDB",
|
||||
borderRadius: "10px",
|
||||
// boxSizing: "border-box",
|
||||
cursor: "pointer",
|
||||
|
||||
width: "170px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "16px",
|
||||
padding: "5px",
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
</span>
|
||||
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||
<h3 className="me-2">Show</h3>
|
||||
<select
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
backgroundColor: "#282E26",
|
||||
borderRadius: "0px 10px 10px 0px",
|
||||
color: "#F4FFEE",
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "16px",
|
||||
lineHeight: "18px",
|
||||
padding: "5px 8px",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
setCurrentPage(1); // Reset to first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
|
|
@ -320,12 +256,8 @@ const PayrollTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
{columns.map((col, index) => (
|
||||
|
|
@ -554,7 +486,7 @@ const PayrollTable = ({
|
|||
<nav>
|
||||
<ul className="pagination">
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
{/* <span
|
||||
<span
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
|
|
@ -569,7 +501,7 @@ const PayrollTable = ({
|
|||
onClick={handlePrev}
|
||||
>
|
||||
<PrevIcon />
|
||||
</span> */}
|
||||
</span>
|
||||
|
||||
</li>
|
||||
{renderPagination()}
|
||||
|
|
@ -578,7 +510,7 @@ const PayrollTable = ({
|
|||
}`}
|
||||
>
|
||||
|
||||
{/* <span
|
||||
<span
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
|
|
@ -593,7 +525,7 @@ const PayrollTable = ({
|
|||
onClick={handleNext}
|
||||
>
|
||||
<NextIcon />
|
||||
</span> */}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -107,15 +107,15 @@ function ManageDepartments() {
|
|||
(dept) => dept.type === "department"
|
||||
);
|
||||
return (
|
||||
<div className="" style={{marginTop:"5%"}}>
|
||||
<div className="store-container">
|
||||
<ToastContainer />
|
||||
{/* <p className="setting-title">Manage Departments</p> */}
|
||||
<div className="department-container">
|
||||
<p className="setting-title">Manage Departments</p>
|
||||
<div className="create-department-section">
|
||||
<div className="input-container">
|
||||
<div className="input-row">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter Department Name"
|
||||
placeholder="New Department"
|
||||
className="input-field"
|
||||
value={editDepartmentId ? editDepartmentTitle : newDepartment}
|
||||
onChange={(e) => {
|
||||
|
|
@ -125,21 +125,14 @@ function ManageDepartments() {
|
|||
setNewDepartment(e.target.value);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
|
||||
{editDepartmentId ? "Update Department" : " + Add Department"}
|
||||
<button className="dept-button" onClick={handleSaveDepartment}>
|
||||
{editDepartmentId ? "Update" : " + Add"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="store-container">
|
||||
|
||||
<div className="show-department-section">
|
||||
<div className="dept-cards-row">
|
||||
{filteredDepartments.length === 0 ? (
|
||||
|
|
@ -208,8 +201,6 @@ function ManageDepartments() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -179,7 +179,6 @@ const ManageUserTable = ({
|
|||
<div className="expense-searchcontainerstart d-flex">
|
||||
<div className="search-container">
|
||||
<input
|
||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
|
|
@ -277,57 +276,16 @@ const ManageUserTable = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ marginRight: "69%" }}>
|
||||
<div
|
||||
className="expense-search d-flex align-items-center"
|
||||
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid #DBDBDB",
|
||||
borderRadius: "10px",
|
||||
// boxSizing: "border-box",
|
||||
cursor: "pointer",
|
||||
|
||||
width: "170px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "16px",
|
||||
padding: "5px",
|
||||
color: "#000000",
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
</span>
|
||||
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||
<h3 className="me-2">Show</h3>
|
||||
<select
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
backgroundColor: "#282E26",
|
||||
borderRadius: "0px 10px 10px 0px",
|
||||
color: "#F4FFEE",
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "16px",
|
||||
lineHeight: "18px",
|
||||
padding: "5px 8px",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
setCurrentPage(1); // Reset to first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
|
|
@ -336,12 +294,8 @@ const ManageUserTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
@ -464,7 +418,7 @@ const ManageUserTable = ({
|
|||
{showFooter && (
|
||||
<nav>
|
||||
<ul className="pagination">
|
||||
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
|
|
@ -483,9 +437,9 @@ const ManageUserTable = ({
|
|||
<
|
||||
</span>
|
||||
|
||||
</li> */}
|
||||
</li>
|
||||
{renderPagination()}
|
||||
{/* <li
|
||||
<li
|
||||
className={`prev-next ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
|
|
@ -508,7 +462,7 @@ const ManageUserTable = ({
|
|||
>
|
||||
>{" "}
|
||||
</span>
|
||||
</li> */}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@ import { toast, ToastContainer } from "react-toastify";
|
|||
import CustomSwitch from "./CustomSwitch";
|
||||
import ManageUserTable from "./ManageUserTable";
|
||||
import Swal from "sweetalert2";
|
||||
import userIcon from '../../../../assets/Image/user.png'
|
||||
import storeIcon from '../../../../assets/Image/store.png'
|
||||
import ownerIcon from '../../../../assets/Image/owner.png'
|
||||
|
||||
|
||||
|
||||
function ManageUsers() {
|
||||
|
|
@ -393,67 +389,27 @@ function ManageUsers() {
|
|||
<div className="due-days">
|
||||
<div className="header-row">
|
||||
<div className="setting-title">Manage Users</div>
|
||||
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
|
||||
<div className="btn-position">
|
||||
<button
|
||||
className="btn cus d-flex align-items-center"
|
||||
className="vendor-add-button"
|
||||
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
||||
>
|
||||
+ Add New User
|
||||
<img
|
||||
src={userIcon}
|
||||
alt="user 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",
|
||||
}}
|
||||
className="vendor-add-button"
|
||||
onClick={() => handleShowStoreModal()} // Open modal for adding a user
|
||||
>
|
||||
+ Add New Store
|
||||
<img
|
||||
src={storeIcon}
|
||||
alt="store 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",
|
||||
}}
|
||||
className="vendor-add-button"
|
||||
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
|
||||
>
|
||||
+ Assign Existing User As Owner
|
||||
<img
|
||||
src={ownerIcon}
|
||||
alt="owner Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ManageUserTable
|
||||
data={users}
|
||||
columns={columns}
|
||||
|
|
@ -469,10 +425,10 @@ function ManageUsers() {
|
|||
show={true}
|
||||
handleClose={handleCloseUserModal}
|
||||
title={currentUserId ? "Edit User" : "Add New User"}
|
||||
width="700px"
|
||||
width="1054px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group d-flex flex-column p-5">
|
||||
<div className="form-group d-flex flex-column">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -480,13 +436,7 @@ function ManageUsers() {
|
|||
placeholder="Full Name"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
|
|
@ -494,20 +444,14 @@ function ManageUsers() {
|
|||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<input
|
||||
type="tel"
|
||||
className="input-field"
|
||||
placeholder="Phone Number "
|
||||
placeholder="Phone Number (without country code)"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => {
|
||||
|
||||
|
|
@ -517,25 +461,13 @@ function ManageUsers() {
|
|||
}
|
||||
}}
|
||||
maxLength={10}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
/>
|
||||
<select
|
||||
className="input-field"
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
>
|
||||
<option value="">Select Role for User</option>
|
||||
{roles.map((r) => (
|
||||
|
|
@ -561,7 +493,7 @@ function ManageUsers() {
|
|||
style={{
|
||||
marginRight: "40px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
|
|
@ -589,10 +521,10 @@ function ManageUsers() {
|
|||
show={true}
|
||||
handleClose={handleCloseStoreModal}
|
||||
title={"Add New Store"}
|
||||
width="700px"
|
||||
width="1054px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group p-5">
|
||||
<div className="form-group">
|
||||
{/* Wrapper for Flexbox */}
|
||||
<div className="d-flex flex-wrap">
|
||||
{/* Left Side */}
|
||||
|
|
@ -609,12 +541,7 @@ function ManageUsers() {
|
|||
store_name: e.target.value,
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
|
|
@ -629,12 +556,7 @@ function ManageUsers() {
|
|||
address_line1: e.target.value,
|
||||
}))
|
||||
}
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
|
|
@ -644,12 +566,7 @@ function ManageUsers() {
|
|||
placeholder="City"
|
||||
value={formData.city}
|
||||
readOnly
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -664,12 +581,7 @@ function ManageUsers() {
|
|||
value={formData.pincode}
|
||||
onChange={handlePincodeChange}
|
||||
onBlur={handlePincodeBlur}
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
maxLength={5}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -683,12 +595,7 @@ function ManageUsers() {
|
|||
placeholder="State"
|
||||
value={formData.state}
|
||||
readOnly
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
|
|
@ -698,12 +605,7 @@ function ManageUsers() {
|
|||
placeholder="Country"
|
||||
value={formData.country}
|
||||
readOnly
|
||||
style={{
|
||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -715,7 +617,7 @@ function ManageUsers() {
|
|||
style={{
|
||||
marginRight: "40px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
|
|
@ -741,32 +643,26 @@ function ManageUsers() {
|
|||
<ReusableModal
|
||||
show={true}
|
||||
handleClose={handleCloseAssignOwnerModal}
|
||||
title="Assign Admin as Owner"
|
||||
title="Assign Admin"
|
||||
width="600px"
|
||||
>
|
||||
<form onSubmit={handleAssignOwnerSubmit}>
|
||||
<div className="form-group d-flex flex-column mt-1 p-3 ">
|
||||
<div className="form-group d-flex align-items-center mt-1">
|
||||
<input
|
||||
type="email"
|
||||
className="input-field"
|
||||
placeholder="Enter User Email"
|
||||
value={ownerEmail}
|
||||
onChange={(e) => setOwnerEmail(e.target.value)}
|
||||
style={{
|
||||
width: "483px",
|
||||
marginBottom: "20px", // Add margin between email and button
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "20px" }}
|
||||
required
|
||||
/>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
||||
<button
|
||||
style={{
|
||||
marginRight: "40px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
|
|
@ -782,6 +678,8 @@ function ManageUsers() {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
</ReusableModal>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const ReusableModal = ({
|
|||
};
|
||||
|
||||
const modalContentStyle = {
|
||||
borderRadius: "30px",
|
||||
borderRadius: "15px",
|
||||
overflow: "hidden",
|
||||
width: width, // use the width prop
|
||||
height: height, // use the height prop
|
||||
|
|
@ -57,32 +57,21 @@ const ReusableModal = ({
|
|||
};
|
||||
|
||||
const headerStyle = {
|
||||
backgroundColor: "#fff",
|
||||
backgroundColor: "#F0F0F0",
|
||||
borderTopLeftRadius: "15px",
|
||||
borderTopRightRadius: "15px",
|
||||
height: "55px",
|
||||
display: "flex",
|
||||
border:'none',
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "0 16px", // Add padding for space between the content and edges
|
||||
};
|
||||
|
||||
|
||||
const titleStyle = {
|
||||
fontFamily: "'Manrope', sans-serif",
|
||||
fontWeight: "600",
|
||||
fontWeight: "600", // semibold
|
||||
fontSize: "20px",
|
||||
color: "#002300",
|
||||
margin: 0,
|
||||
textAlign: "center",
|
||||
flex: 1, // Allow the title to take up available space
|
||||
};
|
||||
|
||||
|
||||
const closeButtonStyle = {
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto", // Push the close button to the far right
|
||||
margin: 0, // remove default margin
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -99,7 +88,6 @@ const ReusableModal = ({
|
|||
<h5 className="modal-title" style={titleStyle}>
|
||||
{title}
|
||||
</h5>
|
||||
<div style={closeButtonStyle}>
|
||||
<svg
|
||||
onClick={handleClose}
|
||||
width="26"
|
||||
|
|
@ -116,7 +104,6 @@ const ReusableModal = ({
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-body">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -312,7 +312,7 @@ const SettingTable = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<table className="data-table custom-table" style={{borderRadius:"none"}} >
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
|
|||
|
|
@ -167,12 +167,10 @@
|
|||
.due-days {
|
||||
padding: 20px; /* Adjust as needed */
|
||||
margin: 20px auto;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
|
||||
border-radius: 40px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
width: 1600px;
|
||||
max-width: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.due-card {
|
||||
position: relative;
|
||||
|
|
@ -264,35 +262,13 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start; /* Align items to the start (left) */
|
||||
border-radius: 40px;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
margin: 20px auto;
|
||||
background-color: #ffffff;
|
||||
width: 1600px;
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.department-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start; /* Align items to the start (top) */
|
||||
align-items: flex-start; /* Align items to the start (left) */
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
|
||||
border: none; /* Ensure no border */
|
||||
border-bottom: 2px solid #ccc; /* Set a bottom border */
|
||||
margin: 20px 0; /* Center vertically with top and bottom margins */
|
||||
background-color: #ffffff;
|
||||
width: 850px; /* Set a fixed width */
|
||||
max-width: 100%; /* Ensure it doesn't exceed the screen width */
|
||||
margin-left: 160px; /* Align to the left with 9% margin */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.setting-title {
|
||||
margin-bottom: 10px; /* Space between title and inputs */
|
||||
font-size: 24px; /* Adjust as needed */
|
||||
|
|
@ -308,7 +284,7 @@
|
|||
padding: 10px;
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f6f6f6;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -469,25 +445,22 @@
|
|||
gap: 10px; /* Space between cards */ /* space above cards */
|
||||
}
|
||||
.dept-card {
|
||||
width: 474px; /* Fixed width */
|
||||
height: 70px; /* Fixed height */
|
||||
width: 474px; /* fixed width */
|
||||
height: 70px; /* fixed height */
|
||||
padding: 10px;
|
||||
border: 1px solid #EBEAF2; /* Add border color */
|
||||
border-radius: 20px; /* Rounded corners */
|
||||
display: flex; /* Flexbox layout */
|
||||
align-items: center; /* Center items vertically */
|
||||
justify-content: space-between; /* Space items evenly */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */
|
||||
border: 1px solid #f6f6f6;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dept-info {
|
||||
width: 386px;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
|
||||
border: none; /* Remove the redundant border */
|
||||
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid rgba(0, 35, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.create-department-section {
|
||||
width: 100%;
|
||||
|
|
@ -541,34 +514,31 @@ input[type="date"] {
|
|||
}
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border: 2px solid #F4F4F4;
|
||||
border: 1px solid #F4F4F4;
|
||||
border-collapse: collapse;
|
||||
/* border-radius: 20px 20px 0 0; */
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-header th, .table-body td {
|
||||
/* border: 1px solid #F4F4F4; */
|
||||
border: 1px solid #F4F4F4;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.table-header th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
background-color: #f2f2f2;
|
||||
color: #002300;
|
||||
cursor: pointer; /* Added cursor for sortable columns */
|
||||
}
|
||||
.table-body td {
|
||||
padding-left: 20px;
|
||||
color: #002300;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
|
||||
}
|
||||
.table-body tr:last-child td {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
}
|
||||
.table-body {
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
}
|
||||
.no-column {
|
||||
width: 100px;
|
||||
|
|
@ -598,8 +568,6 @@ input[type="date"] {
|
|||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 10px 0;
|
||||
background-color: #ffffff;
|
||||
|
||||
}
|
||||
.pagination .page-item {
|
||||
margin: 0 5px;
|
||||
|
|
@ -607,34 +575,41 @@ input[type="date"] {
|
|||
.pagination .page-link {
|
||||
padding: 10px;
|
||||
border: 1px solid #F4F4F4;
|
||||
/* background-color: #ffffff; */
|
||||
background-color: #b6d7a8;
|
||||
border-radius: 30px;
|
||||
border-radius: 50%;
|
||||
color: #002300;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
.pagination .page-link:hover {
|
||||
background-color: red;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.pagination .page-item.active .page-link {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 30px;
|
||||
background-color: #ffaf32; /* Yellow background */
|
||||
background-color: #FFFFFF;
|
||||
color: #002300;
|
||||
border-color:#fbfbfbfb;
|
||||
border: 1px solid #d3d3d3fb;
|
||||
}
|
||||
.pagination .page-item.disabled .page-link {
|
||||
opacity: 0.5;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -336,9 +336,9 @@ function StoreInformation() {
|
|||
maxWidth: '300px',
|
||||
textAlign: 'center',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid #282E26',
|
||||
border: '1px solid #6666ff',
|
||||
fontWeight: '800',
|
||||
backgroundColor: plan.is_active ? 'transparent' : '#282E26',
|
||||
backgroundColor: plan.is_active ? 'transparent' : '#6666ff',
|
||||
color: plan.is_active ? '#000' : '#fff',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
|
|||
import { toast, ToastContainer } from "react-toastify";
|
||||
import PayrollTableWithButton from "./PayrollTableWithButton";
|
||||
import Swal from "sweetalert2";
|
||||
import employeeIcon from '../../../../assets/Image/employee.png'
|
||||
|
||||
|
||||
export default function Payroll() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -380,9 +378,9 @@ export default function Payroll() {
|
|||
<div className="p-2">
|
||||
<div className="expensecontainer d-flex flex-column pd-2 mb-2">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 className="mb-1">Manage Employee</h3>
|
||||
<h3 className="mb-1">Manage Payroll</h3>
|
||||
<button
|
||||
className="btn cus d-flex align-items-center"
|
||||
className="btn btn-primary cus"
|
||||
onClick={() => {
|
||||
// fetchBankData();
|
||||
setModalType('new');
|
||||
|
|
@ -390,11 +388,6 @@ export default function Payroll() {
|
|||
}}
|
||||
>
|
||||
+ Add Employee
|
||||
<img
|
||||
src={employeeIcon}
|
||||
alt="employee Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<PayrollTableWithButton
|
||||
|
|
@ -414,117 +407,69 @@ export default function Payroll() {
|
|||
</div>
|
||||
{ }
|
||||
{showModal && (
|
||||
<div className="modal" style={{}} onClick={closeModal}>
|
||||
<div className="modal-overlay" onClick={closeModal}>
|
||||
<div
|
||||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
|
||||
style={{ width: modalType === 'payment' ? '800px' : '700px' }}
|
||||
>
|
||||
<div
|
||||
className="modal-header"
|
||||
style={{
|
||||
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between', // Distribute space between items
|
||||
alignItems: 'center',
|
||||
border: "none"
|
||||
}}
|
||||
>
|
||||
<div style={{ flex: 1, textAlign: 'center' }}>
|
||||
<h3 style={{ margin: 0 }}>
|
||||
{modalType === 'new' && 'Add Employee'}
|
||||
{modalType === 'edit' && 'Edit Employee'}
|
||||
{modalType === 'payment' && `Pay Salary For ${selectedPayroll?.full_name || ''}`}
|
||||
<div className="modal-header" style={{ borderBottom: "1px solid lightgray" }}>
|
||||
<h3>
|
||||
{modalType === 'new' && "Add Employee"}
|
||||
{modalType === 'edit' && "Edit Employee"}
|
||||
{modalType === 'payment' && `Process Payment for ${selectedPayroll?.full_name || ''}`}
|
||||
</h3>
|
||||
<button className="btn" onClick={closeModal}>X</button>
|
||||
</div>
|
||||
<svg
|
||||
onClick={closeModal}
|
||||
width="14"
|
||||
height="14"
|
||||
marginLeft="20px"
|
||||
marginBottom="20px"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1 1L13 13M13 1L1 13"
|
||||
stroke="black"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{ }
|
||||
{(modalType === 'new' || modalType === 'edit') && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-body">
|
||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
||||
{/* <label htmlFor="full_name">Employee Name</label> */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="full_name">Employee Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="full_name"
|
||||
name="full_name"
|
||||
placeholder="Employee’s Full Name"
|
||||
value={formData.full_name}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
||||
{/* <label htmlFor="contact_no">Contact Number</label> */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="contact_no">Contact Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-control"
|
||||
id="contact_no"
|
||||
placeholder="Contact Number"
|
||||
name="contact_no"
|
||||
value={formData.contact_no}
|
||||
onChange={handleChange}
|
||||
required
|
||||
maxLength={10}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
||||
{/* <label htmlFor="email">Email Address</label> */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email Address"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer" style={{ border: "none" }}>
|
||||
<button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
|
||||
<div className="modal-footer">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{modalType === 'edit' ? "Update Employee" : "Add Employee"}
|
||||
</button>
|
||||
<button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
|
||||
<button type="button" className="btn btn-contained" onClick={closeModal}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -534,74 +479,66 @@ export default function Payroll() {
|
|||
{modalType === 'payment' && (
|
||||
<form onSubmit={handlePaymentSubmit}>
|
||||
<div className="modal-body">
|
||||
<div className="form-group row col-md-12 justify-content-between"> {/* Added justify-content-between */}
|
||||
{/* Salary Amount Input */}
|
||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
||||
<div className="form-group">
|
||||
<label htmlFor="salary_amount">Amount</label>
|
||||
<div className="input-group">
|
||||
<div className="input-group-prepend">
|
||||
<span className="input-group-text">$</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
type="text" // Keeping text type for more flexible input control
|
||||
className="form-control"
|
||||
id="salary_amount"
|
||||
name="salary_amount"
|
||||
placeholder="Amount"
|
||||
value={paymentData.salary_amount}
|
||||
onChange={handlePaymentChange}
|
||||
onKeyDown={(e) => {
|
||||
// Prevent negative and positive signs
|
||||
if (e.key === "-" || e.key === "+") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
required
|
||||
onInput={(e) => {
|
||||
let value = e.target.value;
|
||||
value = value.replace(/[^0-9.]/g, "");
|
||||
if (value.indexOf(".") !== -1) {
|
||||
const parts = value.split(".");
|
||||
value = parts[0] + "." + parts[1].substring(0, 2);
|
||||
|
||||
// Remove all characters except numbers and the decimal point
|
||||
value = value.replace(/[^0-9.]/g, '');
|
||||
|
||||
// Ensure only one decimal point
|
||||
if (value.indexOf('.') !== -1) {
|
||||
const parts = value.split('.');
|
||||
value = parts[0] + '.' + parts[1].substring(0, 2); // Keep only two digits after the decimal
|
||||
}
|
||||
|
||||
// Update the value on the input element
|
||||
e.target.value = value;
|
||||
|
||||
// Call the onChange handler to update the state
|
||||
handlePaymentChange(e);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Salary Unit Select */}
|
||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
||||
|
||||
<div className="form-row form-group col-md-6">
|
||||
<label htmlFor="salary_unit">Salary Unit</label>
|
||||
<select
|
||||
className="form-control"
|
||||
name="salary_unit"
|
||||
value={paymentData.salary_unit}
|
||||
onChange={handlePaymentChange}
|
||||
required
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Per Unit
|
||||
</option>
|
||||
<option value="hourly">Hourly</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="bi weekly">Bi Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="form-group row col-md-12 justify-content-between">
|
||||
{/* Start Date Input */}
|
||||
<div className="form-group col-md-5">
|
||||
|
||||
<div className="form-row form-group col-md-6">
|
||||
<label htmlFor="start_date">Start Date</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
|
|
@ -609,18 +546,10 @@ export default function Payroll() {
|
|||
value={paymentData.start_date}
|
||||
onChange={handlePaymentChange}
|
||||
required
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* End Date Input */}
|
||||
<div className="form-group col-md-5">
|
||||
|
||||
<div className="form-row form-group col-md-6">
|
||||
<label htmlFor="end_date">End Date</label>
|
||||
<input
|
||||
type="date"
|
||||
className="form-control"
|
||||
|
|
@ -628,24 +557,11 @@ export default function Payroll() {
|
|||
value={paymentData.end_date}
|
||||
onChange={handlePaymentChange}
|
||||
required
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <ToastContainer /> */}
|
||||
<div className="form-group row col-md-12 justify-content-between">
|
||||
{/* Total Hours Input */}
|
||||
<div className="form-group col-md-5" >
|
||||
|
||||
<div className="form-row form-group col-md-6">
|
||||
<label htmlFor="total_hour">Total Hours</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
|
|
@ -654,75 +570,37 @@ export default function Payroll() {
|
|||
value={paymentData.total_hour}
|
||||
onChange={handlePaymentChange}
|
||||
onInput={(e) => {
|
||||
// Allow only numbers and limit input to 3 digits
|
||||
e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 3);
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border,
|
||||
borderRadius: "0px",
|
||||
// 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
|
||||
.slice(0, 3); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Payment Method Select */}
|
||||
<div className="form-group col-md-5">
|
||||
<div style={{ border: '2px solid #ACB4AA', padding: '5px 5px', width: "fit-content", borderRadius: '40px', display: 'flex', }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cash" } })}
|
||||
style={{
|
||||
backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
|
||||
color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
|
||||
border: 'none',
|
||||
padding: '5px 5px',
|
||||
borderRadius: '20px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
<div className="form-group">
|
||||
<label htmlFor="payment_method">Payment Method</label>
|
||||
<select
|
||||
name="payment_method"
|
||||
id="payment_method"
|
||||
className="form-control"
|
||||
value={paymentData.payment_method}
|
||||
onChange={handlePaymentChange}
|
||||
>
|
||||
Cash
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cheque" } })}
|
||||
style={{
|
||||
backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
|
||||
color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
|
||||
border: 'none',
|
||||
padding: '5px 5px',
|
||||
borderRadius: '20px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
Bank Transfer
|
||||
</button>
|
||||
<option value="cash">Cash</option>
|
||||
<option value="cheque">Bank Transfer</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{paymentData.payment_method === "cheque" && (
|
||||
<div className="form-group row col-md-12 justify-content-between">
|
||||
<div className="form-group col-md-5">
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="bank">Bank</label>
|
||||
<select
|
||||
name="bank"
|
||||
id="bank"
|
||||
className="form-control"
|
||||
value={paymentData.bank}
|
||||
onChange={handlePaymentChange}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
>
|
||||
<option value="">Select Bank</option>
|
||||
{bankdata.map((bank) => (
|
||||
|
|
@ -731,29 +609,20 @@ export default function Payroll() {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-md-5">
|
||||
|
||||
<label htmlFor="cheque_no">Cheque Number</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
id="cheque_no"
|
||||
placeholder="Cheque No"
|
||||
name="cheque_no"
|
||||
value={paymentData.cheque_no}
|
||||
onChange={handlePaymentChange}
|
||||
required
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col-md-5">
|
||||
|
||||
)}
|
||||
<div className="form-row form-group col-md-6">
|
||||
<label htmlFor="note">Notes</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -761,25 +630,14 @@ export default function Payroll() {
|
|||
name="note"
|
||||
value={paymentData.note}
|
||||
onChange={handlePaymentChange}
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div className="modal-footer" style={{border:"none"}}>
|
||||
<button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
<div className="modal-footer">
|
||||
<button type="submit" className="btn btn-primary" style={{}}>
|
||||
Payment
|
||||
</button>
|
||||
<button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
|
||||
<button type="button" className="btn btn-contained" onClick={closeModal}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ const DataTable = ({
|
|||
direction: "ascending",
|
||||
});
|
||||
const [rowsPerPage, setRowsPerPage] = useState(5);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
|
||||
const totalPages = Math.ceil(data.length / rowsPerPage);
|
||||
|
||||
|
|
@ -33,7 +32,7 @@ const DataTable = ({
|
|||
const getDisplayedData = () => {
|
||||
const startIndex = (currentPage - 1) * rowsPerPage;
|
||||
const endIndex = startIndex + rowsPerPage;
|
||||
return sortedData.slice(startIndex, endIndex); // Return sorted data
|
||||
return data.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
// Sorting the data based on the selected column
|
||||
|
|
@ -52,16 +51,8 @@ const DataTable = ({
|
|||
return dataToSort;
|
||||
};
|
||||
|
||||
// Search functionality
|
||||
const filteredData = data.filter(item =>
|
||||
columns.some(col => {
|
||||
const value = item[col.field] ? item[col.field].toString().toLowerCase() : "";
|
||||
return value.includes(searchTerm.toLowerCase());
|
||||
})
|
||||
);
|
||||
|
||||
const sortedData = sortData(filteredData);
|
||||
const displayedData = getDisplayedData();
|
||||
const sortedData = sortData(displayedData);
|
||||
|
||||
// Pagination
|
||||
const handleNext = () => {
|
||||
|
|
@ -99,40 +90,7 @@ const DataTable = ({
|
|||
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<div className="search-container" style={{marginBottom:"20px"}}>
|
||||
<input
|
||||
type="text"
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
<svg
|
||||
className="search-container-icon"
|
||||
width="22"
|
||||
height="22"
|
||||
viewBox="0 0 22 22"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.5416 19.2497C15.3511 19.2497 19.2499 15.3508 19.2499 10.5413C19.2499 5.73186 15.3511 1.83301 10.5416 1.83301C5.73211 1.83301 1.83325 5.73186 1.83325 10.5413C1.83325 15.3508 5.73211 19.2497 10.5416 19.2497Z"
|
||||
stroke="#292D32"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M20.1666 20.1663L18.3333 18.333"
|
||||
stroke="#292D32"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
{columns.map((col, index) => (
|
||||
|
|
@ -176,19 +134,17 @@ const DataTable = ({
|
|||
<tbody className="table-body">
|
||||
{sortedData.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
|
||||
textAlign: "center", fontFamily: 'Manrope',
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
|
||||
fontWeight: '600',
|
||||
fontSize: '40px',
|
||||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}>
|
||||
WebkitTextFillColor: 'transparent', }}>
|
||||
No data found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
displayedData.map((item, index) => (
|
||||
sortedData.map((item, index) => (
|
||||
<tr key={item.id || index}>
|
||||
{columns.map((col, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
|
|
@ -244,18 +200,55 @@ const DataTable = ({
|
|||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{showFooter && (
|
||||
<div className="pagination">
|
||||
<button onClick={handlePrev} disabled={currentPage === 1}>
|
||||
Previous
|
||||
</button>
|
||||
<ul className="pagination-list">
|
||||
<nav>
|
||||
<ul className="pagination">
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "10px",
|
||||
borderRadius: "50%",
|
||||
border: "1px solid #bfbfbfbf",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
{"<"}
|
||||
<
|
||||
</span>
|
||||
|
||||
</li>
|
||||
{renderPagination()}
|
||||
<li className={`prev-next ${currentPage === totalPages ? "disabled" : ""}`}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
paddingLeft: "10px",
|
||||
paddingRight: "10px",
|
||||
borderRadius: "50%",
|
||||
border: "1px solid #bfbfbfbf",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
display: "flex",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={handleNext}
|
||||
>
|
||||
{">"}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button onClick={handleNext} disabled={currentPage === totalPages}>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -166,7 +166,6 @@ const PayrollTableWithButton = ({
|
|||
<div className="search-container">
|
||||
<input
|
||||
type="text"
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search"
|
||||
|
|
@ -263,38 +262,12 @@ const PayrollTableWithButton = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div >
|
||||
<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>
|
||||
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||
<h3 className="me-2">Show</h3>
|
||||
<select
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
height: "30px",
|
||||
|
||||
padding: "2px 6px",
|
||||
border: "1px solid #ccc",
|
||||
backgroundColor: "#282E26",
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
|
|
@ -308,9 +281,7 @@ const PayrollTableWithButton = ({
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
<th scope="col" className="no-column">
|
||||
|
|
@ -355,14 +326,12 @@ const PayrollTableWithButton = ({
|
|||
<tbody className="table-body">
|
||||
{sortedDisplayedData.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
|
||||
textAlign: "center", fontFamily: 'Manrope',
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
|
||||
fontWeight: '600',
|
||||
fontSize: '40px',
|
||||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}>
|
||||
WebkitTextFillColor: 'transparent', }}>
|
||||
No data found
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -378,7 +347,7 @@ const PayrollTableWithButton = ({
|
|||
<div className={`status ${item[col.field]}`}>{item[col.field]}</div>
|
||||
) : col.field === "pay_salary" ? (
|
||||
<button
|
||||
style={{ backgroundColor: "#CCF4BB", border: 'none', boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: '4px', fontSize: "16px", alignItems: "center", width: '122px' }}
|
||||
className="btn btn-primary"
|
||||
onClick={() => togglePaymentModal(item)} // Pass item to payment modal
|
||||
>
|
||||
Pay Salary
|
||||
|
|
@ -454,7 +423,8 @@ const PayrollTableWithButton = ({
|
|||
</li>
|
||||
{renderPagination()}
|
||||
<li
|
||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
||||
className={`prev-next ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@ import { toast, ToastContainer } from "react-toastify";
|
|||
import AddDepartmentModal from "../ReusableForm/AddDepartmentModal";
|
||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||
import Swal from "sweetalert2";
|
||||
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
|
||||
import vendor from '../../../../assets/Image/vendor.png'
|
||||
import department from '../../../../assets/Image/Department.png'
|
||||
|
||||
export default function Purchase() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -43,7 +40,7 @@ export default function Purchase() {
|
|||
const { Get, Post, Delete, Patch } = useApi();
|
||||
const [reloadTotal, setReloadTotal] = useState(false);
|
||||
const [filteredDepartments, setFilteredDepartments] = useState([]);
|
||||
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
|
||||
|
||||
// Handle checkbox change
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
|
|
@ -203,7 +200,6 @@ export default function Purchase() {
|
|||
|
||||
const handleSpecificPaymentMethodChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setSelectedPaymentMethod(value); // Update selected payment method state
|
||||
setShowCheckFields(value === "cheque");
|
||||
setShowBankFields(value === "bank");
|
||||
|
||||
|
|
@ -623,141 +619,12 @@ export default function Purchase() {
|
|||
<div className="main-container">
|
||||
<div className="d-flex p-2">
|
||||
<div className="expensecontainer d-flex flex-column pd-2">
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 className="mb-1">Purchase</h3>
|
||||
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||
{" "}
|
||||
+ Add Invoice
|
||||
<img
|
||||
src={invoiceIcon}
|
||||
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 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 Department
|
||||
<img
|
||||
src={department}
|
||||
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>
|
||||
|
||||
{/* Table Start */}
|
||||
|
|
@ -828,10 +695,8 @@ export default function Purchase() {
|
|||
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
type="date"
|
||||
|
|
@ -849,10 +714,8 @@ export default function Purchase() {
|
|||
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
type="text"
|
||||
|
|
@ -870,9 +733,8 @@ export default function Purchase() {
|
|||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control"
|
||||
|
|
@ -909,9 +771,8 @@ export default function Purchase() {
|
|||
<select
|
||||
className="form-control"
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
name="vendor_department_service_titles"
|
||||
|
|
@ -946,82 +807,17 @@ export default function Purchase() {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div className="d-flex col-md-12 mt-2">
|
||||
<div
|
||||
className="form-row d-flex col-md-5 p-2 mt-2"
|
||||
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
|
||||
required
|
||||
type="number"
|
||||
className="form-control sampletext"
|
||||
placeholder="Amount"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
name={editingInvoiceId ? "pay_amount" : "amount"}
|
||||
value={
|
||||
|
||||
editingInvoiceId && formData.pay_amount === undefined
|
||||
? formData.remaining_amount
|
||||
: formData.pay_amount || formData.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 className="d-flex col-md-12">
|
||||
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 10px',
|
||||
marginTop: '20px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
display: 'flex', // Use flexbox
|
||||
gap: '10px', // Add spacing between the options
|
||||
}}
|
||||
className="d-flex col-md-12"
|
||||
style={{ paddingLeft: "5px", paddingTop: "15px" }}
|
||||
>
|
||||
<p>Payment Method : </p>
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{
|
||||
|
||||
|
||||
backgroundColor: formData.pay_method_status === "pay_later" ? "#4a5546" : "transparent",
|
||||
color: formData.pay_method_status === "pay_later" ? "white" : "black",
|
||||
padding: '5px 10px',
|
||||
borderRadius: '20px',
|
||||
}}
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -1029,19 +825,12 @@ export default function Purchase() {
|
|||
value="pay_later"
|
||||
checked={formData.pay_method_status === "pay_later"}
|
||||
onChange={handlePaymentMethodChange}
|
||||
style={{ display: 'none' }} // Hide the radio button
|
||||
/>{" "}
|
||||
Pay Later
|
||||
</label>
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{
|
||||
|
||||
backgroundColor: formData.pay_method_status === "pay_now" ? "#4a5546" : "transparent",
|
||||
color: formData.pay_method_status === "pay_now" ? "white" : "black",
|
||||
padding: '5px 10px',
|
||||
borderRadius: '20px',
|
||||
}}
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -1049,107 +838,76 @@ export default function Purchase() {
|
|||
value="pay_now"
|
||||
checked={formData.pay_method_status === "pay_now"}
|
||||
onChange={handlePaymentMethodChange}
|
||||
style={{ display: 'none' }} // Hide the radio button
|
||||
/>{" "}
|
||||
Pay Now
|
||||
</label>
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{
|
||||
|
||||
backgroundColor: formData.pay_method_status === "credit_invoice" ? "#4a5546" : "transparent",
|
||||
color: formData.pay_method_status === "credit_invoice" ? "white" : "black",
|
||||
padding: '5px 10px',
|
||||
borderRadius: '20px',
|
||||
}}
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="credit_invoice"
|
||||
checked={formData.pay_method_status === "credit_invoice"}
|
||||
checked={
|
||||
formData.pay_method_status === "credit_invoice"
|
||||
}
|
||||
onChange={handlePaymentMethodChange}
|
||||
style={{ display: 'none' }} // Hide the radio button
|
||||
/>{" "}
|
||||
Credit Invoice
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{showPaymentOptions && (
|
||||
<div
|
||||
className="d-flex col-md-6 mb-3"
|
||||
style={{
|
||||
border: "2px solid #ACB4AA",
|
||||
padding: "5px 10px",
|
||||
width: "fit-content",
|
||||
borderRadius: "40px",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
marginTop: "20px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="payment-option"
|
||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cash" } })}
|
||||
style={{
|
||||
padding: '5px 10px',
|
||||
cursor: "pointer",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: selectedPaymentMethod === "cash" ? "#4a5546" : "transparent", // Change background based on selection
|
||||
color: selectedPaymentMethod === "cash" ? "white" : "black", // Change text color based on selection
|
||||
textAlign: "center",
|
||||
}}
|
||||
<div className="d-flex col-md-6 mb-3">
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="cash"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Cash
|
||||
</div>
|
||||
<div
|
||||
className="payment-option"
|
||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cheque" } })}
|
||||
style={{
|
||||
padding: '5px 10px',
|
||||
cursor: "pointer",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: selectedPaymentMethod === "cheque" ? "#4a5546" : "transparent",
|
||||
color: selectedPaymentMethod === "cheque" ? "white" : "black",
|
||||
textAlign: "center",
|
||||
}}
|
||||
</label>
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="cheque"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Check
|
||||
</div>
|
||||
<div
|
||||
className="payment-option"
|
||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "bank" } })}
|
||||
style={{
|
||||
padding: '5px 10px',
|
||||
cursor: "pointer",
|
||||
borderRadius: "20px",
|
||||
backgroundColor: selectedPaymentMethod === "bank" ? "#4a5546" : "transparent",
|
||||
color: selectedPaymentMethod === "bank" ? "white" : "black",
|
||||
textAlign: "center",
|
||||
}}
|
||||
</label>
|
||||
<label
|
||||
className="radio-inline"
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="bank"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Bank Card/ACH/EFT
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{showAdditionalFields && (
|
||||
<div className="d-flex col-md-5 mt-2" style={{ marginTop: '20px' }}>
|
||||
<div className="d-flex col-md-5 mt-2">
|
||||
<select
|
||||
className="form-control col-md-5 me-2"
|
||||
name="days"
|
||||
value={formData.days || ""}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
|
||||
}}
|
||||
required
|
||||
>
|
||||
|
|
@ -1162,11 +920,8 @@ export default function Purchase() {
|
|||
</select>
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "50px",
|
||||
}}
|
||||
className="form-control d-flex col-md-5"
|
||||
|
|
@ -1183,11 +938,8 @@ export default function Purchase() {
|
|||
<div className="d-flex col-md-4 mt-2">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1210,11 +962,8 @@ export default function Purchase() {
|
|||
className="form-control me-2"
|
||||
placeholder="Check Number"
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1229,11 +978,8 @@ export default function Purchase() {
|
|||
<div className="d-flex col-md-4 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -1248,11 +994,8 @@ export default function Purchase() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -1272,11 +1015,8 @@ export default function Purchase() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -1307,11 +1047,8 @@ export default function Purchase() {
|
|||
<div
|
||||
className="form-row d-flex col-md-6 p-2 mt-2"
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -1319,19 +1056,19 @@ export default function Purchase() {
|
|||
<div
|
||||
className="input-group-prepend"
|
||||
style={{
|
||||
background: "#ffffff",
|
||||
background: "#F5F5F5",
|
||||
height: "100%",
|
||||
|
||||
borderRadius: "10px 0 0 10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* <span
|
||||
<span
|
||||
className="input-group-text prefixtext"
|
||||
style={{ border: "none", fontSize: "14px" }}
|
||||
>
|
||||
USD
|
||||
</span> */}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -1352,7 +1089,56 @@ export default function Purchase() {
|
|||
</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
|
||||
required
|
||||
type="number"
|
||||
className="form-control sampletext"
|
||||
placeholder="Amount"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
name={editingInvoiceId ? "pay_amount" : "amount"}
|
||||
value={
|
||||
|
||||
editingInvoiceId && formData.pay_amount === undefined
|
||||
? formData.remaining_amount
|
||||
: formData.pay_amount || formData.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>
|
||||
</form>
|
||||
</div>
|
||||
<div className="modal-footer" style={{ border: "none" }}>
|
||||
|
|
@ -1360,15 +1146,13 @@ export default function Purchase() {
|
|||
type="button"
|
||||
className="btn btn-secondary-outline"
|
||||
onClick={toggleModal}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn "
|
||||
className="btn btn-primary"
|
||||
onClick={handleSubmit}
|
||||
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -37,33 +37,23 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="250px">
|
||||
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="175px">
|
||||
<form onSubmit={handleSave}>
|
||||
<div className="form-group ">
|
||||
<div className="form-group d-flex align-items-center mt-1">
|
||||
<input
|
||||
type="text"
|
||||
className="input-field"
|
||||
placeholder="Department Name"
|
||||
value={departmentName}
|
||||
onChange={(e) => setDepartmentName(e.target.value)}
|
||||
style={{ width: "483px", border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
marginBottom: "20px",
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
textAlign: "right", // Align content to the right
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
|
|
@ -71,11 +61,11 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
|
|||
width: "103px",
|
||||
height: "42px",
|
||||
fontSize: "18px",
|
||||
marginLeft: "20px",
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</ReusableModal>
|
||||
|
|
|
|||
|
|
@ -37,35 +37,23 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="250px">
|
||||
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="175px">
|
||||
<form onSubmit={handleSave}>
|
||||
<div className="form-group">
|
||||
<div className="form-group d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="input-field"
|
||||
placeholder="Expense Type"
|
||||
value={expenseType}
|
||||
onChange={(e) => setExpenseType(e.target.value)}
|
||||
style={{
|
||||
width: "483px",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
marginBottom: "20px",
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
textAlign: "right", // Align content to the right
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
|
|
@ -73,6 +61,7 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
|||
width: "103px",
|
||||
height: "42px",
|
||||
fontSize: "18px",
|
||||
marginLeft: "20px",
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
|
|
@ -81,5 +70,6 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
|||
</form>
|
||||
</ReusableModal>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default AddExpenseTypeModal;
|
||||
|
|
|
|||
|
|
@ -93,12 +93,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
|||
placeholder="Vendor Name"
|
||||
value={vendorName}
|
||||
onChange={(e) => setVendorName(e.target.value)}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" ,
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
|
||||
/>
|
||||
<select
|
||||
|
|
@ -109,10 +104,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
|||
setVendorDepartments([]); // Reset departments when type changes
|
||||
setOpeningBalance("");
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
|
||||
>
|
||||
<option value="">Vendor Type</option>
|
||||
|
|
@ -144,10 +136,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
|||
<select
|
||||
className="input-field"
|
||||
onChange={handleDepartmentChange}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
>
|
||||
<option value="">
|
||||
{vendorType === "purchase"
|
||||
|
|
@ -170,10 +159,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
|||
placeholder="Opening Balance"
|
||||
value={openingBalance}
|
||||
onChange={(e) => setOpeningBalance(e.target.value)}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -184,10 +170,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
|||
style={{
|
||||
marginLeft: "690px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#282e26",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "20px",
|
||||
borderRadius: "40px",
|
||||
cursor: "pointer",
|
||||
width: "124px",
|
||||
height: "42px",
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
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 "./Formlayout.css";
|
||||
const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -21,7 +21,21 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
|||
}}
|
||||
>
|
||||
<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 */}
|
||||
<div
|
||||
|
|
@ -35,8 +49,6 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
|||
boxSizing: "border-box",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
|
||||
borderRadius:"40px",
|
||||
position: "relative",
|
||||
"@media (maxWidth: 768px)": {
|
||||
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
|
||||
style={{
|
||||
flex: "1",
|
||||
|
|
@ -57,7 +84,48 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
|||
</div>
|
||||
</div>
|
||||
{/* 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -34,14 +34,9 @@ const Header = () => {
|
|||
const settingsRef = useRef(null);
|
||||
const lotteryRef = useRef(null);
|
||||
const gasRef = useRef(null);
|
||||
// const [selectedNav, setSelectedNav] = useState("/");
|
||||
const [selectedNav, setSelectedNav] = useState("/");
|
||||
const { Get, getAPI, Post } = useApi();
|
||||
|
||||
|
||||
const [parentLabel, setParentLabel] = useState("Expense"); // Parent label
|
||||
const [selectedChild, setSelectedChild] = useState(""); // Selected child label
|
||||
const [selectedNav, setSelectedNav] = useState("Expense");
|
||||
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const toggleMobileMenu = () => {
|
||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||
|
|
@ -64,18 +59,6 @@ const Header = () => {
|
|||
logOutUser();
|
||||
};
|
||||
|
||||
|
||||
const handleChildSelection = (childLabel) => {
|
||||
setSelectedChild(childLabel); // Update the selected child label
|
||||
setExpenseDropdownOpen(false); // Close the dropdown
|
||||
};
|
||||
const toggleDropdown = () => {
|
||||
setExpenseDropdownOpen(!expenseDropdownOpen);
|
||||
if (expenseDropdownOpen) {
|
||||
setSelectedChild(""); // Clear selected child if closing
|
||||
}
|
||||
};
|
||||
|
||||
const handleStoreManageClick = async () => {
|
||||
setDropdownVisible(!isDropdownVisible);
|
||||
|
||||
|
|
@ -158,8 +141,6 @@ const Header = () => {
|
|||
setLotteryDropdownOpen(false);
|
||||
setGasDropdownOpen(false);
|
||||
setDropdownVisible(false);
|
||||
setSelectedChild("");
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -191,7 +172,8 @@ const Header = () => {
|
|||
> <ul className="navbar-nav me-auto">
|
||||
{userRole === "store owner" && (
|
||||
<li
|
||||
className={`nav-item ${selectedNav === "/owner-dashboard" ? "active" : ""
|
||||
className={`nav-item ${
|
||||
selectedNav === "/owner-dashboard" ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
|
|
@ -219,80 +201,28 @@ const Header = () => {
|
|||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={`nav-item ${expenseDropdownOpen ? "active" : ""}`}
|
||||
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
||||
ref={expenseRef}
|
||||
onClick={() => {
|
||||
closeDropdowns();
|
||||
setExpenseDropdownOpen(!expenseDropdownOpen);
|
||||
}}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column", // Ensures child label is displayed below
|
||||
alignItems: "flex-start", // Align labels to the left
|
||||
position: "relative",
|
||||
marginTop: "12px",
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
{/* Parent Label */}
|
||||
<a
|
||||
className="nav-link"
|
||||
href="#"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
|
||||
>
|
||||
{parentLabel}
|
||||
Expense
|
||||
</a>
|
||||
|
||||
{/* Selected Child Label Below Parent Label */}
|
||||
{selectedChild && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
color: "white",
|
||||
// borderBottom:'1px solid blue',
|
||||
backgroundColor: "#282e26",
|
||||
padding: "0px 20px",
|
||||
borderRadius: '20px',
|
||||
fontStyle: "normal",
|
||||
}}
|
||||
>
|
||||
{selectedChild}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{expenseDropdownOpen && (
|
||||
<ul
|
||||
className="nav-menu-drop"
|
||||
style={{
|
||||
listStyle: "none",
|
||||
padding: "10px",
|
||||
margin: "0px",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "4px",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
||||
backgroundColor: "#fff",
|
||||
position: "absolute",
|
||||
top: "100%", // Ensures dropdown appears below labels
|
||||
left: "0",
|
||||
zIndex: 10,
|
||||
transform: "translateY(20px)", // Moves dropdown below header area
|
||||
}}
|
||||
>
|
||||
<ul className="nav-menu-drop">
|
||||
<li>
|
||||
<Link
|
||||
className="nav-menu-drop-item"
|
||||
to="/expense"
|
||||
onClick={() => handleChildSelection("Expense")}
|
||||
style={{
|
||||
display: "block",
|
||||
padding: "8px 12px",
|
||||
color: "#000",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
onClick={closeDropdowns}
|
||||
>
|
||||
Expense
|
||||
</Link>
|
||||
|
|
@ -301,13 +231,7 @@ const Header = () => {
|
|||
<Link
|
||||
className="nav-menu-drop-item"
|
||||
to="/purchase"
|
||||
onClick={() => handleChildSelection("Purchase")}
|
||||
style={{
|
||||
display: "block",
|
||||
padding: "8px 12px",
|
||||
color: "#000",
|
||||
textDecoration: "none",
|
||||
}}
|
||||
onClick={closeDropdowns}
|
||||
>
|
||||
Purchase
|
||||
</Link>
|
||||
|
|
@ -315,9 +239,9 @@ const Header = () => {
|
|||
</ul>
|
||||
)}
|
||||
</li>
|
||||
|
||||
<li
|
||||
className={`nav-item ${selectedNav === "/payroll" ? "active" : ""
|
||||
className={`nav-item ${
|
||||
selectedNav === "/payroll" ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
|
|
@ -333,7 +257,8 @@ const Header = () => {
|
|||
</li>
|
||||
|
||||
<li
|
||||
className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : ""
|
||||
className={`nav-item ${
|
||||
selectedNav === "/reportDateSelection" ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
|
|||
import LoginPage from "./WithUi/LoginPage";
|
||||
function Login() {
|
||||
return (
|
||||
<FormLayout logoSrc={logo} >
|
||||
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}>
|
||||
<LoginPage />
|
||||
</FormLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -305,7 +305,6 @@ function AccountCreate() {
|
|||
fontWeight: "700",
|
||||
lineHeight: "40px",
|
||||
textAlign: "left",
|
||||
// width:'500px',
|
||||
marginTop: "100px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -315,8 +314,8 @@ function AccountCreate() {
|
|||
className="mb-3"
|
||||
style={{ fontSize: "14px", color: "#002300" }}
|
||||
>
|
||||
{/* Start managing your finances effortlessly. Sign up to access your
|
||||
personal ledger and gain control of your transactions with ease! */}
|
||||
Start managing your finances effortlessly. Sign up to access your
|
||||
personal ledger and gain control of your transactions with ease!
|
||||
</p>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -428,14 +427,13 @@ function AccountCreate() {
|
|||
className="card-title mb-3"
|
||||
style={{
|
||||
|
||||
fontSize: "30px",
|
||||
fontSize: "40px",
|
||||
fontWeight: "700",
|
||||
textAlign: "left",
|
||||
marginTop: "80px",
|
||||
// width:"500px"
|
||||
}}
|
||||
>
|
||||
Enter store details
|
||||
Enter the Details
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
|
|
@ -446,9 +444,8 @@ function AccountCreate() {
|
|||
color: "#002300",
|
||||
}}
|
||||
>
|
||||
{/* Get started with your personal ledger. */}
|
||||
{/* Fill in your information to track
|
||||
transactions and manage your finances seamlessly! */}
|
||||
Get started with your personal ledger. Fill in your information to track
|
||||
transactions and manage your finances seamlessly!
|
||||
</p>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -547,11 +544,11 @@ function AccountCreate() {
|
|||
<div className="mb-3 mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn rounded-pill"
|
||||
className="btn btn-primary rounded-pill"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "60px",
|
||||
backgroundColor: "#4A5546",
|
||||
backgroundColor: "#4545DB",
|
||||
color: "#ffffff",
|
||||
padding: "10px 0px",
|
||||
fontSize: "20px",
|
||||
|
|
|
|||
|
|
@ -62,9 +62,9 @@ const LoginPage = () => {
|
|||
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
||||
Welcome Back
|
||||
</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!
|
||||
</p> */}
|
||||
</p>
|
||||
<form onSubmit={loginUser}>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -120,11 +120,11 @@ const LoginPage = () => {
|
|||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn rounded-pill"
|
||||
className="btn btn-primary rounded-pill"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "60px",
|
||||
backgroundColor: "#4A5546",
|
||||
backgroundColor: "#4545DB",
|
||||
color: "#ffffff",
|
||||
padding: "10px 10px",
|
||||
fontSize: "20px",
|
||||
|
|
@ -139,7 +139,7 @@ const LoginPage = () => {
|
|||
</form>
|
||||
<div className="text-center mt-4">
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
||||
<span>New to PaisaVara?</span>
|
||||
<span>New to Ezhisab?</span>
|
||||
<Link
|
||||
to="/create-user"
|
||||
style={{
|
||||
|
|
@ -147,7 +147,6 @@ const LoginPage = () => {
|
|||
marginLeft: "5px",
|
||||
fontSize: "22px",
|
||||
fontWeight: "700",
|
||||
color:"#000"
|
||||
}}
|
||||
>
|
||||
Create an Account
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
|
||||
.navbar {
|
||||
padding: 10px 15px;
|
||||
font-family: Comfortaa;
|
||||
}
|
||||
|
||||
/* Dropdown Styles */
|
||||
|
|
@ -27,7 +26,6 @@
|
|||
padding: 10px 15px;
|
||||
display: block;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
.nav-menu-drop-item:hover {
|
||||
|
|
@ -51,7 +49,6 @@
|
|||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.nav-menu-drop {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
height: 60px;
|
||||
padding: 28px 26px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #9FAA9A; /* Your border color */
|
||||
border: 1px solid #4545db4d; /* Your border color */
|
||||
opacity: 1; /* Ensure inputs are visible */
|
||||
box-shadow: none; /* Remove any box-shadow if applied */
|
||||
font-size: 16px; /* Optional: Set font size for the input text */
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.custom-input:focus {
|
||||
outline: none;
|
||||
border: 1px solid #9FAA9A;
|
||||
border: 1px solid #4545db4d;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
|
|
|
|||
Loading…
Reference in New Issue