LF-5274 Add animal batch selector with quantity and sale value to the revenue entry form by kathyavini · Pull Request #4170 · LiteFarmOrg/LiteFarm

kathyavini · 2026-05-14T20:35:21Z

Description

Completes the frontend for Animal-associated Revenues / Sales:

Adds the AnimalSaleInputs container and AnimalSaleItem components mirroring their crop versions
Updates the CropSaleTable shown within the transaction expandable to a more general EntitySaleTable (very simple change; only needed adjust was a label)
Adds animal logical branches to useTransactions and the formatting functions mapSalesToRevenueItems (Transactions, Actual Revenue), and mapRevenueFormDataToApiCallFormat
Removes the filter on and completes the frontend (title + description) for the new Animal Sales default revenue type

This PR also makes a few visual adjusts that were present on Figma or discussed in dev-design:

Notes field is now a Text Area with dynamic placeholder based on entity type
Footer of EntitySaleTable has been updated as discussed
The multi-selects for crops and animals have updated labels and placeholders relative to the original form

Additionally, this PR resolves the naming/folder structure issues discussed in #4150 as follows (after quite some rounds of iteration as you can see in the commit history 😜)

AnimalSaleInputs and CropSaleInputs have been gathered under a new Finances/EntitySaleInputs/ folder
The default component export from that Folder <EntitySaleInputs> fetches and shows either the Crop or Animal inputs based on the enitity type (as AI had originally proposed)
- However rather than being passed as an unconditional prop, <EntitySaleInputs> is simply imported directly into the Revenue Form
Consequently, the form HAS been renamed from <GeneralRevenue> to <RevenueForm>
- I think it's a good change overall, but I have to admit I still catch myself typing GeneralRevenue all the time out of habit! Hopefully only an issue right now since I've been working in these files for the last two weeks 🤞
- Note: the entitySaleDefaultValues (only relevant for RevenueDetails / existing records) are still passed as a prop. This keeps them available for the initial useForm call, which doesn't update on re-render
If you recall from the first pass refactor on the other branch, CropSaleInputs used to wrap an entity-agnostic container called <EntitySaleInputs> (which held the multi-select and its relationship to the following sale item rows); this structure and naming felt incorrect, because as a name, CropSaleInputs feels more like a child/type/peer of EntitySaleInputs rather than a parent of it. Now the inner component has been made strictly a proper component, is called EntitySalePicker, and resides within components/Form/RevenueForm
- I apologize if you have created any sort of mental model based on the EntitySaleInputs naming from the previous PR, but I think this will be better moving forward!

Finally, there is a small adjust for the Storybook crash:

ReferenceError: Cannot access 'loginSelector' before initialization at alertSlice.js:45:35

Claude (Opus -- Sonnet was clueless!) traced this crash to a circular/race import of the Redux store, specifically userFarmSlice importing from util/ which itself imports from the (somewhat sketchy) getFromReduxStore/ with a top-level store import. I think selecting from userFarm at two levels within the current flow made reloading on the GeneralRevenue (oops, I mean RevenueForm 😅) Story a particularly easy way to create this crash, although I think some other useFarmSlice-calling components in Storybook could potentially have triggered it as well. In any case, it requires loading the store via component import which can only happen in Storybook; in app the store is provided top-level and I can't imagine a situation where the circular import could matter... but I'm very curious to know if I'm wrong about that! 😁 @SayakaOno you said you saw it in App once?

It does seem to be fully resolved now and I haven't seen it since the import fix. (Fix was the trivial change of moving the utility that userFarmSlice needs outside of the default utils/index.js file).

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

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

Mirrors CropSaleItem contract. Renders the animal/batch name label above a SaleLineItem for the shared quantity + sale value inputs. No image or tile (the animal/batch row carries only a string label). Does not register the entity-id field itself — that registration is performed by SaleLineItem via entityIdFieldKey. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ANIMAL_SALE matches the backend animal_sale junction table name and is the RHF field-prefix key for the animal sale input section. ANIMAL_KEY is the per-row entity-id field name; it stays generic (not animal_id) because option values are prefixed strings encoding either an animal_id or animal_batch_id on the same row. Also adds ANIMAL_SALE to REVENUE_FORM_TYPES so util.getRevenueFormType can dispatch on it. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Mirrors the simplified CropSaleInputs interface ({ sale?, disabledInput }). The component only mounts when the selected revenue type has entity_type === 'animal' (gated upstream by GeneralRevenue), so no isActive flag and no skip on the RTK Query hooks. Animals and batches are merged into a single option list with values prefixed (animal_${id} / batch_${id}) so a single CheckboxMultiSelect can represent both kinds of entity on one row. The decode back to animal_id / animal_batch_id happens in util.js. Exports getAnimalSaleDefaultValues for the parent form's customFormChildrenDefaultValues. quantity_unit is reshaped from a string into a SelectOption via getUnitOptionMap so the Unit dropdown populates correctly in edit/read-only views — same shape as getCropSaleDefaultValues. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

…nputs -> EntitySaleRows The rows component (CheckboxMultiSelect + per-entity rows) is renamed to EntitySaleRows so the more semantically correct name EntitySaleInputs is conceptually free, with the actual dispatcher named RevenueSaleInputs to align with the revenue domain. RevenueSaleInputs receives the full prop set from GeneralRevenue ({ sale, disabledInput, revenueTypes, selectedTypeOption }), derives the entity_type, and conditionally renders CropSaleInputs or AnimalSaleInputs. It returns null as a defensive fallback — GeneralRevenue already gates on selectedRevenueType?.entity_type so this path is unreachable in practice. Also exports getRevenueSaleDefaultValues(sale, entityType) so the default-values switch lives in one place rather than being duplicated in RevenueDetail and AddSale. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

getRevenueFormType: dispatch entity_type === 'animal' to REVENUE_FORM_TYPES.ANIMAL_SALE. mapRevenueFormDataToApiCallFormat: add an animal branch that decodes the prefixed animal_key form value back to either animal_id or animal_batch_id (exactly one is non-null per row, mirroring the backend CHECK constraint). mapSalesToRevenueItems: add an animal branch that displays each animal_sale row similarly to crop_variety_sale rows (title from chooseIdentification, subtitle as quantity + unit, amount as sale_value). Extends the signature with optional animals / animalBatches arrays; the caller in useTransactions wires them in Step 24. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Replaces CropSaleInputs with the new RevenueSaleInputs dispatcher so the edit/read-only flow renders the correct entity-specific inputs based on the sale's revenue type. The entity_type switch for default values now lives in getRevenueSaleDefaultValues, removing the isCropSale ternary here. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

…LE type AddSale now uses the RevenueSaleInputs dispatcher so newly created sales render the entity-specific inputs depending on the selected revenue type. Also removes the temporary getRevenueTypesSaga filter that hid the seeded ANIMAL_SALE revenue type from the dropdown. The frontend now fully supports animal sales end-to-end, so the filter is obsolete. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Adds transactionTypeEnum.animalRevenue and extends buildRevenueTransactions to dispatch animal-typed sales to it. useTransactions now also reads animals and animal batches from the RTK Query cache and forwards them to mapSalesToRevenueItems so each animal_sale row in the transaction list can show the animal's identification label as its title. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Adds the en source keys for the seeded ANIMAL_SALE revenue type (REVENUE_NAME, CUSTOM_DESCRIPTION) and the UI strings used by the animal sale inputs (SALE.ADD_SALE.ANIMAL placeholder, ANIMAL_REQUIRED mirror of CROP_REQUIRED). Only the English source files are touched; the other locales are populated by the Crowdin pipeline. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Notes field showing as a TextArea now with entity-dependent placeholder; updated spacing; no <hr>

…xChars limit to FarmNotes and MarketDirectoryInfo TextAreas

Most likely I will revert this and return to a wrapping component

…g helpers

We looked at this in dev-design and realized 'DAILY TOTAL' should read 'TOTAL', and summing should only happen over values, not quantities

…cription to Figma

Must be from a previous implementation? Exported but not imported anywhere

kathyavini · 2026-05-14T20:49:16Z

 import { createRevenueDetailsUrl } from '../../../../util/siteMapConstants';

-const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) => [
+const getColumns = (t, titleLabel, mobileView, totalAmount, currencySymbol) => [


In addition to making the table general to both crops and animals by passing the column title, this PR removes the quantity sum and changes "DAILY TOTAL" --> "TOTAL" as discussed in dev-design.

Note: only the mobile view of this table is ever used in app (i.e. the footer is always defined by <FooterCell>, and never by the Footer property of getColumns); therefore the changes to Footer here in getColumns are just for completeness; they don't have any visual effect in app.

kathyavini · 2026-05-14T20:51:37Z

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


It was not deleted, but rather renamed to RevenueForm/styles.module.scss, but I deleted so many unused CSS classes apparently the diffing algorithm could not figure out they were the same file!

kathyavini · 2026-05-14T20:55:52Z

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


Not a new file, but rather a rename of GeneralRevenue/styles.module.scss. See note above!

Most of the original SCSS was not used anywhere.

kathyavini · 2026-05-14T21:05:12Z

 export const DELETE_EXPENSE = 'DELETE_EXPENSE';
 export const SET_IS_FETCHING_DATA = 'SET_IS_FETCHING_DATA';

-export const REVENUE_FORM_TYPES = {


Wasn't actually used anywhere in app. Same for the getRevenueFormType() that goes along with this constant (which makes sense since there is only the one form 😉)

Import chain is userFarm --> util/index.js (for getFirstNameWithLastInitial) --> getFromReduxStore. Not 100% sure, but I think the container layering in the new revenue components particularly revealed this with the calling of the measurementSelector from the inner EntitySalePicker component. Don't think this crash is relevant outside of Storybook though; depends on import of the store and the store provider is top-level in the actual app

Although the component > container > component sandwhich remains, I think this inner access of userFarm was the particular trigger that highlighted the circular Redux store import.

kathyavini · 2026-05-15T17:31:57Z

 import { languageCodes } from '../../../hooks/useLanguageOptions';
 import { getIntlDate } from '../../../util/date-migrate-TS';
-import { getFirstNameWithLastInitial } from '../../../util';
+import { getFirstNameWithLastInitial } from '../../../util/getFirstNameWithLastInitial';


Change related to the Storybook crash, as described in the PR description.

…h-quantity-and-sale-value-to-the-revenue-entry-form

… constant for ANIMAL_KEY

SayakaOno

Looks great! I appreciated CustomFormChildren being removed - I think it made things cleaner 😄

Just curious, AnimalSaleDetail story doesn't render animal options or inputs, right?

ReferenceError: Cannot access 'loginSelector' before initialization at alertSlice.js:45:35

I think I've seen this kind of error when I accidentally created an incorrect selector with createSelector, so it wasn't a real issue 🙇‍♀️

SayakaOno · 2026-05-15T21:04:38Z

+  const selectedEntityType = selectedRevenueType?.entity_type;
+  const isEntitySale = selectedEntityType === 'crop' || selectedEntityType === 'animal';


The util functions could be used 😄

SayakaOno · 2026-05-15T21:35:49Z

+            system,
+            currency,


system and currency don't seem to be necessary since AnimalSaleInputs and CropSaleInputs can pass them directly.

SayakaOno · 2026-05-15T21:43:28Z

+          system={system}
+          currency={currency}


Related to the comment in EntitySalePicker, I don't think EntitySalePicker has to pass system and currency props to children since they can be passed directly.

SayakaOno · 2026-05-15T22:19:55Z

+    return [...animalOptions, ...batchOptions].sort((a, b) =>
+      String(a.label).localeCompare(String(b.label)),
+    );


CheckboxMultiSelect has sorting logic, so this might not be necessary.

kathyavini and others added 30 commits May 11, 2026 13:41

LF-5274 Register ANIMAL_SALE into iconMap

b235e9d

LF-5274 Update GeneralRevenue and EntitySaleRows according to Figma

781aa96

Notes field showing as a TextArea now with entity-dependent placeholder; updated spacing; no <hr>

LF-5274 Revert the EntitySaleInputs to EntitySaleRows rename

9dea14f

LF-5274 Rename RevenueSaleInputs

cde473a

LF-5274 Rename and reorganization of components

f0fc254

LF-5274 Clean up and update Story

a88f221

LF-5274 Put child components directly into Revenue Form

ca95e6b

LF-5274 Expand CropSaleTable into general EntitySaleTable

843ed58

LF-5274 Remove max character part from notes placeholder and match ma…

b9edf3e

…xChars limit to FarmNotes and MarketDirectoryInfo TextAreas

LF-5274 Restore customFormChildren and let containers own ternaries

180af06

LF-5274 Map-based solution to type switching

f6d423f

Most likely I will revert this and return to a wrapping component

LF-5274 Fix select placeholders

a2f8c1a

LF-5274 Refactor animal and batch formatting functions to use existin…

fd472c7

…g helpers

LF-5274 Refactor getAnimalSaleDefaultValues

241e57c

LF-5274 Restore EntitySaleInputs wrapper component (sigh)

5b67340

LF-5274 Pass animals and batches to ActualRevenue formatting function

b7d99d9

LF-5274 Update footer of EntitySaleTable as discussed

1c241ae

We looked at this in dev-design and realized 'DAILY TOTAL' should read 'TOTAL', and summing should only happen over values, not quantities

LF-5274 Minor string cleanup

1692236

LF-5274 Clean up RevenueForm stylesheet; lots of unused classes here

c9d9701

LF-5274 Rename customFormChildrenDefaultValues and fix story

a5ce471

LF-5274 Add missing label to the entity select; match Animal Sale des…

f826c44

…cription to Figma

kathyavini added 2 commits May 14, 2026 09:38

LF-5274 Remove unused REVENUE_FORM_TYPE and getRevenueFormType

296565c

Must be from a previous implementation? Exported but not imported anywhere

LF-5274 Rename EntitySaleEntries to EntitySalePicker

b45719e

kathyavini self-assigned this May 14, 2026

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

kathyavini commented May 14, 2026

View reviewed changes

LF-5274 Minor cleanup and string fix

2443b18

kathyavini commented May 14, 2026

View reviewed changes

kathyavini added 2 commits May 14, 2026 17:48

LF-5274 Move selectors out of EntitySalePicker component

a5e5df7

Although the component > container > component sandwhich remains, I think this inner access of userFarm was the particular trigger that highlighted the circular Redux store import.

kathyavini commented May 15, 2026

View reviewed changes

Merge branch 'integration' into LF-5274-add-animal-batch-selector-wit…

073fba6

…h-quantity-and-sale-value-to-the-revenue-entry-form

kathyavini changed the base branch from LF-5272/Replace_yes/no_crop_generated_field_with_crop/animal_toggle_on_custom_revenue_type_form to integration May 15, 2026 17:45

LF-5274 Minor changes: copyright year formatting and more descriptive…

82e86fb

… constant for ANIMAL_KEY

kathyavini marked this pull request as ready for review May 15, 2026 19:23

kathyavini requested review from a team as code owners May 15, 2026 19:23

kathyavini requested review from SayakaOno and removed request for a team May 15, 2026 19:23

SayakaOno reviewed May 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LF-5274 Add animal batch selector with quantity and sale value to the revenue entry form#4170

LF-5274 Add animal batch selector with quantity and sale value to the revenue entry form#4170
kathyavini wants to merge 37 commits into
integrationfrom
LF-5274-add-animal-batch-selector-with-quantity-and-sale-value-to-the-revenue-entry-form

kathyavini commented May 14, 2026 •

edited

Loading

Uh oh!

kathyavini May 14, 2026 •

edited

Loading

Uh oh!

kathyavini May 14, 2026

Uh oh!

kathyavini May 14, 2026 •

edited

Loading

Uh oh!

kathyavini May 14, 2026 •

edited

Loading

Uh oh!

kathyavini May 15, 2026 •

edited

Loading

Uh oh!

SayakaOno left a comment

Uh oh!

SayakaOno May 15, 2026

Uh oh!

SayakaOno May 15, 2026

Uh oh!

SayakaOno May 15, 2026

Uh oh!

SayakaOno May 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const selectedEntityType = selectedRevenueType?.entity_type;
		const isEntitySale = selectedEntityType === 'crop' \|\| selectedEntityType === 'animal';

Conversation

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

Uh oh!

Uh oh!

kathyavini May 14, 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!

kathyavini May 14, 2026

Choose a reason for hiding this comment

Uh oh!

kathyavini May 14, 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!

kathyavini May 14, 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!

kathyavini May 15, 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!

SayakaOno left a comment

Choose a reason for hiding this comment

Uh oh!

SayakaOno May 15, 2026

Choose a reason for hiding this comment

Uh oh!

SayakaOno May 15, 2026

Choose a reason for hiding this comment

Uh oh!

SayakaOno May 15, 2026

Choose a reason for hiding this comment

Uh oh!

SayakaOno May 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kathyavini commented May 14, 2026 •

edited

Loading

kathyavini May 14, 2026 •

edited

Loading

kathyavini May 14, 2026 •

edited

Loading

kathyavini May 14, 2026 •

edited

Loading

kathyavini May 15, 2026 •

edited

Loading