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

Compare commits

base: yogiedigital:lavoce
Branches Tags
yogiedigital:main yogiedigital:lavoce
..
compare: yogiedigital:56e3ce78a63392f4230b11e8c7c210c23330e209
Branches Tags
yogiedigital:lavoce yogiedigital:main

2 Commits
lavoce ... 56e3ce78a6

Author SHA1 Message Date
yogiedigital
56e3ce78a6 Merge pull request 'lavoce' (#2) from lavoce into main 
Reviewed-on: #2
 2025-10-20 04:06:02 +00:00
yogiedigital
7c2a019dd2 Merge pull request 'lavoce' (#1) from lavoce into main 
Reviewed-on: #1
 2025-09-17 08:39:35 +00:00
134 changed files with 6083 additions and 25795 deletions
Expand all files Collapse all files

3
.env.example
View File

@@ -1,5 +1,4 @@
VITE_API_SERVER=http://localhost:9530/api
# VITE_API_SERVER=https://117.102.231.130:9528/api
VITE_API_SERVER=http://36.66.16.49:9528/api
VITE_MQTT_SERVER=ws://localhost:1884
VITE_MQTT_USERNAME=
VITE_MQTT_PASSWORD=

4
package.json
View File

@@ -22,8 +22,7 @@
"exceljs": "^4.4.0",
"file-saver": "^2.0.5",
"html2canvas": "^1.4.1",
"jspdf": "^3.0.4",
"jspdf-autotable": "^5.0.2",
"jspdf": "^3.0.1",
"mqtt": "^5.14.0",
"qrcode": "^1.5.4",
"react": "^18.2.0",
@@ -31,7 +30,6 @@
"react-icons": "^4.11.0",
"react-router-dom": "^6.22.3",
"react-svg": "^16.3.0",
"recharts": "^3.6.0",
"sweetalert2": "^11.17.2"
},
"devDependencies": {

BIN
public/assets/defaultSparepartImg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
public/assets/pupuk-indonesia-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 309 KiB

BIN
public/assets/pupuk-indonesia-2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

106
src/App.jsx
View File

@@ -10,50 +10,31 @@ import Home from './pages/home/Home';
import Blank from './pages/blank/Blank';
// Master
import IndexPlantSubSection from './pages/master/plantSubSection/IndexPlantSubSection';
import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
import IndexDevice from './pages/master/device/IndexDevice';
import IndexUnit from './pages/master/unit/IndexUnit';
import IndexTag from './pages/master/tag/IndexTag';
import IndexUnit from './pages/master/unit/IndexUnit';
import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
import IndexPlantSection from './pages/master/plantSection/IndexPlantSection';
import IndexStatus from './pages/master/status/IndexStatus';
import IndexSparepart from './pages/master/sparepart/IndexSparepart';
import IndexShift from './pages/master/shift/IndexShift';
// Brand device
import AddBrandDevice from './pages/master/brandDevice/AddBrandDevice';
import EditBrandDevice from './pages/master/brandDevice/EditBrandDevice';
import ViewBrandDevice from './pages/master/brandDevice/ViewBrandDevice';
import ViewFilePage from './pages/master/brandDevice/ViewFilePage';
// Jadwal Shift
import IndexJadwalShift from './pages/jadwalShift/IndexJadwalShift';
// History
import IndexTrending from './pages/report/trending/IndexTrending';
import IndexReport from './pages/report/report/IndexReport';
import IndexTrending from './pages/history/trending/IndexTrending';
import IndexReport from './pages/history/report/IndexReport';
// Other Pages
import IndexNotification from './pages/notification/IndexNotification';
import IndexEventAlarm from './pages/eventAlarm/IndexEventAlarm';
import IndexRole from './pages/role/IndexRole';
import IndexUser from './pages/user/IndexUser';
import IndexContact from './pages/contact/IndexContact';
import DetailNotificationTab from './pages/notificationDetail/IndexNotificationDetail';
import IndexVerificationSparepart from './pages/verificationSparepart/IndexVerificationSparepart';
// Shift Management
import IndexMember from './pages/shiftManagement/member/IndexMember';
import SvgTest from './pages/home/SvgTest';
import SvgOverviewCompressor from './pages/home/SvgOverviewCompressor';
import SvgCompressorA from './pages/home/SvgCompressorA';
import SvgCompressorB from './pages/home/SvgCompressorB';
import SvgCompressorC from './pages/home/SvgCompressorC';
import SvgOverviewAirDryer from './pages/home/SvgOverviewAirDryer';
import SvgAirDryerA from './pages/home/SvgAirDryerA';
import SvgAirDryerB from './pages/home/SvgAirDryerB';
import SvgAirDryerC from './pages/home/SvgAirDryerC';
import IndexHistoryAlarm from './pages/history/alarm/IndexHistoryAlarm';
import IndexHistoryEvent from './pages/history/event/IndexHistoryEvent';
// Image Viewer
import ImageViewer from './Utils/ImageViewer';
import RedirectWa from './pages/blank/RedirectWa';
const App = () => {
return (
@@ -64,16 +45,6 @@ const App = () => {
<Route path="/signin" element={<SignIn />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/svg" element={<SvgTest />} />
<Route
path="/notification-detail/:notificationId"
element={<DetailNotificationTab />}
/>
<Route
path="/verification-sparepart/:notificationId"
element={<IndexVerificationSparepart />}
/>
<Route path="/redirect" element={<RedirectWa />} />
{/* Protected Routes */}
<Route path="/dashboard" element={<ProtectedRoute />}>
@@ -81,61 +52,33 @@ const App = () => {
<Route path="blank" element={<Blank />} />
</Route>
<Route path="/image-viewer/:fileName" element={<ImageViewer />} />
<Route path="/dashboard-svg" element={<ProtectedRoute />}>
<Route path="overview-compressor" element={<SvgOverviewCompressor />} />
<Route path="compressor-a" element={<SvgCompressorA />} />
<Route path="compressor-b" element={<SvgCompressorB />} />
<Route path="compressor-c" element={<SvgCompressorC />} />
<Route path="overview-airdryer" element={<SvgOverviewAirDryer />} />
<Route path="airdryer-a" element={<SvgAirDryerA />} />
<Route path="airdryer-b" element={<SvgAirDryerB />} />
<Route path="airdryer-c" element={<SvgAirDryerC />} />
</Route>
<Route path="/master" element={<ProtectedRoute />}>
<Route path="device" element={<IndexDevice />} />
<Route path="tag" element={<IndexTag />} />
<Route path="unit" element={<IndexUnit />} />
<Route path="sparepart" element={<IndexSparepart />} />
<Route path="plant-sub-section" element={<IndexPlantSubSection />} />
<Route path="brand-device" element={<IndexBrandDevice />} />
<Route path="plant-section" element={<IndexPlantSection />} />
<Route path="shift" element={<IndexShift />} />
<Route path="status" element={<IndexStatus />} />
{/* Brand Device Routes */}
<Route path="brand-device" element={<IndexBrandDevice />} />
<Route path="brand-device/add" element={<AddBrandDevice />} />
<Route path="brand-device/edit/:id" element={<EditBrandDevice />} />
<Route path="brand-device/view/:id" element={<ViewBrandDevice />} />
<Route
path="brand-device/edit/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="brand-device/view/:id/files/:fileType/:fileName"
element={<ViewFilePage />}
/>
<Route
path="brand-device/view/temp/files/:fileName"
element={<ViewFilePage />}
/>
</Route>
<Route path="/report" element={<ProtectedRoute />}>
<Route path="/jadwal-shift" element={<ProtectedRoute />}>
<Route index element={<IndexJadwalShift />} />
</Route>
<Route path="/history" element={<ProtectedRoute />}>
<Route path="trending" element={<IndexTrending />} />
<Route path="report" element={<IndexReport />} />
</Route>
<Route path="/history" element={<ProtectedRoute />}>
<Route path="alarm" element={<IndexHistoryAlarm />} />
<Route path="event" element={<IndexHistoryEvent />} />
</Route>
<Route path="/notification" element={<ProtectedRoute />}>
<Route index element={<IndexNotification />} />
</Route>
<Route path="/event-alarm" element={<ProtectedRoute />}>
<Route index element={<IndexEventAlarm />} />
</Route>
<Route path="/role" element={<ProtectedRoute />}>
<Route index element={<IndexRole />} />
</Route>
@@ -144,14 +87,11 @@ const App = () => {
<Route index element={<IndexUser />} />
</Route>
<Route path="/contact" element={<ProtectedRoute />}>
<Route index element={<IndexContact />} />
</Route>
<Route path="/jadwal-shift" element={<ProtectedRoute />}>
<Route index element={<IndexJadwalShift />} />
<Route path="/shift-management" element={<ProtectedRoute />}>
<Route path="member" element={<IndexMember />} />
</Route>
{/* Catch-all */}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>

248
src/Utils/ImageViewer.jsx
View File

@@ -1,248 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { getFileUrl, getFolderFromFileType } from '../api/file-uploads';
const ImageViewer = () => {
const { fileName } = useParams();
const [fileUrl, setFileUrl] = useState('');
const [error, setError] = useState('');
const [zoom, setZoom] = useState(1);
const [isImage, setIsImage] = useState(false);
useEffect(() => {
if (!fileName) {
setError('No file specified');
return;
}
try {
const decodedFileName = decodeURIComponent(fileName);
const fileExtension = decodedFileName.split('.').pop()?.toLowerCase();
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
setIsImage(imageExtensions.includes(fileExtension));
const folder = getFolderFromFileType(fileExtension);
const url = getFileUrl(folder, decodedFileName);
setFileUrl(url);
document.title = `File Viewer - ${decodedFileName}`;
} catch (error) {
setError('Failed to load file');
}
}, [fileName]);
useEffect(() => {
const handleKeyDown = (e) => {
if (!isImage) return;
if (e.key === '+' || e.key === '=') {
setZoom(prev => Math.min(prev + 0.1, 3));
} else if (e.key === '-' || e.key === '_') {
setZoom(prev => Math.max(prev - 0.1, 0.1));
} else if (e.key === '0') {
setZoom(1);
} else if (e.key === 'Escape') {
window.close();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isImage]);
const handleWheel = (e) => {
if (!isImage || !e.ctrlKey) return;
e.preventDefault();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
setZoom(prev => Math.min(Math.max(prev + delta, 0.1), 3));
};
const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.1, 3));
const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.1, 0.1));
const handleResetZoom = () => setZoom(1);
if (error) {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
fontFamily: 'Arial, sans-serif',
backgroundColor: '#f5f5f5'
}}>
<div style={{ textAlign: 'center' }}>
<h1>Error</h1>
<p>{error}</p>
</div>
</div>
);
}
if (!isImage) {
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
fontFamily: 'Arial, sans-serif',
backgroundColor: '#f5f5f5'
}}>
<div style={{ textAlign: 'center' }}>
<h1>File Type Not Supported</h1>
<p>Image viewer only supports image files.</p>
<p>Please use direct file preview for PDFs and other documents.</p>
</div>
</div>
);
}
return (
<div
style={{
margin: 0,
padding: 0,
height: '100vh',
width: '100vw',
backgroundColor: '#000',
overflow: 'hidden',
position: 'relative'
}}
onWheel={handleWheel}
>
{isImage && (
<div style={{
position: 'fixed',
top: '20px',
right: '20px',
display: 'flex',
gap: '10px',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
padding: '10px',
borderRadius: '8px',
zIndex: 1000
}}>
<button
onClick={handleZoomOut}
style={{
backgroundColor: 'rgba(255, 255, 255, 0.2)',
color: '#fff',
border: '1px solid rgba(255, 255, 255, 0.3)',
padding: '8px 12px',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '16px'
}}
title="Zoom Out (-)"
>
−
</button>
<span style={{
color: '#fff',
padding: '8px 12px',
minWidth: '60px',
textAlign: 'center',
fontSize: '14px'
}}>
{Math.round(zoom * 100)}%
</span>
<button
onClick={handleZoomIn}
style={{
backgroundColor: 'rgba(255, 255, 255, 0.2)',
color: '#fff',
border: '1px solid rgba(255, 255, 255, 0.3)',
padding: '8px 12px',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '16px'
}}
title="Zoom In (+)"
>
+
</button>
<button
onClick={handleResetZoom}
style={{
backgroundColor: 'rgba(255, 255, 255, 0.2)',
color: '#fff',
border: '1px solid rgba(255, 255, 255, 0.3)',
padding: '8px 12px',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px'
}}
title="Reset Zoom (0)"
>
Reset
</button>
</div>
)}
{isImage && fileUrl ? (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
overflow: 'auto'
}}>
<img
src={fileUrl}
alt={decodeURIComponent(fileName)}
style={{
maxWidth: 'none',
maxHeight: 'none',
transform: `scale(${zoom})`,
transformOrigin: 'center',
transition: 'transform 0.1s ease-out',
cursor: zoom > 1 ? 'move' : 'default'
}}
onError={() => setError('Failed to load image')}
draggable={false}
/>
</div>
) : isImage ? (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
color: '#fff',
fontFamily: 'Arial, sans-serif'
}}>
<p>Loading image...</p>
</div>
) : null}
{isImage && (
<div style={{
position: 'fixed',
bottom: '20px',
left: '20px',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
color: '#fff',
padding: '10px 15px',
borderRadius: '8px',
fontSize: '12px',
zIndex: 1000
}}>
<div>Mouse wheel + Ctrl: Zoom</div>
<div>Keyboard: +/− Zoom, 0: Reset, ESC: Close</div>
</div>
)}
</div>
);
};
export default ImageViewer;

71
src/Utils/validate.js
View File

@@ -1,71 +0,0 @@
// utils/validate.js
// Daftar aturan validasi
const validationRules = [
{ field: 'name', label: 'Nama', required: true },
{
field: 'email',
label: 'Email',
required: true,
pattern: /\S+@\S+\.\S+/,
patternMessage: 'Format email tidak valid',
},
{
field: 'age',
label: 'Umur',
required: true,
validator: (v) => !isNaN(v) && Number(v) >= 18,
message: 'Umur harus angka dan minimal 18 tahun',
},
];
/**
* Fungsi validasi dinamis berbasis array objek aturan.
* @param {Object} data - data form (misal { name: '', email: '' })
* @param {Array} rules - array aturan validasi
* @returns {Object} errors - object berisi pesan error per field
*/
export const validateRun = (data, rules, onError) => {
const errors = {};
const messages = [];
const ipRegex = /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/;
rules.forEach((rule) => {
const value = data[rule.field]?.toString().trim();
const fieldErrors = [];
if (rule.required && !value) {
fieldErrors.push(`${rule.label} wajib diisi`);
}
// ✅ IP Address check
if (rule.ip && value && !ipRegex.test(value)) {
fieldErrors.push(`${rule.label} harus berupa alamat IP yang valid`);
}
if (rule.pattern && value && !rule.pattern.test(value)) {
fieldErrors.push(rule.patternMessage || `${rule.label} tidak valid`);
}
if (rule.validator && value && !rule.validator(value)) {
fieldErrors.push(rule.message || `${rule.label} tidak valid`);
}
// Gabungkan error satu field jadi satu string (pisah baris)
if (fieldErrors.length > 0) {
errors[rule.field] = fieldErrors.join("\n");
messages.push(...fieldErrors);
}
});
// Jika ada error total, tampilkan callback dan return false
if (messages.length > 0) {
if (onError) onError(messages.join("\n"));
return true;
}
return false
};

56
src/api/contact.jsx
View File

@@ -1,56 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllContact = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `contact?${queryParams.toString()}`,
});
return response.data;
};
const getContactById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `contact/${id}`,
});
return response.data;
};
const createContact = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `contact`,
params: queryParams,
});
return response.data;
};
const updateContact = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `contact/${id}`,
params: queryParams,
});
return response.data;
};
const deleteContact = async (id) => {
const response = await SendRequest({
method: 'delete',
prefix: `contact/${id}`,
});
return response.data;
};
export {
getAllContact,
getContactById,
createContact,
updateContact,
deleteContact,
};

48
src/api/dashboard-home.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getTotal = async (query = '') => {
const prefix = `${query ? `?${query}` : ''}`;
const fullUrl = `${import.meta.env.VITE_API_SERVER}/dashboard/${prefix}`;
try {
const response = await SendRequest({
method: 'get',
prefix: `dashboard/${prefix}`,
});
return response;
} catch (error) {
console.error(`[API Call] Failed: GET ${fullUrl}`, error);
throw error;
}
};
const getTotalPermit = async (query = '') => {
const prefix = `dashboard/permit-total${query ? `?${query}` : ''}`;
const fullUrl = `${import.meta.env.VITE_API_SERVER}/${prefix}`;
try {
const response = await SendRequest({
method: 'get',
prefix,
});
return response;
} catch (error) {
console.error(`[API Call] Failed: GET ${fullUrl}`, error);
throw error;
}
};
const getTotalPermitPerYear = async (query = '') => {
const prefix = `dashboard/permit-breakdown${query ? `?${query}` : ''}`;
const fullUrl = `${import.meta.env.VITE_API_SERVER}/${prefix}`;
try {
const response = await SendRequest({
method: 'get',
prefix,
});
return response;
} catch (error) {
console.error(`[API Call] Failed: GET ${fullUrl}`, error);
throw error;
}
};
export { getTotal, getTotalPermit, getTotalPermitPerYear };

135
src/api/file-uploads.jsx
View File

@@ -1,135 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
import axios from 'axios';
const API_BASE_URL = import.meta.env.VITE_API_SERVER;
// Get file from uploads directory
const getFile = async (folder, filename) => {
const token = localStorage.getItem('token');
if (!token) {
throw new Error('No authentication token found');
}
const response = await axios.get(`${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}`, {
responseType: 'blob',
headers: {
'Authorization': `Bearer ${token.replace(/"/g, '')}`
}
});
return response.data;
};
// Download file as blob with proper handling
const downloadFile = async (folder, filename) => {
try {
const response = await getFile(folder, filename);
const blob = new Blob([response], {
type: 'application/octet-stream'
});
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
return { success: true, filename };
} catch (error) {
console.error('Error downloading file:', error);
throw error;
}
};
// Get file info (metadata)
const getFileInfo = async (folder, filename) => {
const response = await SendRequest({
method: 'head',
prefix: `file-uploads/${folder}/${encodeURIComponent(filename)}`
});
if (response.error) {
throw new Error(response.message);
}
return {
contentType: response.headers?.['content-type'],
contentLength: response.headers?.['content-length'],
lastModified: response.headers?.['last-modified'],
filename: filename,
folder: folder
};
};
// Get file URL for iframe
const getFileUrl = (folder, filename) => {
const token = localStorage.getItem('token');
if (token) {
return `${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}?token=${encodeURIComponent(token)}`;
}
return `${API_BASE_URL}/file-uploads/${folder}/${encodeURIComponent(filename)}`;
};
// Check if file exists
const checkFileExists = async (folder, filename) => {
const response = await SendRequest({
method: 'head',
prefix: `file-uploads/${folder}/${encodeURIComponent(filename)}`
});
if (response.error && response.statusCode === 404) {
return false;
} else if (response.error) {
throw new Error(response.message);
}
return true;
};
const getFileType = (filename) => {
const ext = filename.split('.').pop().toLowerCase();
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
const pdfExtensions = ['pdf'];
if (imageExtensions.includes(ext)) {
return 'image';
} else if (pdfExtensions.includes(ext)) {
return 'pdf';
}
return 'unknown';
};
// Upload file to server
const uploadFile = async (file, folder) => {
const formData = new FormData();
formData.append('file', file);
formData.append('folder', folder);
const response = await SendRequest({
method: 'post',
prefix: 'file-uploads',
params: formData
});
return response.data;
};
const getFolderFromFileType = (fileType) => {
return fileType === 'pdf' ? 'pdf' : 'images';
};
export {
getFile,
downloadFile,
getFileInfo,
getFileUrl,
checkFileExists,
getFileType,
getFolderFromFileType,
uploadFile
};

54
src/api/history-value.jsx
View File

@@ -1,54 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllHistoryAlarm = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/alarm?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryEvent = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/event?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueReport = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-report?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueReportPivot = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-report-pivot?${queryParams.toString()}`,
});
return response.data;
};
const getAllHistoryValueTrendingPivot = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `history/value-trending?${queryParams.toString()}`,
});
return response.data;
};
export {
getAllHistoryAlarm,
getAllHistoryEvent,
getAllHistoryValueReport,
getAllHistoryValueReportPivot,
getAllHistoryValueTrendingPivot,
};

70
src/api/jadwal-shift.jsx
View File

@@ -1,55 +1,67 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllJadwalShift = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `user-schedule?${queryParams.toString()}`,
prefix: `jadwal-shift?${queryParams.toString()}`,
});
return response.data;
};
const getJadwalShiftById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `user-schedule/${id}`,
});
return response.data;
return response;
} catch (error) {
console.error('getAllJadwalShift error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const createJadwalShift = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `user-schedule`,
params: queryParams,
prefix: `jadwal-shift`,
data: queryParams,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const updateJadwalShift = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `user-schedule/${id}`,
params: queryParams,
prefix: `jadwal-shift/${id}`,
data: queryParams,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const deleteJadwalShift = async (id) => {
const response = await SendRequest({
method: 'delete',
prefix: `user-schedule/${id}`,
prefix: `jadwal-shift/${id}`,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
export {
getAllJadwalShift,
getJadwalShiftById,
createJadwalShift,
updateJadwalShift,
deleteJadwalShift,
};
export { getAllJadwalShift, createJadwalShift, updateJadwalShift, deleteJadwalShift };

41
src/api/master-status.jsx → src/api/master-apd.jsx
View File

@@ -1,50 +1,45 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllStatuss = async (queryParams) => {
const getAllApd = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `status?${queryParams.toString()}`,
prefix: `apd?${queryParams.toString()}`,
});
return response.data;
return response;
};
const getStatusById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `status/${id}`,
});
return response.data;
};
const createStatus = async (queryParams) => {
const createApd = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `status`,
prefix: `apd`,
params: queryParams,
});
return response.data;
};
const updateStatus = async (id, queryParams) => {
const updateApd = async (vendor_id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `status/${id}`,
prefix: `apd/${vendor_id}`,
params: queryParams,
});
return response.data;
};
const deleteStatus = async (id) => {
const deleteApd = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `status/${id}`,
prefix: `apd/${queryParams}`,
});
return response.data;
};
export { getAllStatuss, getStatusById, createStatus, updateStatus, deleteStatus };
const getJenisPermit = async () => {
const response = await SendRequest({
method: 'get',
prefix: `apd/jenis-permit`,
});
return response.data;
};
export { getAllApd, createApd, updateApd, deleteApd, getJenisPermit };

109
src/api/master-brand.jsx
View File

@@ -1,109 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllBrands = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `brand?${queryParams.toString()}`,
});
return response.data;
};
const getBrandById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `brand/${id}`,
});
return response.data;
};
const createBrand = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `brand`,
params: queryParams,
});
return response.data;
};
const updateBrand = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `brand/${id}`,
params: queryParams,
});
return response.data;
};
const deleteBrand = async (id) => {
const response = await SendRequest({
method: 'delete',
prefix: `brand/${id}`,
});
return response.data;
};
const getErrorCodesByBrandId = async (brandId, queryParams) => {
const query = queryParams ? `?${queryParams.toString()}` : '';
const response = await SendRequest({
method: 'get',
prefix: `error-code/brand/${brandId}${query}`,
});
return response.data;
};
const getErrorCodeById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `error-code/${id}`,
});
return response.data;
};
const createErrorCode = async (brandId, queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `error-code/brand/${brandId}`,
params: queryParams,
});
return response.data;
};
const updateErrorCode = async (brandId, errorCodeId, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `error-code/brand/${brandId}/${errorCodeId}`,
params: queryParams,
});
return response.data;
};
const deleteErrorCode = async (brandId, errorCode) => {
const response = await SendRequest({
method: 'delete',
prefix: `error-code/brand/${brandId}/${errorCode}`,
});
return response.data;
};
export {
getAllBrands,
getBrandById,
createBrand,
updateBrand,
deleteBrand,
getErrorCodesByBrandId,
getErrorCodeById,
createErrorCode,
updateErrorCode,
deleteErrorCode
};

139
src/api/master-device.jsx
View File

@@ -1,12 +1,88 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllDevice = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `device?${queryParams.toString()}`,
});
console.log('getAllDevice response:', response);
console.log('Query params:', queryParams.toString());
return response.data;
// Backend response structure:
// {
// statusCode: 200,
// data: [...devices],
// paging: {
// current_page: 1,
// current_limit: 10,
// total_limit: 50,
// total_page: 5
// }
// }
// Check if backend returns paginated data
if (response.paging) {
const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: {
page: response.paging.current_page || 1,
limit: response.paging.current_limit || 10,
total: totalData,
page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
},
total: totalData
}
};
}
// Fallback: If backend returns all data without pagination (old behavior)
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
const allData = response.data || [];
const totalData = allData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = allData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
}
};
} catch (error) {
console.error('getAllDevice error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getDeviceById = async (id) => {
@@ -14,7 +90,6 @@ const getDeviceById = async (id) => {
method: 'get',
prefix: `device/${id}`,
});
return response.data;
};
@@ -24,27 +99,71 @@ const createDevice = async (queryParams) => {
prefix: `device`,
params: queryParams,
});
console.log('createDevice full response:', response);
console.log('createDevice payload sent:', queryParams);
return response.data;
// Backend returns: { statusCode, message, rows, data: [device_object] }
// Check if response is empty array (error from SendRequest)
if (Array.isArray(response) && response.length === 0) {
return {
statusCode: 500,
data: null,
message: 'Request failed',
rows: 0
};
}
// Extract first item from data array
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const updateDevice = async (id, queryParams) => {
const updateDevice = async (device_id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `device/${id}`,
prefix: `device/${device_id}`,
params: queryParams,
});
console.log('updateDevice full response:', response);
console.log('updateDevice payload sent:', queryParams);
return response.data;
// Backend returns: { statusCode, message, rows, data: [device_object] }
// Check if response is empty array (error from SendRequest)
if (Array.isArray(response) && response.length === 0) {
return {
statusCode: 500,
data: null,
message: 'Request failed',
rows: 0
};
}
// Extract first item from data array
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const deleteDevice = async (id) => {
const deleteDevice = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `device/${id}`,
prefix: `device/${queryParams}`,
});
return response.data;
console.log('deleteDevice full response:', response);
// Backend returns: { statusCode, message, rows: null, data: true }
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message,
rows: response.rows
};
};
export { getAllDevice, getDeviceById, createDevice, updateDevice, deleteDevice };

165
src/api/master-plant-section.jsx
View File

@@ -1,12 +1,97 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllPlantSection = async (queryParams) => {
try {
// Ensure queryParams is URLSearchParams object
const params = queryParams instanceof URLSearchParams ? queryParams : new URLSearchParams(queryParams);
const response = await SendRequest({
method: 'get',
prefix: `plant-sub-section?${queryParams.toString()}`,
prefix: `plant-sub-section?${params.toString()}`,
});
console.log('getAllPlantSection response:', response);
console.log('Query params:', params.toString());
return response.data;
// Backend response structure:
// {
// statusCode: 200,
// data: [...plantSections],
// paging: {
// current_page: 1,
// current_limit: 10,
// total_limit: 50,
// total_page: 5
// }
// }
// Check if backend returns paginated data
if (response.paging) {
// Extract total_data from first record, or fallback to total_limit or rows
const totalData = response.data?.[0]?.total_data || response.paging.total_limit || response.rows || response.data?.length || 0;
// Use total_limit as total count, handle 0 values for page/limit
const currentPage = response.paging.current_page || 1;
const currentLimit = response.paging.current_limit || 10;
const totalPages = response.paging.total_page || Math.ceil(totalData / currentLimit);
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: totalPages
},
total: totalData
}
};
}
// Fallback: If backend returns all data without pagination (old behavior)
const parsedParams = Object.fromEntries(params);
const currentPage = parseInt(parsedParams.page) || 1;
const currentLimit = parseInt(parsedParams.limit) || 10;
const allData = response.data || [];
const totalData = allData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = allData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
}
};
} catch (error) {
console.error('getAllPlantSection error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getPlantSectionById = async (id) => {
@@ -14,7 +99,6 @@ const getPlantSectionById = async (id) => {
method: 'get',
prefix: `plant-sub-section/${id}`,
});
return response.data;
};
@@ -24,33 +108,80 @@ const createPlantSection = async (queryParams) => {
prefix: `plant-sub-section`,
params: queryParams,
});
console.log('createPlantSection full response:', response);
console.log('createPlantSection payload sent:', queryParams);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [plantSection_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const updatePlantSection = async (id, queryParams) => {
const updatePlantSection = async (plant_section_id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `plant-sub-section/${id}`,
prefix: `plant-sub-section/${plant_section_id}`,
params: queryParams,
});
console.log('updatePlantSection full response:', response);
console.log('updatePlantSection payload sent:', queryParams);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [plantSection_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const deletePlantSection = async (id) => {
const deletePlantSection = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `plant-sub-section/${id}`,
prefix: `plant-sub-section/${queryParams}`,
});
console.log('deletePlantSection full response:', response);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows: null, data: true }
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message,
rows: response.rows
};
};
export {
getAllPlantSection,
getPlantSectionById,
createPlantSection,
updatePlantSection,
deletePlantSection,
};
export { getAllPlantSection, getPlantSectionById, createPlantSection, updatePlantSection, deletePlantSection };

47
src/api/master-shift.jsx
View File

@@ -1,12 +1,29 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllShift = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `shift?${queryParams.toString()}`,
});
return response.data;
return response;
} catch (error) {
console.error('getAllShift error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getShiftById = async (id) => {
@@ -14,7 +31,6 @@ const getShiftById = async (id) => {
method: 'get',
prefix: `shift/${id}`,
});
return response.data;
};
@@ -22,20 +38,26 @@ const createShift = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `shift`,
params: queryParams,
data: queryParams,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const updateShift = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `shift/${id}`,
params: queryParams,
data: queryParams,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const deleteShift = async (id) => {
@@ -43,8 +65,11 @@ const deleteShift = async (id) => {
method: 'delete',
prefix: `shift/${id}`,
});
return response.data;
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
export { getAllShift, getShiftById, createShift, updateShift, deleteShift };

146
src/api/master-tag.jsx
View File

@@ -1,12 +1,93 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllTag = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `tags?${queryParams.toString()}`,
});
return response.data;
// Check if response has error
if (response.error) {
console.error('getAllTag error response:', response);
return {
status: response.statusCode || 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: response.message
};
}
// Check if backend returns paginated data
if (response.paging) {
const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: {
page: response.paging.current_page || 1,
limit: response.paging.current_limit || 10,
total: totalData,
page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
},
total: totalData
}
};
}
// Fallback: If backend returns all data without pagination (old behavior)
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
const allData = response.data || [];
const totalData = allData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = allData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
}
};
} catch (error) {
console.error('getAllTag catch error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getTagById = async (id) => {
@@ -14,7 +95,6 @@ const getTagById = async (id) => {
method: 'get',
prefix: `tags/${id}`,
});
return response.data;
};
@@ -25,26 +105,74 @@ const createTag = async (queryParams) => {
params: queryParams,
});
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [tag_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const updateTag = async (id, queryParams) => {
const updateTag = async (tag_id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `tags/${id}`,
prefix: `tags/${tag_id}`,
params: queryParams,
});
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [tag_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const deleteTag = async (id) => {
const deleteTag = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `tags/${id}`,
prefix: `tags/${queryParams}`,
});
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows: null, data: true }
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message,
rows: response.rows
};
};
export { getAllTag, getTagById, createTag, updateTag, deleteTag };

169
src/api/master-unit.jsx
View File

@@ -1,12 +1,95 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllUnit = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `unit?${queryParams.toString()}`,
});
console.log('getAllUnit response:', response);
console.log('Query params:', queryParams.toString());
return response.data;
// Check if response has error
if (response.error) {
console.error('getAllUnit error response:', response);
return {
status: response.statusCode || 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: response.message
};
}
// Check if backend returns paginated data
if (response.paging) {
const totalData = response.data?.[0]?.total_data || response.rows || response.data?.length || 0;
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: {
page: response.paging.current_page || 1,
limit: response.paging.current_limit || 10,
total: totalData,
page_total: response.paging.total_page || Math.ceil(totalData / (response.paging.current_limit || 10))
},
total: totalData
}
};
}
// Fallback: If backend returns all data without pagination
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
const allData = response.data || [];
const totalData = allData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = allData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
}
};
} catch (error) {
console.error('getAllUnit catch error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getUnitById = async (id) => {
@@ -14,37 +97,101 @@ const getUnitById = async (id) => {
method: 'get',
prefix: `unit/${id}`,
});
return response.data;
};
const createUnit = async (queryParams) => {
// Map frontend fields to backend fields
const backendParams = {
unit_name: queryParams.name,
is_active: queryParams.is_active,
};
const response = await SendRequest({
method: 'post',
prefix: `unit`,
params: queryParams,
params: backendParams,
});
console.log('createUnit full response:', response);
console.log('createUnit payload sent:', backendParams);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [unit_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const updateUnit = async (id, queryParams) => {
const updateUnit = async (unit_id, queryParams) => {
// Map frontend fields to backend fields
const backendParams = {
unit_name: queryParams.name,
is_active: queryParams.is_active,
};
const response = await SendRequest({
method: 'put',
prefix: `unit/${id}`,
params: queryParams,
prefix: `unit/${unit_id}`,
params: backendParams,
});
console.log('updateUnit full response:', response);
console.log('updateUnit payload sent:', backendParams);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows, data: [unit_object] }
return {
statusCode: response.statusCode || 200,
data: response.data?.[0] || response.data,
message: response.message,
rows: response.rows
};
};
const deleteUnit = async (id) => {
const deleteUnit = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `unit/${id}`,
prefix: `unit/${queryParams}`,
});
console.log('deleteUnit full response:', response);
return response.data;
// Check if response has error flag
if (response.error) {
return {
statusCode: response.statusCode || 500,
data: null,
message: response.message || 'Request failed',
rows: 0
};
}
// Backend returns: { statusCode, message, rows: null, data: true }
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message,
rows: response.rows
};
};
export { getAllUnit, getUnitById, createUnit, updateUnit, deleteUnit };

105
src/api/notification.jsx
View File

@@ -1,105 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllNotification = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `notification?${queryParams.toString()}`,
});
return response.data;
};
const getNotificationById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `notification/${id}`,
});
return response.data;
};
const getNotificationDetail = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `notification/${id}`,
});
return response.data;
};
// Create new notification log
const createNotificationLog = async (data) => {
const response = await SendRequest({
method: 'post',
prefix: 'notification-log',
params: data,
});
return response.data;
};
// Get notification logs by notification_error_id
const getNotificationLogByNotificationId = async (notificationId) => {
const response = await SendRequest({
method: 'get',
prefix: `notification-log/notification_error/${notificationId}`,
});
return response.data;
};
// update is_read status
const updateIsRead = async (notificationId) => {
const response = await SendRequest({
method: 'put',
prefix: `notification/${notificationId}`,
});
return response.data;
};
// Resend notification to specific user
const resendNotificationToUser = async (notificationId, userId) => {
const response = await SendRequest({
method: 'post',
prefix: `notification/${notificationId}/resend/${userId}`,
});
return response.data;
};
// Resend Chat by User
const resendChatByUser = async (notificationId, userPhone) => {
const response = await SendRequest({
method: 'post',
prefix: `notification-user/resend/${notificationId}/${userPhone}`,
});
return response.data;
};
// Resend Chat All User
const resendChatAllUser = async (notificationId) => {
const response = await SendRequest({
method: 'post',
prefix: `notification/resend/${notificationId}`,
});
return response.data;
};
// Searching
const searchData = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `notification?criteria=${queryParams}`,
});
return response.data;
};
export {
getAllNotification,
getNotificationById,
getNotificationDetail,
createNotificationLog,
getNotificationLogByNotificationId,
updateIsRead,
resendNotificationToUser,
resendChatByUser,
resendChatAllUser,
searchData,
};

156
src/api/role.jsx
View File

@@ -1,12 +1,70 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllRole = async (queryParams) => {
try {
const response = await SendRequest({
method: 'get',
prefix: `roles?${queryParams.toString()}`,
});
return response.data;
console.log('Role API Response:', response);
// Check if backend returns paginated data
if (response.paging) {
// Backend already provides pagination info
return {
status: response.statusCode || 200,
data: {
data: response.data || [],
paging: response.paging,
total: response.paging.total || 0
}
};
}
// Fallback: If backend returns all data without pagination
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
const allData = response.data || [];
const totalData = allData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = allData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit),
},
total: totalData,
},
};
} catch (error) {
console.error('getAllRole error:', error);
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getRoleById = async (id) => {
@@ -14,7 +72,6 @@ const getRoleById = async (id) => {
method: 'get',
prefix: `roles/${id}`,
});
return response.data;
};
@@ -25,26 +82,107 @@ const createRole = async (queryParams) => {
params: queryParams,
});
return response.data;
console.log('Create Role API Response:', response);
// Check for error status (not 200, 201, or success)
const isSuccess =
response.statusCode === 200 || response.statusCode === 201 || response.status === 'success';
if (!isSuccess && response.statusCode >= 400) {
let errorMessage = response.message || 'Gagal menambahkan role';
// Handle SQL unique constraint violation
if (
errorMessage.includes('UNIQUE KEY constraint') ||
errorMessage.includes('duplicate key')
) {
errorMessage = `Role dengan nama "${queryParams.role_name}" sudah ada. Silakan gunakan nama lain.`;
}
return {
statusCode: response.statusCode,
data: response.data,
message: errorMessage,
};
}
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message || 'Berhasil menambahkan role',
};
};
const updateRole = async (id, queryParams) => {
const updateRole = async (role_id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `roles/${id}`,
prefix: `roles/${role_id}`,
params: queryParams,
});
return response.data;
console.log('Update Role API Response:', response);
// Check for error status (not 200, 201, or success)
const isSuccess =
response.statusCode === 200 || response.statusCode === 201 || response.status === 'success';
if (!isSuccess && response.statusCode >= 400) {
let errorMessage = response.message || 'Gagal mengubah role';
// Handle SQL unique constraint violation
if (
errorMessage.includes('UNIQUE KEY constraint') ||
errorMessage.includes('duplicate key')
) {
errorMessage = `Role dengan nama "${queryParams.role_name}" sudah ada. Silakan gunakan nama lain.`;
}
return {
statusCode: response.statusCode,
data: response.data,
message: errorMessage,
};
}
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message || 'Berhasil mengubah role',
};
};
const deleteRole = async (id) => {
const deleteRole = async (queryParams) => {
const response = await SendRequest({
method: 'delete',
prefix: `roles/${id}`,
prefix: `roles/${queryParams}`,
});
return response.data;
console.log('Delete API Response:', response);
// Check for errors
if (response.statusCode !== 200) {
let errorMessage = response.message || 'Gagal menghapus role';
// Handle foreign key constraint
if (errorMessage.includes('REFERENCE constraint') || errorMessage.includes('foreign key')) {
errorMessage = 'Role tidak dapat dihapus karena masih digunakan oleh user.';
}
return {
statusCode: response.statusCode,
data: response.data,
message: errorMessage,
};
}
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message,
};
};
export { getAllRole, getRoleById, createRole, updateRole, deleteRole };

50
src/api/sparepart.jsx
View File

@@ -1,50 +0,0 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllSparepart = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `sparepart?${queryParams.toString()}`,
});
return response.data;
};
const getSparepartById = async (id) => {
const response = await SendRequest({
method: 'get',
prefix: `sparepart/${id}`,
});
return response.data;
};
const createSparepart = async (queryParams) => {
const response = await SendRequest({
method: 'post',
prefix: `sparepart`,
params: queryParams,
});
return response.data;
};
const updateSparepart = async (id, queryParams) => {
const response = await SendRequest({
method: 'put',
prefix: `sparepart/${id}`,
params: queryParams,
});
return response.data;
};
const deleteSparepart = async (id) => {
const response = await SendRequest({
method: 'delete',
prefix: `sparepart/${id}`,
});
return response.data;
};
export { getAllSparepart, getSparepartById, createSparepart, updateSparepart, deleteSparepart };

51
src/api/user-admin.jsx
View File

@@ -1,11 +1,15 @@
// user-admin.jsx
import axios from 'axios';
import { SendRequest } from '../components/Global/ApiRequest';
const baseURL = import.meta.env.VITE_API_SERVER;
const getAllUser = async (queryParams) => {
const response = await SendRequest({
method: 'get',
prefix: `admin-user?${queryParams.toString()}`,
});
return response.data;
return response;
};
const getUserDetail = async (id) => {
@@ -13,7 +17,7 @@ const getUserDetail = async (id) => {
method: 'get',
prefix: `admin-user/${id}`,
});
return response.data;
return response;
};
const updateUser = async (id, data) => {
@@ -22,7 +26,7 @@ const updateUser = async (id, data) => {
prefix: `admin-user/${id}`,
params: data,
});
return response.data;
return response;
};
const deleteUser = async (id) => {
@@ -30,7 +34,7 @@ const deleteUser = async (id) => {
method: 'delete',
prefix: `admin-user/${id}`,
});
return response.data;
return response;
};
const approvalUser = async (id, queryParams) => {
@@ -39,7 +43,42 @@ const approvalUser = async (id, queryParams) => {
prefix: `admin-user/approve/${id}`,
params: queryParams,
});
return response.data;
return response;
};
export { getAllUser, getUserDetail, updateUser, deleteUser, approvalUser };
const uploadFile = async (formData) => {
try {
const token = localStorage.getItem('token')?.replace(/"/g, '') || '';
const url = `${baseURL}/file-upload`;
const response = await axios.post(url, formData, {
headers: {
Authorization: `Bearer ${token}`,
'Accept-Language': 'en_US',
'Content-Type': 'multipart/form-data',
},
});
return {
statusCode: response.data?.statusCode ?? 0,
message: response.data?.message ?? '',
data: response.data?.data ?? {},
};
} catch (error) {
console.error('❌ ERROR di uploadFile:', error);
return {
statusCode: error?.response?.status || 500,
message: error?.response?.data?.message || 'Upload gagal',
data: {},
};
}
};
export { getAllUser, getUserDetail, updateUser, deleteUser, approvalUser, uploadFile };

161
src/api/user.jsx
View File

@@ -1,12 +1,97 @@
import { SendRequest } from '../components/Global/ApiRequest';
const getAllUser = async (queryParams) => {
try {
console.log('getAllUser queryParams:', queryParams.toString());
const response = await SendRequest({
method: 'get',
prefix: `user?${queryParams.toString()}`,
});
return response.data;
console.log('getAllUser response:', response);
// Backend now handles pagination, just return the response
// Expected backend response structure:
// {
// statusCode: 200,
// data: [...users],
// paging: { page, limit, total, page_total }
// }
// Check if backend returns paginated data
if (response.paging) {
// Filter out super admin users (is_sa = true)
const allData = response.data || [];
const filteredData = allData.filter(user => user.is_sa !== true && user.is_sa !== 1);
// Recalculate pagination info after filtering
const totalAfterFilter = filteredData.length;
const currentPage = response.paging.page || 1;
const currentLimit = response.paging.limit || 10;
return {
status: response.statusCode || 200,
data: {
data: filteredData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalAfterFilter,
page_total: Math.ceil(totalAfterFilter / currentLimit)
},
total: totalAfterFilter
}
};
}
// Fallback: If backend returns all data without pagination (old behavior)
const params = Object.fromEntries(queryParams);
const currentPage = parseInt(params.page) || 1;
const currentLimit = parseInt(params.limit) || 10;
const allData = response.data || [];
// Filter out users with is_sa = true or 1 (client-side filtering)
const filteredData = allData.filter(user => user.is_sa !== true && user.is_sa !== 1);
const totalData = filteredData.length;
// Client-side pagination
const startIndex = (currentPage - 1) * currentLimit;
const endIndex = startIndex + currentLimit;
const paginatedData = filteredData.slice(startIndex, endIndex);
return {
status: response.statusCode || 200,
data: {
data: paginatedData,
paging: {
page: currentPage,
limit: currentLimit,
total: totalData,
page_total: Math.ceil(totalData / currentLimit)
},
total: totalData
}
};
} catch (error) {
console.error('getAllUser error:', error);
// Return empty data on error to prevent app crash
return {
status: 500,
data: {
data: [],
paging: {
page: 1,
limit: 10,
total: 0,
page_total: 0
},
total: 0
},
error: error.message
};
}
};
const getUserById = async (id) => {
@@ -14,7 +99,6 @@ const getUserById = async (id) => {
method: 'get',
prefix: `user/${id}`,
});
return response.data;
};
@@ -24,8 +108,12 @@ const createUser = async (queryParams) => {
prefix: `user`,
params: queryParams,
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const updateUser = async (user_id, queryParams) => {
@@ -34,8 +122,12 @@ const updateUser = async (user_id, queryParams) => {
prefix: `user/${user_id}`,
params: queryParams,
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const deleteUser = async (queryParams) => {
@@ -43,8 +135,12 @@ const deleteUser = async (queryParams) => {
method: 'delete',
prefix: `user/${queryParams}`,
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const approveUser = async (user_id) => {
@@ -52,8 +148,12 @@ const approveUser = async (user_id) => {
method: 'put',
prefix: `user/${user_id}/approve`,
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const rejectUser = async (user_id) => {
@@ -61,8 +161,12 @@ const rejectUser = async (user_id) => {
method: 'put',
prefix: `user/${user_id}/reject`,
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const toggleActiveUser = async (user_id, is_active) => {
@@ -70,11 +174,15 @@ const toggleActiveUser = async (user_id, is_active) => {
method: 'put',
prefix: `user/${user_id}`,
params: {
is_active: is_active,
is_active: is_active
},
});
return response.data;
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message
};
};
const changePassword = async (user_id, new_password) => {
@@ -82,21 +190,18 @@ const changePassword = async (user_id, new_password) => {
method: 'put',
prefix: `user/change-password/${user_id}`,
params: {
new_password: new_password,
new_password: new_password
},
});
return response.data;
console.log('Change Password Response:', response);
// Return full response with statusCode
return {
statusCode: response.statusCode || 200,
data: response.data,
message: response.message || 'Password berhasil diubah'
};
};
export {
getAllUser,
getUserById,
createUser,
updateUser,
deleteUser,
approveUser,
rejectUser,
toggleActiveUser,
changePassword,
};
export { getAllUser, getUserById, createUser, updateUser, deleteUser, approveUser, rejectUser, toggleActiveUser, changePassword };

BIN
src/assets/bg-cod-1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

261
src/assets/svg/air_dryer_A_rev.svg
View File

@@ -1,261 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" xmlns:bx="https://boxy-svg.com">
<defs>
<bx:grid x="0" y="0" width="25" height="25"/>
</defs>
<rect y="10.407" width="972.648" height="440.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, 74.03907, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<g transform="matrix(0.826913, 0, 0, 0.698383, 500.726135, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<rect x="371.728" y="182.483" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-box: fill-box; transform-origin: 50% 50%;" d="M 551.111 -16.154 L 551.202 389.079" transform="matrix(0, -1.184039, 0.844567, 0, 0.000036, 0.000096)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 479.043 149.568 L 495.765 149.568 L 495.765 166.035 L 479.043 166.035 L 479.043 149.568 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 598.485px 226.003px;" d="M 478.737 156.666 L 495.763 156.666"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 465.169 193.204 L 511.13 179.759 L 511.13 193.204 L 465.169 179.759 L 465.169 193.204 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 487.934 186.514 L 487.934 157.095"/>
<rect x="715.724" y="182.138" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, -2.11712, 3.138935)">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
<g>
<rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<g>
<rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
</g>
</g>
<rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
<rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
<rect x="371.639" y="358.212" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.133px 361.256px;" d="M 692.126 397.022 L 692.14 325.49" transform="matrix(0, -1.184039, 0.844567, 0, 0.000011, 0.00005)"/>
<rect x="715.635" y="357.867" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 798px 493.641px;" d="M 661.975 334.874 L 661.975 360.911"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 552.59px 334.782px;" d="M 552.508 244.429 L 552.665 425.136" transform="matrix(0, 1.184039, -0.844567, 0, -0.000058, 0.000018)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 601.786px 283.137px;" d="M 601.741 312.51 L 601.832 253.764" transform="matrix(0, 1.184039, -0.844567, 0, -0.000063, 0.000028)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 577.266px 308.682px;" d="M 577.237 334.87 L 577.295 282.492" transform="matrix(-1, 0, 0, -1, -0.000041, -0.00003)"/>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 491.13504, 29.785091)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 406.945px 361.188px;" d="M 406.92 329.322 L 406.969 393.054" transform="matrix(0, 1.184039, -0.844567, 0, 0.00001, 0.00007)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 521.472px 494.156px;" d="M 433.307 334.116 L 433.308 362.382"/>
<g transform="matrix(0.491177, 0, 0, 0.523644, 419.010895, 56.68491)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(0.491177, 0, 0, 0.523644, 603.674133, 29.692444)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 677.00824, 56.209183)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 548.454px 361.62px;" d="M 548.372 271.267 L 548.529 451.974" transform="matrix(0, 1.184039, -0.844567, 0, 0.00006, -0.000036)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 578.392px 383.459px;" d="M 578.329 405.407 L 578.456 361.51" transform="matrix(-1, 0, 0, -1, -0.000055, -0.000003)"/>
<g transform="matrix(0.826913, 0, 0, -0.698383, 0.257882, 545.083069)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 704.638px 576.106px;" d="M 621.828 405.49 L 634.485 405.49"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 584.749px 405.496px;" d="M 591.042 405.497 L 578.456 405.498"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 606.436px 405.492px;" d="M 591.042 398.364 L 591.042 412.623 L 621.831 398.364 L 621.831 412.623 L 591.042 398.364 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 599.432px 413.831px;" d="M 592.464 422.169 L 592.464 405.493 L 606.401 405.493" transform="matrix(-1, 0, 0, -1, -0.000078, -0.000049)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 648.376px 405.65px;" d="M 648.369 435.621 L 648.383 375.678" transform="matrix(0, -1.184039, 0.844567, 0, 0.000012, -0.00004)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 673.882px 406.067px;" d="M 673.869 398.172 L 673.893 413.963" transform="matrix(-1, 0, 0, -1, -0.000092, -0.000022)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.821px 404.67px;" d="M 692.786 392.381 L 692.854 416.962" transform="matrix(0, 1.184039, -0.844567, 0, 0.000001, -0.000097)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.406px 383.726px;" d="M 703.396 405.334 L 703.415 362.116"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 681.807px 406.051px;" d="M 681.793 398.157 L 681.818 413.948" transform="matrix(-1, 0, 0, -1, 0.000055, 0.000046)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.987px 397.326px;" d="M 677.977 403.041 L 677.995 391.61"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.933px 411.78px;" d="M 677.924 417.977 L 677.941 405.582"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="650.811" cy="385.504" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(0.000343, -1, 1, 0.000266, 743.834961, 473.853179)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 651.034px 399.693px;" d="M 651.025 405.408 L 651.042 393.977"/>
<path d="M -546.834 -405.87 L -543.785 -398.138 L -550.56 -398.138 L -546.834 -405.87 Z" bx:shape="triangle -550.56 -405.87 6.775 7.732 0.55 0 1@11f2e68a" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(-1, 0, 0, -1, 1094.344971, 804.007996)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 546.953px 390.056px;" d="M 546.94 382.161 L 546.965 397.952" transform="matrix(-1, 0, 0, -1, -0.000013, 0.000046)"/>
<rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
<g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, -0.563979, 0, 588.703491, -326.882202)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 807.67px 264.838px;" d="M 807.657 276.289 L 807.693 253.387" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.000091)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 816.592px 247.829px;" d="M 816.56 230.114 L 816.655 265.543" transform="matrix(-1, 0, 0, -1, 0.000101, 0.000009)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="840.215" cy="233.608" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 933.237163, 321.956912)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="839.876" cy="254.847" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 932.895305, 343.197025)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 823.288px 234.151px;" d="M 823.282 242.163 L 823.294 226.137" transform="matrix(0, 1.184039, -0.844567, 0, -0.000084, 0.000084)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 822.751px 254.694px;" d="M 822.745 262.706 L 822.763 246.68" transform="matrix(0, 1.184039, -0.844567, 0, -0.00002, 0.000032)"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 909.661358, 277.142276)"/>
<g transform="matrix(0.387768, 0, 0, -0.200385, 207.60318, -199.315506)" style="transform-origin: 72.2406px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, 0.563979, 0, 51.251434, -326.206329)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 288.049px 265.514px;" d="M 288.037 254.064 L 288.073 276.966" transform="matrix(0, -1.184039, 0.844567, 0, -0.000019, 0.000042)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 279.127px 248.505px;" d="M 279.095 266.219 L 279.19 230.79"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.5" cy="234.284" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.108874, 140.490195)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.84" cy="255.523" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.450457, 161.730307)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.43px 234.827px;" d="M 272.424 226.815 L 272.436 242.841" transform="matrix(0, 1.184039, -0.844567, 0, 0.000012, -0.000015)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.968px 255.37px;" d="M 272.962 247.358 L 272.98 263.384" transform="matrix(0, 1.184039, -0.844567, 0, -0.000011, 0.000034)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 170.68468, 95.675559)"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 47.595016, -269.416931)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>INLET</text>
<path d="M -544.544 -165.9 L -541.495 -158.168 L -548.27 -158.168 L -544.544 -165.9 Z" bx:shape="triangle -548.27 -165.9 6.775 7.732 0.55 0 1@12a1c9af" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -544.876px -162.033px;" transform="matrix(-1, 0, 0, -1, 1089.751221, 324.066467)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 544.653px 150.086px;" d="M 544.639 142.192 L 544.664 157.983" transform="matrix(-1, 0, 0, -1, -0.000086, 0.000018)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 404.306 125.878 L 416.234 125.878 L 416.234 148.965 L 404.306 148.965 L 404.306 125.878 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000039, -0.000007)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 498.152px 180.679px;" d="M 408.92 144.738 L 408.92 130.357"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 427.836 146.217 L 460.619 127.367 L 460.619 146.217 L 427.836 127.367 L 427.836 146.217 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000009)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 426.851 157.594 L 426.851 116.351" transform="matrix(0, -1.18404, 0.844567, 0, -0.000439, -0.000081)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 647.335px 171.745px;" d="M 647.177 186.902 L 647.494 156.588" transform="matrix(-1, 0, 0, -1, -0.000021, -0.000027)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 680.766px 138.025px;" d="M 674.802 149.569 L 686.73 149.569 L 686.73 126.482 L 674.802 126.482 L 674.802 149.569 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000004, 0.000043)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 897.148px 118.148px;" d="M 682.129 145.344 L 682.129 130.964"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 646.809px 137.396px;" d="M 630.417 127.971 L 663.201 146.821 L 663.201 127.971 L 630.417 146.821 L 630.417 127.971 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000004, -0.000033)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 664.185px 137.577px;" d="M 664.185 116.956 L 664.186 158.199" transform="matrix(0, -1.184039, 0.844567, 0, -0.000026, -0.000041)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 590.855 148.509 L 607.577 148.509 L 607.577 164.977 L 590.855 164.977 L 590.855 148.509 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 733.701px 224.488px;" d="M 590.555 155.608 L 607.58 155.608"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 576.981 192.146 L 622.941 178.701 L 622.941 192.146 L 576.981 178.701 L 576.981 192.146 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 599.746 185.455 L 599.746 156.037"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 640.474 90.952 L 652.913 90.952 L 652.913 107.419 L 640.474 107.419 L 640.474 90.952 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 646.819px 113.115px;" d="M 646.799 107.896 L 646.839 118.334"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 650.466px 95.308px;" d="M 650.455 97.624 L 650.476 92.992" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.00002)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 642.857px 102.712px;" d="M 642.846 105.028 L 642.867 100.396" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000035)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 437.929 90.244 L 450.367 90.244 L 450.367 106.712 L 437.929 106.712 L 437.929 90.244 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 444.274px 112.408px;" d="M 444.253 107.189 L 444.293 117.627"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 447.919px 94.601px;" d="M 447.909 96.917 L 447.93 92.285" transform="matrix(0, -1.184039, 0.844567, 0, -0.000022, 0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 440.31px 102.004px;" d="M 440.3 104.321 L 440.32 99.689" transform="matrix(0, -1.184039, 0.844567, 0, -0.000028, -0.000004)"/>
<rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
<rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
<rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
<rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
<rect x="126.341" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.3" y="537.792" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="537.752" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="56.987" y="250.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT or LT Dry</text>
<rect x="126.135" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="180.05" y="251.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">LT Dry</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177" y="251.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT Dry</text>
<rect x="43.443" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="288.876" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Opmode</text>
<rect x="126.135" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
<rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
<rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
<rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
<rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="192.401" rx="20.673" ry="17.46"/>
<rect x="870.356" y="230.113" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1069.06" y="349.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Shutdown</text>
<rect x="870.356" y="257.602" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="279.699" rx="20.673" ry="17.46"/>
<rect x="870.356" y="317.411" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1059.06" y="474.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Status</text>
<rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_4021"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT A (01-CL-10532-A)</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4005">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4004">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4001">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4002">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4003">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4009">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4010">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4011">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4008">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4007">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_4006">##</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_4018"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_4019"/>
<ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_4016"/>
<ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_4017"/>
<ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_4020"/>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_4018"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_4021"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

250
src/assets/svg/air_dryer_B_rev.svg
View File

@@ -1,250 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" xmlns:bx="https://boxy-svg.com">
<defs>
<bx:grid x="0" y="0" width="25" height="25"/>
</defs>
<rect y="10.407" width="972.648" height="440.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, 74.03907, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<g transform="matrix(0.826913, 0, 0, 0.698383, 500.726135, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<rect x="371.728" y="182.483" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-box: fill-box; transform-origin: 50% 50%;" d="M 551.111 -16.154 L 551.202 389.079" transform="matrix(0, -1.184039, 0.844567, 0, 0.000036, 0.000096)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 479.043 149.568 L 495.765 149.568 L 495.765 166.035 L 479.043 166.035 L 479.043 149.568 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 598.485px 226.003px;" d="M 478.737 156.666 L 495.763 156.666"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 465.169 193.204 L 511.13 179.759 L 511.13 193.204 L 465.169 179.759 L 465.169 193.204 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 487.934 186.514 L 487.934 157.095"/>
<rect x="715.724" y="182.138" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, -2.11712, 3.138935)">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
<g>
<rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<g>
<rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
</g>
</g>
<rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
<rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
<rect x="371.639" y="358.212" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.133px 361.256px;" d="M 692.126 397.022 L 692.14 325.49" transform="matrix(0, -1.184039, 0.844567, 0, 0.000011, 0.00005)"/>
<rect x="715.635" y="357.867" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 798px 493.641px;" d="M 661.975 334.874 L 661.975 360.911"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 552.59px 334.782px;" d="M 552.508 244.429 L 552.665 425.136" transform="matrix(0, 1.184039, -0.844567, 0, -0.000058, 0.000018)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 601.786px 283.137px;" d="M 601.741 312.51 L 601.832 253.764" transform="matrix(0, 1.184039, -0.844567, 0, -0.000063, 0.000028)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 577.266px 308.682px;" d="M 577.237 334.87 L 577.295 282.492" transform="matrix(-1, 0, 0, -1, -0.000041, -0.00003)"/>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 491.13504, 29.785091)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 406.945px 361.188px;" d="M 406.92 329.322 L 406.969 393.054" transform="matrix(0, 1.184039, -0.844567, 0, 0.00001, 0.00007)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 521.472px 494.156px;" d="M 433.307 334.116 L 433.308 362.382"/>
<g transform="matrix(0.491177, 0, 0, 0.523644, 419.010895, 56.68491)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(0.491177, 0, 0, 0.523644, 603.674133, 29.692444)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 677.00824, 56.209183)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 548.454px 361.62px;" d="M 548.372 271.267 L 548.529 451.974" transform="matrix(0, 1.184039, -0.844567, 0, 0.00006, -0.000036)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 578.392px 383.459px;" d="M 578.329 405.407 L 578.456 361.51" transform="matrix(-1, 0, 0, -1, -0.000055, -0.000003)"/>
<g transform="matrix(0.826913, 0, 0, -0.698383, 0.257882, 545.083069)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 704.638px 576.106px;" d="M 621.828 405.49 L 634.485 405.49"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 584.749px 405.496px;" d="M 591.042 405.497 L 578.456 405.498"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 606.436px 405.492px;" d="M 591.042 398.364 L 591.042 412.623 L 621.831 398.364 L 621.831 412.623 L 591.042 398.364 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 599.432px 413.831px;" d="M 592.464 422.169 L 592.464 405.493 L 606.401 405.493" transform="matrix(-1, 0, 0, -1, -0.000078, -0.000049)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 648.376px 405.65px;" d="M 648.369 435.621 L 648.383 375.678" transform="matrix(0, -1.184039, 0.844567, 0, 0.000012, -0.00004)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 673.882px 406.067px;" d="M 673.869 398.172 L 673.893 413.963" transform="matrix(-1, 0, 0, -1, -0.000092, -0.000022)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.821px 404.67px;" d="M 692.786 392.381 L 692.854 416.962" transform="matrix(0, 1.184039, -0.844567, 0, 0.000001, -0.000097)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.406px 383.726px;" d="M 703.396 405.334 L 703.415 362.116"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 681.807px 406.051px;" d="M 681.793 398.157 L 681.818 413.948" transform="matrix(-1, 0, 0, -1, 0.000055, 0.000046)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.987px 397.326px;" d="M 677.977 403.041 L 677.995 391.61"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.933px 411.78px;" d="M 677.924 417.977 L 677.941 405.582"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="650.811" cy="385.504" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(0.000343, -1, 1, 0.000266, 743.834961, 473.853179)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 651.034px 399.693px;" d="M 651.025 405.408 L 651.042 393.977"/>
<path d="M -546.834 -405.87 L -543.785 -398.138 L -550.56 -398.138 L -546.834 -405.87 Z" bx:shape="triangle -550.56 -405.87 6.775 7.732 0.55 0 1@11f2e68a" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(-1, 0, 0, -1, 1094.344971, 804.007996)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 546.953px 390.056px;" d="M 546.94 382.161 L 546.965 397.952" transform="matrix(-1, 0, 0, -1, -0.000013, 0.000046)"/>
<rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
<g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, -0.563979, 0, 588.703491, -326.882202)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 807.67px 264.838px;" d="M 807.657 276.289 L 807.693 253.387" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.000091)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 816.592px 247.829px;" d="M 816.56 230.114 L 816.655 265.543" transform="matrix(-1, 0, 0, -1, 0.000101, 0.000009)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="840.215" cy="233.608" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 933.237163, 321.956912)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="839.876" cy="254.847" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 932.895305, 343.197025)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 823.288px 234.151px;" d="M 823.282 242.163 L 823.294 226.137" transform="matrix(0, 1.184039, -0.844567, 0, -0.000084, 0.000084)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 822.751px 254.694px;" d="M 822.745 262.706 L 822.763 246.68" transform="matrix(0, 1.184039, -0.844567, 0, -0.00002, 0.000032)"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 909.661358, 277.142276)"/>
<g transform="matrix(0.387768, 0, 0, -0.200385, 207.60318, -199.315506)" style="transform-origin: 72.2406px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, 0.563979, 0, 51.251434, -326.206329)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 288.049px 265.514px;" d="M 288.037 254.064 L 288.073 276.966" transform="matrix(0, -1.184039, 0.844567, 0, -0.000019, 0.000042)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 279.127px 248.505px;" d="M 279.095 266.219 L 279.19 230.79"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.5" cy="234.284" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.108874, 140.490195)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.84" cy="255.523" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.450457, 161.730307)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.43px 234.827px;" d="M 272.424 226.815 L 272.436 242.841" transform="matrix(0, 1.184039, -0.844567, 0, 0.000012, -0.000015)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.968px 255.37px;" d="M 272.962 247.358 L 272.98 263.384" transform="matrix(0, 1.184039, -0.844567, 0, -0.000011, 0.000034)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 170.68468, 95.675559)"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 47.595016, -269.416931)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>INLET</text>
<path d="M -544.544 -165.9 L -541.495 -158.168 L -548.27 -158.168 L -544.544 -165.9 Z" bx:shape="triangle -548.27 -165.9 6.775 7.732 0.55 0 1@12a1c9af" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -544.876px -162.033px;" transform="matrix(-1, 0, 0, -1, 1089.751221, 324.066467)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 544.653px 150.086px;" d="M 544.639 142.192 L 544.664 157.983" transform="matrix(-1, 0, 0, -1, -0.000086, 0.000018)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 404.306 125.878 L 416.234 125.878 L 416.234 148.965 L 404.306 148.965 L 404.306 125.878 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000039, -0.000007)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 498.152px 180.679px;" d="M 408.92 144.738 L 408.92 130.357"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 427.836 146.217 L 460.619 127.367 L 460.619 146.217 L 427.836 127.367 L 427.836 146.217 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000009)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 426.851 157.594 L 426.851 116.351" transform="matrix(0, -1.18404, 0.844567, 0, -0.000439, -0.000081)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 647.335px 171.745px;" d="M 647.177 186.902 L 647.494 156.588" transform="matrix(-1, 0, 0, -1, -0.000021, -0.000027)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 680.766px 138.025px;" d="M 674.802 149.569 L 686.73 149.569 L 686.73 126.482 L 674.802 126.482 L 674.802 149.569 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000004, 0.000043)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 897.148px 118.148px;" d="M 682.129 145.344 L 682.129 130.964"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 646.809px 137.396px;" d="M 630.417 127.971 L 663.201 146.821 L 663.201 127.971 L 630.417 146.821 L 630.417 127.971 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000004, -0.000033)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 664.185px 137.577px;" d="M 664.185 116.956 L 664.186 158.199" transform="matrix(0, -1.184039, 0.844567, 0, -0.000026, -0.000041)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 590.855 148.509 L 607.577 148.509 L 607.577 164.977 L 590.855 164.977 L 590.855 148.509 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 733.701px 224.488px;" d="M 590.555 155.608 L 607.58 155.608"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 576.981 192.146 L 622.941 178.701 L 622.941 192.146 L 576.981 178.701 L 576.981 192.146 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 599.746 185.455 L 599.746 156.037"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 640.474 90.952 L 652.913 90.952 L 652.913 107.419 L 640.474 107.419 L 640.474 90.952 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 646.819px 113.115px;" d="M 646.799 107.896 L 646.839 118.334"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 650.466px 95.308px;" d="M 650.455 97.624 L 650.476 92.992" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.00002)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 642.857px 102.712px;" d="M 642.846 105.028 L 642.867 100.396" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000035)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 437.929 90.244 L 450.367 90.244 L 450.367 106.712 L 437.929 106.712 L 437.929 90.244 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 444.274px 112.408px;" d="M 444.253 107.189 L 444.293 117.627"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 447.919px 94.601px;" d="M 447.909 96.917 L 447.93 92.285" transform="matrix(0, -1.184039, 0.844567, 0, -0.000022, 0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 440.31px 102.004px;" d="M 440.3 104.321 L 440.32 99.689" transform="matrix(0, -1.184039, 0.844567, 0, -0.000028, -0.000004)"/>
<rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
<rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
<rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
<rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
<rect x="126.341" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.3" y="537.792" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="537.752" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="56.987" y="250.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT or LT Dry</text>
<rect x="126.135" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="180.05" y="251.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">LT Dry</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177" y="251.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT Dry</text>
<rect x="43.443" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="288.876" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Opmode</text>
<rect x="126.135" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
<rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
<rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
<rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
<rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="192.401" rx="20.673" ry="17.46"/>
<rect x="870.356" y="230.113" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1069.06" y="349.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Shutdown</text>
<rect x="870.356" y="257.602" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="279.699" rx="20.673" ry="17.46"/>
<rect x="870.356" y="317.411" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1059.06" y="474.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Status</text>
<rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT B (01-CL-10535-B)</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5005">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5004">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5001">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5002">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5003">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5009">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5010">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5011">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5008">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5007">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_5006">##</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_5018"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_5019"/>
<ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_5016"/>
<ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_5017"/>
<ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_5020"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_5021"/>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_5018"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_5021"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

251
src/assets/svg/air_dryer_C_rev.svg
View File

@@ -1,251 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500" xmlns:bx="https://boxy-svg.com">
<defs>
<bx:grid x="0" y="0" width="25" height="25"/>
</defs>
<rect y="10.407" width="972.648" height="440.159" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" x="12.119"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, 74.03907, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<g transform="matrix(0.826913, 0, 0, 0.698383, 500.726135, 53.375034)">
<ellipse style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);" cx="315" cy="183.068" rx="45" ry="45"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 1; fill: rgb(243, 243, 243);" cx="315" cy="449.112" rx="45" ry="45"/>
<rect x="270" y="180" width="90" height="270" style="stroke: rgb(0, 0, 0); fill: rgb(243, 243, 243);"/>
</g>
<rect x="371.728" y="182.483" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-box: fill-box; transform-origin: 50% 50%;" d="M 551.111 -16.154 L 551.202 389.079" transform="matrix(0, -1.184039, 0.844567, 0, 0.000036, 0.000096)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 479.043 149.568 L 495.765 149.568 L 495.765 166.035 L 479.043 166.035 L 479.043 149.568 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 598.485px 226.003px;" d="M 478.737 156.666 L 495.763 156.666"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 465.169 193.204 L 511.13 179.759 L 511.13 193.204 L 465.169 179.759 L 465.169 193.204 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 487.934 186.514 L 487.934 157.095"/>
<rect x="715.724" y="182.138" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<g transform="matrix(0.826913, 0, 0, 0.698383, -2.11712, 3.138935)">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 443.701px 171.141px;" d="M 443.542 155.983 L 443.859 186.298"/>
<g>
<rect x="622.282" y="251.383" width="35.093" height="2.463" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<g>
<rect x="625.861" y="254.048" width="28.143" height="37.69" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<rect x="625.711" y="248.983" width="28.143" height="2.361" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(243, 243, 243);" cx="640.016" cy="271.807" rx="9.717" ry="7.689"/>
</g>
</g>
<rect x="461.861" y="211.956" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px;" x="561" y="309.954" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp SP</text>
<rect x="461.861" y="221.924" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="609.476" y="330.521" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="461.424" y="242.149" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="567.471" y="352.188" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="461.424" y="252.117" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="608.947" y="373.755" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<rect x="535.456" y="242.272" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="659" y="352.363" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Heater Temp</text>
<rect x="535.456" y="252.24" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="698.476" y="373.93" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1; font-weight: bold;" x="748" y="347.676" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER</text>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 678.512px 258.693px;" d="M 678.467 229.321 L 678.558 288.066" transform="matrix(0, 1.184039, -0.844567, 0, -0.000022, -0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.162px 309.166px;" d="M 703.004 258.049 L 703.32 360.282"/>
<rect x="371.639" y="358.212" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.133px 361.256px;" d="M 692.126 397.022 L 692.14 325.49" transform="matrix(0, -1.184039, 0.844567, 0, 0.000011, 0.00005)"/>
<rect x="715.635" y="357.867" width="8.269" height="6.984" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 798px 493.641px;" d="M 661.975 334.874 L 661.975 360.911"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 552.59px 334.782px;" d="M 552.508 244.429 L 552.665 425.136" transform="matrix(0, 1.184039, -0.844567, 0, -0.000058, 0.000018)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 601.786px 283.137px;" d="M 601.741 312.51 L 601.832 253.764" transform="matrix(0, 1.184039, -0.844567, 0, -0.000063, 0.000028)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 577.266px 308.682px;" d="M 577.237 334.87 L 577.295 282.492" transform="matrix(-1, 0, 0, -1, -0.000041, -0.00003)"/>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 491.13504, 29.785091)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 406.945px 361.188px;" d="M 406.92 329.322 L 406.969 393.054" transform="matrix(0, 1.184039, -0.844567, 0, 0.00001, 0.00007)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 521.472px 494.156px;" d="M 433.307 334.116 L 433.308 362.382"/>
<g transform="matrix(0.491177, 0, 0, 0.523644, 419.010895, 56.68491)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(0.491177, 0, 0, 0.523644, 603.674133, 29.692444)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<g transform="matrix(-0.491177, 0, 0, 0.523644, 677.00824, 56.209183)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 582.89 L 30 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 98.289 582.89 L 118.071 582.89"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 49.894 600 L 49.894 565.78 L 98.289 600 L 98.289 565.78"/>
<circle style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="1094.77" cy="561.359" r="39" transform="matrix(0.17796, 0, 0, 0.155258, -141.765747, 481.674255)"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 548.454px 361.62px;" d="M 548.372 271.267 L 548.529 451.974" transform="matrix(0, 1.184039, -0.844567, 0, 0.00006, -0.000036)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 578.392px 383.459px;" d="M 578.329 405.407 L 578.456 361.51" transform="matrix(-1, 0, 0, -1, -0.000055, -0.000003)"/>
<g transform="matrix(0.826913, 0, 0, -0.698383, 0.257882, 545.083069)" style="">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 660.838px 251.447px;" d="M 660.846 262.894 L 660.846 240"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.222; transform-origin: 490.992px 230.229px;" d="M 646.097 240.002 L 676.271 240.002"/>
</g>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 704.638px 576.106px;" d="M 621.828 405.49 L 634.485 405.49"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 584.749px 405.496px;" d="M 591.042 405.497 L 578.456 405.498"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 606.436px 405.492px;" d="M 591.042 398.364 L 591.042 412.623 L 621.831 398.364 L 621.831 412.623 L 591.042 398.364 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 1.525; transform-origin: 599.432px 413.831px;" d="M 592.464 422.169 L 592.464 405.493 L 606.401 405.493" transform="matrix(-1, 0, 0, -1, -0.000078, -0.000049)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 648.376px 405.65px;" d="M 648.369 435.621 L 648.383 375.678" transform="matrix(0, -1.184039, 0.844567, 0, 0.000012, -0.00004)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 673.882px 406.067px;" d="M 673.869 398.172 L 673.893 413.963" transform="matrix(-1, 0, 0, -1, -0.000092, -0.000022)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 692.821px 404.67px;" d="M 692.786 392.381 L 692.854 416.962" transform="matrix(0, 1.184039, -0.844567, 0, 0.000001, -0.000097)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 703.406px 383.726px;" d="M 703.396 405.334 L 703.415 362.116"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 681.807px 406.051px;" d="M 681.793 398.157 L 681.818 413.948" transform="matrix(-1, 0, 0, -1, 0.000055, 0.000046)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.987px 397.326px;" d="M 677.977 403.041 L 677.995 391.61"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 677.933px 411.78px;" d="M 677.924 417.977 L 677.941 405.582"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="650.811" cy="385.504" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(0.000343, -1, 1, 0.000266, 743.834961, 473.853179)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 651.034px 399.693px;" d="M 651.025 405.408 L 651.042 393.977"/>
<path d="M -546.834 -405.87 L -543.785 -398.138 L -550.56 -398.138 L -546.834 -405.87 Z" bx:shape="triangle -550.56 -405.87 6.775 7.732 0.55 0 1@11f2e68a" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 0.763;" transform="matrix(-1, 0, 0, -1, 1094.344971, 804.007996)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 546.953px 390.056px;" d="M 546.94 382.161 L 546.965 397.952" transform="matrix(-1, 0, 0, -1, -0.000013, 0.000046)"/>
<rect x="427.269" y="377.282" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.167" y="545.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.269" y="387.25" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.643" y="567.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°C</text>
<rect x="427.27" y="412.201" width="62.018" height="9.968" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1;" x="532.168" y="595.681" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dew Temp</text>
<rect x="427.27" y="422.169" width="62.018" height="17.46" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="567.644" y="617.248" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">°F</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 24.207672, -7.192523)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>OUTLET</text>
<g transform="matrix(-0.387768, 0, 0, -0.200385, 743.634644, -199.991287)" style="transform-origin: 72.2405px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, -0.563979, 0, 588.703491, -326.882202)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 807.67px 264.838px;" d="M 807.657 276.289 L 807.693 253.387" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.000091)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 816.592px 247.829px;" d="M 816.56 230.114 L 816.655 265.543" transform="matrix(-1, 0, 0, -1, 0.000101, 0.000009)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="840.215" cy="233.608" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 933.237163, 321.956912)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="839.876" cy="254.847" rx="10.336" ry="8.73"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 932.895305, 343.197025)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 823.288px 234.151px;" d="M 823.282 242.163 L 823.294 226.137" transform="matrix(0, 1.184039, -0.844567, 0, -0.000084, 0.000084)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 822.751px 254.694px;" d="M 822.745 262.706 L 822.763 246.68" transform="matrix(0, 1.184039, -0.844567, 0, -0.00002, 0.000032)"/>
<path d="M -100.83 -89.11 H -94.198 L -94.198 -91.071 L -85.458 -88.012 L -94.198 -84.954 L -94.198 -86.915 H -100.83 V -89.11 Z" bx:shape="arrow -100.83 -91.071 15.372 6.118 2.195 8.74 0 1@7c71f9c2" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -93.144px -88.013px;" transform="matrix(0.000343, -1, 1, 0.000266, 909.661358, 277.142276)"/>
<g transform="matrix(0.387768, 0, 0, -0.200385, 207.60318, -199.315506)" style="transform-origin: 72.2406px 412.5px;">
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 53.913 425 L 53.913 400 L 90.568 425 L 90.568 400"/>
</g>
<g style="transform-origin: 227.882px 539.536px;" transform="matrix(0, 0.626201, 0.563979, 0, 51.251434, -326.206329)">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 550 L 243.484 529.073 L 243.484 550 L 212.224 529.073 L 212.224 550 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 212.224 539.499 L 200 539.499"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 243.484 539.499 L 255.764 539.499"/>
</g>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 288.049px 265.514px;" d="M 288.037 254.064 L 288.073 276.966" transform="matrix(0, -1.184039, 0.844567, 0, -0.000019, 0.000042)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 279.127px 248.505px;" d="M 279.095 266.219 L 279.19 230.79"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.5" cy="234.284" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.108874, 140.490195)"/>
<ellipse style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="-255.84" cy="255.523" rx="10.336" ry="8.73" transform="matrix(-1, 0, 0, 1, 0, 0)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 147.450457, 161.730307)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.43px 234.827px;" d="M 272.424 226.815 L 272.436 242.841" transform="matrix(0, 1.184039, -0.844567, 0, 0.000012, -0.000015)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 272.968px 255.37px;" d="M 272.962 247.358 L 272.98 263.384" transform="matrix(0, 1.184039, -0.844567, 0, -0.000011, 0.000034)"/>
<path d="M 100.83 93.032 H 107.463 L 107.463 91.071 L 116.203 94.13 L 107.463 97.189 L 107.463 95.228 H 100.83 V 93.032 Z" bx:shape="arrow 100.83 91.071 15.372 6.118 2.195 8.74 0 1@116e726f" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 108.517px 94.13px;" transform="matrix(-0.000343, -1, -1, 0.000266, 170.68468, 95.675559)"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 9px; stroke-width: 1; text-anchor: middle; font-weight: bolder;" x="602.463" y="573.003" transform="matrix(0.826913, 0, 0, 0.698383, 47.595016, -269.416931)">AIR<tspan x="602.4630126953125" dy="1em">​</tspan>INLET</text>
<path d="M -544.544 -165.9 L -541.495 -158.168 L -548.27 -158.168 L -544.544 -165.9 Z" bx:shape="triangle -548.27 -165.9 6.775 7.732 0.55 0 1@12a1c9af" style="fill: rgb(0, 0, 0); stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: -544.876px -162.033px;" transform="matrix(-1, 0, 0, -1, 1089.751221, 324.066467)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 544.653px 150.086px;" d="M 544.639 142.192 L 544.664 157.983" transform="matrix(-1, 0, 0, -1, -0.000086, 0.000018)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 404.306 125.878 L 416.234 125.878 L 416.234 148.965 L 404.306 148.965 L 404.306 125.878 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000039, -0.000007)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 498.152px 180.679px;" d="M 408.92 144.738 L 408.92 130.357"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 427.836 146.217 L 460.619 127.367 L 460.619 146.217 L 427.836 127.367 L 427.836 146.217 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000009)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-box: fill-box; transform-origin: 50% 50%;" d="M 426.851 157.594 L 426.851 116.351" transform="matrix(0, -1.18404, 0.844567, 0, -0.000439, -0.000081)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 647.335px 171.745px;" d="M 647.177 186.902 L 647.494 156.588" transform="matrix(-1, 0, 0, -1, -0.000021, -0.000027)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 680.766px 138.025px;" d="M 674.802 149.569 L 686.73 149.569 L 686.73 126.482 L 674.802 126.482 L 674.802 149.569 Z" transform="matrix(0, -1.184039, 0.844567, 0, 0.000004, 0.000043)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 897.148px 118.148px;" d="M 682.129 145.344 L 682.129 130.964"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 646.809px 137.396px;" d="M 630.417 127.971 L 663.201 146.821 L 663.201 127.971 L 630.417 146.821 L 630.417 127.971 Z" transform="matrix(0, -1.184039, 0.844567, 0, -0.000004, -0.000033)"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 664.185px 137.577px;" d="M 664.185 116.956 L 664.186 158.199" transform="matrix(0, -1.184039, 0.844567, 0, -0.000026, -0.000041)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 590.855 148.509 L 607.577 148.509 L 607.577 164.977 L 590.855 164.977 L 590.855 148.509 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932; transform-origin: 733.701px 224.488px;" d="M 590.555 155.608 L 607.58 155.608"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 576.981 192.146 L 622.941 178.701 L 622.941 192.146 L 576.981 178.701 L 576.981 192.146 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 599.746 185.455 L 599.746 156.037"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 640.474 90.952 L 652.913 90.952 L 652.913 107.419 L 640.474 107.419 L 640.474 90.952 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 646.819px 113.115px;" d="M 646.799 107.896 L 646.839 118.334"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 650.466px 95.308px;" d="M 650.455 97.624 L 650.476 92.992" transform="matrix(0, -1.184039, 0.844567, 0, 0.000035, 0.00002)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 642.857px 102.712px;" d="M 642.846 105.028 L 642.867 100.396" transform="matrix(0, -1.184039, 0.844567, 0, 0.000009, 0.000035)"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 0.932;" d="M 437.929 90.244 L 450.367 90.244 L 450.367 106.712 L 437.929 106.712 L 437.929 90.244 Z"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 1.525; transform-origin: 444.274px 112.408px;" d="M 444.253 107.189 L 444.293 117.627"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 447.919px 94.601px;" d="M 447.909 96.917 L 447.93 92.285" transform="matrix(0, -1.184039, 0.844567, 0, -0.000022, 0.000005)"/>
<path style="fill: none; stroke: rgb(0, 0, 0); stroke-width: 0.763; transform-origin: 440.31px 102.004px;" d="M 440.3 104.321 L 440.32 99.689" transform="matrix(0, -1.184039, 0.844567, 0, -0.000028, -0.000004)"/>
<rect x="43.443" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="53.987" y="423.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RUN HOUR</text>
<rect x="126.135" y="280.75" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="424.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="461.382" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">PURGE HOUR</text>
<rect x="126.135" y="308.191" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="463.357" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; font-weight: 700; white-space: pre;" x="53.987" y="498.091" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HEATER HOUR</text>
<rect x="126.135" y="333.129" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225" y="499.066" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.65" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(248, 213, 14);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="536.777" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Info</text>
<rect x="126.341" y="360.147" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.3" y="537.792" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="537.752" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">H</text>
<rect x="43.443" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="56.987" y="250.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT or LT Dry</text>
<rect x="126.135" y="160.275" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="180.05" y="251.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">LT Dry</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177" y="251.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">RT Dry</text>
<rect x="43.443" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; stroke-width: 1; font-weight: bold;" x="53.987" y="288.876" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Opmode</text>
<rect x="126.135" y="187.715" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">HTD</text>
<rect x="43.443" y="214.051" width="165.383" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="53.987" y="322.585" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Step</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="233" y="323.56" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<rect x="43.443" y="241.422" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; font-weight: 700; white-space: pre; stroke-width: 1;" x="54.237" y="364.271" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Cycle Timer</text>
<rect x="126.341" y="241.068" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="225.25" y="365.246" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">s</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 13px; font-weight: 700; white-space: pre; stroke-width: 1;" x="141.894" y="324.069" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Time</text>
<rect x="870.356" y="142.816" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1060.06" y="224.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Dryer Status</text>
<rect x="870.356" y="170.304" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="192.401" rx="20.673" ry="17.46"/>
<rect x="870.356" y="230.113" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1069.06" y="349.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Shutdown</text>
<rect x="870.356" y="257.602" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="279.699" rx="20.673" ry="17.46"/>
<rect x="870.356" y="317.411" width="82.691" height="27.103" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.763;"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="1059.06" y="474.103" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">Alarm Status</text>
<rect x="870.356" y="344.9" width="82.691" height="42.35" style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.702" cy="366.997" rx="20.673" ry="17.46"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="380.451" y="296.591" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="379.214" y="423.395" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.418" cy="321.016" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="897.237" y="299.014" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">REGEN</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="761.772" cy="233.876" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 14px; stroke-width: 1; font-weight: bold;" x="896" y="425.818" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">DRYING</text>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.96" cy="322.354" rx="13.582" ry="12.517"/>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 35px; stroke-width: 1; font-weight: bold;" x="348.875" y="78.242" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)">AIR DRYER UNIT C (01-CL-10539-C)</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, 1.386371, 4.000207)">HTLS</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="183.349" y="288.807" transform="matrix(0.826913, 0, 0, 0.698383, -1.613663, 3.937793)">BLWR</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.447" y="617.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6005">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="522.446" y="567.288" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6004">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="653.279" y="373.97" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6001">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="563.75" y="373.795" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6002">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 12px; stroke-width: 1;" x="564.279" y="330.561" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6003">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="424.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6009">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="463.397" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6010">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="159.05" y="499.106" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6011">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="177.05" y="323.6" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6008">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="168.775" y="365.807" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6007">####.##</text>
<text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 15px; stroke-width: 1;" x="92.151" y="325.554" transform="matrix(0.826913, 0, 0, 0.698383, 2.097643, 3.138935)" id="c_6006">##</text>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="336.418" cy="237.483" rx="13.582" ry="12.517" id="c_6018"/>
<ellipse style="stroke: rgb(0, 0, 0); stroke-width: 0.763; fill: rgb(255, 172, 63);" cx="640.283" cy="271.689" rx="9.717" ry="7.689" id="c_6019"/>
<ellipse style="fill: rgb(63, 255, 69); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.254" cy="192.696" rx="20.673" ry="17.46" id="c_6016"/>
<ellipse style="fill: rgb(255, 159, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="279.12" rx="20.673" ry="17.46" id="c_6017"/>
<ellipse style="fill: rgb(255, 63, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="911.352" cy="366.862" rx="20.673" ry="17.46" id="c_6020"/>
<ellipse style="fill: rgb(255, 204, 63); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.685" cy="322.259" rx="13.582" ry="12.517" id="c_6018"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="335.623" cy="320.662" rx="13.582" ry="12.517" id="c_6021"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.763;" cx="762.031" cy="234.094" rx="13.582" ry="12.517" id="c_6021"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

1983
src/assets/svg/compressorA_rev.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 177 KiB

1983
src/assets/svg/compressorB_rev.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 177 KiB

1983
src/assets/svg/compressorC_rev.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 177 KiB

443
src/assets/svg/overview-airdryer.svg
View File

@@ -1,443 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" viewBox="0 0 950 500">
<defs>
<bx:grid x="0" y="0" width="25" height="25"/>
</defs>
<rect x="12.226" y="12.005" width="924.818" height="476.396" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
<rect x="25" y="75" width="900" height="400" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
<rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
<g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
<path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 433.101 105.475 L 433.101 57.586 L 441.571 57.586 L 441.571 105.475 L 433.101 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 420.411 105.475 L 420.411 57.586 L 428.871 57.586 L 428.871 105.475 L 420.411 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 407.721 105.475 L 407.721 57.586 L 416.181 57.586 L 416.181 105.475 L 407.721 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 395.021 105.475 L 395.021 57.586 L 403.481 57.586 L 403.481 105.475 L 395.021 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 382.221 105.475 L 382.221 57.586 L 390.791 57.586 L 390.791 105.475 L 382.221 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 369.521 105.475 L 369.521 57.586 L 377.991 57.586 L 377.991 105.475 L 369.521 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 81.579 L 371.641 76.064 L 375.871 76.064 L 375.871 81.579 L 371.641 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.531 94.446 L 371.531 88.931 L 375.871 88.931 L 375.871 94.446 L 371.531 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 87.093 L 371.641 83.417 L 375.981 83.417 L 375.981 87.093 L 371.641 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 99.96 L 371.641 96.284 L 375.871 96.284 L 375.871 99.96 L 371.641 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 81.579 L 384.331 76.064 L 388.561 76.064 L 388.561 81.579 L 384.331 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 94.446 L 384.331 88.931 L 388.561 88.931 L 388.561 94.446 L 384.331 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 87.093 L 384.331 83.417 L 388.671 83.417 L 388.671 87.093 L 384.331 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 99.96 L 384.331 96.284 L 388.561 96.284 L 388.561 99.96 L 384.331 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 81.579 L 397.031 76.064 L 401.371 76.064 L 401.371 81.579 L 397.031 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 94.446 L 397.031 88.931 L 401.261 88.931 L 401.261 94.446 L 397.031 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.141 87.093 L 397.141 83.417 L 401.371 83.417 L 401.371 87.093 L 397.141 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 99.96 L 397.031 96.284 L 401.371 96.284 L 401.371 99.96 L 397.031 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 105.475 L 385.451 101.798 L 387.561 101.798 L 387.561 105.475 L 385.451 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 105.475 L 372.751 101.798 L 374.871 101.798 L 374.871 105.475 L 372.751 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 61.262 L 372.751 57.586 L 374.871 57.586 L 374.871 61.262 L 372.751 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 61.262 L 385.451 57.586 L 387.561 57.586 L 387.561 61.262 L 385.451 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 61.262 L 398.141 57.586 L 400.261 57.586 L 400.261 61.262 L 398.141 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 105.475 L 398.141 101.798 L 400.261 101.798 L 400.261 105.475 L 398.141 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 80.611 L 451.141 80.611 L 451.141 82.449 L 449.031 82.449 L 449.031 80.611 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 76.935 L 451.141 76.935 L 451.141 78.87 L 449.031 78.87 L 449.031 76.935 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 84.287 L 451.141 84.287 L 451.141 86.126 L 449.031 86.126 L 449.031 84.287 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 73.258 L 451.141 73.258 L 451.141 75.097 L 449.031 75.097 L 449.031 73.258 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 87.964 L 451.141 87.964 L 451.141 89.802 L 449.031 89.802 L 449.031 87.964 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 69.582 L 451.141 69.582 L 451.141 71.42 L 449.031 71.42 L 449.031 69.582 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 91.64 L 451.141 91.64 L 451.141 93.478 L 449.031 93.478 L 449.031 91.64 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 80.611 L 438.451 80.611 L 438.451 82.449 L 436.331 82.449 L 436.331 80.611 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 76.935 L 438.451 76.935 L 438.451 78.87 L 436.331 78.87 L 436.331 76.935 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 84.287 L 438.451 84.287 L 438.451 86.126 L 436.331 86.126 L 436.331 84.287 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 73.258 L 438.451 73.258 L 438.451 75.097 L 436.331 75.097 L 436.331 73.258 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 87.964 L 438.451 87.964 L 438.451 89.802 L 436.331 89.802 L 436.331 87.964 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 69.582 L 438.451 69.582 L 438.451 71.42 L 436.331 71.42 L 436.331 69.582 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 91.64 L 438.451 91.64 L 438.451 93.478 L 436.331 93.478 L 436.331 91.64 Z"/>
<path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
<path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
</g>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">AirDryer A</text>
<rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
<rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">AirDryer B</text>
<rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
<rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">AirDryer C</text>
<rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 125 L 350 125 L 350 275 L 400 275"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 250 L 350 250 L 350 275 L 400 275"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 250 375 L 350 375 L 350 275 L 400 275"/>
<g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
<path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
<circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
</g>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 400 L 725 400"/>
<rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="425.352" y="167.628">PLC AirDryer</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.3</text>
<rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
<g transform="matrix(1, 0, 0, 1, 49.999999, 99.999998)" style="">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
<path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
<circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
</g>
<rect x="724.832" y="299.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="725" y="325" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="317.628">PC Server</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3.000031, 24.863983)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em">​</tspan></text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="316.458" y="50.984">OVERVIEW AIR DRYER</text>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 475"/>
<g transform="matrix(0.999999, 0, 0, 0.888921, -1058.006891, 44.212168)" style="">
<g id="Group_Base" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z "/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504 V98.984H71.957z"/>
</g>
<g id="Group_Supports" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338 l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563 l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339 l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338 l-0.338,0.338L56.191,102.363z"/>
</g>
<g id="Group_Pipes" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
<path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_5_)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#SVGID_6_)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563 l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449 l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
</g>
<g id="Group_Column2" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#SVGID_7_)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378 C25.176,10.25,26.914,13.628,26.914,13.628"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378 C25.442,10.25,26.914,13.628,26.914,13.628z"/>
</g>
<g id="Group_Column1" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#SVGID_8_)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52 C61.661,10.108,62.948,13.628,62.948,13.628z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52 C61.589,10.108,62.948,13.628,62.948,13.628z"/>
</g>
<g id="Group_Boards" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
<path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
</g>
<g id="Group_Points" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
</g>
<g id="Group_Connectors" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
</g>
</g>
<g transform="matrix(0.999999, 0, 0, 0.888921, -1061.049982, 169.212228)" style="">
<g id="group-1" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z "/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504 V98.984H71.957z"/>
</g>
<g id="group-2" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338 l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563 l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339 l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338 l-0.338,0.338L56.191,102.363z"/>
</g>
<g id="group-3" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-1" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-1)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
<linearGradient id="gradient-2" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-2)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
<linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-3)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
<path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
<linearGradient id="gradient-4" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-4)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
<linearGradient id="gradient-5" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-5)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
<linearGradient id="gradient-6" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-6)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563 l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449 l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
</g>
<g id="group-4" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-7" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#gradient-7)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378 C25.176,10.25,26.914,13.628,26.914,13.628"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378 C25.442,10.25,26.914,13.628,26.914,13.628z"/>
</g>
<g id="group-5" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-8" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#gradient-8)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52 C61.661,10.108,62.948,13.628,62.948,13.628z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52 C61.589,10.108,62.948,13.628,62.948,13.628z"/>
</g>
<g id="group-6" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
<path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
</g>
<g id="group-7" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
</g>
<g id="group-8" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
</g>
</g>
<g transform="matrix(0.999999, 0, 0, 0.888921, -1061.04986, 294.212174)" style="">
<g id="group-9" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,105.741h62.834v2.253H4.392V105.741z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M0,112.498l1.014-1.126H2.14v-11.261H1.014L0,98.984h4.392v13.514H0z "/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M71.957,98.984l-1.127,1.127h-1.125v11.261h1.125l1.127,1.126h-4.504 V98.984H71.957z"/>
</g>
<g id="group-10" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M11.148,89.977h49.547v13.514H11.148V89.977z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M4.392,76.463h4.504v27.026H4.392V76.463z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,76.463h4.278v27.026h-4.278V76.463z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,102.363h5.631v-6.758h-5.631h-0.337l-0.451,0.338 l-0.338,0.339l-0.338,0.563l-0.338,0.563l-0.225,0.563l-0.112,0.563l-0.113,0.45l0.113,0.451l0.112,0.563l0.225,0.563l0.338,0.563 l0.338,0.449l0.338,0.338l0.451,0.338L15.652,102.363z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,102.363h-5.631v-6.758h5.631h0.451l0.338,0.338l0.449,0.339 l0.338,0.563l0.226,0.563l0.226,0.563l0.225,0.563v0.448v0.451l-0.225,0.563l-0.226,0.563l-0.226,0.563l-0.338,0.449l-0.449,0.338 l-0.338,0.338L56.191,102.363z"/>
</g>
<g id="group-11" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-9" gradientUnits="userSpaceOnUse" x1="341.6875" y1="-275.623" x2="346.1914" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-9)" d="M56.191,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,11.375V6.871h-4.504v4.504H56.191z"/>
<linearGradient id="gradient-10" gradientUnits="userSpaceOnUse" x1="305.6523" y1="-275.623" x2="310.1572" y2="-275.623" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-10)" d="M20.157,6.871h-4.504v4.504h4.504V6.871z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M20.157,11.375V6.871h-4.504v4.504H20.157z"/>
<linearGradient id="gradient-11" gradientUnits="userSpaceOnUse" x1="323.6699" y1="-283.5059" x2="328.1738" y2="-283.5059" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-11)" stroke="#4C4C4C" stroke-width="0.25" d="M38.174,6.871H33.67v20.27h4.504V6.871z"/>
<path fill="#999999" d="M58.443,6.871V4.619H13.4v2.252H58.443z"/>
<linearGradient id="gradient-12" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-271.0625" x2="325.9219" y2="-273.2832" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-12)" stroke="#4C4C4C" stroke-width="0.25" d="M13.4,6.871h45.043V4.619H13.4V6.871"/>
<linearGradient id="gradient-13" gradientUnits="userSpaceOnUse" x1="325.9219" y1="-362.064" x2="325.9219" y2="-368.8364" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-13)" stroke="#4C4C4C" stroke-width="0.25" d="M21.283,95.605h29.277v6.758H21.283V95.605z"/>
<linearGradient id="gradient-14" gradientUnits="userSpaceOnUse" x1="322.5439" y1="-355.3496" x2="329.3008" y2="-355.3496" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#999999"/>
<stop offset="0.5" style="stop-color:#CCCCCC"/>
<stop offset="1" style="stop-color:#999999"/>
</linearGradient>
<path fill="url(#gradient-14)" stroke="#4C4C4C" stroke-width="0.25" d="M39.301,95.605V78.715h-6.757v16.893l0.112,0.676l0.226,0.563 l0.225,0.563l0.45,0.45l0.563,0.449l0.563,0.338l0.563,0.227l0.675,0.111l0.677-0.111l0.676-0.227l0.563-0.338l0.451-0.449 l0.449-0.45l0.339-0.563l0.112-0.563L39.301,95.605z"/>
</g>
<g id="group-12" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-15" gradientUnits="userSpaceOnUse" x1="298.8965" y1="-318.8652" x2="316.9141" y2="-318.8652" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#gradient-15)" d="M26.914,13.628V94.48H8.896V13.628c0,0,2.204-3.378,9.009-3.378 C25.176,10.25,26.914,13.628,26.914,13.628"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,13.628V94.48H8.896V13.628c0,0,1.972-3.378,9.043-3.378 C25.442,10.25,26.914,13.628,26.914,13.628z"/>
</g>
<g id="group-13" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<linearGradient id="gradient-16" gradientUnits="userSpaceOnUse" x1="334.9316" y1="-318.7939" x2="352.9482" y2="-318.7939" gradientTransform="matrix(1 0 0 -1 -290 -266.5)">
<stop offset="0" style="stop-color:#B2B2B2"/>
<stop offset="0.5" style="stop-color:#E5E5E5"/>
<stop offset="1" style="stop-color:#B2B2B2"/>
</linearGradient>
<path fill="url(#gradient-16)" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.692-3.52,8.67-3.52 C61.661,10.108,62.948,13.628,62.948,13.628z"/>
<path fill="none" stroke="#4C4C4C" stroke-width="0.25" d="M62.948,13.628V94.48H44.932V13.628c0,0,1.668-3.52,8.67-3.52 C61.589,10.108,62.948,13.628,62.948,13.628z"/>
</g>
<g id="group-14" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<circle fill="#666666" stroke="#4C4C4C" stroke-width="0.25" cx="31.981" cy="24.325" r="3.941"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M22.409,27.141h27.026v33.783H22.409V27.141z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,31.645h20.27v21.396h-20.27V31.645z"/>
<path fill="#4C4C4C" stroke="#4C4C4C" stroke-width="0.25" d="M25.787,57.545h20.27v21.17h-20.27V57.545z"/>
<path fill="#7F7F7F" stroke="#4C4C4C" stroke-width="0.25" d="M37.049,60.924h6.756v7.656h-6.756V60.924z"/>
</g>
<g id="group-15" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v4.504h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v4.505h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,58.671h3.378v1.126h-3.378V58.671z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,55.293h3.378v1.126h-3.378V55.293z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v4.504h-3.378V47.41z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M26.914,47.41h3.378v1.126h-3.378V47.41z"/>
<path fill="#FFFFFF" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v4.504h-3.379V55.293z"/>
<path fill="#7F0000" stroke="#4C4C4C" stroke-width="0.25" d="M52.813,55.293h3.379v1.126h-3.379V55.293z"/>
</g>
<g id="group-16" transform="matrix(1, 0, 0, 1, 1236.05109, 62.756969)">
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,1.917h0.676v43.692h-0.676V1.917z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,45.608h-7.207v-0.45h7.207V45.608z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,44.032h-7.207v-0.676h7.207V44.032z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,41.78h-7.207v-0.676h7.207V41.78z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M53.264,2.367H23.085v-0.45h30.179V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M23.085,2.367h0.45v2.252h-0.45V2.367z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M56.191,22.636h-40.54v-0.675h40.54V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M55.516,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#666666" stroke="#4C4C4C" stroke-width="0.25" d="M15.652,22.636h0.676v6.757h-0.676V22.636z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M27.364,0.002l1.577,1.464l-2.478,2.478l-1.576-1.577L27.364,0.002z"/>
<path fill="#B2B2B2" stroke="#4C4C4C" stroke-width="0.25" d="M31.418,1.466l1.576-1.464l2.252,2.365L33.67,3.943L31.418,1.466z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB

251
src/assets/svg/overview-compressor.svg
View File

@@ -1,251 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" viewBox="0 0 950 500">
<defs>
<bx:grid x="0" y="0" width="25" height="25"/>
</defs>
<rect x="12.226" y="12.005" width="924.818" height="462.995" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
<rect x="25" y="75" width="900" height="375" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255);"/>
<rect x="50" y="100.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="50" y="125" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="125.124" cy="137.355" rx="11.269" ry="10.987"/>
<g transform="matrix(1.116151, 0, 0, 1.116686, -10.678418, 46.611243)" style="">
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
<path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
<path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
<path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
<path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
</g>
<g transform="matrix(1.13391, 0, 0, 1.234446, -9.410634, 162.99009)" style="">
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 363.181 109.151 L 363.181 110.989 L 460.721 110.989 L 469.183 107.313 L 469.183 105.958 L 460.721 109.151 L 363.181 109.151 Z"/>
<path style="fill: rgb(115, 135, 166); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 361.061 109.151 L 361.061 53.909 L 462.836 53.909 L 462.836 109.151 L 361.061 109.151 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 445.801 105.475 L 445.801 57.586 L 454.374 57.586 L 454.374 105.475 L 445.801 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 433.101 105.475 L 433.101 57.586 L 441.571 57.586 L 441.571 105.475 L 433.101 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 420.411 105.475 L 420.411 57.586 L 428.871 57.586 L 428.871 105.475 L 420.411 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 407.721 105.475 L 407.721 57.586 L 416.181 57.586 L 416.181 105.475 L 407.721 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 395.021 105.475 L 395.021 57.586 L 403.481 57.586 L 403.481 105.475 L 395.021 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 382.221 105.475 L 382.221 57.586 L 390.791 57.586 L 390.791 105.475 L 382.221 105.475 Z"/>
<path style="fill: rgb(166, 186, 217); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 369.521 105.475 L 369.521 57.586 L 377.991 57.586 L 377.991 105.475 L 369.521 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 81.579 L 371.641 76.064 L 375.871 76.064 L 375.871 81.579 L 371.641 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.531 94.446 L 371.531 88.931 L 375.871 88.931 L 375.871 94.446 L 371.531 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 87.093 L 371.641 83.417 L 375.981 83.417 L 375.981 87.093 L 371.641 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 371.641 99.96 L 371.641 96.284 L 375.871 96.284 L 375.871 99.96 L 371.641 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 81.579 L 384.331 76.064 L 388.561 76.064 L 388.561 81.579 L 384.331 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 94.446 L 384.331 88.931 L 388.561 88.931 L 388.561 94.446 L 384.331 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 87.093 L 384.331 83.417 L 388.671 83.417 L 388.671 87.093 L 384.331 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 384.331 99.96 L 384.331 96.284 L 388.561 96.284 L 388.561 99.96 L 384.331 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 81.579 L 397.031 76.064 L 401.371 76.064 L 401.371 81.579 L 397.031 81.579 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 94.446 L 397.031 88.931 L 401.261 88.931 L 401.261 94.446 L 397.031 94.446 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.141 87.093 L 397.141 83.417 L 401.371 83.417 L 401.371 87.093 L 397.141 87.093 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 397.031 99.96 L 397.031 96.284 L 401.371 96.284 L 401.371 99.96 L 397.031 99.96 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 105.475 L 385.451 101.798 L 387.561 101.798 L 387.561 105.475 L 385.451 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 105.475 L 372.751 101.798 L 374.871 101.798 L 374.871 105.475 L 372.751 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 372.751 61.262 L 372.751 57.586 L 374.871 57.586 L 374.871 61.262 L 372.751 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 385.451 61.262 L 385.451 57.586 L 387.561 57.586 L 387.561 61.262 L 385.451 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 61.262 L 398.141 57.586 L 400.261 57.586 L 400.261 61.262 L 398.141 61.262 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 398.141 105.475 L 398.141 101.798 L 400.261 101.798 L 400.261 105.475 L 398.141 105.475 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 80.611 L 451.141 80.611 L 451.141 82.449 L 449.031 82.449 L 449.031 80.611 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 76.935 L 451.141 76.935 L 451.141 78.87 L 449.031 78.87 L 449.031 76.935 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 84.287 L 451.141 84.287 L 451.141 86.126 L 449.031 86.126 L 449.031 84.287 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 73.258 L 451.141 73.258 L 451.141 75.097 L 449.031 75.097 L 449.031 73.258 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 87.964 L 451.141 87.964 L 451.141 89.802 L 449.031 89.802 L 449.031 87.964 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 69.582 L 451.141 69.582 L 451.141 71.42 L 449.031 71.42 L 449.031 69.582 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 449.031 91.64 L 451.141 91.64 L 451.141 93.478 L 449.031 93.478 L 449.031 91.64 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 80.611 L 438.451 80.611 L 438.451 82.449 L 436.331 82.449 L 436.331 80.611 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 76.935 L 438.451 76.935 L 438.451 78.87 L 436.331 78.87 L 436.331 76.935 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 84.287 L 438.451 84.287 L 438.451 86.126 L 436.331 86.126 L 436.331 84.287 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 73.258 L 438.451 73.258 L 438.451 75.097 L 436.331 75.097 L 436.331 73.258 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 87.964 L 438.451 87.964 L 438.451 89.802 L 436.331 89.802 L 436.331 87.964 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 69.582 L 438.451 69.582 L 438.451 71.42 L 436.331 71.42 L 436.331 69.582 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 436.331 91.64 L 438.451 91.64 L 438.451 93.478 L 436.331 93.478 L 436.331 91.64 Z"/>
<path style="fill: rgb(89, 109, 140); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 471.299 105.475 L 462.836 109.151 L 462.836 53.909 Z"/>
<path style="fill: rgb(191, 211, 242); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 462.836 53.909 L 471.299 50.233 L 369.521 50.233 L 361.061 53.909 L 462.836 53.909 Z"/>
</g>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre;" x="56" y="116.982">COMPRESSOR A</text>
<rect x="50" y="150" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0);"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.368" y="141.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.949" y="168.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.007" y="167.208">####</text>
<rect x="49.832" y="225.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="49.832" y="250" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="262.355" rx="11.269" ry="10.987"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="241.982">COMPRESSOR B</text>
<rect x="49.832" y="275" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="266.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="293.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="292.208">####</text>
<rect x="49.832" y="350.548" width="100.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="49.832" y="375" width="100.168" height="50" style="stroke: rgb(0, 0, 0); stroke-width: 0.693; fill: rgb(244, 248, 248);"/>
<ellipse style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0.693;" cx="124.956" cy="387.355" rx="11.269" ry="10.987"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="55.832" y="366.982">COMPRESSOR C</text>
<rect x="49.832" y="400" width="100" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="56.2" y="391.716">On/Off</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="120.781" y="418.123">H</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 15px; white-space: pre; stroke-width: 1;" x="55.839" y="417.208">####</text>
<g transform="matrix(1.116151, 0, 0, 1.116686, -10.678391, 171.611261)" style="">
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
<path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
<path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
<path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
<path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
</g>
<g transform="matrix(1.116151, 0, 0, 1.116686, -10.678387, 296.611283)" style="">
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 166.356 95.477 L 278.348 67.396 L 278.348 114.973 L 166.356 114.973 L 166.356 95.477 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 166.356 98.16 L 278.348 70.258 L 278.348 114.973 L 166.356 114.973 L 166.356 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 166.356 102.453 L 278.348 74.371 L 278.348 114.973 L 166.356 114.973 L 166.356 102.453 Z"/>
<path style="fill: rgb(204, 204, 204); stroke-width: 1;" d="M 168.486 49.688 L 276.106 49.688 L 276.106 109.249 L 168.486 109.249 L 168.486 49.688 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 222.296 91.9 L 276.106 67.038 L 276.106 109.249 L 222.296 109.249 L 222.296 91.9 Z"/>
<path style="fill: rgb(199, 199, 199); stroke-width: 1;" d="M 168.486 92.079 L 222.296 67.038 L 222.296 109.249 L 168.486 109.249 L 168.486 92.079 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 222.296 94.583 L 276.106 69.542 L 276.106 109.249 L 222.296 109.249 L 222.296 94.583 Z"/>
<path style="fill: rgb(194, 194, 194); stroke-width: 1;" d="M 168.486 94.583 L 222.296 69.542 L 222.296 109.249 L 168.486 109.249 L 168.486 94.583 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 222.296 98.16 L 276.106 73.298 L 276.106 109.249 L 222.296 109.249 L 222.296 98.16 Z"/>
<path style="fill: rgb(189, 189, 189); stroke-width: 1;" d="M 168.486 98.16 L 222.296 73.298 L 222.296 109.249 L 168.486 109.249 L 168.486 98.16 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 166.356 47.81 L 278.348 47.81 L 278.348 114.973 L 166.356 114.973 L 166.356 47.81"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 222.296 49.688 L 276.106 49.688 L 276.106 109.249 L 222.296 109.249 L 222.296 49.688"/>
<path style="fill: rgb(153, 153, 153); stroke-width: 1;" d="M 240.906 110.323 L 259.739 110.323 L 259.739 113.9 L 240.906 113.9 L 240.906 110.323 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 108.713 L 169.159 108.176 L 169.607 107.64 L 170.504 107.64 L 170.952 108.176 L 170.504 108.713 L 169.607 108.713 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 169.607 68.111 L 169.159 67.575 L 169.607 66.859 L 170.504 66.859 L 170.952 67.575 L 170.504 68.111 L 169.607 68.111 Z"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 109.249 L 168.486 109.249 L 168.486 49.688"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 229.247 51.119 L 235.749 51.119 L 235.749 59.973 L 229.247 59.973 L 229.247 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 224.762 51.119 L 226.332 51.119 L 226.332 55.233 L 224.762 55.233 L 224.762 51.119 Z"/>
<path style="fill: rgb(0, 0, 0); stroke-width: 1;" d="M 272.519 51.119 L 274.313 51.119 L 274.313 55.233 L 272.519 55.233 L 272.519 51.119 Z"/>
<path style="fill: rgb(51, 51, 51); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 168.486 49.688 L 222.296 49.688 L 222.296 66.501 L 168.486 66.501 L 168.486 49.688 Z"/>
<path style="fill: rgb(229, 229, 229); stroke-width: 1;" d="M 185.526 60.778 L 192.028 60.778 L 192.028 63.103 L 185.526 63.103 L 185.526 60.778 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 200.324 62.745 L 198.978 61.672 L 198.978 60.152 L 200.324 59.079 L 202.117 59.079 L 203.687 60.152 L 203.687 61.672 L 202.117 62.745 L 200.324 62.745 Z"/>
<path style="fill: rgb(178, 178, 178); stroke-width: 1;" d="M 207.947 62.745 L 206.602 61.672 L 206.602 60.152 L 207.947 59.079 L 209.74 59.079 L 211.086 60.152 L 211.086 61.672 L 209.74 62.745 L 207.947 62.745 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 176.109 60.778 L 182.611 60.778 L 182.611 63.103 L 176.109 63.103 L 176.109 60.778 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 179.024 54.339 L 179.024 59.079 L 176.782 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 183.06 54.339 L 183.06 59.079 L 180.93 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 187.32 54.339 L 187.32 59.079 L 184.853 59.079"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 191.355 54.339 L 191.355 59.079 L 188.889 59.079"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 188.889 59.079 L 188.889 54.339 L 191.355 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 184.853 59.079 L 184.853 54.339 L 187.32 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 180.93 59.079 L 180.93 54.339 L 183.06 54.339"/>
<path style="fill: none; stroke: rgb(127, 127, 127); stroke-width: 2;" d="M 176.782 59.079 L 176.782 54.339 L 179.024 54.339"/>
<path style="fill: rgb(127, 127, 127); stroke-width: 1;" d="M 197.857 66.859 L 222.296 104.241 L 222.296 94.404 L 204.135 66.859 L 197.857 66.859 Z"/>
<path style="fill: rgb(102, 102, 102); stroke-width: 1;" d="M 204.135 66.859 L 222.296 94.404 L 222.296 84.566 L 210.637 66.859 L 204.135 66.859 Z"/>
<path style="fill: rgb(76, 76, 76); stroke-width: 1;" d="M 210.637 66.859 L 222.296 84.566 L 222.296 74.729 L 217.139 66.859 L 210.637 66.859 Z"/>
<path style="fill: none; stroke: rgb(255, 255, 255); stroke-width: 2;" d="M 222.969 50.046 L 275.434 50.046"/>
</g>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 125 L 350 125 L 350 275 L 400 275"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 250 L 350 250 L 350 275 L 400 275"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 4, 255);" d="M 300 375 L 350 375 L 350 275 L 400 275"/>
<g transform="matrix(1, 0, 0, 1, 49.999999, -99.999998)" style="">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
<path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
<circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
</g>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 200 L 725 200"/>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(6, 255, 0);" d="M 525 250 L 575 250 L 575 375 L 725 375"/>
<rect x="399.832" y="149.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="400" y="175" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="417.352" y="167.628">PLC Compressor</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="426.101" y="192.839">IP : 192.168.0.1</text>
<rect x="725" y="99.864" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="725.168" y="125" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="759.52" y="117.628">PC Station</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.269" y="142.839">IP : 192.168.0.2</text>
<g transform="matrix(1, 0, 0, 1, 49.999999, 74.999996)" style="">
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 292.93 L 717.857 292.651 L 717.857 292.442 L 717.857 292.163 L 717.857 291.954 L 717.857 291.744 L 717.857 291.535 L 717.857 291.396 L 717.914 291.186 L 717.914 291.046 L 717.972 290.907 L 718.029 290.837 L 718.086 290.698 L 718.143 290.558 L 718.201 290.488 L 718.258 290.419 L 718.372 290.349 L 718.487 290.279 L 718.602 290.209 L 718.716 290.14 L 718.888 290.14 L 719.06 290.07 L 719.231 290.07 L 719.46 290 L 719.632 290 L 719.919 290 L 720.147 290 L 720.434 290 L 720.72 290 L 721.063 290 L 721.407 290 L 721.751 290 L 722.151 290 L 770.706 290 L 771.106 290 L 771.45 290 L 771.794 290 L 772.137 290 L 772.423 290 L 772.71 290 L 772.939 290 L 773.225 290 L 773.397 290.07 L 773.626 290.07 L 773.798 290.14 L 773.969 290.14 L 774.141 290.209 L 774.256 290.279 L 774.37 290.349 L 774.485 290.419 L 774.599 290.488 L 774.657 290.558 L 774.714 290.698 L 774.771 290.837 L 774.828 290.977 L 774.886 291.117 L 774.943 291.256 L 774.943 291.465 L 775 291.674 L 775 291.884 L 775 292.093 L 775 292.303 L 775 292.581 L 775 292.86 L 775 293.209 L 775 293.488 L 775 335.558 L 775 335.907 L 775 336.256 L 775 336.604 L 775 336.884 L 775 337.163 L 775 337.442 L 775 337.72 L 775 337.93 L 774.943 338.14 L 774.943 338.349 L 774.943 338.488 L 774.886 338.628 L 774.886 338.767 L 774.828 338.907 L 774.771 339.047 L 774.714 339.117 L 774.657 339.256 L 774.599 339.326 L 774.485 339.396 L 774.427 339.465 L 774.313 339.465 L 774.198 339.535 L 774.084 339.535 L 773.969 339.604 L 773.798 339.604 L 773.683 339.604 L 773.511 339.604 L 773.339 339.674 L 773.168 339.674 L 772.939 339.674 L 772.71 339.674 L 772.481 339.674 L 721.579 339.674 L 721.235 339.674 L 720.892 339.674 L 720.663 339.674 L 720.377 339.674 L 720.09 339.604 L 719.861 339.604 L 719.69 339.604 L 719.46 339.604 L 719.289 339.535 L 719.117 339.535 L 718.945 339.465 L 718.831 339.465 L 718.659 339.396 L 718.544 339.326 L 718.43 339.256 L 718.372 339.117 L 718.258 339.047 L 718.201 338.907 L 718.143 338.767 L 718.086 338.628 L 718.029 338.488 L 717.972 338.349 L 717.914 338.14 L 717.914 337.93 L 717.914 337.72 L 717.857 337.442 L 717.857 337.163 L 717.857 336.884 L 717.857 336.604 L 717.857 336.256 L 717.857 335.907 L 717.857 335.558 L 717.857 292.93 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 732.114 339.674 L 760.743 339.674 L 760.743 342.884 L 732.114 342.884 L 732.114 339.674 Z"/>
<path style="fill: rgb(67, 67, 67); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 722.151 299.419 L 722.151 299.07 L 722.151 298.791 L 722.151 298.442 L 722.151 298.163 L 722.151 297.954 L 722.151 297.675 L 722.209 297.465 L 722.209 297.256 L 722.209 297.046 L 722.266 296.837 L 722.323 296.698 L 722.323 296.558 L 722.381 296.419 L 722.495 296.279 L 722.553 296.209 L 722.61 296.07 L 722.725 296 L 722.838 295.93 L 722.953 295.86 L 723.067 295.791 L 723.239 295.791 L 723.354 295.721 L 723.526 295.721 L 723.754 295.651 L 723.926 295.651 L 724.155 295.651 L 724.385 295.651 L 724.671 295.651 L 724.9 295.651 L 725.243 295.651 L 725.53 295.651 L 725.873 295.651 L 767.557 295.651 L 767.843 295.651 L 768.129 295.651 L 768.358 295.651 L 768.587 295.651 L 768.816 295.651 L 769.045 295.721 L 769.217 295.721 L 769.389 295.791 L 769.561 295.791 L 769.675 295.86 L 769.79 295.86 L 769.962 295.93 L 770.076 296 L 770.133 296.07 L 770.247 296.139 L 770.305 296.209 L 770.362 296.349 L 770.419 296.419 L 770.477 296.558 L 770.534 296.698 L 770.591 296.837 L 770.591 296.907 L 770.649 297.046 L 770.649 297.256 L 770.649 297.396 L 770.706 297.604 L 770.706 297.744 L 770.706 297.954 L 770.706 298.163 L 770.706 298.442 L 770.706 298.651 L 770.706 298.861 L 770.706 327.744 L 770.706 328.093 L 770.706 328.372 L 770.706 328.581 L 770.706 328.861 L 770.763 329.07 L 770.763 329.279 L 770.763 329.488 L 770.763 329.628 L 770.763 329.838 L 770.763 329.977 L 770.706 330.117 L 770.706 330.186 L 770.649 330.326 L 770.649 330.465 L 770.591 330.535 L 770.534 330.604 L 770.477 330.674 L 770.419 330.744 L 770.305 330.814 L 770.19 330.883 L 770.076 330.883 L 769.962 330.883 L 769.79 330.953 L 769.618 330.953 L 769.446 330.953 L 769.274 331.023 L 769.045 331.023 L 768.759 331.023 L 768.53 331.023 L 768.244 331.023 L 767.9 331.023 L 767.557 331.023 L 725.873 331.023 L 725.53 331.023 L 725.243 331.023 L 724.9 331.023 L 724.671 331.023 L 724.385 331.023 L 724.155 331.023 L 723.926 331.023 L 723.754 331.023 L 723.526 331.023 L 723.354 331.023 L 723.239 331.023 L 723.067 330.953 L 722.953 330.953 L 722.838 330.883 L 722.725 330.814 L 722.61 330.744 L 722.553 330.674 L 722.495 330.604 L 722.381 330.465 L 722.323 330.326 L 722.323 330.186 L 722.266 330.046 L 722.209 329.838 L 722.209 329.628 L 722.209 329.419 L 722.151 329.209 L 722.151 328.93 L 722.151 328.651 L 722.151 328.302 L 722.151 327.954 L 722.151 327.604 L 722.151 327.186 L 722.151 299.419 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 350 L 775 350 L 775 347.558 L 760.743 342.884 L 732.114 342.884 L 717.857 347.558 L 717.857 350 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 770.133 334.023 L 770.133 337.512 L 756.391 337.512 L 756.391 334.023 L 770.133 334.023 Z"/>
<path style="fill: none; stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 717.857 347.558 L 775 347.558"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 675 285.361 L 703.571 285.361 L 703.571 350 L 675 350 L 675 285.361 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 287.463 L 701.169 287.463 L 701.169 350 L 677.317 350 L 677.317 287.463 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 290.616 L 701.169 290.616 L 701.169 297.898 L 677.317 297.898 L 677.317 290.616 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 677.317 297.898 L 701.169 297.898 L 701.169 305.181 L 677.317 305.181 L 677.317 297.898 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 293.694 L 698.767 293.694 L 698.767 294.745 L 679.72 294.745 L 679.72 293.694 Z"/>
<path style="fill: rgb(0, 0, 0); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 300 L 698.767 300 L 698.767 303.078 L 679.72 303.078 L 679.72 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 679.72 275 L 698.767 275 L 703.571 285.361 L 675 285.361 L 679.72 275 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 695.163 300 L 701.169 300 L 701.169 303.078 L 695.163 303.078 L 695.163 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 300 L 698.767 300 L 698.767 303.078 L 697.566 303.078 L 697.566 300 Z"/>
<path style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" d="M 697.566 291.592 L 692.847 291.592 L 692.847 292.643 L 697.566 292.643 L 697.566 291.592 Z"/>
<circle style="fill: rgb(255, 255, 255); stroke: rgb(76, 76, 76); stroke-width: 2;" cx="890.673" cy="114.148" r="1.051" transform="matrix(1.142857, 0, 0, 1.000013, -320.346635, 178.493448)"/>
</g>
<rect x="724.832" y="275" width="125.168" height="25.136" style="stroke: rgb(0, 0, 0); fill: rgb(120, 231, 228); stroke-width: 0.693;"/>
<rect x="725" y="300.136" width="125" height="25" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 1;"/>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="760.352" y="292.764">PC Server</text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 12px; white-space: pre; stroke-width: 1;" x="751.1" y="317.975" transform="matrix(1, 0, 0, 1, -3, 0)">IP : xxx.xxx.xx.xx<tspan x="751.0999755859375" dy="1em">​</tspan></text>
<text style="fill: rgb(51, 51, 51); font-family: Bahnschrift; font-size: 30px; white-space: pre; stroke-width: 1;" x="312.458" y="50.984">OVERVIEW COMPRESSOR</text>
<path style="fill: none; stroke-width: 1.386; stroke-dasharray: 6, 4; stroke: rgb(0, 0, 0);" d="M 625 75 L 625 114.125 L 625 264.125 L 625 450"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

109
src/components/Global/ApiRequest.jsx
View File

@@ -1,5 +1,5 @@
import axios from 'axios';
import Swal from 'sweetalert2';
import axios from "axios";
import Swal from "sweetalert2";
const baseURL = import.meta.env.VITE_API_SERVER;
@@ -14,42 +14,40 @@ const refreshApi = axios.create({
withCredentials: true,
});
instance.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
console.error('🚨 Response Error Interceptor:', {
console.error("🚨 Response Error Interceptor:", {
status: error.response?.status,
url: originalRequest.url,
message: error.response?.data?.message,
hasRetried: originalRequest._retry,
hasRetried: originalRequest._retry
});
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
try {
// console.log('🔄 Refresh token dipanggil...');
const refreshRes = await refreshApi.post('/auth/refresh-token');
console.log("🔄 Refresh token dipanggil...");
const refreshRes = await refreshApi.post("/auth/refresh-token");
const newAccessToken = refreshRes.data.data.accessToken;
localStorage.setItem('token', newAccessToken);
// console.log('✅ Token refreshed successfully');
localStorage.setItem("token", newAccessToken);
console.log("✅ Token refreshed successfully");
// update token di header
instance.defaults.headers.common['Authorization'] = `Bearer ${newAccessToken}`;
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
instance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
// console.log('🔁 Retrying original request...');
console.log("🔁 Retrying original request...");
return instance(originalRequest);
} catch (refreshError) {
console.error(
'❌ Refresh token gagal:',
refreshError.response?.data || refreshError.message
);
console.error("❌ Refresh token gagal:", refreshError.response?.data || refreshError.message);
localStorage.clear();
window.location.href = '/signin';
window.location.href = "/signin";
}
}
@@ -57,7 +55,12 @@ instance.interceptors.response.use(
}
);
async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = true } = {}) {
async function ApiRequest({
method = "GET",
params = {},
prefix = "/",
token = true,
} = {}) {
const isFormData = params instanceof FormData;
const request = {
@@ -65,49 +68,34 @@ async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = t
url: prefix,
data: params,
headers: {
'Accept-Language': 'en_US',
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
"Accept-Language": "en_US",
...(isFormData ? {} : { "Content-Type": "application/json" }),
},
};
const tokenRedirect = sessionStorage.getItem('token_redirect');
let rawToken = '';
if (tokenRedirect !== null) {
rawToken = tokenRedirect;
// console.log(`sessionStorage: ${tokenRedirect}`);
} else {
rawToken = localStorage.getItem('token');
// console.log(`localStorage: ${rawToken}`);
}
const rawToken = localStorage.getItem("token");
if (token && rawToken) {
const cleanToken = rawToken.replace(/"/g, '');
request.headers['Authorization'] = `Bearer ${cleanToken}`;
// console.log('🔐 Sending request with token:', cleanToken.substring(0, 20) + '...');
const cleanToken = rawToken.replace(/"/g, "");
request.headers["Authorization"] = `Bearer ${cleanToken}`;
console.log("🔐 Sending request with token:", cleanToken.substring(0, 20) + "...");
} else {
console.warn('⚠️ No token found in localStorage');
console.warn("⚠️ No token found in localStorage");
}
// console.log('📤 API Request:', { method, url: prefix, hasToken: !!rawToken });
console.log("📤 API Request:", { method, url: prefix, hasToken: !!rawToken });
try {
const response = await instance(request);
// console.log('✅ API Response:', {
// url: prefix,
// status: response.status,
// statusCode: response.data?.statusCode,
// });
console.log("✅ API Response:", { url: prefix, status: response.status, statusCode: response.data?.statusCode });
return { ...response, error: false };
} catch (error) {
const status = error?.response?.status || 500;
const message = error?.response?.data?.message || error.message || 'Something Wrong';
console.error('❌ API Error:', {
const message = error?.response?.data?.message || error.message || "Something Wrong";
console.error("❌ API Error:", {
url: prefix,
status,
message,
fullError: error?.response?.data,
fullError: error?.response?.data
});
if (status !== 401) {
@@ -118,23 +106,23 @@ async function ApiRequest({ method = 'GET', params = {}, prefix = '/', token = t
}
}
async function cekError(status, message = '') {
async function cekError(status, message = "") {
if (status === 403) {
await Swal.fire({
icon: 'warning',
title: 'Forbidden',
icon: "warning",
title: "Forbidden",
text: message,
});
} else if (status >= 500) {
await Swal.fire({
icon: 'error',
title: 'Server Error',
icon: "error",
title: "Server Error",
text: message,
});
} else {
await Swal.fire({
icon: 'warning',
title: 'Peringatan',
icon: "warning",
title: "Peringatan",
text: message,
});
}
@@ -143,31 +131,38 @@ async function cekError(status, message = '') {
const SendRequest = async (queryParams) => {
try {
const response = await ApiRequest(queryParams);
console.log("📦 SendRequest response:", {
hasError: response.error,
status: response.status,
statusCode: response.data?.statusCode,
data: response.data
});
// If ApiRequest returned error flag, return error structure
if (response.error) {
const errorMsg = response.data?.message || response.statusText || 'Request failed';
const errorMsg = response.data?.message || response.statusText || "Request failed";
console.error("❌ SendRequest error response:", errorMsg);
// Return consistent error structure instead of empty array
return {
statusCode: response.status || 500,
message: errorMsg,
data: null,
error: true,
error: true
};
}
return response || { statusCode: 200, data: [], message: 'Success' };
return response?.data || { statusCode: 200, data: [], message: "Success" };
} catch (error) {
console.error('❌ SendRequest catch error:', error);
console.error("❌ SendRequest catch error:", error);
// Don't show Swal here, let the calling code handle it
// This allows better error handling in each API call
return {
statusCode: 500,
message: error.message || 'Something went wrong',
message: error.message || "Something went wrong",
data: null,
error: true,
error: true
};
}
};

68
src/components/Global/CardList.jsx
View File

@@ -12,12 +12,11 @@ const CardList = ({
showEditModal,
showDeleteDialog,
cardColor,
fieldColor,
}) => {
const getCardStyle = (color) => {
const colorStyle = color ?? '#F3EDEA'; // Orange color
const getCardStyle = () => {
const color = cardColor ?? '#F3EDEA'; // Orange color
return {
border: `2px solid ${colorStyle}`,
border: `2px solid ${color}`,
borderRadius: '8px',
textAlign: 'center', // Center text
};
@@ -38,7 +37,7 @@ const CardList = ({
return (
<Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'left' }}>
{data.map((item) => (
<Col xs={24} sm={24} md={12} lg={6} key={item.device_id}>
<Col xs={24} sm={24} md={12} lg={8} key={item.device_id}>
<Card
title={
<div
@@ -48,58 +47,49 @@ const CardList = ({
alignItems: 'center',
}}
>
<span
style={getTitleStyle(fieldColor ? item[fieldColor] : cardColor)}
>
<span style={getTitleStyle(item.color ?? cardColor)}>
{item[header]}
</span>
</div>
}
style={getCardStyle(fieldColor ? item[fieldColor] : cardColor)}
style={getCardStyle()}
actions={[
showPreviewModal && (
<EyeOutlined
<Space
size="middle"
style={{ display: 'flex', justifyContent: 'center' }}
>
<Button
type="text"
style={{ color: '#1890ff' }}
key="preview"
icon={<EyeOutlined />}
onClick={() => showPreviewModal(item)}
/>
),
showEditModal && (
<EditOutlined
<Button
type="text"
style={{ color: '#faad14' }}
key="edit"
icon={<EditOutlined />}
onClick={() => showEditModal(item)}
/>
),
showDeleteDialog && (
<DeleteOutlined
style={{ color: '#ff1818' }}
key="delete"
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(item)}
/>
),
].filter(Boolean)} // <== Hapus elemen yang undefined
</Space>,
]}
>
<div style={{ textAlign: 'left' }}>
{column.map((itemCard, index) => (
<React.Fragment key={index}>
{!itemCard.hidden &&
itemCard.title !== 'No' &&
itemCard.title !== 'Action' && (
<p style={{ margin: '8px 0' }}>
{column.map((itemCard) => (
<>
{!itemCard.hidden && !itemCard.render && (
<p>
<Text strong>{itemCard.title}:</Text>{' '}
{itemCard.render
? itemCard.render(
item[itemCard.dataIndex],
item,
index
)
: item[itemCard.dataIndex] ||
item[itemCard.key] ||
'-'}
{item[itemCard.key]}
</p>
)}
</React.Fragment>
{itemCard.render && itemCard.render}
</>
))}
</div>
</Card>

48
src/components/Global/DateRealTime.jsx
View File

@@ -1,48 +0,0 @@
import { useState, useEffect } from 'react';
import { Typography } from 'antd';
const { Title, Text } = Typography;
const JamRealtimeAntd = () => {
const [waktu, setWaktu] = useState(new Date());
useEffect(() => {
const interval = setInterval(() => {
setWaktu(new Date());
}, 1000);
return () => clearInterval(interval);
}, []);
// Format custom manual untuk konsistensi
const formatWaktuLengkap = (date) => {
const hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
const bulan = [
'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
const namaHari = hari[date.getDay()];
const tanggal = date.getDate().toString().padStart(2, '0');
const namaBulan = bulan[date.getMonth()];
const tahun = date.getFullYear();
const jam = date.getHours().toString().padStart(2, '0');
const menit = date.getMinutes().toString().padStart(2, '0');
const detik = date.getSeconds().toString().padStart(2, '0');
return `${namaHari}, ${tanggal} ${namaBulan} ${tahun} ${jam}:${menit}:${detik}`;
};
return (
<Text style={{
fontSize: '25px',
// fontWeight: 'bold',
color: '#1BAA56'
}}>
{formatWaktuLengkap(waktu)}
</Text>
);
};
export default JamRealtimeAntd;

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

@@ -2,16 +2,7 @@
import mqtt from 'mqtt';
const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
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 topics = ['PIU_GGCP/Devices/PB'];
const options = {
keepalive: 30,
clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
@@ -75,8 +66,7 @@ const listenMessage = (callback) => {
const setValSvg = (listenTopic, svg) => {
client.on('message', (topic, message) => {
// console.log(topic ,' = ', listenTopic);
if (topic === listenTopic) {
if (topic == listenTopic) {
const objChanel = JSON.parse(message);
Object.entries(objChanel).forEach(([key, value]) => {
@@ -88,7 +78,7 @@ const setValSvg = (listenTopic, svg) => {
} else if (value === false) {
el.style.display = 'none';
} else if (!isNaN(value)) {
el.textContent = Number(value ?? 0.0).toFixed(2);
el.textContent = Number(value ?? 0.0);
} else {
el.textContent = value;
}

169
src/components/Global/TableList.jsx
View File

@@ -1,6 +1,18 @@
import React, { memo, useState, useEffect, useRef } from 'react';
import { Table, Pagination, Row, Col, Card, Grid, Button, Typography, Tag, Segmented } from 'antd';
import { MacCommandOutlined, TableOutlined } from '@ant-design/icons';
import {
PlusOutlined,
FilterOutlined,
EditOutlined,
DeleteOutlined,
EyeOutlined,
SearchOutlined,
FilePdfOutlined,
AppstoreOutlined,
TableOutlined,
} from '@ant-design/icons';
import { setFilterData } from './DataFilter';
import CardDevice from '../../pages/master/device/component/CardDevice';
import CardList from './CardList';
const { Text } = Typography;
@@ -17,125 +29,63 @@ const TableList = memo(function TableList({
showEditModal,
showDeleteDialog,
cardColor,
fieldColor,
firstLoad = true,
columnDynamic = false,
cardComponent, // New prop for custom card component
onStockUpdate, // Prop to pass to card component
onGetData, // Callback to execute when data is received
}) {
const [gridLoading, setGridLoading] = useState(false);
const [data, setData] = useState([]);
const [pagination, setPagination] = useState({
current_page: 1,
current_limit: 10,
total_limit: 0,
total_page: 1,
const [pagingResponse, setPagingResponse] = useState({
totalData: '',
perPage: '',
totalPage: '',
});
const [columnsDynamic, setColumnsDynamic] = useState(columns);
const [pagination, setPagination] = useState({
current: 1,
limit: 10,
total: 0,
});
const [viewMode, setViewMode] = useState('table');
const [viewMode, setViewMode] = useState('card');
const { useBreakpoint } = Grid;
const [renderCount, setRenderCount] = useState(firstLoad ? 1 : 0);
useEffect(() => {
if (renderCount < 1) {
setRenderCount(renderCount + 1);
return;
} else {
filter(1, pagination.current_limit);
}
filter(1, 10);
}, [triger]);
const filter = async (currentPage, pageSize) => {
setGridLoading(true);
const paging = {
page: Number(currentPage),
limit: Number(pageSize),
page: currentPage,
limit: pageSize,
};
const param = new URLSearchParams({ ...paging, ...queryParams });
const resData = await getData(param);
if (columnDynamic && resData) {
const columnsApi = resData[columnDynamic] ?? '';
// Pisahkan string menjadi array kolom
const colArray = columnsApi.split(',').map((c) => c.trim());
// Kolom default datetime di awal
const defaultColumns = [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '15%',
// render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
},
];
// Buat kolom numerik dengan format 4 angka di belakang koma
const numericColumns = colArray.map((colName) => ({
title: colName,
dataIndex: colName,
key: colName,
align: 'right',
width: 'auto',
render: (value) => {
if (typeof value === 'number') {
return value.toFixed(4);
}
return value ?? '-';
},
}));
// Gabungkan default + API columns
setColumnsDynamic([...defaultColumns, ...numericColumns]);
}
const fetchedData = resData?.data ?? [];
// Panggil callback jika disediakan
if (onGetData && typeof onGetData === 'function') {
onGetData(fetchedData);
}
setData(fetchedData);
const pagingData = resData?.paging;
if (pagingData) {
setPagination((prev) => ({
...prev,
current_page: pagingData.current_page || 1,
current_limit: pagingData.current_limit || 10,
total_limit: pagingData.total_limit || 0,
total_page: pagingData.total_page || 1,
}));
}
setGridLoading(false);
if (resData) {
setTimeout(() => {
setGridLoading(false);
}, 900);
} else {
setGridLoading(false);
return;
}
setData(resData.data.data ?? []);
setFilterData(resData.data.data ?? []);
if (resData.status == 200) {
setPagingResponse({
totalData: resData.paging.total_limit,
perPage: resData.paging.page_total,
totalPage: resData.paging.total_page,
});
setPagination((prev) => ({
...prev,
current: resData.paging.current_page,
limit: resData.paging.current_limit,
total: resData.paging.total_limit,
}));
}
};
@@ -143,7 +93,7 @@ const TableList = memo(function TableList({
setPagination((prev) => ({
...prev,
current: page,
limit: pageSize,
pageSize,
}));
filter(page, pageSize);
};
@@ -152,41 +102,35 @@ const TableList = memo(function TableList({
const isMobile = !screens.md; // kalau kurang dari md (768px) dianggap mobile
// Use the custom card component if provided, otherwise default to CardList
const CardViewComponent = cardComponent || CardList;
return (
<div>
<Segmented
options={[
{ value: 'card', icon: <AppstoreOutlined /> },
{ value: 'table', icon: <TableOutlined /> },
{ value: 'card', icon: <MacCommandOutlined /> },
]}
value={viewMode}
onChange={setViewMode}
/>
{(isMobile && mobile) || viewMode === 'card' ? (
<CardViewComponent
<CardList
cardColor={cardColor}
fieldColor={fieldColor}
data={data}
column={columnsDynamic}
column={columns}
header={header}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
onStockUpdate={onStockUpdate}
/>
) : (
<Row gutter={24} style={{ marginTop: '16px' }}>
<Row gutter={24}>
<Table
rowSelection={rowSelection || null}
columns={columnsDynamic}
columns={columns}
dataSource={data.map((item, index) => ({ ...item, key: index }))}
pagination={false}
loading={gridLoading}
scroll={{ y: 520 }}
size="small"
/>
</Row>
)}
@@ -194,8 +138,8 @@ const TableList = memo(function TableList({
<Row justify="space-between" align="middle">
<Col>
<div>
Menampilkan {pagination.current_limit} data halaman{' '}
{pagination.current_page} dari total {pagination.total_limit} data
Menampilkan {pagingResponse.totalPage} Data dari {pagingResponse.perPage}{' '}
Halaman
</div>
</Col>
<Col>
@@ -203,9 +147,9 @@ const TableList = memo(function TableList({
showSizeChanger
onChange={handlePaginationChange}
onShowSizeChange={handlePaginationChange}
current={pagination.current_page}
pageSize={pagination.current_limit}
total={pagination.total_limit}
current={pagination.current}
pageSize={pagination.pageSize}
total={pagination.total}
/>
</Col>
</Row>
@@ -214,4 +158,3 @@ const TableList = memo(function TableList({
});
export default TableList;

1
src/components/Global/ToastNotif.jsx
View File

@@ -16,7 +16,6 @@ const NotifOk = ({ icon, title, message }) => {
icon: icon,
title: title,
text: message,
html: message.replace(/\n/g, '<br/>'),
});
};

51
src/index.css
View File

@@ -20,65 +20,36 @@ html body {
height: 100vh;
}
/* Custom green Sidebar Menu Styles */
.custom-green-menu.ant-menu-dark .ant-menu-item-selected {
/* Custom Orange Sidebar Menu Styles */
.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
background-color: rgba(255, 255, 255, 0.2) !important;
color: white !important;
}
.custom-green-menu.ant-menu-dark .ant-menu-item-selected::after {
.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
border-right-color: white !important;
}
.custom-green-menu.ant-menu-dark .ant-menu-item:hover,
.custom-green-menu.ant-menu-dark .ant-menu-submenu-title:hover {
.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
background-color: rgba(255, 255, 255, 0.15) !important;
color: white !important;
}
.custom-green-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
color: white !important;
}
.custom-green-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
background: rgba(0, 0, 0, 0.2) !important;
}
.custom-green-menu.ant-menu-dark .ant-menu-item,
.custom-green-menu.ant-menu-dark .ant-menu-submenu-title {
.custom-orange-menu.ant-menu-dark .ant-menu-item,
.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
color: rgba(255, 255, 255, 0.9) !important;
}
.custom-green-menu.ant-menu-dark .ant-menu-item-active,
.custom-green-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
color: white !important;
}
/*start styling for scrollbar menu */
.custom-menu-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-menu-scrollbar::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
margin: 5px 0;
}
.custom-menu-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #1BAA56 0%, rgb(5, 75, 34) 100%);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.custom-menu-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #2bc56d 0%, rgb(8, 94, 43) 100%);
}
.custom-menu-scrollbar {
scrollbar-width: thin;
scrollbar-color: #1BAA56 transparent;
}
/* Hilangkan panah atas/bawah dengan important */
.custom-menu-scrollbar::-webkit-scrollbar-button {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/*end styling for scrollbar menu */

48
src/layout/LayoutHeader.jsx
View File

@@ -5,7 +5,6 @@ import handleLogOut from '../Utils/Auth/Logout';
import { useBreadcrumb } from './LayoutBreadcrumb';
import { decryptData } from '../components/Global/Formatter';
import { useNavigate } from 'react-router-dom';
import DateRealTime from '../components/Global/DateRealTime';
const { Link, Text } = Typography;
const { Header } = Layout;
@@ -18,7 +17,7 @@ const LayoutHeader = () => {
const { token } = theme.useToken() || {};
const colorBgContainer = token?.colorBgContainer || '#fff';
const colorBorder = token?.colorBorder || '#d9d9d9';
const colorText = token?.colorText || '#1BAA56';
const colorText = token?.colorText || '#000';
// Ambil data user dari localStorage
let userData = null;
@@ -41,8 +40,15 @@ const LayoutHeader = () => {
// console.log('User data di header:', userData?.user);
// Role handling
let roleName = userData?.user?.role_name || 'Guest';
const userName = userData?.user?.name || userData?.user?.username || userData?.user?.user_name || 'User';
const roleNameDefault =
userData?.user?.approval ||
userData?.user?.partner_name ||
userData?.user?.role_name ||
'Guest';
let roleName = roleNameDefault;
const userName =
userData?.user?.name || userData?.user?.username || userData?.user?.user_name || 'User';
// Override jika Super Admin
if (
@@ -67,9 +73,8 @@ const LayoutHeader = () => {
paddingBottom: 20,
paddingLeft: 24,
paddingRight: 24,
// minHeight: 100,
minHeight: 100,
boxSizing: 'border-box',
boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)'
}}
>
<div
@@ -82,39 +87,16 @@ const LayoutHeader = () => {
>
<Text
style={{
color: '#1BAA56',
fontSize: 26,
color: colorText,
fontSize: 16,
fontWeight: 'bold',
whiteSpace: 'nowrap',
}}
>
{/* Login AS {roleName} */}
CALL OF DUTY
Login AS {roleName}
</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
gap: 12,
}}
>
{/* <Text
style={{
color: '#000000',
fontSize: 20,
fontWeight: 'bold',
whiteSpace: 'nowrap',
}}
> */}
{/* Login AS {roleName} */}
{/* Kamis, 04 November 2025 16:35:00 */}
{/* </Text> */}
<DateRealTime/>
</div>
<div
style={{
display: 'flex',
@@ -135,7 +117,7 @@ const LayoutHeader = () => {
>
<UserOutlined style={{ fontSize: 16, color: colorText }} />
<Text style={{ marginLeft: 8, color: colorText }} strong>
{userName} @ {roleName}
{userName}
</Text>
</Button>
<Link

275
src/layout/LayoutMenu.jsx
View File

@@ -26,13 +26,6 @@ import {
TeamOutlined,
ClockCircleOutlined,
CalendarOutlined,
DesktopOutlined,
NodeExpandOutlined,
GroupOutlined,
SlidersOutlined,
SnippetsOutlined,
ContactsOutlined,
ToolOutlined,
} from '@ant-design/icons';
const { Text } = Typography;
@@ -47,76 +40,15 @@ const allItems = [
</Link>
),
},
{
key: 'dashboard-svg',
icon: <GroupOutlined style={{ fontSize: '19px' }} />,
label: 'Dashboard',
children: [
{
key: 'dashboard-svg-compressor',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: 'Compressor',
children: [
{
key: 'dashboard-svg-compressor-overview',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/overview-compressor">Overview</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-a',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
},
{
key: 'dashboard-svg-compressor-compressor-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
},
],
},
{
key: 'dashboard-svg-airdryer',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: 'Air Dryer',
children: [
{
key: 'dashboard-svg-airdryer-overview',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/overview-airdryer">Overview</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-a',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-b',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
},
{
key: 'dashboard-svg-airdryer-airdryer-c',
icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
},
],
},
],
},
{
key: 'master',
icon: <DatabaseOutlined style={{ fontSize: '19px' }} />,
label: 'Master',
children: [
{
key: 'master-plant-sub-section',
key: 'master-plant-section',
icon: <ProductOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/plant-sub-section">Plant Sub Section</Link>,
label: <Link to="/master/plant-section">Plant Section</Link>,
},
{
key: 'master-brand-device',
@@ -128,47 +60,25 @@ const allItems = [
icon: <MobileOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/device">Device</Link>,
},
{
key: 'master-unit',
icon: <AppstoreOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/unit">Unit</Link>,
},
{
key: 'master-tag',
icon: <TagOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/tag">Tag</Link>,
},
{
key: 'master-unit',
icon: <AppstoreOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/unit">Unit</Link>,
},
{
key: 'master-status',
icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/status">Status</Link>,
},
{
key: 'master-sparepart',
icon: <ToolOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/sparepart">Sparepart</Link>,
},
// {
// key: 'master-shift',
// icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
// label: <Link to="/master/shift">Shift</Link>,
// },
],
},
{
key: 'report',
icon: <SnippetsOutlined style={{ fontSize: '19px' }} />,
label: 'Report',
children: [
{
key: 'report-trending',
icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/report/trending">Trending</Link>,
},
{
key: 'report-report',
icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/report/report">Report</Link>,
key: 'master-shift',
icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/master/shift">Shift</Link>,
},
],
},
@@ -178,32 +88,32 @@ const allItems = [
label: 'History',
children: [
{
key: 'history-alarm',
icon: <AlertOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/history/alarm">Alarm</Link>,
key: 'history-trending',
icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/history/trending">Trending</Link>,
},
{
key: 'history-event',
icon: <SlidersOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/history/event">Event</Link>,
key: 'history-report',
icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
label: <Link to="/history/report">Report</Link>,
},
],
},
{
key: 'contact',
icon: <ContactsOutlined style={{ fontSize: '19px' }} />,
label: (
<Link to="/contact" className="fontMenus">
Contact
</Link>
),
},
{
key: 'notification',
icon: <BellOutlined style={{ fontSize: '19px' }} />,
label: (
<Link to="/notification" className="fontMenus">
Notification
Notifikasi
</Link>
),
},
{
key: 'event-alarm',
icon: <AlertOutlined style={{ fontSize: '19px' }} />,
label: (
<Link to="/event-alarm" className="fontMenus">
Event Alarm
</Link>
),
},
@@ -225,15 +135,15 @@ const allItems = [
</Link>
),
},
// {
// key: 'jadwal-shift',
// icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
// label: (
// <Link to="/jadwal-shift" className="fontMenus">
// Jadwal Shift
// </Link>
// ),
// },
{
key: 'jadwal-shift',
icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
label: (
<Link to="/jadwal-shift" className="fontMenus">
Jadwal Shift
</Link>
),
},
];
const LayoutMenu = () => {
@@ -251,84 +161,36 @@ const LayoutMenu = () => {
if (pathname === '/user') return 'user';
if (pathname === '/role') return 'role';
if (pathname === '/notification') return 'notification';
if (pathname === '/event-alarm') return 'event-alarm';
if (pathname === '/jadwal-shift') return 'jadwal-shift';
if (pathname === '/contact') return 'contact';
// Handle master routes
if (pathname.startsWith('/master/')) {
const subPath = pathParts[1];
// Convert kebab-case to the actual menu keys
const masterKeyMap = {
'plant-sub-section': 'master-plant-sub-section',
'brand-device': 'master-brand-device',
device: 'master-device',
unit: 'master-unit',
tag: 'master-tag',
status: 'master-status',
sparepart: 'master-sparepart',
shift: 'master-shift',
};
return masterKeyMap[subPath] || `master-${subPath}`;
}
// Handle dashboard svg routes
if (pathname.startsWith('/dashboard-svg/')) {
const subPath = pathParts[1];
// Map specific routes to their menu keys
if (subPath === 'overview-compressor') return 'dashboard-svg-compressor-overview';
if (subPath === 'compressor-a') return 'dashboard-svg-compressor-compressor-a';
if (subPath === 'compressor-b') return 'dashboard-svg-compressor-compressor-b';
if (subPath === 'compressor-c') return 'dashboard-svg-compressor-compressor-c';
if (subPath === 'overview-airdryer') return 'dashboard-svg-airdryer-overview';
if (subPath === 'airdryer-a') return 'dashboard-svg-airdryer-airdryer-a';
if (subPath === 'airdryer-b') return 'dashboard-svg-airdryer-airdryer-b';
if (subPath === 'airdryer-c') return 'dashboard-svg-airdryer-airdryer-c';
return `dashboard-svg-${subPath}`;
}
// Handle report routes
if (pathname.startsWith('/report/')) {
const subPath = pathParts[1];
const reportKeyMap = {
trending: 'report-trending',
report: 'report-report',
};
return reportKeyMap[subPath] || `report-${subPath}`;
return `master-${subPath}`;
}
// Handle history routes
if (pathname.startsWith('/history/')) {
const subPath = pathParts[1];
const historyKeyMap = {
alarm: 'history-alarm',
event: 'history-event',
};
return historyKeyMap[subPath] || `history-${subPath}`;
return `history-${subPath}`;
}
// Handle shift management routes
if (pathname.startsWith('/shift-management/')) {
const subPath = pathParts[1];
return `shift-${subPath}`;
}
return 'home'; // default
};
// Function to get parent keys from menu key
const getParentKeys = (key) => {
const parentKeys = [];
if (key.startsWith('dashboard-svg-compressor-')) {
parentKeys.push('dashboard-svg', 'dashboard-svg-compressor');
} else if (key.startsWith('dashboard-svg-airdryer-')) {
parentKeys.push('dashboard-svg', 'dashboard-svg-airdryer');
} else if (key.startsWith('dashboard-svg-')) {
parentKeys.push('dashboard-svg');
} else if (key.startsWith('master-')) {
parentKeys.push('master');
} else if (key.startsWith('report-')) {
parentKeys.push('report');
} else if (key.startsWith('history-')) {
parentKeys.push('history');
}
return parentKeys;
// Function to get parent key from menu key
const getParentKey = (key) => {
if (key.startsWith('master-')) return 'master';
if (key.startsWith('history-')) return 'history';
if (key.startsWith('shift-')) return 'shift-management';
return null;
};
// Update selected and open keys when route changes
@@ -336,11 +198,11 @@ const LayoutMenu = () => {
const currentKey = getMenuKeyFromPath(location.pathname);
setSelectedKeys([currentKey]);
const parentKeys = getParentKeys(currentKey);
const parentKey = getParentKey(currentKey);
// Always keep the parent menus open when a child is selected
if (parentKeys.length > 0) {
setStateOpenKeys(parentKeys);
// If current menu has parent, open it. Otherwise, close all dropdowns
if (parentKey) {
setStateOpenKeys([parentKey]);
} else {
setStateOpenKeys([]);
}
@@ -366,28 +228,17 @@ const LayoutMenu = () => {
const onOpenChange = (openKeys) => {
const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
// If clicking on a menu that was previously closed
if (currentOpenKey !== undefined) {
const repeatIndex = openKeys
.filter((key) => key !== currentOpenKey)
.findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
setStateOpenKeys(
openKeys
.filter((_, index) => index !== repeatIndex)
.filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
);
} else {
// If clicking on a menu that was previously open, close only that menu
// but keep other parent menus open if they have active children
const currentKey = getMenuKeyFromPath(location.pathname);
const necessaryParentKeys = getParentKeys(currentKey);
// Filter out only the menus that are necessary to keep open
const filteredOpenKeys = openKeys.filter((key) => necessaryParentKeys.includes(key));
setStateOpenKeys(filteredOpenKeys);
setStateOpenKeys(openKeys);
}
};
@@ -396,17 +247,27 @@ const LayoutMenu = () => {
const karyawan = () => {
return allItems
.filter((item) => item.key !== 'setting')
.filter(
(item) => item.key !== 'setting'
// tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
// && item.key !== 'master'
// && item.key !== 'master'
)
.map((item) => {
if (item.key === 'master') {
return {
...item,
// buka command dibawah jika terdapat sub menu yang di sembunyikan
// children: item.children.filter(
// child => child.key !== 'master-product'
// tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
// && child.key !== 'master-service'
// )
};
}
return item;
});
};
const items = isAdmin === 1 ? allItems : karyawan();
return (
@@ -422,7 +283,7 @@ const LayoutMenu = () => {
border: 'none',
}}
theme="dark"
className="custom-green-menu"
className="custom-orange-menu"
/>
);
};

26
src/layout/LayoutSidebar.jsx
View File

@@ -7,7 +7,7 @@ const { Sider } = Layout;
const LayoutSidebar = () => {
return (
<Sider
width={255}
width={300}
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={(broken) => {
@@ -17,37 +17,17 @@ const LayoutSidebar = () => {
// console.log(collapsed, type);
}}
style={{
background: 'linear-gradient(180deg, #1BAA56 0%,rgb(5, 75, 34) 100%)',
// overflow: 'auto',
background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
borderTopRightRadius: '30px',
borderBottomRightRadius: '30px',
boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)',
zIndex: 9999
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
height: '100vh',
overflow: 'hidden'
}}>
{/* Logo section - fixed height */}
<div style={{flexShrink: 0,minHeight: '64px'}}>
<LayoutLogo />
</div>
{/* Menu section - scrollable */}
<div style={{flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
<div className="custom-menu-scrollbar" style={{flex: 1, overflowY: 'auto', overflowX: 'hidden', backgroundColor: 'transparent'}}>
<LayoutMenu />
</div>
</div>
</div>
</Sider>
);
};

2
src/layout/MainLayout.jsx
View File

@@ -20,7 +20,7 @@ const MainLayout = ({ children }) => {
<LayoutSidebar />
<Layout
style={{
marginLeft: isDesktop ? '250px' : '0',
marginLeft: isDesktop ? '300px' : '0',
overflow: 'auto',
}}
>

461
src/pages/auth/Registration.jsx Normal file
View File

@@ -0,0 +1,461 @@
// import React, { useState } from 'react';
// import {
// Flex,
// Input,
// InputNumber,
// Form,
// Button,
// Card,
// Space,
// Upload,
// Divider,
// Tooltip,
// message,
// Select,
// } from 'antd';
// import {
// UploadOutlined,
// UserOutlined,
// IdcardOutlined,
// PhoneOutlined,
// LockOutlined,
// InfoCircleOutlined,
// MailOutlined,
// } from '@ant-design/icons';
// const { Item } = Form;
// const { Option } = Select;
// import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
// import { useNavigate } from 'react-router-dom';
// import { register, uploadFile, checkUsername } from '../../api/auth';
// import { NotifAlert } from '../../components/Global/ToastNotif';
// const Registration = () => {
// const [form] = Form.useForm();
// const navigate = useNavigate();
// const [loading, setLoading] = useState(false);
// const [fileListKontrak, setFileListKontrak] = useState([]);
// const [fileListHsse, setFileListHsse] = useState([]);
// const [fileListIcon, setFileListIcon] = useState([]);
// // Daftar jenis vendor
// const vendorTypes = [
// { vendor_type: 1, vendor_type_name: 'One-Time' },
// { vendor_type: 2, vendor_type_name: 'Rutin' },
// ];
// const onFinish = async (values) => {
// setLoading(true);
// try {
// if (!fileListKontrak.length || !fileListHsse.length) {
// message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
// setLoading(false);
// return;
// }
// const formData = new FormData();
// formData.append('path_kontrak', fileListKontrak[0].originFileObj);
// formData.append('path_hse_plant', fileListHsse[0].originFileObj);
// if (fileListIcon.length) {
// formData.append('path_icon', fileListIcon[0].originFileObj);
// }
// const uploadResponse = await uploadFile(formData);
// if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
// message.error(uploadResponse.message || 'Gagal mengunggah file.');
// setLoading(false);
// return;
// }
// const params = new URLSearchParams({ username: values.username });
// const usernameCheck = await checkUsername(params);
// if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
// NotifAlert({
// icon: 'error',
// title: 'Gagal',
// message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
// });
// setLoading(false);
// return;
// }
// const registerData = {
// nama_perusahaan: values.namaPerusahaan,
// no_kontak_wo: values.noKontakWo,
// path_kontrak: uploadResponse.data.pathKontrak || '',
// durasi: values.durasiPekerjaan,
// nilai_csms: values.nilaiCsms.toString(),
// vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
// path_hse_plant: uploadResponse.data.pathHsePlant || '',
// nama_leader: values.penanggungJawab,
// no_identitas: values.noIdentitas,
// no_hp: values.noHandphone,
// email_register: values.username,
// password_register: values.password,
// };
// const response = await register(registerData);
// if (response.data?.id_register) {
// message.success('Data berhasil disimpan!');
// try {
// form.resetFields();
// setFileListKontrak([]);
// setFileListHsse([]);
// setFileListIcon([]);
// navigate('/registration-submitted');
// } catch (postSuccessError) {
// message.warning(
// 'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
// );
// }
// } else {
// message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
// }
// } catch (error) {
// console.error('Error saat registrasi:', error);
// NotifAlert({
// icon: 'error',
// title: 'Gagal',
// message: error.message || 'Terjadi kesalahan, silakan coba lagi',
// });
// } finally {
// setLoading(false);
// }
// };
// const onCancel = () => {
// form.resetFields();
// setFileListKontrak([]);
// setFileListHsse([]);
// setFileListIcon([]);
// navigate('/signin');
// };
// const handleChangeKontrak = ({ fileList }) => {
// setFileListKontrak(fileList);
// };
// const handleChangeHsse = ({ fileList }) => {
// setFileListHsse(fileList);
// };
// const handleChangeIcon = ({ fileList }) => {
// setFileListIcon(fileList);
// };
// const beforeUpload = (file, fieldname) => {
// const isValidType = [
// 'image/jpeg',
// 'image/jpg',
// 'image/png',
// fieldname !== 'path_icon' ? 'application/pdf' : null,
// ]
// .filter(Boolean)
// .includes(file.type);
// const isNotEmpty = file.size > 0;
// const isSizeValid = file.size / 1024 / 1024 < 10;
// if (!isValidType) {
// message.error(
// `Hanya file ${
// fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
// } yang diperbolehkan!`
// );
// return false;
// }
// if (!isNotEmpty) {
// message.error('File tidak boleh kosong!');
// return false;
// }
// if (!isSizeValid) {
// message.error('Ukuran file maksimal 10MB!');
// return false;
// }
// return true;
// };
// return (
// <Flex
// align="center"
// justify="center"
// style={{
// minHeight: '100vh',
// backgroundImage: `url(${sypiu_ggcp})`,
// backgroundSize: 'cover',
// backgroundPosition: 'center',
// padding: '20px',
// }}
// >
// <Card
// style={{
// width: '100%',
// maxWidth: 800,
// background: 'rgba(255, 255, 255, 0.9)',
// backdropFilter: 'blur(10px)',
// borderRadius: '12px',
// boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
// padding: '24px',
// }}
// title={
// <Flex align="center" justify="space-between">
// <h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
// <Button
// type="link"
// icon={<InfoCircleOutlined />}
// onClick={() => navigate('/signin')}
// >
// Kembali
// </Button>
// </Flex>
// }
// >
// <Form
// form={form}
// onFinish={onFinish}
// layout="horizontal"
// labelCol={{ span: 8 }}
// wrapperCol={{ span: 16 }}
// labelAlign="left"
// style={{ maxWidth: 800 }}
// >
// {/* Informasi Perusahaan */}
// <Divider
// orientation="left"
// orientationMargin={0}
// style={{
// color: '#23A55A',
// fontWeight: 'bold',
// marginLeft: 0,
// paddingLeft: 0,
// }}
// >
// Informasi Perusahaan
// </Divider>
// <Item
// label="Nama Perusahaan"
// name="namaPerusahaan"
// rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
// >
// <Input
// prefix={<UserOutlined />}
// placeholder="Masukkan Nama Perusahaan"
// size="large"
// />
// </Item>
// <Item
// label="Durasi Pekerjaan (Hari)"
// name="durasiPekerjaan"
// rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
// >
// <InputNumber
// min={1}
// style={{ width: '100%' }}
// placeholder="Masukkan Durasi Pekerjaan"
// size="large"
// />
// </Item>
// <Item
// label="No Kontrak Kerja / Agreement"
// name="noKontakWo"
// rules={[
// { required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
// ]}
// >
// <Input
// style={{
// width: '100%',
// }}
// placeholder="Masukkan No Kontrak Kerja / Agreement"
// size="large"
// />
// </Item>
// <Item
// label="Lampiran Kontrak Kerja"
// name="lampiranKontrak"
// rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
// >
// <Upload
// beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
// fileList={fileListKontrak}
// onChange={handleChangeKontrak}
// maxCount={1}
// >
// <Button icon={<UploadOutlined />} size="large">
// Unggah PDF/JPG
// </Button>
// </Upload>
// </Item>
// <Item
// label="HSSE Plan"
// name="hssePlan"
// rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
// >
// <Upload
// beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
// fileList={fileListHsse}
// onChange={handleChangeHsse}
// maxCount={1}
// >
// <Button icon={<UploadOutlined />} size="large">
// Unggah PDF/JPG
// </Button>
// </Upload>
// </Item>
// <Item
// label="Nilai CSMS"
// name="nilaiCsms"
// rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
// >
// <InputNumber
// min={0}
// max={100}
// style={{ width: '100%' }}
// placeholder="Masukkan Nilai CSMS"
// size="large"
// />
// </Item>
// <Item
// label="Jenis Vendor"
// name="jenisVendor"
// rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
// >
// <Select
// placeholder="Pilih Jenis Vendor"
// size="large"
// style={{ width: '100%' }}
// >
// {vendorTypes.map((vendor) => (
// <Option key={vendor.vendor_type} value={vendor.vendor_type}>
// {vendor.vendor_type_name}
// </Option>
// ))}
// </Select>
// </Item>
// {/* Informasi Penanggung Jawab */}
// <Divider
// orientation="left"
// orientationMargin={0}
// style={{
// color: '#23A55A',
// fontWeight: 'bold',
// marginLeft: 0,
// paddingLeft: 0,
// }}
// >
// Informasi Penanggung Jawab
// </Divider>
// <Item
// label="Nama Penanggung Jawab"
// name="penanggungJawab"
// rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
// >
// <Input
// prefix={<UserOutlined />}
// placeholder="Masukkan Nama Penanggung Jawab"
// size="large"
// />
// </Item>
// <Item
// label="No Handphone"
// name="noHandphone"
// rules={[
// { required: true, message: 'Masukkan No Handphone!' },
// {
// pattern: /^(\+62|0)[0-9]{9,12}$/,
// message:
// 'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
// },
// ]}
// >
// <Input
// prefix={<PhoneOutlined />}
// placeholder="Masukkan No Handphone (+62)"
// size="large"
// />
// </Item>
// <Item
// label="No Identitas"
// name="noIdentitas"
// rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
// >
// <Input
// prefix={<IdcardOutlined />}
// placeholder="Masukkan No Identitas"
// size="large"
// />
// </Item>
// {/* Akun Pengguna */}
// <Divider
// orientation="left"
// orientationMargin={0}
// style={{
// color: '#23A55A',
// fontWeight: 'bold',
// marginLeft: 0,
// paddingLeft: 0,
// }}
// >
// Akun Pengguna (digunakan sebagai user login SYPIU)
// </Divider>
// <Item
// label="Email"
// name="username"
// rules={[
// { required: true, message: 'Masukkan Email!' },
// { type: 'email', message: 'Format email tidak valid!' },
// ]}
// >
// <Input
// prefix={<MailOutlined />}
// placeholder="Masukkan Email"
// size="large"
// />
// </Item>
// <Item
// label="Password"
// name="password"
// rules={[
// { required: true, message: 'Masukkan Password!' },
// { min: 6, message: 'Password minimal 6 karakter!' },
// ]}
// >
// <Input.Password
// prefix={<LockOutlined />}
// placeholder="Masukkan Password"
// size="large"
// />
// </Item>
// {/* Tombol */}
// <Item wrapperCol={{ offset: 8, span: 16 }}>
// <Space style={{ marginTop: '24px', width: '100%' }}>
// <Button
// type="primary"
// htmlType="submit"
// size="large"
// loading={loading}
// style={{
// backgroundColor: '#23A55A',
// borderColor: '#23A55A',
// width: 120,
// }}
// >
// Simpan
// </Button>
// <Button onClick={onCancel} size="large" style={{ width: 120 }}>
// Batal
// </Button>
// </Space>
// </Item>
// </Form>
// </Card>
// </Flex>
// );
// };
// export default Registration;

11
src/pages/auth/SignIn.jsx
View File

@@ -3,7 +3,7 @@ import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
import { useNavigate } from 'react-router-dom';
import { NotifAlert } from '../../components/Global/ToastNotif';
import { SendRequest } from '../../components/Global/ApiRequest';
import bg_cod from 'assets/bg-cod-1.jpg';
import bg_cod from 'assets/bg_cod.jpg';
import logo from 'assets/freepik/LOGOPIU.png';
const SignIn = () => {
@@ -31,9 +31,8 @@ const SignIn = () => {
prefix: 'auth/generate-captcha',
token: false,
});
setCaptchaSvg(res.data?.data?.svg || '');
setCaptchaText(res.data?.data?.text || '');
setCaptchaSvg(res.data.svg || '');
setCaptchaText(res.data.text || '');
} catch (err) {
console.error('Error fetching captcha:', err);
}
@@ -58,8 +57,8 @@ const SignIn = () => {
withCredentials: true,
});
const user = res?.data?.data?.user || res?.user;
const accessToken = res?.data?.data?.accessToken || res?.tokens?.accessToken;
const user = res?.data?.user || res?.user;
const accessToken = res?.data?.accessToken || res?.tokens?.accessToken;
if (user && accessToken) {
localStorage.setItem('token', accessToken);

49
src/pages/blank/RedirectWa.jsx
View File

@@ -1,49 +0,0 @@
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { verifyRedirect } from '../../api/auth';
import { encryptData } from '../../components/Global/Formatter';
import NotFound from './NotFound';
import Waiting from './Waiting';
import NotificationDetailTab from '../notificationDetail/IndexNotificationDetail';
export default function RedirectWa() {
const [idData, setIdData] = useState(0);
const [ready, setReady] = useState(0);
const location = useLocation();
// URLSearchParams untuk ambil query
const queryParams = new URLSearchParams(location.search);
const token = queryParams.get('token');
const handleInitForm = async (encodedToken) => {
const originalToken = decodeURIComponent(encodedToken);
// console.log(originalToken);
const response = await verifyRedirect({
tokenRedirect: originalToken,
});
console.log('tes', response);
const tokenResult = JSON.stringify(response.data?.data?.accessToken);
sessionStorage.setItem('token_redirect', tokenResult);
response.data.auth = true;
sessionStorage.setItem('session', encryptData(response?.data));
setIdData(response.data.data.idData);
setReady(1);
};
useEffect(() => {
handleInitForm(token);
}, [idData]);
if (ready == 0) return <Waiting />;
if (idData === 0) return <NotFound />;
return <NotificationDetailTab id={idData} />;
}

72
src/pages/contact/IndexContact.jsx
View File

@@ -1,72 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ListContact from './component/ListContact';
import DetailContact from './component/DetailContact';
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
const { Text } = Typography;
const IndexContact = memo(function IndexContact() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [actionMode, setActionMode] = useState('list');
const [selectedData, setSelectedData] = useState(null);
const [readOnly, setReadOnly] = useState(false);
const [showModal, setShowModal] = useState(false);
const [contactType, setContactType] = useState('operator');
const setMode = (param) => {
setShowModal(param !== 'list');
setReadOnly(param === 'preview');
setActionMode(param);
};
const handleContactSaved = (contactData, actionMode) => {
setLastSavedContact({ contactData, actionMode });
// Clear after processing
setTimeout(() => setLastSavedContact(null), 100);
};
const [lastSavedContact, setLastSavedContact] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{ title: <Text strong style={{ fontSize: '14px' }}>• Contact</Text> },
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
return (
<React.Fragment>
<ListContact
actionMode={actionMode}
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
lastSavedContact={lastSavedContact}
setContactType={setContactType}
/>
<DetailContact
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
showModal={showModal}
actionMode={actionMode}
onContactSaved={handleContactSaved}
contactType={contactType}
/>
</React.Fragment>
);
});
export default IndexContact;

272
src/pages/contact/component/DetailContact.jsx
View File

@@ -1,272 +0,0 @@
import React, { memo, useEffect, useState } from 'react';
import { Modal, Input, Button, Switch, ConfigProvider, Typography, Divider, Select } from 'antd';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { validateRun } from '../../../Utils/validate';
import { createContact, updateContact } from '../../../api/contact';
const { Text } = Typography;
const DetailContact = memo(function DetailContact(props) {
const [confirmLoading, setConfirmLoading] = useState(false);
const defaultData = {
id: '',
name: '',
phone: '',
is_active: true,
};
const [formData, setFormData] = useState(defaultData);
const handleInputChange = (e) => {
const { name, value } = e.target;
// Validasi untuk field phone - hanya angka yang diperbolehkan
if (name === 'phone') {
const cleanedValue = value.replace(/[^0-9+\-\s()]/g, '');
setFormData((prev) => ({
...prev,
[name]: cleanedValue,
}));
} else {
setFormData((prev) => ({
...prev,
[name]: value,
}));
}
};
const handleStatusToggle = (checked) => {
setFormData({
...formData,
is_active: checked,
});
};
const handleSave = async () => {
setConfirmLoading(true);
// Validation rules
const validationRules = [
{ field: 'name', label: 'Contact Name', required: true },
{ field: 'phone', label: 'Phone', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({ icon: 'warning', title: 'Peringatan', message: errorMessages });
setConfirmLoading(false);
})
)
return;
// Custom validation untuk name - minimal 3 karakter
if (formData.name && formData.name.length < 3) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Nama contact minimal 3 karakter',
});
setConfirmLoading(false);
return;
}
// Custom validation untuk phone - Indonesian phone format
const phoneRegex = /^(?:\+62|0)8\d{7,10}$/;
if (formData.phone && !phoneRegex.test(formData.phone.replace(/[\s\-\(\)]/g, ''))) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Nomor telepon harus format Indonesia (+628XXXXXXXXX atau 08XXXXXXXXX)',
});
setConfirmLoading(false);
return;
}
try {
const contactData = {
contact_name: formData.name,
contact_phone: formData.phone.replace(/[\s\-\(\)]/g, ''), // Clean phone number
is_active: formData.is_active,
};
let response;
if (props.actionMode === 'edit') {
response = await updateContact(
props.selectedData.contact_id || props.selectedData.id,
contactData
);
} else {
response = await createContact(contactData);
}
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Data Contact "${formData.name}" berhasil ${
props.actionMode === 'add' ? 'ditambahkan' : 'diperbarui'
}.`,
});
props.onContactSaved?.(response.data, props.actionMode);
handleCancel();
} catch (error) {
console.error('Save failed:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: error.response?.data?.message || 'Terjadi kesalahan saat menyimpan data.',
});
} finally {
setConfirmLoading(false);
}
};
const handleCancel = () => {
props.setActionMode('list');
props.setSelectedData(null);
};
useEffect(() => {
if (props.showModal) {
if (props.actionMode === 'edit' && props.selectedData) {
setFormData({
name: props.selectedData.contact_name || props.selectedData.name,
phone: props.selectedData.contact_phone || props.selectedData.phone,
is_active:
props.selectedData.is_active || props.selectedData.status === 'active',
});
} else if (props.actionMode === 'add') {
setFormData({
name: '',
phone: '',
is_active: true,
});
}
}
}, [props.showModal, props.actionMode, props.selectedData]);
return (
<Modal
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'edit'
? 'Edit'
: 'Detail'
} Kontak`}
open={props.showModal}
onCancel={handleCancel}
footer={[
<React.Fragment key="modal-footer">
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
},
},
}}
>
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
},
},
}}
>
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
)}
</ConfigProvider>
</React.Fragment>,
]}
>
<div style={{ padding: '8px 0' }}>
{/* Status field only show in add mode*/}
{props.actionMode === 'add' && (
<>
<div>
<div>
<Text strong>Status</Text>
</div>
<div
style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor: formData.is_active
? '#23A55A'
: '#bfbfbf',
}}
checked={formData.is_active}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
</>
)}
<div style={{ marginBottom: 12 }}>
<Text strong>Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Enter Name"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Phone</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder="Enter Phone Number"
readOnly={props.readOnly}
maxLength={15}
style={{ color: formData.is_active ? '#000000' : '#ff4d4f' }}
/>
</div>
{/* Contact Type */}
{/* <div style={{ marginBottom: 12 }}>
<Text strong>Contact Type</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.contact_type || undefined}
onChange={handleContactTypeChange}
placeholder="Select Contact Type"
disabled={props.readOnly}
style={{ width: '100%' }}
>
<Select.Option value="operator">Operator</Select.Option>
<Select.Option value="gudang">Gudang</Select.Option>
</Select>
</div> */}
</div>
</Modal>
);
});
export default DetailContact;

487
src/pages/contact/component/ListContact.jsx
View File

@@ -1,487 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Input, Tabs, Space, ConfigProvider, Card, Tag, Switch } from 'antd';
import {
PlusOutlined,
EditOutlined,
DeleteOutlined,
SearchOutlined,
UserOutlined,
PhoneOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { getAllContact, deleteContact, updateContact } from '../../../api/contact';
const ContactCard = memo(function ContactCard({
contact,
showEditModal,
showDeleteModal,
onStatusToggle,
}) {
const handleStatusToggle = async (checked) => {
try {
const updatedContact = {
contact_name: contact.contact_name || contact.name,
contact_phone: contact.contact_phone || contact.phone,
is_active: checked,
contact_type: contact.contact_type,
};
await updateContact(contact.contact_id || contact.id, updatedContact);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Status "${contact.contact_name || contact.name}" berhasil diperbarui.`,
});
// Refresh contacts list
onStatusToggle && onStatusToggle();
} catch (error) {
console.error('Error updating contact status:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Gagal memperbarui status kontak',
});
}
};
return (
<Col xs={24} sm={12} md={8} lg={6}>
<div
className="contact-card"
style={{
marginBottom: 16,
borderRadius: 8,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
height: '100%',
padding: '16px',
backgroundColor: '#f5f5f5',
border: '1px solid #e8e8e8',
transition: 'all 0.3s ease',
cursor: 'pointer',
}}
onMouseEnter={(e) => {
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
}}
>
<div
style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
position: 'relative',
}}
>
{/* Type Badge - Top Left */}
{/* <div style={{ position: 'absolute', top: 0, left: 0, zIndex: 1 }}>
<Tag
color={
contact.contact_type === 'operator'
? 'blue'
: contact.contact_type === 'gudang'
? 'orange'
: 'default'
}
style={{ fontSize: '11px' }}
>
{contact.contact_type === 'operator' ? 'Operator' : contact.contact_type === 'gudang' ? 'Gudang' : 'Unknown'}
</Tag>
</div> */}
{/* Status Slider - Top Right */}
<div
style={{
position: 'absolute',
top: 0,
right: 0,
zIndex: 1,
padding: '4px 8px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
<Switch
checked={contact.status === 'active'}
onChange={handleStatusToggle}
style={{
backgroundColor:
contact.status === 'active' ? '#52c41a' : '#d9d9d9',
}}
/>
<span
style={{
fontSize: '12px',
color: contact.status === 'active' ? '#52c41a' : '#ff4d4f',
fontWeight: 500,
}}
>
{contact.status === 'active' ? 'Active' : 'Inactive'}
</span>
</div>
</div>
{/* Main Content */}
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 12,
flex: 1,
paddingTop: '28px',
}}
>
<div
className="avatar"
style={{
width: 55,
height: 55,
borderRadius: '50%',
backgroundColor:
contact.status === 'active' ? '#52c41a' : '#ff4d4f',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
}}
>
<UserOutlined style={{ color: 'white', fontSize: '25px' }} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
fontWeight: 600,
fontSize: '16px',
marginBottom: '4px',
color: '#262626',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{contact.contact_name || contact.name}
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
fontSize: '14px',
}}
>
<PhoneOutlined style={{ marginRight: 6, color: '#1890ff' }} />
<span
style={{
color: contact.status === 'active' ? '#262626' : '#262626',
}}
>
{contact.contact_phone || contact.phone}
</span>
</div>
</div>
</div>
{/* Edit and Delete Buttons - Bottom Right */}
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
gap: '8px',
marginTop: '8px',
}}
>
<Space>
<Button
type="default"
size="small"
style={{
backgroundColor: '#fff7e6',
borderColor: '#faad14',
color: '#faad14',
padding: '2px 6px',
fontSize: '11px',
height: '24px',
}}
icon={
<EditOutlined style={{ color: '#faad14', fontSize: '11px' }} />
}
onClick={(e) => {
e.stopPropagation();
showEditModal(contact);
}}
>
Edit info
</Button>
<Button
type="default"
danger
size="small"
style={{
backgroundColor: '#fff1f0',
borderColor: 'red',
padding: '2px 6px',
fontSize: '11px',
height: '24px',
}}
icon={<DeleteOutlined style={{ fontSize: '11px' }} />}
onClick={(e) => {
e.stopPropagation();
showDeleteModal(contact);
}}
>
Delete
</Button>
</Space>
</div>
</div>
</div>
</Col>
);
});
const ListContact = memo(function ListContact(props) {
const [activeTab, setActiveTab] = useState('all');
const [filteredContacts, setFilteredContacts] = useState([]);
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
// Default filter object matching plantSection pattern
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
// Fetch contacts from API
const fetchContacts = async () => {
setLoading(true);
try {
// Build search parameters matching database pattern
const searchParams = { ...formDataFilter };
// Add specific filters if not "all"
if (activeTab !== 'all') {
if (activeTab === 'operator') {
searchParams.code = 'operator';
} else if (activeTab === 'gudang') {
searchParams.code = 'gudang';
}
}
const queryParams = new URLSearchParams();
Object.entries(searchParams).forEach(([key, value]) => {
if (value !== '' && value !== null && value !== undefined) {
queryParams.append(key, value);
}
});
const response = await getAllContact(queryParams);
setFilteredContacts(response.data || []);
} catch (error) {
console.error('Error fetching contacts:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Gagal memuat data kontak',
});
} finally {
setLoading(false);
}
};
// Fetch contacts on component mount
useEffect(() => {
const token = localStorage.getItem('token');
if (!token) {
navigate('/signin');
return;
}
fetchContacts();
}, []);
// Refetch when filters change
useEffect(() => {
fetchContacts();
}, [formDataFilter, activeTab]);
// Listen for saved contact data
useEffect(() => {
if (props.lastSavedContact) {
fetchContacts();
}
}, [props.lastSavedContact]);
const getFilteredContacts = () => {
return filteredContacts;
};
const showEditModal = (param) => {
props.setSelectedData(param);
props.setActionMode('edit');
};
const showAddModal = () => {
props.setSelectedData(null);
props.setActionMode('add');
props.setContactType?.(activeTab);
};
const showDeleteModal = (contact) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Kontak "${contact.contact_name || contact.name}" akan dihapus?`,
onConfirm: () => handleDelete(contact),
onCancel: () => props.setSelectedData(null),
});
};
const handleDelete = async (contact) => {
try {
await deleteContact(contact.contact_id || contact.id);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Kontak "${contact.contact_name || contact.name}" berhasil dihapus.`,
});
// Refetch contacts after deletion
fetchContacts();
} catch (error) {
console.error('Error deleting contact:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Gagal menghapus kontak',
});
}
};
return (
<React.Fragment>
<Card>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search by name..."
value={formDataFilter.criteria}
onChange={(e) => {
const value = e.target.value;
setFormDataFilter({ criteria: value });
if (value === '') {
setFormDataFilter(defaultFilter);
}
}}
onSearch={(value) => setFormDataFilter({ criteria: value })}
allowClear={{
clearIcon: (
<span onClick={() => setFormDataFilter(defaultFilter)}>
✕
</span>
),
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
/>
</Col>
<Col>
<Space wrap size="small">
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
},
},
}}
>
<Button
icon={<PlusOutlined />}
onClick={() => showAddModal()}
size="large"
>
Add Contact
</Button>
</ConfigProvider>
</Space>
</Col>
</Row>
</Col>
<Col xs={24} style={{ marginTop: '16px' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '16px',
}}
>
{/* Tabs */}
{/* <Tabs
activeKey={activeTab}
onChange={setActiveTab}
size="large"
items={[
{
key: 'all',
label: 'All',
},
{
key: 'operator',
label: 'Operator',
},
{
key: 'gudang',
label: 'Gudang',
},
]}
/> */}
</div>
{getFilteredContacts().length === 0 ? (
<div style={{ textAlign: 'center', padding: '40px' }}>
<span style={{ color: '#8c8c8c' }}>
{loading ? 'Loading contacts...' : 'No contacts found'}
</span>
</div>
) : (
<Row gutter={[16, 16]}>
{getFilteredContacts().map((contact) => (
<ContactCard
key={contact.contact_id || contact.id}
contact={{
...contact,
id: contact.contact_id || contact.id,
name: contact.contact_name || contact.name,
phone: contact.contact_phone || contact.phone,
status: contact.is_active ? 'active' : 'inactive',
}}
showEditModal={showEditModal}
showDeleteModal={showDeleteModal}
onStatusToggle={fetchContacts}
/>
))}
</Row>
)}
</Col>
</Row>
</Card>
</React.Fragment>
);
});
export default ListContact;

72
src/pages/eventAlarm/IndexEventAlarm.jsx Normal file
View File

@@ -0,0 +1,72 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
import { Form, Typography } from 'antd';
import ListEventAlarm from './component/ListEventAlarm';
import DetailEventAlarm from './component/DetailEventAlarm';
const { Text } = Typography;
const IndexEventAlarm = memo(function IndexEventAlarm() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [form] = Form.useForm();
const [actionMode, setActionMode] = useState('list');
const [selectedData, setSelectedData] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{
title: (
<Text strong style={{ fontSize: '14px' }}>
• Event Alarm
</Text>
),
},
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
useEffect(() => {
if (actionMode === 'preview') {
setIsModalVisible(true);
if (selectedData) {
form.setFieldsValue(selectedData);
}
} else {
setIsModalVisible(false);
form.resetFields();
}
}, [actionMode, selectedData, form]);
const handleCancel = () => {
setActionMode('list');
setSelectedData(null);
form.resetFields();
};
return (
<React.Fragment>
<ListEventAlarm
actionMode={actionMode}
setActionMode={setActionMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
/>
<DetailEventAlarm
visible={isModalVisible}
onCancel={handleCancel}
form={form}
selectedData={selectedData}
/>
</React.Fragment>
);
});
export default IndexEventAlarm;

58
src/pages/eventAlarm/component/DetailEventAlarm.jsx Normal file
View File

@@ -0,0 +1,58 @@
import { memo } from 'react';
import { Modal, Divider, Descriptions } from 'antd';
const DetailEventAlarm = memo(function DetailEventAlarm({ visible, onCancel, selectedData }) {
return (
<Modal
title="Detail Event Alarm"
open={visible}
onCancel={onCancel}
onOk={onCancel}
okText="Tutup"
cancelButtonProps={{ style: { display: 'none' } }}
width={700}
>
{selectedData && (
<div>
<Descriptions bordered column={2}>
<Descriptions.Item label="Tanggal" span={2}>
{selectedData.tanggal}
</Descriptions.Item>
<Descriptions.Item label="Plant Sub Section" span={2}>
{selectedData.plant_sub_section}
</Descriptions.Item>
<Descriptions.Item label="Device">
{selectedData.device}
</Descriptions.Item>
<Descriptions.Item label="Tag">
{selectedData.tag}
</Descriptions.Item>
<Descriptions.Item label="Engineer" span={2}>
{selectedData.engineer}
</Descriptions.Item>
</Descriptions>
<Divider style={{ margin: '16px 0' }} />
{/* Additional Info */}
<div
style={{
marginTop: '16px',
padding: '12px',
backgroundColor: '#f6f9ff',
borderRadius: '6px',
border: '1px solid #d6e4ff',
}}
>
<div style={{ fontSize: '12px', color: '#595959' }}>
<strong>Catatan:</strong> Event alarm ini telah tercatat dalam sistem untuk
monitoring dan analisis lebih lanjut.
</div>
</div>
</div>
)}
</Modal>
);
});
export default DetailEventAlarm;

246
src/pages/eventAlarm/component/ListEventAlarm.jsx Normal file
View File

@@ -0,0 +1,246 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import TableList from '../../../components/Global/TableList';
// Dummy data untuk riwayat alarm
const initialAlarmsData = [
{
alarm_id: 1,
tanggal: '2025-01-15 08:30:00',
plant_sub_section: 'Plant A - Section 1',
device: 'Device 001',
tag: 'TEMP-001',
engineer: 'Pras',
},
{
alarm_id: 2,
tanggal: '2025-01-15 09:15:00',
plant_sub_section: 'Plant B - Section 2',
device: 'Device 002',
tag: 'PRESS-002',
engineer: 'Bagus',
},
{
alarm_id: 3,
tanggal: '2025-01-15 10:00:00',
plant_sub_section: 'Plant A - Section 3',
device: 'Device 003',
tag: 'FLOW-003',
engineer: 'iqbal',
},
{
alarm_id: 4,
tanggal: '2025-01-15 11:45:00',
plant_sub_section: 'Plant C - Section 1',
device: 'Device 004',
tag: 'LEVEL-004',
engineer: 'riski',
},
{
alarm_id: 5,
tanggal: '2025-01-15 13:20:00',
plant_sub_section: 'Plant B - Section 3',
device: 'Device 005',
tag: 'TEMP-005',
engineer: 'anton',
},
{
alarm_id: 6,
tanggal: '2025-01-15 14:00:00',
plant_sub_section: 'Plant A - Section 2',
device: 'Device 006',
tag: 'PRESS-006',
engineer: 'kurniawan',
},
{
alarm_id: 7,
tanggal: '2025-01-15 15:30:00',
plant_sub_section: 'Plant C - Section 2',
device: 'Device 007',
tag: 'FLOW-007',
engineer: 'wawan',
},
];
const ListEventAlarm = memo(function ListEventAlarm(props) {
const columns = [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Tanggal',
dataIndex: 'tanggal',
key: 'tanggal',
width: '15%',
},
{
title: 'Plant Sub Section',
dataIndex: 'plant_sub_section',
key: 'plant_sub_section',
width: '25%',
},
{
title: 'Device',
dataIndex: 'device',
key: 'device',
width: '15%',
},
{
title: 'Tag',
dataIndex: 'tag',
key: 'tag',
width: '15%',
},
{
title: 'Engineer',
dataIndex: 'engineer',
key: 'engineer',
width: '15%',
},
];
const [trigerFilter, setTrigerFilter] = useState(false);
const [alarmsData] = useState(initialAlarmsData);
const defaultFilter = { search: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const navigate = useNavigate();
// Dummy data function to simulate API call
const getAllEventAlarm = async (params) => {
// Simulate API delay
await new Promise((resolve) => setTimeout(resolve, 300));
// Extract URLSearchParams
const searchParam = params.get('search') || '';
const page = parseInt(params.get('page')) || 1;
const limit = parseInt(params.get('limit')) || 10;
console.log('getAllEventAlarm called with:', { searchParam, page, limit });
// Filter by search
let filteredAlarms = alarmsData;
if (searchParam) {
const searchLower = searchParam.toLowerCase();
filteredAlarms = alarmsData.filter(
(alarm) =>
alarm.tanggal.toLowerCase().includes(searchLower) ||
alarm.plant_sub_section.toLowerCase().includes(searchLower) ||
alarm.device.toLowerCase().includes(searchLower) ||
alarm.tag.toLowerCase().includes(searchLower) ||
alarm.engineer.toLowerCase().includes(searchLower)
);
}
// Pagination logic
const totalData = filteredAlarms.length;
const totalPages = Math.ceil(totalData / limit);
const startIndex = (page - 1) * limit;
const endIndex = startIndex + limit;
const paginatedData = filteredAlarms.slice(startIndex, endIndex);
return {
status: 200,
statusCode: 200,
data: {
data: paginatedData,
total: totalData,
paging: {
page: page,
limit: limit,
total: totalData,
page_total: totalPages,
},
},
};
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
if (props.actionMode == 'list') {
setFormDataFilter(defaultFilter);
doFilter();
}
} else {
navigate('/signin');
}
}, [props.actionMode, alarmsData]);
const doFilter = () => {
setTrigerFilter((prev) => !prev);
};
const handleSearch = () => {
setFormDataFilter({ search: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ search: '' });
setTrigerFilter((prev) => !prev);
};
return (
<React.Fragment>
<Card>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
setSearchValue(value);
// Auto search when clearing by backspace/delete
if (value === '') {
setFormDataFilter({ search: '' });
setTrigerFilter((prev) => !prev);
}
}}
onSearch={handleSearch}
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
/>
</Col>
</Row>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllEventAlarm}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}
/>
</Col>
</Row>
</Card>
</React.Fragment>
);
});
export default ListEventAlarm;

38
src/pages/history/alarm/IndexHistoryAlarm.jsx
View File

@@ -1,38 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
import ListHistoryAlarm from './component/ListHistoryAlarm';
const { Text } = Typography;
const IndexHistoryAlarm = memo(function IndexHistoryAlarm() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [selectedData, setSelectedData] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{
title: (
<Text strong style={{ fontSize: '14px' }}>
• History Event
</Text>
),
},
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
return (
<React.Fragment>
<ListHistoryAlarm selectedData={selectedData} setSelectedData={setSelectedData} />
</React.Fragment>
);
});
export default IndexHistoryAlarm;

158
src/pages/history/alarm/component/ListHistoryAlarm.jsx
View File

@@ -1,158 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';
import { getAllHistoryAlarm } from '../../../../api/history-value';
const ListHistoryAlarm = memo(function ListHistoryAlarm(props) {
const columns = [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '15%',
// render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
},
{
title: 'Tag Name',
dataIndex: 'tag_name',
key: 'tag_name',
width: '40%',
},
{
title: 'Value',
dataIndex: 'new_val',
key: 'new_val',
width: '10%',
render: (_, record) => Number(record.new_val).toFixed(4),
},
{
title: 'Threshold',
dataIndex: 'threshold',
key: 'threshold',
width: '10%',
render: (_, record) => {
switch (record.status) {
case 1:
return (
<span>
{record.lim_low} : {record.lim_high}
</span>
);
case 2:
return <span>{`< ${record.lim_low_crash}`}</span>;
case 3:
return (
<span>
{record.lim_low_crash} : {record.lim_low}
</span>
);
case 4:
return (
<span>
{record.lim_high} : {record.lim_high_crash}
</span>
);
case 5:
return <span>{`> ${record.lim_high_crash}`}</span>;
default:
return <span>Undefined</span>;
}
},
},
{
title: 'Condition',
dataIndex: 'condition',
key: 'condition',
width: '20%',
render: (_, record) => (
<Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
{record.condition}
</Button>
),
},
{
title: 'Stat',
dataIndex: 'status',
key: 'status',
width: '5%',
},
];
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ criteria: '' });
setTrigerFilter((prev) => !prev);
};
return (
<React.Fragment>
<Card>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search ..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
setSearchValue(value);
if (value === '') {
handleSearchClear();
}
}}
onSearch={handleSearch}
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
/>
</Col>
</Row>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllHistoryAlarm}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}
/>
</Col>
</Row>
</Card>
</React.Fragment>
);
});
export default ListHistoryAlarm;

38
src/pages/history/event/IndexHistoryEvent.jsx
View File

@@ -1,38 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
import ListHistoryEvent from './component/ListHistoryEvent';
const { Text } = Typography;
const IndexHistoryEvent = memo(function IndexHistoryEvent() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [selectedData, setSelectedData] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
setBreadcrumbItems([
{
title: (
<Text strong style={{ fontSize: '14px' }}>
• History Event
</Text>
),
},
]);
} else {
navigate('/signin');
}
}, [navigate, setBreadcrumbItems]);
return (
<React.Fragment>
<ListHistoryEvent selectedData={selectedData} setSelectedData={setSelectedData} />
</React.Fragment>
);
});
export default IndexHistoryEvent;

117
src/pages/history/event/component/ListHistoryEvent.jsx
View File

@@ -1,117 +0,0 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Row, Col, Card, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';
import { getAllHistoryEvent } from '../../../../api/history-value';
const ListHistoryEvent = memo(function ListHistoryEvent(props) {
const columns = [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Datetime',
dataIndex: 'datetime',
key: 'datetime',
width: '15%',
// render: (_, record) => toAppDateTimezoneFormatter(record.datetime),
},
{
title: 'Tag Name',
dataIndex: 'tagname',
key: 'tagname',
width: '40%',
},
{
title: 'Description',
dataIndex: 'description',
key: 'description',
width: '20%',
render: (_, record) => (
<Button type="text" style={{ backgroundColor: record.status_color, width: '100%' }}>
{record.description}
</Button>
),
},
{
title: 'Stat',
dataIndex: 'status',
key: 'status',
width: '5%',
},
];
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
setFormDataFilter({ criteria: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchValue('');
setFormDataFilter({ criteria: '' });
setTrigerFilter((prev) => !prev);
};
return (
<React.Fragment>
<Card>
<Row>
<Col xs={24}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search ..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
setSearchValue(value);
if (value === '') {
handleSearchClear();
}
}}
onSearch={handleSearch}
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Search
</Button>
}
size="large"
/>
</Col>
</Row>
</Col>
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
<TableList
getData={getAllHistoryEvent}
queryParams={formDataFilter}
columns={columns}
triger={trigerFilter}
/>
</Col>
</Row>
</Card>
</React.Fragment>
);
});
export default ListHistoryEvent;

275
src/pages/history/report/IndexReport.jsx Normal file
View File

@@ -0,0 +1,275 @@
import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography, Table, Card, Select, DatePicker, Button, Row, Col } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import { decryptData } from '../../../components/Global/Formatter';
import dayjs from 'dayjs';
const { Text } = Typography;
// New data structure for tag history
const tagHistoryData = [
{
tag: 'TEMP_SENSOR_1',
color: '#FF6B4A',
history: [
{ timestamp: '2025-10-09 08:00', value: 75 },
{ timestamp: '2025-10-09 08:05', value: 76 },
{ timestamp: '2025-10-09 08:10', value: 75 },
],
},
{
tag: 'GAS_LEAK_SENSOR_1',
color: '#4ECDC4',
history: [
{ timestamp: '2025-10-09 08:00', value: 10 },
{ timestamp: '2025-10-09 08:05', value: 150 },
{ timestamp: '2025-10-09 08:10', value: 12 },
],
},
{
tag: 'PRESSURE_SENSOR_1',
color: '#FFE66D',
history: [
{ timestamp: '2025-10-09 08:00', value: 1.2 },
{ timestamp: '2025-10-09 08:05', value: 1.3 },
{ timestamp: '2025-10-09 08:10', value: 1.2 },
],
},
];
const IndexReport = memo(function IndexReport() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
const [periode, setPeriode] = useState('30 Menit');
const [userRole, setUserRole] = useState(null);
const [roleLevel, setRoleLevel] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
// Get user data and role
let userData = null;
const sessionData = localStorage.getItem('session');
if (sessionData) {
userData = decryptData(sessionData);
} else {
const userRaw = localStorage.getItem('user');
if (userRaw) {
try {
userData = { user: JSON.parse(userRaw) };
} catch (e) {
console.error('Error parsing user data:', e);
}
}
}
if (userData?.user) {
setUserRole(userData.user.role_name);
setRoleLevel(userData.user.role_level);
}
setBreadcrumbItems([
{
title: (
<Text strong style={{ fontSize: '14px' }}>
• History
</Text>
),
},
{
title: (
<Text strong style={{ fontSize: '14px' }}>
Report
</Text>
),
},
]);
} else {
navigate('/signin');
}
}, []);
const handleReset = () => {
setPlantSubSection('Semua Plant');
setStartDate(dayjs('2025-09-30'));
setEndDate(dayjs('2025-10-09'));
setPeriode('30 Menit');
};
// Check if user has permission to view data (all except guest)
const canViewData = userRole && userRole !== 'guest';
// Convert tag history data to table format
const convertToTableData = () => {
const timestamps = {}; // Use an object to collect data per timestamp
tagHistoryData.forEach((tagData) => {
tagData.history.forEach((point) => {
if (!timestamps[point.timestamp]) {
timestamps[point.timestamp] = {
key: point.timestamp,
'Date and Time': point.timestamp,
};
}
timestamps[point.timestamp][tagData.tag] = point.value;
});
});
// Convert the object to an array
return Object.values(timestamps);
};
const tableData = convertToTableData();
// Create dynamic columns based on tags
const tags = tagHistoryData.map((tagData) => tagData.tag);
const columns = [
{
title: 'Date and Time',
dataIndex: 'Date and Time',
key: 'Date and Time',
fixed: 'left',
width: 180,
render: (text) => <Text strong>{text}</Text>,
},
...tags.map((tag) => ({
title: tag,
dataIndex: tag,
key: tag,
align: 'center',
width: 150,
render: (value) => <Text>{value !== undefined ? value : '-'}</Text>,
})),
];
return (
<React.Fragment>
<div style={{ minHeight: 360 }}>
{/* Filter Section */}
<Card className="filter-card">
<div className="filter-header">
<Text strong style={{ fontSize: '14px' }}>
☰ Filter Data
</Text>
</div>
<Row gutter={16} style={{ marginTop: '16px' }}>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>
Plant Sub Section
</Text>
<Select
value={plantSubSection}
onChange={setPlantSubSection}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: 'Semua Plant', label: 'Semua Plant' },
{ value: 'Plant 1', label: 'Plant 1' },
{ value: 'Plant 2', label: 'Plant 2' },
]}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>
Tanggal Mulai
</Text>
<DatePicker
value={startDate}
onChange={setStartDate}
format="DD/MM/YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>
Tanggal Akhir
</Text>
<DatePicker
value={endDate}
onChange={setEndDate}
format="DD/MM/YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
<Select
value={periode}
onChange={setPeriode}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: '5 Menit', label: '5 Menit' },
{ value: '10 Menit', label: '10 Menit' },
{ value: '30 Menit', label: '30 Menit' },
{ value: '1 Jam', label: '1 Jam' },
]}
/>
</div>
</Col>
</Row>
<Row gutter={8} style={{ marginTop: '16px' }}>
<Col>
<Button
type="primary"
danger
icon={<FileTextOutlined />}
disabled={!canViewData}
>
Tampilkan
</Button>
</Col>
<Col>
<Button
onClick={handleReset}
style={{ backgroundColor: '#6c757d', color: 'white' }}
disabled={!canViewData}
>
Reset
</Button>
</Col>
</Row>
</Card>
{/* Table Section */}
{/* {!canViewData ? (
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
<Text style={{ fontSize: '16px', color: '#999' }}>
Anda tidak memiliki akses untuk melihat data report.
<br />
Silakan hubungi administrator untuk mendapatkan akses.
</Text>
</Card>
) : ( */}
<Card style={{ marginTop: '24px' }}>
<div style={{ marginBottom: '16px' }}>
<Text strong style={{ fontSize: '16px' }}>
☰ History Report
</Text>
</div>
<Table
columns={columns}
dataSource={tableData}
pagination={false}
scroll={{ x: 1000 }}
size="middle"
/>
</Card>
{/* )} */}
</div>
</React.Fragment>
);
});
export default IndexReport;

297
src/pages/history/trending/IndexTrending.jsx Normal file
View File

@@ -0,0 +1,297 @@
import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography, Select, DatePicker, Button, Row, Col, Card } from 'antd';
import { ResponsiveLine } from '@nivo/line';
import { FileTextOutlined } from '@ant-design/icons';
import { decryptData } from '../../../components/Global/Formatter';
import dayjs from 'dayjs';
import './trending.css';
const { Text } = Typography;
const IndexTrending = memo(function IndexTrending() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [plantSubSection, setPlantSubSection] = useState('Semua Plant');
const [startDate, setStartDate] = useState(dayjs('2025-09-30'));
const [endDate, setEndDate] = useState(dayjs('2025-10-09'));
const [periode, setPeriode] = useState('10 Menit');
const [userRole, setUserRole] = useState(null);
const [roleLevel, setRoleLevel] = useState(null);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
// Get user data and role
let userData = null;
const sessionData = localStorage.getItem('session');
if (sessionData) {
userData = decryptData(sessionData);
} else {
const userRaw = localStorage.getItem('user');
if (userRaw) {
try {
userData = { user: JSON.parse(userRaw) };
} catch (e) {
console.error('Error parsing user data:', e);
}
}
}
if (userData?.user) {
setUserRole(userData.user.role_name);
setRoleLevel(userData.user.role_level);
}
setBreadcrumbItems([
{
title: (
<Text strong style={{ fontSize: '14px' }}>
• History
</Text>
),
},
{
title: (
<Text strong style={{ fontSize: '14px' }}>
Trending
</Text>
),
},
]);
} else {
navigate('/signin');
}
}, []);
const tagTrendingData = [
{
id: 'TEMP_SENSOR_1',
color: '#FF6B4A',
data: [
{ y: '08:00', x: 75 },
{ y: '08:05', x: 76 },
{ y: '08:10', x: 75 },
{ y: '08:15', x: 77 },
{ y: '08:20', x: 76 },
{ y: '08:25', x: 78 },
{ y: '08:30', x: 79 },
],
},
{
id: 'GAS_LEAK_SENSOR_1',
color: '#4ECDC4',
data: [
{ y: '08:00', x: 10 },
{ y: '08:05', x: 150 },
{ y: '08:10', x: 40 },
{ y: '08:15', x: 20 },
{ y: '08:20', x: 15 },
{ y: '08:25', x: 18 },
{ y: '08:30', x: 25 },
],
},
{
id: 'PRESSURE_SENSOR_1',
color: '#FFE66D',
data: [
{ y: '08:00', x: 1.2 },
{ y: '08:05', x: 1.3 },
{ y: '08:10', x: 1.2 },
{ y: '08:15', x: 1.4 },
{ y: '08:20', x: 1.5 },
{ y: '08:25', x: 1.3 },
{ y: '08:30', x: 1.2 },
],
},
];
const handleReset = () => {
setPlantSubSection('Semua Plant');
setStartDate(dayjs('2025-09-30'));
setEndDate(dayjs('2025-10-09'));
setPeriode('10 Menit');
};
// Check if user has permission to view data (all except guest)
const canViewData = userRole && userRole !== 'guest';
// Check if user can export/filter (administrator, engineer)
const canExportData = userRole && (userRole === 'administrator' || userRole === 'engineer');
return (
<React.Fragment>
{/* Filter Section */}
<Card className="filter-card">
<div className="filter-header">
<Text strong style={{ fontSize: '14px' }}>
☰ Filter Data
</Text>
</div>
<Row gutter={16} style={{ marginTop: '16px' }}>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>
Plant Sub Section
</Text>
<Select
value={plantSubSection}
onChange={setPlantSubSection}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: 'Semua Plant', label: 'Semua Plant' },
{ value: 'Plant 1', label: 'Plant 1' },
{ value: 'Plant 2', label: 'Plant 2' },
]}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Mulai</Text>
<DatePicker
value={startDate}
onChange={setStartDate}
format="DD/MM/YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>Tanggal Akhir</Text>
<DatePicker
value={endDate}
onChange={setEndDate}
format="DD/MM/YYYY"
style={{ width: '100%', marginTop: '4px' }}
/>
</div>
</Col>
<Col xs={24} sm={12} md={6}>
<div className="filter-item">
<Text style={{ fontSize: '12px', color: '#666' }}>Periode</Text>
<Select
value={periode}
onChange={setPeriode}
style={{ width: '100%', marginTop: '4px' }}
options={[
{ value: '5 Menit', label: '5 Menit' },
{ value: '10 Menit', label: '10 Menit' },
{ value: '30 Menit', label: '30 Menit' },
{ value: '1 Jam', label: '1 Jam' },
]}
/>
</div>
</Col>
</Row>
<Row gutter={8} style={{ marginTop: '16px' }}>
<Col>
<Button
type="primary"
danger
icon={<FileTextOutlined />}
disabled={!canViewData}
>
Tampilkan
</Button>
</Col>
<Col>
<Button
onClick={handleReset}
style={{ backgroundColor: '#6c757d', color: 'white' }}
disabled={!canViewData}
>
Reset
</Button>
</Col>
</Row>
</Card>
{/* Charts Section */}
{/* {!canViewData ? (
<Card style={{ marginTop: '24px', textAlign: 'center', padding: '40px' }}>
<Text style={{ fontSize: '16px', color: '#999' }}>
Anda tidak memiliki akses untuk melihat data trending.
<br />
Silakan hubungi administrator untuk mendapatkan akses.
</Text>
</Card>
) : ( */}
<>
<Row gutter={16} style={{ marginTop: '24px' }}>
{/* Line Chart */}
<Col xs={24}>
<Card className="chart-card">
<div className="chart-header">
<Text strong style={{ fontSize: '14px' }}>
☰ Tag Value Trending
</Text>
</div>
<div style={{ height: '500px', marginTop: '16px' }}>
<ResponsiveLine
data={tagTrendingData}
margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
xScale={{
type: 'linear',
min: 'auto',
max: 'auto',
stacked: false,
reverse: false,
}}
yScale={{
type: 'point',
}}
curve="natural"
axisBottom={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Value',
legendOffset: 40,
legendPosition: 'middle',
}}
axisLeft={{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'Time',
legendOffset: -45,
legendPosition: 'middle',
}}
colors={{ datum: 'color' }}
pointSize={6}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 2,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
},
]}
/>
</div>
</Card>
</Col>
</Row>
</>
{/* )} */}
</React.Fragment>
);
});
export default IndexTrending;

0
src/pages/report/trending/trending.css → src/pages/history/trending/trending.css
View File

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
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_COD/AIR_DRYER/AIR_DRYER_A';
const SvgAirDryerA = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgAirDryerA;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
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_COD/AIR_DRYER/AIR_DRYER_B';
const SvgAirDryerB = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgAirDryerB;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
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_COD/AIR_DRYER/AIR_DRYER_C';
const SvgAirDryerC = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgAirDryerC;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/compressorA_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_A';
const SvgCompressorA = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgCompressorA;

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

@@ -1,19 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/compressorB_rev.svg';
const { Text } = Typography;
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_B';
const SvgCompressorB = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgCompressorB;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/compressorC_rev.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_COD/COMPRESSOR/COMPRESSOR_C';
const SvgCompressorC = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgCompressorC;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/overview-airdryer.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_COD/AIR_DRYER/OVERVIEW';
const SvgOverviewAirDryer = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgOverviewAirDryer;

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

@@ -1,21 +0,0 @@
import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
import { setValSvg } from '../../components/Global/MqttConnection';
import SvgTemplate from './SvgTemplate';
import SvgViewer from './SvgViewer';
import filePathSvg from '../../assets/svg/overview-compressor.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const topicMqtt = 'PIU_COD/COMPRESSOR/OVERVIEW';
const SvgOverviewCompressor = () => {
return (
<SvgTemplate>
<SvgViewer filePathSvg={filePathSvg} topicMqtt={topicMqtt} setValSvg={setValSvg} />
</SvgTemplate>
);
};
export default SvgOverviewCompressor;

19
src/pages/home/SvgTemplate.jsx
View File

@@ -1,19 +0,0 @@
const SvgTemplate = ({ children }) => {
return (
<div
style={{
height: '80vh', // penuh 1 layar
width: '80vw', // penuh 1 layar lebar
overflow: 'hidden', // hilangkan scroll
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff', // opsional
}}
>
{children}
</div>
);
};
export default SvgTemplate;

4
src/pages/home/SvgTest.jsx
View File

@@ -2,12 +2,10 @@ import { useEffect, useState } from 'react';
import { Card, Typography, Flex } from 'antd';
// import { ReactSVG } from 'react-svg';
import { setValSvg } from '../../components/Global/MqttConnection';
import { ReactSVG } from 'react-svg';
import filePathSvg from '../../assets/svg/test-new.svg';
const { Text } = Typography;
// const filePathSvg = '/src/assets/svg/test-new.svg';
const filePathSvg = '/svg/test-new.svg';
const topicMqtt = 'PIU_GGCP/Devices/PB';
const SvgTest = () => {

19
src/pages/home/SvgViewer.jsx
View File

@@ -1,19 +0,0 @@
// SvgViewer.jsx
import { ReactSVG } from 'react-svg';
const SvgViewer = ({ filePathSvg, topicMqtt, setValSvg }) => {
return (
<ReactSVG
src={filePathSvg}
beforeInjection={(svg) => {
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
if (setValSvg) setValSvg(topicMqtt, svg);
}}
style={{ width: '100%', height: '100%' }}
/>
);
};
export default SvgViewer;

276
src/pages/jadwalShift/component/DetailJadwalShift.jsx
View File

@@ -1,160 +1,64 @@
import React, { useEffect, useState } from 'react';
import { Modal, Select, Typography, Button, ConfigProvider } from 'antd';
import {
Modal,
Input,
Typography,
Button,
ConfigProvider,
Row,
Col
} from 'antd';
import { NotifOk } from '../../../components/Global/ToastNotif';
import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
import { getAllUser } from '../../../api/user';
import { getAllShift } from '../../../api/master-shift';
import { validateRun } from '../../../Utils/validate';
const { Text } = Typography;
const { Option } = Select;
const DetailJadwalShift = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [employees, setEmployees] = useState([]);
const [shifts, setShifts] = useState([]);
const [loadingData, setLoadingData] = useState(false);
const defaultData = {
id: '',
user_id: null,
shift_id: null,
schedule_id: '',
user_phone: null,
nama_shift: '',
jam_masuk: '',
jam_pulang: '',
username: '',
nama_employee: '',
whatsapp: ''
};
const [formData, setFormData] = useState(defaultData);
const handleSelectChange = (name, value) => {
const updates = { [name]: value };
if (name === 'user_id') {
const selectedEmployee = employees.find((emp) => emp.user_id === value);
updates.user_phone = selectedEmployee?.user_phone || '-';
}
setFormData({
...formData,
...updates,
});
};
const [FormData, setFormData] = useState(defaultData);
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const fetchData = async () => {
setLoadingData(true);
try {
const params = new URLSearchParams({
page: 1,
limit: 100,
});
const [usersResponse, shiftsResponse] = await Promise.all([
getAllUser(params),
getAllShift(params),
]);
const userData = usersResponse?.data || usersResponse || [];
const shiftData = shiftsResponse?.data || shiftsResponse || [];
setEmployees(Array.isArray(userData) ? userData : []);
setShifts(Array.isArray(shiftData) ? shiftData : []);
} catch (error) {
NotifOk({
icon: 'error',
title: 'Gagal',
message: 'Gagal memuat data karyawan atau shift.',
});
} finally {
setLoadingData(false);
}
};
const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'user_id', label: 'Nama Karyawan', required: true },
{ field: 'shift_id', label: 'Shift', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
});
// This is a dummy save function for slicing purposes
setTimeout(() => {
setConfirmLoading(false);
})
)
return;
try {
const payload = {
user_id: formData.user_id,
shift_id: formData.shift_id,
};
// Add schedule_id only if editing and it exists
if (props.actionMode === 'edit' && formData.schedule_id) {
payload.schedule_id = formData.schedule_id;
}
const response =
props.actionMode === 'edit'
? await updateJadwalShift(formData.id, payload)
: await createJadwalShift(payload);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Jadwal berhasil ${action}.`,
message: 'Data dummy berhasil disimpan.',
});
props.setActionMode('list');
} else {
NotifOk({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
NotifOk({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server.',
});
} finally {
setConfirmLoading(false);
}
}, 1000);
};
useEffect(() => {
if (props.showModal) {
fetchData();
}
if (props.selectedData) {
setFormData({
id: props.selectedData.id || '',
user_id: props.selectedData.user_id || null,
shift_id: props.selectedData.shift_id || null,
schedule_id: props.selectedData.schedule_id || '',
user_phone: props.selectedData.whatsapp || props.selectedData.user_phone || null,
});
setFormData(props.selectedData);
} else {
setFormData(defaultData);
}
}, [props.showModal, props.selectedData, props.actionMode]);
}, [props.showModal, props.selectedData]);
// Dummy handler for slicing
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...FormData, [name]: value });
};
return (
<Modal
@@ -167,6 +71,7 @@ const DetailJadwalShift = (props) => {
} Jadwal Shift`}
open={props.showModal}
onCancel={handleCancel}
width={800}
footer={[
<React.Fragment key="modal-footer">
<ConfigProvider
@@ -202,75 +107,64 @@ const DetailJadwalShift = (props) => {
</React.Fragment>,
]}
>
{formData && (
{FormData && (
<div>
<div style={{ marginBottom: 12 }}>
<Row gutter={[16, 16]}>
<Col span={12}>
<Text strong>Nama Karyawan</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.user_id}
onChange={(value) => handleSelectChange('user_id', value)}
placeholder="Pilih karyawan"
disabled={props.readOnly || loadingData}
loading={loadingData}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
style={{ width: '100%' }}
>
{employees
.filter((emp) => emp.user_id != null)
.map((emp) => (
<Option key={`emp-${emp.user_id}`} value={emp.user_id}>
{emp.user_fullname || emp.user_name}
</Option>
))}
</Select>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>No. Telepon</Text>
<div
style={{
padding: '8px 12px',
backgroundColor: '#f5f5f5',
borderRadius: '6px',
marginTop: '4px',
color: formData.user_phone ? '#000' : '#999',
}}
>
{formData.user_phone || 'Pilih karyawan terlebih dahulu'}
</div>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Shift</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
value={formData.shift_id}
onChange={(value) => handleSelectChange('shift_id', value)}
placeholder="Pilih shift"
disabled={props.readOnly || loadingData}
loading={loadingData}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option?.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
style={{ width: '100%' }}
>
{shifts
.filter((shift) => shift.shift_id != null)
.map((shift) => (
<Option key={`shift-${shift.shift_id}`} value={shift.shift_id}>
{shift.shift_name}
</Option>
))}
</Select>
</div>
<Input
name="nama_employee"
value={FormData.nama_employee}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Username</Text>
<Input
name="username"
value={FormData.username}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Nama Shift</Text>
<Input
name="nama_shift"
value={FormData.nama_shift}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Whatsapp</Text>
<Input
name="whatsapp"
value={FormData.whatsapp}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Jam Masuk</Text>
<Input
name="jam_masuk"
value={FormData.jam_masuk}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
<Col span={12}>
<Text strong>Jam Pulang</Text>
<Input
name="jam_pulang"
value={FormData.jam_pulang}
onChange={handleInputChange}
readOnly={props.readOnly}
/>
</Col>
</Row>
</div>
)}
</Modal>

838
src/pages/jadwalShift/component/ListJadwalShift.jsx
View File

@@ -1,168 +1,139 @@
import React, { memo, useState, useEffect } from 'react';
import {
Space,
ConfigProvider,
Button,
Row,
Col,
Card,
Input,
Typography,
Divider,
Checkbox,
Select,
} from 'antd';
import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
import {
PlusOutlined,
SearchOutlined,
EyeOutlined,
EditOutlined,
DeleteOutlined,
EyeOutlined,
SearchOutlined,
} from '@ant-design/icons';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { useNavigate } from 'react-router-dom';
import { getAllJadwalShift, deleteJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
import { getAllShift } from '../../../api/master-shift';
import TableList from '../../../components/Global/TableList';
const { Title, Text } = Typography;
// --- DUMMY DATA (Initial State) --- //
const initialDummyData = [
{
id: 1,
nama_shift: 'Shift Pagi',
jam_masuk: '07:00',
jam_pulang: '15:00',
username: 'd.sanjaya',
nama_employee: 'Dede Sanjaya',
whatsapp: '081234567890'
},
{
id: 2,
nama_shift: 'Shift Siang',
jam_masuk: '15:00',
jam_pulang: '23:00',
username: 'a.wijaya',
nama_employee: 'Andi Wijaya',
whatsapp: '081234567891'
},
{
id: 3,
nama_shift: 'Shift Malam',
jam_masuk: '23:00',
jam_pulang: '07:00',
username: 'b.cahya',
nama_employee: 'Budi Cahya',
whatsapp: '081234567892'
},
];
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'Nama Karyawan',
dataIndex: 'nama_employee',
key: 'nama_employee',
},
{
title: 'Username',
dataIndex: 'username',
key: 'username',
},
{
title: 'Nama Shift',
dataIndex: 'nama_shift',
key: 'nama_shift',
},
{
title: 'Jam Masuk',
dataIndex: 'jam_masuk',
key: 'jam_masuk',
},
{
title: 'Jam Pulang',
dataIndex: 'jam_pulang',
key: 'jam_pulang',
},
{
title: 'Whatsapp',
dataIndex: 'whatsapp',
key: 'whatsapp',
},
{
title: 'Aksi',
key: 'aksi',
align: 'center',
render: (_, record) => (
<Space>
<Button
type="text"
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
onClick={() => showPreviewModal(record)}
/>
<Button
type="text"
icon={<EditOutlined style={{ color: '#faad14' }} />}
onClick={() => showEditModal(record)}
/>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)}
/>
</Space>
),
},
];
const ListJadwalShift = memo(function ListJadwalShift(props) {
const [dataSource, setDataSource] = useState(initialDummyData);
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [groupedSchedules, setGroupedSchedules] = useState({});
const [loading, setLoading] = useState(false);
const [searchValue, setSearchValue] = useState('');
const [selectedSchedules, setSelectedSchedules] = useState([]);
const [editingShift, setEditingShift] = useState(null);
const [pendingChanges, setPendingChanges] = useState({});
const [employeeOptions, setEmployeeOptions] = useState([]);
const [shiftOptions, setShiftOptions] = useState([]);
const navigate = useNavigate();
const formatRelativeTimestamp = (timestamp) => {
const now = new Date();
const date = new Date(timestamp);
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const startOfYesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
let dayString;
if (date >= startOfToday) {
dayString = 'Hari ini';
} else if (date >= startOfYesterday) {
dayString = 'Kemarin';
} else {
dayString = date.toLocaleDateString('id-ID', { day: 'numeric', month: 'long' });
}
const timeString = date
.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false })
.replace('.', ':');
return `${dayString}, ${timeString}`;
};
const fetchData = async () => {
setLoading(true);
try {
const paging = {
page: 1,
limit: 1000,
};
const params = new URLSearchParams({ ...paging, ...formDataFilter });
// Fetch both schedules and shifts data
const [schedulesResponse, shiftsResponse] = await Promise.all([
getAllJadwalShift(params),
getAllShift(params),
]);
// Handle nested data structure from backend
const rawData = schedulesResponse?.data || schedulesResponse || [];
const shifts = shiftsResponse?.data || shiftsResponse || [];
setShiftOptions(shifts);
// Parse backend response structure: [{ shift: { shift_id, shift_name, users: [...] } }]
const grouped = {};
const allUsers = [];
rawData.forEach((item) => {
if (item.shift && item.shift.shift_name) {
const shift = item.shift;
const shiftName = shift.shift_name.toUpperCase().trim();
// Initialize shift group
if (!grouped[shiftName]) {
grouped[shiftName] = {
shift_id: shift.shift_id,
users: [],
lastUpdate: { user: 'N/A', timestamp: '1970-01-01T00:00:00Z' },
};
}
// Process users in this shift
if (shift.users && Array.isArray(shift.users)) {
shift.users.forEach((user) => {
const normalizedUser = {
id: user.user_schedule_id,
user_schedule_id: user.user_schedule_id,
user_id: user.user_id,
shift_id: shift.shift_id,
shift_name: shift.shift_name,
nama_employee: user.user_fullname || user.user_name || 'Unknown',
whatsapp: user.user_phone || '-',
user_fullname: user.user_fullname,
user_name: user.user_name,
user_phone: user.user_phone,
updated_at: user.updated_at,
created_at: user.created_at,
updated_by: user.updated_by,
};
grouped[shiftName].users.push(normalizedUser);
allUsers.push(normalizedUser);
// Update last update timestamp
const currentUpdate = new Date(
user.updated_at || user.created_at || new Date()
// --- DUMMY API --- //
const getDummyData = (queryParams) => {
return new Promise((resolve) => {
const { criteria } = queryParams;
let data = dataSource;
if (criteria) {
data = dataSource.filter(item =>
item.nama_employee.toLowerCase().includes(criteria.toLowerCase()) ||
item.username.toLowerCase().includes(criteria.toLowerCase())
);
const lastUpdate = new Date(grouped[shiftName].lastUpdate.timestamp);
if (currentUpdate > lastUpdate) {
grouped[shiftName].lastUpdate = {
user: user.updated_by || 'N/A',
timestamp: currentUpdate.toISOString(),
};
}
});
setTimeout(() => {
resolve({
status: 200,
data: {
data: data,
paging: {
page: 1,
limit: 10,
total: data.length,
page_total: 1
}
}
});
setEmployeeOptions(allUsers);
// Add empty shifts that don't have users yet
shifts.forEach((shift) => {
const shiftName = shift.shift_name.toUpperCase().trim();
if (!grouped[shiftName]) {
grouped[shiftName] = {
shift_id: shift.shift_id,
users: [],
lastUpdate: { user: 'N/A', timestamp: new Date().toISOString() },
};
}
}, 100);
});
setGroupedSchedules(grouped);
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal Memuat Data',
message: 'Terjadi kesalahan saat memuat data jadwal shift.',
});
} finally {
setLoading(false);
}
};
useEffect(() => {
@@ -175,13 +146,7 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
} else {
navigate('/signin');
}
}, [props.actionMode]);
useEffect(() => {
if (props.actionMode === 'list') {
fetchData();
}
}, [trigerFilter]);
}, [props.actionMode, dataSource]); // Added dataSource to dependency array
const doFilter = () => {
setTrigerFilter((prev) => !prev);
@@ -217,147 +182,31 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Jadwal untuk karyawan "${param.nama_employee}" akan dihapus?`,
message: `Jadwal shift untuk "${param.nama_employee}" akan dihapus?`,
onConfirm: () => handleDelete(param.id),
onCancel: () => props.setSelectedData(null),
});
};
const handleDelete = async (id) => {
const response = await deleteJadwalShift(id);
if (response.statusCode === 200) {
const handleDelete = (id) => {
setDataSource(prevData => prevData.filter(item => item.id !== id));
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: 'Jadwal berhasil dihapus.',
});
doFilter();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal menghapus jadwal.',
});
}
};
const handleShiftEditMode = (shiftName) => {
setEditingShift(shiftName);
setPendingChanges({}); // Clear pending changes
setSelectedSchedules([]); // Clear selections when entering a new edit mode
};
const cancelShiftEditMode = () => {
setEditingShift(null);
setPendingChanges({});
setSelectedSchedules([]);
};
const handleSelectSchedule = (id, isChecked) => {
if (isChecked) {
setSelectedSchedules((prev) => [...prev, id]);
} else {
setSelectedSchedules((prev) => prev.filter((scheduleId) => scheduleId !== id));
}
};
const handleBulkUpdateChange = (scheduleId, field, value) => {
setPendingChanges((prev) => ({
...prev,
[scheduleId]: {
...prev[scheduleId],
[field]: value,
},
}));
};
const handleBulkSave = async () => {
if (Object.keys(pendingChanges).length === 0) {
NotifAlert({
icon: 'info',
title: 'Tidak Ada Perubahan',
message: 'Tidak ada perubahan untuk disimpan.',
});
cancelShiftEditMode();
return;
}
const updatePromises = Object.keys(pendingChanges).map((id) => {
const originalSchedule = groupedSchedules[editingShift].users.find(
(u) => u.id.toString() === id
);
const changes = pendingChanges[id];
// Build payload according to backend schema
const payload = {
user_id: changes.user_id || originalSchedule.user_id,
shift_id: changes.shift_id || originalSchedule.shift_id,
};
if (originalSchedule.schedule_id) {
payload.schedule_id = originalSchedule.schedule_id;
}
return updateJadwalShift(id, payload);
});
try {
await Promise.all(updatePromises);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Semua perubahan berhasil disimpan.',
});
doFilter();
cancelShiftEditMode();
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Gagal menyimpan beberapa perubahan.',
});
}
};
const handleBulkDelete = () => {
if (selectedSchedules.length === 0) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Pilih setidaknya satu jadwal untuk dihapus.',
});
return;
}
NotifConfirmDialog({
icon: 'question',
title: `Konfirmasi Hapus`,
message: `Anda yakin ingin menghapus ${selectedSchedules.length} jadwal yang dipilih?`,
onConfirm: async () => {
await Promise.all(selectedSchedules.map((id) => deleteJadwalShift(id)));
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `${selectedSchedules.length} jadwal berhasil dihapus.`,
});
doFilter();
setEditingShift(null);
setSelectedSchedules([]);
},
message: 'Data Jadwal Shift berhasil dihapus.',
});
doFilter(); // Trigger a re-fetch from the new state
};
return (
<React.Fragment>
<Card>
<Title level={3}>Jadwal Shift</Title>
<Divider />
{/* <Row>
<Row>
<Col xs={24}>
<Row justify="end" align="middle" gutter={[8, 8]}>
<Row justify="space-between" align="middle" gutter={[8, 8]}>
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Cari berdasarkan nama..."
placeholder="Cari berdasarkan nama atau username..."
value={searchValue}
onChange={(e) => {
const value = e.target.value;
@@ -367,7 +216,9 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
}
}}
onSearch={handleSearch}
allowClear
allowClear={{
clearIcon: <span onClick={handleSearchClear}>✕</span>,
}}
enterButton={
<Button
type="primary"
@@ -376,91 +227,16 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
/>
>
Search
</Button>
}
size="large"
/>
</Col>
</Row>
</Col>
</Row> */}
<div style={{ marginTop: '24px' }}>
{loading ? (
<Text>Memuat data...</Text>
) : Object.keys(groupedSchedules).length === 0 ? (
<Text>Tidak ada data jadwal untuk ditampilkan.</Text>
) : (
['SHIFT PAGI', 'SHIFT SORE', 'SHIFT MALAM']
.filter((shiftName) => groupedSchedules[shiftName])
.map((shiftName) => (
<div key={shiftName} style={{ marginBottom: '32px' }}>
{' '}
{/* Container for each shift section */}
<Row
justify="space-between"
align="middle"
style={{
paddingBottom: '12px',
borderBottom: '1px solid #f0f0f0',
marginBottom: '16px',
}}
>
<Col>
<Title level={5} style={{ margin: 0 }}>
{shiftName} (
{groupedSchedules[shiftName].users.length} Karyawan)
</Title>
</Col>
{editingShift === shiftName ? (
<Col>
<Space wrap>
<Button
key="cancel"
onClick={cancelShiftEditMode}
>
Batal
</Button>
<Button
key="delete"
type="primary"
danger
onClick={handleBulkDelete}
disabled={selectedSchedules.length === 0}
>
Hapus Dipilih ({selectedSchedules.length})
</Button>
<Button
key="save"
type="primary"
onClick={handleBulkSave}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Simpan Perubahan
</Button>
</Space>
</Col>
) : (
<Col>
<Space wrap>
<Button
key="add"
type="primary"
icon={<PlusOutlined />}
onClick={() => showAddModal()}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
disabled={editingShift !== null}
>
Tambah Jadwal Shift
</Button>
<Space wrap size="small">
<ConfigProvider
key="edit-config"
theme={{
components: {
Button: {
@@ -472,348 +248,32 @@ const ListJadwalShift = memo(function ListJadwalShift(props) {
}}
>
<Button
icon={<EditOutlined />}
onClick={() => handleShiftEditMode(shiftName)}
disabled={editingShift !== null}
icon={<PlusOutlined />}
onClick={() => showAddModal()}
size="large"
>
Edit
Tambah Data
</Button>
</ConfigProvider>
</Space>
</Col>
)}
</Row>
{/* Horizontal scrollable container for employee cards */}
<div
style={{
display: 'flex',
overflowX: 'auto',
gap: '16px',
paddingTop: '8px',
paddingBottom: '10px',
minWidth: `${4 * (320 + 16)}px`,
}}
>
{groupedSchedules[shiftName].users.length > 0 ? (
groupedSchedules[shiftName].users.map((user) => (
<Card
key={user.id}
hoverable
style={{
width: 320,
height: 240,
flexShrink: 0,
textAlign: 'left',
border: '1px solid #42AAFF',
opacity:
editingShift !== null &&
editingShift !== shiftName
? 0.5
: 1,
pointerEvents:
editingShift !== null &&
editingShift !== shiftName
? 'none'
: 'auto',
}}
styles={{
body: { padding: '16px', height: '100%' },
}}
>
{editingShift === shiftName ? (
// EDIT MODE VIEW
<div
style={{
display: 'flex',
height: '100%',
gap: '12px',
padding: '16px 4px',
}}
>
<div
style={{
display: 'flex',
alignItems: 'flex-start',
paddingTop: '8px',
}}
>
<Checkbox
checked={selectedSchedules.includes(
user.id
)}
onChange={(e) =>
handleSelectSchedule(
user.id,
e.target.checked
)
}
style={{
transform: 'scale(1.4)',
}}
</Col>
<Col xs={24} style={{ marginTop: '16px' }}>
<TableList
mobile
cardColor={'#42AAFF'}
header={'nama_employee'}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
getData={getDummyData}
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}
/>
</div>
<div
style={{
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: '14px',
paddingRight: '4px',
}}
>
<div>
<Text
strong
style={{
fontSize: '11px',
color: '#8c8c8c',
display: 'block',
marginBottom: '6px',
}}
>
KARYAWAN
</Text>
<Select
showSearch
style={{ width: '100%' }}
placeholder="Pilih Karyawan"
optionFilterProp="children"
defaultValue={user.user_id}
onChange={(value) =>
handleBulkUpdateChange(
user.id,
'user_id',
value
)
}
size="large"
>
{employeeOptions.map(
(emp) => (
<Select.Option
key={
emp.user_id ||
emp.id
}
value={
emp.user_id ||
emp.id
}
>
{emp.user_fullname ||
emp.user_name ||
emp.nama_employee}
</Select.Option>
)
)}
</Select>
</div>
<div>
<Text
strong
style={{
fontSize: '11px',
color: '#8c8c8c',
display: 'block',
marginBottom: '6px',
}}
>
NO. TELEPON
</Text>
<Input
value={
pendingChanges[user.id]
?.user_id
? employeeOptions.find(
(emp) =>
emp.user_id ===
pendingChanges[
user
.id
]?.user_id
)?.user_phone ||
user.whatsapp
: user.whatsapp
}
readOnly
style={{
backgroundColor:
'#f5f5f5',
color: '#595959',
cursor: 'not-allowed',
}}
size="large"
/>
</div>
<div>
<Text
strong
style={{
fontSize: '11px',
color: '#8c8c8c',
display: 'block',
marginBottom: '6px',
}}
>
SHIFT
</Text>
<Select
showSearch
style={{ width: '100%' }}
placeholder="Pilih Shift"
optionFilterProp="children"
defaultValue={user.shift_id}
onChange={(value) =>
handleBulkUpdateChange(
user.id,
'shift_id',
value
)
}
size="large"
>
{shiftOptions.map(
(shift) => (
<Select.Option
key={
shift.shift_id
}
value={
shift.shift_id
}
>
{
shift.shift_name
}
</Select.Option>
)
)}
</Select>
</div>
</div>
</div>
) : (
// NORMAL VIEW
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: '100%',
}}
>
<div
style={{
backgroundColor: '#42AAFF',
color: '#FFFFFF',
padding: '9px 12px',
borderRadius: '15px',
marginBottom: '8px',
}}
>
<Text
strong
style={{
fontSize: '18px',
color: '#FFFFFF',
display: 'block',
marginBottom: '4px',
}}
>
{user.nama_employee}
</Text>
<Text
style={{
fontSize: '14px',
color: '#FFFFFF',
}}
>
{user.whatsapp}
</Text>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-end',
}}
>
<Text
style={{
fontSize: '12px',
display: 'block',
lineHeight: '1.4',
}}
>
<Text strong>
Terakhir diperbarui
</Text>{' '}
<br />
{formatRelativeTimestamp(
user.updated_at ||
user.created_at ||
new Date()
)}{' '}
<br />
oleh {user.updated_by || 'N/A'}
</Text>
<Space>
<Button
type="text"
size="small"
icon={<EyeOutlined />}
onClick={() =>
showPreviewModal(user)
}
style={{
color: '#1890ff',
borderColor: '#1890ff',
}}
title="View"
/>
<Button
type="text"
size="small"
icon={<EditOutlined />}
onClick={() =>
showEditModal(user)
}
style={{
color: '#faad14',
borderColor: '#faad14',
}}
title="Edit"
/>
<Button
danger
type="text"
size="small"
icon={<DeleteOutlined />}
onClick={() =>
showDeleteDialog(user)
}
style={{
borderColor: '#ff4d4f',
}}
title="Delete"
/>
</Space>
</div>
</div>
)}
</Card>
))
) : (
<Text type="secondary" style={{ marginLeft: '16px' }}>
Tidak ada karyawan yang dijadwalkan untuk shift ini.
</Text>
)}
</div>
</div>
))
)}
</div>
</Col>
</Row>
</Card>
</React.Fragment>
);

151
src/pages/master/brand/ErrorCode.jsx
View File

@@ -1,151 +0,0 @@
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Typography, Button, Modal, Form, Input, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import TableList from '../../../components/Global/TableList';
// import { getAllErrorCodesByBrand, createErrorCode, updateErrorCode, deleteErrorCode } from '../../api/master-errorcode'; // Mock this later
const { Title } = Typography;
// Mock API functions for now
const mockApi = {
errorCodes: [
{ error_code_id: 1, brand_id: 1, error_code: 'E-001', description: 'Paper Jam' },
{ error_code_id: 2, brand_id: 1, error_code: 'E-002', description: 'Low Ink' },
],
getAllErrorCodesByBrand: async (brandId) => {
return { status: 200, data: { data: mockApi.errorCodes.filter(ec => ec.brand_id == brandId) } };
},
createErrorCode: async (data) => {
const newId = Math.max(...mockApi.errorCodes.map(ec => ec.error_code_id)) + 1;
const newErrorCode = { ...data, error_code_id: newId };
mockApi.errorCodes.push(newErrorCode);
return { statusCode: 201, data: newErrorCode };
},
updateErrorCode: async (id, data) => {
const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
if (index !== -1) {
mockApi.errorCodes[index] = { ...mockApi.errorCodes[index], ...data };
return { statusCode: 200, data: mockApi.errorCodes[index] };
}
return { statusCode: 404, message: 'Not Found' };
},
deleteErrorCode: async (id) => {
const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
if (index !== -1) {
mockApi.errorCodes.splice(index, 1);
return { statusCode: 200 };
}
return { statusCode: 404, message: 'Not Found' };
}
};
const ErrorCodePage = () => {
const { brandId } = useParams();
const navigate = useNavigate();
const [form] = Form.useForm();
const [errorCodes, setErrorCodes] = useState([]);
const [loading, setLoading] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);
const [editingErrorCode, setEditingErrorCode] = useState(null);
const fetchData = async () => {
setLoading(true);
const response = await mockApi.getAllErrorCodesByBrand(brandId);
if (response.status === 200) {
setErrorCodes(response.data.data);
}
setLoading(false);
};
useEffect(() => {
fetchData();
}, [brandId]);
const columns = [
{ title: 'Error Code', dataIndex: 'error_code', key: 'error_code' },
{ title: 'Description', dataIndex: 'description', key: 'description' },
{
title: 'Action',
key: 'action',
render: (_, record) => (
<>
<Button type="link" onClick={() => handleEdit(record)}>Edit</Button>
<Button type="link" danger onClick={() => handleDelete(record.error_code_id)}>Delete</Button>
</>
),
},
];
const handleAdd = () => {
setEditingErrorCode(null);
form.resetFields();
setIsModalVisible(true);
};
const handleEdit = (errorCode) => {
setEditingErrorCode(errorCode);
form.setFieldsValue(errorCode);
setIsModalVisible(true);
};
const handleDelete = async (id) => {
await mockApi.deleteErrorCode(id);
message.success('Error code deleted successfully');
fetchData();
};
const handleModalOk = async () => {
try {
const values = await form.validateFields();
if (editingErrorCode) {
await mockApi.updateErrorCode(editingErrorCode.error_code_id, values);
message.success('Error code updated successfully');
} else {
await mockApi.createErrorCode({ ...values, brand_id: brandId });
message.success('Error code created successfully');
}
setIsModalVisible(false);
fetchData();
} catch (error) {
console.log('Validate Failed:', error);
}
};
return (
<Card>
<Title level={4}>Manage Error Codes for Brand ID: {brandId}</Title>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={handleAdd}
style={{ marginBottom: 16 }}
>
Add Error Code
</Button>
<TableList
columns={columns}
getData={async () => ({ data: { data: errorCodes } })}
triger={brandId}
/>
<Modal
title={editingErrorCode ? 'Edit Error Code' : 'Add Error Code'}
visible={isModalVisible}
onOk={handleModalOk}
onCancel={() => setIsModalVisible(false)}
>
<Form form={form} layout="vertical">
<Form.Item name="error_code" label="Error Code" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="description" label="Description" rules={[{ required: true }]}>
<Input.TextArea />
</Form.Item>
</Form>
</Modal>
</Card>
);
};
export default ErrorCodePage;

59
src/pages/master/brand/FormBrand.jsx
View File

@@ -1,59 +0,0 @@
import React, { useState } from 'react';
import { Form, Input, Button, Typography, Card, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { createBrand } from '../../api/master-brand';
const { Title } = Typography;
const FormBrand = () => {
const [form] = Form.useForm();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const onFinish = async (values) => {
setLoading(true);
try {
const response = await createBrand(values);
if (response.statusCode === 200 || response.statusCode === 201) {
message.success('Brand created successfully!');
const newBrandId = response.data.brand_id;
// Redirect to the error code page for the new brand
navigate(`/master/brand/${newBrandId}/error-codes`);
} else {
message.error(response.message || 'Failed to create brand.');
}
} catch (error) {
message.error('An error occurred while creating the brand.');
console.error(error);
}
setLoading(false);
};
return (
<Card>
<Title level={4}>Add New Brand</Title>
<Form
form={form}
layout="vertical"
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
name="brand_name"
label="Brand Name"
rules={[{ required: true, message: 'Please input the brand name!' }]}
>
<Input placeholder="Enter brand name" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={loading}>
Lanjut ke Error Code
</Button>
</Form.Item>
</Form>
</Card>
);
};
export default FormBrand;

1104
src/pages/master/brandDevice/AddBrandDevice.jsx
View File

File diff suppressed because it is too large Load Diff

1014
src/pages/master/brandDevice/EditBrandDevice.jsx
View File

File diff suppressed because it is too large Load Diff

49
src/pages/master/brandDevice/IndexBrandDevice.jsx
View File

@@ -1,6 +1,8 @@
import React, { memo, useEffect } from 'react';
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ListBrandDevice from './component/ListBrandDevice';
import DetailBrandDevice from './component/DetailBrandDevice';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
@@ -10,6 +12,35 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [actionMode, setActionMode] = useState('list');
const [selectedData, setSelectedData] = useState(null);
const [readOnly, setReadOnly] = useState(false);
const [showModal, setShowmodal] = useState(false);
const setMode = (param) => {
setActionMode(param);
switch (param) {
case 'add':
setReadOnly(false);
setShowmodal(true);
break;
case 'edit':
setReadOnly(false);
setShowmodal(true);
break;
case 'preview':
setReadOnly(true);
setShowmodal(true);
break;
default:
setShowmodal(false);
break;
}
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
@@ -24,7 +55,21 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
return (
<React.Fragment>
<ListBrandDevice />
<ListBrandDevice
actionMode={actionMode}
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
/>
<DetailBrandDevice
setActionMode={setMode}
selectedData={selectedData}
setSelectedData={setSelectedData}
readOnly={readOnly}
showModal={showModal}
actionMode={actionMode}
/>
</React.Fragment>
);
});

766
src/pages/master/brandDevice/ViewBrandDevice.jsx
View File

@@ -1,766 +0,0 @@
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import {
Divider,
Typography,
Button,
Steps,
Form,
Row,
Col,
Card,
Spin,
Tag,
Space,
ConfigProvider,
Empty
} from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { NotifAlert } from '../../../components/Global/ToastNotif';
import { getBrandById, getErrorCodesByBrandId } from '../../../api/master-brand';
import { getFileUrl, getFolderFromFileType } from '../../../api/file-uploads';
import { SendRequest } from '../../../components/Global/ApiRequest';
import ListErrorCode from './component/ListErrorCode';
import BrandForm from './component/BrandForm';
import ErrorCodeForm from './component/ErrorCodeForm';
import SolutionForm from './component/SolutionForm';
import SparepartSelect from './component/SparepartSelect';
const { Title, Text } = Typography;
const { Step } = Steps;
const ViewBrandDevice = () => {
const navigate = useNavigate();
const { id } = useParams();
const location = useLocation();
const { setBreadcrumbItems } = useBreadcrumb();
const [brandForm] = Form.useForm();
const [errorCodeForm] = Form.useForm();
const [solutionForm] = Form.useForm();
const [brandData, setBrandData] = useState(null);
const [errorCodes, setErrorCodes] = useState([]);
const [loading, setLoading] = useState(true);
const [currentStep, setCurrentStep] = useState(0);
const [selectedErrorCode, setSelectedErrorCode] = useState(null);
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [trigerFilter, setTrigerFilter] = useState(false);
const [searchText, setSearchText] = useState('');
const [solutionFields, setSolutionFields] = useState([0]);
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
const [currentSolutionData, setCurrentSolutionData] = useState([]);
const [brandInfo, setBrandInfo] = useState({});
const resetSolutionFields = () => {
if (solutionForm && solutionForm.resetFields) {
solutionForm.resetFields();
solutionForm.setFieldsValue({
solution_items: {
0: {
name: '',
type: 'text',
text: '',
status: true
}
}
});
}
setCurrentSolutionData([]);
};
const getSolutionData = () => {
if (!solutionForm) return [];
try {
const values = solutionForm.getFieldsValue(true);
let solutions = [];
if (values.solution_items) {
if (Array.isArray(values.solution_items)) {
solutions = values.solution_items.filter(Boolean);
} else if (typeof values.solution_items === 'object') {
solutions = Object.values(values.solution_items).filter(Boolean);
}
}
return solutions;
} catch (error) {
return [];
}
};
useEffect(() => {
const savedPhase = location.state?.phase || localStorage.getItem(`brand_device_${id}_last_phase`);
if (savedPhase) {
setCurrentStep(parseInt(savedPhase));
localStorage.removeItem(`brand_device_${id}_last_phase`);
}
}, [location.state, id]);
useEffect(() => {
setBreadcrumbItems([
{
title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
},
{
title: (
<span
style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
onClick={() => navigate('/master/brand-device')}
>
Brand Device
</span>
),
},
{
title: (
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
View Brand Device
</span>
),
},
]);
}, [setBreadcrumbItems, navigate]);
useEffect(() => {
const fetchBrandData = async () => {
const token = localStorage.getItem('token');
if (!token) {
navigate('/signin');
return;
}
try {
setLoading(true);
const response = await getBrandById(id);
if (response && response.statusCode === 200) {
const brandData = response.data;
const brandInfoData = {
brand_code: brandData.brand_code,
brand_name: brandData.brand_name,
brand_type: brandData.brand_type || '',
brand_manufacture: brandData.brand_manufacture || '',
brand_model: brandData.brand_model || '',
is_active: brandData.is_active
};
setBrandInfo(brandInfoData);
setBrandData(brandData);
brandForm.setFieldsValue(brandInfoData);
if (brandData.brand_id) {
try {
const errorCodesResponse = await getErrorCodesByBrandId(id || brandData.brand_id);
if (errorCodesResponse && errorCodesResponse.statusCode === 200) {
const apiErrorData = errorCodesResponse.data || [];
const existingCodes = apiErrorData.map(ec => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing',
solution: ec.solution || [],
spareparts: ec.spareparts || []
}));
setErrorCodes(existingCodes);
}
} catch (error) {
}
}
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: response?.message || 'Failed to fetch brand device data',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Failed to fetch brand device data',
});
} finally {
setLoading(false);
}
};
fetchBrandData();
}, [id, navigate, brandForm]);
useEffect(() => {
if (currentStep === 1 && id) {
setTrigerFilter(prev => !prev);
}
}, [currentStep, id]);
useEffect(() => {
if (currentStep === 1 && errorCodes.length > 0 && !selectedErrorCode) {
handleErrorCodeSelect(errorCodes[0]);
}
}, [currentStep, errorCodes]);
const setSolutionsForExistingRecord = (solutions, targetForm) => {
if (!targetForm || !solutions || solutions.length === 0) {
return;
}
targetForm.resetFields();
const solutionItems = {};
const newSolutionFields = [];
const newSolutionTypes = {};
const newSolutionStatuses = {};
solutions.forEach((solution, index) => {
const fieldKey = index;
newSolutionFields.push(fieldKey);
const isFileType = solution.type_solution && solution.type_solution !== 'text';
newSolutionTypes[fieldKey] = isFileType ? 'file' : 'text';
newSolutionStatuses[fieldKey] = solution.is_active;
let fileObject = null;
if (isFileType && (solution.path_solution || solution.path_document)) {
fileObject = {
uploadPath: solution.path_solution || solution.path_document,
path_solution: solution.path_solution || solution.path_document,
name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File',
type_solution: solution.type_solution,
isExisting: true,
size: 0,
url: solution.path_solution || solution.path_document
};
}
solutionItems[fieldKey] = {
brand_code_solution_id: solution.brand_code_solution_id,
name: solution.solution_name || '',
type: isFileType ? 'file' : 'text',
text: solution.text_solution || '',
status: solution.is_active,
file: fileObject,
fileUpload: fileObject,
path_solution: solution.path_solution || solution.path_document || null,
fileName: solution.file_upload_name || null
};
});
setSolutionFields(newSolutionFields);
setSolutionTypes(newSolutionTypes);
setSolutionStatuses(newSolutionStatuses);
targetForm.resetFields();
setTimeout(() => {
targetForm.setFieldsValue({
solution_items: solutionItems
});
setTimeout(() => {
Object.keys(solutionItems).forEach(key => {
const solution = solutionItems[key];
targetForm.setFieldValue(['solution_items', key, 'name'], solution.name);
targetForm.setFieldValue(['solution_items', key, 'type'], solution.type);
targetForm.setFieldValue(['solution_items', key, 'text'], solution.text);
targetForm.setFieldValue(['solution_items', key, 'file'], solution.file);
targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload);
targetForm.setFieldValue(['solution_items', key, 'status'], solution.status);
targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
});
const finalValues = targetForm.getFieldsValue();
}, 100);
}, 100);
};
const handleErrorCodeSelect = async (errorCode) => {
setSelectedErrorCode(errorCode);
try {
const directResponse = await SendRequest({
method: 'get',
prefix: `error-code/${errorCode.error_code_id}`,
});
const apiResponse = directResponse.data;
if (apiResponse && apiResponse.statusCode === 200 && apiResponse.data) {
const fullErrorCodeData = {
...apiResponse.data,
tempId: `existing_${apiResponse.data.error_code_id}`
};
const formValues = {
error_code: fullErrorCodeData.error_code,
error_code_name: fullErrorCodeData.error_code_name,
error_code_description: fullErrorCodeData.error_code_description || '',
error_code_color: fullErrorCodeData.error_code_color && fullErrorCodeData.error_code_color !== '' ? fullErrorCodeData.error_code_color : '#000000',
status: fullErrorCodeData.is_active,
};
errorCodeForm.setFieldsValue(formValues);
if (fullErrorCodeData.path_icon && fullErrorCodeData.path_icon !== '') {
const iconData = {
name: fullErrorCodeData.path_icon.split('/').pop(),
uploadPath: fullErrorCodeData.path_icon,
};
setErrorCodeIcon(iconData);
} else {
setErrorCodeIcon(null);
}
if (apiResponse.data.solution && apiResponse.data.solution.length > 0) {
setCurrentSolutionData(apiResponse.data.solution);
setSolutionsForExistingRecord(apiResponse.data.solution, solutionForm);
}
if (apiResponse.data.spareparts && apiResponse.data.spareparts.length > 0) {
setSelectedSparepartIds(apiResponse.data.spareparts.map(sp => sp.sparepart_id));
} else {
setSelectedSparepartIds([]);
}
} else {
const basicErrorCodeData = {
...errorCode,
tempId: `existing_${errorCode.error_code_id}`
};
const formValues = {
error_code: basicErrorCodeData.error_code,
error_code_name: basicErrorCodeData.error_code_name,
error_code_description: basicErrorCodeData.error_code_description || '',
error_code_color: basicErrorCodeData.error_code_color && basicErrorCodeData.error_code_color !== '' ? basicErrorCodeData.error_code_color : '#000000',
status: basicErrorCodeData.is_active,
};
errorCodeForm.setFieldsValue(formValues);
if (basicErrorCodeData.path_icon && basicErrorCodeData.path_icon !== '') {
const iconData = {
name: basicErrorCodeData.path_icon.split('/').pop(),
uploadPath: basicErrorCodeData.path_icon,
};
setErrorCodeIcon(iconData);
} else {
setErrorCodeIcon(null);
}
resetSolutionFields();
setSelectedSparepartIds([]);
}
} catch (error) {
const basicErrorCodeData = {
...errorCode,
tempId: `existing_${errorCode.error_code_id}`
};
const formValues = {
error_code: basicErrorCodeData.error_code,
error_code_name: basicErrorCodeData.error_code_name,
error_code_description: basicErrorCodeData.error_code_description || '',
error_code_color: basicErrorCodeData.error_code_color && basicErrorCodeData.error_code_color !== '' ? basicErrorCodeData.error_code_color : '#000000',
status: basicErrorCodeData.is_active,
};
errorCodeForm.setFieldsValue(formValues);
if (basicErrorCodeData.path_icon && basicErrorCodeData.path_icon !== '') {
const iconData = {
name: basicErrorCodeData.path_icon.split('/').pop(),
uploadPath: basicErrorCodeData.path_icon,
};
setErrorCodeIcon(iconData);
} else {
setErrorCodeIcon(null);
}
resetSolutionFields();
setSelectedSparepartIds([]);
}
};
const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
setBrandInfo(allValues);
}, [setBrandInfo]);
const handleSearch = () => {
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchText('');
setTrigerFilter((prev) => !prev);
};
const handleFileView = (fileName) => {
try {
let fileUrl = '';
let actualFileName = '';
const filePath = fileName || '';
if (filePath) {
actualFileName = filePath.split('/').pop();
}
if (actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const folder = getFolderFromFileType(fileExtension);
fileUrl = getFileUrl(folder, actualFileName);
}
if (!fileUrl && filePath) {
fileUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
}
if (fileUrl && actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
const pdfExtensions = ['pdf'];
if (imageExtensions.includes(fileExtension) || pdfExtensions.includes(fileExtension)) {
const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
window.open(viewerUrl, '_blank', 'noopener,noreferrer');
} else {
window.open(fileUrl, '_blank', 'noopener,noreferrer');
}
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'File URL not found'
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Failed to open file preview'
});
}
};
const handleNextStep = () => {
setCurrentStep(1);
};
const renderStepContent = () => {
if (currentStep === 0) {
return (
<div style={{ position: 'relative' }}>
{loading && (
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 10,
borderRadius: '8px',
}}
>
<Spin size="large" />
</div>
)}
<BrandForm
form={brandForm}
onValuesChange={handleBrandFormValuesChange}
isEdit={false}
readOnly={true}
/>
</div>
);
}
if (currentStep === 1) {
return (
<Row gutter={[16, 8]} style={{ minHeight: '70vh' }}>
<Col xs={24} md={8} lg={8}>
<ListErrorCode
brandId={id}
selectedErrorCode={selectedErrorCode}
onErrorCodeSelect={handleErrorCodeSelect}
tempErrorCodes={[]}
trigerFilter={trigerFilter}
searchText={searchText}
onSearchChange={(value) => {
setSearchText(value);
if (value === '') {
setTrigerFilter((prev) => !prev);
}
}}
onSearch={handleSearch}
onSearchClear={handleSearchClear}
isReadOnly={true}
/>
</Col>
<Col xs={24} md={16} lg={16}>
<div style={{
paddingLeft: '12px'
}}>
{selectedErrorCode ? (
<Card
title={
<span style={{
fontSize: '16px',
fontWeight: '600',
color: '#262626',
display: 'flex',
alignItems: 'center',
gap: '8px'
}}>
<span style={{
width: '4px',
height: '20px',
backgroundColor: '#23A55A',
borderRadius: '2px'
}}></span>
Error Code Form
</span>
}
style={{
width: '100%',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
borderRadius: '12px'
}}
styles={{
body: { padding: '16px 24px 12px 24px' },
header: {
padding: '16px 24px',
borderBottom: '1px solid #f0f0f0',
backgroundColor: '#fafafa'
}
}}
>
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
<div style={{
padding: '16px',
border: '1px solid #f0f0f0',
borderRadius: '10px',
backgroundColor: '#ffffff',
marginBottom: '0',
transition: 'all 0.3s ease',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
marginBottom: '12px',
paddingBottom: '8px',
borderBottom: '1px solid #f5f5f5'
}}>
<div style={{
width: '3px',
height: '16px',
backgroundColor: '#23A55A',
borderRadius: '2px'
}}></div>
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
Error Code Details
</h4>
</div>
<ErrorCodeForm
errorCodeForm={errorCodeForm}
isErrorCodeFormReadOnly={true}
errorCodeIcon={errorCodeIcon}
onErrorCodeIconUpload={() => { }}
onErrorCodeIconRemove={() => { }}
isEdit={true}
/>
</div>
<Row gutter={[20, 0]} style={{ marginTop: '0' }}>
<Col xs={24} md={12} lg={12}>
<div style={{
padding: '16px',
border: '1px solid #f0f0f0',
borderRadius: '10px',
backgroundColor: '#ffffff',
transition: 'all 0.3s ease',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
marginBottom: '12px',
paddingBottom: '8px',
borderBottom: '1px solid #f5f5f5'
}}>
<div style={{
width: '3px',
height: '16px',
backgroundColor: '#1890ff',
borderRadius: '2px'
}}></div>
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
Solution
</h4>
</div>
<SolutionForm
solutionForm={solutionForm}
solutionFields={solutionFields}
solutionTypes={solutionTypes}
solutionStatuses={solutionStatuses}
onAddSolutionField={() => { }}
onRemoveSolutionField={() => { }}
onSolutionTypeChange={() => { }}
onSolutionStatusChange={() => { }}
onSolutionFileUpload={() => { }}
onFileView={(fileData) => {
if (fileData && (fileData.url || fileData.uploadPath)) {
window.open(fileData.url || fileData.uploadPath, '_blank');
}
}}
isReadOnly={true}
solutionData={currentSolutionData}
/>
</div>
</Col>
<Col xs={24} md={12} lg={12}>
<div style={{
padding: '16px',
border: '1px solid #f0f0f0',
borderRadius: '10px',
backgroundColor: '#ffffff',
transition: 'all 0.3s ease',
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
marginBottom: '12px',
paddingBottom: '8px',
borderBottom: '1px solid #f5f5f5'
}}>
<div style={{
width: '3px',
height: '16px',
backgroundColor: '#faad14',
borderRadius: '2px'
}}></div>
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
Sparepart Selection
</h4>
</div>
<div style={{
maxHeight: '45vh',
overflow: 'auto',
border: '1px solid #e8e8e8',
borderRadius: '8px',
padding: '12px',
backgroundColor: '#fafafa'
}}>
<SparepartSelect
selectedSparepartIds={selectedSparepartIds}
onSparepartChange={() => { }}
isReadOnly={true}
/>
</div>
</div>
</Col>
</Row>
</div>
</Card>
) : (
<div style={{
height: '100%', display: 'flex', flexDirection: 'column',
justifyContent: 'center', alignItems: 'center',
backgroundColor: '#ffffff', borderRadius: '12px',
border: '1px dashed #d9d9d9', color: '#8c8c8c', padding: '48px'
}}>
<Empty description="Select an error code to view details" />
</div>
)}
</div>
</Col>
</Row>
);
}
return null;
};
return (
<ConfigProvider
theme={{
components: {
Switch: {
colorPrimary: '#23A55A',
colorPrimaryHover: '#23A55A',
},
},
}}
>
<Card>
<Steps current={currentStep} style={{ marginBottom: 24 }}>
<Step title="Brand Device Details" />
<Step title="Error Codes & Solutions" />
</Steps>
{renderStepContent()}
<Divider />
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
{currentStep === 1 && (
<Button
onClick={() => setCurrentStep(0)}
>
Back to Brand Info
</Button>
)}
</div>
<div>
{currentStep === 0 && (
<Button
type="primary"
onClick={handleNextStep}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Error Code
</Button>
)}
{currentStep === 1 && (
<Button
type="primary"
onClick={() => navigate('/master/brand-device')}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Selesai
</Button>
)}
</div>
</div>
</Card>
</ConfigProvider>
);
};
export default ViewBrandDevice;

461
src/pages/master/brandDevice/ViewFilePage.jsx
View File

@@ -1,461 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Button, Typography, Spin, Alert, Space } from 'antd';
import { NotifAlert } from '../../../components/Global/ToastNotif';
import { ArrowLeftOutlined, FilePdfOutlined, FileImageOutlined, DownloadOutlined } from '@ant-design/icons';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { getBrandById } from '../../../api/master-brand';
import {
downloadFile,
getFile,
getFileUrl,
getFolderFromFileType,
} from '../../../api/file-uploads';
const { Title } = Typography;
const ViewFilePage = () => {
const params = useParams();
const { id, fileType, fileName } = params;
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [brandData, setBrandData] = useState(null);
const [actualFileName, setActualFileName] = useState('');
const [pdfBlobUrl, setPdfBlobUrl] = useState(null);
const [pdfLoading, setPdfLoading] = useState(false);
const isFromEdit = window.location.pathname.includes('/edit/');
let fallbackId = id;
let fallbackFileType = fileType;
let fallbackFileName = fileName;
if (!fileName || !fileType || !id) {
const urlParts = window.location.pathname.split('/');
const viewIndex = urlParts.indexOf('view');
const editIndex = urlParts.indexOf('edit');
const actionIndex = viewIndex !== -1 ? viewIndex : editIndex;
if (actionIndex !== -1 && urlParts.length > actionIndex + 4) {
fallbackId = urlParts[actionIndex + 1];
fallbackFileType = urlParts[actionIndex + 3];
fallbackFileName = decodeURIComponent(urlParts[actionIndex + 4]);
}
}
useEffect(() => {
setPdfBlobUrl(null);
setPdfLoading(false);
setError(null);
const fetchData = async () => {
const token = localStorage.getItem('token');
if (!token) {
navigate('/signin');
return;
}
try {
const actualId = fallbackId || id;
const actualFileName = fallbackFileName || fileName;
const brandResponse = await getBrandById(actualId);
if (brandResponse && brandResponse.statusCode === 200) {
setBrandData(brandResponse.data);
}
const decodedFileName = decodeURIComponent(actualFileName);
setActualFileName(decodedFileName);
const fileExtension = decodedFileName.split('.').pop().toLowerCase();
if (fileExtension === 'pdf') {
setPdfLoading(true);
const folder = getFolderFromFileType('pdf');
try {
const blobData = await getFile(folder, decodedFileName);
const blobUrl = window.URL.createObjectURL(blobData);
setPdfBlobUrl(blobUrl);
} catch (pdfError) {
setError('Failed to load PDF file: ' + (pdfError.message || pdfError));
setPdfBlobUrl(null);
} finally {
setPdfLoading(false);
}
}
setLoading(false);
} catch (error) {
setError('Failed to load data');
setLoading(false);
}
};
fetchData();
return () => {
if (pdfBlobUrl) {
window.URL.revokeObjectURL(pdfBlobUrl);
}
};
}, [id, fileName, fileType, navigate]);
useEffect(() => {
if (brandData) {
const breadcrumbItems = [
{ title: <strong style={{ fontSize: '14px' }}>• Master</strong> },
{
title: <strong style={{ fontSize: '14px' }} onClick={() => navigate('/master/brand-device')}>Brand Device</strong>
}
];
if (isFromEdit) {
breadcrumbItems.push({
title: <strong style={{ fontSize: '14px' }} onClick={() => navigate(`/master/brand-device/edit/${fallbackId || id}`)}>Edit Brand Device</strong>
});
} else {
breadcrumbItems.push({
title: <strong style={{ fontSize: '14px' }} onClick={() => navigate(`/master/brand-device/view/${fallbackId || id}`)}>View Brand Device</strong>
});
}
breadcrumbItems.push({ title: <strong style={{ fontSize: '14px' }}>View Document</strong> });
setBreadcrumbItems(breadcrumbItems);
}
}, [brandData, id, isFromEdit, fallbackId, navigate, setBreadcrumbItems]);
const handleBack = () => {
if (isFromEdit) {
const savedPhase = localStorage.getItem(`brand_device_edit_${fallbackId || id}_last_phase`);
if (savedPhase) {
localStorage.removeItem(`brand_device_edit_${fallbackId || id}_last_phase`);
}
const targetPhase = savedPhase ? parseInt(savedPhase) : 1;
navigate(`/master/brand-device/edit/${fallbackId || id}`, {
state: { phase: targetPhase, fromFileViewer: true },
replace: true
});
} else {
navigate(`/master/brand-device/view/${fallbackId || id}`, {
state: { phase: 1 },
replace: true
});
}
};
const renderContent = () => {
if (error) {
return (
<Alert
message="Error Loading File"
description={error}
type="error"
showIcon
style={{ margin: '20px 0' }}
/>
);
}
const displayFileName = actualFileName || 'Loading...';
const fileExtension = displayFileName.split('.').pop().toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
const isPdf = fileExtension === 'pdf';
if (loading) {
return (
<div style={{ textAlign: 'center', padding: '50px' }}>
{isImage ? (
<div style={{
width: '100%',
height: '300px',
backgroundColor: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: '8px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#999'
}}>
<div>
<FileImageOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
<div>Loading image...</div>
</div>
</div>
) : isPdf ? (
<div style={{
width: '100%',
height: '400px',
backgroundColor: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: '8px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#999'
}}>
<div>
<FilePdfOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
<div>Loading PDF...</div>
</div>
</div>
) : (
<div style={{
width: '100%',
height: '200px',
backgroundColor: '#f5f5f5',
border: '1px solid #d9d9d9',
borderRadius: '8px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
color: '#999'
}}>
<div>
<FilePdfOutlined style={{ fontSize: '48px', marginBottom: '16px' }} />
<div>Loading file...</div>
</div>
</div>
)}
</div>
);
}
if (isImage) {
return (
<div style={{ textAlign: 'center', padding: '20px' }}>
<img
src={getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName)}
alt={actualFileName}
style={{
maxWidth: '100%',
maxHeight: '70vh',
objectFit: 'contain',
border: '1px solid #d9d9d9',
borderRadius: '8px'
}}
onError={() => setError('Failed to load image')}
/>
</div>
);
}
if (isPdf) {
const displayUrl = pdfBlobUrl || getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName);
return (
<div style={{ height: '75vh', width: '100%', border: '1px solid #d9d9d9', borderRadius: '8px', overflow: 'hidden' }}>
{pdfBlobUrl ? (
<iframe
src={pdfBlobUrl}
title={actualFileName}
style={{
width: '100%',
height: '100%',
border: 'none',
borderRadius: '8px'
}}
onError={() => {
setError('Failed to load PDF. Please try downloading the file.');
}}
/>
) : pdfLoading ? (
<div style={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: '16px',
backgroundColor: '#f5f5f5'
}}>
<Spin size="large" />
<div style={{ fontSize: '16px', color: '#666', textAlign: 'center' }}>
<div style={{ marginBottom: '8px', fontWeight: 'bold' }}>Memuat PDF...</div>
<div>Silakan tunggu sebentar</div>
</div>
</div>
) : (
<div style={{
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: '16px',
backgroundColor: '#f5f5f5'
}}>
<FilePdfOutlined style={{ fontSize: '48px', color: '#ff4d4f' }} />
<div style={{ fontSize: '16px', color: '#666', textAlign: 'center' }}>
<div style={{ marginBottom: '8px', fontWeight: 'bold' }}>PDF tidak dapat dimuat</div>
<div>Silakan download file untuk melihat kontennya</div>
</div>
<div style={{ display: 'flex', gap: '12px' }}>
<Button
type="primary"
onClick={() => {
const folder = getFolderFromFileType(fallbackFileType || fileType);
downloadFile(folder, actualFileName);
}}
icon={<DownloadOutlined />}
>
Download PDF
</Button>
<Button
onClick={() => {
setPdfLoading(true);
const folder = getFolderFromFileType('pdf');
getFile(folder, actualFileName)
.then(blobData => {
const blobUrl = window.URL.createObjectURL(blobData);
setPdfBlobUrl(blobUrl);
})
.catch(error => {
setError('Failed to load PDF file: ' + (error.message || error));
setPdfBlobUrl(null);
})
.finally(() => {
setPdfLoading(false);
});
}}
>
Coba Lagi
</Button>
</div>
</div>
)}
</div>
);
}
return (
<div style={{ textAlign: 'center', padding: '50px' }}>
<FilePdfOutlined style={{ fontSize: '48px', color: '#ff4d4f', marginBottom: '16px' }} />
<div style={{ fontSize: '16px', marginBottom: '8px' }}>Preview tidak tersedia untuk jenis file ini</div>
<div style={{ color: '#666', marginBottom: '16px' }}>{actualFileName}</div>
<div style={{ marginTop: '16px' }}>
<Button type="primary" href={getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName)} target="_blank" rel="noopener noreferrer">
Buka di Tab Baru
</Button>
</div>
</div>
);
};
const getFileIcon = () => {
const displayFileName = actualFileName || 'Loading...';
const fileExtension = displayFileName.split('.').pop().toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
const isPdf = fileExtension === 'pdf';
if (isImage) return <FileImageOutlined style={{ color: '#1890ff', fontSize: '20px' }} />;
if (isPdf) return <FilePdfOutlined style={{ color: '#ff4d4f', fontSize: '20px' }} />;
return <FilePdfOutlined style={{ color: '#ff4d4f', fontSize: '20px' }} />;
};
const getFileTypeColor = () => {
const displayFileName = actualFileName || 'Loading...';
const fileExtension = displayFileName.split('.').pop().toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
const isPdf = fileExtension === 'pdf';
if (isImage) return '#1890ff';
if (isPdf) return '#ff4d4f';
return '#ff4d4f';
};
return (
<div style={{ padding: '24px', minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
<Card>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
{getFileIcon()}
<div>
<Title level={4} style={{ margin: 0 }}>
{actualFileName || 'Loading...'}
</Title>
{brandData ? (
<div style={{ color: '#666', fontSize: '14px' }}>
Brand: {brandData.brand_name} | ID: {brandData.brand_id}
</div>
) : (
<div style={{ color: '#666', fontSize: '14px' }}>
Loading brand information...
</div>
)}
</div>
</div>
<Space>
<Button
icon={<ArrowLeftOutlined />}
onClick={handleBack}
>
Kembali
</Button>
<Button
type="primary"
onClick={() => {
const folder = getFolderFromFileType(fallbackFileType || fileType);
downloadFile(folder, actualFileName);
}}
disabled={loading}
>
Download File
</Button>
</Space>
</div>
<div style={{ marginBottom: '16px' }}>
<div style={{
display: 'inline-block',
padding: '4px 12px',
backgroundColor: getFileTypeColor() + '15',
border: `1px solid ${getFileTypeColor()}30`,
borderRadius: '16px',
fontSize: '12px',
fontWeight: 'bold',
color: getFileTypeColor()
}}>
{(fallbackFileType || fileType || 'FILE')?.toUpperCase()}
</div>
</div>
<div style={{ position: 'relative' }}>
{loading && (
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(255, 255, 255, 0.6)',
backdropFilter: 'blur(0.8px)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
zIndex: 5,
borderRadius: '8px'
}}>
<Spin size="large" />
</div>
)}
<div style={{ filter: loading ? 'blur(0.5px)' : 'none', transition: 'filter 0.3s ease' }}>
{renderContent()}
</div>
</div>
</Card>
</div>
);
};
export default ViewFilePage;

99
src/pages/master/brandDevice/component/BrandForm.jsx
View File

@@ -1,99 +0,0 @@
import React from 'react';
import { Form, Input, Row, Col, Typography, Switch } from 'antd';
const { Text } = Typography;
const BrandForm = ({
form,
onValuesChange,
isEdit = false,
brandInfo = null,
readOnly = false,
}) => {
const isActive = Form.useWatch('is_active', form) ?? true;
React.useEffect(() => {
if (brandInfo && brandInfo.brand_code) {
form.setFieldsValue({
brand_code: brandInfo.brand_code
});
}
}, [brandInfo, form]);
return (
<div>
<Form
layout="vertical"
form={form}
onValuesChange={onValuesChange}
initialValues={{
brand_name: '',
brand_type: '',
brand_model: '',
brand_manufacture: '',
is_active: true,
}}
>
<Form.Item label="Status">
<div style={{ display: 'flex', alignItems: 'center' }}>
<Form.Item name="is_active" valuePropName="checked" noStyle>
<Switch
style={{ backgroundColor: isActive ? '#23A55A' : '#bfbfbf' }}
disabled={readOnly}
/>
</Form.Item>
<Text style={{ marginLeft: 8 }}>
{isActive ? 'Running' : 'Offline'}
</Text>
</div>
</Form.Item>
<Form.Item label="Brand Code" name="brand_code">
<Input
disabled={true}
style={{
backgroundColor: '#f5f5f5',
cursor: 'not-allowed'
}}
/>
</Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item
label="Brand Name"
name="brand_name"
rules={[{ required: !readOnly, message: 'Brand Name wajib diisi!' }]}
>
<Input disabled={readOnly} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="Manufacturer"
name="brand_manufacture"
rules={[{ required: !readOnly, message: 'Manufacturer wajib diisi!' }]}
>
<Input placeholder="Enter Manufacturer" disabled={readOnly} />
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Brand Type" name="brand_type">
<Input placeholder="Enter Brand Type (Optional)" disabled={readOnly} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Model" name="brand_model">
<Input placeholder="Enter Model (Optional)" disabled={readOnly} />
</Form.Item>
</Col>
</Row>
</Form>
</div>
);
};
export default BrandForm;

397
src/pages/master/brandDevice/component/CustomSparepartCard.jsx
View File

@@ -1,397 +0,0 @@
import React, { useState } from 'react';
import { Card, Typography, Tag, Button, Modal, Row, Col, Space } from 'antd';
import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
const { Text, Title } = Typography;
const CustomSparepartCard = ({
sparepart,
isSelected = false,
isReadOnly = false,
showPreview = true,
showDelete = false,
onPreview,
onDelete,
onCardClick,
loading = false,
size = 'small',
style = {},
}) => {
const [previewModalVisible, setPreviewModalVisible] = useState(false);
const getImageSrc = () => {
if (sparepart.sparepart_foto) {
if (sparepart.sparepart_foto.startsWith('http')) {
return sparepart.sparepart_foto;
} else {
const fileName = sparepart.sparepart_foto.split('/').pop();
if (fileName === 'defaultSparepartImg.jpg') {
return `/assets/defaultSparepartImg.jpg`;
} else {
const token = localStorage.getItem('token');
const baseURL = import.meta.env.VITE_API_SERVER || '';
return `${baseURL}/file-uploads/images/${encodeURIComponent(fileName)}${token ? `?token=${encodeURIComponent(token)}` : ''}`;
}
}
}
return 'https://via.placeholder.com/150';
};
const handlePreview = () => {
if (onPreview) {
onPreview(sparepart);
} else {
setPreviewModalVisible(true);
}
};
const truncateText = (text, maxLength = 15) => {
if (!text) return 'Unnamed';
return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
};
const handleCardClick = () => {
if (!isReadOnly && onCardClick) {
onCardClick(sparepart);
}
};
const getCardActions = () => {
const actions = [];
if (showPreview) {
actions.push(
<Button
key="preview"
type="text"
icon={<EyeOutlined />}
title="Lihat Detail"
style={{ color: '#1890ff' }}
onClick={(e) => {
e.stopPropagation();
handlePreview();
}}
/>
);
}
if (showDelete && !isReadOnly) {
actions.push(
<Button
key="delete"
type="text"
icon={<DeleteOutlined />}
title="Hapus"
style={{ color: '#ff4d4f' }}
onClick={(e) => {
e.stopPropagation();
onDelete?.(sparepart);
}}
/>
);
}
return actions;
};
const getCardStyle = () => {
const baseStyle = {
borderRadius: '12px',
overflow: 'hidden',
border: isSelected ? '2px solid #1890ff' : '1px solid #E0E0E0',
cursor: isReadOnly ? 'default' : 'pointer',
position: 'relative',
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
transition: 'all 0.3s ease'
};
switch (size) {
case 'small':
return {
...baseStyle,
height: '180px',
minHeight: '180px'
};
case 'large':
return {
...baseStyle,
height: '280px',
minHeight: '280px'
};
default:
return {
...baseStyle,
height: '220px',
minHeight: '220px'
};
}
};
return (
<>
<div
style={{
border: '1px solid #f0f0f0',
borderRadius: '6px',
padding: '12px 16px',
marginBottom: '8px',
backgroundColor: 'white',
cursor: onCardClick && !isReadOnly ? 'pointer' : 'default',
transition: 'all 0.2s ease',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}
onClick={handleCardClick}
>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
<Text
strong
style={{
fontSize: '14px',
color: '#262626',
marginRight: '12px'
}}
title={sparepart.sparepart_name || sparepart.name || 'Unnamed'}
>
{truncateText(sparepart.sparepart_name || sparepart.name || 'Unnamed')}
</Text>
<Tag
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
style={{ fontSize: '11px', margin: 0 }}
>
{sparepart.sparepart_stok || 'Not Available'}
</Tag>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Text style={{ fontSize: '12px', color: '#666', marginRight: '4px' }}>
qty:
</Text>
<Text
style={{
fontSize: '12px',
fontWeight: 600,
color: '#262626'
}}
>
{sparepart.sparepart_qty || 0}
</Text>
</div>
</div>
</div>
<Space size="small">
{showPreview && (
<Button
type="text"
icon={<EyeOutlined />}
size="small"
onClick={(e) => {
e.stopPropagation();
handlePreview();
}}
title="Preview"
/>
)}
{showDelete && !isReadOnly && (
<Button
type="text"
icon={<DeleteOutlined />}
size="small"
danger
onClick={(e) => {
e.stopPropagation();
onDelete?.(sparepart);
}}
title="Remove"
/>
)}
</Space>
</div>
<Modal
title="Sparepart Details"
open={previewModalVisible}
onCancel={() => setPreviewModalVisible(false)}
footer={[
<Button key="close" onClick={() => setPreviewModalVisible(false)}>
Close
</Button>
]}
width={800}
centered
styles={{ body: { padding: '24px' } }}
>
<Row gutter={[24, 24]}>
<Col span={10}>
<div style={{ textAlign: 'center' }}>
<div
style={{
backgroundColor: '#f0f0f0',
width: '220px',
height: '220px',
margin: '0 auto 16px',
position: 'relative',
borderRadius: '12px',
overflow: 'hidden',
border: '1px solid #E0E0E0',
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
}}
>
<img
src={getImageSrc()}
alt={sparepart.sparepart_name || 'Sparepart'}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
onError={(e) => {
e.target.src = 'https://via.placeholder.com/220x220/d9d9d9/666666?text=No+Image';
}}
/>
</div>
{sparepart.sparepart_item_type && (
<div style={{ marginBottom: '12px' }}>
<Tag color="blue" style={{ fontSize: '14px', padding: '4px 12px' }}>
{sparepart.sparepart_item_type}
</Tag>
</div>
)}
<div style={{
textAlign: 'left',
background: '#f8f9fa',
padding: '12px',
borderRadius: '8px',
marginTop: '25px'
}}>
<div style={{ marginBottom: '8px' }}>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Stock Status:</Text>
<Tag
color={sparepart.sparepart_stok === 'Available' ? 'green' : 'red'}
style={{ marginLeft: '8px', fontSize: '12px' }}
>
{sparepart.sparepart_stok || 'Not Available'}
</Tag>
</div>
<div>
<Text strong style={{ fontSize: '14px', color: '#262626' }}>Quantity:</Text>
<Text style={{ fontSize: '14px', marginLeft: '8px', fontWeight: 600 }}>
{sparepart.sparepart_qty || 0} {sparepart.sparepart_unit || ''}
</Text>
</div>
</div>
</div>
</Col>
<Col span={14}>
<div>
<Title level={3} style={{ marginBottom: '20px', color: '#262626' }}>
{sparepart.sparepart_name || 'Unnamed'}
</Title>
<div style={{ marginBottom: '24px' }}>
<Row gutter={[16, 12]}>
<Col span={24}>
<div style={{
padding: '12px',
backgroundColor: '#fafafa',
borderRadius: '8px',
border: '1px solid #f0f0f0'
}}>
<Row gutter={16}>
<Col span={8}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Code</Text>
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
{sparepart.sparepart_code || 'N/A'}
</div>
</div>
</Col>
<Col span={8}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Brand</Text>
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
{sparepart.sparepart_merk || '-'}
</div>
</div>
</Col>
<Col span={8}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Unit</Text>
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
{sparepart.sparepart_unit || '-'}
</div>
</div>
</Col>
</Row>
</div>
</Col>
{sparepart.sparepart_model && (
<Col span={24}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Model</Text>
<div style={{ fontSize: '15px', fontWeight: 500, marginTop: '2px' }}>
{sparepart.sparepart_model}
</div>
</div>
</Col>
)}
{sparepart.sparepart_description && (
<Col span={24}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Description</Text>
<div style={{ fontSize: '15px', marginTop: '2px', lineHeight: '1.5' }}>
{sparepart.sparepart_description}
</div>
</div>
</Col>
)}
</Row>
</div>
{sparepart.created_at && (
<div>
<Row gutter={16}>
<Col span={12}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Created</Text>
<div style={{ fontSize: '13px', marginTop: '2px' }}>
{dayjs(sparepart.created_at).format('DD MMM YYYY, HH:mm')}
</div>
</div>
</Col>
<Col span={12}>
<div>
<Text type="secondary" style={{ fontSize: '12px' }}>Last Updated</Text>
<div style={{ fontSize: '13px', marginTop: '2px' }}>
{dayjs(sparepart.updated_at).format('DD MMM YYYY, HH:mm')}
</div>
</div>
</Col>
</Row>
</div>
)}
</div>
</Col>
</Row>
</Modal>
</>
);
};
export default CustomSparepartCard;

310
src/pages/master/brandDevice/component/DetailBrandDevice.jsx Normal file
View File

@@ -0,0 +1,310 @@
import { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
const { Text } = Typography;
const DetailBrandDevice = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const defaultData = {
brand_id: '',
brandName: '',
brandType: '',
manufacturer: '',
model: '',
status: 'Active',
};
const [FormData, setFormData] = useState(defaultData);
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const handleSave = async () => {
setConfirmLoading(true);
// Validasi required fields
if (!FormData.brandName) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Brand Name Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
if (!FormData.brandType) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Type Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
if (!FormData.manufacturer) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Manufacturer Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
if (!FormData.model) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Model Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
if (!FormData.status) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Status Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
const payload = {
brandName: FormData.brandName,
brandType: FormData.brandType,
manufacturer: FormData.manufacturer,
model: FormData.model,
status: FormData.status,
};
try {
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 500));
const response = {
statusCode: FormData.brand_id ? 200 : 201,
data: {
brandName: FormData.brandName,
},
};
console.log('Save Brand Device Response:', response);
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Brand Device "${
response.data?.brandName || FormData.brandName
}" berhasil ${FormData.brand_id ? 'diubah' : 'ditambahkan'}.`,
});
props.setActionMode('list');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
console.error('Save Brand Device Error:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
});
}
setConfirmLoading(false);
};
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...FormData,
[name]: value,
});
};
const handleSelectChange = (name, value) => {
setFormData({
...FormData,
[name]: value,
});
};
const handleStatusToggle = (event) => {
const isChecked = event;
setFormData({
...FormData,
status: isChecked ? true : false,
});
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
if (props.selectedData != null) {
setFormData(props.selectedData);
} else {
setFormData(defaultData);
}
} else {
// navigate('/signin'); // Uncomment if useNavigate is imported
}
}, [props.showModal]);
return (
<Modal
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Brand Device`}
open={props.showModal}
onCancel={handleCancel}
footer={[
<>
<ConfigProvider
theme={{
token: { colorBgContainer: '#E9F6EF' },
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
},
},
}}
>
<Button onClick={handleCancel}>Batal</Button>
</ConfigProvider>
<ConfigProvider
theme={{
token: {
colorBgContainer: '#209652',
},
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
defaultHoverColor: '#FFFFFF',
defaultHoverBorderColor: '#23a55a',
},
},
}}
>
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
)}
</ConfigProvider>
</>,
]}
>
{FormData && (
<div>
<div>
<div>
<Text strong>Status</Text>
</div>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: '8px',
}}
>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor:
FormData.status === true ? '#23A55A' : '#bfbfbf',
}}
checked={FormData.status === true}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>{FormData.status === true ? 'Active' : 'Inactive'}</Text>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
<div hidden>
<Text strong>Brand ID</Text>
<Input
name="brand_id"
value={FormData.brand_id}
onChange={handleInputChange}
disabled
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Brand Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="brandName"
value={FormData.brandName}
onChange={handleInputChange}
placeholder="Enter Brand Name"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Type</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="brandType"
value={FormData.brandType}
onChange={handleInputChange}
placeholder="Enter Type (e.g., PLC)"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Manufacturer</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="manufacturer"
value={FormData.manufacturer}
onChange={handleInputChange}
placeholder="Enter Manufacturer"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Model</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="model"
value={FormData.model}
onChange={handleInputChange}
placeholder="Enter Model"
readOnly={props.readOnly}
/>
</div>
</div>
)}
</Modal>
);
};
export default DetailBrandDevice;

288
src/pages/master/brandDevice/component/ErrorCodeForm.jsx
View File

@@ -1,288 +0,0 @@
import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Typography, ConfigProvider, Card, Button } from 'antd';
import { FileOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons';
import FileUploadHandler from './FileUploadHandler';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { getFileUrl, getFolderFromFileType } from '../../../../api/file-uploads';
const { Text } = Typography;
const ErrorCodeForm = ({
errorCodeForm,
isErrorCodeFormReadOnly = false,
errorCodeIcon,
onErrorCodeIconUpload,
onErrorCodeIconRemove,
isEdit = false,
}) => {
const [currentIcon, setCurrentIcon] = useState(null);
const statusWatch = Form.useWatch('status', errorCodeForm) ?? true;
useEffect(() => {
if (errorCodeIcon && typeof errorCodeIcon === 'object' && Object.keys(errorCodeIcon).length > 0) {
setCurrentIcon(errorCodeIcon);
} else {
setCurrentIcon(null);
}
}, [errorCodeIcon]);
const handleIconRemove = () => {
setCurrentIcon(null);
onErrorCodeIconRemove();
};
const renderIconUpload = () => {
if (currentIcon) {
const displayFileName = currentIcon.name || currentIcon.uploadPath?.split('/').pop() || currentIcon.url?.split('/').pop() || 'Icon File';
return (
<Card
style={{
marginTop: 8,
borderRadius: 8,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e8e8e8'
}}
styles={{ body: { padding: '16px' } }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 48,
height: 48,
borderRadius: 8,
backgroundColor: '#f0f5ff',
flexShrink: 0
}}>
<FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
fontSize: 13,
fontWeight: 600,
color: '#262626',
marginBottom: 4,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}>
{displayFileName}
</div>
<div style={{ fontSize: 12, color: '#8c8c8c' }}>
{currentIcon.size ? `${(currentIcon.size / 1024).toFixed(1)} KB` : 'Icon uploaded'}
</div>
</div>
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
<Button
type="primary"
size="middle"
icon={<EyeOutlined />}
style={{
fontSize: 12,
display: 'flex',
alignItems: 'center',
gap: 4
}}
onClick={() => {
try {
let iconUrl = '';
let actualFileName = '';
const filePath = currentIcon.uploadPath || currentIcon.url || currentIcon.path || '';
const iconDisplayName = currentIcon.name || '';
if (iconDisplayName) {
actualFileName = iconDisplayName;
} else if (filePath) {
actualFileName = filePath.split('/').pop();
}
if (actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const folder = getFolderFromFileType(fileExtension);
iconUrl = getFileUrl(folder, actualFileName);
}
if (!iconUrl && filePath) {
iconUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
}
if (iconUrl && actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
const pdfExtensions = ['pdf'];
if (imageExtensions.includes(fileExtension) || pdfExtensions.includes(fileExtension)) {
const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
window.open(viewerUrl, '_blank', 'noopener,noreferrer');
} else {
window.open(iconUrl, '_blank', 'noopener,noreferrer');
}
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: `File URL not found. FileName: ${actualFileName}, FilePath: ${filePath}`
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: `Failed to open file preview: ${error.message}`
});
}
}}
/>
<Button
danger
size="middle"
icon={<DeleteOutlined />}
style={{
fontSize: 12,
display: 'flex',
alignItems: 'center',
}}
onClick={handleIconRemove}
disabled={isErrorCodeFormReadOnly}
/>
</div>
</div>
</Card>
);
} else {
return (
<FileUploadHandler
type="error_code"
existingFile={null}
accept="image/*"
onFileUpload={(fileData) => {
setCurrentIcon(fileData);
onErrorCodeIconUpload(fileData);
}}
onFileRemove={handleIconRemove}
buttonText="Upload Icon"
buttonStyle={{
width: '100%',
borderColor: '#23A55A',
color: '#23A55A',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px'
}}
uploadText="Upload error code icon"
disabled={isErrorCodeFormReadOnly}
/>
);
}
};
return (
<ConfigProvider
theme={{
components: {
Switch: {
colorPrimary: '#23A55A',
colorPrimaryHover: '#23A55A',
},
},
}}
>
<Form
form={errorCodeForm}
layout="vertical"
initialValues={{
status: true,
error_code_color: '#000000'
}}
>
{/* Header bar with color picker, icon upload, and status toggle */}
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
marginBottom: '16px',
gap: '16px'
}}>
{/* Color picker on left */}
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<Form.Item
name="error_code_color"
noStyle
getValueFromEvent={(e) => e.target.value}
getValueProps={(value) => ({ value: value || '#000000' })}
>
<input
type="color"
style={{
width: '120px',
height: '40px',
border: '1px solid #d9d9d9',
borderRadius: 4,
cursor: isErrorCodeFormReadOnly ? 'not-allowed' : 'pointer',
}}
disabled={isErrorCodeFormReadOnly}
/>
</Form.Item>
{/* Icon upload beside color picker */}
<div style={{ flex: 1, maxWidth: '300px' }}>
{renderIconUpload()}
</div>
</div>
{/* Status toggle on right */}
<div style={{ display: 'flex', alignItems: 'center' }}>
<Form.Item name="status" valuePropName="checked" noStyle>
<Switch
disabled={isErrorCodeFormReadOnly}
/>
</Form.Item>
<Text style={{ marginLeft: 8 }}>
{statusWatch ? 'Active' : 'Inactive'}
</Text>
</div>
</div>
{/* Error Code and Error Name in one row with 1/3 and 2/3 ratio */}
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
<Form.Item
label="Error Code"
name="error_code"
rules={[{ required: true, message: 'Error code wajib diisi!' }]}
style={{ flex: 1, marginBottom: 0, maxWidth: '33.33%' }}
>
<Input
placeholder="Enter error code"
disabled={isErrorCodeFormReadOnly}
/>
</Form.Item>
<Form.Item
label="Error Name"
name="error_code_name"
rules={[{ required: !isErrorCodeFormReadOnly, message: 'Error name wajib diisi!' }]}
style={{ flex: 2, marginBottom: 0, maxWidth: '66.67%' }}
>
<Input placeholder="Enter error name" disabled={isErrorCodeFormReadOnly} />
</Form.Item>
</div>
<Form.Item label="Description" name="error_code_description">
<Input.TextArea
placeholder="Enter error description"
rows={3}
disabled={isErrorCodeFormReadOnly}
/>
</Form.Item>
</Form>
</ConfigProvider>
);
};
export default ErrorCodeForm;

421
src/pages/master/brandDevice/component/FileUploadHandler.jsx
View File

@@ -1,421 +0,0 @@
import React, { useState } from 'react';
import { Upload, Modal, Button, Typography, Space, Image } from 'antd';
import { UploadOutlined, EyeOutlined, DeleteOutlined, FileOutlined } from '@ant-design/icons';
import { NotifOk, NotifAlert } from '../../../../components/Global/ToastNotif';
import { uploadFile, getFolderFromFileType, getFileUrl, getFileType } from '../../../../api/file-uploads';
const { Text } = Typography;
const FileUploadHandler = ({
type = 'solution',
maxCount = 1,
accept = '.pdf,.jpg,.jpeg,.png,.gif',
disabled = false,
fileList = [],
onFileUpload,
onFileRemove,
existingFile = null,
clearSignal = null,
debugProps = {},
uploadText = 'Click or drag file to this area to upload',
uploadHint = 'Support for PDF and image files only',
buttonText = 'Upload File',
buttonType = 'default',
containerStyle = {},
buttonStyle = {},
showPreview = true
}) => {
const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [isUploading, setIsUploading] = useState(false);
const [uploadedFile, setUploadedFile] = useState(null);
React.useEffect(() => {
if (clearSignal !== null && clearSignal > 0) {
setUploadedFile(null);
}
}, [clearSignal, debugProps]);
const getBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
const handlePreview = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage(file.url || file.preview);
setPreviewOpen(true);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
};
const validateFile = (file) => {
const isAllowedType = [
'application/pdf',
'image/jpeg',
'image/png',
'image/gif',
].includes(file.type);
if (!isAllowedType) {
NotifAlert({
icon: 'error',
title: 'Error',
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
});
return false;
}
return true;
};
const handleFileUpload = async (file) => {
if (isUploading) {
return false;
}
if (!validateFile(file)) {
return false;
}
try {
setIsUploading(true);
const fileExtension = file.name.split('.').pop().toLowerCase();
const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
const fileType = isImage ? 'image' : 'pdf';
const folder = getFolderFromFileType(fileType);
const uploadResponse = await uploadFile(file, folder);
const isSuccess = uploadResponse && (
uploadResponse.statusCode === 200 ||
uploadResponse.statusCode === 201
);
if (!isSuccess) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: uploadResponse?.message || `Gagal mengupload ${file.name}`,
});
setIsUploading(false);
return false;
}
let actualPath = '';
if (uploadResponse && typeof uploadResponse === 'object') {
if (uploadResponse.data && uploadResponse.data.path_document) {
actualPath = uploadResponse.data.path_document;
}
else if (uploadResponse.path_document) {
actualPath = uploadResponse.path_document;
}
else if (uploadResponse.data && uploadResponse.data.path_solution) {
actualPath = uploadResponse.data.path_solution;
}
else if (uploadResponse.data && typeof uploadResponse.data === 'object') {
if (uploadResponse.data.file_url) {
actualPath = uploadResponse.data.file_url;
} else if (uploadResponse.data.url) {
actualPath = uploadResponse.data.url;
} else if (uploadResponse.data.path) {
actualPath = uploadResponse.data.path;
} else if (uploadResponse.data.location) {
actualPath = uploadResponse.data.location;
} else if (uploadResponse.data.filePath) {
actualPath = uploadResponse.data.filePath;
} else if (uploadResponse.data.file_path) {
actualPath = uploadResponse.data.file_path;
} else if (uploadResponse.data.publicUrl) {
actualPath = uploadResponse.data.publicUrl;
} else if (uploadResponse.data.public_url) {
actualPath = uploadResponse.data.public_url;
}
}
else if (uploadResponse && typeof uploadResponse === 'string') {
actualPath = uploadResponse;
}
}
if (actualPath) {
let fileObject;
if (type === 'error_code') {
fileObject = {
name: file.name,
path_icon: actualPath,
uploadPath: actualPath,
url: actualPath,
size: file.size,
type: file.type,
fileExtension
};
} else {
fileObject = {
name: file.name,
path_solution: actualPath,
uploadPath: actualPath,
type_solution: fileType,
size: file.size,
type: file.type
};
}
onFileUpload(fileObject);
setUploadedFile(fileObject);
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `${file.name} berhasil diupload!`
});
setIsUploading(false);
return false;
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: `Gagal mengupload ${file.name}. Tidak dapat menemukan path file dalam response.`,
});
setIsUploading(false);
return false;
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
});
setIsUploading(false);
return false;
}
};
const handleFileChange = ({ fileList }) => {
if (fileList && fileList.length > 0 && fileList[0] && fileList[0].originFileObj) {
handleFileUpload(fileList[0].originFileObj);
}
};
const handleRemove = () => {
if (existingFile && onFileRemove) {
onFileRemove(existingFile);
} else if (onFileRemove) {
onFileRemove(null);
}
};
const renderExistingFile = () => {
const fileToShow = existingFile || uploadedFile;
if (!fileToShow) {
return null;
}
const filePath = fileToShow.uploadPath || fileToShow.url || fileToShow.path_icon || fileToShow.path_solution;
const fileName = fileToShow.name || filePath?.split('/').pop() || 'Unknown file';
const fileType = getFileType(fileName);
const isImage = fileType === 'image';
const handlePreview = () => {
if (!showPreview || !filePath) return;
if (isImage) {
const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
const filename = filePath.split('/').pop();
const imageUrl = getFileUrl(folder, filename);
if (imageUrl) {
setPreviewImage(imageUrl);
setPreviewOpen(true);
setPreviewTitle(fileName);
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Cannot generate image preview URL',
});
}
} else {
const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
const filename = filePath.split('/').pop();
const fileUrl = getFileUrl(folder, filename);
if (fileUrl) {
window.open(fileUrl, '_blank', 'noopener,noreferrer');
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Cannot generate file preview URL',
});
}
}
};
const getThumbnailUrl = () => {
if (!isImage || !filePath) return null;
const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
const filename = filePath.split('/').pop();
return getFileUrl(folder, filename);
};
const thumbnailUrl = getThumbnailUrl();
return (
<div style={{ marginTop: 12 }}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
padding: '8px',
border: '1px solid #d9d9d9',
borderRadius: 4,
backgroundColor: '#fafafa'
}}>
{isImage ? (
<img
src={thumbnailUrl || filePath}
alt={fileName}
style={{
width: 50,
height: 50,
objectFit: 'cover',
border: '1px solid #d9d9d9',
borderRadius: 4,
cursor: showPreview ? 'pointer' : 'default'
}}
onClick={handlePreview}
onError={(e) => {
e.target.src = filePath;
}}
/>
) : (
<div
style={{
width: 50,
height: 50,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid #d9d9d9',
borderRadius: 4,
backgroundColor: '#f5f5f5',
cursor: showPreview ? 'pointer' : 'default'
}}
onClick={handlePreview}
>
<FileOutlined style={{ fontSize: 24, color: '#666' }} />
</div>
)}
<div style={{ flex: 1 }}>
<Text style={{ fontSize: 12, fontWeight: 500 }}>
{fileName}
</Text>
<br />
<Text type="secondary" style={{ fontSize: 10 }}>
{fileType === 'image' ? 'Image' : fileType === 'pdf' ? 'PDF' : 'File'}
{fileToShow.size && ` • ${(fileToShow.size / 1024).toFixed(1)} KB`}
</Text>
</div>
<div style={{ display: 'flex', gap: 4 }}>
{showPreview && (
<Button
type="text"
icon={<EyeOutlined />}
size="small"
onClick={handlePreview}
title={isImage ? "Preview Image" : "Open File"}
/>
)}
<Button
type="text"
danger
icon={<DeleteOutlined />}
size="small"
onClick={handleRemove}
title="Remove File"
/>
</div>
</div>
</div>
);
};
const uploadProps = {
name: 'file',
multiple: false,
accept,
disabled: disabled || isUploading,
fileList: [],
beforeUpload: () => false,
onChange: handleFileChange,
onPreview: handlePreview,
maxCount,
};
return (
<div style={{ ...containerStyle }}>
{!existingFile && (
<Upload {...uploadProps}>
{type === 'drag' ? (
<Upload.Dragger>
<p className="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p className="ant-upload-text">{uploadText}</p>
<p className="ant-upload-hint">{uploadHint}</p>
</Upload.Dragger>
) : (
<Button
type={buttonType}
icon={<UploadOutlined />}
loading={isUploading}
style={{ ...buttonStyle }}
>
{isUploading ? 'Uploading...' : buttonText}
</Button>
)}
</Upload>
)}
{showPreview && (
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={() => setPreviewOpen(false)}
width={600}
style={{ top: 100 }}
>
{previewImage && (
<img
alt={previewTitle}
style={{ width: '100%' }}
src={previewImage}
/>
)}
</Modal>
)}
</div>
);
};
export default FileUploadHandler;

212
src/pages/master/brandDevice/component/ListBrandDevice.jsx
View File

@@ -1,5 +1,5 @@
import React, { memo, useState, useEffect } from 'react';
import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Spin } from 'antd';
import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag } from 'antd';
import {
PlusOutlined,
EditOutlined,
@@ -7,10 +7,45 @@ import {
SearchOutlined,
EyeOutlined,
} from '@ant-design/icons';
import { NotifAlert, NotifConfirmDialog, NotifOk } from '../../../../components/Global/ToastNotif';
import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
import { useNavigate } from 'react-router-dom';
import TableList from '../../../../components/Global/TableList';
import { getAllBrands, deleteBrand } from '../../../../api/master-brand';
// Dummy data
const initialBrandDeviceData = [
{
brand_id: 1,
brandName: 'Siemens S7-1200',
brandType: 'PLC',
manufacturer: 'Siemens',
model: 'S7-1200',
status: 'Active',
},
{
brand_id: 2,
brandName: 'Allen Bradley CompactLogix',
brandType: 'PLC',
manufacturer: 'Rockwell Automation',
model: 'CompactLogix 5370',
status: 'Active',
},
{
brand_id: 3,
brandName: 'Schneider Modicon M580',
brandType: 'PLC',
manufacturer: 'Schneider Electric',
model: 'M580',
status: 'Active',
},
{
brand_id: 4,
brandName: 'Mitsubishi FX5U',
brandType: 'PLC',
manufacturer: 'Mitsubishi',
model: 'FX5U',
status: 'Inactive',
},
];
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
@@ -22,38 +57,50 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
},
{
title: 'Brand Device ',
dataIndex: 'brand_name',
key: 'brand_name',
dataIndex: 'brandName',
key: 'brandName',
width: '20%',
},
{
title: 'Type',
dataIndex: 'brandType',
key: 'brandType',
width: '15%',
},
{
title: 'Manufacturer',
dataIndex: 'brand_manufacture',
key: 'brand_manufacture',
dataIndex: 'manufacturer',
key: 'manufacturer',
width: '20%',
},
{
title: 'Status',
dataIndex: 'is_active',
key: 'is_active',
title: 'model',
dataIndex: 'model',
key: 'model',
width: '15%',
},
{
title: 'status',
dataIndex: 'status',
key: 'status',
width: '10%',
align: 'center',
render: (_, { is_active }) => (
render: (_, { status }) => (
<>
{is_active === true ? (
{status === 'Active' ? (
<Tag color={'green'} key={'status'}>
Running
Active
</Tag>
) : (
<Tag color={'red'} key={'status'}>
Offline
Inactive
</Tag>
)}
</>
),
},
{
title: 'Action',
title: 'Aksi',
key: 'action',
align: 'center',
width: '15%',
@@ -90,87 +137,131 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
const ListBrandDevice = memo(function ListBrandDevice(props) {
const [trigerFilter, setTrigerFilter] = useState(false);
const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData);
const defaultFilter = { criteria: '' };
const defaultFilter = { search: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
const [searchText, setSearchText] = useState('');
const [searchValue, setSearchValue] = useState('');
const navigate = useNavigate();
// Dummy data function to simulate API call - now uses state
const getAllBrandDevice = async (params) => {
// Simulate API delay
await new Promise((resolve) => setTimeout(resolve, 300));
// Extract URLSearchParams - TableList sends URLSearchParams object
const searchParam = params.get('search') || '';
const page = parseInt(params.get('page')) || 1;
const limit = parseInt(params.get('limit')) || 10;
console.log('getAllBrandDevice called with:', { searchParam, page, limit });
// Filter by search
let filteredBrandDevices = brandDeviceData;
if (searchParam) {
const searchLower = searchParam.toLowerCase();
filteredBrandDevices = brandDeviceData.filter(
(brand) =>
brand.brandName.toLowerCase().includes(searchLower) ||
brand.brandType.toLowerCase().includes(searchLower) ||
brand.manufacturer.toLowerCase().includes(searchLower) ||
brand.model.toLowerCase().includes(searchLower)
);
}
// Pagination logic
const totalData = filteredBrandDevices.length;
const totalPages = Math.ceil(totalData / limit);
const startIndex = (page - 1) * limit;
const endIndex = startIndex + limit;
const paginatedData = filteredBrandDevices.slice(startIndex, endIndex);
// Return structure that matches TableList expectation
return {
status: 200,
statusCode: 200,
data: {
data: paginatedData,
total: totalData,
paging: {
page: page,
limit: limit,
total: totalData,
page_total: totalPages,
},
},
};
};
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
if (props.actionMode === 'list') {
if (props.actionMode == 'list') {
setFormDataFilter(defaultFilter);
doFilter();
}
} else {
navigate('/signin');
}
}, [props.actionMode, navigate]);
}, [props.actionMode, brandDeviceData]);
const doFilter = () => {
setTrigerFilter((prev) => !prev);
};
const handleSearch = () => {
setFormDataFilter({ criteria: searchText });
setFormDataFilter({ search: searchValue });
setTrigerFilter((prev) => !prev);
};
const handleSearchClear = () => {
setSearchText('');
setFormDataFilter({ criteria: '' });
setSearchValue('');
setFormDataFilter({ search: '' });
setTrigerFilter((prev) => !prev);
};
const showPreviewModal = (param) => {
navigate(`/master/brand-device/view/${param.brand_id}`);
props.setSelectedData(param);
props.setActionMode('preview');
};
const showEditModal = (param = null) => {
if (param) {
navigate(`/master/brand-device/edit/${param.brand_id}`);
} else {
navigate('/master/brand-device/add');
}
props.setSelectedData(param);
props.setActionMode('edit');
};
const showAddModal = (param = null) => {
props.setSelectedData(param);
props.setActionMode('add');
};
const showDeleteDialog = (param) => {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi',
message: 'Apakah anda yakin hapus data "' + param.brand_name + '" ?',
onConfirm: () => handleDelete(param.brand_id, param.brand_name),
onCancel: () => { },
message: 'Apakah anda yakin hapus data "' + param.brandName + '" ?',
onConfirm: () => handleDelete(param.brand_id),
onCancel: () => props.setSelectedData(null),
});
};
const handleDelete = async (brand_id, brand_name) => {
try {
const response = await deleteBrand(brand_id);
const handleDelete = async (brand_id) => {
// Find brand name before deleting
const brandToDelete = brandDeviceData.find((brand) => brand.brand_id === brand_id);
if (response && response.statusCode === 200) {
NotifOk({
// Simulate delete API call
await new Promise((resolve) => setTimeout(resolve, 300));
// Remove from state
const updatedBrands = brandDeviceData.filter((brand) => brand.brand_id !== brand_id);
setBrandDeviceData(updatedBrands);
NotifAlert({
icon: 'success',
title: 'Berhasil',
message: `Brand ${brand_name} deleted successfully.`,
message: `Data Brand Device "${brandToDelete?.brandName || ''}" berhasil dihapus.`,
});
doFilter();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal menghapus Data Brand Device',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Gagal menghapus Data Brand Device',
});
}
};
return (
@@ -182,12 +273,13 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
<Col xs={24} sm={24} md={12} lg={12}>
<Input.Search
placeholder="Search brand device..."
value={searchText}
value={searchValue}
onChange={(e) => {
const value = e.target.value;
setSearchText(value);
setSearchValue(value);
// Auto search when clearing by backspace/delete
if (value === '') {
setFormDataFilter({ criteria: '' });
setFormDataFilter({ search: '' });
setTrigerFilter((prev) => !prev);
}
}}
@@ -228,12 +320,10 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
>
<Button
icon={<PlusOutlined />}
onClick={() => {
navigate('/master/brand-device/add');
}}
onClick={() => showAddModal()}
size="large"
>
Add data
Tambah Brand Device
</Button>
</ConfigProvider>
</Space>
@@ -244,11 +334,11 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
<TableList
mobile
cardColor={'#42AAFF'}
header={'brand_name'}
header={'tag_name'}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
getData={getAllBrands}
getData={getAllBrandDevice}
queryParams={formDataFilter}
columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
triger={trigerFilter}

315
src/pages/master/brandDevice/component/ListErrorCode.jsx
View File

@@ -1,315 +0,0 @@
import React, { useState, useEffect, useMemo } from 'react';
import { Card, Input, Button, Row, Col, Empty } from 'antd';
import { PlusOutlined, SearchOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import { getErrorCodesByBrandId, deleteErrorCode } from '../../../../api/master-brand';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
const ListErrorCode = ({
brandId,
selectedErrorCode,
onErrorCodeSelect,
onAddNew,
tempErrorCodes = [],
trigerFilter,
searchText,
onSearchChange,
onSearch,
onSearchClear,
isReadOnly = false,
errorCodes: propErrorCodes = null
}) => {
const [errorCodes, setErrorCodes] = useState([]);
const [loading, setLoading] = useState(false);
const [pagination, setPagination] = useState({
current_page: 1,
current_limit: 15,
total_limit: 0,
total_page: 0,
});
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 15;
const queryParams = useMemo(() => {
const params = new URLSearchParams();
params.set('page', currentPage.toString());
params.set('limit', pageSize.toString());
if (searchText) {
params.set('criteria', searchText);
}
return params;
}, [searchText, currentPage, pageSize]);
const fetchErrorCodes = async () => {
if (!brandId) {
setErrorCodes([]);
return;
}
setLoading(true);
try {
const response = await getErrorCodesByBrandId(brandId, queryParams);
if (response && response.statusCode === 200) {
const apiErrorData = response.data || [];
const allErrorCodes = [
...apiErrorData.map(ec => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing'
})),
...tempErrorCodes.filter(ec => ec.status !== 'deleted')
];
setErrorCodes(allErrorCodes);
if (response.paging) {
setPagination({
current_page: response.paging.current_page || 1,
current_limit: response.paging.current_limit || 15,
total_limit: response.paging.total_limit || 0,
total_page: response.paging.total_page || 0,
});
}
} else {
setErrorCodes([]);
}
} catch (error) {
setErrorCodes([]);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (isReadOnly && propErrorCodes) {
setErrorCodes(propErrorCodes);
setLoading(false);
} else {
fetchErrorCodes();
}
}, [brandId, queryParams, tempErrorCodes, trigerFilter, isReadOnly, propErrorCodes]);
const handlePrevious = () => {
if (pagination.current_page > 1) {
setCurrentPage(pagination.current_page - 1);
}
};
const handleNext = () => {
if (pagination.current_page < pagination.total_page) {
setCurrentPage(pagination.current_page + 1);
}
};
const handleSearch = () => {
setCurrentPage(1);
if (onSearch) {
onSearch();
}
};
const handleSearchClear = () => {
setCurrentPage(1);
if (onSearchClear) {
onSearchClear();
}
};
const handleDelete = async (item, e) => {
e.stopPropagation();
if (item.status === 'existing' && item.error_code_id) {
NotifConfirmDialog({
icon: 'warning',
title: 'Hapus Error Code',
message: `Apakah Anda yakin ingin menghapus error code ${item.error_code}?`,
onConfirm: () => performDelete(item),
onCancel: () => { },
confirmButtonText: 'Hapus'
});
}
};
const performDelete = async (item) => {
try {
if (!item.error_code_id || item.error_code_id === 'undefined') {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Error code ID tidak valid'
});
return;
}
if (!item.brand_id || item.brand_id === 'undefined') {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Brand ID tidak valid'
});
return;
}
const response = await deleteErrorCode(item.brand_id, item.error_code_id);
if (response && response.statusCode === 200) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus'
});
fetchErrorCodes();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Gagal menghapus error code'
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Terjadi kesalahan saat menghapus error code'
});
}
};
return (
<Card
title="Daftar Error Code"
style={{ width: '100%', minWidth: '472px' }}
styles={{ body: { padding: '12px' } }}
>
<Input.Search
placeholder="Cari error code..."
value={searchText}
onChange={(e) => {
const value = e.target.value;
if (onSearchChange) {
onSearchChange(value);
}
}}
onSearch={handleSearch}
allowClear
enterButton={
<Button
type="primary"
icon={<SearchOutlined />}
onClick={handleSearch}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
height: '32px'
}}
>
Search
</Button>
}
size="default"
style={{
marginBottom: 12,
height: '32px',
width: '100%',
}}
/>
<div style={{
height: '90vh',
border: '1px solid #d9d9d9',
borderRadius: '6px',
overflow: 'auto',
marginBottom: 12,
backgroundColor: '#fafafa'
}}>
{errorCodes.length === 0 ? (
<Empty
description="Belum ada error code"
style={{ marginTop: 50 }}
/>
) : (
<div style={{ padding: '8px' }}>
{errorCodes.map((item) => (
<div
key={item.tempId || item.error_code_id}
style={{
cursor: 'pointer',
padding: '8px 12px',
borderRadius: '6px',
marginBottom: '4px',
border: selectedErrorCode?.tempId === item.tempId ? '2px solid #23A55A' : '1px solid #d9d9d9',
backgroundColor: selectedErrorCode?.tempId === item.tempId ? '#f6ffed' : '#fff',
transition: 'all 0.2s ease'
}}
onClick={() => onErrorCodeSelect(item)}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 'bold', fontSize: '12px' }}>
{item.error_code}
</div>
<div style={{ fontSize: '11px', color: '#666' }}>
{item.error_code_name}
</div>
</div>
{item.status === 'existing' && (
<Button
type="text"
danger
size="small"
icon={<DeleteOutlined />}
onClick={(e) => handleDelete(item, e)}
style={{
padding: '2px 6px',
height: '24px',
fontSize: '11px',
border: '1px solid #ff4d4f'
}}
/>
)}
</div>
</div>
))}
</div>
)}
</div>
{pagination.total_limit > 0 && (
<Row justify="space-between" align="middle" gutter={16}>
<Col flex="auto">
<span style={{ fontSize: '12px', color: '#666' }}>
Menampilkan {pagination.current_limit} data halaman{' '}
{pagination.current_page} dari total {pagination.total_limit} data
</span>
</Col>
<Col flex="none">
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<Button
icon={<LeftOutlined />}
onClick={handlePrevious}
disabled={pagination.current_page <= 1}
size="small"
>
</Button>
<span style={{ fontSize: '12px', color: '#666', minWidth: '60px', textAlign: 'center' }}>
{pagination.current_page} / {pagination.total_page}
</span>
<Button
icon={<RightOutlined />}
onClick={handleNext}
disabled={pagination.current_page >= pagination.total_page}
size="small"
>
</Button>
</div>
</Col>
</Row>
)}
</Card>
);
};
export default ListErrorCode;

33
src/pages/master/brandDevice/component/ListErrorMaster.jsx Normal file
View File

@@ -0,0 +1,33 @@
import React, { memo } from 'react';
import { Row, Col } from 'antd';
const ListErrorMaster = memo(function ListErrorMaster(props) {
return (
<React.Fragment>
<Row>
<Col xs={24}>
<div
style={{
textAlign: 'center',
padding: '100px 20px',
backgroundColor: '#f5f5f5',
borderRadius: '8px',
}}
>
<h2
style={{
fontSize: '24px',
color: '#595959',
marginBottom: '16px',
}}
>
Cooming soon
</h2>
</div>
</Col>
</Row>
</React.Fragment>
);
});
export default ListErrorMaster;

496
src/pages/master/brandDevice/component/SolutionField.jsx
View File

@@ -1,496 +0,0 @@
import React, { useState } from 'react';
import { Form, Input, Button, Switch, Radio, Typography, Space, Card, ConfigProvider } from 'antd';
import { DeleteOutlined, EyeOutlined, FileOutlined } from '@ant-design/icons';
import FileUploadHandler from './FileUploadHandler';
import { NotifAlert } from '../../../../components/Global/ToastNotif';
import { getFileUrl, getFolderFromFileType } from '../../../../api/file-uploads';
const { Text } = Typography;
const { TextArea } = Input;
const SolutionFieldNew = ({
fieldKey,
fieldName,
index,
solutionType,
solutionStatus,
isReadOnly = false,
canRemove = true,
onTypeChange,
onStatusChange,
onRemove,
onFileUpload,
onFileView,
fileList = [],
originalSolutionData = null
}) => {
const form = Form.useFormInstance();
const [currentFile, setCurrentFile] = useState(null);
const [isDeleted, setIsDeleted] = useState(false);
const fileUpload = Form.useWatch(['solution_items', fieldKey, 'fileUpload'], form);
const file = Form.useWatch(['solution_items', fieldKey, 'file'], form);
const nameValue = Form.useWatch(['solution_items', fieldKey, 'name'], form);
const fileNameValue = Form.useWatch(['solution_items', fieldKey, 'fileName'], form);
const statusValue = Form.useWatch(['solution_items', fieldKey, 'status'], form) ?? true;
const pathSolution = Form.useWatch(['solution_items', fieldKey, 'path_solution'], form);
const [deleteCounter, setDeleteCounter] = useState(0);
React.useEffect(() => {
if (!nameValue || nameValue === '') {
setCurrentFile(null);
setIsDeleted(false);
setDeleteCounter(prev => prev + 1);
}
}, [nameValue]);
React.useEffect(() => {
const getFileFromFormValues = () => {
const hasValidFileUpload = fileUpload && typeof fileUpload === 'object' && Object.keys(fileUpload).length > 0;
const hasValidFile = file && typeof file === 'object' && Object.keys(file).length > 0;
const hasValidPath = pathSolution && pathSolution.trim() !== '';
const wasExplicitlyDeleted =
(fileUpload === null || file === null || pathSolution === null) &&
!hasValidFileUpload &&
!hasValidFile &&
!hasValidPath;
if (wasExplicitlyDeleted) {
return null;
}
if (solutionType === 'text') {
return null;
}
if (hasValidFileUpload) {
return fileUpload;
}
if (hasValidFile) {
return file;
}
if (hasValidPath) {
return {
name: fileNameValue || pathSolution.split('/').pop() || 'File',
uploadPath: pathSolution,
url: pathSolution,
path: pathSolution
};
}
return null;
};
const fileFromForm = getFileFromFormValues();
if (JSON.stringify(currentFile) !== JSON.stringify(fileFromForm)) {
setCurrentFile(fileFromForm);
}
}, [fileUpload, file, pathSolution, solutionType, deleteCounter, fileNameValue, fieldKey]);
const renderSolutionContent = () => {
if (solutionType === 'text') {
return (
<Form.Item
name={['solution_items', fieldKey, 'text']}
rules={[{ required: true, message: 'Text solution wajib diisi!' }]}
>
<TextArea
placeholder="Enter solution text"
rows={3}
disabled={isReadOnly}
style={{ fontSize: 12 }}
/>
</Form.Item>
);
}
if (solutionType === 'file') {
const hasOriginalFile = originalSolutionData && (
originalSolutionData.path_solution ||
originalSolutionData.path_document
);
let displayFile = null;
if (currentFile && Object.keys(currentFile).length > 0) {
displayFile = currentFile;
}
else if (hasOriginalFile && !isDeleted) {
displayFile = {
name: originalSolutionData.file_upload_name ||
(originalSolutionData.path_solution || originalSolutionData.path_document)?.split('/').pop() ||
'File',
uploadPath: originalSolutionData.path_solution || originalSolutionData.path_document,
url: originalSolutionData.path_solution || originalSolutionData.path_document,
path: originalSolutionData.path_solution || originalSolutionData.path_document,
isExisting: true
};
}
else if (fileUpload && typeof fileUpload === 'object' && Object.keys(fileUpload).length > 0) {
displayFile = fileUpload;
}
else if (file && typeof file === 'object' && Object.keys(file).length > 0) {
displayFile = file;
}
else if (pathSolution && pathSolution.trim() !== '') {
displayFile = {
name: pathSolution.split('/').pop() || 'File',
uploadPath: pathSolution,
url: pathSolution,
path: pathSolution
};
}
if (displayFile) {
const getFileNameFromPath = () => {
const filePath = displayFile.uploadPath || displayFile.url || displayFile.path || '';
if (filePath) {
const fileName = filePath.split('/').pop();
return fileName || 'Uploaded File';
}
return displayFile.name || 'Uploaded File';
};
const displayFileName = getFileNameFromPath();
return (
<Card
style={{
marginBottom: 8,
borderRadius: 8,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: '1px solid #e8e8e8'
}}
styles={{ body: { padding: '16px' } }}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 48,
height: 48,
borderRadius: 8,
backgroundColor: '#f0f5ff',
flexShrink: 0
}}>
<FileOutlined style={{ fontSize: 24, color: '#1890ff' }} />
</div>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
fontSize: 13,
fontWeight: 600,
color: '#262626',
marginBottom: 4,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}>
{displayFileName}
</div>
<div style={{ fontSize: 12, color: '#8c8c8c' }}>
{displayFile.size ? `${(displayFile.size / 1024).toFixed(1)} KB` : 'File uploaded'}
</div>
</div>
<div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
<Button
type="primary"
size="middle"
icon={<EyeOutlined />}
style={{
fontSize: 12,
display: 'flex',
alignItems: 'center',
gap: 4
}}
onClick={() => {
try {
let fileUrl = '';
let actualFileName = '';
const filePath = displayFile.uploadPath || displayFile.url || displayFile.path || '';
if (filePath) {
actualFileName = filePath.split('/').pop();
if (actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const folder = getFolderFromFileType(fileExtension);
fileUrl = getFileUrl(folder, actualFileName);
}
}
if (!fileUrl && filePath) {
fileUrl = filePath.startsWith('http') ? filePath : `${import.meta.env.VITE_API_SERVER}/${filePath}`;
}
if (fileUrl && actualFileName) {
const fileExtension = actualFileName.split('.').pop()?.toLowerCase();
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
if (imageExtensions.includes(fileExtension)) {
const viewerUrl = `/image-viewer/${encodeURIComponent(actualFileName)}`;
window.open(viewerUrl, '_blank', 'noopener,noreferrer');
} else {
window.open(fileUrl, '_blank', 'noopener,noreferrer');
}
} else {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'File URL not found'
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Failed to open file preview'
});
}
}}
/>
<Button
danger
size="middle"
icon={<DeleteOutlined />}
style={{
fontSize: 12,
display: 'flex',
alignItems: 'center',
}}
onClick={() => {
setIsDeleted(true);
form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
form.setFieldValue(['solution_items', fieldKey, 'file'], null);
form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
form.setFieldValue(['solution_items', fieldKey, 'fileName'], null);
setCurrentFile(null);
if (onFileUpload && typeof onFileUpload === 'function') {
onFileUpload(null);
}
setDeleteCounter(prev => prev + 1);
setTimeout(() => {
form.validateFields(['solution_items', fieldKey]);
}, 50);
}}
/>
</div>
</div>
</Card>
);
} else {
return (
<FileUploadHandler
type="solution"
existingFile={null}
clearSignal={deleteCounter}
debugProps={{
currentFile: !!currentFile,
deleteCounter,
shouldClear: !currentFile && deleteCounter > 0
}}
onFileUpload={(fileObject) => {
setIsDeleted(false);
const filePath = fileObject.path_solution || fileObject.uploadPath || fileObject.path || fileObject.url;
const fileWithKey = {
...fileObject,
solutionId: fieldKey,
path_solution: filePath,
uploadPath: filePath
};
if (onFileUpload && typeof onFileUpload === 'function') {
onFileUpload(fileWithKey);
}
form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], fileWithKey);
form.setFieldValue(['solution_items', fieldKey, 'file'], fileWithKey);
form.setFieldValue(['solution_items', fieldKey, 'type'], 'file');
form.setFieldValue(['solution_items', fieldKey, 'path_solution'], filePath);
form.setFieldValue(['solution_items', fieldKey, 'fileName'], fileObject.name);
setTimeout(() => {
const values = form.getFieldValue(['solution_items', fieldKey]);
const pathSolutionValue = form.getFieldValue(['solution_items', fieldKey, 'path_solution']);
}, 100);
setCurrentFile(fileWithKey);
}}
onFileRemove={() => {
form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
form.setFieldValue(['solution_items', fieldKey, 'file'], null);
form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
setCurrentFile(null);
if (onFileUpload && typeof onFileUpload === 'function') {
onFileUpload(null);
}
setDeleteCounter(prev => prev + 1);
}}
disabled={isReadOnly}
buttonText="Upload File"
buttonStyle={{ width: '100%', fontSize: 12 }}
uploadText="Upload solution file (includes images, PDF, documents)"
acceptFileTypes="*"
/>
);
}
}
return null;
};
return (
<ConfigProvider
theme={{
components: {
Switch: {
colorPrimary: '#23A55A',
colorPrimaryHover: '#23A55A',
},
},
}}
>
<div style={{
border: '1px solid #d9d9d9',
borderRadius: 6,
padding: 12,
marginBottom: 12,
backgroundColor: isReadOnly ? '#f5f5f5' : 'white'
}}>
<div style={{
marginBottom: 8,
gap: 8
}}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
<Text strong style={{
fontSize: 12,
color: '#262626',
display: 'block'
}}>
Solution #{index + 1}
</Text>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
<Form.Item name={['solution_items', fieldKey, 'status']} valuePropName="checked" noStyle>
<Switch
size="small"
disabled={isReadOnly}
onChange={(checked) => {
onStatusChange(fieldKey, checked);
}}
/>
</Form.Item>
<Text style={{
fontSize: 11,
color: '#666',
whiteSpace: 'nowrap'
}}>
{statusValue ? 'Active' : 'Inactive'}
</Text>
</div>
{canRemove && !isReadOnly && (
<Button
type="text"
danger
size="small"
icon={<DeleteOutlined />}
onClick={onRemove}
style={{
fontSize: 12,
padding: '2px 4px',
height: '24px'
}}
/>
)}
</div>
</div>
<Form.Item
name={['solution_items', fieldKey, 'name']}
rules={[{ required: true, message: 'Solution name wajib diisi!' }]}
style={{ margin: 0 }}
>
<Input
placeholder="Solution name"
disabled={isReadOnly}
size="default"
style={{ fontSize: 13 }}
/>
</Form.Item>
</div>
<Form.Item
name={['solution_items', fieldKey, 'type']}
rules={[{ required: true, message: 'Solution type wajib diisi!' }]}
style={{ marginBottom: 8 }}
initialValue={solutionType || 'text'}
>
<Radio.Group
onChange={(e) => {
const newType = e.target.value;
if (newType === 'text') {
form.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
form.setFieldValue(['solution_items', fieldKey, 'file'], null);
form.setFieldValue(['solution_items', fieldKey, 'path_solution'], null);
form.setFieldValue(['solution_items', fieldKey, 'fileName'], null);
setCurrentFile(null);
setIsDeleted(true);
if (onFileUpload && typeof onFileUpload === 'function') {
onFileUpload(null);
}
} else if (newType === 'file') {
form.setFieldValue(['solution_items', fieldKey, 'text'], null);
setIsDeleted(false);
}
onTypeChange(fieldKey, newType);
}}
disabled={isReadOnly}
size="small"
>
<Radio value="text" style={{ fontSize: 12 }}>Text</Radio>
<Radio value="file" style={{ fontSize: 12 }}>File</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name={['solution_items', fieldKey, 'status']}
initialValue={solutionStatus !== false ? true : false}
noStyle
>
<input type="hidden" />
</Form.Item>
{renderSolutionContent()}
</div>
</ConfigProvider>
);
};
export default SolutionFieldNew;

77
src/pages/master/brandDevice/component/SolutionForm.jsx
View File

@@ -1,77 +0,0 @@
import React from 'react';
import { Typography, Divider, Button, Form } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import SolutionFieldNew from './SolutionField';
const { Text } = Typography;
const SolutionForm = ({
solutionForm,
solutionFields,
solutionTypes,
solutionStatuses,
onAddSolutionField,
onRemoveSolutionField,
onSolutionTypeChange,
onSolutionStatusChange,
onSolutionFileUpload,
onFileView,
fileList,
isReadOnly = false,
solutionData = [],
}) => {
return (
<div style={{ marginBottom: 0 }}>
<Form form={solutionForm} layout="vertical">
<div style={{
maxHeight: '400px',
overflowY: 'auto',
paddingRight: '8px'
}}>
{solutionFields.map((field, displayIndex) => (
<SolutionFieldNew
key={field}
fieldKey={field}
fieldName={['solution_items', field]}
index={displayIndex}
solutionType={solutionTypes[field]}
solutionStatus={solutionStatuses[field]}
onTypeChange={onSolutionTypeChange}
onStatusChange={onSolutionStatusChange}
onRemove={() => onRemoveSolutionField(field)}
onFileUpload={onSolutionFileUpload}
onFileView={onFileView}
fileList={fileList}
isReadOnly={isReadOnly}
canRemove={solutionFields.length > 1 && displayIndex > 0}
originalSolutionData={solutionData[displayIndex]}
/>
))}
</div>
{!isReadOnly && (
<div style={{ marginBottom: 8, marginTop: 12 }}>
<Button
type="dashed"
onClick={onAddSolutionField}
icon={<PlusOutlined />}
style={{
width: '100%',
borderColor: '#23A55A',
color: '#23A55A',
height: '32px',
fontSize: '12px'
}}
>
Add sollution
</Button>
</div>
)}
</Form>
</div>
);
};
export default SolutionForm;

178
src/pages/master/brandDevice/component/SparepartSelect.jsx
View File

@@ -1,178 +0,0 @@
import React, { useState, useEffect } from 'react';
import { Select, Typography, Tag, Spin, Empty, Button } from 'antd';
import { PlusOutlined, DeleteOutlined, CheckOutlined, EyeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { getAllSparepart } from '../../../../api/sparepart';
import CustomSparepartCard from './CustomSparepartCard';
const { Text, Title } = Typography;
const { Option } = Select;
const SparepartSelect = ({
selectedSparepartIds = [],
onSparepartChange,
isReadOnly = false
}) => {
const [spareparts, setSpareparts] = useState([]);
const [loading, setLoading] = useState(false);
const [selectedSpareparts, setSelectedSpareparts] = useState([]);
const [dropdownOpen, setDropdownOpen] = useState(false);
useEffect(() => {
fetchSpareparts();
}, []);
useEffect(() => {
if (selectedSparepartIds && selectedSparepartIds.length > 0) {
const fullSelectedSpareparts = spareparts.filter(sp =>
selectedSparepartIds.includes(sp.sparepart_id)
);
setSelectedSpareparts(fullSelectedSpareparts);
} else {
setSelectedSpareparts([]);
}
}, [selectedSparepartIds, spareparts]);
const fetchSpareparts = async (searchQuery = '') => {
setLoading(true);
try {
const params = new URLSearchParams();
params.set('limit', '10');
if (searchQuery && searchQuery.trim() !== '') {
params.set('criteria', searchQuery.trim());
}
const response = await getAllSparepart(params);
if (response && (response.statusCode === 200 || response.data)) {
const sparepartData = response.data?.data || response.data || [];
setSpareparts(sparepartData);
} else {
setSpareparts([]);
}
} catch (error) {
setSpareparts([]);
} finally {
setLoading(false);
}
};
const handleSparepartSelect = (sparepartId) => {
const selectedSparepart = spareparts.find(sp => sp.sparepart_id === sparepartId);
if (selectedSparepart) {
const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepartId);
if (!isAlreadySelected) {
const newSelectedSpareparts = [...selectedSpareparts, selectedSparepart];
setSelectedSpareparts(newSelectedSpareparts);
const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
onSparepartChange(newSelectedIds);
}
}
setDropdownOpen(false);
};
const handleSearch = (value) => {
fetchSpareparts(value);
};
const onDropdownOpenChange = (open) => {
setDropdownOpen(open);
if (open) {
fetchSpareparts();
}
};
const handleRemoveSparepart = (sparepartId) => {
const newSelectedSpareparts = selectedSpareparts.filter(sp => sp.sparepart_id !== sparepartId);
setSelectedSpareparts(newSelectedSpareparts);
const newSelectedIds = newSelectedSpareparts.map(sp => sp.sparepart_id);
onSparepartChange(newSelectedIds);
};
const renderSparepartCard = (sparepart, isSelected = false) => {
const isAlreadySelected = selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id);
return (
<CustomSparepartCard
key={sparepart.sparepart_id}
sparepart={sparepart}
isSelected={isSelected}
isReadOnly={isReadOnly}
showPreview={true}
showDelete={isAlreadySelected && !isReadOnly}
onCardClick={!isAlreadySelected && !isReadOnly ? () => handleSparepartSelect(sparepart.sparepart_id) : undefined}
onDelete={() => handleRemoveSparepart(sparepart.sparepart_id)}
/>
);
};
return (
<>
{!isReadOnly && (
<div style={{
marginBottom: 16,
position: 'sticky',
top: 0,
zIndex: 10,
backgroundColor: 'white',
padding: '8px 0',
borderBottom: '1px solid #f0f0f0'
}}>
<Select
placeholder="search and select sparepart"
style={{ width: '100%' }}
loading={loading}
onSelect={handleSparepartSelect}
value={null}
showSearch
onSearch={handleSearch}
filterOption={false}
open={dropdownOpen}
onOpenChange={onDropdownOpenChange}
suffixIcon={<PlusOutlined />}
>
{spareparts
.filter(sparepart => !selectedSpareparts.some(sp => sp.sparepart_id === sparepart.sparepart_id))
.slice(0, 10)
.map((sparepart) => (
<Option key={sparepart.sparepart_id} value={sparepart.sparepart_id}>
<div>
<Text strong>{sparepart.sparepart_name || sparepart.name || 'Unnamed'}</Text>
<Text type="secondary" style={{ marginLeft: 8 }}>
({sparepart.sparepart_code || 'No code'})
</Text>
</div>
</Option>
))}
</Select>
</div>
)}
<div>
{selectedSpareparts.length > 0 ? (
<div>
<Title level={5} style={{ marginBottom: 16 }}>
Selected Spareparts ({selectedSpareparts.length})
</Title>
<div>
{selectedSpareparts.map(sparepart => renderSparepartCard(sparepart, true))}
</div>
</div>
) : (
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description="No spareparts selected"
style={{ margin: '20px 0' }}
/>
)}
</div>
</>
);
};
export default SparepartSelect;

84
src/pages/master/device/component/CardDevice.jsx Normal file
View File

@@ -0,0 +1,84 @@
import React from 'react';
import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
const { Text } = Typography;
const CardDevice = ({ data, showPreviewModal, showEditModal, showDeleteDialog }) => {
const getCardStyle = () => {
const color = '#FF8C42'; // Orange color
return {
border: `2px solid ${color}`,
borderRadius: '8px',
textAlign: 'center' // Center text
};
};
const getTitleStyle = () => {
const backgroundColor = '#FF8C42'; // Orange color
return {
backgroundColor,
color: '#fff',
padding: '2px 8px',
borderRadius: '4px',
display: 'inline-block',
};
};
return (
<Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'center' }}>
{data.map((item) => (
<Col xs={24} sm={12} md={8} lg={6} key={item.device_id}>
<Card
title={
<span style={getTitleStyle()}>
{item.device_name}
</span>
}
style={getCardStyle()}
actions={[
<Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
<Button
type="text"
style={{ color: '#1890ff' }}
icon={<EyeOutlined />}
onClick={() => showPreviewModal(item)}
/>
<Button
type="text"
style={{ color: '#faad14' }}
icon={<EditOutlined />}
onClick={() => showEditModal(item)}
/>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(item)}
/>
</Space>,
]}
>
<p>
<Text strong>Code:</Text> {item.device_code}
</p>
<p>
<Text strong>Location:</Text> {item.device_location}
</p>
<p>
<Text strong>IP Address:</Text> {item.ip_address}
</p>
<p>
<Text strong>Status:</Text>{' '}
<Tag color={item.device_status ? 'green' : 'red'}>
{item.device_status ? 'Running' : 'Offline'}
</Tag>
</p>
</Card>
</Col>
))}
</Row>
);
};
export default CardDevice;

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

@@ -1,87 +1,181 @@
import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select } from 'antd';
import {
Modal,
Input,
Divider,
Typography,
Switch,
Button,
ConfigProvider,
Radio,
Select,
} from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createApd, getJenisPermit, updateApd } from '../../../../api/master-apd';
import { createDevice, updateDevice } from '../../../../api/master-device';
import { getAllBrands } from '../../../../api/master-brand';
import { validateRun } from '../../../../Utils/validate';
import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const { Text } = Typography;
const { TextArea } = Input;
const DetailDevice = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const [brands, setBrands] = useState([]);
const [loadingBrands, setLoadingBrands] = useState(false);
const defaultData = {
device_id: '',
device_code: '',
device_name: '',
brand_id: '',
brand_code: '',
is_active: true,
device_location: '',
device_location: 'Building A',
device_description: '',
ip_address: '',
listen_channel: '',
};
const [formData, setFormData] = useState(defaultData);
const [FormData, setFormData] = useState(defaultData);
const [jenisPermit, setJenisPermit] = useState([]);
const [checkedList, setCheckedList] = useState([]);
const onChange = (list) => {
setCheckedList(list);
};
const onChangeRadio = (e) => {
setFormData({
...FormData,
type_input: e.target.value,
});
};
const getDataJenisPermit = async () => {
setCheckedList([]);
const result = await getJenisPermit();
const data = result.data ?? [];
const names = data.map((item) => ({
value: item.id_jenis_permit,
label: item.nama_jenis_permit,
}));
setJenisPermit(names);
};
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const validateIPAddress = (ip) => {
const ipRegex =
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return ipRegex.test(ip);
};
const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'device_name', label: 'Device Name', required: true },
{ field: 'ip_address', label: 'Ip Address', required: true, ip: true },
{ field: 'brand_id', label: 'Brand Device', required: true },
];
// Validasi required fields
// if (!FormData.device_code) {
// NotifOk({
// icon: 'warning',
// title: 'Peringatan',
// message: 'Kolom Device Code Tidak Boleh Kosong',
// });
// setConfirmLoading(false);
// return;
// }
if (
validateRun(formData, validationRules, (errorMessages) => {
if (!FormData.device_name) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
message: 'Kolom Device Name Tidak Boleh Kosong',
});
setConfirmLoading(false);
})
)
return;
}
try {
if (!FormData.device_location) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Device Location Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
if (!FormData.ip_address) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom IP Address Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
// Validasi format IP
if (!validateIPAddress(FormData.ip_address)) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Format IP Address Tidak Valid',
});
setConfirmLoading(false);
return;
}
if (props.permitDefault && checkedList.length === 0) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Jenis Permit Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
// Backend validation schema doesn't include device_code
const payload = {
device_name: formData.device_name,
is_active: formData.is_active,
device_location: formData.device_location,
device_description:
formData.device_description && formData.device_description.trim() !== ''
? formData.device_description
: ' ',
ip_address: formData.ip_address,
brand_id: formData.brand_id,
listen_channel: formData.listen_channel,
device_name: FormData.device_name,
is_active: FormData.is_active,
device_location: FormData.device_location,
ip_address: FormData.ip_address,
};
const response = formData.device_id
? await updateDevice(formData.device_id, payload)
: await createDevice(payload);
// For CREATE: device_description is required (cannot be empty)
// For UPDATE: device_description is optional
if (!FormData.device_id) {
// Creating - ensure description is not empty
payload.device_description = FormData.device_description || '-';
} else {
// Updating - include description as-is
payload.device_description = FormData.device_description;
}
console.log('Payload to send:', payload);
try {
let response;
if (!FormData.device_id) {
response = await createDevice(payload);
} else {
response = await updateDevice(FormData.device_id, payload);
}
console.log('Save Device Response:', response);
// Check if response is successful
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const deviceName = response.data?.device_name || formData.device_name;
// Response.data is now a single object (already extracted from array)
const deviceName = response.data?.device_name || FormData.device_name;
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Device "${deviceName}" berhasil ${
formData.device_id ? 'diubah' : 'ditambahkan'
FormData.device_id ? 'diubah' : 'ditambahkan'
}.`,
});
@@ -108,14 +202,7 @@ const DetailDevice = (props) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};
const handleSelectChange = (name, value) => {
setFormData({
...formData,
...FormData,
[name]: value,
});
};
@@ -123,48 +210,35 @@ const DetailDevice = (props) => {
const handleStatusToggle = (event) => {
const isChecked = event;
setFormData({
...formData,
...FormData,
is_active: isChecked ? true : false,
});
};
// Fungsi untuk mengambil daftar brand
const fetchBrands = async () => {
setLoadingBrands(true);
try {
const response = await getAllBrands(new URLSearchParams());
if (response && response.data) {
setBrands(response.data || []);
}
} catch (error) {
console.error('Error fetching brands:', error);
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Gagal mengambil data brand',
});
} finally {
setLoadingBrands(false);
}
};
useEffect(() => {
if (props.showModal && (props.actionMode === 'add' || props.actionMode === 'edit')) {
fetchBrands();
const token = localStorage.getItem('token');
if (token) {
// Only call getDataJenisPermit if permitDefault is enabled
if (props.permitDefault) {
getDataJenisPermit();
}
}, [props.showModal, props.actionMode]);
useEffect(() => {
if (props.selectedData) {
if (props.selectedData != null) {
setFormData(props.selectedData);
if (props.permitDefault && props.selectedData.jenis_permit_default_arr) {
setCheckedList(props.selectedData.jenis_permit_default_arr);
}
} else {
setFormData(defaultData);
}
}, [props.showModal, props.selectedData, props.actionMode]);
} else {
// navigate('/signin'); // Uncomment if useNavigate is imported
}
}, [props.showModal]);
return (
<Modal
// title={`${formData.id_apd === '' ? 'Tambah' : 'Edit'} APD`}
// title={`${FormData.id_apd === '' ? 'Tambah' : 'Edit'} APD`}
title={`${
props.actionMode === 'add'
? 'Tambah'
@@ -187,6 +261,7 @@ const DetailDevice = (props) => {
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
},
},
}}
@@ -218,7 +293,7 @@ const DetailDevice = (props) => {
</React.Fragment>,
]}
>
{formData && (
{FormData && (
<div>
<div>
<div>
@@ -236,14 +311,14 @@ const DetailDevice = (props) => {
disabled={props.readOnly}
style={{
backgroundColor:
formData.is_active === true ? '#23A55A' : '#bfbfbf',
FormData.is_active === true ? '#23A55A' : '#bfbfbf',
}}
checked={formData.is_active === true}
checked={FormData.is_active === true}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>{formData.is_active === true ? 'Running' : 'Offline'}</Text>
<Text>{FormData.is_active === true ? 'Running' : 'Offline'}</Text>
</div>
</div>
</div>
@@ -252,68 +327,40 @@ const DetailDevice = (props) => {
<Text strong>Device ID</Text>
<Input
name="device_id"
value={formData.device_id}
value={FormData.device_id}
onChange={handleInputChange}
disabled
/>
</div>
{/* Device Code - Auto Increment & Read Only */}
<div style={{ marginBottom: 12 }}>
{/* <div style={{ marginBottom: 12 }}>
<Text strong>Device Code</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="device_code"
value={formData.device_code}
placeholder={'Device Code Auto Fill'}
disabled
style={{
backgroundColor: '#f5f5f5',
cursor: 'not-allowed',
color: formData.device_code ? '#000000' : '#bfbfbf',
}}
value={FormData.device_code}
onChange={handleInputChange}
placeholder="Enter Device Code"
readOnly={props.readOnly}
/>
</div>
</div> */}
<div style={{ marginBottom: 12 }}>
<Text strong>Device Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="device_name"
value={formData.device_name}
value={FormData.device_name}
onChange={handleInputChange}
placeholder="Enter Device Name"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Brand Device</Text>
<Text style={{ color: 'red' }}> *</Text>
<Select
name="brand_id"
value={formData.brand_id}
onChange={(value) => handleSelectChange('brand_id', value)}
placeholder="Select Brand Device"
disabled={props.readOnly}
loading={loadingBrands}
style={{ width: '100%' }}
allowClear
showSearch
filterOption={(input, option) =>
option.children.toLowerCase().includes(input.toLowerCase())
}
>
{brands.map((brand) => (
<Select.Option key={brand.brand_id} value={brand.brand_id}>
{`${brand.brand_code} - ${brand.brand_name} `}
</Select.Option>
))}
</Select>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Location</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
type="text"
name="device_location"
value={formData.device_location}
value={FormData.device_location}
onChange={handleInputChange}
placeholder="Enter Device Location"
readOnly={props.readOnly}
@@ -324,33 +371,36 @@ const DetailDevice = (props) => {
<Text style={{ color: 'red' }}> *</Text>
<Input
name="ip_address"
value={formData.ip_address}
value={FormData.ip_address}
onChange={handleInputChange}
placeholder="e.g. 192.168.1.1"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Listen Channel</Text>
<Input
name="listen_channel"
value={formData.listen_channel}
onChange={handleInputChange}
placeholder="Enter Listen Channel"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Device Description</Text>
<TextArea
name="device_description"
value={formData.device_description}
value={FormData.device_description}
onChange={handleInputChange}
placeholder="Enter Device Description (Optional)"
readOnly={props.readOnly}
rows={4}
/>
</div>
{props.permitDefault && (
<div>
<Text strong>Jenis Permit</Text>
<Text style={{ color: 'red' }}> *</Text>
<CheckboxGroup
options={jenisPermit}
value={checkedList}
onChange={onChange}
disabled={props.readOnly}
/>
</div>
)}
</div>
)}
</Modal>

45
src/pages/master/device/component/GeneratePdf.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState } from 'react';
import { Modal, Button, ConfigProvider } from 'antd';
import { jsPDF } from 'jspdf';
import logoPiEnergi from '../../../../assets/images/logo/pi-energi.png';
@@ -22,12 +22,12 @@ const GeneratePdf = (props) => {
};
const generatePdf = async () => {
const { images, title } = await kopReportPdf(logoPiEnergi, 'COLD WORK PERMIT');
const {images, title} = await kopReportPdf(logoPiEnergi, 'COLD WORK PERMIT');
const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4',
orientation: "portrait",
unit: "mm",
format: "a4"
});
const width = 45;
@@ -50,27 +50,27 @@ const GeneratePdf = (props) => {
doc.setLineWidth(0.6);
doc.line(10, 32.8, 200, 32.8);
doc.text('Tanggal Pengajuan', 10, 42);
doc.text(':', 59, 42);
doc.text("Tanggal Pengajuan", 10, 42);
doc.text(":", 59, 42);
doc.text('Deskripsi Pekerjaan', 10, 48);
doc.text(':', 59, 48);
doc.text("Deskripsi Pekerjaan", 10, 48);
doc.text(":", 59, 48);
doc.text('No. Permit', 10, 54);
doc.text(':', 59, 54);
doc.text('Spesifik Lokasi', 120, 54);
doc.text(':', 160, 54);
doc.text("No. Permit", 10, 54);
doc.text(":", 59, 54);
doc.text("Spesifik Lokasi", 120, 54);
doc.text(":", 160, 54);
doc.text('No. Order', 10, 60);
doc.text(':', 59, 60);
doc.text('Jum. Personil Terlihat', 120, 60);
doc.text(':', 160, 60);
doc.text("No. Order", 10, 60);
doc.text(":", 59, 60);
doc.text("Jum. Personil Terlihat", 120, 60);
doc.text(":", 160, 60);
doc.text('Peralatan yang digunakan', 10, 66);
doc.text(':', 59, 66);
doc.text("Peralatan yang digunakan", 10, 66);
doc.text(":", 59, 66);
doc.text('Jenis APD yang digunakan', 10, 72);
doc.text(':', 59, 72);
doc.text("Jenis APD yang digunakan", 10, 72);
doc.text(":", 59, 72);
const blob = doc.output('blob');
const url = URL.createObjectURL(blob);
@@ -84,7 +84,7 @@ const GeneratePdf = (props) => {
return (
<Modal
width="60%"
width='60%'
title="Preview PDF"
open={props.showPdf}
// open={true}
@@ -101,6 +101,7 @@ const GeneratePdf = (props) => {
defaultBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
defaultHoverBorderColor: '#23A55A',
defaultHoverColor: '#23A55A',
},
},
}}

35
src/pages/master/device/component/ListDevice.jsx
View File

@@ -13,16 +13,8 @@ import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/
import { useNavigate } from 'react-router-dom';
import { deleteDevice, getAllDevice } from '../../../../api/master-device';
import TableList from '../../../../components/Global/TableList';
import { getAllBrands } from '../../../../api/master-brand';
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'ID',
dataIndex: 'device_id',
@@ -35,7 +27,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
dataIndex: 'device_code',
key: 'device_code',
width: '10%',
hidden: true,
},
{
title: 'Device Name',
@@ -43,13 +34,6 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
key: 'device_name',
width: '20%',
},
{
title: 'Brand Device',
dataIndex: 'brand_name',
key: 'brand_name',
width: '20%',
render: (brand_name) => brand_name || '-'
},
{
title: 'Location',
dataIndex: 'device_location',
@@ -62,22 +46,15 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
key: 'ip_address',
width: '10%',
},
{
title: 'Listen Channel',
dataIndex: 'listen_channel',
key: 'listen_channel',
width: '10%',
render: (listen_channel) => listen_channel || '-'
},
{
title: 'Status',
dataIndex: 'is_active',
key: 'is_active',
dataIndex: 'device_status',
key: 'device_status',
width: '10%',
align: 'center',
render: (_, { is_active }) => (
render: (_, { device_status }) => (
<>
{is_active === true ? (
{device_status === true ? (
<Tag color={'green'} key={'status'}>
Running
</Tag>
@@ -90,7 +67,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
),
},
{
title: 'Action',
title: 'Aksi',
key: 'aksi',
align: 'center',
width: '15%',
@@ -258,7 +235,7 @@ const ListDevice = memo(function ListDevice(props) {
onClick={() => showAddModal()}
size="large"
>
Add data
Tambah Data
</Button>
</ConfigProvider>
</Space>

8
src/pages/master/plantSubSection/IndexPlantSubSection.jsx → src/pages/master/plantSection/IndexPlantSection.jsx
View File

@@ -1,13 +1,13 @@
import React, { memo, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import ListPlantSection from './component/ListPlantSubSection';
import DetailPlantSection from './component/DetailPlantSubSection';
import ListPlantSection from './component/ListPlantSection';
import DetailPlantSection from './component/DetailPlantSection';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography } from 'antd';
const { Text } = Typography;
const IndexPlantSubSection = memo(function IndexPlantSubSection() {
const IndexPlantSection = memo(function IndexPlantSection() {
const navigate = useNavigate();
const { setBreadcrumbItems } = useBreadcrumb();
@@ -71,4 +71,4 @@ const IndexPlantSubSection = memo(function IndexPlantSubSection() {
);
});
export default IndexPlantSubSection;
export default IndexPlantSection;

215
src/pages/master/plantSection/component/DetailPlantSection.jsx Normal file
View File

@@ -0,0 +1,215 @@
import React, { useEffect, useState } from 'react';
import {
Modal,
Input,
Typography,
Switch,
Button,
ConfigProvider,
Divider,
} from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
const { Text } = Typography;
const DetailPlantSection = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const defaultData = {
sub_section_id: '',
sub_section_code: '',
sub_section_name: '',
is_active: true,
};
const [FormData, setFormData] = useState(defaultData);
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
...FormData,
[name]: value,
});
};
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const handleSave = async () => {
setConfirmLoading(true);
if (!FormData.sub_section_name) {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: 'Kolom Plant Sub Section Name Tidak Boleh Kosong',
});
setConfirmLoading(false);
return;
}
try {
let response;
let payload;
if (props.actionMode === 'edit') {
payload = {
is_active: FormData.is_active,
sub_section_name: FormData.sub_section_name
};
response = await updatePlantSection(FormData.sub_section_id, payload);
} else {
// Backend generates the code, so we only send the name and status
payload = {
sub_section_name: FormData.sub_section_name,
is_active: FormData.is_active,
}
response = await createPlantSection(payload);
}
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Plant Section berhasil ${action}.`,
});
props.setActionMode('list');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server.',
});
} finally {
setConfirmLoading(false);
}
};
const handleStatusToggle = (checked) => {
setFormData({
...FormData,
is_active: checked,
});
};
useEffect(() => {
if (props.selectedData) {
setFormData(props.selectedData);
} else {
setFormData(defaultData);
}
}, [props.showModal, props.selectedData]);
return (
<Modal
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Plant Section`}
open={props.showModal}
onCancel={handleCancel}
footer={[
<React.Fragment key="modal-footer">
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
},
},
}}
>
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
},
},
}}
>
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
)}
</ConfigProvider>
</React.Fragment>,
]}
>
{FormData && (
<div>
<div>
<div>
<Text strong>Status</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor: FormData.is_active ? '#23A55A' : '#bfbfbf',
}}
checked={FormData.is_active}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>
{FormData.is_active ? 'Active' : 'Inactive'}
</Text>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
{props.actionMode !== 'add' && (
<div style={{ marginBottom: 12 }}>
<Text strong>Plant Section Code</Text>
<Input
name="sub_section_code"
value={FormData.sub_section_code}
disabled
/>
</div>
)}
<div style={{ marginBottom: 12 }}>
<Text strong>Plant Sub Section Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="sub_section_name"
value={FormData.sub_section_name}
onChange={handleInputChange}
placeholder="Enter Plant Sub Section Name"
readOnly={props.readOnly}
/>
</div>
</div>
)}
</Modal>
);
};
export default DetailPlantSection;

73
src/pages/master/plantSubSection/component/ListPlantSubSection.jsx → src/pages/master/plantSection/component/ListPlantSection.jsx
View File

@@ -14,55 +14,31 @@ import TableList from '../../../../components/Global/TableList';
const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
{
title: 'No',
key: 'no',
width: '5%',
align: 'center',
render: (_, __, index) => index + 1,
},
{
title: 'Plant Sub Section Code',
dataIndex: 'plant_sub_section_code',
key: 'plant_sub_section_code',
width: '10%',
align: 'center',
hidden: true,
title: 'Section Code',
dataIndex: 'sub_section_code',
key: 'sub_section_code',
width: '20%',
},
{
title: 'Plant Sub Section Name',
dataIndex: 'plant_sub_section_name',
key: 'plant_sub_section_name',
width: '15%',
},
{
title: 'Description',
dataIndex: 'plant_sub_section_description',
key: 'plant_sub_section_description',
width: '30%',
render: (text) => text || '-',
dataIndex: 'sub_section_name',
key: 'sub_section_name',
width: '40%',
},
{
title: 'Status',
dataIndex: 'is_active',
key: 'is_active',
width: '10%',
width: '15%',
align: 'center',
render: (_, { is_active }) => (
<>
{is_active === true ? (
<Tag color={'green'} key={'status'}>
Running
render: (status) => (
<Tag color={status ? 'green' : 'red'}>
{status ? 'Active' : 'Inactive'}
</Tag>
) : (
<Tag color={'red'} key={'status'}>
Offline
</Tag>
)}
</>
),
},
{
title: 'Action',
title: 'Aksi',
key: 'aksi',
align: 'center',
width: '15%',
@@ -70,32 +46,29 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
<Space>
<Button
type="text"
icon={<EyeOutlined />}
style={{ borderColor: '#1890ff' }}
icon={<EyeOutlined style={{ color: '#1890ff' }} />}
onClick={() => showPreviewModal(record)}
style={{ color: '#1890ff', borderColor: '#1890ff' }}
title="View"
/>
<Button
type="text"
icon={<EditOutlined />}
style={{ borderColor: '#faad14' }}
icon={<EditOutlined style={{ color: '#faad14' }} />}
onClick={() => showEditModal(record)}
style={{ color: '#faad14', borderColor: '#faad14' }}
title="Edit"
/>
<Button
type="text"
danger
style={{ borderColor: 'red' }}
icon={<DeleteOutlined />}
onClick={() => showDeleteDialog(record)}
style={{ borderColor: '#ff4d4f' }}
title="Delete"
/>
</Space>
),
},
];
const ListPlantSubSection = memo(function ListPlantSubSection(props) {
const ListPlantSection = memo(function ListPlantSection(props) {
const [trigerFilter, setTrigerFilter] = useState(false);
const defaultFilter = { criteria: '' };
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -148,8 +121,8 @@ const ListPlantSubSection = memo(function ListPlantSubSection(props) {
NotifConfirmDialog({
icon: 'question',
title: 'Konfirmasi Hapus',
message: `Plant Sub Section "${param.plant_sub_section_name}" akan dihapus?`,
onConfirm: () => handleDelete(param.plant_sub_section_id),
message: 'Plant Section "' + param.sub_section_name + '" akan dihapus?',
onConfirm: () => handleDelete(param.sub_section_id),
onCancel: () => props.setSelectedData(null),
});
};
@@ -226,7 +199,7 @@ const ListPlantSubSection = memo(function ListPlantSubSection(props) {
onClick={() => showAddModal()}
size="large"
>
Add data
Tambah Data
</Button>
</ConfigProvider>
</Space>
@@ -237,7 +210,7 @@ const ListPlantSubSection = memo(function ListPlantSubSection(props) {
<TableList
mobile
cardColor={'#42AAFF'}
header={'plant_sub_section_name'}
header={'sub_section_name'}
showPreviewModal={showPreviewModal}
showEditModal={showEditModal}
showDeleteDialog={showDeleteDialog}
@@ -253,4 +226,4 @@ const ListPlantSubSection = memo(function ListPlantSubSection(props) {
);
});
export default ListPlantSubSection;
export default ListPlantSection;

272
src/pages/master/plantSubSection/component/DetailPlantSubSection.jsx
View File

@@ -1,272 +0,0 @@
import React, { useEffect, useState } from 'react';
import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
import { createPlantSection, updatePlantSection } from '../../../../api/master-plant-section';
import { validateRun } from '../../../../Utils/validate';
import TextArea from 'antd/es/input/TextArea';
const { Text } = Typography;
const DetailPlantSubSection = (props) => {
const [confirmLoading, setConfirmLoading] = useState(false);
const defaultData = {
plant_sub_section_id: '',
plant_sub_section_code: '',
plant_sub_section_name: '',
table_name_value: '', // Fix field name
plant_sub_section_description: '',
is_active: true,
};
const [formData, setFormData] = useState(defaultData);
const handleInputChange = (e) => {
// Handle different input types
let name, value;
if (e && e.target) {
// Standard input
name = e.target.name;
value = e.target.value;
} else if (e && e.type === 'change') {
// Switch or other components
name = e.name || e.target?.name;
value = e.value !== undefined ? e.value : e.checked;
} else {
// Fallback
return;
}
// console.log(`📝 Input change: ${name} = ${value}`);
if (name) {
setFormData((prev) => ({
...prev,
[name]: value,
}));
}
};
const handleCancel = () => {
props.setSelectedData(null);
props.setActionMode('list');
};
const handleSave = async () => {
setConfirmLoading(true);
// Daftar aturan validasi
const validationRules = [
{ field: 'plant_sub_section_name', label: 'Plant Sub Section Name', required: true },
];
if (
validateRun(formData, validationRules, (errorMessages) => {
NotifOk({
icon: 'warning',
title: 'Peringatan',
message: errorMessages,
});
setConfirmLoading(false);
})
)
return;
try {
// console.log('💾 Current formData before save:', formData);
const payload = {
plant_sub_section_name: formData.plant_sub_section_name,
plant_sub_section_description:
formData.plant_sub_section_description &&
formData.plant_sub_section_description.trim() !== ''
? formData.plant_sub_section_description
: ' ',
table_name_value: formData.table_name_value, // Fix field name
is_active: formData.is_active,
};
// console.log('📤 Payload to be sent:', payload);
const response =
props.actionMode === 'edit'
? await updatePlantSection(formData.plant_sub_section_id, payload)
: await createPlantSection(payload);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
const action = props.actionMode === 'edit' ? 'diubah' : 'ditambahkan';
NotifOk({
icon: 'success',
title: 'Berhasil',
message: `Data Plant Section berhasil ${action}.`,
});
props.setActionMode('list');
} else {
NotifOk({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
});
}
} catch (error) {
NotifOk({
icon: 'error',
title: 'Error',
message: error.message || 'Terjadi kesalahan pada server.',
});
} finally {
setConfirmLoading(false);
}
};
const handleStatusToggle = (checked) => {
setFormData({
...formData,
is_active: checked,
});
};
useEffect(() => {
// console.log('🔄 Modal state changed:', {
// showModal: props.showModal,
// actionMode: props.actionMode,
// selectedData: props.selectedData,
// });
if (props.selectedData) {
// console.log('📋 Setting form data from selectedData:', props.selectedData);
setFormData(props.selectedData);
} else {
// console.log('📋 Resetting to default data');
setFormData(defaultData);
}
}, [props.showModal, props.selectedData, props.actionMode]);
return (
<Modal
title={`${
props.actionMode === 'add'
? 'Tambah'
: props.actionMode === 'preview'
? 'Preview'
: 'Edit'
} Plant Section`}
open={props.showModal}
onCancel={handleCancel}
footer={[
<React.Fragment key="modal-footer">
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: 'white',
defaultColor: '#23A55A',
defaultBorderColor: '#23A55A',
},
},
}}
>
<Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : 'Batal'}</Button>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: '#23a55a',
defaultColor: '#FFFFFF',
defaultBorderColor: '#23a55a',
},
},
}}
>
{!props.readOnly && (
<Button loading={confirmLoading} onClick={handleSave}>
Simpan
</Button>
)}
</ConfigProvider>
</React.Fragment>,
]}
>
{formData && (
<div>
<div>
<div>
<Text strong>Status</Text>
</div>
<div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
<div style={{ marginRight: '8px' }}>
<Switch
disabled={props.readOnly}
style={{
backgroundColor: formData.is_active ? '#23A55A' : '#bfbfbf',
}}
checked={formData.is_active}
onChange={handleStatusToggle}
/>
</div>
<div>
<Text>{formData.is_active ? 'Active' : 'Inactive'}</Text>
</div>
</div>
</div>
<Divider style={{ margin: '12px 0' }} />
{/* Plant Section Code - Auto Increment & Read Only */}
<div style={{ marginBottom: 12 }}>
<Text strong>Plant Sub Section Code</Text>
<Input
name="sub_section_code"
value={formData.sub_section_code || ''}
placeholder={'Plant Sub Section Code Auto Fill'}
disabled
style={{
backgroundColor: '#f5f5f5',
cursor: 'not-allowed',
color: formData.sub_section_code ? '#000000' : '#bfbfbf',
}}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Plant Sub Section Name</Text>
<Text style={{ color: 'red' }}> *</Text>
<Input
name="plant_sub_section_name"
value={formData.plant_sub_section_name}
onChange={handleInputChange}
placeholder="Enter Plant Sub Section Name"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Table Name Value</Text>
<Input
name="table_name_value"
value={formData.table_name_value}
onChange={handleInputChange}
placeholder="Enter Table Name Value (Optional)"
readOnly={props.readOnly}
/>
</div>
<div style={{ marginBottom: 12 }}>
<Text strong>Description</Text>
<TextArea
name="plant_sub_section_description"
value={formData.plant_sub_section_description}
onChange={handleInputChange}
placeholder="Enter Description (Optional)"
readOnly={props.readOnly}
rows={4}
/>
</div>
</div>
)}
</Modal>
);
};
export default DetailPlantSubSection;

Some files were not shown because too many files have changed in this diff Show More