added technical data to xinon workorder and workordermph now has a unassign button

public/js/pages/ManualInvoice/ManualInvoice.js

@@ -161,9 +161,18 @@ Vue.component('manual-invoice-modal', {
               <tt-autocomplete label="Kunde suchen" :api-url="customerApiUrl" v-model="invoiceData.billingaddress_id" sm row />
             </tt-card>
             <tt-card><template v-slot:header><h5><i class="fas fa-file-invoice mr-2"></i>Rechnungsdetails</h5></template>
-              <div class="form-grid">
-                <tt-input label="Rechnungsdatum" type="date" v-model="invoiceData.invoice_date" sm/>
-                <tt-select label="Zahlungsart" v-model="invoiceData.billing_type" :options="billingTypeOptions" sm/>
+              <div class="form-row mb-2">
+                <div class="col-md-6">
+                  <label class="small text-muted">Zahlungsart</label>
+                  <div class="d-flex align-items-center">
+                    <span :class="['badge', effectiveBillingType === 'sepa' ? 'badge-info' : 'badge-secondary']">
+                      {{ effectiveBillingType === 'sepa' ? 'SEPA' : 'Rechnung' }}
+                    </span>
+                    <small v-if="customerBillingInfo.billing_type === 'sepa' && effectiveBillingType === 'invoice'" class="text-warning ml-2">
+                      <i class="fas fa-exclamation-triangle"></i> Brutto überschreitet SEPA-Limit ({{ formatPrice(customerBillingInfo.manual_invoice_sepa_limit) }})
+                    </small>
+                  </div>
+                </div>
               </div>
               <tt-input label="Leistungszeitraum" v-model="invoiceData.leistungszeitraum" sm row placeholder="z.B. 01.01.2025 - 31.01.2025"/>
               <tt-input label="Externe Referenz" v-model="invoiceData.externe_referenz" sm row placeholder="z.B. Auftragsnummer, Bestellnummer"/>
@@ -172,9 +181,8 @@ Vue.component('manual-invoice-modal', {
             <tt-card><template v-slot:header><h5><i class="fas fa-list-ol mr-2"></i>Positionen</h5></template>
               <tt-positions-manager group-mode ref="positionsManager" v-model="invoiceData.positions" :config="positionsConfig" @updateField-article_id="onArticleSelected" />
             </tt-card>
-            <tt-card><template v-slot:header><h5><i class="fas fa-paragraph mr-2"></i>Texte & Rabatt</h5></template>
+            <tt-card><template v-slot:header><h5><i class="fas fa-paragraph mr-2"></i>Rabatt</h5></template>
               <tt-input label="Gesamtrabatt (%)" v-model.number="invoiceData.gesamtrabatt" sm row type="number" placeholder="0"/>
-              <tt-textarea label="Steuerhinweis" v-model="invoiceData.tax_text" rows="2"/>
             </tt-card>
           </div>
         </div>
@@ -197,6 +205,12 @@ Vue.component('manual-invoice-modal', {
             pdfLoading: false,
             pdfPreviewUrl: '',
             previewDebounceTimer: null,
+            customerBillingInfo: {
+                billing_type: 'invoice',
+                manual_invoice_sepa_limit: null,
+                vatarea: 'domestic',
+                tax_text: ''
+            },
             invoiceData: {
                 id: null, invoice_number: null, invoice_date: moment().format('YYYY-MM-DD'),
                 billingaddress_id: null, owner_id: null, customer_number: 0, fibu_account_number: 0,
@@ -205,7 +219,6 @@ Vue.component('manual-invoice-modal', {
                 leistungszeitraum: '', einleitender_text: '', externe_referenz: '', gesamtrabatt: 0,
                 positions: [], total: 0, total_gross: 0
             },
-            billingTypeOptions: [{value: 'invoice', text: 'Rechnung'}, {value: 'sepa', text: 'SEPA'}],
             positionsConfig: {
                 fields: {
                     article_id: {
@@ -270,16 +283,31 @@ Vue.component('manual-invoice-modal', {
             });
 
             return { subtotal, net, vat, gross };
+        },
+        effectiveBillingType() {
+            if (this.customerBillingInfo.billing_type !== 'sepa') return 'invoice';
+            if (this.customerBillingInfo.manual_invoice_sepa_limit === null) return 'sepa';
+            return this.totals.gross <= this.customerBillingInfo.manual_invoice_sepa_limit ? 'sepa' : 'invoice';
         }
     },
     watch: {
         'invoiceData': { handler() { this.debouncedPreviewUpdate(); }, deep: true },
+        effectiveBillingType: {
+            handler(newType) {
+                this.invoiceData.billing_type = newType;
+            },
+            immediate: true
+        },
         'invoiceData.billingaddress_id': {
             async handler(newId) {
-                if (!newId) return Object.assign(this.invoiceData, {
-                    company: '', firstname: '', lastname: '', street: '', zip: '', city: '',
-                    country: 'Österreich', uid: '', email: '', customer_number: 0, fibu_account_number: 0, owner_id: 0
-                });
+                if (!newId) {
+                    Object.assign(this.invoiceData, {
+                        company: '', firstname: '', lastname: '', street: '', zip: '', city: '',
+                        country: 'Österreich', uid: '', email: '', customer_number: 0, fibu_account_number: 0, owner_id: 0
+                    });
+                    this.customerBillingInfo = { billing_type: 'invoice', manual_invoice_sepa_limit: null, vatarea: 'domestic', tax_text: '' };
+                    return;
+                }
 
                 const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Address/api?do=getAddress&id=${newId}`);
                 if (data.status === 'OK' && data.result.address) {
@@ -291,6 +319,8 @@ Vue.component('manual-invoice-modal', {
                         fibu_account_number: a.fibu_account_number || 0, owner_id: newId
                     });
                 }
+
+                await this.fetchCustomerBillingInfo(newId);
             }
         }
     },
@@ -327,10 +357,35 @@ Vue.component('manual-invoice-modal', {
     methods: {
         close() { this.$emit('close'); },
         saveInvoice() {
+            this.invoiceData.invoice_date = moment().format('YYYY-MM-DD');
+            this.invoiceData.billing_type = this.effectiveBillingType;
+            this.invoiceData.tax_text = this.customerBillingInfo.tax_text;
             if (!this.invoiceData.billingaddress_id) return window.notify('error', 'Bitte wählen Sie einen Kunden aus.');
             if (!this.invoiceData.positions?.length) return window.notify('error', 'Bitte fügen Sie mindestens eine Position hinzu.');
             this.$emit('save', this.invoiceData);
         },
+        formatPrice(value) {
+            if (value === null || value === undefined) return '-';
+            return new Intl.NumberFormat('de-AT', { style: 'currency', currency: 'EUR' }).format(value);
+        },
+        async fetchCustomerBillingInfo(addressId) {
+            if (!addressId) return;
+            try {
+                const vatgroupId = this.invoiceData.vatgroup_id || 2;
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/ManualInvoice/getCustomerBillingInfo?address_id=${addressId}&vatgroup_id=${vatgroupId}`);
+                if (data.success) {
+                    this.customerBillingInfo = {
+                        billing_type: data.billing_type || 'invoice',
+                        manual_invoice_sepa_limit: data.manual_invoice_sepa_limit,
+                        vatarea: data.vatarea || 'domestic',
+                        tax_text: data.tax_text || ''
+                    };
+                    this.invoiceData.tax_text = data.tax_text || '';
+                }
+            } catch (e) {
+                console.error('Error fetching customer billing info:', e);
+            }
+        },
         handleResize() { this.isLargeScreen = window.innerWidth >= 1920; },
         handleGlobalKeydown(e) {
             if (e.ctrlKey && e.key === 'q') { e.preventDefault(); this.togglePreviewVisibility(); }
@@ -339,9 +394,9 @@ Vue.component('manual-invoice-modal', {
         async onArticleSelected(articleId) {
             if (!articleId) return;
             try {
-                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/ManualInvoice/getArticleVatInfo?article_id=${articleId}`);
+                const vatarea = this.customerBillingInfo.vatarea || 'domestic';
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/ManualInvoice/getArticleVatInfo?article_id=${articleId}&vatarea=${vatarea}`);
                 if (data.success && this.$refs.positionsManager) {
-                    // Update the formData in the positions manager
                     const pm = this.$refs.positionsManager;
                     if (data.article) {
                         pm.$set(pm.formData, 'product_name', data.article.title);
@@ -351,13 +406,26 @@ Vue.component('manual-invoice-modal', {
                     pm.$set(pm.formData, 'fibu_cost_account', data.fibu_cost_account);
                     pm.$set(pm.formData, 'fibu_cost_account_legacy', data.fibu_cost_account_legacy);
                     pm.$set(pm.formData, 'fibu_taxcode', data.fibu_taxcode);
-                    // Store vatgroup_id on invoice level if needed
                     this.invoiceData.vatgroup_id = data.vatgroup_id;
+                    await this.updateTaxText(data.vatgroup_id);
                 }
             } catch (e) {
                 console.error('Error fetching article VAT info:', e);
             }
         },
+        async updateTaxText(vatgroupId) {
+            if (!vatgroupId) return;
+            try {
+                const vatarea = this.customerBillingInfo.vatarea || 'domestic';
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/ManualInvoice/getTaxText?vatgroup_id=${vatgroupId}&vatarea=${vatarea}`);
+                if (data.success) {
+                    this.customerBillingInfo.tax_text = data.tax_text || '';
+                    this.invoiceData.tax_text = data.tax_text || '';
+                }
+            } catch (e) {
+                console.error('Error fetching tax text:', e);
+            }
+        },
         debouncedPreviewUpdate() {
             clearTimeout(this.previewDebounceTimer);
             this.previewDebounceTimer = setTimeout(() => this.updatePdfPreview(), 2000);

public/js/pages/WorkorderBase/WorkorderBase.js

@@ -273,7 +273,44 @@ Vue.component('workorder-details-manager', {
                 />
               </div>
             </div>
-            
+
+            <div v-if="showTechnicalData && technicalData && (technicalData.patchposition?.equipmentName || technicalData.rimoWorkorders?.length)" class="card mb-3">
+              <div class="card-header bg-purple text-white">
+                <h5 class="mb-0"><i class="fas fa-microchip mr-2"></i>Technische Daten</h5>
+              </div>
+              <div class="card-body">
+                <div class="row">
+                  <div class="col-md-6" v-if="technicalData.patchposition?.equipmentName">
+                    <h6>Patchposition</h6>
+                    <table class="table table-sm table-striped mb-0">
+                      <tr>
+                        <th class="border-top-0">Equipment Name:</th>
+                        <td class="border-top-0 text-monospace">{{ technicalData.patchposition.equipmentName }}</td>
+                      </tr>
+                      <tr v-if="technicalData.patchposition.equipmentPort">
+                        <th>Equipment Port:</th>
+                        <td class="text-monospace">{{ technicalData.patchposition.equipmentPort }}</td>
+                      </tr>
+                    </table>
+                  </div>
+                  <div class="col-md-6" v-if="technicalData.rimoWorkorders?.length">
+                    <h6>AHA Blätter</h6>
+                    <div v-for="wo in technicalData.rimoWorkorders" :key="wo.id" class="mb-2">
+                      <div class="d-flex align-items-center justify-content-between border rounded p-2">
+                        <div>
+                          <strong>{{ wo.rimoName }}</strong>
+                          <small class="text-muted ml-2">{{ wo.rimoStatus }}</small>
+                        </div>
+                        <a :href="wo.downloadUrl" target="_blank" class="btn btn-sm btn-outline-primary">
+                          <i class="fas fa-file-pdf mr-1"></i> AHA Blatt
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <div class="card mb-3" v-if="isAdmin && selectedDocs.length > 0">
               <div class="card-header bg-warning"><h5><i class="fas fa-exclamation-triangle mr-2"></i>Korrektur anfordern</h5></div>
               <div class="card-body">
@@ -328,6 +365,9 @@ Vue.component('workorder-details-manager', {
         requireCableLength: false,
         requireCableType: false,
         savingData: false,
+        // Technical data
+        showTechnicalData: false,
+        technicalData: null,
         // Admin state
         selectedDocs: [], correctionText: '', correctionLoading: false, showAcceptModal: false, showRevertModal: false,
     }),
@@ -394,6 +434,8 @@ Vue.component('workorder-details-manager', {
                     this.interventionTypes = data.interventionTypes;
                     this.requireCableLength = data.requireCableLength || false;
                     this.requireCableType = data.requireCableType || false;
+                    this.showTechnicalData = data.showTechnicalData || false;
+                    this.technicalData = data.technicalData || null;
                 }
             } catch (e) { console.error("Mandantenkonfiguration nicht geladen", e); }
             finally { this.loadingConfig = false; }

public/js/pages/WorkorderMphAdmin/WorkorderMphAdmin.js

@@ -30,10 +30,13 @@ Vue.component('workorder-mph-admin', {
                 </div>
                 <div v-else><span>{{ row.companyName || 'N/A' }}</span></div>
               </div>
-              <div style="display: grid; grid-template-columns: repeat(2, auto); gap: 0px; padding-left: 8px;">
-                <tt-button v-if="!['completed', 'new'].includes(row.status)" icon="fas fa-edit"
+              <div style="display: grid; grid-template-columns: repeat(3, auto); gap: 0px; padding-left: 8px;">
+                <tt-button v-if="!['completed', 'new', 'cancelled'].includes(row.status)" icon="fas fa-edit"
                            @click="startCompanyEdit(row)" additional-class="btn-link workorder-mph-button"
                            title="Zuweisung ändern"/>
+                <tt-button v-if="!['completed', 'new', 'cancelled'].includes(row.status)" icon="fas fa-user-slash text-warning"
+                           @click="unassignWorkorderModalData = row" additional-class="btn-link workorder-mph-button"
+                           title="Zuweisung aufheben"/>
                 <tt-button v-if="!['completed', 'cancelled'].includes(row.status)" icon="fas fa-ban text-danger"
                            @click="cancelWorkorderModalData = row" additional-class="btn-link workorder-mph-button"
                            title="Auftrag stornieren"/>
@@ -101,6 +104,13 @@ Vue.component('workorder-mph-admin', {
           <p>Soll der Auftrag <strong>#{{ cancelWorkorderModalData.id }}</strong> wirklich storniert werden?</p>
           <tt-textarea label="Grund (optional)" v-model="cancelWorkorderModalData.reason" sm row/>
         </tt-modal>
+
+        <tt-modal v-if="unassignWorkorderModalData" :show.sync="unassignWorkorderModalData"
+                  title="Zuweisung aufheben" @submit="unassignWorkorder">
+          <p>Soll die Zuweisung für Auftrag <strong>#{{ unassignWorkorderModalData.id }}</strong> aufgehoben werden?</p>
+          <p class="text-muted small">Aktuell zugewiesen an: <strong>{{ unassignWorkorderModalData.companyName }}</strong></p>
+          <tt-textarea label="Grund (optional)" v-model="unassignWorkorderModalData.reason" sm row/>
+        </tt-modal>
       </tt-card>
     `,
     data() {
@@ -113,6 +123,7 @@ Vue.component('workorder-mph-admin', {
             companies: [],
             companiesLoading: false,
             cancelWorkorderModalData: null,
+            unassignWorkorderModalData: null,
             crudConfig: {
                 ...window.TT_CONFIG.CRUD_CONFIG,
                 selectable: false,
@@ -237,6 +248,20 @@ Vue.component('workorder-mph-admin', {
             } else {
                 window.notify('error', data.message || 'Stornierung fehlgeschlagen.');
             }
+        },
+        async unassignWorkorder() {
+            const { id, reason } = this.unassignWorkorderModalData;
+            const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderMphAdmin/unassignWorkorder`, {
+                workorderId: id,
+                reason: reason
+            });
+            if (data.success) {
+                window.notify('success', data.message);
+                this.$refs.table.$refs.table.refreshTable();
+                this.unassignWorkorderModalData = null;
+            } else {
+                window.notify('error', data.message || 'Aufheben der Zuweisung fehlgeschlagen.');
+            }
         }
     }
 });

public/js/pages/WorkorderTenantConfig/WorkorderTenantConfig.js

@@ -89,6 +89,8 @@ Vue.component('workorder-tenant-config', {
                                  v-model="editableItem.requireCableLength" sm/>
                     <tt-checkbox label="Kabeltyp erforderlich"
                                  v-model="editableItem.requireCableType" sm/>
+                    <tt-checkbox label="Technische Daten anzeigen (Patchposition, AHA Blatt)"
+                                 v-model="editableItem.showTechnicalData" sm/>
                   </div>
                   <div v-else>
                     <p>Workorder: <strong>{{ config.enableWorkorder ? 'Aktiviert' : 'Deaktiviert' }}</strong></p>
@@ -97,6 +99,7 @@ Vue.component('workorder-tenant-config', {
                     <p>Tiefbau-Doku: <strong>{{ config.civilEngineeringDocsRequired ? 'Ja' : 'Nein' }}</strong></p>
                     <p>Kabellänge-Doku: <strong>{{ config.requireCableLength ? 'Ja' : 'Nein' }}</strong></p>
                     <p>Kabeltyp-Doku: <strong>{{ config.requireCableType ? 'Ja' : 'Nein' }}</strong></p>
+                    <p>Technische Daten: <strong>{{ config.showTechnicalData ? 'Ja' : 'Nein' }}</strong></p>
                   </div>
                 </div>
                 <div class="col-md-6">
@@ -333,6 +336,7 @@ Vue.component('workorder-tenant-config', {
                     civilEngineeringDocsRequired: 0,
                     requireCableLength: 0,
                     requireCableType: 0,
+                    showTechnicalData: 0,
                     enableWorkorder: 1,
                     enableWorkorderMph: 1
                 }

public/mobile/modules/workorder/WorkorderModule.js

@@ -31,6 +31,7 @@ export default {
         const documentation = ref({ docs: [], journals: [] });
         const tenantConfig = ref(null);
         const checklist = ref([]);
+        const technicalData = ref(null);
 
         // Expanded cards state
         const expandedCards = ref({
@@ -39,7 +40,8 @@ export default {
             documentation: false,
             notes: false,
             journal: false,
-            cableData: false
+            cableData: false,
+            technical: true
         });
 
         // Edit states
@@ -52,6 +54,9 @@ export default {
         const showDocUploadSheet = ref(false);
         const showProblemSheet = ref(false);
         const showCompleteSheet = ref(false);
+        const showPdfViewer = ref(false);
+        const pdfViewerUrl = ref('');
+        const pdfViewerTitle = ref('');
 
         // Upload state
         const uploadDocType = ref('');
@@ -198,7 +203,7 @@ export default {
         const openDetail = async (workorder) => {
             selectedWorkorder.value = workorder;
             isDetailLoading.value = true;
-            expandedCards.value = { customer: true, checklist: true, documentation: false, notes: false, journal: false, cableData: false };
+            expandedCards.value = { customer: true, checklist: true, documentation: false, notes: false, journal: false, cableData: false, technical: true };
             emit('detail-open', workorder.id);
 
             try {
@@ -215,6 +220,7 @@ export default {
                     documentation.value = { docs: data.docs, journals: data.journals };
                     tenantConfig.value = data.tenantConfig;
                     checklist.value = data.checklist;
+                    technicalData.value = data.technicalData || null;
                 } else {
                     emit('toast', data.message || 'Fehler beim Laden', 'error');
                 }
@@ -231,6 +237,7 @@ export default {
             documentation.value = { docs: [], journals: [] };
             tenantConfig.value = null;
             checklist.value = [];
+            technicalData.value = null;
             isEditingNotes.value = false;
             emit('detail-close');
         };
@@ -617,6 +624,13 @@ export default {
             // Button is disabled when not complete, so this won't be called
         };
 
+        // Open PDF in viewer
+        const openPdfViewer = (url, title) => {
+            pdfViewerUrl.value = url;
+            pdfViewerTitle.value = title || 'PDF';
+            showPdfViewer.value = true;
+        };
+
         // Initialize
         onMounted(() => {
             fetchWorkorders();
@@ -636,6 +650,7 @@ export default {
             documentation,
             tenantConfig,
             checklist,
+            technicalData,
             expandedCards,
             isEditingNotes,
             tempNotes,
@@ -644,6 +659,9 @@ export default {
             showDocUploadSheet,
             showProblemSheet,
             showCompleteSheet,
+            showPdfViewer,
+            pdfViewerUrl,
+            pdfViewerTitle,
             uploadDocType,
             isUploading,
             fileInputRef,
@@ -678,6 +696,7 @@ export default {
             openNavigation,
             callCustomer,
             handleComplete,
+            openPdfViewer,
             handleTouchStart,
             handleTouchMove,
             handleTouchEnd,
@@ -906,6 +925,63 @@ export default {
                             </div>
                         </div>
 
+                        <!-- Technical Data Card -->
+                        <div v-if="technicalData && (technicalData.patchposition?.equipmentName || technicalData.rimoWorkorders?.length)"
+                             class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden card-contrast">
+                            <button
+                                @click="toggleCard('technical')"
+                                class="w-full flex items-center justify-between p-4 text-left"
+                            >
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 bg-purple-500/10 rounded-lg flex items-center justify-center mr-3">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
+                                        </svg>
+                                    </div>
+                                    <span class="font-semibold text-slate-800 dark:text-white">Technische Daten</span>
+                                </div>
+                                <svg xmlns="http://www.w3.org/2000/svg" :class="['h-5 w-5 text-slate-400 transition-transform', expandedCards.technical ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                                </svg>
+                            </button>
+                            <div v-if="expandedCards.technical" class="px-4 pb-4 space-y-3">
+                                <!-- Patchposition -->
+                                <div v-if="technicalData.patchposition?.equipmentName" class="space-y-2">
+                                    <div class="text-sm font-medium text-slate-500 dark:text-slate-400">Patchposition</div>
+                                    <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-3 space-y-1">
+                                        <div class="flex justify-between">
+                                            <span class="text-slate-500 dark:text-slate-400 text-sm">Equipment Name:</span>
+                                            <span class="font-mono text-slate-900 dark:text-white">{{ technicalData.patchposition.equipmentName }}</span>
+                                        </div>
+                                        <div v-if="technicalData.patchposition.equipmentPort" class="flex justify-between">
+                                            <span class="text-slate-500 dark:text-slate-400 text-sm">Equipment Port:</span>
+                                            <span class="font-mono text-slate-900 dark:text-white">{{ technicalData.patchposition.equipmentPort }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- AHA Blätter -->
+                                <div v-if="technicalData.rimoWorkorders?.length" class="space-y-2">
+                                    <div class="text-sm font-medium text-slate-500 dark:text-slate-400">AHA Blätter</div>
+                                    <div v-for="wo in technicalData.rimoWorkorders" :key="wo.id"
+                                         class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-3 flex items-center justify-between">
+                                        <div>
+                                            <div class="font-medium text-slate-900 dark:text-white">{{ wo.rimoName }}</div>
+                                            <div class="text-xs text-slate-500 dark:text-slate-400">Status: {{ wo.rimoStatus }}</div>
+                                        </div>
+                                        <button @click="openPdfViewer(wo.downloadUrl, wo.rimoName)"
+                                           class="flex items-center gap-2 px-3 py-2 bg-primary text-white rounded-lg text-sm font-medium active:scale-95 transition">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                                            </svg>
+                                            AHA
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                         <!-- Checklist Card -->
                         <div class="bg-white dark:bg-slate-800 rounded-xl overflow-hidden card-contrast">
                             <button
@@ -1373,6 +1449,40 @@ export default {
                 </transition>
             </teleport>
 
+            <!-- PDF Viewer Modal -->
+            <teleport to="body">
+                <transition name="fade">
+                    <div v-if="showPdfViewer" class="fixed inset-0 z-50 flex flex-col bg-white dark:bg-slate-900">
+                        <!-- Header -->
+                        <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex-shrink-0" style="padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));">
+                            <h3 class="text-lg font-semibold text-slate-800 dark:text-white truncate flex-1 mr-4">{{ pdfViewerTitle }}</h3>
+                            <button @click="showPdfViewer = false" class="p-2 -mr-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        </div>
+                        <!-- PDF Content -->
+                        <div class="flex-1 overflow-hidden bg-slate-100 dark:bg-slate-800">
+                            <iframe
+                                :src="pdfViewerUrl + (pdfViewerUrl.includes('?') ? '&' : '?') + 'inline=1'"
+                                class="w-full h-full border-0"
+                                style="min-height: 100%;"
+                            ></iframe>
+                        </div>
+                        <!-- Footer with download option -->
+                        <div class="flex-shrink-0 px-4 py-3 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700" style="padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));">
+                            <a :href="pdfViewerUrl" download class="w-full py-3 bg-primary text-white rounded-xl font-medium flex items-center justify-center gap-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                </svg>
+                                Download
+                            </a>
+                        </div>
+                    </div>
+                </transition>
+            </teleport>
+
             <input
                 ref="fileInputRef"
                 type="file"