admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

ui improvements - dashbord attendance report toggle icons change

Browse Source
This commit is contained in:
Vikas Nale 2025-08-06 15:03:46 +05:30
parent 495f38db99
commit 0e8691f6d0
4 changed files with 701 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Dashboard/AttendanceChart.jsx
View File

@ -18,7 +18,10 @@ const AttendanceOverview = () => {
const [view, setView] = useState("chart");
const projectId = useSelector((store) => store.localVariables.projectId);
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange);
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
projectId,
dayRange
);
const { tableData, roles, dates } = useMemo(() => {
const map = new Map();
@ -29,7 +32,9 @@ const AttendanceOverview = () => {
map.get(date)[entry.role.trim()] = entry.present;
});
const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))];
const uniqueRoles = [
...new Set(attendanceOverviewData.map((e) => e.role.trim())),
];
const sortedDates = [...map.keys()];
const data = sortedDates.map((date) => {
const row = { date };
@ -71,17 +76,17 @@ const AttendanceOverview = () => {
show: true,
axisBorder: {
show: true,
color: '#78909C',
color: "#78909C",
offsetX: 0,
offsetY: 0
offsetY: 0,
},
axisTicks: {
show: true,
borderType: 'solid',
color: '#78909C',
borderType: "solid",
color: "#78909C",
width: 6,
offsetX: 0,
offsetY: 0
offsetY: 0,
},
},
legend: {
@ -94,9 +99,7 @@ const AttendanceOverview = () => {
};
return (
<div
className="bg-white p-4 rounded shadow d-flex flex-column"
>
<div className="bg-white p-4 rounded shadow d-flex flex-column">
{/* Header */}
<div className="d-flex justify-content-between align-items-center mb-3">
<div className="card-title mb-0 text-start">
@ -105,7 +108,7 @@ const AttendanceOverview = () => {
</div>
<div className="d-flex gap-2">
<select
className="form-select form-select-sm"
className="form-select form-select-sm w-auto"
value={dayRange}
onChange={(e) => setDayRange(Number(e.target.value))}
>
@ -114,16 +117,20 @@ const AttendanceOverview = () => {
<option value={30}>Last 30 Days</option>
</select>
<button
className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${
view === "chart" ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setView("chart")}
>
📊
<i class="bx bx-bar-chart fs-5"></i>
</button>
<button
className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
className={`btn btn-sm p-1 ${
view === "table" ? "btn-primary" : "btn-outline-primary"
}`}
onClick={() => setView("table")}
>
📋
<i class="bx bx-table fs-5"></i>
</button>
</div>
</div>
@ -149,11 +156,21 @@ const AttendanceOverview = () => {
style={{ maxHeight: "350px", overflowY: "auto" }}
>
<table className="table table-bordered table-sm text-start align-middle mb-0">
<thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
<thead
className="table-light"
style={{ position: "sticky", top: 0, zIndex: 1 }}
>
<tr>
<th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
<th style={{ background: "#f8f9fa", textTransform: "none" }}>
Role
</th>
{dates.map((date, idx) => (
<th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
<th
key={idx}
style={{ background: "#f8f9fa", textTransform: "none" }}
>
{date}
</th>
))}
</tr>
</thead>
@ -164,7 +181,8 @@ const AttendanceOverview = () => {
<td>{role}</td>
{tableData.map((row, idx) => {
const value = row[role];
const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
const cellStyle =
value > 0 ? { backgroundColor: "#d5d5d5" } : {};
return (
<td key={idx} style={cellStyle}>
{value}

516
src/components/Employee/EmpDocuments.jsx Normal file
View File

@ -0,0 +1,516 @@
import React, { useState, useEffect } from "react";
const EmpDocuments = ({ profile, loggedInUser }) => {
return (
<>
<div
id="DataTables_Table_0_wrapper"
class="dt-container dt-bootstrap5 dt-empty-footer"
>
<div class="row card-header border-bottom mx-0 px-3 py-2">
<div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
<h5 class="card-title mb-0 text-nowrap text-md-start text-center">
Document you have uploaded
</h5>
</div>
<div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto">
<div class="dt-search">
<input
type="search"
class="form-control"
id="dt-search-0"
placeholder="Search Document"
aria-controls="DataTables_Table_0"
/>
<label for="dt-search-0"></label>
</div>
</div>
</div>
<div class="justify-content-between dt-layout-table">
<div class="d-md-flex justify-content-between align-items-center col-12 dt-layout-full col-md">
<table
class="table table-sm datatables-academy-Document dataTable dtr-column"
id="DataTables_Table_0"
aria-describedby="DataTables_Table_0_info"
style={{ width: "100%" }}
>
<colgroup>
<col data-dt-column="2" style={{ width: "369.984px" }} />
<col data-dt-column="3" style={{ width: "96.2656px" }} />
<col data-dt-column="4" style={{ width: "259.75px" }} />
<col data-dt-column="5" style={{ width: "65px" }} />
</colgroup>
<thead>
<tr>
<th
data-dt-column="0"
class="control dt-orderable-none dtr-hidden"
rowspan="1"
colspan="1"
aria-label=""
style={{ display: "none" }}
>
<span class="dt-column-title"></span>
<span class="dt-column-order"></span>
</th>
<th
data-dt-column="2"
rowspan="1"
colspan="1"
class="dt-orderable-asc dt-orderable-desc dt-ordering-desc"
aria-sort="descending"
aria-label="Document Name: Activate to remove sorting"
tabindex="0"
>
<span class="dt-column-title" role="button">
Document Name
</span>
<span class="dt-column-order"></span>
</th>
<th
data-dt-column="3"
rowspan="1"
colspan="1"
class="dt-orderable-asc dt-orderable-desc"
aria-label="Time: Activate to sort"
tabindex="0"
>
<span class="dt-column-title" role="button">
Uploaded Date
</span>
<span class="dt-column-order"></span>
</th>
<th
data-dt-column="3"
rowspan="1"
colspan="1"
class="dt-orderable-asc dt-orderable-desc"
aria-label="Time: Activate to sort"
tabindex="0"
>
<span class="dt-column-title" role="button">
Uploaded By
</span>
<span class="dt-column-order"></span>
</th>
<th
class="dt-orderable-asc dt-orderable-desc"
data-dt-column="5"
rowspan="1"
colspan="1"
aria-label="Status: Activate to sort"
tabindex="0"
>
<span class="dt-column-title" role="button">
Status
</span>
<span class="dt-column-order"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="control dtr-hidden"
tabindex="0"
style={{ display: "none" }}
></td>
<td class="sorting_1">
<div class="d-flex align-items-center">
<span class="me-4">
<span class="bg-label-danger p-1_5">
<i class="icon-base bx bxs-file-pdf icon-28px"></i>
</span>
</span>
<div>
<a
class="text-heading text-truncate fw-medium mb-2 text-wrap"
href="app-academy-Document-details.html"
>
AADHAR Card
</a>
<div class="d-flex align-items-center mt-1">
{/* <div class="avatar-wrapper me-2">
<div class="avatar avatar-xs">
<img
src="../../assets/img/avatars/2.png"
alt="Avatar"
class="rounded-circle"
/>
</div>
</div> */}
<small class="text-nowrap text-heading">
card number
</small>
</div>
</div>
</div>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
11-Jun-2025
</span>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
Uploaded By
</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-between">
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
</div>
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
</div>
</div>
</td>
</tr>
<tr>
<td
class="control dtr-hidden"
tabindex="0"
style={{ display: "none" }}
></td>
<td class="sorting_1">
<div class="d-flex align-items-center">
<span class="me-4">
<span class="badge bg-label-warning rounded p-1_5">
<i class="icon-base bx bxs-file-doc icon-28px"></i>
</span>
</span>
<div>
<a
class="text-heading text-truncate fw-medium mb-2 text-wrap"
href="app-academy-Document-details.html"
>
Degree Certificate
</a>
<div class="d-flex align-items-center mt-1">
{/* <div class="avatar-wrapper me-2">
<div class="avatar avatar-xs">
<img
src="../../assets/img/avatars/13.png"
alt="Avatar"
class="rounded-circle"
/>
</div>
</div> */}
<small class="text-nowrap text-heading">
certificate details
</small>
</div>
</div>
</div>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
11-Jun-2025
</span>
</td>{" "}
<td>
<span class="fw-medium text-nowrap text-heading">
Uploaded By
</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-between">
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
</div>
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
</div>
</div>
</td>
</tr>
<tr>
<td
class="control dtr-hidden"
tabindex="0"
style={{ display: "none" }}
></td>
<td class="sorting_1">
<div class="d-flex align-items-center">
<span class="me-4">
<span class="badge bg-label-success rounded p-1_5">
<i class="icon-base bx bxs-file-png icon-28px"></i>
</span>
</span>
<div>
<a
class="text-heading text-truncate fw-medium mb-2 text-wrap"
href="app-academy-Document-details.html"
>
Photo
</a>
<div class="d-flex align-items-center mt-1">
{/* <div class="avatar-wrapper me-2">
<div class="avatar avatar-xs">
<img
src="../../assets/img/avatars/12.png"
alt="Avatar"
class="rounded-circle"
/>
</div>
</div> */}
<small class="text-nowrap text-heading">
self photo
</small>
</div>
</div>
</div>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
11-Jun-2025
</span>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
Uploaded By
</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-between">
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
</div>
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
</div>
</div>
</td>
</tr>
<tr>
<td
class="control dtr-hidden"
tabindex="0"
style={{ display: "none" }}
></td>
<td class="sorting_1">
<div class="d-flex align-items-center">
<span class="me-4">
<span class="badge bg-label-primary rounded p-1_5">
<i class="icon-base bx bxs-file-pdf icon-28px"></i>
</span>
</span>
<div>
<a
class="text-heading text-truncate fw-medium mb-2 text-wrap"
href="app-academy-Document-details.html"
>
Driving License
</a>
<div class="d-flex align-items-center mt-1">
{/* <div class="avatar-wrapper me-2">
<div class="avatar avatar-xs">
<img
src="../../assets/img/avatars/5.png"
alt="Avatar"
class="rounded-circle"
/>
</div>
</div> */}
<small class="text-nowrap text-heading">
license number
</small>
</div>
</div>
</div>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
11-Jun-2025
</span>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
Uploaded By
</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-between">
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
</div>
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
</div>
</div>
</td>
</tr>
<tr>
<td
class="control dtr-hidden"
tabindex="0"
style={{ display: "none" }}
></td>
<td class="sorting_1">
<div class="d-flex align-items-center">
<span class="me-4">
<span class="badge bg-label-primary rounded p-1_5">
<i class="icon-base bx bxs-file-txt icon-28px"></i>
</span>
</span>
<div>
<a
class="text-heading text-truncate fw-medium mb-2 text-wrap"
href="app-academy-Document-details.html"
>
PAN Card
</a>
<div class="d-flex align-items-center mt-1">
{/* <div class="avatar-wrapper me-2">
<div class="avatar avatar-xs">
<img
src="../../assets/img/avatars/14.png"
alt="Avatar"
class="rounded-circle"
/>
</div>
</div> */}
<small class="text-nowrap text-heading">
card number
</small>
</div>
</div>
</div>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
11-Jun-2025
</span>
</td>
<td>
<span class="fw-medium text-nowrap text-heading">
Uploaded By
</span>
</td>
<td>
<div class="d-flex align-items-center justify-content-between">
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
</div>
<div class=" d-flex align-items-center">
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
</div>
</div>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="row mx-3 justify-content-between">
<div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
<div
class="dt-info"
aria-live="polite"
id="DataTables_Table_0_info"
role="status"
>
Showing 1 to 5 of 25 entries
</div>
</div>
<div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto">
<div class="dt-paging">
<nav aria-label="pagination">
<ul class="pagination">
<li class="dt-paging-button page-item disabled">
<button
class="page-link previous"
role="link"
type="button"
aria-controls="DataTables_Table_0"
aria-disabled="true"
aria-label="Previous"
data-dt-idx="previous"
tabindex="-1"
>
<i class="icon-base bx bx-chevron-left scaleX-n1-rtl icon-18px"></i>
</button>
</li>
<li class="dt-paging-button page-item active">
<button
class="page-link"
role="link"
type="button"
aria-controls="DataTables_Table_0"
aria-current="page"
data-dt-idx="0"
>
1
</button>
</li>
<li class="dt-paging-button page-item">
<button
class="page-link"
role="link"
type="button"
aria-controls="DataTables_Table_0"
data-dt-idx="1"
>
2
</button>
</li>
<li class="dt-paging-button page-item">
<button
class="page-link"
role="link"
type="button"
aria-controls="DataTables_Table_0"
data-dt-idx="2"
>
3
</button>
</li>
<li class="dt-paging-button page-item">
<button
class="page-link"
role="link"
type="button"
aria-controls="DataTables_Table_0"
data-dt-idx="3"
>
4
</button>
</li>
<li class="dt-paging-button page-item">
<button
class="page-link"
role="link"
type="button"
aria-controls="DataTables_Table_0"
data-dt-idx="4"
>
5
</button>
</li>
<li class="dt-paging-button page-item">
<button
class="page-link next"
role="link"
type="button"
aria-controls="DataTables_Table_0"
aria-label="Next"
data-dt-idx="next"
>
<i class="icon-base bx bx-chevron-right scaleX-n1-rtl icon-18px"></i>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</>
);
};
export default EmpDocuments;

4
src/components/Employee/EmployeeNav.jsx
View File

@ -36,12 +36,12 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
<a
className={`nav-link py-1 px-2 small ${
activePill === "account" ? "active" : ""
activePill === "documents" ? "active" : ""
}`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("account");
onPillClick("documents");
}}
>
<i className="bx bx-user bx-sm me-1_5"></i> Documents

5
src/pages/employee/EmployeeProfile.jsx
View File

@ -20,6 +20,7 @@ import EmpAttendance from "../../components/Employee/EmpAttendance";
import ManageEmployee from "../../components/Employee/ManageEmployee";
import EmpBanner from "../../components/Employee/EmpBanner";
import EmpDashboard from "../../components/Employee/EmpDashboard";
import EmpDocuments from "../../components/Employee/EmpDocuments";
const EmployeeProfile = () => {
const { profile } = useProfile();
@ -73,10 +74,10 @@ const EmployeeProfile = () => {
</>
);
}
case "dcoument": {
case "documents": {
return (
<>
<ComingSoonPage />
<EmpDocuments />
</>
);
break;