added partially proejctwise attendace
This commit is contained in:
parent
4a47b1d0fa
commit
69148331f5
@ -31,7 +31,7 @@ const selectedProjectId = useSelectedProject()
|
||||
<div className="card-header mb-1 pb-0">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Attendance</h5>
|
||||
<h5 class="card-title m-0 me-2">Attendance</h5>
|
||||
<p className="card-subtitle">Daily Attendance Data</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@ const AttendanceOverview = () => {
|
||||
{/* Header */}
|
||||
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1 fw-bold">Attendance Overview</h5>
|
||||
<h5 className="mb-1 fw-semibold">Attendance Overview</h5>
|
||||
<p className="card-subtitle">Role-wise present count</p>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
|
||||
@ -27,6 +27,7 @@ import {
|
||||
} from "../../utils/constants";
|
||||
import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
|
||||
import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";
|
||||
import ProjectWiseTeamCount from "./projectWiseTeamCount";
|
||||
|
||||
const Dashboard = () => {
|
||||
// Get the selected project ID from Redux store
|
||||
@ -90,6 +91,9 @@ const Dashboard = () => {
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||
<ProjectWiseTeamCount />
|
||||
</div>
|
||||
|
||||
{!isAllProjectsSelected && (
|
||||
<div className="col-xxl-4 col-lg-4">
|
||||
@ -115,80 +119,3 @@ const 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>
|
||||
|
||||
@ -92,7 +92,7 @@ const ProjectProgressChart = ({
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
|
||||
{/* Left: Title */}
|
||||
<div className="card-title text-start">
|
||||
<h5 className="mb-1 fw-bold">Project Progress</h5>
|
||||
<h5 className="mb-1 fw-semibold">Project Progress</h5>
|
||||
<p className="card-subtitle">Progress Overview by Project</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
90
src/components/Dashboard/ProjectWiseTeamCount.jsx
Normal file
90
src/components/Dashboard/ProjectWiseTeamCount.jsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from "react";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
|
||||
const ProjectWiseTeamCount = () => {
|
||||
const { projectNames, loading, isError, Errorr } = useProjectName();
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="card h-100 p-3 d-flex align-items-center justify-content-center">
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="card h-100 p-3 d-flex align-items-center justify-content-center">
|
||||
<span>Error: {Errorr?.message || "Something went wrong"}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card h-100 p-2">
|
||||
<div className="text-start">
|
||||
<h5 class="card-title m-0 me-2"> Project wise Employee</h5>
|
||||
</div>
|
||||
<div className="table-container">
|
||||
<table className="table table-borderless mb-0">
|
||||
<thead className="table-header ">
|
||||
<tr>
|
||||
<th style={{ width: 40 }}>No</th>
|
||||
<th style={{ width: 200 }}>Project</th>
|
||||
<th style={{ width: 150 }}>Visits</th>
|
||||
<th>Data In Percentage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div
|
||||
className="table-body-scroll overflow-auto"
|
||||
style={{ maxHeight: "65vh" }}
|
||||
>
|
||||
<table className="table table-borderless mb-0">
|
||||
<tbody>
|
||||
{(projectNames ?? []).map((item, index) => (
|
||||
<tr key={item.id || index}>
|
||||
<td>{index + 1}</td>
|
||||
|
||||
<td>
|
||||
<div className="d-flex align-items-center my-2">
|
||||
{item.img && (
|
||||
<img
|
||||
src={item.img}
|
||||
alt={item.shortName}
|
||||
height="24"
|
||||
className="me-3"
|
||||
/>
|
||||
)}
|
||||
<span className="text-heading">{item.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{item.visits}</td>
|
||||
|
||||
<td>
|
||||
<div className="d-flex justify-content-between align-items-center gap-3">
|
||||
<div
|
||||
className="progress flex-grow-1"
|
||||
style={{ height: 10 }}
|
||||
>
|
||||
<div
|
||||
className={`progress-bar ${item.color}`}
|
||||
style={{ width: `${item.percent}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<small>{item.percent}%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectWiseTeamCount;
|
||||
@ -170,7 +170,7 @@ const ProjectStatistics = ({ project }) => {
|
||||
<h5 className="card-action-title mb-0">
|
||||
{" "}
|
||||
<i className="fa fa-line-chart rounded-circle text-primary"></i>
|
||||
<span className="ms-2 fw-bold">Project Statistics</span>
|
||||
<span className="ms-2 fw-semibold">Project Statistics</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user