131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<template>
|
|
<UCard v-if="expiringItems.length > 0">
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5 text-orange-500" />
|
|
<h3 class="text-lg font-semibold">Items Expiring Soon</h3>
|
|
</div>
|
|
<UBadge color="orange" variant="soft">
|
|
{{ expiringItems.length }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="item in displayedItems"
|
|
:key="item.id"
|
|
class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors"
|
|
:class="getItemBgClass(item)"
|
|
>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<UBadge :color="getExpiryColor(item)" size="xs">
|
|
{{ getExpiryText(item) }}
|
|
</UBadge>
|
|
<span class="text-gray-600">
|
|
{{ item.quantity }} {{ item.unit?.abbreviation }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<UButton
|
|
size="xs"
|
|
color="gray"
|
|
variant="ghost"
|
|
icon="i-heroicons-arrow-right"
|
|
@click="$emit('view-item', item)"
|
|
/>
|
|
</div>
|
|
|
|
<UButton
|
|
v-if="expiringItems.length > maxDisplay"
|
|
color="gray"
|
|
variant="soft"
|
|
size="sm"
|
|
class="w-full"
|
|
@click="expanded = !expanded"
|
|
>
|
|
{{ expanded ? 'Show Less' : `Show ${expiringItems.length - maxDisplay} More` }}
|
|
</UButton>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
items: any[]
|
|
maxDisplay?: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'view-item': [item: any]
|
|
}>()
|
|
|
|
const expanded = ref(false)
|
|
const maxDisplay = props.maxDisplay || 5
|
|
|
|
// Filter and sort items by expiry
|
|
const expiringItems = computed(() => {
|
|
const now = new Date()
|
|
const thirtyDaysFromNow = new Date()
|
|
thirtyDaysFromNow.setDate(now.getDate() + 30)
|
|
|
|
return props.items
|
|
.filter(item => {
|
|
if (!item.expiry_date) return false
|
|
const expiryDate = new Date(item.expiry_date)
|
|
return expiryDate <= thirtyDaysFromNow
|
|
})
|
|
.sort((a, b) => {
|
|
const dateA = new Date(a.expiry_date)
|
|
const dateB = new Date(b.expiry_date)
|
|
return dateA.getTime() - dateB.getTime()
|
|
})
|
|
})
|
|
|
|
const displayedItems = computed(() => {
|
|
if (expanded.value) {
|
|
return expiringItems.value
|
|
}
|
|
return expiringItems.value.slice(0, maxDisplay)
|
|
})
|
|
|
|
// Helper functions
|
|
const getDaysUntilExpiry = (item: any) => {
|
|
if (!item.expiry_date) return null
|
|
const today = new Date()
|
|
const expiry = new Date(item.expiry_date)
|
|
return Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
|
|
}
|
|
|
|
const getExpiryColor = (item: any) => {
|
|
const days = getDaysUntilExpiry(item)
|
|
if (days === null) return 'gray'
|
|
if (days < 0) return 'red'
|
|
if (days <= 3) return 'orange'
|
|
if (days <= 7) return 'yellow'
|
|
return 'green'
|
|
}
|
|
|
|
const getExpiryText = (item: any) => {
|
|
const days = getDaysUntilExpiry(item)
|
|
if (days === null) return 'No expiry'
|
|
if (days < 0) return `Expired ${Math.abs(days)}d ago`
|
|
if (days === 0) return 'Expires today'
|
|
if (days === 1) return 'Expires tomorrow'
|
|
if (days <= 7) return `${days} days left`
|
|
return `${days} days left`
|
|
}
|
|
|
|
const getItemBgClass = (item: any) => {
|
|
const days = getDaysUntilExpiry(item)
|
|
if (days === null) return ''
|
|
if (days < 0) return 'bg-red-50'
|
|
if (days <= 3) return 'bg-orange-50'
|
|
return ''
|
|
}
|
|
</script>
|