" new changes in dashboard "
parent
d63ed80855
commit
eedab5788c
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 1.0 MiB |
|
|
@ -29,14 +29,13 @@
|
|||
<!-- <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;
|
||||
background-image: url('../src/assets/Image/Pattern.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-position: center;
|
||||
background-blend-mode: overlay;
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-family: "Comfortaa";
|
||||
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
|
|
@ -93,25 +93,34 @@ body {
|
|||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
width: 400px;
|
||||
height: 90px;
|
||||
|
||||
height: 81px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAF2;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
width: 1200px;
|
||||
height: 90px;
|
||||
background-color: #FFFFFF;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
height: 81px;
|
||||
|
||||
padding: 10px 20px;
|
||||
|
||||
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 */
|
||||
|
|
@ -123,7 +132,7 @@ body {
|
|||
.navbar .nav-item.active .nav-link {
|
||||
color: #ffffff; /* Active link color */
|
||||
background-color: #282e26;
|
||||
border-radius: 20px;
|
||||
border-radius: 40px;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold; /* Bold text for active link */
|
||||
}
|
||||
|
|
@ -502,7 +511,7 @@ body {
|
|||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 30%;
|
||||
left: 15px; /* Adjust as needed */
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none; /* Prevent clicks on the icon */
|
||||
|
|
@ -511,6 +520,7 @@ body {
|
|||
.search-container {
|
||||
position: relative;
|
||||
flex: 3;
|
||||
margin-left: 0px;
|
||||
max-width: 300px;
|
||||
}
|
||||
.search-container input {
|
||||
|
|
@ -725,6 +735,7 @@ body {
|
|||
margin: auto;
|
||||
background-color: white;
|
||||
width: 90%;
|
||||
|
||||
/* Changed from 1600px to a percentage */
|
||||
max-width: 1600px;
|
||||
/* Maximum width for larger screens */
|
||||
|
|
@ -758,6 +769,7 @@ h3 {
|
|||
|
||||
.expense-searchcontainerstart {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
.custbtn {
|
||||
box-shadow: none;
|
||||
|
|
@ -815,13 +827,15 @@ h3 {
|
|||
.table-responsive th {
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.table-responsives {
|
||||
border: 0.5px solid #f4f4f4;
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.table-responsive {
|
||||
|
||||
border-left: 1px solid #ebeaf2;
|
||||
border-right: 1px solid #ebeaf2;
|
||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||
}
|
||||
.expensetableheader th:first-child {
|
||||
|
|
|
|||
|
|
@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
|
|||
return (
|
||||
<div>
|
||||
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
gap: "50px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
margin: "10px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -324,14 +324,23 @@ const ATMDepositTable = (props) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -347,14 +356,23 @@ const ATMDepositTable = (props) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -370,14 +388,23 @@ const ATMDepositTable = (props) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -388,7 +415,7 @@ const ATMDepositTable = (props) => {
|
|||
<div className="searchcontainer">
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -483,9 +510,16 @@ const ATMDepositTable = (props) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
|
||||
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -503,6 +537,7 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -548,7 +583,7 @@ const ATMDepositTable = (props) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Filter
|
||||
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -659,7 +694,12 @@ const ATMDepositTable = (props) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
textAlign: "center",
|
||||
}}>
|
||||
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
|
||||
(header, index) => (
|
||||
<th
|
||||
|
|
|
|||
|
|
@ -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_method_status: "pay_now",
|
||||
prepaid_tax: false,
|
||||
prepaid_tax_percentage: "",
|
||||
amount: "",
|
||||
remaining_amount: "",
|
||||
pay_method: "",
|
||||
pay_method: "cash",
|
||||
due_date: null,
|
||||
note: "",
|
||||
bank: "",
|
||||
|
|
@ -280,7 +280,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 1,
|
||||
column: "col-md-2",
|
||||
column: "col-md-3",
|
||||
label: "Invoice Number",
|
||||
type: "invoice_no",
|
||||
name: "invoice_no",
|
||||
|
|
@ -288,7 +288,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-3",
|
||||
column: "col-md-2",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
|
|
@ -302,20 +302,20 @@ function AddInvoice() {
|
|||
// label: "Payment Method:",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "pay_later", label: "Pay Later" },
|
||||
{ value: "pay_now", label: "Pay Now" },
|
||||
{ value: "pay_later", label: "Pay Later" },
|
||||
{ value: "credit_invoice", label: "Credit Invoice" },
|
||||
],
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-6",
|
||||
column: "col-md-5",
|
||||
label: "Payment Method Options",
|
||||
type: "payment-method-options",
|
||||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-6",
|
||||
column: "col-md-5",
|
||||
label: "Payment Method Options",
|
||||
type: "pay-bank-options",
|
||||
},
|
||||
|
|
@ -353,8 +353,9 @@ function AddInvoice() {
|
|||
|
||||
const paymentMethodOptions = [
|
||||
{ value: "cash", label: "Cash" },
|
||||
{ value: "cheque", label: "Cheque" },
|
||||
{ value: "bank", label: "Bank Card (ACH/EFT)" },
|
||||
{ value: "cheque", label: "Cheque" },
|
||||
|
||||
];
|
||||
|
||||
const groupedFields = fields.reduce((acc, field) => {
|
||||
|
|
@ -450,7 +451,7 @@ function AddInvoice() {
|
|||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<div className="input-groups">
|
||||
|
|
@ -459,7 +460,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}
|
||||
|
|
@ -582,21 +583,35 @@ function AddInvoice() {
|
|||
)
|
||||
);
|
||||
|
||||
case "radio":
|
||||
return (
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
||||
<label className="me-4">{field.label}</label>
|
||||
case "radio":
|
||||
return (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 0px', // Add padding to give space on both sides
|
||||
width: "fit-content",
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
<label className="">{field.label}</label>
|
||||
<div className="d-flex">
|
||||
{field.options.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check me-4"
|
||||
className="form-check"
|
||||
style={{
|
||||
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
|
||||
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 25px',
|
||||
borderRadius: '20px',
|
||||
margin: '0 10px', // Apply margin to both sides
|
||||
}}
|
||||
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
|
||||
onClick={() =>
|
||||
handlePaymentMethodChange({
|
||||
target: { name: field.name, value: option.value },
|
||||
})
|
||||
}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
|
|
@ -610,41 +625,50 @@ function AddInvoice() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
case "payment-method-options":
|
||||
return (
|
||||
formData.pay_method_status === "pay_now" && (
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
|
||||
{paymentMethodOptions.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check me-4"
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
style={{
|
||||
fontWeight: 'normal',
|
||||
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
);
|
||||
|
||||
|
||||
|
||||
case "payment-method-options":
|
||||
return (
|
||||
formData.pay_method_status === "pay_now" && (
|
||||
<div className="d-flex align-items-center" style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 10px', // Add padding to give space on both sides
|
||||
width: "fit-content",
|
||||
borderRadius: '40px',
|
||||
marginBottom:"20px"
|
||||
}}>
|
||||
{paymentMethodOptions.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="form-check "
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 25px',
|
||||
borderRadius: '20px',
|
||||
}}
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
style={{
|
||||
fontWeight: 'normal',
|
||||
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<div className="form-check">
|
||||
|
|
@ -659,46 +683,46 @@ function AddInvoice() {
|
|||
</div>
|
||||
);
|
||||
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
<select
|
||||
required
|
||||
className="form-control-borderless"
|
||||
name="bank"
|
||||
value={formData.bank}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select Bank</option>
|
||||
{banks.map((bank) => (
|
||||
<option key={bank.id} value={bank.id}>
|
||||
{bank.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
<select
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="bank"
|
||||
value={formData.bank}
|
||||
name="cheque_no"
|
||||
placeholder="Cheque Number"
|
||||
value={formData.cheque_no}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select Bank</option>
|
||||
{banks.map((bank) => (
|
||||
<option key={bank.id} value={bank.id}>
|
||||
{bank.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
maxLength={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="cheque_no"
|
||||
placeholder="Cheque Number"
|
||||
value={formData.cheque_no}
|
||||
onChange={handleChange}
|
||||
maxLength={20}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
)}
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
|
|
@ -729,15 +753,15 @@ function AddInvoice() {
|
|||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Invoice
|
||||
Add Bill/Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Invoice
|
||||
Pay Bill/Invoice
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
|
|
@ -758,15 +782,24 @@ function AddInvoice() {
|
|||
className="container"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
border: "1px solid #EBEAF2",
|
||||
boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
|
||||
borderRadius: "40px",
|
||||
// height: "479px";
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
||||
{/* Render Fields */}
|
||||
{Object.keys(groupedFields).map((rowKey) => (
|
||||
<div className="row mb-3" key={rowKey}>
|
||||
<div className="row mb-3"
|
||||
style={{
|
||||
gap: "10%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
|
||||
key={rowKey}>
|
||||
{groupedFields[rowKey].map((field, index) => (
|
||||
<div key={index} className={field.column}>
|
||||
{renderField(field)}
|
||||
|
|
@ -780,10 +813,10 @@ function AddInvoice() {
|
|||
|
||||
{/* Prepaid Tax Field */}
|
||||
{formData.prepaid_tax && (
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-6">
|
||||
<div className="row ">
|
||||
<div className="col-md-3">
|
||||
<div className="form-group">
|
||||
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -799,6 +832,7 @@ function AddInvoice() {
|
|||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
|
||||
.slice(0, 12); // Limit input length
|
||||
}}
|
||||
style={{marginLeft:"60px"}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
@ -809,16 +843,16 @@ function AddInvoice() {
|
|||
)}
|
||||
<div className="">
|
||||
{/* Action Buttons */}
|
||||
<div className="d-flex justify-content-end">
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -153,13 +153,13 @@ function AtmDeposit() {
|
|||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Invoice
|
||||
Add Bill/Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Invoice
|
||||
Pay Bill/Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
|
|
@ -189,8 +189,13 @@ function AtmDeposit() {
|
|||
<form onSubmit={handleSubmit}>
|
||||
|
||||
|
||||
<div className=" col-md-12 row mb-3">
|
||||
<div className="col-md-4 mb-3">
|
||||
<div className=" col-md-12 row mb-3"
|
||||
style={{
|
||||
gap: "6%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}>
|
||||
<div className="col-md-3 mb-2">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -208,7 +213,7 @@ function AtmDeposit() {
|
|||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select a type</option>
|
||||
<option value="">Select Cash type</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
|
|
@ -275,16 +280,16 @@ function AtmDeposit() {
|
|||
<div className="">
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -293,10 +298,11 @@ function AtmDeposit() {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="container mt-5"
|
||||
className="invoice-table-container mt-5"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
|
||||
}}
|
||||
>
|
||||
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
||||
|
|
|
|||
|
|
@ -156,42 +156,44 @@ function BankDeposit() {
|
|||
<div className="dashboard-container">
|
||||
<ToastContainer />
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div className="button-groups">
|
||||
<button
|
||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
>
|
||||
ATM Deposit
|
||||
</button>
|
||||
<div className="button-groups">
|
||||
<button
|
||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Bill/Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Bill/Invoice
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/bankDeposit')}
|
||||
>
|
||||
Bank Deposit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
>
|
||||
ATM Deposit
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/bankDeposit')}
|
||||
>
|
||||
Bank Deposit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="formcontainer">
|
||||
<div
|
||||
className="container"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
borderRadius: "40px",
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
|
@ -199,8 +201,12 @@ function BankDeposit() {
|
|||
|
||||
|
||||
|
||||
<div className="col-md-12 row ">
|
||||
<div className=" col-md-4">
|
||||
<div className="col-md-12 row " style={{
|
||||
gap: "4%",
|
||||
paddingLeft: "2%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}>
|
||||
<div className=" col-md-3">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -210,6 +216,29 @@ function BankDeposit() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<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 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"
|
||||
|
|
@ -226,24 +255,6 @@ 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
|
||||
|
|
@ -330,16 +341,16 @@ function BankDeposit() {
|
|||
</div>
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -309,92 +309,121 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "50px",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
alignItems: "center",
|
||||
margin: "10px",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer">
|
||||
<div className="searchcontainer" >
|
||||
<div
|
||||
className="input-group"
|
||||
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -489,9 +518,10 @@ const BankDepositTable = (props) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
|
||||
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -509,6 +539,7 @@ const BankDepositTable = (props) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -554,7 +585,7 @@ const BankDepositTable = (props) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Filter
|
||||
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -666,7 +697,11 @@ const BankDepositTable = (props) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
}}>
|
||||
{["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
|
||||
(header, index) => (
|
||||
<th
|
||||
|
|
@ -677,7 +712,7 @@ const BankDepositTable = (props) => {
|
|||
cursor: "pointer",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff',
|
||||
textAlign: "start",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -9,6 +10,20 @@
|
|||
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 */
|
||||
}
|
||||
|
|
@ -18,21 +33,27 @@
|
|||
}
|
||||
.button-groups {
|
||||
display: flex;
|
||||
margin-left: 35%;
|
||||
justify-content: space-between; /* Space between buttons */
|
||||
align-items: center; /* Center align buttons vertically */
|
||||
margin: 0 auto; /* Center the entire button group */
|
||||
gap: 10px; /* Adjust the spacing between buttons */
|
||||
background-color: #ffffff;
|
||||
width: auto;
|
||||
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);
|
||||
border-radius: 44px;
|
||||
padding: 10px 20px; /* Equal padding on left and right sides */
|
||||
}
|
||||
|
||||
/* Active button styles */
|
||||
.btn.active {
|
||||
padding: 0 20px; /* Equal padding on left and right sides */
|
||||
}
|
||||
|
||||
/* Active button styles */
|
||||
.btn.active {
|
||||
background-color: #ffaf32; /* Yellow background */
|
||||
border-radius: 20px;
|
||||
border-radius: 27px;
|
||||
color: black; /* Black text */
|
||||
}
|
||||
|
||||
padding: 10px 20px; /* Ensure padding consistency for buttons */
|
||||
}
|
||||
|
||||
|
||||
.form-container {
|
||||
width: 1328px;
|
||||
|
|
@ -98,15 +119,19 @@
|
|||
|
||||
.table th {
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
margin-right: 50px;
|
||||
background-color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
|
|
@ -149,7 +174,13 @@
|
|||
}
|
||||
|
||||
.filterbutton {
|
||||
background-color: #f4f4f4;
|
||||
background: #FFFFFF;
|
||||
|
||||
border: 1px solid #DBDBDB;
|
||||
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
|
||||
gap:'20px'
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
|
|
|
|||
|
|
@ -284,86 +284,115 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
<div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "50px",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
alignItems: "center",
|
||||
margin: "10px",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$19,864
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "20px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
|
||||
|
|
@ -373,7 +402,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
<div
|
||||
className="input-group flexiblesearch"
|
||||
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -475,10 +504,8 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
height: "50px",
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -495,6 +522,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
aria-expanded="false"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
marginLeft:'6px',
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
|
|
@ -505,7 +533,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
}}
|
||||
>
|
||||
<FilterButton />
|
||||
Filter
|
||||
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -624,7 +652,14 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
<div className="">
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr
|
||||
style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
|
||||
}}
|
||||
>
|
||||
{[
|
||||
"date",
|
||||
"vendor Name",
|
||||
|
|
@ -641,7 +676,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
|
||||
textAlign: "start",
|
||||
textAlign: "center",
|
||||
alignContent: "center",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff'
|
||||
|
|
@ -676,18 +711,25 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status
|
||||
.replace(/_/g, " ")
|
||||
.split(" ")
|
||||
.map(
|
||||
(word) =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
style={{
|
||||
display: "flex", // Use flexbox for centering
|
||||
justifyContent: "center", // Center content horizontally
|
||||
alignItems: "center", // Center content vertically
|
||||
height: "100%", // Ensure the cell takes full height of the row
|
||||
}}
|
||||
>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status
|
||||
.replace(/_/g, " ")
|
||||
.split(" ")
|
||||
.map(
|
||||
(word) => word.charAt(0).toUpperCase() + word.slice(1)
|
||||
)
|
||||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div className="dropdown">
|
||||
<button
|
||||
|
|
@ -769,44 +811,75 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
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",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
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",
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
borderRadius: "5px",
|
||||
padding: "5px 20px",
|
||||
padding: "5px 10px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
display: "flex", // 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: "",
|
||||
pay_method: "cash",
|
||||
amount: "",
|
||||
remaining_amount: "", // Initialize as empty string or 0
|
||||
discount: 0,
|
||||
|
|
@ -301,20 +301,20 @@ function PayInvoice() {
|
|||
return (
|
||||
<div className="dashboard-container">
|
||||
<div className="d-flex justify-content-between mb-4">
|
||||
<div className="button-groups">
|
||||
<div className="button-groups">
|
||||
<button
|
||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/')}
|
||||
>
|
||||
Add Invoice
|
||||
Add Bill/Invoice
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/payInvoice')}
|
||||
>
|
||||
Pay Invoice
|
||||
Pay Bill/Invoice
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||
onClick={() => handleLinkClick('/atmDeposit')}
|
||||
|
|
@ -344,8 +344,15 @@ function PayInvoice() {
|
|||
|
||||
|
||||
</div>
|
||||
<div className="col-md-12 row" style={{ gap: "15%" }}>
|
||||
<div className="mb-3 col-md-2" >
|
||||
<div
|
||||
className="col-md-12 row"
|
||||
style={{
|
||||
gap: "10%",
|
||||
paddingLeft: "5%", // Add equal padding
|
||||
// paddingRight: "%",
|
||||
}}
|
||||
>
|
||||
<div className="mb-3 col-md-3">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -363,10 +370,10 @@ function PayInvoice() {
|
|||
onChange={(e) => {
|
||||
const selectedValue = e.target.value;
|
||||
if (selectedValue === "add-vendor") {
|
||||
handleShow(); // Modal ko open karne ke liye function
|
||||
handleShow(); // Function to open modal
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
vendor_department: "", // Field ko reset karne ke liye
|
||||
vendor_department: "", // Reset the field
|
||||
}));
|
||||
} else {
|
||||
handleChange(e); // Existing handler for normal options
|
||||
|
|
@ -395,25 +402,11 @@ 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:"70px"}} >
|
||||
<div className="col-md-3">
|
||||
|
||||
<div className="mb-3 col-md-12 row mt-3" style={{ gap: "30px", marginLeft: "4%" }} >
|
||||
<div className="col-md-3 " >
|
||||
<input
|
||||
name="amount"
|
||||
type="text"
|
||||
|
|
@ -424,7 +417,7 @@ function PayInvoice() {
|
|||
style={{ backgroundColor: "#fafafa" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-2">
|
||||
<div className="col-md-2" >
|
||||
<input
|
||||
|
||||
type="text"
|
||||
|
|
@ -483,8 +476,8 @@ function PayInvoice() {
|
|||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
|
|
@ -497,48 +490,50 @@ function PayInvoice() {
|
|||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="md-col-12 ">
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '2px 20px', // Same left and right padding
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value={method}
|
||||
checked={formData.pay_method === method}
|
||||
onChange={handleChange}
|
||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
||||
style={{ display: 'none' }} // Hide the actual radio button
|
||||
/>
|
||||
<label
|
||||
className="form-check-label cursor-pointer"
|
||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
||||
style={{
|
||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
>
|
||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mt-3" >
|
||||
|
||||
<div className="md-col-12 " style={{ marginLeft: "5%", marginTop: "30px" }}>
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 10px', // Add padding to give space on both sides
|
||||
width: "fit-content",
|
||||
borderRadius: '40px',
|
||||
|
||||
}}
|
||||
>
|
||||
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
|
||||
<div className="" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value={method}
|
||||
checked={formData.pay_method === method}
|
||||
onChange={handleChange}
|
||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
||||
style={{ display: 'none' }} // Hide the actual radio button
|
||||
/>
|
||||
<label
|
||||
className="form-check-label cursor-pointer"
|
||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
||||
style={{
|
||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
|
||||
}}
|
||||
>
|
||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mt-3" style={{ marginLeft: "55px" }} >
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="row "> {/* Use row class for Bootstrap grid */}
|
||||
|
|
@ -573,16 +568,7 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{formData.pay_method === "bank" && (
|
||||
{formData.pay_method === "Bank Card/ACH/EFT" && (
|
||||
<div className="mb-3">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
|
|
@ -627,16 +613,16 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-end">
|
||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -312,13 +312,15 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
return (
|
||||
<div>
|
||||
<ToastContainer />
|
||||
<div
|
||||
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
gap: "50px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
margin: "10px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
|
|
@ -332,14 +334,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -355,14 +366,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "385px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: "48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$19,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -378,27 +398,35 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
width: "390px",
|
||||
height: "130px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
<p
|
||||
style={{
|
||||
fontFamily: "Comfortaa",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
fontSize: " 48px",
|
||||
lineHeight: "27px",
|
||||
}}
|
||||
>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer" style={{ gap: "10px" }}>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -495,10 +523,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
<div
|
||||
className="filterbutton"
|
||||
style={{
|
||||
marginLeft: "10px",
|
||||
backgroundColor: "#f4f4f4",
|
||||
width: "130px",
|
||||
height: "50px",
|
||||
// marginLeft: "10px",
|
||||
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
borderRadius: "60px",
|
||||
padding: "15px",
|
||||
display: "flex",
|
||||
|
|
@ -516,6 +544,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
fontSize: "14px",
|
||||
display: "flex",
|
||||
marginLeft:'6px',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "0",
|
||||
|
|
@ -561,7 +590,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Filter
|
||||
|
||||
</button>
|
||||
|
||||
<ul
|
||||
|
|
@ -649,7 +678,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li className="text-center mt-2">
|
||||
<li className="text-center mt-2" >
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
style={{ width: "163px", height: "40px" }}
|
||||
|
|
@ -673,13 +702,24 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
{/* Table of Invoices */}
|
||||
<table className="table table-borderless table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr
|
||||
style={{
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
height: '30px', // Add height for row spacing
|
||||
textAlign: 'center', // Align text to the center horizontally
|
||||
|
||||
|
||||
}}
|
||||
|
||||
|
||||
>
|
||||
{[
|
||||
"date",
|
||||
"vendor_department_name",
|
||||
"amount",
|
||||
"remaining_amount",
|
||||
"updated date",
|
||||
// "updated date",
|
||||
"payment_method",
|
||||
"status",
|
||||
"actions",
|
||||
|
|
@ -692,8 +732,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
cursor: "pointer",
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
textAlign: "start",
|
||||
textAlign: "center",
|
||||
alignContent: "center",
|
||||
// Add a border for separation
|
||||
}}
|
||||
>
|
||||
{header
|
||||
|
|
@ -752,9 +793,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 &&
|
||||
|
|
@ -768,7 +809,14 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
.join(" ")}
|
||||
</span>
|
||||
</td>
|
||||
<td onClick={() => handleCellClick(invoice, "status")}>
|
||||
<td onClick={() => handleCellClick(invoice, "status")}
|
||||
style={{
|
||||
display: "flex", // Use flexbox for centering
|
||||
justifyContent: "center", // Center content horizontally
|
||||
alignItems: "center", // Center content vertically
|
||||
height: "100%", // Ensure the cell takes full height of the row
|
||||
}}
|
||||
>
|
||||
<span style={getStatusStyle(invoice.status)}>
|
||||
{invoice.status &&
|
||||
invoice.status
|
||||
|
|
@ -866,43 +914,74 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
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",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "5px",
|
||||
padding: "5px 10px",
|
||||
width: "130px", // Fixed width
|
||||
height: "30px", // Fixed height
|
||||
fontSize: "14px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
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",
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
width: "130px", // Ensure consistent fixed width
|
||||
height: "30px", // Ensure consistent fixed height
|
||||
borderRadius: "5px",
|
||||
padding: "5px 20px",
|
||||
padding: "5px 10px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
display: "flex", // Flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { toast, ToastContainer } from "react-toastify";
|
|||
import AuthContext from "../../../../utils/secure-route/AuthContext";
|
||||
import useApi from "../../../../utils/api-manager/Helper/useApi";
|
||||
import CustomSwitch from "./CustomSwitch";
|
||||
import BankIcon from '../../../../assets/Image/bank.png'
|
||||
|
||||
const ManageSettings = () => {
|
||||
let { user } = useContext(AuthContext);
|
||||
const storeId = user.store;
|
||||
|
|
@ -472,10 +474,16 @@ const ManageSettings = () => {
|
|||
<div className="header-row">
|
||||
<div className="setting-title">Manage Bank</div>
|
||||
<button
|
||||
className="bank-add-button"
|
||||
className="btn cus d-flex align-items-center justify-content-between"
|
||||
onClick={() => handleShow("bank")}
|
||||
>
|
||||
+ Add Bank
|
||||
Add Bank
|
||||
<img
|
||||
src={BankIcon}
|
||||
alt="Bank Icon"
|
||||
style={{ width: "20px", height: "20px" }}
|
||||
/>
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div className="second-container">
|
||||
|
|
|
|||
|
|
@ -103,15 +103,15 @@ const ManageUserTable = ({
|
|||
|
||||
const statusStyles = {
|
||||
enable: {
|
||||
backgroundColor: "#6CBE1C", // Green background for Enable
|
||||
backgroundColor: "#198F51", // Green background for Enable
|
||||
color: "#fff",
|
||||
borderRadius: "30px",
|
||||
borderRadius: "10px",
|
||||
padding: "5px 10px",
|
||||
},
|
||||
disable: {
|
||||
backgroundColor: "#6c757d", // Red background for Disable
|
||||
color: "#000",
|
||||
borderRadius: "30px",
|
||||
backgroundColor: "#FF2024", // Red background for Disable
|
||||
color: "#fff",
|
||||
borderRadius: "10px",
|
||||
padding: "5px 10px",
|
||||
},
|
||||
|
||||
|
|
@ -168,18 +168,18 @@ const ManageUserTable = ({
|
|||
borderRadius: "4px",
|
||||
zIndex: "1",
|
||||
};
|
||||
// Calculate the total net sales from the data
|
||||
// const totalNetSales = data.reduce((acc, item) => {
|
||||
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
|
||||
// return acc + amount;
|
||||
// }, 0).toFixed(2); //
|
||||
// Calculate the total net sales from the data
|
||||
// const totalNetSales = data.reduce((acc, item) => {
|
||||
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
|
||||
// return acc + amount;
|
||||
// }, 0).toFixed(2); //
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<div className="d-flex mb-3">
|
||||
<div className="expense-searchcontainerstart d-flex">
|
||||
<div className="search-container">
|
||||
<input
|
||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
style={{ height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
|
|
@ -252,7 +252,7 @@ const ManageUserTable = ({
|
|||
Export To Excel
|
||||
</button>
|
||||
)}
|
||||
{showFilter && (
|
||||
{showFilter && (
|
||||
<div className="filter-button-container" style={{ position: "relative" }}>
|
||||
<button className="btn custbtn2" type="button" onClick={handleFilterClick}>
|
||||
<svg
|
||||
|
|
@ -277,64 +277,70 @@ const ManageUserTable = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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: "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 the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ marginRight: "68%" }}>
|
||||
|
||||
<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: "180px",
|
||||
height: "40px"
|
||||
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "800",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft: "18px",
|
||||
|
||||
}}
|
||||
>
|
||||
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: "4px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
height: "40px",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -382,81 +388,81 @@ const ManageUserTable = ({
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-body">
|
||||
{sortedDisplayedData.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope', fontWeight: '600', fontSize: '40px', background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
|
||||
No data found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
sortedDisplayedData.map((item) => (
|
||||
<tr key={item.id || item.index}>
|
||||
<td>
|
||||
{(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
|
||||
</td>
|
||||
{columns.map((col, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
{sortedDisplayedData.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope', fontWeight: '600', fontSize: '40px', background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
|
||||
No data found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
sortedDisplayedData.map((item) => (
|
||||
<tr key={item.id || item.index}>
|
||||
<td>
|
||||
{(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
|
||||
</td>
|
||||
{columns.map((col, colIndex) => (
|
||||
<td key={colIndex}>
|
||||
|
||||
{col.field === "is_active" ? (
|
||||
<div
|
||||
style={{
|
||||
...item.is_active === false ? statusStyles.disable : statusStyles.enable,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%', // Make sure the height of the div is sufficient
|
||||
}}
|
||||
>
|
||||
{item.is_active === false ? "Disable" : "Enable"}
|
||||
</div>
|
||||
) : col.field === "joining_date" ? (
|
||||
// Format the 'joining_date' in 'mm-dd-yyyy' format
|
||||
new Date(item.joining_date).toLocaleDateString("en-US")
|
||||
) : item[col.field] !== undefined && item[col.field] !== null ? (
|
||||
typeof item[col.field] === "function" ? item[col.field]() : item[col.field]
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
{showAction && (
|
||||
<td className="action-column">
|
||||
<button className="action-button" onClick={() => onEdit(item)}>
|
||||
{/* Edit icon */}
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
|
||||
fill="#002300"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="action-button" onClick={() => onDelete(item.id)}>
|
||||
{/* Delete icon */}
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
|
||||
fill="#002300"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
{col.field === "is_active" ? (
|
||||
<div
|
||||
style={{
|
||||
...item.is_active === false ? statusStyles.disable : statusStyles.enable,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%', // Make sure the height of the div is sufficient
|
||||
}}
|
||||
>
|
||||
{item.is_active === false ? "Disabled" : "Enabled"}
|
||||
</div>
|
||||
) : col.field === "joining_date" ? (
|
||||
// Format the 'joining_date' in 'mm-dd-yyyy' format
|
||||
new Date(item.joining_date).toLocaleDateString("en-US")
|
||||
) : item[col.field] !== undefined && item[col.field] !== null ? (
|
||||
typeof item[col.field] === "function" ? item[col.field]() : item[col.field]
|
||||
) : (
|
||||
"-"
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
{showAction && (
|
||||
<td className="action-column">
|
||||
<button className="action-button" onClick={() => onEdit(item)}>
|
||||
{/* Edit icon */}
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
|
||||
fill="#002300"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="action-button" onClick={() => onDelete(item.id)}>
|
||||
{/* Delete icon */}
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
|
||||
fill="#002300"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
{showFooter && (
|
||||
|
|
|
|||
|
|
@ -394,8 +394,8 @@ 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
|
||||
style={{
|
||||
backgroundColor: "#4A5546",
|
||||
|
|
@ -435,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"
|
||||
|
|
@ -446,7 +446,7 @@ function ManageUsers() {
|
|||
className="btn cus d-flex align-items-center"
|
||||
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
||||
>
|
||||
Add New User
|
||||
Add New User
|
||||
<img
|
||||
src={userIcon}
|
||||
alt="user Icon"
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
import React, { useState, useEffect, useContext } from "react";
|
||||
import ReusableModal from "./ReusableModal";
|
||||
import "./Settings.css";
|
||||
import vendorIcon from '../../../../assets/Image/vendor Icon.png'
|
||||
|
||||
|
||||
import AuthContext from "../../../../utils/secure-route/AuthContext";
|
||||
import useApi from "../../../../utils/api-manager/Helper/useApi";
|
||||
import { toast , ToastContainer} from "react-toastify";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import SettingTable from "./SettingTable";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
|
|
@ -21,8 +23,8 @@ function ManageVendor() {
|
|||
const [serviceData, setServiceData] = useState([]);
|
||||
const [editVendorId, setEditVendorId] = useState(null);
|
||||
|
||||
|
||||
const { Get, Post, Put, Delete , Patch } = useApi();
|
||||
|
||||
const { Get, Post, Put, Delete, Patch } = useApi();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
|
|
@ -63,17 +65,17 @@ function ManageVendor() {
|
|||
try {
|
||||
// Fetch the current list of vendors
|
||||
const existingVendors = await Get("vendorDepartmentData");
|
||||
|
||||
|
||||
// Check if a vendor with the same name already exists
|
||||
const isDuplicate = existingVendors.some(
|
||||
(vendor) => vendor.name.toLowerCase() === vendorName.toLowerCase() && vendor.id !== editVendorId
|
||||
);
|
||||
|
||||
|
||||
if (isDuplicate) {
|
||||
toast.error("Vendor with the same name already exists!");
|
||||
return; // Exit the function early
|
||||
}
|
||||
|
||||
|
||||
const payload = {
|
||||
name: vendorName,
|
||||
type: vendorType,
|
||||
|
|
@ -82,7 +84,7 @@ function ManageVendor() {
|
|||
store: storeId,
|
||||
is_deleted: false,
|
||||
};
|
||||
|
||||
|
||||
if (editVendorId) {
|
||||
const updatedVendor = await Put("vendorDepartmentData", editVendorId, payload);
|
||||
// Assuming `updatedVendor` contains the updated vendor data
|
||||
|
|
@ -95,14 +97,14 @@ function ManageVendor() {
|
|||
setVendors((prev) => [...prev, response.data]);
|
||||
toast.success("Vendor added successfully!");
|
||||
}
|
||||
|
||||
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error("Error saving vendor:", error);
|
||||
toast.error("Error saving vendor!");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const filteredVendors = vendors.filter(vendor => !vendor.is_deleted);
|
||||
|
||||
// const handleDelete = async (id) => {
|
||||
|
|
@ -129,10 +131,10 @@ function ManageVendor() {
|
|||
// };
|
||||
|
||||
|
||||
// is deleted is true with condition (backend side false )//
|
||||
// is deleted is true with condition (backend side false )//
|
||||
const handleDelete = async (id) => {
|
||||
console.log("Vendor ID to delete:", id);
|
||||
|
||||
console.log("Vendor ID to delete:", id);
|
||||
|
||||
const result = await Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
|
|
@ -142,12 +144,12 @@ function ManageVendor() {
|
|||
cancelButtonColor: "#3085d6",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
});
|
||||
|
||||
|
||||
// Check if the user clicked the confirm button
|
||||
if (!result.isConfirmed) {
|
||||
return;
|
||||
if (!result.isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const payload = { is_deleted: true };
|
||||
const response = await Patch("vendorDepartmentData", id, payload);
|
||||
|
|
@ -159,8 +161,8 @@ function ManageVendor() {
|
|||
toast.error("Error deleting vendor!");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleDepartmentChange = (event) => {
|
||||
const value = event.target.value;
|
||||
|
|
@ -184,16 +186,31 @@ function ManageVendor() {
|
|||
return (
|
||||
<>
|
||||
<div className="due-days">
|
||||
<ToastContainer/>
|
||||
<ToastContainer />
|
||||
|
||||
|
||||
<div className="header-row">
|
||||
<div className="setting-title">Manage Vendor</div>
|
||||
<div className="btn-position">
|
||||
<button className="btn cus d-flex align-items-center" style={{marginBottom:"10px"}} onClick={handleShow}>
|
||||
Add Vendor
|
||||
<button
|
||||
className="btn cus d-flex align-items-center justify-content-between"
|
||||
style={{
|
||||
marginBottom: "10px",
|
||||
width: "170px",
|
||||
padding: "8px",
|
||||
textAlign: "left"
|
||||
}}
|
||||
onClick={handleShow}
|
||||
>
|
||||
<span>Add Vendor</span>
|
||||
<img
|
||||
src={vendorIcon}
|
||||
alt="Vendor Icon"
|
||||
style={{ width: "20px", height: "20px" }}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<SettingTable
|
||||
showFooter={true}
|
||||
|
|
@ -232,11 +249,12 @@ function ManageVendor() {
|
|||
placeholder="Vendor Name"
|
||||
value={vendorName}
|
||||
onChange={(e) => setVendorName(e.target.value)}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
|
||||
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"
|
||||
|
|
@ -247,11 +265,12 @@ function ManageVendor() {
|
|||
setVendorDepartments([]); // Reset departments when type changes
|
||||
setOpeningBalance("");
|
||||
}}
|
||||
style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
|
||||
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>
|
||||
|
|
@ -280,40 +299,40 @@ function ManageVendor() {
|
|||
})}
|
||||
</div>
|
||||
<select
|
||||
id="vendorDepartment"
|
||||
className="input-field "
|
||||
onChange={handleDepartmentChange}
|
||||
style={{
|
||||
width: "400px",
|
||||
marginRight: "10px",
|
||||
height: "44px",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
marginLeft:"45px"
|
||||
|
||||
}}
|
||||
>
|
||||
<option value="">
|
||||
{vendorType === "purchase"
|
||||
? "Select Vendor Department"
|
||||
: "Select Expense Type"}
|
||||
</option>
|
||||
{(vendorType === "purchase"
|
||||
? departmentOptions
|
||||
: expenseTypeOptions
|
||||
).length === 0 ? (
|
||||
<option value="" disabled>No Vendor / Department found</option> // This is the new option
|
||||
) : (
|
||||
(vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map(
|
||||
(service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.title}
|
||||
</option>
|
||||
)
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
id="vendorDepartment"
|
||||
className="input-field "
|
||||
onChange={handleDepartmentChange}
|
||||
style={{
|
||||
width: "400px",
|
||||
marginRight: "10px",
|
||||
height: "44px",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
marginLeft: "45px"
|
||||
|
||||
}}
|
||||
>
|
||||
<option value="">
|
||||
{vendorType === "purchase"
|
||||
? "Select Vendor Department"
|
||||
: "Select Expense Type"}
|
||||
</option>
|
||||
{(vendorType === "purchase"
|
||||
? departmentOptions
|
||||
: expenseTypeOptions
|
||||
).length === 0 ? (
|
||||
<option value="" disabled>No Vendor / Department found</option> // This is the new option
|
||||
) : (
|
||||
(vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map(
|
||||
(service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.title}
|
||||
</option>
|
||||
)
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
|
||||
{vendorType === "purchase" && (
|
||||
<input
|
||||
|
|
@ -348,7 +367,7 @@ function ManageVendor() {
|
|||
cursor: "pointer",
|
||||
width: "181px",
|
||||
height: "45px",
|
||||
|
||||
|
||||
fontSize: "18px",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -70,8 +70,8 @@ const ReusableModal = ({
|
|||
|
||||
|
||||
const titleStyle = {
|
||||
fontFamily: "'Manrope', sans-serif",
|
||||
fontWeight: "600",
|
||||
fontFamily: "'Comfortaa', sans-serif",
|
||||
fontWeight: "300",
|
||||
fontSize: "20px",
|
||||
color: "#002300",
|
||||
margin: 0,
|
||||
|
|
|
|||
|
|
@ -200,7 +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)" }}
|
||||
style={{ height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
/>
|
||||
<svg
|
||||
className="search-container-icon"
|
||||
|
|
@ -294,65 +294,67 @@ const SettingTable = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<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 the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ marginRight: "68%" }}>
|
||||
|
||||
</div>
|
||||
<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: "180px",
|
||||
height: "40px"
|
||||
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: "'Comfortaa'",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "800",
|
||||
fontSize: "14px", // Compact text
|
||||
color: "#000000",
|
||||
marginLeft: "18px",
|
||||
|
||||
}}
|
||||
>
|
||||
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: "4px 10px", // Adjust padding for the dropdown
|
||||
border: "none", // No border
|
||||
borderRadius: "0 10px 10px 0", // Rounded on the right side only
|
||||
cursor: "pointer",
|
||||
height: "40px",
|
||||
marginLeft: "auto", // Push to the right
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
setCurrentPage(1); // Reset to the first page on change
|
||||
}}
|
||||
>
|
||||
<option value={5}>5</option>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table className="data-table custom-table" style={{borderRadius:"none"}} >
|
||||
|
|
|
|||
|
|
@ -441,8 +441,8 @@ border-radius: 14px;
|
|||
/* 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: 1px solid #DBDBDB;
|
||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -667,6 +667,7 @@ input[type="date"] {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 45px;
|
||||
/* Space between chips and dropdown */
|
||||
max-width: 483px;
|
||||
/* Match the dropdown width */
|
||||
|
|
|
|||
|
|
@ -163,7 +163,9 @@ function StoreInformation() {
|
|||
style={{
|
||||
color: "#002300",
|
||||
fontSize: "18px",
|
||||
fontFamily: "Manrope",
|
||||
fontFamily: " 'Comfortaa', sans-serif",
|
||||
border:"1px solid #E9E9E9",
|
||||
backgroundColor:"#FAFAFA"
|
||||
}}
|
||||
value={user ? user.selected_store_name : ""}
|
||||
placeholder="Store Name"
|
||||
|
|
@ -176,7 +178,9 @@ function StoreInformation() {
|
|||
style={{
|
||||
color: "#002300",
|
||||
fontSize: "18px",
|
||||
fontFamily: "Manrope",
|
||||
fontFamily: " 'Comfortaa', sans-serif",
|
||||
border:"1px solid #E9E9E9",
|
||||
backgroundColor:"#FAFAFA"
|
||||
}}
|
||||
value={user ? user.email : ""}
|
||||
placeholder="Email"
|
||||
|
|
@ -268,14 +272,14 @@ function StoreInformation() {
|
|||
key={index}
|
||||
className={`card-store ${plan.title.toLowerCase()} ${currentPlan === plan.title ? "selected" : ""}`}
|
||||
style={{
|
||||
border: currentPlan === plan.title ? '2px solid #6666ff' : '1px solid #e5e5e5',
|
||||
borderRadius: '10px',
|
||||
border: currentPlan === plan.title ? '2px solid #4A5546' : '1px solid #e5e5e5',
|
||||
borderRadius: '40px',
|
||||
padding: '20px',
|
||||
textAlign: 'start',
|
||||
flex: '1 1 calc(30% - 20px)',
|
||||
maxWidth: '25%',
|
||||
minWidth: '300px',
|
||||
backgroundColor: '#f4f6ff',
|
||||
backgroundColor: '#ffffff',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
|
@ -285,9 +289,9 @@ function StoreInformation() {
|
|||
}}
|
||||
onClick={() => handlePlanChange(plan.title)}
|
||||
>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p>
|
||||
<p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333', position: 'relative' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
|
||||
<p style={{ fontSize: '20px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p>
|
||||
<p style={{ fontSize: '18px', fontWeight: 'bold', color: '#333', position: 'relative', marginRight:"10px" }}>
|
||||
<span style={{
|
||||
position: 'absolute',
|
||||
top: -8,
|
||||
|
|
@ -298,14 +302,15 @@ function StoreInformation() {
|
|||
{parseFloat(plan.amount).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="features" style={{ overflowY: 'auto', padding: '10px 0', flex: '1' }}>
|
||||
<p style={{ fontWeight: 'bold', fontSize: '16px' }}>Features</p>
|
||||
<div className="features" style={{ overflowY: 'auto', padding: '0px 0', flex: '1', }}>
|
||||
<p style={{ fontWeight: 'bold', fontSize: '16px', marginBottom:"15px" }}>Features</p>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '10px',
|
||||
paddingLeft: '20px',
|
||||
color: '#555',
|
||||
|
||||
}}>
|
||||
{plan.inc_features_titles.map((features, index) => (
|
||||
<div key={index} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ const Header = () => {
|
|||
closeDropdowns();
|
||||
}}
|
||||
>
|
||||
Owner Dashboard
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue