Merge branch 'Radius/v2' into 'master'

Add new components for managing free users and ONT lookup, enhance UI styling,...

See merge request fronk/thetool!1833

Layout/default/VueViews/Vue.php

@@ -40,7 +40,7 @@ include($vueHeaderPath); ?>
 
 <div id="app">
     <tt-page-title
-            v-if="window['TT_CONFIG'] && window['TT_CONFIG']['PAGE_TITLE'] && window['TT_CONFIG']['PATH']"
+            v-if="window['TT_CONFIG'] && window['TT_CONFIG']['PAGE_TITLE'] && window['TT_CONFIG']['PATH'] && !window['TT_CONFIG']['HIDE_PAGE_TITLE']"
             :title="window['TT_CONFIG']['PAGE_TITLE']"
             :path="window['TT_CONFIG']['PATH']">
     </tt-page-title>

application/Radius/RadiusController.php

@@ -15,10 +15,9 @@ class RadiusController extends mfBaseController {
 
     protected function indexAction() {
         $this->layout()->set('additionalJS', ["plugins/chart.js/chart.4.4.6.js", "plugins/chart.js/chartjs-adapter-moment.min.js"]);
-        Helper::renderVue($this, $this->mod, "Radius", ['CAN_BILLING' => $this->me->can("Billing")]);
+        Helper::renderVue($this, $this->mod, "Radius", ['CAN_BILLING' => $this->me->can("Billing"), 'HIDE_PAGE_TITLE' => true]);
     }
 
-
     protected function proxyUnsecureHTTPRequestToRadiusAction() {
         $url = "http://radius.xinon.at/api.php?" . http_build_query($_GET);
         $url = str_replace("proxyUnsecureHTTPRequestToRadius", "", $url);

public/js/pages/Radius/Radius.css

@@ -1,81 +1,434 @@
-.radius-view-selector {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
-    grid-gap: 10px;
-    justify-content: start;
-    margin-bottom: 20px;
-}
-
-.radius-view-selector > *,
-.radius-view-selector > * > * {
-    width: 100%;
-}
-
-@media (max-width: 576px) {
-    .radius-view-selector {
-        grid-template-columns: 1fr;
-    }
-}
-
-.filters {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    grid-gap: 15px;
-    margin-bottom: 20px;
-    justify-content: center;
-    align-items: center;
-}
-
-.status-dot {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-}
-
-.status-dot.online {
-    background-color: green;
-}
-
-.status-dot.offline {
-    background-color: grey;
-}
-
-.free-users-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 20px;
-}
-
-@media (max-width: 768px) {
-    .free-users-container {
-        grid-template-columns: 1fr;
-    }
-}
-
-.free-users-column {
-    background-color: #f8f9fa;
-    padding: 15px;
-    border-radius: 5px;
-}
-
-
-
-/*
-RADIUS ONT PARSER
+/* ===== Radius.css =====
+   Light theme, brand colors (blue), green online accent, compact density.
+   Scoped with .radius-scope to avoid page-wide resets.
 */
-.loading-overlay {
+
+:root{
+    --brand-blue: #005384;
+    --bg: #ffffff;
+    --card: #ffffff;
+    --card-2: #f8fafc;
+    --muted: #667085;
+    --text: #0b1320;
+    --accent: var(--brand-blue);
+    --accent-2: #1e88c9;
+    --ok: #0f9d58;       /* ✅ green accent */
+    --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);
+}
+
+/* container & basic colors */
+.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; }
+
+/* simple grid utilities (used by Free Users + ONT views) */
+.radius-scope .grid { display:grid; }
+.radius-scope .g-4 { gap: 16px; }
+.radius-scope .g-6 { gap: 24px; }
+.radius-scope .cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
+.radius-scope .cols-1 { grid-template-columns: 1fr; }
+@media (min-width: 900px){ .radius-scope .cols-2@lg { grid-template-columns: repeat(2, 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; } }
+
+
+/* badges / headings / clusters */
+.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; }
+.radius-scope .h5 { font-size:16px; font-weight:800; letter-spacing:.2px; }
+.radius-scope .cluster { display:flex; gap:10px; flex-wrap:wrap; align-items: center; }
+
+/* container */
+.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; }
+
+/* main header inside card */
+.radius-scope .pane-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; flex-wrap: wrap;}
+.radius-scope .pane-header .title { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; font-size: 18px; }
+/* ✅ green dot (single branding only in the main header) */
+.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; margin-bottom: 6px; }
+.radius-scope .view-select-wrap { display: none; }
+
+@media (max-width: 800px) {
+    .radius-scope .view-tabs { display: none; }
+    .radius-scope .view-select-wrap { display: block; }
+}
+
+
+/* buttons */
+.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;
+}
+.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 .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;
+}
+.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; }
+
+/* inputs */
+.radius-scope .input-wrap { position: relative; }
+.radius-scope .ri {
+    box-sizing: border-box; /* Add this line */
+    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 .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 .btn-clear {
+    position: absolute; right: 8px; top: 15%; transform: translateY(-50%);
+    width: 28px; height: 28px; border-radius: 8px; border: none;
+    background: #f3f7fa; color:#5a7891; /* Changed color from #7a8fa1 */ cursor: pointer;
+    transition: all .2s ease; opacity: 1; transform: scale(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 .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; }
+
+
+/* iOS-like switch */
+.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; }
+
+/* Autocomplete */
+.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; /* Change this from -6px to 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-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); }
+
+/* Filters grid (labels optional, works fine without) */
+.radius-scope .filters { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:flex-end; }
+.radius-scope .field label { display:block; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
+
+/* tables */
+.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; /* ADDED THIS LINE */
+    border-collapse: collapse;
+    background: #fff;
+    table-layout: fixed;
+}
+.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; z-index:1; font-size:12px; color:#344054; text-transform:uppercase; letter-spacing:.04em; }
+.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; }
+
+/* table placeholder for no-input or no-results */
+.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: #bdc8d8; }
+
+
+/* row entrance */
+.radius-scope .row-fade-in { animation: rowIn .22s ease; }
+@keyframes rowIn { from { opacity:0; transform: translateY(2px);} to {opacity:1; transform: none;} }
+
+/* skeletons */
+.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} }
+
+/* button inline loader */
+.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);} }
+
+/* modal */
+.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: 1000; }
+.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; }
+.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;} }
+
+/* key-value in modal (OLD) */
+.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); }
+
+/* Redesigned Modal Key-Value */
+.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;
+}
+.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; }
+
+/* online state chip */
+.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%; }
+.radius-scope .ros-chip.is-clickable { cursor: pointer; transition: background-color .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; }
+
+/* ONT views shared styles */
+.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:block; border:1px dashed #cfe4f3; border-radius: var(--radius); padding: 30px; text-align:center; background:#f8fbff; cursor:pointer; }
+.radius-scope .file-cta { display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:#365972; }
+
+/* ONT Parser Loading Overlay */
+.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 .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: #f7c423; }
+
+.radius-scope .alert.error { padding:10px 12px; border-radius:10px; border:1px solid #ffd6d6; background:#fff3f3; color:#8a1d1d; }
+
+/* section entrance */
+.radius-scope .card-in { animation: cardIn .18s ease; }
+@keyframes cardIn { from{ opacity:0; transform: translateY(4px);} to { opacity:1; transform: none;} }
+
+/* ===== NEW STYLES ===== */
+
+/* Custom Animated Tooltip */
+[data-tooltip] {
     position: relative;
-    padding: 20px;
-    background: white;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+[data-tooltip]::before, [data-tooltip]::after {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    pointer-events: none;
+    transition: all .18s ease-in-out;
+    z-index: 10;
+}
+[data-tooltip]::before {
+    content: '';
+    bottom: calc(100% + 0px);
+    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);
 }
 
-.progress {
-    height: 30px;
+/* IP Input Focus Tooltip */
+.radius-scope .ip-field-wrapper { position: relative; }
+.radius-scope .ip-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;
 }
-
-.progress-bar {
-    transition: width 0.3s ease;
+.radius-scope .ip-field-wrapper:focus-within .ip-focus-tooltip {
+    opacity: 1;
+    transform: translateY(0);
 }

public/js/pages/Radius/RadiusFreeUsers.js

@@ -0,0 +1,111 @@
+/* ===== RadiusFreeUsers.js =====
+ * Vereinfachte freie Benutzer:
+ * - Kein Suchfeld, nur Reload-Button
+ * - Autoload beim ersten Tab-Klick (initIfNeeded() wird von <radius> aufgerufen)
+ * - Zweispaltiges Layout bei breiten Screens
+ * - Robust gegen Server-Response (users/count/filter), trimmt Info
+ */
+
+Vue.component('radius-free-users', {
+    template: `
+      <div class="radius-scope">
+        <div class="grid g-6 cols-1 cols-2-xl">
+          <!-- NAT -->
+          <div class="subcard">
+            <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">{{ nat.length }}</span></span>
+              <button class="ghost-btn" @click="reload" :disabled="loadingNat || loadingStf">
+                <span v-if="!loadingNat && !loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
+                <span v-else class="btn-loader"></span>
+              </button>
+            </div>
+
+            <div class="table-wrap" style="margin-top:8px;">
+              <table class="tt-table ultra-compact">
+                <thead><tr><th>Username</th><th>Info</th></tr></thead>
+                <tbody>
+                <tr v-if="loadingNat" v-for="n in 8" :key="'nats'+n"><td colspan="2"><div class="skeleton-line"></div></td></tr>
+                <transition-group name="rows" tag="tbody">
+                  <tr v-for="u in nat" :key="u.Username" class="row-fade-in">
+                    <td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + u.Username">{{ u.Username }}</a></td>
+                    <td class="clamp-2 mono">{{ u.Info }}</td>
+                  </tr>
+                </transition-group>
+                <tr v-if="!loadingNat && !nat.length"><td colspan="2" class="muted center p-sm">Keine Treffer</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- STF -->
+          <div class="subcard">
+            <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">{{ stf.length }}</span></span>
+              <button class="ghost-btn" @click="reload" :disabled="loadingNat || loadingStf">
+                <span v-if="!loadingNat && !loadingStf"><i class="fa-duotone fa-rotate-right"></i> Neu laden</span>
+                <span v-else class="btn-loader"></span>
+              </button>
+            </div>
+
+            <div class="table-wrap" style="margin-top:8px;">
+              <table class="tt-table ultra-compact">
+                <thead><tr><th>Username</th><th>Info</th></tr></thead>
+                <tbody>
+                <tr v-if="loadingStf" v-for="n in 8" :key="'stfs'+n"><td colspan="2"><div class="skeleton-line"></div></td></tr>
+                <transition-group name="rows" tag="tbody">
+                  <tr v-for="u in stf" :key="u.Username" class="row-fade-in">
+                    <td><a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + u.Username">{{ u.Username }}</a></td>
+                    <td class="clamp-2 mono">{{ u.Info }}</td>
+                  </tr>
+                </transition-group>
+                <tr v-if="!loadingStf && !stf.length"><td colspan="2" class="muted center p-sm">Keine Treffer</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+    data() {
+        return {
+            nat: [],
+            stf: [],
+            loadingNat: false,
+            loadingStf: false,
+            _initialized: false
+        };
+    },
+    methods: {
+        initIfNeeded(){
+            if (this._initialized) return;
+            this._initialized = true;
+            this.reload();
+        },
+        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 reload() {
+            // NAT
+            this.loadingNat = true;
+            try {
+                const natRes = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=nat');
+                const j = natRes.ok ? await natRes.json() : { users: [] };
+                this.nat = this.normalizeUsers(j.users);
+            } catch { this.nat = []; }
+            this.loadingNat = false;
+
+            // STF
+            this.loadingStf = true;
+            try {
+                const stfRes = await fetch(window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?action2=free_user&filter=stf');
+                const j = stfRes.ok ? await stfRes.json() : { users: [] };
+                this.stf = this.normalizeUsers(j.users);
+            } catch { this.stf = []; }
+            this.loadingStf = false;
+        }
+    }
+});

public/js/pages/Radius/RadiusOntFinder.js

@@ -0,0 +1,165 @@
+/* ===== RadiusOntFinder.js =====
+ * Reverse lookup by ONT Serial (and optional MAC). Styling via shared ONT CSS utilities.
+ */
+
+Vue.component('radius-ont-finder', {
+    template: `
+      <div class="radius-scope ont-card">
+        <div v-if="step===1" class="block">
+          <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> (12 Zeichen, ohne Doppelpunkte).
+            </p>
+          </div>
+          <label class="file-drop" @dragover.prevent @drop.prevent="onDrop">
+            <input type="file" accept=".xlsx" @change="handleFileUpload" 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="$refs.fileInput.click()">Datei auswählen</button></div>
+            </div>
+          </label>
+          <div v-if="uploadError" class="alert error mt-2">{{ uploadError }}</div>
+        </div>
+
+        <div v-if="step===2" class="block">
+          <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"><i class="fa-duotone fa-download"></i> Ergebnisse herunterladen</button>
+              <button class="ghost-btn" @click="resetComponent"><i class="fa-duotone fa-rotate-right"></i> Neue Datei</button>
+            </div>
+          </div>
+
+          <div class="table-wrap">
+            <table class="tt-table compact">
+              <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>
+              <tbody>
+              <tr v-for="(row, i) in processedData" :key="i" class="row-fade-in">
+                <td v-for="h in originalHeaders" :key="h+i">{{ row[h] }}</td>
+                <td class="mono">{{ row.fetched_username }}</td>
+                <td class="mono">{{ row.fetched_customerNumber }}</td>
+                <td class="clamp-2">{{ row.fetched_customerName }}</td>
+                <td class="clamp-2 mono">{{ row.fetched_info }}</td>
+              </tr>
+              <tr v-if="processedData.length===0">
+                <td :colspan="originalHeaders.length + 4" class="muted center p-lg">Keine Daten</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <transition name="fade">
+          <div v-if="loading" class="overlay">
+            <div class="ont-loading-card pop">
+              <div class="h5">Verarbeitung läuft...</div>
+              <p class="muted small">Aktuell: {{ currentSerial || '—' }}</p>
+              <div class="progress-bar is-yellow mt-3"><div class="bar" :style="{width: progress + '%'}"></div></div>
+              <div class="muted small mt-2">Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}</div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    `,
+    data() {
+        return {
+            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=''; },
+        onDrop(e){ const f=e.dataTransfer.files?.[0]; if (f) this.readXlsx(f); },
+        async handleFileUpload(e){ const f=e.target.files?.[0]; if (f) this.readXlsx(f); },
+        async readXlsx(file){
+            this.uploadError=null; this.loading=true;
+            try{
+                await this.loadXLSX();
+                const arr = await new Promise((resolve,reject)=>{ const r=new FileReader(); r.onload=ev=>resolve(new Uint8Array(ev.target.result)); r.onerror=()=>reject(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.loading=false; this.step=1; }
+        },
+        async loadXLSX(){
+            if (window.XLSX) return;
+            await new Promise((res,rej)=>{ const s=document.createElement('script'); s.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js'; s.onload=res; s.onerror=()=>rej(new Error('XLSX konnte nicht geladen werden.')); document.head.appendChild(s); });
+        },
+        async startProcessing(){
+            this.loading=true; this.totalRows=this.parsedData.length; this.processedData=[]; this.progress=0; this.currentRow=0;
+            const snApi = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?ont_sn=`;
+            const userApi= `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?username=`;
+            const sesApi = `${this.apiBasePath}/Radius/proxyUnsecureHTTPRequestToRadius?action2=find_by_current_session&mac=`;
+            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(snApi+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(sesApi+encodeURIComponent(mac));
+                            if (s.ok){ const ses=await s.json(); if (Array.isArray(ses) && ses.length>0){
+                                const uname = ses[0];
+                                const u=await fetch(`${userApi}${encodeURIComponent(uname)}&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.step=2; 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]);
+                    o['Username']=r[this.fetchedKeys.username];
+                    o['Kundennummer']=r[this.fetchedKeys.customerNumber];
+                    o['Kundenname']=r[this.fetchedKeys.customerName];
+                    o['Info']=r[this.fetchedKeys.info];
+                    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');
+                const ts=new Date().toISOString().replace(/[-:.]/g,'').slice(0,14);
+                XLSX.writeFile(wb, `ont_finder_results_${ts}.xlsx`);
+            }catch{ if(window.notify) window.notify('error', 'Fehler beim Erstellen der Excel-Datei.'); }
+        }
+    }
+});

public/js/pages/Radius/RadiusOntParser.js

@@ -0,0 +1,190 @@
+/* ===== RadiusOntParser.js =====
+ * Styling via gemeinsame ONT CSS; keine Funktionsänderungen, nur UI-Polish.
+ */
+
+Vue.component('radius-ont-parser', {
+    template: `
+      <div class="radius-scope ont-card">
+        <div v-if="step===1" class="block">
+          <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>
+          <label class="file-drop" @dragover.prevent @drop.prevent="onDrop">
+            <input type="file" accept=".xlsx" @change="handleFileUpload" 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="$refs.fileInput.click()">Datei auswählen</button></div>
+            </div>
+          </label>
+        </div>
+
+        <div v-if="step===2" class="block">
+          <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, idx) in requiredFields" :key="idx">
+              <label>{{ field.label }}</label>
+              <div class="select">
+                <select v-model="selectedColumns[field.key]">
+                  <option v-for="header in headers" :key="header" :value="header">{{ header }}</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" class="block">
+          <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"><i class="fa-duotone fa-download"></i> Neue Excel herunterladen</button>
+              <button class="ghost-btn" @click="step = 2"><i class="fa-duotone fa-arrow-left"></i> Zurück</button>
+              <button class="ghost-btn" @click="resetLocal"><i class="fa-duotone fa-rotate-right"></i> Neue Verarbeitung</button>
+            </div>
+          </div>
+
+          <div class="table-wrap">
+            <table class="tt-table compact">
+              <thead>
+              <tr>
+                <template v-for="header in requiredFields">
+                  <th :key="header.key">{{ header.label }}</th>
+                </template>
+                <th>ONT SN</th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr v-for="(row, i) in processedData" :key="i" class="row-fade-in">
+                <td>{{ row[selectedColumns.kundennummer] }}</td>
+                <td>{{ row[selectedColumns.anschlussstrasse] }}</td>
+                <td>{{ row[selectedColumns.anschlussplz] }}</td>
+                <td>{{ row[selectedColumns.anschlusscity] }}</td>
+                <td class="mono">{{ row.ont_sn }}</td>
+              </tr>
+              <tr v-if="processedData.length===0">
+                <td colspan="5" class="muted center p-lg">Keine Daten</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <transition name="fade">
+          <div v-if="loading" class="overlay">
+            <div class="ont-loading-card pop">
+              <div class="spinner-lg"></div>
+              <div class="h4 mt-2">Verarbeitung läuft...</div>
+              <p class="muted">Ihre Daten werden Zeile für Zeile analysiert.</p>
+              <div class="progress-bar is-yellow mt-3"><div class="bar" :style="{width: progress + '%'}"></div></div>
+              <div class="muted small mt-2 mono">{{ currentRow + 1 }} / {{ totalRows }}</div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    `,
+    data() {
+        return {
+            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
+        };
+    },
+    methods: {
+        onDrop(e){ const f = e.dataTransfer.files?.[0]; if (f) this.readXlsx(f); },
+        handleFileUpload(e){ const f = e.target.files?.[0]; if (f) this.readXlsx(f); },
+        async readXlsx(file){
+            await this.loadXLSX();
+            const fr = new FileReader();
+            fr.onload = (e)=>{
+                const data = new Uint8Array(e.target.result);
+                const wb = XLSX.read(data, { type: 'array' });
+                const ws = wb.Sheets[wb.SheetNames[0]];
+                this.parsedData = XLSX.utils.sheet_to_json(ws);
+                this.headers = Object.keys(this.parsedData[0] || {});
+                this.step = 2;
+            };
+            fr.readAsArrayBuffer(file);
+        },
+        async loadXLSX(){
+            if (window.XLSX) return;
+            await new Promise((res, rej)=>{
+                const s=document.createElement('script');
+                s.src='https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js';
+                s.onload=res; s.onerror=rej; document.head.appendChild(s);
+            });
+        },
+        async startProcessing(){
+            this.loading = true; this.totalRows = this.parsedData.length;
+            const processed = [];
+
+            const dataToProcess = this.parsedData;
+
+            loop:
+                for (let i=0; i<dataToProcess.length; i++){
+                    this.currentRow = i; this.progress = ((i + 1) / dataToProcess.length) * 100;
+                    const row = { ...dataToProcess[i] };
+                    try{
+                        const findUserResponse = await fetch(
+                            window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?custnume=' + encodeURIComponent(row[this.selectedColumns.kundennummer])
+                        );
+                        const users = await findUserResponse.json();
+
+                        if (users.length === 0) {
+                            row.ont_sn = 'N/A - Kein Benutzer mit dieser Kundennummer gefunden';
+                            processed.push(row);
+                        } else if (users.length === 1) {
+                            const username = users[0].username;
+                            const r = await fetch(
+                                window.TT_CONFIG['BASE_PATH'] + '/Radius/proxyUnsecureHTTPRequestToRadius?skipAdditional=true&action2=fetchRadacct&username=' + encodeURIComponent(username)
+                            );
+                            const d = await r.json();
+                            row.ont_sn = d.ont_sn || 'N/A - Keine ONT SN gefunden';
+                            processed.push(row);
+                        } else {
+                            const s = row[this.selectedColumns.anschlussstrasse];
+                            const p = row[this.selectedColumns.anschlussplz];
+                            const c = row[this.selectedColumns.anschlusscity];
+                            for (let u of users) {
+                                const info = u.info || users[0].info || '';
+                                if (window.RadiusUtils.validateData(s, p, c, info)) {
+                                    const r = await fetch(
+                                        window.TT_CONFIG['BASE_PATH'] + '/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 gefunden';
+                                    processed.push(row);
+                                    continue loop;
+                                }
+                            }
+                            row.ont_sn = 'N/A - Anschluss konnte nicht zugeordnet werden';
+                            processed.push(row);
+                        }
+                    } catch {
+                        row.ont_sn = 'N/A - Fehler bei der Verarbeitung';
+                        processed.push(row);
+                    }
+                    if ((i + 1) % 20 === 0) await new Promise(r=>setTimeout(r,20));
+                }
+            this.loading=false; this.processedData = processed; this.step = 3;
+        },
+        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)); }
+    }
+});

public/js/pages/Radius/RadiusUsers.js

@@ -0,0 +1,309 @@
+/* ===== RadiusUsers.js =====
+ * Labels entfernt; Platzhalter vereinheitlicht; Online-Status Info; Copy-Tooltips vereinheitlicht;
+ * Modal zeigt Skeleton mit Überschriften.
+ */
+
+Vue.component('radius-users', {
+    template: `
+      <div class="radius-scope">
+        <div class="filters">
+          <div class="field">
+            <radius-autocomplete
+                v-model="billAddrDisplay"
+                :wide="true"
+                placeholder="Rechnungsadresse suchen…"
+                @select="onAddrSelect"
+                @enter="loadRadiusUsers"
+            />
+          </div>
+
+          <div class="field">
+            <div class="input-wrap ip-field-wrapper">
+              <span class="ip-focus-tooltip">z.B. nat* für lazy Suche</span>
+              <i class="fa-duotone fa-user input-icon"></i>
+              <input class="ri" v-model="username" placeholder="Username" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="text" name="radius-username" data-lpignore="true" data-1p-ignore="true" data-lastpass-icon="disabled"/>
+            </div>
+          </div>
+
+          <div class="field ip-field-wrapper">
+            <span class="ip-focus-tooltip">z.B. =100.64.32.250 für exakte Suche</span>
+            <div class="input-wrap">
+              <i class="fa-duotone fa-network-wired input-icon"></i>
+              <input class="ri" v-model="ip" placeholder="IP-Adresse" @keydown.enter="loadRadiusUsers" autocomplete="off" autocapitalize="none" autocorrect="off" inputmode="decimal" name="radius-ip" data-lpignore="true" data-1p-ignore="true" data-lastpass-icon="disabled"/>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="input-wrap">
+              <i class="fa-duotone fa-note-sticky input-icon"></i>
+              <input class="ri" v-model="info" placeholder="Info" @keydown.enter="loadRadiusUsers"/>
+            </div>
+          </div>
+
+          <div class="field">
+            <label class="switch-field">
+              <span class="mini muted">Online-Status abfragen</span>
+              <span class="switch">
+                <input type="checkbox" v-model="checkOnlineState">
+                <span class="switch-track">
+                  <i class="fa-duotone fa-signal-bars-good on"></i>
+                  <i class="fa-duotone fa-signal-bars-slash off"></i>
+                </span>
+              </span>
+            </label>
+          </div>
+
+          <div class="field cluster" style="gap: 8px;">
+            <button class="primary-btn" @click="loadRadiusUsers" :disabled="isLoading" style="flex-grow: 1;">
+              <span v-if="!isLoading"><i class="fa-duotone fa-magnifying-glass"></i> Suchen</span>
+              <span v-else class="btn-loader"></span>
+            </button>
+            <button class="danger-btn" @click="clearFilters" :disabled="!hasFilters" data-tooltip="Eingaben leeren">
+              <i class="fa-duotone fa-xmark"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="results-container mt-between">
+          <div v-if="!hasSearched" class="table-placeholder">
+            <i class="fa-duotone fa-keyboard"></i>
+            <div>Beginnen Sie Ihre Suche, indem Sie Filter eingeben.</div>
+          </div>
+          <div v-else-if="!isLoading && radiusUsers.length === 0" class="table-placeholder">
+            <i class="fa-duotone fa-database"></i>
+            <div>Keine Ergebnisse für Ihre Suche gefunden.</div>
+          </div>
+
+          <div v-else class="table-view-wrapper">
+            <div class="table-wrap" ref="tableWrap">
+              <table class="tt-table compact">
+                <colgroup>
+                  <col style="width: 170px;">
+                  <col style="width: 183px;">
+                  <col>
+                  <col style="width: 190px;">
+                  <col style="width: 115px;">
+                </colgroup>
+                <thead>
+                <tr>
+                  <th style="text-align: center">Kundennummer</th>
+                  <th style="text-align: center">Username</th>
+                  <th style="text-align: center">Info</th>
+                  <th style="text-align: center">Status</th>
+                  <th style="text-align: center">Aktionen</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-if="isLoading" v-for="n in 6" :key="'s'+n">
+                  <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" style="height: 36px;"></div></td>
+                </tr>
+
+                <tr v-for="user in visibleUsers" :key="user.id || user.username" class="row-fade-in">
+                  <td>
+                    <a class="link" target="_blank" :href="window['TT_CONFIG']['BASE_PATH'] + '/Address?filter%5Bcustomer_number%5D=' + user.customerNumber" data-tooltip="Kunden in neuem Tab öffnen">
+                      {{ user.customerNumber }}
+                    </a>
+                  </td>
+                  <td class="nowrap">
+                    <a class="link" target="_blank" :href="'http://radius.xinon.at/edit_user.php?user=' + user.username" data-tooltip="User in Radius öffnen">
+                      {{ user.username }}
+                    </a>
+                    <button class="icon-btn sm" data-tooltip="Kopieren" @click="copy(user.username, 'Username')">
+                      <i class="fa-duotone fa-copy"></i>
+                    </button>
+                  </td>
+                  <td class="mono clamp-2">{{ user.info }}</td>
+                  <td>
+                    <template v-if="checkOnlineState">
+                      <radius-online-state :username="user.username" :key="user.username + '_'+searchCount"/>
+                    </template>
+                  </td>
+                  <td class="nowrap">
+                    <button class="ghost-btn" @click="fetchRadacctData(user.username)">
+                      <i class="fa-duotone fa-circle-info"></i> Details
+                    </button>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+              <div ref="sentinel" style="height: 1px;"></div>
+            </div>
+            <div class="results-summary">
+              <span v-if="isLoading">Suche läuft...</span>
+              <span v-else>{{ radiusUsers.length }} Treffer gefunden</span>
+            </div>
+          </div>
+        </div>
+
+        <radius-modal :show="showRadacctModal" title="RADIUS Daten" @close="showRadacctModal=false">
+          <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><div class="skeleton-line" style="width: 80px; --h: 24px; margin-left: auto;"></div></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>{{ radacctData.ip || '—' }}</code>
+                  <button v-if="radacctData.ip" class="icon-btn sm" @click="copy(radacctData.ip, 'IP-Adresse')" data-tooltip="Kopieren"><i class="fa-duotone fa-copy"></i></button>
+                </div>
+                <div v-else><div class="skeleton-line" style="width: 120px; margin-left: auto;"></div></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>
+                  <button class="icon-btn sm" @click="copy(radacctData.username, 'Username')" data-tooltip="Kopieren"><i class="fa-duotone fa-copy"></i></button>
+                </div>
+                <div v-else><div class="skeleton-line" style="width: 150px; margin-left: auto;"></div></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"><span class="kv-label">Kundennummer</span><div class="kv-value"><div class="skeleton-line" style="width: 70px; margin-left: auto;"></div></div></div>
+              <div class="kv-row"><span class="kv-label">Kundenname</span><div class="kv-value"><div class="skeleton-line" style="width: 200px; margin-left: auto;"></div></div></div>
+              <div class="kv-row"><span class="kv-label">Info</span><div class="kv-value"><div class="skeleton-line" style="--h:14px; margin-left: auto;"></div></div></div>
+              <div class="kv-row"><span class="kv-label">WLAN Password</span><div class="kv-value"><div class="skeleton-line" style="width: 100px; margin-left: auto;"></div></div></div>
+              <div class="kv-row"><span class="kv-label">Bandbreite</span><div class="kv-value"><div class="skeleton-line" style="width: 180px; margin-left: auto;"></div></div></div>
+            </template>
+          </div>
+        </radius-modal>
+      </div>
+    `,
+    data() {
+        return {
+            window: window,
+            billAddrDisplay: '', billAddrCustnum: '', username: '', ip: '', info: '',
+            radiusUsers: [],
+            checkOnlineState: false,
+            isLoading: false,
+            showRadacctModal: false,
+            radacctData: null,
+            searchCount: 0,
+            hasSearched: false,
+            visibleCount: 50,
+            observer: null,
+        };
+    },
+    computed: {
+        hasFilters() {
+            return this.billAddrDisplay || this.username || this.ip || this.info;
+        },
+        visibleUsers() {
+            return this.radiusUsers.slice(0, this.visibleCount);
+        }
+    },
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            if (entry && entry.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() {
+        // Re-observe if the table view is re-rendered
+        if (this.observer && this.$refs.sentinel) {
+            this.observer.disconnect();
+            this.observer.observe(this.$refs.sentinel);
+        }
+    },
+    methods: {
+        onAddrSelect({ custnum, display }) { this.billAddrCustnum = custnum || ''; this.billAddrDisplay = display || ''; },
+        async loadRadiusUsers() {
+            this.isLoading = true;
+            this.radiusUsers = [];
+            this.hasSearched = true;
+            this.visibleCount = 50; // Reset visible count on new search
+            try {
+                const params = new URLSearchParams({
+                    username: this.username || '',
+                    info: this.info || '',
+                    custnum: this.billAddrCustnum || '',
+                    ip: this.ip || ''
+                });
+                const res = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`);
+                if (res.ok) {
+                    const users = await res.json();
+                    if (Array.isArray(users) && users.length < 6) this.checkOnlineState = true;
+                    this.radiusUsers = Array.isArray(users) ? users : [];
+                }
+            } catch (e) { console.error(e); }
+            this.isLoading = false;
+            this.searchCount++;
+        },
+        async fetchRadacctData(username) {
+            this.showRadacctModal = true; this.radacctData = null;
+            try {
+                const params = new URLSearchParams({ action2: 'fetchRadacct', username });
+                const res = await fetch(`${window.TT_CONFIG['BASE_PATH']}/Radius/proxyUnsecureHTTPRequestToRadius?${params.toString()}`);
+                if (res.ok) this.radacctData = await res.json();
+            } catch (e) { console.error(e); this.radacctData = {}; }
+        },
+        async copy(text, type) {
+            await window.RadiusUtils.copyToClipboard(text);
+            if (window.notify) {
+                window.notify('success', `${type} kopiert!`);
+            }
+        },
+        clearFilters() {
+            this.billAddrDisplay = '';
+            this.billAddrCustnum = '';
+            this.username = '';
+            this.ip = '';
+            this.info = '';
+            this.radiusUsers = [];
+            this.hasSearched = false;
+        },
+        loadMore() {
+            if (this.visibleCount < this.radiusUsers.length) {
+                this.visibleCount += 50;
+            }
+        }
+    }
+});