Compare commits
1 Commits
main
...
25_12__son
| Author | SHA1 | Date |
|---|---|---|
 sonali
|
d63ed80855 |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
|
|
@ -29,13 +29,14 @@
|
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<style>
|
||||
body {
|
||||
background-image: url('Background.png');
|
||||
background-color: #f9fff6;
|
||||
font-family: "Comfortaa";
|
||||
|
||||
background-position: top;
|
||||
background-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: 'Comfortaa', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 461 B |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 785 B |
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
|
|
@ -93,34 +93,25 @@ body {
|
|||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
background-color: #FFFFFF;
|
||||
width: 400px;
|
||||
height: 81px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
border-radius: 20px;
|
||||
height: 90px;
|
||||
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-radius: 20px;
|
||||
}
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
width: 1200px;
|
||||
height: 81px;
|
||||
|
||||
height: 90px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px 20px;
|
||||
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
justify-content: space-between;
|
||||
|
||||
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex: 1; /* Takes the remaining space between navbar-left and the center header */
|
||||
|
|
@ -132,7 +123,7 @@ font-weight: bold;
|
|||
.navbar .nav-item.active .nav-link {
|
||||
color: #ffffff; /* Active link color */
|
||||
background-color: #282e26;
|
||||
border-radius: 40px;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold; /* Bold text for active link */
|
||||
}
|
||||
|
|
@ -441,7 +432,6 @@ font-weight: bold;
|
|||
.table-darkcustom td {
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Styling for the last header cell */
|
||||
|
|
@ -512,7 +502,7 @@ font-weight: bold;
|
|||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
top: 50%;
|
||||
left: 15px; /* Adjust as needed */
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none; /* Prevent clicks on the icon */
|
||||
|
|
@ -521,7 +511,6 @@ font-weight: bold;
|
|||
.search-container {
|
||||
position: relative;
|
||||
flex: 3;
|
||||
margin-left: 0px;
|
||||
max-width: 300px;
|
||||
}
|
||||
.search-container input {
|
||||
|
|
@ -736,7 +725,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 */
|
||||
|
|
@ -770,7 +758,6 @@ h3 {
|
|||
|
||||
.expense-searchcontainerstart {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
.custbtn {
|
||||
box-shadow: none;
|
||||
|
|
@ -828,15 +815,13 @@ h3 {
|
|||
.table-responsive th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.table-responsives {
|
||||
border: 0.5px solid #f4f4f4;
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.table-responsive {
|
||||
border-left: 1px solid #ebeaf2;
|
||||
border-right: 1px solid #ebeaf2;
|
||||
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.expensetableheader th:first-child {
|
||||
|
|
|
|||
|
|
@ -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 */}
|
||||
|
|
@ -324,24 +324,14 @@ const ATMDepositTable = (props) => {
|
|||
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>
|
||||
|
|
@ -357,24 +347,14 @@ const ATMDepositTable = (props) => {
|
|||
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>
|
||||
|
|
@ -390,24 +370,14 @@ const ATMDepositTable = (props) => {
|
|||
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,7 +288,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-2",
|
||||
column: "col-md-3",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
|
|
@ -296,20 +302,20 @@ function AddInvoice() {
|
|||
// label: "Payment Method:",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "pay_now", label: "Pay Now" },
|
||||
{ value: "pay_later", label: "Pay Later" },
|
||||
{ value: "pay_now", label: "Pay Now" },
|
||||
{ value: "credit_invoice", label: "Credit Invoice" },
|
||||
],
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-5",
|
||||
column: "col-md-6",
|
||||
label: "Payment Method Options",
|
||||
type: "payment-method-options",
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-5",
|
||||
column: "col-md-6",
|
||||
label: "Payment Method Options",
|
||||
type: "pay-bank-options",
|
||||
},
|
||||
|
|
@ -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">
|
||||
|
|
@ -441,6 +450,7 @@ function AddInvoice() {
|
|||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
|
||||
}}
|
||||
>
|
||||
<div className="input-groups">
|
||||
|
|
@ -449,7 +459,7 @@ function AddInvoice() {
|
|||
</span> */}
|
||||
<input
|
||||
type="text" // Set input type to 'text' to allow decimals
|
||||
style={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
|
||||
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
|
||||
className="form-control-borderless"
|
||||
name={field.name}
|
||||
placeholder={field.placeholder}
|
||||
|
|
@ -458,8 +468,8 @@ function AddInvoice() {
|
|||
onInput={(e) => {
|
||||
// Allow only numbers and a decimal point with two digits after it
|
||||
e.target.value = e.target.value
|
||||
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places
|
||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||
}}
|
||||
/>
|
||||
|
|
@ -471,7 +481,7 @@ function AddInvoice() {
|
|||
return (
|
||||
<div className="form-group">
|
||||
<select
|
||||
className="input-select"
|
||||
className="form-control-borderless"
|
||||
name="vendor_department"
|
||||
value={formData.vendor_department}
|
||||
onChange={(e) => {
|
||||
|
|
@ -498,6 +508,7 @@ function AddInvoice() {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -573,45 +584,25 @@ 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: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
||||
<label className="me-4">{field.label}</label>
|
||||
{field.options.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check"
|
||||
className="form-check me-4"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
formData[field.name] === option.value
|
||||
? "#4a5546"
|
||||
: "transparent",
|
||||
padding: "5px 25px",
|
||||
borderRadius: "20px",
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 15px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
onClick={() =>
|
||||
handlePaymentMethodChange({
|
||||
target: { name: field.name, value: option.value },
|
||||
})
|
||||
}
|
||||
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
style={{
|
||||
fontWeight: "normal",
|
||||
color:
|
||||
formData[field.name] === option.value
|
||||
? "#ffffff"
|
||||
: "#282e26",
|
||||
fontWeight: 'normal',
|
||||
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
|
@ -619,49 +610,30 @@ function AddInvoice() {
|
|||
</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: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
||||
{paymentMethodOptions.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check "
|
||||
className="form-check me-4"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
formData.pay_method === option.value
|
||||
? "#4a5546"
|
||||
: "transparent",
|
||||
padding: "5px 25px",
|
||||
borderRadius: "20px",
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
onClick={() =>
|
||||
handleChange({
|
||||
target: { name: "pay_method", value: option.value },
|
||||
})
|
||||
}
|
||||
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",
|
||||
fontWeight: 'normal',
|
||||
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
|
|
@ -672,6 +644,7 @@ function AddInvoice() {
|
|||
)
|
||||
);
|
||||
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<div className="form-check">
|
||||
|
|
@ -688,8 +661,7 @@ function AddInvoice() {
|
|||
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" ||
|
||||
formData.pay_method === "bank") && (
|
||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
|
|
@ -737,7 +709,9 @@ function AddInvoice() {
|
|||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
@ -752,28 +726,28 @@ 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")}
|
||||
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>
|
||||
|
|
@ -784,37 +758,32 @@ function AddInvoice() {
|
|||
className="container"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #EBEAF2",
|
||||
boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
|
||||
borderRadius: "40px",
|
||||
// height: "479px";
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
{/* Render Fields */}
|
||||
{Object.keys(groupedFields).map((rowKey) => (
|
||||
<div
|
||||
className="row mb-3"
|
||||
style={{
|
||||
gap: "10%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
key={rowKey}
|
||||
>
|
||||
<div className="row mb-3" key={rowKey}>
|
||||
{groupedFields[rowKey].map((field, index) => (
|
||||
<div key={index} className={field.column}>
|
||||
{renderField(field)}
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
{/* Prepaid Tax Field */}
|
||||
{formData.prepaid_tax && (
|
||||
<div className="row ">
|
||||
<div className="col-md-3">
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -826,47 +795,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 +843,7 @@ function AddInvoice() {
|
|||
onVendorAdded={handleVendorAdded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,13 +153,13 @@ 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
|
||||
|
|
@ -189,13 +189,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 +202,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 +216,14 @@ function AtmDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-3 mb-4">
|
||||
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
|
||||
<div className="input-group" style={{ width: "100%" }}>
|
||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span> */}
|
||||
<input
|
||||
type="number"
|
||||
style={{ flex: 1, }}
|
||||
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Amount"
|
||||
|
|
@ -244,7 +239,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 +248,7 @@ function AtmDeposit() {
|
|||
onChange={handleChange}
|
||||
placeholder="Notes"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-3 row">
|
||||
|
|
@ -280,16 +275,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 +297,6 @@ function AtmDeposit() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
|
||||
}}
|
||||
>
|
||||
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
||||
|
|
|
|||
|
|
@ -161,13 +161,13 @@ 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
|
||||
|
|
@ -191,9 +191,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 +199,8 @@ function BankDeposit() {
|
|||
|
||||
|
||||
|
||||
<div className="col-md-12 row " style={{
|
||||
gap: "4%",
|
||||
marginLeft:"3px"
|
||||
}}>
|
||||
<div className=" col-md-3">
|
||||
<div className="col-md-12 row ">
|
||||
<div className=" col-md-4">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -215,30 +210,6 @@ function BankDeposit() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<select
|
||||
className="input-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
style={{ borderBottom: "1px solid #e4e5e7" }}
|
||||
>
|
||||
<option value="" enable>
|
||||
Select Cash type
|
||||
</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<select
|
||||
className="form-control-borderless"
|
||||
|
|
@ -255,33 +226,51 @@ function BankDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3 col-md-3">
|
||||
<select
|
||||
className="form-select custom-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="" enable>
|
||||
Select a type
|
||||
</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
className="col-md-12"
|
||||
className="col-md-12 mb-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between", // Adjust spacing between items
|
||||
gap: "50px", // Add gap for consistent spacing
|
||||
|
||||
// marginBottom:"30px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="form-group col-3"
|
||||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
||||
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1", // Allow the field to adjust in size
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
|
||||
className="form-control"
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Cash Amount"
|
||||
value={formData.cash_amount || ""}
|
||||
|
|
@ -295,16 +284,16 @@ function BankDeposit() {
|
|||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
|
||||
|
||||
|
||||
alignItems: "center",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="number"
|
||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cheque_amount"
|
||||
placeholder="Cheque Amount"
|
||||
|
|
@ -319,12 +308,12 @@ function BankDeposit() {
|
|||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border:"none",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
{/* <input
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="note"
|
||||
|
|
@ -335,22 +324,22 @@ function BankDeposit() {
|
|||
border: "none",
|
||||
width: "100%",
|
||||
}}
|
||||
/> */}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -309,15 +309,13 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "50px",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginBottom:"20px"
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -331,24 +329,14 @@ const BankDepositTable = (props) => {
|
|||
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>
|
||||
|
|
@ -364,24 +352,14 @@ const BankDepositTable = (props) => {
|
|||
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>
|
||||
|
|
@ -397,36 +375,26 @@ const BankDepositTable = (props) => {
|
|||
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,18 @@ const BankDepositTable = (props) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
textAlign:"center"
|
||||
}}>
|
||||
<tr>
|
||||
{["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
|
||||
(header, index) => (
|
||||
<th
|
||||
key={header}
|
||||
onClick={() => handleSort(header)}
|
||||
style={{
|
||||
paddingLeft: "50px",
|
||||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff',
|
||||
textAlign: "left",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
}}
|
||||
>
|
||||
|
|
@ -758,13 +719,13 @@ const BankDepositTable = (props) => {
|
|||
{currentInvoices.length !== 0 ?
|
||||
currentInvoices.map((invoice) => (
|
||||
<tr key={invoice.id}>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
{invoice.date}
|
||||
</td>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
{invoice.bank_name}
|
||||
</td>
|
||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
||||
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||
{invoice.bank_deposite_type
|
||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||
|
|
@ -772,8 +733,8 @@ const BankDepositTable = (props) => {
|
|||
: "N/A"}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'center' }}>
|
||||
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||
<td style={{ textAlign: 'left' }}>
|
||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||
{invoice.transaction_type ?
|
||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -10,20 +9,6 @@
|
|||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.invoice-table-container {
|
||||
max-width: 1320px;
|
||||
width: 100%;
|
||||
|
||||
border-radius: 40px;
|
||||
height: 735px;
|
||||
display: flex;
|
||||
justify-content: center; /* Horizontal centering */
|
||||
align-items: center; /* Vertical centering */
|
||||
margin: 0 auto; /* Ensures centering in case of block layout */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none; /* This will remove the default dropdown arrow */
|
||||
}
|
||||
|
|
@ -33,25 +18,19 @@
|
|||
}
|
||||
.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 20px; /* Equal padding on left and right sides */
|
||||
}
|
||||
|
||||
/* 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 +53,11 @@
|
|||
.form-control-borderless {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
color: #999999;
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: none;
|
||||
|
|
@ -119,26 +98,19 @@
|
|||
|
||||
.table th {
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
/* margin-right: 50px; */
|
||||
height: 60px;
|
||||
background-color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
text-align: center;
|
||||
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
|
@ -154,8 +126,6 @@
|
|||
padding: 10px;
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
background-color: #ffffff;
|
||||
border-left: 2px solid #ebeaf2;
|
||||
border-Right: 2px solid #ebeaf2;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
|
@ -179,13 +149,7 @@
|
|||
}
|
||||
|
||||
.filterbutton {
|
||||
background: #FFFFFF;
|
||||
|
||||
border: 1px solid #DBDBDB;
|
||||
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
|
||||
gap:'20px'
|
||||
|
||||
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
|
@ -358,22 +322,3 @@ input[type="color"]:focus,
|
|||
box-shadow: none; /* Remove any shadow */
|
||||
}
|
||||
|
||||
/* for selct dropdown style --> dashboard // */
|
||||
|
||||
|
||||
|
||||
.input-select{
|
||||
border: none;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: transparent;
|
||||
color: #999999;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -284,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 */}
|
||||
|
|
@ -306,24 +304,14 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
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>
|
||||
|
|
@ -339,24 +327,14 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
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>
|
||||
|
|
@ -372,30 +350,20 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -809,75 +769,44 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
draft: {
|
||||
backgroundColor: "#D1D1EF",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Flexbox for alignment
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function PayInvoice() {
|
|||
date: "",
|
||||
status: "paid",
|
||||
pay_method_status: "pay_now",
|
||||
pay_method: "cash",
|
||||
pay_method: "",
|
||||
amount: "",
|
||||
remaining_amount: "", // Initialize as empty string or 0
|
||||
discount: 0,
|
||||
|
|
@ -306,13 +306,13 @@ 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
|
||||
|
|
@ -344,16 +344,8 @@ function PayInvoice() {
|
|||
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="col-md-12 row"
|
||||
style={{
|
||||
gap: "12%",
|
||||
paddingLeft: "3%", // Add equal padding
|
||||
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
>
|
||||
<div className="mb-3 col-md-3">
|
||||
<div className="col-md-12 row" style={{ gap: "15%" }}>
|
||||
<div className="mb-3 col-md-2" >
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -365,16 +357,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 +375,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,10 +395,24 @@ 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="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
|
||||
<div className="col-md-3">
|
||||
<input
|
||||
name="amount"
|
||||
|
|
@ -494,18 +499,17 @@ function PayInvoice() {
|
|||
|
||||
</div>
|
||||
|
||||
<div className="md-col-12 " style={{ marginLeft: "3%", marginTop: "35px" }}>
|
||||
<div className="md-col-12 ">
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '1px solid #ACB4AA',
|
||||
padding: '5px',
|
||||
width: "fit-content",
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '2px 20px', // Same left and right padding
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
|
||||
}}
|
||||
>
|
||||
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
|
|
@ -526,7 +530,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 */}
|
||||
|
|
@ -535,7 +538,7 @@ function PayInvoice() {
|
|||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
|
||||
<div className="col-md-12 mt-3" >
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="row "> {/* Use row class for Bootstrap grid */}
|
||||
|
|
@ -570,7 +573,16 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{formData.pay_method === "Bank Card/ACH/EFT" && (
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{formData.pay_method === "bank" && (
|
||||
<div className="mb-3">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
|
|
@ -615,16 +627,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 */}
|
||||
|
|
@ -329,29 +327,19 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "24px",
|
||||
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>
|
||||
|
|
@ -367,24 +355,14 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
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>
|
||||
|
|
@ -400,36 +378,27 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
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,43 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
draft: {
|
||||
backgroundColor: "#D1D1EF",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -628,139 +628,85 @@ 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 align-items-center mb-3"
|
||||
style={{
|
||||
justifyContent: "space-between",
|
||||
gap: "10px",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
>
|
||||
{/* Title on the left */}
|
||||
<h3 className="mb-1" style={{ margin: "0" }}>Expense</h3>
|
||||
|
||||
+ Add Invoice
|
||||
{/* Buttons on the right */}
|
||||
<div className="d-flex align-items-center" style={{ gap: "10px" }}>
|
||||
|
||||
|
||||
<button
|
||||
style={{
|
||||
backgroundColor: "#4A5546",
|
||||
boxShadow: "none",
|
||||
outline: "none",
|
||||
width: "auto",
|
||||
height: "42px",
|
||||
padding: "8px 12px",
|
||||
fontSize: "14px",
|
||||
border: "none",
|
||||
borderRadius: "10px",
|
||||
color: "#F4FFEE",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Add Expense Type
|
||||
<img
|
||||
src={expensetype}
|
||||
alt="Expense Type 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: "14px",
|
||||
border: "none",
|
||||
borderRadius: "10px",
|
||||
color: "#F4FFEE",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
Add New Vendor
|
||||
<img
|
||||
src={vendor}
|
||||
alt="Vendor Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
className="btn cus d-flex align-items-center" onClick={toggleModal}
|
||||
style={{
|
||||
|
||||
|
||||
width: "180px",
|
||||
height: "42px",
|
||||
|
||||
justifyContent:"center",
|
||||
textAlign:'center',
|
||||
|
||||
}}
|
||||
>
|
||||
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>
|
||||
|
||||
|
|
@ -796,11 +742,11 @@ export default function Expense() {
|
|||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "1200px",
|
||||
width: "1800px",
|
||||
backgroundColor: "white",
|
||||
margin: "100px auto",
|
||||
padding: "20px",
|
||||
borderRadius: "8px",
|
||||
// padding: "2px",
|
||||
borderRadius: "30px",
|
||||
position: "relative",
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
|
|
@ -830,7 +776,7 @@ export default function Expense() {
|
|||
</div>
|
||||
<div className="modal-body">
|
||||
<form>
|
||||
<div className="form-row form-group col-md-12 position-relative d-flex">
|
||||
<div className="form-row form-group col-md-12 position-relative d-flex gap-3">
|
||||
<div className="col-md-3 " style={{ paddingRight: "10px" }}>
|
||||
<input
|
||||
style={{
|
||||
|
|
@ -872,7 +818,7 @@ export default function Expense() {
|
|||
/>
|
||||
|
||||
</div>
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<div className="col-md-5" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
|
|
@ -910,7 +856,7 @@ export default function Expense() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex col-md-12">
|
||||
<div className="d-flex align-items-center justify-content-center col-md-12 gap-3">
|
||||
|
||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
|
|
@ -997,7 +943,7 @@ export default function Expense() {
|
|||
padding: '10px 10px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
// marginTop:'20px',
|
||||
marginTop:'10px',
|
||||
display: 'flex', // Use flexbox
|
||||
gap: '10px', // Add spacing between the options
|
||||
}}
|
||||
|
|
@ -1018,7 +964,7 @@ export default function Expense() {
|
|||
style={{
|
||||
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
|
||||
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
|
||||
padding: '5px 10px',
|
||||
padding: '5px 5px',
|
||||
borderRadius: '20px',
|
||||
|
||||
}}
|
||||
|
|
@ -1042,7 +988,7 @@ export default function Expense() {
|
|||
style={{
|
||||
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
|
||||
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
|
||||
padding: '5px 10px',
|
||||
padding: '5px 5px',
|
||||
borderRadius: '20px',
|
||||
|
||||
}}
|
||||
|
|
@ -1066,7 +1012,7 @@ export default function Expense() {
|
|||
style={{
|
||||
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
|
||||
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
|
||||
padding: '5px 10px',
|
||||
padding: '5px 5px',
|
||||
borderRadius: '20px',
|
||||
|
||||
}}
|
||||
|
|
@ -1084,7 +1030,7 @@ export default function Expense() {
|
|||
className="d-flex col-md-6 mb-3"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '10px 10px',
|
||||
padding: '5px 5px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
display: 'flex', // Use flexbox for inner items
|
||||
|
|
@ -1104,7 +1050,7 @@ export default function Expense() {
|
|||
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
|
||||
color: formData.pay_method === method.value ? "white" : "black",
|
||||
|
||||
padding: '5px 10px', // Add padding for better appearance
|
||||
padding: '5px 5px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
cursor: "pointer",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,6 @@
|
|||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
text-align: center; /* Center the text */
|
||||
width: 100%; /* Ensure it spans the full width */
|
||||
}
|
||||
|
|
@ -6,6 +6,9 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
|
|||
import AuthContext from "../../.././../utils/secure-route/AuthContext";
|
||||
import SettingTable from "../ManageSettings/SettingTable";
|
||||
import Swal from "sweetalert2";
|
||||
import atmdeposite from "../../../../assets/Image/Atm Deposite.png"
|
||||
|
||||
|
||||
|
||||
export default function GeneralLedgerATM() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -249,9 +252,21 @@ export default function GeneralLedgerATM() {
|
|||
<ToastContainer />
|
||||
<div className="due-days">
|
||||
<div className="header-row mb-4">
|
||||
<div className="setting-title">ATM Deposit</div>
|
||||
<button className="gas-invoice-add-button" onClick={toggleModal}>
|
||||
+ Add ATM Deposit
|
||||
<div className="setting-title" style={{marginLeft:"8px"}}>ATM Deposit</div>
|
||||
<button className="btn cus d-flex align-items-center" style={{
|
||||
width: "250px",
|
||||
height: "48px",
|
||||
justifyContent:"center"
|
||||
|
||||
// justifyContent:"center",
|
||||
// textAlign:'center',
|
||||
}} onClick={toggleModal}>
|
||||
Add ATM Deposit
|
||||
<img
|
||||
src={atmdeposite}
|
||||
alt="Atm Deposite Icon"
|
||||
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -275,7 +290,7 @@ export default function GeneralLedgerATM() {
|
|||
backgroundColor: "white",
|
||||
margin: "100px auto",
|
||||
// padding: "20px",
|
||||
borderRadius: "8px",
|
||||
borderRadius: "40px",
|
||||
position: "relative",
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
|
|
@ -306,12 +321,26 @@ export default function GeneralLedgerATM() {
|
|||
</div>
|
||||
<div className="modal-body">
|
||||
<form onSubmit={handleAtmDeposit}>
|
||||
<div className="form-row form-group col-md-5 position-relative">
|
||||
<div className="form-row">
|
||||
{/* Date Input Field */}
|
||||
|
||||
|
||||
|
||||
{/* Amount Input Field */}
|
||||
<div className="form-group col-12">
|
||||
<div
|
||||
className="d-flex gap-3 align-items-center"
|
||||
style={{ display: "flex", justifyContent: "space-between" }}
|
||||
>
|
||||
{/* Date Input */}
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
flex: 1, // Flex-grow to manage space
|
||||
}}
|
||||
type="date"
|
||||
className="form-control"
|
||||
|
|
@ -320,14 +349,52 @@ export default function GeneralLedgerATM() {
|
|||
onChange={handleDateChange}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Amount Input */}
|
||||
<div
|
||||
className="input-group"
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
|
||||
flex: 1, // Flex-grow to manage space
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="amount"
|
||||
className="form-control sampletext"
|
||||
value={formData.amount}
|
||||
onChange={handleChange}
|
||||
placeholder="Amount"
|
||||
aria-label="Amount"
|
||||
aria-describedby="addon-wrapping"
|
||||
onInput={(e) => {
|
||||
// Allow only numbers and a decimal point with two digits after it
|
||||
e.target.value = e.target.value
|
||||
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places
|
||||
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="d-flex col-md-12">
|
||||
<div className="form-row d-flex col-md-6">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control"
|
||||
|
|
@ -337,7 +404,7 @@ export default function GeneralLedgerATM() {
|
|||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">Type</option>
|
||||
<option value="">Cash Type</option>
|
||||
<option value="Business cash">Business Cash</option>
|
||||
<option value="Gas cash">Gas Cash</option>
|
||||
<option value="Lottery cash">Lottery Cash</option>
|
||||
|
|
@ -499,6 +566,7 @@ export default function GeneralLedgerATM() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
<div className="form-row d-flex col-md-12">
|
||||
<textarea
|
||||
|
|
@ -513,56 +581,7 @@ export default function GeneralLedgerATM() {
|
|||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-row d-flex col-md-6 ">
|
||||
<div class="containercolor">
|
||||
<div
|
||||
class="input-group col-md-6 p-2 mt-2"
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
height: "52px",
|
||||
border: "1px lightgray solid",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="input-group-prepend"
|
||||
style={{
|
||||
background: "#F5F5F5",
|
||||
height: "100%",
|
||||
borderRadius: "10px 0 0 10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
class="input-group-text prefixtext"
|
||||
style={{
|
||||
border: "none",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
USD
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
name="amount"
|
||||
className="form-control sampletext"
|
||||
value={formData.amount}
|
||||
onChange={handleChange}
|
||||
placeholder="Amount"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
onInput={(e) => {
|
||||
// Allow only numbers and a decimal point with two digits after it
|
||||
e.target.value = e.target.value
|
||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="modal-footer" style={{ border: "none" }}>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import AuthContext from "../../.././../utils/secure-route/AuthContext";
|
|||
import SettingTable from "../ManageSettings/SettingTable";
|
||||
import "./GeneralLedger.css";
|
||||
import Swal from "sweetalert2";
|
||||
import bankdeposite from '../../../../assets/Image/Bank Deposite .png'
|
||||
|
||||
|
||||
export default function GeneralLedgerBank() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -275,11 +277,19 @@ export default function GeneralLedgerBank() {
|
|||
<div className="header-row mb-4">
|
||||
<div className="setting-title">Bank Deposit</div>
|
||||
<button
|
||||
className="gas-invoice-add-button-bank-deposit"
|
||||
className="btn cus d-flex align-items-center"
|
||||
onClick={openAddModal}
|
||||
style={{ Width: "200px" }}
|
||||
style={{ width: "250px",
|
||||
height: "48px",
|
||||
justifyContent:"center" }}
|
||||
>
|
||||
+ Add Bank Deposit
|
||||
Add Bank Deposit
|
||||
<img
|
||||
src={bankdeposite}
|
||||
alt="Bank Deposite Icon"
|
||||
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
|
||||
/>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import AuthContext from "../../.././../utils/secure-route/AuthContext";
|
|||
import SettingTable from "../ManageSettings/SettingTable";
|
||||
import "./GeneralLedger.css";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
import otherincome from '../../../../assets/Image/other income.png'
|
||||
|
||||
export default function GeneralLedgerOtherIncome() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -300,11 +300,18 @@ export default function GeneralLedgerOtherIncome() {
|
|||
<div className="header-row mb-4">
|
||||
<div className="setting-title">Other Income</div>
|
||||
<button
|
||||
className="gas-invoice-add-button-bank-deposit"
|
||||
className="btn cus d-flex align-items-center"
|
||||
onClick={handleAddOtherIncome}
|
||||
style={{ Width: "200px" }}
|
||||
style={{ width: "250px",
|
||||
height: "48px",
|
||||
justifyContent:"center" }}
|
||||
>
|
||||
+ Add Other Income
|
||||
Add Other Income
|
||||
<img
|
||||
src={otherincome}
|
||||
alt="Bank Deposite Icon"
|
||||
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,10 @@ import SettingTable from "../ManageSettings/SettingTable";
|
|||
import useApi from "../../../../utils/api-manager/Helper/useApi";
|
||||
import AuthContext from "../../.././../utils/secure-route/AuthContext";
|
||||
import { toast,ToastContainer } from "react-toastify";
|
||||
import prepaid from '../../../../assets/Image/prepaid.png'
|
||||
|
||||
|
||||
|
||||
export default function GeneralLedgerSalesTax() {
|
||||
// const [billDate, setBillDate] = useState("2024-09-20"); // Example default date
|
||||
// const dateInputRef = useRef(null);
|
||||
|
|
@ -126,9 +130,18 @@ export default function GeneralLedgerSalesTax() {
|
|||
<div className="expensecontainer d-flex flex-column pd-2">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 className="mb-1">Sales Tax</h3>
|
||||
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||
<button className="btn cus d-flex align-items-center"
|
||||
style={{ width: "250px",
|
||||
height: "48px",
|
||||
justifyContent:"center" }}
|
||||
onClick={toggleModal}>
|
||||
{" "}
|
||||
+ Add Prepaid Tax
|
||||
Add Prepaid Tax
|
||||
<img
|
||||
src={prepaid}
|
||||
alt="Bank Deposite Icon"
|
||||
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -241,42 +241,21 @@ const PayrollTable = ({
|
|||
</button>
|
||||
|
||||
|
||||
{/* <button className="btn custbtn2" type="submit">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ marginRight: "3px" }}
|
||||
>
|
||||
<g opacity="0.8">
|
||||
<path
|
||||
d="M19 3H5C3.586 3 2.879 3 2.44 3.412C2.001 3.824 2 4.488 2 5.815V6.505C2 7.542 2 8.061 2.26 8.491C2.52 8.921 2.993 9.189 3.942 9.723L6.855 11.363C7.491 11.721 7.81 11.9 8.038 12.098C8.512 12.509 8.804 12.993 8.936 13.588C9 13.872 9 14.206 9 14.873V17.543C9 18.452 9 18.907 9.252 19.261C9.504 19.616 9.952 19.791 10.846 20.141C12.725 20.875 13.664 21.242 14.332 20.824C15 20.406 15 19.452 15 17.542V14.872C15 14.206 15 13.872 15.064 13.587C15.1896 13.0042 15.5059 12.4798 15.963 12.097C16.19 11.9 16.509 11.721 17.145 11.362L20.058 9.722C21.006 9.189 21.481 8.922 21.74 8.492C22 8.062 22 7.542 22 6.504V5.814C22 4.488 22 3.824 21.56 3.412C21.122 3 20.415 3 19 3Z"
|
||||
stroke="white"
|
||||
strokeWidth="1.5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Filter
|
||||
</button> */}
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ marginRight: "58%" }}>
|
||||
<div style={{ marginRight: "1%" }}>
|
||||
<div
|
||||
className="expense-search d-flex align-items-center"
|
||||
|
||||
className="expense-search align-items-center"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid #DBDBDB",
|
||||
borderRadius: "10px",
|
||||
// boxSizing: "border-box",
|
||||
cursor: "pointer",
|
||||
width: "200px",
|
||||
|
||||
width: "170px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
|
|
@ -284,9 +263,9 @@ const PayrollTable = ({
|
|||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "16px",
|
||||
padding: "5px",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft:"10px"
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
|
|
@ -296,17 +275,18 @@ const PayrollTable = ({
|
|||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
backgroundColor: "#282E26",
|
||||
borderRadius: "0px 10px 10px 0px",
|
||||
color: "#F4FFEE",
|
||||
backgroundColor: "#282E26", // Match background color
|
||||
color: "#FFFFFF", // White text color
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "16px",
|
||||
lineHeight: "18px",
|
||||
padding: "5px 8px",
|
||||
border: "none",
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "4px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
|
|
@ -323,7 +303,6 @@ const PayrollTable = ({
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<thead className="table-header" >
|
||||
|
|
|
|||
|
|
@ -132,7 +132,9 @@ function ManageDepartments() {
|
|||
}}
|
||||
required
|
||||
/>
|
||||
<button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
|
||||
<button className="btn d-flex align-items-center"
|
||||
style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
|
||||
onClick={handleSaveDepartment}>
|
||||
{editDepartmentId ? "Update Department" : " + Add Department"}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import ReusableModal from "./ReusableModal";
|
||||
import useApi from "../../../../utils/api-manager/Helper/useApi";
|
||||
import AuthContext from "../../../../utils/secure-route/AuthContext";
|
||||
import "./Settings.css";
|
||||
|
|
@ -8,17 +7,14 @@ import SettingTable from "./SettingTable";
|
|||
import Swal from "sweetalert2";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
|
||||
|
||||
|
||||
function ManageExpenseType() {
|
||||
let { user } = useContext(AuthContext);
|
||||
const storeId = user.store;
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [isEditMode, setIsEditMode] = useState(false);
|
||||
const [selectedExpenseType, setSelectedExpenseType] = useState(null);
|
||||
const [expenseType, setExpenseType] = useState("");
|
||||
const [expenseTypes, setExpenseTypes] = useState([]);
|
||||
const [selectedExpenseTypeId, setSelectedExpenseTypeId] = useState(null); // Store the ID of the currently selected expense type
|
||||
const { Get, Post, Put, Delete } = useApi();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchExpenseTypes = async () => {
|
||||
try {
|
||||
|
|
@ -30,73 +26,56 @@ function ManageExpenseType() {
|
|||
};
|
||||
fetchExpenseTypes();
|
||||
}, []);
|
||||
const handleShow = () => {
|
||||
setShowModal(true);
|
||||
setIsEditMode(false);
|
||||
setSelectedExpenseType(null);
|
||||
|
||||
const handleAddNew = () => {
|
||||
setExpenseType("");
|
||||
setSelectedExpenseTypeId(null); // Reset the selected ID
|
||||
};
|
||||
|
||||
const handleEdit = (expenseType) => {
|
||||
setShowModal(true);
|
||||
setIsEditMode(true);
|
||||
setSelectedExpenseType(expenseType);
|
||||
setExpenseType(expenseType.title);
|
||||
setSelectedExpenseTypeId(expenseType.id); // Store the ID of the selected expense type
|
||||
};
|
||||
const handleClose = () => {
|
||||
setShowModal(false);
|
||||
setIsEditMode(false);
|
||||
setSelectedExpenseType(null);
|
||||
setExpenseType("");
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (expenseType) {
|
||||
try {
|
||||
if (isEditMode && selectedExpenseType) {
|
||||
if (selectedExpenseTypeId) {
|
||||
// Update existing expense type
|
||||
const response = await Put(
|
||||
"vendorDepartmentServiceData",
|
||||
selectedExpenseType.id,
|
||||
{ title: expenseType, store: storeId, type: "expense type" } // Send the data with store and type
|
||||
);
|
||||
if (response.status === 200) {
|
||||
setExpenseTypes(
|
||||
expenseTypes.map((et) =>
|
||||
et.id === selectedExpenseType.id
|
||||
? { ...et, title: expenseType }
|
||||
: et
|
||||
)
|
||||
);
|
||||
toast.success("Expense type updated successfully!");
|
||||
} else {
|
||||
console.error("Error updating expense type:", response.data);
|
||||
toast.error("Error updating expense type: " + response.data);
|
||||
}
|
||||
} else {
|
||||
// Add new expense type
|
||||
const response = await Post("vendorDepartmentServiceData", {
|
||||
const response = await Put("vendorDepartmentServiceData", selectedExpenseTypeId, {
|
||||
title: expenseType,
|
||||
store: storeId,
|
||||
type: "expense type",
|
||||
title: expenseType,
|
||||
});
|
||||
if (response.status === 201) {
|
||||
setExpenseTypes([...expenseTypes, response.data]);
|
||||
toast.success("Expense type added successfully!");
|
||||
if (response.status === 200) {
|
||||
// Update the state with the edited expense type
|
||||
setExpenseTypes(expenseTypes.map((et) =>
|
||||
et.id === selectedExpenseTypeId ? { ...et, title: expenseType } : et
|
||||
));
|
||||
toast.success("Expense type updated successfully!");
|
||||
}
|
||||
} else {
|
||||
console.error("Error saving expense type:", response.data);
|
||||
toast.error("Error saving expense type: " + response.data);
|
||||
// Add a new expense type
|
||||
const response = await Post("vendorDepartmentServiceData", {
|
||||
title: expenseType,
|
||||
store: storeId,
|
||||
type: "expense type",
|
||||
});
|
||||
if (response.status === 201) { // Assuming a 201 status code for successful creation
|
||||
setExpenseTypes([...expenseTypes, response.data]); // Assuming response.data returns the new expense type
|
||||
toast.success("Expense type added successfully!");
|
||||
}
|
||||
}
|
||||
handleClose();
|
||||
handleAddNew(); // Reset after saving (adding or updating)
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
isEditMode ? "Error updating expense type: " (error.response ? error.response.data : error.message) :
|
||||
"Error saving expense type: " + (error.response ? error.response.data : error.message)
|
||||
);
|
||||
toast.error("Error saving expense type: " + (error.response ? error.response.data : error.message));
|
||||
}
|
||||
} else {
|
||||
toast.warn("Expense type is required");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
|
|
@ -108,7 +87,6 @@ function ManageExpenseType() {
|
|||
confirmButtonText: "Yes, delete it!",
|
||||
});
|
||||
|
||||
// Check if the user clicked the confirm button
|
||||
if (!result.isConfirmed) return; // Exit if the user cancels
|
||||
try {
|
||||
await Delete("vendorDepartmentServiceData", id);
|
||||
|
|
@ -118,41 +96,16 @@ function ManageExpenseType() {
|
|||
toast.error("Error deleting expense type: " + (error.response ? error.response.data : error.message));
|
||||
}
|
||||
};
|
||||
|
||||
const data = expenseTypes.filter((et) => et.type === "expense type");
|
||||
const columns = [{ header: "Department / Expense Type", field: "title" }];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="due-days">
|
||||
<div className="header-row">
|
||||
<div className="setting-title">Manage Expense Type</div>
|
||||
<div className="btn-position">
|
||||
<button className="vendor-add-button" onClick={handleShow}>
|
||||
+ Add Expense Type
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<SettingTable
|
||||
data={data}
|
||||
showFooter={true}
|
||||
columns={columns}
|
||||
showAction={true}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
<ReusableModal
|
||||
show={showModal}
|
||||
handleClose={handleClose}
|
||||
title={isEditMode ? "Edit Expense Type" : "Add Expense Type"}
|
||||
width="697px"
|
||||
height="171px"
|
||||
>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
}}
|
||||
>
|
||||
<div className="form-group d-flex align-items-center ">
|
||||
<div className="" style={{ marginTop: "5%" }}>
|
||||
<div className="department-container">
|
||||
<div className="input-container">
|
||||
<div className="input-row">
|
||||
<input
|
||||
type="text"
|
||||
id="expenseTypeName"
|
||||
|
|
@ -160,33 +113,40 @@ function ManageExpenseType() {
|
|||
placeholder="Expense Type"
|
||||
value={expenseType}
|
||||
onChange={(e) => setExpenseType(e.target.value)}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
|
||||
style={{ width: "483px", marginRight: "10px" ,
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
backgroundColor: "#4545db",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
cursor: "pointer",
|
||||
width: "103px",
|
||||
height: "42px",
|
||||
fontSize: "18px",
|
||||
marginLeft:"20px",
|
||||
isEditMode
|
||||
}}
|
||||
type="button" // Prevent form submission
|
||||
className="btn d-flex align-items-center"
|
||||
style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
|
||||
|
||||
onClick={handleSave} // Call handleSave on button click
|
||||
>
|
||||
{isEditMode ? "Update" : "Submit"}
|
||||
{selectedExpenseTypeId ? "Update Expense" : "Add Expense Type"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ReusableModal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="due-days">
|
||||
|
||||
|
||||
<SettingTable
|
||||
data={data}
|
||||
showFooter={true}
|
||||
columns={columns}
|
||||
showAction={true}
|
||||
onEdit={handleEdit} // Pass handleEdit to SettingTable
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
<ToastContainer />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ManageExpenseType;
|
||||
|
|
|
|||
|
|
@ -413,23 +413,13 @@ const ManageSettings = () => {
|
|||
<div className="card">
|
||||
<div className="card-body">
|
||||
<p className="question-text">{setting.question}</p>
|
||||
|
||||
<CustomSwitch
|
||||
setting={setting}
|
||||
isActive={
|
||||
setting.id === 13 ||
|
||||
setting.id === 14 ||
|
||||
checkedStates[setting.id]
|
||||
}
|
||||
handleSwitchChange={handleSwitchChange}
|
||||
disabled={setting.id === 13 || setting.id === 14} // Disable for IDs 13 and 14
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="row setting-manage">
|
||||
{/* First Dropdown */}
|
||||
<div className="col-md-6">
|
||||
{isDropdownVisible && (
|
||||
<select
|
||||
|
|
@ -442,7 +432,9 @@ const ManageSettings = () => {
|
|||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
|
||||
{/* Second Dropdown */}
|
||||
<div className="col-md-6">
|
||||
{isDropdownVisible && (
|
||||
<select
|
||||
className="form-select mt-3"
|
||||
|
|
@ -450,20 +442,18 @@ const ManageSettings = () => {
|
|||
value={selectedLotteryRegister}
|
||||
onChange={handleLotteryRegisterChange}
|
||||
>
|
||||
{renderOptions(
|
||||
selectedLotteryRegister,
|
||||
numberOfLotteryRegisters
|
||||
)}
|
||||
{renderOptions(selectedLotteryRegister, numberOfLotteryRegisters)}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label htmlFor="sales_tax_percentage">
|
||||
|
||||
{/* Sales Tax Percentage Input */}
|
||||
<div className="col-md-12 d-flex align-items-center mt-3" style={{
|
||||
|
||||
}}>
|
||||
<label htmlFor="sales_tax_percentage" className="me-2">
|
||||
Sales Tax Percentage:
|
||||
</label>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input
|
||||
type="number"
|
||||
id="sales_tax_percentage"
|
||||
|
|
@ -471,13 +461,13 @@ const ManageSettings = () => {
|
|||
onBlur={handleIncrementSalesTax} // Trigger the function when input loses focus
|
||||
onChange={(e) => setSalesTax(e.target.value)} // Allow editing the value while typing
|
||||
placeholder="Enter percentage"
|
||||
className="form-control"
|
||||
className="form-control w-25" // Adjust width as needed
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bank-container">
|
||||
<div className="header-row">
|
||||
<div className="setting-title">Manage Bank</div>
|
||||
|
|
@ -535,7 +525,7 @@ const ManageSettings = () => {
|
|||
show={showModal && formType === "bank"}
|
||||
handleClose={handleClose}
|
||||
title="Add Bank"
|
||||
width="1054px"
|
||||
width="600px"
|
||||
height="auto"
|
||||
>
|
||||
<form>
|
||||
|
|
@ -546,7 +536,11 @@ const ManageSettings = () => {
|
|||
onChange={(e) => setBankName(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="Bank Name"
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -554,7 +548,11 @@ const ManageSettings = () => {
|
|||
onChange={(e) => setBankBranch(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="Bank Short Name"
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
style={{
|
||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group d-flex align-items-center mt-1">
|
||||
|
|
@ -564,7 +562,11 @@ const ManageSettings = () => {
|
|||
onChange={(e) => setAccountNumber(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="Account Number"
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
style={{
|
||||
width: "270px", marginRight: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
||||
|
|
@ -574,13 +576,13 @@ const ManageSettings = () => {
|
|||
style={{
|
||||
marginRight: "40px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#4545db",
|
||||
backgroundColor: " #282E26",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
cursor: "pointer",
|
||||
width: "124px",
|
||||
height: "42px",
|
||||
width: "181px",
|
||||
height: "45px",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -642,7 +644,11 @@ const ManageSettings = () => {
|
|||
className="input-day"
|
||||
value={day.days}
|
||||
readOnly
|
||||
style={{ paddingLeft: "10px" }}
|
||||
style={{
|
||||
paddingLeft: "10px", backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* <button className="card-button day">Mark as Default</button> */}
|
||||
|
|
@ -654,39 +660,50 @@ const ManageSettings = () => {
|
|||
handleClose={handleClose}
|
||||
title="Add Due Days"
|
||||
width="683px"
|
||||
height="172px"
|
||||
height="230px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group d-flex align-items-center">
|
||||
<div className="form-group mx-5" style={{ display: "flex", flexDirection: "column" }}>
|
||||
<input
|
||||
type="number"
|
||||
value={dueDays}
|
||||
onChange={(e) => setDueDays(e.target.value)}
|
||||
className="input-field"
|
||||
placeholder="Due Days"
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
placeholder="Enter Due Days"
|
||||
style={{
|
||||
width: "100%",
|
||||
marginBottom: "10px",
|
||||
border: "none",
|
||||
borderBottom: "2px solid #ccc", // Only bottom border
|
||||
padding: "8px 0",
|
||||
fontSize: "16px",
|
||||
outline: "none",
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
||||
<button
|
||||
onClick={handleSaveDueDays}
|
||||
type="button"
|
||||
style={{
|
||||
marginRight: "40px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#4545db",
|
||||
padding: "10px 16px",
|
||||
backgroundColor: "#282E26",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
borderRadius: "20px",
|
||||
cursor: "pointer",
|
||||
width: "124px",
|
||||
height: "42px",
|
||||
fontSize: "18px",
|
||||
width: "150px",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
{editingDueDayId ? "Update" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ReusableModal>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -278,21 +278,17 @@ const ManageUserTable = ({
|
|||
)}
|
||||
</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: "200px",
|
||||
|
||||
width: "170px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
|
|
@ -300,9 +296,9 @@ const ManageUserTable = ({
|
|||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "16px",
|
||||
padding: "5px",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft:"10px"
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
|
|
@ -312,17 +308,18 @@ const ManageUserTable = ({
|
|||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
backgroundColor: "#282E26",
|
||||
borderRadius: "0px 10px 10px 0px",
|
||||
color: "#F4FFEE",
|
||||
backgroundColor: "#282E26", // Match background color
|
||||
color: "#FFFFFF", // White text color
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "16px",
|
||||
lineHeight: "18px",
|
||||
padding: "5px 8px",
|
||||
border: "none",
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "4px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
|
|
@ -337,7 +334,8 @@ const ManageUserTable = ({
|
|||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -394,14 +394,28 @@ function ManageUsers() {
|
|||
<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 */}
|
||||
|
||||
|
||||
<button
|
||||
className="btn cus d-flex align-items-center"
|
||||
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
||||
style={{
|
||||
backgroundColor: "#4A5546",
|
||||
boxShadow: "none",
|
||||
outline: "none",
|
||||
width: "auto",
|
||||
height: "42px",
|
||||
padding: "8px 12px",
|
||||
fontSize: "16px",
|
||||
border: "none",
|
||||
borderRadius: "10px",
|
||||
color: "#F4FFEE",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
|
||||
>
|
||||
+ Add New User
|
||||
Assign Existing User As Owner
|
||||
<img
|
||||
src={userIcon}
|
||||
alt="user Icon"
|
||||
src={ownerIcon}
|
||||
alt="owner Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -421,7 +435,7 @@ function ManageUsers() {
|
|||
}}
|
||||
onClick={() => handleShowStoreModal()} // Open modal for adding a user
|
||||
>
|
||||
+ Add New Store
|
||||
Add New Store
|
||||
<img
|
||||
src={storeIcon}
|
||||
alt="store Icon"
|
||||
|
|
@ -429,25 +443,13 @@ function ManageUsers() {
|
|||
/>
|
||||
</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",
|
||||
}}
|
||||
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
|
||||
className="btn cus d-flex align-items-center"
|
||||
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
||||
>
|
||||
+ Assign Existing User As Owner
|
||||
Add New User
|
||||
<img
|
||||
src={ownerIcon}
|
||||
alt="owner Icon"
|
||||
src={userIcon}
|
||||
alt="user Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -472,7 +474,7 @@ function ManageUsers() {
|
|||
width="700px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group d-flex flex-column p-5">
|
||||
<div className="form-group d-flex flex-column px-5">
|
||||
<div className="d-flex align-items-center mb-3 ">
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -592,7 +594,7 @@ function ManageUsers() {
|
|||
width="700px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group p-5">
|
||||
<div className="form-group px-5">
|
||||
{/* Wrapper for Flexbox */}
|
||||
<div className="d-flex flex-wrap">
|
||||
{/* Left Side */}
|
||||
|
|
@ -745,7 +747,7 @@ function ManageUsers() {
|
|||
width="600px"
|
||||
>
|
||||
<form onSubmit={handleAssignOwnerSubmit}>
|
||||
<div className="form-group d-flex flex-column mt-1 p-3 ">
|
||||
<div className="form-group d-flex flex-column mt-1 px-5 ">
|
||||
<input
|
||||
type="email"
|
||||
className="input-field"
|
||||
|
|
|
|||
|
|
@ -190,8 +190,8 @@ function ManageVendor() {
|
|||
<div className="header-row">
|
||||
<div className="setting-title">Manage Vendor</div>
|
||||
<div className="btn-position">
|
||||
<button className="vendor-add-button" onClick={handleShow}>
|
||||
+ Add Vendor
|
||||
<button className="btn cus d-flex align-items-center" style={{marginBottom:"10px"}} onClick={handleShow}>
|
||||
Add Vendor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,7 +224,7 @@ function ManageVendor() {
|
|||
handleSave();
|
||||
}}
|
||||
>
|
||||
<div className="form-group d-flex align-items-center mt-0">
|
||||
<div className="form-group d-flex align-items-center mt-0 mx-5">
|
||||
<input
|
||||
type="text"
|
||||
id="vendorName"
|
||||
|
|
@ -232,7 +232,11 @@ function ManageVendor() {
|
|||
placeholder="Vendor Name"
|
||||
value={vendorName}
|
||||
onChange={(e) => setVendorName(e.target.value)}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
/>
|
||||
<select
|
||||
id="vendorType"
|
||||
|
|
@ -243,7 +247,11 @@ function ManageVendor() {
|
|||
setVendorDepartments([]); // Reset departments when type changes
|
||||
setOpeningBalance("");
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
>
|
||||
<option value="">Vendor Type</option>
|
||||
<option value="purchase">Purchase</option>
|
||||
|
|
@ -279,6 +287,11 @@ function ManageVendor() {
|
|||
width: "400px",
|
||||
marginRight: "10px",
|
||||
height: "44px",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
marginLeft:"45px"
|
||||
|
||||
}}
|
||||
>
|
||||
<option value="">
|
||||
|
|
@ -314,6 +327,9 @@ function ManageVendor() {
|
|||
width: "400px",
|
||||
marginRight: "10px",
|
||||
height: "44px",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -325,13 +341,14 @@ function ManageVendor() {
|
|||
style={{
|
||||
marginLeft: "690px",
|
||||
padding: "4px 8px",
|
||||
backgroundColor: "#4545db",
|
||||
background: "#282E26",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
cursor: "pointer",
|
||||
width: "124px",
|
||||
height: "42px",
|
||||
width: "181px",
|
||||
height: "45px",
|
||||
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ import { toast, ToastContainer } from "react-toastify";
|
|||
import Swal from "sweetalert2";
|
||||
import "./Settings.css";
|
||||
|
||||
|
||||
function OtherIncomeType() {
|
||||
let { user } = useContext(AuthContext);
|
||||
const storeId = user.store;
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [incomes, setIncomes] = useState([]);
|
||||
const [editIncome, setEditIncome] = useState(null);
|
||||
const { Get, Post, Put, Delete } = useApi();
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch existing income types from the API
|
||||
const fetchIncomes = async () => {
|
||||
|
|
@ -29,6 +29,7 @@ function OtherIncomeType() {
|
|||
};
|
||||
fetchIncomes();
|
||||
}, []);
|
||||
|
||||
const handleShow = (income = null) => {
|
||||
if (income) {
|
||||
setEditIncome(income);
|
||||
|
|
@ -37,20 +38,23 @@ function OtherIncomeType() {
|
|||
setEditIncome(null);
|
||||
setName(""); // Reset name when adding a new income type
|
||||
}
|
||||
setShowModal(true);
|
||||
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setShowModal(false);
|
||||
|
||||
setName(""); // Reset name when closing
|
||||
setEditIncome(null); // Reset editIncome when closing
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (name) {
|
||||
try {
|
||||
if (editIncome) {
|
||||
// Update existing income type
|
||||
const response = await Put("otherIncomeData", editIncome.id, {
|
||||
title: name,store: storeId,
|
||||
title: name,
|
||||
store: storeId,
|
||||
});
|
||||
const updatedIncome = response.data;
|
||||
setIncomes((prevIncomes) =>
|
||||
|
|
@ -62,7 +66,8 @@ function OtherIncomeType() {
|
|||
} else {
|
||||
// Add new income type
|
||||
const response = await Post("otherIncomeData", {
|
||||
title: name,store: storeId,
|
||||
title: name,
|
||||
store: storeId,
|
||||
});
|
||||
const newIncome = response.data;
|
||||
setIncomes([...incomes, newIncome]);
|
||||
|
|
@ -77,6 +82,7 @@ function OtherIncomeType() {
|
|||
toast.warn("Income type name cannot be empty.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
|
|
@ -104,34 +110,48 @@ function OtherIncomeType() {
|
|||
toast.error("Failed to delete income type.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="due-days">
|
||||
<div className="header-row">
|
||||
<div className="setting-title">Other Income Type</div>
|
||||
<div className="btn-position">
|
||||
<button className="vendor-add-button" onClick={() => handleShow()}>
|
||||
+ Add New
|
||||
<div className="" style={{ marginTop: "5%" }}>
|
||||
<ToastContainer />
|
||||
{/* <p className="setting-title">Manage Departments</p> */}
|
||||
<div className="department-container">
|
||||
<div className="input-container">
|
||||
<div className="input-row">
|
||||
<input
|
||||
type="text"
|
||||
id="incomeTypeName"
|
||||
className="input-field"
|
||||
placeholder="Enter income type name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
style={{
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="btn d-flex align-items-center"
|
||||
type="button"
|
||||
style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
|
||||
|
||||
>
|
||||
{editIncome ? "Update " : "Add Other Income"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="store-container">
|
||||
|
||||
<div className="show-department-section">
|
||||
<div className="dept-cards-row">
|
||||
{incomes.length === 0 ? (
|
||||
<p
|
||||
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",
|
||||
}}
|
||||
>
|
||||
No data found
|
||||
</p>
|
||||
) : (
|
||||
incomes.map((income) => (
|
||||
{incomes.map((income) => (
|
||||
<div className="dept-card" key={income.id}>
|
||||
<input className="dept-info" value={income.title} readOnly />
|
||||
<svg
|
||||
|
|
@ -150,7 +170,7 @@ function OtherIncomeType() {
|
|||
</svg>
|
||||
<svg
|
||||
className="dept-icon"
|
||||
onClick={() => handleDelete(income.id)} // Show modal for editing
|
||||
onClick={() => handleDelete(income.id)}
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -164,49 +184,15 @@ function OtherIncomeType() {
|
|||
</svg>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<ReusableModal
|
||||
show={showModal}
|
||||
handleClose={handleClose}
|
||||
title={editIncome ? "Edit Other Income Type" : "Add Other Income Type"}
|
||||
width="697px"
|
||||
height="200px"
|
||||
>
|
||||
<form>
|
||||
<div className="form-group d-flex align-items-center mt-1">
|
||||
<input
|
||||
type="text"
|
||||
id="incomeTypeName"
|
||||
className="input-field"
|
||||
placeholder="Enter income type name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
style={{ width: "483px", marginRight: "10px" }}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
type="button"
|
||||
style={{
|
||||
padding: "6px 8px",
|
||||
backgroundColor: "#4545db", // Bootstrap primary color
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "40px",
|
||||
cursor: "pointer",
|
||||
width: "103px",
|
||||
height: "42px",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
{editIncome ? "Update" : "Save"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ReusableModal>
|
||||
<ToastContainer/>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default OtherIncomeType;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const ReusableModal = ({
|
|||
};
|
||||
|
||||
const modalContentStyle = {
|
||||
borderRadius: "30px",
|
||||
borderRadius: "40px",
|
||||
overflow: "hidden",
|
||||
width: width, // use the width prop
|
||||
height: height, // use the height prop
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const SettingTable = ({
|
|||
pages.push(
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i ? "active" : ""}`}
|
||||
className={`page-item ${currentPage === i ? "active" : "pgbtn"}`}
|
||||
>
|
||||
<a
|
||||
className="page-link"
|
||||
|
|
@ -200,6 +200,7 @@ const SettingTable = ({
|
|||
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)" }}
|
||||
/>
|
||||
<svg
|
||||
className="search-container-icon"
|
||||
|
|
@ -293,16 +294,55 @@ const SettingTable = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||
<h3 className="me-2">Show</h3>
|
||||
<div style={{ marginRight: "1%" }}>
|
||||
<div
|
||||
className="expense-search d-flex align-items-center"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid #DBDBDB",
|
||||
borderRadius: "10px",
|
||||
cursor: "pointer",
|
||||
width: "200px",
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft:"10px"
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
</span>
|
||||
<select
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
backgroundColor: "#282E26", // Match background color
|
||||
color: "#FFFFFF", // White text color
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "2px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to first page on change
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
|
|
@ -311,7 +351,10 @@ const SettingTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table className="data-table custom-table" style={{borderRadius:"none"}} >
|
||||
<thead className="table-header">
|
||||
<tr>
|
||||
|
|
@ -435,7 +478,7 @@ const SettingTable = ({
|
|||
{showFooter && (
|
||||
<nav>
|
||||
<ul className="pagination">
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "24px",
|
||||
|
|
@ -454,9 +497,9 @@ const SettingTable = ({
|
|||
<
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</li> */}
|
||||
{renderPagination()}
|
||||
<li
|
||||
{/* <li
|
||||
className={`prev-next ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
|
|
@ -479,7 +522,7 @@ const SettingTable = ({
|
|||
>
|
||||
>{" "}
|
||||
</span>
|
||||
</li>
|
||||
</li> */}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
/*================================================Setting page===================================================================================*/
|
||||
|
||||
/* Dropdown container styles */
|
||||
|
||||
|
||||
.setting-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -11,6 +15,7 @@
|
|||
width: 1600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
|
|
@ -18,14 +23,17 @@
|
|||
color: #002300;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.row.setting-manage {
|
||||
width: 1600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -35,6 +43,7 @@
|
|||
max-height: 100%;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
|
|
@ -42,97 +51,126 @@
|
|||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.form-check {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*===========================================================================Bank container=================================================================*/
|
||||
.bank-container {
|
||||
padding: 20px; /* Adjust as needed */
|
||||
padding: 20px;
|
||||
/* Adjust as needed */
|
||||
margin: 30px auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
border-radius: 40px;
|
||||
width: 1600px;
|
||||
height: 467px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1540px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.setting-title {
|
||||
font-size: 24px; /* Adjust font size as needed */
|
||||
margin: 0; /* Remove default margin */
|
||||
font-size: 24px;
|
||||
/* Adjust font size as needed */
|
||||
margin: 0;
|
||||
/* Remove default margin */
|
||||
}
|
||||
|
||||
.bank-add-button {
|
||||
padding: 8px 16px;
|
||||
background-color: #4545db; /* Bootstrap primary color */
|
||||
color: white;
|
||||
background-color: #ffaf32;
|
||||
/* Bootstrap primary color */
|
||||
color: #000000;
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
width: 155px;
|
||||
height: 42px;
|
||||
width: 177px;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.second-container {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bank-cards {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allow wrapping */
|
||||
flex-wrap: wrap;
|
||||
/* Allow wrapping */
|
||||
}
|
||||
|
||||
.bank-card {
|
||||
width: 426px;
|
||||
height: 206px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgba(0, 35, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
border-radius: 20px;
|
||||
width: 348px;
|
||||
height: 303px;
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack content vertically */
|
||||
flex-direction: column;
|
||||
/* Stack content vertically */
|
||||
padding: 16px;
|
||||
margin: 10px 0; /* Vertical margin only */
|
||||
margin: 10px 0;
|
||||
/* Vertical margin only */
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bank-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bank-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bank-name-group {
|
||||
margin-bottom: 16px; /* Space between the groups of names */
|
||||
margin-bottom: 16px;
|
||||
/* Space between the groups of names */
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #002300;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.bank-short-name {
|
||||
font-size: 16px;
|
||||
color: #002300;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.del-icon {
|
||||
color: #002300;
|
||||
position: absolute;
|
||||
|
|
@ -140,6 +178,7 @@
|
|||
right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-button {
|
||||
text-align: left;
|
||||
border: 1px solid #4545db;
|
||||
|
|
@ -151,45 +190,60 @@
|
|||
font-size: 18px;
|
||||
color: #4545db;
|
||||
}
|
||||
|
||||
.card-button.default {
|
||||
width: 212px;
|
||||
}
|
||||
|
||||
.card-button.atm {
|
||||
width: 252px;
|
||||
}
|
||||
|
||||
.card-button.ltry {
|
||||
width: 277px;
|
||||
}
|
||||
|
||||
.card-button.credit {
|
||||
width: 313px;
|
||||
}
|
||||
|
||||
/*======================================================Due Days css Start==========================================================================*/
|
||||
.due-days {
|
||||
padding: 20px; /* Adjust as needed */
|
||||
padding: 20px;
|
||||
/* Adjust as needed */
|
||||
margin: 20px auto;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
border-radius: 40px;
|
||||
width: 1600px;
|
||||
|
||||
max-width: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.due-card {
|
||||
position: relative;
|
||||
width: 360px; /* Fixed width for each card */
|
||||
height: 185px; /* Fixed height for each card */
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgba(0, 35, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
width: 348px;
|
||||
height: 196px;
|
||||
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column; /* Column layout inside the card */
|
||||
flex-direction: column;
|
||||
/* Column layout inside the card */
|
||||
padding: 16px;
|
||||
margin: 10px; /* Margin for spacing */
|
||||
margin: 10px;
|
||||
/* Margin for spacing */
|
||||
}
|
||||
|
||||
.due-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.due-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -199,28 +253,41 @@
|
|||
right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-day {
|
||||
width: 260px;
|
||||
height: 44px;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid rgba(0, 35, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
/* Remove all borders */
|
||||
border-bottom: 2px solid #ccc;
|
||||
/* Only apply the bottom border */
|
||||
border-radius: 4px;
|
||||
/* Optional: apply a border-radius if needed */
|
||||
outline: none;
|
||||
/* Optional: removes the default focus outline */
|
||||
}
|
||||
|
||||
.card-button.day {
|
||||
margin-top: 20px;
|
||||
width: 191px;
|
||||
}
|
||||
|
||||
.btn-position {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.vendor-add {
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px; /* Space between rows */
|
||||
margin-bottom: 10px;
|
||||
/* Space between rows */
|
||||
}
|
||||
|
||||
.vendor-add-button {
|
||||
padding: 8px 26px;
|
||||
background-color: #4545db; /* Bootstrap primary color */
|
||||
background-color: #4545db;
|
||||
/* Bootstrap primary color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
|
|
@ -228,48 +295,64 @@
|
|||
height: 42px;
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px; /* Space between buttons */
|
||||
margin-bottom: 10px;
|
||||
/* Space between buttons */
|
||||
}
|
||||
|
||||
/* Remove the margin from the last button */
|
||||
.vendor-add-button:last-child {
|
||||
margin-bottom: 0; /* No margin for the last button */
|
||||
margin-bottom: 0;
|
||||
/* No margin for the last button */
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 600px) {
|
||||
.vendor-add-button {
|
||||
width: 100%; /* Full width buttons */
|
||||
margin-bottom: 10px; /* Maintain spacing for mobile */
|
||||
width: 100%;
|
||||
/* Full width buttons */
|
||||
margin-bottom: 10px;
|
||||
/* Maintain spacing for mobile */
|
||||
}
|
||||
}
|
||||
|
||||
/* styles.css */
|
||||
.rounded-table {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-head {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.table-head th {
|
||||
padding: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-body td {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/*===============================================================Store Css Start===============================================================*/
|
||||
.store-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start; /* Align items to the start (left) */
|
||||
border-radius: 40px;
|
||||
align-items: flex-start;
|
||||
/* Align items to the start (left) */
|
||||
|
||||
padding: 30px;
|
||||
margin: 20px auto;
|
||||
background-color: #ffffff;
|
||||
|
||||
width: 1600px;
|
||||
max-width: 100%;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
|
||||
border-radius: 14px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -277,33 +360,44 @@
|
|||
.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) */
|
||||
justify-content: flex-start;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
align-items: flex-start;
|
||||
border: 1px solid #EBEAF2;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
margin: 10px 0;
|
||||
|
||||
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 */
|
||||
width: 850px;
|
||||
|
||||
max-width: 100%;
|
||||
|
||||
margin-left: 160px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.setting-title {
|
||||
margin-bottom: 10px; /* Space between title and inputs */
|
||||
font-size: 24px; /* Adjust as needed */
|
||||
margin-bottom: 10px;
|
||||
/* Space between title and inputs */
|
||||
font-size: 24px;
|
||||
/* Adjust as needed */
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%; /* Ensure it takes the full width */
|
||||
width: 100%;
|
||||
/* Ensure it takes the full width */
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex; /* Use flexbox to align input fields */
|
||||
gap: 10px; /* Space between input fields */
|
||||
display: flex;
|
||||
/* Use flexbox to align input fields */
|
||||
gap: 10px;
|
||||
/* Space between input fields */
|
||||
}
|
||||
|
||||
.input-field {
|
||||
padding: 10px;
|
||||
width: 600px;
|
||||
|
|
@ -312,19 +406,24 @@
|
|||
border: 1px solid #f6f6f6;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
align-items: center; /* This centers the items vertically */
|
||||
align-items: center;
|
||||
/* This centers the items vertically */
|
||||
gap: 10px;
|
||||
width: 308px;
|
||||
height: 46px;
|
||||
font-size: 20px;
|
||||
justify-content: center; /* Center items horizontally */
|
||||
justify-content: center;
|
||||
/* Center items horizontally */
|
||||
}
|
||||
|
||||
.current-plan {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
|
|
@ -336,23 +435,30 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-store {
|
||||
width: 377px; /* Set card width */
|
||||
height: 400px; /* Set card height */
|
||||
width: 377px;
|
||||
/* Set card width */
|
||||
height: 400px;
|
||||
/* Set card height */
|
||||
border: 1px solid rgba(69, 69, 219, 0.3);
|
||||
box-shadow: 12px 4px 4px rgba(0, 0, 0, 0.18);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-store.basic {
|
||||
background-color: #f4f6ff;
|
||||
}
|
||||
|
||||
.card-store.premium {
|
||||
background-color: #ececfb;
|
||||
}
|
||||
|
||||
.card-store.enterprise {
|
||||
background-color: #f4f6ff;
|
||||
}
|
||||
|
||||
.card-store-title {
|
||||
width: 313px;
|
||||
font-size: 32px;
|
||||
|
|
@ -360,11 +466,13 @@
|
|||
margin-left: 20px;
|
||||
font-weight: 600px;
|
||||
}
|
||||
|
||||
.card-store-description {
|
||||
width: 325px;
|
||||
font-size: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.card-store-sub-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -373,35 +481,42 @@
|
|||
margin-left: 20px;
|
||||
font-weight: 600px;
|
||||
}
|
||||
|
||||
.dollar-sign {
|
||||
font-size: 40px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.card-store-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto; /* Center horizontally */
|
||||
margin: auto;
|
||||
/* Center horizontally */
|
||||
border: 1px solid #4545db;
|
||||
border-radius: 40px;
|
||||
margin-top: 10px;
|
||||
background-color: #ffffff;
|
||||
height: 52px;
|
||||
width: 300px; /* Adjust width */
|
||||
width: 300px;
|
||||
/* Adjust width */
|
||||
padding: 0 25px;
|
||||
font-size: 18px;
|
||||
color: #4545db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-store-button.premium {
|
||||
background-color: #4545db;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.sub-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------------upcoming invoice-------------------------------------*/
|
||||
.saved-card {
|
||||
width: 260px;
|
||||
|
|
@ -415,45 +530,63 @@
|
|||
position: relative;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between; /* Align label and bank name */
|
||||
align-items: center; /* Center vertically */
|
||||
margin-bottom: 10px; /* Space below header */
|
||||
justify-content: space-between;
|
||||
/* Align label and bank name */
|
||||
align-items: center;
|
||||
/* Center vertically */
|
||||
margin-bottom: 10px;
|
||||
/* Space below header */
|
||||
}
|
||||
|
||||
.credit-card-label {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bank-name-card {
|
||||
font-size: 16px;
|
||||
text-align: right; /* Align bank name to the right */
|
||||
margin: 0; /* Remove default margin */
|
||||
text-align: right;
|
||||
/* Align bank name to the right */
|
||||
margin: 0;
|
||||
/* Remove default margin */
|
||||
}
|
||||
|
||||
.card-number {
|
||||
text-align: center;
|
||||
font-size: 20px; /* Adjust size as needed */
|
||||
font-size: 20px;
|
||||
/* Adjust size as needed */
|
||||
margin-top: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between; /* Space between card holder and validity */
|
||||
margin-top: auto; /* Push footer to the bottom */
|
||||
justify-content: space-between;
|
||||
/* Space between card holder and validity */
|
||||
margin-top: auto;
|
||||
/* Push footer to the bottom */
|
||||
}
|
||||
|
||||
.card-holder {
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
margin: 0; /* Remove default margin */
|
||||
margin: 0;
|
||||
/* Remove default margin */
|
||||
}
|
||||
|
||||
.valid-through {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dept-button {
|
||||
padding: 6px 8px;
|
||||
background-color: #4545db; /* Bootstrap primary color */
|
||||
background-color: #4545db;
|
||||
/* Bootstrap primary color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
|
|
@ -462,59 +595,81 @@
|
|||
height: 42px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.dept-cards-row {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allow wrapping to the next row */
|
||||
gap: 10px; /* Space between cards */ /* space above cards */
|
||||
flex-wrap: wrap;
|
||||
/* Allow wrapping to the next row */
|
||||
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 #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 */
|
||||
|
||||
/* Add box shadow */
|
||||
}
|
||||
|
||||
.dept-info {
|
||||
width: 386px;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
|
||||
border: none; /* Remove the redundant border */
|
||||
border: none;
|
||||
/* Remove the redundant border */
|
||||
|
||||
border-radius: 10px; /* Rounded corners */
|
||||
border-radius: 10px;
|
||||
/* Rounded corners */
|
||||
}
|
||||
|
||||
.create-department-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dept-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ===========================================================Expense Screen CSS Start =============================================================*/
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
color: rgba(0, 0, 0, 0);
|
||||
opacity: 1;
|
||||
display: block;
|
||||
background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.5 9.08984H20.5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 13.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 16.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 13.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 16.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 13.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 16.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
|
||||
no-repeat;
|
||||
background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.5 9.08984H20.5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 13.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 16.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 13.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 16.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 13.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 16.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: thin;
|
||||
}
|
||||
|
||||
input[type="date"] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*==================================================================vendor multiselect==========================================================*/
|
||||
.chips-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 5px; /* Space between chips and dropdown */
|
||||
max-width: 483px; /* Match the dropdown width */
|
||||
margin-bottom: 5px;
|
||||
/* Space between chips and dropdown */
|
||||
max-width: 483px;
|
||||
/* Match the dropdown width */
|
||||
}
|
||||
|
||||
.chip {
|
||||
|
|
@ -531,6 +686,7 @@ input[type="date"] {
|
|||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Custom styles for the select element and option hover */
|
||||
|
||||
|
||||
|
|
@ -539,6 +695,7 @@ input[type="date"] {
|
|||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border: 2px solid #F4F4F4;
|
||||
|
|
@ -546,17 +703,22 @@ input[type="date"] {
|
|||
/* border-radius: 20px 20px 0 0; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-header th, .table-body td {
|
||||
|
||||
.table-header th,
|
||||
.table-body td {
|
||||
/* border: 1px solid #F4F4F4; */
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table-header th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
cursor: pointer; /* Added cursor for sortable columns */
|
||||
cursor: pointer;
|
||||
/* Added cursor for sortable columns */
|
||||
}
|
||||
|
||||
.table-body td {
|
||||
padding-left: 20px;
|
||||
color: #002300;
|
||||
|
|
@ -564,20 +726,25 @@ input[type="date"] {
|
|||
border-bottom: 1px solid #EBEAF2;
|
||||
|
||||
}
|
||||
|
||||
.table-body tr:last-child td {
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
}
|
||||
|
||||
.no-column {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.action-column {
|
||||
color: #002300;
|
||||
width: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -585,56 +752,86 @@ input[type="date"] {
|
|||
padding: 0;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.action-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #002300;
|
||||
transition: fill 0.3s;
|
||||
}
|
||||
|
||||
.action-button:hover svg {
|
||||
fill: #005600;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
padding: 10px 0;
|
||||
|
||||
.p.pagination {
|
||||
border-end-start-radius: 24px;
|
||||
border-end-end-radius: 24px;
|
||||
border-radius: 50%;
|
||||
/* Overall border radius for the pagination container */
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
/* Ensure it behaves as a flex container */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.pagination .page-item {
|
||||
margin: 0 5px;
|
||||
|
||||
width: 30px;
|
||||
/* Fixed width */
|
||||
height: 30px;
|
||||
/* Fixed height */
|
||||
border-radius: 50%;
|
||||
/* Make sure all page items are circular */
|
||||
display: flex;
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
/* Center the content vertically */
|
||||
justify-content: center;
|
||||
/* Center the content horizontally */
|
||||
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
padding: 10px;
|
||||
border: 1px solid #F4F4F4;
|
||||
/* background-color: #ffffff; */
|
||||
background-color: #b6d7a8;
|
||||
border-radius: 30px;
|
||||
border-radius: 50%;
|
||||
/* Make sure links are circular */
|
||||
color: #002300;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
/* Center the content vertically */
|
||||
justify-content: center;
|
||||
/* Center the content horizontally */
|
||||
width: 30px;
|
||||
/* Fixed width */
|
||||
height: 30px;
|
||||
|
||||
/* Fixed height */
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: red;
|
||||
background-color: #b6d7a8;
|
||||
/* Same background color on hover */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 30px;
|
||||
background-color: #ffaf32; /* Yellow background */
|
||||
background-color: #ffaf32;
|
||||
/* Yellow background for active item */
|
||||
color: #002300;
|
||||
border-color:#fbfbfbfb;
|
||||
border: 1px solid #d3d3d3fb;
|
||||
}
|
||||
.pagination .page-item.disabled .page-link {
|
||||
opacity: 0.5;
|
||||
|
||||
pointer-events: none;
|
||||
border-radius: 50%;
|
||||
border-color: #d3d3d3;
|
||||
/* Border color for active item */
|
||||
}
|
||||
|
||||
.pagination .page-item.pgbtn .page-link {
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
|
@ -418,7 +418,7 @@ export default function Payroll() {
|
|||
<div
|
||||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
|
||||
style={{ width: modalType === 'payment' ? '800px' : '700px', borderRadius: '40px' }}
|
||||
>
|
||||
<div
|
||||
className="modal-header"
|
||||
|
|
@ -678,7 +678,7 @@ export default function Payroll() {
|
|||
backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
|
||||
color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
|
||||
border: 'none',
|
||||
padding: '5px 5px',
|
||||
padding: '5px 0px',
|
||||
borderRadius: '20px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -267,38 +267,50 @@ const PayrollTableWithButton = ({
|
|||
<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",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF",
|
||||
border: "1px solid #DBDBDB",
|
||||
borderRadius: "10px",
|
||||
color: "#F4FFEE",
|
||||
cursor: "pointer",
|
||||
width: "200px",
|
||||
|
||||
}}
|
||||
>
|
||||
<h6 className="" style={{ margin: '10px' }}>Show</h6>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "400",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft:"10px"
|
||||
}}
|
||||
>
|
||||
Show Rows:
|
||||
</span>
|
||||
<select
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
height: "30px",
|
||||
|
||||
padding: "2px 6px",
|
||||
border: "1px solid #ccc",
|
||||
backgroundColor: "#282E26",
|
||||
color: "#fff",
|
||||
backgroundColor: "#282E26", // Match background color
|
||||
color: "#FFFFFF", // White text color
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
fontSize: "14px",
|
||||
lineHeight: "16px",
|
||||
padding: "4px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to first page on change
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
|
|
@ -307,6 +319,7 @@ const PayrollTableWithButton = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -623,17 +623,37 @@ 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}>
|
||||
{" "}
|
||||
+ Add Invoice
|
||||
<div className="d-flex align-items-center mb-3" style={{
|
||||
justifyContent: "space-between",
|
||||
gap: "10px",
|
||||
marginBottom: "10px",
|
||||
}}>
|
||||
<h3 className="mb-1" style={{ margin: "0" }}>Purchase</h3>
|
||||
<div className="d-flex align-items-center" style={{ gap: "10px" }}>
|
||||
|
||||
|
||||
|
||||
<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={invoiceIcon}
|
||||
src={department}
|
||||
alt="Invoice Icon"
|
||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button style={{
|
||||
backgroundColor: "#4A5546",
|
||||
boxShadow: "none",
|
||||
|
|
@ -648,116 +668,36 @@ export default function Purchase() {
|
|||
cursor: "pointer",
|
||||
}}>
|
||||
|
||||
+ Add New Vendor
|
||||
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",
|
||||
|
||||
<button className="btn cus d-flex align-items-center"
|
||||
style={{
|
||||
|
||||
|
||||
width: "180px",
|
||||
height: "42px",
|
||||
padding: "8px 12px",
|
||||
fontSize: "16px",
|
||||
border: "none",
|
||||
borderRadius: "10px",
|
||||
color: "#F4FFEE",
|
||||
cursor: "pointer",
|
||||
|
||||
justifyContent:"center",
|
||||
textAlign:'center',
|
||||
|
||||
}}
|
||||
>
|
||||
+ Add Department
|
||||
onClick={toggleModal}>
|
||||
{" "}
|
||||
Add Invoice
|
||||
<img
|
||||
src={department}
|
||||
src={invoiceIcon}
|
||||
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 */}
|
||||
|
|
@ -787,10 +727,10 @@ export default function Purchase() {
|
|||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "700px",
|
||||
width: "800px",
|
||||
backgroundColor: "white",
|
||||
margin: "100px auto",
|
||||
padding: "20px",
|
||||
// padding: "10px",
|
||||
borderRadius: "8px",
|
||||
position: "relative",
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
||||
|
|
@ -867,7 +807,7 @@ export default function Purchase() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="d-flex col-md-12">
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<div className="col-md-5" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
|
|
@ -946,7 +886,7 @@ export default function Purchase() {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
<div className="d-flex col-md-12 mt-2">
|
||||
<div className="d-flex col-md-12 mt-2 gap-4">
|
||||
<div
|
||||
className="form-row d-flex col-md-5 p-2 mt-2 "
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue