updating feedback member
This commit is contained in:
bagusajisaputroo
199
src/pages/members/feedback-member/blocks/FeedbackDetail.tsx
Normal file
199
src/pages/members/feedback-member/blocks/FeedbackDetail.tsx
Normal file
@ -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;
|
||||
@ -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 };
|
||||
Reference in New Issue
Block a user