Makes the progress bar more informative

This commit is contained in:
2026-05-18 13:55:09 -05:00
parent 53706b4035
commit 63d027ebb7

View File

@@ -171,6 +171,8 @@
}
const approved = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'APPROVED').length)
const submitted = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'SUBMITTED').length)
const rejected = $derived(Object.values(itemStatuses).filter(s => s.itemFoundStatus === 'REJECTED').length)
</script>
<div class="pb-20">
@@ -189,8 +191,12 @@
<p class="text-sm text-base-content/50 mt-0.5">Team: <span class="font-medium text-base-content/70">{myTeam.name}</span></p>
{#if items.length > 0}
<div class="flex items-center gap-2 mt-2">
<progress class="progress progress-primary flex-1 h-1.5" value={approved} max={items.length}></progress>
<span class="text-xs font-medium text-primary">{approved}/{items.length}</span>
<div class="flex-1 h-2 rounded-full overflow-hidden bg-base-300 flex">
<div class="bg-success h-full transition-all" style="width: {approved / items.length * 100}%"></div>
<div class="bg-warning h-full transition-all" style="width: {submitted / items.length * 100}%"></div>
<div class="bg-error h-full transition-all" style="width: {rejected / items.length * 100}%"></div>
</div>
<span class="text-xs font-medium text-base-content/60">{approved}/{items.length}</span>
</div>
{/if}
{/if}