Compare commits
3 Commits
Finance_Ex
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 96bcdffdca | |||
| f8963ef476 | |||
| 9ad3b8726c |
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
|
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
|
||||||
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
|
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
|
||||||
<!-- layout-menu-collapsed layout-menu-hover -->
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|||||||
@ -11,18 +11,6 @@
|
|||||||
top: var(--sticky-top, 0px) !important;
|
top: var(--sticky-top, 0px) !important;
|
||||||
z-index: 1025;
|
z-index: 1025;
|
||||||
}
|
}
|
||||||
.form-control-md {
|
|
||||||
min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
|
|
||||||
padding: 0.18rem 0.60rem;
|
|
||||||
font-size: 0.875rem; /* ~14px */
|
|
||||||
border-radius: var(--bs-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-md::file-selector-button {
|
|
||||||
padding: 0.32rem 0.75rem;
|
|
||||||
margin: -0.32rem -0.75rem;
|
|
||||||
margin-inline-end: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ===========================% Background_Colors %========================================================== */
|
/* ===========================% Background_Colors %========================================================== */
|
||||||
@ -234,9 +222,7 @@ font-weight: normal;
|
|||||||
.h-min { height: min-content; }
|
.h-min { height: min-content; }
|
||||||
.h-max { height: max-content; }
|
.h-max { height: max-content; }
|
||||||
|
|
||||||
.vh-50 {
|
|
||||||
height: 50vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-brand-text {
|
.app-brand-text {
|
||||||
font-size: 1rem;
|
font-size: 1.75rem;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
/* text-transform: lowercase; */
|
/* text-transform: lowercase; */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -149,40 +149,4 @@ function Main () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const html = document.documentElement;
|
|
||||||
|
|
||||||
/******************************
|
|
||||||
* SIDEBAR HOVER BEHAVIOR
|
|
||||||
******************************/
|
|
||||||
document.addEventListener("mouseover", function (e) {
|
|
||||||
const isInsideSidebar = e.target.closest("#layout-menu");
|
|
||||||
|
|
||||||
if (isInsideSidebar && html.classList.contains("layout-menu-collapsed")) {
|
|
||||||
html.classList.add("layout-menu-hover");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("mouseout", function (e) {
|
|
||||||
const leftSidebar = !e.relatedTarget || !e.relatedTarget.closest("#layout-menu");
|
|
||||||
|
|
||||||
if (leftSidebar) {
|
|
||||||
html.classList.remove("layout-menu-hover");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/******************************
|
|
||||||
* TOGGLE MENU BUTTON OVERRIDE
|
|
||||||
******************************/
|
|
||||||
document.body.addEventListener("click", function (e) {
|
|
||||||
const btn = e.target.closest(".layout-menu-toggle");
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
html.classList.toggle("layout-menu-collapsed");
|
|
||||||
html.classList.remove("layout-menu-hover");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@ -20,21 +20,14 @@ 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 {
|
||||||
@ -43,7 +36,6 @@ const usePagination = (data, itemsPerPage) => {
|
|||||||
currentItems,
|
currentItems,
|
||||||
paginate,
|
paginate,
|
||||||
resetPage,
|
resetPage,
|
||||||
setCurrentPage,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -133,16 +125,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
|||||||
resetPage,
|
resetPage,
|
||||||
} = usePagination(filteredSearchData, 20);
|
} = usePagination(filteredSearchData, 20);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// resetPage();
|
|
||||||
// }, [filteredSearchData]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentPage > totalPages) {
|
resetPage();
|
||||||
paginate(totalPages || 1);
|
}, [filteredSearchData]);
|
||||||
}
|
|
||||||
// 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) => {
|
||||||
@ -159,9 +144,10 @@ 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]
|
[selectedProject, dateRange, resetPage]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@ -1,108 +1,233 @@
|
|||||||
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';
|
|
||||||
|
|
||||||
const AdvancePaymentList = ({ searchString }) => {
|
import React, { useEffect, useMemo } from "react";
|
||||||
|
import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
|
||||||
|
import Error from "../common/Error";
|
||||||
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import Loader, { SpinnerLoader } from "../common/Loader";
|
||||||
|
import { useForm, useFormContext } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { employee } from "../../data/masters";
|
||||||
|
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
|
||||||
|
import { formatFigure } from "../../utils/appUtils";
|
||||||
|
|
||||||
const { data, isError, isLoading, error } =
|
const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||||
useExpenseAllTransactionsList(searchString);
|
const { setBalance } = useAdvancePaymentContext();
|
||||||
|
const { data, isError, isLoading, error, isFetching } =
|
||||||
|
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||||
|
const records = Array.isArray(data) ? data : [];
|
||||||
|
|
||||||
const rows = data || [];
|
let currentBalance = 0;
|
||||||
const navigate = useNavigate();
|
const rowsWithBalance = records.map((r) => {
|
||||||
|
const isCredit = r.amount > 0;
|
||||||
|
const credit = isCredit ? r.amount : 0;
|
||||||
|
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||||
|
currentBalance += credit - debit;
|
||||||
|
return {
|
||||||
|
id: r.id,
|
||||||
|
description: r.title || "-",
|
||||||
|
projectName: r.project?.name || "-",
|
||||||
|
createdAt: r.createdAt,
|
||||||
|
credit,
|
||||||
|
debit,
|
||||||
|
financeUId: r.financeUId,
|
||||||
|
balance: currentBalance,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const columns = [
|
useEffect(() => {
|
||||||
{
|
if (!employeeId) {
|
||||||
key: "employee",
|
setBalance(null);
|
||||||
label: "Employee Name",
|
return;
|
||||||
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">
|
if (rowsWithBalance.length > 0) {
|
||||||
{r.firstName} {r.lastName}
|
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
||||||
</span>
|
} else {
|
||||||
</div>
|
setBalance(0);
|
||||||
),
|
}
|
||||||
},
|
}, [employeeId, data, setBalance]);
|
||||||
{
|
|
||||||
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) {
|
if (!employeeId) {
|
||||||
return (
|
return (
|
||||||
<div className="d-flex justify-content-center align-items-center py-4" style={{ height: "300px" }}>
|
<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 />
|
<SpinnerLoader />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
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 (
|
return (
|
||||||
<div className="card-datatable" id="payment-request-table">
|
<div className="table-responsive">
|
||||||
<div className="mx-2">
|
<table className="table align-middle">
|
||||||
<table className="table border-top dataTable text-nowrap align-middle">
|
<thead className="table_header_border">
|
||||||
<thead>
|
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<th key={col.key} className={`sorting ${col.align}`}>
|
<th key={col.key} className={col.align}>
|
||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{rows.length > 0 ? (
|
{Array.isArray(data) && data.length > 0 ? (
|
||||||
rows.map((row) => (
|
data.map((row) => (
|
||||||
<tr key={row.id} className="align-middle" style={{ height: "50px" }}>
|
<tr key={row.id}>
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
<td key={col.key} className={`${col.align} p-2`}>
|
||||||
{col.customRender
|
{col.key === "credit" ? (
|
||||||
? col.customRender(row)
|
row.amount > 0 ? (
|
||||||
: col.getValue(row)}
|
<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>
|
</td>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length} className="text-center border-0 py-3">
|
<td
|
||||||
No Employees Found
|
colSpan={columns.length}
|
||||||
|
className="text-center text-muted py-3"
|
||||||
|
>
|
||||||
|
No advance payment records found.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
)
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default AdvancePaymentList;
|
export default AdvancePaymentList;
|
||||||
|
|||||||
100
src/components/AdvancePayment/AdvancePaymentList1.jsx
Normal file
100
src/components/AdvancePayment/AdvancePaymentList1.jsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
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;
|
||||||
@ -1,233 +0,0 @@
|
|||||||
|
|
||||||
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;
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -39,12 +39,14 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
|||||||
dateTo: localToUtc(formData.dateTo),
|
dateTo: localToUtc(formData.dateTo),
|
||||||
};
|
};
|
||||||
handleFilter(filterPayload);
|
handleFilter(filterPayload);
|
||||||
|
closePanel();
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClear = () => {
|
const onClear = () => {
|
||||||
setResetKey((prev) => prev + 1);
|
setResetKey((prev) => prev + 1);
|
||||||
handleFilter(TaskReportDefaultValue);
|
handleFilter(TaskReportDefaultValue);
|
||||||
reset(TaskReportDefaultValue);
|
reset(TaskReportDefaultValue);
|
||||||
|
closePanel();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
|
|||||||
@ -147,13 +147,13 @@ const TaskReportList = () => {
|
|||||||
data-bs-placement="left"
|
data-bs-placement="left"
|
||||||
data-bs-html="true"
|
data-bs-html="true"
|
||||||
data-bs-content={`
|
data-bs-content={`
|
||||||
<div className="border border-secondary rounded custom-popover p-2 px-3">
|
<div class="border border-secondary rounded custom-popover p-2 px-3">
|
||||||
${task.teamMembers
|
${task.teamMembers
|
||||||
.map(
|
.map(
|
||||||
(m) => `
|
(m) => `
|
||||||
<div className="d-flex align-items-center gap-2 mb-2">
|
<div class="d-flex align-items-center gap-2 mb-2">
|
||||||
<div className="avatar avatar-xs">
|
<div class="avatar avatar-xs">
|
||||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
@ -204,34 +204,24 @@ const TaskReportList = () => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="total_pending_task"
|
id="total_pending_task"
|
||||||
title="Total Pending Task"
|
title="Total Pending Task"
|
||||||
content={
|
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||||
<div className="text-wrap" style={{ minWidth: "200px" }}>
|
|
||||||
This shows the total pending tasks for each activity on that date.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
</HoverPopup>
|
</HoverPopup>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th>
|
<th>
|
||||||
<span>
|
<span>
|
||||||
Reported/Planned{" "}
|
Reported/Planned{" "}
|
||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="reportes_and_planned_task"
|
id="reportes_and_planned_task"
|
||||||
title="Reported and Planned Task"
|
title="Reported and Planned Task"
|
||||||
content={
|
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
|
||||||
This shows the reported versus planned tasks for each activity on that date.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
</HoverPopup>
|
</HoverPopup>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th>Assign Date</th>
|
<th>Assign Date</th>
|
||||||
<th>Team</th>
|
<th>Team</th>
|
||||||
<th className="text-center">Actions</th>
|
<th className="text-center">Actions</th>
|
||||||
|
|||||||
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
|
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
||||||
<div className="card-title mb-0 text-start">
|
<div className="card-title mb-0 text-start">
|
||||||
|
|||||||
@ -17,19 +17,12 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
|
|||||||
import ExpenseStatus from "./ExpenseStatus";
|
import ExpenseStatus from "./ExpenseStatus";
|
||||||
import ExpenseByProject from "./ExpenseByProject";
|
import ExpenseByProject from "./ExpenseByProject";
|
||||||
import ProjectStatistics from "../Project/ProjectStatistics";
|
import ProjectStatistics from "../Project/ProjectStatistics";
|
||||||
import ServiceJobs from "./ServiceJobs";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
|
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
|
|
||||||
// Get the selected project ID from Redux store
|
// Get the selected project ID from Redux store
|
||||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||||
const isAllProjectsSelected = projectId === null;
|
const isAllProjectsSelected = projectId === null;
|
||||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
|
||||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
|
||||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid mt-5">
|
<div className="container-fluid mt-5">
|
||||||
@ -47,6 +40,26 @@ const Dashboard = () => {
|
|||||||
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
|
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
|
||||||
<TasksCard />
|
<TasksCard />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{isAllProjectsSelected && (
|
||||||
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
<ProjectCompletionChart />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
<ProjectProgressChart />
|
||||||
|
</div>
|
||||||
|
{!isAllProjectsSelected && (
|
||||||
|
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||||
|
<AttendanceOverview />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isAllProjectsSelected && (
|
||||||
|
<div className="col-xxl-4 col-lg-4">
|
||||||
|
<ProjectStatistics />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="col-12 col-xl-4 col-md-6">
|
<div className="col-12 col-xl-4 col-md-6">
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<ExpenseStatus />
|
<ExpenseStatus />
|
||||||
@ -61,32 +74,6 @@ const Dashboard = () => {
|
|||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<ExpenseByProject />
|
<ExpenseByProject />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isAllProjectsSelected && (
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ProjectCompletionChart />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ProjectProgressChart />
|
|
||||||
</div>
|
|
||||||
{!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
|
|
||||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
|
||||||
<AttendanceOverview />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isAllProjectsSelected && (
|
|
||||||
<div className="col-xxl-4 col-lg-4">
|
|
||||||
<div className="card h-100">
|
|
||||||
<ProjectStatistics />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* <div className="col-12 col-md-12">
|
|
||||||
<ServiceJobs />
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,237 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const ServiceJobs = () => {
|
|
||||||
return (
|
|
||||||
<div className="col-xxl-4 col-lg-6">
|
|
||||||
<div className="card h-100">
|
|
||||||
<div className="card-header d-flex justify-content-between">
|
|
||||||
<div className="card-title mb-0 text-start">
|
|
||||||
<h5 className="mb-1">Service Jobs</h5>
|
|
||||||
<p className="card-subtitle">All Projects</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-body p-0">
|
|
||||||
<div className="nav-align-top">
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
|
|
||||||
My Jobs
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
|
||||||
Assigned
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
|
||||||
In Progress
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{/* Tab Content */}
|
|
||||||
<div className="tab-content border-0 mx-1 text-start">
|
|
||||||
|
|
||||||
{/* ---------------------- NEW TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade show active" id="tab-new">
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
|
||||||
<i className="bx bx-check-circle"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-success text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Myrtle Ullrich</h6>
|
|
||||||
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Barry Schowalter</h6>
|
|
||||||
<p className="text-body mb-0">939 Orange, California(CA), 92118</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
|
||||||
<i className="bx bx-check-circle"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-success text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Veronica Herman</h6>
|
|
||||||
<p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Helen Jacobs</h6>
|
|
||||||
<p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---------------------- PREPARING TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade" id="tab-preparing">
|
|
||||||
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
|
||||||
<i className="bx bx-time-five"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-warning text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Oliver Grant</h6>
|
|
||||||
<p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Samantha Lee</h6>
|
|
||||||
<p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
|
||||||
<i className="bx bx-time-five"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-warning text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Marcus Howard</h6>
|
|
||||||
<p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Daniel Foster</h6>
|
|
||||||
<p className="text-body mb-0">312 Marina, California(CA), 94109</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---------------------- SHIPPING TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade" id="tab-shipping">
|
|
||||||
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
|
||||||
<i className="bx bx-package"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-info text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">James Carter</h6>
|
|
||||||
<p className="text-body mb-0">441 Market St, California(CA), 94111</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Linda Moore</h6>
|
|
||||||
<p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
|
||||||
<i className="bx bx-package"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-info text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Sarah Bennett</h6>
|
|
||||||
<p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">George Simmons</h6>
|
|
||||||
<p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ServiceJobs;
|
|
||||||
@ -9,7 +9,6 @@ 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,
|
||||||
@ -23,14 +22,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 = {
|
||||||
@ -46,6 +45,12 @@ 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 {
|
||||||
@ -83,9 +88,7 @@ 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={() =>
|
onClick={() => contactProfile(noteItem.contactId)}
|
||||||
setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
||||||
@ -94,7 +97,6 @@ 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">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { 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, tableRef, onDataFiltered }) => {
|
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
const [deletingId, setDeletingId] = useState(null);
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const {
|
const {
|
||||||
@ -47,12 +47,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
|
|||||||
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
|
||||||
);
|
);
|
||||||
@ -264,7 +258,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
|
|||||||
groupBy={groupBy}
|
groupBy={groupBy}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="card-datatable table-responsive" ref={tableRef}
|
className="card-datatable table-responsive "
|
||||||
id="horizontal-example"
|
id="horizontal-example"
|
||||||
>
|
>
|
||||||
<div className="dataTables_wrapper no-footer px-2 ">
|
<div className="dataTables_wrapper no-footer px-2 ">
|
||||||
|
|||||||
@ -18,11 +18,12 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
{/* File icon and info */}
|
{/* File icon and info */}
|
||||||
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
||||||
<i
|
<i
|
||||||
className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
|
className={`bx ${getIconByFileType(
|
||||||
|
file?.contentType
|
||||||
|
)} fs-3 `}
|
||||||
style={{ minWidth: "30px" }}
|
style={{ minWidth: "30px" }}
|
||||||
></i>
|
></i>
|
||||||
|
|
||||||
<Tooltip text={file.fileName}>
|
|
||||||
<div className="d-flex flex-column text-truncate">
|
<div className="d-flex flex-column text-truncate">
|
||||||
<span className="fw-semibold small text-truncate">
|
<span className="fw-semibold small text-truncate">
|
||||||
{file.fileName}
|
{file.fileName}
|
||||||
@ -31,7 +32,6 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Delete icon */}
|
{/* Delete icon */}
|
||||||
@ -41,7 +41,7 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
role="button"
|
role="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
|
removeFile(expenseToEdit ? file.documentId : idx);
|
||||||
}}
|
}}
|
||||||
></i>
|
></i>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
@ -49,6 +49,7 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -61,7 +62,9 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
<div className="row align-items-center">
|
<div className="row align-items-center">
|
||||||
{/* File icon and info */}
|
{/* File icon and info */}
|
||||||
<div className="col-12 d-flex align-items-center gap-2">
|
<div className="col-12 d-flex align-items-center gap-2">
|
||||||
<i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>
|
<i
|
||||||
|
className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
|
||||||
|
></i>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="d-flex flex-column text-truncate"
|
className="d-flex flex-column text-truncate"
|
||||||
@ -69,7 +72,7 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
viewFile({
|
viewFile({
|
||||||
IsOpen: true,
|
IsOpen: true,
|
||||||
Image: files,
|
Image: file.preSignedUrl,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -90,44 +93,3 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export const FileView = ({ file, viewFile }) => {
|
|
||||||
if (!file) {
|
|
||||||
return (
|
|
||||||
<div className="d-flex justify-content-center align-items-center py-4">
|
|
||||||
<p className="mb-0 text-muted small">No file uploaded</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className=" bg-white ">
|
|
||||||
<div className="row align-items-center">
|
|
||||||
{/* File icon and info */}
|
|
||||||
<div className="col-12 d-flex align-items-center gap-2 ms-n1">
|
|
||||||
<i className={`bx ${getIconByFileType(file?.contentType)} fs-4`}></i>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="d-flex flex-column text-truncate"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
viewFile({
|
|
||||||
IsOpen: true,
|
|
||||||
Image: file.preSignedUrl,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="text-muted small text-truncate mb-n4">
|
|
||||||
{file.fileName}
|
|
||||||
</span>
|
|
||||||
<span className="text-body-secondary small mt-2">
|
|
||||||
<Tooltip text={"Click on file"}>
|
|
||||||
{" "}
|
|
||||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
@ -237,7 +237,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</h5>
|
</h5>
|
||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-12 col-md-6">
|
{/* <div className="col-md-6">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Select Project
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
{...register("projectId")}
|
||||||
|
>
|
||||||
|
<option value="">Select Project</option>
|
||||||
|
{projectLoading ? (
|
||||||
|
<option>Loading...</option>
|
||||||
|
) : (
|
||||||
|
projectNames?.map((project) => (
|
||||||
|
<option key={project.id} value={project.id}>
|
||||||
|
{project.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
{errors.projectId && (
|
||||||
|
<small className="danger-text">{errors.projectId.message}</small>
|
||||||
|
)}
|
||||||
|
</div> */}
|
||||||
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<SelectProjectField
|
<SelectProjectField
|
||||||
label="Project"
|
label="Project"
|
||||||
required
|
required
|
||||||
@ -260,7 +283,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
id="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
{...register("expenseCategoryId")}
|
{...register("expenseCategoryId")}
|
||||||
>
|
>
|
||||||
@ -291,7 +314,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
Payment Mode
|
Payment Mode
|
||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
id="paymentModeId"
|
id="paymentModeId"
|
||||||
{...register("paymentModeId")}
|
{...register("paymentModeId")}
|
||||||
>
|
>
|
||||||
@ -315,22 +338,33 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
|
{/* <Label className="form-label" required>
|
||||||
|
Paid By{" "}
|
||||||
|
</Label> */}
|
||||||
|
{/* <EmployeeSearchInput
|
||||||
|
control={control}
|
||||||
|
name="paidById"
|
||||||
|
projectId={null}
|
||||||
|
forAll={true}
|
||||||
|
/> */}
|
||||||
|
|
||||||
<AppFormController
|
<AppFormController
|
||||||
name="paidById"
|
name="paidById"
|
||||||
|
|
||||||
control={control}
|
control={control}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<SelectEmployeeServerSide
|
<SelectEmployeeServerSide
|
||||||
label="Paid By" required
|
label="Paid By" required
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
isFullObject={false}
|
isFullObject={false} // because using ID
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="transactionDate" className="form-label" required>
|
<Label htmlFor="transactionDate" className="form-label" required>
|
||||||
Transaction Date
|
Transaction Date
|
||||||
@ -340,7 +374,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
className="w-100"
|
className="w-100"
|
||||||
control={control}
|
control={control}
|
||||||
maxDate={new Date()}
|
maxDate={new Date()}
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.transactionDate && (
|
{errors.transactionDate && (
|
||||||
@ -357,7 +390,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -369,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="supplerName" className="form-label" required>
|
<Label htmlFor="supplerName" className="form-label" required>
|
||||||
Supplier Name/Transporter Name/Other
|
Supplier Name/Transporter Name/Other
|
||||||
@ -377,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="supplerName"
|
id="supplerName"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("supplerName")}
|
{...register("supplerName")}
|
||||||
/>
|
/>
|
||||||
{errors.supplerName && (
|
{errors.supplerName && (
|
||||||
@ -394,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="location"
|
id="location"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("location")}
|
{...register("location")}
|
||||||
/>
|
/>
|
||||||
{errors.location && (
|
{errors.location && (
|
||||||
@ -402,7 +435,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label htmlFor="statusId" className="form-label ">
|
<label htmlFor="statusId" className="form-label ">
|
||||||
Transaction ID
|
Transaction ID
|
||||||
@ -410,7 +443,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="transactionId"
|
id="transactionId"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
{...register("transactionId")}
|
{...register("transactionId")}
|
||||||
/>
|
/>
|
||||||
@ -427,7 +460,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="gstNumber"
|
id="gstNumber"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
{...register("gstNumber")}
|
{...register("gstNumber")}
|
||||||
/>
|
/>
|
||||||
@ -436,13 +469,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row mb-4">
|
<div className="row">
|
||||||
<div className="col-md-6 text-start ">
|
<div className="col-md-6 text-start ">
|
||||||
<Label htmlFor="currencyId" className="form-label" required>
|
<Label htmlFor="currencyId" className="form-label" required>
|
||||||
Select Currency
|
Select Currency
|
||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
id="currencyId"
|
id="currencyId"
|
||||||
{...register("currencyId")}
|
{...register("currencyId")}
|
||||||
>
|
>
|
||||||
@ -471,7 +504,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="noOfPersons"
|
id="noOfPersons"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("noOfPersons")}
|
{...register("noOfPersons")}
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
/>
|
/>
|
||||||
@ -484,14 +517,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="description" className="form-label" required>
|
<Label htmlFor="description" className="form-label" required>
|
||||||
Description
|
Description
|
||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
></textarea>
|
></textarea>
|
||||||
@ -503,7 +536,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-4 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
Upload Bill{" "}
|
Upload Bill{" "}
|
||||||
|
|||||||
@ -1,169 +1,80 @@
|
|||||||
import { useState, useRef, useEffect } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
const PreviewDocument = ({ files = [] }) => {
|
|
||||||
const images = Array.isArray(files) ? files : [files];
|
|
||||||
|
|
||||||
const [index, setIndex] = useState(0);
|
const PreviewDocument = ({ imageUrl }) => {
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [rotation, setRotation] = useState(0);
|
const [rotation, setRotation] = useState(0);
|
||||||
const [scale, setScale] = useState(1);
|
const [scale, setScale] = useState(1);
|
||||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
||||||
const [dragging, setDragging] = useState(false);
|
|
||||||
|
|
||||||
const startPos = useRef({ x: 0, y: 0 });
|
|
||||||
|
|
||||||
const MIN_ZOOM = 0.4;
|
|
||||||
const MAX_ZOOM = 3;
|
|
||||||
|
|
||||||
const currentImage = images[index];
|
|
||||||
|
|
||||||
// Reset on image change
|
|
||||||
useEffect(() => {
|
|
||||||
setRotation(0);
|
|
||||||
setScale(1);
|
|
||||||
setPosition({ x: 0, y: 0 });
|
|
||||||
setLoading(true);
|
|
||||||
}, [index]);
|
|
||||||
|
|
||||||
const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
|
|
||||||
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
|
|
||||||
|
|
||||||
|
const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
|
||||||
|
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
|
||||||
const resetAll = () => {
|
const resetAll = () => {
|
||||||
setRotation(0);
|
setRotation(0);
|
||||||
setScale(1);
|
setScale(1);
|
||||||
setPosition({ x: 0, y: 0 });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const nextImage = () => {
|
|
||||||
if (index < images.length - 1) setIndex((i) => i + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const prevImage = () => {
|
|
||||||
if (index > 0) setIndex((i) => i - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleWheel = (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (e.ctrlKey) {
|
|
||||||
const delta = e.deltaY > 0 ? -0.1 : 0.1;
|
|
||||||
setScale((prev) => {
|
|
||||||
let next = prev + delta;
|
|
||||||
if (next < MIN_ZOOM) next = MIN_ZOOM;
|
|
||||||
if (next > MAX_ZOOM) next = MAX_ZOOM;
|
|
||||||
return next;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (e.deltaY > 0) nextImage();
|
|
||||||
else prevImage();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseDown = (e) => {
|
|
||||||
setDragging(true);
|
|
||||||
startPos.current = {
|
|
||||||
x: e.clientX - position.x,
|
|
||||||
y: e.clientY - position.y,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseMove = (e) => {
|
|
||||||
if (!dragging) return;
|
|
||||||
|
|
||||||
setPosition({
|
|
||||||
x: e.clientX - startPos.current.x,
|
|
||||||
y: e.clientY - startPos.current.y,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseUp = () => setDragging(false);
|
|
||||||
|
|
||||||
const handleDoubleClick = () => resetAll();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Top Controls */}
|
<div className="d-flex justify-content-start gap-3 mb-2">
|
||||||
<div className="d-flex justify-content-start align-items-center mb-2">
|
|
||||||
{/* Left */}
|
|
||||||
<div className="d-flex gap-3">
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-rotate-right cursor-pointer fs-4"
|
className="bx bx-rotate-right cursor-pointer fs-4"
|
||||||
onClick={() => setRotation((prev) => prev + 90)}
|
|
||||||
title="Rotate"
|
title="Rotate"
|
||||||
/>
|
onClick={() => setRotation((prev) => prev + 90)}
|
||||||
|
></i>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-zoom-in cursor-pointer fs-4"
|
className="bx bx-zoom-in cursor-pointer fs-4"
|
||||||
onClick={zoomIn}
|
|
||||||
title="Zoom In"
|
title="Zoom In"
|
||||||
/>
|
onClick={zoomIn}
|
||||||
|
></i>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-zoom-out cursor-pointer fs-4"
|
className="bx bx-zoom-out cursor-pointer fs-4"
|
||||||
onClick={zoomOut}
|
|
||||||
title="Zoom Out"
|
title="Zoom Out"
|
||||||
/>
|
onClick={zoomOut}
|
||||||
<i
|
></i>
|
||||||
className="bx bx-reset cursor-pointer fs-4"
|
|
||||||
onClick={resetAll}
|
|
||||||
title="Reset"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
// onWheel={handleWheel}
|
className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
|
||||||
onMouseDown={handleMouseDown}
|
style={{ minHeight: "80vh" }}
|
||||||
onMouseMove={handleMouseMove}
|
|
||||||
onMouseUp={handleMouseUp}
|
|
||||||
onMouseLeave={handleMouseUp}
|
|
||||||
onDoubleClick={handleDoubleClick}
|
|
||||||
className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
|
|
||||||
style={{
|
|
||||||
minHeight: "70vh",
|
|
||||||
userSelect: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{loading && <div className="text-secondary">Loading...</div>}
|
{loading && (
|
||||||
|
<div className="text-secondary text-center mb-2">
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mb-3 d-flex justify-content-center align-items-center">
|
||||||
<img
|
<img
|
||||||
src={currentImage?.preSignedUrl}
|
src={imageUrl}
|
||||||
alt="Preview"
|
alt="Full View"
|
||||||
draggable="false"
|
className="img-fluid"
|
||||||
style={{
|
style={{
|
||||||
maxHeight: "60vh",
|
maxHeight: "80vh",
|
||||||
|
objectFit: "contain",
|
||||||
display: loading ? "none" : "block",
|
display: loading ? "none" : "block",
|
||||||
transform: `
|
transform: `rotate(${rotation}deg) scale(${scale})`,
|
||||||
translate(${position.x}px, ${position.y}px)
|
transition: "transform 0.3s ease",
|
||||||
scale(${scale})
|
cursor: "grab",
|
||||||
rotate(${rotation}deg)
|
|
||||||
`,
|
|
||||||
transition: dragging ? "none" : "transform 0.2s ease",
|
|
||||||
cursor: dragging ? "grabbing" : "grab",
|
|
||||||
}}
|
}}
|
||||||
onLoad={() => setLoading(false)}
|
onLoad={() => setLoading(false)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-between">
|
<div className="position-absolute bottom-0 start-0 m-2">
|
||||||
<div className="text-center text-muted mt-2 small">
|
<button
|
||||||
Scroll = change image | Double click = reset
|
className="btn btn-outline-secondary"
|
||||||
</div>
|
onClick={resetAll}
|
||||||
<div className="d-flex align-items-center gap-2">
|
>
|
||||||
<i
|
<i className="bx bx-reset"></i> Reset
|
||||||
className="bx bx-chevron-left cursor-pointer fs-4"
|
</button>
|
||||||
onClick={prevImage}
|
|
||||||
/>
|
|
||||||
<span>
|
|
||||||
{index + 1} / {images.length}
|
|
||||||
</span>
|
|
||||||
<i
|
|
||||||
className="bx bx-chevron-right cursor-pointer fs-4"
|
|
||||||
onClick={nextImage}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default PreviewDocument;
|
export default PreviewDocument;
|
||||||
|
|||||||
@ -393,7 +393,7 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
|
|||||||
if (isImage) {
|
if (isImage) {
|
||||||
setDocumentView({
|
setDocumentView({
|
||||||
IsOpen: true,
|
IsOpen: true,
|
||||||
Images: data?.documents,
|
Image: doc.preSignedUrl,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,16 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
const WarningBlock = ({content}) => {
|
|
||||||
return (
|
|
||||||
<div className="col-12 my-1">
|
|
||||||
<div className="d-flex align-items-center gap-2 p-3 rounded bg-warning bg-opacity-10 border border-warning-subtle text-start align-item-start">
|
|
||||||
<i className="bx bx-info-circle text-warning fs-5"></i>
|
|
||||||
<p className="mb-0 small">
|
|
||||||
{content}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WarningBlock
|
|
||||||
@ -25,28 +25,17 @@ const Sidebar = () => {
|
|||||||
/>
|
/>
|
||||||
</span> */}
|
</span> */}
|
||||||
|
|
||||||
<a
|
<small className="app-brand-link fw-bold navbar-brand text-green fs-6">
|
||||||
href="/"
|
<span className="app-brand-logo demo">
|
||||||
className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
|
<img src="/img/brand/marco.png" width="50" />
|
||||||
>
|
|
||||||
<span className="app-brand-logo demo d-flex align-items-center">
|
|
||||||
<img
|
|
||||||
src="/img/brand/marco.png"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
alt="OnFieldWork logo"
|
|
||||||
/>
|
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-blue">OnField</span>
|
||||||
<span className="app-brand-text">
|
<span>Work</span>
|
||||||
<span className="text-primary ">OnField</span>
|
|
||||||
<span className="mx-1">Work</span>
|
|
||||||
<span className="text-dark">.com</span>
|
<span className="text-dark">.com</span>
|
||||||
</span>
|
</small>
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
|
<small className="layout-menu-toggle menu-link text-large ms-auto">
|
||||||
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
|
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@ -69,7 +58,7 @@ const Sidebar = () => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{data &&
|
{data &&
|
||||||
data?.data.map((section) => (
|
data?.data?.map((section) => (
|
||||||
<React.Fragment
|
<React.Fragment
|
||||||
key={section.id || section.header || section.items[0]?.id}
|
key={section.id || section.header || section.items[0]?.id}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -43,7 +43,7 @@ const OrgPickerfromTenant = ({ title }) => {
|
|||||||
label: "Name",
|
label: "Name",
|
||||||
getValue: (org) => (
|
getValue: (org) => (
|
||||||
<div className="d-flex gap-2 py-1 ">
|
<div className="d-flex gap-2 py-1 ">
|
||||||
<i className="bx bx-buildings"></i>
|
<i class="bx bx-buildings"></i>
|
||||||
<span
|
<span
|
||||||
className="text-truncate d-inline-block "
|
className="text-truncate d-inline-block "
|
||||||
style={{ maxWidth: "150px" }}
|
style={{ maxWidth: "150px" }}
|
||||||
@ -126,7 +126,7 @@ const OrgPickerfromTenant = ({ title }) => {
|
|||||||
onOpen({ startStep: 3, orgData: row })
|
onOpen({ startStep: 3, orgData: row })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className='bx bx-right-arrow-circle text-primary'></i>
|
<i class='bx bx-right-arrow-circle text-primary'></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
|
|||||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||||
<>
|
<>
|
||||||
{isProccesed ? (
|
{isProccesed ? (
|
||||||
<div className="accordion-item active shadow-none">
|
<div class="accordion-item active shadow-none">
|
||||||
<h2 className="accordion-header d-flex align-items-center">
|
<h2 class="accordion-header d-flex align-items-center">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="accordion-button"
|
class="accordion-button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#accordionWithIcon-1"
|
data-bs-target="#accordionWithIcon-1"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
>
|
>
|
||||||
<i className="icon-base bx bx-receipt me-2"></i>
|
<i class="icon-base bx bx-receipt me-2"></i>
|
||||||
Make Expense
|
Make Expense
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
Select Project
|
Select Project
|
||||||
</Label> */}
|
</Label> */}
|
||||||
{/* <select
|
{/* <select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
id="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
{...register("expenseCategoryId")}
|
{...register("expenseCategoryId")}
|
||||||
disabled={
|
disabled={
|
||||||
@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title and Advance Payment */}
|
{/* Title and Advance Payment */}
|
||||||
<div className="row mt-n2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="title" className="form-label" required>
|
<Label htmlFor="title" className="form-label" required>
|
||||||
Title
|
Title
|
||||||
@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="title"
|
id="title"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("title")}
|
{...register("title")}
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<div className="d-flex align-items-center gap-3 mt-3">
|
<div className="d-flex align-items-center gap-3">
|
||||||
<div className="form-check d-flex flex-row m-0 gap-2">
|
<div className="form-check d-flex flex-row m-0 gap-2">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
@ -387,7 +387,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={new Date()}
|
minDate={new Date()}
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
@ -405,7 +404,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -430,7 +429,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
setValue("payee", val, { shouldValidate: true })
|
setValue("payee", val, { shouldValidate: true })
|
||||||
}
|
}
|
||||||
error={errors.payee?.message}
|
error={errors.payee?.message}
|
||||||
size="md"
|
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
@ -460,7 +458,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
id="currencyId"
|
id="currencyId"
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
{...register("currencyId")}
|
{...register("currencyId")}
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
@ -492,7 +490,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
disabled={
|
disabled={
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { 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", tableRef, onDataFiltered }) => {
|
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
|
||||||
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,7 +30,6 @@ 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;
|
||||||
@ -150,12 +149,6 @@ 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} />;
|
||||||
}
|
}
|
||||||
@ -229,7 +222,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
paramData={deletingId}
|
paramData={deletingId}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
<div className="card page-min-h table-responsive px-sm-4">
|
||||||
<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
|
||||||
@ -247,7 +240,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
<th className="text-start">Action</th>
|
<th className="text-center">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@ -307,7 +300,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
data-bs-toggle="tooltip"
|
data-bs-toggle="tooltip"
|
||||||
data-bs-offset="0,8"
|
data-bs-offset="0,8"
|
||||||
data-bs-placement="top"
|
data-bs-placement="top"
|
||||||
data-bs-custom-className="tooltip-dark"
|
data-bs-custom-class="tooltip-dark"
|
||||||
title="More Action"
|
title="More Action"
|
||||||
></i>
|
></i>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -1,85 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -150,7 +150,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
|
|||||||
@ -163,7 +163,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
|
|||||||
@ -348,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
|
|||||||
@ -187,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<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>
|
||||||
|
|||||||
@ -199,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
serviceId={selectedService}
|
serviceId={selectedService}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-5">
|
||||||
<p className="text-muted fs-6">No infrastructure data available.</p>
|
<p className="text-muted fs-6">No infrastructure data available.</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -15,7 +15,7 @@ const ProjectAssignedOrgs = () => {
|
|||||||
label: "Organization Name",
|
label: "Organization Name",
|
||||||
getValue: (org) => (
|
getValue: (org) => (
|
||||||
<div className="d-flex gap-2 py-1 ">
|
<div className="d-flex gap-2 py-1 ">
|
||||||
<i className="bx bx-buildings"></i>
|
<i class="bx bx-buildings"></i>
|
||||||
<span
|
<span
|
||||||
className="text-truncate d-inline-block "
|
className="text-truncate d-inline-block "
|
||||||
style={{ maxWidth: "150px" }}
|
style={{ maxWidth: "150px" }}
|
||||||
|
|||||||
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
|
|||||||
}, [selectedProject]);
|
}, [selectedProject]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="card h-100">
|
||||||
<div className="card-header text-start">
|
<div className="card-header text-start">
|
||||||
<h5 className="card-action-title mb-0">
|
<h5 className="card-action-title mb-0">
|
||||||
{" "}
|
{" "}
|
||||||
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -13,8 +13,7 @@ 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">
|
||||||
|
|||||||
@ -10,11 +10,13 @@ import {
|
|||||||
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
|
||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
import { useOrganizationEmployees } from "../../../hooks/useOrganization";
|
||||||
|
import { useDispatch } from "react-redux";
|
||||||
|
import { changeMaster } from "../../../slices/localVariablesSlice";
|
||||||
|
|
||||||
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const debounceSearchTerm = useDebounce(searchTerm, 500);
|
const debounceSearchTerm = useDebounce(searchTerm, 500);
|
||||||
|
const dispatch = useDispatch();
|
||||||
const {
|
const {
|
||||||
data: employeesData = [],
|
data: employeesData = [],
|
||||||
isLoading,
|
isLoading,
|
||||||
@ -45,6 +47,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
dispatch(changeMaster("Job Role"));
|
||||||
if (employeesData?.data?.length > 0) {
|
if (employeesData?.data?.length > 0) {
|
||||||
const available = employeesData.data.filter((emp) => {
|
const available = employeesData.data.filter((emp) => {
|
||||||
const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
|
const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
|
||||||
@ -155,7 +158,7 @@ if (employees.length === 0) {
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="position-relative mt-5">
|
<div className=" position-relative">
|
||||||
<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>
|
||||||
@ -183,8 +186,7 @@ if (employees.length === 0) {
|
|||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleSelectChange(index, "serviceId", e.target.value)
|
handleSelectChange(index, "serviceId", e.target.value)
|
||||||
}
|
}
|
||||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.serviceId ? "is-invalid" : ""
|
||||||
emp.errors.serviceId ? "is-invalid" : ""
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<option value="">Select Service</option>
|
<option value="">Select Service</option>
|
||||||
@ -205,8 +207,7 @@ if (employees.length === 0) {
|
|||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
handleSelectChange(index, "jobRole", e.target.value)
|
handleSelectChange(index, "jobRole", e.target.value)
|
||||||
}
|
}
|
||||||
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
|
className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.jobRole ? "is-invalid" : ""
|
||||||
emp.errors.jobRole ? "is-invalid" : ""
|
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<option value="">Select Job Role</option>
|
<option value="">Select Job Role</option>
|
||||||
@ -232,15 +233,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 my-3">
|
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 ">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary mt-2"
|
className="btn btn-sm btn-label-secondary"
|
||||||
onClick={() => closeModal()}
|
onClick={() => closeModal()}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button onClick={onSubmit} className="btn btn-primary btn-sm mt-2">
|
<button onClick={onSubmit} className="btn btn-primary">
|
||||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
{isPending ? "Please Wait..." : "Assign to Project"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
{/* <select
|
{/* <select
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
>
|
>
|
||||||
<option value="">Select Project</option>
|
<option value="">Select Project</option>
|
||||||
@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
id="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
{...register("expenseCategoryId")}
|
{...register("expenseCategoryId")}
|
||||||
>
|
>
|
||||||
@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title and Is Variable */}
|
{/* Title and Is Variable */}
|
||||||
<div className="row my-2 text-start mt-n2">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="title" className="form-label" required>
|
<Label htmlFor="title" className="form-label" required>
|
||||||
Title
|
Title
|
||||||
@ -235,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="title"
|
id="title"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("title")}
|
{...register("title")}
|
||||||
placeholder="Enter title"
|
placeholder="Enter title"
|
||||||
/>
|
/>
|
||||||
@ -244,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6 mt-2">
|
||||||
<div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
|
<div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
|
||||||
<Label htmlFor="isVariable" className="form-label mb-0" required>
|
<Label htmlFor="isVariable" className="form-label mb-0" required>
|
||||||
Payment Type
|
Payment Type
|
||||||
@ -252,15 +252,16 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
title="Payment Type"
|
title="Payment Type"
|
||||||
id="payment_type"
|
id="payment_type"
|
||||||
|
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<div className=" w-50">
|
||||||
|
<p>
|
||||||
Choose whether the payment amount varies or remains fixed
|
Choose whether the payment amount varies or remains fixed
|
||||||
each cycle.
|
each cycle.
|
||||||
<br />
|
<br />
|
||||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||||
<br />
|
<br />
|
||||||
<strong>Fixed:</strong> Amount stays constant.
|
<strong>Fixed:</strong> Amount stays constant.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -273,7 +274,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
defaultValue={defaultRecurringExpense.isVariable ?? false}
|
defaultValue={defaultRecurringExpense.isVariable ?? false}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<div className="d-flex align-items-center gap-3 mt-2">
|
<div className="d-flex align-items-center gap-3 mt-1">
|
||||||
<div className="form-check">
|
<div className="form-check">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
@ -326,7 +327,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={new Date()}
|
minDate={new Date()}
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
{errors.strikeDate && (
|
{errors.strikeDate && (
|
||||||
<small className="danger-text">{errors.strikeDate.message}</small>
|
<small className="danger-text">{errors.strikeDate.message}</small>
|
||||||
@ -340,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -354,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Payee and Currency */}
|
{/* Payee and Currency */}
|
||||||
<div className="row my-2 text-start mt-3">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="payee" className="form-label" required>
|
<Label htmlFor="payee" className="form-label" required>
|
||||||
Payee (Supplier Name/Transporter Name/Other)
|
Payee (Supplier Name/Transporter Name/Other)
|
||||||
@ -367,7 +367,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
}
|
}
|
||||||
error={errors.payee?.message}
|
error={errors.payee?.message}
|
||||||
placeholder="Select or enter payee"
|
placeholder="Select or enter payee"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -377,7 +376,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
id="currencyId"
|
id="currencyId"
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
{...register("currencyId")}
|
{...register("currencyId")}
|
||||||
>
|
>
|
||||||
<option value="">Select Currency</option>
|
<option value="">Select Currency</option>
|
||||||
@ -399,7 +398,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Frequency To and Status Id */}
|
{/* Frequency To and Status Id */}
|
||||||
<div className="row my-2 text-start mt-n2">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div className="d-flex justify-content-start align-items-center gap-2">
|
<div className="d-flex justify-content-start align-items-center gap-2">
|
||||||
<Label htmlFor="frequency" className="form-label mb-0" required>
|
<Label htmlFor="frequency" className="form-label mb-0" required>
|
||||||
@ -421,7 +420,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
|
|
||||||
<select
|
<select
|
||||||
id="frequency"
|
id="frequency"
|
||||||
className="form-select mt-1"
|
className="form-select form-select-sm mt-1"
|
||||||
{...register("frequency", { valueAsNumber: true })}
|
{...register("frequency", { valueAsNumber: true })}
|
||||||
>
|
>
|
||||||
<option value="">Select Frequency</option>
|
<option value="">Select Frequency</option>
|
||||||
@ -443,7 +442,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<select
|
<select
|
||||||
id="statusId"
|
id="statusId"
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
{...register("statusId")}
|
{...register("statusId")}
|
||||||
>
|
>
|
||||||
<option value="">Select Status</option>
|
<option value="">Select Status</option>
|
||||||
@ -477,10 +476,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
title="Payment Buffer Days"
|
title="Payment Buffer Days"
|
||||||
id="payment_buffer_days"
|
id="payment_buffer_days"
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<p>
|
||||||
Number of extra days allowed after the due date before
|
Number of extra days allowed after the due date before
|
||||||
payment is considered late.
|
payment is considered late.
|
||||||
</div>
|
</p>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||||
@ -490,7 +489,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="paymentBufferDays"
|
id="paymentBufferDays"
|
||||||
className="form-control mt-1"
|
className="form-control form-control-sm mt-1"
|
||||||
min="0"
|
min="0"
|
||||||
step="1"
|
step="1"
|
||||||
{...register("paymentBufferDays", { valueAsNumber: true })}
|
{...register("paymentBufferDays", { valueAsNumber: true })}
|
||||||
@ -512,11 +511,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
title="End Date"
|
title="End Date"
|
||||||
id="end_date"
|
id="end_date"
|
||||||
|
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<p>
|
||||||
The date when the last payment in the recurrence occurs.
|
The date when the last payment in the recurrence occurs.
|
||||||
</div>
|
</p>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||||
@ -528,7 +526,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={StrikeDate}
|
minDate={StrikeDate}
|
||||||
className="w-100 mt-1"
|
className="w-100 mt-1"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.endDate && (
|
{errors.endDate && (
|
||||||
@ -571,7 +568,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
></textarea>
|
></textarea>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { 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, tableRef, onDataFiltered }) => {
|
const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||||
const { setManageRequest, setVieRequest, setViewRecurring } =
|
const { setManageRequest, setVieRequest, setViewRecurring } =
|
||||||
useRecurringExpenseContext();
|
useRecurringExpenseContext();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -70,7 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
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",
|
||||||
},
|
},
|
||||||
@ -111,17 +112,6 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
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);
|
||||||
@ -160,6 +150,10 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const filteredData = data?.data?.filter((item) =>
|
||||||
|
filterStatuses.includes(item?.status?.id)
|
||||||
|
);
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
const handleDelete = (id) => {
|
||||||
setDeletingId(id);
|
setDeletingId(id);
|
||||||
DeleteExpense(
|
DeleteExpense(
|
||||||
@ -172,6 +166,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
console.log("Tanish",filteredData)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{IsDeleteModalOpen && (
|
{IsDeleteModalOpen && (
|
||||||
@ -186,7 +181,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
<div className="card page-min-h table-responsive px-sm-4">
|
||||||
<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 && (
|
||||||
@ -198,7 +193,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
<th className="text-end">Action</th>
|
<th className="text-center">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@ -220,8 +215,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
: col?.getValue(recurringExpense)}
|
: col?.getValue(recurringExpense)}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
<td className="sticky-action-column bg-white text-end">
|
<td className="sticky-action-column bg-white">
|
||||||
<div className="d-flex justify-content-end flex-row gap-2 gap-0">
|
<div className="d-flex flex-row gap-2 gap-0">
|
||||||
<i
|
<i
|
||||||
className="bx bx-show text-primary cursor-pointer"
|
className="bx bx-show text-primary cursor-pointer"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
|||||||
@ -1,107 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -175,9 +175,12 @@ const JobList = ({ isArchive }) => {
|
|||||||
<td
|
<td
|
||||||
key={col.key}
|
key={col.key}
|
||||||
className={col.className}
|
className={col.className}
|
||||||
|
// onClick={() =>
|
||||||
|
// setSelectedJob({ showCanvas: true, job: row?.id })
|
||||||
|
// }
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!isArchive) {
|
if (!isArchive) {
|
||||||
setSelectedJob({ showCanvas: true, job: row?.id });
|
setSelectedJob({ showCanvas: true, job: e?.id });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
|
|||||||
@ -62,27 +62,15 @@ const Jobs = () => {
|
|||||||
<div className="card page-min-h my-2 px-7 pb-4">
|
<div className="card page-min-h my-2 px-7 pb-4">
|
||||||
<div className="row align-items-center py-4">
|
<div className="row align-items-center py-4">
|
||||||
|
|
||||||
{/* LEFT — Archive / Unarchive Toggle */}
|
{/* LEFT — Tabs */}
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
|
className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
|
||||||
}`}
|
onClick={() => setShowArchive(!showArchive)}
|
||||||
onClick={() => setShowArchive(false)}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-archive-out me-1"></i> Active Jobs
|
<i className="bx bx-archive bx-sm me-1 mt-1"></i> Archived
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => setShowArchive(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-archive me-1"></i> Archived
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* RIGHT — New Job button */}
|
{/* RIGHT — New Job button */}
|
||||||
@ -94,7 +82,6 @@ const Jobs = () => {
|
|||||||
<i className="bx bx-plus-circle bx-md me-2"></i>New Job
|
<i className="bx bx-plus-circle bx-md me-2"></i>New Job
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Job List */}
|
{/* Job List */}
|
||||||
|
|||||||
@ -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">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Select Status
|
Select Status
|
||||||
</Label>
|
</Label>
|
||||||
@ -223,6 +223,9 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
className="form-control form-control-sm"
|
className="form-control form-control-sm"
|
||||||
{...register("contactName")}
|
{...register("contactName")}
|
||||||
placeholder="Enter Employee name.."
|
placeholder="Enter Employee name.."
|
||||||
|
onInput={(e) => {
|
||||||
|
e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{errors?.contactName && (
|
{errors?.contactName && (
|
||||||
<span className="danger-text">{errors.contactName.message}</span>
|
<span className="danger-text">{errors.contactName.message}</span>
|
||||||
@ -297,7 +300,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-end gap-4 mt-4">
|
<div className="d-flex justify-content-end gap-4">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-outline-secondary"
|
className="btn btn-sm btn-outline-secondary"
|
||||||
disabled={isPending || isUpdating}
|
disabled={isPending || isUpdating}
|
||||||
|
|||||||
@ -237,17 +237,14 @@ const ServiceBranch = () => {
|
|||||||
!isError &&
|
!isError &&
|
||||||
(!data?.data || data.data.length === 0) && (
|
(!data?.data || data.data.length === 0) && (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length + 1}>
|
<td
|
||||||
<div
|
colSpan={columns.length + 1}
|
||||||
className="d-flex justify-content-center align-items-center"
|
className="text-center py-12"
|
||||||
style={{ height: "150px" }}
|
|
||||||
>
|
>
|
||||||
No Branch Found
|
No Branch Found
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
|
|||||||
type="submit"
|
type="submit"
|
||||||
disabled={!watch("comment")?.trim() || isPending}
|
disabled={!watch("comment")?.trim() || isPending}
|
||||||
>
|
>
|
||||||
Submit
|
Send
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -140,7 +140,6 @@ const ManageJob = ({ Job }) => {
|
|||||||
formData.projectId = projectId;
|
formData.projectId = projectId;
|
||||||
|
|
||||||
CreateJob(formData);
|
CreateJob(formData);
|
||||||
setManageJob({ isOpen: false, jobId: null });
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -173,20 +172,6 @@ const ManageJob = ({ Job }) => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<AppFormProvider {...methods}>
|
<AppFormProvider {...methods}>
|
||||||
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<SelectFieldSearch
|
|
||||||
label="Select Branch"
|
|
||||||
placeholder="Select Branch"
|
|
||||||
value={watch("projectBranchId")}
|
|
||||||
onChange={(val) => setValue("projectBranchId", val)}
|
|
||||||
valueKey="id"
|
|
||||||
labelKey="branchName"
|
|
||||||
hookParams={[projectId, true, 10, 1]}
|
|
||||||
useFetchHook={useBranches}
|
|
||||||
isMultiple={false}
|
|
||||||
disabled={Job}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12 mb-2 ">
|
<div className="col-12 col-md-12 mb-2 ">
|
||||||
<Label required>Title</Label>
|
<Label required>Title</Label>
|
||||||
<input
|
<input
|
||||||
@ -259,7 +244,20 @@ const ManageJob = ({ Job }) => {
|
|||||||
placeholder="Enter Tag"
|
placeholder="Enter Tag"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 col-md-6 mb-2 mb-md-4">
|
||||||
|
<SelectFieldSearch
|
||||||
|
label="Select Branch"
|
||||||
|
placeholder="Select Branch"
|
||||||
|
value={watch("projectBranchId")}
|
||||||
|
onChange={(val) => setValue("projectBranchId", val)}
|
||||||
|
valueKey="id"
|
||||||
|
labelKey="branchName"
|
||||||
|
hookParams={[projectId, true, 10, 1]}
|
||||||
|
useFetchHook={useBranches}
|
||||||
|
isMultiple={false}
|
||||||
|
disabled={Job}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<Label required>Description</Label>
|
<Label required>Description</Label>
|
||||||
<textarea
|
<textarea
|
||||||
@ -278,7 +276,7 @@ const ManageJob = ({ Job }) => {
|
|||||||
? "Please wait..."
|
? "Please wait..."
|
||||||
: Job
|
: Job
|
||||||
? "Update"
|
? "Update"
|
||||||
: "Assign"}
|
: "Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -69,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
|
|||||||
id="STATUS_CHANEG"
|
id="STATUS_CHANEG"
|
||||||
Mode="click"
|
Mode="click"
|
||||||
className=""
|
className=""
|
||||||
align="left"
|
align="right"
|
||||||
content={
|
content={
|
||||||
<ChangeStatus
|
<ChangeStatus
|
||||||
statusId={data?.status?.id}
|
statusId={data?.status?.id}
|
||||||
@ -149,8 +149,7 @@ const ManageJobTicket = ({ Job }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="BRANCH_DETAILS"
|
id="BRANCH_DETAILS"
|
||||||
Mode="click"
|
Mode="click"
|
||||||
align="right"
|
align="auto"
|
||||||
minWidth="340px"
|
|
||||||
boundaryRef={drawerRef}
|
boundaryRef={drawerRef}
|
||||||
content={<BranchDetails branch={data?.projectBranch?.id} />}
|
content={<BranchDetails branch={data?.projectBranch?.id} />}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -22,7 +22,8 @@ export const projectSchema = z.object({
|
|||||||
contactName: z
|
contactName: z
|
||||||
.string()
|
.string()
|
||||||
.trim()
|
.trim()
|
||||||
.min(1, "Contact name is required"),
|
.min(1, "Contact name is required")
|
||||||
|
.regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
|
||||||
|
|
||||||
contactPhone: z
|
contactPhone: z
|
||||||
.string()
|
.string()
|
||||||
|
|||||||
@ -77,7 +77,6 @@ const ServiceProjectTeamList = () => {
|
|||||||
<td
|
<td
|
||||||
colSpan={servceProjectColmen.length}
|
colSpan={servceProjectColmen.length}
|
||||||
className="text-center py-4 border-0"
|
className="text-center py-4 border-0"
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<SpinnerLoader />
|
<SpinnerLoader />
|
||||||
@ -86,7 +85,6 @@ const ServiceProjectTeamList = () => {
|
|||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -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={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
|
className={errors.onBoardingDate ? "is-invalid" : ""}
|
||||||
/>
|
/>
|
||||||
{errors.onBoardingDate && (
|
{errors.onBoardingDate && (
|
||||||
<div className="invalid-feedback">
|
<div className="invalid-feedback">
|
||||||
|
|||||||
@ -200,9 +200,7 @@ export const SelectProjectField = ({
|
|||||||
isFullObject = false,
|
isFullObject = false,
|
||||||
isMultiple = false,
|
isMultiple = false,
|
||||||
isAllProject = false,
|
isAllProject = false,
|
||||||
disabled,
|
disabled
|
||||||
className,
|
|
||||||
errors,
|
|
||||||
}) => {
|
}) => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const debounce = useDebounce(searchText, 300);
|
const debounce = useDebounce(searchText, 300);
|
||||||
@ -305,10 +303,7 @@ export const SelectProjectField = ({
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{errors?.projectId && (
|
{/* DROPDOWN */}
|
||||||
<div className="danger-text">{errors.projectId.message}</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
|
||||||
@ -331,7 +326,6 @@ export const SelectProjectField = ({
|
|||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
|
|
||||||
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<li className="dropdown-item text-muted text-center">Loading...</li>
|
<li className="dropdown-item text-muted text-center">Loading...</li>
|
||||||
@ -364,7 +358,6 @@ export const SelectProjectField = ({
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -384,7 +377,6 @@ export const SelectFieldSearch = ({
|
|||||||
isMultiple = false,
|
isMultiple = false,
|
||||||
hookParams,
|
hookParams,
|
||||||
useFetchHook,
|
useFetchHook,
|
||||||
errors = null,
|
|
||||||
}) => {
|
}) => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const debounce = useDebounce(searchText, 300);
|
const debounce = useDebounce(searchText, 300);
|
||||||
@ -394,76 +386,108 @@ export const SelectFieldSearch = ({
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
||||||
const getDisplayName = (entity) =>
|
const getDisplayName = (entity) => {
|
||||||
entity ? `${entity[labelKey] || ""}`.trim() : "";
|
if (!entity) return "";
|
||||||
|
return `${entity[labelKey] || ""}`.trim();
|
||||||
|
};
|
||||||
|
|
||||||
/** ----------------------------- SELECTED OPTION ----------------------------- */
|
/** -----------------------------
|
||||||
|
* SELECTED OPTION (SINGLE)
|
||||||
|
* ----------------------------- */
|
||||||
let selectedSingle = null;
|
let selectedSingle = null;
|
||||||
|
|
||||||
if (!isMultiple) {
|
if (!isMultiple) {
|
||||||
if (isFullObject && value) selectedSingle = value;
|
if (isFullObject && value) selectedSingle = value;
|
||||||
else if (!isFullObject && value)
|
else if (!isFullObject && value)
|
||||||
selectedSingle = options.find((o) => o[valueKey] === value);
|
selectedSingle = options.find((o) => o[valueKey] === value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** -----------------------------
|
||||||
|
* SELECTED OPTION (MULTIPLE)
|
||||||
|
* ----------------------------- */
|
||||||
let selectedList = [];
|
let selectedList = [];
|
||||||
if (isMultiple && Array.isArray(value)) {
|
if (isMultiple && Array.isArray(value)) {
|
||||||
selectedList = isFullObject
|
if (isFullObject) selectedList = value;
|
||||||
? value
|
else {
|
||||||
: options.filter((opt) => value.includes(opt[valueKey]));
|
selectedList = options.filter((opt) => value.includes(opt[valueKey]));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Main button label */
|
||||||
const displayText = !isMultiple
|
const displayText = !isMultiple
|
||||||
? getDisplayName(selectedSingle) || placeholder
|
? getDisplayName(selectedSingle) || placeholder
|
||||||
: selectedList.length
|
: selectedList.length > 0
|
||||||
? selectedList.map((e) => getDisplayName(e)).join(", ")
|
? selectedList.map((e) => getDisplayName(e)).join(", ")
|
||||||
: placeholder;
|
: placeholder;
|
||||||
|
|
||||||
/** ----------------------------- OUTSIDE CLICK ----------------------------- */
|
/** -----------------------------
|
||||||
|
* HANDLE OUTSIDE CLICK
|
||||||
|
* ----------------------------- */
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (e) => {
|
const handleClickOutside = (e) => {
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target))
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/** ----------------------------- MERGED OPTIONS ----------------------------- */
|
// MERGED OPTIONS TO ENSURE SELECTED VALUE APPEARS EVEN IF NOT IN SEARCH RESULT
|
||||||
const [mergedOptions, setMergedOptions] = useState(options);
|
const [mergedOptions, setMergedOptions] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let finalList = [...options];
|
let finalList = [...options];
|
||||||
|
|
||||||
if (!isMultiple && value && !isFullObject && typeof value === "object") {
|
if (!isMultiple && value && !isFullObject) {
|
||||||
const exists = options.some((o) => o[valueKey] === value[valueKey]);
|
// already selected option inside options?
|
||||||
if (!exists) finalList.unshift(value);
|
const exists = options.some((o) => o[valueKey] === value);
|
||||||
|
|
||||||
|
// if selected item not found, try to get from props (value) as fallback
|
||||||
|
if (!exists && typeof value === "object") {
|
||||||
|
finalList.unshift(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isMultiple && Array.isArray(value)) {
|
if (isMultiple && Array.isArray(value)) {
|
||||||
value.forEach((val) => {
|
value.forEach((val) => {
|
||||||
const id = isFullObject ? val[valueKey] : val;
|
const id = isFullObject ? val[valueKey] : val;
|
||||||
const exists = options.some((o) => o[valueKey] === id);
|
const exists = options.some((o) => o[valueKey] === id);
|
||||||
if (!exists && typeof val === "object") finalList.unshift(val);
|
|
||||||
|
if (!exists && typeof val === "object") {
|
||||||
|
finalList.unshift(val);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only update if different to avoid infinite loop
|
setMergedOptions(finalList);
|
||||||
const oldKeys = mergedOptions.map((o) => o[valueKey]).join(",");
|
}, [options, value]);
|
||||||
const newKeys = finalList.map((o) => o[valueKey]).join(",");
|
|
||||||
if (oldKeys !== newKeys) setMergedOptions(finalList);
|
|
||||||
}, [options, value, isMultiple, isFullObject, valueKey, mergedOptions]);
|
|
||||||
|
|
||||||
/** ----------------------------- HANDLE SELECT ----------------------------- */
|
/** -----------------------------
|
||||||
|
* HANDLE SELECT
|
||||||
|
* ----------------------------- */
|
||||||
const handleSelect = (option) => {
|
const handleSelect = (option) => {
|
||||||
if (!isMultiple) {
|
if (!isMultiple) {
|
||||||
onChange(isFullObject ? option : option[valueKey]);
|
// SINGLE SELECT
|
||||||
setOpen(false)
|
if (isFullObject) onChange(option);
|
||||||
|
else onChange(option[valueKey]);
|
||||||
} else {
|
} else {
|
||||||
|
// MULTIPLE SELECT
|
||||||
|
let updated = [];
|
||||||
|
|
||||||
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
|
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
|
||||||
const updated = exists
|
|
||||||
? selectedList.filter((e) => e[valueKey] !== option[valueKey])
|
if (exists) {
|
||||||
: [...selectedList, option];
|
// remove
|
||||||
onChange(isFullObject ? updated : updated.map((x) => x[valueKey]));
|
updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
|
||||||
|
} else {
|
||||||
|
// add
|
||||||
|
updated = [...selectedList, option];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isFullObject) onChange(updated);
|
||||||
|
else onChange(updated.map((x) => x[valueKey]));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -475,6 +499,7 @@ export const SelectFieldSearch = ({
|
|||||||
</Label>
|
</Label>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* MAIN BUTTON */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`select2-icons form-select d-flex align-items-center justify-content-between ${
|
className={`select2-icons form-select d-flex align-items-center justify-content-between ${
|
||||||
@ -488,17 +513,17 @@ export const SelectFieldSearch = ({
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{errors && <div className="danger-text">{errors.message}</div>}
|
{/* DROPDOWN */}
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded rounded-top-0 overflow-x-hidden"
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "100%",
|
top: "100%",
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 1050,
|
zIndex: 1050,
|
||||||
marginTop: "1px",
|
marginTop: "2px",
|
||||||
|
borderRadius: "0.375rem",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -512,20 +537,19 @@ export const SelectFieldSearch = ({
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<li className="dropdown-item text-muted text-center">
|
<li className="dropdown-item text-muted text-center">Loading...</li>
|
||||||
Loading...
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
{!isLoading && mergedOptions.length === 0 && (
|
|
||||||
|
{!isLoading && options.length === 0 && (
|
||||||
<li className="dropdown-item text-muted text-center">
|
<li className="dropdown-item text-muted text-center">
|
||||||
No results found
|
No results found
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isLoading &&
|
{!isLoading &&
|
||||||
mergedOptions.map((option) => {
|
options.map((option) => {
|
||||||
const isActive = isMultiple
|
const isActive = isMultiple
|
||||||
? selectedList.some((x) => x[valueKey] === option[valueKey])
|
? selectedList.some((x) => x[valueKey] === option[valueKey])
|
||||||
: selectedSingle &&
|
: selectedSingle &&
|
||||||
@ -535,9 +559,7 @@ export const SelectFieldSearch = ({
|
|||||||
<li key={option[valueKey]}>
|
<li key={option[valueKey]}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`dropdown-item rounded ${
|
className={`dropdown-item ${isActive ? "active" : ""}`}
|
||||||
isActive ? "active" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => handleSelect(option)}
|
onClick={() => handleSelect(option)}
|
||||||
>
|
>
|
||||||
{getDisplayName(option)}
|
{getDisplayName(option)}
|
||||||
@ -545,7 +567,6 @@ export const SelectFieldSearch = ({
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,6 +6,10 @@ import {
|
|||||||
togglePopup,
|
togglePopup,
|
||||||
} from "../../slices/localVariablesSlice";
|
} from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* align: "auto" | "left" | "right"
|
||||||
|
* boundaryRef: optional ref to the drawer/container element to use as boundary
|
||||||
|
*/
|
||||||
const HoverPopup = ({
|
const HoverPopup = ({
|
||||||
id,
|
id,
|
||||||
title,
|
title,
|
||||||
@ -13,9 +17,7 @@ const HoverPopup = ({
|
|||||||
children,
|
children,
|
||||||
className = "",
|
className = "",
|
||||||
Mode = "hover",
|
Mode = "hover",
|
||||||
align = "auto", // <-- dynamic placement
|
align = "auto",
|
||||||
minWidth = "250px",
|
|
||||||
maxWidth = "350px",
|
|
||||||
boundaryRef = null,
|
boundaryRef = null,
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -24,15 +26,20 @@ const HoverPopup = ({
|
|||||||
const triggerRef = useRef(null);
|
const triggerRef = useRef(null);
|
||||||
const popupRef = useRef(null);
|
const popupRef = useRef(null);
|
||||||
|
|
||||||
const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
|
const handleMouseEnter = () => {
|
||||||
const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
|
if (Mode === "hover") dispatch(openPopup(id));
|
||||||
|
};
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
if (Mode === "hover") dispatch(closePopup(id));
|
||||||
|
};
|
||||||
const handleClick = (e) => {
|
const handleClick = (e) => {
|
||||||
if (Mode !== "click") return;
|
if (Mode === "click") {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
dispatch(togglePopup(id));
|
dispatch(togglePopup(id));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Close popup when clicking outside (click mode)
|
// Close on outside click when using click mode
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (Mode !== "click" || !visible) return;
|
if (Mode !== "click" || !visible) return;
|
||||||
|
|
||||||
@ -49,73 +56,119 @@ const HoverPopup = ({
|
|||||||
|
|
||||||
document.addEventListener("click", handler);
|
document.addEventListener("click", handler);
|
||||||
return () => document.removeEventListener("click", handler);
|
return () => document.removeEventListener("click", handler);
|
||||||
}, [visible, Mode, id, dispatch]);
|
}, [Mode, visible, dispatch, id]);
|
||||||
|
|
||||||
// ---------- DYNAMIC POSITIONING LOGIC ----------
|
// Positioning effect: respects align prop and stays inside boundary (drawer)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!visible || !popupRef.current || !triggerRef.current) return;
|
if (!visible || !popupRef.current || !triggerRef.current) return;
|
||||||
|
|
||||||
|
// run in next frame so DOM/layout settles
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
const popup = popupRef.current;
|
const popup = popupRef.current;
|
||||||
const trigger = triggerRef.current;
|
|
||||||
|
|
||||||
|
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
|
||||||
const boundaryEl =
|
const boundaryEl =
|
||||||
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||||
|
if (!boundaryEl) return;
|
||||||
|
|
||||||
const boundaryRect = boundaryEl.getBoundingClientRect();
|
const boundaryRect = boundaryEl.getBoundingClientRect();
|
||||||
const triggerRect = trigger.getBoundingClientRect();
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||||
|
|
||||||
|
// reset styles first
|
||||||
|
popup.style.left = "";
|
||||||
|
popup.style.right = "";
|
||||||
|
popup.style.transform = "";
|
||||||
|
popup.style.top = "";
|
||||||
|
|
||||||
const popupRect = popup.getBoundingClientRect();
|
const popupRect = popup.getBoundingClientRect();
|
||||||
|
const parentRect = boundaryRect; // alias
|
||||||
|
|
||||||
let left;
|
// Convert trigger center to parent coordinates
|
||||||
|
const triggerCenterX =
|
||||||
|
triggerRect.left + triggerRect.width / 2 - parentRect.left;
|
||||||
|
|
||||||
// AUTO ALIGN (smart)
|
// preferred left so popup center aligns to trigger center:
|
||||||
if (align === "auto") {
|
const preferredLeft = triggerCenterX - popupRect.width / 2;
|
||||||
const center =
|
|
||||||
triggerRect.left +
|
|
||||||
triggerRect.width / 2 -
|
|
||||||
boundaryRect.left -
|
|
||||||
popupRect.width / 2;
|
|
||||||
|
|
||||||
left = Math.max(
|
// Helpers to set styles in parent's coordinate system:
|
||||||
|
const setLeft = (leftPx) => {
|
||||||
|
popup.style.left = `${leftPx}px`;
|
||||||
|
popup.style.right = "auto";
|
||||||
|
popup.style.transform = "none";
|
||||||
|
};
|
||||||
|
const setRight = (rightPx) => {
|
||||||
|
popup.style.left = "auto";
|
||||||
|
popup.style.right = `${rightPx}px`;
|
||||||
|
popup.style.transform = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
// If user forced align:
|
||||||
|
if (align === "left") {
|
||||||
|
// align popup's left to parent's left (0)
|
||||||
|
setLeft(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (align === "right") {
|
||||||
|
// align popup's right to parent's right (0)
|
||||||
|
setRight(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (align === "center") {
|
||||||
|
popup.style.left = "50%";
|
||||||
|
popup.style.right = "auto";
|
||||||
|
popup.style.transform = "translateX(-50%)";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// align === "auto": try preferred centered position, but flip fully if overflow
|
||||||
|
// clamp preferredLeft to boundaries so it doesn't render partially outside
|
||||||
|
const leftIfCentered = Math.max(
|
||||||
0,
|
0,
|
||||||
Math.min(center, boundaryRect.width - popupRect.width)
|
Math.min(preferredLeft, parentRect.width - popupRect.width)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// if centered fits, use it
|
||||||
|
if (leftIfCentered === preferredLeft) {
|
||||||
|
setLeft(leftIfCentered);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// LEFT ALIGN
|
// if centering would overflow right -> stick popup fully to left (left=0)
|
||||||
else if (align === "left") {
|
if (preferredLeft > parentRect.width - popupRect.width) {
|
||||||
left = triggerRect.left - boundaryRect.left;
|
// place popup so its right aligns to parent's right
|
||||||
if (left + popupRect.width > boundaryRect.width) {
|
// i.e., left = parent width - popup width
|
||||||
left = boundaryRect.width - popupRect.width; // clamp right
|
setLeft(parentRect.width - popupRect.width);
|
||||||
}
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// RIGHT ALIGN
|
// if centering would overflow left -> stick popup fully to left=0
|
||||||
else if (align === "right") {
|
if (preferredLeft < 0) {
|
||||||
left =
|
setLeft(0);
|
||||||
triggerRect.left +
|
return;
|
||||||
triggerRect.width -
|
|
||||||
boundaryRect.left -
|
|
||||||
popupRect.width;
|
|
||||||
|
|
||||||
if (left < 0) left = 0; // clamp left
|
|
||||||
}
|
}
|
||||||
|
|
||||||
popup.style.left = `${left}px`;
|
// fallback center
|
||||||
popup.style.top = `100%`;
|
setLeft(leftIfCentered);
|
||||||
});
|
});
|
||||||
}, [visible, align, boundaryRef]);
|
}, [visible, align, boundaryRef]);
|
||||||
|
|
||||||
// ------------------------------------------------
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
|
|
||||||
<div
|
<div
|
||||||
|
className="d-inline-block position-relative" // <-- ADD THIS !!
|
||||||
|
style={{
|
||||||
|
maxWidth: "calc(700px - 100px)",
|
||||||
|
width: "100%",
|
||||||
|
wordWrap: "break-word",
|
||||||
|
overflow: "visible", // also make sure popup isn't clipped
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="d-inline-block"
|
||||||
ref={triggerRef}
|
ref={triggerRef}
|
||||||
onMouseEnter={handleMouseEnter}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
style={{ cursor: "pointer", display: "inline-block" }}
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
@ -126,18 +179,19 @@ const HoverPopup = ({
|
|||||||
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
||||||
style={{
|
style={{
|
||||||
zIndex: 2000,
|
zIndex: 2000,
|
||||||
minWidth,
|
top: "100%",
|
||||||
maxWidth,
|
width: "max-content",
|
||||||
wordWrap: "break-word",
|
minWidth: "120px",
|
||||||
}}
|
}}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
||||||
{content}
|
<div>{content}</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HoverPopup;
|
export default HoverPopup;
|
||||||
|
|||||||
@ -4,7 +4,6 @@ const InputSuggestions = ({
|
|||||||
organizationList = [],
|
organizationList = [],
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
size = "sm",
|
|
||||||
error,
|
error,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
}) => {
|
}) => {
|
||||||
@ -28,7 +27,7 @@ const InputSuggestions = ({
|
|||||||
return (
|
return (
|
||||||
<div className="mb-3 position-relative">
|
<div className="mb-3 position-relative">
|
||||||
<input
|
<input
|
||||||
className={`form-control form-control-${size}`}
|
className="form-control form-control-sm"
|
||||||
value={value}
|
value={value}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||||||
@ -51,6 +50,7 @@ const InputSuggestions = ({
|
|||||||
{filteredList.map((org) => (
|
{filteredList.map((org) => (
|
||||||
<li
|
<li
|
||||||
key={org}
|
key={org}
|
||||||
|
className="ropdown-item"
|
||||||
style={{
|
style={{
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
padding: "5px 12px",
|
padding: "5px 12px",
|
||||||
@ -58,7 +58,8 @@ const InputSuggestions = ({
|
|||||||
transition: "background-color 0.2s",
|
transition: "background-color 0.2s",
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => handleSelectSuggestion(org)}
|
onMouseDown={() => handleSelectSuggestion(org)}
|
||||||
className={`dropdown-item ${org === value ? "active" : ""
|
className={`dropdown-item ${
|
||||||
|
org === value ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{org}
|
{org}
|
||||||
|
|||||||
@ -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-0">{label}</label>
|
<label className="form-label mb-1">{label}</label>
|
||||||
<Label className={name} required={required}></Label>
|
<Label className={name} required={required}></Label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,111 +0,0 @@
|
|||||||
import { useRef } from "react";
|
|
||||||
import Label from "./Label";
|
|
||||||
import Tooltip from "./Tooltip";
|
|
||||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const SingleFileUploader = ({
|
|
||||||
label = "Upload Document",
|
|
||||||
required = false,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
onRemove,
|
|
||||||
disabled,
|
|
||||||
error,
|
|
||||||
accept = ".pdf,.jpg,.jpeg,.png",
|
|
||||||
maxSizeMB = 25,
|
|
||||||
hint = "(PDF, JPG, PNG, max 5MB)",
|
|
||||||
}) => {
|
|
||||||
const inputRef = useRef(null);
|
|
||||||
|
|
||||||
const handleFileSelect = async (e) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
// Validate size
|
|
||||||
if (file.size > maxSizeMB * 1024 * 1024) {
|
|
||||||
alert(`File size cannot exceed ${maxSizeMB}MB`);
|
|
||||||
e.target.value = "";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert to base64
|
|
||||||
const base64Data = await new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
|
||||||
reader.onerror = (err) => reject(err);
|
|
||||||
});
|
|
||||||
|
|
||||||
const attachmentObj = {
|
|
||||||
fileName: file.name,
|
|
||||||
base64Data,
|
|
||||||
invoiceAttachmentTypeId: "", // set dynamically if needed
|
|
||||||
contentType: file.type,
|
|
||||||
fileSize: file.size,
|
|
||||||
description: "",
|
|
||||||
isActive: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
onChange(attachmentObj);
|
|
||||||
e.target.value = "";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="col-md-12">
|
|
||||||
<Label className="form-label" required={required}>
|
|
||||||
{label}
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => inputRef.current.click()}
|
|
||||||
>
|
|
||||||
<i className="bx bx-cloud-upload d-block bx-lg"></i>
|
|
||||||
<span className="text-muted d-block">
|
|
||||||
Click to select or click here to browse
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">{hint}</small>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={inputRef}
|
|
||||||
accept={accept}
|
|
||||||
style={{ display: "none" }}
|
|
||||||
onChange={handleFileSelect}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && <small className="danger-text">{error}</small>}
|
|
||||||
|
|
||||||
{value && (
|
|
||||||
<div className="mt-3">
|
|
||||||
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-2">
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<i
|
|
||||||
className={`bx ${getIconByFileType(value.contentType)} fs-3`}
|
|
||||||
></i>
|
|
||||||
|
|
||||||
<div className="d-flex flex-column text-truncate">
|
|
||||||
<span className="fw-semibold small text-truncate">
|
|
||||||
{value.fileName}
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">
|
|
||||||
{value.fileSize ? formatFileSize(value.fileSize) : ""}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<i
|
|
||||||
className="bx bx-trash text-danger fs-5 cursor-pointer"
|
|
||||||
onClick={onRemove}
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleFileUploader;
|
|
||||||
@ -241,7 +241,7 @@ const EditMaster = ({ master, onClose }) => {
|
|||||||
data-bs-trigger="focus"
|
data-bs-trigger="focus"
|
||||||
data-bs-placement="right"
|
data-bs-placement="right"
|
||||||
data-bs-html="true"
|
data-bs-html="true"
|
||||||
data-bs-content={`<div className="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
||||||
>
|
>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
|
|||||||
@ -109,7 +109,7 @@ const ServiceGroups = ({ service }) => {
|
|||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<p className="m-0 ">{group.name}</p>
|
<p className="m-0 fw-bold ">{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">
|
||||||
|
|||||||
@ -1,68 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useDeliverChallane } from "../../hooks/usePurchase";
|
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import { FileView } from "../Expenses/Filelist";
|
|
||||||
|
|
||||||
const DeliverChallanList = ({ purchaseId, viewDocuments }) => {
|
|
||||||
const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="d-flex justify-content-center align-items-center text-center vh-50">
|
|
||||||
<SpinnerLoader />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return (
|
|
||||||
<div className="py-3">
|
|
||||||
<Error error={error} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!isLoading && data.length === 0)
|
|
||||||
return (
|
|
||||||
<div className="d-flex justify-content-center align-items-center text-center vh-50">
|
|
||||||
<p className="mb-0">Not Yet</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="list-group list-group-flush text-start">
|
|
||||||
{data.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
className="list-group-item d-flex justify-content-between align-items-start flex-wrap px-3 w-full"
|
|
||||||
>
|
|
||||||
{/* LEFT SIDE */}
|
|
||||||
<div className=" pe-3 text-break w-full">
|
|
||||||
<div className="d-flex justify-content-between">
|
|
||||||
<p className="mb-1 fw-semibold">{item.deliveryChallanNumber}</p>
|
|
||||||
<small className="text-muted text-end">
|
|
||||||
{formatUTCToLocalTime(item.deliveryChallanDate, true)}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-1 small text-muted text-break">
|
|
||||||
<span className="fw-semibold me-1">Invoice:</span>
|
|
||||||
{item.purchaseInvoice?.title} (
|
|
||||||
{item.purchaseInvoice?.purchaseInvoiceUId})
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="mb-1 text-break">
|
|
||||||
<span className="fw-semibold">Description:</span>{" "}
|
|
||||||
{item.description || "-"}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{item.attachment?.preSignedUrl && (
|
|
||||||
<FileView file={item.attachment} viewFile={viewDocuments} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DeliverChallanList;
|
|
||||||
@ -1,204 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
useAddDeliverChallan,
|
|
||||||
useDeliverChallane,
|
|
||||||
} from "../../hooks/usePurchase";
|
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import DeliverChallanList from "./DeliverChallanList";
|
|
||||||
import { AppFormController, useAppForm } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import {
|
|
||||||
DeliveryChallanDefaultValue,
|
|
||||||
DeliveryChallanSchema,
|
|
||||||
} from "./PurchaseSchema";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
import Filelist from "../Expenses/Filelist";
|
|
||||||
import SingleFileUploader from "../common/SigleFileUploader";
|
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
|
||||||
import WarningBlock from "../InfoBlock/WarningBlock";
|
|
||||||
import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
|
|
||||||
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
|
|
||||||
|
|
||||||
const DeliveryChallane = ({ purchaseId }) => {
|
|
||||||
const [file, setFile] = useState(null);
|
|
||||||
const {setDocumentView} = usePurchaseContext()
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
control,
|
|
||||||
handleSubmit,
|
|
||||||
setValue,
|
|
||||||
trigger,
|
|
||||||
watch,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = useAppForm({
|
|
||||||
resolver: zodResolver(DeliveryChallanSchema),
|
|
||||||
defaultValues: DeliveryChallanDefaultValue,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data, isLoading } = useInvoiceAttachmentTypes();
|
|
||||||
const { mutate: AddChallan, isPending } = useAddDeliverChallan(() => {
|
|
||||||
setFile(null);
|
|
||||||
setValue("attachment", null, { shouldValidate: false });
|
|
||||||
reset({
|
|
||||||
...DeliveryChallanDefaultValue,
|
|
||||||
attachment: null,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
const onSubmit = async (formData) => {
|
|
||||||
const valid = await trigger();
|
|
||||||
if (!valid) return;
|
|
||||||
const { invoiceAttachmentTypeId, ...rest } = formData;
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
...rest,
|
|
||||||
attachment: formData.attachment
|
|
||||||
? {
|
|
||||||
...formData.attachment,
|
|
||||||
invoiceAttachmentTypeId,
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
purchaseInvoiceId: purchaseId,
|
|
||||||
deliveryChallanDate: formData.deliveryChallanDate
|
|
||||||
? localToUtc(formData.deliveryChallanDate)
|
|
||||||
: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
AddChallan(payload);
|
|
||||||
};
|
|
||||||
const isUploaded = watch("attachment");
|
|
||||||
const isDocumentType = watch("invoiceAttachmentTypeId");
|
|
||||||
return (
|
|
||||||
<div className="row px-3 px-sm-1">
|
|
||||||
<div className="fw-semibold mb-3 fs-5">Delivery Challans</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
|
||||||
className="row g-3 text-start"
|
|
||||||
noValidate
|
|
||||||
>
|
|
||||||
{/* Challan Number */}
|
|
||||||
<div className="col-md-6">
|
|
||||||
<Label required>Delivery Challan No</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control"
|
|
||||||
{...register("deliveryChallanNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.deliveryChallanNumber && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.deliveryChallanNumber.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<Label required>Delivery Date</Label>
|
|
||||||
|
|
||||||
<DatePicker
|
|
||||||
name="deliveryChallanDate"
|
|
||||||
control={control}
|
|
||||||
className="w-100"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.deliveryChallanDate && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.deliveryChallanDate.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<Label required>Description</Label>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
rows="3"
|
|
||||||
{...register("description")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.description && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.description.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12">
|
|
||||||
<AppFormController
|
|
||||||
name="invoiceAttachmentTypeId"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<SelectField
|
|
||||||
label="Select Document Type"
|
|
||||||
options={data ?? []}
|
|
||||||
placeholder="Choose Type"
|
|
||||||
labelKeyKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={isLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.invoiceAttachmentTypeId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.invoiceAttachmentTypeId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<SingleFileUploader
|
|
||||||
label="Upload Bill"
|
|
||||||
required
|
|
||||||
value={file}
|
|
||||||
onChange={(selectedFile) => {
|
|
||||||
setFile(selectedFile);
|
|
||||||
setValue("attachment", selectedFile, { shouldValidate: true });
|
|
||||||
}}
|
|
||||||
disabled={!isDocumentType}
|
|
||||||
onRemove={() => {
|
|
||||||
setFile(null);
|
|
||||||
setValue("attachment", null, { shouldValidate: true });
|
|
||||||
}}
|
|
||||||
error={errors?.attachment?.message}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="col-12 text-end my-3">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary px-4"
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
{isPending ? "Please Wait..." : "Submit"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{!isUploaded && <WarningBlock content={FILE_UPLOAD_INFO} />}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6 text-start">
|
|
||||||
<div className="d-flex justiffy-content-start align-items-center gap-1 ms-2">
|
|
||||||
<i className="bx bx-history bx-xs"></i>{" "}
|
|
||||||
<p className="fw-medium mb-0">History</p>
|
|
||||||
</div>
|
|
||||||
<div className="overflow-auto " style={{ maxHeight: "420px" }}>
|
|
||||||
<DeliverChallanList purchaseId={purchaseId} viewDocuments={setDocumentView} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DeliveryChallane;
|
|
||||||
@ -1,238 +0,0 @@
|
|||||||
import React, { useEffect, useMemo, useCallback, useState } from "react";
|
|
||||||
import { AppFormProvider, useAppForm } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
|
|
||||||
import {
|
|
||||||
defaultPurchaseValue,
|
|
||||||
PurchaseSchema,
|
|
||||||
getStepFields,
|
|
||||||
} from "./PurchaseSchema";
|
|
||||||
|
|
||||||
import PurchasePartyDetails from "./PurchasePartyDetails";
|
|
||||||
import PurchaseTransportDetails from "./PurchaseTransportDetails";
|
|
||||||
import PurchasePaymentDetails from "./PurchasePaymentDetails";
|
|
||||||
|
|
||||||
import {
|
|
||||||
useCreatePurchaseInvoice,
|
|
||||||
usePurchase,
|
|
||||||
useUpdatePurchaseInvoice,
|
|
||||||
} from "../../hooks/usePurchase";
|
|
||||||
import { error } from "pdf-lib";
|
|
||||||
|
|
||||||
const ManagePurchase = ({ onClose, purchaseId }) => {
|
|
||||||
const { data } = usePurchase(purchaseId);
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState(0);
|
|
||||||
const [completedTabs, setCompletedTabs] = useState([]);
|
|
||||||
|
|
||||||
const stepsConfig = useMemo(
|
|
||||||
() => [
|
|
||||||
{
|
|
||||||
name: "Vendor & Project Details",
|
|
||||||
icon: "bx bx-user bx-md",
|
|
||||||
subtitle: "Vendor information and project association",
|
|
||||||
component: <PurchasePartyDetails purchase={data} />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Invoice & Logistics",
|
|
||||||
icon: "bx bx-receipt bx-md",
|
|
||||||
subtitle: "Invoice, e-Way bill, and logistics information",
|
|
||||||
component: <PurchaseTransportDetails />,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Invoice & Tax Amount",
|
|
||||||
icon: "bx bx-credit-card bx-md",
|
|
||||||
subtitle: "Payment terms, tax breakdown, and due dates",
|
|
||||||
component: <PurchasePaymentDetails purchaseId={purchaseId} />,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[data, purchaseId]
|
|
||||||
);
|
|
||||||
|
|
||||||
const purchaseOrder = useAppForm({
|
|
||||||
resolver: zodResolver(PurchaseSchema),
|
|
||||||
defaultValues: defaultPurchaseValue,
|
|
||||||
mode: "onChange",
|
|
||||||
shouldUnregister: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { reset, formState } = purchaseOrder;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!purchaseId || !data) return;
|
|
||||||
|
|
||||||
reset({
|
|
||||||
...data,
|
|
||||||
projectId: data?.project?.id,
|
|
||||||
organizationId: data?.organization?.id,
|
|
||||||
supplierId: data?.supplier?.id,
|
|
||||||
invoiceAttachmentTypeId: null,
|
|
||||||
attachments:
|
|
||||||
data?.attachments?.map((doc) => ({
|
|
||||||
fileName: doc.fileName,
|
|
||||||
base64Data: null,
|
|
||||||
contentType: doc.contentType,
|
|
||||||
documentId: doc.documentId ?? null,
|
|
||||||
invoiceAttachmentTypeId: doc.invoiceAttachmentType?.id ?? null,
|
|
||||||
fileSize: 0,
|
|
||||||
description: "",
|
|
||||||
preSignedUrl: doc.preSignedUrl,
|
|
||||||
isActive: doc.isActive ?? true,
|
|
||||||
})) || [],
|
|
||||||
});
|
|
||||||
|
|
||||||
setCompletedTabs([0, 1, 2]);
|
|
||||||
}, [purchaseId, data, reset]);
|
|
||||||
|
|
||||||
const handleNext = useCallback(async () => {
|
|
||||||
const fields = getStepFields(activeTab);
|
|
||||||
const valid = await purchaseOrder.trigger(fields);
|
|
||||||
|
|
||||||
if (!valid) return;
|
|
||||||
|
|
||||||
setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
|
|
||||||
setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
|
|
||||||
}, [activeTab, purchaseOrder, stepsConfig.length]);
|
|
||||||
|
|
||||||
const handlePrev = useCallback(() => {
|
|
||||||
setActiveTab((prev) => Math.max(prev - 1, 0));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const generatePatchOps = useCallback(
|
|
||||||
(formData) => {
|
|
||||||
const { dirtyFields } = formState;
|
|
||||||
|
|
||||||
return Object.keys(dirtyFields)
|
|
||||||
.filter((key) => key !== "invoiceAttachmentTypeId")
|
|
||||||
.map((key) => ({
|
|
||||||
operationType: 0,
|
|
||||||
path: `/${key}`,
|
|
||||||
op: "replace",
|
|
||||||
value: formData[key],
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
[formState]
|
|
||||||
);
|
|
||||||
|
|
||||||
const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
|
|
||||||
reset();
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
|
|
||||||
const { mutate: updatePurchase, isPending: isUpdating } =
|
|
||||||
useUpdatePurchaseInvoice(() => {
|
|
||||||
reset();
|
|
||||||
onClose();
|
|
||||||
});
|
|
||||||
|
|
||||||
const onSubmit = useCallback(
|
|
||||||
(formData) => {
|
|
||||||
if (purchaseId) {
|
|
||||||
const payload = generatePatchOps(formData);
|
|
||||||
updatePurchase({ purchaseId, payload });
|
|
||||||
} else {
|
|
||||||
CreateInvoice(formData);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
|
|
||||||
);
|
|
||||||
return (
|
|
||||||
<div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
|
|
||||||
{/* --- Steps Header --- */}
|
|
||||||
<div className="bs-stepper-header text-start px-0 py-1">
|
|
||||||
{stepsConfig.map((step, index) => {
|
|
||||||
const isActive = activeTab === index;
|
|
||||||
const isCompleted = completedTabs.includes(index);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment key={step.name}>
|
|
||||||
<div
|
|
||||||
className={`step text-truncate ${isActive ? "active" : ""} ${
|
|
||||||
isCompleted ? "crossed" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`step-trigger`}
|
|
||||||
onClick={() => purchaseId && setActiveTab(index)}
|
|
||||||
>
|
|
||||||
<span className="bs-stepper-circle">
|
|
||||||
{isCompleted ? (
|
|
||||||
<i className="bx bx-check"></i>
|
|
||||||
) : (
|
|
||||||
<i className={step.icon}></i>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="bs-stepper-label">
|
|
||||||
<span className="bs-stepper-title">{step.name}</span>
|
|
||||||
<span className="bs-stepper-subtitle">{step.subtitle}</span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{index < stepsConfig.length - 1 && (
|
|
||||||
<div className="line text-primary"></div>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* --- Form Content --- */}
|
|
||||||
<div className="bs-stepper-content py-2 px-3">
|
|
||||||
<AppFormProvider {...purchaseOrder}>
|
|
||||||
{activeTab !== 2 && (
|
|
||||||
<div>
|
|
||||||
{stepsConfig[activeTab].component}
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between mt-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-outline-secondary"
|
|
||||||
onClick={handlePrev}
|
|
||||||
disabled={activeTab === 0}
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
onClick={handleNext}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activeTab === 2 && (
|
|
||||||
<form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
|
|
||||||
{stepsConfig[2].component}
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between mt-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-sm btn-outline-secondary"
|
|
||||||
onClick={handlePrev}
|
|
||||||
>
|
|
||||||
Previous
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
disabled={isPending || isUpdating}
|
|
||||||
>
|
|
||||||
{isPending || isUpdating ? "Please Wait" : "Submit"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</AppFormProvider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ManagePurchase;
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
export const getPurchaseActions = ({
|
|
||||||
item,
|
|
||||||
isActive,
|
|
||||||
canDelete,
|
|
||||||
canAddChallan,
|
|
||||||
setViewPurchase,
|
|
||||||
setManagePurchase,
|
|
||||||
setDeletingId,
|
|
||||||
setIsDeleteModalOpen,
|
|
||||||
setChallan,
|
|
||||||
setAddPayment,
|
|
||||||
}) => {
|
|
||||||
const actions = [];
|
|
||||||
|
|
||||||
// VIEW
|
|
||||||
actions.push({
|
|
||||||
key: "view",
|
|
||||||
label: "View",
|
|
||||||
icon: "bx bx-show",
|
|
||||||
show: true,
|
|
||||||
onClick: () =>
|
|
||||||
setViewPurchase({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: item.id,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!isActive) {
|
|
||||||
// EDIT
|
|
||||||
actions.push({
|
|
||||||
key: "edit",
|
|
||||||
label: "Edit",
|
|
||||||
icon: "bx bx-edit",
|
|
||||||
show: true,
|
|
||||||
onClick: () =>
|
|
||||||
setManagePurchase({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: item.id,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
// DELETE
|
|
||||||
actions.push({
|
|
||||||
key: "delete",
|
|
||||||
label: "Delete",
|
|
||||||
icon: "bx bx-trash",
|
|
||||||
show: canDelete,
|
|
||||||
onClick: () => {
|
|
||||||
setDeletingId(item.id);
|
|
||||||
setIsDeleteModalOpen(true);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// ADD CHALLAN
|
|
||||||
actions.push({
|
|
||||||
key: "challan",
|
|
||||||
label: "Add Delivery Challan",
|
|
||||||
icon: "bx bx-file bx-plus",
|
|
||||||
show: canAddChallan,
|
|
||||||
onClick: () =>
|
|
||||||
setChallan({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: item.id,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
// ADD PAYMENT
|
|
||||||
actions.push({
|
|
||||||
key: "payment",
|
|
||||||
label: "Add Payment",
|
|
||||||
icon: "bx bx-wallet",
|
|
||||||
show: true,
|
|
||||||
onClick: () =>
|
|
||||||
setAddPayment({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: item.id,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// RESTORE
|
|
||||||
actions.push({
|
|
||||||
key: "restore",
|
|
||||||
label: "Restore",
|
|
||||||
icon: "bx bx-undo",
|
|
||||||
show: true,
|
|
||||||
onClick: () => {
|
|
||||||
setDeletingId(item.id);
|
|
||||||
setIsDeleteModalOpen(true);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return actions.filter((a) => a.show);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const DropdownItem = ({ icon, label, onClick }) => (
|
|
||||||
<li>
|
|
||||||
<a className="dropdown-item cursor-pointer" onClick={onClick}>
|
|
||||||
<i className={`${icon} me-2`}></i> {label}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
@ -1,197 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
useDeletePurchaseInvoice,
|
|
||||||
usePurchasesList,
|
|
||||||
} from "../../hooks/usePurchase";
|
|
||||||
import {
|
|
||||||
ADD_DELIVERY_CHALLAN,
|
|
||||||
DELETEPURCHASE_INVOICE,
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import Pagination from "../common/Pagination";
|
|
||||||
import { PurchaseColumn } from "./Purchasetable";
|
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { useDebounce } from "../../utils/appUtils";
|
|
||||||
import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
|
|
||||||
import ConfirmModal from "../common/ConfirmModal";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { DropdownItem, getPurchaseActions } from "./PurchaseActions";
|
|
||||||
|
|
||||||
const PurchaseList = ({ searchString, isActive }) => {
|
|
||||||
const { setViewPurchase, setManagePurchase, setChallan, setAddPayment } =
|
|
||||||
usePurchaseContext();
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const { mutate: DeletePurchaseInvoice, isPending } =
|
|
||||||
useDeletePurchaseInvoice();
|
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
|
||||||
|
|
||||||
const canAddChallan = useHasUserPermission(ADD_DELIVERY_CHALLAN);
|
|
||||||
const canDelete = useHasUserPermission(DELETEPURCHASE_INVOICE);
|
|
||||||
|
|
||||||
const debounceSearch = useDebounce(searchString, 300);
|
|
||||||
const { data, isLoading } = usePurchasesList(
|
|
||||||
ITEMS_PER_PAGE,
|
|
||||||
currentPage,
|
|
||||||
// true,
|
|
||||||
!isActive,
|
|
||||||
{},
|
|
||||||
debounceSearch
|
|
||||||
);
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
|
||||||
setCurrentPage(page);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
|
|
||||||
|
|
||||||
const handleDeleteRestore = (id) => {
|
|
||||||
DeletePurchaseInvoice(
|
|
||||||
{ id, isActive: isActive }, // delete if active, restore if deleted
|
|
||||||
{
|
|
||||||
onSettled: () => {
|
|
||||||
setDeletingId(null);
|
|
||||||
setIsDeleteModalOpen(false);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{IsDeleteModalOpen && (
|
|
||||||
<ConfirmModal
|
|
||||||
isOpen={IsDeleteModalOpen}
|
|
||||||
type={!isActive ? "delete" : "undo"}
|
|
||||||
header={!isActive ? "Delete Invoice" : "Restore Invoice"}
|
|
||||||
message={
|
|
||||||
!isActive
|
|
||||||
? "Are you sure you want to delete?"
|
|
||||||
: "Are you sure you want to restore?"
|
|
||||||
}
|
|
||||||
onSubmit={handleDeleteRestore}
|
|
||||||
onClose={() => setIsDeleteModalOpen(false)}
|
|
||||||
loading={isPending}
|
|
||||||
paramData={deletingId}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div className="card mt-2 page-min-h table-responsive px-sm-4">
|
|
||||||
<div className="px-2">
|
|
||||||
<table className="datatables-users table border-top text-nowrap">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{visibleColumns.map((col) => (
|
|
||||||
<th key={col.key} colSpan={col.colSpan || 1}>
|
|
||||||
<div className={col.className || ""}>{col.label}</div>
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{/* LOADING */}
|
|
||||||
{isLoading && (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={visibleColumns.length + 1}
|
|
||||||
className="border-0"
|
|
||||||
style={{ height: "300px", verticalAlign: "middle" }}
|
|
||||||
>
|
|
||||||
<div className="d-flex justify-content-center align-items-center w-100 h-100">
|
|
||||||
<SpinnerLoader />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isLoading && data?.data?.length === 0 && (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={visibleColumns.length + 1}
|
|
||||||
className="text-center border-0"
|
|
||||||
style={{ height: "400px", verticalAlign: "middle" }}
|
|
||||||
>
|
|
||||||
No Data Found
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isLoading &&
|
|
||||||
data?.data?.map((item, index) => (
|
|
||||||
<tr key={item?.id || index}>
|
|
||||||
{visibleColumns.map((col) => (
|
|
||||||
<td
|
|
||||||
key={col.key}
|
|
||||||
className={`${col.className} cursor-pointer` || ""}
|
|
||||||
onClick={() =>
|
|
||||||
setViewPurchase({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: item.id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{col.render ? col.render(item) : item[col.key] || "NA"}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
<td>
|
|
||||||
<div className="dropdown z-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
|
||||||
data-bs-toggle="tooltip"
|
|
||||||
data-bs-offset="0,8"
|
|
||||||
data-bs-placement="top"
|
|
||||||
data-bs-custom-class="tooltip-dark"
|
|
||||||
title="More Action"
|
|
||||||
></i>
|
|
||||||
</button>
|
|
||||||
<ul className="dropdown-menu dropdown-menu-end">
|
|
||||||
{getPurchaseActions({
|
|
||||||
item,
|
|
||||||
isActive,
|
|
||||||
canDelete,
|
|
||||||
canAddChallan,
|
|
||||||
setViewPurchase,
|
|
||||||
setManagePurchase,
|
|
||||||
setDeletingId,
|
|
||||||
setIsDeleteModalOpen,
|
|
||||||
setChallan,
|
|
||||||
setAddPayment,
|
|
||||||
}).map((action) => (
|
|
||||||
<DropdownItem
|
|
||||||
key={action.key}
|
|
||||||
icon={action.icon}
|
|
||||||
label={action.label}
|
|
||||||
onClick={action.onClick}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{data?.data?.length > 0 && (
|
|
||||||
<Pagination
|
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={data.totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchaseList;
|
|
||||||
@ -1,231 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
AppFormController,
|
|
||||||
useAppFormContext,
|
|
||||||
} from "../../hooks/appHooks/useAppForm";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import {
|
|
||||||
SelectFieldSearch,
|
|
||||||
SelectProjectField,
|
|
||||||
} from "../common/Forms/SelectFieldServerSide";
|
|
||||||
import {
|
|
||||||
useGlobaleOrganizations,
|
|
||||||
useOrganization,
|
|
||||||
useOrganizationsList,
|
|
||||||
} from "../../hooks/useOrganization";
|
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|
||||||
|
|
||||||
const PurchasePartyDetails = () => {
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
control,
|
|
||||||
setValue,
|
|
||||||
watch,
|
|
||||||
formState: { errors },
|
|
||||||
} = useAppFormContext();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="row g-3 text-start">
|
|
||||||
{/* Title */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="title" required>
|
|
||||||
Title
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="title"
|
|
||||||
type="text"
|
|
||||||
className={`form-control form-control-xs `}
|
|
||||||
{...register("title")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.title && (
|
|
||||||
<div className="danger-text">{errors.title.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project ID */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<SelectProjectField
|
|
||||||
className={`form-control form-control-xs ${
|
|
||||||
errors?.projectId ? "is-invalid" : ""
|
|
||||||
}`}
|
|
||||||
label="Project"
|
|
||||||
required
|
|
||||||
placeholder="Select Project"
|
|
||||||
value={watch("projectId")}
|
|
||||||
onChange={(val) =>
|
|
||||||
setValue("projectId", val, {
|
|
||||||
shouldDirty: true,
|
|
||||||
shouldValidate: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
errors={errors}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 my-0">
|
|
||||||
<AppFormController
|
|
||||||
name="organizationId"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<SelectFieldSearch
|
|
||||||
label="Organization"
|
|
||||||
placeholder="Select Organization"
|
|
||||||
required
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
valueKey="id"
|
|
||||||
labelKey="name"
|
|
||||||
useFetchHook={useGlobaleOrganizations}
|
|
||||||
hookParams={[ITEMS_PER_PAGE, 1]}
|
|
||||||
errors={errors?.organizationId}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 my-0">
|
|
||||||
<AppFormController
|
|
||||||
name="supplierId"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<SelectFieldSearch
|
|
||||||
label="Supplier"
|
|
||||||
placeholder="Select Organization"
|
|
||||||
required
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
valueKey="id"
|
|
||||||
labelKey="name"
|
|
||||||
useFetchHook={useGlobaleOrganizations}
|
|
||||||
hookParams={[ITEMS_PER_PAGE, 1]}
|
|
||||||
errors={errors.supplierId}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 my-0">
|
|
||||||
<Label required htmlFor="billingAddress">Billing Address</Label>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
id="billingAddress"
|
|
||||||
rows="2"
|
|
||||||
className={`form-control form-control-xs `}
|
|
||||||
{...register("billingAddress")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.billingAddress && (
|
|
||||||
<div className="danger-text">{errors.billingAddress.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 my-0 mb-1">
|
|
||||||
<Label required htmlFor="shippingAddress">Shipping Address</Label>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
id="shippingAddress"
|
|
||||||
rows="2"
|
|
||||||
className={`form-control form-control-xs `}
|
|
||||||
{...register("shippingAddress")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.shippingAddress && (
|
|
||||||
<div className="danger-text">{errors.shippingAddress.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Purchase Order Number */}
|
|
||||||
<div className="col-12 col-md-6 ">
|
|
||||||
<Label htmlFor="purchaseOrderNumber" >
|
|
||||||
Purchase Order Number
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="purchaseOrderNumber"
|
|
||||||
type="text"
|
|
||||||
className={`form-control form-control-xs `}
|
|
||||||
{...register("purchaseOrderNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.purchaseOrderNumber && (
|
|
||||||
<div className="danger-text">
|
|
||||||
{errors.purchaseOrderNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Purchase Order Date */}
|
|
||||||
<div className="col-12 col-md-6 mb-1">
|
|
||||||
<Label htmlFor="purchaseOrderDate" >
|
|
||||||
Purchase Order Date
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<DatePicker
|
|
||||||
control={control}
|
|
||||||
name="purchaseOrderDate"
|
|
||||||
size="xs"
|
|
||||||
className={` w-full ${
|
|
||||||
errors?.purchaseOrderDate ? "is-invalid" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.purchaseOrderDate && (
|
|
||||||
<div className="danger-text">{errors.purchaseOrderDate.message}</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Proforma Invoice */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="proformaInvoiceNumber">Proforma Invoice Number</Label>
|
|
||||||
<input
|
|
||||||
id="proformaInvoiceNumber"
|
|
||||||
type="text"
|
|
||||||
className={`form-control `}
|
|
||||||
{...register("proformaInvoiceNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.proformaInvoiceNumber && (
|
|
||||||
<div className="danger-text">
|
|
||||||
{errors.proformaInvoiceNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-6 mb-1">
|
|
||||||
<Label htmlFor="proformaInvoiceAmountt">Proforma Amount</Label>
|
|
||||||
<input
|
|
||||||
id="proformaInvoiceAmount"
|
|
||||||
type="text"
|
|
||||||
className={`form-control `}
|
|
||||||
{...register("proformaInvoiceAmount")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.proformaInvoiceAmountt && (
|
|
||||||
<div className="danger-text">
|
|
||||||
{errors.proformaInvoiceAmount.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<Label htmlFor="proformaInvoiceDate">Proforma Date</Label>
|
|
||||||
|
|
||||||
<DatePicker
|
|
||||||
control={control}
|
|
||||||
name="proformaInvoiceDate"
|
|
||||||
className="w-full"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.proformaInvoiceDate && (
|
|
||||||
<div className="danger-text">
|
|
||||||
{errors.proformaInvoiceDate.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchasePartyDetails;
|
|
||||||
@ -1,289 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {
|
|
||||||
AppFormController,
|
|
||||||
AppFormProvider,
|
|
||||||
useAppForm,
|
|
||||||
} from "../../hooks/appHooks/useAppForm";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { AddPurchasePayment, defaultPurchasePayment } from "./PurchaseSchema";
|
|
||||||
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
|
||||||
import { formatFigure, localToUtc } from "../../utils/appUtils";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import {
|
|
||||||
useAddPurchasePayment,
|
|
||||||
usePurchase,
|
|
||||||
usePurchasePaymentHistory,
|
|
||||||
} from "../../hooks/usePurchase";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
|
|
||||||
const PurchasePayment = ({ onClose, purchaseId }) => {
|
|
||||||
const {
|
|
||||||
data: Purchase,
|
|
||||||
isLoading: isPurchaseLoading,
|
|
||||||
error: purchaseError,
|
|
||||||
} = usePurchase(purchaseId);
|
|
||||||
const methods = useAppForm({
|
|
||||||
resolver: zodResolver(AddPurchasePayment),
|
|
||||||
defaultValues: defaultPurchasePayment,
|
|
||||||
});
|
|
||||||
const {
|
|
||||||
control,
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const {
|
|
||||||
data: paymentTypes,
|
|
||||||
isLoading: isPaymentTypeLoading,
|
|
||||||
isError: isPaymentTypeError,
|
|
||||||
error: paymentError,
|
|
||||||
} = usePaymentAjustmentHead(true);
|
|
||||||
|
|
||||||
const { mutate: AddPayment, isPending } = useAddPurchasePayment(() => {
|
|
||||||
handleClose();
|
|
||||||
});
|
|
||||||
const { data, isLoading, isError, error } =
|
|
||||||
usePurchasePaymentHistory(purchaseId);
|
|
||||||
const onSubmit = (formData) => {
|
|
||||||
const payload = {
|
|
||||||
...formData,
|
|
||||||
paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
|
|
||||||
invoiceId: purchaseId,
|
|
||||||
};
|
|
||||||
AddPayment(payload);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = (formData) => {
|
|
||||||
reset(defaultPurchasePayment);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<div className="contianer p-1">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="fs-5 text-semibod">Supplier / Vendor Transaction </p>
|
|
||||||
</div>
|
|
||||||
<div className="row g-3">
|
|
||||||
<div className="col-12 col-sm-6 px-2 p-sm-0">
|
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
|
|
||||||
<div className="row px-md-1 px-0">
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<Label required>TransanctionId</Label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-md"
|
|
||||||
{...register("transactionId")}
|
|
||||||
/>
|
|
||||||
{errors.transactionId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.transactionId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<Label required>Transaction Date </Label>
|
|
||||||
<DatePicker
|
|
||||||
className="w-100"
|
|
||||||
size="md"
|
|
||||||
name="paymentReceivedDate"
|
|
||||||
control={control}
|
|
||||||
/>
|
|
||||||
{errors.paymentReceivedDate && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.paymentReceivedDate.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<AppFormController
|
|
||||||
name="paymentAdjustmentHeadId"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<SelectField
|
|
||||||
label="Payment Adjustment Head"
|
|
||||||
options={paymentTypes?.data ?? []}
|
|
||||||
placeholder="Choose a Status"
|
|
||||||
required
|
|
||||||
labelKeyKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={isPaymentTypeLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.paymentAdjustmentHeadId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.paymentAdjustmentHeadId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<Label htmlFor="amount" className="form-label" required>
|
|
||||||
Amount
|
|
||||||
</Label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
id="amount"
|
|
||||||
className="form-control form-control-md"
|
|
||||||
min="1"
|
|
||||||
step="0.01"
|
|
||||||
inputMode="decimal"
|
|
||||||
{...register("amount", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
{errors.amount && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.amount.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-2">
|
|
||||||
<Label htmlFor="comment" className="form-label" required>
|
|
||||||
Comment
|
|
||||||
</Label>
|
|
||||||
<textarea
|
|
||||||
id="comment"
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
{...register("comment")}
|
|
||||||
/>
|
|
||||||
{errors.comment && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.comment.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-end gap-3">
|
|
||||||
{" "}
|
|
||||||
<button
|
|
||||||
type="reset"
|
|
||||||
className="btn btn-label-secondary btn-sm mt-3"
|
|
||||||
onClick={() => {
|
|
||||||
handleClose();
|
|
||||||
onClose();
|
|
||||||
}}
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="btn btn-primary btn-sm mt-3"
|
|
||||||
disabled={isPending}
|
|
||||||
>
|
|
||||||
{isPending ? "Please Wait..." : "Submit"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</AppFormProvider>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-sm-6 px-2 p-sm-0">
|
|
||||||
<div className="d-flex flex-row gap-2 text-start">
|
|
||||||
<i className="bx bx-history"></i> <p>Purchase Payment Log</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<SpinnerLoader />
|
|
||||||
) : (
|
|
||||||
data?.length > 0 && (
|
|
||||||
<div
|
|
||||||
className="row text-start mx-2"
|
|
||||||
style={{ maxHeight: "70vh", overflowY: "auto" }}
|
|
||||||
>
|
|
||||||
{data
|
|
||||||
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
|
|
||||||
.map((payment, index) => (
|
|
||||||
<div className="col-12 mb-2" key={payment.id}>
|
|
||||||
<div className=" p-2 border-start border-warning">
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
|
|
||||||
<div>
|
|
||||||
<small className="fw-semibold me-1">
|
|
||||||
Transaction Date:
|
|
||||||
</small>{" "}
|
|
||||||
{formatUTCToLocalTime(
|
|
||||||
payment.paymentReceivedDate
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span className="fs-semibold d-block d-md-none">
|
|
||||||
{formatFigure(payment.amount, {
|
|
||||||
type: "currency",
|
|
||||||
currency: "INR",
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
|
|
||||||
<small className="fw-semibold me-2">
|
|
||||||
Updated By:
|
|
||||||
</small>{" "}
|
|
||||||
<Avatar
|
|
||||||
size="xs"
|
|
||||||
firstName={payment?.createdBy?.firstName}
|
|
||||||
lastName={payment?.createdBy?.lastName}
|
|
||||||
/>{" "}
|
|
||||||
{payment?.createdBy?.firstName}{" "}
|
|
||||||
{payment.createdBy?.lastName}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<p className="mb-1">
|
|
||||||
<small className="fw-semibold">
|
|
||||||
Transaction ID:
|
|
||||||
</small>{" "}
|
|
||||||
{payment.transactionId}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 ">
|
|
||||||
<div className="d-flex justify-content-between">
|
|
||||||
<span>
|
|
||||||
{payment?.paymentAdjustmentHead?.name}
|
|
||||||
</span>
|
|
||||||
<span className="fs-semibold d-none d-md-block">
|
|
||||||
{formatFigure(payment.amount, {
|
|
||||||
type: "currency",
|
|
||||||
currency: "INR",
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-tiny m-0 mt-1">
|
|
||||||
{payment?.comment}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
{data?.length === 0 && (
|
|
||||||
<div className="d-flex justify-content-center algin-items-center text-center">
|
|
||||||
<div>
|
|
||||||
<i className="bx bx-box"></i>
|
|
||||||
<p className="text-secondary">
|
|
||||||
You don't have any payment yet.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchasePayment;
|
|
||||||
@ -1,299 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
import {
|
|
||||||
AppFormController,
|
|
||||||
useAppFormContext,
|
|
||||||
} from "../../hooks/appHooks/useAppForm";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
|
|
||||||
import Filelist from "../Expenses/Filelist";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
import { useWatch } from "react-hook-form";
|
|
||||||
import WarningBlock from "../InfoBlock/WarningBlock";
|
|
||||||
import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
|
|
||||||
|
|
||||||
const PurchasePaymentDetails = ({ purchaseId = null }) => {
|
|
||||||
const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
|
|
||||||
const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
|
|
||||||
useInvoiceAttachmentTypes();
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
watch,
|
|
||||||
setValue,
|
|
||||||
control,
|
|
||||||
formState: { errors },
|
|
||||||
} = useAppFormContext();
|
|
||||||
|
|
||||||
const baseAmount = watch("baseAmount");
|
|
||||||
const taxAmount = watch("taxAmount");
|
|
||||||
const trCharge = watch("transportCharges");
|
|
||||||
useEffect(() => {
|
|
||||||
const base = parseFloat(baseAmount) || 0;
|
|
||||||
const tax = parseFloat(taxAmount) || 0;
|
|
||||||
const transportCharges = parseFloat(trCharge) || 0;
|
|
||||||
|
|
||||||
if (base || tax || transportCharges) {
|
|
||||||
setValue("totalAmount", (base + tax + transportCharges).toFixed(2));
|
|
||||||
}
|
|
||||||
}, [baseAmount, taxAmount, trCharge, setValue]);
|
|
||||||
const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
|
|
||||||
const files = watch("attachments");
|
|
||||||
const toBase64 = (file) =>
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
|
||||||
reader.onerror = (error) => reject(error);
|
|
||||||
});
|
|
||||||
const onFileChange = async (e) => {
|
|
||||||
const newFiles = Array.from(e.target.files);
|
|
||||||
if (newFiles.length === 0) return;
|
|
||||||
|
|
||||||
const existingFiles = watch("attachments") || [];
|
|
||||||
|
|
||||||
const parsedFiles = await Promise.all(
|
|
||||||
newFiles.map(async (file) => {
|
|
||||||
const base64Data = await toBase64(file);
|
|
||||||
return {
|
|
||||||
fileName: file.name,
|
|
||||||
base64Data,
|
|
||||||
contentType: file.type,
|
|
||||||
fileSize: file.size,
|
|
||||||
description: "",
|
|
||||||
isActive: true,
|
|
||||||
invoiceAttachmentTypeId: invoiceAttachmentType,
|
|
||||||
isNew: true, // <-- temp
|
|
||||||
tempId: crypto.randomUUID(), // temp - id
|
|
||||||
};
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const combinedFiles = [
|
|
||||||
...existingFiles,
|
|
||||||
...parsedFiles.filter(
|
|
||||||
(newFile) =>
|
|
||||||
!existingFiles.some(
|
|
||||||
(f) =>
|
|
||||||
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
|
||||||
)
|
|
||||||
),
|
|
||||||
];
|
|
||||||
|
|
||||||
setValue("attachments", combinedFiles, {
|
|
||||||
shouldDirty: true,
|
|
||||||
shouldValidate: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeFile = (index) => {
|
|
||||||
const updated = files.flatMap((file, i) => {
|
|
||||||
// NEW FILE → remove completely
|
|
||||||
if (file.isNew && file.tempId === index) {
|
|
||||||
return []; // remove from array
|
|
||||||
}
|
|
||||||
|
|
||||||
// EXISTING FILE → mark inactive
|
|
||||||
if (!file.isNew && file.documentId === index) {
|
|
||||||
return [{ ...file, isActive: false }];
|
|
||||||
}
|
|
||||||
|
|
||||||
return [file];
|
|
||||||
});
|
|
||||||
|
|
||||||
setValue("attachments", updated, {
|
|
||||||
shouldDirty: true,
|
|
||||||
shouldValidate: true,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="row g-1 text-start">
|
|
||||||
<div className="col-12 col-md-4">
|
|
||||||
<Label htmlFor="baseAmount">Base Amount</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="baseAmount"
|
|
||||||
type="number"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("baseAmount", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.baseAmount && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.baseAmount.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-4">
|
|
||||||
<Label htmlFor="taxAmount">Tax Amount</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="taxAmount"
|
|
||||||
type="number"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("taxAmount", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.taxAmount && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.taxAmount.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-4">
|
|
||||||
<Label htmlFor="transportCharges">Transport Charges</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="transportCharges"
|
|
||||||
type="number"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("transportCharges", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.transportCharges && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.transportCharges.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="totalAmount">Total Amount</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="totalAmount"
|
|
||||||
type="number"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("totalAmount", { valueAsNumber: true })}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.totalAmount && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.totalAmount.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="paymentDueDate">Payment Due Date</Label>
|
|
||||||
|
|
||||||
<DatePicker
|
|
||||||
name={"paymentDueDate"}
|
|
||||||
control={control}
|
|
||||||
className="w-full"
|
|
||||||
size="xs"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.paymentDueDate && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.paymentDueDate.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 mb-2">
|
|
||||||
<Label htmlFor="description">Description</Label>
|
|
||||||
|
|
||||||
<textarea
|
|
||||||
id="description"
|
|
||||||
rows="3"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("description")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.description && (
|
|
||||||
<div className="small danger-text mt-1">
|
|
||||||
{errors.description.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="col-12">
|
|
||||||
<AppFormController
|
|
||||||
name="invoiceAttachmentTypeId"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<SelectField
|
|
||||||
label="Select Document Type"
|
|
||||||
options={InvoiceDocTypes ?? []}
|
|
||||||
placeholder="Choose Type"
|
|
||||||
labelKeyKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={invoiceDocLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.invoiceAttachmentTypeId && (
|
|
||||||
<small className="danger-text">
|
|
||||||
{errors.invoiceAttachmentTypeId.message}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="text-start">
|
|
||||||
<div className="col-md-12">
|
|
||||||
<Label className="form-label" required>
|
|
||||||
Upload Bill{" "}
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => document.getElementById("attachments").click()}
|
|
||||||
>
|
|
||||||
<i className="bx bx-cloud-upload d-block bx-lg"> </i>
|
|
||||||
<span className="text-muted d-block">
|
|
||||||
Click to select or click here to browse
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="attachments"
|
|
||||||
accept=".pdf,.jpg,.jpeg,.png"
|
|
||||||
multiple
|
|
||||||
disabled={!invoiceAttachmentType}
|
|
||||||
style={{ display: "none" }}
|
|
||||||
{...register("attachments")}
|
|
||||||
onChange={(e) => {
|
|
||||||
onFileChange(e);
|
|
||||||
e.target.value = "";
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{errors.attachments && (
|
|
||||||
<small className="danger-text">{errors.attachments.message}</small>
|
|
||||||
)}
|
|
||||||
{files.length > 0 && (
|
|
||||||
<Filelist
|
|
||||||
files={files}
|
|
||||||
removeFile={removeFile}
|
|
||||||
expenseToEdit={purchaseId}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{Array.isArray(errors.attachments) &&
|
|
||||||
errors.attachments.map((fileError, index) => (
|
|
||||||
<div key={index} className="danger-text small mt-1">
|
|
||||||
{
|
|
||||||
(fileError?.fileSize?.message ||
|
|
||||||
fileError?.contentType?.message ||
|
|
||||||
fileError?.base64Data?.message,
|
|
||||||
fileError?.documentId?.message)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{!invoiceAttachmentType && (
|
|
||||||
<WarningBlock content={FILE_UPLOAD_INFO} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchasePaymentDetails;
|
|
||||||
@ -1,211 +0,0 @@
|
|||||||
import { z } from "zod";
|
|
||||||
import { normalizeAllowedContentTypes } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
|
||||||
const ALLOWED_TYPES = [
|
|
||||||
"application/pdf",
|
|
||||||
"image/png",
|
|
||||||
"image/jpg",
|
|
||||||
"image/jpeg",
|
|
||||||
];
|
|
||||||
|
|
||||||
export const AttachmentSchema = z.object({
|
|
||||||
invoiceAttachmentTypeId: z.string().nullable(),
|
|
||||||
fileName: z.string().min(1, { message: "Filename is required" }),
|
|
||||||
base64Data: z.string().nullable(),
|
|
||||||
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
|
||||||
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
|
||||||
}),
|
|
||||||
fileSize: z.number().max(MAX_FILE_SIZE, {
|
|
||||||
message: "File size must be less than or equal to 5MB",
|
|
||||||
}),
|
|
||||||
description: z.string().optional().default(""),
|
|
||||||
isActive: z.boolean().default(true),
|
|
||||||
documentId: z.string().nullable().default(null),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const PurchaseSchema = z.object({
|
|
||||||
title: z.string().min(1, { message: "Title is required" }),
|
|
||||||
projectId: z.string().min(1, { message: "Project is required" }),
|
|
||||||
organizationId: z.string().min(1, { message: "Organization is required" }),
|
|
||||||
billingAddress: z.string().min(1, { message: "Address is required" }),
|
|
||||||
shippingAddress: z.string().min(1, { message: "Address is required" }),
|
|
||||||
|
|
||||||
purchaseOrderNumber: z.string().nullable(),
|
|
||||||
purchaseOrderDate: z.coerce.date().nullable(),
|
|
||||||
|
|
||||||
supplierId: z.string().min(1, { message: "Supplier is required" }),
|
|
||||||
|
|
||||||
proformaInvoiceNumber: z.string().nullable(),
|
|
||||||
proformaInvoiceDate: z.coerce.date().nullable(),
|
|
||||||
proformaInvoiceAmount: z.coerce.number().optional(),
|
|
||||||
|
|
||||||
invoiceNumber: z.string().nullable(),
|
|
||||||
invoiceDate: z.coerce.date().nullable(),
|
|
||||||
eWayBillNumber: z.string().nullable(),
|
|
||||||
eWayBillDate: z.coerce.date().nullable(),
|
|
||||||
invoiceReferenceNumber: z.string().nullable(),
|
|
||||||
acknowledgmentDate: z.coerce.date().nullable(),
|
|
||||||
acknowledgmentNumber: z.string().nullable(),
|
|
||||||
|
|
||||||
baseAmount: z
|
|
||||||
.number()
|
|
||||||
.or(z.nan()) // allow NaN
|
|
||||||
.transform((val) => (Number.isNaN(val) ? null : val)),
|
|
||||||
|
|
||||||
taxAmount: z
|
|
||||||
.number()
|
|
||||||
.or(z.nan()) // allow NaN
|
|
||||||
.transform((val) => (Number.isNaN(val) ? null : val)),
|
|
||||||
totalAmount: z
|
|
||||||
.number()
|
|
||||||
.or(z.nan()) // allow NaN
|
|
||||||
.transform((val) => (Number.isNaN(val) ? null : val)),
|
|
||||||
paymentDueDate: z.coerce.date().nullable(),
|
|
||||||
transportCharges: z
|
|
||||||
.number()
|
|
||||||
.or(z.nan()) // allow NaN
|
|
||||||
.transform((val) => (Number.isNaN(val) ? null : val)),
|
|
||||||
description: z.string(),
|
|
||||||
invoiceAttachmentTypeId: z.string().nullable(),
|
|
||||||
attachments: z.array(AttachmentSchema),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const defaultPurchaseValue = {
|
|
||||||
title: "",
|
|
||||||
projectId: "",
|
|
||||||
organizationId: "",
|
|
||||||
billingAddress: "",
|
|
||||||
shippingAddress: "",
|
|
||||||
purchaseOrderNumber: null,
|
|
||||||
purchaseOrderDate: null,
|
|
||||||
|
|
||||||
supplierId: "",
|
|
||||||
|
|
||||||
proformaInvoiceNumber: null,
|
|
||||||
proformaInvoiceDate: null,
|
|
||||||
proformaInvoiceAmount: 0,
|
|
||||||
|
|
||||||
invoiceNumber: null,
|
|
||||||
invoiceDate: null,
|
|
||||||
eWayBillNumber: null,
|
|
||||||
eWayBillDate: null,
|
|
||||||
invoiceReferenceNumber: null,
|
|
||||||
acknowledgmentNumber: null,
|
|
||||||
acknowledgmentDate: null,
|
|
||||||
|
|
||||||
baseAmount: 0,
|
|
||||||
taxAmount: 0,
|
|
||||||
totalAmount: 0,
|
|
||||||
paymentDueDate: null,
|
|
||||||
transportCharges: 0,
|
|
||||||
description: "",
|
|
||||||
invoiceAttachmentTypeId: null,
|
|
||||||
attachments: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getStepFields = (stepIndex) => {
|
|
||||||
const stepFieldMap = {
|
|
||||||
0: [
|
|
||||||
"title",
|
|
||||||
"projectId",
|
|
||||||
"organizationId",
|
|
||||||
"supplierId",
|
|
||||||
"billingAddress",
|
|
||||||
"shippingAddress",
|
|
||||||
"purchaseOrderNumber",
|
|
||||||
"purchaseOrderDate",
|
|
||||||
"proformaInvoiceNumber",
|
|
||||||
"proformaInvoiceDate",
|
|
||||||
"proformaInvoiceAmount",
|
|
||||||
],
|
|
||||||
1: [
|
|
||||||
"invoiceNumber",
|
|
||||||
"invoiceDate",
|
|
||||||
"eWayBillNumber",
|
|
||||||
"eWayBillDate",
|
|
||||||
"invoiceReferenceNumber",
|
|
||||||
"acknowledgmentNumber",
|
|
||||||
"acknowledgmentDate",
|
|
||||||
],
|
|
||||||
2: [
|
|
||||||
"baseAmount",
|
|
||||||
"taxAmount",
|
|
||||||
"totalAmount",
|
|
||||||
"transportCharges",
|
|
||||||
"paymentDueDate",
|
|
||||||
"invoiceAttachmentTypeId",
|
|
||||||
"description",
|
|
||||||
"attachments",
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
return stepFieldMap[stepIndex] || [];
|
|
||||||
};
|
|
||||||
|
|
||||||
export const SingleAttachmentSchema = z.object({
|
|
||||||
fileName: z.string().min(1, { message: "File name is required" }),
|
|
||||||
base64Data: z.string().min(1, { message: "File data is required" }),
|
|
||||||
invoiceAttachmentTypeId: z.string().nullable(),
|
|
||||||
|
|
||||||
contentType: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "MIME type is required" })
|
|
||||||
.refine(
|
|
||||||
(val) =>
|
|
||||||
["application/pdf", "image/jpeg", "image/jpg", "image/png"].includes(
|
|
||||||
val
|
|
||||||
),
|
|
||||||
{
|
|
||||||
message: "File type must be PDF, JPG, JPEG or PNG",
|
|
||||||
}
|
|
||||||
),
|
|
||||||
|
|
||||||
fileSize: z
|
|
||||||
.number()
|
|
||||||
.int()
|
|
||||||
.nonnegative("fileSize must be ≥ 0")
|
|
||||||
.max(5 * 1024 * 1024, "File size must be ≤ 5MB"),
|
|
||||||
|
|
||||||
description: z.string().optional().default(""),
|
|
||||||
isActive: z.boolean(),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const DeliveryChallanSchema = z.object({
|
|
||||||
deliveryChallanNumber: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Challan Number required" }),
|
|
||||||
invoiceAttachmentTypeId: z.string().nullable(),
|
|
||||||
deliveryChallanDate: z.string().min(1, { message: "Deliver date required" }),
|
|
||||||
description: z.string().min(1, { message: "Description required" }),
|
|
||||||
attachment: z
|
|
||||||
.any()
|
|
||||||
.refine((val) => val && typeof val === "object" && !!val.base64Data, {
|
|
||||||
message: "Please upload document",
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const DeliveryChallanDefaultValue = {
|
|
||||||
deliveryChallanNumber: "",
|
|
||||||
deliveryChallanDate: "",
|
|
||||||
description: "",
|
|
||||||
attachment: null,
|
|
||||||
invoiceAttachmentTypeId: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const AddPurchasePayment = z.object({
|
|
||||||
paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
|
|
||||||
transactionId: z.string().min(1, "Transaction ID is required"),
|
|
||||||
amount: z.number().min(1, "Amount must be greater than zero"),
|
|
||||||
comment: z.string().min(1, { message: "Comment required" }),
|
|
||||||
paymentAdjustmentHeadId: z
|
|
||||||
.string()
|
|
||||||
.min(1, { message: "Payment Type required" }),
|
|
||||||
});
|
|
||||||
export const defaultPurchasePayment = {
|
|
||||||
paymentReceivedDate: null,
|
|
||||||
transactionId: "",
|
|
||||||
amount: 0,
|
|
||||||
comment: "",
|
|
||||||
paymentAdjustmentHeadId: "",
|
|
||||||
};
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import DatePicker from "../common/DatePicker";
|
|
||||||
import Label from "../common/Label";
|
|
||||||
|
|
||||||
const PurchaseTransportDetails = () => {
|
|
||||||
const {
|
|
||||||
register,control,
|
|
||||||
formState: { errors },
|
|
||||||
} = useAppFormContext();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="row g-3 text-start">
|
|
||||||
{/* Invoice Number */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="invoiceNumber" >
|
|
||||||
Invoice Number
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="invoiceNumber"
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("invoiceNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.invoiceNumber && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.invoiceNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Invoice Date */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="invoiceDate">Invoice Date</Label>
|
|
||||||
|
|
||||||
|
|
||||||
<DatePicker control={control} name="invoiceDate" className="w-full" size="xs"/>
|
|
||||||
|
|
||||||
{errors?.invoiceDate && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.invoiceDate.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* E-Way Bill Number */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="eWayBillNumber"
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("eWayBillNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.eWayBillNumber && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.eWayBillNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* E-Way Bill Date */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="eWayBillDate">E-Way Bill Date</Label>
|
|
||||||
|
|
||||||
|
|
||||||
<DatePicker control={control} name="eWayBillDate" className="w-full"/>
|
|
||||||
|
|
||||||
{errors?.eWayBillDate && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.eWayBillDate.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Invoice Reference Number */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="invoiceReferenceNumber"
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("invoiceReferenceNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.invoiceReferenceNumber && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.invoiceReferenceNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acknowledgment Number */}
|
|
||||||
<div className="col-12 col-md-6">
|
|
||||||
<Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>
|
|
||||||
|
|
||||||
<input
|
|
||||||
id="acknowledgmentNumber"
|
|
||||||
type="text"
|
|
||||||
className="form-control form-control-xs"
|
|
||||||
{...register("acknowledgmentNumber")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.acknowledgmentNumber && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.acknowledgmentNumber.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
|
||||||
<Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
|
|
||||||
|
|
||||||
<DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>
|
|
||||||
|
|
||||||
{errors?.acknowledgmentDate && (
|
|
||||||
<div className="small text-danger mt-1">
|
|
||||||
{errors.acknowledgmentDate.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchaseTransportDetails;
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
export const PurchaseColumn = [
|
|
||||||
{
|
|
||||||
key: "purchaseInvoiceUId",
|
|
||||||
label: "Invoice Id",
|
|
||||||
|
|
||||||
className: "text-start",
|
|
||||||
render: (item) => (
|
|
||||||
<div className="d-flex justify-content-start align-items-center p-1">
|
|
||||||
<span className="fw-normal">{item?.purchaseInvoiceUId || "NA"}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "title",
|
|
||||||
label: "Title",
|
|
||||||
|
|
||||||
className: "text-start",
|
|
||||||
render: (item) => (
|
|
||||||
<div className="d-flex justify-content-start align-items-center">
|
|
||||||
<span className="fw-normal">{item?.title || "NA"}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "project",
|
|
||||||
label: "Project",
|
|
||||||
className: "text-start ",
|
|
||||||
render: (item) => <span>{item?.project?.name || "NA"}</span>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "supplier",
|
|
||||||
label: "Supplier",
|
|
||||||
className: "text-start ",
|
|
||||||
render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "status",
|
|
||||||
label: "Status",
|
|
||||||
className: "text-start",
|
|
||||||
render: (item) => {
|
|
||||||
let color = getColorNameFromHex(item.status?.color);
|
|
||||||
return (
|
|
||||||
<span className={`badge rounded-pill bg-label-${color}`}>
|
|
||||||
<span className={`badge badge-dot bg-${color} me-1`}></span>
|
|
||||||
{item?.status.displayName || "NA"}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "totalAmount",
|
|
||||||
label: "Total Amount",
|
|
||||||
className: "text-end",
|
|
||||||
render: (item) => (
|
|
||||||
<span>{formatFigure(item?.totalAmount, { type: "currency" })}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,243 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { usePurchase } from "../../hooks/usePurchase";
|
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const ViewPurchase = ({ purchaseId }) => {
|
|
||||||
const { data, isLoading, isError, error } = usePurchase(purchaseId);
|
|
||||||
|
|
||||||
if (isLoading) return <SpinnerLoader />;
|
|
||||||
if (isError) return <Error error={error} />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="row g-3 px-3">
|
|
||||||
<div className="col-12 mb-1">
|
|
||||||
<h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
|
||||||
<div className="row">
|
|
||||||
<div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
|
|
||||||
<p className="mb-0 me-1">Purchase No:</p>
|
|
||||||
<p className="mb-0">{data?.purchaseInvoiceUId}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-2 d-flex align-items-center">
|
|
||||||
<p className="fw-light me-2 mb-0"></p>
|
|
||||||
<span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
|
|
||||||
{data?.status?.displayName || "NA"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 text-start border-bottom">
|
|
||||||
<div className=" ">
|
|
||||||
<p className="fw-semibold mb-3">Purchase Details</p>
|
|
||||||
<div className="row mb-3">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Title:</p>
|
|
||||||
<p className="fw-light mb-1">{data?.title}</p>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
|
|
||||||
<p className="fw-light mb-1 ">{data?.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-12 border-bottom">
|
|
||||||
<div className="text-start h-auto fw-semibold">
|
|
||||||
<p className="text-muted mb-2">Project</p>
|
|
||||||
</div>
|
|
||||||
<div className="row text-start h-auto">
|
|
||||||
{/* Project Name */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Project Name:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.project?.name}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Organization Name */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bxs-component bx-sm me-1'></i>Organization:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.organization?.name}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Email */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.organization?.email}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Number */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.organization?.address}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-12 border-bottom">
|
|
||||||
<div className="row text-start h-auto">
|
|
||||||
<p className="text-muted mb-2 fw-semibold">Supplier</p>
|
|
||||||
|
|
||||||
{/* Supplier Name */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Name:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.supplier?.name}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Person */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-support bx-sm me-1'></i>Contact Person:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Email */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.supplier?.email}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Contact Number */}
|
|
||||||
<div className="col-12 col-md-4 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Address */}
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
|
|
||||||
<p className="fw-light mb-0">{data?.supplier?.address}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="text-start h-auto">
|
|
||||||
<p className="text-muted mb-2 fw-semibold">Invoice Details</p>
|
|
||||||
|
|
||||||
<div className="row g-3">
|
|
||||||
{/* Left column */}
|
|
||||||
<div className="col-12 col-sm-6">
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">Invoice No:</p>
|
|
||||||
<p className="fw-light mb-1">{data?.invoiceNumber}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">Proforma No:</p>
|
|
||||||
<p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">E-Way Bill:</p>
|
|
||||||
<p className="fw-light mb-1">{data?.eWayBillNumber}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">PO No:</p>
|
|
||||||
<p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Right column */}
|
|
||||||
<div className="col-12 col-sm-6">
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0 ">Invoice Date:</p>
|
|
||||||
<p className="fw-light mb-1">
|
|
||||||
{formatUTCToLocalTime(data?.invoiceDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">Proforma Date:</p>
|
|
||||||
<p className="fw-light mb-1">
|
|
||||||
{formatUTCToLocalTime(data?.proformaInvoiceDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">E-Way Date:</p>
|
|
||||||
<p className="fw-light mb-1">
|
|
||||||
{formatUTCToLocalTime(data?.eWayBillDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-secondary mb-0">PO Date:</p>
|
|
||||||
<p className="fw-light">
|
|
||||||
{formatUTCToLocalTime(data?.purchaseOrderDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="text-start h-auto">
|
|
||||||
<p className="text-muted mb-2 fw-semibold">Amount Summary</p>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between">
|
|
||||||
<p className="text-secondary mb-0">Base Amount</p>
|
|
||||||
<p className="fw-light mb-1">₹ {data?.baseAmount}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between">
|
|
||||||
<p className="text-secondary mb-0">Tax</p>
|
|
||||||
<p className="fw-light mb-1">₹ {data?.taxAmount}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between">
|
|
||||||
<p className="text-secondary mb-0">Transport</p>
|
|
||||||
<p className="fw-light mb-1">₹ {data?.transportCharges}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="my-2" />
|
|
||||||
|
|
||||||
<div className="d-flex justify-content-between fs-6 fs-medium">
|
|
||||||
<span>Total</span>
|
|
||||||
<span>₹ {data?.totalAmount}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2">
|
|
||||||
<p className="text-secondary mb-0">Due Date:</p>
|
|
||||||
<p className="fw-light mb-0">
|
|
||||||
{formatUTCToLocalTime(data?.paymentDueDate)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="row mt-3 text-start">
|
|
||||||
<div className="col-md-6 mb-3 ms-n2">
|
|
||||||
<div className="h-100">
|
|
||||||
<p className="text-secondary mb-0">Billing Address</p>
|
|
||||||
|
|
||||||
<p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6 mb-3 text-start">
|
|
||||||
<div className="h-100">
|
|
||||||
<p className="text-secondary mb-0">Shipping Address</p>
|
|
||||||
<p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ViewPurchase;
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import { useForm, Controller, FormProvider, useFormContext } from "react-hook-form";
|
import { useForm, Controller,FormProvider } from "react-hook-form";
|
||||||
|
|
||||||
export const useAppForm = (config) => useForm(config);
|
export const useAppForm = (config) => useForm(config);
|
||||||
export const AppFormProvider = FormProvider;
|
export const AppFormProvider = FormProvider;
|
||||||
export const AppFormController = Controller;
|
export const AppFormController = Controller;
|
||||||
export const useAppFormContext = useFormContext;
|
|
||||||
|
|||||||
@ -10,25 +10,16 @@ import {
|
|||||||
} from "@tanstack/react-query";
|
} from "@tanstack/react-query";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
|
|
||||||
export const useInvoiceAttachmentTypes = () => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["invoiceAttachmentType"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await MasterRespository.getInvoiceAttachmentTypes();
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useRecurringStatus = ()=>{
|
export const useRecurringStatus = ()=>{
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["RecurringStatus"],
|
queryKey:["RecurringStatus"],
|
||||||
queryFn:async()=>{
|
queryFn:async()=>{
|
||||||
const resp = await MasterRespository.getRecurringStatus();
|
const resp = await MasterRespository.getRecurringStatus();
|
||||||
return resp.data;
|
return resp.data
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
export const useCurrencies = () => {
|
export const useCurrencies = () => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ["currencies"],
|
queryKey: ["currencies"],
|
||||||
@ -42,8 +33,8 @@ export const useCurrencies = () => {
|
|||||||
export const usePaymentAjustmentHead = (isActive) => {
|
export const usePaymentAjustmentHead = (isActive) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ["paymentType",isActive],
|
queryKey: ["paymentType",isActive],
|
||||||
queryFn: async () =>
|
queryFn: async () => await MasterRespository.getPaymentAdjustmentHead(isActive),
|
||||||
await MasterRespository.getPaymentAdjustmentHead(isActive),
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -312,9 +303,9 @@ export const useJobStatus = (statusId, projectId) => {
|
|||||||
const resp = await MasterRespository.getJobStatus(statusId,projectId);
|
const resp = await MasterRespository.getJobStatus(statusId,projectId);
|
||||||
return resp.data;
|
return resp.data;
|
||||||
},
|
},
|
||||||
enabled: !!statusId && !!projectId,
|
enabled:!!statusId && !!projectId
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
export const useTeamRole=()=>{
|
export const useTeamRole=()=>{
|
||||||
return useQuery({
|
return useQuery({
|
||||||
@ -322,9 +313,9 @@ export const useTeamRole = () => {
|
|||||||
queryFn:async()=>{
|
queryFn:async()=>{
|
||||||
const resp = await MasterRespository.getTeamRole();
|
const resp = await MasterRespository.getTeamRole();
|
||||||
return resp.data;
|
return resp.data;
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
//#region ==Get Masters==
|
//#region ==Get Masters==
|
||||||
const fetchMasterData = async (masterType) => {
|
const fetchMasterData = async (masterType) => {
|
||||||
switch (masterType) {
|
switch (masterType) {
|
||||||
@ -414,6 +405,8 @@ const useMaster = () => {
|
|||||||
export default useMaster;
|
export default useMaster;
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ================================Mutation====================================
|
// ================================Mutation====================================
|
||||||
|
|
||||||
//#region Job Role
|
//#region Job Role
|
||||||
@ -463,6 +456,10 @@ export const useCreateJobRole = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion Job Role
|
//#endregion Job Role
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Application Role
|
//#region Application Role
|
||||||
export const useCreateApplicationRole = (onSuccessCallback) => {
|
export const useCreateApplicationRole = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -508,6 +505,10 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Create work Category
|
//#region Create work Category
|
||||||
export const useCreateWorkCategory = (onSuccessCallback) => {
|
export const useCreateWorkCategory = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -553,6 +554,11 @@ export const useUpdateWorkCategory = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Contact Category
|
//#region Contact Category
|
||||||
|
|
||||||
export const useCreateContactCategory = (onSuccessCallback) => {
|
export const useCreateContactCategory = (onSuccessCallback) => {
|
||||||
@ -603,6 +609,10 @@ export const useUpdateContactCategory = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Contact Tag
|
//#region Contact Tag
|
||||||
|
|
||||||
export const useCreateContactTag = (onSuccessCallback) => {
|
export const useCreateContactTag = (onSuccessCallback) => {
|
||||||
@ -649,6 +659,10 @@ export const useUpdateContactTag = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Expense Category
|
//#region Expense Category
|
||||||
export const useCreateExpenseCategory = (onSuccessCallback) => {
|
export const useCreateExpenseCategory = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -675,10 +689,7 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
|
|||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: async ({ id, payload }) => {
|
mutationFn: async ({ id, payload }) => {
|
||||||
const response = await MasterRespository.updateExpenseCategory(
|
const response = await MasterRespository.updateExpenseCategory(id, payload);
|
||||||
id,
|
|
||||||
payload
|
|
||||||
);
|
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
onSuccess: (data, variables) => {
|
onSuccess: (data, variables) => {
|
||||||
@ -697,6 +708,11 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Payment Mode
|
//#region Payment Mode
|
||||||
|
|
||||||
export const useCreatePaymentMode = (onSuccessCallback) => {
|
export const useCreatePaymentMode = (onSuccessCallback) => {
|
||||||
@ -743,6 +759,10 @@ export const useUpdatePaymentMode = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Services-------------------------------
|
// Services-------------------------------
|
||||||
|
|
||||||
// export const useCreateService = (onSuccessCallback) => {
|
// export const useCreateService = (onSuccessCallback) => {
|
||||||
@ -824,6 +844,10 @@ export const useUpdateService = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Activity Grouph
|
//#region Activity Grouph
|
||||||
|
|
||||||
export const useCreateActivityGroup = (onSuccessCallback) => {
|
export const useCreateActivityGroup = (onSuccessCallback) => {
|
||||||
@ -888,6 +912,10 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Activities
|
//#region Activities
|
||||||
export const useCreateActivity = (onSuccessCallback) => {
|
export const useCreateActivity = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -942,6 +970,11 @@ export const useUpdateActivity = (onSuccessCallback) => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Expense Status
|
//#region Expense Status
|
||||||
export const useCreateExpenseStatus = (onSuccessCallback) => {
|
export const useCreateExpenseStatus = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -985,6 +1018,10 @@ export const useUpdateExpenseStatus = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Document-Category
|
//#region Document-Category
|
||||||
export const useCreateDocumentCatgory = (onSuccessCallback) => {
|
export const useCreateDocumentCatgory = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -1031,6 +1068,11 @@ export const useUpdateDocumentCategory = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Document-Type
|
//#region Document-Type
|
||||||
export const useCreateDocumentType = (onSuccessCallback) => {
|
export const useCreateDocumentType = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -1075,6 +1117,10 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region Payment Adjustment Head
|
//#region Payment Adjustment Head
|
||||||
export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
|
export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -1101,10 +1147,7 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
|
|||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: async ({ id, payload }) => {
|
mutationFn: async ({ id, payload }) => {
|
||||||
const resp = await MasterRespository.updatePaymentAjustmentHead(
|
const resp = await MasterRespository.updatePaymentAjustmentHead(id, payload);
|
||||||
id,
|
|
||||||
payload
|
|
||||||
);
|
|
||||||
return resp.data;
|
return resp.data;
|
||||||
},
|
},
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
@ -1121,6 +1164,10 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
|
|||||||
};
|
};
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//#region ==Delete Master==
|
//#region ==Delete Master==
|
||||||
export const useDeleteMasterItem = () => {
|
export const useDeleteMasterItem = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@ -1156,6 +1203,8 @@ export const useDeleteMasterItem = () => {
|
|||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const useDeleteServiceGroup = () => {
|
export const useDeleteServiceGroup = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
|||||||
@ -24,9 +24,7 @@ export const useOrganizationModal = () => {
|
|||||||
dispatch(
|
dispatch(
|
||||||
openOrgModal({
|
openOrgModal({
|
||||||
isOpen: true,
|
isOpen: true,
|
||||||
orgData: options.hasOwnProperty("orgData")
|
orgData: options.hasOwnProperty("orgData") ? options.orgData : orgData,
|
||||||
? options.orgData
|
|
||||||
: orgData,
|
|
||||||
startStep: options.startStep ?? startStep ?? 1,
|
startStep: options.startStep ?? startStep ?? 1,
|
||||||
prevStep: options.prevStep ?? prevStep ?? 1,
|
prevStep: options.prevStep ?? prevStep ?? 1,
|
||||||
flowType: options.flowType ?? flowType ?? "default",
|
flowType: options.flowType ?? flowType ?? "default",
|
||||||
@ -39,30 +37,16 @@ export const useOrganizationModal = () => {
|
|||||||
|
|
||||||
// ================================Query=============================================================
|
// ================================Query=============================================================
|
||||||
|
|
||||||
export const useGlobaleOrganizations = (pageSize, pageNumber,id, searchString) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["global_organization",pageSize, pageNumber,id, searchString],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await OrganizationRepository.getGlobalOrganization(
|
|
||||||
pageSize,
|
|
||||||
pageNumber,id,
|
|
||||||
searchString
|
|
||||||
);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useOrganization=(id)=>{
|
export const useOrganization=(id)=>{
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["organization",id],
|
queryKey:["organization",id],
|
||||||
queryFn:async()=> {
|
queryFn:async()=> {
|
||||||
const resp = await await OrganizationRepository.getOrganizaion(id);
|
const resp = await await OrganizationRepository.getOrganizaion(id);
|
||||||
return resp.data;
|
return resp.data
|
||||||
},
|
},
|
||||||
enabled: !!id,
|
enabled:!!id
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
export const useOrganizationBySPRID = (sprid) => {
|
export const useOrganizationBySPRID = (sprid) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ["organization by", sprid],
|
queryKey: ["organization by", sprid],
|
||||||
@ -201,9 +185,7 @@ export const useUpdateOrganization = (onSuccessCallback) => {
|
|||||||
await OrganizationRepository.updateOrganizaion(orgId,payload),
|
await OrganizationRepository.updateOrganizaion(orgId,payload),
|
||||||
onSuccess: (_, variables) => {
|
onSuccess: (_, variables) => {
|
||||||
useClient.invalidateQueries({ queryKey: ["organizationList"] });
|
useClient.invalidateQueries({ queryKey: ["organizationList"] });
|
||||||
useClient.invalidateQueries({
|
useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] });
|
||||||
queryKey: ["projectAssignedOrganiztionsName"],
|
|
||||||
});
|
|
||||||
|
|
||||||
showToast("Organization Updated successfully", "success");
|
showToast("Organization Updated successfully", "success");
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
if (onSuccessCallback) onSuccessCallback();
|
||||||
|
|||||||
@ -1,181 +0,0 @@
|
|||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { PurchaseRepository } from "../repositories/PurchaseRepository";
|
|
||||||
import showToast from "../services/toastService";
|
|
||||||
|
|
||||||
export const usePurchasesList = (
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
isActive,
|
|
||||||
filter,
|
|
||||||
searchString
|
|
||||||
) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: [
|
|
||||||
"purchase_list",
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
isActive,
|
|
||||||
filter,
|
|
||||||
searchString,
|
|
||||||
],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await PurchaseRepository.GetPurchaseList(
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
isActive,
|
|
||||||
filter,
|
|
||||||
searchString
|
|
||||||
);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useDeliverChallane = (purchaseInvoiceId) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["deliverliy_challane", purchaseInvoiceId],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await PurchaseRepository.GetDeliveryChallan(
|
|
||||||
purchaseInvoiceId
|
|
||||||
);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
enabled: !!purchaseInvoiceId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const usePurchase = (id) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["purchase", id],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await PurchaseRepository.GetPurchase(id);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
enabled: !!id,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const usePurchasePaymentHistory = (id) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["purchase_payment_history", id],
|
|
||||||
queryFn: async () => {
|
|
||||||
const resp = await PurchaseRepository.GetPaymentHistory(id);
|
|
||||||
return resp.data;
|
|
||||||
},
|
|
||||||
enabled: !!id,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useCreatePurchaseInvoice = (onSuccessCallback) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (payload) =>
|
|
||||||
await PurchaseRepository.CreatePurchase(payload),
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
|
|
||||||
showToast("Purchase Invoice Created successfully", "success");
|
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to create invoice",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useUpdatePurchaseInvoice = (onSuccessCallback) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async ({ purchaseId, payload }) =>
|
|
||||||
PurchaseRepository.UpdatePurchase(purchaseId, payload),
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["purchase"] });
|
|
||||||
showToast("Purchase Invoice Updated successfully", "success");
|
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to create invoice",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
export const useAddDeliverChallan = (onSuccessCallback) => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (payload) =>
|
|
||||||
PurchaseRepository.addDelievryChallan(payload),
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["deliverliy_challane"] });
|
|
||||||
showToast("Challan added successfully", "success");
|
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to create invoice",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
export const useAddPurchasePayment =(onSuccessCallback)=>{
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async (payload) =>
|
|
||||||
PurchaseRepository.AddPayment(payload),
|
|
||||||
onSuccess: (data, variables) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["purchase_payment_history"] });
|
|
||||||
showToast("Payment added successfully", "success");
|
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to Add payment",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export const useDeletePurchaseInvoice = () => {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: async ({ id, isActive }) =>
|
|
||||||
await PurchaseRepository.deletePurchase(id, isActive),
|
|
||||||
|
|
||||||
onSuccess: (_, variable) => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
|
|
||||||
showToast(
|
|
||||||
`Purchase Invoice ${variable.isActive ? "restored" : "deleted"} successfully`,
|
|
||||||
"success"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
onError: (error) => {
|
|
||||||
showToast(
|
|
||||||
error?.response?.data?.message ||
|
|
||||||
error.message ||
|
|
||||||
"Failed to delete branch",
|
|
||||||
"error"
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
@ -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: ["Tenants", tenantId] });
|
queryClient.invalidateQueries({ queryKey: ["Tenant", tenantId] });
|
||||||
if (onSuccessCallback) onSuccessCallback();
|
if (onSuccessCallback) onSuccessCallback();
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
|
|||||||
@ -24,25 +24,25 @@ const AuthLayout = () => {
|
|||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
<nav
|
<nav
|
||||||
className="navbar navbar-light ms-10 w-auto justify-content-start"
|
class="navbar navbar-light ms-10 w-auto justify-content-start"
|
||||||
style={{ opacity: "100%" }}
|
style={{ opacity: "100%" }}
|
||||||
>
|
>
|
||||||
<a className="navbar-brand" href="/">
|
<a class="navbar-brand" href="/">
|
||||||
Home
|
Home
|
||||||
</a>
|
</a>
|
||||||
<a className="navbar-brand" href="/#landingFeatures">
|
<a class="navbar-brand" href="/#landingFeatures">
|
||||||
Features
|
Features
|
||||||
</a>
|
</a>
|
||||||
<a className="navbar-brand" href="/#landingPricing">
|
<a class="navbar-brand" href="/#landingPricing">
|
||||||
Pricing
|
Pricing
|
||||||
</a>
|
</a>
|
||||||
<a className="navbar-brand" href="/#landingFAQ">
|
<a class="navbar-brand" href="/#landingFAQ">
|
||||||
FAQ
|
FAQ
|
||||||
</a>
|
</a>
|
||||||
<a className="navbar-brand" href="/#sectionBlog">
|
<a class="navbar-brand" href="/#sectionBlog">
|
||||||
Blogs
|
Blogs
|
||||||
</a>
|
</a>
|
||||||
<a className="navbar-brand" href="/#landingCTA">
|
<a class="navbar-brand" href="/#landingCTA">
|
||||||
Contact Us
|
Contact Us
|
||||||
</a>
|
</a>
|
||||||
</nav>{" "}
|
</nav>{" "}
|
||||||
|
|||||||
@ -1,34 +1,108 @@
|
|||||||
import React from 'react'
|
import React, {
|
||||||
import Breadcrumb from '../../components/common/Breadcrumb'
|
createContext,
|
||||||
import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList'
|
useContext,
|
||||||
import { useForm } from 'react-hook-form';
|
useEffect,
|
||||||
import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
|
useMemo,
|
||||||
|
useState,
|
||||||
|
} from "react";
|
||||||
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
|
import { useEmployee } from "../../hooks/useEmployees";
|
||||||
|
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import Label from "../../components/common/Label";
|
||||||
|
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
|
||||||
|
import { employee } from "../../data/masters";
|
||||||
|
import { formatFigure } from "../../utils/appUtils";
|
||||||
|
import { useParams } from "react-router-dom";
|
||||||
|
import { useExpenseTransactions } from "../../hooks/useExpense";
|
||||||
|
|
||||||
|
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 { 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({
|
const { control, reset, watch } = useForm({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
|
employeeId: employeeId || "",
|
||||||
searchString: "",
|
searchString: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const selectedEmployeeId = employeeId || watch("employeeId");
|
||||||
|
|
||||||
const searchString = watch("searchString");
|
const searchString = watch("searchString");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
|
||||||
|
reset({
|
||||||
|
employeeId: selectedEmpoyee || "",
|
||||||
|
});
|
||||||
|
}, [reset]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<AdvancePaymentContext.Provider value={{ setBalance }}>
|
||||||
<div className="container-fluid">
|
<div className="container-fluid">
|
||||||
<Breadcrumb
|
<Breadcrumb
|
||||||
data={[
|
data={[
|
||||||
{ label: "Home", link: "/dashboard" },
|
{ label: "Home", link: "/dashboard" },
|
||||||
{ label: "Finance", link: "/advance-payment" },
|
{ label: "Finance", link: "/advance-payment" },
|
||||||
{ label: "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="card px-4 py-2 page-min-h ">
|
||||||
<div className="row py-1">
|
<div className="row py-1 justify-content-end">
|
||||||
<AdvancePaymentList1 searchString={searchString} />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AdvancePaymentContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
</div>
|
export default AdvancePaymentPage;
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AdvancePaymentPage
|
|
||||||
|
|||||||
34
src/pages/AdvancePayment/AdvancePaymentPage1.jsx
Normal file
34
src/pages/AdvancePayment/AdvancePaymentPage1.jsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
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
|
||||||
@ -1,149 +0,0 @@
|
|||||||
import React, {
|
|
||||||
createContext,
|
|
||||||
useContext,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from "react";
|
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
||||||
import { useEmployee } from "../../hooks/useEmployees";
|
|
||||||
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import Label from "../../components/common/Label";
|
|
||||||
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentListDetails";
|
|
||||||
import { employee } from "../../data/masters";
|
|
||||||
import { formatFigure } from "../../utils/appUtils";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import { useExpenseTransactions } from "../../hooks/useExpense";
|
|
||||||
import handleAdvancePaymentExport from "../../components/AdvancePayment/handleAdvancePaymentExport";
|
|
||||||
|
|
||||||
export const AdvancePaymentContext = createContext();
|
|
||||||
export const useAdvancePaymentContext = () => {
|
|
||||||
const context = useContext(AdvancePaymentContext);
|
|
||||||
if (!context) {
|
|
||||||
throw new Error(
|
|
||||||
"useAdvancePaymentContext must be used within an AdvancePaymentProvider"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
const AdvancePaymentPageDetails = () => {
|
|
||||||
const { employeeId } = useParams();
|
|
||||||
|
|
||||||
const { data: transactionData } = useExpenseTransactions(employeeId, {
|
|
||||||
enabled: !!employeeId
|
|
||||||
});
|
|
||||||
|
|
||||||
const employeeName = useMemo(() => {
|
|
||||||
if (Array.isArray(transactionData) && transactionData.length > 0) {
|
|
||||||
const emp = transactionData[0].employee;
|
|
||||||
if (emp) return `${emp.firstName} ${emp.lastName}`;
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
}, [transactionData]);
|
|
||||||
|
|
||||||
const [balance, setBalance] = useState(null);
|
|
||||||
const { control, reset, watch } = useForm({
|
|
||||||
defaultValues: {
|
|
||||||
employeeId: employeeId || "",
|
|
||||||
searchString: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const selectedEmployeeId = employeeId || watch("employeeId");
|
|
||||||
|
|
||||||
const searchString = watch("searchString");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
|
|
||||||
reset({
|
|
||||||
employeeId: selectedEmpoyee || "",
|
|
||||||
});
|
|
||||||
}, [reset]);
|
|
||||||
|
|
||||||
|
|
||||||
const tableRef = useRef(null);
|
|
||||||
|
|
||||||
const handleExport = (type) => {
|
|
||||||
handleAdvancePaymentExport(type, transactionData, tableRef);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AdvancePaymentContext.Provider value={{ setBalance }}>
|
|
||||||
<div className="container-fluid">
|
|
||||||
<Breadcrumb
|
|
||||||
data={[
|
|
||||||
{ label: "Home", link: "/dashboard" },
|
|
||||||
{ label: "Finance", link: "/advance-payment" },
|
|
||||||
{ label: "Advance Payment", link: "/advance-payment" },
|
|
||||||
employeeName && { label: employeeName, link: "" },
|
|
||||||
].filter(Boolean)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="card px-4 py-2 page-min-h ">
|
|
||||||
<div className="row py-1 align-items-center">
|
|
||||||
|
|
||||||
{/* LEFT SIDE → EXPORT DROPDOWN */}
|
|
||||||
<div className="col-md-4 d-flex align-items-center">
|
|
||||||
<div className="dropdown">
|
|
||||||
<button
|
|
||||||
aria-label="Click me"
|
|
||||||
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
|
||||||
type="button"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i className="bx bx-export me-2 bx-sm"></i>Export
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<ul className="dropdown-menu">
|
|
||||||
<li>
|
|
||||||
<button className="dropdown-item" onClick={() => handleExport("print")}>
|
|
||||||
<i className="bx bx-printer me-1"></i> Print
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button className="dropdown-item" onClick={() => handleExport("csv")}>
|
|
||||||
<i className="bx bx-file me-1"></i> CSV
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button className="dropdown-item" onClick={() => handleExport("excel")}>
|
|
||||||
<i className="bx bxs-file-export me-1"></i> Excel
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button className="dropdown-item" onClick={() => handleExport("pdf")}>
|
|
||||||
<i className="bx bxs-file-pdf me-1"></i> PDF
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* RIGHT SIDE → CURRENT BALANCE */}
|
|
||||||
<div className="col-md-8 d-flex justify-content-end align-items-center">
|
|
||||||
{balance !== null ? (
|
|
||||||
<>
|
|
||||||
<label className="fs-5 fw-semibold">Current Balance :</label>
|
|
||||||
<span
|
|
||||||
className={`${balance > 0 ? "text-success" : "text-danger"} fs-5 fw-bold ms-1`}
|
|
||||||
>
|
|
||||||
{balance > 0 && <i className="bx bx-plus b-sm"></i>}{" "}
|
|
||||||
{formatFigure(balance, { type: "currency", currency: "INR" })}
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} tableRef={tableRef} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</AdvancePaymentContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AdvancePaymentPageDetails;
|
|
||||||
@ -19,7 +19,7 @@ import BucketList from "../../components/Directory/BucketList";
|
|||||||
import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
|
import { 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,exportToExcel,exportToPDF1,exportToPDF,printTable } from "../../utils/tableExportUtils";
|
import { exportToCSV } from "../../utils/exportUtils";
|
||||||
import ConfirmModal from "../../components/common/ConfirmModal";
|
import ConfirmModal from "../../components/common/ConfirmModal";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
|
|
||||||
@ -64,49 +64,11 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
|||||||
const [ContactData, setContactData] = useState([]);
|
const [ContactData, setContactData] = useState([]);
|
||||||
|
|
||||||
const handleExport = (type) => {
|
const handleExport = (type) => {
|
||||||
let exportData = activeTab === "notes" ? notesData : ContactData;
|
if (activeTab === "notes" && type === "csv") {
|
||||||
if (!exportData?.length) return;
|
exportToCSV(notesData, "notes.csv");
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case "csv":
|
|
||||||
exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts");
|
|
||||||
break;
|
|
||||||
case "excel":
|
|
||||||
exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts");
|
|
||||||
break;
|
|
||||||
case "pdf":
|
|
||||||
if (activeTab === "notes") {
|
|
||||||
exportToPDF1(exportData, "Notes");
|
|
||||||
} else {
|
|
||||||
// Columns for Contacts PDF
|
|
||||||
const columns = [
|
|
||||||
"Email",
|
|
||||||
"Phone",
|
|
||||||
"Organization",
|
|
||||||
"Category",
|
|
||||||
"Tags",
|
|
||||||
];
|
|
||||||
|
|
||||||
// Sanitize and trim long text to avoid PDF overflow
|
|
||||||
const sanitizedData = exportData.map((item) => ({
|
|
||||||
Email: (item.Email || "").slice(0, 40),
|
|
||||||
Phone: (item.Phone || "").slice(0, 20),
|
|
||||||
Organization: (item.Organization || "").slice(0, 30),
|
|
||||||
Category: (item.Category || "").slice(0, 20),
|
|
||||||
Tags: (item.Tags || "").slice(0, 40),
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Export with proper spacing
|
|
||||||
exportToPDF(sanitizedData, "Contacts", columns, {
|
|
||||||
columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
|
|
||||||
fontSizeHeader: 12,
|
|
||||||
fontSizeRow: 10,
|
|
||||||
rowHeight: 25,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
break;
|
if (activeTab === "contacts" && type === "csv") {
|
||||||
default:
|
exportToCSV(ContactData, "contact.csv");
|
||||||
console.warn("Unsupported export type");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -196,11 +158,13 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mb-1 px-2 py-3">
|
<div className="mb-1 px-md-2 px-0 py-3">
|
||||||
<div className="d-flex align-items-center justify-content-between">
|
<div className="row">
|
||||||
<div className="d-flex align-items-center gap-3">
|
<div className="col-12 col-md-10 mb-2">
|
||||||
{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"
|
||||||
@ -208,11 +172,13 @@ 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="d-flex gap-2 align-items-center">
|
<div className="col-12 col-md-8 d-flex flex-row gap-2">
|
||||||
|
<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"
|
||||||
@ -220,117 +186,61 @@ 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">
|
</div>
|
||||||
{" "}
|
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm p-1 ${gridView
|
className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
|
||||||
? " btn-primary"
|
|
||||||
: " btn-outline-primary"
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setGridView(true)}
|
onClick={() => setGridView(true)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-grid-alt"></i>
|
<i className="bx bx-grid-alt"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`btn btn-sm p-1 ${!gridView
|
className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
|
||||||
? "btn-primary"
|
|
||||||
: "btn-outline-primary"
|
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setGridView(false)}
|
onClick={() => setGridView(false)}
|
||||||
>
|
>
|
||||||
<i className="bx bx-list-ul"></i>
|
<i className="bx bx-list-ul"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="dropdown z-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-icon p-0 m-0"
|
|
||||||
data-bs-toggle="dropdown"
|
|
||||||
aria-expanded="false"
|
|
||||||
title="More Actions"
|
|
||||||
>
|
|
||||||
<i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<ul className="dropdown-menu dropdown-menu-end shadow-sm ">
|
<div className="form-check form-switch d-flex align-items-end d-none d-md-flex">
|
||||||
{activeTab === "contacts" && (
|
|
||||||
<li className="dropdown-item d-flex align-items-center">
|
|
||||||
<div className="form-check form-switch mb-0">
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
className="form-check-input"
|
className="form-check-input"
|
||||||
role="switch"
|
role="switch"
|
||||||
id="inactiveContactsSwitch"
|
id="inactiveEmployeesCheckbox"
|
||||||
checked={showActive}
|
checked={showActive}
|
||||||
onChange={(e) =>
|
onChange={(e) => setShowActive(e.target.checked)}
|
||||||
setShowActive(e.target.checked)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label ms-2"
|
||||||
|
htmlFor="inactiveEmployeesCheckbox"
|
||||||
|
>
|
||||||
|
{showActive ? "Active" : "In-active"} Contacts
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span>
|
|
||||||
{showActive
|
|
||||||
? "Active Contacts"
|
|
||||||
: "Inactive Contacts"}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
<li>
|
</div>
|
||||||
|
<div className="col-12 col-md-2 d-flex justify-content-end align-items-center gap-2">
|
||||||
|
<div className=" btn-group">
|
||||||
<button
|
<button
|
||||||
className="dropdown-item d-flex align-items-center gap-2"
|
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")}
|
onClick={() => handleExport("csv")}
|
||||||
>
|
>
|
||||||
<i className="bx bx-file"></i>
|
<i className="bx bx-file me-1"></i> CSV
|
||||||
<span>Export to CSV</span>
|
</a>
|
||||||
</button>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
className="dropdown-item d-flex align-items-center gap-2"
|
|
||||||
onClick={() => handleExport("excel")}
|
|
||||||
>
|
|
||||||
<i className="bx bx-spreadsheet"></i>
|
|
||||||
<span>Export to Excel</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button
|
|
||||||
className="dropdown-item d-flex align-items-center gap-2"
|
|
||||||
onClick={() => handleExport("pdf")}
|
|
||||||
>
|
|
||||||
<i className="bx bxs-file-pdf"></i>
|
|
||||||
<span>Export to PDF</span>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className={`d-block d-md-none ${activeTab === "contacts" ? "d-block" : "d-none"}`}>
|
|
||||||
<span
|
|
||||||
className={`dropdown-item ${gridView ? " text-primary" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => setGridView(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-grid-alt"></i> Card View
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block" : "d-none"}`}>
|
|
||||||
<span
|
|
||||||
className={`dropdown-item ${!gridView ? "text-primary" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => setGridView(false)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-list-ul"></i> List View
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{/* Divider */}
|
|
||||||
{activeTab === "contacts" && (
|
|
||||||
<li>
|
|
||||||
<hr className="dropdown-divider" />
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -125,7 +125,8 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div
|
<div
|
||||||
className="card text-center page-min-h d-flex align-items-center justify-content-center"
|
className="card text-center 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
|
||||||
|
|||||||
@ -30,7 +30,6 @@ 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();
|
||||||
@ -63,7 +62,7 @@ const ExpensePage = () => {
|
|||||||
|
|
||||||
const [ViewDocument, setDocumentView] = useState({
|
const [ViewDocument, setDocumentView] = useState({
|
||||||
IsOpen: false,
|
IsOpen: false,
|
||||||
Images: null,
|
Image: null,
|
||||||
});
|
});
|
||||||
|
|
||||||
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
|
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
|
||||||
@ -71,8 +70,6 @@ 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 };
|
||||||
@ -117,11 +114,6 @@ 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">
|
||||||
@ -134,8 +126,7 @@ 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-md-8 col-sm-12 mb-2 mb-md-0">
|
<div className="col-6">
|
||||||
<div className="d-flex align-items-center flex-wrap gap-0">
|
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
className="form-control form-control-sm w-auto"
|
className="form-control form-control-sm w-auto"
|
||||||
@ -144,9 +135,8 @@ const ExpensePage = () => {
|
|||||||
onChange={(e) => setSearchText(e.target.value)}
|
onChange={(e) => setSearchText(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-2 mt-sm-0">
|
||||||
{IsCreatedAble && (
|
{IsCreatedAble && (
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-primary"
|
className="btn btn-sm btn-primary"
|
||||||
@ -164,47 +154,6 @@ 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>
|
||||||
@ -214,8 +163,6 @@ const ExpensePage = () => {
|
|||||||
filters={filters}
|
filters={filters}
|
||||||
groupBy={groupBy}
|
groupBy={groupBy}
|
||||||
searchText={searchText}
|
searchText={searchText}
|
||||||
tableRef={tableRef}
|
|
||||||
onDataFiltered={setFilteredData}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
@ -261,10 +208,10 @@ const ExpensePage = () => {
|
|||||||
<GlobalModel
|
<GlobalModel
|
||||||
isOpen
|
isOpen
|
||||||
size="md"
|
size="md"
|
||||||
key={ViewDocument.Images ?? "doc"}
|
key={ViewDocument.Image ?? "doc"}
|
||||||
closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
|
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||||
>
|
>
|
||||||
<PreviewDocument files={ViewDocument.Images} />
|
<PreviewDocument imageUrl={ViewDocument.Image} />
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,7 +10,7 @@ const FeatureCard = ({ imagesrc, title, description }) => {
|
|||||||
alt={title}
|
alt={title}
|
||||||
className="w-14 mb-4 feature-icon-image"
|
className="w-14 mb-4 feature-icon-image"
|
||||||
/>
|
/>
|
||||||
<span className="ms-5">
|
<span class="ms-5">
|
||||||
<h5>{title}</h5>
|
<h5>{title}</h5>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -67,14 +67,14 @@ const LandingPageOld = () => {
|
|||||||
|
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
className="app-brand-link fw-bold navbar-brand text-green fs-5"
|
class="app-brand-link fw-bold navbar-brand text-green fs-5"
|
||||||
>
|
>
|
||||||
<span className="app-brand-logo demo">
|
<span class="app-brand-logo demo">
|
||||||
<img src="/img/brand/marco.png" width="50" />
|
<img src="/img/brand/marco.png" width="50" />
|
||||||
</span>
|
</span>
|
||||||
<span className="text-blue">OnField</span>
|
<span class="text-blue">OnField</span>
|
||||||
<span>Work</span>
|
<span>Work</span>
|
||||||
<span className="text-dark">.com</span>
|
<span class="text-dark">.com</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/* Menu logo wrapper: End */}
|
{/* Menu logo wrapper: End */}
|
||||||
@ -404,11 +404,11 @@ const LandingPageOld = () => {
|
|||||||
{/* <!-- Real blog/ case studies: Start --> */}
|
{/* <!-- Real blog/ case studies: Start --> */}
|
||||||
<section
|
<section
|
||||||
id="sectionBlog"
|
id="sectionBlog"
|
||||||
className="section-py bg-body landing-reviews pb-0"
|
class="section-py bg-body landing-reviews pb-0"
|
||||||
hidden
|
hidden
|
||||||
>
|
>
|
||||||
{/* <!-- What people say slider: Start --> */}
|
{/* <!-- What people say slider: Start --> */}
|
||||||
<div className="container">
|
<div class="container">
|
||||||
<div className="text-center mb-4">
|
<div className="text-center mb-4">
|
||||||
<span className="badge bg-label-primary heading">
|
<span className="badge bg-label-primary heading">
|
||||||
Case Studies
|
Case Studies
|
||||||
@ -430,8 +430,8 @@ const LandingPageOld = () => {
|
|||||||
See the transformations our clients have achieved with us
|
See the transformations our clients have achieved with us
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="row">
|
<div class="row">
|
||||||
<div className="swiper-reviews-carousel">
|
<div class="swiper-reviews-carousel">
|
||||||
<Swiper
|
<Swiper
|
||||||
onSwiper={setSwiperRef}
|
onSwiper={setSwiperRef}
|
||||||
slidesPerView={4}
|
slidesPerView={4}
|
||||||
|
|||||||
@ -5,37 +5,37 @@ const SwaperBlogContent = ({
|
|||||||
ContentAlign = "right",
|
ContentAlign = "right",
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<div className="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div className="card h-100">
|
<div class="card h-100">
|
||||||
<div className="card-body text-body d-flex flex-column justify-content-between h-100">
|
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
|
||||||
<div className="mb-4">
|
<div class="mb-4">
|
||||||
<img
|
<img
|
||||||
src={ImageUrl}
|
src={ImageUrl}
|
||||||
alt="client logo"
|
alt="client logo"
|
||||||
className="client-logo img-fluid"
|
class="client-logo img-fluid"
|
||||||
style={{ width: "580px", height: "100px" }}
|
style={{ width: "580px", height: "100px" }}
|
||||||
/>
|
/>
|
||||||
<h5>{Title}</h5>
|
<h5>{Title}</h5>
|
||||||
</div>
|
</div>
|
||||||
<p>{Body}</p>
|
<p>{Body}</p>
|
||||||
<div className="text-warning mb-4">
|
<div class="text-warning mb-4">
|
||||||
<i className="bx bxs-star"></i>
|
<i class="bx bxs-star"></i>
|
||||||
<i className="bx bxs-star"></i>
|
<i class="bx bxs-star"></i>
|
||||||
<i className="bx bxs-star"></i>
|
<i class="bx bxs-star"></i>
|
||||||
<i className="bx bxs-star"></i>
|
<i class="bx bxs-star"></i>
|
||||||
<i className="bx bxs-star"></i>
|
<i class="bx bxs-star"></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<div className="avatar me-3 avatar-sm">
|
<div class="avatar me-3 avatar-sm">
|
||||||
<img
|
<img
|
||||||
src="../../assets/img/avatars/1.png"
|
src="../../assets/img/avatars/1.png"
|
||||||
alt="Avatar"
|
alt="Avatar"
|
||||||
className="rounded-circle"
|
class="rounded-circle"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h6 className="mb-0">Cecilia Payne</h6>
|
<h6 class="mb-0">Cecilia Payne</h6>
|
||||||
<p className="small text-muted mb-0">CEO of Airbnb</p>
|
<p class="small text-muted mb-0">CEO of Airbnb</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -9,7 +9,6 @@ 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 = () => {
|
||||||
@ -26,15 +25,12 @@ 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,
|
||||||
@ -80,10 +76,6 @@ 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">
|
||||||
@ -100,8 +92,7 @@ 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-md-8 col-sm-12 mb-2 mb-md-0">
|
<div className="col-6">
|
||||||
<div className="d-flex align-items-center flex-wrap gap-0">
|
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
className="form-control form-control-sm w-auto"
|
className="form-control form-control-sm w-auto"
|
||||||
@ -111,8 +102,8 @@ const PaymentRequestPage = () => {
|
|||||||
onChange={(e) => setSearch(e.target.value)}
|
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"
|
||||||
@ -128,49 +119,7 @@ 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>
|
||||||
@ -180,8 +129,6 @@ const PaymentRequestPage = () => {
|
|||||||
filterData={filterData}
|
filterData={filterData}
|
||||||
removeFilterChip={handleRemoveChip}
|
removeFilterChip={handleRemoveChip}
|
||||||
clearFilter={clearFilter}
|
clearFilter={clearFilter}
|
||||||
tableRef={tableRef}
|
|
||||||
onDataFiltered={setFilteredData}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Add/Edit Modal */}
|
{/* Add/Edit Modal */}
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
import React, { createContext, useState, useEffect, useContext, useRef } from "react";
|
import React, { createContext, useState, useEffect, useContext } 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 { defaultRecurringExpense, SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
|
import { 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 = () => {
|
||||||
@ -24,12 +23,6 @@ const RecurringExpensePage = () => {
|
|||||||
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,
|
||||||
@ -51,12 +44,6 @@ 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">
|
||||||
@ -69,8 +56,8 @@ const RecurringExpensePage = () => {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Top Bar */}
|
{/* Top Bar */}
|
||||||
<div className="card my-3 px-sm-0 px-0">
|
<div className="card my-3 px-sm-4 px-0">
|
||||||
<div className="card-body py-2 px-5">
|
<div className="card-body py-2 px-1 mx-2">
|
||||||
<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">
|
||||||
@ -112,8 +99,8 @@ const RecurringExpensePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right Column: Add Button + 3-Dots Menu */}
|
{/* Right Column: Add Button */}
|
||||||
<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-md-4 col-sm-12 text-md-end text-end">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-primary"
|
className="btn btn-sm btn-primary"
|
||||||
type="button"
|
type="button"
|
||||||
@ -129,49 +116,7 @@ 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>
|
||||||
@ -179,8 +124,6 @@ const RecurringExpensePage = () => {
|
|||||||
<RecurringExpenseList
|
<RecurringExpenseList
|
||||||
filterStatuses={selectedStatuses}
|
filterStatuses={selectedStatuses}
|
||||||
search={search}
|
search={search}
|
||||||
tableRef={tableRef}
|
|
||||||
onDataFiltered={setFilteredData}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{ManageRequest.IsOpen && (
|
{ManageRequest.IsOpen && (
|
||||||
|
|||||||
@ -59,10 +59,10 @@ const ForgotPasswordPage = () => {
|
|||||||
<div className="d-flex align-items-center justify-content-center ">
|
<div className="d-flex align-items-center justify-content-center ">
|
||||||
<img src="/img/brand/marco.png" width="70" />
|
<img src="/img/brand/marco.png" width="70" />
|
||||||
<Link aria-label="Go to Home Page" to="/">
|
<Link aria-label="Go to Home Page" to="/">
|
||||||
<span className="app-brand-logo ">
|
<span class="app-brand-logo ">
|
||||||
<span className="text-blue fs-4">OnField</span>
|
<span class="text-blue fs-4">OnField</span>
|
||||||
<span className="text-green fs-4">Work</span>
|
<span className="text-green fs-4">Work</span>
|
||||||
<span className="text-dark fs-4">.com</span>
|
<span class="text-dark fs-4">.com</span>
|
||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -90,16 +90,16 @@ const LoginPage = () => {
|
|||||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top p-4 p-sm-5 bg-gray-60">
|
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top p-4 p-sm-5 bg-gray-60">
|
||||||
<div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
|
<div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
|
||||||
<Link aria-label="Go to Home Page" to="/">
|
<Link aria-label="Go to Home Page" to="/">
|
||||||
<span className="app-brand-logo rounded-circle">
|
<span class="app-brand-logo rounded-circle">
|
||||||
<img src="/img/brand/marco.png" width="70" />
|
<img src="/img/brand/marco.png" width="70" />
|
||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
<span className="text-dark fs-5">Welcome to</span> <br />
|
<span class="text-dark fs-5">Welcome to</span> <br />
|
||||||
<h4 className="mb-2 ">
|
<h4 className="mb-2 ">
|
||||||
{" "}
|
{" "}
|
||||||
<span className="text-blue ms-1">OnField</span>
|
<span class="text-blue ms-1">OnField</span>
|
||||||
<span className="text-green">Work</span>
|
<span className="text-green">Work</span>
|
||||||
<span className="text-dark">.com</span>
|
<span class="text-dark">.com</span>
|
||||||
</h4>
|
</h4>
|
||||||
</Link>
|
</Link>
|
||||||
<p className="mb-4">
|
<p className="mb-4">
|
||||||
|
|||||||
@ -8,17 +8,17 @@ const MainLogin = () => {
|
|||||||
<div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
|
<div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
|
||||||
{/* <div className="w-75 text-start" style={{ marginTop: "75px" }}> */}
|
{/* <div className="w-75 text-start" style={{ marginTop: "75px" }}> */}
|
||||||
<div
|
<div
|
||||||
className="w-75 text-start swiper-container login-pg-swiper"
|
class="w-75 text-start swiper-container login-pg-swiper"
|
||||||
style={{ marginTop: "75px" }}
|
style={{ marginTop: "75px" }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
id="textCarousel"
|
id="textCarousel"
|
||||||
className="carousel slide"
|
class="carousel slide"
|
||||||
data-bs-ride="carousel"
|
data-bs-ride="carousel"
|
||||||
>
|
>
|
||||||
<div className="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div className="carousel-item active">
|
<div class="carousel-item active">
|
||||||
<div className="p-5 text-center">
|
<div class="p-5 text-center">
|
||||||
<p>
|
<p>
|
||||||
<img
|
<img
|
||||||
className="w-100 login-pg-img-swiper"
|
className="w-100 login-pg-img-swiper"
|
||||||
@ -27,8 +27,8 @@ const MainLogin = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="carousel-item active">
|
<div class="carousel-item active">
|
||||||
<div className="p-5 text-center">
|
<div class="p-5 text-center">
|
||||||
<p>
|
<p>
|
||||||
<img
|
<img
|
||||||
className="w-100 login-pg-img-swiper"
|
className="w-100 login-pg-img-swiper"
|
||||||
@ -37,8 +37,8 @@ const MainLogin = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="carousel-item ">
|
<div class="carousel-item ">
|
||||||
<div className="p-5 ">
|
<div class="p-5 ">
|
||||||
<p>
|
<p>
|
||||||
<div className="text-start">
|
<div className="text-start">
|
||||||
<h3 className="display-header text-black">
|
<h3 className="display-header text-black">
|
||||||
@ -112,8 +112,8 @@ const MainLogin = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="carousel-item">
|
<div class="carousel-item">
|
||||||
<div className="p-5 text-center ">
|
<div class="p-5 text-center ">
|
||||||
<p className="text-start">
|
<p className="text-start">
|
||||||
<div className="text-start">
|
<div className="text-start">
|
||||||
<h1 className="display-header text-black">
|
<h1 className="display-header text-black">
|
||||||
@ -196,8 +196,8 @@ const MainLogin = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="carousel-item">
|
<div class="carousel-item">
|
||||||
<div className="p-5 text-center ">
|
<div class="p-5 text-center ">
|
||||||
<p className="text-start">
|
<p className="text-start">
|
||||||
<div className="text-start">
|
<div className="text-start">
|
||||||
<h1 className="display-header text-black">
|
<h1 className="display-header text-black">
|
||||||
@ -264,28 +264,28 @@ const MainLogin = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="carousel-control-prev"
|
class="carousel-control-prev"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-target="#textCarousel"
|
data-bs-target="#textCarousel"
|
||||||
data-bs-slide="prev"
|
data-bs-slide="prev"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="carousel-control-prev-icon"
|
class="carousel-control-prev-icon"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></span>
|
></span>
|
||||||
<span className="visually-hidden">Previous</span>
|
<span class="visually-hidden">Previous</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="carousel-control-next"
|
class="carousel-control-next"
|
||||||
type="button"
|
type="button"
|
||||||
data-bs-target="#textCarousel"
|
data-bs-target="#textCarousel"
|
||||||
data-bs-slide="next"
|
data-bs-slide="next"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="carousel-control-next-icon"
|
class="carousel-control-next-icon"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></span>
|
></span>
|
||||||
<span className="visually-hidden">Next</span>
|
<span class="visually-hidden">Next</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -84,10 +84,10 @@ const RegisterPage = () => {
|
|||||||
<div className="d-flex align-items-center justify-content-center ">
|
<div className="d-flex align-items-center justify-content-center ">
|
||||||
<img src="/img/brand/marco.png" width="50" />
|
<img src="/img/brand/marco.png" width="50" />
|
||||||
<Link aria-label="Go to Home Page" to="/">
|
<Link aria-label="Go to Home Page" to="/">
|
||||||
<span className="app-brand-logo ">
|
<span class="app-brand-logo ">
|
||||||
<span className="text-blue fs-4">OnField</span>
|
<span class="text-blue fs-4">OnField</span>
|
||||||
<span className="text-green fs-4">Work</span>
|
<span className="text-green fs-4">Work</span>
|
||||||
<span className="text-dark fs-4">.com</span>
|
<span class="text-dark fs-4">.com</span>
|
||||||
</span>
|
</span>
|
||||||
<br />
|
<br />
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@ -298,7 +298,31 @@ 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">
|
||||||
{/* {showAllEmployees && ( */}
|
{/* All Employees Switch */}
|
||||||
|
|
||||||
|
{/* Show Inactive Employees Switch */}
|
||||||
|
|
||||||
|
<div className="form-check form-switch text-start">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="form-check-input"
|
||||||
|
role="switch"
|
||||||
|
id="inactiveEmployeesCheckbox"
|
||||||
|
checked={showInactive}
|
||||||
|
onChange={(e) => setShowInactive(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="form-check-label ms-0"
|
||||||
|
htmlFor="inactiveEmployeesCheckbox"
|
||||||
|
>
|
||||||
|
{showInactive ? "Hide In-active Employees":"Show In-active Employees"}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right side: Search + Export + Add Employee */}
|
||||||
|
<div className="d-flex flex-wrap align-items-center justify-content-start justify-content-md-end gap-3 flex-grow-1">
|
||||||
|
{/* Search Input - ALWAYS ENABLED */}
|
||||||
<div className="dataTables_filter">
|
<div className="dataTables_filter">
|
||||||
<label className="mb-0">
|
<label className="mb-0">
|
||||||
<input
|
<input
|
||||||
@ -312,11 +336,57 @@ const EmployeeList = () => {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* )} */}
|
{/* Export Dropdown */}
|
||||||
|
<div className="dropdown">
|
||||||
|
<button
|
||||||
|
aria-label="Click me"
|
||||||
|
className="btn btn-sm btn-label-secondary dropdown-toggle"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i className="bx bx-export me-2 bx-sm"></i>Export
|
||||||
|
</button>
|
||||||
|
<ul className="dropdown-menu">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("print")}
|
||||||
|
>
|
||||||
|
<i className="bx bx-printer me-1"></i> Print
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("csv")}
|
||||||
|
>
|
||||||
|
<i className="bx bx-file me-1"></i> CSV
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("excel")}
|
||||||
|
>
|
||||||
|
<i className="bx bxs-file-export me-1"></i> Excel
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
className="dropdown-item"
|
||||||
|
href="#"
|
||||||
|
onClick={() => handleExport("pdf")}
|
||||||
|
>
|
||||||
|
<i className="bx bxs-file-pdf me-1"></i> PDF
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Right side: Search + Add Employee + Options */}
|
|
||||||
<div className="d-flex flex-wrap align-items-center justify-content-end flex-grow-1">
|
|
||||||
{/* Add Employee Button */}
|
{/* Add Employee Button */}
|
||||||
{Manage_Employee && (
|
{Manage_Employee && (
|
||||||
<button
|
<button
|
||||||
@ -330,60 +400,7 @@ 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>
|
</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>
|
||||||
|
|
||||||
<table
|
<table
|
||||||
|
|||||||
@ -24,9 +24,6 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
|
|||||||
|
|
||||||
import "./ProjectDetails.css";
|
import "./ProjectDetails.css";
|
||||||
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
|
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
|
||||||
import ProjectStatistics from "../../components/Project/ProjectStatistics";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
|
|
||||||
|
|
||||||
const ProjectDetails = () => {
|
const ProjectDetails = () => {
|
||||||
const projectId = useSelectedProject();
|
const projectId = useSelectedProject();
|
||||||
@ -37,10 +34,6 @@ const ProjectDetails = () => {
|
|||||||
useProjectDetails(projectId);
|
useProjectDetails(projectId);
|
||||||
|
|
||||||
const { canView, loading: permsLoading } = useProjectAccess(projectId);
|
const { canView, loading: permsLoading } = useProjectAccess(projectId);
|
||||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
|
||||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
|
||||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!projectId && projectNames.length > 0) {
|
if (!projectId && projectNames.length > 0) {
|
||||||
@ -89,16 +82,13 @@ const ProjectDetails = () => {
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-lg-4 col-md-5 mt-2">
|
<div className="col-lg-4 col-md-5 mt-2">
|
||||||
<AboutProject />
|
<AboutProject />
|
||||||
<div className="card"><ProjectStatistics project={projectId} /></div>
|
<ProjectOverview project={projectId} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-lg-8 col-md-7 mt-2">
|
<div className="col-lg-8 col-md-7 mt-2">
|
||||||
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
||||||
{(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
|
||||||
<div className="mt-5">
|
<div className="mt-5">
|
||||||
<AttendanceOverview />
|
<AttendanceOverview />
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,192 +0,0 @@
|
|||||||
import React, { createContext, useContext, useState } from "react";
|
|
||||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
||||||
import showToast from "../../services/toastService";
|
|
||||||
import GlobalModel from "../../components/common/GlobalModel";
|
|
||||||
import ManagePurchase from "../../components/purchase/ManagePurchase";
|
|
||||||
import PurchaseList from "../../components/purchase/PurchaseList";
|
|
||||||
import ViewPurchase from "../../components/purchase/ViewPurchase";
|
|
||||||
import DeliveryChallane from "../../components/purchase/DeliveryChallane";
|
|
||||||
import PurchasePayment from "../../components/purchase/PurchasePayment";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import { MANAGEPURCHASE_INVOICE } from "../../utils/constants";
|
|
||||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
|
||||||
|
|
||||||
export const PurchaseContext = createContext();
|
|
||||||
export const usePurchaseContext = () => {
|
|
||||||
let context = useContext(PurchaseContext);
|
|
||||||
|
|
||||||
if (!context) {
|
|
||||||
showToast("Please use Innne cntext", "warning");
|
|
||||||
window.location = "/dashboard";
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
const PurchasePage = () => {
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [showDelete, setShowDelete] = useState(false);
|
|
||||||
const [showInactive, setShowInactive] = useState(false);
|
|
||||||
const [addChallan, setChallan] = useState({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
});
|
|
||||||
const [managePurchase, setManagePurchase] = useState({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
});
|
|
||||||
const [addPayment, setAddPayment] = useState({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
});
|
|
||||||
const [viewPurchaseState, setViewPurchase] = useState({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
});
|
|
||||||
const [ViewDocument,setDocumentView] = useState({ IsOpen: false, Images: null })
|
|
||||||
|
|
||||||
const canCreatePurchase = useHasUserPermission(MANAGEPURCHASE_INVOICE);
|
|
||||||
|
|
||||||
const contextValue = {
|
|
||||||
setViewPurchase,
|
|
||||||
setManagePurchase,
|
|
||||||
setChallan,
|
|
||||||
setAddPayment,
|
|
||||||
setDocumentView
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<PurchaseContext.Provider value={contextValue}>
|
|
||||||
<div className="container-fluid">
|
|
||||||
<Breadcrumb
|
|
||||||
data={[
|
|
||||||
{ label: "Home", link: "/dashboard" },
|
|
||||||
{ label: "Procurement & Inventory", link: "/purchase-invoice" },
|
|
||||||
{ label: "Purchase" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<div className="card px-sm-4 my-3">
|
|
||||||
<div className="row p-2">
|
|
||||||
<div className="col-12 col-sm-6 text-start">
|
|
||||||
{" "}
|
|
||||||
<label className="mb-0">
|
|
||||||
<input
|
|
||||||
type="search"
|
|
||||||
value={searchText}
|
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
|
||||||
className="form-control form-control-sm"
|
|
||||||
placeholder="Search Purchase"
|
|
||||||
aria-controls="DataTables_Table_0"
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
<div className="form-check form-switch d-inline-flex align-items-center ms-3">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
className="form-check-input"
|
|
||||||
id="inactiveEmployeesCheckbox"
|
|
||||||
checked={showInactive}
|
|
||||||
onChange={() => setShowInactive(!showInactive)}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
htmlFor="inactiveEmployeesCheckbox"
|
|
||||||
className="ms-2 text-xs"
|
|
||||||
>
|
|
||||||
{!showInactive ? "Show Deleted" : "Hide Deleted"}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-sm-6 text-end">
|
|
||||||
{canCreatePurchase && (
|
|
||||||
<button
|
|
||||||
className="btn btn-sm btn-primary"
|
|
||||||
onClick={() =>
|
|
||||||
setManagePurchase({
|
|
||||||
isOpen: true,
|
|
||||||
purchaseId: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<i className="bx bx-plus-circle me-2"></i>Add
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<PurchaseList searchString={searchText} isActive={showInactive} />
|
|
||||||
{managePurchase.isOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen={managePurchase.isOpen}
|
|
||||||
size="lg"
|
|
||||||
closeModal={() =>
|
|
||||||
setManagePurchase({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ManagePurchase
|
|
||||||
onClose={() =>
|
|
||||||
setManagePurchase({
|
|
||||||
isOpen: false,
|
|
||||||
purchaseId: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
purchaseId={managePurchase.purchaseId}
|
|
||||||
/>
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{viewPurchaseState.isOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen={viewPurchaseState.isOpen}
|
|
||||||
size="lg"
|
|
||||||
closeModal={() =>
|
|
||||||
setViewPurchase({ isOpen: false, purchaseId: null })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ViewPurchase purchaseId={viewPurchaseState.purchaseId} />
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{addChallan.isOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
size="xl"
|
|
||||||
isOpen={addChallan.isOpen}
|
|
||||||
closeModal={() => setChallan({ isOpen: false, purchaseId: null })}
|
|
||||||
>
|
|
||||||
<DeliveryChallane
|
|
||||||
purchaseId={addChallan.purchaseId}
|
|
||||||
onClose={() => setChallan({ isOpen: false, purchaseId: null })}
|
|
||||||
/>
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{addPayment.isOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
size="xl"
|
|
||||||
isOpen={addPayment.isOpen}
|
|
||||||
closeModal={() =>
|
|
||||||
setAddPayment({ isOpen: false, purchaseId: null })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<PurchasePayment
|
|
||||||
onClose={() => setAddPayment({ isOpen: false, purchaseId: null })}
|
|
||||||
purchaseId={addPayment.purchaseId}
|
|
||||||
/>
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{ViewDocument.IsOpen && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen
|
|
||||||
size="md"
|
|
||||||
key={ViewDocument.Images ?? "doc"}
|
|
||||||
closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
|
|
||||||
>
|
|
||||||
<PreviewDocument files={ViewDocument.Images} />
|
|
||||||
</GlobalModel>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</PurchaseContext.Provider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PurchasePage;
|
|
||||||
@ -157,7 +157,4 @@ export const MasterRespository = {
|
|||||||
),
|
),
|
||||||
|
|
||||||
getTeamRole: () => api.get(`/api/Master/team-roles/list`),
|
getTeamRole: () => api.get(`/api/Master/team-roles/list`),
|
||||||
|
|
||||||
|
|
||||||
getInvoiceAttachmentTypes:()=>api.get("/api/Master/invoice-attachment-type/list")
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,8 +2,7 @@ import { api } from "../utils/axiosClient";
|
|||||||
|
|
||||||
const OrganizationRepository = {
|
const OrganizationRepository = {
|
||||||
createOrganization: (data) => api.post("/api/Organization/create", data),
|
createOrganization: (data) => api.post("/api/Organization/create", data),
|
||||||
updateOrganizaion: (id, data) =>
|
updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`,data),
|
||||||
api.put(`/api/Organization/edit/${id}`, data),
|
|
||||||
getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
|
getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
|
||||||
getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
|
getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
|
||||||
return api.get(
|
return api.get(
|
||||||
@ -40,13 +39,6 @@ const OrganizationRepository = {
|
|||||||
|
|
||||||
return api.get(url);
|
return api.get(url);
|
||||||
},
|
},
|
||||||
|
|
||||||
getGlobalOrganization: (pageSize, pageNumber, searchString, id) =>
|
|
||||||
api.get(
|
|
||||||
`/api/Organization/list/basic?pageSize=${pageSize}&pageNumber=${pageNumber}${
|
|
||||||
id ? `&id=${id}` : ""
|
|
||||||
}&searchString=${searchString}`
|
|
||||||
),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OrganizationRepository;
|
export default OrganizationRepository;
|
||||||
|
|||||||
@ -1,28 +0,0 @@
|
|||||||
import { api } from "../utils/axiosClient";
|
|
||||||
|
|
||||||
export const PurchaseRepository = {
|
|
||||||
CreatePurchase: (data) => api.post("/api/PurchaseInvoice/create", data),
|
|
||||||
GetPurchaseList: (pageSize, pageNumber, isActive, filter, searchString) =>
|
|
||||||
api.get(
|
|
||||||
`/api/PurchaseInvoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&filter=${filter}&searchString=${searchString}`
|
|
||||||
),
|
|
||||||
|
|
||||||
GetPurchase: (id) => api.get(`/api/PurchaseInvoice/details/${id}`),
|
|
||||||
UpdatePurchase: (id, data) =>
|
|
||||||
api.patch(`/api/PurchaseInvoice/edit/${id}`, data),
|
|
||||||
GetDeliveryChallan: (purchaseInvoiceId) =>
|
|
||||||
api.get(`/api/PurchaseInvoice/delivery-challan/list/${purchaseInvoiceId}`),
|
|
||||||
addDelievryChallan: (data) =>
|
|
||||||
api.post(`/api/PurchaseInvoice/delivery-challan/create`, data),
|
|
||||||
|
|
||||||
AddPayment: (data) => api.post(`/api/PurchaseInvoice/add/payment`, data),
|
|
||||||
GetPaymentHistory: (purchaseInvoiceId) =>
|
|
||||||
api.get(`/api/PurchaseInvoice/payment-history/list/${purchaseInvoiceId}`),
|
|
||||||
deletePurchase: (id, isActive = false) =>
|
|
||||||
api.delete(`/api/PurchaseInvoice/delete/${id}?isActive=${isActive}`),
|
|
||||||
};
|
|
||||||
|
|
||||||
// const filterPayload = JSON.stringify({
|
|
||||||
// sortFilters,
|
|
||||||
// groupByColumn: groupBy || null,
|
|
||||||
// });
|
|
||||||
@ -58,11 +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 AdvancePaymentPageDetails from "../pages/AdvancePayment/AdvancePaymentPageDetails";
|
import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1";
|
||||||
import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
|
|
||||||
import PurchasePage from "../pages/purchase/PurchasePage";
|
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter(
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
@ -114,20 +113,13 @@ const router = createBrowserRouter(
|
|||||||
{ path: "/activities/task", element: <TaskPlannng /> },
|
{ path: "/activities/task", element: <TaskPlannng /> },
|
||||||
{ path: "/activities/reports", element: <Reports /> },
|
{ path: "/activities/reports", element: <Reports /> },
|
||||||
{ path: "/gallary", element: <ImageGalleryPage /> },
|
{ path: "/gallary", element: <ImageGalleryPage /> },
|
||||||
|
|
||||||
// Finance
|
|
||||||
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
||||||
{ 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", element: <AdvancePaymentPage /> },
|
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPage /> },
|
||||||
{ path: "/advance-payment/:employeeId", element: <AdvancePaymentPageDetails /> },
|
|
||||||
{ path: "/collection", element: <CollectionPage /> },
|
{ path: "/collection", element: <CollectionPage /> },
|
||||||
|
|
||||||
// Purchases and Inventory
|
|
||||||
{ path: "/purchase-invoice", element: <PurchasePage /> },
|
|
||||||
// Administration
|
|
||||||
{ path: "/masters", element: <MasterPage /> },
|
{ path: "/masters", element: <MasterPage /> },
|
||||||
{ path: "/tenants", element: <TenantPage /> },
|
{ path: "/tenants", element: <TenantPage /> },
|
||||||
{ path: "/tenants/new-tenant", element: <CreateTenant /> },
|
{ path: "/tenants/new-tenant", element: <CreateTenant /> },
|
||||||
|
|||||||
@ -2,15 +2,15 @@ export const blockUI = (message = 'Please wait...') => {
|
|||||||
if (window.$ && window.$.blockUI) {
|
if (window.$ && window.$.blockUI) {
|
||||||
window.$.blockUI({
|
window.$.blockUI({
|
||||||
message: `
|
message: `
|
||||||
<div className="d-flex flex-column align-items-center">
|
<div class="d-flex flex-column align-items-center">
|
||||||
<div className="sk-wave mb-2">
|
<div class="sk-wave mb-2">
|
||||||
<div className="sk-wave-rect"></div>
|
<div class="sk-wave-rect"></div>
|
||||||
<div className="sk-wave-rect"></div>
|
<div class="sk-wave-rect"></div>
|
||||||
<div className="sk-wave-rect"></div>
|
<div class="sk-wave-rect"></div>
|
||||||
<div className="sk-wave-rect"></div>
|
<div class="sk-wave-rect"></div>
|
||||||
<div className="sk-wave-rect"></div>
|
<div class="sk-wave-rect"></div>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-white">${message}</p>
|
<p class="text-white">${message}</p>
|
||||||
</div>`,
|
</div>`,
|
||||||
css: {
|
css: {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
|
|||||||
@ -2,6 +2,7 @@ export const BASE_URL = process.env.VITE_BASE_URL;
|
|||||||
|
|
||||||
// export const BASE_URL = "https://api.marcoaiot.com";
|
// export const BASE_URL = "https://api.marcoaiot.com";
|
||||||
|
|
||||||
|
|
||||||
export const THRESH_HOLD = 48; // hours
|
export const THRESH_HOLD = 48; // hours
|
||||||
export const DURATION_TIME = 10; // minutes
|
export const DURATION_TIME = 10; // minutes
|
||||||
export const ITEMS_PER_PAGE = 20;
|
export const ITEMS_PER_PAGE = 20;
|
||||||
@ -65,6 +66,8 @@ export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
|
|||||||
|
|
||||||
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
|
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// --------------------------------Collection----------------------------
|
// --------------------------------Collection----------------------------
|
||||||
|
|
||||||
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
|
export const ADMIN_COLLECTION = "dbf17591-09fe-4c93-9e1a-12db8f5cc5de";
|
||||||
@ -73,13 +76,6 @@ export const CREATE_COLLECTION = "b93141fd-dbd3-4051-8f57-bf25d18e3555";
|
|||||||
export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
|
export const EDIT_COLLECTION = "455187b4-fef1-41f9-b3d0-025d0b6302c3";
|
||||||
export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
|
export const ADDPAYMENT_COLLECTION = "061d9ccd-85b4-4cb0-be06-2f9f32cebb72";
|
||||||
|
|
||||||
// --------------------Purchase Invoice--------------------------------
|
|
||||||
export const VIEWSELF_PURCHASEINVOICE = "91e09825-512a-465e-82ad-fa355b305585";
|
|
||||||
export const VIEWALL_PURCHASEINVOICE = "d6ae78d3-a941-4cc4-8d0a-d40479be4211";
|
|
||||||
export const MANAGEPURCHASE_INVOICE = "68ff925d-8ebf-4034-a137-8d3317c56ca1";
|
|
||||||
export const DELETEPURCHASE_INVOICE = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
|
|
||||||
export const ADD_DELIVERY_CHALLAN = "a4b77638-bf31-42bb-afd4-d5bbd15ccadc";
|
|
||||||
|
|
||||||
// ----------------------------Tenant-------------------------
|
// ----------------------------Tenant-------------------------
|
||||||
export const SUPPER_TENANT = "d032cb1a-3f30-462c-bef0-7ace73a71c0b";
|
export const SUPPER_TENANT = "d032cb1a-3f30-462c-bef0-7ace73a71c0b";
|
||||||
export const MANAGE_TENANTS = "00e20637-ce8d-4417-bec4-9b31b5e65092";
|
export const MANAGE_TENANTS = "00e20637-ce8d-4417-bec4-9b31b5e65092";
|
||||||
@ -102,7 +98,7 @@ export const EXPENSE_REJECTEDBY = [
|
|||||||
];
|
];
|
||||||
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
|
export const EXPENSE_DRAFT = "297e0d8f-f668-41b5-bfea-e03b354251c8";
|
||||||
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
|
export const EXPENSE_MANAGEMENT = "a4e25142-449b-4334-a6e5-22f70e4732d7";
|
||||||
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3";
|
export const EXPENSE_CREATE = "b8586f67-dc19-49c3-b4af-224149efe1d3"
|
||||||
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
|
export const INR_CURRENCY_CODE = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
|
||||||
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
|
export const EXPENSE_PROCESSED = "61578360-3a49-4c34-8604-7b35a3787b95";
|
||||||
export const TENANT_STATUS = [
|
export const TENANT_STATUS = [
|
||||||
@ -169,7 +165,7 @@ export const EXPENSE_STATUS = {
|
|||||||
approve_pending: "4068007f-c92f-4f37-a907-bc15fe57d4d8",
|
approve_pending: "4068007f-c92f-4f37-a907-bc15fe57d4d8",
|
||||||
payment_processed: "61578360-3a49-4c34-8604-7b35a3787b95",
|
payment_processed: "61578360-3a49-4c34-8604-7b35a3787b95",
|
||||||
payment_done: "b8586f67-dc19-49c3-b4af-224149efe1d3",
|
payment_done: "b8586f67-dc19-49c3-b4af-224149efe1d3",
|
||||||
};
|
}
|
||||||
|
|
||||||
export const UUID_REGEX =
|
export const UUID_REGEX =
|
||||||
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
|
/^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
|
||||||
@ -188,7 +184,7 @@ export const FREQUENCY_FOR_RECURRING = {
|
|||||||
2: "Half-Yearly",
|
2: "Half-Yearly",
|
||||||
3: "Yearly",
|
3: "Yearly",
|
||||||
4: "Daily",
|
4: "Daily",
|
||||||
5: "Weekly",
|
5: "Weekly"
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PAYEE_RECURRING_EXPENSE = [
|
export const PAYEE_RECURRING_EXPENSE = [
|
||||||
@ -210,8 +206,9 @@ export const PAYEE_RECURRING_EXPENSE = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
//#region Service Project and Jobs
|
//#region Service Project and Jobs
|
||||||
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69";
|
export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69"
|
||||||
|
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
|||||||
27
src/utils/exportUtils.js
Normal file
27
src/utils/exportUtils.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// 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();
|
||||||
|
};
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user