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: 'Waiting for Others',
                count: data.waitingForOthers || 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'
            },
            // {
            //     title: 'declined',
            //     count: data.declined || 0,
            //     icon: <FaClock size={18} className="text-purple-600" />,
            //     gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
            //     shadowColor: 'shadow-purple-200/50',
            //     iconBg: 'bg-purple-100 border-purple-200',
            //     textColor: 'text-purple-700',
            //     trend: 'down'
            // },
            // {
            //     title: 'cancelled',
            //     count: data.cancelled || 0,
            //     icon: <FaClock size={18} className="text-green-600" />,
            //     gradient: 'bg-gradient-to-br from-green-50 to-green-100',
            //     shadowColor: 'shadow-green-200/50',
            //     iconBg: 'bg-green-100 border-green-200',
            //     textColor: 'text-green-700',
            //     trend: 'down'
            // },
            // {
            //     title: 'draft',
            //     count: data.draft || 0,
            //     icon: <FaClock size={18} className="text-stone-600" />,
            //     gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
            //     shadowColor: 'shadow-stone-200/50',
            //     iconBg: 'bg-stone-100 border-stone-200',
            //     textColor: 'text-stone-700',
            //     trend: 'down'
            // }
            // Add more cards here if needed
        ];
    };

    const [dashboardData, setDashboardData] = useState<any>(null);
    const [fromDate, setFromDate] = useState<string>(''); // ISO string
    const [toDate, setToDate] = useState<string>('');     // ISO string
    const [cards, setCards] = useState<CardData[]>([]);
    const [accountID, setAccountID] = useState<number>()
    const [isLoading, setIsLoading] = useState<boolean>(false);

    console.log("cards", cards)

    const getUserDetails = async () => {
        try {
            let res = await api.get('/api/user/details')
            let accountIDData = res?.data?.account?.id
            setAccountID(accountIDData)
        } catch (error) {
            console.log(error)
        }
    }

    useEffect(() => {
        getUserDetails()
    }, [])

    const getDashboardData = async (from: string, to: string) => {
        setIsLoading(true)
        const payload = {
            fromDate: from, // already ISO string
            toDate: to,
            account : accountID 
        };

        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);
    }, []);

    useEffect(() => {
        if (fromDate && toDate && accountID) {
            getDashboardData(fromDate, toDate);
        }
    }, [fromDate, toDate , accountID]);

    


    // Set default 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;