From 8e151ffe0b070aefc30077c727d2d231f791aa53 Mon Sep 17 00:00:00 2001
From: zain94rif <zainul94rifin@gmail.com>
Date: Wed, 7 Jan 2026 17:07:42 +0700
Subject: [PATCH] fix(comp): modified the card in notification detail

---
 .../component/ListNotification.jsx            |   3 -
 .../IndexNotificationDetail.jsx               | 175 ++++++------------
 2 files changed, 55 insertions(+), 123 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 3d57194..5ab0f87 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -612,9 +612,6 @@ const ListNotification = memo(function ListNotification(props) {
                                         icon={<SendOutlined />}
                                         onClick={async () => {
                                             await resendChatByUser(user.id, user.phone);
-                                            // message.info(
-                                            //     'Resend feature is not available yet. This feature is still under development.'
-                                            // );
                                         }}
                                     >
                                         Resend
diff --git a/src/pages/notificationDetail/IndexNotificationDetail.jsx b/src/pages/notificationDetail/IndexNotificationDetail.jsx
index cdcf0fe..b39171f 100644
--- a/src/pages/notificationDetail/IndexNotificationDetail.jsx
+++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx
@@ -14,6 +14,8 @@ import {
     message,
     Avatar,
     Tag,
+    Badge,
+    Divider,
 } from 'antd';
 import {
     ArrowLeftOutlined,
@@ -33,6 +35,8 @@ import {
     CheckCircleOutlined,
     SyncOutlined,
     SendOutlined,
+    MobileOutlined,
+    ClockCircleOutlined,
 } from '@ant-design/icons';
 import {
     getNotificationDetail,
@@ -40,6 +44,7 @@ import {
     getNotificationLogByNotificationId,
     updateIsRead,
     resendNotificationToUser,
+    resendChatByUser,
 } from '../../api/notification';
 
 const { Content } = Layout;
@@ -108,8 +113,19 @@ const getUsersFromNotification = (notification) => {
         id: user.notification_error_user_id.toString(),
         name: user.contact_name,
         phone: user.contact_phone,
-        status: user.is_send ? 'sent' : 'pending',
+        status: user.is_send ? 'Delivered' : 'Pending',
         loading: user.loading || false,
+        timestamp: user.updated_at
+            ? new Date(user.updated_at)
+                  .toLocaleString('id-ID', {
+                      day: '2-digit',
+                      month: '2-digit',
+                      year: 'numeric',
+                      hour: '2-digit',
+                      minute: '2-digit',
+                  })
+                  .replace('.', ':') + ' WIB'
+            : 'N/A',
     }));
 };
 
@@ -466,137 +482,56 @@ const NotificationDetailTab = (props) => {
                                                     <Row align="middle" justify="space-between">
                                                         <Col>
                                                             <Space align="center">
-                                                                <Avatar
-                                                                    size="large"
-                                                                    icon={<UserOutlined />}
+                                                                <Text strong>{user.name}k</Text>
+                                                                <Text>|</Text>
+                                                                <Text>
+                                                                    <MobileOutlined /> {user.phone}
+                                                                </Text>
+                                                                <Text>|</Text>
+                                                                <Badge
+                                                                    status={
+                                                                        user.status === 'Delivered'
+                                                                            ? 'success'
+                                                                            : 'default'
+                                                                    }
+                                                                    text={user.status}
                                                                 />
-                                                                <div>
-                                                                    <Text strong>{user.name}</Text>
-                                                                    <div
-                                                                        style={{
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            gap: '4px',
-                                                                        }}
-                                                                    >
-                                                                        <PhoneOutlined
-                                                                            style={{
-                                                                                color: '#8c8c8c',
-                                                                            }}
-                                                                        />
-                                                                        <Text type="secondary">
-                                                                            {user.phone}
-                                                                        </Text>
-                                                                    </div>
-                                                                </div>
+                                                            </Space>
+                                                            <Divider style={{ margin: '8px 0' }} />
+                                                            <Space align="center">
+                                                                {user.status === 'Delivered' ? (
+                                                                    <CheckCircleFilled
+                                                                        style={{ color: '#52c41a' }}
+                                                                    />
+                                                                ) : (
+                                                                    <ClockCircleOutlined
+                                                                        style={{ color: '#faad14' }}
+                                                                    />
+                                                                )}
+                                                                <Text type="secondary">
+                                                                    {user.status === 'Delivered'
+                                                                        ? 'Success Delivered at'
+                                                                        : 'Status '}{' '}
+                                                                    {user.timestamp}
+                                                                </Text>
                                                             </Space>
                                                         </Col>
                                                         <Col>
-                                                            <Space align="center" size="large">
-                                                                {getStatusTag(user.status)}
+                                                            <Col>
                                                                 <Button
                                                                     type="primary"
+                                                                    ghost
                                                                     icon={<SendOutlined />}
-                                                                    size="small"
-                                                                    loading={user.loading}
-                                                                    onClick={async (e) => {
-                                                                        e.stopPropagation();
-                                                                        const userId = parseInt(
-                                                                            user.id
+                                                                    onClick={async () => {
+                                                                        await resendChatByUser(
+                                                                            user.id,
+                                                                            user.phone
                                                                         );
-                                                                        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
                                                                 </Button>
-                                                            </Space>
+                                                            </Col>
                                                         </Col>
                                                     </Row>
                                                 </Card>