" ui change "
parent
e6a93e1431
commit
b139bcf40c
|
|
@ -29,7 +29,7 @@
|
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f9fff6;
|
||||
background-color: #E9ECFF;
|
||||
background-image: url('../src/assets/Image/Pattern.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -370,7 +370,7 @@ body {
|
|||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
gap: 20px;
|
||||
|
||||
}
|
||||
.col-2 {
|
||||
|
|
@ -855,11 +855,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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ function AddInvoice() {
|
|||
type: "pay-bank-options",
|
||||
},
|
||||
{
|
||||
row: 5,
|
||||
row: 3,
|
||||
column: "col-md-3",
|
||||
label: "Due Days",
|
||||
type: "select-dueDays",
|
||||
|
|
@ -443,7 +443,7 @@ function AddInvoice() {
|
|||
case "prefix-input":
|
||||
return (
|
||||
<div
|
||||
className="form-group col-md-6"
|
||||
className="form-group col-md-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
|
@ -781,7 +781,7 @@ function AddInvoice() {
|
|||
<div className="row mb-3">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
{/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
|
|||
|
|
@ -197,8 +197,8 @@ function BankDeposit() {
|
|||
|
||||
|
||||
|
||||
<div className="col-md-12 row mb-3">
|
||||
<div className="mb-3 col-md-4">
|
||||
<div className="col-md-12 row ">
|
||||
<div className=" col-md-4">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -245,12 +245,13 @@ function BankDeposit() {
|
|||
|
||||
|
||||
<div
|
||||
className="col-md-12"
|
||||
className="col-md-12 mb-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between", // Adjust spacing between items
|
||||
gap: "50px", // Add gap for consistent spacing
|
||||
// marginBottom:"30px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
|
@ -278,7 +279,7 @@ function BankDeposit() {
|
|||
</div>
|
||||
|
||||
<div
|
||||
className="form-group "
|
||||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
.input-group {
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 50px;
|
||||
background-color: #f4f4f4;
|
||||
/* background-color: #f4f4f4; */
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
|
|
@ -102,12 +102,12 @@
|
|||
.table th {
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
background-color: #f9f9f9;
|
||||
background-color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: .5px solid #f4f4f4;
|
||||
border-bottom: 1px solid #EBEAF2;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -127,8 +127,8 @@
|
|||
border-end-start-radius: 24px;
|
||||
border-end-end-radius: 24px;
|
||||
padding: 10px;
|
||||
|
||||
background-color: #f4f4f4;
|
||||
border-bottom: 2px solid #EBEAF2;
|
||||
background-color: #ffffff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -324,4 +324,3 @@ input[type="color"]:focus,
|
|||
box-shadow: none; /* Remove any shadow */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -763,24 +763,50 @@ 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" },
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "10px 20px",
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
||||
const getCountClass = (status) => ({
|
||||
...statusStyles[status],
|
||||
padding: "10px",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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,49 +300,49 @@ 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 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>
|
||||
</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="col-md-12 row" style={{ gap: "15%" }}>
|
||||
<div className="mb-3 col-md-2" >
|
||||
<input
|
||||
type="date"
|
||||
|
|
@ -410,19 +410,21 @@ function PayInvoice() {
|
|||
</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:"70px"}} >
|
||||
<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">
|
||||
<input
|
||||
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="pay_amount"
|
||||
|
|
@ -454,72 +456,33 @@ 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={{
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
backgroundColor: '#fafafa',
|
||||
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="">
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
|
|
@ -531,44 +494,92 @@ function PayInvoice() {
|
|||
/>
|
||||
</div> */}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
{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">
|
||||
|
||||
<div className="md-col-12 ">
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '2px 20px', // Same left and right padding
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="" key={method}>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="cheque_no"
|
||||
placeholder="Check Number"
|
||||
value={formData.cheque_no}
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value={method}
|
||||
checked={formData.pay_method === method}
|
||||
onChange={handleChange}
|
||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
||||
style={{ display: 'none' }} // Hide the actual radio button
|
||||
/>
|
||||
<label
|
||||
className="form-check-label cursor-pointer"
|
||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
||||
style={{
|
||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
>
|
||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mt-3" >
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<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" && (
|
||||
<div className="mb-3">
|
||||
<div className="col-md-12 row">
|
||||
|
|
@ -615,18 +626,18 @@ function PayInvoice() {
|
|||
)}
|
||||
</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>
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -638,7 +649,7 @@ function PayInvoice() {
|
|||
}}
|
||||
>
|
||||
<TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
|
||||
<ToastContainer/>
|
||||
<ToastContainer />
|
||||
<AddVendorModal
|
||||
show={showModal}
|
||||
handleClose={handleClose}
|
||||
|
|
|
|||
|
|
@ -866,16 +866,40 @@ const getPaymentMethodStyle = (method) => ({
|
|||
});
|
||||
|
||||
const statusStyles = {
|
||||
All: { backgroundColor: "#4545DB" },
|
||||
// draft: { backgroundColor: "#4545DB7C" },
|
||||
unpaid: { backgroundColor: "#ff2024" },
|
||||
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||
All: {
|
||||
backgroundColor: "#4545DB",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#198f51",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#ff2024",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#0c8ce9",
|
||||
width: "130px", // Set a fixed width
|
||||
height: "30px", // Set a fixed height
|
||||
fontSize:"14px"
|
||||
},
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
|
||||
borderRadius: "5px",
|
||||
padding: "10px 20px",
|
||||
padding: "5px 20px",
|
||||
textAlign: "center",
|
||||
display: "flex", // Use flexbox for alignment
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -952,7 +952,7 @@ export default function Expense() {
|
|||
<div
|
||||
className="input-group-prepend"
|
||||
style={{
|
||||
background: "#ffffff",
|
||||
backgroundColor: "#ffffff",
|
||||
height: "100%",
|
||||
|
||||
display: "flex",
|
||||
|
|
|
|||
|
|
@ -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 ">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue