Further UI Updates.

client/src/components/contract-jobs/contract-jobs.component.jsx

@@ -1,4 +1,4 @@
-import { Input, Table } from "antd";
+import { Card, Input, Table } from "antd";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -162,44 +162,48 @@ export default function ContractsJobsComponent({
   const defaultCurrent = useMemo(() => {
     const page =
       Math.floor(
-        (filteredData.findIndex((v) => v.id === selectedJob) || 0) / 3
+        (filteredData.findIndex((v) => v.id === selectedJob) || 0) / 10
       ) + 1;
-
+    if (page === 0) return 1;
     return page;
   }, [filteredData, selectedJob]);
 
   if (loading) return <LoadingSkeleton />;
   return (
-    <Table
-      loading={loading}
-      title={() => (
+    <Card
+      title={t("jobs.labels.availablejobs")}
+      extra={
         <Input.Search
           placeholder={t("general.labels.search")}
           value={state.search}
           onChange={(e) => setState({ ...state, search: e.target.value })}
         />
-      )}
-      pagination={{
-        position: "top",
-        defaultPageSize: 3,
-        defaultCurrent: defaultCurrent,
-      }}
-      columns={columns}
-      rowKey="id"
-      dataSource={filteredData}
-      onChange={handleTableChange}
-      rowSelection={{
-        onSelect: handleSelect,
-        type: "radio",
-        selectedRowKeys: [selectedJob],
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
-            handleSelect(record);
-          },
-        };
-      }}
-    />
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{
+          position: "top",
+          defaultPageSize: 10,
+          defaultCurrent: defaultCurrent,
+        }}
+        columns={columns}
+        rowKey="id"
+        dataSource={filteredData}
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelect: handleSelect,
+          type: "radio",
+          selectedRowKeys: [selectedJob],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleSelect(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }

client/src/components/contract-jobs/contract-jobs.container.jsx

@@ -25,14 +25,12 @@ export function ContractJobsContainer({ selectedJobState, bodyshop }) {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <div>
-      <ContractJobsComponent
-        handleSelect={handleSelect}
-        selectedJob={selectedJob}
-        loading={loading}
-        data={data ? data.jobs : []}
-      />
-    </div>
+    <ContractJobsComponent
+      handleSelect={handleSelect}
+      selectedJob={selectedJob}
+      loading={loading}
+      data={data ? data.jobs : []}
+    />
   );
 }
 export default connect(mapStateToProps, null)(ContractJobsContainer);