chrone: sperate client and server to different repos.

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import FinancialSheet from 'components/FinancialSheet';
+import { DataTable } from 'components';
+
+import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
+
+import { usePurchasesByItemsTableColumns } from './components';
+
+/**
+ * purchases by items data table.
+ */
+export default function PurchasesByItemsTable({ companyName }) {
+  // Purchases by items context.
+  const {
+    purchaseByItems: { tableRows, query },
+    isLoading,
+  } = usePurchaseByItemsContext();
+
+  // Purchases by items table columns.
+  const columns = usePurchasesByItemsTableColumns();
+
+  const rowClassNames = (row) => {
+    const { original } = row;
+    const rowTypes = Array.isArray(original.rowType)
+      ? original.rowType
+      : [original.rowType];
+
+    return {
+      ...rowTypes.reduce((acc, rowType) => {
+        acc[`row_type--${rowType}`] = rowType;
+        return acc;
+      }, {}),
+    };
+  };
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={intl.get('purchases_by_items')}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      name="purchases-by-items"
+      loading={isLoading}
+    >
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={tableRows}
+        expandable={true}
+        expandToggleColumn={1}
+        expandColumnSpace={1}
+        sticky={true}
+        rowClassNames={rowClassNames}
+        noResults={intl.get(
+          'there_were_no_purchases_during_the_selected_date_range',
+        )}
+      />
+    </FinancialSheet>
+  );
+}