changed Task Report UI

This commit is contained in:
Pramod Mahajan 2025-04-15 02:58:01 +05:30
parent d1c36dfd97
commit 30a9908499

View File

@ -13,7 +13,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
completedTask: z
.number()
.min(1, "Completed Work must be at least 1")
.int("Completed Work must be an integer")
.positive("Completed Work must be a positive number")
.optional(),
@ -63,78 +63,65 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
></button>
<div className="container m-0">
<div className="d-flex justify-content-between">
<figure className="text-start p-0 m-0">
<blockquote className="blockquote">
<small>
{" "}
Assigned Date : {formatDate(report?.assignmentDate)}
</small>
</blockquote>
</figure>
<figure className="text-end p-0 m-0">
<blockquote className="blockquote">
<small>Assigned By</small>
</blockquote>
<figcaption className="blockquote-footer mb-0">
{/* <div className="d-flex avatar avatar-xs">
<span className="avatar-initial rounded-circle bg-label-primary">
{report?.assignedBy?.firstName.slice(0, 1)}
</span> */}
<cite title="Source Title m-0">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</cite>
{/* </div> */}
</figcaption>
</figure>
</div>
<div className="d-flex p-0 m-0">
<div className="flex-shrink-0 mt-1 mx-sm-0 px-2 mx-auto">
<i className="bx bx-buildings"></i>
<div class="mb-1 row text-start">
<label for="html5-text-input" class="col-md-4 col-form-label">
Assigned Date :{" "}
</label>
<div class="col-md-8 text-start">
<label class="col-md-2 col-form-label">
{formatDate(report?.assignmentDate)}
</label>
</div>
</div>
<div class="mb-1 row text-start">
<label for="html5-search-input" class="col-md-4 col-form-label">
Assigned By :{" "}
</label>
<div class="col-md-8 text-start">
<label class=" col-form-label">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</label>
</div>
</div>
<div class="mb-1 row text-start">
<label for="html5-email-input" class="col-md-4 col-form-label">
Wrok Area :
</label>
<div class="col-md-8 text-start text-wrap">
<label class=" col-form-label">
{" "}
{report?.workItem?.workArea?.floor?.building?.name}{" "}
<i class="bx bx-chevron-right"></i>{" "}
{report?.workItem?.workArea?.floor?.floorName}{" "}
<i class="bx bx-chevron-right"> </i>
{report?.workItem?.workArea?.areaName}
</label>
</div>
</div>
<div class="mb-1 row text-start">
<label for="html5-email-input" class="col-md-4 col-form-label">
Activity :
</label>
<div class="col-md-8 text-start text-wrap">
<label class=" col-form-label">
{report?.workItem?.activityMaster.activityName}
</label>
</div>
</div>
<div class="mb-1 row text-start">
<label for="html5-email-input" class="col-md-4 col-form-label">
Team Size :
</label>
<div class="col-md-8 text-start text-wrap">
<label class=" col-form-label">
{report?.teamMembers?.length}
</label>
</div>
<p className="lead">
{report?.workItem?.workArea?.floor?.building?.name}
</p>
<p className="lead ms-12">
{report?.workItem?.workArea?.floor?.floorName}
</p>
</div>
<dl className="row text-start ms-3">
<dt className="col-sm-6">
Work Area : {report?.workItem?.workArea?.areaName}
</dt>
<dd className="col-sm-6">
<small> {report?.workItem?.activityMaster.activityName}</small>
</dd>
</dl>
<dl className="row text-start ms-3">
<dt className="col-sm-4">Team</dt>
<dd className="col-sm-4 d-flex align-items-center avatar-group justify-content-start">
{report?.teamMembers.map((member) => (
<>
<div
data-bs-toggle="tooltip"
data-bs-html="true"
data-popup="tooltip-custom"
data-bs-placement="top"
title={`${member.firstName} ${member.lastName}`}
className="avatar avatar-xs"
>
{/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
<span className="avatar-initial rounded-circle bg-label-primary">
{member?.firstName.slice(0, 1)}
</span>
</div>
</>
))}
</dd>
<dt className="col-sm-4 text-start">
Planned : {report?.plannedTask}
</dt>
</dl>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="row p-0">
<div className="col-4">
<div class="mb-1 row text-start">
<label for="html5-email-input" class="col-md-4 col-form-label">
Completed Work
</label>
<div class="col-md-8 text-start text-wrap">
<input
{...register("completedTask", { valueAsNumber: true })}
id="smallInput"
@ -148,7 +135,12 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
</div>
)}
</div>
<div className="col-8">
</div>
<div class="mb-1 row text-start">
<label for="html5-email-input" class="col-md-4 col-form-label">
Comment
</label>
<div class="col-md-8 text-start text-wrap">
<textarea
{...register("comment")}
className="form-control"
@ -157,11 +149,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
placeholder="Enter comment"
/>
{errors.comment && (
<div className="text-danger">{errors.comment.message}</div>
<div className="danger-text">{errors.comment.message}</div>
)}
</div>
</div>
<div className="col-12 text-center my-2">
<button type="submit" className="btn btn-sm btn-primary me-3">
{loading ? "Please wait" : "Submit Report"}