104 lines
4.1 KiB
PHP
104 lines
4.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claims Collection V2 Dashboard</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { font-family: system-ui, sans-serif; margin: 0; padding: 1.5rem; background: #f0f2f5; color: #1a1a1a; }
|
|
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
|
|
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.25rem; }
|
|
.toolbar input { padding: 0.45rem 0.6rem; border: 1px solid #ccc; border-radius: 6px; width: 140px; }
|
|
.toolbar button { padding: 0.5rem 1rem; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; }
|
|
.toolbar button.secondary { background: #64748b; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
|
.card { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
|
.card h2 { font-size: 0.85rem; margin: 0 0 0.5rem; color: #475569; font-weight: 600; }
|
|
.card pre { font-size: 0.72rem; margin: 0; max-height: 200px; overflow: auto; background: #f8fafc; padding: 0.5rem; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
|
|
.card .status { font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.35rem; }
|
|
.card.loading pre { color: #94a3b8; }
|
|
.card.error pre { color: #b91c1c; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Claims Collection V2</h1>
|
|
|
|
<div class="toolbar">
|
|
<label>Policy ID <input type="number" id="policy-id" value="<?= (int) $policy_id ?>" min="1"></label>
|
|
<button type="button" id="btn-load-all">Load all KPIs</button>
|
|
<button type="button" class="secondary" id="btn-clear">Clear</button>
|
|
</div>
|
|
|
|
<div class="grid" id="kpi-grid">
|
|
<?php foreach ($kpi_map as $metabaseId => $method): ?>
|
|
<div class="card" id="card-<?= esc($method) ?>" data-kpi="<?= esc($method) ?>">
|
|
<div class="status">#<?= (int) $metabaseId ?> · <?= esc($kpi_labels[$method] ?? $method) ?></div>
|
|
<h2><?= esc($method) ?></h2>
|
|
<pre>Click “Load all KPIs” or open single KPI API.</pre>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const baseUrl = <?= json_encode(rtrim(base_url(), '/')) ?>;
|
|
const policyInput = document.getElementById('policy-id');
|
|
const grid = document.getElementById('kpi-grid');
|
|
|
|
function setCardState(method, state, text) {
|
|
const card = document.getElementById('card-' + method);
|
|
if (!card) return;
|
|
card.classList.remove('loading', 'error');
|
|
if (state) card.classList.add(state);
|
|
card.querySelector('pre').textContent = text;
|
|
}
|
|
|
|
async function loadAll() {
|
|
const policyId = policyInput.value;
|
|
if (!policyId) {
|
|
alert('Enter a policy ID');
|
|
return;
|
|
}
|
|
grid.querySelectorAll('.card').forEach(function (c) {
|
|
c.classList.add('loading');
|
|
c.querySelector('pre').textContent = 'Loading…';
|
|
});
|
|
|
|
try {
|
|
const apiAllUrl = <?= json_encode($api_all_url ?? base_url('util/claims-collection-v2/all')) ?>;
|
|
const res = await fetch(apiAllUrl + '?client_policy=' + encodeURIComponent(policyId));
|
|
const json = await res.json();
|
|
if (!json.status) {
|
|
throw new Error(json.message || 'Request failed');
|
|
}
|
|
Object.keys(json.data || {}).forEach(function (method) {
|
|
const block = json.data[method];
|
|
setCardState(method, '', JSON.stringify(block.rows, null, 2));
|
|
});
|
|
} catch (e) {
|
|
grid.querySelectorAll('.card').forEach(function (c) {
|
|
c.classList.remove('loading');
|
|
c.classList.add('error');
|
|
c.querySelector('pre').textContent = e.message;
|
|
});
|
|
} finally {
|
|
grid.querySelectorAll('.card.loading').forEach(function (c) {
|
|
c.classList.remove('loading');
|
|
});
|
|
}
|
|
}
|
|
|
|
document.getElementById('btn-load-all').addEventListener('click', loadAll);
|
|
document.getElementById('btn-clear').addEventListener('click', function () {
|
|
grid.querySelectorAll('.card').forEach(function (c) {
|
|
c.classList.remove('error');
|
|
c.querySelector('pre').textContent = '—';
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|