UI alignment at View Managejob Ticket in jobs.

src/components/ServiceProject/ManageJobTicket.jsx

@@ -7,6 +7,7 @@ import Avatar from "../common/Avatar";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
 import JobStatusLog from "./JobStatusLog";
 import JobComments from "./JobComments";
+import { daysLeft } from "../../utils/appUtils";
 
 const ManageJobTicket = ({ Job }) => {
   const { data, isLoading, isError, error } = useServiceProjectJobDetails(
@@ -17,14 +18,14 @@ const ManageJobTicket = ({ Job }) => {
     {
       id: "comment",
       title: "Comments",
-      icon:"bx bx-comment me-2",
+      icon: "bx bx-comment me-2",
       active: true,
       content: <JobComments data={data} />,
     },
     {
       id: "history",
       title: "History",
-       icon:"bx bx-time me-2",
+      icon: "bx bx-time me-2",
       active: false,
       content: <JobStatusLog data={data?.updateLogs} />,
     },
@@ -41,56 +42,79 @@ const ManageJobTicket = ({ Job }) => {
   return (
     <div className="row text-start">
       <div className="col-12">
-        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
+        <div className="d-flex justify-content-between align-items-center mb-3">
-        <div className="d-flex justify-content-between">
-          <div className="d-flex flex-row gap-2">
-            <i className="bx bx-calendar"></i>{" "}
-            <span>{formatUTCToLocalTime(data?.createdAt, true)}</span>
-          </div>
           <span className="badge bg-label-primary">{data?.status?.name}</span>
+          {data?.dueDate && (() => {
+            const { days, color } = daysLeft(data?.startDate, data?.dueDate);
+            return (
+              <span style={{ fontSize: "12px" }}>
+                <span className="fw-medium me-1">Days Left :</span>
+                <span className={`badge bg-${color}`}>
+                  {days !== null ? `${days} days` : "N/A"}
+                </span>
+              </span>
+            );
+          })()}
+
         </div>
-        <div className="d-flex flex-wrap my-3">
+        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
-          <p>{data?.description}</p>
+
+        <div className="d-flex flex-wrap">
+          <p>
+            <span className="fw-medium me-1">Description :</span>
+            {data?.description || "N/A"}
+          </p>
         </div>
-        <div className="d-flex flex-row gap-5">
+
-          <span className="fw-medium">
+
-          <i className="bx bx-calendar"></i>  Start Date : {formatUTCToLocalTime(data?.startDate)}
+        <div className="d-flex justify-content-between mb-4">
-          </span>{" "}
+          <div className="d-flex flex-row gap-1 fw-medium">
-          <i className="bx bx-right-arrow-alt"></i>{" "}
+            <i className="bx bx-calendar"></i>{" "}
-          <span className="fw-medium">
+            <span>Created Date : {formatUTCToLocalTime(data?.createdAt, true)}</span>
-          <i className="bx bx-calendar"></i>  Due on : {formatUTCToLocalTime(data?.startDate)}
+          </div>
-          </span>
         </div>
-        <div className="d-block mt-2">
+
+        <div>
+          <div className="d-flex flex-row gap-5">
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i>  Start Date : {formatUTCToLocalTime(data?.startDate)}
+            </span>{" "}
+            <i className="bx bx-right-arrow-alt"></i>{" "}
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i>  Due on : {formatUTCToLocalTime(data?.startDate)}
+            </span>
+          </div>
+        </div>
+        <div className="d-block mt-4 mb-3">
           <div className="d-flex align-items-center mb-2">
-            <small className="fs-6 text-secondary fs-italic me-3 mt-2">
+            <span className="fs-6 fw-medium me-5">
-              <em>Created By</em>
+              Created By
-            </small>{" "}
+            </span>{" "}
             <Avatar
               size="xs"
               firstName={data?.createdBy?.firstName}
               lastName={data?.createdBy?.lastName}
             />{" "}
-             <div className="d-flex flex-row align-items-center">
+            <div className="d-flex flex-row align-items-center">
-                    <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
+              <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
-                    <small className="text-secondary ms-1">({data?.createdBy?.jobRoleName})</small>
+              <small className="text-secondary ms-1">({data?.createdBy?.jobRoleName})</small>
-                  </div>
+            </div>
           </div>
           <div className="d-flex align-items-center">
-            <small className="fs-6 text-secondary fs-italic me-3 mt-2">
+            <small className="fs-6 fw-medium me-3">
-              <em>Assigned</em>
+              Assigned By
             </small>
-             <div className="d-flex flex-row gap-3">
+            <div className="d-flex flex-row gap-3">
-              {data?.assignees?.map((emp)=>(
+              {data?.assignees?.map((emp) => (
                 <div className="d-flex flex-row ">
-                  <Avatar size="xs" firstName={emp.firstName} lastName={emp.lastName}/>
+                  <Avatar size="xs" firstName={emp.firstName} lastName={emp.lastName} />
                   <div className="d-flex flex-row align-items-center">
                     <p className="m-0">{`${emp.firstName} ${emp.lastName}`}</p>
-                    <small className="text-secondary ms-1">( {emp.jobRoleName} )</small>
+                    <small className="text-secondary ms-1">({emp.jobRoleName})</small>
-                  </div>
                   </div>
+                </div>
               ))}
-             </div>
+            </div>
           </div>
         </div>
       </div>
@@ -106,7 +130,7 @@ const ManageJobTicket = ({ Job }) => {
                 data-bs-target={`#tab-${tab.id}`}
                 role="tab"
               >
-               <i className={tab.icon} /> {tab.title}
+                <i className={tab.icon} /> {tab.title}
               </button>
             </li>
           ))}

src/components/common/OffcanvasComponent.jsx

@@ -6,7 +6,7 @@ const OffcanvasComponent = ({
   placement = "start", // start | end | top | bottom
   children,
   show = false,
-  onClose = () => {},
+  onClose = () => { },
 }) => {
   const offcanvasRef = useRef(null);
   const bsInstance = useRef(null);
@@ -45,10 +45,18 @@ const OffcanvasComponent = ({
         aria-labelledby={`${id}-label`}
       >
         <div className="offcanvas-header">
-           <div className='d-flex flex-row gap-3'>
+          <div className="d-flex align-items-center gap-3">
-           <i className='bx bx-lg bx-left-arrow-alt cursor-pointer' data-bs-dismiss="offcanvas"
+            <i
-            aria-label="Close"></i> <i className='bx bx-briefcase text-primary'></i> <h5 className="offcanvas-title" id={`${id}-label`}>{title}</h5>
+              className="bx bx-lg bx-left-arrow-alt cursor-pointer"
-      </div>
+              data-bs-dismiss="offcanvas"
+              aria-label="Close"
+            ></i>
+            <i className="bx bx-briefcase text-primary"></i>
+            <h5 className="offcanvas-title mb-0" id={`${id}-label`}>
+              {title}
+            </h5>
+          </div>
+
 
           <button
             type="button"