From 3fe5fbef317f93d70a582ab482bf9434c6a0e6e3 Mon Sep 17 00:00:00 2001
From: Fachba <fachrulsecond@gmail.com>
Date: Wed, 29 Apr 2026 17:38:38 +0700
Subject: [PATCH] Update DetailDevice component to set 'listen_channel' to null
 and modify NotificationDetailTab to enhance the display of spare part
 reminders and update the title from 'Error Notification Detail' to
 'Notification Detail'.

---
 .../master/device/component/DetailDevice.jsx  |   2 +-
 .../IndexNotificationDetail.jsx               | 273 ++++++++++++++----
 2 files changed, 212 insertions(+), 63 deletions(-)

diff --git a/src/pages/master/device/component/DetailDevice.jsx b/src/pages/master/device/component/DetailDevice.jsx
index 8ba0c7b..815fe5e 100644
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/src/pages/master/device/component/DetailDevice.jsx
@@ -36,7 +36,7 @@ const DetailDevice = (props) => {
         device_description: '',
         ip_address: '',
         reminder_at: null,
-        listen_channel: '',
+        listen_channel: null,
     };
 
     const [formData, setFormData] = useState(defaultData);
diff --git a/src/pages/notificationDetail/IndexNotificationDetail.jsx b/src/pages/notificationDetail/IndexNotificationDetail.jsx
index 86dad89..7f55bc9 100644
--- a/src/pages/notificationDetail/IndexNotificationDetail.jsx
+++ b/src/pages/notificationDetail/IndexNotificationDetail.jsx
@@ -353,7 +353,7 @@ const NotificationDetailTab = (props) => {
                             }}
                         >
                             <Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
-                                Error Notification Detail
+                                Notification Detail
                             </Typography.Title>
                         </div>
                     </div>
@@ -361,59 +361,214 @@ const NotificationDetailTab = (props) => {
                     <Space direction="vertical" size="small" style={{ width: '100%' }}>
                         <Row gutter={[8, 8]}>
                             {/* Kolom Kiri: Data Kompresor */}
-                            <Col xs={24} lg={8}>
-                                <Card
-                                    size="small"
-                                    style={{ height: '100%', borderColor: '#d4380d' }}
-                                    bodyStyle={{ padding: '16px' }}
-                                >
-                                    <Space
-                                        direction="vertical"
-                                        size="large"
-                                        style={{ width: '100%' }}
-                                    >
-                                        <Row gutter={16} align="middle">
-                                            <Col>
-                                                <div
-                                                    style={{
-                                                        width: '32px',
-                                                        height: '32px',
-                                                        borderRadius: '50%',
-                                                        backgroundColor: '#d4380d',
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        color: '#ffffff',
-                                                        fontSize: '18px',
-                                                    }}
-                                                >
-                                                    <CloseOutlined />
-                                                </div>
-                                            </Col>
-                                            <Col>
-                                                <Text>{notification.title}</Text>
-                                                <div style={{ marginTop: '2px' }}>
-                                                    <Text strong style={{ fontSize: '16px' }}>
-                                                        Error Code {notification.issue}
-                                                    </Text>
-                                                </div>
-                                            </Col>
-                                        </Row>
-                                        <div>
-                                            <Text strong>Plant Subsection</Text>
-                                            <div>{notification.location}</div>
-                                            <Text
-                                                strong
-                                                style={{ display: 'block', marginTop: '8px' }}
-                                            >
-                                                Date & Time
-                                            </Text>
-                                            <div>{notification.timestamp}</div>
-                                        </div>
-                                    </Space>
-                                </Card>
-                            </Col>
 
+                            {notification.is_reminder && (
+                                <Col xs={24} md={8}>
+                                    <div>
+                                        <Card hoverable bodyStyle={{ padding: '12px' }}>
+                                            <Space>
+                                                <ToolOutlined
+                                                    style={{ fontSize: '16px', color: '#1890ff' }}
+                                                />
+                                                <Text
+                                                    strong
+                                                    style={{ fontSize: '16px', color: '#262626' }}
+                                                >
+                                                    Spare Part Reminder Maintenance
+                                                </Text>
+                                            </Space>
+
+                                            <Space
+                                                direction="vertical"
+                                                size="small"
+                                                style={{ width: '100%' }}
+                                            >
+                                                {notification.spareparts_reminder &&
+                                                notification.spareparts_reminder.length > 0 ? (
+                                                    notification.spareparts_reminder.map(
+                                                        (sparepart, index) => (
+                                                            <Card
+                                                                size="small"
+                                                                key={index}
+                                                                bodyStyle={{ padding: '12px' }}
+                                                                hoverable
+                                                            >
+                                                                <Row gutter={16} align="top">
+                                                                    <Col
+                                                                        span={7}
+                                                                        style={{
+                                                                            textAlign: 'center',
+                                                                        }}
+                                                                    >
+                                                                        <div
+                                                                            style={{
+                                                                                width: '100%',
+                                                                                height: '60px',
+                                                                                backgroundColor:
+                                                                                    '#f0f0f0',
+                                                                                display: 'flex',
+                                                                                alignItems:
+                                                                                    'center',
+                                                                                justifyContent:
+                                                                                    'center',
+                                                                                borderRadius: '4px',
+                                                                                marginBottom: '8px',
+                                                                            }}
+                                                                        >
+                                                                            <ToolOutlined
+                                                                                style={{
+                                                                                    fontSize:
+                                                                                        '24px',
+                                                                                    color: '#bfbfbf',
+                                                                                }}
+                                                                            />
+                                                                        </div>
+                                                                        <Text
+                                                                            style={{
+                                                                                fontSize: '12px',
+                                                                                color:
+                                                                                    sparepart.sparepart_stok ===
+                                                                                        'Available' ||
+                                                                                    sparepart.sparepart_stok ===
+                                                                                        'available'
+                                                                                        ? '#52c41a'
+                                                                                        : '#ff4d4f',
+                                                                                fontWeight: 500,
+                                                                            }}
+                                                                        >
+                                                                            {
+                                                                                sparepart.sparepart_stok
+                                                                            }
+                                                                        </Text>
+                                                                    </Col>
+                                                                    <Col span={17}>
+                                                                        <Space
+                                                                            direction="vertical"
+                                                                            size={4}
+                                                                            style={{
+                                                                                width: '100%',
+                                                                            }}
+                                                                        >
+                                                                            <Text strong>
+                                                                                {
+                                                                                    sparepart.sparepart_name
+                                                                                }
+                                                                            </Text>
+                                                                            <Paragraph
+                                                                                style={{
+                                                                                    fontSize:
+                                                                                        '12px',
+                                                                                    margin: 0,
+                                                                                    color: '#595959',
+                                                                                }}
+                                                                            >
+                                                                                {sparepart.sparepart_description ||
+                                                                                    'Deskripsi tidak tersedia'}
+                                                                            </Paragraph>
+                                                                            <div
+                                                                                style={{
+                                                                                    border: '1px solid #d9d9d9',
+                                                                                    borderRadius:
+                                                                                        '4px',
+                                                                                    padding:
+                                                                                        '4px 8px',
+                                                                                    fontSize:
+                                                                                        '11px',
+                                                                                    color: '#8c8c8c',
+                                                                                    marginTop:
+                                                                                        '8px',
+                                                                                }}
+                                                                            >
+                                                                                Kode:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_code
+                                                                                }{' '}
+                                                                                | Qty:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_qty
+                                                                                }{' '}
+                                                                                | Unit:{' '}
+                                                                                {
+                                                                                    sparepart.sparepart_unit
+                                                                                }
+                                                                            </div>
+                                                                        </Space>
+                                                                    </Col>
+                                                                </Row>
+                                                            </Card>
+                                                        )
+                                                    )
+                                                ) : (
+                                                    <div
+                                                        style={{
+                                                            textAlign: 'center',
+                                                            padding: '20px',
+                                                            color: '#8c8c8c',
+                                                        }}
+                                                    >
+                                                        Tidak ada spare parts terkait
+                                                    </div>
+                                                )}
+                                            </Space>
+                                        </Card>
+                                    </div>
+                                </Col>
+                            )}
+                            
+                            {!notification.is_reminder && (
+                                <Col xs={24} lg={8}>
+                                    <Card
+                                        size="small"
+                                        style={{ height: '100%', borderColor: '#d4380d' }}
+                                        bodyStyle={{ padding: '16px' }}
+                                    >
+                                        <Space
+                                            direction="vertical"
+                                            size="large"
+                                            style={{ width: '100%' }}
+                                        >
+                                            <Row gutter={16} align="middle">
+                                                <Col>
+                                                    <div
+                                                        style={{
+                                                            width: '32px',
+                                                            height: '32px',
+                                                            borderRadius: '50%',
+                                                            backgroundColor: '#d4380d',
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            color: '#ffffff',
+                                                            fontSize: '18px',
+                                                        }}
+                                                    >
+                                                        <CloseOutlined />
+                                                    </div>
+                                                </Col>
+                                                <Col>
+                                                    <Text>{notification.title}</Text>
+                                                    <div style={{ marginTop: '2px' }}>
+                                                        <Text strong style={{ fontSize: '16px' }}>
+                                                            Error Code {notification.issue}
+                                                        </Text>
+                                                    </div>
+                                                </Col>
+                                            </Row>
+                                            <div>
+                                                <Text strong>Plant Subsection</Text>
+                                                <div>{notification.location}</div>
+                                                <Text
+                                                    strong
+                                                    style={{ display: 'block', marginTop: '8px' }}
+                                                >
+                                                    Date & Time
+                                                </Text>
+                                                <div>{notification.timestamp}</div>
+                                            </div>
+                                        </Space>
+                                    </Card>
+                                </Col>
+                            )}
                             {/* Kolom Tengah: Informasi Teknis */}
                             <Col xs={24} lg={8}>
                                 <Card
@@ -545,10 +700,7 @@ const NotificationDetailTab = (props) => {
                         <Row gutter={[8, 8]}>
                             <Col xs={24} md={8}>
                                 <div>
-                                    <Card
-                                        hoverable
-                                        bodyStyle={{ padding: '12px'}}
-                                    >
+                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
                                         <Space>
                                             <BookOutlined
                                                 style={{ fontSize: '16px', color: '#1890ff' }}
@@ -700,10 +852,7 @@ const NotificationDetailTab = (props) => {
                             </Col>
                             <Col xs={24} md={8}>
                                 <div>
-                                    <Card
-                                        hoverable
-                                        bodyStyle={{ padding: '12px'}}
-                                    >
+                                    <Card hoverable bodyStyle={{ padding: '12px' }}>
                                         <Space>
                                             <ToolOutlined
                                                 style={{ fontSize: '16px', color: '#1890ff' }}
@@ -828,7 +977,7 @@ const NotificationDetailTab = (props) => {
                             </Col>
                             <Col xs={24} md={8}>
                                 <div>
-                                    <Card bodyStyle={{ padding: '12px'}}>
+                                    <Card bodyStyle={{ padding: '12px' }}>
                                         <Space>
                                             <HistoryOutlined
                                                 style={{ fontSize: '16px', color: '#1890ff' }}