TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating feedback member

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-22 00:51:05 +07:00
parent 910ee5b14c
commit 039b4d05e0
2 changed files with 276 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/pages/members/feedback-member/blocks/FeedbackDetail.tsx Normal file
View 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;