Correction in Collection list and AttendancePage.

This commit is contained in:
Kartik Sharma 2025-12-08 11:16:21 +05:30
parent 9a6197a87f
commit 001bdc553c
6 changed files with 91 additions and 90 deletions

View File

@ -142,7 +142,7 @@ const Documents = ({ Document_Entity, Entity }) => {
return ( return (
<DocumentContext.Provider value={contextValues}> <DocumentContext.Provider value={contextValues}>
<div className="mt-2"> <div className="mt-2">
<div className="card page-min-h d-flex p-5"> <div className="card page-min-h table-responsive d-flex p-5">
<DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} /> <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
<div className="row align-items-center"> <div className="row align-items-center">
{/* Search */} {/* Search */}

View File

@ -178,7 +178,7 @@ const DocumentsList = ({
/> />
)} )}
<div className="table-responsive"> <div className="">
<table className="table border-top dataTable text-nowrap"> <table className="table border-top dataTable text-nowrap">
<thead> <thead>
<tr className="shadow-sm"> <tr className="shadow-sm">

View File

@ -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="table-responsive card px-4 mt-3 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"
@ -84,7 +84,7 @@ const EmpAttendance = () => {
</> </>
</div> </div>
</div> </div>
<div className="table-responsive text-nowrap"> <div className="text-nowrap">
{!loading && data.length === 0 && ( {!loading && data.length === 0 && (
<div className="text-center py-5">No employee logs</div> <div className="text-center py-5">No employee logs</div>
)} )}

View File

@ -5,17 +5,17 @@ import Avatar from "../common/Avatar";
import { useDebounce } from "../../utils/appUtils"; import { useDebounce } from "../../utils/appUtils";
import Pagination from "../common/Pagination"; import Pagination from "../common/Pagination";
const OrganizationsList = ({searchText}) => { const OrganizationsList = ({ searchText }) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const searchString = useDebounce(searchText,500) const searchString = useDebounce(searchText, 500)
const { const {
data = [], data = [],
isLoading, isLoading,
isFetching, isFetching,
isError, isError,
error, error,
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString); } = useOrganizationsList(ITEMS_PER_PAGE, 1, true, null, searchString);
const {onClose, startStep, flowType, onOpen,orgData } = useOrganizationModal(); const { onClose, startStep, flowType, onOpen, orgData } = useOrganizationModal();
const organizationsColumns = [ const organizationsColumns = [
{ {
@ -39,21 +39,21 @@ const OrganizationsList = ({searchText}) => {
label: "Contact Person", label: "Contact Person",
getValue: (org) => ( getValue: (org) => (
( (
<div className="d-flex align-items-center ps-1"> <div className="d-flex align-items-center ps-1">
<Avatar <Avatar
size="xs" size="xs"
classAvatar="m-0" classAvatar="m-0"
firstName={(org?.name || "").trim().split(" ")[0] || ""} firstName={(org?.name || "").trim().split(" ")[0] || ""}
lastName={(org?.name || "").trim().split(" ")[1] || ""} lastName={(org?.name || "").trim().split(" ")[1] || ""}
/> />
<span <span
className="text-truncate d-inline-block " className="text-truncate d-inline-block "
style={{ maxWidth: "150px" }} style={{ maxWidth: "150px" }}
> >
{org?.name || "N/A"} {org?.name || "N/A"}
</span> </span>
</div> </div>
) )
), ),
align: "text-start", align: "text-start",
}, },
@ -67,7 +67,7 @@ const OrganizationsList = ({searchText}) => {
key: "email", key: "email",
label: "Email", label: "Email",
getValue: (org) => ( getValue: (org) => (
<span <span
className="text-truncate d-inline-block" className="text-truncate d-inline-block"
style={{ maxWidth: "200px" }} style={{ maxWidth: "200px" }}
> >
@ -84,7 +84,7 @@ const OrganizationsList = ({searchText}) => {
}, },
]; ];
const paginate = (page) => { const paginate = (page) => {
if (page >= 1 && page <= (data?.totalPages ?? 1)) { if (page >= 1 && page <= (data?.totalPages ?? 1)) {
setCurrentPage(page); setCurrentPage(page);
} }
@ -93,73 +93,72 @@ const OrganizationsList = ({searchText}) => {
if (isError) return <div>{error?.message || "Something went wrong"}</div>; if (isError) return <div>{error?.message || "Something went wrong"}</div>;
return ( return (
<div <div
className="card-datatable table-responsive overflow-auto" id="horizontal-example"
id="horizontal-example" >
> <div className="dataTables_wrapper no-footer px-2 ">
<div className="dataTables_wrapper no-footer px-2 "> <table className="table border-top dataTable text-nowrap">
<table className="table border-top dataTable text-nowrap"> <thead>
<thead> <tr className="table_header_border">
<tr className="table_header_border"> {organizationsColumns.map((col) => (
{organizationsColumns.map((col) => ( <th
<th key={col.key}
key={col.key} className="sorting d-table-cell"
className="sorting d-table-cell" aria-sort="descending"
aria-sort="descending" >
> <div className={`${col.align}`}>{col.label}</div>
<div className={`${col.align}`}>{col.label}</div>
</th>
))}
<th className="sticky-action-column bg-white text-center">
Action
</th> </th>
</tr> ))}
</thead> <th className="sticky-action-column bg-white text-center">
<tbody> Action
{data?.data?.length > 0 ? ( </th>
data?.data?.map((org) => ( </tr>
<tr key={org.id}> </thead>
{organizationsColumns.map((col) => ( <tbody>
<td {data?.data?.length > 0 ? (
key={col.key} data?.data?.map((org) => (
style={{ height: "50px" }} <tr key={org.id}>
className={`d-table-cell ${col.align ?? ""}`} {organizationsColumns.map((col) => (
> <td
{col.customRender key={col.key}
? col.customRender(org) style={{ height: "50px" }}
: col.getValue(org)} className={`d-table-cell ${col.align ?? ""}`}
</td> >
))} {col.customRender
<td className="sticky-action-column "> ? col.customRender(org)
<div className="d-flex justify-content-center gap-2"> : col.getValue(org)}
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
<i className="bx bx-trash text-danger cursor-not-allowed"></i>
</div>
</td> </td>
</tr> ))}
)) <td className="sticky-action-column ">
) : ( <div className="d-flex justify-content-center gap-2">
<tr> <i className="bx bx-show text-primary cursor-pointer" onClick={() => onOpen({ startStep: 5, orgData: org.id, flowType: "view" })}></i>
<td <i className="bx bx-edit text-secondary cursor-pointer" onClick={() => onOpen({ startStep: 4, orgData: org, flowType: "edit" })}></i>
colSpan={organizationsColumns.length + 1} <i className="bx bx-trash text-danger cursor-not-allowed"></i>
className="text-center" </div>
>
<p className="fw-semibold">{isLoading ? "Loading....":"Not Found Organization"}</p>
</td> </td>
</tr> </tr>
)} ))
</tbody> ) : (
</table> <tr>
{data?.data?.length > 0 && ( <td
<Pagination colSpan={organizationsColumns.length + 1}
currentPage={currentPage} className="text-center"
totalPages={data.totalPages} >
onPageChange={paginate} <p className="fw-semibold">{isLoading ? "Loading...." : "Not Found Organization"}</p>
/> </td>
</tr>
)} )}
</div> </tbody>
</table>
{data?.data?.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={data.totalPages}
onPageChange={paginate}
/>
)}
</div> </div>
</div>
); );
}; };

View File

@ -202,7 +202,7 @@ const AttendancePage = () => {
</div> </div>
{/* Search + Organization filter */} {/* Search + Organization filter */}
<div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav"> <div className="col-12 col-md-auto mb-2 mt-3 mt-md-0 ms-md-auto nav">
<div className="row g-2"> <div className="row g-2">
<div className="col-12 col-sm-6"> <div className="col-12 col-sm-6">
<select <select

View File

@ -47,8 +47,10 @@ const OrganizationPage = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="card page-min-h px-sm-4"> <div className="card table-responsive page-min-h">
<OrganizationsList searchText={searchText} /> <div className="card-body">
<OrganizationsList searchText={searchText} />
</div>
</div> </div>
</div> </div>
); );