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"

7
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

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",

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

@ -342,7 +342,7 @@ function PayInvoice() {
</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"
@ -466,12 +468,9 @@ function PayInvoice() {
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 backgroundColor: '#fafafa',
padding: '6px 0', // Optional: Add padding to the top and bottom
}} }}
/> />
</div> </div>
@ -479,17 +478,37 @@ function PayInvoice() {
{/* <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 <div
className="d-flex align-items-center" className="d-flex align-items-center"
style={{ style={{
border: '2px solid #ACB4AA', border: '2px solid #ACB4AA',
padding: '5px 40px', padding: '2px 20px', // Same left and right padding
width: 'fit-content', width: 'fit-content',
borderRadius: '40px', borderRadius: '40px',
}} }}
> >
{['cash', 'cheque', 'bank'].map((method) => ( {['cash', 'cheque', 'bank'].map((method) => (
<div className="me-3" key={method}> <div className="" key={method}>
<input <input
type="radio" type="radio"
className="form-check-input" className="form-check-input"
@ -516,32 +535,15 @@ function PayInvoice() {
</div> </div>
))} ))}
</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> <div className="col-md-12 mt-3" >
<div className="col-md-6">
{formData.pay_method === "cheque" && ( {formData.pay_method === "cheque" && (
<div className=""> <div className="row "> {/* Use row class for Bootstrap grid */}
<div className="col-md-12 row"> <div className="col-md-2 mb-3"> {/* First column for bank select */}
<div className="mb-3 col-md-6">
<select <select
required required
className="form-control-borderless" className="form-control-borderless" // Keep Bootstrap styles
name="bank" name="bank"
value={formData.bank} value={formData.bank}
onChange={handleChange} onChange={handleChange}
@ -554,7 +556,8 @@ function PayInvoice() {
))} ))}
</select> </select>
</div> </div>
<div className="mb-3 col-md-6">
<div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
<input <input
required required
type="text" type="text"
@ -566,9 +569,17 @@ function PayInvoice() {
/> />
</div> </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">

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",

78
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={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px", style={{
fontSize: "16px", display: "flex",
border: "none", alignItems: "center",
backgroundColor: "#FFFFFF",
border: "1px solid #DBDBDB",
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,8 +320,10 @@ 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 ">
<thead className="table-header" > <thead className="table-header" >

21
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,14 +125,21 @@ 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="store-container">
<div className="show-department-section"> <div className="show-department-section">
<div className="dept-cards-row"> <div className="dept-cards-row">
{filteredDepartments.length === 0 ? ( {filteredDepartments.length === 0 ? (
@ -201,6 +208,8 @@ function ManageDepartments() {
</div> </div>
</div> </div>
</div>
</div> </div>
); );
} }

55
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={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px", style={{
fontSize: "16px", display: "flex",
border: "none", alignItems: "center",
backgroundColor: "#FFFFFF",
border: "1px solid #DBDBDB",
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,8 +336,10 @@ 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 ">
<thead className="table-header"> <thead className="table-header">

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

@ -469,10 +469,10 @@ 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"
@ -480,7 +480,13 @@ function ManageUsers() {
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) => {

66
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',
@ -458,30 +459,32 @@ 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
@ -530,9 +534,9 @@ 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"
@ -549,7 +553,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
@ -567,7 +571,7 @@ export default function Payroll() {
</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"
@ -577,7 +581,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",
}} }}
> >
@ -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 */} {/* 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,7 +642,7 @@ 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" >
@ -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 {