Compare commits
1 Commits
Adding_dro
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 96bcdffdca |
@ -1,7 +1,7 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
|
<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
|
||||||
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
|
data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
|
||||||
<!-- layout-menu-collapsed layout-menu-hover -->
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|||||||
@ -11,18 +11,6 @@
|
|||||||
top: var(--sticky-top, 0px) !important;
|
top: var(--sticky-top, 0px) !important;
|
||||||
z-index: 1025;
|
z-index: 1025;
|
||||||
}
|
}
|
||||||
.form-control-md {
|
|
||||||
min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
|
|
||||||
padding: 0.18rem 0.60rem;
|
|
||||||
font-size: 0.875rem; /* ~14px */
|
|
||||||
border-radius: var(--bs-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control-md::file-selector-button {
|
|
||||||
padding: 0.32rem 0.75rem;
|
|
||||||
margin: -0.32rem -0.75rem;
|
|
||||||
margin-inline-end: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ===========================% Background_Colors %========================================================== */
|
/* ===========================% Background_Colors %========================================================== */
|
||||||
@ -234,9 +222,7 @@ font-weight: normal;
|
|||||||
.h-min { height: min-content; }
|
.h-min { height: min-content; }
|
||||||
.h-max { height: max-content; }
|
.h-max { height: max-content; }
|
||||||
|
|
||||||
.vh-50 {
|
|
||||||
height: 50vh !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-brand-text {
|
.app-brand-text {
|
||||||
font-size: 1rem;
|
font-size: 1.75rem;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
/* text-transform: lowercase; */
|
/* text-transform: lowercase; */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -149,40 +149,4 @@ function Main () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const html = document.documentElement;
|
|
||||||
|
|
||||||
/******************************
|
|
||||||
* SIDEBAR HOVER BEHAVIOR
|
|
||||||
******************************/
|
|
||||||
document.addEventListener("mouseover", function (e) {
|
|
||||||
const isInsideSidebar = e.target.closest("#layout-menu");
|
|
||||||
|
|
||||||
if (isInsideSidebar && html.classList.contains("layout-menu-collapsed")) {
|
|
||||||
html.classList.add("layout-menu-hover");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener("mouseout", function (e) {
|
|
||||||
const leftSidebar = !e.relatedTarget || !e.relatedTarget.closest("#layout-menu");
|
|
||||||
|
|
||||||
if (leftSidebar) {
|
|
||||||
html.classList.remove("layout-menu-hover");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/******************************
|
|
||||||
* TOGGLE MENU BUTTON OVERRIDE
|
|
||||||
******************************/
|
|
||||||
document.body.addEventListener("click", function (e) {
|
|
||||||
const btn = e.target.closest(".layout-menu-toggle");
|
|
||||||
if (!btn) return;
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
html.classList.toggle("layout-menu-collapsed");
|
|
||||||
html.classList.remove("layout-menu-hover");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@ -20,21 +20,14 @@ import { SpinnerLoader } from "../common/Loader";
|
|||||||
|
|
||||||
const usePagination = (data, itemsPerPage) => {
|
const usePagination = (data, itemsPerPage) => {
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
// const maxPage = Math.ceil(data.length / itemsPerPage);
|
const maxPage = Math.ceil(data.length / itemsPerPage);
|
||||||
const maxPage = Math.max(1, Math.ceil(data.length / itemsPerPage));
|
|
||||||
const currentItems = useMemo(() => {
|
const currentItems = useMemo(() => {
|
||||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||||
const endIndex = startIndex + itemsPerPage;
|
const endIndex = startIndex + itemsPerPage;
|
||||||
return data.slice(startIndex, endIndex);
|
return data.slice(startIndex, endIndex);
|
||||||
}, [data, currentPage, itemsPerPage]);
|
}, [data, currentPage, itemsPerPage]);
|
||||||
|
|
||||||
// const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
|
||||||
|
|
||||||
const paginate = useCallback((pageNumber) => {
|
|
||||||
// keep page within 1..maxPage
|
|
||||||
const p = Math.max(1, Math.min(pageNumber, maxPage));
|
|
||||||
setCurrentPage(p);
|
|
||||||
}, [maxPage]);
|
|
||||||
const resetPage = useCallback(() => setCurrentPage(1), []);
|
const resetPage = useCallback(() => setCurrentPage(1), []);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@ -43,7 +36,6 @@ const usePagination = (data, itemsPerPage) => {
|
|||||||
currentItems,
|
currentItems,
|
||||||
paginate,
|
paginate,
|
||||||
resetPage,
|
resetPage,
|
||||||
setCurrentPage,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -133,16 +125,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
|||||||
resetPage,
|
resetPage,
|
||||||
} = usePagination(filteredSearchData, 20);
|
} = usePagination(filteredSearchData, 20);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// resetPage();
|
|
||||||
// }, [filteredSearchData]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentPage > totalPages) {
|
resetPage();
|
||||||
paginate(totalPages || 1);
|
}, [filteredSearchData]);
|
||||||
}
|
|
||||||
// NOTE: do NOT force reset to page 1 here — keep the same page if still valid
|
|
||||||
}, [filteredSearchData, totalPages, currentPage, paginate]);
|
|
||||||
|
|
||||||
const handler = useCallback(
|
const handler = useCallback(
|
||||||
(msg) => {
|
(msg) => {
|
||||||
@ -159,9 +144,10 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
|
|||||||
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
record.id === msg.response.id ? { ...record, ...msg.response } : record
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
resetPage();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[selectedProject, dateRange]
|
[selectedProject, dateRange, resetPage]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@ -1,108 +1,233 @@
|
|||||||
import React from 'react'
|
|
||||||
import Avatar from "../common/Avatar"; // <-- ADD THIS
|
|
||||||
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { formatFigure } from '../../utils/appUtils';
|
|
||||||
import { SpinnerLoader } from '../common/Loader';
|
|
||||||
|
|
||||||
const AdvancePaymentList = ({ searchString }) => {
|
import React, { useEffect, useMemo } from "react";
|
||||||
|
import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
|
||||||
|
import Error from "../common/Error";
|
||||||
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import Loader, { SpinnerLoader } from "../common/Loader";
|
||||||
|
import { useForm, useFormContext } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { employee } from "../../data/masters";
|
||||||
|
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
|
||||||
|
import { formatFigure } from "../../utils/appUtils";
|
||||||
|
|
||||||
const { data, isError, isLoading, error } =
|
const AdvancePaymentList = ({ employeeId, searchString }) => {
|
||||||
useExpenseAllTransactionsList(searchString);
|
const { setBalance } = useAdvancePaymentContext();
|
||||||
|
const { data, isError, isLoading, error, isFetching } =
|
||||||
|
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||||
|
const records = Array.isArray(data) ? data : [];
|
||||||
|
|
||||||
const rows = data || [];
|
let currentBalance = 0;
|
||||||
const navigate = useNavigate();
|
const rowsWithBalance = records.map((r) => {
|
||||||
|
const isCredit = r.amount > 0;
|
||||||
|
const credit = isCredit ? r.amount : 0;
|
||||||
|
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||||
|
currentBalance += credit - debit;
|
||||||
|
return {
|
||||||
|
id: r.id,
|
||||||
|
description: r.title || "-",
|
||||||
|
projectName: r.project?.name || "-",
|
||||||
|
createdAt: r.createdAt,
|
||||||
|
credit,
|
||||||
|
debit,
|
||||||
|
financeUId: r.financeUId,
|
||||||
|
balance: currentBalance,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const columns = [
|
useEffect(() => {
|
||||||
{
|
if (!employeeId) {
|
||||||
key: "employee",
|
setBalance(null);
|
||||||
label: "Employee Name",
|
return;
|
||||||
align: "text-start",
|
}
|
||||||
customRender: (r) => (
|
|
||||||
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
|
||||||
style={{ cursor: "pointer" }}>
|
|
||||||
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
|
||||||
|
|
||||||
<span className="fw-medium">
|
if (rowsWithBalance.length > 0) {
|
||||||
{r.firstName} {r.lastName}
|
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
||||||
</span>
|
} else {
|
||||||
</div>
|
setBalance(0);
|
||||||
),
|
}
|
||||||
},
|
}, [employeeId, data, setBalance]);
|
||||||
{
|
|
||||||
key: "jobRoleName",
|
|
||||||
label: "Job Role",
|
|
||||||
align: "text-start",
|
|
||||||
customRender: (r) => (
|
|
||||||
<span className="fw-semibold">
|
|
||||||
{r.jobRoleName}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "balanceAmount",
|
|
||||||
label: "Balance (₹)",
|
|
||||||
align: "text-end",
|
|
||||||
customRender: (r) => (
|
|
||||||
<span className="fw-semibold fs-6">
|
|
||||||
{formatFigure(r.balanceAmount, {
|
|
||||||
// type: "currency",
|
|
||||||
currency: "INR",
|
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (!employeeId) {
|
||||||
return (
|
return (
|
||||||
<div className="d-flex justify-content-center align-items-center py-4" style={{ height: "300px" }}>
|
<div
|
||||||
|
className="d-flex justify-content-center align-items-center"
|
||||||
|
style={{ height: "200px" }}
|
||||||
|
>
|
||||||
|
<p className="text-muted m-0">Please select an employee</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading || isFetching) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="d-flex justify-content-center align-items-center"
|
||||||
|
style={{ height: "200px" }}
|
||||||
|
>
|
||||||
<SpinnerLoader />
|
<SpinnerLoader />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
if (isError) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-3">
|
||||||
|
{error?.status === 404
|
||||||
|
? "No advance payment transactions found."
|
||||||
|
: <Error error={error} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: "date",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
Date
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
align: "text-start",
|
||||||
|
},
|
||||||
|
{ key: "description", label: "Description", align: "text-start" },
|
||||||
|
|
||||||
|
{
|
||||||
|
key: "credit",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
Credit <i className="bx bx-rupee text-success"></i>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
align: "text-end",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "debit",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
Debit <i className="bx bx-rupee text-danger"></i>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
align: "text-end",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
key: "balance",
|
||||||
|
label: (
|
||||||
|
<>
|
||||||
|
Balance <i className="bi bi-currency-rupee text-primary"></i>
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
align: "text-end fw-bold",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Handle empty records
|
||||||
|
if (rowsWithBalance.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center text-muted py-3">
|
||||||
|
No advance payment records found.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const DecideCreditOrDebit = ({ financeUId }) => {
|
||||||
|
if (!financeUId) return null;
|
||||||
|
|
||||||
|
const prefix = financeUId?.substring(0, 2).toUpperCase();
|
||||||
|
|
||||||
|
if (prefix === "PR") return <span className="text-success">+</span>;
|
||||||
|
if (prefix === "EX") return <span className="text-danger">-</span>;
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card-datatable" id="payment-request-table">
|
<div className="table-responsive">
|
||||||
<div className="mx-2">
|
<table className="table align-middle">
|
||||||
<table className="table border-top dataTable text-nowrap align-middle">
|
<thead className="table_header_border">
|
||||||
<thead>
|
|
||||||
<tr>
|
<tr>
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<th key={col.key} className={`sorting ${col.align}`}>
|
<th key={col.key} className={col.align}>
|
||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{rows.length > 0 ? (
|
{Array.isArray(data) && data.length > 0 ? (
|
||||||
rows.map((row) => (
|
data.map((row) => (
|
||||||
<tr key={row.id} className="align-middle" style={{ height: "50px" }}>
|
<tr key={row.id}>
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
<td key={col.key} className={`${col.align} p-2`}>
|
||||||
{col.customRender
|
{col.key === "credit" ? (
|
||||||
? col.customRender(row)
|
row.amount > 0 ? (
|
||||||
: col.getValue(row)}
|
<span>{row.amount.toLocaleString("en-IN")}</span>
|
||||||
|
) : (
|
||||||
|
"-"
|
||||||
|
)
|
||||||
|
) : col.key === "debit" ? (
|
||||||
|
row.amount < 0 ? (
|
||||||
|
<span>
|
||||||
|
{Math.abs(row.amount).toLocaleString("en-IN")}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
"-"
|
||||||
|
)
|
||||||
|
) : col.key === "balance" ? (
|
||||||
|
<div className="d-flex align-items-center justify-content-end">
|
||||||
|
{/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
|
||||||
|
<span className="mx-2">
|
||||||
|
{formatFigure(row.currentBalance)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
) : col.key === "date" ? (
|
||||||
|
<small className="text-muted px-1">
|
||||||
|
{formatUTCToLocalTime(row.paidAt)}
|
||||||
|
</small>
|
||||||
|
) : (
|
||||||
|
<div className="d-flex flex-column text-start gap-1 py-1">
|
||||||
|
<small className="fw-semibold text-dark">
|
||||||
|
{row.project?.name || "-"}
|
||||||
|
</small>
|
||||||
|
<small>{row.title || "-"}</small>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
</tr>
|
</tr>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length} className="text-center border-0 py-3">
|
<td
|
||||||
No Employees Found
|
colSpan={columns.length}
|
||||||
|
className="text-center text-muted py-3"
|
||||||
|
>
|
||||||
|
No advance payment records found.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
||||||
|
<tfoot className=" fw-bold">
|
||||||
|
<tr className="tr-group text-dark py-2">
|
||||||
|
<td className="text-start">
|
||||||
|
{" "}
|
||||||
|
<div className="d-flex align-items-center px-1 py-2">
|
||||||
|
Final Balance
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="text-end" colSpan="4">
|
||||||
|
<div className="d-flex align-items-center justify-content-end px-1 py-2">
|
||||||
|
{currentBalance.toLocaleString("en-IN", {
|
||||||
|
style: "currency",
|
||||||
|
currency: "INR",
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
)
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default AdvancePaymentList;
|
export default AdvancePaymentList;
|
||||||
|
|||||||
100
src/components/AdvancePayment/AdvancePaymentList1.jsx
Normal file
100
src/components/AdvancePayment/AdvancePaymentList1.jsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Avatar from "../../components/common/Avatar"; // <-- ADD THIS
|
||||||
|
import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { formatFigure } from '../../utils/appUtils';
|
||||||
|
|
||||||
|
const AdvancePaymentList1 = ({ searchString }) => {
|
||||||
|
|
||||||
|
const { data, isError, isLoading, error } =
|
||||||
|
useExpenseAllTransactionsList(searchString);
|
||||||
|
|
||||||
|
const rows = data || [];
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: "employee",
|
||||||
|
label: "Employee Name",
|
||||||
|
align: "text-start",
|
||||||
|
customRender: (r) => (
|
||||||
|
<div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
|
||||||
|
style={{ cursor: "pointer" }}>
|
||||||
|
<Avatar firstName={r.firstName} lastName={r.lastName} />
|
||||||
|
|
||||||
|
<span className="fw-medium">
|
||||||
|
{r.firstName} {r.lastName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "jobRoleName",
|
||||||
|
label: "Job Role",
|
||||||
|
align: "text-start",
|
||||||
|
customRender: (r) => (
|
||||||
|
<span className="fw-semibold">
|
||||||
|
{r.jobRoleName}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "balanceAmount",
|
||||||
|
label: "Balance (₹)",
|
||||||
|
align: "text-end",
|
||||||
|
customRender: (r) => (
|
||||||
|
<span className="fw-semibold fs-6">
|
||||||
|
{formatFigure(r.balanceAmount, {
|
||||||
|
// type: "currency",
|
||||||
|
currency: "INR",
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
if (isLoading) return <p className="text-center py-4">Loading...</p>;
|
||||||
|
if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card-datatable" id="payment-request-table">
|
||||||
|
<div className="mx-2">
|
||||||
|
<table className="table border-top dataTable text-nowrap align-middle">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<th key={col.key} className={`sorting ${col.align}`}>
|
||||||
|
{col.label}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{rows.length > 0 ? (
|
||||||
|
rows.map((row) => (
|
||||||
|
<tr key={row.id} className="align-middle" style={{ height: "40px" }}>
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td key={col.key} className={`d-table-cell ${col.align} py-3`}>
|
||||||
|
{col.customRender
|
||||||
|
? col.customRender(row)
|
||||||
|
: col.getValue(row)}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={columns.length} className="text-center border-0 py-3">
|
||||||
|
No Employees Found
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AdvancePaymentList1;
|
||||||
@ -1,233 +0,0 @@
|
|||||||
|
|
||||||
import React, { useEffect, useMemo } from "react";
|
|
||||||
import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
|
|
||||||
import Error from "../common/Error";
|
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
||||||
import Loader, { SpinnerLoader } from "../common/Loader";
|
|
||||||
import { useForm, useFormContext } from "react-hook-form";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { employee } from "../../data/masters";
|
|
||||||
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPageDetails";
|
|
||||||
import { formatFigure } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const AdvancePaymentListDetails = ({ employeeId, searchString,tableRef }) => {
|
|
||||||
const { setBalance } = useAdvancePaymentContext();
|
|
||||||
const { data, isError, isLoading, error, isFetching } =
|
|
||||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
|
||||||
const records = Array.isArray(data) ? data : [];
|
|
||||||
|
|
||||||
let currentBalance = 0;
|
|
||||||
const rowsWithBalance = records.map((r) => {
|
|
||||||
const isCredit = r.amount > 0;
|
|
||||||
const credit = isCredit ? r.amount : 0;
|
|
||||||
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
|
||||||
currentBalance += credit - debit;
|
|
||||||
return {
|
|
||||||
id: r.id,
|
|
||||||
description: r.title || "-",
|
|
||||||
projectName: r.project?.name || "-",
|
|
||||||
createdAt: r.createdAt,
|
|
||||||
credit,
|
|
||||||
debit,
|
|
||||||
financeUId: r.financeUId,
|
|
||||||
balance: currentBalance,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!employeeId) {
|
|
||||||
setBalance(null);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rowsWithBalance.length > 0) {
|
|
||||||
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
|
|
||||||
} else {
|
|
||||||
setBalance(0);
|
|
||||||
}
|
|
||||||
}, [employeeId, data, setBalance]);
|
|
||||||
|
|
||||||
if (!employeeId) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="d-flex justify-content-center align-items-center"
|
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
|
||||||
<p className="text-muted m-0">Please select an employee</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isLoading || isFetching) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="d-flex justify-content-center align-items-center"
|
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
|
||||||
<SpinnerLoader />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isError) {
|
|
||||||
return (
|
|
||||||
<div className="text-center py-3">
|
|
||||||
{error?.status === 404
|
|
||||||
? "No advance payment transactions found."
|
|
||||||
: <Error error={error} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
key: "date",
|
|
||||||
label: (
|
|
||||||
<>
|
|
||||||
Date
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
align: "text-start",
|
|
||||||
},
|
|
||||||
{ key: "description", label: "Description", align: "text-start" },
|
|
||||||
|
|
||||||
{
|
|
||||||
key: "credit",
|
|
||||||
label: (
|
|
||||||
<>
|
|
||||||
Credit <i className="bx bx-rupee text-success"></i>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
align: "text-end",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "debit",
|
|
||||||
label: (
|
|
||||||
<>
|
|
||||||
Debit <i className="bx bx-rupee text-danger"></i>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
align: "text-end",
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
key: "balance",
|
|
||||||
label: (
|
|
||||||
<>
|
|
||||||
Balance <i className="bi bi-currency-rupee text-primary"></i>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
align: "text-end fw-bold",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// Handle empty records
|
|
||||||
if (rowsWithBalance.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="text-center text-muted py-3">
|
|
||||||
No advance payment records found.
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const DecideCreditOrDebit = ({ financeUId }) => {
|
|
||||||
if (!financeUId) return null;
|
|
||||||
|
|
||||||
const prefix = financeUId?.substring(0, 2).toUpperCase();
|
|
||||||
|
|
||||||
if (prefix === "PR") return <span className="text-success">+</span>;
|
|
||||||
if (prefix === "EX") return <span className="text-danger">-</span>;
|
|
||||||
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="table-responsive">
|
|
||||||
<table className="table align-middle" ref={tableRef}>
|
|
||||||
<thead className="table_header_border">
|
|
||||||
<tr>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<th key={col.key} className={col.align}>
|
|
||||||
{col.label}
|
|
||||||
</th>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{Array.isArray(data) && data.length > 0 ? (
|
|
||||||
data.map((row) => (
|
|
||||||
<tr key={row.id}>
|
|
||||||
{columns.map((col) => (
|
|
||||||
<td key={col.key} className={`${col.align} p-2`}>
|
|
||||||
{col.key === "credit" ? (
|
|
||||||
row.amount > 0 ? (
|
|
||||||
<span>{row.amount.toLocaleString("en-IN")}</span>
|
|
||||||
) : (
|
|
||||||
"-"
|
|
||||||
)
|
|
||||||
) : col.key === "debit" ? (
|
|
||||||
row.amount < 0 ? (
|
|
||||||
<span>
|
|
||||||
{Math.abs(row.amount).toLocaleString("en-IN")}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
"-"
|
|
||||||
)
|
|
||||||
) : col.key === "balance" ? (
|
|
||||||
<div className="d-flex align-items-center justify-content-end">
|
|
||||||
{/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
|
|
||||||
<span className="mx-2">
|
|
||||||
{formatFigure(row.currentBalance)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : col.key === "date" ? (
|
|
||||||
<small className="text-muted px-1">
|
|
||||||
{formatUTCToLocalTime(row.paidAt)}
|
|
||||||
</small>
|
|
||||||
) : (
|
|
||||||
<div className="d-flex flex-column text-start gap-1 py-1">
|
|
||||||
<small className="fw-semibold text-dark">
|
|
||||||
{row.project?.name || "-"}
|
|
||||||
</small>
|
|
||||||
<small>{row.title || "-"}</small>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
))}
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<tr>
|
|
||||||
<td
|
|
||||||
colSpan={columns.length}
|
|
||||||
className="text-center text-muted py-3"
|
|
||||||
>
|
|
||||||
No advance payment records found.
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
<tfoot className=" fw-bold">
|
|
||||||
<tr className="tr-group text-dark py-2">
|
|
||||||
<td className="text-start">
|
|
||||||
{" "}
|
|
||||||
<div className="d-flex align-items-center px-1 py-2">
|
|
||||||
Final Balance
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="text-end" colSpan="4">
|
|
||||||
<div className="d-flex align-items-center justify-content-end px-1 py-2">
|
|
||||||
{currentBalance.toLocaleString("en-IN", {
|
|
||||||
style: "currency",
|
|
||||||
currency: "INR",
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AdvancePaymentListDetails;
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
import moment from "moment";
|
|
||||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
|
||||||
|
|
||||||
const handleAdvancePaymentExport = (type, data, tableRef) => {
|
|
||||||
if (!data || data.length === 0) return;
|
|
||||||
|
|
||||||
let currentBalance = 0;
|
|
||||||
const exportData = data.map((item) => {
|
|
||||||
const credit = item.amount > 0 ? item.amount : 0;
|
|
||||||
const debit = item.amount < 0 ? Math.abs(item.amount) : 0;
|
|
||||||
currentBalance += credit - debit;
|
|
||||||
|
|
||||||
return {
|
|
||||||
Date: item.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "",
|
|
||||||
Description: item.title || "-", // used only for CSV/Excel
|
|
||||||
Project: item.project?.name || "-",
|
|
||||||
Credit: credit || "",
|
|
||||||
Debit: debit || "",
|
|
||||||
"Finance ID": item.financeUId || "-",
|
|
||||||
Balance: currentBalance,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
// Final row
|
|
||||||
exportData.push({
|
|
||||||
Date: "",
|
|
||||||
Description: "Final Balance",
|
|
||||||
Project: "",
|
|
||||||
Credit: "",
|
|
||||||
Debit: "",
|
|
||||||
"Finance ID": "",
|
|
||||||
Balance: currentBalance,
|
|
||||||
});
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case "csv":
|
|
||||||
exportToCSV(exportData, "advance-payments");
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "excel":
|
|
||||||
exportToExcel(exportData, "advance-payments");
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "pdf":
|
|
||||||
// Create a copy of data ONLY for PDF (without Description)
|
|
||||||
const pdfData = exportData.map((row, index) => {
|
|
||||||
// Detect final row
|
|
||||||
const isFinal = index === exportData.length - 1;
|
|
||||||
|
|
||||||
return {
|
|
||||||
Date: isFinal ? "" : row.Date,
|
|
||||||
Project: isFinal ? "Final Balance" : row.Project,
|
|
||||||
Credit: row.Credit,
|
|
||||||
Debit: row.Debit,
|
|
||||||
"Finance ID": row["Finance ID"],
|
|
||||||
Balance: row.Balance,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
exportToPDF(
|
|
||||||
pdfData,
|
|
||||||
"advance-payments",
|
|
||||||
["Date", "Project", "Credit", "Debit", "Finance ID", "Balance"]
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "print":
|
|
||||||
if (tableRef?.current) printTable(tableRef.current);
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default handleAdvancePaymentExport;
|
|
||||||
@ -39,12 +39,14 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
|||||||
dateTo: localToUtc(formData.dateTo),
|
dateTo: localToUtc(formData.dateTo),
|
||||||
};
|
};
|
||||||
handleFilter(filterPayload);
|
handleFilter(filterPayload);
|
||||||
|
closePanel();
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClear = () => {
|
const onClear = () => {
|
||||||
setResetKey((prev) => prev + 1);
|
setResetKey((prev) => prev + 1);
|
||||||
handleFilter(TaskReportDefaultValue);
|
handleFilter(TaskReportDefaultValue);
|
||||||
reset(TaskReportDefaultValue);
|
reset(TaskReportDefaultValue);
|
||||||
|
closePanel();
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<FormProvider {...methods}>
|
<FormProvider {...methods}>
|
||||||
|
|||||||
@ -147,13 +147,13 @@ const TaskReportList = () => {
|
|||||||
data-bs-placement="left"
|
data-bs-placement="left"
|
||||||
data-bs-html="true"
|
data-bs-html="true"
|
||||||
data-bs-content={`
|
data-bs-content={`
|
||||||
<div className="border border-secondary rounded custom-popover p-2 px-3">
|
<div class="border border-secondary rounded custom-popover p-2 px-3">
|
||||||
${task.teamMembers
|
${task.teamMembers
|
||||||
.map(
|
.map(
|
||||||
(m) => `
|
(m) => `
|
||||||
<div className="d-flex align-items-center gap-2 mb-2">
|
<div class="d-flex align-items-center gap-2 mb-2">
|
||||||
<div className="avatar avatar-xs">
|
<div class="avatar avatar-xs">
|
||||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
|
||||||
}
|
}
|
||||||
</span>
|
</span>
|
||||||
@ -204,34 +204,24 @@ const TaskReportList = () => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="total_pending_task"
|
id="total_pending_task"
|
||||||
title="Total Pending Task"
|
title="Total Pending Task"
|
||||||
content={
|
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||||
<div className="text-wrap" style={{ minWidth: "200px" }}>
|
|
||||||
This shows the total pending tasks for each activity on that date.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
</HoverPopup>
|
</HoverPopup>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th>
|
<th>
|
||||||
<span>
|
<span>
|
||||||
Reported/Planned{" "}
|
Reported/Planned{" "}
|
||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="reportes_and_planned_task"
|
id="reportes_and_planned_task"
|
||||||
title="Reported and Planned Task"
|
title="Reported and Planned Task"
|
||||||
content={
|
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
|
||||||
This shows the reported versus planned tasks for each activity on that date.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||||
</HoverPopup>
|
</HoverPopup>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th>Assign Date</th>
|
<th>Assign Date</th>
|
||||||
<th>Team</th>
|
<th>Team</th>
|
||||||
<th className="text-center">Actions</th>
|
<th className="text-center">Actions</th>
|
||||||
|
|||||||
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
|
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
||||||
<div className="card-title mb-0 text-start">
|
<div className="card-title mb-0 text-start">
|
||||||
|
|||||||
@ -1,345 +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">
|
|
||||||
{/* <p className="fs-5 fs-5">Top Client</p>
|
|
||||||
<small> {data.topClient.name}</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,
|
useDashboardProjectsCardData,
|
||||||
useDashboardTeamsCardData,
|
useDashboardTeamsCardData,
|
||||||
useDashboardTasksCardData,
|
useDashboardTasksCardData,
|
||||||
useAttendanceOverviewData,
|
useAttendanceOverviewData
|
||||||
useGetCollectionOverview,
|
|
||||||
} from "../../hooks/useDashboard_Data";
|
} from "../../hooks/useDashboard_Data";
|
||||||
|
|
||||||
import Projects from "./Projects";
|
import Projects from "./Projects";
|
||||||
@ -18,26 +17,13 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
|
|||||||
import ExpenseStatus from "./ExpenseStatus";
|
import ExpenseStatus from "./ExpenseStatus";
|
||||||
import ExpenseByProject from "./ExpenseByProject";
|
import ExpenseByProject from "./ExpenseByProject";
|
||||||
import ProjectStatistics from "../Project/ProjectStatistics";
|
import ProjectStatistics from "../Project/ProjectStatistics";
|
||||||
import ServiceJobs from "./ServiceJobs";
|
|
||||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
||||||
import {
|
|
||||||
REGULARIZE_ATTENDANCE,
|
|
||||||
SELF_ATTENDANCE,
|
|
||||||
TEAM_ATTENDANCE,
|
|
||||||
} from "../../utils/constants";
|
|
||||||
import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
|
|
||||||
import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";
|
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
|
|
||||||
// Get the selected project ID from Redux store
|
// Get the selected project ID from Redux store
|
||||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||||
const isAllProjectsSelected = projectId === null;
|
const isAllProjectsSelected = projectId === null;
|
||||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
|
||||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
|
||||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
|
||||||
|
|
||||||
const { data,isLoading,isError } = useGetCollectionOverview();
|
|
||||||
console.log("data-->", data);
|
|
||||||
return (
|
return (
|
||||||
<div className="container-fluid mt-5">
|
<div className="container-fluid mt-5">
|
||||||
<div className="row gy-4">
|
<div className="row gy-4">
|
||||||
@ -47,21 +33,33 @@ const Dashboard = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div
|
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
|
||||||
className={`${
|
|
||||||
!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Teams />
|
<Teams />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
|
||||||
className={`${
|
|
||||||
!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<TasksCard />
|
<TasksCard />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{isAllProjectsSelected && (
|
||||||
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
<ProjectCompletionChart />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="col-xxl-6 col-lg-6">
|
||||||
|
<ProjectProgressChart />
|
||||||
|
</div>
|
||||||
|
{!isAllProjectsSelected && (
|
||||||
|
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||||
|
<AttendanceOverview />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isAllProjectsSelected && (
|
||||||
|
<div className="col-xxl-4 col-lg-4">
|
||||||
|
<ProjectStatistics />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="col-12 col-xl-4 col-md-6">
|
<div className="col-12 col-xl-4 col-md-6">
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<ExpenseStatus />
|
<ExpenseStatus />
|
||||||
@ -76,120 +74,9 @@ const Dashboard = () => {
|
|||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<ExpenseByProject />
|
<ExpenseByProject />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{isAllProjectsSelected && (
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ProjectCompletionChart />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-xxl-6 col-lg-6">
|
|
||||||
<ProjectProgressChart />
|
|
||||||
</div>
|
|
||||||
{!isAllProjectsSelected &&
|
|
||||||
(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
|
||||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
|
||||||
<AttendanceOverview />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isAllProjectsSelected && (
|
|
||||||
<div className="col-xxl-4 col-lg-4">
|
|
||||||
<div className="card h-100">
|
|
||||||
<ProjectStatistics />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="col-md-8">
|
|
||||||
{isLoading ? (
|
|
||||||
<CollectionOverviewSkeleton />
|
|
||||||
) : (
|
|
||||||
data && (
|
|
||||||
<div className="card">
|
|
||||||
<TopicBarChart data={data} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dashboard;
|
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>
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import LineChart from "../Charts/LineChart";
|
import LineChart from "../Charts/LineChart";
|
||||||
import { useProjectName } from "../../hooks/useProjects";
|
import { useProjects } from "../../hooks/useProjects";
|
||||||
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
|
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
@ -11,7 +11,7 @@ const ProjectProgressChart = ({
|
|||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
const { projectNames } = useProjectName();
|
const { projects } = useProjects();
|
||||||
const [range, setRange] = useState(DefaultRange);
|
const [range, setRange] = useState(DefaultRange);
|
||||||
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
const [showAllEmployees, setShowAllEmployees] = useState(false);
|
||||||
|
|
||||||
@ -79,9 +79,7 @@ const ProjectProgressChart = ({
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedProjectData = projectNames?.find(
|
const selectedProjectData = projects?.find((p) => p.id === selectedProject);
|
||||||
(p) => p.id === selectedProject
|
|
||||||
);
|
|
||||||
const selectedProjectName = selectedProjectData?.shortName?.trim()
|
const selectedProjectName = selectedProjectData?.shortName?.trim()
|
||||||
? selectedProjectData.shortName
|
? selectedProjectData.shortName
|
||||||
: selectedProjectData?.name;
|
: selectedProjectData?.name;
|
||||||
|
|||||||
@ -1,237 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
|
|
||||||
const ServiceJobs = () => {
|
|
||||||
return (
|
|
||||||
<div className="col-xxl-4 col-lg-6">
|
|
||||||
<div className="card h-100">
|
|
||||||
<div className="card-header d-flex justify-content-between">
|
|
||||||
<div className="card-title mb-0 text-start">
|
|
||||||
<h5 className="mb-1">Service Jobs</h5>
|
|
||||||
<p className="card-subtitle">All Projects</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="card-body p-0">
|
|
||||||
<div className="nav-align-top">
|
|
||||||
|
|
||||||
{/* Tabs */}
|
|
||||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
|
|
||||||
My Jobs
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
|
||||||
Assigned
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
<li className="nav-item">
|
|
||||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
|
||||||
In Progress
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
{/* Tab Content */}
|
|
||||||
<div className="tab-content border-0 mx-1 text-start">
|
|
||||||
|
|
||||||
{/* ---------------------- NEW TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade show active" id="tab-new">
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
|
||||||
<i className="bx bx-check-circle"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-success text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Myrtle Ullrich</h6>
|
|
||||||
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Barry Schowalter</h6>
|
|
||||||
<p className="text-body mb-0">939 Orange, California(CA), 92118</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
|
||||||
<i className="bx bx-check-circle"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-success text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Veronica Herman</h6>
|
|
||||||
<p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Helen Jacobs</h6>
|
|
||||||
<p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---------------------- PREPARING TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade" id="tab-preparing">
|
|
||||||
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
|
||||||
<i className="bx bx-time-five"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-warning text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Oliver Grant</h6>
|
|
||||||
<p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Samantha Lee</h6>
|
|
||||||
<p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
|
||||||
<i className="bx bx-time-five"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-warning text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Marcus Howard</h6>
|
|
||||||
<p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Daniel Foster</h6>
|
|
||||||
<p className="text-body mb-0">312 Marina, California(CA), 94109</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ---------------------- SHIPPING TAB ---------------------- */}
|
|
||||||
<div className="tab-pane fade" id="tab-shipping">
|
|
||||||
|
|
||||||
{/* Entry 1 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
|
||||||
<i className="bx bx-package"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-info text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">James Carter</h6>
|
|
||||||
<p className="text-body mb-0">441 Market St, California(CA), 94111</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Linda Moore</h6>
|
|
||||||
<p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
|
||||||
|
|
||||||
{/* Entry 2 */}
|
|
||||||
<ul className="timeline mb-0">
|
|
||||||
<li className="timeline-item ps-6 border-left-dashed">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
|
||||||
<i className="bx bx-package"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-info text-uppercase">Sender</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">Sarah Bennett</h6>
|
|
||||||
<p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="timeline-item ps-6 border-transparent">
|
|
||||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
|
||||||
<i className="bx bx-map"></i>
|
|
||||||
</span>
|
|
||||||
<div className="timeline-event ps-1">
|
|
||||||
<div className="timeline-header">
|
|
||||||
<small className="text-primary text-uppercase">Receiver</small>
|
|
||||||
</div>
|
|
||||||
<h6 className="my-50">George Simmons</h6>
|
|
||||||
<p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ServiceJobs;
|
|
||||||
@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
|
|||||||
Name
|
Name
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
{errors.name && (
|
||||||
@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="my-3">
|
<div className="mb-3">
|
||||||
<Label htmlFor="description" className="text-start" required>
|
<Label htmlFor="description" className="text-start" required>
|
||||||
Description
|
Description
|
||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="3"
|
rows="3"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
|
|||||||
if (!loading && sorted.length === 0) return <div>No buckets found</div>;
|
if (!loading && sorted.length === 0) return <div>No buckets found</div>;
|
||||||
|
|
||||||
return (
|
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) => (
|
{sorted.map((bucket) => (
|
||||||
<div className="col" key={bucket.id}>
|
<div className="col" key={bucket.id}>
|
||||||
<div className="card h-100">
|
<div className="card h-100">
|
||||||
|
|||||||
@ -61,7 +61,7 @@ const CardViewContact = ({
|
|||||||
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
|
(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>
|
||||||
<div>
|
<div>
|
||||||
{IsActive && (
|
{IsActive && (
|
||||||
|
|||||||
@ -99,7 +99,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
|||||||
/>
|
/>
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<div
|
<div
|
||||||
className="card-datatable table-responsive page-min-h"
|
className="card-datatable table-responsive"
|
||||||
id="horizontal-example"
|
id="horizontal-example"
|
||||||
>
|
>
|
||||||
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
||||||
@ -121,7 +121,7 @@ const ListViewContact = ({ data, Pagination }) => {
|
|||||||
data.map((row, i) => (
|
data.map((row, i) => (
|
||||||
<tr
|
<tr
|
||||||
key={i}
|
key={i}
|
||||||
style={{height: "50px", background: `${!showActive ? "#f8f6f6" : ""}` }}
|
style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
|
||||||
>
|
>
|
||||||
{contactList.map((col) => (
|
{contactList.map((col) => (
|
||||||
<td key={col.key} className={col.align}>
|
<td key={col.key} className={col.align}>
|
||||||
|
|||||||
@ -45,7 +45,7 @@ const ManageBucket1 = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="container m-0 p-0" style={{ minHeight: "00px" }}>
|
<div className="container m-0 p-0" style={{ minHeight: "00px" }}>
|
||||||
<div className="d-flex justify-content-center">
|
<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>
|
</div>
|
||||||
|
|
||||||
{action ? (
|
{action ? (
|
||||||
|
|||||||
@ -19,8 +19,6 @@ import SelectMultiple from "../common/SelectMultiple";
|
|||||||
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
|
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
|
||||||
import InputSuggestions from "../common/InputSuggestion";
|
import InputSuggestions from "../common/InputSuggestion";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageContact = ({ contactId, closeModal }) => {
|
const ManageContact = ({ contactId, closeModal }) => {
|
||||||
// fetch master data
|
// fetch master data
|
||||||
@ -196,7 +194,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
Name
|
Name
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
{errors.name && (
|
||||||
@ -212,7 +210,6 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
value={watch("organization") || ""}
|
value={watch("organization") || ""}
|
||||||
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
|
||||||
error={errors.organization?.message}
|
error={errors.organization?.message}
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -225,7 +222,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
Designation
|
Designation
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("designation")}
|
{...register("designation")}
|
||||||
onChange={handleDesignationChange}
|
onChange={handleDesignationChange}
|
||||||
/>
|
/>
|
||||||
@ -260,7 +257,7 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Emails + Phones */}
|
{/* Emails + Phones */}
|
||||||
<div className="row mt-3">
|
<div className="row mt-1">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
{emailFields.map((field, index) => (
|
{emailFields.map((field, index) => (
|
||||||
<div
|
<div
|
||||||
@ -268,39 +265,22 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
className="row d-flex align-items-center mb-1"
|
className="row d-flex align-items-center mb-1"
|
||||||
>
|
>
|
||||||
<div className="col-5 text-start">
|
<div className="col-5 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Label</label>
|
||||||
name={`contactEmails.${index}.label`}
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register(`contactEmails.${index}.label`)}
|
||||||
<SelectField
|
>
|
||||||
label="Label"
|
<option value="Work">Work</option>
|
||||||
options={[
|
<option value="Personal">Personal</option>
|
||||||
{ id: "Work", name: "Work" },
|
<option value="Other">Other</option>
|
||||||
{ id: "Personal", name: "Personal" },
|
</select>
|
||||||
{ 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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="col-7 text-start mt-n3">
|
<div className="col-7 text-start">
|
||||||
<label className="form-label">Email</label>
|
<label className="form-label">Email</label>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register(`contactEmails.${index}.emailAddress`)}
|
{...register(`contactEmails.${index}.emailAddress`)}
|
||||||
placeholder="email@example.com"
|
placeholder="email@example.com"
|
||||||
/>
|
/>
|
||||||
@ -328,43 +308,27 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
{phoneFields.map((field, index) => (
|
{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">
|
<div className="col-5 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Label</label>
|
||||||
name={`contactPhones.${index}.label`}
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register(`contactPhones.${index}.label`)}
|
||||||
<SelectField
|
>
|
||||||
label="Label"
|
<option value="Office">Office</option>
|
||||||
options={[
|
<option value="Personal">Personal</option>
|
||||||
{ id: "Office", name: "Office" },
|
<option value="Business">Business</option>
|
||||||
{ id: "Personal", name: "Personal" },
|
</select>
|
||||||
{ 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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-7 text-start">
|
||||||
<div className="col-7 text-start mt-n3">
|
|
||||||
<label className="form-label">Phone</label>
|
<label className="form-label">Phone</label>
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register(`contactPhones.${index}.phoneNumber`)}
|
{...register(`contactPhones.${index}.phoneNumber`)}
|
||||||
placeholder="9876543210"
|
placeholder="9876543210"
|
||||||
/>
|
/>
|
||||||
@ -386,43 +350,42 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Category + Projects */}
|
{/* Category + Projects */}
|
||||||
<div className="row">
|
<div className="row my-1">
|
||||||
<div className="col-md-6 text-start">
|
<div className="col-md-6 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Category</label>
|
||||||
name="contactCategoryId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
rules={{ required: "Category is required" }}
|
{...register("contactCategoryId")}
|
||||||
render={({ field }) => (
|
>
|
||||||
<SelectField
|
{contactCategoryLoading && !contactCategory ? (
|
||||||
label="Category"
|
<option disabled value="">
|
||||||
required
|
Loading...
|
||||||
options={contactCategory ?? []}
|
</option>
|
||||||
placeholder="Select Category"
|
) : (
|
||||||
labelKey="name"
|
<>
|
||||||
valueKeyKey="id"
|
<option disabled value="">
|
||||||
value={field.value}
|
Select Category
|
||||||
onChange={field.onChange}
|
</option>
|
||||||
isLoading={contactCategoryLoading && !contactCategory}
|
{contactCategory?.map((cate) => (
|
||||||
className="m-0"
|
<option key={cate.id} value={cate.id}>
|
||||||
/>
|
{cate.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.contactCategoryId && (
|
{errors.contactCategoryId && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
{errors.contactCategoryId.message}
|
{errors.contactCategoryId.message}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
name="projectIds"
|
name="projectIds"
|
||||||
@ -439,14 +402,13 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tags */}
|
{/* Tags */}
|
||||||
<div className="col-12 text-start mt-3">
|
<div className="col-12 text-start">
|
||||||
<TagInput
|
<TagInput
|
||||||
name="tags"
|
name="tags"
|
||||||
label="Tags"
|
label="Tags"
|
||||||
options={contactTags}
|
options={contactTags}
|
||||||
isRequired={true}
|
isRequired={true}
|
||||||
placeholder="Enter Tag"
|
placeholder="Enter Tag"
|
||||||
size="sm"
|
|
||||||
/>
|
/>
|
||||||
{errors.tags && (
|
{errors.tags && (
|
||||||
<small className="danger-text">{errors.tags.message}</small>
|
<small className="danger-text">{errors.tags.message}</small>
|
||||||
@ -455,8 +417,8 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
|
|
||||||
{/* Buckets */}
|
{/* Buckets */}
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-md-12 mt-3 text-start">
|
<div className="col-md-12 mt-1 text-start">
|
||||||
<label className="form-label mb-2">Select Bucket</label>
|
<label className="form-label ">Select Bucket</label>
|
||||||
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
|
||||||
{bucketsLoaging && <p>Loading...</p>}
|
{bucketsLoaging && <p>Loading...</p>}
|
||||||
{buckets?.map((item) => (
|
{buckets?.map((item) => (
|
||||||
@ -492,15 +454,15 @@ const ManageContact = ({ contactId, closeModal }) => {
|
|||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Address</label>
|
<label className="form-label">Address</label>
|
||||||
<textarea
|
<textarea
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
rows="2"
|
rows="2"
|
||||||
{...register("address")}
|
{...register("address")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 text-start mt-3">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Description</label>
|
<label className="form-label">Description</label>
|
||||||
<textarea
|
<textarea
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
rows="2"
|
rows="2"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -9,7 +9,6 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
|
|||||||
import "../common/TextEditor/Editor.css";
|
import "../common/TextEditor/Editor.css";
|
||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
|
import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
|
||||||
import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";
|
|
||||||
|
|
||||||
const NoteCardDirectoryEditable = ({
|
const NoteCardDirectoryEditable = ({
|
||||||
noteItem,
|
noteItem,
|
||||||
@ -23,14 +22,14 @@ const NoteCardDirectoryEditable = ({
|
|||||||
const [isDeleting, setIsDeleting] = useState(false);
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
const [isRestoring, setIsRestoring] = useState(false);
|
const [isRestoring, setIsRestoring] = useState(false);
|
||||||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
|
const [open_contact, setOpen_contact] = useState(null);
|
||||||
|
const [isOpenModalNote, setIsOpenModalNote] = useState(false);
|
||||||
|
|
||||||
const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
|
const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
|
||||||
setEditing(false)
|
setEditing(false)
|
||||||
);
|
);
|
||||||
const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
|
const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
|
||||||
useActiveInActiveNote(() => setIsDeleteModalOpen(false));
|
useActiveInActiveNote(() => setIsDeleteModalOpen(false));
|
||||||
const { setContactOpen } = useDirectoryContext();
|
|
||||||
|
|
||||||
|
|
||||||
const handleUpdateNote = async () => {
|
const handleUpdateNote = async () => {
|
||||||
const payload = {
|
const payload = {
|
||||||
@ -46,6 +45,12 @@ const NoteCardDirectoryEditable = ({
|
|||||||
ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
|
ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const contactProfile = (contactId) => {
|
||||||
|
DirectoryRepository.GetContactProfile(contactId).then((res) => {
|
||||||
|
setOpen_contact(res?.data);
|
||||||
|
setIsOpenModalNote(true);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const handleRestore = async () => {
|
const handleRestore = async () => {
|
||||||
try {
|
try {
|
||||||
@ -83,9 +88,7 @@ const NoteCardDirectoryEditable = ({
|
|||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
className="d-flex ms-3 align-middle cursor-pointer"
|
className="d-flex ms-3 align-middle cursor-pointer"
|
||||||
onClick={() =>
|
onClick={() => contactProfile(noteItem.contactId)}
|
||||||
setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
<span className="fw-bold "> {noteItem?.contactName} </span>{" "}
|
||||||
@ -94,7 +97,6 @@ const NoteCardDirectoryEditable = ({
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex ms-0 align-middle"></div>
|
<div className="d-flex ms-0 align-middle"></div>
|
||||||
<div className="d-flex ms-3 mt-2">
|
<div className="d-flex ms-3 mt-2">
|
||||||
<span className="text-muted">
|
<span className="text-muted">
|
||||||
|
|||||||
@ -197,7 +197,7 @@ const DocumentsList = ({
|
|||||||
const isRestoring = restoringIds.includes(doc.id);
|
const isRestoring = restoringIds.includes(doc.id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr key={doc.id} style={{ height: "50px" }}>
|
<tr key={doc.id}>
|
||||||
{DocumentColumns.map((col) => (
|
{DocumentColumns.map((col) => (
|
||||||
<td key={col.key} className={`sorting ${col.align}`}>
|
<td key={col.key} className={`sorting ${col.align}`}>
|
||||||
{col.customRender
|
{col.customRender
|
||||||
|
|||||||
@ -17,8 +17,6 @@ import {
|
|||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
import { useDocumentContext } from "./Documents";
|
import { useDocumentContext } from "./Documents";
|
||||||
import { isPending } from "@reduxjs/toolkit";
|
import { isPending } from "@reduxjs/toolkit";
|
||||||
import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const toBase64 = (file) =>
|
const toBase64 = (file) =>
|
||||||
new Promise((resolve, reject) => {
|
new Promise((resolve, reject) => {
|
||||||
@ -74,12 +72,9 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
handleSubmit,
|
handleSubmit,
|
||||||
watch,
|
watch,
|
||||||
setValue,
|
setValue,
|
||||||
control,
|
|
||||||
reset,
|
reset,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = methods;
|
} = methods;
|
||||||
|
|
||||||
|
|
||||||
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
|
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
|
||||||
() => {
|
() => {
|
||||||
showToast("Document Uploaded Successfully", "success");
|
showToast("Document Uploaded Successfully", "success");
|
||||||
@ -119,7 +114,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
const DocumentPayload = { ...payload, entityId: Entity };
|
const DocumentPayload = { ...payload, entityId: Entity };
|
||||||
UploadDocument(DocumentPayload);
|
UploadDocument(DocumentPayload);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: DocData,
|
data: DocData,
|
||||||
@ -139,7 +134,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
|
const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
|
||||||
categoryId || null
|
categoryId || null
|
||||||
);
|
);
|
||||||
const { data: DocumentTags } = useDocumentTags()
|
const {data:DocumentTags} = useDocumentTags()
|
||||||
|
|
||||||
// Update schema whenever document type changes
|
// Update schema whenever document type changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -236,74 +231,66 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
|
|
||||||
const isPending = isUploading || isUpdating;
|
const isPending = isUploading || isUpdating;
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<div className="p-2">
|
<div className="p-2">
|
||||||
<h5 className="">Upload New Document</h5>
|
<p className="fw-bold fs-6">Upload New Document</p>
|
||||||
<FormProvider key={documentTypeId} {...methods}>
|
<FormProvider key={documentTypeId} {...methods}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
|
||||||
{/* Category */}
|
{/* Category */}
|
||||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
<div className="mb-2">
|
||||||
<AppFormController
|
<Label htmlFor="documentCategoryId" required>Document Category</Label>
|
||||||
name="documentCategoryId"
|
<select
|
||||||
control={control}
|
{...register("documentCategoryId")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
>
|
||||||
label="Document Category"
|
{isLoading && (
|
||||||
options={DocumentCategories ?? []}
|
<option disabled value="">
|
||||||
placeholder="Select Category"
|
Loading...
|
||||||
required
|
</option>
|
||||||
labelKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={isLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
{!isLoading && <option value="">Select Category</option>}
|
||||||
|
{DocumentCategories?.map((type) => (
|
||||||
|
<option key={type.id} value={type.id}>
|
||||||
|
{type.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
{errors.documentCategoryId && (
|
{errors.documentCategoryId && (
|
||||||
<small className="danger-text">
|
<div className="danger-text">
|
||||||
{errors.documentCategoryId.message}
|
{errors.documentCategoryId.message}
|
||||||
</small>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* Type */}
|
{/* Type */}
|
||||||
{categoryId && (
|
{categoryId && (
|
||||||
<div className="col-12 col-md-12 mb-2 mb-md-4">
|
<div className="mb-2">
|
||||||
<AppFormController
|
<Label htmlFor="documentTypeId" required>Document Type</Label>
|
||||||
name="documentTypeId"
|
<select
|
||||||
control={control}
|
{...register("documentTypeId")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
>
|
||||||
label="Document Type"
|
{isTypeLoading && (
|
||||||
options={DocumentTypes ?? []}
|
<option disabled value="">
|
||||||
placeholder="Select Document Type"
|
Loading...
|
||||||
required
|
</option>
|
||||||
labelKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={isTypeLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
{DocumentTypes?.map((type) => (
|
||||||
|
<option key={type.id} value={type.id}>
|
||||||
|
{type.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
{errors.documentTypeId && (
|
{errors.documentTypeId && (
|
||||||
<small className="danger-text">
|
<div className="danger-text">
|
||||||
{errors.documentTypeId.message}
|
{errors.documentTypeId.message}
|
||||||
</small>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
{/* Document ID */}
|
{/* Document ID */}
|
||||||
<div className="mb-4">
|
<div className="mb-2">
|
||||||
<label
|
<label
|
||||||
htmlFor="documentId"
|
htmlFor="documentId"
|
||||||
required={selectedType?.isMandatory ?? false}
|
required={selectedType?.isMandatory ?? false}
|
||||||
@ -312,7 +299,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("documentId")}
|
{...register("documentId")}
|
||||||
/>
|
/>
|
||||||
{errors.documentId && (
|
{errors.documentId && (
|
||||||
@ -327,7 +314,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
{errors.name && (
|
||||||
@ -338,7 +325,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
|
|
||||||
|
|
||||||
{/* Upload */}
|
{/* Upload */}
|
||||||
<div className="row my-4">
|
<div className="row my-2">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="attachment" required>Upload Document</Label>
|
<Label htmlFor="attachment" required>Upload Document</Label>
|
||||||
|
|
||||||
@ -397,7 +384,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-4">
|
<div className="mb-2">
|
||||||
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
|
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
|
||||||
{errors.tags && (
|
{errors.tags && (
|
||||||
<small className="danger-text">{errors.tags.message}</small>
|
<small className="danger-text">{errors.tags.message}</small>
|
||||||
@ -405,7 +392,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div className="mb-4">
|
<div className="mb-2">
|
||||||
<Label htmlFor="description" required>Description</Label>
|
<Label htmlFor="description" required>Description</Label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="2"
|
rows="2"
|
||||||
@ -438,7 +425,6 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
|
|||||||
</form>
|
</form>
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
</div>
|
</div>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
|
|||||||
if (isLoading) return <div>Loading...</div>
|
if (isLoading) return <div>Loading...</div>
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="card page-min-h mt-3">
|
<div className="card h-100 mt-4">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="my-0 text-start">
|
<div className="my-0 text-start">
|
||||||
<DateRangePicker
|
<DateRangePicker
|
||||||
|
|||||||
@ -71,7 +71,7 @@ const EmpAttendance = () => {
|
|||||||
<AttendLogs Id={attendanceId} />
|
<AttendLogs Id={attendanceId} />
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
<div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
|
<div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
|
||||||
<div
|
<div
|
||||||
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
className="dataTables_length text-start py-2 d-flex justify-content-between "
|
||||||
id="DataTables_Table_0_length"
|
id="DataTables_Table_0_length"
|
||||||
@ -103,9 +103,6 @@ const EmpAttendance = () => {
|
|||||||
<th className="border-top-1" colSpan={2}>
|
<th className="border-top-1" colSpan={2}>
|
||||||
Name
|
Name
|
||||||
</th>
|
</th>
|
||||||
<th className="border-top-1" colSpan={2}>
|
|
||||||
ProjectName
|
|
||||||
</th>
|
|
||||||
<th className="border-top-1">Date</th>
|
<th className="border-top-1">Date</th>
|
||||||
<th>
|
<th>
|
||||||
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
<i className="bx bxs-down-arrow-alt text-success"></i>{" "}
|
||||||
@ -121,7 +118,7 @@ const EmpAttendance = () => {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{currentItems?.map((attendance, index) => (
|
{currentItems?.map((attendance, index) => (
|
||||||
<tr key={index}>
|
<tr key={index}>
|
||||||
<td colSpan={3}>
|
<td colSpan={2}>
|
||||||
<div className="d-flex justify-content-start align-items-center">
|
<div className="d-flex justify-content-start align-items-center">
|
||||||
<Avatar
|
<Avatar
|
||||||
firstName={attendance.firstName}
|
firstName={attendance.firstName}
|
||||||
@ -136,7 +133,6 @@ const EmpAttendance = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>{attendance.projectName}</td>
|
|
||||||
<td>
|
<td>
|
||||||
{" "}
|
{" "}
|
||||||
{moment(attendance.checkInTime).format("DD-MMM-YYYY")}
|
{moment(attendance.checkInTime).format("DD-MMM-YYYY")}
|
||||||
|
|||||||
@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
|
|||||||
<EmpOverview profile={profile}></EmpOverview>
|
<EmpOverview profile={profile}></EmpOverview>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col col-sm-6 mt-3">
|
<div className="col col-sm-6 pt-5">
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<small className="card-text text-uppercase text-body-secondary small text-start d-block">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-sm-6 pt-2">
|
<div className="col-12 col-sm-6 pt-5">
|
||||||
<EmpReportingManager
|
<EmpReportingManager
|
||||||
employeeId={profile?.id}
|
employeeId={profile?.id}
|
||||||
employee={profile}
|
employee={profile}
|
||||||
|
|||||||
@ -6,12 +6,10 @@ import { useParams } from "react-router-dom";
|
|||||||
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
|
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
|
||||||
|
|
||||||
const EmpDocuments = ({ profile, loggedInUser }) => {
|
const EmpDocuments = ({ profile, loggedInUser }) => {
|
||||||
const { employeeId } = useParams()
|
const {employeeId} = useParams()
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="mt-3">
|
|
||||||
<Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
|
<Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
|
|||||||
const { loggedInUserProfile } = useProfile();
|
const { loggedInUserProfile } = useProfile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row mt-n2">
|
<div className="row">
|
||||||
<div className="col-12 mb-4">
|
<div className="col-12 mb-4">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
|
|||||||
@ -17,8 +17,6 @@ import DatePicker from "../common/DatePicker";
|
|||||||
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
||||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -149,7 +147,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
message: "Only letters are allowed",
|
message: "Only letters are allowed",
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="firstName"
|
id="firstName"
|
||||||
placeholder="First Name"
|
placeholder="First Name"
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
@ -175,7 +173,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
message: "Only letters are allowed",
|
message: "Only letters are allowed",
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="middleName"
|
id="middleName"
|
||||||
placeholder="Middle Name"
|
placeholder="Middle Name"
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
@ -203,7 +201,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
message: "Only letters are allowed",
|
message: "Only letters are allowed",
|
||||||
},
|
},
|
||||||
})}
|
})}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="lastName"
|
id="lastName"
|
||||||
placeholder="Last Name"
|
placeholder="Last Name"
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
@ -233,7 +231,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
{...register("email")}
|
{...register("email")}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="example@domain.com"
|
placeholder="example@domain.com"
|
||||||
maxLength={80}
|
maxLength={80}
|
||||||
aria-describedby="Email"
|
aria-describedby="Email"
|
||||||
@ -257,7 +255,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
id="phoneNumber"
|
id="phoneNumber"
|
||||||
{...register("phoneNumber")}
|
{...register("phoneNumber")}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Phone Number"
|
placeholder="Phone Number"
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
@ -274,7 +272,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row mb-3"></div>
|
<div className="row mb-3"></div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
{/* <div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>
|
||||||
Gender
|
Gender
|
||||||
</Label>
|
</Label>
|
||||||
@ -302,44 +300,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
{errors.gender.message}
|
{errors.gender.message}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{errors.gender && (
|
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
|
||||||
{errors.gender.message}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-sm-4">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>
|
||||||
Birth Date
|
Birth Date
|
||||||
@ -397,7 +358,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
id="currentAddress"
|
id="currentAddress"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Current Address"
|
placeholder="Current Address"
|
||||||
aria-label="Current Address"
|
aria-label="Current Address"
|
||||||
aria-describedby="basic-icon-default-message2"
|
aria-describedby="basic-icon-default-message2"
|
||||||
@ -427,7 +388,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
|
|
||||||
<textarea
|
<textarea
|
||||||
id="permanentAddress"
|
id="permanentAddress"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Permanent Address"
|
placeholder="Permanent Address"
|
||||||
aria-label="Permanent Address"
|
aria-label="Permanent Address"
|
||||||
aria-describedby="basic-icon-default-message2"
|
aria-describedby="basic-icon-default-message2"
|
||||||
@ -458,34 +419,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>
|
||||||
Organization
|
Organization
|
||||||
</Label>
|
</Label>
|
||||||
|
<div className="input-group">
|
||||||
<div>
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="organizationId"
|
{...register("organizationId")}
|
||||||
control={control}
|
id="organizationId"
|
||||||
render={({ field }) => (
|
aria-label=""
|
||||||
<SelectField
|
>
|
||||||
label="" // Already showing label above
|
<option disabled value="">
|
||||||
options={
|
Select Organization
|
||||||
organzationList?.data
|
</option>
|
||||||
?.sort((a, b) => a?.name?.localeCompare(b?.name))
|
{organzationList?.data
|
||||||
?.map((item) => ({
|
.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||||
id: item.id,
|
.map((item) => (
|
||||||
name: item.name,
|
<option value={item?.id} key={item?.id}>
|
||||||
})) || []
|
{item?.name}
|
||||||
}
|
</option>
|
||||||
placeholder="Select Organization"
|
))}
|
||||||
required
|
</select>
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
className="m-0 form-select-sm w-100"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors.organizationId && (
|
{errors.organizationId && (
|
||||||
<div
|
<div
|
||||||
className="danger-text text-start justify-content-center"
|
className="danger-text text-start justify-content-center"
|
||||||
@ -496,7 +448,6 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="col-sm-6 d-flex align-items-center mt-2">
|
<div className="col-sm-6 d-flex align-items-center mt-2">
|
||||||
<label className="form-check-label d-flex align-items-center">
|
<label className="form-check-label d-flex align-items-center">
|
||||||
<input
|
<input
|
||||||
@ -517,42 +468,46 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row mb-3">
|
<div className="row mb-3">
|
||||||
<div className="col-sm-4 text-start">
|
<div className="col-sm-4">
|
||||||
<AppFormController
|
<Label className="form-text text-start" required>
|
||||||
name="jobRoleId"
|
Official Designation
|
||||||
control={control}
|
</Label>
|
||||||
render={({ field }) => (
|
<div className="input-group">
|
||||||
<SelectField
|
<select
|
||||||
label="Official Designation"
|
className="form-select form-select-sm"
|
||||||
required
|
{...register("jobRoleId")}
|
||||||
options={[...job_role].sort((a, b) =>
|
id="jobRoleId"
|
||||||
a?.name?.localeCompare(b?.name)
|
aria-label=""
|
||||||
)}
|
>
|
||||||
placeholder="Select Role"
|
<option disabled value="">
|
||||||
labelKey="name"
|
Select Role
|
||||||
valueKeyKey="id"
|
</option>
|
||||||
value={field.value}
|
{[...job_role]
|
||||||
onChange={field.onChange}
|
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||||
className="m-0"
|
.map((item) => (
|
||||||
/>
|
<option value={item?.id} key={item.id}>
|
||||||
)}
|
{item?.name}{" "}
|
||||||
/>
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
{errors.jobRoleId && (
|
{errors.jobRoleId && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.jobRoleId.message}
|
{errors.jobRoleId.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-sm-4">
|
||||||
<div className="col-sm-4 mt-n1">
|
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>
|
||||||
Emergency Contact Person
|
Emergency Contact Person
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("emergencyContactPerson")}
|
{...register("emergencyContactPerson")}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="emergencyContactPerson"
|
id="emergencyContactPerson"
|
||||||
maxLength={50}
|
maxLength={50}
|
||||||
placeholder="Contact Person"
|
placeholder="Contact Person"
|
||||||
@ -566,14 +521,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-sm-4 mt-n1">
|
<div className="col-sm-4">
|
||||||
<Label className="form-text text-start" required>
|
<Label className="form-text text-start" required>
|
||||||
Emergency Phone Number
|
Emergency Phone Number
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("emergencyPhoneNumber")}
|
{...register("emergencyPhoneNumber")}
|
||||||
className="form-control phone-mask"
|
className="form-control form-control-sm phone-mask"
|
||||||
id="emergencyPhoneNumber"
|
id="emergencyPhoneNumber"
|
||||||
placeholder="Phone Number"
|
placeholder="Phone Number"
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
@ -596,7 +551,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("aadharNumber")}
|
{...register("aadharNumber")}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="aadharNumber"
|
id="aadharNumber"
|
||||||
placeholder="AADHAR Number"
|
placeholder="AADHAR Number"
|
||||||
maxLength={12}
|
maxLength={12}
|
||||||
@ -614,7 +569,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
{...register("panNumber")}
|
{...register("panNumber")}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
id="panNumber"
|
id="panNumber"
|
||||||
placeholder="PAN Number"
|
placeholder="PAN Number"
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
|
||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||||
@ -24,7 +24,7 @@ import ExpenseFilterChips from "./ExpenseFilterChips";
|
|||||||
import { defaultFilter } from "./ExpenseSchema";
|
import { defaultFilter } from "./ExpenseSchema";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRef, onDataFiltered }) => {
|
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
const [deletingId, setDeletingId] = useState(null);
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
const {
|
const {
|
||||||
@ -47,12 +47,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
|
|||||||
debouncedSearch
|
debouncedSearch
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (onDataFiltered) {
|
|
||||||
onDataFiltered(data?.data ?? []);
|
|
||||||
}
|
|
||||||
}, [data, onDataFiltered]);
|
|
||||||
|
|
||||||
const SelfId = useSelector(
|
const SelfId = useSelector(
|
||||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||||
);
|
);
|
||||||
@ -264,7 +258,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRe
|
|||||||
groupBy={groupBy}
|
groupBy={groupBy}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
className="card-datatable table-responsive" ref={tableRef}
|
className="card-datatable table-responsive "
|
||||||
id="horizontal-example"
|
id="horizontal-example"
|
||||||
>
|
>
|
||||||
<div className="dataTables_wrapper no-footer px-2 ">
|
<div className="dataTables_wrapper no-footer px-2 ">
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React from "react";
|
|||||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
||||||
import Tooltip from "../common/Tooltip";
|
import Tooltip from "../common/Tooltip";
|
||||||
|
|
||||||
const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
|
||||||
return (
|
return (
|
||||||
<div className="d-flex flex-wrap gap-2 my-1">
|
<div className="d-flex flex-wrap gap-2 my-1">
|
||||||
{files
|
{files
|
||||||
@ -18,11 +18,12 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
{/* File icon and info */}
|
{/* File icon and info */}
|
||||||
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
||||||
<i
|
<i
|
||||||
className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
|
className={`bx ${getIconByFileType(
|
||||||
|
file?.contentType
|
||||||
|
)} fs-3 `}
|
||||||
style={{ minWidth: "30px" }}
|
style={{ minWidth: "30px" }}
|
||||||
></i>
|
></i>
|
||||||
|
|
||||||
<Tooltip text={file.fileName}>
|
|
||||||
<div className="d-flex flex-column text-truncate">
|
<div className="d-flex flex-column text-truncate">
|
||||||
<span className="fw-semibold small text-truncate">
|
<span className="fw-semibold small text-truncate">
|
||||||
{file.fileName}
|
{file.fileName}
|
||||||
@ -31,7 +32,6 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Delete icon */}
|
{/* Delete icon */}
|
||||||
@ -41,14 +41,15 @@ const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|||||||
role="button"
|
role="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
|
removeFile(expenseToEdit ? file.documentId : idx);
|
||||||
}}
|
}}
|
||||||
></i>
|
></i>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -61,7 +62,9 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
<div className="row align-items-center">
|
<div className="row align-items-center">
|
||||||
{/* File icon and info */}
|
{/* File icon and info */}
|
||||||
<div className="col-12 d-flex align-items-center gap-2">
|
<div className="col-12 d-flex align-items-center gap-2">
|
||||||
<i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>
|
<i
|
||||||
|
className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
|
||||||
|
></i>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="d-flex flex-column text-truncate"
|
className="d-flex flex-column text-truncate"
|
||||||
@ -69,7 +72,7 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
viewFile({
|
viewFile({
|
||||||
IsOpen: true,
|
IsOpen: true,
|
||||||
Image: files,
|
Image: file.preSignedUrl,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -90,44 +93,3 @@ export const FilelistView = ({ files, viewFile }) => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export const FileView = ({ file, viewFile }) => {
|
|
||||||
if (!file) {
|
|
||||||
return (
|
|
||||||
<div className="d-flex justify-content-center align-items-center py-4">
|
|
||||||
<p className="mb-0 text-muted small">No file uploaded</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className=" bg-white ">
|
|
||||||
<div className="row align-items-center">
|
|
||||||
{/* File icon and info */}
|
|
||||||
<div className="col-12 d-flex align-items-center gap-2 ms-n1">
|
|
||||||
<i className={`bx ${getIconByFileType(file?.contentType)} fs-4`}></i>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="d-flex flex-column text-truncate"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
viewFile({
|
|
||||||
IsOpen: true,
|
|
||||||
Image: file.preSignedUrl,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="text-muted small text-truncate mb-n4">
|
|
||||||
{file.fileName}
|
|
||||||
</span>
|
|
||||||
<span className="text-body-secondary small mt-2">
|
|
||||||
<Tooltip text={"Click on file"}>
|
|
||||||
{" "}
|
|
||||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
||||||
</Tooltip>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|||||||
@ -37,7 +37,6 @@ import SelectEmployeeServerSide, {
|
|||||||
} from "../common/Forms/SelectFieldServerSide";
|
} from "../common/Forms/SelectFieldServerSide";
|
||||||
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
|
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||||
const {
|
const {
|
||||||
@ -238,7 +237,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</h5>
|
</h5>
|
||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-12 col-md-6">
|
{/* <div className="col-md-6">
|
||||||
|
<Label className="form-label" required>
|
||||||
|
Select Project
|
||||||
|
</Label>
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
{...register("projectId")}
|
||||||
|
>
|
||||||
|
<option value="">Select Project</option>
|
||||||
|
{projectLoading ? (
|
||||||
|
<option>Loading...</option>
|
||||||
|
) : (
|
||||||
|
projectNames?.map((project) => (
|
||||||
|
<option key={project.id} value={project.id}>
|
||||||
|
{project.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
{errors.projectId && (
|
||||||
|
<small className="danger-text">{errors.projectId.message}</small>
|
||||||
|
)}
|
||||||
|
</div> */}
|
||||||
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<SelectProjectField
|
<SelectProjectField
|
||||||
label="Project"
|
label="Project"
|
||||||
required
|
required
|
||||||
@ -260,32 +282,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
control={control}
|
{...register("expenseCategoryId")}
|
||||||
rules={{ required: "Expense Category is required" }}
|
>
|
||||||
render={({ field }) => (
|
<option value="" disabled>
|
||||||
<SelectField
|
Select Category
|
||||||
label="" // Label already shown above
|
</option>
|
||||||
placeholder="Select Category"
|
{ExpenseLoading ? (
|
||||||
options={expenseCategories ?? []}
|
<option disabled>Loading...</option>
|
||||||
value={field.value || ""}
|
) : (
|
||||||
onChange={field.onChange}
|
expenseCategories?.map((expense) => (
|
||||||
required
|
<option key={expense.id} value={expense.id}>
|
||||||
isLoading={ExpenseLoading}
|
{expense.name}
|
||||||
className="m-0 form-select-sm w-100"
|
</option>
|
||||||
/>
|
))
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
{errors.expensesCategoryId && (
|
||||||
{errors.expenseCategoryId && (
|
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
{errors.expenseCategoryId.message}
|
{errors.expensesCategoryId.message}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
@ -293,47 +313,58 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<Label htmlFor="paymentModeId" className="form-label" required>
|
<Label htmlFor="paymentModeId" className="form-label" required>
|
||||||
Payment Mode
|
Payment Mode
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="paymentModeId"
|
id="paymentModeId"
|
||||||
control={control}
|
{...register("paymentModeId")}
|
||||||
rules={{ required: "Payment Mode is required" }}
|
>
|
||||||
render={({ field }) => (
|
<option value="" disabled>
|
||||||
<SelectField
|
Select Mode
|
||||||
label="" // Label is shown above
|
</option>
|
||||||
placeholder="Select Mode"
|
{PaymentModeLoading ? (
|
||||||
options={PaymentModes ?? []}
|
<option disabled>Loading...</option>
|
||||||
value={field.value || ""}
|
) : (
|
||||||
onChange={field.onChange}
|
PaymentModes?.map((payment) => (
|
||||||
required
|
<option key={payment.id} value={payment.id}>
|
||||||
isLoading={PaymentModeLoading}
|
{payment.name}
|
||||||
className="m-0 form-select-sm w-100"
|
</option>
|
||||||
/>
|
))
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.paymentModeId && (
|
{errors.paymentModeId && (
|
||||||
<small className="danger-text">{errors.paymentModeId.message}</small>
|
<small className="danger-text">
|
||||||
|
{errors.paymentModeId.message}
|
||||||
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
|
{/* <Label className="form-label" required>
|
||||||
|
Paid By{" "}
|
||||||
|
</Label> */}
|
||||||
|
{/* <EmployeeSearchInput
|
||||||
|
control={control}
|
||||||
|
name="paidById"
|
||||||
|
projectId={null}
|
||||||
|
forAll={true}
|
||||||
|
/> */}
|
||||||
|
|
||||||
<AppFormController
|
<AppFormController
|
||||||
name="paidById"
|
name="paidById"
|
||||||
|
|
||||||
control={control}
|
control={control}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<SelectEmployeeServerSide
|
<SelectEmployeeServerSide
|
||||||
label="Paid By" required
|
label="Paid By" required
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
isFullObject={false}
|
isFullObject={false} // because using ID
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="transactionDate" className="form-label" required>
|
<Label htmlFor="transactionDate" className="form-label" required>
|
||||||
Transaction Date
|
Transaction Date
|
||||||
@ -343,7 +374,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
className="w-100"
|
className="w-100"
|
||||||
control={control}
|
control={control}
|
||||||
maxDate={new Date()}
|
maxDate={new Date()}
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.transactionDate && (
|
{errors.transactionDate && (
|
||||||
@ -360,7 +390,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -372,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="supplerName" className="form-label" required>
|
<Label htmlFor="supplerName" className="form-label" required>
|
||||||
Supplier Name/Transporter Name/Other
|
Supplier Name/Transporter Name/Other
|
||||||
@ -380,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="supplerName"
|
id="supplerName"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("supplerName")}
|
{...register("supplerName")}
|
||||||
/>
|
/>
|
||||||
{errors.supplerName && (
|
{errors.supplerName && (
|
||||||
@ -397,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="location"
|
id="location"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("location")}
|
{...register("location")}
|
||||||
/>
|
/>
|
||||||
{errors.location && (
|
{errors.location && (
|
||||||
@ -405,7 +435,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<label htmlFor="statusId" className="form-label ">
|
<label htmlFor="statusId" className="form-label ">
|
||||||
Transaction ID
|
Transaction ID
|
||||||
@ -413,7 +443,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="transactionId"
|
id="transactionId"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
{...register("transactionId")}
|
{...register("transactionId")}
|
||||||
/>
|
/>
|
||||||
@ -430,7 +460,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="gstNumber"
|
id="gstNumber"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
{...register("gstNumber")}
|
{...register("gstNumber")}
|
||||||
/>
|
/>
|
||||||
@ -439,38 +469,33 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row mb-4">
|
<div className="row">
|
||||||
<div className="col-md-6 text-start">
|
<div className="col-md-6 text-start ">
|
||||||
<Label htmlFor="currencyId" className="form-label" required>
|
<Label htmlFor="currencyId" className="form-label" required>
|
||||||
Select Currency
|
Select Currency
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="currencyId"
|
id="currencyId"
|
||||||
control={control}
|
{...register("currencyId")}
|
||||||
rules={{ required: "Currency is required" }}
|
>
|
||||||
render={({ field }) => (
|
<option value="" disabled>
|
||||||
<SelectField
|
Select Currency
|
||||||
label="" // Label already shown above
|
</option>
|
||||||
placeholder="Select Currency"
|
{currencyLoading ? (
|
||||||
options={currencies?.map((currency) => ({
|
<option disabled>Loading...</option>
|
||||||
id: currency.id,
|
) : (
|
||||||
name: `${currency.currencyName} (${currency.symbol})`,
|
currencies?.map((currency) => (
|
||||||
})) ?? []}
|
<option key={currency.id} value={currency.id}>
|
||||||
value={field.value || ""}
|
{`${currency.currencyName} (${currency.symbol}) `}
|
||||||
onChange={field.onChange}
|
</option>
|
||||||
required
|
))
|
||||||
isLoading={currencyLoading}
|
|
||||||
className="m-0 form-select-sm w-100"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.currencyId && (
|
{errors.currencyId && (
|
||||||
<small className="danger-text">{errors.currencyId.message}</small>
|
<small className="danger-text">{errors.currencyId.message}</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{expenseCategory?.noOfPersonsRequired && (
|
{expenseCategory?.noOfPersonsRequired && (
|
||||||
<div className="col-md-6 text-start">
|
<div className="col-md-6 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
@ -479,7 +504,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="noOfPersons"
|
id="noOfPersons"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("noOfPersons")}
|
{...register("noOfPersons")}
|
||||||
inputMode="numeric"
|
inputMode="numeric"
|
||||||
/>
|
/>
|
||||||
@ -492,14 +517,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start mb-4">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="description" className="form-label" required>
|
<Label htmlFor="description" className="form-label" required>
|
||||||
Description
|
Description
|
||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
></textarea>
|
></textarea>
|
||||||
@ -511,7 +536,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-4 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
Upload Bill{" "}
|
Upload Bill{" "}
|
||||||
|
|||||||
@ -1,179 +1,80 @@
|
|||||||
import { error } from "pdf-lib";
|
import { useState } from "react";
|
||||||
import { useState, useRef, useEffect } from "react";
|
|
||||||
|
|
||||||
const PreviewDocument = ({ files = [] }) => {
|
|
||||||
const images = Array.isArray(files) ? files : [files];
|
|
||||||
|
|
||||||
const [index, setIndex] = useState(0);
|
const PreviewDocument = ({ imageUrl }) => {
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [rotation, setRotation] = useState(0);
|
const [rotation, setRotation] = useState(0);
|
||||||
const [scale, setScale] = useState(1);
|
const [scale, setScale] = useState(1);
|
||||||
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
||||||
const [dragging, setDragging] = useState(false);
|
|
||||||
|
|
||||||
const startPos = useRef({ x: 0, y: 0 });
|
|
||||||
|
|
||||||
const MIN_ZOOM = 0.4;
|
|
||||||
const MAX_ZOOM = 3;
|
|
||||||
|
|
||||||
const currentFile = images[index];
|
|
||||||
const fileUrl = currentFile?.preSignedUrl;
|
|
||||||
|
|
||||||
const isPDF = fileUrl?.toLowerCase().endsWith(".pdf");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setRotation(0);
|
|
||||||
setScale(1);
|
|
||||||
setPosition({ x: 0, y: 0 });
|
|
||||||
setLoading(true);
|
|
||||||
}, [index]);
|
|
||||||
|
|
||||||
const zoomIn = () => !isPDF && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
|
|
||||||
const zoomOut = () => !isPDF && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
|
|
||||||
|
|
||||||
|
const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
|
||||||
|
const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
|
||||||
const resetAll = () => {
|
const resetAll = () => {
|
||||||
setRotation(0);
|
setRotation(0);
|
||||||
setScale(1);
|
setScale(1);
|
||||||
setPosition({ x: 0, y: 0 });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const nextImage = () => {
|
|
||||||
if (index < images.length - 1) setIndex((i) => i + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const prevImage = () => {
|
|
||||||
if (index > 0) setIndex((i) => i - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseDown = (e) => {
|
|
||||||
if (isPDF) return;
|
|
||||||
setDragging(true);
|
|
||||||
startPos.current = {
|
|
||||||
x: e.clientX - position.x,
|
|
||||||
y: e.clientY - position.y,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseMove = (e) => {
|
|
||||||
if (!dragging || isPDF) return;
|
|
||||||
|
|
||||||
setPosition({
|
|
||||||
x: e.clientX - startPos.current.x,
|
|
||||||
y: e.clientY - startPos.current.y,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseUp = () => setDragging(false);
|
|
||||||
|
|
||||||
const handleDoubleClick = () => !isPDF && resetAll();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Controls */}
|
<div className="d-flex justify-content-start gap-3 mb-2">
|
||||||
<div className="d-flex justify-content-start align-items-center mb-2">
|
|
||||||
<div className="d-flex gap-3">
|
|
||||||
{!isPDF && (
|
|
||||||
<>
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-rotate-right cursor-pointer fs-4"
|
className="bx bx-rotate-right cursor-pointer fs-4"
|
||||||
onClick={() => setRotation((prev) => prev + 90)}
|
|
||||||
title="Rotate"
|
title="Rotate"
|
||||||
/>
|
onClick={() => setRotation((prev) => prev + 90)}
|
||||||
|
></i>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-zoom-in cursor-pointer fs-4"
|
className="bx bx-zoom-in cursor-pointer fs-4"
|
||||||
onClick={zoomIn}
|
|
||||||
title="Zoom In"
|
title="Zoom In"
|
||||||
/>
|
onClick={zoomIn}
|
||||||
|
></i>
|
||||||
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-zoom-out cursor-pointer fs-4"
|
className="bx bx-zoom-out cursor-pointer fs-4"
|
||||||
onClick={zoomOut}
|
|
||||||
title="Zoom Out"
|
title="Zoom Out"
|
||||||
/>
|
onClick={zoomOut}
|
||||||
<i
|
></i>
|
||||||
className="bx bx-reset cursor-pointer fs-4"
|
|
||||||
onClick={resetAll}
|
|
||||||
title="Reset"
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
onMouseDown={handleMouseDown}
|
className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
|
||||||
onMouseMove={handleMouseMove}
|
style={{ minHeight: "80vh" }}
|
||||||
onMouseUp={handleMouseUp}
|
|
||||||
onMouseLeave={handleMouseUp}
|
|
||||||
onDoubleClick={handleDoubleClick}
|
|
||||||
className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
|
|
||||||
style={{
|
|
||||||
minHeight: "70vh",
|
|
||||||
|
|
||||||
userSelect: "none",
|
|
||||||
borderRadius: "10px",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{loading && <div className="text-secondary">Loading...</div>}
|
{loading && (
|
||||||
|
<div className="text-secondary text-center mb-2">
|
||||||
{/* PDF VIEW */}
|
Loading...
|
||||||
{isPDF ? (
|
</div>
|
||||||
<iframe
|
|
||||||
src={"./Expenses.pdf"}
|
|
||||||
title="PDF Preview"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: "70vh",
|
|
||||||
border: "none",
|
|
||||||
}}
|
|
||||||
onLoad={() => setLoading(false)}
|
|
||||||
onError={(error)=>{
|
|
||||||
console.log(error)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
/* IMAGE VIEW */
|
|
||||||
<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)}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<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
|
||||||
<div className="d-flex justify-content-between">
|
className="btn btn-outline-secondary"
|
||||||
<div className="text-center text-muted mt-2 small">
|
onClick={resetAll}
|
||||||
Scroll = change file | Double click = reset (images only)
|
>
|
||||||
</div>
|
<i className="bx bx-reset"></i> Reset
|
||||||
<div className="d-flex align-items-center gap-2">
|
</button>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default PreviewDocument;
|
export default PreviewDocument;
|
||||||
|
|||||||
@ -390,10 +390,12 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
|
|||||||
key={doc.documentId}
|
key={doc.documentId}
|
||||||
className="d-flex align-items-center cusor-pointer"
|
className="d-flex align-items-center cusor-pointer"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (isImage) {
|
||||||
setDocumentView({
|
setDocumentView({
|
||||||
IsOpen: true,
|
IsOpen: true,
|
||||||
Images: data?.documents,
|
Image: doc.preSignedUrl,
|
||||||
});
|
});
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i
|
<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
|
|
||||||
@ -25,28 +25,17 @@ const Sidebar = () => {
|
|||||||
/>
|
/>
|
||||||
</span> */}
|
</span> */}
|
||||||
|
|
||||||
<a
|
<small className="app-brand-link fw-bold navbar-brand text-green fs-6">
|
||||||
href="/"
|
<span className="app-brand-logo demo">
|
||||||
className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
|
<img src="/img/brand/marco.png" width="50" />
|
||||||
>
|
|
||||||
<span className="app-brand-logo demo d-flex align-items-center">
|
|
||||||
<img
|
|
||||||
src="/img/brand/marco.png"
|
|
||||||
width="40"
|
|
||||||
height="40"
|
|
||||||
alt="OnFieldWork logo"
|
|
||||||
/>
|
|
||||||
</span>
|
</span>
|
||||||
|
<span className="text-blue">OnField</span>
|
||||||
<span className="app-brand-text">
|
<span>Work</span>
|
||||||
<span className="text-primary ">OnField</span>
|
|
||||||
<span className="mx-1">Work</span>
|
|
||||||
<span className="text-dark">.com</span>
|
<span className="text-dark">.com</span>
|
||||||
</span>
|
</small>
|
||||||
</a>
|
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
|
<small className="layout-menu-toggle menu-link text-large ms-auto">
|
||||||
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
|
<i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -100,7 +100,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
alt="logo"
|
alt="logo"
|
||||||
width={40}
|
width={40}
|
||||||
height={40}
|
height={40}
|
||||||
/> <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
|
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-end">
|
<div className="text-end">
|
||||||
<button
|
<button
|
||||||
@ -113,9 +113,9 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
|
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
|
||||||
{/* Contact Info */}
|
{/* Contact Info */}
|
||||||
<div className="col-md-12 mb-4">
|
<div className="col-md-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -126,7 +126,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
<div className="text-muted">{orgData.contactPerson}</div>
|
<div className="text-muted">{orgData.contactPerson}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mb-4">
|
<div className="col-md-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -137,7 +137,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
<div className="text-muted">{orgData.contactNumber}</div>
|
<div className="text-muted">{orgData.contactNumber}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mb-4">
|
<div className="col-md-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -145,22 +145,22 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
>
|
>
|
||||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted text-wrap">{orgData.email}</div>
|
<div className="text-muted">{orgData.email}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-4">
|
<div className="col-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
style={{ maxWidth: "130px" }}
|
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) :
|
Service Provider Id (SPRID) :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{orgData.sprid}</div>
|
<div className="text-muted">{orgData.sprid}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-4">
|
<div className="col-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-1 mb-0 fw-semibold"
|
className="form-label me-1 mb-0 fw-semibold"
|
||||||
|
|||||||
@ -189,7 +189,7 @@ const ManagOrg = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-between gap-2 my-5">
|
<div className="d-flex justify-content-between gap-2 my-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-outline-secondary"
|
className="btn btn-sm btn-outline-secondary"
|
||||||
|
|||||||
@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="d-block mt-4">
|
<div className="d-block mt-4">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="row align-items-center g-2 mb-3">
|
<div className="row align-items-center g-2">
|
||||||
{/* Input Section */}
|
{/* Input Section */}
|
||||||
<div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
|
<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>
|
<Label className="text-nowrap mb-1 mb-md-0" required>
|
||||||
@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
<div className="py-2 text-tiny text-center">
|
<div className="py-2 text-tiny text-center">
|
||||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||||
{data.data.map((org) => (
|
{data.data.map((org) => (
|
||||||
<div className="d-flex flex-row gap-2 text-start text-black mt-3">
|
<div className="d-flex flex-row gap-2 text-start text-black ">
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
<img
|
<img
|
||||||
src="/public/assets/img/orgLogo.png"
|
src="/public/assets/img/orgLogo.png"
|
||||||
@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
height={50}
|
height={50}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
|
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
||||||
<span className="fs-6 fw-semibold mb-2">{org.name}</span>
|
<span className="fs-6 fw-semibold">{org.name}</span>
|
||||||
<div className="d-flex gap-2">
|
<div className="d-flex gap-2">
|
||||||
<small
|
<small
|
||||||
className=" fw-semibold text-uppercase mb-2"
|
className=" fw-semibold text-uppercase"
|
||||||
style={{ letterSpacing: "1px" }}
|
style={{ letterSpacing: "1px" }}
|
||||||
>
|
>
|
||||||
SPRID :{" "}
|
SPRID :{" "}
|
||||||
</small>
|
</small>
|
||||||
<small className="fs-6">{org.sprid}</small>
|
<small className="fs-6">{org.sprid}</small>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-row gap-2 mb-4">
|
<div className="d-flex flex-row gap-2">
|
||||||
<small className="text-small fw-semibold ">Address:</small>
|
<small className="text-small fw-semibold">Address:</small>
|
||||||
<div className="d-flex text-wrap">{org.address}</div>
|
<div className="d-flex text-wrap">{org.address}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="m-0 p-0">
|
<div className="m-0 p-0">
|
||||||
|
|||||||
@ -43,7 +43,7 @@ const OrgPickerfromTenant = ({ title }) => {
|
|||||||
label: "Name",
|
label: "Name",
|
||||||
getValue: (org) => (
|
getValue: (org) => (
|
||||||
<div className="d-flex gap-2 py-1 ">
|
<div className="d-flex gap-2 py-1 ">
|
||||||
<i className="bx bx-buildings"></i>
|
<i class="bx bx-buildings"></i>
|
||||||
<span
|
<span
|
||||||
className="text-truncate d-inline-block "
|
className="text-truncate d-inline-block "
|
||||||
style={{ maxWidth: "150px" }}
|
style={{ maxWidth: "150px" }}
|
||||||
@ -126,7 +126,7 @@ const OrgPickerfromTenant = ({ title }) => {
|
|||||||
onOpen({ startStep: 3, orgData: row })
|
onOpen({ startStep: 3, orgData: row })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className='bx bx-right-arrow-circle text-primary'></i>
|
<i class='bx bx-right-arrow-circle text-primary'></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -122,7 +122,6 @@ const OrganizationsList = ({searchText}) => {
|
|||||||
{organizationsColumns.map((col) => (
|
{organizationsColumns.map((col) => (
|
||||||
<td
|
<td
|
||||||
key={col.key}
|
key={col.key}
|
||||||
style={{ height: "50px" }}
|
|
||||||
className={`d-table-cell ${col.align ?? ""}`}
|
className={`d-table-cell ${col.align ?? ""}`}
|
||||||
>
|
>
|
||||||
{col.customRender
|
{col.customRender
|
||||||
|
|||||||
@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="row text-black text-black text-start ">
|
<div className="row text-black text-black text-start ">
|
||||||
{/* Header */}
|
{/* 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 justify-content-between align-items-center text-start mb-1">
|
||||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||||
<img
|
<img
|
||||||
@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
width={40}
|
width={40}
|
||||||
height={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>
|
||||||
<div className="text-end">
|
<div className="text-end">
|
||||||
<span
|
<span
|
||||||
@ -30,12 +30,12 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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
|
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
||||||
</div>
|
</div>
|
||||||
{/* Contact Info */}
|
{/* Contact Info */}
|
||||||
<div className="col-md-12 mb-5">
|
<div className="col-md-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
<div className="text-muted">{data?.contactPerson}</div>
|
<div className="text-muted">{data?.contactPerson}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mb-5">
|
<div className="col-md-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
<div className="text-muted">{data?.contactNumber}</div>
|
<div className="text-muted">{data?.contactNumber}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-12 mb-5">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
<div className="text-muted">{data?.email}</div>
|
<div className="text-muted">{data?.email}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-5">
|
<div className="col-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
style={{ maxWidth: "130px" }}
|
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) :
|
Service Provider Id (SPRID) :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{data?.sprid}</div>
|
<div className="text-muted">{data?.sprid}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 mb-5">
|
<div className="col-6 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-0 fw-semibold"
|
||||||
style={{ maxWidth: "130px" }}
|
style={{ maxWidth: "130px" }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-2 bx-group"></i>
|
<i className="bx bx-sm me-1 bx-group"></i>
|
||||||
Employees :
|
Employees :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-5">
|
<div className="col-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-1 mb-0 fw-semibold"
|
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 className="text-muted text-start">{data?.address}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-5">
|
<div className="col-12 mb-3">
|
||||||
<div
|
<div
|
||||||
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Services Section */}
|
{/* Services Section */}
|
||||||
<div className="col-12 mb-5">
|
<div className="col-12 mb-3">
|
||||||
<div
|
<div
|
||||||
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
@ -180,7 +180,7 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
{data?.services && data.services.length > 0 ? (
|
{data?.services && data.services.length > 0 ? (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
{data.services.map((service) => (
|
{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 h-100 shadow-sm border-0">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h6 className="fw-semibold mb-1">
|
<h6 className="fw-semibold mb-1">
|
||||||
|
|||||||
@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
|
|||||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||||
<>
|
<>
|
||||||
{isProccesed ? (
|
{isProccesed ? (
|
||||||
<div className="accordion-item active shadow-none">
|
<div class="accordion-item active shadow-none">
|
||||||
<h2 className="accordion-header d-flex align-items-center">
|
<h2 class="accordion-header d-flex align-items-center">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="accordion-button"
|
class="accordion-button"
|
||||||
data-bs-toggle="collapse"
|
data-bs-toggle="collapse"
|
||||||
data-bs-target="#accordionWithIcon-1"
|
data-bs-target="#accordionWithIcon-1"
|
||||||
aria-expanded="true"
|
aria-expanded="true"
|
||||||
>
|
>
|
||||||
<i className="icon-base bx bx-receipt me-2"></i>
|
<i class="icon-base bx bx-receipt me-2"></i>
|
||||||
Make Expense
|
Make Expense
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -30,8 +30,6 @@ import InputSuggestions from "../common/InputSuggestion";
|
|||||||
import { useProfile } from "../../hooks/useProfile";
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
import { blockUI } from "../../utils/blockUI";
|
import { blockUI } from "../../utils/blockUI";
|
||||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||||
const {
|
const {
|
||||||
@ -241,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
Select Project
|
Select Project
|
||||||
</Label> */}
|
</Label> */}
|
||||||
{/* <select
|
{/* <select
|
||||||
className="form-select "
|
className="form-select form-select-sm"
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
@ -283,37 +281,37 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
control={control}
|
{...register("expenseCategoryId")}
|
||||||
rules={{ required: "Expense Category is required" }}
|
disabled={
|
||||||
render={({ field }) => (
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
<SelectField
|
}
|
||||||
label="" // Label already above
|
>
|
||||||
placeholder="Select Category"
|
<option value="" disabled>
|
||||||
options={expenseCategories ?? []}
|
Select Category
|
||||||
value={field.value || ""}
|
</option>
|
||||||
onChange={field.onChange}
|
{ExpenseLoading ? (
|
||||||
required
|
<option disabled>Loading...</option>
|
||||||
isLoading={ExpenseLoading}
|
) : (
|
||||||
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
|
expenseCategories?.map((expense) => (
|
||||||
className="m-0 form-select-sm w-100"
|
<option key={expense.id} value={expense.id}>
|
||||||
/>
|
{expense.name}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.expenseCategoryId && (
|
{errors.expenseCategoryId && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
{errors.expenseCategoryId.message}
|
{errors.expenseCategoryId.message}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title and Advance Payment */}
|
{/* Title and Advance Payment */}
|
||||||
<div className="row mt-n2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="title" className="form-label" required>
|
<Label htmlFor="title" className="form-label" required>
|
||||||
Title
|
Title
|
||||||
@ -321,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="title"
|
id="title"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("title")}
|
{...register("title")}
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
@ -332,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6 ">
|
||||||
<Label htmlFor="isAdvance" className="form-label">
|
<Label htmlFor="isAdvance" className="form-label">
|
||||||
Is Advance Payment
|
Is Advance Payment
|
||||||
</Label>
|
</Label>
|
||||||
@ -345,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<div className="d-flex align-items-center gap-3 mt-3">
|
<div className="d-flex align-items-center gap-3">
|
||||||
<div className="form-check d-flex flex-row m-0 gap-2">
|
<div className="form-check d-flex flex-row m-0 gap-2">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
@ -389,7 +387,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={new Date()}
|
minDate={new Date()}
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
@ -407,7 +404,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -432,7 +429,6 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
setValue("payee", val, { shouldValidate: true })
|
setValue("payee", val, { shouldValidate: true })
|
||||||
}
|
}
|
||||||
error={errors.payee?.message}
|
error={errors.payee?.message}
|
||||||
size="md"
|
|
||||||
disabled={
|
disabled={
|
||||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
}
|
}
|
||||||
@ -460,39 +456,30 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
<Label htmlFor="currencyId" className="form-label" required>
|
<Label htmlFor="currencyId" className="form-label" required>
|
||||||
Currency
|
Currency
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
id="currencyId"
|
||||||
name="currencyId"
|
className="form-select form-select-sm"
|
||||||
control={control}
|
{...register("currencyId")}
|
||||||
rules={{ required: "Currency is required" }}
|
disabled={
|
||||||
render={({ field }) => (
|
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||||
<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
|
|
||||||
}
|
}
|
||||||
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 && (
|
{errors.currencyId && (
|
||||||
<small className="danger-text">{errors.currencyId.message}</small>
|
<small className="danger-text">{errors.currencyId.message}</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
@ -503,7 +490,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
disabled={
|
disabled={
|
||||||
@ -519,7 +506,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upload Document */}
|
{/* Upload Document */}
|
||||||
<div className="row my-4 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label className="form-label">Upload Bill </Label>
|
<Label className="form-label">Upload Bill </Label>
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useState } from "react";
|
||||||
import {
|
import {
|
||||||
EXPENSE_DRAFT,
|
EXPENSE_DRAFT,
|
||||||
EXPENSE_REJECTEDBY,
|
EXPENSE_REJECTEDBY,
|
||||||
@ -22,7 +22,7 @@ import Error from "../common/Error";
|
|||||||
import Pagination from "../common/Pagination";
|
import Pagination from "../common/Pagination";
|
||||||
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
|
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
|
||||||
|
|
||||||
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy", tableRef, onDataFiltered }) => {
|
const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
|
||||||
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
|
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
@ -30,7 +30,6 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
const SelfId = useSelector(
|
const SelfId = useSelector(
|
||||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||||
);
|
);
|
||||||
|
|
||||||
const groupByField = (items, field) => {
|
const groupByField = (items, field) => {
|
||||||
return items.reduce((acc, item) => {
|
return items.reduce((acc, item) => {
|
||||||
let key;
|
let key;
|
||||||
@ -150,12 +149,6 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
debouncedSearch
|
debouncedSearch
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (onDataFiltered) {
|
|
||||||
onDataFiltered(data?.data ?? []);
|
|
||||||
}
|
|
||||||
}, [data, onDataFiltered]);
|
|
||||||
|
|
||||||
if (isError) {
|
if (isError) {
|
||||||
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
||||||
}
|
}
|
||||||
@ -229,7 +222,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
paramData={deletingId}
|
paramData={deletingId}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
<div className="card page-min-h table-responsive px-sm-4">
|
||||||
<div className="card-datatable mx-2" id="payment-request-table ">
|
<div className="card-datatable mx-2" id="payment-request-table ">
|
||||||
<div className="col-12 mb-2 mt-2">
|
<div className="col-12 mb-2 mt-2">
|
||||||
<PaymentRequestFilterChips
|
<PaymentRequestFilterChips
|
||||||
@ -247,7 +240,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
<th className="text-start">Action</th>
|
<th className="text-center">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@ -307,7 +300,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
|
|||||||
data-bs-toggle="tooltip"
|
data-bs-toggle="tooltip"
|
||||||
data-bs-offset="0,8"
|
data-bs-offset="0,8"
|
||||||
data-bs-placement="top"
|
data-bs-placement="top"
|
||||||
data-bs-custom-className="tooltip-dark"
|
data-bs-custom-class="tooltip-dark"
|
||||||
title="More Action"
|
title="More Action"
|
||||||
></i>
|
></i>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -1,85 +0,0 @@
|
|||||||
import ExpenseRepository from "../../repositories/ExpsenseRepository";
|
|
||||||
import moment from "moment";
|
|
||||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
|
||||||
import showToast from "../../services/toastService";
|
|
||||||
|
|
||||||
const HandleExpenseExport = async (
|
|
||||||
type,
|
|
||||||
filters = {},
|
|
||||||
searchString = "",
|
|
||||||
tableRef = null,
|
|
||||||
setLoading = null
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
if (setLoading) setLoading(true);
|
|
||||||
|
|
||||||
const safeSearchString = typeof searchString === "string" ? searchString : "";
|
|
||||||
let allExpenses = [];
|
|
||||||
let pageNumber = 1;
|
|
||||||
const pageSize = 1000; // fetch 1000 per API call
|
|
||||||
let hasMore = true;
|
|
||||||
|
|
||||||
while (hasMore) {
|
|
||||||
const response = await ExpenseRepository.GetExpenseList(
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
filters,
|
|
||||||
safeSearchString
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentPageData = response?.data?.data || [];
|
|
||||||
allExpenses = allExpenses.concat(currentPageData);
|
|
||||||
|
|
||||||
// If returned data length is less than pageSize, we reached the last page
|
|
||||||
if (currentPageData.length < pageSize) {
|
|
||||||
hasMore = false;
|
|
||||||
} else {
|
|
||||||
pageNumber += 1; // fetch next page
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!allExpenses.length) {
|
|
||||||
showToast("No expenses found!", "warning");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Map export data
|
|
||||||
const exportData = allExpenses.map((item) => ({
|
|
||||||
"Expense ID": item?.expenseUId ?? "-",
|
|
||||||
"Expense Category": item?.expenseCategory?.name ?? "-",
|
|
||||||
"Payment Mode": item?.paymentMode?.name ?? "-",
|
|
||||||
"Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
|
|
||||||
"Submitted": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
|
|
||||||
"Amount": item?.amount != null
|
|
||||||
? `${item.amount.toLocaleString()} ${item.currency?.currencyCode ?? ""}`
|
|
||||||
: "-",
|
|
||||||
"Status": item?.status?.name ?? "-",
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case "csv":
|
|
||||||
exportToCSV(exportData, "Expenses");
|
|
||||||
break;
|
|
||||||
case "excel":
|
|
||||||
exportToExcel(exportData, "Expenses");
|
|
||||||
break;
|
|
||||||
case "pdf":
|
|
||||||
exportToPDF(exportData, "Expenses");
|
|
||||||
break;
|
|
||||||
case "print":
|
|
||||||
if (tableRef?.current) printTable(tableRef.current);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.warn("Unknown export type:", type);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err);
|
|
||||||
showToast("Failed to export expenses", "error");
|
|
||||||
} finally {
|
|
||||||
if (setLoading) setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default HandleExpenseExport;
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
import moment from "moment";
|
|
||||||
import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
|
|
||||||
import ExpenseRepository from "../../repositories/ExpsenseRepository";
|
|
||||||
|
|
||||||
const HandlePaymentRequestExport = async (
|
|
||||||
type,
|
|
||||||
filters = {},
|
|
||||||
searchString = "",
|
|
||||||
tableRef = null,
|
|
||||||
setLoading = null
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
if (setLoading) setLoading(true);
|
|
||||||
|
|
||||||
const safeSearchString = typeof searchString === "string" ? searchString : "";
|
|
||||||
let allPaymentRequest = [];
|
|
||||||
let pageNumber = 1;
|
|
||||||
const pageSize = 1000;
|
|
||||||
let hasMore = true;
|
|
||||||
|
|
||||||
while (hasMore) {
|
|
||||||
const response = await ExpenseRepository.GetPaymentRequestList(
|
|
||||||
pageSize,
|
|
||||||
pageNumber,
|
|
||||||
filters,
|
|
||||||
true, // isActive
|
|
||||||
safeSearchString
|
|
||||||
);
|
|
||||||
|
|
||||||
const currentPageData = response?.data?.data || [];
|
|
||||||
allPaymentRequest = allPaymentRequest.concat(currentPageData);
|
|
||||||
|
|
||||||
if (currentPageData.length < pageSize) {
|
|
||||||
hasMore = false;
|
|
||||||
} else {
|
|
||||||
pageNumber += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!allPaymentRequest.length) {
|
|
||||||
console.warn("No payment requests found!");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const exportData = allPaymentRequest.map((item) => ({
|
|
||||||
"Request ID": item?.paymentRequestUID ?? "-",
|
|
||||||
"Title": item?.title ?? "-",
|
|
||||||
"Payee": item?.payee ?? "-",
|
|
||||||
"Amount": item?.amount != null ? Number(item.amount).toLocaleString() : "-",
|
|
||||||
"Currency": item?.currency?.currencyCode ?? "-",
|
|
||||||
"Created At": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
|
|
||||||
"Due Date": item?.dueDate ? moment(item.dueDate).format("DD-MMM-YYYY") : "-",
|
|
||||||
"Status": item?.expenseStatus?.name ?? "-",
|
|
||||||
"Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
|
|
||||||
"Project": item?.project?.name ?? "-",
|
|
||||||
}));
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case "csv":
|
|
||||||
exportToCSV(exportData, "PaymentRequests");
|
|
||||||
break;
|
|
||||||
case "excel":
|
|
||||||
exportToExcel(exportData, "PaymentRequests");
|
|
||||||
break;
|
|
||||||
case "pdf":
|
|
||||||
exportToPDF(exportData, "PaymentRequests");
|
|
||||||
break;
|
|
||||||
case "print":
|
|
||||||
if (tableRef?.current) printTable(tableRef.current);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.warn("Unknown export type:", type);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Export failed:", err);
|
|
||||||
} finally {
|
|
||||||
if (setLoading) setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default HandlePaymentRequestExport;
|
|
||||||
@ -18,8 +18,6 @@ import {
|
|||||||
import eventBus from "../../services/eventBus";
|
import eventBus from "../../services/eventBus";
|
||||||
import { useCreateTask } from "../../hooks/useTasks";
|
import { useCreateTask } from "../../hooks/useTasks";
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const TaskSchema = (maxPlanned) => {
|
const TaskSchema = (maxPlanned) => {
|
||||||
return z.object({
|
return z.object({
|
||||||
@ -109,7 +107,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { loading, data: jobRoleData } = useMaster("Job Role");
|
const { loading, data: jobRoleData } = useMaster();
|
||||||
|
|
||||||
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
const [selectedRoles, setSelectedRoles] = useState(["all"]);
|
||||||
const [displayedSelection, setDisplayedSelection] = useState("");
|
const [displayedSelection, setDisplayedSelection] = useState("");
|
||||||
@ -243,57 +241,48 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
<div className="row mb-1">
|
<div className="row mb-1">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<div className="row text-start">
|
<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>
|
<div>
|
||||||
<AppFormController
|
<select
|
||||||
name="organizationId"
|
className="form-select form-select-sm"
|
||||||
control={control}
|
value={selectedOrganization || ""}
|
||||||
rules={{ required: "Organization is required" }}
|
onChange={(e) =>
|
||||||
render={({ field }) => (
|
setSelectedOrganization(e.target.value)
|
||||||
<SelectField
|
}
|
||||||
label="" // No label here, use external label if needed
|
>
|
||||||
options={organizationList ?? []}
|
{isServiceLoading ? (
|
||||||
placeholder="--Select Organization--"
|
<option>Loading...</option>
|
||||||
required
|
) : (
|
||||||
labelKey="name"
|
<>
|
||||||
valueKeyKey="id"
|
<option value="">--Select Organization--</option>
|
||||||
value={field.value || ""}
|
{organizationList?.map((org,index) => (
|
||||||
onChange={field.onChange}
|
<option key={`${org.id}-${index}`} value={org.id}>
|
||||||
isLoading={isServiceLoading}
|
{org.name}
|
||||||
className="m-0 form-select-sm w-100"
|
</option>
|
||||||
/>
|
))}
|
||||||
)}
|
</>
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.organizationId && (
|
|
||||||
<small className="danger-text">{errors.organizationId.message}</small>
|
|
||||||
)}
|
)}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<AppFormController
|
<select
|
||||||
name="serviceId"
|
className="form-select form-select-sm"
|
||||||
control={control}
|
value={selectedService || ""}
|
||||||
rules={{ required: "Service is required" }}
|
onChange={(e) => setSelectedService(e.target.value)}
|
||||||
render={({ field }) => (
|
>
|
||||||
<SelectField
|
{isOrgLoading ? (
|
||||||
label="" // No label as you have one above or elsewhere
|
<option>Loading...</option>
|
||||||
options={serviceList ?? []}
|
) : (
|
||||||
placeholder="--Select Service--"
|
<>
|
||||||
required
|
<option value="">--Select Service--</option>
|
||||||
labelKey="name"
|
{serviceList?.map((service,index) => (
|
||||||
valueKeyKey="id"
|
<option key={`${service.id}-${index}`} value={service.id}>
|
||||||
value={field.value || ""}
|
{service.name}
|
||||||
onChange={field.onChange}
|
</option>
|
||||||
isLoading={isOrgLoading}
|
))}
|
||||||
className="m-0 form-select-sm w-100"
|
</>
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.serviceId && (
|
|
||||||
<small className="danger-text">{errors.serviceId.message}</small>
|
|
||||||
)}
|
)}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -303,7 +292,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{/* Dropdown */}
|
{/* Dropdown */}
|
||||||
<div className="dropdown position-relative d-inline-block">
|
<div className="dropdown position-relative d-inline-block">
|
||||||
<a
|
<a
|
||||||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
|
className={`dropdown-toggle hide-arrow cursor-pointer ${
|
||||||
|
selectedRoles.includes("all") ||
|
||||||
selectedRoles.length === 0
|
selectedRoles.length === 0
|
||||||
? "text-secondary"
|
? "text-secondary"
|
||||||
: "text-primary"
|
: "text-primary"
|
||||||
@ -419,7 +409,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
<p className="text-center">Loading employees...</p>
|
<p className="text-center">Loading employees...</p>
|
||||||
</div>
|
</div>
|
||||||
) : filteredEmployees?.length > 0 ? (
|
) : filteredEmployees?.length > 0 ? (
|
||||||
filteredEmployees.map((emp, index) => {
|
filteredEmployees.map((emp,index) => {
|
||||||
const jobRole = jobRoleData?.find(
|
const jobRole = jobRoleData?.find(
|
||||||
(role) => role?.id === emp?.jobRoleId
|
(role) => role?.id === emp?.jobRoleId
|
||||||
);
|
);
|
||||||
@ -489,7 +479,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
|||||||
{watch("selectedEmployees")?.length > 0 && (
|
{watch("selectedEmployees")?.length > 0 && (
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
<div className="text-start px-2">
|
<div className="text-start px-2">
|
||||||
{watch("selectedEmployees")?.map((empId, ind) => {
|
{watch("selectedEmployees")?.map((empId,ind) => {
|
||||||
const emp = employees?.data?.find(
|
const emp = employees?.data?.find(
|
||||||
(emp) => emp.id === empId
|
(emp) => emp.id === empId
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
|
|||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
import { getCachedData } from "../../../slices/apiDataManager";
|
||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||||
|
import useSelect from "../../common/useSelect";
|
||||||
import Label from "../../common/Label";
|
import Label from "../../common/Label";
|
||||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const buildingSchema = z.object({
|
const buildingSchema = z.object({
|
||||||
Id: z.string().optional(),
|
Id: z.string().optional(),
|
||||||
@ -22,8 +22,14 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
(store) => store.localVariables.projectId
|
(store) => store.localVariables.projectId
|
||||||
);
|
);
|
||||||
|
const {
|
||||||
const methods = useForm({
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
setValue,
|
||||||
|
watch,
|
||||||
|
reset,
|
||||||
|
} = useForm({
|
||||||
resolver: zodResolver(buildingSchema),
|
resolver: zodResolver(buildingSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
Id: "0",
|
Id: "0",
|
||||||
@ -31,23 +37,12 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
description: "",
|
description: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
control,
|
|
||||||
watch,
|
|
||||||
reset,
|
|
||||||
setValue,
|
|
||||||
formState: { errors },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const watchedId = watch("Id");
|
const watchedId = watch("Id");
|
||||||
|
|
||||||
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
|
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
|
||||||
onSuccessCallback: () => {
|
onSuccessCallback: (data, variables) => {
|
||||||
showToast(
|
showToast(
|
||||||
watchedId !== "0"
|
watchedId != "0"
|
||||||
? "Building updated Successfully"
|
? "Building updated Successfully"
|
||||||
: "Building created Successfully",
|
: "Building created Successfully",
|
||||||
"success"
|
"success"
|
||||||
@ -84,7 +79,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
description: editingBuilding.description,
|
description: editingBuilding.description,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [editingBuilding, reset]);
|
}, [editingBuilding]);
|
||||||
|
|
||||||
const onSubmitHandler = (data) => {
|
const onSubmitHandler = (data) => {
|
||||||
const payload = {
|
const payload = {
|
||||||
@ -93,54 +88,36 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
projectId: selectedProject,
|
projectId: selectedProject,
|
||||||
};
|
};
|
||||||
|
|
||||||
const infraObject = [
|
let infraObject = [
|
||||||
{
|
{
|
||||||
building: payload,
|
building: payload,
|
||||||
floor: null,
|
floor: null,
|
||||||
workArea: null,
|
workArea: null,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
ManageBuilding({ infraObject, projectId: selectedProject });
|
ManageBuilding({ infraObject, projectId: selectedProject });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
||||||
<h5 className="text-center mb-2">Manage Buildings</h5>
|
<h5 className="text-center mb-2">Manage Buildings </h5>
|
||||||
|
|
||||||
{/* Building Select */}
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label htmlFor="Id" className="form-label">
|
<label className="form-label">Select Building</label>
|
||||||
Select Building
|
<select
|
||||||
</Label>
|
{...register("Id")}
|
||||||
<AppFormController
|
className="select2 form-select form-select-sm"
|
||||||
name="Id"
|
>
|
||||||
control={control}
|
<option value="0">Add New Building</option>
|
||||||
rules={{ required: "Building is required" }}
|
{sortedBuildings.length > 0 ? (
|
||||||
render={({ field }) => (
|
sortedBuildings.map((b) => (
|
||||||
<SelectField
|
<option key={b.id} value={b.id}>
|
||||||
label=""
|
{b.buildingName}
|
||||||
placeholder="Select Building"
|
</option>
|
||||||
options={[
|
))
|
||||||
{ id: "0", name: "Add New Building" },
|
) : (
|
||||||
...(sortedBuildings?.map((b) => ({
|
<option disabled>No buildings found</option>
|
||||||
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"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
|
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -152,29 +129,28 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
<input
|
<input
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
type="text"
|
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>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Description</Label>
|
||||||
Description
|
|
||||||
</Label>
|
|
||||||
<textarea
|
<textarea
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="5"
|
rows="5"
|
||||||
maxLength="160"
|
maxLength="160"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
/>
|
/>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
<span className="danger-text">{errors.description.message}</span>
|
<span className="danger-text">{errors.description.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Buttons */}
|
<div className="col-12 text-end mt-5">
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
@ -186,16 +162,21 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
|||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-sm btn-primary"
|
||||||
|
disabled={isPending}
|
||||||
|
>
|
||||||
{isPending
|
{isPending
|
||||||
? "Please wait..."
|
? "Please wait..."
|
||||||
: watchedId !== "0"
|
: watchedId !== "0"
|
||||||
? "Edit Building"
|
? "Edit Building"
|
||||||
: "Add Building"}
|
: "Add Building"}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -12,14 +12,12 @@ import { useManageTask } from "../../../hooks/useProjects";
|
|||||||
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
||||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const taskSchema = z
|
const taskSchema = z
|
||||||
.object({
|
.object({
|
||||||
activityID: z.string().min(1, "Activity is required"),
|
activityID: z.string().min(1, "Activity is required"),
|
||||||
workCategoryId: z.string().min(1, "Work Category 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"),
|
completedWork: z.number().min(0, "Completed Work must be ≥ 0"),
|
||||||
comment: z.string(),
|
comment: z.string(),
|
||||||
})
|
})
|
||||||
@ -39,7 +37,17 @@ const EditActivityModal = ({
|
|||||||
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
const { activities, loading: loadingActivities } = useActivitiesMaster();
|
||||||
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
|
||||||
const [selectedActivity, setSelectedActivity] = useState(null);
|
const [selectedActivity, setSelectedActivity] = useState(null);
|
||||||
const methods = useForm({
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
reset,
|
||||||
|
setValue,
|
||||||
|
getValues,
|
||||||
|
watch,
|
||||||
|
} = useForm({
|
||||||
|
resolver: zodResolver(taskSchema),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
activityID: "",
|
activityID: "",
|
||||||
workCategoryId: "",
|
workCategoryId: "",
|
||||||
@ -47,11 +55,7 @@ const EditActivityModal = ({
|
|||||||
completedWork: 0,
|
completedWork: 0,
|
||||||
comment: "",
|
comment: "",
|
||||||
},
|
},
|
||||||
resolver: zodResolver(taskSchema),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
|
|
||||||
|
|
||||||
const { mutate: UpdateTask, isPending } = useManageTask({
|
const { mutate: UpdateTask, isPending } = useManageTask({
|
||||||
onSuccessCallback: (response) => {
|
onSuccessCallback: (response) => {
|
||||||
showToast(response?.message, "success")
|
showToast(response?.message, "success")
|
||||||
@ -59,6 +63,8 @@ const EditActivityModal = ({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const activityID = watch("activityID");
|
const activityID = watch("activityID");
|
||||||
|
|
||||||
const sortedActivities = useMemo(
|
const sortedActivities = useMemo(
|
||||||
@ -101,7 +107,6 @@ const EditActivityModal = ({
|
|||||||
const onSubmitForm = (data) => {
|
const onSubmitForm = (data) => {
|
||||||
const payload = {
|
const payload = {
|
||||||
...data,
|
...data,
|
||||||
plannedWork: Number(data.plannedWork.toFixed(2)),
|
|
||||||
id: workItem?.workItem?.id ?? workItem?.id,
|
id: workItem?.workItem?.id ?? workItem?.id,
|
||||||
buildingID: building?.id,
|
buildingID: building?.id,
|
||||||
floorId: floor?.id,
|
floorId: floor?.id,
|
||||||
@ -120,7 +125,6 @@ const EditActivityModal = ({
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
<div className="text-center mb-1">
|
<div className="text-center mb-1">
|
||||||
<h5 className="mb-1">Manage Task</h5>
|
<h5 className="mb-1">Manage Task</h5>
|
||||||
@ -130,7 +134,7 @@ const EditActivityModal = ({
|
|||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<label className="form-label">Select Building</label>
|
<label className="form-label">Select Building</label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={building?.buildingName}
|
value={building?.buildingName}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
@ -139,7 +143,7 @@ const EditActivityModal = ({
|
|||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6">
|
||||||
<label className="form-label">Select Floor</label>
|
<label className="form-label">Select Floor</label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={floor?.floorName}
|
value={floor?.floorName}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
@ -149,7 +153,7 @@ const EditActivityModal = ({
|
|||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Select Work Area</label>
|
<label className="form-label">Select Work Area</label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={workArea?.areaName}
|
value={workArea?.areaName}
|
||||||
disabled
|
disabled
|
||||||
/>
|
/>
|
||||||
@ -157,7 +161,7 @@ const EditActivityModal = ({
|
|||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<label className="form-label">Select Service</label>
|
<label className="form-label">Select Service</label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
value={
|
value={
|
||||||
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
|
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
|
||||||
}
|
}
|
||||||
@ -170,7 +174,7 @@ const EditActivityModal = ({
|
|||||||
<label className="form-label">Select Activity</label>
|
<label className="form-label">Select Activity</label>
|
||||||
<select
|
<select
|
||||||
{...register("activityID")}
|
{...register("activityID")}
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
disabled
|
disabled
|
||||||
>
|
>
|
||||||
<option >Select Activity</option>
|
<option >Select Activity</option>
|
||||||
@ -190,43 +194,33 @@ const EditActivityModal = ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Select Work Category</label>
|
||||||
name="workCategoryId"
|
<select
|
||||||
control={control}
|
{...register("workCategoryId")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
>
|
||||||
label="Select Work Category"
|
<option disabled>Select Category</option>
|
||||||
placeholder="Select Category"
|
{loadingCategories ? (
|
||||||
options={
|
<option>Loading...</option>
|
||||||
loadingCategories
|
) : (
|
||||||
? []
|
sortedCategories.map((c) => (
|
||||||
: sortedCategories?.map((c) => ({
|
<option key={c.id} value={c.id}>
|
||||||
id: String(c.id),
|
{c.name}
|
||||||
name: c.name,
|
</option>
|
||||||
})) ?? []
|
))
|
||||||
}
|
|
||||||
isLoading={loadingCategories}
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.workCategoryId && (
|
{errors.workCategoryId && (
|
||||||
<small className="danger-text">{errors.workCategoryId.message}</small>
|
<p className="danger-text">{errors.workCategoryId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="col-5 text-start">
|
<div className="col-5 text-start">
|
||||||
<label className="form-label">Planned Work</label>
|
<label className="form-label">Planned Work</label>
|
||||||
<input
|
<input
|
||||||
{...register("plannedWork", { valueAsNumber: true })}
|
{...register("plannedWork", { valueAsNumber: true })}
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
/>
|
/>
|
||||||
{errors.plannedWork && (
|
{errors.plannedWork && (
|
||||||
<p className="danger-text">{errors.plannedWork.message}</p>
|
<p className="danger-text">{errors.plannedWork.message}</p>
|
||||||
@ -239,7 +233,7 @@ const EditActivityModal = ({
|
|||||||
{...register("completedWork", { valueAsNumber: true })}
|
{...register("completedWork", { valueAsNumber: true })}
|
||||||
type="number"
|
type="number"
|
||||||
disabled={getValues("completedWork") > 0}
|
disabled={getValues("completedWork") > 0}
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
/>
|
/>
|
||||||
{errors.completedWork && (
|
{errors.completedWork && (
|
||||||
<p className="danger-text">{errors.completedWork.message}</p>
|
<p className="danger-text">{errors.completedWork.message}</p>
|
||||||
@ -249,7 +243,7 @@ const EditActivityModal = ({
|
|||||||
<div className="col-2 text-start">
|
<div className="col-2 text-start">
|
||||||
<label className="form-label">Unit</label>
|
<label className="form-label">Unit</label>
|
||||||
<input
|
<input
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
disabled
|
disabled
|
||||||
value={selectedActivity?.unitOfMeasurement || ""}
|
value={selectedActivity?.unitOfMeasurement || ""}
|
||||||
/>
|
/>
|
||||||
@ -281,7 +275,6 @@ const EditActivityModal = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,6 @@ import showToast from "../../../services/toastService";
|
|||||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import Label from "../../common/Label";
|
import Label from "../../common/Label";
|
||||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../../common/Forms/SelectField";
|
|
||||||
|
|
||||||
// Schema
|
// Schema
|
||||||
const floorSchema = z.object({
|
const floorSchema = z.object({
|
||||||
@ -29,12 +27,17 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
|||||||
);
|
);
|
||||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||||
|
|
||||||
const methods = useForm({
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
watch,
|
||||||
|
formState: { errors },
|
||||||
|
} = useForm({
|
||||||
defaultValues,
|
defaultValues,
|
||||||
resolver: zodResolver(floorSchema),
|
resolver: zodResolver(floorSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
|
||||||
const watchId = watch("id");
|
const watchId = watch("id");
|
||||||
const watchBuildingId = watch("buildingId");
|
const watchBuildingId = watch("buildingId");
|
||||||
const { mutate: ManageFloor, isPending } = useManageProjectInfra({
|
const { mutate: ManageFloor, isPending } = useManageProjectInfra({
|
||||||
@ -45,7 +48,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
|||||||
: "Floor created Successfully",
|
: "Floor created Successfully",
|
||||||
"success"
|
"success"
|
||||||
);
|
);
|
||||||
reset({ id: "0", floorName: "" });
|
reset({ id: "0", floorName: ""});
|
||||||
// onClose?.();
|
// onClose?.();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -95,106 +98,62 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
|
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
|
||||||
<div className="text-center mb-1">
|
<div className="text-center mb-1">
|
||||||
<h5 className="mb-1">Manage Floor</h5>
|
<h5 className="mb-1">Manage Floor</h5>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>Select Building</Label>
|
||||||
Select Building
|
<select
|
||||||
</Label>
|
{...register("buildingId")}
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="buildingId"
|
onChange={handleBuildingChange}
|
||||||
control={control}
|
>
|
||||||
rules={{ required: "Building is required" }}
|
<option value="0">Select Building</option>
|
||||||
render={({ field }) => (
|
{project?.length > 0 &&
|
||||||
<SelectField
|
|
||||||
label=""
|
|
||||||
placeholder="Select Building"
|
|
||||||
options={
|
|
||||||
project
|
project
|
||||||
?.filter((b) => b.buildingName)
|
.filter((b) => b.buildingName)
|
||||||
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
|
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
|
||||||
.map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
|
.map((b) => (
|
||||||
}
|
<option key={b.id} value={b.id}>
|
||||||
value={field.value || ""}
|
{b.buildingName}
|
||||||
onChange={(value) => {
|
</option>
|
||||||
field.onChange(value);
|
))}
|
||||||
setValue("id", "0");
|
</select>
|
||||||
setValue("floorName", "");
|
{errors.buildingId && (
|
||||||
}}
|
<p className="danger-text">{errors.buildingId.message}</p>
|
||||||
required
|
|
||||||
noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
|
|
||||||
className="m-0 form-select-sm w-100"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
|
||||||
{errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{watchBuildingId !== "0" && (
|
{watchBuildingId !== "0" && (
|
||||||
<>
|
<>
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label">
|
<label className="form-label">Select Floor</label>
|
||||||
Select Floor
|
<select
|
||||||
</Label>
|
{...register("id")}
|
||||||
|
className="form-select form-select-sm"
|
||||||
<AppFormController
|
onChange={handleFloorChange}
|
||||||
name="id"
|
>
|
||||||
control={control}
|
<option value="0">Add New Floor</option>
|
||||||
rules={{ required: "Floor is required" }}
|
{selectedBuilding?.floors?.length > 0 &&
|
||||||
render={({ field }) => {
|
selectedBuilding.floors
|
||||||
// Prepare options
|
.filter((f) => f.floorName)
|
||||||
const floorOptions = [
|
|
||||||
{ id: "0", name: "Add New Floor" },
|
|
||||||
...(selectedBuilding?.floors
|
|
||||||
?.filter((f) => f.floorName)
|
|
||||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||||
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
|
.map((f) => (
|
||||||
];
|
<option key={f.id} value={f.id}>
|
||||||
|
{f.floorName}
|
||||||
return (
|
</option>
|
||||||
<SelectField
|
))}
|
||||||
label=""
|
</select>
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
|
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
{...register("floorName")}
|
{...register("floorName")}
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Floor Name"
|
placeholder="Floor Name"
|
||||||
/>
|
/>
|
||||||
{errors.floorName && (
|
{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
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
@ -227,7 +186,6 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -12,8 +12,6 @@ import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedS
|
|||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
import Label from "../../common/Label";
|
import Label from "../../common/Label";
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
import { useSelectedProject } from "../../../slices/apiDataManager";
|
||||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const taskSchema = z.object({
|
const taskSchema = z.object({
|
||||||
buildingID: z.string().min(1, "Building is required"),
|
buildingID: z.string().min(1, "Building is required"),
|
||||||
@ -78,12 +76,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
setValue("activityID", "");
|
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 [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
const [activityData, setActivityData] = useState([]);
|
const [activityData, setActivityData] = useState([]);
|
||||||
@ -108,10 +112,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
const { mutate: CreateTask, isPending } = useManageTask({
|
const { mutate: CreateTask, isPending } = useManageTask({
|
||||||
onSuccessCallback: (response) => {
|
onSuccessCallback: (response) => {
|
||||||
showToast(response?.message, "success");
|
showToast(response?.message, "success");
|
||||||
setValue("activityID", ""),
|
setValue("activityID",""),
|
||||||
setValue("plannedWork", 0),
|
setValue("plannedWork",0),
|
||||||
setValue("completedWork", 0)
|
setValue("completedWork",0)
|
||||||
setValue("comment", "")
|
setValue("comment","")
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -144,217 +148,152 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
<div className="text-center mb-1">
|
<div className="text-center mb-1">
|
||||||
<h5 className="mb-1">Manage Task</h5>
|
<h5 className="mb-1">Manage Task</h5>
|
||||||
</div>
|
</div>
|
||||||
{/* Select Building */}
|
|
||||||
<div className="col-6 text-start">
|
<div className="col-6 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Building</Label>
|
||||||
name="buildingID"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("buildingID")}
|
||||||
<SelectField
|
>
|
||||||
label="Select Building"
|
<option value="">Select Building</option>
|
||||||
options={project ?? []}
|
{project
|
||||||
placeholder="Select Building"
|
?.filter((b) => b?.buildingName)
|
||||||
required
|
?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
|
||||||
labelKey="buildingName"
|
?.map((b) => (
|
||||||
valueKey="id"
|
<option key={b.id} value={b.id}>
|
||||||
value={field.value}
|
{b.buildingName}
|
||||||
onChange={(value) => {
|
</option>
|
||||||
field.onChange(value);
|
))}
|
||||||
setValue("floorId", "");
|
</select>
|
||||||
setValue("workAreaId", "");
|
|
||||||
setSelectedService("");
|
|
||||||
setSelectedGroup("");
|
|
||||||
}}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.buildingID && (
|
{errors.buildingID && (
|
||||||
<small className="danger-text">{errors.buildingID.message}</small>
|
<p className="danger-text">{errors.buildingID.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Select Floor */}
|
|
||||||
{selectedBuilding && (
|
{selectedBuilding && (
|
||||||
<div className="col-6 text-start">
|
<div className="col-6 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Floor</Label>
|
||||||
name="floorId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("floorId")}
|
||||||
<SelectField
|
>
|
||||||
label="Select Floor"
|
<option value="">Select Floor</option>
|
||||||
options={selectedBuilding?.floors ?? []}
|
{selectedBuilding.floors
|
||||||
placeholder={
|
?.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||||
selectedBuilding?.floors?.length > 0
|
?.map((f) => (
|
||||||
? "Select Floor"
|
<option key={f.id} value={f.id}>
|
||||||
: "No Floor Found"
|
{f.floorName}
|
||||||
}
|
</option>
|
||||||
required
|
))}
|
||||||
labelKey="floorName"
|
</select>
|
||||||
valueKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={(value) => {
|
|
||||||
field.onChange(value);
|
|
||||||
setValue("workAreaId", "");
|
|
||||||
}}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.floorId && (
|
{errors.floorId && (
|
||||||
<small className="danger-text">{errors.floorId.message}</small>
|
<p className="danger-text">{errors.floorId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Select Work Area */}
|
{/* Work Area Selection */}
|
||||||
{selectedFloor && (
|
{selectedFloor && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Work Area</Label>
|
||||||
name="workAreaId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("workAreaId")}
|
||||||
<SelectField
|
>
|
||||||
label="Select Work Area"
|
<option value="">Select Work Area</option>
|
||||||
options={selectedFloor?.workAreas ?? []}
|
{selectedFloor.workAreas
|
||||||
placeholder="Select Work Area"
|
?.sort((a, b) => a.areaName.localeCompare(b.areaName))
|
||||||
required
|
?.map((w) => (
|
||||||
labelKey="areaName"
|
<option key={w.id} value={w.id}>
|
||||||
valueKey="id"
|
{w.areaName}
|
||||||
value={field.value}
|
</option>
|
||||||
onChange={(value) => {
|
))}
|
||||||
field.onChange(value);
|
</select>
|
||||||
setSelectedService("");
|
|
||||||
setSelectedGroup("");
|
|
||||||
}}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.workAreaId && (
|
{errors.workAreaId && (
|
||||||
<small className="danger-text">{errors.workAreaId.message}</small>
|
<p className="danger-text">{errors.workAreaId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Select Service */}
|
{/* Services Selection */}
|
||||||
{selectedWorkArea && (
|
{selectedWorkArea && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Service</Label>
|
||||||
name="serviceId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("serviceId")}
|
||||||
<SelectField
|
value={selectedService}
|
||||||
label="Select Service"
|
// onChange={handleServiceChange}
|
||||||
options={assignedServices ?? []}
|
onChange={(e) => {
|
||||||
placeholder="Select Service"
|
handleServiceChange(e);
|
||||||
required
|
setValue("serviceId", e.target.value);
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={(value) => {
|
|
||||||
field.onChange(value);
|
|
||||||
setSelectedService(value);
|
|
||||||
setSelectedGroup("");
|
|
||||||
setValue("activityGroupId", "");
|
|
||||||
setValue("activityID", "");
|
|
||||||
}}
|
}}
|
||||||
isLoading={servicesLoading}
|
>
|
||||||
className="m-0"
|
<option value="">Select Service</option>
|
||||||
/>
|
{servicesLoading && <option>Loading...</option>}
|
||||||
)}
|
{assignedServices?.map((service) => (
|
||||||
/>
|
<option key={service.id} value={service.id}>
|
||||||
{errors.serviceId && (
|
{service.name}
|
||||||
<small className="danger-text">{errors.serviceId.message}</small>
|
</option>
|
||||||
)}
|
))}
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Select Activity Group */}
|
{/* Activity Group (Organization) Selection */}
|
||||||
{selectedService && (
|
{selectedService && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Activity Group</Label>
|
||||||
name="activityGroupId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("activityGroupId")}
|
||||||
<SelectField
|
value={selectedGroup}
|
||||||
label="Select Activity Group"
|
onChange={handleGroupChange}
|
||||||
options={groups ?? []}
|
>
|
||||||
placeholder="Select Activity Group"
|
<option value="">Select Group</option>
|
||||||
required
|
{groupsLoading && <option>Loading...</option>}
|
||||||
labelKey="name"
|
{groups?.map((g) => (
|
||||||
valueKey="id"
|
<option key={g.id} value={g.id}>{g.name}</option>
|
||||||
value={field.value}
|
))}
|
||||||
onChange={(value) => {
|
</select>
|
||||||
field.onChange(value);
|
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
|
||||||
setSelectedGroup(value);
|
|
||||||
setValue("activityID", "");
|
|
||||||
}}
|
|
||||||
isLoading={groupsLoading}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.activityGroupId && (
|
|
||||||
<small className="danger-text">{errors.activityGroupId.message}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
{/* Select Activity */}
|
{/* Activity Selection */}
|
||||||
{selectedGroup && (
|
{selectedGroup && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Activity</Label>
|
||||||
name="activityID"
|
<select className="form-select form-select-sm" {...register("activityID")}>
|
||||||
control={control}
|
<option value="">Select Activity</option>
|
||||||
render={({ field }) => (
|
{activitiesLoading && <option>Loading...</option>}
|
||||||
<SelectField
|
{activities?.map((a) => (
|
||||||
label="Select Activity"
|
<option key={a.id} value={a.id}>{a.activityName}</option>
|
||||||
options={activities ?? []}
|
))}
|
||||||
placeholder="Select Activity"
|
</select>
|
||||||
required
|
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{watchActivityId && (
|
{watchActivityId && (
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Select Work Category</label>
|
||||||
name="workCategoryId"
|
<select
|
||||||
control={control}
|
className="form-select form-select-sm"
|
||||||
render={({ field }) => (
|
{...register("workCategoryId")}
|
||||||
<SelectField
|
>
|
||||||
label="Select Work Category"
|
{categoryData.map((c) => (
|
||||||
options={categoryData ?? []}
|
<option key={c.id} value={c.id}>
|
||||||
placeholder="Select Work Category"
|
{c.name}
|
||||||
required
|
</option>
|
||||||
labelKey="name"
|
))}
|
||||||
valueKey="id"
|
</select>
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.workCategoryId && (
|
{errors.workCategoryId && (
|
||||||
<small className="danger-text">{errors.workCategoryId.message}</small>
|
<p className="danger-text">{errors.workCategoryId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -365,7 +304,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
<Label className="form-label" required>Planned Work</Label>
|
<Label className="form-label" required>Planned Work</Label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("plannedWork", { valueAsNumber: true })}
|
{...register("plannedWork", { valueAsNumber: true })}
|
||||||
/>
|
/>
|
||||||
{errors.plannedWork && (
|
{errors.plannedWork && (
|
||||||
@ -376,7 +315,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
<label className="form-label">Completed Work</label>
|
<label className="form-label">Completed Work</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("completedWork", { valueAsNumber: true })}
|
{...register("completedWork", { valueAsNumber: true })}
|
||||||
/>
|
/>
|
||||||
{errors.completedWork && (
|
{errors.completedWork && (
|
||||||
@ -387,7 +326,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
<label className="form-label">Unit</label>
|
<label className="form-label">Unit</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
disabled
|
disabled
|
||||||
value={selectedActivity?.unitOfMeasurement || ""}
|
value={selectedActivity?.unitOfMeasurement || ""}
|
||||||
/>
|
/>
|
||||||
@ -409,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
@ -427,7 +366,6 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -6,8 +6,6 @@ import showToast from "../../../services/toastService";
|
|||||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import Label from "../../common/Label";
|
import Label from "../../common/Label";
|
||||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const workAreaSchema = z.object({
|
const workAreaSchema = z.object({
|
||||||
id: z.string().optional(),
|
id: z.string().optional(),
|
||||||
@ -28,14 +26,19 @@ const defaultModel = {
|
|||||||
const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
||||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||||
const [selectedFloor, setSelectedFloor] = useState(null);
|
const [selectedFloor, setSelectedFloor] = useState(null);
|
||||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
const selectedProject = useSelector((store) => store.localVariables.projectId)
|
||||||
const methods = useForm({
|
const {
|
||||||
defaultValues: defaultModel,
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
setValue,
|
||||||
|
reset,
|
||||||
|
watch,
|
||||||
|
} = useForm({
|
||||||
resolver: zodResolver(workAreaSchema),
|
resolver: zodResolver(workAreaSchema),
|
||||||
|
defaultValues: defaultModel,
|
||||||
});
|
});
|
||||||
|
|
||||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
|
||||||
|
|
||||||
const watchBuildingId = watch("buildingId");
|
const watchBuildingId = watch("buildingId");
|
||||||
const watchFloorId = watch("floorId");
|
const watchFloorId = watch("floorId");
|
||||||
const watchWorkAreaId = watch("id");
|
const watchWorkAreaId = watch("id");
|
||||||
@ -101,91 +104,69 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppFormProvider {...methods}>
|
|
||||||
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
|
||||||
<div className="text-center mb-1">
|
<div className="text-center mb-1">
|
||||||
<h5 className="mb-1">Manage Work Area</h5>
|
<h5 className="mb-1">Manage Work Area</h5>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-sm-6 text-start">
|
<div className="col-12 col-sm-6 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Building</Label>
|
||||||
name="buildingId"
|
<select
|
||||||
control={control}
|
{...register("buildingId")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
>
|
||||||
label="Select Building"
|
<option value="0">Select Building</option>
|
||||||
options={project ?? []}
|
{project?.map((b) => (
|
||||||
placeholder="Select Building"
|
<option key={b.id} value={b.id}>
|
||||||
required
|
{b.buildingName}
|
||||||
labelKey="buildingName"
|
</option>
|
||||||
valueKey="id"
|
))}
|
||||||
value={field.value}
|
</select>
|
||||||
onChange={field.onChange}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.buildingId && (
|
{errors.buildingId && (
|
||||||
<small className="danger-text">{errors.buildingId.message}</small>
|
<p className="danger-text">{errors.buildingId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{watchBuildingId !== "0" && (
|
{watchBuildingId !== "0" && (
|
||||||
<div className="col-12 col-sm-6 text-start">
|
<div className="col-12 col-sm-6 text-start">
|
||||||
<AppFormController
|
<Label className="form-label" required>Select Floor</Label>
|
||||||
name="floorId"
|
<select
|
||||||
control={control}
|
{...register("floorId")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
>
|
||||||
label="Select Floor"
|
<option value="0">
|
||||||
options={selectedBuilding?.floors ?? []}
|
{selectedBuilding?.floor?.length > 0
|
||||||
placeholder={
|
? "NO Floor Found"
|
||||||
selectedBuilding?.floors?.length > 0
|
: "Select Floor"}
|
||||||
? "Select Floor"
|
</option>
|
||||||
: "No Floor Found"
|
|
||||||
}
|
{selectedBuilding?.floors?.map((f) => (
|
||||||
required
|
<option key={f.id} value={f.id}>
|
||||||
labelKey="floorName"
|
{f.floorName}
|
||||||
valueKey="id"
|
</option>
|
||||||
value={field.value}
|
))}
|
||||||
onChange={(value) => {
|
</select>
|
||||||
field.onChange(value);
|
|
||||||
setValue("areaName", ""); // reset Work Area name when floor changes
|
|
||||||
}}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.floorId && (
|
{errors.floorId && (
|
||||||
<small className="danger-text">{errors.floorId.message}</small>
|
<p className="danger-text">{errors.floorId.message}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{watchFloorId !== "0" && (
|
{watchFloorId !== "0" && (
|
||||||
<>
|
<>
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
<AppFormController
|
<label className="form-label">Select Work Area</label>
|
||||||
name="id"
|
<select
|
||||||
control={control}
|
{...register("id")}
|
||||||
render={({ field }) => (
|
className="form-select form-select-sm"
|
||||||
<SelectField
|
onChange={handleWrokAreaChange}
|
||||||
label="Select Work Area"
|
>
|
||||||
options={selectedFloor?.workAreas ?? []}
|
<option value="0">Create New Work Area</option>
|
||||||
placeholder="Create New Work Area"
|
{selectedFloor?.workAreas?.length > 0 &&
|
||||||
required={false}
|
selectedFloor?.workAreas?.map((w) => (
|
||||||
labelKey="areaName"
|
<option key={w.id} value={w.id}>
|
||||||
valueKey="id"
|
{w.areaName}
|
||||||
value={field.value}
|
</option>
|
||||||
onChange={(value) => {
|
))}
|
||||||
field.onChange(value);
|
</select>
|
||||||
handleWrokAreaChange({ target: { value } }); // preserve your existing handler
|
|
||||||
}}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 text-start">
|
||||||
@ -196,7 +177,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control"
|
className="form-control form-control-sm"
|
||||||
placeholder="Work Area"
|
placeholder="Work Area"
|
||||||
{...register("areaName")}
|
{...register("areaName")}
|
||||||
/>
|
/>
|
||||||
@ -206,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="col-12 text-end mt-6 my-2">
|
<div className="col-12 text-end mt-5">
|
||||||
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
|
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
@ -216,7 +197,6 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</AppFormProvider>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -17,8 +17,6 @@ import {
|
|||||||
useOrganizationsList,
|
useOrganizationsList,
|
||||||
} from "../../hooks/useOrganization";
|
} from "../../hooks/useOrganization";
|
||||||
import { localToUtc } from "../../utils/appUtils";
|
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 currentDate = new Date().toLocaleDateString("en-CA");
|
||||||
const formatDate = (date) => {
|
const formatDate = (date) => {
|
||||||
@ -44,8 +42,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
1,
|
1,
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
|
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||||
const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
|
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -76,7 +74,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
pmcId: projects_Details?.pmc?.id || "",
|
pmcId: projects_Details?.pmc?.id || "",
|
||||||
});
|
});
|
||||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
||||||
}, [project, projects_Details, reset, data]);
|
}, [project, projects_Details, reset,data]);
|
||||||
|
|
||||||
const onSubmitForm = (formData) => {
|
const onSubmitForm = (formData) => {
|
||||||
if (project) {
|
if (project) {
|
||||||
@ -87,7 +85,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
id: project,
|
id: project,
|
||||||
};
|
};
|
||||||
UpdateProject({ projectId: project, payload: payload });
|
UpdateProject({ projectId: project, payload: payload });
|
||||||
} else {
|
}else{
|
||||||
let payload = {
|
let payload = {
|
||||||
...formData,
|
...formData,
|
||||||
startDate: localToUtc(formData.startDate),
|
startDate: localToUtc(formData.startDate),
|
||||||
@ -124,7 +122,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
type="text"
|
type="text"
|
||||||
id="name"
|
id="name"
|
||||||
name="name"
|
name="name"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Project Name"
|
placeholder="Project Name"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
/>
|
/>
|
||||||
@ -145,7 +143,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
type="text"
|
type="text"
|
||||||
id="shortName"
|
id="shortName"
|
||||||
name="shortName"
|
name="shortName"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Short Name"
|
placeholder="Short Name"
|
||||||
{...register("shortName")}
|
{...register("shortName")}
|
||||||
/>
|
/>
|
||||||
@ -166,7 +164,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
type="text"
|
type="text"
|
||||||
id="contactPerson"
|
id="contactPerson"
|
||||||
name="contactPerson"
|
name="contactPerson"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
placeholder="Contact Person"
|
placeholder="Contact Person"
|
||||||
maxLength={50}
|
maxLength={50}
|
||||||
{...register("contactPerson")}
|
{...register("contactPerson")}
|
||||||
@ -192,7 +190,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
placeholder="DD-MM-YYYY"
|
placeholder="DD-MM-YYYY"
|
||||||
maxDate={new Date()} // optional: restrict future dates
|
maxDate={new Date()} // optional: restrict future dates
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.startDate && (
|
{errors.startDate && (
|
||||||
@ -216,7 +213,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
placeholder="DD-MM-YYYY"
|
placeholder="DD-MM-YYYY"
|
||||||
minDate={getValues("startDate")} // optional: restrict future dates
|
minDate={getValues("startDate")} // optional: restrict future dates
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.endDate && (
|
{errors.endDate && (
|
||||||
@ -229,108 +225,103 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12">
|
<div className="col-12 ">
|
||||||
<Label htmlFor="modalEditUserStatus" className="form-label">
|
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||||
Status
|
Status
|
||||||
</Label>
|
</label>
|
||||||
|
<select
|
||||||
<AppFormController
|
id="modalEditUserStatus"
|
||||||
name="projectStatusId"
|
name="modalEditUserStatus"
|
||||||
control={control}
|
className="select2 form-select form-select-sm"
|
||||||
rules={{ required: "Status is required" }}
|
aria-label="Default select example"
|
||||||
render={({ field }) => (
|
{...register("projectStatusId", {
|
||||||
<SelectField
|
required: "Status is required",
|
||||||
label="" // Label is already above
|
valueAsNumber: false,
|
||||||
placeholder="Select Status"
|
})}
|
||||||
options={PROJECT_STATUS?.map((status) => ({
|
>
|
||||||
id: status.id,
|
{PROJECT_STATUS.map((status) => (
|
||||||
name: status.label,
|
<option key={status.id} value={status.id}>
|
||||||
})) ?? []}
|
{status.label}
|
||||||
value={field.value || ""}
|
</option>
|
||||||
onChange={field.onChange}
|
))}
|
||||||
required
|
</select>
|
||||||
className="m-0 form-select-sm w-100"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.projectStatusId && (
|
{errors.projectStatusId && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.projectStatusId.message}
|
{errors.projectStatusId.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 ">
|
||||||
<div className="col-12">
|
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||||
<Label htmlFor="promoterId" className="form-label">
|
|
||||||
Promoter
|
Promoter
|
||||||
</Label>
|
</label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="select2 form-select form-select-sm"
|
||||||
name="promoterId"
|
aria-label="Default select example"
|
||||||
control={control}
|
{...register("promoterId", {
|
||||||
rules={{ required: "Promoter is required" }}
|
required: "Promoter is required",
|
||||||
render={({ field }) => (
|
valueAsNumber: false,
|
||||||
<SelectField
|
})}
|
||||||
label="" // Label is already above
|
>
|
||||||
placeholder="Select Promoter"
|
{isLoading ? (
|
||||||
options={data?.data ?? []}
|
<option>Loading...</option>
|
||||||
value={field.value || ""}
|
) : (
|
||||||
onChange={field.onChange}
|
<>
|
||||||
required
|
<option value="">Select Promoter</option>
|
||||||
isLoading={isLoading}
|
{data?.data?.map((org) => (
|
||||||
className="m-0 form-select-sm w-100"
|
<option key={org.id} value={org.id}>
|
||||||
noOptionsMessage={() =>
|
{org.name}
|
||||||
!isLoading && (!data?.data || data.data.length === 0)
|
</option>
|
||||||
? "No promoters found"
|
))}
|
||||||
: null
|
</>
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.promoterId && (
|
{errors.promoterId && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.promoterId.message}
|
{errors.promoterId.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 ">
|
||||||
<div className="col-12">
|
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||||
<Label htmlFor="pmcId" className="form-label">
|
|
||||||
PMC
|
PMC
|
||||||
</Label>
|
</label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="select2 form-select form-select-sm"
|
||||||
name="pmcId"
|
aria-label="Default select example"
|
||||||
control={control}
|
{...register("pmcId", {
|
||||||
rules={{ required: "PMC is required" }}
|
required: "Promoter is required",
|
||||||
render={({ field }) => (
|
valueAsNumber: false,
|
||||||
<SelectField
|
})}
|
||||||
label="" // Label is already above
|
>
|
||||||
placeholder="Select PMC"
|
{isLoading ? (
|
||||||
options={data?.data ?? []}
|
<option>Loading...</option>
|
||||||
value={field.value || ""}
|
) : (
|
||||||
onChange={field.onChange}
|
<>
|
||||||
required
|
<option value="">Select PMC</option>
|
||||||
isLoading={isLoading}
|
{data?.data?.map((org) => (
|
||||||
className="m-0 form-select-sm w-100"
|
<option key={org.id} value={org.id}>
|
||||||
noOptionsMessage={() =>
|
{org.name}
|
||||||
!isLoading && (!data?.data || data.data.length === 0)
|
</option>
|
||||||
? "No PMC found"
|
))}
|
||||||
: null
|
</>
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.pmcId && (
|
{errors.pmcId && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.pmcId.message}
|
{errors.pmcId.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
||||||
<span>
|
<span>
|
||||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
<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"
|
className="btn btn-primary btn-sm"
|
||||||
disabled={isPending || isCreating || loading}
|
disabled={isPending || isCreating || loading}
|
||||||
>
|
>
|
||||||
{isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -30,9 +30,6 @@ import { useParams } from "react-router-dom";
|
|||||||
import GlobalModel from "../common/GlobalModel";
|
import GlobalModel from "../common/GlobalModel";
|
||||||
import { setService } from "../../slices/globalVariablesSlice";
|
import { setService } from "../../slices/globalVariablesSlice";
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
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 ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||||
const projectId = useSelectedProject();
|
const projectId = useSelectedProject();
|
||||||
@ -55,12 +52,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
const { data: assignedServices, isLoading: servicesLoading } =
|
const { data: assignedServices, isLoading: servicesLoading } =
|
||||||
useProjectAssignedServices(projectId);
|
useProjectAssignedServices(projectId);
|
||||||
|
|
||||||
const { control } = useForm({
|
|
||||||
defaultValues: {
|
|
||||||
serviceId: selectedService || "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setProject(projectInfra);
|
setProject(projectInfra);
|
||||||
}, [data, projects_Details]);
|
}, [data, projects_Details]);
|
||||||
@ -69,11 +60,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
setProject(response);
|
setProject(response);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleServiceChange = (serviceId) => {
|
|
||||||
dispatch(setService(serviceId));
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{showModalBuilding && (
|
{showModalBuilding && (
|
||||||
@ -129,39 +115,37 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||||
<div className="align-items-center">
|
<div className="align-items-center">
|
||||||
<div className="row ">
|
<div className="row ">
|
||||||
<div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
|
<div
|
||||||
<div className="ms-4 mt-n1">
|
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
||||||
{!servicesLoading && assignedServices?.length > 0 && (
|
id="DataTables_Table_0_length"
|
||||||
assignedServices.length > 1 ? (
|
>
|
||||||
<AppFormController
|
{!servicesLoading &&
|
||||||
name="serviceId"
|
assignedServices?.length > 0 &&
|
||||||
control={control}
|
(assignedServices.length > 1 ? (
|
||||||
render={({ field }) => (
|
<label>
|
||||||
<SelectField
|
<select
|
||||||
label="Select Service"
|
name="DataTables_Table_0_length"
|
||||||
options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]}
|
aria-controls="DataTables_Table_0"
|
||||||
placeholder="Choose a Service"
|
className="form-select form-select-sm"
|
||||||
required
|
aria-label="Select Service"
|
||||||
labelKey="name"
|
value={selectedService}
|
||||||
valueKey="id"
|
onChange={(e) => dispatch(setService(e.target.value))}
|
||||||
value={field.value}
|
>
|
||||||
onChange={(val) => {
|
<option value="">All Services</option>
|
||||||
field.onChange(val);
|
{assignedServices.map((service) => (
|
||||||
handleServiceChange(val);
|
<option key={service.id} value={service.id}>
|
||||||
}}
|
{service.name}
|
||||||
isLoading={servicesLoading}
|
</option>
|
||||||
/>
|
))}
|
||||||
)}
|
</select>
|
||||||
/>
|
</label>
|
||||||
) : (
|
) : (
|
||||||
<h5>{assignedServices[0].name}</h5>
|
<h5>{assignedServices[0].name}</h5>
|
||||||
)
|
))}
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Buttons Section (aligned to right) */}
|
{/* 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 && (
|
{ManageInfra && (
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
@ -215,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
|||||||
serviceId={selectedService}
|
serviceId={selectedService}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="text-center py-12">
|
<div className="text-center py-5">
|
||||||
<p className="text-muted fs-6">No infrastructure data available.</p>
|
<p className="text-muted fs-6">No infrastructure data available.</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -27,7 +27,6 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
|
|
||||||
const ProjectTab = [
|
const ProjectTab = [
|
||||||
{ key: "profile", icon: "bx bx-user", label: "Profile" },
|
{ 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: "teams", icon: "bx bx-group", label: "Teams" },
|
||||||
{
|
{
|
||||||
key: "infra",
|
key: "infra",
|
||||||
@ -42,7 +41,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
|||||||
hidden: !(DirAdmin || DireManager || DirUser),
|
hidden: !(DirAdmin || DireManager || DirUser),
|
||||||
},
|
},
|
||||||
{ key: "documents", icon: "bx bx-folder-open", label: "Documents", hidden: !(isViewDocuments || isModifyDocument || isUploadDocument) },
|
{ 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 },
|
{ key: "setting", icon: "bx bxs-cog", label: "Setting", hidden: !isManageTeam },
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -15,7 +15,7 @@ const ProjectAssignedOrgs = () => {
|
|||||||
label: "Organization Name",
|
label: "Organization Name",
|
||||||
getValue: (org) => (
|
getValue: (org) => (
|
||||||
<div className="d-flex gap-2 py-1 ">
|
<div className="d-flex gap-2 py-1 ">
|
||||||
<i className="bx bx-buildings"></i>
|
<i class="bx bx-buildings"></i>
|
||||||
<span
|
<span
|
||||||
className="text-truncate d-inline-block "
|
className="text-truncate d-inline-block "
|
||||||
style={{ maxWidth: "150px" }}
|
style={{ maxWidth: "150px" }}
|
||||||
@ -103,7 +103,7 @@ const ProjectAssignedOrgs = () => {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{Array.isArray(data) && data.length > 0 ? (
|
{Array.isArray(data) && data.length > 0 ? (
|
||||||
data.map((row, i) => (
|
data.map((row, i) => (
|
||||||
<tr key={i} style={{ height: "50px" }}>
|
<tr key={i}>
|
||||||
{orgList.map((col) => (
|
{orgList.map((col) => (
|
||||||
<td key={col.key} className={col.align}>
|
<td key={col.key} className={col.align}>
|
||||||
{col.getValue(row)}
|
{col.getValue(row)}
|
||||||
|
|||||||
@ -10,8 +10,6 @@ import { useForm, Controller } from "react-hook-form";
|
|||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import showToast from "../../services/toastService";
|
import showToast from "../../services/toastService";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
export const ProjectPermissionSchema = z.object({
|
export const ProjectPermissionSchema = z.object({
|
||||||
employeeId: z.string().min(1, "Employee is required"),
|
employeeId: z.string().min(1, "Employee is required"),
|
||||||
@ -56,16 +54,16 @@ const ProjectPermission = () => {
|
|||||||
?.map((perm) => perm.id) || [];
|
?.map((perm) => perm.id) || [];
|
||||||
|
|
||||||
setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
|
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
|
selectedEmpPermissions?.permissions
|
||||||
?.filter((p) => p.isEnabled)
|
?.filter((p) => p.isEnabled)
|
||||||
?.map((p) => p.id) || [];
|
?.map((p) => p.id) || [];
|
||||||
|
|
||||||
const hasChanges =
|
const hasChanges =
|
||||||
selectedPermissions.length !== existingEnabledIds.length ||
|
selectedPermissions.length !== existingEnabledIds.length ||
|
||||||
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
|
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
|
||||||
|
|
||||||
@ -117,42 +115,35 @@ const ProjectPermission = () => {
|
|||||||
<form className="row" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="d-flex justify-content-between align-items-end gap-2 mb-3">
|
<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="text-start d-flex align-items-center gap-2">
|
||||||
{/* <div className="d-block">
|
<div className="d-block">
|
||||||
<label className="form-label">Select Employee</label>
|
<label className="form-label">Select Employee</label>
|
||||||
</div> */}
|
</div>
|
||||||
|
<div className="d-block">
|
||||||
<div className="d-block flex-grow-1">
|
{" "}
|
||||||
<AppFormController
|
<select
|
||||||
name="employeeId"
|
className="form-select form-select-sm"
|
||||||
control={control}
|
{...register("employeeId")}
|
||||||
render={({ field }) => (
|
disabled={isPending}
|
||||||
<SelectField
|
>
|
||||||
label="Select Employee"
|
{loading ? (
|
||||||
options={
|
<option value="">Loading...</option>
|
||||||
employees
|
) : (
|
||||||
|
<>
|
||||||
|
<option value="">-- Select Employee --</option>
|
||||||
|
{[...employees]
|
||||||
?.sort((a, b) =>
|
?.sort((a, b) =>
|
||||||
`${a?.firstName} ${a?.lastName}`.localeCompare(
|
`${a?.firstName} ${a?.firstName}`?.localeCompare(
|
||||||
`${b?.firstName} ${b?.lastName}`
|
`${b?.firstName} ${b?.lastName}`
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
?.map((emp) => ({
|
?.map((emp) => (
|
||||||
id: emp.id,
|
<option key={emp.id} value={emp.id}>
|
||||||
name: `${emp.firstName} ${emp.lastName}`,
|
{emp.firstName} {emp.lastName}
|
||||||
})) ?? []
|
</option>
|
||||||
}
|
))}
|
||||||
placeholder="-- Select Employee --"
|
</>
|
||||||
required
|
|
||||||
labelKey="name"
|
|
||||||
valueKeyKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
isLoading={loading}
|
|
||||||
disabled={isPending}
|
|
||||||
className="m-0"
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.employeeId && (
|
{errors.employeeId && (
|
||||||
<div className="d-block text-danger small">
|
<div className="d-block text-danger small">
|
||||||
{errors.employeeId.message}
|
{errors.employeeId.message}
|
||||||
@ -161,7 +152,6 @@ const ProjectPermission = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="mt-3 text-end">
|
<div className="mt-3 text-end">
|
||||||
{hasChanges && (
|
{hasChanges && (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
|
|||||||
}, [selectedProject]);
|
}, [selectedProject]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="card h-100">
|
||||||
<div className="card-header text-start">
|
<div className="card-header text-start">
|
||||||
<h5 className="card-action-title mb-0">
|
<h5 className="card-action-title mb-0">
|
||||||
{" "}
|
{" "}
|
||||||
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -4,9 +4,6 @@ import { useOrganization } from "../../../hooks/useDirectory";
|
|||||||
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
import { useOrganizationsList } from "../../../hooks/useOrganization";
|
||||||
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
|
||||||
import { useSelectedProject } from "../../../slices/apiDataManager";
|
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 TeamAssignToProject = ({ closeModal }) => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
@ -14,48 +11,53 @@ const TeamAssignToProject = ({ closeModal }) => {
|
|||||||
const project = useSelectedProject();
|
const project = useSelectedProject();
|
||||||
const { data, isLoading, isError, error } =
|
const { data, isLoading, isError, error } =
|
||||||
useProjectAssignedOrganizationsName(project);
|
useProjectAssignedOrganizationsName(project);
|
||||||
const { control, watch, formState: { errors } } = useForm({
|
|
||||||
defaultValues: { organizationId: "" },
|
|
||||||
});
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
|
<p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
|
||||||
<h5 className="mb-4">Assign Employee To Project</h5>
|
|
||||||
|
|
||||||
<div className="row align-items-center gx-5 text-start">
|
<div className="row align-items-center gx-5">
|
||||||
<div className="col-12 col-md-6 mb-2">
|
<div className="col">
|
||||||
<AppFormController
|
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||||
name="organizationId"
|
{isLoading ? (
|
||||||
control={control}
|
<select className="form-select form-select-sm w-100" disabled>
|
||||||
rules={{ required: "Organization is required" }}
|
<option value="">Loading...</option>
|
||||||
render={({ field }) => (
|
</select>
|
||||||
<SelectField
|
) : data?.length === 0 ? (
|
||||||
label="Select Organization"
|
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
|
||||||
options={data ?? []}
|
) : (
|
||||||
placeholder="Choose an Organization"
|
<>
|
||||||
required
|
<label
|
||||||
labelKey="name"
|
htmlFor="organization"
|
||||||
valueKey="id"
|
className="form-label mb-0 text-nowrap"
|
||||||
value={field.value}
|
>
|
||||||
onChange={field.onChange}
|
Select Organization
|
||||||
isLoading={isLoading}
|
</label>
|
||||||
className="m-0 w-100"
|
<select
|
||||||
/>
|
id="organization"
|
||||||
)}
|
className="form-select form-select-sm w-100"
|
||||||
/>
|
value={selectedOrg || ""}
|
||||||
{errors.organizationId && (
|
onChange={(e) => setSelectedOrg(e.target.value)}
|
||||||
<small className="danger-text">{errors.organizationId.message}</small>
|
>
|
||||||
|
<option value="">Select</option>
|
||||||
|
{data.map((org) => (
|
||||||
|
<option key={org.id} value={org.id}>
|
||||||
|
{org.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 mt-n5">
|
</div>
|
||||||
<div className="d-flex flex-column">
|
<div className="col">
|
||||||
<label htmlFor="search" className="form-label mb-1">
|
<div className="d-flex flex-grow-1 align-items-center gap-2">
|
||||||
|
<label htmlFor="search" className="form-label mb-0 text-nowrap">
|
||||||
Search Employee
|
Search Employee
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="search"
|
id="search"
|
||||||
type="search"
|
type="search"
|
||||||
className="form-control w-100"
|
className="form-control form-control-sm w-100"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
value={searchText}
|
value={searchText}
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
onChange={(e) => setSearchText(e.target.value)}
|
||||||
|
|||||||
@ -158,7 +158,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
|||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="position-relative mt-5">
|
<div className=" position-relative">
|
||||||
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
|
||||||
<thead className=" position-sticky top-0">
|
<thead className=" position-sticky top-0">
|
||||||
<tr>
|
<tr>
|
||||||
@ -233,15 +233,15 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
|
|||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 my-3">
|
<div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 ">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary mt-2"
|
className="btn btn-sm btn-label-secondary"
|
||||||
onClick={() => closeModal()}
|
onClick={() => closeModal()}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button onClick={onSubmit} className="btn btn-primary btn-sm mt-2">
|
<button onClick={onSubmit} className="btn btn-primary">
|
||||||
{isPending ? "Please Wait..." : "Assign to Project"}
|
{isPending ? "Please Wait..." : "Assign to Project"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -22,9 +22,6 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
|
|||||||
import GlobalModel from "../../common/GlobalModel";
|
import GlobalModel from "../../common/GlobalModel";
|
||||||
import TeamAssignToProject from "./TeamAssignToProject";
|
import TeamAssignToProject from "./TeamAssignToProject";
|
||||||
import { SpinnerLoader } from "../../common/Loader";
|
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 Teams = () => {
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
@ -33,15 +30,9 @@ const Teams = () => {
|
|||||||
const [employees, setEmployees] = useState([]);
|
const [employees, setEmployees] = useState([]);
|
||||||
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
const [selectedEmployee, setSelectedEmployee] = useState(null);
|
||||||
const [deleteEmployee, setDeleteEmplyee] = 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 [activeEmployee, setActiveEmployee] = useState(false);
|
||||||
const { control, watch } = useForm({
|
|
||||||
defaultValues: {
|
|
||||||
selectedService: "",
|
|
||||||
searchTerm: "",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const selectedService = watch("selectedService");
|
|
||||||
const searchTerm = watch("searchTerm");
|
|
||||||
|
|
||||||
const { data: assignedServices, isLoading: servicesLoading } =
|
const { data: assignedServices, isLoading: servicesLoading } =
|
||||||
useProjectAssignedServices(selectedProject);
|
useProjectAssignedServices(selectedProject);
|
||||||
@ -104,23 +95,26 @@ const Teams = () => {
|
|||||||
|
|
||||||
const filteredEmployees = useMemo(() => {
|
const filteredEmployees = useMemo(() => {
|
||||||
if (!projectEmployees) return [];
|
if (!projectEmployees) return [];
|
||||||
|
|
||||||
let filtered = projectEmployees;
|
let filtered = projectEmployees;
|
||||||
|
|
||||||
if (activeEmployee) {
|
if (activeEmployee) {
|
||||||
filtered = projectEmployees.filter((emp) => !emp.isActive);
|
filtered = projectEmployees.filter((emp) => !emp.isActive);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply search filter if present
|
||||||
if (searchTerm?.trim()) {
|
if (searchTerm?.trim()) {
|
||||||
const lower = searchTerm.toLowerCase();
|
const lower = searchTerm.toLowerCase();
|
||||||
filtered = filtered.filter((emp) => {
|
filtered = filtered.filter((emp) => {
|
||||||
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
|
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;
|
return filtered;
|
||||||
}, [projectEmployees, searchTerm, activeEmployee]);
|
}, [projectEmployees, searchTerm, activeEmployee]);
|
||||||
|
const handleSearch = (e) => setSearchTerm(e.target.value);
|
||||||
const employeeHandler = useCallback(
|
const employeeHandler = useCallback(
|
||||||
(msg) => {
|
(msg) => {
|
||||||
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
|
||||||
@ -130,7 +124,6 @@ const Teams = () => {
|
|||||||
[filteredEmployees, refetch]
|
[filteredEmployees, refetch]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
eventBus.on("employee", employeeHandler);
|
eventBus.on("employee", employeeHandler);
|
||||||
return () => eventBus.off("employee", employeeHandler);
|
return () => eventBus.off("employee", employeeHandler);
|
||||||
@ -161,37 +154,33 @@ const Teams = () => {
|
|||||||
<div className="card card-action mb-6">
|
<div className="card card-action mb-6">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<div className="row align-items-center justify-content-between mb-4 g-3">
|
<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">
|
<div className="col-md-6 col-12 algin-items-center">
|
||||||
{!servicesLoading && assignedServices && (
|
<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>
|
<h5 className="mb-2">{assignedServices[0].name}</h5>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{assignedServices.length > 1 && (
|
{assignedServices?.length > 1 && (
|
||||||
<div className="col-12 col-md-6 mb-2 text-start">
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="selectedService"
|
aria-label="Select Service"
|
||||||
control={control}
|
value={selectedService}
|
||||||
render={({ field }) => (
|
onChange={handleServiceChange}
|
||||||
<SelectField
|
>
|
||||||
label="Select Service"
|
<option value="">All Services</option>
|
||||||
options={[{ id: "", name: "All Services" }, ...assignedServices]}
|
{assignedServices.map((service) => (
|
||||||
placeholder="Choose a Service"
|
<option key={service.id} value={service.id}>
|
||||||
labelKey="name"
|
{service.name}
|
||||||
valueKey="id"
|
</option>
|
||||||
value={field.value}
|
))}
|
||||||
onChange={field.onChange}
|
</select>
|
||||||
isLoading={servicesLoading}
|
|
||||||
className="w-100"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
<div className="form-check form-switch d-flex align-items-center text-nowrap">
|
||||||
<input
|
<input
|
||||||
@ -201,28 +190,26 @@ const Teams = () => {
|
|||||||
checked={activeEmployee}
|
checked={activeEmployee}
|
||||||
onChange={handleToggleActive}
|
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"}
|
{activeEmployee ? "Active Employees" : "In-active Employees"}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</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-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
|
||||||
<div className="col-12 col-md-4">
|
|
||||||
<AppFormController
|
|
||||||
name="searchTerm"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => (
|
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
className="form-control form-control-sm w-100"
|
className="form-control form-control-sm"
|
||||||
placeholder="Search by Name or Role"
|
placeholder="Search by Name or Role"
|
||||||
value={field.value}
|
aria-controls="DataTables_Table_0"
|
||||||
onChange={field.onChange}
|
style={{ maxWidth: "200px" }}
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={handleSearch}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{HasAssignUserPermission && (
|
{HasAssignUserPermission && (
|
||||||
<button
|
<button
|
||||||
@ -259,7 +246,8 @@ const Teams = () => {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="table-border-bottom-0">
|
<tbody className="table-border-bottom-0">
|
||||||
{filteredEmployees
|
{filteredEmployees &&
|
||||||
|
filteredEmployees
|
||||||
.sort((a, b) =>
|
.sort((a, b) =>
|
||||||
(a.firstName || "").localeCompare(b.firstName || "")
|
(a.firstName || "").localeCompare(b.firstName || "")
|
||||||
)
|
)
|
||||||
|
|||||||
@ -28,8 +28,6 @@ import { useEmployeesName } from "../../hooks/useEmployees";
|
|||||||
import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
|
import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
|
||||||
import HoverPopup from "../common/HoverPopup";
|
import HoverPopup from "../common/HoverPopup";
|
||||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||||
const {
|
const {
|
||||||
@ -167,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
{/* <select
|
{/* <select
|
||||||
className="form-select"
|
className="form-select form-select-sm"
|
||||||
{...register("projectId")}
|
{...register("projectId")}
|
||||||
>
|
>
|
||||||
<option value="">Select Project</option>
|
<option value="">Select Project</option>
|
||||||
@ -202,36 +200,34 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||||
Expense Category
|
Expense Category
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="expenseCategoryId"
|
id="expenseCategoryId"
|
||||||
control={control}
|
{...register("expenseCategoryId")}
|
||||||
rules={{ required: "Expense Category is required" }}
|
>
|
||||||
render={({ field }) => (
|
<option value="" disabled>
|
||||||
<SelectField
|
Select Category
|
||||||
label="" // Label is already above
|
</option>
|
||||||
placeholder="Select Category"
|
{ExpenseLoading ? (
|
||||||
options={expenseCategories ?? []}
|
<option disabled>Loading...</option>
|
||||||
value={field.value || ""}
|
) : (
|
||||||
onChange={field.onChange}
|
expenseCategories?.map((expense) => (
|
||||||
required
|
<option key={expense.id} value={expense.id}>
|
||||||
isLoading={ExpenseLoading}
|
{expense.name}
|
||||||
className="m-0 form-select-sm w-100"
|
</option>
|
||||||
/>
|
))
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.expenseCategoryId && (
|
{errors.expenseCategoryId && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
{errors.expenseCategoryId.message}
|
{errors.expenseCategoryId.message}
|
||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Title and Is Variable */}
|
{/* Title and Is Variable */}
|
||||||
<div className="row my-2 text-start mt-n2">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="title" className="form-label" required>
|
<Label htmlFor="title" className="form-label" required>
|
||||||
Title
|
Title
|
||||||
@ -239,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="title"
|
id="title"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("title")}
|
{...register("title")}
|
||||||
placeholder="Enter title"
|
placeholder="Enter title"
|
||||||
/>
|
/>
|
||||||
@ -248,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6 mt-2">
|
||||||
<div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
|
<div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
|
||||||
<Label htmlFor="isVariable" className="form-label mb-0" required>
|
<Label htmlFor="isVariable" className="form-label mb-0" required>
|
||||||
Payment Type
|
Payment Type
|
||||||
@ -256,15 +252,16 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
title="Payment Type"
|
title="Payment Type"
|
||||||
id="payment_type"
|
id="payment_type"
|
||||||
|
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<div className=" w-50">
|
||||||
|
<p>
|
||||||
Choose whether the payment amount varies or remains fixed
|
Choose whether the payment amount varies or remains fixed
|
||||||
each cycle.
|
each cycle.
|
||||||
<br />
|
<br />
|
||||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||||
<br />
|
<br />
|
||||||
<strong>Fixed:</strong> Amount stays constant.
|
<strong>Fixed:</strong> Amount stays constant.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -277,7 +274,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
defaultValue={defaultRecurringExpense.isVariable ?? false}
|
defaultValue={defaultRecurringExpense.isVariable ?? false}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<div className="d-flex align-items-center gap-3 mt-2">
|
<div className="d-flex align-items-center gap-3 mt-1">
|
||||||
<div className="form-check">
|
<div className="form-check">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
@ -330,7 +327,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={new Date()}
|
minDate={new Date()}
|
||||||
className="w-100"
|
className="w-100"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
{errors.strikeDate && (
|
{errors.strikeDate && (
|
||||||
<small className="danger-text">{errors.strikeDate.message}</small>
|
<small className="danger-text">{errors.strikeDate.message}</small>
|
||||||
@ -344,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -358,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Payee and Currency */}
|
{/* Payee and Currency */}
|
||||||
<div className="row my-2 text-start mt-3">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="payee" className="form-label" required>
|
<Label htmlFor="payee" className="form-label" required>
|
||||||
Payee (Supplier Name/Transporter Name/Other)
|
Payee (Supplier Name/Transporter Name/Other)
|
||||||
@ -371,7 +367,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
}
|
}
|
||||||
error={errors.payee?.message}
|
error={errors.payee?.message}
|
||||||
placeholder="Select or enter payee"
|
placeholder="Select or enter payee"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -379,45 +374,34 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<Label htmlFor="currencyId" className="form-label" required>
|
<Label htmlFor="currencyId" className="form-label" required>
|
||||||
Currency
|
Currency
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
|
id="currencyId"
|
||||||
|
className="form-select form-select-sm"
|
||||||
|
{...register("currencyId")}
|
||||||
|
>
|
||||||
|
<option value="">Select Currency</option>
|
||||||
|
|
||||||
<AppFormController
|
{currencyLoading && <option>Loading...</option>}
|
||||||
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 &&
|
||||||
|
!currencyError &&
|
||||||
|
currencyData?.map((currency) => (
|
||||||
|
<option key={currency.id} value={currency.id}>
|
||||||
|
{`${currency.currencyName} (${currency.symbol})`}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
{errors.currencyId && (
|
{errors.currencyId && (
|
||||||
<small className="danger-text">{errors.currencyId.message}</small>
|
<small className="danger-text">{errors.currencyId.message}</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Frequency To and Status Id */}
|
{/* Frequency To and Status Id */}
|
||||||
<div className="row my-2 text-start mt-n2">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div className="d-flex justify-content-start align-items-center gap-2">
|
<div className="d-flex justify-content-start align-items-center gap-2">
|
||||||
<Label htmlFor="frequency" className="form-label mb-1" required>
|
<Label htmlFor="frequency" className="form-label mb-0" required>
|
||||||
Frequency
|
Frequency
|
||||||
</Label>
|
</Label>
|
||||||
<HoverPopup
|
<HoverPopup
|
||||||
@ -430,69 +414,51 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</p>
|
</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>
|
</HoverPopup>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<AppFormController
|
<select
|
||||||
name="frequency"
|
id="frequency"
|
||||||
control={control}
|
className="form-select form-select-sm mt-1"
|
||||||
rules={{ required: "Frequency is required" }}
|
{...register("frequency", { valueAsNumber: true })}
|
||||||
render={({ field }) => (
|
>
|
||||||
<SelectField
|
<option value="">Select Frequency</option>
|
||||||
label="" // Label shown above
|
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
|
||||||
placeholder="Select Frequency"
|
<option key={key} value={key}>
|
||||||
options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
|
{label}
|
||||||
id: key,
|
</option>
|
||||||
name: label,
|
))}
|
||||||
}))}
|
</select>
|
||||||
value={field.value || ""}
|
|
||||||
onChange={field.onChange}
|
|
||||||
required
|
|
||||||
className="m-0 mt-1"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.frequency && (
|
{errors.frequency && (
|
||||||
<small className="danger-text">{errors.frequency.message}</small>
|
<small className="danger-text">{errors.frequency.message}</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="statusId" className="form-label" required>
|
<Label htmlFor="statusId" className="form-label" required>
|
||||||
Status
|
Status
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
id="statusId"
|
||||||
name="statusId"
|
className="form-select form-select-sm"
|
||||||
control={control}
|
{...register("statusId")}
|
||||||
rules={{ required: "Status is required" }}
|
>
|
||||||
render={({ field }) => (
|
<option value="">Select Status</option>
|
||||||
<SelectField
|
{statusLoading && <option>Loading...</option>}
|
||||||
label="" // Label already shown above
|
{!statusLoading &&
|
||||||
placeholder="Select Status"
|
!statusError &&
|
||||||
options={statusData ?? []}
|
statusData?.map((status) => (
|
||||||
value={field.value || ""}
|
<option key={status.id} value={status.id}>
|
||||||
onChange={field.onChange}
|
{status.name}
|
||||||
required
|
</option>
|
||||||
isLoading={statusLoading}
|
))}
|
||||||
noOptionsMessage={() =>
|
</select>
|
||||||
!statusLoading && !statusError && (!statusData || statusData.length === 0)
|
|
||||||
? "No status found"
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
className="m-0 form-select-sm w-100"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors.statusId && (
|
{errors.statusId && (
|
||||||
<small className="danger-text">{errors.statusId.message}</small>
|
<small className="danger-text">{errors.statusId.message}</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Payment Buffer Days and End Date */}
|
{/* Payment Buffer Days and End Date */}
|
||||||
@ -510,10 +476,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
title="Payment Buffer Days"
|
title="Payment Buffer Days"
|
||||||
id="payment_buffer_days"
|
id="payment_buffer_days"
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<p>
|
||||||
Number of extra days allowed after the due date before
|
Number of extra days allowed after the due date before
|
||||||
payment is considered late.
|
payment is considered late.
|
||||||
</div>
|
</p>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||||
@ -523,7 +489,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="paymentBufferDays"
|
id="paymentBufferDays"
|
||||||
className="form-control mt-1"
|
className="form-control form-control-sm mt-1"
|
||||||
min="0"
|
min="0"
|
||||||
step="1"
|
step="1"
|
||||||
{...register("paymentBufferDays", { valueAsNumber: true })}
|
{...register("paymentBufferDays", { valueAsNumber: true })}
|
||||||
@ -545,11 +511,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
title="End Date"
|
title="End Date"
|
||||||
id="end_date"
|
id="end_date"
|
||||||
|
|
||||||
content={
|
content={
|
||||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
<p>
|
||||||
The date when the last payment in the recurrence occurs.
|
The date when the last payment in the recurrence occurs.
|
||||||
</div>
|
</p>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||||
@ -561,7 +526,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
minDate={StrikeDate}
|
minDate={StrikeDate}
|
||||||
className="w-100 mt-1"
|
className="w-100 mt-1"
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.endDate && (
|
{errors.endDate && (
|
||||||
@ -597,14 +561,14 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
<div className="row my-4 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="description" className="form-label" required>
|
<Label htmlFor="description" className="form-label" required>
|
||||||
Description
|
Description
|
||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
rows="2"
|
rows="2"
|
||||||
></textarea>
|
></textarea>
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useState } from "react";
|
||||||
import {
|
import {
|
||||||
EXPENSE_DRAFT,
|
EXPENSE_DRAFT,
|
||||||
EXPENSE_REJECTEDBY,
|
EXPENSE_REJECTEDBY,
|
||||||
@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
|
|||||||
import Pagination from "../common/Pagination";
|
import Pagination from "../common/Pagination";
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
import { SpinnerLoader } from "../common/Loader";
|
||||||
|
|
||||||
const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
|
const RecurringExpenseList = ({ search, filterStatuses }) => {
|
||||||
const { setManageRequest, setVieRequest, setViewRecurring } =
|
const { setManageRequest, setVieRequest, setViewRecurring } =
|
||||||
useRecurringExpenseContext();
|
useRecurringExpenseContext();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@ -70,7 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
align: "text-end",
|
align: "text-end",
|
||||||
getValue: (e) =>
|
getValue: (e) =>
|
||||||
e?.amount
|
e?.amount
|
||||||
? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
|
? `${
|
||||||
|
e?.currency?.symbol ? e.currency.symbol + " " : ""
|
||||||
}${e.amount.toLocaleString()}`
|
}${e.amount.toLocaleString()}`
|
||||||
: "N/A",
|
: "N/A",
|
||||||
},
|
},
|
||||||
@ -111,17 +112,6 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
debouncedSearch
|
debouncedSearch
|
||||||
);
|
);
|
||||||
|
|
||||||
const filteredData = useMemo(
|
|
||||||
() =>
|
|
||||||
data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
|
|
||||||
[],
|
|
||||||
[data?.data, filterStatuses]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
onDataFiltered(filteredData);
|
|
||||||
}, [filteredData, onDataFiltered]);
|
|
||||||
|
|
||||||
const paginate = (page) => {
|
const paginate = (page) => {
|
||||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||||
setCurrentPage(page);
|
setCurrentPage(page);
|
||||||
@ -160,6 +150,10 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const filteredData = data?.data?.filter((item) =>
|
||||||
|
filterStatuses.includes(item?.status?.id)
|
||||||
|
);
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
const handleDelete = (id) => {
|
||||||
setDeletingId(id);
|
setDeletingId(id);
|
||||||
DeleteExpense(
|
DeleteExpense(
|
||||||
@ -172,6 +166,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
console.log("Tanish",filteredData)
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{IsDeleteModalOpen && (
|
{IsDeleteModalOpen && (
|
||||||
@ -186,7 +181,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
|
<div className="card page-min-h table-responsive px-sm-4">
|
||||||
<div className="card-datatable" id="payment-request-table">
|
<div className="card-datatable" id="payment-request-table">
|
||||||
<div className="mx-2">
|
<div className="mx-2">
|
||||||
{Array.isArray(filteredData) && filteredData.length > 0 && (
|
{Array.isArray(filteredData) && filteredData.length > 0 && (
|
||||||
@ -198,7 +193,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
{col.label}
|
{col.label}
|
||||||
</th>
|
</th>
|
||||||
))}
|
))}
|
||||||
<th className="text-end">Action</th>
|
<th className="text-center">Action</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
@ -220,8 +215,8 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
: col?.getValue(recurringExpense)}
|
: col?.getValue(recurringExpense)}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
<td className="sticky-action-column bg-white text-end">
|
<td className="sticky-action-column bg-white">
|
||||||
<div className="d-flex justify-content-end flex-row gap-2 gap-0">
|
<div className="d-flex flex-row gap-2 gap-0">
|
||||||
<i
|
<i
|
||||||
className="bx bx-show text-primary cursor-pointer"
|
className="bx bx-show text-primary cursor-pointer"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
@ -287,7 +282,7 @@ const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered
|
|||||||
filteredData.length === 0
|
filteredData.length === 0
|
||||||
&& (
|
&& (
|
||||||
<div className="d-flex justify-content-center align-items-center h-64">
|
<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>
|
||||||
)}
|
)}
|
||||||
</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
|
<td
|
||||||
key={col.key}
|
key={col.key}
|
||||||
className={col.className}
|
className={col.className}
|
||||||
|
// onClick={() =>
|
||||||
|
// setSelectedJob({ showCanvas: true, job: row?.id })
|
||||||
|
// }
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (!isArchive) {
|
if (!isArchive) {
|
||||||
setSelectedJob({ showCanvas: true, job: row?.id });
|
setSelectedJob({ showCanvas: true, job: e?.id });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
|
||||||
|
|||||||
@ -62,27 +62,15 @@ const Jobs = () => {
|
|||||||
<div className="card page-min-h my-2 px-7 pb-4">
|
<div className="card page-min-h my-2 px-7 pb-4">
|
||||||
<div className="row align-items-center py-4">
|
<div className="row align-items-center py-4">
|
||||||
|
|
||||||
{/* LEFT — Archive / Unarchive Toggle */}
|
{/* LEFT — Tabs */}
|
||||||
<div className="col-12 col-md-6 text-start">
|
<div className="col-12 col-md-6 text-start">
|
||||||
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
|
className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
|
||||||
}`}
|
onClick={() => setShowArchive(!showArchive)}
|
||||||
onClick={() => setShowArchive(false)}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-archive-out me-1"></i> Active Jobs
|
<i className="bx bx-archive bx-sm me-1 mt-1"></i> Archived
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => setShowArchive(true)}
|
|
||||||
>
|
|
||||||
<i className="bx bx-archive me-1"></i> Archived
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* RIGHT — New Job button */}
|
{/* RIGHT — New Job button */}
|
||||||
@ -91,10 +79,9 @@ const Jobs = () => {
|
|||||||
className="btn btn-sm btn-primary"
|
className="btn btn-sm btn-primary"
|
||||||
onClick={() => setManageJob({ isOpen: true, jobId: null })}
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Job List */}
|
{/* Job List */}
|
||||||
|
|||||||
@ -23,8 +23,6 @@ import {
|
|||||||
useServiceProject,
|
useServiceProject,
|
||||||
useUpdateServiceProject,
|
useUpdateServiceProject,
|
||||||
} from "../../hooks/useServiceProject";
|
} from "../../hooks/useServiceProject";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||||
const {
|
const {
|
||||||
@ -119,54 +117,51 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row text-start">
|
<div className="row text-start">
|
||||||
<div className="col-12 mb-2">
|
<div className="col-12 mb-2">
|
||||||
<Label htmlFor="clientId" required>
|
<Label htmlFor="name" required>
|
||||||
Client
|
Client
|
||||||
</Label>
|
</Label>
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
<div className="d-flex align-items-center gap-2 w-100">
|
<select
|
||||||
<div className="flex-grow-1" style={{ minWidth: "250px" }}>
|
className="select2 form-select form-select-sm flex-grow-1"
|
||||||
<AppFormController
|
aria-label="Default select example"
|
||||||
name="clientId"
|
{...register("clientId", {
|
||||||
control={control}
|
required: "Client is required",
|
||||||
rules={{ required: "Client is required" }}
|
valueAsNumber: false,
|
||||||
render={({ field }) => (
|
})}
|
||||||
<SelectField
|
>
|
||||||
label=""
|
{isLoading ? (
|
||||||
options={organization?.data ?? []}
|
<option>Loading...</option>
|
||||||
placeholder="Select Client"
|
) : (
|
||||||
required
|
<>
|
||||||
labelKey="name"
|
<option value="">Select Client</option>
|
||||||
valueKeyKey="id"
|
{organization?.data?.map((org) => (
|
||||||
value={field.value}
|
<option key={org.id} value={org.id}>
|
||||||
onChange={field.onChange}
|
{org.name}
|
||||||
isLoading={isLoading}
|
</option>
|
||||||
className="m-0 w-100"
|
))}
|
||||||
/>
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
</div>
|
|
||||||
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
|
className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onClose();
|
onClose();
|
||||||
openOrgModal({ startStep: 2 });
|
openOrgModal({ startStep: 2 }); // Step 4 = ManagOrg
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{errors?.clientId && (
|
{errors?.clientId && (
|
||||||
<small className="danger-text">{errors.clientId.message}</small>
|
<span className="danger-text">{errors.clientId.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 mb-4">
|
<div className="col-12 mb-2">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Project Name
|
Project Name
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("name")}
|
{...register("name")}
|
||||||
placeholder="Enter Project Name.."
|
placeholder="Enter Project Name.."
|
||||||
/>
|
/>
|
||||||
@ -180,7 +175,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("shortName")}
|
{...register("shortName")}
|
||||||
placeholder="Enter Project Short Name.."
|
placeholder="Enter Project Short Name.."
|
||||||
/>
|
/>
|
||||||
@ -188,38 +183,24 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
<span className="danger-text">{errors.shortName.message}</span>
|
<span className="danger-text">{errors.shortName.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="statusId" required>
|
<Label htmlFor="name" required>
|
||||||
Select Status
|
Select Status
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm"
|
||||||
name="statusId"
|
{...register("statusId")}
|
||||||
control={control}
|
>
|
||||||
render={({ field }) => (
|
<option>Select Service</option>
|
||||||
<SelectField
|
{PROJECT_STATUS?.map((status) => (
|
||||||
label="" // label already above
|
<option key={status.id} value={status.id}>{status.label}</option>
|
||||||
options={PROJECT_STATUS?.map((status) => ({
|
))}
|
||||||
id: status.id,
|
</select>
|
||||||
name: status.label,
|
|
||||||
}))}
|
|
||||||
placeholder="Select Status"
|
|
||||||
required
|
|
||||||
labelKey="name"
|
|
||||||
valueKey="id"
|
|
||||||
value={field.value}
|
|
||||||
onChange={field.onChange}
|
|
||||||
className="form-select w-100"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{errors?.statusId && (
|
{errors?.statusId && (
|
||||||
<span className="danger-text">{errors.statusId.message}</span>
|
<span className="danger-text">{errors.statusId.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 mb-2">
|
||||||
<div className="col-12 mb-4">
|
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
options={data?.data}
|
options={data?.data}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
@ -233,15 +214,18 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-4">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Contact Person
|
Contact Person
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("contactName")}
|
{...register("contactName")}
|
||||||
placeholder="Enter Employee name.."
|
placeholder="Enter Employee name.."
|
||||||
|
onInput={(e) => {
|
||||||
|
e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{errors?.contactName && (
|
{errors?.contactName && (
|
||||||
<span className="danger-text">{errors.contactName.message}</span>
|
<span className="danger-text">{errors.contactName.message}</span>
|
||||||
@ -253,7 +237,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("contactEmail")}
|
{...register("contactEmail")}
|
||||||
placeholder="Enter Employee Email.."
|
placeholder="Enter Employee Email.."
|
||||||
/>
|
/>
|
||||||
@ -261,14 +245,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
<span className="danger-text">{errors.contactEmail.message}</span>
|
<span className="danger-text">{errors.contactEmail.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 mb-4">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Contact Number
|
Contact Number
|
||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
maxLength={10}
|
maxLength={10}
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("contactPhone")}
|
{...register("contactPhone")}
|
||||||
placeholder="Enter Employee Contact.."
|
placeholder="Enter Employee Contact.."
|
||||||
onInput={(e) => {
|
onInput={(e) => {
|
||||||
@ -287,7 +271,6 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
name="assignedDate"
|
name="assignedDate"
|
||||||
className="w-100"
|
className="w-100"
|
||||||
control={control}
|
control={control}
|
||||||
size="md"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12 mb-2">
|
<div className="col-12 col-md-12 mb-2">
|
||||||
@ -317,7 +300,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-end gap-2 mt-4">
|
<div className="d-flex justify-content-end gap-4">
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-outline-secondary"
|
className="btn btn-sm btn-outline-secondary"
|
||||||
disabled={isPending || isUpdating}
|
disabled={isPending || isUpdating}
|
||||||
|
|||||||
@ -8,7 +8,6 @@ import { useParams } from "react-router-dom";
|
|||||||
import Pagination from "../../common/Pagination";
|
import Pagination from "../../common/Pagination";
|
||||||
import ConfirmModal from "../../common/ConfirmModal";
|
import ConfirmModal from "../../common/ConfirmModal";
|
||||||
import { SpinnerLoader } from "../../common/Loader";
|
import { SpinnerLoader } from "../../common/Loader";
|
||||||
import ViewBranchDetails from "./ViewBranchDetails";
|
|
||||||
|
|
||||||
const ServiceBranch = () => {
|
const ServiceBranch = () => {
|
||||||
const { projectId } = useParams();
|
const { projectId } = useParams();
|
||||||
@ -20,7 +19,6 @@ const ServiceBranch = () => {
|
|||||||
});
|
});
|
||||||
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
const { mutate: DeleteBranch, isPending } = useDeleteBranch();
|
||||||
const [deletingId, setDeletingId] = useState(null);
|
const [deletingId, setDeletingId] = useState(null);
|
||||||
const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
|
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
@ -86,7 +84,7 @@ const ServiceBranch = () => {
|
|||||||
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
<div className="col-md-4 col-sm-12 ms-n3 text-start ">
|
||||||
<h5 className="mb-0">
|
<h5 className="mb-0">
|
||||||
<i className="bx bx-buildings text-primary"></i>
|
<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>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -173,31 +171,13 @@ const ServiceBranch = () => {
|
|||||||
!isError &&
|
!isError &&
|
||||||
data?.data?.length > 0 &&
|
data?.data?.length > 0 &&
|
||||||
data.data.map((branch) => (
|
data.data.map((branch) => (
|
||||||
<tr
|
<tr key={branch.id} style={{ height: "35px" }}>
|
||||||
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 });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
|
|
||||||
{columns.map((col) => (
|
{columns.map((col) => (
|
||||||
<td key={col.key} className={`${col.align} py-3`}>
|
<td key={col.key} className={`${col.align} py-3`}>
|
||||||
{col.getValue(branch)}
|
{col.getValue(branch)}
|
||||||
</td>
|
</td>
|
||||||
))}
|
))}
|
||||||
<td className="text-center">
|
<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">
|
<div className="dropdown z-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -233,16 +213,6 @@ const ServiceBranch = () => {
|
|||||||
Delete
|
Delete
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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
|
<li
|
||||||
@ -259,7 +229,6 @@ const ServiceBranch = () => {
|
|||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
@ -268,17 +237,14 @@ const ServiceBranch = () => {
|
|||||||
!isError &&
|
!isError &&
|
||||||
(!data?.data || data.data.length === 0) && (
|
(!data?.data || data.data.length === 0) && (
|
||||||
<tr>
|
<tr>
|
||||||
<td colSpan={columns.length + 1}>
|
<td
|
||||||
<div
|
colSpan={columns.length + 1}
|
||||||
className="d-flex justify-content-center align-items-center"
|
className="text-center py-12"
|
||||||
style={{ height: "150px" }}
|
|
||||||
>
|
>
|
||||||
No Branch Found
|
No Branch Found
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
@ -308,17 +274,6 @@ const ServiceBranch = () => {
|
|||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
{ViewRequest.view && (
|
|
||||||
<GlobalModel
|
|
||||||
isOpen
|
|
||||||
size="md"
|
|
||||||
modalType="top"
|
|
||||||
closeModal={() => setViewRequest({ branchId: null, view: false })}
|
|
||||||
>
|
|
||||||
<ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
|
|
||||||
</GlobalModel>
|
|
||||||
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -1,142 +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);
|
|
||||||
|
|
||||||
console.log("branch details:", data);
|
|
||||||
|
|
||||||
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="fw-semibold 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">Numbers:</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 ?? []}
|
options={data ?? []}
|
||||||
placeholder="Choose a Status"
|
placeholder="Choose a Status"
|
||||||
required
|
required
|
||||||
labelKey="name"
|
labelKeyKey="name"
|
||||||
valueKeyKey="id"
|
valueKeyKey="id"
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
|
|||||||
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
|
|||||||
type="submit"
|
type="submit"
|
||||||
disabled={!watch("comment")?.trim() || isPending}
|
disabled={!watch("comment")?.trim() || isPending}
|
||||||
>
|
>
|
||||||
Submit
|
Send
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -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 }) => {
|
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 (
|
return (
|
||||||
<div className="card shadow-none p-0">
|
<div className="card shadow-none p-0">
|
||||||
<div className="card-body p-3">
|
<div className="card-body p-0">
|
||||||
<Timeline items={timelineData} transparent={true} />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -140,7 +140,6 @@ const ManageJob = ({ Job }) => {
|
|||||||
formData.projectId = projectId;
|
formData.projectId = projectId;
|
||||||
|
|
||||||
CreateJob(formData);
|
CreateJob(formData);
|
||||||
setManageJob({ isOpen: false, jobId: null });
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -173,20 +172,6 @@ const ManageJob = ({ Job }) => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<AppFormProvider {...methods}>
|
<AppFormProvider {...methods}>
|
||||||
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
|
<form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="col-12 col-md-12">
|
|
||||||
<SelectFieldSearch
|
|
||||||
label="Select Branch"
|
|
||||||
placeholder="Select Branch"
|
|
||||||
value={watch("projectBranchId")}
|
|
||||||
onChange={(val) => setValue("projectBranchId", val)}
|
|
||||||
valueKey="id"
|
|
||||||
labelKey="branchName"
|
|
||||||
hookParams={[projectId, true, 10, 1]}
|
|
||||||
useFetchHook={useBranches}
|
|
||||||
isMultiple={false}
|
|
||||||
disabled={Job}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 col-md-12 mb-2 ">
|
<div className="col-12 col-md-12 mb-2 ">
|
||||||
<Label required>Title</Label>
|
<Label required>Title</Label>
|
||||||
<input
|
<input
|
||||||
@ -236,8 +221,8 @@ const ManageJob = ({ Job }) => {
|
|||||||
options={data ?? []}
|
options={data ?? []}
|
||||||
placeholder="Choose a Status"
|
placeholder="Choose a Status"
|
||||||
required
|
required
|
||||||
labelKey="name"
|
labelKeyKey="name"
|
||||||
valueKey="id"
|
valueKeyKey="id"
|
||||||
value={field.value}
|
value={field.value}
|
||||||
onChange={field.onChange}
|
onChange={field.onChange}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
@ -259,7 +244,20 @@ const ManageJob = ({ Job }) => {
|
|||||||
placeholder="Enter Tag"
|
placeholder="Enter Tag"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-12 col-md-6 mb-2 mb-md-4">
|
||||||
|
<SelectFieldSearch
|
||||||
|
label="Select Branch"
|
||||||
|
placeholder="Select Branch"
|
||||||
|
value={watch("projectBranchId")}
|
||||||
|
onChange={(val) => setValue("projectBranchId", val)}
|
||||||
|
valueKey="id"
|
||||||
|
labelKey="branchName"
|
||||||
|
hookParams={[projectId, true, 10, 1]}
|
||||||
|
useFetchHook={useBranches}
|
||||||
|
isMultiple={false}
|
||||||
|
disabled={Job}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<Label required>Description</Label>
|
<Label required>Description</Label>
|
||||||
<textarea
|
<textarea
|
||||||
@ -278,7 +276,7 @@ const ManageJob = ({ Job }) => {
|
|||||||
? "Please wait..."
|
? "Please wait..."
|
||||||
: Job
|
: Job
|
||||||
? "Update"
|
? "Update"
|
||||||
: "Assign"}
|
: "Submit"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@ -23,21 +23,20 @@ const ManageJobTicket = ({ Job }) => {
|
|||||||
);
|
);
|
||||||
const drawerRef = useRef();
|
const drawerRef = useRef();
|
||||||
const tabsData = [
|
const tabsData = [
|
||||||
{
|
|
||||||
id: "history",
|
|
||||||
title: "History",
|
|
||||||
icon: "bx bx-time me-2",
|
|
||||||
active: true,
|
|
||||||
content: <JobStatusLog data={data?.updateLogs} />,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "comment",
|
id: "comment",
|
||||||
title: "Comments",
|
title: "Comments",
|
||||||
icon: "bx bx-comment me-2",
|
icon: "bx bx-comment me-2",
|
||||||
active: false,
|
active: true,
|
||||||
content: <JobComments data={data} />,
|
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 />;
|
if (isLoading) return <JobDetailsSkeleton />;
|
||||||
@ -70,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
|
|||||||
id="STATUS_CHANEG"
|
id="STATUS_CHANEG"
|
||||||
Mode="click"
|
Mode="click"
|
||||||
className=""
|
className=""
|
||||||
align="left"
|
align="right"
|
||||||
content={
|
content={
|
||||||
<ChangeStatus
|
<ChangeStatus
|
||||||
statusId={data?.status?.id}
|
statusId={data?.status?.id}
|
||||||
@ -150,8 +149,7 @@ const ManageJobTicket = ({ Job }) => {
|
|||||||
<HoverPopup
|
<HoverPopup
|
||||||
id="BRANCH_DETAILS"
|
id="BRANCH_DETAILS"
|
||||||
Mode="click"
|
Mode="click"
|
||||||
align="right"
|
align="auto"
|
||||||
minWidth="340px"
|
|
||||||
boundaryRef={drawerRef}
|
boundaryRef={drawerRef}
|
||||||
content={<BranchDetails branch={data?.projectBranch?.id} />}
|
content={<BranchDetails branch={data?.projectBranch?.id} />}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -22,7 +22,8 @@ export const projectSchema = z.object({
|
|||||||
contactName: z
|
contactName: z
|
||||||
.string()
|
.string()
|
||||||
.trim()
|
.trim()
|
||||||
.min(1, "Contact name is required"),
|
.min(1, "Contact name is required")
|
||||||
|
.regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
|
||||||
|
|
||||||
contactPhone: z
|
contactPhone: z
|
||||||
.string()
|
.string()
|
||||||
|
|||||||
@ -66,7 +66,7 @@ const ServiceProjectTeamList = () => {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{data?.length > 0 ? (
|
{data?.length > 0 ? (
|
||||||
data.map((row) => (
|
data.map((row) => (
|
||||||
<tr key={row.id} style={{ height: "50px" }}>
|
<tr key={row.id}>
|
||||||
{servceProjectColmen.map((col) => (
|
{servceProjectColmen.map((col) => (
|
||||||
<td key={col.key} className={col.align}>{col.getValue(row)}</td>
|
<td key={col.key} className={col.align}>{col.getValue(row)}</td>
|
||||||
))}
|
))}
|
||||||
@ -77,7 +77,6 @@ const ServiceProjectTeamList = () => {
|
|||||||
<td
|
<td
|
||||||
colSpan={servceProjectColmen.length}
|
colSpan={servceProjectColmen.length}
|
||||||
className="text-center py-4 border-0"
|
className="text-center py-4 border-0"
|
||||||
style={{ height: "200px" }}
|
|
||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<SpinnerLoader />
|
<SpinnerLoader />
|
||||||
@ -86,7 +85,6 @@ const ServiceProjectTeamList = () => {
|
|||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
|
|||||||
<input
|
<input
|
||||||
id="firstName"
|
id="firstName"
|
||||||
type="text"
|
type="text"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm`}
|
||||||
{...register("firstName")}
|
{...register("firstName")}
|
||||||
/>
|
/>
|
||||||
{errors.firstName && (
|
{errors.firstName && (
|
||||||
@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
|
|||||||
<input
|
<input
|
||||||
id="lastName"
|
id="lastName"
|
||||||
type="text"
|
type="text"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("lastName")}
|
{...register("lastName")}
|
||||||
/>
|
/>
|
||||||
{errors.lastName && (
|
{errors.lastName && (
|
||||||
@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
|
|||||||
<input
|
<input
|
||||||
id="email"
|
id="email"
|
||||||
type="email"
|
type="email"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("email")}
|
{...register("email")}
|
||||||
/>
|
/>
|
||||||
{errors.email && (
|
{errors.email && (
|
||||||
@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
|
|||||||
<input
|
<input
|
||||||
id="contactNumber"
|
id="contactNumber"
|
||||||
type="text"
|
type="text"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("contactNumber")}
|
{...register("contactNumber")}
|
||||||
inputMode="tel"
|
inputMode="tel"
|
||||||
placeholder="+91 9876543210"
|
placeholder="+91 9876543210"
|
||||||
|
|||||||
@ -7,8 +7,6 @@ import { LogoUpload } from './LogoUpload';
|
|||||||
import showToast from '../../services/toastService';
|
import showToast from '../../services/toastService';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { EditTenant } from './TenantSchema';
|
import { EditTenant } from './TenantSchema';
|
||||||
import { AppFormController } from '../../hooks/appHooks/useAppForm';
|
|
||||||
import SelectField from '../common/Forms/SelectField';
|
|
||||||
|
|
||||||
const EditProfile = ({ TenantId, onClose }) => {
|
const EditProfile = ({ TenantId, onClose }) => {
|
||||||
const { data, isLoading, isError, error } = useTenantDetails(TenantId);
|
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 onSubmit = (formData) => {
|
||||||
const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
|
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)}>
|
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<h5>Edit Tenant</h5>
|
<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>
|
<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>}
|
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
|
||||||
</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>
|
<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>}
|
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
|
||||||
</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>
|
<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" />
|
placeholder="+91 9876543210" />
|
||||||
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6 mt-1 text-start">
|
||||||
<Label htmlFor="domainName" >Domain Name</Label>
|
<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>}
|
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6 mt-1 text-start">
|
||||||
<Label htmlFor="taxId" >Tax ID</Label>
|
<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>}
|
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6 mt-1 text-start">
|
||||||
<Label htmlFor="officeNumber" >Office Number</Label>
|
<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>}
|
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6 mt-1 text-start">
|
||||||
<AppFormController
|
<Label htmlFor="industryId" required>Industry</Label>
|
||||||
name="industryId"
|
<select className="form-select form-select-sm" {...register("industryId")}>
|
||||||
control={control}
|
{industryLoading ? <option value="">Loading...</option> :
|
||||||
render={({ field }) => (
|
Industries?.map((indu) => (
|
||||||
<SelectField
|
<option key={indu.id} value={indu.id}>{indu.name}</option>
|
||||||
label="Industry"
|
))
|
||||||
options={Industries ?? []}
|
}
|
||||||
placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
|
</select>
|
||||||
required
|
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-sm-6 mt-1 text-start">
|
||||||
<div className="col-sm-6 text-start">
|
<Label htmlFor="reference">Reference</Label>
|
||||||
<AppFormController
|
<select className="form-select form-select-sm" {...register("reference")}>
|
||||||
name="reference"
|
{reference.map((org) => (
|
||||||
control={control}
|
<option key={org.val} value={org.val}>{org.name}</option>
|
||||||
render={({ field }) => (
|
))}
|
||||||
<SelectField
|
</select>
|
||||||
label="Reference"
|
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
|
||||||
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>
|
</div>
|
||||||
<div className="col-sm-6 text-start">
|
<div className="col-sm-6 text-start">
|
||||||
<AppFormController
|
<Label htmlFor="organizationSize" required>
|
||||||
name="organizationSize"
|
Organization Size
|
||||||
control={control}
|
</Label>
|
||||||
render={({ field }) => (
|
|
||||||
<SelectField
|
<select
|
||||||
label="Organization Size"
|
className="form-select form-select-sm"
|
||||||
placeholder="Select Organization Size"
|
{...register("organizationSize")}
|
||||||
options={orgSize ?? []}
|
>
|
||||||
labelKey="name"
|
{orgSize.map((org) => (
|
||||||
valueKey="val"
|
<option key={org.val} value={org.val}>
|
||||||
value={field.value}
|
{org.name}
|
||||||
onChange={field.onChange}
|
</option>
|
||||||
className="shadow-none border py-1 px-2 small m-0"
|
))}
|
||||||
required
|
</select>
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.organizationSize && (
|
{errors.organizationSize && (
|
||||||
<small className="danger-text">{errors.organizationSize.message}</small>
|
<div className="danger-text">{errors.organizationSize.message}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 mt-1 text-start">
|
||||||
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
<Label htmlFor="billingAddress" required>Billing Address</Label>
|
||||||
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
|
||||||
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-start">
|
<div className="col-12 mt-1 text-start">
|
||||||
<Label htmlFor="description">Description</Label>
|
<Label htmlFor="description">Description</Label>
|
||||||
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
<textarea id="description" className="form-control" {...register("description")} rows={2} />
|
||||||
{errors.description && <div className="danger-text">{errors.description.message}</div>}
|
{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 moment from "moment";
|
||||||
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
|
||||||
import SelectMultiple from "../common/SelectMultiple";
|
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 OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
||||||
const { data, isError, isLoading: industryLoading } = useIndustries();
|
const { data, isError, isLoading: industryLoading } = useIndustries();
|
||||||
@ -56,8 +53,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
// onSubmitTenant(data);
|
// onSubmitTenant(data);
|
||||||
// onNext();
|
// onNext();
|
||||||
const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
|
const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
|
||||||
// CreateTenant(tenantPayload);
|
CreateTenant(tenantPayload);
|
||||||
console.log(tenantPayload)
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -67,11 +63,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
setLogoPreview(logoImage);
|
setLogoPreview(logoImage);
|
||||||
setLogoName("Uploaded Logo");
|
setLogoName("Uploaded Logo");
|
||||||
}
|
}
|
||||||
}, [getValues]);
|
}, [getValues]);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row g-6 text-start">
|
<div className="row g-2 text-start">
|
||||||
<div className="col-sm-6">
|
<div className="col-sm-6">
|
||||||
<Label htmlFor="organizationName" required>
|
<Label htmlFor="organizationName" required>
|
||||||
Organization Name
|
Organization Name
|
||||||
@ -79,7 +75,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
|
|
||||||
<input
|
<input
|
||||||
id="organizationName"
|
id="organizationName"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("organizationName")}
|
{...register("organizationName")}
|
||||||
/>
|
/>
|
||||||
{errors.organizationName && (
|
{errors.organizationName && (
|
||||||
@ -93,7 +89,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
id="officeNumber"
|
id="officeNumber"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("officeNumber")}
|
{...register("officeNumber")}
|
||||||
/>
|
/>
|
||||||
{errors.officeNumber && (
|
{errors.officeNumber && (
|
||||||
@ -107,7 +103,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
id="domainName"
|
id="domainName"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("domainName")}
|
{...register("domainName")}
|
||||||
/>
|
/>
|
||||||
{errors.domainName && (
|
{errors.domainName && (
|
||||||
@ -121,7 +117,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<input
|
<input
|
||||||
id="taxId"
|
id="taxId"
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("taxId")}
|
{...register("taxId")}
|
||||||
/>
|
/>
|
||||||
{errors.taxId && (
|
{errors.taxId && (
|
||||||
@ -135,11 +131,10 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
name="onBoardingDate"
|
name="onBoardingDate"
|
||||||
size="md"
|
|
||||||
control={control}
|
control={control}
|
||||||
placeholder="DD-MM-YYYY"
|
placeholder="DD-MM-YYYY"
|
||||||
maxDate={new Date()}
|
maxDate={new Date()}
|
||||||
className={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
|
className={errors.onBoardingDate ? "is-invalid" : ""}
|
||||||
/>
|
/>
|
||||||
{errors.onBoardingDate && (
|
{errors.onBoardingDate && (
|
||||||
<div className="invalid-feedback">
|
<div className="invalid-feedback">
|
||||||
@ -148,79 +143,73 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mb-2 mb-md-4">
|
<div className="col-sm-6">
|
||||||
<AppFormController
|
<Label htmlFor="organizationSize" required>
|
||||||
name="organizationSize"
|
Organization Size
|
||||||
control={control}
|
</Label>
|
||||||
render={({ field }) => (
|
|
||||||
<SelectField
|
<select
|
||||||
label="Organization Size"
|
id="organizationSize"
|
||||||
placeholder="Select Organization Size"
|
className="form-select shadow-none border py-1 px-2"
|
||||||
options={orgSize ?? []}
|
style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
|
||||||
labelKey="name"
|
{...register("organizationSize", { required: "Organization size is required" })}
|
||||||
valueKey="val"
|
>
|
||||||
value={field.value}
|
{orgSize.map((org) => (
|
||||||
onChange={field.onChange}
|
<option key={org.val} value={org.val}>
|
||||||
className="shadow-none border py-1 px-2 small m-0"
|
{org.name}
|
||||||
required
|
</option>
|
||||||
/>
|
))}
|
||||||
)}
|
</select>
|
||||||
/>
|
|
||||||
{errors.organizationSize && (
|
{errors.organizationSize && (
|
||||||
<small className="danger-text">{errors.organizationSize.message}</small>
|
<div className="danger-text">{errors.organizationSize.message}</div>
|
||||||
)}
|
)}
|
||||||
</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 && (
|
{errors.industryId && (
|
||||||
<div className="danger-text">{errors.industryId.message}</div>
|
<div className="danger-text">{errors.industryId.message}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-sm-6 mb-2 mb-md-4 mt-n3">
|
<div className="col-sm-6">
|
||||||
<AppFormController
|
<Label htmlFor="reference" required>Reference</Label>
|
||||||
name="reference"
|
<select
|
||||||
control={control}
|
id="reference"
|
||||||
render={({ field }) => (
|
className="form-select shadow-none border py-1 px-2 small"
|
||||||
<SelectField
|
{...register("reference")}
|
||||||
label="Reference"
|
>
|
||||||
placeholder="Select Reference"
|
{reference.map((org) => (
|
||||||
options={reference ?? []}
|
<option key={org.val} value={org.val}>
|
||||||
labelKey="name"
|
{org.name}
|
||||||
valueKey="val"
|
</option>
|
||||||
value={field.value}
|
))}
|
||||||
onChange={field.onChange}
|
</select>
|
||||||
className="shadow-none border py-1 px-2 small m-0"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{errors.reference && (
|
{errors.reference && (
|
||||||
<small className="danger-text">{errors.reference.message}</small>
|
<div className="danger-text">{errors.reference.message}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-sm-6">
|
||||||
<div className="col-sm-6 mt-n3">
|
|
||||||
<SelectMultiple
|
<SelectMultiple
|
||||||
name="serviceIds"
|
name="serviceIds"
|
||||||
label="Services"
|
label="Services"
|
||||||
@ -240,7 +229,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
|
|||||||
<textarea
|
<textarea
|
||||||
id="description"
|
id="description"
|
||||||
rows={3}
|
rows={3}
|
||||||
className={`form-control `}
|
className={`form-control form-control-sm `}
|
||||||
{...register("description")}
|
{...register("description")}
|
||||||
/>
|
/>
|
||||||
{errors.description && (
|
{errors.description && (
|
||||||
|
|||||||
@ -43,7 +43,6 @@ const TenantForm = () => {
|
|||||||
const tenantForm = useForm({
|
const tenantForm = useForm({
|
||||||
resolver: zodResolver(newTenantSchema),
|
resolver: zodResolver(newTenantSchema),
|
||||||
defaultValues: tenantDefaultValues,
|
defaultValues: tenantDefaultValues,
|
||||||
mode: "onChange",
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const subscriptionForm = useForm({
|
const subscriptionForm = useForm({
|
||||||
|
|||||||
@ -114,7 +114,8 @@ const TenantsList = ({
|
|||||||
align: "text-center",
|
align: "text-center",
|
||||||
getValue: (t) => (
|
getValue: (t) => (
|
||||||
<span
|
<span
|
||||||
className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
|
className={`badge ${
|
||||||
|
getTenantStatus(t.tenantStatus?.id) || "secondary"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{t.tenantStatus?.name || "Unknown"}
|
{t.tenantStatus?.name || "Unknown"}
|
||||||
@ -150,11 +151,12 @@ const TenantsList = ({
|
|||||||
<tbody>
|
<tbody>
|
||||||
{data?.data.length > 0 ? (
|
{data?.data.length > 0 ? (
|
||||||
data.data.map((tenant) => (
|
data.data.map((tenant) => (
|
||||||
<tr key={tenant.id} style={{ height: "50px" }}>
|
<tr key={tenant.id}>
|
||||||
{TenantColumns.map((col) => (
|
{TenantColumns.map((col) => (
|
||||||
<td
|
<td
|
||||||
key={col.key}
|
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
|
{col.customRender
|
||||||
|
|||||||
@ -12,8 +12,6 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
|
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
|
||||||
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const AddPayment = ({ onClose }) => {
|
const AddPayment = ({ onClose }) => {
|
||||||
const { addPayment } = useCollectionContext();
|
const { addPayment } = useCollectionContext();
|
||||||
@ -62,7 +60,7 @@ const AddPayment = ({ onClose }) => {
|
|||||||
<Label required>TransanctionId</Label>
|
<Label required>TransanctionId</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("transactionId")}
|
{...register("transactionId")}
|
||||||
/>
|
/>
|
||||||
{errors.transactionId && (
|
{errors.transactionId && (
|
||||||
@ -96,29 +94,32 @@ const AddPayment = ({ onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
<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
|
Payment Adjustment Head
|
||||||
</Label>
|
</Label>
|
||||||
|
<select
|
||||||
<AppFormController
|
className="form-select form-select-sm "
|
||||||
name="paymentAdjustmentHeadId"
|
{...register("paymentAdjustmentHeadId")}
|
||||||
control={control}
|
>
|
||||||
rules={{ required: "Payment Adjustment Head is required" }}
|
{isPaymentTypeLoading ? (
|
||||||
render={({ field }) => (
|
<option>Loading..</option>
|
||||||
<SelectField
|
) : (
|
||||||
label="" // Label is already above
|
<>
|
||||||
placeholder="Select Payment Head"
|
<option value="">Select Payment Head</option>
|
||||||
options={paymentTypes?.data
|
{paymentTypes?.data
|
||||||
?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
|
?.sort((a, b) => a.name.localeCompare(b.name))
|
||||||
value={field.value || ""}
|
?.map((type) => (
|
||||||
onChange={field.onChange}
|
<option key={type.id} value={type.id}>
|
||||||
required
|
{type.name}
|
||||||
isLoading={isPaymentTypeLoading}
|
</option>
|
||||||
className="m-0 form-select-sm w-100"
|
))}
|
||||||
/>
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
|
||||||
{errors.paymentAdjustmentHeadId && (
|
{errors.paymentAdjustmentHeadId && (
|
||||||
<small className="danger-text">
|
<small className="danger-text">
|
||||||
{errors.paymentAdjustmentHeadId.message}
|
{errors.paymentAdjustmentHeadId.message}
|
||||||
@ -126,7 +127,6 @@ const AddPayment = ({ onClose }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="amount" className="form-label" required>
|
<Label htmlFor="amount" className="form-label" required>
|
||||||
Amount
|
Amount
|
||||||
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
|
|||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
id="amount"
|
id="amount"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
min="1"
|
min="1"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
inputMode="decimal"
|
inputMode="decimal"
|
||||||
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
|
|||||||
</Label>
|
</Label>
|
||||||
<textarea
|
<textarea
|
||||||
id="comment"
|
id="comment"
|
||||||
className="form-control "
|
className="form-control form-control-sm"
|
||||||
{...register("comment")}
|
{...register("comment")}
|
||||||
/>
|
/>
|
||||||
{errors.comment && (
|
{errors.comment && (
|
||||||
|
|||||||
@ -19,8 +19,6 @@ import { formatDate } from "../../utils/dateUtils";
|
|||||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
|
||||||
import SelectField from "../common/Forms/SelectField";
|
|
||||||
|
|
||||||
const ManageCollection = ({ collectionId, onClose }) => {
|
const ManageCollection = ({ collectionId, onClose }) => {
|
||||||
const { data, isError, isLoading, error } = useCollection(collectionId);
|
const { data, isError, isLoading, error } = useCollection(collectionId);
|
||||||
@ -191,35 +189,38 @@ const ManageCollection = ({ collectionId, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6 mb-2">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label htmlFor="billedToId" required>
|
<Label htmlFor="name" required>
|
||||||
Bill To
|
Bill To
|
||||||
</Label>
|
</Label>
|
||||||
|
<div className="d-flex align-items-center gap-2">
|
||||||
<AppFormController
|
<select
|
||||||
name="billedToId"
|
className="select2 form-select form-select flex-grow-1"
|
||||||
control={control}
|
aria-label="Default select example"
|
||||||
rules={{ required: "Client is required" }}
|
{...register("billedToId", {
|
||||||
render={({ field }) => (
|
required: "Client is required",
|
||||||
<SelectField
|
valueAsNumber: false,
|
||||||
label="" // Label already shown above
|
})}
|
||||||
placeholder="Select Client"
|
>
|
||||||
options={organization?.data ?? []}
|
{isLoading ? (
|
||||||
value={field.value || ""}
|
<option>Loading...</option>
|
||||||
onChange={field.onChange}
|
) : (
|
||||||
required
|
<>
|
||||||
isLoading={isLoading}
|
<option value="">Select Client</option>
|
||||||
className="m-0 flex-grow-1"
|
{organization?.data?.map((org) => (
|
||||||
/>
|
<option key={org.id} value={org.id}>
|
||||||
|
{org.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
</select>
|
||||||
|
</div>
|
||||||
{errors?.billedToId && (
|
{errors?.clientId && (
|
||||||
<span className="danger-text">{errors.billedToId.message}</span>
|
<span className="danger-text">{errors.billedToId.message}</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<div className="col-12 col-md-6 mb-4">
|
|
||||||
<Label required>Title</Label>
|
<Label required>Title</Label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -256,7 +257,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
|
|||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 mb-4">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label required>Invoice Date</Label>
|
<Label required>Invoice Date</Label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
className="w-100"
|
className="w-100"
|
||||||
@ -271,7 +272,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
|
|||||||
</small>
|
</small>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-6 mb-4">
|
<div className="col-12 col-md-6 mb-2">
|
||||||
<Label required>Expected Payment Date</Label>
|
<Label required>Expected Payment Date</Label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
className="w-100"
|
className="w-100"
|
||||||
@ -359,7 +360,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 my-3">
|
<div className="col-12">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
Upload Bill{" "}
|
Upload Bill{" "}
|
||||||
</Label>
|
</Label>
|
||||||
|
|||||||
@ -12,8 +12,6 @@ const SelectField = ({
|
|||||||
labelKey = "name",
|
labelKey = "name",
|
||||||
isLoading = false,
|
isLoading = false,
|
||||||
}) => {
|
}) => {
|
||||||
const [position, setPosition] = useState("bottom");
|
|
||||||
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
||||||
@ -36,26 +34,10 @@ const SelectField = ({
|
|||||||
setOpen(false);
|
setOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleDropdown = () => {
|
const toggleDropdown = () => setOpen((prev) => !prev);
|
||||||
if (!open) {
|
|
||||||
const rect = dropdownRef.current?.getBoundingClientRect();
|
|
||||||
const viewportHeight = window.innerHeight;
|
|
||||||
|
|
||||||
const spaceBelow = viewportHeight - rect.bottom;
|
|
||||||
const dropdownHeight = 200;
|
|
||||||
|
|
||||||
if (spaceBelow < dropdownHeight) {
|
|
||||||
setPosition("top"); // open upward
|
|
||||||
} else {
|
|
||||||
setPosition("bottom"); // open downward
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setOpen((prev) => !prev);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="position-relative mb-3" ref={dropdownRef}>
|
<div className="mb-3 position-relative" ref={dropdownRef}>
|
||||||
{label && (
|
{label && (
|
||||||
<Label className="form-label" required={required}>
|
<Label className="form-label" required={required}>
|
||||||
{label}
|
{label}
|
||||||
@ -78,35 +60,23 @@ const SelectField = ({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{open && !isLoading && (
|
{open && !isLoading && (
|
||||||
<div
|
<ul
|
||||||
className="w-full px-1 shadow-md rounded p-1"
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: position === "bottom" ? "100%" : "auto",
|
top: "100%",
|
||||||
bottom: position === "top" ? "100%" : "auto",
|
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 1050,
|
zIndex: 1050,
|
||||||
|
marginTop: "4px",
|
||||||
marginTop: position === "bottom" ? "2px" : "0",
|
borderRadius: "0.375rem",
|
||||||
marginBottom: position === "top" ? "2px" : "0",
|
overflow: "hidden",
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
<ul
|
|
||||||
className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
|
|
||||||
style={{
|
|
||||||
position: "static",
|
|
||||||
|
|
||||||
maxHeight: "220px",
|
|
||||||
overflowY: "auto",
|
|
||||||
overflowX: "hidden",
|
|
||||||
}}
|
|
||||||
id="vertical-example"
|
|
||||||
>
|
>
|
||||||
{options.map((option, i) => (
|
{options.map((option, i) => (
|
||||||
<li key={i}>
|
<li key={i}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`dropdown-item rounded text-truncate ${
|
className={`dropdown-item ${
|
||||||
option[valueKey] === value ? "active" : ""
|
option[valueKey] === value ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => handleSelect(option)}
|
onClick={() => handleSelect(option)}
|
||||||
@ -116,7 +86,6 @@ const SelectField = ({
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -200,9 +200,7 @@ export const SelectProjectField = ({
|
|||||||
isFullObject = false,
|
isFullObject = false,
|
||||||
isMultiple = false,
|
isMultiple = false,
|
||||||
isAllProject = false,
|
isAllProject = false,
|
||||||
disabled,
|
disabled
|
||||||
className,
|
|
||||||
errors,
|
|
||||||
}) => {
|
}) => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const debounce = useDebounce(searchText, 300);
|
const debounce = useDebounce(searchText, 300);
|
||||||
@ -305,10 +303,7 @@ export const SelectProjectField = ({
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{errors?.projectId && (
|
{/* DROPDOWN */}
|
||||||
<div className="danger-text">{errors.projectId.message}</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
|
||||||
@ -331,7 +326,6 @@ export const SelectProjectField = ({
|
|||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
|
|
||||||
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<li className="dropdown-item text-muted text-center">Loading...</li>
|
<li className="dropdown-item text-muted text-center">Loading...</li>
|
||||||
@ -364,7 +358,6 @@ export const SelectProjectField = ({
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -373,7 +366,7 @@ export const SelectProjectField = ({
|
|||||||
|
|
||||||
export const SelectFieldSearch = ({
|
export const SelectFieldSearch = ({
|
||||||
label = "Select",
|
label = "Select",
|
||||||
placeholder = "Select",
|
placeholder = "Select ",
|
||||||
required = false,
|
required = false,
|
||||||
value = null,
|
value = null,
|
||||||
onChange,
|
onChange,
|
||||||
@ -384,7 +377,6 @@ export const SelectFieldSearch = ({
|
|||||||
isMultiple = false,
|
isMultiple = false,
|
||||||
hookParams,
|
hookParams,
|
||||||
useFetchHook,
|
useFetchHook,
|
||||||
errors = null,
|
|
||||||
}) => {
|
}) => {
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const debounce = useDebounce(searchText, 300);
|
const debounce = useDebounce(searchText, 300);
|
||||||
@ -394,76 +386,108 @@ export const SelectFieldSearch = ({
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const dropdownRef = useRef(null);
|
const dropdownRef = useRef(null);
|
||||||
|
|
||||||
const getDisplayName = (entity) =>
|
const getDisplayName = (entity) => {
|
||||||
entity ? `${entity[labelKey] || ""}`.trim() : "";
|
if (!entity) return "";
|
||||||
|
return `${entity[labelKey] || ""}`.trim();
|
||||||
|
};
|
||||||
|
|
||||||
/** ----------------------------- SELECTED OPTION ----------------------------- */
|
/** -----------------------------
|
||||||
|
* SELECTED OPTION (SINGLE)
|
||||||
|
* ----------------------------- */
|
||||||
let selectedSingle = null;
|
let selectedSingle = null;
|
||||||
|
|
||||||
if (!isMultiple) {
|
if (!isMultiple) {
|
||||||
if (isFullObject && value) selectedSingle = value;
|
if (isFullObject && value) selectedSingle = value;
|
||||||
else if (!isFullObject && value)
|
else if (!isFullObject && value)
|
||||||
selectedSingle = options.find((o) => o[valueKey] === value);
|
selectedSingle = options.find((o) => o[valueKey] === value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** -----------------------------
|
||||||
|
* SELECTED OPTION (MULTIPLE)
|
||||||
|
* ----------------------------- */
|
||||||
let selectedList = [];
|
let selectedList = [];
|
||||||
if (isMultiple && Array.isArray(value)) {
|
if (isMultiple && Array.isArray(value)) {
|
||||||
selectedList = isFullObject
|
if (isFullObject) selectedList = value;
|
||||||
? value
|
else {
|
||||||
: options.filter((opt) => value.includes(opt[valueKey]));
|
selectedList = options.filter((opt) => value.includes(opt[valueKey]));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Main button label */
|
||||||
const displayText = !isMultiple
|
const displayText = !isMultiple
|
||||||
? getDisplayName(selectedSingle) || placeholder
|
? getDisplayName(selectedSingle) || placeholder
|
||||||
: selectedList.length
|
: selectedList.length > 0
|
||||||
? selectedList.map((e) => getDisplayName(e)).join(", ")
|
? selectedList.map((e) => getDisplayName(e)).join(", ")
|
||||||
: placeholder;
|
: placeholder;
|
||||||
|
|
||||||
/** ----------------------------- OUTSIDE CLICK ----------------------------- */
|
/** -----------------------------
|
||||||
|
* HANDLE OUTSIDE CLICK
|
||||||
|
* ----------------------------- */
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleClickOutside = (e) => {
|
const handleClickOutside = (e) => {
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target))
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.addEventListener("mousedown", handleClickOutside);
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/** ----------------------------- MERGED OPTIONS ----------------------------- */
|
// MERGED OPTIONS TO ENSURE SELECTED VALUE APPEARS EVEN IF NOT IN SEARCH RESULT
|
||||||
const [mergedOptions, setMergedOptions] = useState(options);
|
const [mergedOptions, setMergedOptions] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let finalList = [...options];
|
let finalList = [...options];
|
||||||
|
|
||||||
if (!isMultiple && value && !isFullObject && typeof value === "object") {
|
if (!isMultiple && value && !isFullObject) {
|
||||||
const exists = options.some((o) => o[valueKey] === value[valueKey]);
|
// already selected option inside options?
|
||||||
if (!exists) finalList.unshift(value);
|
const exists = options.some((o) => o[valueKey] === value);
|
||||||
|
|
||||||
|
// if selected item not found, try to get from props (value) as fallback
|
||||||
|
if (!exists && typeof value === "object") {
|
||||||
|
finalList.unshift(value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isMultiple && Array.isArray(value)) {
|
if (isMultiple && Array.isArray(value)) {
|
||||||
value.forEach((val) => {
|
value.forEach((val) => {
|
||||||
const id = isFullObject ? val[valueKey] : val;
|
const id = isFullObject ? val[valueKey] : val;
|
||||||
const exists = options.some((o) => o[valueKey] === id);
|
const exists = options.some((o) => o[valueKey] === id);
|
||||||
if (!exists && typeof val === "object") finalList.unshift(val);
|
|
||||||
|
if (!exists && typeof val === "object") {
|
||||||
|
finalList.unshift(val);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only update if different to avoid infinite loop
|
setMergedOptions(finalList);
|
||||||
const oldKeys = mergedOptions.map((o) => o[valueKey]).join(",");
|
}, [options, value]);
|
||||||
const newKeys = finalList.map((o) => o[valueKey]).join(",");
|
|
||||||
if (oldKeys !== newKeys) setMergedOptions(finalList);
|
|
||||||
}, [options, value, isMultiple, isFullObject, valueKey, mergedOptions]);
|
|
||||||
|
|
||||||
/** ----------------------------- HANDLE SELECT ----------------------------- */
|
/** -----------------------------
|
||||||
|
* HANDLE SELECT
|
||||||
|
* ----------------------------- */
|
||||||
const handleSelect = (option) => {
|
const handleSelect = (option) => {
|
||||||
if (!isMultiple) {
|
if (!isMultiple) {
|
||||||
onChange(isFullObject ? option : option[valueKey]);
|
// SINGLE SELECT
|
||||||
setOpen(false)
|
if (isFullObject) onChange(option);
|
||||||
|
else onChange(option[valueKey]);
|
||||||
} else {
|
} else {
|
||||||
|
// MULTIPLE SELECT
|
||||||
|
let updated = [];
|
||||||
|
|
||||||
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
|
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
|
||||||
const updated = exists
|
|
||||||
? selectedList.filter((e) => e[valueKey] !== option[valueKey])
|
if (exists) {
|
||||||
: [...selectedList, option];
|
// remove
|
||||||
onChange(isFullObject ? updated : updated.map((x) => x[valueKey]));
|
updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
|
||||||
|
} else {
|
||||||
|
// add
|
||||||
|
updated = [...selectedList, option];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isFullObject) onChange(updated);
|
||||||
|
else onChange(updated.map((x) => x[valueKey]));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -475,6 +499,7 @@ export const SelectFieldSearch = ({
|
|||||||
</Label>
|
</Label>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* MAIN BUTTON */}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`select2-icons form-select d-flex align-items-center justify-content-between ${
|
className={`select2-icons form-select d-flex align-items-center justify-content-between ${
|
||||||
@ -488,17 +513,17 @@ export const SelectFieldSearch = ({
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{errors && <div className="danger-text">{errors.message}</div>}
|
{/* DROPDOWN */}
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<ul
|
<ul
|
||||||
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded rounded-top-0 overflow-x-hidden"
|
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "100%",
|
top: "100%",
|
||||||
left: 0,
|
left: 0,
|
||||||
zIndex: 1050,
|
zIndex: 1050,
|
||||||
marginTop: "1px",
|
marginTop: "2px",
|
||||||
|
borderRadius: "0.375rem",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -512,20 +537,19 @@ export const SelectFieldSearch = ({
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
|
|
||||||
{isLoading && (
|
{isLoading && (
|
||||||
<li className="dropdown-item text-muted text-center">
|
<li className="dropdown-item text-muted text-center">Loading...</li>
|
||||||
Loading...
|
|
||||||
</li>
|
|
||||||
)}
|
)}
|
||||||
{!isLoading && mergedOptions.length === 0 && (
|
|
||||||
|
{!isLoading && options.length === 0 && (
|
||||||
<li className="dropdown-item text-muted text-center">
|
<li className="dropdown-item text-muted text-center">
|
||||||
No results found
|
No results found
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isLoading &&
|
{!isLoading &&
|
||||||
mergedOptions.map((option) => {
|
options.map((option) => {
|
||||||
const isActive = isMultiple
|
const isActive = isMultiple
|
||||||
? selectedList.some((x) => x[valueKey] === option[valueKey])
|
? selectedList.some((x) => x[valueKey] === option[valueKey])
|
||||||
: selectedSingle &&
|
: selectedSingle &&
|
||||||
@ -535,9 +559,7 @@ export const SelectFieldSearch = ({
|
|||||||
<li key={option[valueKey]}>
|
<li key={option[valueKey]}>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`dropdown-item rounded ${
|
className={`dropdown-item ${isActive ? "active" : ""}`}
|
||||||
isActive ? "active" : ""
|
|
||||||
}`}
|
|
||||||
onClick={() => handleSelect(option)}
|
onClick={() => handleSelect(option)}
|
||||||
>
|
>
|
||||||
{getDisplayName(option)}
|
{getDisplayName(option)}
|
||||||
@ -545,7 +567,6 @@ export const SelectFieldSearch = ({
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,6 +6,10 @@ import {
|
|||||||
togglePopup,
|
togglePopup,
|
||||||
} from "../../slices/localVariablesSlice";
|
} from "../../slices/localVariablesSlice";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* align: "auto" | "left" | "right"
|
||||||
|
* boundaryRef: optional ref to the drawer/container element to use as boundary
|
||||||
|
*/
|
||||||
const HoverPopup = ({
|
const HoverPopup = ({
|
||||||
id,
|
id,
|
||||||
title,
|
title,
|
||||||
@ -13,9 +17,7 @@ const HoverPopup = ({
|
|||||||
children,
|
children,
|
||||||
className = "",
|
className = "",
|
||||||
Mode = "hover",
|
Mode = "hover",
|
||||||
align = "auto", // <-- dynamic placement
|
align = "auto",
|
||||||
minWidth = "250px",
|
|
||||||
maxWidth = "350px",
|
|
||||||
boundaryRef = null,
|
boundaryRef = null,
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -24,15 +26,20 @@ const HoverPopup = ({
|
|||||||
const triggerRef = useRef(null);
|
const triggerRef = useRef(null);
|
||||||
const popupRef = useRef(null);
|
const popupRef = useRef(null);
|
||||||
|
|
||||||
const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
|
const handleMouseEnter = () => {
|
||||||
const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
|
if (Mode === "hover") dispatch(openPopup(id));
|
||||||
|
};
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
if (Mode === "hover") dispatch(closePopup(id));
|
||||||
|
};
|
||||||
const handleClick = (e) => {
|
const handleClick = (e) => {
|
||||||
if (Mode !== "click") return;
|
if (Mode === "click") {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
dispatch(togglePopup(id));
|
dispatch(togglePopup(id));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Close popup when clicking outside (click mode)
|
// Close on outside click when using click mode
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (Mode !== "click" || !visible) return;
|
if (Mode !== "click" || !visible) return;
|
||||||
|
|
||||||
@ -49,73 +56,119 @@ const HoverPopup = ({
|
|||||||
|
|
||||||
document.addEventListener("click", handler);
|
document.addEventListener("click", handler);
|
||||||
return () => document.removeEventListener("click", handler);
|
return () => document.removeEventListener("click", handler);
|
||||||
}, [visible, Mode, id, dispatch]);
|
}, [Mode, visible, dispatch, id]);
|
||||||
|
|
||||||
// ---------- DYNAMIC POSITIONING LOGIC ----------
|
// Positioning effect: respects align prop and stays inside boundary (drawer)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!visible || !popupRef.current || !triggerRef.current) return;
|
if (!visible || !popupRef.current || !triggerRef.current) return;
|
||||||
|
|
||||||
|
// run in next frame so DOM/layout settles
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
const popup = popupRef.current;
|
const popup = popupRef.current;
|
||||||
const trigger = triggerRef.current;
|
|
||||||
|
|
||||||
|
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
|
||||||
const boundaryEl =
|
const boundaryEl =
|
||||||
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||||
|
if (!boundaryEl) return;
|
||||||
|
|
||||||
const boundaryRect = boundaryEl.getBoundingClientRect();
|
const boundaryRect = boundaryEl.getBoundingClientRect();
|
||||||
const triggerRect = trigger.getBoundingClientRect();
|
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||||
|
|
||||||
|
// reset styles first
|
||||||
|
popup.style.left = "";
|
||||||
|
popup.style.right = "";
|
||||||
|
popup.style.transform = "";
|
||||||
|
popup.style.top = "";
|
||||||
|
|
||||||
const popupRect = popup.getBoundingClientRect();
|
const popupRect = popup.getBoundingClientRect();
|
||||||
|
const parentRect = boundaryRect; // alias
|
||||||
|
|
||||||
let left;
|
// Convert trigger center to parent coordinates
|
||||||
|
const triggerCenterX =
|
||||||
|
triggerRect.left + triggerRect.width / 2 - parentRect.left;
|
||||||
|
|
||||||
// AUTO ALIGN (smart)
|
// preferred left so popup center aligns to trigger center:
|
||||||
if (align === "auto") {
|
const preferredLeft = triggerCenterX - popupRect.width / 2;
|
||||||
const center =
|
|
||||||
triggerRect.left +
|
|
||||||
triggerRect.width / 2 -
|
|
||||||
boundaryRect.left -
|
|
||||||
popupRect.width / 2;
|
|
||||||
|
|
||||||
left = Math.max(
|
// Helpers to set styles in parent's coordinate system:
|
||||||
|
const setLeft = (leftPx) => {
|
||||||
|
popup.style.left = `${leftPx}px`;
|
||||||
|
popup.style.right = "auto";
|
||||||
|
popup.style.transform = "none";
|
||||||
|
};
|
||||||
|
const setRight = (rightPx) => {
|
||||||
|
popup.style.left = "auto";
|
||||||
|
popup.style.right = `${rightPx}px`;
|
||||||
|
popup.style.transform = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
// If user forced align:
|
||||||
|
if (align === "left") {
|
||||||
|
// align popup's left to parent's left (0)
|
||||||
|
setLeft(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (align === "right") {
|
||||||
|
// align popup's right to parent's right (0)
|
||||||
|
setRight(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (align === "center") {
|
||||||
|
popup.style.left = "50%";
|
||||||
|
popup.style.right = "auto";
|
||||||
|
popup.style.transform = "translateX(-50%)";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// align === "auto": try preferred centered position, but flip fully if overflow
|
||||||
|
// clamp preferredLeft to boundaries so it doesn't render partially outside
|
||||||
|
const leftIfCentered = Math.max(
|
||||||
0,
|
0,
|
||||||
Math.min(center, boundaryRect.width - popupRect.width)
|
Math.min(preferredLeft, parentRect.width - popupRect.width)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// if centered fits, use it
|
||||||
|
if (leftIfCentered === preferredLeft) {
|
||||||
|
setLeft(leftIfCentered);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// LEFT ALIGN
|
// if centering would overflow right -> stick popup fully to left (left=0)
|
||||||
else if (align === "left") {
|
if (preferredLeft > parentRect.width - popupRect.width) {
|
||||||
left = triggerRect.left - boundaryRect.left;
|
// place popup so its right aligns to parent's right
|
||||||
if (left + popupRect.width > boundaryRect.width) {
|
// i.e., left = parent width - popup width
|
||||||
left = boundaryRect.width - popupRect.width; // clamp right
|
setLeft(parentRect.width - popupRect.width);
|
||||||
}
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// RIGHT ALIGN
|
// if centering would overflow left -> stick popup fully to left=0
|
||||||
else if (align === "right") {
|
if (preferredLeft < 0) {
|
||||||
left =
|
setLeft(0);
|
||||||
triggerRect.left +
|
return;
|
||||||
triggerRect.width -
|
|
||||||
boundaryRect.left -
|
|
||||||
popupRect.width;
|
|
||||||
|
|
||||||
if (left < 0) left = 0; // clamp left
|
|
||||||
}
|
}
|
||||||
|
|
||||||
popup.style.left = `${left}px`;
|
// fallback center
|
||||||
popup.style.top = `100%`;
|
setLeft(leftIfCentered);
|
||||||
});
|
});
|
||||||
}, [visible, align, boundaryRef]);
|
}, [visible, align, boundaryRef]);
|
||||||
|
|
||||||
// ------------------------------------------------
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
|
|
||||||
<div
|
<div
|
||||||
|
className="d-inline-block position-relative" // <-- ADD THIS !!
|
||||||
|
style={{
|
||||||
|
maxWidth: "calc(700px - 100px)",
|
||||||
|
width: "100%",
|
||||||
|
wordWrap: "break-word",
|
||||||
|
overflow: "visible", // also make sure popup isn't clipped
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="d-inline-block"
|
||||||
ref={triggerRef}
|
ref={triggerRef}
|
||||||
onMouseEnter={handleMouseEnter}
|
onMouseEnter={handleMouseEnter}
|
||||||
onMouseLeave={handleMouseLeave}
|
onMouseLeave={handleMouseLeave}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
style={{ cursor: "pointer", display: "inline-block" }}
|
style={{ cursor: "pointer" }}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
@ -126,18 +179,19 @@ const HoverPopup = ({
|
|||||||
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
||||||
style={{
|
style={{
|
||||||
zIndex: 2000,
|
zIndex: 2000,
|
||||||
minWidth,
|
top: "100%",
|
||||||
maxWidth,
|
width: "max-content",
|
||||||
wordWrap: "break-word",
|
minWidth: "120px",
|
||||||
}}
|
}}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
||||||
{content}
|
<div>{content}</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HoverPopup;
|
export default HoverPopup;
|
||||||
|
|||||||
@ -4,7 +4,6 @@ const InputSuggestions = ({
|
|||||||
organizationList = [],
|
organizationList = [],
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
size = "sm",
|
|
||||||
error,
|
error,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
}) => {
|
}) => {
|
||||||
@ -28,7 +27,7 @@ const InputSuggestions = ({
|
|||||||
return (
|
return (
|
||||||
<div className="mb-3 position-relative">
|
<div className="mb-3 position-relative">
|
||||||
<input
|
<input
|
||||||
className={`form-control form-control-${size}`}
|
className="form-control form-control-sm"
|
||||||
value={value}
|
value={value}
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||||||
@ -51,6 +50,7 @@ const InputSuggestions = ({
|
|||||||
{filteredList.map((org) => (
|
{filteredList.map((org) => (
|
||||||
<li
|
<li
|
||||||
key={org}
|
key={org}
|
||||||
|
className="ropdown-item"
|
||||||
style={{
|
style={{
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
padding: "5px 12px",
|
padding: "5px 12px",
|
||||||
@ -58,7 +58,8 @@ const InputSuggestions = ({
|
|||||||
transition: "background-color 0.2s",
|
transition: "background-color 0.2s",
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => handleSelectSuggestion(org)}
|
onMouseDown={() => handleSelectSuggestion(org)}
|
||||||
className={`dropdown-item ${org === value ? "active" : ""
|
className={`dropdown-item ${
|
||||||
|
org === value ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{org}
|
{org}
|
||||||
|
|||||||
@ -154,7 +154,7 @@ const SelectMultiple = ({
|
|||||||
className="multi-select-dropdown-container"
|
className="multi-select-dropdown-container"
|
||||||
style={{ position: "relative" }}
|
style={{ position: "relative" }}
|
||||||
>
|
>
|
||||||
<label className="form-label mb-0">{label}</label>
|
<label className="form-label mb-1">{label}</label>
|
||||||
<Label className={name} required={required}></Label>
|
<Label className={name} required={required}></Label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -1,111 +0,0 @@
|
|||||||
import { useRef } from "react";
|
|
||||||
import Label from "./Label";
|
|
||||||
import Tooltip from "./Tooltip";
|
|
||||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
|
||||||
|
|
||||||
const SingleFileUploader = ({
|
|
||||||
label = "Upload Document",
|
|
||||||
required = false,
|
|
||||||
value,
|
|
||||||
onChange,
|
|
||||||
onRemove,
|
|
||||||
disabled,
|
|
||||||
error,
|
|
||||||
accept = ".pdf,.jpg,.jpeg,.png",
|
|
||||||
maxSizeMB = 25,
|
|
||||||
hint = "(PDF, JPG, PNG, max 5MB)",
|
|
||||||
}) => {
|
|
||||||
const inputRef = useRef(null);
|
|
||||||
|
|
||||||
const handleFileSelect = async (e) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
// Validate size
|
|
||||||
if (file.size > maxSizeMB * 1024 * 1024) {
|
|
||||||
alert(`File size cannot exceed ${maxSizeMB}MB`);
|
|
||||||
e.target.value = "";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Convert to base64
|
|
||||||
const base64Data = await new Promise((resolve, reject) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
|
||||||
reader.onerror = (err) => reject(err);
|
|
||||||
});
|
|
||||||
|
|
||||||
const attachmentObj = {
|
|
||||||
fileName: file.name,
|
|
||||||
base64Data,
|
|
||||||
invoiceAttachmentTypeId: "", // set dynamically if needed
|
|
||||||
contentType: file.type,
|
|
||||||
fileSize: file.size,
|
|
||||||
description: "",
|
|
||||||
isActive: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
onChange(attachmentObj);
|
|
||||||
e.target.value = "";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="col-md-12">
|
|
||||||
<Label className="form-label" required={required}>
|
|
||||||
{label}
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
|
||||||
style={{ cursor: "pointer" }}
|
|
||||||
onClick={() => inputRef.current.click()}
|
|
||||||
>
|
|
||||||
<i className="bx bx-cloud-upload d-block bx-lg"></i>
|
|
||||||
<span className="text-muted d-block">
|
|
||||||
Click to select or click here to browse
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">{hint}</small>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={inputRef}
|
|
||||||
accept={accept}
|
|
||||||
style={{ display: "none" }}
|
|
||||||
onChange={handleFileSelect}
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{error && <small className="danger-text">{error}</small>}
|
|
||||||
|
|
||||||
{value && (
|
|
||||||
<div className="mt-3">
|
|
||||||
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-2">
|
|
||||||
<div className="d-flex align-items-center gap-2">
|
|
||||||
<i
|
|
||||||
className={`bx ${getIconByFileType(value.contentType)} fs-3`}
|
|
||||||
></i>
|
|
||||||
|
|
||||||
<div className="d-flex flex-column text-truncate">
|
|
||||||
<span className="fw-semibold small text-truncate">
|
|
||||||
{value.fileName}
|
|
||||||
</span>
|
|
||||||
<small className="text-muted">
|
|
||||||
{value.fileSize ? formatFileSize(value.fileSize) : ""}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<i
|
|
||||||
className="bx bx-trash text-danger fs-5 cursor-pointer"
|
|
||||||
onClick={onRemove}
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SingleFileUploader;
|
|
||||||
@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Label from "./Label";
|
import Label from "./Label";
|
||||||
|
|
||||||
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
|
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
|
||||||
const { setValue, watch } = useFormContext();
|
const { setValue, watch } = useFormContext();
|
||||||
const tags = watch(name) || [];
|
const tags = watch(name) || [];
|
||||||
const [input, setInput] = useState("");
|
const [input, setInput] = useState("");
|
||||||
@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
|
|||||||
</Label>
|
</Label>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`form-control form-control-sm-${size}`}
|
className="form-control form-control-sm p-1"
|
||||||
style={{ minHeight: "33px", position: "relative" }}
|
style={{ minHeight: "33px", position: "relative" }}
|
||||||
>
|
>
|
||||||
<div className="d-flex flex-wrap align-items-center gap-1">
|
<div className="d-flex flex-wrap align-items-center gap-1">
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
import React, { useMemo } from "react";
|
|
||||||
|
|
||||||
const GalleryFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
|
|
||||||
const data = filterData?.data || filterData || {};
|
|
||||||
|
|
||||||
const filterChips = useMemo(() => {
|
|
||||||
const chips = [];
|
|
||||||
|
|
||||||
const addGroup = (ids, list, label, key) => {
|
|
||||||
if (!ids?.length) return;
|
|
||||||
const items = ids.map((id) => ({
|
|
||||||
id,
|
|
||||||
name: list?.find((i) => i.id === id)?.name || id,
|
|
||||||
}));
|
|
||||||
chips.push({ key, label, items });
|
|
||||||
};
|
|
||||||
|
|
||||||
addGroup(filter.buildingIds, data.buildings, "Building", "buildingIds");
|
|
||||||
addGroup(filter.floorIds, data.floors, "Floor", "floorIds");
|
|
||||||
addGroup(filter.workAreaIds, data.workAreas, "Work Area", "workAreaIds");
|
|
||||||
addGroup(filter.activityIds, data.activities, "Activity", "activityIds");
|
|
||||||
addGroup(filter.workCategoryIds, data.workCategories, "Work Category", "workCategoryIds");
|
|
||||||
addGroup(filter.uploadedByIds, data.uploadedBy, "Uploaded By", "uploadedByIds");
|
|
||||||
addGroup(filter.serviceIds, data.services, "Service", "serviceIds");
|
|
||||||
|
|
||||||
return chips;
|
|
||||||
}, [filter, filterData]);
|
|
||||||
|
|
||||||
if (!filterChips.length) return null;
|
|
||||||
return (
|
|
||||||
<div className="d-flex flex-wrap align-items-center gap-2">
|
|
||||||
{filterChips.map((chipGroup) => (
|
|
||||||
<div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
|
|
||||||
<span className="fw-semibold me-2">{chipGroup.label}:</span>
|
|
||||||
{chipGroup.items.map((item) => (
|
|
||||||
<span
|
|
||||||
key={item.id}
|
|
||||||
className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
|
|
||||||
>
|
|
||||||
<span>{item.name}</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn-close btn-close-white btn-sm ms-2"
|
|
||||||
style={{
|
|
||||||
filter: "invert(1) grayscale(1)",
|
|
||||||
opacity: 0.7,
|
|
||||||
fontSize: "0.6rem",
|
|
||||||
}}
|
|
||||||
onClick={() => removeFilterChip(chipGroup.key, item.id)}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GalleryFilterChips;
|
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { useImageGalleryFilter } from "../../hooks/useImageGallery";
|
import { useImageGalleryFilter } from "../../hooks/useImageGallery";
|
||||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||||
import { FormProvider, useForm } from "react-hook-form";
|
import { FormProvider, useForm } from "react-hook-form";
|
||||||
@ -10,52 +10,19 @@ import SelectMultiple from "../common/SelectMultiple";
|
|||||||
import { localToUtc } from "../../utils/appUtils";
|
import { localToUtc } from "../../utils/appUtils";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
|
|
||||||
const GalleryFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter }, ref) => {
|
const GalleryFilterPanel = ({ onApply }) => {
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const [resetKey, setResetKey] = useState(0);
|
const [resetKey, setResetKey] = useState(0);
|
||||||
|
|
||||||
const { data, isLoading, isError, error } =
|
const { data, isLoading, isError, error } =
|
||||||
useImageGalleryFilter(selectedProject);
|
useImageGalleryFilter(selectedProject);
|
||||||
|
|
||||||
|
|
||||||
const dynamicDefaultFilter = useMemo(() => {
|
|
||||||
return {
|
|
||||||
...defaultGalleryFilterValue,
|
|
||||||
buildingIds: defaultGalleryFilterValue.buildingIds || [],
|
|
||||||
floorIds: defaultGalleryFilterValue.floorIds || [],
|
|
||||||
workAreaIds: defaultGalleryFilterValue.workAreaIds || [],
|
|
||||||
activityIds: defaultGalleryFilterValue.activityIds || [],
|
|
||||||
workCategoryIds: defaultGalleryFilterValue.workCategoryIds || [],
|
|
||||||
startDate: defaultGalleryFilterValue.startDate,
|
|
||||||
endDate: defaultGalleryFilterValue.endDate,
|
|
||||||
uploadedByIds: defaultGalleryFilterValue.uploadedByIds || [],
|
|
||||||
serviceIds: defaultGalleryFilterValue.serviceIds || [],
|
|
||||||
};
|
|
||||||
}, [selectedProject]);
|
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
|
||||||
resetFieldValue: (name, value) => {
|
|
||||||
// Reset specific field
|
|
||||||
if (value !== undefined) {
|
|
||||||
setValue(name, value);
|
|
||||||
} else {
|
|
||||||
reset({ ...methods.getValues(), [name]: defaultFilter[name] });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getValues: methods.getValues, // optional, to read current filter state
|
|
||||||
}));
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (data && setFilterdata) {
|
|
||||||
setFilterdata(data);
|
|
||||||
}
|
|
||||||
}, [data, setFilterdata]);
|
|
||||||
const closePanel = () => {
|
const closePanel = () => {
|
||||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||||
};
|
};
|
||||||
const methods = useForm({
|
const methods = useForm({
|
||||||
resolver: zodResolver(gallerySchema),
|
resolver: zodResolver(gallerySchema),
|
||||||
defaultValues: dynamicDefaultFilter,
|
defaultValues: defaultGalleryFilterValue,
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -177,6 +144,6 @@ const GalleryFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter },
|
|||||||
</FormProvider>
|
</FormProvider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
};
|
||||||
|
|
||||||
export default GalleryFilterPanel;
|
export default GalleryFilterPanel;
|
||||||
|
|||||||
@ -8,8 +8,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
|
|||||||
import Pagination from "../common/Pagination";
|
import Pagination from "../common/Pagination";
|
||||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
import { SpinnerLoader } from "../common/Loader";
|
import { SpinnerLoader } from "../common/Loader";
|
||||||
import GalleryFilterChips from "./GalleryFilterChips";
|
const ImageGalleryListView = ({filter}) => {
|
||||||
const ImageGalleryListView = ({ filter, filterData, removeFilterChip, clearFilter }) => {
|
|
||||||
const [hoveredImage, setHoveredImage] = useState(null);
|
const [hoveredImage, setHoveredImage] = useState(null);
|
||||||
const selectedProject = useSelectedProject();
|
const selectedProject = useSelectedProject();
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
@ -41,7 +40,7 @@ const ImageGalleryListView = ({ filter, filterData, removeFilterChip, clearFilte
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
@ -52,25 +51,15 @@ const ImageGalleryListView = ({ filter, filterData, removeFilterChip, clearFilte
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
<div className="col-12 mb-2 mt-2 px-4">
|
|
||||||
<GalleryFilterChips
|
|
||||||
filter={filter}
|
|
||||||
filterData={filterData}
|
|
||||||
removeFilterChip={removeFilterChip}
|
|
||||||
clearFilter={clearFilter}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="activity-section">
|
<div className="activity-section">
|
||||||
{data?.data?.map((batch) => {
|
{data?.data?.map((batch) => {
|
||||||
if (!batch.documents?.length) return null;
|
if (!batch.documents?.length) return null;
|
||||||
|
|
||||||
const doc = batch.documents[0];
|
const doc = batch.documents[0];
|
||||||
const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""
|
const userName = `${doc.uploadedBy?.firstName || ""} ${
|
||||||
|
doc.uploadedBy?.lastName || ""
|
||||||
}`.trim();
|
}`.trim();
|
||||||
const date = formatUTCToLocalTime(doc.uploadedAt);
|
const date = formatUTCToLocalTime(doc.uploadedAt);
|
||||||
// const hasArrows = batch.documents.length > scrollThreshold;
|
// const hasArrows = batch.documents.length > scrollThreshold;
|
||||||
|
|||||||
@ -228,7 +228,7 @@ const CreateRole = ({ modalType, onClose }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{masterFeatures && (
|
{masterFeatures && (
|
||||||
<div className="col-12 text-end mt-5">
|
<div className="col-12 text-end">
|
||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
|
|||||||
@ -90,7 +90,7 @@ const CreateWorkCategory = ({ onClose }) => {
|
|||||||
/>
|
/>
|
||||||
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
{errors.name && <p className="text-danger">{errors.name.message}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 col-md-12 text-start my-3">
|
<div className="col-12 col-md-12 text-start">
|
||||||
<Label className="form-label" htmlFor="description" required>Description</Label>
|
<Label className="form-label" htmlFor="description" required>Description</Label>
|
||||||
<textarea
|
<textarea
|
||||||
rows="3"
|
rows="3"
|
||||||
|
|||||||
@ -241,7 +241,7 @@ const EditMaster = ({ master, onClose }) => {
|
|||||||
data-bs-trigger="focus"
|
data-bs-trigger="focus"
|
||||||
data-bs-placement="right"
|
data-bs-placement="right"
|
||||||
data-bs-html="true"
|
data-bs-html="true"
|
||||||
data-bs-content={`<div className="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
|
||||||
>
|
>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
@ -276,7 +276,7 @@ const EditMaster = ({ master, onClose }) => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="col-12 text-end mt-5">
|
<div className="col-12 text-end mt-3">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="btn btn-sm btn-label-secondary me-3"
|
className="btn btn-sm btn-label-secondary me-3"
|
||||||
|
|||||||
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