Blame for frontend/src/components/JobProgressCard.tsx

/**
 * JobProgressCard component - Display job status and progress
 */

import React from 'react';
import {
  Box,
  Typography,
  Paper,
  LinearProgress,
  Chip,
} from '@mui/material';
import {
  AccessTime as TimeIcon,
  Speed as SpeedIcon,
  CheckCircle as CompleteIcon,
  Error as ErrorIcon,
  HourglassEmpty as PendingIcon,
} from '@mui/icons-material';

interface JobProgressCardProps {
  jobId: string;
  status: 'pending' | 'processing' | 'completed' | 'failed' | 'running' | 'queued';
  rowsProcessed: number;
  totalRows: number;
  startedAt?: string;
  completedAt?: string;
  accuracy?: number;
}

const JobProgressCard: React.FC<JobProgressCardProps> = ({
  jobId,
  status,
  rowsProcessed,
  totalRows,
  startedAt,
  completedAt,
  accuracy,
}) => {
  const progress = totalRows > 0 ? (rowsProcessed / totalRows) * 100 : 0;

  const getStatusColor = (): 'default' | 'primary' | 'success' | 'error' | 'warning' => {
    switch (status) {
      case 'completed':
        return 'success';
      case 'failed':
        return 'error';
      case 'processing':
      case 'running':
        return 'primary';
      case 'queued':
        return 'warning';
      default:
        return 'default';
    }
  };

  const getStatusIcon = () => {
    switch (status) {
      case 'completed':
        return <CompleteIcon />;
      case 'failed':
        return <ErrorIcon />;
      case 'processing':
      case 'running':
        return <PendingIcon />;
      default:
        return <PendingIcon />;
    }
  };

  const getStatusLabel = (): string => {
    switch (status) {
      case 'completed':
        return 'Completed';
      case 'failed':
        return 'Failed';
      case 'processing':
      case 'running':
        return 'Processing';
      case 'queued':
        return 'Queued';
      default:
        return 'Pending';
    }
  };

  const formatElapsedTime = (): string => {
    if (!startedAt) return 'N/A';
    const start = new Date(startedAt);
    const end = completedAt ? new Date(completedAt) : new Date();
    const diffMs = end.getTime() - start.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMins / 60);

    if (diffHours > 0) {
      return `${diffHours}h ${diffMins % 60}m`;
    }
    return `${diffMins}m`;
  };

  const estimateRemaining = (): string => {
    if ((status !== 'processing' && status !== 'running') || !startedAt || rowsProcessed === 0) return 'Calculating...';
    
    const start = new Date(startedAt);
    const now = new Date();
    const elapsedMs = now.getTime() - start.getTime();
    const rate = rowsProcessed / elapsedMs;
    const remaining = totalRows - rowsProcessed;
    const remainingMs = remaining / rate;
    const remainingMins = Math.ceil(remainingMs / 60000);

    if (remainingMins > 60) {
      const hours = Math.floor(remainingMins / 60);
      return `~${hours}h ${remainingMins % 60}m`;
    }
    return `~${remainingMins}m`;
  };

  return (
    <Paper elevation={2} sx={{ p: 3 }}>
      {/* Header */}
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
        <Box>
          <Typography variant="subtitle2" color="textSecondary">
            Job ID
          </Typography>
          <Typography variant="body1" sx={{ fontWeight: 600, fontFamily: 'monospace' }}>
            {jobId}
          </Typography>
        </Box>
        <Chip
          icon={getStatusIcon() as React.ReactElement}
          label={getStatusLabel()}
          color={getStatusColor()}
          size="small"
        />
      </Box>

      {/* Progress */}
      <Box sx={{ mb: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
          <Typography variant="body2" color="textSecondary">
            Progress
          </Typography>
          <Typography variant="body2" sx={{ fontWeight: 500 }}>
            {rowsProcessed.toLocaleString()} / {totalRows.toLocaleString()} rows ({progress.toFixed(1)}%)
          </Typography>
        </Box>
        <LinearProgress
          variant="determinate"
          value={progress}
          color={status === 'completed' ? 'success' : status === 'failed' ? 'error' : 'primary'}
          sx={{ height: 10, borderRadius: 5 }}
        />
      </Box>

      {/* Stats */}
      <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <TimeIcon fontSize="small" color="action" />
          <Box>
            <Typography variant="caption" color="textSecondary">
              Elapsed Time
            </Typography>
            <Typography variant="body2" sx={{ fontWeight: 500 }}>
              {formatElapsedTime()}
            </Typography>
          </Box>
        </Box>

        {status === 'processing' && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <SpeedIcon fontSize="small" color="action" />
            <Box>
              <Typography variant="caption" color="textSecondary">
                Est. Remaining
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                {estimateRemaining()}
              </Typography>
            </Box>
          </Box>
        )}

        {accuracy !== undefined && (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <CompleteIcon fontSize="small" color="success" />
            <Box>
              <Typography variant="caption" color="textSecondary">
                Accuracy
              </Typography>
              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                {(accuracy * 100).toFixed(1)}%
              </Typography>
            </Box>
          </Box>
        )}
      </Box>
    </Paper>
  );
};

export default JobProgressCard;