From 2b9672fedffe6f95d9c722406add01080cb9d394 Mon Sep 17 00:00:00 2001
From: Darren Clarke <darren@redaranj.com>
Date: Fri, 2 Dec 2022 17:45:14 +0100
Subject: [PATCH] Add new pages

---
 components/Sidebar.tsx       | 134 ++++++++++++++++++++++++++++++-----
 components/ZammadWrapper.tsx |  43 +++++++++++
 pages/assigned.tsx           |  30 ++++++++
 pages/index.tsx              |  69 ++++++------------
 pages/leafcutter.tsx         |  36 ++++++++++
 pages/link.tsx               |  30 ++++++++
 pages/pending.tsx            |  30 ++++++++
 pages/profile.tsx            |  33 +++++++++
 pages/settings.tsx           |  33 +++++++++
 pages/unassigned.tsx         |  30 ++++++++
 pages/urgent.tsx             |  30 ++++++++
 11 files changed, 432 insertions(+), 66 deletions(-)
 create mode 100644 components/ZammadWrapper.tsx
 create mode 100644 pages/assigned.tsx
 create mode 100644 pages/leafcutter.tsx
 create mode 100644 pages/link.tsx
 create mode 100644 pages/pending.tsx
 create mode 100644 pages/profile.tsx
 create mode 100644 pages/settings.tsx
 create mode 100644 pages/unassigned.tsx
 create mode 100644 pages/urgent.tsx

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 11dd13e..cdaa9bd 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -8,39 +8,57 @@ import {
   ListItemIcon,
   ListItemText,
   Drawer,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from "@mui/material";
+import {
+  FeaturedPlayList as FeaturedPlayListIcon,
+  Person as PersonIcon,
+  Analytics as AnalyticsIcon,
+  Logout as LogoutIcon,
+  Cottage as CottageIcon,
+  Settings as SettingsIcon,
+} from "@mui/icons-material";
 import Link from "next/link";
 
-const MenuItem = ({ name, href, iconSize }: any) => (
+const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
   <Link href={href} passHref>
-    <ListItem button>
+    <ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
       <ListItemIcon
         sx={{
-          color: `black !important`,
+          color: `white`,
         }}
       >
         <Box
           sx={{
             width: iconSize,
             height: iconSize,
-            ml: `${(20 - iconSize) / 2}px`,
-            mr: `${(20 - iconSize) / 2}px`,
+            mr: 0.5,
           }}
         >
-          {/*     <Image src={icon} alt="" /> */}
+          {iconSize > 0 && <Icon />}
         </Box>
 
         <ListItemText
           primary={
             <Typography
               variant="body1"
-              style={{
-                color: "#000 !important",
+              sx={{
+                color: "#fff !important",
                 fontSize: 14,
                 fontFamily: "Roboto",
                 fontWeight: 400,
-                marginLeft: 10,
-                marginTop: -3,
+                marginLeft: "12px",
+                marginTop: "-1px",
+                textDecoration: "none !important",
+                ">a": {
+                  textDecoration: "none !important",
+                },
+                "a:visited": {
+                  textDecoration: "none !important",
+                },
+                border: 0,
               }}
             >
               {name}
@@ -58,7 +76,7 @@ interface SidebarProps {
 
 export const Sidebar: FC<SidebarProps> = ({ open }) => (
   <Drawer
-    sx={{ width: 300, flexShrink: 0, backgroundColor: "black !important" }}
+    sx={{ width: 300, flexShrink: 0 }}
     variant="permanent"
     anchor="left"
     open={open}
@@ -66,8 +84,6 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => (
       sx: {
         width: 300,
         border: 0,
-
-        backgroundColor: "black !important",
       },
     }}
   >
@@ -76,15 +92,95 @@ export const Sidebar: FC<SidebarProps> = ({ open }) => (
       direction="column"
       justifyContent="space-between"
       wrap="nowrap"
-      sx={{ backgroundColor: "black", height: "100%" }}
+      sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
     >
+      <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="" href="/" iconSize={20} />
-          <MenuItem name="" href="/create" iconSize={20} />
-          <MenuItem name="" href="/trends" iconSize={13} />
-          <MenuItem name="" href="/faq" iconSize={20} />
-          <MenuItem name="" href="/about" iconSize={20} />
+          <MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
+          <Accordion
+            sx={{
+              backgroundColor: "#25272A",
+              border: 0,
+              m: 0,
+              p: 0,
+              boxShadow: "none",
+              mt: -1,
+              mb: -1,
+            }}
+          >
+            <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="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>
       </Grid>
     </Grid>
diff --git a/components/ZammadWrapper.tsx b/components/ZammadWrapper.tsx
new file mode 100644
index 0000000..edaec8d
--- /dev/null
+++ b/components/ZammadWrapper.tsx
@@ -0,0 +1,43 @@
+import { FC, useState } from "react";
+import Iframe from "react-iframe";
+
+type ZammadWrapperProps = {
+  url: string;
+  hideSidebar?: boolean;
+};
+
+export const ZammadWrapper: FC<ZammadWrapperProps> = ({
+  url,
+  hideSidebar = true,
+}) => {
+  const [display, setDisplay] = useState("none");
+
+  return (
+    <Iframe
+      id="link"
+      url={url}
+      width="100%"
+      height="100%"
+      frameBorder={0}
+      styles={{ display }}
+      onLoad={() => {
+        const linkElement = document.querySelector("iframe");
+        if (
+          linkElement.contentDocument &&
+          linkElement.contentDocument?.querySelector
+        ) {
+          // @ts-ignore
+          linkElement.contentDocument.querySelector("#navigation").style =
+            "display: none";
+
+          if (hideSidebar) {
+            // @ts-ignore
+            linkElement.contentDocument.querySelector(".sidebar").style =
+              "display: none";
+          }
+          setDisplay("inherit");
+        }
+      }}
+    />
+  );
+};
diff --git a/pages/assigned.tsx b/pages/assigned.tsx
new file mode 100644
index 0000000..277dd79
--- /dev/null
+++ b/pages/assigned.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/my_tickets" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;
diff --git a/pages/index.tsx b/pages/index.tsx
index 88fefb1..deb9c29 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,55 +1,30 @@
-import { useState } from "react";
 import Head from "next/head";
-import { Grid, Button } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Layout } from "components/Layout";
-import Iframe from "react-iframe";
+import { ZammadWrapper } from "components/ZammadWrapper";
 
-const Home = () => {
-  const [leafcutterURL, setLeafcutterURL] = useState(
-    "https://lc.digiresilience.org"
-  );
-  return (
-    <Layout>
-      <Head>
-        <title>Link Shell</title>
-      </Head>
+const Home = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
       <Grid
-        container
-        spacing={0}
-        sx={{ height: "100%", width: "100%", backgroundColor: "orange" }}
-        direction="column"
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
       >
-        <Grid
-          item
-          sx={{
-            height: "100",
-            width: "100%",
-            backgroundColor: "red",
-          }}
-        >
-          <Iframe
-            id="link"
-            url="http://localhost:3000/zammad/"
-            width="100%"
-            height="100%"
-            frameBorder={1}
-          />
-        </Grid>
-        {/*<Grid
-          item
-          sx={{ border: "1px solid black", height: "100vh", width: "100%" }}
-        >
-          <Iframe
-            id="link"
-            url={leafcutterURL}
-            width="100%"
-            height="100%"
-            frameBorder={0}
-          />
-        </Grid> */}
+        <ZammadWrapper url="http://localhost:3000/zammad/#dashboard" />
       </Grid>
-    </Layout>
-  );
-};
+    </Grid>
+  </Layout>
+);
 
 export default Home;
diff --git a/pages/leafcutter.tsx b/pages/leafcutter.tsx
new file mode 100644
index 0000000..fc62a96
--- /dev/null
+++ b/pages/leafcutter.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"
+  );
+  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/link.tsx b/pages/link.tsx
new file mode 100644
index 0000000..96dd8d5
--- /dev/null
+++ b/pages/link.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/zoom/518/1490" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;
diff --git a/pages/pending.tsx b/pages/pending.tsx
new file mode 100644
index 0000000..bf6d563
--- /dev/null
+++ b/pages/pending.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/my_pending_reached" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;
diff --git a/pages/profile.tsx b/pages/profile.tsx
new file mode 100644
index 0000000..3a647ec
--- /dev/null
+++ b/pages/profile.tsx
@@ -0,0 +1,33 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Profile = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper
+          url="http://localhost:3000/zammad/#profile"
+          hideSidebar={false}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Profile;
diff --git a/pages/settings.tsx b/pages/settings.tsx
new file mode 100644
index 0000000..cc91099
--- /dev/null
+++ b/pages/settings.tsx
@@ -0,0 +1,33 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper
+          url="http://localhost:3000/zammad/#manage"
+          hideSidebar={false}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;
diff --git a/pages/unassigned.tsx b/pages/unassigned.tsx
new file mode 100644
index 0000000..bf9d85f
--- /dev/null
+++ b/pages/unassigned.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/all_unassigned" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;
diff --git a/pages/urgent.tsx b/pages/urgent.tsx
new file mode 100644
index 0000000..44eddad
--- /dev/null
+++ b/pages/urgent.tsx
@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/all_escalated" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;