39481-vm/index.php
Flatlogic Bot 8be8405504 v1 unk
2026-04-05 09:55:47 +00:00

432 lines
25 KiB
PHP

<?php
declare(strict_types=1);
@date_default_timezone_set('UTC');
require_once __DIR__ . '/app/channel_data.php';
channel_app_bootstrap();
$projectName = $_SERVER['PROJECT_NAME'] ?? 'SignalDesk TV';
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'TV channels data management workspace for controlled edits, analytics, and auditability.';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
$now = gmdate('Y-m-d H:i:s');
$stats = channel_stats();
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= htmlspecialchars($projectName) ?> · TV Channels Data Management</title>
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
<meta name="author" content="Flatlogic AI">
<?php if ($projectDescription): ?>
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>">
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>">
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>">
<?php endif; ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
</head>
<body>
<div class="app-shell">
<header class="border-bottom bg-white sticky-top app-header">
<nav class="navbar navbar-expand-lg navbar-light py-2">
<div class="container-fluid px-3 px-lg-4">
<a class="navbar-brand d-flex align-items-center gap-2" href="#workspace">
<span class="brand-mark">SD</span>
<span>
<span class="d-block brand-title">SignalDesk TV</span>
<span class="d-block brand-subtitle">Controlled channel operations</span>
</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="#workspace">Workspace</a></li>
<li class="nav-item"><a class="nav-link" href="#analytics-panel">Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="#audit-panel">Audit log</a></li>
<li class="nav-item"><a class="nav-link" href="healthz.php" target="_blank" rel="noopener">Health</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-fluid px-3 px-lg-4 py-4">
<section class="hero-panel mb-4" id="workspace">
<div class="row g-3 align-items-stretch">
<div class="col-12 col-xxl-7">
<div class="card panel-card h-100">
<div class="card-body p-4">
<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
<span class="eyebrow">Initial MVP slice</span>
<span class="status-chip">Read-only source data · whitelisted PATCH only</span>
</div>
<h1 class="hero-title">TV channels workspace with strict edits, bulk operations, analytics, and full audit trace.</h1>
<p class="hero-copy mb-4">Built as an internal operator console: browse active and historical channels, filter by business dimensions, update only allowed metadata fields, and review every field-level change in the audit stream.</p>
<div class="row g-3 metrics-inline">
<div class="col-sm-6 col-lg-3">
<div class="metric-tile">
<div class="metric-label">Total channels</div>
<div class="metric-value" id="heroTotalChannels"><?= (int) ($stats['overview']['total_channels'] ?? 0) ?></div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="metric-tile">
<div class="metric-label">Active now</div>
<div class="metric-value" id="heroActiveChannels"><?= (int) ($stats['overview']['active_channels'] ?? 0) ?></div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="metric-tile metric-tile-warm">
<div class="metric-label">Manual edits</div>
<div class="metric-value" id="heroManualChannels"><?= (int) ($stats['overview']['manually_edited_channels'] ?? 0) ?></div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="metric-tile">
<div class="metric-label">Total hits</div>
<div class="metric-value" id="heroTotalHits"><?= number_format((int) ($stats['overview']['total_hits'] ?? 0)) ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xxl-5">
<div class="card panel-card h-100">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="section-title mb-0">Operating rules</h2>
<span class="text-muted small">UTC <?= htmlspecialchars($now) ?></span>
</div>
<div class="rule-list">
<div class="rule-item"><span class="rule-dot"></span> No UI insertion path — source rows remain pushimatic-owned.</div>
<div class="rule-item"><span class="rule-dot"></span> System identifiers stay locked; forbidden edits return HTTP 403.</div>
<div class="rule-item"><span class="rule-dot"></span> Single-row and bulk edits both flag <code>manually_edited</code>.</div>
<div class="rule-item"><span class="rule-dot"></span> Every changed field creates an <code>audit_log</code> entry.</div>
</div>
<div class="surface-note mt-4">
<div class="surface-note-title">Default query behavior</div>
<p class="mb-0">If no filter is applied, the list loads only current active rows with <code>date_out IS NULL</code> and <code>sat_out IS NULL</code>.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row g-4">
<aside class="col-12 col-xl-3">
<div class="card panel-card sticky-xl-top filters-card">
<div class="card-body p-3 p-lg-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h2 class="section-title mb-1">Filters</h2>
<p class="text-muted small mb-0">All filters combine with AND logic.</p>
</div>
<button class="btn btn-sm btn-outline-secondary" id="resetFiltersBtn">Reset</button>
</div>
<form id="filtersForm" class="vstack gap-3" autocomplete="off">
<div>
<label class="form-label" for="searchInput">Global search</label>
<input id="searchInput" name="search" class="form-control" type="search" placeholder="Channel, satellite, system id…">
</div>
<div class="row g-3">
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="satRefFilter">Satellite</label>
<select id="satRefFilter" name="sat_ref" class="form-select filter-select"><option value="">All satellites</option></select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="countryFilter">Country ISO</label>
<select id="countryFilter" name="country_iso" class="form-select filter-select"><option value="">All countries</option></select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="genreFilter">Genre</label>
<select id="genreFilter" name="genre" class="form-select filter-select"><option value="">All genres</option></select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="typeFilter">Type</label>
<select id="typeFilter" name="type" class="form-select filter-select">
<option value="">All types</option>
<option value="free">free</option>
<option value="payed">payed</option>
</select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="resolutionFilter">Resolution</label>
<select id="resolutionFilter" name="resolution" class="form-select filter-select"><option value="">All resolutions</option></select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="activeFilter">Active</label>
<select id="activeFilter" name="active" class="form-select">
<option value="">Default logic</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="manualFilter">Manual flag</label>
<select id="manualFilter" name="manually_edited" class="form-select">
<option value="">All</option>
<option value="1">Edited</option>
<option value="0">Not edited</option>
</select>
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="idtypeFilter">Id type</label>
<select id="idtypeFilter" name="idtype" class="form-select">
<option value="">All</option>
<option value="1">Known (1)</option>
<option value="2">Unknown (2)</option>
</select>
</div>
</div>
<div class="row g-3">
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="sixIdFilter">six_id</label>
<input id="sixIdFilter" name="six_id" class="form-control" type="text" placeholder="Exact match">
</div>
<div class="col-sm-6 col-xl-12">
<label class="form-label" for="sidFilter">sid</label>
<input id="sidFilter" name="sid" class="form-control" type="text" placeholder="Exact match">
</div>
</div>
<button class="btn btn-dark" type="submit">Apply filters</button>
</form>
</div>
</div>
</aside>
<div class="col-12 col-xl-9">
<div class="card panel-card mb-4">
<div class="card-body p-3 p-lg-4">
<div class="d-flex flex-column gap-3">
<div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
<div>
<h2 class="section-title mb-1">Channels</h2>
<p class="text-muted small mb-0">Full dataset browser with strict editable fields and protected system metadata.</p>
</div>
<div class="d-flex flex-wrap gap-2 align-items-center">
<button class="btn btn-outline-secondary btn-sm" id="selectPageBtn">Select page</button>
<button class="btn btn-dark btn-sm" id="bulkEditBtn" data-bs-toggle="modal" data-bs-target="#bulkEditModal" disabled>Bulk edit (0)</button>
</div>
</div>
<div class="toolbar-strip">
<div class="toolbar-left">
<span class="legend legend-manual"><span class="legend-swatch"></span> Manually edited</span>
<span class="legend legend-selected"><span class="legend-swatch"></span> Selected row</span>
</div>
<div class="toolbar-right small text-muted">
<span id="resultCounter">Loading channels…</span>
</div>
</div>
<div id="activeFilterChips" class="chip-row"></div>
<div id="selectionBar" class="selection-bar d-none" aria-live="polite">
<div><strong id="selectionCount">0</strong> row(s) selected</div>
<div class="d-flex gap-2 flex-wrap">
<button class="btn btn-sm btn-dark" id="selectionBulkBtn" data-bs-toggle="modal" data-bs-target="#bulkEditModal">Bulk edit selected</button>
<button class="btn btn-sm btn-outline-secondary" id="clearSelectionBtn">Clear selection</button>
</div>
</div>
<ul class="nav nav-tabs section-tabs" id="workspaceTabs" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#channels-panel" type="button" role="tab">Dataset</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#analytics-panel" type="button" role="tab">Analytics</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#history-panel" type="button" role="tab">History</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#audit-panel" type="button" role="tab">Audit log</button></li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="channels-panel" role="tabpanel">
<div class="table-responsive channel-table-wrap">
<table class="table align-middle channel-table mb-0">
<thead>
<tr>
<th class="sticky-col checkbox-col"><input class="form-check-input" type="checkbox" id="selectAllPageCheckbox" aria-label="Select all rows on current page"></th>
<th data-sort="upper_ch_ref">upper_ch_ref</th>
<th data-sort="country_iso">country_iso</th>
<th data-sort="country_client">country_client</th>
<th data-sort="sat_ref">sat_ref</th>
<th data-sort="sat_tpinfo">sat_tpinfo</th>
<th data-sort="genre">genre</th>
<th data-sort="type">type</th>
<th data-sort="resolution">resolution</th>
<th data-sort="langue">langue</th>
<th data-sort="region">region</th>
<th data-sort="groupe">groupe</th>
<th data-sort="active">active</th>
<th data-sort="idtype">idtype</th>
<th class="sys-col" data-sort="six_id">six_id</th>
<th class="sys-col" data-sort="sid">sid</th>
<th class="sys-col" data-sort="onid">onid</th>
<th class="sys-col" data-sort="tid">tid</th>
<th data-sort="sat_in">sat_in</th>
<th data-sort="sat_out">sat_out</th>
<th data-sort="sat_update">sat_update</th>
<th class="sys-col" data-sort="sat_ch_client_upper">sat_ch_client_upper</th>
<th class="sys-col" data-sort="sat_client">sat_client</th>
<th class="sys-col" data-sort="counting">counting</th>
<th class="sys-col" data-sort="lastview">lastview</th>
<th data-sort="manually_edited_at">manually_edited_at</th>
</tr>
</thead>
<tbody id="channelsTableBody">
<tr><td colspan="26" class="empty-state-cell">Loading dataset…</td></tr>
</tbody>
</table>
</div>
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 pt-3">
<div class="small text-muted" id="pageMeta">Page 1 of 1</div>
<div class="pagination-controls d-flex gap-2">
<button class="btn btn-outline-secondary btn-sm" id="prevPageBtn">Previous</button>
<button class="btn btn-outline-secondary btn-sm" id="nextPageBtn">Next</button>
</div>
</div>
</div>
<div class="tab-pane fade" id="analytics-panel" role="tabpanel">
<div class="row g-3 mb-4" id="analyticsOverview"></div>
<div class="row g-3" id="analyticsBreakdowns"></div>
</div>
<div class="tab-pane fade" id="history-panel" role="tabpanel">
<div class="history-header d-flex flex-column flex-lg-row justify-content-between gap-3 mb-3">
<div>
<h3 class="section-title mb-1">Version history</h3>
<p class="small text-muted mb-0" id="historyLead">Click a row in Dataset to load its previous and current versions.</p>
</div>
<div class="d-flex gap-2 align-items-start align-items-lg-center">
<button class="btn btn-outline-secondary btn-sm" id="refreshHistoryBtn">Refresh history</button>
</div>
</div>
<div class="row g-3 mb-3" id="historySummary">
<div class="col-12"><div class="analytics-card"><div class="small text-muted">No channel selected yet.</div></div></div>
</div>
<div id="historyTimeline" class="history-stack">
<div class="analytics-card"><div class="small text-muted">History will appear here after you select a channel row.</div></div>
</div>
</div>
<div class="tab-pane fade" id="audit-panel" role="tabpanel">
<div class="row g-3 mb-3">
<div class="col-md-4"><label class="form-label" for="auditUserFilter">User</label><select id="auditUserFilter" class="form-select"><option value="">All users</option></select></div>
<div class="col-md-4"><label class="form-label" for="auditFieldFilter">Field</label><select id="auditFieldFilter" class="form-select"><option value="">All fields</option></select></div>
<div class="col-md-2"><label class="form-label" for="auditDateFrom">From</label><input id="auditDateFrom" class="form-control" type="date"></div>
<div class="col-md-2"><label class="form-label" for="auditDateTo">To</label><input id="auditDateTo" class="form-control" type="date"></div>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<p class="small text-muted mb-0">Audit entries show each field-level change with old → new value.</p>
<button class="btn btn-outline-secondary btn-sm" id="applyAuditFiltersBtn">Refresh log</button>
</div>
<div class="table-responsive audit-table-wrap">
<table class="table align-middle audit-table mb-0">
<thead>
<tr>
<th>When</th>
<th>User</th>
<th>Channel</th>
<th>Field</th>
<th>Change</th>
</tr>
</thead>
<tbody id="auditTableBody">
<tr><td colspan="5" class="empty-state-cell">Load the audit trail…</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<div class="offcanvas offcanvas-end detail-offcanvas" tabindex="-1" id="detailPanel" aria-labelledby="detailPanelLabel">
<div class="offcanvas-header border-bottom">
<div>
<h2 class="offcanvas-title h5 mb-1" id="detailPanelLabel">Channel detail</h2>
<p class="small text-muted mb-0">Editable metadata + locked system fields.</p>
</div>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<form id="detailForm" class="detail-form">
<div class="detail-loading px-4 py-5 text-muted" id="detailLoadingState">Select a row to inspect and update it.</div>
<input type="hidden" id="detailChannelId">
<div id="detailEditableSection" class="d-none">
<div class="detail-section px-4 py-4 border-bottom">
<div class="section-subtitle">Editable fields</div>
<div class="row g-3" id="editableFieldsContainer"></div>
</div>
<div class="detail-section px-4 py-4 border-bottom bg-light-subtle">
<div class="section-subtitle">Locked system fields</div>
<div class="row g-3" id="lockedFieldsContainer"></div>
</div>
<div class="detail-actions p-4 d-flex gap-2 justify-content-end">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
<button type="submit" class="btn btn-dark">Save changes</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" id="bulkEditModal" tabindex="-1" aria-labelledby="bulkEditModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header border-bottom">
<div>
<h2 class="modal-title h5 mb-1" id="bulkEditModalLabel">Bulk edit selected rows</h2>
<p class="small text-muted mb-0">Only checked fields will be applied to the selected channels. This includes <code>sat_out</code>.</p>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="bulkEditForm">
<div class="modal-body">
<div class="alert alert-light border small mb-4">This applies changes row by row, closes the previous version with <code>date_out</code>, creates a new current row, and writes one audit entry per modified field, per channel.</div>
<div class="row g-3" id="bulkEditFieldsContainer"></div>
</div>
<div class="modal-footer border-top d-flex justify-content-between">
<div class="small text-muted"><span id="bulkSelectionSummary">0</span> row(s) currently selected</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-dark">Apply to selected rows</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer"></div>
<script>
window.tvChannelApp = {
apiBase: 'api/channels.php',
auditApi: 'api/audit-log.php',
detailFields: {
editable: <?= json_encode(CHANNEL_EDITABLE_FIELDS, JSON_UNESCAPED_SLASHES) ?>,
locked: <?= json_encode(CHANNEL_LOCKED_FIELDS, JSON_UNESCAPED_SLASHES) ?>
},
currentUser: <?= json_encode(channel_current_user_id(), JSON_UNESCAPED_SLASHES) ?>
};
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="assets/js/main.js?v=<?= time() ?>"></script>
</body>
</html>