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

" new update"

23_12__sonali
sonali 2024-12-23 18:56:43 +05:30
parent f0bf773985
commit e6a93e1431
29 changed files with 1622 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Image/Department.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 555 B

BIN
src/assets/Image/employee.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 B

BIN
src/assets/Image/owner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 B

BIN
src/assets/Image/store.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
src/assets/Image/user.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 B

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

@ -94,7 +94,7 @@
.input-group .form-control {
border: none;
/* background-color: transparent; */
background-color: transparent;
outline: none; /* Removes the outline */
}

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

@ -811,6 +811,7 @@ export default function Expense() {
</h5>
<svg
onClick={toggleModal}
width="14"
height="14"
@ -1119,13 +1120,13 @@ export default function Expense() {
</label>
))}
</div>
)}
)}
{(formData.pay_method_status === "pay_later" ||
formData.pay_method_status === "credit_invoice") && (
<div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop:'20px' }}>
<div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop: '20px' }}>
<select
className="form-control col-md-6 me-2"
name="days"
@ -1347,12 +1348,13 @@ export default function Expense() {
type="button"
className="btn btn-secondary-outline"
onClick={toggleModal}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
>
Close
</button>
<button
type="submit"
style={{backgroundColor:'#282E26' ,color:"#fff"}}
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
className="btn"
onClick={handleSubmit}
>

2
src/components/Pages/AppPAges/Gas/GasTypeTable.js
View File

@ -296,7 +296,7 @@ const GasTypeTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">

2
src/components/Pages/AppPAges/Gas/HouseChargeTable.js
View File

@ -321,7 +321,7 @@ const HouseChargeTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">

2
src/components/Pages/AppPAges/Lottery/LotteryInventoryTable.js
View File

@ -90,7 +90,7 @@ const LotteryInventoryTable = ({
return (
<div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
{columns.map((col, index) => (

2
src/components/Pages/AppPAges/Lottery/LotteryReportTable.js
View File

@ -194,7 +194,7 @@ const LotteryReportTable = ({
<div className="d-flex mb-3">
<div className="expense-searchcontainerstart d-flex"></div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">

2
src/components/Pages/AppPAges/Lottery/LotteryTable.js
View File

@ -190,7 +190,7 @@ const LotteryTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
{columns.map((col, index) => (

2
src/components/Pages/AppPAges/Lottery/WeeklyInvoiceTable.js
View File

@ -335,7 +335,7 @@ const WeeklyInvoiceTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">

10
src/components/Pages/AppPAges/ManageSettings/DataTable.js
View File

@ -84,7 +84,7 @@ const DataTable = ({
};
return (
<div className="data-table-container">
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">
@ -180,7 +180,7 @@ const DataTable = ({
{showFooter && (
<nav>
<ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span
style={{
@ -196,9 +196,9 @@ const DataTable = ({
textAlign: "center"
}}
onClick={handlePrev}>&lt;</span>&nbsp;
</li>
</li> */}
{renderPagination()}
<li
{/* <li
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
}`}
>
@ -219,7 +219,7 @@ const DataTable = ({
textAlign: "center"
}}
onClick={handleNext}>&gt; </span>
</li>
</li> */}
</ul>
</nav>
)}

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

@ -134,24 +134,24 @@ const PayrollTable = ({
color: "#fff",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
textAlign: 'center',
alignItems: 'center'
},
paid: {
backgroundColor: "#198f51",
color: "#fff",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
textAlign: 'center',
alignItems: 'center'
},
partially_paid: {
backgroundColor: "#0c8ce9",
color: "#fff",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
textAlign: 'center',
alignItems: 'center'
},
};
const paymentMethodStyles = {
@ -250,7 +250,7 @@ const PayrollTable = ({
</button> */}
</div>
<div style={{marginRight:"60%"}}>
<div style={{ marginRight: "60%" }}>
<div
className="expense-search d-flex align-items-center"
style={{
@ -268,7 +268,7 @@ const PayrollTable = ({
cursor: "pointer",
}}
>
<h6 className="" style={{margin:'10px'}}>Show</h6>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<select
name="option"
id="pageSelect"
@ -294,11 +294,11 @@ const PayrollTable = ({
<option value={20}>20</option>
</select>
</div>
</div>
</div>
</div>
<table className="data-table custom-table rounded-table">
<thead className="table-header">
<table className="data-table custom-table ">
<thead className="table-header" >
<tr>
{columns.map((col, index) => (
<th key={index} scope="col" onClick={() => handleSort(col.field)}>

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

@ -179,6 +179,7 @@ const ManageUserTable = ({
<div className="expense-searchcontainerstart d-flex">
<div className="search-container">
<input
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@ -276,12 +277,38 @@ const ManageUserTable = ({
</div>
)}
</div>
<div className="expense-searchcontainerend d-flex align-items-center">
<h3 className="me-2">Show</h3>
<div style={{ marginRight: "70%" }}>
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
@ -295,7 +322,9 @@ const ManageUserTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
</div>
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">
@ -418,7 +447,7 @@ const ManageUserTable = ({
{showFooter && (
<nav>
<ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span
style={{
fontSize: "24px",
@ -437,9 +466,9 @@ const ManageUserTable = ({
&lt;
</span>
&nbsp;
</li>
</li> */}
{renderPagination()}
<li
{/* <li
className={`prev-next ${
currentPage === totalPages ? "disabled" : ""
}`}
@ -462,7 +491,7 @@ const ManageUserTable = ({
>
&gt;{" "}
</span>
</li>
</li> */}
</ul>
</nav>
)}

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

@ -10,6 +10,10 @@ import { toast, ToastContainer } from "react-toastify";
import CustomSwitch from "./CustomSwitch";
import ManageUserTable from "./ManageUserTable";
import Swal from "sweetalert2";
import userIcon from '../../../../assets/Image/user.png'
import storeIcon from '../../../../assets/Image/store.png'
import ownerIcon from '../../../../assets/Image/owner.png'
function ManageUsers() {
@ -389,27 +393,67 @@ function ManageUsers() {
<div className="due-days">
<div className="header-row">
<div className="setting-title">Manage Users</div>
<div className="btn-position">
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
<button
className="vendor-add-button"
className="btn cus d-flex align-items-center"
onClick={() => handleShowUserModal()} // Open modal for adding a user
>
+ Add New User
<img
src={userIcon}
alt="user Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button
className="vendor-add-button"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => handleShowStoreModal()} // Open modal for adding a user
>
+ Add New Store
<img
src={storeIcon}
alt="store Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button
className="vendor-add-button"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
>
+ Assign Existing User As Owner
<img
src={ownerIcon}
alt="owner Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
</div>
</div>
</div>
<ManageUserTable
data={users}
columns={columns}

21
src/components/Pages/AppPAges/ManageSettings/ReusableModal.js
View File

@ -47,7 +47,7 @@ const ReusableModal = ({
};
const modalContentStyle = {
borderRadius: "15px",
borderRadius: "30px",
overflow: "hidden",
width: width, // use the width prop
height: height, // use the height prop
@ -57,21 +57,32 @@ const ReusableModal = ({
};
const headerStyle = {
backgroundColor: "#F0F0F0",
backgroundColor: "#fff",
borderTopLeftRadius: "15px",
borderTopRightRadius: "15px",
height: "55px",
display: "flex",
border:'none',
justifyContent: "space-between",
alignItems: "center",
padding: "0 16px", // Add padding for space between the content and edges
};
const titleStyle = {
fontFamily: "'Manrope', sans-serif",
fontWeight: "600", // semibold
fontWeight: "600",
fontSize: "20px",
color: "#002300",
margin: 0, // remove default margin
margin: 0,
textAlign: "center",
flex: 1, // Allow the title to take up available space
};
const closeButtonStyle = {
cursor: "pointer",
marginLeft: "auto", // Push the close button to the far right
};
return (
@ -88,6 +99,7 @@ const ReusableModal = ({
<h5 className="modal-title" style={titleStyle}>
{title}
</h5>
<div style={closeButtonStyle}>
<svg
onClick={handleClose}
width="26"
@ -104,6 +116,7 @@ const ReusableModal = ({
/>
</svg>
</div>
</div>
<div className="modal-body">{children}</div>
</div>
</div>

2
src/components/Pages/AppPAges/ManageSettings/SettingTable.js
View File

@ -312,7 +312,7 @@ const SettingTable = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
<table className="data-table custom-table" style={{borderRadius:"none"}} >
<thead className="table-header">
<tr>
<th scope="col" className="no-column">

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

@ -284,7 +284,7 @@
padding: 10px;
width: 600px;
height: 40px;
background-color: #f6f6f6;
background-color: #fff;
border: 1px solid #f6f6f6;
border-radius: 5px;
}
@ -516,18 +516,18 @@ input[type="date"] {
width: 100%;
border: 1px solid #F4F4F4;
border-collapse: collapse;
border-radius: 20px 20px 0 0;
/* border-radius: 20px 20px 0 0; */
overflow: hidden;
}
.table-header th, .table-body td {
border: 1px solid #F4F4F4;
/* border: 1px solid #F4F4F4; */
padding: 12px;
text-align: left;
padding-left: 20px;
}
.table-header th {
background-color: #f2f2f2;
color: #002300;
background-color: #282e26;
color: white;
cursor: pointer; /* Added cursor for sortable columns */
}
.table-body td {
@ -568,6 +568,7 @@ input[type="date"] {
display: flex;
justify-content: end;
padding: 10px 0;
}
.pagination .page-item {
margin: 0 5px;
@ -576,20 +577,24 @@ input[type="date"] {
padding: 10px;
border: 1px solid #F4F4F4;
background-color: #b6d7a8;
border-radius: 50%;
border-radius: 30px;
color: #002300;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
width: 30px;
height: 30px;
transition: background-color 0.3s, color 0.3s;
}
.pagination .page-link:hover {
background-color: #ffaf32;
background-color: red;
}
.pagination .page-item.active .page-link {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #ffaf32; /* Yellow background */
color: #002300;
border-color:#fbfbfbfb;

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

@ -7,6 +7,8 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
import { toast, ToastContainer } from "react-toastify";
import PayrollTableWithButton from "./PayrollTableWithButton";
import Swal from "sweetalert2";
import employeeIcon from '../../../../assets/Image/employee.png'
export default function Payroll() {
const { user } = useContext(AuthContext);
@ -244,7 +246,7 @@ export default function Payroll() {
}
closeModal(); // Close the modal after submitting the form
} catch (error) {
} catch (error) {
console.error("Error submitting form", error);
if (error.response?.data) {
// Handle API response errors
@ -256,7 +258,7 @@ export default function Payroll() {
// Handle generic errors
toast.error("Error submitting form: " + error.message);
}
}
}
}
@ -370,7 +372,7 @@ export default function Payroll() {
console.error("Error deleting record:", error);
toast.error("Error deleting record: " + (error.response?.data || error.message));
}
};
};
return (
@ -378,9 +380,9 @@ export default function Payroll() {
<div className="p-2">
<div className="expensecontainer d-flex flex-column pd-2 mb-2">
<div className="d-flex justify-content-between align-items-center mb-3">
<h3 className="mb-1">Manage Payroll</h3>
<h3 className="mb-1">Manage Employee</h3>
<button
className="btn btn-primary cus"
className="btn cus d-flex align-items-center"
onClick={() => {
// fetchBankData();
setModalType('new');
@ -388,6 +390,11 @@ export default function Payroll() {
}}
>
+ Add Employee
<img
src={employeeIcon}
alt="employee Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
</div>
<PayrollTableWithButton
@ -411,16 +418,42 @@ export default function Payroll() {
<div
className="modal-container"
onClick={(e) => e.stopPropagation()}
style={{ width: modalType === 'payment' ? '800px' : '700px' }}
style={{ width: modalType === 'payment' ? '800px' : '700px', borderRadius: '40px' }}
>
<div className="modal-header" style={{ borderBottom: "1px solid lightgray" }}>
<h3>
{modalType === 'new' && "Add Employee"}
{modalType === 'edit' && "Edit Employee"}
{modalType === 'payment' && `Process Payment for ${selectedPayroll?.full_name || ''}`}
<div
className="modal-header"
style={{
display: 'flex',
justifyContent: 'space-between', // Distribute space between items
alignItems: 'center',
border: "none"
}}
>
<div style={{ flex: 1, textAlign: 'center' }}>
<h3 style={{ margin: 0 }}>
{modalType === 'new' && 'Add Employee'}
{modalType === 'edit' && 'Edit Employee'}
{modalType === 'payment' && `Pay Salary For ${selectedPayroll?.full_name || ''}`}
</h3>
<button className="btn" onClick={closeModal}>X</button>
</div>
<svg
onClick={closeModal}
width="14"
height="14"
marginLeft="20px"
marginBottom="20px"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1L13 13M13 1L1 13"
stroke="black"
stroke-linecap="round"
/>
</svg>
</div>
{ }
{(modalType === 'new' || modalType === 'edit') && (
<form onSubmit={handleSubmit}>
@ -434,6 +467,12 @@ export default function Payroll() {
name="full_name"
value={formData.full_name}
onChange={handleChange}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
/>
</div>
@ -448,6 +487,12 @@ export default function Payroll() {
onChange={handleChange}
required
maxLength={10}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
@ -461,15 +506,21 @@ export default function Payroll() {
name="email"
value={formData.email}
onChange={handleChange}
style={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
required
/>
</div>
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary">
<div className="modal-footer" style={{ border: "none" }}>
<button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
{modalType === 'edit' ? "Update Employee" : "Add Employee"}
</button>
<button type="button" className="btn btn-contained" onClick={closeModal}>
<button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
Close
</button>
</div>
@ -478,66 +529,74 @@ export default function Payroll() {
{ }
{modalType === 'payment' && (
<form onSubmit={handlePaymentSubmit}>
<div className="modal-body">
<div className="form-group">
<label htmlFor="salary_amount">Amount</label>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text">$</span>
</div>
<div className="modal-body" >
<div className="form-group row col-md-12">
{/* Salary Amount Input */}
<div className="col-md-5">
<input
type="text" // Keeping text type for more flexible input control
type="text"
className="form-control"
id="salary_amount"
name="salary_amount"
placeholder="Amount"
value={paymentData.salary_amount}
onChange={handlePaymentChange}
onKeyDown={(e) => {
// Prevent negative and positive signs
if (e.key === "-" || e.key === "+") {
e.preventDefault();
}
}}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
required
onInput={(e) => {
let value = e.target.value;
// Remove all characters except numbers and the decimal point
value = value.replace(/[^0-9.]/g, '');
// Ensure only one decimal point
if (value.indexOf('.') !== -1) {
const parts = value.split('.');
value = parts[0] + '.' + parts[1].substring(0, 2); // Keep only two digits after the decimal
value = value.replace(/[^0-9.]/g, "");
if (value.indexOf(".") !== -1) {
const parts = value.split(".");
value = parts[0] + "." + parts[1].substring(0, 2);
}
// Update the value on the input element
e.target.value = value;
// Call the onChange handler to update the state
handlePaymentChange(e);
}}
/>
</div>
</div>
<div className="form-row form-group col-md-6">
<label htmlFor="salary_unit">Salary Unit</label>
{/* Salary Unit Select */}
<div className="col-md-5">
<select
className="form-control"
name="salary_unit"
value={paymentData.salary_unit}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
>
<option value="" disabled>
Per Unit
</option>
<option value="hourly">Hourly</option>
<option value="weekly">Weekly</option>
<option value="bi weekly">Bi Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<div className="form-row form-group col-md-6">
</div>
<div className="form-group row col-md-12">
{/* Start Date Input */}
<div className="form-group col-md-5">
<label htmlFor="start_date">Start Date</label>
<input
type="date"
@ -546,9 +605,17 @@ export default function Payroll() {
value={paymentData.start_date}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
/>
</div>
<div className="form-row form-group col-md-6">
{/* End Date Input */}
<div className="form-group col-md-5">
<label htmlFor="end_date">End Date</label>
<input
type="date"
@ -557,11 +624,24 @@ export default function Payroll() {
value={paymentData.end_date}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
/>
</div>
</div>
{/* <ToastContainer /> */}
<div className="form-row form-group col-md-6">
<label htmlFor="total_hour">Total Hours</label>
<div className="form-group row col-md-12">
{/* Total Hours Input */}
<div className="form-group col-md-5">
<input
type="number"
className="form-control"
@ -570,37 +650,75 @@ export default function Payroll() {
value={paymentData.total_hour}
onChange={handlePaymentChange}
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9]/g, '') // Remove non-numeric characters
.slice(0, 3); // Limit input length (10 digits + 1 decimal + 2 decimal places)
// Allow only numbers and limit input to 3 digits
e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 3);
}}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
required
/>
</div>
<div className="form-group">
<label htmlFor="payment_method">Payment Method</label>
<select
name="payment_method"
id="payment_method"
className="form-control"
value={paymentData.payment_method}
onChange={handlePaymentChange}
{/* Payment Method Select */}
<div className="form-group col-md-5">
<div style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px', display: 'flex', gap: '10px' }}>
<button
type="button"
className="btn"
onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cash" } })}
style={{
backgroundColor: paymentData.payment_method === "cash" ? "#4a5546" : "transparent",
color: paymentData.payment_method === "cash" ? "#ffffff" : "#000000",
border: 'none',
padding: '10px 10px',
borderRadius: '20px',
cursor: 'pointer',
}}
>
<option value="cash">Cash</option>
<option value="cheque">Bank Transfer</option>
</select>
Cash
</button>
<button
type="button"
className="btn"
onClick={() => handlePaymentChange({ target: { name: "payment_method", value: "cheque" } })}
style={{
backgroundColor: paymentData.payment_method === "cheque" ? "#4a5546" : "transparent",
color: paymentData.payment_method === "cheque" ? "#ffffff" : "#000000",
border: 'none',
padding: '10px 10px',
borderRadius: '20px',
cursor: 'pointer',
}}
>
Bank Transfer
</button>
</div>
</div>
</div>
{paymentData.payment_method === "cheque" && (
<div className="form-group">
<label htmlFor="bank">Bank</label>
<div className="form-group row col-md-12">
<div className="form-group col-md-5">
<select
name="bank"
id="bank"
className="form-control"
value={paymentData.bank}
onChange={handlePaymentChange}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
>
<option value="">Select Bank</option>
{bankdata.map((bank) => (
@ -609,20 +727,29 @@ export default function Payroll() {
</option>
))}
</select>
<label htmlFor="cheque_no">Cheque Number</label>
</div>
<div className="form-group col-md-5">
<input
type="number"
className="form-control"
id="cheque_no"
placeholder="Cheque No"
name="cheque_no"
value={paymentData.cheque_no}
onChange={handlePaymentChange}
required
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
/>
</div>
)}
<div className="form-row form-group col-md-6">
<label htmlFor="note">Notes</label>
<div className="form-group col-md-5">
<input
type="text"
className="form-control"
@ -630,14 +757,25 @@ export default function Payroll() {
name="note"
value={paymentData.note}
onChange={handlePaymentChange}
style={{
backgroundColor: "#ffffff",
border: "none",
borderBottom: "2px solid #ccc",
borderRadius: "0px",
}}
/>
</div>
</div>
)}
</div>
<div className="modal-footer">
<button type="submit" className="btn btn-primary" style={{}}>
<button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Payment
</button>
<button type="button" className="btn btn-contained" onClick={closeModal}>
<button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
Close
</button>
</div>

111
src/components/Pages/AppPAges/Payroll/PayrollTable.js
View File

@ -16,6 +16,7 @@ const DataTable = ({
direction: "ascending",
});
const [rowsPerPage, setRowsPerPage] = useState(5);
const [searchTerm, setSearchTerm] = useState(""); // State for search term
const totalPages = Math.ceil(data.length / rowsPerPage);
@ -32,7 +33,7 @@ const DataTable = ({
const getDisplayedData = () => {
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
return data.slice(startIndex, endIndex);
return sortedData.slice(startIndex, endIndex); // Return sorted data
};
// Sorting the data based on the selected column
@ -51,8 +52,16 @@ const DataTable = ({
return dataToSort;
};
// Search functionality
const filteredData = data.filter(item =>
columns.some(col => {
const value = item[col.field] ? item[col.field].toString().toLowerCase() : "";
return value.includes(searchTerm.toLowerCase());
})
);
const sortedData = sortData(filteredData);
const displayedData = getDisplayedData();
const sortedData = sortData(displayedData);
// Pagination
const handleNext = () => {
@ -90,7 +99,40 @@ const DataTable = ({
return (
<div className="data-table-container">
<table className="data-table custom-table rounded-table">
<div className="search-container" style={{marginBottom:"20px"}}>
<input
type="text"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
placeholder="Search..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="search-input"
/>
<svg
className="search-container-icon"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5416 19.2497C15.3511 19.2497 19.2499 15.3508 19.2499 10.5413C19.2499 5.73186 15.3511 1.83301 10.5416 1.83301C5.73211 1.83301 1.83325 5.73186 1.83325 10.5413C1.83325 15.3508 5.73211 19.2497 10.5416 19.2497Z"
stroke="#292D32"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M20.1666 20.1663L18.3333 18.333"
stroke="#292D32"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
{columns.map((col, index) => (
@ -134,17 +176,19 @@ const DataTable = ({
<tbody className="table-body">
{sortedData.length === 0 ? (
<tr>
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
textAlign: "center", fontFamily: 'Manrope',
fontWeight: '600',
fontSize: '40px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent', }}>
WebkitTextFillColor: 'transparent',
}}>
No data found
</td>
</tr>
) : (
sortedData.map((item, index) => (
displayedData.map((item, index) => (
<tr key={item.id || index}>
{columns.map((col, colIndex) => (
<td key={colIndex}>
@ -200,55 +244,18 @@ const DataTable = ({
)}
</tbody>
</table>
{showFooter && (
<nav>
<ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span
style={{
fontSize: "24px",
width: "40px",
height: "40px",
paddingLeft: "10px",
paddingRight: "10px",
borderRadius: "50%",
border: "1px solid #bfbfbfbf",
alignItems: "center",
justifyContent: "center",
display: "flex",
cursor: "pointer",
}}
onClick={handlePrev}
>
{"<"}
&lt;
</span>
&nbsp;
</li>
<div className="pagination">
<button onClick={handlePrev} disabled={currentPage === 1}>
Previous
</button>
<ul className="pagination-list">
{renderPagination()}
<li className={`prev-next ${currentPage === totalPages ? "disabled" : ""}`}>
<span
style={{
fontSize: "24px",
width: "40px",
height: "40px",
paddingLeft: "10px",
paddingRight: "10px",
borderRadius: "50%",
border: "1px solid #bfbfbfbf",
alignItems: "center",
justifyContent: "center",
display: "flex",
cursor: "pointer",
}}
onClick={handleNext}
>
{">"}
</span>
</li>
</ul>
</nav>
<button onClick={handleNext} disabled={currentPage === totalPages}>
Next
</button>
</div>
)}
</div>
);

60
src/components/Pages/AppPAges/Payroll/PayrollTableWithButton.js
View File

@ -155,17 +155,18 @@ const PayrollTableWithButton = ({
zIndex: "1",
};
// Calculate the total net sales from the data
// const totalNetSales = data.reduce((acc, item) => {
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
// return acc + amount;
// }, 0).toFixed(2); //
// const totalNetSales = data.reduce((acc, item) => {
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
// return acc + amount;
// }, 0).toFixed(2); //
return (
<div className="data-table-container">
<div className="d-flex mb-3">
<div className="expense-searchcontainerstart d-flex">
<div className="search-container">
<div className="expense-searchcontainerstart d-flex" >
<div className="search-container" >
<input
type="text"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search"
@ -262,12 +263,38 @@ const PayrollTableWithButton = ({
</div>
)}
</div>
<div className="expense-searchcontainerend d-flex align-items-center">
<h3 className="me-2">Show</h3>
<div >
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
<h6 className="" style={{ margin: '10px' }}>Show</h6>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
@ -281,7 +308,9 @@ const PayrollTableWithButton = ({
</select>
</div>
</div>
<table className="data-table custom-table rounded-table">
</div>
<table className="data-table custom-table ">
<thead className="table-header">
<tr>
<th scope="col" className="no-column">
@ -326,12 +355,14 @@ const PayrollTableWithButton = ({
<tbody className="table-body">
{sortedDisplayedData.length === 0 ? (
<tr>
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
textAlign: "center", fontFamily: 'Manrope',
fontWeight: '600',
fontSize: '40px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent', }}>
WebkitTextFillColor: 'transparent',
}}>
No data found
</td>
</tr>
@ -347,7 +378,7 @@ const PayrollTableWithButton = ({
<div className={`status ${item[col.field]}`}>{item[col.field]}</div>
) : col.field === "pay_salary" ? (
<button
className="btn btn-primary"
style={{ backgroundColor: "#CCF4BB", border: 'none', boxShadow: "4px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: '4px', fontSize: "16px", alignItems: "center", width: '122px' }}
onClick={() => togglePaymentModal(item)} // Pass item to payment modal
>
Pay Salary
@ -395,7 +426,7 @@ const PayrollTableWithButton = ({
</tr>
))
)}
</tbody>
</tbody>
</table>
{showFooter && (
@ -423,8 +454,7 @@ const PayrollTableWithButton = ({
</li>
{renderPagination()}
<li
className={`prev-next ${
currentPage === totalPages ? "disabled" : ""
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
}`}
>
&nbsp;

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

@ -8,6 +8,9 @@ import { toast, ToastContainer } from "react-toastify";
import AddDepartmentModal from "../ReusableForm/AddDepartmentModal";
import AddVendorModal from "../ReusableForm/AddVendorModal";
import Swal from "sweetalert2";
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
import vendor from '../../../../assets/Image/vendor.png'
import department from '../../../../assets/Image/Department.png'
export default function Purchase() {
const { user } = useContext(AuthContext);
@ -40,7 +43,7 @@ export default function Purchase() {
const { Get, Post, Delete, Patch } = useApi();
const [reloadTotal, setReloadTotal] = useState(false);
const [filteredDepartments, setFilteredDepartments] = useState([]);
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
// Handle checkbox change
const [formData, setFormData] = useState({
@ -200,6 +203,7 @@ export default function Purchase() {
const handleSpecificPaymentMethodChange = (e) => {
const value = e.target.value;
setSelectedPaymentMethod(value); // Update selected payment method state
setShowCheckFields(value === "cheque");
setShowBankFields(value === "bank");
@ -619,12 +623,141 @@ export default function Purchase() {
<div className="main-container">
<div className="d-flex p-2">
<div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex justify-content-between align-items-center mb-3">
<h3 className="mb-1">Purchase</h3>
<button className="btn btn-primary cus" onClick={toggleModal}>
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
{" "}
+ Add Invoice
<img
src={invoiceIcon}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
+ Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
+ Add Department
<img
src={department}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<div
style={{
display: "flex",
gap: "16px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
}}
>
{/* Invoice due this month */}
<div
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div>
</div>
{/* Table Start */}
@ -695,8 +828,10 @@ export default function Purchase() {
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
type="date"
@ -714,8 +849,10 @@ export default function Purchase() {
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
type="text"
@ -733,8 +870,9 @@ export default function Purchase() {
<div className="col-md-6" style={{ paddingRight: "10px" }}>
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
height: "52px",
}}
className="form-control"
@ -771,8 +909,9 @@ export default function Purchase() {
<select
className="form-control"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
height: "52px",
}}
name="vendor_department_service_titles"
@ -807,17 +946,76 @@ export default function Purchase() {
</div>
</div>
<div className="d-flex col-md-12">
<div className="d-flex col-md-12 mt-2">
<div
className="form-row d-flex col-md-5 p-2 mt-2"
style={{ marginLeft: "10px" }}
>
<div className="input-group col-md-6">
<div
className="input-group-prepend"
style={{
background: "#ffffff",
height: "100%",
display: "flex",
alignItems: "center",
}}
>
{/* <span className="input-group-text prefixtext"
style={{ border: "none", fontSize: "14px" }}>
USD
</span> */}
</div>
<input
required
type="number"
className="form-control sampletext"
placeholder="Amount"
aria-label="Username"
aria-describedby="addon-wrapping"
name={editingInvoiceId ? "pay_amount" : "amount"}
value={
editingInvoiceId && formData.pay_amount === undefined
? formData.remaining_amount
: formData.pay_amount || formData.amount
}
onChange={handleChange}
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
/>
</div>
</div>
<div
className="d-flex col-md-12"
style={{ paddingLeft: "5px", paddingTop: "15px" }}
style={{
border: '2px solid #ACB4AA',
padding: '5px 10px',
marginTop: '20px',
width: 'fit-content',
borderRadius: '40px',
display: 'flex', // Use flexbox
gap: '10px', // Add spacing between the options
}}
>
<p>Payment Method : </p>
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
style={{
backgroundColor: formData.pay_method_status === "pay_later" ? "#4a5546" : "transparent",
color: formData.pay_method_status === "pay_later" ? "white" : "black",
padding: '5px 10px',
borderRadius: '20px',
}}
>
<input
type="radio"
@ -825,12 +1023,19 @@ export default function Purchase() {
value="pay_later"
checked={formData.pay_method_status === "pay_later"}
onChange={handlePaymentMethodChange}
style={{ display: 'none' }} // Hide the radio button
/>{" "}
Pay Later
</label>
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
style={{
backgroundColor: formData.pay_method_status === "pay_now" ? "#4a5546" : "transparent",
color: formData.pay_method_status === "pay_now" ? "white" : "black",
padding: '5px 10px',
borderRadius: '20px',
}}
>
<input
type="radio"
@ -838,76 +1043,107 @@ export default function Purchase() {
value="pay_now"
checked={formData.pay_method_status === "pay_now"}
onChange={handlePaymentMethodChange}
style={{ display: 'none' }} // Hide the radio button
/>{" "}
Pay Now
</label>
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
style={{
backgroundColor: formData.pay_method_status === "credit_invoice" ? "#4a5546" : "transparent",
color: formData.pay_method_status === "credit_invoice" ? "white" : "black",
padding: '5px 10px',
borderRadius: '20px',
}}
>
<input
type="radio"
name="pay_method_status"
value="credit_invoice"
checked={
formData.pay_method_status === "credit_invoice"
}
checked={formData.pay_method_status === "credit_invoice"}
onChange={handlePaymentMethodChange}
style={{ display: 'none' }} // Hide the radio button
/>{" "}
Credit Invoice
</label>
</div>
</div>
{showPaymentOptions && (
<div className="d-flex col-md-6 mb-3">
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
<div
className="d-flex col-md-6 mb-3"
style={{
border: "2px solid #ACB4AA",
padding: "5px 10px",
width: "fit-content",
borderRadius: "40px",
display: "flex",
gap: "10px",
marginTop: "20px",
}}
>
<div
className="payment-option"
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cash" } })}
style={{
padding: '5px 10px',
cursor: "pointer",
borderRadius: "20px",
backgroundColor: selectedPaymentMethod === "cash" ? "#4a5546" : "transparent", // Change background based on selection
color: selectedPaymentMethod === "cash" ? "white" : "black", // Change text color based on selection
textAlign: "center",
}}
>
<input
type="radio"
name="specificPaymentMethod"
value="cash"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Cash
</label>
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
</div>
<div
className="payment-option"
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cheque" } })}
style={{
padding: '5px 10px',
cursor: "pointer",
borderRadius: "20px",
backgroundColor: selectedPaymentMethod === "cheque" ? "#4a5546" : "transparent",
color: selectedPaymentMethod === "cheque" ? "white" : "black",
textAlign: "center",
}}
>
<input
type="radio"
name="specificPaymentMethod"
value="cheque"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Check
</label>
<label
className="radio-inline"
style={{ paddingLeft: "10px" }}
</div>
<div
className="payment-option"
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "bank" } })}
style={{
padding: '5px 10px',
cursor: "pointer",
borderRadius: "20px",
backgroundColor: selectedPaymentMethod === "bank" ? "#4a5546" : "transparent",
color: selectedPaymentMethod === "bank" ? "white" : "black",
textAlign: "center",
}}
>
<input
type="radio"
name="specificPaymentMethod"
value="bank"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Bank Card/ACH/EFT
</label>
</div>
</div>
)}
{showAdditionalFields && (
<div className="d-flex col-md-5 mt-2">
<div className="d-flex col-md-5 mt-2" style={{ marginTop: '20px' }}>
<select
className="form-control col-md-5 me-2"
name="days"
value={formData.days || ""}
onChange={handleChange}
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
required
>
@ -920,8 +1156,11 @@ export default function Purchase() {
</select>
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "50px",
}}
className="form-control d-flex col-md-5"
@ -938,8 +1177,11 @@ export default function Purchase() {
<div className="d-flex col-md-4 mt-2">
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
marginRight: "10px",
}}
@ -962,8 +1204,11 @@ export default function Purchase() {
className="form-control me-2"
placeholder="Check Number"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
marginRight: "10px",
}}
@ -978,8 +1223,11 @@ export default function Purchase() {
<div className="d-flex col-md-4 mt-2">
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
}}
className="form-control col-md-3"
@ -994,8 +1242,11 @@ export default function Purchase() {
<div className="d-flex col-md-6 mt-2">
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
marginRight: "10px",
}}
@ -1015,8 +1266,11 @@ export default function Purchase() {
<div className="d-flex col-md-6 mt-2">
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
}}
className="form-control col-md-3"
@ -1047,8 +1301,11 @@ export default function Purchase() {
<div
className="form-row d-flex col-md-6 p-2 mt-2"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
height: "52px",
}}
>
@ -1056,19 +1313,19 @@ export default function Purchase() {
<div
className="input-group-prepend"
style={{
background: "#F5F5F5",
background: "#ffffff",
height: "100%",
borderRadius: "10px 0 0 10px",
display: "flex",
alignItems: "center",
}}
>
<span
{/* <span
className="input-group-text prefixtext"
style={{ border: "none", fontSize: "14px" }}
>
USD
</span>
</span> */}
</div>
<input
type="text"
@ -1089,56 +1346,7 @@ export default function Purchase() {
</div>
</div>
)}
<div
className="form-row d-flex col-md-6 p-2 mt-2"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
height: "52px",
}}
>
<div className="input-group col-md-6">
<div
className="input-group-prepend"
style={{
background: "#F5F5F5",
height: "100%",
borderRadius: "10px 0 0 10px",
display: "flex",
alignItems: "center",
}}
>
<span className="input-group-text prefixtext"
style={{ border: "none", fontSize: "14px" }}>
USD
</span>
</div>
<input
required
type="number"
className="form-control sampletext"
placeholder="Amount"
aria-label="Username"
aria-describedby="addon-wrapping"
name={editingInvoiceId ? "pay_amount" : "amount"}
value={
editingInvoiceId && formData.pay_amount === undefined
? formData.remaining_amount
: formData.pay_amount || formData.amount
}
onChange={handleChange}
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
/>
</div>
</div>
</form>
</div>
<div className="modal-footer" style={{ border: "none" }}>
@ -1146,13 +1354,15 @@ export default function Purchase() {
type="button"
className="btn btn-secondary-outline"
onClick={toggleModal}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
>
Close
</button>
<button
type="submit"
className="btn btn-primary"
className="btn "
onClick={handleSubmit}
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
>
Submit
</button>

20
src/components/Pages/AppPAges/ReusableForm/AddDepartmentModal.js
View File

@ -37,23 +37,33 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
};
return (
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="175px">
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="250px">
<form onSubmit={handleSave}>
<div className="form-group d-flex align-items-center mt-1">
<div className="form-group ">
<input
type="text"
className="input-field"
placeholder="Department Name"
value={departmentName}
onChange={(e) => setDepartmentName(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
style={{ width: "483px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
marginBottom: "20px",
borderRadius: "0px", // Remove border radius
}}
required
/>
</div>
<div
style={{
textAlign: "right", // Align content to the right
}}
>
<button
type="submit"
style={{
padding: "6px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
@ -61,11 +71,11 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
width: "103px",
height: "42px",
fontSize: "18px",
marginLeft: "20px",
}}
>
Submit
</button>
</div>
</form>
</ReusableModal>

24
src/components/Pages/AppPAges/ReusableForm/AddExpenseModal.js
View File

@ -37,23 +37,35 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
};
return (
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="175px">
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="250px">
<form onSubmit={handleSave}>
<div className="form-group d-flex align-items-center">
<div className="form-group">
<input
type="text"
className="input-field"
placeholder="Expense Type"
value={expenseType}
onChange={(e) => setExpenseType(e.target.value)}
style={{ width: "483px", marginRight: "10px" }}
style={{
width: "483px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
marginBottom: "20px",
borderRadius: "0px", // Remove border radius
}}
required
/>
</div>
<div
style={{
textAlign: "right", // Align content to the right
}}
>
<button
type="submit"
style={{
padding: "6px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
@ -61,7 +73,6 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
width: "103px",
height: "42px",
fontSize: "18px",
marginLeft: "20px",
}}
>
Submit
@ -70,6 +81,5 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
</form>
</ReusableModal>
);
};
}
export default AddExpenseTypeModal;

26
src/components/Pages/AppPAges/ReusableForm/AddVendorModal.js
View File

@ -93,7 +93,12 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
placeholder="Vendor Name"
value={vendorName}
onChange={(e) => setVendorName(e.target.value)}
style={{ width: "400px", marginRight: "10px", height: "44px" }}
style={{ width: "400px", marginRight: "10px", height: "44px" ,
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
<select
@ -104,7 +109,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
setVendorDepartments([]); // Reset departments when type changes
setOpeningBalance("");
}}
style={{ width: "400px", marginRight: "10px", height: "44px" }}
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
>
<option value="">Vendor Type</option>
@ -136,7 +144,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
<select
className="input-field"
onChange={handleDepartmentChange}
style={{ width: "400px", marginRight: "10px", height: "44px" }}
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
>
<option value="">
{vendorType === "purchase"
@ -159,7 +170,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
placeholder="Opening Balance"
value={openingBalance}
onChange={(e) => setOpeningBalance(e.target.value)}
style={{ width: "400px", marginRight: "10px", height: "44px" }}
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
}}
/>
)}
</div>
@ -170,10 +184,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
style={{
marginLeft: "690px",
padding: "4px 8px",
backgroundColor: "#4545db",
backgroundColor: "#282e26",
color: "white",
border: "none",
borderRadius: "40px",
borderRadius: "20px",
cursor: "pointer",
width: "124px",
height: "42px",

119
src/components/common/Header.js
View File

@ -34,9 +34,14 @@ const Header = () => {
const settingsRef = useRef(null);
const lotteryRef = useRef(null);
const gasRef = useRef(null);
const [selectedNav, setSelectedNav] = useState("/");
// const [selectedNav, setSelectedNav] = useState("/");
const { Get, getAPI, Post } = useApi();
const [parentLabel, setParentLabel] = useState("Expense"); // Parent label
const [selectedChild, setSelectedChild] = useState(""); // Selected child label
const [selectedNav, setSelectedNav] = useState("Expense");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
@ -59,6 +64,18 @@ const Header = () => {
logOutUser();
};
const handleChildSelection = (childLabel) => {
setSelectedChild(childLabel); // Update the selected child label
setExpenseDropdownOpen(false); // Close the dropdown
};
const toggleDropdown = () => {
setExpenseDropdownOpen(!expenseDropdownOpen);
if (expenseDropdownOpen) {
setSelectedChild(""); // Clear selected child if closing
}
};
const handleStoreManageClick = async () => {
setDropdownVisible(!isDropdownVisible);
@ -141,6 +158,8 @@ const Header = () => {
setLotteryDropdownOpen(false);
setGasDropdownOpen(false);
setDropdownVisible(false);
setSelectedChild("");
};
useEffect(() => {
@ -163,17 +182,16 @@ const Header = () => {
className="navbar-toggler"
type="button"
onClick={toggleMobileMenu}
>
<i className="fas fa-bars"></i>
</button>
<div
>
<i className="fas fa-bars"></i>
</button>
<div
className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`}
id="navbarNav"
> <ul className="navbar-nav me-auto">
> <ul className="navbar-nav me-auto">
{userRole === "store owner" && (
<li
className={`nav-item ${
selectedNav === "/owner-dashboard" ? "active" : ""
className={`nav-item ${selectedNav === "/owner-dashboard" ? "active" : ""
}`}
>
<Link
@ -201,28 +219,80 @@ const Header = () => {
Dashboard
</Link>
</li>
<li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
className={`nav-item ${expenseDropdownOpen ? "active" : ""}`}
ref={expenseRef}
onClick={() => {
closeDropdowns();
setExpenseDropdownOpen(!expenseDropdownOpen);
}}
style={{
display: "flex",
flexDirection: "column", // Ensures child label is displayed below
alignItems: "flex-start", // Align labels to the left
position: "relative",
marginTop: "12px",
}}
>
{/* Parent Label */}
<a
className="nav-link"
href="#"
onClick={(e) => e.preventDefault()}
>
Expense
{parentLabel}
</a>
{/* Selected Child Label Below Parent Label */}
{selectedChild && (
<span
style={{
fontSize: "14px",
color: "white",
// borderBottom:'1px solid blue',
backgroundColor: "#282e26",
padding: "0px 20px",
borderRadius: '20px',
fontStyle: "normal",
}}
>
{selectedChild}
</span>
)}
{/* Dropdown Menu */}
{expenseDropdownOpen && (
<ul className="nav-menu-drop">
<ul
className="nav-menu-drop"
style={{
listStyle: "none",
padding: "10px",
margin: "0px",
border: "1px solid #ccc",
borderRadius: "4px",
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
backgroundColor: "#fff",
position: "absolute",
top: "100%", // Ensures dropdown appears below labels
left: "0",
zIndex: 10,
transform: "translateY(20px)", // Moves dropdown below header area
}}
>
<li>
<Link
className="nav-menu-drop-item"
to="/expense"
onClick={closeDropdowns}
onClick={() => handleChildSelection("Expense")}
style={{
display: "block",
padding: "8px 12px",
color: "#000",
textDecoration: "none",
}}
>
Expense
</Link>
@ -231,7 +301,13 @@ const Header = () => {
<Link
className="nav-menu-drop-item"
to="/purchase"
onClick={closeDropdowns}
onClick={() => handleChildSelection("Purchase")}
style={{
display: "block",
padding: "8px 12px",
color: "#000",
textDecoration: "none",
}}
>
Purchase
</Link>
@ -239,9 +315,9 @@ const Header = () => {
</ul>
)}
</li>
<li
className={`nav-item ${
selectedNav === "/payroll" ? "active" : ""
className={`nav-item ${selectedNav === "/payroll" ? "active" : ""
}`}
>
<Link
@ -257,8 +333,7 @@ const Header = () => {
</li>
<li
className={`nav-item ${
selectedNav === "/reportDateSelection" ? "active" : ""
className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : ""
}`}
>
<Link
@ -272,7 +347,7 @@ const Header = () => {
Reports
</Link>
</li>
{(userRole === "store owner" || userRole === "store manager") &&(
{(userRole === "store owner" || userRole === "store manager") && (
<li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
@ -472,7 +547,7 @@ const Header = () => {
</ul>
)}
</li>
{userRole === "store owner" &&(
{userRole === "store owner" && (
<li
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
ref={settingsRef}
@ -557,7 +632,7 @@ const Header = () => {
</ul>
)}
</li>
)}
)}
</ul>
<div className="d-flex align-items-center" >
@ -656,7 +731,7 @@ const Header = () => {
</ul>
)}
</div>
</div>
</div>

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

@ -49,6 +49,7 @@
.navbar-nav {
flex-direction: column;
}
.nav-menu-drop {