Further UI Updates.

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

@@ -1,4 +1,4 @@
-import { Input, Table } from "antd";
+import { Card, Input, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
@@ -97,32 +97,36 @@ export default function ContractsCarsComponent({
         );
 
   return (
-    <Table
-      loading={loading}
-      title={() => (
+    <Card
+      title={t("contracts.labels.availablecars")}
+      extra={
         <Input.Search
           placeholder={t("general.labels.search")}
           value={state.search}
           onChange={(e) => setState({ ...state, search: e.target.value })}
         />
-      )}
-      pagination={{ position: "top" }}
-      columns={columns.map((item) => ({ ...item }))}
-      rowKey="id"
-      dataSource={filteredData}
-      onChange={handleTableChange}
-      rowSelection={{
-        onSelect: handleSelect,
-        type: "radio",
-        selectedRowKeys: [selectedCar],
-      }}
-      onRow={(record, rowIndex) => {
-        return {
-          onClick: (event) => {
-            handleSelect(record);
-          },
-        };
-      }}
-    />
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{ position: "top" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={filteredData}
+        onChange={handleTableChange}
+        rowSelection={{
+          onSelect: handleSelect,
+          type: "radio",
+          selectedRowKeys: [selectedCar],
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: (event) => {
+              handleSelect(record);
+            },
+          };
+        }}
+      />
+    </Card>
   );
 }