From 6a0cc58f603e717cdc44603b6b3d8c740ba7013b Mon Sep 17 00:00:00 2001
From: Darren Clarke <darren@redaranj.com>
Date: Wed, 14 Dec 2022 13:24:50 +0100
Subject: [PATCH] UI updates continued

---
 .gitignore                                    |   1 +
 components/Layout.tsx                         |   2 +-
 components/Sidebar.tsx                        | 553 +++++++++++++-----
 components/TicketDetail.tsx                   |  79 +++
 components/TicketEdit.tsx                     |  75 +++
 components/ZammadWrapper.tsx                  |   3 +
 next.config.js                                |  10 +-
 package-lock.json                             | 443 +++++++++-----
 package.json                                  |  18 +-
 pages/admin/label-studio.tsx                  |  30 +
 pages/admin/metamigo.tsx                      |  30 +
 pages/{settings.tsx => admin/zammad.tsx}      |   0
 pages/leafcutter/about.tsx                    |  36 ++
 pages/leafcutter/create.tsx                   |  36 ++
 pages/leafcutter/faq.tsx                      |  36 ++
 .../{leafcutter.tsx => leafcutter/index.tsx}  |   0
 pages/leafcutter/trends.tsx                   |  36 ++
 pages/tickets/[...id].tsx                     |  54 ++
 pages/{ => tickets}/assigned.tsx              |   0
 pages/{ => tickets}/pending.tsx               |   0
 pages/{ => tickets}/unassigned.tsx            |   0
 pages/{ => tickets}/urgent.tsx                |   0
 public/link-logo-small.png                    | Bin 0 -> 4668 bytes
 styles/global.css                             |  73 +++
 24 files changed, 1209 insertions(+), 306 deletions(-)
 create mode 100644 components/TicketDetail.tsx
 create mode 100644 components/TicketEdit.tsx
 create mode 100644 pages/admin/label-studio.tsx
 create mode 100644 pages/admin/metamigo.tsx
 rename pages/{settings.tsx => admin/zammad.tsx} (100%)
 create mode 100644 pages/leafcutter/about.tsx
 create mode 100644 pages/leafcutter/create.tsx
 create mode 100644 pages/leafcutter/faq.tsx
 rename pages/{leafcutter.tsx => leafcutter/index.tsx} (100%)
 create mode 100644 pages/leafcutter/trends.tsx
 create mode 100644 pages/tickets/[...id].tsx
 rename pages/{ => tickets}/assigned.tsx (100%)
 rename pages/{ => tickets}/pending.tsx (100%)
 rename pages/{ => tickets}/unassigned.tsx (100%)
 rename pages/{ => tickets}/urgent.tsx (100%)
 create mode 100644 public/link-logo-small.png

diff --git a/.gitignore b/.gitignore
index 0ccc6d5..dfb5312 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .env
+.env.local
 .next
 node_modules
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 2118178..111227f 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -4,7 +4,7 @@ import { Sidebar } from "./Sidebar";
 export const Layout = ({ children }) => (
   <Grid container direction="row">
     <Sidebar open />
-    <Grid item sx={{ ml: "300px", width: "100%", height: "100vh" }}>
+    <Grid item sx={{ ml: "270px", width: "100%", height: "100vh" }}>
       {children}
     </Grid>
   </Grid>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index cdaa9bd..8654f80 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,16 +1,15 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import {
   Box,
   Grid,
   Typography,
   List,
-  ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
+  ListItemSecondaryAction,
   Drawer,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
+  Collapse,
 } from "@mui/material";
 import {
   FeaturedPlayList as FeaturedPlayListIcon,
@@ -20,53 +19,119 @@ import {
   Cottage as CottageIcon,
   Settings as SettingsIcon,
 } from "@mui/icons-material";
+import { useRouter } from "next/router";
 import Link from "next/link";
+import Image from "next/image";
+import LinkLogo from "public/link-logo-small.png";
 
-const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
-  <Link href={href} passHref>
-    <ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
-      <ListItemIcon
-        sx={{
-          color: `white`,
-        }}
-      >
-        <Box
+const openWidth = 270;
+const closedWidth = 100;
+
+const MenuItem = ({
+  name,
+  href,
+  Icon,
+  iconSize,
+  inset = false,
+  selected = false,
+  badge,
+}: any) => (
+  <Link href={href}>
+    <ListItemButton
+      sx={{ p: 0, mb: 1, bl: iconSize === 0 ? "1px solid white" : "inherit" }}
+      selected={selected}
+    >
+      {iconSize > 0 ? (
+        <ListItemIcon
           sx={{
-            width: iconSize,
-            height: iconSize,
-            mr: 0.5,
+            color: `white`,
+            minWidth: 0,
+            mr: 2,
           }}
         >
-          {iconSize > 0 && <Icon />}
+          <Box
+            sx={{
+              width: iconSize,
+              height: iconSize,
+              mr: 0.5,
+              mt: "-4px",
+            }}
+          >
+            <Icon />
+          </Box>
+        </ListItemIcon>
+      ) : (
+        <Box
+          sx={{
+            width: 30,
+            height: "28px",
+            position: "relative",
+            ml: "9px",
+            mr: "1px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "1px",
+              height: "56px",
+              backgroundColor: "white",
+              position: "absolute",
+              left: "3px",
+              top: "-10px",
+            }}
+          />
+          <Box
+            sx={{
+              width: "42px",
+              height: "42px",
+              position: "absolute",
+              top: "-27px",
+              left: "3px",
+              border: "solid 1px #fff",
+              borderColor: "transparent transparent transparent #fff",
+              borderRadius: "60px",
+              rotate: "-35deg",
+            }}
+          />
         </Box>
-
-        <ListItemText
-          primary={
-            <Typography
-              variant="body1"
-              sx={{
-                color: "#fff !important",
-                fontSize: 14,
-                fontFamily: "Roboto",
-                fontWeight: 400,
-                marginLeft: "12px",
-                marginTop: "-1px",
-                textDecoration: "none !important",
-                ">a": {
-                  textDecoration: "none !important",
-                },
-                "a:visited": {
-                  textDecoration: "none !important",
-                },
-                border: 0,
-              }}
-            >
-              {name}
-            </Typography>
-          }
-        />
-      </ListItemIcon>
-    </ListItem>
+      )}
+      <ListItemText
+        inset={inset}
+        primary={
+          <Typography
+            variant="body1"
+            sx={{
+              fontSize: 16,
+              fontFamily: "Roboto",
+              fontWeight: "bold",
+              border: 0,
+              textAlign: "left",
+            }}
+          >
+            {name}
+          </Typography>
+        }
+      />
+      {badge && (
+        <ListItemSecondaryAction>
+          <Typography
+            color="textSecondary"
+            variant="body1"
+            className="badge"
+            sx={{
+              backgroundColor: "#FFB620",
+              color: "black !important",
+              borderRadius: 10,
+              px: 1,
+              fontSize: 12,
+              fontWeight: "bold",
+            }}
+          >
+            {badge}
+          </Typography>
+        </ListItemSecondaryAction>
+      )}
+    </ListItemButton>
   </Link>
 );
 
@@ -74,115 +139,299 @@ interface SidebarProps {
   open: boolean;
 }
 
-export const Sidebar: FC<SidebarProps> = ({ open }) => (
-  <Drawer
-    sx={{ width: 300, flexShrink: 0 }}
-    variant="permanent"
-    anchor="left"
-    open={open}
-    PaperProps={{
-      sx: {
-        width: 300,
-        border: 0,
-      },
-    }}
-  >
-    <Grid
-      container
-      direction="column"
-      justifyContent="space-between"
-      wrap="nowrap"
-      sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
+export const Sidebar: FC<SidebarProps> = ({ open }) => {
+  const { pathname } = useRouter();
+  console.log({ pathname });
+  return (
+    <Drawer
+      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
+      variant="permanent"
+      anchor="left"
+      open={open}
+      PaperProps={{
+        sx: {
+          width: open ? openWidth : closedWidth,
+          border: 0,
+        },
+      }}
     >
-      <Grid item>
-        <Typography variant="h6" sx={{ fontSize: 12, color: "white" }}>
-          Hello
-        </Typography>
-      </Grid>
-      <Grid item>
-        <Typography variant="h2" sx={{ fontSize: 22, color: "white", mb: 1.5 }}>
-          Agent/User
-        </Typography>
-      </Grid>
-      <Grid item>
-        <Box sx={{ height: 1.5, width: "100%", backgroundColor: "white" }} />
-      </Grid>
-      <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
-        <List component="nav">
-          <MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
-          <Accordion
+      <Grid
+        container
+        direction="column"
+        justifyContent="space-between"
+        wrap="nowrap"
+        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
+      >
+        <Grid item container>
+          <Grid item>
+            <Box sx={{ width: "40px", height: "40px" }}>
+              <Image
+                src={LinkLogo}
+                alt="Link logo"
+                width={40}
+                height={40}
+                style={{
+                  objectFit: "cover",
+                  filter: "grayscale(100) brightness(100)",
+                }}
+              />
+            </Box>
+            .
+          </Grid>
+          <Grid item>
+            <Typography
+              variant="h2"
+              sx={{
+                fontSize: 26,
+                color: "white",
+                fontWeight: 700,
+                mt: 1,
+                ml: 0.5,
+                fontFamily: "Poppins",
+              }}
+            >
+              CDR Link
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid item>
+          <Box
             sx={{
-              backgroundColor: "#25272A",
-              border: 0,
-              m: 0,
-              p: 0,
-              boxShadow: "none",
-              mt: -1,
-              mb: -1,
+              height: "0.5px",
+              width: "100%",
+              backgroundColor: "#666",
+              mb: 1,
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <Typography
+            variant="h6"
+            sx={{ fontSize: 12, color: "#999", fontWeight: "bold" }}
+          >
+            Hello
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography
+            variant="h2"
+            sx={{ fontSize: 22, color: "white", mb: 1.5, fontWeight: "bold" }}
+          >
+            Nicholas
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{ height: "0.5px", width: "100%", backgroundColor: "#666" }}
+          />
+        </Grid>
+        <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
+          <List
+            component="nav"
+            sx={{
+              a: {
+                textDecoration: "none",
+
+                ".MuiListItemButton-root": {
+                  p: 1,
+                  borderRadius: 2,
+                  "&:hover": {
+                    background: "#555",
+                  },
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#999 !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+                ".Mui-selected": {
+                  background: "#444",
+                  color: "#fff !important",
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#fff !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+              },
             }}
           >
-            <AccordionSummary sx={{ p: 0, m: 0 }}>
-              <MenuItem
-                name="My tickets"
-                href="/assigned"
-                Icon={FeaturedPlayListIcon}
-                iconSize={20}
-              />
-            </AccordionSummary>
-            <AccordionDetails sx={{ p: 0, mt: -2, ml: "20px" }}>
-              <MenuItem
-                name="Assigned"
-                href="/assigned"
-                Icon={FeaturedPlayListIcon}
-                iconSize={0}
-              />
-              <MenuItem
-                name="Urgent"
-                href="/urgent"
-                Icon={FeaturedPlayListIcon}
-                iconSize={0}
-              />
-              <MenuItem
-                name="Pending"
-                href="/pending"
-                Icon={FeaturedPlayListIcon}
-                iconSize={0}
-              />
-              <MenuItem
-                name="Unassigned"
-                href="/unassigned"
-                Icon={FeaturedPlayListIcon}
-                iconSize={0}
-              />
-            </AccordionDetails>
-          </Accordion>
+            <MenuItem
+              name="Home"
+              href="/"
+              Icon={CottageIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/")}
+            />
+            <MenuItem
+              name="Tickets"
+              href="/tickets/assigned"
+              Icon={FeaturedPlayListIcon}
+              selected={pathname.startsWith("/tickets")}
+              iconSize={20}
+            />
 
-          <MenuItem
-            name="Leafcutter"
-            href="/leafcutter"
-            Icon={AnalyticsIcon}
-            iconSize={20}
-          />
-          <MenuItem
-            name="Profile"
-            href="/profile"
-            Icon={PersonIcon}
-            iconSize={20}
-          />
-          <MenuItem
-            name="Settings"
-            href="/settings"
-            Icon={SettingsIcon}
-            iconSize={20}
-          />
-          <MenuItem
-            name="Logout"
-            href="/logout"
-            Icon={LogoutIcon}
-            iconSize={20}
-          />
-        </List>
+            <Collapse
+              in={pathname.startsWith("/tickets")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Assigned"
+                  href="/tickets/assigned"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/assigned")}
+                  badge={3}
+                />
+                <MenuItem
+                  name="Urgent"
+                  href="/tickets/urgent"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/urgent")}
+                  badge={1}
+                />
+                <MenuItem
+                  name="Pending"
+                  href="/tickets/pending"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/pending")}
+                  badge={9}
+                />
+                <MenuItem
+                  name="Unassigned"
+                  href="/tickets/unassigned"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/unnassigned")}
+                  badge={27}
+                />
+                <MenuItem
+                  name="New Ticket UI"
+                  href="/tickets/181"
+                  Icon={SettingsIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/181")}
+                />
+              </List>
+            </Collapse>
+
+            <MenuItem
+              name="Leafcutter"
+              href="/leafcutter"
+              Icon={AnalyticsIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/leafcutter")}
+            />
+            <Collapse
+              in={pathname.startsWith("/leafcutter")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Dashboard"
+                  href="/leafcutter"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter")}
+                />
+
+                <MenuItem
+                  name="Search and Create"
+                  href="/leafcutter/create"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/create")}
+                />
+
+                <MenuItem
+                  name="Trends"
+                  href="/leafcutter/trends"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/trends")}
+                />
+
+                <MenuItem
+                  name="FAQ"
+                  href="/leafcutter/faq"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/faq")}
+                />
+
+                <MenuItem
+                  name="About"
+                  href="/leafcutter/about"
+                  Icon={AnalyticsIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/about")}
+                />
+              </List>
+            </Collapse>
+            <MenuItem
+              name="Profile"
+              href="/profile"
+              Icon={PersonIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/profile")}
+            />
+            <MenuItem
+              name="Admin"
+              href="/admin/zammad"
+              Icon={SettingsIcon}
+              iconSize={20}
+            />
+            <Collapse
+              in={pathname.startsWith("/admin/")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Zammad Settings"
+                  href="/admin/zammad"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/zammad")}
+                />
+                <MenuItem
+                  name="Metamigo"
+                  href="/admin/metamigo"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/metamigo")}
+                />
+                <MenuItem
+                  name="Label Studio"
+                  href="/admin/label-studio"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/label-studio")}
+                />
+              </List>
+            </Collapse>
+
+            <MenuItem
+              name="Logout"
+              href="/logout"
+              Icon={LogoutIcon}
+              iconSize={20}
+            />
+          </List>
+        </Grid>
       </Grid>
-    </Grid>
-  </Drawer>
-);
+    </Drawer>
+  );
+};
diff --git a/components/TicketDetail.tsx b/components/TicketDetail.tsx
new file mode 100644
index 0000000..db8f2fd
--- /dev/null
+++ b/components/TicketDetail.tsx
@@ -0,0 +1,79 @@
+import { FC, useEffect } from "react";
+import { Grid, Box, Typography } from "@mui/material";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  MessageInput,
+  Conversation,
+  ConversationHeader,
+} from "@chatscope/chat-ui-kit-react";
+
+interface TicketDetailProps {
+  ticket: any;
+  articles: any[];
+}
+
+export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
+  console.log({ here: "here", ticket });
+  return (
+    <MainContainer>
+      <ChatContainer>
+        <ConversationHeader>
+          <ConversationHeader.Content>
+            <Box
+              sx={{
+                width: "100%",
+
+                textAlign: "center",
+                fontWeight: "bold",
+              }}
+            >
+              <Typography
+                variant="h5"
+                sx={{ fontFamily: "Poppins", fontWeight: 700 }}
+              >
+                {ticket.title}
+              </Typography>
+              <Typography
+                variant="h6"
+                sx={{ fontFamily: "Roboto", fontWeight: 400 }}
+              >{`Ticket #${ticket.number} (created ${new Date(
+                ticket.created_at
+              ).toLocaleDateString()})`}</Typography>
+            </Box>
+          </ConversationHeader.Content>
+        </ConversationHeader>
+        <MessageList>
+          {articles.map((article: any) => (
+            <Message
+              className={
+                article.internal
+                  ? "internal-note"
+                  : article.sender === "Agent"
+                  ? "outgoing-message"
+                  : "incoming-message"
+              }
+              model={{
+                message: article.body.replace(/<div>*<br>*<div>/g, ""),
+                sentTime: article.updated_at,
+                sender: article.from,
+                direction: article.sender === "Agent" ? "outgoing" : "incoming",
+                position: "last",
+                type: "html",
+              }}
+            />
+          ))}
+        </MessageList>
+        {/* <MessageInput
+          placeholder="Type message here"
+          sendOnReturnDisabled
+          attachButton={false}
+          sendButton={false}
+            /> */}
+      </ChatContainer>
+    </MainContainer>
+  );
+};
diff --git a/components/TicketEdit.tsx b/components/TicketEdit.tsx
new file mode 100644
index 0000000..a59d19d
--- /dev/null
+++ b/components/TicketEdit.tsx
@@ -0,0 +1,75 @@
+import { FC, useEffect } from "react";
+import { Grid, Box, Typography, TextField } from "@mui/material";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  MessageInput,
+  Conversation,
+  ConversationHeader,
+} from "@chatscope/chat-ui-kit-react";
+
+interface TicketEditProps {
+  ticket: any;
+}
+
+export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
+  return (
+    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+      <Grid container direction="column" spacing={3}>
+        <Grid item>
+          <TextField
+            label="Group"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Owner"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="State"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Priority"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Tags"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
diff --git a/components/ZammadWrapper.tsx b/components/ZammadWrapper.tsx
index edaec8d..db5c08e 100644
--- a/components/ZammadWrapper.tsx
+++ b/components/ZammadWrapper.tsx
@@ -29,6 +29,9 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
           // @ts-ignore
           linkElement.contentDocument.querySelector("#navigation").style =
             "display: none";
+          // @ts-ignore
+          linkElement.contentDocument.querySelector("body").style =
+            "font-family: Arial";
 
           if (hideSidebar) {
             // @ts-ignore
diff --git a/next.config.js b/next.config.js
index c160bd0..0187de3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,7 +3,15 @@ module.exports = {
     locales: ["en", "fr"],
     defaultLocale: "en",
   },
-
+  async redirects() {
+    return [
+      {
+        source: "/zammad#ticket/zoom/:path*",
+        destination: "/ticket/:path*",
+        permanent: true,
+      },
+    ];
+  },
   rewrites: async () => ({
     fallback: [
       {
diff --git a/package-lock.json b/package-lock.json
index 78e93a3..baad371 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "link-shell",
       "version": "0.0.1",
       "dependencies": {
+        "@chatscope/chat-ui-kit-react": "^1.9.8",
+        "@chatscope/chat-ui-kit-styles": "^1.4.0",
         "@emotion/cache": "^11.10.5",
         "@emotion/react": "^11.10.5",
         "@emotion/server": "^11.10.0",
@@ -16,28 +18,28 @@
         "@fontsource/poppins": "^4.5.10",
         "@fontsource/roboto": "^4.5.8",
         "@mui/icons-material": "^5",
-        "@mui/lab": "^5.0.0-alpha.110",
+        "@mui/lab": "^5.0.0-alpha.112",
         "@mui/material": "^5",
-        "@mui/x-data-grid-pro": "^5.17.14",
-        "@mui/x-date-pickers-pro": "^5.0.9",
+        "@mui/x-data-grid-pro": "^5.17.15",
+        "@mui/x-date-pickers-pro": "^5.0.10",
         "date-fns": "^2.29.3",
         "http-proxy-middleware": "^2.0.6",
-        "material-ui-popup-state": "^4.1.0",
+        "material-ui-popup-state": "^5.0.3",
         "next": "^13.0",
-        "next-auth": "^4.17.0",
+        "next-auth": "^4.18.6",
         "next-http-proxy-middleware": "^1.2.5",
         "react": "^18",
         "react-dom": "^18",
         "react-iframe": "^1.8.5",
         "react-polyglot": "^0.7.2",
-        "swr": "^1.3.0"
+        "swr": "^2.0.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.5",
         "@types/react": "^18",
         "@types/uuid": "^9.0.0",
         "babel-loader": "^9.1.0",
-        "eslint": "^8.28.0",
+        "eslint": "^8.29.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-next": "^13.0.6",
         "eslint-config-prettier": "^8.5.0",
@@ -45,7 +47,7 @@
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.31.11",
-        "typescript": "^4.9.3"
+        "typescript": "^4.9.4"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -317,9 +319,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.5.tgz",
-      "integrity": "sha512-+4k537wJj1TFJnGfT3gHR5gz5os0XUVYebg4Utdq0KtIxJqiWHtHSSivHBIMFR5Bt0uojHXJKExtKbOywqDtFg==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -386,6 +388,30 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chatscope/chat-ui-kit-react": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@chatscope/chat-ui-kit-react/-/chat-ui-kit-react-1.9.8.tgz",
+      "integrity": "sha512-CLcZfSLORUATQEB4IeM75bp7e8v5dpJbggIHG0WrUEWHbQ/E6eI77kFZXqQT4bI00gMOevifqavScutaLZqcxQ==",
+      "dependencies": {
+        "@chatscope/chat-ui-kit-styles": "^1.2.0",
+        "@fortawesome/fontawesome-free": "^5.12.1",
+        "@fortawesome/fontawesome-svg-core": "^1.2.26",
+        "@fortawesome/free-solid-svg-icons": "^5.12.0",
+        "@fortawesome/react-fontawesome": "^0.1.8",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.12.0 || ^17.0.0 || ^18.2.0",
+        "react-dom": "^16.12.0 || ^17.0.0 || ^18.2.0"
+      }
+    },
+    "node_modules/@chatscope/chat-ui-kit-styles": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@chatscope/chat-ui-kit-styles/-/chat-ui-kit-styles-1.4.0.tgz",
+      "integrity": "sha512-016mBJD3DESw7Nh+lkKcPd22xG92ghA0VpIXIbjQtmXhC7Ve6wRazTy8z1Ahut+Tbv179+JxrftuMngsj/yV8Q=="
+    },
     "node_modules/@date-io/core": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
@@ -672,6 +698,60 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
       "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -840,15 +920,15 @@
       }
     },
     "node_modules/@mui/lab": {
-      "version": "5.0.0-alpha.110",
-      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.110.tgz",
-      "integrity": "sha512-SkX5QNbaWouO7BXvb8zpFzDizLt7UzgaebqKSvFJLF28OXiNDfPVCle6IIB4g7hAyb/o19Kbhxs9V+LwK5gQzA==",
+      "version": "5.0.0-alpha.112",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.112.tgz",
+      "integrity": "sha512-XKxxUevHup9l9THXWhPcWxm8LZj+E8KDOz6cWqXOnXfSZwFYsvK/nB2R4PCiy/wobURk/+qxIAzryBA9pnSk2g==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/base": "5.0.0-alpha.108",
-        "@mui/system": "^5.10.16",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/base": "5.0.0-alpha.110",
+        "@mui/system": "^5.11.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.0",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
@@ -881,14 +961,14 @@
       }
     },
     "node_modules/@mui/lab/node_modules/@mui/base": {
-      "version": "5.0.0-alpha.108",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz",
-      "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==",
+      "version": "5.0.0-alpha.110",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.110.tgz",
+      "integrity": "sha512-q4TH9T3sTBknTXXTEf2zO8F3nbHg5iGgiaRx9XErTbXvHrmLrQXbQ4hmrLERocSTBFCFWkKyne/qZj0diWlPtA==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.20.6",
         "@emotion/is-prop-valid": "^1.2.0",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.0",
         "@popperjs/core": "^2.11.6",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -957,12 +1037,12 @@
       }
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
-      "integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.0.tgz",
+      "integrity": "sha512-UFQLb9x5Sj4pg2GhhCGw3Ls/y1Hw/tz9RsBrULvUF0Vgps1z19o7XTq2xqUvp7pN7fJTW7eVIT2gwVg2xlk8PQ==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/utils": "^5.11.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -983,11 +1063,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.16.tgz",
-      "integrity": "sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
+      "integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.20.6",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -1014,15 +1094,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz",
-      "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.0.tgz",
+      "integrity": "sha512-HFUT7Dlmyq6Wfuxsw8QBXZxXDYIQQaJ4YHaZd7s+nDMcjerLnILxjh2g3a6umtOUM+jEcRaFJAtvLZvlGfa5fw==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/private-theming": "^5.10.16",
-        "@mui/styled-engine": "^5.10.16",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/private-theming": "^5.11.0",
+        "@mui/styled-engine": "^5.11.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.0",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -1053,9 +1133,9 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
-      "integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
+      "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==",
       "peerDependencies": {
         "@types/react": "*"
       },
@@ -1066,11 +1146,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
-      "integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.0.tgz",
+      "integrity": "sha512-DP/YDaVVCVzJpZ5FFPLKNmaJkeaYRviTyIZkL/D5/FmPXQiA6ecd6z0/+VwoNQtp7aXAQWaRhvz4FM25yqFlHA==",
       "dependencies": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.20.6",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -1113,9 +1193,9 @@
       }
     },
     "node_modules/@mui/x-data-grid-pro": {
-      "version": "5.17.14",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-5.17.14.tgz",
-      "integrity": "sha512-POIj/FUurNVv18QePgZ7sUoUQyjdtL0MR3aonXKYIfrTBvSAJ08Vv5GspMX0QcKWjS2eN19MhrYV79ayuvFDUA==",
+      "version": "5.17.15",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-5.17.15.tgz",
+      "integrity": "sha512-pNa+C5y+fHZW/7fxoVmYhOun1KN5j8ahCrpwlt3Sl4P/GHOb7EpleufQTZvr2kwmBDn0G0JjSYCH9BhZC1Ohew==",
       "dependencies": {
         "@babel/runtime": "^7.18.9",
         "@mui/utils": "^5.10.3",
@@ -1137,9 +1217,9 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.9.tgz",
-      "integrity": "sha512-PM3RU8MiwDVi+dSDGJ7ylI0hCe79wSCDfrjghS8ApGGFn/n87S8pUZxsZ5czw3mVRN6VfS2C19peo4nM1Tx+nA==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.10.tgz",
+      "integrity": "sha512-k+SKBqlpYsY49JVs7PORDvnfoXw9nJELfImR/3jTgHqP8hQQ6loFjB9ZFvc5NjV4Jf2NIJFmdcp6g8cO31Wmbg==",
       "dependencies": {
         "@babel/runtime": "^7.18.9",
         "@date-io/core": "^2.15.0",
@@ -1195,9 +1275,9 @@
       }
     },
     "node_modules/@mui/x-date-pickers-pro": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-5.0.9.tgz",
-      "integrity": "sha512-7Sn3vb8OmCIYpNSSplH8qRoRgyYUEJBM9VWqpxRuZNQIjMAAZa571quLDMf+8DPVNB5RW+wf6Xl8tY3Vwnq3dA==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-5.0.10.tgz",
+      "integrity": "sha512-104x0+P8RrtI7/cL+3Z6V7uo4KouuzlLKM2e24fxiOf1/BFxQ0QgA6hkBlQnSeOZhZdHKzHXjbjrmYoMAyIkxw==",
       "dependencies": {
         "@babel/runtime": "^7.18.9",
         "@date-io/date-fns": "^2.15.0",
@@ -1205,7 +1285,7 @@
         "@date-io/luxon": "^2.15.0",
         "@date-io/moment": "^2.15.0",
         "@mui/utils": "^5.10.3",
-        "@mui/x-date-pickers": "5.0.9",
+        "@mui/x-date-pickers": "5.0.10",
         "@mui/x-license-pro": "5.17.12",
         "clsx": "^1.2.1",
         "prop-types": "^15.7.2",
@@ -2739,9 +2819,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.3",
@@ -4353,17 +4433,17 @@
       }
     },
     "node_modules/material-ui-popup-state": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-4.1.0.tgz",
-      "integrity": "sha512-YAxLT10XALsUuuo46sc81NKD6oKJzlkcKP3e+IqC0pKwzAhOAZIQ+RUHXT6Mz3bXHKoHCsM+NdIQxR4mOH/KEQ==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.3.tgz",
+      "integrity": "sha512-AdlAEDmOAQ3BZMnNfyKD5CL+aNMb8zd5tDZWG5Ykx3vcuPbaL6SPjJ5kWuWXrJvapL9I8wwxaYhV4gt3tZmyOA==",
       "dependencies": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.20.6",
         "@mui/material": "^5.0.0",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/merge-stream": {
@@ -4527,9 +4607,9 @@
       }
     },
     "node_modules/next-auth": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.17.0.tgz",
-      "integrity": "sha512-aN2tdnjS0MDeUpB2tBDOaWnegkgeMWrsccujbXRGMJ607b+EwRcy63MFGSr0OAboDJEe0902piXQkt94GqF8Qw==",
+      "version": "4.18.6",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.18.6.tgz",
+      "integrity": "sha512-0TQwbq5X9Jyd1wUVYUoyvHJh4JWXeW9UOcMEl245Er/Y5vsSbyGJHt8M7xjRMzk9mORVMYehoMdERgyiq/jCgA==",
       "dependencies": {
         "@babel/runtime": "^7.16.3",
         "@panva/hkdf": "^1.0.1",
@@ -5656,9 +5736,15 @@
       }
     },
     "node_modules/swr": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.0.tgz",
+      "integrity": "sha512-IhUx5yPkX+Fut3h0SqZycnaNLXLXsb2ECFq0Y29cxnK7d8r7auY2JWNbCW3IX+EqXUg3rwNJFlhrw5Ye/b6k7w==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "engines": {
+        "pnpm": "7"
+      },
       "peerDependencies": {
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
@@ -5885,9 +5971,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -5945,6 +6031,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6362,9 +6456,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.5.tgz",
-      "integrity": "sha512-+4k537wJj1TFJnGfT3gHR5gz5os0XUVYebg4Utdq0KtIxJqiWHtHSSivHBIMFR5Bt0uojHXJKExtKbOywqDtFg==",
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
+      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -6416,6 +6510,25 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@chatscope/chat-ui-kit-react": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@chatscope/chat-ui-kit-react/-/chat-ui-kit-react-1.9.8.tgz",
+      "integrity": "sha512-CLcZfSLORUATQEB4IeM75bp7e8v5dpJbggIHG0WrUEWHbQ/E6eI77kFZXqQT4bI00gMOevifqavScutaLZqcxQ==",
+      "requires": {
+        "@chatscope/chat-ui-kit-styles": "^1.2.0",
+        "@fortawesome/fontawesome-free": "^5.12.1",
+        "@fortawesome/fontawesome-svg-core": "^1.2.26",
+        "@fortawesome/free-solid-svg-icons": "^5.12.0",
+        "@fortawesome/react-fontawesome": "^0.1.8",
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@chatscope/chat-ui-kit-styles": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@chatscope/chat-ui-kit-styles/-/chat-ui-kit-styles-1.4.0.tgz",
+      "integrity": "sha512-016mBJD3DESw7Nh+lkKcPd22xG92ghA0VpIXIbjQtmXhC7Ve6wRazTy8z1Ahut+Tbv179+JxrftuMngsj/yV8Q=="
+    },
     "@date-io/core": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz",
@@ -6622,6 +6735,40 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-4.5.8.tgz",
       "integrity": "sha512-CnD7zLItIzt86q4Sj3kZUiLcBk1dSk81qcqgMGaZe7SQ1P8hFNxhMl5AZthK1zrDM5m74VVhaOpuMGIL4gagaA=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+      "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+    },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.36",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+      "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -6732,29 +6879,29 @@
       }
     },
     "@mui/lab": {
-      "version": "5.0.0-alpha.110",
-      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.110.tgz",
-      "integrity": "sha512-SkX5QNbaWouO7BXvb8zpFzDizLt7UzgaebqKSvFJLF28OXiNDfPVCle6IIB4g7hAyb/o19Kbhxs9V+LwK5gQzA==",
+      "version": "5.0.0-alpha.112",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.112.tgz",
+      "integrity": "sha512-XKxxUevHup9l9THXWhPcWxm8LZj+E8KDOz6cWqXOnXfSZwFYsvK/nB2R4PCiy/wobURk/+qxIAzryBA9pnSk2g==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/base": "5.0.0-alpha.108",
-        "@mui/system": "^5.10.16",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/base": "5.0.0-alpha.110",
+        "@mui/system": "^5.11.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.0",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.2.0"
       },
       "dependencies": {
         "@mui/base": {
-          "version": "5.0.0-alpha.108",
-          "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.108.tgz",
-          "integrity": "sha512-KjzRUts2i/ODlMfywhFTqTzQl+Cr9nlDSZxJcnYjrbOV/iRyQNBTDoiFJt+XEdRi0fZBHnk74AFbnP56ehybsA==",
+          "version": "5.0.0-alpha.110",
+          "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.110.tgz",
+          "integrity": "sha512-q4TH9T3sTBknTXXTEf2zO8F3nbHg5iGgiaRx9XErTbXvHrmLrQXbQ4hmrLERocSTBFCFWkKyne/qZj0diWlPtA==",
           "requires": {
-            "@babel/runtime": "^7.20.1",
+            "@babel/runtime": "^7.20.6",
             "@emotion/is-prop-valid": "^1.2.0",
-            "@mui/types": "^7.2.2",
-            "@mui/utils": "^5.10.16",
+            "@mui/types": "^7.2.3",
+            "@mui/utils": "^5.11.0",
             "@popperjs/core": "^2.11.6",
             "clsx": "^1.2.1",
             "prop-types": "^15.8.1",
@@ -6783,53 +6930,53 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
-      "integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.0.tgz",
+      "integrity": "sha512-UFQLb9x5Sj4pg2GhhCGw3Ls/y1Hw/tz9RsBrULvUF0Vgps1z19o7XTq2xqUvp7pN7fJTW7eVIT2gwVg2xlk8PQ==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/utils": "^5.11.0",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.16.tgz",
-      "integrity": "sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
+      "integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.20.6",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/system": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz",
-      "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.0.tgz",
+      "integrity": "sha512-HFUT7Dlmyq6Wfuxsw8QBXZxXDYIQQaJ4YHaZd7s+nDMcjerLnILxjh2g3a6umtOUM+jEcRaFJAtvLZvlGfa5fw==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/private-theming": "^5.10.16",
-        "@mui/styled-engine": "^5.10.16",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.20.6",
+        "@mui/private-theming": "^5.11.0",
+        "@mui/styled-engine": "^5.11.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.0",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/types": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
-      "integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA==",
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
+      "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==",
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
-      "integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
+      "version": "5.11.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.0.tgz",
+      "integrity": "sha512-DP/YDaVVCVzJpZ5FFPLKNmaJkeaYRviTyIZkL/D5/FmPXQiA6ecd6z0/+VwoNQtp7aXAQWaRhvz4FM25yqFlHA==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.20.6",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -6849,9 +6996,9 @@
       }
     },
     "@mui/x-data-grid-pro": {
-      "version": "5.17.14",
-      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-5.17.14.tgz",
-      "integrity": "sha512-POIj/FUurNVv18QePgZ7sUoUQyjdtL0MR3aonXKYIfrTBvSAJ08Vv5GspMX0QcKWjS2eN19MhrYV79ayuvFDUA==",
+      "version": "5.17.15",
+      "resolved": "https://registry.npmjs.org/@mui/x-data-grid-pro/-/x-data-grid-pro-5.17.15.tgz",
+      "integrity": "sha512-pNa+C5y+fHZW/7fxoVmYhOun1KN5j8ahCrpwlt3Sl4P/GHOb7EpleufQTZvr2kwmBDn0G0JjSYCH9BhZC1Ohew==",
       "requires": {
         "@babel/runtime": "^7.18.9",
         "@mui/utils": "^5.10.3",
@@ -6864,9 +7011,9 @@
       }
     },
     "@mui/x-date-pickers": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.9.tgz",
-      "integrity": "sha512-PM3RU8MiwDVi+dSDGJ7ylI0hCe79wSCDfrjghS8ApGGFn/n87S8pUZxsZ5czw3mVRN6VfS2C19peo4nM1Tx+nA==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.10.tgz",
+      "integrity": "sha512-k+SKBqlpYsY49JVs7PORDvnfoXw9nJELfImR/3jTgHqP8hQQ6loFjB9ZFvc5NjV4Jf2NIJFmdcp6g8cO31Wmbg==",
       "requires": {
         "@babel/runtime": "^7.18.9",
         "@date-io/core": "^2.15.0",
@@ -6883,9 +7030,9 @@
       }
     },
     "@mui/x-date-pickers-pro": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-5.0.9.tgz",
-      "integrity": "sha512-7Sn3vb8OmCIYpNSSplH8qRoRgyYUEJBM9VWqpxRuZNQIjMAAZa571quLDMf+8DPVNB5RW+wf6Xl8tY3Vwnq3dA==",
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers-pro/-/x-date-pickers-pro-5.0.10.tgz",
+      "integrity": "sha512-104x0+P8RrtI7/cL+3Z6V7uo4KouuzlLKM2e24fxiOf1/BFxQ0QgA6hkBlQnSeOZhZdHKzHXjbjrmYoMAyIkxw==",
       "requires": {
         "@babel/runtime": "^7.18.9",
         "@date-io/date-fns": "^2.15.0",
@@ -6893,7 +7040,7 @@
         "@date-io/luxon": "^2.15.0",
         "@date-io/moment": "^2.15.0",
         "@mui/utils": "^5.10.3",
-        "@mui/x-date-pickers": "5.0.9",
+        "@mui/x-date-pickers": "5.0.10",
         "@mui/x-license-pro": "5.17.12",
         "clsx": "^1.2.1",
         "prop-types": "^15.7.2",
@@ -8016,9 +8163,9 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
     "eslint": {
-      "version": "8.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.28.0.tgz",
-      "integrity": "sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==",
+      "version": "8.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.29.0.tgz",
+      "integrity": "sha512-isQ4EEiyUjZFbEKvEGJKKGBwXtvXX+zJbkVKCgTuB9t/+jUBcy8avhkEwWJecI15BkRkOYmvIM5ynbhRjEkoeg==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.3.3",
@@ -9179,11 +9326,11 @@
       }
     },
     "material-ui-popup-state": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-4.1.0.tgz",
-      "integrity": "sha512-YAxLT10XALsUuuo46sc81NKD6oKJzlkcKP3e+IqC0pKwzAhOAZIQ+RUHXT6Mz3bXHKoHCsM+NdIQxR4mOH/KEQ==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/material-ui-popup-state/-/material-ui-popup-state-5.0.3.tgz",
+      "integrity": "sha512-AdlAEDmOAQ3BZMnNfyKD5CL+aNMb8zd5tDZWG5Ykx3vcuPbaL6SPjJ5kWuWXrJvapL9I8wwxaYhV4gt3tZmyOA==",
       "requires": {
-        "@babel/runtime": "^7.12.5",
+        "@babel/runtime": "^7.20.6",
         "@mui/material": "^5.0.0",
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2"
@@ -9300,9 +9447,9 @@
       }
     },
     "next-auth": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.17.0.tgz",
-      "integrity": "sha512-aN2tdnjS0MDeUpB2tBDOaWnegkgeMWrsccujbXRGMJ607b+EwRcy63MFGSr0OAboDJEe0902piXQkt94GqF8Qw==",
+      "version": "4.18.6",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.18.6.tgz",
+      "integrity": "sha512-0TQwbq5X9Jyd1wUVYUoyvHJh4JWXeW9UOcMEl245Er/Y5vsSbyGJHt8M7xjRMzk9mORVMYehoMdERgyiq/jCgA==",
       "requires": {
         "@babel/runtime": "^7.16.3",
         "@panva/hkdf": "^1.0.1",
@@ -10085,10 +10232,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "swr": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
-      "requires": {}
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.0.0.tgz",
+      "integrity": "sha512-IhUx5yPkX+Fut3h0SqZycnaNLXLXsb2ECFq0Y29cxnK7d8r7auY2JWNbCW3IX+EqXUg3rwNJFlhrw5Ye/b6k7w==",
+      "requires": {
+        "use-sync-external-store": "^1.2.0"
+      }
     },
     "synckit": {
       "version": "0.8.4",
@@ -10251,9 +10400,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
       "dev": true
     },
     "unbox-primitive": {
@@ -10285,6 +10434,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 9a63b51..02d3439 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chatscope/chat-ui-kit-react": "^1.9.8",
+    "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
@@ -17,28 +19,28 @@
     "@fontsource/poppins": "^4.5.10",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5",
-    "@mui/lab": "^5.0.0-alpha.110",
+    "@mui/lab": "^5.0.0-alpha.112",
     "@mui/material": "^5",
-    "@mui/x-data-grid-pro": "^5.17.14",
-    "@mui/x-date-pickers-pro": "^5.0.9",
+    "@mui/x-data-grid-pro": "^5.17.15",
+    "@mui/x-date-pickers-pro": "^5.0.10",
     "date-fns": "^2.29.3",
     "http-proxy-middleware": "^2.0.6",
-    "material-ui-popup-state": "^4.1.0",
+    "material-ui-popup-state": "^5.0.3",
     "next": "^13.0",
-    "next-auth": "^4.17.0",
+    "next-auth": "^4.18.6",
     "next-http-proxy-middleware": "^1.2.5",
     "react": "^18",
     "react-dom": "^18",
     "react-iframe": "^1.8.5",
     "react-polyglot": "^0.7.2",
-    "swr": "^1.3.0"
+    "swr": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",
     "@types/react": "^18",
     "@types/uuid": "^9.0.0",
     "babel-loader": "^9.1.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-next": "^13.0.6",
     "eslint-config-prettier": "^8.5.0",
@@ -46,6 +48,6 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/pages/admin/label-studio.tsx b/pages/admin/label-studio.tsx
new file mode 100644
index 0000000..af98d2e
--- /dev/null
+++ b/pages/admin/label-studio.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Metamigo = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid item sx={{ height: "100vh", width: "100%" }}>
+        <Iframe
+          id="link"
+          url={"https://quepasa.link.smex.org"}
+          width="100%"
+          height="100%"
+          frameBorder={0}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Metamigo;
diff --git a/pages/admin/metamigo.tsx b/pages/admin/metamigo.tsx
new file mode 100644
index 0000000..170a1fc
--- /dev/null
+++ b/pages/admin/metamigo.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Metamigo = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid item sx={{ height: "100vh", width: "100%" }}>
+        <Iframe
+          id="link"
+          url={"https://sigarillo.link.smex.org"}
+          width="100%"
+          height="100%"
+          frameBorder={0}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Metamigo;
diff --git a/pages/settings.tsx b/pages/admin/zammad.tsx
similarity index 100%
rename from pages/settings.tsx
rename to pages/admin/zammad.tsx
diff --git a/pages/leafcutter/about.tsx b/pages/leafcutter/about.tsx
new file mode 100644
index 0000000..dbe11c0
--- /dev/null
+++ b/pages/leafcutter/about.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/about"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;
diff --git a/pages/leafcutter/create.tsx b/pages/leafcutter/create.tsx
new file mode 100644
index 0000000..f58f118
--- /dev/null
+++ b/pages/leafcutter/create.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/create"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;
diff --git a/pages/leafcutter/faq.tsx b/pages/leafcutter/faq.tsx
new file mode 100644
index 0000000..a8b5b97
--- /dev/null
+++ b/pages/leafcutter/faq.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/faq"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;
diff --git a/pages/leafcutter.tsx b/pages/leafcutter/index.tsx
similarity index 100%
rename from pages/leafcutter.tsx
rename to pages/leafcutter/index.tsx
diff --git a/pages/leafcutter/trends.tsx b/pages/leafcutter/trends.tsx
new file mode 100644
index 0000000..a2ba6ce
--- /dev/null
+++ b/pages/leafcutter/trends.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/trends"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;
diff --git a/pages/tickets/[...id].tsx b/pages/tickets/[...id].tsx
new file mode 100644
index 0000000..7d1fc84
--- /dev/null
+++ b/pages/tickets/[...id].tsx
@@ -0,0 +1,54 @@
+import Head from "next/head";
+import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
+import { Grid, Box } from "@mui/material";
+import { Layout } from "components/Layout";
+import { TicketDetail } from "components/TicketDetail";
+import { TicketEdit } from "components/TicketEdit";
+
+const Link: NextPage = ({ ticket, articles }: any) => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
+      <Grid item sx={{ height: "100vh" }} xs={10}>
+        <TicketDetail ticket={ticket} articles={articles} />
+      </Grid>
+      <Grid item xs={2} sx={{ height: "100vh" }}>
+        <TicketEdit ticket={ticket} />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export const getServerSideProps: GetServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const {
+    params: { id },
+  } = context;
+  const baseURL = "https://help.cdr.link/api/v1";
+  const token = process.env.ZAMMAD_TOKEN;
+  const headers = { Authorization: `Token ${token}` };
+  const rawTicket = await fetch(`${baseURL}/tickets/${id}`, {
+    headers,
+  });
+  const ticket = await rawTicket.json();
+  const rawArticles = await fetch(
+    `${baseURL}/ticket_articles/by_ticket/${id}`,
+    {
+      headers,
+    }
+  );
+  const articles = await rawArticles.json();
+
+  console.log({ ticket, articles });
+
+  return {
+    props: {
+      ticket,
+      articles,
+    },
+  };
+};
+export default Link;
diff --git a/pages/assigned.tsx b/pages/tickets/assigned.tsx
similarity index 100%
rename from pages/assigned.tsx
rename to pages/tickets/assigned.tsx
diff --git a/pages/pending.tsx b/pages/tickets/pending.tsx
similarity index 100%
rename from pages/pending.tsx
rename to pages/tickets/pending.tsx
diff --git a/pages/unassigned.tsx b/pages/tickets/unassigned.tsx
similarity index 100%
rename from pages/unassigned.tsx
rename to pages/tickets/unassigned.tsx
diff --git a/pages/urgent.tsx b/pages/tickets/urgent.tsx
similarity index 100%
rename from pages/urgent.tsx
rename to pages/tickets/urgent.tsx
diff --git a/public/link-logo-small.png b/public/link-logo-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..7de12ef98a58a79413333ea11f901d46f4e512b6
GIT binary patch
literal 4668
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

literal 0
HcmV?d00001

diff --git a/styles/global.css b/styles/global.css
index 4109f02..dbde786 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -3,3 +3,76 @@ body {
   overscroll-behavior-y: none;
   text-size-adjust: none;
 }
+
+.internal-note .cs-message__content {
+  background-color: #FFB62088 !important;
+  border: 2px solid #FFB620 !important;
+  border-radius: 0 !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.incoming-message .cs-message__content {
+  color: white !important;
+  background-color: #43CC47 !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.outgoing-message .cs-message__content {
+  color: white !important;
+  background-color: #1982FC !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.incoming-message .cs-message__content a {
+  color: white !important;
+}
+
+.outgoing-message .cs-message__content a {
+  color: white !important;
+}
+
+.cs-message-input__content-editor-wrapper {
+  background-color: white !important;
+  border: 1px solid #ccc !important;
+  margin: 10px !important;
+}
+
+.cs-message-input__content-editor-container {
+  background-color: white !important;
+}
+
+.cs-message-input__content-editor {
+  background-color: white !important;
+  font-family: Roboto !important;
+}
+
+.cs-conversation-header {
+  background-color: #ddd !important;
+  border: 0 !important;
+  padding: 20px !important;
+  border-bottom: 1px solid #ccc !important;
+}
+
+.cs-message-list {
+  background-color: #eee !important;
+}
+
+.cs-message-input {
+  background-color: #dfdfdf !important;
+}
+
+.cs-main-container {
+  border: 0 !important;
+  border-right: 1px solid #ccc !important;
+}