Compare commits
1 Commits
Weidget_Da
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 96bcdffdca |
@ -1,7 +1,7 @@
|
||||
<!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">
|
||||
<!-- layout-menu-collapsed layout-menu-hover -->
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
@ -11,19 +11,6 @@
|
||||
top: var(--sticky-top, 0px) !important;
|
||||
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 %========================================================== */
|
||||
@ -235,10 +222,6 @@ font-weight: normal;
|
||||
.h-min { height: min-content; }
|
||||
.h-max { height: max-content; }
|
||||
|
||||
.vh-50 {
|
||||
height: 50vh !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -473,63 +456,3 @@ font-weight: normal;
|
||||
.fs-md-xlarge { font-size: 170% !important; }
|
||||
.fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
|
||||
}
|
||||
/* ====================== Thin Scrollbar (Global) ====================== */
|
||||
|
||||
.job-scroll-wrapper {
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
|
||||
/* Firefox thin scrollbar */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #c8c8c8 transparent;
|
||||
}
|
||||
|
||||
/* Chrome, Edge, Safari */
|
||||
.job-scroll-wrapper::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: #c8c8c8;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.job-scroll-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #a0a0a0;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f0f0f0;
|
||||
/* light grey track */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #b3b3b3;
|
||||
/* grey handle */
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #8e8e8e;
|
||||
/* darker grey on hover */
|
||||
}
|
||||
|
||||
/* For Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #b3b3b3 #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* For Chrome, Edge, Safari */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.app-brand-text {
|
||||
font-size: 1rem;
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: -0.5px;
|
||||
/* 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 [currentPage, setCurrentPage] = useState(1);
|
||||
// const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
const maxPage = Math.max(1, Math.ceil(data.length / itemsPerPage));
|
||||
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||
const currentItems = useMemo(() => {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return data.slice(startIndex, endIndex);
|
||||
}, [data, currentPage, itemsPerPage]);
|
||||
|
||||
// const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
|
||||
const paginate = useCallback((pageNumber) => {
|
||||
// keep page within 1..maxPage
|
||||
const p = Math.max(1, Math.min(pageNumber, maxPage));
|
||||
setCurrentPage(p);
|
||||
}, [maxPage]);
|
||||
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||
|
||||
return {
|
||||
@ -43,7 +36,6 @@ const usePagination = (data, itemsPerPage) => {
|
||||
currentItems,
|
||||
paginate,
|
||||
resetPage,
|
||||
setCurrentPage,
|
||||
};
|
||||
};
|
||||
|
||||
@ -133,16 +125,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
resetPage,
|
||||
} = usePagination(filteredSearchData, 20);
|
||||
|
||||
// useEffect(() => {
|
||||
// resetPage();
|
||||
// }, [filteredSearchData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > totalPages) {
|
||||
paginate(totalPages || 1);
|
||||
}
|
||||
// NOTE: do NOT force reset to page 1 here — keep the same page if still valid
|
||||
}, [filteredSearchData, totalPages, currentPage, paginate]);
|
||||
resetPage();
|
||||
}, [filteredSearchData]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
@ -159,9 +144,10 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
||||
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
||||
);
|
||||
});
|
||||
resetPage();
|
||||
}
|
||||
},
|
||||
[selectedProject, dateRange]
|
||||
[selectedProject, dateRange, resetPage]
|
||||
);
|
||||
|
||||
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 } =
|
||||
useExpenseAllTransactionsList(searchString);
|
||||
const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||
const { setBalance } = useAdvancePaymentContext();
|
||||
const { data, isError, isLoading, error, isFetching } =
|
||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||
const records = Array.isArray(data) ? data : [];
|
||||
|
||||
const rows = data || [];
|
||||
const navigate = useNavigate();
|
||||
let currentBalance = 0;
|
||||
const rowsWithBalance = records.map((r) => {
|
||||
const isCredit = r.amount > 0;
|
||||
const credit = isCredit ? r.amount : 0;
|
||||
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||
currentBalance += credit - debit;
|
||||
return {
|
||||
id: r.id,
|
||||
description: r.title || "-",
|
||||
projectName: r.project?.name || "-",
|
||||
createdAt: r.createdAt,
|
||||
credit,
|
||||
debit,
|
||||
financeUId: r.financeUId,
|
||||
balance: currentBalance,
|
||||
};
|
||||
});
|
||||
|
||||
const 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} />
|
||||
useEffect(() => {
|
||||
if (!employeeId) {
|
||||
setBalance(null);
|
||||
return;
|
||||
}
|
||||
|
||||
<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 (rowsWithBalance.length > 0) {
|
||||
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
||||
} else {
|
||||
setBalance(0);
|
||||
}
|
||||
}, [employeeId, data, setBalance]);
|
||||
|
||||
if (isLoading) {
|
||||
if (!employeeId) {
|
||||
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 />
|
||||
</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 (
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
<div className="mx-2">
|
||||
<table className="table border-top dataTable text-nowrap align-middle">
|
||||
<thead>
|
||||
<div className="table-responsive">
|
||||
<table className="table align-middle">
|
||||
<thead className="table_header_border">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={`sorting ${col.align}`}>
|
||||
<th key={col.key} className={col.align}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{rows.length > 0 ? (
|
||||
rows.map((row) => (
|
||||
<tr key={row.id} className="align-middle" style={{ height: "50px" }}>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
||||
{col.customRender
|
||||
? col.customRender(row)
|
||||
: col.getValue(row)}
|
||||
<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 border-0 py-3">
|
||||
No Employees Found
|
||||
<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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
@ -42,12 +42,7 @@ const HorizontalBarChart = ({
|
||||
categories.length === seriesData.length;
|
||||
|
||||
if (!hasValidData) {
|
||||
return <div
|
||||
className="d-flex justify-content-center align-items-center text-muted"
|
||||
style={{ height: "300px" }}
|
||||
>
|
||||
No data found
|
||||
</div>
|
||||
return <div className="text-center text-gray-500">No data to display</div>;
|
||||
}
|
||||
// Combine seriesData and categories, then sort in descending order
|
||||
const combined = seriesData.map((value, index) => ({
|
||||
|
||||
@ -39,12 +39,14 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
dateTo: localToUtc(formData.dateTo),
|
||||
};
|
||||
handleFilter(filterPayload);
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
setResetKey((prev) => prev + 1);
|
||||
handleFilter(TaskReportDefaultValue);
|
||||
reset(TaskReportDefaultValue);
|
||||
closePanel();
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
|
||||
@ -147,13 +147,13 @@ const TaskReportList = () => {
|
||||
data-bs-placement="left"
|
||||
data-bs-html="true"
|
||||
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
|
||||
.map(
|
||||
(m) => `
|
||||
<div className="d-flex align-items-center gap-2 mb-2">
|
||||
<div className="avatar avatar-xs">
|
||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
||||
}
|
||||
</span>
|
||||
@ -204,34 +204,24 @@ const TaskReportList = () => {
|
||||
<HoverPopup
|
||||
id="total_pending_task"
|
||||
title="Total Pending Task"
|
||||
content={
|
||||
<div className="text-wrap" style={{ minWidth: "200px" }}>
|
||||
This shows the total pending tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<span>
|
||||
Reported/Planned{" "}
|
||||
<HoverPopup
|
||||
id="reportes_and_planned_task"
|
||||
title="Reported and Planned Task"
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
This shows the reported versus planned tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>Assign Date</th>
|
||||
<th>Team</th>
|
||||
<th className="text-center">Actions</th>
|
||||
|
||||
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
|
||||
};
|
||||
|
||||
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 */}
|
||||
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
||||
<div className="card-title mb-0 text-start">
|
||||
|
||||
@ -1,344 +0,0 @@
|
||||
import React from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
import { useGetCollectionOverview } from "../../hooks/useDashboard_Data";
|
||||
import { formatFigure } from "../../utils/appUtils";
|
||||
|
||||
const CollectionOverview = ({ data, isLoading }) => {
|
||||
const borderColor = "#ddd";
|
||||
const labelColor = "#6c757d";
|
||||
|
||||
// Extract bucket values
|
||||
const labels = ["0–30 Days", "30–60 Days", "60–90 Days", "90+ Days"];
|
||||
|
||||
const amounts = [
|
||||
data.bucket0To30Amount,
|
||||
data.bucket30To60Amount,
|
||||
data.bucket60To90Amount,
|
||||
data.bucket90PlusAmount,
|
||||
];
|
||||
|
||||
// Colors (Zoho-style distributed)
|
||||
const colors = ["#7367F0", "#00cfe8", "#28c76f", "#ea5455"];
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 260,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: "65%",
|
||||
distributed: true,
|
||||
borderRadius: 8,
|
||||
startingShape: "rounded",
|
||||
},
|
||||
},
|
||||
|
||||
colors: colors,
|
||||
|
||||
grid: {
|
||||
borderColor: borderColor,
|
||||
strokeDashArray: 6,
|
||||
padding: { top: -10, bottom: -10 },
|
||||
xaxis: { lines: { show: true } },
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (_, opts) => labels[opts.dataPointIndex],
|
||||
style: {
|
||||
colors: ["#fff"],
|
||||
fontSize: "13px",
|
||||
fontWeight: 500,
|
||||
},
|
||||
offsetX: 0,
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
categories: amounts.map((a) => a),
|
||||
labels: {
|
||||
style: { colors: labelColor, fontSize: "12px" },
|
||||
formatter: (val) => `₹${val.toLocaleString()}`,
|
||||
},
|
||||
},
|
||||
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontSize: "13px",
|
||||
},
|
||||
formatter: () => "", // hide duplicate labels
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
custom: ({ series, seriesIndex, dataPointIndex }) => {
|
||||
return `
|
||||
<div class="px-2 py-1">
|
||||
<strong>${labels[dataPointIndex]}</strong><br>
|
||||
₹${series[seriesIndex][dataPointIndex].toLocaleString()}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
},
|
||||
|
||||
legend: { show: false },
|
||||
};
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: "Amount",
|
||||
data: amounts,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Chart options={options} series={series} type="bar" height={260} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollectionOverview;
|
||||
export const TopicBarChart = ({ data,isLoading }) => {
|
||||
const data1 = {
|
||||
totalDueAmount: 213590,
|
||||
totalCollectedAmount: 5000,
|
||||
totalValue: 218590,
|
||||
pendingPercentage: 97.71,
|
||||
collectedPercentage: 2.29,
|
||||
|
||||
bucket0To30Invoices: 10,
|
||||
bucket30To60Invoices: 4,
|
||||
bucket60To90Invoices: 2,
|
||||
bucket90PlusInvoices: 1,
|
||||
|
||||
bucket0To30Amount: 2130,
|
||||
bucket30To60Amount: 2003,
|
||||
bucket60To90Amount: 4500,
|
||||
bucket90PlusAmount: 8800,
|
||||
|
||||
topClientBalance: 55300,
|
||||
topClient: {
|
||||
id: "4e3a6d31-c640-40f7-8d67-6c109fcdb9ea",
|
||||
name: "Marco Secure Solutions Ltd.",
|
||||
email: "admin@marcoaiot.com",
|
||||
contactPerson: "Admin",
|
||||
address:
|
||||
"2nd Floor, Fullora Building, Tejas CHS, behind Kothrud Stand, Tejas Society, Dahanukar Colony, Kothrud, Pune, Maharashtra 411038",
|
||||
gstNumber: null,
|
||||
contactNumber: "123456789",
|
||||
sprid: 5400,
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = "#ddd";
|
||||
const labelColor = "#6c757d";
|
||||
|
||||
// COLORS
|
||||
const config = {
|
||||
colors: {
|
||||
b0: "#7367F0",
|
||||
b30: "#00cfe8",
|
||||
b60: "#28c76f",
|
||||
b90: "#ea5455",
|
||||
},
|
||||
};
|
||||
|
||||
// NEW LABELS (BUCKETS)
|
||||
const chartLabels = ["0–30 Days", "30–60 Days", "60–90 Days", "90+ Days"];
|
||||
|
||||
// NEW VALUES (BUCKET AMOUNT)
|
||||
const chartValues = [
|
||||
data.bucket0To30Amount,
|
||||
data.bucket30To60Amount,
|
||||
data.bucket60To90Amount,
|
||||
data.bucket90PlusAmount,
|
||||
];
|
||||
|
||||
const options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: "bar",
|
||||
toolbar: { show: false },
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: "40%",
|
||||
distributed: true,
|
||||
startingShape: "rounded",
|
||||
borderRadius: 7,
|
||||
},
|
||||
},
|
||||
|
||||
grid: {
|
||||
strokeDashArray: 10,
|
||||
borderColor,
|
||||
xaxis: { lines: { show: true } },
|
||||
yaxis: { lines: { show: false } },
|
||||
padding: { top: -35, bottom: -12 },
|
||||
},
|
||||
|
||||
colors: [
|
||||
config.colors.b0,
|
||||
config.colors.b30,
|
||||
config.colors.b60,
|
||||
config.colors.b90,
|
||||
],
|
||||
|
||||
labels: chartLabels,
|
||||
|
||||
fill: { opacity: 1 },
|
||||
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ["#fff"],
|
||||
fontWeight: 400,
|
||||
fontSize: "13px",
|
||||
fontFamily: "Public Sans",
|
||||
},
|
||||
formatter: (_, opts) => chartLabels[opts.dataPointIndex],
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
categories: chartValues.map((x) => formatFigure(x, { type: "currency" })),
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { show: false },
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontFamily: "Public Sans",
|
||||
fontSize: "13px",
|
||||
},
|
||||
formatter: (val) => `₹${Number(val).toLocaleString()}`,
|
||||
},
|
||||
},
|
||||
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: labelColor,
|
||||
fontFamily: "Public Sans",
|
||||
fontSize: "13px",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
custom: ({ series, seriesIndex, dataPointIndex }) => {
|
||||
return `
|
||||
<div class="px-3 py-2">
|
||||
<span>₹${series[seriesIndex][
|
||||
dataPointIndex
|
||||
].toLocaleString()}</span>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
},
|
||||
|
||||
legend: { show: false },
|
||||
};
|
||||
|
||||
const series = [
|
||||
{
|
||||
data: chartValues,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="row p-2">
|
||||
<div className="col-md-8">
|
||||
<div class="card-header d-flex align-items-center justify-content-between">
|
||||
<h5 class="card-title m-0 me-2">Collection Overview</h5>
|
||||
</div>
|
||||
<div className="w-100 d-flex align-items-center text-start px-6">
|
||||
<p className="text-secondary fs-6 m-0">Due Amount</p>
|
||||
<span className="ms-2 fs-5">
|
||||
{formatFigure(data.totalDueAmount, { type: "currency" })}
|
||||
</span>
|
||||
<p className="text-secondary fs-6 m-0 ms-1">Collected Amount</p>
|
||||
<span className="ms-2 fs-5">
|
||||
{formatFigure(data.totalCollectedAmount, { type: "currency" })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Chart options={options} series={series} type="bar" height={300} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-4 d-flex flex-column gap-2">
|
||||
<div class="card-header d-flex align-items-end justify-content-between"></div>
|
||||
<div className="p-1 m-1 text-start">
|
||||
<small className="fw-medium">Overdue Days</small>
|
||||
</div>
|
||||
|
||||
{/* 0–30 Days */}
|
||||
<div
|
||||
className="p-1 rounded-3 text-start mx-1"
|
||||
style={{
|
||||
background: "var(--bs-primary-bg-subtle)",
|
||||
borderLeft: "4px solid var(--bs-primary)",
|
||||
minWidth: "170px",
|
||||
}}
|
||||
>
|
||||
<h5 className="fw-bold mb-0">
|
||||
{formatFigure(data.bucket0To30Amount, { type: "currency" })}
|
||||
</h5>
|
||||
<p className="text-secondary mb-0 small">0–30 Days</p>
|
||||
</div>
|
||||
|
||||
{/* 30–60 Days */}
|
||||
<div
|
||||
className="p-1 rounded-3 text-start mx-1"
|
||||
style={{
|
||||
background: "var(--bs-info-bg-subtle)",
|
||||
borderLeft: "4px solid var(--bs-info)",
|
||||
minWidth: "170px",
|
||||
}}
|
||||
>
|
||||
<h5 className="fw-bold mb-0">
|
||||
{formatFigure(data.bucket30To60Amount, { type: "currency" })}
|
||||
</h5>
|
||||
<p className="text-secondary mb-0 small">30–60 Days</p>
|
||||
</div>
|
||||
|
||||
{/* 60–90 Days */}
|
||||
<div
|
||||
className="p-1 rounded-3 text-start mx-1"
|
||||
style={{
|
||||
background: "var(--bs-warning-bg-subtle)",
|
||||
borderLeft: "4px solid var(--bs-warning)",
|
||||
minWidth: "170px",
|
||||
}}
|
||||
>
|
||||
<h5 className="fw-bold mb-0">
|
||||
{formatFigure(data.bucket60To90Amount, { type: "currency" })}
|
||||
</h5>
|
||||
<p className="text-secondary mb-0 small">60–90 Days</p>
|
||||
</div>
|
||||
|
||||
{/* 90+ Days */}
|
||||
<div
|
||||
className="p-1 rounded-3 text-start mx-1"
|
||||
style={{
|
||||
background: "var(--bs-danger-bg-subtle)",
|
||||
borderLeft: "4px solid var(--bs-danger)",
|
||||
minWidth: "170px",
|
||||
}}
|
||||
>
|
||||
<h5 className="fw-bold mb-0">
|
||||
{formatFigure(data.bucket90PlusAmount, { type: "currency" })}
|
||||
</h5>
|
||||
<p className="text-secondary mb-0 small">90+ Days</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
|
||||
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
||||
<div
|
||||
className={`skeleton mb-2 ${className}`}
|
||||
style={{ height, width }}
|
||||
></div>
|
||||
);
|
||||
export const CollectionOverviewSkeleton = () => {
|
||||
return (
|
||||
<div className="card row p-1">
|
||||
|
||||
{/* LEFT SIDE */}
|
||||
<div className="col-8">
|
||||
<div className="">
|
||||
|
||||
{/* Header */}
|
||||
<div className="d-flex align-items-center justify-content-between mb-3">
|
||||
<SkeletonLine height={24} width="180px" />
|
||||
</div>
|
||||
|
||||
{/* Due & Collected summary */}
|
||||
<div className="d-flex align-items-center text-start px-6 mb-3">
|
||||
<SkeletonLine height={16} width="100px" className="me-2" />
|
||||
<SkeletonLine height={20} width="120px" className="me-2" />
|
||||
<SkeletonLine height={16} width="120px" className="ms-2 me-2" />
|
||||
<SkeletonLine height={20} width="120px" />
|
||||
</div>
|
||||
|
||||
{/* Chart Skeleton */}
|
||||
<SkeletonLine height={250} width="100%" className="mt-2" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
@ -4,8 +4,7 @@ import {
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
useAttendanceOverviewData,
|
||||
useGetCollectionOverview,
|
||||
useAttendanceOverviewData
|
||||
} from "../../hooks/useDashboard_Data";
|
||||
|
||||
import Projects from "./Projects";
|
||||
@ -18,24 +17,13 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
|
||||
import ExpenseStatus from "./ExpenseStatus";
|
||||
import ExpenseByProject from "./ExpenseByProject";
|
||||
import ProjectStatistics from "../Project/ProjectStatistics";
|
||||
import ServiceJobs from "./ServiceJobs";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
REGULARIZE_ATTENDANCE,
|
||||
SELF_ATTENDANCE,
|
||||
TEAM_ATTENDANCE,
|
||||
} from "../../utils/constants";
|
||||
import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
|
||||
import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";
|
||||
|
||||
const Dashboard = () => {
|
||||
|
||||
// Get the selected project ID from Redux store
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
const isAllProjectsSelected = projectId === null;
|
||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
||||
const { data,isLoading,isError } = useGetCollectionOverview();
|
||||
|
||||
return (
|
||||
<div className="container-fluid mt-5">
|
||||
<div className="row gy-4">
|
||||
@ -45,21 +33,33 @@ const Dashboard = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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"}`}>
|
||||
<Teams />
|
||||
</div>
|
||||
|
||||
<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 />
|
||||
</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="card ">
|
||||
<ExpenseStatus />
|
||||
@ -74,127 +74,9 @@ const Dashboard = () => {
|
||||
<div className="col-12 col-md-6">
|
||||
<ExpenseByProject />
|
||||
</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>
|
||||
)}
|
||||
{isAllProjectsSelected && (
|
||||
<div className="col-xxl-6 col-lg-4">
|
||||
<div className="card h-100">
|
||||
<ServiceJobs />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-md-8">
|
||||
{isLoading ? (
|
||||
<CollectionOverviewSkeleton />
|
||||
) : (
|
||||
data && (
|
||||
<div className="card">
|
||||
<TopicBarChart data={data} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
// <div class="col-12 col-xl-8">
|
||||
// <div class="card h-100">
|
||||
// <div class="card-header d-flex align-items-center justify-content-between">
|
||||
// <h5 class="card-title m-0 me-2">Topic you are interested in</h5>
|
||||
// <div class="dropdown">
|
||||
// <button
|
||||
// class="btn p-0"
|
||||
// type="button"
|
||||
// id="topic"
|
||||
// data-bs-toggle="dropdown"
|
||||
// aria-haspopup="true"
|
||||
// aria-expanded="false">
|
||||
// <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
|
||||
// </button>
|
||||
// <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
|
||||
// <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
|
||||
// <a class="dropdown-item" href="javascript:void(0);">See All</a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="card-body row g-3">
|
||||
// <div class="col-md-8">
|
||||
// <div id="horizontalBarChart"></div>
|
||||
// </div>
|
||||
// <div class="col-md-4 d-flex justify-content-around align-items-center">
|
||||
// <div>
|
||||
// <div class="d-flex align-items-baseline">
|
||||
// <span class="text-primary me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">UI Design</p>
|
||||
// <h5>35%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="d-flex align-items-baseline my-12">
|
||||
// <span class="text-success me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">Music</p>
|
||||
// <h5>14%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="d-flex align-items-baseline">
|
||||
// <span class="text-danger me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">React</p>
|
||||
// <h5>10%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <div class="d-flex align-items-baseline">
|
||||
// <span class="text-info me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">UX Design</p>
|
||||
// <h5>20%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="d-flex align-items-baseline my-12">
|
||||
// <span class="text-secondary me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">Animation</p>
|
||||
// <h5>12%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="d-flex align-items-baseline">
|
||||
// <span class="text-warning me-2"><i class="bx bxs-circle bx-12px"></i></span>
|
||||
// <div>
|
||||
// <p class="mb-0">SEO</p>
|
||||
// <h5>9%</h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
@ -50,11 +50,6 @@ const ExpenseAnalysis = () => {
|
||||
chart: { type: "donut" },
|
||||
labels,
|
||||
legend: { show: false },
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: (value) => formatCurrency(value),
|
||||
},
|
||||
},
|
||||
dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
|
||||
colors: flatColors,
|
||||
plotOptions: {
|
||||
@ -132,7 +127,7 @@ const ExpenseAnalysis = () => {
|
||||
options={donutOptions}
|
||||
series={series}
|
||||
type="donut"
|
||||
width="75%"
|
||||
width="70%"
|
||||
height={320}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -12,17 +12,14 @@ const ProjectCompletionChart = () => {
|
||||
isError,
|
||||
error,
|
||||
} = useProjectCompletionStatus();
|
||||
const filteredProjects = projects?.filter((p) => p.completedWork > 0) || [];
|
||||
|
||||
const projectNames = filteredProjects.map((p) => p.name);
|
||||
|
||||
const projectProgress = filteredProjects.map((p) => {
|
||||
const projectNames = projects?.map((p) => p.name) || [];
|
||||
const projectProgress =
|
||||
projects?.map((p) => {
|
||||
const completed = p.completedWork || 0;
|
||||
const planned = p.plannedWork || 1;
|
||||
const percent = planned ? (completed / planned) * 100 : 0;
|
||||
return Math.min(parseFloat(percent.toFixed(2)), 100); // limit to 2 decimals
|
||||
});
|
||||
|
||||
return Math.min(Math.round(percent), 100);
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import LineChart from "../Charts/LineChart";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@ -11,7 +11,7 @@ const ProjectProgressChart = ({
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const { projectNames } = useProjectName();
|
||||
const { projects } = useProjects();
|
||||
const [range, setRange] = useState(DefaultRange);
|
||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||
|
||||
@ -79,9 +79,7 @@ const ProjectProgressChart = ({
|
||||
})
|
||||
);
|
||||
|
||||
const selectedProjectData = projectNames?.find(
|
||||
(p) => p.id === selectedProject
|
||||
);
|
||||
const selectedProjectData = projects?.find((p) => p.id === selectedProject);
|
||||
const selectedProjectName = selectedProjectData?.shortName?.trim()
|
||||
? selectedProjectData.shortName
|
||||
: selectedProjectData?.name;
|
||||
|
||||
@ -1,159 +0,0 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useJobsProgression } from "../../hooks/useDashboard_Data";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useServiceProject } from "../../hooks/useServiceProject";
|
||||
|
||||
const ServiceJobs = () => {
|
||||
const { projectId } = useParams();
|
||||
const { data, isLoading, isError } = useJobsProgression(projectId);
|
||||
|
||||
const jobs = data || {};
|
||||
const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
|
||||
const tabMapping = [
|
||||
{ id: "tab-new", label: "My Jobs", key: "allJobs" },
|
||||
{ id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
|
||||
{ id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="card page-min-h">
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1 fw-bold">Service Jobs</h5>
|
||||
<p className="card-subtitle">
|
||||
{projectLoading ? "Loading..." : projectData?.name || "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">
|
||||
{tabMapping.map((t, index) => (
|
||||
<li className="nav-item" key={t.id}>
|
||||
<button
|
||||
className={`nav-link ${index === 0 ? "active" : ""}`}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target={`#${t.id}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* ---------------- Tab Content ---------------- */}
|
||||
<div className="tab-content border-0 mx-1 text-start">
|
||||
|
||||
{isLoading && (
|
||||
<div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{isError && (
|
||||
<p
|
||||
className="text-center"
|
||||
style={{
|
||||
height: "250px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
No data found
|
||||
</p>
|
||||
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
!isError &&
|
||||
tabMapping.map((t, index) => {
|
||||
const list = jobs[t.key] || [];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
|
||||
id={t.id}
|
||||
>
|
||||
{list.length === 0 ? (
|
||||
<p
|
||||
className="text-center"
|
||||
style={{
|
||||
height: "250px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
No jobs found
|
||||
</p>
|
||||
|
||||
) : (
|
||||
<div className="job-scroll-wrapper">
|
||||
{list.map((job, i) => (
|
||||
<React.Fragment key={i}>
|
||||
<ul className="timeline mb-0">
|
||||
|
||||
{/* Assigned By */}
|
||||
<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">
|
||||
Assigned By
|
||||
</small>
|
||||
</div>
|
||||
<h6 className="my-50">{job.assignedBy}</h6>
|
||||
<p className="text-body mb-0">
|
||||
{formatUTCToLocalTime(job.assignedAt)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Project */}
|
||||
<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">Project</small>
|
||||
</div>
|
||||
<h6 className="my-50">{job.project}</h6>
|
||||
<p className="text-body mb-0">{job.title}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Divider */}
|
||||
{i < list.length - 1 && (
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceJobs;
|
||||
@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
|
||||
Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="my-3">
|
||||
<div className="mb-3">
|
||||
<Label htmlFor="description" className="text-start" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("description")}
|
||||
rows="3"
|
||||
/>
|
||||
|
||||
@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
|
||||
if (!loading && sorted.length === 0) return <div>No buckets found</div>;
|
||||
|
||||
return (
|
||||
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0 text-start">
|
||||
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
|
||||
{sorted.map((bucket) => (
|
||||
<div className="col" key={bucket.id}>
|
||||
<div className="card h-100">
|
||||
|
||||
@ -61,7 +61,7 @@ const CardViewContact = ({
|
||||
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
||||
}
|
||||
/>{" "}
|
||||
<span className="text-heading fs-6 ms-2 mt-n1"> {contact?.name}</span>
|
||||
<span className="text-heading fs-6 ms-2"> {contact?.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
{IsActive && (
|
||||
|
||||
@ -99,7 +99,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
||||
/>
|
||||
<div className="card ">
|
||||
<div
|
||||
className="card-datatable table-responsive page-min-h"
|
||||
className="card-datatable table-responsive"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
||||
@ -121,7 +121,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
||||
data.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
style={{height: "50px", background: `${!showActive ? "#f8f6f6" : ""}` }}
|
||||
style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
|
||||
>
|
||||
{contactList.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
|
||||
@ -45,7 +45,7 @@ const ManageBucket1 = () => {
|
||||
return (
|
||||
<div className="container m-0 p-0" style={{ minHeight: "00px" }}>
|
||||
<div className="d-flex justify-content-center">
|
||||
<h5 className="m-0">Manage Buckets</h5>
|
||||
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
|
||||
</div>
|
||||
|
||||
{action ? (
|
||||
|
||||
@ -19,9 +19,6 @@ import SelectMultiple from "../common/SelectMultiple";
|
||||
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
|
||||
import InputSuggestions from "../common/InputSuggestion";
|
||||
import Label from "../common/Label";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
import { BUCKET_BG_CLASSES } from "../../utils/constants";
|
||||
|
||||
const ManageContact = ({ contactId, closeModal }) => {
|
||||
// fetch master data
|
||||
@ -181,7 +178,6 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
};
|
||||
|
||||
const isPending = updating || creating;
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
|
||||
@ -198,7 +194,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -214,7 +210,6 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
value={watch("organization") || ""}
|
||||
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
||||
error={errors.organization?.message}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
</div>
|
||||
@ -227,7 +222,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
Designation
|
||||
</Label>
|
||||
<input
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("designation")}
|
||||
onChange={handleDesignationChange}
|
||||
/>
|
||||
@ -262,7 +257,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</div>
|
||||
|
||||
{/* Emails + Phones */}
|
||||
<div className="row mt-3">
|
||||
<div className="row mt-1">
|
||||
<div className="col-md-6">
|
||||
{emailFields.map((field, index) => (
|
||||
<div
|
||||
@ -270,39 +265,22 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
className="row d-flex align-items-center mb-1"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<AppFormController
|
||||
name={`contactEmails.${index}.label`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Label"
|
||||
options={[
|
||||
{ id: "Work", name: "Work" },
|
||||
{ id: "Personal", name: "Personal" },
|
||||
{ id: "Other", name: "Other" }
|
||||
]}
|
||||
placeholder="Choose a Label"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.contactEmails?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactEmails[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactEmails.${index}.label`)}
|
||||
>
|
||||
<option value="Work">Work</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-7 text-start mt-n3">
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Email</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="email"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactEmails.${index}.emailAddress`)}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
@ -330,43 +308,27 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
|
||||
<div className="col-md-6">
|
||||
{phoneFields.map((field, index) => (
|
||||
<div key={field.id} className="row d-flex align-items-center mb-2">
|
||||
|
||||
<div
|
||||
key={field.id}
|
||||
className="row d-flex align-items-center mb-2"
|
||||
>
|
||||
<div className="col-5 text-start">
|
||||
<AppFormController
|
||||
name={`contactPhones.${index}.label`}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Label"
|
||||
options={[
|
||||
{ id: "Office", name: "Office" },
|
||||
{ id: "Personal", name: "Personal" },
|
||||
{ id: "Business", name: "Business" }
|
||||
]}
|
||||
placeholder="Choose a Label"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.contactPhones?.[index]?.label && (
|
||||
<small className="danger-text">
|
||||
{errors.contactPhones[index].label.message}
|
||||
</small>
|
||||
)}
|
||||
<label className="form-label">Label</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register(`contactPhones.${index}.label`)}
|
||||
>
|
||||
<option value="Office">Office</option>
|
||||
<option value="Personal">Personal</option>
|
||||
<option value="Business">Business</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-7 text-start mt-n3">
|
||||
<div className="col-7 text-start">
|
||||
<label className="form-label">Phone</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||
placeholder="9876543210"
|
||||
/>
|
||||
@ -388,43 +350,42 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Category + Projects */}
|
||||
<div className="row">
|
||||
<div className="row my-1">
|
||||
<div className="col-md-6 text-start">
|
||||
<AppFormController
|
||||
name="contactCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Category"
|
||||
required
|
||||
options={contactCategory ?? []}
|
||||
placeholder="Select Category"
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={contactCategoryLoading && !contactCategory}
|
||||
className="m-0"
|
||||
/>
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
@ -441,14 +402,13 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="col-12 text-start mt-3">
|
||||
<div className="col-12 text-start">
|
||||
<TagInput
|
||||
name="tags"
|
||||
label="Tags"
|
||||
options={contactTags}
|
||||
isRequired={true}
|
||||
placeholder="Enter Tag"
|
||||
size="sm"
|
||||
/>
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
@ -457,26 +417,16 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
|
||||
{/* Buckets */}
|
||||
<div className="row">
|
||||
<div className="col-md-12 mt-3 text-start">
|
||||
<Label className="form-label mb-2" required>Select Bucket</Label>
|
||||
|
||||
<div
|
||||
className="d-flex flex-wrap gap-3 p-1"
|
||||
style={{
|
||||
maxHeight: "200px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<div className="col-md-12 mt-1 text-start">
|
||||
<label className="form-label ">Select Bucket</label>
|
||||
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
||||
{bucketsLoaging && <p>Loading...</p>}
|
||||
|
||||
{buckets?.map((item, index) => (
|
||||
<div
|
||||
{buckets?.map((item) => (
|
||||
<li
|
||||
key={item.id}
|
||||
className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES [index % BUCKET_BG_CLASSES.length]}`}
|
||||
onClick={() => handleCheckboxChange(item.id)}
|
||||
className="list-inline-item flex-shrink-0 me-6 mb-1"
|
||||
>
|
||||
|
||||
<div className="form-check m-0">
|
||||
<div className="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
@ -484,37 +434,35 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
checked={watchBucketIds.includes(item.id)}
|
||||
onChange={() => handleCheckboxChange(item.id)}
|
||||
/>
|
||||
<label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor={`item-${item.id}`}
|
||||
>
|
||||
{item.name}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="text-start mt-3 mb-3">
|
||||
</ul>
|
||||
{errors.bucketIds && (
|
||||
<small className="danger-text">{errors.bucketIds.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Address + Description */}
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Address</label>
|
||||
<textarea
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
{...register("address")}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 text-start mt-3">
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Description</label>
|
||||
<textarea
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
rows="2"
|
||||
{...register("description")}
|
||||
/>
|
||||
|
||||
@ -9,7 +9,6 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
|
||||
import "../common/TextEditor/Editor.css";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
|
||||
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
|
||||
|
||||
const NoteCardDirectoryEditable = ({
|
||||
noteItem,
|
||||
@ -23,14 +22,14 @@ const NoteCardDirectoryEditable = ({
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isRestoring, setIsRestoring] = useState(false);
|
||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const [open_contact, setOpen_contact] = useState(null);
|
||||
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
|
||||
|
||||
const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
|
||||
setEditing(false)
|
||||
);
|
||||
const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
|
||||
useActiveInActiveNote(() => setIsDeleteModalOpen(false));
|
||||
const { setContactOpen } = useDirectoryContext();
|
||||
|
||||
|
||||
const handleUpdateNote = async () => {
|
||||
const payload = {
|
||||
@ -46,6 +45,12 @@ const NoteCardDirectoryEditable = ({
|
||||
ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
|
||||
};
|
||||
|
||||
const contactProfile = (contactId) => {
|
||||
DirectoryRepository.GetContactProfile(contactId).then((res) => {
|
||||
setOpen_contact(res?.data);
|
||||
setIsOpenModalNote(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleRestore = async () => {
|
||||
try {
|
||||
@ -83,9 +88,7 @@ const NoteCardDirectoryEditable = ({
|
||||
<div>
|
||||
<div
|
||||
className="d-flex ms-3 align-middle cursor-pointer"
|
||||
onClick={() =>
|
||||
setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
|
||||
}
|
||||
onClick={() => contactProfile(noteItem.contactId)}
|
||||
>
|
||||
<span>
|
||||
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
||||
@ -94,7 +97,6 @@ const NoteCardDirectoryEditable = ({
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="d-flex ms-0 align-middle"></div>
|
||||
<div className="d-flex ms-3 mt-2">
|
||||
<span className="text-muted">
|
||||
|
||||
@ -141,7 +141,6 @@ const DocumentFilterPanel = forwardRef(
|
||||
defaultRange={false}
|
||||
resetSignal={resetKey}
|
||||
maxDate={new Date()}
|
||||
className="w-100 mt-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -141,8 +141,8 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="">
|
||||
<div className="card page-min-h table-responsive d-flex p-5">
|
||||
<div className="mt-2">
|
||||
<div className="card page-min-h d-flex p-5">
|
||||
<DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
|
||||
@ -178,7 +178,7 @@ const DocumentsList = ({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="">
|
||||
<div className="table-responsive">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="shadow-sm">
|
||||
@ -197,7 +197,7 @@ const DocumentsList = ({
|
||||
const isRestoring = restoringIds.includes(doc.id);
|
||||
|
||||
return (
|
||||
<tr key={doc.id} style={{ height: "50px" }}>
|
||||
<tr key={doc.id}>
|
||||
{DocumentColumns.map((col) => (
|
||||
<td key={col.key} className={`sorting ${col.align}`}>
|
||||
{col.customRender
|
||||
|
||||
@ -17,8 +17,6 @@ import {
|
||||
import showToast from "../../services/toastService";
|
||||
import { useDocumentContext } from "./Documents";
|
||||
import { isPending } from "@reduxjs/toolkit";
|
||||
import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const toBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
@ -74,12 +72,9 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
control,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
|
||||
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
|
||||
() => {
|
||||
showToast("Document Uploaded Successfully", "success");
|
||||
@ -119,7 +114,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
const DocumentPayload = { ...payload, entityId: Entity };
|
||||
UploadDocument(DocumentPayload);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const {
|
||||
data: DocData,
|
||||
@ -139,7 +134,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
|
||||
categoryId || null
|
||||
);
|
||||
const { data: DocumentTags } = useDocumentTags()
|
||||
const {data:DocumentTags} = useDocumentTags()
|
||||
|
||||
// Update schema whenever document type changes
|
||||
useEffect(() => {
|
||||
@ -236,74 +231,66 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
|
||||
const isPending = isUploading || isUpdating;
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<div className="p-2">
|
||||
<h5 className="">Upload New Document</h5>
|
||||
<p className="fw-bold fs-6">Upload New Document</p>
|
||||
<FormProvider key={documentTypeId} {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
||||
{/* Category */}
|
||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="documentCategoryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Document Category"
|
||||
options={DocumentCategories ?? []}
|
||||
placeholder="Select Category"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
<div className="mb-2">
|
||||
<Label htmlFor="documentCategoryId" required>Document Category</Label>
|
||||
<select
|
||||
{...register("documentCategoryId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
{isLoading && (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
)}
|
||||
/>
|
||||
|
||||
{!isLoading && <option value="">Select Category</option>}
|
||||
{DocumentCategories?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.documentCategoryId && (
|
||||
<small className="danger-text">
|
||||
<div className="danger-text">
|
||||
{errors.documentCategoryId.message}
|
||||
</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Type */}
|
||||
{categoryId && (
|
||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="documentTypeId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Document Type"
|
||||
options={DocumentTypes ?? []}
|
||||
placeholder="Select Document Type"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isTypeLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
<div className="mb-2">
|
||||
<Label htmlFor="documentTypeId" required>Document Type</Label>
|
||||
<select
|
||||
{...register("documentTypeId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
{isTypeLoading && (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
)}
|
||||
/>
|
||||
|
||||
{DocumentTypes?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.documentTypeId && (
|
||||
<small className="danger-text">
|
||||
<div className="danger-text">
|
||||
{errors.documentTypeId.message}
|
||||
</small>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
{/* Document ID */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-2">
|
||||
<label
|
||||
htmlFor="documentId"
|
||||
required={selectedType?.isMandatory ?? false}
|
||||
@ -312,7 +299,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("documentId")}
|
||||
/>
|
||||
{errors.documentId && (
|
||||
@ -327,7 +314,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -338,7 +325,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
|
||||
|
||||
{/* Upload */}
|
||||
<div className="row my-4">
|
||||
<div className="row my-2">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="attachment" required>Upload Document</Label>
|
||||
|
||||
@ -397,7 +384,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<div className="mb-2">
|
||||
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
|
||||
{errors.tags && (
|
||||
<small className="danger-text">{errors.tags.message}</small>
|
||||
@ -405,7 +392,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-2">
|
||||
<Label htmlFor="description" required>Description</Label>
|
||||
<textarea
|
||||
rows="2"
|
||||
@ -438,7 +425,6 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
||||
</form>
|
||||
</FormProvider>
|
||||
</div>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
|
||||
if (isLoading) return <div>Loading...</div>
|
||||
return (
|
||||
<>
|
||||
<div className="card page-min-h mt-3">
|
||||
<div className="card h-100 mt-4">
|
||||
<div className="card-body">
|
||||
<div className="my-0 text-start">
|
||||
<DateRangePicker
|
||||
|
||||
@ -71,7 +71,7 @@ const EmpAttendance = () => {
|
||||
<AttendLogs Id={attendanceId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="table-responsive card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||
id="DataTables_Table_0_length"
|
||||
@ -84,7 +84,7 @@ const EmpAttendance = () => {
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-nowrap">
|
||||
<div className="table-responsive text-nowrap">
|
||||
{!loading && data.length === 0 && (
|
||||
<div className="text-center py-5">No employee logs</div>
|
||||
)}
|
||||
@ -103,9 +103,6 @@ const EmpAttendance = () => {
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-1" colSpan={2}>
|
||||
ProjectName
|
||||
</th>
|
||||
<th className="border-top-1">Date</th>
|
||||
<th>
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||
@ -121,7 +118,7 @@ const EmpAttendance = () => {
|
||||
<tbody>
|
||||
{currentItems?.map((attendance, index) => (
|
||||
<tr key={index}>
|
||||
<td colSpan={3}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
firstName={attendance.firstName}
|
||||
@ -136,7 +133,6 @@ const EmpAttendance = () => {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{attendance.projectName}</td>
|
||||
<td>
|
||||
{" "}
|
||||
{moment(attendance.checkInTime).format("DD-MMM-YYYY")}
|
||||
|
||||
@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
<EmpOverview profile={profile}></EmpOverview>
|
||||
</div>
|
||||
|
||||
<div className="col col-sm-6 mt-3">
|
||||
<div className="col col-sm-6 pt-5">
|
||||
<div className="card ">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small text-start d-block">
|
||||
@ -82,7 +82,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 pt-2">
|
||||
<div className="col-12 col-sm-6 pt-5">
|
||||
<EmpReportingManager
|
||||
employeeId={profile?.id}
|
||||
employee={profile}
|
||||
|
||||
@ -6,12 +6,10 @@ import { useParams } from "react-router-dom";
|
||||
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
|
||||
|
||||
const EmpDocuments = ({ profile, loggedInUser }) => {
|
||||
const { employeeId } = useParams()
|
||||
const {employeeId} = useParams()
|
||||
return (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
|
||||
const { loggedInUserProfile } = useProfile();
|
||||
|
||||
return (
|
||||
<div className="row mt-n2">
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
|
||||
@ -17,8 +17,6 @@ import DatePicker from "../common/DatePicker";
|
||||
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
const dispatch = useDispatch();
|
||||
@ -149,7 +147,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="firstName"
|
||||
placeholder="First Name"
|
||||
onInput={(e) => {
|
||||
@ -175,7 +173,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="middleName"
|
||||
placeholder="Middle Name"
|
||||
onInput={(e) => {
|
||||
@ -203,7 +201,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="lastName"
|
||||
placeholder="Last Name"
|
||||
onInput={(e) => {
|
||||
@ -233,7 +231,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
type="email"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="example@domain.com"
|
||||
maxLength={80}
|
||||
aria-describedby="Email"
|
||||
@ -257,7 +255,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
keyboardType="numeric"
|
||||
id="phoneNumber"
|
||||
{...register("phoneNumber")}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
@ -274,7 +272,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
<div className="row mb-3"></div>
|
||||
<div className="row mb-3">
|
||||
{/* <div className="col-sm-4">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Gender
|
||||
</Label>
|
||||
@ -302,44 +300,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Gender
|
||||
</Label>
|
||||
|
||||
<div className="">
|
||||
<AppFormController
|
||||
name="gender"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
options={[
|
||||
{ id: "Male", name: "Male" },
|
||||
{ id: "Female", name: "Female" },
|
||||
{ id: "Other", name: "Other" },
|
||||
]}
|
||||
placeholder="Select Gender"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.gender && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Birth Date
|
||||
@ -397,7 +358,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
<textarea
|
||||
id="currentAddress"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Current Address"
|
||||
aria-label="Current Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
@ -427,7 +388,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
<textarea
|
||||
id="permanentAddress"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Permanent Address"
|
||||
aria-label="Permanent Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
@ -458,34 +419,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<Label className="form-text text-start" required>
|
||||
Organization
|
||||
</Label>
|
||||
|
||||
<div>
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Already showing label above
|
||||
options={
|
||||
organzationList?.data
|
||||
?.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||
?.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
})) || []
|
||||
}
|
||||
placeholder="Select Organization"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("organizationId")}
|
||||
id="organizationId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Organization
|
||||
</option>
|
||||
{organzationList?.data
|
||||
.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item?.id}>
|
||||
{item?.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{errors.organizationId && (
|
||||
<div
|
||||
className="danger-text text-start justify-content-center"
|
||||
@ -496,7 +448,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-6 d-flex align-items-center mt-2">
|
||||
<label className="form-check-label d-flex align-items-center">
|
||||
<input
|
||||
@ -517,42 +468,46 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4 text-start">
|
||||
<AppFormController
|
||||
name="jobRoleId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Official Designation"
|
||||
required
|
||||
options={[...job_role].sort((a, b) =>
|
||||
a?.name?.localeCompare(b?.name)
|
||||
)}
|
||||
placeholder="Select Role"
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Official Designation
|
||||
</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("jobRoleId")}
|
||||
id="jobRoleId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Role
|
||||
</option>
|
||||
{[...job_role]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item.id}>
|
||||
{item?.name}{" "}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errors.jobRoleId && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.jobRoleId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-4 mt-n1">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Emergency Contact Person
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyContactPerson")}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="emergencyContactPerson"
|
||||
maxLength={50}
|
||||
placeholder="Contact Person"
|
||||
@ -566,14 +521,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4 mt-n1">
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Emergency Phone Number
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyPhoneNumber")}
|
||||
className="form-control phone-mask"
|
||||
className="form-control form-control-sm phone-mask"
|
||||
id="emergencyPhoneNumber"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
@ -596,7 +551,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("aadharNumber")}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="aadharNumber"
|
||||
placeholder="AADHAR Number"
|
||||
maxLength={12}
|
||||
@ -614,7 +569,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("panNumber")}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
id="panNumber"
|
||||
placeholder="PAN Number"
|
||||
maxLength={10}
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useState,
|
||||
useMemo,
|
||||
} from "react";
|
||||
import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
|
||||
import { FormProvider, useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
|
||||
@ -21,8 +15,7 @@ import { useExpenseFilter } from "../../hooks/useExpense";
|
||||
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const ExpenseFilterPanel = forwardRef(
|
||||
({ onApply, handleGroupBy, setFilterdata }, ref) => {
|
||||
const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
|
||||
const { status } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const selectedProjectId = useSelector(
|
||||
@ -33,7 +26,6 @@ const ExpenseFilterPanel = forwardRef(
|
||||
|
||||
const groupByList = useMemo(() => {
|
||||
return [
|
||||
{ id: "none", name: "None" },
|
||||
{ id: "transactionDate", name: "Transaction Date" },
|
||||
{ id: "status", name: "Status" },
|
||||
{ id: "submittedBy", name: "Submitted By" },
|
||||
@ -44,7 +36,7 @@ const ExpenseFilterPanel = forwardRef(
|
||||
].sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, []);
|
||||
|
||||
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
|
||||
const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
|
||||
const dynamicDefaultFilter = useMemo(() => {
|
||||
@ -132,18 +124,12 @@ const ExpenseFilterPanel = forwardRef(
|
||||
if (status !== appliedStatusId) {
|
||||
const filterWithStatus = {
|
||||
...dynamicDefaultFilter,
|
||||
projectIds: selectedProjectId
|
||||
? [selectedProjectId]
|
||||
: dynamicDefaultFilter.projectIds || [],
|
||||
projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
|
||||
startDate: dynamicDefaultFilter.startDate
|
||||
? moment
|
||||
.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
|
||||
.toISOString()
|
||||
? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
endDate: dynamicDefaultFilter.endDate
|
||||
? moment
|
||||
.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY")
|
||||
.toISOString()
|
||||
? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
};
|
||||
|
||||
@ -166,6 +152,8 @@ const ExpenseFilterPanel = forwardRef(
|
||||
if (isError && isFetched)
|
||||
return <div>Something went wrong Here- {error.message} </div>;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormProvider {...methods}>
|
||||
@ -176,8 +164,7 @@ const ExpenseFilterPanel = forwardRef(
|
||||
<div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
||||
isTransactionDate ? "active btn-primary text-white" : ""
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isTransactionDate", true)}
|
||||
>
|
||||
@ -185,8 +172,7 @@ const ExpenseFilterPanel = forwardRef(
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${
|
||||
!isTransactionDate ? "active btn-primary text-white" : ""
|
||||
className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setValue("isTransactionDate", false)}
|
||||
>
|
||||
@ -278,7 +264,7 @@ const ExpenseFilterPanel = forwardRef(
|
||||
<select
|
||||
id="groupBySelect"
|
||||
className="form-select form-select-sm"
|
||||
value={selectedGroup?.id || "none"}
|
||||
value={selectedGroup?.id || ""}
|
||||
onChange={handleGroupChange}
|
||||
>
|
||||
{groupByList.map((group) => (
|
||||
@ -305,7 +291,6 @@ const ExpenseFilterPanel = forwardRef(
|
||||
</FormProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
export default ExpenseFilterPanel;
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
@ -23,15 +23,8 @@ import { useSelector } from "react-redux";
|
||||
import ExpenseFilterChips from "./ExpenseFilterChips";
|
||||
import { defaultFilter } from "./ExpenseSchema";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { displayName } from "react-quill";
|
||||
|
||||
const ExpenseList = ({
|
||||
filters,
|
||||
groupBy,
|
||||
searchText,
|
||||
tableRef,
|
||||
onDataFiltered,
|
||||
}) => {
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const {
|
||||
@ -54,12 +47,6 @@ const ExpenseList = ({
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (onDataFiltered) {
|
||||
onDataFiltered(data?.data ?? []);
|
||||
}
|
||||
}, [data, onDataFiltered]);
|
||||
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
@ -83,17 +70,7 @@ const ExpenseList = ({
|
||||
}
|
||||
};
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
if (!field || field === "none") {
|
||||
return {
|
||||
All: {
|
||||
key: "All",
|
||||
displayField: "All",
|
||||
items: items || []
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
let displayField;
|
||||
@ -108,7 +85,8 @@ const groupByField = (items, field) => {
|
||||
displayField = "Status";
|
||||
break;
|
||||
case "submittedBy":
|
||||
key = `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim();
|
||||
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
|
||||
}`.trim();
|
||||
displayField = "Submitted By";
|
||||
break;
|
||||
case "project":
|
||||
@ -132,7 +110,7 @@ const groupByField = (items, field) => {
|
||||
displayField = "Others";
|
||||
}
|
||||
|
||||
const groupKey = `${field}_${key}`;
|
||||
const groupKey = `${field}_${key}`; // unique key for object property
|
||||
if (!acc[groupKey]) {
|
||||
acc[groupKey] = { key, displayField, items: [] };
|
||||
}
|
||||
@ -140,8 +118,7 @@ const groupByField = (items, field) => {
|
||||
acc[groupKey].items.push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
const expenseColumns = [
|
||||
{
|
||||
@ -167,8 +144,7 @@ const groupByField = (items, field) => {
|
||||
label: "Submitted By",
|
||||
align: "text-start",
|
||||
getValue: (e) =>
|
||||
`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div
|
||||
@ -182,8 +158,7 @@ const groupByField = (items, field) => {
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
@ -216,8 +191,7 @@ const groupByField = (items, field) => {
|
||||
align: "text-center",
|
||||
getValue: (e) => (
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(e?.status?.color) || "secondary"
|
||||
className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{e.status?.name || "Unknown"}
|
||||
@ -238,18 +212,12 @@ const groupByField = (items, field) => {
|
||||
return <ExpenseTableSkeleton headers={headers} />;
|
||||
if (isError) return <div>{error?.message}</div>;
|
||||
|
||||
const isNoGrouping = !groupBy || groupBy === "none";
|
||||
const grouped = isNoGrouping
|
||||
? { All: { key: "All", displayField: "All", items: data?.data ?? [] } }
|
||||
: groupByField(data?.data ?? [], groupBy);
|
||||
|
||||
|
||||
|
||||
|
||||
const grouped = groupBy
|
||||
? groupByField(data?.data ?? [], groupBy)
|
||||
: { All: data?.data ?? [] };
|
||||
const IsGroupedByDate = [
|
||||
{key:"none",displayField:"None"},
|
||||
{ key: "transactionDate", displayField: "Transaction Date" },
|
||||
{ key: "createdAt", displayField: "created Date", },
|
||||
{ key: "createdAt", displayField: "created Date" },
|
||||
]?.includes(groupBy);
|
||||
|
||||
const canEditExpense = (expense) => {
|
||||
@ -290,8 +258,7 @@ const grouped = isNoGrouping
|
||||
groupBy={groupBy}
|
||||
/>
|
||||
<div
|
||||
className="card-datatable table-responsive"
|
||||
ref={tableRef}
|
||||
className="card-datatable table-responsive "
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
@ -319,7 +286,6 @@ const grouped = isNoGrouping
|
||||
{Object.keys(grouped).length > 0 ? (
|
||||
Object.values(grouped).map(({ key, displayField, items }) => (
|
||||
<React.Fragment key={key}>
|
||||
{!isNoGrouping && (
|
||||
<tr className="tr-group text-dark">
|
||||
<td colSpan={8} className="text-start">
|
||||
<div className="d-flex align-items-center px-2">
|
||||
@ -335,7 +301,6 @@ const grouped = isNoGrouping
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{items?.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
{expenseColumns.map(
|
||||
@ -343,23 +308,19 @@ const grouped = isNoGrouping
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ml-2 ${
|
||||
col.align ?? ""
|
||||
className={`d-table-cell ml-2 ${col.align ?? ""
|
||||
} `}
|
||||
>
|
||||
<div
|
||||
className={`d-flex px-2 ${
|
||||
col.key === "status"
|
||||
className={`d-flex px-2 ${col.key === "status"
|
||||
? "justify-content-center"
|
||||
: ""
|
||||
}
|
||||
${
|
||||
col.key === "amount"
|
||||
${col.key === "amount"
|
||||
? "justify-content-end"
|
||||
: ""
|
||||
}
|
||||
${
|
||||
col.key === "submitted"
|
||||
${col.key === "submitted"
|
||||
? "justify-content-center"
|
||||
: ""
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
||||
import Tooltip from "../common/Tooltip";
|
||||
|
||||
const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
||||
const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
|
||||
return (
|
||||
<div className="d-flex flex-wrap gap-2 my-1">
|
||||
{files
|
||||
@ -18,11 +18,12 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
||||
{/* File icon and info */}
|
||||
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
||||
<i
|
||||
className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
|
||||
className={`bx ${getIconByFileType(
|
||||
file?.contentType
|
||||
)} fs-3 `}
|
||||
style={{ minWidth: "30px" }}
|
||||
></i>
|
||||
|
||||
<Tooltip text={file.fileName}>
|
||||
<div className="d-flex flex-column text-truncate">
|
||||
<span className="fw-semibold small text-truncate">
|
||||
{file.fileName}
|
||||
@ -31,7 +32,6 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/* Delete icon */}
|
||||
@ -41,14 +41,15 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
||||
role="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
@ -61,7 +62,9 @@ export const FilelistView = ({ files, viewFile }) => {
|
||||
<div className="row align-items-center">
|
||||
{/* File icon and info */}
|
||||
<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
|
||||
className="d-flex flex-column text-truncate"
|
||||
@ -69,7 +72,7 @@ export const FilelistView = ({ files, viewFile }) => {
|
||||
e.preventDefault();
|
||||
viewFile({
|
||||
IsOpen: true,
|
||||
Image: files,
|
||||
Image: file.preSignedUrl,
|
||||
});
|
||||
}}
|
||||
>
|
||||
@ -90,44 +93,3 @@ export const FilelistView = ({ files, viewFile }) => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -37,7 +37,6 @@ import SelectEmployeeServerSide, {
|
||||
} from "../common/Forms/SelectFieldServerSide";
|
||||
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -238,7 +237,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</h5>
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<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
|
||||
label="Project"
|
||||
required
|
||||
@ -260,32 +282,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="expenseCategoryId"
|
||||
{...register("expenseCategoryId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Category
|
||||
</option>
|
||||
{ExpenseLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
expenseCategories?.map((expense) => (
|
||||
<option key={expense.id} value={expense.id}>
|
||||
{expense.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.expenseCategoryId && (
|
||||
</select>
|
||||
{errors.expensesCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expenseCategoryId.message}
|
||||
{errors.expensesCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
@ -293,47 +313,58 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<Label htmlFor="paymentModeId" className="form-label" required>
|
||||
Payment Mode
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="paymentModeId"
|
||||
control={control}
|
||||
rules={{ required: "Payment Mode is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is shown above
|
||||
placeholder="Select Mode"
|
||||
options={PaymentModes ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={PaymentModeLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paymentModeId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Mode
|
||||
</option>
|
||||
{PaymentModeLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
PaymentModes?.map((payment) => (
|
||||
<option key={payment.id} value={payment.id}>
|
||||
{payment.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.paymentModeId && (
|
||||
<small className="danger-text">{errors.paymentModeId.message}</small>
|
||||
<small className="danger-text">
|
||||
{errors.paymentModeId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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
|
||||
name="paidById"
|
||||
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectEmployeeServerSide
|
||||
label="Paid By" required
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isFullObject={false}
|
||||
isFullObject={false} // because using ID
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start mb-4">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="transactionDate" className="form-label" required>
|
||||
Transaction Date
|
||||
@ -343,7 +374,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
className="w-100"
|
||||
control={control}
|
||||
maxDate={new Date()}
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.transactionDate && (
|
||||
@ -360,7 +390,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
@ -372,7 +402,7 @@ 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-6">
|
||||
<Label htmlFor="supplerName" className="form-label" required>
|
||||
Supplier Name/Transporter Name/Other
|
||||
@ -380,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="text"
|
||||
id="supplerName"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("supplerName")}
|
||||
/>
|
||||
{errors.supplerName && (
|
||||
@ -397,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("location")}
|
||||
/>
|
||||
{errors.location && (
|
||||
@ -405,7 +435,7 @@ 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-6">
|
||||
<label htmlFor="statusId" className="form-label ">
|
||||
Transaction ID
|
||||
@ -413,7 +443,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="text"
|
||||
id="transactionId"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
{...register("transactionId")}
|
||||
/>
|
||||
@ -430,7 +460,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="text"
|
||||
id="gstNumber"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
{...register("gstNumber")}
|
||||
/>
|
||||
@ -439,38 +469,33 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start ">
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Select Currency
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Currency"
|
||||
options={currencies?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="currencyId"
|
||||
{...register("currencyId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Currency
|
||||
</option>
|
||||
{currencyLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
currencies?.map((currency) => (
|
||||
<option key={currency.id} value={currency.id}>
|
||||
{`${currency.currencyName} (${currency.symbol}) `}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.currencyId && (
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expenseCategory?.noOfPersonsRequired && (
|
||||
<div className="col-md-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
@ -479,7 +504,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="noOfPersons"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("noOfPersons")}
|
||||
inputMode="numeric"
|
||||
/>
|
||||
@ -492,14 +517,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start mb-4">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="description" className="form-label" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
id="description"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("description")}
|
||||
rows="2"
|
||||
></textarea>
|
||||
@ -511,7 +536,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row my-4 text-start">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label" required>
|
||||
Upload Bill{" "}
|
||||
|
||||
@ -1,177 +1,80 @@
|
||||
import { error } from "pdf-lib";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { iframeDocuments } from "../../utils/constants";
|
||||
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 [rotation, setRotation] = useState(0);
|
||||
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 currentFile = images[index];
|
||||
const fileUrl = currentFile?.preSignedUrl;
|
||||
|
||||
const isDocumentType = iframeDocuments.includes(
|
||||
currentFile?.contentType.toLowerCase()
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setRotation(0);
|
||||
setScale(1);
|
||||
setPosition({ x: 0, y: 0 });
|
||||
setLoading(true);
|
||||
}, [index]);
|
||||
|
||||
const zoomIn = () =>
|
||||
!isDocumentType && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
|
||||
const zoomOut = () =>
|
||||
!isDocumentType && 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 = () => {
|
||||
setRotation(0);
|
||||
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 handleMouseDown = (e) => {
|
||||
if (isDocumentType) return;
|
||||
setDragging(true);
|
||||
startPos.current = {
|
||||
x: e.clientX - position.x,
|
||||
y: e.clientY - position.y,
|
||||
};
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
if (!dragging || isDocumentType) return;
|
||||
|
||||
setPosition({
|
||||
x: e.clientX - startPos.current.x,
|
||||
y: e.clientY - startPos.current.y,
|
||||
});
|
||||
};
|
||||
|
||||
const handleMouseUp = () => setDragging(false);
|
||||
|
||||
const handleDoubleClick = () => !isDocumentType && resetAll();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Controls */}
|
||||
<div className="d-flex justify-content-start align-items-center mb-2">
|
||||
<div className="d-flex gap-3">
|
||||
{!isDocumentType && (
|
||||
<>
|
||||
<div className="d-flex justify-content-start gap-3 mb-2">
|
||||
<i
|
||||
className="bx bx-rotate-right cursor-pointer fs-4"
|
||||
onClick={() => setRotation((prev) => prev + 90)}
|
||||
title="Rotate"
|
||||
/>
|
||||
onClick={() => setRotation((prev) => prev + 90)}
|
||||
></i>
|
||||
|
||||
<i
|
||||
className="bx bx-zoom-in cursor-pointer fs-4"
|
||||
onClick={zoomIn}
|
||||
title="Zoom In"
|
||||
/>
|
||||
onClick={zoomIn}
|
||||
></i>
|
||||
|
||||
<i
|
||||
className="bx bx-zoom-out cursor-pointer fs-4"
|
||||
onClick={zoomOut}
|
||||
title="Zoom Out"
|
||||
/>
|
||||
<i
|
||||
className="bx bx-reset cursor-pointer fs-4"
|
||||
onClick={resetAll}
|
||||
title="Reset"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
onClick={zoomOut}
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onMouseDown={handleMouseDown}
|
||||
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",
|
||||
}}
|
||||
className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
|
||||
style={{ minHeight: "80vh" }}
|
||||
>
|
||||
{loading && <div className="text-secondary">Loading...</div>}
|
||||
|
||||
{isDocumentType ? (
|
||||
<iframe
|
||||
src={fileUrl}
|
||||
title="Document Preview"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "70vh",
|
||||
border: "none",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={fileUrl}
|
||||
alt="Preview"
|
||||
draggable="false"
|
||||
style={{
|
||||
maxHeight: "60vh",
|
||||
display: loading ? "none" : "block",
|
||||
transform: `
|
||||
translate(${position.x}px, ${position.y}px)
|
||||
scale(${scale})
|
||||
rotate(${rotation}deg)
|
||||
`,
|
||||
transition: dragging ? "none" : "transform 0.2s ease",
|
||||
cursor: dragging ? "grabbing" : "grab",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
{loading && (
|
||||
<div className="text-secondary text-center mb-2">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between mt-2">
|
||||
<div className="text-muted small">
|
||||
Scroll = change file | Double click = reset (images only)
|
||||
</div>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<i
|
||||
className="bx bx-chevron-left cursor-pointer fs-4"
|
||||
onClick={prevImage}
|
||||
/>
|
||||
<span>
|
||||
{index + 1} / {images.length}
|
||||
</span>
|
||||
<i
|
||||
className="bx bx-chevron-right cursor-pointer fs-4"
|
||||
onClick={nextImage}
|
||||
<div className="mb-3 d-flex justify-content-center align-items-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Full View"
|
||||
className="img-fluid"
|
||||
style={{
|
||||
maxHeight: "80vh",
|
||||
objectFit: "contain",
|
||||
display: loading ? "none" : "block",
|
||||
transform: `rotate(${rotation}deg) scale(${scale})`,
|
||||
transition: "transform 0.3s ease",
|
||||
cursor: "grab",
|
||||
}}
|
||||
onLoad={() => setLoading(false)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
<div className="position-absolute bottom-0 start-0 m-2">
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={resetAll}
|
||||
>
|
||||
<i className="bx bx-reset"></i> Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default PreviewDocument;
|
||||
|
||||
@ -390,10 +390,12 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
|
||||
key={doc.documentId}
|
||||
className="d-flex align-items-center cusor-pointer"
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Images: data?.documents,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
|
||||
@ -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
|
||||
@ -26,10 +26,10 @@ const Header = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const { onOpen } = useAuthModal()
|
||||
const { onOpen: changePass } = useModal("ChangePassword");
|
||||
const {onOpen} = useAuthModal()
|
||||
const { onOpen:changePass } = useModal("ChangePassword");
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { mutate: logout, isPending: logouting } = useLogout()
|
||||
const { mutate : logout,isPending:logouting} = useLogout()
|
||||
|
||||
const isDashboardPath =
|
||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||
@ -54,7 +54,7 @@ const Header = () => {
|
||||
/^\/advance-payment(\/[0-9a-fA-F-]{36})?$/.test(pathname);
|
||||
|
||||
|
||||
return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment || isServiceProjectPage || isAdvancePayment1);
|
||||
return !(isDirectoryPath || isProfilePage || isExpensePage || isPaymentRequest || isRecurringExpense || isAdvancePayment ||isServiceProjectPage || isAdvancePayment1);
|
||||
};
|
||||
const allowedProjectStatusIds = [
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
@ -218,10 +218,10 @@ const Header = () => {
|
||||
projectsForDropdown &&
|
||||
projectsForDropdown.length > 0 && (
|
||||
<ul
|
||||
className="dropdown-menu custom-scrollbar"
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{(isDashboardPath || isCollectionPath) && (
|
||||
{(isDashboardPath|| isCollectionPath) &&(
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
@ -402,7 +402,7 @@ const Header = () => {
|
||||
<li>
|
||||
<div className="dropdown-divider"></div>
|
||||
</li>
|
||||
<li onClick={() => onOpen()}>
|
||||
<li onClick={()=>onOpen()}>
|
||||
{" "}
|
||||
<a
|
||||
className="dropdown-item cusor-pointer"
|
||||
@ -448,9 +448,9 @@ const Header = () => {
|
||||
<a
|
||||
aria-label="click to log out"
|
||||
className="dropdown-item cusor-pointer"
|
||||
onClick={() => logout()}
|
||||
onClick={()=>logout()}
|
||||
>
|
||||
{logouting ? "Please Wait" : <> <i className="bx bx-log-out me-2"></i>
|
||||
{logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
|
||||
<span className="align-middle">SignOut</span></>}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -25,28 +25,17 @@ const Sidebar = () => {
|
||||
/>
|
||||
</span> */}
|
||||
|
||||
<a
|
||||
href="/"
|
||||
className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
|
||||
>
|
||||
<span className="app-brand-logo demo d-flex align-items-center">
|
||||
<img
|
||||
src="/img/brand/marco.png"
|
||||
width="40"
|
||||
height="40"
|
||||
alt="OnFieldWork logo"
|
||||
/>
|
||||
<small className="app-brand-link fw-bold navbar-brand text-green fs-6">
|
||||
<span className="app-brand-logo demo">
|
||||
<img src="/img/brand/marco.png" width="50" />
|
||||
</span>
|
||||
|
||||
<span className="app-brand-text">
|
||||
<span className="text-primary ">OnField</span>
|
||||
<span className="mx-1">Work</span>
|
||||
<span className="text-blue">OnField</span>
|
||||
<span>Work</span>
|
||||
<span className="text-dark">.com</span>
|
||||
</span>
|
||||
</a>
|
||||
</small>
|
||||
</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>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
@ -89,98 +89,106 @@ const AssignOrg = ({ setStep }) => {
|
||||
if (isMasterserviceLoading || isLoading)
|
||||
return <div className="text-center">Loading....</div>;
|
||||
|
||||
const showTwoColumns = startStep === 3 && flowType !== "default";
|
||||
return (
|
||||
<div className="row text-black text-start mb-3">
|
||||
{/* Left Column */}
|
||||
<div className={showTwoColumns ? "col-md-6" : "col-12"}>
|
||||
{/* Organization Info Display */}
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<img src="/public/assets/img/orgLogo.png" alt="logo" width={40} height={40} />
|
||||
<p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={40}
|
||||
height={40}
|
||||
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
|
||||
</div>
|
||||
<button type="button" onClick={handleEdit} className="btn btn-link p-0">
|
||||
<div className="text-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleEdit}
|
||||
className="btn btn-link p-0"
|
||||
>
|
||||
<i className="bx bx-edit text-secondary"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="d-flex text-secondary mb-5">
|
||||
<i className="bx bx-sm bx-info-circle me-2" /> Organization Info
|
||||
</div>
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
|
||||
{/* Contact Info */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactPerson}</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
<i className="bx bx-sm me-1 bx-phone" /> Contact Number :
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.contactNumber}</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
||||
</label>
|
||||
<div className="text-muted text-wrap">{orgData.email}</div>
|
||||
<div className="text-muted">{orgData.email}</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold" style={{ maxWidth: "130px" }}>
|
||||
<i className="bx bx-sm me-2 bx-barcode"></i> Service Provider Id SPRID :
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
||||
Service Provider Id (SPRID) :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.sprid}</div>
|
||||
</div>
|
||||
<div className="mb-5 d-flex">
|
||||
<label className="form-label me-1 mb-0 fw-semibold" style={{ minWidth: "135px" }}>
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-1 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
<i className='bx bx-sm me-1 bx-map'></i> Address :
|
||||
</label>
|
||||
<div className="text-muted">{orgData.address}</div>
|
||||
<div className="text-muted text-start">{orgData.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Assigned Services */}
|
||||
{flowType !== "default" && projectServices?.length > 0 && (
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-semibold mb-2 d-flex align-items-center gap-1">
|
||||
<i className="bx bx-cog fs-5"></i>
|
||||
Assigned Services:
|
||||
</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{projectServices.map((service) => (
|
||||
<span
|
||||
key={service.id}
|
||||
className="badge bg-label-secondary"
|
||||
>
|
||||
{service.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
{showTwoColumns && (
|
||||
<div className="col-md-6">
|
||||
{/* Form Section */}
|
||||
{/* Form */}
|
||||
<div className="text-black text-start">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{/* Show fields only if flowType is NOT default */}
|
||||
{flowType !== "default" && (
|
||||
<>
|
||||
{/* Organization Type */}
|
||||
<div className="mb-3">
|
||||
<Label htmlFor="organizationTypeId" className="mb-2 fw-semibold" required>
|
||||
<div className="mb-3 text-start">
|
||||
<Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
|
||||
Organization Type
|
||||
</Label>
|
||||
<div className="d-flex flex-wrap gap-3 mt-1">
|
||||
{orgType?.data.map((type) => (
|
||||
<div key={type.id} className="form-check d-flex align-items-center gap-2 p-0 m-0">
|
||||
<div
|
||||
key={type.id}
|
||||
className="form-check d-flex align-items-center gap-2 p-0 m-0"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id={`organizationType-${type.id}`}
|
||||
@ -188,86 +196,62 @@ const AssignOrg = ({ setStep }) => {
|
||||
{...register("organizationTypeId")}
|
||||
className="form-check-input m-0"
|
||||
/>
|
||||
<label className="form-check-label m-0" htmlFor={`organizationType-${type.id}`}>
|
||||
<label
|
||||
className="form-check-label m-0"
|
||||
htmlFor={`organizationType-${type.id}`}
|
||||
>
|
||||
{type.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.organizationTypeId && (
|
||||
<span className="text-danger">{errors.organizationTypeId.message}</span>
|
||||
<span className="text-danger">
|
||||
{errors.organizationTypeId.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="mb-4">
|
||||
<Label htmlFor="serviceIds" className="mb-6 fw-semibold" required>
|
||||
Choose Services
|
||||
<div className="mb-3">
|
||||
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
|
||||
Select Services
|
||||
</Label>
|
||||
|
||||
{/* FIXED HEIGHT + SCROLLBAR */}
|
||||
<div
|
||||
className="row g-3"
|
||||
style={{
|
||||
maxHeight: "290px",
|
||||
overflowY: "auto",
|
||||
paddingRight: "6px",
|
||||
}}
|
||||
>
|
||||
{mergedServices
|
||||
?.slice() // copy array
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((service) => (
|
||||
<div key={service.id} className="col-12 col-md-6">
|
||||
<div className="card h-100" style={{ minHeight: "120px" }}>
|
||||
<div className="card-body d-flex align-items-start">
|
||||
{mergedServices?.map((service) => (
|
||||
<div key={service.id} className="form-check mb-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={service.id}
|
||||
{...register("serviceIds")}
|
||||
className="form-check-input me-2 mt-1"
|
||||
id={`service-${service.id}`}
|
||||
className="form-check-input"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor={`service-${service.id}`}
|
||||
className="fw-semibold mb-1 d-block"
|
||||
>
|
||||
{service.name}
|
||||
</label>
|
||||
|
||||
<small className="text-muted d-block text-wrap">
|
||||
{service.description?.length > 80
|
||||
? service.description.substring(0, 80) + "..."
|
||||
: service.description}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label className="form-check-label">{service.name}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{errors.serviceIds && (
|
||||
<div className="text-danger small mt-1">{errors.serviceIds.message}</div>
|
||||
<div className="text-danger small">
|
||||
{errors.serviceIds.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
{/* Buttons */}
|
||||
<div className="d-flex justify-content-between mt-6">
|
||||
|
||||
{/* Buttons: Always visible */}
|
||||
<div className="d-flex justify-content-between mt-5">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
onClick={handleBack}
|
||||
disabled={isPending}
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i> Back
|
||||
<i className="bx bx-chevron-left"></i>Back
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: flowType === "default"
|
||||
@ -275,8 +259,9 @@ const AssignOrg = ({ setStep }) => {
|
||||
: "Assign to Project"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -96,12 +96,12 @@ const ManagOrg = () => {
|
||||
return (
|
||||
<FormProvider {...method}>
|
||||
<form className="form" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mb-3 text-start mt-3">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="name" required>
|
||||
Organization Name
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
/>
|
||||
{errors.name && (
|
||||
@ -109,12 +109,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="contactPerson" required>
|
||||
Contact Person
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactPerson")}
|
||||
/>
|
||||
{errors.contactPerson && (
|
||||
@ -122,12 +122,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="contactNumber" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactNumber")}
|
||||
/>
|
||||
{errors.contactNumber && (
|
||||
@ -135,12 +135,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="gstNumber">
|
||||
GST Number
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("gstNumber")}
|
||||
/>
|
||||
{errors.gstNumber && (
|
||||
@ -148,12 +148,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="email" required>
|
||||
Email Address
|
||||
</Label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("email")}
|
||||
/>
|
||||
{errors.email && (
|
||||
@ -161,10 +161,10 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Select Service Provided"
|
||||
label="Select Service"
|
||||
options={service?.data}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
@ -175,12 +175,12 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start">
|
||||
<div className="mb-1 text-start">
|
||||
<Label htmlFor="address" required>
|
||||
Address
|
||||
</Label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
{...register("address")}
|
||||
rows={2}
|
||||
/>
|
||||
@ -189,7 +189,7 @@ const ManagOrg = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between gap-2 my-5">
|
||||
<div className="d-flex justify-content-between gap-2 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
useAssignOrgToTenant,
|
||||
useOrganizationBySPRID,
|
||||
useOrganizationModal,
|
||||
} from "../../hooks/useOrganization";
|
||||
import Label from "../common/Label";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { spridSchema } from "./OrganizationSchema";
|
||||
import { OrgCardSkeleton } from "./OrganizationSkeleton";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
const OrgPickerFromSPId = () => {
|
||||
const { onOpen, prevStep, flowType } = useOrganizationModal();
|
||||
// Zod schema: only allow exactly 4 digits
|
||||
|
||||
const OrgPickerFromSPId = ({ title, placeholder }) => {
|
||||
const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
|
||||
useOrganizationModal();
|
||||
const clientQuery = useQueryClient();
|
||||
|
||||
const [activeTab, setActiveTab] = useState("search"); // search | create
|
||||
const [SPRID, setSPRID] = useState("");
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -27,129 +28,127 @@ const OrgPickerFromSPId = () => {
|
||||
defaultValues: { spridSearchText: "" },
|
||||
});
|
||||
|
||||
const { data, isLoading } = useOrganizationBySPRID(SPRID);
|
||||
const [SPRID, setSPRID] = useState("");
|
||||
|
||||
const { data, isLoading, isError, error, refetch } =
|
||||
useOrganizationBySPRID(SPRID);
|
||||
|
||||
const onSubmit = (formdata) => {
|
||||
setSPRID(formdata.spridSearchText);
|
||||
};
|
||||
|
||||
const handleCreateOrg = () => {
|
||||
const handleCrateOrg = () => {
|
||||
clientQuery.removeQueries({ queryKey: ["organization"] });
|
||||
onOpen({ startStep: 4, orgData: null });
|
||||
};
|
||||
|
||||
const SP = watch("spridSearchText");
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs mb-8">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "search" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("search")}
|
||||
type="button"
|
||||
>
|
||||
Search Organization
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "create" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("create")}
|
||||
type="button"
|
||||
>
|
||||
Assign Organization
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === "search" && (
|
||||
<>
|
||||
<div className="d-block mt-4">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row align-items-end mb-3">
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="col-12 col-md-8 text-start">
|
||||
<Label required className="mb-1">Search by SPRID</Label>
|
||||
<div className="row align-items-center g-2">
|
||||
{/* Input Section */}
|
||||
<div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
|
||||
<Label className="text-nowrap mb-1 mb-md-0" required>
|
||||
Search by SPRID
|
||||
</Label>
|
||||
<input
|
||||
type="search"
|
||||
{...register("spridSearchText")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control form-control-sm flex-grow-1"
|
||||
placeholder="Enter SPRID"
|
||||
maxLength={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Search Button (always at end) */}
|
||||
<div className="col-12 col-md d-flex justify-content-md-end mt-2 mt-md-0">
|
||||
{/* Button Section */}
|
||||
<div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
className="btn btn-sm btn-primary w-100 w-md-auto"
|
||||
>
|
||||
<i className="bx bx-sm bx-search-alt-2 me-1"></i>
|
||||
Search
|
||||
<i className="bx bx-sm bx-search-alt-2"></i> Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="text-start danger-text">
|
||||
{" "}
|
||||
{errors.spridSearchText && (
|
||||
<p className="text-danger small mt-1">{errors.spridSearchText.message}</p>
|
||||
<p className="text-danger small mt-1">
|
||||
{errors.spridSearchText.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ---- Organization list ---- */}
|
||||
{isLoading ? (
|
||||
<OrgCardSkeleton />
|
||||
) : data && data?.data.length > 0 ? (
|
||||
<div className="d-flex flex-column gap-2">
|
||||
<div className="py-2 text-tiny text-center">
|
||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||
{data.data.map((org) => (
|
||||
<div key={org.sprid} className="d-flex gap-2 text-start mt-5">
|
||||
<div className="mt-2"><img src="/public/assets/img/orgLogo.png" alt="logo" width={50} height={50} /></div>
|
||||
<div className="flex-grow-1">
|
||||
<span className="fs-6 fw-semibold mb-2">{org.name}</span>
|
||||
<div className="d-flex gap-2 mt-2">
|
||||
<small className="fw-semibold text-uppercase">SPRID :</small>
|
||||
<small>{org.sprid}</small>
|
||||
<div className="d-flex flex-row gap-2 text-start text-black ">
|
||||
<div className="mt-1">
|
||||
<img
|
||||
src="/public/assets/img/orgLogo.png"
|
||||
alt="logo"
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
<div className="d-flex gap-2 mt-2">
|
||||
<small className="fw-semibold">Address:</small>
|
||||
<div>{org.address}</div>
|
||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
||||
<span className="fs-6 fw-semibold">{org.name}</span>
|
||||
<div className="d-flex gap-2">
|
||||
<small
|
||||
className=" fw-semibold text-uppercase"
|
||||
style={{ letterSpacing: "1px" }}
|
||||
>
|
||||
SPRID :{" "}
|
||||
</small>
|
||||
<small className="fs-6">{org.sprid}</small>
|
||||
</div>
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<small className="text-small fw-semibold">Address:</small>
|
||||
<div className="d-flex text-wrap">{org.address}</div>
|
||||
</div>
|
||||
<div className="m-0 p-0">
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-5"
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => onOpen({ startStep: 3, orgData: org })}
|
||||
>
|
||||
Select
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : SPRID ? (
|
||||
<div className="py-3 text-center text-secondary">
|
||||
No organization found for "{SPRID}"
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === "create" && (
|
||||
<div className="text-center py-5">
|
||||
<div className="py-2 text-center text-tiny text-black">
|
||||
<small className="d-block text-secondary">
|
||||
{/* Do not have SPRID or want to create a new organization? */}
|
||||
Do not have SPRID or could not find organization ?
|
||||
</small>
|
||||
<button type="button" className="btn btn-sm btn-primary" onClick={handleCreateOrg}>
|
||||
<i className="bx bx-plus-circle me-2"></i> Create New Organization
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary mt-3"
|
||||
onClick={handleCrateOrg}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create New Organization
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Back button */}
|
||||
{/* ---- Footer buttons ---- */}
|
||||
<div className={`d-flex text-secondary mt-3`}>
|
||||
{flowType !== "default" && (
|
||||
<div className="d-flex text-secondary mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-xs btn-outline-secondary"
|
||||
@ -157,9 +156,9 @@ const OrgPickerFromSPId = () => {
|
||||
>
|
||||
<i className="bx bx-chevron-left"></i> Back
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -40,46 +40,44 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
const contactList = [
|
||||
{
|
||||
key: "name",
|
||||
label: (
|
||||
<div style={{ width: "290px", maxWidth: "300px", overflow: "hidden", textOverflow: "ellipsis" }}>
|
||||
Name
|
||||
</div>
|
||||
),
|
||||
label: "Name",
|
||||
getValue: (org) => (
|
||||
<div className="d-flex gap-2 py-1 ">
|
||||
<i className="bx bx-buildings"></i>
|
||||
<i class="bx bx-buildings"></i>
|
||||
<span
|
||||
className="text-wrap d-inline-block "
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
>
|
||||
{org?.name || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
align: "text-start"
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "sprid",
|
||||
label: "SPRID",
|
||||
getValue: (org) => (
|
||||
<span
|
||||
className="text-warp d-inline-block"
|
||||
className="text-truncate d-inline-block"
|
||||
style={{ maxWidth: "200px" }}
|
||||
>
|
||||
{org?.sprid || "N/A"}
|
||||
</span>
|
||||
),
|
||||
align: "text-start",
|
||||
align: "text-center",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="d-block">
|
||||
<div className="d-flex align-items-center gap-2 mb-4 mt-4">
|
||||
<div className="d-flex align-items-center gap-2 mb-1">
|
||||
<Label className="mb-0">{title}</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText?.(e.target.value)}
|
||||
className="form-control form-control-sm w-75"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Enter Organization Name"
|
||||
/>
|
||||
</div>
|
||||
@ -128,8 +126,7 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
onOpen({ startStep: 3, orgData: row })
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle text-primary"></i>
|
||||
|
||||
<i class='bx bx-right-arrow-circle text-primary'></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -141,9 +138,10 @@ const OrgPickerfromTenant = ({ title }) => {
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2 mt-4">
|
||||
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2">
|
||||
<small className="mb-1">
|
||||
Could not find organization in your database? Create New Organization
|
||||
Could not find organization in your database? Please search within the
|
||||
global database.
|
||||
</small>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -22,7 +22,7 @@ import OrgPickerfromTenant from "./OrgPickerfromTenant";
|
||||
import ViewOrganization from "./ViewOrganization";
|
||||
|
||||
const OrganizationModal = () => {
|
||||
const { isOpen, orgData, startStep,flowType, onOpen, onClose, onToggle } =
|
||||
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
|
||||
useOrganizationModal();
|
||||
const { data: masterService, isLoading } = useServices();
|
||||
const [searchText, setSearchText] = useState();
|
||||
@ -54,7 +54,7 @@ const OrganizationModal = () => {
|
||||
};
|
||||
|
||||
const RenderTitle = useMemo(() => {
|
||||
if (orgData && startStep === 3) {
|
||||
if (orgData && startStep === 3 ) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
|
||||
@ -71,17 +71,17 @@ const OrganizationModal = () => {
|
||||
if (startStep === 3) {
|
||||
return "Assign Organization";
|
||||
}
|
||||
if (startStep === 5) {
|
||||
if(startStep === 5){
|
||||
return "Organization Details"
|
||||
}
|
||||
|
||||
return `${orgData ? "Update" : "Assign"} Organization`;
|
||||
return `${orgData ? "Update":"Create"} Organization`;
|
||||
}, [startStep, orgData]);
|
||||
|
||||
const contentBody = (
|
||||
<div>
|
||||
{/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */}
|
||||
{startStep === 1 && <OrgPickerfromTenant title="Search Organization" />}
|
||||
{startStep === 1 && <OrgPickerfromTenant title="Find Organization" />}
|
||||
|
||||
{startStep === 2 && (
|
||||
<OrgPickerFromSPId
|
||||
@ -100,13 +100,12 @@ const OrganizationModal = () => {
|
||||
{startStep === 4 && <ManagOrg />}
|
||||
|
||||
{/* ---------- STEP 3: View Organization ---------- */}
|
||||
{startStep === 5 && <ViewOrganization orgId={orgData} />}
|
||||
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
size={startStep === 3 && flowType !== "default" ? "xl" : "md"}
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={RenderTitle}
|
||||
|
||||
@ -15,7 +15,8 @@ export const organizationSchema = z.object({
|
||||
address: z.string().min(1, { message: "Address is required!" }),
|
||||
email: z
|
||||
.string().trim()
|
||||
.optional(),
|
||||
.min(1, { message: "Email is required" })
|
||||
.email("Invalid email address"),
|
||||
serviceIds: z
|
||||
.array(z.string())
|
||||
.min(1, { message: "Service isrequired" }),
|
||||
|
||||
@ -4,19 +4,18 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const OrganizationsList = ({ searchText }) => {
|
||||
const OrganizationsList = ({searchText}) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const searchString = useDebounce(searchText, 500)
|
||||
const searchString = useDebounce(searchText,500)
|
||||
const {
|
||||
data = [],
|
||||
isLoading,
|
||||
isFetching,
|
||||
isError,
|
||||
error,
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true, null, searchString);
|
||||
const { onClose, startStep, flowType, onOpen, orgData } = useOrganizationModal();
|
||||
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
|
||||
const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal();
|
||||
|
||||
const organizationsColumns = [
|
||||
{
|
||||
@ -95,6 +94,7 @@ const OrganizationsList = ({ searchText }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="card-datatable table-responsive overflow-auto"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
@ -122,7 +122,6 @@ const OrganizationsList = ({ searchText }) => {
|
||||
{organizationsColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
style={{ height: "50px" }}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
>
|
||||
{col.customRender
|
||||
@ -132,8 +131,8 @@ const OrganizationsList = ({ searchText }) => {
|
||||
))}
|
||||
<td className="sticky-action-column ">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i className="bx bx-show text-primary cursor-pointer" onClick={() => onOpen({ startStep: 5, orgData: org.id, flowType: "view" })}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={() => onOpen({ startStep: 4, orgData: org, flowType: "edit" })}></i>
|
||||
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
|
||||
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
|
||||
<i className="bx bx-trash text-danger cursor-not-allowed"></i>
|
||||
</div>
|
||||
</td>
|
||||
@ -144,18 +143,10 @@ const OrganizationsList = ({ searchText }) => {
|
||||
<td
|
||||
colSpan={organizationsColumns.length + 1}
|
||||
className="text-center"
|
||||
style={{ height: "250px" }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="d-flex justify-content-center align-items-center h-100">
|
||||
<SpinnerLoader />
|
||||
</div>
|
||||
) : (
|
||||
<p className="fw-semibold mt-3">Not Found Organization</p>
|
||||
)}
|
||||
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
return (
|
||||
<div className="row text-black text-black text-start ">
|
||||
{/* Header */}
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||
<img
|
||||
@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
width={40}
|
||||
height={40}
|
||||
/>{" "}
|
||||
<p className="fw-semibold fs-5 mt-2 m-0">{data?.name}</p>
|
||||
<p className="fw-semibold fs-6 m-0">{data?.name}</p>
|
||||
</div>
|
||||
<div className="text-end">
|
||||
<span
|
||||
@ -30,12 +30,12 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex text-secondary mb-5">
|
||||
<div className="d-flex text-secondary mb-2">
|
||||
{" "}
|
||||
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
||||
</div>
|
||||
{/* Contact Info */}
|
||||
<div className="col-md-12 mb-5">
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
<div className="text-muted">{data?.contactPerson}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-5">
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
<div className="text-muted">{data?.contactNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-5">
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
<div className="text-muted">{data?.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-2 bx-barcode"></i>
|
||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
||||
Service Provider Id (SPRID) :
|
||||
</label>
|
||||
<div className="text-muted">{data?.sprid}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ maxWidth: "130px" }}
|
||||
>
|
||||
<i className="bx bx-sm me-2 bx-group"></i>
|
||||
<i className="bx bx-sm me-1 bx-group"></i>
|
||||
Employees :
|
||||
</label>
|
||||
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-1 mb-0 fw-semibold"
|
||||
@ -104,7 +104,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
<div className="text-muted text-start">{data?.address}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-12 mb-3">
|
||||
<div
|
||||
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
</div>
|
||||
|
||||
{/* Services Section */}
|
||||
<div className="col-12 mb-5">
|
||||
<div className="col-12 mb-3">
|
||||
<div
|
||||
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
||||
data-bs-toggle="collapse"
|
||||
@ -180,7 +180,7 @@ const VieworgDataanization = ({ orgId }) => {
|
||||
{data?.services && data.services.length > 0 ? (
|
||||
<div className="row">
|
||||
{data.services.map((service) => (
|
||||
<div key={service.id} className="col-md-12 mb-5">
|
||||
<div key={service.id} className="col-md-12 mb-3">
|
||||
<div className="card h-100 shadow-sm border-0">
|
||||
<div className="card-body">
|
||||
<h6 className="fw-semibold mb-1">
|
||||
|
||||
@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<>
|
||||
{isProccesed ? (
|
||||
<div className="accordion-item active shadow-none">
|
||||
<h2 className="accordion-header d-flex align-items-center">
|
||||
<div class="accordion-item active shadow-none">
|
||||
<h2 class="accordion-header d-flex align-items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="accordion-button"
|
||||
class="accordion-button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#accordionWithIcon-1"
|
||||
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
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
@ -30,8 +30,6 @@ import InputSuggestions from "../common/InputSuggestion";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { blockUI } from "../../utils/blockUI";
|
||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
const {
|
||||
@ -241,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
Select Project
|
||||
</Label> */}
|
||||
{/* <select
|
||||
className="form-select "
|
||||
className="form-select form-select-sm"
|
||||
{...register("projectId")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
@ -283,37 +281,37 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="expenseCategoryId"
|
||||
{...register("expenseCategoryId")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Category
|
||||
</option>
|
||||
{ExpenseLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
expenseCategories?.map((expense) => (
|
||||
<option key={expense.id} value={expense.id}>
|
||||
{expense.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.expenseCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expenseCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Title and Advance Payment */}
|
||||
<div className="row mt-n2 text-start">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="title" className="form-label" required>
|
||||
Title
|
||||
@ -321,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("title")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
@ -332,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="col-md-6 ">
|
||||
<Label htmlFor="isAdvance" className="form-label">
|
||||
Is Advance Payment
|
||||
</Label>
|
||||
@ -345,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
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">
|
||||
<input
|
||||
type="radio"
|
||||
@ -389,7 +387,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
control={control}
|
||||
minDate={new Date()}
|
||||
className="w-100"
|
||||
size="md"
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
@ -407,7 +404,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
@ -432,7 +429,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
setValue("payee", val, { shouldValidate: true })
|
||||
}
|
||||
error={errors.payee?.message}
|
||||
size="md"
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
@ -460,39 +456,30 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Currency
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already above
|
||||
placeholder="Select Currency"
|
||||
options={currencyData?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
|
||||
noOptionsMessage={() =>
|
||||
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
|
||||
? "No currency found"
|
||||
: null
|
||||
<select
|
||||
id="currencyId"
|
||||
className="form-select form-select-sm"
|
||||
{...register("currencyId")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
>
|
||||
<option value="">Select Currency</option>
|
||||
|
||||
{currencyLoading && <option>Loading...</option>}
|
||||
|
||||
{!currencyLoading &&
|
||||
!currencyError &&
|
||||
currencyData?.map((currency) => (
|
||||
<option key={currency.id} value={currency.id}>
|
||||
{`${currency.currencyName} (${currency.symbol})`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.currencyId && (
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
@ -503,7 +490,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
</Label>
|
||||
<textarea
|
||||
id="description"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("description")}
|
||||
rows="2"
|
||||
disabled={
|
||||
@ -519,7 +506,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
</div>
|
||||
|
||||
{/* Upload Document */}
|
||||
<div className="row my-4 text-start">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label">Upload Bill </Label>
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
EXPENSE_DRAFT,
|
||||
EXPENSE_REJECTEDBY,
|
||||
@ -22,7 +22,7 @@ import Error from "../common/Error";
|
||||
import Pagination from "../common/Pagination";
|
||||
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
|
||||
|
||||
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy", tableRef, onDataFiltered }) => {
|
||||
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
|
||||
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
|
||||
const navigate = useNavigate();
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
@ -30,7 +30,6 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
@ -150,12 +149,6 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (onDataFiltered) {
|
||||
onDataFiltered(data?.data ?? []);
|
||||
}
|
||||
}, [data, onDataFiltered]);
|
||||
|
||||
if (isError) {
|
||||
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
||||
}
|
||||
@ -229,7 +222,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
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="col-12 mb-2 mt-2">
|
||||
<PaymentRequestFilterChips
|
||||
@ -247,7 +240,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-start">Action</th>
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -307,7 +300,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-className="tooltip-dark"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</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;
|
||||
@ -18,8 +18,6 @@ import {
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useCreateTask } from "../../hooks/useTasks";
|
||||
import Label from "../common/Label";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const TaskSchema = (maxPlanned) => {
|
||||
return z.object({
|
||||
@ -109,7 +107,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { loading, data: jobRoleData } = useMaster("Job Role");
|
||||
const { loading, data: jobRoleData } = useMaster();
|
||||
|
||||
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
||||
const [displayedSelection, setDisplayedSelection] = useState("");
|
||||
@ -243,57 +241,48 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="row text-start">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
|
||||
<div>
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
rules={{ required: "Organization is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // No label here, use external label if needed
|
||||
options={organizationList ?? []}
|
||||
placeholder="--Select Organization--"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
isLoading={isServiceLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.organizationId && (
|
||||
<small className="danger-text">{errors.organizationId.message}</small>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedOrganization || ""}
|
||||
onChange={(e) =>
|
||||
setSelectedOrganization(e.target.value)
|
||||
}
|
||||
>
|
||||
{isServiceLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Organization--</option>
|
||||
{organizationList?.map((org,index) => (
|
||||
<option key={`${org.id}-${index}`} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
rules={{ required: "Service is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // No label as you have one above or elsewhere
|
||||
options={serviceList ?? []}
|
||||
placeholder="--Select Service--"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
isLoading={isOrgLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.serviceId && (
|
||||
<small className="danger-text">{errors.serviceId.message}</small>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedService || ""}
|
||||
onChange={(e) => setSelectedService(e.target.value)}
|
||||
>
|
||||
{isOrgLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Service--</option>
|
||||
{serviceList?.map((service,index) => (
|
||||
<option key={`${service.id}-${index}`} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -303,7 +292,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{/* Dropdown */}
|
||||
<div className="dropdown position-relative d-inline-block">
|
||||
<a
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${
|
||||
selectedRoles.includes("all") ||
|
||||
selectedRoles.length === 0
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
@ -419,7 +409,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<p className="text-center">Loading employees...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees.map((emp, index) => {
|
||||
filteredEmployees.map((emp,index) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
@ -489,7 +479,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{watch("selectedEmployees")?.map((empId, ind) => {
|
||||
{watch("selectedEmployees")?.map((empId,ind) => {
|
||||
const emp = employees?.data?.find(
|
||||
(emp) => emp.id === empId
|
||||
);
|
||||
|
||||
@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
import { getCachedData } from "../../../slices/apiDataManager";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import useSelect from "../../common/useSelect";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const buildingSchema = z.object({
|
||||
Id: z.string().optional(),
|
||||
@ -22,8 +22,14 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
const methods = useForm({
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
} = useForm({
|
||||
resolver: zodResolver(buildingSchema),
|
||||
defaultValues: {
|
||||
Id: "0",
|
||||
@ -31,23 +37,12 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
description: "",
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const watchedId = watch("Id");
|
||||
|
||||
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
|
||||
onSuccessCallback: () => {
|
||||
onSuccessCallback: (data, variables) => {
|
||||
showToast(
|
||||
watchedId !== "0"
|
||||
watchedId != "0"
|
||||
? "Building updated Successfully"
|
||||
: "Building created Successfully",
|
||||
"success"
|
||||
@ -84,7 +79,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
description: editingBuilding.description,
|
||||
});
|
||||
}
|
||||
}, [editingBuilding, reset]);
|
||||
}, [editingBuilding]);
|
||||
|
||||
const onSubmitHandler = (data) => {
|
||||
const payload = {
|
||||
@ -93,54 +88,36 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
projectId: selectedProject,
|
||||
};
|
||||
|
||||
const infraObject = [
|
||||
let infraObject = [
|
||||
{
|
||||
building: payload,
|
||||
floor: null,
|
||||
workArea: null,
|
||||
},
|
||||
];
|
||||
|
||||
ManageBuilding({ infraObject, projectId: selectedProject });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
||||
<h5 className="text-center mb-2">Manage Buildings</h5>
|
||||
|
||||
{/* Building Select */}
|
||||
<h5 className="text-center mb-2">Manage Buildings </h5>
|
||||
<div className="col-12 text-start">
|
||||
<Label htmlFor="Id" className="form-label">
|
||||
Select Building
|
||||
</Label>
|
||||
<AppFormController
|
||||
name="Id"
|
||||
control={control}
|
||||
rules={{ required: "Building is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Building"
|
||||
options={[
|
||||
{ id: "0", name: "Add New Building" },
|
||||
...(sortedBuildings?.map((b) => ({
|
||||
id: String(b.id),
|
||||
name: b.buildingName,
|
||||
})) ?? []),
|
||||
]}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!sortedBuildings || sortedBuildings.length === 0
|
||||
? "No buildings found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<label className="form-label">Select Building</label>
|
||||
<select
|
||||
{...register("Id")}
|
||||
className="select2 form-select form-select-sm"
|
||||
>
|
||||
<option value="0">Add New Building</option>
|
||||
{sortedBuildings.length > 0 ? (
|
||||
sortedBuildings.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>No buildings found</option>
|
||||
)}
|
||||
/>
|
||||
</select>
|
||||
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
|
||||
</div>
|
||||
|
||||
@ -152,29 +129,28 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
<input
|
||||
{...register("name")}
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.name && <span className="danger-text">{errors.name.message}</span>}
|
||||
{errors.name && (
|
||||
<span className="danger-text">{errors.name.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Description
|
||||
</Label>
|
||||
<Label className="form-label" required>Description</Label>
|
||||
<textarea
|
||||
{...register("description")}
|
||||
rows="5"
|
||||
maxLength="160"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.description && (
|
||||
<span className="danger-text">{errors.description.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<div className="col-12 text-end mt-5">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
@ -186,16 +162,21 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: watchedId !== "0"
|
||||
? "Edit Building"
|
||||
: "Add Building"}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -12,14 +12,12 @@ import { useManageTask } from "../../../hooks/useProjects";
|
||||
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const taskSchema = z
|
||||
.object({
|
||||
activityID: z.string().min(1, "Activity is required"),
|
||||
workCategoryId: z.string().min(1, "Work Category is required"),
|
||||
plannedWork: z.number().min(0.01, "Planned Work must be greater than 0"),
|
||||
plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
|
||||
completedWork: z.number().min(0, "Completed Work must be ≥ 0"),
|
||||
comment: z.string(),
|
||||
})
|
||||
@ -39,7 +37,17 @@ const EditActivityModal = ({
|
||||
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
||||
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
||||
const [selectedActivity, setSelectedActivity] = useState(null);
|
||||
const methods = useForm({
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
setValue,
|
||||
getValues,
|
||||
watch,
|
||||
} = useForm({
|
||||
resolver: zodResolver(taskSchema),
|
||||
defaultValues: {
|
||||
activityID: "",
|
||||
workCategoryId: "",
|
||||
@ -47,11 +55,7 @@ const EditActivityModal = ({
|
||||
completedWork: 0,
|
||||
comment: "",
|
||||
},
|
||||
resolver: zodResolver(taskSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
|
||||
|
||||
const { mutate: UpdateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) => {
|
||||
showToast(response?.message, "success")
|
||||
@ -59,6 +63,8 @@ const EditActivityModal = ({
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
const activityID = watch("activityID");
|
||||
|
||||
const sortedActivities = useMemo(
|
||||
@ -101,7 +107,6 @@ const EditActivityModal = ({
|
||||
const onSubmitForm = (data) => {
|
||||
const payload = {
|
||||
...data,
|
||||
plannedWork: Number(data.plannedWork.toFixed(2)),
|
||||
id: workItem?.workItem?.id ?? workItem?.id,
|
||||
buildingID: building?.id,
|
||||
floorId: floor?.id,
|
||||
@ -120,7 +125,6 @@ const EditActivityModal = ({
|
||||
});
|
||||
}
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Task</h5>
|
||||
@ -130,7 +134,7 @@ const EditActivityModal = ({
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Select Building</label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
value={building?.buildingName}
|
||||
disabled
|
||||
/>
|
||||
@ -139,7 +143,7 @@ const EditActivityModal = ({
|
||||
<div className="col-12 col-md-6">
|
||||
<label className="form-label">Select Floor</label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
value={floor?.floorName}
|
||||
disabled
|
||||
/>
|
||||
@ -149,7 +153,7 @@ const EditActivityModal = ({
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Work Area</label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
value={workArea?.areaName}
|
||||
disabled
|
||||
/>
|
||||
@ -157,7 +161,7 @@ const EditActivityModal = ({
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Service</label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
value={
|
||||
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
|
||||
}
|
||||
@ -170,7 +174,7 @@ const EditActivityModal = ({
|
||||
<label className="form-label">Select Activity</label>
|
||||
<select
|
||||
{...register("activityID")}
|
||||
className="form-select"
|
||||
className="form-select form-select-sm"
|
||||
disabled
|
||||
>
|
||||
<option >Select Activity</option>
|
||||
@ -190,44 +194,33 @@ const EditActivityModal = ({
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="workCategoryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Category"
|
||||
placeholder="Select Category"
|
||||
options={
|
||||
loadingCategories
|
||||
? []
|
||||
: sortedCategories?.map((c) => ({
|
||||
id: String(c.id),
|
||||
name: c.name,
|
||||
})) ?? []
|
||||
}
|
||||
isLoading={loadingCategories}
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
<label className="form-label">Select Work Category</label>
|
||||
<select
|
||||
{...register("workCategoryId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
<option disabled>Select Category</option>
|
||||
{loadingCategories ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
sortedCategories.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<small className="danger-text">{errors.workCategoryId.message}</small>
|
||||
<p className="danger-text">{errors.workCategoryId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-5 text-start">
|
||||
<label className="form-label">Planned Work</label>
|
||||
<input
|
||||
{...register("plannedWork", { valueAsNumber: true })}
|
||||
type="number"
|
||||
step="0.01" // <-- allows 2 decimal places
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.plannedWork && (
|
||||
<p className="danger-text">{errors.plannedWork.message}</p>
|
||||
@ -240,7 +233,7 @@ const EditActivityModal = ({
|
||||
{...register("completedWork", { valueAsNumber: true })}
|
||||
type="number"
|
||||
disabled={getValues("completedWork") > 0}
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.completedWork && (
|
||||
<p className="danger-text">{errors.completedWork.message}</p>
|
||||
@ -250,7 +243,7 @@ const EditActivityModal = ({
|
||||
<div className="col-2 text-start">
|
||||
<label className="form-label">Unit</label>
|
||||
<input
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
disabled
|
||||
value={selectedActivity?.unitOfMeasurement || ""}
|
||||
/>
|
||||
@ -282,7 +275,6 @@ const EditActivityModal = ({
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,8 +6,6 @@ import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import { useSelector } from "react-redux";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
// Schema
|
||||
const floorSchema = z.object({
|
||||
@ -29,12 +27,17 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
);
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
|
||||
const methods = useForm({
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
defaultValues,
|
||||
resolver: zodResolver(floorSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
const watchId = watch("id");
|
||||
const watchBuildingId = watch("buildingId");
|
||||
const { mutate: ManageFloor, isPending } = useManageProjectInfra({
|
||||
@ -45,7 +48,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
: "Floor created Successfully",
|
||||
"success"
|
||||
);
|
||||
reset({ id: "0", floorName: "" });
|
||||
reset({ id: "0", floorName: ""});
|
||||
// onClose?.();
|
||||
},
|
||||
});
|
||||
@ -95,106 +98,62 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Floor</h5>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Select Building
|
||||
</Label>
|
||||
<AppFormController
|
||||
name="buildingId"
|
||||
control={control}
|
||||
rules={{ required: "Building is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Building"
|
||||
options={
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
{...register("buildingId")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleBuildingChange}
|
||||
>
|
||||
<option value="0">Select Building</option>
|
||||
{project?.length > 0 &&
|
||||
project
|
||||
?.filter((b) => b.buildingName)
|
||||
.filter((b) => b.buildingName)
|
||||
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
|
||||
.map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
|
||||
}
|
||||
value={field.value || ""}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("id", "0");
|
||||
setValue("floorName", "");
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingId && (
|
||||
<p className="danger-text">{errors.buildingId.message}</p>
|
||||
)}
|
||||
/>
|
||||
{errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
|
||||
</div>
|
||||
|
||||
{watchBuildingId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label">
|
||||
Select Floor
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="id"
|
||||
control={control}
|
||||
rules={{ required: "Floor is required" }}
|
||||
render={({ field }) => {
|
||||
// Prepare options
|
||||
const floorOptions = [
|
||||
{ id: "0", name: "Add New Floor" },
|
||||
...(selectedBuilding?.floors
|
||||
?.filter((f) => f.floorName)
|
||||
<label className="form-label">Select Floor</label>
|
||||
<select
|
||||
{...register("id")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleFloorChange}
|
||||
>
|
||||
<option value="0">Add New Floor</option>
|
||||
{selectedBuilding?.floors?.length > 0 &&
|
||||
selectedBuilding.floors
|
||||
.filter((f) => f.floorName)
|
||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
|
||||
];
|
||||
|
||||
return (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Floor"
|
||||
options={floorOptions}
|
||||
value={field.value || "0"} // default to "0"
|
||||
onChange={(val) => {
|
||||
field.onChange(val); // update react-hook-form
|
||||
|
||||
if (val === "0") {
|
||||
setValue("floorName", ""); // clear for new floor
|
||||
} else {
|
||||
const floor = selectedBuilding?.floors?.find(f => f.id === val);
|
||||
setValue("floorName", floor?.floorName || "");
|
||||
}
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!selectedBuilding?.floors || selectedBuilding.floors.length === 0
|
||||
? "No floors found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
{errors.id && (
|
||||
<span className="danger-text">{errors.id.message}</span>
|
||||
)}
|
||||
.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
|
||||
</Label>
|
||||
<input
|
||||
{...register("floorName")}
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Floor Name"
|
||||
/>
|
||||
{errors.floorName && (
|
||||
@ -204,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
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
@ -227,7 +186,6 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -12,8 +12,6 @@ import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedS
|
||||
import showToast from "../../../services/toastService";
|
||||
import Label from "../../common/Label";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const taskSchema = z.object({
|
||||
buildingID: z.string().min(1, "Building is required"),
|
||||
@ -78,12 +76,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
setValue("activityID", "");
|
||||
};
|
||||
|
||||
const methods = useForm({
|
||||
defaultValues: defaultModel,
|
||||
resolver: zodResolver(taskSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(taskSchema),
|
||||
defaultValues: defaultModel,
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [activityData, setActivityData] = useState([]);
|
||||
@ -108,10 +112,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
const { mutate: CreateTask, isPending } = useManageTask({
|
||||
onSuccessCallback: (response) => {
|
||||
showToast(response?.message, "success");
|
||||
setValue("activityID", ""),
|
||||
setValue("plannedWork", 0),
|
||||
setValue("completedWork", 0)
|
||||
setValue("comment", "")
|
||||
setValue("activityID",""),
|
||||
setValue("plannedWork",0),
|
||||
setValue("completedWork",0)
|
||||
setValue("comment","")
|
||||
},
|
||||
});
|
||||
useEffect(() => {
|
||||
@ -144,217 +148,152 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Task</h5>
|
||||
</div>
|
||||
{/* Select Building */}
|
||||
<div className="col-6 text-start">
|
||||
<AppFormController
|
||||
name="buildingID"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Building"
|
||||
options={project ?? []}
|
||||
placeholder="Select Building"
|
||||
required
|
||||
labelKey="buildingName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("floorId", "");
|
||||
setValue("workAreaId", "");
|
||||
setSelectedService("");
|
||||
setSelectedGroup("");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("buildingID")}
|
||||
>
|
||||
<option value="">Select Building</option>
|
||||
{project
|
||||
?.filter((b) => b?.buildingName)
|
||||
?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
|
||||
?.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingID && (
|
||||
<small className="danger-text">{errors.buildingID.message}</small>
|
||||
<p className="danger-text">{errors.buildingID.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Select Floor */}
|
||||
{selectedBuilding && (
|
||||
<div className="col-6 text-start">
|
||||
<AppFormController
|
||||
name="floorId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Floor"
|
||||
options={selectedBuilding?.floors ?? []}
|
||||
placeholder={
|
||||
selectedBuilding?.floors?.length > 0
|
||||
? "Select Floor"
|
||||
: "No Floor Found"
|
||||
}
|
||||
required
|
||||
labelKey="floorName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("workAreaId", "");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label className="form-label" required>Select Floor</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("floorId")}
|
||||
>
|
||||
<option value="">Select Floor</option>
|
||||
{selectedBuilding.floors
|
||||
?.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
?.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.floorId && (
|
||||
<small className="danger-text">{errors.floorId.message}</small>
|
||||
<p className="danger-text">{errors.floorId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Work Area */}
|
||||
{/* Work Area Selection */}
|
||||
{selectedFloor && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="workAreaId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Area"
|
||||
options={selectedFloor?.workAreas ?? []}
|
||||
placeholder="Select Work Area"
|
||||
required
|
||||
labelKey="areaName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedService("");
|
||||
setSelectedGroup("");
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label className="form-label" required>Select Work Area</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workAreaId")}
|
||||
>
|
||||
<option value="">Select Work Area</option>
|
||||
{selectedFloor.workAreas
|
||||
?.sort((a, b) => a.areaName.localeCompare(b.areaName))
|
||||
?.map((w) => (
|
||||
<option key={w.id} value={w.id}>
|
||||
{w.areaName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workAreaId && (
|
||||
<small className="danger-text">{errors.workAreaId.message}</small>
|
||||
<p className="danger-text">{errors.workAreaId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Service */}
|
||||
{/* Services Selection */}
|
||||
{selectedWorkArea && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Service"
|
||||
options={assignedServices ?? []}
|
||||
placeholder="Select Service"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedService(value);
|
||||
setSelectedGroup("");
|
||||
setValue("activityGroupId", "");
|
||||
setValue("activityID", "");
|
||||
<Label className="form-label" required>Select Service</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("serviceId")}
|
||||
value={selectedService}
|
||||
// onChange={handleServiceChange}
|
||||
onChange={(e) => {
|
||||
handleServiceChange(e);
|
||||
setValue("serviceId", e.target.value);
|
||||
}}
|
||||
isLoading={servicesLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.serviceId && (
|
||||
<small className="danger-text">{errors.serviceId.message}</small>
|
||||
)}
|
||||
>
|
||||
<option value="">Select Service</option>
|
||||
{servicesLoading && <option>Loading...</option>}
|
||||
{assignedServices?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Select Activity Group */}
|
||||
{/* Activity Group (Organization) Selection */}
|
||||
{selectedService && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="activityGroupId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Activity Group"
|
||||
options={groups ?? []}
|
||||
placeholder="Select Activity Group"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setSelectedGroup(value);
|
||||
setValue("activityID", "");
|
||||
}}
|
||||
isLoading={groupsLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.activityGroupId && (
|
||||
<small className="danger-text">{errors.activityGroupId.message}</small>
|
||||
)}
|
||||
<Label className="form-label" required>Select Activity Group</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("activityGroupId")}
|
||||
value={selectedGroup}
|
||||
onChange={handleGroupChange}
|
||||
>
|
||||
<option value="">Select Group</option>
|
||||
{groupsLoading && <option>Loading...</option>}
|
||||
{groups?.map((g) => (
|
||||
<option key={g.id} value={g.id}>{g.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Select Activity */}
|
||||
{/* Activity Selection */}
|
||||
{selectedGroup && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="activityID"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Activity"
|
||||
options={activities ?? []}
|
||||
placeholder="Select Activity"
|
||||
required
|
||||
labelKey="activityName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={activitiesLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.activityID && (
|
||||
<small className="danger-text">{errors.activityID.message}</small>
|
||||
)}
|
||||
<Label className="form-label" required>Select Activity</Label>
|
||||
<select className="form-select form-select-sm" {...register("activityID")}>
|
||||
<option value="">Select Activity</option>
|
||||
{activitiesLoading && <option>Loading...</option>}
|
||||
{activities?.map((a) => (
|
||||
<option key={a.id} value={a.id}>{a.activityName}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchActivityId && (
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="workCategoryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Category"
|
||||
options={categoryData ?? []}
|
||||
placeholder="Select Work Category"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<label className="form-label">Select Work Category</label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("workCategoryId")}
|
||||
>
|
||||
{categoryData.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.workCategoryId && (
|
||||
<small className="danger-text">{errors.workCategoryId.message}</small>
|
||||
<p className="danger-text">{errors.workCategoryId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -365,7 +304,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
<Label className="form-label" required>Planned Work</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("plannedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.plannedWork && (
|
||||
@ -376,7 +315,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
<label className="form-label">Completed Work</label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("completedWork", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.completedWork && (
|
||||
@ -387,7 +326,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
<label className="form-label">Unit</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
disabled
|
||||
value={selectedActivity?.unitOfMeasurement || ""}
|
||||
/>
|
||||
@ -409,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
</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"
|
||||
@ -427,7 +366,6 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,8 +6,6 @@ import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import { useSelector } from "react-redux";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const workAreaSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
@ -28,14 +26,19 @@ const defaultModel = {
|
||||
const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
const [selectedFloor, setSelectedFloor] = useState(null);
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const methods = useForm({
|
||||
defaultValues: defaultModel,
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId)
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
} = useForm({
|
||||
resolver: zodResolver(workAreaSchema),
|
||||
defaultValues: defaultModel,
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
|
||||
const watchBuildingId = watch("buildingId");
|
||||
const watchFloorId = watch("floorId");
|
||||
const watchWorkAreaId = watch("id");
|
||||
@ -101,91 +104,69 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Work Area</h5>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="buildingId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Building"
|
||||
options={project ?? []}
|
||||
placeholder="Select Building"
|
||||
required
|
||||
labelKey="buildingName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
{...register("buildingId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
<option value="0">Select Building</option>
|
||||
{project?.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingId && (
|
||||
<small className="danger-text">{errors.buildingId.message}</small>
|
||||
<p className="danger-text">{errors.buildingId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{watchBuildingId !== "0" && (
|
||||
<div className="col-12 col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="floorId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Floor"
|
||||
options={selectedBuilding?.floors ?? []}
|
||||
placeholder={
|
||||
selectedBuilding?.floors?.length > 0
|
||||
? "Select Floor"
|
||||
: "No Floor Found"
|
||||
}
|
||||
required
|
||||
labelKey="floorName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("areaName", ""); // reset Work Area name when floor changes
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label className="form-label" required>Select Floor</Label>
|
||||
<select
|
||||
{...register("floorId")}
|
||||
className="form-select form-select-sm"
|
||||
>
|
||||
<option value="0">
|
||||
{selectedBuilding?.floor?.length > 0
|
||||
? "NO Floor Found"
|
||||
: "Select Floor"}
|
||||
</option>
|
||||
|
||||
{selectedBuilding?.floors?.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.floorId && (
|
||||
<small className="danger-text">{errors.floorId.message}</small>
|
||||
<p className="danger-text">{errors.floorId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{watchFloorId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<AppFormController
|
||||
name="id"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Work Area"
|
||||
options={selectedFloor?.workAreas ?? []}
|
||||
placeholder="Create New Work Area"
|
||||
required={false}
|
||||
labelKey="areaName"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
handleWrokAreaChange({ target: { value } }); // preserve your existing handler
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<label className="form-label">Select Work Area</label>
|
||||
<select
|
||||
{...register("id")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleWrokAreaChange}
|
||||
>
|
||||
<option value="0">Create New Work Area</option>
|
||||
{selectedFloor?.workAreas?.length > 0 &&
|
||||
selectedFloor?.workAreas?.map((w) => (
|
||||
<option key={w.id} value={w.id}>
|
||||
{w.areaName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
@ -196,7 +177,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Work Area"
|
||||
{...register("areaName")}
|
||||
/>
|
||||
@ -206,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
</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}>
|
||||
Cancel
|
||||
</button>
|
||||
@ -216,7 +197,6 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -17,8 +17,6 @@ import {
|
||||
useOrganizationsList,
|
||||
} from "../../hooks/useOrganization";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const formatDate = (date) => {
|
||||
@ -44,8 +42,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
1,
|
||||
true
|
||||
);
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
|
||||
const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -76,7 +74,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
pmcId: projects_Details?.pmc?.id || "",
|
||||
});
|
||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
||||
}, [project, projects_Details, reset, data]);
|
||||
}, [project, projects_Details, reset,data]);
|
||||
|
||||
const onSubmitForm = (formData) => {
|
||||
if (project) {
|
||||
@ -87,7 +85,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
id: project,
|
||||
};
|
||||
UpdateProject({ projectId: project, payload: payload });
|
||||
} else {
|
||||
}else{
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
@ -124,7 +122,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Project Name"
|
||||
{...register("name")}
|
||||
/>
|
||||
@ -145,7 +143,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="shortName"
|
||||
name="shortName"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Short Name"
|
||||
{...register("shortName")}
|
||||
/>
|
||||
@ -166,7 +164,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="contactPerson"
|
||||
name="contactPerson"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Contact Person"
|
||||
maxLength={50}
|
||||
{...register("contactPerson")}
|
||||
@ -192,7 +190,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
placeholder="DD-MM-YYYY"
|
||||
maxDate={new Date()} // optional: restrict future dates
|
||||
className="w-100"
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.startDate && (
|
||||
@ -216,7 +213,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
placeholder="DD-MM-YYYY"
|
||||
minDate={getValues("startDate")} // optional: restrict future dates
|
||||
className="w-100"
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.endDate && (
|
||||
@ -229,108 +225,103 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Label htmlFor="modalEditUserStatus" className="form-label">
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Status
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="projectStatusId"
|
||||
control={control}
|
||||
rules={{ required: "Status is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Status"
|
||||
options={PROJECT_STATUS?.map((status) => ({
|
||||
id: status.id,
|
||||
name: status.label,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</label>
|
||||
<select
|
||||
id="modalEditUserStatus"
|
||||
name="modalEditUserStatus"
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("projectStatusId", {
|
||||
required: "Status is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{PROJECT_STATUS.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.projectStatusId && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.projectStatusId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Label htmlFor="promoterId" className="form-label">
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Promoter
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="promoterId"
|
||||
control={control}
|
||||
rules={{ required: "Promoter is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Promoter"
|
||||
options={data?.data ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
noOptionsMessage={() =>
|
||||
!isLoading && (!data?.data || data.data.length === 0)
|
||||
? "No promoters found"
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("promoterId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Promoter</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.promoterId && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.promoterId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Label htmlFor="pmcId" className="form-label">
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
PMC
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="pmcId"
|
||||
control={control}
|
||||
rules={{ required: "PMC is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select PMC"
|
||||
options={data?.data ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
noOptionsMessage={() =>
|
||||
!isLoading && (!data?.data || data.data.length === 0)
|
||||
? "No PMC found"
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("pmcId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select PMC</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.pmcId && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.pmcId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
||||
<span>
|
||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
||||
@ -385,7 +376,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={isPending || isCreating || loading}
|
||||
>
|
||||
{isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -105,7 +105,7 @@ const ProjectCard = ({ project, isCore = true }) => {
|
||||
>
|
||||
{project?.shortName ? project?.shortName : project?.name}
|
||||
</h5>
|
||||
<div className="client-info text-body text-start">
|
||||
<div className="client-info text-body">
|
||||
<span>{project?.shortName ? project?.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,9 +30,6 @@ import { useParams } from "react-router-dom";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { setService } from "../../slices/globalVariablesSlice";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const projectId = useSelectedProject();
|
||||
@ -55,12 +52,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(projectId);
|
||||
|
||||
const { control } = useForm({
|
||||
defaultValues: {
|
||||
serviceId: selectedService || "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setProject(projectInfra);
|
||||
}, [data, projects_Details]);
|
||||
@ -69,11 +60,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
setProject(response);
|
||||
};
|
||||
|
||||
const handleServiceChange = (serviceId) => {
|
||||
dispatch(setService(serviceId));
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModalBuilding && (
|
||||
@ -129,39 +115,37 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
<div className="align-items-center">
|
||||
<div className="row ">
|
||||
<div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
|
||||
<div className="ms-4 mt-n1">
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Service"
|
||||
options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]}
|
||||
placeholder="Choose a Service"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={(val) => {
|
||||
field.onChange(val);
|
||||
handleServiceChange(val);
|
||||
}}
|
||||
isLoading={servicesLoading}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{!servicesLoading &&
|
||||
assignedServices?.length > 0 &&
|
||||
(assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={(e) => dispatch(setService(e.target.value))}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Buttons Section (aligned to right) */}
|
||||
<div className="col-md-8 col-12 text-end mt-4">
|
||||
<div className="col-md-8 col-12 text-end mb-1">
|
||||
{ManageInfra && (
|
||||
<>
|
||||
<button
|
||||
@ -215,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -27,7 +27,6 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
|
||||
const ProjectTab = [
|
||||
{ key: "profile", icon: "bx bx-user", label: "Profile" },
|
||||
{ key: "organization", icon: "bx bx-buildings", label: "Organization" },
|
||||
{ key: "teams", icon: "bx bx-group", label: "Teams" },
|
||||
{
|
||||
key: "infra",
|
||||
@ -42,7 +41,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
hidden: !(DirAdmin || DireManager || DirUser),
|
||||
},
|
||||
{ key: "documents", icon: "bx bx-folder-open", label: "Documents", hidden: !(isViewDocuments || isModifyDocument || isUploadDocument) },
|
||||
|
||||
{ key: "organization", icon: "bx bx-buildings", label: "Organization" },
|
||||
{ key: "setting", icon: "bx bxs-cog", label: "Setting", hidden: !isManageTeam },
|
||||
];
|
||||
return (
|
||||
|
||||
@ -15,7 +15,7 @@ const ProjectAssignedOrgs = () => {
|
||||
label: "Organization Name",
|
||||
getValue: (org) => (
|
||||
<div className="d-flex gap-2 py-1 ">
|
||||
<i className="bx bx-buildings"></i>
|
||||
<i class="bx bx-buildings"></i>
|
||||
<span
|
||||
className="text-truncate d-inline-block "
|
||||
style={{ maxWidth: "150px" }}
|
||||
@ -103,7 +103,7 @@ const ProjectAssignedOrgs = () => {
|
||||
<tbody>
|
||||
{Array.isArray(data) && data.length > 0 ? (
|
||||
data.map((row, i) => (
|
||||
<tr key={i} style={{ height: "50px" }}>
|
||||
<tr key={i}>
|
||||
{orgList.map((col) => (
|
||||
<td key={col.key} className={col.align}>
|
||||
{col.getValue(row)}
|
||||
|
||||
@ -7,7 +7,7 @@ const ProjectOrganizations = () => {
|
||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||
const selectedProject = useSelectedProject();
|
||||
return (
|
||||
<div className="card pb-10 " >
|
||||
<div className="card pb-10" >
|
||||
<div className="card-header">
|
||||
<div className="d-flex justify-content-end px-2">
|
||||
<button
|
||||
@ -21,7 +21,7 @@ const ProjectOrganizations = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-min-h table-responsive">
|
||||
<div className="row modal-min-h">
|
||||
<ProjectAssignedOrgs />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,8 +10,6 @@ import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import showToast from "../../services/toastService";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
export const ProjectPermissionSchema = z.object({
|
||||
employeeId: z.string().min(1, "Employee is required"),
|
||||
@ -56,16 +54,16 @@ const ProjectPermission = () => {
|
||||
?.map((perm) => perm.id) || [];
|
||||
|
||||
setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
|
||||
}, [selectedEmpPermissions, setValue, selectedEmployee]);
|
||||
}, [selectedEmpPermissions, setValue, selectedEmployee]);
|
||||
|
||||
const selectedPermissions = watch("selectedPermissions") || [];
|
||||
const selectedPermissions = watch("selectedPermissions") || [];
|
||||
|
||||
const existingEnabledIds =
|
||||
const existingEnabledIds =
|
||||
selectedEmpPermissions?.permissions
|
||||
?.filter((p) => p.isEnabled)
|
||||
?.map((p) => p.id) || [];
|
||||
|
||||
const hasChanges =
|
||||
const hasChanges =
|
||||
selectedPermissions.length !== existingEnabledIds.length ||
|
||||
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
|
||||
|
||||
@ -117,42 +115,35 @@ const ProjectPermission = () => {
|
||||
<form className="row" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="d-flex justify-content-between align-items-end gap-2 mb-3">
|
||||
<div className="text-start d-flex align-items-center gap-2">
|
||||
{/* <div className="d-block">
|
||||
<div className="d-block">
|
||||
<label className="form-label">Select Employee</label>
|
||||
</div> */}
|
||||
|
||||
<div className="d-block flex-grow-1">
|
||||
<AppFormController
|
||||
name="employeeId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Employee"
|
||||
options={
|
||||
employees
|
||||
</div>
|
||||
<div className="d-block">
|
||||
{" "}
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("employeeId")}
|
||||
disabled={isPending}
|
||||
>
|
||||
{loading ? (
|
||||
<option value="">Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">-- Select Employee --</option>
|
||||
{[...employees]
|
||||
?.sort((a, b) =>
|
||||
`${a?.firstName} ${a?.lastName}`.localeCompare(
|
||||
`${a?.firstName} ${a?.firstName}`?.localeCompare(
|
||||
`${b?.firstName} ${b?.lastName}`
|
||||
)
|
||||
)
|
||||
?.map((emp) => ({
|
||||
id: emp.id,
|
||||
name: `${emp.firstName} ${emp.lastName}`,
|
||||
})) ?? []
|
||||
}
|
||||
placeholder="-- Select Employee --"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={loading}
|
||||
disabled={isPending}
|
||||
className="m-0"
|
||||
/>
|
||||
?.map((emp) => (
|
||||
<option key={emp.id} value={emp.id}>
|
||||
{emp.firstName} {emp.lastName}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.employeeId && (
|
||||
<div className="d-block text-danger small">
|
||||
{errors.employeeId.message}
|
||||
@ -161,7 +152,6 @@ const ProjectPermission = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mt-3 text-end">
|
||||
{hasChanges && (
|
||||
<button
|
||||
|
||||
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
|
||||
}, [selectedProject]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="card h-100">
|
||||
<div className="card-header text-start">
|
||||
<h5 className="card-action-title mb-0">
|
||||
{" "}
|
||||
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -4,9 +4,6 @@ import { useOrganization } from "../../../hooks/useDirectory";
|
||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
||||
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const TeamAssignToProject = ({ closeModal }) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
@ -14,48 +11,53 @@ const TeamAssignToProject = ({ closeModal }) => {
|
||||
const project = useSelectedProject();
|
||||
const { data, isLoading, isError, error } =
|
||||
useProjectAssignedOrganizationsName(project);
|
||||
const { control, watch, formState: { errors } } = useForm({
|
||||
defaultValues: { organizationId: "" },
|
||||
});
|
||||
return (
|
||||
<div className="container">
|
||||
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
|
||||
<h5 className="mb-4">Assign Employee To Project</h5>
|
||||
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||
|
||||
<div className="row align-items-center gx-5 text-start">
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
rules={{ required: "Organization is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Organization"
|
||||
options={data ?? []}
|
||||
placeholder="Choose an Organization"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0 w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.organizationId && (
|
||||
<small className="danger-text">{errors.organizationId.message}</small>
|
||||
<div className="row align-items-center gx-5">
|
||||
<div className="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
{isLoading ? (
|
||||
<select className="form-select form-select-sm w-100" disabled>
|
||||
<option value="">Loading...</option>
|
||||
</select>
|
||||
) : data?.length === 0 ? (
|
||||
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
|
||||
) : (
|
||||
<>
|
||||
<label
|
||||
htmlFor="organization"
|
||||
className="form-label mb-0 text-nowrap"
|
||||
>
|
||||
Select Organization
|
||||
</label>
|
||||
<select
|
||||
id="organization"
|
||||
className="form-select form-select-sm w-100"
|
||||
value={selectedOrg || ""}
|
||||
onChange={(e) => setSelectedOrg(e.target.value)}
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{data.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mt-n5">
|
||||
<div className="d-flex flex-column">
|
||||
<label htmlFor="search" className="form-label mb-1">
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
||||
Search Employee
|
||||
</label>
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
className="form-control w-100"
|
||||
className="form-control form-control-sm w-100"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
|
||||
@ -158,7 +158,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
|
||||
|
||||
return (
|
||||
<div className="position-relative mt-5">
|
||||
<div className=" position-relative">
|
||||
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
||||
<thead className=" position-sticky top-0">
|
||||
<tr>
|
||||
@ -233,15 +233,15 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
||||
))}
|
||||
</tbody>
|
||||
</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
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary mt-2"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
onClick={() => closeModal()}
|
||||
>
|
||||
Cancel
|
||||
</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"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -22,9 +22,6 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import GlobalModel from "../../common/GlobalModel";
|
||||
import TeamAssignToProject from "./TeamAssignToProject";
|
||||
import { SpinnerLoader } from "../../common/Loader";
|
||||
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
const Teams = () => {
|
||||
const selectedProject = useSelectedProject();
|
||||
@ -33,15 +30,9 @@ const Teams = () => {
|
||||
const [employees, setEmployees] = useState([]);
|
||||
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
||||
const [deleteEmployee, setDeleteEmplyee] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State for search term
|
||||
const [selectedService, setSelectedService] = useState(null);
|
||||
const [activeEmployee, setActiveEmployee] = useState(false);
|
||||
const { control, watch } = useForm({
|
||||
defaultValues: {
|
||||
selectedService: "",
|
||||
searchTerm: "",
|
||||
},
|
||||
});
|
||||
const selectedService = watch("selectedService");
|
||||
const searchTerm = watch("searchTerm");
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(selectedProject);
|
||||
@ -104,23 +95,26 @@ const Teams = () => {
|
||||
|
||||
const filteredEmployees = useMemo(() => {
|
||||
if (!projectEmployees) return [];
|
||||
|
||||
let filtered = projectEmployees;
|
||||
|
||||
if (activeEmployee) {
|
||||
filtered = projectEmployees.filter((emp) => !emp.isActive);
|
||||
}
|
||||
|
||||
// Apply search filter if present
|
||||
if (searchTerm?.trim()) {
|
||||
const lower = searchTerm.toLowerCase();
|
||||
filtered = filtered.filter((emp) => {
|
||||
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
|
||||
return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
|
||||
const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
|
||||
return fullName.includes(lower) || jobRole.includes(lower);
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, [projectEmployees, searchTerm, activeEmployee]);
|
||||
|
||||
const handleSearch = (e) => setSearchTerm(e.target.value);
|
||||
const employeeHandler = useCallback(
|
||||
(msg) => {
|
||||
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||
@ -130,7 +124,6 @@ const Teams = () => {
|
||||
[filteredEmployees, refetch]
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("employee", employeeHandler);
|
||||
return () => eventBus.off("employee", employeeHandler);
|
||||
@ -161,37 +154,33 @@ const Teams = () => {
|
||||
<div className="card card-action mb-6">
|
||||
<div className="card-body">
|
||||
<div className="row align-items-center justify-content-between mb-4 g-3">
|
||||
<div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
|
||||
{!servicesLoading && assignedServices && (
|
||||
<div className="col-md-6 col-12 algin-items-center">
|
||||
<div className="d-flex flex-wrap align-items-center gap-3">
|
||||
<div>
|
||||
{!servicesLoading && (
|
||||
<>
|
||||
{assignedServices.length === 1 && (
|
||||
{assignedServices?.length === 1 && (
|
||||
<h5 className="mb-2">{assignedServices[0].name}</h5>
|
||||
)}
|
||||
|
||||
{assignedServices.length > 1 && (
|
||||
<div className="col-12 col-md-6 mb-2 text-start">
|
||||
<AppFormController
|
||||
name="selectedService"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Service"
|
||||
options={[{ id: "", name: "All Services" }, ...assignedServices]}
|
||||
placeholder="Choose a Service"
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={servicesLoading}
|
||||
className="w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{assignedServices?.length > 1 && (
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
||||
<input
|
||||
@ -201,28 +190,26 @@ const Teams = () => {
|
||||
checked={activeEmployee}
|
||||
onChange={handleToggleActive}
|
||||
/>
|
||||
<label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="activeEmployeeSwitch"
|
||||
>
|
||||
{activeEmployee ? "Active Employees" : "In-active Employees"}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
|
||||
<div className="col-12 col-md-4">
|
||||
<AppFormController
|
||||
name="searchTerm"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-100"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search by Name or Role"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
aria-controls="DataTables_Table_0"
|
||||
style={{ maxWidth: "200px" }}
|
||||
value={searchTerm}
|
||||
onChange={handleSearch}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{HasAssignUserPermission && (
|
||||
<button
|
||||
@ -259,7 +246,8 @@ const Teams = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{filteredEmployees
|
||||
{filteredEmployees &&
|
||||
filteredEmployees
|
||||
.sort((a, b) =>
|
||||
(a.firstName || "").localeCompare(b.firstName || "")
|
||||
)
|
||||
|
||||
@ -28,8 +28,6 @@ import { useEmployeesName } from "../../hooks/useEmployees";
|
||||
import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
|
||||
import HoverPopup from "../common/HoverPopup";
|
||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
const {
|
||||
@ -167,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
{/* <select
|
||||
className="form-select"
|
||||
className="form-select form-select-sm"
|
||||
{...register("projectId")}
|
||||
>
|
||||
<option value="">Select Project</option>
|
||||
@ -202,36 +200,34 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="expenseCategoryId"
|
||||
{...register("expenseCategoryId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Category
|
||||
</option>
|
||||
{ExpenseLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
expenseCategories?.map((expense) => (
|
||||
<option key={expense.id} value={expense.id}>
|
||||
{expense.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.expenseCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expenseCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Label htmlFor="title" className="form-label" required>
|
||||
Title
|
||||
@ -239,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("title")}
|
||||
placeholder="Enter title"
|
||||
/>
|
||||
@ -248,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
)}
|
||||
</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">
|
||||
<Label htmlFor="isVariable" className="form-label mb-0" required>
|
||||
Payment Type
|
||||
@ -256,15 +252,16 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="Payment Type"
|
||||
id="payment_type"
|
||||
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
<div className=" w-50">
|
||||
<p>
|
||||
Choose whether the payment amount varies or remains fixed
|
||||
each cycle.
|
||||
<br />
|
||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||
<br />
|
||||
<strong>Fixed:</strong> Amount stays constant.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@ -277,7 +274,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
control={control}
|
||||
defaultValue={defaultRecurringExpense.isVariable ?? false}
|
||||
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">
|
||||
<input
|
||||
type="radio"
|
||||
@ -330,7 +327,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
control={control}
|
||||
minDate={new Date()}
|
||||
className="w-100"
|
||||
size="md"
|
||||
/>
|
||||
{errors.strikeDate && (
|
||||
<small className="danger-text">{errors.strikeDate.message}</small>
|
||||
@ -344,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
@ -358,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</div>
|
||||
|
||||
{/* Payee and Currency */}
|
||||
<div className="row my-2 text-start mt-3">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="payee" className="form-label" required>
|
||||
Payee (Supplier Name/Transporter Name/Other)
|
||||
@ -371,7 +367,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
}
|
||||
error={errors.payee?.message}
|
||||
placeholder="Select or enter payee"
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -379,45 +374,34 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Currency
|
||||
</Label>
|
||||
<select
|
||||
id="currencyId"
|
||||
className="form-select form-select-sm"
|
||||
{...register("currencyId")}
|
||||
>
|
||||
<option value="">Select Currency</option>
|
||||
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Currency"
|
||||
options={currencyData?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
noOptionsMessage={() =>
|
||||
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
|
||||
? "No currency found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{currencyLoading && <option>Loading...</option>}
|
||||
|
||||
{!currencyLoading &&
|
||||
!currencyError &&
|
||||
currencyData?.map((currency) => (
|
||||
<option key={currency.id} value={currency.id}>
|
||||
{`${currency.currencyName} (${currency.symbol})`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.currencyId && (
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 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="d-flex justify-content-start align-items-center gap-2">
|
||||
<Label htmlFor="frequency" className="form-label mb-1" required>
|
||||
<Label htmlFor="frequency" className="form-label mb-0" required>
|
||||
Frequency
|
||||
</Label>
|
||||
<HoverPopup
|
||||
@ -430,69 +414,51 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</div>
|
||||
|
||||
<AppFormController
|
||||
name="frequency"
|
||||
control={control}
|
||||
rules={{ required: "Frequency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label shown above
|
||||
placeholder="Select Frequency"
|
||||
options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
|
||||
id: key,
|
||||
name: label,
|
||||
}))}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
className="m-0 mt-1"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<select
|
||||
id="frequency"
|
||||
className="form-select form-select-sm mt-1"
|
||||
{...register("frequency", { valueAsNumber: true })}
|
||||
>
|
||||
<option value="">Select Frequency</option>
|
||||
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
|
||||
<option key={key} value={key}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{errors.frequency && (
|
||||
<small className="danger-text">{errors.frequency.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-md-6">
|
||||
<Label htmlFor="statusId" className="form-label" required>
|
||||
Status
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
rules={{ required: "Status is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Status"
|
||||
options={statusData ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={statusLoading}
|
||||
noOptionsMessage={() =>
|
||||
!statusLoading && !statusError && (!statusData || statusData.length === 0)
|
||||
? "No status found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<select
|
||||
id="statusId"
|
||||
className="form-select form-select-sm"
|
||||
{...register("statusId")}
|
||||
>
|
||||
<option value="">Select Status</option>
|
||||
{statusLoading && <option>Loading...</option>}
|
||||
{!statusLoading &&
|
||||
!statusError &&
|
||||
statusData?.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.statusId && (
|
||||
<small className="danger-text">{errors.statusId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Payment Buffer Days and End Date */}
|
||||
@ -510,10 +476,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
title="Payment Buffer Days"
|
||||
id="payment_buffer_days"
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
<p>
|
||||
Number of extra days allowed after the due date before
|
||||
payment is considered late.
|
||||
</div>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
@ -523,7 +489,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="paymentBufferDays"
|
||||
className="form-control mt-1"
|
||||
className="form-control form-control-sm mt-1"
|
||||
min="0"
|
||||
step="1"
|
||||
{...register("paymentBufferDays", { valueAsNumber: true })}
|
||||
@ -545,11 +511,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="End Date"
|
||||
id="end_date"
|
||||
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
<p>
|
||||
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>
|
||||
@ -561,7 +526,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
control={control}
|
||||
minDate={StrikeDate}
|
||||
className="w-100 mt-1"
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.endDate && (
|
||||
@ -597,14 +561,14 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="row my-4 text-start">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="description" className="form-label" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
id="description"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("description")}
|
||||
rows="2"
|
||||
></textarea>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
EXPENSE_DRAFT,
|
||||
EXPENSE_REJECTEDBY,
|
||||
@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
|
||||
const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||
const { setManageRequest, setVieRequest, setViewRecurring } =
|
||||
useRecurringExpenseContext();
|
||||
const navigate = useNavigate();
|
||||
@ -70,7 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
align: "text-end",
|
||||
getValue: (e) =>
|
||||
e?.amount
|
||||
? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
|
||||
? `${
|
||||
e?.currency?.symbol ? e.currency.symbol + " " : ""
|
||||
}${e.amount.toLocaleString()}`
|
||||
: "N/A",
|
||||
},
|
||||
@ -111,17 +112,6 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
debouncedSearch
|
||||
);
|
||||
|
||||
const filteredData = useMemo(
|
||||
() =>
|
||||
data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
|
||||
[],
|
||||
[data?.data, filterStatuses]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onDataFiltered(filteredData);
|
||||
}, [filteredData, onDataFiltered]);
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
@ -160,6 +150,10 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
);
|
||||
};
|
||||
|
||||
const filteredData = data?.data?.filter((item) =>
|
||||
filterStatuses.includes(item?.status?.id)
|
||||
);
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setDeletingId(id);
|
||||
DeleteExpense(
|
||||
@ -172,6 +166,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
}
|
||||
);
|
||||
};
|
||||
console.log("Tanish",filteredData)
|
||||
return (
|
||||
<>
|
||||
{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="mx-2">
|
||||
{Array.isArray(filteredData) && filteredData.length > 0 && (
|
||||
@ -198,7 +193,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-end">Action</th>
|
||||
<th className="text-center">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -220,8 +215,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
: col?.getValue(recurringExpense)}
|
||||
</td>
|
||||
))}
|
||||
<td className="sticky-action-column bg-white text-end">
|
||||
<div className="d-flex justify-content-end flex-row gap-2 gap-0">
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex flex-row gap-2 gap-0">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
@ -287,7 +282,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
||||
filteredData.length === 0
|
||||
&& (
|
||||
<div className="d-flex justify-content-center align-items-center h-64">
|
||||
{isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
|
||||
{isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -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
|
||||
key={col.key}
|
||||
className={col.className}
|
||||
// onClick={() =>
|
||||
// setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
// }
|
||||
onClick={() => {
|
||||
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="row align-items-center py-4">
|
||||
|
||||
{/* LEFT — Archive / Unarchive Toggle */}
|
||||
{/* LEFT — Tabs */}
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
|
||||
}`}
|
||||
onClick={() => setShowArchive(false)}
|
||||
className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
|
||||
onClick={() => setShowArchive(!showArchive)}
|
||||
>
|
||||
<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
|
||||
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>
|
||||
|
||||
{/* RIGHT — New Job button */}
|
||||
@ -91,10 +79,9 @@ const Jobs = () => {
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => setManageJob({ isOpen: true, jobId: null })}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Job List */}
|
||||
|
||||
@ -23,8 +23,6 @@ import {
|
||||
useServiceProject,
|
||||
useUpdateServiceProject,
|
||||
} from "../../hooks/useServiceProject";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
const {
|
||||
@ -119,54 +117,51 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</div>
|
||||
<div className="row text-start">
|
||||
<div className="col-12 mb-2">
|
||||
<Label htmlFor="clientId" required>
|
||||
<Label htmlFor="name" required>
|
||||
Client
|
||||
</Label>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 w-100">
|
||||
<div className="flex-grow-1" style={{ minWidth: "250px" }}>
|
||||
<AppFormController
|
||||
name="clientId"
|
||||
control={control}
|
||||
rules={{ required: "Client is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
options={organization?.data ?? []}
|
||||
placeholder="Select Client"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0 w-100"
|
||||
/>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<select
|
||||
className="select2 form-select form-select-sm flex-grow-1"
|
||||
aria-label="Default select example"
|
||||
{...register("clientId", {
|
||||
required: "Client is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Client</option>
|
||||
{organization?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</select>
|
||||
<i
|
||||
className="bx bx-plus-circle bx-xs cursor-pointer text-primary mb-3"
|
||||
className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
openOrgModal({ startStep: 2 });
|
||||
openOrgModal({ startStep: 2 }); // Step 4 = ManagOrg
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors?.clientId && (
|
||||
<small className="danger-text">{errors.clientId.message}</small>
|
||||
<span className="danger-text">{errors.clientId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-4">
|
||||
<div className="col-12 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
Project Name
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("name")}
|
||||
placeholder="Enter Project Name.."
|
||||
/>
|
||||
@ -180,7 +175,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("shortName")}
|
||||
placeholder="Enter Project Short Name.."
|
||||
/>
|
||||
@ -188,38 +183,24 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
<span className="danger-text">{errors.shortName.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="statusId" required>
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
Select Status
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // label already above
|
||||
options={PROJECT_STATUS?.map((status) => ({
|
||||
id: status.id,
|
||||
name: status.label,
|
||||
}))}
|
||||
placeholder="Select Status"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="form-select w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("statusId")}
|
||||
>
|
||||
<option>Select Service</option>
|
||||
{PROJECT_STATUS?.map((status) => (
|
||||
<option key={status.id} value={status.id}>{status.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors?.statusId && (
|
||||
<span className="danger-text">{errors.statusId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-4">
|
||||
<div className="col-12 mb-2">
|
||||
<SelectMultiple
|
||||
options={data?.data}
|
||||
isLoading={isLoading}
|
||||
@ -233,15 +214,18 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-4">
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
Contact Person
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactName")}
|
||||
placeholder="Enter Employee name.."
|
||||
onInput={(e) => {
|
||||
e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
|
||||
}}
|
||||
/>
|
||||
{errors?.contactName && (
|
||||
<span className="danger-text">{errors.contactName.message}</span>
|
||||
@ -253,7 +237,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactEmail")}
|
||||
placeholder="Enter Employee Email.."
|
||||
/>
|
||||
@ -261,14 +245,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
<span className="danger-text">{errors.contactEmail.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-4">
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
maxLength={10}
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("contactPhone")}
|
||||
placeholder="Enter Employee Contact.."
|
||||
onInput={(e) => {
|
||||
@ -287,7 +271,6 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
name="assignedDate"
|
||||
className="w-100"
|
||||
control={control}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-12 mb-2">
|
||||
@ -317,7 +300,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex justify-content-end gap-2 mt-4">
|
||||
<div className="d-flex justify-content-end gap-4">
|
||||
<button
|
||||
className="btn btn-sm btn-outline-secondary"
|
||||
disabled={isPending || isUpdating}
|
||||
|
||||
@ -8,7 +8,6 @@ import { useParams } from "react-router-dom";
|
||||
import Pagination from "../../common/Pagination";
|
||||
import ConfirmModal from "../../common/ConfirmModal";
|
||||
import { SpinnerLoader } from "../../common/Loader";
|
||||
import ViewBranchDetails from "./ViewBranchDetails";
|
||||
|
||||
const ServiceBranch = () => {
|
||||
const { projectId } = useParams();
|
||||
@ -20,7 +19,6 @@ const ServiceBranch = () => {
|
||||
});
|
||||
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -86,7 +84,7 @@ const ServiceBranch = () => {
|
||||
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
||||
<h5 className="mb-0">
|
||||
<i className="bx bx-buildings text-primary"></i>
|
||||
<span className="ms-2 fw-bold">Branches</span>
|
||||
<span className="ms-2 fw-bold">Branchs</span>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
@ -173,31 +171,13 @@ const ServiceBranch = () => {
|
||||
!isError &&
|
||||
data?.data?.length > 0 &&
|
||||
data.data.map((branch) => (
|
||||
<tr
|
||||
key={branch.id}
|
||||
style={{ height: "35px", cursor: showInactive ? "default" : "pointer" }}
|
||||
onClick={(e) => {
|
||||
if (!showInactive && !e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
|
||||
setViewRequest({ branchId: branch.id, view: true });
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
<tr key={branch.id} style={{ height: "35px" }}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`${col.align} py-3`}>
|
||||
{col.getValue(branch)}
|
||||
</td>
|
||||
))}
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
{/* View Icon */}
|
||||
{/* <i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewRequest({ branchId: branch.id, view: true })
|
||||
}
|
||||
></i> */}
|
||||
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
@ -233,16 +213,6 @@ const ServiceBranch = () => {
|
||||
Delete
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
onClick={() =>
|
||||
setViewRequest({ branchId: branch.id, view: true })
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||
<i className="bx bx-show text-primary cursor-pointer me-2"></i>
|
||||
View
|
||||
</a>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<li
|
||||
@ -259,7 +229,6 @@ const ServiceBranch = () => {
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@ -268,17 +237,14 @@ const ServiceBranch = () => {
|
||||
!isError &&
|
||||
(!data?.data || data.data.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan={columns.length + 1}>
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "150px" }}
|
||||
<td
|
||||
colSpan={columns.length + 1}
|
||||
className="text-center py-12"
|
||||
>
|
||||
No Branch Found
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -308,17 +274,6 @@ const ServiceBranch = () => {
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{ViewRequest.view && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
modalType="top"
|
||||
closeModal={() => setViewRequest({ branchId: null, view: false })}
|
||||
>
|
||||
<ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
|
||||
</GlobalModel>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
import React from "react";
|
||||
import { useBranchDetails } from "../../../hooks/useServiceProject";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
|
||||
const ViewBranchDetails = ({ BranchToEdit }) => {
|
||||
const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);
|
||||
|
||||
if (isLoading) return <p>Loading...</p>;
|
||||
if (isError) return <p>Error: {requestError?.message}</p>;
|
||||
|
||||
return (
|
||||
<form className="container px-3">
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Branch Details</h5>
|
||||
</div>
|
||||
<div className="row mb-1 mt-5">
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Branch Name:
|
||||
</label>
|
||||
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Branch Type:
|
||||
</label>
|
||||
<div className="text-muted">{data?.branchName || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-4">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project:
|
||||
</label>
|
||||
<div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="col-md-12 text-start mb-2">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Updated By :
|
||||
</label>
|
||||
<>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.updatedBy?.firstName}
|
||||
lastName={data?.updatedBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.updatedBy?.firstName ?? ""} ${data?.updatedBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="col-md-12 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "125px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.createdBy?.firstName}
|
||||
lastName={data?.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data?.createdAt
|
||||
? formatUTCToLocalTime(data.createdAt, true)
|
||||
: "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<label className="form-label mb-2 fw-semibold">Contact Information:</label>
|
||||
<div className="text-muted">
|
||||
{data?.contactInformation ? (
|
||||
JSON.parse(data.contactInformation).map((contact, index) => (
|
||||
<div key={index} className="mb-3">
|
||||
<div className="text-secondary mb-1">Person {index + 1}</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
|
||||
</div>
|
||||
<div>
|
||||
<label className="fw-semibold mb-1">Number:</label> {contact.contactNumbers?.join(", ") || "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
"N/A"
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewBranchDetails;
|
||||
@ -68,7 +68,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
|
||||
options={data ?? []}
|
||||
placeholder="Choose a Status"
|
||||
required
|
||||
labelKey="name"
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
|
||||
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
|
||||
type="submit"
|
||||
disabled={!watch("comment")?.trim() || isPending}
|
||||
>
|
||||
Submit
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -1,38 +1,56 @@
|
||||
import React, { useMemo } from "react";
|
||||
import React from "react";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
|
||||
import { getColorNameFromHex } from "../../../utils/appUtils";
|
||||
import Timeline from "../../common/TimeLine";
|
||||
|
||||
const JobStatusLog = ({ data }) => {
|
||||
// Prepare timeline items
|
||||
const timelineData = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return data
|
||||
.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
|
||||
.map((log) => ({
|
||||
id: log.id,
|
||||
title: log.nextStatus?.displayName || log.status?.displayName || "Status Updated",
|
||||
description: log.nextStatus?.description || "",
|
||||
timeAgo: log.updatedAt,
|
||||
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
||||
userComment: log.comment,
|
||||
users: log.updatedBy
|
||||
? [
|
||||
{
|
||||
firstName: log.updatedBy.firstName || "",
|
||||
lastName: log.updatedBy.lastName || "",
|
||||
role: log.updatedBy.jobRoleName || "",
|
||||
avatar: log.updatedBy.photo || null,
|
||||
},
|
||||
]
|
||||
: [],
|
||||
}));
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div className="card shadow-none p-0">
|
||||
<div className="card-body p-3">
|
||||
<Timeline items={timelineData} transparent={true} />
|
||||
<div className="card-body p-0">
|
||||
<div className="list-group">
|
||||
{data?.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="list-group-item border-0 border-bottom p-1"
|
||||
>
|
||||
<div className="d-flex justify-content-between">
|
||||
<div>
|
||||
<span className="fw-semibold">
|
||||
{item.nextStatus?.displayName ??
|
||||
item.status?.displayName ??
|
||||
"Status"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="text-secondary">
|
||||
{formatUTCToLocalTime(item?.updatedAt,true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-start mt-2 mx-0 px-0">
|
||||
<Avatar
|
||||
firstName={item.updatedBy?.firstName}
|
||||
lastName={item.updatedBy?.lastName}
|
||||
/>
|
||||
<div className="">
|
||||
<div className="d-flex flex-row gap-3">
|
||||
<span className="fw-semibold">
|
||||
{item.updatedBy?.firstName} {item.updatedBy?.lastName}
|
||||
</span>
|
||||
<span className="text-secondary">
|
||||
{/* <em>{formatUTCToLocalTime(item?.createdAt, true)}</em> */}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-muted text-secondary">
|
||||
{item?.updatedBy?.jobRoleName}
|
||||
</div>
|
||||
<div className="text-wrap">
|
||||
<p className="mb-1 mt-2 text-muted">{item.comment}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -128,11 +128,6 @@ const ManageJob = ({ Job }) => {
|
||||
value: formData.statusId,
|
||||
},
|
||||
];
|
||||
if(payload.length === 0){
|
||||
showToast("Please change any field value", "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
UpdateJob({ id: Job, payload });
|
||||
} else {
|
||||
formData.assignees = formData.assignees.map((emp) => ({
|
||||
@ -145,7 +140,6 @@ const ManageJob = ({ Job }) => {
|
||||
formData.projectId = projectId;
|
||||
|
||||
CreateJob(formData);
|
||||
setManageJob({ isOpen: false, jobId: null });
|
||||
}
|
||||
};
|
||||
|
||||
@ -178,20 +172,6 @@ const ManageJob = ({ Job }) => {
|
||||
<div className="container">
|
||||
<AppFormProvider {...methods}>
|
||||
<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 ">
|
||||
<Label required>Title</Label>
|
||||
<input
|
||||
@ -241,8 +221,8 @@ const ManageJob = ({ Job }) => {
|
||||
options={data ?? []}
|
||||
placeholder="Choose a Status"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
@ -264,7 +244,20 @@ const ManageJob = ({ Job }) => {
|
||||
placeholder="Enter Tag"
|
||||
/>
|
||||
</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">
|
||||
<Label required>Description</Label>
|
||||
<textarea
|
||||
@ -283,7 +276,7 @@ const ManageJob = ({ Job }) => {
|
||||
? "Please wait..."
|
||||
: Job
|
||||
? "Update"
|
||||
: "Assign"}
|
||||
: "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -23,21 +23,20 @@ const ManageJobTicket = ({ Job }) => {
|
||||
);
|
||||
const drawerRef = useRef();
|
||||
const tabsData = [
|
||||
{
|
||||
id: "history",
|
||||
title: "History",
|
||||
icon: "bx bx-time me-2",
|
||||
active: true,
|
||||
content: <JobStatusLog data={data?.updateLogs} />,
|
||||
},
|
||||
{
|
||||
id: "comment",
|
||||
title: "Comments",
|
||||
icon: "bx bx-comment me-2",
|
||||
active: false,
|
||||
active: true,
|
||||
content: <JobComments data={data} />,
|
||||
},
|
||||
|
||||
{
|
||||
id: "history",
|
||||
title: "History",
|
||||
icon: "bx bx-time me-2",
|
||||
active: false,
|
||||
content: <JobStatusLog data={data?.updateLogs} />,
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <JobDetailsSkeleton />;
|
||||
@ -70,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
|
||||
id="STATUS_CHANEG"
|
||||
Mode="click"
|
||||
className=""
|
||||
align="left"
|
||||
align="right"
|
||||
content={
|
||||
<ChangeStatus
|
||||
statusId={data?.status?.id}
|
||||
@ -150,8 +149,7 @@ const ManageJobTicket = ({ Job }) => {
|
||||
<HoverPopup
|
||||
id="BRANCH_DETAILS"
|
||||
Mode="click"
|
||||
align="right"
|
||||
minWidth="340px"
|
||||
align="auto"
|
||||
boundaryRef={drawerRef}
|
||||
content={<BranchDetails branch={data?.projectBranch?.id} />}
|
||||
>
|
||||
|
||||
@ -7,7 +7,6 @@ import GlobalModel from "../common/GlobalModel";
|
||||
import { SpinnerLoader } from "../common/Loader";
|
||||
import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
|
||||
import ServiceProfile from "./ServiceProfile";
|
||||
import ServiceJobs from "../Dashboard/ServiceJobs";
|
||||
|
||||
const ServiceProjectProfile = () => {
|
||||
const { projectId } = useParams();
|
||||
@ -35,15 +34,12 @@ const ServiceProjectProfile = () => {
|
||||
|
||||
<div className="row py-2">
|
||||
<div className="col-md-6 col-lg-5 order-2 mb-6">
|
||||
<ServiceProfile data={data} setIsOpenModal={setIsOpenModal} />
|
||||
<ServiceProfile data={data} setIsOpenModal={setIsOpenModal}/>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 col-lg-7 order-2 mb-6">
|
||||
<ServiceBranch />
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-5 order-2 mb-6">
|
||||
<ServiceJobs/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -22,7 +22,8 @@ export const projectSchema = z.object({
|
||||
contactName: z
|
||||
.string()
|
||||
.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
|
||||
.string()
|
||||
|
||||
@ -66,7 +66,7 @@ const ServiceProjectTeamList = () => {
|
||||
<tbody>
|
||||
{data?.length > 0 ? (
|
||||
data.map((row) => (
|
||||
<tr key={row.id} style={{ height: "50px" }}>
|
||||
<tr key={row.id}>
|
||||
{servceProjectColmen.map((col) => (
|
||||
<td key={col.key} className={col.align}>{col.getValue(row)}</td>
|
||||
))}
|
||||
@ -77,7 +77,6 @@ const ServiceProjectTeamList = () => {
|
||||
<td
|
||||
colSpan={servceProjectColmen.length}
|
||||
className="text-center py-4 border-0"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<SpinnerLoader />
|
||||
@ -86,7 +85,6 @@ const ServiceProjectTeamList = () => {
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
|
||||
<input
|
||||
id="firstName"
|
||||
type="text"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm`}
|
||||
{...register("firstName")}
|
||||
/>
|
||||
{errors.firstName && (
|
||||
@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
|
||||
<input
|
||||
id="lastName"
|
||||
type="text"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("lastName")}
|
||||
/>
|
||||
{errors.lastName && (
|
||||
@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("email")}
|
||||
/>
|
||||
{errors.email && (
|
||||
@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
|
||||
<input
|
||||
id="contactNumber"
|
||||
type="text"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("contactNumber")}
|
||||
inputMode="tel"
|
||||
placeholder="+91 9876543210"
|
||||
|
||||
@ -7,8 +7,6 @@ import { LogoUpload } from './LogoUpload';
|
||||
import showToast from '../../services/toastService';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { EditTenant } from './TenantSchema';
|
||||
import { AppFormController } from '../../hooks/appHooks/useAppForm';
|
||||
import SelectField from '../common/Forms/SelectField';
|
||||
|
||||
const EditProfile = ({ TenantId, onClose }) => {
|
||||
const { data, isLoading, isError, error } = useTenantDetails(TenantId);
|
||||
@ -39,7 +37,7 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
}
|
||||
});
|
||||
|
||||
const { register, control, reset, handleSubmit, formState: { errors } } = methods;
|
||||
const { register, reset, handleSubmit, formState: { errors } } = methods;
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
|
||||
@ -76,122 +74,93 @@ const EditProfile = ({ TenantId, onClose }) => {
|
||||
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
|
||||
<h5>Edit Tenant</h5>
|
||||
|
||||
<div className="col-sm-6 mt-n2 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="firstName" required>First Name</Label>
|
||||
<input id="firstName" type="text" className="form-control " {...register("firstName")} inputMode='text' />
|
||||
<input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
|
||||
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-n2 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="lastName" required>Last Name</Label>
|
||||
<input id="lastName" type="text" className="form-control " {...register("lastName")} />
|
||||
<input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
|
||||
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="contactNumber" required>Contact Number</Label>
|
||||
<input id="contactNumber" type="text" className="form-control " {...register("contactNumber")} inputMode="tel"
|
||||
<input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
|
||||
placeholder="+91 9876543210" />
|
||||
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="domainName" >Domain Name</Label>
|
||||
<input id="domainName" type="text" className="form-control " {...register("domainName")} />
|
||||
<input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
|
||||
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="taxId" >Tax ID</Label>
|
||||
<input id="taxId" type="text" className="form-control " {...register("taxId")} />
|
||||
<input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
|
||||
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="officeNumber" >Office Number</Label>
|
||||
<input id="officeNumber" type="text" className="form-control " {...register("officeNumber")} />
|
||||
<input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
|
||||
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="industryId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Industry"
|
||||
options={Industries ?? []}
|
||||
placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={industryLoading}
|
||||
className="m-0 w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.industryId && (
|
||||
<small className="danger-text">{errors.industryId.message}</small>
|
||||
)}
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="industryId" required>Industry</Label>
|
||||
<select className="form-select form-select-sm" {...register("industryId")}>
|
||||
{industryLoading ? <option value="">Loading...</option> :
|
||||
Industries?.map((indu) => (
|
||||
<option key={indu.id} value={indu.id}>{indu.name}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="reference"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Reference"
|
||||
placeholder="Select Reference"
|
||||
options={reference ?? []}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="shadow-none border py-1 px-2 small m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.reference && (
|
||||
<small className="danger-text">{errors.reference.message}</small>
|
||||
)}
|
||||
<div className="col-sm-6 mt-1 text-start">
|
||||
<Label htmlFor="reference">Reference</Label>
|
||||
<select className="form-select form-select-sm" {...register("reference")}>
|
||||
{reference.map((org) => (
|
||||
<option key={org.val} value={org.val}>{org.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
|
||||
</div>
|
||||
<div className="col-sm-6 text-start">
|
||||
<AppFormController
|
||||
name="organizationSize"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Organization Size"
|
||||
placeholder="Select Organization Size"
|
||||
options={orgSize ?? []}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="shadow-none border py-1 px-2 small m-0"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label htmlFor="organizationSize" required>
|
||||
Organization Size
|
||||
</Label>
|
||||
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("organizationSize")}
|
||||
>
|
||||
{orgSize.map((org) => (
|
||||
<option key={org.val} value={org.val}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.organizationSize && (
|
||||
<small className="danger-text">{errors.organizationSize.message}</small>
|
||||
<div className="danger-text">{errors.organizationSize.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<div className="col-12 mt-1 text-start">
|
||||
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
||||
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
||||
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<div className="col-12 mt-1 text-start">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
||||
{errors.description && <div className="danger-text">{errors.description.message}</div>}
|
||||
|
||||
@ -8,9 +8,6 @@ import { orgSize, reference } from "../../utils/constants";
|
||||
import moment from "moment";
|
||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
import { fill } from "pdf-lib";
|
||||
|
||||
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||
@ -66,11 +63,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
setLogoPreview(logoImage);
|
||||
setLogoName("Uploaded Logo");
|
||||
}
|
||||
}, [getValues]);
|
||||
}, [getValues]);
|
||||
|
||||
|
||||
return (
|
||||
<div className="row g-6 text-start">
|
||||
<div className="row g-2 text-start">
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="organizationName" required>
|
||||
Organization Name
|
||||
@ -78,7 +75,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
|
||||
<input
|
||||
id="organizationName"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("organizationName")}
|
||||
/>
|
||||
{errors.organizationName && (
|
||||
@ -92,7 +89,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</Label>
|
||||
<input
|
||||
id="officeNumber"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("officeNumber")}
|
||||
/>
|
||||
{errors.officeNumber && (
|
||||
@ -106,7 +103,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</Label>
|
||||
<input
|
||||
id="domainName"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("domainName")}
|
||||
/>
|
||||
{errors.domainName && (
|
||||
@ -120,7 +117,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</Label>
|
||||
<input
|
||||
id="taxId"
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("taxId")}
|
||||
/>
|
||||
{errors.taxId && (
|
||||
@ -134,11 +131,10 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
</Label>
|
||||
<DatePicker
|
||||
name="onBoardingDate"
|
||||
size="md"
|
||||
control={control}
|
||||
placeholder="DD-MM-YYYY"
|
||||
maxDate={new Date()}
|
||||
className={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
|
||||
className={errors.onBoardingDate ? "is-invalid" : ""}
|
||||
/>
|
||||
{errors.onBoardingDate && (
|
||||
<div className="invalid-feedback">
|
||||
@ -147,79 +143,73 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="organizationSize"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Organization Size"
|
||||
placeholder="Select Organization Size"
|
||||
options={orgSize ?? []}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="shadow-none border py-1 px-2 small m-0"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="organizationSize" required>
|
||||
Organization Size
|
||||
</Label>
|
||||
|
||||
<select
|
||||
id="organizationSize"
|
||||
className="form-select shadow-none border py-1 px-2"
|
||||
style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
|
||||
{...register("organizationSize", { required: "Organization size is required" })}
|
||||
>
|
||||
{orgSize.map((org) => (
|
||||
<option key={org.val} value={org.val}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{errors.organizationSize && (
|
||||
<small className="danger-text">{errors.organizationSize.message}</small>
|
||||
<div className="danger-text">{errors.organizationSize.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mt-n3">
|
||||
<AppFormController
|
||||
name="industryId"
|
||||
control={control} // make sure `control` comes from useForm
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Industry"
|
||||
placeholder={industryLoading ? "Loading..." : "Select Industry"}
|
||||
options={data ?? []}
|
||||
labelKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={industryLoading}
|
||||
className="shadow-none border py-1 px-2 small"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="industryId" required>
|
||||
Industry
|
||||
</Label>
|
||||
<select
|
||||
id="industryId"
|
||||
className="form-select shadow-none border py-1 px-2 small"
|
||||
{...register("industryId")}
|
||||
>
|
||||
{industryLoading ? (
|
||||
<option value="">Loading...</option>
|
||||
) : (
|
||||
data?.map((indu) => (
|
||||
<option key={indu.id} value={indu.id}>
|
||||
{indu.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.industryId && (
|
||||
<div className="danger-text">{errors.industryId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 mb-2 mb-md-4 mt-n3">
|
||||
<AppFormController
|
||||
name="reference"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Reference"
|
||||
placeholder="Select Reference"
|
||||
options={reference ?? []}
|
||||
labelKey="name"
|
||||
valueKey="val"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="shadow-none border py-1 px-2 small m-0"
|
||||
required
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="col-sm-6">
|
||||
<Label htmlFor="reference" required>Reference</Label>
|
||||
<select
|
||||
id="reference"
|
||||
className="form-select shadow-none border py-1 px-2 small"
|
||||
{...register("reference")}
|
||||
>
|
||||
{reference.map((org) => (
|
||||
<option key={org.val} value={org.val}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.reference && (
|
||||
<small className="danger-text">{errors.reference.message}</small>
|
||||
<div className="danger-text">{errors.reference.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-6 mt-n3">
|
||||
<div className="col-sm-6">
|
||||
<SelectMultiple
|
||||
name="serviceIds"
|
||||
label="Services"
|
||||
@ -239,7 +229,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||
<textarea
|
||||
id="description"
|
||||
rows={3}
|
||||
className={`form-control `}
|
||||
className={`form-control form-control-sm `}
|
||||
{...register("description")}
|
||||
/>
|
||||
{errors.description && (
|
||||
|
||||
@ -65,7 +65,6 @@ const TenantFilterPanel = ({ onApply }) => {
|
||||
endField="endDate"
|
||||
resetSignal={resetKey}
|
||||
defaultRange={false}
|
||||
className="w-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-strat mb-2">
|
||||
|
||||
@ -43,7 +43,6 @@ const TenantForm = () => {
|
||||
const tenantForm = useForm({
|
||||
resolver: zodResolver(newTenantSchema),
|
||||
defaultValues: tenantDefaultValues,
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
const subscriptionForm = useForm({
|
||||
|
||||
@ -114,7 +114,8 @@ const TenantsList = ({
|
||||
align: "text-center",
|
||||
getValue: (t) => (
|
||||
<span
|
||||
className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
|
||||
className={`badge ${
|
||||
getTenantStatus(t.tenantStatus?.id) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{t.tenantStatus?.name || "Unknown"}
|
||||
@ -150,11 +151,12 @@ const TenantsList = ({
|
||||
<tbody>
|
||||
{data?.data.length > 0 ? (
|
||||
data.data.map((tenant) => (
|
||||
<tr key={tenant.id} style={{ height: "50px" }}>
|
||||
<tr key={tenant.id}>
|
||||
{TenantColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
|
||||
className={`d-table-cell px-3 py-2 align-middle ${
|
||||
col.align ?? ""
|
||||
}`}
|
||||
>
|
||||
{col.customRender
|
||||
|
||||
@ -12,8 +12,6 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
|
||||
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const AddPayment = ({ onClose }) => {
|
||||
const { addPayment } = useCollectionContext();
|
||||
@ -62,7 +60,7 @@ const AddPayment = ({ onClose }) => {
|
||||
<Label required>TransanctionId</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("transactionId")}
|
||||
/>
|
||||
{errors.transactionId && (
|
||||
@ -96,29 +94,32 @@ const AddPayment = ({ onClose }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
|
||||
<Label
|
||||
htmlFor="paymentAdjustmentHeadId"
|
||||
className="form-label"
|
||||
required
|
||||
>
|
||||
Payment Adjustment Head
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="paymentAdjustmentHeadId"
|
||||
control={control}
|
||||
rules={{ required: "Payment Adjustment Head is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Payment Head"
|
||||
options={paymentTypes?.data
|
||||
?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isPaymentTypeLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
{...register("paymentAdjustmentHeadId")}
|
||||
>
|
||||
{isPaymentTypeLoading ? (
|
||||
<option>Loading..</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Payment Head</option>
|
||||
{paymentTypes?.data
|
||||
?.sort((a, b) => a.name.localeCompare(b.name))
|
||||
?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
</select>
|
||||
{errors.paymentAdjustmentHeadId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentAdjustmentHeadId.message}
|
||||
@ -126,7 +127,6 @@ const AddPayment = ({ onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="amount" className="form-label" required>
|
||||
Amount
|
||||
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
|
||||
</Label>
|
||||
<textarea
|
||||
id="comment"
|
||||
className="form-control "
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
|
||||
@ -225,7 +225,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() => setViewCollection(row.id)}
|
||||
>
|
||||
<i className="bx bx-show me-2 "></i>
|
||||
<i className="bx bx-show me-2 text-primary"></i>
|
||||
<span>View</span>
|
||||
</a>
|
||||
</li>
|
||||
@ -245,7 +245,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-wallet me-2 "></i>
|
||||
<i className="bx bx-wallet me-2 text-warning"></i>
|
||||
<span>Add Payment</span>
|
||||
</a>
|
||||
</li>
|
||||
@ -263,7 +263,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-check-circle me-2 "></i>
|
||||
<i className="bx bx-check-circle me-2 text-success"></i>
|
||||
<span>Mark Payment</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
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