Rml workorder/v2 need improvements

public/js/pages/RMLWorkorderAdmin/RMLWorkorderAdmin.css

@@ -0,0 +1,27 @@
+/*
+ * CSS for Workorder Table Row Highlighting (Balanced Colors)
+ */
+
+/* 🔴 Urgent: Deadline passed or less than 1 week away */
+.table-hover .tt-rml-workorder-urgent:hover,
+.tt-rml-workorder-urgent {
+    background-color: #f8d7da !important; /* Balanced Red */
+}
+
+/* 🟡 Medium: Deadline less than 3 weeks away */
+.table-hover .tt-rml-workorder-medium:hover,
+.tt-rml-workorder-medium {
+    background-color: #fff3cd !important; /* Balanced Yellow */
+}
+
+/* 🟢 On Track: Deadline more than 3 weeks away */
+.table-hover .tt-rml-workorder-ontrack:hover,
+.tt-rml-workorder-ontrack {
+    background-color: #d4edda !important; /* Balanced Green */
+}
+
+/* ⚫ Irrelevant: No deadline or status makes it not applicable */
+.table-hover .tt-rml-workorder-irrelevant:hover,
+.tt-rml-workorder-irrelevant {
+    background-color: #e9ecef !important; /* Balanced Grey */
+}

public/js/pages/RMLWorkorderAdmin/RMLWorkorderAdmin.js

@@ -1,70 +1,151 @@
 // RMLWorkorderAdmin.js
 Vue.component('r-m-l-workorder-admin', {
     template: `
-        <tt-card>
-            <assign-company-modal 
-                v-if="assignModalWorkorderId"
-                :workorder-id="assignModalWorkorderId"
-                @close="assignModalWorkorderId = null; $refs.table.$refs.table.refreshTable()"
+      <tt-card>
+        <div class="mb-2 d-flex align-items-center" v-if="workordersToAssign.length > 0">
+          <span class="mr-3 font-weight-bold">{{ workordersToAssign.length }} Workorder(s) zuweisen:</span>
+          <div style="width: 300px;">
+            <tt-select
+                class="mb-0"
+                :options="companies"
+                v-model="massAssignCompanyId"
+                @input="massAssignCompanies"
+                placeholder="Firma auswählen..."
+                sm
+                no-form-group
             />
-            
-            <documentation-viewer-modal
-                v-if="docsModalWorkorderId"
-                :workorder-id="docsModalWorkorderId"
-                @close="docsModalWorkorderId = null"
+          </div>
+        </div>
+
+        <tt-table-crud
+            ref="table"
+            :crud-config="crudConfig"
+        >
+          <template v-slot:preorderinfo="{ row }">
+            <div v-html="row.preorderInfo" class="small"></div>
+          </template>
+
+          <template v-slot:status="{ row }">
+            <traffic-light :deadline="row.deadlineDate" :status="row.status"/>
+            <i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
+            <span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
+          </template>
+
+          <template v-slot:companyname="{ row }">
+            <div class="d-flex justify-content-between align-items-center">
+              <div class="flex-grow-1">
+                <div v-if="editingWorkorderId === row.id">
+                  <tt-select
+                      :options="companies"
+                      :value="row.companyId"
+                      @input="assignCompany(row, $event)"
+                      @blur="editingWorkorderId = null"
+                      @keydown.esc.native="editingWorkorderId = null"
+                      placeholder="Firma zuweisen..."
+                      sm
+                      no-form-group
+                  />
+                </div>
+                <div v-else-if="row.status === 'new'">
+                  <tt-select
+                      :options="companies"
+                      :value="row.companyId"
+                      @input="assignCompany(row, $event)"
+                      placeholder="Firma zuweisen..."
+                      sm
+                      no-form-group
+                  />
+                </div>
+                <div v-else class="d-flex align-items-center">
+                  <span>{{ row.companyName || 'N/A' }}</span>
+                  <tt-button
+                      icon="fas fa-edit"
+                      @click="editingWorkorderId = row.id"
+                      additional-class="btn-link btn-sm p-0 ml-2"
+                      title="Zuweisung ändern"
+                  />
+                </div>
+              </div>
+              <div class="ml-3">
+                <tt-button v-if="!workordersToAssign.includes(row.id)"
+                           icon="fas fa-plus-circle text-success"
+                           @click="addToAssignList(row)"
+                           additional-class="btn-link btn-sm p-0"
+                           title="Zur Zuweisungsliste hinzufügen"
+                />
+                <tt-button v-if="workordersToAssign.includes(row.id)"
+                           icon="fas fa-minus-circle text-danger"
+                           @click="removeFromAssignList(row)"
+                           additional-class="btn-link btn-sm p-0"
+                           title="Von Zuweisungsliste entfernen"
+                />
+              </div>
+            </div>
+          </template>
+
+          <template v-slot:deadlinedate="{ row }">
+            {{ formatDate(row.deadlineDate) }}
+            <span v-if="row.daysUntilDeadline !== null && row.daysUntilDeadline >= 0" class="ml-2 text-muted small">
+              bis zum Termin: {{ row.daysUntilDeadline }} Tag{{ row.daysUntilDeadline !== 1 ? 'e' : '' }}
+            </span>
+          </template>
+
+          <template v-slot:appointmentdate="{ row }">
+            {{ formatDate(row.appointmentDate) }}
+          </template>
+
+          <template v-slot:expandedRow="{ row }">
+            <rml-documentation-viewer-admin
+                :workorder-id="row.id"
+                @workorder-updated="$refs.table.$refs.table.refreshTable()"
             />
-            
-            <tt-table-crud
-                ref="table"
-                @assign="assignModalWorkorderId = $event.id"
-                @view_docs="docsModalWorkorderId = $event.id"
-                :crud-config="crudConfig"
-            >
-                <template v-slot:preorderinfo="{ row }">
-                    <div v-html="row.preorderInfo" class="small"></div>
-                </template>
+          </template>
 
-                <template v-slot:status="{ row }">
-                    <traffic-light :deadline="row.deadlineDate" :status="row.status" />
-                    <i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
-                    <span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
-                </template>
-
-                <template v-slot:deadlinedate="{ row }">
-                    {{ formatDate(row.deadlineDate) }}
-                </template>
-                
-                 <template v-slot:appointmentdate="{ row }">
-                    {{ formatDate(row.appointmentDate) }}
-                </template>
-
-            </tt-table-crud>
-        </tt-card>
+        </tt-table-crud>
+      </tt-card>
     `,
     data() {
         return {
-            assignModalWorkorderId: null,
-            docsModalWorkorderId: null,
+            workordersToAssign: [],
+            editingWorkorderId: null,
+            companies: [],
+            massAssignCompanyId: null,
+            massAssignLoading: false,
             crudConfig: {
                 ...window.TT_CONFIG.CRUD_CONFIG,
-                additionalActions: [
-                    {
-                        "key": "assign",
-                        "title": "Firma zuweisen",
-                        "class": "fas fa-user-plus text-primary",
-                        "condition": (row) => row.status === 'new',
-                    },
-                    {
-                        "key": "view_docs",
-                        "title": "Dokumentation ansehen",
-                        "class": "fas fa-folder-open text-info",
-                        "condition": (row) => ['documented', 'completed'].includes(row.status),
-                    },
-                ]
+                selectable: false,
+                expandable: true,
+                customRowClass: (row) => {
+                    const deadlineDate = moment.unix(row.deadlineDate);
+
+                    if (['completed', 'new'].includes(row.status) || !deadlineDate.isValid()) {
+                        return 'tt-rml-workorder-irrelevant';
+                    }
+
+                    const daysLeft = deadlineDate.diff(moment(), 'days');
+
+                    if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
+                    if (daysLeft <= 21) return 'tt-rml-workorder-medium';
+
+                    return 'tt-rml-workorder-ontrack';
+                },
+                additionalActions: []
             }
         }
     },
+    async mounted() {
+        const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getCompanies`);
+        this.companies = response.data;
+    },
     methods: {
+        addToAssignList(row) {
+            if (!this.workordersToAssign.includes(row.id)) {
+                this.workordersToAssign.push(row.id);
+            }
+        },
+        removeFromAssignList(row) {
+            this.workordersToAssign = this.workordersToAssign.filter(id => id !== row.id);
+        },
         getStatusColumn(status) {
             const column = this.crudConfig.columns.find(c => c.key === 'status');
             return column.table.filterOptions.find(opt => opt.value === status) || {};
@@ -72,6 +153,60 @@ Vue.component('r-m-l-workorder-admin', {
         formatDate(timestamp) {
             if (!timestamp) return '–';
             return window.moment.unix(timestamp).format('DD.MM.YYYY');
+        },
+        async assignCompany(workorder, companyId) {
+            if (!companyId) {
+                this.editingWorkorderId = null;
+                return;
+            }
+            const payload = {
+                workorderId: workorder.id,
+                companyId: companyId
+            };
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/assignWorkorder`, payload);
+                if (response.data.success) {
+                    window.notify('success', response.data.message);
+                    this.$refs.table.$refs.table.refreshTable();
+                } else {
+                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
+                }
+            } catch (e) {
+                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
+            } finally {
+                this.editingWorkorderId = null;
+            }
+        },
+        async massAssignCompanies(companyId) {
+            if (!companyId) return;
+
+            if (!confirm(`${this.workordersToAssign.length} Workorder(s) der ausgewählten Firma zuweisen?`)) {
+                this.massAssignCompanyId = null; // Reset select on cancel
+                return;
+            }
+
+            this.massAssignLoading = true;
+
+            const payload = {
+                companyId: companyId,
+                workorderIds: this.workordersToAssign
+            };
+
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/massAssignWorkorders`, payload);
+                if (response.data.success) {
+                    window.notify('success', response.data.message);
+                    this.workordersToAssign = [];
+                    this.$refs.table.$refs.table.refreshTable();
+                } else {
+                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
+                }
+            } catch (e) {
+                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
+            } finally {
+                this.massAssignLoading = false;
+                this.massAssignCompanyId = null;
+            }
         }
     }
 });
@@ -80,104 +215,158 @@ Vue.component('traffic-light', {
     props: ['deadline', 'status'],
     computed: {
         lightInfo() {
-            if (['completed', 'new'].includes(this.status)) return { color: '#cccccc', title: 'Status irrelevant für Dringlichkeit' };
+            if (['completed', 'new'].includes(this.status)) return {color: '#cccccc', title: 'Status irrelevant für Dringlichkeit'};
             const now = moment();
             const deadlineDate = moment.unix(this.deadline);
-            if (!deadlineDate.isValid()) return { color: '#cccccc', title: 'Keine Deadline gesetzt' };
+            if (!deadlineDate.isValid()) return {color: '#cccccc', title: 'Keine Deadline gesetzt'};
 
-            if (deadlineDate.isBefore(now)) return { color: '#dc3545', title: 'Deadline überschritten' };
+            if (deadlineDate.isBefore(now)) return {color: '#dc3545', title: 'Deadline überschritten'};
             const daysLeft = deadlineDate.diff(now, 'days');
-            if (daysLeft <= 7) return { color: '#dc3545', title: 'Dringend: Weniger als 1 Woche' };
-            if (daysLeft <= 21) return { color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen' };
-            return { color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen' };
+            if (daysLeft <= 7) return {color: '#dc3545', title: 'Dringend: Weniger als 1 Woche'};
+            if (daysLeft <= 21) return {color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen'};
+            return {color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen'};
         }
     },
     template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">&#9679;</span>`
 });
 
-Vue.component('assign-company-modal', {
+Vue.component('rml-documentation-viewer-admin', {
     props: ['workorderId'],
     template: `
-        <tt-modal :show="true" title="Firma zuweisen" @submit="submit" @update:show="$emit('close')">
-            <tt-select label="Firma" :options="companies" v-model="selectedCompanyId" sm row required />
-        </tt-modal>
+      <div class="p-3 bg-light">
+        <div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
+        <div v-else class="row">
+          <div class="col-lg-6">
+            <tt-file-gallery :files="docs" @selection-changed="selectedDocs = $event" selectable />
+          </div>
+          <div class="col-lg-6">
+            <div class="card mb-3">
+              <div class="card-header"><h5><i class="fas fa-exclamation-triangle text-danger mr-2"></i>Korrektur anfordern</h5></div>
+              <div class="card-body">
+                <p class="small text-muted">Wählen Sie die zu korrigierenden Dokumente aus der Galerie aus und geben Sie einen Grund an.</p>
+                <tt-textarea v-model="correctionText" label="Grund für die Korrektur" sm row />
+                <tt-button text="Korrektur anfordern" @click="requestCorrection" :loading="correctionLoading" additional-class="btn-danger float-right"/>
+              </div>
+            </div>
+
+<!--            add a new card with a green button Dokumentation akzeptieren-->
+            <div class="card mb-3">
+                <div class="card-header"><h5><i class="fas fa-check-circle text-success mr-2"></i>Dokumentation akzeptieren</h5></div>
+                <div class="card-body">
+                    <p class="small text-muted">Wenn die Dokumentation korrekt ist, können Sie sie hier akzeptieren.</p>
+                    <tt-button text="Dokumentation akzeptieren"
+                               @click="$emit('accept-documentation', workorderId)"
+                               additional-class="btn-success float-right"
+                               icon="fas fa-check"
+                    />
+                </div>
+            </div>
+
+            <div class="card mt-3">
+              <div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
+              <div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
+                <ul v-if="journals.length" class="list-group list-group-flush">
+                  <li v-for="log in journals" :key="log.id" class="list-group-item small">
+                    <strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
+                    <div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
+                  </li>
+                </ul>
+                <div v-else class="card-body text-muted text-center">Keine Journaleinträge.</div>
+              </div>
+              <div class="card-footer">
+                <tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2" />
+                <tt-button
+                    text="Eintrag speichern"
+                    @click="addJournalEntry"
+                    :loading="addingJournalEntry"
+                    additional-class="btn-info btn-sm w-100 mt-2"
+                    icon="fas fa-paper-plane"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     `,
-    data() { return { companies: [], selectedCompanyId: null } },
-    async mounted() {
-        const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getCompanies`);
-        this.companies = response.data;
+    data() {
+        return {
+            loading: true,
+            correctionLoading: false,
+            docs: [],
+            journals: [],
+            selectedDocs: [],
+            correctionText: '',
+            newJournalMessage: '',
+            addingJournalEntry: false,
+        }
     },
     methods: {
-        async submit() {
-            if (!this.selectedCompanyId) return window.notify('error', 'Bitte eine Firma auswählen.');
+        async fetchData() {
+            this.loading = true;
             try {
-                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/assignWorkorder`, {
+                const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getDocumentation`, { params: { workorderId: this.workorderId }});
+                this.docs = response.data.docs;
+                this.journals = response.data.journals;
+            } catch(e) {
+                window.notify('error', 'Dokumentation konnte nicht geladen werden.');
+            } finally {
+                this.loading = false;
+            }
+        },
+        async requestCorrection() {
+            if (!this.correctionText) return window.notify('error', 'Bitte geben Sie einen Grund für die Korrektur an.');
+            if (this.selectedDocs.length === 0) return window.notify('error', 'Bitte wählen Sie mindestens ein Dokument für die Korrektur aus.');
+
+            this.correctionLoading = true;
+            try {
+                const payload = {
                     workorderId: this.workorderId,
-                    companyId: this.selectedCompanyId
-                });
-                if(response.data.success) {
+                    text: this.correctionText,
+                    fileIds: this.selectedDocs
+                };
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/requestCorrection`, payload);
+                if (response.data.success) {
                     window.notify('success', response.data.message);
-                    this.$emit('close');
+                    this.correctionText = '';
+                    this.selectedDocs = [];
+                    await this.fetchData();
+                    this.$emit('workorder-updated');
                 } else {
-                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
+                    window.notify('error', response.data.message);
                 }
             } catch (e) {
                 window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
             }
-        }
-    }
-});
-
-Vue.component('documentation-viewer-modal', {
-    props: ['workorderId'],
-    template: `
-        <tt-modal :show="true" :title="'Dokumentation für Auftrag #' + workorderId" :save="false" :delete="false" @update:show="$emit('close')">
-            <div class="card">
-                <div class="card-header">
-                    <h5>Hochgeladene Dokumente</h5>
-                </div>
-                <div v-if="loading" class="card-body text-center"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
-                <div v-else-if="!docs.length" class="card-body text-center text-muted">Keine Dokumente vorhanden.</div>
-                <ul v-else class="list-group list-group-flush">
-                    <li v-for="doc in docs" :key="doc.id" class="list-group-item">
-                         <a :href="'/File/download?id=' + doc.fileId" target="_blank">
-                            <i class="fas fa-file-download mr-2"></i> {{ doc.fileName }}
-                         </a>
-                         <div class="text-muted small mt-1">
-                            <strong>Typ:</strong> {{ getDocTypeText(doc.documentType) }} <br/>
-                            <strong>Beschreibung:</strong> {{ doc.description || '-' }} <br/>
-                            <strong>Hochgeladen von:</strong> {{ doc.userName }} am {{ formatDate(doc.create) }}
-                         </div>
-                    </li>
-                </ul>
-            </div>
-        </tt-modal>
-    `,
-    data() {
-        return { loading: false, docs: [] }
-    },
-    methods: {
-        async fetchDocs() {
-            this.loading = true;
-            const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getDocumentation`, { params: { workorderId: this.workorderId }});
-            this.docs = response.data;
-            this.loading = false;
+            this.correctionLoading = false;
+        },
+        async addJournalEntry() {
+            if (!this.newJournalMessage.trim()) {
+                return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
+            }
+            this.addingJournalEntry = true;
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/addJournal`, {
+                    workorderId: this.workorderId,
+                    text: this.newJournalMessage
+                });
+                if (response.data.success) {
+                    window.notify('success', response.data.message || 'Journal-Eintrag hinzugefügt.');
+                    this.newJournalMessage = '';
+                    this.journals = response.data.journals;
+                } else {
+                    window.notify('error', response.data.message || 'Eintrag konnte nicht gespeichert werden.');
+                }
+            } catch (e) {
+                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
+            } finally {
+                this.addingJournalEntry = false;
+            }
         },
         formatDate(timestamp) {
             return window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm');
         },
-        getDocTypeText(type) {
-            const types = [
-                { value: 'photo_before', text: 'Foto: Zustand vorher' },
-                { value: 'photo_during', text: 'Foto: Während der Arbeit' },
-                { value: 'photo_after', text: 'Foto: Zustand nachher' },
-                { value: 'measurement_protocol', text: 'Messprotokoll (z.B. OTDR)' },
-                { value: 'customer_signature', text: 'Unterschriebenes Arbeitsprotokoll' },
-            ];
-            return types.find(t => t.value === type)?.text || type;
-        }
     },
     mounted() {
-        this.fetchDocs();
+        this.fetchData();
     }
 });

public/js/pages/RMLWorkorderCompany/RMLWorkorderAdmin.css

@@ -0,0 +1,30 @@
+/*
+ * CSS for Workorder Table Row Highlighting
+ */
+
+/* Urgent: Deadline passed or less than 1 week away */
+.table-hover .tt-rml-workorder-urgent:hover,
+.tt-rml-workorder-urgent {
+    background-color: #fbe9e7 !important; /* Soft Red */
+}
+
+/* Medium: Deadline less than 3 weeks away */
+.table-hover .tt-rml-workorder-medium:hover,
+.tt-rml-workorder-medium {
+    background-color: #fff8e1 !important; /* Soft Yellow */
+}
+
+/* On Track: Deadline more than 3 weeks away */
+.table-hover .tt-rml-workorder-ontrack:hover,
+.tt-rml-workorder-ontrack {
+    background-color: #e8f5e9 !important; /* Soft Green */
+}
+
+/* Irrelevant: No deadline or status makes it not applicable */
+.table-hover .tt-rml-workorder-irrelevant:hover,
+.tt-rml-workorder-irrelevant {
+    background-color: #fafafa !important; /* Very light grey */
+}
+.tt-file-gallery-item.border.border-danger {
+    border: 4px solid #f1556c!important;
+}

public/js/pages/RMLWorkorderCompany/RMLWorkorderCompany.js

@@ -1,17 +1,9 @@
 // RMLWorkorderCompany.js
-
 Vue.component('r-m-l-workorder-company', {
     template: `
       <tt-card>
-        <schedule-appointment-modal
-            v-if="scheduleModalWorkorderId"
-            :workorder-id="scheduleModalWorkorderId"
-            @close="scheduleModalWorkorderId = null; $refs.table.$refs.table.refreshTable()"
-        />
-
         <tt-table-crud
             ref="table"
-            @schedule="scheduleModalWorkorderId = $event.id"
             :crud-config="crudConfig"
         >
           <template v-slot:preorderinfo="{ row }">
@@ -29,7 +21,16 @@ Vue.component('r-m-l-workorder-company', {
           </template>
 
           <template v-slot:appointmentdate="{ row }">
-            {{ formatDate(row.appointmentDate) }}
+            <div v-if="!row.appointmentDate && ['assigned', 'correction_requested'].includes(row.status)">
+              <tt-date-picker
+                  placeholder="Termin festlegen..."
+                  :date-range="false"
+                  @input="setAppointment(row, $event)"
+                  sm
+                  no-form-group
+              />
+            </div>
+            <span v-else>{{ formatDate(row.appointmentDate) }}</span>
           </template>
 
           <template v-slot:expandedRow="{ row }">
@@ -44,18 +45,24 @@ Vue.component('r-m-l-workorder-company', {
     `,
     data() {
         return {
-            scheduleModalWorkorderId: null,
             crudConfig: {
                 ...window.TT_CONFIG.CRUD_CONFIG,
                 expandable: true,
-                additionalActions: [
-                    {
-                        "key": "schedule",
-                        "title": "Termin festlegen",
-                        "class": "fas fa-calendar-plus text-primary",
-                        "condition": (row) => row.status === 'assigned',
+                customRowClass: (row) => {
+                    const deadlineDate = moment.unix(row.deadlineDate);
+
+                    if (['completed', 'new'].includes(row.status) || !deadlineDate.isValid()) {
+                        return 'tt-rml-workorder-irrelevant';
                     }
-                ]
+
+                    const daysLeft = deadlineDate.diff(moment(), 'days');
+
+                    if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
+                    if (daysLeft <= 21) return 'tt-rml-workorder-medium';
+
+                    return 'tt-rml-workorder-ontrack';
+                },
+                additionalActions: []
             }
         }
     },
@@ -67,6 +74,23 @@ Vue.component('r-m-l-workorder-company', {
         formatDate(timestamp) {
             if (!timestamp) return '–';
             return window.moment.unix(timestamp).format('DD.MM.YYYY');
+        },
+        async setAppointment(workorder, date) {
+            if (!date) return;
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/scheduleAppointment`, {
+                    workorderId: workorder.id,
+                    appointmentDate: date
+                });
+                if (response.data.success) {
+                    window.notify('success', response.data.message);
+                    this.$refs.table.$refs.table.refreshTable();
+                } else {
+                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
+                }
+            } catch (e) {
+                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
+            }
         }
     }
 });
@@ -90,35 +114,6 @@ Vue.component('traffic-light', {
     template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">&#9679;</span>`
 });
 
-Vue.component('schedule-appointment-modal', {
-    props: ['workorderId'],
-    template: `
-      <tt-modal :show="true" title="Termin festlegen" @submit="submit" @update:show="$emit('close')">
-        <tt-date-picker label="Termindatum" :date-range="false" v-model="appointmentDate" sm row required />
-      </tt-modal>
-    `,
-    data() { return { appointmentDate: null } },
-    methods: {
-        async submit() {
-            if (!this.appointmentDate) return window.notify('error', 'Bitte ein Datum auswählen.');
-            try {
-                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/scheduleAppointment`, {
-                    workorderId: this.workorderId,
-                    appointmentDate: this.appointmentDate
-                });
-                if(response.data.success) {
-                    window.notify('success', response.data.message);
-                    this.$emit('close');
-                } else {
-                    window.notify('error', response.data.message || 'Ein Fehler ist aufgetreten.');
-                }
-            } catch (e) {
-                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
-            }
-        }
-    }
-});
-
 Vue.component('documentation-manager', {
     props: ['workorderId'],
     template: `
@@ -126,29 +121,53 @@ Vue.component('documentation-manager', {
         <div v-if="loadingWorkorder" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
         <div v-else class="row">
           <div class="col-lg-4 mb-3 mb-lg-0">
-            <div class="card h-100">
-              <div class="card-body">
-                <h5 class="card-title">Benötigte Dokumente</h5>
-                <ul class="list-unstyled">
-                  <li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center">
-                    <i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
-                    <span>{{ docType.text }}</span>
-                  </li>
-                </ul>
-                <hr>
-                <tt-button
-                    text="Auftrag abschließen"
-                    @click="completeWorkorder"
-                    :disabled="!canComplete || workorder.status === 'completed'"
-                    :loading="completing"
-                    additional-class="btn-success w-100"
-                    icon="fas fa-check-double"
-                />
-                <small v-if="!canComplete" class="form-text text-muted text-center mt-2">
-                  Bitte laden Sie alle benötigten Dokumente hoch, um den Auftrag abzuschließen.
-                </small>
-                <div v-if="workorder.status === 'completed'" class="alert alert-secondary text-center mt-2 p-2">
-                  Auftrag bereits abgeschlossen.
+            <div>
+              <div class="card h-100">
+                <div class="card-body">
+                  <h5 class="card-title">Benötigte Dokumente</h5>
+                  <ul class="list-unstyled">
+                    <li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center">
+                      <i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
+                      <span>{{ docType.text }}</span>
+                    </li>
+                  </ul>
+                  <hr>
+                  <tt-button
+                      text="Auftrag abschließen"
+                      @click="completeWorkorder"
+                      :disabled="!canComplete || workorder.status === 'completed'"
+                      :loading="completing"
+                      additional-class="btn-success w-100"
+                      icon="fas fa-check-double"
+                  />
+                  <small v-if="!canComplete" class="form-text text-muted text-center mt-2">
+                    Bitte laden Sie alle benötigten Dokumente hoch, um den Auftrag abzuschließen.
+                  </small>
+                  <div v-if="workorder.status === 'completed'" class="alert alert-secondary text-center mt-2 p-2">
+                    Auftrag bereits abgeschlossen.
+                  </div>
+                </div>
+              </div>
+              <div class="card mt-3">
+                <div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
+                <div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
+                  <ul class="list-group list-group-flush">
+                    <li v-if="journals.length === 0" class="list-group-item text-center text-muted">Keine Einträge vorhanden.</li>
+                    <li v-for="log in journals" :key="log.id" class="list-group-item small" :class="{'list-group-item-danger': log.statusChange && log.statusChange.includes('correction_requested')}">
+                      <strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
+                      <div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-footer" v-if="workorder.status !== 'completed'">
+                  <tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2" />
+                  <tt-button
+                      text="Eintrag speichern"
+                      @click="addJournalEntry"
+                      :loading="addingJournalEntry"
+                      additional-class="btn-info btn-sm w-100 mt-2"
+                      icon="fas fa-paper-plane"
+                  />
                 </div>
               </div>
             </div>
@@ -162,15 +181,30 @@ Vue.component('documentation-manager', {
                 <tt-input label="Beschreibung" v-model="uploadData.description" sm row placeholder="Optional"/>
                 <div class="form-group row">
                   <label class="col-form-label col-sm-4 col-form-label-sm">Dateien</label>
-                  <div class="col-sm-8">
-                    <input type="file" class="form-control-file form-control-sm" @change="handleFileUpload" ref="fileInput" multiple />
+                  <div class="col-sm-8 p-0">
+                    <input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload" ref="fileInput" multiple accept="image/*,.pdf,.doc,.docx" />
                   </div>
                 </div>
                 <tt-button text="Hochladen" @click="uploadFiles" :loading="uploading" additional-class="btn-primary float-right" icon="fas fa-upload" />
               </div>
             </div>
 
-            <tt-file-gallery :files="uploadedFiles" />
+            <tt-file-gallery
+                :files="filesWithStatus"
+                :edit-mode="workorder.status !== 'completed'"
+                :delete-mode="workorder.status !== 'completed'"
+                @delete-file="deleteDocumentation"
+                @update-file="updateDocumentation"
+            >
+              <template v-slot:file-edit="{ file }">
+                <tt-select
+                    label="Dokumententyp"
+                    :options="requiredDocTypes"
+                    v-model="file.documentType"
+                    sm
+                />
+              </template>
+            </tt-file-gallery>
           </div>
         </div>
       </div>
@@ -182,6 +216,9 @@ Vue.component('documentation-manager', {
             uploading: false,
             completing: false,
             uploadedFiles: [],
+            journals: [],
+            newJournalMessage: '',
+            addingJournalEntry: false,
             uploadData: {
                 files: [],
                 documentType: 'photo_before',
@@ -199,9 +236,40 @@ Vue.component('documentation-manager', {
     computed: {
         canComplete() {
             return this.requiredDocTypes.every(docType => this.isUploaded(docType.value));
+        },
+        filesWithStatus() {
+            if (!this.journals || this.journals.length === 0) {
+                return this.uploadedFiles;
+            }
+
+            const correctionJournal = [...this.journals]
+                .sort((a, b) => b.create - a.create)
+                .find(j => j.statusChange && j.statusChange.includes('correction_requested'));
+
+            if (!correctionJournal || !correctionJournal.fileIds) {
+                return this.uploadedFiles;
+            }
+
+            try {
+                const incorrectFileIds = JSON.parse(correctionJournal.fileIds);
+                if (!Array.isArray(incorrectFileIds)) return this.uploadedFiles;
+
+                return this.uploadedFiles.map(file => {
+                    if (incorrectFileIds.includes(file.id)) {
+                        return { ...file, class: 'border border-danger' };
+                    }
+                    return file;
+                });
+            } catch (e) {
+                return this.uploadedFiles;
+            }
         }
     },
     methods: {
+        formatDate(timestamp) {
+            if (!timestamp) return '–';
+            return window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm');
+        },
         async loadWorkorder() {
             this.loadingWorkorder = true;
             try {
@@ -218,7 +286,8 @@ Vue.component('documentation-manager', {
         async fetchDocs() {
             try {
                 const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getDocumentation`, { params: { workorderId: this.workorderId }});
-                this.uploadedFiles = response.data;
+                this.uploadedFiles = response.data.docs;
+                this.journals = response.data.journals;
             } catch(e) {
                 window.notify('error', 'Dokumente konnten nicht geladen werden.');
             }
@@ -245,8 +314,9 @@ Vue.component('documentation-manager', {
                     this.$refs.fileInput.value = '';
                     this.uploadData.files = [];
                     this.uploadData.description = '';
-                    await this.fetchDocs();
-                    await this.loadWorkorder(); // Reload to get updated status
+
+                    this.uploadedFiles = response.data.docs;
+                    this.workorder = response.data.workorder;
                 } else {
                     window.notify('error', response.data.error || 'Upload fehlgeschlagen.');
                 }
@@ -271,9 +341,55 @@ Vue.component('documentation-manager', {
             }
             this.completing = false;
         },
-        getDocTypeText(type) {
-            const found = this.requiredDocTypes.find(t => t.value === type);
-            return found ? found.text : type;
+        async deleteDocumentation(file) {
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/deleteDocumentation`, { id: file.id });
+                if (response.data.success) {
+                    window.notify('success', response.data.message);
+                    this.uploadedFiles = response.data.docs;
+                } else {
+                    window.notify('error', response.data.message || 'Löschen fehlgeschlagen.');
+                }
+            } catch (e) {
+                window.notify('error', 'Netzwerkfehler beim Löschen.');
+            }
+        },
+        async updateDocumentation(file) {
+            try {
+                const payload = { id: file.id, documentType: file.documentType };
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateDocumentation`, payload);
+                if (response.data.success) {
+                    window.notify('success', response.data.message);
+                    this.uploadedFiles = response.data.docs;
+                } else {
+                    window.notify('error', response.data.message || 'Update fehlgeschlagen.');
+                }
+            } catch (e) {
+                window.notify('error', 'Netzwerkfehler beim Aktualisieren.');
+            }
+        },
+        async addJournalEntry() {
+            if (!this.newJournalMessage.trim()) {
+                return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
+            }
+            this.addingJournalEntry = true;
+            try {
+                const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/addJournal`, {
+                    workorderId: this.workorderId,
+                    text: this.newJournalMessage
+                });
+                if (response.data.success) {
+                    window.notify('success', response.data.message || 'Journal-Eintrag hinzugefügt.');
+                    this.newJournalMessage = '';
+                    this.journals = response.data.journals;
+                } else {
+                    window.notify('error', response.data.message || 'Eintrag konnte nicht gespeichert werden.');
+                }
+            } catch (e) {
+                window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
+            } finally {
+                this.addingJournalEntry = false;
+            }
         }
     },
     async mounted() {