yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(comp): modified the card in notification detail

Browse Source
This commit is contained in:
zain94rif
2026-01-07 17:07:42 +07:00
parent fe8f6d1002
commit 8e151ffe0b
2 changed files with 55 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/notification/component/ListNotification.jsx
View File

@@ -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

175
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

@@ -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>