added docker-compose for linux

frontend/src/components/Main.jsx

@@ -1,13 +1,16 @@
 import { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Header from './Header';
 import useSerialData from '../hooks/useSerialData';
 import { useNomenclatures } from '../contexts/NomenclatureContext';
 import { useNomenclatureData } from '../contexts/NomenclatureDataContext';
 import NomenclatureDropdown from './NomenclatureUI/NomenclatureDropdown';
+import ReportPreviewModal from './ReportPreviewModal';
 import api from '../services/api';
 import './Main.css';
 
 export default function Main() {
+    const navigate = useNavigate();
     const { readings, isConnected } = useSerialData();
     const { vehicles } = useNomenclatures();
 
@@ -18,9 +21,10 @@ export default function Main() {
     const [newExtraData, setNewExtraData] = useState({});
     const [error, setError] = useState('');
     const [isSaving, setIsSaving] = useState(false);
+    const [showNoticeReport, setShowNoticeReport] = useState(false);
 
     // Nomenclature data from context
-    const { definitions } = useNomenclatureData();
+    const { definitions, entries } = useNomenclatureData();
     const vehicleNomenclatures = useMemo(
         () => Object.values(definitions)
             .filter(d => d.applies_to === 'vehicle')
@@ -164,6 +168,31 @@ export default function Main() {
         ? selectedVehicle.gross - selectedVehicle.tare
         : null;
 
+    // Vehicle data shaped for report preview/design
+    // Transforms extra.data keys from raw codes/ids to { [nomenclature name]: display value }
+    const vehicleReportData = useMemo(() => {
+        if (!selectedVehicle) return null;
+        const rawExtra = selectedVehicle.extra?.data || {};
+        const extra = {};
+        for (const [code, value] of Object.entries(rawExtra)) {
+            const def = definitions[code];
+            if (!def) continue;
+            if (def.kind === 'lookup') {
+                const entry = (entries[code] || []).find(e => e.id === value);
+                extra[def.name] = entry?.display_value ?? '';
+            } else {
+                extra[def.name] = value ?? '';
+            }
+        }
+        return {
+            vehicle: {
+                ...selectedVehicle,
+                net: netWeight,
+                extra,
+            }
+        };
+    }, [selectedVehicle, netWeight, definitions, entries]);
+
     return (
         <div>
             <Header />
@@ -363,6 +392,23 @@ export default function Main() {
                                     <div className="weight-card weight-card--net">
                                         <div className="weight-card-header">Net</div>
                                         <div className="weight-card-value">{netWeight} kg</div>
+                                        <button
+                                            className="weight-set-btn"
+                                            onClick={() => setShowNoticeReport(true)}
+                                        >
+                                            Print Notice
+                                        </button>
+                                        <button
+                                            className="weight-set-btn"
+                                            onClick={() => navigate('/report-editor', {
+                                                state: {
+                                                    reportName: 'notice_report',
+                                                    vehicleData: vehicleReportData,
+                                                }
+                                            })}
+                                        >
+                                            Design Notice
+                                        </button>
                                     </div>
                                 )}
                             </div>
@@ -398,6 +444,12 @@ export default function Main() {
                     )}
                 </div>
             </div>
+            {showNoticeReport && vehicleReportData && (
+                <ReportPreviewModal
+                    vehicleData={vehicleReportData}
+                    onClose={() => setShowNoticeReport(false)}
+                />
+            )}
         </div>
     );
 }