diff --git a/src/api/notification.jsx b/src/api/notification.jsx
index 2e04cf8..67daa9a 100644
--- a/src/api/notification.jsx
+++ b/src/api/notification.jsx
@@ -46,10 +46,20 @@ const getNotificationLogByNotificationId = async (notificationId) => {
return response.data;
};
+// Resend notification to specific user
+const resendNotificationToUser = async (notificationId, userId) => {
+ const response = await SendRequest({
+ method: 'post',
+ prefix: `notification/${notificationId}/resend/${userId}`,
+ });
+ return response.data;
+};
+
export {
getAllNotification,
getNotificationById,
getNotificationDetail,
createNotificationLog,
- getNotificationLogByNotificationId
+ getNotificationLogByNotificationId,
+ resendNotificationToUser,
};
diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index a959cd9..88df8de 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -38,7 +38,11 @@ import {
SearchOutlined,
} from '@ant-design/icons';
import { useNavigate, Link as RouterLink } from 'react-router-dom';
-import { getAllNotification, getNotificationLogByNotificationId } from '../../../api/notification';
+import {
+ getAllNotification,
+ getNotificationLogByNotificationId,
+ getNotificationDetail,
+} from '../../../api/notification';
const { Text, Paragraph, Link: AntdLink } = Typography;
@@ -77,31 +81,6 @@ const transformNotificationData = (apiData) => {
}));
};
-// Dummy data untuk user history
-const userHistoryData = [
- {
- id: '1',
- name: 'John Doe',
- phone: '081234567890',
- status: 'Delivered',
- timestamp: '04-11-2025 11:40 WIB',
- },
- {
- id: '2',
- name: 'Jane Smith',
- phone: '087654321098',
- status: 'Delivered',
- timestamp: '04-11-2025 11:41 WIB',
- },
- {
- id: '3',
- name: 'Peter Jones',
- phone: '082345678901',
- status: 'Delivered',
- timestamp: '04-11-2025 11:42 WIB',
- },
-];
-
const ListNotification = memo(function ListNotification(props) {
const [notifications, setNotifications] = useState([]);
const [activeTab, setActiveTab] = useState('all');
@@ -113,6 +92,8 @@ const ListNotification = memo(function ListNotification(props) {
const [selectedNotification, setSelectedNotification] = useState(null);
const [logHistoryData, setLogHistoryData] = useState([]);
const [logLoading, setLogLoading] = useState(false);
+ const [userHistoryData, setUserHistoryData] = useState([]);
+ const [userLoading, setUserLoading] = useState(false);
const [pagination, setPagination] = useState({
current_page: 1,
current_limit: 10,
@@ -290,6 +271,42 @@ const ListNotification = memo(function ListNotification(props) {
}
};
+ // Fetch user history from API
+ const fetchUserHistory = async (notificationId) => {
+ try {
+ setUserLoading(true);
+
+ const response = await getNotificationDetail(notificationId);
+
+ if (response && response.data && response.data.users) {
+ // Transform API data to component format
+ const transformedUsers = response.data.users.map((user) => ({
+ id: user.notification_error_user_id.toString(),
+ name: user.contact_name,
+ phone: user.contact_phone,
+ status: user.is_send ? 'Delivered' : 'Pending',
+ timestamp: user.created_at
+ ? new Date(user.created_at).toLocaleString('id-ID', {
+ day: '2-digit',
+ month: '2-digit',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }) + ' WIB'
+ : 'N/A',
+ }));
+ setUserHistoryData(transformedUsers);
+ } else {
+ setUserHistoryData([]);
+ }
+ } catch (err) {
+ console.error('Error fetching user history:', err);
+ setUserHistoryData([]); // Set empty array on error
+ } finally {
+ setUserLoading(false);
+ }
+ };
+
const tabButtonStyle = (isActive) => ({
padding: '12px 16px',
border: 'none',
@@ -467,8 +484,18 @@ const ListNotification = memo(function ListNotification(props) {
border: '1px solid #1890ff',
borderRadius: '4px',
}}
- onClick={(e) => {
+ onClick={async (e) => {
e.stopPropagation();
+
+ setSelectedNotification(notification);
+
+ // Extract notification ID from the notification object
+ const notificationId =
+ notification.id.split('-')[1];
+
+ // Fetch user history for the selected notification
+ await fetchUserHistory(notificationId);
+
setModalContent('user');
}}
/>
@@ -535,37 +562,69 @@ const ListNotification = memo(function ListNotification(props) {
const renderUserHistory = () => (
<>
-
- {userHistoryData.map((user) => (
-
-
-
-
- {user.name}
- |
-
- {user.phone}
-
- |
-
-
-
-
-
-
- Success Delivered at {user.timestamp}
-
-
-
-
- }>
- Resend
-
-
-
-
- ))}
-
+ {userLoading ? (
+
+
+
+ ) : (
+
+ {userHistoryData.map((user) => (
+
+
+
+
+ {user.name}
+ |
+
+ {user.phone}
+
+ |
+
+
+
+
+ {user.status === 'Delivered' ? (
+
+ ) : (
+
+ )}
+
+ {user.status === 'Delivered'
+ ? 'Success Delivered at'
+ : 'Status '}{' '}
+ {user.timestamp}
+
+
+
+
+ }
+ onClick={() => {
+ message.info(
+ 'Resend feature is not available yet. This feature is still under development.'
+ );
+ }}
+ >
+ Resend
+
+
+
+
+ ))}
+ {userHistoryData.length === 0 && (
+
+ No user history available
+
+ )}
+
+ )}
);
diff --git a/src/pages/notificationDetail/IndexNotificationDetail.jsx b/src/pages/notificationDetail/IndexNotificationDetail.jsx
index 1a43f09..a3eb466 100644
--- a/src/pages/notificationDetail/IndexNotificationDetail.jsx
+++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx
@@ -38,6 +38,7 @@ import {
getNotificationDetail,
createNotificationLog,
getNotificationLogByNotificationId,
+ resendNotificationToUser,
} from '../../api/notification';
const { Content } = Layout;
@@ -94,38 +95,21 @@ const transformNotificationData = (apiData) => {
device_location: apiData.device_location,
brand_name: apiData.brand_name,
},
+ users: apiData.users || [],
};
};
-// Dummy data baru untuk user history
-const getDummyUsers = (notification) => {
- if (!notification) return [];
- return [
- {
- id: '1',
- name: 'John Doe',
- phone: '081234567890',
- status: 'delivered',
- },
- {
- id: '2',
- name: 'Jane Smith',
- phone: '082345678901',
- status: 'sent',
- },
- {
- id: '3',
- name: 'Bob Johnson',
- phone: '083456789012',
- status: 'failed',
- },
- {
- id: '4',
- name: 'Alice Brown',
- phone: '084567890123',
- status: 'delivered',
- },
- ];
+// Function to get actual users from notification data
+const getUsersFromNotification = (notification) => {
+ if (!notification || !notification.users) return [];
+
+ return notification.users.map((user) => ({
+ id: user.notification_error_user_id.toString(),
+ name: user.contact_name,
+ phone: user.contact_phone,
+ status: user.is_send ? 'sent' : 'pending',
+ loading: user.loading || false,
+ }));
};
const getStatusTag = (status) => {
@@ -469,7 +453,7 @@ const NotificationDetailTab = (props) => {
size={2}
style={{ width: '100%' }}
>
- {getDummyUsers(notification).map((user) => (
+ {getUsersFromNotification(notification).map((user) => (
{
type="primary"
icon={}
size="small"
- onClick={(e) => {
+ loading={user.loading}
+ onClick={async (e) => {
e.stopPropagation();
- console.log(
- `Resend to ${user.name}`
- );
+ const userId = parseInt(user.id);
+ try {
+ // Update user status to show loading
+ const updatedUsers = notification.users.map(u =>
+ u.notification_error_user_id === userId
+ ? { ...u, loading: true }
+ : u
+ );
+ setNotification({
+ ...notification,
+ users: updatedUsers
+ });
+
+ // Call the resend API
+ const response = await resendNotificationToUser(
+ notification.notification_error_id,
+ userId
+ );
+
+ if (response && response.statusCode === 200) {
+ message.success(`Notification resent to ${user.name}`);
+
+ // Update user status
+ const updatedUsersAfterSuccess = notification.users.map(u =>
+ u.notification_error_user_id === userId
+ ? {
+ ...u,
+ is_send: true,
+ status: 'sent',
+ loading: false
+ }
+ : { ...u, loading: false }
+ );
+ setNotification({
+ ...notification,
+ users: updatedUsersAfterSuccess
+ });
+ } else {
+ throw new Error(response?.message || 'Failed to resend notification');
+ }
+ } catch (error) {
+ console.error('Error resending notification:', error);
+ message.error(error.message || 'Failed to resend notification');
+
+ // Reset loading state
+ const resetUsers = notification.users.map(u =>
+ u.notification_error_user_id === userId
+ ? { ...u, loading: false }
+ : u
+ );
+ setNotification({
+ ...notification,
+ users: resetUsers
+ });
+ }
}}
>
Resend