copy to clipboard functionality for system log. Report view sharpening

src/frontend/src/components/layout/error/ErrorModalOverview.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="error-overview-container">
     <div class="error-overview">
+
+      <div>
+        <basic-button icon="clipboard" @click="copyToClipboard">Copy error to clipboard</basic-button>
+        <Toast ref="toast"/>
+      </div>
+
       <div class="error-section">
         <div class="error-label">Type</div>
         <div class="error-value">
@@ -70,6 +76,8 @@
           {{ error.bulk_operation_id }}
         </div>
       </div>
+
+
     </div>
   </div>
 </template>
@@ -78,10 +86,13 @@
 
 import BasicBadge from "@/components/UI/BasicBadge.vue";
 import {buildDate} from "@/common.js";
+import BasicButton from "@/components/UI/BasicButton.vue";
+import Toast from "@/components/UI/Toast.vue";
+import {error} from "loglevel";
 
 export default {
   name: "ErrorModalOverview",
-  components: {BasicBadge},
+  components: {Toast, BasicButton, BasicBadge},
   props: {
     isSelected: {
       type: Boolean,
@@ -92,6 +103,24 @@ export default {
       required: true,
     }
   },
+  methods: {
+    async copyToClipboard() {
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(this.error));
+
+        this.$refs.toast.addToast({
+          icon: 'Bug',
+          message: "The error has been copied to clipboard",
+          title: "Copied to clipboard",
+          variant: 'success',
+          duration: 4000
+        })
+
+      } catch (err) {
+        console.error('Fehler beim Kopieren:', err);
+      }
+    }
+  },
   computed: {
     badgeVariant() {
       switch (this.error.type) {
@@ -164,11 +193,11 @@ code {
 
 .error-section {
   display: grid;
-  grid-template-columns: 20rem 1fr;
+  grid-template-columns: 10rem 1fr;
   align-items: center;
-  padding: 1.6rem;
+  padding: 0.8rem;
   gap: 0.6rem;
-  border-bottom: 0.16rem solid #f3f4f6;
+  border-bottom: .1rem solid #E3EDFF
 }
 
 .error-label {

src/frontend/src/components/layout/report/Report.vue

@@ -16,21 +16,27 @@
 
     <div class="box-gap">
       <collapsible-box :is-collapsable="false" variant="border" title="Overview" size="m" :stretch-content="true">
-        <div class="report-content-container--2-col">
+        <div class="report-content-container--3-col">
 
           <div class="report-content-row">
-            <div>MEK B</div>
+            <div class="report-content-row-highlight">MEK B</div>
-            <div class="report-content-data-cell">{{ report.risk.mek_b.total.toFixed(2) }}</div>
+            <div class="report-content-data-cell report-content-row-highlight">{{ report.risk.mek_b.total.toFixed(2) }} €</div>
+            <div class="report-content-data-cell"></div>
           </div>
 
           <div class="report-content-row">
             <div>Opportunity scenario</div>
-            <div class="report-content-data-cell">{{ report.risk.opportunity_scenario.total.toFixed(2) }}</div>
+            <div class="report-content-data-cell">{{ report.risk.opportunity_scenario.total.toFixed(2) }} €</div>
+            <div class="report-content-data-cell">{{
+                `${(report.risk.opportunity_scenario.percentage * 100).toFixed(2)} %`
+              }}
+            </div>
           </div>
 
           <div class="report-content-row">
             <div>Risk scenario</div>
-            <div class="report-content-data-cell">{{ report.risk.risk_scenario.total.toFixed(2) }}</div>
+            <div class="report-content-data-cell">{{ report.risk.risk_scenario.total.toFixed(2) }} €</div>
+            <div class="report-content-data-cell">{{ `${(report.risk.risk_scenario.percentage * 100).toFixed(2)} %`}}</div>
           </div>
 
 
@@ -150,7 +156,7 @@
           <report-route :sections="premise.sections" :destination="premise.destination"
                         :route-section-scale="routeSectionScale[idx]"></report-route>
 
-          <div class="report-sub-header">Premisses</div>
+          <div class="report-sub-header">Premises</div>
 
           <div class="report-content-container--2-col">
 
@@ -191,12 +197,12 @@
 
           </div>
 
-          <div class="report-sub-header">Packaging</div>
+          <div class="report-sub-header">Handling unit</div>
 
           <div class="report-content-container--2-col">
 
             <div class="report-content-row">
-              <div>HU dimensions [{{ premise.dimension_unit }}]</div>
+              <div>Dimensions [{{ premise.dimension_unit }}]</div>
               <div class="report-content-data-cell">{{ toFixedDimension(premise.length, premise.dimension_unit) }} x
                 {{ toFixedDimension(premise.width, premise.dimension_unit) }} x
                 {{ toFixedDimension(premise.height, premise.dimension_unit) }}
@@ -204,20 +210,26 @@
             </div>
 
             <div class="report-content-row">
-              <div>HU weight [{{ premise.weight_unit }}]</div>
+              <div>Weight [{{ premise.weight_unit }}]</div>
               <div class="report-content-data-cell">{{ toFixedWeight(premise.weight, premise.weight_unit) }}</div>
             </div>
 
             <div class="report-content-row">
-              <div>HU unit count</div>
+              <div>Unit count</div>
               <div class="report-content-data-cell">{{ premise.hu_unit_count }}</div>
             </div>
 
             <div class="report-content-row">
-              <div>Mixed container</div>
+              <div>Mixed transport</div>
               <div class="report-content-data-cell">{{ premise.mixed ? 'Yes' : 'No' }}</div>
             </div>
 
+          </div>
+
+          <div class="report-sub-header">Container</div>
+
+          <div class="report-content-container--2-col">
+
             <div class="report-content-row">
               <div>Stacked layers</div>
               <div class="report-content-data-cell">{{ hasMainRun(premise.sections) ? premise.layer : '-' }}</div>
@@ -225,17 +237,25 @@
 
             <div class="report-content-row">
               <div>Container unit count</div>
-              <div class="report-content-data-cell">{{hasMainRun(premise.sections) ? (premise.unit_count * premise.hu_unit_count) : '-' }}</div>
+              <div class="report-content-data-cell">
+                {{ hasMainRun(premise.sections) ? (premise.unit_count * premise.hu_unit_count) : '-' }}
               </div>
+            </div>
+
+
 
             <div class="report-content-row">
               <div>Container type</div>
-              <div class="report-content-data-cell">{{hasMainRun(premise.sections) ?  getContainerTypeName(premise.container_type) : '-' }}</div>
+              <div class="report-content-data-cell">
+                {{ hasMainRun(premise.sections) ? getContainerTypeName(premise.container_type) : '-' }}
+              </div>
             </div>
 
             <div class="report-content-row">
               <div>Limiting factor</div>
-              <div class="report-content-data-cell">{{hasMainRun(premise.sections) ? premise.weight_exceeded ? 'Weight' : 'Volume' : '-'}}</div>
+              <div class="report-content-data-cell">
+                {{ hasMainRun(premise.sections) ? premise.weight_exceeded ? 'Weight' : 'Volume' : '-' }}
+              </div>
             </div>
 
           </div>
@@ -333,6 +353,21 @@ export default {
   text-align: right;
 }
 
+
+.report-content-data-cell-highlight {
+  background-color: #5AF0B4;
+  color: #002F54;
+  border-radius: 0.4rem;
+  padding: 0.2rem 0.4rem;
+  font-weight: 600;
+
+}
+
+.report-content-row-highlight {
+  font-weight: 500;
+  color: #001D33;
+}
+
 .report-content-data-header-cell {
   text-align: right;
   color: #001D33;

src/frontend/src/main.js

@@ -29,7 +29,7 @@ import {
     PhFloppyDisk,
     PhArrowCounterClockwise,
     PhCheck, PhBug, PhShuffle, PhStack, PhFile, PhFilePlus, PhDownloadSimple, PhMonitor, PhCpu, PhFileJs, PhFileCloud,
-    PhCloudX, PhDesktop, PhHardDrives
+    PhCloudX, PhDesktop, PhHardDrives, PhClipboard
 } from "@phosphor-icons/vue";
 
 
@@ -69,6 +69,7 @@ app.component('PhStack', PhStack );
 app.component('PhFile', PhFile);
 app.component("PhDesktop", PhDesktop );
 app.component("PhHardDrives", PhHardDrives );
+app.component("PhClipboard", PhClipboard );
 
 app.use(router);