123 lines
4.7 KiB
TypeScript
123 lines
4.7 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { ShoppingEvent } from '../types';
|
|
import { shoppingEventApi } from '../services/api';
|
|
|
|
const ShoppingEventList: React.FC = () => {
|
|
const [events, setEvents] = useState<ShoppingEvent[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
fetchEvents();
|
|
}, []);
|
|
|
|
const fetchEvents = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await shoppingEventApi.getAll();
|
|
setEvents(response.data);
|
|
} catch (err) {
|
|
setError('Failed to fetch shopping events');
|
|
console.error('Error fetching events:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-900">Shopping Events</h1>
|
|
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
Add New Event
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white shadow rounded-lg overflow-hidden">
|
|
{events.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No shopping events</h3>
|
|
<p className="mt-1 text-sm text-gray-500">Get started by recording your first purchase.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 p-6">
|
|
{events.map((event) => (
|
|
<div key={event.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-lg font-medium text-gray-900">{event.shop.name}</h3>
|
|
<p className="text-sm text-gray-600">{event.shop.city}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-gray-900">
|
|
{new Date(event.date).toLocaleDateString()}
|
|
</p>
|
|
{event.total_amount && (
|
|
<p className="text-lg font-semibold text-green-600">
|
|
${event.total_amount.toFixed(2)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{event.groceries.length > 0 && (
|
|
<div className="mb-4">
|
|
<h4 className="text-sm font-medium text-gray-700 mb-2">Items Purchased:</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
{event.groceries.map((grocery) => (
|
|
<div key={grocery.id} className="bg-gray-50 rounded px-3 py-2">
|
|
<span className="text-sm text-gray-900">{grocery.name}</span>
|
|
<span className="text-xs text-gray-600 ml-2">${grocery.price}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{event.notes && (
|
|
<div className="mb-4">
|
|
<h4 className="text-sm font-medium text-gray-700 mb-1">Notes:</h4>
|
|
<p className="text-sm text-gray-600">{event.notes}</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between items-center text-sm">
|
|
<span className="text-gray-500">
|
|
Event #{event.id} • {new Date(event.created_at).toLocaleDateString()}
|
|
</span>
|
|
<div className="flex space-x-2">
|
|
<button className="text-indigo-600 hover:text-indigo-900">
|
|
View Details
|
|
</button>
|
|
<button className="text-red-600 hover:text-red-900">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShoppingEventList;
|