Set FilamentStockInfo component's disabled prop to true

Add 'unconsumed' state to StateTag component with corresponding success status
Added scroll box for custom scroll bars.
2025-11-30 00:15:44 +00:00 · 2025-11-30 00:15:34 +00:00 · 2025-11-30 00:13:52 +00:00
21 changed files with 82 additions and 39 deletions
--- a/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
+++ b/src/components/Dashboard/Inventory/FilamentStocks/FilamentStockInfo.jsx
@ -18,6 +18,7 @@ import NoteIcon from '../../../Icons/NoteIcon'
 import AuditLogIcon from '../../../Icons/AuditLogIcon'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder'
 import DocumentPrintButton from '../../common/DocumentPrintButton'
+import ScrollBox from '../../common/ScrollBox'

 const FilamentStockInfo = () => {
  const location = useLocation()
@ -112,12 +113,12 @@ const FilamentStockInfo = () => {
              }}
              editLoading={objectFormState.editLoading}
              formValid={objectFormState.formValid}
-              disabled={objectFormState.lock?.locked || objectFormState.loading}
+              disabled={true}
              loading={objectFormState.editLoading}
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -199,7 +200,7 @@ const FilamentStockInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentJobs/DocumentJobInfo.jsx
@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('DocumentJobInfo')
 log.setLevel(config.logLevel)
@ -120,7 +121,7 @@ const DocumentJobInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -186,7 +187,7 @@ const DocumentJobInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentPrinters/DocumentPrinterInfo.jsx
@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('DocumentPrinterInfo')
 log.setLevel(config.logLevel)
@ -129,7 +130,7 @@ const DocumentPrinterInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -199,7 +200,7 @@ const DocumentPrinterInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentSizes/DocumentSizeInfo.jsx
@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('DocumentSizeInfo')
 log.setLevel(config.logLevel)
@ -120,7 +121,7 @@ const DocumentSizeInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -186,7 +187,7 @@ const DocumentSizeInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateDesign.jsx
@ -13,6 +13,7 @@ import EditButtons from '../../common/EditButtons.jsx'
 import LockIndicator from '../../common/LockIndicator.jsx'
 import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 import TemplateEditor from '../../common/TemplateEditor.jsx'

@ -122,7 +123,7 @@ const DocumentTemplateDesign = () => {
        </Space>
      </Flex>

-      <div style={{ height: '100%', overflowY: 'scroll' }}>
+      <ScrollBox>
        <Flex vertical gap={'large'}>
          <ActionHandler
            actions={actions}
@ -164,7 +165,7 @@ const DocumentTemplateDesign = () => {
            </Card>
          </InfoCollapse>
        </Flex>
-      </div>
+      </ScrollBox>
    </Flex>
  )
 }
--- a/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
+++ b/src/components/Dashboard/Management/DocumentTemplates/DocumentTemplateInfo.jsx
@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('DocumentTemplateInfo')
 log.setLevel(config.logLevel)
@ -126,7 +127,7 @@ const DocumentTemplateInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -201,7 +202,7 @@ const DocumentTemplateInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
+++ b/src/components/Dashboard/Management/Filaments/FilamentInfo.jsx
@ -21,6 +21,7 @@ import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import FilamentIcon from '../../../Icons/FilamentIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('FilamentInfo')
 log.setLevel(config.logLevel)
@ -126,7 +127,7 @@ const FilamentInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -218,7 +219,7 @@ const FilamentInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Files/FileInfo.jsx
+++ b/src/components/Dashboard/Management/Files/FileInfo.jsx
@ -23,6 +23,7 @@ import FileIcon from '../../../Icons/FileIcon.jsx'
 import FilePreview from '../../common/FilePreview.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('FileInfo')
 log.setLevel(config.logLevel)
@ -130,7 +131,7 @@ const FileInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -214,7 +215,7 @@ const FileInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Hosts/HostInfo.jsx
+++ b/src/components/Dashboard/Management/Hosts/HostInfo.jsx
@ -23,6 +23,7 @@ import HostOTP from './HostOtp.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import PrinterIcon from '../../../Icons/PrinterIcon.jsx'
 import DocumentPrinterIcon from '../../../Icons/DocumentPrinterIcon.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('HostInfo')
 log.setLevel(config.logLevel)
@ -132,7 +133,7 @@ const HostInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -245,7 +246,7 @@ const HostInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>

      <Modal
--- a/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
+++ b/src/components/Dashboard/Management/NoteTypes/NoteTypeInfo.jsx
@ -16,6 +16,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const NoteTypeInfo = () => {
  const location = useLocation()
@ -109,7 +110,7 @@ const NoteTypeInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -164,7 +165,7 @@ const NoteTypeInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Notes/NoteInfo.jsx
+++ b/src/components/Dashboard/Management/Notes/NoteInfo.jsx
@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('NoteInfo')
 log.setLevel(config.logLevel)
@ -118,7 +119,7 @@ const NoteInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -183,7 +184,7 @@ const NoteInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Parts/PartInfo.jsx
+++ b/src/components/Dashboard/Management/Parts/PartInfo.jsx
@ -17,6 +17,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const PartInfo = () => {
  const location = useLocation()
@ -109,7 +110,7 @@ const PartInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -174,7 +175,7 @@ const PartInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Products/ProductInfo.jsx
+++ b/src/components/Dashboard/Management/Products/ProductInfo.jsx
@ -18,6 +18,7 @@ import ActionHandler from '../../common/ActionHandler.jsx'
 import ObjectActions from '../../common/ObjectActions.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const ProductInfo = () => {
  const location = useLocation()
@ -111,7 +112,7 @@ const ProductInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -192,7 +193,7 @@ const ProductInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Users/UserInfo.jsx
+++ b/src/components/Dashboard/Management/Users/UserInfo.jsx
@ -18,6 +18,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const UserInfo = () => {
  const location = useLocation()
@ -110,7 +111,7 @@ const UserInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -176,7 +177,7 @@ const UserInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
+++ b/src/components/Dashboard/Management/Vendors/VendorInfo.jsx
@ -19,6 +19,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('VendorInfo')
 log.setLevel(config.logLevel)
@ -118,7 +119,7 @@ const VendorInfo = () => {
            />
          </Space>
        </Flex>
-        <div style={{ height: '100%', overflow: 'auto' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -183,7 +184,7 @@ const VendorInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
+++ b/src/components/Dashboard/Production/GCodeFiles/GCodeFileInfo.jsx
@ -23,6 +23,7 @@ import EyeIcon from '../../../Icons/EyeIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import MissingPlaceholder from '../../common/MissingPlaceholder.jsx'
 import FilePreview from '../../common/FilePreview.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('GCodeFileInfo')
 log.setLevel(config.logLevel)
@ -128,7 +129,7 @@ const GCodeFileInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -224,7 +225,7 @@ const GCodeFileInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/Production/Jobs/JobInfo.jsx
+++ b/src/components/Dashboard/Production/Jobs/JobInfo.jsx
@ -22,6 +22,7 @@ import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import JobIcon from '../../../Icons/JobIcon.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
 import DeployJob from './DeployJob.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('JobInfo')
 log.setLevel(config.logLevel)
@ -132,7 +133,7 @@ const JobInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -214,7 +215,7 @@ const JobInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
      <Modal
        destroyOnHidden
--- a/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
+++ b/src/components/Dashboard/Production/Printers/ControlPrinter.jsx
@ -30,6 +30,7 @@ import { ApiServerContext } from '../../context/ApiServerContext.jsx'

 import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
 import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('ControlPrinter')
 log.setLevel(config.logLevel)
@ -263,7 +264,7 @@ const ControlPrinter = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -486,7 +487,7 @@ const ControlPrinter = () => {
              </Card>
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
      <Modal
        open={loadFilamentStockOpen}
--- a/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
+++ b/src/components/Dashboard/Production/Printers/PrinterInfo.jsx
@ -20,6 +20,7 @@ import ObjectActions from '../../common/ObjectActions.jsx'
 import ObjectTable from '../../common/ObjectTable.jsx'
 import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
 import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
+import ScrollBox from '../../common/ScrollBox.jsx'

 const log = loglevel.getLogger('PrinterInfo')
 log.setLevel(config.logLevel)
@ -122,7 +123,7 @@ const PrinterInfo = () => {
          </Space>
        </Flex>

-        <div style={{ height: '100%', overflowY: 'scroll' }}>
+        <ScrollBox>
          <Flex vertical gap={'large'}>
            <ActionHandler
              actions={actions}
@ -202,7 +203,7 @@ const PrinterInfo = () => {
              )}
            </InfoCollapse>
          </Flex>
-        </div>
+        </ScrollBox>
      </Flex>
    </>
  )
--- a/src/components/Dashboard/common/ScrollBox.jsx
+++ b/src/components/Dashboard/common/ScrollBox.jsx
@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+const ScrollBox = ({ children, style, ...rest }) => {
+  return (
+    <div style={{ height: '100%', minHeight: '0' }}>
+      <SimpleBar style={{ height: '100%', ...style }} {...rest}>
+        {children}
+      </SimpleBar>
+    </div>
+  )
+}
+
+ScrollBox.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.object
+}
+
+export default ScrollBox
--- a/src/components/Dashboard/common/StateTag.jsx
+++ b/src/components/Dashboard/common/StateTag.jsx
@ -92,6 +92,10 @@ const StateTag = ({ state, showBadge = true, style = {} }) => {
        status = 'warning'
        text = 'Used'
        break
+      case 'unconsumed':
+        status = 'success'
+        text = 'Unconsumed'
+        break
      default:
        status = 'default'
        text = state || 'Unknown'
Author	SHA1	Message	Date
Tom Butcher	59632c3060	Set FilamentStockInfo component's disabled prop to true	2025-11-30 00:15:44 +00:00
Tom Butcher	ba1bba1a24	Add 'unconsumed' state to StateTag component with corresponding success status	2025-11-30 00:15:34 +00:00
Tom Butcher	d5d0040871	Added scroll box for custom scroll bars.	2025-11-30 00:13:52 +00:00