GraphQL and MUI license updates

.gitlab-ci.yml

@@ -51,16 +51,16 @@ build-all:
     - docker tag ${DOCKER_NS}:${DOCKER_TAG} ${DOCKER_NS}:${DOCKER_TAG_NEW}
     - docker push ${DOCKER_NS}:${DOCKER_TAG_NEW}
 
-# link-docker-build:
+link-docker-build:
-#   extends: .docker-build
+  extends: .docker-build
-#   variables:
+  variables:
-#     DOCKER_NS: ${CI_REGISTRY}/digiresilience/link/link-stack/link
+    DOCKER_NS: ${CI_REGISTRY}/digiresilience/link/link-stack/link
-#     DOCKERFILE_PATH: ./apps/link/Dockerfile
+    DOCKERFILE_PATH: ./apps/link/Dockerfile
 
-# link-docker-release:
+link-docker-release:
-#   extends: .docker-release
+  extends: .docker-release
-#   variables:
+  variables:
-#     DOCKER_NS: ${CI_REGISTRY}/digiresilience/link/link-stack/link
+    DOCKER_NS: ${CI_REGISTRY}/digiresilience/link/link-stack/link
 
 # leafcutter-docker-build:
 #   extends: .docker-build

apps/leafcutter/app/_components/MultiProvider.tsx

@@ -18,9 +18,11 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/700.css";
 import "@fontsource/playfair-display/900.css";
 import "app/_styles/global.css";
-import { LicenseInfo } from "@mui/x-data-grid-pro";
+import { LicenseInfo } from "@mui/x-date-pickers-pro";
 
-LicenseInfo.setLicenseKey(process.env.MUI_LICENSE_KEY ?? "");
+LicenseInfo.setLicenseKey(
+  "7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI="
+);
 
 const messages: any = { en, fr };
 

apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 import { Grid, Box } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid-pro";
 import { StyledDataGrid } from "../../../_components/StyledDataGrid";
+import { Button } from "app/_components/Button";
 import { typography } from "app/_styles/theme";
 import { useRouter } from "next/navigation";
 
@@ -46,6 +47,13 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
   return (
     <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
       <Grid container direction="column">
+        <Grid
+          item
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
           <Grid item>
             <Box
               sx={{
@@ -59,6 +67,10 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
               {title}
             </Box>
           </Grid>
+          <Grid item>
+            <Button href="/tickets/create" text="Create" color="#1982FC" />
+          </Grid>
+        </Grid>
         <Grid item>
           <StyledDataGrid
             name={title}

apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx

@@ -25,7 +25,7 @@ export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
 
   return (
     <>
-      {shouldRender && <TicketList title="Assigned" tickets={tickets} />}
+      {shouldRender && <TicketList title={name} tickets={tickets} />}
       {ticketError && <div>{ticketError.toString()}</div>}
     </>
   );

apps/link/app/(main)/overview/[overview]/page.tsx

@@ -1,6 +1,10 @@
 import { Metadata } from "next";
 import { ZammadOverview } from "./_components/ZammadOverview";
 
+const getSection = (overview: string) => {
+  return overview.charAt(0).toUpperCase() + overview.slice(1);
+};
+
 type MetadataProps = {
   params: {
     overview: string;
@@ -10,7 +14,7 @@ type MetadataProps = {
 export async function generateMetadata({
   params: { overview },
 }: MetadataProps): Promise<Metadata> {
-  const section = overview.charAt(0).toUpperCase() + overview.slice(1);
+  const section = getSection(overview);
 
   return {
     title: `Link - ${section} Tickets`,
@@ -31,6 +35,7 @@ type PageProps = {
 };
 
 export default function Page({ params: { overview } }: PageProps) {
-  console.log({ overview });
+  const section = getSection(overview);
-  return <ZammadOverview name={overview} id={overviews[overview]} />;
+
+  return <ZammadOverview name={section} id={overviews[overview]} />;
 }

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -3,6 +3,7 @@
 import { FC, useState } from "react";
 import useSWR from "swr";
 import { getTicketQuery } from "app/_graphql/getTicketQuery";
+import { getTicketArticlesQuery } from "app/_graphql/getTicketArticlesQuery";
 import {
   Grid,
   Box,
@@ -34,18 +35,26 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
     },
     { refreshInterval: 100000 }
   );
+  const { data: ticketArticlesData, error: ticketArticlesError }: any = useSWR(
+    {
+      document: getTicketArticlesQuery,
+      variables: { ticketId: `gid://zammad/Ticket/${id}` },
+    },
+    { refreshInterval: 2000 }
+  );
 
-  console.log({ ticketData, ticketError });
   const ticket = ticketData?.ticket;
+  const ticketArticles = ticketArticlesData?.ticketArticles;
   const [dialogOpen, setDialogOpen] = useState(false);
   const [articleKind, setArticleKind] = useState<"reply" | "note">("reply");
   const closeDialog = () => setDialogOpen(false);
 
-  const shouldRender = ticketData && !ticketError;
+  const shouldRender =
+    ticketData && !ticketError && ticketArticlesData && !ticketArticlesError;
 
   return (
     shouldRender && (
-      <>
+      <Box sx={{ height: "100%", width: "100%" }}>
         <MainContainer>
           <ChatContainer>
             <ConversationHeader>
@@ -73,13 +82,13 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
               </ConversationHeader.Content>
             </ConversationHeader>
             <MessageList style={{ marginBottom: 80 }}>
-              {ticket.articles.edges.map(({ node: article }: any) => (
+              {ticketArticles.edges.map(({ node: article }: any) => (
                 <Message
                   key={article.id}
                   className={
                     article.internal
                       ? "internal-note"
-                      : article.sender.name === "Agent"
+                      : article?.sender?.name === "Agent"
                       ? "outgoing-message"
                       : "incoming-message"
                   }
@@ -171,7 +180,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
           closeDialog={closeDialog}
           kind={articleKind}
         />
-      </>
+      </Box>
     )
   );
 };

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -1,65 +1,85 @@
 "use client";
 
-import { FC, /* useEffect, */ useState } from "react";
+import { FC, useEffect, useState } from "react";
 import {
   Grid,
   Box,
   // Typography,
   // TextField,
   Stack,
-  Chip,
   Select,
   MenuItem,
 } from "@mui/material";
-import { /* useSWR, */ useSWRConfig } from "swr";
+import { MuiChipsInput } from "mui-chips-input";
+import useSWR, { useSWRConfig } from "swr";
+import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { updateTicketMutation } from "app/_graphql/updateTicketMutation";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
 
 interface TicketEditProps {
-  ticket: any;
+  id: string;
 }
 
-export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
+export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
-  const [selectedGroup, setSelectedGroup] = useState(1);
+  const [selectedGroup, setSelectedGroup] = useState("");
-  const [selectedOwner, setSelectedOwner] = useState(1);
+  const [selectedOwner, setSelectedOwner] = useState("");
-  const [selectedPriority, setSelectedPriority] = useState(1);
+  const [selectedPriority, setSelectedPriority] = useState("");
-  const [selectedState, setSelectedState] = useState(1);
+  const [selectedState, setSelectedState] = useState("");
-  const [selectedTags] = useState(["tag1", "tag2"]);
+  const [selectedTags, setSelectedTags] = useState([]);
   const handleDelete = () => {
     console.info("You clicked the delete icon.");
   };
   const restFetcher = (url: string) => fetch(url).then((r) => r.json());
-  /*
-  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
-  console.log({ groups });
-  const { data: users } = useSWR("/api/v1/users", restFetcher);
-  console.log({ users });
-  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
-  console.log({ states });
-  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
-  console.log({ priorities });
 
-  */
+  const { data: groups } = useSWR("/api/v1/groups", restFetcher);
-  const groups = [];
+  const { data: users } = useSWR("/api/v1/users", restFetcher);
-  const users = [];
+  const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
-  const states = [];
+  const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
-  const priorities = [];
+  const { data: tags } = useSWR("/api/v1/tags", restFetcher);
 
   const { fetcher } = useSWRConfig();
+  const { data: ticketData, error: ticketError }: any = useSWR(
+    {
+      document: getTicketQuery,
+      variables: { ticketId: `gid://zammad/Ticket/${id}` },
+    },
+    { refreshInterval: 100000 }
+  );
+  useEffect(() => {
+    const ticket = ticketData?.ticket;
+    if (ticket) {
+      const groupID = ticket.group.id?.split("/").pop();
+      setSelectedGroup(groupID);
+      const ownerID = ticket.owner.id?.split("/").pop();
+      setSelectedOwner(ownerID);
+      const priorityID = ticket.priority.id?.split("/").pop();
+      setSelectedPriority(priorityID);
+      const stateID = ticket.state.id?.split("/").pop();
+      setSelectedState(stateID);
+      setSelectedTags(ticket.tags);
+    }
+  }, [ticketData, ticketError]);
   const updateTicket = async () => {
-    await fetcher({
+    const input = {
+      ownerId: `gid://zammad/User/${selectedOwner}`,
+      priorityId: `gid://zammad/Ticket::Priority/${selectedPriority}`,
+      stateId: `gid://zammad/Ticket::State/${selectedState}`,
+      groupId: `gid://zammad/Group/${selectedGroup}`,
+      // tags: selectedTags,
+    };
+    const res = await fetcher({
       document: updateTicketMutation,
       variables: {
-        ticketId: ticket.id,
+        ticketId: `gid://zammad/Ticket/${id}`,
-        input: {
+        input,
-          ownerId: `gid://zammad/User/${selectedOwner}`,
-          tags: ["tag1", "tag2"],
-        },
       },
     });
+    console.log({ res });
   };
+  const shouldRender = ticketData && !ticketError;
 
   return (
+    shouldRender && (
       <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
         <Grid container direction="column" spacing={3}>
           <Grid item>
@@ -78,7 +98,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
               }}
             >
               {groups?.map((group: any) => (
-              <MenuItem key={group.id} value={group.id}>
+                <MenuItem key={group.id} value={`${group.id}`}>
                   {group.name}
                 </MenuItem>
               ))}
@@ -109,7 +129,10 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
             <Box sx={{ m: 1, mt: 0 }}>State</Box>
             <Select
               value={selectedState}
-            onChange={(e: any) => setSelectedState(e.target.value)}
+              onChange={(e: any) => {
+                setSelectedState(e.target.value);
+                updateTicket();
+              }}
               size="small"
               sx={{
                 width: "100%",
@@ -127,7 +150,10 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
             <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
             <Select
               value={selectedPriority}
-            onChange={(e: any) => setSelectedPriority(e.target.value)}
+              onChange={(e: any) => {
+                setSelectedPriority(e.target.value);
+                updateTicket();
+              }}
               size="small"
               sx={{
                 width: "100%",
@@ -144,24 +170,17 @@ export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
 
           <Grid item>
             <Box sx={{ mb: 1 }}>Tags</Box>
-          <Stack
+            <MuiChipsInput
-            direction="row"
+              sx={{ backgroundColor: "white", width: "100%" }}
-            spacing={1}
+              value={selectedTags}
-            sx={{
+              onChange={(tags: any) => {
-              backgroundColor: "white",
+                setSelectedTags(tags);
-              p: 1,
+                updateTicket();
-              borderRadius: "6px",
-              border: "1px solid #bbb",
-              minHeight: 120,
               }}
-            flexWrap="wrap"
+            />
-          >
-            {selectedTags.map((tag: string) => (
-              <Chip key={tag} label={tag} onDelete={handleDelete} />
-            ))}
-          </Stack>
           </Grid>
         </Grid>
       </Box>
+    )
   );
 };

apps/link/app/(main)/tickets/[id]/@edit/page.tsx

@@ -1,5 +1,11 @@
 import { TicketEdit } from "./_components/TicketEdit";
 
-export default function Page() {
+type PageProps = {
-  return <TicketEdit ticket={undefined} />;
+  params: {
+    id: string;
+  };
+};
+
+export default function Page({ params: { id } }: PageProps) {
+  return <TicketEdit id={id} />;
 }

apps/link/app/(main)/tickets/[id]/layout.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ReactNode } from "react";
 import { Grid } from "@mui/material";
 
 type LayoutProps = {

apps/link/app/_components/Button.tsx

@@ -18,11 +18,12 @@ export const Button: FC<ButtonProps> = ({ text, color, href }) => (
       sx={{
         fontFamily: "Poppins, sans-serif",
         fontWeight: 700,
-        borderRadius: 999,
+        borderRadius: 2,
         backgroundColor: color,
         padding: "6px 30px",
         margin: "20px 0px",
         whiteSpace: "nowrap",
+        textTransform: "none",
       }}
     >
       {text}

apps/link/app/_components/MultiProvider.tsx

@@ -9,6 +9,11 @@ import { SWRConfig } from "swr";
 import { GraphQLClient } from "graphql-request";
 import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
 import { LocalizationProvider } from "@mui/x-date-pickers-pro";
+import { LicenseInfo } from "@mui/x-date-pickers-pro";
+
+LicenseInfo.setLicenseKey(
+  "7c9bf25d9e240f76e77cbf7d2ba58a23Tz02NjU4OCxFPTE3MTU4NjIzMzQ2ODgsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI="
+);
 
 export const MultiProvider: FC<PropsWithChildren> = ({ children }) => {
   const [csrfToken, setCsrfToken] = useState("");

apps/link/app/_graphql/getTicketArticlesQuery.ts

@@ -0,0 +1,21 @@
+import { gql } from 'graphql-request';
+
+export const getTicketArticlesQuery = gql`
+query getTicketArticles($ticketId: ID!) {
+  ticketArticles(ticket: { ticketId: $ticketId }) {
+    edges {
+      node {
+        id
+        body
+        internal
+        type {
+          name
+        }
+        sender {
+          name
+        }
+      }
+    }
+  }
+}
+`;

apps/link/app/_graphql/getTicketQuery.ts

@@ -20,21 +20,14 @@ query getTicket($ticketId: ID!) {
       id
       email
     }
-    articles {
+    group {
-      edges {
-        node {
       id
-          body
-          internal
-          type {
       name
     }
-          sender {
+    priority {
+      id
       name
     }
   }
 }
-    }
-  }
-}
 `;

apps/link/app/layout.tsx

@@ -6,8 +6,6 @@ import "@fontsource/poppins/700.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/700.css";
 import "@fontsource/playfair-display/900.css";
-// import getConfig from "next/config";
-// import { LicenseInfo } from "@mui/x-data-grid-pro";
 import { MultiProvider } from "./_components/MultiProvider";
 
 export const metadata: Metadata = {
@@ -19,9 +17,6 @@ type LayoutProps = {
 };
 
 export default function Layout({ children }: LayoutProps) {
-  // const { publicRuntimeConfig } = getConfig();
-  // LicenseInfo.setLicenseKey(publicRuntimeConfig.muiLicenseKey);
-
   return (
     <html lang="en">
       <body>

apps/link/package.json

@@ -19,14 +19,15 @@
     "@fontsource/poppins": "^5.0.5",
     "@fontsource/roboto": "^5.0.5",
     "@mui/icons-material": "^5",
-    "@mui/lab": "^5.0.0-alpha.135",
+    "@mui/lab": "^5.0.0-alpha.136",
     "@mui/material": "^5",
-    "@mui/x-data-grid-pro": "^6.9.2",
+    "@mui/x-data-grid-pro": "^6.10.0",
-    "@mui/x-date-pickers-pro": "^6.9.2",
+    "@mui/x-date-pickers-pro": "^6.10.0",
     "date-fns": "^2.30.0",
     "graphql-request": "^6.1.0",
     "material-ui-popup-state": "^5.0.9",
-    "next": "13.4.9",
+    "mui-chips-input": "^2.0.2",
+    "next": "13.4.10",
     "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-cookie": "^4.1.1",
@@ -34,17 +35,17 @@
     "react-iframe": "^1.8.5",
     "react-polyglot": "^0.7.2",
     "swr": "^2.2.0",
-    "tss-react": "^4.8.6"
+    "tss-react": "^4.8.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.8",
+    "@babel/core": "^7.22.9",
-    "@types/node": "^20.4.1",
+    "@types/node": "^20.4.2",
-    "@types/react": "18.2.14",
+    "@types/react": "18.2.15",
     "@types/uuid": "^9.0.2",
     "babel-loader": "^9.1.3",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^13.4.9",
+    "eslint-config-next": "^13.4.10",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",

package-lock.json

@@ -582,14 +582,15 @@
         "@fontsource/poppins": "^5.0.5",
         "@fontsource/roboto": "^5.0.5",
         "@mui/icons-material": "^5",
-        "@mui/lab": "^5.0.0-alpha.135",
+        "@mui/lab": "^5.0.0-alpha.136",
         "@mui/material": "^5",
-        "@mui/x-data-grid-pro": "^6.9.2",
+        "@mui/x-data-grid-pro": "^6.10.0",
-        "@mui/x-date-pickers-pro": "^6.9.2",
+        "@mui/x-date-pickers-pro": "^6.10.0",
         "date-fns": "^2.30.0",
         "graphql-request": "^6.1.0",
         "material-ui-popup-state": "^5.0.9",
-        "next": "13.4.9",
+        "mui-chips-input": "^2.0.2",
+        "next": "13.4.10",
         "next-auth": "^4.22.1",
         "react": "18.2.0",
         "react-cookie": "^4.1.1",
@@ -597,17 +598,17 @@
         "react-iframe": "^1.8.5",
         "react-polyglot": "^0.7.2",
         "swr": "^2.2.0",
-        "tss-react": "^4.8.6"
+        "tss-react": "^4.8.8"
       },
       "devDependencies": {
-        "@babel/core": "^7.22.8",
+        "@babel/core": "^7.22.9",
-        "@types/node": "^20.4.1",
+        "@types/node": "^20.4.2",
-        "@types/react": "18.2.14",
+        "@types/react": "18.2.15",
         "@types/uuid": "^9.0.2",
         "babel-loader": "^9.1.3",
-        "eslint": "^8.44.0",
+        "eslint": "^8.45.0",
         "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-next": "^13.4.9",
+        "eslint-config-next": "^13.4.10",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsx-a11y": "^6.7.1",
@@ -616,6 +617,98 @@
         "typescript": "5.1.6"
       }
     },
+    "apps/link/node_modules/@babel/compat-data": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
+      "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "apps/link/node_modules/@babel/core": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.9.tgz",
+      "integrity": "sha512-G2EgeufBcYw27U4hhoIwFcgc1XU7TlXJ3mv04oOv1WCuo900U/anZSPzEqNjwdjgffkk2Gs0AN0dW1CKVLcG7w==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.22.5",
+        "@babel/generator": "^7.22.9",
+        "@babel/helper-compilation-targets": "^7.22.9",
+        "@babel/helper-module-transforms": "^7.22.9",
+        "@babel/helpers": "^7.22.6",
+        "@babel/parser": "^7.22.7",
+        "@babel/template": "^7.22.5",
+        "@babel/traverse": "^7.22.8",
+        "@babel/types": "^7.22.5",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.2",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "apps/link/node_modules/@babel/generator": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
+      "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "apps/link/node_modules/@babel/helper-compilation-targets": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
+      "integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.9",
+        "@babel/helper-validator-option": "^7.22.5",
+        "browserslist": "^4.21.9",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "apps/link/node_modules/@babel/helper-module-transforms": {
+      "version": "7.22.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
+      "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
     "apps/link/node_modules/@fontsource/playfair-display": {
       "version": "5.0.3",
       "license": "OFL-1.1"
@@ -924,6 +1017,11 @@
         "react": "^17.0.0 || ^18.0.0"
       }
     },
+    "apps/link/node_modules/@next/env": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.10.tgz",
+      "integrity": "sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ=="
+    },
     "apps/link/node_modules/@next/eslint-plugin-next": {
       "version": "13.4.5",
       "dev": true,
@@ -932,11 +1030,178 @@
         "glob": "7.1.7"
       }
     },
+    "apps/link/node_modules/@next/swc-darwin-arm64": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.10.tgz",
+      "integrity": "sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-darwin-x64": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.10.tgz",
+      "integrity": "sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.10.tgz",
+      "integrity": "sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.10.tgz",
+      "integrity": "sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.10.tgz",
+      "integrity": "sha512-WDv1YtAV07nhfy3i1visr5p/tjiH6CeXp4wX78lzP1jI07t4PnHHG1WEDFOduXh3WT4hG6yN82EQBQHDi7hBrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.10.tgz",
+      "integrity": "sha512-zFkzqc737xr6qoBgDa3AwC7jPQzGLjDlkNmt/ljvQJ/Veri5ECdHjZCUuiTUfVjshNIIpki6FuP0RaQYK9iCRg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.10.tgz",
+      "integrity": "sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.10.tgz",
+      "integrity": "sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.10.tgz",
+      "integrity": "sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "apps/link/node_modules/@types/node": {
+      "version": "20.4.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
+      "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==",
+      "dev": true
+    },
+    "apps/link/node_modules/@types/react": {
+      "version": "18.2.15",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz",
+      "integrity": "sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==",
+      "devOptional": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "apps/link/node_modules/@types/uuid": {
       "version": "9.0.2",
       "dev": true,
       "license": "MIT"
     },
+    "apps/link/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "apps/link/node_modules/babel-loader": {
       "version": "9.1.3",
       "dev": true,
@@ -953,6 +1218,94 @@
         "webpack": ">=5"
       }
     },
+    "apps/link/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "apps/link/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "apps/link/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "apps/link/node_modules/eslint": {
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
+      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
+        "@humanwhocodes/config-array": "^0.11.10",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.0",
+        "eslint-visitor-keys": "^3.4.1",
+        "espree": "^9.6.0",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "apps/link/node_modules/eslint-config-next": {
       "version": "13.4.5",
       "dev": true,
@@ -1006,6 +1359,34 @@
         }
       }
     },
+    "apps/link/node_modules/eslint-scope": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.1.tgz",
+      "integrity": "sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "apps/link/node_modules/eslint-visitor-keys": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
+      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "apps/link/node_modules/find-cache-dir": {
       "version": "4.0.0",
       "dev": true,
@@ -1021,6 +1402,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "apps/link/node_modules/globals": {
+      "version": "13.20.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/link/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "apps/link/node_modules/locate-path": {
       "version": "7.2.0",
       "dev": true,
@@ -1048,6 +1453,56 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "apps/link/node_modules/next": {
+      "version": "13.4.10",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.10.tgz",
+      "integrity": "sha512-4ep6aKxVTQ7rkUW2fBLhpBr/5oceCuf4KmlUpvG/aXuDTIf9mexNSpabUD6RWPspu6wiJJvozZREhXhueYO36A==",
+      "dependencies": {
+        "@next/env": "13.4.10",
+        "@swc/helpers": "0.5.1",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001406",
+        "postcss": "8.4.14",
+        "styled-jsx": "5.1.1",
+        "watchpack": "2.4.0",
+        "zod": "3.21.4"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=16.8.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "13.4.10",
+        "@next/swc-darwin-x64": "13.4.10",
+        "@next/swc-linux-arm64-gnu": "13.4.10",
+        "@next/swc-linux-arm64-musl": "13.4.10",
+        "@next/swc-linux-x64-gnu": "13.4.10",
+        "@next/swc-linux-x64-musl": "13.4.10",
+        "@next/swc-win32-arm64-msvc": "13.4.10",
+        "@next/swc-win32-ia32-msvc": "13.4.10",
+        "@next/swc-win32-x64-msvc": "13.4.10"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "fibers": ">= 3.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "fibers": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
     "apps/link/node_modules/p-limit": {
       "version": "4.0.0",
       "dev": true,
@@ -1128,6 +1583,27 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "apps/link/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "apps/link/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "apps/link/node_modules/swr": {
       "version": "2.2.0",
       "license": "MIT",
@@ -1138,6 +1614,38 @@
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "apps/link/node_modules/tss-react": {
+      "version": "4.8.8",
+      "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.8.8.tgz",
+      "integrity": "sha512-V57AU6J42LLhYhRGSxDVi9VLUaoQtV6y2Kb1e0uqabe3w61G9R8gkUiX4DHZUReboRY9rwExPWz0LVZIgqQ98Q==",
+      "dependencies": {
+        "@emotion/cache": "*",
+        "@emotion/serialize": "*",
+        "@emotion/utils": "*"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/server": "^11.4.0",
+        "react": "^16.8.0 || ^17.0.2 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/server": {
+          "optional": true
+        }
+      }
+    },
+    "apps/link/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "apps/link/node_modules/yocto-queue": {
       "version": "1.0.0",
       "dev": true,
@@ -16144,6 +16652,34 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/mui-chips-input": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mui-chips-input/-/mui-chips-input-2.0.2.tgz",
+      "integrity": "sha512-1k1Er7GnFhOC4oz733Tcg0lrhm/Kh0Cd/6NabJQ/mhrk9Xz9SkndL+Zfb43bkvDXHVYiHTuFgF0wA2ya86gTqQ==",
+      "dependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/icons-material": "^5.0.0",
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/multipipe": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",