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

created new projectListView component

Browse Source
This commit is contained in:
Pramod Mahajan 2025-04-22 10:44:41 +05:30
parent d4fed67912
commit 1cdfb47c39
1 changed files with 196 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/pages/project/ProjectListView.jsx Normal file
View File

@ -0,0 +1,196 @@
import React from "react";
import moment from "moment";
import { useProjects } from "../../hooks/useProjects";
const ProjectListView = () => {
const { projects } = useProjects();
const getProgress = (planned, completed) => {
return (completed * 100) / planned + "%";
};
const getProgressInNumber = (planned, completed) => {
return (completed * 100) / planned;
};
const getProjectStatusName = (statusId) => {
switch (statusId) {
case 1:
return "Active";
case 2:
return "On Hold";
// case 3:
// return "Suspended";
case 3:
return "Inactive";
case 4:
return "Completed";
}
};
const getProjectStatusColor = (statusId) => {
switch (statusId) {
case 1:
return "bg-label-success";
case 2:
return "bg-label-warning";
case 3:
return "bg-label-info";
case 4:
return "bg-label-secondary";
case 5:
return "bg-label-dark";
}
};
return (
<div className="table-responsive text-nowrap py-2 overflow-auto">
<table className="table px-2">
<thead>
<tr>
<th className="text-start" colSpan={5}>
Project Name
</th>
<th className="mx-2">Project Manger</th>
<th className="mx-2">START DATE</th>
<th className="mx-2">DEADLINE</th>
<th className="mx-2">Task</th>
<th className="mx-2">Progress</th>
<th className="mx-2">
<div class="dropdown">
<a
class="dropdown-toggle hide-arrow cursor-pointer"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Status <i class="bx bx-filter"></i>
</a>
<ul class="dropdown-menu px-3 py-2">
<li>
<div class="form-check form-check-success mb-1">
<input
name="statusRadio"
class="form-check-input"
type="radio"
value="active"
id="statusActive"
checked
/>
<label class="form-check-label text-success" for="statusActive">
Active
</label>
</div>
</li>
<li>
<div class="form-check form-check-warning mb-1">
<input
name="statusRadio"
class="form-check-input"
type="radio"
value="onhold"
id="statusOnHold"
checked
/>
<label class="form-check-label text-warning" for="statusOnHold">
On-Hold
</label>
</div>
</li>
<li>
<div class="form-check form-check-info mb-1">
<input
name="statusRadio"
class="form-check-input"
type="radio"
value="inactive"
id="statusInactive"
checked
/>
<label class="form-check-label text-info" for="statusInactive">
Inactive
</label>
</div>
</li>
<li>
<div class="form-check form-check-secondary mb-1">
<input
name="customRadioSecondary" class="form-check-input" type="radio" value="" id="customRadioSecondary" checked
/>
<label class="form-check-label text-secondary" for="statusCompleted">
Completed
</label>
</div>
</li>
</ul>
</div>
</th>
<th className="mx-2">Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0">
{projects.map((project) => (
<tr className="py-8">
<td className="text-start" colSpan={5}>
<strong className="text-primary"> {project.name}</strong>
</td>
<td className="text-start">{project.contactPerson}</td>
<td className="small text-start">
<small>
{" "}
{project.startDate
? moment(project.startDate).format("DD-MMM-YYYY")
: "NA"}
</small>
</td>
<td className="mx-2 text-start">
{project.endDate
? moment(project.endDate).format("DD-MMM-YYYY")
: "NA"}
</td>
<td className="mx-2 text-start">{project.plannedWork}</td>
<td className="py-6 mx-2 text-start">
<div
className="progress rounded align-items-center"
style={{ height: "8px" }}
>
<div
className="progress-bar rounded"
role="progressbar"
style={{
width: getProgress(
project.plannedWork,
project.completedWork
),
}}
aria-valuenow={project.completedWork}
aria-valuemin="0"
aria-valuemax={project.plannedWork}
></div>
</div>
</td>
<td className="mx-6 ">
<p className="mb-0">
<span
className={
`badge ` + getProjectStatusColor(project.projectStatusId)
}
>
{getProjectStatusName(project.projectStatusId)}
</span>
</p>{" "}
</td>
<td className="mx-2 ">
{" "}
<i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default ProjectListView;