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