Add stock status history tracking and timeline visualization

- Create stock_status_history table to track status changes over time
- Add stockStatusHistoryQueries with getByProductId, recordChange, getStats
- Update scheduler to record status changes
- Update product creation and manual refresh to record initial/changed status
- Add GET /products/:id/stock-history API endpoint
- Create StockTimeline component with:
  - Visual timeline bar showing in-stock (green) vs out-of-stock (red)
  - Availability percentage
  - Outage count and duration stats
- Integrate timeline into ProductDetail page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
clucraft 2026-01-22 14:23:55 -05:00
parent 4928d6b9d3
commit 6c2aece1e8
8 changed files with 528 additions and 6 deletions

View file

@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import Layout from '../components/Layout';
import PriceChart from '../components/PriceChart';
import StockTimeline from '../components/StockTimeline';
import { useToast } from '../context/ToastContext';
import {
productsApi,
@ -521,6 +522,8 @@ export default function ProductDetail() {
onRangeChange={handleRangeChange}
/>
<StockTimeline productId={productId} days={30} />
{notificationSettings && (
(notificationSettings.telegram_configured && notificationSettings.telegram_enabled) ||
(notificationSettings.discord_configured && notificationSettings.discord_enabled) ||