useStats

import { useStats } from '@loopkit/react';

function Dashboard({ deckId }: { deckId: string }) {
    const { stats, loading, error, refetch } = useStats(deckId);
}

interface UseStatsReturn {
    stats: DeckStats | null;
    loading: boolean;
    error: string | null;
    refetch: () => Promise<void>;
}

interface DeckStats {
    breakdown: {
        new: number;
        learning: number;
        review: number;
        relearning: number;
    };
    retention: number;              // 0-1 (e.g., 0.85 = 85%)
    streak: number;                 // Consecutive study days
    averageEase: number;            // Average ease factor
    reviewsPerDay: Record<string, number>;  // Date → count
    forecast: Record<string, number>;       // Date → predicted count
}

function StatsDashboard({ deckId }: { deckId: string }) {
    const { stats, loading } = useStats(deckId);

    if (loading || !stats) return <p>Loading stats...</p>;

    return (
        <div>
            <h3>Card Breakdown</h3>
            <ul>
                <li>New: {stats.breakdown.new}</li>
                <li>Learning: {stats.breakdown.learning}</li>
                <li>Review: {stats.breakdown.review}</li>
                <li>Relearning: {stats.breakdown.relearning}</li>
            </ul>

            <h3>Performance</h3>
            <p>Retention: {(stats.retention * 100).toFixed(1)}%</p>
            <p>Study streak: {stats.streak} days</p>
            <p>Average ease: {stats.averageEase.toFixed(2)}</p>
        </div>
    );
}