import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Search } from 'lucide-react';
const RecallsDashboard = () => {
const [fdaData, setFdaData] = useState([]);
const [usdaData, setUsdaData] = useState([]);
const [loading, setLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
// Function to format date
const formatDate = (dateString) => {
return new Date(dateString).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
};
// Filter function for both datasets
const filterData = (data, term) => {
return data.filter(item =>
(item.product?.toLowerCase().includes(term.toLowerCase()) ||
item.reason?.toLowerCase().includes(term.toLowerCase()) ||
item.recalling_firm?.toLowerCase().includes(term.toLowerCase()))
);
};
return (
Food Safety Recalls Dashboard
setSearchTerm(e.target.value)}
/>
FDA RecallsUSDA Recalls
{loading ? (
Loading FDA recalls...
) : fdaData.length === 0 ? (
No FDA Recalls Found
There are no FDA recalls matching your search criteria.
) : (
filterData(fdaData, searchTerm).map((recall, index) => (
{recall.product}
Date: {formatDate(recall.recall_initiation_date)}
Company: {recall.recalling_firm}
Reason: {recall.reason_for_recall}
))
)}
{loading ? (
Loading USDA recalls...
) : usdaData.length === 0 ? (
No USDA Recalls Found
There are no USDA recalls matching your search criteria.
) : (
filterData(usdaData, searchTerm).map((recall, index) => (
{recall.product}
