Radius/add network structure

public/js/pages/Radius/Radius.css

@@ -1,249 +1,246 @@
-/* ===== Radius.css ===== */
-:root{ --brand-blue: #005384; --bg: #ffffff; --card: #ffffff; --card-2: #f8fafc; --muted: #667085; --text: #0b1320; --accent: var(--brand-blue); --accent-2: #1e88c9; --ok: #0f9d58; --bad: #e03131; --ring: rgba(0,83,132,.20); --border: #e6e9ef; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 10px; --radius-pill: 999px; --shadow: 0 8px 24px rgba(0, 83, 132, .08); }
-.radius-scope a.link { color: var(--accent); text-decoration: none; font-weight: 500; transition: color .2s ease; }
-.radius-scope a.link:hover { color: var(--accent-2); text-decoration: underline; }
-.radius-scope .muted { color: var(--muted); }
-.radius-scope .small { font-size: 12px; }
-.radius-scope .mini { font-size: 11px; }
-.radius-scope .mono { font-family: var(--mono); }
-.radius-scope .center { text-align: center; }
-.radius-scope .p-sm { padding: .5rem; }
-.radius-scope .p-lg { padding: 1.25rem; }
-.radius-scope .mt-2 { margin-top: .5rem; }
-.radius-scope .mt-3 { margin-top: .75rem; }
-.radius-scope .mt-between { margin-top: 12px; }
-.radius-scope .nowrap { white-space: nowrap; }
-.radius-scope .inline-copy { display:flex; align-items:center; gap:8px; justify-content: flex-end; }
-.radius-scope .grid { display:grid; }
-.radius-scope .g-2 { gap: 8px; }
-.radius-scope .g-3 { gap: 12px; }
-.radius-scope .g-4 { gap: 16px; }
-.radius-scope .g-6 { gap: 24px; }
-.radius-scope .cols-1 { grid-template-columns: 1fr; }
-.radius-scope .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
-.radius-scope .cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
-.radius-scope .cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
-@media (max-width: 900px){ .radius-scope .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
-@media (max-width: 600px){ .radius-scope .cols-4 { grid-template-columns: 1fr; } }
-@media (min-width: 900px){ .radius-scope .cols-2@lg { grid-template-columns: repeat(2, minmax(0,1fr)); } .radius-scope .cols-4@lg { grid-template-columns: repeat(4, minmax(0,1fr)); } }
-@media (min-width: 1200px){ .radius-scope .cols-2-xl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
-@media (max-width: 899.98px){ .radius-scope .cols-1@sm { grid-template-columns: 1fr; } }
-.radius-scope .badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#eef6fb; color:#0b3a57; font-size:12px; border:1px solid #d6e8f5; }
-.radius-scope .h4 { font-size:18px; font-weight:800; letter-spacing:.2px; user-select: none; }
-.radius-scope .h5 { font-size:16px; font-weight:800; letter-spacing:.2px; user-select: none; }
-.radius-scope .cluster { display:flex; gap:10px; flex-wrap:wrap; align-items: center; }
-.radius-scope.radius-container { background: transparent; color: var(--text); display: grid; gap: 16px; max-width: 90vw; margin: 0 auto; padding: 20px 0; }
-.radius-scope .card, .radius-scope .subcard, .radius-scope .progress-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
-.radius-scope .card { padding: 14px; }
-.radius-scope .subcard { padding: 12px; }
-.radius-scope .pane-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: wrap;}
-.radius-scope .pane-header .title { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size: 18px; user-select: none; }
-.radius-scope .logo-dot { width:14px; height:14px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #37d26b, #0f9d58 70%); box-shadow: 0 0 0 3px rgba(15,157,88,.15); display:inline-block; }
-.radius-scope .view-tabs { display:flex; gap:8px; flex-wrap:wrap; }
-.radius-scope .view-select-wrap { display: none; }
-.radius-scope .content-divider { border: none; height: 1px; background-color: var(--border); margin: 16px 0; }
-@media (max-width: 800px) { .radius-scope .view-tabs { display: none; } .radius-scope .view-select-wrap { display: block; } }
-.radius-scope .tab-btn, .radius-scope .primary-btn, .radius-scope .ghost-btn, .radius-scope .icon-btn, .radius-scope .link-btn, .radius-scope .danger-btn { appearance:none; outline:none; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; user-select: none; }
-.radius-scope .tab-btn { padding: 8px 12px; border-radius: var(--radius-pill); background: #f4f7fb; color: var(--text); border: 1px solid var(--border); }
-.radius-scope .tab-btn.active, .radius-scope .tab-btn:hover { background: #eef6fb; border-color: #d6e8f5; box-shadow: 0 0 0 4px var(--ring); transform: scale(0.98); }
-.radius-scope .tab-btn:disabled { opacity: .6; cursor: not-allowed; background: #f4f7fb; border-color: var(--border); box-shadow: none; transform: none; }
-.radius-scope .primary-btn { padding: 8px 14px; border-radius: var(--radius); color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px rgba(0,83,132,.25); height: 38px; display: inline-flex; align-items: center; justify-content: center; }
-.radius-scope .primary-btn:disabled { opacity:.6; cursor:not-allowed; }
-.radius-scope .ghost-btn { padding: 8px 12px; border-radius: var(--radius); color: var(--accent); background: #f8fbff; border:1px dashed #cfe4f3; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
-.radius-scope .danger-btn { padding: 8px 12px; border-radius: var(--radius); color: #c92a2a; background: #fff5f5; border: 1px dashed #ffc9c9; opacity: .9; transition: opacity .2s ease-in-out, transform .1s ease-in-out; }
-.radius-scope .danger-btn:hover { opacity: 1; }
-.radius-scope .danger-btn:active { transform: scale(0.97); }
-.radius-scope .primary-btn:not(:disabled):hover, .radius-scope .ghost-btn:not(:disabled):hover, .radius-scope .danger-btn:not(:disabled):hover { transform: translateY(-2px); }
-.radius-scope .primary-btn:not(:disabled):hover { box-shadow: 0 8px 22px rgba(0,83,132,.3); }
-.radius-scope .icon-btn { background: transparent; color: var(--muted); padding: 6px 8px; border-radius:8px; }
-.radius-scope .icon-btn.sm { padding: 4px 6px; }
-.radius-scope .icon-btn:hover { color: var(--text); background:#f2f6fa; }
-.radius-scope .link-btn { background: transparent; color: var(--accent); text-decoration: underline; }
-@keyframes copy-feedback-pop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
-.radius-scope [data-tooltip="Kopieren"], .radius-scope .ros-chip.is-clickable { user-select: none; -webkit-user-select: none; }
-.radius-scope .icon-btn .check-icon { display: none; }
-.radius-scope .icon-btn.is-copied, .radius-scope .icon-btn.is-copied:hover { background-color: #eaf7ef; color: var(--ok); animation: copy-feedback-pop 0.3s ease-in-out; }
-.radius-scope .icon-btn.is-copied .copy-icon { display: none; }
-.radius-scope .icon-btn.is-copied .check-icon { display: inline-block; }
-.radius-scope .input-wrap { position: relative; }
-.radius-scope .ri { box-sizing: border-box; width: 100%; padding: 8px 38px 8px 36px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; color: var(--text); transition: box-shadow .15s ease, border-color .15s ease, background .15s ease; }
-.radius-scope .ac-root .ri { padding: 8px 38px 8px 75px; }
-.radius-scope .ri:hover:not(:focus) { border-color: #c4d1de; }
-.radius-scope .ri:focus { border-color: #bcd9ee; box-shadow: 0 0 0 5px var(--ring); outline: none; background: #fbfeff; }
-.radius-scope .ri::placeholder{ color:#9aa6b2; }
-.radius-scope .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color:#7997ad; font-size: 14px; pointer-events: none; }
-.radius-scope .input-icon-logo { height: 20px; width: auto; opacity: 0.9; }
-.radius-scope .btn-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color:#5a7891; cursor: pointer; transition: all .2s ease; opacity: 1; }
-.radius-scope .btn-clear:not(:disabled):hover { background:#e8f2f9; color:#2b5c7e; }
-.radius-scope .btn-clear:disabled { background: transparent; color: #c1cbd5; cursor: not-allowed; transform: scale(0.9); opacity: 0.5; }
-.radius-scope .btn-clear:disabled:hover { background: transparent; color: #c1cbd5; }
-.radius-scope .logo-switcher { position: absolute; left: 1px; top: 1px; height: calc(100% - 2px); display: flex; align-items: center; gap: 8px; padding: 0 4px 0 8px; cursor: pointer; border-right: 1px solid var(--border); transition: background-color .2s ease; border-radius: 9px 0 0 9px; user-select: none; }
-.radius-scope .logo-switcher:hover { background-color: #f8fafc; }
-.radius-scope .switcher-caret { font-size: 11px; color: var(--muted); transition: transform .2s ease; }
-.radius-scope .logo-switcher.is-open .switcher-caret { transform: rotate(180deg); }
-.radius-scope .logo-dropdown { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 25; padding: 6px; width: 180px; }
-.radius-scope .logo-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
-.radius-scope .logo-option:hover { background-color: #f3f8fc; }
-.radius-scope .logo-option img { height: 18px; width: auto; }
-.radius-scope .select select { width:100%; padding:10px 12px; border-radius: var(--radius); border:1px solid var(--border); background:#fff; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right .5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; }
-.radius-scope .switch-field { display:flex; flex-direction:column; gap:6px;align-items: center }
-.radius-scope .switch { display:inline-flex; align-items:center; cursor:pointer; user-select:none; }
-.radius-scope .switch input { display:none; }
-.radius-scope .switch .switch-track { position: relative; width: 58px; height: 32px; border-radius: 999px; background: #e8edf3; border: 1px solid #d7e1ea; display:inline-flex; align-items:center; justify-content:space-between; padding: 0 8px; color:#7b8a98; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
-.radius-scope .switch .on { opacity: 0; transition: opacity .18s ease; }
-.radius-scope .switch .off { opacity: 1; transition: opacity .18s ease; }
-.radius-scope .switch .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background:#fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; }
-.radius-scope .switch input:checked + .switch-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: #a9d0ea; color:#fff; }
-.radius-scope .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 5px var(--ring); }
-.radius-scope .switch input:checked + .switch-track::after { transform: translateX(26px); }
-.radius-scope .switch input:checked + .switch-track .on { opacity: 1; }
-.radius-scope .switch input:checked + .switch-track .off { opacity: 0; }
-.radius-scope .ac-root { position: relative; }
-.radius-scope .ac-panel { position: absolute; left: 0; min-width: 100%; width: auto; margin-top: 6px; z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; }
-.radius-scope .ac-panel.wide, .radius-scope [data-wide="1"] .ac-panel { left: -6px; right: auto; }
-.radius-scope .ac-skel .skeleton-line { height: 12px; margin: 8px 0; }
-.radius-scope .ac-empty { padding: 10px; }
-.radius-scope .ac-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
-.radius-scope .ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: transform .1s ease, background-color .1s ease; white-space: nowrap; }
-.radius-scope .ac-item:hover, .radius-scope .ac-item.is-active { background:#f3f8fc; transform: scale(0.99); }
-.radius-scope .ac-more-info { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); background: var(--card-2); font-style: italic; cursor: default; }
-.radius-scope .ac-more-info .txt { color: var(--muted); }
-.radius-scope .ac-pop-enter-active, .radius-scope .ac-pop-leave-active { transition: opacity .12s ease, transform .12s ease; transform-origin: top center; }
-.radius-scope .ac-pop-enter, .radius-scope .ac-pop-leave-to { opacity:0; transform: translateY(-4px) scale(.98); }
-.radius-scope .filters-layout { display: grid; gap: 12px; align-items: flex-end; grid-template-columns: 1.5fr 210px 190px 1fr auto; }
-@media (max-width: 1200px) { .radius-scope .filters-layout { grid-template-columns: 1fr 1fr; } .radius-scope .filters-layout .field:nth-child(1), .radius-scope .filters-layout .field:nth-child(4) { grid-column: 1 / -1; } }
-@media (max-width: 768px) { .radius-scope .filters-layout { grid-template-columns: 1fr; } .radius-scope .filters-layout .field:nth-child(1), .radius-scope .filters-layout .field:nth-child(4) { grid-column: auto; } }
-.radius-scope .field label { display:block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
-.radius-scope .table-wrap { overflow:auto; border-radius: 12px; border:1px solid var(--border); background: var(--card-2); max-height: 65vh; }
-.radius-scope .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
-.radius-scope .table-wrap::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
-.radius-scope .table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f1f5f9; }
-.radius-scope .table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
-.radius-scope .tt-table { width:100%; min-width: 1000px; border-collapse: collapse; background: #fff; table-layout: fixed; margin-bottom: unset !important; }
-.radius-scope .tt-table.no-min-width { min-width: auto; }
-.radius-scope .tt-table th, .radius-scope .tt-table td { padding: 10px 12px; border-bottom:1px solid #eef1f5; vertical-align: middle; }
-.radius-scope .tt-table thead th { position:sticky; top:0; background:#f6f9fc; font-size:12px; color:#344054; text-transform:uppercase; letter-spacing:.04em; user-select: none; z-index: 10; }
-.radius-scope .tt-table.compact th, .radius-scope .tt-table.compact td { padding:8px 10px; }
-.radius-scope .tt-table.ultra-compact th, .radius-scope .tt-table.ultra-compact td { padding:6px 8px; font-size:12px; }
-.radius-scope .rows-enter-active, .radius-scope .rows-leave-active { transition: opacity .12s ease, transform .12s ease; }
-.radius-scope .rows-enter, .radius-scope .rows-leave-to { opacity:0; transform: translateY(2px); }
-.radius-scope .results-container .table-wrap { border-radius: 12px 12px 0 0; border-bottom: none; }
-.radius-scope .results-summary { padding: 8px 12px; border: 1px solid var(--border); border-top: none; background: #f6f9fc; font-size: 13px; color: var(--muted); border-radius: 0 0 12px 12px; min-height: 38px; display: flex; align-items: center; }
-.radius-scope .table-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-2); text-align: center; color: var(--muted); font-size: 16px; }
-.radius-scope .table-placeholder i { font-size: 32px; color: var(--brand-blue); }
-.radius-scope .row-fade-in { animation: rowIn .22s ease; }
-@keyframes rowIn { from { opacity:0; transform: translateY(2px);} to {opacity:1; transform: none;} }
-.radius-scope .skeleton-line { --h: 12px; height: var(--h); border-radius: 8px; background: linear-gradient(90deg, #eaeef3, #f3f6fa, #eaeef3); background-size: 300% 100%; animation: shimmer 1.1s infinite linear; }
-@keyframes shimmer { 0%{background-position:0% 0} 100%{background-position:100% 0} }
-.radius-scope .btn-loader { width: 18px; height: 18px; border: 2px solid #d5e7f4; border-top-color: var(--brand-blue); border-radius:50%; display:inline-block; animation: spin .9s linear infinite; }
-@keyframes spin { to { transform: rotate(360deg);} }
-.radius-scope.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; padding: 20px; z-index: 9999; }
-.radius-scope .modal-card { width:min(780px, 92vw); max-height: 88vh; overflow:auto; border-radius: 16px; border:1px solid var(--border); background: #fff; }
-.radius-scope .modal-head { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background: #fff; z-index: 10; user-select: none; }
-.radius-scope .modal-title { font-weight:800; }
-.radius-scope .modal-body { padding: 14px 16px; }
-.radius-scope .fade-enter-active, .radius-scope .fade-leave-active { transition: opacity .14s ease; }
-.radius-scope .fade-enter, .radius-scope .fade-leave-to { opacity:0; }
-.radius-scope .pop { animation: pop .16s ease; }
-@keyframes pop { from { transform: scale(.98);} to { transform: none;} }
-.radius-scope .kv { display:grid; grid-template-columns: 180px 1fr; gap: 10px 16px; }
-.radius-scope .kv > div { display: contents; }
-.radius-scope .kv > div > span { color: var(--muted); }
-.radius-scope .kv-redesign { display: flex; flex-direction: column; }
-.radius-scope .kv-redesign .kv-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--border); gap: 16px; }
-.radius-scope .kv-redesign .kv-row:last-child { border-bottom: none; }
-.radius-scope .kv-redesign .kv-label { color: var(--muted); flex-shrink: 0; width: 140px; }
-.radius-scope .kv-redesign .kv-value { flex-grow: 1; text-align: right; word-break: break-all; min-width: 0; }
-.radius-scope .kv-redesign .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); }
-.radius-scope .kv-redesign .chip.ok { background: #eaf7ef; color:#206a42; border-color: #c9e6d8; }
-.radius-scope .kv-redesign .chip.bad { background: #fdecec; color:#8a1d1d; border-color: #f6d2d2; }
-.radius-scope .ros-wrap { min-height: 28px; display:flex; align-items:center; justify-content:flex-start; width: 170px; }
-.radius-scope .ros-chip { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius: var(--radius); font-size:12px; font-family: var(--mono); border:1px solid var(--border); background:#fff; width: 100%; height: 28px; box-sizing: border-box; }
-.radius-scope .ros-chip.is-clickable { cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
-.radius-scope .ros-chip.is-clickable:hover { background-color: #f3f8fc; }
-.radius-scope .ros-chip.on { box-shadow: 0 0 0 3px rgba(15,157,88,.08); }
-.radius-scope .ros-chip.off { box-shadow: 0 0 0 3px rgba(224,49,49,.08); }
-.radius-scope .ros-chip .dot { width:8px; height:8px; border-radius:50%; background: currentColor; color: inherit; flex-shrink: 0; }
-.radius-scope .ros-chip.on .dot { background: var(--ok); }
-.radius-scope .ros-chip.off .dot { background: var(--bad); }
-.radius-scope .ros-chip .ip { flex-grow: 1; text-align: center; }
-.radius-scope .ros-chip.skeleton { background: #f8fafc; color: #d1d9e4; align-items: center; }
-.radius-scope .ros-chip.is-copied { background-color: #eaf7ef; border-color: #c9e6d8; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.25); animation: copy-feedback-pop 0.3s ease-in-out; }
-.radius-scope .ont-card .block { background: #fff; border:1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
-.radius-scope .ont-card .block + .block { margin-top: 12px; }
-.radius-scope .block-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; flex-wrap: wrap; }
-.radius-scope .file-drop { display: flex; align-items: center; justify-content: center; border: 2px dashed #cfe4f3; border-radius: var(--radius); padding: 20px; text-align: center; background: #f8fbff; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease; min-height: 150px; }
-.radius-scope .file-drop.is-dragover { transform: scale(1.02); border-color: var(--accent); background-color: #f0f8ff; box-shadow: 0 0 0 5px var(--ring); }
-.radius-scope .file-cta { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:#365972; }
-.radius-scope .overlay { position:fixed; inset:0; background:rgba(255,255,255,.8); backdrop-filter: blur(4px); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index: 50; text-align: center; }
-.radius-scope .ont-loading-card { background: transparent; border: none; box-shadow: none; width: min(520px, 90vw); padding: 16px; color: var(--text); }
-.radius-scope .spinner-lg { width: 42px; height: 42px; border: 4px solid #dbe9f5; border-top-color: var(--brand-blue); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto 10px; }
-.radius-scope .animated-hourglass { animation: hourglass-turn 2s infinite linear; }
-@keyframes hourglass-turn { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-.radius-scope .progress-bar { height: 8px; background:#eef4f8; border-radius:999px; overflow:hidden; border:1px solid #e2ebf3; }
-.radius-scope .progress-bar .bar { height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s ease; }
-.radius-scope .progress-bar.is-yellow .bar { background: linear-gradient(90deg, #f7b733, #fc4a1a); }
-.radius-scope .alert.error { padding:10px 12px; border-radius:10px; border:1px solid #ffd6d6; background:#fff3f3; color:#8a1d1d; }
-.radius-scope .card-in { animation: cardIn .18s ease; }
-@keyframes cardIn { from{ opacity:0; transform: translateY(4px);} to { opacity:1; transform: none;} }
-[data-tooltip] { position: relative; }
-[data-tooltip]::before, [data-tooltip]::after { position: absolute; left: 50%; transform: translateX(-50%) translateY(0); opacity: 0; pointer-events: none; transition: all .18s ease-in-out; z-index: 10001; }
-[data-tooltip]::before { content: ''; bottom: 100%; border: 5px solid transparent; border-top-color: #0b1320; }
-[data-tooltip]::after { content: attr(data-tooltip); bottom: calc(100% + 5px); padding: 4px 8px; border-radius: 6px; background: #0b1320; color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
-[data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(-4px); }
-[data-tooltip-align="right"]::after { left: 0; transform: translateX(0); }
-[data-tooltip-align="right"]::before { left: 1em; transform: translateX(-50%); }
-[data-tooltip-align="right"]:hover::after, [data-tooltip-align="right"]:hover::before { transform: translateX(0) translateY(-4px); }
-[data-tooltip-align="right"]:hover::before { transform: translateX(-50%) translateY(-4px); }
-[data-tooltip-align="left"]::after { left: auto; right: 0; transform: translateX(0); }
-[data-tooltip-align="left"]::before { left: auto; right: 1em; transform: translateX(-50%); }
-[data-tooltip-align="left"]:hover::after, [data-tooltip-align="left"]:hover::before { transform: translateX(0) translateY(-4px); }
-[data-tooltip-align="left"]:hover::before { transform: translateX(-50%) translateY(-4px); }
-[data-tooltip-align="bottom"]::after { top: calc(100% + 5px); bottom: auto; }
-[data-tooltip-align="bottom"]::before { top: 100%; bottom: auto; border-top-color: transparent; border-bottom-color: #0b1320; }
-[data-tooltip-align="bottom"]:hover::before, [data-tooltip-align="bottom"]:hover::after { transform: translateX(-50%) translateY(4px); }
-[data-tooltip-wrap="true"]::after { white-space: normal; max-width: 220px; text-align: center; }
-/* NEW RULE FOR BOTTOM-LEFT ALIGNMENT */
-[data-tooltip-align="bottom-left"]::after { top: calc(100% + 5px); bottom: auto; left: auto; right: 0; transform: translateX(0); }
-[data-tooltip-align="bottom-left"]::before { top: 100%; bottom: auto; border-top-color: transparent; border-bottom-color: #0b1320; left: auto; right: 1em; transform: translateX(50%); }
-[data-tooltip-align="bottom-left"]:hover::after, [data-tooltip-align="bottom-left"]:hover::before { transform: translateY(4px); }
-[data-tooltip-align="bottom-left"]:hover::before { transform: translateX(50%) translateY(4px); }
-.radius-scope .ip-field-wrapper, .radius-scope .ac-root { position: relative; }
-.radius-scope .ip-focus-tooltip, .radius-scope .ac-focus-tooltip { position: absolute; bottom: calc(100% + 4px); left: 0; background: #f8fbff; border: 1px solid #cfe4f3; padding: 4px 8px; border-radius: 6px; font-size: 11px; color: var(--accent); white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: all .18s ease-in-out; z-index: 10; }
-.radius-scope .ip-field-wrapper:focus-within .ip-focus-tooltip, .radius-scope .ac-root:focus-within .ac-focus-tooltip { opacity: 1; transform: translateY(0); }
-.radius-scope .modal-card-wide { width: min(1100px, 92vw); }
-.radius-scope .modal-body-scrollable { max-height: calc(90vh - 120px); overflow-y: auto; padding-right: 8px; }
-.radius-scope .unselectable { user-select: none; }
-.radius-scope .custom-dropdown { position: relative; width: 120px; }
-.radius-scope .dropdown-toggle { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; cursor: pointer; font-weight: 700; transition: all .2s ease; height: 38px; box-sizing: border-box; }
-.radius-scope .dropdown-toggle:hover { border-color: #c4d1de; }
-.radius-scope .dropdown-toggle:focus, .radius-scope .dropdown-toggle.is-open { border-color: #bcd9ee; box-shadow: 0 0 0 5px var(--ring); outline: none; }
-.radius-scope .dropdown-toggle .fa-chevron-down { font-size: 12px; transition: transform .2s ease; }
-.radius-scope .dropdown-toggle.is-open .fa-chevron-down { transform: rotate(180deg); }
-.radius-scope .dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 25; padding: 6px; max-height: 200px; overflow-y: auto; }
-.radius-scope .dropdown-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; }
-.radius-scope .dropdown-item:hover, .radius-scope .dropdown-item.is-active { background-color: #f3f8fc; }
-.radius-scope .stat-card-v2 { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 16px; background-color: var(--card-2); }
-.radius-scope .stat-card-v2 .stat-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
-.radius-scope .stat-card-v2 .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
-.radius-scope .stat-card-v2 .stat-value { font-size: 18px; font-weight: 700; line-height: 1.2; font-family: var(--mono); }
-.radius-scope .stat-card-v2.stat-total .stat-icon { background-color: #eef2f6; color: #334155; }
-.radius-scope .stat-card-v2.stat-total .stat-value { color: var(--text); }
-.radius-scope .stat-card-v2.stat-download .stat-icon { background-color: #dcfce7; color: #16a34a; }
-.radius-scope .stat-card-v2.stat-download .stat-value { color: #15803d; }
-.radius-scope .stat-card-v2.stat-upload .stat-icon { background-color: #e0f2fe; color: #0284c7; }
-.radius-scope .stat-card-v2.stat-upload .stat-value { color: var(--accent); }
-.radius-scope .stat-card-v2.stat-duration .stat-icon { background-color: #eef2f6; color: #334155; }
-.radius-scope .stat-card-v2.stat-duration .stat-value { color: var(--text); }
-.radius-scope .stat-card-v2-skeleton { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); }
-.radius-scope .stat-card-v2-skeleton .icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
-.radius-scope .stat-card-v2-skeleton .text { flex-grow: 1; }
-.radius-scope .stat-card-v2-skeleton .label { height: 12px; width: 70%; margin-bottom: 6px; }
-.radius-scope .stat-card-v2-skeleton .value { height: 18px; width: 90%; }
-.radius-scope .chart-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--card-2); position: relative; }
-.radius-scope .chart-card canvas { max-height: calc(250px - 32px); }
-.radius-scope .chart-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
-.radius-scope .chart-placeholder i { font-size: 32px; color: #bdc8d8; }
-.radius-scope .modal-skeleton .skeleton-line { margin-bottom: 12px; }
-.radius-scope .table-placeholder-fixed-height { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted); text-align: center; padding: 20px; background-color: var(--card-2); user-select: none; }
-.radius-scope .table-placeholder-fixed-height i { font-size: 32px; color: #bdc8d8; }
+/* ===== Radius Module Styles ===== */
+/* General utilities moved to tt-core.css - this file contains ONLY Radius-specific styles */
+
+/* CSS Variables for backwards compatibility */
+:root {
+    --brand-blue: #005384;
+    --bg: #ffffff;
+    --card: #ffffff;
+    --card-2: #f8fafc;
+    --muted: #667085;
+    --text: #0b1320;
+    --accent: var(--brand-blue);
+    --accent-2: #1e88c9;
+    --ok: #0f9d58;
+    --bad: #e03131;
+    --ring: rgba(0,83,132,.20);
+    --border: #e6e9ef;
+    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --radius: 10px;
+    --radius-pill: 999px;
+    --shadow: 0 8px 24px rgba(0, 83, 132, .08);
+    --line-offset: 32px;
+}
+
+/* Radius-specific layouts */
+.tt-scope .free-users-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+@media (max-width: 1100px) { .tt-scope .free-users-grid { grid-template-columns: 1fr; } }
+.tt-scope .free-users-column { display: flex; flex-direction: column; gap: 12px; }
+.tt-scope .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef6fb; color: #0b3a57; font-size: 12px; border: 1px solid #d6e8f5; }
+.tt-scope.radius-container { background: transparent; color: var(--text); display: grid; gap: 16px; max-width: 90vw; margin: 24px auto 0; padding: 20px 0; }
+.tt-scope .subcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
+.tt-scope .pane-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #f8fbff 0%, #f0f7fd 100%); padding: 16px 20px; margin: -14px -14px 14px -14px; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 2px solid #e3f0f8; }
+.tt-scope .pane-header .title { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .4px; font-size: 22px; user-select: none; color: var(--accent); text-shadow: 0 1px 2px rgba(0,83,132,.1); }
+.tt-scope .logo-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #37d26b, #0f9d58 70%); box-shadow: 0 0 0 3px rgba(15,157,88,.15); display: inline-block; }
+.tt-scope .content-divider { border: none; height: 1px; background-color: var(--border); margin: 16px 0; }
+
+/* Switch Field */
+.tt-scope .switch-field { display: flex; flex-direction: column; gap: 6px; align-items: center; }
+.tt-scope .switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
+.tt-scope .switch input { display: none; }
+.tt-scope .switch .switch-track { position: relative; width: 58px; height: 32px; border-radius: 999px; background: #e8edf3; border: 1px solid #d7e1ea; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 8px; color: #7b8a98; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
+.tt-scope .switch .on { opacity: 0; transition: opacity .18s ease; }
+.tt-scope .switch .off { opacity: 1; transition: opacity .18s ease; }
+.tt-scope .switch .switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; }
+.tt-scope .switch input:checked + .switch-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: #a9d0ea; color: #fff; }
+.tt-scope .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 5px var(--ring); }
+.tt-scope .switch input:checked + .switch-track::after { transform: translateX(26px); }
+.tt-scope .switch input:checked + .switch-track .on { opacity: 1; }
+.tt-scope .switch input:checked + .switch-track .off { opacity: 0; }
+
+/* Filters Layout */
+.tt-scope .filters-layout { display: grid; gap: 12px; align-items: flex-end; grid-template-columns: 1.5fr 210px 190px 1fr auto; margin-bottom: 16px; }
+@media (max-width: 1400px) { .tt-scope .filters-layout { grid-template-columns: 1fr 1fr 1fr; } .tt-scope .filters-layout .field:nth-child(1) { grid-column: 1 / -1; } }
+@media (max-width: 900px) { .tt-scope .filters-layout { grid-template-columns: 1fr 1fr; } .tt-scope .filters-layout .field:nth-child(1), .tt-scope .filters-layout .field:nth-child(4) { grid-column: 1 / -1; } }
+@media (max-width: 600px) { .tt-scope .filters-layout { grid-template-columns: 1fr; } .tt-scope .filters-layout .field { grid-column: auto !important; } }
+.tt-scope .field label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
+.tt-scope .results-container .table-wrap { border-radius: 12px 12px 0 0; border-bottom: none; }
+.tt-scope .inline-copy { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
+.tt-scope .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.tt-scope .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* KV Layouts */
+.tt-scope .kv { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; }
+.tt-scope .kv > div { display: contents; }
+.tt-scope .kv > div > span { color: var(--muted); }
+
+/* Key-Value Redesign Layout - moved to tt-core.css */
+
+/* Radius Online Status Chip */
+.tt-scope .ros-wrap { min-height: 28px; display: flex; align-items: center; justify-content: flex-start; width: 170px; }
+.tt-scope .ros-chip { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius); font-size: 12px; font-family: var(--mono); border: 1px solid var(--border); background: #fff; width: 100%; height: 28px; box-sizing: border-box; }
+.tt-scope .ros-chip.is-clickable { cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
+.tt-scope .ros-chip.is-clickable:hover { background-color: #f3f8fc; }
+.tt-scope [data-tooltip="Kopieren"], .tt-scope .ros-chip.is-clickable { user-select: none; -webkit-user-select: none; }
+.tt-scope .ros-chip.on { box-shadow: 0 0 0 3px rgba(15,157,88,.08); }
+.tt-scope .ros-chip.off { box-shadow: 0 0 0 3px rgba(224,49,49,.08); }
+.tt-scope .ros-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; color: inherit; flex-shrink: 0; }
+.tt-scope .ros-chip.on .dot { background: var(--ok); }
+.tt-scope .ros-chip.off .dot { background: var(--bad); }
+.tt-scope .ros-chip .ip { flex-grow: 1; text-align: center; }
+.tt-scope .ros-chip.skeleton { background: #f8fafc; color: #d1d9e4; align-items: center; }
+.tt-scope .ros-chip.is-copied { background-color: #eaf7ef; border-color: #c9e6d8; box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.25); animation: copy-feedback-pop 0.3s ease-in-out; }
+
+/* ONT Card Styles */
+.tt-scope .ont-card .block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
+.tt-scope .ont-card .block + .block { margin-top: 12px; }
+.tt-scope .block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
+
+/* Radius-Specific Tooltips */
+.tt-scope .ip-field-wrapper, .tt-scope .ac-root { position: relative; }
+.tt-scope .ip-focus-tooltip, .tt-scope .ac-focus-tooltip { position: absolute; bottom: calc(100% + 8px); left: 0; background: linear-gradient(135deg, #e3f0f8 0%, #d6e8f5 100%); border: 1px solid #b8d9f0; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #0b3a57; white-space: nowrap; opacity: 0; transform: translateY(6px); pointer-events: none; transition: all .22s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 50; box-shadow: 0 4px 12px rgba(0, 83, 132, .15), 0 0 0 1px rgba(255, 255, 255, .8) inset; }
+.tt-scope .ip-focus-tooltip::before, .tt-scope .ac-focus-tooltip::before { content: ''; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: #d6e8f5; transform: translateY(-1px); }
+.tt-scope .ip-focus-tooltip::after, .tt-scope .ac-focus-tooltip::after { content: ''; position: absolute; top: 100%; left: 17px; border: 5px solid transparent; border-top-color: #e3f0f8; }
+.tt-scope .ip-field-wrapper:focus-within .ip-focus-tooltip, .tt-scope .ac-root:focus-within .ac-focus-tooltip { opacity: 1; transform: translateY(0); }
+
+/* Modal & Misc */
+.tt-scope .modal-body-scrollable { max-height: calc(90vh - 120px); overflow-y: auto; padding-right: 8px; overflow-x: hidden; }
+.tt-scope .unselectable { user-select: none; }
+
+/* Custom Dropdown */
+.tt-scope .custom-dropdown { position: relative; width: 120px; }
+.tt-scope .dropdown-toggle { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; cursor: pointer; font-weight: 700; transition: all .2s ease; height: 38px; box-sizing: border-box; }
+.tt-scope .dropdown-toggle:hover { border-color: #c4d1de; }
+.tt-scope .dropdown-toggle:focus, .tt-scope .dropdown-toggle.is-open { border-color: #bcd9ee; box-shadow: 0 0 0 5px var(--ring); outline: none; }
+.tt-scope .dropdown-toggle .fa-chevron-down { font-size: 12px; transition: transform .2s ease; }
+.tt-scope .dropdown-toggle.is-open .fa-chevron-down { transform: rotate(180deg); }
+.tt-scope .dropdown-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 25; padding: 6px; max-height: 200px; overflow-y: auto; }
+.tt-scope .dropdown-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; }
+.tt-scope .dropdown-item:hover, .tt-scope .dropdown-item.is-active { background-color: #f3f8fc; }
+
+/* Stat Cards V2 */
+.tt-scope .stat-card-v2 { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; gap: 16px; background-color: var(--card-2); }
+.tt-scope .stat-card-v2 .stat-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
+.tt-scope .stat-card-v2 .stat-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
+.tt-scope .stat-card-v2 .stat-value { font-size: 18px; font-weight: 700; line-height: 1.2; font-family: var(--mono); }
+.tt-scope .stat-card-v2.stat-total .stat-icon { background-color: #eef2f6; color: #334155; }
+.tt-scope .stat-card-v2.stat-total .stat-value { color: var(--text); }
+.tt-scope .stat-card-v2.stat-download .stat-icon { background-color: #dcfce7; color: #16a34a; }
+.tt-scope .stat-card-v2.stat-download .stat-value { color: #15803d; }
+.tt-scope .stat-card-v2.stat-upload .stat-icon { background-color: #e0f2fe; color: #0284c7; }
+.tt-scope .stat-card-v2.stat-upload .stat-value { color: var(--accent); }
+.tt-scope .stat-card-v2.stat-duration .stat-icon { background-color: #eef2f6; color: #334155; }
+.tt-scope .stat-card-v2.stat-duration .stat-value { color: var(--text); }
+
+/* Chart Card */
+.tt-scope .chart-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--card-2); position: relative; }
+.tt-scope .chart-card canvas { max-height: calc(250px - 32px); }
+.tt-scope .chart-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
+.tt-scope .chart-placeholder i { font-size: 32px; color: #bdc8d8; }
+.tt-scope .table-placeholder-fixed-height { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted); text-align: center; padding: 20px; background-color: var(--card-2); user-select: none; }
+.tt-scope .table-placeholder-fixed-height i { font-size: 32px; color: #bdc8d8; }
+.tt-scope .overlay { position: fixed; inset: 0; background: rgba(255,255,255,.8); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 50; text-align: center; }
+.tt-scope .ont-loading-card { background: transparent; border: none; box-shadow: none; width: min(520px, 90vw); padding: 16px; color: var(--text); }
+.tt-scope .spinner-lg { width: 42px; height: 42px; border: 4px solid #dbe9f5; border-top-color: var(--brand-blue); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto 10px; }
+.tt-scope .alert.error { padding: 10px 12px; border-radius: 10px; border: 1px solid #ffd6d6; background: #fff3f3; color: #8a1d1d; }
+.tt-scope .card-in { animation: cardIn .18s ease; }
+@keyframes cardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+
+/* Network Mesh Visualization */
+.tt-scope .network-tree-container { overflow: auto; padding: 40px; display: inline-flex; justify-content: flex-start; align-items: flex-start; }
+.tt-scope .mesh-node { display: flex; flex-direction: row; align-items: flex-start; position: relative; }
+.tt-scope .mesh-content { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; width: 240px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 10px; z-index: 2; position: relative; transition: all 0.2s ease; margin: 5px 0; }
+.tt-scope .mesh-content:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: #ccc; }
+.tt-scope .mesh-content.is-router { border-color: #005384; background-color: #f0f7fa; }
+.tt-scope .mesh-content.is-repeater { border-color: #0f9d58; background-color: #f0fbf5; }
+.tt-scope .mesh-content.is-offline { opacity: 0.7; filter: grayscale(100%); }
+.tt-scope .mesh-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #555; position: relative; flex-shrink: 0; }
+.tt-scope .conn-badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
+.tt-scope .conn-badge.wlan { color: #005384; }
+.tt-scope .conn-badge.eth { color: #0f9d58; }
+.tt-scope .mesh-info { flex-grow: 1; min-width: 0; }
+.tt-scope .mesh-name { font-weight: 600; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tt-scope .mesh-meta { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
+.tt-scope .mesh-ip, .tt-scope .mesh-mac { font-size: 10px; color: #777; font-family: var(--mono); }
+.tt-scope .mesh-vendor { font-size: 10px; color: var(--accent); font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tt-scope .mesh-details { font-size: 10px; color: #555; margin-top: 4px; background: #eee; padding: 1px 4px; border-radius: 4px; display: inline-block; }
+.tt-scope .mesh-children { display: flex; flex-direction: column; margin-left: 80px; position: relative; justify-content: center; }
+.tt-scope .mesh-branch { display: flex; align-items: center; position: relative; padding-left: 40px; }
+.tt-scope .mesh-branch::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid #ccc; display: block; }
+.tt-scope .mesh-branch::after { content: ''; position: absolute; left: 0; top: var(--line-offset); width: 40px; border-top: 2px solid #ccc; }
+.tt-scope .mesh-branch:first-child::before { top: var(--line-offset); }
+.tt-scope .mesh-branch:last-child::before { bottom: auto; height: var(--line-offset); }
+.tt-scope .mesh-branch:only-child::before { display: none; }
+.tt-scope .mesh-content::before { content: ''; position: absolute; left: -40px; top: var(--line-offset); width: 40px; border-top: 2px solid #ccc; }
+.tt-scope .network-tree-container > .mesh-node > .mesh-content::before { display: none; }
+.tt-scope .mesh-node > .mesh-content:not(:last-child)::after { content: ''; position: absolute; right: -80px; top: var(--line-offset); width: 80px; border-top: 2px solid #ccc; }
+
+/* Tooltip Fixes for Table Actions */
+.tt-scope .table-wrap [data-tooltip]::before,
+.tt-scope .table-wrap [data-tooltip]::after {
+    position: fixed;
+    z-index: 10002;
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]::before,
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]::after {
+    left: auto;
+    right: 100%;
+    transform: translateX(0) translateY(-50%);
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]::before {
+    top: 50%;
+    bottom: auto;
+    border: 5px solid transparent;
+    border-left-color: #0b1320;
+    border-top-color: transparent;
+    margin-right: -10px;
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]::after {
+    top: 50%;
+    bottom: auto;
+    margin-right: -5px;
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]:hover::before,
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="left"]:hover::after {
+    transform: translateX(-4px) translateY(-50%);
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]::before,
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]::after {
+    left: 100%;
+    right: auto;
+    transform: translateX(0) translateY(-50%);
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]::before {
+    top: 50%;
+    bottom: auto;
+    border: 5px solid transparent;
+    border-right-color: #0b1320;
+    border-top-color: transparent;
+    margin-left: -10px;
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]::after {
+    top: 50%;
+    bottom: auto;
+    margin-left: -5px;
+}
+
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]:hover::before,
+.tt-scope .table-wrap [data-tooltip][data-tooltip-align="right"]:hover::after {
+    transform: translateX(4px) translateY(-50%);
+}
+
+/* Router Management Modal */
+.tt-scope .router-info-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; margin: -14px -24px 12px -16px; background: linear-gradient(135deg, #e3f0f8 0%, #cce4f5 100%); border-bottom: 2px solid #b8d9f0; }
+.tt-scope .router-info-header i { font-size: 28px; color: var(--accent); flex-shrink: 0; }
+.tt-scope .router-header-text { flex-grow: 1; min-height: 39px; }
+.tt-scope .router-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: 0.3px; line-height: 1.375; }
+.tt-scope .router-subtitle { font-size: 12px; color: var(--muted); font-family: var(--mono); margin-top: 2px; line-height: 1.25; }
+.tt-scope .router-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; margin-right: -8px; }
+@media (max-width: 700px) { .tt-scope .router-info-grid { grid-template-columns: 1fr; } }
+
+/* Info Card Styles - moved to tt-core.css (TtInfoCard component) */
+
+.tt-scope .router-actions-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); margin-right: -8px; }
+.tt-scope .router-actions-header { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 12px; letter-spacing: 0.3px; text-transform: uppercase; user-select: none; }
+.tt-scope .router-actions-header i { font-size: 14px; color: var(--accent); }
+.tt-scope .router-actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
+@media (max-width: 700px) { .tt-scope .router-actions-grid { grid-template-columns: 1fr; } }
+.tt-scope .action-btn { display: flex; align-items: center; padding: 8px 16px; }
+.tt-scope .action-btn i { width: 20px; flex-shrink: 0; text-align: center; margin-right: 10px; }

public/js/pages/Radius/Radius.js

@@ -1,360 +1,104 @@
-/* ===== Radius.js ===== */
-
-/* ---------- Shared Utilities (global) ---------- */
-function loadScript(src) {
-    return new Promise((resolve, reject) => {
-        if (document.querySelector(`script[src="${src}"]`)) {
-            return resolve();
-        }
-        const script = document.createElement('script');
-        script.src = src;
-        script.onload = resolve;
-        script.onerror = () => reject(new Error(`Script load error for ${src}`));
-        document.head.appendChild(script);
-    });
-}
-async function copyToClipboard(text) {
-    try {
-        await navigator.clipboard.writeText(text || '');
-        return true;
-    } catch {
-        const ta = document.createElement('textarea');
-        ta.value = text || '';
-        ta.style.position = 'fixed'; ta.style.opacity = '0';
-        document.body.appendChild(ta); ta.select();
-        try { document.execCommand('copy'); } catch {}
-        document.body.removeChild(ta);
-        return false;
-    }
-}
-function formatBytes(bytes, decimals = 2) {
-    bytes = parseInt(bytes, 10);
-    if (!bytes || bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-function formatDuration(seconds) {
-    if (!seconds || seconds < 0) return '0s';
-    seconds = parseInt(seconds, 10);
-    const d = Math.floor(seconds / (3600*24));
-    const h = Math.floor(seconds % (3600*24) / 3600);
-    const m = Math.floor(seconds % 3600 / 60);
-    if (d > 0) return `${d}t ${h}h`;
-    if (h > 0) return `${h}h ${m}m`;
-    if (m > 0) return `${m}m`;
-    return `< 1m`;
-}
-function calculateSimilarity(str1, str2) {
-    if (!str1 || !str2) return 0;
-    str1 = ('' + str1).toLowerCase();
-    str2 = ('' + str2).toLowerCase();
-    let match = 0;
-    for (let c of str1) if (str2.includes(c)) match++;
-    return (match / str1.length) * 100;
-}
-function validateData(strasse, plz, stadt, info) {
-    const thresholds = 90;
-    return !(
-        calculateSimilarity(strasse, info) < thresholds ||
-        calculateSimilarity(plz, info) < thresholds ||
-        calculateSimilarity(stadt, info) < thresholds
-    );
-}
-
-window.RadiusUtils = { calculateSimilarity, validateData, copyToClipboard, formatBytes, formatDuration, loadScript };
-
-/* ---------- Reusable Component: radius-table-view ---------- */
-Vue.component('radius-table-view', {
-    props: {
-        items: Array,
-        isLoading: Boolean,
-        hasSearched: Boolean,
-        density: { type: String, default: 'compact' },
-        tableClass: { type: String, default: '' },
-        tableStyle: Object,
-        tableMinHeight: { type: String, default: 'auto' },
-        initialPlaceholderIcon: { type: String, default: 'fa-duotone fa-keyboard' },
-        initialPlaceholderText: { type: String, default: 'Beginnen Sie Ihre Suche.' },
-        noResultsPlaceholderIcon: { type: String, default: 'fa-duotone fa-database' },
-        noResultsPlaceholderText: { type: String, default: 'Keine Ergebnisse gefunden.' },
-        skeletonRowCount: { type: Number, default: 6 }
-    },
-    template: `
-      <div class="table-view-wrapper">
-        <div v-if="!hasSearched" class="table-placeholder" :style="{minHeight: tableMinHeight}">
-          <i :class="initialPlaceholderIcon"></i>
-          <div>{{ initialPlaceholderText }}</div>
-        </div>
-        <div v-else-if="isLoading">
-          <slot name="loading-placeholder">
-            <div class="table-wrap" :style="{maxHeight: '65vh', ...tableStyle}">
-              <table class="tt-table" :class="[density, tableClass]">
-                <slot name="head"></slot>
-                <tbody><tr v-for="n in skeletonRowCount" :key="'skel'+n"><slot name="skeleton-row"></slot></tr></tbody>
-              </table>
-            </div>
-          </slot>
-        </div>
-        <div v-else-if="!items.length" class="table-placeholder" :style="{minHeight: tableMinHeight}">
-          <i :class="noResultsPlaceholderIcon"></i>
-          <div>{{ noResultsPlaceholderText }}</div>
-        </div>
-        <template v-else>
-          <div class="table-wrap" :style="{maxHeight: '65vh', ...tableStyle}">
-            <table class="tt-table" :class="[density, tableClass]">
-              <slot name="head"></slot>
-              <tbody><tr v-for="(item, index) in items" :key="index" class="row-fade-in"><slot name="row" :item="item" :index="index"></slot></tr></tbody>
-            </table>
-            <slot name="observer"></slot>
-          </div>
-        </template>
-      </div>
-    `
-});
-
-/* ---------- Reusable Component: radius-file-drop ---------- */
-Vue.component('radius-file-drop', {
-    data: () => ({ dragCounter: 0 }),
-    computed: { isDragging() { return this.dragCounter > 0; } },
-    template: `
-      <label class="file-drop" :class="{'is-dragover': isDragging}" @dragover.prevent @dragenter.prevent="dragCounter++" @dragleave.prevent="dragCounter--" @drop.prevent="onDrop">
-        <input type="file" accept=".xlsx" @change="$emit('file-selected', $event.target.files[0])" hidden ref="fileInput">
-        <div class="file-cta">
-          <i class="fa-duotone fa-cloud-arrow-up"></i>
-          <div>Hierhin ziehen oder <button type="button" class="link-btn" @click.prevent="$refs.fileInput.click()">Datei auswählen</button></div>
-        </div>
-      </label>
-    `,
-    methods: { onDrop(e) { this.dragCounter = 0; const file = e.dataTransfer.files?.[0]; if (file) this.$emit('file-selected', file); } }
-});
-
-/* ---------- Reusable Component: radius-processing-indicator ---------- */
-Vue.component('radius-processing-indicator', {
-    props: ['progress', 'currentRow', 'totalRows', 'currentSerial'],
-    template: `
-      <div class="table-placeholder">
-        <i class="fa-duotone fa-hourglass-half animated-hourglass" style="font-size: 36px; margin-bottom: 10px; color: var(--brand-blue);"></i>
-        <div class="h5">Verarbeitung läuft...</div>
-        <slot name="description"><p v-if="currentSerial" class="muted small">Aktuell: {{ currentSerial || '—' }}</p></slot>
-        <div class="progress-bar mt-3" style="width: 250px; margin-left: auto; margin-right: auto;"><div class="bar" :style="{width: progress + '%'}"></div></div>
-        <div class="muted small mt-2">Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}</div>
-      </div>
-    `
-});
-
-/* ---------- Online state chip (fetches radacct when visible) ---------- */
-Vue.component('radius-online-state', {
-    props: { username: String },
-    data: () => ({
-        data: null,
-        observed: false,
-        ob: null,
-        isHovering: false,
-        ctrlPressed: false,
-        tooltipText: 'IP-Adresse kopieren'
-    }),
-    template: `
-      <div class="radius-scope ros-wrap" ref="root">
-        <template v-if="data===null">
-          <span class="ros-chip skeleton"><span class="dot"></span><span class="skeleton-line" style="width: 80px; height: 18px; margin: auto;"></span></span>
-        </template>
-        <template v-else-if="data!==null">
-            <span class="ros-chip"
-                  :class="[data.online ? 'on' : 'off', {'is-clickable': data.ip}]"
-                  :data-tooltip="tooltipText"
-                  @click="onClickIp"
-                  @mouseover="onIpMouseOver"
-                  @mouseout="onIpMouseOut"
-            >
-                <span class="dot"></span>
-                <span class="ip">{{ data.ip || '—' }}</span>
-            </span>
-        </template>
-      </div>
-    `,
-    watch: {
-        data(newData) {
-            // Update tooltip text when data is loaded
-            if (newData && newData.ip) {
-                this.tooltipText = 'IP-Adresse kopieren';
-            } else {
-                this.tooltipText = null;
-            }
-        }
-    },
-    mounted() {
-        this.ob = new IntersectionObserver((en) => { if (en[0].isIntersecting && !this.observed) { this.observed = true; this.fetchState(); } }, { threshold: 0.1 });
-        if (this.$refs.root) this.ob.observe(this.$refs.root);
-        // Listen for Ctrl/Meta key presses globally
-        document.addEventListener('keydown', this.handleKey);
-        document.addEventListener('keyup', this.handleKey);
-    },
-    beforeDestroy() {
-        this.ob?.disconnect();
-        // Clean up global listeners
-        document.removeEventListener('keydown', this.handleKey);
-        document.removeEventListener('keyup', this.handleKey);
-    },
-    methods: {
-        async fetchState() {
-            try {
-                const r = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?action2=fetchRadacct&username=${encodeURIComponent(this.username)}`);
-                this.data = r.ok ? await r.json() : { online: false, ip: null };
-            } catch {
-                this.data = { online: false, ip: null };
-            }
-        },
-        async copyIp(event) {
-            if (!this.data?.ip) return;
-            const c = event.currentTarget;
-            if (!c || c.classList.contains('is-copied')) return;
-            await window.RadiusUtils.copyToClipboard(this.data.ip);
-            c.classList.add('is-copied');
-
-            // Temporarily change tooltip to "Kopiert!"
-            const originalTooltip = this.tooltipText;
-            this.tooltipText = 'Kopiert!';
-
-            setTimeout(() => {
-                c.classList.remove('is-copied');
-                // Restore original tooltip
-                this.tooltipText = originalTooltip;
-                // Re-run updateTooltip in case Ctrl is still pressed
-                this.updateTooltip();
-            }, 1500);
-        },
-        // --- New methods for Ctrl+Click ---
-        handleKey(event) {
-            const newCtrlPressed = event.ctrlKey || event.metaKey;
-            if (newCtrlPressed !== this.ctrlPressed) {
-                this.ctrlPressed = newCtrlPressed;
-                // If hovering, update tooltip live
-                if (this.isHovering) {
-                    this.updateTooltip();
-                }
-            }
-        },
-        onIpMouseOver(event) {
-            this.isHovering = true;
-            this.ctrlPressed = event.ctrlKey || event.metaKey;
-            this.updateTooltip();
-        },
-        onIpMouseOut() {
-            this.isHovering = false;
-            this.ctrlPressed = false; // Reset on mouse out
-            this.updateTooltip();
-        },
-        updateTooltip() {
-            if (!this.data?.ip) {
-                this.tooltipText = null;
-            } else if (this.isHovering && this.ctrlPressed) {
-                this.tooltipText = 'Scan starten & verbinden';
-            } else {
-                this.tooltipText = 'IP-Adresse kopieren';
-            }
-        },
-        onClickIp(event) {
-            if (!this.data?.ip) return;
-
-            if (event.ctrlKey || event.metaKey) {
-                // Ctrl+Click or Meta+Click
-                event.preventDefault();
-                this.$emit('scan-ip', { ip: this.data.ip });
-            } else {
-                // Normal click
-                this.copyIp(event);
-            }
-        }
-        // --- End new methods ---
-    }
-});
-
-/* ---------- Autocomplete ---------- */
-Vue.component('radius-autocomplete', {
-    props: { value: String, placeholder: String, wide: { type: Boolean, default: true } }, data() { return { q: this.value || '', open: false, items: {}, highlighted: -1, busy: false, mode: 'autocomplete', logoDropdownOpen: false, hasMoreResults: false }; }, watch: { value(v){ if (v !== this.q) { this.q = v; if (this.mode === 'autocomplete') this.debouncedFetch(); } } },
-    template: `<div class="radius-scope ac-root" :data-wide="wide ? '1' : null" @keydown.down.prevent="mode === 'autocomplete' && move(1)" @keydown.up.prevent="mode === 'autocomplete' && move(-1)" @keydown.enter.prevent="onEnter"><span class="ac-focus-tooltip">Klicken Sie auf das Logo, um die Kundenbasis zu wechseln</span><div class="input-wrap"><div class="logo-switcher" @mousedown.prevent.stop="toggleLogoDropdown" :class="{'is-open': logoDropdownOpen}"><img v-if="mode === 'autocomplete'" src="/img/xinon-logo.png" class="input-icon-logo" alt="Xinon Logo"><img v-else src="/img/estmk_logo.png" class="input-icon-logo" alt="ESTMK Logo"><i class="fa-solid fa-chevron-down switcher-caret"></i></div><input ref="mainInput" :placeholder="placeholderText" class="ri" v-model="q" autocomplete="off" autocapitalize="none" autocorrect="off" @input="onInput" @focus="mode === 'autocomplete' && maybeOpen()" @blur="deferClose"/><button v-if="q" class="btn-clear" @mousedown.prevent="clear" title="Feld leeren"><i class="fa-duotone fa-xmark"></i></button></div><transition name="ac-pop"><div v-if="logoDropdownOpen" class="logo-dropdown"><div class="logo-option" @mousedown.prevent="selectMode('autocomplete')"><img src="/img/xinon-logo.png" alt="Xinon Logo"><span>XINON (Suche)</span></div><div class="logo-option" @mousedown.prevent="selectMode('text')"><img src="/img/estmk_logo.png" alt="ESTMK Logo"><span>ESTMK (Eingabe)</span></div></div></transition><transition name="ac-pop"><div v-if="open && mode === 'autocomplete'" class="ac-panel" :class="{'wide': wide}"><div v-if="busy" class="ac-skel"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div></div><template v-else><div v-if="!Object.keys(items).length && !hasMoreResults" class="ac-empty muted">Keine Treffer</div><ul ref="resultsList" class="ac-list" role="listbox"><li v-for="(disp, id) in items" :key="id" :class="['ac-item', highlightedId===id ? 'is-active' : '']" @mousedown.prevent="choose(id, disp)"><i class="fa-duotone fa-address-card"></i><span class="txt">{{ disp }}</span></li><li v-if="hasMoreResults" class="ac-more-info muted"><i class="fa-duotone fa-ellipsis"></i><span class="txt">Mehr Ergebnisse verfügbar</span></li></ul></template></div></transition></div>`,
-    computed: { highlightedId(){ const k=Object.keys(this.items); return k[this.highlighted] || null; }, placeholderText() { return this.mode === 'autocomplete' ? (this.placeholder || 'Rechnungsadresse suchen') : 'Partner-Kundennummer eingeben'; } },
-    created() { this.debouncedFetch = this.debounce(() => this.fetchItems(), 220); },
-    methods: {
-        toggleLogoDropdown() { this.logoDropdownOpen = !this.logoDropdownOpen; if (this.logoDropdownOpen) this.open = false; },
-        selectMode(m) { if (this.mode !== m) { this.mode = m; this.$emit('mode-change', m); this.clear(); } this.logoDropdownOpen = false; this.$nextTick(() => this.$refs.mainInput.focus()); },
-        onInput() { this.$emit('input', this.q); if (this.mode === 'autocomplete') this.debouncedFetch(); },
-        onEnter() { if (this.mode === 'autocomplete') this.chooseHighlighted(true); else this.$emit('enter'); },
-        maybeOpen(){ this.open = true; if (this.q) this.debouncedFetch(); },
-        deferClose(){ setTimeout(()=> { this.open = false; this.logoDropdownOpen = false; }, 150); },
-        clear(){ this.q = ''; this.items={}; this.highlighted=-1; this.emitSelection('', ''); if (this.mode === 'autocomplete') { this.open = true; this.debouncedFetch(); } },
-        move(d){ const k=Object.keys(this.items); if (!k.length) return; this.highlighted=(this.highlighted+d+k.length)%k.length; this.$nextTick(() => { const a = this.$refs.resultsList?.querySelector('.is-active'); if (a) a.scrollIntoView({ block: 'center', behavior: 'smooth' }); }); },
-        chooseHighlighted(e){ const i=this.highlightedId; if (i) this.choose(i, this.items[i], e); else if (e) this.$emit('enter'); },
-        choose(id, display, emitEnter){ const c=(display.match(/\[(\d+)\]/)||[])[1] || ''; this.emitSelection(c, display); this.open=false; if (emitEnter) this.$emit('enter'); },
-        emitSelection(custnum, display){ this.$emit('select', { custnum, display }); this.$emit('input', display); this.$emit('change', display); },
-        async fetchItems() { if (this.mode !== 'autocomplete' || !this.q || this.q.length < 2) { this.items = {}; this.hasMoreResults = false; return; } this.busy = true; try { const b = window.TT_CONFIG.BASE_PATH || ''; const r = await fetch(`${b}/Address/Api?do=findAddress&fibu_primary_account=1&q=${encodeURIComponent(this.q)}`); if (r.ok) { const j = await r.json(); const addresses = j?.result?.addresses || {}; if (addresses.more) { this.hasMoreResults = true; delete addresses.more; } else { this.hasMoreResults = false; } this.items = addresses; this.highlighted = 0; } else { this.items = {}; this.hasMoreResults = false; } } catch { this.items = {}; this.hasMoreResults = false; } this.busy = false; },
-        debounce(fn, ms){ let t; return (...a)=>{ clearTimeout(t); t=setTimeout(()=>fn(...a), ms); }; }
-    }
-});
-
-/* ---------- Generic Modal ---------- */
-Vue.component('radius-modal', {
-    props: { show: Boolean, title: String, modalClass: String },
-    template: `
-      <transition name="fade">
-        <div v-if="show" class="radius-scope modal-overlay" @click.self="$emit('close')">
-          <div class="modal-card pop" :class="modalClass">
-            <div class="modal-head">
-              <div class="modal-title"><i class="fa-duotone fa-database"></i> {{ title }}</div>
-              <button class="icon-btn" @click="$emit('close')" aria-label="Close" title="Schließen"><i class="fa-duotone fa-xmark"></i></button>
-            </div>
-            <div class="modal-body"><slot/></div>
-          </div>
-        </div>
-      </transition>
-    `,
-    watch: {
-        show(isShown) {
-            if (isShown) {
-                this.$nextTick(() => {
-                    // nodeType 1 is an Element node, this prevents errors if v-if renders a comment node.
-                    if (this.$el && this.$el.nodeType === 1 && this.$el.parentNode !== document.body) {
-                        document.body.appendChild(this.$el);
-                    }
-                    document.body.style.overflow = 'hidden';
-                });
-            } else {
-                document.body.style.overflow = '';
-            }
-        }
-    },
-    beforeDestroy() {
-        if (this.show && this.$el && this.$el.nodeType === 1 && this.$el.parentNode === document.body) {
-            document.body.removeChild(this.$el);
-        }
-        document.body.style.overflow = '';
-    }
-});
-
+/* ===== Radius.js (Vue 3 + TT-Core) ===== */
 
 /* ---------- Root View: <radius> ---------- */
-Vue.component('radius', {
+const Radius = {
+    name: 'Radius',
     template: `
-      <div class="radius-scope radius-container">
+      <div class="tt-scope radius-container">
         <section class="card card-in">
-          <div class="pane-header"><div class="title"><span class="logo-dot"></span><span>Radius</span></div><nav class="view-tabs"><button v-for="i in viewOptions" :key="i.id" class="tab-btn" :class="{active:view===i.id}" @click="switchView(i.id)"><i :class="i.icon"></i> {{ i.name }}</button></nav><div class="view-select-wrap select"><select v-model="view" @change="switchView($event.target.value)"><option v-for="i in viewOptions" :value="i.id">{{ i.name }}</option></select></div></div>
+          <div class="pane-header">
+            <div class="title">
+              <span class="logo-dot"></span>
+              <span>Radius</span>
+            </div>
+            <nav class="view-tabs">
+              <button
+                v-for="i in viewOptions"
+                :key="i.id"
+                class="tab-btn"
+                :class="{active: view === i.id}"
+                @click="switchView(i.id)"
+              >
+                <i :class="i.icon"></i> {{ i.name }}
+              </button>
+            </nav>
+            <div class="view-select-wrap select">
+              <select v-model="view" @change="switchView($event.target.value)">
+                <option v-for="i in viewOptions" :value="i.id">{{ i.name }}</option>
+              </select>
+            </div>
+          </div>
           <hr class="content-divider" />
-          <section v-show="view==='users'" class="card-in"><radius-users/></section><section v-show="view==='free'" class="card-in"><radius-free-users ref="freeView"/></section><section v-show="view==='unused'" class="card-in"><radius-unused-users ref="unusedView"/></section><section v-show="view==='ont'" class="card-in"><radius-ont-parser/></section><section v-show="view==='ontReverse'" class="card-in"><radius-ont-finder/></section>
+          <section v-show="view === 'users'" class="card-in">
+            <radius-users />
+          </section>
+          <section v-show="view === 'free'" class="card-in">
+            <radius-free-users ref="freeView" />
+          </section>
+          <section v-show="view === 'unused'" class="card-in">
+            <radius-unused-users ref="unusedView" />
+          </section>
+          <section v-show="view === 'ont'" class="card-in">
+            <radius-ont-parser />
+          </section>
+          <section v-show="view === 'ontReverse'" class="card-in">
+            <radius-ont-finder />
+          </section>
         </section>
       </div>
     `,
-    data() { return { view: 'users', window: window, _initFlags: {} }; },
+    data() {
+        return {
+            view: 'users',
+            window: window,
+            _initFlags: {}
+        };
+    },
     computed: {
         viewOptions() {
-            const o = [{ id: 'users', name: 'Benutzer', icon: 'fa-duotone fa-users' },{ id: 'free', name: 'Freie Benutzer', icon: 'fa-duotone fa-user-plus' },{ id: 'unused', name: 'Ungenutzte Benutzer', icon: 'fa-duotone fa-user-clock' }];
-            if (window.TT_CONFIG.CAN_BILLING === '1') { o.push({ id: 'ont', name: 'ONT Parser', icon: 'fa-duotone fa-diagram-project' }, { id: 'ontReverse', name: 'ONT Reverse', icon: 'fa-duotone fa-arrows-rotate' }); } return o;
+            const options = [
+                { id: 'users', name: 'Benutzer', icon: 'fa-duotone fa-users' },
+                { id: 'free', name: 'Freie Benutzer', icon: 'fa-duotone fa-user-plus' },
+                { id: 'unused', name: 'Ungenutzte Benutzer', icon: 'fa-duotone fa-user-clock' }
+            ];
+
+            if (window.TT_CONFIG.CAN_BILLING === '1') {
+                options.push(
+                    { id: 'ont', name: 'ONT Parser', icon: 'fa-duotone fa-diagram-project' },
+                    { id: 'ontReverse', name: 'ONT Reverse', icon: 'fa-duotone fa-arrows-rotate' }
+                );
+            }
+
+            return options;
         }
     },
-    mounted() { this.switchView(this.view); },
+    mounted() {
+        this.switchView(this.view);
+    },
     methods: {
-        switchView(v){ this.view=v; if(!this._initFlags||this._initFlags[v])return; let r=''; if(v==='free')r='freeView';else if(v==='unused')r='unusedView'; if(r){this.$nextTick(()=>{const c=this.$refs[r];if(c&&typeof c.initIfNeeded==='function'){c.initIfNeeded();this._initFlags[v]=true;}});}}
+        switchView(v) {
+            this.view = v;
+
+            if (!this._initFlags || this._initFlags[v]) return;
+
+            let refName = '';
+            if (v === 'free') refName = 'freeView';
+            else if (v === 'unused') refName = 'unusedView';
+
+            if (refName) {
+                this.$nextTick(() => {
+                    const childComponent = this.$refs[refName];
+                    if (childComponent && typeof childComponent.initIfNeeded === 'function') {
+                        childComponent.initIfNeeded();
+                        this._initFlags[v] = true;
+                    }
+                });
+            }
+        }
     }
-});
+};
+
+// Register component with Vue 3 app
+if (window.VueApp) {
+    window.VueApp.component('radius', Radius);
+}

public/js/pages/Radius/RadiusFreeUsers.js

@@ -1,48 +1,159 @@
-/* ===== RadiusFreeUsers.js ===== */
-Vue.component('radius-free-users', {
+/* ===== RadiusFreeUsers.js (Vue 3 + TT-Core) ===== */
+
+const RadiusFreeUsers = {
+    name: 'RadiusFreeUsers',
     template: `
-      <div class="radius-scope">
-        <div class="grid cols-1 cols-2-xl">
-          <div class="subcard" style="border-right: 1px solid var(--border); padding-right: 12px;">
+      <div class="tt-scope">
+        <div class="free-users-grid">
+          <div class="free-users-column">
             <div class="h5" style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
               <span><i class="fa-duotone fa-shield-keyhole"></i> Freie NAT Benutzer <span class="badge">{{ filteredNat.length }}</span></span>
-              <button class="ghost-btn" @click="reloadNat" :disabled="loadingNat"><span v-if="!loadingNat"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
+              <button class="ghost-btn" @click="reloadNat" :disabled="loadingNat">
+                <span v-if="!loadingNat"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
+                <span v-else class="btn-loader"></span>
+              </button>
             </div>
-            <radius-table-view :items="filteredNat" :is-loading="loadingNat" :has-searched="true" density="ultra-compact" table-class="no-min-width" no-results-placeholder-text="Keine Treffer" :skeleton-row-count="8">
-              <template #head><thead><tr><th>Username</th><th>Info</th></tr></thead></template>
-              <template #skeleton-row><td colspan="2"><div class="skeleton-line"></div></td></template>
+            <tt-data-table
+              :items="filteredNat"
+              :is-loading="loadingNat"
+              :has-searched="true"
+              density="ultra-compact"
+              table-class="no-min-width"
+              no-results-placeholder-text="Keine Treffer"
+              :skeleton-row-count="8"
+            >
+              <template #head>
+                <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Info</th>
+                  </tr>
+                </thead>
+              </template>
+              <template #skeleton-row>
+                <td colspan="2"><tt-skeleton /></td>
+              </template>
               <template #row="{ item }">
-                <td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username" data-tooltip="User in Radius öffnen" data-tooltip-align="right">{{ item.Username }}</a></td>
+                <td>
+                  <a class="link" target="_blank"
+                    :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username"
+                    data-tooltip="User in Radius öffnen"
+                    data-tooltip-align="right">{{ item.Username }}</a>
+                </td>
                 <td class="clamp-2 mono">{{ item.Info }}</td>
               </template>
-            </radius-table-view>
-            <div v-if="!loadingNat && filteredNat.length" class="results-summary">{{ filteredNat.length }} Treffer gefunden</div>
+            </tt-data-table>
+            <div v-if="!loadingNat && filteredNat.length" class="results-summary">
+              {{ filteredNat.length }} Treffer gefunden
+            </div>
           </div>
-          <div class="subcard" style="padding-left: 12px;">
+          <div class="free-users-column">
             <div class="h5" style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
               <span><i class="fa-duotone fa-id-card-clip"></i> Freie STF Benutzer <span class="badge">{{ filteredStf.length }}</span></span>
-              <button class="ghost-btn" @click="reloadStf" :disabled="loadingStf"><span v-if="!loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
+              <button class="ghost-btn" @click="reloadStf" :disabled="loadingStf">
+                <span v-if="!loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
+                <span v-else class="btn-loader"></span>
+              </button>
             </div>
-            <radius-table-view :items="filteredStf" :is-loading="loadingStf" :has-searched="true" density="ultra-compact" table-class="no-min-width" no-results-placeholder-text="Keine Treffer" :skeleton-row-count="8">
-              <template #head><thead><tr><th>Username</th><th>Info</th></tr></thead></template>
-              <template #skeleton-row><td colspan="2"><div class="skeleton-line"></div></td></template>
+            <tt-data-table
+              :items="filteredStf"
+              :is-loading="loadingStf"
+              :has-searched="true"
+              density="ultra-compact"
+              table-class="no-min-width"
+              no-results-placeholder-text="Keine Treffer"
+              :skeleton-row-count="8"
+            >
+              <template #head>
+                <thead>
+                  <tr>
+                    <th>Username</th>
+                    <th>Info</th>
+                  </tr>
+                </thead>
+              </template>
+              <template #skeleton-row>
+                <td colspan="2"><tt-skeleton /></td>
+              </template>
               <template #row="{ item }">
-                <td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username" data-tooltip="User in Radius öffnen" data-tooltip-align="right">{{ item.Username }}</a></td>
+                <td>
+                  <a class="link" target="_blank"
+                    :href="'http://radius.xinon.at/edit_user.php?user=' + item.Username"
+                    data-tooltip="User in Radius öffnen"
+                    data-tooltip-align="right">{{ item.Username }}</a>
+                </td>
                 <td class="clamp-2 mono">{{ item.Info }}</td>
               </template>
-            </radius-table-view>
-            <div v-if="!loadingStf && filteredStf.length" class="results-summary">{{ filteredStf.length }} Treffer gefunden</div>
+            </tt-data-table>
+            <div v-if="!loadingStf && filteredStf.length" class="results-summary">
+              {{ filteredStf.length }} Treffer gefunden
+            </div>
           </div>
         </div>
       </div>
     `,
-    data: () => ({ nat: [], stf: [], loadingNat: false, loadingStf: false, _initialized: false }),
-    computed: { filteredNat() { return this.nat.filter(this.isTrulyFree); }, filteredStf() { return this.stf.filter(this.isTrulyFree); } },
+    data: () => ({
+        nat: [],
+        stf: [],
+        loadingNat: false,
+        loadingStf: false,
+        _initialized: false
+    }),
+    computed: {
+        filteredNat() {
+            return this.nat.filter(this.isTrulyFree);
+        },
+        filteredStf() {
+            return this.stf.filter(this.isTrulyFree);
+        }
+    },
     methods: {
-        initIfNeeded(){ if (this._initialized) return; this._initialized = true; this.reloadNat(); this.reloadStf(); },
-        isTrulyFree(user) { return !/frei[a-z]/.test((user.Info || '').toLowerCase()); },
-        normalizeUsers(arr){ if (!Array.isArray(arr)) return []; return arr.map(u => ({ Username: (u.Username || u.username || '').trim(), Info: (u.Info || u.info || '').toString().replace(/\s+$/,'') })).filter(u => u.Username); },
-        async reloadNat() { this.nat = []; this.loadingNat = true; try { const r = await fetch(window.TT_CONFIG.BASE_PATH + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=nat'); this.nat = this.normalizeUsers(r.ok ? (await r.json()).users : []); } catch { this.nat = []; } this.loadingNat = false; },
-        async reloadStf() { this.stf = []; this.loadingStf = true; try { const r = await fetch(window.TT_CONFIG.BASE_PATH + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=stf'); this.stf = this.normalizeUsers(r.ok ? (await r.json()).users : []); } catch { this.stf = []; } this.loadingStf = false; }
+        initIfNeeded() {
+            if (this._initialized) return;
+            this._initialized = true;
+            this.reloadNat();
+            this.reloadStf();
+        },
+        isTrulyFree(user) {
+            return !/frei[a-z]/.test((user.Info || '').toLowerCase());
+        },
+        normalizeUsers(arr) {
+            if (!Array.isArray(arr)) return [];
+            return arr.map(u => ({
+                Username: (u.Username || u.username || '').trim(),
+                Info: (u.Info || u.info || '').toString().replace(/\s+$/, '')
+            })).filter(u => u.Username);
+        },
+        async reloadNat() {
+            this.nat = [];
+            this.loadingNat = true;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: { action2: 'free_user', filter: 'nat' }
+                });
+                this.nat = this.normalizeUsers(data?.users || []);
+            } catch (error) {
+                this.nat = [];
+            }
+            this.loadingNat = false;
+        },
+        async reloadStf() {
+            this.stf = [];
+            this.loadingStf = true;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: { action2: 'free_user', filter: 'stf' }
+                });
+                this.stf = this.normalizeUsers(data?.users || []);
+            } catch (error) {
+                this.stf = [];
+            }
+            this.loadingStf = false;
+        }
     }
-});
+};
+
+// Register component with Vue 3 app
+if (window.VueApp) {
+    window.VueApp.component('radius-free-users', RadiusFreeUsers);
+}

public/js/pages/Radius/RadiusNetworkNode.js

@@ -0,0 +1,67 @@
+const RadiusNetworkNode = {
+    name: 'RadiusNetworkNode',
+    props: {
+        device: Object
+    },
+    template: `
+        <div class="mesh-node">
+            <div class="mesh-content" :class="nodeClass">
+                <div class="mesh-icon">
+                    <i :class="iconClass"></i>
+                    <div v-if="connectionType === 'wlan'" class="conn-badge wlan"><i class="fa-duotone fa-wifi"></i></div>
+                    <div v-if="connectionType === 'ethernet'" class="conn-badge eth"><i class="fa-duotone fa-ethernet"></i></div>
+                </div>
+                <div class="mesh-info">
+                    <div class="mesh-name" :title="device.name">{{ device.name }}</div>
+                    <div class="mesh-meta">
+                        <span class="mesh-ip" v-if="device.ipv4 && device.ipv4.ip">{{ device.ipv4.ip }}</span>
+                    </div>
+                    <div class="mesh-meta" v-if="device.mac">
+                        <span class="mesh-mac">{{ device.mac }}</span>
+                    </div>
+                    <div class="mesh-vendor" v-if="device.vendor">{{ device.vendor }}</div>
+                    <div class="mesh-details" v-if="details">
+                        <span class="mesh-speed">{{ details }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="mesh-children" v-if="device.children && device.children.length">
+                 <div v-for="child in device.children" :key="child.UID" class="mesh-branch">
+                     <radius-network-node :device="child" />
+                 </div>
+            </div>
+        </div>
+    `,
+    computed: {
+        iconClass() {
+            if (this.device.model === 'fbox') return 'fa-duotone fa-router';
+            if ((this.device.name || '').toLowerCase().includes('repeater')) return 'fa-duotone fa-wifi-exclamation';
+            if (this.device.type === 'wlan') return 'fa-duotone fa-mobile-screen';
+            return 'fa-duotone fa-desktop';
+        },
+        connectionType() {
+            if (this.device.type === 'wlan') return 'wlan';
+            if (this.device.type === 'ethernet') return 'ethernet';
+            return null;
+        },
+        nodeClass() {
+            return {
+                'is-router': this.device.model === 'fbox',
+                'is-repeater': (this.device.name || '').toLowerCase().includes('repeater'),
+                'is-offline': this.device.state && this.device.state.class !== 'globe_online' && this.device.state.class !== 'led_green'
+            }
+        },
+        details() {
+            if (this.device.properties && this.device.properties.length > 0) {
+                const props = this.device.properties.filter(p => p.txt && p.txt !== 'Mesh');
+                if (props.length > 0) return props[0].txt;
+            }
+            if (this.device.port && this.device.port !== 'WLAN') return this.device.port;
+            return null;
+        }
+    }
+};
+
+if (window.VueApp) {
+    VueApp.component('radius-network-node', RadiusNetworkNode);
+}

public/js/pages/Radius/RadiusOntFinder.js

@@ -1,29 +1,203 @@
-/* ===== RadiusOntFinder.js ===== */
-Vue.component('radius-ont-finder', {
+/* ===== RadiusOntFinder.js (Vue 3 + TT-Core) ===== */
+
+const RadiusOntFinder = {
+    name: 'RadiusOntFinder',
     template: `
-      <div class="radius-scope ont-card">
+      <div class="tt-scope ont-card">
         <div v-if="step===1">
-          <div class="block-head"><div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div><p class="muted small">Datei muss die Spalte <code>Serial</code> enthalten. Optional <code>MAC</code>.</p></div>
-          <radius-file-drop @file-selected="readXlsx" /><div v-if="uploadError" class="alert error mt-2">{{ uploadError }}</div>
+          <div class="block-head">
+            <div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div>
+            <p class="muted small">Datei muss die Spalte <code>Serial</code> enthalten. Optional <code>MAC</code>.</p>
+          </div>
+          <tt-file-dropzone accept=".xlsx,.xls" @file-selected="readXlsx" />
+          <div v-if="uploadError" class="alert error mt-2">{{ uploadError }}</div>
         </div>
         <div v-if="step===2">
-          <div class="block-head"><div class="h4"><i class="fa-duotone fa-list-check"></i> Ergebnisse</div><div class="cluster"><button class="primary-btn" @click="downloadResults" :disabled="loading"><i class="fa-duotone fa-download"></i> Ergebnisse herunterladen</button><button class="ghost-btn" @click="resetComponent" :disabled="loading"><i class="fa-duotone fa-rotate-right"></i> Neue Datei</button></div></div>
+          <div class="block-head">
+            <div class="h4"><i class="fa-duotone fa-list-check"></i> Ergebnisse</div>
+            <div class="cluster">
+              <button class="primary-btn" @click="downloadResults" :disabled="loading">
+                <i class="fa-duotone fa-download"></i> Ergebnisse herunterladen
+              </button>
+              <button class="ghost-btn" @click="resetComponent" :disabled="loading">
+                <i class="fa-duotone fa-rotate-right"></i> Neue Datei
+              </button>
+            </div>
+          </div>
           <div class="results-container mt-between">
-            <radius-processing-indicator v-if="loading" :progress="progress" :current-row="currentRow" :total-rows="totalRows" :current-serial="currentSerial" />
-            <radius-table-view v-else :items="processedData" :has-searched="true" no-results-placeholder-text="Keine Daten verarbeitet.">
-              <template #head><thead><tr><th v-for="h in originalHeaders" :key="'h'+h">{{ h }}</th><th>Username</th><th>Kundennummer</th><th>Kundenname</th><th>Info</th></tr></thead></template>
-              <template #row="{ item }"><td v-for="h in originalHeaders" :key="h+item.Serial">{{ item[h] }}</td><td class="mono">{{ item.fetched_username }}</td><td class="mono">{{ item.fetched_customerNumber }}</td><td class="clamp-2">{{ item.fetched_customerName }}</td><td class="clamp-2 mono">{{ item.fetched_info }}</td></template>
-            </radius-table-view>
-            <div v-if="!loading && processedData.length" class="results-summary">{{ processedData.length }} Zeilen verarbeitet</div>
+            <tt-loading-indicator
+              v-if="loading"
+              :text="currentSerial"
+              :progress="progress"
+              style="min-height: 200px;"
+            />
+            <tt-data-table
+              v-else
+              :items="processedData"
+              :has-searched="true"
+              no-results-placeholder-text="Keine Daten verarbeitet."
+            >
+              <template #head>
+                <thead>
+                  <tr>
+                    <th v-for="h in originalHeaders" :key="'h'+h">{{ h }}</th>
+                    <th>Username</th>
+                    <th>Kundennummer</th>
+                    <th>Kundenname</th>
+                    <th>Info</th>
+                  </tr>
+                </thead>
+              </template>
+              <template #row="{ item }">
+                <td v-for="h in originalHeaders" :key="h+item.Serial">{{ item[h] }}</td>
+                <td class="mono">{{ item.fetched_username }}</td>
+                <td class="mono">{{ item.fetched_customerNumber }}</td>
+                <td class="clamp-2">{{ item.fetched_customerName }}</td>
+                <td class="clamp-2 mono">{{ item.fetched_info }}</td>
+              </template>
+            </tt-data-table>
+            <div v-if="!loading && processedData.length" class="results-summary">
+              {{ processedData.length }} Zeilen verarbeitet
+            </div>
           </div>
         </div>
       </div>
     `,
-    data: () => ({ step: 1, parsedData: [], processedData: [], originalHeaders: [], loading: false, progress: 0, currentRow: 0, totalRows: 0, currentSerial: '', uploadError: null, serialColumnName: 'Serial', macColumnName: 'MAC', fetchedKeys: { username: 'fetched_username', customerNumber: 'fetched_customerNumber', customerName: 'fetched_customerName', info: 'fetched_info' }, apiBasePath: window.TT_CONFIG?.BASE_PATH }),
+    data: () => ({
+        step: 1,
+        parsedData: [],
+        processedData: [],
+        originalHeaders: [],
+        loading: false,
+        progress: 0,
+        currentRow: 0,
+        totalRows: 0,
+        currentSerial: '',
+        uploadError: null,
+        serialColumnName: 'Serial',
+        macColumnName: 'MAC',
+        fetchedKeys: {
+            username: 'fetched_username',
+            customerNumber: 'fetched_customerNumber',
+            customerName: 'fetched_customerName',
+            info: 'fetched_info'
+        },
+        apiBasePath: window.TT_CONFIG?.BASE_PATH
+    }),
     methods: {
-        resetComponent(){ Object.assign(this.$data, this.$options.data.call(this)); const i=this.$el.querySelector('input[type="file"]'); if (i) i.value=''; },
-        async readXlsx(file){ this.uploadError=null; try{ await window.RadiusUtils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js'); const arr = await new Promise((res,rej)=>{ const r=new FileReader(); r.onload=e=>res(new Uint8Array(e.target.result)); r.onerror=()=>rej(new Error('Fehler beim Lesen.')); r.readAsArrayBuffer(file); }); const wb = XLSX.read(arr, {type:'array'}); const ws = wb.Sheets[wb.SheetNames[0]]; this.parsedData = XLSX.utils.sheet_to_json(ws, {defval:''}); if (!this.parsedData.length) throw new Error('Die Datei ist leer.'); this.originalHeaders = Object.keys(this.parsedData[0]); if (!this.originalHeaders.includes(this.serialColumnName)) throw new Error(`Erforderliche Spalte '${this.serialColumnName}' nicht gefunden.`); this.startProcessing(); } catch(e){ this.uploadError=e.message; this.step=1; } },
-        async startProcessing(){ this.step = 2; this.loading = true; this.totalRows=this.parsedData.length; this.processedData=[]; const setRow = (row, msg, data={})=>{ const d={username:`N/A - ${msg}`,customerNumber:'N/A',customerName:'N/A',info:'N/A'}; Object.keys(this.fetchedKeys).forEach(k=>row[this.fetchedKeys[k]]=data[k]||d[k]); }; for (const [i,row] of this.parsedData.entries()){ this.currentRow=i; const out={...row}; const sn=(''+(row[this.serialColumnName]||'')).trim(); this.currentSerial=`SN: ${sn||'—'}`; let found=false; if (sn){ try{ const r=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?ont_sn=${encodeURIComponent(sn)}`); if(r.ok){ const j=await r.json(); if(Array.isArray(j)&&j.length>0){ setRow(out,'',j[0]); found=true; }}}catch{} } if (!found && this.originalHeaders.includes(this.macColumnName)){ const macRaw=(''+(row[this.macColumnName]||'')).trim(); if(macRaw&&macRaw.length===12){ const mac=macRaw.toUpperCase().match(/.{1,2}/g).join(':'); try{ const s=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?action2=find_by_current_session&mac=${encodeURIComponent(mac)}`); if(s.ok){ const ses=await s.json(); if(Array.isArray(ses)&&ses.length>0){ const u=await fetch(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?username=${encodeURIComponent(ses[0])}&info=&custnum=`); if(u.ok){ const d=await u.json(); if(Array.isArray(d)&&d.length>0) {setRow(out,'',d[0]); found=true;}}}}}catch{}}} if(!found) setRow(out,'Keinen Benutzer gefunden'); this.processedData.push(out); this.progress=((i+1)/this.totalRows)*100; if ((i+1)%20===0) await new Promise(r=>setTimeout(r,20)); } this.loading=false; this.currentSerial=''; },
-        downloadResults(){ if (!this.processedData.length) return; try{ const data=this.processedData.map(r=>{ const o={}; this.originalHeaders.forEach(h=>o[h]=r[h]); Object.keys(this.fetchedKeys).forEach(k=>{const K=k.charAt(0).toUpperCase()+k.slice(1).replace('Number','nummer').replace('Name','name'); o[K]=r[this.fetchedKeys[k]];}); return o; }); const ws=XLSX.utils.json_to_sheet(data); const wb=XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,'ONT_Finder_Results'); XLSX.writeFile(wb, `ont_finder_results_${new Date().toISOString().replace(/[-:.]/g,'').slice(0,14)}.xlsx`); } catch { if(window.notify) window.notify('error', 'Fehler beim Erstellen der Excel-Datei.'); } }
+        resetComponent() {
+            Object.assign(this.$data, this.$options.data.call(this));
+            const i = this.$el.querySelector('input[type="file"]');
+            if (i) i.value = '';
+        },
+        async readXlsx(file) {
+            this.uploadError = null;
+            try {
+                await window.TT_CORE.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
+                const arr = await new Promise((res, rej) => {
+                    const r = new FileReader();
+                    r.onload = e => res(new Uint8Array(e.target.result));
+                    r.onerror = () => rej(new Error('Fehler beim Lesen.'));
+                    r.readAsArrayBuffer(file);
+                });
+                const wb = XLSX.read(arr, {type: 'array'});
+                const ws = wb.Sheets[wb.SheetNames[0]];
+                this.parsedData = XLSX.utils.sheet_to_json(ws, {defval: ''});
+                if (!this.parsedData.length) throw new Error('Die Datei ist leer.');
+                this.originalHeaders = Object.keys(this.parsedData[0]);
+                if (!this.originalHeaders.includes(this.serialColumnName))
+                    throw new Error(`Erforderliche Spalte '${this.serialColumnName}' nicht gefunden.`);
+                this.startProcessing();
+            } catch (e) {
+                this.uploadError = e.message;
+                this.step = 1;
+            }
+        },
+        async startProcessing() {
+            this.step = 2;
+            this.loading = true;
+            this.totalRows = this.parsedData.length;
+            this.processedData = [];
+            const setRow = (row, msg, data = {}) => {
+                const d = {
+                    username: `N/A - ${msg}`,
+                    customerNumber: 'N/A',
+                    customerName: 'N/A',
+                    info: 'N/A'
+                };
+                Object.keys(this.fetchedKeys).forEach(k => row[this.fetchedKeys[k]] = data[k] || d[k]);
+            };
+            for (const [i, row] of this.parsedData.entries()) {
+                this.currentRow = i;
+                const out = {...row};
+                const sn = ('' + (row[this.serialColumnName] || '')).trim();
+                this.currentSerial = `SN: ${sn || '—'}`;
+                let found = false;
+                if (sn) {
+                    try {
+                        const { data } = await axios.get(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                            params: { ont_sn: sn }
+                        });
+                        if (Array.isArray(data) && data.length > 0) {
+                            setRow(out, '', data[0]);
+                            found = true;
+                        }
+                    } catch {
+                    }
+                }
+                if (!found && this.originalHeaders.includes(this.macColumnName)) {
+                    const macRaw = ('' + (row[this.macColumnName] || '')).trim();
+                    if (macRaw && macRaw.length === 12) {
+                        const mac = macRaw.toUpperCase().match(/.{1,2}/g).join(':');
+                        try {
+                            const { data: ses } = await axios.get(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                                params: { action2: 'find_by_current_session', mac }
+                            });
+                            if (Array.isArray(ses) && ses.length > 0) {
+                                const { data: d } = await axios.get(`${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                                    params: { username: ses[0], info: '', custnum: '' }
+                                });
+                                if (Array.isArray(d) && d.length > 0) {
+                                    setRow(out, '', d[0]);
+                                    found = true;
+                                }
+                            }
+                        } catch {
+                        }
+                    }
+                }
+                if (!found) setRow(out, 'Keinen Benutzer gefunden');
+                this.processedData.push(out);
+                this.progress = ((i + 1) / this.totalRows) * 100;
+                if ((i + 1) % 20 === 0) await new Promise(r => setTimeout(r, 20));
+            }
+            this.loading = false;
+            this.currentSerial = '';
+        },
+        downloadResults() {
+            if (!this.processedData.length) return;
+            try {
+                const data = this.processedData.map(r => {
+                    const o = {};
+                    this.originalHeaders.forEach(h => o[h] = r[h]);
+                    Object.keys(this.fetchedKeys).forEach(k => {
+                        const K = k.charAt(0).toUpperCase() + k.slice(1).replace('Number', 'nummer').replace('Name', 'name');
+                        o[K] = r[this.fetchedKeys[k]];
+                    });
+                    return o;
+                });
+                const ws = XLSX.utils.json_to_sheet(data);
+                const wb = XLSX.utils.book_new();
+                XLSX.utils.book_append_sheet(wb, ws, 'ONT_Finder_Results');
+                XLSX.writeFile(wb, `ont_finder_results_${new Date().toISOString().replace(/[-:.]/g, '').slice(0, 14)}.xlsx`);
+            } catch {
+                if (window.notify) window.notify('error', 'Fehler beim Erstellen der Excel-Datei.');
+            }
+        }
     }
-});
+};
+
+// Register component with Vue 3 app
+if (window.VueApp) {
+    window.VueApp.component('radius-ont-finder', RadiusOntFinder);
+}

public/js/pages/Radius/RadiusOntParser.js

@@ -1,36 +1,185 @@
-/* ===== RadiusOntParser.js ===== */
-Vue.component('radius-ont-parser', {
+/* ===== RadiusOntParser.js (Vue 3 + TT-Core) ===== */
+
+const RadiusOntParser = {
+    name: 'RadiusOntParser',
     template: `
-      <div class="radius-scope ont-card">
+      <div class="tt-scope ont-card">
         <div v-if="step===1">
-          <div class="block-head"><div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div><div class="muted small">Laden Sie eine XLSX-Datei mit Ihren Kundendaten.</div></div>
-          <radius-file-drop @file-selected="readXlsx" />
+          <div class="block-head">
+            <div class="h4"><i class="fa-duotone fa-file-spreadsheet"></i> Schritt 1 · Excel (XLSX) Upload</div>
+            <div class="muted small">Laden Sie eine XLSX-Datei mit Ihren Kundendaten.</div>
+          </div>
+          <tt-file-dropzone accept=".xlsx,.xls" @file-selected="readXlsx" />
         </div>
         <div v-if="step===2">
-          <div class="block-head"><div class="h4"><i class="fa-duotone fa-sliders"></i> Schritt 2 · Spaltenzuordnung</div></div>
-          <div class="grid g-4 cols-2 cols-1@sm"><div class="field" v-for="field in requiredFields" :key="field.key"><label>{{ field.label }}</label><div class="select"><select v-model="selectedColumns[field.key]"><option v-for="h in headers" :key="h" :value="h">{{ h }}</option></select></div></div></div>
-          <div class="cluster mt-3"><button class="primary-btn" @click="startProcessing"><i class="fa-duotone fa-play"></i> Verarbeitung starten</button><button class="ghost-btn" @click="step = 1"><i class="fa-duotone fa-arrow-left"></i> Zurück</button></div>
+          <div class="block-head">
+            <div class="h4"><i class="fa-duotone fa-sliders"></i> Schritt 2 · Spaltenzuordnung</div>
+          </div>
+          <div class="grid g-4 cols-2 cols-1@sm">
+            <div class="field" v-for="field in requiredFields" :key="field.key">
+              <label>{{ field.label }}</label>
+              <div class="select">
+                <select v-model="selectedColumns[field.key]">
+                  <option v-for="h in headers" :key="h" :value="h">{{ h }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="cluster mt-3">
+            <button class="primary-btn" @click="startProcessing">
+              <i class="fa-duotone fa-play"></i> Verarbeitung starten
+            </button>
+            <button class="ghost-btn" @click="step = 1">
+              <i class="fa-duotone fa-arrow-left"></i> Zurück
+            </button>
+          </div>
         </div>
         <div v-if="step===3">
-          <div class="block-head"><div class="h4"><i class="fa-duotone fa-list-check"></i> Schritt 3 · Ergebnisse</div><div class="cluster"><button class="primary-btn" @click="downloadResults" :disabled="loading"><i class="fa-duotone fa-download"></i> Neue Excel herunterladen</button><button class="ghost-btn" @click="step = 2" :disabled="loading"><i class="fa-duotone fa-arrow-left"></i> Zurück</button><button class="ghost-btn" @click="resetLocal" :disabled="loading"><i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung</button></div></div>
+          <div class="block-head">
+            <div class="h4"><i class="fa-duotone fa-list-check"></i> Schritt 3 · Ergebnisse</div>
+            <div class="cluster">
+              <button class="primary-btn" @click="downloadResults" :disabled="loading">
+                <i class="fa-duotone fa-download"></i> Neue Excel herunterladen
+              </button>
+              <button class="ghost-btn" @click="step = 2" :disabled="loading">
+                <i class="fa-duotone fa-arrow-left"></i> Zurück
+              </button>
+              <button class="ghost-btn" @click="resetLocal" :disabled="loading">
+                <i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung
+              </button>
+            </div>
+          </div>
           <div class="results-container mt-between">
-            <radius-processing-indicator v-if="loading" :progress="progress" :current-row="currentRow" :total-rows="totalRows">
-              <template #description><p class="muted small">Aktueller Kunde: {{ currentCustomerNumber || '—' }}</p></template>
-            </radius-processing-indicator>
-            <radius-table-view v-else :items="processedData" :has-searched="true" no-results-placeholder-text="Keine Daten verarbeitet.">
-              <template #head><thead><tr><th v-for="h in requiredFields" :key="h.key">{{ h.label }}</th><th>ONT SN</th></tr></thead></template>
-              <template #row="{ item }"><td>{{ item[selectedColumns.kundennummer] }}</td><td>{{ item[selectedColumns.anschlussstrasse] }}</td><td>{{ item[selectedColumns.anschlussplz] }}</td><td>{{ item[selectedColumns.anschlusscity] }}</td><td class="mono">{{ item.ont_sn }}</td></template>
-            </radius-table-view>
-            <div v-if="!loading && processedData.length" class="results-summary">{{ processedData.length }} Zeilen verarbeitet</div>
+            <tt-loading-indicator
+              v-if="loading"
+              :text="'Aktueller Kunde: ' + (currentCustomerNumber || '—')"
+              :progress="progress"
+              style="min-height: 200px;"
+            />
+            <tt-data-table
+              v-else
+              :items="processedData"
+              :has-searched="true"
+              no-results-placeholder-text="Keine Daten verarbeitet."
+            >
+              <template #head>
+                <thead>
+                  <tr>
+                    <th v-for="h in requiredFields" :key="h.key">{{ h.label }}</th>
+                    <th>ONT SN</th>
+                  </tr>
+                </thead>
+              </template>
+              <template #row="{ item }">
+                <td>{{ item[selectedColumns.kundennummer] }}</td>
+                <td>{{ item[selectedColumns.anschlussstrasse] }}</td>
+                <td>{{ item[selectedColumns.anschlussplz] }}</td>
+                <td>{{ item[selectedColumns.anschlusscity] }}</td>
+                <td class="mono">{{ item.ont_sn }}</td>
+              </template>
+            </tt-data-table>
+            <div v-if="!loading && processedData.length" class="results-summary">
+              {{ processedData.length }} Zeilen verarbeitet
+            </div>
           </div>
         </div>
       </div>
     `,
-    data: () => ({ step: 1, headers: [], parsedData: [], processedData: [], selectedColumns: { kundennummer: 'crmPartner', anschlussstrasse: 'AnlStrasse', anschlussplz: 'AnlPlz', anschlusscity: 'AnlOrt' }, requiredFields: [ { key: 'kundennummer', label: 'Kundennummer' }, { key: 'anschlussstrasse', label: 'Anschlussstraße' }, { key: 'anschlussplz', label: 'Anschluss PLZ' }, { key: 'anschlusscity', label: 'Anschluss City' } ], loading: false, progress: 0, currentRow: 0, totalRows: 0, currentCustomerNumber: '' }),
+    data: () => ({
+        step: 1,
+        headers: [],
+        parsedData: [],
+        processedData: [],
+        selectedColumns: {
+            kundennummer: 'crmPartner',
+            anschlussstrasse: 'AnlStrasse',
+            anschlussplz: 'AnlPlz',
+            anschlusscity: 'AnlOrt'
+        },
+        requiredFields: [
+            { key: 'kundennummer', label: 'Kundennummer' },
+            { key: 'anschlussstrasse', label: 'Anschlussstraße' },
+            { key: 'anschlussplz', label: 'Anschluss PLZ' },
+            { key: 'anschlusscity', label: 'Anschluss City' }
+        ],
+        loading: false,
+        progress: 0,
+        currentRow: 0,
+        totalRows: 0,
+        currentCustomerNumber: ''
+    }),
     methods: {
-        async readXlsx(file){ await window.RadiusUtils.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js'); const fr = new FileReader(); fr.onload = (e)=>{ const wb = XLSX.read(new Uint8Array(e.target.result), { type: 'array' }); this.parsedData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); this.headers = Object.keys(this.parsedData[0] || {}); this.step = 2; }; fr.readAsArrayBuffer(file); },
-        async startProcessing(){ this.step = 3; this.loading = true; this.totalRows = this.parsedData.length; this.processedData = []; this.currentRow = 0; const p = []; const b = window.TT_CONFIG.BASE_PATH; loop: for (let i=0; i<this.parsedData.length; i++){ this.currentRow = i; this.progress = ((i + 1) / this.totalRows) * 100; const row = { ...this.parsedData[i] }; this.currentCustomerNumber = row[this.selectedColumns.kundennummer] || ''; try{ const res = await fetch(`${b}/Radius/proxyUnsecureHTTPRequestToRadius?custnume=${encodeURIComponent(row[this.selectedColumns.kundennummer])}`); const users = await res.json(); if (users.length === 0) { row.ont_sn = 'N/A - Kein Benutzer'; } else if (users.length === 1) { const r = await fetch(`${b}/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=${encodeURIComponent(users[0].username)}`); const d = await r.json(); row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN'; } else { const [s,pl,c] = [row[this.selectedColumns.anschlussstrasse], row[this.selectedColumns.anschlussplz], row[this.selectedColumns.anschlusscity]]; for (let u of users) { if (window.RadiusUtils.validateData(s, pl, c, u.info || users[0].info || '')) { const r = await fetch(`${b}/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=${encodeURIComponent(u.username)}`); const d = await r.json(); row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN'; p.push(row); continue loop; } } row.ont_sn = 'N/A - Anschluss nicht zugeordnet'; } } catch { row.ont_sn = 'N/A - Fehler'; } p.push(row); if ((i + 1) % 20 === 0) await new Promise(r=>setTimeout(r,20)); } this.loading=false; this.processedData = p; },
-        downloadResults(){ const ws = XLSX.utils.json_to_sheet(this.processedData); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Results'); XLSX.writeFile(wb, 'results.xlsx'); },
-        resetLocal(){ Object.assign(this.$data, this.$options.data.call(this)); }
+        async readXlsx(file) {
+            await window.TT_CORE.loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
+            const fr = new FileReader();
+            fr.onload = (e) => {
+                const wb = XLSX.read(new Uint8Array(e.target.result), { type: 'array' });
+                this.parsedData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+                this.headers = Object.keys(this.parsedData[0] || {});
+                this.step = 2;
+            };
+            fr.readAsArrayBuffer(file);
+        },
+        async startProcessing() {
+            this.step = 3;
+            this.loading = true;
+            this.totalRows = this.parsedData.length;
+            this.processedData = [];
+            this.currentRow = 0;
+            const p = [];
+            const b = window.TT_CONFIG.BASE_PATH;
+            loop: for (let i = 0; i < this.parsedData.length; i++) {
+                this.currentRow = i;
+                this.progress = ((i + 1) / this.totalRows) * 100;
+                const row = { ...this.parsedData[i] };
+                this.currentCustomerNumber = row[this.selectedColumns.kundennummer] || '';
+                try {
+                    const { data: users } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                        params: { custnume: row[this.selectedColumns.kundennummer] }
+                    });
+                    if (users.length === 0) {
+                        row.ont_sn = 'N/A - Kein Benutzer';
+                    } else if (users.length === 1) {
+                        const { data: d } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                            params: { skipAdditional: 'true', action2: 'fetchRadacct', username: users[0].username }
+                        });
+                        row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN';
+                    } else {
+                        const [s, pl, c] = [row[this.selectedColumns.anschlussstrasse], row[this.selectedColumns.anschlussplz], row[this.selectedColumns.anschlusscity]];
+                        for (let u of users) {
+                            if (window.TT_CORE.validateData(s, pl, c, u.info || users[0].info || '')) {
+                                const { data: d } = await axios.get(`${b}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                                    params: { skipAdditional: 'true', action2: 'fetchRadacct', username: u.username }
+                                });
+                                row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN';
+                                p.push(row);
+                                continue loop;
+                            }
+                        }
+                        row.ont_sn = 'N/A - Anschluss nicht zugeordnet';
+                    }
+                } catch {
+                    row.ont_sn = 'N/A - Fehler';
+                }
+                p.push(row);
+                if ((i + 1) % 20 === 0) await new Promise(r => setTimeout(r, 20));
+            }
+            this.loading = false;
+            this.processedData = p;
+        },
+        downloadResults() {
+            const ws = XLSX.utils.json_to_sheet(this.processedData);
+            const wb = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(wb, ws, 'Results');
+            XLSX.writeFile(wb, 'results.xlsx');
+        },
+        resetLocal() {
+            Object.assign(this.$data, this.$options.data.call(this));
+        }
     }
-});
+};
+
+// Register component with Vue 3 app
+if (window.VueApp) {
+    window.VueApp.component('radius-ont-parser', RadiusOntParser);
+}

public/js/pages/Radius/RadiusRadacctModal.js

@@ -0,0 +1,85 @@
+const RadiusRadacctModal = {
+    name: 'RadiusRadacctModal',
+    props: {
+        show: Boolean,
+        username: String
+    },
+    template: `
+        <tt-dialog :show="show" title="RADIUS Daten" @close="$emit('close')">
+          <div class="kv-redesign">
+            <div class="kv-row"><span class="kv-label">Status</span>
+              <div class="kv-value">
+                <div v-if="radacctData"><strong class="chip"
+                  :class="radacctData.online ? 'ok' : 'bad'">{{ radacctData.online ? 'Online' : 'Offline' }}</strong>
+                </div>
+                <div v-else><tt-skeleton width="80px" height="24px" style="margin-left: auto;" /></div>
+              </div>
+            </div>
+
+            <div class="kv-row"><span class="kv-label">IP</span>
+              <div class="kv-value">
+                <div v-if="radacctData" class="inline-copy">
+                  <code v-if="radacctData.ip">{{ radacctData.ip }}</code>
+                  <code v-else>—</code>
+                  <tt-copy-button v-if="radacctData.ip" :text="radacctData.ip" />
+                </div>
+                <div v-else><tt-skeleton width="120px" style="margin-left: auto;" /></div>
+              </div>
+            </div>
+
+            <div class="kv-row"><span class="kv-label">Username</span>
+              <div class="kv-value">
+                <div v-if="radacctData" class="inline-copy">
+                  <a class="link" target="_blank"
+                    :href="'http://radius.xinon.at/edit_user.php?user=' + radacctData.username"
+                    data-tooltip="User in Radius öffnen">{{ radacctData.username }}</a>
+                  <tt-copy-button :text="radacctData.username" />
+                </div>
+                <div v-else><tt-skeleton width="150px" style="margin-left: auto;" /></div>
+              </div>
+            </div>
+
+            <template v-if="radacctData">
+              <div class="kv-row"><span class="kv-label">Kundennummer</span><code class="kv-value">{{ radacctData.customerNumber || '—' }}</code></div>
+              <div class="kv-row"><span class="kv-label">Kundenname</span><div class="kv-value clamp-2">{{ radacctData.customerName || '—' }}</div></div>
+              <div class="kv-row"><span class="kv-label">Info</span><div class="kv-value clamp-3 mono small">{{ radacctData.info || '—' }}</div></div>
+              <div class="kv-row"><span class="kv-label">WLAN Password</span><code class="kv-value mono">{{ radacctData.wlanPassword || '—' }}</code></div>
+              <div class="kv-row"><span class="kv-label">Bandbreite</span><code class="kv-value">{{ radacctData.actualBandwidth || '—' }}</code></div>
+            </template>
+            <template v-else>
+              <div class="kv-row" v-for="n in 5" :key="n"><span class="kv-label">&nbsp;</span><div class="kv-value"><tt-skeleton style="margin-left: auto;" /></div></div>
+            </template>
+          </div>
+        </tt-dialog>
+    `,
+    data: () => ({
+        radacctData: null
+    }),
+    watch: {
+        show(val) {
+            if (val && this.username) {
+                this.fetchRadacctData();
+            } else {
+                this.radacctData = null;
+            }
+        }
+    },
+    methods: {
+        async fetchRadacctData() {
+            this.radacctData = null;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: { action2: 'fetchRadacct', username: this.username }
+                });
+                this.radacctData = data;
+            } catch (error) {
+                console.error(error);
+                this.radacctData = {};
+            }
+        }
+    }
+};
+
+if (window.VueApp) {
+    window.VueApp.component('RadiusRadacctModal', RadiusRadacctModal);
+}

public/js/pages/Radius/RadiusRouterManager.js

@@ -0,0 +1,486 @@
+const RadiusRouterManager = {
+    name: 'RadiusRouterManager',
+    props: {
+        show: Boolean,
+        userItem: Object
+    },
+    template: `
+      <div>
+        <!-- Main Router Management Modal -->
+        <tt-dialog
+          :show="show"
+          :title="'Router Management - ' + (userItem.username || '')"
+          @close="$emit('close')"
+          size="wide"
+        >
+          <div class="modal-body-scrollable">
+            <div v-if="!routerDevice && !routerLoading" class="table-placeholder" style="min-height: 300px;">
+              <i class="fa-duotone fa-router-slash" style="font-size: 48px; opacity: 0.3;"></i>
+              <div style="margin-top: 16px;">Kein Router mit dieser IP gefunden</div>
+            </div>
+            <div v-else>
+              <!-- Router Info Header -->
+              <div class="router-info-header">
+                <i class="fa-duotone fa-router"></i>
+                <div class="router-header-text">
+                  <div class="router-title">
+                    <tt-skeleton v-if="routerLoading" width="200px" height="22px" />
+                    <span v-else>{{ routerDevice.deviceInfo.hardwareVersion || 'Router' }}</span>
+                  </div>
+                  <div class="router-subtitle" :style="routerLoading ? 'margin-top: 2px' : ''">
+                    <tt-skeleton v-if="routerLoading" width="140px" height="15px" />
+                    <span v-else>{{ routerDevice.username || userItem.username }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Router Information Grid -->
+              <div class="router-info-grid">
+                <tt-info-card icon="fa-microchip" label="Hardware Modell" :value="routerDevice?.deviceInfo?.hardwareVersion" :loading="routerLoading" />
+                <tt-info-card icon="fa-code-branch" label="Software Version" :value="routerDevice?.deviceInfo?.softwareVersion" :loading="routerLoading" />
+                <tt-info-card icon="fa-barcode" label="CWMP Account" :value="routerDevice?.deviceInfo?.serialNumber" :loading="routerLoading" />
+                <tt-info-card icon="fa-fingerprint" label="ACS ID" :value="routerDevice?.deviceId" :loading="routerLoading" />
+                <tt-info-card icon="fa-globe" label="Externe IP" :value="routerDevice?.ip" :loading="routerLoading" />
+                <tt-info-card icon="fa-network-wired" label="Management IP" :value="routerDevice?.managementIp" :loading="routerLoading" />
+              </div>
+
+              <!-- Router Actions Section -->
+              <div class="router-actions-section">
+                <h4 class="router-actions-header">
+                  <i class="fa-duotone fa-bolt"></i>
+                  Router Aktionen
+                </h4>
+                <div class="router-actions-grid">
+                  <button class="ghost-btn action-btn" @click="runRemoteAccess" :disabled="routerLoading || routerActionLoading || speedtestLoading">
+                    <i class="fa-duotone fa-key"></i>
+                    <span>Remote-Zugriff</span>
+                  </button>
+                  <button class="ghost-btn action-btn" @click="rebootRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
+                    <i class="fa-duotone fa-power-off"></i>
+                    <span>Neustart</span>
+                  </button>
+                  <button class="ghost-btn action-btn" @click="pingRouter" :disabled="routerLoading || routerActionLoading || speedtestLoading">
+                    <i class="fa-duotone fa-signal-bars"></i>
+                    <span>Ping</span>
+                  </button>
+                  <button class="ghost-btn action-btn" @click="runSpeedtest" :disabled="routerLoading || routerActionLoading || speedtestLoading">
+                    <i class="fa-duotone fa-gauge-high"></i>
+                    <span>Speedtest</span>
+                  </button>
+                  <button class="ghost-btn action-btn" @click="openNetworkStructure" :disabled="routerLoading || routerActionLoading || speedtestLoading">
+                    <i class="fa-duotone fa-sitemap"></i>
+                    <span>Netzwerkstruktur</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </tt-dialog>
+
+        <!-- SUB MODALS (Managed by this component) -->
+
+        <!-- Ping Modal -->
+        <tt-dialog :show="showPingModal" title="Ping Ergebnis" @close="showPingModal = false">
+          <tt-loading-indicator v-if="routerActionLoading && !pingResult" text="Ping läuft..." style="height: 150px;" />
+          <div v-else-if="pingResult">
+            <div class="kv-redesign">
+              <div class="kv-row"><span class="kv-label">Gesendet</span><code class="kv-value">{{ pingResult.packetsTransmitted }}</code></div>
+              <div class="kv-row"><span class="kv-label">Empfangen</span><code class="kv-value">{{ pingResult.packetsReceived }}</code></div>
+              <div class="kv-row"><span class="kv-label">Verlust</span><code class="kv-value">{{ pingResult.packetLoss }}%</code></div>
+              <div class="kv-row"><span class="kv-label">Min / Avg / Max</span><code class="kv-value">{{ pingResult.min }} / {{ pingResult.avg }} / {{ pingResult.max }} ms</code></div>
+            </div>
+          </div>
+          <div v-else class="table-placeholder" style="height: 150px;">Kein Ergebnis.</div>
+        </tt-dialog>
+
+        <!-- Speedtest Modal -->
+        <tt-dialog :show="showSpeedtestModal" title="Speedtest Ergebnis" @close="showSpeedtestModal = false" size="wide">
+          <tt-loading-indicator v-if="speedtestLoading && speedtestHistory.length === 0" text="Speedtest wird initialisiert..." style="height: 200px;" />
+          <div v-else>
+            <div class="table-wrap" style="max-height: 500px; overflow-y: auto;">
+              <table class="tt-table compact">
+                <thead>
+                  <tr>
+                    <th style="width: 60px;">#</th>
+                    <th style="text-align: right">Bandbreite</th>
+                    <th style="text-align: right">Übertragen</th>
+                    <th style="text-align: right">Pakete</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, idx) in speedtestHistory" :key="idx">
+                    <td class="mono small">{{ idx + 1 }}</td>
+                    <td class="mono small" style="text-align: right">{{ row.bpsFormatted }}</td>
+                    <td class="mono small" style="text-align: right">{{ row.bytesFormatted }}</td>
+                    <td class="mono small" style="text-align: right">{{ row.packets }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div ref="speedtestBottom"></div>
+            </div>
+            <div v-if="speedtestLoading" class="center mt-3 muted small">
+              <i class="fa-duotone fa-spinner fa-spin"></i> Aktualisiere...
+            </div>
+            <div v-else class="center mt-3" style="color: var(--ok);">
+              <i class="fa-duotone fa-check-circle"></i> Abgeschlossen
+            </div>
+          </div>
+        </tt-dialog>
+
+        <!-- Remote Access Modal -->
+        <tt-dialog :show="showRemoteAccessModal" title="Remote Zugriff Konfiguration" @close="showRemoteAccessModal = false">
+          <tt-loading-indicator v-if="remoteAccessLoading" :text="remoteAccessStep" style="height: 200px;" />
+          <div v-else-if="remoteAccessResult">
+            <div class="alert ok mb-4" style="background-color: #eaf7ef; border: 1px solid #c9e6d8; color: #206a42; padding: 12px; border-radius: 8px;">
+              <i class="fa-duotone fa-check-circle"></i> Konfiguration erfolgreich abgeschlossen.
+            </div>
+            <div class="kv-redesign">
+              <div class="kv-row">
+                <span class="kv-label">Remote Link</span>
+                <div class="kv-value inline-copy">
+                  <a :href="remoteAccessResult.link" target="_blank" class="link">{{ remoteAccessResult.link }}</a>
+                  <tt-copy-button :text="remoteAccessResult.link" />
+                </div>
+              </div>
+              <div class="kv-row">
+                <span class="kv-label">Username</span>
+                <div class="kv-value inline-copy">
+                  <code class="mono">{{ remoteAccessResult.username }}</code>
+                  <tt-copy-button :text="remoteAccessResult.username" />
+                </div>
+              </div>
+              <div class="kv-row">
+                <span class="kv-label">Password</span>
+                <div class="kv-value inline-copy">
+                  <code class="mono">{{ remoteAccessResult.password }}</code>
+                  <tt-copy-button :text="remoteAccessResult.password" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="table-placeholder" style="height: 200px;">Ein Fehler ist aufgetreten.</div>
+        </tt-dialog>
+
+        <!-- Network Structure Modal -->
+        <tt-dialog :show="showNetworkStructureModal" title="Netzwerkstruktur" @close="showNetworkStructureModal = false" size="wide">
+          <tt-loading-indicator v-if="networkStructureLoading" text="Lade Struktur..." style="min-height: 300px;" />
+          <div v-else-if="rootDevice">
+            <div class="network-tree-container">
+              <!-- Uses the recursive component -->
+              <radius-network-node :device="rootDevice" />
+            </div>
+          </div>
+          <div v-else class="table-placeholder" style="min-height: 300px;">Keine Daten verfügbar.</div>
+        </tt-dialog>
+
+      </div>
+    `,
+    data: () => ({
+        routerLoading: false,
+        routerActionLoading: false,
+        routerDevice: null,
+
+        // Sub-Modal States
+        showPingModal: false,
+        pingResult: null,
+
+        showSpeedtestModal: false,
+        speedtestLoading: false,
+        speedtestResult: null,
+        speedtestHistory: [],
+        speedtestHasStarted: false,
+
+        showRemoteAccessModal: false,
+        remoteAccessLoading: false,
+        remoteAccessResult: null,
+        remoteAccessStep: '',
+
+        showNetworkStructureModal: false,
+        networkStructureLoading: false,
+        rootDevice: null
+    }),
+    watch: {
+        show: {
+            handler(val) {
+                if (val && this.userItem) {
+                    this.loadRouterData();
+                }
+            },
+            immediate: true
+        },
+        userItem(val) {
+            if (val && this.show) {
+                this.loadRouterData();
+            }
+        }
+    },
+    methods: {
+        async loadRouterData() {
+            this.routerLoading = true;
+            this.routerDevice = null;
+            this.pingResult = null;
+            this.speedtestResult = null;
+            this.speedtestLoading = false;
+
+            try {
+                const { data: radacct } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: { action2: 'fetchRadacct', username: this.userItem.username }
+                });
+
+                if (radacct?.ip) {
+                    const { data: deviceData } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceByIp`, {
+                        params: { ip: radacct.ip }
+                    });
+
+                    if (deviceData?.success) {
+                        this.routerDevice = deviceData;
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching router:', error);
+                window.notify('error', 'Fehler beim Laden des Routers');
+            }
+            this.routerLoading = false;
+        },
+        async rebootRouter() {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            if (!confirm('Möchten Sie den Router wirklich neu starten?')) return;
+
+            this.routerActionLoading = true;
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRebootDevice`, {
+                    deviceId: this.routerDevice.deviceId
+                });
+
+                if (data.success) {
+                    window.notify('success', 'Router-Neustart gestartet');
+                } else {
+                    window.notify('error', data.message || 'Fehler beim Neustart');
+                }
+            } catch (error) {
+                console.error('Error rebooting router:', error);
+                window.notify('error', 'Fehler beim Neustarten des Routers');
+            }
+            this.routerActionLoading = false;
+        },
+        async pingRouter() {
+            if (!this.routerDevice) return;
+            const pingIp = this.routerDevice.managementIp || this.routerDevice.ip;
+            if (!pingIp) return;
+
+            this.showPingModal = true;
+            this.routerActionLoading = true;
+            this.pingResult = null;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsPing`, {
+                    params: { ip: pingIp }
+                });
+
+                if (data.success && data.result) {
+                    this.pingResult = data.result;
+                    window.notify('success', 'Ping erfolgreich');
+                } else {
+                    window.notify('error', 'Ping fehlgeschlagen');
+                }
+            } catch (error) {
+                console.error('Error pinging router:', error);
+                window.notify('error', 'Fehler beim Pingen des Routers');
+            }
+            this.routerActionLoading = false;
+        },
+        async setParameterValues(parameters) {
+            if (!this.routerDevice || !this.routerDevice.deviceId || !parameters) return false;
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsSetParameters`, {
+                    deviceId: this.routerDevice.deviceId,
+                    parameters: parameters
+                });
+                return data.success;
+            } catch (error) {
+                console.error('Error setting parameters:', error);
+                return false;
+            }
+        },
+        async runSpeedtest() {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            this.showSpeedtestModal = true;
+            this.speedtestLoading = true;
+            this.speedtestResult = null;
+            this.speedtestHistory = [];
+            this.speedtestHasStarted = false;
+
+            try {
+                const params = {
+                    'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Start': 1,
+                    'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.StartBidirect': 1,
+                    'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.WANAccess': true
+                };
+
+                if (!await this.setParameterValues(params)) {
+                    throw new Error("Konnte Speedtest-Parameter nicht setzen");
+                }
+
+                const ip = this.routerDevice.ip;
+                if (!ip) throw new Error("Keine IP-Adresse gefunden");
+
+                await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRunSpeedtest`, { ip });
+
+                this.pollSpeedtestResult();
+
+            } catch (e) {
+                window.notify('error', e.message);
+                this.speedtestLoading = false;
+            }
+        },
+        async pollSpeedtestResult() {
+            let attempts = 0;
+            const maxAttempts = 240;
+            const resultParam = 'InternetGatewayDevice.X_AVM-DE_SpeedtestServer.UDP.Result';
+
+            const poll = async () => {
+                if (!this.showSpeedtestModal) return;
+                if (attempts >= maxAttempts) {
+                    this.speedtestLoading = false;
+                    window.notify('error', 'Speedtest Zeitüberschreitung');
+                    return;
+                }
+                attempts++;
+
+                try {
+                    await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetParameters`, {
+                        deviceId: this.routerDevice.deviceId,
+                        parameters: [resultParam]
+                    });
+
+                    setTimeout(async () => {
+                        try {
+                            const val = await this.fetchDeviceParameterValue(resultParam);
+                            if (val && typeof val === 'string' && val.includes("BPS")) {
+                                const parsed = this.parseSpeedtestResult(val);
+                                if (parsed) {
+                                    this.speedtestHistory.push(parsed);
+                                    this.$nextTick(() => {
+                                        if (this.$refs.speedtestBottom) {
+                                            this.$refs.speedtestBottom.scrollIntoView({ behavior: 'smooth' });
+                                        }
+                                    });
+
+                                    if (parsed.bps > 0) this.speedtestHasStarted = true;
+
+                                    if (this.speedtestHasStarted && parsed.bps === 0) {
+                                        this.speedtestLoading = false;
+                                        window.notify('success', 'Speedtest abgeschlossen');
+                                        return;
+                                    }
+                                }
+                            }
+                        } catch(e) { console.error(e); }
+
+                        if (this.speedtestLoading) setTimeout(poll, 500);
+                    }, 500);
+
+                } catch (e) {
+                    console.error(e);
+                    if (this.speedtestLoading) setTimeout(poll, 500);
+                }
+            };
+            poll();
+        },
+        async fetchDeviceParameterValue(paramName) {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return null;
+            try {
+                const { data: deviceInfo } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsGetDeviceInfo`, {
+                    params: { deviceId: this.routerDevice.deviceId }
+                });
+
+                if (deviceInfo?.success && deviceInfo?.fullData) {
+                    const paramData = deviceInfo.fullData[paramName];
+                    if (paramData?.value?.[0]) {
+                        return paramData.value[0];
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching parameter value:', error);
+            }
+            return null;
+        },
+        formatBits(bps) {
+            if (!bps) return '0 Mbit/s';
+            const mbits = bps / 1000000;
+            return mbits.toFixed(2) + ' Mbit/s';
+        },
+        parseSpeedtestResult(raw) {
+            try {
+                const bpsMatch = raw.match(/BPS\s+(\d+)/);
+                const bytesMatch = raw.match(/Bytes\s+(\d+)/);
+                const packetsMatch = raw.match(/Packets\s+(\d+)/);
+
+                if (bpsMatch) {
+                    const bps = parseInt(bpsMatch[1]);
+                    const bytes = bytesMatch ? parseInt(bytesMatch[1]) : 0;
+                    const packets = packetsMatch ? parseInt(packetsMatch[1]) : 0;
+
+                    return {
+                        raw: raw,
+                        bps: bps,
+                        bpsFormatted: this.formatBits(bps),
+                        bytes: bytes,
+                        bytesFormatted: window.TT_CORE.formatBytes(bytes),
+                        packets: packets
+                    };
+                }
+            } catch (e) {
+                console.error("Error parsing speedtest result", e);
+            }
+            return null;
+        },
+        async runRemoteAccess() {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            this.showRemoteAccessModal = true;
+            this.remoteAccessLoading = true;
+            this.remoteAccessStep = 'Konfiguriere Zugriff...';
+            this.remoteAccessResult = null;
+
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsRemoteAccess`, {
+                    deviceId: this.routerDevice.deviceId
+                });
+
+                if (data.success) {
+                    this.remoteAccessResult = data;
+                } else {
+                    throw new Error(data.message || "Unbekannter Fehler");
+                }
+            } catch (error) {
+                window.notify('error', error.response?.data?.message || error.message || 'Fehler bei Remote Access');
+            } finally {
+                this.remoteAccessLoading = false;
+            }
+        },
+        async openNetworkStructure() {
+            if (!this.routerDevice || !this.routerDevice.deviceId) return;
+            this.showNetworkStructureModal = true;
+            this.networkStructureLoading = true;
+            this.rootDevice = null;
+
+            try {
+                const { data } = await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/genieacsNetworkStructure`, {
+                    deviceId: this.routerDevice.deviceId
+                });
+
+                if (data.root) {
+                    this.rootDevice = data.root;
+                }
+            } catch (error) {
+                console.error(error);
+                window.notify('error', 'Fehler beim Laden der Netzwerkstruktur');
+            } finally {
+                this.networkStructureLoading = false;
+            }
+        }
+    }
+};
+
+if (window.VueApp) {
+    window.VueApp.component('radius-router-manager', RadiusRouterManager);
+}

public/js/pages/Radius/RadiusTransferModal.js

@@ -0,0 +1,441 @@
+const RadiusTransferModal = {
+    name: 'RadiusTransferModal',
+    props: {
+        show: Boolean,
+        username: String
+    },
+    template: `
+        <tt-dialog
+          :show="show"
+          :title="'Transfer Statistik für ' + username"
+          @close="close"
+          size="wide"
+        >
+          <div class="modal-body-scrollable">
+            <div v-if="transferYearlyData || transferInitialLoading">
+              <div class="unselectable">
+                <div class="cluster"
+                  style="justify-content: space-between; margin-bottom: 16px; flex-wrap: nowrap; margin-top: 4px; padding-left: 8px;">
+                  <div class="cluster">
+                    <div class="custom-dropdown">
+                      <button class="dropdown-toggle"
+                        @click="!transferInitialLoading && (showYearDropdown = !showYearDropdown)"
+                        :class="{'is-open': showYearDropdown}">
+                        <span>{{ transferYear }}</span>
+                        <i class="fa-solid fa-chevron-down"></i>
+                      </button>
+                      <transition name="ac-pop">
+                        <div v-if="showYearDropdown" class="dropdown-panel">
+                          <div v-for="y in availableYears" :key="y" class="dropdown-item" @click="selectYear(y)">
+                            {{ y }}
+                          </div>
+                        </div>
+                      </transition>
+                    </div>
+                    <div class="cluster" style="gap: 4px;">
+                      <button v-for="m in allMonths" :key="m.month" class="tab-btn"
+                        :class="{active: transferMonth === m.month}"
+                        :disabled="isMonthDisabled(m.month)"
+                        @click="changeTransferMonth(m.month)">{{ m.name }}
+                      </button>
+                    </div>
+                  </div>
+                  <div class="cluster" style="gap: 16px;">
+                    <div class="muted small mono" style="text-align: right; flex-shrink: 0;">
+                      Gesamt {{ transferYear }}:<br>
+                      <strong v-if="transferInitialLoading || !transferYearlyData">
+                        <tt-skeleton width="110px" height="16px" style="margin-left:auto;" />
+                      </strong>
+                      <strong v-else>{{ window.TT_CORE.formatBytes(transferYearlyData.yearlySummary.grandTotalBytes) }}</strong>
+                    </div>
+                    <button class="ghost-btn" @click="prepareEmailModal"
+                      :disabled="transferInitialLoading || !transferYearlyData || !transferYearlyData.yearlySummary || transferYearlyData.yearlySummary.grandTotalBytes === 0"
+                      data-tooltip="Statistik per E-Mail senden"
+                      data-tooltip-align="bottom-left"
+                      data-tooltip-wrap="true">
+                      <i class="fa-duotone fa-paper-plane"></i>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="grid g-4 cols-4">
+                  <div class="stat-card-v2 stat-total">
+                    <div class="stat-icon"><i class="fa-duotone fa-grid-2"></i></div>
+                    <div>
+                      <div class="stat-label">Monat gesamt</div>
+                      <div class="stat-value">
+                        <span v-if="transferInitialLoading || transferMonthlyLoading"><tt-skeleton width="100px" height="18px" /></span>
+                        <span v-else>{{ window.TT_CORE.formatBytes(transferMonthlyData?.summary?.grandTotalBytes || 0) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-card-v2 stat-download">
+                    <div class="stat-icon"><i class="fa-duotone fa-arrow-down-to-line"></i></div>
+                    <div>
+                      <div class="stat-label">Download</div>
+                      <div class="stat-value">
+                        <span v-if="transferInitialLoading || transferMonthlyLoading"><tt-skeleton width="100px" height="18px" /></span>
+                        <span v-else>{{ window.TT_CORE.formatBytes(transferMonthlyData?.summary?.totalDownloadBytes || 0) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-card-v2 stat-upload">
+                    <div class="stat-icon"><i class="fa-duotone fa-arrow-up-from-line"></i></div>
+                    <div>
+                      <div class="stat-label">Upload</div>
+                      <div class="stat-value">
+                        <span v-if="transferInitialLoading || transferMonthlyLoading"><tt-skeleton width="100px" height="18px" /></span>
+                        <span v-else>{{ window.TT_CORE.formatBytes(transferMonthlyData?.summary?.totalUploadBytes || 0) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="stat-card-v2 stat-duration">
+                    <div class="stat-icon"><i class="fa-duotone fa-hourglass-clock"></i></div>
+                    <div>
+                      <div class="stat-label">Dauer</div>
+                      <div class="stat-value">
+                        <span v-if="transferInitialLoading || transferMonthlyLoading"><tt-skeleton width="80px" height="18px" /></span>
+                        <span v-else>{{ window.TT_CORE.formatDuration(transferMonthlyData?.summary?.totalDurationSeconds || 0) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Chart -->
+                <div class="chart-card mt-3" style="height: 250px;">
+                  <div v-if="transferMonthlyLoading || transferInitialLoading" class="chart-placeholder">
+                    <tt-skeleton width="100%" height="100%" style="border-radius: var(--radius);" />
+                  </div>
+                  <div
+                    v-else-if="!transferMonthlyData || !transferMonthlyData.details || !transferMonthlyData.details.length"
+                    class="chart-placeholder">
+                    <i class="fa-duotone fa-chart-pie"></i>
+                    <span>Keine Daten in diesem Monat verfügbar</span>
+                  </div>
+                  <canvas
+                    v-show="!transferMonthlyLoading && !transferInitialLoading && transferMonthlyData?.details?.length"
+                    ref="transferChartCanvas">
+                  </canvas>
+                </div>
+              </div>
+
+              <!-- Details Table -->
+              <div class="table-wrap mt-3" style="height: 350px;">
+                <div
+                  v-if="!transferInitialLoading && !transferMonthlyLoading && (!transferMonthlyData || !transferMonthlyData.details || !transferMonthlyData.details.length)"
+                  class="table-placeholder-fixed-height">
+                  <i class="fa-duotone fa-database"></i>
+                  <span>Keine detaillierten Daten für diesen Monat.</span>
+                </div>
+                <table v-else class="tt-table compact">
+                  <thead>
+                  <tr>
+                    <th>Startzeit</th>
+                    <th>Dauer</th>
+                    <th>IP-Adresse</th>
+                    <th style="text-align: right;">Download</th>
+                    <th style="text-align: right;">Upload</th>
+                    <th style="text-align: right;">Gesamt</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <template v-if="transferInitialLoading || transferMonthlyLoading">
+                    <tr v-for="n in 10" :key="'skel'+n">
+                      <td><tt-skeleton /></td>
+                      <td><tt-skeleton /></td>
+                      <td><tt-skeleton /></td>
+                      <td><tt-skeleton /></td>
+                      <td><tt-skeleton /></td>
+                      <td><tt-skeleton /></td>
+                    </tr>
+                  </template>
+                  <template v-else>
+                    <tr v-for="(d, i) in transferMonthlyData.details" :key="i">
+                      <td class="mono small">{{ d.startTime }}</td>
+                      <td class="mono small">{{ window.TT_CORE.formatDuration(d.durationSeconds) }}</td>
+                      <td class="mono small">{{ d.ipAddress }}</td>
+                      <td class="mono small" style="text-align: right;">{{ window.TT_CORE.formatBytes(d.downloadBytes) }}</td>
+                      <td class="mono small" style="text-align: right;">{{ window.TT_CORE.formatBytes(d.uploadBytes) }}</td>
+                      <td class="mono small" style="text-align: right;"><strong>{{ window.TT_CORE.formatBytes(d.totalBytes) }}</strong></td>
+                    </tr>
+                  </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div v-else-if="!transferInitialLoading" class="table-placeholder" style="min-height: 400px;">
+              <i class="fa-duotone fa-wifi-slash"></i>
+              <div>Daten konnten nicht geladen werden.</div>
+            </div>
+          </div>
+          
+            <!-- Embedded Email Modal (Logic kept here as it depends on local chart/data) -->
+            <tt-dialog :show="showEmailModal" title="Statistik per E-Mail senden" @close="showEmailModal=false">
+              <div>
+                <div class="field">
+                  <label style="margin-bottom: 8px; font-size: 14px;">Empfänger-E-Mail</label>
+                  <div class="input-wrap">
+                    <i class="fa-duotone fa-envelope input-icon"></i>
+                    <input
+                      class="ri"
+                      type="email"
+                      v-model.trim="recipientEmail"
+                      placeholder="name@domain.com"
+                      @keydown.enter="isValidEmail && !isSendingEmail && sendTransferEmail()"
+                      autocomplete="nope"
+                    />
+                  </div>
+                  <p v-if="recipientEmail && !isValidEmail" class="muted small" style="color: var(--bad); margin-top: 4px;">
+                    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+                  </p>
+                </div>
+                <div class="cluster" style="justify-content: flex-end; margin-top: 24px; gap: 12px;">
+                  <button class="ghost-btn" @click="showEmailModal=false" :disabled="isSendingEmail">Abbrechen</button>
+                  <button class="primary-btn" @click="sendTransferEmail" :disabled="!isValidEmail || isSendingEmail" style="min-width: 100px;">
+                    <span v-if="!isSendingEmail">Senden</span>
+                    <span v-else class="btn-loader"></span>
+                  </button>
+                </div>
+              </div>
+            </tt-dialog>
+        </tt-dialog>
+    `,
+    data: () => ({
+        window: window,
+        transferInitialLoading: false,
+        transferMonthlyLoading: false,
+        transferYear: new Date().getFullYear(),
+        transferMonth: new Date().getMonth() + 1,
+        transferYearlyData: null,
+        transferMonthlyData: null,
+        transferChartInstance: null,
+        showYearDropdown: false,
+
+        // Email Logic
+        showEmailModal: false,
+        isSendingEmail: false,
+        recipientEmail: ''
+    }),
+    computed: {
+        availableYears() {
+            const c = new Date().getFullYear(), s = 2021;
+            if (s > c) return [c];
+            return Array.from({length: c - s + 1}, (_, i) => c - i);
+        },
+        allMonths() {
+            return Array.from({length: 12}, (_, i) => ({
+                month: i + 1,
+                name: new Date(2000, i, 1).toLocaleString('de-DE', {month: 'short'})
+            }));
+        },
+        isValidEmail() {
+            if (!this.recipientEmail) return false;
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.recipientEmail);
+        }
+    },
+    watch: {
+        show(val) {
+            if (val && this.username) {
+                this.transferYear = new Date().getFullYear();
+                this.transferMonth = new Date().getMonth() + 1;
+                this.fetchTransferYearData();
+            } else {
+                // Cleanup
+                this.close();
+            }
+        }
+    },
+    methods: {
+        close() {
+            this.$emit('close');
+            this.transferYearlyData = null;
+            this.transferMonthlyData = null;
+            this.showYearDropdown = false;
+            this.showEmailModal = false;
+            this.recipientEmail = '';
+            this.isSendingEmail = false;
+            if (this.transferChartInstance) {
+                this.transferChartInstance.destroy();
+                this.transferChartInstance = null;
+            }
+        },
+        async fetchTransferYearData() {
+            this.transferInitialLoading = true;
+            this.transferYearlyData = null;
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: {
+                        action2: 'transferStatistic',
+                        username: this.username,
+                        year: this.transferYear,
+                        month: 0
+                    }
+                });
+                if (data && data.monthlySummary) {
+                    this.transferYearlyData = data;
+                    const last = [...data.monthlySummary].reverse().find(m => m.grandTotalBytes > 0);
+                    this.transferMonth = last ? last.month : new Date().getMonth() + 1;
+                    await this.fetchTransferMonthData();
+                } else {
+                    this.transferYearlyData = null;
+                }
+            } catch (e) {
+                console.error(e);
+                this.transferYearlyData = null;
+            }
+            this.transferInitialLoading = false;
+        },
+        async fetchTransferMonthData() {
+            this.transferMonthlyLoading = true;
+            this.transferMonthlyData = null;
+            if (this.transferChartInstance) this.transferChartInstance.destroy();
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: {
+                        action2: 'transferStatistic',
+                        username: this.username,
+                        year: this.transferYear,
+                        month: this.transferMonth
+                    }
+                });
+                this.transferMonthlyData = data || null;
+            } catch (e) {
+                console.error(e);
+                this.transferMonthlyData = null;
+            }
+            this.transferMonthlyLoading = false;
+            this.$nextTick(() => {
+                if (this.show) this.renderTransferChart();
+            });
+        },
+        isMonthDisabled(month) {
+            if (this.transferInitialLoading || this.transferMonthlyLoading) return true;
+            if (!this.transferYearlyData?.monthlySummary) return true;
+            const m = this.transferYearlyData.monthlySummary.find(m => m.month === month);
+            return !m || m.grandTotalBytes === 0;
+        },
+        selectYear(year) {
+            this.showYearDropdown = false;
+            if (this.transferYear !== year) this.changeTransferYear(year);
+        },
+        async changeTransferYear(year) {
+            this.transferYear = year;
+            await this.fetchTransferYearData();
+        },
+        async changeTransferMonth(month) {
+            this.transferMonth = month;
+            await this.fetchTransferMonthData();
+        },
+        prepareEmailModal() {
+            if (this.transferInitialLoading || !this.transferYearlyData || !this.transferYearlyData.yearlySummary || this.transferYearlyData.yearlySummary.grandTotalBytes === 0) return;
+            this.recipientEmail = '';
+            this.showEmailModal = true;
+        },
+        async sendTransferEmail() {
+            if (!this.transferMonthlyData || !this.transferChartInstance || !this.isValidEmail) return;
+            this.isSendingEmail = true;
+            try {
+                const chartImageBase64 = this.transferChartInstance.toBase64Image();
+                const payload = {
+                    username: this.username,
+                    year: this.transferYear,
+                    month: this.transferMonth,
+                    monthlySummary: this.transferMonthlyData.summary,
+                    monthlyDetails: this.transferMonthlyData.details,
+                    chartImage: chartImageBase64,
+                    recipient: this.recipientEmail
+                };
+                await axios.post(`${window.TT_CONFIG.BASE_PATH}/Radius/sendCustomerEmail`, payload);
+                window.notify('success', 'E-Mail wurde erfolgreich versendet.');
+                this.showEmailModal = false;
+            } catch (e) {
+                console.error("Failed to send transfer email:", e);
+                window.notify('error', 'Fehler beim Senden der E-Mail.');
+            } finally {
+                this.isSendingEmail = false;
+            }
+        },
+        processChartData(details) {
+            if (!details || !details.length) return {labels: [], datasets: []};
+            const daily = details.reduce((a, s) => {
+                const d = s.startTime.split(' ')[0];
+                if (!a[d]) a[d] = {downloadBytes: 0, uploadBytes: 0};
+                a[d].downloadBytes += Number(s.downloadBytes) || 0;
+                a[d].uploadBytes += Number(s.uploadBytes) || 0;
+                return a;
+            }, {});
+            const dates = Object.keys(daily).sort((a, b) => new Date(a) - new Date(b));
+            return {
+                labels: dates,
+                datasets: [{
+                    label: 'Download',
+                    data: dates.map(d => daily[d].downloadBytes),
+                    borderColor: 'rgba(15, 157, 88, 0.8)',
+                    backgroundColor: 'rgba(15, 157, 88, 0.1)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 2,
+                    borderWidth: 1.5
+                }, {
+                    label: 'Upload',
+                    data: dates.map(d => daily[d].uploadBytes),
+                    borderColor: 'rgba(0, 83, 132, 0.8)',
+                    backgroundColor: 'rgba(0, 83, 132, 0.1)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 2,
+                    borderWidth: 1.5
+                }]
+            };
+        },
+        renderTransferChart() {
+            if (this.transferChartInstance) this.transferChartInstance.destroy();
+            if (!this.$refs.transferChartCanvas || !this.transferMonthlyData?.details?.length || !window.Chart) return;
+            const d = this.processChartData(this.transferMonthlyData.details);
+            if (!d.labels.length) return;
+            const chartBackgroundColorPlugin = {
+                id: 'customCanvasBackgroundColor',
+                beforeDraw: (chart) => {
+                    const {ctx} = chart;
+                    ctx.save();
+                    ctx.globalCompositeOperation = 'destination-over';
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fillRect(0, 0, chart.width, chart.height);
+                    ctx.restore();
+                }
+            };
+            this.transferChartInstance = new Chart(this.$refs.transferChartCanvas.getContext('2d'), {
+                type: 'line',
+                data: d,
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'time',
+                            time: {unit: 'day', tooltipFormat: 'DD.MM.YYYY', displayFormats: {day: 'DD.MM'}},
+                            grid: {display: false},
+                            ticks: {maxRotation: 0, autoSkip: true, maxTicksLimit: 15}
+                        },
+                        y: {
+                            beginAtZero: true,
+                            ticks: {callback: (v) => window.TT_CORE.formatBytes(v, 0)},
+                            grid: {color: 'rgba(0,0,0,0.05)'}
+                        }
+                    },
+                    plugins: {
+                        tooltip: {callbacks: {label: (c) => `${c.dataset.label || ''}: ${window.TT_CORE.formatBytes(c.parsed.y)}`}},
+                        legend: {position: 'bottom', labels: {usePointStyle: true, boxWidth: 8, padding: 20}}
+                    },
+                    interaction: {mode: 'index', intersect: false}
+                },
+                plugins: [chartBackgroundColorPlugin]
+            });
+        }
+    }
+};
+
+if (window.VueApp) {
+    window.VueApp.component('radius-transfer-modal', RadiusTransferModal);
+}

public/js/pages/Radius/RadiusUnused.js

@@ -1,15 +1,35 @@
-/* ===== RadiusUnused.js ===== */
-Vue.component('radius-unused-users', {
+/* ===== RadiusUnused.js (Vue 3 + TT-Core) ===== */
+
+const RadiusUnusedUsers = {
+    name: 'RadiusUnusedUsers',
     template: `
-      <div class="radius-scope">
+      <div class="tt-scope">
         <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 12px;">
           <div class="cluster">
-            <button v-for="f in filters" :key="f.id" class="tab-btn" :class="{active: activeFilter === f.id}" @click="setFilter(f.id)" :disabled="isLoading || !users.length"><i :class="f.icon"></i> {{f.name}}</button>
+            <button
+              v-for="f in filters"
+              :key="f.id"
+              class="tab-btn"
+              :class="{active: activeFilter === f.id}"
+              @click="setFilter(f.id)"
+              :disabled="isLoading || !users.length">
+              <i :class="f.icon"></i> {{f.name}}
+            </button>
           </div>
-          <button class="ghost-btn" @click="fetchUnusedUsers" :disabled="isLoading" style="min-width: 120px;"><span v-if="!isLoading"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span><span v-else class="btn-loader"></span></button>
+          <button class="ghost-btn" @click="fetchUnusedUsers" :disabled="isLoading" style="min-width: 120px;">
+            <span v-if="!isLoading"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
+            <span v-else class="btn-loader"></span>
+          </button>
         </div>
         <div class="results-container">
-          <radius-table-view :items="visibleFilteredUsers" :is-loading="isLoading" :has-searched="hasSearched" initial-placeholder-icon="fa-duotone fa-play-circle" initial-placeholder-text="Klicken Sie auf 'Neu laden', um nach inaktiven Benutzern zu suchen." no-results-placeholder-text="Keine Treffer für den aktuellen Filter gefunden.">
+          <tt-data-table
+            :items="visibleFilteredUsers"
+            :is-loading="isLoading"
+            :has-searched="hasSearched"
+            initial-placeholder-icon="fa-duotone fa-play-circle"
+            initial-placeholder-text="Klicken Sie auf 'Neu laden', um nach inaktiven Benutzern zu suchen."
+            no-results-placeholder-text="Keine Treffer für den aktuellen Filter gefunden."
+          >
             <template #loading-placeholder>
               <div class="table-placeholder">
                 <i class="fa-duotone fa-hourglass-half animated-hourglass" style="font-size: 36px; margin-bottom: 10px; color: var(--brand-blue);"></i>
@@ -17,31 +37,129 @@ Vue.component('radius-unused-users', {
                 <div class="muted small">Dies kann einen Moment dauern, da große Datenmengen analysiert werden.</div>
               </div>
             </template>
-            <template #head><thead><tr><th style="width: 130px;">Kundennummer</th><th style="width: 170px;">Username</th><th style="width: 170px;">Letzter Login</th><th>Info</th><th style="width: 100px; text-align: right;">Sessions</th><th style="width: 150px; text-align: right;">Dauer</th><th style="width: 150px; text-align: right;">Traffic</th></tr></thead></template>
-            <template #skeleton-row><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td><td><div class="skeleton-line"></div></td></template>
-            <template #row="{ item }">
-              <td><a v-if="item.customerNumber" class="link" target="_blank" :href="window.TT_CONFIG.BASE_PATH + '/Address?filter%5Bcustomer_number%5D=' + item.customerNumber" data-tooltip="Kunden öffnen" data-tooltip-align="right">{{ item.customerNumber }}</a></td>
-              <td class="nowrap"><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + item.username" data-tooltip="User in Radius öffnen">{{ item.username }}</a></td>
-              <td class="mono small">{{ item.lastLogin }}</td><td class="mono clamp-2 small">{{ item.info }}</td>
-              <td style="text-align: right;">{{ item.totalSessions }}</td>
-              <td style="text-align: right;">{{ window.RadiusUtils.formatDuration(item.totalDurationSeconds) }}</td>
-              <td style="text-align: right;">{{ window.RadiusUtils.formatBytes(item.totalTrafficBytes) }}</td>
+            <template #head>
+              <thead>
+                <tr>
+                  <th style="width: 130px;">Kundennummer</th>
+                  <th style="width: 170px;">Username</th>
+                  <th style="width: 170px;">Letzter Login</th>
+                  <th>Info</th>
+                  <th style="width: 100px; text-align: right;">Sessions</th>
+                  <th style="width: 150px; text-align: right;">Dauer</th>
+                  <th style="width: 150px; text-align: right;">Traffic</th>
+                </tr>
+              </thead>
             </template>
-            <template #observer><div ref="sentinel" style="height: 1px;"></div></template>
-          </radius-table-view>
-          <div v-if="hasSearched && !isLoading && filteredUsers.length" class="results-summary">{{ filteredUsers.length }} Treffer gefunden</div>
+            <template #skeleton-row>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+              <td><tt-skeleton /></td>
+            </template>
+            <template #row="{ item }">
+              <td>
+                <a v-if="item.customerNumber" class="link" target="_blank"
+                  :href="window.TT_CONFIG.BASE_PATH + '/Address?filter%5Bcustomer_number%5D=' + item.customerNumber"
+                  data-tooltip="Kunden öffnen"
+                  data-tooltip-align="right">{{ item.customerNumber }}</a>
+              </td>
+              <td class="nowrap">
+                <a class="link" target="_blank"
+                  :href="'http://radius.xinon.at/edit_user.php?user=' + item.username"
+                  data-tooltip="User in Radius öffnen">{{ item.username }}</a>
+              </td>
+              <td class="mono small">{{ item.lastLogin }}</td>
+              <td class="mono clamp-2 small">{{ item.info }}</td>
+              <td style="text-align: right;">{{ item.totalSessions }}</td>
+              <td style="text-align: right;">{{ window.TT_CORE.formatDuration(item.totalDurationSeconds) }}</td>
+              <td style="text-align: right;">{{ window.TT_CORE.formatBytes(item.totalTrafficBytes) }}</td>
+            </template>
+            <template #observer>
+              <div ref="sentinel" style="height: 1px;"></div>
+            </template>
+          </tt-data-table>
+          <div v-if="hasSearched && !isLoading && filteredUsers.length" class="results-summary">
+            {{ filteredUsers.length }} Treffer gefunden
+          </div>
         </div>
       </div>
     `,
-    data: () => ({ users: [], isLoading: false, _initialized: false, hasSearched: false, window: window, visibleCount: 50, observer: null, activeFilter: 'all', filters: [{id: 'all', name:'Alle', icon:'fa-duotone fa-globe'},{id:'nat', name:'NAT*', icon:'fa-duotone fa-users'},{id:'st', name:'ST*', icon:'fa-duotone fa-server'},{id:'stf', name:'STF*', icon:'fa-duotone fa-id-card-clip'}] }),
-    computed: { filteredUsers() { return this.activeFilter === 'all' ? this.users : this.users.filter(u => u.username && u.username.startsWith(this.activeFilter)); }, visibleFilteredUsers() { return this.filteredUsers.slice(0, this.visibleCount); } },
-    mounted() { this.observer = new IntersectionObserver(([e]) => { if (e && e.isIntersecting) this.loadMore(); }, { root: this.$refs.tableWrap, threshold: 0.1 }); if (this.$refs.sentinel) this.observer.observe(this.$refs.sentinel); },
-    beforeDestroy() { if (this.observer) this.observer.disconnect(); },
-    updated() { if (this.observer && this.$refs.sentinel) { this.observer.disconnect(); this.observer.observe(this.$refs.sentinel); } },
+    data: () => ({
+        users: [],
+        isLoading: false,
+        _initialized: false,
+        hasSearched: false,
+        window: window,
+        visibleCount: 50,
+        observer: null,
+        activeFilter: 'all',
+        filters: [
+            {id: 'all', name:'Alle', icon:'fa-duotone fa-globe'},
+            {id:'nat', name:'NAT*', icon:'fa-duotone fa-users'},
+            {id:'st', name:'ST*', icon:'fa-duotone fa-server'},
+            {id:'stf', name:'STF*', icon:'fa-duotone fa-id-card-clip'}
+        ]
+    }),
+    computed: {
+        filteredUsers() {
+            return this.activeFilter === 'all'
+                ? this.users
+                : this.users.filter(u => u.username && u.username.startsWith(this.activeFilter));
+        },
+        visibleFilteredUsers() {
+            return this.filteredUsers.slice(0, this.visibleCount);
+        }
+    },
+    mounted() {
+        this.observer = new IntersectionObserver(([e]) => {
+            if (e && e.isIntersecting) this.loadMore();
+        }, { root: this.$refs.tableWrap, threshold: 0.1 });
+        if (this.$refs.sentinel) this.observer.observe(this.$refs.sentinel);
+    },
+    beforeUnmount() {
+        if (this.observer) this.observer.disconnect();
+    },
+    updated() {
+        if (this.observer && this.$refs.sentinel) {
+            this.observer.disconnect();
+            this.observer.observe(this.$refs.sentinel);
+        }
+    },
     methods: {
-        initIfNeeded() { if (this._initialized) return; this._initialized = true; },
-        setFilter(filter) { this.activeFilter = filter; this.visibleCount = 50; },
-        async fetchUnusedUsers() { this.isLoading = true; this.hasSearched = true; this.visibleCount = 50; this.users = []; try { const res = await fetch(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius?action2=reportUnused`); this.users = res.ok ? (await res.json() || []) : []; } catch (e) { console.error("Failed to fetch unused users:", e); this.users = []; } this.isLoading = false; },
-        loadMore() { if (this.visibleCount < this.filteredUsers.length) this.visibleCount += 50; }
+        initIfNeeded() {
+            if (this._initialized) return;
+            this._initialized = true;
+        },
+        setFilter(filter) {
+            this.activeFilter = filter;
+            this.visibleCount = 50;
+        },
+        async fetchUnusedUsers() {
+            this.isLoading = true;
+            this.hasSearched = true;
+            this.visibleCount = 50;
+            this.users = [];
+            try {
+                const { data } = await axios.get(`${window.TT_CONFIG.BASE_PATH}/Radius/proxyUnsecureHTTPRequestToRadius`, {
+                    params: { action2: 'reportUnused' }
+                });
+                this.users = data || [];
+            } catch (error) {
+                console.error("Failed to fetch unused users:", error);
+                this.users = [];
+            }
+            this.isLoading = false;
+        },
+        loadMore() {
+            if (this.visibleCount < this.filteredUsers.length) this.visibleCount += 50;
+        }
     }
-});
+};
+
+// Register component with Vue 3 app
+if (window.VueApp) {
+    window.VueApp.component('radius-unused-users', RadiusUnusedUsers);
+}