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

Compare commits

base: Sonali:33ff3d5cc71fb68b516a8db91d5931baa2f905da
Branches Tags
Sonali:28_12_sonali
Sonali:main
Sonali:27_12_Sonali
...
compare: Sonali:8b759c3fb3f535fa515ca2b00899c16e1e8e4932
Branches Tags
Sonali:28_12_sonali
Sonali:main
Sonali:27_12_Sonali

3 Commits
33ff3d5cc7 ... 8b759c3fb3

Author SHA1 Message Date
Sonali 8b759c3fb3 Merge pull request '2112__sonali' (#2) from 2112__sonali into main 
Reviewed-on: https://git.humbingo.org/Sonali/Paisa_vara/pulls/2
 2024-12-23 11:43:15 +00:00
sonali ff36597ef7 " expense , login amd signup and idd invoice , back deposite ui change" 2024-12-21 18:01:20 +05:30
sonali a1926389f6 " ui changes in Dashboard " 2024-12-20 18:44:35 +05:30
26 changed files with 1729 additions and 1078 deletions
Show Stats Expand all files Collapse all files

15
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="" />
@ -29,9 +29,16 @@
<!-- <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;
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; 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

29
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;
@ -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%;
} }

163
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);
}; };
@ -148,7 +162,7 @@ const ATMDepositTable = (props) => {
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"
@ -334,7 +428,7 @@ const ATMDepositTable = (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",
@ -384,7 +478,7 @@ const ATMDepositTable = (props) => {
</span> </span>
</button> </button>
))} ))}
</div> </div> */}
<div <div
className="filterbutton" className="filterbutton"
@ -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,7 +709,7 @@ 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" }}>
@ -674,7 +773,7 @@ const ATMDepositTable = (props) => {
</tr> </tr>
)) ))
:( : (
<tr> <tr>
<td colSpan="7" style={{ <td colSpan="7" style={{
textAlign: "center", fontFamily: 'Manrope', textAlign: "center", fontFamily: 'Manrope',

199
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 = [
@ -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}
@ -580,52 +584,67 @@ 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> >
<label
className="form-check-label"
style={{
fontWeight: 'normal',
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
}}
>
{option.label}
</label>
</div> </div>
))} ))}
</div> </div>
); );
case "payment-method-options": case "payment-method-options":
return ( return (
formData.pay_method_status === "pay_now" && ( formData.pay_method_status === "pay_now" && (
<div className="form-group d-flex"> <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
{/* Align items vertically */}
<label className="me-4">Payment Method Options:</label>{" "}
{/* Extra space after the main label */}
{paymentMethodOptions.map((option, index) => ( {paymentMethodOptions.map((option, index) => (
<div key={index} className="form-check me-4"> <div
{" "} key={index}
{/* Space between options */} className="form-check me-4"
<input style={{
type="radio" cursor: 'pointer',
className="form-check-input" backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
name="pay_method" padding: '5px 25px', // Add padding for better appearance
value={option.value} borderRadius: '20px', // Optional: Round the corners of the label
checked={formData.pay_method === option.value} }}
onChange={handleChange} onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
/> >
<label className="form-check-label">{option.label}</label>{" "} <label
{/* Space between radio and label */} className="form-check-label"
style={{
fontWeight: 'normal',
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
}}
>
{option.label}
</label>
</div> </div>
))} ))}
</div> </div>
) )
); );
case "checkbox": case "checkbox":
return ( return (
<div className="form-check"> <div className="form-check">
@ -642,10 +661,9 @@ function AddInvoice() {
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"> <div className="form-group">
<select <select
required required
@ -664,15 +682,15 @@ function AddInvoice() {
</div> </div>
</div> </div>
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque {formData.pay_method === "cheque" && (
<div className="col-md-6"> <div className="col-md-4">
<div className="form-group"> <div className="form-group">
<input <input
required required
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
name="cheque_no" name="cheque_no"
placeholder="Enter Cheque Number" placeholder="Cheque Number"
value={formData.cheque_no} value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
maxLength={20} maxLength={20}
@ -680,7 +698,8 @@ function AddInvoice() {
</div> </div>
</div> </div>
)} )}
<div className="col-md-12">
<div className="col-md-6">
<div className="form-group"> <div className="form-group">
<input <input
className="form-control-borderless" className="form-control-borderless"
@ -690,7 +709,9 @@ function AddInvoice() {
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
</div> </div>
) )
); );
@ -736,24 +757,11 @@ function AddInvoice() {
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="">
{/* 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 */} {/* Render Fields */}
{Object.keys(groupedFields).map((rowKey) => ( {Object.keys(groupedFields).map((rowKey) => (
<div className="row mb-3" key={rowKey}> <div className="row mb-3" key={rowKey}>
@ -761,8 +769,11 @@ function AddInvoice() {
<div key={index} className={field.column}> <div key={index} className={field.column}>
{renderField(field)} {renderField(field)}
</div> </div>
))} ))}
</div> </div>
))} ))}
{/* Prepaid Tax Field */} {/* Prepaid Tax Field */}
@ -770,7 +781,7 @@ function AddInvoice() {
<div className="row mb-3"> <div className="row mb-3">
<div className="col-md-6"> <div className="col-md-6">
<div className="form-group"> <div className="form-group">
<label htmlFor="prepaid_amount">Prepaid Tax</label> {/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"
@ -787,10 +798,29 @@ function AddInvoice() {
.slice(0, 12); // Limit input length .slice(0, 12); // Limit input length
}} }}
/> />
</div> </div>
</div> </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> </form>
</div> </div>
</div> </div>
@ -811,8 +841,9 @@ function AddInvoice() {
onVendorAdded={handleVendorAdded} onVendorAdded={handleVendorAdded}
/> />
</div> </div>
</div> </div>
); );
} }
export default AddInvoice; export default AddInvoice;

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

@ -181,28 +181,14 @@ function AtmDeposit() {
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius: "40px"
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="">
<div className="d-flex justify-content-end"> <div className=" col-md-12 row mb-3">
<button <div className="col-md-4 mb-3">
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">
<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"
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>
</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>
); );

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

@ -188,25 +188,14 @@ function BankDeposit() {
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
</option>
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<option key={type} value={type}>
{type}
</option>
))}
</select>
</div> </div>
<div className="col-md-12 row">
<div className="mb-3 col-md-12">
<div className="d-flex flex-row">
Type:&nbsp; &nbsp; &nbsp;
{["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-12 row mt-4">
<div <div
className="form-group col-md-5" className="col-md-12"
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "1px solid #f4f4f4", justifyContent: "space-between", // Adjust spacing between items
paddingBottom: "16px", gap: "50px", // Add gap for consistent spacing
}}
>
<div
className="form-group "
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
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 */
}

166
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,11 +284,96 @@ 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"
@ -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" style={{gap:"10%"}}>
<div className="col-md-12 row"> <div className="mb-3 col-md-2" >
<div className="mb-3 col-md-3">
<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-6">
<div className="col-md-12">
{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>

186
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);
}; };
@ -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",
}); });

494
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);
@ -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> </div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div>
</div>
<div className="table-responsive"> <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={{
backgroundColor: "#ffffff",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px",
}}
>
<div className="input-group col-md-6">
<div
className="input-group-prepend"
style={{
background: "#ffffff",
height: "100%",
display: "flex",
alignItems: "center",
}}
>
{/* <span
className="input-group-text prefixtext"
style={{
border: "none",
fontSize: "14px",
}}
>
USD
</span> */}
</div>
<input
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="pay_method_status" name="pay_method_status"
value="pay_later" value="pay_later"
checked={formData.pay_method_status === "pay_later"} checked={formData.pay_method_status === 'pay_later'}
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
/>{" "} style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Pay Later Pay Later
</span>
</label> </label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="pay_method_status" name="pay_method_status"
value="pay_now" value="pay_now"
checked={formData.pay_method_status === "pay_now"} checked={formData.pay_method_status === 'pay_now'}
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
/>{" "} style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Pay Now Pay Now
</span>
</label> </label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="pay_method_status" name="pay_method_status"
value="credit_invoice" value="credit_invoice"
checked={formData.pay_method_status === "credit_invoice"} checked={formData.pay_method_status === 'credit_invoice'}
onChange={handlePaymentMethodChange} onChange={handlePaymentMethodChange}
/>{" "} style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Credit Invoice Credit Invoice
</span>
</label> </label>
</div> </div>
</div>
{showPaymentOptions && ( {showPaymentOptions && (
<div className="d-flex col-md-6 mb-3"> <div
<label className="radio-inline" style={{ paddingLeft: "10px" }}> 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 <input
type="radio" type="radio"
name="specificPaymentMethod" name="specificPaymentMethod"
value="cash" value={method.value}
onChange={handleSpecificPaymentMethodChange} onChange={handleSpecificPaymentMethodChange}
/>{" "} style={{ display: 'none' }}
Cash />
</label> {method.label} {/* Use the label defined in the array */}
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
<input
type="radio"
name="specificPaymentMethod"
value="cheque"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Check
</label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
<input
type="radio"
name="specificPaymentMethod"
value="bank"
onChange={handleSpecificPaymentMethodChange}
/>{" "}
Bank Card/ACH/EFT
</label> </label>
))}
</div> </div>
)} )}
{(formData.pay_method_status === "pay_later" || {(formData.pay_method_status === "pay_later" ||
formData.pay_method_status === "credit_invoice") && ( formData.pay_method_status === "credit_invoice") && (
<div className="col-md-6 d-flex" style={{ paddingRight: "10px" }}> <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

90
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 = () => {
@ -188,15 +194,18 @@ const PayrollTable = ({
<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;
}

80
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>
); );

24
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 {