Modified Patch Panel component

src/App.tsx

@@ -462,7 +462,11 @@ export default function App() {
         [...rack.equipment]
           .sort((a, b) => b.uStart - a.uStart)
           .forEach((item) => {
-            const line = `U${item.uStart}-${item.uStart + item.sizeU - 1}: ${item.name} | ${item.manufacturer || 'n/a'} ${item.model || ''} | ${item.assetTag || 'no asset tag'}`;
+            const patchPanelDetails =
+              item.type === 'patch-panel'
+                ? ` | ${item.patchPanelMedium === 'fiberoptic' ? 'Fiber optic' : 'Copper'} | ${item.patchPanelPorts} ports`
+                : '';
+            const line = `U${item.uStart}-${item.uStart + item.sizeU - 1}: ${item.name} | ${item.manufacturer || 'n/a'} ${item.model || ''} | ${item.assetTag || 'no asset tag'}${patchPanelDetails}`;
             pdf.text(line.slice(0, 115), margin + 12, y);
             y += 14;
           });
@@ -949,6 +953,54 @@ function PropertiesPanel({
               onChange={(event) => onEquipmentChange(selectedEquipmentRack.id, selectedEquipment.id, { assetTag: event.target.value })}
               fullWidth
             />
+            {selectedEquipment.type === 'patch-panel' && (
+              <>
+                <Divider />
+                <Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
+                  Patch Panel
+                </Typography>
+                <FormControl fullWidth>
+                  <InputLabel>Medium</InputLabel>
+                  <Select
+                    value={selectedEquipment.patchPanelMedium || 'copper'}
+                    label="Medium"
+                    onChange={(event: SelectChangeEvent) =>
+                      onEquipmentChange(selectedEquipmentRack.id, selectedEquipment.id, {
+                        patchPanelMedium: event.target.value as Equipment['patchPanelMedium'],
+                      })
+                    }
+                  >
+                    <MenuItem value="copper">Copper</MenuItem>
+                    <MenuItem value="fiberoptic">Fiber optic</MenuItem>
+                  </Select>
+                </FormControl>
+                <TextField
+                  label="Number of ports"
+                  type="number"
+                  value={selectedEquipment.patchPanelPorts}
+                  inputProps={{ min: 0, max: 10000 }}
+                  onChange={(event) =>
+                    onEquipmentChange(selectedEquipmentRack.id, selectedEquipment.id, {
+                      patchPanelPorts: clampNumber(event.target.value, 0, 10000, selectedEquipment.patchPanelPorts),
+                    })
+                  }
+                  fullWidth
+                />
+                <TextField
+                  label="Port identification"
+                  value={selectedEquipment.patchPanelPortIdentification}
+                  onChange={(event) =>
+                    onEquipmentChange(selectedEquipmentRack.id, selectedEquipment.id, {
+                      patchPanelPortIdentification: event.target.value,
+                    })
+                  }
+                  multiline
+                  minRows={3}
+                  placeholder="A01-A24, VLAN labels, fiber strands, or room/circuit references"
+                  fullWidth
+                />
+              </>
+            )}
             <TextField
               label="Power watts"
               type="number"

src/types.ts

@@ -17,6 +17,8 @@ export type ComponentType =
 
 export type LibraryCategory = 'container' | 'equipment';
 
+export type PatchPanelMedium = '' | 'copper' | 'fiberoptic';
+
 export interface LibraryItem {
   type: ComponentType;
   category: LibraryCategory;
@@ -38,6 +40,9 @@ export interface Equipment {
   serialNumber: string;
   assetTag: string;
   powerWatts: number;
+  patchPanelMedium: PatchPanelMedium;
+  patchPanelPorts: number;
+  patchPanelPortIdentification: string;
   notes: string;
   color: string;
 }

src/utils/model.ts

@@ -53,6 +53,9 @@ export const createEquipment = (type: string, rack: RackContainer, preferredU: n
     serialNumber: '',
     assetTag: '',
     powerWatts: 0,
+    patchPanelMedium: libraryItem.type === 'patch-panel' ? 'copper' : '',
+    patchPanelPorts: libraryItem.type === 'patch-panel' ? 24 : 0,
+    patchPanelPortIdentification: '',
     notes: '',
     color: libraryItem.color,
   };
@@ -150,6 +153,14 @@ export const normalizeDiagram = (value: unknown): DiagramData => {
               serialNumber: item.serialNumber || '',
               assetTag: item.assetTag || '',
               powerWatts: clampNumber(item.powerWatts, 0, 100000, 0),
+              patchPanelMedium:
+                item.patchPanelMedium === 'fiberoptic' || item.patchPanelMedium === 'copper'
+                  ? item.patchPanelMedium
+                  : libraryItem.type === 'patch-panel'
+                    ? 'copper'
+                    : '',
+              patchPanelPorts: clampNumber(item.patchPanelPorts, 0, 10000, libraryItem.type === 'patch-panel' ? 24 : 0),
+              patchPanelPortIdentification: item.patchPanelPortIdentification || '',
               notes: item.notes || '',
               color: item.color || libraryItem.color,
             };