Sidebar and edit updates

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