lavoce #27

Merged
bragaz_rexita merged 42 commits from lavoce into main 2025-12-22 09:28:35 +00:00
3 changed files with 206 additions and 205 deletions
Showing only changes of commit e23215b6c1 - Show all commits

View File

@@ -1,5 +1,5 @@
import React, { memo } from 'react'; import React, { memo } from 'react';
import { Row, Col, Tag, Divider, Card, Button } from 'antd'; import { Row, Col, Tag, Card, Button } from 'antd';
import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons'; import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';
const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) { const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
@@ -47,6 +47,7 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
title="Detail Notifikasi" title="Detail Notifikasi"
extra={<Button onClick={onClose}>Tutup</Button>} extra={<Button onClick={onClose}>Tutup</Button>}
style={{ height: '100%' }} style={{ height: '100%' }}
bodyStyle={{ padding: '0 24px' }}
> >
<div> <div>
{/* Header with Icon and Status */} {/* Header with Icon and Status */}
@@ -54,91 +55,87 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '16px', gap: '8px',
marginBottom: '24px', marginBottom: '0',
padding: '16px', padding: '2px 0',
backgroundColor: '#fafafa', backgroundColor: '#fafafa',
borderRadius: '8px', borderRadius: '8px',
}} }}
> >
<div <div
style={{ style={{
width: '64px', width: '32px',
height: '64px', height: '32px',
borderRadius: '50%', borderRadius: '50%',
backgroundColor: bgColor, backgroundColor: bgColor,
color: color, color: color,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
fontSize: '32px', fontSize: '18px',
flexShrink: 0, flexShrink: 0,
}} }}
> >
{IconComponent && <IconComponent style={{ fontSize: '32px' }} />} {IconComponent && <IconComponent style={{ fontSize: '18px' }} />}
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Tag color={tagColor} style={{ marginBottom: '8px', fontSize: '12px' }}> <Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
{selectedData.type.toUpperCase()} {selectedData.type.toUpperCase()}
</Tag> </Tag>
<div style={{ fontSize: '16px', fontWeight: 600, color: '#262626' }}> <div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
{selectedData.title} {selectedData.title}
</div> </div>
</div> </div>
</div> </div>
<Divider style={{ margin: '16px 0' }} />
{/* Information Grid */} {/* Information Grid */}
<Row gutter={[16, 16]}> <Row gutter={[16, 0]}>
<Col span={12}> <Col span={12}>
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}> <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
PLC PLC
</div> </div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}> <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.plc} {selectedData.plc}
</div> </div>
</div> </div>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}>Tag</div> <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}> <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.tag} {selectedData.tag}
</div> </div>
</div> </div>
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]}> <Row gutter={[16, 0]}>
<Col span={12}> <Col span={12}>
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}> <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
Engineer Engineer
</div> </div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}> <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.engineer} {selectedData.engineer}
</div> </div>
</div> </div>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '4px' }}> <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
Waktu Waktu
</div> </div>
<div style={{ fontSize: '14px', color: '#262626', fontWeight: 500 }}> <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
{selectedData.time} {selectedData.time}
</div> </div>
</div> </div>
</Col> </Col>
</Row> </Row>
<Divider style={{ margin: '16px 0' }} />
{/* Status */} {/* Status */}
<div style={{ marginBottom: '16px' }}> <div style={{ marginBottom: '2px' }}>
<div style={{ fontSize: '12px', color: '#8c8c8c', marginBottom: '8px' }}>Status</div> <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '2px' }}>Status</div>
<Tag color={selectedData.isRead ? 'default' : 'blue'}> <Tag color={selectedData.isRead ? 'default' : 'blue'}>
{selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'} {selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
</Tag> </Tag>
@@ -147,14 +144,14 @@ const DetailNotification = memo(function DetailNotification({ selectedData, onCl
{/* Additional Info */} {/* Additional Info */}
<div <div
style={{ style={{
marginTop: '16px', marginTop: '0',
padding: '12px', padding: '4px',
backgroundColor: '#f6f9ff', backgroundColor: '#f6f9ff',
borderRadius: '6px', borderRadius: '6px',
border: '1px solid #d6e4ff', border: '1px solid #d6e4ff',
}} }}
> >
<div style={{ fontSize: '12px', color: '#595959' }}> <div style={{ fontSize: '11px', color: '#595959' }}>
<strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan <strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan
untuk ditindaklanjuti sesuai dengan prosedur yang berlaku. untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
</div> </div>

View File

@@ -645,200 +645,199 @@ const ListNotification = memo(function ListNotification(props) {
</> </>
); );
const renderDetailsNotification = () => { const renderDetailsNotification = () => {
if (!selectedNotification) return null; if (!selectedNotification) return null;
const { IconComponent, color } = getIconAndColor(selectedNotification.type); const { IconComponent, color } = getIconAndColor(selectedNotification.type);
return ( return (
<Space direction="vertical" size="large" style={{ width: '100%' }}> <Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={[16, 16]}> <Row gutter={[16, 8]}>
{/* Kolom Kiri: Data Kompresor */} {/* Kolom Kiri: Data Kompresor */}
<Col span={12}> <Col span={12}>
<Card <Card
title="" title=""
size="small" size="small"
style={{ height: '100%', borderColor: '#d4380d' }} style={{ height: '100%', borderColor: '#d4380d' }}
bodyStyle={{ padding: '12px' }} bodyStyle={{ padding: '12px' }}
> >
<Space direction="vertical" size="large" style={{ width: '100%' }}> <Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={16} align="middle"> <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>{selectedNotification.title}</Text>
<div style={{ marginTop: '2px' }}>
<Text strong style={{ fontSize: '16px' }}>
{selectedNotification.issue}
</Text>
</div>
</Col>
</Row>
<div>
<Text strong>Plant Subsection</Text>
<div>{selectedNotification.subsection}</div>
<Text strong style={{ display: 'block', marginTop: '8px' }}>
Time
</Text>
<div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
</div>
<div
style={{
border: '1px solid #d4380d',
borderRadius: '4px',
padding: '8px',
background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
}}
>
<Row justify="space-around" align="middle">
<Col> <Col>
<Text style={{ fontSize: '12px', color: color }}>
Value
</Text>
<div <div
style={{ style={{
fontWeight: 'bold', width: '32px',
fontSize: '16px', height: '32px',
color: color, borderRadius: '50%',
backgroundColor: '#d4380d',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#ffffff',
fontSize: '18px',
}} }}
> >
N/A <CloseOutlined />
</div> </div>
</Col> </Col>
<Col> <Col>
<Text type="secondary" style={{ fontSize: '12px' }}> <Text>{selectedNotification.title}</Text>
Treshold <div style={{ marginTop: '2px' }}>
</Text> <Text strong style={{ fontSize: '16px' }}>
<div style={{ fontWeight: 500 }}>N/A</div> {selectedNotification.issue}
</Text>
</div>
</Col> </Col>
</Row> </Row>
</div> <div>
</Space> <Text strong>Plant Subsection</Text>
</Card> <div>{selectedNotification.subsection}</div>
</Col> <Text strong style={{ display: 'block', marginTop: '8px' }}>
Time
{/* Kolom Kanan: Informasi Teknis */} </Text>
<Col span={12}> <div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<div>
<Text strong>PLC</Text>
<div>{selectedNotification.plc}</div>
</div>
<div>
<Text strong>Status</Text>
<div style={{ color: '#faad14', fontWeight: 500 }}>
{selectedNotification.status}
</div> </div>
</div>
<div>
<Text strong>Tag</Text>
<div <div
style={{ style={{
fontFamily: 'monospace', border: '1px solid #d4380d',
backgroundColor: '#f0f0f0',
padding: '2px 6px',
borderRadius: '4px', borderRadius: '4px',
display: 'inline-block', padding: '8px',
background: 'linear-gradient(to right, #ffe7e6, #ffffff)',
}} }}
> >
{selectedNotification.tag} <Row justify="space-around" align="middle">
<Col>
<Text style={{ fontSize: '12px', color: color }}>
Value
</Text>
<div
style={{
fontWeight: 'bold',
fontSize: '16px',
color: color,
}}
>
N/A
</div>
</Col>
<Col>
<Text type="secondary" style={{ fontSize: '12px' }}>
Treshold
</Text>
<div style={{ fontWeight: 500 }}>N/A</div>
</Col>
</Row>
</div> </div>
</div>
</Space>
</Card>
</Col>
</Row>
<div>
<Row gutter={[16, 16]}>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Handling Guideline
</Text>
</Space> </Space>
</Card> </Card>
</Col> </Col>
<Col span={8}>
<Card {/* Kolom Kanan: Informasi Teknis */}
style={{ <Col span={12}>
display: 'flex', <Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
alignItems: 'center', <Space direction="vertical" size="middle" style={{ width: '100%' }}>
justifyContent: 'center', <div>
cursor: 'pointer', <Text strong>PLC</Text>
}} <div>{selectedNotification.plc}</div>
bodyStyle={{ padding: '12px' }} </div>
> <div>
<Space> <Text strong>Status</Text>
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} /> <div style={{ color: '#faad14', fontWeight: 500 }}>
<Text strong style={{ fontSize: '16px', color: '#262626' }}> {selectedNotification.status}
Spare Part </div>
</Text> </div>
</Space> <div>
</Card> <Text strong>Tag</Text>
</Col> <div
<Col span={8}> style={{
<Card fontFamily: 'monospace',
style={{ backgroundColor: '#f0f0f0',
display: 'flex', padding: '2px 6px',
alignItems: 'center', borderRadius: '4px',
justifyContent: 'center', display: 'inline-block',
cursor: 'pointer', }}
}} >
bodyStyle={{ padding: '12px' }} {selectedNotification.tag}
onClick={() => setModalContent('log')} </div>
> </div>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Log Activity
</Text>
</Space> </Space>
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]} style={{ marginTop: '16px' }}> <div>
<Col span={8}> <Row gutter={[16, 8]}>
<Card size="small" style={{ height: '100%' }}> <Col span={8}>
<Space direction="vertical" size="small" style={{ width: '100%' }}> <Card
<Card style={{
size="small" display: 'flex',
bodyStyle={{ padding: '8px 12px' }} alignItems: 'center',
hoverable justifyContent: 'center',
extra={ cursor: 'pointer',
<Text type="secondary" style={{ fontSize: '10px' }}> }}
PDF bodyStyle={{ padding: '12px' }}
</Text> >
} <Space>
> <BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Handling Guideline
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
>
<Space>
<ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} />
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Spare Part
</Text>
</Space>
</Card>
</Col>
<Col span={8}>
<Card
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
}}
bodyStyle={{ padding: '12px' }}
onClick={() => setModalContent('log')}
>
<Space>
<HistoryOutlined
style={{ fontSize: '16px', color: '#1890ff' }}
/>
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
Log Activity
</Text>
</Space>
</Card>
</Col>
</Row>
<Row gutter={[16, 8]} style={{ marginTop: '0' }}>
<Col span={8}>
<Card size="small" style={{ height: '100%' }}>
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<Card
size="small"
bodyStyle={{ padding: '8px 12px' }}
hoverable
extra={
<Text type="secondary" style={{ fontSize: '10px' }}>
PDF
</Text>
} >
<div <div
style={{ style={{
display: 'flex', display: 'flex',

View File

@@ -76,12 +76,17 @@ const LogHistoryCard = ({ notificationData }) => {
const logHistoryData = getDummyLogHistory(notificationData); const logHistoryData = getDummyLogHistory(notificationData);
return ( return (
<Card title="Log History" size="small" style={{ height: '100%' }}> <Card
title="Log History"
size="small"
style={{ height: '100%' }}
>
<Table <Table
columns={columns} columns={columns}
dataSource={logHistoryData} dataSource={logHistoryData}
pagination={{ pageSize: 3, size: 'small' }} pagination={false} // Remove pagination entirely
size="small" size="small"
scroll={{ y: 200 }} // Use scroll for overflow, adjust height as needed
/> />
</Card> </Card>
); );