yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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'. #47

Merged
bragaz_rexita merged 1 commits from lavoce into main 2026-04-30 02:48:30 +00:00
Conversation 0 Commits 1 Files Changed 2 +212 -63
2 changed files with 212 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3fe5fbef31 - Show all commits

2
src/pages/master/device/component/DetailDevice.jsx
View File

@@ -36,7 +36,7 @@ const DetailDevice = (props) => {
device_description: '',
ip_address: '',
reminder_at: null,
listen_channel: '',
listen_channel: null,
};
const [formData, setFormData] = useState(defaultData);

171
src/pages/notificationDetail/IndexNotificationDetail.jsx
View File

@@ -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,6 +361,161 @@ const NotificationDetailTab = (props) => {
<Space direction="vertical" size="small" style={{ width: '100%' }}>
<Row gutter={[8, 8]}>
{/* Kolom Kiri: Data Kompresor */}
{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"
@@ -413,7 +568,7 @@ const NotificationDetailTab = (props) => {
</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' }}