Further UI Updates

client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Form, notification } from "antd";
+import { Button, Form, notification, PageHeader } from "antd";
 import { useMutation } from "@apollo/client";
 import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";
@@ -37,18 +37,32 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
   };
 
   return (
-    <Form
-      onFinish={handleFinish}
-      form={form}
-      autoComplete="off"
-      layout="vertical"
-      initialValues={{
-        ...vehicle,
-        v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null,
-      }}
-    >
-      <VehicleDetailFormComponent form={form} loading={loading} />
-    </Form>
+    <>
+      <PageHeader
+        title={t("menus.header.owners")}
+        extra={
+          <Button
+            type="primary"
+            loading={loading}
+            onClick={() => form.submit()}
+          >
+            {t("general.actions.save")}
+          </Button>
+        }
+      />
+      <Form
+        onFinish={handleFinish}
+        form={form}
+        autoComplete="off"
+        layout="vertical"
+        initialValues={{
+          ...vehicle,
+          v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null,
+        }}
+      >
+        <VehicleDetailFormComponent form={form} loading={loading} />
+      </Form>
+    </>
   );
 }