@php $grafanaEmbedRaw = trim((string) env('GRAFANA_LOGIN_FREQUENCY_EMBED_URL', '')); $defaultLoginFilter = "resource.type = \"cloud_run_revision\"\nresource.labels.service_name = \"sms-api\"\ntextPayload:\"/user/login/\""; $grafanaLoginQuery = $defaultLoginFilter; $currentAppId = null; if (auth()->check() && is_numeric(auth()->user()?->app_id) && (int) auth()->user()?->app_id > 0) { $currentAppId = (int) auth()->user()?->app_id; } elseif (is_numeric(session('app_id')) && (int) session('app_id') > 0) { $currentAppId = (int) session('app_id'); } if ($currentAppId !== null) { $grafanaLoginQuery .= "\ntextPayload:\"app_id\"\ntextPayload:\"{$currentAppId}\""; } $grafanaEmbedUrl = $grafanaEmbedRaw; if ($grafanaEmbedRaw !== '' && str_contains(strtolower($grafanaEmbedRaw), ' .login-frequency-root { padding-left: 1rem; padding-right: 1rem; } .lf-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .lf-kpi { border-radius: 14px; padding: 16px; border: 1px solid; } .lf-kpi h4 { color: #0f172a; font-size: 1.25rem; font-weight: 800; margin: 6px 0 0; } .lf-kpi .meta { color: #0f172a; font-size: 0.875rem; font-weight: 600; display: flex; gap: 8px; align-items: center;line-height: 1.5rem; } .lf-kpi .trend { margin-top: 6px; font-size: 0.875rem; font-weight: 700; color: #10b981; } .lf-kpi.purple { background: #f5f3ff; border-color: #ddd6fe; } .lf-kpi.yellow { background: #fffbeb; border-color: #fde68a; } .lf-kpi.blue { background: #ecfeff; border-color: #a5f3fc; } .lf-kpi.mint { background: #ecfdf5; border-color: #a7f3d0; } .lf-filter-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; } .lf-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .lf-field { display: flex; flex-direction: column; gap: 8px; min-width: 180px; flex: 1 1 220px; } .lf-field label { font-size: 0.875rem; color: #0f172a; font-weight: 700; line-height: 1; } .lf-field select, .lf-field input { border: 1px solid #cbd5e1; border-radius: 10px; height: 42px; padding: 0 12px; font-size: 0.875rem; color: #0f172a; } .lf-actions { display: flex; align-items: center; gap: 10px; } .lf-btn { border-radius: 10px; height: 42px; padding: 0 16px; font-weight: 700; border: 1px solid #d1d5db; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; white-space: nowrap; } .lf-btn.primary { background: #020617; color: #fff; border-color: #020617; } .lf-btn.dark { background: #020617; color: #fff; border-color: #020617; } .lf-btn[disabled] { opacity: .7; cursor: not-allowed; } .lf-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; display: inline-block; margin-right: 8px; animation: lf-spin .8s linear infinite; } .lf-spinner.dark { border-color: rgba(2,6,23,.2); border-top-color: #020617; } .lf-loading-text { color: #64748b; font-size: 12px; font-weight: 600; min-height: 16px; } @keyframes lf-spin { to { transform: rotate(360deg); } } .lf-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; } .lf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .lf-muted { color: #6b7280; font-size: 12px; } .lf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: none; overflow: visible; } .lf-failure-item { border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; padding: 8px 10px; } .lf-failure-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 2px; } .lf-failure-count { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #0f172a; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 10px; } .lf-failure-summary { font-size: 12px; line-height: 1.4; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lf-failure-actions { margin-top: 4px; } .lf-failure-toggle { border: 0; background: transparent; color: #2563eb; font-size: 11px; font-weight: 700; padding: 0; cursor: pointer; } .lf-failure-json { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease; margin-top: 0; } .lf-failure-json.open { max-height: 240px; opacity: 1; margin-top: 6px; } .lf-failure-json pre { margin: 0; padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; color: #0f172a; font-size: 12px; line-height: 1.4; max-height: 220px; overflow: auto; } .lf-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; } .lf-table th, .lf-table td { border-bottom: 1px solid #e5e7eb; text-align: left; padding: 8px; } .lf-table th:nth-child(1), .lf-table td:nth-child(1) { width: 120px; } .lf-table th:nth-child(2), .lf-table td:nth-child(2) { width: 70px; } .lf-table th:nth-child(3), .lf-table td:nth-child(3) { width: 420px; max-width: 420px; } .lf-table th:nth-child(4), .lf-table td:nth-child(4) { width: 140px; } .lf-detail-message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lf-detail-toggle { border: 0; background: transparent; color: #2563eb; font-size: 11px; font-weight: 700; padding: 0; margin-top: 4px; cursor: pointer; } .lf-detail-json { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease; margin-top: 0; } .lf-detail-json.open { max-height: 240px; opacity: 1; margin-top: 6px; } .lf-detail-json pre { margin: 0; padding: 8px; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 11px; white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 220px; } .lf-table tr.success td { background: #ecfdf3; } .lf-table tr.warning td { background: #fff7ed; } .lf-table tr.error td { background: #fef2f2; } .lf-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 8px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .lf-badge.success { color: #166534; background: #dcfce7; } .lf-badge.warning { color: #9a3412; background: #ffedd5; } .lf-badge.error { color: #991b1b; background: #fee2e2; } .lf-chart-wrap { min-height: 340px; } .lf-chart-status { font-size: 12px; color: #64748b; margin-top: 6px; } .lf-chart-status.error { color: #b91c1c; } .lf-scroll-hint { color: #6b7280; font-size: 12px; text-align: center; padding: 12px 0 4px; } @media (max-width: 1024px) { .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lf-field label { font-size: 0.875rem; } .lf-field select, .lf-field input, .lf-btn { font-size: 0.875rem; } } @media (max-width: 640px) { .login-frequency-root { padding-left: 0.75rem; padding-right: 0.75rem; } .lf-grid { grid-template-columns: 1fr; } .lf-field label { font-size: 0.875rem; } .lf-field select, .lf-field input, .lf-btn { font-size: 0.875rem; } .lf-table th:nth-child(3), .lf-table td:nth-child(3) { width: 220px; max-width: 220px; } } main section.flex.flex-col.gap-y-8.py-8 { padding-left: 1rem !important; padding-right: 1rem !important; } .fi-sidebar-nav { padding-top: 0.2rem !important; } .otp-tracking-page { box-sizing: border-box; padding-right: 0; } @endpush @push('scripts') @endpush