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

" ui change "

24_12_sonali
sonali 2024-12-24 18:33:49 +05:30
parent e6a93e1431
commit b139bcf40c
18 changed files with 688 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -29,7 +29,7 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style> <style>
body { body {
background-color: #f9fff6; background-color: #E9ECFF;
background-image: url('../src/assets/Image/Pattern.png'); background-image: url('../src/assets/Image/Pattern.png');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;

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

@ -370,7 +370,7 @@ body {
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 40px; gap: 20px;
} }
.col-2 { .col-2 {
@ -855,11 +855,14 @@ h5 {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.modal-container { .modal-container {
max-width: 768px; /* Updated to 768px */ max-width: 768px; /* Updated to 768px */
margin: 0; margin: 0;
background-color: white; background-color: white;
border-radius: 0.5rem; border-radius: 0.5rem;
} }

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

@ -320,7 +320,7 @@ function AddInvoice() {
type: "pay-bank-options", type: "pay-bank-options",
}, },
{ {
row: 5, row: 3,
column: "col-md-3", column: "col-md-3",
label: "Due Days", label: "Due Days",
type: "select-dueDays", type: "select-dueDays",
@ -443,7 +443,7 @@ function AddInvoice() {
case "prefix-input": case "prefix-input":
return ( return (
<div <div
className="form-group col-md-6" className="form-group col-md-12"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@ -781,7 +781,7 @@ function AddInvoice() {
<div className="row mb-3"> <div className="row mb-3">
<div className="col-md-6"> <div className="col-md-6">
<div className="form-group"> <div className="form-group">
{/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"

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

@ -197,8 +197,8 @@ function BankDeposit() {
<div className="col-md-12 row mb-3"> <div className="col-md-12 row ">
<div className="mb-3 col-md-4"> <div className=" col-md-4">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -245,12 +245,13 @@ function BankDeposit() {
<div <div
className="col-md-12" className="col-md-12 mb-12"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing gap: "50px", // Add gap for consistent spacing
// marginBottom:"30px",
}} }}
> >
<div <div
@ -278,7 +279,7 @@ function BankDeposit() {
</div> </div>
<div <div
className="form-group " className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",

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

@ -89,7 +89,7 @@
.input-group { .input-group {
flex-wrap: nowrap; flex-wrap: nowrap;
border-radius: 50px; border-radius: 50px;
background-color: #f4f4f4; /* background-color: #f4f4f4; */
} }
.input-group .form-control { .input-group .form-control {
@ -102,12 +102,12 @@
.table th { .table th {
justify-content: center; justify-content: center;
height: 60px; height: 60px;
background-color: #f9f9f9; background-color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.table td { .table td {
border-bottom: .5px solid #f4f4f4; border-bottom: 1px solid #EBEAF2;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
} }
@ -127,8 +127,8 @@
border-end-start-radius: 24px; border-end-start-radius: 24px;
border-end-end-radius: 24px; border-end-end-radius: 24px;
padding: 10px; padding: 10px;
border-bottom: 2px solid #EBEAF2;
background-color: #f4f4f4; background-color: #ffffff;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@ -324,4 +324,3 @@ input[type="color"]:focus,
box-shadow: none; /* Remove any shadow */ box-shadow: none; /* Remove any shadow */
} }

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

@ -763,24 +763,50 @@ const paymentMethodStyles = {
const getPaymentMethodStyle = (method) => ({ const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }), ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "5px", borderRadius: "5px",
padding: "10px 20px", padding: "10px 20px",
color: "#000", color: "#000",
}); });
const statusStyles = { const statusStyles = {
All: { backgroundColor: "#4545DB" }, All: {
// draft: { backgroundColor: '#4545DB7C' }, backgroundColor: "#4545DB",
unpaid: { backgroundColor: "#ff2024" }, width: "130px", // Set a fixed width
partially_paid: { backgroundColor: "#0c8ce9" }, 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) => ({ const getStatusStyle = (status) => ({
...(statusStyles[status] || { backgroundColor: "#198f51" }), ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
borderRadius: "5px", 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", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",

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

@ -19,13 +19,13 @@ function PayInvoice() {
const navigate = useNavigate(); const navigate = useNavigate();
const [activeButton, setActiveButton] = useState(''); const [activeButton, setActiveButton] = useState('');
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
setActiveButton(location.pathname); // Set the active button based on the current location setActiveButton(location.pathname); // Set the active button based on the current location
}, [location.pathname]); }, [location.pathname]);
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
@ -63,7 +63,7 @@ function PayInvoice() {
bank: "", bank: "",
}); });
const makeBlank = ()=>{ const makeBlank = () => {
setFormData({ setFormData({
store_id: user.store, store_id: user.store,
invoice_no: "", invoice_no: "",
@ -200,14 +200,14 @@ function PayInvoice() {
setInitialAmount(""); setInitialAmount("");
} }
}; };
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
// Check if the payment method is selected // Check if the payment method is selected
if (!formData.pay_method) { if (!formData.pay_method) {
toast.error("Please select a payment method before submitting."); toast.error("Please select a payment method before submitting.");
return; // Prevent form submission if payment method is not selected return; // Prevent form submission if payment method is not selected
} }
const payAmount = parseFloat(formData.pay_amount); const payAmount = parseFloat(formData.pay_amount);
@ -218,58 +218,58 @@ function PayInvoice() {
if (newRemainingAmount < 0) { if (newRemainingAmount < 0) {
toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount."); toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
return; // Prevent form submission if payment exceeds remaining 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 status = newRemainingAmount <= 0 ? "paid" : "partially_paid"; // If remaining is 0 or less, mark it as 'paid'
const finalRemainingAmount = 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 = { let updatedFormData = {
...formData, ...formData,
remaining_amount: finalRemainingAmount, // Update the remaining amount remaining_amount: finalRemainingAmount, // Update the remaining amount
status: status, // Set the status based on the remaining amount status: status, // Set the status based on the remaining amount
cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null, cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
bank: formData.pay_method === "bank" ? formData.bank : null, bank: formData.pay_method === "bank" ? formData.bank : null,
}; };
// Check if the pay_method_status is 'credit_invoice' // Check if the pay_method_status is 'credit_invoice'
if (updatedFormData.pay_method_status !== "credit_invoice") { if (updatedFormData.pay_method_status !== "credit_invoice") {
updatedFormData = { updatedFormData = {
...updatedFormData, ...updatedFormData,
pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice' pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
}; };
} }
console.log("Submitting:", updatedFormData); console.log("Submitting:", updatedFormData);
try { try {
if (!updatedFormData.id) { if (!updatedFormData.id) {
toast.error("No invoice selected. Please select an invoice before submitting."); toast.error("No invoice selected. Please select an invoice before submitting.");
return; return;
} }
const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData); const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
if (response && response.status === 200) { if (response && response.status === 200) {
console.log("Submission successful:", response.data); console.log("Submission successful:", response.data);
toast.success("Invoice payment submitted successfully!"); toast.success("Invoice payment submitted successfully!");
setReloadData(!reloadData); setReloadData(!reloadData);
makeBlank(); makeBlank();
// window.location.reload(); // Reload the page to reflect changes // window.location.reload(); // Reload the page to reflect changes
} else { } else {
setReloadData(!reloadData); setReloadData(!reloadData);
console.error("Failed to submit:", response.data); console.error("Failed to submit:", response.data);
toast.error(`Error: ${response.data.message || "Failed to update invoice."}`); toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
} }
} catch (error) { } catch (error) {
setReloadData(!reloadData); setReloadData(!reloadData);
console.error("Error:", error); console.error("Error:", error);
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`); toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
} }
}; };
const handleCancel = () => { const handleCancel = () => {
navigate("/"); navigate("/");
@ -300,49 +300,49 @@ function PayInvoice() {
return ( return (
<div className="dashboard-container"> <div className="dashboard-container">
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<div className="button-groups"> <div className="button-groups">
<button <button
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')} onClick={() => handleLinkClick('/bankDeposit')}
> >
Bank Deposit Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
</div>
</div> </div>
</div>
<div className="formcontainer"> <div className="formcontainer">
<div <div
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius:"40px" borderRadius: "40px"
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className=""> <div className="">
</div> </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" > <div className="mb-3 col-md-2" >
<input <input
type="date" type="date"
@ -410,19 +410,21 @@ function PayInvoice() {
</select> */} </select> */}
</div> </div>
</div> </div>
<div className="mb-3 col-md-12 row"> <div className="mb-3 col-md-12 row mt-3" style={{gap:"70px"}} >
<div className="col-md-2"> <div className="col-md-3">
<input <input
name="amount" name="amount"
type="text" type="text"
className="form-control-borderless" className="form-control"
value={formData.amount} value={formData.amount}
readOnly readOnly
placeholder="Amount" placeholder="Amount"
style={{ backgroundColor: "#fafafa" }}
/> />
</div> </div>
<div className="col-md-2"> <div className="col-md-2">
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
name="pay_amount" name="pay_amount"
@ -454,72 +456,33 @@ function PayInvoice() {
.slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places) .slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}} }}
/> />
</div> </div>
<div className="col-md-3"> <div className="col-md-3">
<input <input
type="text" type="text"
className="form-control" className="form-control"
placeholder="Grand Total" placeholder="Grand Total"
value={grandTotal || ""} value={grandTotal || ""}
readOnly readOnly
style={{ 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>
backgroundColor: '#fafafa',
}}
<div />
className=" d-flex align-items-center" </div>
style={{
border: '2px solid #ACB4AA',
padding: '5px 40px',
width: 'fit-content',
borderRadius: '40px',
}}
>
{['cash', 'cheque', 'bank'].map((method) => (
<div className="me-3" key={method}>
<input
type="radio"
className="form-check-input"
name="pay_method"
value={method}
checked={formData.pay_method === method}
onChange={handleChange}
id={`pay_method_${method}`} // Unique ID for each radio input
style={{ display: 'none' }} // Hide the actual radio button
/>
<label
className="form-check-label cursor-pointer"
htmlFor={`pay_method_${method}`} // Link label to the input
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
style={{
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
>
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
</label>
</div>
))}
</div>
<div className="">
{/* <div className="col-md-3 mt-4">
{/* <div className="col-md-3 mt-4">
<input <input
name="after_discount" name="after_discount"
type="text" type="text"
@ -531,44 +494,92 @@ function PayInvoice() {
/> />
</div> */} </div> */}
</div> </div>
</div>
<div className="col-md-6"> <div className="md-col-12 ">
{formData.pay_method === "cheque" && ( <div
<div className=""> className="d-flex align-items-center"
<div className="col-md-12 row"> style={{
<div className="mb-3 col-md-6"> border: '2px solid #ACB4AA',
<select padding: '2px 20px', // Same left and right padding
required width: 'fit-content',
className="form-control-borderless" borderRadius: '40px',
name="bank" }}
value={formData.bank} >
onChange={handleChange} {['cash', 'cheque', 'bank'].map((method) => (
> <div className="" key={method}>
<option value="">Select Bank</option>
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div>
<div className="mb-3 col-md-6">
<input <input
required type="radio"
type="text" className="form-check-input"
className="form-control-borderless" name="pay_method"
name="cheque_no" value={method}
placeholder="Check Number" checked={formData.pay_method === method}
value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
id={`pay_method_${method}`} // Unique ID for each radio input
style={{ display: 'none' }} // Hide the actual radio button
/> />
<label
className="form-check-label cursor-pointer"
htmlFor={`pay_method_${method}`} // Link label to the input
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
style={{
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
>
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
</label>
</div> </div>
))}
</div>
</div>
<div className="col-md-12 mt-3" >
{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>
</div> </div>
)} )}
{formData.pay_method === "bank" && ( {formData.pay_method === "bank" && (
<div className="mb-3"> <div className="mb-3">
<div className="col-md-12 row"> <div className="col-md-12 row">
@ -615,18 +626,18 @@ function PayInvoice() {
)} )}
</div> </div>
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end">
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={handleCancel} onClick={handleCancel}
style={{border: " 1px solid #282e26", borderRadius:'20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save Save
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
@ -638,7 +649,7 @@ function PayInvoice() {
}} }}
> >
<TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} /> <TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
<ToastContainer/> <ToastContainer />
<AddVendorModal <AddVendorModal
show={showModal} show={showModal}
handleClose={handleClose} handleClose={handleClose}

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

@ -866,16 +866,40 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
All: { backgroundColor: "#4545DB" }, All: {
// draft: { backgroundColor: "#4545DB7C" }, backgroundColor: "#4545DB",
unpaid: { backgroundColor: "#ff2024" }, width: "130px", // Set a fixed width
partially_paid: { backgroundColor: "#0c8ce9" }, 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) => ({ const getStatusStyle = (status) => ({
...(statusStyles[status] || { backgroundColor: "#198f51" }), ...(statusStyles[status] || { backgroundColor: "#198f51", width: "150px", height: "40px" }), // Default style
borderRadius: "5px", 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", color: "#fff",
}); });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -949,7 +949,13 @@ export default function Purchase() {
<div className="d-flex col-md-12 mt-2"> <div className="d-flex col-md-12 mt-2">
<div <div
className="form-row d-flex col-md-5 p-2 mt-2" className="form-row d-flex col-md-5 p-2 mt-2"
style={{ 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 className="input-group col-md-6">
<div <div

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

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