Merge pull request 'Finance_Export_Functionality :- Implementing Export Functionality in Finance Module.' (#522) from Finance_Export_Functionality into Purchase_Invoice_Management
Reviewed-on: #522 Merged
This commit is contained in:
commit
83bd99549a
@ -20,14 +20,21 @@ import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const usePagination = (data, itemsPerPage) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
// const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
const maxPage = Math.max(1, Math.ceil(data.length / itemsPerPage));
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return data.slice(startIndex, endIndex);
|
||||
}, [data, currentPage, itemsPerPage]);
|
||||
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
// const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
|
||||
const paginate = useCallback((pageNumber) => {
|
||||
// keep page within 1..maxPage
|
||||
const p = Math.max(1, Math.min(pageNumber, maxPage));
|
||||
setCurrentPage(p);
|
||||
}, [maxPage]);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return {
|
||||
@ -36,6 +43,7 @@ const usePagination = (data, itemsPerPage) => {
|
||||
currentItems,
|
||||
paginate,
|
||||
resetPage,
|
||||
setCurrentPage,
|
||||
};
|
||||
};
|
||||
|
||||
@ -125,9 +133,16 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
resetPage,
|
||||
} = usePagination(filteredSearchData, 20);
|
||||
|
||||
// useEffect(() => {
|
||||
// resetPage();
|
||||
// }, [filteredSearchData]);
|
||||
|
||||
useEffect(() => {
|
||||
resetPage();
|
||||
}, [filteredSearchData]);
|
||||
if (currentPage > totalPages) {
|
||||
paginate(totalPages || 1);
|
||||
}
|
||||
// NOTE: do NOT force reset to page 1 here — keep the same page if still valid
|
||||
}, [filteredSearchData, totalPages, currentPage, paginate]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
@ -144,10 +159,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
||||
);
|
||||
});
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange, resetPage]
|
||||
[selectedProject, dateRange]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -214,7 +228,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
{isLoading ? (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ minHeight: "50vh" }}
|
||||
style={{ minHeight: "50vh" }}
|
||||
>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
|
||||
@ -1,233 +1,108 @@
|
||||
import React from 'react'
|
||||
import Avatar from "../common/Avatar"; // <-- ADD THIS
|
||||
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { formatFigure } from '../../utils/appUtils';
|
||||
import { SpinnerLoader } from '../common/Loader';
|
||||
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
|
||||
import Error from "../common/Error";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Loader, { SpinnerLoader } from "../common/Loader";
|
||||
import { useForm, useFormContext } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { employee } from "../../data/masters";
|
||||
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
const AdvancePaymentList = ({ searchString }) => {
|
||||
|
||||
const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||
const { setBalance } = useAdvancePaymentContext();
|
||||
const { data, isError, isLoading, error, isFetching } =
|
||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||
const records = Array.isArray(data) ? data : [];
|
||||
const { data, isError, isLoading, error } =
|
||||
useExpenseAllTransactionsList(searchString);
|
||||
|
||||
let currentBalance = 0;
|
||||
const rowsWithBalance = records.map((r) => {
|
||||
const isCredit = r.amount > 0;
|
||||
const credit = isCredit ? r.amount : 0;
|
||||
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||
currentBalance += credit - debit;
|
||||
return {
|
||||
id: r.id,
|
||||
description: r.title || "-",
|
||||
projectName: r.project?.name || "-",
|
||||
createdAt: r.createdAt,
|
||||
credit,
|
||||
debit,
|
||||
financeUId: r.financeUId,
|
||||
balance: currentBalance,
|
||||
};
|
||||
});
|
||||
const rows = data || [];
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!employeeId) {
|
||||
setBalance(null);
|
||||
return;
|
||||
const columns = [
|
||||
{
|
||||
key: "employee",
|
||||
label: "Employee Name",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
||||
style={{ cursor: "pointer" }}>
|
||||
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
||||
|
||||
<span className="fw-medium">
|
||||
{r.firstName} {r.lastName}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "jobRoleName",
|
||||
label: "Job Role",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold">
|
||||
{r.jobRoleName}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "balanceAmount",
|
||||
label: "Balance (₹)",
|
||||
align: "text-end",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold fs-6">
|
||||
{formatFigure(r.balanceAmount, {
|
||||
// type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="d-flex justify-content-center align-items-center py-4" style={{ height: "300px" }}>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (rowsWithBalance.length > 0) {
|
||||
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
||||
} else {
|
||||
setBalance(0);
|
||||
}
|
||||
}, [employeeId, data, setBalance]);
|
||||
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
||||
|
||||
if (!employeeId) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<p className="text-muted m-0">Please select an employee</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
<div className="mx-2">
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
if (isLoading || isFetching) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="text-center py-3">
|
||||
{error?.status === 404
|
||||
? "No advance payment transactions found."
|
||||
: <Error error={error} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const columns = [
|
||||
{
|
||||
key: "date",
|
||||
label: (
|
||||
<>
|
||||
Date
|
||||
</>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{ key: "description", label: "Description", align: "text-start" },
|
||||
|
||||
{
|
||||
key: "credit",
|
||||
label: (
|
||||
<>
|
||||
Credit <i className="bx bx-rupee text-success"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "debit",
|
||||
label: (
|
||||
<>
|
||||
Debit <i className="bx bx-rupee text-danger"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
|
||||
{
|
||||
key: "balance",
|
||||
label: (
|
||||
<>
|
||||
Balance <i className="bi bi-currency-rupee text-primary"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end fw-bold",
|
||||
},
|
||||
];
|
||||
|
||||
// Handle empty records
|
||||
if (rowsWithBalance.length === 0) {
|
||||
return (
|
||||
<div className="text-center text-muted py-3">
|
||||
No advance payment records found.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const DecideCreditOrDebit = ({ financeUId }) => {
|
||||
if (!financeUId) return null;
|
||||
|
||||
const prefix = financeUId?.substring(0, 2).toUpperCase();
|
||||
|
||||
if (prefix === "PR") return <span className="text-success">+</span>;
|
||||
if (prefix === "EX") return <span className="text-danger">-</span>;
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="table-responsive">
|
||||
<table className="table align-middle">
|
||||
<thead className="table_header_border">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`${col.align} p-2`}>
|
||||
{col.key === "credit" ? (
|
||||
row.amount > 0 ? (
|
||||
<span>{row.amount.toLocaleString("en-IN")}</span>
|
||||
) : (
|
||||
"-"
|
||||
)
|
||||
) : col.key === "debit" ? (
|
||||
row.amount < 0 ? (
|
||||
<span>
|
||||
{Math.abs(row.amount).toLocaleString("en-IN")}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)
|
||||
) : col.key === "balance" ? (
|
||||
<div className="d-flex align-items-center justify-content-end">
|
||||
{/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
|
||||
<span className="mx-2">
|
||||
{formatFigure(row.currentBalance)}
|
||||
</span>
|
||||
</div>
|
||||
) : col.key === "date" ? (
|
||||
<small className="text-muted px-1">
|
||||
{formatUTCToLocalTime(row.paidAt)}
|
||||
</small>
|
||||
) : (
|
||||
<div className="d-flex flex-column text-start gap-1 py-1">
|
||||
<small className="fw-semibold text-dark">
|
||||
{row.project?.name || "-"}
|
||||
</small>
|
||||
<small>{row.title || "-"}</small>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={columns.length}
|
||||
className="text-center text-muted py-3"
|
||||
>
|
||||
No advance payment records found.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
<tfoot className=" fw-bold">
|
||||
<tr className="tr-group text-dark py-2">
|
||||
<td className="text-start">
|
||||
{" "}
|
||||
<div className="d-flex align-items-center px-1 py-2">
|
||||
Final Balance
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-end" colSpan="4">
|
||||
<div className="d-flex align-items-center justify-content-end px-1 py-2">
|
||||
{currentBalance.toLocaleString("en-IN", {
|
||||
style: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<tbody>
|
||||
{rows.length > 0 ? (
|
||||
rows.map((row) => (
|
||||
<tr key={row.id} className="align-middle" style={{ height: "50px" }}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
||||
{col.customRender
|
||||
? col.customRender(row)
|
||||
: col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center border-0 py-3">
|
||||
No Employees Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancePaymentList;
|
||||
|
||||
@ -1,100 +0,0 @@
|
||||
import React from 'react'
|
||||
import Avatar from "../../components/common/Avatar"; // <-- ADD THIS
|
||||
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { formatFigure } from '../../utils/appUtils';
|
||||
|
||||
const AdvancePaymentList1 = ({ searchString }) => {
|
||||
|
||||
const { data, isError, isLoading, error } =
|
||||
useExpenseAllTransactionsList(searchString);
|
||||
|
||||
const rows = data || [];
|
||||
const navigate = useNavigate();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "employee",
|
||||
label: "Employee Name",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
||||
style={{ cursor: "pointer" }}>
|
||||
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
||||
|
||||
<span className="fw-medium">
|
||||
{r.firstName} {r.lastName}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "jobRoleName",
|
||||
label: "Job Role",
|
||||
align: "text-start",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold">
|
||||
{r.jobRoleName}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "balanceAmount",
|
||||
label: "Balance (₹)",
|
||||
align: "text-end",
|
||||
customRender: (r) => (
|
||||
<span className="fw-semibold fs-6">
|
||||
{formatFigure(r.balanceAmount, {
|
||||
// type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <p className="text-center py-4">Loading...</p>;
|
||||
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
||||
|
||||
return (
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
<div className="mx-2">
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{rows.length > 0 ? (
|
||||
rows.map((row) => (
|
||||
<tr key={row.id} className="align-middle" style={{ height: "40px" }}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
||||
{col.customRender
|
||||
? col.customRender(row)
|
||||
: col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="text-center border-0 py-3">
|
||||
No Employees Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancePaymentList1;
|
||||
233
src/components/AdvancePayment/AdvancePaymentListDetails.jsx
Normal file
233
src/components/AdvancePayment/AdvancePaymentListDetails.jsx
Normal file
@ -0,0 +1,233 @@
|
||||
|
||||
import React, { useEffect, useMemo } from "react";
|
||||
import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
|
||||
import Error from "../common/Error";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Loader, { SpinnerLoader } from "../common/Loader";
|
||||
import { useForm, useFormContext } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { employee } from "../../data/masters";
|
||||
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPageDetails";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
|
||||
const AdvancePaymentListDetails = ({ employeeId, searchString,tableRef }) => {
|
||||
const { setBalance } = useAdvancePaymentContext();
|
||||
const { data, isError, isLoading, error, isFetching } =
|
||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||
const records = Array.isArray(data) ? data : [];
|
||||
|
||||
let currentBalance = 0;
|
||||
const rowsWithBalance = records.map((r) => {
|
||||
const isCredit = r.amount > 0;
|
||||
const credit = isCredit ? r.amount : 0;
|
||||
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||
currentBalance += credit - debit;
|
||||
return {
|
||||
id: r.id,
|
||||
description: r.title || "-",
|
||||
projectName: r.project?.name || "-",
|
||||
createdAt: r.createdAt,
|
||||
credit,
|
||||
debit,
|
||||
financeUId: r.financeUId,
|
||||
balance: currentBalance,
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!employeeId) {
|
||||
setBalance(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (rowsWithBalance.length > 0) {
|
||||
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
||||
} else {
|
||||
setBalance(0);
|
||||
}
|
||||
}, [employeeId, data, setBalance]);
|
||||
|
||||
if (!employeeId) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<p className="text-muted m-0">Please select an employee</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading || isFetching) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="text-center py-3">
|
||||
{error?.status === 404
|
||||
? "No advance payment transactions found."
|
||||
: <Error error={error} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const columns = [
|
||||
{
|
||||
key: "date",
|
||||
label: (
|
||||
<>
|
||||
Date
|
||||
</>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{ key: "description", label: "Description", align: "text-start" },
|
||||
|
||||
{
|
||||
key: "credit",
|
||||
label: (
|
||||
<>
|
||||
Credit <i className="bx bx-rupee text-success"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "debit",
|
||||
label: (
|
||||
<>
|
||||
Debit <i className="bx bx-rupee text-danger"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
|
||||
{
|
||||
key: "balance",
|
||||
label: (
|
||||
<>
|
||||
Balance <i className="bi bi-currency-rupee text-primary"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end fw-bold",
|
||||
},
|
||||
];
|
||||
|
||||
// Handle empty records
|
||||
if (rowsWithBalance.length === 0) {
|
||||
return (
|
||||
<div className="text-center text-muted py-3">
|
||||
No advance payment records found.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const DecideCreditOrDebit = ({ financeUId }) => {
|
||||
if (!financeUId) return null;
|
||||
|
||||
const prefix = financeUId?.substring(0, 2).toUpperCase();
|
||||
|
||||
if (prefix === "PR") return <span className="text-success">+</span>;
|
||||
if (prefix === "EX") return <span className="text-danger">-</span>;
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="table-responsive">
|
||||
<table className="table align-middle" ref={tableRef}>
|
||||
<thead className="table_header_border">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`${col.align} p-2`}>
|
||||
{col.key === "credit" ? (
|
||||
row.amount > 0 ? (
|
||||
<span>{row.amount.toLocaleString("en-IN")}</span>
|
||||
) : (
|
||||
"-"
|
||||
)
|
||||
) : col.key === "debit" ? (
|
||||
row.amount < 0 ? (
|
||||
<span>
|
||||
{Math.abs(row.amount).toLocaleString("en-IN")}
|
||||
</span>
|
||||
) : (
|
||||
"-"
|
||||
)
|
||||
) : col.key === "balance" ? (
|
||||
<div className="d-flex align-items-center justify-content-end">
|
||||
{/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
|
||||
<span className="mx-2">
|
||||
{formatFigure(row.currentBalance)}
|
||||
</span>
|
||||
</div>
|
||||
) : col.key === "date" ? (
|
||||
<small className="text-muted px-1">
|
||||
{formatUTCToLocalTime(row.paidAt)}
|
||||
</small>
|
||||
) : (
|
||||
<div className="d-flex flex-column text-start gap-1 py-1">
|
||||
<small className="fw-semibold text-dark">
|
||||
{row.project?.name || "-"}
|
||||
</small>
|
||||
<small>{row.title || "-"}</small>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={columns.length}
|
||||
className="text-center text-muted py-3"
|
||||
>
|
||||
No advance payment records found.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
<tfoot className=" fw-bold">
|
||||
<tr className="tr-group text-dark py-2">
|
||||
<td className="text-start">
|
||||
{" "}
|
||||
<div className="d-flex align-items-center px-1 py-2">
|
||||
Final Balance
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-end" colSpan="4">
|
||||
<div className="d-flex align-items-center justify-content-end px-1 py-2">
|
||||
{currentBalance.toLocaleString("en-IN", {
|
||||
style: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancePaymentListDetails;
|
||||
76
src/components/AdvancePayment/handleAdvancePaymentExport.jsx
Normal file
76
src/components/AdvancePayment/handleAdvancePaymentExport.jsx
Normal file
@ -0,0 +1,76 @@
|
||||
import moment from "moment";
|
||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
||||
|
||||
const handleAdvancePaymentExport = (type, data, tableRef) => {
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
let currentBalance = 0;
|
||||
const exportData = data.map((item) => {
|
||||
const credit = item.amount > 0 ? item.amount : 0;
|
||||
const debit = item.amount < 0 ? Math.abs(item.amount) : 0;
|
||||
currentBalance += credit - debit;
|
||||
|
||||
return {
|
||||
Date: item.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "",
|
||||
Description: item.title || "-", // used only for CSV/Excel
|
||||
Project: item.project?.name || "-",
|
||||
Credit: credit || "",
|
||||
Debit: debit || "",
|
||||
"Finance ID": item.financeUId || "-",
|
||||
Balance: currentBalance,
|
||||
};
|
||||
});
|
||||
|
||||
// Final row
|
||||
exportData.push({
|
||||
Date: "",
|
||||
Description: "Final Balance",
|
||||
Project: "",
|
||||
Credit: "",
|
||||
Debit: "",
|
||||
"Finance ID": "",
|
||||
Balance: currentBalance,
|
||||
});
|
||||
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(exportData, "advance-payments");
|
||||
break;
|
||||
|
||||
case "excel":
|
||||
exportToExcel(exportData, "advance-payments");
|
||||
break;
|
||||
|
||||
case "pdf":
|
||||
// Create a copy of data ONLY for PDF (without Description)
|
||||
const pdfData = exportData.map((row, index) => {
|
||||
// Detect final row
|
||||
const isFinal = index === exportData.length - 1;
|
||||
|
||||
return {
|
||||
Date: isFinal ? "" : row.Date,
|
||||
Project: isFinal ? "Final Balance" : row.Project,
|
||||
Credit: row.Credit,
|
||||
Debit: row.Debit,
|
||||
"Finance ID": row["Finance ID"],
|
||||
Balance: row.Balance,
|
||||
};
|
||||
});
|
||||
|
||||
exportToPDF(
|
||||
pdfData,
|
||||
"advance-payments",
|
||||
["Date", "Project", "Credit", "Debit", "Finance ID", "Balance"]
|
||||
);
|
||||
break;
|
||||
|
||||
case "print":
|
||||
if (tableRef?.current) printTable(tableRef.current);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
export default handleAdvancePaymentExport;
|
||||
@ -9,6 +9,7 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
|
||||
import "../common/TextEditor/Editor.css";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
|
||||
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
|
||||
|
||||
const NoteCardDirectoryEditable = ({
|
||||
noteItem,
|
||||
@ -22,14 +23,14 @@ const NoteCardDirectoryEditable = ({
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRestoring, setIsRestoring] = useState(false);
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [open_contact, setOpen_contact] = useState(null);
|
||||
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
|
||||
|
||||
const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
|
||||
setEditing(false)
|
||||
);
|
||||
const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
|
||||
useActiveInActiveNote(() => setIsDeleteModalOpen(false));
|
||||
const { setContactOpen } = useDirectoryContext();
|
||||
|
||||
|
||||
const handleUpdateNote = async () => {
|
||||
const payload = {
|
||||
@ -45,12 +46,6 @@ const NoteCardDirectoryEditable = ({
|
||||
ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
|
||||
};
|
||||
|
||||
const contactProfile = (contactId) => {
|
||||
DirectoryRepository.GetContactProfile(contactId).then((res) => {
|
||||
setOpen_contact(res?.data);
|
||||
setIsOpenModalNote(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRestore = async () => {
|
||||
try {
|
||||
@ -88,7 +83,9 @@ const NoteCardDirectoryEditable = ({
|
||||
<div>
|
||||
<div
|
||||
className="d-flex ms-3 align-middle cursor-pointer"
|
||||
onClick={() => contactProfile(noteItem.contactId)}
|
||||
onClick={() =>
|
||||
setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
||||
@ -97,6 +94,7 @@ const NoteCardDirectoryEditable = ({
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="d-flex ms-0 align-middle"></div>
|
||||
<div className="d-flex ms-3 mt-2">
|
||||
<span className="text-muted">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
@ -24,7 +24,7 @@ import ExpenseFilterChips from "./ExpenseFilterChips";
|
||||
import { defaultFilter } from "./ExpenseSchema";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRef, onDataFiltered }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const {
|
||||
@ -46,6 +46,12 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
filters,
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (onDataFiltered) {
|
||||
onDataFiltered(data?.data ?? []);
|
||||
}
|
||||
}, [data, onDataFiltered]);
|
||||
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
@ -258,7 +264,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
groupBy={groupBy}
|
||||
/>
|
||||
<div
|
||||
className="card-datatable table-responsive "
|
||||
className="card-datatable table-responsive" ref={tableRef}
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
@ -313,8 +319,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
>
|
||||
<div
|
||||
className={`d-flex px-2 ${col.key === "status"
|
||||
? "justify-content-center"
|
||||
: ""
|
||||
? "justify-content-center"
|
||||
: ""
|
||||
}
|
||||
${col.key === "amount"
|
||||
? "justify-content-end"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
EXPENSE_DRAFT,
|
||||
EXPENSE_REJECTEDBY,
|
||||
@ -22,7 +22,7 @@ import Error from "../common/Error";
|
||||
import Pagination from "../common/Pagination";
|
||||
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
|
||||
|
||||
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
|
||||
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy", tableRef, onDataFiltered }) => {
|
||||
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
|
||||
const navigate = useNavigate();
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
@ -30,6 +30,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
@ -149,6 +150,12 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (onDataFiltered) {
|
||||
onDataFiltered(data?.data ?? []);
|
||||
}
|
||||
}, [data, onDataFiltered]);
|
||||
|
||||
if (isError) {
|
||||
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
||||
}
|
||||
@ -222,7 +229,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
paramData={deletingId}
|
||||
/>
|
||||
)}
|
||||
<div className="card page-min-h table-responsive px-sm-4">
|
||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
||||
<div className="card-datatable mx-2" id="payment-request-table ">
|
||||
<div className="col-12 mb-2 mt-2">
|
||||
<PaymentRequestFilterChips
|
||||
@ -240,7 +247,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center">Action</th>
|
||||
<th className="text-start">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -262,7 +269,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
</td>
|
||||
</tr>
|
||||
{items?.map((paymentRequest) => (
|
||||
<tr key={paymentRequest.id} style={{ height: "40px" }}>
|
||||
<tr key={paymentRequest.id} style={{ height: "40px" }}>
|
||||
{paymentRequestColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
|
||||
85
src/components/PaymentRequest/handleExpenseExport.jsx
Normal file
85
src/components/PaymentRequest/handleExpenseExport.jsx
Normal file
@ -0,0 +1,85 @@
|
||||
import ExpenseRepository from "../../repositories/ExpsenseRepository";
|
||||
import moment from "moment";
|
||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
||||
import showToast from "../../services/toastService";
|
||||
|
||||
const HandleExpenseExport = async (
|
||||
type,
|
||||
filters = {},
|
||||
searchString = "",
|
||||
tableRef = null,
|
||||
setLoading = null
|
||||
) => {
|
||||
try {
|
||||
if (setLoading) setLoading(true);
|
||||
|
||||
const safeSearchString = typeof searchString === "string" ? searchString : "";
|
||||
let allExpenses = [];
|
||||
let pageNumber = 1;
|
||||
const pageSize = 1000; // fetch 1000 per API call
|
||||
let hasMore = true;
|
||||
|
||||
while (hasMore) {
|
||||
const response = await ExpenseRepository.GetExpenseList(
|
||||
pageSize,
|
||||
pageNumber,
|
||||
filters,
|
||||
safeSearchString
|
||||
);
|
||||
|
||||
const currentPageData = response?.data?.data || [];
|
||||
allExpenses = allExpenses.concat(currentPageData);
|
||||
|
||||
// If returned data length is less than pageSize, we reached the last page
|
||||
if (currentPageData.length < pageSize) {
|
||||
hasMore = false;
|
||||
} else {
|
||||
pageNumber += 1; // fetch next page
|
||||
}
|
||||
}
|
||||
|
||||
if (!allExpenses.length) {
|
||||
showToast("No expenses found!", "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
// Map export data
|
||||
const exportData = allExpenses.map((item) => ({
|
||||
"Expense ID": item?.expenseUId ?? "-",
|
||||
"Expense Category": item?.expenseCategory?.name ?? "-",
|
||||
"Payment Mode": item?.paymentMode?.name ?? "-",
|
||||
"Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
|
||||
"Submitted": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
|
||||
"Amount": item?.amount != null
|
||||
? `${item.amount.toLocaleString()} ${item.currency?.currencyCode ?? ""}`
|
||||
: "-",
|
||||
"Status": item?.status?.name ?? "-",
|
||||
}));
|
||||
|
||||
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(exportData, "Expenses");
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(exportData, "Expenses");
|
||||
break;
|
||||
case "pdf":
|
||||
exportToPDF(exportData, "Expenses");
|
||||
break;
|
||||
case "print":
|
||||
if (tableRef?.current) printTable(tableRef.current);
|
||||
break;
|
||||
default:
|
||||
console.warn("Unknown export type:", type);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
showToast("Failed to export expenses", "error");
|
||||
} finally {
|
||||
if (setLoading) setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
export default HandleExpenseExport;
|
||||
84
src/components/PaymentRequest/handlePaymentRequestExport.jsx
Normal file
84
src/components/PaymentRequest/handlePaymentRequestExport.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import moment from "moment";
|
||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
||||
import ExpenseRepository from "../../repositories/ExpsenseRepository";
|
||||
|
||||
const HandlePaymentRequestExport = async (
|
||||
type,
|
||||
filters = {},
|
||||
searchString = "",
|
||||
tableRef = null,
|
||||
setLoading = null
|
||||
) => {
|
||||
try {
|
||||
if (setLoading) setLoading(true);
|
||||
|
||||
const safeSearchString = typeof searchString === "string" ? searchString : "";
|
||||
let allPaymentRequest = [];
|
||||
let pageNumber = 1;
|
||||
const pageSize = 1000;
|
||||
let hasMore = true;
|
||||
|
||||
while (hasMore) {
|
||||
const response = await ExpenseRepository.GetPaymentRequestList(
|
||||
pageSize,
|
||||
pageNumber,
|
||||
filters,
|
||||
true, // isActive
|
||||
safeSearchString
|
||||
);
|
||||
|
||||
const currentPageData = response?.data?.data || [];
|
||||
allPaymentRequest = allPaymentRequest.concat(currentPageData);
|
||||
|
||||
if (currentPageData.length < pageSize) {
|
||||
hasMore = false;
|
||||
} else {
|
||||
pageNumber += 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (!allPaymentRequest.length) {
|
||||
console.warn("No payment requests found!");
|
||||
return;
|
||||
}
|
||||
|
||||
const exportData = allPaymentRequest.map((item) => ({
|
||||
"Request ID": item?.paymentRequestUID ?? "-",
|
||||
"Title": item?.title ?? "-",
|
||||
"Payee": item?.payee ?? "-",
|
||||
"Amount": item?.amount != null ? Number(item.amount).toLocaleString() : "-",
|
||||
"Currency": item?.currency?.currencyCode ?? "-",
|
||||
"Created At": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
|
||||
"Due Date": item?.dueDate ? moment(item.dueDate).format("DD-MMM-YYYY") : "-",
|
||||
"Status": item?.expenseStatus?.name ?? "-",
|
||||
"Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
|
||||
"Project": item?.project?.name ?? "-",
|
||||
}));
|
||||
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(exportData, "PaymentRequests");
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(exportData, "PaymentRequests");
|
||||
break;
|
||||
case "pdf":
|
||||
exportToPDF(exportData, "PaymentRequests");
|
||||
break;
|
||||
case "print":
|
||||
if (tableRef?.current) printTable(tableRef.current);
|
||||
break;
|
||||
default:
|
||||
console.warn("Unknown export type:", type);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Export failed:", err);
|
||||
} finally {
|
||||
if (setLoading) setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default HandlePaymentRequestExport;
|
||||
@ -100,7 +100,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
||||
<h5 className="text-center mb-2">Manage Buildings </h5>
|
||||
<h5 className="text-center mb-2">Manage Buildings</h5>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Building</label>
|
||||
<select
|
||||
@ -150,7 +150,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-5">
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
|
||||
@ -163,7 +163,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-end mt-5">
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
|
||||
@ -348,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-end mt-5">
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
|
||||
@ -187,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="col-12 text-end mt-5">
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
@ -199,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
serviceId={selectedService}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center py-5">
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted fs-6">No infrastructure data available.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -13,7 +13,8 @@ const TeamAssignToProject = ({ closeModal }) => {
|
||||
useProjectAssignedOrganizationsName(project);
|
||||
return (
|
||||
<div className="container">
|
||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
|
||||
<h5 className="mb-4">Assign Employee To Project</h5>
|
||||
|
||||
<div className="row align-items-center gx-5">
|
||||
<div className="col">
|
||||
|
||||
@ -155,7 +155,7 @@ if (employees.length === 0) {
|
||||
|
||||
|
||||
return (
|
||||
<div className=" position-relative">
|
||||
<div className="position-relative mt-5">
|
||||
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
||||
<thead className=" position-sticky top-0">
|
||||
<tr>
|
||||
@ -232,15 +232,15 @@ if (employees.length === 0) {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 ">
|
||||
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 my-3">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
className="btn btn-sm btn-label-secondary mt-2"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button onClick={onSubmit} className="btn btn-primary">
|
||||
<button onClick={onSubmit} className="btn btn-primary btn-sm mt-2">
|
||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
EXPENSE_DRAFT,
|
||||
EXPENSE_REJECTEDBY,
|
||||
@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
|
||||
const { setManageRequest, setVieRequest, setViewRecurring } =
|
||||
useRecurringExpenseContext();
|
||||
const navigate = useNavigate();
|
||||
@ -70,9 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
align: "text-end",
|
||||
getValue: (e) =>
|
||||
e?.amount
|
||||
? `${
|
||||
e?.currency?.symbol ? e.currency.symbol + " " : ""
|
||||
}${e.amount.toLocaleString()}`
|
||||
? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
|
||||
}${e.amount.toLocaleString()}`
|
||||
: "N/A",
|
||||
},
|
||||
{
|
||||
@ -112,6 +111,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
const filteredData = useMemo(
|
||||
() =>
|
||||
data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
|
||||
[],
|
||||
[data?.data, filterStatuses]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onDataFiltered(filteredData);
|
||||
}, [filteredData, onDataFiltered]);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
@ -150,10 +160,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const filteredData = data?.data?.filter((item) =>
|
||||
filterStatuses.includes(item?.status?.id)
|
||||
);
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setDeletingId(id);
|
||||
DeleteExpense(
|
||||
@ -180,111 +186,111 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="card page-min-h table-responsive px-sm-4">
|
||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
<div className="mx-2">
|
||||
{Array.isArray(filteredData) && filteredData.length > 0 && (
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{filteredData?.length > 0 ? (
|
||||
filteredData?.map((recurringExpense) => (
|
||||
<tr
|
||||
key={recurringExpense.id}
|
||||
className="align-middle"
|
||||
style={{ height: "40px" }}
|
||||
>
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""} py-3`}
|
||||
>
|
||||
{col?.customRender
|
||||
? col?.customRender(recurringExpense)
|
||||
: col?.getValue(recurringExpense)}
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex flex-row gap-2 gap-0">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewRecurring({
|
||||
recurringId: recurringExpense?.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||
<li
|
||||
onClick={() =>
|
||||
setManageRequest({
|
||||
IsOpen: true,
|
||||
RecurringId: recurringExpense?.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
||||
Modify
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(recurringExpense.id);
|
||||
}}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<div className="mx-2">
|
||||
{Array.isArray(filteredData) && filteredData.length > 0 && (
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<td
|
||||
colSpan={recurringExpenseColumns?.length + 1}
|
||||
className="text-center border-0 py-8"
|
||||
></td>
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-end">Action</th>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{!filteredData ||
|
||||
filteredData.length === 0
|
||||
&& (
|
||||
<div className="d-flex justify-content-center align-items-center h-64">
|
||||
{isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
|
||||
</div>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{filteredData?.length > 0 ? (
|
||||
filteredData?.map((recurringExpense) => (
|
||||
<tr
|
||||
key={recurringExpense.id}
|
||||
className="align-middle"
|
||||
style={{ height: "40px" }}
|
||||
>
|
||||
{recurringExpenseColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""} py-3`}
|
||||
>
|
||||
{col?.customRender
|
||||
? col?.customRender(recurringExpense)
|
||||
: col?.getValue(recurringExpense)}
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column bg-white text-end">
|
||||
<div className="d-flex justify-content-end flex-row gap-2 gap-0">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewRecurring({
|
||||
recurringId: recurringExpense?.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||
<li
|
||||
onClick={() =>
|
||||
setManageRequest({
|
||||
IsOpen: true,
|
||||
RecurringId: recurringExpense?.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
||||
Modify
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(recurringExpense.id);
|
||||
}}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={recurringExpenseColumns?.length + 1}
|
||||
className="text-center border-0 py-8"
|
||||
></td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
{!filteredData ||
|
||||
filteredData.length === 0
|
||||
&& (
|
||||
<div className="d-flex justify-content-center align-items-center h-64">
|
||||
{isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
|
||||
107
src/components/RecurringExpense/handleRecurringExpenseExport.jsx
Normal file
107
src/components/RecurringExpense/handleRecurringExpenseExport.jsx
Normal file
@ -0,0 +1,107 @@
|
||||
import moment from "moment";
|
||||
import {
|
||||
exportToCSV,
|
||||
exportToExcel,
|
||||
exportToPDF,
|
||||
printTable,
|
||||
} from "../../utils/tableExportUtils";
|
||||
import { FREQUENCY_FOR_RECURRING } from "../../utils/constants";
|
||||
import ExpenseRepository from "../../repositories/ExpsenseRepository";
|
||||
|
||||
const HandleRecurringExpenseExport = async (
|
||||
type,
|
||||
filters = {},
|
||||
searchString = "",
|
||||
tableRef = null,
|
||||
setLoading = null
|
||||
) => {
|
||||
try {
|
||||
if (setLoading) setLoading(true);
|
||||
|
||||
const safeSearchString =
|
||||
typeof searchString === "string" ? searchString : "";
|
||||
let allRecurringExpense = [];
|
||||
let pageNumber = 1;
|
||||
const pageSize = 1000;
|
||||
let hasMore = true;
|
||||
|
||||
while (hasMore) {
|
||||
const response = await ExpenseRepository.GetRecurringExpenseList(
|
||||
pageSize,
|
||||
pageNumber,
|
||||
filters,
|
||||
true, // isActive
|
||||
safeSearchString
|
||||
);
|
||||
|
||||
const currentPageData = response?.data?.data || [];
|
||||
allRecurringExpense = allRecurringExpense.concat(currentPageData);
|
||||
|
||||
if (currentPageData.length < pageSize) {
|
||||
hasMore = false;
|
||||
} else {
|
||||
pageNumber += 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (!allRecurringExpense.length) {
|
||||
console.warn("No payment requests found!");
|
||||
return;
|
||||
}
|
||||
|
||||
const exportData = allRecurringExpense.map((item) => ({
|
||||
Category: item?.expenseCategory?.name ?? "-",
|
||||
Title: item?.title ?? "-",
|
||||
Payee: item?.payee ?? "-",
|
||||
Frequency:
|
||||
item?.frequency !== undefined && item?.frequency !== null
|
||||
? FREQUENCY_FOR_RECURRING[item?.frequency] ?? "-"
|
||||
: "-",
|
||||
Amount: item?.amount ? item.amount.toLocaleString() : "-",
|
||||
Currency: item?.currency?.symbol ?? "-",
|
||||
"Next Generation Date": item?.nextGenerationDate
|
||||
? moment(item.nextGenerationDate).format("DD-MMM-YYYY")
|
||||
: "-",
|
||||
Status: item?.status?.name ?? "-",
|
||||
"Created At": item?.createdAt
|
||||
? moment(item.createdAt).format("DD-MMM-YYYY")
|
||||
: "-",
|
||||
}));
|
||||
|
||||
// COLUMN ORDER
|
||||
const columns = [
|
||||
"Category",
|
||||
"Title",
|
||||
"Payee",
|
||||
"Frequency",
|
||||
"Amount",
|
||||
"Currency",
|
||||
"Next Generation Date",
|
||||
"Status",
|
||||
"Created At",
|
||||
];
|
||||
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(exportData, "recurring-expense", columns);
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(exportData, "recurring-expense", columns);
|
||||
break;
|
||||
case "pdf":
|
||||
exportToPDF(exportData, "recurring-expense", columns);
|
||||
break;
|
||||
case "print":
|
||||
if (tableRef?.current) printTable(tableRef.current);
|
||||
break;
|
||||
default:
|
||||
console.warn("Unknown export type:", type);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Export failed:", err);
|
||||
} finally {
|
||||
if (setLoading) setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
export default HandleRecurringExpenseExport;
|
||||
@ -183,7 +183,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
<span className="danger-text">{errors.shortName.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="name" required>
|
||||
Select Status
|
||||
</Label>
|
||||
@ -200,7 +200,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
<span className="danger-text">{errors.statusId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 mb-2">
|
||||
<div className="col-12 mb-2">
|
||||
<SelectMultiple
|
||||
options={data?.data}
|
||||
isLoading={isLoading}
|
||||
@ -297,7 +297,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-end gap-4">
|
||||
<div className="d-flex justify-content-end gap-4 mt-4">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
disabled={isPending || isUpdating}
|
||||
|
||||
@ -140,6 +140,7 @@ const ManageJob = ({ Job }) => {
|
||||
formData.projectId = projectId;
|
||||
|
||||
CreateJob(formData);
|
||||
setManageJob({ isOpen: false, jobId: null });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -58,12 +58,12 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const logoImage = getValues("logoImage");
|
||||
if (logoImage) {
|
||||
setLogoPreview(logoImage);
|
||||
setLogoName("Uploaded Logo");
|
||||
}
|
||||
}, [getValues]);
|
||||
const logoImage = getValues("logoImage");
|
||||
if (logoImage) {
|
||||
setLogoPreview(logoImage);
|
||||
setLogoName("Uploaded Logo");
|
||||
}
|
||||
}, [getValues]);
|
||||
|
||||
|
||||
return (
|
||||
@ -134,7 +134,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
control={control}
|
||||
placeholder="DD-MM-YYYY"
|
||||
maxDate={new Date()}
|
||||
className={errors.onBoardingDate ? "is-invalid" : ""}
|
||||
className={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
|
||||
/>
|
||||
{errors.onBoardingDate && (
|
||||
<div className="invalid-feedback">
|
||||
@ -210,7 +210,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6">
|
||||
<SelectMultiple
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Services"
|
||||
options={services?.data}
|
||||
|
||||
@ -154,7 +154,7 @@ const SelectMultiple = ({
|
||||
className="multi-select-dropdown-container"
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
<label className="form-label mb-0">{label}</label>
|
||||
<Label className={name} required={required}></Label>
|
||||
|
||||
<div
|
||||
|
||||
@ -109,7 +109,7 @@ const ServiceGroups = ({ service }) => {
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
<p className="m-0 fw-bold ">{group.name}</p>
|
||||
<p className="m-0 ">{group.name}</p>
|
||||
</div>
|
||||
<div className="d-flex flex-row gap-3">
|
||||
<div className="d-flex flex-row gap-2">
|
||||
|
||||
@ -132,7 +132,7 @@ export const useAddSubscription = (onSuccessCallback) => {
|
||||
onSuccess: (data, variables) => {
|
||||
const { tenantId } = variables;
|
||||
showToast("Tenant Plan Added SuccessFully", "success");
|
||||
queryClient.invalidateQueries({ queryKey: ["Tenant", tenantId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["Tenants", tenantId] });
|
||||
if (onSuccessCallback) onSuccessCallback();
|
||||
},
|
||||
onError: (error) => {
|
||||
|
||||
@ -1,108 +1,34 @@
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { useEmployee } from "../../hooks/useEmployees";
|
||||
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
|
||||
import { useForm } from "react-hook-form";
|
||||
import Label from "../../components/common/Label";
|
||||
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
|
||||
import { employee } from "../../data/masters";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useExpenseTransactions } from "../../hooks/useExpense";
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../components/common/Breadcrumb'
|
||||
import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList'
|
||||
import { useForm } from 'react-hook-form';
|
||||
import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
|
||||
|
||||
export const AdvancePaymentContext = createContext();
|
||||
export const useAdvancePaymentContext = () => {
|
||||
const context = useContext(AdvancePaymentContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useAdvancePaymentContext must be used within an AdvancePaymentProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
const AdvancePaymentPage = () => {
|
||||
const { employeeId } = useParams();
|
||||
|
||||
const { data: transactionData } = useExpenseTransactions(employeeId, {
|
||||
enabled: !!employeeId
|
||||
});
|
||||
|
||||
const employeeName = useMemo(() => {
|
||||
if (Array.isArray(transactionData) && transactionData.length > 0) {
|
||||
const emp = transactionData[0].employee;
|
||||
if (emp) return `${emp.firstName} ${emp.lastName}`;
|
||||
}
|
||||
return "";
|
||||
}, [transactionData]);
|
||||
|
||||
const [balance, setBalance] = useState(null);
|
||||
const { control, reset, watch } = useForm({
|
||||
defaultValues: {
|
||||
employeeId: employeeId || "",
|
||||
searchString: "",
|
||||
},
|
||||
});
|
||||
|
||||
const selectedEmployeeId = employeeId || watch("employeeId");
|
||||
|
||||
const searchString = watch("searchString");
|
||||
|
||||
useEffect(() => {
|
||||
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
|
||||
reset({
|
||||
employeeId: selectedEmpoyee || "",
|
||||
const { control, reset, watch } = useForm({
|
||||
defaultValues: {
|
||||
searchString: "",
|
||||
},
|
||||
});
|
||||
}, [reset]);
|
||||
const searchString = watch("searchString");
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Finance", link: "/advance-payment" },
|
||||
{ label: "Advance Payment" },
|
||||
]}
|
||||
/>
|
||||
<div className="card px-4 py-2 page-min-h">
|
||||
<div className="row py-1">
|
||||
<AdvancePaymentList1 searchString={searchString} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<AdvancePaymentContext.Provider value={{ setBalance }}>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Finance", link: "/advance-payment" },
|
||||
{ label: "Advance Payment", link: "/advance-payment" },
|
||||
employeeName && { label: employeeName, link: "" },
|
||||
].filter(Boolean)}
|
||||
/>
|
||||
|
||||
<div className="card px-4 py-2 page-min-h ">
|
||||
<div className="row py-1 justify-content-end">
|
||||
<div className="col-md-8 d-flex align-items-center justify-content-end">
|
||||
{balance ? (
|
||||
<>
|
||||
<label className="fs-5 fw-semibold">Current Balance : </label>
|
||||
<span
|
||||
className={`${balance > 0 ? "text-success" : "text-danger"
|
||||
} fs-5 fw-bold ms-1`}
|
||||
>
|
||||
{balance > 0 ? (
|
||||
<i className="bx bx-plus b-sm"></i>
|
||||
) : (
|
||||
<i className="bx bx-minus b-sm"></i>
|
||||
)}{" "}
|
||||
{formatFigure(balance, {
|
||||
type: "currency",
|
||||
currency: "INR",
|
||||
})}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} />
|
||||
</div>
|
||||
</div>
|
||||
</AdvancePaymentContext.Provider>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancePaymentPage;
|
||||
export default AdvancePaymentPage
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react'
|
||||
import Breadcrumb from '../../components/common/Breadcrumb'
|
||||
import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList1'
|
||||
import { useForm } from 'react-hook-form';
|
||||
import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
|
||||
|
||||
const AdvancePaymentPage1 = () => {
|
||||
const { control, reset, watch } = useForm({
|
||||
defaultValues: {
|
||||
searchString: "",
|
||||
},
|
||||
});
|
||||
const searchString = watch("searchString");
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Finance", link: "/advance-payment" },
|
||||
{ label: "Advance Payment" },
|
||||
]}
|
||||
/>
|
||||
<div className="card px-4 py-2 page-min-h">
|
||||
<div className="row py-1">
|
||||
<AdvancePaymentList1 searchString={searchString} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancePaymentPage1
|
||||
149
src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx
Normal file
149
src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx
Normal file
@ -0,0 +1,149 @@
|
||||
import React, {
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { useEmployee } from "../../hooks/useEmployees";
|
||||
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
|
||||
import { useForm } from "react-hook-form";
|
||||
import Label from "../../components/common/Label";
|
||||
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentListDetails";
|
||||
import { employee } from "../../data/masters";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useExpenseTransactions } from "../../hooks/useExpense";
|
||||
import handleAdvancePaymentExport from "../../components/AdvancePayment/handleAdvancePaymentExport";
|
||||
|
||||
export const AdvancePaymentContext = createContext();
|
||||
export const useAdvancePaymentContext = () => {
|
||||
const context = useContext(AdvancePaymentContext);
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
"useAdvancePaymentContext must be used within an AdvancePaymentProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
const AdvancePaymentPageDetails = () => {
|
||||
const { employeeId } = useParams();
|
||||
|
||||
const { data: transactionData } = useExpenseTransactions(employeeId, {
|
||||
enabled: !!employeeId
|
||||
});
|
||||
|
||||
const employeeName = useMemo(() => {
|
||||
if (Array.isArray(transactionData) && transactionData.length > 0) {
|
||||
const emp = transactionData[0].employee;
|
||||
if (emp) return `${emp.firstName} ${emp.lastName}`;
|
||||
}
|
||||
return "";
|
||||
}, [transactionData]);
|
||||
|
||||
const [balance, setBalance] = useState(null);
|
||||
const { control, reset, watch } = useForm({
|
||||
defaultValues: {
|
||||
employeeId: employeeId || "",
|
||||
searchString: "",
|
||||
},
|
||||
});
|
||||
|
||||
const selectedEmployeeId = employeeId || watch("employeeId");
|
||||
|
||||
const searchString = watch("searchString");
|
||||
|
||||
useEffect(() => {
|
||||
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
|
||||
reset({
|
||||
employeeId: selectedEmpoyee || "",
|
||||
});
|
||||
}, [reset]);
|
||||
|
||||
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const handleExport = (type) => {
|
||||
handleAdvancePaymentExport(type, transactionData, tableRef);
|
||||
};
|
||||
|
||||
return (
|
||||
<AdvancePaymentContext.Provider value={{ setBalance }}>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Finance", link: "/advance-payment" },
|
||||
{ label: "Advance Payment", link: "/advance-payment" },
|
||||
employeeName && { label: employeeName, link: "" },
|
||||
].filter(Boolean)}
|
||||
/>
|
||||
|
||||
<div className="card px-4 py-2 page-min-h ">
|
||||
<div className="row py-1 align-items-center">
|
||||
|
||||
{/* LEFT SIDE → EXPORT DROPDOWN */}
|
||||
<div className="col-md-4 d-flex align-items-center">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT SIDE → CURRENT BALANCE */}
|
||||
<div className="col-md-8 d-flex justify-content-end align-items-center">
|
||||
{balance !== null ? (
|
||||
<>
|
||||
<label className="fs-5 fw-semibold">Current Balance :</label>
|
||||
<span
|
||||
className={`${balance > 0 ? "text-success" : "text-danger"} fs-5 fw-bold ms-1`}
|
||||
>
|
||||
{balance > 0 && <i className="bx bx-plus b-sm"></i>}{" "}
|
||||
{formatFigure(balance, { type: "currency", currency: "INR" })}
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} tableRef={tableRef} />
|
||||
</div>
|
||||
</div>
|
||||
</AdvancePaymentContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvancePaymentPageDetails;
|
||||
@ -19,7 +19,7 @@ import BucketList from "../../components/Directory/BucketList";
|
||||
import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
|
||||
import ContactProfile from "../../components/Directory/ContactProfile";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import { exportToCSV } from "../../utils/exportUtils";
|
||||
import { exportToCSV,exportToExcel,exportToPDF1,exportToPDF,printTable } from "../../utils/tableExportUtils";
|
||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
|
||||
@ -64,11 +64,49 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
const [ContactData, setContactData] = useState([]);
|
||||
|
||||
const handleExport = (type) => {
|
||||
if (activeTab === "notes" && type === "csv") {
|
||||
exportToCSV(notesData, "notes.csv");
|
||||
}
|
||||
if (activeTab === "contacts" && type === "csv") {
|
||||
exportToCSV(ContactData, "contact.csv");
|
||||
let exportData = activeTab === "notes" ? notesData : ContactData;
|
||||
if (!exportData?.length) return;
|
||||
|
||||
switch (type) {
|
||||
case "csv":
|
||||
exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts");
|
||||
break;
|
||||
case "excel":
|
||||
exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts");
|
||||
break;
|
||||
case "pdf":
|
||||
if (activeTab === "notes") {
|
||||
exportToPDF1(exportData, "Notes");
|
||||
} else {
|
||||
// Columns for Contacts PDF
|
||||
const columns = [
|
||||
"Email",
|
||||
"Phone",
|
||||
"Organization",
|
||||
"Category",
|
||||
"Tags",
|
||||
];
|
||||
|
||||
// Sanitize and trim long text to avoid PDF overflow
|
||||
const sanitizedData = exportData.map((item) => ({
|
||||
Email: (item.Email || "").slice(0, 40),
|
||||
Phone: (item.Phone || "").slice(0, 20),
|
||||
Organization: (item.Organization || "").slice(0, 30),
|
||||
Category: (item.Category || "").slice(0, 20),
|
||||
Tags: (item.Tags || "").slice(0, 40),
|
||||
}));
|
||||
|
||||
// Export with proper spacing
|
||||
exportToPDF(sanitizedData, "Contacts", columns, {
|
||||
columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
|
||||
fontSizeHeader: 12,
|
||||
fontSizeRow: 10,
|
||||
rowHeight: 25,
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.warn("Unsupported export type");
|
||||
}
|
||||
};
|
||||
|
||||
@ -133,7 +171,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
]}
|
||||
></Breadcrumb>
|
||||
)}
|
||||
<div className="card">
|
||||
<div className="card ">
|
||||
<div className="d-flex-row px-2">
|
||||
<div className="d-flex justify-content-between align-items-center mb-1">
|
||||
<ul className="nav nav-tabs">
|
||||
@ -158,13 +196,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mb-1 px-md-2 px-0 py-3">
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-10 mb-2">
|
||||
{activeTab === "notes" && (
|
||||
<div className="col-8 col-md-3">
|
||||
<div className="mb-1 px-2 py-3">
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="d-flex align-items-center gap-3">
|
||||
{activeTab === "notes" && (
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
@ -172,13 +208,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
value={searchNote}
|
||||
onChange={(e) => setSearchNote(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{activeTab === "contacts" && (
|
||||
<div className="d-flex align-items-center gap-3">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-2">
|
||||
<div className="col-7 col-md-4">
|
||||
{activeTab === "contacts" && (
|
||||
<div className="d-flex align-items-center gap-3">
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
@ -186,61 +220,117 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
||||
value={searchContact}
|
||||
onChange={(e) => setsearchContact(e.target.value)}
|
||||
/>
|
||||
<div className="d-none d-md-flex gap-2">
|
||||
{" "}
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${gridView
|
||||
? " btn-primary"
|
||||
: " btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setGridView(true)}
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${!gridView
|
||||
? "btn-primary"
|
||||
: "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setGridView(false)}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon p-0 m-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
title="More Actions"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm ">
|
||||
{activeTab === "contacts" && (
|
||||
<li className="dropdown-item d-flex align-items-center">
|
||||
<div className="form-check form-switch mb-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveContactsSwitch"
|
||||
checked={showActive}
|
||||
onChange={(e) =>
|
||||
setShowActive(e.target.checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span>
|
||||
{showActive
|
||||
? "Active Contacts"
|
||||
: "Inactive Contacts"}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item d-flex align-items-center gap-2"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file"></i>
|
||||
<span>Export to CSV</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item d-flex align-items-center gap-2"
|
||||
onClick={() => handleExport("excel")}
|
||||
>
|
||||
<i className="bx bx-spreadsheet"></i>
|
||||
<span>Export to Excel</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item d-flex align-items-center gap-2"
|
||||
onClick={() => handleExport("pdf")}
|
||||
>
|
||||
<i className="bx bxs-file-pdf"></i>
|
||||
<span>Export to PDF</span>
|
||||
</button>
|
||||
</li>
|
||||
<li className={`d-block d-md-none ${activeTab === "contacts" ? "d-block" : "d-none"}`}>
|
||||
<span
|
||||
className={`dropdown-item ${gridView ? " text-primary" : ""
|
||||
}`}
|
||||
onClick={() => setGridView(true)}
|
||||
>
|
||||
<i className="bx bx-grid-alt"></i>
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
|
||||
<i className="bx bx-grid-alt"></i> Card View
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block" : "d-none"}`}>
|
||||
<span
|
||||
className={`dropdown-item ${!gridView ? "text-primary" : ""
|
||||
}`}
|
||||
onClick={() => setGridView(false)}
|
||||
>
|
||||
<i className="bx bx-list-ul"></i>
|
||||
</button>
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-end d-none d-md-flex">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showActive}
|
||||
onChange={(e) => setShowActive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
{showActive ? "Active" : "In-active"} Contacts
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-2 d-flex justify-content-end align-items-center gap-2">
|
||||
<div className=" btn-group">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
<i className="bx bx-list-ul"></i> List View
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{/* Divider */}
|
||||
{activeTab === "contacts" && (
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -125,8 +125,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className="card text-center d-flex align-items-center justify-content-center"
|
||||
style={{ height: "200px" }}
|
||||
className="card text-center page-min-h d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<p className="text-muted mb-0">
|
||||
{debouncedSearch
|
||||
|
||||
@ -30,6 +30,7 @@ import {
|
||||
SearchSchema,
|
||||
} from "../../components/Expenses/ExpenseSchema";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import HandleExpenseExport from "../../components/PaymentRequest/HandleExpenseExport";
|
||||
|
||||
// Context
|
||||
export const ExpenseContext = createContext();
|
||||
@ -70,6 +71,8 @@ const ExpensePage = () => {
|
||||
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
const [filterData, setFilterdata] = useState(defaultFilter);
|
||||
const tableRef = useRef(null);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const removeFilterChip = (key, id) => {
|
||||
setFilters((prev) => {
|
||||
const updated = { ...prev };
|
||||
@ -114,6 +117,11 @@ const ExpensePage = () => {
|
||||
removeFilterChip,
|
||||
};
|
||||
|
||||
const handleExport = (type) => {
|
||||
HandleExpenseExport(type, filters, searchText, tableRef);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<ExpenseContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
@ -126,17 +134,19 @@ const ExpensePage = () => {
|
||||
<div className="card my-3 px-sm-4 px-0">
|
||||
<div className="card-body py-2 px-3 me-n1">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Expense"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
<div className="col-md-8 col-sm-12 mb-2 mb-md-0">
|
||||
<div className="d-flex align-items-center flex-wrap gap-0">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Expense"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
<div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
@ -154,6 +164,47 @@ const ExpensePage = () => {
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 3-Dots Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm" style={{ minWidth: "220px" }}>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
||||
<i className="bx bx-printer me-2"></i> Print
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
||||
<i className="bx bx-file me-2"></i> CSV
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-2"></i> Excel
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
||||
<i className="bx bxs-file-pdf me-2"></i> PDF
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -163,6 +214,8 @@ const ExpensePage = () => {
|
||||
filters={filters}
|
||||
groupBy={groupBy}
|
||||
searchText={searchText}
|
||||
tableRef={tableRef}
|
||||
onDataFiltered={setFilteredData}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@ -9,6 +9,7 @@ import { defaultPaymentRequestFilter } from "../../components/PaymentRequest/Pay
|
||||
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import MakeExpense from "../../components/PaymentRequest/MakeExpense";
|
||||
import HandlePaymentRequestExport from "../../components/PaymentRequest/HandlePaymentRequestExport";
|
||||
|
||||
export const PaymentRequestContext = createContext();
|
||||
export const usePaymentRequestContext = () => {
|
||||
@ -25,12 +26,15 @@ const PaymentRequestPage = () => {
|
||||
const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
||||
const [filterData, setFilterdata] = useState(null);
|
||||
const [ViewDocument, setDocumentView] = useState({ IsOpen: false, Image: null });
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [isExpenseGenerate, setIsExpenseGenerate] = useState({ IsOpen: null, RequestId: null });
|
||||
const [modalSize, setModalSize] = useState("md");
|
||||
const [search, setSearch] = useState("");
|
||||
const updatedRef = useRef();
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
|
||||
const [exportLoading, setExportLoading] = useState(false);
|
||||
const tableRef = useRef(null);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const contextValue = {
|
||||
setManageRequest,
|
||||
setVieRequest,
|
||||
@ -76,6 +80,10 @@ const PaymentRequestPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleExport = (type) => {
|
||||
HandlePaymentRequestExport(type, filters, search, tableRef, setExportLoading);
|
||||
};
|
||||
|
||||
return (
|
||||
<PaymentRequestContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
@ -92,18 +100,19 @@ const PaymentRequestPage = () => {
|
||||
<div className="card my-3 px-sm-4 px-0">
|
||||
<div className="card-body py-2 px-0 mx-2">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Payment Request"
|
||||
value={search}
|
||||
style={{ minWidth: "200px" }}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
<div className="col-md-8 col-sm-12 mb-2 mb-md-0">
|
||||
<div className="d-flex align-items-center flex-wrap gap-0">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Payment Request"
|
||||
value={search}
|
||||
style={{ minWidth: "200px" }}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-sm-0">
|
||||
<div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
@ -119,7 +128,49 @@ const PaymentRequestPage = () => {
|
||||
Add Payment Request
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* 3-Dots Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm" style={{ minWidth: "220px" }}>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
||||
<i className="bx bx-printer me-2"></i> Print
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
||||
<i className="bx bx-file me-2"></i> CSV
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-2"></i> Excel
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
||||
<i className="bx bxs-file-pdf me-2"></i> PDF
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -129,6 +180,8 @@ const PaymentRequestPage = () => {
|
||||
filterData={filterData}
|
||||
removeFilterChip={handleRemoveChip}
|
||||
clearFilter={clearFilter}
|
||||
tableRef={tableRef}
|
||||
onDataFiltered={setFilteredData}
|
||||
/>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { createContext, useState, useEffect, useContext } from "react";
|
||||
import React, { createContext, useState, useEffect, useContext, useRef } from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
|
||||
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
|
||||
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
|
||||
import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
|
||||
import { defaultRecurringExpense, SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
|
||||
import ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";
|
||||
import HandleRecurringExpenseExport from "../../components/RecurringExpense/HandleRecurringExpenseExport";
|
||||
|
||||
export const RecurringExpenseContext = createContext();
|
||||
export const useRecurringExpenseContext = () => {
|
||||
@ -16,13 +17,19 @@ export const useRecurringExpenseContext = () => {
|
||||
"useRecurringExpenseContext must be used within an ExpenseProvider"
|
||||
);
|
||||
}
|
||||
return context;
|
||||
return context;
|
||||
};
|
||||
const RecurringExpensePage = () => {
|
||||
const [ManageRequest, setManageRequest] = useState({
|
||||
IsOpen: null,
|
||||
RecurringId: null,
|
||||
});
|
||||
const tableRef = useRef(null);
|
||||
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [exportLoading, setExportLoading] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [filters, setFilters] = useState(defaultRecurringExpense);
|
||||
const [viewRecurring, setViewRecurring] = useState({
|
||||
view: false,
|
||||
recurringId: null,
|
||||
@ -44,6 +51,12 @@ const RecurringExpensePage = () => {
|
||||
prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const handleExport = (type) => {
|
||||
HandleRecurringExpenseExport(type, filters, search, tableRef, setExportLoading);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecurringExpenseContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
@ -56,8 +69,8 @@ const RecurringExpensePage = () => {
|
||||
/>
|
||||
|
||||
{/* Top Bar */}
|
||||
<div className="card my-3 px-sm-4 px-0">
|
||||
<div className="card-body py-2 px-1 mx-2">
|
||||
<div className="card my-3 px-sm-0 px-0">
|
||||
<div className="card-body py-2 px-5">
|
||||
<div className="row align-items-center mb-0">
|
||||
{/* Left Column: Search + Filter */}
|
||||
<div className="col-md-8 col-sm-12 mb-2 mb-md-0">
|
||||
@ -67,7 +80,7 @@ const RecurringExpensePage = () => {
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Recurring Expense"
|
||||
value={search}
|
||||
style={{minWidth:"200px"}}
|
||||
style={{ minWidth: "200px" }}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
@ -99,8 +112,8 @@ const RecurringExpensePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Add Button */}
|
||||
<div className="col-md-4 col-sm-12 text-md-end text-end">
|
||||
{/* Right Column: Add Button + 3-Dots Menu */}
|
||||
<div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
@ -116,7 +129,49 @@ const RecurringExpensePage = () => {
|
||||
Add Recurring Expense
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* 3-Dots Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm" style={{ minWidth: "220px" }}>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
||||
<i className="bx bx-printer me-2"></i> Print
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
||||
<i className="bx bx-file me-2"></i> CSV
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-2"></i> Excel
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
||||
<i className="bx bxs-file-pdf me-2"></i> PDF
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -124,6 +179,8 @@ const RecurringExpensePage = () => {
|
||||
<RecurringExpenseList
|
||||
filterStatuses={selectedStatuses}
|
||||
search={search}
|
||||
tableRef={tableRef}
|
||||
onDataFiltered={setFilteredData}
|
||||
/>
|
||||
|
||||
{ManageRequest.IsOpen && (
|
||||
|
||||
@ -298,31 +298,7 @@ const EmployeeList = () => {
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
{/* Switches: All Employees + Inactive */}
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
{/* All Employees Switch */}
|
||||
|
||||
{/* Show Inactive Employees Switch */}
|
||||
|
||||
<div className="form-check form-switch text-start">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckbox"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-0"
|
||||
htmlFor="inactiveEmployeesCheckbox"
|
||||
>
|
||||
{showInactive ? "Hide In-active Employees":"Show In-active Employees"}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: Search + Export + Add Employee */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-start justify-content-md-end gap-3 flex-grow-1">
|
||||
{/* Search Input - ALWAYS ENABLED */}
|
||||
{/* {showAllEmployees && ( */}
|
||||
<div className="dataTables_filter">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
@ -336,57 +312,11 @@ const EmployeeList = () => {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Export Dropdown */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
aria-label="Click me"
|
||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("print")}
|
||||
>
|
||||
<i className="bx bx-printer me-1"></i> Print
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("csv")}
|
||||
>
|
||||
<i className="bx bx-file me-1"></i> CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("excel")}
|
||||
>
|
||||
<i className="bx bxs-file-export me-1"></i> Excel
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item"
|
||||
href="#"
|
||||
onClick={() => handleExport("pdf")}
|
||||
>
|
||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* )} */}
|
||||
</div>
|
||||
|
||||
{/* Right side: Search + Add Employee + Options */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end flex-grow-1">
|
||||
{/* Add Employee Button */}
|
||||
{Manage_Employee && (
|
||||
<button
|
||||
@ -400,7 +330,60 @@ const EmployeeList = () => {
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 3-Dots Dropdown (New Combined Menu) */}
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon me-1"
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm " style={{ minWidth: "220px" }}>
|
||||
|
||||
<li className="dropdown-item d-flex align-items-center justify-content-between">
|
||||
<div className="form-check form-switch mb-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
role="switch"
|
||||
id="inactiveEmployeesCheckboxMenu"
|
||||
checked={showInactive}
|
||||
onChange={(e) => setShowInactive(e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
<span className="ms-0">Show Inactive Employees</span>
|
||||
</li>
|
||||
|
||||
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
||||
<i className="bx bx-printer me-2"></i> Print
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
||||
<i className="bx bx-file me-2"></i> CSV
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
||||
<i className="bx bxs-file-export me-2"></i> Excel
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
||||
<i className="bx bxs-file-pdf me-2"></i> PDF
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<table
|
||||
|
||||
@ -58,10 +58,10 @@ import SubscriptionSummary from "../pages/Home/SubscriptionSummary";
|
||||
import MakeSubscription from "../pages/Home/MakeSubscription";
|
||||
import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage";
|
||||
import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage";
|
||||
import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
|
||||
import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
|
||||
import ManageJob from "../components/ServiceProject/ServiceProjectJob/ManageJob";
|
||||
import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1";
|
||||
import AdvancePaymentPageDetails from "../pages/AdvancePayment/AdvancePaymentPageDetails";
|
||||
import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
|
||||
import PurchasePage from "../pages/purchase/PurchasePage";
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
@ -98,7 +98,7 @@ const router = createBrowserRouter(
|
||||
{ path: "/projects/details", element: <ProjectDetails /> },
|
||||
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
||||
{ path: "/service-projects/:projectId", element: <ServiceProjectDetail /> },
|
||||
{path:"/service/job",element:<ManageJob/>},
|
||||
{ path: "/service/job", element: <ManageJob /> },
|
||||
|
||||
{ path: "/employees", element: <EmployeeList /> },
|
||||
{ path: "/employee/:employeeId", element: <EmployeeProfile /> },
|
||||
@ -120,8 +120,9 @@ const router = createBrowserRouter(
|
||||
{ path: "/expenses", element: <ExpensePage /> },
|
||||
{ path: "/payment-request", element: <PaymentRequestPage /> },
|
||||
{ path: "/recurring-payment", element: <RecurringExpensePage /> },
|
||||
{ path: "/advance-payment", element: <AdvancePaymentPage1 /> },
|
||||
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPage /> },
|
||||
|
||||
{ path: "/advance-payment", element: <AdvancePaymentPage /> },
|
||||
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPageDetails /> },
|
||||
{ path: "/collection", element: <CollectionPage /> },
|
||||
|
||||
// Purchases and Inventory
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
// utils/exportUtils.js
|
||||
export const exportToCSV = (data, filename = "export.csv") => {
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
const headers = Object.keys(data[0]);
|
||||
const csvRows = [];
|
||||
|
||||
// Add headers
|
||||
csvRows.push(headers.join(","));
|
||||
|
||||
// Add values
|
||||
data.forEach(row => {
|
||||
const values = headers.map(header => `"${row[header] ?? ""}"`);
|
||||
csvRows.push(values.join(","));
|
||||
});
|
||||
|
||||
// Create CSV Blob
|
||||
const csvContent = csvRows.join("\n");
|
||||
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
|
||||
|
||||
// Create download link
|
||||
const link = document.createElement("a");
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.setAttribute("href", url);
|
||||
link.setAttribute("download", filename);
|
||||
link.click();
|
||||
};
|
||||
@ -46,62 +46,73 @@ const sanitizeText = (text) => {
|
||||
return text.replace(/[^\x00-\x7F]/g, "?");
|
||||
};
|
||||
|
||||
export const exportToPDF = async (data, fileName = "data", columns = null, options = {}) => {
|
||||
export const exportToPDF = async (data, fileName = "data", columns = null) => {
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
const pdfDoc = await PDFDocument.create();
|
||||
const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
||||
|
||||
// Default options
|
||||
const {
|
||||
columnWidths = [], // array of widths per column
|
||||
fontSizeHeader = 12,
|
||||
fontSizeRow = 10,
|
||||
rowHeight = 25,
|
||||
} = options;
|
||||
|
||||
const pageWidth = 1000;
|
||||
const pageWidth = 900;
|
||||
const pageHeight = 600;
|
||||
let page = pdfDoc.addPage([pageWidth, pageHeight]);
|
||||
const margin = 30;
|
||||
const rowHeight = 20;
|
||||
|
||||
let page = pdfDoc.addPage([pageWidth, pageHeight]);
|
||||
let y = pageHeight - margin;
|
||||
|
||||
const headers = columns || Object.keys(data[0]);
|
||||
|
||||
// Draw headers
|
||||
headers.forEach((header, i) => {
|
||||
const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
|
||||
page.drawText(header, { x, y, font, size: fontSizeHeader });
|
||||
const sanitize = (value) => {
|
||||
if (value === null || value === undefined) return "";
|
||||
return String(value).replace(/[^\x00-\x7F]/g, ""); // remove unicode
|
||||
};
|
||||
|
||||
// ---- Draw Header Row ----
|
||||
headers.forEach((header, index) => {
|
||||
const x = margin + index * 120;
|
||||
page.drawText(sanitize(header), {
|
||||
x,
|
||||
y,
|
||||
size: 12,
|
||||
font,
|
||||
});
|
||||
});
|
||||
|
||||
y -= rowHeight;
|
||||
|
||||
// Draw rows
|
||||
data.forEach(row => {
|
||||
headers.forEach((header, i) => {
|
||||
const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
|
||||
const text = row[header] || '';
|
||||
page.drawText(text, { x, y, font, size: fontSizeRow });
|
||||
});
|
||||
y -= rowHeight;
|
||||
|
||||
// ---- Draw Table Rows ----
|
||||
data.forEach((row) => {
|
||||
if (y < margin) {
|
||||
// Create a new page
|
||||
page = pdfDoc.addPage([pageWidth, pageHeight]);
|
||||
y = pageHeight - margin;
|
||||
}
|
||||
|
||||
headers.forEach((header, index) => {
|
||||
const x = margin + index * 120;
|
||||
const text = sanitize(row[header]);
|
||||
|
||||
page.drawText(text, {
|
||||
x,
|
||||
y,
|
||||
size: 10,
|
||||
font,
|
||||
});
|
||||
});
|
||||
|
||||
y -= rowHeight;
|
||||
});
|
||||
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const link = document.createElement('a');
|
||||
|
||||
// Download
|
||||
const blob = new Blob([pdfBytes], { type: "application/pdf" });
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${fileName}.pdf`;
|
||||
link.click();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Export JSON data to PDF in a card-style format
|
||||
* @param {Array} data - Array of objects to export
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user