UI Updates & Bill Entering

client/src/components/vendors-form/vendors-form.component.jsx

@@ -1,9 +1,11 @@
 import { DeleteFilled } from "@ant-design/icons";
 import {
   Button,
+  Divider,
   Form,
   Input,
   InputNumber,
+  PageHeader,
   Select,
   Space,
   Switch,
@@ -27,18 +29,31 @@ export default function VendorsFormComponent({
   const { getFieldValue } = form;
   return (
     <div>
-      <Space>
-        <Button
-          onClick={() => form.submit()}
-          type="primary"
-          loading={formLoading}
-        >
-          {t("general.actions.save")}
-        </Button>
-        <Button type="danger" onClick={handleDelete} loading={formLoading}>
-          {t("general.actions.delete")}
-        </Button>
-      </Space>
+      <PageHeader
+        title={form.getFieldValue("name")}
+        extra={
+          <Space>
+            <Form.Item
+              label={t("vendors.fields.active")}
+              name="active"
+              initialValue={true}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+            <Button
+              onClick={() => form.submit()}
+              type="primary"
+              loading={formLoading}
+            >
+              {t("general.actions.save")}
+            </Button>
+            <Button type="danger" onClick={handleDelete} loading={formLoading}>
+              {t("general.actions.delete")}
+            </Button>
+          </Space>
+        }
+      />
       <FormFieldsChanged form={form} />
       <LayoutFormRow grow>
         <Form.Item
@@ -50,14 +65,7 @@ export default function VendorsFormComponent({
         >
           <Input />
         </Form.Item>
-        <Form.Item
-          label={t("vendors.fields.active")}
-          name="active"
-          initialValue={true}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
+
         <Form.Item
           label={t("vendors.fields.email")}
           rules={[
@@ -104,7 +112,7 @@ export default function VendorsFormComponent({
           <Input />
         </Form.Item>
       </LayoutFormRow>
-      <LayoutFormRow>
+      <LayoutFormRow grow>
         <Form.Item label={t("vendors.fields.discount")} name="discount">
           <InputNumber min={0} max={1} precision={2} />
         </Form.Item>
@@ -125,16 +133,14 @@ export default function VendorsFormComponent({
           </Select>
         </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
-        {t("vendors.labels.preferredmakes")}
-      </Typography.Title>
+      <Divider align="left">{t("vendors.labels.preferredmakes")}</Divider>
       <Form.List name="favorite">
         {(fields, { add, remove }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key}>
-                  <div style={{ display: "flex" }}>
+                  <Space wrap>
                     <Form.Item
                       label={t("vendors.fields.make")}
                       key={`${index}make`}
@@ -154,7 +160,7 @@ export default function VendorsFormComponent({
                         remove(field.name);
                       }}
                     />
-                  </div>
+                  </Space>
                 </Form.Item>
               ))}
               <Form.Item>

client/src/components/vendors-form/vendors-form.container.jsx

@@ -119,6 +119,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
+
   return (
     <Form
       onFinish={handleFinish}