Sonali
/
Paisa_vara
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

" new changes in dashboard "

pull/5/head
sonali 2024-12-26 18:46:47 +05:30
parent d63ed80855
commit eedab5788c
23 changed files with 1165 additions and 816 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/Image/Background.png → public/Background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

13
public/index.html
View File

@ -29,14 +29,13 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style> <style>
body { body {
background-image: url('Background.png');
background-color: #f9fff6; background-color: #f9fff6;
background-image: url('../src/assets/Image/Pattern.png'); font-family: "Comfortaa";
background-size: cover;
background-repeat: no-repeat; background-position: top;
background-repeat: no-repeat;
background-position: center; background-size: 100% auto;
background-blend-mode: overlay;
font-family: 'Comfortaa', sans-serif;
} }

BIN
src/assets/Image/bank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 525 B

BIN
src/assets/Image/vendor Icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 B

40
src/assets/css/App.css
View File

@ -93,25 +93,34 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #FFFFFF;
width: 400px; 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; margin-top: 20px;
padding: 10px 20px; padding: 10px 20px;
border-radius: 20px;
} }
.navbar { .navbar {
margin-top: 20px; margin-top: 20px;
width: 1200px; width: 1200px;
height: 90px; height: 81px;
background-color: #FFFFFF;
padding: 10px 20px;
border-radius: 10px;
display: flex;
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; justify-content: space-between;
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
flex: 1; /* Takes the remaining space between navbar-left and the center header */ flex: 1; /* Takes the remaining space between navbar-left and the center header */
@ -123,7 +132,7 @@ body {
.navbar .nav-item.active .nav-link { .navbar .nav-item.active .nav-link {
color: #ffffff; /* Active link color */ color: #ffffff; /* Active link color */
background-color: #282e26; background-color: #282e26;
border-radius: 20px; border-radius: 40px;
padding: 10px 15px; padding: 10px 15px;
font-weight: bold; /* Bold text for active link */ font-weight: bold; /* Bold text for active link */
} }
@ -502,7 +511,7 @@ body {
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 50%; top: 30%;
left: 15px; /* Adjust as needed */ left: 15px; /* Adjust as needed */
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; /* Prevent clicks on the icon */ pointer-events: none; /* Prevent clicks on the icon */
@ -511,6 +520,7 @@ body {
.search-container { .search-container {
position: relative; position: relative;
flex: 3; flex: 3;
margin-left: 0px;
max-width: 300px; max-width: 300px;
} }
.search-container input { .search-container input {
@ -725,6 +735,7 @@ body {
margin: auto; margin: auto;
background-color: white; background-color: white;
width: 90%; width: 90%;
/* Changed from 1600px to a percentage */ /* Changed from 1600px to a percentage */
max-width: 1600px; max-width: 1600px;
/* Maximum width for larger screens */ /* Maximum width for larger screens */
@ -758,6 +769,7 @@ h3 {
.expense-searchcontainerstart { .expense-searchcontainerstart {
width: 90%; width: 90%;
} }
.custbtn { .custbtn {
box-shadow: none; box-shadow: none;
@ -815,13 +827,15 @@ h3 {
.table-responsive th { .table-responsive th {
background-color: #282e26; background-color: #282e26;
color: white; color: white;
} }
.table-responsives { .table-responsives {
border: 0.5px solid #f4f4f4; border: 0.5px solid #f4f4f4;
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */ border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
} }
.table-responsive { .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 */ border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
} }
.expensetableheader th:first-child { .expensetableheader th:first-child {

78
src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
View File

@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
return ( return (
<div> <div>
<div <div
style={{ style={{
display: "flex", display: "flex",
gap: "16px", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
margin: "20px", margin: "10px",
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -324,14 +324,23 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -347,14 +356,23 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
$19,864,63,521 style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -370,14 +388,23 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month Expense this month
</p> </p>
</div> </div>
@ -388,7 +415,7 @@ const ATMDepositTable = (props) => {
<div className="searchcontainer"> <div className="searchcontainer">
<div <div
className="input-group" className="input-group"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -483,9 +510,16 @@ const ATMDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", width: "40px",
backgroundColor: "#f4f4f4", height: "40px",
width: "130px", borderRadius: "60px",
padding: "15px",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -503,6 +537,7 @@ const ATMDepositTable = (props) => {
style={{ style={{
fontSize: "14px", fontSize: "14px",
display: "flex", display: "flex",
marginLeft:'6px',
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: "0", padding: "0",
@ -548,7 +583,7 @@ const ATMDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -659,7 +694,12 @@ const ATMDepositTable = (props) => {
{/* Table of Invoices */} {/* Table of Invoices */}
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <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( {["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
(header, index) => ( (header, index) => (
<th <th

228
src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
View File

@ -48,12 +48,12 @@ function AddInvoice() {
vendor_department: "", vendor_department: "",
vendor_department_name: "", vendor_department_name: "",
invoice_no: "", // This will now have a default value from the last invoice 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: false,
prepaid_tax_percentage: "", prepaid_tax_percentage: "",
amount: "", amount: "",
remaining_amount: "", remaining_amount: "",
pay_method: "", pay_method: "cash",
due_date: null, due_date: null,
note: "", note: "",
bank: "", bank: "",
@ -280,7 +280,7 @@ function AddInvoice() {
}, },
{ {
row: 1, row: 1,
column: "col-md-2", column: "col-md-3",
label: "Invoice Number", label: "Invoice Number",
type: "invoice_no", type: "invoice_no",
name: "invoice_no", name: "invoice_no",
@ -288,7 +288,7 @@ function AddInvoice() {
}, },
{ {
row: 2, row: 2,
column: "col-md-3", column: "col-md-2",
label: "Amount", label: "Amount",
name: "amount", name: "amount",
type: "prefix-input", type: "prefix-input",
@ -302,20 +302,20 @@ function AddInvoice() {
// label: "Payment Method:", // label: "Payment Method:",
type: "radio", type: "radio",
options: [ options: [
{ value: "pay_later", label: "Pay Later" },
{ value: "pay_now", label: "Pay Now" }, { value: "pay_now", label: "Pay Now" },
{ value: "pay_later", label: "Pay Later" },
{ value: "credit_invoice", label: "Credit Invoice" }, { value: "credit_invoice", label: "Credit Invoice" },
], ],
}, },
{ {
row: 4, row: 4,
column: "col-md-6", column: "col-md-5",
label: "Payment Method Options", label: "Payment Method Options",
type: "payment-method-options", type: "payment-method-options",
}, },
{ {
row: 4, row: 4,
column: "col-md-6", column: "col-md-5",
label: "Payment Method Options", label: "Payment Method Options",
type: "pay-bank-options", type: "pay-bank-options",
}, },
@ -353,8 +353,9 @@ function AddInvoice() {
const paymentMethodOptions = [ const paymentMethodOptions = [
{ value: "cash", label: "Cash" }, { value: "cash", label: "Cash" },
{ value: "cheque", label: "Cheque" },
{ value: "bank", label: "Bank Card (ACH/EFT)" }, { value: "bank", label: "Bank Card (ACH/EFT)" },
{ value: "cheque", label: "Cheque" },
]; ];
const groupedFields = fields.reduce((acc, field) => { const groupedFields = fields.reduce((acc, field) => {
@ -450,7 +451,7 @@ function AddInvoice() {
borderBottom: "1px solid #f4f4f4", borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px", paddingBottom: "16px",
height: "50px", height: "50px",
}} }}
> >
<div className="input-groups"> <div className="input-groups">
@ -459,7 +460,7 @@ function AddInvoice() {
</span> */} </span> */}
<input <input
type="text" // Set input type to 'text' to allow decimals type="text" // Set input type to 'text' to allow decimals
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}} style={{ borderBottom: "2px solid #e4e5e7", marginTop: '30px' }}
className="form-control-borderless" className="form-control-borderless"
name={field.name} name={field.name}
placeholder={field.placeholder} placeholder={field.placeholder}
@ -582,21 +583,35 @@ function AddInvoice() {
) )
); );
case "radio": case "radio":
return ( return (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}> <div
<label className="me-4">{field.label}</label> 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) => ( {field.options.map((option, index) => (
<div <div
key={index} key={index}
className="form-check me-4" className="form-check"
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent', backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
padding: '5px 15px', // Add padding for better appearance padding: '5px 25px',
borderRadius: '20px', // Optional: Round the corners of the label 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 <label
className="form-check-label" className="form-check-label"
@ -610,41 +625,50 @@ function AddInvoice() {
</div> </div>
))} ))}
</div> </div>
);
case "payment-method-options":
return (
formData.pay_method_status === "pay_now" && (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
{paymentMethodOptions.map((option, index) => (
<div
key={index}
className="form-check me-4"
style={{
cursor: 'pointer',
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
>
<label
className="form-check-label"
style={{
fontWeight: 'normal',
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
}}
>
{option.label}
</label>
</div> </div>
))} );
</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": case "checkbox":
return ( return (
<div className="form-check"> <div className="form-check">
@ -659,46 +683,46 @@ function AddInvoice() {
</div> </div>
); );
case "pay-bank-options": case "pay-bank-options":
return ( return (
(formData.pay_method === "cheque" || formData.pay_method === "bank") && ( (formData.pay_method === "cheque" || formData.pay_method === "bank") && (
<div className="row align-items-center"> <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="col-md-4">
<div className="form-group"> <div className="form-group">
<select <input
required required
type="text"
className="form-control-borderless" className="form-control-borderless"
name="bank" name="cheque_no"
value={formData.bank} placeholder="Cheque Number"
value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
> maxLength={20}
<option value="">Select Bank</option> />
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div> </div>
</div> </div>
)}
{formData.pay_method === "cheque" && (
<div className="col-md-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="col-md-6">
<div className="form-group"> <div className="form-group">
<input <input
@ -729,15 +753,15 @@ function AddInvoice() {
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
@ -758,15 +782,24 @@ function AddInvoice() {
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", border: "1px solid #EBEAF2",
borderRadius: "40px" boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
borderRadius: "40px",
// height: "479px";
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
{/* Render Fields */} {/* Render Fields */}
{Object.keys(groupedFields).map((rowKey) => ( {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) => ( {groupedFields[rowKey].map((field, index) => (
<div key={index} className={field.column}> <div key={index} className={field.column}>
{renderField(field)} {renderField(field)}
@ -780,10 +813,10 @@ function AddInvoice() {
{/* Prepaid Tax Field */} {/* Prepaid Tax Field */}
{formData.prepaid_tax && ( {formData.prepaid_tax && (
<div className="row mb-3"> <div className="row ">
<div className="col-md-6"> <div className="col-md-3">
<div className="form-group"> <div className="form-group">
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
@ -799,6 +832,7 @@ function AddInvoice() {
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
.slice(0, 12); // Limit input length .slice(0, 12); // Limit input length
}} }}
style={{marginLeft:"60px"}}
/> />
</div> </div>
@ -809,16 +843,16 @@ function AddInvoice() {
)} )}
<div className=""> <div className="">
{/* Action Buttons */} {/* Action Buttons */}
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={handleCancel} onClick={handleCancel}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
> >
Cancel Cancel
</button> </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 Save
</button> </button>
</div> </div>

24
src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
View File

@ -153,13 +153,13 @@ function AtmDeposit() {
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button> </button>
<button <button
@ -189,8 +189,13 @@ function AtmDeposit() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className=" col-md-12 row mb-3"> <div className=" col-md-12 row mb-3"
<div className="col-md-4 mb-3"> style={{
gap: "6%",
paddingLeft: "5%", // Add equal padding
// paddingRight: "%",
}}>
<div className="col-md-3 mb-2">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -208,7 +213,7 @@ function AtmDeposit() {
value={formData.bank_deposite_type} value={formData.bank_deposite_type}
onChange={handleChange} onChange={handleChange}
> >
<option value="">Select a type</option> <option value="">Select Cash type</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => ( {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}> <option key={type} value={type}>
{type} {type}
@ -275,16 +280,16 @@ function AtmDeposit() {
<div className=""> <div className="">
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={() => navigate("/")} onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
> >
Cancel Cancel
</button> </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 Save
</button> </button>
</div> </div>
@ -293,10 +298,11 @@ function AtmDeposit() {
</div> </div>
</div> </div>
<div <div
className="container mt-5" className="invoice-table-container mt-5"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}} }}
> >
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} /> <ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />

115
src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
View File

@ -156,42 +156,44 @@ function BankDeposit() {
<div className="dashboard-container"> <div className="dashboard-container">
<ToastContainer /> <ToastContainer />
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<div className="button-groups"> <div className="button-groups">
<button <button
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button> </button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<button <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
Bank Deposit ATM Deposit
</button> </button>
</div>
</div> <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div>
</div>
<div className="formcontainer"> <div className="formcontainer">
<div <div
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px" borderRadius: "40px",
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@ -199,8 +201,12 @@ function BankDeposit() {
<div className="col-md-12 row "> <div className="col-md-12 row " style={{
<div className=" col-md-4"> gap: "4%",
paddingLeft: "2%", // Add equal padding
// paddingRight: "%",
}}>
<div className=" col-md-3">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -210,6 +216,29 @@ function BankDeposit() {
required required
/> />
</div> </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"> <div className="mb-3 col-md-4">
<select <select
className="form-control-borderless" className="form-control-borderless"
@ -226,24 +255,6 @@ function BankDeposit() {
))} ))}
</select> </select>
</div> </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 <div
@ -330,16 +341,16 @@ function BankDeposit() {
</div> </div>
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={() => navigate("/")} onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
> >
Cancel Cancel
</button> </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 Save
</button> </button>
</div> </div>

193
src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
View File

@ -309,92 +309,121 @@ const BankDepositTable = (props) => {
return ( return (
<div> <div>
<div
style={{
display: "flex",
gap: "16px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
}}
>
{/* Invoice due this month */}
<div
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "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={{ style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "20px",
padding: "16px 24px",
display: "flex", display: "flex",
flexDirection: "column", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "center",
width: "400px", margin: "10px",
textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> {/* Invoice due this month */}
$19,864,63,521 <div
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> backgroundColor: "#fff8e6",
Last 7 days sale border: "1px solid #ffd700",
</p> borderRadius: "20px",
</div> 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 */} {/* Last 7 days sale */}
<div <div
style={{ style={{
backgroundColor: "#ffe6e6", backgroundColor: "#e6ffee",
border: "1px solid #ff4d4d", border: "1px solid #00b300",
borderRadius: "20px", borderRadius: "20px",
padding: "16px 24px", padding: "16px 24px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
textAlign: "left", height: "130px",
}} textAlign: "left",
> }}
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> >
$0.00 <p
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> fontFamily: "Comfortaa",
Expense this month fontStyle: "normal",
</p> fontWeight: 700,
</div> 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>
<div className="d-flex align-items-center mb-3"> <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
{/* Search Bar */} {/* Search Bar */}
<div className="searchcontainer"> <div className="searchcontainer" >
<div <div
className="input-group" className="input-group"
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -489,9 +518,10 @@ const BankDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px", width: "40px",
height: "40px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -509,6 +539,7 @@ const BankDepositTable = (props) => {
style={{ style={{
fontSize: "14px", fontSize: "14px",
display: "flex", display: "flex",
marginLeft:'6px',
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: "0", padding: "0",
@ -554,7 +585,7 @@ const BankDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -666,7 +697,11 @@ const BankDepositTable = (props) => {
{/* Table of Invoices */} {/* Table of Invoices */}
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <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( {["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
(header, index) => ( (header, index) => (
<th <th
@ -677,7 +712,7 @@ const BankDepositTable = (props) => {
cursor: "pointer", cursor: "pointer",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff', color:'#ffffff',
textAlign: "start", textAlign: "start",
alignContent: "center", alignContent: "center",
}} }}
> >

59
src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
View File

@ -2,6 +2,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
} }
.container { .container {
@ -9,6 +10,20 @@
border-radius: 40px; 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 { .dropdown-toggle::after {
display: none; /* This will remove the default dropdown arrow */ display: none; /* This will remove the default dropdown arrow */
} }
@ -18,21 +33,27 @@
} }
.button-groups { .button-groups {
display: flex; 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 */ gap: 10px; /* Adjust the spacing between buttons */
background-color: #ffffff; width: auto; /* Fixed width */
width: auto; height: 60px; /* Fixed height */
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 44px; border-radius: 44px;
padding: 10px 20px; /* Equal padding on left and right sides */ padding: 0 20px; /* Equal padding on left and right sides */
} }
/* Active button styles */ /* Active button styles */
.btn.active { .btn.active {
background-color: #ffaf32; /* Yellow background */ background-color: #ffaf32; /* Yellow background */
border-radius: 20px; border-radius: 27px;
color: black; /* Black text */ color: black; /* Black text */
} padding: 10px 20px; /* Ensure padding consistency for buttons */
}
.form-container { .form-container {
width: 1328px; width: 1328px;
@ -98,15 +119,19 @@
.table th { .table th {
justify-content: center; justify-content: center;
height: 60px; height: 40px;
align-items: center;
margin-right: 50px;
background-color: #ffffff; background-color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.table td { .table td {
border-bottom: 1px solid #EBEAF2; border-bottom: 1px solid #EBEAF2;
text-align: left; text-align: center;
vertical-align: middle; vertical-align: middle;
justify-content: center;
} }
.table tbody tr:hover { .table tbody tr:hover {
@ -149,7 +174,13 @@
} }
.filterbutton { .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 { .dropdown-item {

297
src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js
View File

@ -284,86 +284,115 @@ const InvoiceTable = ({ reloadData }) => {
return ( return (
<div> <div>
<div <div>
style={{
display: "flex", <div
gap: "16px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
}}
>
{/* Invoice due this month */}
<div
style={{ style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "20px",
padding: "16px 24px",
display: "flex", display: "flex",
flexDirection: "column", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "center",
width: "400px", margin: "10px",
textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> {/* Invoice due this month */}
$500 <div
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> backgroundColor: "#fff8e6",
Invoice due this month border: "1px solid #ffd700",
</p> 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> </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>
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}> <div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
@ -373,7 +402,7 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="input-group flexiblesearch" className="input-group flexiblesearch"
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -475,10 +504,8 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", width: "40px",
backgroundColor: "#f4f4f4", height: "40px",
width: "130px",
height: "50px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -495,6 +522,7 @@ const InvoiceTable = ({ reloadData }) => {
aria-expanded="false" aria-expanded="false"
style={{ style={{
fontSize: "14px", fontSize: "14px",
marginLeft:'6px',
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
@ -505,7 +533,7 @@ const InvoiceTable = ({ reloadData }) => {
}} }}
> >
<FilterButton /> <FilterButton />
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -624,7 +652,14 @@ const InvoiceTable = ({ reloadData }) => {
<div className=""> <div className="">
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <thead>
<tr> <tr
style={{
backgroundColor: '#282e26',
color: '#ffffff',
height: '30px', // Add height for row spacing
}}
>
{[ {[
"date", "date",
"vendor Name", "vendor Name",
@ -641,7 +676,7 @@ const InvoiceTable = ({ reloadData }) => {
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
textAlign: "start", textAlign: "center",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff' color:'#ffffff'
@ -676,18 +711,25 @@ const InvoiceTable = ({ reloadData }) => {
.join(" ")} .join(" ")}
</span> </span>
</td> </td>
<td> <td
<span style={getStatusStyle(invoice.status)}> style={{
{invoice.status display: "flex", // Use flexbox for centering
.replace(/_/g, " ") justifyContent: "center", // Center content horizontally
.split(" ") alignItems: "center", // Center content vertically
.map( height: "100%", // Ensure the cell takes full height of the row
(word) => }}
word.charAt(0).toUpperCase() + word.slice(1) >
) <span style={getStatusStyle(invoice.status)}>
.join(" ")} {invoice.status
</span> .replace(/_/g, " ")
</td> .split(" ")
.map(
(word) => word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</span>
</td>
<td> <td>
<div className="dropdown"> <div className="dropdown">
<button <button
@ -769,44 +811,75 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
All: { draft: {
backgroundColor: "#4545DB", backgroundColor: "#D1D1EF",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
}, width: "130px", // Fixed width
paid: { height: "30px", // Fixed height
backgroundColor: "#198f51", fontSize: "14px",
width: "130px", // Set a fixed width textAlign: "center",
height: "30px", // Set a fixed height display: "flex",
fontSize:"14px" justifyContent: "center",
alignItems: "center",
}, },
unpaid: { unpaid: {
backgroundColor: "#ff2024", backgroundColor: "#ff2024",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
}, },
}; };
const getStatusStyle = (status) => ({ 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", borderRadius: "5px",
padding: "5px 20px", padding: "5px 10px",
textAlign: "center", textAlign: "center",
display: "flex", // Use flexbox for alignment display: "flex", // Flexbox for alignment
justifyContent: "center", // Center horizontally justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically alignItems: "center", // Center vertically
color: "#fff", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",

152
src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js
View File

@ -48,7 +48,7 @@ function PayInvoice() {
date: "", date: "",
status: "paid", status: "paid",
pay_method_status: "pay_now", pay_method_status: "pay_now",
pay_method: "", pay_method: "cash",
amount: "", amount: "",
remaining_amount: "", // Initialize as empty string or 0 remaining_amount: "", // Initialize as empty string or 0
discount: 0, discount: 0,
@ -301,20 +301,20 @@ function PayInvoice() {
return ( return (
<div className="dashboard-container"> <div className="dashboard-container">
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<div className="button-groups"> <div className="button-groups">
<button <button
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
@ -344,8 +344,15 @@ function PayInvoice() {
</div> </div>
<div className="col-md-12 row" style={{ gap: "15%" }}> <div
<div className="mb-3 col-md-2" > className="col-md-12 row"
style={{
gap: "10%",
paddingLeft: "5%", // Add equal padding
// paddingRight: "%",
}}
>
<div className="mb-3 col-md-3">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -363,10 +370,10 @@ function PayInvoice() {
onChange={(e) => { onChange={(e) => {
const selectedValue = e.target.value; const selectedValue = e.target.value;
if (selectedValue === "add-vendor") { if (selectedValue === "add-vendor") {
handleShow(); // Modal ko open karne ke liye function handleShow(); // Function to open modal
setFormData((prevData) => ({ setFormData((prevData) => ({
...prevData, ...prevData,
vendor_department: "", // Field ko reset karne ke liye vendor_department: "", // Reset the field
})); }));
} else { } else {
handleChange(e); // Existing handler for normal options handleChange(e); // Existing handler for normal options
@ -395,25 +402,11 @@ function PayInvoice() {
placeholder="Invoice No" placeholder="Invoice No"
onChange={handleChange} 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> </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 <input
name="amount" name="amount"
type="text" type="text"
@ -424,7 +417,7 @@ function PayInvoice() {
style={{ backgroundColor: "#fafafa" }} style={{ backgroundColor: "#fafafa" }}
/> />
</div> </div>
<div className="col-md-2"> <div className="col-md-2" >
<input <input
type="text" type="text"
@ -483,8 +476,8 @@ function PayInvoice() {
{/* <div className="col-md-3 mt-4"> {/* <div className="col-md-3 mt-4">
<input <input
name="after_discount" name="after_discount"
type="text" type="text"
@ -497,48 +490,50 @@ function PayInvoice() {
</div> */} </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>
<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" && ( {formData.pay_method === "cheque" && (
<div className="row "> {/* Use row class for Bootstrap grid */} <div className="row "> {/* Use row class for Bootstrap grid */}
@ -573,16 +568,7 @@ function PayInvoice() {
</div> </div>
)} )}
{formData.pay_method === "Bank Card/ACH/EFT" && (
{formData.pay_method === "bank" && (
<div className="mb-3"> <div className="mb-3">
<div className="col-md-12 row"> <div className="col-md-12 row">
<div className="mb-3 col-md-6"> <div className="mb-3 col-md-6">
@ -627,16 +613,16 @@ function PayInvoice() {
</div> </div>
)} )}
</div> </div>
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={handleCancel} onClick={handleCancel}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
> >
Cancel Cancel
</button> </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 Save
</button> </button>
</div> </div>

175
src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice_Table.js
View File

@ -312,13 +312,15 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return ( return (
<div> <div>
<ToastContainer /> <ToastContainer />
<div
<div
style={{ style={{
display: "flex", display: "flex",
gap: "16px", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
margin: "20px", margin: "10px",
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -332,14 +334,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -355,14 +366,23 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
$19,864,63,521 style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -378,27 +398,35 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "390px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month Expense this month
</p> </p>
</div> </div>
</div> </div>
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
<div className="d-flex align-items-center mb-3">
{/* Search Bar */} {/* Search Bar */}
<div className="searchcontainer" style={{ gap: "10px" }}> <div className="searchcontainer" style={{ gap: "10px" }}>
<div <div
className="input-group" className="input-group"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -495,10 +523,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", // marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px", width: "40px",
height: "50px", height: "40px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -516,6 +544,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{ style={{
fontSize: "14px", fontSize: "14px",
display: "flex", display: "flex",
marginLeft:'6px',
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
padding: "0", padding: "0",
@ -561,7 +590,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -649,7 +678,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</div> </div>
</div> */} </div> */}
</li> </li>
<li className="text-center mt-2"> <li className="text-center mt-2" >
<button <button
className="btn btn-primary" className="btn btn-primary"
style={{ width: "163px", height: "40px" }} style={{ width: "163px", height: "40px" }}
@ -673,13 +702,24 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
{/* Table of Invoices */} {/* Table of Invoices */}
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <thead>
<tr> <tr
style={{
backgroundColor: '#282e26',
color: '#ffffff',
height: '30px', // Add height for row spacing
textAlign: 'center', // Align text to the center horizontally
}}
>
{[ {[
"date", "date",
"vendor_department_name", "vendor_department_name",
"amount", "amount",
"remaining_amount", "remaining_amount",
"updated date", // "updated date",
"payment_method", "payment_method",
"status", "status",
"actions", "actions",
@ -692,8 +732,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
cursor: "pointer", cursor: "pointer",
backgroundColor: '#282e26', backgroundColor: '#282e26',
color: '#ffffff', color: '#ffffff',
textAlign: "start", textAlign: "center",
alignContent: "center", alignContent: "center",
// Add a border for separation
}} }}
> >
{header {header
@ -752,9 +793,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
> >
{invoice.remaining_amount} {invoice.remaining_amount}
</td> </td>
<td onClick={() => handleCellClick(invoice, "updated_at")}> {/* <td onClick={() => handleCellClick(invoice, "updated_at")}>
{invoice.updated_at ? invoice.updated_at.split("T")[0] : ""} {invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
</td> </td> */}
<td onClick={() => handleCellClick(invoice, "payment_method")}> <td onClick={() => handleCellClick(invoice, "payment_method")}>
<span style={getPaymentMethodStyle(invoice.pay_method)}> <span style={getPaymentMethodStyle(invoice.pay_method)}>
{invoice.pay_method && {invoice.pay_method &&
@ -768,7 +809,14 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
.join(" ")} .join(" ")}
</span> </span>
</td> </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)}> <span style={getStatusStyle(invoice.status)}>
{invoice.status && {invoice.status &&
invoice.status invoice.status
@ -866,43 +914,74 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
All: { draft: {
backgroundColor: "#4545DB", backgroundColor: "#D1D1EF",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
}, width: "130px", // Fixed width
paid: { height: "30px", // Fixed height
backgroundColor: "#198f51", fontSize: "14px",
width: "130px", // Set a fixed width textAlign: "center",
height: "30px", // Set a fixed height display: "flex",
fontSize:"14px" justifyContent: "center",
alignItems: "center",
}, },
unpaid: { unpaid: {
backgroundColor: "#ff2024", backgroundColor: "#ff2024",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
}, },
}; };
const getStatusStyle = (status) => ({ 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", borderRadius: "5px",
padding: "5px 20px", padding: "5px 10px",
textAlign: "center", textAlign: "center",
display: "flex", // Use flexbox for alignment display: "flex", // Flexbox for alignment
justifyContent: "center", // Center horizontally justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically alignItems: "center", // Center vertically
color: "#fff", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",

12
src/components/Pages/AppPAges/ManageSettings/ManageSettings.js
View File

@ -10,6 +10,8 @@ import { toast, ToastContainer } from "react-toastify";
import AuthContext from "../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../utils/secure-route/AuthContext";
import useApi from "../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../utils/api-manager/Helper/useApi";
import CustomSwitch from "./CustomSwitch"; import CustomSwitch from "./CustomSwitch";
import BankIcon from '../../../../assets/Image/bank.png'
const ManageSettings = () => { const ManageSettings = () => {
let { user } = useContext(AuthContext); let { user } = useContext(AuthContext);
const storeId = user.store; const storeId = user.store;
@ -472,10 +474,16 @@ const ManageSettings = () => {
<div className="header-row"> <div className="header-row">
<div className="setting-title">Manage Bank</div> <div className="setting-title">Manage Bank</div>
<button <button
className="bank-add-button" className="btn cus d-flex align-items-center justify-content-between"
onClick={() => handleShow("bank")} onClick={() => handleShow("bank")}
> >
+ Add Bank Add Bank
<img
src={BankIcon}
alt="Bank Icon"
style={{ width: "20px", height: "20px" }}
/>
</button> </button>
</div> </div>
<div className="second-container"> <div className="second-container">

292
src/components/Pages/AppPAges/ManageSettings/ManageUserTable.js
View File

@ -103,15 +103,15 @@ const ManageUserTable = ({
const statusStyles = { const statusStyles = {
enable: { enable: {
backgroundColor: "#6CBE1C", // Green background for Enable backgroundColor: "#198F51", // Green background for Enable
color: "#fff", color: "#fff",
borderRadius: "30px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 10px",
}, },
disable: { disable: {
backgroundColor: "#6c757d", // Red background for Disable backgroundColor: "#FF2024", // Red background for Disable
color: "#000", color: "#fff",
borderRadius: "30px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 10px",
}, },
@ -168,18 +168,18 @@ const ManageUserTable = ({
borderRadius: "4px", borderRadius: "4px",
zIndex: "1", zIndex: "1",
}; };
// Calculate the total net sales from the data // Calculate the total net sales from the data
// const totalNetSales = data.reduce((acc, item) => { // const totalNetSales = data.reduce((acc, item) => {
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values // const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
// return acc + amount; // return acc + amount;
// }, 0).toFixed(2); // // }, 0).toFixed(2); //
return ( return (
<div className="data-table-container"> <div className="data-table-container">
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<div className="expense-searchcontainerstart d-flex"> <div className="expense-searchcontainerstart d-flex">
<div className="search-container"> <div className="search-container">
<input <input
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" type="text"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
@ -252,7 +252,7 @@ const ManageUserTable = ({
Export To Excel Export To Excel
</button> </button>
)} )}
{showFilter && ( {showFilter && (
<div className="filter-button-container" style={{ position: "relative" }}> <div className="filter-button-container" style={{ position: "relative" }}>
<button className="btn custbtn2" type="button" onClick={handleFilterClick}> <button className="btn custbtn2" type="button" onClick={handleFilterClick}>
<svg <svg
@ -277,64 +277,70 @@ const ManageUserTable = ({
</div> </div>
)} )}
</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> </tr>
</thead> </thead>
<tbody className="table-body"> <tbody className="table-body">
{sortedDisplayedData.length === 0 ? ( {sortedDisplayedData.length === 0 ? (
<tr> <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' }}> <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 No data found
</td> </td>
</tr> </tr>
) : ( ) : (
sortedDisplayedData.map((item) => ( sortedDisplayedData.map((item) => (
<tr key={item.id || item.index}> <tr key={item.id || item.index}>
<td> <td>
{(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1} {(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
</td> </td>
{columns.map((col, colIndex) => ( {columns.map((col, colIndex) => (
<td key={colIndex}> <td key={colIndex}>
{col.field === "is_active" ? ( {col.field === "is_active" ? (
<div <div
style={{ style={{
...item.is_active === false ? statusStyles.disable : statusStyles.enable, ...item.is_active === false ? statusStyles.disable : statusStyles.enable,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: '100%', // Make sure the height of the div is sufficient height: '100%', // Make sure the height of the div is sufficient
}} }}
> >
{item.is_active === false ? "Disable" : "Enable"} {item.is_active === false ? "Disabled" : "Enabled"}
</div> </div>
) : col.field === "joining_date" ? ( ) : col.field === "joining_date" ? (
// Format the 'joining_date' in 'mm-dd-yyyy' format // Format the 'joining_date' in 'mm-dd-yyyy' format
new Date(item.joining_date).toLocaleDateString("en-US") new Date(item.joining_date).toLocaleDateString("en-US")
) : item[col.field] !== undefined && item[col.field] !== null ? ( ) : item[col.field] !== undefined && item[col.field] !== null ? (
typeof item[col.field] === "function" ? item[col.field]() : item[col.field] typeof item[col.field] === "function" ? item[col.field]() : item[col.field]
) : ( ) : (
"-" "-"
)} )}
</td> </td>
))} ))}
{showAction && ( {showAction && (
<td className="action-column"> <td className="action-column">
<button className="action-button" onClick={() => onEdit(item)}> <button className="action-button" onClick={() => onEdit(item)}>
{/* Edit icon */} {/* Edit icon */}
<svg <svg
width="16" width="16"
height="16" height="16"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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" 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" fill="#002300"
/> />
</svg> </svg>
</button> </button>
<button className="action-button" onClick={() => onDelete(item.id)}> <button className="action-button" onClick={() => onDelete(item.id)}>
{/* Delete icon */} {/* Delete icon */}
<svg <svg
width="16" width="16"
height="16" height="16"
viewBox="0 0 16 16" viewBox="0 0 16 16"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <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" 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" fill="#002300"
/> />
</svg> </svg>
</button> </button>
</td> </td>
)} )}
</tr> </tr>
)) ))
)} )}
</tbody> </tbody>
</table> </table>
{showFooter && ( {showFooter && (

8
src/components/Pages/AppPAges/ManageSettings/ManageUsers.js
View File

@ -394,8 +394,8 @@ function ManageUsers() {
<div className="header-row"> <div className="header-row">
<div className="setting-title">Manage Users</div> <div className="setting-title">Manage Users</div>
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */} <div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
<button <button
style={{ style={{
backgroundColor: "#4A5546", backgroundColor: "#4A5546",
@ -435,7 +435,7 @@ function ManageUsers() {
}} }}
onClick={() => handleShowStoreModal()} // Open modal for adding a user onClick={() => handleShowStoreModal()} // Open modal for adding a user
> >
Add New Store Add New Store
<img <img
src={storeIcon} src={storeIcon}
alt="store Icon" alt="store Icon"
@ -446,7 +446,7 @@ function ManageUsers() {
className="btn cus d-flex align-items-center" className="btn cus d-flex align-items-center"
onClick={() => handleShowUserModal()} // Open modal for adding a user onClick={() => handleShowUserModal()} // Open modal for adding a user
> >
Add New User Add New User
<img <img
src={userIcon} src={userIcon}
alt="user Icon" alt="user Icon"

139
src/components/Pages/AppPAges/ManageSettings/ManageVendor.js
View File

@ -2,10 +2,12 @@
import React, { useState, useEffect, useContext } from "react"; import React, { useState, useEffect, useContext } from "react";
import ReusableModal from "./ReusableModal"; import ReusableModal from "./ReusableModal";
import "./Settings.css"; import "./Settings.css";
import vendorIcon from '../../../../assets/Image/vendor Icon.png'
import AuthContext from "../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../utils/secure-route/AuthContext";
import useApi from "../../../../utils/api-manager/Helper/useApi"; 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 SettingTable from "./SettingTable";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
@ -21,8 +23,8 @@ function ManageVendor() {
const [serviceData, setServiceData] = useState([]); const [serviceData, setServiceData] = useState([]);
const [editVendorId, setEditVendorId] = useState(null); const [editVendorId, setEditVendorId] = useState(null);
const { Get, Post, Put, Delete , Patch } = useApi(); const { Get, Post, Put, Delete, Patch } = useApi();
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
@ -63,17 +65,17 @@ function ManageVendor() {
try { try {
// Fetch the current list of vendors // Fetch the current list of vendors
const existingVendors = await Get("vendorDepartmentData"); const existingVendors = await Get("vendorDepartmentData");
// Check if a vendor with the same name already exists // Check if a vendor with the same name already exists
const isDuplicate = existingVendors.some( const isDuplicate = existingVendors.some(
(vendor) => vendor.name.toLowerCase() === vendorName.toLowerCase() && vendor.id !== editVendorId (vendor) => vendor.name.toLowerCase() === vendorName.toLowerCase() && vendor.id !== editVendorId
); );
if (isDuplicate) { if (isDuplicate) {
toast.error("Vendor with the same name already exists!"); toast.error("Vendor with the same name already exists!");
return; // Exit the function early return; // Exit the function early
} }
const payload = { const payload = {
name: vendorName, name: vendorName,
type: vendorType, type: vendorType,
@ -82,7 +84,7 @@ function ManageVendor() {
store: storeId, store: storeId,
is_deleted: false, is_deleted: false,
}; };
if (editVendorId) { if (editVendorId) {
const updatedVendor = await Put("vendorDepartmentData", editVendorId, payload); const updatedVendor = await Put("vendorDepartmentData", editVendorId, payload);
// Assuming `updatedVendor` contains the updated vendor data // Assuming `updatedVendor` contains the updated vendor data
@ -95,14 +97,14 @@ function ManageVendor() {
setVendors((prev) => [...prev, response.data]); setVendors((prev) => [...prev, response.data]);
toast.success("Vendor added successfully!"); toast.success("Vendor added successfully!");
} }
handleClose(); handleClose();
} catch (error) { } catch (error) {
console.error("Error saving vendor:", error); console.error("Error saving vendor:", error);
toast.error("Error saving vendor!"); toast.error("Error saving vendor!");
} }
}; };
const filteredVendors = vendors.filter(vendor => !vendor.is_deleted); const filteredVendors = vendors.filter(vendor => !vendor.is_deleted);
// const handleDelete = async (id) => { // 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) => { const handleDelete = async (id) => {
console.log("Vendor ID to delete:", id); console.log("Vendor ID to delete:", id);
const result = await Swal.fire({ const result = await Swal.fire({
title: "Are you sure?", title: "Are you sure?",
text: "You won't be able to revert this!", text: "You won't be able to revert this!",
@ -142,12 +144,12 @@ function ManageVendor() {
cancelButtonColor: "#3085d6", cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!", confirmButtonText: "Yes, delete it!",
}); });
// Check if the user clicked the confirm button // Check if the user clicked the confirm button
if (!result.isConfirmed) { if (!result.isConfirmed) {
return; return;
} }
try { try {
const payload = { is_deleted: true }; const payload = { is_deleted: true };
const response = await Patch("vendorDepartmentData", id, payload); const response = await Patch("vendorDepartmentData", id, payload);
@ -159,8 +161,8 @@ function ManageVendor() {
toast.error("Error deleting vendor!"); toast.error("Error deleting vendor!");
} }
}; };
const handleDepartmentChange = (event) => { const handleDepartmentChange = (event) => {
const value = event.target.value; const value = event.target.value;
@ -184,16 +186,31 @@ function ManageVendor() {
return ( return (
<> <>
<div className="due-days"> <div className="due-days">
<ToastContainer/> <ToastContainer />
<div className="header-row"> <div className="header-row">
<div className="setting-title">Manage Vendor</div> <div className="setting-title">Manage Vendor</div>
<div className="btn-position"> <div className="btn-position">
<button className="btn cus d-flex align-items-center" style={{marginBottom:"10px"}} onClick={handleShow}> <button
Add Vendor 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> </button>
</div> </div>
</div> </div>
<SettingTable <SettingTable
showFooter={true} showFooter={true}
@ -232,11 +249,12 @@ function ManageVendor() {
placeholder="Vendor Name" placeholder="Vendor Name"
value={vendorName} value={vendorName}
onChange={(e) => setVendorName(e.target.value)} 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 border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius borderRadius: "0px", // Remove border radius
}} }}
/> />
<select <select
id="vendorType" id="vendorType"
@ -247,11 +265,12 @@ function ManageVendor() {
setVendorDepartments([]); // Reset departments when type changes setVendorDepartments([]); // Reset departments when type changes
setOpeningBalance(""); setOpeningBalance("");
}} }}
style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff", style={{
width: "400px", marginRight: "10px", height: "44px", backgroundColor: "#ffffff",
border: "none", // Remove all borders border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius borderRadius: "0px", // Remove border radius
}} }}
> >
<option value="">Vendor Type</option> <option value="">Vendor Type</option>
<option value="purchase">Purchase</option> <option value="purchase">Purchase</option>
@ -280,40 +299,40 @@ function ManageVendor() {
})} })}
</div> </div>
<select <select
id="vendorDepartment" id="vendorDepartment"
className="input-field " className="input-field "
onChange={handleDepartmentChange} onChange={handleDepartmentChange}
style={{ style={{
width: "400px", width: "400px",
marginRight: "10px", marginRight: "10px",
height: "44px", height: "44px",
border: "none", // Remove all borders border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius borderRadius: "0px", // Remove border radius
marginLeft:"45px" marginLeft: "45px"
}} }}
> >
<option value=""> <option value="">
{vendorType === "purchase" {vendorType === "purchase"
? "Select Vendor Department" ? "Select Vendor Department"
: "Select Expense Type"} : "Select Expense Type"}
</option> </option>
{(vendorType === "purchase" {(vendorType === "purchase"
? departmentOptions ? departmentOptions
: expenseTypeOptions : expenseTypeOptions
).length === 0 ? ( ).length === 0 ? (
<option value="" disabled>No Vendor / Department found</option> // This is the new option <option value="" disabled>No Vendor / Department found</option> // This is the new option
) : ( ) : (
(vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map( (vendorType === "purchase" ? departmentOptions : expenseTypeOptions).map(
(service) => ( (service) => (
<option key={service.id} value={service.id}> <option key={service.id} value={service.id}>
{service.title} {service.title}
</option> </option>
) )
) )
)} )}
</select> </select>
{vendorType === "purchase" && ( {vendorType === "purchase" && (
<input <input
@ -348,7 +367,7 @@ function ManageVendor() {
cursor: "pointer", cursor: "pointer",
width: "181px", width: "181px",
height: "45px", height: "45px",
fontSize: "18px", fontSize: "18px",
}} }}
> >

4
src/components/Pages/AppPAges/ManageSettings/ReusableModal.js
View File

@ -70,8 +70,8 @@ const ReusableModal = ({
const titleStyle = { const titleStyle = {
fontFamily: "'Manrope', sans-serif", fontFamily: "'Comfortaa', sans-serif",
fontWeight: "600", fontWeight: "300",
fontSize: "20px", fontSize: "20px",
color: "#002300", color: "#002300",
margin: 0, margin: 0,

120
src/components/Pages/AppPAges/ManageSettings/SettingTable.js
View File

@ -200,7 +200,7 @@ const SettingTable = ({
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search" placeholder="Search"
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
/> />
<svg <svg
className="search-container-icon" className="search-container-icon"
@ -294,65 +294,67 @@ const SettingTable = ({
</div> </div>
)} )}
</div> </div>
<div style={{ marginRight: "1%" }}> <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: "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> <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> </div>
<table className="data-table custom-table" style={{borderRadius:"none"}} > <table className="data-table custom-table" style={{borderRadius:"none"}} >

5
src/components/Pages/AppPAges/ManageSettings/Settings.css
View File

@ -441,8 +441,8 @@ border-radius: 14px;
/* Set card width */ /* Set card width */
height: 400px; height: 400px;
/* Set card height */ /* Set card height */
border: 1px solid rgba(69, 69, 219, 0.3); border: 1px solid #DBDBDB;
box-shadow: 12px 4px 4px rgba(0, 0, 0, 0.18); box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
} }
@ -667,6 +667,7 @@ input[type="date"] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 5px; margin-bottom: 5px;
margin-left: 45px;
/* Space between chips and dropdown */ /* Space between chips and dropdown */
max-width: 483px; max-width: 483px;
/* Match the dropdown width */ /* Match the dropdown width */

25
src/components/Pages/AppPAges/ManageSettings/StoreInformation.js
View File

@ -163,7 +163,9 @@ function StoreInformation() {
style={{ style={{
color: "#002300", color: "#002300",
fontSize: "18px", fontSize: "18px",
fontFamily: "Manrope", fontFamily: " 'Comfortaa', sans-serif",
border:"1px solid #E9E9E9",
backgroundColor:"#FAFAFA"
}} }}
value={user ? user.selected_store_name : ""} value={user ? user.selected_store_name : ""}
placeholder="Store Name" placeholder="Store Name"
@ -176,7 +178,9 @@ function StoreInformation() {
style={{ style={{
color: "#002300", color: "#002300",
fontSize: "18px", fontSize: "18px",
fontFamily: "Manrope", fontFamily: " 'Comfortaa', sans-serif",
border:"1px solid #E9E9E9",
backgroundColor:"#FAFAFA"
}} }}
value={user ? user.email : ""} value={user ? user.email : ""}
placeholder="Email" placeholder="Email"
@ -268,14 +272,14 @@ function StoreInformation() {
key={index} key={index}
className={`card-store ${plan.title.toLowerCase()} ${currentPlan === plan.title ? "selected" : ""}`} className={`card-store ${plan.title.toLowerCase()} ${currentPlan === plan.title ? "selected" : ""}`}
style={{ style={{
border: currentPlan === plan.title ? '2px solid #6666ff' : '1px solid #e5e5e5', border: currentPlan === plan.title ? '2px solid #4A5546' : '1px solid #e5e5e5',
borderRadius: '10px', borderRadius: '40px',
padding: '20px', padding: '20px',
textAlign: 'start', textAlign: 'start',
flex: '1 1 calc(30% - 20px)', flex: '1 1 calc(30% - 20px)',
maxWidth: '25%', maxWidth: '25%',
minWidth: '300px', minWidth: '300px',
backgroundColor: '#f4f6ff', backgroundColor: '#ffffff',
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
@ -285,9 +289,9 @@ function StoreInformation() {
}} }}
onClick={() => handlePlanChange(plan.title)} onClick={() => handlePlanChange(plan.title)}
> >
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
<p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p> <p style={{ fontSize: '20px', fontWeight: 'bold', color: '#333' }}>{plan.title}</p>
<p style={{ fontSize: '24px', fontWeight: 'bold', color: '#333', position: 'relative' }}> <p style={{ fontSize: '18px', fontWeight: 'bold', color: '#333', position: 'relative', marginRight:"10px" }}>
<span style={{ <span style={{
position: 'absolute', position: 'absolute',
top: -8, top: -8,
@ -298,14 +302,15 @@ function StoreInformation() {
{parseFloat(plan.amount).toFixed(2)} {parseFloat(plan.amount).toFixed(2)}
</p> </p>
</div> </div>
<div className="features" style={{ overflowY: 'auto', padding: '10px 0', flex: '1' }}> <div className="features" style={{ overflowY: 'auto', padding: '0px 0', flex: '1', }}>
<p style={{ fontWeight: 'bold', fontSize: '16px' }}>Features</p> <p style={{ fontWeight: 'bold', fontSize: '16px', marginBottom:"15px" }}>Features</p>
<div style={{ <div style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: '10px', gap: '10px',
paddingLeft: '20px', paddingLeft: '20px',
color: '#555', color: '#555',
}}> }}>
{plan.inc_features_titles.map((features, index) => ( {plan.inc_features_titles.map((features, index) => (
<div key={index} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>

2
src/components/common/Header.js
View File

@ -184,7 +184,7 @@ const Header = () => {
closeDropdowns(); closeDropdowns();
}} }}
> >
Owner Dashboard Home
</Link> </Link>
</li> </li>
)} )}