LF-3761: Implement crop sales expandable content

packages/webapp/public/locales/en/translation.json

@@ -848,6 +848,8 @@
       "REVENUE_TYPES": "Search revenue type"
     },
     "TRANSACTION": {
+      "CROPS": "Crops",
+      "DAILY_TOTAL": "DAILY TOTAL",
       "LABOUR_EXPENSE": "Labour expense",
       "VIEW_AND_EDIT": "View & edit",
       "VIEW_DETAILS": "View details"

packages/webapp/public/locales/es/translation.json

@@ -847,6 +847,8 @@
       "REVENUE_TYPES": "MISSING"
     },
     "TRANSACTION": {
+      "CROPS": "MISSING",
+      "DAILY_TOTAL": "MISSING",
       "LABOUR_EXPENSE": "MISSING",
       "VIEW_AND_EDIT": "MISSING",
       "VIEW_DETAILS": "MISSING"

packages/webapp/public/locales/fr/translation.json

@@ -848,6 +848,8 @@
       "REVENUE_TYPES": "MISSING"
     },
     "TRANSACTION": {
+      "CROPS": "MISSING",
+      "DAILY_TOTAL": "MISSING",
       "LABOUR_EXPENSE": "MISSING",
       "VIEW_AND_EDIT": "MISSING",
       "VIEW_DETAILS": "MISSING"

packages/webapp/public/locales/pt/translation.json

@@ -847,6 +847,8 @@
       "REVENUE_TYPES": "MISSING"
     },
     "TRANSACTION": {
+      "CROPS": "MISSING",
+      "DAILY_TOTAL": "MISSING",
       "LABOUR_EXPENSE": "MISSING",
       "VIEW_AND_EDIT": "MISSING",
       "VIEW_DETAILS": "MISSING"

packages/webapp/src/components/Finances/Transaction/ExpandedContent/CropSaleTable.jsx

@@ -0,0 +1,97 @@
+/*
+ *  Copyright 2023 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 React from 'react';
+import { useTranslation } from 'react-i18next';
+import Table from '../../../Table/v2';
+import history from '../../../../history';
+import styles from './styles.module.scss';
+
+const getColumns = (t, mobileView, totalAmount, quantityTotal, currencySymbol) => [
+  {
+    id: 'title',
+    label: t('FINANCES.TRANSACTION.CROPS'),
+    format: (d) =>
+      mobileView ? (
+        <div className={styles.mobileCrops}>
+          <div className={styles.mobileCropsTitle}>{d.title}</div>
+          <div className={styles.mobileCropsQuantity}>
+            {d.quantity} {d.quantityUnit}
+          </div>
+        </div>
+      ) : (
+        d.title
+      ),
+    columnProps: {
+      style: { padding: `0 ${mobileView ? 8 : 12}px` },
+    },
+    Footer: mobileView ? null : t('FINANCES.TRANSACTION.DAILY_TOTAL'),
+  },
+  {
+    id: mobileView ? null : 'quantity',
+    label: mobileView ? null : t('common:QUANTITY'),
+    align: 'right',
+    format: (d) => `${d.quantity} ${d.quantityUnit}`,
+    columnProps: {
+      style: { width: '100px' },
+    },
+    Footer: mobileView ? null : <div className={styles.bold}>{quantityTotal}</div>,
+  },
+  {
+    id: 'amount',
+    label: t('FINANCES.REVENUE'),
+    align: 'right',
+    format: (d) => `${currencySymbol}${Math.abs(d.amount).toFixed(2)}`,
+    columnProps: {
+      style: { width: '100px', paddingRight: `${mobileView ? 9 : 75}px` },
+    },
+    Footer: mobileView ? null : <div className={styles.bold}>{totalAmount}</div>,
+  },
+];
+
+const FooterCell = ({ t, quantityTotal, totalAmount }) => (
+  <div className={styles.mobileCropSaleFooterCell}>
+    <div>{t('FINANCES.TRANSACTION.DAILY_TOTAL')}</div>
+    <div className={styles.bold}>{quantityTotal}</div>
+    <div className={styles.bold}>{totalAmount}</div>
+  </div>
+);
+
+export default function CropSaleTable({ data, currencySymbol, mobileView }) {
+  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) {
+    return null;
+  }
+
+  return (
+    <Table
+      columns={getColumns(t, mobileView, totalAmount, quantityWithUnit, currencySymbol)}
+      data={items}
+      minRows={10}
+      shouldFixTableLayout={true}
+      FooterCell={
+        mobileView
+          ? () => <FooterCell t={t} totalAmount={totalAmount} quantityTotal={quantityWithUnit} />
+          : null
+      }
+      onClickMore={() => history.push(`/revenue/${relatedId}`)}
+    />
+  );
+}

packages/webapp/src/components/Finances/Transaction/ExpandedContent/index.jsx

@@ -18,14 +18,15 @@ import { BsChevronRight } from 'react-icons/bs';
 import TextButton from '../../../Form/Button/TextButton';
 import history from '../../../../history';
 import { transactionTypeEnum } from '../../../../containers/Finances/useTransactions';
+import CropSaleTable from './CropSaleTable';
 import styles from './styles.module.scss';
 
-// TODO LF-3748, 3749, 3761
+// TODO LF-3748, 3749
 const components = {
   EXPENSE: (props) => <div>expense placeholder</div>,
   REVENUE: (props) => <div>revenue placeholder</div>,
   LABOUR_EXPENSE: (props) => <div>labour placeholder</div>,
-  CROP_SALE: (props) => <div>crop sale placeholder</div>,
+  CROP_SALE: (props) => <CropSaleTable {...props} />,
 };
 
 const getDetailPageLink = ({ transactionType, relatedId }) => {
@@ -36,8 +37,8 @@ const getDetailPageLink = ({ transactionType, relatedId }) => {
   }[transactionType];
 };
 
-export default function ExpandedContent({ data }) {
-  const { typeLabel, transactionType } = data;
+export default function ExpandedContent({ data, currencySymbol, mobileView }) {
+  const { transactionType, cropGenerated } = data;
 
   const { t } = useTranslation();
 
@@ -46,7 +47,7 @@ export default function ExpandedContent({ data }) {
       ? t('FINANCES.TRANSACTION.VIEW_DETAILS')
       : t('FINANCES.TRANSACTION.VIEW_AND_EDIT');
 
-  const componentKey = typeLabel === 'Crop Sale' ? 'CROP_SALE' : transactionType;
+  const componentKey = cropGenerated ? 'CROP_SALE' : transactionType;
   const Component = components[componentKey];
 
   return (
@@ -55,7 +56,7 @@ export default function ExpandedContent({ data }) {
         {toDetailText}
         <BsChevronRight />
       </TextButton>
-      <Component data={data} />
+      <Component data={data} currencySymbol={currencySymbol} mobileView={mobileView} />
     </div>
   );
 }

packages/webapp/src/components/Finances/Transaction/ExpandedContent/styles.module.scss

@@ -38,3 +38,41 @@ button.toDetail {
     margin-left: 8px;
   }
 }
+
+.bold {
+  font-weight: bold;
+}
+
+// Crop sales
+.mobileCrops {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mobileCropsTitle {
+  font-weight: 600;
+}
+
+.mobileCropsQuantity {
+  color: var(--grey500);
+  font-size: 12px;
+}
+
+.mobileCropSaleFooterCell { 
+  width: 100%;
+  background-color:var(--grey200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  padding-left: 8px;
+  padding-right: 9px;
+
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

packages/webapp/src/components/Finances/Transaction/Mobile/List.jsx

@@ -37,46 +37,51 @@ export const MainContent = ({ t, note, typeLabel, amount, icon, currencySymbol }
   );
 };
 
-const Rows = ({ t, data, currencySymbol }) => {
+const Rows = ({ t, data, currencySymbol, mobileView }) => {
   const { expandedIds, toggleExpanded } = useExpandable({ isSingleExpandable: true });
   const rows = [];
   let groupDate = null;
 
-  data.forEach((values, index) => {
+  data.forEach((values) => {
     const itemDate = new Date(values.date);
 
     if (!isSameDay(groupDate, itemDate)) {
       groupDate = itemDate;
       rows.push(
-        <div key={values.date} className={styles.transactionDate}>
+        <h4 key={values.date} className={styles.transactionDate}>
           {formatTransactionDate(itemDate)}
-        </div>,
+        </h4>,
       );
     }
 
-    const isExpanded = expandedIds.includes(index);
+    const { transactionType, relatedId, date } = values;
+    const key = `${transactionType}+${relatedId || date}`;
+    const isExpanded = expandedIds.includes(key);
 
     rows.push(
-      <div
-        key={index}
-        className={clsx(styles.expandableItemWrapper, isExpanded && styles.expanded)}
-      >
+      <div key={key} className={clsx(styles.expandableItemWrapper, isExpanded && styles.expanded)}>
         <ExpandableItem
           isExpanded={isExpanded}
-          onClick={() => toggleExpanded(index)}
+          onClick={() => toggleExpanded(key)}
           mainContent={<MainContent t={t} {...values} currencySymbol={currencySymbol} />}
-          expandedContent={<ExpandedContent data={values} />}
+          expandedContent={
+            <ExpandedContent
+              data={values}
+              currencySymbol={currencySymbol}
+              mobileView={mobileView}
+            />
+          }
           iconClickOnly={false}
           classes={{ mainContentWithIcon: styles.expandableItem }}
-          itemKey={`transaction-${index}`}
+          itemKey={`transaction-${key}`}
         />
       </div>,
     );
   });
   return <div>{rows}</div>;
 };
 
-export default function TransactionList({ data, minRows = 10 }) {
+export default function TransactionList({ data, minRows = 10, mobileView }) {
   const [visibleRows, setVisibleRows] = useState(minRows);
 
   const { t } = useTranslation(['translation', 'expense', 'revenue']);
@@ -88,7 +93,12 @@ export default function TransactionList({ data, minRows = 10 }) {
 
   return (
     <div className={styles.transactionList}>
-      <Rows t={t} data={data.slice(0, visibleRows)} currencySymbol={currencySymbol} />
+      <Rows
+        t={t}
+        data={data.slice(0, visibleRows)}
+        currencySymbol={currencySymbol}
+        mobileView={mobileView}
+      />
       {data.length > visibleRows && (
         <div className={styles.buttonWrapper}>
           <Button

packages/webapp/src/components/Finances/Transaction/Mobile/styles.module.scss

@@ -19,6 +19,7 @@
 }
 
 .transactionDate {
+  font-weight: normal;
   font-size: 12px;
   line-height: 16px;
   padding-top: 16px;
@@ -42,7 +43,7 @@
     border-radius: 1px;
   }
 
-  &:hover {
+  &:hover:not(.expanded) {
     background-color: var(--grey200);
   }
 }
@@ -68,7 +69,7 @@
 .mainContentLeft {
   display: flex;
   gap: 4px;
-  width: calc(100% - 80px);
+  width: calc(100% - 100px);
 }
 
 .mainContentText {

packages/webapp/src/components/Table/v2/index.jsx

@@ -160,23 +160,19 @@ export default function EnhancedTable(props) {
                   onClick={(event) => handleRowClick(event, row)}
                   className={clsx(styles.tableRow, onRowClick && styles.clickable)}
                 >
-                  {columns.map(({ id, format, accessor, align, columnProps }) => {
+                  {columns.map(({ id, format, align, columnProps }) => {
                     if (!id) {
                       return null;
                     }
 
-                    const dataGetter = accessor || id;
-                    const data =
-                      typeof dataGetter === 'function' ? dataGetter(row) : row[dataGetter];
-
                     return (
                       <TableCell
                         key={id}
                         className={clsx(styles.tableCell, dense && styles.dense)}
                         align={align || 'left'}
                         {...columnProps}
                       >
-                        {format ? format(row) : data}
+                        {format ? format(row) : row[id]}
                       </TableCell>
                     );
                   })}
@@ -247,7 +243,6 @@ EnhancedTable.propTypes = {
     PropTypes.shape({
       id: PropTypes.string,
       format: PropTypes.func,
-      accessor: PropTypes.func,
       align: PropTypes.oneOf(['left', 'right']),
       Footer: PropTypes.node,
       columnProps: PropTypes.object,

packages/webapp/src/containers/Finances/TransactionList/index.jsx

@@ -16,12 +16,14 @@ import PureTransactionList from '../../../components/Finances/Transaction/Mobile
 import useTransactions from '../useTransactions';
 
 export default function TransactionList({ startDate, endDate }) {
+  const mobileView = true;
+
   const dateFilter = { startDate, endDate };
   // TODO: LF-3752
   const expenseTypeFilter = null;
   const revenueTypeFilter = null;
 
   const transactions = useTransactions({ dateFilter, expenseTypeFilter, revenueTypeFilter });
 
-  return <PureTransactionList data={transactions} />;
+  return <PureTransactionList data={transactions} mobileView={mobileView} />;
 }

packages/webapp/src/containers/Finances/useTransactions.js

@@ -139,6 +139,7 @@ const buildRevenueTransactions = ({
       note: item.sale.customer_name,
       items: item.financeItemsProps,
       relatedId: item.sale.sale_id,
+      cropGenerated: item.cropGenerated || false,
     };
   });
 };