Ticket list updates

apps/link/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { FC, useState } from "react";
+import useSWR from "swr";
 import {
   Box,
   Grid,
@@ -19,12 +20,14 @@ import {
   Cottage as CottageIcon,
   Settings as SettingsIcon,
   ExpandCircleDown as ExpandCircleDownIcon,
+  Dvr as DvrIcon,
 } 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";
-import { useSession } from "next-auth/react";
+import { useSession, signOut } from "next-auth/react";
+import { getTicketOverviewCountsQuery } from "graphql/getTicketOverviewCountsQuery";
 
 const openWidth = 270;
 const closedWidth = 100;
@@ -38,8 +41,9 @@ const MenuItem = ({
   selected = false,
   open = true,
   badge,
+  target = "_self",
 }: any) => (
-  <Link href={href}>
+  <Link href={href} target={target}>
     <ListItemButton
       sx={{
         p: 0,
@@ -124,7 +128,7 @@ const MenuItem = ({
           }
         />
       )}
-      {badge && (
+      {badge && badge > 0 ? (
         <ListItemSecondaryAction>
           <Typography
             color="textSecondary"
@@ -142,7 +146,7 @@ const MenuItem = ({
             {badge}
           </Typography>
         </ListItemSecondaryAction>
-      )}
+      ) : null}
     </ListItemButton>
   </Link>
 );
@@ -153,9 +157,29 @@ interface SidebarProps {
 }
 
 export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
-  const { pathname } = useRouter();
+  const router = useRouter();
+  const { pathname } = router;
   const { data: session } = useSession();
   const username = session?.user?.name || "User";
+  const { data: overviewData, error: overviewError }: any = useSWR(
+    {
+      document: getTicketOverviewCountsQuery,
+    },
+    { refreshInterval: 10000 }
+  );
+  const findOverviewCountByID = (id: number) =>
+    overviewData?.ticketOverviews?.edges?.find((overview: any) =>
+      overview.node.id.endsWith(`/${id}`)
+    )?.node?.ticketCount ?? 0;
+  const assignedCount = findOverviewCountByID(1);
+  const urgentCount = findOverviewCountByID(7);
+  const pendingCount = findOverviewCountByID(3);
+  const unassignedCount = findOverviewCountByID(2);
+  console.log({ assignedCount, urgentCount, pendingCount, unassignedCount });
+
+  const logout = () => {
+    signOut({ callbackUrl: "/login" });
+  };
 
   return (
     <Drawer
@@ -335,13 +359,12 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
             />
             <MenuItem
               name="Tickets"
-              href="/tickets/3"
+              href="/tickets/assigned"
               Icon={FeaturedPlayListIcon}
               selected={pathname.startsWith("/tickets")}
               iconSize={20}
               open={open}
             />
-{/*
             <Collapse
               in={pathname.startsWith("/tickets")}
               timeout="auto"
@@ -355,7 +378,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                   Icon={FeaturedPlayListIcon}
                   iconSize={0}
                   selected={pathname.endsWith("/tickets/assigned")}
-                  badge={3}
+                  badge={assignedCount}
                   open={open}
                 />
                 <MenuItem
@@ -364,7 +387,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                   Icon={FeaturedPlayListIcon}
                   iconSize={0}
                   selected={pathname.endsWith("/tickets/urgent")}
-                  badge={1}
+                  badge={urgentCount}
                   open={open}
                 />
                 <MenuItem
@@ -373,7 +396,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                   Icon={FeaturedPlayListIcon}
                   iconSize={0}
                   selected={pathname.endsWith("/tickets/pending")}
-                  badge={9}
+                  badge={pendingCount}
                   open={open}
                 />
                 <MenuItem
@@ -381,21 +404,12 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                   href="/tickets/unassigned"
                   Icon={FeaturedPlayListIcon}
                   iconSize={0}
-                  selected={pathname.endsWith("/tickets/unnassigned")}
-                  badge={27}
-                  open={open}
-                />
-                <MenuItem
-                  name="New Ticket UI"
-                  href="/tickets/3"
-                  Icon={SettingsIcon}
-                  iconSize={0}
-                  selected={pathname.endsWith("/tickets/3")}
+                  selected={pathname.endsWith("/tickets/unassigned")}
+                  badge={unassignedCount}
                   open={open}
                 />
               </List>
             </Collapse>
-*/ }
             <MenuItem
               name="Knowledge Base"
               href="/knowledge"
@@ -419,7 +433,7 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
               onClick={undefined}
             >
               <List component="div" disablePadding>
-{/*
+                {/*
                 <MenuItem
                   name="Dashboard"
                   href="/leafcutter"
@@ -510,13 +524,21 @@ export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
                 />
               </List>
             </Collapse>
-
+            <MenuItem
+              name="Zammad Interface"
+              href="/proxy/zammad"
+              Icon={DvrIcon}
+              iconSize={20}
+              open={open}
+              target="_blank"
+            />
             <MenuItem
               name="Logout"
               href="/logout"
               Icon={LogoutIcon}
               iconSize={20}
               open={open}
+              onClick={logout}
             />
           </List>
         </Grid>