"use client"; import React, { useState, useEffect } from "react"; import { getStockMovementSheets, getStockMovementSheet } from "@/lib/api"; /** * ExpiryReferenceModal Component * * Read-only modal to view all expiry dates across inventory. * Shows items, batches, expiry dates, and available quantities. */ const BRAND = "#4c6fff"; const BRAND_GRADIENT = "linear-gradient(135deg, #4c6fff 0%, #5b7cff 100%)"; interface ExpiryRecord { itemCode: string; itemName: string; batchNumber: string; expiryDate: string; totalBags: number; totalMt: number; warehouses: string[]; } interface ExpiryReferenceModalProps { isOpen: boolean; onClose: () => void; } export default function ExpiryReferenceModal({ isOpen, onClose, }: ExpiryReferenceModalProps) { const [loading, setLoading] = useState(false); const [expiryRecords, setExpiryRecords] = useState([]); const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { if (isOpen) { loadExpiryData(); } }, [isOpen]); async function loadExpiryData() { setLoading(true); try { // Get all approved sheets const sheets = await getStockMovementSheets(); const approvedSheets = sheets.filter((s) => s.approvalStatus === "approved"); // Map to store aggregated expiry data const expiryMap = new Map(); // Fetch each sheet with line items for (const sheet of approvedSheets) { try { const fullSheet = await getStockMovementSheet(sheet.id); for (const lineItem of fullSheet.lineItems ?? []) { if (!lineItem.expiryDate) continue; const itemCode = lineItem.itemCode ?? "Unknown"; const itemName = lineItem.itemName || "-"; const batchNumber = lineItem.batchNumber || "-"; const expiryDate = lineItem.expiryDate; const key = `${itemCode}-${batchNumber}-${expiryDate}`; // Extract bag weight from unit field (e.g., "BAG/1x25kg" -> 25) const extractBagWeight = (unit: string | null): number => { if (!unit) return 25; // Default fallback const match = unit.match(/(\d+)x(\d+(?:\.\d+)?)kg/i); if (match) { return parseFloat(match[1]) * parseFloat(match[2]); } return 25; // Default fallback }; const bagWeightKg = extractBagWeight(lineItem.unit); if (expiryMap.has(key)) { const existing = expiryMap.get(key)!; // Aggregate quantities Object.entries(lineItem.warehouseBags ?? {}).forEach(([wId, bags]) => { existing.totalBags += bags; if (!existing.warehouses.includes(wId)) { existing.warehouses.push(wId); } }); existing.totalMt = (existing.totalBags * bagWeightKg) / 1000; } else { const totalBags = Object.values(lineItem.warehouseBags ?? {}).reduce( (sum, bags) => sum + bags, 0 ); const totalMt = (totalBags * bagWeightKg) / 1000; expiryMap.set(key, { itemCode, itemName, batchNumber, expiryDate, totalBags, totalMt, warehouses: Object.keys(lineItem.warehouseBags ?? {}), }); } } } catch (err) { console.error(`Error fetching sheet ${sheet.id}:`, err); } } // Convert to array and sort by expiry date (earliest first) const records = Array.from(expiryMap.values()).sort((a, b) => { return new Date(a.expiryDate).getTime() - new Date(b.expiryDate).getTime(); }); setExpiryRecords(records); } catch (err) { console.error("Error loading expiry data:", err); } finally { setLoading(false); } } // Filter records based on search const filteredRecords = expiryRecords.filter((record) => { const searchLower = searchQuery.toLowerCase(); return ( !searchQuery || record.itemCode.toLowerCase().includes(searchLower) || record.itemName.toLowerCase().includes(searchLower) || record.batchNumber.toLowerCase().includes(searchLower) ); }); // Handle Escape key useEffect(() => { function handleEscape(e: KeyboardEvent) { if (e.key === "Escape" && isOpen) { onClose(); } } document.addEventListener("keydown", handleEscape); return () => document.removeEventListener("keydown", handleEscape); }, [isOpen, onClose]); if (!isOpen) return null; return (
e.stopPropagation()} > {/* Modal Header */}

📅 Expiry Reference

View all batch expiry dates across inventory

{/* Search Bar */}
setSearchQuery(e.target.value)} style={{ width: "100%", padding: "10px 14px", borderRadius: 8, border: "1.5px solid var(--line)", fontSize: "0.88rem", fontFamily: "inherit", color: "var(--ink)", outline: "none", boxSizing: "border-box", }} />
{/* Modal Body */}
{loading ? (

Loading expiry data...

) : filteredRecords.length === 0 ? (

{searchQuery ? "No matching records found" : "No expiry data available"}

{searchQuery ? "Try a different search term" : "Expiry data will appear here once stock-in sheets are approved"}

) : (
{filteredRecords.map((record, idx) => { const expiryDate = new Date(record.expiryDate); const today = new Date(); const daysUntilExpiry = Math.floor( (expiryDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24) ); const isExpiringSoon = daysUntilExpiry <= 30 && daysUntilExpiry >= 0; const isExpired = daysUntilExpiry < 0; return ( ); })}
Item Code Item Name Batch Number Expiry Date Total Bags Total MT
{record.itemCode} {record.itemName} {record.batchNumber}
{expiryDate.toLocaleDateString("en-AE")} {isExpired && ( EXPIRED )} {isExpiringSoon && !isExpired && ( {daysUntilExpiry}d left )}
{record.totalBags.toLocaleString()} {record.totalMt.toFixed(2)}
)}
{/* Modal Footer */}
Showing {filteredRecords.length} of {expiryRecords.length} records
{/* CSS for spinner animation */}
); }