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

lavoce #27

Merged
bragaz_rexita merged 42 commits from lavoce into main 2025-12-22 09:28:35 +00:00
Conversation 0 Commits 42 Files Changed 48 +206 -205
3 changed files with 206 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e23215b6c1 - Show all commits

63
src/pages/notification/component/DetailNotification.jsx
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>

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

@@ -651,8 +651,8 @@ const ListNotification = memo(function ListNotification(props) {
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
@@ -661,7 +661,7 @@ const ListNotification = memo(function ListNotification(props) {
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> <Col>
<div <div
@@ -766,7 +766,7 @@ const ListNotification = memo(function ListNotification(props) {
</Col> </Col>
</Row> </Row>
<div> <div>
<Row gutter={[16, 16]}> <Row gutter={[16, 8]}>
<Col span={8}> <Col span={8}>
<Card <Card
style={{ style={{
@@ -825,7 +825,7 @@ const ListNotification = memo(function ListNotification(props) {
</Card> </Card>
</Col> </Col>
</Row> </Row>
<Row gutter={[16, 16]} style={{ marginTop: '16px' }}> <Row gutter={[16, 8]} style={{ marginTop: '0' }}>
<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 direction="vertical" size="small" style={{ width: '100%' }}>
@@ -837,8 +837,7 @@ const ListNotification = memo(function ListNotification(props) {
<Text type="secondary" style={{ fontSize: '10px' }}> <Text type="secondary" style={{ fontSize: '10px' }}>
PDF PDF
</Text> </Text>
} } >
>
<div <div
style={{ style={{
display: 'flex', display: 'flex',

9
src/pages/notification/component/LogHistoryCard.jsx
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>
); );