Merge pull request 'feat: add loading skeletons and error states to Batch page' (#352) from feature/343-batch-loading-states into main

frontend/src/pages/Batch.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { analysisApi } from '../api/client';
-import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp, RefreshCw, Inbox } from 'lucide-react';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
 import type { BatchAnalysisResult } from '../types';
 
@@ -11,10 +11,18 @@ export function Batch() {
   const [result, setResult] = useState<BatchAnalysisResult | null>(null);
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
 
+  const jobsQuery = useQuery({
+    queryKey: ['jobs'],
+    queryFn: () => analysisApi.listJobs(undefined, 20),
+  });
+
   const mutation = useMutation({
     mutationFn: ({ companies, workers }: { companies: string[]; workers: number }) =>
       analysisApi.analyzeBatch(companies, workers),
-    onSuccess: (data) => setResult(data),
+    onSuccess: (data) => {
+      setResult(data);
+      jobsQuery.refetch();
+    },
   });
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -123,13 +131,30 @@ export function Batch() {
             {mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
             {' '}Check your connection and try again.
           </p>
+          <div className="ml-7 mt-2 flex items-center gap-3">
+            <button
+              onClick={() => {
+                const companies = companiesInput
+                  .split(/[,\n]/)
+                  .map((c) => c.trim())
+                  .filter((c) => c.length > 0);
+                if (companies.length > 0) {
+                  mutation.mutate({ companies, workers: maxWorkers });
+                }
+              }}
+              className="text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
+            >
+              <RefreshCw size={14} />
+              Retry
+            </button>
             <button
               onClick={() => mutation.reset()}
-            className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline"
+              className="text-sm text-text-secondary hover:text-text-primary underline"
             >
               Dismiss
             </button>
           </div>
+        </div>
       )}
 
       {/* Results */}
@@ -230,6 +255,123 @@ export function Batch() {
           </div>
         </div>
       )}
+
+      {/* Job History */}
+      <div>
+        <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
+          Job History
+        </h3>
+
+        {/* Loading skeleton */}
+        {jobsQuery.isLoading && (
+          <div className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4 animate-pulse"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="h-5 w-5 rounded-full bg-primary/20" />
+                    <div className="h-4 w-32 rounded bg-primary/20" />
+                    <div className="h-4 w-20 rounded bg-primary/10" />
+                  </div>
+                  <div className="h-6 w-20 rounded-full bg-primary/15" />
+                </div>
+                <div className="mt-3 flex gap-4">
+                  <div className="h-3 w-24 rounded bg-primary/10" />
+                  <div className="h-3 w-16 rounded bg-primary/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Job history error */}
+        {jobsQuery.isError && (
+          <div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
+            <div className="flex items-center gap-2 text-error">
+              <AlertCircle size={18} />
+              <span className="font-semibold">Failed to load job history</span>
+            </div>
+            <p className="text-text-secondary text-sm mt-1 ml-7">
+              {jobsQuery.error instanceof Error ? jobsQuery.error.message : 'Could not retrieve past jobs.'}
+            </p>
+            <button
+              onClick={() => jobsQuery.refetch()}
+              className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
+            >
+              <RefreshCw size={14} />
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {jobsQuery.isSuccess && jobsQuery.data.length === 0 && !result && (
+          <div className="bg-bg-card/60 border border-primary/15 border-dashed rounded-xl p-8 text-center">
+            <Inbox className="mx-auto text-text-secondary/40 mb-3" size={40} />
+            <p className="text-text-secondary font-medium">No batch jobs yet</p>
+            <p className="text-text-secondary/70 text-sm mt-1">
+              Submit a batch analysis above to get started. Your job history will appear here.
+            </p>
+          </div>
+        )}
+
+        {/* Job list */}
+        {jobsQuery.isSuccess && jobsQuery.data.length > 0 && (
+          <div className="space-y-3">
+            {jobsQuery.data.map((job) => (
+              <div
+                key={job.job_id}
+                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {job.status === 'completed' && <CheckCircle className="text-success" size={18} />}
+                    {job.status === 'failed' && <AlertCircle className="text-error" size={18} />}
+                    {(job.status === 'pending' || job.status === 'running') && (
+                      <div className="animate-spin rounded-full h-[18px] w-[18px] border-t-2 border-b-2 border-secondary" />
+                    )}
+                    <span className="font-mono text-sm text-text-primary">{job.job_id.slice(0, 8)}</span>
+                    <span className="text-text-secondary text-sm">
+                      {job.total_companies} {job.total_companies === 1 ? 'company' : 'companies'}
+                    </span>
+                  </div>
+                  <span
+                    className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
+                      job.status === 'completed'
+                        ? 'bg-success/15 text-success'
+                        : job.status === 'failed'
+                          ? 'bg-error/15 text-error'
+                          : 'bg-secondary/15 text-secondary'
+                    }`}
+                  >
+                    {job.status}
+                  </span>
+                </div>
+                {(job.status === 'running' || job.status === 'pending') && job.total_companies > 0 && (
+                  <div className="mt-3">
+                    <div className="flex items-center justify-between text-xs text-text-secondary mb-1">
+                      <span>Progress</span>
+                      <span>{job.completed_companies}/{job.total_companies}</span>
+                    </div>
+                    <div className="h-1.5 bg-bg-dark rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300"
+                        style={{ width: `${(job.completed_companies / job.total_companies) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+                {job.status === 'failed' && job.error && (
+                  <p className="mt-2 text-sm text-error/80">{job.error}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }