Further UI Updates.

client/src/components/bill-detail-edit/bill-detail-edit.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Form, Popconfirm } from "antd";
+import { Button, Form, PageHeader, Popconfirm } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect, useState } from "react";
@@ -112,27 +112,36 @@ export default function BillDetailEditcontainer() {
 
   return (
     <LoadingSkeleton loading={loading}>
-      <Popconfirm
-        visible={visible}
-        onConfirm={() => form.submit()}
-        onCancel={() => setVisible(false)}
-        okButtonProps={{ loading: updateLoading }}
-        title={t("bills.labels.editadjwarning")}
-      >
-        <Button
-          htmlType="submit"
-          disabled={exported}
-          onClick={handleSave}
-          loading={updateLoading}
-          type="primary"
-        >
-          {t("general.actions.save")}
-        </Button>
-      </Popconfirm>
+      <PageHeader
+        title={
+          data &&
+          `${data.bills_by_pk.invoice_number} - ${data.bills_by_pk.vendor.name}`
+        }
+        extra={
+          <Popconfirm
+            visible={visible}
+            onConfirm={() => form.submit()}
+            onCancel={() => setVisible(false)}
+            okButtonProps={{ loading: updateLoading }}
+            title={t("bills.labels.editadjwarning")}
+          >
+            <Button
+              htmlType="submit"
+              disabled={exported}
+              onClick={handleSave}
+              loading={updateLoading}
+              type="primary"
+            >
+              {t("general.actions.save")}
+            </Button>
+          </Popconfirm>
+        }
+      />
       <Form
         form={form}
         onFinish={handleFinish}
         initialValues={transformData(data)}
+        layout="vertical"
       >
         <BillFormContainer form={form} billEdit disabled={exported} />
         <JobDocumentsGallery