Compare commits
No commits in common. "main" and "2012__UIChange" have entirely different histories.
main
...
2012__UICh
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
|
|
@ -4,11 +4,11 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<!-- Favicon pointing to local file -->
|
<!-- Favicon pointing to local file -->
|
||||||
<!-- <link rel="icon" href="/favicon.ico" /> -->
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" rel="stylesheet" />
|
||||||
|
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
|
@ -28,17 +28,19 @@
|
||||||
|
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
background-image: url('Background.png');
|
|
||||||
background-color: #f9fff6;
|
background-color: #f9fff6;
|
||||||
font-family: "Comfortaa";
|
background-image: url('../src/assets/Image/Pattern.png');
|
||||||
|
background-size: cover;
|
||||||
background-position: top;
|
background-repeat: no-repeat;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% auto;
|
background-position: center;
|
||||||
|
background-blend-mode: overlay;
|
||||||
|
font-family: Manrope;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.hideonmobile {
|
.hideonmobile {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -59,7 +61,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<title>PaisaVara</title>
|
<title>Ezhisab</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 555 B |
Binary file not shown.
|
Before Width: | Height: | Size: 657 B |
Binary file not shown.
|
Before Width: | Height: | Size: 530 B |
Binary file not shown.
|
Before Width: | Height: | Size: 456 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 965 B |
Binary file not shown.
|
Before Width: | Height: | Size: 675 B |
Binary file not shown.
|
Before Width: | Height: | Size: 484 B |
Binary file not shown.
|
Before Width: | Height: | Size: 751 B |
|
|
@ -37,7 +37,6 @@ body {
|
||||||
color: #000;
|
color: #000;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
|
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -93,34 +92,24 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 81px;
|
height: 90px;
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #EBEAF2;
|
|
||||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.navbar {
|
.navbar {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 81px;
|
height: 90px;
|
||||||
|
background-color: #FFFFFF;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #EBEAF2;
|
|
||||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
|
||||||
border-radius: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16px;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
box-shadow: 0px 0px 10px rgba(66, 71, 76, 0.08);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 1; /* Takes the remaining space between navbar-left and the center header */
|
flex: 1; /* Takes the remaining space between navbar-left and the center header */
|
||||||
|
|
@ -132,15 +121,13 @@ font-weight: bold;
|
||||||
.navbar .nav-item.active .nav-link {
|
.navbar .nav-item.active .nav-link {
|
||||||
color: #ffffff; /* Active link color */
|
color: #ffffff; /* Active link color */
|
||||||
background-color: #282e26;
|
background-color: #282e26;
|
||||||
border-radius: 40px;
|
border-radius: 20px;
|
||||||
padding: 10px 15px;
|
|
||||||
font-weight: bold; /* Bold text for active link */
|
font-weight: bold; /* Bold text for active link */
|
||||||
}
|
}
|
||||||
.nav-list {
|
.nav-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -148,15 +135,13 @@ font-weight: bold;
|
||||||
.nav-item {
|
.nav-item {
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.nav-link {
|
.nav-link {
|
||||||
font-family: 'Comfortaa', sans-serif;
|
font-family: "Manrope";
|
||||||
font-size: 16px !important;
|
font-size: 18px !important;
|
||||||
color: #002300;
|
color: #002300;
|
||||||
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
.nav-link:hover {
|
.nav-link:hover {
|
||||||
|
|
@ -315,25 +300,7 @@ font-weight: bold;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-left: 80%;
|
||||||
position: absolute;
|
|
||||||
/* margin-left: 140px; */
|
|
||||||
top: 100%; /* Positions dropdown below the parent */
|
|
||||||
left: 0;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border: 1px solid #F6F6F6;
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 10px;
|
|
||||||
min-width: 120px; /* Optional minimum width */
|
|
||||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-menu-drop {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* margin-left: 140px; */
|
/* margin-left: 140px; */
|
||||||
top: 100%; /* Positions dropdown below the parent */
|
top: 100%; /* Positions dropdown below the parent */
|
||||||
|
|
@ -397,7 +364,7 @@ font-weight: bold;
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 20px;
|
gap: 40px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.col-2 {
|
.col-2 {
|
||||||
|
|
@ -441,7 +408,6 @@ font-weight: bold;
|
||||||
.table-darkcustom td {
|
.table-darkcustom td {
|
||||||
text-align: start;
|
text-align: start;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
/* Styling for the last header cell */
|
/* Styling for the last header cell */
|
||||||
|
|
@ -512,7 +478,7 @@ font-weight: bold;
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30%;
|
top: 50%;
|
||||||
left: 15px; /* Adjust as needed */
|
left: 15px; /* Adjust as needed */
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
pointer-events: none; /* Prevent clicks on the icon */
|
pointer-events: none; /* Prevent clicks on the icon */
|
||||||
|
|
@ -521,31 +487,28 @@ font-weight: bold;
|
||||||
.search-container {
|
.search-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 3;
|
flex: 3;
|
||||||
margin-left: 0px;
|
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
.search-container input {
|
.search-container input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #000;
|
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
padding-left: 40px;
|
padding-left: 40px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.search-container input::placeholder {
|
.search-container input::placeholder {
|
||||||
color: #282E26;
|
color: #a9a9a9;
|
||||||
}
|
}
|
||||||
.search-container input:focus {
|
.search-container input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.search-container-icon {
|
.search-container-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 12px;
|
left: 10px;
|
||||||
top: 47%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -736,7 +699,6 @@ font-weight: bold;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
||||||
/* Changed from 1600px to a percentage */
|
/* Changed from 1600px to a percentage */
|
||||||
max-width: 1600px;
|
max-width: 1600px;
|
||||||
/* Maximum width for larger screens */
|
/* Maximum width for larger screens */
|
||||||
|
|
@ -756,21 +718,18 @@ h3 {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
|
||||||
height: 42px;
|
height: 42px;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 60px;
|
||||||
background-color: #FFAF32;
|
background-color: #007bff;
|
||||||
color: rgb(0, 0, 0);
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* transition: background-color 0.3s; */
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expense-searchcontainerstart {
|
.expense-searchcontainerstart {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
||||||
}
|
}
|
||||||
.custbtn {
|
.custbtn {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
@ -826,17 +785,14 @@ h3 {
|
||||||
|
|
||||||
|
|
||||||
.table-responsive th {
|
.table-responsive th {
|
||||||
background-color: #282e26;
|
background-color: #f4f4f4;
|
||||||
color: white;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.table-responsives {
|
.table-responsives {
|
||||||
border: 0.5px solid #f4f4f4;
|
border: 0.5px solid #f4f4f4;
|
||||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||||
}
|
}
|
||||||
.table-responsive {
|
.table-responsive {
|
||||||
border-left: 1px solid #ebeaf2;
|
|
||||||
border-right: 1px solid #ebeaf2;
|
|
||||||
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
border-radius: 24px 24px 0 0; /* top-left and top-right corners to 24px */
|
||||||
}
|
}
|
||||||
.expensetableheader th:first-child {
|
.expensetableheader th:first-child {
|
||||||
|
|
@ -890,18 +846,14 @@ h5 {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
.modal-container {
|
.modal-container {
|
||||||
max-width: 768px; /* Updated to 768px */
|
max-width: 768px; /* Updated to 768px */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header,
|
.modal-header,
|
||||||
.modal-body,
|
.modal-body,
|
||||||
.modal-footer {
|
.modal-footer {
|
||||||
|
|
|
||||||
|
|
@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: "50px",
|
gap: "16px",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
marginBottom:"20px"
|
margin: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Invoice due this month */}
|
{/* Invoice due this month */}
|
||||||
|
|
@ -318,30 +318,20 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff8e6",
|
backgroundColor: "#fff8e6",
|
||||||
border: "1px solid #ffd700",
|
border: "1px solid #ffd700",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$500
|
$500
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Invoice due this month
|
Invoice due this month
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -351,30 +341,20 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#e6ffee",
|
backgroundColor: "#e6ffee",
|
||||||
border: "1px solid #00b300",
|
border: "1px solid #00b300",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
$19,864,63,521
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$19,521
|
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Last 7 days sale
|
Last 7 days sale
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -384,30 +364,20 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffe6e6",
|
backgroundColor: "#ffe6e6",
|
||||||
border: "1px solid #ff4d4d",
|
border: "1px solid #ff4d4d",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: " 48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$0.00
|
$0.00
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Expense this month
|
Expense this month
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -418,7 +388,7 @@ const ATMDepositTable = (props) => {
|
||||||
<div className="searchcontainer">
|
<div className="searchcontainer">
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -513,16 +483,9 @@ const ATMDepositTable = (props) => {
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
style={{
|
style={{
|
||||||
width: "40px",
|
marginLeft: "10px",
|
||||||
height: "40px",
|
backgroundColor: "#f4f4f4",
|
||||||
borderRadius: "60px",
|
width: "130px",
|
||||||
padding: "15px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
position: "relative",
|
|
||||||
|
|
||||||
|
|
||||||
borderRadius: "60px",
|
borderRadius: "60px",
|
||||||
padding: "15px",
|
padding: "15px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -540,7 +503,6 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
marginLeft:'6px',
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: "0",
|
padding: "0",
|
||||||
|
|
@ -586,7 +548,7 @@ const ATMDepositTable = (props) => {
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
Filter
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|
@ -697,12 +659,7 @@ const ATMDepositTable = (props) => {
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
<table className="table table-borderless table-responsive">
|
<table className="table table-borderless table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{
|
<tr>
|
||||||
backgroundColor: '#282e26',
|
|
||||||
color: '#ffffff',
|
|
||||||
height: '30px', // Add height for row spacing
|
|
||||||
textAlign: "center",
|
|
||||||
}}>
|
|
||||||
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
|
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
|
||||||
(header, index) => (
|
(header, index) => (
|
||||||
<th
|
<th
|
||||||
|
|
@ -711,7 +668,7 @@ const ATMDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: index === 0 ? "30px" : "0",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
textAlign: "center",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
backgroundColor:'#282e26',
|
backgroundColor:'#282e26',
|
||||||
color:'#ffffff'
|
color:'#ffffff'
|
||||||
|
|
@ -755,11 +712,11 @@ const ATMDepositTable = (props) => {
|
||||||
{currentInvoices.length !== 0 ?
|
{currentInvoices.length !== 0 ?
|
||||||
currentInvoices.map((invoice) => (
|
currentInvoices.map((invoice) => (
|
||||||
<tr key={invoice.id}>
|
<tr key={invoice.id}>
|
||||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
{invoice.date}
|
{invoice.date}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||||
{invoice.bank_deposite_type
|
{invoice.bank_deposite_type
|
||||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||||
|
|
@ -767,8 +724,8 @@ const ATMDepositTable = (props) => {
|
||||||
: "N/A"}
|
: "N/A"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
|
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||||
<td style={{ textAlign: 'center' }}>
|
<td style={{ textAlign: 'left' }}>
|
||||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||||
{invoice.transaction_type ?
|
{invoice.transaction_type ?
|
||||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import React, { useState, useEffect, useContext, useRef } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { toast, ToastContainer } from "react-toastify";
|
import { toast, ToastContainer } from "react-toastify";
|
||||||
import "./Invoice.css";
|
import "./Invoice.css";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from 'react-router-dom';
|
||||||
import TableComponent from "./InvoiceTable";
|
import TableComponent from "./InvoiceTable";
|
||||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||||
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
||||||
|
|
@ -28,7 +28,7 @@ function AddInvoice() {
|
||||||
const handleShow = () => setShowModal(true);
|
const handleShow = () => setShowModal(true);
|
||||||
const handleClose = () => setShowModal(false);
|
const handleClose = () => setShowModal(false);
|
||||||
|
|
||||||
const [activeButton, setActiveButton] = useState("");
|
const [activeButton, setActiveButton] = useState('');
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
|
|
@ -48,12 +48,12 @@ function AddInvoice() {
|
||||||
vendor_department: "",
|
vendor_department: "",
|
||||||
vendor_department_name: "",
|
vendor_department_name: "",
|
||||||
invoice_no: "", // This will now have a default value from the last invoice
|
invoice_no: "", // This will now have a default value from the last invoice
|
||||||
pay_method_status: "pay_now",
|
pay_method_status: "",
|
||||||
prepaid_tax: false,
|
prepaid_tax: false,
|
||||||
prepaid_tax_percentage: "",
|
prepaid_tax_percentage: "",
|
||||||
amount: "",
|
amount: "",
|
||||||
remaining_amount: "",
|
remaining_amount: "",
|
||||||
pay_method: "cash",
|
pay_method: "",
|
||||||
due_date: null,
|
due_date: null,
|
||||||
note: "",
|
note: "",
|
||||||
bank: "",
|
bank: "",
|
||||||
|
|
@ -81,7 +81,8 @@ function AddInvoice() {
|
||||||
cheque_no: null,
|
cheque_no: null,
|
||||||
type: "",
|
type: "",
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setFormData((prevData) => ({
|
setFormData((prevData) => ({
|
||||||
|
|
@ -94,6 +95,7 @@ function AddInvoice() {
|
||||||
const [banks, setBanks] = useState([]);
|
const [banks, setBanks] = useState([]);
|
||||||
const [dueDays, setDueDays] = useState([]);
|
const [dueDays, setDueDays] = useState([]);
|
||||||
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
|
@ -121,9 +123,9 @@ function AddInvoice() {
|
||||||
|
|
||||||
const invoiceStatus =
|
const invoiceStatus =
|
||||||
formData.pay_method_status === "pay_now" &&
|
formData.pay_method_status === "pay_now" &&
|
||||||
(formData.pay_method === "cash" ||
|
(formData.pay_method === "cash" ||
|
||||||
formData.pay_method === "bank" ||
|
formData.pay_method === "bank" ||
|
||||||
formData.pay_method === "cheque")
|
formData.pay_method === "cheque")
|
||||||
? "paid"
|
? "paid"
|
||||||
: "unpaid";
|
: "unpaid";
|
||||||
|
|
||||||
|
|
@ -155,22 +157,25 @@ function AddInvoice() {
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
|
|
||||||
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
|
|
||||||
.then((response) => {
|
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit).then((response) => {
|
||||||
toast.success("Invoice submitted successfully!");
|
toast.success("Invoice submitted successfully!");
|
||||||
// Reload the component by navigating to the same route
|
// Reload the component by navigating to the same route
|
||||||
setReloadData(!reloadData);
|
setReloadData(!reloadData);
|
||||||
makeBlank();
|
makeBlank();
|
||||||
// navigate(0);
|
// navigate(0);
|
||||||
})
|
|
||||||
.catch((error) => {
|
}).catch((error) => {
|
||||||
setReloadData(!reloadData);
|
setReloadData(!reloadData);
|
||||||
toast.error(
|
toast.error(
|
||||||
"An error occurred while submitting the invoice. Please check your network and try again."
|
"An error occurred while submitting the invoice. Please check your network and try again."
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
const fetchData = async () => {
|
||||||
try {
|
try {
|
||||||
const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all(
|
const [dueDaysResponse, vendorResponse, bankResponse] = await Promise.all(
|
||||||
|
|
@ -225,6 +230,7 @@ function AddInvoice() {
|
||||||
[name]: type === "checkbox" ? checked : value,
|
[name]: type === "checkbox" ? checked : value,
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
const handlePaymentMethodChange = (e) => {
|
const handlePaymentMethodChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
|
|
@ -234,8 +240,8 @@ function AddInvoice() {
|
||||||
value === "credit_invoice"
|
value === "credit_invoice"
|
||||||
? "credit_invoice"
|
? "credit_invoice"
|
||||||
: value === "pay_later"
|
: value === "pay_later"
|
||||||
? "pay_later"
|
? "pay_later"
|
||||||
: "";
|
: "";
|
||||||
|
|
||||||
setFormData((prevData) => ({
|
setFormData((prevData) => ({
|
||||||
...prevData,
|
...prevData,
|
||||||
|
|
@ -250,7 +256,7 @@ function AddInvoice() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
makeBlank();
|
makeBlank()
|
||||||
navigate("/");
|
navigate("/");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -274,7 +280,7 @@ function AddInvoice() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 1,
|
row: 1,
|
||||||
column: "col-md-3",
|
column: "col-md-2",
|
||||||
label: "Invoice Number",
|
label: "Invoice Number",
|
||||||
type: "invoice_no",
|
type: "invoice_no",
|
||||||
name: "invoice_no",
|
name: "invoice_no",
|
||||||
|
|
@ -282,12 +288,12 @@ function AddInvoice() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 2,
|
row: 2,
|
||||||
column: "col-md-2",
|
column: "col-md-5",
|
||||||
label: "Amount",
|
label: "Amount",
|
||||||
name: "amount",
|
name: "amount",
|
||||||
type: "prefix-input",
|
type: "prefix-input",
|
||||||
placeholder: "Amount",
|
placeholder: "Amount",
|
||||||
// prefixText: "USD",
|
prefixText: "USD",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 2,
|
row: 2,
|
||||||
|
|
@ -296,26 +302,26 @@ function AddInvoice() {
|
||||||
// label: "Payment Method:",
|
// label: "Payment Method:",
|
||||||
type: "radio",
|
type: "radio",
|
||||||
options: [
|
options: [
|
||||||
{ value: "pay_now", label: "Pay Now" },
|
|
||||||
{ value: "pay_later", label: "Pay Later" },
|
{ value: "pay_later", label: "Pay Later" },
|
||||||
|
{ value: "pay_now", label: "Pay Now" },
|
||||||
{ value: "credit_invoice", label: "Credit Invoice" },
|
{ value: "credit_invoice", label: "Credit Invoice" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 4,
|
row: 4,
|
||||||
column: "col-md-5",
|
column: "col-md-12",
|
||||||
label: "Payment Method Options",
|
label: "Payment Method Options",
|
||||||
type: "payment-method-options",
|
type: "payment-method-options",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 4,
|
row: 4,
|
||||||
column: "col-md-5",
|
column: "col-md-12",
|
||||||
label: "Payment Method Options",
|
label: "Payment Method Options",
|
||||||
type: "pay-bank-options",
|
type: "pay-bank-options",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
row: 3,
|
row: 4,
|
||||||
column: "col-md-3",
|
column: "col-md-6",
|
||||||
label: "Due Days",
|
label: "Due Days",
|
||||||
type: "select-dueDays",
|
type: "select-dueDays",
|
||||||
name: "due_days",
|
name: "due_days",
|
||||||
|
|
@ -325,15 +331,15 @@ function AddInvoice() {
|
||||||
// The "Notes" field is conditionally rendered based on pay_method_status
|
// The "Notes" field is conditionally rendered based on pay_method_status
|
||||||
...(formData.pay_method_status !== "pay_now"
|
...(formData.pay_method_status !== "pay_now"
|
||||||
? [
|
? [
|
||||||
// {
|
{
|
||||||
// row: 5,
|
row: 5,
|
||||||
// column: "col-md-6",
|
column: "col-md-6",
|
||||||
// label: "Notes",
|
label: "Notes",
|
||||||
// type: "text",
|
type: "text",
|
||||||
// name: "note",
|
name: "note",
|
||||||
// placeholder: "Notes",
|
placeholder: "Notes",
|
||||||
// },
|
},
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
{
|
{
|
||||||
row: 5,
|
row: 5,
|
||||||
|
|
@ -342,12 +348,13 @@ function AddInvoice() {
|
||||||
type: "checkbox",
|
type: "checkbox",
|
||||||
name: "prepaid_tax",
|
name: "prepaid_tax",
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const paymentMethodOptions = [
|
const paymentMethodOptions = [
|
||||||
{ value: "cash", label: "Cash" },
|
{ value: "cash", label: "Cash" },
|
||||||
{ value: "bank", label: "Bank Card (ACH/EFT)" },
|
|
||||||
{ value: "cheque", label: "Cheque" },
|
{ value: "cheque", label: "Cheque" },
|
||||||
|
{ value: "bank", label: "Bank Card (ACH/EFT)" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const groupedFields = fields.reduce((acc, field) => {
|
const groupedFields = fields.reduce((acc, field) => {
|
||||||
|
|
@ -378,6 +385,7 @@ function AddInvoice() {
|
||||||
setIsOpen(false); // Close the dropdown after clicking a link
|
setIsOpen(false); // Close the dropdown after clicking a link
|
||||||
|
|
||||||
navigate(path); // Navigate to the clicked path
|
navigate(path); // Navigate to the clicked path
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderField = (field) => {
|
const renderField = (field) => {
|
||||||
|
|
@ -398,7 +406,7 @@ function AddInvoice() {
|
||||||
placeholder={field.placeholder}
|
placeholder={field.placeholder}
|
||||||
value={formData[field.name]}
|
value={formData[field.name]}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
// onBlur={handleChange}
|
// onBlur={handleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -413,11 +421,12 @@ function AddInvoice() {
|
||||||
value={formData[field.name]}
|
value={formData[field.name]}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
maxLength={14} // Set maxLength to 14
|
maxLength={14} // Set maxLength to 14
|
||||||
// onBlur={handleChange}
|
// onBlur={handleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
case "date":
|
case "date":
|
||||||
return (
|
return (
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
|
|
@ -434,7 +443,7 @@ function AddInvoice() {
|
||||||
case "prefix-input":
|
case "prefix-input":
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="form-group col-md-12"
|
className="form-group col-md-6"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
|
@ -443,13 +452,13 @@ function AddInvoice() {
|
||||||
height: "50px",
|
height: "50px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-groups">
|
<div className="input-group">
|
||||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
{field.prefixText}
|
{field.prefixText}
|
||||||
</span> */}
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text" // Set input type to 'text' to allow decimals
|
type="text" // Set input type to 'text' to allow decimals
|
||||||
style={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
|
style={{ border: "none" }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name={field.name}
|
name={field.name}
|
||||||
placeholder={field.placeholder}
|
placeholder={field.placeholder}
|
||||||
|
|
@ -458,8 +467,8 @@ function AddInvoice() {
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
// Allow only numbers and a decimal point with two digits after it
|
// Allow only numbers and a decimal point with two digits after it
|
||||||
e.target.value = e.target.value
|
e.target.value = e.target.value
|
||||||
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
|
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||||
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Allow only two decimal places
|
.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)
|
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -471,7 +480,7 @@ function AddInvoice() {
|
||||||
return (
|
return (
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<select
|
<select
|
||||||
className="input-select"
|
className="form-control-borderless"
|
||||||
name="vendor_department"
|
name="vendor_department"
|
||||||
value={formData.vendor_department}
|
value={formData.vendor_department}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|
@ -498,6 +507,7 @@ function AddInvoice() {
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -573,99 +583,46 @@ function AddInvoice() {
|
||||||
|
|
||||||
case "radio":
|
case "radio":
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px', }}>
|
||||||
className="d-flex align-items-center"
|
<label className="me-4">{field.label}</label>
|
||||||
style={{
|
{field.options.map((option, index) => (
|
||||||
border: "1px solid #ACB4AA",
|
<div key={index} className="form-check me-4">
|
||||||
padding: "5px 5px",
|
{" "}
|
||||||
width: "fit-content",
|
<input
|
||||||
borderRadius: "40px",
|
type="radio"
|
||||||
marginBottom: "20px",
|
className="form-check-input"
|
||||||
}}
|
name={field.name}
|
||||||
>
|
value={option.value}
|
||||||
<label className="">{field.label}</label>
|
checked={formData[field.name] === option.value}
|
||||||
<div className="d-flex">
|
onChange={handlePaymentMethodChange}
|
||||||
{field.options.map((option, index) => (
|
/>
|
||||||
<div
|
<label className="form-check-label">{option.label}</label>
|
||||||
key={index}
|
</div>
|
||||||
className="form-check"
|
))}
|
||||||
style={{
|
|
||||||
cursor: "pointer",
|
|
||||||
backgroundColor:
|
|
||||||
formData[field.name] === option.value
|
|
||||||
? "#4a5546"
|
|
||||||
: "transparent",
|
|
||||||
padding: "5px 25px",
|
|
||||||
borderRadius: "20px",
|
|
||||||
}}
|
|
||||||
onClick={() =>
|
|
||||||
handlePaymentMethodChange({
|
|
||||||
target: { name: field.name, value: option.value },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="form-check-label"
|
|
||||||
style={{
|
|
||||||
fontWeight: "normal",
|
|
||||||
color:
|
|
||||||
formData[field.name] === option.value
|
|
||||||
? "#ffffff"
|
|
||||||
: "#282e26",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
case "payment-method-options":
|
case "payment-method-options":
|
||||||
return (
|
return (
|
||||||
formData.pay_method_status === "pay_now" && (
|
formData.pay_method_status === "pay_now" && (
|
||||||
<div
|
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px' }}>
|
||||||
className="d-flex align-items-center"
|
{/* Align items vertically */}
|
||||||
style={{
|
{/* <label className="me-4">Payment Method Options:</label>{" "} */}
|
||||||
border: "2px solid #ACB4AA",
|
{/* Extra space after the main label */}
|
||||||
padding: "5px 5px", // Add padding to give space on both sides
|
|
||||||
width: "fit-content",
|
|
||||||
borderRadius: "40px",
|
|
||||||
marginBottom: "30px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{paymentMethodOptions.map((option, index) => (
|
{paymentMethodOptions.map((option, index) => (
|
||||||
<div
|
<div key={index} className="form-check me-4">
|
||||||
key={index}
|
{" "}
|
||||||
className="form-check "
|
{/* Space between options */}
|
||||||
style={{
|
<input
|
||||||
cursor: "pointer",
|
type="radio"
|
||||||
backgroundColor:
|
className="form-check-input"
|
||||||
formData.pay_method === option.value
|
name="pay_method"
|
||||||
? "#4a5546"
|
value={option.value}
|
||||||
: "transparent",
|
checked={formData.pay_method === option.value}
|
||||||
padding: "5px 25px",
|
onChange={handleChange}
|
||||||
borderRadius: "20px",
|
/>
|
||||||
}}
|
<label className="form-check-label">{option.label}</label>{" "}
|
||||||
onClick={() =>
|
{/* Space between radio and label */}
|
||||||
handleChange({
|
|
||||||
target: { name: "pay_method", value: option.value },
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="form-check-label"
|
|
||||||
style={{
|
|
||||||
fontWeight: "normal",
|
|
||||||
color:
|
|
||||||
formData.pay_method === option.value
|
|
||||||
? "#ffffff"
|
|
||||||
: "#282e26",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{option.label}
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -690,8 +647,8 @@ function AddInvoice() {
|
||||||
return (
|
return (
|
||||||
(formData.pay_method === "cheque" ||
|
(formData.pay_method === "cheque" ||
|
||||||
formData.pay_method === "bank") && (
|
formData.pay_method === "bank") && (
|
||||||
<div className="row align-items-center">
|
<div className="row mb-3" >
|
||||||
<div className="col-md-4">
|
<div className="col-md-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<select
|
<select
|
||||||
required
|
required
|
||||||
|
|
@ -710,15 +667,15 @@ function AddInvoice() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{formData.pay_method === "cheque" && (
|
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque
|
||||||
<div className="col-md-4">
|
<div className="col-md-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<input
|
<input
|
||||||
required
|
required
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cheque_no"
|
name="cheque_no"
|
||||||
placeholder="Cheque Number"
|
placeholder="Enter Cheque Number"
|
||||||
value={formData.cheque_no}
|
value={formData.cheque_no}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
maxLength={20}
|
maxLength={20}
|
||||||
|
|
@ -726,8 +683,7 @@ function AddInvoice() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<div className="col-md-12">
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<input
|
<input
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -737,7 +693,9 @@ function AddInvoice() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -752,31 +710,29 @@ function AddInvoice() {
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === "/" ? "active" : ""}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick("/")}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Bill/Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === "/payInvoice" ? "active" : ""}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick("/payInvoice")}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Bill/Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === "/atmDeposit" ? "active" : ""}`}
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick("/atmDeposit")}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
>
|
|
||||||
ATM Deposit
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
className={`btn ${activeButton === "/bankDeposit" ? "active" : ""}`}
|
|
||||||
onClick={() => handleLinkClick("/bankDeposit")}
|
|
||||||
>
|
>
|
||||||
Bank Deposit
|
Bank Deposit
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
|
>
|
||||||
|
ATM Deposit
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
|
|
@ -784,37 +740,32 @@ function AddInvoice() {
|
||||||
className="container"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
border: "1px solid #EBEAF2",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
|
borderRadius: "40px"
|
||||||
borderRadius: "40px",
|
|
||||||
// height: "479px";
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
|
||||||
{/* Render Fields */}
|
{/* Render Fields */}
|
||||||
{Object.keys(groupedFields).map((rowKey) => (
|
{Object.keys(groupedFields).map((rowKey) => (
|
||||||
<div
|
<div className="row mb-3" key={rowKey}>
|
||||||
className="row mb-3"
|
|
||||||
style={{
|
|
||||||
gap: "10%",
|
|
||||||
paddingLeft: "5%", // Add equal padding
|
|
||||||
// paddingRight: "%",
|
|
||||||
}}
|
|
||||||
key={rowKey}
|
|
||||||
>
|
|
||||||
{groupedFields[rowKey].map((field, index) => (
|
{groupedFields[rowKey].map((field, index) => (
|
||||||
<div key={index} className={field.column}>
|
<div key={index} className={field.column}>
|
||||||
{renderField(field)}
|
{renderField(field)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
))}
|
))}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{/* Prepaid Tax Field */}
|
{/* Prepaid Tax Field */}
|
||||||
{formData.prepaid_tax && (
|
{formData.prepaid_tax && (
|
||||||
<div className="row ">
|
<div className="row mb-3">
|
||||||
<div className="col-md-3">
|
<div className="col-md-6">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
|
<label htmlFor="prepaid_amount">Prepaid Tax</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -826,47 +777,30 @@ function AddInvoice() {
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
// Allow only numbers and one decimal point with two digits after it
|
// Allow only numbers and one decimal point with two digits after it
|
||||||
e.target.value = e.target.value
|
e.target.value = e.target.value
|
||||||
.replace(/[^0-9.]/g, "") // Remove non-numeric characters except the decimal point
|
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||||
.replace(/^(\d*\.?\d{0,2}).*/g, "$1") // Ensure only two decimal places
|
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places
|
||||||
.slice(0, 12); // Limit input length
|
.slice(0, 12); // Limit input length
|
||||||
}}
|
}}
|
||||||
style={{ marginLeft: "60px" }}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="">
|
<div className="">
|
||||||
{/* Action Buttons */}
|
{/* Action Buttons */}
|
||||||
<div
|
<div className="d-flex justify-content-end">
|
||||||
className="d-flex justify-content-end"
|
|
||||||
style={{ gap: "15px" }}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-contained me-2"
|
className="btn btn-contained me-2"
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
style={{
|
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||||
border: " 1px solid #282e26",
|
|
||||||
borderRadius: "20px",
|
|
||||||
borderRadius: "40px",
|
|
||||||
width: "181px",
|
|
||||||
height: "45px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||||
type="submit"
|
|
||||||
className="btn"
|
|
||||||
style={{
|
|
||||||
color: "white",
|
|
||||||
backgroundColor: "#282e26",
|
|
||||||
borderRadius: "40px",
|
|
||||||
width: "181px",
|
|
||||||
height: "45px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -891,8 +825,9 @@ function AddInvoice() {
|
||||||
onVendorAdded={handleVendorAdded}
|
onVendorAdded={handleVendorAdded}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default AddInvoice;
|
export default AddInvoice;
|
||||||
|
|
@ -148,33 +148,31 @@ function AtmDeposit() {
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Bill/Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Bill/Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
|
||||||
>
|
|
||||||
ATM Deposit
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
>
|
>
|
||||||
Bank Deposit
|
Bank Deposit
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
|
>
|
||||||
|
ATM Deposit
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
|
|
@ -189,13 +187,8 @@ function AtmDeposit() {
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
|
||||||
|
|
||||||
<div className=" col-md-12 row mb-3"
|
<div className=" col-md-12 row mb-3">
|
||||||
style={{
|
<div className="col-md-4 mb-3">
|
||||||
gap: "6%",
|
|
||||||
paddingLeft: "5%", // Add equal padding
|
|
||||||
// paddingRight: "%",
|
|
||||||
}}>
|
|
||||||
<div className="col-md-3 mb-2">
|
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -207,13 +200,13 @@ function AtmDeposit() {
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-3 mb-3">
|
<div className="col-md-3 mb-3">
|
||||||
<select
|
<select
|
||||||
className="input-select"
|
className="form-select custom-select"
|
||||||
id="bank_deposite_type"
|
id="bank_deposite_type"
|
||||||
name="bank_deposite_type"
|
name="bank_deposite_type"
|
||||||
value={formData.bank_deposite_type}
|
value={formData.bank_deposite_type}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
>
|
>
|
||||||
<option value="">Select Cash type</option>
|
<option value="">Select a type</option>
|
||||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||||
<option key={type} value={type}>
|
<option key={type} value={type}>
|
||||||
{type}
|
{type}
|
||||||
|
|
@ -221,14 +214,14 @@ function AtmDeposit() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-3 mb-4">
|
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
|
||||||
<div className="input-group" style={{ width: "100%" }}>
|
<div className="input-group" style={{ width: "100%" }}>
|
||||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
USD
|
USD
|
||||||
</span> */}
|
</span>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
style={{ flex: 1, }}
|
style={{ border: "none", flex: 1 }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cash_amount"
|
name="cash_amount"
|
||||||
placeholder="Amount"
|
placeholder="Amount"
|
||||||
|
|
@ -244,7 +237,7 @@ function AtmDeposit() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* <div className="mb-3 col-md-4">
|
<div className="mb-3 col-md-4">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -253,7 +246,7 @@ function AtmDeposit() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="Notes"
|
placeholder="Notes"
|
||||||
/>
|
/>
|
||||||
</div> */}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-3 row">
|
<div className="col-md-3 row">
|
||||||
|
|
@ -280,16 +273,16 @@ function AtmDeposit() {
|
||||||
<div className="">
|
<div className="">
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
<div className="d-flex justify-content-end">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-contained me-2"
|
className="btn btn-contained me-2"
|
||||||
onClick={() => navigate("/")}
|
onClick={() => navigate("/")}
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
|
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
|
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -302,7 +295,6 @@ function AtmDeposit() {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,13 @@ function BankDeposit() {
|
||||||
const { Get, Post } = useApi();
|
const { Get, Post } = useApi();
|
||||||
const storeid = user.store;
|
const storeid = user.store;
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [activeButton, setActiveButton] = useState('');
|
const [activeButton, setActiveButton] = useState('');
|
||||||
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [reloadData, setReloadData] = useState(false);
|
const [reloadData, setReloadData] = useState(false);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveButton(location.pathname); // Set the active button based on the current location
|
setActiveButton(location.pathname); // Set the active button based on the current location
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
@ -156,56 +156,49 @@ function BankDeposit() {
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Bill/Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Bill/Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
<button
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
>
|
||||||
>
|
Bank Deposit
|
||||||
ATM Deposit
|
</button>
|
||||||
</button>
|
<button
|
||||||
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
<button
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
>
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
ATM Deposit
|
||||||
>
|
</button>
|
||||||
Bank Deposit
|
</div>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
<div
|
<div
|
||||||
className="container"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
borderRadius: "40px",
|
borderRadius:"40px"
|
||||||
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div className="col-md-12 row mb-3">
|
||||||
|
<div className="mb-3 col-md-4">
|
||||||
|
|
||||||
<div className="col-md-12 row " style={{
|
|
||||||
gap: "4%",
|
|
||||||
marginLeft:"3px"
|
|
||||||
}}>
|
|
||||||
<div className=" col-md-3">
|
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -215,30 +208,6 @@ function BankDeposit() {
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="mb-3 col-md-4">
|
|
||||||
<select
|
|
||||||
className="input-select"
|
|
||||||
id="bank_deposite_type"
|
|
||||||
name="bank_deposite_type"
|
|
||||||
value={formData.bank_deposite_type}
|
|
||||||
onChange={handleChange}
|
|
||||||
style={{ borderBottom: "1px solid #e4e5e7" }}
|
|
||||||
>
|
|
||||||
<option value="" enable>
|
|
||||||
Select Cash type
|
|
||||||
</option>
|
|
||||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
|
||||||
<option key={type} value={type}>
|
|
||||||
{type}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="mb-3 col-md-4">
|
<div className="mb-3 col-md-4">
|
||||||
<select
|
<select
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -255,56 +224,93 @@ function BankDeposit() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mb-3 col-md-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control-borderless"
|
||||||
|
name="note"
|
||||||
|
value={formData.note}
|
||||||
|
onChange={handleChange}
|
||||||
|
placeholder="Notes"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-12 row">
|
||||||
<div
|
<div className="mb-3 col-md-12">
|
||||||
className="col-md-12"
|
<div className="d-flex flex-row">
|
||||||
style={{
|
Type:
|
||||||
display: "flex",
|
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||||
alignItems: "center",
|
<div className="form-check me-3" key={type}>
|
||||||
justifyContent: "space-between", // Adjust spacing between items
|
<input
|
||||||
gap: "50px", // Add gap for consistent spacing
|
className="form-check-input"
|
||||||
|
type="radio"
|
||||||
}}
|
name="bank_deposite_type"
|
||||||
>
|
id={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
value={type}
|
||||||
|
checked={formData.bank_deposite_type === type}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label"
|
||||||
|
htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-12 row mt-4">
|
||||||
<div
|
<div
|
||||||
className="form-group col-3"
|
className="form-group col-md-5"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
|
borderBottom: "1px solid #f4f4f4",
|
||||||
|
paddingBottom: "16px",
|
||||||
flex: "1", // Allow the field to adjust in size
|
height: "50px",
|
||||||
|
marginLeft: "10px"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
|
<span className="input-group-text" style={{ border: "none" }}>
|
||||||
|
USD
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text" // Change to text because we want to handle the regex validation manually
|
||||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
|
style={{ border: "none" }}
|
||||||
className="form-control"
|
className="form-control-borderless"
|
||||||
name="cash_amount"
|
name="cash_amount"
|
||||||
placeholder="Cash Amount"
|
placeholder="Cash Amount"
|
||||||
value={formData.cash_amount || ""}
|
value={formData.cash_amount || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
maxLength={10}
|
maxLength={10} // Limit input to 10 digits
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
className="form-group "
|
className="form-group col-md-5"
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
borderBottom: "1px solid #f4f4f4",
|
||||||
|
paddingBottom: "16px",
|
||||||
flex: "1",
|
height: "50px",
|
||||||
|
marginLeft: "10px"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
|
<span
|
||||||
|
className="input-group-text"
|
||||||
|
style={{ border: "none" }}
|
||||||
|
>
|
||||||
|
USD
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
|
style={{ border: "none" }}
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cheque_amount"
|
name="cheque_amount"
|
||||||
placeholder="Cheque Amount"
|
placeholder="Cheque Amount"
|
||||||
|
|
@ -313,48 +319,22 @@ function BankDeposit() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
className="form-group"
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
border:"none",
|
|
||||||
height: "50px",
|
|
||||||
flex: "1",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <input
|
|
||||||
type="text"
|
|
||||||
className="form-control-borderless"
|
|
||||||
name="note"
|
|
||||||
value={formData.note}
|
|
||||||
onChange={handleChange}
|
|
||||||
placeholder="Notes"
|
|
||||||
style={{
|
|
||||||
border: "none",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
/> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="d-flex justify-content-end">
|
||||||
|
<button
|
||||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
type="button"
|
||||||
<button
|
className="btn btn-contained me-2"
|
||||||
type="button"
|
onClick={() => navigate("/")}
|
||||||
className="btn btn-contained me-2"
|
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||||
onClick={() => navigate("/")}
|
>
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
Cancel
|
||||||
>
|
</button>
|
||||||
Cancel
|
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
|
||||||
</button>
|
Save
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
</button>
|
||||||
Save
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -270,7 +270,7 @@ const BankDepositTable = (props) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pagination">
|
<div className="pagination">
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handlePrevPage}
|
onClick={handlePrevPage}
|
||||||
disabled={currentPage === 1}
|
disabled={currentPage === 1}
|
||||||
|
|
@ -284,11 +284,11 @@ const BankDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
|
|
||||||
{paginationItems}
|
{paginationItems}
|
||||||
|
|
||||||
{/* <button
|
<button
|
||||||
className="pgbtn"
|
className="pgbtn"
|
||||||
onClick={handleNextPage}
|
onClick={handleNextPage}
|
||||||
disabled={currentPage === totalPages}
|
disabled={currentPage === totalPages}
|
||||||
|
|
@ -302,131 +302,99 @@ const BankDepositTable = (props) => {
|
||||||
>
|
>
|
||||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||||
</svg>
|
</svg>
|
||||||
</button> */}
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
<div
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: "20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Invoice due this month */}
|
||||||
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
backgroundColor: "#fff8e6",
|
||||||
|
border: "1px solid #ffd700",
|
||||||
|
borderRadius: "8px",
|
||||||
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: "50px",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "flex-start",
|
||||||
marginBottom:"20px"
|
width: "400px",
|
||||||
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Invoice due this month */}
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
<div
|
$500
|
||||||
style={{
|
</p>
|
||||||
backgroundColor: "#fff8e6",
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
border: "1px solid #ffd700",
|
Invoice due this month
|
||||||
borderRadius: "20px",
|
</p>
|
||||||
padding: "16px 24px",
|
</div>
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "385px",
|
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
{/* Last 7 days sale */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#e6ffee",
|
backgroundColor: "#e6ffee",
|
||||||
border: "1px solid #00b300",
|
border: "1px solid #00b300",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
textAlign: "left",
|
||||||
textAlign: "left",
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
<p
|
$19,864,63,521
|
||||||
style={{
|
</p>
|
||||||
fontFamily: "Comfortaa",
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
fontStyle: "normal",
|
Last 7 days sale
|
||||||
fontWeight: 700,
|
</p>
|
||||||
fontSize: "48px",
|
</div>
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$19,521
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
{/* Expense this month */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffe6e6",
|
backgroundColor: "#ffe6e6",
|
||||||
border: "1px solid #ff4d4d",
|
border: "1px solid #ff4d4d",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
textAlign: "left",
|
||||||
textAlign: "left",
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
<p
|
$0.00
|
||||||
style={{
|
</p>
|
||||||
fontFamily: "Comfortaa",
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
fontStyle: "normal",
|
Expense this month
|
||||||
fontWeight: 700,
|
</p>
|
||||||
fontSize: " 48px",
|
</div>
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
<div className="d-flex align-items-center mb-3">
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="searchcontainer" >
|
<div className="searchcontainer">
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{width:"300px" , height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -521,10 +489,9 @@ const BankDepositTable = (props) => {
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
style={{
|
style={{
|
||||||
|
marginLeft: "10px",
|
||||||
|
backgroundColor: "#f4f4f4",
|
||||||
width: "40px",
|
width: "130px",
|
||||||
height: "40px",
|
|
||||||
borderRadius: "60px",
|
borderRadius: "60px",
|
||||||
padding: "15px",
|
padding: "15px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -542,7 +509,6 @@ const BankDepositTable = (props) => {
|
||||||
style={{
|
style={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
marginLeft:'6px',
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: "0",
|
padding: "0",
|
||||||
|
|
@ -588,7 +554,7 @@ const BankDepositTable = (props) => {
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
Filter
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|
@ -700,23 +666,20 @@ const BankDepositTable = (props) => {
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
<table className="table table-borderless table-responsive">
|
<table className="table table-borderless table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr style={{
|
<tr>
|
||||||
backgroundColor: '#282e26',
|
|
||||||
color: '#ffffff',
|
|
||||||
height: '30px', // Add height for row spacing
|
|
||||||
textAlign:"center"
|
|
||||||
}}>
|
|
||||||
{["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
|
{["date", "bank_name", "bank_deposite_type", "amount", "Transaction Type","actions"].map(
|
||||||
(header, index) => (
|
(header, index) => (
|
||||||
<th
|
<th
|
||||||
key={header}
|
key={header}
|
||||||
onClick={() => handleSort(header)}
|
onClick={() => handleSort(header)}
|
||||||
style={{
|
style={{
|
||||||
paddingLeft: "50px",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
backgroundColor:'#282e26',
|
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||||
color:'#ffffff',
|
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||||
textAlign: "left",
|
borderTopRightRadius: index === 5 ? "60px" : "0",
|
||||||
|
borderBottomRightRadius: index === 5 ? "60px" : "0",
|
||||||
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -758,13 +721,13 @@ const BankDepositTable = (props) => {
|
||||||
{currentInvoices.length !== 0 ?
|
{currentInvoices.length !== 0 ?
|
||||||
currentInvoices.map((invoice) => (
|
currentInvoices.map((invoice) => (
|
||||||
<tr key={invoice.id}>
|
<tr key={invoice.id}>
|
||||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
{invoice.date}
|
{invoice.date}
|
||||||
</td>
|
</td>
|
||||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
{invoice.bank_name}
|
{invoice.bank_name}
|
||||||
</td>
|
</td>
|
||||||
<td style={{ cursor: "pointer", textAlign: "center" }}>
|
<td style={{ cursor: "pointer", textAlign: "left" }}>
|
||||||
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
|
||||||
{invoice.bank_deposite_type
|
{invoice.bank_deposite_type
|
||||||
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
|
||||||
|
|
@ -772,8 +735,8 @@ const BankDepositTable = (props) => {
|
||||||
: "N/A"}
|
: "N/A"}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
|
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
|
||||||
<td style={{ textAlign: 'center' }}>
|
<td style={{ textAlign: 'left' }}>
|
||||||
<span style={getStatusStyle(invoice.transaction_type)}>
|
<span style={getStatusStyle(invoice.transaction_type)}>
|
||||||
{invoice.transaction_type ?
|
{invoice.transaction_type ?
|
||||||
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -10,20 +9,6 @@
|
||||||
border-radius: 40px;
|
border-radius: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invoice-table-container {
|
|
||||||
max-width: 1320px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
border-radius: 40px;
|
|
||||||
height: 735px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center; /* Horizontal centering */
|
|
||||||
align-items: center; /* Vertical centering */
|
|
||||||
margin: 0 auto; /* Ensures centering in case of block layout */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.dropdown-toggle::after {
|
.dropdown-toggle::after {
|
||||||
display: none; /* This will remove the default dropdown arrow */
|
display: none; /* This will remove the default dropdown arrow */
|
||||||
}
|
}
|
||||||
|
|
@ -33,27 +18,24 @@
|
||||||
}
|
}
|
||||||
.button-groups {
|
.button-groups {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between; /* Space between buttons */
|
margin-left: 35%;
|
||||||
align-items: center; /* Center align buttons vertically */
|
|
||||||
margin: 0 auto; /* Center the entire button group */
|
|
||||||
gap: 10px; /* Adjust the spacing between buttons */
|
gap: 10px; /* Adjust the spacing between buttons */
|
||||||
width: auto; /* Fixed width */
|
background-color: #ffffff;
|
||||||
height: 60px; /* Fixed height */
|
width: auto;
|
||||||
background: #FFFFFF;
|
|
||||||
border: 1px solid #EBEAF2;
|
|
||||||
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
|
|
||||||
border-radius: 44px;
|
border-radius: 44px;
|
||||||
padding: 0 8px; /* Equal padding on left and right sides */
|
padding: 10px 50px;
|
||||||
}
|
|
||||||
|
|
||||||
/* Active button styles */
|
}
|
||||||
.btn.active {
|
|
||||||
|
|
||||||
|
/* Active button styles */
|
||||||
|
.btn.active {
|
||||||
background-color: #ffaf32; /* Yellow background */
|
background-color: #ffaf32; /* Yellow background */
|
||||||
border-radius: 27px;
|
border-radius: 20px;
|
||||||
color: black; /* Black text */
|
color: black; /* Black text */
|
||||||
padding: 10px 20px; /* Ensure padding consistency for buttons */
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.form-container {
|
.form-container {
|
||||||
width: 1328px;
|
width: 1328px;
|
||||||
|
|
@ -74,11 +56,11 @@
|
||||||
.form-control-borderless {
|
.form-control-borderless {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: .375rem .75rem;
|
||||||
font-size: 16px;
|
font-size: 1rem;
|
||||||
font-weight: bold;
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
color: #999999;
|
color: #212529;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -107,7 +89,7 @@
|
||||||
.input-group {
|
.input-group {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
/* background-color: #f4f4f4; */
|
background-color: #f4f4f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group .form-control {
|
.input-group .form-control {
|
||||||
|
|
@ -119,26 +101,19 @@
|
||||||
|
|
||||||
.table th {
|
.table th {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 40px;
|
height: 60px;
|
||||||
align-items: center;
|
background-color: #f9f9f9;
|
||||||
/* margin-right: 50px; */
|
|
||||||
background-color: #ffffff;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td {
|
.table td {
|
||||||
border-bottom: 1px solid #EBEAF2;
|
border-bottom: .5px solid #f4f4f4;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table tbody tr:hover {
|
.table tbody tr:hover {
|
||||||
background-color: #f1f1f1;
|
background-color: #f1f1f1;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
|
|
@ -152,13 +127,10 @@
|
||||||
border-end-start-radius: 24px;
|
border-end-start-radius: 24px;
|
||||||
border-end-end-radius: 24px;
|
border-end-end-radius: 24px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-bottom: 2px solid #EBEAF2;
|
|
||||||
background-color: #ffffff;
|
background-color: #f4f4f4;
|
||||||
border-left: 2px solid #ebeaf2;
|
|
||||||
border-Right: 2px solid #ebeaf2;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pgbtn {
|
.pgbtn {
|
||||||
|
|
@ -167,7 +139,7 @@
|
||||||
border: #ced4da;
|
border: #ced4da;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-pgbtn {
|
.active-pgbtn {
|
||||||
|
|
@ -175,17 +147,11 @@
|
||||||
border: 1px solid #00230007;
|
border: 1px solid #00230007;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterbutton {
|
.filterbutton {
|
||||||
background: #FFFFFF;
|
background-color: #f4f4f4;
|
||||||
|
|
||||||
border: 1px solid #DBDBDB;
|
|
||||||
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
|
|
||||||
gap:'20px'
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
|
|
@ -344,7 +310,8 @@ input[type="color"]:focus,
|
||||||
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
|
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* style for dropdown --> select type in bank deposite and atm deposite */
|
|
||||||
|
|
||||||
.custom-select {
|
.custom-select {
|
||||||
border: none; /* Remove default borders */
|
border: none; /* Remove default borders */
|
||||||
border-bottom: 2px solid #e4e5e7; /* Add a bottom border */
|
border-bottom: 2px solid #e4e5e7; /* Add a bottom border */
|
||||||
|
|
@ -358,22 +325,4 @@ input[type="color"]:focus,
|
||||||
box-shadow: none; /* Remove any shadow */
|
box-shadow: none; /* Remove any shadow */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* for selct dropdown style --> dashboard // */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.input-select{
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
background-color: transparent;
|
|
||||||
color: #999999;
|
|
||||||
width: 100%;
|
|
||||||
outline: none;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -284,118 +284,86 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div
|
||||||
|
style={{
|
||||||
<div
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
margin: "20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Invoice due this month */}
|
||||||
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
backgroundColor: "#fff8e6",
|
||||||
|
border: "1px solid #ffd700",
|
||||||
|
borderRadius: "8px",
|
||||||
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: "50px",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "flex-start",
|
||||||
marginBottom:"20px"
|
width: "400px",
|
||||||
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Invoice due this month */}
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
<div
|
$500
|
||||||
style={{
|
</p>
|
||||||
backgroundColor: "#fff8e6",
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
border: "1px solid #ffd700",
|
Invoice due this month
|
||||||
borderRadius: "20px",
|
</p>
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "385px",
|
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$500
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Invoice due this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Last 7 days sale */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#e6ffee",
|
|
||||||
border: "1px solid #00b300",
|
|
||||||
borderRadius: "20px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "385px",
|
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$19,864
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Last 7 days sale
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Expense this month */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffe6e6",
|
|
||||||
border: "1px solid #ff4d4d",
|
|
||||||
borderRadius: "20px",
|
|
||||||
padding: "16px 24px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
width: "385px",
|
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: " 48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$0.00
|
|
||||||
</p>
|
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
|
||||||
Expense this month
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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: "400px",
|
||||||
|
textAlign: "left",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
|
$19,864,63,521
|
||||||
|
</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: "400px",
|
||||||
|
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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
|
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
|
||||||
|
|
@ -405,7 +373,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="input-group flexiblesearch"
|
className="input-group flexiblesearch"
|
||||||
style={{ height: "40px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -507,8 +475,10 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
style={{
|
style={{
|
||||||
width: "40px",
|
marginLeft: "10px",
|
||||||
height: "40px",
|
backgroundColor: "#f4f4f4",
|
||||||
|
width: "130px",
|
||||||
|
height: "50px",
|
||||||
borderRadius: "60px",
|
borderRadius: "60px",
|
||||||
padding: "15px",
|
padding: "15px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -525,7 +495,6 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
style={{
|
style={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
marginLeft:'6px',
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
|
@ -536,7 +505,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FilterButton />
|
<FilterButton />
|
||||||
|
Filter
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|
@ -651,13 +620,11 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
{/* <div className="">
|
<div className="">
|
||||||
<div className=""> */}
|
<div className="">
|
||||||
<table className="table table-borderless table-responsive">
|
<table className="table table-borderless table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr
|
<tr>
|
||||||
|
|
||||||
>
|
|
||||||
{[
|
{[
|
||||||
"date",
|
"date",
|
||||||
"vendor Name",
|
"vendor Name",
|
||||||
|
|
@ -674,7 +641,7 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
paddingLeft: index === 0 ? "30px" : "0",
|
paddingLeft: index === 0 ? "30px" : "0",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
|
|
||||||
textAlign: "center",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
backgroundColor:'#282e26',
|
backgroundColor:'#282e26',
|
||||||
color:'#ffffff'
|
color:'#ffffff'
|
||||||
|
|
@ -709,24 +676,18 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td>
|
||||||
style={{
|
<span style={getStatusStyle(invoice.status)}>
|
||||||
|
{invoice.status
|
||||||
|
.replace(/_/g, " ")
|
||||||
}}
|
.split(" ")
|
||||||
|
.map(
|
||||||
>
|
(word) =>
|
||||||
<span style={getStatusStyle(invoice.status)}>
|
word.charAt(0).toUpperCase() + word.slice(1)
|
||||||
{invoice.status
|
)
|
||||||
.replace(/_/g, " ")
|
.join(" ")}
|
||||||
.split(" ")
|
</span>
|
||||||
.map(
|
</td>
|
||||||
(word) => word.charAt(0).toUpperCase() + word.slice(1)
|
|
||||||
)
|
|
||||||
.join(" ")}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td>
|
<td>
|
||||||
<div className="dropdown">
|
<div className="dropdown">
|
||||||
<button
|
<button
|
||||||
|
|
@ -779,13 +740,12 @@ const InvoiceTable = ({ reloadData }) => {
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{renderPagination()}
|
|
||||||
</div>
|
</div>
|
||||||
// </div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{renderPagination()}
|
||||||
// </div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -803,81 +763,24 @@ const paymentMethodStyles = {
|
||||||
const getPaymentMethodStyle = (method) => ({
|
const getPaymentMethodStyle = (method) => ({
|
||||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
|
|
||||||
padding: "10px 20px",
|
padding: "10px 20px",
|
||||||
color: "#000",
|
color: "#000",
|
||||||
});
|
});
|
||||||
|
|
||||||
const statusStyles = {
|
const statusStyles = {
|
||||||
draft: {
|
All: { backgroundColor: "#4545DB" },
|
||||||
backgroundColor: "#D1D1EF",
|
// draft: { backgroundColor: '#4545DB7C' },
|
||||||
color: "#fff",
|
unpaid: { backgroundColor: "#ff2024" },
|
||||||
borderRadius: "5px",
|
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
unpaid: {
|
|
||||||
backgroundColor: "#ff2024",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
paid: {
|
|
||||||
backgroundColor: "#198f51",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
partially_paid: {
|
|
||||||
backgroundColor: "#0c8ce9",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusStyle = (status) => ({
|
const getStatusStyle = (status) => ({
|
||||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||||
width: "130px", // Ensure consistent fixed width
|
|
||||||
height: "30px", // Ensure consistent fixed height
|
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
padding: "5px 10px",
|
padding: "10px 20px",
|
||||||
textAlign: "center",
|
|
||||||
display: "flex", // Flexbox for alignment
|
|
||||||
justifyContent: "center", // Center horizontally
|
|
||||||
alignItems: "center", // Center vertically
|
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getCountClass = (status) => ({
|
const getCountClass = (status) => ({
|
||||||
...statusStyles[status],
|
...statusStyles[status],
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
|
|
|
||||||
|
|
@ -19,13 +19,13 @@ function PayInvoice() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
const [activeButton, setActiveButton] = useState('');
|
const [activeButton, setActiveButton] = useState('');
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setActiveButton(location.pathname); // Set the active button based on the current location
|
setActiveButton(location.pathname); // Set the active button based on the current location
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
@ -48,7 +48,7 @@ function PayInvoice() {
|
||||||
date: "",
|
date: "",
|
||||||
status: "paid",
|
status: "paid",
|
||||||
pay_method_status: "pay_now",
|
pay_method_status: "pay_now",
|
||||||
pay_method: "cash",
|
pay_method: "",
|
||||||
amount: "",
|
amount: "",
|
||||||
remaining_amount: "", // Initialize as empty string or 0
|
remaining_amount: "", // Initialize as empty string or 0
|
||||||
discount: 0,
|
discount: 0,
|
||||||
|
|
@ -63,7 +63,7 @@ function PayInvoice() {
|
||||||
bank: "",
|
bank: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const makeBlank = () => {
|
const makeBlank = ()=>{
|
||||||
setFormData({
|
setFormData({
|
||||||
store_id: user.store,
|
store_id: user.store,
|
||||||
invoice_no: "",
|
invoice_no: "",
|
||||||
|
|
@ -200,14 +200,14 @@ function PayInvoice() {
|
||||||
setInitialAmount("");
|
setInitialAmount("");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// Check if the payment method is selected
|
// Check if the payment method is selected
|
||||||
if (!formData.pay_method) {
|
if (!formData.pay_method) {
|
||||||
toast.error("Please select a payment method before submitting.");
|
toast.error("Please select a payment method before submitting.");
|
||||||
return; // Prevent form submission if payment method is not selected
|
return; // Prevent form submission if payment method is not selected
|
||||||
}
|
}
|
||||||
|
|
||||||
const payAmount = parseFloat(formData.pay_amount);
|
const payAmount = parseFloat(formData.pay_amount);
|
||||||
|
|
@ -218,58 +218,58 @@ function PayInvoice() {
|
||||||
|
|
||||||
|
|
||||||
if (newRemainingAmount < 0) {
|
if (newRemainingAmount < 0) {
|
||||||
toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
|
toast.error("Payment amount exceeds the remaining amount. Please enter a valid amount.");
|
||||||
return; // Prevent form submission if payment exceeds remaining amount
|
return; // Prevent form submission if payment exceeds remaining amount
|
||||||
}
|
}
|
||||||
|
|
||||||
const status = newRemainingAmount <= 0 ? "paid" : "partially_paid"; // If remaining is 0 or less, mark it as 'paid'
|
const status = newRemainingAmount <= 0 ? "paid" : "partially_paid"; // If remaining is 0 or less, mark it as 'paid'
|
||||||
const finalRemainingAmount =
|
const finalRemainingAmount =
|
||||||
newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
|
newRemainingAmount <= 0 ? "0.00" : newRemainingAmount.toFixed(2); // If fully paid, remaining should be 0
|
||||||
|
|
||||||
let updatedFormData = {
|
let updatedFormData = {
|
||||||
...formData,
|
...formData,
|
||||||
remaining_amount: finalRemainingAmount, // Update the remaining amount
|
remaining_amount: finalRemainingAmount, // Update the remaining amount
|
||||||
status: status, // Set the status based on the remaining amount
|
status: status, // Set the status based on the remaining amount
|
||||||
cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
|
cheque_no: formData.pay_method === "cheque" ? formData.cheque_no : null,
|
||||||
bank: formData.pay_method === "bank" ? formData.bank : null,
|
bank: formData.pay_method === "bank" ? formData.bank : null,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Check if the pay_method_status is 'credit_invoice'
|
// Check if the pay_method_status is 'credit_invoice'
|
||||||
if (updatedFormData.pay_method_status !== "credit_invoice") {
|
if (updatedFormData.pay_method_status !== "credit_invoice") {
|
||||||
updatedFormData = {
|
updatedFormData = {
|
||||||
...updatedFormData,
|
...updatedFormData,
|
||||||
pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
|
pay_method_status: "credit_invoice", // Force setting pay_method_status to 'credit_invoice'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Submitting:", updatedFormData);
|
console.log("Submitting:", updatedFormData);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (!updatedFormData.id) {
|
if (!updatedFormData.id) {
|
||||||
toast.error("No invoice selected. Please select an invoice before submitting.");
|
toast.error("No invoice selected. Please select an invoice before submitting.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
|
const response = await Patch(`invoiceData`, updatedFormData.id, updatedFormData);
|
||||||
|
|
||||||
if (response && response.status === 200) {
|
if (response && response.status === 200) {
|
||||||
console.log("Submission successful:", response.data);
|
console.log("Submission successful:", response.data);
|
||||||
toast.success("Invoice payment submitted successfully!");
|
toast.success("Invoice payment submitted successfully!");
|
||||||
setReloadData(!reloadData);
|
setReloadData(!reloadData);
|
||||||
makeBlank();
|
makeBlank();
|
||||||
// window.location.reload(); // Reload the page to reflect changes
|
// window.location.reload(); // Reload the page to reflect changes
|
||||||
} else {
|
} else {
|
||||||
setReloadData(!reloadData);
|
setReloadData(!reloadData);
|
||||||
|
|
||||||
console.error("Failed to submit:", response.data);
|
console.error("Failed to submit:", response.data);
|
||||||
toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
|
toast.error(`Error: ${response.data.message || "Failed to update invoice."}`);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setReloadData(!reloadData);
|
setReloadData(!reloadData);
|
||||||
console.error("Error:", error);
|
console.error("Error:", error);
|
||||||
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
|
toast.error(`An unexpected error occurred: ${error.message || "Please try again later."}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
navigate("/");
|
navigate("/");
|
||||||
|
|
@ -300,60 +300,50 @@ function PayInvoice() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
<div className="d-flex justify-content-between mb-4">
|
<div className="d-flex justify-content-between mb-4">
|
||||||
<div className="button-groups">
|
<div className="button-groups">
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/')}
|
onClick={() => handleLinkClick('/')}
|
||||||
>
|
>
|
||||||
Add Bill/Invoice
|
Add Invoice
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
|
||||||
onClick={() => handleLinkClick('/payInvoice')}
|
onClick={() => handleLinkClick('/payInvoice')}
|
||||||
>
|
>
|
||||||
Pay Bill/Invoice
|
Pay Invoice
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
<button
|
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
||||||
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
onClick={() => handleLinkClick('/bankDeposit')}
|
||||||
onClick={() => handleLinkClick('/atmDeposit')}
|
>
|
||||||
>
|
Bank Deposit
|
||||||
ATM Deposit
|
</button>
|
||||||
</button>
|
<button
|
||||||
|
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
|
||||||
<button
|
onClick={() => handleLinkClick('/atmDeposit')}
|
||||||
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
|
>
|
||||||
onClick={() => handleLinkClick('/bankDeposit')}
|
ATM Deposit
|
||||||
>
|
</button>
|
||||||
Bank Deposit
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="formcontainer">
|
<div className="formcontainer">
|
||||||
<div
|
<div
|
||||||
className="container"
|
className="container"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||||
borderRadius: "40px"
|
borderRadius:"40px"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="">
|
<div className="">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div className="col-md-12 row" style={{gap:"10%"}}>
|
||||||
className="col-md-12 row"
|
<div className="mb-3 col-md-2" >
|
||||||
style={{
|
|
||||||
gap: "12%",
|
|
||||||
paddingLeft: "3%", // Add equal padding
|
|
||||||
|
|
||||||
// paddingRight: "%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="mb-3 col-md-3">
|
|
||||||
<input
|
<input
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
|
|
@ -365,16 +355,16 @@ function PayInvoice() {
|
||||||
|
|
||||||
<div className="mb-3 col-md-3">
|
<div className="mb-3 col-md-3">
|
||||||
<select
|
<select
|
||||||
className="input-select"
|
className="form-control-borderless"
|
||||||
name="vendor_department"
|
name="vendor_department"
|
||||||
value={formData.vendor_department}
|
value={formData.vendor_department}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const selectedValue = e.target.value;
|
const selectedValue = e.target.value;
|
||||||
if (selectedValue === "add-vendor") {
|
if (selectedValue === "add-vendor") {
|
||||||
handleShow(); // Function to open modal
|
handleShow(); // Modal ko open karne ke liye function
|
||||||
setFormData((prevData) => ({
|
setFormData((prevData) => ({
|
||||||
...prevData,
|
...prevData,
|
||||||
vendor_department: "", // Reset the field
|
vendor_department: "", // Field ko reset karne ke liye
|
||||||
}));
|
}));
|
||||||
} else {
|
} else {
|
||||||
handleChange(e); // Existing handler for normal options
|
handleChange(e); // Existing handler for normal options
|
||||||
|
|
@ -383,7 +373,6 @@ function PayInvoice() {
|
||||||
>
|
>
|
||||||
<option value="">Select Vendor</option>
|
<option value="">Select Vendor</option>
|
||||||
<option value="add-vendor">Add Vendor</option>{" "}
|
<option value="add-vendor">Add Vendor</option>{" "}
|
||||||
|
|
||||||
{/* Add Vendor Option */}
|
{/* Add Vendor Option */}
|
||||||
{vendors
|
{vendors
|
||||||
.filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
|
.filter((vendor) => !vendor.is_deleted) // Exclude deleted vendors
|
||||||
|
|
@ -404,24 +393,36 @@ function PayInvoice() {
|
||||||
placeholder="Invoice No"
|
placeholder="Invoice No"
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
|
{/* <select
|
||||||
|
className="form-control-borderless"
|
||||||
|
onChange={(e) =>
|
||||||
|
handleInvoiceSelect(
|
||||||
|
filteredInvoices.find((inv) => inv.id === e.target.value)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<option value="">Select Invoice</option>
|
||||||
|
{filteredInvoices.map((invoice) => (
|
||||||
|
<option key={invoice.id} value={invoice.id}>
|
||||||
|
{invoice.invoice_no}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mb-3 col-md-12 row">
|
||||||
<div className="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} >
|
<div className="col-md-2">
|
||||||
<div className="col-md-3 " >
|
|
||||||
<input
|
<input
|
||||||
name="amount"
|
name="amount"
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control-borderless"
|
||||||
value={formData.amount}
|
value={formData.amount}
|
||||||
readOnly
|
readOnly
|
||||||
placeholder="Amount"
|
placeholder="Amount"
|
||||||
style={{ backgroundColor: "#fafafa" }}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-2" >
|
<div className="col-md-2">
|
||||||
<input
|
<input
|
||||||
|
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="pay_amount"
|
name="pay_amount"
|
||||||
|
|
@ -453,32 +454,71 @@ function PayInvoice() {
|
||||||
.slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
.slice(0, 7); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-3">
|
<div className="col-md-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Grand Total"
|
placeholder="Grand Total"
|
||||||
value={grandTotal || ""}
|
value={grandTotal || ""}
|
||||||
readOnly
|
readOnly
|
||||||
style={{
|
style={{
|
||||||
|
border: 'none', // Remove all borders
|
||||||
backgroundColor: '#fafafa',
|
backgroundColor:'transparent',
|
||||||
|
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
|
||||||
}}
|
|
||||||
/>
|
outline: 'none', // Remove outline
|
||||||
</div>
|
padding: '6px 0', // Optional: Add padding to the top and bottom
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div
|
||||||
|
className=" d-flex align-items-center"
|
||||||
|
style={{
|
||||||
|
border: '2px solid #ACB4AA',
|
||||||
|
padding: '5px 40px',
|
||||||
|
width: 'fit-content',
|
||||||
|
borderRadius: '40px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{['cash', 'cheque', 'bank'].map((method) => (
|
||||||
|
<div className="me-3" key={method}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
className="form-check-input"
|
||||||
|
name="pay_method"
|
||||||
|
value={method}
|
||||||
|
checked={formData.pay_method === method}
|
||||||
|
onChange={handleChange}
|
||||||
|
id={`pay_method_${method}`} // Unique ID for each radio input
|
||||||
|
style={{ display: 'none' }} // Hide the actual radio button
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label cursor-pointer"
|
||||||
|
htmlFor={`pay_method_${method}`} // Link label to the input
|
||||||
|
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
||||||
|
style={{
|
||||||
|
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
||||||
|
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
||||||
|
padding: '5px 25px', // Add padding for better appearance
|
||||||
|
borderRadius: '20px', // Optional: Round the corners of the label
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="">
|
||||||
{/* <div className="col-md-3 mt-4">
|
{/* <div className="col-md-3 mt-4">
|
||||||
<input
|
<input
|
||||||
name="after_discount"
|
name="after_discount"
|
||||||
|
|
@ -491,86 +531,45 @@ function PayInvoice() {
|
||||||
/>
|
/>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="md-col-12 " style={{ marginLeft: "3%", marginTop: "35px" }}>
|
|
||||||
<div
|
|
||||||
className="d-flex align-items-center"
|
|
||||||
style={{
|
|
||||||
border: '1px solid #ACB4AA',
|
|
||||||
padding: '5px',
|
|
||||||
width: "fit-content",
|
|
||||||
borderRadius: '40px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{['cash', 'Bank Card/ACH/EFT', 'cheque',].map((method) => (
|
|
||||||
<div className="" key={method}>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
className="form-check-input"
|
|
||||||
name="pay_method"
|
|
||||||
value={method}
|
|
||||||
checked={formData.pay_method === method}
|
|
||||||
onChange={handleChange}
|
|
||||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
|
||||||
style={{ display: 'none' }} // Hide the actual radio button
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="form-check-label cursor-pointer"
|
|
||||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
|
||||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
|
||||||
style={{
|
|
||||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
|
||||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
|
||||||
padding: '5px 25px', // Add padding for better appearance
|
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
|
<div className="col-md-6">
|
||||||
|
|
||||||
{formData.pay_method === "cheque" && (
|
{formData.pay_method === "cheque" && (
|
||||||
<div className="row "> {/* Use row class for Bootstrap grid */}
|
<div className="">
|
||||||
<div className="col-md-2 mb-3"> {/* First column for bank select */}
|
<div className="col-md-12 row">
|
||||||
<select
|
<div className="mb-3 col-md-6">
|
||||||
required
|
<select
|
||||||
className="form-control-borderless" // Keep Bootstrap styles
|
required
|
||||||
name="bank"
|
className="form-control-borderless"
|
||||||
value={formData.bank}
|
name="bank"
|
||||||
onChange={handleChange}
|
value={formData.bank}
|
||||||
>
|
onChange={handleChange}
|
||||||
<option value="">Select Bank</option>
|
>
|
||||||
{banks.map((bank) => (
|
<option value="">Select Bank</option>
|
||||||
<option key={bank.id} value={bank.id}>
|
{banks.map((bank) => (
|
||||||
{bank.name}
|
<option key={bank.id} value={bank.id}>
|
||||||
</option>
|
{bank.name}
|
||||||
))}
|
</option>
|
||||||
</select>
|
))}
|
||||||
</div>
|
</select>
|
||||||
|
</div>
|
||||||
<div className="col-md-2 mb-3"> {/* Second column for cheque number input */}
|
<div className="mb-3 col-md-6">
|
||||||
<input
|
<input
|
||||||
required
|
required
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control-borderless"
|
className="form-control-borderless"
|
||||||
name="cheque_no"
|
name="cheque_no"
|
||||||
placeholder="Check Number"
|
placeholder="Check Number"
|
||||||
value={formData.cheque_no}
|
value={formData.cheque_no}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{formData.pay_method === "Bank Card/ACH/EFT" && (
|
{formData.pay_method === "bank" && (
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<div className="col-md-12 row">
|
<div className="col-md-12 row">
|
||||||
<div className="mb-3 col-md-6">
|
<div className="mb-3 col-md-6">
|
||||||
|
|
@ -615,19 +614,19 @@ function PayInvoice() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-end" style={{ gap: "15px" }}>
|
<div className="d-flex justify-content-end">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-contained me-2"
|
className="btn btn-contained me-2"
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
|
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
|
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -639,7 +638,7 @@ function PayInvoice() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
|
<TableComponent reloadData={reloadData} onEdit={handleInvoiceSelect} />
|
||||||
<ToastContainer />
|
<ToastContainer/>
|
||||||
<AddVendorModal
|
<AddVendorModal
|
||||||
show={showModal}
|
show={showModal}
|
||||||
handleClose={handleClose}
|
handleClose={handleClose}
|
||||||
|
|
|
||||||
|
|
@ -312,15 +312,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
|
<div
|
||||||
|
|
||||||
<div
|
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
gap: "50px",
|
gap: "16px",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
marginBottom:"20px"
|
margin: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Invoice due this month */}
|
{/* Invoice due this month */}
|
||||||
|
|
@ -328,30 +326,20 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff8e6",
|
backgroundColor: "#fff8e6",
|
||||||
border: "1px solid #ffd700",
|
border: "1px solid #ffd700",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$500
|
$500
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Invoice due this month
|
Invoice due this month
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -361,30 +349,20 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#e6ffee",
|
backgroundColor: "#e6ffee",
|
||||||
border: "1px solid #00b300",
|
border: "1px solid #00b300",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "385px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
$19,864,63,521
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: "48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$19,521
|
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Last 7 days sale
|
Last 7 days sale
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -394,42 +372,33 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffe6e6",
|
backgroundColor: "#ffe6e6",
|
||||||
border: "1px solid #ff4d4d",
|
border: "1px solid #ff4d4d",
|
||||||
borderRadius: "20px",
|
borderRadius: "8px",
|
||||||
padding: "16px 24px",
|
padding: "16px 24px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "flex-start",
|
alignItems: "flex-start",
|
||||||
width: "390px",
|
width: "400px",
|
||||||
height: "130px",
|
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p
|
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||||
style={{
|
|
||||||
fontFamily: "Comfortaa",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: 700,
|
|
||||||
fontSize: " 48px",
|
|
||||||
lineHeight: "27px",
|
|
||||||
marginTop:"20px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
$0.00
|
$0.00
|
||||||
</p>
|
</p>
|
||||||
<p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
|
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||||
Expense this month
|
Expense this month
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
|
||||||
|
<div className="d-flex align-items-center mb-3">
|
||||||
{/* Search Bar */}
|
{/* Search Bar */}
|
||||||
<div className="searchcontainer" style={{ gap: "10px" }}>
|
<div className="searchcontainer" style={{ gap: "10px" }}>
|
||||||
<div
|
<div
|
||||||
className="input-group"
|
className="input-group"
|
||||||
style={{ width: "300px", height: "40px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="input-group-text"
|
className="input-group-text"
|
||||||
|
|
@ -526,10 +495,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
<div
|
<div
|
||||||
className="filterbutton"
|
className="filterbutton"
|
||||||
style={{
|
style={{
|
||||||
// marginLeft: "10px",
|
marginLeft: "10px",
|
||||||
|
backgroundColor: "#f4f4f4",
|
||||||
width: "40px",
|
width: "130px",
|
||||||
height: "40px",
|
height: "50px",
|
||||||
borderRadius: "60px",
|
borderRadius: "60px",
|
||||||
padding: "15px",
|
padding: "15px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -547,7 +516,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
marginLeft:'6px',
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
padding: "0",
|
padding: "0",
|
||||||
|
|
@ -593,7 +561,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
Filter
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
|
@ -681,7 +649,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div> */}
|
||||||
</li>
|
</li>
|
||||||
<li className="text-center mt-2" >
|
<li className="text-center mt-2">
|
||||||
<button
|
<button
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
style={{ width: "163px", height: "40px" }}
|
style={{ width: "163px", height: "40px" }}
|
||||||
|
|
@ -705,24 +673,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
{/* Table of Invoices */}
|
{/* Table of Invoices */}
|
||||||
<table className="table table-borderless table-responsive">
|
<table className="table table-borderless table-responsive">
|
||||||
<thead>
|
<thead>
|
||||||
<tr
|
<tr>
|
||||||
style={{
|
|
||||||
backgroundColor: '#282e26',
|
|
||||||
color: '#ffffff',
|
|
||||||
height: '30px', // Add height for row spacing
|
|
||||||
|
|
||||||
}}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
>
|
|
||||||
{[
|
{[
|
||||||
"date",
|
"date",
|
||||||
"vendor_department_name",
|
"vendor_department_name",
|
||||||
"amount",
|
"amount",
|
||||||
"remaining_amount",
|
"remaining_amount",
|
||||||
// "updated date",
|
"updated date",
|
||||||
"payment_method",
|
"payment_method",
|
||||||
"status",
|
"status",
|
||||||
"actions",
|
"actions",
|
||||||
|
|
@ -735,9 +692,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
backgroundColor: '#282e26',
|
backgroundColor: '#282e26',
|
||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
textAlign: "center",
|
textAlign: "start",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
// Add a border for separation
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{header
|
{header
|
||||||
|
|
@ -749,7 +705,6 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
|
|
||||||
<div className="dropdown">
|
<div className="dropdown">
|
||||||
<ul className="dropdown-menu" aria-labelledby="actionDropdown">
|
<ul className="dropdown-menu" aria-labelledby="actionDropdown">
|
||||||
|
|
||||||
{/* <li>
|
{/* <li>
|
||||||
<a
|
<a
|
||||||
className="dropdown-item"
|
className="dropdown-item"
|
||||||
|
|
@ -797,9 +752,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
>
|
>
|
||||||
{invoice.remaining_amount}
|
{invoice.remaining_amount}
|
||||||
</td>
|
</td>
|
||||||
{/* <td onClick={() => handleCellClick(invoice, "updated_at")}>
|
<td onClick={() => handleCellClick(invoice, "updated_at")}>
|
||||||
{invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
|
{invoice.updated_at ? invoice.updated_at.split("T")[0] : ""}
|
||||||
</td> */}
|
</td>
|
||||||
<td onClick={() => handleCellClick(invoice, "payment_method")}>
|
<td onClick={() => handleCellClick(invoice, "payment_method")}>
|
||||||
<span style={getPaymentMethodStyle(invoice.pay_method)}>
|
<span style={getPaymentMethodStyle(invoice.pay_method)}>
|
||||||
{invoice.pay_method &&
|
{invoice.pay_method &&
|
||||||
|
|
@ -813,9 +768,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||||
.join(" ")}
|
.join(" ")}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td onClick={() => handleCellClick(invoice, "status")}
|
<td onClick={() => handleCellClick(invoice, "status")}>
|
||||||
|
|
||||||
>
|
|
||||||
<span style={getStatusStyle(invoice.status)}>
|
<span style={getStatusStyle(invoice.status)}>
|
||||||
{invoice.status &&
|
{invoice.status &&
|
||||||
invoice.status
|
invoice.status
|
||||||
|
|
@ -913,71 +866,19 @@ const getPaymentMethodStyle = (method) => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const statusStyles = {
|
const statusStyles = {
|
||||||
draft: {
|
All: { backgroundColor: "#4545DB" },
|
||||||
backgroundColor: "#D1D1EF",
|
// draft: { backgroundColor: "#4545DB7C" },
|
||||||
color: "#fff",
|
unpaid: { backgroundColor: "#ff2024" },
|
||||||
borderRadius: "5px",
|
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
unpaid: {
|
|
||||||
backgroundColor: "#ff2024",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
paid: {
|
|
||||||
backgroundColor: "#198f51",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
partially_paid: {
|
|
||||||
backgroundColor: "#0c8ce9",
|
|
||||||
color: "#fff",
|
|
||||||
borderRadius: "5px",
|
|
||||||
padding: "5px 10px",
|
|
||||||
width: "130px", // Fixed width
|
|
||||||
height: "30px", // Fixed height
|
|
||||||
fontSize: "14px",
|
|
||||||
textAlign: "center",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getStatusStyle = (status) => ({
|
const getStatusStyle = (status) => ({
|
||||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||||
width: "130px", // Ensure consistent fixed width
|
|
||||||
height: "30px", // Ensure consistent fixed height
|
|
||||||
borderRadius: "5px",
|
borderRadius: "5px",
|
||||||
padding: "5px 10px",
|
padding: "10px 20px",
|
||||||
|
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const getCountClass = (status) => ({
|
const getCountClass = (status) => ({
|
||||||
...statusStyles[status],
|
...statusStyles[status],
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,6 @@ import { useNavigate } from "react-router-dom";
|
||||||
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
||||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
|
|
||||||
import expensetype from '../../../../assets/Image/expenses type .png'
|
|
||||||
import vendor from '../../../../assets/Image/vendor.png'
|
|
||||||
|
|
||||||
export default function Expense() {
|
export default function Expense() {
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
|
|
@ -451,24 +448,24 @@ export default function Expense() {
|
||||||
try {
|
try {
|
||||||
let response;
|
let response;
|
||||||
if (editingInvoiceId) {
|
if (editingInvoiceId) {
|
||||||
// Editing an existing invoice
|
// Editing an existing invoice
|
||||||
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
||||||
if (!originalInvoice) {
|
if (!originalInvoice) {
|
||||||
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine the new status based on payment method and remaining amount
|
// Determine the new status based on payment method and remaining amount
|
||||||
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
|
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
|
||||||
let newStatus = originalInvoice.status; // Start with the original status
|
let newStatus = originalInvoice.status; // Start with the original status
|
||||||
|
|
||||||
if (formData.pay_method_status === "pay_now") {
|
if (formData.pay_method_status === "pay_now") {
|
||||||
newStatus = "paid"; // Always "paid" if paid now
|
newStatus = "paid"; // Always "paid" if paid now
|
||||||
} else if (formData.pay_method_status === "pay_later") {
|
} else if (formData.pay_method_status === "pay_later") {
|
||||||
newStatus = "unpaid"; // Ensure unpaid if paying later
|
newStatus = "unpaid"; // Ensure unpaid if paying later
|
||||||
} else if (newRemainingAmount < originalInvoice.amount) {
|
} else if (newRemainingAmount < originalInvoice.amount) {
|
||||||
newStatus = "partially_paid"; // Adjust if partially paid
|
newStatus = "partially_paid"; // Adjust if partially paid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Ensure pay_amount is included when editing
|
// Ensure pay_amount is included when editing
|
||||||
|
|
@ -628,148 +625,15 @@ export default function Expense() {
|
||||||
<div className="main-container">
|
<div className="main-container">
|
||||||
<div className="d-flex p-2">
|
<div className="d-flex p-2">
|
||||||
<div className="expensecontainer d-flex flex-column pd-2">
|
<div className="expensecontainer d-flex flex-column pd-2">
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
<h3 className="mb-1">Expense</h3>
|
||||||
|
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||||
|
{" "}
|
||||||
+ Add Invoice
|
+ Add Invoice
|
||||||
<img
|
|
||||||
src={invoiceIcon}
|
|
||||||
alt="Invoice Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</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 Expense Type
|
|
||||||
<img
|
|
||||||
src={expensetype}
|
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="table-responsive">
|
<div className="table-responsive">
|
||||||
|
|
||||||
|
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
<DataTable
|
<DataTable
|
||||||
data={expenseInvoice}
|
data={expenseInvoice}
|
||||||
|
|
@ -796,7 +660,7 @@ export default function Expense() {
|
||||||
className="modal-container"
|
className="modal-container"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
style={{
|
style={{
|
||||||
width: "1200px",
|
width: "700px",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
margin: "100px auto",
|
margin: "100px auto",
|
||||||
padding: "20px",
|
padding: "20px",
|
||||||
|
|
@ -811,7 +675,6 @@ export default function Expense() {
|
||||||
</h5>
|
</h5>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
|
|
||||||
onClick={toggleModal}
|
onClick={toggleModal}
|
||||||
width="14"
|
width="14"
|
||||||
height="14"
|
height="14"
|
||||||
|
|
@ -831,16 +694,13 @@ export default function Expense() {
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<form>
|
<form>
|
||||||
<div className="form-row form-group col-md-12 position-relative d-flex">
|
<div className="form-row form-group col-md-12 position-relative d-flex">
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
paddingRight: "10px",
|
paddingRight: "10px"
|
||||||
|
|
||||||
}}
|
}}
|
||||||
type="date"
|
type="date"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -851,16 +711,12 @@ export default function Expense() {
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
outline: "none", // Remove outline to prevent default focus styling
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -870,15 +726,15 @@ export default function Expense() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex col-md-12">
|
||||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -908,18 +764,12 @@ export default function Expense() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
|
|
||||||
<div className="d-flex col-md-12">
|
|
||||||
|
|
||||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
|
||||||
<select
|
<select
|
||||||
className="form-control"
|
className="form-control"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
name="vendor_department_service_titles"
|
name="vendor_department_service_titles"
|
||||||
|
|
@ -928,7 +778,7 @@ export default function Expense() {
|
||||||
id="expenseType"
|
id="expenseType"
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
<option value="">Expense Type</option>
|
<option value="">Select Expense Type</option>
|
||||||
<option value="add-expense">Add Expense Type</option>
|
<option value="add-expense">Add Expense Type</option>
|
||||||
{filteredExpenseTypes.map((service) => (
|
{filteredExpenseTypes.map((service) => (
|
||||||
<option key={service.id} value={service.title}>
|
<option key={service.id} value={service.title}>
|
||||||
|
|
@ -937,207 +787,85 @@ export default function Expense() {
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
className="form-row d-flex col-md-3 "
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="input-group col-md-6">
|
|
||||||
<div
|
|
||||||
className="input-group-prepend"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
height: "100%",
|
|
||||||
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* <span
|
|
||||||
className="input-group-text prefixtext"
|
|
||||||
style={{
|
|
||||||
border: "none",
|
|
||||||
fontSize: "14px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
USD
|
|
||||||
</span> */}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
className="form-control sampletext"
|
|
||||||
placeholder="Amount"
|
|
||||||
aria-label="Amount"
|
|
||||||
aria-describedby="addon-wrapping"
|
|
||||||
name={editingInvoiceId ? "amount" : "amount"}
|
|
||||||
value={
|
|
||||||
editingInvoiceId && formData.pay_amount === undefined
|
|
||||||
? formData.remaining_amount
|
|
||||||
: formData.amount || formData.amount
|
|
||||||
}
|
|
||||||
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)
|
|
||||||
}}
|
|
||||||
onChange={handleChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: '2px solid #ACB4AA',
|
|
||||||
padding: '10px 10px',
|
|
||||||
width: 'fit-content',
|
|
||||||
borderRadius: '40px',
|
|
||||||
// marginTop:'20px',
|
|
||||||
display: 'flex', // Use flexbox
|
|
||||||
gap: '10px', // Add spacing between the options
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="pay_later"
|
|
||||||
checked={formData.pay_method_status === 'pay_later'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Pay Later
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="pay_now"
|
|
||||||
checked={formData.pay_method_status === 'pay_now'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Pay Now
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="pay_method_status"
|
|
||||||
value="credit_invoice"
|
|
||||||
checked={formData.pay_method_status === 'credit_invoice'}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
|
|
||||||
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
|
|
||||||
padding: '5px 10px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Credit Invoice
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex col-md-12" style={{ paddingTop: "15px" }}>
|
||||||
|
<p>Payment Method : </p>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="pay_later"
|
||||||
|
checked={formData.pay_method_status === "pay_later"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Pay Later
|
||||||
|
</label>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="pay_now"
|
||||||
|
checked={formData.pay_method_status === "pay_now"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Pay Now
|
||||||
|
</label>
|
||||||
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="credit_invoice"
|
||||||
|
checked={formData.pay_method_status === "credit_invoice"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Credit Invoice
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{showPaymentOptions && (
|
{showPaymentOptions && (
|
||||||
<div
|
<div className="d-flex col-md-6 mb-3">
|
||||||
className="d-flex col-md-6 mb-3"
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
style={{
|
<input
|
||||||
border: '2px solid #ACB4AA',
|
type="radio"
|
||||||
padding: '10px 10px',
|
name="specificPaymentMethod"
|
||||||
width: 'fit-content',
|
value="cash"
|
||||||
borderRadius: '40px',
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
display: 'flex', // Use flexbox for inner items
|
/>{" "}
|
||||||
gap: '10px', // Add spacing between the options
|
Cash
|
||||||
marginTop: '20px', // Keep this if you want some space above
|
</label>
|
||||||
}}
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
>
|
<input
|
||||||
{[
|
type="radio"
|
||||||
{ value: "cash", label: "Cash" },
|
name="specificPaymentMethod"
|
||||||
{ value: "cheque", label: "Check" },
|
value="cheque"
|
||||||
{ value: "bank", label: "Bank Card/ACH/EFT" }
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
].map((method) => (
|
/>{" "}
|
||||||
<label
|
Check
|
||||||
key={method.value}
|
</label>
|
||||||
className="radio-inline"
|
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||||
style={{
|
<input
|
||||||
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
|
type="radio"
|
||||||
color: formData.pay_method === method.value ? "white" : "black",
|
name="specificPaymentMethod"
|
||||||
|
value="bank"
|
||||||
padding: '5px 10px', // Add padding for better appearance
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
borderRadius: '20px', // Optional: Round the corners of the label
|
/>{" "}
|
||||||
cursor: "pointer",
|
Bank Card/ACH/EFT
|
||||||
}}
|
</label>
|
||||||
>
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="specificPaymentMethod"
|
|
||||||
value={method.value}
|
|
||||||
onChange={handleSpecificPaymentMethodChange}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
/>
|
|
||||||
{method.label} {/* Use the label defined in the array */}
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{(formData.pay_method_status === "pay_later" ||
|
{(formData.pay_method_status === "pay_later" ||
|
||||||
formData.pay_method_status === "credit_invoice") && (
|
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" }}>
|
||||||
<select
|
<select
|
||||||
className="form-control col-md-6 me-2"
|
className="form-control col-md-6 me-2"
|
||||||
name="days"
|
name="days"
|
||||||
value={formData.days || ""}
|
value={formData.days || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
required
|
required
|
||||||
|
|
@ -1153,11 +881,8 @@ export default function Expense() {
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "50px",
|
height: "50px",
|
||||||
}}
|
}}
|
||||||
className="form-control d-flex col-md-5"
|
className="form-control d-flex col-md-5"
|
||||||
|
|
@ -1175,11 +900,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
|
borderRadius: "10px",
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1202,10 +924,8 @@ export default function Expense() {
|
||||||
className="form-control me-2"
|
className="form-control me-2"
|
||||||
placeholder="Check Number"
|
placeholder="Check Number"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1219,10 +939,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1238,10 +956,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1261,10 +977,8 @@ export default function Expense() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1292,10 +1006,8 @@ export default function Expense() {
|
||||||
|
|
||||||
{formData.prepaid_tax && (
|
{formData.prepaid_tax && (
|
||||||
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}>
|
}}>
|
||||||
<div className="input-group col-md-6">
|
<div className="input-group col-md-6">
|
||||||
|
|
@ -1309,7 +1021,7 @@ export default function Expense() {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <span
|
<span
|
||||||
className="input-group-text prefixtext"
|
className="input-group-text prefixtext"
|
||||||
style={{
|
style={{
|
||||||
border: "none",
|
border: "none",
|
||||||
|
|
@ -1317,7 +1029,7 @@ export default function Expense() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
USD
|
USD
|
||||||
</span> */}
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -1339,7 +1051,57 @@ export default function Expense() {
|
||||||
</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
|
||||||
|
className="form-control sampletext"
|
||||||
|
placeholder="Amount"
|
||||||
|
aria-label="Amount"
|
||||||
|
aria-describedby="addon-wrapping"
|
||||||
|
name={editingInvoiceId ? "amount" : "amount"}
|
||||||
|
value={
|
||||||
|
editingInvoiceId && formData.pay_amount === undefined
|
||||||
|
? formData.remaining_amount
|
||||||
|
: formData.amount || formData.amount
|
||||||
|
}
|
||||||
|
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)
|
||||||
|
}}
|
||||||
|
onChange={handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1348,14 +1110,12 @@ export default function Expense() {
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-secondary-outline"
|
className="btn btn-secondary-outline"
|
||||||
onClick={toggleModal}
|
onClick={toggleModal}
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
|
||||||
>
|
>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
|
className="btn btn-primary"
|
||||||
className="btn"
|
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
|
|
|
||||||
|
|
@ -296,7 +296,7 @@ const GasTypeTable = ({
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
|
||||||
|
|
@ -321,7 +321,7 @@ const HouseChargeTable = ({
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@ const LotteryInventoryTable = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col, index) => (
|
{columns.map((col, index) => (
|
||||||
|
|
|
||||||
|
|
@ -194,7 +194,7 @@ const LotteryReportTable = ({
|
||||||
<div className="d-flex mb-3">
|
<div className="d-flex mb-3">
|
||||||
<div className="expense-searchcontainerstart d-flex"></div>
|
<div className="expense-searchcontainerstart d-flex"></div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
|
||||||
|
|
@ -190,7 +190,7 @@ const LotteryTable = ({
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col, index) => (
|
{columns.map((col, index) => (
|
||||||
|
|
|
||||||
|
|
@ -335,7 +335,7 @@ const WeeklyInvoiceTable = ({
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,7 @@ const DataTable = ({
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className="data-table-container">
|
<div className="data-table-container">
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
@ -180,7 +180,7 @@ const DataTable = ({
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="pagination">
|
<ul className="pagination">
|
||||||
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
<span
|
<span
|
||||||
|
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -196,9 +196,9 @@ const DataTable = ({
|
||||||
textAlign: "center"
|
textAlign: "center"
|
||||||
}}
|
}}
|
||||||
onClick={handlePrev}><</span>
|
onClick={handlePrev}><</span>
|
||||||
</li> */}
|
</li>
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
{/* <li
|
<li
|
||||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
@ -219,7 +219,7 @@ const DataTable = ({
|
||||||
textAlign: "center"
|
textAlign: "center"
|
||||||
}}
|
}}
|
||||||
onClick={handleNext}>> </span>
|
onClick={handleNext}>> </span>
|
||||||
</li> */}
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -126,62 +126,44 @@ const PayrollTable = ({
|
||||||
draft: {
|
draft: {
|
||||||
backgroundColor: "#D1D1EF",
|
backgroundColor: "#D1D1EF",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "5px 10px",
|
padding: "5px 10px",
|
||||||
width: "130px", // Set a fixed width
|
|
||||||
height: "30px", // Set a fixed height
|
|
||||||
fontSize:"14px"
|
|
||||||
},
|
},
|
||||||
unpaid: {
|
unpaid: {
|
||||||
backgroundColor: "#ff2024",
|
backgroundColor: "#EF3E49",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
width: "130px", // Set a fixed width
|
|
||||||
height: "30px", // Set a fixed height
|
|
||||||
fontSize:"14px",
|
|
||||||
textAlign: 'center',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
},
|
||||||
paid: {
|
paid: {
|
||||||
backgroundColor: "#198f51",
|
backgroundColor: "#5856AC",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
textAlign: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: "130px", // Set a fixed width
|
|
||||||
height: "30px", // Set a fixed height
|
|
||||||
fontSize:"14px"
|
|
||||||
},
|
},
|
||||||
partially_paid: {
|
partially_paid: {
|
||||||
backgroundColor: "#0c8ce9",
|
backgroundColor: "#FFB830",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
borderRadius: "5px",
|
borderRadius: "30px",
|
||||||
padding: "5px 20px",
|
padding: "5px 10px",
|
||||||
textAlign: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: "130px", // Set a fixed width
|
|
||||||
height: "30px", // Set a fixed height
|
|
||||||
fontSize:"14px"
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const paymentMethodStyles = {
|
const paymentMethodStyles = {
|
||||||
bank: { backgroundColor: "" },
|
bank: { backgroundColor: "#57A09C" },
|
||||||
"Business Cash": { backgroundColor: "" },
|
"Business Cash": { backgroundColor: "#38400B" },
|
||||||
"Credit Card": { backgroundColor: "" },
|
"Credit Card": { backgroundColor: "#28a745" },
|
||||||
cash: { backgroundColor: "" },
|
cash: { backgroundColor: "#CAC59D" },
|
||||||
cheque: { backgroundColor: "" },
|
cheque: { backgroundColor: "#38400B" },
|
||||||
pay_later: { backgroundColor: "" },
|
pay_later: { backgroundColor: "#E55477" },
|
||||||
pay_now: { backgroundColor: "" },
|
pay_now: { backgroundColor: "#A9B0F0" },
|
||||||
credit_invoice: { backgroundColor: "" },
|
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPaymentMethodStyle = (method) => ({
|
const getPaymentMethodStyle = (method) => ({
|
||||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||||
borderRadius: "30px",
|
borderRadius: "30px",
|
||||||
padding: "5px 10px",
|
padding: "5px 10px",
|
||||||
color: "#000",
|
color: "#fff",
|
||||||
});
|
});
|
||||||
|
|
||||||
const downloadCSV = () => {
|
const downloadCSV = () => {
|
||||||
|
|
@ -204,20 +186,17 @@ const PayrollTable = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="data-table-container">
|
<div className="data-table-container">
|
||||||
<div className="d-flex mb-3">
|
<div className="d-flex mb-3">
|
||||||
<div className="expense-searchcontainerstart d-flex">
|
<div className="expense-searchcontainerstart d-flex">
|
||||||
<div className="search-container"
|
<div className="search-container">
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
|
||||||
/>
|
/>
|
||||||
<SearchIcon />
|
<SearchIcon />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-outline-dark custbtn"
|
className="btn btn-outline-dark custbtn"
|
||||||
|
|
@ -239,8 +218,6 @@ const PayrollTable = ({
|
||||||
</svg>
|
</svg>
|
||||||
Export To Excel
|
Export To Excel
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
{/* <button className="btn custbtn2" type="submit">
|
{/* <button className="btn custbtn2" type="submit">
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
width="24"
|
||||||
|
|
@ -261,72 +238,27 @@ const PayrollTable = ({
|
||||||
Filter
|
Filter
|
||||||
</button> */}
|
</button> */}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||||
<div style={{ marginRight: "58%" }}>
|
<h3 className="me-2">Show</h3>
|
||||||
<div
|
<select
|
||||||
className="expense-search d-flex align-items-center"
|
name="option"
|
||||||
|
id="pageSelect"
|
||||||
style={{
|
className="selectoptions"
|
||||||
display: "flex",
|
value={rowsPerPage}
|
||||||
alignItems: "center",
|
onChange={(e) => {
|
||||||
backgroundColor: "#FFFFFF",
|
setRowsPerPage(Number(e.target.value));
|
||||||
border: "1px solid #DBDBDB",
|
setCurrentPage(1); // Reset to first page on change
|
||||||
borderRadius: "10px",
|
|
||||||
// boxSizing: "border-box",
|
|
||||||
cursor: "pointer",
|
|
||||||
|
|
||||||
width: "170px",
|
|
||||||
gap: "10px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<option value={5}>5</option>
|
||||||
style={{
|
<option value={10}>10</option>
|
||||||
fontFamily: "'Comfortaa'",
|
<option value={15}>15</option>
|
||||||
fontStyle: "normal",
|
<option value={20}>20</option>
|
||||||
fontWeight: "400",
|
</select>
|
||||||
fontSize: "16px",
|
</div>
|
||||||
padding: "5px",
|
|
||||||
color: "#000000",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show Rows:
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
name="option"
|
|
||||||
id="pageSelect"
|
|
||||||
className="selectoptions"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#282E26",
|
|
||||||
borderRadius: "0px 10px 10px 0px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
fontFamily: "'Comfortaa'",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "700",
|
|
||||||
fontSize: "16px",
|
|
||||||
lineHeight: "18px",
|
|
||||||
padding: "5px 8px",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
|
||||||
value={rowsPerPage}
|
|
||||||
onChange={(e) => {
|
|
||||||
setRowsPerPage(Number(e.target.value));
|
|
||||||
setCurrentPage(1); // Reset to the first page on change
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value={5}>5</option>
|
|
||||||
<option value={10}>10</option>
|
|
||||||
<option value={15}>15</option>
|
|
||||||
<option value={20}>20</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header" >
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col, index) => (
|
{columns.map((col, index) => (
|
||||||
<th key={index} scope="col" onClick={() => handleSort(col.field)}>
|
<th key={index} scope="col" onClick={() => handleSort(col.field)}>
|
||||||
|
|
@ -554,7 +486,7 @@ const PayrollTable = ({
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="pagination">
|
<ul className="pagination">
|
||||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
{/* <span
|
<span
|
||||||
style={{
|
style={{
|
||||||
width: "30px",
|
width: "30px",
|
||||||
height: "30px",
|
height: "30px",
|
||||||
|
|
@ -569,7 +501,7 @@ const PayrollTable = ({
|
||||||
onClick={handlePrev}
|
onClick={handlePrev}
|
||||||
>
|
>
|
||||||
<PrevIcon />
|
<PrevIcon />
|
||||||
</span> */}
|
</span>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
|
|
@ -578,7 +510,7 @@ const PayrollTable = ({
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|
||||||
{/* <span
|
<span
|
||||||
style={{
|
style={{
|
||||||
width: "30px",
|
width: "30px",
|
||||||
height: "30px",
|
height: "30px",
|
||||||
|
|
@ -593,7 +525,7 @@ const PayrollTable = ({
|
||||||
onClick={handleNext}
|
onClick={handleNext}
|
||||||
>
|
>
|
||||||
<NextIcon />
|
<NextIcon />
|
||||||
</span> */}
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -107,15 +107,15 @@ function ManageDepartments() {
|
||||||
(dept) => dept.type === "department"
|
(dept) => dept.type === "department"
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div className="" style={{marginTop:"5%"}}>
|
<div className="store-container">
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
{/* <p className="setting-title">Manage Departments</p> */}
|
<p className="setting-title">Manage Departments</p>
|
||||||
<div className="department-container">
|
<div className="create-department-section">
|
||||||
<div className="input-container">
|
<div className="input-container">
|
||||||
<div className="input-row">
|
<div className="input-row">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Enter Department Name"
|
placeholder="New Department"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
value={editDepartmentId ? editDepartmentTitle : newDepartment}
|
value={editDepartmentId ? editDepartmentTitle : newDepartment}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|
@ -125,22 +125,15 @@ function ManageDepartments() {
|
||||||
setNewDepartment(e.target.value);
|
setNewDepartment(e.target.value);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
style={{
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<button className="btn cus d-flex align-items-center" onClick={handleSaveDepartment}>
|
<button className="dept-button" onClick={handleSaveDepartment}>
|
||||||
{editDepartmentId ? "Update Department" : " + Add Department"}
|
{editDepartmentId ? "Update" : " + Add"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="store-container">
|
<div className="show-department-section">
|
||||||
|
|
||||||
<div className="show-department-section">
|
|
||||||
<div className="dept-cards-row">
|
<div className="dept-cards-row">
|
||||||
{filteredDepartments.length === 0 ? (
|
{filteredDepartments.length === 0 ? (
|
||||||
<p
|
<p
|
||||||
|
|
@ -208,8 +201,6 @@ function ManageDepartments() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -179,7 +179,6 @@ const ManageUserTable = ({
|
||||||
<div className="expense-searchcontainerstart d-flex">
|
<div className="expense-searchcontainerstart d-flex">
|
||||||
<div className="search-container">
|
<div className="search-container">
|
||||||
<input
|
<input
|
||||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
|
||||||
type="text"
|
type="text"
|
||||||
value={searchTerm}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
|
@ -277,71 +276,26 @@ const ManageUserTable = ({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||||
<div style={{ marginRight: "69%" }}>
|
<h3 className="me-2">Show</h3>
|
||||||
<div
|
<select
|
||||||
className="expense-search d-flex align-items-center"
|
name="option"
|
||||||
|
id="pageSelect"
|
||||||
style={{
|
className="selectoptions"
|
||||||
display: "flex",
|
value={rowsPerPage}
|
||||||
alignItems: "center",
|
onChange={(e) => {
|
||||||
backgroundColor: "#FFFFFF",
|
setRowsPerPage(Number(e.target.value));
|
||||||
border: "1px solid #DBDBDB",
|
setCurrentPage(1); // Reset to first page on change
|
||||||
borderRadius: "10px",
|
|
||||||
// boxSizing: "border-box",
|
|
||||||
cursor: "pointer",
|
|
||||||
|
|
||||||
width: "170px",
|
|
||||||
gap: "10px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<option value={5}>5</option>
|
||||||
style={{
|
<option value={10}>10</option>
|
||||||
fontFamily: "'Comfortaa'",
|
<option value={15}>15</option>
|
||||||
fontStyle: "normal",
|
<option value={20}>20</option>
|
||||||
fontWeight: "400",
|
</select>
|
||||||
fontSize: "16px",
|
</div>
|
||||||
padding: "5px",
|
|
||||||
color: "#000000",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show Rows:
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
name="option"
|
|
||||||
id="pageSelect"
|
|
||||||
className="selectoptions"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#282E26",
|
|
||||||
borderRadius: "0px 10px 10px 0px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
fontFamily: "'Comfortaa'",
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "700",
|
|
||||||
fontSize: "16px",
|
|
||||||
lineHeight: "18px",
|
|
||||||
padding: "5px 8px",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
|
||||||
value={rowsPerPage}
|
|
||||||
onChange={(e) => {
|
|
||||||
setRowsPerPage(Number(e.target.value));
|
|
||||||
setCurrentPage(1); // Reset to the first page on change
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value={5}>5</option>
|
|
||||||
<option value={10}>10</option>
|
|
||||||
<option value={15}>15</option>
|
|
||||||
<option value={20}>20</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
@ -464,7 +418,7 @@ const ManageUserTable = ({
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="pagination">
|
<ul className="pagination">
|
||||||
{/* <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
fontSize: "24px",
|
fontSize: "24px",
|
||||||
|
|
@ -483,9 +437,9 @@ const ManageUserTable = ({
|
||||||
<
|
<
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</li> */}
|
</li>
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
{/* <li
|
<li
|
||||||
className={`prev-next ${
|
className={`prev-next ${
|
||||||
currentPage === totalPages ? "disabled" : ""
|
currentPage === totalPages ? "disabled" : ""
|
||||||
}`}
|
}`}
|
||||||
|
|
@ -508,7 +462,7 @@ const ManageUserTable = ({
|
||||||
>
|
>
|
||||||
>{" "}
|
>{" "}
|
||||||
</span>
|
</span>
|
||||||
</li> */}
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,6 @@ import { toast, ToastContainer } from "react-toastify";
|
||||||
import CustomSwitch from "./CustomSwitch";
|
import CustomSwitch from "./CustomSwitch";
|
||||||
import ManageUserTable from "./ManageUserTable";
|
import ManageUserTable from "./ManageUserTable";
|
||||||
import Swal from "sweetalert2";
|
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() {
|
function ManageUsers() {
|
||||||
|
|
@ -117,17 +113,17 @@ function ManageUsers() {
|
||||||
cancelButtonColor: "#3085d6",
|
cancelButtonColor: "#3085d6",
|
||||||
confirmButtonText: "Yes, delete it!",
|
confirmButtonText: "Yes, delete it!",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Check if the user clicked the confirm button
|
// Check if the user clicked the confirm button
|
||||||
if (!result.isConfirmed) return; // Exit if the user cancels
|
if (!result.isConfirmed) return; // Exit if the user cancels
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await Delete("user", id);
|
await Delete("user", id);
|
||||||
setUsers((prev) => prev.filter((user) => user.id !== id)); // Remove the user from the list
|
setUsers((prev) => prev.filter((user) => user.id !== id)); // Remove the user from the list
|
||||||
toast.success("User deleted successfully!");
|
toast.success("User deleted successfully!");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error deleting user:", error);
|
console.error("Error deleting user:", error);
|
||||||
|
|
||||||
// Check if the error response contains the specific message
|
// Check if the error response contains the specific message
|
||||||
if (error.response && error.response.data && error.response.data.detail === "Store owners cannot be deleted.") {
|
if (error.response && error.response.data && error.response.data.detail === "Store owners cannot be deleted.") {
|
||||||
toast.error("Store owners cannot be deleted.");
|
toast.error("Store owners cannot be deleted.");
|
||||||
|
|
@ -139,22 +135,22 @@ function ManageUsers() {
|
||||||
const handleSaveUser = async () => {
|
const handleSaveUser = async () => {
|
||||||
const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/; // Email regex without #
|
const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/; // Email regex without #
|
||||||
const phoneRegex = /^[0-9]{10}$/; // US phone number regex for exactly 11 digits (starts with '1' for the country code)
|
const phoneRegex = /^[0-9]{10}$/; // US phone number regex for exactly 11 digits (starts with '1' for the country code)
|
||||||
|
|
||||||
// Validate email
|
// Validate email
|
||||||
if (!emailRegex.test(email)) {
|
if (!emailRegex.test(email)) {
|
||||||
toast.error("Please enter a valid email address (no '#' allowed).");
|
toast.error("Please enter a valid email address (no '#' allowed).");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate phone number
|
// Validate phone number
|
||||||
if (!phoneRegex.test(phoneNumber)) {
|
if (!phoneRegex.test(phoneNumber)) {
|
||||||
toast.error("Please enter a valid US phone number (11 digits, starts with '1').");
|
toast.error("Please enter a valid US phone number (11 digits, starts with '1').");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Derive role name from roles array
|
// Derive role name from roles array
|
||||||
const roleName = roles.find((r) => String(r.id) === String(role))?.name || "";
|
const roleName = roles.find((r) => String(r.id) === String(role))?.name || "";
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
first_name: fullName,
|
first_name: fullName,
|
||||||
email: email,
|
email: email,
|
||||||
|
|
@ -165,35 +161,35 @@ function ManageUsers() {
|
||||||
groups: [],
|
groups: [],
|
||||||
ms_role_name: roleName, // Derived role name
|
ms_role_name: roleName, // Derived role name
|
||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (currentUserId) {
|
if (currentUserId) {
|
||||||
// Update user
|
// Update user
|
||||||
await Patch("user", currentUserId, payload);
|
await Patch("user", currentUserId, payload);
|
||||||
|
|
||||||
// Update local state
|
// Update local state
|
||||||
setUsers((prevUsers) =>
|
setUsers((prevUsers) =>
|
||||||
prevUsers.map((user) =>
|
prevUsers.map((user) =>
|
||||||
user.id === currentUserId ? { ...user, ...payload } : user
|
user.id === currentUserId ? { ...user, ...payload } : user
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
toast.success("User updated successfully!");
|
toast.success("User updated successfully!");
|
||||||
} else {
|
} else {
|
||||||
// Add new user
|
// Add new user
|
||||||
await Post("user", payload);
|
await Post("user", payload);
|
||||||
|
|
||||||
// Fetch updated users
|
// Fetch updated users
|
||||||
const updatedUsers = await Get("user");
|
const updatedUsers = await Get("user");
|
||||||
setUsers(updatedUsers.results);
|
setUsers(updatedUsers.results);
|
||||||
|
|
||||||
toast.success("User added successfully!");
|
toast.success("User added successfully!");
|
||||||
}
|
}
|
||||||
|
|
||||||
handleCloseUserModal();
|
handleCloseUserModal();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error saving user:", error);
|
console.error("Error saving user:", error);
|
||||||
|
|
||||||
// Check for specific error responses
|
// Check for specific error responses
|
||||||
if (error.response && error.response.data) {
|
if (error.response && error.response.data) {
|
||||||
if (error.response.data.ms_role === "You cannot change the role of a store owner.") {
|
if (error.response.data.ms_role === "You cannot change the role of a store owner.") {
|
||||||
|
|
@ -208,23 +204,23 @@ function ManageUsers() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleAssignOwnerSubmit = async (e) => {
|
const handleAssignOwnerSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await Post("assignAsOwner", { email: ownerEmail });
|
const response = await Post("assignAsOwner", { email: ownerEmail });
|
||||||
|
|
||||||
// If successful, show success message
|
// If successful, show success message
|
||||||
toast.success("User assigned as owner successfully!");
|
toast.success("User assigned as owner successfully!");
|
||||||
setOwnerEmail(""); // Clear input
|
setOwnerEmail(""); // Clear input
|
||||||
fetchUsersAndRoles(); // Refresh the users and roles
|
fetchUsersAndRoles(); // Refresh the users and roles
|
||||||
handleCloseAssignOwnerModal(); // Close the modal
|
handleCloseAssignOwnerModal(); // Close the modal
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error assigning owner:", error);
|
console.error("Error assigning owner:", error);
|
||||||
|
|
||||||
// Check if the error contains a specific message
|
// Check if the error contains a specific message
|
||||||
if (error.response && error.response.data && error.response.data.error === "User with this email does not exist.") {
|
if (error.response && error.response.data && error.response.data.error === "User with this email does not exist.") {
|
||||||
toast.error("The email you provided does not exist.");
|
toast.error("The email you provided does not exist.");
|
||||||
|
|
@ -233,7 +229,7 @@ function ManageUsers() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleSwitchChange = (id) => {
|
const handleSwitchChange = (id) => {
|
||||||
setStatus((prevStatus) => !prevStatus);
|
setStatus((prevStatus) => !prevStatus);
|
||||||
|
|
@ -269,16 +265,16 @@ function ManageUsers() {
|
||||||
const numericValue = value.replace(/[^0-9]/g, '');
|
const numericValue = value.replace(/[^0-9]/g, '');
|
||||||
|
|
||||||
setFormData((prevData) => ({
|
setFormData((prevData) => ({
|
||||||
...prevData,
|
...prevData,
|
||||||
pincode: numericValue,
|
pincode: numericValue,
|
||||||
...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
|
...(numericValue.trim() === "" && { city: "", state: "", country: "" }),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// Trigger fetching location details if the length is valid
|
// Trigger fetching location details if the length is valid
|
||||||
if (numericValue.length === 5 || numericValue.length === 6) {
|
if (numericValue.length === 5 || numericValue.length === 6) {
|
||||||
fetchLocationDetails(numericValue);
|
fetchLocationDetails(numericValue);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// Handle pincode blur
|
// Handle pincode blur
|
||||||
const handlePincodeBlur = () => {
|
const handlePincodeBlur = () => {
|
||||||
const { pincode } = formData;
|
const { pincode } = formData;
|
||||||
|
|
@ -393,67 +389,27 @@ function ManageUsers() {
|
||||||
<div className="due-days">
|
<div className="due-days">
|
||||||
<div className="header-row">
|
<div className="header-row">
|
||||||
<div className="setting-title">Manage Users</div>
|
<div className="setting-title">Manage Users</div>
|
||||||
<div className="btn-position" style={{ display: "flex", gap: "10px" }}> {/* Set up flex with gap */}
|
<div className="btn-position">
|
||||||
<button
|
<button
|
||||||
className="btn cus d-flex align-items-center"
|
className="vendor-add-button"
|
||||||
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
onClick={() => handleShowUserModal()} // Open modal for adding a user
|
||||||
>
|
>
|
||||||
+ Add New User
|
+ Add New User
|
||||||
<img
|
|
||||||
src={userIcon}
|
|
||||||
alt="user Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
style={{
|
className="vendor-add-button"
|
||||||
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
|
onClick={() => handleShowStoreModal()} // Open modal for adding a user
|
||||||
>
|
>
|
||||||
+ Add New Store
|
+ Add New Store
|
||||||
<img
|
|
||||||
src={storeIcon}
|
|
||||||
alt="store Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
style={{
|
className="vendor-add-button"
|
||||||
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
|
onClick={() => setAssignOwnerModal(true)} // Open modal for assigning an owner
|
||||||
>
|
>
|
||||||
+ Assign Existing User As Owner
|
+ Assign Existing User As Owner
|
||||||
<img
|
|
||||||
src={ownerIcon}
|
|
||||||
alt="owner Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ManageUserTable
|
<ManageUserTable
|
||||||
data={users}
|
data={users}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
|
|
@ -469,24 +425,18 @@ function ManageUsers() {
|
||||||
show={true}
|
show={true}
|
||||||
handleClose={handleCloseUserModal}
|
handleClose={handleCloseUserModal}
|
||||||
title={currentUserId ? "Edit User" : "Add New User"}
|
title={currentUserId ? "Edit User" : "Add New User"}
|
||||||
width="700px"
|
width="1054px"
|
||||||
>
|
>
|
||||||
<form>
|
<form>
|
||||||
<div className="form-group d-flex flex-column p-5">
|
<div className="form-group d-flex flex-column">
|
||||||
<div className="d-flex align-items-center mb-3 ">
|
<div className="d-flex align-items-center mb-3">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Full Name"
|
placeholder="Full Name"
|
||||||
value={fullName}
|
value={fullName}
|
||||||
onChange={(e) => setFullName(e.target.value)}
|
onChange={(e) => setFullName(e.target.value)}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
|
|
@ -494,20 +444,14 @@ function ManageUsers() {
|
||||||
placeholder="Email"
|
placeholder="Email"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center mb-3">
|
<div className="d-flex align-items-center mb-3">
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Phone Number "
|
placeholder="Phone Number (without country code)"
|
||||||
value={phoneNumber}
|
value={phoneNumber}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
|
|
||||||
|
|
@ -517,25 +461,13 @@ function ManageUsers() {
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
<select
|
<select
|
||||||
className="input-field"
|
className="input-field"
|
||||||
value={role}
|
value={role}
|
||||||
onChange={(e) => setRole(e.target.value)}
|
onChange={(e) => setRole(e.target.value)}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
width: "483px", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<option value="">Select Role for User</option>
|
<option value="">Select Role for User</option>
|
||||||
{roles.map((r) => (
|
{roles.map((r) => (
|
||||||
|
|
@ -561,7 +493,7 @@ function ManageUsers() {
|
||||||
style={{
|
style={{
|
||||||
marginRight: "40px",
|
marginRight: "40px",
|
||||||
padding: "4px 8px",
|
padding: "4px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "40px",
|
borderRadius: "40px",
|
||||||
|
|
@ -589,10 +521,10 @@ function ManageUsers() {
|
||||||
show={true}
|
show={true}
|
||||||
handleClose={handleCloseStoreModal}
|
handleClose={handleCloseStoreModal}
|
||||||
title={"Add New Store"}
|
title={"Add New Store"}
|
||||||
width="700px"
|
width="1054px"
|
||||||
>
|
>
|
||||||
<form>
|
<form>
|
||||||
<div className="form-group p-5">
|
<div className="form-group">
|
||||||
{/* Wrapper for Flexbox */}
|
{/* Wrapper for Flexbox */}
|
||||||
<div className="d-flex flex-wrap">
|
<div className="d-flex flex-wrap">
|
||||||
{/* Left Side */}
|
{/* Left Side */}
|
||||||
|
|
@ -609,12 +541,7 @@ function ManageUsers() {
|
||||||
store_name: e.target.value,
|
store_name: e.target.value,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
|
|
@ -629,12 +556,7 @@ function ManageUsers() {
|
||||||
address_line1: e.target.value,
|
address_line1: e.target.value,
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
|
|
@ -644,12 +566,7 @@ function ManageUsers() {
|
||||||
placeholder="City"
|
placeholder="City"
|
||||||
value={formData.city}
|
value={formData.city}
|
||||||
readOnly
|
readOnly
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -664,12 +581,7 @@ function ManageUsers() {
|
||||||
value={formData.pincode}
|
value={formData.pincode}
|
||||||
onChange={handlePincodeChange}
|
onChange={handlePincodeChange}
|
||||||
onBlur={handlePincodeBlur}
|
onBlur={handlePincodeBlur}
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
maxLength={5}
|
maxLength={5}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -683,12 +595,7 @@ function ManageUsers() {
|
||||||
placeholder="State"
|
placeholder="State"
|
||||||
value={formData.state}
|
value={formData.state}
|
||||||
readOnly
|
readOnly
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
|
|
@ -698,12 +605,7 @@ function ManageUsers() {
|
||||||
placeholder="Country"
|
placeholder="Country"
|
||||||
value={formData.country}
|
value={formData.country}
|
||||||
readOnly
|
readOnly
|
||||||
style={{
|
style={{ width: "100%" }}
|
||||||
width: "100%", marginRight: "10px", backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -715,7 +617,7 @@ function ManageUsers() {
|
||||||
style={{
|
style={{
|
||||||
marginRight: "40px",
|
marginRight: "40px",
|
||||||
padding: "4px 8px",
|
padding: "4px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "40px",
|
borderRadius: "40px",
|
||||||
|
|
@ -741,32 +643,26 @@ function ManageUsers() {
|
||||||
<ReusableModal
|
<ReusableModal
|
||||||
show={true}
|
show={true}
|
||||||
handleClose={handleCloseAssignOwnerModal}
|
handleClose={handleCloseAssignOwnerModal}
|
||||||
title="Assign Admin as Owner"
|
title="Assign Admin"
|
||||||
width="600px"
|
width="600px"
|
||||||
>
|
>
|
||||||
<form onSubmit={handleAssignOwnerSubmit}>
|
<form onSubmit={handleAssignOwnerSubmit}>
|
||||||
<div className="form-group d-flex flex-column mt-1 p-3 ">
|
<div className="form-group d-flex align-items-center mt-1">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Enter User Email"
|
placeholder="Enter User Email"
|
||||||
value={ownerEmail}
|
value={ownerEmail}
|
||||||
onChange={(e) => setOwnerEmail(e.target.value)}
|
onChange={(e) => setOwnerEmail(e.target.value)}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "20px" }}
|
||||||
width: "483px",
|
|
||||||
marginBottom: "20px", // Add margin between email and button
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
||||||
<button
|
<button
|
||||||
style={{
|
style={{
|
||||||
|
marginRight: "40px",
|
||||||
padding: "4px 8px",
|
padding: "4px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "40px",
|
borderRadius: "40px",
|
||||||
|
|
@ -782,6 +678,8 @@ function ManageUsers() {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
</ReusableModal>
|
</ReusableModal>
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ const ReusableModal = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const modalContentStyle = {
|
const modalContentStyle = {
|
||||||
borderRadius: "30px",
|
borderRadius: "15px",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
width: width, // use the width prop
|
width: width, // use the width prop
|
||||||
height: height, // use the height prop
|
height: height, // use the height prop
|
||||||
|
|
@ -57,32 +57,21 @@ const ReusableModal = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const headerStyle = {
|
const headerStyle = {
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#F0F0F0",
|
||||||
borderTopLeftRadius: "15px",
|
borderTopLeftRadius: "15px",
|
||||||
borderTopRightRadius: "15px",
|
borderTopRightRadius: "15px",
|
||||||
height: "55px",
|
height: "55px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
border:'none',
|
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
padding: "0 16px", // Add padding for space between the content and edges
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const titleStyle = {
|
const titleStyle = {
|
||||||
fontFamily: "'Manrope', sans-serif",
|
fontFamily: "'Manrope', sans-serif",
|
||||||
fontWeight: "600",
|
fontWeight: "600", // semibold
|
||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
color: "#002300",
|
color: "#002300",
|
||||||
margin: 0,
|
margin: 0, // remove default margin
|
||||||
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 (
|
return (
|
||||||
|
|
@ -99,23 +88,21 @@ const ReusableModal = ({
|
||||||
<h5 className="modal-title" style={titleStyle}>
|
<h5 className="modal-title" style={titleStyle}>
|
||||||
{title}
|
{title}
|
||||||
</h5>
|
</h5>
|
||||||
<div style={closeButtonStyle}>
|
<svg
|
||||||
<svg
|
onClick={handleClose}
|
||||||
onClick={handleClose}
|
width="26"
|
||||||
width="26"
|
height="24"
|
||||||
height="24"
|
viewBox="0 0 26 24"
|
||||||
viewBox="0 0 26 24"
|
fill="none"
|
||||||
fill="none"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
>
|
||||||
>
|
<path
|
||||||
<path
|
fillRule="evenodd"
|
||||||
fillRule="evenodd"
|
clipRule="evenodd"
|
||||||
clipRule="evenodd"
|
d="M20.4226 6.45104C20.5153 6.36563 20.5888 6.26421 20.6389 6.15258C20.6891 6.04094 20.715 5.92127 20.7151 5.80041C20.7152 5.67954 20.6894 5.55985 20.6394 5.44815C20.5894 5.33646 20.516 5.23496 20.4235 5.14944C20.331 5.06393 20.2211 4.99607 20.1001 4.94975C19.9792 4.90343 19.8496 4.87955 19.7186 4.87947C19.5877 4.8794 19.458 4.90313 19.337 4.94931C19.216 4.9955 19.1061 5.06323 19.0134 5.14864L13.0005 10.699L6.98928 5.14864C6.80218 4.97593 6.54841 4.87891 6.28381 4.87891C6.01921 4.87891 5.76545 4.97593 5.57835 5.14864C5.39125 5.32135 5.28613 5.55559 5.28613 5.79984C5.28613 6.04409 5.39125 6.27833 5.57835 6.45104L11.5913 11.9998L5.57835 17.5486C5.4857 17.6342 5.41221 17.7357 5.36208 17.8474C5.31194 17.9591 5.28613 18.0789 5.28613 18.1998C5.28613 18.3208 5.31194 18.4405 5.36208 18.5523C5.41221 18.664 5.4857 18.7655 5.57835 18.851C5.76545 19.0237 6.01921 19.1208 6.28381 19.1208C6.41483 19.1208 6.54456 19.097 6.66561 19.0507C6.78665 19.0044 6.89664 18.9366 6.98928 18.851L13.0005 13.3006L19.0134 18.851C19.2005 19.0235 19.4542 19.1204 19.7186 19.1202C19.9831 19.1201 20.2366 19.0229 20.4235 18.8502C20.6104 18.6775 20.7152 18.4434 20.7151 18.1993C20.7149 17.9552 20.6097 17.7211 20.4226 17.5486L14.4097 11.9998L20.4226 6.45104Z"
|
||||||
d="M20.4226 6.45104C20.5153 6.36563 20.5888 6.26421 20.6389 6.15258C20.6891 6.04094 20.715 5.92127 20.7151 5.80041C20.7152 5.67954 20.6894 5.55985 20.6394 5.44815C20.5894 5.33646 20.516 5.23496 20.4235 5.14944C20.331 5.06393 20.2211 4.99607 20.1001 4.94975C19.9792 4.90343 19.8496 4.87955 19.7186 4.87947C19.5877 4.8794 19.458 4.90313 19.337 4.94931C19.216 4.9955 19.1061 5.06323 19.0134 5.14864L13.0005 10.699L6.98928 5.14864C6.80218 4.97593 6.54841 4.87891 6.28381 4.87891C6.01921 4.87891 5.76545 4.97593 5.57835 5.14864C5.39125 5.32135 5.28613 5.55559 5.28613 5.79984C5.28613 6.04409 5.39125 6.27833 5.57835 6.45104L11.5913 11.9998L5.57835 17.5486C5.4857 17.6342 5.41221 17.7357 5.36208 17.8474C5.31194 17.9591 5.28613 18.0789 5.28613 18.1998C5.28613 18.3208 5.31194 18.4405 5.36208 18.5523C5.41221 18.664 5.4857 18.7655 5.57835 18.851C5.76545 19.0237 6.01921 19.1208 6.28381 19.1208C6.41483 19.1208 6.54456 19.097 6.66561 19.0507C6.78665 19.0044 6.89664 18.9366 6.98928 18.851L13.0005 13.3006L19.0134 18.851C19.2005 19.0235 19.4542 19.1204 19.7186 19.1202C19.9831 19.1201 20.2366 19.0229 20.4235 18.8502C20.6104 18.6775 20.7152 18.4434 20.7151 18.1993C20.7149 17.9552 20.6097 17.7211 20.4226 17.5486L14.4097 11.9998L20.4226 6.45104Z"
|
fill="black"
|
||||||
fill="black"
|
/>
|
||||||
/>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-body">{children}</div>
|
<div className="modal-body">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -312,7 +312,7 @@ const SettingTable = ({
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table" style={{borderRadius:"none"}} >
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
|
||||||
|
|
@ -167,12 +167,10 @@
|
||||||
.due-days {
|
.due-days {
|
||||||
padding: 20px; /* Adjust as needed */
|
padding: 20px; /* Adjust as needed */
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
border: 1px solid #EBEAF2;
|
background-color: #ffffff;
|
||||||
box-shadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157)";
|
border-radius: 10px;
|
||||||
border-radius: 40px;
|
|
||||||
width: 1600px;
|
width: 1600px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
}
|
||||||
.due-card {
|
.due-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -264,35 +262,13 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start; /* Align items to the start (left) */
|
align-items: flex-start; /* Align items to the start (left) */
|
||||||
border-radius: 40px;
|
border-radius: 10px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
width: 1600px;
|
width: 1600px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.department-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start; /* Align items to the start (top) */
|
|
||||||
align-items: flex-start; /* Align items to the start (left) */
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 30px;
|
|
||||||
|
|
||||||
border: none; /* Ensure no border */
|
|
||||||
border-bottom: 2px solid #ccc; /* Set a bottom border */
|
|
||||||
margin: 20px 0; /* Center vertically with top and bottom margins */
|
|
||||||
background-color: #ffffff;
|
|
||||||
width: 850px; /* Set a fixed width */
|
|
||||||
max-width: 100%; /* Ensure it doesn't exceed the screen width */
|
|
||||||
margin-left: 160px; /* Align to the left with 9% margin */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.setting-title {
|
.setting-title {
|
||||||
margin-bottom: 10px; /* Space between title and inputs */
|
margin-bottom: 10px; /* Space between title and inputs */
|
||||||
font-size: 24px; /* Adjust as needed */
|
font-size: 24px; /* Adjust as needed */
|
||||||
|
|
@ -308,7 +284,7 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: #fff;
|
background-color: #f6f6f6;
|
||||||
border: 1px solid #f6f6f6;
|
border: 1px solid #f6f6f6;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -469,25 +445,22 @@
|
||||||
gap: 10px; /* Space between cards */ /* space above cards */
|
gap: 10px; /* Space between cards */ /* space above cards */
|
||||||
}
|
}
|
||||||
.dept-card {
|
.dept-card {
|
||||||
width: 474px; /* Fixed width */
|
width: 474px; /* fixed width */
|
||||||
height: 70px; /* Fixed height */
|
height: 70px; /* fixed height */
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid #EBEAF2; /* Add border color */
|
border: 1px solid #f6f6f6;
|
||||||
border-radius: 20px; /* Rounded corners */
|
border-radius: 10px;
|
||||||
display: flex; /* Flexbox layout */
|
display: flex;
|
||||||
align-items: center; /* Center items vertically */
|
align-items: center;
|
||||||
justify-content: space-between; /* Space items evenly */
|
justify-content: space-between;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add box shadow */
|
|
||||||
}
|
}
|
||||||
.dept-info {
|
.dept-info {
|
||||||
width: 386px;
|
width: 386px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: #ffffff;
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid rgba(0, 35, 0, 0.1);
|
||||||
border: none; /* Remove the redundant border */
|
border-radius: 4px;
|
||||||
|
|
||||||
border-radius: 10px; /* Rounded corners */
|
|
||||||
}
|
}
|
||||||
.create-department-section {
|
.create-department-section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -541,34 +514,31 @@ input[type="date"] {
|
||||||
}
|
}
|
||||||
.data-table {
|
.data-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 2px solid #F4F4F4;
|
border: 1px solid #F4F4F4;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
/* border-radius: 20px 20px 0 0; */
|
border-radius: 20px 20px 0 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.table-header th, .table-body td {
|
.table-header th, .table-body td {
|
||||||
/* border: 1px solid #F4F4F4; */
|
border: 1px solid #F4F4F4;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
.table-header th {
|
.table-header th {
|
||||||
background-color: #282e26;
|
background-color: #f2f2f2;
|
||||||
color: white;
|
color: #002300;
|
||||||
cursor: pointer; /* Added cursor for sortable columns */
|
cursor: pointer; /* Added cursor for sortable columns */
|
||||||
}
|
}
|
||||||
.table-body td {
|
.table-body td {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
color: #002300;
|
color: #002300;
|
||||||
background-color: #ffffff;
|
|
||||||
border-bottom: 1px solid #EBEAF2;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.table-body tr:last-child td {
|
.table-body tr:last-child td {
|
||||||
border-bottom: 1px solid #ffffff;
|
border-bottom: 1px solid #F4F4F4;
|
||||||
}
|
}
|
||||||
.table-body {
|
.table-body {
|
||||||
border-bottom: 2px solid #EBEAF2;
|
border-bottom: 1px solid #F4F4F4;
|
||||||
}
|
}
|
||||||
.no-column {
|
.no-column {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -598,8 +568,6 @@ input[type="date"] {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.pagination .page-item {
|
.pagination .page-item {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
|
@ -607,34 +575,41 @@ input[type="date"] {
|
||||||
.pagination .page-link {
|
.pagination .page-link {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid #F4F4F4;
|
border: 1px solid #F4F4F4;
|
||||||
/* background-color: #ffffff; */
|
border-radius: 50%;
|
||||||
background-color: #b6d7a8;
|
|
||||||
border-radius: 30px;
|
|
||||||
color: #002300;
|
color: #002300;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 30px;
|
width: 36px;
|
||||||
height: 30px;
|
height: 36px;
|
||||||
|
|
||||||
transition: background-color 0.3s, color 0.3s;
|
transition: background-color 0.3s, color 0.3s;
|
||||||
}
|
}
|
||||||
.pagination .page-link:hover {
|
.pagination .page-link:hover {
|
||||||
background-color: red;
|
background-color: #f2f2f2;
|
||||||
}
|
}
|
||||||
.pagination .page-item.active .page-link {
|
.pagination .page-item.active .page-link {
|
||||||
width: 30px;
|
background-color: #FFFFFF;
|
||||||
height: 30px;
|
|
||||||
border-radius: 30px;
|
|
||||||
background-color: #ffaf32; /* Yellow background */
|
|
||||||
color: #002300;
|
color: #002300;
|
||||||
border-color:#fbfbfbfb;
|
border-color:#fbfbfbfb;
|
||||||
border: 1px solid #d3d3d3fb;
|
border: 1px solid #d3d3d3fb;
|
||||||
}
|
}
|
||||||
.pagination .page-item.disabled .page-link {
|
.pagination .page-item.disabled .page-link {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
.pagination .prev-next {
|
||||||
|
height: 36px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #F4F4F4;
|
||||||
|
color: #002300;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
.pagination .prev-next:hover {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -336,9 +336,9 @@ function StoreInformation() {
|
||||||
maxWidth: '300px',
|
maxWidth: '300px',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
borderRadius: '20px',
|
borderRadius: '20px',
|
||||||
border: '1px solid #282E26',
|
border: '1px solid #6666ff',
|
||||||
fontWeight: '800',
|
fontWeight: '800',
|
||||||
backgroundColor: plan.is_active ? 'transparent' : '#282E26',
|
backgroundColor: plan.is_active ? 'transparent' : '#6666ff',
|
||||||
color: plan.is_active ? '#000' : '#fff',
|
color: plan.is_active ? '#000' : '#fff',
|
||||||
}}
|
}}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,6 @@ import useApi from "../../../../utils/api-manager/Helper/useApi";
|
||||||
import { toast, ToastContainer } from "react-toastify";
|
import { toast, ToastContainer } from "react-toastify";
|
||||||
import PayrollTableWithButton from "./PayrollTableWithButton";
|
import PayrollTableWithButton from "./PayrollTableWithButton";
|
||||||
import Swal from "sweetalert2";
|
import Swal from "sweetalert2";
|
||||||
import employeeIcon from '../../../../assets/Image/employee.png'
|
|
||||||
|
|
||||||
|
|
||||||
export default function Payroll() {
|
export default function Payroll() {
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
|
|
@ -114,7 +112,7 @@ export default function Payroll() {
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const handleChange = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
|
|
||||||
// Restrict non-numeric input for contact_no
|
// Restrict non-numeric input for contact_no
|
||||||
if (name === "contact_no") {
|
if (name === "contact_no") {
|
||||||
const numericValue = value.replace(/[^0-9]/g, ""); // Allow only digits
|
const numericValue = value.replace(/[^0-9]/g, ""); // Allow only digits
|
||||||
|
|
@ -123,7 +121,7 @@ export default function Payroll() {
|
||||||
setFormData((prevData) => ({ ...prevData, [name]: value }));
|
setFormData((prevData) => ({ ...prevData, [name]: value }));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePaymentChange = (e) => {
|
const handlePaymentChange = (e) => {
|
||||||
const { name, value } = e.target;
|
const { name, value } = e.target;
|
||||||
|
|
||||||
|
|
@ -212,53 +210,53 @@ export default function Payroll() {
|
||||||
|
|
||||||
const updatedFormData = { ...formData, store: storeId };
|
const updatedFormData = { ...formData, store: storeId };
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let response;
|
let response;
|
||||||
|
|
||||||
// If there's an editing payroll ID, we want to PATCH the payroll employee data
|
// If there's an editing payroll ID, we want to PATCH the payroll employee data
|
||||||
if (editingPayrollId) {
|
if (editingPayrollId) {
|
||||||
response = await Patch("payrollEmployeeData", editingPayrollId, updatedFormData);
|
response = await Patch("payrollEmployeeData", editingPayrollId, updatedFormData);
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
setPayrollData(prevData =>
|
setPayrollData(prevData =>
|
||||||
prevData.map(payroll =>
|
prevData.map(payroll =>
|
||||||
payroll.id === editingPayrollId ? { ...payroll, ...updatedFormData } : payroll
|
payroll.id === editingPayrollId ? { ...payroll, ...updatedFormData } : payroll
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
toast.success("Payroll updated successfully!");
|
toast.success("Payroll updated successfully!");
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// If there's no editingPayrollId, it's a new payroll record
|
|
||||||
response = await Post("payrollEmployeeData", updatedFormData);
|
|
||||||
|
|
||||||
if (response.status === 201) {
|
|
||||||
setPayrollData(prevData => [...prevData, response.data]);
|
|
||||||
toast.success("Payroll added successfully!");
|
|
||||||
} else if (response.data) {
|
|
||||||
// Extract specific error messages and display them
|
|
||||||
const errorMessages = Object.entries(response.data)
|
|
||||||
.map(([field, messages]) => `${messages.join(", ")}`)
|
|
||||||
.join("\n");
|
|
||||||
toast.error(errorMessages || "An unknown error occurred.");
|
|
||||||
} else {
|
|
||||||
toast.error("Please Validate Fields");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal(); // Close the modal after submitting the form
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error submitting form", error);
|
|
||||||
if (error.response?.data) {
|
|
||||||
// Handle API response errors
|
|
||||||
const errorMessages = Object.entries(error.response.data)
|
|
||||||
.map(([field, messages]) => `${field}: ${messages.join(", ")}`)
|
|
||||||
.join("\n");
|
|
||||||
toast.error(errorMessages || "An unknown error occurred.");
|
|
||||||
} else {
|
|
||||||
// Handle generic errors
|
|
||||||
toast.error("Error submitting form: " + error.message);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// If there's no editingPayrollId, it's a new payroll record
|
||||||
|
response = await Post("payrollEmployeeData", updatedFormData);
|
||||||
|
|
||||||
|
if (response.status === 201) {
|
||||||
|
setPayrollData(prevData => [...prevData, response.data]);
|
||||||
|
toast.success("Payroll added successfully!");
|
||||||
|
} else if (response.data) {
|
||||||
|
// Extract specific error messages and display them
|
||||||
|
const errorMessages = Object.entries(response.data)
|
||||||
|
.map(([field, messages]) => `${messages.join(", ")}`)
|
||||||
|
.join("\n");
|
||||||
|
toast.error(errorMessages || "An unknown error occurred.");
|
||||||
|
} else {
|
||||||
|
toast.error("Please Validate Fields");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
closeModal(); // Close the modal after submitting the form
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error submitting form", error);
|
||||||
|
if (error.response?.data) {
|
||||||
|
// Handle API response errors
|
||||||
|
const errorMessages = Object.entries(error.response.data)
|
||||||
|
.map(([field, messages]) => `${field}: ${messages.join(", ")}`)
|
||||||
|
.join("\n");
|
||||||
|
toast.error(errorMessages || "An unknown error occurred.");
|
||||||
|
} else {
|
||||||
|
// Handle generic errors
|
||||||
|
toast.error("Error submitting form: " + error.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -299,11 +297,11 @@ export default function Payroll() {
|
||||||
bank: paymentData.payment_method === "cheque" ? paymentData.bank : "",
|
bank: paymentData.payment_method === "cheque" ? paymentData.bank : "",
|
||||||
bank_name: bankName, // Include bank_name in the payload
|
bank_name: bankName, // Include bank_name in the payload
|
||||||
cheque_no:
|
cheque_no:
|
||||||
paymentData.payment_method === "cheque"
|
paymentData.payment_method === "cheque"
|
||||||
? paymentData.cheque_no || ""
|
? paymentData.cheque_no || ""
|
||||||
: editingPayrollId
|
: editingPayrollId
|
||||||
? paymentData.cheque_no // Preserve existing cheque_no if editing
|
? paymentData.cheque_no // Preserve existing cheque_no if editing
|
||||||
: null,
|
: null,
|
||||||
note: paymentData.note,
|
note: paymentData.note,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -334,45 +332,45 @@ export default function Payroll() {
|
||||||
|
|
||||||
const handleDelete = async (id, type) => {
|
const handleDelete = async (id, type) => {
|
||||||
const result = await Swal.fire({
|
const result = await Swal.fire({
|
||||||
title: "Are you sure?",
|
title: "Are you sure?",
|
||||||
text: "You won't be able to revert this!",
|
text: "You won't be able to revert this!",
|
||||||
icon: "warning",
|
icon: "warning",
|
||||||
showCancelButton: true,
|
showCancelButton: true,
|
||||||
confirmButtonColor: "#d33",
|
confirmButtonColor: "#d33",
|
||||||
cancelButtonColor: "#3085d6",
|
cancelButtonColor: "#3085d6",
|
||||||
confirmButtonText: "Yes, delete it!",
|
confirmButtonText: "Yes, delete it!",
|
||||||
});
|
});
|
||||||
|
|
||||||
// Check if the user clicked the confirm button
|
// Check if the user clicked the confirm button
|
||||||
if (!result.isConfirmed) return; // Exit if the user cancels
|
if (!result.isConfirmed) return; // Exit if the user cancels
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (type === "payroll") {
|
if (type === "payroll") {
|
||||||
// Delete payroll record
|
// Delete payroll record
|
||||||
await Delete(`payrollEmployeeData`, id);
|
await Delete(`payrollEmployeeData`, id);
|
||||||
// Update payroll data in the frontend
|
// Update payroll data in the frontend
|
||||||
setPayrollData((prevPayrollData) => prevPayrollData.filter((p) => p.id !== id));
|
setPayrollData((prevPayrollData) => prevPayrollData.filter((p) => p.id !== id));
|
||||||
|
|
||||||
// Fetch updated salary history data from the backend
|
// Fetch updated salary history data from the backend
|
||||||
const updatedSalaryHistory = await Get("payrollSalaryData");
|
const updatedSalaryHistory = await Get("payrollSalaryData");
|
||||||
setSalaryHistory(updatedSalaryHistory);
|
setSalaryHistory(updatedSalaryHistory);
|
||||||
|
|
||||||
toast.success("Payroll record deleted successfully!");
|
toast.success("Payroll record deleted successfully!");
|
||||||
} else if (type === "salaryHistory") {
|
} else if (type === "salaryHistory") {
|
||||||
// Delete salary history record
|
// Delete salary history record
|
||||||
await Delete(`payrollSalaryData`, id);
|
await Delete(`payrollSalaryData`, id);
|
||||||
// Update salary history data in the frontend
|
// Update salary history data in the frontend
|
||||||
setSalaryHistory((prevSalaryHistory) =>
|
setSalaryHistory((prevSalaryHistory) =>
|
||||||
prevSalaryHistory.filter((s) => s.id !== id)
|
prevSalaryHistory.filter((s) => s.id !== id)
|
||||||
);
|
);
|
||||||
|
|
||||||
toast.success("Salary history record deleted successfully!");
|
toast.success("Salary history record deleted successfully!");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error deleting record:", error);
|
console.error("Error deleting record:", error);
|
||||||
toast.error("Error deleting record: " + (error.response?.data || error.message));
|
toast.error("Error deleting record: " + (error.response?.data || error.message));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -380,9 +378,9 @@ export default function Payroll() {
|
||||||
<div className="p-2">
|
<div className="p-2">
|
||||||
<div className="expensecontainer d-flex flex-column pd-2 mb-2">
|
<div className="expensecontainer d-flex flex-column pd-2 mb-2">
|
||||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<h3 className="mb-1">Manage Employee</h3>
|
<h3 className="mb-1">Manage Payroll</h3>
|
||||||
<button
|
<button
|
||||||
className="btn cus d-flex align-items-center"
|
className="btn btn-primary cus"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// fetchBankData();
|
// fetchBankData();
|
||||||
setModalType('new');
|
setModalType('new');
|
||||||
|
|
@ -390,11 +388,6 @@ export default function Payroll() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
+ Add Employee
|
+ Add Employee
|
||||||
<img
|
|
||||||
src={employeeIcon}
|
|
||||||
alt="employee Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<PayrollTableWithButton
|
<PayrollTableWithButton
|
||||||
|
|
@ -414,117 +407,69 @@ export default function Payroll() {
|
||||||
</div>
|
</div>
|
||||||
{ }
|
{ }
|
||||||
{showModal && (
|
{showModal && (
|
||||||
<div className="modal" style={{}} onClick={closeModal}>
|
<div className="modal-overlay" onClick={closeModal}>
|
||||||
<div
|
<div
|
||||||
className="modal-container"
|
className="modal-container"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
style={{ width: modalType === 'payment' ? '650px' : '700px', borderRadius: '40px' }}
|
style={{ width: modalType === 'payment' ? '800px' : '700px' }}
|
||||||
>
|
>
|
||||||
<div
|
<div className="modal-header" style={{ borderBottom: "1px solid lightgray" }}>
|
||||||
className="modal-header"
|
<h3>
|
||||||
style={{
|
{modalType === 'new' && "Add Employee"}
|
||||||
|
{modalType === 'edit' && "Edit Employee"}
|
||||||
display: 'flex',
|
{modalType === 'payment' && `Process Payment for ${selectedPayroll?.full_name || ''}`}
|
||||||
justifyContent: 'space-between', // Distribute space between items
|
</h3>
|
||||||
alignItems: 'center',
|
<button className="btn" onClick={closeModal}>X</button>
|
||||||
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>
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
{ }
|
{ }
|
||||||
{(modalType === 'new' || modalType === 'edit') && (
|
{(modalType === 'new' || modalType === 'edit') && (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<div className="modal-body ">
|
<div className="modal-body">
|
||||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
<div className="form-group">
|
||||||
{/* <label htmlFor="full_name">Employee Name</label> */}
|
<label htmlFor="full_name">Employee Name</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
id="full_name"
|
id="full_name"
|
||||||
name="full_name"
|
name="full_name"
|
||||||
placeholder="Employee’s Full Name"
|
|
||||||
value={formData.full_name}
|
value={formData.full_name}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
<div className="form-group">
|
||||||
{/* <label htmlFor="contact_no">Contact Number</label> */}
|
<label htmlFor="contact_no">Contact Number</label>
|
||||||
<input
|
<input
|
||||||
type="tel"
|
type="tel"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
id="contact_no"
|
id="contact_no"
|
||||||
placeholder="Contact Number"
|
|
||||||
name="contact_no"
|
name="contact_no"
|
||||||
value={formData.contact_no}
|
value={formData.contact_no}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
required
|
required
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group -flex flex-column justify-content-center align-items-center px-5 ">
|
<div className="form-group">
|
||||||
{/* <label htmlFor="email">Email Address</label> */}
|
<label htmlFor="email">Email Address</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
id="email"
|
id="email"
|
||||||
name="email"
|
name="email"
|
||||||
placeholder="Email Address"
|
|
||||||
value={formData.email}
|
value={formData.email}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer" style={{ border: "none" }}>
|
<div className="modal-footer">
|
||||||
<button type="submit" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px', padding: '5px 15px' }}>
|
<button type="submit" className="btn btn-primary">
|
||||||
{modalType === 'edit' ? "Update Employee" : "Add Employee"}
|
{modalType === 'edit' ? "Update Employee" : "Add Employee"}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" onClick={closeModal} style={{ border: '1px solid #282E26', backgroundColor: "transparent", borderRadius: '20px', padding: '5px 45px' }}>
|
<button type="button" className="btn btn-contained" onClick={closeModal}>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -533,253 +478,166 @@ export default function Payroll() {
|
||||||
{ }
|
{ }
|
||||||
{modalType === 'payment' && (
|
{modalType === 'payment' && (
|
||||||
<form onSubmit={handlePaymentSubmit}>
|
<form onSubmit={handlePaymentSubmit}>
|
||||||
<div className="modal-body">
|
<div className="modal-body">
|
||||||
<div className="form-group row col-md-12 justify-content-between"> {/* Added justify-content-between */}
|
<div className="form-group">
|
||||||
{/* Salary Amount Input */}
|
<label htmlFor="salary_amount">Amount</label>
|
||||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
<div className="input-group">
|
||||||
<input
|
<div className="input-group-prepend">
|
||||||
type="text"
|
<span className="input-group-text">$</span>
|
||||||
className="form-control"
|
|
||||||
id="salary_amount"
|
|
||||||
name="salary_amount"
|
|
||||||
placeholder="Amount"
|
|
||||||
value={paymentData.salary_amount}
|
|
||||||
onChange={handlePaymentChange}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "-" || e.key === "+") {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none",
|
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px",
|
|
||||||
}}
|
|
||||||
required
|
|
||||||
onInput={(e) => {
|
|
||||||
let value = e.target.value;
|
|
||||||
value = value.replace(/[^0-9.]/g, "");
|
|
||||||
if (value.indexOf(".") !== -1) {
|
|
||||||
const parts = value.split(".");
|
|
||||||
value = parts[0] + "." + parts[1].substring(0, 2);
|
|
||||||
}
|
|
||||||
e.target.value = value;
|
|
||||||
handlePaymentChange(e);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
type="text" // Keeping text type for more flexible input control
|
||||||
|
className="form-control"
|
||||||
|
id="salary_amount"
|
||||||
|
name="salary_amount"
|
||||||
|
value={paymentData.salary_amount}
|
||||||
|
onChange={handlePaymentChange}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
// Prevent negative and positive signs
|
||||||
|
if (e.key === "-" || e.key === "+") {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
required
|
||||||
|
onInput={(e) => {
|
||||||
|
let value = e.target.value;
|
||||||
|
|
||||||
{/* Salary Unit Select */}
|
// Remove all characters except numbers and the decimal point
|
||||||
<div className="col-md-5 mb-3"> {/* Added margin bottom for spacing */}
|
value = value.replace(/[^0-9.]/g, '');
|
||||||
<select
|
|
||||||
className="form-control"
|
// Ensure only one decimal point
|
||||||
name="salary_unit"
|
if (value.indexOf('.') !== -1) {
|
||||||
value={paymentData.salary_unit}
|
const parts = value.split('.');
|
||||||
onChange={handlePaymentChange}
|
value = parts[0] + '.' + parts[1].substring(0, 2); // Keep only two digits after the decimal
|
||||||
required
|
}
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
// Update the value on the input element
|
||||||
border: "none",
|
e.target.value = value;
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px",
|
// Call the onChange handler to update the state
|
||||||
}}
|
handlePaymentChange(e);
|
||||||
>
|
}}
|
||||||
<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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="form-row form-group col-md-6">
|
||||||
<div className="form-group row col-md-12 justify-content-between">
|
<label htmlFor="salary_unit">Salary Unit</label>
|
||||||
{/* Start Date Input */}
|
<select
|
||||||
<div className="form-group col-md-5">
|
className="form-control"
|
||||||
|
name="salary_unit"
|
||||||
<input
|
value={paymentData.salary_unit}
|
||||||
type="date"
|
onChange={handlePaymentChange}
|
||||||
className="form-control"
|
required
|
||||||
name="start_date"
|
>
|
||||||
value={paymentData.start_date}
|
<option value="hourly">Hourly</option>
|
||||||
onChange={handlePaymentChange}
|
<option value="weekly">Weekly</option>
|
||||||
required
|
<option value="bi weekly">Bi Weekly</option>
|
||||||
style={{
|
<option value="monthly">Monthly</option>
|
||||||
backgroundColor: "#ffffff",
|
</select>
|
||||||
border: "none",
|
</div>
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
<div className="form-row form-group col-md-6">
|
||||||
borderRadius: "0px",
|
<label htmlFor="start_date">Start Date</label>
|
||||||
}}
|
<input
|
||||||
/>
|
type="date"
|
||||||
</div>
|
className="form-control"
|
||||||
|
name="start_date"
|
||||||
{/* End Date Input */}
|
value={paymentData.start_date}
|
||||||
<div className="form-group col-md-5">
|
onChange={handlePaymentChange}
|
||||||
|
required
|
||||||
<input
|
/>
|
||||||
type="date"
|
</div>
|
||||||
className="form-control"
|
<div className="form-row form-group col-md-6">
|
||||||
name="end_date"
|
<label htmlFor="end_date">End Date</label>
|
||||||
value={paymentData.end_date}
|
<input
|
||||||
onChange={handlePaymentChange}
|
type="date"
|
||||||
required
|
className="form-control"
|
||||||
style={{
|
name="end_date"
|
||||||
backgroundColor: "#ffffff",
|
value={paymentData.end_date}
|
||||||
border: "none",
|
onChange={handlePaymentChange}
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
required
|
||||||
borderRadius: "0px",
|
/>
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* <ToastContainer /> */}
|
{/* <ToastContainer /> */}
|
||||||
<div className="form-group row col-md-12 justify-content-between">
|
<div className="form-row form-group col-md-6">
|
||||||
{/* Total Hours Input */}
|
<label htmlFor="total_hour">Total Hours</label>
|
||||||
<div className="form-group col-md-5" >
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Total Hours"
|
||||||
|
name="total_hour"
|
||||||
|
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)
|
||||||
|
}}
|
||||||
|
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}
|
||||||
|
>
|
||||||
|
<option value="cash">Cash</option>
|
||||||
|
<option value="cheque">Bank Transfer</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{paymentData.payment_method === "cheque" && (
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="bank">Bank</label>
|
||||||
|
<select
|
||||||
|
name="bank"
|
||||||
|
id="bank"
|
||||||
|
className="form-control"
|
||||||
|
value={paymentData.bank}
|
||||||
|
onChange={handlePaymentChange}
|
||||||
|
>
|
||||||
|
<option value="">Select Bank</option>
|
||||||
|
{bankdata.map((bank) => (
|
||||||
|
<option key={bank.id} value={bank.id}>
|
||||||
|
{bank.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<label htmlFor="cheque_no">Cheque Number</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control"
|
||||||
placeholder="Total Hours"
|
id="cheque_no"
|
||||||
name="total_hour"
|
name="cheque_no"
|
||||||
value={paymentData.total_hour}
|
value={paymentData.cheque_no}
|
||||||
onChange={handlePaymentChange}
|
onChange={handlePaymentChange}
|
||||||
onInput={(e) => {
|
|
||||||
// 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: "1px solid #9e9e9e", // Set bottom border,
|
|
||||||
borderRadius: "0px",
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Payment Method Select */}
|
|
||||||
<div className="form-group col-md-5">
|
|
||||||
<div style={{ border: '2px solid #ACB4AA', padding: '5px 5px', width: "fit-content", borderRadius: '40px', display: 'flex', }}>
|
|
||||||
<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: '5px 5px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
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: '5px 5px',
|
|
||||||
borderRadius: '20px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Bank Transfer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{paymentData.payment_method === "cheque" && (
|
|
||||||
<div className="form-group row col-md-12 justify-content-between">
|
|
||||||
<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: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value="">Select Bank</option>
|
|
||||||
{bankdata.map((bank) => (
|
|
||||||
<option key={bank.id} value={bank.id}>
|
|
||||||
{bank.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</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: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="form-group col-md-5">
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Notes"
|
|
||||||
name="note"
|
|
||||||
value={paymentData.note}
|
|
||||||
onChange={handlePaymentChange}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none",
|
|
||||||
borderBottom: "1px solid #9e9e9e", // Set bottom border
|
|
||||||
borderRadius: "0px",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
)}
|
)}
|
||||||
|
<div className="form-row form-group col-md-6">
|
||||||
|
<label htmlFor="note">Notes</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Notes"
|
||||||
|
name="note"
|
||||||
|
value={paymentData.note}
|
||||||
|
onChange={handlePaymentChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer" style={{border:"none"}}>
|
<div className="modal-footer">
|
||||||
<button type="submit" className="btn " style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
<button type="submit" className="btn btn-primary" style={{}}>
|
||||||
Payment
|
Payment
|
||||||
</button>
|
</button>
|
||||||
<button type="button" className="btn " onClick={closeModal} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}>
|
<button type="button" className="btn btn-contained" onClick={closeModal}>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ const DataTable = ({
|
||||||
direction: "ascending",
|
direction: "ascending",
|
||||||
});
|
});
|
||||||
const [rowsPerPage, setRowsPerPage] = useState(5);
|
const [rowsPerPage, setRowsPerPage] = useState(5);
|
||||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
|
||||||
|
|
||||||
const totalPages = Math.ceil(data.length / rowsPerPage);
|
const totalPages = Math.ceil(data.length / rowsPerPage);
|
||||||
|
|
||||||
|
|
@ -33,7 +32,7 @@ const DataTable = ({
|
||||||
const getDisplayedData = () => {
|
const getDisplayedData = () => {
|
||||||
const startIndex = (currentPage - 1) * rowsPerPage;
|
const startIndex = (currentPage - 1) * rowsPerPage;
|
||||||
const endIndex = startIndex + rowsPerPage;
|
const endIndex = startIndex + rowsPerPage;
|
||||||
return sortedData.slice(startIndex, endIndex); // Return sorted data
|
return data.slice(startIndex, endIndex);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Sorting the data based on the selected column
|
// Sorting the data based on the selected column
|
||||||
|
|
@ -52,16 +51,8 @@ const DataTable = ({
|
||||||
return dataToSort;
|
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 displayedData = getDisplayedData();
|
||||||
|
const sortedData = sortData(displayedData);
|
||||||
|
|
||||||
// Pagination
|
// Pagination
|
||||||
const handleNext = () => {
|
const handleNext = () => {
|
||||||
|
|
@ -99,40 +90,7 @@ const DataTable = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="data-table-container">
|
<div className="data-table-container">
|
||||||
<div className="search-container" style={{marginBottom:"20px"}}>
|
<table className="data-table custom-table rounded-table">
|
||||||
<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">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col, index) => (
|
{columns.map((col, index) => (
|
||||||
|
|
@ -176,19 +134,17 @@ const DataTable = ({
|
||||||
<tbody className="table-body">
|
<tbody className="table-body">
|
||||||
{sortedData.length === 0 ? (
|
{sortedData.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
|
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
|
||||||
textAlign: "center", fontFamily: 'Manrope',
|
fontWeight: '600',
|
||||||
fontWeight: '600',
|
fontSize: '40px',
|
||||||
fontSize: '40px',
|
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
||||||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
WebkitBackgroundClip: 'text',
|
||||||
WebkitBackgroundClip: 'text',
|
WebkitTextFillColor: 'transparent', }}>
|
||||||
WebkitTextFillColor: 'transparent',
|
|
||||||
}}>
|
|
||||||
No data found
|
No data found
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
displayedData.map((item, index) => (
|
sortedData.map((item, index) => (
|
||||||
<tr key={item.id || index}>
|
<tr key={item.id || index}>
|
||||||
{columns.map((col, colIndex) => (
|
{columns.map((col, colIndex) => (
|
||||||
<td key={colIndex}>
|
<td key={colIndex}>
|
||||||
|
|
@ -244,18 +200,55 @@ const DataTable = ({
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
<div className="pagination">
|
<nav>
|
||||||
<button onClick={handlePrev} disabled={currentPage === 1}>
|
<ul className="pagination">
|
||||||
Previous
|
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||||
</button>
|
<span
|
||||||
<ul className="pagination-list">
|
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>
|
||||||
{renderPagination()}
|
{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>
|
</ul>
|
||||||
<button onClick={handleNext} disabled={currentPage === totalPages}>
|
</nav>
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -154,19 +154,18 @@ const PayrollTableWithButton = ({
|
||||||
borderRadius: "4px",
|
borderRadius: "4px",
|
||||||
zIndex: "1",
|
zIndex: "1",
|
||||||
};
|
};
|
||||||
// Calculate the total net sales from the data
|
// Calculate the total net sales from the data
|
||||||
// const totalNetSales = data.reduce((acc, item) => {
|
// const totalNetSales = data.reduce((acc, item) => {
|
||||||
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
|
// const amount = Number(item.total_net_sales) || 0; // Make sure to handle non-numeric values
|
||||||
// return acc + amount;
|
// return acc + amount;
|
||||||
// }, 0).toFixed(2); //
|
// }, 0).toFixed(2); //
|
||||||
return (
|
return (
|
||||||
<div className="data-table-container">
|
<div className="data-table-container">
|
||||||
<div className="d-flex mb-3">
|
<div className="d-flex mb-3">
|
||||||
<div className="expense-searchcontainerstart d-flex" >
|
<div className="expense-searchcontainerstart d-flex">
|
||||||
<div className="search-container" >
|
<div className="search-container">
|
||||||
<input
|
<input
|
||||||
type="text"
|
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}
|
value={searchTerm}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
|
|
@ -238,7 +237,7 @@ const PayrollTableWithButton = ({
|
||||||
Export To Excel
|
Export To Excel
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{showFilter && (
|
{showFilter && (
|
||||||
<div className="filter-button-container" style={{ position: "relative" }}>
|
<div className="filter-button-container" style={{ position: "relative" }}>
|
||||||
<button className="btn custbtn2" type="button" onClick={handleFilterClick}>
|
<button className="btn custbtn2" type="button" onClick={handleFilterClick}>
|
||||||
<svg
|
<svg
|
||||||
|
|
@ -263,54 +262,26 @@ const PayrollTableWithButton = ({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div >
|
<div className="expense-searchcontainerend d-flex align-items-center">
|
||||||
<div
|
<h3 className="me-2">Show</h3>
|
||||||
className="expense-search d-flex align-items-center"
|
<select
|
||||||
style={{
|
name="option"
|
||||||
backgroundColor: "#4A5546",
|
id="pageSelect"
|
||||||
boxShadow: "none",
|
className="selectoptions"
|
||||||
outline: "none",
|
value={rowsPerPage}
|
||||||
width: "auto",
|
onChange={(e) => {
|
||||||
height: "42px",
|
setRowsPerPage(Number(e.target.value));
|
||||||
|
setCurrentPage(1); // Reset to first page on change
|
||||||
padding: "8px 12px",
|
|
||||||
fontSize: "16px",
|
|
||||||
border: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
color: "#F4FFEE",
|
|
||||||
cursor: "pointer",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h6 className="" style={{ margin: '10px' }}>Show</h6>
|
<option value={5}>5</option>
|
||||||
<select
|
<option value={10}>10</option>
|
||||||
name="option"
|
<option value={15}>15</option>
|
||||||
id="pageSelect"
|
<option value={20}>20</option>
|
||||||
className="selectoptions"
|
</select>
|
||||||
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));
|
|
||||||
setCurrentPage(1); // Reset to first page on change
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option value={5}>5</option>
|
|
||||||
<option value={10}>10</option>
|
|
||||||
<option value={15}>15</option>
|
|
||||||
<option value={20}>20</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<table className="data-table custom-table ">
|
<table className="data-table custom-table rounded-table">
|
||||||
<thead className="table-header">
|
<thead className="table-header">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="no-column">
|
<th scope="col" className="no-column">
|
||||||
|
|
@ -353,80 +324,78 @@ const PayrollTableWithButton = ({
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="table-body">
|
<tbody className="table-body">
|
||||||
{sortedDisplayedData.length === 0 ? (
|
{sortedDisplayedData.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{
|
<td colSpan={columns.length + (showAction ? 2 : 1)} style={{ textAlign: "center", fontFamily: 'Manrope',
|
||||||
textAlign: "center", fontFamily: 'Manrope',
|
fontWeight: '600',
|
||||||
fontWeight: '600',
|
fontSize: '40px',
|
||||||
fontSize: '40px',
|
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
||||||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
|
WebkitBackgroundClip: 'text',
|
||||||
WebkitBackgroundClip: 'text',
|
WebkitTextFillColor: 'transparent', }}>
|
||||||
WebkitTextFillColor: 'transparent',
|
No data found
|
||||||
}}>
|
</td>
|
||||||
No data found
|
</tr>
|
||||||
</td>
|
) : (
|
||||||
</tr>
|
sortedDisplayedData.map((item) => (
|
||||||
) : (
|
<tr key={item.id || item.index}>
|
||||||
sortedDisplayedData.map((item) => (
|
<td>
|
||||||
<tr key={item.id || item.index}>
|
{(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
|
||||||
<td>
|
</td>
|
||||||
{(currentPage - 1) * rowsPerPage + sortedDisplayedData.indexOf(item) + 1}
|
{columns.map((col, colIndex) => (
|
||||||
|
<td key={colIndex}>
|
||||||
|
{col.field === "status" ? (
|
||||||
|
<div className={`status ${item[col.field]}`}>{item[col.field]}</div>
|
||||||
|
) : col.field === "pay_salary" ? (
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={() => togglePaymentModal(item)} // Pass item to payment modal
|
||||||
|
>
|
||||||
|
Pay Salary
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
item[col.field]
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
{columns.map((col, colIndex) => (
|
))}
|
||||||
<td key={colIndex}>
|
{showAction && (
|
||||||
{col.field === "status" ? (
|
<td className="action-column">
|
||||||
<div className={`status ${item[col.field]}`}>{item[col.field]}</div>
|
<button className="action-button" onClick={() => onEdit(item.id)}>
|
||||||
) : col.field === "pay_salary" ? (
|
|
||||||
<button
|
|
||||||
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
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
item[col.field]
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
{showAction && (
|
|
||||||
<td className="action-column">
|
|
||||||
<button className="action-button" onClick={() => onEdit(item.id)}>
|
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
width="16"
|
width="16"
|
||||||
height="16"
|
height="16"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
|
d="M13.8067 4.695C14.0667 4.435 14.0667 4.00167 13.8067 3.755L12.2467 2.195C12 1.935 11.5667 1.935 11.3067 2.195L10.08 3.415L12.58 5.915M2 11.5017V14.0017H4.5L11.8733 6.62167L9.37333 4.12167L2 11.5017Z"
|
||||||
fill="#002300"
|
fill="#002300"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<button className="action-button" onClick={() => onDelete(item.id)}>
|
<button className="action-button" onClick={() => onDelete(item.id)}>
|
||||||
{/* Delete icon */}
|
{/* Delete icon */}
|
||||||
<svg
|
<svg
|
||||||
width="16"
|
width="16"
|
||||||
height="16"
|
height="16"
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
|
d="M4.00016 12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V6C12.0002 5.26667 11.4002 4.66667 10.6668 4.66667H5.3335C4.60016 4.66667 4.00016 5.26667 4.00016 6V12.6667ZM12.0002 2.66667H10.3335L9.86016 2.19333C9.74016 2.07333 9.56683 2 9.3935 2H6.60683C6.4335 2 6.26016 2.07333 6.14016 2.19333L5.66683 2.66667H4.00016C3.6335 2.66667 3.3335 2.96667 3.3335 3.33333C3.3335 3.7 3.6335 4 4.00016 4H12.0002C12.3668 4 12.6668 3.7 12.6668 3.33333C12.6668 2.96667 12.3668 2.66667 12.0002 2.66667Z"
|
||||||
fill="#002300"
|
fill="#002300"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
|
|
@ -454,8 +423,9 @@ const PayrollTableWithButton = ({
|
||||||
</li>
|
</li>
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
<li
|
<li
|
||||||
className={`prev-next ${currentPage === totalPages ? "disabled" : ""
|
className={`prev-next ${
|
||||||
}`}
|
currentPage === totalPages ? "disabled" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,6 @@ import { toast, ToastContainer } from "react-toastify";
|
||||||
import AddDepartmentModal from "../ReusableForm/AddDepartmentModal";
|
import AddDepartmentModal from "../ReusableForm/AddDepartmentModal";
|
||||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||||
import Swal from "sweetalert2";
|
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() {
|
export default function Purchase() {
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
|
|
@ -43,7 +40,7 @@ export default function Purchase() {
|
||||||
const { Get, Post, Delete, Patch } = useApi();
|
const { Get, Post, Delete, Patch } = useApi();
|
||||||
const [reloadTotal, setReloadTotal] = useState(false);
|
const [reloadTotal, setReloadTotal] = useState(false);
|
||||||
const [filteredDepartments, setFilteredDepartments] = useState([]);
|
const [filteredDepartments, setFilteredDepartments] = useState([]);
|
||||||
const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
|
|
||||||
// Handle checkbox change
|
// Handle checkbox change
|
||||||
|
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
|
|
@ -203,7 +200,6 @@ export default function Purchase() {
|
||||||
|
|
||||||
const handleSpecificPaymentMethodChange = (e) => {
|
const handleSpecificPaymentMethodChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
setSelectedPaymentMethod(value); // Update selected payment method state
|
|
||||||
setShowCheckFields(value === "cheque");
|
setShowCheckFields(value === "cheque");
|
||||||
setShowBankFields(value === "bank");
|
setShowBankFields(value === "bank");
|
||||||
|
|
||||||
|
|
@ -518,8 +514,8 @@ export default function Purchase() {
|
||||||
// Editing an existing invoice
|
// Editing an existing invoice
|
||||||
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
|
||||||
if (!originalInvoice) {
|
if (!originalInvoice) {
|
||||||
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Determine the new status based on payment method and remaining amount
|
// Determine the new status based on payment method and remaining amount
|
||||||
|
|
@ -527,11 +523,11 @@ export default function Purchase() {
|
||||||
let newStatus = originalInvoice.status; // Start with the original status
|
let newStatus = originalInvoice.status; // Start with the original status
|
||||||
|
|
||||||
if (formData.pay_method_status === "pay_now") {
|
if (formData.pay_method_status === "pay_now") {
|
||||||
newStatus = "paid"; // Always "paid" if paid now
|
newStatus = "paid"; // Always "paid" if paid now
|
||||||
} else if (formData.pay_method_status === "pay_later") {
|
} else if (formData.pay_method_status === "pay_later") {
|
||||||
newStatus = "unpaid"; // Ensure unpaid if paying later
|
newStatus = "unpaid"; // Ensure unpaid if paying later
|
||||||
} else if (newRemainingAmount < originalInvoice.amount) {
|
} else if (newRemainingAmount < originalInvoice.amount) {
|
||||||
newStatus = "partially_paid"; // Adjust if partially paid
|
newStatus = "partially_paid"; // Adjust if partially paid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -623,141 +619,12 @@ export default function Purchase() {
|
||||||
<div className="main-container">
|
<div className="main-container">
|
||||||
<div className="d-flex p-2">
|
<div className="d-flex p-2">
|
||||||
<div className="expensecontainer d-flex flex-column pd-2">
|
<div className="expensecontainer d-flex flex-column pd-2">
|
||||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
<h3 className="mb-1">Purchase</h3>
|
||||||
|
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||||
{" "}
|
{" "}
|
||||||
+ Add Invoice
|
+ Add Invoice
|
||||||
<img
|
|
||||||
src={invoiceIcon}
|
|
||||||
alt="Invoice Icon"
|
|
||||||
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
|
|
||||||
/>
|
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Table Start */}
|
{/* Table Start */}
|
||||||
|
|
@ -828,10 +695,8 @@ export default function Purchase() {
|
||||||
|
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
type="date"
|
type="date"
|
||||||
|
|
@ -849,10 +714,8 @@ export default function Purchase() {
|
||||||
|
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -870,9 +733,8 @@ export default function Purchase() {
|
||||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control"
|
className="form-control"
|
||||||
|
|
@ -909,9 +771,8 @@ export default function Purchase() {
|
||||||
<select
|
<select
|
||||||
className="form-control"
|
className="form-control"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#ffffff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
name="vendor_department_service_titles"
|
name="vendor_department_service_titles"
|
||||||
|
|
@ -946,210 +807,107 @@ export default function Purchase() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex col-md-12 mt-2">
|
<div className="d-flex col-md-12">
|
||||||
<div
|
|
||||||
className="form-row d-flex col-md-5 p-2 mt-2"
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="input-group col-md-6">
|
|
||||||
<div
|
|
||||||
className="input-group-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
|
|
||||||
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
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="radio-inline"
|
|
||||||
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"
|
|
||||||
name="pay_method_status"
|
|
||||||
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={{
|
|
||||||
|
|
||||||
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"
|
|
||||||
name="pay_method_status"
|
|
||||||
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={{
|
|
||||||
|
|
||||||
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"}
|
|
||||||
onChange={handlePaymentMethodChange}
|
|
||||||
style={{ display: 'none' }} // Hide the radio button
|
|
||||||
/>{" "}
|
|
||||||
Credit Invoice
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
{showPaymentOptions && (
|
className="d-flex col-md-12"
|
||||||
<div
|
style={{ paddingLeft: "5px", paddingTop: "15px" }}
|
||||||
className="d-flex col-md-6 mb-3"
|
>
|
||||||
style={{
|
<p>Payment Method : </p>
|
||||||
border: "2px solid #ACB4AA",
|
<label
|
||||||
padding: "5px 10px",
|
className="radio-inline"
|
||||||
width: "fit-content",
|
style={{ paddingLeft: "10px" }}
|
||||||
borderRadius: "40px",
|
|
||||||
display: "flex",
|
|
||||||
gap: "10px",
|
|
||||||
marginTop: "20px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<input
|
||||||
className="payment-option"
|
type="radio"
|
||||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cash" } })}
|
name="pay_method_status"
|
||||||
style={{
|
value="pay_later"
|
||||||
padding: '5px 10px',
|
checked={formData.pay_method_status === "pay_later"}
|
||||||
cursor: "pointer",
|
onChange={handlePaymentMethodChange}
|
||||||
borderRadius: "20px",
|
/>{" "}
|
||||||
backgroundColor: selectedPaymentMethod === "cash" ? "#4a5546" : "transparent", // Change background based on selection
|
Pay Later
|
||||||
color: selectedPaymentMethod === "cash" ? "white" : "black", // Change text color based on selection
|
</label>
|
||||||
textAlign: "center",
|
<label
|
||||||
}}
|
className="radio-inline"
|
||||||
|
style={{ paddingLeft: "10px" }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="pay_now"
|
||||||
|
checked={formData.pay_method_status === "pay_now"}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Pay Now
|
||||||
|
</label>
|
||||||
|
<label
|
||||||
|
className="radio-inline"
|
||||||
|
style={{ paddingLeft: "10px" }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="pay_method_status"
|
||||||
|
value="credit_invoice"
|
||||||
|
checked={
|
||||||
|
formData.pay_method_status === "credit_invoice"
|
||||||
|
}
|
||||||
|
onChange={handlePaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
|
Credit Invoice
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{showPaymentOptions && (
|
||||||
|
<div className="d-flex col-md-6 mb-3">
|
||||||
|
<label
|
||||||
|
className="radio-inline"
|
||||||
|
style={{ paddingLeft: "10px" }}
|
||||||
>
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="specificPaymentMethod"
|
||||||
|
value="cash"
|
||||||
|
onChange={handleSpecificPaymentMethodChange}
|
||||||
|
/>{" "}
|
||||||
Cash
|
Cash
|
||||||
</div>
|
</label>
|
||||||
<div
|
<label
|
||||||
className="payment-option"
|
className="radio-inline"
|
||||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "cheque" } })}
|
style={{ paddingLeft: "10px" }}
|
||||||
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
|
Check
|
||||||
</div>
|
</label>
|
||||||
<div
|
<label
|
||||||
className="payment-option"
|
className="radio-inline"
|
||||||
onClick={() => handleSpecificPaymentMethodChange({ target: { value: "bank" } })}
|
style={{ paddingLeft: "10px" }}
|
||||||
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
|
Bank Card/ACH/EFT
|
||||||
</div>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
{showAdditionalFields && (
|
{showAdditionalFields && (
|
||||||
<div className="d-flex col-md-5 mt-2" style={{ marginTop: '20px' }}>
|
<div className="d-flex col-md-5 mt-2">
|
||||||
<select
|
<select
|
||||||
className="form-control col-md-5 me-2"
|
className="form-control col-md-5 me-2"
|
||||||
name="days"
|
name="days"
|
||||||
value={formData.days || ""}
|
value={formData.days || ""}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
|
|
||||||
}}
|
}}
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
|
|
@ -1162,11 +920,8 @@ export default function Purchase() {
|
||||||
</select>
|
</select>
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
|
|
||||||
height: "50px",
|
height: "50px",
|
||||||
}}
|
}}
|
||||||
className="form-control d-flex col-md-5"
|
className="form-control d-flex col-md-5"
|
||||||
|
|
@ -1183,11 +938,8 @@ export default function Purchase() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1210,11 +962,8 @@ export default function Purchase() {
|
||||||
className="form-control me-2"
|
className="form-control me-2"
|
||||||
placeholder="Check Number"
|
placeholder="Check Number"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1229,11 +978,8 @@ export default function Purchase() {
|
||||||
<div className="d-flex col-md-4 mt-2">
|
<div className="d-flex col-md-4 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1248,11 +994,8 @@ export default function Purchase() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<select
|
<select
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
marginRight: "10px",
|
marginRight: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -1272,11 +1015,8 @@ export default function Purchase() {
|
||||||
<div className="d-flex col-md-6 mt-2">
|
<div className="d-flex col-md-6 mt-2">
|
||||||
<input
|
<input
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
className="form-control col-md-3"
|
className="form-control col-md-3"
|
||||||
|
|
@ -1307,11 +1047,8 @@ export default function Purchase() {
|
||||||
<div
|
<div
|
||||||
className="form-row d-flex col-md-6 p-2 mt-2"
|
className="form-row d-flex col-md-6 p-2 mt-2"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "#fff",
|
backgroundColor: "#0023000C",
|
||||||
border: "none", // Remove all borders
|
borderRadius: "10px",
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
height: "52px",
|
|
||||||
height: "52px",
|
height: "52px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -1319,19 +1056,19 @@ export default function Purchase() {
|
||||||
<div
|
<div
|
||||||
className="input-group-prepend"
|
className="input-group-prepend"
|
||||||
style={{
|
style={{
|
||||||
background: "#ffffff",
|
background: "#F5F5F5",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
|
borderRadius: "10px 0 0 10px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <span
|
<span
|
||||||
className="input-group-text prefixtext"
|
className="input-group-text prefixtext"
|
||||||
style={{ border: "none", fontSize: "14px" }}
|
style={{ border: "none", fontSize: "14px" }}
|
||||||
>
|
>
|
||||||
USD
|
USD
|
||||||
</span> */}
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -1352,7 +1089,56 @@ export default function Purchase() {
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer" style={{ border: "none" }}>
|
<div className="modal-footer" style={{ border: "none" }}>
|
||||||
|
|
@ -1360,15 +1146,13 @@ export default function Purchase() {
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-secondary-outline"
|
className="btn btn-secondary-outline"
|
||||||
onClick={toggleModal}
|
onClick={toggleModal}
|
||||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
|
||||||
>
|
>
|
||||||
Close
|
Close
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn "
|
className="btn btn-primary"
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}
|
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -37,33 +37,23 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="250px">
|
<ReusableModal show={show} handleClose={handleClose} title="Add Department" width="760px" height="175px">
|
||||||
<form onSubmit={handleSave}>
|
<form onSubmit={handleSave}>
|
||||||
<div className="form-group ">
|
<div className="form-group d-flex align-items-center mt-1">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Department Name"
|
placeholder="Department Name"
|
||||||
value={departmentName}
|
value={departmentName}
|
||||||
onChange={(e) => setDepartmentName(e.target.value)}
|
onChange={(e) => setDepartmentName(e.target.value)}
|
||||||
style={{ width: "483px", border: "none", // Remove all borders
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
marginBottom: "20px",
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: "right", // Align content to the right
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
style={{
|
style={{
|
||||||
padding: "6px 8px",
|
padding: "6px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "40px",
|
borderRadius: "40px",
|
||||||
|
|
@ -71,11 +61,11 @@ const AddDepartmentModal = ({ show, handleClose, onDepartmentAdded }) => {
|
||||||
width: "103px",
|
width: "103px",
|
||||||
height: "42px",
|
height: "42px",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
|
marginLeft: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</ReusableModal>
|
</ReusableModal>
|
||||||
|
|
|
||||||
|
|
@ -37,35 +37,23 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="250px">
|
<ReusableModal show={show} handleClose={handleClose} title="Add Expense Type" width="760px" height="175px">
|
||||||
<form onSubmit={handleSave}>
|
<form onSubmit={handleSave}>
|
||||||
<div className="form-group">
|
<div className="form-group d-flex align-items-center">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="input-field"
|
className="input-field"
|
||||||
placeholder="Expense Type"
|
placeholder="Expense Type"
|
||||||
value={expenseType}
|
value={expenseType}
|
||||||
onChange={(e) => setExpenseType(e.target.value)}
|
onChange={(e) => setExpenseType(e.target.value)}
|
||||||
style={{
|
style={{ width: "483px", marginRight: "10px" }}
|
||||||
width: "483px",
|
|
||||||
border: "none", // Remove all borders
|
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
marginBottom: "20px",
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
textAlign: "right", // Align content to the right
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
style={{
|
style={{
|
||||||
padding: "6px 8px",
|
padding: "6px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "40px",
|
borderRadius: "40px",
|
||||||
|
|
@ -73,6 +61,7 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
||||||
width: "103px",
|
width: "103px",
|
||||||
height: "42px",
|
height: "42px",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
|
marginLeft: "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
|
|
@ -81,5 +70,6 @@ const AddExpenseTypeModal = ({ show, handleClose, onExpenseTypeAdded }) => {
|
||||||
</form>
|
</form>
|
||||||
</ReusableModal>
|
</ReusableModal>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default AddExpenseTypeModal;
|
export default AddExpenseTypeModal;
|
||||||
|
|
|
||||||
|
|
@ -93,26 +93,18 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
||||||
placeholder="Vendor Name"
|
placeholder="Vendor Name"
|
||||||
value={vendorName}
|
value={vendorName}
|
||||||
onChange={(e) => setVendorName(e.target.value)}
|
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
|
<select
|
||||||
className="input-field"
|
className="input-field"
|
||||||
value={vendorType}
|
value={vendorType}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setVendorType(e.target.value);
|
setVendorType(e.target.value);
|
||||||
setVendorDepartments([]); // Reset departments when type changes
|
setVendorDepartments([]); // Reset departments when type changes
|
||||||
setOpeningBalance("");
|
setOpeningBalance("");
|
||||||
}}
|
}}
|
||||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
|
|
||||||
>
|
>
|
||||||
<option value="">Vendor Type</option>
|
<option value="">Vendor Type</option>
|
||||||
|
|
@ -144,10 +136,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
||||||
<select
|
<select
|
||||||
className="input-field"
|
className="input-field"
|
||||||
onChange={handleDepartmentChange}
|
onChange={handleDepartmentChange}
|
||||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<option value="">
|
<option value="">
|
||||||
{vendorType === "purchase"
|
{vendorType === "purchase"
|
||||||
|
|
@ -170,10 +159,7 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
||||||
placeholder="Opening Balance"
|
placeholder="Opening Balance"
|
||||||
value={openingBalance}
|
value={openingBalance}
|
||||||
onChange={(e) => setOpeningBalance(e.target.value)}
|
onChange={(e) => setOpeningBalance(e.target.value)}
|
||||||
style={{ width: "400px", marginRight: "10px", height: "44px" , border: "none", // Remove all borders
|
style={{ width: "400px", marginRight: "10px", height: "44px" }}
|
||||||
borderBottom: "2px solid #ccc", // Set bottom border
|
|
||||||
borderRadius: "0px", // Remove border radius
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -184,10 +170,10 @@ const AddVendorModal = ({ show, handleClose, reloadData }) => {
|
||||||
style={{
|
style={{
|
||||||
marginLeft: "690px",
|
marginLeft: "690px",
|
||||||
padding: "4px 8px",
|
padding: "4px 8px",
|
||||||
backgroundColor: "#282e26",
|
backgroundColor: "#4545db",
|
||||||
color: "white",
|
color: "white",
|
||||||
border: "none",
|
border: "none",
|
||||||
borderRadius: "20px",
|
borderRadius: "40px",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
width: "124px",
|
width: "124px",
|
||||||
height: "42px",
|
height: "42px",
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import backgroundimg from "../../assets/Image/loginbackgound.png";
|
import backgroundimg from "../../assets/img/BackgroundBody.png";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import "./Formlayout.css";
|
import "./Formlayout.css";
|
||||||
const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -21,7 +21,21 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
height: "860px",
|
||||||
|
width: "1440px",
|
||||||
|
borderRadius: "30px",
|
||||||
|
overflow: "hidden",
|
||||||
|
position: "relative",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#ffffff",
|
||||||
|
flexDirection: "row",
|
||||||
|
"@media (maxWidth: 768px)": {
|
||||||
|
flexDirection: "column",
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{/* Left side: Form */}
|
{/* Left side: Form */}
|
||||||
<div
|
<div
|
||||||
|
|
@ -35,8 +49,6 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
boxSizing: "border-box",
|
boxSizing: "border-box",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
|
|
||||||
borderRadius:"40px",
|
|
||||||
position: "relative",
|
position: "relative",
|
||||||
"@media (maxWidth: 768px)": {
|
"@media (maxWidth: 768px)": {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
|
@ -44,7 +56,22 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "30px",
|
||||||
|
left: "70px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link to="/login">
|
||||||
|
<img
|
||||||
|
src={logoSrc}
|
||||||
|
alt="Logo"
|
||||||
|
style={{ height: "70px", width: "100px" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
flex: "1",
|
flex: "1",
|
||||||
|
|
@ -57,7 +84,48 @@ const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Right side: Background image */}
|
{/* Right side: Background image */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: "1",
|
||||||
|
backgroundColor: "#DADAF8",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
position: "relative",
|
||||||
|
height: "860px", // Updated height
|
||||||
|
width: "827px", // Updated width
|
||||||
|
"@media (maxWidth: 768px)": {
|
||||||
|
display: "none",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
className="hideonmobile"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={TopImage}
|
||||||
|
alt="Background"
|
||||||
|
style={{
|
||||||
|
width: "461.13px",
|
||||||
|
height: "120px",
|
||||||
|
objectFit: "contain",
|
||||||
|
position: "absolute",
|
||||||
|
top: 50,
|
||||||
|
right: 0,
|
||||||
|
left: 220,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={backgroundImageSrc}
|
||||||
|
alt="Background"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
objectFit: "contain",
|
||||||
|
position: "absolute",
|
||||||
|
top: 230,
|
||||||
|
right: 0,
|
||||||
|
left: 80,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -34,14 +34,9 @@ const Header = () => {
|
||||||
const settingsRef = useRef(null);
|
const settingsRef = useRef(null);
|
||||||
const lotteryRef = useRef(null);
|
const lotteryRef = useRef(null);
|
||||||
const gasRef = useRef(null);
|
const gasRef = useRef(null);
|
||||||
// const [selectedNav, setSelectedNav] = useState("/");
|
const [selectedNav, setSelectedNav] = useState("/");
|
||||||
const { Get, getAPI, Post } = useApi();
|
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 [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
const toggleMobileMenu = () => {
|
const toggleMobileMenu = () => {
|
||||||
setIsMobileMenuOpen(!isMobileMenuOpen);
|
setIsMobileMenuOpen(!isMobileMenuOpen);
|
||||||
|
|
@ -64,18 +59,6 @@ const Header = () => {
|
||||||
logOutUser();
|
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 () => {
|
const handleStoreManageClick = async () => {
|
||||||
setDropdownVisible(!isDropdownVisible);
|
setDropdownVisible(!isDropdownVisible);
|
||||||
|
|
||||||
|
|
@ -158,8 +141,6 @@ const Header = () => {
|
||||||
setLotteryDropdownOpen(false);
|
setLotteryDropdownOpen(false);
|
||||||
setGasDropdownOpen(false);
|
setGasDropdownOpen(false);
|
||||||
setDropdownVisible(false);
|
setDropdownVisible(false);
|
||||||
setSelectedChild("");
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -170,42 +151,43 @@ const Header = () => {
|
||||||
}, []);
|
}, []);
|
||||||
return (
|
return (
|
||||||
<header className="header-container">
|
<header className="header-container">
|
||||||
<div className="navbar-left">
|
<div className="navbar-left">
|
||||||
<img src={paisavalaLogo} alt="Logo" />
|
<img src={paisavalaLogo} alt="Logo" />
|
||||||
</div>
|
</div>
|
||||||
<nav className="navbar navbar-expand-lg">
|
<nav className="navbar navbar-expand-lg">
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
{/* <Link to="/">
|
{/* <Link to="/">
|
||||||
<img src={logo} alt="Logo" className="logo" />
|
<img src={logo} alt="Logo" className="logo" />
|
||||||
</Link> */}
|
</Link> */}
|
||||||
<button
|
<button
|
||||||
className="navbar-toggler"
|
className="navbar-toggler"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={toggleMobileMenu}
|
onClick={toggleMobileMenu}
|
||||||
|
>
|
||||||
|
<i className="fas fa-bars"></i>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`}
|
||||||
|
id="navbarNav"
|
||||||
|
> <ul className="navbar-nav me-auto">
|
||||||
|
{userRole === "store owner" && (
|
||||||
|
<li
|
||||||
|
className={`nav-item ${
|
||||||
|
selectedNav === "/owner-dashboard" ? "active" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<i className="fas fa-bars"></i>
|
<Link
|
||||||
</button>
|
className="nav-link"
|
||||||
<div
|
to="/owner-dashboard"
|
||||||
className={`collapse navbar-collapse ${isMobileMenuOpen ? 'show' : ''}`}
|
onClick={() => {
|
||||||
id="navbarNav"
|
setSelectedNav("/owner-dashboard");
|
||||||
> <ul className="navbar-nav me-auto">
|
closeDropdowns();
|
||||||
{userRole === "store owner" && (
|
}}
|
||||||
<li
|
>
|
||||||
className={`nav-item ${selectedNav === "/owner-dashboard" ? "active" : ""
|
Owner Dashboard
|
||||||
}`}
|
</Link>
|
||||||
>
|
</li>
|
||||||
<Link
|
)}
|
||||||
className="nav-link"
|
|
||||||
to="/owner-dashboard"
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedNav("/owner-dashboard");
|
|
||||||
closeDropdowns();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Owner Dashboard
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<li className={`nav-item ${selectedNav === "/" ? "active" : ""}`}>
|
<li className={`nav-item ${selectedNav === "/" ? "active" : ""}`}>
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -219,80 +201,28 @@ const Header = () => {
|
||||||
Dashboard
|
Dashboard
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${expenseDropdownOpen ? "active" : ""}`}
|
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
||||||
ref={expenseRef}
|
ref={expenseRef}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
closeDropdowns();
|
||||||
setExpenseDropdownOpen(!expenseDropdownOpen);
|
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
|
<a
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
href="#"
|
href="#"
|
||||||
onClick={(e) => e.preventDefault()}
|
onClick={(e) => e.preventDefault()}
|
||||||
|
|
||||||
>
|
>
|
||||||
{parentLabel}
|
Expense
|
||||||
</a>
|
</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 && (
|
{expenseDropdownOpen && (
|
||||||
<ul
|
<ul className="nav-menu-drop">
|
||||||
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>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/expense"
|
to="/expense"
|
||||||
onClick={() => handleChildSelection("Expense")}
|
onClick={closeDropdowns}
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
padding: "8px 12px",
|
|
||||||
color: "#000",
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Expense
|
Expense
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -301,13 +231,7 @@ const Header = () => {
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/purchase"
|
to="/purchase"
|
||||||
onClick={() => handleChildSelection("Purchase")}
|
onClick={closeDropdowns}
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
padding: "8px 12px",
|
|
||||||
color: "#000",
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Purchase
|
Purchase
|
||||||
</Link>
|
</Link>
|
||||||
|
|
@ -315,10 +239,10 @@ const Header = () => {
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${selectedNav === "/payroll" ? "active" : ""
|
className={`nav-item ${
|
||||||
}`}
|
selectedNav === "/payroll" ? "active" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
|
|
@ -333,8 +257,9 @@ const Header = () => {
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${selectedNav === "/reportDateSelection" ? "active" : ""
|
className={`nav-item ${
|
||||||
}`}
|
selectedNav === "/reportDateSelection" ? "active" : ""
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
|
|
@ -347,92 +272,92 @@ const Header = () => {
|
||||||
Reports
|
Reports
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
{(userRole === "store owner" || userRole === "store manager") && (
|
{(userRole === "store owner" || userRole === "store manager") &&(
|
||||||
|
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
||||||
ref={generalRef}
|
ref={generalRef}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
closeDropdowns();
|
closeDropdowns();
|
||||||
setGeneralDropdownOpen(!generalDropdownOpen);
|
setGeneralDropdownOpen(!generalDropdownOpen);
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
className="nav-link"
|
||||||
|
href="#"
|
||||||
|
onClick={(e) => e.preventDefault()}
|
||||||
>
|
>
|
||||||
<a
|
General
|
||||||
className="nav-link"
|
</a>
|
||||||
href="#"
|
{generalDropdownOpen && (
|
||||||
onClick={(e) => e.preventDefault()}
|
<ul className="nav-menu-drop">
|
||||||
>
|
<li>
|
||||||
General
|
<Link
|
||||||
</a>
|
className="nav-menu-drop-item"
|
||||||
{generalDropdownOpen && (
|
to="/ATM"
|
||||||
<ul className="nav-menu-drop">
|
onClick={closeDropdowns}
|
||||||
<li>
|
>
|
||||||
<Link
|
ATM
|
||||||
className="nav-menu-drop-item"
|
</Link>
|
||||||
to="/ATM"
|
</li>
|
||||||
onClick={closeDropdowns}
|
<li>
|
||||||
>
|
<Link
|
||||||
ATM
|
className="nav-menu-drop-item"
|
||||||
</Link>
|
to="/Bank"
|
||||||
</li>
|
onClick={closeDropdowns}
|
||||||
<li>
|
>
|
||||||
<Link
|
Bank
|
||||||
className="nav-menu-drop-item"
|
</Link>
|
||||||
to="/Bank"
|
</li>
|
||||||
onClick={closeDropdowns}
|
<li>
|
||||||
>
|
<Link
|
||||||
Bank
|
className="nav-menu-drop-item"
|
||||||
</Link>
|
to="/OtherIncome"
|
||||||
</li>
|
onClick={closeDropdowns}
|
||||||
<li>
|
>
|
||||||
<Link
|
Other Income
|
||||||
className="nav-menu-drop-item"
|
</Link>
|
||||||
to="/OtherIncome"
|
</li>
|
||||||
onClick={closeDropdowns}
|
<li>
|
||||||
>
|
<Link
|
||||||
Other Income
|
className="nav-menu-drop-item"
|
||||||
</Link>
|
to="/SalesTax"
|
||||||
</li>
|
onClick={closeDropdowns}
|
||||||
<li>
|
>
|
||||||
<Link
|
Sales Tax
|
||||||
className="nav-menu-drop-item"
|
</Link>
|
||||||
to="/SalesTax"
|
</li>
|
||||||
onClick={closeDropdowns}
|
<li>
|
||||||
>
|
<Link
|
||||||
Sales Tax
|
className="nav-menu-drop-item"
|
||||||
</Link>
|
to="/bankLedger"
|
||||||
</li>
|
onClick={closeDropdowns}
|
||||||
<li>
|
>
|
||||||
<Link
|
Bank Ledger
|
||||||
className="nav-menu-drop-item"
|
</Link>
|
||||||
to="/bankLedger"
|
</li>
|
||||||
onClick={closeDropdowns}
|
|
||||||
>
|
|
||||||
Bank Ledger
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/cashLedger"
|
to="/cashLedger"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Cash Ledger
|
Cash Ledger
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/OwnerDist"
|
to="/OwnerDist"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Owner Distribution
|
Owner Distribution
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
||||||
|
|
@ -547,191 +472,191 @@ const Header = () => {
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
{userRole === "store owner" && (
|
{userRole === "store owner" &&(
|
||||||
<li
|
<li
|
||||||
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
className={`nav-item ${selectedNav === "#" ? "active" : ""}`}
|
||||||
ref={settingsRef}
|
ref={settingsRef}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
closeDropdowns();
|
closeDropdowns();
|
||||||
setSettingsDropdownOpen(!settingsDropdownOpen);
|
setSettingsDropdownOpen(!settingsDropdownOpen);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
className="nav-link"
|
className="nav-link"
|
||||||
href="#"
|
href="#"
|
||||||
onClick={(e) => e.preventDefault()}
|
onClick={(e) => e.preventDefault()}
|
||||||
>
|
>
|
||||||
Settings
|
Settings
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
{settingsDropdownOpen && (
|
{settingsDropdownOpen && (
|
||||||
<ul className="nav-menu-drop">
|
<ul className="nav-menu-drop">
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/store-information"
|
to="/store-information"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Store Information
|
Store Information
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/manage-users"
|
to="/manage-users"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Manage Users
|
Manage Users
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/manage-departments"
|
to="/manage-departments"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Manage Departments
|
Manage Departments
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/manage-expense-type"
|
to="/manage-expense-type"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Manage Expense Type
|
Manage Expense Type
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/other-income-type"
|
to="/other-income-type"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Other Income Type
|
Other Income Type
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/manage-vendor"
|
to="/manage-vendor"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Manage Vendor
|
Manage Vendor
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link
|
<Link
|
||||||
className="nav-menu-drop-item"
|
className="nav-menu-drop-item"
|
||||||
to="/manage-settings"
|
to="/manage-settings"
|
||||||
onClick={closeDropdowns}
|
onClick={closeDropdowns}
|
||||||
>
|
>
|
||||||
Manage Settings
|
Manage Settings
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
<div className="d-flex align-items-center" >
|
<div className="d-flex align-items-center" >
|
||||||
|
|
||||||
{/* <div className={`trail me-3 ${getColorClass()}`}>
|
{/* <div className={`trail me-3 ${getColorClass()}`}>
|
||||||
<p>Remaining days: {remainingDays}</p>
|
<p>Remaining days: {remainingDays}</p>
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div className="navbar-left">
|
<div className="navbar-left">
|
||||||
<div className="avatar-container" ref={avatarRef}>
|
<div className="avatar-container" ref={avatarRef}>
|
||||||
<img
|
<img
|
||||||
src={shopeKeeper}
|
src={shopeKeeper}
|
||||||
className="avatar"
|
className="avatar"
|
||||||
alt="User Avatar"
|
alt="User Avatar"
|
||||||
|
|
||||||
|
/>
|
||||||
|
{/* Display role_name here */}
|
||||||
|
<div className="user-role">
|
||||||
|
{userRole && <span>{userRole}</span>}
|
||||||
|
</div>
|
||||||
|
{/* Settings Icon Button */}
|
||||||
|
<button
|
||||||
|
className="settings-button"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation(); // Prevent the click from triggering the avatar's click
|
||||||
|
closeDropdowns();
|
||||||
|
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Optional: Add an icon here */}
|
||||||
|
</button>
|
||||||
|
|
||||||
/>
|
{settingsDropOpen && (
|
||||||
{/* Display role_name here */}
|
<ul className="nav-menu-drop">
|
||||||
<div className="user-role">
|
<li>
|
||||||
{userRole && <span>{userRole}</span>}
|
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
|
||||||
|
Profile
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
{(userRole === "store owner" || userRole === "store manager") && (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="nav-menu-drop-item"
|
||||||
|
href="#"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleStoreManageClick();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Switch Store
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
{isDropdownVisible && (
|
||||||
|
<div className="dropdown-container">
|
||||||
|
<ul className="dropdown-list">
|
||||||
|
{loading ? (
|
||||||
|
<li>Loading...</li>
|
||||||
|
) : (
|
||||||
|
stores.map((store) => (
|
||||||
|
<li key={store.id} className="dropdown-item">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="dropdown-link"
|
||||||
|
onClick={(e) => {
|
||||||
|
handleStoreClick(store.id);
|
||||||
|
window.location.reload();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{store.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/* Settings Icon Button */}
|
)}
|
||||||
<button
|
<li>
|
||||||
className="settings-button"
|
<a
|
||||||
onClick={(e) => {
|
className="nav-menu-drop-item"
|
||||||
e.stopPropagation(); // Prevent the click from triggering the avatar's click
|
href="#"
|
||||||
|
onClick={() => {
|
||||||
|
handleLogout();
|
||||||
closeDropdowns();
|
closeDropdowns();
|
||||||
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Optional: Add an icon here */}
|
Logout
|
||||||
</button>
|
</a>
|
||||||
|
</li>
|
||||||
{settingsDropOpen && (
|
</ul>
|
||||||
<ul className="nav-menu-drop">
|
)}
|
||||||
<li>
|
</div>
|
||||||
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
|
</div>
|
||||||
Profile
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{(userRole === "store owner" || userRole === "store manager") && (
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className="nav-menu-drop-item"
|
|
||||||
href="#"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
handleStoreManageClick();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Switch Store
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{isDropdownVisible && (
|
|
||||||
<div className="dropdown-container">
|
|
||||||
<ul className="dropdown-list">
|
|
||||||
{loading ? (
|
|
||||||
<li>Loading...</li>
|
|
||||||
) : (
|
|
||||||
stores.map((store) => (
|
|
||||||
<li key={store.id} className="dropdown-item">
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="dropdown-link"
|
|
||||||
onClick={(e) => {
|
|
||||||
handleStoreClick(store.id);
|
|
||||||
window.location.reload();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{store.name}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
className="nav-menu-drop-item"
|
|
||||||
href="#"
|
|
||||||
onClick={() => {
|
|
||||||
handleLogout();
|
|
||||||
closeDropdowns();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
|
||||||
import LoginPage from "./WithUi/LoginPage";
|
import LoginPage from "./WithUi/LoginPage";
|
||||||
function Login() {
|
function Login() {
|
||||||
return (
|
return (
|
||||||
<FormLayout logoSrc={logo} >
|
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}>
|
||||||
<LoginPage />
|
<LoginPage />
|
||||||
</FormLayout>
|
</FormLayout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -305,7 +305,6 @@ function AccountCreate() {
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
lineHeight: "40px",
|
lineHeight: "40px",
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
// width:'500px',
|
|
||||||
marginTop: "100px",
|
marginTop: "100px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -315,8 +314,8 @@ function AccountCreate() {
|
||||||
className="mb-3"
|
className="mb-3"
|
||||||
style={{ fontSize: "14px", color: "#002300" }}
|
style={{ fontSize: "14px", color: "#002300" }}
|
||||||
>
|
>
|
||||||
{/* Start managing your finances effortlessly. Sign up to access your
|
Start managing your finances effortlessly. Sign up to access your
|
||||||
personal ledger and gain control of your transactions with ease! */}
|
personal ledger and gain control of your transactions with ease!
|
||||||
</p>
|
</p>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -428,14 +427,13 @@ function AccountCreate() {
|
||||||
className="card-title mb-3"
|
className="card-title mb-3"
|
||||||
style={{
|
style={{
|
||||||
|
|
||||||
fontSize: "30px",
|
fontSize: "40px",
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
textAlign: "left",
|
textAlign: "left",
|
||||||
marginTop: "80px",
|
marginTop: "80px",
|
||||||
// width:"500px"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Enter store details
|
Enter the Details
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
|
|
@ -446,9 +444,8 @@ function AccountCreate() {
|
||||||
color: "#002300",
|
color: "#002300",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Get started with your personal ledger. */}
|
Get started with your personal ledger. Fill in your information to track
|
||||||
{/* Fill in your information to track
|
transactions and manage your finances seamlessly!
|
||||||
transactions and manage your finances seamlessly! */}
|
|
||||||
</p>
|
</p>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -547,11 +544,11 @@ function AccountCreate() {
|
||||||
<div className="mb-3 mt-4">
|
<div className="mb-3 mt-4">
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn rounded-pill"
|
className="btn btn-primary rounded-pill"
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "60px",
|
height: "60px",
|
||||||
backgroundColor: "#4A5546",
|
backgroundColor: "#4545DB",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
padding: "10px 0px",
|
padding: "10px 0px",
|
||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
|
|
|
||||||
|
|
@ -62,9 +62,9 @@ const LoginPage = () => {
|
||||||
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
||||||
Welcome Back
|
Welcome Back
|
||||||
</p>
|
</p>
|
||||||
{/* <p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
|
<p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
|
||||||
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
|
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
|
||||||
</p> */}
|
</p>
|
||||||
<form onSubmit={loginUser}>
|
<form onSubmit={loginUser}>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<CustomInput
|
<CustomInput
|
||||||
|
|
@ -120,11 +120,11 @@ const LoginPage = () => {
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn rounded-pill"
|
className="btn btn-primary rounded-pill"
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "60px",
|
height: "60px",
|
||||||
backgroundColor: "#4A5546",
|
backgroundColor: "#4545DB",
|
||||||
color: "#ffffff",
|
color: "#ffffff",
|
||||||
padding: "10px 10px",
|
padding: "10px 10px",
|
||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
|
|
@ -139,7 +139,7 @@ const LoginPage = () => {
|
||||||
</form>
|
</form>
|
||||||
<div className="text-center mt-4">
|
<div className="text-center mt-4">
|
||||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
||||||
<span>New to PaisaVara?</span>
|
<span>New to Ezhisab?</span>
|
||||||
<Link
|
<Link
|
||||||
to="/create-user"
|
to="/create-user"
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -147,7 +147,6 @@ const LoginPage = () => {
|
||||||
marginLeft: "5px",
|
marginLeft: "5px",
|
||||||
fontSize: "22px",
|
fontSize: "22px",
|
||||||
fontWeight: "700",
|
fontWeight: "700",
|
||||||
color:"#000"
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Create an Account
|
Create an Account
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
font-family: Comfortaa;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown Styles */
|
/* Dropdown Styles */
|
||||||
|
|
@ -27,7 +26,6 @@
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
display: block;
|
display: block;
|
||||||
transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu-drop-item:hover {
|
.nav-menu-drop-item:hover {
|
||||||
|
|
@ -51,7 +49,6 @@
|
||||||
|
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu-drop {
|
.nav-menu-drop {
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 28px 26px;
|
padding: 28px 26px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #9FAA9A; /* Your border color */
|
border: 1px solid #4545db4d; /* Your border color */
|
||||||
opacity: 1; /* Ensure inputs are visible */
|
opacity: 1; /* Ensure inputs are visible */
|
||||||
box-shadow: none; /* Remove any box-shadow if applied */
|
box-shadow: none; /* Remove any box-shadow if applied */
|
||||||
font-size: 16px; /* Optional: Set font size for the input text */
|
font-size: 16px; /* Optional: Set font size for the input text */
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
|
|
||||||
.custom-input:focus {
|
.custom-input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 1px solid #9FAA9A;
|
border: 1px solid #4545db4d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-error {
|
.input-error {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue