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