" ui changes in Dashboard "
parent
33ff3d5cc7
commit
a1926389f6
|
|
@ -29,10 +29,18 @@
|
|||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
|
||||
<style>
|
||||
body {
|
||||
background-color: #E9ECFF;
|
||||
background-color: #f9fff6;
|
||||
background-image: url('../src/assets/Image/Pattern.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
background-position: center;
|
||||
background-blend-mode: overlay;
|
||||
font-family: Manrope;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hideonmobile {
|
||||
display: none;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
|
|
@ -226,7 +226,7 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
gap:120px;
|
||||
gap:10px;
|
||||
}
|
||||
.avatar {
|
||||
|
||||
|
|
@ -293,14 +293,16 @@ body {
|
|||
}
|
||||
.nav-menu-drop {
|
||||
white-space: nowrap; /* Prevent wrapping */
|
||||
|
||||
}
|
||||
|
||||
.nav-menu-drop {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 80%;
|
||||
position: absolute;
|
||||
|
||||
/* margin-left: 140px; */
|
||||
top: 100%; /* Positions dropdown below the parent */
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -356,11 +358,14 @@ body {
|
|||
display: block;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
/* Grid system */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
|
||||
}
|
||||
.col-2 {
|
||||
flex: 0 0 16.6667%;
|
||||
|
|
@ -621,10 +626,16 @@ body {
|
|||
height: 18px;
|
||||
background-color: #4545db;
|
||||
border-color: #4545db;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.form-check-input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.form-check-input[type=checkbox] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import "./Invoice.css";
|
||||
import Swal from "sweetalert2";
|
||||
import { DatePicker } from "antd";
|
||||
import { toast } from "react-toastify";
|
||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
|
||||
|
|
@ -18,7 +19,12 @@ const ATMDepositTable = (props) => {
|
|||
const [vendors, setVendors] = useState([]);
|
||||
const [fromDate, setFromDate] = useState("");
|
||||
const [toDate, setToDate] = useState("");
|
||||
const [dateRange, setDateRange] = useState([]);
|
||||
|
||||
|
||||
const { Get, Delete } = useApi();
|
||||
|
||||
|
||||
function filterByTransactionType(dataArray, transactionType) {
|
||||
return dataArray.filter(record => record.transaction_type === transactionType);
|
||||
}
|
||||
|
|
@ -39,31 +45,39 @@ const ATMDepositTable = (props) => {
|
|||
};
|
||||
fetchInvoices();
|
||||
}, [props.reloadData]);
|
||||
|
||||
useEffect(() => {
|
||||
let filteredInvoices = invoices;
|
||||
|
||||
// Filter by date range
|
||||
if (dateRange.length === 2) {
|
||||
const [start, end] = dateRange;
|
||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
||||
const invoiceDate = new Date(invoice.date);
|
||||
return invoiceDate >= start && invoiceDate <= end;
|
||||
});
|
||||
}
|
||||
|
||||
setInvoices(filteredInvoices);
|
||||
}, [dateRange, invoices]);
|
||||
|
||||
const applyFilters = () => {
|
||||
let filteredInvoices = invoices;
|
||||
|
||||
// Apply status filter
|
||||
if (selectedStatus !== "All") {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => invoice.status === selectedStatus
|
||||
);
|
||||
}
|
||||
|
||||
// Apply vendor filter
|
||||
if (selectedVendor) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||
);
|
||||
}
|
||||
|
||||
if (fromDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||
);
|
||||
}
|
||||
if (toDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||
);
|
||||
}
|
||||
|
||||
setInvoices(filteredInvoices);
|
||||
};
|
||||
|
||||
|
|
@ -250,7 +264,7 @@ const ATMDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div className="pagination">
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
|
|
@ -264,11 +278,11 @@ const ATMDepositTable = (props) => {
|
|||
>
|
||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{paginationItems}
|
||||
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
|
|
@ -282,19 +296,99 @@ const ATMDepositTable = (props) => {
|
|||
>
|
||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer">
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "50px" }}
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -334,7 +428,7 @@ const ATMDepositTable = (props) => {
|
|||
</div>
|
||||
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
{/* <div
|
||||
className="filtercontainer"
|
||||
style={{
|
||||
backgroundColor: "#f4f4f4",
|
||||
|
|
@ -384,7 +478,7 @@ const ATMDepositTable = (props) => {
|
|||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className="filterbutton"
|
||||
|
|
@ -510,7 +604,7 @@ const ATMDepositTable = (props) => {
|
|||
className="row col-md-12"
|
||||
style={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
<div className="col-5">
|
||||
{/* <div className="col-5">
|
||||
<input
|
||||
style={{
|
||||
borderRadius: "60px",
|
||||
|
|
@ -537,7 +631,7 @@ const ATMDepositTable = (props) => {
|
|||
value={toDate}
|
||||
onChange={(e) => setToDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</li>
|
||||
<li className="text-center mt-2">
|
||||
|
|
@ -552,7 +646,14 @@ const ATMDepositTable = (props) => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date Filters using Ant Design RangePicker */}
|
||||
<div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table of Invoices */}
|
||||
|
|
@ -567,12 +668,10 @@ const ATMDepositTable = (props) => {
|
|||
style={{
|
||||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderTopRightRadius: index === 4 ? "60px" : "0",
|
||||
borderBottomRightRadius: index === 4 ? "60px" : "0",
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
backgroundColor:'#282e26',
|
||||
color:'#ffffff'
|
||||
}}
|
||||
>
|
||||
{header
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import TableComponent from "./InvoiceTable";
|
|||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
import AuthContext from "../../../../../utils/secure-route/AuthContext";
|
||||
import AddVendorModal from "../../ReusableForm/AddVendorModal";
|
||||
import { colors } from "@mui/material";
|
||||
import { Space } from "antd";
|
||||
|
||||
function AddInvoice() {
|
||||
const { Get, Post } = useApi();
|
||||
|
|
@ -269,7 +271,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 1,
|
||||
column: "col-md-5",
|
||||
column: "col-md-4",
|
||||
label: "Vendor",
|
||||
type: "select-vendor",
|
||||
name: "vendor_department_name",
|
||||
|
|
@ -278,7 +280,7 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 1,
|
||||
column: "col-md-5",
|
||||
column: "col-md-2",
|
||||
label: "Invoice Number",
|
||||
type: "invoice_no",
|
||||
name: "invoice_no",
|
||||
|
|
@ -286,9 +288,18 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-12",
|
||||
column: "col-md-5",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
placeholder: "Amount",
|
||||
prefixText: "USD",
|
||||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-5",
|
||||
name: "pay_method_status",
|
||||
label: "Payment Method:",
|
||||
// label: "Payment Method:",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ value: "pay_later", label: "Pay Later" },
|
||||
|
|
@ -297,7 +308,7 @@ function AddInvoice() {
|
|||
],
|
||||
},
|
||||
{
|
||||
row: 3,
|
||||
row: 4,
|
||||
column: "col-md-12",
|
||||
label: "Payment Method Options",
|
||||
type: "payment-method-options",
|
||||
|
|
@ -337,15 +348,7 @@ function AddInvoice() {
|
|||
type: "checkbox",
|
||||
name: "prepaid_tax",
|
||||
},
|
||||
{
|
||||
row: 6,
|
||||
column: "col-md-6",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
placeholder: "Amount",
|
||||
prefixText: "USD",
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
const paymentMethodOptions = [
|
||||
|
|
@ -580,7 +583,7 @@ function AddInvoice() {
|
|||
|
||||
case "radio":
|
||||
return (
|
||||
<div className="form-group d-flex">
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px', }}>
|
||||
<label className="me-4">{field.label}</label>
|
||||
{field.options.map((option, index) => (
|
||||
<div key={index} className="form-check me-4">
|
||||
|
|
@ -602,9 +605,9 @@ function AddInvoice() {
|
|||
case "payment-method-options":
|
||||
return (
|
||||
formData.pay_method_status === "pay_now" && (
|
||||
<div className="form-group d-flex">
|
||||
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px' }}>
|
||||
{/* Align items vertically */}
|
||||
<label className="me-4">Payment Method Options:</label>{" "}
|
||||
{/* <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">
|
||||
|
|
@ -690,7 +693,9 @@ function AddInvoice() {
|
|||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
|
@ -736,24 +741,11 @@ function AddInvoice() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="">
|
||||
{/* Action Buttons */}
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Render Fields */}
|
||||
{Object.keys(groupedFields).map((rowKey) => (
|
||||
<div className="row mb-3" key={rowKey}>
|
||||
|
|
@ -761,8 +753,11 @@ function AddInvoice() {
|
|||
<div key={index} className={field.column}>
|
||||
{renderField(field)}
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
))}
|
||||
|
||||
{/* Prepaid Tax Field */}
|
||||
|
|
@ -787,10 +782,29 @@ function AddInvoice() {
|
|||
.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>
|
||||
|
|
@ -811,6 +825,7 @@ function AddInvoice() {
|
|||
onVendorAdded={handleVendorAdded}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,28 +181,14 @@ function AtmDeposit() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="">
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" col-md-12 row mb-3">
|
||||
<div className="mb-3 col-md-4">
|
||||
<div className="col-md-4 mb-3">
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -212,6 +198,44 @@ function AtmDeposit() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3">
|
||||
<select
|
||||
className="form-select custom-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Select a type</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
|
||||
<div className="input-group" style={{ width: "100%" }}>
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
style={{ border: "none", flex: 1 }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Amount"
|
||||
value={formData.cash_amount}
|
||||
onChange={handleChange}
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value
|
||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||
.slice(0, 12); // Limit input length
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 col-md-4">
|
||||
<input
|
||||
|
|
@ -225,31 +249,9 @@ function AtmDeposit() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-12" style={{ marginLeft: "10px" }}>
|
||||
<div className="d-flex flex-row">
|
||||
Type:
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<div className="form-check me-3" key={type}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
name="bank_deposite_type"
|
||||
id={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||
value={type}
|
||||
checked={formData.bank_deposite_type === type}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
|
||||
>
|
||||
{type}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3 row">
|
||||
|
||||
|
||||
{/* <div className="mb-3 mt-2 col-md-4 ">
|
||||
<select
|
||||
className="form-control-borderless"
|
||||
|
|
@ -267,37 +269,22 @@ function AtmDeposit() {
|
|||
</select>
|
||||
</div> */}
|
||||
</div>
|
||||
<div
|
||||
className="form-group col-md-5 mt-3"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
style={{ border: "none" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Amount"
|
||||
value={formData.cash_amount}
|
||||
onChange={handleChange}
|
||||
onInput={(e) => {
|
||||
// Allow only numbers and a decimal point with two digits after it
|
||||
e.target.value = e.target.value
|
||||
.replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point
|
||||
.replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places
|
||||
.slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places)
|
||||
}}
|
||||
|
||||
/>
|
||||
<div className="">
|
||||
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -188,25 +188,14 @@ function BankDeposit() {
|
|||
className="container"
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)"
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius:"40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="">
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-md-12 row mb-3">
|
||||
<div className="mb-3 col-md-4">
|
||||
|
|
@ -332,6 +321,20 @@ function BankDeposit() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import "./Invoice.css";
|
||||
import Swal from "sweetalert2";
|
||||
import { DatePicker } from "antd";
|
||||
import { toast } from "react-toastify";
|
||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
|
||||
|
|
@ -18,7 +19,8 @@ const BankDepositTable = (props) => {
|
|||
const [vendors, setVendors] = useState([]);
|
||||
const [fromDate, setFromDate] = useState("");
|
||||
const [toDate, setToDate] = useState("");
|
||||
|
||||
const [dateRange, setDateRange] = useState([]);
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Get, Delete } = useApi();
|
||||
function filterByTransactionType(dataArray, transactionType) {
|
||||
return dataArray.filter(record => record.transaction_type === transactionType);
|
||||
|
|
@ -40,34 +42,47 @@ const BankDepositTable = (props) => {
|
|||
};
|
||||
fetchInvoices();
|
||||
}, [props.reloadData]);
|
||||
const applyFilters = () => {
|
||||
useEffect(() => {
|
||||
let filteredInvoices = invoices;
|
||||
|
||||
// Apply date range filter
|
||||
if (dateRange.length === 2) {
|
||||
const [start, end] = dateRange;
|
||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
||||
const invoiceDate = new Date(invoice.date);
|
||||
return invoiceDate >= start && invoiceDate <= end;
|
||||
});
|
||||
}
|
||||
|
||||
// Apply other filters on top of date filtering
|
||||
applyFilters(filteredInvoices);
|
||||
}, [dateRange]);
|
||||
|
||||
const applyFilters = (filteredInvoices = invoices) => {
|
||||
let updatedInvoices = filteredInvoices;
|
||||
|
||||
// Apply status filter
|
||||
if (selectedStatus !== "All") {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
updatedInvoices = updatedInvoices.filter(
|
||||
(invoice) => invoice.bank_deposite_type === selectedStatus
|
||||
);
|
||||
}
|
||||
|
||||
// Apply vendor filter
|
||||
if (selectedVendor) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
updatedInvoices = updatedInvoices.filter(
|
||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||
);
|
||||
}
|
||||
|
||||
if (fromDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||
);
|
||||
}
|
||||
if (toDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||
);
|
||||
}
|
||||
|
||||
setInvoices(filteredInvoices);
|
||||
setInvoices(updatedInvoices);
|
||||
};
|
||||
|
||||
// Update filters when status or vendor changes
|
||||
useEffect(() => {
|
||||
applyFilters();
|
||||
}, [selectedStatus, selectedVendor]);
|
||||
|
||||
const handleSort = (column) => {
|
||||
const direction =
|
||||
sortOrder.column === column && sortOrder.direction === "asc"
|
||||
|
|
@ -294,12 +309,92 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
{/* Search Bar */}
|
||||
<div className="searchcontainer">
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "50px" }}
|
||||
style={{width:"300px" , height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -339,7 +434,7 @@ const BankDepositTable = (props) => {
|
|||
</div>
|
||||
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
{/* <div
|
||||
className="filtercontainer"
|
||||
style={{
|
||||
backgroundColor: "#f4f4f4",
|
||||
|
|
@ -389,7 +484,7 @@ const BankDepositTable = (props) => {
|
|||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className="filterbutton"
|
||||
|
|
@ -511,7 +606,7 @@ const BankDepositTable = (props) => {
|
|||
</div>
|
||||
</li> */}
|
||||
<li className="mt-2">
|
||||
<div
|
||||
{/* <div
|
||||
className="row col-md-12"
|
||||
style={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
|
|
@ -543,7 +638,7 @@ const BankDepositTable = (props) => {
|
|||
onChange={(e) => setToDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li className="text-center mt-2">
|
||||
<button
|
||||
|
|
@ -557,6 +652,15 @@ const BankDepositTable = (props) => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<RangePicker
|
||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table of Invoices */}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.container {
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
gap: 10px; /* Adjust the spacing between buttons */
|
||||
background-color: #ffffff;
|
||||
width: auto;
|
||||
border-radius: 20px;
|
||||
border-radius: 44px;
|
||||
padding: 10px 50px;
|
||||
|
||||
|
||||
|
|
@ -37,44 +37,10 @@
|
|||
}
|
||||
|
||||
|
||||
.dash-drop-menu {
|
||||
white-space: nowrap; /* Prevent wrapping */
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 100%; /* Positions dropdown below the parent */
|
||||
left: 0;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #F6F6F6;
|
||||
z-index: 1000;
|
||||
border-radius: 10px;
|
||||
min-width: 190px; /* Optional minimum width */
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.dash-drop-menu-item {
|
||||
padding: 10px 15px;
|
||||
text-decoration: none;
|
||||
color: #002300;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
display: block;
|
||||
width: auto;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(230, 230, 230, 0.3);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.dash-drop-menu-item:hover {
|
||||
background-color: transparent; /* Prevent background change */
|
||||
color: #002300; /* Maintain original text color */
|
||||
cursor: default; /* Maintain default cursor */
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 1328px;
|
||||
height: 461px;
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
|
@ -344,3 +310,19 @@ input[type="color"]:focus,
|
|||
width:.30%; /* Make it 30% smaller (i.e., 70% width) */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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 */
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import "./Invoice.css";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
import { DatePicker } from "antd";
|
||||
import { toast } from "react-toastify";
|
||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons";
|
||||
|
|
@ -23,6 +23,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
const [fromDate, setFromDate] = useState("");
|
||||
const [toDate, setToDate] = useState("");
|
||||
const [originalInvoices, setOriginalInvoices] = useState([]);
|
||||
const [dateRange, setDateRange] = useState([]);
|
||||
|
||||
const [reloaData, setReloadData] = useState(false);
|
||||
|
||||
|
|
@ -53,6 +54,22 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
fetchInvoices();
|
||||
}, [reloadData]);
|
||||
|
||||
useEffect(() => {
|
||||
let filteredInvoices = originalInvoices;
|
||||
|
||||
// Filter by date range
|
||||
if (dateRange.length === 2) {
|
||||
const [start, end] = dateRange;
|
||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
||||
const invoiceDate = new Date(invoice.date);
|
||||
return invoiceDate >= start && invoiceDate <= end;
|
||||
});
|
||||
}
|
||||
|
||||
setInvoices(filteredInvoices);
|
||||
|
||||
}, [dateRange, originalInvoices]);
|
||||
|
||||
const applyFilters = () => {
|
||||
let filteredInvoices = originalInvoices;
|
||||
|
||||
|
|
@ -70,22 +87,10 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
);
|
||||
}
|
||||
|
||||
// Apply date filters
|
||||
if (fromDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||
);
|
||||
}
|
||||
if (toDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||
);
|
||||
}
|
||||
|
||||
// Update the state with filtered invoices
|
||||
setInvoices(filteredInvoices);
|
||||
};
|
||||
|
||||
|
||||
const handleSort = (column) => {
|
||||
const direction =
|
||||
sortOrder.column === column && sortOrder.direction === "asc"
|
||||
|
|
@ -279,11 +284,96 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "16px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Invoice due this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff8e6",
|
||||
border: "1px solid #ffd700",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$500
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Invoice due this month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Last 7 days sale */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffee",
|
||||
border: "1px solid #00b300",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$19,864,63,521
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Last 7 days sale
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Expense this month */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#ffe6e6",
|
||||
border: "1px solid #ff4d4d",
|
||||
borderRadius: "8px",
|
||||
padding: "16px 24px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
width: "400px",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
|
||||
$0.00
|
||||
</p>
|
||||
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
|
||||
Expense this month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div className="d-flex align-items-center mb-3"style={{gap:"10px"}}>
|
||||
|
||||
|
||||
<div className="searchcontainer">
|
||||
|
||||
<div
|
||||
className="input-group flexiblesearch"
|
||||
style={{ height: "50px" }}
|
||||
style={{ height: "50px", backgroundColor:"#fff" , border:'1px solid #DBDBDB', boxShadow:"0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -317,13 +407,20 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
className="form-control"
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
|
||||
<div className="date-filters d-flex justify-content-between mb-3 ">
|
||||
|
||||
|
||||
</div>
|
||||
{/* <div
|
||||
className="filtercontainer"
|
||||
style={{
|
||||
backgroundColor: "#f4f4f4",
|
||||
|
|
@ -373,7 +470,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className="filterbutton"
|
||||
|
|
@ -462,8 +559,9 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
</select>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="mt-2">
|
||||
<div
|
||||
{/* <div
|
||||
className="row col-md-12"
|
||||
style={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
|
|
@ -495,7 +593,7 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
onChange={(e) => setToDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li className="text-center mt-2">
|
||||
<button
|
||||
|
|
@ -508,7 +606,17 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Date Filters using Ant Design RangePicker */}
|
||||
<div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Table of Invoices */}
|
||||
|
|
@ -642,21 +750,21 @@ const InvoiceTable = ({ reloadData }) => {
|
|||
};
|
||||
|
||||
const paymentMethodStyles = {
|
||||
bank: { backgroundColor: "#57A09C" },
|
||||
"Business Cash": { backgroundColor: "#38400B" },
|
||||
"Credit Card": { backgroundColor: "#28a745" },
|
||||
cash: { backgroundColor: "#CAC59D" },
|
||||
cheque: { backgroundColor: "#38400B" },
|
||||
pay_later: { backgroundColor: "#E55477" },
|
||||
pay_now: { backgroundColor: "#A9B0F0" },
|
||||
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||
bank: { backgroundColor: "" },
|
||||
"Business Cash": { backgroundColor: "" },
|
||||
"Credit Card": { backgroundColor: "" },
|
||||
cash: { backgroundColor: "" },
|
||||
cheque: { backgroundColor: "" },
|
||||
pay_later: { backgroundColor: "" },
|
||||
pay_now: { backgroundColor: "" },
|
||||
credit_invoice: { backgroundColor: "" },
|
||||
};
|
||||
|
||||
const getPaymentMethodStyle = (method) => ({
|
||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||
borderRadius: "5px",
|
||||
padding: "10px 20px",
|
||||
color: "#fff",
|
||||
color: "#000",
|
||||
});
|
||||
|
||||
const statusStyles = {
|
||||
|
|
|
|||
|
|
@ -334,26 +334,16 @@ function PayInvoice() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius:"40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="">
|
||||
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-3">
|
||||
<div className="col-md-12 row" style={{gap:"10%"}}>
|
||||
<div className="mb-3 col-md-2" >
|
||||
<input
|
||||
type="date"
|
||||
className="form-control-borderless"
|
||||
|
|
@ -420,47 +410,6 @@ function PayInvoice() {
|
|||
</select> */}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="mb-3 d-flex align-items-center"
|
||||
style={{ paddingLeft: "10px" }}
|
||||
>
|
||||
<span className="me-4">Payment Method:</span>
|
||||
<div className="form-check me-3">
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value="cash"
|
||||
checked={formData.pay_method === "cash"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label className="form-check-label">Cash</label>
|
||||
</div>
|
||||
<div className="form-check me-3">
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value="cheque"
|
||||
checked={formData.pay_method === "cheque"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label className="form-check-label">Cheque</label>
|
||||
</div>
|
||||
<div className="form-check">
|
||||
<input
|
||||
required
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value="bank"
|
||||
checked={formData.pay_method === "bank"}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<label className="form-check-label">Bank Card (ACH/EFT)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3 col-md-12 row">
|
||||
<div className="col-md-2">
|
||||
<input
|
||||
|
|
@ -508,8 +457,69 @@ function PayInvoice() {
|
|||
|
||||
|
||||
</div>
|
||||
<div className="mb-3 col-md-12 row mt-3">
|
||||
<div className="col-md-3 mt-4">
|
||||
|
||||
<div className="col-md-3">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Grand Total"
|
||||
value={grandTotal || ""}
|
||||
readOnly
|
||||
style={{
|
||||
border: 'none', // Remove all borders
|
||||
backgroundColor:'transparent',
|
||||
borderBottom: '1px solid #ACB4AA', // Add only the bottom border
|
||||
|
||||
outline: 'none', // Remove outline
|
||||
padding: '6px 0', // Optional: Add padding to the top and bottom
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
className=" d-flex align-items-center"
|
||||
style={{
|
||||
border: '2px solid #ACB4AA',
|
||||
padding: '5px 40px',
|
||||
width: 'fit-content',
|
||||
borderRadius: '40px',
|
||||
}}
|
||||
>
|
||||
{['cash', 'cheque', 'bank'].map((method) => (
|
||||
<div className="me-3" key={method}>
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name="pay_method"
|
||||
value={method}
|
||||
checked={formData.pay_method === method}
|
||||
onChange={handleChange}
|
||||
id={`pay_method_${method}`} // Unique ID for each radio input
|
||||
style={{ display: 'none' }} // Hide the actual radio button
|
||||
/>
|
||||
<label
|
||||
className="form-check-label cursor-pointer"
|
||||
htmlFor={`pay_method_${method}`} // Link label to the input
|
||||
onClick={() => handleChange({ target: { name: 'pay_method', value: method } })} // Custom onClick to change the state
|
||||
style={{
|
||||
color: formData.pay_method === method ? 'white' : '#282e26', // Change text color based on active state
|
||||
backgroundColor: formData.pay_method === method ? '#4a5546' : 'transparent', // Change background when active
|
||||
padding: '5px 25px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
>
|
||||
{method.charAt(0).toUpperCase() + method.slice(1)} {/* Capitalize first letter */}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="">
|
||||
{/* <div className="col-md-3 mt-4">
|
||||
<input
|
||||
name="after_discount"
|
||||
type="text"
|
||||
|
|
@ -519,22 +529,14 @@ function PayInvoice() {
|
|||
placeholder="After Discount Amount"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
|
||||
<div className="col-md-3">
|
||||
<label>Grand Total:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={grandTotal || ""}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="col-md-6">
|
||||
{formData.pay_method === "cheque" && (
|
||||
<div className="mb-3">
|
||||
<div className="">
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-6">
|
||||
<select
|
||||
|
|
@ -612,6 +614,19 @@ function PayInvoice() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={handleCancel}
|
||||
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import "./Invoice.css";
|
|||
import { toast, ToastContainer } from "react-toastify";
|
||||
import useApi from "../../../../../utils/api-manager/Helper/useApi";
|
||||
import Swal from "sweetalert2";
|
||||
import { DatePicker } from "antd";
|
||||
const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
||||
const { Get, Delete } = useApi();
|
||||
|
||||
|
|
@ -18,7 +19,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
const [vendors, setVendors] = useState([]);
|
||||
const [fromDate, setFromDate] = useState("");
|
||||
const [toDate, setToDate] = useState("");
|
||||
|
||||
const [dateRange, setDateRange] = useState([]);
|
||||
|
||||
|
||||
const fetchInvoices = async () => {
|
||||
|
|
@ -43,34 +44,39 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
fetchInvoices();
|
||||
}, [reloadData]);
|
||||
|
||||
useEffect(() => {
|
||||
let filteredInvoices = invoices;
|
||||
|
||||
// Filter by date range
|
||||
if (dateRange.length === 2) {
|
||||
const [start, end] = dateRange;
|
||||
filteredInvoices = filteredInvoices.filter((invoice) => {
|
||||
const invoiceDate = new Date(invoice.date);
|
||||
return invoiceDate >= start && invoiceDate <= end;
|
||||
});
|
||||
}
|
||||
|
||||
setInvoices(filteredInvoices);
|
||||
|
||||
}, [dateRange, invoices]);
|
||||
|
||||
const applyFilters = () => {
|
||||
let filteredInvoices = invoices;
|
||||
|
||||
// Apply status filter
|
||||
if (selectedStatus !== "All") {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => invoice.status === selectedStatus
|
||||
);
|
||||
}
|
||||
|
||||
// Apply vendor filter
|
||||
if (selectedVendor) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => invoice.vendor_department_name === selectedVendor
|
||||
);
|
||||
}
|
||||
|
||||
// Apply date filters
|
||||
if (fromDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) >= new Date(fromDate)
|
||||
);
|
||||
}
|
||||
if (toDate) {
|
||||
filteredInvoices = filteredInvoices.filter(
|
||||
(invoice) => new Date(invoice.date) <= new Date(toDate)
|
||||
);
|
||||
}
|
||||
|
||||
// Update the state with filtered invoices
|
||||
setInvoices(filteredInvoices);
|
||||
};
|
||||
|
||||
|
|
@ -266,7 +272,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
|
||||
return (
|
||||
<div className="pagination">
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
|
|
@ -280,11 +286,11 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
>
|
||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{paginationItems}
|
||||
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
|
|
@ -298,7 +304,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
>
|
||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -306,12 +312,93 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
return (
|
||||
<div>
|
||||
<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 */}
|
||||
<div className="searchcontainer">
|
||||
<div className="searchcontainer" style={{ gap: "10px" }}>
|
||||
<div
|
||||
className="input-group"
|
||||
style={{ width: "300px", height: "50px" }}
|
||||
style={{ width: "300px", height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
>
|
||||
<span
|
||||
className="input-group-text"
|
||||
|
|
@ -352,7 +439,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
|
||||
{/* Filter and Actions */}
|
||||
<div className="d-flex align-items-center">
|
||||
<div
|
||||
{/* <div
|
||||
className="filtercontainer"
|
||||
style={{
|
||||
backgroundColor: "#f4f4f4",
|
||||
|
|
@ -403,7 +490,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div
|
||||
className="filterbutton"
|
||||
|
|
@ -528,7 +615,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
</div>
|
||||
</li>
|
||||
<li className="mt-2">
|
||||
<div
|
||||
{/* <div
|
||||
className="row col-md-12"
|
||||
style={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
|
|
@ -560,7 +647,7 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
onChange={(e) => setToDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</li>
|
||||
<li className="text-center mt-2">
|
||||
<button
|
||||
|
|
@ -574,6 +661,13 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<DatePicker.RangePicker
|
||||
style={{ borderRadius: "60px", height: "40px", width: "300px" }}
|
||||
onChange={(dates) => setDateRange(dates || [])} // Handle null case
|
||||
format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table of Invoices */}
|
||||
|
|
@ -596,10 +690,8 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
style={{
|
||||
paddingLeft: index === 0 ? "30px" : "0",
|
||||
cursor: "pointer",
|
||||
borderTopLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderBottomLeftRadius: index === 0 ? "60px" : "0",
|
||||
borderTopRightRadius: index === 7 ? "60px" : "0",
|
||||
borderBottomRightRadius: index === 7 ? "60px" : "0",
|
||||
backgroundColor: '#282e26',
|
||||
color: '#ffffff',
|
||||
textAlign: "start",
|
||||
alignContent: "center",
|
||||
}}
|
||||
|
|
@ -756,34 +848,34 @@ const PayInvoiceTable = ({ onEdit, reloadData }) => {
|
|||
};
|
||||
|
||||
const paymentMethodStyles = {
|
||||
bank: { backgroundColor: "#57A09C" },
|
||||
"Business Cash": { backgroundColor: "#38400B" },
|
||||
"Credit Card": { backgroundColor: "#28a745" },
|
||||
cash: { backgroundColor: "#CAC59D" },
|
||||
cheque: { backgroundColor: "#38400B" },
|
||||
pay_later: { backgroundColor: "#E55477" },
|
||||
pay_now: { backgroundColor: "#A9B0F0" },
|
||||
credit_invoice: { backgroundColor: "#CFCC76" },
|
||||
bank: { backgroundColor: "" },
|
||||
"Business Cash": { backgroundColor: "" },
|
||||
"Credit Card": { backgroundColor: "" },
|
||||
cash: { backgroundColor: "" },
|
||||
cheque: { backgroundColor: "" },
|
||||
pay_later: { backgroundColor: "" },
|
||||
pay_now: { backgroundColor: "" },
|
||||
credit_invoice: { backgroundColor: "" },
|
||||
};
|
||||
|
||||
const getPaymentMethodStyle = (method) => ({
|
||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
color: "#fff",
|
||||
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d", }),
|
||||
borderRadius: "5px",
|
||||
padding: "10px 20px",
|
||||
color: "#000",
|
||||
});
|
||||
|
||||
const statusStyles = {
|
||||
All: { backgroundColor: "#4545DB" },
|
||||
// draft: { backgroundColor: "#4545DB7C" },
|
||||
unpaid: { backgroundColor: "#EF3E49" },
|
||||
partially_paid: { backgroundColor: "#4545DB7C" },
|
||||
unpaid: { backgroundColor: "#ff2024" },
|
||||
partially_paid: { backgroundColor: "#0c8ce9" },
|
||||
};
|
||||
|
||||
const getStatusStyle = (status) => ({
|
||||
...(statusStyles[status] || { backgroundColor: "#6c757d" }),
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
...(statusStyles[status] || { backgroundColor: "#198f51" }),
|
||||
borderRadius: "5px",
|
||||
padding: "10px 20px",
|
||||
color: "#fff",
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
background-color: #ffffff;
|
||||
}
|
||||
.form-check-input {
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
/*===========================================================================Bank container=================================================================*/
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png";
|
|||
|
||||
const Header = () => {
|
||||
const { logOutUser } = useContext(AuthContext);
|
||||
const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false);
|
||||
const [settingsDropOpen, setsettingsDropOpen] = useState(false);
|
||||
const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false);
|
||||
const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false);
|
||||
const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false);
|
||||
|
|
@ -47,6 +47,7 @@ const Header = () => {
|
|||
try {
|
||||
const checkuser = await Get(`checkUserType`);
|
||||
setUserRole(checkuser.role_name);
|
||||
// console.log()
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
|
@ -82,7 +83,7 @@ const Header = () => {
|
|||
const response = await Post("selectStore", { store_id: storeId });
|
||||
navigate("/");
|
||||
setDropdownVisible(false);
|
||||
setAvatarDropdownOpen(false);
|
||||
setsettingsDropOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Error selecting store:", error);
|
||||
} finally {
|
||||
|
|
@ -133,7 +134,7 @@ const Header = () => {
|
|||
}
|
||||
};
|
||||
const closeDropdowns = () => {
|
||||
setAvatarDropdownOpen(false);
|
||||
setsettingsDropOpen(false);
|
||||
setSettingsDropdownOpen(false);
|
||||
setGeneralDropdownOpen(false);
|
||||
setExpenseDropdownOpen(false);
|
||||
|
|
@ -577,25 +578,25 @@ const Header = () => {
|
|||
src={shopeKeeper}
|
||||
className="avatar"
|
||||
alt="User Avatar"
|
||||
onClick={() => {
|
||||
closeDropdowns();
|
||||
setAvatarDropdownOpen(!avatarDropdownOpen);
|
||||
}}
|
||||
/>
|
||||
|
||||
/>
|
||||
{/* Display role_name here */}
|
||||
<div className="user-role">
|
||||
{userRole && <span>{userRole}</span>}
|
||||
</div>
|
||||
{/* Settings Icon Button */}
|
||||
<button
|
||||
className="settings-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent the click from triggering the avatar's click
|
||||
closeDropdowns();
|
||||
setAvatarDropdownOpen(!avatarDropdownOpen); // Toggle dropdown
|
||||
setsettingsDropOpen(!settingsDropOpen); // Toggle dropdown
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Optional: Add an icon here */}
|
||||
</button>
|
||||
|
||||
{avatarDropdownOpen && (
|
||||
{settingsDropOpen && (
|
||||
<ul className="nav-menu-drop">
|
||||
<li>
|
||||
<Link className="nav-menu-drop-item" to="#" onClick={closeDropdowns}>
|
||||
|
|
@ -658,6 +659,7 @@ const Header = () => {
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue