From 6eb3169be394fb575733faa74cd93d8f7aa34510 Mon Sep 17 00:00:00 2001
From: Pantry Lead Agent <pantry-bot@jeanlucmakiola.de>
Date: Wed, 25 Feb 2026 01:27:07 +0000
Subject: [PATCH] feat: create ExpiryDashboard component (#69)

---
 app/components/inventory/ExpiryDashboard.vue | 130 +++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 app/components/inventory/ExpiryDashboard.vue

diff --git a/app/components/inventory/ExpiryDashboard.vue b/app/components/inventory/ExpiryDashboard.vue
new file mode 100644
index 0000000..88d639a
--- /dev/null
+++ b/app/components/inventory/ExpiryDashboard.vue
@@ -0,0 +1,130 @@
+<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>