Changes in Dashboard weidget Attendance and Monthly weidget when no data show.
This commit is contained in:
parent
f867a692ed
commit
ef00516256
@ -95,8 +95,12 @@ const AttendanceOverview = () => {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
{view === "chart" ? (
|
||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center ">
|
||||
{!isLoading && (!attendanceData || attendanceData.length === 0) ? (
|
||||
<div
|
||||
className="text-muted fw-semibold d-flex align-items-center justify-content-center"
|
||||
style={{ minHeight: "250px" }}>No data found</div>
|
||||
) : view === "chart" ? (
|
||||
<div className="w-100">
|
||||
<ReactApexChart options={chartOptions} series={chartSeries} type="bar" height={300} />
|
||||
</div>
|
||||
|
||||
@ -45,13 +45,13 @@ const Dashboard = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-6">
|
||||
<div className="row ">
|
||||
{!isAllProjectsSelected && (
|
||||
<div className="col-6">
|
||||
<div className="col-12 col-md-6 mb-sm-0 mb-4 ">
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
)}
|
||||
<div className="col-6">
|
||||
<div className="col-12 col-md-6">
|
||||
<ExpenseByProject />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,9 +65,6 @@ const { labels, series, total } = useMemo(() => {
|
||||
},
|
||||
};
|
||||
|
||||
if (data?.report === 0) {
|
||||
return <div>No data found</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -97,7 +94,7 @@ const { labels, series, total } = useMemo(() => {
|
||||
|
||||
{/* Data display */}
|
||||
{!isLoading && report.length === 0 && (
|
||||
<div className="text-center text-muted py-5">No data found</div>
|
||||
<div className="text-center py-5 text-muted ">No data found</div>
|
||||
)}
|
||||
|
||||
{!isLoading && report.length > 0 && (
|
||||
|
||||
@ -117,11 +117,10 @@ const ExpenseByProject = () => {
|
||||
{["1M", "3M", "6M", "12M", "All"].map((item) => (
|
||||
<button
|
||||
key={item}
|
||||
className={`border-0 px-2 py-1 text-sm rounded ${
|
||||
range === item
|
||||
className={`border-0 px-2 py-1 text-sm rounded ${range === item
|
||||
? "text-white bg-primary"
|
||||
: "text-body bg-transparent"
|
||||
}`}
|
||||
}`}
|
||||
style={{ cursor: "pointer", transition: "all 0.2s ease" }}
|
||||
onClick={() => setRange(item)}
|
||||
>
|
||||
@ -148,15 +147,16 @@ const ExpenseByProject = () => {
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
<div
|
||||
className="card-body bg-white text-dark p-3 rounded"
|
||||
>
|
||||
<div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
|
||||
{isLoading ? (
|
||||
<p>Loading chart...</p>
|
||||
) : !expenseApiData || expenseApiData.length === 0 ? (
|
||||
<div className="text-center text-muted py-5">No data found</div>
|
||||
) : (
|
||||
<Chart options={options} series={series} type="bar" height={235} />
|
||||
<Chart options={options} series={series} type="bar" height={235} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -147,7 +147,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-2">
|
||||
<div className="card page-min-h d-flex p-2">
|
||||
<div className="card page-min-h d-flex p-5">
|
||||
<DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
|
||||
@ -270,7 +270,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
<td colSpan={8} className="text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
{" "}
|
||||
<small className="fs-6 ">
|
||||
<small className="fs-6 py-1">
|
||||
{displayField} :{" "}
|
||||
</small>{" "}
|
||||
<small className="fs-6 ms-3">
|
||||
|
||||
@ -360,7 +360,7 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
|
||||
{/* Right side: Search + Add Employee + Options */}
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-end flex-grow-1">
|
||||
{/* Add Employee Button */}
|
||||
{Manage_Employee && (
|
||||
<button
|
||||
@ -429,269 +429,272 @@ const EmployeeList = () => {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
ref={tableRef}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
className="sorting sorting_desc"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="2"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-6">Name</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Email</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Contact</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Designation</div>
|
||||
</th>
|
||||
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Plan: activate to sort column ascending"
|
||||
>
|
||||
Joining Date
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Billing: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${!Manage_Employee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
aria-label="Actions"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && (
|
||||
<div className="table-responsive text-nowrap">
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
ref={tableRef}
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<p>Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
searchText ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText) ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">{showInactive ? "No In-active Employeee Found" : "No Employeee Found"}</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
<th
|
||||
className="sorting sorting_desc"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="2"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-6">Name</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Email</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Contact</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="User: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Designation</div>
|
||||
</th>
|
||||
|
||||
{/* Render current items */}
|
||||
{currentItems &&
|
||||
!loading &&
|
||||
currentItems.map((item) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() => navigate(`/employee/${item.id}`)}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Plan: activate to sort column ascending"
|
||||
>
|
||||
Joining Date
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Billing: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${!Manage_Employee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
aria-label="Actions"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<p>Loading...</p>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
searchText ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">
|
||||
<small className="muted">
|
||||
'{searchText}' employee not found
|
||||
</small>{" "}
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-truncate text-italic">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-phone-call text-primary me-2"></i>
|
||||
{item.phoneNumber}
|
||||
</span>
|
||||
</td>
|
||||
<td className=" d-none d-sm-table-cell text-start">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-wrench text-success me-2"></i>
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</tr>
|
||||
) : null}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText) ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="border-0">
|
||||
<div className="py-12">{showInactive ? "No In-active Employeee Found" : "No Employeee Found"}</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
|
||||
<td className="d-none d-md-table-cell">
|
||||
{item.joiningDate ? moment(item.joiningDate).format("DD-MMM-YYYY") : "NA"}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{Manage_Employee && (
|
||||
<td className="text-end">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{/* View always visible */}
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="dropdown-item py-1"
|
||||
{/* Render current items */}
|
||||
{currentItems &&
|
||||
!loading &&
|
||||
currentItems.map((item) => (
|
||||
<tr className="odd" key={item.id}>
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name">
|
||||
<Avatar
|
||||
firstName={item.firstName}
|
||||
lastName={item.lastName}
|
||||
></Avatar>
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() => navigate(`/employee/${item.id}`)}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
|
||||
{/* If ACTIVE employee */}
|
||||
{item.isActive && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleEmployeeModel(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
|
||||
{/* Suspend only when active */}
|
||||
{item.isActive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i>{" "}
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() =>
|
||||
setEmpForManageRole(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i> Manage
|
||||
Role
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* If INACTIVE employee AND inactive toggle is ON */}
|
||||
{!item.isActive && showInactive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-refresh bx-sm me-1"></i>{" "}
|
||||
Re-activate
|
||||
</button>
|
||||
)}
|
||||
<span className="fw-normal">
|
||||
{item.firstName} {item.middleName}{" "}
|
||||
{item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
{item.email ? (
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-envelope text-primary me-2"></i>
|
||||
{item.email}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-truncate text-italic">-</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-phone-call text-primary me-2"></i>
|
||||
{item.phoneNumber}
|
||||
</span>
|
||||
</td>
|
||||
<td className=" d-none d-sm-table-cell text-start">
|
||||
<span className="text-truncate">
|
||||
<i className="bx bxs-wrench text-success me-2"></i>
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td className="d-none d-md-table-cell">
|
||||
{item.joiningDate ? moment(item.joiningDate).format("DD-MMM-YYYY") : "NA"}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{showInactive ? (
|
||||
<span
|
||||
className="badge bg-label-danger"
|
||||
text-capitalized=""
|
||||
>
|
||||
Inactive
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className="badge bg-label-success"
|
||||
text-capitalized=""
|
||||
>
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
{Manage_Employee && (
|
||||
<td className="text-end">
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-icon dropdown-toggle hide-arrow"
|
||||
data-bs-toggle="dropdown"
|
||||
>
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{/* View always visible */}
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
|
||||
{/* If ACTIVE employee */}
|
||||
{item.isActive && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleEmployeeModel(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
|
||||
{/* Suspend only when active */}
|
||||
{item.isActive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i>{" "}
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() =>
|
||||
setEmpForManageRole(item.id)
|
||||
}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i> Manage
|
||||
Role
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* If INACTIVE employee AND inactive toggle is ON */}
|
||||
{!item.isActive && showInactive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-refresh bx-sm me-1"></i>{" "}
|
||||
Re-activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{displayData.length > 0 && (
|
||||
<Pagination
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user