lavoce #27
@@ -694,9 +694,9 @@ const ListNotification = memo(function ListNotification(props) {
|
|||||||
<Text strong>Plant Subsection</Text>
|
<Text strong>Plant Subsection</Text>
|
||||||
<div>{selectedNotification.subsection}</div>
|
<div>{selectedNotification.subsection}</div>
|
||||||
<Text strong style={{ display: 'block', marginTop: '8px' }}>
|
<Text strong style={{ display: 'block', marginTop: '8px' }}>
|
||||||
Time
|
Date & Time
|
||||||
</Text>
|
</Text>
|
||||||
<div>{selectedNotification.timestamp.split(' ')[1]} WIB</div>
|
<div>{selectedNotification.timestamp}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -1,17 +1,6 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { useParams, useNavigate } from 'react-router-dom';
|
import { useParams, useNavigate } from 'react-router-dom';
|
||||||
import {
|
import { Layout, Card, Row, Col, Typography, Space, Button, Spin, Result, Input } from 'antd';
|
||||||
Layout,
|
|
||||||
Card,
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Typography,
|
|
||||||
Space,
|
|
||||||
Button,
|
|
||||||
Spin,
|
|
||||||
Result,
|
|
||||||
Input,
|
|
||||||
} from 'antd';
|
|
||||||
import {
|
import {
|
||||||
ArrowLeftOutlined,
|
ArrowLeftOutlined,
|
||||||
CloseCircleFilled,
|
CloseCircleFilled,
|
||||||
@@ -38,7 +27,8 @@ const transformNotificationData = (apiData) => {
|
|||||||
// Extract nested data
|
// Extract nested data
|
||||||
const errorCodeData = apiData.error_code;
|
const errorCodeData = apiData.error_code;
|
||||||
// Get active solution (is_active: true)
|
// Get active solution (is_active: true)
|
||||||
const activeSolution = errorCodeData?.solution?.find(sol => sol.is_active) || errorCodeData?.solution?.[0] || {};
|
const activeSolution =
|
||||||
|
errorCodeData?.solution?.find((sol) => sol.is_active) || errorCodeData?.solution?.[0] || {};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
id: `notification-${apiData.notification_error_id}-0`,
|
id: `notification-${apiData.notification_error_id}-0`,
|
||||||
@@ -46,13 +36,15 @@ const transformNotificationData = (apiData) => {
|
|||||||
title: errorCodeData?.error_code_name || 'Unknown Error',
|
title: errorCodeData?.error_code_name || 'Unknown Error',
|
||||||
issue: errorCodeData?.error_code || 'Unknown Error',
|
issue: errorCodeData?.error_code || 'Unknown Error',
|
||||||
description: apiData.message_error_issue || 'No details available',
|
description: apiData.message_error_issue || 'No details available',
|
||||||
timestamp: apiData.created_at ? new Date(apiData.created_at).toLocaleString('id-ID', {
|
timestamp: apiData.created_at
|
||||||
day: '2-digit',
|
? new Date(apiData.created_at).toLocaleString('id-ID', {
|
||||||
month: '2-digit',
|
day: '2-digit',
|
||||||
year: 'numeric',
|
month: '2-digit',
|
||||||
hour: '2-digit',
|
year: 'numeric',
|
||||||
minute: '2-digit',
|
hour: '2-digit',
|
||||||
}) + ' WIB' : 'N/A',
|
minute: '2-digit',
|
||||||
|
}) + ' WIB'
|
||||||
|
: 'N/A',
|
||||||
location: apiData.plant_sub_section_name || 'Location not specified',
|
location: apiData.plant_sub_section_name || 'Location not specified',
|
||||||
details: apiData.message_error_issue || 'No details available',
|
details: apiData.message_error_issue || 'No details available',
|
||||||
isRead: apiData.is_read || false,
|
isRead: apiData.is_read || false,
|
||||||
@@ -67,15 +59,20 @@ const transformNotificationData = (apiData) => {
|
|||||||
spareparts: errorCodeData?.spareparts || [],
|
spareparts: errorCodeData?.spareparts || [],
|
||||||
solution: {
|
solution: {
|
||||||
...activeSolution,
|
...activeSolution,
|
||||||
path_document: activeSolution.path_document ? activeSolution.path_document.replace('/detail-notification/pdf/', '/notification-detail/pdf/') : activeSolution.path_document
|
path_document: activeSolution.path_document
|
||||||
|
? activeSolution.path_document.replace(
|
||||||
|
'/detail-notification/pdf/',
|
||||||
|
'/notification-detail/pdf/'
|
||||||
|
)
|
||||||
|
: activeSolution.path_document,
|
||||||
}, // Include the active solution data with fixed URL
|
}, // Include the active solution data with fixed URL
|
||||||
error_code: errorCodeData,
|
error_code: errorCodeData,
|
||||||
device_info: {
|
device_info: {
|
||||||
device_code: apiData.device_code,
|
device_code: apiData.device_code,
|
||||||
device_name: apiData.device_name,
|
device_name: apiData.device_name,
|
||||||
device_location: apiData.device_location,
|
device_location: apiData.device_location,
|
||||||
brand_name: apiData.brand_name
|
brand_name: apiData.brand_name,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -145,7 +142,6 @@ const NotificationDetailTab = () => {
|
|||||||
} else {
|
} else {
|
||||||
throw new Error('Notification not found');
|
throw new Error('Notification not found');
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
setError(err.message);
|
setError(err.message);
|
||||||
console.error('Error fetching notification detail:', err);
|
console.error('Error fetching notification detail:', err);
|
||||||
@@ -159,7 +155,14 @@ const NotificationDetailTab = () => {
|
|||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<Layout style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
<Layout
|
||||||
|
style={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Spin size="large" />
|
<Spin size="large" />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
@@ -167,12 +170,23 @@ const NotificationDetailTab = () => {
|
|||||||
|
|
||||||
if (error || !notification) {
|
if (error || !notification) {
|
||||||
return (
|
return (
|
||||||
<Layout style={{ minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
<Layout
|
||||||
|
style={{
|
||||||
|
minHeight: '100vh',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Result
|
<Result
|
||||||
status="404"
|
status="404"
|
||||||
title="404"
|
title="404"
|
||||||
subTitle="Sorry, the notification you visited does not exist."
|
subTitle="Sorry, the notification you visited does not exist."
|
||||||
extra={<Button type="primary" onClick={() => navigate('/notification')}>Back to List</Button>}
|
extra={
|
||||||
|
<Button type="primary" onClick={() => navigate('/notification')}>
|
||||||
|
Back to List
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
@@ -184,12 +198,18 @@ const NotificationDetailTab = () => {
|
|||||||
<Layout style={{ padding: '24px', backgroundColor: '#f0f2f5' }}>
|
<Layout style={{ padding: '24px', backgroundColor: '#f0f2f5' }}>
|
||||||
<Content>
|
<Content>
|
||||||
<Card>
|
<Card>
|
||||||
<div style={{ borderBottom: '1px solid #f0f0f0', paddingBottom: '16px', marginBottom: '24px' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
borderBottom: '1px solid #f0f0f0',
|
||||||
|
paddingBottom: '16px',
|
||||||
|
marginBottom: '24px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Row justify="space-between" align="middle">
|
<Row justify="space-between" align="middle">
|
||||||
<Col>
|
<Col>
|
||||||
<Button
|
<Button
|
||||||
type="text"
|
type="text"
|
||||||
icon={<ArrowLeftOutlined />}
|
icon={<ArrowLeftOutlined />}
|
||||||
onClick={() => navigate('/notification')}
|
onClick={() => navigate('/notification')}
|
||||||
style={{ paddingLeft: 0 }}
|
style={{ paddingLeft: 0 }}
|
||||||
>
|
>
|
||||||
@@ -197,15 +217,24 @@ const NotificationDetailTab = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Button
|
<Button
|
||||||
icon={<UserOutlined />}
|
icon={<UserOutlined />}
|
||||||
onClick={() => setModalContent('user')}
|
onClick={() => setModalContent('user')}
|
||||||
>
|
>
|
||||||
User History
|
User History
|
||||||
</Button>
|
</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<div style={{ backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '4px', padding: '8px 16px', textAlign: 'center', marginTop: '16px' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#f6ffed',
|
||||||
|
border: '1px solid #b7eb8f',
|
||||||
|
borderRadius: '4px',
|
||||||
|
padding: '8px 16px',
|
||||||
|
textAlign: 'center',
|
||||||
|
marginTop: '16px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
|
<Typography.Title level={4} style={{ margin: 0, color: '#262626' }}>
|
||||||
Error Notification Detail
|
Error Notification Detail
|
||||||
</Typography.Title>
|
</Typography.Title>
|
||||||
@@ -216,22 +245,53 @@ const NotificationDetailTab = () => {
|
|||||||
<Row gutter={[24, 24]}>
|
<Row gutter={[24, 24]}>
|
||||||
{/* Kolom Kiri: Data Kompresor */}
|
{/* Kolom Kiri: Data Kompresor */}
|
||||||
<Col xs={24} lg={8}>
|
<Col xs={24} lg={8}>
|
||||||
<Card size="small" style={{ height: '100%', borderColor: '#d4380d' }} bodyStyle={{ padding: '16px' }}>
|
<Card
|
||||||
<Space direction="vertical" size="large" style={{ width: '100%' }}>
|
size="small"
|
||||||
|
style={{ height: '100%', borderColor: '#d4380d' }}
|
||||||
|
bodyStyle={{ padding: '16px' }}
|
||||||
|
>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="large"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
<Row gutter={16} align="middle">
|
<Row gutter={16} align="middle">
|
||||||
<Col>
|
<Col>
|
||||||
<div style={{ width: '32px', height: '32px', borderRadius: '50%', backgroundColor: '#d4380d', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#ffffff', fontSize: '18px' }}><CloseOutlined /></div>
|
<div
|
||||||
|
style={{
|
||||||
|
width: '32px',
|
||||||
|
height: '32px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor: '#d4380d',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: '#ffffff',
|
||||||
|
fontSize: '18px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CloseOutlined />
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
<Col>
|
<Col>
|
||||||
<Text>{notification.title}</Text>
|
<Text>{notification.title}</Text>
|
||||||
<div style={{ marginTop: '2px' }}><Text strong style={{ fontSize: '16px' }}>{notification.issue}</Text></div>
|
<div style={{ marginTop: '2px' }}>
|
||||||
|
<Text strong style={{ fontSize: '16px' }}>
|
||||||
|
{notification.issue}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<div>
|
<div>
|
||||||
<Text strong>Plant Subsection</Text>
|
<Text strong>Plant Subsection</Text>
|
||||||
<div>{notification.location}</div>
|
<div>{notification.location}</div>
|
||||||
<Text strong style={{ display: 'block', marginTop: '8px' }}>Time</Text>
|
<Text
|
||||||
<div>{notification.timestamp.split(' ')[1]} WIB</div>
|
strong
|
||||||
|
style={{ display: 'block', marginTop: '8px' }}
|
||||||
|
>
|
||||||
|
Date & Time
|
||||||
|
</Text>
|
||||||
|
<div>{notification.timestamp}</div>
|
||||||
</div>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -239,13 +299,44 @@ const NotificationDetailTab = () => {
|
|||||||
|
|
||||||
{/* Kolom Tengah: Informasi Teknis */}
|
{/* Kolom Tengah: Informasi Teknis */}
|
||||||
<Col xs={24} lg={8}>
|
<Col xs={24} lg={8}>
|
||||||
<Card title="Informasi Teknis" size="small" style={{ height: '100%' }}>
|
<Card
|
||||||
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
|
title="Device Information"
|
||||||
<div><Text strong>Error Channel</Text><div>{notification.error_chanel || 'N/A'}</div></div>
|
size="small"
|
||||||
<div><Text strong>Device Code</Text><div>{notification.device_info?.device_code || 'N/A'}</div></div>
|
style={{ height: '100%' }}
|
||||||
<div><Text strong>Device Name</Text><div>{notification.device_info?.device_name || 'N/A'}</div></div>
|
>
|
||||||
<div><Text strong>Device Location</Text><div>{notification.device_info?.device_location || 'N/A'}</div></div>
|
<Space
|
||||||
<div><Text strong>Brand</Text><div>{notification.device_info?.brand_name || 'N/A'}</div></div>
|
direction="vertical"
|
||||||
|
size="middle"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Text strong>Error Channel</Text>
|
||||||
|
<div>{notification.error_chanel || 'N/A'}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Code</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_code || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Name</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_name || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Device Location</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.device_location || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Brand</Text>
|
||||||
|
<div>
|
||||||
|
{notification.device_info?.brand_name || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
@@ -257,45 +348,181 @@ const NotificationDetailTab = () => {
|
|||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row gutter={[16, 16]}>
|
<Row gutter={[16, 16]}>
|
||||||
<Col xs={24} md={8}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><BookOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Handling Guideline</Text></Space></Card></Col>
|
<Col xs={24} md={8}>
|
||||||
<Col xs={24} md={8}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><ToolOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Spare Part</Text></Space></Card></Col>
|
<Card
|
||||||
<Col xs={24} md={8} style={{ cursor: 'pointer' }}><Card hoverable bodyStyle={{ padding: '12px', textAlign: 'center' }}><Space><HistoryOutlined style={{ fontSize: '16px', color: '#1890ff' }} /><Text strong style={{ fontSize: '16px', color: '#262626' }}>Log Activity</Text></Space></Card></Col>
|
hoverable
|
||||||
|
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
<BookOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Handling Guideline
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} md={8}>
|
||||||
|
<Card
|
||||||
|
hoverable
|
||||||
|
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
<ToolOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Spare Part
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} md={8} style={{ cursor: 'pointer' }}>
|
||||||
|
<Card
|
||||||
|
hoverable
|
||||||
|
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
<Space>
|
||||||
|
<HistoryOutlined
|
||||||
|
style={{ fontSize: '16px', color: '#1890ff' }}
|
||||||
|
/>
|
||||||
|
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
|
||||||
|
Log Activity
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row gutter={[16, 16]}>
|
<Row gutter={[16, 16]}>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card size="small" title="Guideline Documents" style={{ height: '100%' }}>
|
<Card
|
||||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
size="small"
|
||||||
{notification.error_code?.solution && notification.error_code.solution.length > 0 ? (
|
title="Guideline Documents"
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="small"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
{notification.error_code?.solution &&
|
||||||
|
notification.error_code.solution.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
{notification.error_code.solution
|
{notification.error_code.solution
|
||||||
.filter(sol => sol.is_active) // Hanya tampilkan solusi yang aktif
|
.filter((sol) => sol.is_active) // Hanya tampilkan solusi yang aktif
|
||||||
.map((sol, index) => (
|
.map((sol, index) => (
|
||||||
<div key={sol.brand_code_solution_id || index}>
|
<div
|
||||||
|
key={
|
||||||
|
sol.brand_code_solution_id || index
|
||||||
|
}
|
||||||
|
>
|
||||||
{sol.path_document ? (
|
{sol.path_document ? (
|
||||||
<Card size="small" bodyStyle={{ padding: '8px 12px' }} hoverable extra={<Text type="secondary" style={{ fontSize: '10px' }}>PDF</Text>}>
|
<Card
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
size="small"
|
||||||
|
bodyStyle={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
}}
|
||||||
|
hoverable
|
||||||
|
extra={
|
||||||
|
<Text
|
||||||
|
type="secondary"
|
||||||
|
style={{
|
||||||
|
fontSize: '10px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
PDF
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent:
|
||||||
|
'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<Text style={{ fontSize: '12px', color: '#262626' }}><FilePdfOutlined style={{ marginRight: '8px' }} /> {sol.file_upload_name || 'Solution Document.pdf'}</Text>
|
<Text
|
||||||
<Link href={sol.path_document.replace('/detail-notification/pdf/', '/notification-detail/pdf/')} target="_blank" style={{ fontSize: '12px', display: 'block' }}>lihat disini</Link>
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'12px',
|
||||||
|
color: '#262626',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FilePdfOutlined
|
||||||
|
style={{
|
||||||
|
marginRight:
|
||||||
|
'8px',
|
||||||
|
}}
|
||||||
|
/>{' '}
|
||||||
|
{sol.file_upload_name ||
|
||||||
|
'Solution Document.pdf'}
|
||||||
|
</Text>
|
||||||
|
<Link
|
||||||
|
href={sol.path_document.replace(
|
||||||
|
'/detail-notification/pdf/',
|
||||||
|
'/notification-detail/pdf/'
|
||||||
|
)}
|
||||||
|
target="_blank"
|
||||||
|
style={{
|
||||||
|
fontSize:
|
||||||
|
'12px',
|
||||||
|
display:
|
||||||
|
'block',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
lihat disini
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
) : null}
|
) : null}
|
||||||
{sol.type_solution === 'text' && sol.text_solution ? (
|
{sol.type_solution === 'text' &&
|
||||||
<Card size="small" bodyStyle={{ padding: '8px 12px' }} extra={<Text type="secondary" style={{ fontSize: '10px' }}>{sol.type_solution.toUpperCase()}</Text>}>
|
sol.text_solution ? (
|
||||||
|
<Card
|
||||||
|
size="small"
|
||||||
|
bodyStyle={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
}}
|
||||||
|
extra={
|
||||||
|
<Text
|
||||||
|
type="secondary"
|
||||||
|
style={{
|
||||||
|
fontSize: '10px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sol.type_solution.toUpperCase()}
|
||||||
|
</Text>
|
||||||
|
}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<Text strong>{sol.solution_name}:</Text>
|
<Text strong>
|
||||||
<div style={{ marginTop: '4px' }}>{sol.text_solution}</div>
|
{sol.solution_name}:
|
||||||
|
</Text>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop: '4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sol.text_solution}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
))
|
))}
|
||||||
}
|
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div style={{ textAlign: 'center', padding: '20px', color: '#8c8c8c' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
|
>
|
||||||
Tidak ada dokumen solusi tersedia
|
Tidak ada dokumen solusi tersedia
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -303,39 +530,98 @@ const NotificationDetailTab = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} md={8}>
|
<Col xs={24} md={8}>
|
||||||
<Card size="small" title="Required Spare Parts" style={{ height: '100%' }}>
|
<Card
|
||||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
size="small"
|
||||||
{notification.spareparts && notification.spareparts.length > 0 ? (
|
title="Required Spare Parts"
|
||||||
|
style={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
<Space
|
||||||
|
direction="vertical"
|
||||||
|
size="small"
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
{notification.spareparts &&
|
||||||
|
notification.spareparts.length > 0 ? (
|
||||||
notification.spareparts.map((sparepart, index) => (
|
notification.spareparts.map((sparepart, index) => (
|
||||||
<Card size="small" key={index} bodyStyle={{ padding: '12px' }} hoverable>
|
<Card
|
||||||
|
size="small"
|
||||||
|
key={index}
|
||||||
|
bodyStyle={{ padding: '12px' }}
|
||||||
|
hoverable
|
||||||
|
>
|
||||||
<Row gutter={16} align="top">
|
<Row gutter={16} align="top">
|
||||||
<Col span={7} style={{ textAlign: 'center' }}>
|
<Col
|
||||||
<div style={{ width: '100%', height: '60px', backgroundColor: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '4px', marginBottom: '8px' }}>
|
span={7}
|
||||||
<ToolOutlined style={{ fontSize: '24px', color: '#bfbfbf' }} />
|
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>
|
</div>
|
||||||
<Text style={{
|
<Text
|
||||||
fontSize: '12px',
|
style={{
|
||||||
color: sparepart.sparepart_stok === 'Available' || sparepart.sparepart_stok === 'available' ? '#52c41a' : '#ff4d4f',
|
fontSize: '12px',
|
||||||
fontWeight: 500
|
color:
|
||||||
}}>
|
sparepart.sparepart_stok ===
|
||||||
|
'Available' ||
|
||||||
|
sparepart.sparepart_stok ===
|
||||||
|
'available'
|
||||||
|
? '#52c41a'
|
||||||
|
: '#ff4d4f',
|
||||||
|
fontWeight: 500,
|
||||||
|
}}
|
||||||
|
>
|
||||||
{sparepart.sparepart_stok}
|
{sparepart.sparepart_stok}
|
||||||
</Text>
|
</Text>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={17}>
|
<Col span={17}>
|
||||||
<Space direction="vertical" size={4} style={{ width: '100%' }}>
|
<Space
|
||||||
<Text strong>{sparepart.sparepart_name}</Text>
|
direction="vertical"
|
||||||
<Paragraph style={{ fontSize: '12px', margin: 0, color: '#595959' }}>
|
size={4}
|
||||||
{sparepart.sparepart_description || 'Deskripsi tidak tersedia'}
|
style={{ width: '100%' }}
|
||||||
|
>
|
||||||
|
<Text strong>
|
||||||
|
{sparepart.sparepart_name}
|
||||||
|
</Text>
|
||||||
|
<Paragraph
|
||||||
|
style={{
|
||||||
|
fontSize: '12px',
|
||||||
|
margin: 0,
|
||||||
|
color: '#595959',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sparepart.sparepart_description ||
|
||||||
|
'Deskripsi tidak tersedia'}
|
||||||
</Paragraph>
|
</Paragraph>
|
||||||
<div style={{
|
<div
|
||||||
border: '1px solid #d9d9d9',
|
style={{
|
||||||
borderRadius: '4px',
|
border: '1px solid #d9d9d9',
|
||||||
padding: '4px 8px',
|
borderRadius: '4px',
|
||||||
fontSize: '11px',
|
padding: '4px 8px',
|
||||||
color: '#8c8c8c',
|
fontSize: '11px',
|
||||||
marginTop: '8px'
|
color: '#8c8c8c',
|
||||||
}}>
|
marginTop: '8px',
|
||||||
Kode: {sparepart.sparepart_code} | Qty: {sparepart.sparepart_qty} | Unit: {sparepart.sparepart_unit}
|
}}
|
||||||
|
>
|
||||||
|
Kode: {sparepart.sparepart_code}{' '}
|
||||||
|
| Qty: {sparepart.sparepart_qty}{' '}
|
||||||
|
| Unit:{' '}
|
||||||
|
{sparepart.sparepart_unit}
|
||||||
</div>
|
</div>
|
||||||
</Space>
|
</Space>
|
||||||
</Col>
|
</Col>
|
||||||
@@ -343,7 +629,13 @@ const NotificationDetailTab = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
))
|
))
|
||||||
) : (
|
) : (
|
||||||
<div style={{ textAlign: 'center', padding: '20px', color: '#8c8c8c' }}>
|
<div
|
||||||
|
style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
color: '#8c8c8c',
|
||||||
|
}}
|
||||||
|
>
|
||||||
Tidak ada spare parts terkait
|
Tidak ada spare parts terkait
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -351,63 +643,67 @@ const NotificationDetailTab = () => {
|
|||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={8}>
|
<Col span={8}>
|
||||||
<Card size="small" style={{ height: '100%' }}>
|
<Card size="small" style={{ height: '100%' }}>
|
||||||
<Space direction="vertical" size="small" style={{ width: '100%' }}>
|
<Space
|
||||||
<Card
|
direction="vertical"
|
||||||
size="small"
|
size="small"
|
||||||
bodyStyle={{
|
style={{ width: '100%' }}
|
||||||
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
|
<Card
|
||||||
key={log.id}
|
|
||||||
size="small"
|
size="small"
|
||||||
bodyStyle={{ padding: '8px 12px' }}
|
bodyStyle={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
backgroundColor: isAddingLog ? '#fafafa' : '#fff',
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Paragraph
|
<Space
|
||||||
style={{ fontSize: '12px', margin: 0 }}
|
direction="vertical"
|
||||||
ellipsis={{ rows: 2 }}
|
style={{ width: '100%' }}
|
||||||
|
size="small"
|
||||||
>
|
>
|
||||||
<Text strong>{log.addedBy.name}:</Text>{' '}
|
{isAddingLog && (
|
||||||
{log.description}
|
<>
|
||||||
</Paragraph>
|
<Text strong style={{ fontSize: '12px' }}>
|
||||||
<Text type="secondary" style={{ fontSize: '11px' }}>
|
Add New Log / Update Progress
|
||||||
{log.timestamp}
|
</Text>
|
||||||
</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>
|
</Card>
|
||||||
))}
|
{logHistoryData.map((log) => (
|
||||||
</Space>
|
<Card
|
||||||
</Card>
|
key={log.id}
|
||||||
</Col>
|
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>
|
||||||
@@ -422,4 +718,4 @@ const NotificationDetailTab = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default NotificationDetailTab;
|
export default NotificationDetailTab;
|
||||||
|
|||||||
Reference in New Issue
Block a user