Compare commits
2 Commits
ff36597ef7
...
e6a93e1431
| Author | SHA1 | Date |
|---|---|---|
 sonali
|
e6a93e1431 | |
|
sonali
|
f0bf773985 |
Binary file not shown.
|
After Width: | Height: | Size: 555 B |
Binary file not shown.
|
After Width: | Height: | Size: 657 B |
Binary file not shown.
|
After Width: | Height: | Size: 965 B |
Binary file not shown.
|
After Width: | Height: | Size: 675 B |
Binary file not shown.
|
After Width: | Height: | Size: 484 B |
|
|
@ -37,6 +37,7 @@ body {
|
|||
color: #000;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
|
||||
width: 100px;
|
||||
|
|
@ -108,6 +109,7 @@ body {
|
|||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
|
||||
align-items: center;
|
||||
|
|
@ -122,6 +124,7 @@ body {
|
|||
color: #ffffff; /* Active link color */
|
||||
background-color: #282e26;
|
||||
border-radius: 20px;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold; /* Bold text for active link */
|
||||
}
|
||||
.nav-list {
|
||||
|
|
@ -142,7 +145,7 @@ body {
|
|||
}
|
||||
.nav-link {
|
||||
font-family: "Manrope";
|
||||
font-size: 18px !important;
|
||||
font-size: 16px !important;
|
||||
color: #002300;
|
||||
|
||||
text-decoration: none;
|
||||
|
|
@ -494,6 +497,7 @@ body {
|
|||
}
|
||||
.search-container input {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
height: 50px;
|
||||
background: #f4f4f4;
|
||||
border-radius: 50px;
|
||||
|
|
@ -503,7 +507,7 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
.search-container input::placeholder {
|
||||
color: #ffffff;
|
||||
color: #282E26;
|
||||
}
|
||||
.search-container input:focus {
|
||||
outline: none;
|
||||
|
|
@ -789,7 +793,8 @@ h3 {
|
|||
|
||||
|
||||
.table-responsive th {
|
||||
background-color: #f4f4f4;
|
||||
background-color: #282e26;
|
||||
color: white;
|
||||
}
|
||||
.table-responsives {
|
||||
border: 0.5px solid #f4f4f4;
|
||||
|
|
@ -858,6 +863,7 @@ h5 {
|
|||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.input-group .form-control {
|
||||
border: none;
|
||||
/* background-color: transparent; */
|
||||
background-color: transparent;
|
||||
outline: none; /* Removes the outline */
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -811,6 +811,7 @@ export default function Expense() {
|
|||
</h5>
|
||||
|
||||
<svg
|
||||
|
||||
onClick={toggleModal}
|
||||
width="14"
|
||||
height="14"
|
||||
|
|
@ -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}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}><</span>
|
||||
</li>
|
||||
</li> */}
|
||||
{renderPagination()}
|
||||
<li
|
||||
{/* <li
|
||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -219,7 +219,7 @@ const DataTable = ({
|
|||
textAlign: "center"
|
||||
}}
|
||||
onClick={handleNext}>> </span>
|
||||
</li>
|
||||
</li> */}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@ const PayrollTable = ({
|
|||
</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) => (
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</li> */}
|
||||
{renderPagination()}
|
||||
<li
|
||||
{/* <li
|
||||
className={`prev-next ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
|
|
@ -462,7 +491,7 @@ const ManageUserTable = ({
|
|||
>
|
||||
>{" "}
|
||||
</span>
|
||||
</li>
|
||||
</li> */}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<ManageUserTable
|
||||
data={users}
|
||||
columns={columns}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
|
@ -479,65 +530,73 @@ 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="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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
{"<"}
|
||||
<
|
||||
</span>
|
||||
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -166,6 +166,7 @@ const PayrollTableWithButton = ({
|
|||
<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
|
||||
|
|
@ -423,8 +454,7 @@ const PayrollTableWithButton = ({
|
|||
</li>
|
||||
{renderPagination()}
|
||||
<li
|
||||
className={`prev-next ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
|
|
@ -172,8 +191,7 @@ const Header = () => {
|
|||
> <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
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.nav-menu-drop {
|
||||
|
|
|
|||
Loading…
Reference in New Issue