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

Merge pull request 'lavoce' (#32) from lavoce into main

Browse Source 
Reviewed-on: #32
This commit is contained in:
Bragas Rexita Ecos Fernanda
2026-01-05 03:41:39 +00:00
parent 48437c3c50 98057beb0f
commit f436865b7f
12 changed files with 102 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Global/MqttConnection.jsx
View File

@@ -2,7 +2,16 @@
import mqtt from 'mqtt';
const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
const topics = ['cod/air_dryer/air_dryer1'];
const topics = [
'PIU_COD/AIR_DRYER/OVERVIEW',
'PIU_COD/AIR_DRYER/AIR_DRYER_A',
'PIU_COD/AIR_DRYER/AIR_DRYER_B',
'PIU_COD/AIR_DRYER/AIR_DRYER_C',
'PIU_COD/COMPRESSOR/OVERVIEW',
'PIU_COD/COMPRESSOR/COMPRESSOR_A',
'PIU_COD/COMPRESSOR/COMPRESSOR_B',
'PIU_COD/COMPRESSOR/COMPRESSOR_C'
];
const options = {
keepalive: 30,
clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),

2
src/pages/home/SvgAirDryerA.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_A_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/air_dryer_A_rev.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_A';
const SvgAirDryerA = () => {
return (

2
src/pages/home/SvgAirDryerB.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_B_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/air_dryer_B_rev.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_B';
const SvgAirDryerB = () => {
return (

2
src/pages/home/SvgAirDryerC.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/air_dryer_C_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/air_dryer_C_rev.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/AIR_DRYER/AIR_DRYER_C';
const SvgAirDryerC = () => {
return (

2
src/pages/home/SvgCompressorA.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorA_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
const SvgCompressorA = () => {
return (

2
src/pages/home/SvgCompressorB.jsx
View File

@@ -6,7 +6,7 @@ import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/compressorB_rev.svg';
const { Text } = Typography;
const topicMqtt = 'cod/air_dryer/air_dryer1';
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
const SvgCompressorB = () => {
return (

2
src/pages/home/SvgCompressorC.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/compressorC_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
const SvgCompressorC = () => {
return (

2
src/pages/home/SvgOverviewAirDryer.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-airdryer.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
const SvgOverviewAirDryer = () => {
return (

2
src/pages/home/SvgOverviewCompressor.jsx
View File

@@ -8,7 +8,7 @@ import filePathSvg from '../../assets/svg/overview-compressor.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
const SvgOverviewCompressor = () => {
return (

29
src/pages/notification/component/ListNotification.jsx
View File

@@ -64,7 +64,7 @@ const transformNotificationData = (apiData) => {
}) + ' WIB'
: 'N/A',
location: item.plant_sub_section_name || item.device_location || 'Location not specified',
details: item.message_error_issue || 'No details available',
details: item.device_name || '-',
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
subsection: item.plant_sub_section_name || 'N/A',
isRead: item.is_read,
@@ -396,7 +396,7 @@ const ListNotification = memo(function ListNotification(props) {
</div>
</Col>
<Col flex="auto">
<div
{/* <div
style={{
display: 'flex',
gap: '8px',
@@ -419,12 +419,18 @@ const ListNotification = memo(function ListNotification(props) {
>
{notification.details}
</Paragraph>
</div>
</div> */}
<Space
direction="vertical"
size={4}
style={{ fontSize: '13px', color: '#8c8c8c' }}
>
<Space>
<MobileOutlined />
<Text type="secondary">
{notification.details}
</Text>
</Space>
<Space>
<ClockCircleOutlined />
<Text type="secondary">
@@ -438,17 +444,10 @@ const ListNotification = memo(function ListNotification(props) {
</Text>
</Space>
<Space>
<LinkOutlined />
<AntdLink
href={notification.link}
target="_blank"
>
{notification.link}
</AntdLink>
<Button
type="link"
icon={<SendOutlined />}
style={{ paddingLeft: '8px' }}
style={{ paddingLeft: '0px' }}
onClick={(e) => {
e.stopPropagation();
handleResend(notification);
@@ -646,7 +645,7 @@ const ListNotification = memo(function ListNotification(props) {
padding: '0 16px',
position: 'relative',
border: '1px solid #f0f0f0',
borderRadius: '4px'
borderRadius: '4px',
}}
>
<div style={{ position: 'relative' }}>
@@ -708,7 +707,9 @@ const ListNotification = memo(function ListNotification(props) {
</Text>
</Space>
<div>
<Text strong>Added by: {log.addedBy.name}</Text>
<Text strong>
Added by: {log.addedBy.name}
</Text>
<span
style={{
marginLeft: '8px',
@@ -1412,7 +1413,7 @@ const ListNotification = memo(function ListNotification(props) {
</div>
) : (
<Typography.Title level={4} style={{ margin: 0 }}>
{modalContent === 'user' && 'User History Notification'}
{modalContent === 'user' && 'History User Notification'}
{modalContent === 'log' && 'Log History Notification'}
</Typography.Title>
)}

30
src/pages/notification/component/UserHistoryModal.jsx
View File

@@ -1,6 +1,12 @@
import React from 'react';
import { Modal, Typography, Card, Row, Col, Avatar, Tag, Button, Space } from 'antd';
import { UserOutlined, PhoneOutlined, CheckCircleOutlined, SyncOutlined, SendOutlined } from '@ant-design/icons';
import {
UserOutlined,
PhoneOutlined,
CheckCircleOutlined,
SyncOutlined,
SendOutlined,
} from '@ant-design/icons';
const { Text } = Typography;
@@ -41,9 +47,17 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
const getStatusTag = (status) => {
switch (status) {
case 'delivered':
return <Tag icon={<CheckCircleOutlined />} color="success">Delivered</Tag>;
return (
<Tag icon={<CheckCircleOutlined />} color="success">
Delivered
</Tag>
);
case 'sent':
return <Tag icon={<SyncOutlined spin />} color="processing">Sent</Tag>;
return (
<Tag icon={<SyncOutlined spin />} color="processing">
Sent
</Tag>
);
case 'failed':
return <Tag color="error">Failed</Tag>;
default:
@@ -55,7 +69,7 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
<Modal
title={
<Text strong style={{ fontSize: '18px' }}>
User History Notification
History User Notification
</Text>
}
open={visible}
@@ -78,7 +92,13 @@ const UserHistoryModal = ({ visible, onCancel, notificationData }) => {
<Avatar size="large" icon={<UserOutlined />} />
<div>
<Text strong>{user.name}</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
}}
>
<PhoneOutlined style={{ color: '#8c8c8c' }} />
<Text type="secondary">{user.phone}</Text>
</div>

54
src/pages/notification/detail/UserHistory.jsx
View File

@@ -1,14 +1,37 @@
import React from 'react';
import { Button, Row, Col, Card, Badge, Typography, Space, Divider } from 'antd';
import { SendOutlined, MobileOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
import {
SendOutlined,
MobileOutlined,
CheckCircleFilled,
ArrowLeftOutlined,
} from '@ant-design/icons';
const { Text } = Typography;
// Dummy data for user history
const userHistoryData = [
{ id: 1, name: 'John Doe', phone: '081234567890', status: 'Delivered', timestamp: '04-11-2025 11:40 WIB' },
{ id: 2, name: 'Jane Smith', phone: '087654321098', status: 'Delivered', timestamp: '04-11-2025 11:41 WIB' },
{ id: 3, name: 'Peter Jones', phone: '082345678901', status: 'Delivered', timestamp: '04-11-2025 11:42 WIB' },
{
id: 1,
name: 'John Doe',
phone: '081234567890',
status: 'Delivered',
timestamp: '04-11-2025 11:40 WIB',
},
{
id: 2,
name: 'Jane Smith',
phone: '087654321098',
status: 'Delivered',
timestamp: '04-11-2025 11:41 WIB',
},
{
id: 3,
name: 'Peter Jones',
phone: '082345678901',
status: 'Delivered',
timestamp: '04-11-2025 11:42 WIB',
},
];
const UserHistory = ({ notification, onBack }) => {
@@ -18,7 +41,9 @@ const UserHistory = ({ notification, onBack }) => {
<Col>
<Space align="center">
<Button type="text" icon={<ArrowLeftOutlined />} onClick={onBack} />
<Typography.Title level={4} style={{ margin: 0 }}>User History Notification</Typography.Title>
<Typography.Title level={4} style={{ margin: 0 }}>
History User Notification
</Typography.Title>
</Space>
<Text type="secondary" style={{ marginLeft: '40px' }}>
{notification.title} - {notification.issue}
@@ -27,25 +52,34 @@ const UserHistory = ({ notification, onBack }) => {
</Row>
<Space direction="vertical" size="middle" style={{ display: 'flex' }}>
{userHistoryData.map(user => (
<Card key={user.id} style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}>
{userHistoryData.map((user) => (
<Card
key={user.id}
style={{ backgroundColor: '#e6f7ff', borderColor: '#91d5ff' }}
>
<Row align="middle" justify="space-between">
<Col>
<Space align="center">
<Text strong>{user.name}</Text>
<Text>|</Text>
<Text><MobileOutlined /> {user.phone}</Text>
<Text>
<MobileOutlined /> {user.phone}
</Text>
<Text>|</Text>
<Badge status="success" text={user.status} />
</Space>
<Divider style={{ margin: '8px 0' }} />
<Space align="center">
<CheckCircleFilled style={{ color: '#52c41a' }} />
<Text type="secondary">Success Delivered at {user.timestamp}</Text>
<Text type="secondary">
Success Delivered at {user.timestamp}
</Text>
</Space>
</Col>
<Col>
<Button type="primary" ghost icon={<SendOutlined />}>Resend</Button>
<Button type="primary" ghost icon={<SendOutlined />}>
Resend
</Button>
</Col>
</Row>
</Card>