admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Finance_Export_Functionality :- Implementing Export Functionality in Finance Module.' (#522) from Finance_Export_Functionality into Purchase_Invoice_Management

Browse Source 
Reviewed-on: #522
Merged
This commit is contained in:
pramod.mahajan 2025-12-03 06:45:30 +00:00
commit 83bd99549a
37 changed files with 1507 additions and 853 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Activities/AttendcesLogs.jsx
View File

@ -20,14 +20,21 @@ import { SpinnerLoader } from "../common/Loader";
const usePagination = (data, itemsPerPage) => { const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1); 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 currentItems = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage; const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage; const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex); return data.slice(startIndex, endIndex);
}, [data, currentPage, itemsPerPage]); }, [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), []); const resetPage = useCallback(() => setCurrentPage(1), []);
return { return {
@ -36,6 +43,7 @@ const usePagination = (data, itemsPerPage) => {
currentItems, currentItems,
paginate, paginate,
resetPage, resetPage,
setCurrentPage,
}; };
}; };
@ -125,9 +133,16 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
resetPage, resetPage,
} = usePagination(filteredSearchData, 20); } = usePagination(filteredSearchData, 20);
// useEffect(() => {
// resetPage();
// }, [filteredSearchData]);
useEffect(() => { useEffect(() => {
resetPage(); if (currentPage > totalPages) {
}, [filteredSearchData]); 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( const handler = useCallback(
(msg) => { (msg) => {
@ -144,10 +159,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
record.id === msg.response.id ? { ...record, ...msg.response } : record record.id === msg.response.id ? { ...record, ...msg.response } : record
); );
}); });
resetPage();
} }
}, },
[selectedProject, dateRange, resetPage] [selectedProject, dateRange]
); );
useEffect(() => { useEffect(() => {
@ -214,7 +228,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
{isLoading ? ( {isLoading ? (
<div <div
className="d-flex justify-content-center align-items-center" className="d-flex justify-content-center align-items-center"
style={{ minHeight: "50vh" }} style={{ minHeight: "50vh" }}
> >
<SpinnerLoader /> <SpinnerLoader />
</div> </div>

319
src/components/AdvancePayment/AdvancePaymentList.jsx
View File

@ -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"; const AdvancePaymentList = ({ searchString }) => {
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 = ({ employeeId, searchString }) => { const { data, isError, isLoading, error } =
const { setBalance } = useAdvancePaymentContext(); useExpenseAllTransactionsList(searchString);
const { data, isError, isLoading, error, isFetching } =
useExpenseTransactions(employeeId, { enabled: !!employeeId });
const records = Array.isArray(data) ? data : [];
let currentBalance = 0; const rows = data || [];
const rowsWithBalance = records.map((r) => { const navigate = useNavigate();
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(() => { const columns = [
if (!employeeId) { {
setBalance(null); key: "employee",
return; 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) { if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
} else {
setBalance(0);
}
}, [employeeId, data, setBalance]);
if (!employeeId) {
return ( return (
<div <div className="card-datatable" id="payment-request-table">
className="d-flex justify-content-center align-items-center" <div className="mx-2">
style={{ height: "200px" }} <table className="table border-top dataTable text-nowrap align-middle">
> <thead>
<p className="text-muted m-0">Please select an employee</p> <tr>
</div> {columns.map((col) => (
); <th key={col.key} className={`sorting ${col.align}`}>
} {col.label}
</th>
))}
</tr>
</thead>
if (isLoading || isFetching) { <tbody>
return ( {rows.length > 0 ? (
<div rows.map((row) => (
className="d-flex justify-content-center align-items-center" <tr key={row.id} className="align-middle" style={{ height: "50px" }}>
style={{ height: "200px" }} {columns.map((col) => (
> <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
<SpinnerLoader /> {col.customRender
</div> ? col.customRender(row)
); : col.getValue(row)}
} </td>
))}
if (isError) { </tr>
return ( ))
<div className="text-center py-3"> ) : (
{error?.status === 404 <tr>
? "No advance payment transactions found." <td colSpan={columns.length} className="text-center border-0 py-3">
: <Error error={error} />} No Employees Found
</div> </td>
); </tr>
} )}
const columns = [ </tbody>
{ </table>
key: "date", </div>
label: ( </div>
<> )
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>
);
};
export default AdvancePaymentList; export default AdvancePaymentList;

100
src/components/AdvancePayment/AdvancePaymentList1.jsx
View File

@ -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
View 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
View 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;

16
src/components/Directory/NoteCardDirectoryEditable.jsx
View File

@ -9,6 +9,7 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
import "../common/TextEditor/Editor.css"; import "../common/TextEditor/Editor.css";
import GlobalModel from "../common/GlobalModel"; import GlobalModel from "../common/GlobalModel";
import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory"; import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
const NoteCardDirectoryEditable = ({ const NoteCardDirectoryEditable = ({
noteItem, noteItem,
@ -22,14 +23,14 @@ const NoteCardDirectoryEditable = ({
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [isRestoring, setIsRestoring] = useState(false); const [isRestoring, setIsRestoring] = useState(false);
const [isDeleteModalOpen, setIsDeleteModalOpen] = 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(() => const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
setEditing(false) setEditing(false)
); );
const { mutate: ActiveInactive, isPending: isUpdatingStatus } = const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
useActiveInActiveNote(() => setIsDeleteModalOpen(false)); useActiveInActiveNote(() => setIsDeleteModalOpen(false));
const { setContactOpen } = useDirectoryContext();
const handleUpdateNote = async () => { const handleUpdateNote = async () => {
const payload = { const payload = {
@ -45,12 +46,6 @@ const NoteCardDirectoryEditable = ({
ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive }); ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
}; };
const contactProfile = (contactId) => {
DirectoryRepository.GetContactProfile(contactId).then((res) => {
setOpen_contact(res?.data);
setIsOpenModalNote(true);
});
};
const handleRestore = async () => { const handleRestore = async () => {
try { try {
@ -88,7 +83,9 @@ const NoteCardDirectoryEditable = ({
<div> <div>
<div <div
className="d-flex ms-3 align-middle cursor-pointer" className="d-flex ms-3 align-middle cursor-pointer"
onClick={() => contactProfile(noteItem.contactId)} onClick={() =>
setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
}
> >
<span> <span>
<span className="fw-bold "> {noteItem?.contactName} </span>{" "} <span className="fw-bold "> {noteItem?.contactName} </span>{" "}
@ -97,6 +94,7 @@ const NoteCardDirectoryEditable = ({
</span> </span>
</span> </span>
</div> </div>
<div className="d-flex ms-0 align-middle"></div> <div className="d-flex ms-0 align-middle"></div>
<div className="d-flex ms-3 mt-2"> <div className="d-flex ms-3 mt-2">
<span className="text-muted"> <span className="text-muted">

16
src/components/Expenses/ExpenseList.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense"; import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
import Avatar from "../common/Avatar"; import Avatar from "../common/Avatar";
import { useExpenseContext } from "../../pages/Expense/ExpensePage"; import { useExpenseContext } from "../../pages/Expense/ExpensePage";
@ -24,7 +24,7 @@ import ExpenseFilterChips from "./ExpenseFilterChips";
import { defaultFilter } from "./ExpenseSchema"; import { defaultFilter } from "./ExpenseSchema";
import { useNavigate } from "react-router-dom"; 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 [deletingId, setDeletingId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { const {
@ -46,6 +46,12 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
filters, filters,
debouncedSearch debouncedSearch
); );
useEffect(() => {
if (onDataFiltered) {
onDataFiltered(data?.data ?? []);
}
}, [data, onDataFiltered]);
const SelfId = useSelector( const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
@ -258,7 +264,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
groupBy={groupBy} groupBy={groupBy}
/> />
<div <div
className="card-datatable table-responsive " className="card-datatable table-responsive" ref={tableRef}
id="horizontal-example" id="horizontal-example"
> >
<div className="dataTables_wrapper no-footer px-2 "> <div className="dataTables_wrapper no-footer px-2 ">
@ -313,8 +319,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
> >
<div <div
className={`d-flex px-2 ${col.key === "status" className={`d-flex px-2 ${col.key === "status"
? "justify-content-center" ? "justify-content-center"
: "" : ""
} }
${col.key === "amount" ${col.key === "amount"
? "justify-content-end" ? "justify-content-end"

17
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
EXPENSE_DRAFT, EXPENSE_DRAFT,
EXPENSE_REJECTEDBY, EXPENSE_REJECTEDBY,
@ -22,7 +22,7 @@ import Error from "../common/Error";
import Pagination from "../common/Pagination"; import Pagination from "../common/Pagination";
import PaymentRequestFilterChips from "./PaymentRequestFilterChips"; 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 { setManageRequest, setVieRequest } = usePaymentRequestContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@ -30,6 +30,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
const SelfId = useSelector( const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
); );
const groupByField = (items, field) => { const groupByField = (items, field) => {
return items.reduce((acc, item) => { return items.reduce((acc, item) => {
let key; let key;
@ -149,6 +150,12 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
debouncedSearch debouncedSearch
); );
useEffect(() => {
if (onDataFiltered) {
onDataFiltered(data?.data ?? []);
}
}, [data, onDataFiltered]);
if (isError) { if (isError) {
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />; return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
} }
@ -222,7 +229,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
paramData={deletingId} 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="card-datatable mx-2" id="payment-request-table ">
<div className="col-12 mb-2 mt-2"> <div className="col-12 mb-2 mt-2">
<PaymentRequestFilterChips <PaymentRequestFilterChips
@ -240,7 +247,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
{col.label} {col.label}
</th> </th>
))} ))}
<th className="text-center">Action</th> <th className="text-start">Action</th>
</tr> </tr>
</thead> </thead>
@ -262,7 +269,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
</td> </td>
</tr> </tr>
{items?.map((paymentRequest) => ( {items?.map((paymentRequest) => (
<tr key={paymentRequest.id} style={{ height: "40px" }}> <tr key={paymentRequest.id} style={{ height: "40px" }}>
{paymentRequestColumns.map( {paymentRequestColumns.map(
(col) => (col) =>
(col.isAlwaysVisible || groupBy !== col.key) && ( (col.isAlwaysVisible || groupBy !== col.key) && (

85
src/components/PaymentRequest/handleExpenseExport.jsx Normal file
View 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
View 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;

4
src/components/Project/Infrastructure/BuildingModel.jsx
View File

@ -100,7 +100,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
return ( return (
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2"> <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"> <div className="col-12 text-start">
<label className="form-label">Select Building</label> <label className="form-label">Select Building</label>
<select <select
@ -150,7 +150,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
)} )}
</div> </div>
<div className="col-12 text-end mt-5"> <div className="col-12 text-end mt-6 my-2">
<button <button
type="reset" type="reset"
className="btn btn-sm btn-label-secondary me-3" className="btn btn-sm btn-label-secondary me-3"

2
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -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 <button
type="button" type="button"
className="btn btn-sm btn-label-secondary me-3" className="btn btn-sm btn-label-secondary me-3"

2
src/components/Project/Infrastructure/TaskModel.jsx
View File

@ -348,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
</div> </div>
)} )}
<div className="col-12 text-end mt-5"> <div className="col-12 text-end mt-6 my-2">
<button <button
type="button" type="button"
className="btn btn-sm btn-label-secondary me-3" className="btn btn-sm btn-label-secondary me-3"

2
src/components/Project/Infrastructure/WorkAreaModel.jsx
View File

@ -187,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
</div> </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}> <button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
Cancel Cancel
</button> </button>

2
src/components/Project/ProjectInfra.jsx
View File

@ -199,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
serviceId={selectedService} 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> <p className="text-muted fs-6">No infrastructure data available.</p>
</div> </div>
)} )}

3
src/components/Project/Team/TeamAssignToProject.jsx
View File

@ -13,7 +13,8 @@ const TeamAssignToProject = ({ closeModal }) => {
useProjectAssignedOrganizationsName(project); useProjectAssignedOrganizationsName(project);
return ( return (
<div className="container"> <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="row align-items-center gx-5">
<div className="col"> <div className="col">

8
src/components/Project/Team/TeamEmployeeList.jsx
View File

@ -155,7 +155,7 @@ if (employees.length === 0) {
return ( return (
<div className=" position-relative"> <div className="position-relative mt-5">
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}> <table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
<thead className=" position-sticky top-0"> <thead className=" position-sticky top-0">
<tr> <tr>
@ -232,15 +232,15 @@ if (employees.length === 0) {
))} ))}
</tbody> </tbody>
</table> </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 <button
type="button" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary mt-2"
onClick={() => closeModal()} onClick={() => closeModal()}
> >
Cancel Cancel
</button> </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"} {isPending ? "Please Wait..." : "Assign to Project"}
</button> </button>
</div> </div>

226
src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { import {
EXPENSE_DRAFT, EXPENSE_DRAFT,
EXPENSE_REJECTEDBY, EXPENSE_REJECTEDBY,
@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
import Pagination from "../common/Pagination"; import Pagination from "../common/Pagination";
import { SpinnerLoader } from "../common/Loader"; import { SpinnerLoader } from "../common/Loader";
const RecurringExpenseList = ({ search, filterStatuses }) => { const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
const { setManageRequest, setVieRequest, setViewRecurring } = const { setManageRequest, setVieRequest, setViewRecurring } =
useRecurringExpenseContext(); useRecurringExpenseContext();
const navigate = useNavigate(); const navigate = useNavigate();
@ -70,9 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
align: "text-end", align: "text-end",
getValue: (e) => getValue: (e) =>
e?.amount e?.amount
? `${ ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
e?.currency?.symbol ? e.currency.symbol + " " : "" }${e.amount.toLocaleString()}`
}${e.amount.toLocaleString()}`
: "N/A", : "N/A",
}, },
{ {
@ -112,6 +111,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
debouncedSearch debouncedSearch
); );
const filteredData = useMemo(
() =>
data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
[],
[data?.data, filterStatuses]
);
useEffect(() => {
onDataFiltered(filteredData);
}, [filteredData, onDataFiltered]);
const paginate = (page) => { const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) { if (page >= 1 && page <= (data?.totalPages ?? 1)) {
setCurrentPage(page); setCurrentPage(page);
@ -150,10 +160,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
); );
}; };
const filteredData = data?.data?.filter((item) =>
filterStatuses.includes(item?.status?.id)
);
const handleDelete = (id) => { const handleDelete = (id) => {
setDeletingId(id); setDeletingId(id);
DeleteExpense( 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="card-datatable" id="payment-request-table">
<div className="mx-2"> <div className="mx-2">
{Array.isArray(filteredData) && filteredData.length > 0 && ( {Array.isArray(filteredData) && filteredData.length > 0 && (
<table className="table border-top dataTable text-nowrap align-middle"> <table className="table border-top dataTable text-nowrap align-middle">
<thead> <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>
))
) : (
<tr> <tr>
<td {recurringExpenseColumns.map((col) => (
colSpan={recurringExpenseColumns?.length + 1} <th key={col.key} className={`sorting ${col.align}`}>
className="text-center border-0 py-8" {col.label}
></td> </th>
))}
<th className="text-end">Action</th>
</tr> </tr>
)} </thead>
</tbody>
</table> <tbody>
)} {filteredData?.length > 0 ? (
{!filteredData || filteredData?.map((recurringExpense) => (
filteredData.length === 0 <tr
&& ( key={recurringExpense.id}
<div className="d-flex justify-content-center align-items-center h-64"> className="align-middle"
{isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)} style={{ height: "40px" }}
</div> >
{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> </div>
{/* Pagination */} {/* Pagination */}

107
src/components/RecurringExpense/handleRecurringExpenseExport.jsx Normal file
View 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;

6
src/components/ServiceProject/ManageServiceProject.jsx
View File

@ -183,7 +183,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
<span className="danger-text">{errors.shortName.message}</span> <span className="danger-text">{errors.shortName.message}</span>
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6">
<Label htmlFor="name" required> <Label htmlFor="name" required>
Select Status Select Status
</Label> </Label>
@ -200,7 +200,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
<span className="danger-text">{errors.statusId.message}</span> <span className="danger-text">{errors.statusId.message}</span>
)} )}
</div> </div>
<div className="col-12 mb-2"> <div className="col-12 mb-2">
<SelectMultiple <SelectMultiple
options={data?.data} options={data?.data}
isLoading={isLoading} isLoading={isLoading}
@ -297,7 +297,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
)} )}
</div> </div>
</div> </div>
<div className="d-flex justify-content-end gap-4"> <div className="d-flex justify-content-end gap-4 mt-4">
<button <button
className="btn btn-sm btn-outline-secondary" className="btn btn-sm btn-outline-secondary"
disabled={isPending || isUpdating} disabled={isPending || isUpdating}

1
src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
View File

@ -140,6 +140,7 @@ const ManageJob = ({ Job }) => {
formData.projectId = projectId; formData.projectId = projectId;
CreateJob(formData); CreateJob(formData);
setManageJob({ isOpen: false, jobId: null });
} }
}; };

16
src/components/Tenant/OrganizationInfo.jsx
View File

@ -58,12 +58,12 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
}; };
useEffect(() => { useEffect(() => {
const logoImage = getValues("logoImage"); const logoImage = getValues("logoImage");
if (logoImage) { if (logoImage) {
setLogoPreview(logoImage); setLogoPreview(logoImage);
setLogoName("Uploaded Logo"); setLogoName("Uploaded Logo");
} }
}, [getValues]); }, [getValues]);
return ( return (
@ -134,7 +134,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
control={control} control={control}
placeholder="DD-MM-YYYY" placeholder="DD-MM-YYYY"
maxDate={new Date()} maxDate={new Date()}
className={errors.onBoardingDate ? "is-invalid" : ""} className={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
/> />
{errors.onBoardingDate && ( {errors.onBoardingDate && (
<div className="invalid-feedback"> <div className="invalid-feedback">
@ -210,7 +210,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6">
<SelectMultiple <SelectMultiple
name="serviceIds" name="serviceIds"
label="Services" label="Services"
options={services?.data} options={services?.data}

2
src/components/common/SelectMultiple.jsx
View File

@ -154,7 +154,7 @@ const SelectMultiple = ({
className="multi-select-dropdown-container" className="multi-select-dropdown-container"
style={{ position: "relative" }} 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> <Label className={name} required={required}></Label>
<div <div

2
src/components/master/Services/ServicesGroups.jsx
View File

@ -109,7 +109,7 @@ const ServiceGroups = ({ service }) => {
/> />
</span> </span>
)} )}
<p className="m-0 fw-bold ">{group.name}</p> <p className="m-0 ">{group.name}</p>
</div> </div>
<div className="d-flex flex-row gap-3"> <div className="d-flex flex-row gap-3">
<div className="d-flex flex-row gap-2"> <div className="d-flex flex-row gap-2">

2
src/hooks/useTenant.js
View File

@ -132,7 +132,7 @@ export const useAddSubscription = (onSuccessCallback) => {
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
const { tenantId } = variables; const { tenantId } = variables;
showToast("Tenant Plan Added SuccessFully", "success"); showToast("Tenant Plan Added SuccessFully", "success");
queryClient.invalidateQueries({ queryKey: ["Tenant", tenantId] }); queryClient.invalidateQueries({ queryKey: ["Tenants", tenantId] });
if (onSuccessCallback) onSuccessCallback(); if (onSuccessCallback) onSuccessCallback();
}, },
onError: (error) => { onError: (error) => {

130
src/pages/AdvancePayment/AdvancePaymentPage.jsx
View File

@ -1,108 +1,34 @@
import React, { import React from 'react'
createContext, import Breadcrumb from '../../components/common/Breadcrumb'
useContext, import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList'
useEffect, import { useForm } from 'react-hook-form';
useMemo, import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
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";
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 AdvancePaymentPage = () => {
const { employeeId } = useParams(); const { control, reset, watch } = useForm({
defaultValues: {
const { data: transactionData } = useExpenseTransactions(employeeId, { searchString: "",
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 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>
</div> )
</AdvancePaymentContext.Provider> }
);
};
export default AdvancePaymentPage; export default AdvancePaymentPage

34
src/pages/AdvancePayment/AdvancePaymentPage1.jsx
View File

@ -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
View 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;

222
src/pages/Directory/DirectoryPage.jsx
View File

@ -19,7 +19,7 @@ import BucketList from "../../components/Directory/BucketList";
import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton"; import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
import ContactProfile from "../../components/Directory/ContactProfile"; import ContactProfile from "../../components/Directory/ContactProfile";
import GlobalModel from "../../components/common/GlobalModel"; 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 ConfirmModal from "../../components/common/ConfirmModal";
import { useSelectedProject } from "../../slices/apiDataManager"; import { useSelectedProject } from "../../slices/apiDataManager";
@ -64,11 +64,49 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
const [ContactData, setContactData] = useState([]); const [ContactData, setContactData] = useState([]);
const handleExport = (type) => { const handleExport = (type) => {
if (activeTab === "notes" && type === "csv") { let exportData = activeTab === "notes" ? notesData : ContactData;
exportToCSV(notesData, "notes.csv"); if (!exportData?.length) return;
}
if (activeTab === "contacts" && type === "csv") { switch (type) {
exportToCSV(ContactData, "contact.csv"); 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> ></Breadcrumb>
)} )}
<div className="card"> <div className="card ">
<div className="d-flex-row px-2"> <div className="d-flex-row px-2">
<div className="d-flex justify-content-between align-items-center mb-1"> <div className="d-flex justify-content-between align-items-center mb-1">
<ul className="nav nav-tabs"> <ul className="nav nav-tabs">
@ -158,13 +196,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
</a> </a>
</li> </li>
</ul> </ul>
</div>
<div className="mb-1 px-md-2 px-0 py-3"> <div className="mb-1 px-2 py-3">
<div className="row"> <div className="d-flex align-items-center justify-content-between">
<div className="col-12 col-md-10 mb-2"> <div className="d-flex align-items-center gap-3">
{activeTab === "notes" && ( {activeTab === "notes" && (
<div className="col-8 col-md-3">
<input <input
type="search" type="search"
className="form-control form-control-sm" className="form-control form-control-sm"
@ -172,13 +208,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
value={searchNote} value={searchNote}
onChange={(e) => setSearchNote(e.target.value)} onChange={(e) => setSearchNote(e.target.value)}
/> />
</div> )}
)}
{activeTab === "contacts" && ( {activeTab === "contacts" && (
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
<div className="col-12 col-md-8 d-flex flex-row gap-2"> <div className="d-flex gap-2 align-items-center">
<div className="col-7 col-md-4">
<input <input
type="search" type="search"
className="form-control form-control-sm" className="form-control form-control-sm"
@ -186,61 +220,117 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
value={searchContact} value={searchContact}
onChange={(e) => setsearchContact(e.target.value)} 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> </div>
<button </div>
className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary" )}
</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)} onClick={() => setGridView(true)}
> >
<i className="bx bx-grid-alt"></i> <i className="bx bx-grid-alt"></i> Card View
</button> </span>
<button </li>
className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
<li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block" : "d-none"}`}>
<span
className={`dropdown-item ${!gridView ? "text-primary" : ""
}`} }`}
onClick={() => setGridView(false)} onClick={() => setGridView(false)}
> >
<i className="bx bx-list-ul"></i> <i className="bx bx-list-ul"></i> List View
</button> </span>
<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>
</li> </li>
{/* Divider */}
{activeTab === "contacts" && (
<li>
<hr className="dropdown-divider" />
</li>
)}
</ul> </ul>
</div> </div>
</div> </div>

3
src/pages/Directory/NotesPage.jsx
View File

@ -125,8 +125,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
</> </>
) : ( ) : (
<div <div
className="card text-center d-flex align-items-center justify-content-center" className="card text-center page-min-h d-flex align-items-center justify-content-center"
style={{ height: "200px" }}
> >
<p className="text-muted mb-0"> <p className="text-muted mb-0">
{debouncedSearch {debouncedSearch

71
src/pages/Expense/ExpensePage.jsx
View File

@ -30,6 +30,7 @@ import {
SearchSchema, SearchSchema,
} from "../../components/Expenses/ExpenseSchema"; } from "../../components/Expenses/ExpenseSchema";
import PreviewDocument from "../../components/Expenses/PreviewDocument"; import PreviewDocument from "../../components/Expenses/PreviewDocument";
import HandleExpenseExport from "../../components/PaymentRequest/HandleExpenseExport";
// Context // Context
export const ExpenseContext = createContext(); export const ExpenseContext = createContext();
@ -70,6 +71,8 @@ const ExpensePage = () => {
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE); const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
const { setOffcanvasContent, setShowTrigger } = useFab(); const { setOffcanvasContent, setShowTrigger } = useFab();
const [filterData, setFilterdata] = useState(defaultFilter); const [filterData, setFilterdata] = useState(defaultFilter);
const tableRef = useRef(null);
const [filteredData, setFilteredData] = useState([]);
const removeFilterChip = (key, id) => { const removeFilterChip = (key, id) => {
setFilters((prev) => { setFilters((prev) => {
const updated = { ...prev }; const updated = { ...prev };
@ -114,6 +117,11 @@ const ExpensePage = () => {
removeFilterChip, removeFilterChip,
}; };
const handleExport = (type) => {
HandleExpenseExport(type, filters, searchText, tableRef);
};
return ( return (
<ExpenseContext.Provider value={contextValue}> <ExpenseContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
@ -126,17 +134,19 @@ const ExpensePage = () => {
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-3 me-n1"> <div className="card-body py-2 px-3 me-n1">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-6"> <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
<input <div className="d-flex align-items-center flex-wrap gap-0">
type="search" <input
className="form-control form-control-sm w-auto" type="search"
placeholder="Search Expense" className="form-control form-control-sm w-auto"
value={searchText} placeholder="Search Expense"
onChange={(e) => setSearchText(e.target.value)} value={searchText}
/> onChange={(e) => setSearchText(e.target.value)}
/>
</div>
</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 && ( {IsCreatedAble && (
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
@ -154,6 +164,47 @@ const ExpensePage = () => {
</span> </span>
</button> </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>
</div> </div>
@ -163,6 +214,8 @@ const ExpensePage = () => {
filters={filters} filters={filters}
groupBy={groupBy} groupBy={groupBy}
searchText={searchText} searchText={searchText}
tableRef={tableRef}
onDataFiltered={setFilteredData}
/> />
</> </>
) : ( ) : (

77
src/pages/PaymentRequest/PaymentRequestPage.jsx
View File

@ -9,6 +9,7 @@ import { defaultPaymentRequestFilter } from "../../components/PaymentRequest/Pay
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest"; import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
import PreviewDocument from "../../components/Expenses/PreviewDocument"; import PreviewDocument from "../../components/Expenses/PreviewDocument";
import MakeExpense from "../../components/PaymentRequest/MakeExpense"; import MakeExpense from "../../components/PaymentRequest/MakeExpense";
import HandlePaymentRequestExport from "../../components/PaymentRequest/HandlePaymentRequestExport";
export const PaymentRequestContext = createContext(); export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => { export const usePaymentRequestContext = () => {
@ -25,12 +26,15 @@ const PaymentRequestPage = () => {
const [filters, setFilters] = useState(defaultPaymentRequestFilter); const [filters, setFilters] = useState(defaultPaymentRequestFilter);
const [filterData, setFilterdata] = useState(null); const [filterData, setFilterdata] = useState(null);
const [ViewDocument, setDocumentView] = useState({ IsOpen: false, Image: null }); const [ViewDocument, setDocumentView] = useState({ IsOpen: false, Image: null });
const [searchText, setSearchText] = useState("");
const [isExpenseGenerate, setIsExpenseGenerate] = useState({ IsOpen: null, RequestId: null }); const [isExpenseGenerate, setIsExpenseGenerate] = useState({ IsOpen: null, RequestId: null });
const [modalSize, setModalSize] = useState("md"); const [modalSize, setModalSize] = useState("md");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const updatedRef = useRef(); const updatedRef = useRef();
const { setOffcanvasContent, setShowTrigger } = useFab(); const { setOffcanvasContent, setShowTrigger } = useFab();
const [exportLoading, setExportLoading] = useState(false);
const tableRef = useRef(null);
const [filteredData, setFilteredData] = useState([]);
const contextValue = { const contextValue = {
setManageRequest, setManageRequest,
setVieRequest, setVieRequest,
@ -76,6 +80,10 @@ const PaymentRequestPage = () => {
}); });
}; };
const handleExport = (type) => {
HandlePaymentRequestExport(type, filters, search, tableRef, setExportLoading);
};
return ( return (
<PaymentRequestContext.Provider value={contextValue}> <PaymentRequestContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
@ -92,18 +100,19 @@ const PaymentRequestPage = () => {
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-0 mx-2"> <div className="card-body py-2 px-0 mx-2">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-6"> <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
<input <div className="d-flex align-items-center flex-wrap gap-0">
type="search" <input
className="form-control form-control-sm w-auto" type="search"
placeholder="Search Payment Request" className="form-control form-control-sm w-auto"
value={search} placeholder="Search Payment Request"
style={{ minWidth: "200px" }} value={search}
onChange={(e) => setSearch(e.target.value)} style={{ minWidth: "200px" }}
/> onChange={(e) => setSearch(e.target.value)}
/>
</div>
</div> </div>
<div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
<div className="col-6 text-end mt-sm-0">
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"
@ -119,7 +128,49 @@ const PaymentRequestPage = () => {
Add Payment Request Add Payment Request
</span> </span>
</button> </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>
</div> </div>
</div> </div>
@ -129,6 +180,8 @@ const PaymentRequestPage = () => {
filterData={filterData} filterData={filterData}
removeFilterChip={handleRemoveChip} removeFilterChip={handleRemoveChip}
clearFilter={clearFilter} clearFilter={clearFilter}
tableRef={tableRef}
onDataFiltered={setFilteredData}
/> />
{/* Add/Edit Modal */} {/* Add/Edit Modal */}

73
src/pages/RecurringExpense/RecurringExpensePage.jsx
View File

@ -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 Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext"; import { useFab } from "../../Context/FabContext";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense"; import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList"; import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants"; 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 ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";
import HandleRecurringExpenseExport from "../../components/RecurringExpense/HandleRecurringExpenseExport";
export const RecurringExpenseContext = createContext(); export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => { export const useRecurringExpenseContext = () => {
@ -16,13 +17,19 @@ export const useRecurringExpenseContext = () => {
"useRecurringExpenseContext must be used within an ExpenseProvider" "useRecurringExpenseContext must be used within an ExpenseProvider"
); );
} }
return context; return context;
}; };
const RecurringExpensePage = () => { const RecurringExpensePage = () => {
const [ManageRequest, setManageRequest] = useState({ const [ManageRequest, setManageRequest] = useState({
IsOpen: null, IsOpen: null,
RecurringId: 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({ const [viewRecurring, setViewRecurring] = useState({
view: false, view: false,
recurringId: null, recurringId: null,
@ -44,6 +51,12 @@ const RecurringExpensePage = () => {
prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id] prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]
); );
}; };
const handleExport = (type) => {
HandleRecurringExpenseExport(type, filters, search, tableRef, setExportLoading);
};
return ( return (
<RecurringExpenseContext.Provider value={contextValue}> <RecurringExpenseContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
@ -56,8 +69,8 @@ const RecurringExpensePage = () => {
/> />
{/* Top Bar */} {/* Top Bar */}
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-0 px-0">
<div className="card-body py-2 px-1 mx-2"> <div className="card-body py-2 px-5">
<div className="row align-items-center mb-0"> <div className="row align-items-center mb-0">
{/* Left Column: Search + Filter */} {/* Left Column: Search + Filter */}
<div className="col-md-8 col-sm-12 mb-2 mb-md-0"> <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" className="form-control form-control-sm w-auto"
placeholder="Search Recurring Expense" placeholder="Search Recurring Expense"
value={search} value={search}
style={{minWidth:"200px"}} style={{ minWidth: "200px" }}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
@ -99,8 +112,8 @@ const RecurringExpensePage = () => {
</div> </div>
</div> </div>
{/* Right Column: Add Button */} {/* Right Column: Add Button + 3-Dots Menu */}
<div className="col-md-4 col-sm-12 text-md-end text-end"> <div className="col-md-4 col-sm-12 text-md-end text-end d-flex justify-content-end align-items-center gap-0">
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"
@ -116,7 +129,49 @@ const RecurringExpensePage = () => {
Add Recurring Expense Add Recurring Expense
</span> </span>
</button> </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>
</div> </div>
</div> </div>
@ -124,6 +179,8 @@ const RecurringExpensePage = () => {
<RecurringExpenseList <RecurringExpenseList
filterStatuses={selectedStatuses} filterStatuses={selectedStatuses}
search={search} search={search}
tableRef={tableRef}
onDataFiltered={setFilteredData}
/> />
{ManageRequest.IsOpen && ( {ManageRequest.IsOpen && (

133
src/pages/employee/EmployeeList.jsx
View File

@ -298,31 +298,7 @@ const EmployeeList = () => {
<div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3"> <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
{/* Switches: All Employees + Inactive */} {/* Switches: All Employees + Inactive */}
<div className="d-flex flex-wrap align-items-center gap-3"> <div className="d-flex flex-wrap align-items-center gap-3">
{/* All Employees Switch */} {/* {showAllEmployees && ( */}
{/* 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 */}
<div className="dataTables_filter"> <div className="dataTables_filter">
<label className="mb-0"> <label className="mb-0">
<input <input
@ -336,57 +312,11 @@ const EmployeeList = () => {
</label> </label>
</div> </div>
{/* Export Dropdown */} {/* )} */}
<div className="dropdown"> </div>
<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>
{/* Right side: Search + Add Employee + Options */}
<div className="d-flex flex-wrap align-items-center justify-content-end flex-grow-1">
{/* Add Employee Button */} {/* Add Employee Button */}
{Manage_Employee && ( {Manage_Employee && (
<button <button
@ -400,7 +330,60 @@ const EmployeeList = () => {
</span> </span>
</button> </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>
</div> </div>
<table <table

11
src/router/AppRoutes.jsx
View File

@ -58,10 +58,10 @@ import SubscriptionSummary from "../pages/Home/SubscriptionSummary";
import MakeSubscription from "../pages/Home/MakeSubscription"; import MakeSubscription from "../pages/Home/MakeSubscription";
import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage"; import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage";
import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage"; import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage";
import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail"; import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
import ManageJob from "../components/ServiceProject/ServiceProjectJob/ManageJob"; 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"; import PurchasePage from "../pages/purchase/PurchasePage";
const router = createBrowserRouter( const router = createBrowserRouter(
[ [
@ -98,7 +98,7 @@ const router = createBrowserRouter(
{ path: "/projects/details", element: <ProjectDetails /> }, { path: "/projects/details", element: <ProjectDetails /> },
{ path: "/project/manage/:projectId", element: <ManageProject /> }, { path: "/project/manage/:projectId", element: <ManageProject /> },
{ path: "/service-projects/:projectId", element: <ServiceProjectDetail /> }, { path: "/service-projects/:projectId", element: <ServiceProjectDetail /> },
{path:"/service/job",element:<ManageJob/>}, { path: "/service/job", element: <ManageJob /> },
{ path: "/employees", element: <EmployeeList /> }, { path: "/employees", element: <EmployeeList /> },
{ path: "/employee/:employeeId", element: <EmployeeProfile /> }, { path: "/employee/:employeeId", element: <EmployeeProfile /> },
@ -120,8 +120,9 @@ const router = createBrowserRouter(
{ path: "/expenses", element: <ExpensePage /> }, { path: "/expenses", element: <ExpensePage /> },
{ path: "/payment-request", element: <PaymentRequestPage /> }, { path: "/payment-request", element: <PaymentRequestPage /> },
{ path: "/recurring-payment", element: <RecurringExpensePage /> }, { 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 /> }, { path: "/collection", element: <CollectionPage /> },
// Purchases and Inventory // Purchases and Inventory

27
src/utils/exportUtils.js
View File

@ -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();
};

71
src/utils/tableExportUtils.jsx
View File

@ -46,62 +46,73 @@ const sanitizeText = (text) => {
return text.replace(/[^\x00-\x7F]/g, "?"); 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; if (!data || data.length === 0) return;
const pdfDoc = await PDFDocument.create(); const pdfDoc = await PDFDocument.create();
const font = await pdfDoc.embedFont(StandardFonts.Helvetica); const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
// Default options const pageWidth = 900;
const {
columnWidths = [], // array of widths per column
fontSizeHeader = 12,
fontSizeRow = 10,
rowHeight = 25,
} = options;
const pageWidth = 1000;
const pageHeight = 600; const pageHeight = 600;
let page = pdfDoc.addPage([pageWidth, pageHeight]);
const margin = 30; const margin = 30;
const rowHeight = 20;
let page = pdfDoc.addPage([pageWidth, pageHeight]);
let y = pageHeight - margin; let y = pageHeight - margin;
const headers = columns || Object.keys(data[0]); const headers = columns || Object.keys(data[0]);
// Draw headers const sanitize = (value) => {
headers.forEach((header, i) => { if (value === null || value === undefined) return "";
const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150); return String(value).replace(/[^\x00-\x7F]/g, ""); // remove unicode
page.drawText(header, { x, y, font, size: fontSizeHeader }); };
// ---- Draw Header Row ----
headers.forEach((header, index) => {
const x = margin + index * 120;
page.drawText(sanitize(header), {
x,
y,
size: 12,
font,
});
}); });
y -= rowHeight; y -= rowHeight;
// Draw rows // ---- Draw Table Rows ----
data.forEach(row => { 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;
if (y < margin) { if (y < margin) {
// Create a new page
page = pdfDoc.addPage([pageWidth, pageHeight]); page = pdfDoc.addPage([pageWidth, pageHeight]);
y = pageHeight - margin; 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 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.href = URL.createObjectURL(blob);
link.download = `${fileName}.pdf`; link.download = `${fileName}.pdf`;
link.click(); link.click();
}; };
/** /**
* Export JSON data to PDF in a card-style format * Export JSON data to PDF in a card-style format
* @param {Array} data - Array of objects to export * @param {Array} data - Array of objects to export