From d8bfc19917cf913f840253aac80754bc67288670 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 9 Dec 2025 02:10:35 +0000
Subject: [PATCH] Added new InfoCollapse sections for Online Printers and
 Queued Jobs in ProductionOverview, including ObjectTable components for data
 display and updated collapse states for better user interaction.

---
 .../Production/ProductionOverview.jsx         | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/Production/ProductionOverview.jsx b/src/components/Dashboard/Production/ProductionOverview.jsx
index 1f1e2f1..8cbd65f 100644
--- a/src/components/Dashboard/Production/ProductionOverview.jsx
+++ b/src/components/Dashboard/Production/ProductionOverview.jsx
@@ -7,6 +7,7 @@ import InfoCollapse from '../common/InfoCollapse'
 import ScrollBox from '../common/ScrollBox'
 
 import { ApiServerContext } from '../context/ApiServerContext'
+import ObjectTable from '../common/ObjectTable'
 
 const ProductionOverview = () => {
   const { connected } = useContext(ApiServerContext)
@@ -16,6 +17,7 @@ const ProductionOverview = () => {
     {
       printerStats: true,
       printerHistory: true,
+      onlinePrinters: true,
       jobStats: true,
       productionStats: true,
       jobStatsDetails: true
@@ -40,6 +42,7 @@ const ProductionOverview = () => {
           <InfoCollapse
             title='Printer Statistics'
             icon={null}
+            canCollapse={false}
             active={collapseState.printerStats}
             onToggle={(isActive) =>
               updateCollapseState('printerStats', isActive)
@@ -60,6 +63,7 @@ const ProductionOverview = () => {
           <InfoCollapse
             title='Job Statistics'
             icon={null}
+            canCollapse={false}
             active={collapseState.jobStats}
             onToggle={(isActive) => updateCollapseState('jobStats', isActive)}
             className='no-t-padding-collapse'
@@ -76,7 +80,7 @@ const ProductionOverview = () => {
           </InfoCollapse>
 
           <Flex gap='large' wrap='wrap'>
-            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
               <InfoCollapse
                 title='Printer History'
                 icon={null}
@@ -89,8 +93,20 @@ const ProductionOverview = () => {
               >
                 <HistoryDisplay objectType='printer' />
               </InfoCollapse>
+              <InfoCollapse
+                title='Online Printers'
+                icon={null}
+                active={collapseState.onlinePrinters}
+                onToggle={(isActive) =>
+                  updateCollapseState('onlinePrinters', isActive)
+                }
+                collapseKey='onlinePrinters'
+                canCollapse={false}
+              >
+                <ObjectTable type='printer' masterFilter={{ online: true }} />
+              </InfoCollapse>
             </Flex>
-            <Flex flex={1} vertical style={{ minWidth: '300px' }}>
+            <Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
               <InfoCollapse
                 title='Job History'
                 icon={null}
@@ -103,6 +119,21 @@ const ProductionOverview = () => {
               >
                 <HistoryDisplay objectType='job' />
               </InfoCollapse>
+              <InfoCollapse
+                title='Queued Jobs'
+                icon={null}
+                active={collapseState.queuedJobs}
+                onToggle={(isActive) =>
+                  updateCollapseState('queuedJobs', isActive)
+                }
+                canCollapse={false}
+                collapseKey='queuedJobs'
+              >
+                <ObjectTable
+                  type='job'
+                  masterFilter={{ 'state.type': 'queued' }}
+                />
+              </InfoCollapse>
             </Flex>
           </Flex>
         </Flex>