SME-Web/src/components/home/Home.tsx

import React, { useEffect, useState, useCallback } from 'react';
import AccountNav from '../accounts/AccountNav';
import Cards from './Cards';
import StartSection from './StartSection';
import api from '../../config/api';
import {
    FaCheckCircle,
    FaClock,
    FaHourglassHalf,
    FaTasks,
    FaChevronDown,
    FaPlus,
    FaUserPlus,
    FaFilter,
    FaCalendarAlt
} from 'react-icons/fa';

interface CardData {
    title: string;
    count: number;
    icon: JSX.Element;
    gradient: string;
    shadowColor: string;
    iconBg: string;
    textColor: string;
    percentage?: number;
    trend?: 'up' | 'down' | 'stable';
}

const Home = () => {
    const mapApiDataToCards = (data: any): CardData[] => {
        return [
            {
                title: 'Action Needed',
                count: data.actionNeeded || 0,
                icon: <FaTasks size={18} className="text-indigo-600" />,
                gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
                shadowColor: 'shadow-indigo-200/50',
                iconBg: 'bg-indigo-100 border-indigo-200',
                textColor: 'text-indigo-700',
                trend: 'up'
            },
            {
                title: 'Expiring Soon',
                count: data.expiring || 0,
                icon: <FaHourglassHalf size={18} className="text-rose-600" />,
                gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
                shadowColor: 'shadow-rose-200/50',
                iconBg: 'bg-rose-100 border-rose-200',
                textColor: 'text-rose-700',
                trend: 'up'
            },
            {
                title: 'Completed',
                count: data.completed || 0,
                icon: <FaCheckCircle size={18} className="text-teal-600" />,
                gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
                shadowColor: 'shadow-teal-200/50',
                iconBg: 'bg-teal-100 border-teal-200',
                textColor: 'text-teal-700',
                trend: 'up'
            },
            {
                title: 'Draft',
                count: data.draft || 0,
                icon: <FaClock size={18} className="text-stone-600" />,
                gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
                shadowColor: 'shadow-blue-200/50',
                iconBg: 'bg-blue-100 border-blue-200',
                textColor: 'text-blue-700',
                trend: 'down'
            },
        ];
    };

    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );
    const [dashboardData, setDashboardData] = useState<any>(null);
    const [fromDate, setFromDate] = useState<string>('');
    const [toDate, setToDate] = useState<string>('');
    const [cards, setCards] = useState<CardData[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(false);

    console.log("activeAccountId", activeAccountId);
    console.log("cards", cards);

    const getDashboardData = async () => {
        if (!activeAccountId) return;
        
        setIsLoading(true);
        const payload = {
            account: activeAccountId
        };

        try {
            const res = await api.get('/api/dashboard', { params: payload });
            setDashboardData(res.data);
            console.log("Dashboard Data:", res.data);
            const cardDataArray = mapApiDataToCards(res.data);
            setCards(cardDataArray);
        } catch (error) {
            console.error("Error fetching dashboard data:", error);
        } finally {
            setIsLoading(false);
        }
    };

    const handleDateRangeChange = useCallback(async (range: { from: string; to: string }) => {
        const isoFrom = new Date(range.from).toISOString();
        const isoTo = new Date(range.to).toISOString();
        setFromDate(isoFrom);
        setToDate(isoTo);
    }, []);

    // Listen for sessionStorage changes
    useEffect(() => {
        const handleStorageChange = (e: StorageEvent) => {
            if (e.key === 'activeAccountId') {
                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                setActiveAccountId(newActiveAccountId);
            }
        };

        // Listen for storage events (works for changes from other tabs)
        window.addEventListener('storage', handleStorageChange);

        // Custom event listener for same-tab changes
        const handleCustomStorageChange = (e: CustomEvent) => {
            if (e.detail.key === 'activeAccountId') {
                setActiveAccountId(e.detail.newValue);
            }
        };

        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);

        return () => {
            window.removeEventListener('storage', handleStorageChange);
            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
        };
    }, []);

    // Re-fetch dashboard data when activeAccountId changes
    useEffect(() => {
        if (activeAccountId) {
            getDashboardData();
        }
    }, [activeAccountId]);

    // Set default date range on mount (last 7 days)
    useEffect(() => {
        const now = new Date();
        const from = new Date();
        from.setDate(now.getDate() - 7);

        setFromDate(from.toISOString());
        setToDate(now.toISOString());
    }, []);

    return (
        <>
            <Cards
                onDateRangeChange={handleDateRangeChange}
                dashboardData={dashboardData}
                fromDate={fromDate}
                toDate={toDate}
                cards={cards}
                isLoading={isLoading}
            />
            <StartSection />
        </>
    );
};

export default Home;