refactor: adjust layout and styling in DetailNotification and ListNotification components; remove pagination in LogHistoryCard for improved UI
This commit is contained in:
@@ -645,200 +645,199 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</>
|
||||
);
|
||||
|
||||
const renderDetailsNotification = () => {
|
||||
if (!selectedNotification) return null;
|
||||
|
||||
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
||||
<Row gutter={[16, 16]}>
|
||||
{/* Kolom Kiri: Data Kompresor */}
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title=""
|
||||
size="small"
|
||||
style={{ height: '100%', borderColor: '#d4380d' }}
|
||||
bodyStyle={{ padding: '12px' }}
|
||||
>
|
||||
<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>{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">
|
||||
const renderDetailsNotification = () => {
|
||||
if (!selectedNotification) return null;
|
||||
|
||||
const { IconComponent, color } = getIconAndColor(selectedNotification.type);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||
<Row gutter={[16, 8]}>
|
||||
{/* Kolom Kiri: Data Kompresor */}
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title=""
|
||||
size="small"
|
||||
style={{ height: '100%', borderColor: '#d4380d' }}
|
||||
bodyStyle={{ padding: '12px' }}
|
||||
>
|
||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
||||
<Row gutter={16} align="middle">
|
||||
<Col>
|
||||
<Text style={{ fontSize: '12px', color: color }}>
|
||||
Value
|
||||
</Text>
|
||||
<div
|
||||
style={{
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
color: color,
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#d4380d',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#ffffff',
|
||||
fontSize: '18px',
|
||||
}}
|
||||
>
|
||||
N/A
|
||||
<CloseOutlined />
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
Treshold
|
||||
</Text>
|
||||
<div style={{ fontWeight: 500 }}>N/A</div>
|
||||
<Text>{selectedNotification.title}</Text>
|
||||
<div style={{ marginTop: '2px' }}>
|
||||
<Text strong style={{ fontSize: '16px' }}>
|
||||
{selectedNotification.issue}
|
||||
</Text>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* Kolom Kanan: Informasi Teknis */}
|
||||
<Col span={12}>
|
||||
<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>
|
||||
<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>
|
||||
<div>
|
||||
<Text strong>Tag</Text>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
backgroundColor: '#f0f0f0',
|
||||
padding: '2px 6px',
|
||||
border: '1px solid #d4380d',
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
{/* Kolom Kanan: Informasi Teknis */}
|
||||
<Col span={12}>
|
||||
<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>
|
||||
<Text strong>Tag</Text>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
backgroundColor: '#f0f0f0',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{selectedNotification.tag}
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
|
||||
<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>
|
||||
<Row gutter={[16, 8]}>
|
||||
<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>
|
||||
</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
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
||||
Reference in New Issue
Block a user