feat(timeline): merge consecutive same-location assignments + per-unit Gantt chart
When a unit had its assignment closed-then-reopened (e.g. via the
recent location remove/restore flow) or had metadata-backfill auto-
create a retroactive window adjacent to a manual one, the deployment
timeline showed N stacked rows that represented one continuous
deployment. Visual noise that didn't match reality.
Merge feature
- New endpoint POST /api/projects/{p}/assignments/merge
- Body: { assignment_ids: [uuid, ...] }
- Keeps earliest record, extends its window to span all inputs,
deletes the others, logs `assignment_merged` to UnitHistory
- Validates: all assignments share same unit + location, all
belong to the same project
- deployment_timeline_for_unit() now auto-detects mergeable groups
(consecutive same-location assignments within 7-day gap tolerance)
and returns them in `merge_groups` as a list of id-lists
- Unit detail page shows a blue banner above the timeline list when
groups exist, with one "Merge into one" button per group. Each
mergeable row gets a small "mergeable" badge to make the
relationship obvious.
Per-unit Gantt chart (Phase 1 of the deployment-history calendar)
- Plain-SVG horizontal timeline rendered above the existing Deployment
Timeline list, ~140px tall
- One colored bar per assignment, color-keyed by location (auto-
assigned palette + legend)
- Reduced opacity for closed bars; small white dot at the right edge
of active bars; today marker as a dashed orange vertical line
- Month gridlines (or every-3-month gridlines when domain > 24 months)
- Metadata-backfilled assignments get a blue outline so you spot
which were auto-attributed
- Mergeable groups get a dashed blue underline tying their bars
together visually
- Click any bar → smooth-scrolls the matching list row into view
and flashes a ring around it
- Hover any bar → tooltip with location + window + event count
- Auto-hides on units with no deployment history
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+316
-7
@@ -287,6 +287,16 @@
|
||||
↻ Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Gantt chart — visual timeline of all deployments. Click
|
||||
a bar to jump to its row in the list below. -->
|
||||
<div id="deploymentGantt" class="mb-4 hidden">
|
||||
<div class="bg-gray-50 dark:bg-slate-900/40 rounded-lg p-3">
|
||||
<svg id="deploymentGanttSvg" class="w-full" style="height: 140px;" preserveAspectRatio="none"></svg>
|
||||
<div id="deploymentGanttLegend" class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-xs text-gray-500 dark:text-gray-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="deploymentTimeline" class="space-y-3">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Loading timeline…</p>
|
||||
</div>
|
||||
@@ -1986,6 +1996,10 @@ loadUnitData().then(() => {
|
||||
// Replaces the legacy loadDeploymentHistory() + loadUnitHistory() pair.
|
||||
// Derives entries from unit_assignments + unit_history + SFM event overlay.
|
||||
|
||||
// Cache the most recent timeline payload so the merge action can look up
|
||||
// which assignment_ids belong together in a mergeable group.
|
||||
let _dtCurrentTimeline = { entries: [], merge_groups: [] };
|
||||
|
||||
async function loadDeploymentTimeline() {
|
||||
const container = document.getElementById('deploymentTimeline');
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">Loading timeline…</p>';
|
||||
@@ -1994,12 +2008,58 @@ async function loadDeploymentTimeline() {
|
||||
const r = await fetch(`/api/units/${currentUnit.id}/deployment_timeline`);
|
||||
if (!r.ok) throw new Error('HTTP ' + r.status);
|
||||
const d = await r.json();
|
||||
renderDeploymentTimeline(d.entries || [], container);
|
||||
_dtCurrentTimeline = {
|
||||
entries: d.entries || [],
|
||||
merge_groups: d.merge_groups || [],
|
||||
};
|
||||
renderDeploymentTimeline(_dtCurrentTimeline.entries, container, _dtCurrentTimeline.merge_groups);
|
||||
} catch (e) {
|
||||
container.innerHTML = `<p class="text-sm text-red-500">Failed to load timeline: ${e.message}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Returns the merge_group (list of assignment_ids) that this assignment is
|
||||
// part of, or null if it isn't in any mergeable group.
|
||||
function _dtFindMergeGroup(assignmentId) {
|
||||
for (const group of _dtCurrentTimeline.merge_groups || []) {
|
||||
if (group.includes(assignmentId)) return group;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function mergeAssignmentGroup(assignmentIds) {
|
||||
if (!Array.isArray(assignmentIds) || assignmentIds.length < 2) return;
|
||||
const msg = `Merge ${assignmentIds.length} consecutive assignment records into one?\n\n`
|
||||
+ `The earliest record is kept and its window extended to span all `
|
||||
+ `of them. The other ${assignmentIds.length - 1} record(s) are deleted.\n\n`
|
||||
+ `Original metadata (notes + ingest source) is preserved. This is `
|
||||
+ `logged to the unit's history as "assignment_merged".`;
|
||||
if (!confirm(msg)) return;
|
||||
|
||||
try {
|
||||
// All assignments share the same project_id (validated server-side).
|
||||
// Pick the first entry's project_id from the cache.
|
||||
const first = (_dtCurrentTimeline.entries || []).find(e =>
|
||||
e.kind === 'assignment' && assignmentIds.includes(e.assignment_id)
|
||||
);
|
||||
const projectId = first ? first.project_id : null;
|
||||
if (!projectId) throw new Error('Could not resolve project id for this group');
|
||||
|
||||
const r = await fetch(`/api/projects/${projectId}/assignments/merge`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ assignment_ids: assignmentIds }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
const err = await r.json().catch(() => ({detail: 'HTTP ' + r.status}));
|
||||
throw new Error(err.detail || 'HTTP ' + r.status);
|
||||
}
|
||||
await loadDeploymentTimeline();
|
||||
} catch (e) {
|
||||
alert(e.message || 'Failed to merge assignments.');
|
||||
}
|
||||
}
|
||||
|
||||
function _dtFmtDate(iso) {
|
||||
if (!iso) return '—';
|
||||
return iso.slice(0, 10);
|
||||
@@ -2044,6 +2104,17 @@ function _dtRenderAssignment(e) {
|
||||
? '<span class="px-2 py-0.5 rounded text-xs bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">active</span>'
|
||||
: '';
|
||||
|
||||
// If this assignment belongs to a mergeable group, show a small
|
||||
// indicator badge — the group-level "Merge" action lives in the
|
||||
// banner at the top of the section to avoid N redundant buttons.
|
||||
const mergeGroup = _dtFindMergeGroup(e.assignment_id);
|
||||
const mergeableBadge = mergeGroup
|
||||
? `<span class="px-2 py-0.5 rounded text-xs bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
|
||||
title="This row is part of a ${mergeGroup.length}-record consecutive group at the same location — see the Merge banner above to combine them.">
|
||||
mergeable
|
||||
</span>`
|
||||
: '';
|
||||
|
||||
const overlay = evCount > 0
|
||||
? `<div class="mt-2 flex items-center gap-4 text-xs text-gray-600 dark:text-gray-400">
|
||||
<span><strong class="text-gray-900 dark:text-white">${evCount.toLocaleString()}</strong> event${evCount === 1 ? '' : 's'}</span>
|
||||
@@ -2056,7 +2127,7 @@ function _dtRenderAssignment(e) {
|
||||
? `<div class="mt-2 text-xs text-gray-600 dark:text-gray-400 italic">${_dtEsc(e.notes)}</div>`
|
||||
: '';
|
||||
|
||||
return `<div class="flex gap-3">
|
||||
return `<div class="flex gap-3 transition-shadow rounded-lg" data-assignment-row="${_dtEsc(e.assignment_id)}">
|
||||
<div class="flex flex-col items-center pt-1">
|
||||
<span class="w-3 h-3 rounded-full ${e.is_active ? 'bg-green-500' : 'bg-seismo-orange'}"></span>
|
||||
</div>
|
||||
@@ -2065,7 +2136,10 @@ function _dtRenderAssignment(e) {
|
||||
<div class="text-sm text-gray-700 dark:text-gray-300">
|
||||
<strong>${start}</strong> → <strong>${end}</strong>${dur}
|
||||
</div>
|
||||
${activeBadge}
|
||||
<div class="flex items-center gap-2">
|
||||
${mergeableBadge}
|
||||
${activeBadge}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">${locLink}</div>
|
||||
${projLine}
|
||||
@@ -2118,18 +2192,253 @@ function _dtRenderStateChange(e) {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderDeploymentTimeline(entries, container) {
|
||||
if (!entries.length) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No deployment history yet. Assign this unit to a project location to start a deployment record.</p>';
|
||||
// ── Gantt chart ─────────────────────────────────────────────────────────────
|
||||
// Renders all assignment windows as colored horizontal bars on an SVG
|
||||
// timeline. Click a bar to scroll its detail row into view in the list
|
||||
// below. Color per location, opacity reduced for closed assignments.
|
||||
// "Mergeable" groups get a unifying outline overlay so they're visible at
|
||||
// a glance as one logical deployment.
|
||||
const _ganttColorPalette = [
|
||||
'#f48b1c', '#142a66', '#7d234d', '#0e7490', '#15803d', '#a16207',
|
||||
'#9333ea', '#dc2626', '#0d9488', '#1d4ed8', '#be185d', '#65a30d',
|
||||
];
|
||||
function _ganttColorFor(locId, locColorMap) {
|
||||
if (locColorMap[locId]) return locColorMap[locId];
|
||||
const idx = Object.keys(locColorMap).length % _ganttColorPalette.length;
|
||||
locColorMap[locId] = _ganttColorPalette[idx];
|
||||
return locColorMap[locId];
|
||||
}
|
||||
|
||||
function _ganttParseDate(iso) {
|
||||
if (!iso) return null;
|
||||
const d = new Date(iso.replace(' ', 'T'));
|
||||
return isNaN(d.getTime()) ? null : d;
|
||||
}
|
||||
|
||||
function _ganttFmtMonth(d) {
|
||||
return d.toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
|
||||
}
|
||||
|
||||
function renderDeploymentGantt(entries, mergeGroups) {
|
||||
const wrapper = document.getElementById('deploymentGantt');
|
||||
const svg = document.getElementById('deploymentGanttSvg');
|
||||
const legend = document.getElementById('deploymentGanttLegend');
|
||||
if (!wrapper || !svg) return;
|
||||
|
||||
const assignments = (entries || []).filter(e => e.kind === 'assignment' && e.starts_at);
|
||||
if (assignments.length === 0) {
|
||||
wrapper.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
wrapper.classList.remove('hidden');
|
||||
|
||||
// Compute time domain. Pad the end by a few days when an active
|
||||
// assignment is present so the "active" bar doesn't reach the very
|
||||
// edge of the chart.
|
||||
const now = new Date();
|
||||
let minDate = null, maxDate = null;
|
||||
for (const a of assignments) {
|
||||
const start = _ganttParseDate(a.starts_at);
|
||||
const end = a.is_active ? now : (_ganttParseDate(a.ends_at) || now);
|
||||
if (start && (!minDate || start < minDate)) minDate = start;
|
||||
if (end && (!maxDate || end > maxDate)) maxDate = end;
|
||||
}
|
||||
if (!minDate || !maxDate) { wrapper.classList.add('hidden'); return; }
|
||||
// Tiny padding at both ends (3% of total span).
|
||||
const span = maxDate - minDate;
|
||||
const pad = Math.max(span * 0.03, 24 * 3600 * 1000); // at least 1 day
|
||||
minDate = new Date(minDate.getTime() - pad);
|
||||
maxDate = new Date(maxDate.getTime() + pad);
|
||||
|
||||
// Build a quick "which mergeGroup is this id in?" map.
|
||||
const idToGroup = {};
|
||||
(mergeGroups || []).forEach((g, idx) => g.forEach(id => { idToGroup[id] = idx; }));
|
||||
|
||||
// Compute SVG geometry.
|
||||
const width = Math.max(svg.clientWidth || svg.parentElement.clientWidth || 800, 400);
|
||||
const height = 140;
|
||||
const padLeft = 8;
|
||||
const padRight = 8;
|
||||
const padTop = 32; // room for month labels above the bars
|
||||
const padBottom = 18; // room for assignment-count axis below
|
||||
const usableW = width - padLeft - padRight;
|
||||
const usableH = height - padTop - padBottom;
|
||||
const totalRange = maxDate - minDate;
|
||||
const xFor = (d) => padLeft + (d - minDate) / totalRange * usableW;
|
||||
|
||||
// Choose one-row-per-bar OR stack overlapping bars. Since same-unit
|
||||
// assignments rarely overlap (only via the brief unassign/reassign
|
||||
// race), a single row is usually fine. But just in case, stack with
|
||||
// simple top-down packing.
|
||||
const lanes = []; // each lane = [{x1, x2, ...}, ...]
|
||||
function placeInLane(start, end) {
|
||||
for (let i = 0; i < lanes.length; i++) {
|
||||
const last = lanes[i][lanes[i].length - 1];
|
||||
if (last.x2 + 2 < start) {
|
||||
lanes[i].push({ x1: start, x2: end });
|
||||
return i;
|
||||
}
|
||||
}
|
||||
lanes.push([{ x1: start, x2: end }]);
|
||||
return lanes.length - 1;
|
||||
}
|
||||
const placed = assignments.map(a => {
|
||||
const start = _ganttParseDate(a.starts_at);
|
||||
const end = a.is_active ? now : (_ganttParseDate(a.ends_at) || now);
|
||||
const x1 = xFor(start);
|
||||
const x2 = xFor(end);
|
||||
const lane = placeInLane(x1, x2);
|
||||
return { a, x1, x2, lane };
|
||||
});
|
||||
const laneCount = Math.max(lanes.length, 1);
|
||||
const barH = Math.max(14, Math.min(28, Math.floor(usableH / laneCount) - 4));
|
||||
const laneSpacing = barH + 4;
|
||||
|
||||
// Month gridlines + labels. Tick on the 1st of each month inside the
|
||||
// domain. If span > 24mo, tick every 3 months instead.
|
||||
const months = [];
|
||||
let monthCursor = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
|
||||
const tickEveryMonths = (totalRange > 24 * 30 * 86400 * 1000) ? 3 : 1;
|
||||
while (monthCursor <= maxDate) {
|
||||
if (monthCursor >= minDate) months.push(new Date(monthCursor));
|
||||
monthCursor.setMonth(monthCursor.getMonth() + tickEveryMonths);
|
||||
}
|
||||
|
||||
// Build the SVG string.
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const gridColor = isDark ? '#374151' : '#e5e7eb';
|
||||
const labelColor = isDark ? '#9ca3af' : '#6b7280';
|
||||
const todayColor = '#f48b1c';
|
||||
|
||||
const locColorMap = {};
|
||||
const usedLocs = {};
|
||||
|
||||
let parts = [];
|
||||
// Month gridlines.
|
||||
months.forEach(m => {
|
||||
const x = xFor(m);
|
||||
parts.push(`<line x1="${x}" y1="${padTop}" x2="${x}" y2="${height - padBottom}" stroke="${gridColor}" stroke-width="1"/>`);
|
||||
parts.push(`<text x="${x + 2}" y="${padTop - 6}" font-size="10" fill="${labelColor}" font-family="system-ui,sans-serif">${_ganttFmtMonth(m)}</text>`);
|
||||
});
|
||||
// Today marker.
|
||||
if (now >= minDate && now <= maxDate) {
|
||||
const x = xFor(now);
|
||||
parts.push(`<line x1="${x}" y1="${padTop}" x2="${x}" y2="${height - padBottom}" stroke="${todayColor}" stroke-width="2" stroke-dasharray="3 2" opacity="0.8"/>`);
|
||||
parts.push(`<text x="${x + 3}" y="${height - padBottom + 12}" font-size="9" fill="${todayColor}" font-family="system-ui,sans-serif">today</text>`);
|
||||
}
|
||||
|
||||
// Bars.
|
||||
placed.forEach(p => {
|
||||
const a = p.a;
|
||||
const color = _ganttColorFor(a.location_id || '_', locColorMap);
|
||||
usedLocs[a.location_name || '(no location)'] = color;
|
||||
const y = padTop + p.lane * laneSpacing;
|
||||
const opacity = a.is_active ? 1.0 : 0.85;
|
||||
const stroke = (a.source === 'metadata_backfill') ? '#3b82f6' : 'none';
|
||||
const strokeWidth = (a.source === 'metadata_backfill') ? 2 : 0;
|
||||
|
||||
const barW = Math.max(p.x2 - p.x1, 3);
|
||||
const tipDates = `${(a.starts_at || '').slice(0,10)} → ${a.is_active ? 'active' : (a.ends_at || '').slice(0,10)}`;
|
||||
const tip = `${(a.location_name || '?').replace(/"/g, '"')} (${tipDates})${a.event_overlay && a.event_overlay.event_count ? ' • ' + a.event_overlay.event_count + ' events' : ''}`;
|
||||
|
||||
parts.push(`<g style="cursor: pointer;" onclick="_ganttScrollTo('${a.assignment_id}')">
|
||||
<title>${tip}</title>
|
||||
<rect x="${p.x1}" y="${y}" width="${barW}" height="${barH}" rx="3"
|
||||
fill="${color}" opacity="${opacity}" stroke="${stroke}" stroke-width="${strokeWidth}"/>
|
||||
${a.is_active ? `<circle cx="${p.x2 - 4}" cy="${y + barH / 2}" r="2.5" fill="#fff" opacity="0.9"/>` : ''}
|
||||
</g>`);
|
||||
|
||||
// Mergeable highlight — thin dashed underline below the bar.
|
||||
if (idToGroup[a.assignment_id] !== undefined) {
|
||||
const uy = y + barH + 1;
|
||||
parts.push(`<line x1="${p.x1}" y1="${uy}" x2="${p.x2}" y2="${uy}" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="2 2" opacity="0.7"/>`);
|
||||
}
|
||||
});
|
||||
|
||||
svg.innerHTML = parts.join('');
|
||||
svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||||
|
||||
// Build legend (one swatch per distinct location).
|
||||
const legendItems = Object.entries(usedLocs).map(([name, color]) =>
|
||||
`<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 rounded" style="background:${color}"></span>${_dtEsc(name)}</span>`
|
||||
);
|
||||
if (mergeGroups && mergeGroups.length > 0) {
|
||||
legendItems.push(`<span class="flex items-center gap-1.5"><span class="inline-block w-3 border-b-2 border-dashed border-blue-500"></span>mergeable group</span>`);
|
||||
}
|
||||
if (placed.some(p => p.a.source === 'metadata_backfill')) {
|
||||
legendItems.push(`<span class="flex items-center gap-1.5"><span class="inline-block w-3 h-2 rounded border-2 border-blue-500"></span>auto-backfilled</span>`);
|
||||
}
|
||||
legend.innerHTML = legendItems.join('');
|
||||
}
|
||||
|
||||
// Click-on-bar handler. Just scroll the matching list row into view +
|
||||
// briefly flash it so the eye finds it.
|
||||
function _ganttScrollTo(assignmentId) {
|
||||
const target = document.querySelector(`[data-assignment-row="${assignmentId}"]`);
|
||||
if (!target) return;
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
target.classList.add('ring-2', 'ring-seismo-orange');
|
||||
setTimeout(() => target.classList.remove('ring-2', 'ring-seismo-orange'), 1500);
|
||||
}
|
||||
|
||||
function renderDeploymentTimeline(entries, container, mergeGroups) {
|
||||
if (!entries.length) {
|
||||
container.innerHTML = '<p class="text-sm text-gray-500 dark:text-gray-400">No deployment history yet. Assign this unit to a project location to start a deployment record.</p>';
|
||||
// Hide the Gantt block too.
|
||||
const g = document.getElementById('deploymentGantt');
|
||||
if (g) g.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Render the Gantt chart first (above the list).
|
||||
renderDeploymentGantt(entries, mergeGroups);
|
||||
|
||||
// Build the mergeable-groups banner. Each group offers one "Merge into
|
||||
// one" button. Skipped when no groups exist.
|
||||
let bannerHtml = '';
|
||||
if (mergeGroups && mergeGroups.length > 0) {
|
||||
const rows = mergeGroups.map(group => {
|
||||
// Look up the entries to describe what we're merging.
|
||||
const groupEntries = (entries || []).filter(e =>
|
||||
e.kind === 'assignment' && group.includes(e.assignment_id)
|
||||
);
|
||||
if (groupEntries.length === 0) return '';
|
||||
const locName = groupEntries[0].location_name || 'unnamed location';
|
||||
const earliest = groupEntries.map(e => e.starts_at).filter(Boolean).sort()[0] || '';
|
||||
const latest = groupEntries.map(e => e.ends_at).filter(Boolean).sort().reverse()[0] || 'present';
|
||||
const idsJson = JSON.stringify(group).replace(/"/g, '"');
|
||||
return `<div class="flex items-center justify-between gap-3 py-1.5">
|
||||
<div class="text-sm text-blue-900 dark:text-blue-200 min-w-0 flex-1">
|
||||
<strong>${group.length} consecutive records</strong> at <strong>${_dtEsc(locName)}</strong>
|
||||
<span class="text-xs text-blue-700 dark:text-blue-300 ml-2">${_dtFmtDate(earliest)} → ${_dtFmtDate(latest)}</span>
|
||||
</div>
|
||||
<button onclick='mergeAssignmentGroup(${JSON.stringify(group)})'
|
||||
class="px-3 py-1 text-xs rounded-full bg-blue-600 hover:bg-blue-700 text-white font-medium whitespace-nowrap">
|
||||
Merge into one
|
||||
</button>
|
||||
</div>`;
|
||||
}).join('');
|
||||
bannerHtml = `<div class="mb-4 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
|
||||
<div class="flex items-start gap-2 mb-2">
|
||||
<svg class="w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="text-xs text-blue-800 dark:text-blue-300">
|
||||
Consecutive deployments at the same location detected. Combine them into a single record to clean up the view (notes + ingest sources are preserved).
|
||||
</div>
|
||||
</div>
|
||||
${rows}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const html = entries.map(e => {
|
||||
if (e.kind === 'assignment') return _dtRenderAssignment(e);
|
||||
if (e.kind === 'gap') return _dtRenderGap(e);
|
||||
if (e.kind === 'state_change') return _dtRenderStateChange(e);
|
||||
return '';
|
||||
}).join('');
|
||||
container.innerHTML = html;
|
||||
|
||||
container.innerHTML = bannerHtml + '<div class="space-y-3">' + html + '</div>';
|
||||
}
|
||||
|
||||
// ── SFM Events section ──────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user