{
setNewFilamentStockOpen(false)
messageApi.success('New filament stock created successfully.')
- fetchFilamentStocksData()
+ tableRef.current?.reload()
}}
reset={newFilamentStockOpen}
/>
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
index 9fd4349..9971d81 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@@ -10,7 +10,8 @@ import {
Typography,
Form,
Badge,
- Collapse
+ Collapse,
+ Flex
} from 'antd'
import { LoadingOutlined, CaretRightOutlined } from '@ant-design/icons'
import IdText from '../../common/IdText'
@@ -132,155 +133,158 @@ const FilamentStockInfo = () => {
return (
{contextHolder}
- updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
-
- Filament Stock Information
-
- }
- key='1'
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
-
-
+ ) : (
+ 'n/a'
+ )}
+
+
+ {filamentStockData.startingGrossWeight ? (
+
+
+
+ {filamentStockData.startingNetWeight.toFixed(2) + 'g'}
+
+
+ {filamentStockData.startingGrossWeight.toFixed(2) +
+ 'g'}
+
+
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
+
- updateCollapseState('events', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
- Filament Stock Events
-
- }
- key='2'
+ updateCollapseState('events', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
-
-
+
+ Filament Stock Events
+
+ }
+ key='2'
+ >
+
+
+
+
)
}
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/LoadFilamentStock.jsx b/src/components/Dashboard/Inventory/FilamentStocks/LoadFilamentStock.jsx
index 6c878a7..cb3598d 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/LoadFilamentStock.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/LoadFilamentStock.jsx
@@ -9,6 +9,7 @@ import {
Descriptions,
Alert
} from 'antd'
+import { useMediaQuery } from 'react-responsive'
import PropTypes from 'prop-types'
import { SocketContext } from '../../context/SocketContext'
@@ -28,6 +29,8 @@ const LoadFilamentStock = ({
printer = null,
filamentStockLoaded = false
}) => {
+ const isMobile = useMediaQuery({ maxWidth: 768 })
+
LoadFilamentStock.propTypes = {
onOk: PropTypes.func.isRequired,
reset: PropTypes.bool.isRequired,
@@ -266,16 +269,18 @@ const LoadFilamentStock = ({
return (
-
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
diff --git a/src/components/Dashboard/Inventory/FilamentStocks/UnloadFilamentStock.jsx b/src/components/Dashboard/Inventory/FilamentStocks/UnloadFilamentStock.jsx
index db06633..215880f 100644
--- a/src/components/Dashboard/Inventory/FilamentStocks/UnloadFilamentStock.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/UnloadFilamentStock.jsx
@@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect } from 'react'
import { Form, Button, Typography, Flex, Steps, Divider, Alert } from 'antd'
+import { useMediaQuery } from 'react-responsive'
import PropTypes from 'prop-types'
import { SocketContext } from '../../context/SocketContext'
@@ -18,6 +19,7 @@ const UnloadFilamentStock = ({ onOk, reset, printer = null }) => {
}
const { socket } = useContext(SocketContext)
+ const isMobile = useMediaQuery({ maxWidth: 768 })
const initialUnloadFilamentStockForm = {
printer: printer
@@ -194,16 +196,18 @@ const UnloadFilamentStock = ({ onOk, reset, printer = null }) => {
return (
<Flex gap={'middle'}>
- <div style={{ minWidth: '160px' }}>
- <Steps
- current={currentStep}
- items={steps}
- direction='vertical'
- style={{ width: 'fit-content' }}
- />
- </div>
+ {!isMobile && (
+ <div style={{ minWidth: '160px' }}>
+ <Steps
+ current={currentStep}
+ items={steps}
+ direction='vertical'
+ style={{ width: 'fit-content' }}
+ />
+ </div>
+ )}
- <Divider type={'vertical'} style={{ height: 'unset' }} />
+ {!isMobile && <Divider type={'vertical'} style={{ height: 'unset' }} />}
<Flex vertical={'true'} style={{ flexGrow: 1 }} gap='middle'>
<Title level={2} style={{ marginTop: 0, marginBottom: 4 }}>
diff --git a/src/components/Dashboard/Inventory/PartStocks.jsx b/src/components/Dashboard/Inventory/PartStocks.jsx
index 49086e9..ec7f42c 100644
--- a/src/components/Dashboard/Inventory/PartStocks.jsx
+++ b/src/components/Dashboard/Inventory/PartStocks.jsx
@@ -1,20 +1,8 @@
// src/partStocks.js
-import React, { useEffect, useState, useContext, useCallback } from 'react'
+import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
-import axios from 'axios'
-import {
- Table,
- Button,
- Flex,
- Space,
- Modal,
- message,
- Dropdown,
- Typography
-} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined } from '@ant-design/icons'
+import { Button, Flex, Space, Modal, message, Dropdown, Typography } from 'antd'
import { AuthContext } from '../context/AuthContext'
@@ -26,64 +14,21 @@ import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import PartStockState from '../common/PartStockState'
import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
import config from '../../../config'
const { Text } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
const PartStocks = () => {
const [messageApi, contextHolder] = message.useMessage()
const navigate = useNavigate()
- const { styles } = useStyle()
-
- const [partStocksData, setPartStocksData] = useState([])
+ const tableRef = useRef()
const [newPartStockOpen, setNewPartStockOpen] = useState(false)
- const [loading, setLoading] = useState(true)
-
const { authenticated } = useContext(AuthContext)
- const fetchPartStocksData = useCallback(async () => {
- try {
- const response = await axios.get(`${config.backendUrl}/partstocks`, {
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true // Important for including cookies
- })
- setPartStocksData(response.data)
- setLoading(false)
- } catch (err) {
- messageApi.info(err)
- }
- }, [messageApi])
-
- useEffect(() => {
- // Fetch initial data
- if (authenticated) {
- fetchPartStocksData()
- }
- }, [authenticated, fetchPartStocksData])
-
const getPartStockActionItems = (id) => {
return {
items: [
@@ -123,7 +68,7 @@ const PartStocks = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => <IdText id={text} type={'partstock'} longId={false} />
},
{
@@ -213,7 +158,7 @@ const PartStocks = () => {
],
onClick: ({ key }) => {
if (key === 'reloadList') {
- fetchPartStocksData()
+ tableRef.current?.reload()
} else if (key === 'newPartStock') {
setNewPartStockOpen(true)
}
@@ -229,14 +174,11 @@ const PartStocks = () => {
<Button>Actions</Button>
</Dropdown>
</Space>
- <Table
- dataSource={partStocksData}
- className={styles.customTable}
+ <DashboardTable
+ ref={tableRef}
columns={columns}
- pagination={false}
- rowKey='_id'
- loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
- scroll={{ y: 'calc(100vh - 270px)' }}
+ url={`${config.backendUrl}/partstocks`}
+ authenticated={authenticated}
/>
</Flex>
<Modal
@@ -247,13 +189,13 @@ const PartStocks = () => {
onCancel={() => {
setNewPartStockOpen(false)
}}
- destroyOnClose
+ destroyOnHidden={true}
>
<NewPartStock
onOk={() => {
setNewPartStockOpen(false)
messageApi.success('New part stock created successfully.')
- fetchPartStocksData()
+ tableRef.current?.reload()
}}
reset={newPartStockOpen}
/>
diff --git a/src/components/Dashboard/Inventory/StockAudits.jsx b/src/components/Dashboard/Inventory/StockAudits.jsx
index 7ccc85c..2febd96 100644
--- a/src/components/Dashboard/Inventory/StockAudits.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits.jsx
@@ -1,10 +1,6 @@
-import React, { useEffect, useState, useContext, useCallback } from 'react'
+import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
-import axios from 'axios'
-
-import { Table, Button, Flex, Space, message, Dropdown, Typography } from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined } from '@ant-design/icons'
+import { Button, Flex, Space, message, Dropdown, Typography } from 'antd'
import { AuthContext } from '../context/AuthContext'
import { SocketContext } from '../context/SocketContext'
@@ -15,78 +11,29 @@ import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
import config from '../../../config'
const { Text } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
const StockAudits = () => {
const [messageApi, contextHolder] = message.useMessage()
const navigate = useNavigate()
- const { styles } = useStyle()
const { socket } = useContext(SocketContext)
-
- const [stockAuditsData, setStockAuditsData] = useState([])
- const [loading, setLoading] = useState(true)
const [initialized, setInitialized] = useState(false)
+ const tableRef = useRef()
const { authenticated } = useContext(AuthContext)
- const fetchStockAuditsData = useCallback(async () => {
- try {
- const response = await axios.get(`${config.backendUrl}/stockaudits`, {
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true
- })
- setStockAuditsData(response.data)
- setLoading(false)
- } catch (err) {
- messageApi.info(err)
- }
- }, [messageApi])
-
- useEffect(() => {
- if (authenticated) {
- fetchStockAuditsData()
- }
- }, [authenticated, fetchStockAuditsData])
-
- useEffect(() => {
+ React.useEffect(() => {
if (socket && !initialized) {
setInitialized(true)
socket.on('notify_stockaudit_update', (updateData) => {
console.log('Received stock audit update:', updateData)
- setStockAuditsData((prevData) => {
- return prevData.map((audit) => {
- if (audit._id === updateData._id) {
- return {
- ...audit,
- ...updateData
- }
- }
- return audit
- })
- })
+ if (tableRef.current) {
+ tableRef.current.updateData(updateData._id, updateData)
+ }
})
}
@@ -128,7 +75,7 @@ const StockAudits = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => <IdText id={text} type={'stockaudit'} longId={false} />
},
{
@@ -203,7 +150,7 @@ const StockAudits = () => {
],
onClick: ({ key }) => {
if (key === 'reloadList') {
- fetchStockAuditsData()
+ tableRef.current?.reload()
} else if (key === 'newStockAudit') {
// TODO: Implement new stock audit creation
messageApi.info('New stock audit creation not implemented yet')
@@ -220,14 +167,11 @@ const StockAudits = () => {
<Button>Actions</Button>
</Dropdown>
</Space>
- <Table
- dataSource={stockAuditsData}
- className={styles.customTable}
+ <DashboardTable
+ ref={tableRef}
columns={columns}
- pagination={false}
- rowKey='_id'
- loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
- scroll={{ y: 'calc(100vh - 270px)' }}
+ url={`${config.backendUrl}/stockaudits`}
+ authenticated={authenticated}
/>
</Flex>
</>
diff --git a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
index 12abd6d..eada020 100644
--- a/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
+++ b/src/components/Dashboard/Inventory/StockAudits/StockAuditInfo.jsx
@@ -103,7 +103,7 @@ const StockAuditInfo = () => {
title: 'Item ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => (
<IdText id={text} type={'stockaudititem'} longId={false} />
)
diff --git a/src/components/Dashboard/Inventory/StockEvents.jsx b/src/components/Dashboard/Inventory/StockEvents.jsx
index 8b762a7..36605d7 100644
--- a/src/components/Dashboard/Inventory/StockEvents.jsx
+++ b/src/components/Dashboard/Inventory/StockEvents.jsx
@@ -1,21 +1,15 @@
-import React, { useEffect, useState, useContext, useCallback } from 'react'
-import axios from 'axios'
-
+import React, { useState, useContext, useRef } from 'react'
import {
Button,
Flex,
Space,
- message,
- Spin,
Popover,
Checkbox,
Dropdown,
- Table,
Typography,
Input
} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined, AuditOutlined } from '@ant-design/icons'
+import { AuditOutlined } from '@ant-design/icons'
import { AuthContext } from '../context/AuthContext'
import { SocketContext } from '../context/SocketContext'
@@ -28,63 +22,24 @@ import PlayCircleIcon from '../../Icons/PlayCircleIcon'
import XMarkIcon from '../../Icons/XMarkIcon'
import CheckIcon from '../../Icons/CheckIcon'
import useColumnVisibility from '../hooks/useColumnVisibility'
+import DashboardTable from '../common/DashboardTable'
import config from '../../../config'
const { Text } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
const StockEvents = () => {
- const [messageApi, contextHolder] = message.useMessage()
- const { styles } = useStyle()
const { socket } = useContext(SocketContext)
const [initialized, setInitialized] = useState(false)
-
- // Helper function to convert text to camelCase
- const toCamelCase = (text) => {
- return text
- .toLowerCase()
- .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
- return index === 0 ? word.toLowerCase() : word.toUpperCase()
- })
- .replace(/\s+/g, '')
- }
-
- const [stockEventsData, setStockEventsData] = useState([])
- const [page, setPage] = useState(1)
- const [hasMore, setHasMore] = useState(true)
- const [loading, setLoading] = useState(true)
- const [lazyLoading, setLazyLoading] = useState(false)
-
- const [filters, setFilters] = useState({})
- const [sorter, setSorter] = useState({
- field: 'createdAt',
- order: 'descend'
- })
+ const tableRef = useRef()
// Column definitions for visibility
const columns = [
{
title: '',
key: 'icon',
- width: 50,
+ width: 40,
+ fixed: 'left',
render: (record) => {
switch (record.type.toLowerCase()) {
case 'subjob':
@@ -103,6 +58,7 @@ const StockEvents = () => {
dataIndex: 'type',
key: 'type',
width: 200,
+ fixed: 'left',
sorter: true,
filterDropdown: ({
setSelectedKeys,
@@ -118,6 +74,15 @@ const StockEvents = () => {
propertyName: 'type'
})
},
+ {
+ title: 'ID',
+ key: 'id',
+ dataIndex: '_id',
+ width: 170,
+ render: (id) => {
+ return <IdText id={id} longId={false} type={'stockevent'} />
+ }
+ },
{
title: <PlusMinusIcon />,
dataIndex: 'value',
@@ -134,26 +99,17 @@ const StockEvents = () => {
}
},
{
- title: 'Linked ID',
- key: 'linkedId',
- width: 100,
+ title: 'Stock ID',
+ key: 'stockId',
+ width: 170,
render: (record) => {
- if (record.subJob?.number) {
+ if (record.filamentStock?._id) {
return (
<IdText
- id={record.subJob.number.toString().padStart(6, '0')}
+ id={record.filamentStock._id}
longId={false}
- type={'subjob'}
- />
- )
- }
- if (record.stockAudit) {
- return (
- <IdText
- id={record.stockAudit._id}
- longId={false}
- type={'stockaudit'}
showHyperlink={true}
+ type={'filamentstock'}
/>
)
}
@@ -161,21 +117,41 @@ const StockEvents = () => {
}
},
{
- title: 'Job ID',
- key: 'jobId',
- width: 100,
+ title: 'Linked IDs',
+ key: 'linkedIds',
+ width: 170 * 2,
render: (record) => {
- if (record.subJob) {
- return (
- <IdText
- id={record.job}
- longId={false}
- type={'job'}
- showHyperlink={true}
- />
- )
+ const ids = (
+ <Space size={'middle'}>
+ {record.job ? (
+ <IdText
+ id={record.job}
+ longId={false}
+ showHyperlink={true}
+ type={'job'}
+ />
+ ) : null}
+ {record.subJob?.number ? (
+ <IdText
+ id={record.subJob.number.toString().padStart(6, '0')}
+ longId={false}
+ type={'subjob'}
+ />
+ ) : null}
+ {record.stockAudit ? (
+ <IdText
+ id={record.stockAudit._id}
+ longId={false}
+ type={'stockaudit'}
+ showHyperlink={true}
+ />
+ ) : null}
+ </Space>
+ )
+ if (!record.stockAudit && !record.job && !record.subJob) {
+ return 'n/a'
}
- return 'n/a'
+ return ids
}
},
{
@@ -252,79 +228,15 @@ const StockEvents = () => {
const { authenticated } = useContext(AuthContext)
- const fetchStockEventsData = useCallback(
- async (pageNum = 1, append = false) => {
- try {
- const response = await axios.get(`${config.backendUrl}/stockevents`, {
- params: {
- page: pageNum,
- limit: 25,
- type: filters.type,
- ...filters,
- sort: sorter.field,
- order: sorter.order
- },
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true
- })
-
- const newData = response.data
- setHasMore(newData.length === 25)
-
- if (append) {
- setStockEventsData((prev) => [...prev, ...newData])
- } else {
- setStockEventsData(newData)
- }
-
- setLoading(false)
- setLazyLoading(false)
- } catch (error) {
- if (error.response) {
- messageApi.error(
- 'Error fetching stock events:',
- error.response.status
- )
- } else {
- messageApi.error(
- 'An unexpected error occurred. Please try again later.'
- )
- }
- setLoading(false)
- setLazyLoading(false)
- }
- },
- [messageApi, filters, sorter]
- )
-
- useEffect(() => {
- if (authenticated) {
- fetchStockEventsData()
- }
- }, [authenticated, fetchStockEventsData])
-
- useEffect(() => {
+ React.useEffect(() => {
// Add WebSocket event listener for real-time updates
if (socket && !initialized) {
setInitialized(true)
socket.on('notify_stockevent_update', (updateData) => {
console.log('Received stock event update:', updateData)
- setStockEventsData((prevData) => {
- return prevData.map((stockEvent) => {
- if (stockEvent?._id) {
- if (stockEvent._id === updateData._id) {
- return {
- ...stockEvent,
- ...updateData
- }
- } else {
- return stockEvent
- }
- }
- })
- })
+ if (tableRef.current) {
+ tableRef.current.updateData(updateData._id, updateData)
+ }
})
}
@@ -336,27 +248,6 @@ const StockEvents = () => {
}
}, [socket, initialized])
- const handleScroll = useCallback(
- (e) => {
- const { target } = e
- const scrollHeight = target.scrollHeight
- const scrollTop = target.scrollTop
- const clientHeight = target.clientHeight
-
- if (
- scrollHeight - scrollTop - clientHeight < 100 &&
- !lazyLoading &&
- hasMore
- ) {
- setLazyLoading(true)
- const nextPage = page + 1
- setPage(nextPage)
- fetchStockEventsData(nextPage, true)
- }
- },
- [page, lazyLoading, hasMore, fetchStockEventsData]
- )
-
const actionItems = {
items: [
{
@@ -367,34 +258,11 @@ const StockEvents = () => {
],
onClick: ({ key }) => {
if (key === 'reloadList') {
- setPage(1)
- fetchStockEventsData(1)
+ tableRef.current?.reload()
}
}
}
- const handleTableChange = (pagination, filters, sorter) => {
- const newFilters = {}
- Object.entries(filters).forEach(([key, value]) => {
- if (value && value.length > 0) {
- // Convert type filter to camelCase
- if (key === 'type') {
- newFilters[key] = toCamelCase(value[0])
- } else {
- newFilters[key] = value[0]
- }
- }
- })
- setPage(1)
- setFilters(newFilters)
- setSorter({
- field: sorter.field,
- order: sorter.order
- })
- // Trigger a new fetch with the updated filters
- fetchStockEventsData(1)
- }
-
const getViewDropdownItems = () => {
const columnItems = columns
.filter((col) => col.key && col.title !== '')
@@ -426,7 +294,6 @@ const StockEvents = () => {
return (
<>
<Flex vertical={'true'} gap='large'>
- {contextHolder}
<Flex justify={'space-between'}>
<Space size='small'>
<Dropdown menu={actionItems}>
@@ -440,19 +307,13 @@ const StockEvents = () => {
<Button>View</Button>
</Popover>
</Space>
- {lazyLoading && <Spin indicator={<LoadingOutlined />} />}
</Flex>
- <Table
- dataSource={stockEventsData}
+
+ <DashboardTable
+ ref={tableRef}
columns={visibleColumns}
- className={styles.customTable}
- pagination={false}
- scroll={{ y: 'calc(100vh - 270px)' }}
- rowKey='_id'
- loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
- onScroll={handleScroll}
- onChange={handleTableChange}
- showSorterTooltip={false}
+ url={`${config.backendUrl}/stockevents`}
+ authenticated={authenticated}
/>
</Flex>
</>
diff --git a/src/components/Dashboard/Management/AuditLogs.jsx b/src/components/Dashboard/Management/AuditLogs.jsx
new file mode 100644
index 0000000..b3a0bd3
--- /dev/null
+++ b/src/components/Dashboard/Management/AuditLogs.jsx
@@ -0,0 +1,333 @@
+import React, { useContext, useRef } from 'react'
+import {
+ Button,
+ Flex,
+ Space,
+ Typography,
+ Popover,
+ Checkbox,
+ Dropdown,
+ Tag,
+ Descriptions,
+ Input,
+ Badge
+} from 'antd'
+
+import { AuthContext } from '../context/AuthContext'
+import IdText from '../common/IdText'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
+
+import config from '../../../config'
+import AuditLogIcon from '../../Icons/AuditLogIcon'
+import XMarkIcon from '../../Icons/XMarkIcon'
+import CheckIcon from '../../Icons/CheckIcon'
+
+const { Text } = Typography
+
+const formatPropertyName = (name) => {
+ return name
+ .replace(/([A-Z])/g, ' $1')
+ .replace(/^./, (str) => str.toUpperCase())
+}
+
+const isObjectId = (value) => {
+ return typeof value === 'string' && /^[0-9a-fA-F]{24}$/.test(value)
+}
+
+const formatValue = (value, propertyName) => {
+ if (value === null || value === undefined || value === '') {
+ return <Text type='secondary'>n/a</Text>
+ }
+
+ // Handle colors specifically
+ if (propertyName === 'color' && value) {
+ return <Badge color={value} text={value} />
+ }
+
+ if (propertyName === 'state' && typeof value === 'object' && value.type) {
+ return (
+ <Text>{value.type.charAt(0).toUpperCase() + value.type.slice(1)}</Text>
+ )
+ }
+
+ // Check if the value is a timestamp (ISO date string)
+ if (
+ typeof value === 'string' &&
+ /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/.test(value)
+ ) {
+ return <TimeDisplay dateTime={value} />
+ }
+
+ if (typeof value === 'boolean') {
+ return (
+ <Tag color={value ? 'success' : 'error'} style={{ margin: 0 }}>
+ {value ? 'Yes' : 'No'}
+ </Tag>
+ )
+ }
+
+ if (isObjectId(value)) {
+ return (
+ <IdText
+ id={value}
+ type={propertyName.toLowerCase().replaceAll('current', '')}
+ longId={false}
+ showHyperlink={true}
+ />
+ )
+ }
+
+ if (typeof value === 'object') {
+ return <Text>{JSON.stringify(value)}</Text>
+ }
+
+ return <Text>{value}</Text>
+}
+
+const AuditLogs = () => {
+ const tableRef = useRef()
+
+ // Column definitions
+ const columns = [
+ {
+ title: '',
+ dataIndex: '',
+ key: '',
+ width: 40,
+ fixed: 'left',
+ render: () => <AuditLogIcon />
+ },
+ {
+ title: 'ID',
+ dataIndex: '_id',
+ key: 'id',
+ fixed: 'left',
+ width: 180,
+ render: (text) => <IdText id={text} type={'auditlog'} longId={false} />,
+ filterDropdown: ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters
+ }) =>
+ getFilterDropdown({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName: 'ID'
+ }),
+ onFilter: (value, record) =>
+ record._id.toLowerCase().includes(value.toLowerCase()),
+ sorter: true
+ },
+ {
+ title: 'Owner Name',
+ dataIndex: ['owner', 'name'],
+ key: 'name',
+ width: 200,
+ fixed: 'left',
+ filterDropdown: ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters
+ }) =>
+ getFilterDropdown({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName: 'name'
+ }),
+ onFilter: (value, record) =>
+ record.owner?.name?.toLowerCase().includes(value.toLowerCase()),
+ sorter: true
+ },
+ {
+ title: 'Owner',
+ key: 'owner',
+ width: 180,
+ render: (record) => (
+ <IdText
+ id={record.owner._id}
+ type={record.ownerModel.toLowerCase()}
+ longId={false}
+ showHyperlink={true}
+ />
+ )
+ },
+ {
+ title: 'Target',
+ key: 'target',
+ width: 180,
+ render: (record) => (
+ <IdText
+ id={record.target}
+ type={record.targetModel.toLowerCase()}
+ longId={false}
+ showHyperlink={true}
+ />
+ )
+ },
+ {
+ title: 'Properties',
+ dataIndex: 'type',
+ key: 'type',
+ width: 550,
+ render: (_, record) => {
+ const oldValue = record.oldValue || {}
+ const newValue = record.newValue || {}
+
+ return (
+ <Descriptions size='small' column={1}>
+ {Object.keys(newValue).map((key) => (
+ <Descriptions.Item key={key} label={formatPropertyName(key)}>
+ <Space>
+ {formatValue(oldValue[key], key)}
+ <Text type='secondary'>→</Text>
+ {formatValue(newValue[key], key)}
+ </Space>
+ </Descriptions.Item>
+ ))}
+ </Descriptions>
+ )
+ }
+ },
+ {
+ title: 'Timestamp',
+ dataIndex: 'createdAt',
+ key: 'createdAt',
+ width: 180,
+ fixed: 'right',
+ render: (createdAt) => {
+ if (createdAt) {
+ return <TimeDisplay dateTime={createdAt} />
+ } else {
+ return 'n/a'
+ }
+ },
+ sorter: true,
+ defaultSortOrder: 'descend'
+ }
+ ]
+
+ const getFilterDropdown = ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName
+ }) => {
+ return (
+ <div style={{ padding: 8 }}>
+ <Space.Compact>
+ <Input
+ placeholder={'Search ' + propertyName}
+ value={selectedKeys[0]}
+ onChange={(e) =>
+ setSelectedKeys(e.target.value ? [e.target.value] : [])
+ }
+ onPressEnter={() => confirm()}
+ style={{ width: 200, display: 'block' }}
+ />
+ <Button
+ onClick={() => {
+ clearFilters()
+ confirm()
+ }}
+ icon={<XMarkIcon />}
+ />
+ <Button
+ type='primary'
+ onClick={() => confirm()}
+ icon={<CheckIcon />}
+ />
+ </Space.Compact>
+ </div>
+ )
+ }
+
+ const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
+ 'AuditLogs',
+ columns
+ )
+
+ const { authenticated } = useContext(AuthContext)
+
+ const actionItems = {
+ items: [
+ {
+ label: 'Reload List',
+ key: 'reloadList',
+ icon: <ReloadIcon />
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'reloadList') {
+ tableRef.current?.reload()
+ }
+ }
+ }
+
+ const getViewDropdownItems = () => {
+ const columnItems = columns
+ .filter((col) => col.key && col.title !== '')
+ .map((col) => (
+ <Checkbox
+ checked={columnVisibility[col.key]}
+ key={col.key}
+ onChange={(e) => {
+ updateColumnVisibility(col.key, e.target.checked)
+ }}
+ >
+ {col.title}
+ </Checkbox>
+ ))
+
+ return (
+ <Flex vertical>
+ <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
+ {columnItems}
+ </Flex>
+ </Flex>
+ )
+ }
+
+ const visibleColumns = columns.filter(
+ (col) => !col.key || columnVisibility[col.key]
+ )
+
+ return (
+ <>
+ <Flex vertical={'true'} gap='large'>
+ <Flex justify={'space-between'}>
+ <Space size='small'>
+ <Dropdown menu={actionItems}>
+ <Button>Actions</Button>
+ </Dropdown>
+ <Popover
+ content={getViewDropdownItems()}
+ placement='bottomLeft'
+ arrow={false}
+ >
+ <Button>View</Button>
+ </Popover>
+ </Space>
+ </Flex>
+
+ <DashboardTable
+ ref={tableRef}
+ columns={visibleColumns}
+ url={`${config.backendUrl}/auditlogs`}
+ authenticated={authenticated}
+ />
+ </Flex>
+ </>
+ )
+}
+
+export default AuditLogs
diff --git a/src/components/Dashboard/Management/Filaments.jsx b/src/components/Dashboard/Management/Filaments.jsx
index 03dec51..05f7a97 100644
--- a/src/components/Dashboard/Management/Filaments.jsx
+++ b/src/components/Dashboard/Management/Filaments.jsx
@@ -282,7 +282,7 @@ const Filaments = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => <IdText id={text} type={'filament'} longId={false} />,
filterDropdown: ({
setSelectedKeys,
@@ -493,7 +493,7 @@ const Filaments = () => {
onCancel={() => {
setNewFilamentOpen(false)
}}
- destroyOnClose
+ destroyOnHidden={true}
>
<NewFilament
onOk={() => {
diff --git a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
index ee3c092..9980bf5 100644
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@@ -34,7 +34,7 @@ import useCollapseState from '../../hooks/useCollapseState'
import config from '../../../../config.js'
-const { Title, Link } = Typography
+const { Title, Link, Text } = Typography
const FilamentInfo = () => {
const [filamentData, setFilamentData] = useState(null)
@@ -211,296 +211,333 @@ const FilamentInfo = () => {
return (
<div style={{ height: '100%', minHeight: 0, overflowY: 'auto' }}>
{contextHolder}
- <Collapse
- ghost
- collapsible='icon'
- activeKey={collapseState.info ? ['1'] : []}
- onChange={(keys) => updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
- <CaretRightOutlined
- rotate={isActive ? 90 : 0}
- style={{ paddingTop: '9px' }}
- />
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
- <Collapse.Panel
- header={
- <Flex
- align='center'
- justify='space-between'
- style={{ width: '100%' }}
- >
- <Title level={5} style={{ margin: 0 }}>
- Filament Information
-
-
- }
- danger
- onClick={() => setIsDeleteModalOpen(true)}
- loading={loading}
- />
- {isEditing ? (
- <>
- }
- type='primary'
- onClick={updateFilamentInfo}
- loading={loading}
- />
- }
- onClick={cancelEditing}
- disabled={loading}
- />
-
- ) : (
- } onClick={startEditing} />
- )}
-
-
- }
- key='1'
+
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
+ }
+ key='1'
>
-
-
- {filamentData.id ? (
-
- ) : (
- 'n/a'
- )}
-
-
-
-
+
+
+ {filamentData.id ? (
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
-
- {isEditing ? (
-
-
-
- ) : (
- filamentData.name || 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : (
+ filamentData.name || 'n/a'
+ )}
+
+
-
-
-
+
+
+
-
- {isEditing ? (
-
-
-
- ) : (
- filamentData.vendor.name || 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : filamentData.vendor.name ? (
+ {filamentData.vendor.name}
+ ) : (
+ n/a
+ )}
+
+
-
-
-
+
+
+
-
- {isEditing ? (
-
-
-
- ) : (
- filamentData.type || 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : (
+ filamentData.type || 'n/a'
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : filamentData.cost ? (
- `£${filamentData.cost}/kg`
- ) : (
- 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : filamentData.cost ? (
+ `£${filamentData.cost}/kg`
+ ) : (
+ 'n/a'
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : (
-
- )}
-
+
+
+ {isEditing ? (
+ {
+ return '#' + color.toHex()
+ }}
+ >
+
+
+ ) : (
+
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : filamentData.diameter ? (
- `${filamentData.diameter}mm`
- ) : (
- 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : filamentData.diameter ? (
+ `${filamentData.diameter}mm`
+ ) : (
+ 'n/a'
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : filamentData.density ? (
- `${filamentData.density}g/cm³`
- ) : (
- 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : filamentData.density ? (
+ `${filamentData.density}g/cm³`
+ ) : (
+ 'n/a'
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : filamentData.url ? (
-
- {filamentData.url}
-
- ) : (
- 'n/a'
- )}
-
+
+
+ {isEditing ? (
+
+
+
+ ) : filamentData.url ? (
+
+ {filamentData.url}
+
+ ) : (
+ 'n/a'
+ )}
+
+
-
- {isEditing ? (
-
-
-
- ) : (
- filamentData.barcode || 'n/a'
- )}
-
-
-
-
-
+
+
+ {isEditing ? (
+
+
+
+ ) : (
+ filamentData.barcode || 'n/a'
+ )}
+
+
+
+
+
+
- updateCollapseState('details', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
- Additional Details
-
- }
- key='2'
+ updateCollapseState('details', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
- {/* Add any additional details sections here */}
-
-
+
+ Additional Details
+
+ }
+ key='2'
+ >
+ {/* Add any additional details sections here */}
+
+
+
{
const [messageApi, contextHolder] = message.useMessage()
+ const isMobile = useMediaQuery({ maxWidth: 768 })
const [newFilamentLoading, setNewFilamentLoading] = useState(false)
const [currentStep, setCurrentStep] = useState(0)
@@ -349,16 +351,18 @@ const NewFilament = ({ onOk, reset }) => {
{contextHolder}
-
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
diff --git a/src/components/Dashboard/Management/Materials.jsx b/src/components/Dashboard/Management/Materials.jsx
index 192e942..6fcd766 100644
--- a/src/components/Dashboard/Management/Materials.jsx
+++ b/src/components/Dashboard/Management/Materials.jsx
@@ -168,7 +168,7 @@ const Materials = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => <IdText id={text} type={'material'} longId={false} />
},
{
diff --git a/src/components/Dashboard/Management/NoteTypes.jsx b/src/components/Dashboard/Management/NoteTypes.jsx
new file mode 100644
index 0000000..055a797
--- /dev/null
+++ b/src/components/Dashboard/Management/NoteTypes.jsx
@@ -0,0 +1,321 @@
+import React, { useState, useContext, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ Button,
+ Flex,
+ Space,
+ Modal,
+ Dropdown,
+ message,
+ Checkbox,
+ Popover,
+ Input,
+ Badge,
+ Tag
+} from 'antd'
+import { AuthContext } from '../context/AuthContext'
+import IdText from '../common/IdText'
+import NewNoteType from './NoteTypes/NewNoteType'
+import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
+import PlusIcon from '../../Icons/PlusIcon'
+import ReloadIcon from '../../Icons/ReloadIcon'
+import XMarkIcon from '../../Icons/XMarkIcon'
+import CheckIcon from '../../Icons/CheckIcon'
+import InfoCircleIcon from '../../Icons/InfoCircleIcon'
+import useColumnVisibility from '../hooks/useColumnVisibility'
+
+import config from '../../../config'
+import NoteTypeIcon from '../../Icons/NoteTypeIcon'
+
+const NoteTypes = () => {
+ const [messageApi, contextHolder] = message.useMessage()
+ const navigate = useNavigate()
+ const [newNoteTypeOpen, setNewNoteTypeOpen] = useState(false)
+ const tableRef = useRef()
+ const { authenticated } = useContext(AuthContext)
+
+ const getFilterDropdown = ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName
+ }) => {
+ return (
+ <div style={{ padding: 8 }}>
+ <Space.Compact>
+ <Input
+ placeholder={'Search ' + propertyName}
+ value={selectedKeys[0]}
+ onChange={(e) =>
+ setSelectedKeys(e.target.value ? [e.target.value] : [])
+ }
+ onPressEnter={() => confirm()}
+ style={{ width: 200, display: 'block' }}
+ />
+ <Button
+ onClick={() => {
+ clearFilters()
+ confirm()
+ }}
+ icon={<XMarkIcon />}
+ />
+ <Button
+ type='primary'
+ onClick={() => confirm()}
+ icon={<CheckIcon />}
+ />
+ </Space.Compact>
+ </div>
+ )
+ }
+
+ const getViewDropdownItems = () => {
+ const columnItems = columns
+ .filter((col) => col.key && col.title !== '')
+ .map((col) => (
+ <Checkbox
+ checked={columnVisibility[col.key]}
+ key={col.key}
+ onChange={(e) => {
+ updateColumnVisibility(col.key, e.target.checked)
+ }}
+ >
+ {col.title}
+ </Checkbox>
+ ))
+
+ return (
+ <Flex vertical>
+ <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
+ {columnItems}
+ </Flex>
+ </Flex>
+ )
+ }
+
+ const getNoteTypeActionItems = (id) => {
+ return {
+ items: [
+ {
+ label: 'Info',
+ key: 'info',
+ icon: <InfoCircleIcon />
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'info') {
+ navigate(`/dashboard/management/notetypes/info?noteTypeId=${id}`)
+ }
+ }
+ }
+ }
+
+ const columns = [
+ {
+ title: '',
+ dataIndex: '',
+ key: 'icon',
+ width: 40,
+ fixed: 'left',
+ render: () => <NoteTypeIcon />
+ },
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ width: 200,
+ fixed: 'left',
+ filterDropdown: ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters
+ }) =>
+ getFilterDropdown({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName: 'name'
+ }),
+ onFilter: (value, record) =>
+ record.name.toLowerCase().includes(value.toLowerCase()),
+ sorter: true
+ },
+ {
+ title: 'ID',
+ dataIndex: '_id',
+ key: 'id',
+ width: 180,
+ render: (text) => <IdText id={text} type={'notetype'} longId={false} />,
+ filterDropdown: ({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters
+ }) =>
+ getFilterDropdown({
+ setSelectedKeys,
+ selectedKeys,
+ confirm,
+ clearFilters,
+ propertyName: 'ID'
+ }),
+ onFilter: (value, record) =>
+ record._id.toLowerCase().includes(value.toLowerCase()),
+ sorter: true
+ },
+ {
+ title: 'Color',
+ dataIndex: 'color',
+ key: 'color',
+ width: 120,
+ render: (color) => <Badge color={color} text={color} />
+ },
+ {
+ title: 'Active',
+ dataIndex: 'isActive',
+ key: 'isActive',
+ width: 100,
+ render: (isActive) => (
+ <Tag color={isActive ? 'success' : 'error'}>
+ {isActive ? 'Yes' : 'No'}
+ </Tag>
+ ),
+ sorter: true
+ },
+ {
+ title: 'Created At',
+ dataIndex: 'createdAt',
+ key: 'createdAt',
+ width: 180,
+ render: (createdAt) => {
+ if (createdAt) {
+ return <TimeDisplay dateTime={createdAt} />
+ } else {
+ return 'n/a'
+ }
+ },
+ sorter: true,
+ defaultSortOrder: 'descend'
+ },
+ {
+ title: 'Updated At',
+ dataIndex: 'updatedAt',
+ key: 'updatedAt',
+ width: 180,
+ render: (updatedAt) => {
+ if (updatedAt) {
+ return <TimeDisplay dateTime={updatedAt} />
+ } else {
+ return 'n/a'
+ }
+ },
+ sorter: true,
+ defaultSortOrder: 'descend'
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ fixed: 'right',
+ width: 150,
+ render: (text, record) => {
+ return (
+ <Space gap='small'>
+ <Button
+ icon={<InfoCircleIcon />}
+ onClick={() =>
+ navigate(
+ `/dashboard/management/notetypes/info?noteTypeId=${record._id}`
+ )
+ }
+ />
+ <Dropdown menu={getNoteTypeActionItems(record._id)}>
+ <Button>Actions</Button>
+ </Dropdown>
+ </Space>
+ )
+ }
+ }
+ ]
+
+ const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
+ 'NoteTypes',
+ columns
+ )
+
+ const visibleColumns = columns.filter(
+ (col) => !col.key || columnVisibility[col.key]
+ )
+
+ const actionItems = {
+ items: [
+ {
+ label: 'New Note Type',
+ key: 'newNoteType',
+ icon: <PlusIcon />
+ },
+ { type: 'divider' },
+ {
+ label: 'Reload List',
+ key: 'reloadList',
+ icon: <ReloadIcon />
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'reloadList') {
+ tableRef.current?.reload()
+ } else if (key === 'newNoteType') {
+ setNewNoteTypeOpen(true)
+ }
+ }
+ }
+
+ return (
+ <>
+ <Flex vertical={'true'} gap='large'>
+ {contextHolder}
+ <Flex justify={'space-between'}>
+ <Space size='small'>
+ <Dropdown menu={actionItems}>
+ <Button>Actions</Button>
+ </Dropdown>
+ <Popover
+ content={getViewDropdownItems()}
+ placement='bottomLeft'
+ arrow={false}
+ >
+ <Button>View</Button>
+ </Popover>
+ </Space>
+ </Flex>
+ <DashboardTable
+ ref={tableRef}
+ columns={visibleColumns}
+ url={`${config.backendUrl}/notetypes`}
+ authenticated={authenticated}
+ />
+ </Flex>
+ <Modal
+ open={newNoteTypeOpen}
+ onCancel={() => setNewNoteTypeOpen(false)}
+ footer={null}
+ destroyOnHidden={true}
+ width={700}
+ >
+ <NewNoteType
+ onOk={() => {
+ setNewNoteTypeOpen(false)
+ messageApi.success('New note type created successfully.')
+ tableRef.current?.reload()
+ }}
+ reset={!newNoteTypeOpen}
+ />
+ </Modal>
+ </>
+ )
+}
+
+export default NoteTypes
diff --git a/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx b/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx
new file mode 100644
index 0000000..7b1c8b4
--- /dev/null
+++ b/src/components/Dashboard/Management/NoteTypes/NewNoteType.jsx
@@ -0,0 +1,259 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import axios from 'axios'
+import { useMediaQuery } from 'react-responsive'
+import {
+ Form,
+ Input,
+ Button,
+ message,
+ Typography,
+ Flex,
+ Steps,
+ Descriptions,
+ Divider,
+ ColorPicker,
+ Switch,
+ Badge,
+ Checkbox,
+ Tag
+} from 'antd'
+
+import config from '../../../../config'
+
+const { Title, Text } = Typography
+
+const initialNewNoteTypeForm = {
+ name: '',
+ color: null,
+ active: true
+}
+
+const NewNoteType = ({ onOk, reset }) => {
+ const [messageApi, contextHolder] = message.useMessage()
+ const [newNoteTypeLoading, setNewNoteTypeLoading] = useState(false)
+ const [currentStep, setCurrentStep] = useState(0)
+ const [nextEnabled, setNextEnabled] = useState(false)
+ const [colorEnabled, setColorEnabled] = useState(false)
+ const [newNoteTypeForm] = Form.useForm()
+ const [newNoteTypeFormValues, setNewNoteTypeFormValues] = useState(
+ initialNewNoteTypeForm
+ )
+ const isMobile = useMediaQuery({ maxWidth: 768 })
+
+ const newNoteTypeFormUpdateValues = Form.useWatch([], newNoteTypeForm)
+
+ React.useEffect(() => {
+ newNoteTypeForm
+ .validateFields({
+ validateOnly: true
+ })
+ .then(() => setNextEnabled(true))
+ .catch(() => setNextEnabled(false))
+ }, [newNoteTypeForm, newNoteTypeFormUpdateValues])
+
+ const summaryItems = [
+ {
+ key: 'name',
+ label: 'Name',
+ children: newNoteTypeFormValues.name
+ },
+ {
+ key: 'color',
+ label: 'Color',
+ children: newNoteTypeFormValues.color ? (
+ <Badge
+ status={newNoteTypeFormValues.color}
+ text={newNoteTypeFormValues.color}
+ />
+ ) : (
+ <Text>n/a</Text>
+ )
+ },
+ {
+ key: 'active',
+ label: 'Active',
+ children: newNoteTypeFormValues.active ? (
+ <Tag color={'success'}>Yes</Tag>
+ ) : (
+ <Tag color={'error'}>No</Tag>
+ )
+ }
+ ]
+
+ React.useEffect(() => {
+ if (reset) {
+ newNoteTypeForm.resetFields()
+ }
+ }, [reset, newNoteTypeForm])
+
+ const handleNewNoteType = async () => {
+ setNewNoteTypeLoading(true)
+ try {
+ await axios.post(
+ `${config.backendUrl}/noteTypes`,
+ newNoteTypeFormValues,
+ {
+ withCredentials: true
+ }
+ )
+ onOk()
+ } catch (error) {
+ messageApi.error('Error creating new note type: ' + error.message)
+ } finally {
+ setNewNoteTypeLoading(false)
+ }
+ }
+
+ const steps = [
+ {
+ title: 'Details',
+ key: 'details',
+ content: (
+ <>
+ <Form.Item
+ label='Name'
+ name='name'
+ rules={[
+ {
+ required: true,
+ message: 'Please enter a name.'
+ },
+ {
+ max: 100,
+ message: 'Name cannot exceed 100 characters'
+ }
+ ]}
+ >
+ <Input />
+ </Form.Item>
+
+ <Flex gap='middle' align='center'>
+ <Form.Item
+ label='Color'
+ name='color'
+ getValueFromEvent={(color) => {
+ if (color != null) {
+ return '#' + color.toHex()
+ }
+ return null
+ }}
+ >
+ <ColorPicker showText={true} disabled={!colorEnabled} />
+ </Form.Item>
+ <Checkbox
+ checked={colorEnabled}
+ onChange={(e) => {
+ setColorEnabled(e.target.checked)
+ if (!e.target.checked) {
+ setNewNoteTypeFormValues((prev) => ({ ...prev, color: null }))
+ } else if (e.target.checked) {
+ setNewNoteTypeFormValues((prev) => ({
+ ...prev,
+ color: newNoteTypeForm.getFieldValue('color')
+ }))
+ }
+ }}
+ />
+ </Flex>
+ <Form.Item
+ label='Active'
+ name='active'
+ valuePropName='checked'
+ style={{ marginBottom: 8 }}
+ >
+ <Switch />
+ </Form.Item>
+ </>
+ )
+ },
+ {
+ title: 'Summary',
+ key: 'summary',
+ content: <Descriptions column={1} items={summaryItems} size={'small'} />
+ }
+ ]
+
+ return (
+ <Flex gap='middle'>
+ {contextHolder}
+
+ {!isMobile && (
+ <div style={{ minWidth: '160px' }}>
+ <Steps
+ current={currentStep}
+ items={steps}
+ direction='vertical'
+ style={{ width: 'fit-content' }}
+ />
+ </div>
+ )}
+
+ {!isMobile && <Divider type='vertical' style={{ height: 'unset' }} />}
+
+ <Flex vertical gap='middle' style={{ flexGrow: 1 }}>
+ <Title level={2} style={{ marginTop: 0, marginBottom: 4 }}>
+ New Note Type
+
+
+
+
+
+
+ {currentStep < steps.length - 1 ? (
+
+ ) : (
+
+ )}
+
+
+
+ )
+}
+
+NewNoteType.propTypes = {
+ onOk: PropTypes.func.isRequired,
+ reset: PropTypes.bool
+}
+
+export default NewNoteType
diff --git a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
new file mode 100644
index 0000000..1b7b8e0
--- /dev/null
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@@ -0,0 +1,402 @@
+import React, { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import axios from 'axios'
+import {
+ Descriptions,
+ Spin,
+ Space,
+ Button,
+ message,
+ Typography,
+ Flex,
+ Form,
+ Input,
+ Collapse,
+ Switch,
+ ColorPicker,
+ Checkbox,
+ Tag,
+ Dropdown,
+ Popover,
+ Badge
+} from 'antd'
+import { LoadingOutlined, CaretRightOutlined } from '@ant-design/icons'
+import IdText from '../../common/IdText'
+import TimeDisplay from '../../common/TimeDisplay'
+import ReloadIcon from '../../../Icons/ReloadIcon'
+import EditIcon from '../../../Icons/EditIcon.jsx'
+import XMarkIcon from '../../../Icons/XMarkIcon.jsx'
+import CheckIcon from '../../../Icons/CheckIcon.jsx'
+import useCollapseState from '../../hooks/useCollapseState'
+import AuditLogTable from '../../common/AuditLogTable'
+
+import config from '../../../../config.js'
+
+const { Title } = Typography
+
+const NoteTypeInfo = () => {
+ const [noteTypeData, setNoteTypeData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const location = useLocation()
+ const [messageApi, contextHolder] = message.useMessage()
+ const noteTypeId = new URLSearchParams(location.search).get('noteTypeId')
+ const [isEditing, setIsEditing] = useState(false)
+ const [form] = Form.useForm()
+ const [colorEnabled, setColorEnabled] = useState(false)
+ const [collapseState, updateCollapseState] = useCollapseState(
+ 'NoteTypeInfo',
+ {
+ info: true,
+ auditLogs: true
+ }
+ )
+
+ useEffect(() => {
+ if (noteTypeId) {
+ fetchNoteTypeDetails()
+ }
+ }, [noteTypeId])
+
+ useEffect(() => {
+ if (noteTypeData) {
+ form.setFieldsValue({
+ name: noteTypeData.name || '',
+ color: noteTypeData.color || '#000000',
+ active: noteTypeData.active ?? true
+ })
+ setColorEnabled(!!noteTypeData.color)
+ }
+ }, [noteTypeData, form])
+
+ const fetchNoteTypeDetails = async () => {
+ try {
+ setLoading(true)
+ const response = await axios.get(
+ `${config.backendUrl}/noteTypes/${noteTypeId}`,
+ {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true
+ }
+ )
+ setNoteTypeData(response.data)
+ setError(null)
+ } catch (err) {
+ setError('Failed to fetch note type details')
+ messageApi.error('Failed to fetch note type details')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const startEditing = () => {
+ updateCollapseState('info', true)
+ setIsEditing(true)
+ }
+
+ const cancelEditing = () => {
+ form.setFieldsValue({
+ name: noteTypeData?.name || '',
+ color: noteTypeData?.color || '#000000',
+ active: noteTypeData?.active ?? true
+ })
+ setIsEditing(false)
+ }
+
+ const updateInfo = async () => {
+ try {
+ const values = await form.validateFields()
+ setLoading(true)
+
+ await axios.put(`${config.backendUrl}/noteTypes/${noteTypeId}`, values, {
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ withCredentials: true
+ })
+
+ setNoteTypeData({ ...noteTypeData, ...values })
+ setIsEditing(false)
+ messageApi.success('Note type information updated successfully')
+ } catch (err) {
+ if (err.errorFields) {
+ return
+ }
+ console.error('Failed to update note type information:', err)
+ messageApi.error('Failed to update note type information')
+ } finally {
+ fetchNoteTypeDetails()
+ setLoading(false)
+ }
+ }
+
+ const getViewDropdownItems = () => {
+ const sections = [
+ { key: 'info', label: 'Note Type Information' },
+ { key: 'auditLogs', label: 'Audit Logs' }
+ ]
+
+ return (
+
+
+ {sections.map((section) => (
+ {
+ updateCollapseState(section.key, e.target.checked)
+ }}
+ >
+ {section.label}
+
+ ))}
+
+
+ )
+ }
+
+ const actionItems = {
+ items: [
+ {
+ label: 'Reload Note Type',
+ key: 'reload',
+ icon:
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'reload') {
+ fetchNoteTypeDetails()
+ }
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updateInfo}
+ loading={loading}
+ />
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ />
+
+ ) : (
+ } onClick={startEditing} />
+ )}
+
+
+
+ {error ? (
+
+ {error || 'Note type not found'}
+ } onClick={fetchNoteTypeDetails}>
+ Retry
+
+
+ ) : (
+
+ {contextHolder}
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
+ >
+
+
+ Note Type Information
+
+
+ }
+ key='1'
+ >
+
}>
+
+
+
+
+
+
+ updateCollapseState('auditLogs', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
+ >
+
+ Audit Logs
+
+ }
+ key='2'
+ >
+
+
+
+
+
{contextHolder}
-
updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
-
-
- Part Information
-
-
- {isEditing ? (
- <>
- }
- type='primary'
- onClick={updateInfo}
- loading={loading}
- />
- }
- onClick={cancelEditing}
- disabled={loading}
- />
-
- ) : (
- } onClick={startEditing} />
- )}
-
-
- }
- key='1'
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
}
- initialValues={{
- name: partData.name || '',
- version: partData.version || '',
- tags: partData.tags || []
- }}
+ key='1'
>
-
+ setPartFormValues((prevValues) => ({
+ ...prevValues,
+ ...changedValues
+ }))
+ }
+ initialValues={{
+ name: partData.name || '',
+ version: partData.version || '',
+ tags: partData.tags || []
}}
>
-
- {partData.id ? (
-
- ) : (
- 'n/a'
- )}
-
-
-
-
-
-
- {isEditing ? (
-
-
-
- ) : (
- partData.name || 'n/a'
- )}
-
-
-
-
-
-
-
- {partData.product.name || 'n/a'}
-
-
- {(
-
- ) || 'n/a'}
-
-
- {isEditing && useGlobalPricing == false ? (
-
- {marginOrPrice == false ? (
-
-
-
- ) : (
-
-
-
- )}
-
- Price
-
-
- ) : partData.margin &&
- marginOrPrice == false &&
- partData.useGlobalPricing == false ? (
- partData.margin + '%'
- ) : partData.price &&
- marginOrPrice == true &&
- partData.useGlobalPricing == false ? (
- '£' + partData.price
- ) : (
- 'n/a'
- )}
-
-
- {isEditing ? (
-
-
-
- ) : partData.useGlobalPricing == true ? (
- }>
- Yes
-
- ) : partData.useGlobalPricing == false ? (
- }>No
- ) : (
- 'n/a'
- )}
-
-
- {partData.version || 'n/a'}
-
-
- {partData.tags &&
- partData.tags.map((tag, index) => (
- {tag}
- ))}
-
-
-
-
-
-
-
updateCollapseState('preview', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
- Part Preview
-
- }
- key='2'
- >
-
- {stlLoadError ? (
-
-
-
-
- {stlLoadError}
-
-
-
- ) : (
- partFileObjectId && (
-
+ {partData.id ? (
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
+
+
+ {isEditing ? (
+
+
+
+ ) : (
+ partData.name || 'n/a'
+ )}
+
+
+
+
+
+
+
+ {partData.product.name || 'n/a'}
+
+
+ {(
+
+ ) || 'n/a'}
+
+
+ {isEditing && useGlobalPricing == false ? (
+
+ {marginOrPrice == false ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ Price
+
+
+ ) : partData.margin &&
+ marginOrPrice == false &&
+ partData.useGlobalPricing == false ? (
+ partData.margin + '%'
+ ) : partData.price &&
+ marginOrPrice == true &&
+ partData.useGlobalPricing == false ? (
+ '£' + partData.price
+ ) : (
+ 'n/a'
+ )}
+
+
+ {isEditing ? (
+
+
+
+ ) : partData.useGlobalPricing == true ? (
+ }>
+ Yes
+
+ ) : partData.useGlobalPricing == false ? (
+ }>No
+ ) : (
+ 'n/a'
+ )}
+
+
+ {partData.version || 'n/a'}
+
+
+ {partData.tags &&
+ partData.tags.map((tag, index) => (
+ {tag}
+ ))}
+
+
+
+
+
+
+
updateCollapseState('preview', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
+ >
+
+ Part Preview
+
+ }
+ key='2'
+ >
+
+ {stlLoadError ? (
+
- )
- )}
-
-
-
+ >
+
+
+
+ {stlLoadError}
+
+
+
+ ) : (
+ partFileObjectId && (
+
+ )
+ )}
+
+
+
+
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
diff --git a/src/components/Dashboard/Management/Products/ProductInfo.jsx b/src/components/Dashboard/Management/Products/ProductInfo.jsx
index af6ebca..955ec6e 100644
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@@ -72,6 +72,7 @@ const ProductInfo = () => {
useEffect(() => {
async function fetchData() {
+ console.log('hello')
await fetchProductDetails()
}
if (productId) {
@@ -114,7 +115,6 @@ const ProductInfo = () => {
console.log(err)
messageApi.error('Failed to fetch product details')
} finally {
- fetchProductDetails()
setFetchLoading(false)
}
}
@@ -164,6 +164,7 @@ const ProductInfo = () => {
console.error('Failed to update product information:', err)
messageApi.error('Failed to update product information')
} finally {
+ await fetchProductDetails()
setLoading(false)
}
}
@@ -193,285 +194,290 @@ const ProductInfo = () => {
return (
<div style={{ height: '100%', minHeight: 0, overflowY: 'auto' }}>
{contextHolder}
- <Collapse
- ghost
- collapsible='icon'
- activeKey={collapseState.info ? ['1'] : []}
- onChange={(keys) => updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
- <CaretRightOutlined
- rotate={isActive ? 90 : 0}
- style={{ paddingTop: '9px' }}
- />
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
- <Collapse.Panel
- header={
- <Flex
- align='center'
- justify='space-between'
- style={{ width: '100%' }}
- >
- <Title level={5} style={{ margin: 0 }}>
- Product Information
-
-
- {isEditing ? (
- <>
- }
- type='primary'
- onClick={updateInfo}
- loading={loading}
- />
- }
- onClick={cancelEditing}
- disabled={loading}
- />
-
- ) : (
- } onClick={startEditing} />
- )}
-
-
- }
- key='1'
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
}
- initialValues={{
- name: productData.name || '',
- vendor: productData.vendor || { id: null, name: '' },
- version: productData.version || '',
- tags: productData.tags || []
- }}
+ key='1'
>
-
+ setProductFormValues((prevValues) => ({
+ ...prevValues,
+ ...changedValues
+ }))
+ }
+ initialValues={{
+ name: productData.name || '',
+ vendor: productData.vendor || { id: null, name: '' },
+ version: productData.version || '',
+ tags: productData.tags || []
}}
>
-
- {productData.id ? (
-
- ) : (
- 'n/a'
- )}
-
-
-
-
-
-
-
- {isEditing ? (
-
-
-
- ) : (
- productData.name || 'n/a'
- )}
-
-
-
-
-
-
-
- {isEditing ? (
-
-
-
- ) : (
- productData.vendor.name || 'n/a'
- )}
-
-
-
-
-
-
-
- {isEditing ? (
-
- {marginOrPrice == false ? (
-
-
-
- ) : (
-
-
-
- )}
+
+ {productData.id ? (
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
+
+
+
+ {isEditing ? (
- Price
+
-
- ) : productData.margin && marginOrPrice == false ? (
- productData.margin + '%'
- ) : productData.price && marginOrPrice == true ? (
- '£' + productData.price
- ) : (
- 'n/a'
- )}
-
+ ) : (
+ productData.name || 'n/a'
+ )}
+
-
- {isEditing ? (
-
-
-
- ) : productData.version ? (
- {productData.version}
- ) : (
- 'n/a'
- )}
-
+
+
+
-
- {isEditing ? (
-
-
+ {isEditing ? (
+
- {productData.tags.map((tag) => (
- handleTagClose(tag)}
- style={{ marginBottom: 12 }}
+
+
+ ) : (
+ productData.vendor.name || 'n/a'
+ )}
+
+
+
+
+
+
+
+ {isEditing ? (
+
+ {marginOrPrice == false ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+ Price
+
+
+ ) : productData.margin && marginOrPrice == false ? (
+ productData.margin + '%'
+ ) : productData.price && marginOrPrice == true ? (
+ '£' + productData.price
+ ) : (
+ 'n/a'
+ )}
+
+
+
+ {isEditing ? (
+
+
+
+ ) : productData.version ? (
+ {productData.version}
+ ) : (
+ 'n/a'
+ )}
+
+
+
+ {isEditing ? (
+
+
+ {productData.tags.map((tag) => (
+ handleTagClose(tag)}
+ style={{ marginBottom: 12 }}
+ >
+ {tag}
+
+ ))}
+
+
+
+
+
+ } />
+
+
+ ) : productData.tags?.length > 0 ? (
+
+ {productData.tags.map((tag, index) => (
+
{tag}
))}
-
-
-
-
- } />
-
-
- ) : productData.tags?.length > 0 ? (
-
- {productData.tags.map((tag, index) => (
-
- {tag}
-
- ))}
-
- ) : (
- 'n/a'
- )}
-
-
-
-
-
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
+
- updateCollapseState('parts', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
- Product Parts
-
- }
- key='2'
+ updateCollapseState('parts', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
-
-
+
+ Product Parts
+
+ }
+ key='2'
+ >
+
+
+
+
)
}
diff --git a/src/components/Dashboard/Management/Settings.jsx b/src/components/Dashboard/Management/Settings.jsx
index ad0dfb0..00f5b79 100644
--- a/src/components/Dashboard/Management/Settings.jsx
+++ b/src/components/Dashboard/Management/Settings.jsx
@@ -50,67 +50,72 @@ const Settings = () => {
return (
- updateCollapseState('appearance', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- >
-
-
- Appearance Settings
-
-
+
+
+ updateCollapseState('appearance', keys.length > 0)
}
- key='1'
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
+
+ Appearance Settings
+
+
+ }
+ key='1'
>
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/Dashboard/Management/Vendors.jsx b/src/components/Dashboard/Management/Vendors.jsx
index 6641d60..5aa49dc 100644
--- a/src/components/Dashboard/Management/Vendors.jsx
+++ b/src/components/Dashboard/Management/Vendors.jsx
@@ -1,8 +1,6 @@
-import React, { useState, useContext, useCallback, useEffect } from 'react'
+import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
-import axios from 'axios'
import {
- Table,
Button,
Flex,
Space,
@@ -12,16 +10,15 @@ import {
Typography,
Checkbox,
Popover,
- Input,
- Spin
+ Input
} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined, ExportOutlined } from '@ant-design/icons'
+import { ExportOutlined } from '@ant-design/icons'
import { AuthContext } from '../context/AuthContext'
import IdText from '../common/IdText'
import NewVendor from './Vendors/NewVendor'
import CountryDisplay from '../common/CountryDisplay'
import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
import VendorIcon from '../../Icons/VendorIcon'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
@@ -34,103 +31,13 @@ import config from '../../../config'
const { Link } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
const Vendors = () => {
const [messageApi, contextHolder] = message.useMessage()
const navigate = useNavigate()
- const { styles } = useStyle()
- const [vendorsData, setVendorsData] = useState([])
const [newVendorOpen, setNewVendorOpen] = useState(false)
- const [loading, setLoading] = useState(true)
- const [page, setPage] = useState(1)
- const [hasMore, setHasMore] = useState(true)
- const [lazyLoading, setLazyLoading] = useState(false)
- const [filters, setFilters] = useState({})
- const [sorter, setSorter] = useState({})
-
+ const tableRef = useRef()
const { authenticated } = useContext(AuthContext)
- const fetchVendorsData = useCallback(
- async (pageNum = 1, append = false) => {
- try {
- const response = await axios.get(`${config.backendUrl}/vendors`, {
- params: {
- page: pageNum,
- limit: 25,
- ...filters,
- sort: sorter.field,
- order: sorter.order
- },
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true
- })
-
- const newData = response.data
- setHasMore(newData.length === 25)
-
- if (append) {
- setVendorsData((prev) => [...prev, ...newData])
- } else {
- setVendorsData(newData)
- }
-
- setLoading(false)
- setLazyLoading(false)
- } catch (error) {
- if (error.response) {
- messageApi.error('Error fetching vendor data:', error.response.status)
- } else {
- messageApi.error(
- 'An unexpected error occurred. Please try again later.'
- )
- }
- setLoading(false)
- setLazyLoading(false)
- }
- },
- [messageApi, filters, sorter]
- )
-
- const handleScroll = useCallback(
- (e) => {
- const { target } = e
- const scrollHeight = target.scrollHeight
- const scrollTop = target.scrollTop
- const clientHeight = target.clientHeight
-
- if (
- scrollHeight - scrollTop - clientHeight < 100 &&
- !lazyLoading &&
- hasMore
- ) {
- setLazyLoading(true)
- const nextPage = page + 1
- setPage(nextPage)
- fetchVendorsData(nextPage, true)
- }
- },
- [page, lazyLoading, hasMore, fetchVendorsData]
- )
-
const getFilterDropdown = ({
setSelectedKeys,
selectedKeys,
@@ -191,21 +98,6 @@ const Vendors = () => {
)
}
- const handleTableChange = (pagination, filters, sorter) => {
- const newFilters = {}
- Object.entries(filters).forEach(([key, value]) => {
- if (value && value.length > 0) {
- newFilters[key] = value[0]
- }
- })
- setPage(1)
- setFilters(newFilters)
- setSorter({
- field: sorter.field,
- order: sorter.order
- })
- }
-
const getVendorActionItems = (id) => {
return {
items: [
@@ -259,7 +151,7 @@ const Vendors = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => ,
filterDropdown: ({
setSelectedKeys,
@@ -435,19 +327,13 @@ const Vendors = () => {
],
onClick: ({ key }) => {
if (key === 'reloadList') {
- fetchVendorsData()
+ tableRef.current?.reload()
} else if (key === 'newVendor') {
setNewVendorOpen(true)
}
}
}
- useEffect(() => {
- if (authenticated) {
- fetchVendorsData()
- }
- }, [authenticated, fetchVendorsData])
-
return (
<>
@@ -465,33 +351,26 @@ const Vendors = () => {
- {lazyLoading && } />}
- }}
- onScroll={handleScroll}
- onChange={handleTableChange}
- showSorterTooltip={false}
+ url={`${config.backendUrl}/vendors`}
+ authenticated={authenticated}
/>
setNewVendorOpen(false)}
footer={null}
- destroyOnClose
+ destroyOnHidden={true}
width={700}
>
{
setNewVendorOpen(false)
messageApi.success('New vendor created successfully.')
- fetchVendorsData()
+ tableRef.current?.reload()
}}
reset={!newVendorOpen}
/>
diff --git a/src/components/Dashboard/Management/Vendors/NewVendor.jsx b/src/components/Dashboard/Management/Vendors/NewVendor.jsx
index 9cecadc..8d7d5cb 100644
--- a/src/components/Dashboard/Management/Vendors/NewVendor.jsx
+++ b/src/components/Dashboard/Management/Vendors/NewVendor.jsx
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types'
import React, { useState } from 'react'
import axios from 'axios'
+import { useMediaQuery } from 'react-responsive'
import {
Form,
Input,
@@ -37,6 +38,7 @@ const NewVendor = ({ onOk, reset }) => {
const [newVendorForm] = Form.useForm()
const [newVendorFormValues, setNewVendorFormValues] =
useState(initialNewVendorForm)
+ const isMobile = useMediaQuery({ maxWidth: 768 })
const newVendorFormUpdateValues = Form.useWatch([], newVendorForm)
@@ -181,16 +183,18 @@ const NewVendor = ({ onOk, reset }) => {
{contextHolder}
-
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
diff --git a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
index c91dced..83a9cd4 100644
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@@ -156,202 +156,216 @@ const VendorInfo = () => {
return (
<div style={{ height: '100%', minHeight: 0, overflowY: 'auto' }}>
{contextHolder}
- <Collapse
- ghost
- collapsible='icon'
- activeKey={collapseState.info ? ['1'] : []}
- onChange={(keys) => updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
- <CaretRightOutlined
- rotate={isActive ? 90 : 0}
- style={{ paddingTop: '9px' }}
- />
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
- <Collapse.Panel
- header={
- <Flex
- align='center'
- justify='space-between'
- style={{ width: '100%' }}
- >
- <Title level={5} style={{ margin: 0 }}>
- Vendor Information
-
-
- {isEditing ? (
- <>
- }
- type='primary'
- onClick={updateInfo}
- loading={loading}
- />
- }
- onClick={cancelEditing}
- disabled={loading}
- />
-
- ) : (
- } onClick={startEditing} />
- )}
-
-
- }
- key='1'
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
+ }
+ key='1'
+ >
+
-
-
+
+ {isEditing ? (
+
+
+
+ ) : vendorData.email ? (
+
+ {vendorData.email + ' '}
+
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
+
+
)
}
diff --git a/src/components/Dashboard/Production/GCodeFiles.jsx b/src/components/Dashboard/Production/GCodeFiles.jsx
index 8380af7..2f60a6a 100644
--- a/src/components/Dashboard/Production/GCodeFiles.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles.jsx
@@ -1,10 +1,9 @@
// src/gcodefiles.js
-import React, { useEffect, useState, useContext, useCallback } from 'react'
+import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import {
- Table,
Badge,
Button,
Flex,
@@ -16,11 +15,9 @@ import {
Checkbox,
Divider,
Popover,
- Input,
- Spin
+ Input
} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined, DownloadOutlined } from '@ant-design/icons'
+import { DownloadOutlined } from '@ant-design/icons'
import { AuthContext } from '../context/AuthContext'
import NewGCodeFile from './GCodeFiles/NewGCodeFile'
@@ -33,33 +30,18 @@ import ReloadIcon from '../../Icons/ReloadIcon'
import XMarkIcon from '../../Icons/XMarkIcon'
import CheckIcon from '../../Icons/CheckIcon'
import TimeDisplay from '../common/TimeDisplay'
+import DashboardTable from '../common/DashboardTable'
import config from '../../../config'
const { Text } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
const GCodeFiles = () => {
const [messageApi, contextHolder] = message.useMessage()
const navigate = useNavigate()
- const { styles } = useStyle()
+ const [newGCodeFileOpen, setNewGCodeFileOpen] = useState(false)
+ const [showDeleted, setShowDeleted] = useState(false)
+ const tableRef = useRef()
const getFilterDropdown = ({
setSelectedKeys,
@@ -96,6 +78,7 @@ const GCodeFiles = () => {
)
}
+
// Column definitions
const columns = [
{
@@ -133,8 +116,8 @@ const GCodeFiles = () => {
title: 'ID',
dataIndex: '_id',
key: 'id',
- width: 165,
- render: (text) =>
+ width: 180,
+ render: (text) =>
},
{
title: 'Filament',
@@ -234,15 +217,7 @@ const GCodeFiles = () => {
}
}
]
- const [gcodeFilesData, setGCodeFilesData] = useState([])
- const [page, setPage] = useState(1)
- const [hasMore, setHasMore] = useState(true)
- const [loading, setLoading] = useState(true)
- const [lazyLoading, setLazyLoading] = useState(false)
- const [newGCodeFileOpen, setNewGCodeFileOpen] = useState(false)
- const [showDeleted, setShowDeleted] = useState(false)
- const [filters, setFilters] = useState({})
- const [sorter, setSorter] = useState({})
+
const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
'GCodeFiles',
columns
@@ -250,94 +225,6 @@ const GCodeFiles = () => {
const { authenticated } = useContext(AuthContext)
- const fetchGCodeFilesData = useCallback(
- async (pageNum = 1, append = false) => {
- try {
- const params = {
- page: pageNum,
- limit: 25,
- ...filters,
- sort: sorter.field,
- order: sorter.order
- }
-
- const response = await axios.get(`${config.backendUrl}/gcodefiles`, {
- params,
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true
- })
-
- const newData = response.data
- setHasMore(newData.length === 25) // If we get less than 25 items, we've reached the end
-
- if (append) {
- setGCodeFilesData((prev) => [...prev, ...newData])
- } else {
- setGCodeFilesData(newData)
- }
-
- setLoading(false)
- setLazyLoading(false)
- } catch (error) {
- if (error.response) {
- messageApi.error('Error fetching gcode files:', error.response.status)
- } else {
- messageApi.error(
- 'An unexpected error occurred. Please try again later.'
- )
- }
- setLoading(false)
- setLazyLoading(false)
- }
- },
- [messageApi, filters, sorter]
- )
-
- const handleScroll = useCallback(
- (e) => {
- const { target } = e
- const scrollHeight = target.scrollHeight
- const scrollTop = target.scrollTop
- const clientHeight = target.clientHeight
-
- // If we're near the bottom (within 100px) and not currently loading
- if (
- scrollHeight - scrollTop - clientHeight < 100 &&
- !lazyLoading &&
- hasMore
- ) {
- setLazyLoading(true)
- const nextPage = page + 1
- setPage(nextPage)
- fetchGCodeFilesData(nextPage, true)
- }
- },
- [page, lazyLoading, hasMore, fetchGCodeFilesData]
- )
-
- useEffect(() => {
- if (authenticated) {
- fetchGCodeFilesData()
- }
- }, [authenticated, fetchGCodeFilesData])
-
- const handleTableChange = (pagination, filters, sorter) => {
- const newFilters = {}
- Object.entries(filters).forEach(([key, value]) => {
- if (value && value.length > 0) {
- newFilters[key] = value[0] // Take the first filter value
- }
- })
-
- setFilters(newFilters)
- setSorter({
- field: sorter.field,
- order: sorter.order
- })
- }
-
const getGCodeFileActionItems = (id) => {
return {
items: [
@@ -358,7 +245,8 @@ const GCodeFiles = () => {
} else if (key === 'download') {
handleDownloadGCode(
id,
- gcodeFilesData.find((file) => file._id === id)?.name + '.gcode'
+ tableRef.current?.getData().find((file) => file._id === id)?.name +
+ '.gcode'
)
}
}
@@ -376,24 +264,16 @@ const GCodeFiles = () => {
headers: {
Accept: 'application/json'
},
- withCredentials: true // Important for including cookies
+ withCredentials: true
}
)
- setLoading(false)
-
const fileURL = window.URL.createObjectURL(new Blob([response.data]))
- // Create an anchor element and simulate a click to download the file
const fileLink = document.createElement('a')
fileLink.href = fileURL
-
fileLink.setAttribute('download', fileName)
document.body.appendChild(fileLink)
-
- // Simulate click to download the file
fileLink.click()
-
- // Clean up and remove the anchor element
fileLink.parentNode.removeChild(fileLink)
} catch (error) {
if (error.response) {
@@ -425,7 +305,7 @@ const GCodeFiles = () => {
],
onClick: ({ key }) => {
if (key === 'reloadList') {
- fetchGCodeFilesData()
+ tableRef.current?.reload()
} else if (key === 'newGCodeFile') {
setNewGCodeFileOpen(true)
}
@@ -484,19 +364,13 @@ const GCodeFiles = () => {
>
- {lazyLoading && } />}
- }}
- onChange={handleTableChange}
- onScroll={handleScroll}
- showSorterTooltip={false}
+ url={`${config.backendUrl}/gcodefiles`}
+ authenticated={authenticated}
/>
{
onCancel={() => {
setNewGCodeFileOpen(false)
}}
- destroyOnClose
+ destroyOnHidden={true}
>
{
setNewGCodeFileOpen(false)
messageApi.success('Finished uploading GCode file!')
- fetchGCodeFilesData()
+ tableRef.current?.reload()
}}
reset={newGCodeFileOpen}
/>
diff --git a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
index 0e7dc80..342cd87 100644
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@@ -155,255 +155,263 @@ const GCodeFileInfo = () => {
return (
{contextHolder}
-
updateCollapseState('info', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
-
-
- GCode File Information
-
-
- {isEditing ? (
- <>
- }
- type='primary'
- onClick={updateInfo}
- loading={loading}
- />
- }
- onClick={cancelEditing}
- disabled={loading}
- />
-
- ) : (
- } onClick={startEditing} />
- )}
-
-
- }
- key='1'
+
+ updateCollapseState('info', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
+ }
+ key='1'
+ >
+
-
-
+
-
updateCollapseState('preview', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
- GCode File Preview
-
- }
- key='2'
+
+ {isEditing ? (
+
+
+
+ ) : (
+ gcodeFileData.name
+ )}
+
+
+
+
+
+
+ {isEditing ? (
+
+
+
+ ) : gcodeFileData.filament ? (
+
+
+
+
+ ) : (
+ 'n/a'
+ )}
+
+
+ {gcodeFileData.filament ? (
+
+ ) : (
+ 'n/a'
+ )}
+
+
+ {gcodeFileData.gcodeFileInfo
+ .estimatedPrintingTimeNormalMode || 'n/a'}
+
+
+ {'£' + gcodeFileData.cost.toFixed(2) || 'n/a'}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.sparseInfillDensity) {
+ return gcodeFileData.gcodeFileInfo.sparseInfillDensity
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.sparseInfillPattern) {
+ return capitalizeFirstLetter(
+ gcodeFileData.gcodeFileInfo.sparseInfillPattern
+ )
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.filamentUsedMm) {
+ return `${gcodeFileData.gcodeFileInfo.filamentUsedMm}mm`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.filamentUsedG) {
+ return `${gcodeFileData.gcodeFileInfo.filamentUsedG}g`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.nozzleTemperature) {
+ return `${gcodeFileData.gcodeFileInfo.nozzleTemperature}°`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.hotPlateTemp) {
+ return `${gcodeFileData.gcodeFileInfo.hotPlateTemp}°`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.filamentSettingsId) {
+ return `${gcodeFileData.gcodeFileInfo.filamentSettingsId.replaceAll('"', '')}`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {(() => {
+ if (gcodeFileData.gcodeFileInfo.printSettingsId) {
+ return `${gcodeFileData.gcodeFileInfo.printSettingsId.replaceAll('"', '')}`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+
+
+
+
+
updateCollapseState('preview', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
- {gcodeFileData.gcodeFileInfo.thumbnail ? (
- 
- ) : (
- 'n/a'
- )}
-
-
-
+
+ GCode File Preview
+
+ }
+ key='2'
+ >
+
+ {gcodeFileData.gcodeFileInfo.thumbnail ? (
+
+ ) : (
+ 'n/a'
+ )}
+
+
+
+
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
diff --git a/src/components/Dashboard/Production/PrintJobs.jsx b/src/components/Dashboard/Production/Jobs.jsx
similarity index 60%
rename from src/components/Dashboard/Production/PrintJobs.jsx
rename to src/components/Dashboard/Production/Jobs.jsx
index dc3eb59..4de127f 100644
--- a/src/components/Dashboard/Production/PrintJobs.jsx
+++ b/src/components/Dashboard/Production/Jobs.jsx
@@ -1,10 +1,8 @@
-// src/PrintJobs.js
+// src/Jobs.js
-import React, { useEffect, useState, useCallback, useContext } from 'react'
+import React, { useState, useContext, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
-import axios from 'axios'
import {
- Table,
Button,
Flex,
Space,
@@ -15,71 +13,42 @@ import {
Input,
Typography,
Checkbox,
- Popover,
- Spin
+ Popover
} from 'antd'
-import { createStyles } from 'antd-style'
-import { LoadingOutlined } from '@ant-design/icons'
import { AuthContext } from '../context/AuthContext.js'
-import { SocketContext } from '../context/SocketContext'
-import NewPrintJob from './PrintJobs/NewPrintJob'
-import JobState from '../common/JobState'
-import SubJobCounter from '../common/SubJobCounter'
-import TimeDisplay from '../common/TimeDisplay'
-import IdText from '../common/IdText'
-import useColumnVisibility from '../hooks/useColumnVisibility'
-import JobIcon from '../../Icons/JobIcon'
-import InfoCircleIcon from '../../Icons/InfoCircleIcon'
-import PlusIcon from '../../Icons/PlusIcon'
-import ReloadIcon from '../../Icons/ReloadIcon'
+import { SocketContext } from '../context/SocketContext.js'
+import NewJob from './Jobs/NewJob.jsx'
+import JobState from '../common/JobState.jsx'
+import SubJobCounter from '../common/SubJobCounter.jsx'
+import TimeDisplay from '../common/TimeDisplay.jsx'
+import IdText from '../common/IdText.jsx'
+import useColumnVisibility from '../hooks/useColumnVisibility.js'
+import JobIcon from '../../Icons/JobIcon.jsx'
+import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'
+import PlusIcon from '../../Icons/PlusIcon.jsx'
+import ReloadIcon from '../../Icons/ReloadIcon.jsx'
import EditIcon from '../../Icons/EditIcon.jsx'
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
import CheckIcon from '../../Icons/CheckIcon.jsx'
import PlayCircleIcon from '../../Icons/PlayCircleIcon.jsx'
-
-import config from '../../../config.js'
import CheckCircleIcon from '../../Icons/CheckCircleIcon.jsx'
import PauseCircleIcon from '../../Icons/PauseCircleIcon.jsx'
import XMarkCircleIcon from '../../Icons/XMarkCircleIcon.jsx'
import QuestionCircleIcon from '../../Icons/QuestionCircleIcon.jsx'
+import DashboardTable from '../common/DashboardTable'
+
+import config from '../../../config.js'
const { Text } = Typography
-const useStyle = createStyles(({ css, token }) => {
- const { antCls } = token
- return {
- customTable: css`
- ${antCls}-table {
- ${antCls}-table-container {
- ${antCls}-table-body,
- ${antCls}-table-content {
- scrollbar-width: thin;
- scrollbar-color: #eaeaea transparent;
- scrollbar-gutter: stable;
- }
- }
- }
- `
- }
-})
-
-const PrintJobs = () => {
- const { styles } = useStyle()
+const Jobs = () => {
const [messageApi, contextHolder] = message.useMessage()
const [notificationApi, notificationContextHolder] =
notification.useNotification()
const navigate = useNavigate()
- const [printJobsData, setPrintJobsData] = useState([])
- const [page, setPage] = useState(1)
- const [hasMore, setHasMore] = useState(true)
- const [lazyLoading, setLazyLoading] = useState(false)
-
- const [filters, setFilters] = useState({})
- const [sorter, setSorter] = useState({})
-
- const [newPrintJobOpen, setNewPrintJobOpen] = useState(false)
- const [loading, setLoading] = useState(true)
+ const [newJobOpen, setNewJobOpen] = useState(false)
+ const tableRef = useRef()
const getFilterDropdown = ({
setSelectedKeys,
@@ -154,7 +123,7 @@ const PrintJobs = () => {
title: 'ID',
dataIndex: 'id',
key: 'id',
- width: 165,
+ width: 180,
render: (text) => <IdText id={text} type={'job'} longId={false} />,
filterDropdown: ({
setSelectedKeys,
@@ -266,19 +235,17 @@ const PrintJobs = () => {
{record.state.type === 'draft' ? (
<Button
icon={<PlayCircleIcon />}
- onClick={() => handleDeployPrintJob(record.id)}
+ onClick={() => handleDeployJob(record.id)}
/>
) : (
<Button
icon={<InfoCircleIcon />}
onClick={() =>
- navigate(
- `/dashboard/production/printjobs/info?printJobId=${record.id}`
- )
+ navigate(`/dashboard/production/jobs/info?jobId=${record.id}`)
}
/>
)}
- <Dropdown menu={getPrintJobActionItems(record.id)}>
+ <Dropdown menu={getJobActionItems(record.id)}>
<Button>Actions</Button>
</Dropdown>
</Space>
@@ -291,14 +258,14 @@ const PrintJobs = () => {
const { socket } = useContext(SocketContext)
const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
- 'PrintJobs',
+ 'Jobs',
columns
)
- const handleDeployPrintJob = (printJobId) => {
+ const handleDeployJob = (jobId) => {
if (socket) {
- messageApi.info(`Print job ${printJobId} deployment initiated`)
- socket.emit('server.job_queue.deploy', { printJobId }, (response) => {
+ messageApi.info(`Print job ${jobId} deployment initiated`)
+ socket.emit('server.job_queue.deploy', { jobId }, (response) => {
if (response == false) {
notificationApi.error({
message: 'Print job deployment failed',
@@ -311,110 +278,13 @@ const PrintJobs = () => {
})
}
})
- navigate(`/dashboard/production/printjobs/info?printJobId=${printJobId}`)
+ navigate(`/dashboard/production/jobs/info?jobId=${jobId}`)
} else {
messageApi.error('Socket connection not available')
}
}
- const fetchPrintJobsData = useCallback(
- async (pageNum = 1, append = false) => {
- if (!authenticated) {
- return
- }
- try {
- const params = {
- page: pageNum,
- limit: 25,
- ...filters,
- sort: sorter.field,
- order: sorter.order
- }
-
- const response = await axios.get(`${config.backendUrl}/printjobs`, {
- params,
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true
- })
-
- const newData = response.data
- setHasMore(newData.length === 25)
-
- if (append) {
- setPrintJobsData((prev) => [...prev, ...newData])
- } else {
- setPrintJobsData(newData)
- }
-
- setLoading(false)
- setLazyLoading(false)
- } catch (error) {
- setLoading(false)
- setLazyLoading(false)
- if (error.response) {
- messageApi.error(
- 'Error fetching print jobs data:',
- error.response.status
- )
- } else {
- messageApi.error(
- 'An unexpected error occurred. Please try again later.'
- )
- }
- }
- },
- [authenticated, messageApi, filters, sorter]
- )
-
- const handleScroll = useCallback(
- (e) => {
- const { target } = e
- const scrollHeight = target.scrollHeight
- const scrollTop = target.scrollTop
- const clientHeight = target.clientHeight
-
- // If we're near the bottom (within 100px) and not currently loading
- if (
- scrollHeight - scrollTop - clientHeight < 100 &&
- !lazyLoading &&
- hasMore
- ) {
- setLazyLoading(true)
- const nextPage = page + 1
- setPage(nextPage)
- fetchPrintJobsData(nextPage, true)
- }
- },
- [page, lazyLoading, hasMore, fetchPrintJobsData]
- )
-
- useEffect(() => {
- // Fetch initial data
- if (authenticated) {
- fetchPrintJobsData()
- }
- }, [authenticated, fetchPrintJobsData])
-
- const handleTableChange = (pagination, filters, sorter) => {
- const newFilters = {}
- Object.entries(filters).forEach(([key, value]) => {
- if (value && value.length > 0) {
- newFilters[key] = value[0]
- }
- })
-
- setFilters(newFilters)
- setSorter({
- field: sorter.field,
- order: sorter.order
- })
- setPage(1)
- fetchPrintJobsData(1)
- }
-
- const getPrintJobActionItems = (printJobId) => {
+ const getJobActionItems = (jobId) => {
return {
items: [
{
@@ -430,11 +300,9 @@ const PrintJobs = () => {
],
onClick: ({ key }) => {
if (key === 'edit') {
- showNewPrintJobModal(printJobId)
+ showNewJobModal(jobId)
} else if (key === 'info') {
- navigate(
- `/dashboard/production/printjobs/info?printJobId=${printJobId}`
- )
+ navigate(`/dashboard/production/jobs/info?jobId=${jobId}`)
}
}
}
@@ -444,7 +312,7 @@ const PrintJobs = () => {
items: [
{
label: 'New Print Job',
- key: 'newPrintJob',
+ key: 'newJob',
icon: <PlusIcon />
},
{ type: 'divider' },
@@ -455,16 +323,16 @@ const PrintJobs = () => {
}
],
onClick: ({ key }) => {
- if (key === 'newPrintJob') {
- showNewPrintJobModal()
+ if (key === 'newJob') {
+ showNewJobModal()
} else if (key === 'reloadList') {
- fetchPrintJobsData()
+ tableRef.current?.reload()
}
}
}
- const showNewPrintJobModal = () => {
- setNewPrintJobOpen(true)
+ const showNewJobModal = () => {
+ setNewJobOpen(true)
}
const getViewDropdownItems = () => {
@@ -511,41 +379,34 @@ const PrintJobs = () => {
>
<Button>View</Button>
</Popover>
- {lazyLoading && <Spin indicator={<LoadingOutlined />} />}
</Space>
- <Table
- className={styles.customTable}
- dataSource={printJobsData}
+ <DashboardTable
+ ref={tableRef}
columns={visibleColumns}
- rowKey='id'
- pagination={false}
- loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
- scroll={{ y: 'calc(100vh - 270px)' }}
- onChange={handleTableChange}
- onScroll={handleScroll}
- showSorterTooltip={false}
+ url={`${config.backendUrl}/jobs`}
+ authenticated={authenticated}
/>
</Flex>
<Modal
- open={newPrintJobOpen}
+ open={newJobOpen}
footer={null}
width={700}
onCancel={() => {
- setNewPrintJobOpen(false)
+ setNewJobOpen(false)
}}
>
- <NewPrintJob
+ <NewJob
onOk={() => {
- setNewPrintJobOpen(false)
+ setNewJobOpen(false)
messageApi.success('New print job created successfully.')
- fetchPrintJobsData()
+ tableRef.current?.reload()
}}
- reset={newPrintJobOpen}
+ reset={newJobOpen}
/>
</Modal>
</>
)
}
-export default PrintJobs
+export default Jobs
diff --git a/src/components/Dashboard/Production/Jobs/JobInfo.jsx b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
new file mode 100644
index 0000000..4f1170a
--- /dev/null
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@@ -0,0 +1,398 @@
+import React, { useState, useEffect, useContext } from 'react'
+import { useLocation } from 'react-router-dom'
+import axios from 'axios'
+import {
+ Descriptions,
+ Spin,
+ Space,
+ Button,
+ message,
+ Progress,
+ Typography,
+ Collapse,
+ Flex,
+ Dropdown,
+ Popover,
+ Checkbox,
+ Card
+} from 'antd'
+import { LoadingOutlined, CaretRightOutlined } from '@ant-design/icons'
+import TimeDisplay from '../../common/TimeDisplay'
+import JobState from '../../common/JobState'
+import IdText from '../../common/IdText'
+import SubJobsTree from '../../common/SubJobsTree'
+import { SocketContext } from '../../context/SocketContext'
+import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
+import ReloadIcon from '../../../Icons/ReloadIcon'
+import useCollapseState from '../../hooks/useCollapseState'
+import config from '../../../../config'
+import AuditLogTable from '../../common/AuditLogTable'
+import DashboardNotes from '../../common/DashboardNotes'
+
+const { Title, Text } = Typography
+
+const JobInfo = () => {
+ const [jobData, setJobData] = useState(null)
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const location = useLocation()
+ const [messageApi] = message.useMessage()
+ const jobId = new URLSearchParams(location.search).get('jobId')
+ const { socket } = useContext(SocketContext)
+ const [collapseState, updateCollapseState] = useCollapseState('JobInfo', {
+ info: true,
+ subJobs: true,
+ notes: true,
+ auditLogs: true
+ })
+
+ useEffect(() => {
+ if (jobId) {
+ fetchJobDetails()
+ }
+ }, [jobId])
+
+ useEffect(() => {
+ if (socket && jobId) {
+ socket.on('notify_job_update', (updateData) => {
+ if (updateData._id === jobId) {
+ setJobData((prevData) => {
+ if (!prevData) return prevData
+ return {
+ ...prevData,
+ state: updateData.state,
+ ...updateData
+ }
+ })
+ }
+ })
+ }
+
+ return () => {
+ if (socket) {
+ socket.off('notify_job_update')
+ }
+ }
+ }, [socket, jobId])
+
+ const fetchJobDetails = async () => {
+ try {
+ setLoading(true)
+ const response = await axios.get(`${config.backendUrl}/jobs/${jobId}`, {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
+ setJobData(response.data)
+ setError(null)
+ } catch (err) {
+ setError('Failed to fetch print job details')
+ messageApi.error('Failed to fetch print job details')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const getViewDropdownItems = () => {
+ const sections = [
+ { key: 'info', label: 'Job Information' },
+ { key: 'subJobs', label: 'Sub Jobs' },
+ { key: 'notes', label: 'Notes' },
+ { key: 'auditLogs', label: 'Audit Logs' }
+ ]
+
+ return (
+ <Flex vertical>
+ <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
+ {sections.map((section) => (
+ <Checkbox
+ checked={collapseState[section.key]}
+ key={section.key}
+ onChange={(e) => {
+ updateCollapseState(section.key, e.target.checked)
+ }}
+ >
+ {section.label}
+ </Checkbox>
+ ))}
+ </Flex>
+ </Flex>
+ )
+ }
+
+ const actionItems = {
+ items: [
+ {
+ label: 'Reload Job',
+ key: 'reload',
+ icon: <ReloadIcon />
+ }
+ ],
+ onClick: ({ key }) => {
+ if (key === 'edit') {
+ // TODO: Implement edit functionality
+ messageApi.info('Edit functionality coming soon')
+ } else if (key === 'reload') {
+ fetchJobDetails()
+ }
+ }
+ }
+
+ return (
+ <>
+ <Flex
+ gap='large'
+ vertical='true'
+ style={{ height: '100%', minHeight: 0 }}
+ >
+ <Flex justify={'space-between'}>
+ <Space size='small'>
+ <Dropdown menu={actionItems}>
+ <Button>Actions</Button>
+ </Dropdown>
+ <Popover
+ content={getViewDropdownItems()}
+ placement='bottomLeft'
+ arrow={false}
+ >
+ <Button>View</Button>
+ </Popover>
+ </Space>
+ </Flex>
+
+ {error ? (
+ <Space
+ direction='vertical'
+ style={{ width: '100%', textAlign: 'center' }}
+ >
+ <p>{error || 'Print job not found'}</p>
+ <Button icon={<ReloadIcon />} onClick={fetchJobDetails}>
+ Retry
+ </Button>
+ </Space>
+ ) : (
+ <div style={{ height: '100%', overflow: 'auto' }}>
+ <Flex vertical style={{ flexGrow: 1 }} gap={'large'}>
+ <Collapse
+ ghost
+ collapsible='icon'
+ activeKey={collapseState.info ? ['info'] : []}
+ onChange={(keys) =>
+ updateCollapseState('info', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+ <CaretRightOutlined
+ rotate={isActive ? 90 : 0}
+ style={{ paddingTop: '2px' }}
+ />
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
+ >
+ <Collapse.Panel
+ header={
+ <Title level={5} style={{ margin: 0 }}>
+ Job Information
+
+ }
+ key='info'
+ >
+ }>
+
+
+ {jobData?._id ? (
+
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.state ? (
+
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.gcodeFile ? (
+
+
+
+ {jobData.gcodeFile.name || 'Not specified'}
+
+
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.gcodeFile?._id ? (
+
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.quantity ? (
+ {jobData.quantity}
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.createdAt ? (
+
+ ) : (
+ n/a
+ )}
+
+
+ {jobData?.startedAt ? (
+
+ ) : (
+ n/a
+ )}
+
+ {jobData?.state?.type === 'printing' && (
+
+
+
+ )}
+
+ {jobData?.printers ? (
+
+ {jobData.printers.length} printers assigned
+
+ ) : (
+ n/a
+ )}
+
+
+
+
+
+
+
+ updateCollapseState('subJobs', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
+ >
+
+ Sub Job Information
+
+ }
+ key='2'
+ >
+
+
+
+
+
+ updateCollapseState('notes', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
+ >
+
+ Notes
+
+ }
+ key='notes'
+ >
+
+
+
+
+
+
+
+ updateCollapseState('auditLogs', keys.length > 0)
+ }
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
+ >
+
+ Audit Logs
+
+ }
+ key='auditLogs'
+ >
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+export default JobInfo
diff --git a/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx b/src/components/Dashboard/Production/Jobs/NewJob.jsx
similarity index 68%
rename from src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx
rename to src/components/Dashboard/Production/Jobs/NewJob.jsx
index 406a213..bcd13f6 100644
--- a/src/components/Dashboard/Production/PrintJobs/NewPrintJob.jsx
+++ b/src/components/Dashboard/Production/Jobs/NewJob.jsx
@@ -1,5 +1,6 @@
import React, { useState } from 'react'
import axios from 'axios'
+import { useMediaQuery } from 'react-responsive'
import {
Form,
Button,
@@ -20,70 +21,66 @@ import config from '../../../../config'
const { Title } = Typography
-const initialNewPrintJobForm = {
+const initialNewJobForm = {
gcodeFile: null,
quantity: 1
}
-const NewPrintJob = ({ onOk, reset }) => {
- NewPrintJob.propTypes = {
+const NewJob = ({ onOk, reset }) => {
+ NewJob.propTypes = {
onOk: PropTypes.func.isRequired,
reset: PropTypes.bool.isRequired
}
const [messageApi, contextHolder] = message.useMessage()
- const [newPrintJobLoading, setNewPrintJobLoading] = useState(false)
+ const [newJobLoading, setNewJobLoading] = useState(false)
const [currentStep, setCurrentStep] = useState(0)
const [nextEnabled, setNextEnabled] = useState(false)
- const [newPrintJobForm] = Form.useForm()
- const [newPrintJobFormValues, setNewPrintJobFormValues] = useState(
- initialNewPrintJobForm
- )
+ const [newJobForm] = Form.useForm()
+ const [newJobFormValues, setNewJobFormValues] = useState(initialNewJobForm)
- const newPrintJobFormUpdateValues = Form.useWatch([], newPrintJobForm)
+ const newJobFormUpdateValues = Form.useWatch([], newJobForm)
+
+ const isMobile = useMediaQuery({ maxWidth: 768 })
React.useEffect(() => {
- newPrintJobForm
+ newJobForm
.validateFields({
validateOnly: true
})
.then(() => setNextEnabled(true))
.catch(() => setNextEnabled(false))
- }, [newPrintJobForm, newPrintJobFormUpdateValues])
+ }, [newJobForm, newJobFormUpdateValues])
const summaryItems = [
{
key: 'quantity',
label: 'Quantity',
- children: newPrintJobFormValues.quantity
+ children: newJobFormValues.quantity
}
]
React.useEffect(() => {
if (reset) {
- newPrintJobForm.resetFields()
+ newJobForm.resetFields()
}
- }, [reset, newPrintJobForm])
+ }, [reset, newJobForm])
- const handleNewPrintJob = async () => {
- setNewPrintJobLoading(true)
+ const handleNewJob = async () => {
+ setNewJobLoading(true)
try {
- await axios.post(
- `${config.backendUrl}/printjobs`,
- newPrintJobFormValues,
- {
- headers: {
- Accept: 'application/json'
- },
- withCredentials: true // Important for including cookies
- }
- )
+ await axios.post(`${config.backendUrl}/jobs`, newJobFormValues, {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
onOk()
} catch (error) {
messageApi.error('Error creating new print job: ' + error.message)
} finally {
- setNewPrintJobLoading(false)
+ setNewJobLoading(false)
}
}
@@ -108,7 +105,6 @@ const NewPrintJob = ({ onOk, reset }) => {
{
}
]}
>
-
+
{
return (
{contextHolder}
-
-
-
+ {!isMobile && (
+
+
+
+ )}
-
+ {!isMobile && }
- New PrintJob
+ New Job
)
@@ -471,8 +486,8 @@ const ControlPrinter = () => {
{printerData ? (
-
-
+
+
{printerData?.alerts?.some(
(alert) => alert.type === 'klippyError'
@@ -540,14 +555,16 @@ const ControlPrinter = () => {
- {
+ {printerData.currentJob?.gcodeFile?.name ? (
- {printerData.currentJob?.gcodeFile?.name || 'n/a'}
+ {printerData.currentJob?.gcodeFile?.name}
- }
+ ) : (
+ 'n/a'
+ )}
{printerData.currentJob?.gcodeFile ? (
@@ -601,7 +618,14 @@ const ControlPrinter = () => {
/>
- {printerData.name}
+ {printerData.currentSubJob?.startedAt ? (
+
+ ) : (
+ 'n/a'
+ )}
)}
@@ -740,18 +764,24 @@ const ControlPrinter = () => {
{printerData.currentFilamentStock?.currentNetWeight ? (
-
-
- {printerData.currentFilamentStock.currentNetWeight.toFixed(
- 2
- ) + 'g'}
-
-
- {printerData.currentFilamentStock.currentGrossWeight.toFixed(
- 2
- ) + 'g'}
-
-
+
+
+
+ {printerData.currentFilamentStock.currentNetWeight.toFixed(
+ 2
+ ) + 'g'}
+
+
+ {printerData.currentFilamentStock.currentGrossWeight.toFixed(
+ 2
+ ) + 'g'}
+
+
+
) : (
'n/a'
)}
@@ -793,7 +823,7 @@ const ControlPrinter = () => {
-
+
{componentVisibility.temperature && (
{
>
)}
+
+ {componentVisibility.misc && (
+
+
+
+ )}
) : (
diff --git a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
index 3e00038..1bf2296 100644
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@@ -31,6 +31,7 @@ import CheckIcon from '../../../Icons/CheckIcon.jsx'
import useCollapseState from '../../hooks/useCollapseState'
import config from '../../../../config.js'
+import AuditLogTable from '../../common/AuditLogTable.jsx'
const { Title } = Typography
@@ -46,7 +47,8 @@ const PrinterInfo = () => {
const [form] = Form.useForm()
const [collapseState, updateCollapseState] = useCollapseState('PrinterInfo', {
info: true,
- jobs: true
+ jobs: true,
+ auditLogs: true
})
useEffect(() => {
@@ -199,311 +201,348 @@ const PrinterInfo = () => {
return (
)
}
diff --git a/src/components/Dashboard/Production/ProductionOverview.jsx b/src/components/Dashboard/Production/ProductionOverview.jsx
index 0ff4870..8cd9f91 100644
--- a/src/components/Dashboard/Production/ProductionOverview.jsx
+++ b/src/components/Dashboard/Production/ProductionOverview.jsx
@@ -9,17 +9,16 @@ import {
message,
Button,
Collapse,
- Segmented
+ Segmented,
+ Card
} from 'antd'
import { LoadingOutlined, CaretRightOutlined } from '@ant-design/icons'
+import { Line } from '@ant-design/charts'
import axios from 'axios'
import PrinterIcon from '../../Icons/PrinterIcon'
import JobIcon from '../../Icons/JobIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
-import PauseIcon from '../../Icons/PauseIcon'
-import XMarkIcon from '../../Icons/XMarkIcon'
import useCollapseState from '../hooks/useCollapseState'
-import CheckIcon from '../../Icons/CheckIcon'
import config from '../../../config'
@@ -29,6 +28,7 @@ const ProductionOverview = () => {
const [messageApi, contextHolder] = message.useMessage()
const [error, setError] = useState(null)
const [fetchPrinterStatsLoading, setFetchPrinterStatsLoading] = useState(true)
+ const [chartData, setChartData] = useState([])
const [collapseState, updateCollapseState] = useCollapseState(
'ProductionOverview',
{
@@ -46,9 +46,9 @@ const ProductionOverview = () => {
const [stats, setStats] = useState({
totalPrinters: 0,
activePrinters: 0,
- totalPrintJobs: 0,
- activePrintJobs: 0,
- completedPrintJobs: 0,
+ totalJobs: 0,
+ activeJobs: 0,
+ completedJobs: 0,
printerStatus: {
idle: 0,
printing: 0,
@@ -59,7 +59,8 @@ const ProductionOverview = () => {
const fetchAllStats = useCallback(async () => {
await fetchPrinterStats()
- await fetchPrintJobStats()
+ await fetchJobstats()
+ await fetchChartData()
console.log(stats)
}, [])
@@ -84,17 +85,17 @@ const ProductionOverview = () => {
}
}
- const fetchPrintJobStats = async () => {
+ const fetchJobstats = async () => {
try {
setFetchPrinterStatsLoading(true)
- const response = await axios.get(`${config.backendUrl}/printjobs/stats`, {
+ const response = await axios.get(`${config.backendUrl}/jobs/stats`, {
headers: {
Accept: 'application/json'
},
withCredentials: true
})
- const printJobStats = response.data
- setStats((prev) => ({ ...prev, printJobs: printJobStats }))
+ const jobstats = response.data
+ setStats((prev) => ({ ...prev, jobs: jobstats }))
setError(null)
} catch (err) {
setError('Failed to fetch printer details')
@@ -104,6 +105,20 @@ const ProductionOverview = () => {
}
}
+ const fetchChartData = async () => {
+ try {
+ const response = await axios.get(`${config.backendUrl}/stats/history`, {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true
+ })
+ setChartData(response.data)
+ } catch (err) {
+ console.error('Failed to fetch chart data:', err)
+ }
+ }
+
useEffect(() => {
fetchAllStats()
}, [fetchAllStats])
@@ -131,287 +146,298 @@ const ProductionOverview = () => {
}
return (
-
+
{contextHolder}
-
updateCollapseState('overview', keys.length > 0)}
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse no-t-padding-collapse'
- >
-
- Status Overview
-
- }
- key='1'
+
+ updateCollapseState('overview', keys.length > 0)}
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse no-t-padding-collapse'
>
-
+ Status Overview
+
+ }
+ key='1'
>
-
- Ready
-
-
-
- {(stats.printers.standby || 0) +
- (stats.printers.complete || 0)}
-
+
+
+ Ready
+
+
+
+ {(stats.printers.standby || 0) +
+ (stats.printers.complete || 0)}
+
+
-
- }
- />
-
- Printing
-
-
-
- {stats.printers.printing || 0}
-
+ }
+ />
+
+ Printing
+
+
+
+ {stats.printers.printing || 0}
+
+
-
- }
- />
-
- Queued
-
-
-
- {stats.printJobs.queued || 0}
-
+ }
+ />
+
+ Queued
+
+
+
+ {stats.jobs.queued || 0}
+
+
-
- }
- />
-
- Printing
-
-
-
- {stats.printJobs.printing || 0}
-
+ }
+ />
+
+ Printing
+
+
+
+ {stats.jobs.printing || 0}
+
+
-
- }
- />
-
- Failed
-
-
-
- {(stats.printJobs.failed || 0) +
- (stats.printJobs.cancelled || 0)}
-
+ }
+ />
+
+ Failed
+
+
+
+ {(stats.jobs.failed || 0) + (stats.jobs.cancelled || 0)}
+
+
-
- }
- />
-
- Complete
-
-
-
- {stats.printJobs.complete || 0}
-
+ }
+ />
+
+ Complete
+
+
+
+ {stats.jobs.complete || 0}
+
+
-
- }
- />
-
-
-
+ }
+ />
+
+
+
-
-
-
- updateCollapseState('printerStats', keys.length > 0)
- }
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
-
- Printer Statistics
-
-
- setTimeRanges((prev) => ({
- ...prev,
- printerStats: value
- }))
- }
- size='small'
- />
-
+
+
+
+ updateCollapseState('printerStats', keys.length > 0)
}
- key='2'
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
-
-
-
- {'Completed'}
-
- }
+
- {stats.totalPrinters}
-
-
-
- {'Error'}
-
- }
- >
- {stats.activePrinters}
-
-
-
- {'Paused'}
-
- }
- >
- {stats.activePrinters}
-
-
-
-
-
-
-
-
- updateCollapseState('jobStats', keys.length > 0)
- }
- expandIcon={({ isActive }) => (
-
- )}
- className='no-h-padding-collapse'
- >
-
-
- Job Statistics
-
-
- setTimeRanges((prev) => ({ ...prev, jobStats: value }))
- }
- size='small'
- />
+
+ Production Statistics
+
+
+ setTimeRanges((prev) => ({
+ ...prev,
+ printerStats: value
+ }))
+ }
+ size='small'
+ />
+
+ }
+ key='2'
+ >
+
+
+
+
+
+
+ {stats.totalPrinters}
+
+
+ {stats.activePrinters}
+
+
+ {stats.activePrinters}
+
+
+
+
+
+
+
+ updateCollapseState('jobStats', keys.length > 0)
}
- key='3'
+ expandIcon={({ isActive }) => (
+
+ )}
+ className='no-h-padding-collapse'
>
-
-
-
-
- {'Completed'}
-
- }
+
- {stats.totalPrintJobs}
-
-
-
- {'Failed'}
-
- }
+
+ Job Statistics
+
+
+ setTimeRanges((prev) => ({ ...prev, jobStats: value }))
+ }
+ size='small'
+ />
+
+ }
+ key='3'
+ >
+
+
- {stats.activePrintJobs}
-
-
-
- {'Queued'}
-
- }
- >
- {stats.completedPrintJobs}
-
-
-
-
-
+
+
+
+
+ {stats.totalJobs}
+
+
+ {stats.activeJobs}
+
+
+ {stats.completedJobs}
+
+
+
+
+
+
-
+