diff --git a/play-life-web/src/components/ShoppingItemHistory.jsx b/play-life-web/src/components/ShoppingItemHistory.jsx
new file mode 100644
index 0000000..49be2e2
--- /dev/null
+++ b/play-life-web/src/components/ShoppingItemHistory.jsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useAuth } from './auth/AuthContext'
+import LoadingError from './LoadingError'
+import Toast from './Toast'
+import './Integrations.css'
+
+function ShoppingItemHistory({ itemId, onNavigate }) {
+ const { authFetch } = useAuth()
+ const [history, setHistory] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [toastMessage, setToastMessage] = useState(null)
+ const [deletingId, setDeletingId] = useState(null)
+
+ const fetchHistory = useCallback(async () => {
+ if (!itemId) return
+ try {
+ setLoading(true)
+ setError(null)
+ const response = await authFetch(`/api/shopping/items/${itemId}/history`)
+ if (!response.ok) {
+ throw new Error('Ошибка загрузки истории')
+ }
+ const data = await response.json()
+ setHistory(Array.isArray(data) ? data : [])
+ } catch (err) {
+ setError(err.message)
+ } finally {
+ setLoading(false)
+ }
+ }, [itemId, authFetch])
+
+ useEffect(() => {
+ fetchHistory()
+ }, [fetchHistory])
+
+ const handleDelete = async (historyId) => {
+ setDeletingId(historyId)
+ try {
+ const response = await authFetch(`/api/shopping/history/${historyId}`, {
+ method: 'DELETE',
+ })
+ if (!response.ok) {
+ throw new Error('Ошибка удаления')
+ }
+ setHistory(prev => prev.filter(entry => entry.id !== historyId))
+ setToastMessage({ text: 'Запись удалена', type: 'success' })
+ } catch (err) {
+ setToastMessage({ text: err.message || 'Ошибка', type: 'error' })
+ } finally {
+ setDeletingId(null)
+ }
+ }
+
+ const formatDate = (dateStr) => {
+ const date = new Date(dateStr)
+ const day = date.getDate()
+ const months = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']
+ const month = months[date.getMonth()]
+ const year = date.getFullYear()
+ const hours = String(date.getHours()).padStart(2, '0')
+ const minutes = String(date.getMinutes()).padStart(2, '0')
+ return `${day} ${month} ${year}, ${hours}:${minutes}`
+ }
+
+ const formatVolume = (volume) => {
+ if (volume === 1) return '1'
+ const rounded = Math.round(volume * 10000) / 10000
+ return rounded.toString()
+ }
+
+ return (
+
+ {onNavigate && (
+
+ )}
+
+ {loading ? (
+
+ ) : error ? (
+
+ ) : history.length === 0 ? (
+ <>
+
История покупок
+
+
+ ) : (
+
+
История покупок
+
+ {history.map((entry) => (
+
+
+
+ {entry.name}
+
+
+ Объём: {formatVolume(entry.volume)}
+
+
+ {formatDate(entry.completed_at)}
+
+
+ ))}
+
+
+ )}
+
+ {toastMessage && (
+
setToastMessage(null)}
+ />
+ )}
+
+ )
+}
+
+export default ShoppingItemHistory