Feat/request templates

src/app/(light)/dashboard/org/[username]/request-templates/components/request-templates-table.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  defaultGridConfiguration,
+  defaultGridCustomization,
+} from '@/components/data-grid/grid-default';
+import { DATE_FORMAT } from '@/constants/date';
+import { useGtwSession } from '@/context/gtw-session-provider';
+import useOrganization from '@/hooks/use-organization';
+import {
+  requestTemplate,
+  requestTemplates,
+} from '@/locale/en/request-template';
+import {
+  DataRequest,
+  DataRequestTemplatesQuery,
+} from '@/services/protocol/types';
+import { limitCharsCentered } from '@/utils/string';
+import { useQuery } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import { PartialDeep } from 'type-fest';
+
+import { Typography } from '@mui/material';
+import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+
+const columns: GridColDef<PartialDeep<DataRequest>>[] = [
+  {
+    field: 'name',
+    headerName: requestTemplate.title,
+    flex: 1.2,
+    valueFormatter: (params) => params.value,
+    renderCell(params) {
+      return <Typography fontWeight={700}>{params.value}</Typography>;
+    },
+  },
+  {
+    field: 'id',
+    headerName: requestTemplates.data_request_template_id,
+    flex: 1.3,
+    renderCell: (params: GridRenderCellParams) => {
+      return (
+        <Typography variant="body1">
+          {limitCharsCentered(params.row.id, 10)}
+        </Typography>
+      );
+    },
+  },
+  {
+    field: 'createdAt',
+    headerName: 'Created At',
+    flex: 1.2,
+    valueFormatter: (params) =>
+      params.value ? dayjs(params.value).format(DATE_FORMAT) : '',
+  },
+];
+
+type Props = {
+  data: PartialDeep<DataRequest>[];
+  totalCount: number;
+};
+
+export default function RequestTemplatesTable({
+  data: initialData,
+  totalCount = 0,
+}: Props) {
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 5,
+  });
+  const { organization } = useOrganization();
+  const { privateApi } = useGtwSession();
+  const { data, isLoading } = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: [
+      'data-request-templates',
+      organization?.gatewayId as string,
+      paginationModel ? paginationModel.page : 0,
+      paginationModel ? paginationModel.pageSize : 5,
+    ],
+    queryFn: () =>
+      privateApi?.dataRequestTemplates({
+        creatorID: organization?.gatewayId as string,
+        skip: paginationModel.page * paginationModel.pageSize,
+        take: paginationModel.pageSize,
+      }),
+    select: (data: any) =>
+      (data as DataRequestTemplatesQuery)?.dataRequestTemplates,
+    initialData: initialData && initialData.length ? initialData : null,
+    enabled: !!organization,
+  });
+
+  const setNewPage = ({ page }: { page: number }) => {
+    setPaginationModel((prev) => ({
+      ...prev,
+      page: page ? page : 0,
+    }));
+  };
+
+  return (
+    <DataGrid
+      {...defaultGridConfiguration}
+      rows={data && data.length ? data : initialData}
+      columns={columns}
+      paginationModel={paginationModel}
+      onPaginationModelChange={setNewPage}
+      paginationMode="server"
+      loading={isLoading}
+      rowCount={totalCount}
+      sx={defaultGridCustomization}
+    />
+  );
+}

src/app/(light)/dashboard/org/[username]/request-templates/layout.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+
+import TitleLayout from '@/components/title-layout/title-layout';
+import { requestTemplates } from '@/locale/en/request-template';
+
+import { Box } from '@mui/material';
+
+export default function OrgDataRequestTemplatesLayout({
+  children,
+}: PropsWithChildren) {
+  return (
+    <Box sx={{ py: 2 }}>
+      <TitleLayout
+        titleId={requestTemplates.title}
+        title={requestTemplates.title}
+        subtitle={requestTemplates.org_subtitle}
+      />
+      {children}
+    </Box>
+  );
+}

src/app/(light)/dashboard/org/[username]/request-templates/page.tsx

@@ -0,0 +1,22 @@
+import { getPrivateApi } from '@/services/protocol/api';
+
+import RequestTemplatesTable from './components/request-templates-table';
+
+export default async function DashboardOrgDataRequestTemplatesPage(props: any) {
+  const privateApi = await getPrivateApi();
+  const pathnameOrg = props.params?.username;
+
+  const requestsData =
+    (
+      await privateApi.dataRequestTemplates({
+        creatorID: pathnameOrg,
+        skip: 0,
+        take: 5,
+      })
+    )?.dataRequestTemplates ?? [];
+
+  const count = (await (await privateApi).myDataRequestTemplatesCount())
+    .myDataRequestTemplatesCount;
+
+  return <RequestTemplatesTable data={requestsData} totalCount={count} />;
+}

src/app/(light)/dashboard/org/components/dashboard-org-menu-items.tsx

@@ -2,6 +2,7 @@ import { GTWMenuItemSettings } from '@/app/(light)/dashboard/components/menu-ite
 import DataOutlinedIcon from '@/components/icons/data-outlined';
 import DataProofOutlinedIcon from '@/components/icons/data-proof-outlined';
 import DataRequestOutlinedIcon from '@/components/icons/data-request-outlined';
+import DataRequestTemplateOutlinedIcon from '@/components/icons/data-request-template-outlined';
 import routes from '@/constants/routes';
 
 /**
@@ -22,6 +23,12 @@ export const dashboardOrgMenuItems = (
     activeHrefs: [routes.dashboardOrgRequests(username)],
     icon: DataRequestOutlinedIcon,
   },
+  {
+    name: 'Request templates',
+    href: routes.dashboardOrgRequestTemplates(username),
+    activeHrefs: [routes.dashboardOrgRequestTemplates(username)],
+    icon: DataRequestTemplateOutlinedIcon,
+  },
   {
     name: 'Received data proofs',
     href: routes.dashboardOrgReceivedProofs(username),

src/app/(light)/dashboard/user/components/dashboard-user-menu-items.tsx

@@ -2,6 +2,7 @@ import { GTWMenuItemSettings } from '@/app/(light)/dashboard/components/menu-ite
 import DataOutlinedIcon from '@/components/icons/data-outlined';
 import DataProofOutlinedIcon from '@/components/icons/data-proof-outlined';
 import DataRequestOutlinedIcon from '@/components/icons/data-request-outlined';
+import DataRequestTemplateOutlinedIcon from '@/components/icons/data-request-template-outlined';
 import HomeOutlinedIcon from '@/components/icons/home-outlined';
 import routes from '@/constants/routes';
 
@@ -34,6 +35,12 @@ export const dashboardUserMenuItems: GTWMenuItemSettings[] = [
     ],
     icon: DataRequestOutlinedIcon,
   },
+  {
+    name: 'Request templates',
+    href: routes.dashboardUserRequestTemplates,
+    activeHrefs: [routes.dashboardUserRequestTemplates],
+    icon: DataRequestTemplateOutlinedIcon,
+  },
   {
     name: 'Data proofs',
     href: routes.dashboardUserReceivedProofs,

src/app/(light)/dashboard/user/request-templates/components/request-templates-table.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  defaultGridConfiguration,
+  defaultGridCustomization,
+} from '@/components/data-grid/grid-default';
+import { DATE_FORMAT } from '@/constants/date';
+import { useGtwSession } from '@/context/gtw-session-provider';
+import {
+  requestTemplate,
+  requestTemplates,
+} from '@/locale/en/request-template';
+import {
+  DataRequest,
+  DataRequestTemplatesQuery,
+} from '@/services/protocol/types';
+import { limitCharsCentered } from '@/utils/string';
+import { useQuery } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import { PartialDeep } from 'type-fest';
+
+import { Typography } from '@mui/material';
+import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+
+const columns: GridColDef<PartialDeep<DataRequest>>[] = [
+  {
+    field: 'name',
+    headerName: requestTemplate.title,
+    flex: 1.2,
+    valueFormatter: (params) => params.value,
+    renderCell(params) {
+      return <Typography fontWeight={700}>{params.value}</Typography>;
+    },
+  },
+  {
+    field: 'id',
+    headerName: requestTemplates.data_request_template_id,
+    flex: 1.3,
+    renderCell: (params: GridRenderCellParams) => {
+      return (
+        <Typography variant="body1">
+          {limitCharsCentered(params.row.id, 10)}
+        </Typography>
+      );
+    },
+  },
+  {
+    field: 'createdAt',
+    headerName: 'Created At',
+    flex: 1.2,
+    valueFormatter: (params) =>
+      params.value ? dayjs(params.value).format(DATE_FORMAT) : '',
+  },
+];
+
+type Props = {
+  data: PartialDeep<DataRequest>[];
+  totalCount: number;
+};
+
+export default function RequestTemplatesTable({
+  data: initialData,
+  totalCount = 0,
+}: Props) {
+  const { session } = useGtwSession();
+  const [paginationModel, setPaginationModel] = useState({
+    page: 0,
+    pageSize: 5,
+  });
+
+  const { privateApi } = useGtwSession();
+  const { data, isLoading } = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: [
+      'data-request-templates',
+      session?.user?.gatewayId,
+      paginationModel ? paginationModel.page : 0,
+      paginationModel ? paginationModel.pageSize : 5,
+    ],
+    queryFn: () =>
+      privateApi?.dataRequestTemplates({
+        creatorID: session?.user?.gatewayId,
+        skip: paginationModel.page * paginationModel.pageSize,
+        take: paginationModel.pageSize,
+      }),
+    select: (data: any) =>
+      (data as DataRequestTemplatesQuery)?.dataRequestTemplates,
+    initialData: initialData && initialData.length ? initialData : null,
+  });
+
+  const setNewPage = ({ page }: { page: number }) => {
+    setPaginationModel((prev) => ({
+      ...prev,
+      page: page ? page : 0,
+    }));
+  };
+
+  return (
+    <DataGrid
+      {...defaultGridConfiguration}
+      rows={data && data.length ? data : initialData}
+      columns={columns}
+      paginationModel={paginationModel}
+      onPaginationModelChange={setNewPage}
+      paginationMode="server"
+      loading={isLoading}
+      rowCount={totalCount}
+      sx={defaultGridCustomization}
+    />
+  );
+}

src/app/(light)/dashboard/user/request-templates/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import DefaultError from '@/components/default-error/default-error';
+
+export default function DataRequestTemplatesErrorPage() {
+  return <DefaultError />;
+}

src/app/(light)/dashboard/user/request-templates/layout.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react';
+
+import { requestTemplates } from '@/locale/en/request-template';
+
+import { Box, Typography } from '@mui/material';
+
+export default function DataRequestTeampltesLayout({
+  children,
+}: PropsWithChildren) {
+  return (
+    <Box sx={{ py: 2 }}>
+      <Box
+        sx={{
+          mb: {
+            xs: 4,
+            md: 5,
+            lg: 6,
+          },
+        }}
+      >
+        <Typography variant="h3" id="title-request-templates" sx={{ mb: 1 }}>
+          {requestTemplates.title}
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          {requestTemplates.subtitle}
+        </Typography>
+      </Box>
+      {children}
+    </Box>
+  );
+}

src/app/(light)/dashboard/user/request-templates/page.tsx

@@ -0,0 +1,23 @@
+import { Session } from 'next-auth';
+
+import { getGtwServerSession } from '@/services/next-auth/get-gtw-server-session';
+import { getPrivateApi } from '@/services/protocol/api';
+
+import RequestTemplatesTable from './components/request-templates-table';
+
+export default async function DashboardUserDataRequestTemplatesPage() {
+  const privateApi = await getPrivateApi();
+  const session = (await getGtwServerSession()) as Session;
+  const requestsData =
+    (
+      await privateApi.dataRequestTemplates({
+        creatorID: session.user.gatewayId,
+        skip: 0,
+        take: 5,
+      })
+    )?.dataRequestTemplates ?? [];
+  const count = (await (await privateApi).myDataRequestTemplatesCount())
+    .myDataRequestTemplatesCount;
+
+  return <RequestTemplatesTable data={requestsData} totalCount={count} />;
+}