borbann-platform/backend-api
1
0
Fork 0
mirror of https://github.com/borbann-platform/backend-api.git synced 2025-12-19 12:44:04 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance PipelineDetailsPage with new components for output configuration, run history, and settings

Browse Source
This commit is contained in:
Pattadon 2025-04-08 15:00:54 +07:00
parent 7783d00f56
commit 173defcb44
9 changed files with 434 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

288
frontend/app/(sidebar)/data-pipeline/property-listings/page.tsx
View File

@ -1,18 +1,16 @@
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Edit, Play, Trash, Copy } from "lucide-react";
import { Badge } from "@/components/ui/badge" import Link from "next/link";
import { ArrowLeft, Download, Edit, Play, Trash, Copy, Check } from "lucide-react" import PageHeader from "@/components/page-header";
import Link from "next/link" import { PipelineStatus } from "@/components/pipeline/status";
import PageHeader from "@/components/page-header" import { PipelineDataSource } from "@/components/pipeline/data-source";
import { PipelineExportData } from "@/components/pipeline/export-data";
import { Input } from "@/components/ui/input" import { PipelineDataSchema } from "@/components/pipeline/data-schema";
import { Label } from "@/components/ui/label" import { PipelineDataPreview } from "@/components/pipeline/data-preview";
import { PipelineStatus } from "@/components/pipeline/status" import { PipelineOutputConfig } from "@/components/pipeline/output-config";
import { PipelineDataSource } from "@/components/pipeline/data-source" import { PipelineRunHistory } from "@/components/pipeline/run-history";
import { PipelineExportData } from "@/components/pipeline/export-data" import { PipelineSettings } from "@/components/pipeline/settings";
import { PipelineDataSchema } from "@/components/pipeline/data-schema"
import { PipelineDataPreview } from "@/components/pipeline/data-preview"
export default function PipelineDetailsPage() { export default function PipelineDetailsPage() {
return ( return (
@ -22,7 +20,10 @@ export default function PipelineDetailsPage() {
breadcrumb={[ breadcrumb={[
{ title: "Home", href: "/" }, { title: "Home", href: "/" },
{ title: "Data Pipeline", href: "/data-pipeline" }, { title: "Data Pipeline", href: "/data-pipeline" },
{ title: "Property Listings", href: "/data-pipeline/property-listings" }, {
title: "Property Listings",
href: "/data-pipeline/property-listings",
},
]} ]}
/> />
@ -35,15 +36,24 @@ export default function PipelineDetailsPage() {
</Link> </Link>
<div className="flex space-x-2"> <div className="flex space-x-2">
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary"> <Button
variant="outline"
className="gap-2 border-primary/20 hover:border-primary"
>
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />
Clone Clone
</Button> </Button>
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary"> <Button
variant="outline"
className="gap-2 border-primary/20 hover:border-primary"
>
<Edit className="h-4 w-4" /> <Edit className="h-4 w-4" />
Edit Edit
</Button> </Button>
<Button variant="outline" className="gap-2 border-primary/20 hover:border-primary"> <Button
variant="outline"
className="gap-2 border-primary/20 hover:border-primary"
>
<Play className="h-4 w-4" /> <Play className="h-4 w-4" />
Run Now Run Now
</Button> </Button>
@ -70,250 +80,26 @@ export default function PipelineDetailsPage() {
</TabsList> </TabsList>
<TabsContent value="schema" className="mt-4"> <TabsContent value="schema" className="mt-4">
<PipelineDataSchema /> <PipelineDataSchema />
</TabsContent> </TabsContent>
<TabsContent value="preview" className="mt-4"> <TabsContent value="preview" className="mt-4">
<PipelineDataPreview /> <PipelineDataPreview />
</TabsContent> </TabsContent>
<TabsContent value="output" className="mt-4"> <TabsContent value="output" className="mt-4">
<Card className="border-2 hover:border-highlight-border transition-all duration-200"> <PipelineOutputConfig />
<CardHeader>
<CardTitle>Output Configuration</CardTitle>
<CardDescription>Configure how your data will be structured and exported</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<Label>Output Format</Label>
<div className="grid grid-cols-2 gap-2">
<div className="border rounded-md p-3 data-source-card active">
<div className="flex items-center justify-between">
<span className="font-medium">JSON</span>
<Check className="h-4 w-4 text-primary" />
</div>
<p className="text-xs text-muted-foreground mt-1">Structured data format</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">CSV</span>
<p className="text-xs text-muted-foreground mt-1">Spreadsheet compatible</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">SQLite</span>
<p className="text-xs text-muted-foreground mt-1">Portable database</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">YAML</span>
<p className="text-xs text-muted-foreground mt-1">Human-readable format</p>
</div>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Format Preview</Label>
<Badge variant="outline">Sample Data</Badge>
</div>
<div className="bg-muted/50 p-3 rounded-md overflow-x-auto">
<pre className="text-xs">
{`{
"properties": [
{
"id": "P001",
"title": "Modern Apartment",
"price": 350000,
"bedrooms": 2,
"location": "Downtown"
},
{
"id": "P002",
"title": "Luxury Villa",
"price": 1250000,
"bedrooms": 5,
"location": "Suburbs"
}
]
}`}
</pre>
</div>
</div>
<div className="flex justify-end">
<Button className="gap-2">
<Download className="h-4 w-4" />
Export Data
</Button>
</div>
</div>
</CardContent>
</Card>
</TabsContent> </TabsContent>
<TabsContent value="history" className="mt-4"> <TabsContent value="history" className="mt-4">
<Card className="border-2 hover:border-highlight-border transition-all duration-200"> <PipelineRunHistory />
<CardHeader>
<CardTitle>Run History</CardTitle>
<CardDescription>History of pipeline executions</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="border rounded-md overflow-hidden">
<table className="w-full">
<thead className="bg-muted">
<tr>
<th className="px-4 py-2 text-left text-sm font-medium">Run ID</th>
<th className="px-4 py-2 text-left text-sm font-medium">Date</th>
<th className="px-4 py-2 text-left text-sm font-medium">Status</th>
<th className="px-4 py-2 text-left text-sm font-medium">Duration</th>
<th className="px-4 py-2 text-left text-sm font-medium">Records</th>
<th className="px-4 py-2 text-left text-sm font-medium">Actions</th>
</tr>
</thead>
<tbody className="divide-y">
<tr>
<td className="px-4 py-2 text-sm">RUN-123</td>
<td className="px-4 py-2 text-sm">Today, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge variant="default" className="bg-success hover:bg-success">
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 15s</td>
<td className="px-4 py-2 text-sm">1,240</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
<tr>
<td className="px-4 py-2 text-sm">RUN-122</td>
<td className="px-4 py-2 text-sm">Yesterday, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge variant="default" className="bg-success hover:bg-success">
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 10s</td>
<td className="px-4 py-2 text-sm">1,235</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
<tr>
<td className="px-4 py-2 text-sm">RUN-121</td>
<td className="px-4 py-2 text-sm">2 days ago, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge variant="default" className="bg-success hover:bg-success">
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 05s</td>
<td className="px-4 py-2 text-sm">1,228</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</CardContent>
</Card>
</TabsContent> </TabsContent>
<TabsContent value="settings" className="mt-4"> <TabsContent value="settings" className="mt-4">
<Card className="border-2 hover:border-highlight-border transition-all duration-200"> <PipelineSettings />
<CardHeader>
<CardTitle>Pipeline Settings</CardTitle>
<CardDescription>Configure pipeline behavior</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="space-y-2">
<h3 className="text-lg font-medium">Scheduling</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="frequency">Run Frequency</Label>
<select
id="frequency"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
defaultValue="daily"
>
<option value="manual">Manual (Run on demand)</option>
<option value="hourly">Hourly</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="custom">Custom Schedule</option>
</select>
</div>
<div className="space-y-2">
<Label htmlFor="time">Run Time</Label>
<Input id="time" type="time" defaultValue="09:00" />
</div>
</div>
</div>
<div className="space-y-2">
<h3 className="text-lg font-medium">Data Collection</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="max-records">Maximum Records</Label>
<Input id="max-records" type="number" defaultValue="2000" />
</div>
<div className="space-y-2">
<Label htmlFor="retry-attempts">Retry Attempts</Label>
<Input id="retry-attempts" type="number" defaultValue="3" />
</div>
</div>
</div>
<div className="space-y-2">
<h3 className="text-lg font-medium">Notifications</h3>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="notify-complete"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
defaultChecked
/>
<Label htmlFor="notify-complete" className="text-sm font-normal">
Notify when pipeline completes
</Label>
</div>
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="notify-error"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
defaultChecked
/>
<Label htmlFor="notify-error" className="text-sm font-normal">
Notify on errors
</Label>
</div>
</div>
</div>
<div className="flex justify-end">
<Button>Save Settings</Button>
</div>
</div>
</CardContent>
</Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
</div> </div>
) );
} }

6
frontend/components/pipeline/badge.tsx
View File

@ -1,6 +1,10 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
export function StatusBadge({ status }: { status: "active" | "paused" | "error" }) { export function StatusBadge({
status,
}: {
status: "active" | "paused" | "error";
}) {
if (status === "active") { if (status === "active") {
return ( return (
<Badge <Badge

1
frontend/components/pipeline/card.tsx
View File

@ -19,7 +19,6 @@ import { StatusBadge } from "./badge";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
interface PipelineCardProps { interface PipelineCardProps {
title: string; title: string;
description: string; description: string;

8
frontend/components/pipeline/data-preview.tsx
View File

@ -1,4 +1,10 @@
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card"; import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "../ui/card";
export function PipelineDataPreview() { export function PipelineDataPreview() {
return ( return (

84
frontend/components/pipeline/data-source.tsx
View File

@ -1,48 +1,48 @@
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "../ui/card"; import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
export function PipelineDataSource(){ export function PipelineDataSource() {
return ( return (
<Card className="border-2 hover:border-highlight-border transition-all duration-200"> <Card className="border-2 hover:border-highlight-border transition-all duration-200">
<CardHeader> <CardHeader>
<CardTitle className="text-lg">Data Sources</CardTitle> <CardTitle className="text-lg">Data Sources</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200"> <div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="font-medium">example-realty.com</span> <span className="font-medium">example-realty.com</span>
<Badge>Website</Badge> <Badge>Website</Badge>
</div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">540 records</p>
</div>
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
<div className="flex justify-between items-center">
<span className="font-medium">property-listings.com</span>
<Badge>Website</Badge>
</div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">420 records</p>
</div>
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
<div className="flex justify-between items-center">
<span className="font-medium">real-estate-api.com</span>
<Badge>API</Badge>
</div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">280 records</p>
</div> </div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">540 records</p>
</div> </div>
</CardContent>
</Card> <div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
); <div className="flex justify-between items-center">
<span className="font-medium">property-listings.com</span>
<Badge>Website</Badge>
</div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">420 records</p>
</div>
<div className="p-3 border-2 rounded-md hover:border-highlight-border transition-all duration-200">
<div className="flex justify-between items-center">
<span className="font-medium">real-estate-api.com</span>
<Badge>API</Badge>
</div>
<p className="text-sm text-muted-foreground mt-1">
Last updated: 2 hours ago
</p>
<p className="text-sm mt-1">280 records</p>
</div>
</div>
</CardContent>
</Card>
);
} }

96
frontend/components/pipeline/output-config.tsx Normal file
View File

@ -0,0 +1,96 @@
import { Check, Download } from "lucide-react";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "../ui/card";
export function PipelineOutputConfig() {
return (
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
<CardHeader>
<CardTitle>Output Configuration</CardTitle>
<CardDescription>
Configure how your data will be structured and exported
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="space-y-2">
<Label>Output Format</Label>
<div className="grid grid-cols-2 gap-2">
<div className="border rounded-md p-3 data-source-card active">
<div className="flex items-center justify-between">
<span className="font-medium">JSON</span>
<Check className="h-4 w-4 text-primary" />
</div>
<p className="text-xs text-muted-foreground mt-1">
Structured data format
</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">CSV</span>
<p className="text-xs text-muted-foreground mt-1">
Spreadsheet compatible
</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">SQLite</span>
<p className="text-xs text-muted-foreground mt-1">
Portable database
</p>
</div>
<div className="border rounded-md p-3 data-source-card">
<span className="font-medium">YAML</span>
<p className="text-xs text-muted-foreground mt-1">
Human-readable format
</p>
</div>
</div>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<Label>Format Preview</Label>
<Badge variant="outline">Sample Data</Badge>
</div>
<div className="bg-muted/50 p-3 rounded-md overflow-x-auto">
<pre className="text-xs">
{`{
"properties": [
{
"id": "P001",
"title": "Modern Apartment",
"price": 350000,
"bedrooms": 2,
"location": "Downtown"
},
{
"id": "P002",
"title": "Luxury Villa",
"price": 1250000,
"bedrooms": 5,
"location": "Suburbs"
}
]
}`}
</pre>
</div>
</div>
<div className="flex justify-end">
<Button className="gap-2">
<Download className="h-4 w-4" />
Export Data
</Button>
</div>
</div>
</CardContent>
</Card>
);
}

109
frontend/components/pipeline/run-history.tsx Normal file
View File

@ -0,0 +1,109 @@
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "../ui/card";
export function PipelineRunHistory() {
return (
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
<CardHeader>
<CardTitle>Run History</CardTitle>
<CardDescription>History of pipeline executions</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="border rounded-md overflow-hidden">
<table className="w-full">
<thead className="bg-muted">
<tr>
<th className="px-4 py-2 text-left text-sm font-medium">
Run ID
</th>
<th className="px-4 py-2 text-left text-sm font-medium">
Date
</th>
<th className="px-4 py-2 text-left text-sm font-medium">
Status
</th>
<th className="px-4 py-2 text-left text-sm font-medium">
Duration
</th>
<th className="px-4 py-2 text-left text-sm font-medium">
Records
</th>
<th className="px-4 py-2 text-left text-sm font-medium">
Actions
</th>
</tr>
</thead>
<tbody className="divide-y">
<tr>
<td className="px-4 py-2 text-sm">RUN-123</td>
<td className="px-4 py-2 text-sm">Today, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge
variant="default"
className="bg-success hover:bg-success"
>
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 15s</td>
<td className="px-4 py-2 text-sm">1,240</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
<tr>
<td className="px-4 py-2 text-sm">RUN-122</td>
<td className="px-4 py-2 text-sm">Yesterday, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge
variant="default"
className="bg-success hover:bg-success"
>
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 10s</td>
<td className="px-4 py-2 text-sm">1,235</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
<tr>
<td className="px-4 py-2 text-sm">RUN-121</td>
<td className="px-4 py-2 text-sm">2 days ago, 10:30 AM</td>
<td className="px-4 py-2 text-sm">
<Badge
variant="default"
className="bg-success hover:bg-success"
>
Success
</Badge>
</td>
<td className="px-4 py-2 text-sm">2m 05s</td>
<td className="px-4 py-2 text-sm">1,228</td>
<td className="px-4 py-2 text-sm">
<Button variant="outline" size="sm">
View Log
</Button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</CardContent>
</Card>
);
}

100
frontend/components/pipeline/settings.tsx Normal file
View File

@ -0,0 +1,100 @@
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "../ui/card";
import { Input } from "../ui/input";
export function PipelineSettings() {
return (
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
<CardHeader>
<CardTitle>Pipeline Settings</CardTitle>
<CardDescription>Configure pipeline behavior</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div className="space-y-2">
<h3 className="text-lg font-medium">Scheduling</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="frequency">Run Frequency</Label>
<select
id="frequency"
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
defaultValue="daily"
>
<option value="manual">Manual (Run on demand)</option>
<option value="hourly">Hourly</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="custom">Custom Schedule</option>
</select>
</div>
<div className="space-y-2">
<Label htmlFor="time">Run Time</Label>
<Input id="time" type="time" defaultValue="09:00" />
</div>
</div>
</div>
<div className="space-y-2">
<h3 className="text-lg font-medium">Data Collection</h3>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="max-records">Maximum Records</Label>
<Input id="max-records" type="number" defaultValue="2000" />
</div>
<div className="space-y-2">
<Label htmlFor="retry-attempts">Retry Attempts</Label>
<Input id="retry-attempts" type="number" defaultValue="3" />
</div>
</div>
</div>
<div className="space-y-2">
<h3 className="text-lg font-medium">Notifications</h3>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="notify-complete"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
defaultChecked
/>
<Label
htmlFor="notify-complete"
className="text-sm font-normal"
>
Notify when pipeline completes
</Label>
</div>
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="notify-error"
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
defaultChecked
/>
<Label htmlFor="notify-error" className="text-sm font-normal">
Notify on errors
</Label>
</div>
</div>
</div>
<div className="flex justify-end">
<Button>Save Settings</Button>
</div>
</div>
</CardContent>
</Card>
);
}

70
frontend/components/pipeline/status.tsx
View File

@ -2,40 +2,40 @@ import { Badge } from "../ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "../ui/card"; import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
export function PipelineStatus() { export function PipelineStatus() {
return ( return (
<Card className="border-2 border-green-500 dark:border-green-600"> <Card className="border-2 border-green-500 dark:border-green-600">
<CardHeader> <CardHeader>
<CardTitle className="text-lg">Pipeline Status</CardTitle> <CardTitle className="text-lg">Pipeline Status</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-muted-foreground">Status:</span> <span className="text-muted-foreground">Status:</span>
<Badge <Badge
variant="default" variant="default"
className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700" className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
> >
Active Active
</Badge> </Badge>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Last Run:</span>
<span>2 hours ago</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Next Run:</span>
<span>Tomorrow at 9:00 AM</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Run Frequency:</span>
<span>Daily</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Total Records:</span>
<span>1,240</span>
</div>
</div> </div>
</CardContent> <div className="flex justify-between items-center">
</Card> <span className="text-muted-foreground">Last Run:</span>
); <span>2 hours ago</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Next Run:</span>
<span>Tomorrow at 9:00 AM</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Run Frequency:</span>
<span>Daily</span>
</div>
<div className="flex justify-between items-center">
<span className="text-muted-foreground">Total Records:</span>
<span>1,240</span>
</div>
</div>
</CardContent>
</Card>
);
} }