Sidebar and edit updates

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

@@ -0,0 +1,139 @@
+"use client";
+
+import { FC, useState } from "react";
+import {
+  Grid,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Autocomplete
+} from "@mui/material";
+import { useSWRConfig } from "swr";
+import { createTicketMutation } from "app/_graphql/createTicketMutation";
+
+interface TicketCreateDialogProps {
+  open: boolean;
+  closeDialog: () => void;
+}
+
+export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
+  open,
+  closeDialog,
+}) => {
+  const [kind, setKind] = useState("note");
+  const [customerID, setCustomerID] = useState("");
+  const [groupID, setGroupID] = useState("");
+  const [ownerID, setOwnerID] = useState("");
+  const [priorityID, setPriorityID] = useState("");
+  const [stateID, setStateID] = useState("");
+  const [tags, setTags] = useState([]);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
+  const color = kind === "note" ? "black" : "white";
+  const { fetcher } = useSWRConfig();
+  const ticket = {
+    customerId: customerID,
+    groupId: groupID,
+    ownerId: ownerID,
+    priorityId: priorityID,
+    stateId: stateID,
+    tags,
+    title,
+    article: {
+      body,
+      type: kind,
+      internal: kind === "note",
+    }
+  };
+
+
+  const createTicket = async () => {
+    await fetcher({
+      document: createTicketMutation,
+      variables: {
+        input: {
+          ticket
+        },
+      },
+    });
+    closeDialog();
+    setBody("");
+  };
+
+  return (
+    <Dialog open={open} maxWidth="md" fullWidth>
+      <DialogContent>
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            <TextField
+              label={"Title"}
+              fullWidth
+              value={title}
+              onChange={(e: any) => setTitle(e.target.value)}
+            />
+          </Grid>
+          <Grid item>
+            <Autocomplete
+              disablePortal
+              options={[{ label: "Test One", id: 1 }, { label: "Test Two", id: 2 }]}
+              sx={{ width: 300 }}
+              onChange={(e: any) => setCustomerID(e.target.value)}
+              renderInput={(params) => <TextField {...params} label="Customer" />}
+            />
+          </Grid>
+          <Grid item>
+            <TextField
+              label={"Details"}
+              multiline
+              rows={10}
+              fullWidth
+              value={body}
+              onChange={(e: any) => setBody(e.target.value)}
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Button
+              sx={{
+                backgroundColor: "white",
+                color: "#666",
+                fontFamily: "Poppins, sans-serif",
+                fontWeight: 700,
+                borderRadius: 2,
+                textTransform: "none",
+              }}
+              onClick={() => {
+                setBody("");
+                closeDialog();
+              }}
+            >
+              Cancel
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              sx={{
+                backgroundColor,
+                color,
+                fontFamily: "Poppins, sans-serif",
+                fontWeight: 700,
+                borderRadius: 2,
+                textTransform: "none",
+                px: 3,
+              }}
+              onClick={createTicket}
+            >
+              {kind === "note" ? "Save Note" : "Send Reply"}
+            </Button>
+          </Grid>
+        </Grid>
+      </DialogActions>
+    </Dialog>
+  );
+};