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

Compare commits

base: Sonali:main
Branches Tags
Sonali:main
Sonali:27_12_Sonali
Sonali:26_12_sonali
Sonali:25_12__sonali
Sonali:24_12_sonali
Sonali:23_12__sonali
Sonali:2112__sonali
Sonali:2012__UIChange
..
compare: Sonali:25_12__sonali
Branches Tags
Sonali:main
Sonali:27_12_Sonali
Sonali:26_12_sonali
Sonali:25_12__sonali
Sonali:24_12_sonali
Sonali:23_12__sonali
Sonali:2112__sonali
Sonali:2012__UIChange

1 Commits
main ... 25_12__son

Author SHA1 Message Date
sonali d63ed80855 " mew changes in ui " 2024-12-25 18:28:03 +05:30
37 changed files with 2073 additions and 2346 deletions
Show Stats Expand all files Collapse all files

BIN
public/Background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

13
public/index.html
View File

@ -29,13 +29,14 @@
<!-- <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;
font-family: "Comfortaa"; background-image: url('../src/assets/Image/Pattern.png');
background-size: cover;
background-position: top; background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 100% auto; background-position: center;
background-blend-mode: overlay;
font-family: 'Comfortaa', sans-serif;
} }

BIN
src/assets/Image/Atm Deposite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 461 B

BIN
src/assets/Image/Bank Deposite .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 527 B

BIN
src/assets/Image/other income.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 785 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 683 B

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

@ -93,34 +93,25 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #FFFFFF;
width: 400px; width: 400px;
height: 81px; height: 90px;
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: 81px; height: 90px;
background-color: #FFFFFF;
padding: 10px 20px; padding: 10px 20px;
border-radius: 10px;
display: flex; 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 */
@ -132,7 +123,7 @@ font-weight: bold;
.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: 40px; border-radius: 20px;
padding: 10px 15px; padding: 10px 15px;
font-weight: bold; /* Bold text for active link */ font-weight: bold; /* Bold text for active link */
} }
@ -441,7 +432,6 @@ font-weight: bold;
.table-darkcustom td { .table-darkcustom td {
text-align: start; text-align: start;
vertical-align: middle; vertical-align: middle;
font-size: 16px; font-size: 16px;
} }
/* Styling for the last header cell */ /* Styling for the last header cell */
@ -512,7 +502,7 @@ font-weight: bold;
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 30%; top: 50%;
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 */
@ -521,7 +511,6 @@ font-weight: bold;
.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 {
@ -736,7 +725,6 @@ font-weight: bold;
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 */
@ -770,7 +758,6 @@ h3 {
.expense-searchcontainerstart { .expense-searchcontainerstart {
width: 90%; width: 90%;
} }
.custbtn { .custbtn {
box-shadow: none; box-shadow: none;
@ -828,15 +815,13 @@ 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 {

91
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: "50px", gap: "16px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginBottom:"20px" margin: "20px",
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -324,24 +324,14 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "385px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -357,24 +347,14 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "385px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{ $19,864,63,521
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -390,24 +370,14 @@ const ATMDepositTable = (props) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "385px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month Expense this month
</p> </p>
</div> </div>
@ -418,7 +388,7 @@ const ATMDepositTable = (props) => {
<div className="searchcontainer"> <div className="searchcontainer">
<div <div
className="input-group" className="input-group"
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -513,16 +483,9 @@ const ATMDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
width: "40px", marginLeft: "10px",
height: "40px", backgroundColor: "#f4f4f4",
borderRadius: "60px", width: "130px",
padding: "15px",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -540,7 +503,6 @@ 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",
@ -586,7 +548,7 @@ const ATMDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; &nbsp; Filter
</button> </button>
<ul <ul
@ -697,12 +659,7 @@ 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 style={{ <tr>
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
@ -711,7 +668,7 @@ const ATMDepositTable = (props) => {
style={{ style={{
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
textAlign: "center", textAlign: "start",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff' color:'#ffffff'
@ -755,11 +712,11 @@ const ATMDepositTable = (props) => {
{currentInvoices.length !== 0 ? {currentInvoices.length !== 0 ?
currentInvoices.map((invoice) => ( currentInvoices.map((invoice) => (
<tr key={invoice.id}> <tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "center" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.date} {invoice.date}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "center" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}> <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type {invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() + ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
@ -767,8 +724,8 @@ const ATMDepositTable = (props) => {
: "N/A"} : "N/A"}
</span> </span>
</td> </td>
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td> <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'center' }}> <td style={{ textAlign: 'left' }}>
<span style={getStatusStyle(invoice.transaction_type)}> <span style={getStatusStyle(invoice.transaction_type)}>
{invoice.transaction_type ? {invoice.transaction_type ?
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) : invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :

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

@ -4,7 +4,7 @@ import React, { useState, useEffect, useContext, useRef } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
import "./Invoice.css"; import "./Invoice.css";
import { useLocation } from "react-router-dom"; import { useLocation } from 'react-router-dom';
import TableComponent from "./InvoiceTable"; import TableComponent from "./InvoiceTable";
import useApi from "../../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../../utils/secure-route/AuthContext";
@ -28,7 +28,7 @@ function AddInvoice() {
const handleShow = () => setShowModal(true); const handleShow = () => setShowModal(true);
const handleClose = () => setShowModal(false); const handleClose = () => setShowModal(false);
const [activeButton, setActiveButton] = useState(""); const [activeButton, setActiveButton] = useState('');
const location = useLocation(); const location = useLocation();
@ -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_now", pay_method_status: "",
prepaid_tax: false, prepaid_tax: false,
prepaid_tax_percentage: "", prepaid_tax_percentage: "",
amount: "", amount: "",
remaining_amount: "", remaining_amount: "",
pay_method: "cash", pay_method: "",
due_date: null, due_date: null,
note: "", note: "",
bank: "", bank: "",
@ -81,7 +81,8 @@ function AddInvoice() {
cheque_no: null, cheque_no: null,
type: "", type: "",
}); });
}; }
useEffect(() => { useEffect(() => {
setFormData((prevData) => ({ setFormData((prevData) => ({
@ -94,6 +95,7 @@ function AddInvoice() {
const [banks, setBanks] = useState([]); const [banks, setBanks] = useState([]);
const [dueDays, setDueDays] = useState([]); const [dueDays, setDueDays] = useState([]);
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
@ -121,9 +123,9 @@ function AddInvoice() {
const invoiceStatus = const invoiceStatus =
formData.pay_method_status === "pay_now" && formData.pay_method_status === "pay_now" &&
(formData.pay_method === "cash" || (formData.pay_method === "cash" ||
formData.pay_method === "bank" || formData.pay_method === "bank" ||
formData.pay_method === "cheque") formData.pay_method === "cheque")
? "paid" ? "paid"
: "unpaid"; : "unpaid";
@ -155,22 +157,25 @@ function AddInvoice() {
}), }),
}; };
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
.then((response) => { await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit).then((response) => {
toast.success("Invoice submitted successfully!"); toast.success("Invoice submitted successfully!");
// Reload the component by navigating to the same route // Reload the component by navigating to the same route
setReloadData(!reloadData); setReloadData(!reloadData);
makeBlank(); makeBlank();
// navigate(0); // navigate(0);
})
.catch((error) => { }).catch((error) => {
setReloadData(!reloadData); setReloadData(!reloadData);
toast.error( toast.error(
"An error occurred while submitting the invoice. Please check your network and try again." "An error occurred while submitting the invoice. Please check your network and try again."
); );
}); });
}; };
const fetchData = async () => { const fetchData = async () => {
try { try {
const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all( const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all(
@ -225,6 +230,7 @@ function AddInvoice() {
[name]: type === "checkbox" ? checked : value, [name]: type === "checkbox" ? checked : value,
})); }));
} }
}; };
const handlePaymentMethodChange = (e) => { const handlePaymentMethodChange = (e) => {
const value = e.target.value; const value = e.target.value;
@ -234,8 +240,8 @@ function AddInvoice() {
value === "credit_invoice" value === "credit_invoice"
? "credit_invoice" ? "credit_invoice"
: value === "pay_later" : value === "pay_later"
? "pay_later" ? "pay_later"
: ""; : "";
setFormData((prevData) => ({ setFormData((prevData) => ({
...prevData, ...prevData,
@ -250,7 +256,7 @@ function AddInvoice() {
}; };
const handleCancel = () => { const handleCancel = () => {
makeBlank(); makeBlank()
navigate("/"); navigate("/");
}; };
@ -274,7 +280,7 @@ function AddInvoice() {
}, },
{ {
row: 1, row: 1,
column: "col-md-3", column: "col-md-2",
label: "Invoice Number", label: "Invoice Number",
type: "invoice_no", type: "invoice_no",
name: "invoice_no", name: "invoice_no",
@ -282,7 +288,7 @@ function AddInvoice() {
}, },
{ {
row: 2, row: 2,
column: "col-md-2", column: "col-md-3",
label: "Amount", label: "Amount",
name: "amount", name: "amount",
type: "prefix-input", type: "prefix-input",
@ -296,20 +302,20 @@ function AddInvoice() {
// label: "Payment Method:", // label: "Payment Method:",
type: "radio", type: "radio",
options: [ options: [
{ value: "pay_now", label: "Pay Now" },
{ value: "pay_later", label: "Pay Later" }, { value: "pay_later", label: "Pay Later" },
{ value: "pay_now", label: "Pay Now" },
{ value: "credit_invoice", label: "Credit Invoice" }, { value: "credit_invoice", label: "Credit Invoice" },
], ],
}, },
{ {
row: 4, row: 4,
column: "col-md-5", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "payment-method-options", type: "payment-method-options",
}, },
{ {
row: 4, row: 4,
column: "col-md-5", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "pay-bank-options", type: "pay-bank-options",
}, },
@ -325,15 +331,15 @@ function AddInvoice() {
// The "Notes" field is conditionally rendered based on pay_method_status // The "Notes" field is conditionally rendered based on pay_method_status
...(formData.pay_method_status !== "pay_now" ...(formData.pay_method_status !== "pay_now"
? [ ? [
// { // {
// row: 5, // row: 5,
// column: "col-md-6", // column: "col-md-6",
// label: "Notes", // label: "Notes",
// type: "text", // type: "text",
// name: "note", // name: "note",
// placeholder: "Notes", // placeholder: "Notes",
// }, // },
] ]
: []), : []),
{ {
row: 5, row: 5,
@ -342,12 +348,13 @@ function AddInvoice() {
type: "checkbox", type: "checkbox",
name: "prepaid_tax", name: "prepaid_tax",
}, },
]; ];
const paymentMethodOptions = [ const paymentMethodOptions = [
{ value: "cash", label: "Cash" }, { value: "cash", label: "Cash" },
{ value: "bank", label: "Bank Card (ACH/EFT)" },
{ value: "cheque", label: "Cheque" }, { value: "cheque", label: "Cheque" },
{ value: "bank", label: "Bank Card (ACH/EFT)" },
]; ];
const groupedFields = fields.reduce((acc, field) => { const groupedFields = fields.reduce((acc, field) => {
@ -378,6 +385,7 @@ function AddInvoice() {
setIsOpen(false); // Close the dropdown after clicking a link setIsOpen(false); // Close the dropdown after clicking a link
navigate(path); // Navigate to the clicked path navigate(path); // Navigate to the clicked path
}; };
const renderField = (field) => { const renderField = (field) => {
@ -398,7 +406,7 @@ function AddInvoice() {
placeholder={field.placeholder} placeholder={field.placeholder}
value={formData[field.name]} value={formData[field.name]}
onChange={handleChange} onChange={handleChange}
// onBlur={handleChange} // onBlur={handleChange}
/> />
</div> </div>
); );
@ -413,11 +421,12 @@ function AddInvoice() {
value={formData[field.name]} value={formData[field.name]}
onChange={handleChange} onChange={handleChange}
maxLength={14} // Set maxLength to 14 maxLength={14} // Set maxLength to 14
// onBlur={handleChange} // onBlur={handleChange}
/> />
</div> </div>
); );
case "date": case "date":
return ( return (
<div className="form-group"> <div className="form-group">
@ -441,6 +450,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">
@ -449,7 +459,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}
@ -458,8 +468,8 @@ function AddInvoice() {
onInput={(e) => { onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it // Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value e.target.value = e.target.value
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places) .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}} }}
/> />
@ -471,7 +481,7 @@ function AddInvoice() {
return ( return (
<div className="form-group"> <div className="form-group">
<select <select
className="input-select" className="form-control-borderless"
name="vendor_department" name="vendor_department"
value={formData.vendor_department} value={formData.vendor_department}
onChange={(e) => { onChange={(e) => {
@ -498,6 +508,7 @@ function AddInvoice() {
</option> </option>
))} ))}
</select> </select>
</div> </div>
); );
@ -571,47 +582,27 @@ function AddInvoice() {
) )
); );
case "radio": case "radio":
return ( return (
<div <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
className="d-flex align-items-center" <label className="me-4">{field.label}</label>
style={{
border: "1px solid #ACB4AA",
padding: "5px 5px",
width: "fit-content",
borderRadius: "40px",
marginBottom: "20px",
}}
>
<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" className="form-check me-4"
style={{ style={{
cursor: "pointer", cursor: 'pointer',
backgroundColor: backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
formData[field.name] === option.value padding: '5px 15px', // Add padding for better appearance
? "#4a5546" borderRadius: '20px', // Optional: Round the corners of the label
: "transparent",
padding: "5px 25px",
borderRadius: "20px",
}} }}
onClick={() => onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
handlePaymentMethodChange({
target: { name: field.name, value: option.value },
})
}
> >
<label <label
className="form-check-label" className="form-check-label"
style={{ style={{
fontWeight: "normal", fontWeight: 'normal',
color: color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
formData[field.name] === option.value
? "#ffffff"
: "#282e26",
}} }}
> >
{option.label} {option.label}
@ -619,59 +610,41 @@ function AddInvoice() {
</div> </div>
))} ))}
</div> </div>
</div> );
);
case "payment-method-options": case "payment-method-options":
return ( return (
formData.pay_method_status === "pay_now" && ( formData.pay_method_status === "pay_now" && (
<div <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
className="d-flex align-items-center" {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={{ style={{
border: "2px solid #ACB4AA", fontWeight: 'normal',
padding: "5px 5px", // Add padding to give space on both sides color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
width: "fit-content",
borderRadius: "40px",
marginBottom: "30px",
}} }}
> >
{paymentMethodOptions.map((option, index) => ( {option.label}
<div </label>
key={index} </div>
className="form-check " ))}
style={{ </div>
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">
@ -686,47 +659,46 @@ function AddInvoice() {
</div> </div>
); );
case "pay-bank-options": case "pay-bank-options":
return ( return (
(formData.pay_method === "cheque" || (formData.pay_method === "cheque" || formData.pay_method === "bank") && (
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">
<input <select
required required
type="text"
className="form-control-borderless" className="form-control-borderless"
name="cheque_no" name="bank"
placeholder="Cheque Number" value={formData.bank}
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
@ -737,7 +709,9 @@ function AddInvoice() {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
</div> </div>
) )
); );
@ -752,28 +726,28 @@ function AddInvoice() {
<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 Bill/Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === "/payInvoice" ? "active" : ""}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick("/payInvoice")} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Bill/Invoice Pay Invoice
</button> </button>
<button <button
className={`btn ${activeButton === "/atmDeposit" ? "active" : ""}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick("/atmDeposit")} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
<button <button
className={`btn ${activeButton === "/bankDeposit" ? "active" : ""}`} className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick("/bankDeposit")} onClick={() => handleLinkClick('/bankDeposit')}
> >
Bank Deposit Bank Deposit
</button> </button>
@ -784,37 +758,32 @@ function AddInvoice() {
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
border: "1px solid #EBEAF2", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);", borderRadius: "40px"
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 <div className="row mb-3" key={rowKey}>
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)}
</div> </div>
))} ))}
</div> </div>
))} ))}
{/* Prepaid Tax Field */} {/* Prepaid Tax Field */}
{formData.prepaid_tax && ( {formData.prepaid_tax && (
<div className="row "> <div className="row mb-3">
<div className="col-md-3"> <div className="col-md-6">
<div className="form-group"> <div className="form-group">
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
@ -826,47 +795,30 @@ function AddInvoice() {
onInput={(e) => { onInput={(e) => {
// Allow only numbers and one decimal point with two digits after it // Allow only numbers and one decimal point with two digits after it
e.target.value = e.target.value e.target.value = e.target.value
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Ensure only two decimal places .replace(/^(\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>
</div> </div>
</div> </div>
)} )}
<div className=""> <div className="">
{/* Action Buttons */} {/* Action Buttons */}
<div <div className="d-flex justify-content-end">
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={{ style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
border: " 1px solid #282e26",
borderRadius: "20px",
borderRadius: "40px",
width: "181px",
height: "45px",
}}
> >
Cancel Cancel
</button> </button>
<button <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
type="submit"
className="btn"
style={{
color: "white",
backgroundColor: "#282e26",
borderRadius: "40px",
width: "181px",
height: "45px",
}}
>
Save Save
</button> </button>
</div> </div>
@ -891,8 +843,9 @@ function AddInvoice() {
onVendorAdded={handleVendorAdded} onVendorAdded={handleVendorAdded}
/> />
</div> </div>
</div> </div>
); );
} }
export default AddInvoice; export default AddInvoice;

32
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 Bill/Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Bill/Invoice Pay Invoice
</button> </button>
<button <button
@ -189,13 +189,8 @@ function AtmDeposit() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className=" col-md-12 row mb-3" <div className=" col-md-12 row mb-3">
style={{ <div className="col-md-4 mb-3">
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"
@ -207,13 +202,13 @@ function AtmDeposit() {
</div> </div>
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<select <select
className="input-select" className="form-select custom-select"
id="bank_deposite_type" id="bank_deposite_type"
name="bank_deposite_type" name="bank_deposite_type"
value={formData.bank_deposite_type} value={formData.bank_deposite_type}
onChange={handleChange} onChange={handleChange}
> >
<option value="">Select Cash type</option> <option value="">Select a 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}
@ -221,14 +216,14 @@ function AtmDeposit() {
))} ))}
</select> </select>
</div> </div>
<div className="col-md-3 mb-4"> <div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
<div className="input-group" style={{ width: "100%" }}> <div className="input-group" style={{ width: "100%" }}>
{/* <span className="input-group-text" style={{ border: "none" }}> {/* <span className="input-group-text" style={{ border: "none" }}>
USD USD
</span> */} </span> */}
<input <input
type="number" type="number"
style={{ flex: 1, }} style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
className="form-control-borderless" className="form-control-borderless"
name="cash_amount" name="cash_amount"
placeholder="Amount" placeholder="Amount"
@ -244,7 +239,7 @@ function AtmDeposit() {
</div> </div>
</div> </div>
{/* <div className="mb-3 col-md-4"> <div className="mb-3 col-md-4">
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
@ -253,7 +248,7 @@ function AtmDeposit() {
onChange={handleChange} onChange={handleChange}
placeholder="Notes" placeholder="Notes"
/> />
</div> */} </div>
</div> </div>
<div className="col-md-3 row"> <div className="col-md-3 row">
@ -280,16 +275,16 @@ function AtmDeposit() {
<div className=""> <div className="">
<div className="d-flex justify-content-end" style={{ gap: "15px" }}> <div className="d-flex justify-content-end">
<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' , borderRadius: '40px' , width: "181px", height:"45px" }} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save Save
</button> </button>
</div> </div>
@ -302,7 +297,6 @@ function AtmDeposit() {
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} />

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

@ -156,44 +156,42 @@ 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 Bill/Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Bill/Invoice Pay Invoice
</button> </button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/bankDeposit')}
> >
ATM Deposit Bank Deposit
</button> </button>
</div>
<button </div>
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}>
@ -201,11 +199,8 @@ function BankDeposit() {
<div className="col-md-12 row " style={{ <div className="col-md-12 row ">
gap: "4%", <div className=" col-md-4">
marginLeft:"3px"
}}>
<div className=" col-md-3">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -215,30 +210,6 @@ function BankDeposit() {
required required
/> />
</div> </div>
<div className="mb-3 col-md-4">
<select
className="input-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
style={{ borderBottom: "1px solid #e4e5e7" }}
>
<option value="" enable>
Select Cash type
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div>
<div className="mb-3 col-md-4"> <div className="mb-3 col-md-4">
<select <select
className="form-control-borderless" className="form-control-borderless"
@ -255,33 +226,51 @@ 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
className="col-md-12" className="col-md-12 mb-12"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing gap: "50px", // Add gap for consistent spacing
// marginBottom:"30px",
}} }}
> >
<div <div
className="form-group col-3" className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1", // Allow the field to adjust in size flex: "1", // Allow the field to adjust in size
}} }}
> >
<div className="input-group"> <div className="input-group">
<input <input
type="text" type="text"
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }} style={{ border: "none", width: "100%" }}
className="form-control" className="form-control-borderless"
name="cash_amount" name="cash_amount"
placeholder="Cash Amount" placeholder="Cash Amount"
value={formData.cash_amount || ""} value={formData.cash_amount || ""}
@ -295,16 +284,16 @@ function BankDeposit() {
className="form-group " className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1", flex: "1",
}} }}
> >
<div className="input-group"> <div className="input-group">
<input <input
type="number" type="number"
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }} style={{ border: "none", width: "100%" }}
className="form-control-borderless" className="form-control-borderless"
name="cheque_amount" name="cheque_amount"
placeholder="Cheque Amount" placeholder="Cheque Amount"
@ -319,12 +308,12 @@ function BankDeposit() {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
border:"none", borderBottom: "2px solid #e4e5e7",
height: "50px", height: "50px",
flex: "1", flex: "1",
}} }}
> >
{/* <input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
name="note" name="note"
@ -335,22 +324,22 @@ function BankDeposit() {
border: "none", border: "none",
width: "100%", width: "100%",
}} }}
/> */} />
</div> </div>
</div> </div>
</div> </div>
<div className="d-flex justify-content-end" style={{ gap: "15px" }}> <div className="d-flex justify-content-end">
<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', borderRadius: '40px', width: "181px", height: "45px" }} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save Save
</button> </button>
</div> </div>

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

@ -309,124 +309,92 @@ const BankDepositTable = (props) => {
return ( return (
<div> <div>
<div
style={{
<div display: "flex",
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",
gap: "50px", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "flex-start",
marginBottom:"20px" width: "400px",
textAlign: "left",
}} }}
> >
{/* Invoice due this month */} <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<div $500
style={{ </p>
backgroundColor: "#fff8e6", <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
border: "1px solid #ffd700", Invoice due this month
borderRadius: "20px", </p>
padding: "16px 24px", </div>
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500
</p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */} {/* Last 7 days sale */}
<div <div
style={{ style={{
backgroundColor: "#e6ffee", backgroundColor: "#e6ffee",
border: "1px solid #00b300", 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: "385px", width: "400px",
height: "130px", textAlign: "left",
textAlign: "left", }}
}} >
> <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p $19,864,63,521
style={{ </p>
fontFamily: "Comfortaa", <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
fontStyle: "normal", Last 7 days sale
fontWeight: 700, </p>
fontSize: "48px", </div>
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */} {/* Expense this month */}
<div <div
style={{ style={{
backgroundColor: "#ffe6e6", backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d", border: "1px solid #ff4d4d",
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: "385px", width: "400px",
height: "130px", textAlign: "left",
textAlign: "left", }}
}} >
> <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p $0.00
style={{ </p>
fontFamily: "Comfortaa", <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
fontStyle: "normal", Expense this month
fontWeight: 700, </p>
fontSize: " 48px", </div>
lineHeight: "27px",
marginTop:"20px"
}}
>
$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" style={{ gap: "10px" }}> <div className="d-flex align-items-center mb-3">
{/* Search Bar */} {/* Search Bar */}
<div className="searchcontainer" > <div className="searchcontainer">
<div <div
className="input-group" className="input-group"
style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -521,10 +489,9 @@ const BankDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "40px", width: "130px",
height: "40px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -542,7 +509,6 @@ 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",
@ -588,7 +554,7 @@ const BankDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; &nbsp; Filter
</button> </button>
<ul <ul
@ -700,23 +666,18 @@ 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 style={{ <tr>
backgroundColor: '#282e26',
color: '#ffffff',
height: '30px', // Add height for row spacing
textAlign:"center"
}}>
{["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
key={header} key={header}
onClick={() => handleSort(header)} onClick={() => handleSort(header)}
style={{ style={{
paddingLeft: "50px", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff', color:'#ffffff',
textAlign: "left", textAlign: "start",
alignContent: "center", alignContent: "center",
}} }}
> >
@ -758,13 +719,13 @@ const BankDepositTable = (props) => {
{currentInvoices.length !== 0 ? {currentInvoices.length !== 0 ?
currentInvoices.map((invoice) => ( currentInvoices.map((invoice) => (
<tr key={invoice.id}> <tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "center" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.date} {invoice.date}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "center" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.bank_name} {invoice.bank_name}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "center" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}> <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type {invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() + ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
@ -772,8 +733,8 @@ const BankDepositTable = (props) => {
: "N/A"} : "N/A"}
</span> </span>
</td> </td>
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td> <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'center' }}> <td style={{ textAlign: 'left' }}>
<span style={getStatusStyle(invoice.transaction_type)}> <span style={getStatusStyle(invoice.transaction_type)}>
{invoice.transaction_type ? {invoice.transaction_type ?
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) : invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :

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

@ -2,7 +2,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
} }
.container { .container {
@ -10,20 +9,6 @@
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 */
} }
@ -33,27 +18,21 @@
} }
.button-groups { .button-groups {
display: flex; display: flex;
justify-content: space-between; /* Space between buttons */ margin-left: 35%;
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 */
width: auto; /* Fixed width */ background-color: #ffffff;
height: 60px; /* Fixed height */ width: auto;
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 44px; border-radius: 44px;
padding: 0 8px; /* Equal padding on left and right sides */ padding: 10px 20px; /* Equal padding on left and right sides */
} }
/* Active button styles */ /* Active button styles */
.btn.active { .btn.active {
background-color: #ffaf32; /* Yellow background */ background-color: #ffaf32; /* Yellow background */
border-radius: 27px; border-radius: 20px;
color: black; /* Black text */ color: black; /* Black text */
padding: 10px 20px; /* Ensure padding consistency for buttons */ }
}
.form-container { .form-container {
width: 1328px; width: 1328px;
@ -74,11 +53,11 @@
.form-control-borderless { .form-control-borderless {
display: block; display: block;
width: 100%; width: 100%;
padding: .375rem .75rem;
font-size: 16px; font-size: 1rem;
font-weight: bold; font-weight: 400;
line-height: 1.5;
color: #999999; color: #212529;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: none; border: none;
@ -119,26 +98,19 @@
.table th { .table th {
justify-content: center; justify-content: center;
height: 40px; height: 60px;
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: center; text-align: left;
vertical-align: middle; vertical-align: middle;
justify-content: center;
} }
.table tbody tr:hover { .table tbody tr:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
} }
.badge { .badge {
@ -154,8 +126,6 @@
padding: 10px; padding: 10px;
border-bottom: 2px solid #EBEAF2; border-bottom: 2px solid #EBEAF2;
background-color: #ffffff; background-color: #ffffff;
border-left: 2px solid #ebeaf2;
border-Right: 2px solid #ebeaf2;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -179,13 +149,7 @@
} }
.filterbutton { .filterbutton {
background: #FFFFFF; background-color: #f4f4f4;
border: 1px solid #DBDBDB;
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
gap:'20px'
} }
.dropdown-item { .dropdown-item {
@ -358,22 +322,3 @@ input[type="color"]:focus,
box-shadow: none; /* Remove any shadow */ box-shadow: none; /* Remove any shadow */
} }
/* for selct dropdown style --> dashboard // */
.input-select{
border: none;
border-bottom: 1px solid #ccc;
background-color: transparent;
color: #999999;
width: 100%;
outline: none;
font-size: 16px;
font-weight: bold;
margin-bottom: 35px;
}

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

@ -284,118 +284,86 @@ const InvoiceTable = ({ reloadData }) => {
return ( return (
<div> <div>
<div> <div
style={{
<div display: "flex",
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",
gap: "50px", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "flex-start",
marginBottom:"20px" width: "400px",
textAlign: "left",
}} }}
> >
{/* Invoice due this month */} <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<div $500
style={{ </p>
backgroundColor: "#fff8e6", <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
border: "1px solid #ffd700", Invoice due this month
borderRadius: "20px", </p>
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500
</p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,864
</p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00
</p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month
</p>
</div>
</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"}}>
@ -405,7 +373,7 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="input-group flexiblesearch" className="input-group flexiblesearch"
style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -507,8 +475,10 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
width: "40px", marginLeft: "10px",
height: "40px", backgroundColor: "#f4f4f4",
width: "130px",
height: "50px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -525,7 +495,6 @@ 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",
@ -536,7 +505,7 @@ const InvoiceTable = ({ reloadData }) => {
}} }}
> >
<FilterButton /> <FilterButton />
&nbsp; &nbsp; Filter
</button> </button>
<ul <ul
@ -651,13 +620,11 @@ const InvoiceTable = ({ reloadData }) => {
</div> </div>
{/* Table of Invoices */} {/* Table of Invoices */}
{/* <div className=""> <div className="">
<div className=""> */} <div className="">
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <thead>
<tr <tr>
>
{[ {[
"date", "date",
"vendor Name", "vendor Name",
@ -674,7 +641,7 @@ const InvoiceTable = ({ reloadData }) => {
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
textAlign: "center", textAlign: "start",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff' color:'#ffffff'
@ -709,24 +676,18 @@ const InvoiceTable = ({ reloadData }) => {
.join(" ")} .join(" ")}
</span> </span>
</td> </td>
<td <td>
style={{ <span style={getStatusStyle(invoice.status)}>
{invoice.status
.replace(/_/g, " ")
}} .split(" ")
.map(
> (word) =>
<span style={getStatusStyle(invoice.status)}> word.charAt(0).toUpperCase() + word.slice(1)
{invoice.status )
.replace(/_/g, " ") .join(" ")}
.split(" ") </span>
.map( </td>
(word) => word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</span>
</td>
<td> <td>
<div className="dropdown"> <div className="dropdown">
<button <button
@ -779,13 +740,12 @@ const InvoiceTable = ({ reloadData }) => {
)} )}
</tbody> </tbody>
</table> </table>
{renderPagination()}
</div> </div>
// </div> </div>
{renderPagination()}
// </div> </div>
); );
}; };
@ -809,75 +769,44 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
draft: { All: {
backgroundColor: "#D1D1EF", backgroundColor: "#4545DB",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
unpaid: {
backgroundColor: "#ff2024",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
}, },
paid: { paid: {
backgroundColor: "#198f51", backgroundColor: "#198f51",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
width: "130px", // Fixed width },
height: "30px", // Fixed height unpaid: {
fontSize: "14px", backgroundColor: "#ff2024",
textAlign: "center", width: "130px", // Set a fixed width
display: "flex", height: "30px", // Set a fixed height
justifyContent: "center", fontSize:"14px"
alignItems: "center",
}, },
partially_paid: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
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" }), ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
width: "130px", // Ensure consistent fixed width
height: "30px", // Ensure consistent fixed height
borderRadius: "5px", borderRadius: "5px",
padding: "5px 10px", padding: "5px 20px",
textAlign: "center", textAlign: "center",
display: "flex", // Flexbox for alignment display: "flex", // Use 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",

154
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: "cash", pay_method: "",
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 Bill/Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Bill/Invoice Pay Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
@ -344,16 +344,8 @@ function PayInvoice() {
</div> </div>
<div <div className="col-md-12 row" style={{ gap: "15%" }}>
className="col-md-12 row" <div className="mb-3 col-md-2" >
style={{
gap: "12%",
paddingLeft: "3%", // 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"
@ -365,16 +357,16 @@ function PayInvoice() {
<div className="mb-3 col-md-3"> <div className="mb-3 col-md-3">
<select <select
className="input-select" className="form-control-borderless"
name="vendor_department" name="vendor_department"
value={formData.vendor_department} value={formData.vendor_department}
onChange={(e) => { onChange={(e) => {
const selectedValue = e.target.value; const selectedValue = e.target.value;
if (selectedValue === "add-vendor") { if (selectedValue === "add-vendor") {
handleShow(); // Function to open modal handleShow(); // Modal ko open karne ke liye function
setFormData((prevData) => ({ setFormData((prevData) => ({
...prevData, ...prevData,
vendor_department: "", // Reset the field vendor_department: "", // Field ko reset karne ke liye
})); }));
} else { } else {
handleChange(e); // Existing handler for normal options handleChange(e); // Existing handler for normal options
@ -383,7 +375,6 @@ function PayInvoice() {
> >
<option value="">Select Vendor</option> <option value="">Select Vendor</option>
<option value="add-vendor">Add Vendor</option>{" "} <option value="add-vendor">Add Vendor</option>{" "}
{/* Add Vendor Option */} {/* Add Vendor Option */}
{vendors {vendors
.filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors .filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
@ -404,11 +395,25 @@ 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="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} > <div className="col-md-3">
<div className="col-md-3 " >
<input <input
name="amount" name="amount"
type="text" type="text"
@ -419,7 +424,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"
@ -478,8 +483,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"
@ -492,50 +497,48 @@ function PayInvoice() {
</div> */} </div> */}
</div>
<div className="md-col-12 " style={{ marginLeft: "3%", marginTop: "35px" }}>
<div
className="d-flex align-items-center"
style={{
border: '1px solid #ACB4AA',
padding: '5px',
width: "fit-content",
borderRadius: '40px',
}}
>
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
<div className="" key={method}>
<input
type="radio"
className="form-check-input"
name="pay_method"
value={method}
checked={formData.pay_method === method}
onChange={handleChange}
id={`pay_method_${method}`} // Unique ID for each radio input
style={{ display: 'none' }} // Hide the actual radio button
/>
<label
className="form-check-label cursor-pointer"
htmlFor={`pay_method_${method}`} // Link label to the input
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
style={{
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
>
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
</label>
</div>
))}
</div> </div>
<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-4" style={{ marginLeft: "40px" }} > <div className="col-md-12 mt-3" >
{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 */}
@ -570,7 +573,16 @@ 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">
@ -615,16 +627,16 @@ function PayInvoice() {
</div> </div>
)} )}
</div> </div>
<div className="d-flex justify-content-end" style={{ gap: "15px" }}> <div className="d-flex justify-content-end">
<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', borderRadius: '40px', width: "181px", height: "45px" }} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save Save
</button> </button>
</div> </div>

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

@ -312,15 +312,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return ( return (
<div> <div>
<ToastContainer /> <ToastContainer />
<div
<div
style={{ style={{
display: "flex", display: "flex",
gap: "50px", gap: "16px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
marginBottom:"20px" margin: "20px",
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -329,29 +327,19 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
backgroundColor: "#fff8e6", backgroundColor: "#fff8e6",
border: "1px solid #ffd700", border: "1px solid #ffd700",
borderRadius: "20px", borderRadius: "20px",
padding: "24px", padding: "16px 24px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "385px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -367,24 +355,14 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "385px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{ $19,864,63,521
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -400,36 +378,27 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "390px", width: "400px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p <p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}> <p style={{ fontSize: "14px", color: "#555", margin: "4px 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: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
> >
<span <span
className="input-group-text" className="input-group-text"
@ -526,10 +495,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
// marginLeft: "10px", marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "40px", width: "130px",
height: "40px", height: "50px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -547,7 +516,6 @@ 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",
@ -593,7 +561,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; &nbsp; Filter
</button> </button>
<ul <ul
@ -681,7 +649,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" }}
@ -705,24 +673,13 @@ 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
}}
>
{[ {[
"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",
@ -735,9 +692,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
cursor: "pointer", cursor: "pointer",
backgroundColor: '#282e26', backgroundColor: '#282e26',
color: '#ffffff', color: '#ffffff',
textAlign: "center", textAlign: "start",
alignContent: "center", alignContent: "center",
// Add a border for separation
}} }}
> >
{header {header
@ -749,7 +705,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div className="dropdown"> <div className="dropdown">
<ul className="dropdown-menu" aria-labelledby="actionDropdown"> <ul className="dropdown-menu" aria-labelledby="actionDropdown">
{/* <li> {/* <li>
<a <a
className="dropdown-item" className="dropdown-item"
@ -797,9 +752,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 &&
@ -813,9 +768,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
.join(" ")} .join(" ")}
</span> </span>
</td> </td>
<td onClick={() => handleCellClick(invoice, "status")} <td onClick={() => handleCellClick(invoice, "status")}>
>
<span style={getStatusStyle(invoice.status)}> <span style={getStatusStyle(invoice.status)}>
{invoice.status && {invoice.status &&
invoice.status invoice.status
@ -913,71 +866,43 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
draft: { All: {
backgroundColor: "#D1D1EF", backgroundColor: "#4545DB",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
unpaid: {
backgroundColor: "#ff2024",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
}, },
paid: { paid: {
backgroundColor: "#198f51", backgroundColor: "#198f51",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
width: "130px", // Fixed width },
height: "30px", // Fixed height unpaid: {
fontSize: "14px", backgroundColor: "#ff2024",
textAlign: "center", width: "130px", // Set a fixed width
display: "flex", height: "30px", // Set a fixed height
justifyContent: "center", fontSize:"14px"
alignItems: "center",
}, },
partially_paid: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
color: "#fff", width: "130px", // Set a fixed width
borderRadius: "5px", height: "30px", // Set a fixed height
padding: "5px 10px", fontSize:"14px"
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" }), ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
width: "130px", // Ensure consistent fixed width
height: "30px", // Ensure consistent fixed height
borderRadius: "5px", borderRadius: "5px",
padding: "5px 10px", padding: "5px 20px",
textAlign: "center",
display: "flex", // Use flexbox for alignment
justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically
color: "#fff", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",

248
src/components/Pages/AppPAges/Expense/expense.js
View File

@ -626,143 +626,89 @@ export default function Expense() {
return ( return (
<div className="main-container"> <div className="main-container">
<div className="d-flex p-2"> <div className="d-flex p-2 ">
<div className="expensecontainer d-flex flex-column pd-2"> <div className="expensecontainer d-flex flex-column pd-2 ">
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}> <div
<button className="btn cus d-flex align-items-center" onClick={toggleModal}> className="d-flex align-items-center mb-3"
style={{
justifyContent: "space-between",
gap: "10px",
marginBottom: "10px",
}}
>
{/* Title on the left */}
<h3 className="mb-1" style={{ margin: "0" }}>Expense</h3>
+ Add Invoice {/* Buttons on the right */}
<img <div className="d-flex align-items-center" style={{ gap: "10px" }}>
src={invoiceIcon}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }} <button
/> style={{
</button> backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
<button style={{ width: "auto",
backgroundColor: "#4A5546", height: "42px",
boxShadow: "none", padding: "8px 12px",
outline: "none", fontSize: "14px",
width: "auto", border: "none",
height: "42px", borderRadius: "10px",
padding: "8px 12px", color: "#F4FFEE",
fontSize: "16px", cursor: "pointer",
border: "none", }}
borderRadius: "10px", >
color: "#F4FFEE", Add Expense Type
cursor: "pointer", <img
}}> src={expensetype}
alt="Expense Type Icon"
+ Add New Vendor style={{ width: "20px", height: "20px", marginLeft: "8px" }}
<img />
src={vendor} </button>
alt="Invoice Icon" <button
style={{ width: "20px", height: "20px", marginLeft: "8px" }} style={{
/> backgroundColor: "#4A5546",
</button> boxShadow: "none",
<button style={{ outline: "none",
backgroundColor: "#4A5546", width: "auto",
boxShadow: "none", height: "42px",
outline: "none", padding: "8px 12px",
width: "auto", fontSize: "14px",
height: "42px", border: "none",
padding: "8px 12px", borderRadius: "10px",
fontSize: "16px", color: "#F4FFEE",
border: "none", cursor: "pointer",
borderRadius: "10px", }}
color: "#F4FFEE", >
cursor: "pointer", Add New Vendor
}} <img
> src={vendor}
+ Add Expense Type alt="Vendor Icon"
<img style={{ width: "20px", height: "20px", marginLeft: "8px" }}
src={expensetype} />
alt="Invoice Icon" </button>
style={{ width: "20px", height: "20px", marginLeft: "8px" }} <button
/> className="btn cus d-flex align-items-center" onClick={toggleModal}
</button> style={{
<div width: "180px",
style={{ height: "42px",
display: "flex",
gap: "16px", justifyContent:"center",
justifyContent: "center", textAlign:'center',
alignItems: "center",
margin: "20px", }}
}} >
> Add Invoice
{/* Invoice due this month */} <img
<div src={invoiceIcon}
style={{ alt="Invoice Icon"
backgroundColor: "#fff8e6", style={{ width: "20px", height: "20px", marginLeft: "8px" }}
border: "1px solid #ffd700", />
borderRadius: "8px", </button>
padding: "16px 24px", </div>
display: "flex", </div>
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div>
</div>
@ -796,11 +742,11 @@ export default function Expense() {
className="modal-container" className="modal-container"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
width: "1200px", width: "1800px",
backgroundColor: "white", backgroundColor: "white",
margin: "100px auto", margin: "100px auto",
padding: "20px", // padding: "2px",
borderRadius: "8px", borderRadius: "30px",
position: "relative", position: "relative",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
}} }}
@ -830,8 +776,8 @@ export default function Expense() {
</div> </div>
<div className="modal-body"> <div className="modal-body">
<form> <form>
<div className="form-row form-group col-md-12 position-relative d-flex"> <div className="form-row form-group col-md-12 position-relative d-flex gap-3">
<div className="col-md-3" style={{ paddingRight: "10px" }}> <div className="col-md-3 " style={{ paddingRight: "10px" }}>
<input <input
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
@ -872,7 +818,7 @@ export default function Expense() {
/> />
</div> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-5" style={{ paddingRight: "10px" }}>
<select <select
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
@ -910,7 +856,7 @@ export default function Expense() {
</div> </div>
</div> </div>
<div className="d-flex col-md-12"> <div className="d-flex align-items-center justify-content-center col-md-12 gap-3">
<div className="col-md-3" style={{ paddingRight: "10px" }}> <div className="col-md-3" style={{ paddingRight: "10px" }}>
<select <select
@ -939,7 +885,7 @@ export default function Expense() {
</div> </div>
<div <div
className="form-row d-flex col-md-3 " className="form-row d-flex col-md-3"
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
border: "none", // Remove all borders border: "none", // Remove all borders
@ -997,7 +943,7 @@ export default function Expense() {
padding: '10px 10px', padding: '10px 10px',
width: 'fit-content', width: 'fit-content',
borderRadius: '40px', borderRadius: '40px',
// marginTop:'20px', marginTop:'10px',
display: 'flex', // Use flexbox display: 'flex', // Use flexbox
gap: '10px', // Add spacing between the options gap: '10px', // Add spacing between the options
}} }}
@ -1018,7 +964,7 @@ export default function Expense() {
style={{ style={{
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent', backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000', color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
padding: '5px 10px', padding: '5px 5px',
borderRadius: '20px', borderRadius: '20px',
}} }}
@ -1042,7 +988,7 @@ export default function Expense() {
style={{ style={{
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent', backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000', color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
padding: '5px 10px', padding: '5px 5px',
borderRadius: '20px', borderRadius: '20px',
}} }}
@ -1066,7 +1012,7 @@ export default function Expense() {
style={{ style={{
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent', backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000', color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
padding: '5px 10px', padding: '5px 5px',
borderRadius: '20px', borderRadius: '20px',
}} }}
@ -1084,7 +1030,7 @@ export default function Expense() {
className="d-flex col-md-6 mb-3" className="d-flex col-md-6 mb-3"
style={{ style={{
border: '2px solid #ACB4AA', border: '2px solid #ACB4AA',
padding: '10px 10px', padding: '5px 5px',
width: 'fit-content', width: 'fit-content',
borderRadius: '40px', borderRadius: '40px',
display: 'flex', // Use flexbox for inner items display: 'flex', // Use flexbox for inner items
@ -1104,7 +1050,7 @@ export default function Expense() {
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent", backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
color: formData.pay_method === method.value ? "white" : "black", color: formData.pay_method === method.value ? "white" : "black",
padding: '5px 10px', // Add padding for better appearance padding: '5px 5px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label borderRadius: '20px', // Optional: Round the corners of the label
cursor: "pointer", cursor: "pointer",
}} }}
@ -1134,7 +1080,7 @@ export default function Expense() {
onChange={handleChange} onChange={handleChange}
style={{ style={{
backgroundColor: "#fff", backgroundColor: "#fff",
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

2
src/components/Pages/AppPAges/GeneralLedger/GeneralLedger.css
View File

@ -13,4 +13,6 @@
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
color: #000; color: #000;
text-align: center; /* Center the text */
width: 100%; /* Ensure it spans the full width */
} }

163
src/components/Pages/AppPAges/GeneralLedger/GeneralLedgerATM.js
View File

@ -6,6 +6,9 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../.././../utils/secure-route/AuthContext"; import AuthContext from "../../.././../utils/secure-route/AuthContext";
import SettingTable from "../ManageSettings/SettingTable"; import SettingTable from "../ManageSettings/SettingTable";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import atmdeposite from "../../../../assets/Image/Atm Deposite.png"
export default function GeneralLedgerATM() { export default function GeneralLedgerATM() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@ -249,9 +252,21 @@ export default function GeneralLedgerATM() {
<ToastContainer /> <ToastContainer />
<div className="due-days"> <div className="due-days">
<div className="header-row mb-4"> <div className="header-row mb-4">
<div className="setting-title">ATM Deposit</div> <div className="setting-title" style={{marginLeft:"8px"}}>ATM Deposit</div>
<button className="gas-invoice-add-button" onClick={toggleModal}> <button className="btn cus d-flex align-items-center" style={{
+ Add ATM Deposit width: "250px",
height: "48px",
justifyContent:"center"
// justifyContent:"center",
// textAlign:'center',
}} onClick={toggleModal}>
Add ATM Deposit
<img
src={atmdeposite}
alt="Atm Deposite Icon"
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
/>
</button> </button>
</div> </div>
@ -275,7 +290,7 @@ export default function GeneralLedgerATM() {
backgroundColor: "white", backgroundColor: "white",
margin: "100px auto", margin: "100px auto",
// padding: "20px", // padding: "20px",
borderRadius: "8px", borderRadius: "40px",
position: "relative", position: "relative",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
}} }}
@ -306,28 +321,80 @@ export default function GeneralLedgerATM() {
</div> </div>
<div className="modal-body"> <div className="modal-body">
<form onSubmit={handleAtmDeposit}> <form onSubmit={handleAtmDeposit}>
<div className="form-row form-group col-md-5 position-relative"> <div className="form-row">
<input {/* Date Input Field */}
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
height: "52px", {/* Amount Input Field */}
}} <div className="form-group col-12">
type="date" <div
className="form-control" className="d-flex gap-3 align-items-center"
name="date" style={{ display: "flex", justifyContent: "space-between" }}
value={formData.date} >
onChange={handleDateChange} {/* Date Input */}
required <input
/> style={{
</div> backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
flex: 1, // Flex-grow to manage space
}}
type="date"
className="form-control"
name="date"
value={formData.date}
onChange={handleDateChange}
required
/>
{/* Amount Input */}
<div
className="input-group"
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
flex: 1, // Flex-grow to manage space
}}
>
<input
type="text"
name="amount"
className="form-control sampletext"
value={formData.amount}
onChange={handleChange}
placeholder="Amount"
aria-label="Amount"
aria-describedby="addon-wrapping"
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
/>
</div>
</div>
</div>
<div className="d-flex col-md-12"> <div className="d-flex col-md-12">
<div className="form-row d-flex col-md-6"> <div className="form-row d-flex col-md-6">
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control" className="form-control"
@ -337,7 +404,7 @@ export default function GeneralLedgerATM() {
onChange={handleChange} onChange={handleChange}
required required
> >
<option value="">Type</option> <option value="">Cash Type</option>
<option value="Business cash">Business Cash</option> <option value="Business cash">Business Cash</option>
<option value="Gas cash">Gas Cash</option> <option value="Gas cash">Gas Cash</option>
<option value="Lottery cash">Lottery Cash</option> <option value="Lottery cash">Lottery Cash</option>
@ -499,6 +566,7 @@ export default function GeneralLedgerATM() {
)} )}
</div> </div>
</div> </div>
)} )}
<div className="form-row d-flex col-md-12"> <div className="form-row d-flex col-md-12">
<textarea <textarea
@ -513,56 +581,7 @@ export default function GeneralLedgerATM() {
></textarea> ></textarea>
</div> </div>
<div className="form-row d-flex col-md-6 ">
<div class="containercolor">
<div
class="input-group col-md-6 p-2 mt-2"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
height: "52px",
border: "1px lightgray solid",
}}
>
<div
class="input-group-prepend"
style={{
background: "#F5F5F5",
height: "100%",
borderRadius: "10px 0 0 10px",
display: "flex",
alignItems: "center",
}}
>
<span
class="input-group-text prefixtext"
style={{
border: "none",
fontSize: "14px",
}}
>
USD
</span>
</div>
<input
type="text"
name="amount"
className="form-control sampletext"
value={formData.amount}
onChange={handleChange}
placeholder="Amount"
aria-label="Username"
aria-describedby="addon-wrapping"
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
/>
</div>
</div>
</div> </div>
<div className="modal-footer" style={{ border: "none" }}> <div className="modal-footer" style={{ border: "none" }}>
<button <button

16
src/components/Pages/AppPAges/GeneralLedger/GeneralLedgerBank.js
View File

@ -7,6 +7,8 @@ import AuthContext from "../../.././../utils/secure-route/AuthContext";
import SettingTable from "../ManageSettings/SettingTable"; import SettingTable from "../ManageSettings/SettingTable";
import "./GeneralLedger.css"; import "./GeneralLedger.css";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import bankdeposite from '../../../../assets/Image/Bank Deposite .png'
export default function GeneralLedgerBank() { export default function GeneralLedgerBank() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@ -275,11 +277,19 @@ export default function GeneralLedgerBank() {
<div className="header-row mb-4"> <div className="header-row mb-4">
<div className="setting-title">Bank Deposit</div> <div className="setting-title">Bank Deposit</div>
<button <button
className="gas-invoice-add-button-bank-deposit" className="btn cus d-flex align-items-center"
onClick={openAddModal} onClick={openAddModal}
style={{ Width: "200px" }} style={{ width: "250px",
height: "48px",
justifyContent:"center" }}
> >
+ Add Bank Deposit Add Bank Deposit
<img
src={bankdeposite}
alt="Bank Deposite Icon"
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
/>
</button> </button>
</div> </div>

15
src/components/Pages/AppPAges/GeneralLedger/GeneralLedgerOtherIncome.js
View File

@ -8,7 +8,7 @@ import AuthContext from "../../.././../utils/secure-route/AuthContext";
import SettingTable from "../ManageSettings/SettingTable"; import SettingTable from "../ManageSettings/SettingTable";
import "./GeneralLedger.css"; import "./GeneralLedger.css";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import otherincome from '../../../../assets/Image/other income.png'
export default function GeneralLedgerOtherIncome() { export default function GeneralLedgerOtherIncome() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@ -300,11 +300,18 @@ export default function GeneralLedgerOtherIncome() {
<div className="header-row mb-4"> <div className="header-row mb-4">
<div className="setting-title">Other Income</div> <div className="setting-title">Other Income</div>
<button <button
className="gas-invoice-add-button-bank-deposit" className="btn cus d-flex align-items-center"
onClick={handleAddOtherIncome} onClick={handleAddOtherIncome}
style={{ Width: "200px" }} style={{ width: "250px",
height: "48px",
justifyContent:"center" }}
> >
+ Add Other Income Add Other Income
<img
src={otherincome}
alt="Bank Deposite Icon"
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
/>
</button> </button>
</div> </div>

17
src/components/Pages/AppPAges/GeneralLedger/GeneralLedgerSalesTax.js
View File

@ -4,6 +4,10 @@ import SettingTable from "../ManageSettings/SettingTable";
import useApi from "../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../.././../utils/secure-route/AuthContext"; import AuthContext from "../../.././../utils/secure-route/AuthContext";
import { toast,ToastContainer } from "react-toastify"; import { toast,ToastContainer } from "react-toastify";
import prepaid from '../../../../assets/Image/prepaid.png'
export default function GeneralLedgerSalesTax() { export default function GeneralLedgerSalesTax() {
// const [billDate, setBillDate] = useState("2024-09-20"); // Example default date // const [billDate, setBillDate] = useState("2024-09-20"); // Example default date
// const dateInputRef = useRef(null); // const dateInputRef = useRef(null);
@ -126,9 +130,18 @@ export default function GeneralLedgerSalesTax() {
<div className="expensecontainer d-flex flex-column pd-2"> <div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex justify-content-between align-items-center mb-3">
<h3 className="mb-1">Sales Tax</h3> <h3 className="mb-1">Sales Tax</h3>
<button className="btn btn-primary cus" onClick={toggleModal}> <button className="btn cus d-flex align-items-center"
style={{ width: "250px",
height: "48px",
justifyContent:"center" }}
onClick={toggleModal}>
{" "} {" "}
+ Add Prepaid Tax Add Prepaid Tax
<img
src={prepaid}
alt="Bank Deposite Icon"
style={{ width: "30px", height: "30px", marginLeft: "18px" }}
/>
</button> </button>
</div> </div>

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

@ -206,7 +206,7 @@ const PayrollTable = ({
<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
type="text" type="text"
@ -241,88 +241,67 @@ const PayrollTable = ({
</button> </button>
{/* <button className="btn custbtn2" type="submit">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ marginRight: "3px" }}
>
<g opacity="0.8">
<path
d="M19 3H5C3.586 3 2.879 3 2.44 3.412C2.001 3.824 2 4.488 2 5.815V6.505C2 7.542 2 8.061 2.26 8.491C2.52 8.921 2.993 9.189 3.942 9.723L6.855 11.363C7.491 11.721 7.81 11.9 8.038 12.098C8.512 12.509 8.804 12.993 8.936 13.588C9 13.872 9 14.206 9 14.873V17.543C9 18.452 9 18.907 9.252 19.261C9.504 19.616 9.952 19.791 10.846 20.141C12.725 20.875 13.664 21.242 14.332 20.824C15 20.406 15 19.452 15 17.542V14.872C15 14.206 15 13.872 15.064 13.587C15.1896 13.0042 15.5059 12.4798 15.963 12.097C16.19 11.9 16.509 11.721 17.145 11.362L20.058 9.722C21.006 9.189 21.481 8.922 21.74 8.492C22 8.062 22 7.542 22 6.504V5.814C22 4.488 22 3.824 21.56 3.412C21.122 3 20.415 3 19 3Z"
stroke="white"
strokeWidth="1.5"
/>
</g>
</svg>
Filter
</button> */}
</div> </div>
<div style={{ marginRight: "58%" }}> <div style={{ marginRight: "1%" }}>
<div <div
className="expense-search d-flex align-items-center" className="expense-search align-items-center"
style={{
style={{ display: "flex",
display: "flex", alignItems: "center",
alignItems: "center", backgroundColor: "#FFFFFF",
backgroundColor: "#FFFFFF", border: "1px solid #DBDBDB",
border: "1px solid #DBDBDB", borderRadius: "10px",
borderRadius: "10px", cursor: "pointer",
// boxSizing: "border-box", width: "200px",
cursor: "pointer",
}}
width: "170px", >
gap: "10px", <span
}} style={{
> fontFamily: "'Comfortaa'",
<span fontStyle: "normal",
style={{ fontWeight: "400",
fontFamily: "'Comfortaa'", fontSize: "14px", // Compact text
fontStyle: "normal", color: "#000000",
fontWeight: "400", marginLeft:"10px"
fontSize: "16px", }}
padding: "5px", >
color: "#000000", Show Rows:
}} </span>
> <select
Show Rows: name="option"
</span> id="pageSelect"
<select className="selectoptions"
name="option" style={{
id="pageSelect" backgroundColor: "#282E26", // Match background color
className="selectoptions" color: "#FFFFFF", // White text color
style={{ fontFamily: "'Comfortaa'",
backgroundColor: "#282E26", fontStyle: "normal",
borderRadius: "0px 10px 10px 0px", fontWeight: "700",
color: "#F4FFEE", fontSize: "14px",
fontFamily: "'Comfortaa'", lineHeight: "16px",
fontStyle: "normal", padding: "4px 10px", // Adjust padding for the dropdown
fontWeight: "700", border: "none", // No border
fontSize: "16px", borderRadius: "0 10px 10px 0", // Rounded on the right side only
lineHeight: "18px", cursor: "pointer",
padding: "5px 8px", marginLeft: "auto", // Push to the right
border: "none", }}
cursor: "pointer", value={rowsPerPage}
}} onChange={(e) => {
value={rowsPerPage} setRowsPerPage(Number(e.target.value));
onChange={(e) => { setCurrentPage(1); // Reset to the first page on change
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={5}>5</option> <option value={15}>15</option>
<option value={10}>10</option> <option value={20}>20</option>
<option value={15}>15</option> </select>
<option value={20}>20</option> </div>
</select>
</div>
</div>
</div>
</div> </div>
<table className="data-table custom-table "> <table className="data-table custom-table ">

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

@ -132,7 +132,9 @@ function ManageDepartments() {
}} }}
required required
/> />
<button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}> <button className="btn d-flex align-items-center"
style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
onClick={handleSaveDepartment}>
{editDepartmentId ? "Update Department" : " + Add Department"} {editDepartmentId ? "Update Department" : " + Add Department"}
</button> </button>
</div> </div>

172
src/components/Pages/AppPAges/ManageSettings/ManageExpenseType.js
View File

@ -1,6 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useContext } from "react"; import React, { useState, useEffect, useContext } from "react";
import ReusableModal from "./ReusableModal";
import useApi from "../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../utils/secure-route/AuthContext";
import "./Settings.css"; import "./Settings.css";
@ -8,17 +7,14 @@ import SettingTable from "./SettingTable";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { toast, ToastContainer } from "react-toastify"; import { toast, ToastContainer } from "react-toastify";
function ManageExpenseType() { function ManageExpenseType() {
let { user } = useContext(AuthContext); let { user } = useContext(AuthContext);
const storeId = user.store; const storeId = user.store;
const [showModal, setShowModal] = useState(false);
const [isEditMode, setIsEditMode] = useState(false);
const [selectedExpenseType, setSelectedExpenseType] = useState(null);
const [expenseType, setExpenseType] = useState(""); const [expenseType, setExpenseType] = useState("");
const [expenseTypes, setExpenseTypes] = useState([]); const [expenseTypes, setExpenseTypes] = useState([]);
const [selectedExpenseTypeId, setSelectedExpenseTypeId] = useState(null); // Store the ID of the currently selected expense type
const { Get, Post, Put, Delete } = useApi(); const { Get, Post, Put, Delete } = useApi();
useEffect(() => { useEffect(() => {
const fetchExpenseTypes = async () => { const fetchExpenseTypes = async () => {
try { try {
@ -30,73 +26,56 @@ function ManageExpenseType() {
}; };
fetchExpenseTypes(); fetchExpenseTypes();
}, []); }, []);
const handleShow = () => {
setShowModal(true); const handleAddNew = () => {
setIsEditMode(false);
setSelectedExpenseType(null);
setExpenseType(""); setExpenseType("");
setSelectedExpenseTypeId(null); // Reset the selected ID
}; };
const handleEdit = (expenseType) => { const handleEdit = (expenseType) => {
setShowModal(true);
setIsEditMode(true);
setSelectedExpenseType(expenseType);
setExpenseType(expenseType.title); setExpenseType(expenseType.title);
setSelectedExpenseTypeId(expenseType.id); // Store the ID of the selected expense type
}; };
const handleClose = () => {
setShowModal(false);
setIsEditMode(false);
setSelectedExpenseType(null);
setExpenseType("");
};
const handleSave = async () => { const handleSave = async () => {
if (expenseType) { if (expenseType) {
try { try {
if (isEditMode && selectedExpenseType) { if (selectedExpenseTypeId) {
// Update existing expense type // Update existing expense type
const response = await Put( const response = await Put("vendorDepartmentServiceData", selectedExpenseTypeId, {
"vendorDepartmentServiceData", title: expenseType,
selectedExpenseType.id,
{ title: expenseType, store: storeId, type: "expense type" } // Send the data with store and type
);
if (response.status === 200) {
setExpenseTypes(
expenseTypes.map((et) =>
et.id === selectedExpenseType.id
? { ...et, title: expenseType }
: et
)
);
toast.success("Expense type updated successfully!");
} else {
console.error("Error updating expense type:", response.data);
toast.error("Error updating expense type: " + response.data);
}
} else {
// Add new expense type
const response = await Post("vendorDepartmentServiceData", {
store: storeId, store: storeId,
type: "expense type", type: "expense type",
title: expenseType,
}); });
if (response.status === 201) { if (response.status === 200) {
setExpenseTypes([...expenseTypes, response.data]); // Update the state with the edited expense type
setExpenseTypes(expenseTypes.map((et) =>
et.id === selectedExpenseTypeId ? { ...et, title: expenseType } : et
));
toast.success("Expense type updated successfully!");
}
} else {
// Add a new expense type
const response = await Post("vendorDepartmentServiceData", {
title: expenseType,
store: storeId,
type: "expense type",
});
if (response.status === 201) { // Assuming a 201 status code for successful creation
setExpenseTypes([...expenseTypes, response.data]); // Assuming response.data returns the new expense type
toast.success("Expense type added successfully!"); toast.success("Expense type added successfully!");
} else {
console.error("Error saving expense type:", response.data);
toast.error("Error saving expense type: " + response.data);
} }
} }
handleClose(); handleAddNew(); // Reset after saving (adding or updating)
} catch (error) { } catch (error) {
toast.error( toast.error("Error saving expense type: " + (error.response ? error.response.data : error.message));
isEditMode ? "Error updating expense type: " (error.response ? error.response.data : error.message) :
"Error saving expense type: " + (error.response ? error.response.data : error.message)
);
} }
} else { } else {
toast.warn("Expense type is required"); toast.warn("Expense type is required");
} }
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
const result = await Swal.fire({ const result = await Swal.fire({
title: "Are you sure?", title: "Are you sure?",
@ -106,10 +85,9 @@ function ManageExpenseType() {
confirmButtonColor: "#d33", confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6", cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!", confirmButtonText: "Yes, delete it!",
}); });
// Check if the user clicked the confirm button if (!result.isConfirmed) return; // Exit if the user cancels
if (!result.isConfirmed) return; // Exit if the user cancels
try { try {
await Delete("vendorDepartmentServiceData", id); await Delete("vendorDepartmentServiceData", id);
setExpenseTypes(expenseTypes.filter((et) => et.id !== id)); setExpenseTypes(expenseTypes.filter((et) => et.id !== id));
@ -118,41 +96,16 @@ function ManageExpenseType() {
toast.error("Error deleting expense type: " + (error.response ? error.response.data : error.message)); toast.error("Error deleting expense type: " + (error.response ? error.response.data : error.message));
} }
}; };
const data = expenseTypes.filter((et) => et.type === "expense type"); const data = expenseTypes.filter((et) => et.type === "expense type");
const columns = [{ header: "Department / Expense Type", field: "title" }]; const columns = [{ header: "Department / Expense Type", field: "title" }];
return ( return (
<> <>
<div className="due-days"> <div className="" style={{ marginTop: "5%" }}>
<div className="header-row"> <div className="department-container">
<div className="setting-title">Manage Expense Type</div> <div className="input-container">
<div className="btn-position"> <div className="input-row">
<button className="vendor-add-button" onClick={handleShow}>
+ Add Expense Type
</button>
</div>
</div>
<SettingTable
data={data}
showFooter={true}
columns={columns}
showAction={true}
onEdit={handleEdit}
onDelete={handleDelete}
/>
<ReusableModal
show={showModal}
handleClose={handleClose}
title={isEditMode ? "Edit Expense Type" : "Add Expense Type"}
width="697px"
height="171px"
>
<form
onSubmit={(e) => {
e.preventDefault();
handleSave();
}}
>
<div className="form-group d-flex align-items-center ">
<input <input
type="text" type="text"
id="expenseTypeName" id="expenseTypeName"
@ -160,33 +113,40 @@ function ManageExpenseType() {
placeholder="Expense Type" placeholder="Expense Type"
value={expenseType} value={expenseType}
onChange={(e) => setExpenseType(e.target.value)} onChange={(e) => setExpenseType(e.target.value)}
style={{ width: "483px", marginRight: "10px" }} style={{ width: "483px", marginRight: "10px" ,
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/> />
<button <button
type="submit" type="button" // Prevent form submission
style={{ className="btn d-flex align-items-center"
padding: "6px 8px", style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
backgroundColor: "#4545db",
color: "white", onClick={handleSave} // Call handleSave on button click
border: "none",
borderRadius: "40px",
cursor: "pointer",
width: "103px",
height: "42px",
fontSize: "18px",
marginLeft:"20px",
isEditMode
}}
> >
{isEditMode ? "Update" : "Submit"} {selectedExpenseTypeId ? "Update Expense" : "Add Expense Type"}
</button> </button>
</div> </div>
</form> </div>
</ReusableModal> </div>
<ToastContainer/> </div>
<div className="due-days">
<SettingTable
data={data}
showFooter={true}
columns={columns}
showAction={true}
onEdit={handleEdit} // Pass handleEdit to SettingTable
onDelete={handleDelete}
/>
<ToastContainer />
</div> </div>
</> </>
); );
} }
export default ManageExpenseType; export default ManageExpenseType;

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

@ -280,10 +280,10 @@ const ManageSettings = () => {
confirmButtonColor: "#d33", confirmButtonColor: "#d33",
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) return; // Exit if the user cancels if (!result.isConfirmed) return; // Exit if the user cancels
try { try {
await Delete("bank", bankId); await Delete("bank", bankId);
@ -345,10 +345,10 @@ const ManageSettings = () => {
confirmButtonColor: "#d33", confirmButtonColor: "#d33",
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) return; // Exit if the user cancels if (!result.isConfirmed) return; // Exit if the user cancels
try { try {
await Delete("dueDaysData", dayId); await Delete("dueDaysData", dayId);
setDueDaysList((prevList) => prevList.filter((day) => day.id !== dayId)); setDueDaysList((prevList) => prevList.filter((day) => day.id !== dayId));
@ -413,23 +413,13 @@ const ManageSettings = () => {
<div className="card"> <div className="card">
<div className="card-body"> <div className="card-body">
<p className="question-text">{setting.question}</p> <p className="question-text">{setting.question}</p>
<CustomSwitch
setting={setting}
isActive={
setting.id === 13 ||
setting.id === 14 ||
checkedStates[setting.id]
}
handleSwitchChange={handleSwitchChange}
disabled={setting.id === 13 || setting.id === 14} // Disable for IDs 13 and 14
/>
</div> </div>
</div> </div>
</div> </div>
))} ))}
<div className="row setting-manage"> <div className="row setting-manage">
{/* First Dropdown */}
<div className="col-md-6"> <div className="col-md-6">
{isDropdownVisible && ( {isDropdownVisible && (
<select <select
@ -442,7 +432,9 @@ const ManageSettings = () => {
</select> </select>
)} )}
</div> </div>
<div className="col-md-6 mb-3">
{/* Second Dropdown */}
<div className="col-md-6">
{isDropdownVisible && ( {isDropdownVisible && (
<select <select
className="form-select mt-3" className="form-select mt-3"
@ -450,34 +442,32 @@ const ManageSettings = () => {
value={selectedLotteryRegister} value={selectedLotteryRegister}
onChange={handleLotteryRegisterChange} onChange={handleLotteryRegisterChange}
> >
{renderOptions( {renderOptions(selectedLotteryRegister, numberOfLotteryRegisters)}
selectedLotteryRegister,
numberOfLotteryRegisters
)}
</select> </select>
)} )}
</div> </div>
<div className="col-md-12">
<div className="col-md-6 mb-3"> {/* Sales Tax Percentage Input */}
<label htmlFor="sales_tax_percentage"> <div className="col-md-12 d-flex align-items-center mt-3" style={{
Sales Tax Percentage:
</label> }}>
</div> <label htmlFor="sales_tax_percentage" className="me-2">
<div className="col-md-6"> Sales Tax Percentage:
<input </label>
type="number" <input
id="sales_tax_percentage" type="number"
value={salesTax} id="sales_tax_percentage"
onBlur={handleIncrementSalesTax} // Trigger the function when input loses focus value={salesTax}
onChange={(e) => setSalesTax(e.target.value)} // Allow editing the value while typing onBlur={handleIncrementSalesTax} // Trigger the function when input loses focus
placeholder="Enter percentage" onChange={(e) => setSalesTax(e.target.value)} // Allow editing the value while typing
className="form-control" placeholder="Enter percentage"
/> className="form-control w-25" // Adjust width as needed
</div> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="bank-container"> <div className="bank-container">
<div className="header-row"> <div className="header-row">
<div className="setting-title">Manage Bank</div> <div className="setting-title">Manage Bank</div>
@ -535,7 +525,7 @@ const ManageSettings = () => {
show={showModal && formType === "bank"} show={showModal && formType === "bank"}
handleClose={handleClose} handleClose={handleClose}
title="Add Bank" title="Add Bank"
width="1054px" width="600px"
height="auto" height="auto"
> >
<form> <form>
@ -546,7 +536,11 @@ const ManageSettings = () => {
onChange={(e) => setBankName(e.target.value)} onChange={(e) => setBankName(e.target.value)}
className="input-field" className="input-field"
placeholder="Bank Name" placeholder="Bank Name"
style={{ width: "483px", marginRight: "10px" }} style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
}}
/> />
<input <input
type="text" type="text"
@ -554,7 +548,11 @@ const ManageSettings = () => {
onChange={(e) => setBankBranch(e.target.value)} onChange={(e) => setBankBranch(e.target.value)}
className="input-field" className="input-field"
placeholder="Bank Short Name" placeholder="Bank Short Name"
style={{ width: "483px", marginRight: "10px" }} style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
}}
/> />
</div> </div>
<div className="form-group d-flex align-items-center mt-1"> <div className="form-group d-flex align-items-center mt-1">
@ -564,7 +562,11 @@ const ManageSettings = () => {
onChange={(e) => setAccountNumber(e.target.value)} onChange={(e) => setAccountNumber(e.target.value)}
className="input-field" className="input-field"
placeholder="Account Number" placeholder="Account Number"
style={{ width: "483px", marginRight: "10px" }} style={{
width: "270px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
}}
/> />
</div> </div>
<div style={{ display: "flex", justifyContent: "flex-end" }}> <div style={{ display: "flex", justifyContent: "flex-end" }}>
@ -574,13 +576,13 @@ const ManageSettings = () => {
style={{ style={{
marginRight: "40px", marginRight: "40px",
padding: "4px 8px", padding: "4px 8px",
backgroundColor: "#4545db", backgroundColor: " #282E26",
color: "white", color: "white",
border: "none", border: "none",
borderRadius: "40px", borderRadius: "40px",
cursor: "pointer", cursor: "pointer",
width: "124px", width: "181px",
height: "42px", height: "45px",
fontSize: "18px", fontSize: "18px",
}} }}
> >
@ -642,7 +644,11 @@ const ManageSettings = () => {
className="input-day" className="input-day"
value={day.days} value={day.days}
readOnly readOnly
style={{ paddingLeft: "10px" }} style={{
paddingLeft: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
}}
/> />
</div> </div>
{/* <button className="card-button day">Mark as Default</button> */} {/* <button className="card-button day">Mark as Default</button> */}
@ -654,39 +660,50 @@ const ManageSettings = () => {
handleClose={handleClose} handleClose={handleClose}
title="Add Due Days" title="Add Due Days"
width="683px" width="683px"
height="172px" height="230px"
> >
<form> <form>
<div className="form-group d-flex align-items-center"> <div className="form-group mx-5" style={{ display: "flex", flexDirection: "column" }}>
<input <input
type="number" type="number"
value={dueDays} value={dueDays}
onChange={(e) => setDueDays(e.target.value)} onChange={(e) => setDueDays(e.target.value)}
className="input-field" className="input-field"
placeholder="Due Days" placeholder="Enter Due Days"
style={{ width: "483px", marginRight: "10px" }}
/>
<button
onClick={handleSaveDueDays}
type="button"
style={{ style={{
marginRight: "40px", width: "100%",
padding: "4px 8px", marginBottom: "10px",
backgroundColor: "#4545db",
color: "white",
border: "none", border: "none",
borderRadius: "40px", borderBottom: "2px solid #ccc", // Only bottom border
cursor: "pointer", padding: "8px 0",
width: "124px", fontSize: "16px",
height: "42px", outline: "none",
fontSize: "18px",
}} }}
> />
{editingDueDayId ? "Update" : "Save"} <div style={{ display: "flex", justifyContent: "flex-end" }}>
</button> <button
onClick={handleSaveDueDays}
type="button"
style={{
padding: "10px 16px",
backgroundColor: "#282E26",
color: "white",
border: "none",
borderRadius: "20px",
cursor: "pointer",
width: "150px",
fontSize: "16px",
}}
>
{editingDueDayId ? "Update" : "Save"}
</button>
</div>
</div> </div>
</form> </form>
</ReusableModal> </ReusableModal>
</div> </div>
</> </>
); );

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

@ -278,66 +278,64 @@ const ManageUserTable = ({
)} )}
</div> </div>
<div style={{ marginRight: "69%" }}> <div
<div className="expense-search d-flex align-items-center"
className="expense-search d-flex align-items-center" style={{
display: "flex",
style={{ alignItems: "center",
display: "flex", backgroundColor: "#FFFFFF",
alignItems: "center", border: "1px solid #DBDBDB",
backgroundColor: "#FFFFFF", borderRadius: "10px",
border: "1px solid #DBDBDB", cursor: "pointer",
borderRadius: "10px", width: "200px",
// boxSizing: "border-box",
cursor: "pointer", }}
>
width: "170px", <span
gap: "10px", style={{
}} fontFamily: "'Comfortaa'",
> fontStyle: "normal",
<span fontWeight: "400",
style={{ fontSize: "14px", // Compact text
fontFamily: "'Comfortaa'", color: "#000000",
fontStyle: "normal", marginLeft:"10px"
fontWeight: "400", }}
fontSize: "16px", >
padding: "5px", Show Rows:
color: "#000000", </span>
}} <select
> name="option"
Show Rows: id="pageSelect"
</span> className="selectoptions"
<select style={{
name="option" backgroundColor: "#282E26", // Match background color
id="pageSelect" color: "#FFFFFF", // White text color
className="selectoptions" fontFamily: "'Comfortaa'",
style={{ fontStyle: "normal",
backgroundColor: "#282E26", fontWeight: "700",
borderRadius: "0px 10px 10px 0px", fontSize: "14px",
color: "#F4FFEE", lineHeight: "16px",
fontFamily: "'Comfortaa'", padding: "4px 10px", // Adjust padding for the dropdown
fontStyle: "normal", border: "none", // No border
fontWeight: "700", borderRadius: "0 10px 10px 0", // Rounded on the right side only
fontSize: "16px", cursor: "pointer",
lineHeight: "18px", marginLeft: "auto", // Push to the right
padding: "5px 8px", }}
border: "none", value={rowsPerPage}
cursor: "pointer", onChange={(e) => {
}} setRowsPerPage(Number(e.target.value));
value={rowsPerPage} setCurrentPage(1); // Reset to the first page on change
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={5}>5</option> <option value={20}>20</option>
<option value={10}>10</option> </select>
<option value={15}>15</option> </div>
<option value={20}>20</option>
</select>
</div>
</div>
</div> </div>

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

@ -394,14 +394,28 @@ 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
className="btn cus d-flex align-items-center" style={{
onClick={() => handleShowUserModal()} // Open modal for adding a user backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
> >
+ Add New User Assign Existing User As Owner
<img <img
src={userIcon} src={ownerIcon}
alt="user Icon" alt="owner Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }} style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/> />
</button> </button>
@ -421,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"
@ -429,25 +443,13 @@ function ManageUsers() {
/> />
</button> </button>
<button <button
style={{ className="btn cus d-flex align-items-center"
backgroundColor: "#4A5546", onClick={() => handleShowUserModal()} // Open modal for adding a user
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
> >
+ Assign Existing User As Owner Add New User
<img <img
src={ownerIcon} src={userIcon}
alt="owner Icon" alt="user Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }} style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/> />
</button> </button>
@ -472,7 +474,7 @@ function ManageUsers() {
width="700px" width="700px"
> >
<form> <form>
<div className="form-group d-flex flex-column p-5"> <div className="form-group d-flex flex-column px-5">
<div className="d-flex align-items-center mb-3 "> <div className="d-flex align-items-center mb-3 ">
<input <input
type="text" type="text"
@ -592,7 +594,7 @@ function ManageUsers() {
width="700px" width="700px"
> >
<form> <form>
<div className="form-group p-5"> <div className="form-group px-5">
{/* Wrapper for Flexbox */} {/* Wrapper for Flexbox */}
<div className="d-flex flex-wrap"> <div className="d-flex flex-wrap">
{/* Left Side */} {/* Left Side */}
@ -745,7 +747,7 @@ function ManageUsers() {
width="600px" width="600px"
> >
<form onSubmit={handleAssignOwnerSubmit}> <form onSubmit={handleAssignOwnerSubmit}>
<div className="form-group d-flex flex-column mt-1 p-3 "> <div className="form-group d-flex flex-column mt-1 px-5 ">
<input <input
type="email" type="email"
className="input-field" className="input-field"

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

@ -190,8 +190,8 @@ function ManageVendor() {
<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="vendor-add-button" onClick={handleShow}> <button className="btn cus d-flex align-items-center" style={{marginBottom:"10px"}} onClick={handleShow}>
+ Add Vendor Add Vendor
</button> </button>
</div> </div>
</div> </div>
@ -224,7 +224,7 @@ function ManageVendor() {
handleSave(); handleSave();
}} }}
> >
<div className="form-group d-flex align-items-center mt-0"> <div className="form-group d-flex align-items-center mt-0 mx-5">
<input <input
type="text" type="text"
id="vendorName" id="vendorName"
@ -232,7 +232,11 @@ 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" }} style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/> />
<select <select
id="vendorType" id="vendorType"
@ -243,7 +247,11 @@ function ManageVendor() {
setVendorDepartments([]); // Reset departments when type changes setVendorDepartments([]); // Reset departments when type changes
setOpeningBalance(""); setOpeningBalance("");
}} }}
style={{ width: "400px", marginRight: "10px", height: "44px" }} style={{ width: "400px", marginRight: "10px", height: "44px" , backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
> >
<option value="">Vendor Type</option> <option value="">Vendor Type</option>
<option value="purchase">Purchase</option> <option value="purchase">Purchase</option>
@ -273,12 +281,17 @@ 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
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
marginLeft:"45px"
}} }}
> >
<option value=""> <option value="">
@ -314,6 +327,9 @@ function ManageVendor() {
width: "400px", width: "400px",
marginRight: "10px", marginRight: "10px",
height: "44px", height: "44px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}} }}
/> />
)} )}
@ -325,13 +341,14 @@ function ManageVendor() {
style={{ style={{
marginLeft: "690px", marginLeft: "690px",
padding: "4px 8px", padding: "4px 8px",
backgroundColor: "#4545db", background: "#282E26",
color: "white", color: "white",
border: "none", border: "none",
borderRadius: "40px", borderRadius: "40px",
cursor: "pointer", cursor: "pointer",
width: "124px", width: "181px",
height: "42px", height: "45px",
fontSize: "18px", fontSize: "18px",
}} }}
> >

198
src/components/Pages/AppPAges/ManageSettings/OtherIncomeType.js
View File

@ -1,5 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect,useContext } from "react"; import React, { useState, useEffect, useContext } from "react";
import ReusableModal from "./ReusableModal"; import ReusableModal from "./ReusableModal";
import useApi from "../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../utils/secure-route/AuthContext";
@ -7,15 +7,15 @@ import { toast, ToastContainer } from "react-toastify";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import "./Settings.css"; import "./Settings.css";
function OtherIncomeType() { function OtherIncomeType() {
let { user } = useContext(AuthContext); let { user } = useContext(AuthContext);
const storeId = user.store; const storeId = user.store;
const [showModal, setShowModal] = useState(false);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [incomes, setIncomes] = useState([]); const [incomes, setIncomes] = useState([]);
const [editIncome, setEditIncome] = useState(null); const [editIncome, setEditIncome] = useState(null);
const { Get, Post, Put, Delete } = useApi(); const { Get, Post, Put, Delete } = useApi();
useEffect(() => { useEffect(() => {
// Fetch existing income types from the API // Fetch existing income types from the API
const fetchIncomes = async () => { const fetchIncomes = async () => {
@ -29,6 +29,7 @@ function OtherIncomeType() {
}; };
fetchIncomes(); fetchIncomes();
}, []); }, []);
const handleShow = (income = null) => { const handleShow = (income = null) => {
if (income) { if (income) {
setEditIncome(income); setEditIncome(income);
@ -37,20 +38,23 @@ function OtherIncomeType() {
setEditIncome(null); setEditIncome(null);
setName(""); // Reset name when adding a new income type setName(""); // Reset name when adding a new income type
} }
setShowModal(true);
}; };
const handleClose = () => { const handleClose = () => {
setShowModal(false);
setName(""); // Reset name when closing setName(""); // Reset name when closing
setEditIncome(null); // Reset editIncome when closing setEditIncome(null); // Reset editIncome when closing
}; };
const handleSave = async () => { const handleSave = async () => {
if (name) { if (name) {
try { try {
if (editIncome) { if (editIncome) {
// Update existing income type // Update existing income type
const response = await Put("otherIncomeData", editIncome.id, { const response = await Put("otherIncomeData", editIncome.id, {
title: name,store: storeId, title: name,
store: storeId,
}); });
const updatedIncome = response.data; const updatedIncome = response.data;
setIncomes((prevIncomes) => setIncomes((prevIncomes) =>
@ -62,7 +66,8 @@ function OtherIncomeType() {
} else { } else {
// Add new income type // Add new income type
const response = await Post("otherIncomeData", { const response = await Post("otherIncomeData", {
title: name,store: storeId, title: name,
store: storeId,
}); });
const newIncome = response.data; const newIncome = response.data;
setIncomes([...incomes, newIncome]); setIncomes([...incomes, newIncome]);
@ -77,6 +82,7 @@ function OtherIncomeType() {
toast.warn("Income type name cannot be empty."); toast.warn("Income type name cannot be empty.");
} }
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
const result = await Swal.fire({ const result = await Swal.fire({
title: "Are you sure?", title: "Are you sure?",
@ -86,10 +92,10 @@ function OtherIncomeType() {
confirmButtonColor: "#d33", confirmButtonColor: "#d33",
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) return; // Exit if the user cancels if (!result.isConfirmed) return; // Exit if the user cancels
try { try {
await Delete("otherIncomeData", id); await Delete("otherIncomeData", id);
setIncomes((prevIncomes) => setIncomes((prevIncomes) =>
@ -104,109 +110,89 @@ function OtherIncomeType() {
toast.error("Failed to delete income type."); toast.error("Failed to delete income type.");
} }
}; };
return ( return (
<> <>
<div className="due-days"> <div className="" style={{ marginTop: "5%" }}>
<div className="header-row"> <ToastContainer />
<div className="setting-title">Other Income Type</div> {/* <p className="setting-title">Manage Departments</p> */}
<div className="btn-position"> <div className="department-container">
<button className="vendor-add-button" onClick={() => handleShow()}> <div className="input-container">
+ Add New <div className="input-row">
</button> <input
type="text"
id="incomeTypeName"
className="input-field"
placeholder="Enter income type name"
value={name}
onChange={(e) => setName(e.target.value)}
style={{
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
<button
onClick={handleSave}
className="btn d-flex align-items-center"
type="button"
style={{width:"208px" , height:"33px" , backgroundColor: "#FFAF32" , borderRadius:"10px" , justifyContent:"center"}}
>
{editIncome ? "Update " : "Add Other Income"}
</button>
</div>
</div> </div>
</div> </div>
<div className="dept-cards-row"> <div className="store-container">
{incomes.length === 0 ? (
<p <div className="show-department-section">
style={{ <div className="dept-cards-row">
textAlign: "center", {incomes.map((income) => (
fontFamily: "Manrope", <div className="dept-card" key={income.id}>
fontWeight: "600", <input className="dept-info" value={income.title} readOnly />
fontSize: "40px", <svg
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)", className="dept-icon"
WebkitBackgroundClip: "text", onClick={() => handleShow(income)}
WebkitTextFillColor: "transparent", width="16"
}} height="16"
> viewBox="0 0 16 16"
No data found fill="none"
</p> xmlns="http://www.w3.org/2000/svg"
) : ( >
incomes.map((income) => ( <path
<div className="dept-card" key={income.id}> d="M13.5854 4.695C13.8304 4.435 13.8304 4.00167 13.5854 3.755L12.1154 2.195C11.8829 1.935 11.4746 1.935 11.2296 2.195L10.0736 3.415L12.4295 5.915M2.45947 11.5017V14.0017H4.81534L11.7636 6.62167L9.4077 4.12167L2.45947 11.5017Z"
<input className="dept-info" value={income.title} readOnly /> fill="#002300"
<svg />
className="dept-icon" </svg>
onClick={() => handleShow(income)} <svg
width="16" className="dept-icon"
height="16" onClick={() => handleDelete(income.id)}
viewBox="0 0 16 16" width="16"
fill="none" height="16"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
> fill="none"
<path xmlns="http://www.w3.org/2000/svg"
d="M13.5854 4.695C13.8304 4.435 13.8304 4.00167 13.5854 3.755L12.1154 2.195C11.8829 1.935 11.4746 1.935 11.2296 2.195L10.0736 3.415L12.4295 5.915M2.45947 11.5017V14.0017H4.81534L11.7636 6.62167L9.4077 4.12167L2.45947 11.5017Z" >
fill="#002300" <path
/> d="M3.84503 12.6667C3.84503 13.4 4.41044 14 5.10149 14H10.1273C10.8184 14 11.3838 13.4 11.3838 12.6667V6C11.3838 5.26667 10.8184 4.66667 10.1273 4.66667H5.10149C4.41044 4.66667 3.84503 5.26667 3.84503 6V12.6667ZM11.3838 2.66667H9.81322L9.36718 2.19333C9.25409 2.07333 9.09075 2 8.92741 2H6.30141C6.13807 2 5.97473 2.07333 5.86165 2.19333L5.4156 2.66667H3.84503C3.4995 2.66667 3.2168 2.96667 3.2168 3.33333C3.2168 3.7 3.4995 4 3.84503 4H11.3838C11.7293 4 12.012 3.7 12.012 3.33333C12.012 2.96667 11.7293 2.66667 11.3838 2.66667Z"
</svg> fill="#002300"
<svg />
className="dept-icon" </svg>
onClick={() => handleDelete(income.id)} // Show modal for editing </div>
width="16" ))
height="16" }
viewBox="0 0 16 16" </div>
fill="none" </div>
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.84503 12.6667C3.84503 13.4 4.41044 14 5.10149 14H10.1273C10.8184 14 11.3838 13.4 11.3838 12.6667V6C11.3838 5.26667 10.8184 4.66667 10.1273 4.66667H5.10149C4.41044 4.66667 3.84503 5.26667 3.84503 6V12.6667ZM11.3838 2.66667H9.81322L9.36718 2.19333C9.25409 2.07333 9.09075 2 8.92741 2H6.30141C6.13807 2 5.97473 2.07333 5.86165 2.19333L5.4156 2.66667H3.84503C3.4995 2.66667 3.2168 2.96667 3.2168 3.33333C3.2168 3.7 3.4995 4 3.84503 4H11.3838C11.7293 4 12.012 3.7 12.012 3.33333C12.012 2.96667 11.7293 2.66667 11.3838 2.66667Z"
fill="#002300"
/>
</svg>
</div>
))
)}
</div> </div>
</div> </div>
<ReusableModal
show={showModal}
handleClose={handleClose}
title={editIncome ? "Edit Other Income Type" : "Add Other Income Type"}
width="697px"
height="200px"
>
<form>
<div className="form-group d-flex align-items-center mt-1">
<input
type="text"
id="incomeTypeName"
className="input-field"
placeholder="Enter income type name"
value={name}
onChange={(e) => setName(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
/>
<button
onClick={handleSave}
type="button"
style={{
padding: "6px 8px",
backgroundColor: "#4545db", // Bootstrap primary color
color: "white",
border: "none",
borderRadius: "40px",
cursor: "pointer",
width: "103px",
height: "42px",
fontSize: "18px",
}}
>
{editIncome ? "Update" : "Save"}
</button>
</div>
</form>
</ReusableModal>
<ToastContainer/>
</> </>
); );
} }
export default OtherIncomeType; export default OtherIncomeType;

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

@ -47,7 +47,7 @@ const ReusableModal = ({
}; };
const modalContentStyle = { const modalContentStyle = {
borderRadius: "30px", borderRadius: "40px",
overflow: "hidden", overflow: "hidden",
width: width, // use the width prop width: width, // use the width prop
height: height, // use the height prop height: height, // use the height prop

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

@ -82,7 +82,7 @@ const SettingTable = ({
pages.push( pages.push(
<li <li
key={i} key={i}
className={`page-item ${currentPage === i ? "active" : ""}`} className={`page-item ${currentPage === i ? "active" : "pgbtn"}`}
> >
<a <a
className="page-link" className="page-link"
@ -200,6 +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)" }}
/> />
<svg <svg
className="search-container-icon" className="search-container-icon"
@ -293,25 +294,67 @@ const SettingTable = ({
</div> </div>
)} )}
</div> </div>
<div className="expense-searchcontainerend d-flex align-items-center"> <div style={{ marginRight: "1%" }}>
<h3 className="me-2">Show</h3> <div
<select className="expense-search d-flex align-items-center"
name="option" style={{
id="pageSelect" display: "flex",
className="selectoptions" alignItems: "center",
value={rowsPerPage} backgroundColor: "#FFFFFF",
onChange={(e) => { border: "1px solid #DBDBDB",
setRowsPerPage(Number(e.target.value)); borderRadius: "10px",
setCurrentPage(1); // Reset to first page on change cursor: "pointer",
}} width: "200px",
>
<option value={5}>5</option>
<option value={10}>10</option> }}
<option value={15}>15</option> >
<option value={20}>20</option> <span
</select> style={{
</div> 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> </div>
<table className="data-table custom-table" style={{borderRadius:"none"}} > <table className="data-table custom-table" style={{borderRadius:"none"}} >
<thead className="table-header"> <thead className="table-header">
<tr> <tr>
@ -435,7 +478,7 @@ const SettingTable = ({
{showFooter && ( {showFooter && (
<nav> <nav>
<ul className="pagination"> <ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}> {/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span <span
style={{ style={{
fontSize: "24px", fontSize: "24px",
@ -454,9 +497,9 @@ const SettingTable = ({
&lt; &lt;
</span> </span>
&nbsp; &nbsp;
</li> </li> */}
{renderPagination()} {renderPagination()}
<li {/* <li
className={`prev-next ${ className={`prev-next ${
currentPage === totalPages ? "disabled" : "" currentPage === totalPages ? "disabled" : ""
}`} }`}
@ -479,7 +522,7 @@ const SettingTable = ({
> >
&gt;{" "} &gt;{" "}
</span> </span>
</li> </li> */}
</ul> </ul>
</nav> </nav>
)} )}

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

@ -1,4 +1,8 @@
/*================================================Setting page===================================================================================*/ /*================================================Setting page===================================================================================*/
/* Dropdown container styles */
.setting-container { .setting-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -8,9 +12,10 @@
padding: 20px; padding: 20px;
margin: 20px auto; margin: 20px auto;
background-color: #ffffff; background-color: #ffffff;
width: 1600px; width: 1600px;
max-width: 100%; max-width: 100%;
} }
.setting-title { .setting-title {
margin-bottom: 20px; margin-bottom: 20px;
font-weight: bold; font-weight: bold;
@ -18,14 +23,17 @@
color: #002300; color: #002300;
align-self: flex-start; align-self: flex-start;
} }
.row.setting-manage { .row.setting-manage {
width: 1600px; width: 1600px;
max-width: 100%; max-width: 100%;
} }
.card { .card {
margin-bottom: 20px; margin-bottom: 20px;
max-width: 100%; max-width: 100%;
} }
.card-body { .card-body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -35,104 +43,134 @@
max-height: 100%; max-height: 100%;
height: 56px; height: 56px;
} }
.question-text { .question-text {
margin-top: 15px; margin-top: 15px;
font-size: 16px; font-size: 16px;
color: #002300; color: #002300;
align-items: center; align-items: center;
} }
.form-check { .form-check {
margin: 0; margin: 0;
} }
.card { .card {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
background-color: #ffffff; background-color: #ffffff;
} }
.form-check-input { .form-check-input {
cursor: pointer; cursor: pointer;
} }
/*===========================================================================Bank container=================================================================*/ /*===========================================================================Bank container=================================================================*/
.bank-container { .bank-container {
padding: 20px; /* Adjust as needed */ padding: 20px;
/* Adjust as needed */
margin: 30px auto; margin: 30px auto;
background-color: #ffffff;
border-radius: 10px; background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
border-radius: 40px;
width: 1600px; width: 1600px;
height: 467px;
max-width: 100%; max-width: 100%;
} }
.header-row { .header-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 1540px; width: 1540px;
max-width: 100%; max-width: 100%;
} }
.setting-title { .setting-title {
font-size: 24px; /* Adjust font size as needed */ font-size: 24px;
margin: 0; /* Remove default margin */ /* Adjust font size as needed */
margin: 0;
/* Remove default margin */
} }
.bank-add-button { .bank-add-button {
padding: 8px 16px; padding: 8px 16px;
background-color: #4545db; /* Bootstrap primary color */ background-color: #ffaf32;
color: white; /* Bootstrap primary color */
color: #000000;
border: none; border: none;
border-radius: 40px; border-radius: 14px;
cursor: pointer; cursor: pointer;
width: 155px; width: 177px;
height: 42px; height: 48px;
font-size: 18px; font-size: 18px;
} }
.second-container { .second-container {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bank-cards { .bank-cards {
display: flex; display: flex;
flex-wrap: wrap; /* Allow wrapping */ flex-wrap: wrap;
/* Allow wrapping */
} }
.bank-card { .bank-card {
width: 426px; background: #FFFFFF;
height: 206px; border: 1px solid #EBEAF2;
background-color: #ffffff; box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
border: 1px solid rgba(0, 35, 0, 0.1); border-radius: 20px;
border-radius: 10px; width: 348px;
height: 303px;
display: flex; display: flex;
flex-direction: column; /* Stack content vertically */ flex-direction: column;
/* Stack content vertically */
padding: 16px; padding: 16px;
margin: 10px 0; /* Vertical margin only */ margin: 10px 0;
/* Vertical margin only */
padding: 16px; padding: 16px;
position: relative; position: relative;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
.bank-header { .bank-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
} }
.bank-details { .bank-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.bank-name-group { .bank-name-group {
margin-bottom: 16px; /* Space between the groups of names */ margin-bottom: 16px;
/* Space between the groups of names */
} }
.bank-name { .bank-name {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
color: #002300; color: #002300;
margin-bottom: 2px; margin-bottom: 2px;
} }
.bank-short-name { .bank-short-name {
font-size: 16px; font-size: 16px;
color: #002300; color: #002300;
margin: 0; margin: 0;
} }
.del-icon { .del-icon {
color: #002300; color: #002300;
position: absolute; position: absolute;
@ -140,6 +178,7 @@
right: 16px; right: 16px;
cursor: pointer; cursor: pointer;
} }
.card-button { .card-button {
text-align: left; text-align: left;
border: 1px solid #4545db; border: 1px solid #4545db;
@ -151,45 +190,60 @@
font-size: 18px; font-size: 18px;
color: #4545db; color: #4545db;
} }
.card-button.default { .card-button.default {
width: 212px; width: 212px;
} }
.card-button.atm { .card-button.atm {
width: 252px; width: 252px;
} }
.card-button.ltry { .card-button.ltry {
width: 277px; width: 277px;
} }
.card-button.credit { .card-button.credit {
width: 313px; width: 313px;
} }
/*======================================================Due Days css Start==========================================================================*/ /*======================================================Due Days css Start==========================================================================*/
.due-days { .due-days {
padding: 20px; /* Adjust as needed */ padding: 20px;
/* Adjust as needed */
margin: 20px auto; margin: 20px auto;
background-color: #ffffff;
border: 1px solid #EBEAF2; border: 1px solid #EBEAF2;
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)"; box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
border-radius: 40px; border-radius: 40px;
width: 1600px; width: 1600px;
max-width: 100%; max-width: 100%;
background-color: #ffffff; background-color: #ffffff;
} }
.due-card { .due-card {
position: relative; position: relative;
width: 360px; /* Fixed width for each card */ width: 348px;
height: 185px; /* Fixed height for each card */ height: 196px;
background-color: #ffffff;
border: 1px solid rgba(0, 35, 0, 0.1); background: #FFFFFF;
border-radius: 10px; border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
border-radius: 20px;
display: flex; display: flex;
flex-direction: column; /* Column layout inside the card */ flex-direction: column;
/* Column layout inside the card */
padding: 16px; padding: 16px;
margin: 10px; /* Margin for spacing */ margin: 10px;
/* Margin for spacing */
} }
.due-details { .due-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.due-icon { .due-icon {
display: flex; display: flex;
align-items: center; align-items: center;
@ -199,28 +253,41 @@
right: 16px; right: 16px;
cursor: pointer; cursor: pointer;
} }
.input-day { .input-day {
width: 260px; width: 260px;
height: 44px; height: 44px;
background-color: #f6f6f6; background-color: #ffffff;
border: 1px solid rgba(0, 35, 0, 0.1); border: none;
/* Remove all borders */
border-bottom: 2px solid #ccc;
/* Only apply the bottom border */
border-radius: 4px; border-radius: 4px;
/* Optional: apply a border-radius if needed */
outline: none;
/* Optional: removes the default focus outline */
} }
.card-button.day { .card-button.day {
margin-top: 20px; margin-top: 20px;
width: 191px; width: 191px;
} }
.btn-position { .btn-position {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.vendor-add { .vendor-add {
flex-direction: column; flex-direction: column;
margin-bottom: 10px; /* Space between rows */ margin-bottom: 10px;
/* Space between rows */
} }
.vendor-add-button { .vendor-add-button {
padding: 8px 26px; padding: 8px 26px;
background-color: #4545db; /* Bootstrap primary color */ background-color: #4545db;
/* Bootstrap primary color */
color: white; color: white;
border: none; border: none;
border-radius: 40px; border-radius: 40px;
@ -228,48 +295,64 @@
height: 42px; height: 42px;
font-size: 18px; font-size: 18px;
margin-left: 10px; margin-left: 10px;
margin-bottom: 10px; /* Space between buttons */ margin-bottom: 10px;
/* Space between buttons */
} }
/* Remove the margin from the last button */ /* Remove the margin from the last button */
.vendor-add-button:last-child { .vendor-add-button:last-child {
margin-bottom: 0; /* No margin for the last button */ margin-bottom: 0;
/* No margin for the last button */
} }
/* Mobile responsiveness */ /* Mobile responsiveness */
@media (max-width: 600px) { @media (max-width: 600px) {
.vendor-add-button { .vendor-add-button {
width: 100%; /* Full width buttons */ width: 100%;
margin-bottom: 10px; /* Maintain spacing for mobile */ /* Full width buttons */
margin-bottom: 10px;
/* Maintain spacing for mobile */
} }
} }
/* styles.css */ /* styles.css */
.rounded-table { .rounded-table {
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.table-head { .table-head {
background-color: #f4f4f4; background-color: #f4f4f4;
} }
.table-head th { .table-head th {
padding: 10px; padding: 10px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.table-body td { .table-body td {
font-size: 16px; font-size: 16px;
} }
/*===============================================================Store Css Start===============================================================*/ /*===============================================================Store Css Start===============================================================*/
.store-container { .store-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; /* Align items to the start (left) */ align-items: flex-start;
border-radius: 40px; /* Align items to the start (left) */
padding: 30px; padding: 30px;
margin: 20px auto; margin: 20px auto;
background-color: #ffffff;
width: 1600px; width: 1600px;
max-width: 100%; max-width: 100%;
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
border-radius: 14px;
} }
@ -277,33 +360,44 @@
.department-container { .department-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; /* Align items to the start (top) */ justify-content: flex-start;
align-items: flex-start; /* Align items to the start (left) */ box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392157);
align-items: flex-start;
border: 1px solid #EBEAF2;
border-radius: 20px; border-radius: 20px;
padding: 30px; padding: 30px;
margin: 10px 0;
border: none; /* Ensure no border */
border-bottom: 2px solid #ccc; /* Set a bottom border */
margin: 20px 0; /* Center vertically with top and bottom margins */
background-color: #ffffff; background-color: #ffffff;
width: 850px; /* Set a fixed width */ width: 850px;
max-width: 100%; /* Ensure it doesn't exceed the screen width */
margin-left: 160px; /* Align to the left with 9% margin */ max-width: 100%;
margin-left: 160px;
} }
.setting-title { .setting-title {
margin-bottom: 10px; /* Space between title and inputs */ margin-bottom: 10px;
font-size: 24px; /* Adjust as needed */ /* Space between title and inputs */
font-size: 24px;
/* Adjust as needed */
} }
.input-container { .input-container {
width: 100%; /* Ensure it takes the full width */ width: 100%;
/* Ensure it takes the full width */
} }
.input-row { .input-row {
display: flex; /* Use flexbox to align input fields */ display: flex;
gap: 10px; /* Space between input fields */ /* Use flexbox to align input fields */
gap: 10px;
/* Space between input fields */
} }
.input-field { .input-field {
padding: 10px; padding: 10px;
width: 600px; width: 600px;
@ -312,19 +406,24 @@
border: 1px solid #f6f6f6; border: 1px solid #f6f6f6;
border-radius: 5px; border-radius: 5px;
} }
.card-container { .card-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; gap: 30px;
} }
.plan-title { .plan-title {
align-items: center; /* This centers the items vertically */ align-items: center;
/* This centers the items vertically */
gap: 10px; gap: 10px;
width: 308px; width: 308px;
height: 46px; height: 46px;
font-size: 20px; font-size: 20px;
justify-content: center; /* Center items horizontally */ justify-content: center;
/* Center items horizontally */
} }
.current-plan { .current-plan {
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
@ -336,23 +435,30 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.card-store { .card-store {
width: 377px; /* Set card width */ width: 377px;
height: 400px; /* Set card height */ /* Set card width */
height: 400px;
/* Set card height */
border: 1px solid rgba(69, 69, 219, 0.3); border: 1px solid rgba(69, 69, 219, 0.3);
box-shadow: 12px 4px 4px rgba(0, 0, 0, 0.18); box-shadow: 12px 4px 4px rgba(0, 0, 0, 0.18);
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
} }
.card-store.basic { .card-store.basic {
background-color: #f4f6ff; background-color: #f4f6ff;
} }
.card-store.premium { .card-store.premium {
background-color: #ececfb; background-color: #ececfb;
} }
.card-store.enterprise { .card-store.enterprise {
background-color: #f4f6ff; background-color: #f4f6ff;
} }
.card-store-title { .card-store-title {
width: 313px; width: 313px;
font-size: 32px; font-size: 32px;
@ -360,11 +466,13 @@
margin-left: 20px; margin-left: 20px;
font-weight: 600px; font-weight: 600px;
} }
.card-store-description { .card-store-description {
width: 325px; width: 325px;
font-size: 20px; font-size: 20px;
margin-left: 20px; margin-left: 20px;
} }
.card-store-sub-amount { .card-store-sub-amount {
display: flex; display: flex;
align-items: center; align-items: center;
@ -373,35 +481,42 @@
margin-left: 20px; margin-left: 20px;
font-weight: 600px; font-weight: 600px;
} }
.dollar-sign { .dollar-sign {
font-size: 40px; font-size: 40px;
margin-right: 8px; margin-right: 8px;
} }
.card-store-button { .card-store-button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: auto; /* Center horizontally */ margin: auto;
/* Center horizontally */
border: 1px solid #4545db; border: 1px solid #4545db;
border-radius: 40px; border-radius: 40px;
margin-top: 10px; margin-top: 10px;
background-color: #ffffff; background-color: #ffffff;
height: 52px; height: 52px;
width: 300px; /* Adjust width */ width: 300px;
/* Adjust width */
padding: 0 25px; padding: 0 25px;
font-size: 18px; font-size: 18px;
color: #4545db; color: #4545db;
cursor: pointer; cursor: pointer;
} }
.card-store-button.premium { .card-store-button.premium {
background-color: #4545db; background-color: #4545db;
color: #ffffff; color: #ffffff;
} }
.sub-icon { .sub-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 16px; right: 16px;
} }
/*-----------------------------------------------------upcoming invoice-------------------------------------*/ /*-----------------------------------------------------upcoming invoice-------------------------------------*/
.saved-card { .saved-card {
width: 260px; width: 260px;
@ -415,45 +530,63 @@
position: relative; position: relative;
margin: 0 10px; margin: 0 10px;
} }
.card-head { .card-head {
display: flex; display: flex;
justify-content: space-between; /* Align label and bank name */ justify-content: space-between;
align-items: center; /* Center vertically */ /* Align label and bank name */
margin-bottom: 10px; /* Space below header */ align-items: center;
/* Center vertically */
margin-bottom: 10px;
/* Space below header */
} }
.credit-card-label { .credit-card-label {
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
} }
.bank-name-card { .bank-name-card {
font-size: 16px; font-size: 16px;
text-align: right; /* Align bank name to the right */ text-align: right;
margin: 0; /* Remove default margin */ /* Align bank name to the right */
margin: 0;
/* Remove default margin */
} }
.card-number { .card-number {
text-align: center; text-align: center;
font-size: 20px; /* Adjust size as needed */ font-size: 20px;
/* Adjust size as needed */
margin-top: 20px; margin-top: 20px;
font-weight: 500; font-weight: 500;
} }
.card-bottom { .card-bottom {
display: flex; display: flex;
justify-content: space-between; /* Space between card holder and validity */ justify-content: space-between;
margin-top: auto; /* Push footer to the bottom */ /* Space between card holder and validity */
margin-top: auto;
/* Push footer to the bottom */
} }
.card-holder { .card-holder {
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
margin: 0; /* Remove default margin */ margin: 0;
/* Remove default margin */
} }
.valid-through { .valid-through {
font-size: 12px; font-size: 12px;
text-align: right; text-align: right;
margin: 0; margin: 0;
} }
.dept-button { .dept-button {
padding: 6px 8px; padding: 6px 8px;
background-color: #4545db; /* Bootstrap primary color */ background-color: #4545db;
/* Bootstrap primary color */
color: white; color: white;
border: none; border: none;
border-radius: 40px; border-radius: 40px;
@ -462,59 +595,81 @@
height: 42px; height: 42px;
font-size: 18px; font-size: 18px;
} }
.dept-cards-row { .dept-cards-row {
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
flex-wrap: wrap; /* Allow wrapping to the next row */ flex-wrap: wrap;
gap: 10px; /* Space between cards */ /* space above cards */ /* Allow wrapping to the next row */
gap: 10px;
/* Space between cards */
/* space above cards */
} }
.dept-card { .dept-card {
width: 474px; /* Fixed width */ width: 474px;
height: 70px; /* Fixed height */ /* Fixed width */
height: 70px;
/* Fixed height */
padding: 10px; padding: 10px;
border: 1px solid #EBEAF2; /* Add border color */ border: 1px solid #EBEAF2;
border-radius: 20px; /* Rounded corners */ /* Add border color */
display: flex; /* Flexbox layout */ border-radius: 20px;
align-items: center; /* Center items vertically */ /* Rounded corners */
justify-content: space-between; /* Space items evenly */ display: flex;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */ /* Flexbox layout */
align-items: center;
/* Center items vertically */
justify-content: space-between;
/* Space items evenly */
/* Add box shadow */
} }
.dept-info { .dept-info {
width: 386px; width: 386px;
height: 50px; height: 50px;
padding: 10px; padding: 10px;
background-color: #ffffff; background-color: #ffffff;
border: none; /* Remove the redundant border */
border-radius: 10px; /* Rounded corners */ border: none;
/* Remove the redundant border */
border-radius: 10px;
/* Rounded corners */
} }
.create-department-section { .create-department-section {
width: 100%; width: 100%;
} }
.dept-icon { .dept-icon {
cursor: pointer; cursor: pointer;
} }
/* ===========================================================Expense Screen CSS Start =============================================================*/ /* ===========================================================Expense Screen CSS Start =============================================================*/
input[type="date"]::-webkit-calendar-picker-indicator { input[type="date"]::-webkit-calendar-picker-indicator {
color: rgba(0, 0, 0, 0); color: rgba(0, 0, 0, 0);
opacity: 1; opacity: 1;
display: block; display: block;
background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.5 9.08984H20.5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 13.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 16.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 13.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 16.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 13.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 16.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 2V5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.5 9.08984H20.5" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="%23002300" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 13.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.6947 16.6992H15.7037" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 13.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9955 16.6992H12.0045" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 13.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.29431 16.6992H8.30329" stroke="%23002300" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat;
no-repeat;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-width: thin; border-width: thin;
} }
input[type="date"] { input[type="date"] {
cursor: default; cursor: default;
} }
/*==================================================================vendor multiselect==========================================================*/ /*==================================================================vendor multiselect==========================================================*/
.chips-container { .chips-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 5px; /* Space between chips and dropdown */ margin-bottom: 5px;
max-width: 483px; /* Match the dropdown width */ /* Space between chips and dropdown */
max-width: 483px;
/* Match the dropdown width */
} }
.chip { .chip {
@ -531,6 +686,7 @@ input[type="date"] {
margin-left: 5px; margin-left: 5px;
cursor: pointer; cursor: pointer;
} }
/* Custom styles for the select element and option hover */ /* Custom styles for the select element and option hover */
@ -539,6 +695,7 @@ input[type="date"] {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
.data-table { .data-table {
width: 100%; width: 100%;
border: 2px solid #F4F4F4; border: 2px solid #F4F4F4;
@ -546,38 +703,48 @@ input[type="date"] {
/* border-radius: 20px 20px 0 0; */ /* border-radius: 20px 20px 0 0; */
overflow: hidden; overflow: hidden;
} }
.table-header th, .table-body td {
.table-header th,
.table-body td {
/* border: 1px solid #F4F4F4; */ /* border: 1px solid #F4F4F4; */
padding: 12px; padding: 12px;
text-align: left; text-align: center;
padding-left: 20px; padding-left: 20px;
} }
.table-header th { .table-header th {
background-color: #282e26; background-color: #282e26;
color: white; color: white;
cursor: pointer; /* Added cursor for sortable columns */ cursor: pointer;
/* Added cursor for sortable columns */
} }
.table-body td { .table-body td {
padding-left: 20px; padding-left: 20px;
color: #002300; color: #002300;
background-color: #ffffff; background-color: #ffffff;
border-bottom: 1px solid #EBEAF2; border-bottom: 1px solid #EBEAF2;
} }
.table-body tr:last-child td { .table-body tr:last-child td {
border-bottom: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
} }
.table-body { .table-body {
border-bottom: 2px solid #EBEAF2; border-bottom: 2px solid #EBEAF2;
} }
.no-column { .no-column {
width: 100px; width: 100px;
} }
.action-column { .action-column {
color: #002300; color: #002300;
width: auto; width: auto;
text-align: right; text-align: right;
} }
.action-button { .action-button {
background: none; background: none;
border: none; border: none;
@ -585,56 +752,86 @@ input[type="date"] {
padding: 0; padding: 0;
margin: 0 5px; margin: 0 5px;
} }
.action-button svg { .action-button svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
fill: #002300; fill: #002300;
transition: fill 0.3s; transition: fill 0.3s;
} }
.action-button:hover svg { .action-button:hover svg {
fill: #005600; fill: #005600;
} }
.pagination {
display: flex; .p.pagination {
justify-content: end; border-end-start-radius: 24px;
padding: 10px 0; border-end-end-radius: 24px;
border-radius: 50%;
/* Overall border radius for the pagination container */
border-bottom: 2px solid #EBEAF2;
background-color: #ffffff; background-color: #ffffff;
display: flex;
/* Ensure it behaves as a flex container */
justify-content: center;
align-items: center;
} }
.pagination .page-item { .pagination .page-item {
margin: 0 5px;
width: 30px;
/* Fixed width */
height: 30px;
/* Fixed height */
border-radius: 50%;
/* Make sure all page items are circular */
display: flex;
/* Center the content */
align-items: center;
/* Center the content vertically */
justify-content: center;
/* Center the content horizontally */
} }
.pagination .page-link { .pagination .page-link {
padding: 10px;
border: 1px solid #F4F4F4; border: 1px solid #F4F4F4;
/* background-color: #ffffff; */
background-color: #b6d7a8; background-color: #b6d7a8;
border-radius: 30px; border-radius: 50%;
/* Make sure links are circular */
color: #002300; color: #002300;
text-decoration: none; text-decoration: none;
display: flex; display: flex;
/* Center the content */
align-items: center; align-items: center;
/* Center the content vertically */
justify-content: center; justify-content: center;
/* Center the content horizontally */
width: 30px; width: 30px;
/* Fixed width */
height: 30px; height: 30px;
/* Fixed height */
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.pagination .page-link:hover { .pagination .page-link:hover {
background-color: red; background-color: #b6d7a8;
/* Same background color on hover */
border-radius: 50%;
} }
.pagination .page-item.active .page-link { .pagination .page-item.active .page-link {
width: 30px; background-color: #ffaf32;
height: 30px; /* Yellow background for active item */
border-radius: 30px;
background-color: #ffaf32; /* Yellow background */
color: #002300; color: #002300;
border-color:#fbfbfbfb; border-radius: 50%;
border: 1px solid #d3d3d3fb; border-color: #d3d3d3;
} /* Border color for active item */
.pagination .page-item.disabled .page-link {
opacity: 0.5;
pointer-events: none;
} }
.pagination .page-item.pgbtn .page-link {
border-radius: 50%;
}

4
src/components/Pages/AppPAges/Payroll/Payroll.js
View File

@ -418,7 +418,7 @@ export default function Payroll() {
<div <div
className="modal-container" className="modal-container"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }} style={{ width: modalType === 'payment' ? '800px' : '700px', borderRadius: '40px' }}
> >
<div <div
className="modal-header" className="modal-header"
@ -678,7 +678,7 @@ export default function Payroll() {
backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent", backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000", color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
border: 'none', border: 'none',
padding: '5px 5px', padding: '5px 0px',
borderRadius: '20px', borderRadius: '20px',
cursor: 'pointer', cursor: 'pointer',
}} }}

99
src/components/Pages/AppPAges/Payroll/PayrollTableWithButton.js
View File

@ -264,50 +264,63 @@ const PayrollTableWithButton = ({
)} )}
</div> </div>
<div > <div >
<div <div
className="expense-search d-flex align-items-center" className="expense-search d-flex align-items-center"
style={{ style={{
backgroundColor: "#4A5546", display: "flex",
boxShadow: "none", alignItems: "center",
outline: "none", backgroundColor: "#FFFFFF",
width: "auto", border: "1px solid #DBDBDB",
height: "42px", 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>
padding: "8px 12px", </div>
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
setCurrentPage(1); // Reset to 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 "> <table className="data-table custom-table ">

172
src/components/Pages/AppPAges/Purchase/purchase.js
View File

@ -623,38 +623,16 @@ export default function Purchase() {
<div className="main-container"> <div className="main-container">
<div className="d-flex p-2"> <div className="d-flex p-2">
<div className="expensecontainer d-flex flex-column pd-2"> <div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}> <div className="d-flex align-items-center mb-3" style={{
<button className="btn cus d-flex align-items-center" onClick={toggleModal}> justifyContent: "space-between",
{" "} gap: "10px",
+ Add Invoice marginBottom: "10px",
<img }}>
src={invoiceIcon} <h3 className="mb-1" style={{ margin: "0" }}>Purchase</h3>
alt="Invoice Icon" <div className="d-flex align-items-center" style={{ gap: "10px" }}>
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
+ Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{ <button style={{
backgroundColor: "#4A5546", backgroundColor: "#4A5546",
boxShadow: "none", boxShadow: "none",
@ -669,95 +647,57 @@ export default function Purchase() {
cursor: "pointer", cursor: "pointer",
}} }}
> >
+ Add Department Add Department
<img <img
src={department} src={department}
alt="Invoice Icon" alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }} style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/> />
</button> </button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<div <button className="btn cus d-flex align-items-center"
style={{ style={{
display: "flex",
gap: "16px",
justifyContent: "center", width: "180px",
alignItems: "center", height: "42px",
margin: "20px",
}} justifyContent:"center",
> textAlign:'center',
{/* Invoice due this month */}
<div }}
style={{ onClick={toggleModal}>
backgroundColor: "#fff8e6", {" "}
border: "1px solid #ffd700", Add Invoice
borderRadius: "8px", <img
padding: "16px 24px", src={invoiceIcon}
display: "flex", alt="Invoice Icon"
flexDirection: "column", style={{ width: "20px", height: "20px", marginLeft: "8px" }}
justifyContent: "center", />
alignItems: "flex-start", </button>
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div> </div>
</div> </div>
{/* Table Start */} {/* Table Start */}
@ -787,10 +727,10 @@ export default function Purchase() {
className="modal-container" className="modal-container"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
width: "700px", width: "800px",
backgroundColor: "white", backgroundColor: "white",
margin: "100px auto", margin: "100px auto",
padding: "20px", // padding: "10px",
borderRadius: "8px", borderRadius: "8px",
position: "relative", position: "relative",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
@ -867,7 +807,7 @@ export default function Purchase() {
</div> </div>
</div> </div>
<div className="d-flex col-md-12"> <div className="d-flex col-md-12">
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-5" style={{ paddingRight: "10px" }}>
<select <select
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
@ -946,9 +886,9 @@ export default function Purchase() {
</div> </div>
</div> </div>
<div className="d-flex col-md-12 mt-2"> <div className="d-flex col-md-12 mt-2 gap-4">
<div <div
className="form-row d-flex col-md-5 p-2 mt-2" className="form-row d-flex col-md-5 p-2 mt-2 "
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
border: "none", // Remove all borders border: "none", // Remove all borders

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

@ -34,14 +34,9 @@ const Header = () => {
const settingsRef = useRef(null); const settingsRef = useRef(null);
const lotteryRef = useRef(null); const lotteryRef = useRef(null);
const gasRef = useRef(null); const gasRef = useRef(null);
// const [selectedNav, setSelectedNav] = useState("/"); const [selectedNav, setSelectedNav] = useState("/");
const { Get, getAPI, Post } = useApi(); const { Get, getAPI, Post } = useApi();
const [parentLabel, setParentLabel] = useState("Expense"); // Parent label
const [selectedChild, setSelectedChild] = useState(""); // Selected child label
const [selectedNav, setSelectedNav] = useState("Expense");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const toggleMobileMenu = () => { const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen); setIsMobileMenuOpen(!isMobileMenuOpen);
@ -64,18 +59,6 @@ const Header = () => {
logOutUser(); logOutUser();
}; };
const handleChildSelection = (childLabel) => {
setSelectedChild(childLabel); // Update the selected child label
setExpenseDropdownOpen(false); // Close the dropdown
};
const toggleDropdown = () => {
setExpenseDropdownOpen(!expenseDropdownOpen);
if (expenseDropdownOpen) {
setSelectedChild(""); // Clear selected child if closing
}
};
const handleStoreManageClick = async () => { const handleStoreManageClick = async () => {
setDropdownVisible(!isDropdownVisible); setDropdownVisible(!isDropdownVisible);
@ -158,8 +141,6 @@ const Header = () => {
setLotteryDropdownOpen(false); setLotteryDropdownOpen(false);
setGasDropdownOpen(false); setGasDropdownOpen(false);
setDropdownVisible(false); setDropdownVisible(false);
setSelectedChild("");
}; };
useEffect(() => { useEffect(() => {
@ -170,42 +151,43 @@ const Header = () => {
}, []); }, []);
return ( return (
<header className="header-container"> <header className="header-container">
<div className="navbar-left"> <div className="navbar-left">
<img src={paisavalaLogo} alt="Logo" /> <img src={paisavalaLogo} alt="Logo" />
</div> </div>
<nav className="navbar navbar-expand-lg"> <nav className="navbar navbar-expand-lg">
<div className="container-fluid"> <div className="container-fluid">
{/* <Link to="/"> {/* <Link to="/">
<img src={logo} alt="Logo" className="logo" /> <img src={logo} alt="Logo" className="logo" />
</Link> */} </Link> */}
<button <button
className="navbar-toggler" className="navbar-toggler"
type="button" type="button"
onClick={toggleMobileMenu} onClick={toggleMobileMenu}
>
<i className="fas fa-bars"></i>
</button>
<div
className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`}
id="navbarNav"
> <ul className="navbar-nav me-auto">
{userRole === "store owner" && (
<li
className={`nav-item ${
selectedNav === "/owner-dashboard" ? "active" : ""
}`}
> >
<i className="fas fa-bars"></i> <Link
</button> className="nav-link"
<div to="/owner-dashboard"
className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`} onClick={() => {
id="navbarNav" setSelectedNav("/owner-dashboard");
> <ul className="navbar-nav me-auto"> closeDropdowns();
{userRole === "store owner" && ( }}
<li >
className={`nav-item ${selectedNav === "/owner-dashboard" ? "active" : "" Owner Dashboard
}`} </Link>
> </li>
<Link )}
className="nav-link"
to="/owner-dashboard"
onClick={() => {
setSelectedNav("/owner-dashboard");
closeDropdowns();
}}
>
Owner Dashboard
</Link>
</li>
)}
<li className={`nav-item ${selectedNav === "/" ? "active" : ""}`}> <li className={`nav-item ${selectedNav === "/" ? "active" : ""}`}>
<Link <Link
@ -219,80 +201,28 @@ const Header = () => {
Dashboard Dashboard
</Link> </Link>
</li> </li>
<li <li
className={`nav-item ${expenseDropdownOpen ? "active" : ""}`} className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
ref={expenseRef} ref={expenseRef}
onClick={() => { onClick={() => {
closeDropdowns();
setExpenseDropdownOpen(!expenseDropdownOpen); setExpenseDropdownOpen(!expenseDropdownOpen);
}} }}
style={{
display: "flex",
flexDirection: "column", // Ensures child label is displayed below
alignItems: "flex-start", // Align labels to the left
position: "relative",
marginTop: "12px",
}}
> >
{/* Parent Label */}
<a <a
className="nav-link" className="nav-link"
href="#" href="#"
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
> >
{parentLabel} Expense
</a> </a>
{/* Selected Child Label Below Parent Label */}
{selectedChild && (
<span
style={{
fontSize: "14px",
color: "white",
// borderBottom:'1px solid blue',
backgroundColor: "#282e26",
padding: "0px 20px",
borderRadius: '20px',
fontStyle: "normal",
}}
>
{selectedChild}
</span>
)}
{/* Dropdown Menu */}
{expenseDropdownOpen && ( {expenseDropdownOpen && (
<ul <ul className="nav-menu-drop">
className="nav-menu-drop"
style={{
listStyle: "none",
padding: "10px",
margin: "0px",
border: "1px solid #ccc",
borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
backgroundColor: "#fff",
position: "absolute",
top: "100%", // Ensures dropdown appears below labels
left: "0",
zIndex: 10,
transform: "translateY(20px)", // Moves dropdown below header area
}}
>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/expense" to="/expense"
onClick={() => handleChildSelection("Expense")} onClick={closeDropdowns}
style={{
display: "block",
padding: "8px 12px",
color: "#000",
textDecoration: "none",
}}
> >
Expense Expense
</Link> </Link>
@ -301,13 +231,7 @@ const Header = () => {
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/purchase" to="/purchase"
onClick={() => handleChildSelection("Purchase")} onClick={closeDropdowns}
style={{
display: "block",
padding: "8px 12px",
color: "#000",
textDecoration: "none",
}}
> >
Purchase Purchase
</Link> </Link>
@ -315,10 +239,10 @@ const Header = () => {
</ul> </ul>
)} )}
</li> </li>
<li <li
className={`nav-item ${selectedNav === "/payroll" ? "active" : "" className={`nav-item ${
}`} selectedNav === "/payroll" ? "active" : ""
}`}
> >
<Link <Link
className="nav-link" className="nav-link"
@ -333,8 +257,9 @@ const Header = () => {
</li> </li>
<li <li
className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : "" className={`nav-item ${
}`} selectedNav === "/reportDateSelection" ? "active" : ""
}`}
> >
<Link <Link
className="nav-link" className="nav-link"
@ -347,92 +272,92 @@ const Header = () => {
Reports Reports
</Link> </Link>
</li> </li>
{(userRole === "store owner" || userRole === "store manager") && ( {(userRole === "store owner" || userRole === "store manager") &&(
<li <li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`} className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
ref={generalRef} ref={generalRef}
onClick={() => { onClick={() => {
closeDropdowns(); closeDropdowns();
setGeneralDropdownOpen(!generalDropdownOpen); setGeneralDropdownOpen(!generalDropdownOpen);
}} }}
>
<a
className="nav-link"
href="#"
onClick={(e) => e.preventDefault()}
> >
<a General
className="nav-link" </a>
href="#" {generalDropdownOpen && (
onClick={(e) => e.preventDefault()} <ul className="nav-menu-drop">
> <li>
General <Link
</a> className="nav-menu-drop-item"
{generalDropdownOpen && ( to="/ATM"
<ul className="nav-menu-drop"> onClick={closeDropdowns}
<li> >
<Link ATM
className="nav-menu-drop-item" </Link>
to="/ATM" </li>
onClick={closeDropdowns} <li>
> <Link
ATM className="nav-menu-drop-item"
</Link> to="/Bank"
</li> onClick={closeDropdowns}
<li> >
<Link Bank
className="nav-menu-drop-item" </Link>
to="/Bank" </li>
onClick={closeDropdowns} <li>
> <Link
Bank className="nav-menu-drop-item"
</Link> to="/OtherIncome"
</li> onClick={closeDropdowns}
<li> >
<Link Other Income
className="nav-menu-drop-item" </Link>
to="/OtherIncome" </li>
onClick={closeDropdowns} <li>
> <Link
Other Income className="nav-menu-drop-item"
</Link> to="/SalesTax"
</li> onClick={closeDropdowns}
<li> >
<Link Sales Tax
className="nav-menu-drop-item" </Link>
to="/SalesTax" </li>
onClick={closeDropdowns} <li>
> <Link
Sales Tax className="nav-menu-drop-item"
</Link> to="/bankLedger"
</li> onClick={closeDropdowns}
<li> >
<Link Bank Ledger
className="nav-menu-drop-item" </Link>
to="/bankLedger" </li>
onClick={closeDropdowns}
>
Bank Ledger
</Link>
</li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/cashLedger" to="/cashLedger"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Cash Ledger Cash Ledger
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/OwnerDist" to="/OwnerDist"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Owner Distribution Owner Distribution
</Link> </Link>
</li> </li>
</ul> </ul>
)} )}
</li> </li>
)} )}
<li <li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`} className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
@ -547,191 +472,191 @@ const Header = () => {
</ul> </ul>
)} )}
</li> </li>
{userRole === "store owner" && ( {userRole === "store owner" &&(
<li <li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`} className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
ref={settingsRef} ref={settingsRef}
onClick={() => { onClick={() => {
closeDropdowns(); closeDropdowns();
setSettingsDropdownOpen(!settingsDropdownOpen); setSettingsDropdownOpen(!settingsDropdownOpen);
}} }}
> >
<a <a
className="nav-link" className="nav-link"
href="#" href="#"
onClick={(e) => e.preventDefault()} onClick={(e) => e.preventDefault()}
> >
Settings Settings
</a> </a>
{settingsDropdownOpen && ( {settingsDropdownOpen && (
<ul className="nav-menu-drop"> <ul className="nav-menu-drop">
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/store-information" to="/store-information"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Store Information Store Information
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/manage-users" to="/manage-users"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Manage Users Manage Users
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/manage-departments" to="/manage-departments"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Manage Departments Manage Departments
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/manage-expense-type" to="/manage-expense-type"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Manage Expense Type Manage Expense Type
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/other-income-type" to="/other-income-type"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Other Income Type Other Income Type
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/manage-vendor" to="/manage-vendor"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Manage Vendor Manage Vendor
</Link> </Link>
</li> </li>
<li> <li>
<Link <Link
className="nav-menu-drop-item" className="nav-menu-drop-item"
to="/manage-settings" to="/manage-settings"
onClick={closeDropdowns} onClick={closeDropdowns}
> >
Manage Settings Manage Settings
</Link> </Link>
</li> </li>
</ul> </ul>
)} )}
</li> </li>
)} )}
</ul> </ul>
<div className="d-flex align-items-center" > <div className="d-flex align-items-center" >
{/* <div className={`trail me-3 ${getColorClass()}`}> {/* <div className={`trail me-3 ${getColorClass()}`}>
<p>Remaining days: {remainingDays}</p> <p>Remaining days: {remainingDays}</p>
</div> */} </div> */}
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<div className="navbar-left"> <div className="navbar-left">
<div className="avatar-container" ref={avatarRef}> <div className="avatar-container" ref={avatarRef}>
<img <img
src={shopeKeeper} src={shopeKeeper}
className="avatar" className="avatar"
alt="User Avatar" alt="User Avatar"
/>
{/* Display role_name here */}
<div className="user-role">
{userRole && <span>{userRole}</span>}
</div>
{/* Settings Icon Button */}
<button
className="settings-button"
onClick={(e) => {
e.stopPropagation(); // Prevent the click from triggering the avatar's click
closeDropdowns();
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
}}
>
{/* Optional: Add an icon here */}
</button>
/> {settingsDropOpen && (
{/* Display role_name here */} <ul className="nav-menu-drop">
<div className="user-role"> <li>
{userRole && <span>{userRole}</span>} <Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
Profile
</Link>
</li>
{(userRole === "store owner" || userRole === "store manager") && (
<li>
<a
className="nav-menu-drop-item"
href="#"
onClick={(e) => {
e.preventDefault();
handleStoreManageClick();
}}
>
Switch Store
</a>
</li>
)}
{isDropdownVisible && (
<div className="dropdown-container">
<ul className="dropdown-list">
{loading ? (
<li>Loading...</li>
) : (
stores.map((store) => (
<li key={store.id} className="dropdown-item">
<a
href="#"
className="dropdown-link"
onClick={(e) => {
handleStoreClick(store.id);
window.location.reload();
}}
>
{store.name}
</a>
</li>
))
)}
</ul>
</div> </div>
{/* Settings Icon Button */} )}
<button <li>
className="settings-button" <a
onClick={(e) => { className="nav-menu-drop-item"
e.stopPropagation(); // Prevent the click from triggering the avatar's click href="#"
onClick={() => {
handleLogout();
closeDropdowns(); closeDropdowns();
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
}} }}
> >
{/* Optional: Add an icon here */} Logout
</button> </a>
</li>
{settingsDropOpen && ( </ul>
<ul className="nav-menu-drop"> )}
<li> </div>
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}> </div>
Profile
</Link>
</li>
{(userRole === "store owner" || userRole === "store manager") && (
<li>
<a
className="nav-menu-drop-item"
href="#"
onClick={(e) => {
e.preventDefault();
handleStoreManageClick();
}}
>
Switch Store
</a>
</li>
)}
{isDropdownVisible && (
<div className="dropdown-container">
<ul className="dropdown-list">
{loading ? (
<li>Loading...</li>
) : (
stores.map((store) => (
<li key={store.id} className="dropdown-item">
<a
href="#"
className="dropdown-link"
onClick={(e) => {
handleStoreClick(store.id);
window.location.reload();
}}
>
{store.name}
</a>
</li>
))
)}
</ul>
</div>
)}
<li>
<a
className="nav-menu-drop-item"
href="#"
onClick={() => {
handleLogout();
closeDropdowns();
}}
>
Logout
</a>
</li>
</ul>
)}
</div>
</div>