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

refactor: adjust layout and styling in DetailNotification and ListNotification components; remove pagination in LogHistoryCard for improved UI

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-12-11 09:53:44 +07:00
parent a014d6b370
commit e23215b6c1
3 changed files with 206 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/notification/component/DetailNotification.jsx
View File

@@ -1,5 +1,5 @@
import React, { memo } from 'react';
import { Row, Col, Tag, Divider, Card, Button } from 'antd';
import { Row, Col, Tag, Card, Button } from 'antd';
import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
@@ -47,6 +47,7 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
title="Detail Notifikasi"
extra={<Button onClick={onClose}>Tutup</Button>}
style={{ height: '100%' }}
bodyStyle={{ padding: '0 24px' }}
>
<div>
{/* Header with Icon and Status */}
@@ -54,91 +55,87 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
style={{
display: 'flex',
alignItems: 'center',
gap: '16px',
marginBottom: '24px',
padding: '16px',
gap: '8px',
marginBottom: '0',
padding: '2px 0',
backgroundColor: '#fafafa',
borderRadius: '8px',
}}
>
<div
style={{
width: '64px',
height: '64px',
width: '32px',
height: '32px',
borderRadius: '50%',
backgroundColor: bgColor,
color: color,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '32px',
fontSize: '18px',
flexShrink: 0,
}}
>
{IconComponent && <IconComponent style={{ fontSize: '32px' }} />}
{IconComponent && <IconComponent style={{ fontSize: '18px' }} />}
</div>
<div style={{ flex: 1 }}>
<Tag color={tagColor} style={{ marginBottom: '8px', fontSize: '12px' }}>
<Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
{selectedData.type.toUpperCase()}
</Tag>
<div style={{ fontSize: '16px', fontWeight: 600, color: '#262626' }}>
<div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
{selectedData.title}
</div>
</div>
</div>
<Divider style={{ margin: '16px 0' }} />
{/* Information Grid */}
<Row gutter={[16, 16]}>
<Row gutter={[16, 0]}>
<Col span={12}>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
<div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
PLC
</div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.plc}
</div>
</div>
</Col>
<Col span={12}>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>Tag</div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
<div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.tag}
</div>
</div>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Row gutter={[16, 0]}>
<Col span={12}>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
<div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
Engineer
</div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.engineer}
</div>
</div>
</Col>
<Col span={12}>
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>
<div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
Waktu
</div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}>
<div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.time}
</div>
</div>
</Col>
</Row>
<Divider style={{ margin: '16px 0' }} />
{/* Status */}
<div style={{ marginBottom: '16px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>Status</div>
<div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '2px' }}>Status</div>
<Tag color={selectedData.isRead ? 'default' : 'blue'}>
{selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
</Tag>
@@ -147,14 +144,14 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
{/* Additional Info */}
<div
style={{
marginTop: '16px',
padding: '12px',
marginTop: '0',
padding: '4px',
backgroundColor: '#f6f9ff',
borderRadius: '6px',
border: '1px solid #d6e4ff',
}}
>
<div style={{ fontSize: '12px', color: '#595959' }}>
<div style={{ fontSize: '11px', color: '#595959' }}>
<strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan
untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
</div>