Function StatsPanel

components/StatsPanel.tsx:14–168

({
  completedJobs,
  onDownloadAll,
  onDownloadZip,
  onClearCompleted,
  isZipping,
})

}

export const StatsPanel: React.FC<StatsPanelProps> = ({
  completedJobs,
  onDownloadAll,
  onDownloadZip,
  onClearCompleted,
  isZipping,
}) => {
  const stats = useMemo(() => {
    let totalOriginal = 0;
    let totalOptimized = 0;

    completedJobs.forEach(job => {
      if (job.stats) {
        totalOriginal += job.stats.originalSize;
        totalOptimized += job.stats.optimizedSize;
      }
    });

    const validIntervals = completedJobs
      .filter(j => j.startedAt && j.completedAt)
      .map(j => ({start: j.startedAt!, end: j.completedAt!}))
      .sort((a, b) => a.start - b.start);

    let totalTime = 0;
    if (validIntervals.length > 0) {
      let currentStart = validIntervals[0].start;
      let currentEnd = validIntervals[0].end;

      for (let i = 1; i < validIntervals.length; i++) {
        const next = validIntervals[i];
        if (next.start < currentEnd) {
          currentEnd = Math.max(currentEnd, next.end);
        } else {
          totalTime += currentEnd - currentStart;
          currentStart = next.start;
          currentEnd = next.end;
        }
      }
      totalTime += currentEnd - currentStart;
    }

    if (totalOriginal === 0)
      return {percent: '0', isIncrease: false, savedBytes: 0, totalTime: 0};

    const diff = totalOriginal - totalOptimized;
    const percentVal = (diff / totalOriginal) * 100;

    return {
      percent: Math.abs(percentVal).toFixed(1),
      isIncrease: percentVal < 0,
      savedBytes: diff,
      totalTime,
    };
  }, [completedJobs]);

  return (
    <div className="sticky top-6 space-y-6 z-20 transition-all duration-300 ease-out">
      <div className="bg-gleam-dark text-gleam-cream rounded-3xl p-8 shadow-xl relative overflow-hidden ring-4 ring-black/5 group transition-transform duration-300 dark:ring-white/5 dark:bg-black">