Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

2025-04-22 14:53:57 +07:00
parent 484162b7f6 fc0295b8bc
commit a97c43e8b4
14 changed files with 385 additions and 147 deletions
--- a/public/media/avatars/profile.png
+++ b/public/media/avatars/profile.png
--- a/src/layouts/demo2/header/HeaderTopbar.tsx
+++ b/src/layouts/demo2/header/HeaderTopbar.tsx
@ -15,7 +15,7 @@ const HeaderTopbar = () => {
  const handleDropdownChatShow = () => {
    window.dispatchEvent(new Event('resize'));
  };
-  console.log(getAuth())
+  // console.log(getAuth())
  return (
 <div className="flex items-center gap-4">
  <div className="hidden md:flex flex-col items-end mr-2 text-right">
@ -43,7 +43,7 @@ const HeaderTopbar = () => {
      <MenuToggle className="btn btn-icon rounded-full">
        <img
          className="w-9 h-9 rounded-full border border-gray-500 object-cover"
-          src={toAbsoluteUrl('/media/avatars/blank.png')}
+          src={toAbsoluteUrl('/media/avatars/profile.png')}
          alt="User avatar"
        />
      </MenuToggle>
--- a/src/pages/dashboards/home/DashboardHomePage.tsx
+++ b/src/pages/dashboards/home/DashboardHomePage.tsx
@ -45,7 +45,7 @@ const DashboardHomePage = () => {
  useEffect(() => {
    if (selectYear.length > 0 && !selectedYear) {
      let latestYear = Math.max(...selectYear.map((item) => parseInt(item, 10))).toString();
-      console.log('latestYear :', latestYear);
+      // console.log('latestYear :', latestYear);
      setSelectedYear(latestYear);
      setInitialYear(latestYear);
    }
--- a/src/pages/members/feedback-member/blocks/FeedbackDetail.tsx
+++ b/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;
--- a/src/pages/members/feedback-member/hooks/ManageFeedbackMemberContext.tsx
+++ b/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 };
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@ -158,7 +158,6 @@ const ManageMembers = () => {
        createMember.pin = 'admin';
        delete createMember.password;
        delete createMember.try_pin;
-        delete createMember.license_number;
        delete createMember.isneedapproval;
        delete createMember.isapproved;
        delete createMember.approveddate;
--- a/src/pages/members/manage-members/blocks/DetailMember.tsx
+++ b/src/pages/members/manage-members/blocks/DetailMember.tsx
@ -70,7 +70,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
            setFormData({ ...formData, [name]: value });
        } else {
            if (name === 'municipio_id' || name === 'posto_adms_id' || name === 'suco_id') await getMasterAfter(name, value);
-            setFormData({ ...formData, [name]: value });
+            if (name==='msisdn') setFormData({ ...formData, [name]: value.replace(/\D/g, '') })
+            else setFormData({ ...formData, [name]: value });
        }
    };

--- a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
@ -26,7 +26,7 @@ const API_URL = apiConfig.transaction;

 const ApprovalDialog = () => {
    const { GetData, PostData } = useCallApi();
-    // const { table, reload } = useDataGrid();
+    const {  reload } = useDataGrid();

    const {
        showApprovalDialog,
@ -85,7 +85,7 @@ const ApprovalDialog = () => {
                };
                doSaveLogActivity(createActivity);
                setShowApprovalDialog(false);
-                // reload();
+                reload();
            } else {
                setAlert({ show: true, message: response?.message });
            }
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@ -42,7 +42,15 @@ const DetailApprovalTransaction = () => {
        }
    }, [showDetailDialog, selectedTransactionId, GetData]);

-    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+    const [activeTab, setActiveTab] = useState('detail');
+
+    // Reset ke tab awal saat dialog dibuka
+    useEffect(() => {
+        if (showDetailDialog) {
+            setActiveTab('detail');
+        }
+    }, [showDetailDialog]);
+

    return (
        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
--- a/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
+++ b/src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
@ -326,8 +326,6 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
      }}
    >
      <Toaster expand visibleToasts={9} duration={3000} />
-      <DetailApprovalTransaction />
-      <ApprovalDialog />

      <DataGridProvider
        columns={columns}
@ -340,6 +338,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
          getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
        }
      >
+        <DetailApprovalTransaction />
+        <ApprovalDialog />
        {children}
      </DataGridProvider>
    </ManageApprovalTransactionContext.Provider>
--- a/src/pages/transaction/history-transaction/Transaction.tsx
+++ b/src/pages/transaction/history-transaction/Transaction.tsx
@ -29,7 +29,7 @@ const Transaction = () => {
          <div className="grid gap-5 lg:gap-7.5">
            <DataGridInner />
          </div>
-          <ResendTransaction />
+          {/* <ResendTransaction /> */}
        </Container>
      </TransactionProvider>
    </>
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@ -1,12 +1,14 @@
 import { useTransactionContext } from '../hooks/useTransactionContext';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import ResendTransaction from './ResendTransaction';
 import {
    Dialog,
    DialogBody,
    DialogContent,
    DialogDescription,
+    DialogFooter,
    DialogHeader,
    DialogTitle
 } from '@/components/ui/dialog';
@ -23,6 +25,16 @@ const DetailTransaction = () => {

    const [transactionDetails, setTransactionDetails] = useState<any>(null);

+    const [showResend, setResend] = useState(false);
+
+    const handleResendOpen = () => {
+        setResend(true);
+    };
+
+    const handleResendClose = () => {
+        setResend(false);
+    };
+
    useEffect(() => {
        const fetchTransactionDetails = async () => {
            if (selectedTransactionId) {
@ -42,7 +54,15 @@ const DetailTransaction = () => {
        }
    }, [showDetailDialog, selectedTransactionId, GetData]);

-    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+    const [activeTab, setActiveTab] = useState('detail');
+
+    // Reset ke tab awal saat dialog dibuka
+    useEffect(() => {
+        if (showDetailDialog) {
+            setActiveTab('detail');
+        }
+    }, [showDetailDialog]);
+

    return (
        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -622,10 +642,20 @@ const DetailTransaction = () => {
                        )}

                    </div>
+
+                    {/* {showResendDialog} */}
+                    {(transactionDetails?.status === 'F' || transactionDetails?.status === 'P') && transactionDetails?.status_approve !== 'W' && (
+                        <div className="flex justify-end mt-4">
+                            <button className="btn btn-primary" onClick={handleResendOpen}>Retry Transaction</button>
+                            <ResendTransaction isOpen={showResend} onClose={handleResendClose} selectedTransactionForResend={transactionDetails} />
+                        </div>
+                    )}
+
+
                </DialogBody>
            </DialogContent>
        </Dialog>
    );
 };

-export default DetailTransaction;
+export default DetailTransaction;
--- a/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx
@ -19,10 +19,18 @@ import { Input } from '@/components/ui/input';

 const API_URL = apiConfig.transaction;

-const ResendTransaction = () => {
-    const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
+interface ResendTransactionProps {
+    isOpen: boolean | null;
+    onClose: () => void | null;
+    selectedTransactionForResend: any | null; // Adjust the type as per your requirements
+}
+
+const ResendTransaction = ({ isOpen, onClose, selectedTransactionForResend }: ResendTransactionProps) => {
+
+
+    // const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext();
    const { GetData, PostData } = useCallApi();
-    const { reload } = useDataGrid();
+    // const { reload } = useDataGrid();
    const [transactionDetails, setTransactionDetails] = useState<any>(null);
    const [alert, setAlert] = useState({
        show: false,
@ -34,38 +42,42 @@ const ResendTransaction = () => {
    const [formField, setFormField] = useState(initialStatePin);

    useEffect(() => {
-        if (showResendDialog) {
+        // if (showResendDialog) {
+        if (isOpen) {
            // Reset form fields when dialog opens
            setFormField({
                pin: ''
            });
            setAlert({ show: false, message: '' });
-            setTransactionDetails(null); // Optional reset
+            // setTransactionDetails(null); // Optional reset
        }
-    }, [showResendDialog]);
+    }, [isOpen]);

-    useEffect(() => {
-        const fetchTransactionDetails = async () => {
-            if (selectedTransactionForResend) {
-                try {
-                    const response = await GetData(
-                        `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
-                        {
-                            id: selectedTransactionForResend,
-                        }
-                    );
-                    setTransactionDetails(response?.data);
-                } catch (error) {
-                    console.error('Error fetching transaction', error);
-                }
-            }
+    // useEffect(() => {
+    //     const fetchTransactionDetails = async () => {
+    //         if (selectedTransactionForResend) {
+    //             try {
+    //                 const response = await GetData(
+    //                     `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`,
+    //                     {
+    //                         id: selectedTransactionForResend,
+    //                     }
+    //                 );
+    //                 setTransactionDetails(response?.data);
+    //             } catch (error) {
+    //                 console.error('Error fetching transaction', error);
+    //             }
+    //         }

-        };
+    //     };
+
+    //     if (isOpen && selectedTransactionForResend) {
+    //         fetchTransactionDetails();
+    //     }
+    // }, [isOpen, selectedTransactionForResend, GetData]);
+
+    // console.log(selectedTransactionForResend);

-        if (showResendDialog && selectedTransactionForResend) {
-            fetchTransactionDetails();
-        }
-    }, [showResendDialog, selectedTransactionForResend, GetData]);

    const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => {

@ -146,9 +158,9 @@ const ResendTransaction = () => {

        if (response?.status) {
            setAlert({ show: false, message: '' });
-            handleResendDialog(false, null);
+            // handleResendDialog(false, null);
            toast.success('Success Retry Transaction');
-            reload();
+            // reload();

            const createActivity = {
                module: 'History Transaction',
@ -161,17 +173,20 @@ const ResendTransaction = () => {
            setAlert({ show: true, message: response?.message });
            toast.error('Failed Retry Transaction');
        }
-    }, [selectedTransactionForResend, PostData, handleResendDialog, reload]);
+    }, [selectedTransactionForResend, PostData]);
+
+    if (!isOpen) return null;
+

    return (
-        <Dialog open={showResendDialog} onOpenChange={(open) => handleResendDialog(open, null)}>
+        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
                <DialogHeader className="p-0 border-0 block">
                    <DialogTitle></DialogTitle>
                    <DialogDescription></DialogDescription>
                    <Alert variant="warning">
                        <h3 className="text-lg">Are you sure?</h3>
-                        <span className="text-sm">You will retry this transaction!</span>
+                        <p className="text-sm">You will retry this transaction!</p>
                    </Alert>
                    {alert.show && (
                        <Alert variant="danger">
@ -188,14 +203,16 @@ const ResendTransaction = () => {
                        type="password"
                        value={formField.pin}
                        onChange={(e) => setFormField({ ...formField, pin: e.target.value })}
-                    /></DialogBody>
+                    />
+                </DialogBody>
                <DialogFooter className="flex justify-end items-center gap-4 mt-3">
-                    <Button variant="outline" onClick={() => handleResendDialog(false, null)}>
+                    <button onClick={onClose}>Close</button>
+                    {/* <Button variant="outline" onClick={() => handleResendDialog(false, null)}>
                        Cancel
-                    </Button>
-                    <Button variant="default" onClick={() => doResendTransaction(transactionDetails, formField.pin)}>
+                    </Button> */}
+                    <button className="btn btn-primary" onClick={() => doResendTransaction(selectedTransactionForResend, formField.pin)}>
                        Retry
-                    </Button>
+                    </button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
--- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
+++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
@ -2,16 +2,11 @@ import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
 import { Toaster } from '@/components/ui/sonner';
 import { apiConfig } from '@/config/api.config';
 import { ColumnDef } from '@tanstack/react-table';
-import axios from 'axios';
-import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { useCallApi } from '@/hooks';
 import ListToolbar from '../blocks/ListToolbar';
-import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
-import { log } from 'console';
-import ResendTransaction from '../blocks/ResendTransaction';
-import { comment } from 'stylis';

 interface TransactionProps {
  id: number;
@ -31,9 +26,6 @@ interface ContextProps {
  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
  selectedTransactionId: number | null;
  setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
-  showResendDialog: boolean;
-  handleResendDialog: (show: boolean, selected_transaction: string | null) => void;
-  selectedTransactionForResend: string | null;
 }

 const initialProps: ContextProps = {
@ -41,10 +33,7 @@ const initialProps: ContextProps = {
  showDetailDialog: false,
  setShowDetailDialog: () => { },
  selectedTransactionId: null,
-  setSelectedTransactionId: () => { },
-  showResendDialog: false,
-  handleResendDialog: (show: boolean, selected_transaction: string | null) => { },
-  selectedTransactionForResend: null
+  setSelectedTransactionId: () => { }
 };

 const ManageTransactionContext = createContext<ContextProps>(initialProps);
@ -59,13 +48,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
  const handleNavigate = (path: string) => {
    const url = navigate(`${API_URL}/transaction/history/${path}`);
  };
-  const [showResendDialog, setShowResendDialog] = useState(false);
-  const [selectedTransactionForResend, setSelectedTransactionForResend] = useState<string | null>(null);
-
-  const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => {
-    setSelectedTransactionForResend(show ? selected_transaction : null);
-    setShowResendDialog(show);
-  }, []);


  const columns = useMemo<ColumnDef<any>[]>(
@ -236,18 +218,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
              >
                <KeenIcon icon="eye" />
              </button>
-              {/* add new button for resend transaction failed */}
-              {isVisible &&
-                <button
-                  className="btn btn-sm btn-icon btn-clear btn-light"
-                  title="Retry Transaction"
-                  onClick={() => {
-                    handleResendDialog(true, row.id);
-                  }}
-                >
-                  <KeenIcon icon="abstract-37" />
-                </button>
-              }
            </div>
          );
        },
@ -257,7 +227,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
        }
      }
    ],
-    [handleResendDialog]);
+    []);

  const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
    try {
@ -346,10 +316,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
        showDetailDialog,
        setShowDetailDialog,
        selectedTransactionId,
-        setSelectedTransactionId,
-        showResendDialog,
-        handleResendDialog,
-        selectedTransactionForResend
+        setSelectedTransactionId
      }}
    >
      <Toaster expand visibleToasts={9} duration={3000} />