Construimos Software para tu Negocio

import { useState, useEffect } from "react";

export default function DashboardHome() {
  const [analyticsData, setAnalyticsData] = useState({
    totalSales: 0,
    newUsers: 0,
    pendingOrders: 0,
  });

  useEffect(() => {
    setTimeout(() => {
      setAnalyticsData({
        totalSales: 25324,
        newUsers: 128,
        pendingOrders: 35,
      });
    }, 1000);
  }, []);

  return (
    <div className="min-h-screen bg-gray-50 p-10">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-800">
          Welcome back, User!
        </h1>
        <p className="mt-2 text-gray-600">Here’s what’s happening today:</p>

        <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h3>Total Sales</h3>
            <p className="text-4xl font-bold text-green-600">
              ${analyticsData.totalSales.toLocaleString()}
            </p>
          </div>
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h3>New Users</h3>
            <p className="text-4xl font-bold text-blue-600">
              {analyticsData.newUsers}
            </p>
          </div>
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h3>Pending Orders</h3>
            <p className="text-4xl font-bold text-yellow-600">
              {analyticsData.pendingOrders}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}