updating feedback member

src/pages/members/feedback-member/blocks/FeedbackDetail.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { format } from 'date-fns';
+
+interface FeedbackDetailProps {
+  showDialog: boolean;
+  handleDialog: (show: boolean) => void;
+  feedbackId: string | null;
+}
+
+interface FeedbackDetailData {
+  Feedback_id: string;
+  Feedback_feedback_notes: string;
+  Feedback_feedback_screenshoot: string;
+  Feedback_review_notes: string;
+  Feedback_emotion: string;
+  Feedback_review_screenshoot: string | null;
+  Feedback_category: string;
+  Feedback_status: string;
+  Feedback_created_at: string;
+  Feedback_review_by: string | null;
+  Feedback_review_at: string;
+  Feedback_deleted_by: string | null;
+  Feedback_deleted_at: string | null;
+  Feedback_createdById: string;
+}
+
+const API_URL = apiConfig.service_feedback;
+
+const FeedbackDetail: React.FC<FeedbackDetailProps> = ({ showDialog, handleDialog, feedbackId }) => {
+  const [feedbackDetail, setFeedbackDetail] = useState<FeedbackDetailData | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const { GetData } = useCallApi();
+
+  useEffect(() => {
+    const fetchFeedbackDetail = async () => {
+      if (!feedbackId) return;
+
+      setLoading(true);
+      try {
+        const response = await GetData(`${API_URL}/feedback/${feedbackId}`,{});
+        if (response?.data) {
+          setFeedbackDetail(response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching feedback detail:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (showDialog && feedbackId) {
+      fetchFeedbackDetail();
+    } else {
+      setFeedbackDetail(null);
+    }
+  }, [showDialog, feedbackId, GetData]);
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return '-';
+    try {
+      return format(new Date(dateString), 'yyyy-MM-dd HH:mm:ss');
+    } catch (e) {
+      return dateString;
+    }
+  };
+
+  const getEmotionText = (emotion: string) => {
+    const emotions: Record<string, string> = {
+      '1': 'Very Disappointed',
+      '2': 'Disappointed',
+      '3': 'Happy',
+      '4': 'Very Happy',
+      '5': 'Extremely Happy'
+    };
+    return emotions[emotion] || emotion;
+  };
+
+  const getStatusText = (status: string) => {
+    const statuses: Record<string, string> = {
+      'W': 'Waiting',
+      'P': 'Processed',
+      'D': 'Done'
+    };
+    return statuses[status] || status;
+  };
+
+  return (
+    <Dialog open={showDialog} onOpenChange={handleDialog}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Feedback Detail</DialogTitle>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex justify-center items-center p-8">
+            <div className="spinner-border text-primary" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
+          </div>
+        ) : feedbackDetail ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="form-group">
+                <label className="form-label font-semibold">Feedback ID</label>
+                <div>{feedbackDetail.Feedback_id}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Category</label>
+                <div>{feedbackDetail.Feedback_category}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Emotion</label>
+                <div>{getEmotionText(feedbackDetail.Feedback_emotion)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Status</label>
+                <div>{getStatusText(feedbackDetail.Feedback_status)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Created At</label>
+                <div>{formatDate(feedbackDetail.Feedback_created_at)}</div>
+              </div>
+              
+              <div className="form-group">
+                <label className="form-label font-semibold">Created By</label>
+                <div>{feedbackDetail.Feedback_createdById}</div>
+              </div>
+            </div>
+            
+            <div className="form-group">
+              <label className="form-label font-semibold">Feedback Notes</label>
+              <div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_feedback_notes}</div>
+            </div>
+            
+            {feedbackDetail.Feedback_feedback_screenshoot && (
+              <div className="form-group">
+                <label className="form-label font-semibold">Feedback Screenshot</label>
+                <div>
+                  <img 
+                    src={feedbackDetail.Feedback_feedback_screenshoot.replace(/^'|'$/g, '')} 
+                    alt="Feedback Screenshot" 
+                    className="max-h-64 rounded"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                      (e.target as HTMLImageElement).parentElement?.appendChild(
+                        Object.assign(document.createElement('div'), {
+                          className: 'text-sm text-gray-500',
+                          textContent: 'Image not available or invalid URL'
+                        })
+                      );
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            
+            <div className="form-group">
+              <label className="form-label font-semibold">Review Notes</label>
+              <div className="p-3 bg-gray-50 rounded">{feedbackDetail.Feedback_review_notes || '-'}</div>
+            </div>
+            
+            {feedbackDetail.Feedback_review_screenshoot && (
+              <div className="form-group">
+                <label className="form-label font-semibold">Review Screenshot</label>
+                <div>
+                  <img 
+                    src={feedbackDetail.Feedback_review_screenshoot} 
+                    alt="Review Screenshot"
+                    className="max-h-64 rounded"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                      (e.target as HTMLImageElement).parentElement?.appendChild(
+                        Object.assign(document.createElement('div'), {
+                          className: 'text-sm text-gray-500',
+                          textContent: 'Image not available or invalid URL'
+                        })
+                      );
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="p-4 text-center text-gray-500">No feedback details found</div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default FeedbackDetail;

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: 'actions',
-        id: 'feedback_screenshot',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-        header: ({ column }) => <DataGridColumnHeader title="Feedback Screenshot" 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]'
+          headerClassName: 'w-[150px] text-center',
-        }
+          cellClassName: 'text-center'
-      },
-      {
-        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]'
         }
       }
-      // ,
-      // {
-      //   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,12 +186,21 @@ 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}
         pagination={{ size: 10 }}
@@ -201,5 +218,5 @@ const ManageFeedbackMemberProvider = ({ children }: { children: React.ReactNode
   );
 };
 
-export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider};
+export { ManageFeedbackMemberContext, ManageFeedbackMemberProvider };
 export type { feedbackProps };