Add interactive ISAC registry filters

2026-07-25 03:30:59 -04:00
parent 2910660c85
commit ddec42afd3
16 changed files with 119 additions and 41 deletions
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import PendingForm from '$lib/components/PendingForm.svelte';
 	import RegistryPagination from '$lib/components/RegistryPagination.svelte';
+	import KpiFilters from '$lib/components/KpiFilters.svelte';
 	let { data, form } = $props();
 	type Effect = { pieces_required: number; stat_attribute_id: string; value: number };
 	type Editor = { id: string; name: string; effects: Effect[] };
@@ -21,7 +22,7 @@

 <svelte:head><title>Brand sets — SHD.build admin</title></svelte:head>
 <div class="module-toolbar"><div><p class="eyebrow">EQUIPMENT SYNERGY REGISTRY</p><h2>BRAND SETS</h2><p>Map equipment brands to the attributes unlocked at each set threshold.</p></div><button class="primary" onclick={() => editing = blank()}>ADD BRAND SET <span>＋</span></button></div>
-<div class="module-kpis"><div><span>TOTAL SETS</span><strong>{data.summary.total}</strong><small>All brand definitions</small></div><div><span>ACTIVE</span><strong>{data.summary.active}</strong><small>Available to builder</small></div><div><span>SET EFFECTS</span><strong>{data.summary.effects}</strong><small>Mapped thresholds</small></div><div><span>ATTRIBUTES</span><strong>{data.stats.length}</strong><small>Available effect targets</small></div></div>
+<KpiFilters active={data.filter} items={[{value:'',label:'TOTAL SETS',count:data.summary.total,description:'Show all definitions'},{value:'active',label:'ACTIVE',count:data.summary.active,description:'Available to builder'},{value:'archived',label:'ARCHIVED',count:data.summary.archived,description:'Unavailable definitions'},{value:'complete',label:'COMPLETE',count:data.summary.complete,description:'All three bonuses mapped'}]}/>
 {#if editing}
 	<div class="dashboard-editor">
 		<div class="editor-title"><div><p class="eyebrow">{editing.id ? 'MODIFY SET' : 'NEW SET'}</p><h3>{editing.id ? editing.name : 'BRAND SET DEFINITION'}</h3></div><button aria-label="Close editor" onclick={() => editing = null}>×</button></div>