mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 20:24:05 +01:00
243 lines
8.3 KiB
TypeScript
243 lines
8.3 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Clock, Database, Play, Plus, RefreshCw, Pause, AlertTriangle, Copy } from "lucide-react"
|
|
import Link from "next/link"
|
|
import PageHeader from "@/components/page-header"
|
|
|
|
export default function DataPipelinePage() {
|
|
return (
|
|
<div className="container mx-auto p-6">
|
|
<PageHeader
|
|
title="Data Pipelines"
|
|
description="Manage your automated data collection pipelines"
|
|
breadcrumb={[
|
|
{ title: "Home", href: "/" },
|
|
{ title: "Data Pipeline", href: "/data-pipeline" },
|
|
]}
|
|
/>
|
|
|
|
<div className="flex justify-between items-center mt-6">
|
|
<Tabs defaultValue="active" className="w-full">
|
|
<TabsList>
|
|
<TabsTrigger value="active">Active Pipelines</TabsTrigger>
|
|
<TabsTrigger value="paused">Paused</TabsTrigger>
|
|
<TabsTrigger value="all">All Pipelines</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<div className="flex justify-end mt-4">
|
|
<Link href="/data-pipeline/create">
|
|
<Button className="gap-2">
|
|
<Plus className="h-4 w-4" />
|
|
Create Pipeline
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<TabsContent value="active" className="mt-4">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<PipelineCard
|
|
title="Property Listings"
|
|
description="Scrapes real estate listings from multiple websites"
|
|
status="active"
|
|
lastRun="2 hours ago"
|
|
nextRun="Tomorrow at 9:00 AM"
|
|
sources={3}
|
|
records={1240}
|
|
aiPowered={true}
|
|
/>
|
|
|
|
<PipelineCard
|
|
title="Rental Market Data"
|
|
description="Collects rental prices and availability"
|
|
status="active"
|
|
lastRun="Yesterday"
|
|
nextRun="In 3 days"
|
|
sources={2}
|
|
records={830}
|
|
aiPowered={true}
|
|
/>
|
|
|
|
<PipelineCard
|
|
title="Price Comparison"
|
|
description="Tracks property price changes over time"
|
|
status="error"
|
|
lastRun="2 days ago"
|
|
nextRun="Scheduled retry in 12 hours"
|
|
sources={4}
|
|
records={1560}
|
|
error="Connection timeout on 1 source"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="paused" className="mt-4">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<PipelineCard
|
|
title="Commercial Properties"
|
|
description="Collects data on commercial real estate"
|
|
status="paused"
|
|
lastRun="1 week ago"
|
|
nextRun="Paused"
|
|
sources={2}
|
|
records={450}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="all" className="mt-4">
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<PipelineCard
|
|
title="Property Listings"
|
|
description="Scrapes real estate listings from multiple websites"
|
|
status="active"
|
|
lastRun="2 hours ago"
|
|
nextRun="Tomorrow at 9:00 AM"
|
|
sources={3}
|
|
records={1240}
|
|
aiPowered={true}
|
|
/>
|
|
|
|
<PipelineCard
|
|
title="Rental Market Data"
|
|
description="Collects rental prices and availability"
|
|
status="active"
|
|
lastRun="Yesterday"
|
|
nextRun="In 3 days"
|
|
sources={2}
|
|
records={830}
|
|
aiPowered={true}
|
|
/>
|
|
|
|
<PipelineCard
|
|
title="Price Comparison"
|
|
description="Tracks property price changes over time"
|
|
status="error"
|
|
lastRun="2 days ago"
|
|
nextRun="Scheduled retry in 12 hours"
|
|
sources={4}
|
|
records={1560}
|
|
error="Connection timeout on 1 source"
|
|
/>
|
|
|
|
<PipelineCard
|
|
title="Commercial Properties"
|
|
description="Collects data on commercial real estate"
|
|
status="paused"
|
|
lastRun="1 week ago"
|
|
nextRun="Paused"
|
|
sources={2}
|
|
records={450}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface PipelineCardProps {
|
|
title: string
|
|
description: string
|
|
status: "active" | "paused" | "error"
|
|
lastRun: string
|
|
nextRun: string
|
|
sources: number
|
|
records: number
|
|
error?: string
|
|
aiPowered?: boolean
|
|
}
|
|
|
|
function PipelineCard({
|
|
title,
|
|
description,
|
|
status,
|
|
lastRun,
|
|
nextRun,
|
|
sources,
|
|
records,
|
|
error,
|
|
aiPowered,
|
|
}: PipelineCardProps) {
|
|
return (
|
|
<Card className={`pipeline-card ${status === "active" ? "border-2 border-green-500 dark:border-green-600" : ""}`}>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex justify-between items-start">
|
|
<CardTitle className="text-lg">{title}</CardTitle>
|
|
<StatusBadge status={status} />
|
|
</div>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center text-sm">
|
|
<Clock className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
<span className="text-muted-foreground">Last run:</span>
|
|
<span className="ml-1 font-medium">{lastRun}</span>
|
|
</div>
|
|
<div className="flex items-center text-sm">
|
|
<RefreshCw className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
<span className="text-muted-foreground">Next run:</span>
|
|
<span className="ml-1 font-medium">{nextRun}</span>
|
|
</div>
|
|
<div className="flex items-center text-sm">
|
|
<Database className="h-4 w-4 mr-2 text-muted-foreground" />
|
|
<span className="text-muted-foreground">Sources:</span>
|
|
<span className="ml-1 font-medium">{sources}</span>
|
|
<span className="mx-2">•</span>
|
|
<span className="text-muted-foreground">Records:</span>
|
|
<span className="ml-1 font-medium">{records}</span>
|
|
</div>
|
|
{error && (
|
|
<div className="flex items-center text-sm text-destructive mt-2">
|
|
<AlertTriangle className="h-4 w-4 mr-2" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Link href={`/data-pipeline/${title.toLowerCase().replace(/\s+/g, "-")}`}>
|
|
<Button variant="outline" size="sm">
|
|
View Details
|
|
</Button>
|
|
</Link>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="icon" className="h-8 w-8 text-primary border-primary/20 hover:border-primary">
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
{status === "active" ? (
|
|
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
<Pause className="h-4 w-4" />
|
|
</Button>
|
|
) : (
|
|
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
<Play className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<Button variant="outline" size="icon" className="h-8 w-8 border-primary/20 hover:border-primary">
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: "active" | "paused" | "error" }) {
|
|
if (status === "active") {
|
|
return (
|
|
<Badge variant="default" className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">
|
|
Active
|
|
</Badge>
|
|
)
|
|
} else if (status === "paused") {
|
|
return <Badge variant="secondary">Paused</Badge>
|
|
} else {
|
|
return <Badge variant="destructive">Error</Badge>
|
|
}
|
|
}
|
|
|