ajinkya-mhetre-mern/frontend/src/components/Framers/Stats.jsx

A MERN starter with frontend and backend folders

import React, { useEffect, useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';
const baseUrl = import.meta.env.VITE_API_URL;

function Stats() {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
    const { token } = useAuth();

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const res = await fetch(`${baseUrl}/farmer/dashboard-stats`, {
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        });

        const data = await res.json();

        if (data.success) {
          setStats(data.stats);
        } else {
          setError('Failed to fetch stats.');
        }
      } catch (err) {
        setError('Error fetching stats.');
      } finally {
        setLoading(false);
      }
    };

    fetchStats();
  }, []);

  if (loading) {
    return <div className="w-full text-center py-6">Loading stats...</div>;
  }

  if (error) {
    return <div className="w-full text-center text-red-600 py-6">{error}</div>;
  }

  return (
    <div className="w-full bg-white p-4 rounded shadow">
      <div className="flex flex-wrap justify-between gap-4">
        {Object.entries(stats).map(([key, value]) => (
          <div
            key={key}
            className="flex-1 min-w-[140px] bg-gray-100 rounded p-4 text-center shadow-sm"
          >
            <h3 className="text-sm font-medium text-gray-600 capitalize truncate">
              {key.replace(/([A-Z])/g, ' $1')}
            </h3>
            <p className="text-2xl font-bold text-gray-800 mt-1">{value}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Stats;