Update public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js

public/js/pages/WarehouseShippingNote/WarehouseShippingNote.js

@@ -306,12 +306,25 @@ Vue.component('warehouse-shipping-note-see-through', {
                       </template>
                     </template>
                   </div>
-                  
+
                   <div v-if="calendarEventType" style="margin-top: 10px; font-style: italic; color: #555;">
                     <i class="fas fa-calendar-alt" style="margin-right: 5px;"></i>
                     Erstellt aus Kalendereintrag: {{ calendarEventType }}
                   </div>
 
+                  <div v-if="currentRow" style="margin-top: 10px; font-style: italic; color: #555;">
+                    <div>
+                      <i class="fas fa-clock" style="margin-right: 5px;"></i>
+                      Erstellt am: {{ formatDate(currentRow.create) }}
+                    </div>
+                    <div>
+                      <i class="fas fa-user" style="margin-right: 5px;"></i>
+                      Erstellt von:
+                      <span v-if="creatorLoading"><i class="fa fa-spinner fa-spin"></i></span>
+                      <span v-else>{{ creatorName || 'Unbekannt' }}</span>
+                    </div>
+                  </div>
+
                 </div>
                 <div v-if="activeTab === 'Editieren'" style="flex: 1; overflow: auto;" class="see-through-test-modal">
                   <warehouse-shipping-note-modal v-if="currentRow" :id="currentRow.id" @close="fetchData" ref="modal">
@@ -340,7 +353,9 @@ Vue.component('warehouse-shipping-note-see-through', {
             perPage: 1,
             rows: [],
             activeTab: 'Editieren',
-            window: window
+            window: window,
+            creatorName: null,
+            creatorLoading: false,
         }
     },
     computed: {
@@ -363,7 +378,35 @@ Vue.component('warehouse-shipping-note-see-through', {
             return null;
         }
     },
+    watch: {
+        currentRow(newVal) {
+            if (newVal && newVal.createBy) {
+                this.fetchCreatorInfo(newVal.createBy);
+            } else {
+                this.creatorName = null;
+            }
+        }
+    },
     methods: {
+        formatDate(timestamp) {
+            return window.moment(timestamp * 1000).format('DD.MM.YYYY HH:mm');
+        },
+        async fetchCreatorInfo(userId) {
+            if (!userId) {
+                this.creatorName = null;
+                return;
+            }
+            this.creatorLoading = true;
+            try {
+                const response = await axios.get(`/User/getById?id=${userId}`);
+                this.creatorName = response.data?.name || 'Unbekannt';
+            } catch (error) {
+                console.error(`Failed to fetch user with ID ${userId}`, error);
+                this.creatorName = 'Fehler';
+            } finally {
+                this.creatorLoading = false;
+            }
+        },
         tabStyle(tab) {
             return {
                 padding: '10px 20px',