Develop

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

@@ -0,0 +1,85 @@
+"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 { Button } from "../../../../_components/Button";
+import { typography } from "../../../../_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
+          container
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Grid item>
+            <Box
+              sx={{
+                backgroundColor: "#ddd",
+                px: "8px",
+                pb: "16px",
+                ...typography.h4,
+                fontSize: 24,
+              }}
+            >
+              {title}
+            </Box>
+          </Grid>
+          <Grid item>
+            <Button href="/tickets/create" text="Create" color="#1982FC" />
+          </Grid>
+        </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 "../../../../_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={name} tickets={tickets} />}
+      {ticketError && <div>{ticketError.toString()}</div>}
+    </>
+  );
+};

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

@@ -0,0 +1,11 @@
+"use client";
+
+import { DisplayError } from "../../../_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,41 @@
+import { Metadata } from "next";
+import { ZammadOverview } from "./_components/ZammadOverview";
+
+const getSection = (overview: string) => {
+  return overview.charAt(0).toUpperCase() + overview.slice(1);
+};
+
+type MetadataProps = {
+  params: {
+    overview: string;
+  };
+};
+
+export async function generateMetadata({
+  params: { overview },
+}: MetadataProps): Promise<Metadata> {
+  const section = getSection(overview);
+
+  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) {
+  const section = getSection(overview);
+
+  return <ZammadOverview name={section} id={overviews[overview]} />;
+}