Moved code into src folder. Added build for component library.

src/components/pages/event-data/EventDataMetricsBar.js

@@ -0,0 +1,59 @@
+import { Column, Row } from 'react-basics';
+import { useApi, useDateRange } from 'components/hooks';
+import MetricCard from 'components/metrics/MetricCard';
+import useMessages from 'components/hooks/useMessages';
+import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
+import MetricsBar from 'components/metrics/MetricsBar';
+import styles from './EventDataMetricsBar.module.css';
+
+export function EventDataMetricsBar({ websiteId }) {
+  const { formatMessage, labels } = useMessages();
+  const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, modified } = dateRange;
+
+  const { data, error, isLoading, isFetched } = useQuery(
+    ['event-data:stats', { websiteId, startDate, endDate, modified }],
+    () =>
+      get(`/event-data/stats`, {
+        websiteId,
+        startAt: +startDate,
+        endAt: +endDate,
+      }),
+  );
+
+  return (
+    <Row className={styles.row}>
+      <Column defaultSize={12} xl={8}>
+        <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
+          {!error && isFetched && (
+            <>
+              <MetricCard
+                className={styles.card}
+                label={formatMessage(labels.events)}
+                value={data?.events}
+              />
+              <MetricCard
+                className={styles.card}
+                label={formatMessage(labels.fields)}
+                value={data?.fields}
+              />
+              <MetricCard
+                className={styles.card}
+                label={formatMessage(labels.totalRecords)}
+                value={data?.records}
+              />
+            </>
+          )}
+        </MetricsBar>
+      </Column>
+      <Column defaultSize={12} xl={4}>
+        <div className={styles.actions}>
+          <WebsiteDateFilter websiteId={websiteId} />
+        </div>
+      </Column>
+    </Row>
+  );
+}
+
+export default EventDataMetricsBar;

src/components/pages/event-data/EventDataMetricsBar.module.css

@@ -0,0 +1,46 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  min-height: 90px;
+  margin-bottom: 20px;
+  background: var(--base50);
+  z-index: var(--z-index-above);
+}
+
+.metrics {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+}
+
+.bar {
+  display: flex;
+  cursor: pointer;
+  min-height: 110px;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.card {
+  justify-self: flex-start;
+}
+
+@media only screen and (max-width: 992px) {
+  .card {
+    flex-basis: calc(50% - 20px);
+  }
+}
+
+.row {
+  border-bottom: 1px solid var(--border-color);
+}

src/components/pages/event-data/EventDataTable.js

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { GridTable, GridColumn } from 'react-basics';
+import { useMessages, usePageQuery } from 'components/hooks';
+import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
+
+export function EventDataTable({ data = [] }) {
+  const { formatMessage, labels } = useMessages();
+  const { resolveUrl } = usePageQuery();
+
+  if (data.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <GridTable data={data}>
+      <GridColumn name="eventName" label={formatMessage(labels.event)}>
+        {row => (
+          <Link href={resolveUrl({ event: row.eventName })} shallow={true}>
+            {row.eventName}
+          </Link>
+        )}
+      </GridColumn>
+      <GridColumn name="fieldName" label={formatMessage(labels.field)}>
+        {row => row.fieldName}
+      </GridColumn>
+      <GridColumn name="dataType" label={formatMessage(labels.type)}>
+        {row => DATA_TYPES[row.dataType]}
+      </GridColumn>
+      <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
+        {({ total }) => total.toLocaleString()}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default EventDataTable;

src/components/pages/event-data/EventDataValueTable.js

@@ -0,0 +1,49 @@
+import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
+import { useMessages, usePageQuery } from 'components/hooks';
+import Link from 'next/link';
+import Icons from 'components/icons';
+import PageHeader from 'components/layout/PageHeader';
+import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
+
+export function EventDataValueTable({ data = [], event }) {
+  const { formatMessage, labels } = useMessages();
+  const { resolveUrl } = usePageQuery();
+
+  const Title = () => {
+    return (
+      <>
+        <Link href={resolveUrl({ event: undefined })}>
+          <Button>
+            <Icon rotate={180}>
+              <Icons.ArrowRight />
+            </Icon>
+            <Text>{formatMessage(labels.back)}</Text>
+          </Button>
+        </Link>
+        <Text>{event}</Text>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <PageHeader title={<Title />} />
+      {data.length <= 0 && <Empty />}
+      {data.length > 0 && (
+        <GridTable data={data}>
+          <GridColumn name="fieldName" label={formatMessage(labels.field)} />
+          <GridColumn name="dataType" label={formatMessage(labels.type)}>
+            {row => DATA_TYPES[row.dataType]}
+          </GridColumn>
+          <GridColumn name="fieldValue" label={formatMessage(labels.value)} />
+          <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
+            {({ total }) => total.toLocaleString()}
+          </GridColumn>
+        </GridTable>
+      )}
+    </>
+  );
+}
+
+export default EventDataValueTable;