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> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- Favicon pointing to local file --> <!-- Favicon pointing to local file -->
<link rel="icon" href="/favicon.ico" /> <!-- <link rel="icon" href="/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="" /> <meta name="description" content="" />
@ -28,10 +28,17 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style> <style>
body { body {
background-color: #E9ECFF; background-color: #f9fff6;
font-family: Manrope; 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) { @media (min-width: 768px) {
.hideonmobile { .hideonmobile {
@ -53,7 +60,7 @@
} }
</style> </style>
<title>Ezhisab</title> <title>PaisaVara</title>
</head> </head>
<body> <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; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -135,6 +136,7 @@ body {
.nav-item { .nav-item {
margin: 0 15px; margin: 0 15px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -142,6 +144,7 @@ body {
font-family: "Manrope"; font-family: "Manrope";
font-size: 18px !important; font-size: 18px !important;
color: #002300; color: #002300;
text-decoration: none; text-decoration: none;
} }
.nav-link:hover { .nav-link:hover {
@ -226,7 +229,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
gap:120px; gap:10px;
} }
.avatar { .avatar {
@ -293,14 +296,16 @@ body {
} }
.nav-menu-drop { .nav-menu-drop {
white-space: nowrap; /* Prevent wrapping */ white-space: nowrap; /* Prevent wrapping */
} }
.nav-menu-drop { .nav-menu-drop {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-left: 80%;
position: absolute; position: absolute;
/* margin-left: 140px; */
top: 100%; /* Positions dropdown below the parent */ top: 100%; /* Positions dropdown below the parent */
left: 0; left: 0;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -318,7 +323,7 @@ body {
color: #002300; color: #002300;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
display: block; display: block;
width: auto; width: auto;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(230, 230, 230, 0.3); border-bottom: 1px solid rgba(230, 230, 230, 0.3);
@ -356,11 +361,14 @@ body {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 100%;
} }
/* Grid system */ /* Grid system */
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 40px;
} }
.col-2 { .col-2 {
flex: 0 0 16.6667%; flex: 0 0 16.6667%;
@ -495,7 +503,7 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.search-container input::placeholder { .search-container input::placeholder {
color: #a9a9a9; color: #ffffff;
} }
.search-container input:focus { .search-container input:focus {
outline: none; outline: none;
@ -621,10 +629,16 @@ body {
height: 18px; height: 18px;
background-color: #4545db; background-color: #4545db;
border-color: #4545db; border-color: #4545db;
border-radius: 50%;
} }
.form-check-input[type="radio"] { .form-check-input[type="radio"] {
border-radius: 50%; border-radius: 50%;
} }
.form-check-input[type=checkbox] {
border-radius: 50%;
}
.filter-button { .filter-button {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -711,12 +725,13 @@ h3 {
padding: 8px 12px; padding: 8px 12px;
font-size: 16px; font-size: 16px;
border: none; border: none;
border-radius: 60px; border-radius: 10px;
background-color: #007bff; background-color: #FFAF32;
color: white; color: rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; /* transition: background-color 0.3s; */
} }
.expense-searchcontainerstart { .expense-searchcontainerstart {
width: 90%; width: 90%;
} }

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

@ -4,6 +4,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import "./Invoice.css"; import "./Invoice.css";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { DatePicker } from "antd";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../../utils/api-manager/Helper/useApi";
@ -18,15 +19,20 @@ const ATMDepositTable = (props) => {
const [vendors, setVendors] = useState([]); const [vendors, setVendors] = useState([]);
const [fromDate, setFromDate] = useState(""); const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState(""); const [toDate, setToDate] = useState("");
const [dateRange, setDateRange] = useState([]);
const { Get, Delete } = useApi(); const { Get, Delete } = useApi();
function filterByTransactionType(dataArray, transactionType) { function filterByTransactionType(dataArray, transactionType) {
return dataArray.filter(record => record.transaction_type === transactionType); return dataArray.filter(record => record.transaction_type === transactionType);
} }
useEffect(() => { useEffect(() => {
const fetchInvoices = async () => { const fetchInvoices = async () => {
await Get("transactionData") await Get("transactionData")
.then((response) => { .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)); setInvoices(filterByTransactionType(response, type));
const uniqueVendors = [ const uniqueVendors = [
...new Set(response.map((invoice) => invoice.vendor_department_name)), ...new Set(response.map((invoice) => invoice.vendor_department_name)),
@ -39,31 +45,39 @@ const ATMDepositTable = (props) => {
}; };
fetchInvoices(); fetchInvoices();
}, [props.reloadData]); }, [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 = () => { const applyFilters = () => {
let filteredInvoices = invoices; let filteredInvoices = invoices;
// Apply status filter
if (selectedStatus !== "All") { if (selectedStatus !== "All") {
filteredInvoices = filteredInvoices.filter( filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.status === selectedStatus (invoice) => invoice.status === selectedStatus
); );
} }
// Apply vendor filter
if (selectedVendor) { if (selectedVendor) {
filteredInvoices = filteredInvoices.filter( filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.vendor_department_name === selectedVendor (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(filteredInvoices);
}; };
@ -118,37 +132,37 @@ const ATMDepositTable = (props) => {
}; };
const handleDelete = async (id) => { const handleDelete = async (id) => {
const result = await Swal.fire({ const result = await Swal.fire({
title: "Are you sure?", title: "Are you sure?",
text: "You won't be able to revert this!", text: "You won't be able to revert this!",
icon: "warning", icon: "warning",
showCancelButton: true, showCancelButton: true,
confirmButtonColor: "#d33", confirmButtonColor: "#d33",
cancelButtonColor: "#3085d6", cancelButtonColor: "#3085d6",
confirmButtonText: "Yes, delete it!", confirmButtonText: "Yes, delete it!",
}); });
// Check if the user clicked the confirm button // Check if the user clicked the confirm button
if (!result.isConfirmed) return; // Exit if the user cancels if (!result.isConfirmed) return; // Exit if the user cancels
try { try {
await Delete(`transactionData`, id); await Delete(`transactionData`, id);
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id); const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
setInvoices(updatedInvoices); setInvoices(updatedInvoices);
// Show success notification // Show success notification
toast.success("Invoice successfully deleted!"); toast.success("Invoice successfully deleted!");
} catch (error) { } catch (error) {
if (error.response) { if (error.response) {
toast.error(`Error deleting invoice: ${error.response.data}`); toast.error(`Error deleting invoice: ${error.response.data}`);
toast.error(`Status code: ${error.response.status}`); toast.error(`Status code: ${error.response.status}`);
} else if (error.request) { } else if (error.request) {
toast.error("No response received"); toast.error("No response received");
} else { } else {
toast.error(`Error setting up request: ${error.message}`); toast.error(`Error setting up request: ${error.message}`);
} }
} }
}; };
const handleEdit = (invoice) => { const handleEdit = (invoice) => {
@ -250,7 +264,7 @@ const ATMDepositTable = (props) => {
return ( return (
<div className="pagination"> <div className="pagination">
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
@ -264,11 +278,11 @@ const ATMDepositTable = (props) => {
> >
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" /> <path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
{paginationItems} {paginationItems}
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handleNextPage} onClick={handleNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
@ -282,19 +296,99 @@ const ATMDepositTable = (props) => {
> >
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" /> <path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
</div> </div>
); );
}; };
return ( return (
<div> <div>
<div 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 */} {/* Search Bar */}
<div className="searchcontainer"> <div className="searchcontainer">
<div <div
className="input-group" 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 <span
className="input-group-text" className="input-group-text"
@ -333,8 +427,8 @@ const ATMDepositTable = (props) => {
</div> </div>
</div> </div>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div {/* <div
className="filtercontainer" className="filtercontainer"
style={{ style={{
backgroundColor: "#f4f4f4", backgroundColor: "#f4f4f4",
@ -384,7 +478,7 @@ const ATMDepositTable = (props) => {
</span> </span>
</button> </button>
))} ))}
</div> </div> */}
<div <div
className="filterbutton" className="filterbutton"
@ -470,7 +564,7 @@ const ATMDepositTable = (props) => {
}} }}
> >
<li> <li>
<div className="mb-2"> <div className="mb-2">
<select <select
id="selectStatus" id="selectStatus"
className="form-select" className="form-select"
@ -510,7 +604,7 @@ const ATMDepositTable = (props) => {
className="row col-md-12" className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }} style={{ width: "100%", justifyContent: "space-around" }}
> >
<div className="col-5"> {/* <div className="col-5">
<input <input
style={{ style={{
borderRadius: "60px", borderRadius: "60px",
@ -537,7 +631,7 @@ const ATMDepositTable = (props) => {
value={toDate} value={toDate}
onChange={(e) => setToDate(e.target.value)} onChange={(e) => setToDate(e.target.value)}
/> />
</div> </div> */}
</div> </div>
</li> </li>
<li className="text-center mt-2"> <li className="text-center mt-2">
@ -552,14 +646,21 @@ const ATMDepositTable = (props) => {
</ul> </ul>
</div> </div>
</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> </div>
{/* Table of Invoices */} {/* Table of Invoices */}
<table className="table table-borderless table-responsive"> <table className="table table-borderless table-responsive">
<thead> <thead>
<tr> <tr>
{["date", "bank_deposite_type", "amount","Transaction Type", "actions"].map( {["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map(
(header, index) => ( (header, index) => (
<th <th
key={header} key={header}
@ -567,12 +668,10 @@ const ATMDepositTable = (props) => {
style={{ style={{
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0",
borderBottomLeftRadius: index === 0 ? "60px" : "0",
borderTopRightRadius: index === 4 ? "60px" : "0",
borderBottomRightRadius: index === 4 ? "60px" : "0",
textAlign: "start", textAlign: "start",
alignContent: "center", alignContent: "center",
backgroundColor:'#282e26',
color:'#ffffff'
}} }}
> >
{header {header
@ -610,49 +709,49 @@ const ATMDepositTable = (props) => {
</tr> </tr>
</thead> </thead>
<tbody style={{ textAlign: "center" }}> <tbody style={{ textAlign: "center" }}>
{currentInvoices.length !== 0? {currentInvoices.length !== 0 ?
currentInvoices.map((invoice) => ( currentInvoices.map((invoice) => (
<tr key={invoice.id}> <tr key={invoice.id}>
<td style={{ cursor: "pointer", textAlign: "left" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
{invoice.date} {invoice.date}
</td> </td>
<td style={{ cursor: "pointer", textAlign: "left" }}> <td style={{ cursor: "pointer", textAlign: "left" }}>
<span style={getPaymentMethodStyle(invoice.bank_deposite_type)}> <span style={getPaymentMethodStyle(invoice.bank_deposite_type)}>
{invoice.bank_deposite_type {invoice.bank_deposite_type
? invoice.bank_deposite_type.charAt(0).toUpperCase() + ? invoice.bank_deposite_type.charAt(0).toUpperCase() +
invoice.bank_deposite_type.slice(1) invoice.bank_deposite_type.slice(1)
: "N/A"} : "N/A"}
</span> </span>
</td> </td>
<td style={{ textAlign: "left" }}>{invoice.total_amount}</td> <td style={{ textAlign: "left" }}>{invoice.total_amount}</td>
<td style={{ textAlign: 'left' }}> <td style={{ textAlign: 'left' }}>
<span style={getStatusStyle(invoice.transaction_type)}> <span style={getStatusStyle(invoice.transaction_type)}>
{invoice.transaction_type ? {invoice.transaction_type ?
invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) : invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) :
'N/A'} 'N/A'}
</span> </span>
</td> </td>
<td> <td>
<div className="dropdown"> <div className="dropdown">
<button <button
className="btn btn-sm btn-outline-secondary dropdown-vertical " className="btn btn-sm btn-outline-secondary dropdown-vertical "
type="button" type="button"
id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown id={`actionDropdown-${invoice.id}`} // Unique ID for each dropdown
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
<i <i
className="bi bi-three-dots" className="bi bi-three-dots"
style={{ transform: "rotate(90deg)", display: "block" }} style={{ transform: "rotate(90deg)", display: "block" }}
></i> ></i>
</button> </button>
<ul <ul
className="dropdown-menu" className="dropdown-menu"
aria-labelledby={`actionDropdown-${invoice.id}`} aria-labelledby={`actionDropdown-${invoice.id}`}
> >
{/* <li> {/* <li>
<a <a
className="dropdown-item" className="dropdown-item"
onClick={() => handleEdit(invoice)} onClick={() => handleEdit(invoice)}
@ -660,34 +759,34 @@ const ATMDepositTable = (props) => {
Edit Edit
</a> </a>
</li> */} </li> */}
<li> <li>
<a <a
className="dropdown-item" className="dropdown-item"
onClick={() => handleDelete(invoice.id)} onClick={() => handleDelete(invoice.id)}
> >
Delete Delete
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</td> </td>
</tr> </tr>
)) ))
:( : (
<tr> <tr>
<td colSpan="7" style={{ <td colSpan="7" style={{
textAlign: "center", fontFamily: 'Manrope', textAlign: "center", fontFamily: 'Manrope',
fontWeight: '600', fontWeight: '600',
fontSize: '40px', fontSize: '40px',
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)', background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) -92.86%, #4545DB 71.43%)',
WebkitBackgroundClip: 'text', WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent', WebkitTextFillColor: 'transparent',
}}> }}>
No data found No data found
</td> </td>
</tr> </tr>
) )
} }
</tbody> </tbody>
</table> </table>
@ -720,8 +819,8 @@ const getPaymentMethodStyle = (method) => ({
const statusStyles = { const statusStyles = {
All: { backgroundColor: "#4545DB" }, All: { backgroundColor: "#4545DB" },
"Business cash": { backgroundColor: "#38400B" }, "Business cash": { backgroundColor: "#38400B" },
"Lottery cash": { backgroundColor: "#CAC59D" }, "Lottery cash": { backgroundColor: "#CAC59D" },
"Gas cash": { backgroundColor: "#57A09C" }, "Gas cash": { backgroundColor: "#57A09C" },
}; };
const getStatusStyle = (status) => ({ 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 useApi from "../../../../../utils/api-manager/Helper/useApi";
import AuthContext from "../../../../../utils/secure-route/AuthContext"; import AuthContext from "../../../../../utils/secure-route/AuthContext";
import AddVendorModal from "../../ReusableForm/AddVendorModal"; import AddVendorModal from "../../ReusableForm/AddVendorModal";
import { colors } from "@mui/material";
import { Space } from "antd";
function AddInvoice() { function AddInvoice() {
const { Get, Post } = useApi(); const { Get, Post } = useApi();
@ -269,7 +271,7 @@ function AddInvoice() {
}, },
{ {
row: 1, row: 1,
column: "col-md-5", column: "col-md-4",
label: "Vendor", label: "Vendor",
type: "select-vendor", type: "select-vendor",
name: "vendor_department_name", name: "vendor_department_name",
@ -278,7 +280,7 @@ function AddInvoice() {
}, },
{ {
row: 1, row: 1,
column: "col-md-5", column: "col-md-2",
label: "Invoice Number", label: "Invoice Number",
type: "invoice_no", type: "invoice_no",
name: "invoice_no", name: "invoice_no",
@ -286,9 +288,18 @@ function AddInvoice() {
}, },
{ {
row: 2, 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", name: "pay_method_status",
label: "Payment Method:", // label: "Payment Method:",
type: "radio", type: "radio",
options: [ options: [
{ value: "pay_later", label: "Pay Later" }, { value: "pay_later", label: "Pay Later" },
@ -297,20 +308,20 @@ function AddInvoice() {
], ],
}, },
{ {
row: 3, row: 4,
column: "col-md-12", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "payment-method-options", type: "payment-method-options",
}, },
{ {
row: 4, row: 4,
column: "col-md-12", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "pay-bank-options", type: "pay-bank-options",
}, },
{ {
row: 4, row: 5,
column: "col-md-6", column: "col-md-3",
label: "Due Days", label: "Due Days",
type: "select-dueDays", type: "select-dueDays",
name: "due_days", name: "due_days",
@ -320,14 +331,14 @@ function AddInvoice() {
// The "Notes" field is conditionally rendered based on pay_method_status // The "Notes" field is conditionally rendered based on pay_method_status
...(formData.pay_method_status !== "pay_now" ...(formData.pay_method_status !== "pay_now"
? [ ? [
{ // {
row: 5, // row: 5,
column: "col-md-6", // column: "col-md-6",
label: "Notes", // label: "Notes",
type: "text", // type: "text",
name: "note", // name: "note",
placeholder: "Notes", // placeholder: "Notes",
}, // },
] ]
: []), : []),
{ {
@ -337,15 +348,7 @@ function AddInvoice() {
type: "checkbox", type: "checkbox",
name: "prepaid_tax", name: "prepaid_tax",
}, },
{
row: 6,
column: "col-md-6",
label: "Amount",
name: "amount",
type: "prefix-input",
placeholder: "Amount",
prefixText: "USD",
},
]; ];
const paymentMethodOptions = [ const paymentMethodOptions = [
@ -382,7 +385,7 @@ function AddInvoice() {
setIsOpen(false); // Close the dropdown after clicking a link setIsOpen(false); // Close the dropdown after clicking a link
navigate(path); // Navigate to the clicked path navigate(path); // Navigate to the clicked path
}; };
const renderField = (field) => { const renderField = (field) => {
@ -447,15 +450,16 @@ function AddInvoice() {
borderBottom: "1px solid #f4f4f4", borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px", paddingBottom: "16px",
height: "50px", height: "50px",
}} }}
> >
<div className="input-group"> <div className="input-groups">
<span className="input-group-text" style={{ border: "none" }}> {/* <span className="input-group-text" style={{ border: "none" }}>
{field.prefixText} {field.prefixText}
</span> </span> */}
<input <input
type="text" // Set input type to 'text' to allow decimals type="text" // Set input type to 'text' to allow decimals
style={{ border: "none" }} style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
className="form-control-borderless" className="form-control-borderless"
name={field.name} name={field.name}
placeholder={field.placeholder} placeholder={field.placeholder}
@ -578,54 +582,69 @@ function AddInvoice() {
) )
); );
case "radio": case "radio":
return ( return (
<div className="form-group d-flex"> <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> <label className="me-4">{field.label}</label>
{field.options.map((option, index) => ( {field.options.map((option, index) => (
<div key={index} className="form-check me-4"> <div
{" "} key={index}
<input className="form-check me-4"
type="radio" style={{
className="form-check-input" cursor: 'pointer',
name={field.name} backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
value={option.value} padding: '5px 15px', // Add padding for better appearance
checked={formData[field.name] === option.value} borderRadius: '20px', // Optional: Round the corners of the label
onChange={handlePaymentMethodChange} }}
/> onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
<label className="form-check-label">{option.label}</label> >
</div> <label
))} className="form-check-label"
</div> style={{
); fontWeight: 'normal',
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
case "payment-method-options": }}
return ( >
formData.pay_method_status === "pay_now" && ( {option.label}
<div className="form-group d-flex"> </label>
{/* 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 */}
</div> </div>
))} ))}
</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": case "checkbox":
return ( return (
<div className="form-check"> <div className="form-check">
@ -640,47 +659,47 @@ function AddInvoice() {
</div> </div>
); );
case "pay-bank-options": case "pay-bank-options":
return ( return (
(formData.pay_method === "cheque" || (formData.pay_method === "cheque" || formData.pay_method === "bank") && (
formData.pay_method === "bank") && ( <div className="row align-items-center">
<div className="row mb-3"> <div className="col-md-4">
<div className="col-md-6">
<div className="form-group">
<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">
<div className="form-group"> <div className="form-group">
<input <select
required required
type="text"
className="form-control-borderless" className="form-control-borderless"
name="cheque_no" name="bank"
placeholder="Enter Cheque Number" value={formData.bank}
value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
maxLength={20} >
/> <option value="">Select Bank</option>
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div> </div>
</div> </div>
)}
<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"> <div className="form-group">
<input <input
className="form-control-borderless" className="form-control-borderless"
@ -690,7 +709,9 @@ function AddInvoice() {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
</div> </div>
) )
); );
@ -702,117 +723,127 @@ function AddInvoice() {
return ( return (
<div className="dashboard-container"> <div className="dashboard-container">
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<div className="button-groups"> <div className="button-groups">
<button <button
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')} onClick={() => handleLinkClick('/bankDeposit')}
> >
Bank Deposit Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
</div>
</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 <div
className="container" className="container mt-5"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
}} }}
> >
<form onSubmit={handleSubmit}> <TableComponent reloadData={reloadData} />
<div className=""> <AddVendorModal
{/* Action Buttons */} show={showModal}
<div className="d-flex justify-content-end"> handleClose={handleClose}
<button onVendorAdded={handleVendorAdded}
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>
</div> </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>
</div> );
);
} }
export default AddInvoice; export default AddInvoice;

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

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

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

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

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

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

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

@ -6,7 +6,7 @@
.container { .container {
padding: 30px; padding: 30px;
border-radius: 10px; border-radius: 40px;
} }
.dropdown-toggle::after { .dropdown-toggle::after {
@ -22,7 +22,7 @@
gap: 10px; /* Adjust the spacing between buttons */ gap: 10px; /* Adjust the spacing between buttons */
background-color: #ffffff; background-color: #ffffff;
width: auto; width: auto;
border-radius: 20px; border-radius: 44px;
padding: 10px 50px; 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 { .form-container {
width: 1328px; width: 1328px;
height: 461px; height: 461px;
} }
.form-group { .form-group {
@ -128,7 +94,7 @@
.input-group .form-control { .input-group .form-control {
border: none; border: none;
background-color: transparent; /* background-color: transparent; */
outline: none; /* Removes the outline */ outline: none; /* Removes the outline */
} }
@ -344,3 +310,18 @@ input[type="color"]:focus,
width:.30%; /* Make it 30% smaller (i.e., 70% width) */ width:.30%; /* Make it 30% smaller (i.e., 70% width) */
} }
} }
/* style for dropdown --> select type in bank deposite and atm deposite */
.custom-select {
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 React, { useEffect, useState } from "react";
import "./Invoice.css"; import "./Invoice.css";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { DatePicker } from "antd";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../../utils/api-manager/Helper/useApi";
import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons"; import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
@ -23,6 +23,7 @@ const InvoiceTable = ({ reloadData }) => {
const [fromDate, setFromDate] = useState(""); const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState(""); const [toDate, setToDate] = useState("");
const [originalInvoices, setOriginalInvoices] = useState([]); const [originalInvoices, setOriginalInvoices] = useState([]);
const [dateRange, setDateRange] = useState([]);
const [reloaData, setReloadData] = useState(false); const [reloaData, setReloadData] = useState(false);
@ -53,6 +54,22 @@ const InvoiceTable = ({ reloadData }) => {
fetchInvoices(); fetchInvoices();
}, [reloadData]); }, [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 = () => { const applyFilters = () => {
let filteredInvoices = originalInvoices; 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); setInvoices(filteredInvoices);
}; };
const handleSort = (column) => { const handleSort = (column) => {
const direction = const direction =
sortOrder.column === column && sortOrder.direction === "asc" sortOrder.column === column && sortOrder.direction === "asc"
@ -279,15 +284,100 @@ const InvoiceTable = ({ reloadData }) => {
return ( return (
<div> <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="searchcontainer">
<div <div
className="input-group flexiblesearch" 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 <span
className="input-group-text" className="input-group-text"
style={{ border: "none", backgroundColor: "transparent" }} style={{ border: "none", backgroundColor: "transparent" }}
> >
<svg <svg
width="22" width="22"
@ -317,13 +407,20 @@ const InvoiceTable = ({ reloadData }) => {
className="form-control" className="form-control"
placeholder="Search" placeholder="Search"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
</div> </div>
</div> </div>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div
<div className="date-filters d-flex justify-content-between mb-3 ">
</div>
{/* <div
className="filtercontainer" className="filtercontainer"
style={{ style={{
backgroundColor: "#f4f4f4", backgroundColor: "#f4f4f4",
@ -373,7 +470,7 @@ const InvoiceTable = ({ reloadData }) => {
</span> </span>
</button> </button>
))} ))}
</div> </div> */}
<div <div
className="filterbutton" className="filterbutton"
@ -462,8 +559,9 @@ const InvoiceTable = ({ reloadData }) => {
</select> </select>
</div> </div>
</li> </li>
<li className="mt-2"> <li className="mt-2">
<div {/* <div
className="row col-md-12" className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }} style={{ width: "100%", justifyContent: "space-around" }}
> >
@ -495,7 +593,7 @@ const InvoiceTable = ({ reloadData }) => {
onChange={(e) => setToDate(e.target.value)} onChange={(e) => setToDate(e.target.value)}
/> />
</div> </div>
</div> </div> */}
</li> </li>
<li className="text-center mt-2"> <li className="text-center mt-2">
<button <button
@ -508,7 +606,17 @@ const InvoiceTable = ({ reloadData }) => {
</li> </li>
</ul> </ul>
</div> </div>
</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> </div>
{/* Table of Invoices */} {/* Table of Invoices */}
@ -642,21 +750,21 @@ const InvoiceTable = ({ reloadData }) => {
}; };
const paymentMethodStyles = { const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" }, bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "#38400B" }, "Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "#28a745" }, "Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "#CAC59D" }, cash: { backgroundColor: "" },
cheque: { backgroundColor: "#38400B" }, cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "#E55477" }, pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "#A9B0F0" }, pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "#CFCC76" }, credit_invoice: { backgroundColor: "" },
}; };
const getPaymentMethodStyle = (method) => ({ const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }), ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "5px", borderRadius: "5px",
padding: "10px 20px", padding: "10px 20px",
color: "#fff", color: "#000",
}); });
const statusStyles = { const statusStyles = {

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

@ -334,26 +334,16 @@ function PayInvoice() {
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius:"40px"
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className=""> <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>
<div className="col-md-12 row"> <div className="col-md-12 row" style={{gap:"10%"}}>
<div className="mb-3 col-md-3"> <div className="mb-3 col-md-2" >
<input <input
type="date" type="date"
className="form-control-borderless" className="form-control-borderless"
@ -420,47 +410,6 @@ function PayInvoice() {
</select> */} </select> */}
</div> </div>
</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="mb-3 col-md-12 row">
<div className="col-md-2"> <div className="col-md-2">
<input <input
@ -508,8 +457,69 @@ function PayInvoice() {
</div> </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 <input
name="after_discount" name="after_discount"
type="text" type="text"
@ -519,22 +529,14 @@ function PayInvoice() {
placeholder="After Discount Amount" placeholder="After Discount Amount"
readOnly 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> </div>
<div className="col-md-12"> <div className="col-md-6">
{formData.pay_method === "cheque" && ( {formData.pay_method === "cheque" && (
<div className="mb-3"> <div className="">
<div className="col-md-12 row"> <div className="col-md-12 row">
<div className="mb-3 col-md-6"> <div className="mb-3 col-md-6">
<select <select
@ -612,6 +614,19 @@ function PayInvoice() {
</div> </div>
)} )}
</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> </form>
</div> </div>
</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 { toast, ToastContainer } from "react-toastify";
import useApi from "../../../../../utils/api-manager/Helper/useApi"; import useApi from "../../../../../utils/api-manager/Helper/useApi";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { DatePicker } from "antd";
const PayInvoiceTable = ({ onEdit, reloadData }) => { const PayInvoiceTable = ({ onEdit, reloadData }) => {
const { Get, Delete } = useApi(); const { Get, Delete } = useApi();
@ -18,7 +19,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
const [vendors, setVendors] = useState([]); const [vendors, setVendors] = useState([]);
const [fromDate, setFromDate] = useState(""); const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState(""); const [toDate, setToDate] = useState("");
const [dateRange, setDateRange] = useState([]);
const fetchInvoices = async () => { const fetchInvoices = async () => {
@ -43,34 +44,39 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
fetchInvoices(); fetchInvoices();
}, [reloadData]); }, [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 = () => { const applyFilters = () => {
let filteredInvoices = invoices; let filteredInvoices = invoices;
// Apply status filter
if (selectedStatus !== "All") { if (selectedStatus !== "All") {
filteredInvoices = filteredInvoices.filter( filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.status === selectedStatus (invoice) => invoice.status === selectedStatus
); );
} }
// Apply vendor filter
if (selectedVendor) { if (selectedVendor) {
filteredInvoices = filteredInvoices.filter( filteredInvoices = filteredInvoices.filter(
(invoice) => invoice.vendor_department_name === selectedVendor (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); setInvoices(filteredInvoices);
}; };
@ -140,11 +146,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
await Delete(`invoiceData`, id) await Delete(`invoiceData`, id)
.then((resp) => { .then((resp) => {
const updatedInvoices = invoices.filter((invoice) => invoice.id !== id); const updatedInvoices = invoices.filter((invoice) => invoice.id !== id);
setInvoices(updatedInvoices); setInvoices(updatedInvoices);
onEdit(null); onEdit(null);
toast.success("Invoice successfully deleted!"); toast.success("Invoice successfully deleted!");
}) })
.catch((error) => { .catch((error) => {
if (error.response) { if (error.response) {
@ -266,7 +272,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
return ( return (
<div className="pagination"> <div className="pagination">
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
@ -280,11 +286,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
> >
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" /> <path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
{paginationItems} {paginationItems}
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handleNextPage} onClick={handleNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
@ -298,20 +304,101 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
> >
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" /> <path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
</div> </div>
); );
}; };
return ( return (
<div> <div>
<ToastContainer/> <ToastContainer />
<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 */} {/* Search Bar */}
<div className="searchcontainer"> <div className="searchcontainer" style={{ gap: "10px" }}>
<div <div
className="input-group" 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 <span
className="input-group-text" className="input-group-text"
@ -352,7 +439,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
{/* Filter and Actions */} {/* Filter and Actions */}
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<div {/* <div
className="filtercontainer" className="filtercontainer"
style={{ style={{
backgroundColor: "#f4f4f4", backgroundColor: "#f4f4f4",
@ -403,7 +490,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</span> </span>
</button> </button>
))} ))}
</div> </div> */}
<div <div
className="filterbutton" className="filterbutton"
@ -528,7 +615,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</div> </div>
</li> </li>
<li className="mt-2"> <li className="mt-2">
<div {/* <div
className="row col-md-12" className="row col-md-12"
style={{ width: "100%", justifyContent: "space-around" }} style={{ width: "100%", justifyContent: "space-around" }}
> >
@ -560,7 +647,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
onChange={(e) => setToDate(e.target.value)} onChange={(e) => setToDate(e.target.value)}
/> />
</div> </div>
</div> </div> */}
</li> </li>
<li className="text-center mt-2"> <li className="text-center mt-2">
<button <button
@ -574,6 +661,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
</ul> </ul>
</div> </div>
</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> </div>
{/* Table of Invoices */} {/* Table of Invoices */}
@ -596,10 +690,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
style={{ style={{
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0", backgroundColor: '#282e26',
borderBottomLeftRadius: index === 0 ? "60px" : "0", color: '#ffffff',
borderTopRightRadius: index === 7 ? "60px" : "0",
borderBottomRightRadius: index === 7 ? "60px" : "0",
textAlign: "start", textAlign: "start",
alignContent: "center", alignContent: "center",
}} }}
@ -756,34 +848,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
}; };
const paymentMethodStyles = { const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" }, bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "#38400B" }, "Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "#28a745" }, "Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "#CAC59D" }, cash: { backgroundColor: "" },
cheque: { backgroundColor: "#38400B" }, cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "#E55477" }, pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "#A9B0F0" }, pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "#CFCC76" }, credit_invoice: { backgroundColor: "" },
}; };
const getPaymentMethodStyle = (method) => ({ const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }), ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d", }),
borderRadius: "30px", borderRadius: "5px",
padding: "5px 10px", padding: "10px 20px",
color: "#fff", color: "#000",
}); });
const statusStyles = { const statusStyles = {
All: { backgroundColor: "#4545DB" }, All: { backgroundColor: "#4545DB" },
// draft: { backgroundColor: "#4545DB7C" }, // draft: { backgroundColor: "#4545DB7C" },
unpaid: { backgroundColor: "#EF3E49" }, unpaid: { backgroundColor: "#ff2024" },
partially_paid: { backgroundColor: "#4545DB7C" }, partially_paid: { backgroundColor: "#0c8ce9" },
}; };
const getStatusStyle = (status) => ({ const getStatusStyle = (status) => ({
...(statusStyles[status] || { backgroundColor: "#6c757d" }), ...(statusStyles[status] || { backgroundColor: "#198f51" }),
borderRadius: "30px", borderRadius: "5px",
padding: "5px 10px", padding: "10px 20px",
color: "#fff", 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 AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
import AddVendorModal from "../ReusableForm/AddVendorModal"; import AddVendorModal from "../ReusableForm/AddVendorModal";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
import expensetype from '../../../../assets/Image/expenses type .png'
import vendor from '../../../../assets/Image/vendor.png'
export default function Expense() { export default function Expense() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@ -448,24 +451,24 @@ export default function Expense() {
try { try {
let response; let response;
if (editingInvoiceId) { if (editingInvoiceId) {
// Editing an existing invoice // Editing an existing invoice
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId); const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
if (!originalInvoice) { if (!originalInvoice) {
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId); console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
return; return;
} }
// Determine the new status based on payment method and remaining amount // Determine the new status based on payment method and remaining amount
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0)); const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
let newStatus = originalInvoice.status; // Start with the original status let newStatus = originalInvoice.status; // Start with the original status
if (formData.pay_method_status === "pay_now") { if (formData.pay_method_status === "pay_now") {
newStatus = "paid"; // Always "paid" if paid now newStatus = "paid"; // Always "paid" if paid now
} else if (formData.pay_method_status === "pay_later") { } else if (formData.pay_method_status === "pay_later") {
newStatus = "unpaid"; // Ensure unpaid if paying later newStatus = "unpaid"; // Ensure unpaid if paying later
} else if (newRemainingAmount < originalInvoice.amount) { } else if (newRemainingAmount < originalInvoice.amount) {
newStatus = "partially_paid"; // Adjust if partially paid newStatus = "partially_paid"; // Adjust if partially paid
} }
// Ensure pay_amount is included when editing // Ensure pay_amount is included when editing
@ -625,15 +628,148 @@ export default function Expense() {
<div className="main-container"> <div className="main-container">
<div className="d-flex p-2"> <div className="d-flex p-2">
<div className="expensecontainer d-flex flex-column pd-2"> <div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
<h3 className="mb-1">Expense</h3> <button className="btn cus d-flex align-items-center" onClick={toggleModal}>
<button className="btn btn-primary cus" onClick={toggleModal}>
{" "}
+ Add Invoice + Add Invoice
<img
src={invoiceIcon}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button> </button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
+ Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
+ Add Expense Type
<img
src={expensetype}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<div
style={{
display: "flex",
gap: "16px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
}}
>
{/* Invoice due this month */}
<div
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div>
</div> </div>
<div className="table-responsive"> <div className="table-responsive">
<ToastContainer /> <ToastContainer />
<DataTable <DataTable
data={expenseInvoice} data={expenseInvoice}
@ -660,7 +796,7 @@ export default function Expense() {
className="modal-container" className="modal-container"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
width: "700px", width: "1200px",
backgroundColor: "white", backgroundColor: "white",
margin: "100px auto", margin: "100px auto",
padding: "20px", padding: "20px",
@ -694,13 +830,16 @@ export default function Expense() {
<div className="modal-body"> <div className="modal-body">
<form> <form>
<div className="form-row form-group col-md-12 position-relative d-flex"> <div className="form-row form-group col-md-12 position-relative d-flex">
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-3" style={{ paddingRight: "10px" }}>
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
paddingRight: "10px" paddingRight: "10px",
}} }}
type="date" type="date"
className="form-control" className="form-control"
@ -711,12 +850,16 @@ export default function Expense() {
required required
/> />
</div> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-3" style={{ paddingRight: "10px" }}>
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
outline: "none", // Remove outline to prevent default focus styling
}} }}
type="text" type="text"
className="form-control" className="form-control"
@ -726,15 +869,15 @@ export default function Expense() {
onChange={handleChange} onChange={handleChange}
required required
/> />
</div>
</div>
<div className="d-flex col-md-12"> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-6" style={{ paddingRight: "10px" }}>
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control" className="form-control"
@ -764,12 +907,18 @@ export default function Expense() {
))} ))}
</select> </select>
</div> </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 <select
className="form-control" className="form-control"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
name="vendor_department_service_titles" name="vendor_department_service_titles"
@ -778,7 +927,7 @@ export default function Expense() {
id="expenseType" id="expenseType"
required required
> >
<option value="">Select Expense Type</option> <option value="">Expense Type</option>
<option value="add-expense">Add Expense Type</option> <option value="add-expense">Add Expense Type</option>
{filteredExpenseTypes.map((service) => ( {filteredExpenseTypes.map((service) => (
<option key={service.id} value={service.title}> <option key={service.id} value={service.title}>
@ -787,85 +936,207 @@ export default function Expense() {
))} ))}
</select> </select>
</div> </div>
</div>
<div className="d-flex col-md-12" style={{ paddingTop: "15px" }}> <div
<p>Payment Method : </p> className="form-row d-flex col-md-3 "
<label className="radio-inline" style={{ paddingLeft: "10px" }}> style={{
<input backgroundColor: "#ffffff",
type="radio" border: "none", // Remove all borders
name="pay_method_status" borderBottom: "2px solid #ccc", // Set bottom border
value="pay_later" borderRadius: "0px", // Remove border radius
checked={formData.pay_method_status === "pay_later"} height: "52px",
onChange={handlePaymentMethodChange} }}
/>{" "} >
Pay Later <div className="input-group col-md-6">
</label> <div
<label className="radio-inline" style={{ paddingLeft: "10px" }}> className="input-group-prepend"
<input style={{
type="radio" background: "#ffffff",
name="pay_method_status" height: "100%",
value="pay_now"
checked={formData.pay_method_status === "pay_now"}
onChange={handlePaymentMethodChange}
/>{" "}
Pay Now
</label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
<input
type="radio"
name="pay_method_status"
value="credit_invoice"
checked={formData.pay_method_status === "credit_invoice"}
onChange={handlePaymentMethodChange}
/>{" "}
Credit Invoice
</label>
</div>
{showPaymentOptions && ( display: "flex",
<div className="d-flex col-md-6 mb-3"> alignItems: "center",
<label className="radio-inline" style={{ paddingLeft: "10px" }}> }}
>
{/* <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 <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="cash" value="pay_later"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'pay_later'}
/>{" "} onChange={handlePaymentMethodChange}
Cash 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>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="cheque" value="pay_now"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'pay_now'}
/>{" "} onChange={handlePaymentMethodChange}
Check 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>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="bank" value="credit_invoice"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'credit_invoice'}
/>{" "} onChange={handlePaymentMethodChange}
Bank Card/ACH/EFT 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> </label>
</div> </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 === "pay_later" ||
formData.pay_method_status === "credit_invoice") && ( 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 <select
className="form-control col-md-6 me-2" className="form-control col-md-6 me-2"
name="days" name="days"
value={formData.days || ""} value={formData.days || ""}
onChange={handleChange} onChange={handleChange}
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
required required
@ -881,8 +1152,11 @@ export default function Expense() {
<input <input
type="text" type="text"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "50px", height: "50px",
}} }}
className="form-control d-flex col-md-5" className="form-control d-flex col-md-5"
@ -900,8 +1174,11 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2"> <div className="d-flex col-md-4 mt-2">
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -924,8 +1201,10 @@ export default function Expense() {
className="form-control me-2" className="form-control me-2"
placeholder="Check Number" placeholder="Check Number"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -939,8 +1218,10 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2"> <div className="d-flex col-md-4 mt-2">
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control col-md-3" className="form-control col-md-3"
@ -956,8 +1237,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2"> <div className="d-flex col-md-6 mt-2">
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -977,8 +1260,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2"> <div className="d-flex col-md-6 mt-2">
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control col-md-3" className="form-control col-md-3"
@ -1006,8 +1291,10 @@ export default function Expense() {
{formData.prepaid_tax && ( {formData.prepaid_tax && (
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{ <div className="form-row d-flex col-md-6 p-2 mt-2" style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}}> }}>
<div className="input-group col-md-6"> <div className="input-group col-md-6">
@ -1021,7 +1308,7 @@ export default function Expense() {
alignItems: "center", alignItems: "center",
}} }}
> >
<span {/* <span
className="input-group-text prefixtext" className="input-group-text prefixtext"
style={{ style={{
border: "none", border: "none",
@ -1029,7 +1316,7 @@ export default function Expense() {
}} }}
> >
USD USD
</span> </span> */}
</div> </div>
<input <input
type="text" type="text"
@ -1051,57 +1338,7 @@ export default function Expense() {
</div> </div>
)} )}
<div
className="form-row d-flex col-md-6 p-2 mt-2"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
height: "52px",
}}
>
<div className="input-group col-md-6">
<div
className="input-group-prepend"
style={{
background: "#F5F5F5",
height: "100%",
borderRadius: "10px 0 0 10px",
display: "flex",
alignItems: "center",
}}
>
<span
className="input-group-text prefixtext"
style={{
border: "none",
fontSize: "14px",
}}
>
USD
</span>
</div>
<input
className="form-control sampletext"
placeholder="Amount"
aria-label="Amount"
aria-describedby="addon-wrapping"
name={editingInvoiceId ? "amount" : "amount"}
value={
editingInvoiceId && formData.pay_amount === undefined
? formData.remaining_amount
: formData.amount || formData.amount
}
onInput={(e) => {
// Allow only numbers and a decimal point with two digits after it
e.target.value = e.target.value
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
}}
onChange={handleChange}
/>
</div>
</div>
</form> </form>
</div> </div>
@ -1115,7 +1352,8 @@ export default function Expense() {
</button> </button>
<button <button
type="submit" type="submit"
className="btn btn-primary" style={{backgroundColor:'#282E26' ,color:"#fff"}}
className="btn"
onClick={handleSubmit} onClick={handleSubmit}
> >
Submit Submit

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

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

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

@ -52,6 +52,7 @@
background-color: #ffffff; background-color: #ffffff;
} }
.form-check-input { .form-check-input {
cursor: pointer; cursor: pointer;
} }
/*===========================================================================Bank container=================================================================*/ /*===========================================================================Bank container=================================================================*/
@ -574,6 +575,7 @@ input[type="date"] {
.pagination .page-link { .pagination .page-link {
padding: 10px; padding: 10px;
border: 1px solid #F4F4F4; border: 1px solid #F4F4F4;
background-color: #b6d7a8;
border-radius: 50%; border-radius: 50%;
color: #002300; color: #002300;
text-decoration: none; text-decoration: none;
@ -585,30 +587,17 @@ input[type="date"] {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.pagination .page-link:hover { .pagination .page-link:hover {
background-color: #f2f2f2; background-color: #ffaf32;
} }
.pagination .page-item.active .page-link { .pagination .page-item.active .page-link {
background-color: #FFFFFF; background-color: #ffaf32; /* Yellow background */
color: #002300; color: #002300;
border-color:#fbfbfbfb; border-color:#fbfbfbfb;
border: 1px solid #d3d3d3fb; border: 1px solid #d3d3d3fb;
} }
.pagination .page-item.disabled .page-link { .pagination .page-item.disabled .page-link {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
.pagination .prev-next {
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #F4F4F4;
color: #002300;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.pagination .prev-next:hover {
background-color: #f2f2f2;
}

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

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import backgroundimg from "../../assets/img/BackgroundBody.png"; import backgroundimg from "../../assets/Image/loginbackgound.png";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import "./Formlayout.css"; import "./Formlayout.css";
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => { const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
return ( return (
<div <div
style={{ style={{
@ -21,21 +21,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
}} }}
> >
<div <div
style={{
display: "flex",
height: "860px",
width: "1440px",
borderRadius: "30px",
overflow: "hidden",
position: "relative",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#ffffff",
flexDirection: "row",
"@media (maxWidth: 768px)": {
flexDirection: "column",
},
}}
> >
{/* Left side: Form */} {/* Left side: Form */}
<div <div
@ -49,6 +35,8 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
boxSizing: "border-box", boxSizing: "border-box",
height: "100%", height: "100%",
overflow: "hidden", overflow: "hidden",
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
borderRadius:"40px",
position: "relative", position: "relative",
"@media (maxWidth: 768px)": { "@media (maxWidth: 768px)": {
width: "100%", width: "100%",
@ -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 <div
style={{ style={{
flex: "1", flex: "1",
@ -84,48 +57,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
</div> </div>
</div> </div>
{/* Right side: Background image */} {/* Right side: Background image */}
<div
style={{
flex: "1",
backgroundColor: "#DADAF8",
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
position: "relative",
height: "860px", // Updated height
width: "827px", // Updated width
"@media (maxWidth: 768px)": {
display: "none",
},
}}
className="hideonmobile"
>
<img
src={TopImage}
alt="Background"
style={{
width: "461.13px",
height: "120px",
objectFit: "contain",
position: "absolute",
top: 50,
right: 0,
left: 220,
}}
/>
<img
src={backgroundImageSrc}
alt="Background"
style={{
width: "100%",
objectFit: "contain",
position: "absolute",
top: 230,
right: 0,
left: 80,
}}
/>
</div>
</div> </div>
</div> </div>
); );

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

@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png";
const Header = () => { const Header = () => {
const { logOutUser } = useContext(AuthContext); const { logOutUser } = useContext(AuthContext);
const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false); const [settingsDropOpen, setsettingsDropOpen] = useState(false);
const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false); const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false); const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false); const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
@ -47,6 +47,7 @@ const Header = () => {
try { try {
const checkuser = await Get(`checkUserType`); const checkuser = await Get(`checkUserType`);
setUserRole(checkuser.role_name); setUserRole(checkuser.role_name);
// console.log()
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
@ -82,7 +83,7 @@ const Header = () => {
const response = await Post("selectStore", { store_id: storeId }); const response = await Post("selectStore", { store_id: storeId });
navigate("/"); navigate("/");
setDropdownVisible(false); setDropdownVisible(false);
setAvatarDropdownOpen(false); setsettingsDropOpen(false);
} catch (error) { } catch (error) {
console.error("Error selecting store:", error); console.error("Error selecting store:", error);
} finally { } finally {
@ -133,7 +134,7 @@ const Header = () => {
} }
}; };
const closeDropdowns = () => { const closeDropdowns = () => {
setAvatarDropdownOpen(false); setsettingsDropOpen(false);
setSettingsDropdownOpen(false); setSettingsDropdownOpen(false);
setGeneralDropdownOpen(false); setGeneralDropdownOpen(false);
setExpenseDropdownOpen(false); setExpenseDropdownOpen(false);
@ -577,25 +578,25 @@ const Header = () => {
src={shopeKeeper} src={shopeKeeper}
className="avatar" className="avatar"
alt="User Avatar" alt="User Avatar"
onClick={() => {
closeDropdowns();
setAvatarDropdownOpen(!avatarDropdownOpen);
}}
/> />
{/* Display role_name here */}
<div className="user-role">
{userRole && <span>{userRole}</span>}
</div>
{/* Settings Icon Button */} {/* Settings Icon Button */}
<button <button
className="settings-button" className="settings-button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); // Prevent the click from triggering the avatar's click e.stopPropagation(); // Prevent the click from triggering the avatar's click
closeDropdowns(); closeDropdowns();
setAvatarDropdownOpen(!avatarDropdownOpen); // Toggle dropdown setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
}} }}
> >
{/* Optional: Add an icon here */}
</button> </button>
{avatarDropdownOpen && ( {settingsDropOpen && (
<ul className="nav-menu-drop"> <ul className="nav-menu-drop">
<li> <li>
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}> <Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
@ -658,6 +659,7 @@ const Header = () => {
</div> </div>
</header> </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"; import LoginPage from "./WithUi/LoginPage";
function Login() { function Login() {
return ( return (
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}> <FormLayout logoSrc={logo} >
<LoginPage /> <LoginPage />
</FormLayout> </FormLayout>
); );

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

@ -305,6 +305,7 @@ function AccountCreate() {
fontWeight: "700", fontWeight: "700",
lineHeight: "40px", lineHeight: "40px",
textAlign: "left", textAlign: "left",
// width:'500px',
marginTop: "100px", marginTop: "100px",
}} }}
> >
@ -314,8 +315,8 @@ function AccountCreate() {
className="mb-3" className="mb-3"
style={{ fontSize: "14px", color: "#002300" }} style={{ fontSize: "14px", color: "#002300" }}
> >
Start managing your finances effortlessly. Sign up to access your {/* Start managing your finances effortlessly. Sign up to access your
personal ledger and gain control of your transactions with ease! personal ledger and gain control of your transactions with ease! */}
</p> </p>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -427,13 +428,14 @@ function AccountCreate() {
className="card-title mb-3" className="card-title mb-3"
style={{ style={{
fontSize: "40px", fontSize: "30px",
fontWeight: "700", fontWeight: "700",
textAlign: "left", textAlign: "left",
marginTop: "80px", marginTop: "80px",
// width:"500px"
}} }}
> >
Enter the Details Enter store details
</p> </p>
</div> </div>
<p <p
@ -444,8 +446,9 @@ function AccountCreate() {
color: "#002300", color: "#002300",
}} }}
> >
Get started with your personal ledger. Fill in your information to track {/* Get started with your personal ledger. */}
transactions and manage your finances seamlessly! {/* Fill in your information to track
transactions and manage your finances seamlessly! */}
</p> </p>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -544,11 +547,11 @@ function AccountCreate() {
<div className="mb-3 mt-4"> <div className="mb-3 mt-4">
<button <button
type="submit" type="submit"
className="btn btn-primary rounded-pill" className="btn rounded-pill"
style={{ style={{
width: "100%", width: "100%",
height: "60px", height: "60px",
backgroundColor: "#4545DB", backgroundColor: "#4A5546",
color: "#ffffff", color: "#ffffff",
padding: "10px 0px", padding: "10px 0px",
fontSize: "20px", 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" }}> <p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
Welcome Back Welcome Back
</p> </p>
<p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}> {/* <p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials! Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
</p> </p> */}
<form onSubmit={loginUser}> <form onSubmit={loginUser}>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -120,11 +120,11 @@ const LoginPage = () => {
</div> </div>
<button <button
type="submit" type="submit"
className="btn btn-primary rounded-pill" className="btn rounded-pill"
style={{ style={{
width: "100%", width: "100%",
height: "60px", height: "60px",
backgroundColor: "#4545DB", backgroundColor: "#4A5546",
color: "#ffffff", color: "#ffffff",
padding: "10px 10px", padding: "10px 10px",
fontSize: "20px", fontSize: "20px",
@ -139,7 +139,7 @@ const LoginPage = () => {
</form> </form>
<div className="text-center mt-4"> <div className="text-center mt-4">
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}> <div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
<span>New to Ezhisab?</span> <span>New to PaisaVara?</span>
<Link <Link
to="/create-user" to="/create-user"
style={{ style={{
@ -147,6 +147,7 @@ const LoginPage = () => {
marginLeft: "5px", marginLeft: "5px",
fontSize: "22px", fontSize: "22px",
fontWeight: "700", fontWeight: "700",
color:"#000"
}} }}
> >
Create an Account Create an Account

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

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