64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import type { Component } from 'vue';
|
|
|
|
interface LowStockItem {
|
|
name: string;
|
|
stock: number;
|
|
unit?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
icon?: Component;
|
|
iconColorClass?: string;
|
|
items: LowStockItem[];
|
|
emptyText: string;
|
|
badgeColorClass?: string;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
iconColorClass: 'text-muted-foreground',
|
|
badgeColorClass: 'border-yellow-500/20 bg-yellow-500/10 text-yellow-600',
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Card>
|
|
<CardHeader
|
|
class="flex flex-row items-center justify-between space-y-0 pb-2"
|
|
>
|
|
<div>
|
|
<CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
|
|
</div>
|
|
<component
|
|
v-if="icon"
|
|
:is="icon"
|
|
class="size-4"
|
|
:class="iconColorClass"
|
|
/>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div v-if="items.length > 0" class="space-y-2">
|
|
<div
|
|
v-for="item in items"
|
|
:key="item.name"
|
|
class="flex items-center justify-between rounded-md border px-3 py-2"
|
|
>
|
|
<span class="text-sm">{{ item.name }}</span>
|
|
<Badge variant="outline" :class="badgeColorClass">
|
|
{{ item.stock }} {{ item.unit || 'pcs' }}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="flex h-[80px] items-center justify-center text-sm text-muted-foreground"
|
|
>
|
|
{{ emptyText }}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</template>
|