chrone: sperate client and server to different repos.

src/containers/FinancialStatements/ARAgingSummary/components.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
+import { getColumnWidth } from 'utils';
+import { FormattedMessage as T } from 'components';
+import { If } from 'components';
+import FinancialLoadingBar from '../FinancialLoadingBar';
+
+/**
+ * Retrieve AR aging summary columns.
+ */
+export const useARAgingSummaryColumns = () => {
+  const {
+    ARAgingSummary: { tableRows, columns },
+  } = useARAgingSummaryContext();
+
+  const agingColumns = React.useMemo(() => {
+    return columns.map(
+      (agingColumn) =>
+        `${agingColumn.before_days} - ${
+          agingColumn.to_days || intl.get('and_over')
+        }`,
+    );
+  }, [columns]);
+
+  return React.useMemo(
+    () => [
+      {
+        Header: <T id={'customer_name'} />,
+        accessor: 'name',
+        className: 'customer_name',
+        sticky: 'left',
+        width: 240,
+        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'} />,
+        id: 'total',
+        accessor: 'total',
+        className: 'total',
+        width: getColumnWidth(tableRows, 'total', {
+          minWidth: 120,
+        }),
+      },
+    ],
+    [tableRows, agingColumns],
+  );
+};
+
+/**
+ * A/R aging summary sheet loading bar.
+ */
+export function ARAgingSummarySheetLoadingBar() {
+  const { isARAgingFetching } = useARAgingSummaryContext();
+
+  return (
+    <If condition={isARAgingFetching}>
+      <FinancialLoadingBar />
+    </If>
+  );
+}