changed Task Report UI
This commit is contained in:
parent
d1c36dfd97
commit
30a9908499
@ -63,78 +63,65 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
|
|||||||
></button>
|
></button>
|
||||||
|
|
||||||
<div className="container m-0">
|
<div className="container m-0">
|
||||||
<div className="d-flex justify-content-between">
|
<div class="mb-1 row text-start">
|
||||||
<figure className="text-start p-0 m-0">
|
<label for="html5-text-input" class="col-md-4 col-form-label">
|
||||||
<blockquote className="blockquote">
|
Assigned Date :{" "}
|
||||||
<small>
|
</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">
|
||||||
{" "}
|
{" "}
|
||||||
Assigned Date : {formatDate(report?.assignmentDate)}
|
{report?.workItem?.workArea?.floor?.building?.name}{" "}
|
||||||
</small>
|
<i class="bx bx-chevron-right"></i>{" "}
|
||||||
</blockquote>
|
{report?.workItem?.workArea?.floor?.floorName}{" "}
|
||||||
</figure>
|
<i class="bx bx-chevron-right"> </i>
|
||||||
<figure className="text-end p-0 m-0">
|
{report?.workItem?.workArea?.areaName}
|
||||||
<blockquote className="blockquote">
|
</label>
|
||||||
<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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
<p className="lead">
|
<div class="mb-1 row text-start">
|
||||||
{report?.workItem?.workArea?.floor?.building?.name}
|
<label for="html5-email-input" class="col-md-4 col-form-label">
|
||||||
</p>
|
Activity :
|
||||||
<p className="lead ms-12">
|
</label>
|
||||||
{report?.workItem?.workArea?.floor?.floorName}
|
<div class="col-md-8 text-start text-wrap">
|
||||||
</p>
|
<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>
|
</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>
|
</div>
|
||||||
</>
|
|
||||||
))}
|
|
||||||
</dd>
|
|
||||||
<dt className="col-sm-4 text-start">
|
|
||||||
Planned : {report?.plannedTask}
|
|
||||||
</dt>
|
|
||||||
</dl>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="row p-0">
|
<div class="mb-1 row text-start">
|
||||||
<div className="col-4">
|
<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
|
<input
|
||||||
{...register("completedTask", { valueAsNumber: true })}
|
{...register("completedTask", { valueAsNumber: true })}
|
||||||
id="smallInput"
|
id="smallInput"
|
||||||
@ -148,7 +135,12 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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
|
<textarea
|
||||||
{...register("comment")}
|
{...register("comment")}
|
||||||
className="form-control"
|
className="form-control"
|
||||||
@ -157,11 +149,10 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
|
|||||||
placeholder="Enter comment"
|
placeholder="Enter comment"
|
||||||
/>
|
/>
|
||||||
{errors.comment && (
|
{errors.comment && (
|
||||||
<div className="text-danger">{errors.comment.message}</div>
|
<div className="danger-text">{errors.comment.message}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 text-center my-2">
|
<div className="col-12 text-center my-2">
|
||||||
<button type="submit" className="btn btn-sm btn-primary me-3">
|
<button type="submit" className="btn btn-sm btn-primary me-3">
|
||||||
{loading ? "Please wait" : "Submit Report"}
|
{loading ? "Please wait" : "Submit Report"}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user