UI Implementation at Job List

src/components/ServiceProject/JobList.jsx

@@ -105,7 +105,7 @@ const JobList = () => {
             {jobGrid.map((col) => (
               <th
                 key={col.key}
-                className={`${col.className} text-center`}
+                className={`${col.align || "text-center"} ${col.className || ""}`}
                 scope="col"
               >
                 <div className={col.className}>{col.label}</div>
@@ -120,14 +120,14 @@ const JobList = () => {
         <tbody>
           {Array.isArray(data?.data) && data.data.length > 0 ? (
             data.data.map((row, i) => (
-              <tr key={i}>
+              <tr key={i} className="text-start">
                 {jobGrid.map((col) => (
                   <td key={col.key} className={col.className}>
                     {col.getValue(row)}
                   </td>
                 ))}
                 <td>
-                  <div className="dropdown">
+                  <div className="dropdown text-center">
                     <button
                       className="btn btn-icon dropdown-toggle hide-arrow"
                       data-bs-toggle="dropdown"

src/components/ServiceProject/Jobs.jsx

@@ -57,7 +57,7 @@ const Jobs = () => {
         >
           <ManageJob Job={manageJob.jobId} />
         </OffcanvasComponent>
-        <div className="card page-min-h my-2 px-4">
+        <div className="card page-min-h my-2 px-7">
           <div className="row">
             <div className="col-12 py-2 d-flex justify-content-end ">
               <div className="px-2">