Ticket list updates

apps/link/components/TicketList.tsx

@@ -0,0 +1,71 @@
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { GridColDef } from "@mui/x-data-grid-pro";
+import { StyledDataGrid } from "./StyledDataGrid";
+import { typography } from "styles/theme";
+import { useRouter } from "next/router";
+
+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>
+  );
+};