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

Compare commits

merge into: Sonali:23_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
...
pull from: 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

5 Commits
23_12__son ... main

Author SHA1 Message Date
Sonali 62d2ac5f03 Merge pull request '" dashboard"' (#6) from 27_12_Sonali into main 
Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/6
 2024-12-27 07:02:00 +00:00
sonali fcc0ce8ea2 " dashboard" 2024-12-27 12:30:35 +05:30
Sonali 71052fe021 Merge pull request '24_12_sonali' (#3) from 24_12_sonali into main 
Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/3
 2024-12-25 04:29:17 +00:00
sonali b139bcf40c " ui change " 2024-12-24 18:33:49 +05:30
Sonali 8b759c3fb3 Merge pull request '2112__sonali' (#2) from 2112__sonali into main 
Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/2
 2024-12-23 11:43:15 +00:00
22 changed files with 1600 additions and 1005 deletions
Show Stats Expand all files Collapse all files

BIN
public/Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

15
public/index.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="" />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
@ -29,14 +29,13 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style>
body {
background-image: url('Background.png');
background-color: #f9fff6;
background-image: url('../src/assets/Image/Pattern.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
font-family: Manrope;
font-family: "Comfortaa";
background-position: top;
background-repeat: no-repeat;
background-size: 100% auto;
}

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

@ -93,25 +93,34 @@ body {
display: flex;
align-items: center;
background-color: #FFFFFF;
width: 400px;
height: 90px;
height: 81px;
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 20px;
margin-top: 20px;
padding: 10px 20px;
border-radius: 20px;
}
.navbar {
margin-top: 20px;
width: 1200px;
height: 90px;
background-color: #FFFFFF;
padding: 10px 20px;
border-radius: 10px;
display: flex;
height: 81px;
padding: 10px 20px;
display: flex;
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 20px;
font-weight: bold;
font-size: 16px;
justify-content: space-between;
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
align-items: center;
box-sizing: border-box;
flex: 1; /* Takes the remaining space between navbar-left and the center header */
@ -123,7 +132,7 @@ body {
.navbar .nav-item.active .nav-link {
color: #ffffff; /* Active link color */
background-color: #282e26;
border-radius: 20px;
border-radius: 40px;
padding: 10px 15px;
font-weight: bold; /* Bold text for active link */
}
@ -144,7 +153,7 @@ body {
align-items: center;
}
.nav-link {
font-family: "Manrope";
font-family: 'Comfortaa', sans-serif;
font-size: 16px !important;
color: #002300;
@ -306,7 +315,25 @@ body {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 80%;
position: absolute;
/* margin-left: 140px; */
top: 100%; /* Positions dropdown below the parent */
left: 0;
background-color: #FFFFFF;
border: 1px solid #F6F6F6;
z-index: 1000;
border-radius: 10px;
min-width: 120px; /* Optional minimum width */
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.nav-menu-drop {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
/* margin-left: 140px; */
top: 100%; /* Positions dropdown below the parent */
@ -370,7 +397,7 @@ body {
.row {
display: flex;
flex-wrap: wrap;
gap: 40px;
gap: 20px;
}
.col-2 {
@ -414,6 +441,7 @@ body {
.table-darkcustom td {
text-align: start;
vertical-align: middle;
font-size: 16px;
}
/* Styling for the last header cell */
@ -484,7 +512,7 @@ body {
.search-icon {
position: absolute;
top: 50%;
top: 30%;
left: 15px; /* Adjust as needed */
transform: translateY(-50%);
pointer-events: none; /* Prevent clicks on the icon */
@ -493,6 +521,7 @@ body {
.search-container {
position: relative;
flex: 3;
margin-left: 0px;
max-width: 300px;
}
.search-container input {
@ -501,6 +530,7 @@ body {
height: 50px;
background: #f4f4f4;
border-radius: 50px;
border: none;
padding-left: 40px;
font-size: 16px;
@ -514,8 +544,8 @@ body {
}
.search-container-icon {
position: absolute;
left: 10px;
top: 50%;
left: 12px;
top: 47%;
transform: translateY(-50%);
pointer-events: none;
}
@ -706,6 +736,7 @@ body {
margin: auto;
background-color: white;
width: 90%;
/* Changed from 1600px to a percentage */
max-width: 1600px;
/* Maximum width for larger screens */
@ -725,6 +756,7 @@ h3 {
box-shadow: none;
outline: none;
width: auto;
height: 42px;
padding: 8px 12px;
font-size: 16px;
@ -738,6 +770,7 @@ h3 {
.expense-searchcontainerstart {
width: 90%;
}
.custbtn {
box-shadow: none;
@ -795,13 +828,15 @@ h3 {
.table-responsive th {
background-color: #282e26;
color: white;
}
.table-responsives {
border: 0.5px solid #f4f4f4;
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
}
.table-responsive {
border-left: 1px solid #ebeaf2;
border-right: 1px solid #ebeaf2;
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
}
.expensetableheader th:first-child {
@ -855,11 +890,14 @@ h5 {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-container {
max-width: 768px; /* Updated to 768px */
margin: 0;
background-color: white;
border-radius: 0.5rem;
}

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

@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
return (
<div>
<div
<div
style={{
display: "flex",
gap: "16px",
gap: "50px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
marginBottom:"20px"
}}
>
{/* Invoice due this month */}
@ -318,20 +318,30 @@ const ATMDepositTable = (props) => {
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "8px",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month
</p>
</div>
@ -341,20 +351,30 @@ const ATMDepositTable = (props) => {
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$19,864,63,521
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale
</p>
</div>
@ -364,20 +384,30 @@ const ATMDepositTable = (props) => {
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month
</p>
</div>
@ -388,7 +418,7 @@ const ATMDepositTable = (props) => {
<div className="searchcontainer">
<div
className="input-group"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
@ -483,9 +513,16 @@ const ATMDepositTable = (props) => {
<div
className="filterbutton"
style={{
marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px",
width: "40px",
height: "40px",
borderRadius: "60px",
padding: "15px",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderRadius: "60px",
padding: "15px",
display: "flex",
@ -503,6 +540,7 @@ const ATMDepositTable = (props) => {
style={{
fontSize: "14px",
display: "flex",
marginLeft:'6px',
alignItems: "center",
justifyContent: "center",
padding: "0",
@ -548,7 +586,7 @@ const ATMDepositTable = (props) => {
strokeLinejoin="round"
/>
</svg>
&nbsp; Filter
&nbsp;
</button>
<ul
@ -659,7 +697,12 @@ const ATMDepositTable = (props) => {
{/* Table of Invoices */}
<table className="table table-borderless table-responsive">
<thead>
<tr>
<tr style={{
backgroundColor: '#282e26',
color: '#ffffff',
height: '30px', // Add height for row spacing
textAlign: "center",
}}>
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
(header, index) => (
<th
@ -668,7 +711,7 @@ const ATMDepositTable = (props) => {
style={{
paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer",
textAlign: "start",
textAlign: "center",
alignContent: "center",
backgroundColor:'#282e26',
color:'#ffffff'
@ -712,11 +755,11 @@ const ATMDepositTable = (props) => {
{currentInvoices.length !== 0 ?
currentInvoices.map((invoice) => (
<tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "left" }}>
<td style={{ cursor: "pointer", textAlign: "center" }}>
{invoice.date}
</td>
<td style={{ cursor: "pointer", textAlign: "left" }}>
<td style={{ cursor: "pointer", textAlign: "center" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
@ -724,8 +767,8 @@ const ATMDepositTable = (props) => {
: "N/A"}
</span>
</td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}>
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'center' }}>
<span style={getStatusStyle(invoice.transaction_type)}>
{invoice.transaction_type ?
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :

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

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

@ -148,31 +148,33 @@ function AtmDeposit() {
<div className="dashboard-container">
<ToastContainer />
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
Add Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div>
</div>
<div className="formcontainer">
@ -187,8 +189,13 @@ function AtmDeposit() {
<form onSubmit={handleSubmit}>
<div className=" col-md-12 row mb-3">
<div className="col-md-4 mb-3">
<div className=" col-md-12 row mb-3"
style={{
gap: "6%",
paddingLeft: "5%", // Add equal padding
// paddingRight: "%",
}}>
<div className="col-md-3 mb-2">
<input
type="date"
className="form-control-borderless"
@ -200,13 +207,13 @@ function AtmDeposit() {
</div>
<div className="col-md-3 mb-3">
<select
className="form-select custom-select"
className="input-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
>
<option value="">Select a type</option>
<option value="">Select Cash type</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
@ -214,14 +221,14 @@ function AtmDeposit() {
))}
</select>
</div>
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
<div className="col-md-3 mb-4">
<div className="input-group" style={{ width: "100%" }}>
{/* <span className="input-group-text" style={{ border: "none" }}>
USD
</span> */}
<input
type="number"
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
style={{ flex: 1, }}
className="form-control-borderless"
name="cash_amount"
placeholder="Amount"
@ -237,7 +244,7 @@ function AtmDeposit() {
</div>
</div>
<div className="mb-3 col-md-4">
{/* <div className="mb-3 col-md-4">
<input
type="text"
className="form-control-borderless"
@ -246,7 +253,7 @@ function AtmDeposit() {
onChange={handleChange}
placeholder="Notes"
/>
</div>
</div> */}
</div>
<div className="col-md-3 row">
@ -273,16 +280,16 @@ function AtmDeposit() {
<div className="">
<div className="d-flex justify-content-end">
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
Save
</button>
</div>
@ -295,6 +302,7 @@ function AtmDeposit() {
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}}
>
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />

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

@ -161,26 +161,28 @@ function BankDeposit() {
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
Add Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div>
</div>
<div className="formcontainer">
@ -189,7 +191,9 @@ function BankDeposit() {
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px"
borderRadius: "40px",
}}
>
<form onSubmit={handleSubmit}>
@ -197,8 +201,11 @@ function BankDeposit() {
<div className="col-md-12 row mb-3">
<div className="mb-3 col-md-4">
<div className="col-md-12 row " style={{
gap: "4%",
marginLeft:"3px"
}}>
<div className=" col-md-3">
<input
type="date"
className="form-control-borderless"
@ -208,6 +215,30 @@ function BankDeposit() {
required
/>
</div>
<div className="mb-3 col-md-4">
<select
className="input-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
style={{ borderBottom: "1px solid #e4e5e7" }}
>
<option value="" enable>
Select Cash type
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div>
<div className="mb-3 col-md-4">
<select
className="form-control-borderless"
@ -224,24 +255,6 @@ function BankDeposit() {
))}
</select>
</div>
<div className="mb-3 col-md-3">
<select
className="form-select custom-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
>
<option value="" enable>
Select a type
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div>
<div
@ -251,23 +264,24 @@ function BankDeposit() {
alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing
}}
>
<div
className="form-group "
className="form-group col-3"
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1", // Allow the field to adjust in size
}}
>
<div className="input-group">
<input
type="text"
style={{ border: "none", width: "100%" }}
className="form-control-borderless"
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
className="form-control"
name="cash_amount"
placeholder="Cash Amount"
value={formData.cash_amount || ""}
@ -278,19 +292,19 @@ function BankDeposit() {
</div>
<div
className="form-group "
className="form-group "
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1",
}}
>
<div className="input-group">
<input
type="number"
style={{ border: "none", width: "100%" }}
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
className="form-control-borderless"
name="cheque_amount"
placeholder="Cheque Amount"
@ -305,12 +319,12 @@ function BankDeposit() {
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
border:"none",
height: "50px",
flex: "1",
}}
>
<input
{/* <input
type="text"
className="form-control-borderless"
name="note"
@ -321,22 +335,22 @@ function BankDeposit() {
border: "none",
width: "100%",
}}
/>
/> */}
</div>
</div>
</div>
<div className="d-flex justify-content-end">
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
Save
</button>
</div>

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

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

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

@ -2,6 +2,7 @@
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
@ -9,6 +10,20 @@
border-radius: 40px;
}
.invoice-table-container {
max-width: 1320px;
width: 100%;
border-radius: 40px;
height: 735px;
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
margin: 0 auto; /* Ensures centering in case of block layout */
}
.dropdown-toggle::after {
display: none; /* This will remove the default dropdown arrow */
}
@ -18,24 +33,27 @@
}
.button-groups {
display: flex;
margin-left: 35%;
justify-content: space-between; /* Space between buttons */
align-items: center; /* Center align buttons vertically */
margin: 0 auto; /* Center the entire button group */
gap: 10px; /* Adjust the spacing between buttons */
background-color: #ffffff;
width: auto;
width: auto; /* Fixed width */
height: 60px; /* Fixed height */
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 44px;
padding: 10px 50px;
padding: 0 8px; /* Equal padding on left and right sides */
}
}
/* Active button styles */
.btn.active {
/* Active button styles */
.btn.active {
background-color: #ffaf32; /* Yellow background */
border-radius: 20px;
border-radius: 27px;
color: black; /* Black text */
}
padding: 10px 20px; /* Ensure padding consistency for buttons */
}
.form-container {
width: 1328px;
@ -56,11 +74,11 @@
.form-control-borderless {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
font-size: 16px;
font-weight: bold;
color: #999999;
background-color: #fff;
background-clip: padding-box;
border: none;
@ -89,7 +107,7 @@
.input-group {
flex-wrap: nowrap;
border-radius: 50px;
background-color: #f4f4f4;
/* background-color: #f4f4f4; */
}
.input-group .form-control {
@ -101,19 +119,26 @@
.table th {
justify-content: center;
height: 60px;
background-color: #f9f9f9;
height: 40px;
align-items: center;
/* margin-right: 50px; */
background-color: #ffffff;
font-weight: bold;
}
.table td {
border-bottom: .5px solid #f4f4f4;
text-align: left;
border-bottom: 1px solid #EBEAF2;
text-align: center;
vertical-align: middle;
justify-content: center;
}
.table tbody tr:hover {
background-color: #f1f1f1;
}
.badge {
@ -127,10 +152,13 @@
border-end-start-radius: 24px;
border-end-end-radius: 24px;
padding: 10px;
background-color: #f4f4f4;
border-bottom: 2px solid #EBEAF2;
background-color: #ffffff;
border-left: 2px solid #ebeaf2;
border-Right: 2px solid #ebeaf2;
justify-content: center;
align-items: center;
gap: 10px;
}
.pgbtn {
@ -139,7 +167,7 @@
border: #ced4da;
width: 30px;
height: 30px;
border-radius: 30px;
border-radius: 50%;
}
.active-pgbtn {
@ -147,11 +175,17 @@
border: 1px solid #00230007;
width: 30px;
height: 30px;
border-radius: 30px;
border-radius: 50%;
}
.filterbutton {
background-color: #f4f4f4;
background: #FFFFFF;
border: 1px solid #DBDBDB;
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
gap:'20px'
}
.dropdown-item {
@ -324,4 +358,22 @@ input[type="color"]:focus,
box-shadow: none; /* Remove any shadow */
}
/* for selct dropdown style --> dashboard // */
.input-select{
border: none;
border-bottom: 1px solid #ccc;
background-color: transparent;
color: #999999;
width: 100%;
outline: none;
font-size: 16px;
font-weight: bold;
margin-bottom: 35px;
}

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

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

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

@ -19,13 +19,13 @@ function PayInvoice() {
const navigate = useNavigate();
const [activeButton, setActiveButton] = useState('');
const location = useLocation();
useEffect(() => {
setActiveButton(location.pathname); // Set the active button based on the current location
}, [location.pathname]);
const [activeButton, setActiveButton] = useState('');
const location = useLocation();
useEffect(() => {
setActiveButton(location.pathname); // Set the active button based on the current location
}, [location.pathname]);
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null);
@ -48,7 +48,7 @@ function PayInvoice() {
date: "",
status: "paid",
pay_method_status: "pay_now",
pay_method: "",
pay_method: "cash",
amount: "",
remaining_amount: "", // Initialize as empty string or 0
discount: 0,
@ -63,7 +63,7 @@ function PayInvoice() {
bank: "",
});
const makeBlank = ()=>{
const makeBlank = () => {
setFormData({
store_id: user.store,
invoice_no: "",
@ -200,14 +200,14 @@ function PayInvoice() {
setInitialAmount("");
}
};
const handleSubmit = async (e) => {
e.preventDefault();
// Check if the payment method is selected
if (!formData.pay_method) {
toast.error("Please select a payment method before submitting.");
return; // Prevent form submission if payment method is not selected
toast.error("Please select a payment method before submitting.");
return; // Prevent form submission if payment method is not selected
}
const payAmount = parseFloat(formData.pay_amount);
@ -218,58 +218,58 @@ function PayInvoice() {
if (newRemainingAmount < 0) {
toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
return; // Prevent form submission if payment exceeds remaining amount
toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
return; // Prevent form submission if payment exceeds remaining amount
}
const status = newRemainingAmount <= 0 ? "paid" : "partially_paid"; // If remaining is 0 or less, mark it as 'paid'
const finalRemainingAmount =
newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
let updatedFormData = {
...formData,
remaining_amount: finalRemainingAmount, // Update the remaining amount
status: status, // Set the status based on the remaining amount
cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
bank: formData.pay_method === "bank" ? formData.bank : null,
...formData,
remaining_amount: finalRemainingAmount, // Update the remaining amount
status: status, // Set the status based on the remaining amount
cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
bank: formData.pay_method === "bank" ? formData.bank : null,
};
// Check if the pay_method_status is 'credit_invoice'
if (updatedFormData.pay_method_status !== "credit_invoice") {
updatedFormData = {
...updatedFormData,
pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
};
updatedFormData = {
...updatedFormData,
pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
};
}
console.log("Submitting:", updatedFormData);
try {
if (!updatedFormData.id) {
toast.error("No invoice selected. Please select an invoice before submitting.");
return;
}
if (!updatedFormData.id) {
toast.error("No invoice selected. Please select an invoice before submitting.");
return;
}
const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
if (response && response.status === 200) {
console.log("Submission successful:", response.data);
toast.success("Invoice payment submitted successfully!");
setReloadData(!reloadData);
makeBlank();
// window.location.reload(); // Reload the page to reflect changes
} else {
setReloadData(!reloadData);
if (response && response.status === 200) {
console.log("Submission successful:", response.data);
toast.success("Invoice payment submitted successfully!");
setReloadData(!reloadData);
makeBlank();
// window.location.reload(); // Reload the page to reflect changes
} else {
setReloadData(!reloadData);
console.error("Failed to submit:", response.data);
toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
}
console.error("Failed to submit:", response.data);
toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
}
} catch (error) {
setReloadData(!reloadData);
console.error("Error:", error);
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
console.error("Error:", error);
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
}
};
};
const handleCancel = () => {
navigate("/");
@ -300,50 +300,60 @@ function PayInvoice() {
return (
<div className="dashboard-container">
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div>
</div>
</div>
<div className="formcontainer">
<div
className="container"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius:"40px"
borderRadius: "40px"
}}
>
<form onSubmit={handleSubmit}>
<div className="">
</div>
<div className="col-md-12 row" style={{gap:"10%"}}>
<div className="mb-3 col-md-2" >
<div
className="col-md-12 row"
style={{
gap: "12%",
paddingLeft: "3%", // Add equal padding
// paddingRight: "%",
}}
>
<div className="mb-3 col-md-3">
<input
type="date"
className="form-control-borderless"
@ -355,16 +365,16 @@ function PayInvoice() {
<div className="mb-3 col-md-3">
<select
className="form-control-borderless"
className="input-select"
name="vendor_department"
value={formData.vendor_department}
onChange={(e) => {
const selectedValue = e.target.value;
if (selectedValue === "add-vendor") {
handleShow(); // Modal ko open karne ke liye function
handleShow(); // Function to open modal
setFormData((prevData) => ({
...prevData,
vendor_department: "", // Field ko reset karne ke liye
vendor_department: "", // Reset the field
}));
} else {
handleChange(e); // Existing handler for normal options
@ -373,6 +383,7 @@ function PayInvoice() {
>
<option value="">Select Vendor</option>
<option value="add-vendor">Add Vendor</option>{" "}
{/* Add Vendor Option */}
{vendors
.filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
@ -393,36 +404,24 @@ function PayInvoice() {
placeholder="Invoice No"
onChange={handleChange}
/>
{/* <select
className="form-control-borderless"
onChange={(e) =>
handleInvoiceSelect(
filteredInvoices.find((inv) => inv.id === e.target.value)
)
}
>
<option value="">Select Invoice</option>
{filteredInvoices.map((invoice) => (
<option key={invoice.id} value={invoice.id}>
{invoice.invoice_no}
</option>
))}
</select> */}
</div>
</div>
<div className="mb-3 col-md-12 row">
<div className="col-md-2">
<div className="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} >
<div className="col-md-3 " >
<input
name="amount"
type="text"
className="form-control-borderless"
className="form-control"
value={formData.amount}
readOnly
placeholder="Amount"
style={{ backgroundColor: "#fafafa" }}
/>
</div>
<div className="col-md-2">
<div className="col-md-2" >
<input
type="text"
className="form-control-borderless"
name="pay_amount"
@ -454,71 +453,32 @@ function PayInvoice() {
.slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
/>
</div>
<div className="col-md-3">
<input
type="text"
className="form-control"
placeholder="Grand Total"
value={grandTotal || ""}
readOnly
style={{
border: 'none', // Remove all borders
backgroundColor:'transparent',
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
outline: 'none', // Remove outline
padding: '6px 0', // Optional: Add padding to the top and bottom
}}
/>
</div>
<input
type="text"
className="form-control"
placeholder="Grand Total"
value={grandTotal || ""}
readOnly
style={{
backgroundColor: '#fafafa',
}}
/>
</div>
<div
className=" d-flex align-items-center"
style={{
border: '2px solid #ACB4AA',
padding: '5px 40px',
width: 'fit-content',
borderRadius: '40px',
}}
>
{['cash', 'cheque', 'bank'].map((method) => (
<div className="me-3" 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 className="">
{/* <div className="col-md-3 mt-4">
<input
name="after_discount"
@ -531,45 +491,86 @@ function PayInvoice() {
/>
</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="col-md-6">
<div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
{formData.pay_method === "cheque" && (
<div className="">
<div className="col-md-12 row">
<div className="mb-3 col-md-6">
<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 className="mb-3 col-md-6">
<input
required
type="text"
className="form-control-borderless"
name="cheque_no"
placeholder="Check Number"
value={formData.cheque_no}
onChange={handleChange}
/>
</div>
<div className="row "> {/* Use row class for Bootstrap grid */}
<div className="col-md-2 mb-3"> {/* First column for bank select */}
<select
required
className="form-control-borderless" // Keep Bootstrap styles
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 className="col-md-2 mb-3"> {/* Second column for cheque number input */}
<input
required
type="text"
className="form-control-borderless"
name="cheque_no"
placeholder="Check Number"
value={formData.cheque_no}
onChange={handleChange}
/>
</div>
</div>
)}
{formData.pay_method === "bank" && (
{formData.pay_method === "Bank Card/ACH/EFT" && (
<div className="mb-3">
<div className="col-md-12 row">
<div className="mb-3 col-md-6">
@ -614,19 +615,19 @@ function PayInvoice() {
</div>
)}
</div>
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
>
Cancel
</button>
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
Save
</button>
</div>
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
Save
</button>
</div>
</form>
</div>
</div>
@ -638,7 +639,7 @@ function PayInvoice() {
}}
>
<TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
<ToastContainer/>
<ToastContainer />
<AddVendorModal
show={showModal}
handleClose={handleClose}

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

@ -312,13 +312,15 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return (
<div>
<ToastContainer />
<div
<div
style={{
display: "flex",
gap: "16px",
gap: "50px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
marginBottom:"20px"
}}
>
{/* Invoice due this month */}
@ -326,20 +328,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "8px",
padding: "16px 24px",
borderRadius: "20px",
padding: "24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month
</p>
</div>
@ -349,20 +361,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "385px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$19,864,63,521
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale
</p>
</div>
@ -372,33 +394,42 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
borderRadius: "20px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "400px",
width: "390px",
height: "130px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
<p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month
</p>
</div>
</div>
<div className="d-flex align-items-center mb-3">
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
{/* Search Bar */}
<div className="searchcontainer" style={{ gap: "10px" }}>
<div
className="input-group"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
@ -495,10 +526,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div
className="filterbutton"
style={{
marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px",
height: "50px",
// marginLeft: "10px",
width: "40px",
height: "40px",
borderRadius: "60px",
padding: "15px",
display: "flex",
@ -516,6 +547,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{
fontSize: "14px",
display: "flex",
marginLeft:'6px',
alignItems: "center",
justifyContent: "center",
padding: "0",
@ -561,7 +593,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
strokeLinejoin="round"
/>
</svg>
&nbsp; Filter
&nbsp;
</button>
<ul
@ -649,7 +681,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</div>
</div> */}
</li>
<li className="text-center mt-2">
<li className="text-center mt-2" >
<button
className="btn btn-primary"
style={{ width: "163px", height: "40px" }}
@ -673,13 +705,24 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
{/* Table of Invoices */}
<table className="table table-borderless table-responsive">
<thead>
<tr>
<tr
style={{
backgroundColor: '#282e26',
color: '#ffffff',
height: '30px', // Add height for row spacing
}}
>
{[
"date",
"vendor_department_name",
"amount",
"remaining_amount",
"updated date",
// "updated date",
"payment_method",
"status",
"actions",
@ -692,8 +735,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
cursor: "pointer",
backgroundColor: '#282e26',
color: '#ffffff',
textAlign: "start",
textAlign: "center",
alignContent: "center",
// Add a border for separation
}}
>
{header
@ -705,6 +749,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div className="dropdown">
<ul className="dropdown-menu" aria-labelledby="actionDropdown">
{/* <li>
<a
className="dropdown-item"
@ -752,9 +797,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
>
{invoice.remaining_amount}
</td>
<td onClick={() => handleCellClick(invoice, "updated_at")}>
{/* <td onClick={() => handleCellClick(invoice, "updated_at")}>
{invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
</td>
</td> */}
<td onClick={() => handleCellClick(invoice, "payment_method")}>
<span style={getPaymentMethodStyle(invoice.pay_method)}>
{invoice.pay_method &&
@ -768,7 +813,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
.join(" ")}
</span>
</td>
<td onClick={() => handleCellClick(invoice, "status")}>
<td onClick={() => handleCellClick(invoice, "status")}
>
<span style={getStatusStyle(invoice.status)}>
{invoice.status &&
invoice.status
@ -866,19 +913,71 @@ const getPaymentMethodStyle = (method) => ({
});
const statusStyles = {
All: { backgroundColor: "#4545DB" },
// draft: { backgroundColor: "#4545DB7C" },
unpaid: { backgroundColor: "#ff2024" },
partially_paid: { backgroundColor: "#0c8ce9" },
draft: {
backgroundColor: "#D1D1EF",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
unpaid: {
backgroundColor: "#ff2024",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
paid: {
backgroundColor: "#198f51",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
partially_paid: {
backgroundColor: "#0c8ce9",
color: "#fff",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Fixed width
height: "30px", // Fixed height
fontSize: "14px",
textAlign: "center",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
};
const getStatusStyle = (status) => ({
...(statusStyles[status] || { backgroundColor: "#198f51" }),
width: "130px", // Ensure consistent fixed width
height: "30px", // Ensure consistent fixed height
borderRadius: "5px",
padding: "10px 20px",
padding: "5px 10px",
color: "#fff",
});
const getCountClass = (status) => ({
...statusStyles[status],
padding: "10px",

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

@ -952,7 +952,7 @@ export default function Expense() {
<div
className="input-group-prepend"
style={{
background: "#ffffff",
backgroundColor: "#ffffff",
height: "100%",
display: "flex",

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

@ -126,32 +126,44 @@ const PayrollTable = ({
draft: {
backgroundColor: "#D1D1EF",
color: "#fff",
borderRadius: "30px",
borderRadius: "5px",
padding: "5px 10px",
width: "130px", // Set a fixed width
height: "30px", // Set a fixed height
fontSize:"14px"
},
unpaid: {
backgroundColor: "#ff2024",
color: "#fff",
borderRadius: "10px",
borderRadius: "5px",
padding: "5px 20px",
width: "130px", // Set a fixed width
height: "30px", // Set a fixed height
fontSize:"14px",
textAlign: 'center',
alignItems: 'center'
},
paid: {
backgroundColor: "#198f51",
color: "#fff",
borderRadius: "10px",
borderRadius: "5px",
padding: "5px 20px",
textAlign: 'center',
alignItems: 'center'
alignItems: 'center',
width: "130px", // Set a fixed width
height: "30px", // Set a fixed height
fontSize:"14px"
},
partially_paid: {
backgroundColor: "#0c8ce9",
color: "#fff",
borderRadius: "10px",
borderRadius: "5px",
padding: "5px 20px",
textAlign: 'center',
alignItems: 'center'
alignItems: 'center',
width: "130px", // Set a fixed width
height: "30px", // Set a fixed height
fontSize:"14px"
},
};
const paymentMethodStyles = {
@ -250,42 +262,56 @@ const PayrollTable = ({
</button> */}
</div>
<div style={{ marginRight: "60%" }}>
<div style={{ marginRight: "58%" }}>
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
display: "flex",
alignItems: "center",
backgroundColor: "#FFFFFF",
border: "1px solid #DBDBDB",
borderRadius: "10px",
color: "#F4FFEE",
// boxSizing: "border-box",
cursor: "pointer",
width: "170px",
gap: "10px",
}}
>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<span
style={{
fontFamily: "'Comfortaa'",
fontStyle: "normal",
fontWeight: "400",
fontSize: "16px",
padding: "5px",
color: "#000000",
}}
>
Show Rows:
</span>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
borderRadius: "0px 10px 10px 0px",
color: "#F4FFEE",
fontFamily: "'Comfortaa'",
fontStyle: "normal",
fontWeight: "700",
fontSize: "16px",
lineHeight: "18px",
padding: "5px 8px",
border: "none",
cursor: "pointer",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
setCurrentPage(1); // Reset to first page on change
setCurrentPage(1); // Reset to the first page on change
}}
>
<option value={5}>5</option>
@ -294,7 +320,9 @@ const PayrollTable = ({
<option value={20}>20</option>
</select>
</div>
</div>
</div>
</div>
<table className="data-table custom-table ">

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

@ -107,15 +107,15 @@ function ManageDepartments() {
(dept) => dept.type === "department"
);
return (
<div className="store-container">
<div className="" style={{marginTop:"5%"}}>
<ToastContainer />
<p className="setting-title">Manage Departments</p>
<div className="create-department-section">
{/* <p className="setting-title">Manage Departments</p> */}
<div className="department-container">
<div className="input-container">
<div className="input-row">
<input
type="text"
placeholder="New Department"
placeholder="Enter Department Name"
className="input-field"
value={editDepartmentId ? editDepartmentTitle : newDepartment}
onChange={(e) => {
@ -125,15 +125,22 @@ function ManageDepartments() {
setNewDepartment(e.target.value);
}
}}
style={{
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
/>
<button className="dept-button" onClick={handleSaveDepartment}>
{editDepartmentId ? "Update" : " + Add"}
<button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
{editDepartmentId ? "Update Department" : " + Add Department"}
</button>
</div>
</div>
</div>
<div className="show-department-section">
<div className="store-container">
<div className="show-department-section">
<div className="dept-cards-row">
{filteredDepartments.length === 0 ? (
<p
@ -201,6 +208,8 @@ function ManageDepartments() {
</div>
</div>
</div>
</div>
);
}

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

@ -277,42 +277,57 @@ const ManageUserTable = ({
</div>
)}
</div>
<div style={{ marginRight: "70%" }}>
<div style={{ marginRight: "69%" }}>
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
display: "flex",
alignItems: "center",
backgroundColor: "#FFFFFF",
border: "1px solid #DBDBDB",
borderRadius: "10px",
color: "#F4FFEE",
// boxSizing: "border-box",
cursor: "pointer",
width: "170px",
gap: "10px",
}}
>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<span
style={{
fontFamily: "'Comfortaa'",
fontStyle: "normal",
fontWeight: "400",
fontSize: "16px",
padding: "5px",
color: "#000000",
}}
>
Show Rows:
</span>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
borderRadius: "0px 10px 10px 0px",
color: "#F4FFEE",
fontFamily: "'Comfortaa'",
fontStyle: "normal",
fontWeight: "700",
fontSize: "16px",
lineHeight: "18px",
padding: "5px 8px",
border: "none",
cursor: "pointer",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
setCurrentPage(1); // Reset to first page on change
setCurrentPage(1); // Reset to the first page on change
}}
>
<option value={5}>5</option>
@ -321,7 +336,9 @@ const ManageUserTable = ({
<option value={20}>20</option>
</select>
</div>
</div>
</div>
</div>
<table className="data-table custom-table ">

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

@ -117,17 +117,17 @@ function ManageUsers() {
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!",
});
// Check if the user clicked the confirm button
if (!result.isConfirmed) return; // Exit if the user cancels
try {
await Delete("user", id);
setUsers((prev) => prev.filter((user) => user.id !== id)); // Remove the user from the list
toast.success("User deleted successfully!");
} catch (error) {
console.error("Error deleting user:", error);
// Check if the error response contains the specific message
if (error.response && error.response.data && error.response.data.detail === "Store owners cannot be deleted.") {
toast.error("Store owners cannot be deleted.");
@ -139,22 +139,22 @@ function ManageUsers() {
const handleSaveUser = async () => {
const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/; // Email regex without #
const phoneRegex = /^[0-9]{10}$/; // US phone number regex for exactly 11 digits (starts with '1' for the country code)
// Validate email
if (!emailRegex.test(email)) {
toast.error("Please enter a valid email address (no '#' allowed).");
return;
}
// Validate phone number
if (!phoneRegex.test(phoneNumber)) {
toast.error("Please enter a valid US phone number (11 digits, starts with '1').");
return;
}
// Derive role name from roles array
const roleName = roles.find((r) => String(r.id) === String(role))?.name || "";
const payload = {
first_name: fullName,
email: email,
@ -165,35 +165,35 @@ function ManageUsers() {
groups: [],
ms_role_name: roleName, // Derived role name
};
try {
if (currentUserId) {
// Update user
await Patch("user", currentUserId, payload);
// Update local state
setUsers((prevUsers) =>
prevUsers.map((user) =>
user.id === currentUserId ? { ...user, ...payload } : user
)
);
toast.success("User updated successfully!");
} else {
// Add new user
await Post("user", payload);
// Fetch updated users
const updatedUsers = await Get("user");
setUsers(updatedUsers.results);
toast.success("User added successfully!");
}
handleCloseUserModal();
} catch (error) {
console.error("Error saving user:", error);
// Check for specific error responses
if (error.response && error.response.data) {
if (error.response.data.ms_role === "You cannot change the role of a store owner.") {
@ -208,23 +208,23 @@ function ManageUsers() {
}
}
};
const handleAssignOwnerSubmit = async (e) => {
e.preventDefault();
try {
const response = await Post("assignAsOwner", { email: ownerEmail });
// If successful, show success message
toast.success("User assigned as owner successfully!");
setOwnerEmail(""); // Clear input
fetchUsersAndRoles(); // Refresh the users and roles
handleCloseAssignOwnerModal(); // Close the modal
} catch (error) {
console.error("Error assigning owner:", error);
// Check if the error contains a specific message
if (error.response && error.response.data && error.response.data.error === "User with this email does not exist.") {
toast.error("The email you provided does not exist.");
@ -233,7 +233,7 @@ function ManageUsers() {
}
}
};
const handleSwitchChange = (id) => {
setStatus((prevStatus) => !prevStatus);
@ -269,16 +269,16 @@ function ManageUsers() {
const numericValue = value.replace(/[^0-9]/g, '');
setFormData((prevData) => ({
...prevData,
pincode: numericValue,
...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
...prevData,
pincode: numericValue,
...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
}));
// Trigger fetching location details if the length is valid
if (numericValue.length === 5 || numericValue.length === 6) {
fetchLocationDetails(numericValue);
fetchLocationDetails(numericValue);
}
};
};
// Handle pincode blur
const handlePincodeBlur = () => {
const { pincode } = formData;
@ -391,68 +391,68 @@ function ManageUsers() {
<>
<ToastContainer />
<div className="due-days">
<div className="header-row">
<div className="setting-title">Manage Users</div>
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
<button
className="btn cus d-flex align-items-center"
onClick={() => handleShowUserModal()} // Open modal for adding a user
>
+ Add New User
<img
<div className="header-row">
<div className="setting-title">Manage Users</div>
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
<button
className="btn cus d-flex align-items-center"
onClick={() => handleShowUserModal()} // Open modal for adding a user
>
+ Add New User
<img
src={userIcon}
alt="user Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => handleShowStoreModal()} // Open modal for adding a user
>
+ Add New Store
<img
</button>
<button
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => handleShowStoreModal()} // Open modal for adding a user
>
+ Add New Store
<img
src={storeIcon}
alt="store Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
>
+ Assign Existing User As Owner
<img
</button>
<button
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
>
+ Assign Existing User As Owner
<img
src={ownerIcon}
alt="owner Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
</div>
</div>
</button>
</div>
</div>
<ManageUserTable
data={users}
@ -469,18 +469,24 @@ function ManageUsers() {
show={true}
handleClose={handleCloseUserModal}
title={currentUserId ? "Edit User" : "Add New User"}
width="1054px"
width="700px"
>
<form>
<div className="form-group d-flex flex-column">
<div className="d-flex align-items-center mb-3">
<div className="form-group d-flex flex-column p-5">
<div className="d-flex align-items-center mb-3 ">
<input
type="text"
className="input-field"
placeholder="Full Name"
value={fullName}
onChange={(e) => setFullName(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
<input
type="email"
@ -488,14 +494,20 @@ function ManageUsers() {
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
<div className="d-flex align-items-center mb-3">
<input
type="tel"
className="input-field"
placeholder="Phone Number (without country code)"
placeholder="Phone Number "
value={phoneNumber}
onChange={(e) => {
@ -505,13 +517,25 @@ function ManageUsers() {
}
}}
maxLength={10}
style={{ width: "483px", marginRight: "10px" }}
style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
<select
className="input-field"
value={role}
onChange={(e) => setRole(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
style={{
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
>
<option value="">Select Role for User</option>
{roles.map((r) => (
@ -537,7 +561,7 @@ function ManageUsers() {
style={{
marginRight: "40px",
padding: "4px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
@ -565,10 +589,10 @@ function ManageUsers() {
show={true}
handleClose={handleCloseStoreModal}
title={"Add New Store"}
width="1054px"
width="700px"
>
<form>
<div className="form-group">
<div className="form-group p-5">
{/* Wrapper for Flexbox */}
<div className="d-flex flex-wrap">
{/* Left Side */}
@ -585,7 +609,12 @@ function ManageUsers() {
store_name: e.target.value,
}))
}
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
<div className="mb-3">
@ -600,7 +629,12 @@ function ManageUsers() {
address_line1: e.target.value,
}))
}
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
<div className="mb-3">
@ -610,7 +644,12 @@ function ManageUsers() {
placeholder="City"
value={formData.city}
readOnly
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
</div>
@ -625,7 +664,12 @@ function ManageUsers() {
value={formData.pincode}
onChange={handlePincodeChange}
onBlur={handlePincodeBlur}
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
maxLength={5}
/>
</div>
@ -639,7 +683,12 @@ function ManageUsers() {
placeholder="State"
value={formData.state}
readOnly
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
<div className="mb-3">
@ -649,7 +698,12 @@ function ManageUsers() {
placeholder="Country"
value={formData.country}
readOnly
style={{ width: "100%" }}
style={{
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
</div>
@ -661,7 +715,7 @@ function ManageUsers() {
style={{
marginRight: "40px",
padding: "4px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
@ -687,26 +741,32 @@ function ManageUsers() {
<ReusableModal
show={true}
handleClose={handleCloseAssignOwnerModal}
title="Assign Admin"
title="Assign Admin as Owner"
width="600px"
>
<form onSubmit={handleAssignOwnerSubmit}>
<div className="form-group d-flex align-items-center mt-1">
<div className="form-group d-flex flex-column mt-1 p-3 ">
<input
type="email"
className="input-field"
placeholder="Enter User Email"
value={ownerEmail}
onChange={(e) => setOwnerEmail(e.target.value)}
style={{ width: "483px", marginRight: "20px" }}
style={{
width: "483px",
marginBottom: "20px", // Add margin between email and button
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
/>
<div style={{ display: "flex", justifyContent: "flex-end" }}>
<button
style={{
marginRight: "40px",
padding: "4px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
@ -722,8 +782,6 @@ function ManageUsers() {
</button>
</div>
</div>
</form>
</ReusableModal>

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

@ -167,10 +167,12 @@
.due-days {
padding: 20px; /* Adjust as needed */
margin: 20px auto;
background-color: #ffffff;
border-radius: 10px;
border: 1px solid #EBEAF2;
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
border-radius: 40px;
width: 1600px;
max-width: 100%;
background-color: #ffffff;
}
.due-card {
position: relative;
@ -262,13 +264,35 @@
flex-direction: column;
justify-content: flex-start;
align-items: flex-start; /* Align items to the start (left) */
border-radius: 10px;
border-radius: 40px;
padding: 30px;
margin: 20px auto;
background-color: #ffffff;
width: 1600px;
max-width: 100%;
}
.department-container {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Align items to the start (top) */
align-items: flex-start; /* Align items to the start (left) */
border-radius: 20px;
padding: 30px;
border: none; /* Ensure no border */
border-bottom: 2px solid #ccc; /* Set a bottom border */
margin: 20px 0; /* Center vertically with top and bottom margins */
background-color: #ffffff;
width: 850px; /* Set a fixed width */
max-width: 100%; /* Ensure it doesn't exceed the screen width */
margin-left: 160px; /* Align to the left with 9% margin */
}
.setting-title {
margin-bottom: 10px; /* Space between title and inputs */
font-size: 24px; /* Adjust as needed */
@ -445,22 +469,25 @@
gap: 10px; /* Space between cards */ /* space above cards */
}
.dept-card {
width: 474px; /* fixed width */
height: 70px; /* fixed height */
width: 474px; /* Fixed width */
height: 70px; /* Fixed height */
padding: 10px;
border: 1px solid #f6f6f6;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #EBEAF2; /* Add border color */
border-radius: 20px; /* Rounded corners */
display: flex; /* Flexbox layout */
align-items: center; /* Center items vertically */
justify-content: space-between; /* Space items evenly */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */
}
.dept-info {
width: 386px;
height: 50px;
padding: 10px;
background-color: #f6f6f6;
border: 1px solid rgba(0, 35, 0, 0.1);
border-radius: 4px;
background-color: #ffffff;
border: none; /* Remove the redundant border */
border-radius: 10px; /* Rounded corners */
}
.create-department-section {
width: 100%;
@ -514,7 +541,7 @@ input[type="date"] {
}
.data-table {
width: 100%;
border: 1px solid #F4F4F4;
border: 2px solid #F4F4F4;
border-collapse: collapse;
/* border-radius: 20px 20px 0 0; */
overflow: hidden;
@ -533,12 +560,15 @@ input[type="date"] {
.table-body td {
padding-left: 20px;
color: #002300;
background-color: #ffffff;
border-bottom: 1px solid #EBEAF2;
}
.table-body tr:last-child td {
border-bottom: 1px solid #F4F4F4;
border-bottom: 1px solid #ffffff;
}
.table-body {
border-bottom: 1px solid #F4F4F4;
border-bottom: 2px solid #EBEAF2;
}
.no-column {
width: 100px;
@ -568,6 +598,7 @@ input[type="date"] {
display: flex;
justify-content: end;
padding: 10px 0;
background-color: #ffffff;
}
.pagination .page-item {
@ -576,6 +607,7 @@ input[type="date"] {
.pagination .page-link {
padding: 10px;
border: 1px solid #F4F4F4;
/* background-color: #ffffff; */
background-color: #b6d7a8;
border-radius: 30px;
color: #002300;

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

@ -336,9 +336,9 @@ function StoreInformation() {
maxWidth: '300px',
textAlign: 'center',
borderRadius: '20px',
border: '1px solid #6666ff',
border: '1px solid #282E26',
fontWeight: '800',
backgroundColor: plan.is_active ? 'transparent' : '#6666ff',
backgroundColor: plan.is_active ? 'transparent' : '#282E26',
color: plan.is_active ? '#000' : '#fff',
}}
onClick={(e) => {

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

@ -414,15 +414,16 @@ export default function Payroll() {
</div>
{ }
{showModal && (
<div className="modal-overlay" onClick={closeModal}>
<div className="modal" style={{}} onClick={closeModal}>
<div
className="modal-container"
onClick={(e) => e.stopPropagation()}
style={{ width: modalType === 'payment' ? '800px' : '700px', borderRadius: '40px' }}
style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
>
<div
className="modal-header"
style={{
display: 'flex',
justifyContent: 'space-between', // Distribute space between items
alignItems: 'center',
@ -457,31 +458,33 @@ export default function Payroll() {
{ }
{(modalType === 'new' || modalType === 'edit') && (
<form onSubmit={handleSubmit}>
<div className="modal-body">
<div className="form-group">
<label htmlFor="full_name">Employee Name</label>
<div className="modal-body ">
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
{/* <label htmlFor="full_name">Employee Name</label> */}
<input
type="text"
className="form-control"
id="full_name"
name="full_name"
placeholder="Employee’s Full Name"
value={formData.full_name}
onChange={handleChange}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
/>
</div>
<div className="form-group">
<label htmlFor="contact_no">Contact Number</label>
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
{/* <label htmlFor="contact_no">Contact Number</label> */}
<input
type="tel"
className="form-control"
id="contact_no"
placeholder="Contact Number"
name="contact_no"
value={formData.contact_no}
onChange={handleChange}
@ -490,26 +493,27 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email Address</label>
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
{/* <label htmlFor="email">Email Address</label> */}
<input
type="email"
className="form-control"
id="email"
name="email"
placeholder="Email Address"
value={formData.email}
onChange={handleChange}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
@ -529,75 +533,75 @@ export default function Payroll() {
{ }
{modalType === 'payment' && (
<form onSubmit={handlePaymentSubmit}>
<div className="modal-body" >
<div className="form-group row col-md-12">
{/* Salary Amount Input */}
<div className="col-md-5">
<input
type="text"
className="form-control"
id="salary_amount"
name="salary_amount"
placeholder="Amount"
value={paymentData.salary_amount}
onChange={handlePaymentChange}
onKeyDown={(e) => {
if (e.key === "-" || e.key === "+") {
e.preventDefault();
}
}}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
required
onInput={(e) => {
let value = e.target.value;
value = value.replace(/[^0-9.]/g, "");
if (value.indexOf(".") !== -1) {
const parts = value.split(".");
value = parts[0] + "." + parts[1].substring(0, 2);
}
e.target.value = value;
handlePaymentChange(e);
}}
/>
</div>
<div className="modal-body">
<div className="form-group row col-md-12 justify-content-between"> {/* Added justify-content-between */}
{/* Salary Amount Input */}
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
<input
type="text"
className="form-control"
id="salary_amount"
name="salary_amount"
placeholder="Amount"
value={paymentData.salary_amount}
onChange={handlePaymentChange}
onKeyDown={(e) => {
if (e.key === "-" || e.key === "+") {
e.preventDefault();
}
}}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
required
onInput={(e) => {
let value = e.target.value;
value = value.replace(/[^0-9.]/g, "");
if (value.indexOf(".") !== -1) {
const parts = value.split(".");
value = parts[0] + "." + parts[1].substring(0, 2);
}
e.target.value = value;
handlePaymentChange(e);
}}
/>
</div>
{/* Salary Unit Select */}
<div className="col-md-5">
<select
className="form-control"
name="salary_unit"
value={paymentData.salary_unit}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
>
<option value="" disabled>
Per Unit
</option>
<option value="hourly">Hourly</option>
<option value="weekly">Weekly</option>
<option value="bi weekly">Bi Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
</div>
{/* Salary Unit Select */}
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
<select
className="form-control"
name="salary_unit"
value={paymentData.salary_unit}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
>
<option value="" disabled>
Per Unit
</option>
<option value="hourly">Hourly</option>
<option value="weekly">Weekly</option>
<option value="bi weekly">Bi Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
</div>
<div className="form-group row col-md-12">
<div className="form-group row col-md-12 justify-content-between">
{/* Start Date Input */}
<div className="form-group col-md-5">
<label htmlFor="start_date">Start Date</label>
<input
type="date"
className="form-control"
@ -608,7 +612,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
/>
@ -616,7 +620,7 @@ export default function Payroll() {
{/* End Date Input */}
<div className="form-group col-md-5">
<label htmlFor="end_date">End Date</label>
<input
type="date"
className="form-control"
@ -627,7 +631,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
/>
@ -638,9 +642,9 @@ export default function Payroll() {
{/* <ToastContainer /> */}
<div className="form-group row col-md-12">
<div className="form-group row col-md-12 justify-content-between">
{/* Total Hours Input */}
<div className="form-group col-md-5">
<div className="form-group col-md-5" >
<input
type="number"
@ -656,7 +660,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border,
borderRadius: "0px",
}}
required
@ -665,7 +669,7 @@ export default function Payroll() {
{/* Payment Method Select */}
<div className="form-group col-md-5">
<div style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px', display: 'flex', gap: '10px' }}>
<div style={{ border: '2px solid #ACB4AA', padding: '5px 5px', width: "fit-content", borderRadius: '40px', display: 'flex', }}>
<button
type="button"
className="btn"
@ -674,7 +678,7 @@ export default function Payroll() {
backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
border: 'none',
padding: '10px 10px',
padding: '5px 5px',
borderRadius: '20px',
cursor: 'pointer',
}}
@ -689,7 +693,7 @@ export default function Payroll() {
backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
border: 'none',
padding: '10px 10px',
padding: '5px 5px',
borderRadius: '20px',
cursor: 'pointer',
}}
@ -704,7 +708,7 @@ export default function Payroll() {
</div>
{paymentData.payment_method === "cheque" && (
<div className="form-group row col-md-12">
<div className="form-group row col-md-12 justify-content-between">
<div className="form-group col-md-5">
<select
@ -716,7 +720,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
>
@ -743,7 +747,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
/>
@ -760,7 +764,7 @@ export default function Payroll() {
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderBottom: "1px solid #9e9e9e", // Set bottom border
borderRadius: "0px",
}}
/>
@ -771,7 +775,7 @@ export default function Payroll() {
)}
</div>
<div className="modal-footer">
<div className="modal-footer" style={{border:"none"}}>
<button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Payment
</button>

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

@ -949,7 +949,13 @@ export default function Purchase() {
<div className="d-flex col-md-12 mt-2">
<div
className="form-row d-flex col-md-5 p-2 mt-2"
style={{ marginLeft: "10px" }}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
>
<div className="input-group col-md-6">
<div

2
src/components/common/header.css
View File

@ -8,6 +8,7 @@
.navbar {
padding: 10px 15px;
font-family: Comfortaa;
}
/* Dropdown Styles */
@ -26,6 +27,7 @@
padding: 10px 15px;
display: block;
transition: background-color 0.2s ease;
}
.nav-menu-drop-item:hover {