" 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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ function PayInvoice() {
|
|||
bank: "",
|
||||
});
|
||||
|
||||
const makeBlank = ()=>{
|
||||
const makeBlank = () => {
|
||||
setFormData({
|
||||
store_id: user.store,
|
||||
invoice_no: "",
|
||||
|
|
@ -269,7 +269,7 @@ function PayInvoice() {
|
|||
console.error("Error:", error);
|
||||
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate("/");
|
||||
|
|
@ -334,7 +334,7 @@ function PayInvoice() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius:"40px"
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
|
@ -342,7 +342,7 @@ function PayInvoice() {
|
|||
|
||||
|
||||
</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"
|
||||
|
|
@ -466,30 +468,47 @@ function PayInvoice() {
|
|||
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
|
||||
backgroundColor: '#fafafa',
|
||||
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
maxLength={2}
|
||||
className="form-control"
|
||||
value={formData.after_discount || ""}
|
||||
placeholder="After Discount Amount"
|
||||
readOnly
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="md-col-12 ">
|
||||
<div
|
||||
className=" d-flex align-items-center"
|
||||
className="d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 40px',
|
||||
padding: '2px 20px', // Same left and right padding
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="me-3" key={method}>
|
||||
<div className="" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
|
|
@ -515,33 +534,16 @@ function PayInvoice() {
|
|||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="">
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
maxLength={2}
|
||||
className="form-control"
|
||||
value={formData.after_discount || ""}
|
||||
placeholder="After Discount Amount"
|
||||
readOnly
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-12 mt-3" >
|
||||
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
<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"
|
||||
className="form-control-borderless" // Keep Bootstrap styles
|
||||
name="bank"
|
||||
value={formData.bank}
|
||||
onChange={handleChange}
|
||||
|
|
@ -554,7 +556,8 @@ function PayInvoice() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3 col-md-6">
|
||||
|
||||
<div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
|
|
@ -566,9 +569,17 @@ function PayInvoice() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{formData.pay_method === "bank" && (
|
||||
<div className="mb-3">
|
||||
<div className="col-md-12 row">
|
||||
|
|
@ -619,11 +630,11 @@ function PayInvoice() {
|
|||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
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: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</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",
|
||||
style={{
|
||||
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,8 +320,10 @@ const PayrollTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<thead className="table-header" >
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
style={{
|
||||
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,8 +336,10 @@ const ManageUserTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table ">
|
||||
<thead className="table-header">
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@ function ManageUsers() {
|
|||
if (numericValue.length === 5 || numericValue.length === 6) {
|
||||
fetchLocationDetails(numericValue);
|
||||
}
|
||||
};
|
||||
};
|
||||
// Handle pincode blur
|
||||
const handlePincodeBlur = () => {
|
||||
const { pincode } = formData;
|
||||
|
|
@ -452,7 +452,7 @@ function ManageUsers() {
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
</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,10 +533,10 @@ export default function Payroll() {
|
|||
{ }
|
||||
{modalType === 'payment' && (
|
||||
<form onSubmit={handlePaymentSubmit}>
|
||||
<div className="modal-body" >
|
||||
<div className="form-group row col-md-12">
|
||||
<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">
|
||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -549,7 +553,7 @@ export default function Payroll() {
|
|||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "2px solid #ccc",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
required
|
||||
|
|
@ -567,7 +571,7 @@ export default function Payroll() {
|
|||
</div>
|
||||
|
||||
{/* Salary Unit Select */}
|
||||
<div className="col-md-5">
|
||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
||||
<select
|
||||
className="form-control"
|
||||
name="salary_unit"
|
||||
|
|
@ -577,7 +581,7 @@ export default function Payroll() {
|
|||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none",
|
||||
borderBottom: "2px solid #ccc",
|
||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
||||
borderRadius: "0px",
|
||||
}}
|
||||
>
|
||||
|
|
@ -594,10 +598,10 @@ export default function Payroll() {
|
|||
|
||||
|
||||
|
||||
<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