re-structure to monorepo.

packages/webapp/src/containers/FinancialStatements/APAgingSummary/components.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { If, FormattedMessage as T } from '@/components';
+import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
+import { getColumnWidth } from '@/utils';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve AP aging summary columns.
+ */
+export const useAPAgingSummaryColumns = () => {
+  const {
+    APAgingSummary: { tableRows, columns },
+  } = useAPAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
+    );
+  }, [columns]);
+
+  return useMemo(
+    () => [
+      {
+        Header: <T id={'vendor_name'} />,
+        accessor: 'name',
+        className: 'vendor_name',
+        width: 240,
+        sticky: 'left',
+        textOverview: true,
+      },
+      {
+        Header: <T id={'current'} />,
+        accessor: 'current',
+        className: 'current',
+        width: getColumnWidth(tableRows, `current`, { minWidth: 120 }),
+      },
+      ...agingColumns.map((agingColumn, index) => ({
+        Header: agingColumn,
+        accessor: `aging-${index}`,
+        width: getColumnWidth(tableRows, `aging-${index}`, { minWidth: 120 }),
+      })),
+      {
+        Header: <T id={'total'} />,
+        accessor: 'total',
+        width: getColumnWidth(tableRows, 'total', { minWidth: 120 }),
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};
+
+/**
+ * A/P aging summary sheet loading bar.
+ */
+export function APAgingSummarySheetLoadingBar() {
+  const { isAPAgingFetching } = useAPAgingSummaryContext();
+
+  return (
+    <If condition={isAPAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}