fix(server): showing transaction statement on cash flow transactions details drawer

packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx

@@ -106,11 +106,13 @@ export default function OtherIncomeFormFields() {
             )}
           </FastField>
         </Col>
+
         <Col xs={5}>
           {/*------------ Transaction number -----------*/}
           <MoneyInOutTransactionNoField />
         </Col>
       </Row>
+
       {/*------------ amount -----------*/}
       <FastField name={'amount'}>
         {({

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerDetails.tsx

@@ -1,12 +1,13 @@
 // @ts-nocheck
 import React from 'react';
 
-import { Card } from '@/components';
+import { Card, CommercialDocBox } from '@/components';
 
 import CashflowTransactionDrawerActionBar from './CashflowTransactionDrawerActionBar';
 import CashflowTransactionDrawerHeader from './CashflowTransactionDrawerHeader';
 import CashflowTransactionDrawerTable from './CashflowTransactionDrawerTable';
-import CashflowTransactionDrawerFooter from './CashflowTransactionDrawerFooter';
+import CashflowTransactionDrawerTableFooter from './CashflowTransactionDrawerTableFooter';
+import { CashflowTransactionDrawerFooter } from './CashflowTransactionDrawerFooter';
 /**
  * Cashflow transaction view details.
  */
@@ -16,11 +17,12 @@ export default function CashflowTransactionDrawerDetails() {
       <CashflowTransactionDrawerActionBar />
 
       <div className="cashflow-drawer__content">
-        <Card>
+        <CommercialDocBox>
           <CashflowTransactionDrawerHeader />
           <CashflowTransactionDrawerTable />
+          <CashflowTransactionDrawerTableFooter />
           <CashflowTransactionDrawerFooter />
-        </Card>
+        </CommercialDocBox>
       </div>
     </div>
   );

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerFooter.tsx

@@ -1,35 +1,18 @@
 // @ts-nocheck
 import React from 'react';
+import { CommercialDocFooter, DetailsMenu, DetailItem, T } from '@/components';
 import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
-import { T, FormatNumber } from '@/components';
 
-export default function CashflowTransactionDrawerFooter() {
+export function CashflowTransactionDrawerFooter() {
-  const {
+  const { cashflowTransaction } = useCashflowTransactionDrawerContext();
-    cashflowTransaction: { formatted_amount },
-  } = useCashflowTransactionDrawerContext();
 
   return (
-    <div className="cashflow-drawer__content-footer">
+    <CommercialDocFooter>
-      <div class="total-lines">
+      <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
-        <div class="total-lines__line total-lines__line--subtotal">
+        <DetailItem label={<T id={'cash_flow.drawer.label.statement'} />}>
-          <div class="title">
+          {cashflowTransaction.description}
-            <T id={'manual_journal.details.subtotal'} />
+        </DetailItem>
-          </div>
+      </DetailsMenu>
-          <div class="debit">
+    </CommercialDocFooter>
-            <FormatNumber value={formatted_amount} />
-          </div>
-          <div class="credit">
-            <FormatNumber value={formatted_amount} />
-          </div>
-        </div>
-        <div class="total-lines__line total-lines__line--total">
-          <div class="title">
-            <T id={'manual_journal.details.total'} />
-          </div>
-          <div class="debit">{formatted_amount}</div>
-          <div class="credit">{formatted_amount}</div>
-        </div>
-      </div>
-    </div>
   );
 }

packages/webapp/src/containers/Drawers/CashflowTransactionDetailDrawer/CashflowTransactionDrawerTableFooter.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import React from 'react';
+import { useCashflowTransactionDrawerContext } from './CashflowTransactionDrawerProvider';
+import { T, FormatNumber } from '@/components';
+
+export default function CashflowTransactionDrawerTableFooter() {
+  const {
+    cashflowTransaction: { formatted_amount },
+  } = useCashflowTransactionDrawerContext();
+
+  return (
+    <div className="cashflow-drawer__content-footer">
+      <div class="total-lines">
+        <div class="total-lines__line total-lines__line--subtotal">
+          <div class="title">
+            <T id={'manual_journal.details.subtotal'} />
+          </div>
+          <div class="debit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+          <div class="credit">
+            <FormatNumber value={formatted_amount} />
+          </div>
+        </div>
+        <div class="total-lines__line total-lines__line--total">
+          <div class="title">
+            <T id={'manual_journal.details.total'} />
+          </div>
+          <div class="debit">{formatted_amount}</div>
+          <div class="credit">{formatted_amount}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.tsx

@@ -1,6 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-
 import {
   CommercialDocFooter,
   T,

packages/webapp/src/lang/en/index.json

@@ -1452,6 +1452,7 @@
   "cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number",
   "cash_flow_drawer.label_transaction_type": "Transaction type",
   "cash_flow.drawer.label_transaction_no": "Transaction number",
+  "cash_flow.drawer.label.statement": "Statement",
   "cash_flow.drawer.label_transaction": "Cash flow Transaction {number}",
   "cash_flow.account_transactions.no_results": "There are no deposit/withdrawal transactions on the current account.",
   "cash_flow_balance_in": "Balance in {name}",