UI changes in View Jobs.

public/assets/css/core-extend.css

@@ -456,3 +456,8 @@ font-weight: normal;
   .fs-md-xlarge { font-size: 170% !important; }
   .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
 }
+
+.me-16 {
+  /* margin-inline-end:  -7.0625rem !important; */
+  margin-left: -7.0625rem !important;
+}

src/components/ServiceProject/JobList.jsx

@@ -20,6 +20,12 @@ const JobList = () => {
   );
 
   const jobGrid = [
+    {
+      key: "jobTicketUId",
+      label: "Job Id",
+      getValue: (e) => e?.jobTicketUId || "N/A",
+      align: "text-start",
+    },
     {
       key: "title",
       label: "Title",
@@ -40,12 +46,7 @@ const JobList = () => {
       isAlwaysVisible: true,
       className: "text-start",
     },
-    {
-      key: "jobTicketUId",
-      label: "Job Id",
-      getValue: (e) => e?.jobTicketUId || "N/A",
-      align: "text-start",
-    },
+
     {
       key: "dueDate",
       label: "Due On",

src/components/ServiceProject/ManageJob.jsx

@@ -123,7 +123,7 @@ const ManageJob = ({ Job }) => {
               size="md"
             />
           </div>
-          <div className="col-12 col-md-6 mb-2 mb-md-4">
+          <div className="col-12 col-md-12 mb-2 mb-md-4">
             <Label required>Select Employee</Label>
             <PmsEmployeeInputTag
               control={control}

src/components/ServiceProject/ManageJobTicket.jsx

@@ -45,30 +45,36 @@ const ManageJobTicket = ({ Job }) => {
   return (
     <div className="row text-start">
       <div className="col-12">
-        <div className="d-flex flex-wrap">
-          <p>
+        <div className="d-flex justify-content-between align-items-center flex-wrap mb-2">
+          {/* Job Id on left */}
+          <p className="mb-0">
             <span className="fw-medium me-1">Job Id :</span>
             {data?.jobTicketUId || "N/A"}
           </p>
+
+          {/* Edit icon on right */}
+          <HoverPopup
+            id="STATUS_CHANEG"
+            title="Change Status"
+            Mode="click"
+            className="end-6 start-50 me-16"
+            content={
+              <ChangeStatus
+                statusId={data?.status?.id}
+                projectId={projectId}
+                jobId={Job?.job}
+                popUpId="STATUS_CHANEG"
+              />
+            }
+          >
+            <i className="bx bx-edit bx-sm cursor-pointer"></i>
+          </HoverPopup>
         </div>
+
         <div className="d-flex justify-content-between align-items-center mb-3">
           <div className="d-flex flex-row gap-2">
             <span className="badge bg-label-primary">{data?.status?.name}</span>
-            <HoverPopup
-              id="STATUS_CHANEG"
-              title="Change Status"
-              Mode="click"
-              content={
-                <ChangeStatus
-                  statusId={data?.status?.id}
-                  projectId={projectId}
-                  jobId={Job?.job}
-                  popUpId={"STATUS_CHANEG"}
-                />
-              }
-            >
-              <i className="bx bx-edit bx-sm"></i>
-            </HoverPopup>
+
           </div>
           {data?.dueDate &&
             (() => {

src/components/common/HoverPopup.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { closePopup, openPopup, togglePopup } from "../../slices/localVariablesSlice";
 
-const HoverPopup = ({ id, title, content, children, Mode = "hover" }) => {
+const HoverPopup = ({ id, title, content, children, className, Mode = "hover" }) => {
   const dispatch = useDispatch();
   const visible = useSelector((s) => s.localVariables.popups[id] || false);
 
@@ -60,7 +60,7 @@ const HoverPopup = ({ id, title, content, children, Mode = "hover" }) => {
       {visible && (
         <div
           ref={popupRef}
-          className="bg-white border rounded shadow-sm p-3 position-absolute top-100 start-0 mt-2"
+          className={`bg-white border rounded shadow-sm p-3 position-absolute top-100 mt-2 start-50 translate-middle-x ${className}`}
           style={{ zIndex: 1000, width: "240px" }}
           onClick={(e) => e.stopPropagation()} // prevents closing when clicking inside
         >

src/pages/project/ProjectPage.jsx

@@ -75,7 +75,7 @@ const ProjectPage = () => {
         />
 
         <div className="card cursor-pointer mb-5">
-          <div className="card-body p-2 pb-1">           
+          <div className="card-body py-3 px-6 pb-1">           
             <div className="d-flex flex-wrap justify-content-between align-items-start">
               {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
               <div className="mb-2">