frontend/components/JobQueue.tsx

import { useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';

export default function JobQueue() {
  const { t } = useTranslation('common');
  const [queue, setQueue] = useState({ queued: 0, running: 0 });

  useEffect(() => {
    const interval = setInterval(async () => {
      const res = await fetch('/api/backend/queue');
      if (res.ok) setQueue(await res.json());
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="bg-white p-4 shadow rounded-lg">
      <h2 className="text-xl font-semibold">{t('queue_status')}</h2>
      <p>{t('queued')}: {queue.queued}, {t('running')}: {queue.running}</p>
    </div>
  );
}