From 167abcaa438f6e468a8795b07c4bd7af83700fde Mon Sep 17 00:00:00 2001
From: Rafiafrzl <mrafiafrizal0@gmail.com>
Date: Wed, 24 Dec 2025 11:51:39 +0700
Subject: [PATCH] refactor: enhance notification log layout and styling for
 better readability

---
 .../component/ListNotification.jsx            | 181 ++++++++++--------
 1 file changed, 96 insertions(+), 85 deletions(-)

diff --git a/src/pages/notification/component/ListNotification.jsx b/src/pages/notification/component/ListNotification.jsx
index 88df8de..9889007 100644
--- a/src/pages/notification/component/ListNotification.jsx
+++ b/src/pages/notification/component/ListNotification.jsx
@@ -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>
             )}
         </>