Add new pages
This commit is contained in:
Darren Clarke
parent
95a21d6f50
commit
2b9672fedf
11 changed files with 432 additions and 66 deletions
|
|
@ -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>
|
||||
|
|
|
|||
43
components/ZammadWrapper.tsx
Normal file
43
components/ZammadWrapper.tsx
Normal file
|
|
@ -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");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
30
pages/assigned.tsx
Normal file
30
pages/assigned.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -1,14 +1,9 @@
|
|||
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 (
|
||||
const Home = () => (
|
||||
<Layout>
|
||||
<Head>
|
||||
<title>Link Shell</title>
|
||||
|
|
@ -16,40 +11,20 @@ const Home = () => {
|
|||
<Grid
|
||||
container
|
||||
spacing={0}
|
||||
sx={{ height: "100%", width: "100%", backgroundColor: "orange" }}
|
||||
sx={{ height: "100%", width: "100%" }}
|
||||
direction="column"
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
sx={{
|
||||
height: "100",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
backgroundColor: "red",
|
||||
}}
|
||||
>
|
||||
<Iframe
|
||||
id="link"
|
||||
url="http://localhost:3000/zammad/"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameBorder={1}
|
||||
/>
|
||||
<ZammadWrapper url="http://localhost:3000/zammad/#dashboard" />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
);
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
36
pages/leafcutter.tsx
Normal file
36
pages/leafcutter.tsx
Normal file
|
|
@ -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;
|
||||
30
pages/link.tsx
Normal file
30
pages/link.tsx
Normal file
|
|
@ -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;
|
||||
30
pages/pending.tsx
Normal file
30
pages/pending.tsx
Normal file
|
|
@ -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;
|
||||
33
pages/profile.tsx
Normal file
33
pages/profile.tsx
Normal file
|
|
@ -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;
|
||||
33
pages/settings.tsx
Normal file
33
pages/settings.tsx
Normal file
|
|
@ -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;
|
||||
30
pages/unassigned.tsx
Normal file
30
pages/unassigned.tsx
Normal file
|
|
@ -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;
|
||||
30
pages/urgent.tsx
Normal file
30
pages/urgent.tsx
Normal file
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue