updating feedback member

src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx

@@ -4,7 +4,8 @@ import { useCallApi } from '@/hooks';
 import { ColumnDef } from '@tanstack/react-table';
 import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { Toaster } from 'sonner';
-// import ListToolbar from '../blocks/ListToolbar';
+// import FeedbackDetail from './blocks/FeedbackDetail';
+import FeedbackDetail from '../blocks/FeedbackDetail';
 
 interface feedbackProps {
   id: string;
@@ -24,6 +25,8 @@ interface ContextProps {
   handleAddDialog: (show: boolean) => void;
   showDeleteDialog: boolean;
   handleDeleteDialog: (show: boolean, selected_sucos: string | null) => void;
+  showDetailDialog: boolean;
+  handleDetailDialog: (show: boolean, selected_sucos: string | null) => void;
   selectedfeedback: string | null;
   getfeedbackLists: (
     limit: number,
@@ -42,6 +45,8 @@ const initialProps: ContextProps = {
   handleAddDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
+  showDetailDialog: false,
+  handleDetailDialog: () => {},
   selectedfeedback: null,
   getfeedbackLists: async () => undefined
 };
@@ -54,6 +59,7 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [selectedfeedback, setSelectedfeedback] = useState<string | null>(null);
   const { GetData } = useCallApi();
 
@@ -71,10 +77,35 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
     setSelectedfeedback(show ? selected_feedback : null);
   }, []);
 
+  const handleDetailDialog = useCallback((show: boolean, selected_feedback: string | null) => {
+    setShowDetailDialog(show);
+    setSelectedfeedback(show ? selected_feedback : null);
+  }, []);
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
-        accessorFn: (row) => row.feedback_notes,
+        accessorFn: (row) => row.customer,
+        id: 'customer_id',
+        header: ({ column }) => <DataGridColumnHeader title="Customer Name" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.Feedback_emotion,
+        id: 'feedback_emotion',
+        header: ({ column }) => <DataGridColumnHeader title="Emotion" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.Feedback_feedback_notes,
         id: 'feedback_notes',
         header: ({ column }) => <DataGridColumnHeader title="Feedback Notes" column={column} />,
         enableSorting: false,
@@ -84,67 +115,45 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
         }
       },
       {
-        accessorFn: (row) => row.feedback_screenshot,
-        id: 'feedback_screenshot',
-        header: ({ column }) => <DataGridColumnHeader title="Feedback Screenshot" column={column} />,
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
         enableSorting: false,
         enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDetailDialog(true, row.Feedback_id)}
+                title="View Details"
+              >
+                <KeenIcon icon="eye" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditDialog(true, row.Feedback_id)}
+                title="Edit"
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteDialog(true, row.Feedback_id)}
+                title="Delete"
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
         meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.review_notes,
-        id: 'review_notes',
-        header: ({ column }) => <DataGridColumnHeader title="Review Notes" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.review_screenshot,
-        id: 'review_screenshot',
-        header: ({ column }) => <DataGridColumnHeader title="Review Screenshot" column={column} />,
-        enableSorting: false,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
+          headerClassName: 'w-[150px] text-center',
+          cellClassName: 'text-center'
         }
       }
-      // ,
-      // {
-      //   id: 'actions',
-      //   header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   cell: (data) => {
-      //     const row = data.row.original;
-      //     return (
-      //       <>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleEditDialog(true, row.feedback_id)}
-      //         >
-      //           <KeenIcon icon="notepad-edit" />
-      //         </button>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleDeleteDialog(true, row.feedback_id)}
-      //         >
-      //           <KeenIcon icon="trash" />
-      //         </button>
-      //       </>
-      //     );
-      //   },
-      //   meta: {
-      //     headerClassName: 'w-[100px] text-center',
-      //     cellClassName: 'text-center'
-      //   }
-      // }
     ],
-    [handleEditDialog, handleDeleteDialog]
+    [handleEditDialog, handleDeleteDialog, handleDetailDialog]
   );
 
   const getfeedbackLists = async (page: number, limit: number, sorting: any, filter: any) => {
@@ -167,7 +176,6 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
     }
   };
 
-
   return (
     <ManageFeedbackMemberContext.Provider
       value={{
@@ -178,11 +186,20 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
         handleAddDialog,
         showDeleteDialog,
         handleDeleteDialog,
+        showDetailDialog,
+        handleDetailDialog,
         selectedfeedback,
         getfeedbackLists
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
+      
+      {/* Feedback Detail Modal Component */}
+      <FeedbackDetail 
+        showDialog={showDetailDialog}
+        handleDialog={(show) => handleDetailDialog(show, show ? selectedfeedback : null)}
+        feedbackId={selectedfeedback}
+      />
 
       <DataGridProvider
         columns={columns}
@@ -201,5 +218,5 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
   );
 };
 
-export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider};
-export type { feedbackProps };
+export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider };
+export type { feedbackProps };