Sidebar and edit updates

apps/link/app/(main)/tickets/[id]/@detail/_components/ArticleCreateDialog.tsx

@@ -17,6 +17,7 @@ interface ArticleCreateDialogProps {
   open: boolean;
   closeDialog: () => void;
   kind: string;
+  recipient?: string;
 }
 
 export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({
@@ -24,22 +25,29 @@ export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({
   open,
   closeDialog,
   kind,
+  recipient,
 }) => {
   const [body, setBody] = useState("");
   const backgroundColor = kind === "note" ? "#FFB620" : "#1982FC";
   const color = kind === "note" ? "black" : "white";
   const { fetcher } = useSWRConfig();
+  const article = {
+    body,
+    type: kind,
+    internal: kind === "note",
+  };
+
+  if (kind === "email") {
+    article["to"] = recipient;
+  }
+
   const createArticle = async () => {
     await fetcher({
       document: updateTicketMutation,
       variables: {
         ticketId: `gid://zammad/Ticket/${ticketID}`,
         input: {
-          article: {
-            body,
-            type: kind,
-            internal: kind === "note",
-          },
+          article,
         },
       },
     });

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -53,8 +53,10 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
     : null;
   const mostRecentExternalArticleKind =
     mostRecentExternalArticle?.type?.name ?? "phone";
+  const mostRecentEmailRecipient = mostRecentExternalArticle?.to?.name ?? "";
   const [dialogOpen, setDialogOpen] = useState(false);
   const [articleKind, setArticleKind] = useState("phone");
+  const [recipient, setRecipient] = useState("");
   const closeDialog = () => setDialogOpen(false);
 
   const shouldRender =

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -12,10 +12,11 @@ import {
 } from "@mui/material";
 import { MuiChipsInput } from "mui-chips-input";
 import useSWR, { useSWRConfig } from "swr";
-import { getTicketQuery } from "../../../../../_graphql/getTicketQuery";
-import { updateTicketMutation } from "../../../../../_graphql/updateTicketMutation";
-import { updateTagsMutation } from "../../../../../_graphql/updateTagsMutation";
+import { getTicketQuery } from "app/_graphql/getTicketQuery";
+import { updateTicketMutation } from "app/_graphql/updateTicketMutation";
+import { updateTagsMutation } from "app/_graphql/updateTagsMutation";
 import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 
 interface TicketEditProps {
   id: string;
@@ -26,6 +27,8 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   const [selectedOwner, setSelectedOwner] = useState("");
   const [selectedPriority, setSelectedPriority] = useState("");
   const [selectedState, setSelectedState] = useState("");
+  const [pendingDate, setPendingDate] = useState(new Date());
+  const [pendingVisible, setPendingVisible] = useState(false);
   const [selectedTags, setSelectedTags] = useState([]);
   const handleDelete = () => {
     console.info("You clicked the delete icon.");
@@ -36,8 +39,13 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   const { data: users } = useSWR("/api/v1/users", restFetcher);
   const { data: states } = useSWR("/api/v1/ticket_states", restFetcher);
   const { data: priorities } = useSWR("/api/v1/ticket_priorities", restFetcher);
-  const { data: tags } = useSWR("/api/v1/tags", restFetcher);
-
+  const { data: recent } = useSWR("/api/v1/recent_view", restFetcher);
+  console.log({ recent });
+  // const { data: tags } = useSWR("/api/v1/tags", restFetcher);
+  const filteredStates = states?.filter(
+    (state: any) => !["new", "merged", "removed"].includes(state.name),
+  );
+  const agents = users?.filter((user: any) => user.role_ids.includes(2)) ?? [];
   const { fetcher } = useSWRConfig();
   const { data: ticketData, error: ticketError }: any = useSWR(
     {
@@ -60,6 +68,13 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
       setSelectedTags(ticket.tags);
     }
   }, [ticketData, ticketError]);
+
+  useEffect(() => {
+    const stateName = filteredStates?.find(
+      (state: any) => state.id === selectedState,
+    )?.name;
+    setPendingVisible(stateName?.includes("pending") ?? false);
+  }, [selectedState]);
   const updateTicket = async (input: any) => {
     console.log({ input });
     const res = await fetcher({
@@ -128,14 +143,14 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
                 backgroundColor: "white",
               }}
             >
-              {users?.map((user: any) => (
-                <MenuItem key={user.id} value={user.id}>
+              {agents?.map((user: any) => (
+                <MenuItem key={user.id} value={`${user.id}`}>
                   {user.firstname} {user.lastname}
                 </MenuItem>
               ))}
             </Select>
           </Grid>
-          <Grid item>
+          <Grid item xs={12}>
             <Box sx={{ m: 1, mt: 0 }}>State</Box>
             <Select
               value={selectedState}
@@ -144,6 +159,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
                 setSelectedState(newState);
                 updateTicket({
                   stateId: `gid://zammad/Ticket::State/${newState}`,
+                  pendingTime: pendingDate.toISOString(),
                 });
               }}
               size="small"
@@ -152,13 +168,35 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
                 backgroundColor: "white",
               }}
             >
-              {states?.map((state: any) => (
+              {filteredStates?.map((state: any) => (
                 <MenuItem key={state.id} value={state.id}>
                   {state.name}
                 </MenuItem>
               ))}
             </Select>
           </Grid>
+          <Grid
+            item
+            xs={12}
+            sx={{ display: pendingVisible ? "inherit" : "none" }}
+          >
+            <DatePicker
+              label="Pending Date"
+              value={pendingDate}
+              onChange={(newValue: any) => {
+                console.log(newValue);
+                setPendingDate(newValue);
+                updateTicket({
+                  pendingTime: newValue.toISOString(),
+                });
+              }}
+              slotProps={{ textField: { size: "small" } }}
+              sx={{
+                width: "100%",
+                backgroundColor: "white",
+              }}
+            />
+          </Grid>
           <Grid item>
             <Box sx={{ m: 1, mt: 0 }}>Priority</Box>
             <Select