From 68a0db91ee1653d9f9b20f804d9656c4184673c3 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sun, 13 Oct 2024 13:56:13 +0200
Subject: [PATCH] feat: form header fields

---
 packages/webapp/src/components/App.tsx        |   2 +-
 .../CreditNoteFormHeaderFields.tsx            |  45 +++--
 .../EstimateForm/EstimateFormHeaderFields.tsx |  47 +++--
 .../Invoices/InvoiceForm/InvoiceForm.tsx      |  13 +-
 .../InvoiceForm/InvoiceFormHeaderFields.tsx   | 161 ++++++++++--------
 .../InvoiceItemsEntriesEditorField.tsx        |  56 +++---
 .../PaymentReceiveFormHeader.tsx              |   3 +-
 .../PaymentReceiveHeaderFields.tsx            |  53 +++++-
 .../ReceiptForm/ReceiptFormHeader.tsx         |   1 +
 .../ReceiptForm/ReceiptFormHeaderFields.tsx   |  53 ++++--
 10 files changed, 263 insertions(+), 171 deletions(-)

diff --git a/packages/webapp/src/components/App.tsx b/packages/webapp/src/components/App.tsx
index a962d88f7..8e3ace04f 100644
--- a/packages/webapp/src/components/App.tsx
+++ b/packages/webapp/src/components/App.tsx
@@ -40,7 +40,7 @@ const PaymentPortalPage = lazy(
 
 const theme = {
   ...defaultTheme,
-  // Customize your theme here
+  bpPrefix: 'bp4',
 }
 
 /**
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
index 3c89f2f04..ad5bca1df 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { css } from '@emotion/css';
+import { useTheme } from '@emotion/react';
 
 import { CLASSES } from '@/constants/classes';
 import {
@@ -14,6 +16,7 @@ import {
   CustomerDrawerLink,
   FFormGroup,
   CustomersSelect,
+  Stack,
 } from '@/components';
 import { customerNameFieldShouldUpdate } from './utils';
 
@@ -28,12 +31,31 @@ import {
 } from '@/utils';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
+const getCreditNoteFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Credit note form header fields.
  */
-export default function CreditNoteFormHeaderFields({}) {
+export default function CreditNoteFormHeaderFields() {
+  const theme = useTheme();
+  const styleClassName = getCreditNoteFieldsStyle(theme);
+
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={styleClassName}>
       {/* ----------- Customer name ----------- */}
       <CreditNoteCustomersSelect />
 
@@ -65,24 +87,15 @@ export default function CreditNoteFormHeaderFields({}) {
           </FormGroup>
         )}
       </FastField>
+
       {/* ----------- Credit note # ----------- */}
       <CreditNoteTransactionNoField />
 
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference_no'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
-    </div>
+      <FormGroup label={<T id={'reference_no'} />} name={'reference_no'} inline>
+        <InputGroup name={'reference_no'} minimal />
+      </FormGroup>
+    </Stack>
   );
 }
 
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
index eba6eb5da..fb04e904f 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
@@ -1,10 +1,10 @@
 // @ts-nocheck
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
-
+import { css } from '@emotion/css';
 import {
   FeatureCan,
   FFormGroup,
@@ -13,6 +13,8 @@ import {
   Icon,
   CustomerDrawerLink,
   CustomersSelect,
+  FInputGroup,
+  Stack,
 } from '@/components';
 import {
   momentFormatter,
@@ -31,15 +33,36 @@ import {
 import { EstimateFormEstimateNumberField } from './EstimateFormEstimateNumberField';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
+import { useTheme } from '@emotion/react';
+import { Theme } from '@xstyled/emotion';
+
+const getEstimateFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 470px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 160px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
 
 /**
  * Estimate form header.
  */
 export default function EstimateFormHeader() {
+  const theme = useTheme();
   const { projects } = useEstimateFormContext();
+  const styleClassName = getEstimateFieldsStyle(theme);
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={styleClassName}>
       {/* ----------- Customer name ----------- */}
       <EstimateFormCustomerSelect />
 
@@ -106,19 +129,9 @@ export default function EstimateFormHeader() {
       <EstimateFormEstimateNumberField />
 
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'reference'} label={<T id={'reference'} />} inline fill>
+        <FInputGroup name={'reference'} minimal={true} />
+      </FFormGroup>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>
@@ -136,7 +149,7 @@ export default function EstimateFormHeader() {
           />
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }
 
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
index 2a410aed3..8359be8d9 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
@@ -22,7 +22,7 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
 
-import { AppToaster } from '@/components';
+import { AppToaster, Box } from '@/components';
 import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { InvoiceFormActions } from './InvoiceFormActions';
@@ -166,20 +166,23 @@ function InvoiceFormRoot({
       initialValues={initialValues}
       onSubmit={handleSubmit}
     >
-      <Form 
+      <Form
         className={css({
           overflow: 'hidden',
           display: 'flex',
           flexDirection: 'column',
-          flex: 1
+          flex: 1,
         })}
       >
         <PageForm flex={1}>
           <PageForm.Body>
             <InvoiceFormTopBar />
             <InvoiceFormHeader />
-            <InvoiceFormActions />
-            <InvoiceItemsEntriesEditorField />
+
+            <Box p="18px 32px 0">
+              <InvoiceFormActions />
+              <InvoiceItemsEntriesEditorField />
+            </Box>
             <InvoiceFormFooter />
           </PageForm.Body>
 
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
index 8b6bc5fd2..8facf34e8 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
@@ -2,20 +2,23 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { css } from '@emotion/css';
+import { Theme, useTheme } from '@emotion/react';
 
 import {
   FFormGroup,
   FormattedMessage as T,
-  Col,
-  Row,
   CustomerDrawerLink,
   FieldRequiredHint,
   FeatureCan,
   CustomersSelect,
-  Stack
+  Stack,
+  Group,
+  FInputGroup,
+  Icon,
 } from '@/components';
 import {
   momentFormatter,
@@ -39,97 +42,105 @@ import {
 import { Features } from '@/constants';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
+const getInvoiceFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Invoice form header fields.
  */
 export default function InvoiceFormHeaderFields() {
-  // Invoice form context.
+  const theme = useTheme();
   const { projects } = useInvoiceFormContext();
   const { values } = useFormikContext();
+  const invoiceFieldsClassName = getInvoiceFieldsStyle(theme);
 
   return (
-    <Stack spacing={0}>
+    <Stack spacing={18} flex={1} className={invoiceFieldsClassName}>
       {/* ----------- Customer name ----------- */}
       <InvoiceFormCustomerSelect />
 
       {/* ----------- Exchange rate ----------- */}
       <InvoiceExchangeRateInputField />
 
-      <Row>
-        <Col xs={6}>
-          {/* ----------- Invoice date ----------- */}
-          <FastField name={'invoice_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'invoice_date'} />}
-                inline={true}
-                labelInfo={<FieldRequiredHint />}
-                className={classNames('form-group--invoice-date', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="invoice_date" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('invoice_date', formattedDate);
-                  })}
-                  popoverProps={{
-                    position: Position.BOTTOM_LEFT,
-                    minimal: true,
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
+      {/* ----------- Invoice date ----------- */}
+      <FastField name={'invoice_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'invoice_date'} />}
+            inline={true}
+            labelInfo={<FieldRequiredHint />}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="invoice_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('invoice_date', formattedDate);
+              })}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
 
-        <Col xs={6}>
-          {/* ----------- Due date ----------- */}
-          <FastField name={'due_date'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
-              <FormGroup
-                label={<T id={'due_date'} />}
-                labelInfo={<FieldRequiredHint />}
-                inline={true}
-                className={classNames('form-group--due-date', CLASSES.FILL)}
-                intent={inputIntent({ error, touched })}
-                helperText={<ErrorMessage name="due_date" />}
-              >
-                <DateInput
-                  {...momentFormatter('YYYY/MM/DD')}
-                  value={tansformDateValue(value)}
-                  onChange={handleDateChange((formattedDate) => {
-                    form.setFieldValue('due_date', formattedDate);
-                  })}
-                  popoverProps={{
-                    position: Position.BOTTOM_LEFT,
-                    minimal: true,
-                  }}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-        </Col>
-      </Row>
+      {/* ----------- Due date ----------- */}
+      <FastField name={'due_date'}>
+        {({ form, field: { value }, meta: { error, touched } }) => (
+          <FormGroup
+            label={<T id={'due_date'} />}
+            labelInfo={<FieldRequiredHint />}
+            inline={true}
+            className={classNames(CLASSES.FILL)}
+            intent={inputIntent({ error, touched })}
+            helperText={<ErrorMessage name="due_date" />}
+          >
+            <DateInput
+              {...momentFormatter('YYYY/MM/DD')}
+              value={tansformDateValue(value)}
+              onChange={handleDateChange((formattedDate) => {
+                form.setFieldValue('due_date', formattedDate);
+              })}
+              popoverProps={{
+                position: Position.BOTTOM_LEFT,
+                minimal: true,
+              }}
+              inputProps={{
+                leftIcon: <Icon icon={'date-range'} />,
+              }}
+            />
+          </FormGroup>
+        )}
+      </FastField>
 
       {/* ----------- Invoice number ----------- */}
       <InvoiceFormInvoiceNumberField />
 
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup name={'reference_no'} label={<T id={'reference'} />} inline>
+        <FInputGroup name={'reference_no'} minimal={true} />
+      </FFormGroup>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
index aa907de30..6fa4d9911 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
@@ -15,35 +15,31 @@ export default function InvoiceItemsEntriesEditorField() {
   const { items, taxRates } = useInvoiceFormContext();
 
   return (
-    <x.div p="18px 32px 0">
-      <FastField
-        name={'entries'}
-        items={items}
-        taxRates={taxRates}
-        shouldUpdate={entriesFieldShouldUpdate}
-      >
-        {({
-          form: { values, setFieldValue },
-          field: { value },
-          meta: { error, touched },
-        }) => (
-          <ItemsEntriesTable
-            value={value}
-            onChange={(entries) => {
-              setFieldValue('entries', entries);
-            }}
-            items={items}
-            taxRates={taxRates}
-            itemType={ITEM_TYPE.SELLABLE}
-            errors={error}
-            linesNumber={4}
-            currencyCode={values.currency_code}
-            isInclusiveTax={
-              values.inclusive_exclusive_tax === TaxType.Inclusive
-            }
-          />
-        )}
-      </FastField>
-    </x.div>
+    <FastField
+      name={'entries'}
+      items={items}
+      taxRates={taxRates}
+      shouldUpdate={entriesFieldShouldUpdate}
+    >
+      {({
+        form: { values, setFieldValue },
+        field: { value },
+        meta: { error, touched },
+      }) => (
+        <ItemsEntriesTable
+          value={value}
+          onChange={(entries) => {
+            setFieldValue('entries', entries);
+          }}
+          items={items}
+          taxRates={taxRates}
+          itemType={ITEM_TYPE.SELLABLE}
+          errors={error}
+          linesNumber={4}
+          currencyCode={values.currency_code}
+          isInclusiveTax={values.inclusive_exclusive_tax === TaxType.Inclusive}
+        />
+      )}
+    </FastField>
   );
 }
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
index 2a587444d..d0596564f 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
@@ -1,7 +1,6 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import classNames from 'classnames';
-import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
 import { Group, Money } from '@/components';
 import { FormattedMessage as T } from '@/components';
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
index 71ff9bfc8..42f956aa7 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
@@ -13,12 +13,15 @@ import {
 import { DateInput } from '@blueprintjs/datetime';
 import { isEmpty, toSafeInteger } from 'lodash';
 import { FastField, useFormikContext, ErrorMessage } from 'formik';
+import { css } from '@emotion/css';
+import { Theme, useTheme } from '@emotion/react';
 
 import {
   FeatureCan,
   CustomersSelect,
   FormattedMessage as T,
   FMoneyInputGroup,
+  Stack,
 } from '@/components';
 import { CLASSES } from '@/constants/classes';
 import {
@@ -55,10 +58,30 @@ import {
 import { Features } from '@/constants';
 import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
 
+
+const getHeaderFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 470px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 160px;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Payment receive header fields.
  */
 export default function PaymentReceiveHeaderFields() {
+  const theme = useTheme();
+  const styleClassName = getHeaderFieldsStyle(theme);
+
   // Payment receive form context.
   const { accounts, projects } = usePaymentReceiveFormContext();
 
@@ -88,7 +111,7 @@ export default function PaymentReceiveHeaderFields() {
   };
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={styleClassName}>
       {/* ------------- Customer name ------------- */}
       <PaymentReceiveCustomerSelect />
 
@@ -143,9 +166,25 @@ export default function PaymentReceiveHeaderFields() {
         {!isEmpty(entries) && (
           <Button
             onClick={handleReceiveFullAmountClick}
-            className={'receive-full-amount'}
-            small={true}
-            minimal={true}
+            className={css`
+              &:not([class*='${theme.bpPrefix}-intent-']) {
+                &.${theme.bpPrefix}-minimal {
+                  width: auto;
+                  padding: 0;
+                  min-height: auto;
+                  font-size: 12px;
+                  margin-top: 4px;
+                  background-color: transparent;
+                  color: #0052cc;
+
+                  &:hover {
+                    text-decoration: underline;
+                  }
+                }
+              }
+            `}
+            small
+            minimal
           >
             <T id={'receive_full_amount'} /> (
             <Money amount={totalDueAmount} currency={currency_code} />)
@@ -186,10 +225,10 @@ export default function PaymentReceiveHeaderFields() {
       <FFormGroup
         name={'reference_no'}
         label={<T id={'reference'} />}
-        inline={true}
+        inline
         fastField
       >
-        <InputGroup name={'reference_no'} minimal={true} fastField />
+        <InputGroup name={'reference_no'} minimal fastField />
       </FFormGroup>
 
       {/*------------ Project name -----------*/}
@@ -208,7 +247,7 @@ export default function PaymentReceiveHeaderFields() {
           />
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }
 
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
index fd2f8e678..9c6d8ac2e 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
@@ -20,6 +20,7 @@ function ReceiptFormHeader({
       display="flex"
       bg="white"
       p="25px 32px"
+      borderBottom="1px solid #d2dce2"
     >
       <ReceiptFormHeaderFields
         onReceiptNumberChanged={onReceiptNumberChanged}
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
index 1536c9785..6d1b63c80 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
@@ -1,10 +1,12 @@
 // @ts-nocheck
-import React, { useCallback } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core';
-import { DateInput } from '@blueprintjs/datetime';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormGroup, Position, Classes } from '@blueprintjs/core';
+import { DateInput } from '@blueprintjs/datetime';
+import { css } from '@emotion/css';
+import { Theme, useTheme } from '@emotion/react';
 
 import { CLASSES } from '@/constants/classes';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
@@ -18,6 +20,8 @@ import {
   CustomerDrawerLink,
   FormattedMessage as T,
   FeatureCan,
+  FInputGroup,
+  Stack,
 } from '@/components';
 import { ProjectsSelect } from '@/containers/Projects/components';
 import {
@@ -35,14 +39,33 @@ import {
 import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField';
 import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
 
+const getEstimateFieldsStyle = (theme: Theme) => css`
+  .${theme.bpPrefix}-form-group {
+    margin-bottom: 0;
+
+    &.${theme.bpPrefix}-inline {
+      max-width: 450px;
+    }
+    .${theme.bpPrefix}-label {
+      min-width: 150px;
+      font-weight: 500;
+    }
+    .${theme.bpPrefix}-form-content {
+      width: 100%;
+    }
+  }
+`;
+
 /**
  * Receipt form header fields.
  */
 export default function ReceiptFormHeader() {
+  const theme = useTheme();
+  const receiptFieldsClassName = getEstimateFieldsStyle(theme);
   const { accounts, projects } = useReceiptFormContext();
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
+    <Stack spacing={18} flex={1} className={receiptFieldsClassName}>
       {/* ----------- Customer name ----------- */}
       <ReceiptFormCustomerSelect />
 
@@ -104,19 +127,13 @@ export default function ReceiptFormHeader() {
       <ReceiptFormReceiptNumberField />
 
       {/* ----------- Reference ----------- */}
-      <FastField name={'reference_no'}>
-        {({ field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'reference'} />}
-            inline={true}
-            className={classNames('form-group--reference', CLASSES.FILL)}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name="reference_no" />}
-          >
-            <InputGroup minimal={true} {...field} />
-          </FormGroup>
-        )}
-      </FastField>
+      <FFormGroup
+        label={<T id={'reference'} />}
+        inline={true}
+        name={'reference_no'}
+      >
+        <FInputGroup minimal={true} name={'reference_no'} />
+      </FFormGroup>
 
       {/*------------ Project name -----------*/}
       <FeatureCan feature={Features.Projects}>
@@ -134,7 +151,7 @@ export default function ReceiptFormHeader() {
           />
         </FFormGroup>
       </FeatureCan>
-    </div>
+    </Stack>
   );
 }