u

src/assets/printers/index.js

@@ -0,0 +1,12 @@
+import zd41x from './zd41x.png';
+
+// Library of printer images, keyed by printer model (as reported by the agent).
+const PRINTER_IMAGES = {
+  'ZD410-200dpi': zd41x,
+};
+
+export function getPrinterImage(model) {
+  return (model && PRINTER_IMAGES[model]) || null;
+}
+
+export default PRINTER_IMAGES;

src/components/OnlinePrinterIcons.jsx

@@ -15,6 +15,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { enqueueSnackbar } from 'notistack';
 import companyAutomat from '../automats/companyAutomat';
 import { notifyError } from '../utils/notify';
+import { getPrinterImage } from '../assets/printers';
 
 export default class OnlinePrinterIcons extends PureComponent {
   constructor(props) {
@@ -247,6 +248,14 @@ export default class OnlinePrinterIcons extends PureComponent {
         >
           {activePrinter && (
             <Box sx={{ px: 2, py: 1, minWidth: 210 }}>
+              {getPrinterImage(activePrinter.model) ? (
+                <Box
+                  component="img"
+                  src={getPrinterImage(activePrinter.model)}
+                  alt={activePrinter.model}
+                  sx={{ display: 'block', mx: 'auto', mb: 1, maxWidth: 80, height: 'auto' }}
+                />
+              ) : null}
               <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
                 <Typography variant="subtitle2" fontWeight={600} noWrap>
                   {activePrinter.model || 'Drucker'}