```typescript import React from "react"; import { DndProvider, useDrag, useDrop } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; import { LucideIcon, Mail, Folder, CheckCircle } from "lucide-react"; type JobType = "email-report" | "ftp-report" | "consistency-check"; interface Job { id: string; type: JobType; } const jobsData: Job[] = [ { id: "1", type: "email-report" }, { id: "2", type: "ftp-report" }, { id: "3", type: "consistency-check" }, ]; const JobComponent: React.FC<{ job: Job; moveJob: (id: string) => void }> = ({ job, moveJob }) => { const [{ isDragging }, drag] = useDrag(() => ({ type: "JOB", item: { id: job.id }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), })); return (

moveJob(job.id)} > {job.type === "email-report" && } {job.type === "ftp-report" && } {job.type === "consistency-check" && }

{job.type}

); }; const Pipeline: React.FC = () => { const [jobs, setJobs] = React.useState(jobsData); const [, drop] = useDrop(() => ({ accept: "JOB", drop: (item: { id: string }) => moveJob(item.id), })); const moveJob = (id: string) => { const jobIndex = jobs.findIndex((job) => job.id === id); const jobToMove = jobs[jobIndex]; const updatedJobs = [...jobs]; updatedJobs.splice(jobIndex, 1); updatedJobs.push(jobToMove); setJobs(updatedJobs); }; return (

Pipeline View

{jobs.map((job) => ( ))}

); }; export default function App() { return (

); } ```