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>
   );
 }

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

@@ -15,10 +15,6 @@ export default function ContractCarsContainer({ selectedCarState, form }) {
   const handleSelect = (record) => {
     setSelectedCar(record.id);
 
-    console.log(
-      "🚀  ~ file: contract-cars.container.jsx  ~ line 19  ~ record",
-      record
-    );
     form.setFieldsValue({
       kmstart: record.mileage,
       dailyrate: record.dailycost,
@@ -28,13 +24,11 @@ export default function ContractCarsContainer({ selectedCarState, form }) {
 
   if (error) return <AlertComponent message={error.message} type="error" />;
   return (
-    <div>
-      <ContractCarsComponent
-        handleSelect={handleSelect}
-        selectedCar={selectedCar}
-        loading={loading}
-        data={data ? data.courtesycars : []}
-      />
-    </div>
+    <ContractCarsComponent
+      handleSelect={handleSelect}
+      selectedCar={selectedCar}
+      loading={loading}
+      data={data ? data.courtesycars : []}
+    />
   );
 }