LiteFarmOrg · kathyavini · May 11, 2026 · May 11, 2026 · May 11, 2026 · May 11, 2026
@@ -1,4 +1,8 @@
 {
+  "ANIMAL_SALE": {
+    "REVENUE_NAME": "Animal Sale",
+    "CUSTOM_DESCRIPTION": "Revenues generated from the sales of animal products."
+  },
   "CROP_SALE": {
     "REVENUE_NAME": "Crop Sale",
     "CUSTOM_DESCRIPTION": "Revenues associated with the sale of crops harvested from this farm."

@@ -1097,6 +1097,7 @@
       "REVENUE_TYPES": "Search revenue type"
     },
     "TRANSACTION": {
+      "ANIMALS": "Animals",
       "CROPS": "Crops",
       "DAILY_TOTAL": "DAILY TOTAL",
       "LABOUR_EXPENSE": "Labour expense",
@@ -1880,11 +1881,15 @@
     "ADD_SALE": {
       "ADD_CUSTOM_REVENUE_TYPE": "Add custom revenue type",
       "ADD_REVENUE": "Add revenue",
+      "ANIMAL_NOTES_PLACEHOLDER": "Animal sale description",
+      "CROP_NOTES_PLACEHOLDER": "Crop sale description",
       "CROP_REQUIRED": "Required",
       "CROP_VARIETY": "Crop variety",
       "FLOW": "revenue creation",
       "MANAGE_CUSTOM_REVENUE_TYPE": "Manage custom revenue types",
+      "NOTES_PLACEHOLDER": "Sale description",
       "SALE_VALUE_ERROR": "Sale value must be a positive number less than 999,999,999",
+      "SELECT_CROPS": "Select crops",
       "TABLE_HEADERS": {
         "TOTAL": "Total"
       },

@@ -33,7 +33,7 @@ export const taskStatusTranslateKey = {
 
 import { languageCodes } from '../../../hooks/useLanguageOptions';
 import { getIntlDate } from '../../../util/date-migrate-TS';
-import { getFirstNameWithLastInitial } from '../../../util';
+import { getFirstNameWithLastInitial } from '../../../util/getFirstNameWithLastInitial';
 import RevisionInfoText from '../../RevisionInfoText';
 
 export const PureTaskCard = ({

@@ -20,10 +20,10 @@ import history from '../../../../history';
 import styles from './styles.module.scss';
 import { createRevenueDetailsUrl } from '../../../../util/siteMapConstants';
 
-const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) => [
+const getColumns = (t, titleLabel, mobileView, totalAmount, currencySymbol) => [
   {
     id: 'title',
-    label: t('FINANCES.TRANSACTION.CROPS'),
+    label: t(titleLabel),
     format: (d) =>
       mobileView ? (
         <div className={styles.mobileCrops}>
@@ -38,7 +38,7 @@ const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) =
     columnProps: {
       style: { padding: `0 ${mobileView ? 8 : 12}px` },
     },
-    Footer: mobileView ? null : t('FINANCES.TRANSACTION.DAILY_TOTAL'),
+    Footer: mobileView ? null : <div className={styles.uppercase}>{t('common:TOTAL')}</div>,
   },
   {
     id: mobileView ? null : 'quantity',
@@ -48,7 +48,6 @@ const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) =
     columnProps: {
       style: { width: '100px' },
     },
-    Footer: mobileView ? null : <div className={styles.bold}>{quantityTotal}</div>,
   },
   {
     id: 'amount',
@@ -62,20 +61,16 @@ const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) =
   },
 ];
 
-const FooterCell = ({ t, quantityTotal, totalAmount }) => (
+const FooterCell = ({ t, totalAmount }) => (
   <div className={styles.mobileCropSaleFooterCell}>
-    <div>{t('FINANCES.TRANSACTION.DAILY_TOTAL')}</div>
-    <div className={styles.bold}>{quantityTotal}</div>
+    <div className={styles.uppercase}>{t('common:TOTAL')}</div>
     <div className={styles.bold}>{totalAmount}</div>
   </div>
 );
 
-export default function CropSaleTable({ data, currencySymbol, mobileView }) {
+export default function EntitySaleTable({ data, currencySymbol, mobileView, titleLabel }) {
   const { t } = useTranslation();
   const { items, amount, relatedId } = data;
-  const quantityUnit = items?.[0]?.quantityUnit;
-  const quantityTotal = items.reduce((total, { quantity }) => total + quantity, 0);
-  const quantityWithUnit = `${quantityTotal} ${quantityUnit}`;
   const totalAmount = `${currencySymbol}${amount.toFixed(2)}`;
 
   if (!items?.length) {
@@ -85,15 +80,11 @@ export default function CropSaleTable({ data, currencySymbol, mobileView }) {
   return (
     <Table
       kind={TableKind.V2}
-      columns={getColumns(t, mobileView, totalAmount, quantityWithUnit, currencySymbol)}
+      columns={getColumns(t, titleLabel, mobileView, totalAmount, currencySymbol)}
       data={items}
       minRows={10}
       shouldFixTableLayout={true}
-      FooterCell={
-        mobileView
-          ? () => <FooterCell t={t} totalAmount={totalAmount} quantityTotal={quantityWithUnit} />
-          : null
-      }
+      FooterCell={mobileView ? () => <FooterCell t={t} totalAmount={totalAmount} /> : null}
       onClickMore={() => history.push(createRevenueDetailsUrl(relatedId))}
     />
   );

@@ -24,17 +24,20 @@ import {
   LABOUR_URL,
 } from '../../../../util/siteMapConstants';
 import TextButton from '../../../Form/Button/TextButton';
-import CropSaleTable from './CropSaleTable';
 import GeneralTransactionTable from './GeneralTransactionTable';
 import LabourTable from './LabourTable';
+import EntitySaleTable from './EntitySaleTable';
 import styles from './styles.module.scss';
 import navStyles from '@navStyles';
 
 const components = {
   EXPENSE: (props) => <GeneralTransactionTable {...props} />,
   REVENUE: (props) => <GeneralTransactionTable {...props} />,
   LABOUR_EXPENSE: (props) => <LabourTable {...props} />,
-  CROP_REVENUE: (props) => <CropSaleTable {...props} />,
+  CROP_REVENUE: (props) => <EntitySaleTable {...props} titleLabel="FINANCES.TRANSACTION.CROPS" />,
+  ANIMAL_REVENUE: (props) => (
+    <EntitySaleTable {...props} titleLabel="FINANCES.TRANSACTION.ANIMALS" />
+  ),
 };
 
 const getDetailPageLink = ({ transactionType, relatedId }) => {
@@ -43,6 +46,7 @@ const getDetailPageLink = ({ transactionType, relatedId }) => {
     EXPENSE: createExpenseDetailsUrl(relatedId),
     REVENUE: createRevenueDetailsUrl(relatedId),
     CROP_REVENUE: createRevenueDetailsUrl(relatedId),
+    ANIMAL_REVENUE: createRevenueDetailsUrl(relatedId),
   }[transactionType];
 };
 

@@ -69,6 +69,10 @@ button.toDetail {
   font-weight: bold;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 // Crop sales
 .mobileCrops {
   height: 100%;

@@ -0,0 +1,56 @@
+/*
+ *  Copyright 2026 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 { Semibold } from '../../Typography';
+import SaleLineItem from './SaleLineItem';
+import styles from './styles.module.scss';
+
+interface AnimalSaleItemProps {
+  animalName: string;
+  entityId: string;
+  system: string;
+  currency: string;
+  fieldPrefix: string;
+  entityIdFieldKey: string;
+  disabledInput: boolean;
+}
+
+function AnimalSaleItem({
+  animalName,
+  entityId,
+  system,
+  currency,
+  fieldPrefix,
+  entityIdFieldKey,
+  disabledInput,
+}: AnimalSaleItemProps) {
+  return (
+    <div className={styles.saleItemContainer}>
+      <div className={styles.saleItemInputGroup}>
+        <Semibold>{animalName}</Semibold>
+        <SaleLineItem
+          fieldPrefix={fieldPrefix}
+          entityId={entityId}
+          entityIdFieldKey={entityIdFieldKey}
+          system={system}
+          currency={currency}
+          disabledInput={disabledInput}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default AnimalSaleItem;