UI Updates & Bill Entering

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

@@ -1,16 +1,16 @@
+import { useApolloClient } from "@apollo/client";
 import {
   Button,
+  Divider,
   Form,
   Input,
   Select,
   Space,
   Statistic,
   Switch,
-  Typography,
   Upload,
 } from "antd";
 import React, { useEffect, useState } from "react";
-import { useApolloClient } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -159,7 +159,6 @@ export function BillFormComponent({
         >
           <Input disabled={disabled || disableInvNumber} />
         </Form.Item>
-
         <Form.Item
           label={t("bills.fields.date")}
           name="date"
@@ -191,6 +190,17 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} disabled={disabled} />
         </Form.Item>
+        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
+          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
+            {bodyshop.md_parts_locations.map((loc, idx) => (
+              <Select.Option key={idx} value={loc}>
+                {loc}
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow>
         <Form.Item
           label={t("bills.fields.federal_tax_rate")}
           name="federal_tax_rate"
@@ -209,19 +219,8 @@ export function BillFormComponent({
         >
           <CurrencyInput min={0} />
         </Form.Item>
-        <Form.Item label={t("bills.fields.allpartslocation")} name="location">
-          <Select style={{ width: "10rem" }} disabled={disabled} allowClear>
-            {bodyshop.md_parts_locations.map((loc, idx) => (
-              <Select.Option key={idx} value={loc}>
-                {loc}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
       </LayoutFormRow>
-      <Typography.Title level={4}>
-        {t("bills.labels.bill_lines")}
-      </Typography.Title>
+      <Divider orientation="left">{t("bills.labels.bill_lines")}</Divider>
       <BillFormLines
         lineData={lineData}
         discount={discount}
@@ -264,7 +263,7 @@ export function BillFormComponent({
           if (!!totals)
             return (
               <div>
-                <Space>
+                <Space split={<Divider type="vertical" />}>
                   <Statistic
                     title={t("bills.labels.subtotal")}
                     value={totals.subtotal.toFormat()}