← back to Watches

src/components/Dashboard.jsx

124 lines

import React from 'react';

function Dashboard({ statistics, watches, onWatchSelect }) {
  if (!statistics) {
    return <div>Loading statistics...</div>;
  }

  return (
    <div className="space-y-6">
      {/* Statistics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <StatCard
          title="Total Watches"
          value={statistics.totalWatches}
          icon="⌚"
          color="bg-blue-500"
        />
        <StatCard
          title="Watch Series"
          value={statistics.totalSeries}
          icon="📚"
          color="bg-green-500"
        />
        <StatCard
          title="Avg Appreciation"
          value={`${statistics.averageAppreciation}%`}
          icon="📈"
          color="bg-purple-500"
        />
        <StatCard
          title="Data Points"
          value={watches.reduce((sum, w) => sum + w.priceHistory.length, 0)}
          icon="📊"
          color="bg-orange-500"
        />
      </div>

      {/* Top Performers */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center">
          <span className="mr-2">🏆</span>
          Top Performing Watches
        </h2>
        <div className="space-y-3">
          {statistics.topPerformers.map((watch, index) => (
            <div
              key={watch.id}
              className="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
              onClick={() => {
                const fullWatch = watches.find(w => w.id === watch.id);
                if (fullWatch) onWatchSelect(fullWatch);
              }}
            >
              <div className="flex items-center space-x-4">
                <div className="text-2xl font-bold text-omega-red w-8">
                  #{index + 1}
                </div>
                <div>
                  <h3 className="font-semibold text-gray-800">{watch.model}</h3>
                  <p className="text-sm text-gray-500">{watch.series}</p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-xl font-bold text-green-600">
                  +{watch.appreciation}%
                </p>
                <p className="text-sm text-gray-500">
                  ${watch.currentPrice.toLocaleString()}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Series Breakdown */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-2xl font-bold text-gray-800 mb-4">
          Watch Collections
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {getSeriesBreakdown(watches).map(series => (
            <div key={series.name} className="p-4 bg-gradient-to-br from-omega-navy to-omega-red text-white rounded-lg">
              <h3 className="text-lg font-bold mb-2">{series.name}</h3>
              <p className="text-3xl font-bold">{series.count}</p>
              <p className="text-sm opacity-90">models tracked</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value, icon, color }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-gray-500 text-sm font-medium">{title}</p>
          <p className="text-3xl font-bold text-gray-800 mt-2">{value}</p>
        </div>
        <div className={`text-4xl ${color} w-16 h-16 rounded-full flex items-center justify-center`}>
          {icon}
        </div>
      </div>
    </div>
  );
}

function getSeriesBreakdown(watches) {
  const seriesMap = {};
  watches.forEach(watch => {
    seriesMap[watch.series] = (seriesMap[watch.series] || 0) + 1;
  });

  return Object.entries(seriesMap).map(([name, count]) => ({
    name,
    count
  }));
}

export default Dashboard;