LF-5277: Add crop/animal association section to expense add and edit forms by SayakaOno · Pull Request #4179 · LiteFarmOrg/LiteFarm

SayakaOno · 2026-05-21T20:38:41Z

Description

Add ExpenseEntitySection to the expense forms. I had to try several form patterns to make validation work correctly. The final approach simplifies the form structure using an allocations field array shared between crop and animal types. Data is converted from DB format to form values before display and back before submission.

{ …, allocations: [], entityType: ‘crop’ | ‘animal’ | null }

When entityType is switched or cleared, allocations is reset via useFieldArray.remove.

Add ExpenseEntitySection component (EntityAssociationToggle + allocation inputs)
Integrate ExpenseEntitySection into:
- AddExpense (ExpenseItemInputs)
  - Wrap the component with FormProvider instead of passing form props through ExpenseItemsForType ➡️ ExpenseItemInputs
  - Story
- PureExpenseDetail
  - Wrap the component with FormProvider
  - Format expense data from DB and set it as default form values
  - Story
Fix NumberInput logic
Update CheckboxMultiSelect to accept noOptionsMessage
- Story
Update AnimalSaleInputs
- Add “No options” message
- Add “(removed)” label
Update CropSaleInputs
- Add “No options” message
- Use crop varieties instead of managementPlans (Remove the no longer used selector)
- Extract label generation logic into formatCropVarietyLabel
Update AddExpense and ExpenseDetail containers
- Pass cropVarietyOptions and animalOptions to pure components
- Update handleSubmit to format allocations
Add cropVarietyOptionsSelector and animalOptionsSelector
- animalApi file is expected to contain animal APIs in the future

Jira link: https://lite-farm.atlassian.net/browse/LF-5277

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
I have added the GNU General Public License to all new files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…s' messages

…isplays empty instead of 0

SayakaOno · 2026-05-21T21:10:47Z

+  const rawInitialValue = field.value ?? get(formState.defaultValues, name) ?? defaultValue;
  const { inputProps, numericValue, increment, decrement, clear } = useNumberInput({
-    initialValue: field.value || get(formState.defaultValues, name) || defaultValue,
+    initialValue: rawInitialValue === '' ? NaN : rawInitialValue,


field.value can be '' (empty string) when RHF requires an empty initial state, but useNumberInput treats '' as 0 via isNaN (isNaN("") === false). Converting to NaN here ensures the input displays empty instead. Using ?? instead of || prevents 0 from being incorrectly ignored.

kathyavini

This is lovely on so many levels!! The new form addition looks and works perfectly, and the form <--> API logic is so clean and readable 🔥 And I love the new options selectors, thank you!

This is not for this PR, but did you talk to Loïc about what's expected in the Transaction List Expanded Content for these allocated expenses? I don't think I ever saw a design, but I don't love that there is no sign of allocation in the <GeneralTransactionTable>; that felt a bit jarring to add the breakdowns and then not see them again until re-opening the form:

I don't know how he would prioritize that compared to e.g. the Weight/Unit quantities, but it seems like it would be a nice addition if we have some extra time left before release...!

kathyavini · 2026-05-22T19:32:17Z

-  );
+  const farmCropVarieties = useSelector(cropVarietiesSelector);

  // Management plans determine which crop varieties are sale-eligible,


Oh a good example of a comment quickly becoming dead / junk, sorry. In fact it was a bad comment to start with because it was only in reference to moving off the old pattern 🙇

Could you please remove it? 🙏

Oh sorry! Thank you for catching!!

kathyavini · 2026-05-22T19:40:39Z

-          crop_translation_key: mp.crop_translation_key,
-          crop_variety_photo_url: mp.crop_variety_photo_url,
+    for (const cv of farmCropVarieties ?? []) {
+      if (!(cv.crop_variety_id in tileDataById)) {


This if isn't necessary anymore now that cropVarietiesSelector is being used since there will only be one of each crop variety (unlike before with management plans).

Just curious -- what you you think about using the cropVarietyOptionsSelector here too though, and just building the tile data separately?

const options = useSelector(cropVarietyOptionsSelector); const farmCropVarieties = useSelector(cropVarietiesSelector); const cropVarietyTileDataById: Record<number, CropVarietySaleTileData> = useMemo( () => Object.fromEntries( (farmCropVarieties ?? []).map((cv) => [ cv.crop_variety_id, { crop_variety_name: cv.crop_variety_name, crop_translation_key: cv.crop_translation_key, crop_variety_photo_url: cv.crop_variety_photo_url, }, ]), ), [farmCropVarieties], );

I like the idea of revenue and expense using the same selector! The only thing is that the cropVarietyOptionsSelector is not currently sorted (while the optionList here was), but I wonder if sorting in the selector would be fine / good anyway, because it would then match the sorted animalsOptionsSelector?

I added sorting in cropVarietyOptionsSelector and updated the useMemo!

kathyavini · 2026-05-22T19:44:06Z

+        value: generateInventoryId(AnimalOrBatchKeys.BATCH, batch),
+        label: generateSelectOptionLabel(batch),
+      }))
+      .sort((a, b) => String(a.label).localeCompare(String(b.label))),


I'm guessing that the whole array was meant to be sorted? And not just the batches?

I think the difference is functionally silent in Expenses (due to sortAllocations) but you can just barely notice it in Sales, if you set up your animals right 😉

What a mistake 😥 Thank you so much for catching!

kathyavini · 2026-05-22T19:47:15Z

@@ -0,0 +1,39 @@
+/*


If we follow the current codebase convention, store/api/<entity>Api.ts has so far been used for API endpoints -- I believe this one looks like it should be in store/selectors/? Like the location.ts there?

Edit: oh sorry I just belatedly re-read this part of your description:

animalApi file is expected to contain animal APIs in the future

Does that mean that selectors/location.ts should be folded into the api/locationApi.ts as well? I don't know if I have a particularly strong preference but it would be nice to decide if selectors belong with the endpoints or not, going forward.

Did you look at Duncan's PR!?? I completely forgot about the new folder 😅
I've moved this file there!

Haha no I didn't 😂 I was actually looking for/remembering the old sensorSelectors.ts which I had once wrote a long time ago and put in store/api/selectors/. Actually I just now noticed that in addition to removing that file, the locations RTK Query upgrade moved that folder up a level into store/selectors 🤷

Ah, I see! I'm sorry I didn't notice the folder path had changed!!

SayakaOno

Thank you so much for reviewing Joyce!!
I didn't ask Loïc about the allocations in the transaction list, but we can ask him on Wednesday!
Thank you for re-reviewing in advance 🙏

SayakaOno · 2026-05-22T20:34:52Z

-  );
+  const farmCropVarieties = useSelector(cropVarietiesSelector);

  // Management plans determine which crop varieties are sale-eligible,


Oh sorry! Thank you for catching!!

SayakaOno · 2026-05-22T20:40:58Z

-          crop_translation_key: mp.crop_translation_key,
-          crop_variety_photo_url: mp.crop_variety_photo_url,
+    for (const cv of farmCropVarieties ?? []) {
+      if (!(cv.crop_variety_id in tileDataById)) {


I added sorting in cropVarietyOptionsSelector and updated the useMemo!

SayakaOno · 2026-05-22T21:09:42Z

@@ -0,0 +1,39 @@
+/*


Did you look at Duncan's PR!?? I completely forgot about the new folder 😅
I've moved this file there!

SayakaOno · 2026-05-22T21:12:04Z

+        value: generateInventoryId(AnimalOrBatchKeys.BATCH, batch),
+        label: generateSelectOptionLabel(batch),
+      }))
+      .sort((a, b) => String(a.label).localeCompare(String(b.label))),


What a mistake 😥 Thank you so much for catching!

kathyavini

❤️

SayakaOno and others added 27 commits May 20, 2026 11:58

LF-5277 Add translation strings

1c963ff

LF-5277 Add ExpenseEntitySection component

a7704bc

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Extract crop variety label formatting logic as function

a68123f

LF-5277 Add cropVarietyOptionsSelector and animalOptionsSelector

29e9809

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Fix allocated_value input name

2ad90b7

LF-5277 Add transformExpenseAllocations function

99ead40

LF-5277 Wire ExpenseEntitySection into AddExpense form and container

e293ca2

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Wire ExpenseEntitySection into ExpenseDetail form and container

dcb2933

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Hide 'Total to allocate' text when disabled

ac66649

LF-5277 Add crop/animal options to expense Storybook stories

dc580eb

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Use FormProvider/useFormContext to avoid threading form props

ba40977

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

LF-5277 Adjust styles

71df7c3

LF-5277 Update NumberInput to respect 0 values

9443e11

LF-5277 Refactor ExpenseEntitySection to fix behaviour and validations

53137e5

LF-5277 Fix transform functions

fdd76df

LF-5277 Update CheckboxMultiSelect to support customizable 'No option…

a681493

…s' messages

LF-5277 Show custom no options message in finance entity select

0915f3c

LF-5277 Convert empty string initial value to NaN in NumberInput it d…

a0ffe74

…isplays empty instead of 0

LF-5277 Refactor ExpenseEntitySection to use useFieldArray

efeace6

LF-5277 Tweaks

f479f15

LF-5277 Add test for sortAllocations

63efb98

LF-5277 Enable options in AddExpense story

0deced0

LF-5277 Add 'removed' label to animal options

48c1e74

LF-5277 Update no crop varieties options message

8f05c13

LF-5277 Update CropSaleInputs options to include all crop varieties

254b3c9

LF-5277 Update animalOptionsSelector to sort options

f935a91

LF-5277 Use animalOptionsSelector in AnimalSaleInputs

8343e4b

SayakaOno self-assigned this May 21, 2026

SayakaOno added enhancement New feature or request new translations New translations to be sent to CrowdIn are present labels May 21, 2026

SayakaOno commented May 21, 2026

View reviewed changes

SayakaOno marked this pull request as ready for review May 21, 2026 21:52

SayakaOno requested review from a team as code owners May 21, 2026 21:52

SayakaOno requested review from kathyavini and removed request for a team May 21, 2026 21:52

kathyavini reviewed May 22, 2026

View reviewed changes

SayakaOno added 3 commits May 22, 2026 13:41

LF-5277 Update cropVarietyOptionsSelector to return sorted data

deba00b

LF-5277 Use cropVarietyOptionsSelector in CropSaleInputs

0cd6b60

LF-5277 Fix animalOptionsSelector and move the file to store/selectors/

47c9d44

SayakaOno commented May 22, 2026

View reviewed changes

kathyavini approved these changes May 22, 2026

View reviewed changes

kathyavini added this pull request to the merge queue May 22, 2026

Merged via the queue into integration with commit 42676f9 May 22, 2026
6 of 7 checks passed

SayakaOno deleted the LF-5277/Add_crop/animal_association_section_to_expense_add_and_edit_forms branch May 22, 2026 22:00

Conversation

SayakaOno commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SayakaOno left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SayakaOno commented May 21, 2026 •

edited

Loading

kathyavini May 22, 2026 •

edited

Loading