fix tickets-crud that was introduced in issues 242

-Admins and Coordinators will be able to create tickets
-Traineess will be able to see tickets assigned to them
-Also Admins and Admins can also perform CRUD operations on Tickets

Author: amiparadis250

package-lock.json

@@ -0,0 +1,28 @@
+import React from 'react';
+import ActionDropdown from '../components/ActionDropdown';
+
+interface ActionDropdownCellProps {
+  row: {
+    original: any;
+  };
+  onView: (ticket: any) => void;
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+function ActionDropdownCell({
+  row,
+  onView,
+  onEdit,
+  onDelete,
+}: ActionDropdownCellProps) {
+  return (
+    <ActionDropdown
+      onView={() => onView(row.original)}
+      onEdit={() => onEdit(row.original.id)}
+      onDelete={() => onDelete(row.original.id)}
+    />
+  );
+}
+
+export default ActionDropdownCell;

src/Mutations/ActionDropdownCell.tsx

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 const CREATE_TICKET = gql`
-  mutation CreateTicket($subject: String!, $message: String!) {
-    createTicket(subject: $subject, message: $message) {
+  mutation CreateTicket($subject: String!, $message: String!, $assignee: ID!) {
+    createTicket(subject: $subject, message: $message, assignee: $assignee) {
       responseMsg
     }
   }

src/Mutations/help.mutation.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/function-component-definition */
+import React, { useState } from 'react';
+import { FaEllipsisV, FaEye, FaEdit, FaTrashAlt } from 'react-icons/fa';
+
+interface ActionDropdownProps {
+  onView: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function ActionDropdown({ onView, onEdit, onDelete }: ActionDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => setIsOpen(!isOpen);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        aria-label="Open actions menu"
+        className="text-gray-500 hover:text-gray-700"
+        onClick={toggleDropdown}
+      >
+        <FaEllipsisV className="text-2xl" />
+      </button>
+      {isOpen && (
+        <div className="absolute right-0 z-10 w-48 mt-2 bg-white border border-gray-200 rounded-md shadow-lg">
+          <button
+            type="button"
+            aria-label="View item"
+            onClick={() => {
+              onView();
+              setIsOpen(false);
+            }}
+            className="flex items-center w-full px-4 py-2 text-sm text-blue-600 hover:bg-blue-100"
+          >
+            <FaEye className="mr-2" />
+            View
+          </button>
+          <button
+            type="button"
+            aria-label="Edit item"
+            onClick={() => {
+              onEdit();
+              setIsOpen(false);
+            }}
+            className="flex items-center w-full px-4 py-2 text-sm text-yellow-600 hover:bg-yellow-100"
+          >
+            <FaEdit className="mr-2" />
+            Edit
+          </button>
+          <button
+            type="button"
+            aria-label="Delete item"
+            onClick={() => {
+              onDelete();
+              setIsOpen(false);
+            }}
+            className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-100"
+          >
+            <FaTrashAlt className="mr-2" />
+            Delete
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ActionDropdown;

src/components/ActionDropdown.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/function-component-definition */
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  message: string;
+}
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+  message,
+}) => {
+  const [loading, setLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleConfirm = async () => {
+    setLoading(true);
+    try {
+      onConfirm();
+    } catch (error) {
+      toast.error('Failed to confirm action. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="w-full max-w-sm p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
+        <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-gray-100">
+          Confirm Action
+        </h2>
+        <p className="mb-4 text-gray-700 dark:text-gray-300">{message}</p>
+        <div className="flex justify-end space-x-4">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="px-4 py-2 text-white bg-gray-500 rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-500"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            type="button"
+            className={`px-4 py-2 text-white rounded hover:bg-red-600 focus:outline-none focus:ring-2 ${
+              loading ? 'bg-red-400 cursor-not-allowed' : 'bg-red-500'
+            } dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500`}
+            disabled={loading}
+          >
+            {loading ? 'Processing...' : 'Confirm'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationModal;

src/components/ConfirmationModal.tsx

@@ -18,10 +18,8 @@ interface TableData {
 }
 
 function DataTable({ data, columns, title, loading }: TableData) {
-  // const sortedData = React.useMemo(() => [...data], []);
   const sortedColumns = React.useMemo(() => [...columns], [columns]);
   const sortedData = data;
-  // const sortedColumns = columns;
   const TableInstance = useTable(
     { data: sortedData, columns: sortedColumns, initialState: { pageSize: 3 } },
 
@@ -65,7 +63,7 @@ function DataTable({ data, columns, title, loading }: TableData) {
           <input
             defaultValue={globalFilter || ''}
             placeholder="Filter"
-            className="px-5 py-2 mt-4 font-sans text-xs border border-primary rounded outline-none dark:bg-neutral-600 dark:text-white w-52 md:w-96"
+            className="px-5 py-2 mt-4 font-sans text-xs border rounded outline-none border-primary dark:bg-neutral-600 dark:text-white w-52 md:w-96"
             /* istanbul ignore next */
             onChange={(e) => setGlobalFilter(e.target.value)}
           />