Zammad docker and Link structure updates

apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { StyledDataGrid } from "../../../_components/StyledDataGrid";
+import { typography } from "@/app/_styles/theme";
+import { useRouter } from "next/navigation";
+
+interface TicketListProps {
+  title: string;
+  tickets: any;
+}
+
+export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
+  const router = useRouter();
+  let gridColumns: GridColDef[] = [
+    {
+      field: "number",
+      headerName: "Number",
+      flex: 1,
+    },
+    {
+      field: "title",
+      headerName: "Title",
+      flex: 1,
+    },
+    {
+      field: "customer",
+      headerName: "Sender",
+      valueGetter: (params) => params.row?.customer?.fullname,
+      flex: 1,
+    },
+    {
+      field: "group",
+      headerName: "Group",
+      valueGetter: (params) => params.row?.group?.name,
+      flex: 1,
+    },
+  ];
+  console.log({ tickets });
+  const rowClick = ({ row }) => {
+    router.push(`/tickets/${row.internalId}`);
+  };
+
+  return (
+    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
+      <Grid container direction="column">
+        <Grid item>
+          <Box
+            sx={{
+              backgroundColor: "#ddd",
+              px: "8px",
+              pb: "16px",
+              ...typography.h4,
+              fontSize: 24,
+            }}
+          >
+            {title}
+          </Box>
+        </Grid>
+        <Grid item>
+          <StyledDataGrid
+            name={title}
+            columns={gridColumns}
+            rows={tickets}
+            onRowClick={rowClick}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+import useSWR from "swr";
+import { TicketList } from "./TicketList";
+import { getTicketsByOverviewQuery } from "@/app/_graphql/getTicketsByOverviewQuery";
+
+type ZammadOverviewProps = {
+  name: string;
+  id: string;
+};
+
+export const ZammadOverview: FC<ZammadOverviewProps> = ({ name, id }) => {
+  const { data: ticketData, error: ticketError }: any = useSWR(
+    {
+      document: getTicketsByOverviewQuery,
+      variables: { overviewId: `gid://zammad/Overview/${id}` },
+    },
+    { refreshInterval: 10000 }
+  );
+
+  const shouldRender = !ticketError && ticketData;
+  const tickets =
+    ticketData?.ticketsByOverview?.edges.map((edge: any) => edge.node) || [];
+
+  return (
+    <>
+      {shouldRender && <TicketList title="Assigned" tickets={tickets} />}
+      {ticketError && <div>{ticketError.toString()}</div>}
+    </>
+  );
+};

apps/link/app/(main)/overview/[overview]/error.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { DisplayError } from "app/_components/DisplayError";
+
+type PageProps = {
+  error: Error;
+};
+
+export default function Page({ error }: PageProps) {
+  return <DisplayError error={error} />;
+}

apps/link/app/(main)/overview/[overview]/page.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+import { ZammadOverview } from "./_components/ZammadOverview";
+
+type MetadataProps = {
+  params: {
+    overview: string;
+  };
+};
+
+export async function generateMetadata({
+  params: { overview },
+}: MetadataProps): Promise<Metadata> {
+  const section = overview.charAt(0).toUpperCase() + overview.slice(1);
+
+  return {
+    title: `Link - ${section} Tickets`,
+  };
+}
+
+const overviews = {
+  assigned: 1,
+  unassigned: 2,
+  pending: 3,
+  urgent: 7,
+};
+
+type PageProps = {
+  params: {
+    overview: string;
+  };
+};
+
+export default function Page({ params: { overview } }: PageProps) {
+  console.log({ overview });
+  return <ZammadOverview name={overview} id={overviews[overview]} />;
+}