626 lines
18 KiB
TypeScript
626 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useEffect, useState } from "react";
|
|
import useSWR from "swr";
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Typography,
|
|
List,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
ListItemSecondaryAction,
|
|
Drawer,
|
|
Collapse,
|
|
} from "@mui/material";
|
|
import {
|
|
FeaturedPlayList as FeaturedPlayListIcon,
|
|
Person as PersonIcon,
|
|
Insights as InsightsIcon,
|
|
Logout as LogoutIcon,
|
|
Cottage as CottageIcon,
|
|
Settings as SettingsIcon,
|
|
ExpandCircleDown as ExpandCircleDownIcon,
|
|
Dvr as DvrIcon,
|
|
Assessment as AssessmentIcon,
|
|
LibraryBooks as LibraryBooksIcon,
|
|
School as SchoolIcon,
|
|
Search as SearchIcon,
|
|
} from "@mui/icons-material";
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import LinkLogo from "public/link-logo-small.png";
|
|
import { useSession, signOut } from "next-auth/react";
|
|
import { getTicketOverviewCountsQuery } from "app/_graphql/getTicketOverviewCountsQuery";
|
|
import { SearchBox } from "./SearchBox";
|
|
import { fonts } from "app/_styles/theme";
|
|
|
|
const openWidth = 270;
|
|
const closedWidth = 100;
|
|
|
|
const MenuItem = ({
|
|
name,
|
|
href,
|
|
Icon,
|
|
iconSize,
|
|
inset = false,
|
|
selected = false,
|
|
open = true,
|
|
badge,
|
|
target = "_self",
|
|
}: any) => {
|
|
const { roboto } = fonts;
|
|
|
|
return (
|
|
<Link href={href} target={target}>
|
|
<ListItemButton
|
|
sx={{
|
|
p: 0,
|
|
mb: 1,
|
|
bl: iconSize === 0 ? "1px solid white" : "inherit",
|
|
}}
|
|
selected={selected}
|
|
>
|
|
{iconSize > 0 ? (
|
|
<ListItemIcon
|
|
sx={{
|
|
color: `white`,
|
|
minWidth: 0,
|
|
mr: 2,
|
|
textAlign: "center",
|
|
margin: open ? "0 8 0 0" : "0 auto",
|
|
}}
|
|
>
|
|
<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>
|
|
)}
|
|
{open && (
|
|
<ListItemText
|
|
inset={inset}
|
|
primary={
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
fontSize: 16,
|
|
fontFamily: roboto.style.fontFamily,
|
|
fontWeight: "bold",
|
|
border: 0,
|
|
textAlign: "left",
|
|
color: "white",
|
|
}}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
}
|
|
/>
|
|
)}
|
|
{badge && badge > 0 ? (
|
|
<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>
|
|
) : null}
|
|
</ListItemButton>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
interface SidebarProps {
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
}
|
|
|
|
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
|
|
const pathname = usePathname();
|
|
const { data: session } = useSession();
|
|
const { poppins } = fonts;
|
|
const username = session?.user?.name || "User";
|
|
// @ts-ignore
|
|
const roles = session?.user?.roles || [];
|
|
const { data: overviewData, error: overviewError }: any = useSWR(
|
|
{
|
|
document: getTicketOverviewCountsQuery,
|
|
},
|
|
{ refreshInterval: 10000 },
|
|
);
|
|
const findOverviewByName = (name: string) =>
|
|
overviewData?.ticketOverviews?.edges?.find(
|
|
(overview: any) => overview.node.name === name,
|
|
)?.node?.id;
|
|
const findOverviewCountByID = (id: string) =>
|
|
overviewData?.ticketOverviews?.edges?.find(
|
|
(overview: any) => overview.node.id === id,
|
|
)?.node?.ticketCount ?? 0;
|
|
const recentCount = 0;
|
|
const assignedID = findOverviewByName("My Assigned Tickets");
|
|
const assignedCount = findOverviewCountByID(assignedID);
|
|
const openID = findOverviewByName("Open Tickets");
|
|
const openCount = findOverviewCountByID(openID);
|
|
const urgentID = findOverviewByName("Escalated Tickets");
|
|
const urgentCount = findOverviewCountByID(urgentID);
|
|
const unassignedID = findOverviewByName("Unassigned & Open Tickets");
|
|
const unassignedCount = findOverviewCountByID(unassignedID);
|
|
|
|
const logout = () => {
|
|
signOut({ callbackUrl: "/login" });
|
|
};
|
|
|
|
return (
|
|
<Drawer
|
|
sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
|
|
variant="permanent"
|
|
anchor="left"
|
|
open={open}
|
|
PaperProps={{
|
|
sx: {
|
|
width: open ? openWidth : closedWidth,
|
|
border: 0,
|
|
overflow: "visible",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: 20,
|
|
right: open ? -8 : -16,
|
|
color: "#1C75FD",
|
|
rotate: open ? "90deg" : "-90deg",
|
|
}}
|
|
onClick={() => {
|
|
setOpen!(!open);
|
|
}}
|
|
>
|
|
<ExpandCircleDownIcon
|
|
sx={{
|
|
width: 30,
|
|
height: 30,
|
|
background: "white",
|
|
borderRadius: 500,
|
|
}}
|
|
/>
|
|
</Box>
|
|
<Grid
|
|
container
|
|
direction="column"
|
|
justifyContent="space-between"
|
|
wrap="nowrap"
|
|
spacing={0}
|
|
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
|
|
>
|
|
<Grid item container>
|
|
<Grid item sx={{ width: open ? "40px" : "100%" }}>
|
|
<Box
|
|
sx={{
|
|
width: "40px",
|
|
height: "40px",
|
|
margin: open ? "0" : "0 auto",
|
|
}}
|
|
>
|
|
<Image
|
|
src={LinkLogo}
|
|
alt="Link logo"
|
|
width={40}
|
|
height={40}
|
|
style={{
|
|
objectFit: "cover",
|
|
filter: "grayscale(100) brightness(100)",
|
|
}}
|
|
/>
|
|
</Box>
|
|
.
|
|
</Grid>
|
|
{open && (
|
|
<Grid item>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: 26,
|
|
color: "white",
|
|
fontWeight: 700,
|
|
mt: 1,
|
|
ml: 0.5,
|
|
fontFamily: poppins.style.fontFamily,
|
|
}}
|
|
>
|
|
CDR Link
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
<Grid item>
|
|
<Box
|
|
sx={{
|
|
height: "0.5px",
|
|
width: "100%",
|
|
backgroundColor: "#666",
|
|
mb: 1,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
fontSize: 12,
|
|
color: "#999",
|
|
fontWeight: "bold",
|
|
textAlign: open ? "left" : "center",
|
|
}}
|
|
>
|
|
Hello
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: 22,
|
|
color: "white",
|
|
mb: 1.5,
|
|
fontWeight: "bold",
|
|
textAlign: open ? "left" : "center",
|
|
}}
|
|
>
|
|
{open
|
|
? username
|
|
: username
|
|
.split(" ")
|
|
.map((name) => name.substring(0, 1))
|
|
.join("")}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item>
|
|
<Box
|
|
sx={{
|
|
height: "0.5px",
|
|
width: "100%",
|
|
backgroundColor: "#666",
|
|
mb: 2,
|
|
}}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<SearchBox />
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
container
|
|
direction="column"
|
|
sx={{
|
|
mt: "6px",
|
|
overflow: "scroll",
|
|
scrollbarWidth: "none",
|
|
msOverflowStyle: "none",
|
|
"&::-webkit-scrollbar": { display: "none" },
|
|
}}
|
|
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" },
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem
|
|
name="Home"
|
|
href="/"
|
|
Icon={CottageIcon}
|
|
iconSize={20}
|
|
selected={pathname.endsWith("/")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Tickets"
|
|
href="/overview/recent"
|
|
Icon={FeaturedPlayListIcon}
|
|
selected={
|
|
pathname.startsWith("/overview") ||
|
|
pathname.startsWith("/tickets")
|
|
}
|
|
iconSize={20}
|
|
open={open}
|
|
/>
|
|
<Collapse
|
|
in={
|
|
pathname.startsWith("/overview") ||
|
|
pathname.startsWith("/tickets")
|
|
}
|
|
timeout="auto"
|
|
unmountOnExit
|
|
onClick={undefined}
|
|
>
|
|
<List component="div" disablePadding>
|
|
<MenuItem
|
|
name="Recent"
|
|
href="/overview/recent"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/overview/recent")}
|
|
badge={recentCount}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Open"
|
|
href="/overview/open"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/overview/open")}
|
|
badge={openCount}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Urgent"
|
|
href="/overview/urgent"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/overview/urgent")}
|
|
badge={urgentCount}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Assigned"
|
|
href="/overview/assigned"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/overview/assigned")}
|
|
badge={assignedCount}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Unassigned"
|
|
href="/overview/unassigned"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/overview/unassigned")}
|
|
badge={unassignedCount}
|
|
open={open}
|
|
/>
|
|
</List>
|
|
</Collapse>
|
|
<MenuItem
|
|
name="Knowledge Base"
|
|
href="/knowledge"
|
|
Icon={SchoolIcon}
|
|
iconSize={20}
|
|
selected={pathname.endsWith("/knowledge")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Documentation"
|
|
href="/docs"
|
|
Icon={LibraryBooksIcon}
|
|
iconSize={20}
|
|
selected={pathname.endsWith("/docs")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Reporting"
|
|
href="/reporting"
|
|
Icon={AssessmentIcon}
|
|
iconSize={20}
|
|
selected={pathname.endsWith("/reporting")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Leafcutter"
|
|
href="/leafcutter"
|
|
Icon={InsightsIcon}
|
|
iconSize={20}
|
|
selected={false}
|
|
open={open}
|
|
/>
|
|
<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")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Search and Create"
|
|
href="/leafcutter/create"
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/leafcutter/create")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="Trends"
|
|
href="/leafcutter/trends"
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/leafcutter/trends")}
|
|
open={open}
|
|
/>
|
|
<MenuItem
|
|
name="FAQ"
|
|
href="/leafcutter/faq"
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/leafcutter/faq")}
|
|
open={open}
|
|
/>
|
|
|
|
<MenuItem
|
|
name="About"
|
|
href="/leafcutter/about"
|
|
Icon={InsightsIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/leafcutter/about")}
|
|
open={open}
|
|
/>
|
|
</List>
|
|
</Collapse>
|
|
<MenuItem
|
|
name="Profile"
|
|
href="/profile"
|
|
Icon={PersonIcon}
|
|
iconSize={20}
|
|
selected={pathname.endsWith("/profile")}
|
|
open={open}
|
|
/>
|
|
{roles.includes("admin") && (
|
|
<>
|
|
<MenuItem
|
|
name="Admin"
|
|
href="/admin/zammad"
|
|
Icon={SettingsIcon}
|
|
iconSize={20}
|
|
open={open}
|
|
/>
|
|
<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")}
|
|
open={open}
|
|
/>
|
|
{false && roles.includes("bridge") && (
|
|
<MenuItem
|
|
name="Bridge"
|
|
href="/admin/bridge"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/admin/bridge")}
|
|
open={open}
|
|
/>
|
|
)}
|
|
{roles.includes("label_studio") && (
|
|
<MenuItem
|
|
name="Label Studio"
|
|
href="/admin/label-studio"
|
|
Icon={FeaturedPlayListIcon}
|
|
iconSize={0}
|
|
selected={pathname.endsWith("/admin/label-studio")}
|
|
open={open}
|
|
/>
|
|
)}
|
|
</List>
|
|
</Collapse>
|
|
</>
|
|
)}
|
|
<MenuItem
|
|
name="Zammad Interface"
|
|
href="/zammad"
|
|
Icon={DvrIcon}
|
|
iconSize={20}
|
|
open={open}
|
|
target="_blank"
|
|
/>
|
|
<MenuItem
|
|
name="Logout"
|
|
href="/logout"
|
|
Icon={LogoutIcon}
|
|
iconSize={20}
|
|
open={open}
|
|
onClick={logout}
|
|
/>
|
|
</List>
|
|
</Grid>
|
|
</Grid>
|
|
</Drawer>
|
|
);
|
|
};
|