@@ -125,7 +124,7 @@ const ProductionOverview = () => {
style={{ width: '100%', textAlign: 'center' }}
>
{error || 'Printer not found'}
-
} onClick={fetchAllStats}>
+
} onClick={fetchAllStats}>
Retry
@@ -135,229 +134,279 @@ const ProductionOverview = () => {
return (
{contextHolder}
- updateCollapseState('overview', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
>
-
- Overview
-
-
-
-
- Ready
-
-
-
- {(stats.printers.standby || 0) +
- (stats.printers.complete || 0)}
-
-
-
+
+ Status Overview
+
}
- />
-
- Printing
-
-
-
- {stats.printers.printing || 0}
-
-
-
- }
- />
-
- Queued
-
-
-
- {stats.printJobs.queued || 0}
-
-
-
- }
- />
-
- Printing
-
-
-
- {stats.printJobs.printing || 0}
-
-
-
- }
- />
-
- Failed
-
-
-
- {(stats.printJobs.failed || 0) +
- (stats.printJobs.cancelled || 0)}
-
-
-
- }
- />
-
- Complete
-
-
-
- {stats.printJobs.complete || 0}
-
-
-
- }
- />
-
+ key='1'
+ >
+
+
+ Ready
+
+
+
+ {(stats.printers.standby || 0) +
+ (stats.printers.complete || 0)}
+
+
+
+ }
+ />
+
+ Printing
+
+
+
+ {stats.printers.printing || 0}
+
+
+
+ }
+ />
+
+ Queued
+
+
+
+ {stats.printJobs.queued || 0}
+
+
+
+ }
+ />
+
+ Printing
+
+
+
+ {stats.printJobs.printing || 0}
+
+
+
+ }
+ />
+
+ Failed
+
+
+
+ {(stats.printJobs.failed || 0) +
+ (stats.printJobs.cancelled || 0)}
+
+
+
+ }
+ />
+
+ Complete
+
+
+
+ {stats.printJobs.complete || 0}
+
+
+
+ }
+ />
+
+
+
+
-
+ updateCollapseState('printerStats', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
>
-
- Printer Statistics
-
-
-
-
-
- Total Printers
-
- }
- >
- {stats.totalPrinters}
-
-
- Active Printers
-
- }
- >
- {stats.activePrinters}
-
-
-
-
-
-
-
- {stats.printerStatus.printing || 0}
-
-
-
-
-
-
-
- {stats.printerStatus.idle || 0}
-
-
-
-
-
-
-
+
+
+ Printer Statistics
+
+
+ setTimeRanges((prev) => ({
+ ...prev,
+ printerStats: value
+ }))
+ }
+ size='small'
+ />
+
+ }
+ key='2'
+ >
+
+
+
+
+ {'Completed'}
+
+ }
+ >
+ {stats.totalPrinters}
+
+
+
+ {'Error'}
+
+ }
+ >
+ {stats.activePrinters}
+
+
+
+ {'Paused'}
+
+ }
+ >
+ {stats.activePrinters}
+
+
+
+
+
-
+ updateCollapseState('jobStats', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
>
-
- Job Statistics
-
-
-
-
-
- Total Print Jobs
-
- }
- >
- {stats.totalPrintJobs}
-
-
- Active Print Jobs
-
- }
- >
- {stats.activePrintJobs}
-
-
- Completed Print Jobs
-
- }
- >
- {stats.completedPrintJobs}
-
-
-
-
-
+
+
+ Job Statistics
+
+
+ setTimeRanges((prev) => ({ ...prev, jobStats: value }))
+ }
+ size='small'
+ />
+
+ }
+ key='3'
+ >
+
+
+
+
+ {'Completed'}
+
+ }
+ >
+ {stats.totalPrintJobs}
+
+
+
+ {'Failed'}
+
+ }
+ >
+ {stats.activePrintJobs}
+
+
+
+ {'Queued'}
+
+ }
+ >
+ {stats.completedPrintJobs}
+
+
+
+
+
diff --git a/src/components/Dashboard/common/DashboardBreadcrumb.jsx b/src/components/Dashboard/common/DashboardBreadcrumb.jsx
index 792dc06..62f9d4a 100644
--- a/src/components/Dashboard/common/DashboardBreadcrumb.jsx
+++ b/src/components/Dashboard/common/DashboardBreadcrumb.jsx
@@ -29,7 +29,11 @@ const breadcrumbNameMap = {
'/dashboard/inventory/filamentstocks': 'Filament Stocks',
'/dashboard/inventory/filamentstocks/info': 'Info',
'/dashboard/inventory/partstocks': 'Parts',
- '/dashboard/inventory/partstocks/info': 'Info'
+ '/dashboard/inventory/partstocks/info': 'Info',
+ '/dashboard/inventory/productstocks': 'Products',
+ '/dashboard/inventory/productstocks/info': 'Info',
+ '/dashboard/inventory/stockaudits': 'Stock Audits',
+ '/dashboard/inventory/stockaudits/info': 'Info'
}
const DashboardBreadcrumb = () => {
diff --git a/src/components/Dashboard/common/DashboardNavigation.jsx b/src/components/Dashboard/common/DashboardNavigation.jsx
index 68401b0..ac8ec6d 100644
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@@ -11,11 +11,8 @@ import {
Typography
} from 'antd'
import {
- UserOutlined,
LogoutOutlined,
- PrinterOutlined,
SettingOutlined,
- ProductOutlined,
ShoppingCartOutlined,
PoundOutlined,
MailOutlined,
@@ -31,6 +28,9 @@ import { useNavigate, useLocation } from 'react-router-dom'
import { Header } from 'antd/es/layout/layout'
import FarmControlLogo from '../../Logos/FarmControlLogo'
+import ProductionIcon from '../../Icons/ProductionIcon'
+import InventoryIcon from '../../Icons/InventoryIcon'
+import PersonIcon from '../../Icons/PersonIcon'
const { Text } = Typography
@@ -58,12 +58,12 @@ const DashboardNavigation = () => {
{
key: 'production',
label: 'Production',
- icon:
+ icon:
},
{
key: 'inventory',
label: 'Inventory',
- icon:
+ icon:
},
{
key: 'sales',
@@ -88,7 +88,7 @@ const DashboardNavigation = () => {
{
key: 'username',
label: userProfile?.username,
- icon: ,
+ icon: ,
disabled: true
},
{
@@ -186,7 +186,7 @@ const DashboardNavigation = () => {
{userProfile ? (
- }>
+ }>
{userProfile?.name ? userProfile.name : userProfile.username}
diff --git a/src/components/Dashboard/common/DashboardSidebar.jsx b/src/components/Dashboard/common/DashboardSidebar.jsx
deleted file mode 100644
index 7f1c4d6..0000000
--- a/src/components/Dashboard/common/DashboardSidebar.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Sidebar.js
-import React from 'react'
-import { Link } from 'react-router-dom'
-import { Layout, Menu } from 'antd'
-import {
- DashboardOutlined,
- PrinterOutlined,
- PlayCircleOutlined
-} from '@ant-design/icons'
-
-import FilamentIcon from '../../Icons/FilamentIcon'
-import GCodeFileIcon from '../../Icons/GCodeFileIcon'
-
-const { Sider } = Layout
-
-const Sidebar = () => {
- const items = [
- {
- key: 'overview',
- label: Overview,
- icon:
- },
- {
- key: 'printers',
- label: Printers,
- icon:
- },
- {
- key: 'jobs',
- label: Print Jobs,
- icon:
- },
- {
- key: 'filaments',
- label: Filaments,
- icon:
- },
- {
- key: 'gcodefiles',
- label: G Code Files,
- icon:
- }
- ]
- return (
-
-
-
- )
-}
-
-export default Sidebar
diff --git a/src/components/Dashboard/common/FilamentStockState.jsx b/src/components/Dashboard/common/FilamentStockState.jsx
index 573f454..f5e6d9d 100644
--- a/src/components/Dashboard/common/FilamentStockState.jsx
+++ b/src/components/Dashboard/common/FilamentStockState.jsx
@@ -40,7 +40,7 @@ const FilamentStockState = ({
if (socket && !initialized && filamentStock?._id) {
setInitialized(true)
socket.on('notify_filamentstock_update', (statusUpdate) => {
- if (statusUpdate?.id === filamentStock._id && statusUpdate?.state) {
+ if (statusUpdate?._id === filamentStock?._id && statusUpdate?.state) {
setCurrentState(statusUpdate.state)
}
})
diff --git a/src/components/Dashboard/common/IdText.jsx b/src/components/Dashboard/common/IdText.jsx
index a8a32e5..dd49526 100644
--- a/src/components/Dashboard/common/IdText.jsx
+++ b/src/components/Dashboard/common/IdText.jsx
@@ -3,7 +3,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Flex, Typography, Button, Tooltip, message } from 'antd'
import { useNavigate } from 'react-router-dom'
-import { CopyOutlined } from '@ant-design/icons'
+import CopyIcon from '../../Icons/CopyIcon'
const { Text, Link } = Typography
@@ -112,7 +112,7 @@ const IdText = ({
{showCopy && (
}
+ icon={}
type='text'
style={{ height: '22px' }}
onClick={() => {
diff --git a/src/components/Dashboard/common/InventorySidebar.jsx b/src/components/Dashboard/common/InventorySidebar.jsx
index ae14cd5..a7fe1a4 100644
--- a/src/components/Dashboard/common/InventorySidebar.jsx
+++ b/src/components/Dashboard/common/InventorySidebar.jsx
@@ -1,14 +1,13 @@
import React, { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Layout, Menu, Flex, Button } from 'antd'
-import {
- DashboardOutlined,
- MenuFoldOutlined,
- MenuUnfoldOutlined
-} from '@ant-design/icons'
+import { DashboardOutlined } from '@ant-design/icons'
import FilamentStockIcon from '../../Icons/FilamentStockIcon'
import PartStockIcon from '../../Icons/PartStockIcon'
import ProductStockIcon from '../../Icons/ProductStockIcon'
+import StockAuditIcon from '../../Icons/StockAuditIcon'
+import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
+import ExpandSidebarIcon from '../../Icons/ExpandSidebarIcon'
const { Sider } = Layout
@@ -64,7 +63,7 @@ const InventorySidebar = () => {
{
key: 'stockaudits',
label: Stock Audits,
- icon:
+ icon:
}
]
@@ -87,7 +86,7 @@ const InventorySidebar = () => {
: }
+ icon={collapsed ? : }
style={{ flexGrow: 1 }}
onClick={() => handleCollapse(!collapsed)}
/>
diff --git a/src/components/Dashboard/common/JobState.jsx b/src/components/Dashboard/common/JobState.jsx
index 98fffc9..3288f1e 100644
--- a/src/components/Dashboard/common/JobState.jsx
+++ b/src/components/Dashboard/common/JobState.jsx
@@ -20,10 +20,10 @@ const JobState = ({
const [initialized, setInitialized] = useState(false)
const { Text } = Typography
useEffect(() => {
- if (socket && !initialized && job?.id) {
+ if (socket && !initialized && job?._id) {
setInitialized(true)
socket.on('notify_job_update', (statusUpdate) => {
- if (statusUpdate?.id === job.id && statusUpdate?.state) {
+ if (statusUpdate?._id === job._id && statusUpdate?.state) {
setCurrentState(statusUpdate.state)
}
})
@@ -33,7 +33,7 @@ const JobState = ({
socket.off('notify_job_update')
}
}
- }, [socket, initialized, job?.id])
+ }, [socket, initialized, job?._id])
useEffect(() => {
switch (currentState?.type) {
@@ -70,10 +70,7 @@ const JobState = ({
return (
{showId && (
- <>
- {'Job '}
-
-
+
)}
{showQuantity && (Quantity: {job.quantity})}
{showStatus && (
@@ -101,7 +98,7 @@ const JobState = ({
JobState.propTypes = {
job: PropTypes.shape({
- id: PropTypes.string,
+ _id: PropTypes.string,
quantity: PropTypes.number,
state: PropTypes.shape({
type: PropTypes.string,
diff --git a/src/components/Dashboard/common/ManagementSidebar.jsx b/src/components/Dashboard/common/ManagementSidebar.jsx
index e894bb5..d1eb391 100644
--- a/src/components/Dashboard/common/ManagementSidebar.jsx
+++ b/src/components/Dashboard/common/ManagementSidebar.jsx
@@ -1,18 +1,14 @@
import React, { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Layout, Menu, Flex, Button } from 'antd'
-import {
- SettingOutlined,
- AuditOutlined,
- MenuFoldOutlined,
- MenuUnfoldOutlined
-} from '@ant-design/icons'
-
+import { SettingOutlined, AuditOutlined } from '@ant-design/icons'
import FilamentIcon from '../../Icons/FilamentIcon'
import PartIcon from '../../Icons/PartIcon'
import ProductIcon from '../../Icons/ProductIcon'
import VendorIcon from '../../Icons/VendorIcon'
import MaterialIcon from '../../Icons/MaterialIcon'
+import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
+import ExpandSidebarIcon from '../../Icons/ExpandSidebarIcon'
const { Sider } = Layout
@@ -95,7 +91,7 @@ const ManagementSidebar = () => {
: }
+ icon={collapsed ? : }
style={{ flexGrow: 1 }}
onClick={() => handleCollapse(!collapsed)}
/>
diff --git a/src/components/Dashboard/common/PrinterJobsTree.jsx b/src/components/Dashboard/common/PrinterJobsTree.jsx
index 79d3c16..bb3ae73 100644
--- a/src/components/Dashboard/common/PrinterJobsTree.jsx
+++ b/src/components/Dashboard/common/PrinterJobsTree.jsx
@@ -1,11 +1,16 @@
import PropTypes from 'prop-types'
import { Card, Tree, Spin, Space, Button, message } from 'antd'
-import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
+import { LoadingOutlined } from '@ant-design/icons'
import React, { useState, useEffect, useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
import SubJobState from './SubJobState'
import { SocketContext } from '../context/SocketContext'
import axios from 'axios'
import JobState from './JobState'
+import JobIcon from '../../Icons/JobIcon'
+import SubJobIcon from '../../Icons/SubJobIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+
const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
const [subJobs, setSubJobs] = useState(initialSubJobs || [])
const [loading, setLoading] = useState(false)
@@ -14,6 +19,15 @@ const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
const [messageApi] = message.useMessage()
const [expandedKeys, setExpandedKeys] = useState([])
const [treeData, setTreeData] = useState([])
+ const navigate = useNavigate()
+
+ const handleNodeClick = (selectedKeys) => {
+ const key = selectedKeys[0]
+ if (key.startsWith('printjob-')) {
+ const jobId = key.replace('printjob-', '')
+ navigate(`/dashboard/production/printjobs/info?printJobId=${jobId}`)
+ }
+ }
const buildTreeData = (subJobsData) => {
if (!subJobsData?.length) {
@@ -40,17 +54,25 @@ const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
({ printJob, subJobs }) => {
setExpandedKeys((prev) => [...prev, `printjob-${printJob._id}`])
return {
- title: ,
+ title: (
+
+
+ {'Job'}
+
+
+ ),
key: `printjob-${printJob._id}`,
children: subJobs.map((subJob) => ({
title: (
-
+
+
+ {'Sub Job'}
+
+
),
key: `subjob-${subJob._id}`,
isLeaf: true
@@ -133,7 +155,7 @@ const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
style={{ width: '100%', textAlign: 'center' }}
>
{error}
- } onClick={() => setError(null)}>
+ } onClick={() => setError(null)}>
Retry
@@ -146,6 +168,7 @@ const PrinterJobsTree = ({ subJobs: initialSubJobs }) => {
treeData={treeData}
expandedKeys={expandedKeys}
onExpand={setExpandedKeys}
+ onSelect={handleNodeClick}
showLine={true}
/>
diff --git a/src/components/Dashboard/common/PrinterState.jsx b/src/components/Dashboard/common/PrinterState.jsx
index 3063761..3aaafc3 100644
--- a/src/components/Dashboard/common/PrinterState.jsx
+++ b/src/components/Dashboard/common/PrinterState.jsx
@@ -3,11 +3,9 @@ import PropTypes from 'prop-types'
import { Badge, Progress, Flex, Space, Tag, Typography, Button } from 'antd'
import React, { useState, useContext, useEffect } from 'react'
import { SocketContext } from '../context/SocketContext'
-import {
- CloseOutlined,
- PauseOutlined,
- CaretRightOutlined
-} from '@ant-design/icons'
+import { CaretRightOutlined } from '@ant-design/icons'
+import XMarkIcon from '../../Icons/XMarkIcon'
+import PauseIcon from '../../Icons/PauseIcon'
const PrinterState = ({
printer,
@@ -145,11 +143,10 @@ const PrinterState = ({
}
}}
style={{ height: '22px' }}
+ type='text'
icon={
currentState.type === 'printing' ? (
-
+
) : (
+
}
/>
diff --git a/src/components/Dashboard/common/PrinterTemperaturePanel.jsx b/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
index 1029472..191e7c8 100644
--- a/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
+++ b/src/components/Dashboard/common/PrinterTemperaturePanel.jsx
@@ -10,7 +10,7 @@ import {
InputNumber,
Button
} from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CaretRightOutlined } from '@ant-design/icons'
import { SocketContext } from '../context/SocketContext'
import styled from 'styled-components'
import PropTypes from 'prop-types'
@@ -291,7 +291,14 @@ const PrinterTemperaturePanel = ({
)}
{showMoreInfo === true && (
-
+ (
+
+ )}
+ />
)}
) : (
diff --git a/src/components/Dashboard/common/ProductionSidebar.jsx b/src/components/Dashboard/common/ProductionSidebar.jsx
index 5509a87..f91f4fb 100644
--- a/src/components/Dashboard/common/ProductionSidebar.jsx
+++ b/src/components/Dashboard/common/ProductionSidebar.jsx
@@ -1,14 +1,12 @@
import React, { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Layout, Menu, Flex, Button } from 'antd'
-import {
- DashboardOutlined,
- PrinterOutlined,
- PlayCircleOutlined,
- MenuFoldOutlined,
- MenuUnfoldOutlined
-} from '@ant-design/icons'
+import { DashboardOutlined } from '@ant-design/icons'
import GCodeFileIcon from '../../Icons/GCodeFileIcon'
+import JobIcon from '../../Icons/JobIcon'
+import PrinterIcon from '../../Icons/PrinterIcon'
+import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
+import ExpandSidebarIcon from '../../Icons/ExpandSidebarIcon'
const { Sider } = Layout
@@ -44,12 +42,12 @@ const ProductionSidebar = () => {
{
key: 'printers',
label: Printers,
- icon:
+ icon:
},
{
key: 'printjobs',
label: Print Jobs,
- icon:
+ icon:
},
{
key: 'gcodefiles',
@@ -76,7 +74,7 @@ const ProductionSidebar = () => {
: }
+ icon={collapsed ? : }
style={{ flexGrow: 1 }}
onClick={() => handleCollapse(!collapsed)}
/>
diff --git a/src/components/Dashboard/common/StockEventTable.jsx b/src/components/Dashboard/common/StockEventTable.jsx
index 4fed950..baec859 100644
--- a/src/components/Dashboard/common/StockEventTable.jsx
+++ b/src/components/Dashboard/common/StockEventTable.jsx
@@ -1,12 +1,13 @@
import React, { useEffect, useContext, useState } from 'react'
import { Table, Typography } from 'antd'
import PropTypes from 'prop-types'
-import moment from 'moment'
import IdText from './IdText'
-import { AuditOutlined, PlayCircleOutlined } from '@ant-design/icons'
+import { AuditOutlined } from '@ant-design/icons'
import { SocketContext } from '../context/SocketContext'
-
+import moment from 'moment'
+import TimeDisplay from '../common/TimeDisplay'
import PlusMinusIcon from '../../Icons/PlusMinusIcon'
+import SubJobIcon from '../../Icons/SubJobIcon'
const { Text } = Typography
@@ -24,13 +25,13 @@ const StockEventTable = ({ stockEvents }) => {
setStockEventsData((prevData) => {
return prevData.map((stockEvent) => {
if (stockEvent?._id) {
- console.log('UD', updateData)
- console.log('SE', stockEvent)
if (stockEvent._id === updateData._id) {
return {
...stockEvent,
...updateData
}
+ } else {
+ return stockEvent
}
}
})
@@ -83,7 +84,7 @@ const StockEventTable = ({ stockEvents }) => {
render: (record) => {
switch (record.type.toLowerCase()) {
case 'subjob':
- return
+ return
case 'audit':
return
default:
@@ -176,8 +177,7 @@ const StockEventTable = ({ stockEvents }) => {
sorter: (a, b) => moment(a.createdAt).unix() - moment(b.createdAt).unix(),
render: (createdAt) => {
if (createdAt) {
- const formattedDate = moment(createdAt).format('YYYY-MM-DD HH:mm:ss')
- return {formattedDate}
+ return
} else {
return 'n/a'
}
@@ -191,8 +191,7 @@ const StockEventTable = ({ stockEvents }) => {
sorter: (a, b) => moment(a.updatedAt).unix() - moment(b.updatedAt).unix(),
render: (updatedAt) => {
if (updatedAt) {
- const formattedDate = moment(updatedAt).format('YYYY-MM-DD HH:mm:ss')
- return {formattedDate}
+ return
} else {
return 'n/a'
}
diff --git a/src/components/Dashboard/common/SubJobCounter.jsx b/src/components/Dashboard/common/SubJobCounter.jsx
index 2fe35de..f590515 100644
--- a/src/components/Dashboard/common/SubJobCounter.jsx
+++ b/src/components/Dashboard/common/SubJobCounter.jsx
@@ -29,7 +29,7 @@ const SubJobCounter = ({
console.log('on notify_subjob_update')
socket.on('notify_subjob_update', (statusUpdate) => {
for (const subJob of job.subJobs) {
- if (statusUpdate?.id === subJob.id && statusUpdate?.state) {
+ if (statusUpdate?._id === subJob.id && statusUpdate?.state) {
console.log('statusUpdate', statusUpdate)
setSubJobs((prev) => [...prev, statusUpdate])
}
diff --git a/src/components/Dashboard/common/SubJobState.jsx b/src/components/Dashboard/common/SubJobState.jsx
index 962fb23..22b2dff 100644
--- a/src/components/Dashboard/common/SubJobState.jsx
+++ b/src/components/Dashboard/common/SubJobState.jsx
@@ -1,14 +1,12 @@
import PropTypes from 'prop-types'
import { Badge, Progress, Flex, Button, Space, Tag } from 'antd' // eslint-disable-line
-import {
- CloseOutlined,
- DeleteOutlined,
- PauseOutlined,
- CaretRightOutlined
-} from '@ant-design/icons' // eslint-disable-line
+import { CaretRightOutlined } from '@ant-design/icons' // eslint-disable-line
import React, { useState, useContext, useEffect } from 'react'
import { SocketContext } from '../context/SocketContext'
import IdText from './IdText'
+import XMarkIcon from '../../Icons/XMarkIcon'
+import PauseIcon from '../../Icons/PauseIcon'
+import BinIcon from '../../Icons/BinIcon'
const SubJobState = ({
subJob,
@@ -29,11 +27,11 @@ const SubJobState = ({
const [initialized, setInitialized] = useState(false)
useEffect(() => {
- if (socket && !initialized && subJob?.id) {
+ if (socket && !initialized && subJob?._id) {
setInitialized(true)
console.log('on notify_subjob_update')
socket.on('notify_subjob_update', (statusUpdate) => {
- if (statusUpdate?.id === subJob.id && statusUpdate?.state) {
+ if (statusUpdate?._id === subJob._id && statusUpdate?.state) {
console.log('statusUpdate', statusUpdate)
setCurrentState(statusUpdate.state)
}
@@ -45,7 +43,7 @@ const SubJobState = ({
socket.off('notify_subjob_update')
}
}
- }, [socket, initialized, subJob?.id])
+ }, [socket, initialized, subJob?._id])
useEffect(() => {
switch (currentState.type) {
@@ -86,14 +84,11 @@ const SubJobState = ({
return (
{showId && (
- <>
- {'Sub Job '}
-
-
+
)}
{showStatus && (
@@ -130,11 +125,10 @@ const SubJobState = ({
}
}}
style={{ height: '22px' }}
+ type='text'
icon={
currentState.type === 'printing' ? (
-
+
) : (
+
}
/>
@@ -161,13 +154,12 @@ const SubJobState = ({
) : null}
@@ -187,7 +180,7 @@ const SubJobState = ({
SubJobState.propTypes = {
subJob: PropTypes.shape({
- id: PropTypes.string,
+ _id: PropTypes.string,
subJobId: PropTypes.string,
printer: PropTypes.string,
number: PropTypes.number,
diff --git a/src/components/Dashboard/common/SubJobsTree.jsx b/src/components/Dashboard/common/SubJobsTree.jsx
index ebfc20c..d827f72 100644
--- a/src/components/Dashboard/common/SubJobsTree.jsx
+++ b/src/components/Dashboard/common/SubJobsTree.jsx
@@ -1,13 +1,17 @@
// PrinterSelect.js
import PropTypes from 'prop-types'
import { Tree, Card, Spin, Space, Button, message } from 'antd'
-import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
+import { LoadingOutlined } from '@ant-design/icons'
import React, { useState, useEffect, useContext, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
import PrinterState from './PrinterState'
import axios from 'axios'
import { SocketContext } from '../context/SocketContext'
-
+import PrinterIcon from '../../Icons/PrinterIcon'
import SubJobState from './SubJobState'
+import SubJobIcon from '../../Icons/SubJobIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+
const SubJobsTree = ({ printJobData }) => {
const [treeData, setTreeData] = useState([])
const [loading, setLoading] = useState(false)
@@ -16,6 +20,7 @@ const SubJobsTree = ({ printJobData }) => {
const [messageApi] = message.useMessage()
const [expandedKeys, setExpandedKeys] = useState([])
const [currentPrintJobData, setCurrentPrintJobData] = useState(null)
+ const navigate = useNavigate()
const buildTreeData = useCallback(
(jobData) => {
@@ -34,11 +39,14 @@ const SubJobsTree = ({ printJobData }) => {
setExpandedKeys((prev) => [...prev, `printer-${printerData.id}`])
return {
title: printerData.state ? (
-
+
+
+
+
) : (
} />
),
@@ -46,11 +54,11 @@ const SubJobsTree = ({ printJobData }) => {
children: printerSubJobs.map((subJob) => {
return {
title: (
-
+
+
+ {'Sub Job'}
+
+
),
key: `subjob-${subJob._id}`,
isLeaf: true
@@ -64,6 +72,14 @@ const SubJobsTree = ({ printJobData }) => {
[expandedKeys]
)
+ const handleNodeClick = (selectedKeys) => {
+ const key = selectedKeys[0]
+ if (key.startsWith('printer-')) {
+ const printerId = key.replace('printer-', '')
+ navigate(`/dashboard/production/printers/info?printerId=${printerId}`)
+ }
+ }
+
useEffect(() => {
buildTreeData(currentPrintJobData)
}, [currentPrintJobData])
@@ -178,7 +194,7 @@ const SubJobsTree = ({ printJobData }) => {
>
{error}
}
+ icon={}
onClick={() => buildTreeData(printJobData)}
>
Retry
@@ -193,6 +209,7 @@ const SubJobsTree = ({ printJobData }) => {
treeData={treeData}
expandedKeys={expandedKeys}
onExpand={setExpandedKeys}
+ onSelect={handleNodeClick}
showLine={true}
/>
diff --git a/src/components/Dashboard/common/TimeDisplay.jsx b/src/components/Dashboard/common/TimeDisplay.jsx
new file mode 100644
index 0000000..2cdff0d
--- /dev/null
+++ b/src/components/Dashboard/common/TimeDisplay.jsx
@@ -0,0 +1,82 @@
+// PrinterSelect.js
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { Flex, Typography, Tag } from 'antd'
+import moment from 'moment'
+
+const { Text } = Typography
+
+const formatTimeDifference = (dateTime) => {
+ const now = moment()
+ const diff = moment(dateTime)
+ const duration = moment.duration(now.diff(diff))
+
+ const years = Math.floor(duration.asYears())
+ const months = Math.floor(duration.asMonths()) % 12
+ const weeks = Math.floor(duration.asWeeks()) % 4
+ const days = Math.floor(duration.asDays()) % 7
+ const hours = duration.hours()
+ const minutes = duration.minutes()
+ const seconds = duration.seconds()
+
+ if (years > 0) {
+ return `${years}y`
+ } else if (months > 0) {
+ return `${months}mo`
+ } else if (weeks > 0) {
+ return `${weeks}w`
+ } else if (days > 0) {
+ return `${days}d`
+ } else if (hours > 0) {
+ return `${hours}h`
+ } else if (minutes > 0) {
+ return `${minutes}m`
+ } else {
+ return `${seconds}s`
+ }
+}
+
+const TimeDisplay = ({
+ dateTime,
+ showDate = true,
+ showTime = true,
+ showSince = false
+}) => {
+ const [timeAgo, setTimeAgo] = useState(formatTimeDifference(dateTime))
+
+ useEffect(() => {
+ if (showSince) {
+ const timer = setInterval(() => {
+ setTimeAgo(formatTimeDifference(dateTime))
+ }, 1000)
+
+ return () => clearInterval(timer)
+ }
+ }, [dateTime, showSince])
+
+ var dateFormat = ''
+ if (showDate == true) {
+ dateFormat += 'YYYY-MM-DD '
+ }
+ if (showTime == true) {
+ dateFormat += 'HH:mm:ss '
+ }
+
+ const formattedDate = moment(dateTime).format(dateFormat)
+
+ return (
+
+ {formattedDate}
+ {showSince ? {timeAgo + ' ago'} : null}
+
+ )
+}
+
+TimeDisplay.propTypes = {
+ dateTime: PropTypes.string,
+ showDate: PropTypes.bool,
+ showTime: PropTypes.bool,
+ showSince: PropTypes.bool
+}
+
+export default TimeDisplay
diff --git a/src/components/Icons/BinIcon.jsx b/src/components/Icons/BinIcon.jsx
new file mode 100644
index 0000000..bdf80a7
--- /dev/null
+++ b/src/components/Icons/BinIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/binicon.min.svg'
+
+const BinIcon = (props) =>
+
+export default BinIcon
diff --git a/src/components/Icons/CheckIcon.jsx b/src/components/Icons/CheckIcon.jsx
new file mode 100644
index 0000000..438e83f
--- /dev/null
+++ b/src/components/Icons/CheckIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/checkicon.min.svg'
+
+const CheckIcon = (props) =>
+
+export default CheckIcon
diff --git a/src/components/Icons/CollapseSidebarIcon.jsx b/src/components/Icons/CollapseSidebarIcon.jsx
new file mode 100644
index 0000000..0f8685b
--- /dev/null
+++ b/src/components/Icons/CollapseSidebarIcon.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/collapsesidebaricon.min.svg'
+
+const CollapseSidebarIcon = (props) => (
+
+)
+
+export default CollapseSidebarIcon
diff --git a/src/components/Icons/ControlIcon.jsx b/src/components/Icons/ControlIcon.jsx
new file mode 100644
index 0000000..86bfcc5
--- /dev/null
+++ b/src/components/Icons/ControlIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/controlicon.min.svg'
+
+const ControlIcon = (props) =>
+
+export default ControlIcon
diff --git a/src/components/Icons/CopyIcon.jsx b/src/components/Icons/CopyIcon.jsx
new file mode 100644
index 0000000..22782bf
--- /dev/null
+++ b/src/components/Icons/CopyIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/copyicon.min.svg'
+
+const CopyIcon = (props) =>
+
+export default CopyIcon
diff --git a/src/components/Icons/EditIcon.jsx b/src/components/Icons/EditIcon.jsx
new file mode 100644
index 0000000..c729446
--- /dev/null
+++ b/src/components/Icons/EditIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/editicon.min.svg'
+
+const EditIcon = (props) =>
+
+export default EditIcon
diff --git a/src/components/Icons/ExpandSidebarIcon.jsx b/src/components/Icons/ExpandSidebarIcon.jsx
new file mode 100644
index 0000000..2f07845
--- /dev/null
+++ b/src/components/Icons/ExpandSidebarIcon.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/expandsidebaricon.min.svg'
+
+const ExpandSidebarIcon = (props) => (
+
+)
+
+export default ExpandSidebarIcon
diff --git a/src/components/Icons/FilamentIcon.jsx b/src/components/Icons/FilamentIcon.jsx
index 92067cc..b8090ca 100644
--- a/src/components/Icons/FilamentIcon.jsx
+++ b/src/components/Icons/FilamentIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/filamenticon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/filamenticon.min.svg'
const FilamentIcon = (props) =>
diff --git a/src/components/Icons/FilamentStockIcon.jsx b/src/components/Icons/FilamentStockIcon.jsx
index 2b0ad66..6a2ca49 100644
--- a/src/components/Icons/FilamentStockIcon.jsx
+++ b/src/components/Icons/FilamentStockIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/filamentstockicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/filamentstockicon.min.svg'
const FilamentStockIcon = (props) => (
diff --git a/src/components/Icons/GCodeFileIcon.jsx b/src/components/Icons/GCodeFileIcon.jsx
index f686279..502c119 100644
--- a/src/components/Icons/GCodeFileIcon.jsx
+++ b/src/components/Icons/GCodeFileIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/gcodefileicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/gcodefileicon.min.svg'
const GCodeFileIcon = (props) =>
diff --git a/src/components/Icons/InfoCircleIcon.jsx b/src/components/Icons/InfoCircleIcon.jsx
new file mode 100644
index 0000000..5d9ce84
--- /dev/null
+++ b/src/components/Icons/InfoCircleIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/infocircleicon.min.svg'
+
+const InfoCircleIcon = (props) =>
+
+export default InfoCircleIcon
diff --git a/src/components/Icons/InfoIcon.jsx b/src/components/Icons/InfoIcon.jsx
new file mode 100644
index 0000000..ac518bc
--- /dev/null
+++ b/src/components/Icons/InfoIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/infoicon.min.svg'
+
+const InfoIcon = (props) =>
+
+export default InfoIcon
diff --git a/src/components/Icons/InventoryIcon.jsx b/src/components/Icons/InventoryIcon.jsx
new file mode 100644
index 0000000..dd14da3
--- /dev/null
+++ b/src/components/Icons/InventoryIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/inventoryicon.min.svg'
+
+const InventoryIcon = (props) =>
+
+export default InventoryIcon
diff --git a/src/components/Icons/JobIcon.jsx b/src/components/Icons/JobIcon.jsx
new file mode 100644
index 0000000..c80bfe8
--- /dev/null
+++ b/src/components/Icons/JobIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/jobicon.min.svg'
+
+const JobIcon = (props) =>
+
+export default JobIcon
diff --git a/src/components/Icons/LevelBedIcon.jsx b/src/components/Icons/LevelBedIcon.jsx
index 6d45c42..12fe88e 100644
--- a/src/components/Icons/LevelBedIcon.jsx
+++ b/src/components/Icons/LevelBedIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/levelbedicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/levelbedicon.min.svg'
const LevelBedIcon = (props) =>
diff --git a/src/components/Icons/MaterialIcon.jsx b/src/components/Icons/MaterialIcon.jsx
index 324157d..762a00d 100644
--- a/src/components/Icons/MaterialIcon.jsx
+++ b/src/components/Icons/MaterialIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/materialicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/materialicon.min.svg'
const MaterialIcon = (props) =>
diff --git a/src/components/Icons/NewWindowIcon.jsx b/src/components/Icons/NewWindowIcon.jsx
index 4e42a99..568fcd4 100644
--- a/src/components/Icons/NewWindowIcon.jsx
+++ b/src/components/Icons/NewWindowIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/newwindowicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/newwindowicon.min.svg'
const NewWindowIcon = (props) =>
diff --git a/src/components/Icons/PartIcon.jsx b/src/components/Icons/PartIcon.jsx
index 4644308..aa6620c 100644
--- a/src/components/Icons/PartIcon.jsx
+++ b/src/components/Icons/PartIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/particon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/particon.min.svg'
const PartIcon = (props) =>
diff --git a/src/components/Icons/PartStockIcon.jsx b/src/components/Icons/PartStockIcon.jsx
index 225d448..d5cec0a 100644
--- a/src/components/Icons/PartStockIcon.jsx
+++ b/src/components/Icons/PartStockIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/partstockicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/partstockicon.min.svg'
const PartStockIcon = (props) =>
diff --git a/src/components/Icons/PassKeysIcon.jsx b/src/components/Icons/PassKeysIcon.jsx
index cfdc38e..964bc1c 100644
--- a/src/components/Icons/PassKeysIcon.jsx
+++ b/src/components/Icons/PassKeysIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/passkeysicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/passkeysicon.min.svg'
const PassKeysIcon = (props) =>
diff --git a/src/components/Icons/PauseIcon.jsx b/src/components/Icons/PauseIcon.jsx
new file mode 100644
index 0000000..2f4c922
--- /dev/null
+++ b/src/components/Icons/PauseIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/pauseicon.min.svg'
+
+const PauseIcon = (props) =>
+
+export default PauseIcon
diff --git a/src/components/Icons/PersonIcon.jsx b/src/components/Icons/PersonIcon.jsx
new file mode 100644
index 0000000..854e658
--- /dev/null
+++ b/src/components/Icons/PersonIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/personicon.min.svg'
+
+const PersonIcon = (props) =>
+
+export default PersonIcon
diff --git a/src/components/Icons/PlayIcon.jsx b/src/components/Icons/PlayIcon.jsx
new file mode 100644
index 0000000..39fc085
--- /dev/null
+++ b/src/components/Icons/PlayIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/playicon.min.svg'
+
+const PlayIcon = (props) =>
+
+export default PlayIcon
diff --git a/src/components/Icons/PlusIcon.jsx b/src/components/Icons/PlusIcon.jsx
new file mode 100644
index 0000000..b7b6a3f
--- /dev/null
+++ b/src/components/Icons/PlusIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/plusicon.min.svg'
+
+const PlusIcon = (props) =>
+
+export default PlusIcon
diff --git a/src/components/Icons/PlusMinusIcon.jsx b/src/components/Icons/PlusMinusIcon.jsx
index 123265f..47a3aba 100644
--- a/src/components/Icons/PlusMinusIcon.jsx
+++ b/src/components/Icons/PlusMinusIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/plusminusicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/plusminusicon.min.svg'
const PlusMinusIcon = (props) =>
diff --git a/src/components/Icons/PrinterIcon.jsx b/src/components/Icons/PrinterIcon.jsx
new file mode 100644
index 0000000..3d00f58
--- /dev/null
+++ b/src/components/Icons/PrinterIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/printericon.min.svg'
+
+const PrinterIcon = (props) =>
+
+export default PrinterIcon
diff --git a/src/components/Icons/ProductIcon.jsx b/src/components/Icons/ProductIcon.jsx
index cd82c6e..681f008 100644
--- a/src/components/Icons/ProductIcon.jsx
+++ b/src/components/Icons/ProductIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/producticon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/producticon.min.svg'
const ProductIcon = (props) =>
diff --git a/src/components/Icons/ProductStockIcon.jsx b/src/components/Icons/ProductStockIcon.jsx
index c6ff187..5807245 100644
--- a/src/components/Icons/ProductStockIcon.jsx
+++ b/src/components/Icons/ProductStockIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/productstockicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/productstockicon.min.svg'
const ProductStockIcon = (props) => (
diff --git a/src/components/Icons/ProductionIcon.jsx b/src/components/Icons/ProductionIcon.jsx
new file mode 100644
index 0000000..bb09eea
--- /dev/null
+++ b/src/components/Icons/ProductionIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/productionicon.min.svg'
+
+const ProductionIcon = (props) =>
+
+export default ProductionIcon
diff --git a/src/components/Icons/ReloadIcon.jsx b/src/components/Icons/ReloadIcon.jsx
new file mode 100644
index 0000000..9044ea4
--- /dev/null
+++ b/src/components/Icons/ReloadIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/reloadicon.min.svg'
+
+const ReloadIcon = (props) =>
+
+export default ReloadIcon
diff --git a/src/components/Icons/StockAuditIcon.jsx b/src/components/Icons/StockAuditIcon.jsx
new file mode 100644
index 0000000..fc93bcb
--- /dev/null
+++ b/src/components/Icons/StockAuditIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/stockauditicon.min.svg'
+
+const StockAuditIcon = (props) =>
+
+export default StockAuditIcon
diff --git a/src/components/Icons/StockAuditLevelIcon.jsx b/src/components/Icons/StockAuditLevelIcon.jsx
new file mode 100644
index 0000000..ed82f8f
--- /dev/null
+++ b/src/components/Icons/StockAuditLevelIcon.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/stockauditlevelicon.min.svg'
+
+const StockAuditLevelIcon = (props) => (
+
+)
+
+export default StockAuditLevelIcon
diff --git a/src/components/Icons/SubJobIcon.jsx b/src/components/Icons/SubJobIcon.jsx
new file mode 100644
index 0000000..cd909e8
--- /dev/null
+++ b/src/components/Icons/SubJobIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/subjobicon.min.svg'
+
+const SubJobIcon = (props) =>
+
+export default SubJobIcon
diff --git a/src/components/Icons/UnloadIcon.jsx b/src/components/Icons/UnloadIcon.jsx
index 747361e..b76bbc9 100644
--- a/src/components/Icons/UnloadIcon.jsx
+++ b/src/components/Icons/UnloadIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/unloadicon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/unloadicon.min.svg'
const UnloadIcon = (props) =>
diff --git a/src/components/Icons/VendorIcon.jsx b/src/components/Icons/VendorIcon.jsx
index 24a7a09..d0e924b 100644
--- a/src/components/Icons/VendorIcon.jsx
+++ b/src/components/Icons/VendorIcon.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import Icon from '@ant-design/icons'
-import { ReactComponent as CustomIconSvg } from '../../assets/icons/vendoricon.svg'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/vendoricon.min.svg'
const VendorIcon = (props) =>
diff --git a/src/components/Icons/XMarkIcon.jsx b/src/components/Icons/XMarkIcon.jsx
new file mode 100644
index 0000000..0e77312
--- /dev/null
+++ b/src/components/Icons/XMarkIcon.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import { ReactComponent as CustomIconSvg } from '../../assets/icons/xmarkicon.min.svg'
+
+const XMarkIcon = (props) =>
+
+export default XMarkIcon