Add new pages

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: 0.5,
-            mr: `${(20 - iconSize) / 2}px`,
           }}
         >
-          {/*     <Image src={icon} alt="" /> */}
+          {iconSize > 0 && <Icon />}
         </Box>
 
         <ListItemText
           primary={
             <Typography
               variant="body1"
-              style={{
+              sx={{
-                color: "#000 !important",
+                color: "#fff !important",
                 fontSize: 14,
                 fontFamily: "Roboto",
                 fontWeight: 400,
-                marginLeft: 10,
+                marginLeft: "12px",
-                marginTop: -3,
+                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="Home" href="/" Icon={CottageIcon} iconSize={20} />
-          <MenuItem name="" href="/create" iconSize={20} />
+          <Accordion
-          <MenuItem name="" href="/trends" iconSize={13} />
+            sx={{
-          <MenuItem name="" href="/faq" iconSize={20} />
+              backgroundColor: "#25272A",
-          <MenuItem name="" href="/about" iconSize={20} />
+              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>

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");
+        }
+      }}
+    />
+  );
+};

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;

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 Home = () => (
-  const [leafcutterURL, setLeafcutterURL] = useState(
+  <Layout>
-    "https://lc.digiresilience.org"
+    <Head>
-  );
+      <title>Link Shell</title>
-  return (
+    </Head>
-    <Layout>
+    <Grid
-      <Head>
+      container
-        <title>Link Shell</title>
+      spacing={0}
-      </Head>
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
       <Grid
-        container
+        item
-        spacing={0}
+        sx={{
-        sx={{ height: "100%", width: "100%", backgroundColor: "orange" }}
+          height: "100%",
-        direction="column"
+          width: "100%",
+        }}
       >
-        <Grid
+        <ZammadWrapper url="http://localhost:3000/zammad/#dashboard" />
-          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> */}
       </Grid>
-    </Layout>
+    </Grid>
-  );
+  </Layout>
-};
+);
 
 export default Home;

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;

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;

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;

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;

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;

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;

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;