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

Merge pull request '2112__sonali' (#2) from 2112__sonali into main 

Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/2
main
Sonali 2024-12-23 11:43:15 +00:00
parent 33ff3d5cc7 ff36597ef7
commit 8b759c3fb3
26 changed files with 1729 additions and 1078 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<!-- 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="theme-color" content="#000000" />
<meta name="description" content="" />
@ -28,10 +28,17 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style>
body {
background-color: #E9ECFF;
font-family: Manrope;
}
body {
background-color: #f9fff6;
background-image: url('../src/assets/Image/Pattern.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: overlay;
font-family: Manrope;
}
@media (min-width: 768px) {
.hideonmobile {
@ -53,7 +60,7 @@
}
</style>
<title>Ezhisab</title>
<title>PaisaVara</title>
</head>
<body>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 227 KiB

BIN
src/assets/Image/expenses type .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

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

@ -128,6 +128,7 @@ body {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
@ -135,6 +136,7 @@ body {
.nav-item {
margin: 0 15px;
position: relative;
display: flex;
align-items: center;
}
@ -142,6 +144,7 @@ body {
font-family: "Manrope";
font-size: 18px !important;
color: #002300;
text-decoration: none;
}
.nav-link:hover {
@ -226,7 +229,7 @@ body {
display: flex;
align-items: center;
position: relative;
gap:120px;
gap:10px;
}
.avatar {
@ -293,14 +296,16 @@ body {
}
.nav-menu-drop {
white-space: nowrap; /* Prevent wrapping */
}
.nav-menu-drop {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 80%;
position: absolute;
/* margin-left: 140px; */
top: 100%; /* Positions dropdown below the parent */
left: 0;
background-color: #FFFFFF;
@ -318,7 +323,7 @@ body {
color: #002300;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
display: block;
width: auto;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
@ -356,11 +361,14 @@ body {
display: block;
margin-bottom: 10px;
width: 100%;
}
/* Grid system */
.row {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.col-2 {
flex: 0 0 16.6667%;
@ -495,7 +503,7 @@ body {
box-sizing: border-box;
}
.search-container input::placeholder {
color: #a9a9a9;
color: #ffffff;
}
.search-container input:focus {
outline: none;
@ -621,10 +629,16 @@ body {
height: 18px;
background-color: #4545db;
border-color: #4545db;
border-radius: 50%;
}
.form-check-input[type="radio"] {
border-radius: 50%;
}
.form-check-input[type=checkbox] {
border-radius: 50%;
}
.filter-button {
background-color: transparent;
border: none;
@ -711,12 +725,13 @@ h3 {
padding: 8px 12px;
font-size: 16px;
border: none;
border-radius: 60px;
background-color: #007bff;
color: white;
border-radius: 10px;
background-color: #FFAF32;
color: rgb(0, 0, 0);
cursor: pointer;
transition: background-color 0.3s;
/* transition: background-color 0.3s; */
}
.expense-searchcontainerstart {
width: 90%;
}

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

@ -4,6 +4,7 @@
import React, { useEffect, useState } from "react";
import "./Invoice.css";
import Swal from "sweetalert2";
import { DatePicker } from "antd";
import { toast } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi";
@ -18,15 +19,20 @@ const ATMDepositTable = (props) => {
const [vendors, setVendors] = useState([]);
const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState("");
const [dateRange, setDateRange] = useState([]);
const { Get, Delete } = useApi();
function filterByTransactionType(dataArray, transactionType) {
return dataArray.filter(record => record.transaction_type === transactionType);
}
}
useEffect(() => {
const fetchInvoices = async () => {
await Get("transactionData")
.then((response) => {
let type = (props.transaction_type)?props.transaction_type:"Bank Deposit";
let type = (props.transaction_type) ? props.transaction_type : "Bank Deposit";
setInvoices(filterByTransactionType(response, type));
const uniqueVendors = [
...new Set(response.map((invoice) => invoice.vendor_department_name)),
@ -39,31 +45,39 @@ const ATMDepositTable = (props) => {
};
fetchInvoices();
}, [props.reloadData]);
useEffect(() => {
let filteredInvoices = invoices;
// Filter by date range
if (dateRange.length === 2) {
const [start, end] = dateRange;
filteredInvoices = filteredInvoices.filter((invoice) => {
const invoiceDate = new Date(invoice.date);
return invoiceDate >= start && invoiceDate <= end;
});
}
setInvoices(filteredInvoices);
}, [dateRange, invoices]);
const applyFilters = () => {
let filteredInvoices = invoices;
// Apply status filter
if (selectedStatus !== "All") {
filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.status === selectedStatus
);
}
// Apply vendor filter
if (selectedVendor) {
filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.vendor_department_name === selectedVendor
);
}
if (fromDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) >= new Date(fromDate)
);
}
if (toDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) <= new Date(toDate)
);
}
setInvoices(filteredInvoices);
};
@ -118,37 +132,37 @@ const ATMDepositTable = (props) => {
};
const handleDelete = async (id) => {
const result = await Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!",
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!",
});
// Check if the user clicked the confirm button
if (!result.isConfirmed) return; // Exit if the user cancels
try {
await Delete(`transactionData`, id);
await Delete(`transactionData`, id);
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
setInvoices(updatedInvoices);
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
setInvoices(updatedInvoices);
// Show success notification
toast.success("Invoice successfully deleted!");
// Show success notification
toast.success("Invoice successfully deleted!");
} catch (error) {
if (error.response) {
toast.error(`Error deleting invoice: ${error.response.data}`);
toast.error(`Status code: ${error.response.status}`);
} else if (error.request) {
toast.error("No response received");
} else {
toast.error(`Error setting up request: ${error.message}`);
}
if (error.response) {
toast.error(`Error deleting invoice: ${error.response.data}`);
toast.error(`Status code: ${error.response.status}`);
} else if (error.request) {
toast.error("No response received");
} else {
toast.error(`Error setting up request: ${error.message}`);
}
}
};
};
const handleEdit = (invoice) => {
@ -250,7 +264,7 @@ const ATMDepositTable = (props) => {
return (
<div className="pagination">
<button
{/* <button
className="pgbtn"
onClick={handlePrevPage}
disabled={currentPage === 1}
@ -264,11 +278,11 @@ const ATMDepositTable = (props) => {
>
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg>
</button>
</button> */}
{paginationItems}
<button
{/* <button
className="pgbtn"
onClick={handleNextPage}
disabled={currentPage === totalPages}
@ -282,19 +296,99 @@ const ATMDepositTable = (props) => {
>
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg>
</button>
</button> */}
</div>
);
};
return (
<div>
<div className="d-flex justify-content-between align-items-center mb-3">
<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
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 className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
{/* Search Bar */}
<div className="searchcontainer">
<div
className="input-group"
style={{ width: "300px", height: "50px" }}
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
@ -333,8 +427,8 @@ const ATMDepositTable = (props) => {
</div>
</div>
<div className="d-flex align-items-center">
<div
<div className="d-flex align-items-center">
{/* <div
className="filtercontainer"
style={{
backgroundColor: "#f4f4f4",
@ -384,7 +478,7 @@ const ATMDepositTable = (props) => {
</span>
</button>
))}
</div>
</div> */}
<div
className="filterbutton"
@ -470,7 +564,7 @@ const ATMDepositTable = (props) => {
}}
>
<li>
<div className="mb-2">
<div className="mb-2">
<select
id="selectStatus"
className="form-select"
@ -510,7 +604,7 @@ const ATMDepositTable = (props) => {
className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }}
>
<div className="col-5">
{/* <div className="col-5">
<input
style={{
borderRadius: "60px",
@ -537,7 +631,7 @@ const ATMDepositTable = (props) => {
value={toDate}
onChange={(e) => setToDate(e.target.value)}
/>
</div>
</div> */}
</div>
</li>
<li className="text-center mt-2">
@ -552,14 +646,21 @@ const ATMDepositTable = (props) => {
</ul>
</div>
</div>
{/* Date Filters using Ant Design RangePicker */}
<div>
<DatePicker.RangePicker
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
onChange={(dates) => setDateRange(dates || [])} // Handle null case
format="YYYY-MM-DD"
/>
</div>
</div>
{/* Table of Invoices */}
<table className="table table-borderless table-responsive">
<thead>
<tr>
{["date", "bank_deposite_type", "amount","Transaction Type", "actions"].map(
{["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
(header, index) => (
<th
key={header}
@ -567,12 +668,10 @@ const ATMDepositTable = (props) => {
style={{
paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0",
borderBottomLeftRadius: index === 0 ? "60px" : "0",
borderTopRightRadius: index === 4 ? "60px" : "0",
borderBottomRightRadius: index === 4 ? "60px" : "0",
textAlign: "start",
alignContent: "center",
backgroundColor:'#282e26',
color:'#ffffff'
}}
>
{header
@ -610,49 +709,49 @@ const ATMDepositTable = (props) => {
</tr>
</thead>
<tbody style={{ textAlign: "center" }}>
{currentInvoices.length !== 0?
{currentInvoices.length !== 0 ?
currentInvoices.map((invoice) => (
<tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.date}
</td>
<tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.date}
</td>
<td style={{ cursor: "pointer", textAlign: "left" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
<td style={{ cursor: "pointer", textAlign: "left" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() +
invoice.bank_deposite_type.slice(1)
: "N/A"}
</span>
</td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}>
<span style={getStatusStyle(invoice.transaction_type)}>
: "N/A"}
</span>
</td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}>
<span style={getStatusStyle(invoice.transaction_type)}>
{invoice.transaction_type ?
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
'N/A'}
</span>
</td>
<td>
<div className="dropdown">
<button
className="btn btn-sm btn-outline-secondary dropdown-vertical "
type="button"
id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
data-bs-toggle="dropdown"
aria-expanded="false"
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
'N/A'}
</span>
</td>
<td>
<div className="dropdown">
<button
className="btn btn-sm btn-outline-secondary dropdown-vertical "
type="button"
id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i
className="bi bi-three-dots"
style={{ transform: "rotate(90deg)", display: "block" }}
></i>
</button>
<ul
className="dropdown-menu"
aria-labelledby={`actionDropdown-${invoice.id}`}
>
{/* <li>
>
<i
className="bi bi-three-dots"
style={{ transform: "rotate(90deg)", display: "block" }}
></i>
</button>
<ul
className="dropdown-menu"
aria-labelledby={`actionDropdown-${invoice.id}`}
>
{/* <li>
<a
className="dropdown-item"
onClick={() => handleEdit(invoice)}
@ -660,34 +759,34 @@ const ATMDepositTable = (props) => {
Edit
</a>
</li> */}
<li>
<a
className="dropdown-item"
onClick={() => handleDelete(invoice.id)}
>
Delete
</a>
</li>
</ul>
</div>
</td>
</tr>
))
<li>
<a
className="dropdown-item"
onClick={() => handleDelete(invoice.id)}
>
Delete
</a>
</li>
</ul>
</div>
</td>
</tr>
))
:(
<tr>
<td colSpan="7" style={{
textAlign: "center", fontFamily: 'Manrope',
fontWeight: '600',
fontSize: '40px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}>
No data found
</td>
</tr>
)
: (
<tr>
<td colSpan="7" style={{
textAlign: "center", fontFamily: 'Manrope',
fontWeight: '600',
fontSize: '40px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}>
No data found
</td>
</tr>
)
}
</tbody>
</table>
@ -720,8 +819,8 @@ const getPaymentMethodStyle = (method) => ({
const statusStyles = {
All: { backgroundColor: "#4545DB" },
"Business cash": { backgroundColor: "#38400B" },
"Lottery cash": { backgroundColor: "#CAC59D" },
"Gas cash": { backgroundColor: "#57A09C" },
"Lottery cash": { backgroundColor: "#CAC59D" },
"Gas cash": { backgroundColor: "#57A09C" },
};
const getStatusStyle = (status) => ({

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

@ -9,6 +9,8 @@ import TableComponent from "./InvoiceTable";
import useApi from "../../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../../../../utils/secure-route/AuthContext";
import AddVendorModal from "../../ReusableForm/AddVendorModal";
import { colors } from "@mui/material";
import { Space } from "antd";
function AddInvoice() {
const { Get, Post } = useApi();
@ -269,7 +271,7 @@ function AddInvoice() {
},
{
row: 1,
column: "col-md-5",
column: "col-md-4",
label: "Vendor",
type: "select-vendor",
name: "vendor_department_name",
@ -278,7 +280,7 @@ function AddInvoice() {
},
{
row: 1,
column: "col-md-5",
column: "col-md-2",
label: "Invoice Number",
type: "invoice_no",
name: "invoice_no",
@ -286,9 +288,18 @@ function AddInvoice() {
},
{
row: 2,
column: "col-md-12",
column: "col-md-3",
label: "Amount",
name: "amount",
type: "prefix-input",
placeholder: "Amount",
// prefixText: "USD",
},
{
row: 2,
column: "col-md-5",
name: "pay_method_status",
label: "Payment Method:",
// label: "Payment Method:",
type: "radio",
options: [
{ value: "pay_later", label: "Pay Later" },
@ -297,20 +308,20 @@ function AddInvoice() {
],
},
{
row: 3,
column: "col-md-12",
row: 4,
column: "col-md-6",
label: "Payment Method Options",
type: "payment-method-options",
},
{
row: 4,
column: "col-md-12",
column: "col-md-6",
label: "Payment Method Options",
type: "pay-bank-options",
},
{
row: 4,
column: "col-md-6",
row: 5,
column: "col-md-3",
label: "Due Days",
type: "select-dueDays",
name: "due_days",
@ -320,14 +331,14 @@ function AddInvoice() {
// The "Notes" field is conditionally rendered based on pay_method_status
...(formData.pay_method_status !== "pay_now"
? [
{
row: 5,
column: "col-md-6",
label: "Notes",
type: "text",
name: "note",
placeholder: "Notes",
},
// {
// row: 5,
// column: "col-md-6",
// label: "Notes",
// type: "text",
// name: "note",
// placeholder: "Notes",
// },
]
: []),
{
@ -337,15 +348,7 @@ function AddInvoice() {
type: "checkbox",
name: "prepaid_tax",
},
{
row: 6,
column: "col-md-6",
label: "Amount",
name: "amount",
type: "prefix-input",
placeholder: "Amount",
prefixText: "USD",
},
];
const paymentMethodOptions = [
@ -382,7 +385,7 @@ function AddInvoice() {
setIsOpen(false); // Close the dropdown after clicking a link
navigate(path); // Navigate to the clicked path
};
const renderField = (field) => {
@ -447,15 +450,16 @@ function AddInvoice() {
borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px",
height: "50px",
}}
>
<div className="input-group">
<span className="input-group-text" style={{ border: "none" }}>
<div className="input-groups">
{/* <span className="input-group-text" style={{ border: "none" }}>
{field.prefixText}
</span>
</span> */}
<input
type="text" // Set input type to 'text' to allow decimals
style={{ border: "none" }}
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
className="form-control-borderless"
name={field.name}
placeholder={field.placeholder}
@ -578,54 +582,69 @@ function AddInvoice() {
)
);
case "radio":
return (
<div className="form-group d-flex">
<label className="me-4">{field.label}</label>
{field.options.map((option, index) => (
<div key={index} className="form-check me-4">
{" "}
<input
type="radio"
className="form-check-input"
name={field.name}
value={option.value}
checked={formData[field.name] === option.value}
onChange={handlePaymentMethodChange}
/>
<label className="form-check-label">{option.label}</label>
</div>
))}
</div>
);
case "payment-method-options":
return (
formData.pay_method_status === "pay_now" && (
<div className="form-group d-flex">
{/* Align items vertically */}
<label className="me-4">Payment Method Options:</label>{" "}
{/* Extra space after the main label */}
{paymentMethodOptions.map((option, index) => (
<div key={index} className="form-check me-4">
{" "}
{/* Space between options */}
<input
type="radio"
className="form-check-input"
name="pay_method"
value={option.value}
checked={formData.pay_method === option.value}
onChange={handleChange}
/>
<label className="form-check-label">{option.label}</label>{" "}
{/* Space between radio and label */}
case "radio":
return (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
<label className="me-4">{field.label}</label>
{field.options.map((option, index) => (
<div
key={index}
className="form-check me-4"
style={{
cursor: 'pointer',
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
padding: '5px 15px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
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>
)
);
);
case "payment-method-options":
return (
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' }}>
{paymentMethodOptions.map((option, index) => (
<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={{
fontWeight: 'normal',
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
}}
>
{option.label}
</label>
</div>
))}
</div>
)
);
case "checkbox":
return (
<div className="form-check">
@ -640,47 +659,47 @@ function AddInvoice() {
</div>
);
case "pay-bank-options":
return (
(formData.pay_method === "cheque" ||
formData.pay_method === "bank") && (
<div className="row mb-3">
<div className="col-md-6">
<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" && ( // Only show this if pay_method is cheque
<div className="col-md-6">
case "pay-bank-options":
return (
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
<div className="row align-items-center">
<div className="col-md-4">
<div className="form-group">
<input
<select
required
type="text"
className="form-control-borderless"
name="cheque_no"
placeholder="Enter Cheque Number"
value={formData.cheque_no}
name="bank"
value={formData.bank}
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 className="col-md-12">
{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="form-group">
<input
className="form-control-borderless"
@ -690,7 +709,9 @@ function AddInvoice() {
onChange={handleChange}
/>
</div>
</div>
</div>
)
);
@ -702,117 +723,127 @@ function AddInvoice() {
return (
<div className="dashboard-container">
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
</div>
</div>
</div>
<div className="formcontainer">
<div className="formcontainer">
<div
className="container"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px"
}}
>
<form onSubmit={handleSubmit}>
{/* Render Fields */}
{Object.keys(groupedFields).map((rowKey) => (
<div className="row mb-3" key={rowKey}>
{groupedFields[rowKey].map((field, index) => (
<div key={index} className={field.column}>
{renderField(field)}
</div>
))}
</div>
))}
{/* Prepaid Tax Field */}
{formData.prepaid_tax && (
<div className="row mb-3">
<div className="col-md-6">
<div className="form-group">
{/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
<input
type="text"
className="form-control-borderless"
name="prepaid_amount"
id="prepaid_amount"
placeholder="Enter Prepaid Tax"
value={formData.prepaid_amount}
onChange={handleChange}
onInput={(e) => {
// Allow only numbers and one 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') // Ensure only two decimal places
.slice(0, 12); // Limit input length
}}
/>
</div>
</div>
</div>
)}
<div className="">
{/* Action Buttons */}
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save
</button>
</div>
</div>
</form>
</div>
</div>
<ToastContainer />
<div
className="container"
className="container mt-5"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}}
>
<form onSubmit={handleSubmit}>
<div className="">
{/* Action Buttons */}
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
>
Cancel
</button>
<button type="submit" className="btn btn-primary">
Save
</button>
</div>
</div>
{/* Render Fields */}
{Object.keys(groupedFields).map((rowKey) => (
<div className="row mb-3" key={rowKey}>
{groupedFields[rowKey].map((field, index) => (
<div key={index} className={field.column}>
{renderField(field)}
</div>
))}
</div>
))}
{/* Prepaid Tax Field */}
{formData.prepaid_tax && (
<div className="row mb-3">
<div className="col-md-6">
<div className="form-group">
<label htmlFor="prepaid_amount">Prepaid Tax</label>
<input
type="text"
className="form-control-borderless"
name="prepaid_amount"
id="prepaid_amount"
placeholder="Enter Prepaid Tax"
value={formData.prepaid_amount}
onChange={handleChange}
onInput={(e) => {
// Allow only numbers and one 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') // Ensure only two decimal places
.slice(0, 12); // Limit input length
}}
/>
</div>
</div>
</div>
)}
</form>
<TableComponent reloadData={reloadData} />
<AddVendorModal
show={showModal}
handleClose={handleClose}
onVendorAdded={handleVendorAdded}
/>
</div>
</div>
<ToastContainer />
<div
className="container mt-5"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}}
>
<TableComponent reloadData={reloadData} />
<AddVendorModal
show={showModal}
handleClose={handleClose}
onVendorAdded={handleVendorAdded}
/>
</div>
</div>
);
);
}
export default AddInvoice;

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

@ -17,13 +17,13 @@ function AtmDeposit() {
const navigate = useNavigate();
const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
const [activeButton, setActiveButton] = useState('');
const location = useLocation();
useEffect(() => {
setActiveButton(location.pathname); // Set the active button based on the current location
}, [location.pathname]);
const [activeButton, setActiveButton] = useState('');
const location = useLocation();
useEffect(() => {
setActiveButton(location.pathname); // Set the active button based on the current location
}, [location.pathname]);
const [isOpen, setIsOpen] = useState(false);
const [banks, setBanks] = useState([]);
@ -148,61 +148,47 @@ function AtmDeposit() {
<div className="dashboard-container">
<ToastContainer />
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
</div>
</div>
</div>
<div className="formcontainer">
<div
className="container"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px"
}}
>
<form onSubmit={handleSubmit}>
<div className="">
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
>
Cancel
</button>
<button type="submit" className="btn btn-primary">
Save
</button>
</div>
</div>
<div className="col-md-12 row mb-3">
<div className="mb-3 col-md-4">
<div className=" col-md-12 row mb-3">
<div className="col-md-4 mb-3">
<input
type="date"
className="form-control-borderless"
@ -212,6 +198,44 @@ function AtmDeposit() {
required
/>
</div>
<div className="col-md-3 mb-3">
<select
className="form-select custom-select"
id="bank_deposite_type"
name="bank_deposite_type"
value={formData.bank_deposite_type}
onChange={handleChange}
>
<option value="">Select a type</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div>
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
<div className="input-group" style={{ width: "100%" }}>
{/* <span className="input-group-text" style={{ border: "none" }}>
USD
</span> */}
<input
type="number"
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
className="form-control-borderless"
name="cash_amount"
placeholder="Amount"
value={formData.cash_amount}
onChange={handleChange}
onInput={(e) => {
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
}}
/>
</div>
</div>
<div className="mb-3 col-md-4">
<input
@ -225,31 +249,9 @@ function AtmDeposit() {
</div>
</div>
<div className="col-md-12 row">
<div className="mb-3 col-md-12" style={{ marginLeft: "10px" }}>
<div className="d-flex flex-row">
Type: &nbsp;&nbsp;&nbsp;&nbsp;
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<div className="form-check me-3" key={type}>
<input
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-3 row">
{/* <div className="mb-3 mt-2 col-md-4 ">
<select
className="form-control-borderless"
@ -267,37 +269,22 @@ function AtmDeposit() {
</select>
</div> */}
</div>
<div
className="form-group col-md-5 mt-3"
style={{
display: "flex",
alignItems: "center",
borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px",
height: "50px",
}}
>
<div className="input-group">
<span className="input-group-text" style={{ border: "none" }}>
USD
</span>
<input
type="number"
style={{ border: "none" }}
className="form-control-borderless"
name="cash_amount"
placeholder="Amount"
value={formData.cash_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 className="">
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save
</button>
</div>
</div>
</form>
@ -310,7 +297,7 @@ function AtmDeposit() {
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}}
>
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData}/>
<ATMDepositTable transaction_type="ATM Deposit" reloadData={reloadData} />
</div>
</div>
);

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

@ -14,13 +14,13 @@ function BankDeposit() {
const { Get, Post } = useApi();
const storeid = user.store;
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 [isOpen, setIsOpen] = useState(false);
const [reloadData, setReloadData] = useState(false);
const location = useLocation();
const location = useLocation();
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]);
const dropdownRef = useRef(null);
@ -156,57 +156,46 @@ function BankDeposit() {
<div className="dashboard-container">
<ToastContainer />
<div className="d-flex justify-content-between mb-4">
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
</div>
</div>
<div className="button-groups">
<button
className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')}
>
Add Invoice
</button>
<button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')}
>
Pay Invoice
</button>
<button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')}
>
Bank Deposit
</button>
<button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')}
>
ATM Deposit
</button>
</div>
</div>
<div className="formcontainer">
<div
className="container"
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px"
}}
>
<form onSubmit={handleSubmit}>
<div className="">
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
>
Cancel
</button>
<button type="submit" className="btn btn-primary">
Save
</button>
</div>
</div>
<div className="col-md-12 row mb-3">
<div className="mb-3 col-md-4">
@ -235,93 +224,73 @@ function BankDeposit() {
))}
</select>
</div>
<div className="mb-3 col-md-4">
<input
type="text"
className="form-control-borderless"
name="note"
value={formData.note}
<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}
placeholder="Notes"
/>
</div>
</div>
<div className="col-md-12 row">
<div className="mb-3 col-md-12">
<div className="d-flex flex-row">
Type:&nbsp; &nbsp; &nbsp;
>
<option value="" enable>
Select a type
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<div className="form-check me-3" key={type}>
<input
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>
<option key={type} value={type}>
{type}
</option>
))}
</div>
</select>
</div>
<div className="col-md-12 row mt-4">
<div
className="col-md-12"
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing
}}
>
<div
className="form-group col-md-5"
className="form-group "
style={{
display: "flex",
alignItems: "center",
borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px",
borderBottom: "2px solid #e4e5e7",
height: "50px",
marginLeft: "10px"
flex: "1", // Allow the field to adjust in size
}}
>
<div className="input-group">
<span className="input-group-text" style={{ border: "none" }}>
USD
</span>
<input
type="text" // Change to text because we want to handle the regex validation manually
style={{ border: "none" }}
type="text"
style={{ border: "none", width: "100%" }}
className="form-control-borderless"
name="cash_amount"
placeholder="Cash Amount"
value={formData.cash_amount || ""}
onChange={handleChange}
maxLength={10} // Limit input to 10 digits
maxLength={10}
/>
</div>
</div>
<div
className="form-group col-md-5"
className="form-group "
style={{
display: "flex",
alignItems: "center",
borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px",
borderBottom: "2px solid #e4e5e7",
height: "50px",
marginLeft: "10px"
flex: "1",
}}
>
<div className="input-group">
<span
className="input-group-text"
style={{ border: "none" }}
>
USD
</span>
<input
type="number"
style={{ border: "none" }}
style={{ border: "none", width: "100%" }}
className="form-control-borderless"
name="cheque_amount"
placeholder="Cheque Amount"
@ -330,8 +299,48 @@ function BankDeposit() {
/>
</div>
</div>
<div
className="form-group"
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
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 className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={() => navigate("/")}
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
>
Cancel
</button>
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save
</button>
</div>
</form>
</div>
</div>

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

@ -4,6 +4,7 @@
import React, { useEffect, useState } from "react";
import "./Invoice.css";
import Swal from "sweetalert2";
import { DatePicker } from "antd";
import { toast } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi";
@ -18,7 +19,8 @@ const BankDepositTable = (props) => {
const [vendors, setVendors] = useState([]);
const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState("");
const [dateRange, setDateRange] = useState([]);
const { RangePicker } = DatePicker;
const { Get, Delete } = useApi();
function filterByTransactionType(dataArray, transactionType) {
return dataArray.filter(record => record.transaction_type === transactionType);
@ -40,34 +42,47 @@ const BankDepositTable = (props) => {
};
fetchInvoices();
}, [props.reloadData]);
const applyFilters = () => {
useEffect(() => {
let filteredInvoices = invoices;
// Apply date range filter
if (dateRange.length === 2) {
const [start, end] = dateRange;
filteredInvoices = filteredInvoices.filter((invoice) => {
const invoiceDate = new Date(invoice.date);
return invoiceDate >= start && invoiceDate <= end;
});
}
// Apply other filters on top of date filtering
applyFilters(filteredInvoices);
}, [dateRange]);
const applyFilters = (filteredInvoices = invoices) => {
let updatedInvoices = filteredInvoices;
// Apply status filter
if (selectedStatus !== "All") {
filteredInvoices = filteredInvoices.filter(
updatedInvoices = updatedInvoices.filter(
(invoice) => invoice.bank_deposite_type === selectedStatus
);
}
// Apply vendor filter
if (selectedVendor) {
filteredInvoices = filteredInvoices.filter(
updatedInvoices = updatedInvoices.filter(
(invoice) => invoice.vendor_department_name === selectedVendor
);
}
if (fromDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) >= new Date(fromDate)
);
}
if (toDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) <= new Date(toDate)
);
}
setInvoices(filteredInvoices);
setInvoices(updatedInvoices);
};
// Update filters when status or vendor changes
useEffect(() => {
applyFilters();
}, [selectedStatus, selectedVendor]);
const handleSort = (column) => {
const direction =
sortOrder.column === column && sortOrder.direction === "asc"
@ -255,7 +270,7 @@ const BankDepositTable = (props) => {
return (
<div className="pagination">
<button
{/* <button
className="pgbtn"
onClick={handlePrevPage}
disabled={currentPage === 1}
@ -269,11 +284,11 @@ const BankDepositTable = (props) => {
>
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg>
</button>
</button> */}
{paginationItems}
<button
{/* <button
className="pgbtn"
onClick={handleNextPage}
disabled={currentPage === totalPages}
@ -287,19 +302,99 @@ const BankDepositTable = (props) => {
>
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg>
</button>
</button> */}
</div>
);
};
return (
<div>
<div className="d-flex justify-content-between align-items-center mb-3">
<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
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 className="d-flex align-items-center mb-3">
{/* Search Bar */}
<div className="searchcontainer">
<div
className="input-group"
style={{ width: "300px", height: "50px" }}
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
@ -339,7 +434,7 @@ const BankDepositTable = (props) => {
</div>
<div className="d-flex align-items-center">
<div
{/* <div
className="filtercontainer"
style={{
backgroundColor: "#f4f4f4",
@ -389,7 +484,7 @@ const BankDepositTable = (props) => {
</span>
</button>
))}
</div>
</div> */}
<div
className="filterbutton"
@ -511,7 +606,7 @@ const BankDepositTable = (props) => {
</div>
</li> */}
<li className="mt-2">
<div
{/* <div
className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }}
>
@ -543,7 +638,7 @@ const BankDepositTable = (props) => {
onChange={(e) => setToDate(e.target.value)}
/>
</div>
</div>
</div> */}
</li>
<li className="text-center mt-2">
<button
@ -557,6 +652,15 @@ const BankDepositTable = (props) => {
</ul>
</div>
</div>
<div>
<div>
<RangePicker
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
onChange={(dates) => setDateRange(dates || [])} // Handle null case
format="YYYY-MM-DD"
/>
</div>
</div>
</div>
{/* Table of Invoices */}
@ -571,10 +675,8 @@ const BankDepositTable = (props) => {
style={{
paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0",
borderBottomLeftRadius: index === 0 ? "60px" : "0",
borderTopRightRadius: index === 5 ? "60px" : "0",
borderBottomRightRadius: index === 5 ? "60px" : "0",
backgroundColor:'#282e26',
color:'#ffffff',
textAlign: "start",
alignContent: "center",
}}

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

@ -6,7 +6,7 @@
.container {
padding: 30px;
border-radius: 10px;
border-radius: 40px;
}
.dropdown-toggle::after {
@ -22,7 +22,7 @@
gap: 10px; /* Adjust the spacing between buttons */
background-color: #ffffff;
width: auto;
border-radius: 20px;
border-radius: 44px;
padding: 10px 50px;
@ -37,44 +37,10 @@
}
.dash-drop-menu {
white-space: nowrap; /* Prevent wrapping */
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%; /* Positions dropdown below the parent */
left: 0;
background-color: #FFFFFF;
border: 1px solid #F6F6F6;
z-index: 1000;
border-radius: 10px;
min-width: 190px; /* Optional minimum width */
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.dash-drop-menu-item {
padding: 10px 15px;
text-decoration: none;
color: #002300;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
display: block;
width: auto;
font-size: 16px;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
transition: none;
}
.dash-drop-menu-item:hover {
background-color: transparent; /* Prevent background change */
color: #002300; /* Maintain original text color */
cursor: default; /* Maintain default cursor */
}
.form-container {
width: 1328px;
height: 461px;
}
.form-group {
@ -128,7 +94,7 @@
.input-group .form-control {
border: none;
background-color: transparent;
/* background-color: transparent; */
outline: none; /* Removes the outline */
}
@ -344,3 +310,18 @@ input[type="color"]:focus,
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
}
}
/* style for dropdown --> select type in bank deposite and atm deposite */
.custom-select {
border: none; /* Remove default borders */
border-bottom: 2px solid #e4e5e7; /* Add a bottom border */
border-radius: 0; /* Remove border radius for a flat look */
outline: none; /* Remove the outline on focus */
padding: 0.375rem 0.75rem; /* Adjust padding if necessary */
}
.custom-select:focus {
border-bottom: 2px solid #e4e5e7; /* Change color on focus */
box-shadow: none; /* Remove any shadow */
}

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

@ -4,7 +4,7 @@
import React, { useEffect, useState } from "react";
import "./Invoice.css";
import Swal from "sweetalert2";
import { DatePicker } from "antd";
import { toast } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi";
import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
@ -23,6 +23,7 @@ const InvoiceTable = ({ reloadData }) => {
const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState("");
const [originalInvoices, setOriginalInvoices] = useState([]);
const [dateRange, setDateRange] = useState([]);
const [reloaData, setReloadData] = useState(false);
@ -53,6 +54,22 @@ const InvoiceTable = ({ reloadData }) => {
fetchInvoices();
}, [reloadData]);
useEffect(() => {
let filteredInvoices = originalInvoices;
// Filter by date range
if (dateRange.length === 2) {
const [start, end] = dateRange;
filteredInvoices = filteredInvoices.filter((invoice) => {
const invoiceDate = new Date(invoice.date);
return invoiceDate >= start && invoiceDate <= end;
});
}
setInvoices(filteredInvoices);
}, [dateRange, originalInvoices]);
const applyFilters = () => {
let filteredInvoices = originalInvoices;
@ -70,22 +87,10 @@ const InvoiceTable = ({ reloadData }) => {
);
}
// Apply date filters
if (fromDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) >= new Date(fromDate)
);
}
if (toDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) <= new Date(toDate)
);
}
// Update the state with filtered invoices
setInvoices(filteredInvoices);
};
const handleSort = (column) => {
const direction =
sortOrder.column === column && sortOrder.direction === "asc"
@ -279,15 +284,100 @@ const InvoiceTable = ({ reloadData }) => {
return (
<div>
<div className="d-flex justify-content-between align-items-center mb-3">
<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
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 className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
<div className="searchcontainer">
<div
className="input-group flexiblesearch"
style={{ height: "50px" }}
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
style={{ border: "none", backgroundColor: "transparent" }}
style={{ border: "none", backgroundColor: "transparent" }}
>
<svg
width="22"
@ -317,13 +407,20 @@ const InvoiceTable = ({ reloadData }) => {
className="form-control"
placeholder="Search"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
</div>
<div className="d-flex align-items-center">
<div
<div className="date-filters d-flex justify-content-between mb-3 ">
</div>
{/* <div
className="filtercontainer"
style={{
backgroundColor: "#f4f4f4",
@ -373,7 +470,7 @@ const InvoiceTable = ({ reloadData }) => {
</span>
</button>
))}
</div>
</div> */}
<div
className="filterbutton"
@ -462,8 +559,9 @@ const InvoiceTable = ({ reloadData }) => {
</select>
</div>
</li>
<li className="mt-2">
<div
{/* <div
className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }}
>
@ -495,7 +593,7 @@ const InvoiceTable = ({ reloadData }) => {
onChange={(e) => setToDate(e.target.value)}
/>
</div>
</div>
</div> */}
</li>
<li className="text-center mt-2">
<button
@ -508,7 +606,17 @@ const InvoiceTable = ({ reloadData }) => {
</li>
</ul>
</div>
</div>
{/* Date Filters using Ant Design RangePicker */}
<div>
<DatePicker.RangePicker
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
onChange={(dates) => setDateRange(dates || [])} // Handle null case
format="YYYY-MM-DD"
/>
</div>
</div>
{/* Table of Invoices */}
@ -642,21 +750,21 @@ const InvoiceTable = ({ reloadData }) => {
};
const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" },
"Business Cash": { backgroundColor: "#38400B" },
"Credit Card": { backgroundColor: "#28a745" },
cash: { backgroundColor: "#CAC59D" },
cheque: { backgroundColor: "#38400B" },
pay_later: { backgroundColor: "#E55477" },
pay_now: { backgroundColor: "#A9B0F0" },
credit_invoice: { backgroundColor: "#CFCC76" },
bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "" },
cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "" },
};
const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "5px",
padding: "10px 20px",
color: "#fff",
color: "#000",
});
const statusStyles = {

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

@ -334,26 +334,16 @@ function PayInvoice() {
style={{
backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius:"40px"
}}
>
<form onSubmit={handleSubmit}>
<div className="">
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
>
Cancel
</button>
<button type="submit" className="btn btn-primary">
Save
</button>
</div>
</div>
<div className="col-md-12 row">
<div className="mb-3 col-md-3">
<div className="col-md-12 row" style={{gap:"10%"}}>
<div className="mb-3 col-md-2" >
<input
type="date"
className="form-control-borderless"
@ -420,47 +410,6 @@ function PayInvoice() {
</select> */}
</div>
</div>
<div
className="mb-3 d-flex align-items-center"
style={{ paddingLeft: "10px" }}
>
<span className="me-4">Payment Method:</span>
<div className="form-check me-3">
<input
type="radio"
className="form-check-input"
name="pay_method"
value="cash"
checked={formData.pay_method === "cash"}
onChange={handleChange}
/>
<label className="form-check-label">Cash</label>
</div>
<div className="form-check me-3">
<input
type="radio"
className="form-check-input"
name="pay_method"
value="cheque"
checked={formData.pay_method === "cheque"}
onChange={handleChange}
/>
<label className="form-check-label">Cheque</label>
</div>
<div className="form-check">
<input
required
type="radio"
className="form-check-input"
name="pay_method"
value="bank"
checked={formData.pay_method === "bank"}
onChange={handleChange}
/>
<label className="form-check-label">Bank Card (ACH/EFT)</label>
</div>
</div>
<div className="mb-3 col-md-12 row">
<div className="col-md-2">
<input
@ -508,8 +457,69 @@ function PayInvoice() {
</div>
<div className="mb-3 col-md-12 row mt-3">
<div className="col-md-3 mt-4">
<div className="col-md-3">
<input
type="text"
className="form-control"
placeholder="Grand Total"
value={grandTotal || ""}
readOnly
style={{
border: 'none', // Remove all borders
backgroundColor:'transparent',
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
outline: 'none', // Remove outline
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">
<input
name="after_discount"
type="text"
@ -519,22 +529,14 @@ function PayInvoice() {
placeholder="After Discount Amount"
readOnly
/>
</div>
</div> */}
<div className="col-md-3">
<label>Grand Total:</label>
<input
type="text"
className="form-control"
value={grandTotal || ""}
readOnly
/>
</div>
</div>
</div>
<div className="col-md-12">
<div className="col-md-6">
{formData.pay_method === "cheque" && (
<div className="mb-3">
<div className="">
<div className="col-md-12 row">
<div className="mb-3 col-md-6">
<select
@ -612,6 +614,19 @@ function PayInvoice() {
</div>
)}
</div>
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-contained me-2"
onClick={handleCancel}
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
>
Cancel
</button>
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
Save
</button>
</div>
</form>
</div>
</div>

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

@ -5,6 +5,7 @@ import "./Invoice.css";
import { toast, ToastContainer } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi";
import Swal from "sweetalert2";
import { DatePicker } from "antd";
const PayInvoiceTable = ({ onEdit, reloadData }) => {
const { Get, Delete } = useApi();
@ -18,7 +19,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
const [vendors, setVendors] = useState([]);
const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState("");
const [dateRange, setDateRange] = useState([]);
const fetchInvoices = async () => {
@ -43,34 +44,39 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
fetchInvoices();
}, [reloadData]);
useEffect(() => {
let filteredInvoices = invoices;
// Filter by date range
if (dateRange.length === 2) {
const [start, end] = dateRange;
filteredInvoices = filteredInvoices.filter((invoice) => {
const invoiceDate = new Date(invoice.date);
return invoiceDate >= start && invoiceDate <= end;
});
}
setInvoices(filteredInvoices);
}, [dateRange, invoices]);
const applyFilters = () => {
let filteredInvoices = invoices;
// Apply status filter
if (selectedStatus !== "All") {
filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.status === selectedStatus
);
}
// Apply vendor filter
if (selectedVendor) {
filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.vendor_department_name === selectedVendor
);
}
// Apply date filters
if (fromDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) >= new Date(fromDate)
);
}
if (toDate) {
filteredInvoices = filteredInvoices.filter(
(invoice) => new Date(invoice.date) <= new Date(toDate)
);
}
// Update the state with filtered invoices
setInvoices(filteredInvoices);
};
@ -140,11 +146,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
await Delete(`invoiceData`, id)
.then((resp) => {
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
setInvoices(updatedInvoices);
onEdit(null);
toast.success("Invoice successfully deleted!");
})
.catch((error) => {
if (error.response) {
@ -266,7 +272,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return (
<div className="pagination">
<button
{/* <button
className="pgbtn"
onClick={handlePrevPage}
disabled={currentPage === 1}
@ -280,11 +286,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
>
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg>
</button>
</button> */}
{paginationItems}
<button
{/* <button
className="pgbtn"
onClick={handleNextPage}
disabled={currentPage === totalPages}
@ -298,20 +304,101 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
>
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg>
</button>
</button> */}
</div>
);
};
return (
<div>
<ToastContainer/>
<div className="d-flex justify-content-between align-items-center mb-3">
<ToastContainer />
<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
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 className="d-flex align-items-center mb-3">
{/* Search Bar */}
<div className="searchcontainer">
<div className="searchcontainer" style={{ gap: "10px" }}>
<div
className="input-group"
style={{ width: "300px", height: "50px" }}
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
>
<span
className="input-group-text"
@ -352,7 +439,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
{/* Filter and Actions */}
<div className="d-flex align-items-center">
<div
{/* <div
className="filtercontainer"
style={{
backgroundColor: "#f4f4f4",
@ -403,7 +490,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</span>
</button>
))}
</div>
</div> */}
<div
className="filterbutton"
@ -528,7 +615,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</div>
</li>
<li className="mt-2">
<div
{/* <div
className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }}
>
@ -560,7 +647,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
onChange={(e) => setToDate(e.target.value)}
/>
</div>
</div>
</div> */}
</li>
<li className="text-center mt-2">
<button
@ -574,6 +661,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</ul>
</div>
</div>
<div>
<DatePicker.RangePicker
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
onChange={(dates) => setDateRange(dates || [])} // Handle null case
format="YYYY-MM-DD"
/>
</div>
</div>
{/* Table of Invoices */}
@ -596,10 +690,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{
paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0",
borderBottomLeftRadius: index === 0 ? "60px" : "0",
borderTopRightRadius: index === 7 ? "60px" : "0",
borderBottomRightRadius: index === 7 ? "60px" : "0",
backgroundColor: '#282e26',
color: '#ffffff',
textAlign: "start",
alignContent: "center",
}}
@ -756,34 +848,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
};
const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" },
"Business Cash": { backgroundColor: "#38400B" },
"Credit Card": { backgroundColor: "#28a745" },
cash: { backgroundColor: "#CAC59D" },
cheque: { backgroundColor: "#38400B" },
pay_later: { backgroundColor: "#E55477" },
pay_now: { backgroundColor: "#A9B0F0" },
credit_invoice: { backgroundColor: "#CFCC76" },
bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "" },
cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "" },
};
const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "30px",
padding: "5px 10px",
color: "#fff",
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d", }),
borderRadius: "5px",
padding: "10px 20px",
color: "#000",
});
const statusStyles = {
All: { backgroundColor: "#4545DB" },
// draft: { backgroundColor: "#4545DB7C" },
unpaid: { backgroundColor: "#EF3E49" },
partially_paid: { backgroundColor: "#4545DB7C" },
unpaid: { backgroundColor: "#ff2024" },
partially_paid: { backgroundColor: "#0c8ce9" },
};
const getStatusStyle = (status) => ({
...(statusStyles[status] || { backgroundColor: "#6c757d" }),
borderRadius: "30px",
padding: "5px 10px",
...(statusStyles[status] || { backgroundColor: "#198f51" }),
borderRadius: "5px",
padding: "10px 20px",
color: "#fff",
});

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

@ -9,6 +9,9 @@ import { useNavigate } from "react-router-dom";
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
import AddVendorModal from "../ReusableForm/AddVendorModal";
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() {
const { user } = useContext(AuthContext);
@ -448,24 +451,24 @@ export default function Expense() {
try {
let response;
if (editingInvoiceId) {
// Editing an existing invoice
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
if (!originalInvoice) {
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
return;
}
// Editing an existing invoice
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
if (!originalInvoice) {
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
return;
}
// Determine the new status based on payment method and remaining amount
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
let newStatus = originalInvoice.status; // Start with the original status
// Determine the new status based on payment method and remaining amount
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
let newStatus = originalInvoice.status; // Start with the original status
if (formData.pay_method_status === "pay_now") {
newStatus = "paid"; // Always "paid" if paid now
} else if (formData.pay_method_status === "pay_later") {
newStatus = "unpaid"; // Ensure unpaid if paying later
} else if (newRemainingAmount < originalInvoice.amount) {
newStatus = "partially_paid"; // Adjust if partially paid
}
if (formData.pay_method_status === "pay_now") {
newStatus = "paid"; // Always "paid" if paid now
} else if (formData.pay_method_status === "pay_later") {
newStatus = "unpaid"; // Ensure unpaid if paying later
} else if (newRemainingAmount < originalInvoice.amount) {
newStatus = "partially_paid"; // Adjust if partially paid
}
// Ensure pay_amount is included when editing
@ -625,15 +628,148 @@ export default function Expense() {
<div className="main-container">
<div className="d-flex p-2">
<div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex justify-content-between align-items-center mb-3">
<h3 className="mb-1">Expense</h3>
<button className="btn btn-primary cus" onClick={toggleModal}>
{" "}
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
+ Add Invoice
<img
src={invoiceIcon}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
+ Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
+ Add 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 className="table-responsive">
<ToastContainer />
<DataTable
data={expenseInvoice}
@ -660,7 +796,7 @@ export default function Expense() {
className="modal-container"
onClick={(e) => e.stopPropagation()}
style={{
width: "700px",
width: "1200px",
backgroundColor: "white",
margin: "100px auto",
padding: "20px",
@ -694,13 +830,16 @@ export default function Expense() {
<div className="modal-body">
<form>
<div className="form-row form-group col-md-12 position-relative d-flex">
<div className="col-md-6" style={{ paddingRight: "10px" }}>
<div className="col-md-3" style={{ paddingRight: "10px" }}>
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
paddingRight: "10px"
paddingRight: "10px",
}}
type="date"
className="form-control"
@ -711,12 +850,16 @@ export default function Expense() {
required
/>
</div>
<div className="col-md-6" style={{ paddingRight: "10px" }}>
<div className="col-md-3" style={{ paddingRight: "10px" }}>
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
outline: "none", // Remove outline to prevent default focus styling
}}
type="text"
className="form-control"
@ -726,15 +869,15 @@ export default function Expense() {
onChange={handleChange}
required
/>
</div>
</div>
<div className="d-flex col-md-12">
</div>
<div className="col-md-6" style={{ paddingRight: "10px" }}>
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
className="form-control"
@ -764,12 +907,18 @@ export default function Expense() {
))}
</select>
</div>
<div className="col-md-6" style={{ paddingRight: "10px" }}>
</div>
<div className="d-flex col-md-12">
<div className="col-md-3" style={{ paddingRight: "10px" }}>
<select
className="form-control"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
name="vendor_department_service_titles"
@ -778,7 +927,7 @@ export default function Expense() {
id="expenseType"
required
>
<option value="">Select Expense Type</option>
<option value="">Expense Type</option>
<option value="add-expense">Add Expense Type</option>
{filteredExpenseTypes.map((service) => (
<option key={service.id} value={service.title}>
@ -787,85 +936,207 @@ export default function Expense() {
))}
</select>
</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>
<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={{
background: "#ffffff",
height: "100%",
{showPaymentOptions && (
<div className="d-flex col-md-6 mb-3">
<label className="radio-inline" style={{ paddingLeft: "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>
<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="specificPaymentMethod"
value="cash"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Cash
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" style={{ paddingLeft: "10px" }}>
<label
className="radio-inline"
>
<input
type="radio"
name="specificPaymentMethod"
value="cheque"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Check
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" style={{ paddingLeft: "10px" }}>
<label
className="radio-inline"
>
<input
type="radio"
name="specificPaymentMethod"
value="bank"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Bank Card/ACH/EFT
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>
{showPaymentOptions && (
<div
className="d-flex col-md-6 mb-3"
style={{
border: '2px solid #ACB4AA',
padding: '10px 10px',
width: 'fit-content',
borderRadius: '40px',
display: 'flex', // Use flexbox for inner items
gap: '10px', // Add spacing between the options
marginTop: '20px', // Keep this if you want some space above
}}
>
{[
{ value: "cash", label: "Cash" },
{ value: "cheque", label: "Check" },
{ value: "bank", label: "Bank Card/ACH/EFT" }
].map((method) => (
<label
key={method.value}
className="radio-inline"
style={{
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
color: formData.pay_method === method.value ? "white" : "black",
padding: '5px 10px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
cursor: "pointer",
}}
>
<input
type="radio"
name="specificPaymentMethod"
value={method.value}
onChange={handleSpecificPaymentMethodChange}
style={{ display: 'none' }}
/>
{method.label} {/* Use the label defined in the array */}
</label>
))}
</div>
)}
{(formData.pay_method_status === "pay_later" ||
formData.pay_method_status === "credit_invoice") && (
<div className="col-md-6 d-flex" style={{ paddingRight: "10px" }}>
<div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop:'20px' }}>
<select
className="form-control col-md-6 me-2"
name="days"
value={formData.days || ""}
onChange={handleChange}
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
required
@ -881,8 +1152,11 @@ export default function Expense() {
<input
type="text"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "50px",
}}
className="form-control d-flex col-md-5"
@ -900,8 +1174,11 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2">
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
marginRight: "10px",
}}
@ -924,8 +1201,10 @@ export default function Expense() {
className="form-control me-2"
placeholder="Check Number"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
marginRight: "10px",
}}
@ -939,8 +1218,10 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2">
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
className="form-control col-md-3"
@ -956,8 +1237,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2">
<select
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
marginRight: "10px",
}}
@ -977,8 +1260,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2">
<input
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
className="form-control col-md-3"
@ -1006,8 +1291,10 @@ export default function Expense() {
{formData.prepaid_tax && (
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
backgroundColor: "#fff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}>
<div className="input-group col-md-6">
@ -1021,7 +1308,7 @@ export default function Expense() {
alignItems: "center",
}}
>
<span
{/* <span
className="input-group-text prefixtext"
style={{
border: "none",
@ -1029,7 +1316,7 @@ export default function Expense() {
}}
>
USD
</span>
</span> */}
</div>
<input
type="text"
@ -1051,57 +1338,7 @@ export default function Expense() {
</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>
</div>
@ -1115,7 +1352,8 @@ export default function Expense() {
</button>
<button
type="submit"
className="btn btn-primary"
style={{backgroundColor:'#282E26' ,color:"#fff"}}
className="btn"
onClick={handleSubmit}
>
Submit

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

@ -130,40 +130,46 @@ const PayrollTable = ({
padding: "5px 10px",
},
unpaid: {
backgroundColor: "#EF3E49",
backgroundColor: "#ff2024",
color: "#fff",
borderRadius: "30px",
padding: "5px 10px",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
},
paid: {
backgroundColor: "#5856AC",
backgroundColor: "#198f51",
color: "#fff",
borderRadius: "30px",
padding: "5px 10px",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
},
partially_paid: {
backgroundColor: "#FFB830",
backgroundColor: "#0c8ce9",
color: "#fff",
borderRadius: "30px",
padding: "5px 10px",
borderRadius: "10px",
padding: "5px 20px",
textAlign:'center',
alignItems:'center'
},
};
const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" },
"Business Cash": { backgroundColor: "#38400B" },
"Credit Card": { backgroundColor: "#28a745" },
cash: { backgroundColor: "#CAC59D" },
cheque: { backgroundColor: "#38400B" },
pay_later: { backgroundColor: "#E55477" },
pay_now: { backgroundColor: "#A9B0F0" },
credit_invoice: { backgroundColor: "#CFCC76" },
bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "" },
cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "" },
};
const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "30px",
padding: "5px 10px",
color: "#fff",
color: "#000",
});
const downloadCSV = () => {
@ -186,17 +192,20 @@ const PayrollTable = ({
return (
<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="search-container">
<div className="search-container"
>
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search"
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
/>
<SearchIcon />
</div>
<button
type="button"
className="btn btn-outline-dark custbtn"
@ -218,6 +227,8 @@ const PayrollTable = ({
</svg>
Export To Excel
</button>
{/* <button className="btn custbtn2" type="submit">
<svg
width="24"
@ -238,12 +249,39 @@ const PayrollTable = ({
Filter
</button> */}
</div>
<div className="expense-searchcontainerend d-flex align-items-center">
<h3 className="me-2">Show</h3>
<div style={{marginRight:"60%"}}>
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
<h6 className="" style={{margin:'10px'}}>Show</h6>
<select
name="option"
id="pageSelect"
className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
}}
value={rowsPerPage}
onChange={(e) => {
setRowsPerPage(Number(e.target.value));
@ -256,6 +294,8 @@ const PayrollTable = ({
<option value={20}>20</option>
</select>
</div>
</div>
</div>
<table className="data-table custom-table rounded-table">
<thead className="table-header">
@ -486,7 +526,7 @@ const PayrollTable = ({
<nav>
<ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span
{/* <span
style={{
width: "30px",
height: "30px",
@ -501,7 +541,7 @@ const PayrollTable = ({
onClick={handlePrev}
>
<PrevIcon />
</span>
</span> */}
&nbsp;
</li>
{renderPagination()}
@ -510,7 +550,7 @@ const PayrollTable = ({
}`}
>
&nbsp;
<span
{/* <span
style={{
width: "30px",
height: "30px",
@ -525,7 +565,7 @@ const PayrollTable = ({
onClick={handleNext}
>
<NextIcon />
</span>
</span> */}
</li>
</ul>
</nav>

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

@ -52,6 +52,7 @@
background-color: #ffffff;
}
.form-check-input {
cursor: pointer;
}
/*===========================================================================Bank container=================================================================*/
@ -574,6 +575,7 @@ input[type="date"] {
.pagination .page-link {
padding: 10px;
border: 1px solid #F4F4F4;
background-color: #b6d7a8;
border-radius: 50%;
color: #002300;
text-decoration: none;
@ -585,30 +587,17 @@ input[type="date"] {
transition: background-color 0.3s, color 0.3s;
}
.pagination .page-link:hover {
background-color: #f2f2f2;
background-color: #ffaf32;
}
.pagination .page-item.active .page-link {
background-color: #FFFFFF;
background-color: #ffaf32; /* Yellow background */
color: #002300;
border-color:#fbfbfbfb;
border: 1px solid #d3d3d3fb;
}
.pagination .page-item.disabled .page-link {
opacity: 0.5;
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;
}

82
src/components/common/FormLayout.js
View File

@ -1,9 +1,9 @@
import React from "react";
import PropTypes from "prop-types";
import backgroundimg from "../../assets/img/BackgroundBody.png";
import backgroundimg from "../../assets/Image/loginbackgound.png";
import { Link } from "react-router-dom";
import "./Formlayout.css";
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
return (
<div
style={{
@ -21,21 +21,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
}}
>
<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 */}
<div
@ -49,6 +35,8 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
boxSizing: "border-box",
height: "100%",
overflow: "hidden",
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
borderRadius:"40px",
position: "relative",
"@media (maxWidth: 768px)": {
width: "100%",
@ -56,22 +44,7 @@ const FormLayout = ({ logoSrc, 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
style={{
flex: "1",
@ -84,48 +57,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
</div>
</div>
{/* 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>
);

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

@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png";
const Header = () => {
const { logOutUser } = useContext(AuthContext);
const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false);
const [settingsDropOpen, setsettingsDropOpen] = useState(false);
const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
@ -47,6 +47,7 @@ const Header = () => {
try {
const checkuser = await Get(`checkUserType`);
setUserRole(checkuser.role_name);
// console.log()
} catch (error) {
console.error(error);
}
@ -82,7 +83,7 @@ const Header = () => {
const response = await Post("selectStore", { store_id: storeId });
navigate("/");
setDropdownVisible(false);
setAvatarDropdownOpen(false);
setsettingsDropOpen(false);
} catch (error) {
console.error("Error selecting store:", error);
} finally {
@ -133,7 +134,7 @@ const Header = () => {
}
};
const closeDropdowns = () => {
setAvatarDropdownOpen(false);
setsettingsDropOpen(false);
setSettingsDropdownOpen(false);
setGeneralDropdownOpen(false);
setExpenseDropdownOpen(false);
@ -577,25 +578,25 @@ const Header = () => {
src={shopeKeeper}
className="avatar"
alt="User Avatar"
onClick={() => {
closeDropdowns();
setAvatarDropdownOpen(!avatarDropdownOpen);
}}
/>
{/* 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();
setAvatarDropdownOpen(!avatarDropdownOpen); // Toggle dropdown
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
}}
>
{/* Optional: Add an icon here */}
</button>
{avatarDropdownOpen && (
{settingsDropOpen && (
<ul className="nav-menu-drop">
<li>
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
@ -658,6 +659,7 @@ const Header = () => {
</div>
</header>
);
};

2
src/components/common/Login.js
View File

@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
import LoginPage from "./WithUi/LoginPage";
function Login() {
return (
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}>
<FormLayout logoSrc={logo} >
<LoginPage />
</FormLayout>
);

19
src/components/common/WithUi/AccountCreate.js
View File

@ -305,6 +305,7 @@ function AccountCreate() {
fontWeight: "700",
lineHeight: "40px",
textAlign: "left",
// width:'500px',
marginTop: "100px",
}}
>
@ -314,8 +315,8 @@ function AccountCreate() {
className="mb-3"
style={{ fontSize: "14px", color: "#002300" }}
>
Start managing your finances effortlessly. Sign up to access your
personal ledger and gain control of your transactions with ease!
{/* Start managing your finances effortlessly. Sign up to access your
personal ledger and gain control of your transactions with ease! */}
</p>
<div className="mb-3">
<CustomInput
@ -427,13 +428,14 @@ function AccountCreate() {
className="card-title mb-3"
style={{
fontSize: "40px",
fontSize: "30px",
fontWeight: "700",
textAlign: "left",
marginTop: "80px",
// width:"500px"
}}
>
Enter the Details
Enter store details
</p>
</div>
<p
@ -444,8 +446,9 @@ function AccountCreate() {
color: "#002300",
}}
>
Get started with your personal ledger. Fill in your information to track
transactions and manage your finances seamlessly!
{/* Get started with your personal ledger. */}
{/* Fill in your information to track
transactions and manage your finances seamlessly! */}
</p>
<div className="mb-3">
<CustomInput
@ -544,11 +547,11 @@ function AccountCreate() {
<div className="mb-3 mt-4">
<button
type="submit"
className="btn btn-primary rounded-pill"
className="btn rounded-pill"
style={{
width: "100%",
height: "60px",
backgroundColor: "#4545DB",
backgroundColor: "#4A5546",
color: "#ffffff",
padding: "10px 0px",
fontSize: "20px",

11
src/components/common/WithUi/LoginPage.js
View File

@ -62,9 +62,9 @@ const LoginPage = () => {
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
Welcome Back
</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!
</p>
</p> */}
<form onSubmit={loginUser}>
<div className="mb-3">
<CustomInput
@ -120,11 +120,11 @@ const LoginPage = () => {
</div>
<button
type="submit"
className="btn btn-primary rounded-pill"
className="btn rounded-pill"
style={{
width: "100%",
height: "60px",
backgroundColor: "#4545DB",
backgroundColor: "#4A5546",
color: "#ffffff",
padding: "10px 10px",
fontSize: "20px",
@ -139,7 +139,7 @@ const LoginPage = () => {
</form>
<div className="text-center mt-4">
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
<span>New to Ezhisab?</span>
<span>New to PaisaVara?</span>
<Link
to="/create-user"
style={{
@ -147,6 +147,7 @@ const LoginPage = () => {
marginLeft: "5px",
fontSize: "22px",
fontWeight: "700",
color:"#000"
}}
>
Create an Account

4
src/components/customphoninput/CustomPhoneInput.css
View File

@ -23,7 +23,7 @@
height: 60px;
padding: 28px 26px;
border-radius: 10px;
border: 1px solid #4545db4d; /* Your border color */
border: 1px solid #9FAA9A; /* Your border color */
opacity: 1; /* Ensure inputs are visible */
box-shadow: none; /* Remove any box-shadow if applied */
font-size: 16px; /* Optional: Set font size for the input text */
@ -32,7 +32,7 @@
.custom-input:focus {
outline: none;
border: 1px solid #4545db4d;
border: 1px solid #9FAA9A;
}
.input-error {