Updated the tickets to allow agents to also view theirs

src/components/High/TicketDisplay.tsx

@@ -143,6 +143,7 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
                 label: `${u.name} - ${u.email}`,
               })),
           ]}
+          disabled={user.type === "agent"}
           value={
             assignedTo
               ? {

src/components/Sidebar.tsx

@@ -169,7 +169,7 @@ export default function Sidebar({
             isMinimized={isMinimized}
           />
         )}
-        {["admin", "developer"].includes(userType || "") && (
+        {["admin", "developer", "agent"].includes(userType || "") && (
           <Nav
             disabled={disableNavigation}
             Icon={BsClipboardData}

src/pages/tickets.tsx

@@ -44,7 +44,10 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
     };
   }
 
-  if (shouldRedirectHome(user) || user.type !== "developer") {
+  if (
+    shouldRedirectHome(user) ||
+    ["admin", "developer", "agent"].includes(user.type)
+  ) {
     res.setHeader("location", "/");
     res.statusCode = 302;
     res.end();
@@ -93,6 +96,8 @@ export default function Tickets() {
 
   useEffect(() => {
     const filters = [];
+    if (user?.type === "agent")
+      filters.push((x: Ticket) => x.assignedTo === user.id);
     if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
     if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
     if (assigneeFilter)
@@ -101,7 +106,7 @@ export default function Tickets() {
     setFilteredTickets(
       [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
     );
-  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting]);
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting, user]);
 
   const columns = [
     columnHelper.accessor("id", {
@@ -170,6 +175,23 @@ export default function Tickets() {
     }),
   ];
 
+  const getAssigneeValue = () => {
+    if (user && user.type === "agent")
+      return { value: user.id, label: `${user.name} - ${user.email}` };
+
+    if (assigneeFilter) {
+      const assigneeUser = users.find((x) => x.id === assigneeFilter);
+      return assigneeUser
+        ? {
+            value: assigneeFilter,
+            label: `${assigneeUser.name} - ${assigneeUser.email}`,
+          }
+        : null;
+    }
+
+    return null;
+  };
+
   const table = useReactTable({
     data: filteredTickets,
     columns: columns,
@@ -265,20 +287,16 @@ export default function Tickets() {
                 options={[
                   { value: "me", label: "Assigned to me" },
                   ...users
-                    .filter((x) => ["admin", "developer"].includes(x.type))
+                    .filter((x) =>
+                      ["admin", "developer", "agent"].includes(x.type),
+                    )
                     .map((u) => ({
                       value: u.id,
                       label: `${u.name} - ${u.email}`,
                     })),
                 ]}
-                value={
+                disabled={user.type === "agent"}
-                  assigneeFilter
+                value={getAssigneeValue()}
-                    ? {
-                        value: assigneeFilter,
-                        label: `${users.find((u) => u.id === assigneeFilter)?.name} - ${users.find((u) => u.id === assigneeFilter)?.email}`,
-                      }
-                    : null
-                }
                 onChange={(value) =>
                   value
                     ? setAssigneeFilter(