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

refactor: enhance notification log layout and styling for better readability

Browse Source
This commit is contained in:
Rafiafrzl
2025-12-24 11:51:39 +07:00
parent beb8ccbaee
commit 167abcaa43
1 changed files with 96 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -639,97 +639,108 @@ const ListNotification = memo(function ListNotification(props) {
Tidak ada log history
</div>
) : (
<div style={{ padding: '0 16px', position: 'relative' }}>
{/* Garis vertikal yang menyambung */}
<div
style={{
position: 'absolute',
top: '7px',
left: '23px',
bottom: '7px',
width: '2px',
backgroundColor: '#91d5ff',
zIndex: 0,
}}
></div>
<div
style={{
height: '400px',
overflowY: 'auto',
padding: '0 16px',
position: 'relative',
border: '1px solid #f0f0f0',
borderRadius: '4px'
}}
>
<div style={{ position: 'relative' }}>
{/* Garis vertikal yang menyambung */}
<div
style={{
position: 'absolute',
top: '7px',
left: '23px',
bottom: '7px',
width: '2px',
backgroundColor: '#91d5ff',
zIndex: 0,
}}
></div>
{logHistoryData.map((log, index) => (
<Row
key={log.id}
wrap={false}
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
>
{/* Kolom Kiri: Branch/Timeline */}
<Col
style={{
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: '16px',
}}
{logHistoryData.map((log, index) => (
<Row
key={log.id}
wrap={false}
style={{ marginBottom: '16px', position: 'relative', zIndex: 1 }}
>
<div
{/* Kolom Kiri: Branch/Timeline */}
<Col
style={{
width: '14px',
height: '14px',
backgroundColor: '#fff',
border: '3px solid #1890ff',
borderRadius: '50%',
zIndex: 1,
flexShrink: 0,
position: 'relative',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginRight: '16px',
}}
></div>
</Col>
>
<div
style={{
width: '14px',
height: '14px',
backgroundColor: '#fff',
border: '3px solid #1890ff',
borderRadius: '50%',
zIndex: 1,
flexShrink: 0,
}}
></div>
</Col>
{/* Kolom Kanan: Card */}
<Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}>
<Row gutter={[16, 8]} align="middle">
<Col xs={24} md={12}>
<Space direction="vertical" size={4}>
<Space>
<ClockCircleOutlined />
<Text
type="secondary"
style={{ fontSize: '12px' }}
>
Added at {log.timestamp}
</Text>
{/* Kolom Kanan: Card */}
<Col flex="auto">
<Card size="small" style={{ borderColor: '#91d5ff' }}>
<Row gutter={[16, 8]} align="middle">
<Col xs={24} md={12}>
<Space direction="vertical" size={4}>
<Space>
<ClockCircleOutlined />
<Text
type="secondary"
style={{ fontSize: '12px' }}
>
Added at {log.timestamp}
</Text>
</Space>
<div>
<Text strong>Added by: {log.addedBy.name}</Text>
<span
style={{
marginLeft: '8px',
border: '1px solid #52c41a',
color: '#52c41a',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
}}
>
<MobileOutlined /> {log.addedBy.phone}
</span>
</div>
</Space>
<div>
<Text strong>Added by: {log.addedBy.name}</Text>
<span
style={{
marginLeft: '8px',
border: '1px solid #52c41a',
color: '#52c41a',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
}}
>
<MobileOutlined /> {log.addedBy.phone}
</span>
</div>
</Space>
</Col>
<Col xs={24} md={12}>
<Paragraph
style={{
color: '#595959',
margin: 0,
fontSize: '13px',
}}
>
{log.description}
</Paragraph>
</Col>
</Row>
</Card>
</Col>
</Row>
))}
</Col>
<Col xs={24} md={12}>
<Paragraph
style={{
color: '#595959',
margin: 0,
fontSize: '13px',
}}
>
{log.description}
</Paragraph>
</Col>
</Row>
</Card>
</Col>
</Row>
))}
</div>
</div>
)}
</>