v0.1.28 — Umbenennen beim Import, UI-Fixes, Geraete-Export repariert

Neu:
- Umbenennen beim Import: Policy-Name vor dem Anlegen anpassbar
  (Dialog "Policies importieren"), richtiges Namensfeld je Typ

Behoben:
- Geraete-Export im App Report: entfernter sync-Endpoint
  getDeviceInstallStatusReport (400) -> async Export-Job
  DeviceInstallStatusByApp; ZIP/CSV-Logik in Get-IntuneReportRows
- Darkmode-Kontrast im Zuweisungs-Dialog (Theme-Variablen statt fester Farben)
- Dialog-Breite: lange Policy-Namen brechen um statt H-Scroll

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

www/app.js

@@ -5920,6 +5920,13 @@ function polExtractEnvelopes(parsed, fileName) {
   return [];
 }
 
+let _polImportEnvelopes = [];
+
+function polEnvName(env) {
+  return env.policyName || (env.policy && (env.policy.name || env.policy.displayName)) || '(ohne Name)';
+}
+
+// Dateien einlesen -> Rename-Dialog oeffnen (der eigentliche Import folgt dort).
 async function polHandleImportFiles(fileList) {
   const files = [...fileList];
   if (!files.length) return;
@@ -5931,10 +5938,36 @@ async function polHandleImportFiles(fileList) {
     envelopes = envelopes.concat(polExtractEnvelopes(parsed, f.name));
   }
   if (!envelopes.length) return;
-  if (!window.confirm(`${envelopes.length} Policy(s) als NEUE Policies im verbundenen Tenant anlegen?\n\nBestehende Policies werden dabei nicht verändert.`)) return;
+  _polImportEnvelopes = envelopes;
+  renderPolImportList();
+  openModal('modalPolImport');
+}
+
+function renderPolImportList() {
+  const list = document.getElementById('polImportList');
+  if (!list) return;
+  list.innerHTML = _polImportEnvelopes.map((env, i) => {
+    const type = env.exportType || env.policyType || '';
+    return `<div class="pol-import-row">
+      <input class="input pol-import-name" data-idx="${i}" value="${escapeHtml(polEnvName(env))}" placeholder="Policy-Name">
+      <span class="pol-type-badge">${escapeHtml(POL_TYPE_LABELS[type] || type || 'Policy')}</span>
+    </div>`;
+  }).join('');
+  const info = document.getElementById('polImportInfo');
+  if (info) info.textContent = `${_polImportEnvelopes.length} Policy(s)`;
+}
+
+async function polDoImport() {
+  // Geänderte Namen übernehmen (nur wenn nicht leer und wirklich anders).
+  _polImportEnvelopes.forEach((env, i) => {
+    const input = document.querySelector(`.pol-import-name[data-idx="${i}"]`);
+    const nn = input ? input.value.trim() : '';
+    if (nn && nn !== polEnvName(env)) env.newName = nn; else delete env.newName;
+  });
+  closeModal('modalPolImport');
   setLoading('Importiere Policies…');
   try {
-    const res = await api('/api/policies/import', { method: 'POST', body: { policies: envelopes }, timeoutMs: 180000 });
+    const res = await api('/api/policies/import', { method: 'POST', body: { policies: _polImportEnvelopes }, timeoutMs: 180000 });
     const results = res.results || [];
     const ok = results.filter(r => r.success);
     const fail = results.filter(r => !r.success);
@@ -5954,6 +5987,7 @@ async function polHandleImportFiles(fileList) {
     clearLoading();
   }
 }
+document.getElementById('polImportConfirm')?.addEventListener('click', polDoImport);
 
 // =============================================================
 // Post-Import: Policies pro Stück Include-/Exclude-Gruppen zuweisen

www/index.html

@@ -813,6 +813,29 @@
   </div>
 </div>
 
+<!-- MODAL: Policy-Import (optional umbenennen) -->
+<div id="modalPolImport" class="modal hidden">
+  <div class="modal-backdrop" data-close></div>
+  <div class="modal-box modal-lg">
+    <div class="modal-head">
+      <h3>Policies importieren</h3>
+      <button class="modal-close" data-close aria-label="Schließen">×</button>
+    </div>
+    <div class="modal-body">
+      <div class="form-hint" style="margin-bottom:12px;">
+        Namen können vor dem Import angepasst werden. Die Policies werden als
+        <b>Neuanlage</b> im verbundenen Tenant erstellt — bestehende bleiben unverändert.
+      </div>
+      <div id="polImportList"></div>
+    </div>
+    <div class="modal-foot">
+      <span id="polImportInfo" class="muted" style="margin-right:auto;"></span>
+      <button class="btn btn-secondary" data-close>Abbrechen</button>
+      <button class="btn btn-primary" id="polImportConfirm">Importieren</button>
+    </div>
+  </div>
+</div>
+
 <!-- MODAL: Policy-Zuweisung nach Import -->
 <div id="modalPolAssign" class="modal hidden">
   <div class="modal-backdrop" data-close></div>
@@ -836,27 +859,33 @@
   </div>
 </div>
 <style>
-  .pol-assign-row { border:1px solid var(--border, #d9dce3); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
-  .pol-assign-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
-  .pol-assign-head .pol-name { font-weight:600; }
+  /* Nutzt die Theme-Variablen der App -> passt sich Light/Dark automatisch an. */
+  .pol-assign-row { border:1px solid var(--hairline); border-radius:8px; padding:12px 14px; margin-bottom:12px; overflow-wrap:anywhere; }
+  .pol-assign-head { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
+  .pol-assign-head .pol-name { font-weight:600; color:var(--ink); min-width:0; word-break:break-word; overflow-wrap:anywhere; }
+  .pol-assign-head .pol-type-badge { flex:0 0 auto; }
   .pol-assign-pickers { display:flex; gap:16px; flex-wrap:wrap; }
   .pol-assign-picker { flex:1; min-width:220px; }
-  .pol-assign-picker > .lbl { display:block; font-size:12px; margin-bottom:4px; opacity:.85; }
-  .pol-assign-picker[data-kind="exclude"] > .lbl { color:#cb2a7a; }
+  .pol-assign-picker > .lbl { display:block; font-size:12px; margin-bottom:4px; color:var(--body); }
+  .pol-assign-picker[data-kind="exclude"] > .lbl { color:var(--pink); }
   .pol-assign-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
   .pol-assign-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:12px;
-    background:var(--chip-bg, #eef0f5); font-size:12px; }
-  .pol-assign-chip.exclude { background:#fbe3ef; }
-  .pol-assign-chip button { border:none; background:none; cursor:pointer; font-size:14px; line-height:1; padding:0; opacity:.6; }
-  .pol-assign-chip button:hover { opacity:1; }
+    background:var(--surface-strong); color:var(--ink); font-size:12px; }
+  .pol-assign-chip.exclude { background:rgba(236,72,153,0.18); color:var(--ink); }
+  .pol-assign-chip button { border:none; background:none; cursor:pointer; font-size:14px; line-height:1; padding:0; color:var(--muted); }
+  .pol-assign-chip button:hover { color:var(--ink); }
   .pol-assign-search-wrap { position:relative; }
   .pol-assign-dropdown { position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:2px;
-    background:var(--panel, #fff); border:1px solid var(--border, #d9dce3); border-radius:6px;
-    max-height:200px; overflow-y:auto; box-shadow:0 6px 18px rgba(0,0,0,.12); }
-  .pol-assign-dropdown .opt { padding:6px 10px; cursor:pointer; font-size:13px; }
-  .pol-assign-dropdown .opt:hover { background:var(--chip-bg, #eef0f5); }
-  .pol-assign-dropdown .opt .desc { font-size:11px; opacity:.6; }
-  .pol-assign-dropdown .msg { padding:6px 10px; font-size:12px; opacity:.6; }
+    background:var(--canvas); border:1px solid var(--hairline); border-radius:6px;
+    max-height:200px; overflow-y:auto; box-shadow:0 6px 18px rgba(0,0,0,.25); }
+  .pol-assign-dropdown .opt { padding:6px 10px; cursor:pointer; font-size:13px; color:var(--body); }
+  .pol-assign-dropdown .opt:hover { background:var(--surface-soft); }
+  .pol-assign-dropdown .opt .desc { font-size:11px; color:var(--muted); }
+  .pol-assign-dropdown .msg { padding:6px 10px; font-size:12px; color:var(--muted); }
+  .pol-import-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hairline); }
+  .pol-import-row:last-child { border-bottom:none; }
+  .pol-import-name { flex:1; min-width:0; }
+  .pol-import-row .pol-type-badge { flex:0 0 auto; }
 </style>
 
 <!-- MODAL: Hilfe -->