+
+ )
+ }
+
+ if (error || !filamentData) {
+ return (
+ {error || 'Filament not found'}
+ } onClick={fetchFilamentDetails}> + Retry + +
+ {contextHolder}
+
+
+ Filament Information
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updateFilamentInfo}
+ loading={loading}
+ >
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ >
+
+ ) : (
+ } onClick={startEditing}>
+ )}
+
+
+
+
+
+ )
+}
+
+export default FilamentInfo
diff --git a/src/components/Dashboard/Management/Filaments/NewFilament.jsx b/src/components/Dashboard/Management/Filaments/NewFilament.jsx
new file mode 100644
index 0000000..e6ee00e
--- /dev/null
+++ b/src/components/Dashboard/Management/Filaments/NewFilament.jsx
@@ -0,0 +1,432 @@
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import axios from 'axios'
+import {
+ Form,
+ Input,
+ InputNumber,
+ Button,
+ message,
+ Typography,
+ Select,
+ Flex,
+ Steps,
+ Col,
+ Row,
+ Divider,
+ ColorPicker,
+ Upload,
+ Descriptions,
+ Badge
+} from 'antd'
+import { UploadOutlined, LinkOutlined } from '@ant-design/icons'
+
+const { Title, Text } = Typography
+
+const initialNewFilamentForm = {
+ name: '',
+ brand: '',
+ type: '',
+ price: 0,
+ color: '#FFFFFF',
+ diameter: '1.75',
+ image: null,
+ url: '',
+ barcode: ''
+}
+
+const NewFilament = ({ onOk, reset }) => {
+ const [messageApi, contextHolder] = message.useMessage()
+
+ const [newFilamentLoading, setNewFilamentLoading] = useState(false)
+ const [currentStep, setCurrentStep] = useState(0)
+ const [nextEnabled, setNextEnabled] = useState(false)
+
+ const [newFilamentForm] = Form.useForm()
+ const [newFilamentFormValues, setNewFilamentFormValues] = useState(
+ initialNewFilamentForm
+ )
+
+ const [imageList, setImageList] = useState([])
+
+ const newFilamentFormUpdateValues = Form.useWatch([], newFilamentForm)
+
+ React.useEffect(() => {
+ newFilamentForm
+ .validateFields({
+ validateOnly: true
+ })
+ .then(() => setNextEnabled(true))
+ .catch(() => setNextEnabled(false))
+ }, [newFilamentForm, newFilamentFormUpdateValues])
+
+ const summaryItems = [
+ {
+ key: 'name',
+ label: 'Name',
+ children: newFilamentFormValues.name
+ },
+ {
+ key: 'brand',
+ label: 'Brand',
+ children: newFilamentFormValues.brand
+ },
+ {
+ key: 'type',
+ label: 'Material',
+ children: newFilamentFormValues.type
+ },
+ {
+ key: 'price',
+ label: 'Price',
+ children: '£' + newFilamentFormValues.price + ' per kg'
+ },
+ {
+ key: 'color',
+ label: 'Colour',
+ children: (
+
+
+ Click or drag 3D Model files here. +
++ Supported file extensions: .stl, .3mf +
+
+
+
+
+
+ )}
+ {stlLoading && (
+
+ Loading 3D model...
+
+ )}
+
+
+ )
+ }
+
+ if (error || !partData) {
+ return (
+ {error || 'Part not found'}
+ } onClick={fetchPartDetails}> + Retry + +
+ {contextHolder}
+
+
+ Part Information
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updateInfo}
+ loading={loading}
+ >
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ >
+
+ ) : (
+ } onClick={startEditing}>
+ )}
+
+
+
+
+
+
+
+ Part Preview
+
+
+
+
+
+ )
+}
+
+export default PartInfo
diff --git a/src/components/Dashboard/Management/Products.jsx b/src/components/Dashboard/Management/Products.jsx
new file mode 100644
index 0000000..1d4c4ac
--- /dev/null
+++ b/src/components/Dashboard/Management/Products.jsx
@@ -0,0 +1,237 @@
+// src/gcodefiles.js
+
+import React, { useEffect, useState, useContext, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import moment from 'moment'
+
+import { Table, Button, Flex, Space, Modal, Dropdown, message } from 'antd'
+import { createStyles } from 'antd-style'
+import {
+ LoadingOutlined,
+ PlusOutlined,
+ DownloadOutlined,
+ ReloadOutlined,
+ InfoCircleOutlined
+} from '@ant-design/icons'
+
+import { AuthContext } from '../../Auth/AuthContext'
+
+import IdText from '../common/IdText'
+import NewProduct from './Products/NewProduct'
+import ProductIcon from '../../Icons/ProductIcon'
+
+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 Products = () => {
+ const [messageApi, contextHolder] = message.useMessage()
+ const navigate = useNavigate()
+ const { styles } = useStyle()
+
+ const [productsData, setProductsData] = useState([])
+
+ const [newProductOpen, setNewProductOpen] = useState(false)
+
+ const [loading, setLoading] = useState(true)
+
+ const { authenticated } = useContext(AuthContext)
+
+ const fetchProductsData = useCallback(async () => {
+ try {
+ const response = await axios.get('http://localhost:8080/products', {
+ params: {
+ page: 1,
+ limit: 25
+ },
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
+ setProductsData(response.data)
+ setLoading(false)
+ //setPagination({ ...pagination, total: response.data.totalItems }); // Update total count
+ } catch (error) {
+ if (error.response) {
+ messageApi.error(
+ 'Error updating printer details:',
+ error.response.status
+ )
+ } else {
+ messageApi.error(
+ 'An unexpected error occurred. Please try again later.'
+ )
+ }
+ }
+ }, [messageApi])
+
+ useEffect(() => {
+ if (authenticated) {
+ fetchProductsData()
+ }
+ }, [authenticated, fetchProductsData])
+
+ const getProductActionItems = (id) => {
+ return {
+ items: [
+ {
+ label: 'Info',
+ key: 'info',
+ icon:
+
+
+
+
+ )
+ }
+
+ if (error || !productData) {
+ return (
+ {error || 'Product not found'}
+ } onClick={fetchProductDetails}> + Retry + +
+ {contextHolder}
+
+
+ Product Information
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updateInfo}
+ loading={loading}
+ >
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ >
+
+ ) : (
+ } onClick={startEditing}>
+ )}
+
+
+
+
+
+
+
+ Product Preview
+
+
+
+
+
+ )
+}
+
+export default ProductInfo
diff --git a/src/components/Dashboard/Management/Vendors.jsx b/src/components/Dashboard/Management/Vendors.jsx
new file mode 100644
index 0000000..e391208
--- /dev/null
+++ b/src/components/Dashboard/Management/Vendors.jsx
@@ -0,0 +1,226 @@
+import React, { useEffect, useState, useContext, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import moment from 'moment'
+import { Table, Button, Flex, Space, Modal, Dropdown, message } from 'antd'
+import { createStyles } from 'antd-style'
+import {
+ LoadingOutlined,
+ PlusOutlined,
+ ReloadOutlined,
+ InfoCircleOutlined,
+ ShopOutlined
+} from '@ant-design/icons'
+import { AuthContext } from '../../Auth/AuthContext'
+import IdText from '../common/IdText'
+import NewVendor from './Vendors/NewVendor'
+
+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 { authenticated } = useContext(AuthContext)
+
+ const fetchVendorsData = useCallback(async () => {
+ try {
+ const response = await axios.get('http://localhost:8080/vendors', {
+ params: {
+ page: 1,
+ limit: 25
+ },
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true
+ })
+ setVendorsData(response.data)
+ setLoading(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.'
+ )
+ }
+ }
+ }, [messageApi])
+
+ useEffect(() => {
+ if (authenticated) {
+ fetchVendorsData()
+ }
+ }, [authenticated, fetchVendorsData])
+
+ const getVendorActionItems = (id) => {
+ return {
+ items: [
+ {
+ label: 'Info',
+ key: 'info',
+ icon:
+
+
+
+
+ )
+ }
+
+ if (error || !vendorData) {
+ return (
+ {error || 'Vendor not found'}
+ } onClick={fetchVendorDetails}> + Retry + +
+ {contextHolder}
+
+
+ Vendor Information
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updateInfo}
+ loading={loading}
+ />
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ />
+
+ ) : (
+ } onClick={startEditing} />
+ )}
+
+
+
+
+
+ )
+}
+
+export default VendorInfo
diff --git a/src/components/Dashboard/Production/GCodeFiles.jsx b/src/components/Dashboard/Production/GCodeFiles.jsx
new file mode 100644
index 0000000..b5e2b07
--- /dev/null
+++ b/src/components/Dashboard/Production/GCodeFiles.jsx
@@ -0,0 +1,325 @@
+// src/gcodefiles.js
+
+import React, { useEffect, useState, useContext, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import moment from 'moment'
+
+import {
+ Table,
+ Badge,
+ Button,
+ Flex,
+ Space,
+ Modal,
+ Dropdown,
+ Typography,
+ message
+} from 'antd'
+import { createStyles } from 'antd-style'
+import {
+ LoadingOutlined,
+ PlusOutlined,
+ DownloadOutlined,
+ ReloadOutlined,
+ InfoCircleOutlined
+} from '@ant-design/icons'
+
+import { AuthContext } from '../../Auth/AuthContext'
+
+import NewGCodeFile from './GCodeFiles/NewGCodeFile'
+import IdText from '../common/IdText'
+import GCodeFileIcon from '../../Icons/GCodeFileIcon'
+
+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 [gcodeFilesData, setGCodeFilesData] = useState([])
+
+ const [newGCodeFileOpen, setNewGCodeFileOpen] = useState(false)
+
+ const [loading, setLoading] = useState(true)
+
+ const { authenticated } = useContext(AuthContext)
+
+ const fetchGCodeFilesData = useCallback(async () => {
+ try {
+ const response = await axios.get('http://localhost:8080/gcodefiles', {
+ params: {
+ page: 1,
+ limit: 25
+ },
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
+ setGCodeFilesData(response.data)
+ setLoading(false)
+ //setPagination({ ...pagination, total: response.data.totalItems }); // Update total count
+ } catch (error) {
+ if (error.response) {
+ messageApi.error(
+ 'Error updating printer details:',
+ error.response.status
+ )
+ } else {
+ messageApi.error(
+ 'An unexpected error occurred. Please try again later.'
+ )
+ }
+ }
+ }, [messageApi])
+
+ useEffect(() => {
+ if (authenticated) {
+ fetchGCodeFilesData()
+ }
+ }, [authenticated, fetchGCodeFilesData])
+
+ const getGCodeFileActionItems = (id) => {
+ return {
+ items: [
+ {
+ label: 'Info',
+ key: 'info',
+ icon:
+
+ )
+ }
+
+ if (error || !gcodeFileData) {
+ return (
+ {error || 'GCodeFile not found'}
+ } onClick={fetchFilamentDetails}> + Retry + +
+
+
+ {gcodeFileData.id ? (
+
+
+ {(() => {
+ if (gcodeFileData.createdAt) {
+ return moment(gcodeFileData.createdAt.$date).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }
+ return 'N/A'
+ })()}
+
+
+ {gcodeFileData.name || 'n/a'}
+
+
+ {gcodeFileData.gcodeFileInfo.estimatedPrintingTimeNormalMode || 'n/a'}
+
+
+ {gcodeFileData.filament ? (
+
+
+ {gcodeFileData.filament ? (
+
+
+ {(() => {
+ 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'
+ }
+ })()}
+
+
+ {gcodeFileData.gcodeFileInfo.thumbnail ? (
+ 
+ ) : (
+ 'n/a'
+ )}
+
+
+
+ )
+}
+
+export default GCodeFileInfo
diff --git a/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx b/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx
new file mode 100644
index 0000000..06596ef
--- /dev/null
+++ b/src/components/Dashboard/Production/GCodeFiles/NewGCodeFile.jsx
@@ -0,0 +1,501 @@
+import PropTypes from 'prop-types'
+import React, { useState, useContext } from 'react'
+import axios from 'axios'
+import {
+ capitalizeFirstLetter,
+ timeStringToMinutes
+} from '../../utils/Utils.js'
+import {
+ Form,
+ Input,
+ Button,
+ message,
+ Typography,
+ Flex,
+ Steps,
+ Divider,
+ Upload,
+ Descriptions,
+ Checkbox,
+ Spin
+} from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+
+import { AuthContext } from '../../../Auth/AuthContext'
+
+import GCodeFileIcon from '../../../Icons/GCodeFileIcon'
+
+import FilamentSelect from '../../common/FilamentSelect'
+
+const { Dragger } = Upload
+
+const { Title } = Typography
+
+const initialNewGCodeFileForm = {
+ gcodeFileInfo: {},
+ name: '',
+ printTimeMins: 0,
+ price: 0,
+ file: null,
+ material: null
+}
+
+//const chunkSize = 5000
+
+const NewGCodeFile = ({ onOk, reset }) => {
+ const [messageApi, contextHolder] = message.useMessage()
+
+ const [newGCodeFileLoading, setNewGCodeFileLoading] = useState(false)
+ const [gcodeParsing, setGcodeParsing] = useState(false)
+
+ const [filamentSelectFilter, setFilamentSelectFilter] = useState(null)
+ const [useFilamentSelectFilter, setUseFilamentSelectFilter] = useState(true)
+
+ const [currentStep, setCurrentStep] = useState(0)
+ const [nextEnabled, setNextEnabled] = useState(false)
+ const [nextLoading, setNextLoading] = useState(false)
+
+ const [newGCodeFileForm] = Form.useForm()
+ const [newGCodeFileFormValues, setNewGCodeFileFormValues] = useState(
+ initialNewGCodeFileForm
+ )
+
+ const [gcodeFile, setGCodeFile] = useState(null)
+
+ const newGCodeFileFormUpdateValues = Form.useWatch([], newGCodeFileForm)
+
+ const { token, authenticated } = useContext(AuthContext)
+ // eslint-disable-next-line
+ const fetchFilamentDetails = async () => {
+ if (!authenticated) {
+ return
+ }
+ if (
+ newGCodeFileFormValues.filament &&
+ newGCodeFileFormValues.gcodeFileInfo
+ ) {
+ try {
+ setNextLoading(true)
+ const response = await axios.get(
+ `http://localhost:8080/filaments/${newGCodeFileFormValues.filament}`,
+ {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ }
+ )
+ setNextLoading(false)
+
+ const price =
+ (response.data.price / 1000) *
+ newGCodeFileFormValues.gcodeFileInfo.filament_used_g // convert kg to g and multiply
+
+ const printTimeMins = timeStringToMinutes(
+ newGCodeFileFormValues.gcodeFileInfo
+ .estimated_printing_time_normal_mode
+ )
+ setNewGCodeFileFormValues({
+ ...newGCodeFileFormValues,
+ price,
+ printTimeMins
+ })
+ } catch (error) {
+ if (error.response) {
+ messageApi.error(
+ 'Error fetching filament data:',
+ error.response.status
+ )
+ } else {
+ messageApi.error(
+ 'An unexpected error occurred. Please try again later.'
+ )
+ }
+ }
+ }
+ }
+
+ React.useEffect(() => {
+ newGCodeFileForm
+ .validateFields({
+ validateOnly: true
+ })
+ .then(() => setNextEnabled(true))
+ .catch(() => setNextEnabled(false))
+ }, [newGCodeFileForm, newGCodeFileFormUpdateValues])
+
+ const summaryItems = [
+ {
+ key: 'name',
+ label: 'Name',
+ children: newGCodeFileFormValues.name
+ },
+ {
+ key: 'price',
+ label: 'Price / Cost',
+ children: '£' + newGCodeFileFormValues.price.toFixed(2)
+ },
+ {
+ key: 'sparse_infill_density',
+ label: 'Infill Density',
+ children: newGCodeFileFormValues.gcodeFileInfo.sparseInfillDensity
+ },
+ {
+ key: 'sparse_infill_pattern',
+ label: 'Infill Pattern',
+ children: capitalizeFirstLetter(
+ newGCodeFileFormValues.gcodeFileInfo.sparseInfillPattern
+ )
+ },
+ {
+ key: 'layer_height',
+ label: 'Layer Height',
+ children: newGCodeFileFormValues.gcodeFileInfo.layerHeight + 'mm'
+ },
+ {
+ key: 'filamentType',
+ label: 'Filament Material',
+ children: newGCodeFileFormValues.gcodeFileInfo.filamentType
+ },
+ {
+ key: 'filamentUsedG',
+ label: 'Filament Used (g)',
+ children: newGCodeFileFormValues.gcodeFileInfo.filamentUsedG + 'g'
+ },
+ {
+ key: 'filamentVendor',
+ label: 'Filament Brand',
+ children: newGCodeFileFormValues.gcodeFileInfo.filamentVendor
+ },
+
+ {
+ key: 'hotendTemperature',
+ label: 'Hotend Temperature',
+ children: newGCodeFileFormValues.gcodeFileInfo.nozzleTemperature + '°'
+ },
+ {
+ key: 'bedTemperature',
+ label: 'Bed Temperature',
+ children: newGCodeFileFormValues.gcodeFileInfo.hotPlateTemp + '°'
+ },
+ {
+ key: 'estimated_printing_time_normal_mode',
+ label: 'Est. Print Time',
+ children:
+ newGCodeFileFormValues.gcodeFileInfo.estimatedPrintingTimeNormalMode
+ }
+ ]
+
+ React.useEffect(() => {
+ if (reset) {
+ setCurrentStep(0)
+ newGCodeFileForm.resetFields()
+ }
+ }, [reset, newGCodeFileForm])
+
+ const handleNewGCodeFileUpload = async (id) => {
+ setNewGCodeFileLoading(true)
+ const formData = new FormData()
+ formData.append('gcodeFile', gcodeFile)
+ try {
+ await axios.post(
+ `http://localhost:8080/gcodefiles/${id}/content`,
+ formData,
+ {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ Authorization: `Bearer ${token}`
+ }
+ }
+ )
+ messageApi.success('Finished uploading!')
+ resetForm()
+ onOk()
+ } catch (error) {
+ messageApi.error('Error creating new gcode file: ' + error.message)
+ } finally {
+ setNewGCodeFileLoading(false)
+ }
+ }
+
+ const handleNewGCodeFile = async () => {
+ setNewGCodeFileLoading(true)
+ try {
+ const request = await axios.post(
+ `http://localhost:8080/gcodefiles`,
+ newGCodeFileFormValues,
+ {
+ headers: {
+ Authorization: `Bearer ${token}`
+ }
+ }
+ )
+ messageApi.info('New G Code file created successfully. Uploading...')
+ handleNewGCodeFileUpload(request.data._id)
+ } catch (error) {
+ messageApi.error('Error creating new gcode file: ' + error.message)
+ } finally {
+ setNewGCodeFileLoading(false)
+ }
+ }
+
+ const handleGetGCodeFileInfo = async (file) => {
+ try {
+ setGcodeParsing(true)
+ // Create a FormData object to send the file
+ const formData = new FormData()
+ formData.append('gcodeFile', file)
+
+ // Call the API to extract and parse the config block
+ const request = await axios.post(
+ `http://localhost:8080/gcodefiles/content`,
+ formData,
+ {
+ withCredentials: true // Important for including cookies
+ },
+ {
+ headers: {
+ Accept: 'application/json'
+ }
+ }
+ )
+
+ // Parse the API response
+ const parsedConfig = await request.data
+
+ // Update state with the parsed config from API
+ setNewGCodeFileFormValues({
+ ...newGCodeFileFormValues,
+ gcodeFileInfo: parsedConfig
+ })
+
+ console.log(parsedConfig)
+
+ // Update filter settings if filament info is available
+ if (parsedConfig.filament_type && parsedConfig.filament_diameter) {
+ setFilamentSelectFilter({
+ type: parsedConfig.filament_type,
+ diameter: parsedConfig.filament_diameter
+ })
+ }
+ const fileName = file.name.replace(/\.[^/.]+$/, '')
+ newGCodeFileForm.setFieldValue('name', fileName)
+ setNewGCodeFileFormValues((prev) => ({
+ ...prev,
+ name: fileName
+ }))
+ setGCodeFile(file)
+ setGcodeParsing(false)
+ setCurrentStep(currentStep + 1)
+ } catch (error) {
+ console.error('Error getting G-code file info:', error)
+ }
+ }
+
+ const resetForm = () => {
+ newGCodeFileForm.setFieldsValue(initialNewGCodeFileForm)
+ setNewGCodeFileFormValues(initialNewGCodeFileForm)
+ setGCodeFile(null)
+ setGcodeParsing(false)
+ setCurrentStep(0)
+ }
+
+ const steps = [
+ {
+ title: 'Upload',
+ key: 'upload',
+ content: (
+ <>
+
+
+ Click or drag gcode file here. +
++ Supported file extentions: .gcode, .gco, .g +
+ + )} +
+
+
+
+
+ )
+ }
+
+ if (error || !printJobData) {
+ return (
+ {error || 'Print job not found'}
+ } onClick={fetchPrintJobDetails}> + Retry + +
+
+
+
+
+
+
+ {printJobData.gcodeFile?.name || 'Not specified'}
+
+
+
+
+ {printJobData.quantity || 1}
+
+
+ {(() => {
+ if (printJobData.createdat) {
+ return moment(printJobData.createdat.$date).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }
+ return 'N/A'
+ })()}
+
+
+ {(() => {
+ if (printJobData.started_at) {
+ return moment(printJobData.started_at.$date).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }
+ return 'N/A'
+ })()}
+
+ {printJobData.state.type === 'printing' && (
+
+
+
+ )}
+
+ {printJobData.printers?.length > 0 ? (
+ {printJobData.printers.length} printers assigned
+ ) : (
+ 'Any available printer'
+ )}
+
+
+
+ Sub Job Information
+
+
+ )
+}
+
+export default PrintJobInfo
diff --git a/src/components/Dashboard/Production/Printers.jsx b/src/components/Dashboard/Production/Printers.jsx
new file mode 100644
index 0000000..fe7b75d
--- /dev/null
+++ b/src/components/Dashboard/Production/Printers.jsx
@@ -0,0 +1,329 @@
+// src/Printers.js
+
+import React, { useEffect, useState, useContext, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import axios from 'axios'
+import {
+ Table,
+ Button,
+ message,
+ Dropdown,
+ Space,
+ Flex,
+ Input,
+ Tag,
+ Modal
+} from 'antd'
+import { createStyles } from 'antd-style'
+import {
+ InfoCircleOutlined,
+ EditOutlined,
+ ControlOutlined,
+ LoadingOutlined,
+ ReloadOutlined,
+ FilterOutlined,
+ CloseOutlined,
+ PlusOutlined,
+ PrinterOutlined
+} from '@ant-design/icons'
+
+import { AuthContext } from '../../Auth/AuthContext'
+import PrinterState from '../common/PrinterState'
+import NewPrinter from './Printers/NewPrinter'
+import IdText from '../common/IdText'
+
+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 Printers = () => {
+ const { styles } = useStyle()
+ const [printerData, setPrinterData] = useState([])
+
+ const [messageApi] = message.useMessage()
+ const [showFilters, setShowFilters] = useState(false)
+
+ const { authenticated } = useContext(AuthContext)
+ const [loading, setLoading] = useState(false)
+ const [filters, setFilters] = useState({
+ printerName: '',
+ host: '',
+ tags: ''
+ })
+
+ const [newPrinterOpen, setNewPrinterOpen] = useState(false)
+
+ const navigate = useNavigate()
+
+ const fetchPrintersData = useCallback(async () => {
+ try {
+ const response = await axios.get('http://localhost:8080/printers', {
+ params: {
+ page: 1,
+ limit: 25
+ },
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
+ setLoading(false)
+ setPrinterData(response.data)
+ } catch (error) {
+ if (error.response) {
+ messageApi.error('Error fetching printer data:', error.response.status)
+ } else {
+ messageApi.error(
+ 'An unexpected error occurred. Please try again later.'
+ )
+ }
+ }
+ }, [messageApi])
+
+ const handleFilterChange = (field, value) => {
+ setFilters((prev) => ({
+ ...prev,
+ [field]: value
+ }))
+ }
+
+ const getPrinterActionItems = (printerId) => {
+ return {
+ items: [
+ {
+ label: 'Control',
+ key: 'control',
+ icon:
+
+ Click or gcode instruction file here. +
++ Supported file extentions: .gcode, .gco, .g +
+
+ {printerData ? (
+
+
+
+
+ {printerData.printerName}
+
+
+ {printerData.currentJob?.id ? (
+
+
+ {printerData.currentJob?.gcodeFile?.name || 'n/a'}
+
+
+ {printerData.currentJob?.gcodeFile ? (
+
+
+
+ {(() => {
+ if (
+ printerData.currentJob?.gcodeFile?.gcodeFileInfo
+ .estimatedPrintingTimeNormalMode
+ ) {
+ return `${
+ printerData.currentJob.gcodeFile.gcodeFileInfo
+ .estimatedPrintingTimeNormalMode
+ }`
+ }
+ return 'n/a'
+ })()}
+
+
+
+ {(() => {
+ if (
+ printerData?.currentJob?.gcodeFile.gcodeFileInfo
+ .printSettingsId
+ ) {
+ return `${printerData.currentJob.gcodeFile.gcodeFileInfo.printSettingsId.replaceAll('"', '')}`
+ } else {
+ return 'n/a'
+ }
+ })()}
+
+
+ {printerData.currentSubJob?.state.type === 'printing' && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+ ),
+ duration: 0,
+ key: 'network-scan',
+ icon: null,
+ placement: 'bottomRight',
+ style: {
+ width: 360
+ },
+ className: 'network-scan-notification',
+ closeIcon: null,
+ onClose: () => {},
+ btn: null
+ })
+ },
+ [notificationApi]
+ )
+
+ const discoverPrinters = useCallback(() => {
+ if (!discovering) {
+ setDiscovering(true)
+ setDiscoveredPrinters([])
+ messageApi.info('Discovering printers...')
+ socket.off('notify_scan_network_found')
+ socket.off('notify_scan_network_progress')
+ socket.off('notify_scan_network_complete')
+
+ socket.on('notify_scan_network_found', notifyScanNetworkFound)
+ socket.on('notify_scan_network_progress', notifyScanNetworkProgress)
+ socket.on('notify_scan_network_complete', notifyScanNetworkComplete)
+
+ socket.emit('bridge.scan_network.start', {
+ port: scanPort,
+ protocol: scanProtocol
+ })
+ }
+ }, [
+ discovering,
+ socket,
+ scanPort,
+ scanProtocol,
+ messageApi,
+ notifyScanNetworkFound,
+ notifyScanNetworkProgress,
+ notifyScanNetworkComplete
+ ])
+
+ useEffect(() => {
+ setInitialized(true)
+ if (!initialized) {
+ discoverPrinters()
+ }
+ }, [initialized, discoverPrinters])
+
+ const stopDiscovery = () => {
+ if (discovering) {
+ setDiscovering(false)
+ notificationApi.destroy('network-scan')
+ messageApi.info('Stopping discovery...')
+ socket.off('notify_scan_network_found')
+ socket.off('notify_scan_network_progress')
+ socket.off('notify_scan_network_complete')
+ socket.emit('bridge.scan_network.stop', (response) => {
+ if (response == false) {
+ messageApi.error('Error stopping discovery!')
+ }
+ })
+ }
+ }
+
+ const handlePortChange = (value) => {
+ stopDiscovery()
+ setScanPort(value)
+ }
+
+ const handleProtocolChange = (value) => {
+ stopDiscovery()
+ setScanProtocol(value)
+ }
+
+ const steps = [
+ {
+ title: 'Discovery',
+ key: 'discovery',
+ content: (
+ <>
+
+ Scanning IP: {data.currentIP}
+
+
+ - (
+
+
+
+
+
+ )
+ }
+
+ if (error || !printerData) {
+ return (
+ {error || 'Printer not found'}
+ } onClick={fetchPrinterDetails}> + Retry + +
+ {contextHolder}
+
+
+ Printer Information
+
+
+ {isEditing ? (
+ <>
+ }
+ type='primary'
+ onClick={updatePrinterInfo}
+ loading={loading}
+ >
+ }
+ onClick={cancelEditing}
+ disabled={loading}
+ >
+
+ ) : (
+ } onClick={startEditing}>
+ )}
+
+
+
+
+
+
+ Printer Jobs
+
+
+ )
+}
+
+export default PrinterInfo
diff --git a/src/components/Dashboard/common/FilamentSelect.jsx b/src/components/Dashboard/common/FilamentSelect.jsx
new file mode 100644
index 0000000..3d43077
--- /dev/null
+++ b/src/components/Dashboard/common/FilamentSelect.jsx
@@ -0,0 +1,170 @@
+// FilamentSelect.js
+import { TreeSelect, Badge } from 'antd'
+import React, { useEffect, useState, useContext, useRef } from 'react'
+import PropTypes from 'prop-types'
+import axios from 'axios'
+import { AuthContext } from '../../Auth/AuthContext'
+
+const propertyOrder = ['diameter', 'type', 'brand']
+
+const FilamentSelect = ({ onChange, filter, useFilter }) => {
+ const [filamentsTreeData, setFilamentsTreeData] = useState([])
+ const { token } = useContext(AuthContext)
+ const tokenRef = useRef(token)
+ const [loading, setLoading] = useState(true)
+
+ const fetchFilamentsData = async (property, filter) => {
+ setLoading(true)
+ try {
+ const response = await axios.get('http://localhost:8080/filaments', {
+ params: {
+ ...filter,
+ property
+ },
+ headers: {
+ Authorization: `Bearer ${tokenRef.current}`
+ }
+ })
+ setLoading(false)
+ return response.data
+ //setPagination({ ...pagination, total: response.data.totalItems }); // Update total count
+ } catch (err) {
+ console.error(err)
+ }
+ }
+
+ const getFilter = (node) => {
+ var filter = {}
+ var currentId = node.id
+ while (currentId != 0) {
+ const currentNode = filamentsTreeData.filter(
+ (treeData) => treeData['id'] === currentId
+ )[0]
+ filter[propertyOrder[currentNode.propertyId]] =
+ currentNode.value.split('-')[0]
+ currentId = currentNode.pId
+ }
+ return filter
+ }
+
+ const generateFilamentTreeNodes = async (node = null, filter = null) => {
+ if (!node) {
+ return
+ }
+
+ if (filter === null) {
+ filter = getFilter(node)
+ }
+
+ const filamentData = await fetchFilamentsData(null, filter)
+
+ let newNodeList = []
+
+ for (var i = 0; i < filamentData.length; i++) {
+ const filament = filamentData[i]
+ const random = Math.random().toString(36).substring(2, 6)
+
+ const newNode = {
+ id: random,
+ pId: node.id,
+ value: filament._id,
+ key: filament._id,
+ title:
+
+ )
+ }
+
+ if (error) {
+ return (
+ {error}
+ } onClick={() => setError(null)}> + Retry + +
+
+
+
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('Y', false)
+ }}
+ />
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('X', false)
+ }}
+ />
+
+ }>
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('X', true)
+ }}
+ />
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('Y', true)
+ }}
+ >
+
+
+
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('Z', true)
+ }}
+ />
+ }
+ onClick={() => {
+ handleLevelBedClick()
+ }}
+ />
+ }
+ onClick={() => {
+ handleMoveAxisClick('Z', false)
+ }}
+ >
+
+
+
+
+ }
+ onClick={() => {
+ handleMoveAxisClick('E', true)
+ }}
+ />
+ }
+ onClick={() => {
+ handleUnloadFilamentClick()
+ }}
+ />
+ }
+ onClick={() => {
+ handleMoveAxisClick('E', false)
+ }}
+ >
+
+
+
+
+
+ 0.1
+ 1
+ 10
+ 100
+
+
+
+ `${value} mm`}
+ parser={(value) => value?.replace(' mm', '')}
+ onChange={handlePosInputChange}
+ placeholder='10 mm'
+ name='posInput'
+ style={{ flexGrow: 1 }}
+ />
+ `${value} mm/s`}
+ parser={(value) => value?.replace(' mm/s', '')}
+ onChange={handleRateInputChange}
+ placeholder='100 mm/s'
+ name='rateInput'
+ style={{ flexGrow: 1 }}
+ />
+
+
+
+
+ )
+}
+
+PrinterMovementPanel.propTypes = {
+ printerId: PropTypes.string.isRequired
+}
+
+export default PrinterMovementPanel
diff --git a/src/components/Dashboard/common/PrinterSelect.jsx b/src/components/Dashboard/common/PrinterSelect.jsx
new file mode 100644
index 0000000..030a730
--- /dev/null
+++ b/src/components/Dashboard/common/PrinterSelect.jsx
@@ -0,0 +1,115 @@
+// PrinterSelect.js
+import PropTypes from 'prop-types'
+import { TreeSelect, message, Tag } from 'antd'
+import React, { useEffect, useState, useContext } from 'react'
+import axios from 'axios'
+import PrinterState from './PrinterState'
+import { AuthContext } from '../../Auth/AuthContext'
+
+const PrinterSelect = ({ onChange, disabled, checkable }) => {
+ const [printersData, setPrintersData] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [messageApi] = message.useMessage()
+
+ const { authenticated } = useContext(AuthContext)
+
+ const fetchPrintersData = async () => {
+ if (!authenticated) {
+ return
+ }
+ setLoading(true)
+
+ try {
+ const response = await axios.get('http://localhost:8080/printers', {
+ headers: {
+ Accept: 'application/json'
+ },
+ withCredentials: true // Important for including cookies
+ })
+ setLoading(false)
+ return response.data
+ } catch (error) {
+ if (error.response) {
+ // For other errors, show a message
+ messageApi.error('Error fetching printers data:', error.response.status)
+ } else {
+ messageApi.error(
+ 'An unexpected error occurred. Please try again later.'
+ )
+ }
+ }
+ }
+
+ const generatePrinterItems = async () => {
+ const printerData = await fetchPrintersData()
+
+ // Create a map to store tags and their printers
+ const tagMap = new Map()
+
+ // Add printers to their respective tag groups
+ printerData.forEach((printer) => {
+ if (printer.tags && printer.tags.length > 0) {
+ printer.tags.forEach((tag) => {
+ if (!tagMap.has(tag)) {
+ tagMap.set(tag, [])
+ }
+ tagMap.get(tag).push(printer)
+ })
+ } else {
+ // If no tags, add to "Untagged" group
+ if (!tagMap.has('Untagged')) {
+ tagMap.set('Untagged', [])
+ }
+ tagMap.get('Untagged').push(printer)
+ }
+ })
+
+ // Convert the map to tree data structure
+ const treeData = Array.from(tagMap.entries()).map(([tag, printers]) => ({
+ title: tag === 'Untagged' ? tag :
+ {temperatureData ? (
+
+ {temperatureData.hotEnd && (
+
+
+ Hot End: {temperatureData.hotEnd.current}°C /{' '}
+ {temperatureData.hotEnd.target}°C
+
+
+ {showControls === true && (
+
+
+ setHotEndTemperature(value)}
+ onPressEnter={() =>
+ handleSetTemperatureClick('extruder', hotEndTemperature)
+ }
+ />
+
+
+
+
+ )}
+
+ )}
+
+ {temperatureData.heatedBed && (
+
+
+ Heated Bed: {temperatureData.heatedBed.current}°C /{' '}
+ {temperatureData.heatedBed.target}°C
+
+
+ {showControls === true && (
+
+
+ setHeatedBedTemperature(value)}
+ onPressEnter={() =>
+ handleSetTemperatureClick(
+ 'heater_bed',
+ heatedBedTemperature
+ )
+ }
+ />
+
+
+
+
+ )}
+
+ )}
+ {showMoreInfo === true && (
+
+ ) : (
+
+
+ )}
+
+ )
+}
+
+PrinterTemperaturePanel.propTypes = {
+ printerId: PropTypes.string.isRequired,
+ showControls: PropTypes.bool,
+ showMoreInfo: PropTypes.bool
+}
+
+export default PrinterTemperaturePanel
diff --git a/src/components/Dashboard/common/ProductionSidebar.jsx b/src/components/Dashboard/common/ProductionSidebar.jsx
new file mode 100644
index 0000000..e7e47e8
--- /dev/null
+++ b/src/components/Dashboard/common/ProductionSidebar.jsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { Layout, Menu, Flex, Button } from 'antd'
+import {
+ DashboardOutlined,
+ PrinterOutlined,
+ PlayCircleOutlined,
+ MenuFoldOutlined,
+ MenuUnfoldOutlined
+} from '@ant-design/icons'
+import GCodeFileIcon from '../../Icons/GCodeFileIcon'
+
+const { Sider } = Layout
+
+const ProductionSidebar = () => {
+ const location = useLocation()
+ const [selectedKey, setSelectedKey] = useState('production')
+ const [collapsed, setCollapsed] = useState(false)
+
+ useEffect(() => {
+ const pathParts = location.pathname.split('/').filter(Boolean)
+ if (pathParts.length > 1) {
+ setSelectedKey(pathParts[1]) // Return the section (production/management)
+ }
+ }, [location.pathname])
+ const items = [
+ {
+ key: 'overview',
+ label: Overview,
+ icon:
+
+ )
+ }
+
+ if (error) {
+ return (
+ {error}
+ } + onClick={() => buildTreeData(printJobData)} + > + Retry + +- (
+