feat(webapp): redesign item form to match customer/vendor form layout

Redesign the item form UX to align with the customer and vendor form patterns:
- Add vertical sticky tabs (Basic, Selling, Purchasing, Inventory) with smooth scroll
- Split monolithic sections into discrete components (Basic, Selling, Purchasing, Inventory)
- Move Active checkbox from floating actions into Basic section
- Update floating actions to sticky bottom bar with Save + Save & New dropdown
- Remove Cancel button from floating actions
- Wrap form in centered max-width container (800px)
- Clean up legacy item form SCSS

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

packages/webapp/src/containers/Items/ItemForm.tsx

@@ -1,14 +1,14 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 
 import ItemFormFormik from './ItemFormFormik';
 
 import { useDashboardPageTitle } from '@/hooks/state';
 import { useItemFormContext, ItemFormProvider } from './ItemFormProvider';
-import { DashboardInsider, DashboardCard } from '@/components';
+import { DashboardInsider } from '@/components';
+import { Box } from '@/components';
 
 /**
  * Item form dashboard title.
@@ -39,9 +39,9 @@ function ItemFormPageLoading({ children }) {
   const { isFormLoading } = useItemFormContext();
 
   return (
-    <DashboardItemFormPageInsider loading={isFormLoading} name={'item-form'}>
+    <DashboardInsider loading={isFormLoading}>
       {children}
-    </DashboardItemFormPageInsider>
+    </DashboardInsider>
   );
 }
 
@@ -59,36 +59,18 @@ export default function ItemForm({ itemId }) {
       history.push('/items');
     }
   };
-  // Handle cancel button click.
-  const handleFormCancel = () => {
-    history.goBack();
-  };
 
   return (
     <ItemFormProvider itemId={itemId}>
       <ItemFormDashboardTitle />
 
       <ItemFormPageLoading>
-        <DashboardCard page>
-          <ItemFormPageFormik
+        <Box mx={'auto'} maxWidth={800}>
+          <ItemFormFormik
             onSubmitSuccess={handleSubmitSuccess}
-            onCancel={handleFormCancel}
           />
-        </DashboardCard>
+        </Box>
       </ItemFormPageLoading>
     </ItemFormProvider>
   );
 }
-
-const DashboardItemFormPageInsider = styled(DashboardInsider)`
-  padding-bottom: 64px;
-`;
-
-const ItemFormPageFormik = styled(ItemFormFormik)`
-  .page-form {
-    &__floating-actions {
-      margin-left: -40px;
-      margin-right: -40px;
-    }
-  }
-`;

packages/webapp/src/containers/Items/ItemFormBasicSection.tsx

@@ -3,41 +3,31 @@ import React, { useEffect, useRef } from 'react';
 import {
   FormGroup,
   RadioGroup,
-  Classes,
   Radio,
   Position,
-  MenuItem,
+  Checkbox,
 } from '@blueprintjs/core';
 import { ErrorMessage, FastField } from 'formik';
-import { CLASSES } from '@/constants/classes';
 import {
   Hint,
-  Col,
-  Row,
   FieldRequiredHint,
   FormattedMessage as T,
   FormattedHTMLMessage,
   FFormGroup,
   FSelect,
   FInputGroup,
+  Box,
 } from '@/components';
-import classNames from 'classnames';
 
 import { useItemFormContext } from './ItemFormProvider';
 import { handleStringChange, inputIntent } from '@/utils';
-// import { categoriesFieldShouldUpdate } from './utils';
+import { ItemFormSectionTitle } from './ItemFormSectionTitle';
 
-/**
- * Item form primary section.
- */
-export default function ItemFormPrimarySection() {
-  // Item form context.
+export function ItemFormBasicSection() {
   const { isNewMode, item, itemsCategories } = useItemFormContext();
-
   const nameFieldRef = useRef(null);
 
   useEffect(() => {
-    // Auto focus item name field once component mount.
     if (nameFieldRef.current) {
       nameFieldRef.current.focus();
     }
@@ -45,17 +35,19 @@ export default function ItemFormPrimarySection() {
 
   const itemTypeHintContent = (
     <>
-      <div class="mb1">
+      <div className="mb1">
         <FormattedHTMLMessage id={'services_that_you_provide_to_customers'} />
       </div>
-      <div class="mb1">
+      <div className="mb1">
         <FormattedHTMLMessage id={'products_you_buy_and_or_sell'} />
       </div>
     </>
   );
 
   return (
-    <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+    <Box data-section-id="primary">
+      <ItemFormSectionTitle>Basic details</ItemFormSectionTitle>
+
       {/*----------- Item type ----------*/}
       <FastField name={'type'}>
         {({ form, field: { value }, meta: { touched, error } }) => (
@@ -91,61 +83,66 @@ export default function ItemFormPrimarySection() {
         )}
       </FastField>
 
-      <Row>
-        <Col xs={7}>
-          {/*----------- Item name ----------*/}
-          <FFormGroup
-            name={'name'}
-            label={<T id={'item_name'} />}
-            labelInfo={<FieldRequiredHint />}
-            inline={true}
-            fastField
-          >
-            <FInputGroup
-              name={'name'}
-              medium={true}
-              inputRef={(ref) => (nameFieldRef.current = ref)}
-              fastField
+      {/*----------- Item name ----------*/}
+      <FFormGroup
+        name={'name'}
+        label={<T id={'item_name'} />}
+        labelInfo={<FieldRequiredHint />}
+        inline={true}
+        fill
+        fastField
+      >
+        <FInputGroup
+          name={'name'}
+          medium={true}
+          inputRef={(ref) => (nameFieldRef.current = ref)}
+          fastField
+          fill
+        />
+      </FFormGroup>
+
+      {/*----------- SKU ----------*/}
+      <FFormGroup
+        name={'code'}
+        label={<T id={'item_code'} />}
+        inline={true}
+        fill
+        fastField
+      >
+        <FInputGroup name={'code'} medium={true} fastField fill />
+      </FFormGroup>
+
+      {/*----------- Item category ----------*/}
+      <FFormGroup
+        name={'category_id'}
+        label={<T id={'category'} />}
+        inline={true}
+        fill
+      >
+        <FSelect
+          name={'category_id'}
+          items={itemsCategories}
+          valueAccessor={'id'}
+          textAccessor={'name'}
+          placeholder={<T id={'select_category'} />}
+          popoverProps={{ minimal: true, captureDismiss: true }}
+          fill
+        />
+      </FFormGroup>
+
+      {/*----------- Active ----------*/}
+      <FastField name={'active'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup inline={true} className={'form-group--active'}>
+            <Checkbox
+              inline={true}
+              label={<T id={'active'} />}
+              name={'active'}
+              {...field}
             />
-          </FFormGroup>
-
-          {/*----------- SKU ----------*/}
-          <FFormGroup
-            name={'code'}
-            label={<T id={'item_code'} />}
-            inline={true}
-            fastField
-          >
-            <FInputGroup name={'code'} medium={true} fastField />
-          </FFormGroup>
-
-          {/*----------- Item category ----------*/}
-          <FFormGroup
-            name={'category_id'}
-            label={<T id={'category'} />}
-            inline={true}
-          >
-            <FSelect
-              name={'category_id'}
-              items={itemsCategories}
-              valueAccessor={'id'}
-              textAccessor={'name'}
-              placeholder={<T id={'select_category'} />}
-              popoverProps={{ minimal: true, captureDismiss: true }}
-            />
-          </FFormGroup>
-        </Col>
-
-        <Col xs={3}>
-          {/* <Dragzone
-            initialFiles={initialAttachmentFiles}
-            onDrop={handleDropFiles}
-            onDeleteFile={handleDeleteFile}
-            hint={'Attachments: Maxiumum size: 20MB'}
-            className={'mt2'}
-          /> */}
-        </Col>
-      </Row>
-    </div>
+          </FormGroup>
+        )}
+      </FastField>
+    </Box>
   );
 }

packages/webapp/src/containers/Items/ItemFormBody.tsx

@@ -1,246 +0,0 @@
-// @ts-nocheck
-import React from 'react';
-import { useFormikContext, FastField, ErrorMessage } from 'formik';
-import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
-import {
-  AccountsSelect,
-  MoneyInputGroup,
-  FMoneyInputGroup,
-  Col,
-  Row,
-  Hint,
-  InputPrependText,
-  FFormGroup,
-  FTextArea,
-} from '@/components';
-import { FormattedMessage as T } from '@/components';
-
-import { useItemFormContext } from './ItemFormProvider';
-import { withCurrentOrganization } from '@/containers/Organization/withCurrentOrganization';
-import { ACCOUNT_PARENT_TYPE } from '@/constants/accountTypes';
-import {
-  sellDescriptionFieldShouldUpdate,
-  sellAccountFieldShouldUpdate,
-  sellPriceFieldShouldUpdate,
-  costPriceFieldShouldUpdate,
-  costAccountFieldShouldUpdate,
-  purchaseDescFieldShouldUpdate,
-  taxRateFieldShouldUpdate,
-} from './utils';
-import { compose, inputIntent } from '@/utils';
-import { TaxRatesSelect } from '@/components/TaxRates/TaxRatesSelect';
-
-/**
- * Item form body.
- */
-function ItemFormBody({ organization: { base_currency } }) {
-  const { accounts, taxRates } = useItemFormContext();
-  const { values } = useFormikContext();
-
-  return (
-    <div class="page-form__section page-form__section--selling-cost">
-      <Row>
-        <Col xs={6}>
-          {/*------------- Purchasable checbox ------------- */}
-          <FastField name={'sellable'} type="checkbox">
-            {({ form, field }) => (
-              <FormGroup inline={true} className={'form-group--sellable'}>
-                <Checkbox
-                  inline={true}
-                  label={
-                    <h3>
-                      <T id={'i_sell_this_item'} />
-                    </h3>
-                  }
-                  name={'sellable'}
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------- Selling price ------------- */}
-          <FFormGroup
-            name={'sell_price'}
-            label={<T id={'selling_price'} />}
-            inline
-            fastField
-          >
-            <ControlGroup>
-              <InputPrependText text={base_currency} />
-              <FMoneyInputGroup
-                name={'sell_price'}
-                shouldUpdate={sellPriceFieldShouldUpdate}
-                sellable={values.sellable}
-                inputGroupProps={{ fill: true }}
-                disabled={!values.sellable}
-                fastField
-              />
-            </ControlGroup>
-          </FFormGroup>
-
-          {/*------------- Selling account ------------- */}
-          <FFormGroup
-            label={<T id={'account'} />}
-            name={'sell_account_id'}
-            labelInfo={
-              <Hint content={<T id={'item.field.sell_account.hint'} />} />
-            }
-            inline={true}
-            items={accounts}
-            sellable={values.sellable}
-            shouldUpdate={sellAccountFieldShouldUpdate}
-            fastField={true}
-          >
-            <AccountsSelect
-              name={'sell_account_id'}
-              items={accounts}
-              placeholder={<T id={'select_account'} />}
-              disabled={!values.sellable}
-              filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
-              fill={true}
-              allowCreate={true}
-              fastField={true}
-            />
-          </FFormGroup>
-
-          {/*------------- Sell Tax Rate ------------- */}
-          <FFormGroup
-            name={'sell_tax_rate_id'}
-            label={'Tax Rate'}
-            inline={true}
-          >
-            <TaxRatesSelect
-              name={'sell_tax_rate_id'}
-              items={taxRates}
-              allowCreate
-            />
-          </FFormGroup>
-
-          <FFormGroup
-            name={'sell_description'}
-            label={<T id={'description'} />}
-            inline={true}
-            sellable={values.sellable}
-            shouldUpdate={sellDescriptionFieldShouldUpdate}
-            fastField
-          >
-            <FTextArea
-              name={'sell_description'}
-              growVertically={true}
-              height={280}
-              disabled={!values.sellable}
-              fill
-              fastField
-            />
-          </FFormGroup>
-        </Col>
-
-        <Col xs={6}>
-          {/*------------- Sellable checkbox ------------- */}
-          <FastField name={'purchasable'} type={'checkbox'}>
-            {({ field }) => (
-              <FormGroup inline={true} className={'form-group--purchasable'}>
-                <Checkbox
-                  inline={true}
-                  label={
-                    <h3>
-                      <T id={'i_purchase_this_item'} />
-                    </h3>
-                  }
-                  {...field}
-                />
-              </FormGroup>
-            )}
-          </FastField>
-
-          {/*------------- Cost price ------------- */}
-          <FFormGroup
-            name={'cost_price'}
-            label={<T id={'cost_price'} />}
-            inline
-            fastField
-          >
-            <ControlGroup>
-              <InputPrependText text={base_currency} />
-
-              <FMoneyInputGroup
-                name={'cost_price'}
-                shouldUpdate={costPriceFieldShouldUpdate}
-                purchasable={values.purchasable}
-                inputGroupProps={{ medium: true }}
-                disabled={!values.purchasable}
-                fastField
-              />
-            </ControlGroup>
-          </FFormGroup>
-
-          {/*------------- Cost account ------------- */}
-          <FFormGroup
-            name={'cost_account_id'}
-            purchasable={values.purchasable}
-            items={accounts}
-            shouldUpdate={costAccountFieldShouldUpdate}
-            label={<T id={'account'} />}
-            labelInfo={
-              <Hint content={<T id={'item.field.cost_account.hint'} />} />
-            }
-            inline={true}
-            fastField={true}
-          >
-            <AccountsSelect
-              name={'cost_account_id'}
-              items={accounts}
-              placeholder={<T id={'select_account'} />}
-              filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
-              popoverFill={true}
-              allowCreate={true}
-              fastField={true}
-              disabled={!values.purchasable}
-              purchasable={values.purchasable}
-              shouldUpdate={costAccountFieldShouldUpdate}
-            />
-          </FFormGroup>
-
-          {/*------------- Purchase Tax Rate ------------- */}
-          <FFormGroup
-            name={'purchase_tax_rate_id'}
-            label={'Tax Rate'}
-            inline={true}
-            fastField={true}
-            shouldUpdateDeps={{ taxRates }}
-            shouldUpdate={taxRateFieldShouldUpdate}
-          >
-            <TaxRatesSelect
-              name={'purchase_tax_rate_id'}
-              items={taxRates}
-              allowCreate={true}
-              fastField={true}
-              shouldUpdateDeps={{ taxRates }}
-            />
-          </FFormGroup>
-
-          <FFormGroup
-            name={'purchase_description'}
-            label={<T id={'description'} />}
-            className={'form-group--purchase-description'}
-            helperText={<ErrorMessage name={'description'} />}
-            inline={true}
-            purchasable={values.purchasable}
-            shouldUpdate={purchaseDescFieldShouldUpdate}
-          >
-            <FTextArea
-              name={'purchase_description'}
-              growVertically={true}
-              height={280}
-              disabled={!values.purchasable}
-              fill
-            />
-          </FFormGroup>
-        </Col>
-      </Row>
-    </div>
-  );
-}
-
-export default compose(withCurrentOrganization())(ItemFormBody);

packages/webapp/src/containers/Items/ItemFormContent.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import { Tab, Tabs } from "@blueprintjs/core";
+import { Card, Group } from "@/components";
+import { useState } from "react";
+import { css } from '@emotion/css';
+import { ItemFormFloatingActions } from "./ItemFormFloatingActions";
+import { ItemFormSections } from "./ItemFormFields";
+
+export function ItemFormContent() {
+  const [selectedTabId, setSelectedTabId] = useState('primary');
+
+  const handleTabChange = (tabId) => {
+    const sectionId = String(tabId);
+    setSelectedTabId(sectionId);
+
+    const section = document.querySelector(
+      `[data-section-id="${sectionId}"]`,
+    );
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <Card className={css`padding-bottom: 0 !important;`}>
+      <Group verticalAlign={'top'} alignItems={'flex-start'} flexWrap={'nowrap'}>
+        <Tabs
+          selectedTabId={selectedTabId}
+          onChange={handleTabChange}
+          className={css`position: sticky; top: 20px;`}
+          vertical
+        >
+          <Tab id={'primary'} title={'Basic'} />
+          <Tab id={'selling'} title={'Selling'} />
+          <Tab id={'purchasing'} title={'Purchasing'} />
+          <Tab id={'inventory'} title={'Inventory'} />
+        </Tabs>
+
+        <ItemFormSections />
+      </Group>
+      <ItemFormFloatingActions />
+    </Card>
+  )
+}

packages/webapp/src/containers/Items/ItemFormFields.tsx

@@ -0,0 +1,30 @@
+// @ts-nocheck
+import { Divider } from '@blueprintjs/core';
+import { css } from '@emotion/css';
+import { Box } from '@/components';
+
+import { ItemFormBasicSection } from './ItemFormBasicSection';
+import { ItemFormSellingSection } from './ItemFormSellingSection';
+import { ItemFormPurchasingSection } from './ItemFormPurchasingSection';
+import { ItemFormInventorySection } from './ItemFormInventorySection';
+
+const itemFormSectionDividerClass = css`
+  margin: 20px 0;
+`;
+
+export function ItemFormSections() {
+  return (
+    <Box>
+      <ItemFormBasicSection />
+      <Divider className={itemFormSectionDividerClass} />
+
+      <ItemFormSellingSection />
+      <Divider className={itemFormSectionDividerClass} />
+
+      <ItemFormPurchasingSection />
+      <Divider className={itemFormSectionDividerClass} />
+
+      <ItemFormInventorySection />
+    </Box>
+  );
+}

packages/webapp/src/containers/Items/ItemFormFloatingActions.tsx

@@ -1,89 +1,83 @@
 // @ts-nocheck
-import React from 'react';
+import {
+  Intent,
+  Button,
+  ButtonGroup,
+  Popover,
+  PopoverInteractionKind,
+  Position,
+  Menu,
+  MenuItem,
+} from '@blueprintjs/core';
 import styled from 'styled-components';
-import classNames from 'classnames';
-import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
-import { FastField, useFormikContext } from 'formik';
-import { CLASSES } from '@/constants/classes';
+import { useFormikContext } from 'formik';
+
+import { Group, Icon, FormattedMessage as T } from '@/components';
 import { useItemFormContext } from './ItemFormProvider';
-import { Group, FormattedMessage as T } from '@/components';
-import { saveInvoke } from '@/utils';
 
 /**
- * Item form floating actions.
+ * Item form floating actions bar.
  */
-export default function ItemFormFloatingActions({ onCancel }) {
-  // Item form context.
-  const { setSubmitPayload, isNewMode } = useItemFormContext();
-
+export function ItemFormFloatingActions() {
   // Formik context.
   const { isSubmitting, submitForm } = useFormikContext();
 
-  // Handle cancel button click.
-  const handleCancelBtnClick = (event) => {
-    saveInvoke(onCancel, event);
-  };
+  // Item form context.
+  const { isNewMode, setSubmitPayload } = useItemFormContext();
 
-  // Handle submit button click.
-  const handleSubmitBtnClick = (event) => {
+  // Handle the submit button.
+  const handleSubmitBtnClick = () => {
     setSubmitPayload({ redirect: true });
   };
 
-  // Handle submit & new button click.
-  const handleSubmitAndNewBtnClick = (event) => {
-    setSubmitPayload({ redirect: false });
+  // Handle the submit & new button click.
+  const handleSubmitAndNewClick = () => {
     submitForm();
+    setSubmitPayload({ redirect: false });
   };
 
   return (
-    <Group
-      spacing={10}
-      className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}
-    >
-      <SaveButton
-        intent={Intent.PRIMARY}
-        disabled={isSubmitting}
-        loading={isSubmitting}
-        onClick={handleSubmitBtnClick}
-        type="submit"
-        className={'btn--submit'}
-      >
-        {isNewMode ? <T id={'save'} /> : <T id={'edit'} />}
-      </SaveButton>
-
-      <Button
-        className={classNames('ml1', 'btn--submit-new')}
-        disabled={isSubmitting}
-        onClick={handleSubmitAndNewBtnClick}
-      >
-        <T id={'save_new'} />
-      </Button>
-
-      <Button
-        disabled={isSubmitting}
-        className={'ml1'}
-        onClick={handleCancelBtnClick}
-      >
-        <T id={'close'} />
-      </Button>
-
-      {/*----------- Active ----------*/}
-      <FastField name={'active'} type={'checkbox'}>
-        {({ field }) => (
-          <FormGroup inline={true} className={'form-group--active'}>
-            <Checkbox
-              inline={true}
-              label={<T id={'active'} />}
-              name={'active'}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </FastField>
-    </Group>
+    <FloatingActionsGroup spacing={10}>
+      <ButtonGroup>
+        {/* ----------- Save and New ----------- */}
+        <Button
+          disabled={isSubmitting}
+          loading={isSubmitting}
+          intent={Intent.PRIMARY}
+          type="submit"
+          onClick={handleSubmitBtnClick}
+          text={!isNewMode ? <T id={'edit'} /> : <T id={'save'} />}
+        />
+        <Popover
+          content={
+            <Menu>
+              <MenuItem
+                text={<T id={'save_and_new'} />}
+                onClick={handleSubmitAndNewClick}
+              />
+            </Menu>
+          }
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.BOTTOM_RIGHT}
+          minimal
+        >
+          <Button
+            disabled={isSubmitting}
+            intent={Intent.PRIMARY}
+            rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+          />
+        </Popover>
+      </ButtonGroup>
+    </FloatingActionsGroup>
   );
 }
 
-const SaveButton = styled(Button)`
-  min-width: 100px;
+const FloatingActionsGroup = styled(Group)`
+  padding: 10px 0;
+  padding-left: 165px;
+  border-top: 1px solid #50555a;
+  position: sticky;
+  bottom: 0;
+  background: var(--color-card-background);
+  z-index: 1;
 `;

packages/webapp/src/containers/Items/ItemFormFormik.tsx

@@ -4,15 +4,13 @@ import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
 import classNames from 'classnames';
+import styled from 'styled-components';
 
 import '@/style/pages/Items/Form.scss';
 
 import { CLASSES } from '@/constants/classes';
 import { AppToaster } from '@/components';
-import ItemFormBody from './ItemFormBody';
-import ItemFormPrimarySection from './ItemFormPrimarySection';
-import ItemFormFloatingActions from './ItemFormFloatingActions';
-import ItemFormInventorySection from './ItemFormInventorySection';
+import { ItemFormContent } from './ItemFormContent';
 
 import {
   transformSubmitRequestErrors,
@@ -37,7 +35,6 @@ export default function ItemFormFormik({
   const {
     itemId,
     item,
-    accounts,
     createItemMutate,
     editItemMutate,
     submitPayload,
@@ -91,7 +88,7 @@ export default function ItemFormFormik({
 
   return (
     <div
-      class={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}
+      className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_ITEM, className)}
     >
       <Formik
         enableReinitialize={true}
@@ -100,15 +97,24 @@ export default function ItemFormFormik({
         onSubmit={handleFormSubmit}
       >
         <Form>
-          <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
-            <ItemFormPrimarySection />
-            <ItemFormBody accounts={accounts} />
-            <ItemFormInventorySection accounts={accounts} />
-          </div>
-
-          <ItemFormFloatingActions onCancel={onCancel} />
+          <ItemFormFields>
+            <ItemFormContent />
+          </ItemFormFields>
         </Form>
       </Formik>
     </div>
   );
 }
+
+const ItemFormFields = styled.div`
+  .bp4-form-content,
+  .bp6-form-content {
+    min-width: 300px;
+  }
+  .bp4-form-group {
+    margin-bottom: 20px;
+  }
+  .bp4-form-group.bp4-inline label.bp4-label {
+    min-width: 140px;
+  }
+`;

packages/webapp/src/containers/Items/ItemFormInventorySection.tsx

@@ -4,8 +4,7 @@ import {
   AccountsSelect,
   FFormGroup,
   FormattedMessage as T,
-  Col,
-  Row,
+  Box,
 } from '@/components';
 
 import { withCurrentOrganization } from '@/containers/Organization/withCurrentOrganization';
@@ -13,43 +12,38 @@ import { accountsFieldShouldUpdate } from './utils';
 import { ACCOUNT_TYPE } from '@/constants/accountTypes';
 import { useItemFormContext } from './ItemFormProvider';
 import { compose } from '@/utils';
+import { ItemFormSectionTitle } from './ItemFormSectionTitle';
 
-/**
- * Item form inventory sections.
- */
-function ItemFormInventorySection({ organization: { base_currency } }) {
+function ItemFormInventorySectionBase() {
   const { accounts } = useItemFormContext();
 
   return (
-    <div class="page-form__section page-form__section--inventory">
-      <h3>
-        <T id={'inventory_information'} />
-      </h3>
+    <Box data-section-id="inventory">
+      <ItemFormSectionTitle>Inventory details</ItemFormSectionTitle>
 
-      <Row>
-        <Col xs={6}>
-          {/*------------- Inventory Account ------------- */}
-          <FFormGroup
-            label={<T id={'inventory_account'} />}
-            name={'inventory_account_id'}
-            items={accounts}
-            fastField={true}
-            shouldUpdate={accountsFieldShouldUpdate}
-            inline={true}
-          >
-            <AccountsSelect
-              name={'inventory_account_id'}
-              items={accounts}
-              placeholder={<T id={'select_account'} />}
-              filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
-              fastField={true}
-              shouldUpdate={accountsFieldShouldUpdate}
-            />
-          </FFormGroup>
-        </Col>
-      </Row>
-    </div>
+      {/*------------- Inventory Account ------------- */}
+      <FFormGroup
+        label={<T id={'inventory_account'} />}
+        name={'inventory_account_id'}
+        items={accounts}
+        fastField={true}
+        shouldUpdate={accountsFieldShouldUpdate}
+        inline={true}
+        fill
+      >
+        <AccountsSelect
+          name={'inventory_account_id'}
+          items={accounts}
+          placeholder={<T id={'select_account'} />}
+          filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
+          fastField={true}
+          shouldUpdate={accountsFieldShouldUpdate}
+        />
+      </FFormGroup>
+    </Box>
   );
 }
 
-export default compose(withCurrentOrganization())(ItemFormInventorySection);
+export const ItemFormInventorySection = compose(withCurrentOrganization())(
+  ItemFormInventorySectionBase,
+);

packages/webapp/src/containers/Items/ItemFormPurchasingSection.tsx

@@ -0,0 +1,142 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext, FastField, ErrorMessage } from 'formik';
+import { FormGroup, Checkbox, ControlGroup } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FMoneyInputGroup,
+  Hint,
+  InputPrependText,
+  FFormGroup,
+  FTextArea,
+  Box,
+} from '@/components';
+import { FormattedMessage as T } from '@/components';
+
+import { useItemFormContext } from './ItemFormProvider';
+import { withCurrentOrganization } from '@/containers/Organization/withCurrentOrganization';
+import { ACCOUNT_PARENT_TYPE } from '@/constants/accountTypes';
+import {
+  costPriceFieldShouldUpdate,
+  costAccountFieldShouldUpdate,
+  purchaseDescFieldShouldUpdate,
+  taxRateFieldShouldUpdate,
+} from './utils';
+import { compose } from '@/utils';
+import { TaxRatesSelect } from '@/components/TaxRates/TaxRatesSelect';
+import { ItemFormSectionTitle } from './ItemFormSectionTitle';
+
+function ItemFormPurchasingSectionBase({ organization: { base_currency } }) {
+  const { accounts, taxRates } = useItemFormContext();
+  const { values } = useFormikContext();
+
+  return (
+    <Box data-section-id="purchasing">
+      <ItemFormSectionTitle>Purchasing details</ItemFormSectionTitle>
+
+      {/*------------- Purchasable checkbox ------------- */}
+      <FastField name={'purchasable'} type={'checkbox'}>
+        {({ field }) => (
+          <FormGroup inline={true} className={'form-group--purchasable'}>
+            <Checkbox
+              inline={true}
+              label={<T id={'i_purchase_this_item'} />}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------- Cost price ------------- */}
+      <FFormGroup
+        name={'cost_price'}
+        label={<T id={'cost_price'} />}
+        inline
+        fill
+        fastField
+      >
+        <ControlGroup fill>
+          <InputPrependText text={base_currency} />
+          <FMoneyInputGroup
+            name={'cost_price'}
+            shouldUpdate={costPriceFieldShouldUpdate}
+            purchasable={values.purchasable}
+            inputGroupProps={{ medium: true }}
+            disabled={!values.purchasable}
+            fastField
+          />
+        </ControlGroup>
+      </FFormGroup>
+
+      {/*------------- Cost account ------------- */}
+      <FFormGroup
+        name={'cost_account_id'}
+        purchasable={values.purchasable}
+        items={accounts}
+        shouldUpdate={costAccountFieldShouldUpdate}
+        label={<T id={'account'} />}
+        labelInfo={
+          <Hint content={<T id={'item.field.cost_account.hint'} />} />
+        }
+        inline={true}
+        fill
+        fastField={true}
+      >
+        <AccountsSelect
+          name={'cost_account_id'}
+          items={accounts}
+          placeholder={<T id={'select_account'} />}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
+          popoverFill={true}
+          allowCreate={true}
+          fastField={true}
+          disabled={!values.purchasable}
+          purchasable={values.purchasable}
+          shouldUpdate={costAccountFieldShouldUpdate}
+        />
+      </FFormGroup>
+
+      {/*------------- Purchase Tax Rate ------------- */}
+      <FFormGroup
+        name={'purchase_tax_rate_id'}
+        label={'Tax Rate'}
+        inline={true}
+        fill
+        fastField={true}
+        shouldUpdateDeps={{ taxRates }}
+        shouldUpdate={taxRateFieldShouldUpdate}
+      >
+        <TaxRatesSelect
+          name={'purchase_tax_rate_id'}
+          items={taxRates}
+          allowCreate={true}
+          fastField={true}
+          shouldUpdateDeps={{ taxRates }}
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'purchase_description'}
+        label={<T id={'description'} />}
+        className={'form-group--purchase-description'}
+        helperText={<ErrorMessage name={'description'} />}
+        inline={true}
+        fill
+        purchasable={values.purchasable}
+        shouldUpdate={purchaseDescFieldShouldUpdate}
+      >
+        <FTextArea
+          name={'purchase_description'}
+          growVertically={true}
+          height={280}
+          disabled={!values.purchasable}
+          fill
+        />
+      </FFormGroup>
+    </Box>
+  );
+}
+
+export const ItemFormPurchasingSection = compose(withCurrentOrganization())(
+  ItemFormPurchasingSectionBase,
+);

packages/webapp/src/containers/Items/ItemFormSectionTitle.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import React from 'react';
+import { css } from '@emotion/css';
+
+const itemFormSectionTitleClass = css`
+  font-size: 14px;
+  color: #8f99a8;
+  margin-bottom: 18px;
+  margin-top: 10px;
+`;
+
+export function ItemFormSectionTitle({ children }: { children: React.ReactNode | string }) {
+  return <h4 className={itemFormSectionTitleClass}>{children}</h4>;
+}

packages/webapp/src/containers/Items/ItemFormSellingSection.tsx

@@ -0,0 +1,135 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext, FastField } from 'formik';
+import { FormGroup, Checkbox, ControlGroup } from '@blueprintjs/core';
+import {
+  AccountsSelect,
+  FMoneyInputGroup,
+  Hint,
+  InputPrependText,
+  FFormGroup,
+  FTextArea,
+  Box,
+} from '@/components';
+import { FormattedMessage as T } from '@/components';
+
+import { useItemFormContext } from './ItemFormProvider';
+import { withCurrentOrganization } from '@/containers/Organization/withCurrentOrganization';
+import { ACCOUNT_PARENT_TYPE } from '@/constants/accountTypes';
+import {
+  sellDescriptionFieldShouldUpdate,
+  sellAccountFieldShouldUpdate,
+  sellPriceFieldShouldUpdate,
+} from './utils';
+import { compose } from '@/utils';
+import { TaxRatesSelect } from '@/components/TaxRates/TaxRatesSelect';
+import { ItemFormSectionTitle } from './ItemFormSectionTitle';
+
+function ItemFormSellingSectionBase({ organization: { base_currency } }) {
+  const { accounts, taxRates } = useItemFormContext();
+  const { values } = useFormikContext();
+
+  return (
+    <Box data-section-id="selling">
+      <ItemFormSectionTitle>Selling details</ItemFormSectionTitle>
+
+      {/*------------- Sellable checkbox ------------- */}
+      <FastField name={'sellable'} type="checkbox">
+        {({ form, field }) => (
+          <FormGroup inline={true} className={'form-group--sellable'}>
+            <Checkbox
+              inline={true}
+              label={<T id={'i_sell_this_item'} />}
+              name={'sellable'}
+              {...field}
+            />
+          </FormGroup>
+        )}
+      </FastField>
+
+      {/*------------- Selling price ------------- */}
+      <FFormGroup
+        name={'sell_price'}
+        label={<T id={'selling_price'} />}
+        inline
+        fill
+        fastField
+      >
+        <ControlGroup fill>
+          <InputPrependText text={base_currency} />
+          <FMoneyInputGroup
+            name={'sell_price'}
+            shouldUpdate={sellPriceFieldShouldUpdate}
+            sellable={values.sellable}
+            inputGroupProps={{ fill: true }}
+            disabled={!values.sellable}
+            fastField
+          />
+        </ControlGroup>
+      </FFormGroup>
+
+      {/*------------- Selling account ------------- */}
+      <FFormGroup
+        label={<T id={'account'} />}
+        name={'sell_account_id'}
+        labelInfo={
+          <Hint content={<T id={'item.field.sell_account.hint'} />} />
+        }
+        inline={true}
+        fill
+        items={accounts}
+        sellable={values.sellable}
+        shouldUpdate={sellAccountFieldShouldUpdate}
+        fastField={true}
+      >
+        <AccountsSelect
+          name={'sell_account_id'}
+          items={accounts}
+          placeholder={<T id={'select_account'} />}
+          disabled={!values.sellable}
+          filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
+          fill={true}
+          allowCreate={true}
+          fastField={true}
+        />
+      </FFormGroup>
+
+      {/*------------- Sell Tax Rate ------------- */}
+      <FFormGroup
+        name={'sell_tax_rate_id'}
+        label={'Tax Rate'}
+        inline={true}
+        fill
+      >
+        <TaxRatesSelect
+          name={'sell_tax_rate_id'}
+          items={taxRates}
+          allowCreate
+        />
+      </FFormGroup>
+
+      <FFormGroup
+        name={'sell_description'}
+        label={<T id={'description'} />}
+        inline={true}
+        fill
+        sellable={values.sellable}
+        shouldUpdate={sellDescriptionFieldShouldUpdate}
+        fastField
+      >
+        <FTextArea
+          name={'sell_description'}
+          growVertically={true}
+          height={280}
+          disabled={!values.sellable}
+          fill
+          fastField
+        />
+      </FFormGroup>
+    </Box>
+  );
+}
+
+export const ItemFormSellingSection = compose(withCurrentOrganization())(
+  ItemFormSellingSectionBase,
+);

packages/webapp/src/style/pages/Items/Form.scss

@@ -1,91 +1,30 @@
-
 .page-form--item {
   $self: '.page-form';
   padding: 20px;
 
-  --x-header-border: #eaeaea;
-  --x-section-border: #eaeaea;
-  
-  .bp4-dark & {
-    --x-header-border: var(--color-dark-gray3);
-    --x-section-border: var(--color-dark-gray3);
-  }
-  
-  #{$self}__header {
-    padding: 0;
-  }
-  #{$self}__primary-section {
-    overflow: hidden;
-    padding-top: 5px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid var(--x-header-border);
-    padding-bottom: 5px;
-    max-width: 1000px;
-  }
+  .bp4-form-group {
+    max-width: 500px;
+    margin-bottom: 14px;
 
-  #{$self}__body {
-    .bp4-form-group {
-      max-width: 500px;
-      margin-bottom: 14px;
-
-      &.bp4-inline {
-        .bp4-label {
-          min-width: 140px;
-        }
-      }
-      .bp4-form-content {
-        width: 100%;
+    &.bp4-inline {
+      .bp4-label {
+        min-width: 140px;
       }
     }
-
-    h3 {
-      font-weight: 500;
-      font-size: 14px;
-      margin-bottom: 1.4rem;
-    }
-
-    .bp4-control {
-      h3 {
-        display: inline;
-        margin-bottom: 0;
-      }
-    }
-
-    .form-group--sellable,
-    .form-group--purchasable {
-      margin-bottom: 1rem;
-    }
-
-    .form-group--purchase-description,
-    .form-group--sell-description{
-      
-      textarea{
-        width: 100%;
-      }
+    .bp4-form-content {
+      width: 100%;
     }
   }
 
-  #{$self}__section {
-    max-width: 850px;
+  .form-group--sellable,
+  .form-group--purchasable {
     margin-bottom: 1rem;
-
-    .bp4-form-group {
-      max-width: 400px;
-    }
-
-    &--selling-cost {
-      border-bottom: 1px solid var(--x-section-border);
-      margin-bottom: 1.25rem;
-      padding-bottom: 0.25rem;
-    }
   }
 
-  #{$self}__floating-actions {
-
-    .form-group--active {
-      display: inline-block;
-      margin: 0;
-      margin-left: 20px;
+  .form-group--purchase-description,
+  .form-group--sell-description {
+    textarea {
+      width: 100%;
     }
   }