feat: add activity log functionality with log history display and input for new logs
This commit is contained in:
@@ -80,6 +80,37 @@ const DetailNotificationTab = () => {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [modalContent, setModalContent] = useState(null); // 'user', 'log', atau 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(() => {
|
useEffect(() => {
|
||||||
const fetchDetail = async () => {
|
const fetchDetail = async () => {
|
||||||
@@ -212,9 +243,98 @@ const DetailNotificationTab = () => {
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row gutter={[16, 16]}>
|
<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}>
|
||||||
<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>
|
<Card size="small" title="Guideline Documents" style={{ height: '100%' }}>
|
||||||
<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>
|
<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>
|
</Row>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user