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

Compare commits

base: Sonali:71052fe0211bd6bc9f829e532440ff38a28cec93
Branches Tags
Sonali:28_12_sonali
Sonali:main
Sonali:27_12_Sonali
...
compare: Sonali:62d2ac5f039481f4c154568853e6a7d160824d40
Branches Tags
Sonali:28_12_sonali
Sonali:main
Sonali:27_12_Sonali

2 Commits
71052fe021 ... 62d2ac5f03

Author SHA1 Message Date
Sonali 62d2ac5f03 Merge pull request '" dashboard"' (#6) from 27_12_Sonali into main 
Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/6
 2024-12-27 07:02:00 +00:00
sonali fcc0ce8ea2 " dashboard" 2024-12-27 12:30:35 +05:30
12 changed files with 1030 additions and 655 deletions
Show Stats Expand all files Collapse all files

BIN
public/Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

17
public/index.html
View File

@ -8,7 +8,7 @@
<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=Manrope:wght@400;600&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Comfortaa: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" />
@ -29,14 +29,13 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style> <style>
body { body {
background-color: #E9ECFF; background-image: url('Background.png');
background-image: url('../src/assets/Image/Pattern.png'); background-color: #f9fff6;
background-size: cover; font-family: "Comfortaa";
background-repeat: no-repeat;
background-position: top;
background-position: center; background-repeat: no-repeat;
background-blend-mode: overlay; background-size: 100% auto;
font-family: Manrope;
} }

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

@ -93,25 +93,34 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #FFFFFF;
width: 400px; width: 400px;
height: 90px; height: 81px;
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: 90px; height: 81px;
background-color: #FFFFFF;
padding: 10px 20px;
border-radius: 10px;
display: flex;
padding: 10px 20px;
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 */
@ -123,7 +132,7 @@ body {
.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: 20px; border-radius: 40px;
padding: 10px 15px; padding: 10px 15px;
font-weight: bold; /* Bold text for active link */ font-weight: bold; /* Bold text for active link */
} }
@ -144,7 +153,7 @@ body {
align-items: center; align-items: center;
} }
.nav-link { .nav-link {
font-family: "Manrope"; font-family: 'Comfortaa', sans-serif;
font-size: 16px !important; font-size: 16px !important;
color: #002300; color: #002300;
@ -306,7 +315,25 @@ body {
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 */
@ -414,6 +441,7 @@ body {
.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 */
@ -484,7 +512,7 @@ body {
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 50%; top: 30%;
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 */
@ -493,6 +521,7 @@ body {
.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 {
@ -501,6 +530,7 @@ body {
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;
@ -514,8 +544,8 @@ body {
} }
.search-container-icon { .search-container-icon {
position: absolute; position: absolute;
left: 10px; left: 12px;
top: 50%; top: 47%;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
} }
@ -706,6 +736,7 @@ body {
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 */
@ -725,6 +756,7 @@ 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;
@ -738,6 +770,7 @@ h3 {
.expense-searchcontainerstart { .expense-searchcontainerstart {
width: 90%; width: 90%;
} }
.custbtn { .custbtn {
box-shadow: none; box-shadow: none;
@ -795,13 +828,15 @@ h3 {
.table-responsive th { .table-responsive th {
background-color: #282e26; background-color: #282e26;
color: white; 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 {

97
src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js
View File

@ -304,13 +304,13 @@ const ATMDepositTable = (props) => {
return ( return (
<div> <div>
<div <div
style={{ style={{
display: "flex", display: "flex",
gap: "16px", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
margin: "20px", marginBottom:"20px"
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -318,20 +318,30 @@ const ATMDepositTable = (props) => {
style={{ style={{
backgroundColor: "#fff8e6", backgroundColor: "#fff8e6",
border: "1px solid #ffd700", border: "1px solid #ffd700",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -341,20 +351,30 @@ const ATMDepositTable = (props) => {
style={{ style={{
backgroundColor: "#e6ffee", backgroundColor: "#e6ffee",
border: "1px solid #00b300", border: "1px solid #00b300",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
$19,864,63,521 style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -364,20 +384,30 @@ const ATMDepositTable = (props) => {
style={{ style={{
backgroundColor: "#ffe6e6", backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d", border: "1px solid #ff4d4d",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Expense this month Expense this month
</p> </p>
</div> </div>
@ -388,7 +418,7 @@ const ATMDepositTable = (props) => {
<div className="searchcontainer"> <div className="searchcontainer">
<div <div
className="input-group" className="input-group"
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "40px", 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"
@ -483,9 +513,16 @@ const ATMDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", width: "40px",
backgroundColor: "#f4f4f4", height: "40px",
width: "130px", borderRadius: "60px",
padding: "15px",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -503,6 +540,7 @@ 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",
@ -548,7 +586,7 @@ const ATMDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -659,7 +697,12 @@ 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> <tr style={{
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
@ -668,7 +711,7 @@ const ATMDepositTable = (props) => {
style={{ style={{
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
textAlign: "start", textAlign: "center",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff' color:'#ffffff'
@ -712,11 +755,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: "left" }}> <td style={{ cursor: "pointer", textAlign: "center" }}>
{invoice.date} {invoice.date}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "left" }}> <td style={{ cursor: "pointer", textAlign: "center" }}>
<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() +
@ -724,8 +767,8 @@ const ATMDepositTable = (props) => {
: "N/A"} : "N/A"}
</span> </span>
</td> </td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td> <td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}> <td style={{ textAlign: 'center' }}>
<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) :

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

@ -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_method_status: "pay_now",
prepaid_tax: false, prepaid_tax: false,
prepaid_tax_percentage: "", prepaid_tax_percentage: "",
amount: "", amount: "",
remaining_amount: "", remaining_amount: "",
pay_method: "", pay_method: "cash",
due_date: null, due_date: null,
note: "", note: "",
bank: "", bank: "",
@ -81,8 +81,7 @@ function AddInvoice() {
cheque_no: null, cheque_no: null,
type: "", type: "",
}); });
} };
useEffect(() => { useEffect(() => {
setFormData((prevData) => ({ setFormData((prevData) => ({
@ -95,7 +94,6 @@ 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();
@ -123,9 +121,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";
@ -157,25 +155,22 @@ function AddInvoice() {
}), }),
}; };
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit)
await Post("createInvoiceAndPrepaidTax", invoiceDataToSubmit).then((response) => { .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(
@ -230,7 +225,6 @@ 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;
@ -240,8 +234,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,
@ -256,7 +250,7 @@ function AddInvoice() {
}; };
const handleCancel = () => { const handleCancel = () => {
makeBlank() makeBlank();
navigate("/"); navigate("/");
}; };
@ -280,7 +274,7 @@ function AddInvoice() {
}, },
{ {
row: 1, row: 1,
column: "col-md-2", column: "col-md-3",
label: "Invoice Number", label: "Invoice Number",
type: "invoice_no", type: "invoice_no",
name: "invoice_no", name: "invoice_no",
@ -288,7 +282,7 @@ function AddInvoice() {
}, },
{ {
row: 2, row: 2,
column: "col-md-3", column: "col-md-2",
label: "Amount", label: "Amount",
name: "amount", name: "amount",
type: "prefix-input", type: "prefix-input",
@ -302,20 +296,20 @@ function AddInvoice() {
// label: "Payment Method:", // label: "Payment Method:",
type: "radio", type: "radio",
options: [ options: [
{ value: "pay_later", label: "Pay Later" },
{ value: "pay_now", label: "Pay Now" }, { value: "pay_now", label: "Pay Now" },
{ value: "pay_later", label: "Pay Later" },
{ value: "credit_invoice", label: "Credit Invoice" }, { value: "credit_invoice", label: "Credit Invoice" },
], ],
}, },
{ {
row: 4, row: 4,
column: "col-md-6", column: "col-md-5",
label: "Payment Method Options", label: "Payment Method Options",
type: "payment-method-options", type: "payment-method-options",
}, },
{ {
row: 4, row: 4,
column: "col-md-6", column: "col-md-5",
label: "Payment Method Options", label: "Payment Method Options",
type: "pay-bank-options", type: "pay-bank-options",
}, },
@ -331,15 +325,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,
@ -348,13 +342,12 @@ 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: "cheque", label: "Cheque" },
{ value: "bank", label: "Bank Card (ACH/EFT)" }, { value: "bank", label: "Bank Card (ACH/EFT)" },
{ value: "cheque", label: "Cheque" },
]; ];
const groupedFields = fields.reduce((acc, field) => { const groupedFields = fields.reduce((acc, field) => {
@ -385,7 +378,6 @@ 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) => {
@ -406,7 +398,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>
); );
@ -421,12 +413,11 @@ 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">
@ -450,7 +441,6 @@ function AddInvoice() {
borderBottom: "1px solid #f4f4f4", borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px", paddingBottom: "16px",
height: "50px", height: "50px",
}} }}
> >
<div className="input-groups"> <div className="input-groups">
@ -459,7 +449,7 @@ function AddInvoice() {
</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={{ borderBottom: "2px solid #e4e5e7", marginTop: "30px" }}
className="form-control-borderless" className="form-control-borderless"
name={field.name} name={field.name}
placeholder={field.placeholder} placeholder={field.placeholder}
@ -468,8 +458,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)
}} }}
/> />
@ -481,7 +471,7 @@ function AddInvoice() {
return ( return (
<div className="form-group"> <div className="form-group">
<select <select
className="form-control-borderless" className="input-select"
name="vendor_department" name="vendor_department"
value={formData.vendor_department} value={formData.vendor_department}
onChange={(e) => { onChange={(e) => {
@ -508,7 +498,6 @@ function AddInvoice() {
</option> </option>
))} ))}
</select> </select>
</div> </div>
); );
@ -582,27 +571,47 @@ function AddInvoice() {
) )
); );
case "radio": case "radio":
return ( return (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}> <div
<label className="me-4">{field.label}</label> className="d-flex align-items-center"
style={{
border: "1px solid #ACB4AA",
padding: "5px 5px",
width: "fit-content",
borderRadius: "40px",
marginBottom: "20px",
}}
>
<label className="">{field.label}</label>
<div className="d-flex">
{field.options.map((option, index) => ( {field.options.map((option, index) => (
<div <div
key={index} key={index}
className="form-check me-4" className="form-check"
style={{ style={{
cursor: 'pointer', cursor: "pointer",
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent', backgroundColor:
padding: '5px 15px', // Add padding for better appearance formData[field.name] === option.value
borderRadius: '20px', // Optional: Round the corners of the label ? "#4a5546"
: "transparent",
padding: "5px 25px",
borderRadius: "20px",
}} }}
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })} onClick={() =>
handlePaymentMethodChange({
target: { name: field.name, value: option.value },
})
}
> >
<label <label
className="form-check-label" className="form-check-label"
style={{ style={{
fontWeight: 'normal', fontWeight: "normal",
color: formData[field.name] === option.value ? '#ffffff' : '#282e26', color:
formData[field.name] === option.value
? "#ffffff"
: "#282e26",
}} }}
> >
{option.label} {option.label}
@ -610,41 +619,59 @@ function AddInvoice() {
</div> </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 className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}> <div
{paymentMethodOptions.map((option, index) => ( className="d-flex align-items-center"
<div
key={index}
className="form-check me-4"
style={{
cursor: 'pointer',
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
>
<label
className="form-check-label"
style={{ style={{
fontWeight: 'normal', border: "2px solid #ACB4AA",
color: formData.pay_method === option.value ? '#ffffff' : '#282e26', padding: "5px 5px", // Add padding to give space on both sides
width: "fit-content",
borderRadius: "40px",
marginBottom: "30px",
}} }}
> >
{option.label} {paymentMethodOptions.map((option, index) => (
</label> <div
</div> key={index}
))} className="form-check "
</div> style={{
) cursor: "pointer",
); backgroundColor:
formData.pay_method === option.value
? "#4a5546"
: "transparent",
padding: "5px 25px",
borderRadius: "20px",
}}
onClick={() =>
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>
)
);
case "checkbox": case "checkbox":
return ( return (
<div className="form-check"> <div className="form-check">
@ -659,46 +686,47 @@ function AddInvoice() {
</div> </div>
); );
case "pay-bank-options": case "pay-bank-options":
return ( return (
(formData.pay_method === "cheque" || formData.pay_method === "bank") && ( (formData.pay_method === "cheque" ||
<div className="row align-items-center"> formData.pay_method === "bank") && (
<div className="row align-items-center">
<div className="col-md-4">
<div className="form-group">
<select
required
className="form-control-borderless"
name="bank"
value={formData.bank}
onChange={handleChange}
>
<option value="">Select Bank</option>
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div>
</div>
{formData.pay_method === "cheque" && (
<div className="col-md-4"> <div className="col-md-4">
<div className="form-group"> <div className="form-group">
<select <input
required required
type="text"
className="form-control-borderless" className="form-control-borderless"
name="bank" name="cheque_no"
value={formData.bank} placeholder="Cheque Number"
value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
> maxLength={20}
<option value="">Select Bank</option> />
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div> </div>
</div> </div>
)}
{formData.pay_method === "cheque" && (
<div className="col-md-4">
<div className="form-group">
<input
required
type="text"
className="form-control-borderless"
name="cheque_no"
placeholder="Cheque Number"
value={formData.cheque_no}
onChange={handleChange}
maxLength={20}
/>
</div>
</div>
)}
<div className="col-md-6"> <div className="col-md-6">
<div className="form-group"> <div className="form-group">
<input <input
@ -709,9 +737,7 @@ function AddInvoice() {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
</div> </div>
) )
); );
@ -726,29 +752,31 @@ 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 Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === "/payInvoice" ? "active" : ""}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick("/payInvoice")}
> >
Pay Invoice Pay Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`} className={`btn ${activeButton === "/atmDeposit" ? "active" : ""}`}
onClick={() => handleLinkClick('/bankDeposit')} onClick={() => handleLinkClick("/atmDeposit")}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
<button
className={`btn ${activeButton === "/bankDeposit" ? "active" : ""}`}
onClick={() => handleLinkClick("/bankDeposit")}
>
Bank Deposit
</button>
</div> </div>
</div> </div>
<div className="formcontainer"> <div className="formcontainer">
@ -756,32 +784,37 @@ function AddInvoice() {
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", border: "1px solid #EBEAF2",
borderRadius: "40px" boxShadow: "0px 2px 8px rgba(6, 12, 34, 0.0392157);",
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 className="row mb-3" key={rowKey}> <div
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 mb-3"> <div className="row ">
<div className="col-md-6"> <div className="col-md-3">
<div className="form-group"> <div className="form-group">
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
@ -793,30 +826,47 @@ 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 className="d-flex justify-content-end"> <div
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={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{
border: " 1px solid #282e26",
borderRadius: "20px",
borderRadius: "40px",
width: "181px",
height: "45px",
}}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}> <button
type="submit"
className="btn"
style={{
color: "white",
backgroundColor: "#282e26",
borderRadius: "40px",
width: "181px",
height: "45px",
}}
>
Save Save
</button> </button>
</div> </div>
@ -841,9 +891,8 @@ function AddInvoice() {
onVendorAdded={handleVendorAdded} onVendorAdded={handleVendorAdded}
/> />
</div> </div>
</div> </div>
); );
} }
export default AddInvoice; export default AddInvoice;

48
src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
View File

@ -148,31 +148,33 @@ 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 Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div> </div>
</div> </div>
<div className="formcontainer"> <div className="formcontainer">
@ -187,8 +189,13 @@ function AtmDeposit() {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className=" col-md-12 row mb-3"> <div className=" col-md-12 row mb-3"
<div className="col-md-4 mb-3"> style={{
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"
@ -200,13 +207,13 @@ function AtmDeposit() {
</div> </div>
<div className="col-md-3 mb-3"> <div className="col-md-3 mb-3">
<select <select
className="form-select custom-select" className="input-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 a type</option> <option value="">Select Cash 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}
@ -214,14 +221,14 @@ function AtmDeposit() {
))} ))}
</select> </select>
</div> </div>
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}> <div className="col-md-3 mb-4">
<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, borderBottom: " 2px solid #e4e5e7" }} style={{ flex: 1, }}
className="form-control-borderless" className="form-control-borderless"
name="cash_amount" name="cash_amount"
placeholder="Amount" placeholder="Amount"
@ -237,7 +244,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"
@ -246,7 +253,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">
@ -273,16 +280,16 @@ function AtmDeposit() {
<div className=""> <div className="">
<div className="d-flex justify-content-end"> <div 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={() => navigate("/")} onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px' , borderRadius: '40px' , width: "181px", height:"45px" }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px' , width: "181px", height:"45px" }}>
Save Save
</button> </button>
</div> </div>
@ -295,6 +302,7 @@ 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} />

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

@ -161,26 +161,28 @@ function BankDeposit() {
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div> </div>
</div> </div>
<div className="formcontainer"> <div className="formcontainer">
@ -189,7 +191,9 @@ function BankDeposit() {
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}>
@ -197,8 +201,11 @@ function BankDeposit() {
<div className="col-md-12 row "> <div className="col-md-12 row " style={{
<div className=" col-md-4"> gap: "4%",
marginLeft:"3px"
}}>
<div className=" col-md-3">
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -208,6 +215,30 @@ 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"
@ -224,51 +255,33 @@ function BankDeposit() {
))} ))}
</select> </select>
</div> </div>
<div className="mb-3 col-md-3">
<select
className="form-select custom-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
>
<option value="" enable>
Select a type
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div>
<div <div
className="col-md-12 mb-12" className="col-md-12"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing gap: "50px", // Add gap for consistent spacing
// marginBottom:"30px",
}} }}
> >
<div <div
className="form-group " className="form-group col-3"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1", // Allow the field to adjust in size flex: "1", // Allow the field to adjust in size
}} }}
> >
<div className="input-group"> <div className="input-group">
<input <input
type="text" type="text"
style={{ border: "none", width: "100%" }} style={{ borderBottom: "1px solid #e4e5e7", width: "100%" }}
className="form-control-borderless" className="form-control"
name="cash_amount" name="cash_amount"
placeholder="Cash Amount" placeholder="Cash Amount"
value={formData.cash_amount || ""} value={formData.cash_amount || ""}
@ -282,16 +295,16 @@ function BankDeposit() {
className="form-group " className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1", flex: "1",
}} }}
> >
<div className="input-group"> <div className="input-group">
<input <input
type="number" type="number"
style={{ border: "none", width: "100%" }} style={{ borderBottom: "1px solid #e4e5e7", width: "100%" , marginRight:"5px" }}
className="form-control-borderless" className="form-control-borderless"
name="cheque_amount" name="cheque_amount"
placeholder="Cheque Amount" placeholder="Cheque Amount"
@ -306,12 +319,12 @@ function BankDeposit() {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "2px solid #e4e5e7", border:"none",
height: "50px", height: "50px",
flex: "1", flex: "1",
}} }}
> >
<input {/* <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
name="note" name="note"
@ -322,22 +335,22 @@ function BankDeposit() {
border: "none", border: "none",
width: "100%", width: "100%",
}} }}
/> /> */}
</div> </div>
</div> </div>
</div> </div>
<div className="d-flex justify-content-end"> <div 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={() => navigate("/")} onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
Save Save
</button> </button>
</div> </div>

209
src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
View File

@ -309,92 +309,124 @@ const BankDepositTable = (props) => {
return ( return (
<div> <div>
<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: "400px",
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
<div
style={{ style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex", display: "flex",
flexDirection: "column", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "center",
width: "400px", marginBottom:"20px"
textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> {/* Invoice due this month */}
$19,864,63,521 <div
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> backgroundColor: "#fff8e6",
Last 7 days sale border: "1px solid #ffd700",
</p> borderRadius: "20px",
</div> 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>
{/* Expense this month */} {/* Last 7 days sale */}
<div <div
style={{ style={{
backgroundColor: "#ffe6e6", backgroundColor: "#e6ffee",
border: "1px solid #ff4d4d", border: "1px solid #00b300",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "385px",
textAlign: "left", height: "130px",
}} textAlign: "left",
> }}
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> >
$0.00 <p
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> fontFamily: "Comfortaa",
Expense this month fontStyle: "normal",
</p> fontWeight: 700,
</div> fontSize: "48px",
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 */}
<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>
<div className="d-flex align-items-center mb-3"> <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
{/* Search Bar */} {/* Search Bar */}
<div className="searchcontainer"> <div className="searchcontainer" >
<div <div
className="input-group" className="input-group"
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{width:"300px" , height: "40px", 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"
@ -489,9 +521,10 @@ const BankDepositTable = (props) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px", width: "40px",
height: "40px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -509,6 +542,7 @@ 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",
@ -554,7 +588,7 @@ const BankDepositTable = (props) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -666,18 +700,23 @@ 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> <tr style={{
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: index === 0 ? "30px" : "0", paddingLeft: "50px",
cursor: "pointer", cursor: "pointer",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff', color:'#ffffff',
textAlign: "start", textAlign: "left",
alignContent: "center", alignContent: "center",
}} }}
> >
@ -719,13 +758,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: "left" }}> <td style={{ cursor: "pointer", textAlign: "center" }}>
{invoice.date} {invoice.date}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "left" }}> <td style={{ cursor: "pointer", textAlign: "center" }}>
{invoice.bank_name} {invoice.bank_name}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "left" }}> <td style={{ cursor: "pointer", textAlign: "center" }}>
<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() +
@ -733,8 +772,8 @@ const BankDepositTable = (props) => {
: "N/A"} : "N/A"}
</span> </span>
</td> </td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td> <td style={{ textAlign: "center" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}> <td style={{ textAlign: 'center' }}>
<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) :

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

@ -2,6 +2,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
} }
.container { .container {
@ -9,6 +10,20 @@
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 */
} }
@ -18,24 +33,27 @@
} }
.button-groups { .button-groups {
display: flex; display: flex;
margin-left: 35%; justify-content: space-between; /* Space between buttons */
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 */
background-color: #ffffff; width: auto; /* Fixed width */
width: auto; height: 60px; /* Fixed height */
background: #FFFFFF;
border: 1px solid #EBEAF2;
box-shadow: 0px 2px 8px rgba(6, 12, 34, 0.0392);
border-radius: 44px; border-radius: 44px;
padding: 10px 50px; padding: 0 8px; /* Equal padding on left and right sides */
}
} /* Active button styles */
.btn.active {
/* Active button styles */
.btn.active {
background-color: #ffaf32; /* Yellow background */ background-color: #ffaf32; /* Yellow background */
border-radius: 20px; border-radius: 27px;
color: black; /* Black text */ color: black; /* Black text */
} padding: 10px 20px; /* Ensure padding consistency for buttons */
}
.form-container { .form-container {
width: 1328px; width: 1328px;
@ -56,11 +74,11 @@
.form-control-borderless { .form-control-borderless {
display: block; display: block;
width: 100%; width: 100%;
padding: .375rem .75rem;
font-size: 1rem; font-size: 16px;
font-weight: 400; font-weight: bold;
line-height: 1.5;
color: #212529; color: #999999;
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: none; border: none;
@ -101,19 +119,26 @@
.table th { .table th {
justify-content: center; justify-content: center;
height: 60px; height: 40px;
align-items: center;
/* margin-right: 50px; */
background-color: #ffffff; background-color: #ffffff;
font-weight: bold; font-weight: bold;
} }
.table td { .table td {
border-bottom: 1px solid #EBEAF2; border-bottom: 1px solid #EBEAF2;
text-align: left; text-align: center;
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 {
@ -129,8 +154,11 @@
padding: 10px; padding: 10px;
border-bottom: 2px solid #EBEAF2; border-bottom: 2px solid #EBEAF2;
background-color: #ffffff; background-color: #ffffff;
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 {
@ -139,7 +167,7 @@
border: #ced4da; border: #ced4da;
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 30px; border-radius: 50%;
} }
.active-pgbtn { .active-pgbtn {
@ -147,11 +175,17 @@
border: 1px solid #00230007; border: 1px solid #00230007;
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 30px; border-radius: 50%;
} }
.filterbutton { .filterbutton {
background-color: #f4f4f4; background: #FFFFFF;
border: 1px solid #DBDBDB;
box-shadow: 0px 0px 10px rgba(187, 187, 187, 0.25);
gap:'20px'
} }
.dropdown-item { .dropdown-item {
@ -324,3 +358,22 @@ 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;
}

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

@ -284,86 +284,118 @@ const InvoiceTable = ({ reloadData }) => {
return ( return (
<div> <div>
<div <div>
style={{
display: "flex", <div
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",
flexDirection: "column", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "center",
width: "400px", marginBottom:"20px"
textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> {/* Invoice due this month */}
$500 <div
</p> style={{
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> backgroundColor: "#fff8e6",
Invoice due this month border: "1px solid #ffd700",
</p> 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"
}}
>
$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"}}>
@ -373,7 +405,7 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="input-group flexiblesearch" className="input-group flexiblesearch"
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ height: "40px", 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"
@ -475,10 +507,8 @@ const InvoiceTable = ({ reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", width: "40px",
backgroundColor: "#f4f4f4", height: "40px",
width: "130px",
height: "50px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -495,6 +525,7 @@ 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",
@ -505,7 +536,7 @@ const InvoiceTable = ({ reloadData }) => {
}} }}
> >
<FilterButton /> <FilterButton />
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -620,11 +651,13 @@ 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",
@ -641,7 +674,7 @@ const InvoiceTable = ({ reloadData }) => {
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
textAlign: "start", textAlign: "center",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26', backgroundColor:'#282e26',
color:'#ffffff' color:'#ffffff'
@ -676,18 +709,24 @@ const InvoiceTable = ({ reloadData }) => {
.join(" ")} .join(" ")}
</span> </span>
</td> </td>
<td> <td
<span style={getStatusStyle(invoice.status)}> style={{
{invoice.status
.replace(/_/g, " ")
.split(" ") }}
.map(
(word) => >
word.charAt(0).toUpperCase() + word.slice(1) <span style={getStatusStyle(invoice.status)}>
) {invoice.status
.join(" ")} .replace(/_/g, " ")
</span> .split(" ")
</td> .map(
(word) => word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</span>
</td>
<td> <td>
<div className="dropdown"> <div className="dropdown">
<button <button
@ -740,12 +779,13 @@ const InvoiceTable = ({ reloadData }) => {
)} )}
</tbody> </tbody>
</table> </table>
{renderPagination()}
</div> </div>
</div> // </div>
{renderPagination()}
</div> // </div>
); );
}; };
@ -769,44 +809,75 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
All: { draft: {
backgroundColor: "#4545DB", backgroundColor: "#D1D1EF",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
}, width: "130px", // Fixed width
paid: { height: "30px", // Fixed height
backgroundColor: "#198f51", fontSize: "14px",
width: "130px", // Set a fixed width textAlign: "center",
height: "30px", // Set a fixed height display: "flex",
fontSize:"14px" justifyContent: "center",
alignItems: "center",
}, },
unpaid: { unpaid: {
backgroundColor: "#ff2024", backgroundColor: "#ff2024",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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", width: "150px", height: "40px" }), // Default style ...(statusStyles[status] || { backgroundColor: "#198f51" }),
width: "130px", // Ensure consistent fixed width
height: "30px", // Ensure consistent fixed height
borderRadius: "5px", borderRadius: "5px",
padding: "5px 20px", padding: "5px 10px",
textAlign: "center", textAlign: "center",
display: "flex", // Use flexbox for alignment display: "flex", // Flexbox for alignment
justifyContent: "center", // Center horizontally justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically alignItems: "center", // Center vertically
color: "#fff", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",

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

@ -48,7 +48,7 @@ function PayInvoice() {
date: "", date: "",
status: "paid", status: "paid",
pay_method_status: "pay_now", pay_method_status: "pay_now",
pay_method: "", pay_method: "cash",
amount: "", amount: "",
remaining_amount: "", // Initialize as empty string or 0 remaining_amount: "", // Initialize as empty string or 0
discount: 0, discount: 0,
@ -306,26 +306,28 @@ function PayInvoice() {
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Bill/Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Bill/Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
</div> </div>
</div> </div>
<div className="formcontainer"> <div className="formcontainer">
@ -342,8 +344,16 @@ function PayInvoice() {
</div> </div>
<div className="col-md-12 row" style={{ gap: "15%" }}> <div
<div className="mb-3 col-md-2" > className="col-md-12 row"
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"
@ -355,16 +365,16 @@ function PayInvoice() {
<div className="mb-3 col-md-3"> <div className="mb-3 col-md-3">
<select <select
className="form-control-borderless" className="input-select"
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(); // Modal ko open karne ke liye function handleShow(); // Function to open modal
setFormData((prevData) => ({ setFormData((prevData) => ({
...prevData, ...prevData,
vendor_department: "", // Field ko reset karne ke liye vendor_department: "", // Reset the field
})); }));
} else { } else {
handleChange(e); // Existing handler for normal options handleChange(e); // Existing handler for normal options
@ -373,6 +383,7 @@ 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
@ -393,25 +404,11 @@ 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 mt-3" style={{gap:"70px"}} >
<div className="col-md-3"> <div className="mb-3 col-md-12 row mt-3" style={{ gap: "56px", marginLeft: "2%" }} >
<div className="col-md-3 " >
<input <input
name="amount" name="amount"
type="text" type="text"
@ -422,7 +419,7 @@ function PayInvoice() {
style={{ backgroundColor: "#fafafa" }} style={{ backgroundColor: "#fafafa" }}
/> />
</div> </div>
<div className="col-md-2"> <div className="col-md-2" >
<input <input
type="text" type="text"
@ -481,8 +478,8 @@ function PayInvoice() {
{/* <div className="col-md-3 mt-4"> {/* <div className="col-md-3 mt-4">
<input <input
name="after_discount" name="after_discount"
type="text" type="text"
@ -495,48 +492,50 @@ function PayInvoice() {
</div> */} </div> */}
</div>
<div className="md-col-12 ">
<div
className="d-flex align-items-center"
style={{
border: '2px solid #ACB4AA',
padding: '2px 20px', // Same left and right padding
width: 'fit-content',
borderRadius: '40px',
}}
>
{['cash', 'cheque', 'bank'].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 className="col-md-12 mt-3" >
<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 className="col-md-12 mt-4" style={{ marginLeft: "40px" }} >
{formData.pay_method === "cheque" && ( {formData.pay_method === "cheque" && (
<div className="row "> {/* Use row class for Bootstrap grid */} <div className="row "> {/* Use row class for Bootstrap grid */}
@ -571,16 +570,7 @@ function PayInvoice() {
</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">
@ -625,16 +615,16 @@ function PayInvoice() {
</div> </div>
)} )}
</div> </div>
<div className="d-flex justify-content-end"> <div 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={{ border: " 1px solid #282e26", borderRadius: '20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px', borderRadius: '40px', width: "181px", height: "45px" }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '40px', width: "181px", height: "45px" }}>
Save Save
</button> </button>
</div> </div>

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

@ -312,13 +312,15 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return ( return (
<div> <div>
<ToastContainer /> <ToastContainer />
<div
<div
style={{ style={{
display: "flex", display: "flex",
gap: "16px", gap: "50px",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
margin: "20px", marginBottom:"20px"
}} }}
> >
{/* Invoice due this month */} {/* Invoice due this month */}
@ -326,20 +328,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{ style={{
backgroundColor: "#fff8e6", backgroundColor: "#fff8e6",
border: "1px solid #ffd700", border: "1px solid #ffd700",
borderRadius: "8px", borderRadius: "20px",
padding: "16px 24px", padding: "24px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "center", justifyContent: "center",
alignItems: "flex-start", alignItems: "flex-start",
width: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$500 $500
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Invoice due this month Invoice due this month
</p> </p>
</div> </div>
@ -349,20 +361,30 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{ style={{
backgroundColor: "#e6ffee", backgroundColor: "#e6ffee",
border: "1px solid #00b300", border: "1px solid #00b300",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "385px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
$19,864,63,521 style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: "48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$19,521
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 0" }}>
Last 7 days sale Last 7 days sale
</p> </p>
</div> </div>
@ -372,33 +394,42 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{ style={{
backgroundColor: "#ffe6e6", backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d", border: "1px solid #ff4d4d",
borderRadius: "8px", borderRadius: "20px",
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: "400px", width: "390px",
height: "130px",
textAlign: "left", textAlign: "left",
}} }}
> >
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}> <p
style={{
fontFamily: "Comfortaa",
fontStyle: "normal",
fontWeight: 700,
fontSize: " 48px",
lineHeight: "27px",
marginTop:"20px"
}}
>
$0.00 $0.00
</p> </p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}> <p style={{ fontSize: "24px", color: "#000", margin: "0px 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: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }} style={{ width: "300px", height: "40px", 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"
@ -495,10 +526,10 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
<div <div
className="filterbutton" className="filterbutton"
style={{ style={{
marginLeft: "10px", // marginLeft: "10px",
backgroundColor: "#f4f4f4",
width: "130px", width: "40px",
height: "50px", height: "40px",
borderRadius: "60px", borderRadius: "60px",
padding: "15px", padding: "15px",
display: "flex", display: "flex",
@ -516,6 +547,7 @@ 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",
@ -561,7 +593,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
&nbsp; Filter &nbsp;
</button> </button>
<ul <ul
@ -649,7 +681,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" }}
@ -673,13 +705,24 @@ 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",
@ -692,8 +735,9 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
cursor: "pointer", cursor: "pointer",
backgroundColor: '#282e26', backgroundColor: '#282e26',
color: '#ffffff', color: '#ffffff',
textAlign: "start", textAlign: "center",
alignContent: "center", alignContent: "center",
// Add a border for separation
}} }}
> >
{header {header
@ -705,6 +749,7 @@ 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"
@ -752,9 +797,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 &&
@ -768,7 +813,9 @@ 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
@ -866,43 +913,71 @@ const getPaymentMethodStyle = (method) => ({
}); });
const statusStyles = { const statusStyles = {
All: { draft: {
backgroundColor: "#4545DB", backgroundColor: "#D1D1EF",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" padding: "5px 10px",
}, width: "130px", // Fixed width
paid: { height: "30px", // Fixed height
backgroundColor: "#198f51", fontSize: "14px",
width: "130px", // Set a fixed width textAlign: "center",
height: "30px", // Set a fixed height display: "flex",
fontSize:"14px" justifyContent: "center",
alignItems: "center",
}, },
unpaid: { unpaid: {
backgroundColor: "#ff2024", backgroundColor: "#ff2024",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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: { partially_paid: {
backgroundColor: "#0c8ce9", backgroundColor: "#0c8ce9",
width: "130px", // Set a fixed width color: "#fff",
height: "30px", // Set a fixed height borderRadius: "5px",
fontSize:"14px" 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", width: "150px", height: "40px" }), // Default style ...(statusStyles[status] || { backgroundColor: "#198f51" }),
width: "130px", // Ensure consistent fixed width
height: "30px", // Ensure consistent fixed height
borderRadius: "5px", borderRadius: "5px",
padding: "5px 20px", padding: "5px 10px",
textAlign: "center",
display: "flex", // Use flexbox for alignment
justifyContent: "center", // Center horizontally
alignItems: "center", // Center vertically
color: "#fff", color: "#fff",
}); });
const getCountClass = (status) => ({ const getCountClass = (status) => ({
...statusStyles[status], ...statusStyles[status],
padding: "10px", padding: "10px",