From 7e5105392c9a846cf21db7115b8111ca66fe312c Mon Sep 17 00:00:00 2001
From: Iqbal Rizqi Kurniawan <iqbalrzq20@gmail.com>
Date: Tue, 25 Nov 2025 10:22:55 +0700
Subject: [PATCH] feat: add activity log functionality with log history display
 and input for new logs

---
 .../IndexDetailNotification.jsx               | 126 +++++++++++++++++-
 1 file changed, 123 insertions(+), 3 deletions(-)

diff --git a/src/pages/detailNotification/IndexDetailNotification.jsx b/src/pages/detailNotification/IndexDetailNotification.jsx
index 0cd67a9..66f177b 100644
--- a/src/pages/detailNotification/IndexDetailNotification.jsx
+++ b/src/pages/detailNotification/IndexDetailNotification.jsx
@@ -80,6 +80,37 @@ const DetailNotificationTab = () => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [modalContent, setModalContent] = useState(null); // 'user', 'log', atau null
+    const [isAddingLog, setIsAddingLog] = useState(false);
+
+    const logHistoryData = [
+        {
+            id: 1,
+            timestamp: '04-11-2025 11:55 WIB',
+            addedBy: {
+                name: 'Budi Santoso',
+                phone: '081122334455',
+            },
+            description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
+        },
+        {
+            id: 2,
+            timestamp: '04-11-2025 11:45 WIB',
+            addedBy: {
+                name: 'John Doe',
+                phone: '081234567890',
+            },
+            description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
+        },
+        {
+            id: 3,
+            timestamp: '04-11-2025 11:40 WIB',
+            addedBy: {
+                name: 'Jane Smith',
+                phone: '087654321098',
+            },
+            description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
+        },
+    ];
 
     useEffect(() => {
         const fetchDetail = async () => {
@@ -212,9 +243,98 @@ const DetailNotificationTab = () => {
                         </Row>
 
                         <Row gutter={[16, 16]}>
-                            <Col xs={24} md={8}><Card size="small" title="Guideline Documents" style={{ height: '100%' }}><Space direction="vertical" size="small" style={{ width: '100%' }}><Card size="small" hoverable><Text><FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf</Text><Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link></Card><Card size="small" hoverable><Text><FilePdfOutlined style={{ marginRight: '8px' }} /> SOP Kompresor.pdf</Text><Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link></Card></Space></Card></Col>
-                            <Col xs={24} md={8}><Card size="small" title="Required Spare Parts" style={{ height: '100%' }}><Space direction="vertical" size="small" style={{ width: '100%' }}><Card size="small"><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: '#52c41a', fontWeight: 500 }}>Available</Text></Col><Col span={17}><Text strong>Air Filter</Text><Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>Filters incoming air to remove dust.</Paragraph></Col></Row></Card></Space></Card></Col>
-                            <Col xs={24} md={8}><Card size="small" title="Activity Log" style={{ height: '100%' }} extra={<Button type="primary" onClick={() => setModalContent('log')}>View Logs</Button>}><div style={{ textAlign: 'center', padding: '20px' }}><HistoryOutlined style={{ fontSize: '32px', color: '#bfbfbf' }} /><Text block type="secondary" style={{ marginTop: '8px' }}>Click 'View Logs' to see the full activity history.</Text></div></Card></Col>
+                            <Col xs={24} md={8}>
+                                <Card size="small" title="Guideline Documents" style={{ height: '100%' }}>
+                                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                                        <Card size="small" hoverable>
+                                            <Text><FilePdfOutlined style={{ marginRight: '8px' }} /> Error 303.pdf</Text>
+                                            <Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link>
+                                        </Card>
+                                        <Card size="small" hoverable>
+                                            <Text><FilePdfOutlined style={{ marginRight: '8px' }} /> SOP Kompresor.pdf</Text>
+                                            <Link href="#" target="_blank" style={{ fontSize: '12px', display: 'block', marginLeft: '24px' }}>lihat disini</Link>
+                                        </Card>
+                                    </Space>
+                                </Card>
+                            </Col>
+                            <Col xs={24} md={8}>
+                                <Card size="small" title="Required Spare Parts" style={{ height: '100%' }}>
+                                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                                        <Card size="small">
+                                            <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: '#52c41a', fontWeight: 500 }}>Available</Text>
+                                                </Col>
+                                                <Col span={17}>
+                                                    <Text strong>Air Filter</Text>
+                                                    <Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>Filters incoming air to remove dust.</Paragraph>
+                                                </Col>
+                                            </Row>
+                                        </Card>
+                                    </Space>
+                                </Card>
+                            </Col>
+                            <Col span={8}>
+                            <Card size="small" style={{ height: '100%' }}>
+                                <Space direction="vertical" size="small" style={{ width: '100%' }}>
+                                    <Card
+                                        size="small"
+                                        bodyStyle={{
+                                            padding: '8px 12px',
+                                            backgroundColor: isAddingLog ? '#fafafa' : '#fff',
+                                        }}
+                                    >
+                                        <Space
+                                            direction="vertical"
+                                            style={{ width: '100%' }}
+                                            size="small"
+                                        >
+                                            {isAddingLog && (
+                                                <>
+                                                    <Text strong style={{ fontSize: '12px' }}>
+                                                        Add New Log / Update Progress
+                                                    </Text>
+                                                    <Input.TextArea
+                                                        rows={2}
+                                                        placeholder="Tuliskan update penanganan di sini..."
+                                                    />
+                                                </>
+                                            )}
+                                            <Button
+                                                type={isAddingLog ? 'primary' : 'dashed'}
+                                                size="small"
+                                                block
+                                                icon={!isAddingLog && <PlusOutlined />}
+                                                onClick={() => setIsAddingLog(!isAddingLog)}
+                                            >
+                                                {isAddingLog ? 'Submit Log' : 'Add Log'}
+                                            </Button>
+                                        </Space>
+                                    </Card>
+                                    {logHistoryData.map((log) => (
+                                        <Card
+                                            key={log.id}
+                                            size="small"
+                                            bodyStyle={{ padding: '8px 12px' }}
+                                        >
+                                            <Paragraph
+                                                style={{ fontSize: '12px', margin: 0 }}
+                                                ellipsis={{ rows: 2 }}
+                                            >
+                                                <Text strong>{log.addedBy.name}:</Text>{' '}
+                                                {log.description}
+                                            </Paragraph>
+                                            <Text type="secondary" style={{ fontSize: '11px' }}>
+                                                {log.timestamp}
+                                            </Text>
+                                        </Card>
+                                    ))}
+                                </Space>
+                            </Card>
+                        </Col>
                         </Row>
                     </Space>
                 </Card>