From 201cd8e09f3b966ce6b0264db2ea06c385010785 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 11:19:27 -0500
Subject: [PATCH 01/91] LF-4477 Add expandable view to Inventory container

---
 .../containers/Animals/Inventory/index.tsx    | 31 ++++++++++++++++++-
 .../Animals/Inventory/styles.module.scss      | 29 +++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 53165a68fc..426a380a6e 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -40,10 +40,14 @@ import {
 import { isAdminSelector } from '../../userFarmSlice';
 import { useAnimalsFilterReduxState } from './KPI/useAnimalsFilterReduxState';
 import FloatingContainer from '../../../components/FloatingContainer';
+import ExpandableItem from '../../../components/Expandable/ExpandableItem';
+import useExpandable from '../../../components/Expandable/useExpandableItem';
+import clsx from 'clsx';
 
 export enum View {
   DEFAULT = 'default',
   TASK = 'task',
+  TASK_SUMMARY = 'task_summary',
 }
 interface AnimalInventoryProps {
   preSelectedIds?: string[];
@@ -70,7 +74,8 @@ function AnimalInventory({
   isCompactSideMenu,
   history,
 }: AnimalInventoryProps) {
-  const isTaskView = view === View.TASK;
+  const isTaskView = [View.TASK, View.TASK_SUMMARY].includes(view);
+  const isSummaryView = view === View.TASK_SUMMARY;
 
   const [selectedInventoryIds, setSelectedInventoryIds] = useState<string[]>(preSelectedIds);
 
@@ -288,4 +293,28 @@ function AnimalInventory({
   );
 }
 
+export function ExpandableAnimalInventory(props: AnimalInventoryProps) {
+  const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
+  const isExpanded = expandedIds.includes(1);
+  return (
+    <div className={clsx(styles.section, isExpanded && styles.expanded)}>
+      {/* @ts-ignore */}
+      <ExpandableItem
+        isExpanded={isExpanded}
+        onClick={() => toggleExpanded(1)}
+        mainContent={'See detail list of animals to move'}
+        expandedContent={
+          <div className={styles.expandedContentWrapper}>
+            <AnimalInventory {...props} />
+          </div>
+        }
+        iconClickOnly={false}
+        // classes = {},
+        itemKey={1}
+        // leftCollapseIcon = false,
+      />
+    </div>
+  );
+}
+
 export default AnimalInventory;
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 871cdaed86..463c6ca20e 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -29,6 +29,35 @@
   }
 }
 
+.taskViewHeight {
+  height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
+}
+
+.section {
+  margin-top: 16px;
+  padding: 16px;
+  background: var(--White);
+  border-radius: 4px;
+  border: 1px solid var(--Colors-Neutral-Neutral-100);
+}
+
+.expanded {
+  border: 1px solid var(--Form-focus);
+  box-shadow: 0px 0px 4px 0px var(--Colors-Neutral-Neutral-200);
+}
+
+.expandedContentWrapper {
+  margin-top: 16px;
+}
+
+.detailsWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: var(--White);
+}
+
 .taskViewHeight {
   height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
 }
\ No newline at end of file

From d33ecf356e7ab6c9ab7fa889859a33e28f35f32c Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 11:24:26 -0500
Subject: [PATCH 02/91] LF-4477 Add animals inventory to task locations

---
 .../webapp/src/components/Task/TaskLocations/index.jsx   | 9 ++++++++-
 .../webapp/src/containers/Task/TaskLocations/index.jsx   | 3 +++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index dc2d78f026..b0d1a8bc9c 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { useForm } from 'react-hook-form';
 import { cloneObject } from '../../../util';
 import Checkbox from '../../Form/Checkbox';
+import { ExpandableAnimalInventory, View } from '../../../containers/Animals/Inventory';
 export default function PureTaskLocations({
   locations,
   readOnlyPinCoordinates,
@@ -24,6 +25,7 @@ export default function PureTaskLocations({
   maxZoom,
   defaultLocation,
   targetsWildCrop,
+  isAnimalTask = false,
 }) {
   const { t } = useTranslation();
   const progress = 43;
@@ -124,7 +126,12 @@ export default function PureTaskLocations({
           title={t('MANAGEMENT_DETAIL.ADD_A_TASK')}
           value={progress}
         />
-
+        {isAnimalTask && (
+          <ExpandableAnimalInventory
+            view={View.TASK_SUMMARY}
+            preSelectedIds={persistedFormData?.animalIds || []}
+          />
+        )}
         <Main style={{ marginTop: '24px', marginBottom: '24px' }}>
           {title || t('TASK.SELECT_TASK_LOCATIONS')}
         </Main>
diff --git a/packages/webapp/src/containers/Task/TaskLocations/index.jsx b/packages/webapp/src/containers/Task/TaskLocations/index.jsx
index c3a5b7fbfc..f2f07298b9 100644
--- a/packages/webapp/src/containers/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/containers/Task/TaskLocations/index.jsx
@@ -156,6 +156,7 @@ function TaskAnimalLocations({ history, location }) {
       title={t('TASK.ANIMAL_MOVING_TO_LOCATION')}
       onContinue={onContinue}
       location={location}
+      isAnimalTask={true}
     />
   );
 }
@@ -206,6 +207,7 @@ function TaskLocations({
   onContinue,
   readOnlyPinCoordinates,
   location,
+  isAnimalTask = false,
 }) {
   const { grid_points } = useSelector(userFarmSelector);
   const { maxZoomRef, getMaxZoom, maxZoom } = useMaxZoom();
@@ -231,6 +233,7 @@ function TaskLocations({
         maxZoom={maxZoom}
         defaultLocation={location?.state?.location ?? null}
         targetsWildCrop={managementPlan?.crop_management_plan?.is_wild ?? false}
+        isAnimalTask={isAnimalTask}
       />
     </HookFormPersistProvider>
   );

From 594fc02495258294354f6b7a02ad39caab30bf32 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 15:14:57 -0500
Subject: [PATCH 03/91] LF-4477 Hide search and row selection in summary view

---
 .../components/Animals/Inventory/index.tsx    | 68 ++++++++++---------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index 400a736c54..fd042af694 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -83,7 +83,9 @@ const PureAnimalInventory = ({
   view?: View;
 }) => {
   const { t } = useTranslation();
-  const isTaskView = view === View.TASK;
+  const isTaskView = [View.TASK, View.TASK_SUMMARY].includes(view);
+  const isSummaryView = view === View.TASK_SUMMARY;
+
   if (isLoading) {
     return null;
   }
@@ -94,41 +96,45 @@ const PureAnimalInventory = ({
   const tableMaxHeight = !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight;
   const tableSpacerRowHeight = !isTaskView ? (isDesktop ? 96 : 120) : 0;
 
+  const showInventorySelection = isAdmin && !isSummaryView;
+
   return (
     <>
-      <div
-        className={clsx(
-          isDesktop ? styles.searchAndFilterDesktop : styles.searchAndFilter,
-          styles.searchAndFilterCommon,
-        )}
-      >
-        <PureSearchBarWithBackdrop
-          value={searchString}
-          onChange={(e: any) => setSearchString(e.target.value)}
-          isSearchActive={!!searchString}
-          placeholderText={placeHolderText}
-          zIndexBase={zIndexBase}
-          isDesktop={isDesktop}
-          className={clsx(isDesktop ? styles.searchBarDesktop : styles.searchBar)}
-        />
-        <AnimalsFilter isFilterActive={isFilterActive} />
+      {!isSummaryView && (
         <div
           className={clsx(
-            isDesktop ? styles.searchResultsDesktop : styles.searchResults,
-            styles.searchResultsText,
-            isFilterActive ? styles.filterActive : '',
+            isDesktop ? styles.searchAndFilterDesktop : styles.searchAndFilter,
+            styles.searchAndFilterCommon,
           )}
         >
-          {searchResultsText}
-        </div>
-        <div className={isDesktop ? styles.clearButtonWrapperDesktop : ''}>
-          <ClearFiltersButton
-            type={isDesktop ? ClearFiltersButtonType.TEXT : ClearFiltersButtonType.ICON}
-            isFilterActive={isFilterActive}
-            onClick={clearFilters}
+          <PureSearchBarWithBackdrop
+            value={searchString}
+            onChange={(e: any) => setSearchString(e.target.value)}
+            isSearchActive={!!searchString}
+            placeholderText={placeHolderText}
+            zIndexBase={zIndexBase}
+            isDesktop={isDesktop}
+            className={clsx(isDesktop ? styles.searchBarDesktop : styles.searchBar)}
           />
+          <AnimalsFilter isFilterActive={isFilterActive} />
+          <div
+            className={clsx(
+              isDesktop ? styles.searchResultsDesktop : styles.searchResults,
+              styles.searchResultsText,
+              isFilterActive ? styles.filterActive : '',
+            )}
+          >
+            {searchResultsText}
+          </div>
+          <div className={isDesktop ? styles.clearButtonWrapperDesktop : ''}>
+            <ClearFiltersButton
+              type={isDesktop ? ClearFiltersButtonType.TEXT : ClearFiltersButtonType.ICON}
+              isFilterActive={isFilterActive}
+              onClick={clearFilters}
+            />
+          </div>
         </div>
-      </div>
+      )}
       <div className={clsx(isDesktop ? '' : styles.tableWrapper, styles.tableWrapperCommon)}>
         {!totalInventoryCount || hasSearchResults ? (
           <Table
@@ -140,9 +146,9 @@ const PureAnimalInventory = ({
             minRows={totalInventoryCount}
             dense={false}
             showHeader={isDesktop}
-            onCheck={isAdmin ? onSelectInventory : undefined}
-            handleSelectAllClick={isAdmin ? handleSelectAllClick : undefined}
-            selectedIds={isAdmin ? selectedIds : undefined}
+            onCheck={showInventorySelection ? onSelectInventory : undefined}
+            handleSelectAllClick={showInventorySelection ? handleSelectAllClick : undefined}
+            selectedIds={showInventorySelection ? selectedIds : undefined}
             stickyHeader={isDesktop}
             maxHeight={tableMaxHeight}
             spacerRowHeight={tableSpacerRowHeight}

From 31e9b0e8e4d152d45d99080e2483c2e442441d38 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 15:17:34 -0500
Subject: [PATCH 04/91] LF-4477 Add new filter criteria to only show all
 selected ids

---
 .../Animals/Inventory/useFilteredInventory.ts      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index c13f2f4e60..12537fd2f1 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -22,7 +22,19 @@ import { animalMatchesFilter } from '../../Filter/Animals/utils';
 import { animalsFilterSelector } from '../../filterSlice';
 import { isInactive } from '../../Filter/utils';
 
-export const useFilteredInventory = (inventory: AnimalInventory[]) => {
+export const useFilteredInventory = (
+  inventory: AnimalInventory[],
+  isSummaryView: boolean,
+  selectedInventoryIds: string[],
+) => {
+  if (isSummaryView) {
+    return useMemo(() => {
+      return inventory.filter((entity) => {
+        return selectedInventoryIds.includes(entity.id);
+      });
+    }, [selectedInventoryIds]);
+  }
+
   const {
     [AnimalsFilterKeys.ANIMAL_OR_BATCH]: animalsOrBatchesFilter,
     [AnimalsFilterKeys.TYPE]: typesFilter,

From 3d8ded1f587978de4c5f7236ab31488463211e23 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 15:19:19 -0500
Subject: [PATCH 05/91] LF-4477 Pass values to updated filter hook and add new
 option to do nothing for row selection behaviour

---
 .../src/containers/Animals/Inventory/index.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 426a380a6e..54163adc71 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -91,7 +91,7 @@ function AnimalInventory({
 
   const { inventory, isLoading } = useAnimalInventory();
 
-  const filteredInventory = useFilteredInventory(inventory);
+  const filteredInventory = useFilteredInventory(inventory, isSummaryView, selectedInventoryIds);
 
   const isFilterActive = useSelector(isFilterCurrentlyActiveSelector('animals'));
   const dispatch = useDispatch();
@@ -222,7 +222,15 @@ function AnimalInventory({
   };
 
   const onRowClick = (event: ChangeEvent<HTMLInputElement>, row: AnimalInventory) => {
-    !isTaskView ? history.push(row.path) : onSelectInventory(event, row);
+    switch (view) {
+      case View.TASK:
+        onSelectInventory(event, row);
+        break;
+      case View.TASK_SUMMARY:
+        break;
+      default:
+        history.push(row.path);
+    }
   };
 
   const iconActions: iconAction[] = [

From f5adf8e1dd567b2925ffe82868eb7dbe185c4aff Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 6 Nov 2024 20:01:40 -0500
Subject: [PATCH 06/91] LF-4477 Extend pill to allow classname

---
 packages/webapp/src/components/Pill/index.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Pill/index.jsx b/packages/webapp/src/components/Pill/index.jsx
index 7bed612e53..704bf99baf 100644
--- a/packages/webapp/src/components/Pill/index.jsx
+++ b/packages/webapp/src/components/Pill/index.jsx
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
 
-const Pill = ({ body, active, spaceBefore }) => {
+const Pill = ({ body, active, spaceBefore, className }) => {
   return (
     <span
       className={clsx(
         styles.pill,
         active ? styles.active : styles.inactive,
         spaceBefore && styles.spaceBefore,
+        className,
       )}
     >
       {body}

From 9df06ac75b03493f6b221f2fd294ee78589c0ad2 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 8 Nov 2024 10:44:14 -0500
Subject: [PATCH 07/91] LF-4477 Add list view option and add styles for desktop

---
 .../webapp/src/components/Table/TableV2.jsx   |  5 +++
 .../src/components/Table/styles.module.scss   | 31 +++++++++++++++++++
 packages/webapp/src/components/Table/types.ts |  1 +
 3 files changed, 37 insertions(+)

diff --git a/packages/webapp/src/components/Table/TableV2.jsx b/packages/webapp/src/components/Table/TableV2.jsx
index f22c79233f..02e954e312 100644
--- a/packages/webapp/src/components/Table/TableV2.jsx
+++ b/packages/webapp/src/components/Table/TableV2.jsx
@@ -101,6 +101,7 @@ export default function TableV2(props) {
     maxHeight,
     spacerRowHeight,
     headerClass,
+    listView,
   } = props;
 
   const [order, setOrder] = useState('asc');
@@ -168,6 +169,7 @@ export default function TableV2(props) {
             styles.table,
             shouldFixTableLayout && styles.fixed,
             alternatingRowColor && styles.alternatingRowColorStyle,
+            listView && styles.listViewTable,
           )}
           stickyHeader={stickyHeader && maxHeight ? true : false}
         >
@@ -200,6 +202,7 @@ export default function TableV2(props) {
                     styles.itemRow,
                     onRowClick && styles.clickable,
                     alternatingRowColor ? styles.alternatingRowColor : styles.plainRowColor,
+                    listView && styles.listViewRow,
                   )}
                 >
                   {shouldShowCheckbox && (
@@ -331,6 +334,7 @@ TableV2.propTypes = {
   spacerRowHeight: PropTypes.number,
   /** Cheating here  using any since it is not meshing well with ts type */
   headerClass: PropTypes.any,
+  listView: PropTypes.bool,
 };
 
 TableV2.defaultProps = {
@@ -342,4 +346,5 @@ TableV2.defaultProps = {
   defaultOrderBy: '',
   alternatingRowColor: false,
   showHeader: true,
+  listView: false,
 };
diff --git a/packages/webapp/src/components/Table/styles.module.scss b/packages/webapp/src/components/Table/styles.module.scss
index 6e6834e7c8..f747f3e546 100644
--- a/packages/webapp/src/components/Table/styles.module.scss
+++ b/packages/webapp/src/components/Table/styles.module.scss
@@ -121,6 +121,37 @@
   }
 }
 
+.listViewRow {
+  padding: 4px 8px;
+  border-spacing: 8px;
+  border: solid 1px var(---Colors-Neutral-Neutral-50);
+  &.clickable {
+    cursor: default;
+  }
+  & > td {
+    border-top: solid 1px var(--Colors-Neutral-Neutral-50);
+    border-bottom: solid 1px var(--Colors-Neutral-Neutral-50);
+
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+      border: solid 1px var(--Colors-Neutral-Neutral-50);
+      border-right: none;
+    }
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+      border: solid 1px var(--Colors-Neutral-Neutral-50);
+      border-left: none;
+    }
+  };
+}
+
+.listViewTable {
+  border-spacing: 0 8px;
+  .tableBody::before {
+    content: none;
+  }
+}
+
 .tableCell {
   padding: 0 12px;
   height: 56px;
diff --git a/packages/webapp/src/components/Table/types.ts b/packages/webapp/src/components/Table/types.ts
index 8e5a0f6ae2..476dd41350 100644
--- a/packages/webapp/src/components/Table/types.ts
+++ b/packages/webapp/src/components/Table/types.ts
@@ -85,4 +85,5 @@ export type TableV2Props<RowData extends TableRowData> = {
   maxHeight?: number | string;
   spacerRowHeight?: number;
   headerClass?: ClassValue;
+  listView?: boolean;
 };

From 524df8318b06f6f30c958c05ff8acf7eb014c52b Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 8 Nov 2024 10:47:46 -0500
Subject: [PATCH 08/91] LF-4477 Hide alternating color and use table list view
 in summary view

---
 packages/webapp/src/components/Animals/Inventory/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index fd042af694..a25fa60b14 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -94,6 +94,7 @@ const PureAnimalInventory = ({
   const hasSearchResults = filteredInventory.length !== 0;
 
   const tableMaxHeight = !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight;
+
   const tableSpacerRowHeight = !isTaskView ? (isDesktop ? 96 : 120) : 0;
 
   const showInventorySelection = isAdmin && !isSummaryView;
@@ -139,13 +140,13 @@ const PureAnimalInventory = ({
         {!totalInventoryCount || hasSearchResults ? (
           <Table
             kind={TableKind.V2}
-            alternatingRowColor={true}
+            alternatingRowColor={!isSummaryView && true}
             columns={animalsColumns}
             data={filteredInventory}
             shouldFixTableLayout={isDesktop}
             minRows={totalInventoryCount}
             dense={false}
-            showHeader={isDesktop}
+            showHeader={isDesktop && !isSummaryView}
             onCheck={showInventorySelection ? onSelectInventory : undefined}
             handleSelectAllClick={showInventorySelection ? handleSelectAllClick : undefined}
             selectedIds={showInventorySelection ? selectedIds : undefined}
@@ -154,6 +155,7 @@ const PureAnimalInventory = ({
             spacerRowHeight={tableSpacerRowHeight}
             headerClass={styles.headerClass}
             onRowClick={onRowClick}
+            listView={isSummaryView}
           />
         ) : (
           <NoSearchResults

From f586f65cb35c239a6e8a1b062f47254d39c4bfaa Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 13:51:44 -0500
Subject: [PATCH 09/91] LF-4483 Set a minimum height on location picker map

---
 packages/webapp/src/assets/variables.scss                        | 1 +
 .../LocationPicker/SingleLocationPicker/styles.module.scss       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/webapp/src/assets/variables.scss b/packages/webapp/src/assets/variables.scss
index f3c5b88e37..9f92e959e4 100644
--- a/packages/webapp/src/assets/variables.scss
+++ b/packages/webapp/src/assets/variables.scss
@@ -4,6 +4,7 @@
     // GLOBAL CSS VARIABLES
     --global-navbar-height: 64px;
     --global-map-header-height: 48px;
+    --global-min-location-picker-height: 150px;
     --global-side-menu-width: 188px;
     --global-compact-side-menu-width: 80px;
     // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding
diff --git a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
index 19db1b94f3..ac4c679006 100644
--- a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
+++ b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
@@ -3,4 +3,5 @@
     margin-bottom: 16px;
     flex-grow: 1;
     display: flex;
+    min-height: var(--global-min-location-picker-height);
 }

From 0790dfc266d11e665346c3a6c5323b9e4221824d Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 13:55:20 -0500
Subject: [PATCH 10/91] LF-4483 Add basic desktop styles to animal inventory
 summary view, rename the animal inventory type to avoid name clash

---
 .../containers/Animals/Inventory/index.tsx    | 46 ++++++++++++-------
 .../Animals/Inventory/styles.module.scss      | 42 ++++++++++++++---
 2 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 54163adc71..a9f56e6688 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -22,7 +22,7 @@ import { History } from 'history';
 import Cell from '../../../components/Table/Cell';
 import { CellKind } from '../../../components/Table/types';
 import useAnimalInventory from './useAnimalInventory';
-import type { AnimalInventory } from './useAnimalInventory';
+import type { AnimalInventory as AnimalInventoryType } from './useAnimalInventory';
 import ActionMenu, { iconAction } from '../../../components/ActionMenu';
 import FixedHeaderContainer, {
   ContainerKind,
@@ -42,6 +42,7 @@ import { useAnimalsFilterReduxState } from './KPI/useAnimalsFilterReduxState';
 import FloatingContainer from '../../../components/FloatingContainer';
 import ExpandableItem from '../../../components/Expandable/ExpandableItem';
 import useExpandable from '../../../components/Expandable/useExpandableItem';
+import Pill from '../../../components/Pill';
 import clsx from 'clsx';
 
 export enum View {
@@ -58,7 +59,7 @@ interface AnimalInventoryProps {
   history: History;
 }
 
-const getVisibleSelectedIds = (visibleRowData: AnimalInventory[], selectedIds: string[]) => {
+const getVisibleSelectedIds = (visibleRowData: AnimalInventoryType[], selectedIds: string[]) => {
   if (!visibleRowData.length || !selectedIds.length) {
     return [];
   }
@@ -114,7 +115,7 @@ function AnimalInventory({
       {
         id: 'identification',
         label: t('ANIMAL.ANIMAL_IDENTIFICATION').toLocaleUpperCase(),
-        format: (d: AnimalInventory) => (
+        format: (d: AnimalInventoryType) => (
           <Cell
             kind={CellKind.ICON_TEXT}
             text={d.identification}
@@ -128,17 +129,17 @@ function AnimalInventory({
       {
         id: isDesktop ? 'type' : null,
         label: t('ANIMAL.ANIMAL_TYPE').toLocaleUpperCase(),
-        format: (d: AnimalInventory) => <Cell kind={CellKind.PLAIN} text={d.type} />,
+        format: (d: AnimalInventoryType) => <Cell kind={CellKind.PLAIN} text={d.type} />,
       },
       {
         id: isDesktop ? 'breed' : null,
         label: t('ANIMAL.ANIMAL_BREED').toLocaleUpperCase(),
-        format: (d: AnimalInventory) => <Cell kind={CellKind.PLAIN} text={d.breed} />,
+        format: (d: AnimalInventoryType) => <Cell kind={CellKind.PLAIN} text={d.breed} />,
       },
       {
         id: isDesktop ? 'groups' : null,
         label: t('ANIMAL.ANIMAL_GROUPS').toLocaleUpperCase(),
-        format: (d: AnimalInventory) => (
+        format: (d: AnimalInventoryType) => (
           <Cell
             kind={CellKind.HOVER_PILL_OVERFLOW}
             items={d.groups}
@@ -150,7 +151,9 @@ function AnimalInventory({
       {
         id: !isTaskView ? 'path' : null,
         label: '',
-        format: (d: AnimalInventory) => <Cell kind={CellKind.RIGHT_CHEVRON_LINK} path={d.path} />,
+        format: (d: AnimalInventoryType) => (
+          <Cell kind={CellKind.RIGHT_CHEVRON_LINK} path={d.path} />
+        ),
         columnProps: {
           style: { width: '40px', padding: `0 ${isDesktop ? 12 : 8}px` },
         },
@@ -160,7 +163,7 @@ function AnimalInventory({
     [t, isDesktop],
   );
 
-  const makeAnimalsSearchableString = (animal: AnimalInventory) => {
+  const makeAnimalsSearchableString = (animal: AnimalInventoryType) => {
     return [animal.identification, animal.type, animal.breed, ...animal.groups, animal.count]
       .filter(Boolean)
       .join(' ');
@@ -169,7 +172,7 @@ function AnimalInventory({
   const [searchAndFilteredInventory, searchString, setSearchString] = useSearchFilter(
     filteredInventory,
     makeAnimalsSearchableString,
-  ) as [AnimalInventory[], SearchProps['searchString'], SearchProps['setSearchString']];
+  ) as [AnimalInventoryType[], SearchProps['searchString'], SearchProps['setSearchString']];
 
   const searchProps: SearchProps = {
     searchString,
@@ -180,7 +183,7 @@ function AnimalInventory({
     }),
   };
 
-  const onSelectInventory = (e: ChangeEvent<HTMLInputElement>, row: AnimalInventory): void => {
+  const onSelectInventory = (e: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType): void => {
     const selectedInventoryId = row.id;
     let newIds = selectedInventoryIds.slice();
     if (selectedInventoryIds.includes(selectedInventoryId)) {
@@ -221,7 +224,7 @@ function AnimalInventory({
     }
   };
 
-  const onRowClick = (event: ChangeEvent<HTMLInputElement>, row: AnimalInventory) => {
+  const onRowClick = (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
     switch (view) {
       case View.TASK:
         onSelectInventory(event, row);
@@ -260,9 +263,15 @@ function AnimalInventory({
       header={
         !isTaskView ? <KPI onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} /> : null
       }
-      classes={{ paper: styles.paper }}
+      classes={{ paper: isSummaryView ? styles.removePaper : styles.paper }}
       kind={ContainerKind.PAPER}
-      wrapperClassName={isTaskView ? styles.taskViewHeight : undefined}
+      wrapperClassName={
+        isSummaryView
+          ? styles.summaryViewHeight
+          : isTaskView && !isSummaryView
+            ? styles.taskViewHeight
+            : undefined
+      }
     >
       <PureAnimalInventory
         filteredInventory={searchAndFilteredInventory}
@@ -310,16 +319,21 @@ export function ExpandableAnimalInventory(props: AnimalInventoryProps) {
       <ExpandableItem
         isExpanded={isExpanded}
         onClick={() => toggleExpanded(1)}
-        mainContent={'See detail list of animals to move'}
+        mainContent={
+          <>
+            <div className={styles.blueColor}>See detail list of animals to move</div>
+            <Pill body={'5 animals'} className={styles.pill} />
+          </>
+        }
         expandedContent={
           <div className={styles.expandedContentWrapper}>
             <AnimalInventory {...props} />
           </div>
         }
         iconClickOnly={false}
-        // classes = {},
+        classes={{ mainContentWrapper: styles.mainContentWrapper, icon: styles.blueColor }}
         itemKey={1}
-        // leftCollapseIcon = false,
+        leftCollapseIcon
       />
     </div>
   );
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 463c6ca20e..89f10d07c2 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -29,16 +29,29 @@
   }
 }
 
+.removePaper {
+  border-radius: 0;
+  border: none;
+  margin: 0;
+}
+
 .taskViewHeight {
-  height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
+  max-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
+}
+
+.summaryViewHeight {
+  height: auto;
+  // 58 px is border 2px, expanded content padding 16px, 24px collapse content title, 16px margin between table and title
+  max-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height) - var(--global-min-location-picker-height) - 58px);
 }
 
 .section {
-  margin-top: 16px;
-  padding: 16px;
+  margin-top: 24px;
+  padding: 8px 16px;
   background: var(--White);
-  border-radius: 4px;
-  border: 1px solid var(--Colors-Neutral-Neutral-100);
+  border-radius: 8px;
+  border: 1px solid var(--Colors-Neutral-Neutral-50);
+  gap: 8px;
 }
 
 .expanded {
@@ -58,6 +71,21 @@
   background: var(--White);
 }
 
-.taskViewHeight {
-  height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
+.pill {
+  height: 24px;
+  padding: 8px 16px;
+  background: var(--Colors-Neutral-Neutral-50);
+  color: var(--Colors-Neutral-Neutral-600);
+}
+
+.mainContentWrapper {
+  display: flex;
+  gap: 8px;
+}
+
+.blueColor {
+  color: var(--Colors-Accent---singles-Blue-full);
+  svg {
+    color: var(--Colors-Accent---singles-Blue-full);
+  }
 }
\ No newline at end of file

From d887f770611b1d838752403135addb38ab754c05 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 13:59:57 -0500
Subject: [PATCH 11/91] LF-4483 Fix maxHeight bug with resize observer,
 height:auto and MUI maxHeight not playing well

---
 packages/webapp/src/components/Animals/Inventory/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index a25fa60b14..96dbe048f1 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -93,7 +93,8 @@ const PureAnimalInventory = ({
   const { searchString, setSearchString, placeHolderText, searchResultsText } = searchProps;
   const hasSearchResults = filteredInventory.length !== 0;
 
-  const tableMaxHeight = !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight;
+  const tableMaxHeight =
+    !isDesktop || !containerHeight || isSummaryView ? undefined : containerHeight - usedHeight;
 
   const tableSpacerRowHeight = !isTaskView ? (isDesktop ? 96 : 120) : 0;
 

From 70159708a57b3bec610932781aad6dac4619b6c8 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 19:45:04 -0500
Subject: [PATCH 12/91] LF-4483 Remove table style changes on mobile in summary
 view

---
 packages/webapp/src/components/Animals/Inventory/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index 96dbe048f1..22d28febe9 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -141,7 +141,7 @@ const PureAnimalInventory = ({
         {!totalInventoryCount || hasSearchResults ? (
           <Table
             kind={TableKind.V2}
-            alternatingRowColor={!isSummaryView && true}
+            alternatingRowColor={isSummaryView ? (isDesktop ? false : true) : true}
             columns={animalsColumns}
             data={filteredInventory}
             shouldFixTableLayout={isDesktop}
@@ -156,7 +156,7 @@ const PureAnimalInventory = ({
             spacerRowHeight={tableSpacerRowHeight}
             headerClass={styles.headerClass}
             onRowClick={onRowClick}
-            listView={isSummaryView}
+            listView={isSummaryView && isDesktop}
           />
         ) : (
           <NoSearchResults

From bec922c2b24f9efe37fed2caa1b954e44b56ef1c Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 19:46:28 -0500
Subject: [PATCH 13/91] LF-4483 Hide empty scrollbar when there is no overflow
 needed

---
 .../webapp/src/components/Animals/Inventory/styles.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/styles.module.scss b/packages/webapp/src/components/Animals/Inventory/styles.module.scss
index 48c3432bb2..ee31fc2336 100644
--- a/packages/webapp/src/components/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/components/Animals/Inventory/styles.module.scss
@@ -70,7 +70,7 @@
 }
 
 .tableWrapper {
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .tableWrapperCommon {

From ea943e0de1b4c5e6b0957e07fef23585f33def61 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 20:03:47 -0500
Subject: [PATCH 14/91] LF-4483 Add pill to expandable item

---
 .../components/Expandable/ExpandableItem.jsx  | 44 +++++++++++--------
 .../components/Expandable/styles.module.scss  | 13 ++++++
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/packages/webapp/src/components/Expandable/ExpandableItem.jsx b/packages/webapp/src/components/Expandable/ExpandableItem.jsx
index 14c06322ad..b2c8d5b16f 100644
--- a/packages/webapp/src/components/Expandable/ExpandableItem.jsx
+++ b/packages/webapp/src/components/Expandable/ExpandableItem.jsx
@@ -16,6 +16,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Collapse } from '@mui/material';
+import Pill from '../Pill';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import styles from './styles.module.scss';
@@ -29,6 +30,7 @@ export default function ExpandableItem({
   isExpanded,
   onClick,
   mainContent,
+  pillBody,
   expandedContent,
   iconClickOnly = true,
   classes = {},
@@ -52,31 +54,35 @@ export default function ExpandableItem({
   return (
     <div className={clsx(classes.container, isExpanded && classes.expandedContainer)}>
       <div
-        className={clsx(
-          styles.mainContentWithIcon,
-          !iconClickOnly && styles.clickable,
-          classes.mainContentWithIcon,
-          isExpanded && classes.expandedMainContentWithIcon,
-        )}
+        className={clsx(classes.alwaysVisibleContent, !iconClickOnly && styles.clickable)}
         onClick={onElementClick}
-        aria-controls={id}
-        aria-expanded={isExpanded}
       >
         <div
           className={clsx(
-            styles.mainContentWrapper,
-            classes.mainContentWrapper,
-            leftCollapseIcon && styles.leftCollapse,
+            styles.mainContentWithIcon,
+            classes.mainContentWithIcon,
+            isExpanded && classes.expandedMainContentWithIcon,
           )}
+          aria-controls={id}
+          aria-expanded={isExpanded}
         >
-          {mainContent}
-        </div>
-        <div
-          onClick={onIconClick}
-          className={clsx(styles.iconWrapper, iconClickOnly && styles.clickable, classes.icon)}
-        >
-          {icons[isExpanded ? 'up' : 'down']}
+          <div
+            className={clsx(
+              styles.mainContentWrapper,
+              classes.mainContentWrapper,
+              leftCollapseIcon && styles.leftCollapse,
+            )}
+          >
+            {mainContent}
+          </div>
+          <div
+            onClick={onIconClick}
+            className={clsx(styles.iconWrapper, iconClickOnly && styles.clickable, classes.icon)}
+          >
+            {icons[isExpanded ? 'up' : 'down']}
+          </div>
         </div>
+        {pillBody && leftCollapseIcon && <Pill body={pillBody} className={styles.pill} />}
       </div>
       <Collapse id={id} in={isExpanded} timeout="auto" unmountOnExit>
         {expandedContent}
@@ -89,10 +95,12 @@ ExpandableItem.propTypes = {
   isExpanded: PropTypes.bool,
   onClick: PropTypes.func,
   mainContent: PropTypes.node,
+  pillBody: PropTypes.string,
   expandedContent: PropTypes.node,
   iconClickOnly: PropTypes.bool,
   classes: PropTypes.shape({
     container: PropTypes.string,
+    alwaysVisibleContent: PropTypes.string,
     expandedContainer: PropTypes.string,
     expandedMainContentWithIcon: PropTypes.string,
     mainContentWithIcon: PropTypes.string,
diff --git a/packages/webapp/src/components/Expandable/styles.module.scss b/packages/webapp/src/components/Expandable/styles.module.scss
index 5f2a60d85a..47ff0d6734 100644
--- a/packages/webapp/src/components/Expandable/styles.module.scss
+++ b/packages/webapp/src/components/Expandable/styles.module.scss
@@ -12,6 +12,7 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
+@import '@assets/mixin.scss';
 
 .mainContentWithIcon {
   display: flex;
@@ -36,3 +37,15 @@
 .mainContentWrapper.leftCollapse {
   order: 1;
 }
+
+.pill {
+  height: 24px;
+  padding: 8px 16px;
+  background: var(--Colors-Neutral-Neutral-50);
+  color: var(--Colors-Neutral-Neutral-600);
+  width: 100%;
+  justify-content: center;
+  @include lg-breakpoint {
+    width: unset;
+  }
+}
\ No newline at end of file

From dc104cf7b536563eaec03aa9598047724976a141 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 20:10:26 -0500
Subject: [PATCH 15/91] LF-4483 Allow full width content in task locations for
 animals mobile inventory

---
 .../src/components/Task/TaskLocations/index.jsx     | 13 ++++++++++++-
 .../Task/TaskLocations/styles.module.scss           |  4 ++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index b0d1a8bc9c..15e15bfc10 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form';
 import { cloneObject } from '../../../util';
 import Checkbox from '../../Form/Checkbox';
 import { ExpandableAnimalInventory, View } from '../../../containers/Animals/Inventory';
+import styles from './styles.module.scss';
 export default function PureTaskLocations({
   locations,
   readOnlyPinCoordinates,
@@ -118,6 +119,7 @@ export default function PureTaskLocations({
             </Button>
           </>
         }
+        fullWidthContent={isAnimalTask}
       >
         <MultiStepPageTitle
           onGoBack={onGoBack}
@@ -125,6 +127,7 @@ export default function PureTaskLocations({
           cancelModalTitle={t('TASK.ADD_TASK_FLOW')}
           title={t('MANAGEMENT_DETAIL.ADD_A_TASK')}
           value={progress}
+          className={isAnimalTask && styles.titlePadding}
         />
         {isAnimalTask && (
           <ExpandableAnimalInventory
@@ -132,7 +135,14 @@ export default function PureTaskLocations({
             preSelectedIds={persistedFormData?.animalIds || []}
           />
         )}
-        <Main style={{ marginTop: '24px', marginBottom: '24px' }}>
+        <Main
+          style={{
+            marginTop: '24px',
+            marginBottom: '24px',
+            paddingLeft: '24px',
+            paddingRight: '24px',
+          }}
+        >
           {title || t('TASK.SELECT_TASK_LOCATIONS')}
         </Main>
         <LocationPicker
@@ -145,6 +155,7 @@ export default function PureTaskLocations({
           maxZoomRef={maxZoomRef}
           getMaxZoom={getMaxZoom}
           maxZoom={maxZoom}
+          style={isAnimalTask && { marginLeft: '24px', marginRight: '24px' }}
         />
         {showWildCropCheckBox && (
           <Checkbox
diff --git a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
index c1cea842e8..3bb1c22808 100644
--- a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
+++ b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
@@ -14,3 +14,7 @@
   line-height: 16px;
   color: var(--grey600);
 }
+
+.titlePadding {
+  padding: 24px 24px 0 24px;
+}

From b3545429251cb6fc35b11920fcb9344774a8ddca Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 20:12:30 -0500
Subject: [PATCH 16/91] LF-4483 Augment multi-step page title to accept
 classnames

---
 .../src/components/PageTitle/MultiStepPageTitle/index.jsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx b/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
index 8538e985ba..99bfdea30e 100644
--- a/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
+++ b/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
@@ -16,11 +16,12 @@ function MultiStepPageTitle({
   cancelModalTitle,
   showConfirmCancelModal,
   setShowConfirmCancelModal,
+  className,
 }) {
   const [localShowModal, setLocalShowModal] = useState(false); // original form flow
 
   return (
-    <div style={style}>
+    <div style={style} className={className}>
       <div className={styles.titleContainer}>
         <div className={styles.leftContainer}>
           {onGoBack && (
@@ -54,4 +55,5 @@ MultiStepPageTitle.prototype = {
   cancelModalTitle: PropTypes.string,
   showConfirmCancelModal: PropTypes.bool,
   setShowConfirmCancelModal: PropTypes.func,
+  className: PropTypes.string,
 };

From 6108ded7f850067ee0cc81bd0bd8d04cf0194821 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 20:13:51 -0500
Subject: [PATCH 17/91] LF-4483 Add mobile and desktop styles using new
 expanable item including pill

---
 .../containers/Animals/Inventory/index.tsx    | 17 +++++-----
 .../Animals/Inventory/styles.module.scss      | 34 ++++++++++++++++---
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index a9f56e6688..6ba8615028 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -314,24 +314,25 @@ export function ExpandableAnimalInventory(props: AnimalInventoryProps) {
   const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
   const isExpanded = expandedIds.includes(1);
   return (
-    <div className={clsx(styles.section, isExpanded && styles.expanded)}>
+    <div className={clsx(styles.section)}>
       {/* @ts-ignore */}
       <ExpandableItem
         isExpanded={isExpanded}
         onClick={() => toggleExpanded(1)}
-        mainContent={
-          <>
-            <div className={styles.blueColor}>See detail list of animals to move</div>
-            <Pill body={'5 animals'} className={styles.pill} />
-          </>
-        }
+        mainContent={<div className={styles.blueColor}>See detail list of animals to move</div>}
+        pillBody={'5 animals'}
         expandedContent={
           <div className={styles.expandedContentWrapper}>
             <AnimalInventory {...props} />
           </div>
         }
         iconClickOnly={false}
-        classes={{ mainContentWrapper: styles.mainContentWrapper, icon: styles.blueColor }}
+        classes={{
+          mainContentWrapper: styles.mainContentWrapper,
+          mainContentWithIcon: styles.mainContentWithIcon,
+          icon: styles.blueColor,
+          alwaysVisibleContent: styles.alwaysVisibleContent,
+        }}
         itemKey={1}
         leftCollapseIcon
       />
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 89f10d07c2..b9201b3f5f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -47,16 +47,25 @@
 
 .section {
   margin-top: 24px;
-  padding: 8px 16px;
+  padding: 8px 0;
   background: var(--White);
   border-radius: 8px;
   border: 1px solid var(--Colors-Neutral-Neutral-50);
   gap: 8px;
+
+  @include lg-breakpoint {
+    margin: 24px 24px 0 24px;
+    padding: 8px 16px;
+  }
 }
 
-.expanded {
-  border: 1px solid var(--Form-focus);
-  box-shadow: 0px 0px 4px 0px var(--Colors-Neutral-Neutral-200);
+.alwaysVisibleContent {
+  padding: 0 16px;
+  @include lg-breakpoint {
+    align-items: center;
+    gap: 8px;
+    display: flex;
+  }
 }
 
 .expandedContentWrapper {
@@ -76,11 +85,26 @@
   padding: 8px 16px;
   background: var(--Colors-Neutral-Neutral-50);
   color: var(--Colors-Neutral-Neutral-600);
+  width: 100%;
+  justify-content: center;
+  @include lg-breakpoint {
+    width: unset;
+    justify-content: unset;
+  }
 }
 
 .mainContentWrapper {
-  display: flex;
+  width: auto !important;
+  gap: 8px;
+  @include lg-breakpoint {
+    display: flex;
+  }
+}
+
+.mainContentWithIcon {
+  text-align: center;
   gap: 8px;
+  justify-content: center;
 }
 
 .blueColor {

From 41659c819259e6ae4f6c3cc6d0ca978aa87289e7 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 15 Nov 2024 20:15:44 -0500
Subject: [PATCH 18/91] LF-4483 Remove unused styles

---
 .../containers/Animals/Inventory/styles.module.scss | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index b9201b3f5f..667f018506 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -80,19 +80,6 @@
   background: var(--White);
 }
 
-.pill {
-  height: 24px;
-  padding: 8px 16px;
-  background: var(--Colors-Neutral-Neutral-50);
-  color: var(--Colors-Neutral-Neutral-600);
-  width: 100%;
-  justify-content: center;
-  @include lg-breakpoint {
-    width: unset;
-    justify-content: unset;
-  }
-}
-
 .mainContentWrapper {
   width: auto !important;
   gap: 8px;

From e20bc19c17684df3dc555137878895ac67b19e16 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Mon, 18 Nov 2024 14:05:37 -0500
Subject: [PATCH 19/91] LF-4483 Remove unnecessary logic, unecessary import,
 fix useMemo dependency

---
 .../webapp/src/components/Task/TaskAnimalInventory/index.jsx    | 2 +-
 packages/webapp/src/components/Task/TaskLocations/index.jsx     | 2 +-
 packages/webapp/src/containers/Animals/Inventory/index.tsx      | 1 -
 .../src/containers/Animals/Inventory/useFilteredInventory.ts    | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx b/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
index be1df15256..7cb48a4f5c 100644
--- a/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
+++ b/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
@@ -107,7 +107,7 @@ export default function PureTaskAnimalInventory({
           onSelect={onSelect}
           view={View.TASK}
           history={history}
-          preSelectedIds={persistedFormData?.animalIds ?? []}
+          preSelectedIds={persistedFormData?.animalIds}
         />
       </Form>
     </div>
diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index 15e15bfc10..4c9294acec 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -132,7 +132,7 @@ export default function PureTaskLocations({
         {isAnimalTask && (
           <ExpandableAnimalInventory
             view={View.TASK_SUMMARY}
-            preSelectedIds={persistedFormData?.animalIds || []}
+            preSelectedIds={persistedFormData?.animalIds}
           />
         )}
         <Main
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 6ba8615028..5583bb4e70 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -42,7 +42,6 @@ import { useAnimalsFilterReduxState } from './KPI/useAnimalsFilterReduxState';
 import FloatingContainer from '../../../components/FloatingContainer';
 import ExpandableItem from '../../../components/Expandable/ExpandableItem';
 import useExpandable from '../../../components/Expandable/useExpandableItem';
-import Pill from '../../../components/Pill';
 import clsx from 'clsx';
 
 export enum View {
diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index 12537fd2f1..45a64dd9f7 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -32,7 +32,7 @@ export const useFilteredInventory = (
       return inventory.filter((entity) => {
         return selectedInventoryIds.includes(entity.id);
       });
-    }, [selectedInventoryIds]);
+    }, [inventory, selectedInventoryIds]);
   }
 
   const {

From 20c1bc5b551fd166251e9490f8a08d5c8743cb5e Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Mon, 18 Nov 2024 18:28:24 -0500
Subject: [PATCH 20/91] LF-4483 Allow y overflow when animals inventory summary
 is expanded

---
 packages/webapp/src/assets/variables.scss        |  1 -
 .../SingleLocationPicker/styles.module.scss      |  3 ++-
 .../src/containers/Animals/Inventory/index.tsx   | 16 +++++++---------
 .../Animals/Inventory/styles.module.scss         | 12 ++++++++----
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/webapp/src/assets/variables.scss b/packages/webapp/src/assets/variables.scss
index 9f92e959e4..f3c5b88e37 100644
--- a/packages/webapp/src/assets/variables.scss
+++ b/packages/webapp/src/assets/variables.scss
@@ -4,7 +4,6 @@
     // GLOBAL CSS VARIABLES
     --global-navbar-height: 64px;
     --global-map-header-height: 48px;
-    --global-min-location-picker-height: 150px;
     --global-side-menu-width: 188px;
     --global-compact-side-menu-width: 80px;
     // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding
diff --git a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
index ac4c679006..72aacdd93d 100644
--- a/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
+++ b/packages/webapp/src/components/LocationPicker/SingleLocationPicker/styles.module.scss
@@ -3,5 +3,6 @@
     margin-bottom: 16px;
     flex-grow: 1;
     display: flex;
-    min-height: var(--global-min-location-picker-height);
+    // Based on animals summary view: 98px = 24px margin top, 2px border, 16 px padding, 24px mobile max-height pill and 24px expandable item text, 8px margin-bottom 
+    min-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height) - 98px);
 }
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 5583bb4e70..4351f22d09 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -74,8 +74,9 @@ function AnimalInventory({
   isCompactSideMenu,
   history,
 }: AnimalInventoryProps) {
-  const isTaskView = [View.TASK, View.TASK_SUMMARY].includes(view);
+  const isTaskInventoryView = view === View.TASK;
   const isSummaryView = view === View.TASK_SUMMARY;
+  const isTaskView = isTaskInventoryView || isSummaryView;
 
   const [selectedInventoryIds, setSelectedInventoryIds] = useState<string[]>(preSelectedIds);
 
@@ -262,15 +263,12 @@ function AnimalInventory({
       header={
         !isTaskView ? <KPI onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} /> : null
       }
-      classes={{ paper: isSummaryView ? styles.removePaper : styles.paper }}
+      classes={{ paper: isSummaryView ? styles.hidePaperBorder : styles.paper }}
       kind={ContainerKind.PAPER}
-      wrapperClassName={
-        isSummaryView
-          ? styles.summaryViewHeight
-          : isTaskView && !isSummaryView
-            ? styles.taskViewHeight
-            : undefined
-      }
+      wrapperClassName={clsx(
+        isTaskInventoryView && styles.taskViewMaxHeight,
+        isSummaryView && styles.summaryViewHeight,
+      )}
     >
       <PureAnimalInventory
         filteredInventory={searchAndFilteredInventory}
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 667f018506..60d452f715 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -29,20 +29,18 @@
   }
 }
 
-.removePaper {
+.hidePaperBorder {
   border-radius: 0;
   border: none;
   margin: 0;
 }
 
-.taskViewHeight {
+.taskViewMaxHeight {
   max-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height));
 }
 
 .summaryViewHeight {
   height: auto;
-  // 58 px is border 2px, expanded content padding 16px, 24px collapse content title, 16px margin between table and title
-  max-height: calc(100vh - var(--global-navbar-height) - var(--global-multi-step-task-layout-aggregated-height) - var(--global-min-location-picker-height) - 58px);
 }
 
 .section {
@@ -60,6 +58,7 @@
 }
 
 .alwaysVisibleContent {
+  max-height: 56px;
   padding: 0 16px;
   @include lg-breakpoint {
     align-items: center;
@@ -92,6 +91,11 @@
   text-align: center;
   gap: 8px;
   justify-content: center;
+  margin-bottom: 8px;
+  
+  @include lg-breakpoint {
+    margin-bottom: 0px;
+  }
 }
 
 .blueColor {

From ddb5181db968834fda7c6321b72ae2887dfea5d8 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Mon, 18 Nov 2024 19:44:33 -0500
Subject: [PATCH 21/91] LF-4483 Add translation string and count

---
 .../webapp/public/locales/de/translation.json |  1 +
 .../webapp/public/locales/en/translation.json |  1 +
 .../webapp/public/locales/es/translation.json |  1 +
 .../webapp/public/locales/fr/translation.json |  1 +
 .../webapp/public/locales/hi/translation.json |  1 +
 .../webapp/public/locales/ml/translation.json |  1 +
 .../webapp/public/locales/pa/translation.json |  1 +
 .../webapp/public/locales/pt/translation.json |  1 +
 .../containers/Animals/Inventory/index.tsx    | 21 +++++++++++++++----
 9 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/public/locales/de/translation.json b/packages/webapp/public/locales/de/translation.json
index 768e54bda2..74107f3cd0 100644
--- a/packages/webapp/public/locales/de/translation.json
+++ b/packages/webapp/public/locales/de/translation.json
@@ -1800,6 +1800,7 @@
     "ADD_TASK_FLOW": "Aufgabenerstellung",
     "AMOUNT_TO_ALLOCATE": "Zuzuweisender Betrag",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "Mehrere Kulturpflanzen",
       "MULTIPLE_LOCATIONS": "Mehrere Standorte"
diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
index 5459a72a5a..ee8bc93094 100644
--- a/packages/webapp/public/locales/en/translation.json
+++ b/packages/webapp/public/locales/en/translation.json
@@ -1941,6 +1941,7 @@
     "ADD_TASK_FLOW": "task creation",
     "AMOUNT_TO_ALLOCATE": "Amount to allocate",
     "ANIMAL_MOVING_TO_LOCATION": "Moving to:",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "See detail list of animals to move",
     "CARD": {
       "MULTIPLE_CROPS": "Multiple crops",
       "MULTIPLE_LOCATIONS": "Multiple locations"
diff --git a/packages/webapp/public/locales/es/translation.json b/packages/webapp/public/locales/es/translation.json
index bc545b213f..d6e156db3e 100644
--- a/packages/webapp/public/locales/es/translation.json
+++ b/packages/webapp/public/locales/es/translation.json
@@ -1948,6 +1948,7 @@
     "ADD_TASK_FLOW": "creación de tareas",
     "AMOUNT_TO_ALLOCATE": "Cantidad a asignar",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "Múltiples cultivos",
       "MULTIPLE_LOCATIONS": "Múltiples ubicaciones"
diff --git a/packages/webapp/public/locales/fr/translation.json b/packages/webapp/public/locales/fr/translation.json
index a131997c67..14d7335952 100644
--- a/packages/webapp/public/locales/fr/translation.json
+++ b/packages/webapp/public/locales/fr/translation.json
@@ -1947,6 +1947,7 @@
     "ADD_TASK_FLOW": "création de tâche",
     "AMOUNT_TO_ALLOCATE": "Montant à allouer",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "Plusieurs cultures",
       "MULTIPLE_LOCATIONS": "Plusieurs emplacements"
diff --git a/packages/webapp/public/locales/hi/translation.json b/packages/webapp/public/locales/hi/translation.json
index 4dadf73558..e177a1b5ce 100644
--- a/packages/webapp/public/locales/hi/translation.json
+++ b/packages/webapp/public/locales/hi/translation.json
@@ -1797,6 +1797,7 @@
     "ADD_TASK_FLOW": "कार्य निर्माण",
     "AMOUNT_TO_ALLOCATE": "आवंटित राशि",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "कई फसलें",
       "MULTIPLE_LOCATIONS": "कई स्थान"
diff --git a/packages/webapp/public/locales/ml/translation.json b/packages/webapp/public/locales/ml/translation.json
index 11557eee15..43e1bd0795 100644
--- a/packages/webapp/public/locales/ml/translation.json
+++ b/packages/webapp/public/locales/ml/translation.json
@@ -1797,6 +1797,7 @@
     "ADD_TASK_FLOW": "ചുമതല സൃഷ്ടിക്കൽ",
     "AMOUNT_TO_ALLOCATE": "അനുവദിക്കേണ്ട തുക",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "ഒന്നിലധികം വിളകൾ",
       "MULTIPLE_LOCATIONS": "ഒന്നിലധികം സ്ഥാനങ്ങൾ"
diff --git a/packages/webapp/public/locales/pa/translation.json b/packages/webapp/public/locales/pa/translation.json
index 955f327961..cd23df0495 100644
--- a/packages/webapp/public/locales/pa/translation.json
+++ b/packages/webapp/public/locales/pa/translation.json
@@ -1797,6 +1797,7 @@
     "ADD_TASK_FLOW": "ਕਾਰਜ ਰਚਨਾ",
     "AMOUNT_TO_ALLOCATE": "ਅਲਾਟ ਕਰਨ ਲਈ ਰਕਮ",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "ਕਈ ਫਸਲਾਂ",
       "MULTIPLE_LOCATIONS": "ਕਈ ਸਥਾਨਾਂ"
diff --git a/packages/webapp/public/locales/pt/translation.json b/packages/webapp/public/locales/pt/translation.json
index 345971e00c..77c328b192 100644
--- a/packages/webapp/public/locales/pt/translation.json
+++ b/packages/webapp/public/locales/pt/translation.json
@@ -1947,6 +1947,7 @@
     "ADD_TASK_FLOW": "criação de tarefa",
     "AMOUNT_TO_ALLOCATE": "Quantidade a ser alocada",
     "ANIMAL_MOVING_TO_LOCATION": "MISSING",
+    "ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE": "MISSING",
     "CARD": {
       "MULTIPLE_CROPS": "Múltiplos cultivos",
       "MULTIPLE_LOCATIONS": "Múltiplos locais"
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 4351f22d09..dd1822a86f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -58,6 +58,10 @@ interface AnimalInventoryProps {
   history: History;
 }
 
+interface ExpandableAnimalInventoryProps extends AnimalInventoryProps {
+  preSelectedIds: string[];
+}
+
 const getVisibleSelectedIds = (visibleRowData: AnimalInventoryType[], selectedIds: string[]) => {
   if (!visibleRowData.length || !selectedIds.length) {
     return [];
@@ -307,17 +311,26 @@ function AnimalInventory({
   );
 }
 
-export function ExpandableAnimalInventory(props: AnimalInventoryProps) {
+export function ExpandableAnimalInventory(props: ExpandableAnimalInventoryProps) {
+  const { t } = useTranslation();
+  const { inventory } = useAnimalInventory();
+  const animalCount = props.preSelectedIds.reduce((acc, cur) => {
+    return acc + (inventory.find((animalOrBatch) => animalOrBatch.id === cur)?.count || 0);
+  }, 0);
+
   const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
   const isExpanded = expandedIds.includes(1);
   return (
     <div className={clsx(styles.section)}>
-      {/* @ts-ignore */}
       <ExpandableItem
         isExpanded={isExpanded}
         onClick={() => toggleExpanded(1)}
-        mainContent={<div className={styles.blueColor}>See detail list of animals to move</div>}
-        pillBody={'5 animals'}
+        mainContent={
+          <div className={styles.blueColor}>
+            {t('TASK.ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE')}
+          </div>
+        }
+        pillBody={t('ANIMAL.ANIMAL_COUNT', { count: animalCount })}
         expandedContent={
           <div className={styles.expandedContentWrapper}>
             <AnimalInventory {...props} />

From 75a2801c09010bf505cd959ae3626576672f174a Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 10:18:26 -0500
Subject: [PATCH 22/91] LF-4483 Use classes in fixedHeaderContainer

---
 .../src/components/Animals/FixedHeaderContainer/index.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx b/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx
index 135a7a94cc..b267c398ac 100644
--- a/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx
+++ b/packages/webapp/src/components/Animals/FixedHeaderContainer/index.tsx
@@ -45,8 +45,8 @@ type FixedHeaderContainerProps = {
   classes?: {
     paper?: string;
     divWrapper?: string;
+    wrapper?: string;
   };
-  wrapperClassName?: string;
 };
 
 type WrapperProps = Pick<FixedHeaderContainerProps, 'children' | 'classes'> & {
@@ -77,7 +77,6 @@ const FixedHeaderContainer = ({
   children,
   classes = {},
   kind = ContainerKind.OVERFLOW,
-  wrapperClassName,
 }: FixedHeaderContainerProps) => {
   const [paperHeightInPx, setPaperHeightInPx] = useState<number | null>(null);
   const paperRef = useRef<HTMLDivElement>(null);
@@ -123,7 +122,7 @@ const FixedHeaderContainer = ({
   const Wrapper = kind === ContainerKind.OVERFLOW ? DivWrapper : PaperWrapper;
 
   return (
-    <div className={clsx(styles.wrapper, wrapperClassName)}>
+    <div className={clsx(styles.wrapper, classes.wrapper)}>
       {header}
       <Wrapper paperRef={paperRef} classes={classes} hasMaxWidth={!isFullWidth}>
         {childrenWithProps}

From 0005afe27e4a0557ec325f886126a4abe039315d Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 10:21:46 -0500
Subject: [PATCH 23/91] LF-4483 Undo hide empty scrollbar - maybe this is
 important for mobile link clicking

---
 .../webapp/src/components/Animals/Inventory/styles.module.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/styles.module.scss b/packages/webapp/src/components/Animals/Inventory/styles.module.scss
index ee31fc2336..48c3432bb2 100644
--- a/packages/webapp/src/components/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/components/Animals/Inventory/styles.module.scss
@@ -70,7 +70,7 @@
 }
 
 .tableWrapper {
-  overflow-y: auto;
+  overflow-y: scroll;
 }
 
 .tableWrapperCommon {

From a5b2fced03c668fe108857290da6de94a884910c Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 10:22:16 -0500
Subject: [PATCH 24/91] LF-4483 Instead of complex logic use view based config

---
 .../components/Animals/Inventory/index.tsx    | 68 +++++++++++++++----
 .../containers/Animals/Inventory/index.tsx    | 65 +++++++++++++-----
 .../Animals/Inventory/styles.module.scss      |  7 +-
 .../Animals/Inventory/useFilteredInventory.ts |  4 +-
 4 files changed, 108 insertions(+), 36 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index 22d28febe9..a118e75d4b 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -83,8 +83,55 @@ const PureAnimalInventory = ({
   view?: View;
 }) => {
   const { t } = useTranslation();
-  const isTaskView = [View.TASK, View.TASK_SUMMARY].includes(view);
-  const isSummaryView = view === View.TASK_SUMMARY;
+
+  const viewConfig = () => {
+    switch (view) {
+      case View.TASK:
+        return {
+          tableMaxHeight: !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight,
+          tableSpacerRowHeight: 0,
+          showInventorySelection: isAdmin,
+          showSearchBarAndFilter: true,
+          alternatingRowColor: true,
+          showTableHeader: isDesktop,
+          listView: false,
+          showActionFloaterButton: false,
+        };
+      case View.TASK_SUMMARY:
+        return {
+          tableMaxHeight: undefined,
+          tableSpacerRowHeight: 0,
+          showInventorySelection: false,
+          showSearchBarAndFilter: false,
+          alternatingRowColor: isDesktop ? false : true,
+          showTableHeader: false,
+          listView: isDesktop,
+          showActionFloaterButton: false,
+        };
+      default:
+        return {
+          tableMaxHeight: !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight,
+          tableSpacerRowHeight: isDesktop ? 96 : 120,
+          showInventorySelection: isAdmin,
+          showSearchBarAndFilter: true,
+          alternatingRowColor: true,
+          showTableHeader: isDesktop,
+          listView: false,
+          showActionFloaterButton: isAdmin,
+        };
+    }
+  };
+
+  const {
+    tableMaxHeight,
+    tableSpacerRowHeight,
+    showInventorySelection,
+    showSearchBarAndFilter,
+    alternatingRowColor,
+    showTableHeader,
+    listView,
+    showActionFloaterButton,
+  } = viewConfig();
 
   if (isLoading) {
     return null;
@@ -93,16 +140,9 @@ const PureAnimalInventory = ({
   const { searchString, setSearchString, placeHolderText, searchResultsText } = searchProps;
   const hasSearchResults = filteredInventory.length !== 0;
 
-  const tableMaxHeight =
-    !isDesktop || !containerHeight || isSummaryView ? undefined : containerHeight - usedHeight;
-
-  const tableSpacerRowHeight = !isTaskView ? (isDesktop ? 96 : 120) : 0;
-
-  const showInventorySelection = isAdmin && !isSummaryView;
-
   return (
     <>
-      {!isSummaryView && (
+      {showSearchBarAndFilter && (
         <div
           className={clsx(
             isDesktop ? styles.searchAndFilterDesktop : styles.searchAndFilter,
@@ -141,13 +181,13 @@ const PureAnimalInventory = ({
         {!totalInventoryCount || hasSearchResults ? (
           <Table
             kind={TableKind.V2}
-            alternatingRowColor={isSummaryView ? (isDesktop ? false : true) : true}
+            alternatingRowColor={alternatingRowColor}
             columns={animalsColumns}
             data={filteredInventory}
             shouldFixTableLayout={isDesktop}
             minRows={totalInventoryCount}
             dense={false}
-            showHeader={isDesktop && !isSummaryView}
+            showHeader={showTableHeader}
             onCheck={showInventorySelection ? onSelectInventory : undefined}
             handleSelectAllClick={showInventorySelection ? handleSelectAllClick : undefined}
             selectedIds={showInventorySelection ? selectedIds : undefined}
@@ -156,7 +196,7 @@ const PureAnimalInventory = ({
             spacerRowHeight={tableSpacerRowHeight}
             headerClass={styles.headerClass}
             onRowClick={onRowClick}
-            listView={isSummaryView && isDesktop}
+            listView={listView}
           />
         ) : (
           <NoSearchResults
@@ -166,7 +206,7 @@ const PureAnimalInventory = ({
           />
         )}
       </div>
-      {isAdmin && !isTaskView && (
+      {showActionFloaterButton && (
         <FloatingButtonMenu
           type={'add'}
           options={[
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index dd1822a86f..49d1c9bdbc 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -78,10 +78,6 @@ function AnimalInventory({
   isCompactSideMenu,
   history,
 }: AnimalInventoryProps) {
-  const isTaskInventoryView = view === View.TASK;
-  const isSummaryView = view === View.TASK_SUMMARY;
-  const isTaskView = isTaskInventoryView || isSummaryView;
-
   const [selectedInventoryIds, setSelectedInventoryIds] = useState<string[]>(preSelectedIds);
 
   const { selectedTypeIds, updateSelectedTypeIds } = useAnimalsFilterReduxState();
@@ -96,7 +92,50 @@ function AnimalInventory({
 
   const { inventory, isLoading } = useAnimalInventory();
 
-  const filteredInventory = useFilteredInventory(inventory, isSummaryView, selectedInventoryIds);
+  const viewConfig = () => {
+    switch (view) {
+      case View.TASK:
+        return {
+          showOnlySelected: false,
+          showDetailLink: false,
+          showPaperBorder: true,
+          headerContainerKind: ContainerKind.PAPER,
+          wrapperClass: styles.taskViewMaxHeight,
+          showActionMenu: false,
+          showKPI: false,
+        };
+      case View.TASK_SUMMARY:
+        return {
+          showOnlySelected: true,
+          showDetailLink: false,
+          headerContainerKind: ContainerKind.OVERFLOW,
+          wrapperClass: styles.summaryViewHeight,
+          showActionMenu: false,
+          showKPI: false,
+        };
+      default:
+        return {
+          showOnlySelected: false,
+          showDetailLink: true,
+          showPaperBorder: true,
+          headerContainerKind: ContainerKind.PAPER,
+          wrapperClass: undefined,
+          showActionMenu: isAdmin && selectedInventoryIds.length,
+          showKPI: true,
+        };
+    }
+  };
+
+  const {
+    showOnlySelected,
+    showDetailLink,
+    headerContainerKind,
+    wrapperClass,
+    showActionMenu,
+    showKPI,
+  } = viewConfig();
+
+  const filteredInventory = useFilteredInventory(inventory, showOnlySelected, selectedInventoryIds);
 
   const isFilterActive = useSelector(isFilterCurrentlyActiveSelector('animals'));
   const dispatch = useDispatch();
@@ -153,7 +192,7 @@ function AnimalInventory({
         sortable: false,
       },
       {
-        id: !isTaskView ? 'path' : null,
+        id: showDetailLink ? 'path' : null,
         label: '',
         format: (d: AnimalInventoryType) => (
           <Cell kind={CellKind.RIGHT_CHEVRON_LINK} path={d.path} />
@@ -264,15 +303,9 @@ function AnimalInventory({
 
   return (
     <FixedHeaderContainer
-      header={
-        !isTaskView ? <KPI onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} /> : null
-      }
-      classes={{ paper: isSummaryView ? styles.hidePaperBorder : styles.paper }}
-      kind={ContainerKind.PAPER}
-      wrapperClassName={clsx(
-        isTaskInventoryView && styles.taskViewMaxHeight,
-        isSummaryView && styles.summaryViewHeight,
-      )}
+      header={showKPI ? <KPI onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} /> : null}
+      classes={{ paper: styles.paper, divWrapper: styles.divWrapper, wrapper: wrapperClass }}
+      kind={headerContainerKind}
     >
       <PureAnimalInventory
         filteredInventory={searchAndFilteredInventory}
@@ -292,7 +325,7 @@ function AnimalInventory({
         onRowClick={onRowClick}
         view={view}
       />
-      {isAdmin && selectedInventoryIds.length && !isTaskView ? (
+      {showActionMenu ? (
         <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
           <ActionMenu
             headerLeftText={t('common:SELECTED_COUNT', { count: selectedInventoryIds.length })}
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 60d452f715..4a888bbedc 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -29,10 +29,9 @@
   }
 }
 
-.hidePaperBorder {
-  border-radius: 0;
-  border: none;
-  margin: 0;
+.divWrapper {
+  height: auto;
+  overflow-y: auto;
 }
 
 .taskViewMaxHeight {
diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index 45a64dd9f7..811fcee49a 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -24,10 +24,10 @@ import { isInactive } from '../../Filter/utils';
 
 export const useFilteredInventory = (
   inventory: AnimalInventory[],
-  isSummaryView: boolean,
+  showOnlySelected: boolean,
   selectedInventoryIds: string[],
 ) => {
-  if (isSummaryView) {
+  if (showOnlySelected) {
     return useMemo(() => {
       return inventory.filter((entity) => {
         return selectedInventoryIds.includes(entity.id);

From bd2f15ca9d9e3a96edc59a14c7f42c14284c963a Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:03:51 -0800
Subject: [PATCH 25/91] LF-4372 Remove help request route

---
 packages/webapp/src/routes/index.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index cccc4060d8..ac94858e12 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -31,7 +31,6 @@ import { useReduxSnackbar } from '../containers/Snackbar/useReduxSnackbar';
 
 //dynamic imports
 const Home = React.lazy(() => import('../containers/Home'));
-const HelpRequest = React.lazy(() => import('../containers/Help'));
 const Account = React.lazy(() => import('../containers/Profile/Account'));
 const Farm = React.lazy(() => import('../containers/Profile/Farm/Farm'));
 const People = React.lazy(() => import('../containers/Profile/People/People'));
@@ -560,7 +559,6 @@ const Routes = ({ isCompactSideMenu }) => {
             <Route path="/insights/labourhappiness" exact component={LabourHappiness} />
             <Route path="/insights/biodiversity" exact component={Biodiversity} />
             <Route path="/insights/prices" exact component={Prices} />
-            <Route path="/help" exact component={HelpRequest} />
             <Route path="/farm_selection" exact component={ChooseFarm} />
             <Route path="/callback" component={Callback} />
             <Route path="/accept_invitation/sign_up" component={InviteSignUp} />
@@ -642,7 +640,6 @@ const Routes = ({ isCompactSideMenu }) => {
 
             <Route path="/farm" exact component={Farm} />
             <Route path="/consent" exact component={ConsentForm} />
-            <Route path="/help" exact component={HelpRequest} />
             <Route path="/crop/new" exact component={AddNewCrop} />
             <Route path="/tasks" exact component={Tasks} />
             <Route path="/tasks/:task_id/read_only" exact component={TaskReadOnly} />
@@ -977,7 +974,6 @@ const Routes = ({ isCompactSideMenu }) => {
             <Route path="/accept_invitation/create_account" component={InvitedUserCreateAccount} />
             <Route path="/password_reset" component={PasswordResetAccount} />
             <Route path={'/expired'} component={ExpiredTokenScreen} />
-            <Route path="/help" exact component={HelpRequest} />
             <Route path="/tasks" exact component={Tasks} />
             <Route path="/tasks/:task_id/read_only" exact component={TaskReadOnly} />
             <Route path="/tasks/:task_id/abandon" exact component={TaskAbandon} />

From b810fb99ecd433c5c93ca83a350e86291864f119 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:04:45 -0800
Subject: [PATCH 26/91] LF-4372 Remove Help item from TopMenu

---
 packages/webapp/src/assets/images/navbar/help.svg         | 5 -----
 .../webapp/src/components/Navigation/TopMenu/TopMenu.jsx  | 8 --------
 2 files changed, 13 deletions(-)
 delete mode 100644 packages/webapp/src/assets/images/navbar/help.svg

diff --git a/packages/webapp/src/assets/images/navbar/help.svg b/packages/webapp/src/assets/images/navbar/help.svg
deleted file mode 100644
index 76b5db0498..0000000000
--- a/packages/webapp/src/assets/images/navbar/help.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="help-circle">
-<path id="Icon" d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#266F68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
index 87620abcfd..f57e1c5a0c 100644
--- a/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
+++ b/packages/webapp/src/components/Navigation/TopMenu/TopMenu.jsx
@@ -3,7 +3,6 @@ import { logout } from '../../../util/jwt';
 import { getLanguageFromLocalStorage } from '../../../util/getLanguageFromLocalStorage';
 import { ReactComponent as LogoutIcon } from '../../../assets/images/navbar/logout.svg';
 import { ReactComponent as MyInfoIcon } from '../../../assets/images/navbar/my-info.svg';
-import { ReactComponent as HelpIcon } from '../../../assets/images/navbar/help.svg';
 import { ReactComponent as VideoIcon } from '../../../assets/images/navbar/play-square.svg';
 import { ReactComponent as SwitchFarmIcon } from '../../../assets/images/navbar/switch-farm.svg';
 import { ReactComponent as LaunchIcon } from '../../../assets/images/icon_launch.svg';
@@ -103,13 +102,6 @@ const TopMenu = ({ history, isMobile, showNavActions, onClickBurger, showNav })
       label: t('PROFILE_FLOATER.SWITCH'),
       externalLink: false,
     },
-    {
-      id: 'help',
-      onClick: () => handleClick('/help'),
-      icon: <HelpIcon />,
-      label: t('PROFILE_FLOATER.HELP'),
-      externalLink: false,
-    },
     {
       id: 'tutorials',
       onClick: openTutorialsClick,

From d992d32120de47de911a61390a40a6fec818ca23 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:20:31 -0800
Subject: [PATCH 27/91] LF-4372 Remove inner form title 'Request help'

---
 packages/webapp/public/locales/de/translation.json | 1 -
 packages/webapp/public/locales/en/translation.json | 1 -
 packages/webapp/public/locales/es/translation.json | 1 -
 packages/webapp/public/locales/fr/translation.json | 1 -
 packages/webapp/public/locales/hi/translation.json | 1 -
 packages/webapp/public/locales/ml/translation.json | 1 -
 packages/webapp/public/locales/pa/translation.json | 1 -
 packages/webapp/public/locales/pt/translation.json | 1 -
 packages/webapp/src/components/Help/index.jsx      | 5 ++---
 9 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/webapp/public/locales/de/translation.json b/packages/webapp/public/locales/de/translation.json
index 17829a62f4..e51ee59d5f 100644
--- a/packages/webapp/public/locales/de/translation.json
+++ b/packages/webapp/public/locales/de/translation.json
@@ -943,7 +943,6 @@
     },
     "PREFERRED_CONTACT": "Bevorzugte Kontaktmethode",
     "REQUIRED_LABEL": "Erforderliches Feld",
-    "TITLE": "Anfrage einreichen",
     "TYPE_SUPPORT_LABEL": "Art der Anfrage",
     "TYPE_SUPPORT_PLACEHOLDER": "Wählen Sie die Art der Unterstützung",
     "WHATSAPP": "Whatsapp",
diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
index 91f126efcc..3a3a475da7 100644
--- a/packages/webapp/public/locales/en/translation.json
+++ b/packages/webapp/public/locales/en/translation.json
@@ -1054,7 +1054,6 @@
     },
     "PREFERRED_CONTACT": "Preferred contact method",
     "REQUIRED_LABEL": "Required Field",
-    "TITLE": "Request Help",
     "TYPE_SUPPORT_LABEL": "Type of support",
     "TYPE_SUPPORT_PLACEHOLDER": "Choose type of support",
     "WHATSAPP": "Whatsapp",
diff --git a/packages/webapp/public/locales/es/translation.json b/packages/webapp/public/locales/es/translation.json
index 97c11a6b55..d75c4d3fdb 100644
--- a/packages/webapp/public/locales/es/translation.json
+++ b/packages/webapp/public/locales/es/translation.json
@@ -1061,7 +1061,6 @@
     },
     "PREFERRED_CONTACT": "Método de contacto preferido",
     "REQUIRED_LABEL": "Campo solicitado",
-    "TITLE": "Solicitar ayuda",
     "TYPE_SUPPORT_LABEL": "Tipo de ayuda",
     "TYPE_SUPPORT_PLACEHOLDER": "Elija tipo de ayuda",
     "WHATSAPP": "Whatsapp",
diff --git a/packages/webapp/public/locales/fr/translation.json b/packages/webapp/public/locales/fr/translation.json
index 85f8a82c41..74db3c90df 100644
--- a/packages/webapp/public/locales/fr/translation.json
+++ b/packages/webapp/public/locales/fr/translation.json
@@ -1060,7 +1060,6 @@
     },
     "PREFERRED_CONTACT": "Méthode de contact préférée",
     "REQUIRED_LABEL": "Champ obligatoire",
-    "TITLE": "Demander de l'aide",
     "TYPE_SUPPORT_LABEL": "Type de support",
     "TYPE_SUPPORT_PLACEHOLDER": "Choisissez le type de support",
     "WHATSAPP": "Whatsapp",
diff --git a/packages/webapp/public/locales/hi/translation.json b/packages/webapp/public/locales/hi/translation.json
index 8c33a7c357..ae34a770f5 100644
--- a/packages/webapp/public/locales/hi/translation.json
+++ b/packages/webapp/public/locales/hi/translation.json
@@ -940,7 +940,6 @@
     },
     "PREFERRED_CONTACT": "पसंदीदा संपर्क विधि",
     "REQUIRED_LABEL": "आवश्यक फील्ड",
-    "TITLE": "सहायता का अनुरोध",
     "TYPE_SUPPORT_LABEL": "समर्थन का प्रकार",
     "TYPE_SUPPORT_PLACEHOLDER": "समर्थन का प्रकार चुनें",
     "WHATSAPP": "व्हाट्सएप",
diff --git a/packages/webapp/public/locales/ml/translation.json b/packages/webapp/public/locales/ml/translation.json
index f79f8f4e51..4a3cf3457b 100644
--- a/packages/webapp/public/locales/ml/translation.json
+++ b/packages/webapp/public/locales/ml/translation.json
@@ -940,7 +940,6 @@
     },
     "PREFERRED_CONTACT": "കോൺടാക്ട് ചെയ്യാനുള്ള രീതി തിരഞ്ഞെടുക്കുക",
     "REQUIRED_LABEL": "ആവശ്യമായ ഫീൽഡ്",
-    "TITLE": "സഹായം അഭ്യർത്ഥിക്കുക",
     "TYPE_SUPPORT_LABEL": "എന്തുതരം സഹായമാണ് വേണ്ടത്",
     "TYPE_SUPPORT_PLACEHOLDER": "എന്തുതരം സഹായമാണ് വേണ്ടതെന്ന് തിരഞ്ഞെടുക്കുക",
     "WHATSAPP": "വാട്സ്ആപ്പ്",
diff --git a/packages/webapp/public/locales/pa/translation.json b/packages/webapp/public/locales/pa/translation.json
index 3b8a516a6b..80697e907a 100644
--- a/packages/webapp/public/locales/pa/translation.json
+++ b/packages/webapp/public/locales/pa/translation.json
@@ -940,7 +940,6 @@
     },
     "PREFERRED_CONTACT": "ਪਸੰਦੀਦਾ ਸੰਪਰਕ ਵਿਧੀ",
     "REQUIRED_LABEL": "ਲੋੜੀਂਦਾ ਖੇਤਰ",
-    "TITLE": "ਮਦਦ ਲਈ ਬੇਨਤੀ ਕਰੋ",
     "TYPE_SUPPORT_LABEL": "ਸਹਾਇਤਾ ਦੀ ਕਿਸਮ",
     "TYPE_SUPPORT_PLACEHOLDER": "ਸਹਾਇਤਾ ਦੀ ਕਿਸਮ ਚੁਣੋ",
     "WHATSAPP": "ਵਟਸਐਪ",
diff --git a/packages/webapp/public/locales/pt/translation.json b/packages/webapp/public/locales/pt/translation.json
index 31c21fac66..8d1774e8c4 100644
--- a/packages/webapp/public/locales/pt/translation.json
+++ b/packages/webapp/public/locales/pt/translation.json
@@ -1060,7 +1060,6 @@
     },
     "PREFERRED_CONTACT": "Método de contato preferido",
     "REQUIRED_LABEL": "Campo Obrigatório",
-    "TITLE": "Solicite Ajuda",
     "TYPE_SUPPORT_LABEL": "Tipo de suporte",
     "TYPE_SUPPORT_PLACEHOLDER": "Escolha o tipo de suporte",
     "WHATSAPP": "WhatsApp",
diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 6f028d4117..c3bb278b2c 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -2,7 +2,7 @@ import Form from '../Form';
 import Button from '../Form/Button';
 import { ReactComponent as AddFile } from './../../assets/images/help/AddFile.svg';
 import React, { useEffect, useState } from 'react';
-import { Error, Title } from '../Typography';
+import { Error } from '../Typography';
 import PropTypes from 'prop-types';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -17,7 +17,7 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, formState } = useForm({
     mode: 'onTouched',
-    defaultValues: { 'contact_method': 'email' }
+    defaultValues: { contact_method: 'email' },
   });
 
   const { errors } = formState;
@@ -70,7 +70,6 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
         </>
       }
     >
-      <Title style={{ marginBottom: '32px' }}>{t('HELP.TITLE')}</Title>
       <Controller
         control={control}
         name={SUPPORT_TYPE}

From e47b7274e970fe138429a2efb7efd502ea09ff2c Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:29:25 -0800
Subject: [PATCH 28/91] LF-4372 Replace image uploader

---
 packages/webapp/src/components/Help/index.jsx | 26 ++++---------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index c3bb278b2c..fb88031c93 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -11,6 +11,7 @@ import TextArea from '../Form/TextArea';
 import Input from '../Form/Input';
 import Radio from '../Form/Radio';
 import { Label } from '../Typography/index';
+import ImagePicker from '../ImagePicker';
 
 export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_number, isLoading }) {
   const [file, setFile] = useState(null);
@@ -50,9 +51,6 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
     delete data.contactInfo;
     onSubmit(file, data);
   };
-  const fileChangeHandler = (event) => {
-    setFile(event.target.files[0]);
-  };
   const supportType = watch(SUPPORT_TYPE);
   const message = watch(MESSAGE);
   const disabled = Object.keys(errors).length || !supportType || !message || formState.isSubmitting;
@@ -97,26 +95,12 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
       ) : (
         ''
       )}
-      <div style={{ display: 'flex', flexDirection: 'row', marginBottom: '36px' }}>
-        <Input
+      <div style={{ marginBottom: '36px' }}>
+        <ImagePicker
           label={t('HELP.ATTACHMENT_LABEL')}
-          optional={true}
-          style={{ flexGrow: 4 }}
-          disabled={!!file}
-          value={file ? file.name : ''}
+          onSelectImage={setFile}
+          onRemoveImage={() => setFile(null)}
         />
-        <div style={{ flexGrow: 1, marginTop: '21px', marginLeft: '8px', marginRight: '-8px' }}>
-          <label htmlFor="uploader">
-            <AddFile />
-          </label>
-          <input
-            id="uploader"
-            name="_file_"
-            type="file"
-            onChange={fileChangeHandler}
-            style={{ display: 'none' }}
-          />
-        </div>
       </div>
       <Label style={{ marginBottom: '16px' }}>{t('HELP.PREFERRED_CONTACT')}</Label>
       <Radio

From db2de3d6e3030a98a5b13d41d7282e55e81a0253 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 15:21:00 -0500
Subject: [PATCH 29/91] LF-4483 Fix onRowClick and rename listview to
 extraRowSpacing

---
 .../components/Animals/Inventory/index.tsx    | 12 +++++------
 .../webapp/src/components/Table/TableV2.jsx   | 10 +++++-----
 .../src/components/Table/styles.module.scss   |  8 +++-----
 packages/webapp/src/components/Table/types.ts |  2 +-
 .../containers/Animals/Inventory/index.tsx    | 20 ++++++++-----------
 .../src/stories/Table/TableV2.stories.jsx     | 11 ++++++++++
 6 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index a118e75d4b..c04d14588f 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -71,7 +71,7 @@ const PureAnimalInventory = ({
   searchProps: SearchProps;
   onSelectInventory: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventory) => void;
   handleSelectAllClick: (event: ChangeEvent<HTMLInputElement>) => void;
-  onRowClick: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventory) => void;
+  onRowClick?: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventory) => void;
   selectedIds: string[];
   totalInventoryCount: number;
   isFilterActive: boolean;
@@ -94,7 +94,7 @@ const PureAnimalInventory = ({
           showSearchBarAndFilter: true,
           alternatingRowColor: true,
           showTableHeader: isDesktop,
-          listView: false,
+          extraRowSpacing: false,
           showActionFloaterButton: false,
         };
       case View.TASK_SUMMARY:
@@ -105,7 +105,7 @@ const PureAnimalInventory = ({
           showSearchBarAndFilter: false,
           alternatingRowColor: isDesktop ? false : true,
           showTableHeader: false,
-          listView: isDesktop,
+          extraRowSpacing: isDesktop,
           showActionFloaterButton: false,
         };
       default:
@@ -116,7 +116,7 @@ const PureAnimalInventory = ({
           showSearchBarAndFilter: true,
           alternatingRowColor: true,
           showTableHeader: isDesktop,
-          listView: false,
+          extraRowSpacing: false,
           showActionFloaterButton: isAdmin,
         };
     }
@@ -129,7 +129,7 @@ const PureAnimalInventory = ({
     showSearchBarAndFilter,
     alternatingRowColor,
     showTableHeader,
-    listView,
+    extraRowSpacing,
     showActionFloaterButton,
   } = viewConfig();
 
@@ -196,7 +196,7 @@ const PureAnimalInventory = ({
             spacerRowHeight={tableSpacerRowHeight}
             headerClass={styles.headerClass}
             onRowClick={onRowClick}
-            listView={listView}
+            extraRowSpacing={extraRowSpacing}
           />
         ) : (
           <NoSearchResults
diff --git a/packages/webapp/src/components/Table/TableV2.jsx b/packages/webapp/src/components/Table/TableV2.jsx
index 02e954e312..e8927a41f9 100644
--- a/packages/webapp/src/components/Table/TableV2.jsx
+++ b/packages/webapp/src/components/Table/TableV2.jsx
@@ -101,7 +101,7 @@ export default function TableV2(props) {
     maxHeight,
     spacerRowHeight,
     headerClass,
-    listView,
+    extraRowSpacing,
   } = props;
 
   const [order, setOrder] = useState('asc');
@@ -169,7 +169,7 @@ export default function TableV2(props) {
             styles.table,
             shouldFixTableLayout && styles.fixed,
             alternatingRowColor && styles.alternatingRowColorStyle,
-            listView && styles.listViewTable,
+            extraRowSpacing && styles.extraRowSpacingTable,
           )}
           stickyHeader={stickyHeader && maxHeight ? true : false}
         >
@@ -202,7 +202,7 @@ export default function TableV2(props) {
                     styles.itemRow,
                     onRowClick && styles.clickable,
                     alternatingRowColor ? styles.alternatingRowColor : styles.plainRowColor,
-                    listView && styles.listViewRow,
+                    extraRowSpacing && styles.extraRowSpacing,
                   )}
                 >
                   {shouldShowCheckbox && (
@@ -334,7 +334,7 @@ TableV2.propTypes = {
   spacerRowHeight: PropTypes.number,
   /** Cheating here  using any since it is not meshing well with ts type */
   headerClass: PropTypes.any,
-  listView: PropTypes.bool,
+  extraRowSpacing: PropTypes.bool,
 };
 
 TableV2.defaultProps = {
@@ -346,5 +346,5 @@ TableV2.defaultProps = {
   defaultOrderBy: '',
   alternatingRowColor: false,
   showHeader: true,
-  listView: false,
+  extraRowSpacing: false,
 };
diff --git a/packages/webapp/src/components/Table/styles.module.scss b/packages/webapp/src/components/Table/styles.module.scss
index f747f3e546..0690a88426 100644
--- a/packages/webapp/src/components/Table/styles.module.scss
+++ b/packages/webapp/src/components/Table/styles.module.scss
@@ -121,13 +121,11 @@
   }
 }
 
-.listViewRow {
+.extraRowSpacing {
   padding: 4px 8px;
   border-spacing: 8px;
   border: solid 1px var(---Colors-Neutral-Neutral-50);
-  &.clickable {
-    cursor: default;
-  }
+  
   & > td {
     border-top: solid 1px var(--Colors-Neutral-Neutral-50);
     border-bottom: solid 1px var(--Colors-Neutral-Neutral-50);
@@ -145,7 +143,7 @@
   };
 }
 
-.listViewTable {
+.extraRowSpacingTable {
   border-spacing: 0 8px;
   .tableBody::before {
     content: none;
diff --git a/packages/webapp/src/components/Table/types.ts b/packages/webapp/src/components/Table/types.ts
index 476dd41350..1e7010eb72 100644
--- a/packages/webapp/src/components/Table/types.ts
+++ b/packages/webapp/src/components/Table/types.ts
@@ -85,5 +85,5 @@ export type TableV2Props<RowData extends TableRowData> = {
   maxHeight?: number | string;
   spacerRowHeight?: number;
   headerClass?: ClassValue;
-  listView?: boolean;
+  extraRowSpacing?: boolean;
 };
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 49d1c9bdbc..70ff470586 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -96,6 +96,9 @@ function AnimalInventory({
     switch (view) {
       case View.TASK:
         return {
+          onRowClick: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+            onSelectInventory(event, row);
+          },
           showOnlySelected: false,
           showDetailLink: false,
           showPaperBorder: true,
@@ -106,6 +109,7 @@ function AnimalInventory({
         };
       case View.TASK_SUMMARY:
         return {
+          onRowClick: undefined,
           showOnlySelected: true,
           showDetailLink: false,
           headerContainerKind: ContainerKind.OVERFLOW,
@@ -115,6 +119,9 @@ function AnimalInventory({
         };
       default:
         return {
+          onRowClick: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+            history.push(row.path);
+          },
           showOnlySelected: false,
           showDetailLink: true,
           showPaperBorder: true,
@@ -127,6 +134,7 @@ function AnimalInventory({
   };
 
   const {
+    onRowClick,
     showOnlySelected,
     showDetailLink,
     headerContainerKind,
@@ -267,18 +275,6 @@ function AnimalInventory({
     }
   };
 
-  const onRowClick = (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
-    switch (view) {
-      case View.TASK:
-        onSelectInventory(event, row);
-        break;
-      case View.TASK_SUMMARY:
-        break;
-      default:
-        history.push(row.path);
-    }
-  };
-
   const iconActions: iconAction[] = [
     { label: t(`common:ADD_TO_GROUP`), iconName: 'ADD_ANIMAL', onClick: () => ({}) },
     { label: t(`common:CREATE_A_TASK`), iconName: 'TASK_CREATION', onClick: () => ({}) },
diff --git a/packages/webapp/src/stories/Table/TableV2.stories.jsx b/packages/webapp/src/stories/Table/TableV2.stories.jsx
index 65f6db6bfa..76c51619e0 100644
--- a/packages/webapp/src/stories/Table/TableV2.stories.jsx
+++ b/packages/webapp/src/stories/Table/TableV2.stories.jsx
@@ -274,3 +274,14 @@ export const stickyHeader = {
     maxHeight: 200,
   },
 };
+
+export const extraRowSpacing = {
+  args: {
+    kind: TableKind.V2,
+    columns: getCropSalesColumns(false),
+    data: getCropSalesData(10),
+    minRows: 10,
+    maxHeight: 200,
+    extraRowSpacing: true,
+  },
+};

From 5c6840c913650b6a8fb7d4ad7700a1f060764ef5 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 15:27:12 -0500
Subject: [PATCH 30/91] LF-4483 Remove config using default values

---
 packages/webapp/src/components/Animals/Inventory/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index c04d14588f..d04b3bdf61 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -94,7 +94,6 @@ const PureAnimalInventory = ({
           showSearchBarAndFilter: true,
           alternatingRowColor: true,
           showTableHeader: isDesktop,
-          extraRowSpacing: false,
           showActionFloaterButton: false,
         };
       case View.TASK_SUMMARY:
@@ -116,7 +115,6 @@ const PureAnimalInventory = ({
           showSearchBarAndFilter: true,
           alternatingRowColor: true,
           showTableHeader: isDesktop,
-          extraRowSpacing: false,
           showActionFloaterButton: isAdmin,
         };
     }

From 983e3608b945196f43f52a199c847c6df3f64475 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 15:36:19 -0500
Subject: [PATCH 31/91] LF-4483 Change className to classes for
 MultistepPageTitle

---
 .../src/components/PageTitle/MultiStepPageTitle/index.jsx   | 6 +++---
 packages/webapp/src/components/Task/TaskLocations/index.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx b/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
index 99bfdea30e..7267ce2d72 100644
--- a/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
+++ b/packages/webapp/src/components/PageTitle/MultiStepPageTitle/index.jsx
@@ -16,12 +16,12 @@ function MultiStepPageTitle({
   cancelModalTitle,
   showConfirmCancelModal,
   setShowConfirmCancelModal,
-  className,
+  classes,
 }) {
   const [localShowModal, setLocalShowModal] = useState(false); // original form flow
 
   return (
-    <div style={style} className={className}>
+    <div style={style} className={classes?.container}>
       <div className={styles.titleContainer}>
         <div className={styles.leftContainer}>
           {onGoBack && (
@@ -55,5 +55,5 @@ MultiStepPageTitle.prototype = {
   cancelModalTitle: PropTypes.string,
   showConfirmCancelModal: PropTypes.bool,
   setShowConfirmCancelModal: PropTypes.func,
-  className: PropTypes.string,
+  classes: PropTypes.object,
 };
diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index 4c9294acec..d80dc9b4e5 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -127,7 +127,7 @@ export default function PureTaskLocations({
           cancelModalTitle={t('TASK.ADD_TASK_FLOW')}
           title={t('MANAGEMENT_DETAIL.ADD_A_TASK')}
           value={progress}
-          className={isAnimalTask && styles.titlePadding}
+          classes={{ container: isAnimalTask && styles.titlePadding }}
         />
         {isAnimalTask && (
           <ExpandableAnimalInventory

From 1686f16fbc8518ac71c2aa09defbbccf23d44c17 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:48:39 -0800
Subject: [PATCH 32/91] LF-4372 Add missing md size to Button; update Stories

Stories were updated to make the sizes clearer, use the icon sizes specified in Figma, and remove the redunancy of showing every style in default and small.
---
 .../components/Form/Button/button.module.scss |  5 ++
 .../src/components/Form/Button/index.tsx      |  3 ++
 .../src/stories/Button/Button.stories.jsx     | 50 ++++++++++++-------
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/webapp/src/components/Form/Button/button.module.scss b/packages/webapp/src/components/Form/Button/button.module.scss
index 1576aaabfb..5cb23d02b5 100644
--- a/packages/webapp/src/components/Form/Button/button.module.scss
+++ b/packages/webapp/src/components/Form/Button/button.module.scss
@@ -212,6 +212,11 @@
   gap: 4px;
 }
 
+.md {
+  min-height: 40px;
+  padding: 8px 16px;
+}
+
 .textButton {
   background-color: transparent;
   border: none;
diff --git a/packages/webapp/src/components/Form/Button/index.tsx b/packages/webapp/src/components/Form/Button/index.tsx
index d70cf3b38b..7da436e261 100644
--- a/packages/webapp/src/components/Form/Button/index.tsx
+++ b/packages/webapp/src/components/Form/Button/index.tsx
@@ -21,6 +21,7 @@ type ButtonProps = {
   color?: 'primary' | 'secondary' | 'secondary-2' | 'secondary-cta' | 'warning' | 'error' | 'none';
   children?: ReactNode;
   sm?: boolean;
+  md?: boolean;
   disabled?: boolean;
   fullLength?: boolean;
   className?: string;
@@ -34,6 +35,7 @@ const Button = ({
   color = 'primary',
   children = 'Button',
   sm,
+  md,
   disabled = false,
   fullLength = false,
   className,
@@ -49,6 +51,7 @@ const Button = ({
         styles.btn,
         color && styles[color],
         sm && styles.sm,
+        md && styles.md,
         fullLength && styles.fullLength,
         className,
       )}
diff --git a/packages/webapp/src/stories/Button/Button.stories.jsx b/packages/webapp/src/stories/Button/Button.stories.jsx
index c658de8eb2..1d666f1235 100644
--- a/packages/webapp/src/stories/Button/Button.stories.jsx
+++ b/packages/webapp/src/stories/Button/Button.stories.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Button from '../../components/Form/Button';
 import { componentDecorators } from '../Pages/config/Decorators';
 import { ReactComponent as EditIcon } from '../../assets/images/edit.svg';
@@ -65,36 +64,51 @@ Error.args = {
   children: 'Error',
 };
 
-export const PrimarySmall = Template.bind({});
-PrimarySmall.args = {
-  color: 'primary',
-  children: 'Primary',
+export const Small = Template.bind({});
+Small.args = {
+  color: 'secondary',
+  children: 'Small',
   sm: true,
 };
 
-export const SecondarySmall = Template.bind({});
-SecondarySmall.args = {
+export const Medium = Template.bind({});
+Medium.args = {
   color: 'secondary',
-  children: 'Secondary',
-  sm: true,
+  children: 'Medium',
+  md: true,
 };
 
-export const DisabledSmall = Template.bind({});
-DisabledSmall.args = {
+export const SmallWithIcon = Template.bind({});
+SmallWithIcon.args = {
   color: 'primary',
-  children: 'Disabled',
-  disabled: true,
   sm: true,
+  children: (
+    <>
+      <EditIcon style={{ width: '16px', height: '16px' }} />
+      <span>Edit</span>
+    </>
+  ),
 };
 
-export const WithIconSmall = Template.bind({});
-WithIconSmall.args = {
+export const MediumWithIcon = Template.bind({});
+MediumWithIcon.args = {
   color: 'primary',
-  sm: true,
+  md: true,
   children: (
     <>
+      <EditIcon style={{ width: '20px', height: '20px' }} />
+      <span>Edit</span>
+    </>
+  ),
+};
+
+export const LargeDefaultWithIcon = Template.bind({});
+LargeDefaultWithIcon.args = {
+  color: 'primary',
+  children: (
+    <>
+      <EditIcon style={{ width: '24px', height: '24px' }} />
       <span>Edit</span>
-      <EditIcon style={{ width: '16px', height: '16px' }} />
     </>
   ),
 };
@@ -105,8 +119,8 @@ WithIconDisabled.args = {
   disabled: true,
   children: (
     <>
+      <EditIcon style={{ width: '24px', height: '24px' }} />
       <span>Edit</span>
-      <EditIcon style={{ width: '16px', height: '16px' }} />
     </>
   ),
 };

From 40fe7eea3df58a4e89b9fbd8207f3bd172dc08f4 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 13:56:55 -0800
Subject: [PATCH 33/91] LF-4372 Pass correct behaviour to onCancel: close
 drawer and remount form, no path changes

---
 packages/webapp/src/components/Help/index.jsx   | 17 +++++++++++++++--
 .../src/containers/FeedbackSurvey/index.jsx     |  2 +-
 packages/webapp/src/containers/Help/index.jsx   | 16 ++++++++++------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index fb88031c93..2e2f993381 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -13,7 +13,13 @@ import Radio from '../Form/Radio';
 import { Label } from '../Typography/index';
 import ImagePicker from '../ImagePicker';
 
-export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_number, isLoading }) {
+export default function PureHelpRequestPage({
+  onSubmit,
+  onCancel,
+  email,
+  phone_number,
+  isLoading,
+}) {
   const [file, setFile] = useState(null);
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, formState } = useForm({
@@ -40,10 +46,15 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
     console.log(error);
   };
 
+  const handleCancel = () => {
+    onCancel?.();
+  };
+
   useEffect(() => {
     const contactInformation = contactMethodSelection === 'email' ? email : phone_number;
     setValue(CONTACT_INFO, contactInformation);
   }, [contactMethodSelection]);
+
   const submit = (data) => {
     data.support_type = data.support_type.value;
     data[data[CONTACT_METHOD]] = data.contactInfo;
@@ -51,15 +62,17 @@ export default function PureHelpRequestPage({ onSubmit, goBack, email, phone_num
     delete data.contactInfo;
     onSubmit(file, data);
   };
+
   const supportType = watch(SUPPORT_TYPE);
   const message = watch(MESSAGE);
   const disabled = Object.keys(errors).length || !supportType || !message || formState.isSubmitting;
+
   return (
     <Form
       onSubmit={handleSubmit(submit, onError)}
       buttonGroup={
         <>
-          <Button fullLength color={'secondary'} onClick={goBack}>
+          <Button fullLength color={'secondary'} onClick={handleCancel}>
             {t('common:CANCEL')}
           </Button>
           <Button type={'submit'} disabled={isLoading || disabled} fullLength>
diff --git a/packages/webapp/src/containers/FeedbackSurvey/index.jsx b/packages/webapp/src/containers/FeedbackSurvey/index.jsx
index 7d8c6c0a80..e81b68a0b7 100644
--- a/packages/webapp/src/containers/FeedbackSurvey/index.jsx
+++ b/packages/webapp/src/containers/FeedbackSurvey/index.jsx
@@ -36,7 +36,7 @@ export default function FeedbackSurvey() {
 
   const drawerContent = (
     <div className={styles.content}>
-      <HelpRequest />
+      <HelpRequest closeDrawer={() => setIsSurveyOpen(false)} />
     </div>
   );
 
diff --git a/packages/webapp/src/containers/Help/index.jsx b/packages/webapp/src/containers/Help/index.jsx
index 7868756583..9fdd6fe9df 100644
--- a/packages/webapp/src/containers/Help/index.jsx
+++ b/packages/webapp/src/containers/Help/index.jsx
@@ -1,30 +1,34 @@
-import React from 'react';
 import PureHelpRequestPage from '../../components/Help';
 import { useDispatch, useSelector } from 'react-redux';
 import { supportFileUpload } from './saga';
-import history from '../../history';
 import { isHelpLoadingSelector, startSendHelp } from '../Home/homeSlice';
 import { userFarmSelector } from '../userFarmSlice';
+import { useState } from 'react';
 
-export default function HelpRequest() {
+export default function HelpRequest({ closeDrawer }) {
   const dispatch = useDispatch();
 
   const handleSubmit = (file, data) => {
     dispatch(startSendHelp());
     dispatch(supportFileUpload({ file, form: data }));
   };
-  const handleBack = () => {
-    history.push('/');
+  const onCancel = () => {
+    closeDrawer?.();
+    setKey((prev) => prev + 1); // Remount form when closing drawer
   };
+
+  const [key, setKey] = useState(0);
+
   const { email, phone_number } = useSelector(userFarmSelector);
   const loading = useSelector(isHelpLoadingSelector);
   return (
     <PureHelpRequestPage
       onSubmit={handleSubmit}
-      goBack={handleBack}
+      onCancel={onCancel}
       email={email}
       phone_number={phone_number}
       isLoading={loading}
+      key={key}
     />
   );
 }

From 6dc98a22df4e896c4dabe10bb00bbce97e97c14c Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Tue, 19 Nov 2024 18:22:53 -0500
Subject: [PATCH 34/91] LF-4483 Remove inline styles and decrease row gap

---
 .../webapp/src/components/Table/styles.module.scss     |  2 +-
 .../webapp/src/components/Task/TaskLocations/index.jsx | 10 ++--------
 .../components/Task/TaskLocations/styles.module.scss   | 10 ++++++++++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/webapp/src/components/Table/styles.module.scss b/packages/webapp/src/components/Table/styles.module.scss
index 0690a88426..b61095e84c 100644
--- a/packages/webapp/src/components/Table/styles.module.scss
+++ b/packages/webapp/src/components/Table/styles.module.scss
@@ -144,7 +144,7 @@
 }
 
 .extraRowSpacingTable {
-  border-spacing: 0 8px;
+  border-spacing: 0 4px;
   .tableBody::before {
     content: none;
   }
diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index d80dc9b4e5..ccad107d22 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -11,6 +11,7 @@ import { cloneObject } from '../../../util';
 import Checkbox from '../../Form/Checkbox';
 import { ExpandableAnimalInventory, View } from '../../../containers/Animals/Inventory';
 import styles from './styles.module.scss';
+import clsx from 'clsx';
 export default function PureTaskLocations({
   locations,
   readOnlyPinCoordinates,
@@ -135,14 +136,7 @@ export default function PureTaskLocations({
             preSelectedIds={persistedFormData?.animalIds}
           />
         )}
-        <Main
-          style={{
-            marginTop: '24px',
-            marginBottom: '24px',
-            paddingLeft: '24px',
-            paddingRight: '24px',
-          }}
-        >
+        <Main className={clsx(styles.locationPickerText, isAnimalTask && styles.fullWidthPadding)}>
           {title || t('TASK.SELECT_TASK_LOCATIONS')}
         </Main>
         <LocationPicker
diff --git a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
index 3bb1c22808..aec4b8800d 100644
--- a/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
+++ b/packages/webapp/src/components/Task/TaskLocations/styles.module.scss
@@ -18,3 +18,13 @@
 .titlePadding {
   padding: 24px 24px 0 24px;
 }
+
+.locationPickerText {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.fullWidthPadding {
+  padding-left: 24px;
+  padding-right: 24px;
+}

From 3d5b532a83e4ab0eefb2c14bb6d5196e5ace2e4c Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:34:32 -0800
Subject: [PATCH 35/91] LF-4372 Component tidying

---
 packages/webapp/src/components/Help/index.jsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 2e2f993381..23a8babfbe 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -1,11 +1,11 @@
-import Form from '../Form';
-import Button from '../Form/Button';
-import { ReactComponent as AddFile } from './../../assets/images/help/AddFile.svg';
-import React, { useEffect, useState } from 'react';
-import { Error } from '../Typography';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import styles from './styles.module.scss';
+import Form from '../Form';
+import Button from '../Form/Button';
+import { Error } from '../Typography';
 import ReactSelect from '../Form/ReactSelect';
 import TextArea from '../Form/TextArea';
 import Input from '../Form/Input';
@@ -24,7 +24,9 @@ export default function PureHelpRequestPage({
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, formState } = useForm({
     mode: 'onTouched',
-    defaultValues: { contact_method: 'email' },
+    defaultValues: {
+      contact_method: 'email',
+    },
   });
 
   const { errors } = formState;
@@ -148,4 +150,8 @@ export default function PureHelpRequestPage({
 
 PureHelpRequestPage.prototype = {
   onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  email: PropTypes.string,
+  phone_number: PropTypes.string,
+  isLoading: PropTypes.bool,
 };

From cb52cdc2c693c15f044ea14c86fffe9e45139d18 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:41:36 -0800
Subject: [PATCH 36/91] LF-4372 Adjust styling and layout

---
 .../src/components/Drawer/style.module.scss   |   1 +
 .../src/components/Form/form.module.scss      |   1 +
 packages/webapp/src/components/Help/index.jsx | 126 ++++++++++--------
 .../src/components/Help/styles.module.scss    |  20 +++
 .../FeedbackSurvey/styles.module.scss         |   2 +-
 5 files changed, 92 insertions(+), 58 deletions(-)
 create mode 100644 packages/webapp/src/components/Help/styles.module.scss

diff --git a/packages/webapp/src/components/Drawer/style.module.scss b/packages/webapp/src/components/Drawer/style.module.scss
index 0c216299f5..70ca08d905 100644
--- a/packages/webapp/src/components/Drawer/style.module.scss
+++ b/packages/webapp/src/components/Drawer/style.module.scss
@@ -67,6 +67,7 @@
 
 .sideDrawer {
   top: var(--global-navbar-height);
+  max-height: calc(100vh - var(--global-navbar-height));
   right: -100%;
   border-bottom-left-radius: 10px;
   width: 416px;
diff --git a/packages/webapp/src/components/Form/form.module.scss b/packages/webapp/src/components/Form/form.module.scss
index e59bed396e..3777e40f5f 100644
--- a/packages/webapp/src/components/Form/form.module.scss
+++ b/packages/webapp/src/components/Form/form.module.scss
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  height: 100%;
 }
diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 23a8babfbe..bcd7abd687 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -74,76 +74,88 @@ export default function PureHelpRequestPage({
       onSubmit={handleSubmit(submit, onError)}
       buttonGroup={
         <>
-          <Button fullLength color={'secondary'} onClick={handleCancel}>
+          <Button fullLength color={'secondary-cta'} onClick={handleCancel} md>
             {t('common:CANCEL')}
           </Button>
-          <Button type={'submit'} disabled={isLoading || disabled} fullLength>
+          <Button type={'submit'} disabled={isLoading || disabled} fullLength md>
             {isLoading ? t('common:SUBMITTING') : t('common:SUBMIT')}
           </Button>
         </>
       }
+      fullWidthContent={true}
+      classes={{
+        container: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '36px',
+          padding: '16px 24px 36px 24px',
+        },
+      }}
     >
-      <Controller
-        control={control}
-        name={SUPPORT_TYPE}
-        rules={{ required: true }}
-        render={({ field: { onChange, onBlur, value } }) => (
-          <ReactSelect
-            label={t('HELP.TYPE_SUPPORT_LABEL')}
-            placeholder={t('HELP.TYPE_SUPPORT_PLACEHOLDER')}
-            options={supportTypeOptions}
-            onChange={onChange}
-            value={value}
-          />
-        )}
-      />
-      {errors[SUPPORT_TYPE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
-      <TextArea
-        label={t('HELP.MESSAGE_LABEL')}
-        hookFormRegister={register(MESSAGE, { required: true })}
-        style={{ marginTop: '30px', marginBottom: '36px' }}
-      />
-      {errors[MESSAGE] ? (
-        <Error style={{ marginTop: '-36px', marginBottom: '30px' }}>
-          {t('HELP.REQUIRED_LABEL')}
-        </Error>
-      ) : (
-        ''
-      )}
-      <div style={{ marginBottom: '36px' }}>
+      <div>
+        <Controller
+          control={control}
+          name={SUPPORT_TYPE}
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              label={t('HELP.TYPE_SUPPORT_LABEL')}
+              placeholder={t('HELP.TYPE_SUPPORT_PLACEHOLDER')}
+              options={supportTypeOptions}
+              onChange={onChange}
+              value={value}
+            />
+          )}
+        />
+        {errors[SUPPORT_TYPE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
+      </div>
+      <div>
+        <TextArea
+          label={t('HELP.MESSAGE_LABEL')}
+          hookFormRegister={register(MESSAGE, { required: true })}
+        />
+        {errors[MESSAGE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
+      </div>
+      <div>
         <ImagePicker
           label={t('HELP.ATTACHMENT_LABEL')}
           onSelectImage={setFile}
           onRemoveImage={() => setFile(null)}
         />
       </div>
-      <Label style={{ marginBottom: '16px' }}>{t('HELP.PREFERRED_CONTACT')}</Label>
-      <Radio
-        label={t('HELP.EMAIL')}
-        value={'email'}
-        hookFormRegister={register(CONTACT_METHOD, { required: true })}
-        defaultChecked={true}
-      />
-      <Radio
-        label={t('HELP.WHATSAPP')}
-        value={'whatsapp'}
-        hookFormRegister={register(CONTACT_METHOD, { required: true })}
-      />
-      <Input
-        label={
-          contactMethodSelection === 'email' ? t('HELP.EMAIL') : t('HELP.WHATSAPP_NUMBER_LABEL')
-        }
-        hookFormRegister={register(CONTACT_INFO, {
-          required: true,
-          pattern: contactMethodSelection === 'email' ? validEmailRegex : /./g,
-        })}
-      />
-      {errors[CONTACT_INFO] && errors[CONTACT_INFO].type !== 'pattern' ? (
-        <Error>{t('HELP.REQUIRED_LABEL')}</Error>
-      ) : (
-        ''
-      )}
-      {errors[CONTACT_INFO]?.type === 'pattern' ? <Error>Invalid Email</Error> : ''}
+      <div>
+        <Label>{t('HELP.PREFERRED_CONTACT')}</Label>
+        <div className={styles.contactMethods}>
+          <Radio
+            label={t('HELP.EMAIL')}
+            value={'email'}
+            hookFormRegister={register(CONTACT_METHOD, { required: true })}
+            defaultChecked={true}
+          />
+          <Radio
+            label={t('HELP.WHATSAPP')}
+            value={'whatsapp'}
+            hookFormRegister={register(CONTACT_METHOD, { required: true })}
+          />
+        </div>
+      </div>
+      <div>
+        <Input
+          label={
+            contactMethodSelection === 'email' ? t('HELP.EMAIL') : t('HELP.WHATSAPP_NUMBER_LABEL')
+          }
+          hookFormRegister={register(CONTACT_INFO, {
+            required: true,
+            pattern: contactMethodSelection === 'email' ? validEmailRegex : /./g,
+          })}
+        />
+        {errors[CONTACT_INFO] && errors[CONTACT_INFO].type !== 'pattern' ? (
+          <Error>{t('HELP.REQUIRED_LABEL')}</Error>
+        ) : (
+          ''
+        )}
+        {errors[CONTACT_INFO]?.type === 'pattern' ? <Error>Invalid Email</Error> : ''}
+      </div>
     </Form>
   );
 }
diff --git a/packages/webapp/src/components/Help/styles.module.scss b/packages/webapp/src/components/Help/styles.module.scss
new file mode 100644
index 0000000000..ae8e142364
--- /dev/null
+++ b/packages/webapp/src/components/Help/styles.module.scss
@@ -0,0 +1,20 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.contactMethods {
+  display: flex;
+  gap: 36px;
+  font-weight: bold;
+}
diff --git a/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss b/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss
index fb4f5b7211..e55ba698b5 100644
--- a/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss
+++ b/packages/webapp/src/containers/FeedbackSurvey/styles.module.scss
@@ -51,5 +51,5 @@
 }
 
 .content {
-  padding-bottom: 32px;
+  height: 100%;
 }

From d40e520a1d16546b977f33311d53355fada0e995 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 18 Nov 2024 16:02:13 -0800
Subject: [PATCH 37/91] LF-4384 Update WithStepperProgressBar not to use
 FixedHeaderContainer for single step form

---
 .../ContextForm/WithStepperProgressBar.tsx    | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 3d4b91f102..37a1c3f6c5 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -133,19 +133,26 @@ export const WithStepperProgressBar = ({
     setShowCancelFlow?.(false);
   };
 
-  return (
-    <FixedHeaderContainer
-      header={
-        isSingleStep ? null : (
+  const Wrapper = ({ children }: { children: ReactNode }) =>
+    isSingleStep ? (
+      <>{children}</>
+    ) : (
+      <FixedHeaderContainer
+        header={
           <StepperProgressBar
             {...stepperProgressBarConfig}
             title={stepperProgressBarTitle}
             steps={steps.map(({ title }) => title)}
             activeStep={activeStepIndex}
           />
-        )
-      }
-    >
+        }
+      >
+        {children}
+      </FixedHeaderContainer>
+    );
+
+  return (
+    <Wrapper>
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
         <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
@@ -166,6 +173,6 @@ export const WithStepperProgressBar = ({
           handleCancel={handleCancel}
         />
       )}
-    </FixedHeaderContainer>
+    </Wrapper>
   );
 };

From aab542c1f1abff5d04593ad492e22a2d31721647 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 18 Nov 2024 16:03:28 -0800
Subject: [PATCH 38/91] LF-4384 Add animals url to FULL_WIDTH_ROUTES in App

---
 packages/webapp/src/App.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
index cc8f2b7dbf..0b472a1607 100644
--- a/packages/webapp/src/App.jsx
+++ b/packages/webapp/src/App.jsx
@@ -24,11 +24,11 @@ import { NotistackSnackbar } from './containers/Snackbar/NotistackSnackbar';
 import { OfflineDetector } from './containers/hooks/useOfflineDetector/OfflineDetector';
 import styles from './styles.module.scss';
 import Routes from './routes';
-import { ANIMALS_INVENTORY_URL } from './util/siteMapConstants';
+import { ANIMALS_INVENTORY_URL, ANIMALS_URL } from './util/siteMapConstants';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
-  const FULL_WIDTH_ROUTES = ['/map', ANIMALS_INVENTORY_URL];
+  const FULL_WIDTH_ROUTES = ['/map', ANIMALS_INVENTORY_URL, ANIMALS_URL];
   const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
   return (

From 5c390de2d6e1b8014d0c04130c8288e0252486c6 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 18 Nov 2024 16:39:33 -0800
Subject: [PATCH 39/91] LF-4384 Refactor WithStepperProgressBar

---
 .../ContextForm/WithStepperProgressBar.tsx    | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 37a1c3f6c5..f615442148 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -133,26 +133,8 @@ export const WithStepperProgressBar = ({
     setShowCancelFlow?.(false);
   };
 
-  const Wrapper = ({ children }: { children: ReactNode }) =>
-    isSingleStep ? (
-      <>{children}</>
-    ) : (
-      <FixedHeaderContainer
-        header={
-          <StepperProgressBar
-            {...stepperProgressBarConfig}
-            title={stepperProgressBarTitle}
-            steps={steps.map(({ title }) => title)}
-            activeStep={activeStepIndex}
-          />
-        }
-      >
-        {children}
-      </FixedHeaderContainer>
-    );
-
-  return (
-    <Wrapper>
+  const renderContent = () => (
+    <>
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
         <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
@@ -173,6 +155,23 @@ export const WithStepperProgressBar = ({
           handleCancel={handleCancel}
         />
       )}
-    </Wrapper>
+    </>
+  );
+
+  return isSingleStep ? (
+    renderContent()
+  ) : (
+    <FixedHeaderContainer
+      header={
+        <StepperProgressBar
+          {...stepperProgressBarConfig}
+          title={stepperProgressBarTitle}
+          steps={steps.map(({ title }) => title)}
+          activeStep={activeStepIndex}
+        />
+      }
+    >
+      {renderContent()}
+    </FixedHeaderContainer>
   );
 };

From 45ba5908eb2477678ec8e30fb7390ea79820207e Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 18 Nov 2024 16:41:37 -0800
Subject: [PATCH 40/91] LF-4384 Update SingleAnimalView to use
 FixedHeaderContainer

---
 .../Animals/SingleAnimalView/index.tsx        | 73 ++++++++++---------
 .../SingleAnimalView/styles.module.scss       |  5 ++
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 9df89cec75..d15c5b7e40 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -23,6 +23,7 @@ import { enqueueErrorSnackbar, enqueueSuccessSnackbar } from '../../Snackbar/sna
 import AnimalReadonlyEdit from './AnimalReadonlyEdit';
 import Tab, { Variant as TabVariants } from '../../../components/RouterTab/Tab';
 import AnimalSingleViewHeader from '../../../components/Animals/AnimalSingleViewHeader';
+import FixedHeaderContainer from '../../../components/Animals/FixedHeaderContainer';
 import { addNullstoMissingFields } from './utils';
 import { useInitialAnimalData } from './useInitialAnimalData';
 import {
@@ -155,39 +156,45 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
 
   return (
     <div className={styles.container}>
-      <div>
-        {defaultFormValues && (
-          <AnimalSingleViewHeader
-            onEdit={initiateEdit}
-            isEditing={isEditing}
-            onBack={() => history.push('/animals/inventory')}
-            /* @ts-ignore */
-            animalOrBatch={defaultFormValues}
-            defaultBreeds={defaultAnimalBreeds}
-            defaultTypes={defaultAnimalTypes}
-            customBreeds={customAnimalBreeds}
-            customTypes={customAnimalTypes}
-          />
-        )}
-      </div>
-      {/* <Tab
-        tabs={routerTabs}
-        variant={TabVariants.UNDERLINE}
-        isSelected={(tab) => tab.path === match.url}
-        onClick={(tab) => history.push(tab.path)}
-      /> */}
-      <ContextForm
-        onSave={onSave}
-        hasSummaryWithinForm={false}
-        isCompactSideMenu={isCompactSideMenu}
-        variant={Variant.STEPPER_PROGRESS_BAR}
-        history={history}
-        getSteps={getFormSteps}
-        defaultFormValues={defaultFormValues}
-        cancelModalTitle={t('ANIMAL.EDIT_ANIMAL_FLOW')}
-        isEditing={isEditing}
-        setIsEditing={setIsEditing}
-      />
+      <FixedHeaderContainer
+        classes={{ divWrapper: styles.contentWrapper }}
+        header={
+          <>
+            {defaultFormValues && (
+              <AnimalSingleViewHeader
+                onEdit={initiateEdit}
+                isEditing={isEditing}
+                onBack={() => history.push('/animals/inventory')}
+                /* @ts-ignore */
+                animalOrBatch={defaultFormValues}
+                defaultBreeds={defaultAnimalBreeds}
+                defaultTypes={defaultAnimalTypes}
+                customBreeds={customAnimalBreeds}
+                customTypes={customAnimalTypes}
+              />
+            )}
+            {/* <Tab
+              tabs={routerTabs}
+              variant={TabVariants.UNDERLINE}
+              isSelected={(tab) => tab.path === match.url}
+              onClick={(tab) => history.push(tab.path)}
+            /> */}
+          </>
+        }
+      >
+        <ContextForm
+          onSave={onSave}
+          hasSummaryWithinForm={false}
+          isCompactSideMenu={isCompactSideMenu}
+          variant={Variant.STEPPER_PROGRESS_BAR}
+          history={history}
+          getSteps={getFormSteps}
+          defaultFormValues={defaultFormValues}
+          cancelModalTitle={t('ANIMAL.EDIT_ANIMAL_FLOW')}
+          isEditing={isEditing}
+          setIsEditing={setIsEditing}
+        />
+      </FixedHeaderContainer>
     </div>
   );
 }
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/styles.module.scss b/packages/webapp/src/containers/Animals/SingleAnimalView/styles.module.scss
index d0c9d3af66..26e6ac785f 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/styles.module.scss
@@ -18,3 +18,8 @@
   flex-direction: column;
   gap: 20px;
 }
+
+.contentWrapper {
+  // avoid hiding header's box-shadow or border
+  margin-top: 1px;
+}

From 26328140118b85dc483051ba34980f15f55977a3 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 18 Nov 2024 17:35:19 -0800
Subject: [PATCH 41/91] LF-4384 Implement animal removal

---
 .../Animals/SingleAnimalView/index.tsx        | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index d15c5b7e40..547c591f49 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -42,6 +42,9 @@ import {
 import { Animal, AnimalBatch } from '../../../store/api/types';
 import { AnimalOrBatchKeys } from '../types';
 import { AnimalDetailsFormFields } from '../AddAnimals/types';
+import RemoveAnimalsModal, { FormFields } from '../../../components/Animals/RemoveAnimalsModal';
+import useAnimalOrBatchRemoval from '../Inventory/useAnimalOrBatchRemoval';
+import { generateInventoryId } from '../../../util/animal';
 
 export const STEPS = {
   DETAILS: 'details',
@@ -154,6 +157,25 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
     onGoForward();
   };
 
+  const getInventoryId = () => {
+    if (!selectedAnimal && !selectedBatch) {
+      return '';
+    }
+
+    const animalOrBatch = AnimalOrBatchKeys[selectedAnimal ? 'ANIMAL' : 'BATCH'];
+    return generateInventoryId(animalOrBatch, (selectedAnimal || selectedBatch)!);
+  };
+
+  const { onConfirmRemoveAnimals, removalModalOpen, setRemovalModalOpen } = useAnimalOrBatchRemoval(
+    [getInventoryId()],
+    () => ({}),
+  );
+
+  const onConfirmRemoval = (formData: FormFields) => {
+    onConfirmRemoveAnimals(formData);
+    history.push('/animals/inventory');
+  };
+
   return (
     <div className={styles.container}>
       <FixedHeaderContainer
@@ -163,6 +185,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
             {defaultFormValues && (
               <AnimalSingleViewHeader
                 onEdit={initiateEdit}
+                onRemove={() => setRemovalModalOpen(true)}
                 isEditing={isEditing}
                 onBack={() => history.push('/animals/inventory')}
                 /* @ts-ignore */
@@ -194,6 +217,12 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
           isEditing={isEditing}
           setIsEditing={setIsEditing}
         />
+        <RemoveAnimalsModal
+          isOpen={removalModalOpen}
+          onClose={() => setRemovalModalOpen(false)}
+          onConfirm={onConfirmRemoval}
+          showSuccessMessage={false}
+        />
       </FixedHeaderContainer>
     </div>
   );

From b7b76c585e9694272f61a63be683078f1e0cfe65 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:12:48 -0800
Subject: [PATCH 42/91] LF-4384 Create custom RouteComponentProps type

---
 packages/webapp/src/types/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/webapp/src/types/index.ts b/packages/webapp/src/types/index.ts
index 4a240ab49f..d6c6fc890a 100644
--- a/packages/webapp/src/types/index.ts
+++ b/packages/webapp/src/types/index.ts
@@ -13,8 +13,19 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+import { RouteComponentProps } from 'react-router-dom';
+import { History } from 'history';
+
 export enum OrganicStatus {
   'NON_ORGANIC' = 'Non-Organic',
   'TRANSITIONAL' = 'Transitional',
   'ORGANIC' = 'Organic',
 }
+
+// Custom RouteComponentProps with a custom history type from the 'history' library
+export type CustomRouteComponentProps<T extends { [K in keyof T]?: string | undefined }> = Omit<
+  RouteComponentProps<T>,
+  'history'
+> & {
+  history: History; // Custom history type
+};

From 4248a6bb145fbb68035614edd057e1ab103f012a Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:15:53 -0800
Subject: [PATCH 43/91] LF-4384 Replace RouteComponentProps with
 CustomRouteComponentProps

---
 .../webapp/src/containers/Animals/SingleAnimalView/index.tsx  | 4 ++--
 .../Animals/SingleAnimalView/useInitialAnimalData.ts          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 547c591f49..1a2c810cc4 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -15,7 +15,6 @@
 
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RouteComponentProps } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import styles from './styles.module.scss';
 import { ContextForm, Variant } from '../../../components/Form/ContextForm/';
@@ -45,6 +44,7 @@ import { AnimalDetailsFormFields } from '../AddAnimals/types';
 import RemoveAnimalsModal, { FormFields } from '../../../components/Animals/RemoveAnimalsModal';
 import useAnimalOrBatchRemoval from '../Inventory/useAnimalOrBatchRemoval';
 import { generateInventoryId } from '../../../util/animal';
+import { CustomRouteComponentProps } from '../../../types';
 
 export const STEPS = {
   DETAILS: 'details',
@@ -54,7 +54,7 @@ interface RouteParams {
   id: string;
 }
 
-interface AddAnimalsProps extends RouteComponentProps<RouteParams> {
+interface AddAnimalsProps extends CustomRouteComponentProps<RouteParams> {
   isCompactSideMenu: boolean;
 }
 
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts b/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
index bbdcc21da4..b8b2fa3645 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
@@ -13,19 +13,19 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { RouteComponentProps } from 'react-router-dom';
 import { useGetAnimalBatchesQuery, useGetAnimalsQuery } from '../../../store/api/apiSlice';
 import { useAnimalOptions } from '../AddAnimals/useAnimalOptions';
 import { DetailsFields } from '../AddAnimals/types';
 import { generateFormDate } from './utils';
 import { ANIMAL_ID_PREFIX, AnimalOrBatchKeys } from '../types';
 import { generateUniqueAnimalId } from '../../../util/animal';
+import { CustomRouteComponentProps } from '../../../types';
 
 interface RouteParams {
   id: string;
 }
 
-interface UseInitialAnimalDataProps extends RouteComponentProps<RouteParams> {}
+interface UseInitialAnimalDataProps extends CustomRouteComponentProps<RouteParams> {}
 
 export const useInitialAnimalData = ({ match }: UseInitialAnimalDataProps) => {
   const { selectedAnimal } = useGetAnimalsQuery(undefined, {

From 2f1ac45be1a7d8e50332c1fe301d460f647a9d7b Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:18:31 -0800
Subject: [PATCH 44/91] LF-4384 Replace history.push with history.back in
 SingleAnimalView

---
 .../webapp/src/containers/Animals/SingleAnimalView/index.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 1a2c810cc4..9cee19256f 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -173,7 +173,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
 
   const onConfirmRemoval = (formData: FormFields) => {
     onConfirmRemoveAnimals(formData);
-    history.push('/animals/inventory');
+    history.back();
   };
 
   return (
@@ -187,7 +187,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
                 onEdit={initiateEdit}
                 onRemove={() => setRemovalModalOpen(true)}
                 isEditing={isEditing}
-                onBack={() => history.push('/animals/inventory')}
+                onBack={history.back}
                 /* @ts-ignore */
                 animalOrBatch={defaultFormValues}
                 defaultBreeds={defaultAnimalBreeds}

From d8e013ab56c26a279d1e1313e0c10994e39ad097 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:24:37 -0800
Subject: [PATCH 45/91] LF-4384 Redirect to unknown record screen when no
 animal or batch for the URL

---
 .../src/containers/Animals/SingleAnimalView/index.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 9cee19256f..a72ce08bd2 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import styles from './styles.module.scss';
@@ -101,6 +101,12 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
     location,
   });
 
+  useEffect(() => {
+    if (!selectedAnimal && !selectedBatch) {
+      history.replace('/unknown_record');
+    }
+  }, [selectedAnimal, selectedBatch, history]);
+
   // Form submission
   const [updateAnimals] = useUpdateAnimalsMutation();
   const [updateBatches] = useUpdateAnimalBatchesMutation();

From ace818dd62abb66e2c0771b34ff1fd8c940c1793 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:37:59 -0800
Subject: [PATCH 46/91] LF-4384 Update MeatballsMenu and DropdownButton to
 accept disabled prop

---
 packages/webapp/src/components/Form/DropDownButton/index.jsx | 2 ++
 packages/webapp/src/components/Menu/MeatballsMenu/index.tsx  | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Form/DropDownButton/index.jsx b/packages/webapp/src/components/Form/DropDownButton/index.jsx
index f6ca58fec9..bbca6d8953 100644
--- a/packages/webapp/src/components/Form/DropDownButton/index.jsx
+++ b/packages/webapp/src/components/Form/DropDownButton/index.jsx
@@ -29,6 +29,7 @@ export default function DropdownButton({
   type,
   classes: propClasses = {},
   menuPositionOffset,
+  disabled = false,
 }) {
   const classes = useStyles();
   const [isOpen, setOpen] = useState(defaultOpen);
@@ -68,6 +69,7 @@ export default function DropdownButton({
         aria-controls={isOpen ? 'composition-menu' : undefined}
         aria-expanded={isOpen ? 'true' : undefined}
         aria-haspopup="true"
+        disabled={disabled}
       >
         {children}
         {!noIcon && (
diff --git a/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx b/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx
index 99034a691d..08b463ea49 100644
--- a/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx
+++ b/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx
@@ -22,9 +22,10 @@ import styles from './styles.module.scss';
 export type MeatballsMenuProps = {
   classes?: { button?: string };
   options: { label: ReactNode; onClick: () => void }[];
+  disabled: boolean;
 };
 
-const MeatballsMenu = ({ options, classes }: MeatballsMenuProps) => {
+const MeatballsMenu = ({ options, classes, disabled = false }: MeatballsMenuProps) => {
   return (
     <DropdownButton
       type={'v2'}
@@ -39,6 +40,7 @@ const MeatballsMenu = ({ options, classes }: MeatballsMenuProps) => {
         />
       ))}
       menuPositionOffset={[0, 1]}
+      disabled={disabled}
     >
       <BsThreeDots className={styles.menuIcon} />
     </DropdownButton>

From 4ac69a8e04cbcdf3441597147934ea3651dc9a26 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 10:39:36 -0800
Subject: [PATCH 47/91] LF-4384 Update AnimalSingleViewHeader to disable menu
 button while editing

---
 .../src/components/Animals/AnimalSingleViewHeader/index.tsx    | 1 +
 .../Animals/AnimalSingleViewHeader/styles.module.scss          | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
index ae959cf347..75a266aa79 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
@@ -107,6 +107,7 @@ const ContainerWithButtons = ({
       <div className={styles.statusAndButton}>
         {!isCompactView && isEditing ? <div>{t('common:EDITING')}</div> : null}
         <MeatballsMenu
+          disabled={!!isEditing}
           options={options}
           classes={{ button: isEditing ? styles.editingStatusButton : '' }}
         />
diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
index 365b5e6adc..bbc8121fbf 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
@@ -82,7 +82,8 @@
   padding-left: 16px;
 }
 
-.editingStatusButton {
+.editingStatusButton,
+.editingStatusButton:disabled {
   background: var(--Btn-primary-hover);
   box-shadow: 1px 1px 0px 0px var(--Colors-Primary-Primary-teal-300);
 

From 6054d79600aeba7d7c7e595ea44da29381963ca6 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 13:07:44 -0800
Subject: [PATCH 48/91] LF-4384 Add missing desiredKeys to
 animalBatchController's editAnimalBatches

---
 packages/api/src/controllers/animalBatchController.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/api/src/controllers/animalBatchController.js b/packages/api/src/controllers/animalBatchController.js
index 1691af7707..919e4dacd4 100644
--- a/packages/api/src/controllers/animalBatchController.js
+++ b/packages/api/src/controllers/animalBatchController.js
@@ -124,6 +124,11 @@ const animalBatchController = {
           'origin_id',
           'group_ids',
           'animal_batch_use_relationships',
+          'birth_date',
+          'dam',
+          'sire',
+          'brought_in_date',
+          'weaning_date',
         ];
 
         // select only allowed properties to edit

From 3f72c8060b735f07f4f24732aee7f5d593cf87bb Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 13:09:06 -0800
Subject: [PATCH 49/91] LF-4384 Update parseUniqueDefaultId to handle exception
 (fix filtered animalUseOptions)

---
 packages/webapp/src/util/animal.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/util/animal.ts b/packages/webapp/src/util/animal.ts
index 2003e57efa..5718338f89 100644
--- a/packages/webapp/src/util/animal.ts
+++ b/packages/webapp/src/util/animal.ts
@@ -58,7 +58,10 @@ export const generateUniqueAnimalId = (
 };
 
 export const parseUniqueDefaultId = (uniqueId: string): number | null => {
-  if (uniqueId.startsWith(ANIMAL_ID_PREFIX.CUSTOM)) {
+  if (
+    uniqueId.startsWith(ANIMAL_ID_PREFIX.CUSTOM) ||
+    !uniqueId.includes(ANIMAL_ID_PREFIX.DEFAULT)
+  ) {
     return null;
   }
   return Number(uniqueId.split('_')[1]);

From b3edb848fb46875e9c9ace5b87ab03eab33079c3 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 13:31:41 -0800
Subject: [PATCH 50/91] LF-4384 Add styles to batch count in
 AnimalSingleViewHeader

---
 .../Animals/AnimalSingleViewHeader/styles.module.scss       | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
index bbc8121fbf..29b0cb1d4a 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
@@ -153,6 +153,8 @@
   bottom: 8px;
 
   height: 24px;
+  min-width: 20px;
+  max-width: 48px;
   padding: 4px;
   border-radius: 2px;
   background: var(--Colors-Accent---singles-Purple-light);
@@ -161,6 +163,10 @@
   color: var(--Colors-Accent---singles-Purple-full);
   font-size: 12px;
   font-weight: 600;
+  text-align: center;
+
+  /* Counts with more than six digits will be visually cut off */
+  overflow: hidden;
 }
 
 .desktopBasicInfo {

From f29364a07f7f644ea05766bb618faae97d8a5b54 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 13:47:48 -0800
Subject: [PATCH 51/91] LF-4384 Adjust batch count width in
 AnimalSingleViewHeader

---
 .../Animals/AnimalSingleViewHeader/styles.module.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
index 29b0cb1d4a..3b319cd318 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss
@@ -154,7 +154,7 @@
 
   height: 24px;
   min-width: 20px;
-  max-width: 48px;
+  max-width: 44px;
   padding: 4px;
   border-radius: 2px;
   background: var(--Colors-Accent---singles-Purple-light);
@@ -165,7 +165,7 @@
   font-weight: 600;
   text-align: center;
 
-  /* Counts with more than six digits will be visually cut off */
+  /* Counts with more than five digits will be visually cut off */
   overflow: hidden;
 }
 

From a5452e1134bc103908b92a78e24f5b9de5bcffd0 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 14:49:34 -0800
Subject: [PATCH 52/91] LF-4384 Update getRecordIfExists middleware helper not
 to include removed animals

---
 packages/api/src/middleware/validation/checkAnimalOrBatch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api/src/middleware/validation/checkAnimalOrBatch.js b/packages/api/src/middleware/validation/checkAnimalOrBatch.js
index 9cc5fa9faf..3d0029007e 100644
--- a/packages/api/src/middleware/validation/checkAnimalOrBatch.js
+++ b/packages/api/src/middleware/validation/checkAnimalOrBatch.js
@@ -396,7 +396,7 @@ const getRecordIfExists = async (animalOrBatch, animalOrBatchKey, farm_id) => {
   return await AnimalOrBatchModel[animalOrBatchKey]
     .query()
     .findById(animalOrBatch.id)
-    .where({ farm_id })
+    .where({ farm_id, animal_removal_reason_id: null })
     .whereNotDeleted()
     .withGraphFetched(relations);
 };

From ad65572cf795d24581397ad92a432a46667ac008 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 15:30:13 -0800
Subject: [PATCH 53/91] LF-4384 Update useAnimalOrBatchRemoval to return result

---
 .../Inventory/useAnimalOrBatchRemoval.ts      | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts b/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
index 65545e1c91..c76063ca20 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { Dispatch, SetStateAction, useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import {
   useDeleteAnimalBatchesMutation,
   useDeleteAnimalsMutation,
@@ -52,6 +52,7 @@ const useAnimalOrBatchRemoval = (
     const animalBatchRemovalArray = [];
     const selectedAnimalIds: string[] = [];
     const selectedBatchIds: string[] = [];
+    let result;
 
     for (const id of selectedInventoryIds) {
       const { kind, id: entity_id } = parseInventoryId(id);
@@ -74,33 +75,36 @@ const useAnimalOrBatchRemoval = (
       }
     }
 
-    try {
-      if (animalRemovalArray.length) {
-        await mutations['removeAnimals'].trigger(animalRemovalArray).unwrap();
+    if (animalRemovalArray.length) {
+      result = await mutations['removeAnimals'].trigger(animalRemovalArray);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
+      } else {
         setSelectedInventoryIds((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
     }
 
-    try {
-      if (animalBatchRemovalArray.length) {
-        await mutations['removeBatches'].trigger(animalBatchRemovalArray).unwrap();
+    if (animalBatchRemovalArray.length) {
+      result = await mutations['removeBatches'].trigger(animalBatchRemovalArray);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
+      } else {
         setSelectedInventoryIds((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
     }
 
     setRemovalModalOpen(false);
+    return result;
   };
 
   const handleAnimalOrBatchDeletion = async () => {
@@ -108,6 +112,7 @@ const useAnimalOrBatchRemoval = (
     const selectedAnimalIds: string[] = [];
     const animalBatchIds: number[] = [];
     const selectedBatchIds: string[] = [];
+    let result;
 
     for (const id of selectedInventoryIds) {
       const { kind, id: entity_id } = parseInventoryId(id);
@@ -120,40 +125,42 @@ const useAnimalOrBatchRemoval = (
       }
     }
 
-    try {
-      if (animalIds.length) {
-        await mutations['deleteAnimals'].trigger(animalIds).unwrap();
+    if (animalIds.length) {
+      result = await mutations['deleteAnimals'].trigger(animalIds);
+
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
+      } else {
         setSelectedInventoryIds((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
     }
 
-    try {
-      if (animalBatchIds.length) {
-        await mutations['deleteBatches'].trigger(animalBatchIds).unwrap();
+    if (animalBatchIds.length) {
+      result = await mutations['deleteBatches'].trigger(animalBatchIds);
+      if (result.error) {
+        console.log(result.error);
+        dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
+      } else {
         setSelectedInventoryIds((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));
       }
-    } catch (e) {
-      console.log(e);
-      dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
     }
 
     setRemovalModalOpen(false);
+    return result;
   };
 
-  const onConfirmRemoveAnimals = (formData: FormFields) => {
+  const onConfirmRemoveAnimals = async (formData: FormFields) => {
     if (Number(formData.reason) === CREATED_IN_ERROR_ID) {
-      handleAnimalOrBatchDeletion();
+      return handleAnimalOrBatchDeletion();
     } else {
-      handleAnimalOrBatchRemoval(formData);
+      return handleAnimalOrBatchRemoval(formData);
     }
   };
 

From 8c432135898c5c648dd6e9aab09e017695bc8709 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 15:32:38 -0800
Subject: [PATCH 54/91] LF-4384 Update onConfirmRemoval in SingleAnimalView to
 call history.back only after successful API call

---
 .../src/containers/Animals/SingleAnimalView/index.tsx    | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index a72ce08bd2..bca7adfb13 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -177,9 +177,12 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
     () => ({}),
   );
 
-  const onConfirmRemoval = (formData: FormFields) => {
-    onConfirmRemoveAnimals(formData);
-    history.back();
+  const onConfirmRemoval = async (formData: FormFields) => {
+    const result = await onConfirmRemoveAnimals(formData);
+
+    if (!result.error) {
+      history.back();
+    }
   };
 
   return (

From b9d72e35b1ee979ebbf9a52cd31c2e523eb2e049 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 19 Nov 2024 15:41:39 -0800
Subject: [PATCH 55/91] LF-4384 Hide meatballs menu for removed animals

---
 .../Animals/AnimalSingleViewHeader/index.tsx   | 18 ++++++++++++------
 .../Animals/SingleAnimalView/index.tsx         |  3 +++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
index 75a266aa79..ca62ad45bd 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
@@ -83,6 +83,7 @@ type ContainerWithButtonsProps = {
   children: ReactNode;
   contentClassName?: string;
   isCompactView?: boolean;
+  hideMenu: boolean;
   isEditing?: boolean;
   options: { label: ReactNode; onClick: () => void }[];
   onBack: () => void;
@@ -93,6 +94,7 @@ const ContainerWithButtons = ({
   children,
   contentClassName,
   isCompactView,
+  hideMenu,
   isEditing,
   options,
   onBack,
@@ -106,17 +108,20 @@ const ContainerWithButtons = ({
       <div className={clsx(styles.content, contentClassName)}>{children}</div>
       <div className={styles.statusAndButton}>
         {!isCompactView && isEditing ? <div>{t('common:EDITING')}</div> : null}
-        <MeatballsMenu
-          disabled={!!isEditing}
-          options={options}
-          classes={{ button: isEditing ? styles.editingStatusButton : '' }}
-        />
+        {!hideMenu && (
+          <MeatballsMenu
+            disabled={!!isEditing}
+            options={options}
+            classes={{ button: isEditing ? styles.editingStatusButton : '' }}
+          />
+        )}
       </div>
     </div>
   );
 };
 
 export type AnimalSingleViewHeaderProps = {
+  hideMenu: boolean;
   isEditing?: boolean;
   onEdit: () => void;
   onRemove: () => void;
@@ -129,6 +134,7 @@ export type AnimalSingleViewHeaderProps = {
 };
 
 const AnimalSingleViewHeader = ({
+  hideMenu,
   isEditing,
   onEdit,
   onRemove,
@@ -164,7 +170,7 @@ const AnimalSingleViewHeader = ({
     { label: <MenuItem iconName="TRASH" text={t('common:REMOVE')} />, onClick: onRemove },
   ];
 
-  const commonProp = { t, isEditing, isCompactView, options: menuOptions, onBack };
+  const commonProp = { t, hideMenu, isEditing, isCompactView, options: menuOptions, onBack };
 
   const renderCompactHeader = () => (
     <div>
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index bca7adfb13..6057a54482 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -101,6 +101,8 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
     location,
   });
 
+  const isRemoved = !!defaultFormValues.animal_removal_reason_id;
+
   useEffect(() => {
     if (!selectedAnimal && !selectedBatch) {
       history.replace('/unknown_record');
@@ -193,6 +195,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
           <>
             {defaultFormValues && (
               <AnimalSingleViewHeader
+                hideMenu={isRemoved}
                 onEdit={initiateEdit}
                 onRemove={() => setRemovalModalOpen(true)}
                 isEditing={isEditing}

From 196e475c06a92dff56fb0634bb75e7e7d9d2cfb6 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Thu, 21 Nov 2024 13:42:00 -0800
Subject: [PATCH 56/91] LF-4384 Hide single animal view menu for non-admin
 users

---
 .../src/containers/Animals/SingleAnimalView/index.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 6057a54482..7d8fc7adeb 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -15,7 +15,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styles from './styles.module.scss';
 import { ContextForm, Variant } from '../../../components/Form/ContextForm/';
 import { enqueueErrorSnackbar, enqueueSuccessSnackbar } from '../../Snackbar/snackbarSlice';
@@ -45,6 +45,7 @@ import RemoveAnimalsModal, { FormFields } from '../../../components/Animals/Remo
 import useAnimalOrBatchRemoval from '../Inventory/useAnimalOrBatchRemoval';
 import { generateInventoryId } from '../../../util/animal';
 import { CustomRouteComponentProps } from '../../../types';
+import { isAdminSelector } from '../../userFarmSlice';
 
 export const STEPS = {
   DETAILS: 'details',
@@ -69,6 +70,8 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
 
   const [isEditing, setIsEditing] = useState(false);
 
+  const isAdmin = useSelector(isAdminSelector);
+
   const initiateEdit = () => {
     setIsEditing(true);
   };
@@ -195,7 +198,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
           <>
             {defaultFormValues && (
               <AnimalSingleViewHeader
-                hideMenu={isRemoved}
+                hideMenu={!isAdmin || isRemoved}
                 onEdit={initiateEdit}
                 onRemove={() => setRemovalModalOpen(true)}
                 isEditing={isEditing}

From 035f8e788056aaa9200efa98c5bf210ce4fea7b5 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Thu, 21 Nov 2024 14:33:51 -0800
Subject: [PATCH 57/91] LF-4384 Fix crashing * remove onGoForward from onSave
 in SingleAnimalView * reset with saved data when saving the form in
 WithStepperProgressBar

---
 .../Form/ContextForm/WithStepperProgressBar.tsx     | 13 +++++++++++--
 .../containers/Animals/SingleAnimalView/index.tsx   |  2 --
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index f615442148..23b81438d4 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -13,8 +13,14 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode, useEffect, useRef, useState } from 'react';
-import { UseFormHandleSubmit, FieldValues, FormState, UseFormReset } from 'react-hook-form';
+import { ReactNode, useEffect, useState } from 'react';
+import {
+  UseFormHandleSubmit,
+  FieldValues,
+  FormState,
+  UseFormReset,
+  UseFormGetValues,
+} from 'react-hook-form';
 import { History } from 'history';
 import StepperProgressBar from '../../StepperProgressBar';
 import FloatingContainer from '../../FloatingContainer';
@@ -45,6 +51,7 @@ interface WithStepperProgressBarProps {
   onCancel: () => void;
   onGoForward: () => void;
   reset: UseFormReset<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
   formState: FormState<FieldValues>;
   handleSubmit: UseFormHandleSubmit<FieldValues>;
   setFormResultData: (data: any) => void;
@@ -70,6 +77,7 @@ export const WithStepperProgressBar = ({
   onGoForward,
   handleSubmit,
   reset,
+  getValues,
   formState: { isValid, isDirty },
   setFormResultData,
   isEditing,
@@ -109,6 +117,7 @@ export const WithStepperProgressBar = ({
     if (isFinalStep) {
       setIsSaving(true);
       await handleSubmit((data: FieldValues) => onSave(data, onGoForward, setFormResultData))();
+      reset(getValues());
       setIsSaving(false);
       setIsEditing?.(false);
       return;
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 7d8fc7adeb..6dd7d93cfd 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -164,8 +164,6 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
       console.error(e);
       dispatch(enqueueErrorSnackbar(t('message:ANIMALS.FAILED_UPDATE_BATCH')));
     }
-
-    onGoForward();
   };
 
   const getInventoryId = () => {

From e599d65c9a722bfe4ee94b7c3bbc0592a1f4e0f5 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 25 Nov 2024 14:19:42 -0800
Subject: [PATCH 58/91] LF-4384 Fix uses not being rendered after logging in *
 Update useInitialAnimalData hook   - return isFetchingAnimalsOrBatches   -
 return defaultFormValues when ready * Update SingleAnimalView   - avoid
 redirecting to UnknownRecord during fetching animals   - render form when
 default values are ready

---
 .../Animals/SingleAnimalView/index.tsx        | 41 ++++----
 .../SingleAnimalView/useInitialAnimalData.ts  | 95 ++++++++++++-------
 2 files changed, 85 insertions(+), 51 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 6dd7d93cfd..b430bce8c3 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -98,16 +98,17 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
     },
   ];
 
-  const { defaultFormValues, selectedAnimal, selectedBatch } = useInitialAnimalData({
-    history,
-    match,
-    location,
-  });
+  const { defaultFormValues, selectedAnimal, selectedBatch, isFetchingAnimalsOrBatches } =
+    useInitialAnimalData({
+      history,
+      match,
+      location,
+    });
 
-  const isRemoved = !!defaultFormValues.animal_removal_reason_id;
+  const isRemoved = !!defaultFormValues?.animal_removal_reason_id;
 
   useEffect(() => {
-    if (!selectedAnimal && !selectedBatch) {
+    if (!isFetchingAnimalsOrBatches && !selectedAnimal && !selectedBatch) {
       history.replace('/unknown_record');
     }
   }, [selectedAnimal, selectedBatch, history]);
@@ -218,18 +219,20 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
           </>
         }
       >
-        <ContextForm
-          onSave={onSave}
-          hasSummaryWithinForm={false}
-          isCompactSideMenu={isCompactSideMenu}
-          variant={Variant.STEPPER_PROGRESS_BAR}
-          history={history}
-          getSteps={getFormSteps}
-          defaultFormValues={defaultFormValues}
-          cancelModalTitle={t('ANIMAL.EDIT_ANIMAL_FLOW')}
-          isEditing={isEditing}
-          setIsEditing={setIsEditing}
-        />
+        {defaultFormValues && (
+          <ContextForm
+            onSave={onSave}
+            hasSummaryWithinForm={false}
+            isCompactSideMenu={isCompactSideMenu}
+            variant={Variant.STEPPER_PROGRESS_BAR}
+            history={history}
+            getSteps={getFormSteps}
+            defaultFormValues={defaultFormValues}
+            cancelModalTitle={t('ANIMAL.EDIT_ANIMAL_FLOW')}
+            isEditing={isEditing}
+            setIsEditing={setIsEditing}
+          />
+        )}
         <RemoveAnimalsModal
           isOpen={removalModalOpen}
           onClose={() => setRemovalModalOpen(false)}
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts b/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
index b8b2fa3645..bdacc43c62 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/useInitialAnimalData.ts
@@ -13,6 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+import { useMemo } from 'react';
 import { useGetAnimalBatchesQuery, useGetAnimalsQuery } from '../../../store/api/apiSlice';
 import { useAnimalOptions } from '../AddAnimals/useAnimalOptions';
 import { DetailsFields } from '../AddAnimals/types';
@@ -28,17 +29,19 @@ interface RouteParams {
 interface UseInitialAnimalDataProps extends CustomRouteComponentProps<RouteParams> {}
 
 export const useInitialAnimalData = ({ match }: UseInitialAnimalDataProps) => {
-  const { selectedAnimal } = useGetAnimalsQuery(undefined, {
-    selectFromResult: ({ data }) => ({
+  const { selectedAnimal, isFetchingAnimals } = useGetAnimalsQuery(undefined, {
+    selectFromResult: ({ data, isFetching }) => ({
       selectedAnimal: data?.find(
         (animal) => animal.internal_identifier === Number(match.params.id),
       ),
+      isFetchingAnimals: isFetching,
     }),
   });
 
-  const { selectedBatch } = useGetAnimalBatchesQuery(undefined, {
-    selectFromResult: ({ data }) => ({
+  const { selectedBatch, isFetchingBatches } = useGetAnimalBatchesQuery(undefined, {
+    selectFromResult: ({ data, isFetching }) => ({
       selectedBatch: data?.find((batch) => batch.internal_identifier === Number(match.params.id)),
+      isFetchingBatches: isFetching,
     }),
   });
 
@@ -60,6 +63,16 @@ export const useInitialAnimalData = ({ match }: UseInitialAnimalDataProps) => {
     'tagColor',
   );
 
+  const isOptionsLoading = [
+    sexDetailsOptions,
+    animalUseOptions,
+    typeOptions,
+    breedOptions,
+    organicStatusOptions,
+    tagTypeOptions,
+    tagColorOptions,
+  ].some((config) => config.length === 0);
+
   const otherAnimalUse =
     selectedAnimal?.animal_use_relationships?.find(
       (relationship) => relationship?.other_use !== null,
@@ -114,33 +127,51 @@ export const useInitialAnimalData = ({ match }: UseInitialAnimalDataProps) => {
     ),
   };
 
-  const defaultFormValues = {
-    ...(selectedAnimal
-      ? {
-          ...selectedAnimal,
-          ...commonFields,
-          [DetailsFields.ANIMAL_OR_BATCH]: AnimalOrBatchKeys.ANIMAL,
-          [DetailsFields.WEANING_DATE]: generateFormDate(selectedAnimal.weaning_date),
-          [DetailsFields.USE]: mapUses(selectedAnimal?.animal_use_relationships ?? []),
-          [DetailsFields.TAG_TYPE]: tagTypeOptions.find(
-            ({ value }) => value === selectedAnimal?.identifier_type_id,
-          ),
-          [DetailsFields.TAG_COLOR]: tagColorOptions.find(
-            ({ value }) => value === selectedAnimal?.identifier_color_id,
-          ),
-        }
-      : {}),
-    ...(selectedBatch
-      ? {
-          ...selectedBatch,
-          ...commonFields,
-          [DetailsFields.ANIMAL_OR_BATCH]: AnimalOrBatchKeys.BATCH,
-          [DetailsFields.SEX_DETAILS]: transformedSexDetails,
-          [DetailsFields.BATCH_NAME]: selectedBatch.name,
-          [DetailsFields.USE]: mapUses(selectedBatch?.animal_batch_use_relationships ?? []),
-        }
-      : {}),
-  };
+  const defaultFormValues = useMemo(() => {
+    if (isOptionsLoading || !selectedEntity) {
+      return null;
+    }
 
-  return { defaultFormValues, selectedAnimal, selectedBatch };
+    return {
+      ...(selectedAnimal
+        ? {
+            ...selectedAnimal,
+            ...commonFields,
+            [DetailsFields.ANIMAL_OR_BATCH]: AnimalOrBatchKeys.ANIMAL,
+            [DetailsFields.WEANING_DATE]: generateFormDate(selectedAnimal.weaning_date),
+            [DetailsFields.USE]: mapUses(selectedAnimal?.animal_use_relationships ?? []),
+            [DetailsFields.TAG_TYPE]: tagTypeOptions.find(
+              ({ value }) => value === selectedAnimal?.identifier_type_id,
+            ),
+            [DetailsFields.TAG_COLOR]: tagColorOptions.find(
+              ({ value }) => value === selectedAnimal?.identifier_color_id,
+            ),
+          }
+        : {}),
+      ...(selectedBatch
+        ? {
+            ...selectedBatch,
+            ...commonFields,
+            [DetailsFields.ANIMAL_OR_BATCH]: AnimalOrBatchKeys.BATCH,
+            [DetailsFields.SEX_DETAILS]: transformedSexDetails,
+            [DetailsFields.BATCH_NAME]: selectedBatch.name,
+            [DetailsFields.USE]: mapUses(selectedBatch?.animal_batch_use_relationships ?? []),
+          }
+        : {}),
+    };
+  }, [
+    isOptionsLoading,
+    selectedEntity,
+    commonFields,
+    transformedSexDetails,
+    tagTypeOptions,
+    tagColorOptions,
+  ]);
+
+  return {
+    defaultFormValues,
+    selectedAnimal,
+    selectedBatch,
+    isFetchingAnimalsOrBatches: isFetchingAnimals || isFetchingBatches,
+  };
 };

From 9241b042ea4c9373f42a12752b5883da0a4f4e21 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 25 Nov 2024 14:27:52 -0800
Subject: [PATCH 59/91] LF-4384 Update prop name hideMenu to showMenu for
 showing meatballs menu

---
 .../Animals/AnimalSingleViewHeader/index.tsx         | 12 ++++++------
 .../containers/Animals/SingleAnimalView/index.tsx    |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
index ca62ad45bd..4d5249bf31 100644
--- a/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
+++ b/packages/webapp/src/components/Animals/AnimalSingleViewHeader/index.tsx
@@ -83,7 +83,7 @@ type ContainerWithButtonsProps = {
   children: ReactNode;
   contentClassName?: string;
   isCompactView?: boolean;
-  hideMenu: boolean;
+  showMenu: boolean;
   isEditing?: boolean;
   options: { label: ReactNode; onClick: () => void }[];
   onBack: () => void;
@@ -94,7 +94,7 @@ const ContainerWithButtons = ({
   children,
   contentClassName,
   isCompactView,
-  hideMenu,
+  showMenu = true,
   isEditing,
   options,
   onBack,
@@ -108,7 +108,7 @@ const ContainerWithButtons = ({
       <div className={clsx(styles.content, contentClassName)}>{children}</div>
       <div className={styles.statusAndButton}>
         {!isCompactView && isEditing ? <div>{t('common:EDITING')}</div> : null}
-        {!hideMenu && (
+        {showMenu && (
           <MeatballsMenu
             disabled={!!isEditing}
             options={options}
@@ -121,7 +121,7 @@ const ContainerWithButtons = ({
 };
 
 export type AnimalSingleViewHeaderProps = {
-  hideMenu: boolean;
+  showMenu: boolean;
   isEditing?: boolean;
   onEdit: () => void;
   onRemove: () => void;
@@ -134,7 +134,7 @@ export type AnimalSingleViewHeaderProps = {
 };
 
 const AnimalSingleViewHeader = ({
-  hideMenu,
+  showMenu = true,
   isEditing,
   onEdit,
   onRemove,
@@ -170,7 +170,7 @@ const AnimalSingleViewHeader = ({
     { label: <MenuItem iconName="TRASH" text={t('common:REMOVE')} />, onClick: onRemove },
   ];
 
-  const commonProp = { t, hideMenu, isEditing, isCompactView, options: menuOptions, onBack };
+  const commonProp = { t, showMenu, isEditing, isCompactView, options: menuOptions, onBack };
 
   const renderCompactHeader = () => (
     <div>
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index b430bce8c3..0693cbca94 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -197,7 +197,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
           <>
             {defaultFormValues && (
               <AnimalSingleViewHeader
-                hideMenu={!isAdmin || isRemoved}
+                showMenu={isAdmin && !isRemoved}
                 onEdit={initiateEdit}
                 onRemove={() => setRemovalModalOpen(true)}
                 isEditing={isEditing}

From 4d9fcc680294a9d77315274366285213c05b4439 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 25 Nov 2024 14:58:46 -0800
Subject: [PATCH 60/91] LF-4384 Refactor and create StepperProgressBarWrapper

---
 .../ContextForm/WithStepperProgressBar.tsx    | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 23b81438d4..6946600d03 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -22,7 +22,7 @@ import {
   UseFormGetValues,
 } from 'react-hook-form';
 import { History } from 'history';
-import StepperProgressBar from '../../StepperProgressBar';
+import StepperProgressBar, { StepperProgressBarProps } from '../../StepperProgressBar';
 import FloatingContainer from '../../FloatingContainer';
 import FormNavigationButtons from '../FormNavigationButtons';
 import FixedHeaderContainer from '../../Animals/FixedHeaderContainer';
@@ -142,8 +142,14 @@ export const WithStepperProgressBar = ({
     setShowCancelFlow?.(false);
   };
 
-  const renderContent = () => (
-    <>
+  return (
+    <StepperProgressBarWrapper
+      isSingleStep={isSingleStep}
+      {...stepperProgressBarConfig}
+      title={stepperProgressBarTitle}
+      steps={steps.map(({ title }) => title)}
+      activeStep={activeStepIndex}
+    >
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
         <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
@@ -164,23 +170,27 @@ export const WithStepperProgressBar = ({
           handleCancel={handleCancel}
         />
       )}
-    </>
+    </StepperProgressBarWrapper>
   );
+};
 
-  return isSingleStep ? (
-    renderContent()
-  ) : (
-    <FixedHeaderContainer
-      header={
-        <StepperProgressBar
-          {...stepperProgressBarConfig}
-          title={stepperProgressBarTitle}
-          steps={steps.map(({ title }) => title)}
-          activeStep={activeStepIndex}
-        />
-      }
-    >
-      {renderContent()}
+type StepperProgressBarWrapperProps = StepperProgressBarProps & {
+  children: ReactNode;
+  isSingleStep: boolean;
+};
+
+const StepperProgressBarWrapper = ({
+  children,
+  isSingleStep,
+  ...stepperProgressBarProps
+}: StepperProgressBarWrapperProps) => {
+  if (isSingleStep) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FixedHeaderContainer header={<StepperProgressBar {...stepperProgressBarProps} />}>
+      {children}
     </FixedHeaderContainer>
   );
 };

From a46d530f2158bd6cb8efa3b63a0c59fa8d48a24a Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 25 Nov 2024 15:19:04 -0800
Subject: [PATCH 61/91] LF-4384 Make setSelectedInventoryIds prop optional in
 useAnimalOrBatchRemoval hook

---
 .../Animals/Inventory/useAnimalOrBatchRemoval.ts       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts b/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
index c76063ca20..0c2d16555f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useAnimalOrBatchRemoval.ts
@@ -31,7 +31,7 @@ import { useTranslation } from 'react-i18next';
 
 const useAnimalOrBatchRemoval = (
   selectedInventoryIds: string[],
-  setSelectedInventoryIds: Dispatch<SetStateAction<string[]>>,
+  setSelectedInventoryIds?: Dispatch<SetStateAction<string[]>>,
 ) => {
   const dispatch = useDispatch();
   const { t } = useTranslation(['message']);
@@ -82,7 +82,7 @@ const useAnimalOrBatchRemoval = (
         console.log(result.error);
         dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
       } else {
-        setSelectedInventoryIds((selectedInventoryIds) =>
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
@@ -96,7 +96,7 @@ const useAnimalOrBatchRemoval = (
         console.log(result.error);
         dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
       } else {
-        setSelectedInventoryIds((selectedInventoryIds) =>
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));
@@ -132,7 +132,7 @@ const useAnimalOrBatchRemoval = (
         console.log(result.error);
         dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_ANIMALS', { ns: 'message' })));
       } else {
-        setSelectedInventoryIds((selectedInventoryIds) =>
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedAnimalIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_ANIMALS', { ns: 'message' })));
@@ -145,7 +145,7 @@ const useAnimalOrBatchRemoval = (
         console.log(result.error);
         dispatch(enqueueErrorSnackbar(t('ANIMALS.FAILED_REMOVE_BATCHES', { ns: 'message' })));
       } else {
-        setSelectedInventoryIds((selectedInventoryIds) =>
+        setSelectedInventoryIds?.((selectedInventoryIds) =>
           selectedInventoryIds.filter((i) => !selectedBatchIds.includes(i)),
         );
         dispatch(enqueueSuccessSnackbar(t('ANIMALS.SUCCESS_REMOVE_BATCHES', { ns: 'message' })));

From 9021d49e3292f940e40430576254227210f777ef Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 25 Nov 2024 15:24:56 -0800
Subject: [PATCH 62/91] LF-4384 Remove unnecessary code in SingleAnimalView

---
 .../webapp/src/containers/Animals/SingleAnimalView/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 0693cbca94..8347ec5a2e 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -168,17 +168,12 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
   };
 
   const getInventoryId = () => {
-    if (!selectedAnimal && !selectedBatch) {
-      return '';
-    }
-
     const animalOrBatch = AnimalOrBatchKeys[selectedAnimal ? 'ANIMAL' : 'BATCH'];
     return generateInventoryId(animalOrBatch, (selectedAnimal || selectedBatch)!);
   };
 
   const { onConfirmRemoveAnimals, removalModalOpen, setRemovalModalOpen } = useAnimalOrBatchRemoval(
     [getInventoryId()],
-    () => ({}),
   );
 
   const onConfirmRemoval = async (formData: FormFields) => {

From 99c3c67ff6e4758de2dc0067137914d598bb51fb Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 12 Nov 2024 15:56:16 -0800
Subject: [PATCH 63/91] LF-4479 Add animalMovementTaskSlice

---
 .../taskSlice/animalMovementTaskSlice.js      | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js

diff --git a/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js b/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js
new file mode 100644
index 0000000000..e969d5ed99
--- /dev/null
+++ b/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js
@@ -0,0 +1,83 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { onLoadingFail, onLoadingStart, onLoadingSuccess } from '../../userFarmSlice';
+import { createSelector } from 'reselect';
+import { pick } from '../../../util/pick';
+
+const animalMovementTaskProperties = ['purpose_relationships'];
+
+const getAnimalMovementTask = (task) => {
+  return pick(task, animalMovementTaskProperties);
+};
+
+const upsertOneAnimalMovementTask = (state, { payload: task }) => {
+  animalMovementTaskAdapter.upsertOne(state, getAnimalMovementTask(task));
+};
+const upsertManyAnimalMovementTask = (state, { payload: tasks }) => {
+  animalMovementTaskAdapter.upsertMany(
+    state,
+    tasks.map((task) => getAnimalMovementTask(task)),
+  );
+  onLoadingSuccess(state);
+};
+
+const animalMovementTaskAdapter = createEntityAdapter({
+  selectId: (animalMovementTask) => animalMovementTask.task_id,
+});
+
+const animalMovementTaskSlice = createSlice({
+  name: 'animalMovementTaskReducer',
+  initialState: animalMovementTaskAdapter.getInitialState({
+    loading: false,
+    error: undefined,
+    task_id: undefined,
+    loaded: false,
+  }),
+  reducers: {
+    onLoadingAnimalMovementTaskStart: onLoadingStart,
+    onLoadingAnimalMovementTaskFail: onLoadingFail,
+    getAnimalMovementTasksSuccess: upsertManyAnimalMovementTask,
+    postAnimalMovementTaskSuccess: upsertOneAnimalMovementTask,
+    editAnimalMovementTaskSuccess: upsertOneAnimalMovementTask,
+    deleteAnimalMovementTaskSuccess: animalMovementTaskAdapter.removeOne,
+  },
+});
+export const {
+  getAnimalMovementTasksSuccess,
+  postAnimalMovementTaskSuccess,
+  editAnimalMovementTaskSuccess,
+  onLoadingAnimalMovementTaskStart,
+  onLoadingAnimalMovementTaskFail,
+  deleteAnimalMovementTaskSuccess,
+} = animalMovementTaskSlice.actions;
+export default animalMovementTaskSlice.reducer;
+
+export const animalMovementTaskReducerSelector = (state) =>
+  state.entitiesReducer[animalMovementTaskSlice.name];
+
+const animalMovementTaskSelectors = animalMovementTaskAdapter.getSelectors(
+  (state) => state.entitiesReducer[animalMovementTaskSlice.name],
+);
+
+export const animalMovementTaskEntitiesSelector = animalMovementTaskSelectors.selectEntities;
+
+export const animalMovementTaskStatusSelector = createSelector(
+  [animalMovementTaskReducerSelector],
+  ({ loading, error, loaded }) => {
+    return { loading, error, loaded };
+  },
+);

From 12397d8a961fbb6038db30970eb6ef3d8a4f7352 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 09:51:19 -0800
Subject: [PATCH 64/91] LF-4372 Rename phone_number prop

---
 packages/webapp/src/components/Help/index.jsx | 12 +++---------
 packages/webapp/src/containers/Help/index.jsx |  2 +-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index bcd7abd687..37cfc424cf 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -13,13 +13,7 @@ import Radio from '../Form/Radio';
 import { Label } from '../Typography/index';
 import ImagePicker from '../ImagePicker';
 
-export default function PureHelpRequestPage({
-  onSubmit,
-  onCancel,
-  email,
-  phone_number,
-  isLoading,
-}) {
+export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNumber, isLoading }) {
   const [file, setFile] = useState(null);
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, formState } = useForm({
@@ -53,7 +47,7 @@ export default function PureHelpRequestPage({
   };
 
   useEffect(() => {
-    const contactInformation = contactMethodSelection === 'email' ? email : phone_number;
+    const contactInformation = contactMethodSelection === 'email' ? email : phoneNumber;
     setValue(CONTACT_INFO, contactInformation);
   }, [contactMethodSelection]);
 
@@ -164,6 +158,6 @@ PureHelpRequestPage.prototype = {
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
   email: PropTypes.string,
-  phone_number: PropTypes.string,
+  phoneNumber: PropTypes.string,
   isLoading: PropTypes.bool,
 };
diff --git a/packages/webapp/src/containers/Help/index.jsx b/packages/webapp/src/containers/Help/index.jsx
index 9fdd6fe9df..0b53dbbb56 100644
--- a/packages/webapp/src/containers/Help/index.jsx
+++ b/packages/webapp/src/containers/Help/index.jsx
@@ -26,7 +26,7 @@ export default function HelpRequest({ closeDrawer }) {
       onSubmit={handleSubmit}
       onCancel={onCancel}
       email={email}
-      phone_number={phone_number}
+      phoneNumber={phone_number}
       isLoading={loading}
       key={key}
     />

From b353bb519c27ef26cd73eb2e8f5df0c5ea14c50e Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:03:43 -0800
Subject: [PATCH 65/91] LF-4372 Remove remounting key in favour of reset();
 check dirtyFields before displaying error message; also close drawer onSubmit

---
 packages/webapp/src/components/Help/index.jsx | 19 ++++++++++++++-----
 packages/webapp/src/containers/Help/index.jsx |  6 +-----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 37cfc424cf..09e3a12e38 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -16,14 +16,15 @@ import ImagePicker from '../ImagePicker';
 export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNumber, isLoading }) {
   const [file, setFile] = useState(null);
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
-  const { register, handleSubmit, watch, control, setValue, formState } = useForm({
+  const { register, handleSubmit, watch, control, setValue, reset, formState } = useForm({
     mode: 'onTouched',
     defaultValues: {
+      support_type: null,
       contact_method: 'email',
     },
   });
 
-  const { errors } = formState;
+  const { errors, dirtyFields } = formState;
 
   const CONTACT_METHOD = 'contact_method';
   const contactMethodSelection = watch(CONTACT_METHOD);
@@ -43,6 +44,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
   };
 
   const handleCancel = () => {
+    reset();
     onCancel?.();
   };
 
@@ -57,6 +59,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
     data.attachments = {};
     delete data.contactInfo;
     onSubmit(file, data);
+    reset();
   };
 
   const supportType = watch(SUPPORT_TYPE);
@@ -101,14 +104,18 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
             />
           )}
         />
-        {errors[SUPPORT_TYPE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
+        {errors[SUPPORT_TYPE] && SUPPORT_TYPE in dirtyFields ? (
+          <Error>{t('HELP.REQUIRED_LABEL')}</Error>
+        ) : (
+          ''
+        )}
       </div>
       <div>
         <TextArea
           label={t('HELP.MESSAGE_LABEL')}
           hookFormRegister={register(MESSAGE, { required: true })}
         />
-        {errors[MESSAGE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
+        {errors[MESSAGE] && MESSAGE in dirtyFields ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
       </div>
       <div>
         <ImagePicker
@@ -143,7 +150,9 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
             pattern: contactMethodSelection === 'email' ? validEmailRegex : /./g,
           })}
         />
-        {errors[CONTACT_INFO] && errors[CONTACT_INFO].type !== 'pattern' ? (
+        {errors[CONTACT_INFO] &&
+        CONTACT_INFO in dirtyFields &&
+        errors[CONTACT_INFO].type !== 'pattern' ? (
           <Error>{t('HELP.REQUIRED_LABEL')}</Error>
         ) : (
           ''
diff --git a/packages/webapp/src/containers/Help/index.jsx b/packages/webapp/src/containers/Help/index.jsx
index 0b53dbbb56..0a0e583f3c 100644
--- a/packages/webapp/src/containers/Help/index.jsx
+++ b/packages/webapp/src/containers/Help/index.jsx
@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { supportFileUpload } from './saga';
 import { isHelpLoadingSelector, startSendHelp } from '../Home/homeSlice';
 import { userFarmSelector } from '../userFarmSlice';
-import { useState } from 'react';
 
 export default function HelpRequest({ closeDrawer }) {
   const dispatch = useDispatch();
@@ -11,14 +10,12 @@ export default function HelpRequest({ closeDrawer }) {
   const handleSubmit = (file, data) => {
     dispatch(startSendHelp());
     dispatch(supportFileUpload({ file, form: data }));
+    closeDrawer?.();
   };
   const onCancel = () => {
     closeDrawer?.();
-    setKey((prev) => prev + 1); // Remount form when closing drawer
   };
 
-  const [key, setKey] = useState(0);
-
   const { email, phone_number } = useSelector(userFarmSelector);
   const loading = useSelector(isHelpLoadingSelector);
   return (
@@ -28,7 +25,6 @@ export default function HelpRequest({ closeDrawer }) {
       email={email}
       phoneNumber={phone_number}
       isLoading={loading}
-      key={key}
     />
   );
 }

From 5cddc5e2edbf71dd50313b13895f826582ca1d60 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:07:22 -0800
Subject: [PATCH 66/91] LF-4479 Fix animalMovementTaskSlice

---
 .../src/containers/slice/taskSlice/animalMovementTaskSlice.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js b/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js
index e969d5ed99..42ab92f33f 100644
--- a/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js
+++ b/packages/webapp/src/containers/slice/taskSlice/animalMovementTaskSlice.js
@@ -18,7 +18,7 @@ import { onLoadingFail, onLoadingStart, onLoadingSuccess } from '../../userFarmS
 import { createSelector } from 'reselect';
 import { pick } from '../../../util/pick';
 
-const animalMovementTaskProperties = ['purpose_relationships'];
+const animalMovementTaskProperties = ['task_id', 'purpose_relationships'];
 
 const getAnimalMovementTask = (task) => {
   return pick(task, animalMovementTaskProperties);

From 67f63721810a6d496e181775addb44b3ebd34955 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:08:49 -0800
Subject: [PATCH 67/91] LF-4479 Add animalMovementTaskReducer to
 entitiesReducer

---
 packages/webapp/src/store/reducer.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/webapp/src/store/reducer.js b/packages/webapp/src/store/reducer.js
index 06cbb15daf..f64abd0149 100644
--- a/packages/webapp/src/store/reducer.js
+++ b/packages/webapp/src/store/reducer.js
@@ -55,6 +55,7 @@ import pestControlTaskReducer from '../containers/slice/taskSlice/pestControlTas
 import soilAmendmentTaskReducer from '../containers/slice/taskSlice/soilAmendmentTaskSlice';
 import plantTaskReducer from '../containers/slice/taskSlice/plantTaskSlice';
 import transplantTaskReducer from '../containers/slice/taskSlice/transplantTaskSlice';
+import animalMovementTaskReducer from '../containers/slice/taskSlice/animalMovementTaskSlice';
 import harvestUseTypeReducer from '../containers/harvestUseTypeSlice';
 import taskTypeReducer from '../containers/taskTypeSlice';
 import productReducer from '../containers/productSlice';
@@ -203,6 +204,7 @@ const entitiesReducer = combineReducers({
   soilAmendmentTaskReducer,
   plantTaskReducer,
   transplantTaskReducer,
+  animalMovementTaskReducer,
   taskTypeReducer,
   harvestUseTypeReducer,
   productReducer,

From 2b23b5abafc7e36a09fcc6ee7a30b20467b2b0cf Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:10:38 -0800
Subject: [PATCH 68/91] LF-4372 Add boolean prop to allow resetting imageUrl
 within DirectImageUpload ImagePicker

imageUrl is an uncontrolled input in this case
---
 packages/webapp/src/components/ImagePicker/index.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/webapp/src/components/ImagePicker/index.tsx b/packages/webapp/src/components/ImagePicker/index.tsx
index 0205eb45ab..a707feea0c 100644
--- a/packages/webapp/src/components/ImagePicker/index.tsx
+++ b/packages/webapp/src/components/ImagePicker/index.tsx
@@ -44,16 +44,19 @@ type CommonProps = {
   optional?: boolean;
   defaultUrl?: string;
   isDisabled?: boolean;
+  shouldReset?: boolean;
 };
 
 type CustomFileUpload = CommonProps & {
   onSelectImage?: never;
   onFileUpload: OnFileUpload;
+  shouldReset?: never;
 };
 
 type DirectImageUpload = CommonProps & {
   onSelectImage: (file: File) => void;
   onFileUpload?: never;
+  shouldReset?: boolean;
 };
 
 export type ImagePickerProps = CustomFileUpload | DirectImageUpload;
@@ -66,12 +69,19 @@ export default function ImagePicker({
   optional = true, // false is not yet supported
   onFileUpload,
   isDisabled = false,
+  shouldReset,
 }: ImagePickerProps) {
   const [previewUrl, setPreviewUrl] = useState(defaultUrl);
   const [showFileSizeExceedsModal, setShowFileSizeExceedsModal] = useState(false);
   const dropContainerRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
 
+  useEffect(() => {
+    if (shouldReset) {
+      removeImage();
+    }
+  }, [shouldReset]);
+
   const removeImage = () => {
     onRemoveImage();
     setPreviewUrl('');

From f400ef4b7692d974da06b1c3206cd9954c884875 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 11:12:42 -0800
Subject: [PATCH 69/91] LF-4372 Add resetting state to Form to control image
 clearing and email re-populating

---
 packages/webapp/src/components/Help/index.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 09e3a12e38..0345764163 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -15,6 +15,8 @@ import ImagePicker from '../ImagePicker';
 
 export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNumber, isLoading }) {
   const [file, setFile] = useState(null);
+  const [resetForm, setResetForm] = useState(false);
+
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, reset, formState } = useForm({
     mode: 'onTouched',
@@ -45,13 +47,14 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
 
   const handleCancel = () => {
     reset();
+    setResetForm(true);
     onCancel?.();
   };
 
   useEffect(() => {
     const contactInformation = contactMethodSelection === 'email' ? email : phoneNumber;
     setValue(CONTACT_INFO, contactInformation);
-  }, [contactMethodSelection]);
+  }, [contactMethodSelection, resetForm]);
 
   const submit = (data) => {
     data.support_type = data.support_type.value;
@@ -60,6 +63,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
     delete data.contactInfo;
     onSubmit(file, data);
     reset();
+    setResetForm(true);
   };
 
   const supportType = watch(SUPPORT_TYPE);
@@ -120,8 +124,12 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
       <div>
         <ImagePicker
           label={t('HELP.ATTACHMENT_LABEL')}
-          onSelectImage={setFile}
+          onSelectImage={(imageFile) => {
+            setFile(imageFile);
+            setResetForm(false);
+          }}
           onRemoveImage={() => setFile(null)}
+          shouldReset={resetForm}
         />
       </div>
       <div>

From 557e825a92603a067c0c15b62751b5572c7146d3 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:15:05 -0800
Subject: [PATCH 70/91] LF-4479 Update createTaskSaga to handle animal movement
 tasks

---
 packages/webapp/src/containers/Task/saga.js   | 12 ++--
 .../webapp/src/containers/Task/sagaUtils.js   | 69 +++++++++++++++++++
 2 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 packages/webapp/src/containers/Task/sagaUtils.js

diff --git a/packages/webapp/src/containers/Task/saga.js b/packages/webapp/src/containers/Task/saga.js
index 79b7614d93..245246ab9d 100644
--- a/packages/webapp/src/containers/Task/saga.js
+++ b/packages/webapp/src/containers/Task/saga.js
@@ -79,7 +79,7 @@ import {
 } from '../../util/siteMapConstants';
 import { setFormData } from '../hooks/useHookFormPersist/hookFormPersistSlice';
 import { formatSoilAmendmentProductToDBStructure } from '../../util/task';
-import { api } from '../../store/api/apiSlice';
+import { getEndpoint, getMovementTaskBody } from './sagaUtils';
 
 const taskTypeEndpoint = [
   'cleaning_task',
@@ -88,6 +88,7 @@ const taskTypeEndpoint = [
   'soil_amendment_task',
   'harvest_tasks',
   'irrigation_task',
+  'animal_movement_task',
 ];
 
 // TypeScript complains without payload.
@@ -394,7 +395,7 @@ export function* getAllTasksSuccessSaga({ payload: tasks }) {
   yield handleGetTasksSuccess(tasks, addAllTasksFromGetReq);
 }
 
-const getPostTaskBody = (data, endpoint, managementPlanWithCurrentLocationEntities) => {
+export const getPostTaskBody = (data, endpoint, managementPlanWithCurrentLocationEntities) => {
   return getObjectInnerValues(
     produce(data, (data) => {
       const propertiesToRemove = taskTypeEndpoint.filter((taskType) => taskType !== endpoint);
@@ -521,6 +522,7 @@ const taskTypeGetPostTaskBodyFunctionMap = {
   HARVEST_TASK: getPostHarvestTaskBody,
   TRANSPLANT_TASK: getTransplantTaskBody,
   IRRIGATION_TASK: getIrrigationTaskBody,
+  MOVEMENT_TASK: getMovementTaskBody,
 };
 
 const getPostTaskReqBody = (
@@ -560,11 +562,7 @@ export function* createTaskSaga({ payload }) {
   const header = getHeader(user_id, farm_id);
   const isCustomTask = !!task_farm_id;
   const isHarvest = task_translation_key === 'HARVEST_TASK';
-  const endpoint = isCustomTask
-    ? 'custom_task'
-    : isHarvest
-    ? 'harvest_tasks'
-    : task_translation_key.toLowerCase();
+  const endpoint = getEndpoint(isCustomTask, task_translation_key);
   try {
     const managementPlanWithCurrentLocationEntities = yield select(
       managementPlanWithCurrentLocationEntitiesSelector,
diff --git a/packages/webapp/src/containers/Task/sagaUtils.js b/packages/webapp/src/containers/Task/sagaUtils.js
new file mode 100644
index 0000000000..7cd93758fa
--- /dev/null
+++ b/packages/webapp/src/containers/Task/sagaUtils.js
@@ -0,0 +1,69 @@
+/*
+ *  Copyright 2024 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { parseInventoryId } from '../../util/animal';
+import { getPostTaskBody } from './saga';
+
+export const getEndpoint = (isCustomTask, taskTranslationKey) => {
+  if (isCustomTask) {
+    return 'custom_task';
+  }
+  const endpoints = {
+    HARVEST_TASK: 'harvest_tasks',
+    MOVEMENT_TASK: 'animal_movement_task',
+  };
+  return endpoints[taskTranslationKey] || taskTranslationKey.toLowerCase();
+};
+
+export const formatAnimalIdsForReqBody = (ids) => {
+  if (!ids) {
+    return {};
+  }
+
+  const animalIds = [];
+  const batchIds = [];
+
+  ids.forEach((inventoryId) => {
+    const { kind, id } = parseInventoryId(inventoryId);
+    (kind === 'ANIMAL' ? animalIds : batchIds).push(id);
+  });
+
+  return { related_animal_ids: animalIds, related_batch_ids: batchIds };
+};
+
+export const formatAnimalTask = (data, endpoint) => {
+  const { animalIds, managementPlans, ...formattedData } = getPostTaskBody(data, endpoint);
+
+  // Remove managementPlans from the data and format animalIds for the request body
+  return { ...formattedData, ...formatAnimalIdsForReqBody(animalIds) };
+};
+
+export const formatMovementTask = (movementTask) => {
+  if (!movementTask || !('purpose' in movementTask)) {
+    return { animal_movement_task: {} };
+  }
+
+  const { purpose, other_purpose_explanation } = movementTask;
+  const purposeIds = purpose.map(({ value }) => value);
+
+  return {
+    animal_movement_task: { purpose_ids: purposeIds, other_purpose: other_purpose_explanation },
+  };
+};
+
+export const getMovementTaskBody = (data, endpoint) => {
+  const { movement_task, ...formattedData } = formatAnimalTask(data, endpoint);
+  return { ...formattedData, ...formatMovementTask(movement_task) };
+};

From d8198556b2f88662fef04a5a301cf171a28acab2 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:22:31 -0800
Subject: [PATCH 71/91] LF-4479 Update getTasksSuccessSaga and
 onLoadingTaskStartSaga to handle animal movement tasks

---
 packages/webapp/src/containers/Task/saga.js | 15 +++++++++++++--
 packages/webapp/src/containers/taskSlice.js |  7 ++++++-
 packages/webapp/src/util/task.ts            |  8 ++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/containers/Task/saga.js b/packages/webapp/src/containers/Task/saga.js
index 245246ab9d..c1d7166867 100644
--- a/packages/webapp/src/containers/Task/saga.js
+++ b/packages/webapp/src/containers/Task/saga.js
@@ -64,6 +64,11 @@ import {
   onLoadingTransplantTaskFail,
   onLoadingTransplantTaskStart,
 } from '../slice/taskSlice/transplantTaskSlice';
+import {
+  getAnimalMovementTasksSuccess,
+  onLoadingAnimalMovementTaskFail,
+  onLoadingAnimalMovementTaskStart,
+} from '../slice/taskSlice/animalMovementTaskSlice';
 import { getPlantingMethodReqBody } from '../Crop/AddManagementPlan/ManagementPlanName/getManagementPlanReqBody';
 
 import {
@@ -78,7 +83,7 @@ import {
   createCompleteTaskUrl,
 } from '../../util/siteMapConstants';
 import { setFormData } from '../hooks/useHookFormPersist/hookFormPersistSlice';
-import { formatSoilAmendmentProductToDBStructure } from '../../util/task';
+import { formatSoilAmendmentProductToDBStructure, getSubtaskName } from '../../util/task';
 import { getEndpoint, getMovementTaskBody } from './sagaUtils';
 
 const taskTypeEndpoint = [
@@ -326,6 +331,11 @@ const taskTypeActionMap = {
     fail: onLoadingTransplantTaskFail,
     completeUrl: (id) => createBeforeCompleteTaskUrl(id),
   },
+  MOVEMENT_TASK: {
+    success: (tasks) => put(getAnimalMovementTasksSuccess(tasks)),
+    fail: onLoadingAnimalMovementTaskFail,
+    completeUrl: (id) => createBeforeCompleteTaskUrl(id),
+  },
 };
 
 export const onLoadingTaskStart = createAction('onLoadingTaskStartSaga');
@@ -339,6 +349,7 @@ export function* onLoadingTaskStartSaga() {
   yield put(onLoadingPlantTaskStart());
   yield put(onLoadingTransplantTaskStart());
   yield put(onLoadingIrrigationTaskStart());
+  yield put(onLoadingAnimalMovementTaskStart());
 }
 
 function* handleGetTasksSuccess(tasks, successAction) {
@@ -353,7 +364,7 @@ function* handleGetTasksSuccess(tasks, successAction) {
   const tasksByTranslationKey = tasks.reduce((tasksByTranslationKey, task) => {
     const { task_translation_key } = taskTypeEntities[task.task_type_id];
     if (taskTypeActionMap[task_translation_key]) {
-      tasksByTranslationKey[task_translation_key].push(task[task_translation_key.toLowerCase()]);
+      tasksByTranslationKey[task_translation_key].push(task[getSubtaskName(task_translation_key)]);
     }
     return tasksByTranslationKey;
   }, tasksByTranslationKeyDefault);
diff --git a/packages/webapp/src/containers/taskSlice.js b/packages/webapp/src/containers/taskSlice.js
index 16b0f39692..f3b074f243 100644
--- a/packages/webapp/src/containers/taskSlice.js
+++ b/packages/webapp/src/containers/taskSlice.js
@@ -21,6 +21,8 @@ import { plantTaskEntitiesSelector } from './slice/taskSlice/plantTaskSlice';
 import { transplantTaskEntitiesSelector } from './slice/taskSlice/transplantTaskSlice';
 import { plantingManagementPlanEntitiesSelector } from './plantingManagementPlanSlice';
 import { irrigationTaskEntitiesSelector } from './slice/taskSlice/irrigationTaskSlice';
+import { animalMovementTaskEntitiesSelector } from './slice/taskSlice/animalMovementTaskSlice';
+import { getSubtaskName } from '../util/task';
 
 export const getTask = (obj) => {
   const task = pick(obj, [
@@ -179,6 +181,7 @@ export const taskEntitiesSelector = createSelector(
     soilAmendmentTaskEntitiesSelector,
     plantTaskEntitiesSelector,
     transplantTaskEntitiesSelector,
+    animalMovementTaskEntitiesSelector,
     plantingManagementPlanEntitiesSelector,
   ],
   (
@@ -196,6 +199,7 @@ export const taskEntitiesSelector = createSelector(
     soilAmendmentTaskEntities,
     plantTaskEntities,
     transplantTaskEntities,
+    animalMovementTaskEntities,
     plantingManagementPlanEntities,
   ) => {
     const subTaskEntities = {
@@ -207,6 +211,7 @@ export const taskEntitiesSelector = createSelector(
       ...soilAmendmentTaskEntities,
       ...plantTaskEntities,
       ...transplantTaskEntities,
+      ...animalMovementTaskEntities,
     };
 
     const getManagementPlanByPlantingManagementPlan = ({
@@ -236,7 +241,7 @@ export const taskEntitiesSelector = createSelector(
         taskEntities[task_id].taskType = taskType;
         const { task_translation_key, farm_id } = taskType;
         const subtask = subTaskEntities[task_id];
-        !farm_id && (taskEntities[task_id][task_translation_key.toLowerCase()] = subtask);
+        !farm_id && (taskEntities[task_id][getSubtaskName(task_translation_key)] = subtask);
         if (!farm_id && ['PLANT_TASK', 'TRANSPLANT_TASK'].includes(task_translation_key)) {
           taskEntities[task_id].locations = subtask.planting_management_plan.location_id
             ? [locationEntities[subtask.planting_management_plan.location_id]]
diff --git a/packages/webapp/src/util/task.ts b/packages/webapp/src/util/task.ts
index d60dca56de..dbb9764157 100644
--- a/packages/webapp/src/util/task.ts
+++ b/packages/webapp/src/util/task.ts
@@ -206,3 +206,11 @@ export const getRemovedTaskProductIds = (
 
   return oldIds.filter((id) => !newIds.includes(id));
 };
+
+const subtaskNames: { [key: string]: string } = {
+  MOVEMENT_TASK: 'animal_movement_task',
+};
+
+export const getSubtaskName = (translationKey: string) => {
+  return subtaskNames[translationKey] || translationKey.toLowerCase();
+};

From a2fb8ad6baae71523ddf207ac5f0762ab8a2806e Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:54:51 -0800
Subject: [PATCH 72/91] LF-4479 Update taskSlice to add animals and batches

---
 packages/webapp/src/containers/taskSlice.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/webapp/src/containers/taskSlice.js b/packages/webapp/src/containers/taskSlice.js
index f3b074f243..ef96ea339a 100644
--- a/packages/webapp/src/containers/taskSlice.js
+++ b/packages/webapp/src/containers/taskSlice.js
@@ -49,6 +49,8 @@ export const getTask = (obj) => {
     'abandonment_notes',
     'location_defaults',
     'soil_amendment_task_products',
+    'animals',
+    'animal_batches',
   ]);
   //TODO: investigate why incomplete tasks wage_at_moment are null
   if (task.wage_at_moment === null) task.wage_at_moment = 0;

From e9bdbd3fcf7c986b97d06cebfb6e101e90711c19 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 26 Nov 2024 11:57:10 -0800
Subject: [PATCH 73/91] LF-4479 Fix flattenInternalIdentifier function to
 delete animal_union_batch

---
 packages/api/src/controllers/taskController.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/api/src/controllers/taskController.js b/packages/api/src/controllers/taskController.js
index 751a5d50b8..aeb0971896 100644
--- a/packages/api/src/controllers/taskController.js
+++ b/packages/api/src/controllers/taskController.js
@@ -1261,4 +1261,5 @@ async function filterOutDeletedManagementPlans(data, req) {
 
 const flattenInternalIdentifier = (animalOrBatch) => {
   animalOrBatch.internal_identifier = animalOrBatch.animal_union_batch.internal_identifier;
+  delete animalOrBatch.animal_union_batch;
 };

From c63a732c4ee9ebf5c3c6e718ccaeefa9d178d119 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:38:23 -0800
Subject: [PATCH 74/91] LF-4372 Close and reset form only on successful
 submission

---
 packages/webapp/src/components/Help/index.jsx |  8 +++++---
 packages/webapp/src/containers/Help/index.jsx | 14 +++++++++++---
 packages/webapp/src/containers/Help/saga.js   |  3 ++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 0345764163..3ba33e1691 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -61,9 +61,11 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
     data[data[CONTACT_METHOD]] = data.contactInfo;
     data.attachments = {};
     delete data.contactInfo;
-    onSubmit(file, data);
-    reset();
-    setResetForm(true);
+    onSubmit(file, data, () => {
+      reset();
+      setFile(null);
+      setResetForm(true);
+    });
   };
 
   const supportType = watch(SUPPORT_TYPE);
diff --git a/packages/webapp/src/containers/Help/index.jsx b/packages/webapp/src/containers/Help/index.jsx
index 0a0e583f3c..9c27ddaa52 100644
--- a/packages/webapp/src/containers/Help/index.jsx
+++ b/packages/webapp/src/containers/Help/index.jsx
@@ -7,10 +7,18 @@ import { userFarmSelector } from '../userFarmSlice';
 export default function HelpRequest({ closeDrawer }) {
   const dispatch = useDispatch();
 
-  const handleSubmit = (file, data) => {
+  const handleSubmit = (file, data, resetForm) => {
     dispatch(startSendHelp());
-    dispatch(supportFileUpload({ file, form: data }));
-    closeDrawer?.();
+    dispatch(
+      supportFileUpload({
+        file,
+        form: data,
+        onSuccess: () => {
+          resetForm();
+          closeDrawer?.();
+        },
+      }),
+    );
   };
   const onCancel = () => {
     closeDrawer?.();
diff --git a/packages/webapp/src/containers/Help/saga.js b/packages/webapp/src/containers/Help/saga.js
index 89f91643ec..8cea1c4c6c 100644
--- a/packages/webapp/src/containers/Help/saga.js
+++ b/packages/webapp/src/containers/Help/saga.js
@@ -26,7 +26,7 @@ const supportUrl = () => `${url}/support_ticket`;
 
 export const supportFileUpload = createAction(`supportFileUploadSaga`);
 
-export function* supportFileUploadSaga({ payload: { file, form } }) {
+export function* supportFileUploadSaga({ payload: { file, form, onSuccess } }) {
   try {
     const formData = new FormData();
     formData.append('_file_', file);
@@ -39,6 +39,7 @@ export function* supportFileUploadSaga({ payload: { file, form } }) {
     });
     if (result) {
       yield put(postHelpRequestSuccess());
+      onSuccess();
       history.push('/');
     } else {
       yield put(enqueueErrorSnackbar(i18n.t('message:ATTACHMENTS.ERROR.FAILED_UPLOAD')));

From 6fb03299e6acefd97815f247efcfbbaf205d69eb Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:04:15 -0800
Subject: [PATCH 75/91] LF-4372 Add type='button' to cancel to prevent form
 submission

---
 packages/webapp/src/components/Help/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 3ba33e1691..1cda2acbf6 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -77,7 +77,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
       onSubmit={handleSubmit(submit, onError)}
       buttonGroup={
         <>
-          <Button fullLength color={'secondary-cta'} onClick={handleCancel} md>
+          <Button fullLength color={'secondary-cta'} onClick={handleCancel} md type={'button'}>
             {t('common:CANCEL')}
           </Button>
           <Button type={'submit'} disabled={isLoading || disabled} fullLength md>

From 97cffc7b4b090cd8c2b2a0615e9ace05ecf73273 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:14:03 -0800
Subject: [PATCH 76/91] LF-4372 Remove check for dirtyFields as form submission
 was the issue

---
 packages/webapp/src/components/Help/index.jsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index 1cda2acbf6..a5d2de4926 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -26,7 +26,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
     },
   });
 
-  const { errors, dirtyFields } = formState;
+  const { errors } = formState;
 
   const CONTACT_METHOD = 'contact_method';
   const contactMethodSelection = watch(CONTACT_METHOD);
@@ -110,18 +110,14 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
             />
           )}
         />
-        {errors[SUPPORT_TYPE] && SUPPORT_TYPE in dirtyFields ? (
-          <Error>{t('HELP.REQUIRED_LABEL')}</Error>
-        ) : (
-          ''
-        )}
+        {errors[SUPPORT_TYPE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
       </div>
       <div>
         <TextArea
           label={t('HELP.MESSAGE_LABEL')}
           hookFormRegister={register(MESSAGE, { required: true })}
         />
-        {errors[MESSAGE] && MESSAGE in dirtyFields ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
+        {errors[MESSAGE] ? <Error>{t('HELP.REQUIRED_LABEL')}</Error> : ''}
       </div>
       <div>
         <ImagePicker
@@ -160,9 +156,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
             pattern: contactMethodSelection === 'email' ? validEmailRegex : /./g,
           })}
         />
-        {errors[CONTACT_INFO] &&
-        CONTACT_INFO in dirtyFields &&
-        errors[CONTACT_INFO].type !== 'pattern' ? (
+        {errors[CONTACT_INFO] && errors[CONTACT_INFO].type !== 'pattern' ? (
           <Error>{t('HELP.REQUIRED_LABEL')}</Error>
         ) : (
           ''

From 59abd627c5e4c2ce85aedd9169ce2c42f02c41e3 Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:25:48 -0800
Subject: [PATCH 77/91] LF-4372 Fix up default values

Supply all default values, use constants. Remove resetForm from useEffect as no longer needed. Rename resetForm to resetImage for clarity and reflecting singular use
---
 packages/webapp/src/components/Help/index.jsx | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/webapp/src/components/Help/index.jsx b/packages/webapp/src/components/Help/index.jsx
index a5d2de4926..c682ebe205 100644
--- a/packages/webapp/src/components/Help/index.jsx
+++ b/packages/webapp/src/components/Help/index.jsx
@@ -15,24 +15,28 @@ import ImagePicker from '../ImagePicker';
 
 export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNumber, isLoading }) {
   const [file, setFile] = useState(null);
-  const [resetForm, setResetForm] = useState(false);
+  const [resetImage, setResetImage] = useState(false);
+
+  const CONTACT_METHOD = 'contact_method';
+  const MESSAGE = 'message';
+  const SUPPORT_TYPE = 'support_type';
+  const CONTACT_INFO = 'contactInfo';
 
   const validEmailRegex = RegExp(/^$|^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
   const { register, handleSubmit, watch, control, setValue, reset, formState } = useForm({
     mode: 'onTouched',
     defaultValues: {
-      support_type: null,
-      contact_method: 'email',
+      [SUPPORT_TYPE]: null,
+      [CONTACT_METHOD]: 'email',
+      [CONTACT_INFO]: email,
+      [MESSAGE]: '',
     },
   });
 
   const { errors } = formState;
 
-  const CONTACT_METHOD = 'contact_method';
   const contactMethodSelection = watch(CONTACT_METHOD);
-  const MESSAGE = 'message';
-  const SUPPORT_TYPE = 'support_type';
-  const CONTACT_INFO = 'contactInfo';
+
   const { t } = useTranslation(['translation', 'common']);
   const supportTypeOptions = [
     { value: 'Request information', label: t('HELP.OPTIONS.REQUEST_INFO') },
@@ -47,14 +51,15 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
 
   const handleCancel = () => {
     reset();
-    setResetForm(true);
+    setFile(null);
+    setResetImage(true);
     onCancel?.();
   };
 
   useEffect(() => {
     const contactInformation = contactMethodSelection === 'email' ? email : phoneNumber;
     setValue(CONTACT_INFO, contactInformation);
-  }, [contactMethodSelection, resetForm]);
+  }, [contactMethodSelection]);
 
   const submit = (data) => {
     data.support_type = data.support_type.value;
@@ -64,7 +69,7 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
     onSubmit(file, data, () => {
       reset();
       setFile(null);
-      setResetForm(true);
+      setResetImage(true);
     });
   };
 
@@ -124,10 +129,10 @@ export default function PureHelpRequestPage({ onSubmit, onCancel, email, phoneNu
           label={t('HELP.ATTACHMENT_LABEL')}
           onSelectImage={(imageFile) => {
             setFile(imageFile);
-            setResetForm(false);
+            setResetImage(false);
           }}
           onRemoveImage={() => setFile(null)}
-          shouldReset={resetForm}
+          shouldReset={resetImage}
         />
       </div>
       <div>

From d7ed7096cda30ad33961ae6fb43305780b2479f6 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 27 Nov 2024 00:30:49 -0800
Subject: [PATCH 78/91] LF-4384 Update onSave callback in
 WithStepperProgressBar * handle onGoForward within the component * properly
 handle success actions

---
 .../Form/ContextForm/WithStepperProgressBar.tsx   | 15 +++++++++++----
 .../src/containers/Animals/AddAnimals/index.tsx   |  4 ++--
 .../containers/Animals/SingleAnimalView/index.tsx |  4 +++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 6946600d03..14aeefc977 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -44,7 +44,7 @@ interface WithStepperProgressBarProps {
   stepperProgressBarTitle?: ReactNode;
   onSave: (
     data: FieldValues,
-    onGoForward: () => void,
+    onSuccess: () => void,
     setFormResultData?: (data: any) => void,
   ) => void;
   onGoBack: () => void;
@@ -113,13 +113,20 @@ export const WithStepperProgressBar = ({
 
   const shouldShowFormNavigationButtons = !isSummaryPage && isEditing;
 
+  const onSuccess = () => {
+    reset(getValues());
+    setIsEditing?.(false);
+
+    if (hasSummaryWithinForm) {
+      onGoForward();
+    }
+  };
+
   const onContinue = async () => {
     if (isFinalStep) {
       setIsSaving(true);
-      await handleSubmit((data: FieldValues) => onSave(data, onGoForward, setFormResultData))();
-      reset(getValues());
+      await handleSubmit((data: FieldValues) => onSave(data, onSuccess, setFormResultData))();
       setIsSaving(false);
-      setIsEditing?.(false);
       return;
     }
     onGoForward();
diff --git a/packages/webapp/src/containers/Animals/AddAnimals/index.tsx b/packages/webapp/src/containers/Animals/AddAnimals/index.tsx
index f85247650f..46fd696cb6 100644
--- a/packages/webapp/src/containers/Animals/AddAnimals/index.tsx
+++ b/packages/webapp/src/containers/Animals/AddAnimals/index.tsx
@@ -55,7 +55,7 @@ function AddAnimals({ isCompactSideMenu, history }: AddAnimalsProps) {
 
   const onSave = async (
     data: any,
-    onGoForward: () => void,
+    onSuccess: () => void,
     setFormResultData: (data: any) => void,
   ) => {
     const details = data[STEPS.DETAILS] as AnimalDetailsFormFields[];
@@ -99,7 +99,7 @@ function AddAnimals({ isCompactSideMenu, history }: AddAnimalsProps) {
     }
 
     setFormResultData({ animals: animalsResult, batches: batchesResult });
-    onGoForward();
+    onSuccess();
   };
 
   const getFormSteps = () => [
diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
index 8347ec5a2e..2ca3591a7b 100644
--- a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
+++ b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -121,7 +121,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
 
   const onSave = async (
     data: AnimalDetailsFormFields & Partial<Animal | AnimalBatch>,
-    onGoForward: () => void,
+    onSuccess: () => void,
     _setFormResultData: () => void,
   ) => {
     const broughtInId = orgins.find((origin) => origin.key === 'BROUGHT_IN')?.id;
@@ -151,6 +151,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
       if (formattedAnimals.length) {
         await updateAnimals(formattedAnimals).unwrap();
         dispatch(enqueueSuccessSnackbar(t('message:ANIMALS.SUCCESS_UPDATE_ANIMAL')));
+        onSuccess();
       }
     } catch (e) {
       console.error(e);
@@ -160,6 +161,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
       if (formattedBatches.length) {
         await updateBatches(formattedBatches).unwrap();
         dispatch(enqueueSuccessSnackbar(t('message:ANIMALS.SUCCESS_UPDATE_BATCH')));
+        onSuccess();
       }
     } catch (e) {
       console.error(e);

From ebde1a2cbfc8bcc0e10917d6492b32726761ec0b Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 27 Nov 2024 09:47:13 -0800
Subject: [PATCH 79/91] LF-4384 Remove setActiveStepIndex(0) in onSave in
 ContextForm

---
 packages/webapp/src/components/Form/ContextForm/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/index.tsx b/packages/webapp/src/components/Form/ContextForm/index.tsx
index 7695424a8c..9b9cdae4fb 100644
--- a/packages/webapp/src/components/Form/ContextForm/index.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/index.tsx
@@ -45,7 +45,6 @@ export const ContextForm = ({
   variant = Variant.PAGE_TITLE,
   isEditing = true,
   setIsEditing,
-  onSave,
   ...props
 }: ContextFormProps) => {
   const [activeStepIndex, setActiveStepIndex] = useState(0);
@@ -108,10 +107,6 @@ export const ContextForm = ({
       setIsEditing={setIsEditing}
       showCancelFlow={showCancelFlow}
       setShowCancelFlow={setShowCancelFlow}
-      onSave={(...args: any) => {
-        setActiveStepIndex(0);
-        onSave?.(...args);
-      }}
       {...form}
       {...props}
     >

From 2325f804dd1cfeeb3953ecc3a88895cf05b579a6 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 27 Nov 2024 09:54:51 -0800
Subject: [PATCH 80/91] LF-4384 Update AnimalBreedSelect to replace undefined
 with null as value

---
 .../src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx b/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx
index 0d8aec2295..6be4ebe646 100644
--- a/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx
+++ b/packages/webapp/src/components/Animals/AddAnimalsFormCard/AnimalSelect.tsx
@@ -96,7 +96,7 @@ export function AnimalBreedSelect<T extends FieldValues>({
           placeholder={isTypeSelected ? undefined : t('ADD_ANIMAL.BREED_PLACEHOLDER_DISABLED')}
           isDisabled={!isTypeSelected || isDisabled}
           onChange={(option) => onChange(option)}
-          value={value}
+          value={value || null}
         />
       )}
     />

From d767bf04f882b352746ec3049ac15790afa612fb Mon Sep 17 00:00:00 2001
From: Joyce Yuki <82857964+kathyavini@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:54:18 -0800
Subject: [PATCH 81/91] LF-4372 Fix help saga error snackbar message

---
 packages/webapp/public/locales/en/message.json | 5 +++++
 packages/webapp/src/containers/Help/saga.js    | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/public/locales/en/message.json b/packages/webapp/public/locales/en/message.json
index 3b514524bb..7b6f3676d3 100644
--- a/packages/webapp/public/locales/en/message.json
+++ b/packages/webapp/public/locales/en/message.json
@@ -82,6 +82,11 @@
       "UPDATE": "Successfully updated farm info!"
     }
   },
+  "HELP_REQUEST": {
+    "ERROR": {
+      "SEND": "Something went wrong while submitting your feedback. Please try again."
+    }
+  },
   "LOG_HARVEST": {
     "ERROR": {
       "ADD_USE_TYPE": "Failed to add custom harvest use type",
diff --git a/packages/webapp/src/containers/Help/saga.js b/packages/webapp/src/containers/Help/saga.js
index 8cea1c4c6c..fb4e82b35d 100644
--- a/packages/webapp/src/containers/Help/saga.js
+++ b/packages/webapp/src/containers/Help/saga.js
@@ -42,11 +42,11 @@ export function* supportFileUploadSaga({ payload: { file, form, onSuccess } }) {
       onSuccess();
       history.push('/');
     } else {
-      yield put(enqueueErrorSnackbar(i18n.t('message:ATTACHMENTS.ERROR.FAILED_UPLOAD')));
+      yield put(enqueueErrorSnackbar(i18n.t('message:HELP_REQUEST.ERROR.SEND')));
     }
     yield put(finishSendHelp());
   } catch (e) {
-    yield put(enqueueErrorSnackbar(i18n.t('message:ATTACHMENTS.ERROR.FAILED_UPLOAD')));
+    yield put(enqueueErrorSnackbar(i18n.t('message:HELP_REQUEST.ERROR.SEND')));
     yield put(finishSendHelp());
     console.log(e);
   }

From ee5d9d8170117f55b718bfa282e992e623544a7b Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 27 Nov 2024 15:17:09 -0500
Subject: [PATCH 82/91] LF-4483 Refactor AnimalInventory container

---
 .../Task/TaskAnimalInventory/index.jsx        |   1 +
 .../components/Task/TaskLocations/index.jsx   |   6 +-
 .../containers/Animals/Inventory/index.tsx    | 376 +++++++++++-------
 3 files changed, 242 insertions(+), 141 deletions(-)

diff --git a/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx b/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
index f9fb2972b6..79e8624233 100644
--- a/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
+++ b/packages/webapp/src/components/Task/TaskAnimalInventory/index.jsx
@@ -108,6 +108,7 @@ export default function PureTaskAnimalInventory({
           view={View.TASK}
           history={history}
           preSelectedIds={persistedFormData?.animalIds}
+          showLinks={false}
         />
       </Form>
     </div>
diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index ccad107d22..0ea005be0a 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { useForm } from 'react-hook-form';
 import { cloneObject } from '../../../util';
 import Checkbox from '../../Form/Checkbox';
-import { ExpandableAnimalInventory, View } from '../../../containers/Animals/Inventory';
+import AnimalInventory, { View } from '../../../containers/Animals/Inventory';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
 export default function PureTaskLocations({
@@ -131,9 +131,11 @@ export default function PureTaskLocations({
           classes={{ container: isAnimalTask && styles.titlePadding }}
         />
         {isAnimalTask && (
-          <ExpandableAnimalInventory
+          <AnimalInventory
             view={View.TASK_SUMMARY}
             preSelectedIds={persistedFormData?.animalIds}
+            showLinks={false}
+            showOnlySelected={true}
           />
         )}
         <Main className={clsx(styles.locationPickerText, isAnimalTask && styles.fullWidthPadding)}>
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 274444d1a9..39092ee41b 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -12,12 +12,15 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
-import { useCallback, useMemo, useState, ChangeEvent } from 'react';
+import { useCallback, useMemo, useState, ChangeEvent, ReactNode } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import PureAnimalInventory, { SearchProps } from '../../../components/Animals/Inventory';
+import PureAnimalInventory, {
+  PureAnimalInventoryProps,
+  SearchProps,
+} from '../../../components/Animals/Inventory';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/styles';
-import { useMediaQuery } from '@mui/material';
+import { Paper, useMediaQuery } from '@mui/material';
 import { History } from 'history';
 import Cell from '../../../components/Table/Cell';
 import { CellKind } from '../../../components/Table/types';
@@ -58,11 +61,134 @@ interface AnimalInventoryProps {
   setFeedbackSurveyOpen: () => void;
   containerHeight: number;
   history: History;
+  showOnlySelected?: boolean;
+  showLinks?: boolean;
 }
 
-interface ExpandableAnimalInventoryProps extends AnimalInventoryProps {
-  preSelectedIds: string[];
-}
+const CoreAnimalInventory = ({
+  filteredInventory,
+  animalsColumns,
+  searchProps,
+  zIndexBase,
+  isDesktop,
+  onSelectInventory,
+  handleSelectAllClick,
+  selectedIds,
+  totalInventoryCount,
+  isFilterActive,
+  clearFilters,
+  isLoading,
+  isAdmin,
+  history,
+  onRowClick,
+  view,
+  siblings,
+}: PureAnimalInventoryProps & { siblings?: ReactNode }) => {
+  return (
+    <>
+      <PureAnimalInventory
+        filteredInventory={filteredInventory}
+        animalsColumns={animalsColumns}
+        searchProps={searchProps}
+        zIndexBase={zIndexBase}
+        isDesktop={isDesktop}
+        onSelectInventory={onSelectInventory}
+        handleSelectAllClick={handleSelectAllClick}
+        selectedIds={selectedIds}
+        totalInventoryCount={totalInventoryCount}
+        isFilterActive={isFilterActive}
+        clearFilters={clearFilters}
+        isLoading={isLoading}
+        isAdmin={isAdmin}
+        history={history}
+        onRowClick={onRowClick}
+        view={view}
+      />
+      {siblings}
+    </>
+  );
+};
+
+const SelectedAnimalSummaryInventory = ({
+  expandableTitle,
+  animalCountString,
+  ...coreProps
+}: {
+  expandableTitle: ReactNode;
+  animalCountString: string | undefined;
+} & PureAnimalInventoryProps) => {
+  const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
+  const isExpanded = expandedIds.includes(1);
+  return (
+    <div className={clsx(styles.section)}>
+      <ExpandableItem
+        isExpanded={isExpanded}
+        onClick={() => toggleExpanded(1)}
+        mainContent={expandableTitle}
+        pillBody={animalCountString}
+        expandedContent={
+          <div className={styles.expandedContentWrapper}>
+            <CoreAnimalInventory {...coreProps} />
+          </div>
+        }
+        iconClickOnly={false}
+        classes={{
+          mainContentWrapper: styles.mainContentWrapper,
+          mainContentWithIcon: styles.mainContentWithIcon,
+          icon: styles.blueColor,
+          alwaysVisibleContent: styles.alwaysVisibleContent,
+        }}
+        itemKey={1}
+        leftCollapseIcon
+      />
+    </div>
+  );
+};
+
+const TaskAnimalInventory = ({ ...coreProps }: PureAnimalInventoryProps) => {
+  return (
+    <FixedHeaderContainer
+      header={null}
+      classes={{
+        paper: styles.paper,
+        divWrapper: styles.divWrapper,
+        wrapper: styles.taskViewMaxHeight,
+      }}
+      kind={ContainerKind.PAPER}
+    >
+      <CoreAnimalInventory {...coreProps} />
+    </FixedHeaderContainer>
+  );
+};
+
+const MainAnimalInventory = ({
+  setFeedbackSurveyOpen,
+  history,
+  onTypeClick,
+  selectedTypeIds,
+  actionMenuAndRemoveModal,
+  ...coreProps
+}: {
+  setFeedbackSurveyOpen: () => void;
+  history: History;
+  onTypeClick: (typeId: string) => void;
+  selectedTypeIds: string[];
+  actionMenuAndRemoveModal: ReactNode;
+} & PureAnimalInventoryProps) => {
+  return (
+    <AnimalsBetaSpotlight setFeedbackSurveyOpen={setFeedbackSurveyOpen}>
+      <FixedHeaderContainer
+        header={
+          <KPI history={history} onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} />
+        }
+        classes={{ paper: styles.paper, divWrapper: styles.divWrapper }}
+        kind={ContainerKind.PAPER}
+      >
+        <CoreAnimalInventory history={history} siblings={actionMenuAndRemoveModal} {...coreProps} />
+      </FixedHeaderContainer>
+    </AnimalsBetaSpotlight>
+  );
+};
 
 const getVisibleSelectedIds = (visibleRowData: AnimalInventoryType[], selectedIds: string[]) => {
   if (!visibleRowData.length || !selectedIds.length) {
@@ -80,6 +206,8 @@ function AnimalInventory({
   isCompactSideMenu,
   setFeedbackSurveyOpen,
   history,
+  showOnlySelected = false,
+  showLinks = true,
 }: AnimalInventoryProps) {
   const [selectedInventoryIds, setSelectedInventoryIds] = useState<string[]>(preSelectedIds);
 
@@ -94,57 +222,11 @@ function AnimalInventory({
   const zIndexBase = theme.zIndex.drawer;
 
   const { inventory, isLoading } = useAnimalInventory();
-
-  const viewConfig = () => {
-    switch (view) {
-      case View.TASK:
-        return {
-          onRowClick: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
-            onSelectInventory(event, row);
-          },
-          showOnlySelected: false,
-          showDetailLink: false,
-          showPaperBorder: true,
-          headerContainerKind: ContainerKind.PAPER,
-          wrapperClass: styles.taskViewMaxHeight,
-          showActionMenu: false,
-          showKPI: false,
-        };
-      case View.TASK_SUMMARY:
-        return {
-          onRowClick: undefined,
-          showOnlySelected: true,
-          showDetailLink: false,
-          headerContainerKind: ContainerKind.OVERFLOW,
-          wrapperClass: styles.summaryViewHeight,
-          showActionMenu: false,
-          showKPI: false,
-        };
-      default:
-        return {
-          onRowClick: (event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
-            history.push(row.path);
-          },
-          showOnlySelected: false,
-          showDetailLink: true,
-          showPaperBorder: true,
-          headerContainerKind: ContainerKind.PAPER,
-          wrapperClass: undefined,
-          showActionMenu: isAdmin && selectedInventoryIds.length,
-          showKPI: true,
-        };
-    }
-  };
-
-  const {
-    onRowClick,
-    showOnlySelected,
-    showDetailLink,
-    headerContainerKind,
-    wrapperClass,
-    showActionMenu,
-    showKPI,
-  } = viewConfig();
+  const totalInventoryCount = inventory.length;
+  const animalCount = preSelectedIds.reduce((acc, cur) => {
+    return acc + (inventory.find((animalOrBatch) => animalOrBatch.id === cur)?.count || 0);
+  }, 0);
+  const animalCountString = t('ANIMAL.ANIMAL_COUNT', { count: animalCount });
 
   const filteredInventory = useFilteredInventory(inventory, showOnlySelected, selectedInventoryIds);
 
@@ -203,7 +285,7 @@ function AnimalInventory({
         sortable: false,
       },
       {
-        id: showDetailLink ? 'path' : null,
+        id: showLinks ? 'path' : null,
         label: '',
         format: (d: AnimalInventoryType) => (
           <Cell kind={CellKind.RIGHT_CHEVRON_LINK} path={d.path} />
@@ -214,7 +296,7 @@ function AnimalInventory({
         sortable: false,
       },
     ],
-    [t, isDesktop],
+    [t, isDesktop, showLinks],
   );
 
   const makeAnimalsSearchableString = (animal: AnimalInventoryType) => {
@@ -300,91 +382,107 @@ function AnimalInventory({
     },
   ];
 
-  return (
-    <AnimalsBetaSpotlight setFeedbackSurveyOpen={setFeedbackSurveyOpen}>
-      <FixedHeaderContainer
-        header={
-          showKPI ? (
-            <KPI history={history} onTypeClick={onTypeClick} selectedTypeIds={selectedTypeIds} />
-          ) : null
-        }
-        classes={{ paper: styles.paper, divWrapper: styles.divWrapper, wrapper: wrapperClass }}
-        kind={headerContainerKind}
-      >
-        <PureAnimalInventory
-          filteredInventory={searchAndFilteredInventory}
-          animalsColumns={animalsColumns}
-          searchProps={searchProps}
-          zIndexBase={zIndexBase}
-          isDesktop={isDesktop}
-          onSelectInventory={onSelectInventory}
-          handleSelectAllClick={handleSelectAllClick}
-          selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
-          totalInventoryCount={inventory.length}
-          isFilterActive={isFilterActive}
-          clearFilters={clearFilters}
-          isLoading={isLoading}
-          isAdmin={isAdmin}
-          history={history}
-          onRowClick={onRowClick}
-          view={view}
-        />
-        {showActionMenu ? (
-          <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
-            <ActionMenu
-              headerLeftText={t('common:SELECTED_COUNT', { count: selectedInventoryIds.length })}
-              textActions={textActions}
-              iconActions={iconActions}
-            />
-          </FloatingContainer>
-        ) : null}
-        <RemoveAnimalsModal
-          isOpen={removalModalOpen}
-          onClose={() => setRemovalModalOpen(false)}
-          onConfirm={onConfirmRemoveAnimals}
-          showSuccessMessage={false}
-        />
-      </FixedHeaderContainer>
-    </AnimalsBetaSpotlight>
+  const expandableTitle = (
+    <div className={styles.blueColor}>{t('TASK.ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE')}</div>
   );
-}
 
-export function ExpandableAnimalInventory(props: ExpandableAnimalInventoryProps) {
-  const { t } = useTranslation();
-  const { inventory } = useAnimalInventory();
-  const animalCount = props.preSelectedIds.reduce((acc, cur) => {
-    return acc + (inventory.find((animalOrBatch) => animalOrBatch.id === cur)?.count || 0);
-  }, 0);
+  const actionMenuAndRemoveModal = (
+    <>
+      {isAdmin && selectedInventoryIds.length ? (
+        <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
+          <ActionMenu
+            headerLeftText={t('common:SELECTED_COUNT', { count: selectedInventoryIds.length })}
+            textActions={textActions}
+            iconActions={iconActions}
+          />
+        </FloatingContainer>
+      ) : null}
+      <RemoveAnimalsModal
+        isOpen={removalModalOpen}
+        onClose={() => setRemovalModalOpen(false)}
+        onConfirm={onConfirmRemoveAnimals}
+        showSuccessMessage={false}
+      />
+    </>
+  );
 
-  const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
-  const isExpanded = expandedIds.includes(1);
-  return (
-    <div className={clsx(styles.section)}>
-      <ExpandableItem
-        isExpanded={isExpanded}
-        onClick={() => toggleExpanded(1)}
-        mainContent={
-          <div className={styles.blueColor}>
-            {t('TASK.ANIMAL_MOVEMENT_EXPANDING_SUMMARY_TITLE')}
-          </div>
-        }
-        pillBody={t('ANIMAL.ANIMAL_COUNT', { count: animalCount })}
-        expandedContent={
-          <div className={styles.expandedContentWrapper}>
-            <AnimalInventory {...props} />
-          </div>
-        }
-        iconClickOnly={false}
-        classes={{
-          mainContentWrapper: styles.mainContentWrapper,
-          mainContentWithIcon: styles.mainContentWithIcon,
-          icon: styles.blueColor,
-          alwaysVisibleContent: styles.alwaysVisibleContent,
+  if (view == View.TASK) {
+    return (
+      <TaskAnimalInventory
+        //core props
+        filteredInventory={searchAndFilteredInventory}
+        animalsColumns={animalsColumns}
+        searchProps={searchProps}
+        zIndexBase={zIndexBase}
+        isDesktop={isDesktop}
+        onSelectInventory={onSelectInventory}
+        handleSelectAllClick={handleSelectAllClick}
+        selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
+        totalInventoryCount={totalInventoryCount}
+        isFilterActive={isFilterActive}
+        clearFilters={clearFilters}
+        isLoading={isLoading}
+        isAdmin={isAdmin}
+        history={history}
+        onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+          onSelectInventory(event, row);
         }}
-        itemKey={1}
-        leftCollapseIcon
+        view={view}
       />
-    </div>
+    );
+  }
+  if (view == View.TASK_SUMMARY) {
+    return (
+      <SelectedAnimalSummaryInventory
+        expandableTitle={expandableTitle}
+        animalCountString={animalCountString}
+        //core props
+        filteredInventory={searchAndFilteredInventory}
+        animalsColumns={animalsColumns}
+        searchProps={searchProps}
+        zIndexBase={zIndexBase}
+        isDesktop={isDesktop}
+        onSelectInventory={onSelectInventory}
+        handleSelectAllClick={handleSelectAllClick}
+        selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
+        totalInventoryCount={totalInventoryCount}
+        isFilterActive={isFilterActive}
+        clearFilters={clearFilters}
+        isLoading={isLoading}
+        isAdmin={isAdmin}
+        history={history}
+        onRowClick={undefined}
+        view={view}
+      />
+    );
+  }
+
+  return (
+    <MainAnimalInventory
+      setFeedbackSurveyOpen={setFeedbackSurveyOpen}
+      onTypeClick={onTypeClick}
+      selectedTypeIds={selectedTypeIds}
+      actionMenuAndRemoveModal={actionMenuAndRemoveModal}
+      //core props
+      filteredInventory={searchAndFilteredInventory}
+      animalsColumns={animalsColumns}
+      searchProps={searchProps}
+      zIndexBase={zIndexBase}
+      isDesktop={isDesktop}
+      onSelectInventory={onSelectInventory}
+      handleSelectAllClick={handleSelectAllClick}
+      selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
+      totalInventoryCount={totalInventoryCount}
+      isFilterActive={isFilterActive}
+      clearFilters={clearFilters}
+      isLoading={isLoading}
+      isAdmin={isAdmin}
+      history={history}
+      onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+        history.push(row.path);
+      }}
+      view={view}
+    />
   );
 }
 

From dc5bfbf75be118734fb21b6a96ae95da350f3f8e Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 27 Nov 2024 18:10:08 -0500
Subject: [PATCH 83/91] LF-4483 Move view config to props in component

---
 .../components/Animals/Inventory/index.tsx    | 118 ++++++------------
 .../containers/Animals/Inventory/index.tsx    |  50 ++++++--
 2 files changed, 76 insertions(+), 92 deletions(-)

diff --git a/packages/webapp/src/components/Animals/Inventory/index.tsx b/packages/webapp/src/components/Animals/Inventory/index.tsx
index d04b3bdf61..dbca03e36c 100644
--- a/packages/webapp/src/components/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/components/Animals/Inventory/index.tsx
@@ -27,16 +27,8 @@ import { TableV2Column, TableKind } from '../../Table/types';
 import type { Dispatch, SetStateAction } from 'react';
 import styles from './styles.module.scss';
 import clsx from 'clsx';
-import { sumObjectValues } from '../../../util';
 import { useTranslation } from 'react-i18next';
 import { ADD_ANIMALS_URL } from '../../../util/siteMapConstants';
-import { View } from '../../../containers/Animals/Inventory';
-
-const HEIGHTS = {
-  filterAndSearch: 64,
-  containerPadding: 32,
-};
-const usedHeight = sumObjectValues(HEIGHTS);
 
 export type SearchProps = {
   searchString: string | null | undefined;
@@ -45,25 +37,7 @@ export type SearchProps = {
   searchResultsText: string;
 };
 
-const PureAnimalInventory = ({
-  filteredInventory,
-  animalsColumns,
-  zIndexBase,
-  isDesktop,
-  searchProps,
-  onSelectInventory,
-  handleSelectAllClick,
-  selectedIds,
-  onRowClick,
-  totalInventoryCount,
-  isFilterActive,
-  clearFilters,
-  isLoading,
-  containerHeight,
-  isAdmin,
-  history,
-  view = View.DEFAULT,
-}: {
+export type PureAnimalInventoryProps = {
   filteredInventory: AnimalInventory[];
   animalsColumns: TableV2Column[];
   zIndexBase: number;
@@ -78,67 +52,47 @@ const PureAnimalInventory = ({
   clearFilters: () => void;
   isLoading: boolean;
   containerHeight?: number;
-  isAdmin: boolean;
   history: History;
-  view?: View;
-}) => {
-  const { t } = useTranslation();
-
-  const viewConfig = () => {
-    switch (view) {
-      case View.TASK:
-        return {
-          tableMaxHeight: !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight,
-          tableSpacerRowHeight: 0,
-          showInventorySelection: isAdmin,
-          showSearchBarAndFilter: true,
-          alternatingRowColor: true,
-          showTableHeader: isDesktop,
-          showActionFloaterButton: false,
-        };
-      case View.TASK_SUMMARY:
-        return {
-          tableMaxHeight: undefined,
-          tableSpacerRowHeight: 0,
-          showInventorySelection: false,
-          showSearchBarAndFilter: false,
-          alternatingRowColor: isDesktop ? false : true,
-          showTableHeader: false,
-          extraRowSpacing: isDesktop,
-          showActionFloaterButton: false,
-        };
-      default:
-        return {
-          tableMaxHeight: !isDesktop || !containerHeight ? undefined : containerHeight - usedHeight,
-          tableSpacerRowHeight: isDesktop ? 96 : 120,
-          showInventorySelection: isAdmin,
-          showSearchBarAndFilter: true,
-          alternatingRowColor: true,
-          showTableHeader: isDesktop,
-          showActionFloaterButton: isAdmin,
-        };
-    }
-  };
-
-  const {
-    tableMaxHeight,
-    tableSpacerRowHeight,
-    showInventorySelection,
-    showSearchBarAndFilter,
-    alternatingRowColor,
-    showTableHeader,
-    extraRowSpacing,
-    showActionFloaterButton,
-  } = viewConfig();
+  tableMaxHeight?: number;
+  tableSpacerRowHeight: number;
+  showInventorySelection: boolean;
+  showSearchBarAndFilter?: boolean;
+  alternatingRowColor?: boolean;
+  showTableHeader: boolean;
+  showActionFloaterButton: boolean;
+  extraRowSpacing?: boolean;
+};
 
-  if (isLoading) {
-    return null;
-  }
+const PureAnimalInventory = ({
+  filteredInventory,
+  animalsColumns,
+  zIndexBase,
+  isDesktop,
+  searchProps,
+  onSelectInventory,
+  handleSelectAllClick,
+  selectedIds,
+  onRowClick,
+  totalInventoryCount,
+  isFilterActive,
+  clearFilters,
+  isLoading,
+  history,
+  tableMaxHeight,
+  tableSpacerRowHeight,
+  showInventorySelection,
+  showSearchBarAndFilter = true,
+  alternatingRowColor = true,
+  showTableHeader,
+  showActionFloaterButton,
+  extraRowSpacing,
+}: PureAnimalInventoryProps) => {
+  const { t } = useTranslation();
 
   const { searchString, setSearchString, placeHolderText, searchResultsText } = searchProps;
   const hasSearchResults = filteredInventory.length !== 0;
 
-  return (
+  return isLoading ? null : (
     <>
       {showSearchBarAndFilter && (
         <div
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 39092ee41b..82dc7f0c69 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -47,6 +47,13 @@ import ExpandableItem from '../../../components/Expandable/ExpandableItem';
 import useExpandable from '../../../components/Expandable/useExpandableItem';
 import clsx from 'clsx';
 import AnimalsBetaSpotlight from './AnimalsBetaSpotlight';
+import { sumObjectValues } from '../../../util';
+
+const HEIGHTS = {
+  filterAndSearch: 64,
+  containerPadding: 32,
+};
+const usedHeight = sumObjectValues(HEIGHTS);
 
 export enum View {
   DEFAULT = 'default',
@@ -78,10 +85,15 @@ const CoreAnimalInventory = ({
   isFilterActive,
   clearFilters,
   isLoading,
-  isAdmin,
   history,
   onRowClick,
-  view,
+  tableSpacerRowHeight,
+  showInventorySelection,
+  showSearchBarAndFilter,
+  alternatingRowColor,
+  showTableHeader,
+  showActionFloaterButton,
+  containerHeight,
   siblings,
 }: PureAnimalInventoryProps & { siblings?: ReactNode }) => {
   return (
@@ -99,10 +111,15 @@ const CoreAnimalInventory = ({
         isFilterActive={isFilterActive}
         clearFilters={clearFilters}
         isLoading={isLoading}
-        isAdmin={isAdmin}
         history={history}
         onRowClick={onRowClick}
-        view={view}
+        tableMaxHeight={!isDesktop || !containerHeight ? undefined : containerHeight - usedHeight}
+        tableSpacerRowHeight={tableSpacerRowHeight}
+        showInventorySelection={showInventorySelection}
+        showSearchBarAndFilter={showSearchBarAndFilter}
+        alternatingRowColor={alternatingRowColor}
+        showTableHeader={showTableHeader}
+        showActionFloaterButton={showActionFloaterButton}
       />
       {siblings}
     </>
@@ -422,12 +439,16 @@ function AnimalInventory({
         isFilterActive={isFilterActive}
         clearFilters={clearFilters}
         isLoading={isLoading}
-        isAdmin={isAdmin}
         history={history}
         onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
           onSelectInventory(event, row);
         }}
-        view={view}
+        tableSpacerRowHeight={0}
+        showInventorySelection={isAdmin}
+        showSearchBarAndFilter={true}
+        alternatingRowColor={true}
+        showTableHeader={isDesktop}
+        showActionFloaterButton={false}
       />
     );
   }
@@ -449,10 +470,15 @@ function AnimalInventory({
         isFilterActive={isFilterActive}
         clearFilters={clearFilters}
         isLoading={isLoading}
-        isAdmin={isAdmin}
         history={history}
         onRowClick={undefined}
-        view={view}
+        tableSpacerRowHeight={0}
+        showInventorySelection={false}
+        showSearchBarAndFilter={false}
+        alternatingRowColor={isDesktop ? false : true}
+        showTableHeader={false}
+        extraRowSpacing={isDesktop}
+        showActionFloaterButton={false}
       />
     );
   }
@@ -476,12 +502,16 @@ function AnimalInventory({
       isFilterActive={isFilterActive}
       clearFilters={clearFilters}
       isLoading={isLoading}
-      isAdmin={isAdmin}
       history={history}
       onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
         history.push(row.path);
       }}
-      view={view}
+      tableSpacerRowHeight={isDesktop ? 96 : 120}
+      showInventorySelection={isAdmin}
+      showSearchBarAndFilter={true}
+      alternatingRowColor={true}
+      showTableHeader={isDesktop}
+      showActionFloaterButton={isAdmin}
     />
   );
 }

From 97026fe25698121ec2271ff39149ee1059c8e6e5 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 27 Nov 2024 18:12:33 -0500
Subject: [PATCH 84/91] LF-4483 Move useMemo out of conditional

---
 .../Animals/Inventory/useFilteredInventory.ts | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index 811fcee49a..0d7ff9367f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -27,13 +27,11 @@ export const useFilteredInventory = (
   showOnlySelected: boolean,
   selectedInventoryIds: string[],
 ) => {
-  if (showOnlySelected) {
-    return useMemo(() => {
-      return inventory.filter((entity) => {
-        return selectedInventoryIds.includes(entity.id);
-      });
-    }, [inventory, selectedInventoryIds]);
-  }
+  const idMatches = useMemo(() => {
+    return inventory.filter((entity) => {
+      return selectedInventoryIds.includes(entity.id);
+    });
+  }, [inventory, selectedInventoryIds]);
 
   const {
     [AnimalsFilterKeys.ANIMAL_OR_BATCH]: animalsOrBatchesFilter,
@@ -44,9 +42,10 @@ export const useFilteredInventory = (
     [AnimalsFilterKeys.LOCATION]: locationsFilter,
   } = useSelector(animalsFilterSelector);
 
-  return useMemo(() => {
+  const filterMatches = useMemo(() => {
     return inventory.filter((entity) => {
       const animalOrBatchMatches =
+        (showOnlySelected && selectedInventoryIds.includes(entity.id)) ||
         isInactive(animalsOrBatchesFilter) ||
         (entity.batch
           ? animalsOrBatchesFilter[AnimalOrBatchKeys.BATCH]?.active
@@ -73,6 +72,10 @@ export const useFilteredInventory = (
       // const locationMatches =
       //   isInactive(locationsFilter) || locationsFilter[entity.location]?.active;
 
+      if (showOnlySelected) {
+        return animalOrBatchMatches;
+      }
+
       return (
         animalOrBatchMatches &&
         typeMatches &&
@@ -91,4 +94,10 @@ export const useFilteredInventory = (
     groupsFilter,
     locationsFilter,
   ]);
+
+  if (showOnlySelected) {
+    return idMatches;
+  }
+
+  return filterMatches;
 };

From e7e5a01a0d1e86102410097f643092358b62e719 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 27 Nov 2024 19:00:19 -0500
Subject: [PATCH 85/91] LF-4483 Cleanup

---
 .../containers/Animals/Inventory/index.tsx    | 127 +++++-------------
 1 file changed, 35 insertions(+), 92 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 82dc7f0c69..bbaeeee94f 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -72,64 +72,29 @@ interface AnimalInventoryProps {
   showLinks?: boolean;
 }
 
-const CoreAnimalInventory = ({
-  filteredInventory,
-  animalsColumns,
-  searchProps,
-  zIndexBase,
+const BaseAnimalInventory = ({
   isDesktop,
-  onSelectInventory,
-  handleSelectAllClick,
-  selectedIds,
-  totalInventoryCount,
-  isFilterActive,
-  clearFilters,
-  isLoading,
-  history,
-  onRowClick,
-  tableSpacerRowHeight,
-  showInventorySelection,
-  showSearchBarAndFilter,
-  alternatingRowColor,
-  showTableHeader,
-  showActionFloaterButton,
+  // containerHeight provided by FixedHeaderContainer if exists
   containerHeight,
   siblings,
+  ...baseProps
 }: PureAnimalInventoryProps & { siblings?: ReactNode }) => {
   return (
     <>
       <PureAnimalInventory
-        filteredInventory={filteredInventory}
-        animalsColumns={animalsColumns}
-        searchProps={searchProps}
-        zIndexBase={zIndexBase}
         isDesktop={isDesktop}
-        onSelectInventory={onSelectInventory}
-        handleSelectAllClick={handleSelectAllClick}
-        selectedIds={selectedIds}
-        totalInventoryCount={totalInventoryCount}
-        isFilterActive={isFilterActive}
-        clearFilters={clearFilters}
-        isLoading={isLoading}
-        history={history}
-        onRowClick={onRowClick}
         tableMaxHeight={!isDesktop || !containerHeight ? undefined : containerHeight - usedHeight}
-        tableSpacerRowHeight={tableSpacerRowHeight}
-        showInventorySelection={showInventorySelection}
-        showSearchBarAndFilter={showSearchBarAndFilter}
-        alternatingRowColor={alternatingRowColor}
-        showTableHeader={showTableHeader}
-        showActionFloaterButton={showActionFloaterButton}
+        {...baseProps}
       />
       {siblings}
     </>
   );
 };
 
-const SelectedAnimalSummaryInventory = ({
+const SelectedAnimalsSummaryInventory = ({
   expandableTitle,
   animalCountString,
-  ...coreProps
+  ...baseProps
 }: {
   expandableTitle: ReactNode;
   animalCountString: string | undefined;
@@ -145,7 +110,7 @@ const SelectedAnimalSummaryInventory = ({
         pillBody={animalCountString}
         expandedContent={
           <div className={styles.expandedContentWrapper}>
-            <CoreAnimalInventory {...coreProps} />
+            <BaseAnimalInventory {...baseProps} />
           </div>
         }
         iconClickOnly={false}
@@ -162,7 +127,7 @@ const SelectedAnimalSummaryInventory = ({
   );
 };
 
-const TaskAnimalInventory = ({ ...coreProps }: PureAnimalInventoryProps) => {
+const TaskAnimalInventory = ({ ...baseProps }: PureAnimalInventoryProps) => {
   return (
     <FixedHeaderContainer
       header={null}
@@ -173,7 +138,7 @@ const TaskAnimalInventory = ({ ...coreProps }: PureAnimalInventoryProps) => {
       }}
       kind={ContainerKind.PAPER}
     >
-      <CoreAnimalInventory {...coreProps} />
+      <BaseAnimalInventory {...baseProps} />
     </FixedHeaderContainer>
   );
 };
@@ -184,7 +149,7 @@ const MainAnimalInventory = ({
   onTypeClick,
   selectedTypeIds,
   actionMenuAndRemoveModal,
-  ...coreProps
+  ...baseProps
 }: {
   setFeedbackSurveyOpen: () => void;
   history: History;
@@ -201,7 +166,7 @@ const MainAnimalInventory = ({
         classes={{ paper: styles.paper, divWrapper: styles.divWrapper }}
         kind={ContainerKind.PAPER}
       >
-        <CoreAnimalInventory history={history} siblings={actionMenuAndRemoveModal} {...coreProps} />
+        <BaseAnimalInventory history={history} siblings={actionMenuAndRemoveModal} {...baseProps} />
       </FixedHeaderContainer>
     </AnimalsBetaSpotlight>
   );
@@ -216,7 +181,7 @@ const getVisibleSelectedIds = (visibleRowData: AnimalInventoryType[], selectedId
   return selectedIds.filter((id) => visibleRowIdsSet.has(id));
 };
 
-function AnimalInventory({
+export default function AnimalInventory({
   preSelectedIds = [],
   onSelect,
   view = View.DEFAULT,
@@ -423,23 +388,27 @@ function AnimalInventory({
     </>
   );
 
+  const commonProps = {
+    filteredInventory: searchAndFilteredInventory,
+    animalsColumns: animalsColumns,
+    searchProps: searchProps,
+    zIndexBase: zIndexBase,
+    isDesktop: isDesktop,
+    onSelectInventory: onSelectInventory,
+    handleSelectAllClick: handleSelectAllClick,
+    selectedIds: getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds),
+    totalInventoryCount: totalInventoryCount,
+    isFilterActive: isFilterActive,
+    clearFilters: clearFilters,
+    isLoading: isLoading,
+    history: history,
+  };
+
   if (view == View.TASK) {
     return (
       <TaskAnimalInventory
-        //core props
-        filteredInventory={searchAndFilteredInventory}
-        animalsColumns={animalsColumns}
-        searchProps={searchProps}
-        zIndexBase={zIndexBase}
-        isDesktop={isDesktop}
-        onSelectInventory={onSelectInventory}
-        handleSelectAllClick={handleSelectAllClick}
-        selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
-        totalInventoryCount={totalInventoryCount}
-        isFilterActive={isFilterActive}
-        clearFilters={clearFilters}
-        isLoading={isLoading}
-        history={history}
+        //base props
+        {...commonProps}
         onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
           onSelectInventory(event, row);
         }}
@@ -454,23 +423,11 @@ function AnimalInventory({
   }
   if (view == View.TASK_SUMMARY) {
     return (
-      <SelectedAnimalSummaryInventory
+      <SelectedAnimalsSummaryInventory
         expandableTitle={expandableTitle}
         animalCountString={animalCountString}
-        //core props
-        filteredInventory={searchAndFilteredInventory}
-        animalsColumns={animalsColumns}
-        searchProps={searchProps}
-        zIndexBase={zIndexBase}
-        isDesktop={isDesktop}
-        onSelectInventory={onSelectInventory}
-        handleSelectAllClick={handleSelectAllClick}
-        selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
-        totalInventoryCount={totalInventoryCount}
-        isFilterActive={isFilterActive}
-        clearFilters={clearFilters}
-        isLoading={isLoading}
-        history={history}
+        //base props
+        {...commonProps}
         onRowClick={undefined}
         tableSpacerRowHeight={0}
         showInventorySelection={false}
@@ -489,20 +446,8 @@ function AnimalInventory({
       onTypeClick={onTypeClick}
       selectedTypeIds={selectedTypeIds}
       actionMenuAndRemoveModal={actionMenuAndRemoveModal}
-      //core props
-      filteredInventory={searchAndFilteredInventory}
-      animalsColumns={animalsColumns}
-      searchProps={searchProps}
-      zIndexBase={zIndexBase}
-      isDesktop={isDesktop}
-      onSelectInventory={onSelectInventory}
-      handleSelectAllClick={handleSelectAllClick}
-      selectedIds={getVisibleSelectedIds(searchAndFilteredInventory, selectedInventoryIds)}
-      totalInventoryCount={totalInventoryCount}
-      isFilterActive={isFilterActive}
-      clearFilters={clearFilters}
-      isLoading={isLoading}
-      history={history}
+      //base props
+      {...commonProps}
       onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
         history.push(row.path);
       }}
@@ -515,5 +460,3 @@ function AnimalInventory({
     />
   );
 }
-
-export default AnimalInventory;

From 80cbadc856a24a728cdf042f0d4582e790b94ac6 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Wed, 27 Nov 2024 20:23:14 -0500
Subject: [PATCH 86/91] LF-4483 Move expandable styles with pill to expandable
 item, make stories

---
 .../components/Expandable/ExpandableItem.jsx  |  8 +++-
 .../components/Expandable/styles.module.scss  | 29 ++++++++++++++
 .../containers/Animals/Inventory/index.tsx    |  3 --
 .../Animals/Inventory/styles.module.scss      | 29 --------------
 .../ExpandableItem/ExpandableItem.stories.jsx | 39 +++++++++++++++----
 5 files changed, 68 insertions(+), 40 deletions(-)

diff --git a/packages/webapp/src/components/Expandable/ExpandableItem.jsx b/packages/webapp/src/components/Expandable/ExpandableItem.jsx
index b2c8d5b16f..0b6f2548a8 100644
--- a/packages/webapp/src/components/Expandable/ExpandableItem.jsx
+++ b/packages/webapp/src/components/Expandable/ExpandableItem.jsx
@@ -54,7 +54,11 @@ export default function ExpandableItem({
   return (
     <div className={clsx(classes.container, isExpanded && classes.expandedContainer)}>
       <div
-        className={clsx(classes.alwaysVisibleContent, !iconClickOnly && styles.clickable)}
+        className={clsx(
+          classes.alwaysVisibleContent,
+          !iconClickOnly && styles.clickable,
+          pillBody && styles.pillAlwaysVisibleContent,
+        )}
         onClick={onElementClick}
       >
         <div
@@ -62,6 +66,7 @@ export default function ExpandableItem({
             styles.mainContentWithIcon,
             classes.mainContentWithIcon,
             isExpanded && classes.expandedMainContentWithIcon,
+            pillBody && styles.pillMainContentWithIcon,
           )}
           aria-controls={id}
           aria-expanded={isExpanded}
@@ -71,6 +76,7 @@ export default function ExpandableItem({
               styles.mainContentWrapper,
               classes.mainContentWrapper,
               leftCollapseIcon && styles.leftCollapse,
+              pillBody && styles.pillMainContentWrapper,
             )}
           >
             {mainContent}
diff --git a/packages/webapp/src/components/Expandable/styles.module.scss b/packages/webapp/src/components/Expandable/styles.module.scss
index 47ff0d6734..9c0d18555d 100644
--- a/packages/webapp/src/components/Expandable/styles.module.scss
+++ b/packages/webapp/src/components/Expandable/styles.module.scss
@@ -48,4 +48,33 @@
   @include lg-breakpoint {
     width: unset;
   }
+}
+
+.pillAlwaysVisibleContent {
+  max-height: 56px;
+  padding: 0 16px;
+  @include lg-breakpoint {
+    align-items: center;
+    gap: 8px;
+    display: flex;
+  }
+}
+
+.pillMainContentWrapper {
+  width: auto;
+  gap: 8px;
+  @include lg-breakpoint {
+    display: flex;
+  }
+}
+
+.pillMainContentWithIcon {
+  text-align: center;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 8px;
+  
+  @include lg-breakpoint {
+    margin-bottom: 0px;
+  }
 }
\ No newline at end of file
diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index bbaeeee94f..82d839be91 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -115,10 +115,7 @@ const SelectedAnimalsSummaryInventory = ({
         }
         iconClickOnly={false}
         classes={{
-          mainContentWrapper: styles.mainContentWrapper,
-          mainContentWithIcon: styles.mainContentWithIcon,
           icon: styles.blueColor,
-          alwaysVisibleContent: styles.alwaysVisibleContent,
         }}
         itemKey={1}
         leftCollapseIcon
diff --git a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
index 1a9b6d7519..ff9f2ad854 100644
--- a/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
+++ b/packages/webapp/src/containers/Animals/Inventory/styles.module.scss
@@ -56,16 +56,6 @@
   }
 }
 
-.alwaysVisibleContent {
-  max-height: 56px;
-  padding: 0 16px;
-  @include lg-breakpoint {
-    align-items: center;
-    gap: 8px;
-    display: flex;
-  }
-}
-
 .expandedContentWrapper {
   margin-top: 16px;
 }
@@ -78,25 +68,6 @@
   background: var(--White);
 }
 
-.mainContentWrapper {
-  width: auto !important;
-  gap: 8px;
-  @include lg-breakpoint {
-    display: flex;
-  }
-}
-
-.mainContentWithIcon {
-  text-align: center;
-  gap: 8px;
-  justify-content: center;
-  margin-bottom: 8px;
-  
-  @include lg-breakpoint {
-    margin-bottom: 0px;
-  }
-}
-
 .blueColor {
   color: var(--Colors-Accent---singles-Blue-full);
   svg {
diff --git a/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx b/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
index a892002f4a..7084581cfc 100644
--- a/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
+++ b/packages/webapp/src/stories/ExpandableItem/ExpandableItem.stories.jsx
@@ -73,10 +73,11 @@ const Test = ({
   isSingleExpandable,
   iconClickOnly,
   leftCollapseIcon,
+  pillBody,
   transactionStyles = true,
 }) => {
   const { expandedIds, toggleExpanded } = useExpandable({ defaultExpandedIds, isSingleExpandable });
-
+  const classes = pillBody ? undefined : AnimalsContentClasses(transactionStyles);
   return data.map((values, index) => {
     const isExpanded = expandedIds.includes(index);
     return (
@@ -93,14 +94,10 @@ const Test = ({
           mainContent={<MainContent {...values} isExpanded={isExpanded} />}
           expandedContent={<div className={styles.expandedContent}>{values.expandedContent}</div>}
           iconClickOnly={iconClickOnly}
-          classes={{
-            mainContentWithIcon: transactionStyles
-              ? styles.expandableItem
-              : styles.animalsExpandableItem,
-            icon: transactionStyles ? '' : styles.animalsCollapseIcon,
-          }}
+          classes={classes}
           key={index}
           leftCollapseIcon={leftCollapseIcon}
+          pillBody={pillBody}
         />
       </div>
     );
@@ -245,6 +242,13 @@ const AnimalsMainContent = (props) => {
   return <AnimalFormHeaderItem {...props} />;
 };
 
+const AnimalsContentClasses = (transactionStyles) => {
+  return {
+    mainContentWithIcon: transactionStyles ? styles.expandableItem : styles.animalsExpandableItem,
+    icon: transactionStyles ? '' : styles.animalsCollapseIcon,
+  };
+};
+
 export const NestedExpandable = {
   render: () => (
     <Test
@@ -258,3 +262,24 @@ export const NestedExpandable = {
     />
   ),
 };
+
+export const PillInTitleExpandable = {
+  render: () => (
+    <Test
+      data={[mockAnimalData]}
+      mainContent={() => 'Basic Title'}
+      defaultExpandedIds={[1]}
+      isSingleExpandable={true}
+      iconClickOnly={false}
+      pillBody="Batch with 5 animals"
+      leftCollapseIcon={true}
+      transactionStyles={false}
+    />
+  ),
+};
+
+const PillBodyClasses = {
+  mainContentWrapper: styles.mainContentWrapper,
+  mainContentWithIcon: styles.mainContentWithIcon,
+  alwaysVisibleContent: styles.alwaysVisibleContent,
+};

From afe3e4431dfe7b051d774b700c8cc9aa84854b19 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Thu, 28 Nov 2024 14:19:00 -0800
Subject: [PATCH 87/91] LF-4549 Add missing dependency to SexDetails useMemo

---
 packages/webapp/src/components/Form/SexDetails/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Form/SexDetails/index.tsx b/packages/webapp/src/components/Form/SexDetails/index.tsx
index 3490206592..1bbc2da848 100644
--- a/packages/webapp/src/components/Form/SexDetails/index.tsx
+++ b/packages/webapp/src/components/Form/SexDetails/index.tsx
@@ -96,7 +96,7 @@ export default function SexDetails({
         }
       />
     ),
-    [isPopoverOpen, maxCount],
+    [isPopoverOpen, maxCount, isDisabled],
   );
 
   return (

From bf496cadb8d6b8852d090af34788952cb648911f Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antsgar@gmail.com>
Date: Fri, 29 Nov 2024 13:43:02 -0300
Subject: [PATCH 88/91] LF-4483 refactor proposal for inventory container

---
 .../containers/Animals/Inventory/index.tsx    | 120 +++++++++++-------
 1 file changed, 73 insertions(+), 47 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/index.tsx b/packages/webapp/src/containers/Animals/Inventory/index.tsx
index 82d839be91..79db836d38 100644
--- a/packages/webapp/src/containers/Animals/Inventory/index.tsx
+++ b/packages/webapp/src/containers/Animals/Inventory/index.tsx
@@ -60,6 +60,23 @@ export enum View {
   TASK = 'task',
   TASK_SUMMARY = 'task_summary',
 }
+
+type CommonPureAnimalInventoryProps = Pick<
+  PureAnimalInventoryProps,
+  | 'filteredInventory'
+  | 'animalsColumns'
+  | 'zIndexBase'
+  | 'isDesktop'
+  | 'searchProps'
+  | 'onSelectInventory'
+  | 'handleSelectAllClick'
+  | 'selectedIds'
+  | 'totalInventoryCount'
+  | 'isFilterActive'
+  | 'clearFilters'
+  | 'isLoading'
+  | 'history'
+>;
 interface AnimalInventoryProps {
   preSelectedIds?: string[];
   onSelect?: (newIds: string[]) => void;
@@ -76,17 +93,17 @@ const BaseAnimalInventory = ({
   isDesktop,
   // containerHeight provided by FixedHeaderContainer if exists
   containerHeight,
-  siblings,
-  ...baseProps
-}: PureAnimalInventoryProps & { siblings?: ReactNode }) => {
+  children,
+  ...props
+}: PureAnimalInventoryProps & { children?: ReactNode }) => {
   return (
     <>
       <PureAnimalInventory
         isDesktop={isDesktop}
         tableMaxHeight={!isDesktop || !containerHeight ? undefined : containerHeight - usedHeight}
-        {...baseProps}
+        {...props}
       />
-      {siblings}
+      {children}
     </>
   );
 };
@@ -94,11 +111,12 @@ const BaseAnimalInventory = ({
 const SelectedAnimalsSummaryInventory = ({
   expandableTitle,
   animalCountString,
-  ...baseProps
+  ...commonProps
 }: {
   expandableTitle: ReactNode;
   animalCountString: string | undefined;
-} & PureAnimalInventoryProps) => {
+} & CommonPureAnimalInventoryProps) => {
+  // @ts-ignore
   const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
   const isExpanded = expandedIds.includes(1);
   return (
@@ -110,7 +128,17 @@ const SelectedAnimalsSummaryInventory = ({
         pillBody={animalCountString}
         expandedContent={
           <div className={styles.expandedContentWrapper}>
-            <BaseAnimalInventory {...baseProps} />
+            <BaseAnimalInventory
+              onRowClick={undefined}
+              tableSpacerRowHeight={0}
+              showInventorySelection={false}
+              showSearchBarAndFilter={false}
+              alternatingRowColor={commonProps.isDesktop ? false : true}
+              showTableHeader={false}
+              extraRowSpacing={commonProps.isDesktop}
+              showActionFloaterButton={false}
+              {...commonProps}
+            />
           </div>
         }
         iconClickOnly={false}
@@ -124,7 +152,10 @@ const SelectedAnimalsSummaryInventory = ({
   );
 };
 
-const TaskAnimalInventory = ({ ...baseProps }: PureAnimalInventoryProps) => {
+const TaskAnimalInventory = ({
+  isAdmin,
+  ...commonProps
+}: { isAdmin: boolean } & CommonPureAnimalInventoryProps) => {
   return (
     <FixedHeaderContainer
       header={null}
@@ -135,7 +166,18 @@ const TaskAnimalInventory = ({ ...baseProps }: PureAnimalInventoryProps) => {
       }}
       kind={ContainerKind.PAPER}
     >
-      <BaseAnimalInventory {...baseProps} />
+      <BaseAnimalInventory
+        onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+          commonProps.onSelectInventory(event, row);
+        }}
+        tableSpacerRowHeight={0}
+        showInventorySelection={isAdmin}
+        showSearchBarAndFilter={true}
+        alternatingRowColor={true}
+        showTableHeader={commonProps.isDesktop}
+        showActionFloaterButton={false}
+        {...commonProps}
+      />
     </FixedHeaderContainer>
   );
 };
@@ -146,14 +188,16 @@ const MainAnimalInventory = ({
   onTypeClick,
   selectedTypeIds,
   actionMenuAndRemoveModal,
-  ...baseProps
+  isAdmin,
+  ...commonProps
 }: {
   setFeedbackSurveyOpen: () => void;
   history: History;
   onTypeClick: (typeId: string) => void;
   selectedTypeIds: string[];
   actionMenuAndRemoveModal: ReactNode;
-} & PureAnimalInventoryProps) => {
+  isAdmin: boolean;
+} & CommonPureAnimalInventoryProps) => {
   return (
     <AnimalsBetaSpotlight setFeedbackSurveyOpen={setFeedbackSurveyOpen}>
       <FixedHeaderContainer
@@ -163,7 +207,21 @@ const MainAnimalInventory = ({
         classes={{ paper: styles.paper, divWrapper: styles.divWrapper }}
         kind={ContainerKind.PAPER}
       >
-        <BaseAnimalInventory history={history} siblings={actionMenuAndRemoveModal} {...baseProps} />
+        <BaseAnimalInventory
+          history={history}
+          {...commonProps}
+          onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
+            history.push(row.path);
+          }}
+          tableSpacerRowHeight={commonProps.isDesktop ? 96 : 120}
+          showInventorySelection={isAdmin}
+          showSearchBarAndFilter={true}
+          alternatingRowColor={true}
+          showTableHeader={commonProps.isDesktop}
+          showActionFloaterButton={isAdmin}
+        >
+          {actionMenuAndRemoveModal}
+        </BaseAnimalInventory>
       </FixedHeaderContainer>
     </AnimalsBetaSpotlight>
   );
@@ -402,37 +460,14 @@ export default function AnimalInventory({
   };
 
   if (view == View.TASK) {
-    return (
-      <TaskAnimalInventory
-        //base props
-        {...commonProps}
-        onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
-          onSelectInventory(event, row);
-        }}
-        tableSpacerRowHeight={0}
-        showInventorySelection={isAdmin}
-        showSearchBarAndFilter={true}
-        alternatingRowColor={true}
-        showTableHeader={isDesktop}
-        showActionFloaterButton={false}
-      />
-    );
+    return <TaskAnimalInventory isAdmin={isAdmin} {...commonProps} />;
   }
   if (view == View.TASK_SUMMARY) {
     return (
       <SelectedAnimalsSummaryInventory
         expandableTitle={expandableTitle}
         animalCountString={animalCountString}
-        //base props
         {...commonProps}
-        onRowClick={undefined}
-        tableSpacerRowHeight={0}
-        showInventorySelection={false}
-        showSearchBarAndFilter={false}
-        alternatingRowColor={isDesktop ? false : true}
-        showTableHeader={false}
-        extraRowSpacing={isDesktop}
-        showActionFloaterButton={false}
       />
     );
   }
@@ -443,17 +478,8 @@ export default function AnimalInventory({
       onTypeClick={onTypeClick}
       selectedTypeIds={selectedTypeIds}
       actionMenuAndRemoveModal={actionMenuAndRemoveModal}
-      //base props
+      isAdmin={isAdmin}
       {...commonProps}
-      onRowClick={(event: ChangeEvent<HTMLInputElement>, row: AnimalInventoryType) => {
-        history.push(row.path);
-      }}
-      tableSpacerRowHeight={isDesktop ? 96 : 120}
-      showInventorySelection={isAdmin}
-      showSearchBarAndFilter={true}
-      alternatingRowColor={true}
-      showTableHeader={isDesktop}
-      showActionFloaterButton={isAdmin}
     />
   );
 }

From 8881cacf1dcbfe0a0fdee5f2c5a13db07a8b1f69 Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 29 Nov 2024 15:06:49 -0500
Subject: [PATCH 89/91] LF-4483 Remove extra return and add return early

---
 .../Animals/Inventory/useFilteredInventory.ts        | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index 0d7ff9367f..c2e3b14c6d 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -33,6 +33,10 @@ export const useFilteredInventory = (
     });
   }, [inventory, selectedInventoryIds]);
 
+  if (showOnlySelected) {
+    return idMatches;
+  }
+
   const {
     [AnimalsFilterKeys.ANIMAL_OR_BATCH]: animalsOrBatchesFilter,
     [AnimalsFilterKeys.TYPE]: typesFilter,
@@ -72,10 +76,6 @@ export const useFilteredInventory = (
       // const locationMatches =
       //   isInactive(locationsFilter) || locationsFilter[entity.location]?.active;
 
-      if (showOnlySelected) {
-        return animalOrBatchMatches;
-      }
-
       return (
         animalOrBatchMatches &&
         typeMatches &&
@@ -95,9 +95,5 @@ export const useFilteredInventory = (
     locationsFilter,
   ]);
 
-  if (showOnlySelected) {
-    return idMatches;
-  }
-
   return filterMatches;
 };

From 01c560f548fbab01589c672854cdc04e6ee53d0a Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 29 Nov 2024 15:13:53 -0500
Subject: [PATCH 90/91] LF-4483 Fix style logic for non classname

---
 packages/webapp/src/components/Task/TaskLocations/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Task/TaskLocations/index.jsx b/packages/webapp/src/components/Task/TaskLocations/index.jsx
index 0ea005be0a..8475a4d92e 100644
--- a/packages/webapp/src/components/Task/TaskLocations/index.jsx
+++ b/packages/webapp/src/components/Task/TaskLocations/index.jsx
@@ -128,7 +128,7 @@ export default function PureTaskLocations({
           cancelModalTitle={t('TASK.ADD_TASK_FLOW')}
           title={t('MANAGEMENT_DETAIL.ADD_A_TASK')}
           value={progress}
-          classes={{ container: isAnimalTask && styles.titlePadding }}
+          classes={{ container: isAnimalTask ? styles.titlePadding : null }}
         />
         {isAnimalTask && (
           <AnimalInventory
@@ -151,7 +151,7 @@ export default function PureTaskLocations({
           maxZoomRef={maxZoomRef}
           getMaxZoom={getMaxZoom}
           maxZoom={maxZoom}
-          style={isAnimalTask && { marginLeft: '24px', marginRight: '24px' }}
+          style={isAnimalTask ? { marginLeft: '24px', marginRight: '24px' } : null}
         />
         {showWildCropCheckBox && (
           <Checkbox

From ea64bfdb886775b313060565e736423f27ef64ba Mon Sep 17 00:00:00 2001
From: Duncan-Brain <dbrain@litefarm.org>
Date: Fri, 29 Nov 2024 15:53:21 -0500
Subject: [PATCH 91/91] LF-4483 remove unused and forgotten test line

---
 .../src/containers/Animals/Inventory/useFilteredInventory.ts     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
index c2e3b14c6d..acdb3677d0 100644
--- a/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
+++ b/packages/webapp/src/containers/Animals/Inventory/useFilteredInventory.ts
@@ -49,7 +49,6 @@ export const useFilteredInventory = (
   const filterMatches = useMemo(() => {
     return inventory.filter((entity) => {
       const animalOrBatchMatches =
-        (showOnlySelected && selectedInventoryIds.includes(entity.id)) ||
         isInactive(animalsOrBatchesFilter) ||
         (entity.batch
           ? animalsOrBatchesFilter[AnimalOrBatchKeys.BATCH]?.active