feat(web-ui): add organization journal page

Author: johanbook

services/web-ui/src/Router.tsx

@@ -12,6 +12,7 @@ import { CreateOrganizationPage } from "src/pages/CreateOrganizationPage";
 import { CurrentOrganizationPage } from "src/pages/CurrentOrganizationPage";
 import { CurrentProfilePage } from "src/pages/CurrentProfilePage";
 import { NotFoundPage } from "src/pages/NotFoundPage";
+import { OrganizationJournalPage } from "src/pages/OrganizationJournalPage";
 import { OrganizationListPage } from "src/pages/OrganizationListPage";
 import { ProfileGuard } from "src/pages/ProfileGuard";
 import { ProfileJournalPage } from "src/pages/ProfileJournalPage";
@@ -57,6 +58,10 @@ const router = createBrowserRouter([
         path: "/group/create",
         element: <CreateOrganizationPage />,
       },
+      {
+        path: "/group/journal",
+        element: <OrganizationJournalPage />,
+      },
       {
         path: "/group/list",
         element: <OrganizationListPage />,

services/web-ui/src/pages/OrganizationJournalPage/OrganizationJournalPage.component.tsx

@@ -0,0 +1,45 @@
+import { ReactElement } from "react";
+
+import { JournalEntryDetails } from "src/api";
+import { Table } from "src/components/ui";
+import { Column } from "src/components/ui/Table";
+import { format } from "src/utils/string";
+
+const columns: Column<JournalEntryDetails>[] = [
+  {
+    field: "commandName",
+    headerName: "Action",
+    valueGetter: (params) => format(params.value || ""),
+    width: 400,
+  },
+  {
+    field: "createdAt",
+    headerName: "Date",
+    valueGetter: (params) => params.value.toLocaleString(),
+    width: 400,
+  },
+];
+
+interface OrganizationJournalPageComponentProps {
+  data: JournalEntryDetails[];
+  loading?: boolean;
+}
+
+export function OrganizationJournalPageComponent({
+  data,
+  loading,
+}: OrganizationJournalPageComponentProps): ReactElement {
+  return (
+    <Table
+      columns={columns}
+      height="60vh"
+      initialState={{
+        sorting: {
+          sortModel: [{ field: "created", sort: "desc" }],
+        },
+      }}
+      loading={loading}
+      rows={data}
+    />
+  );
+}

services/web-ui/src/pages/OrganizationJournalPage/OrganizationJournalPage.container.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+
+import { Box, Typography } from "@mui/material";
+
+import { journalApi } from "src/apis";
+import { ErrorMessage } from "src/components/ui/ErrorMessage";
+import { CacheKeysConstants, useQuery } from "src/core/query";
+import { getDateDaysAgo } from "src/utils/time";
+
+import { OrganizationJournalPageComponent } from "./OrganizationJournalPage.component";
+import { OrganizationJournalPageNav } from "./OrganizationJournalPage.nav";
+
+export function OrganizationJournalPageContainer(): React.ReactElement {
+  const [dateRange, setDateRange] = useState({
+    to: new Date(),
+    from: getDateDaysAgo(2),
+  });
+
+  const { error, data, isLoading } = useQuery(
+    [CacheKeysConstants.Journal, dateRange.from, dateRange.to],
+    () => journalApi.getCurrentOrganizationJournal(dateRange)
+  );
+
+  if (error) {
+    return (
+      <OrganizationJournalPageNav
+        onDateChange={setDateRange}
+        values={dateRange}
+      >
+        <ErrorMessage error={error} />
+      </OrganizationJournalPageNav>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <OrganizationJournalPageNav
+        onDateChange={setDateRange}
+        values={dateRange}
+      >
+        <Box sx={{ marginTop: 2 }}>
+          <OrganizationJournalPageComponent data={[]} loading />
+        </Box>
+      </OrganizationJournalPageNav>
+    );
+  }
+
+  if (!data) {
+    return (
+      <OrganizationJournalPageNav
+        onDateChange={setDateRange}
+        values={dateRange}
+      >
+        <Typography>No entries found in journal</Typography>
+      </OrganizationJournalPageNav>
+    );
+  }
+
+  return (
+    <OrganizationJournalPageNav onDateChange={setDateRange} values={dateRange}>
+      <Box sx={{ marginTop: 2 }}>
+        <OrganizationJournalPageComponent data={data.entries} />
+      </Box>
+    </OrganizationJournalPageNav>
+  );
+}

services/web-ui/src/pages/OrganizationJournalPage/OrganizationJournalPage.nav.tsx

@@ -0,0 +1,56 @@
+import { ReactElement, ReactNode } from "react";
+
+import { Grid, Typography } from "@mui/material";
+
+import { NavLayout } from "src/components/layout";
+import { DatePicker } from "src/components/ui/DatePicker";
+import { useTranslation } from "src/core/i18n";
+
+export interface DateRange {
+  from: Date;
+  to: Date;
+}
+
+interface OrganizationJournalPageNavProps {
+  children: ReactNode;
+  onDateChange: (value: DateRange) => void;
+  values: DateRange;
+}
+
+export function OrganizationJournalPageNav({
+  children,
+  onDateChange,
+  values,
+}: OrganizationJournalPageNavProps): ReactElement {
+  const { t } = useTranslation("journal");
+
+  return (
+    <NavLayout header={t("header")} linkText={t("links.back")} to="/profile">
+      <Typography color="textSecondary" sx={{ paddingBottom: 3 }}>
+        {t("description")}
+      </Typography>
+
+      <Grid container spacing={2}>
+        <Grid item xs={6}>
+          <DatePicker
+            fullWidth
+            label="From"
+            onChange={(from) => onDateChange({ ...values, from })}
+            value={values.from}
+          />
+        </Grid>
+
+        <Grid item xs={6}>
+          <DatePicker
+            fullWidth
+            label="To"
+            onChange={(to) => onDateChange({ ...values, to })}
+            value={values.to}
+          />
+        </Grid>
+      </Grid>
+
+      {children}
+    </NavLayout>
+  );
+}

services/web-ui/src/pages/OrganizationJournalPage/OrganizationJournalPage.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { JournalEntryDetails } from "src/api";
+
+import { ProfileJournalPageComponent } from "./ProfileJournalPage.component";
+
+const JOURNAL_ENTRIES: JournalEntryDetails[] = [
+  {
+    commandName: "Did the thing",
+    createdAt: new Date("2020"),
+    id: "1",
+    payload: {},
+    profile: {
+      id: 1,
+    },
+  },
+  {
+    commandName: "Did the thing again",
+    createdAt: new Date("2020"),
+    id: "2",
+    payload: {},
+    profile: {
+      id: 1,
+    },
+  },
+];
+
+export default {
+  title: "Pages/Journal/View",
+  component: ProfileJournalPageComponent,
+} as Meta;
+
+type Story = StoryObj<typeof ProfileJournalPageComponent>;
+
+export const Default: Story = {
+  args: {
+    data: JOURNAL_ENTRIES,
+  },
+};

services/web-ui/src/pages/OrganizationJournalPage/index.ts

@@ -0,0 +1 @@
+export { OrganizationJournalPageContainer as OrganizationJournalPage } from "./OrganizationJournalPage.container";