52 lines
1.3 KiB
Svelte
52 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
estoqueAtual: number;
|
|
estoqueMinimo: number;
|
|
estoqueMaximo?: number;
|
|
unidadeMedida: string;
|
|
}
|
|
|
|
let { estoqueAtual, estoqueMinimo, estoqueMaximo, unidadeMedida }: Props = $props();
|
|
|
|
{@const porcentagem = estoqueMaximo
|
|
? Math.min(100, (estoqueAtual / estoqueMaximo) * 100)
|
|
: estoqueAtual > estoqueMinimo
|
|
? 100
|
|
: Math.max(0, (estoqueAtual / estoqueMinimo) * 100)}
|
|
|
|
{@const cor = estoqueAtual <= estoqueMinimo
|
|
? 'text-error'
|
|
: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
|
|
? 'text-warning'
|
|
: 'text-success'}
|
|
|
|
{@const corBarra = estoqueAtual <= estoqueMinimo
|
|
? 'bg-error'
|
|
: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
|
|
? 'bg-warning'
|
|
: 'bg-success'}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm font-medium">Estoque</span>
|
|
<span class="text-sm font-bold {cor}">
|
|
{estoqueAtual} {unidadeMedida}
|
|
</span>
|
|
</div>
|
|
<div class="w-full bg-base-300 rounded-full h-3 overflow-hidden">
|
|
<div
|
|
class="h-full {corBarra} transition-all duration-500"
|
|
style="width: {porcentagem}%"
|
|
></div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs text-base-content/60">
|
|
<span>Mín: {estoqueMinimo}</span>
|
|
{#if estoqueMaximo}
|
|
<span>Máx: {estoqueMaximo}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
|