mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 20:24:05 +01:00
421 lines
18 KiB
TypeScript
421 lines
18 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
ArrowLeft,
|
|
Globe,
|
|
FileUp,
|
|
DatabaseIcon,
|
|
Plus,
|
|
Trash2,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import PageHeader from "@/components/page-header";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import { PipelineDetails } from "@/components/pipeline/details";
|
|
import { PipelineAiAssistant } from "@/components/pipeline/ai-assistant";
|
|
|
|
export default function CreatePipelinePage() {
|
|
return (
|
|
<div className="container mx-auto p-6">
|
|
<PageHeader
|
|
title="Create Data Pipeline"
|
|
description="Set up a new automated data collection pipeline"
|
|
breadcrumb={[
|
|
{ title: "Home", href: "/" },
|
|
{ title: "Data Pipeline", href: "/data-pipeline" },
|
|
{ title: "Create", href: "/data-pipeline/create" },
|
|
]}
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<Link href="/data-pipeline">
|
|
<Button variant="outline" className="mb-6">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Pipelines
|
|
</Button>
|
|
</Link>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<PipelineDetails />
|
|
<PipelineAiAssistant />
|
|
</div>
|
|
|
|
<div>
|
|
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
|
<CardHeader>
|
|
<CardTitle>Data Sources</CardTitle>
|
|
<CardDescription>
|
|
Add one or more data sources to your pipeline
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
className="w-full"
|
|
defaultValue="source-1"
|
|
>
|
|
<AccordionItem
|
|
value="source-1"
|
|
className="border rounded-md mb-4 data-source-card active"
|
|
>
|
|
<AccordionTrigger className="px-4">
|
|
<div className="flex items-center">
|
|
<Globe className="mr-2 h-5 w-5 text-primary" />
|
|
<span>Website Source #1</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-4 pb-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="url-1">Website URL</Label>
|
|
<Input
|
|
id="url-1"
|
|
placeholder="https://example.com/listings"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="additional-urls-1">
|
|
Additional URLs (optional)
|
|
</Label>
|
|
<Badge variant="outline" className="text-xs">
|
|
Pattern Detection
|
|
</Badge>
|
|
</div>
|
|
<Textarea
|
|
id="additional-urls-1"
|
|
placeholder="https://example.com/listings/page2 https://example.com/listings/page3"
|
|
rows={3}
|
|
/>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Add multiple URLs from the same website (one per
|
|
line)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Remove Source
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
value="source-2"
|
|
className="border rounded-md mb-4 data-source-card"
|
|
>
|
|
<AccordionTrigger className="px-4">
|
|
<div className="flex items-center">
|
|
<FileUp className="mr-2 h-5 w-5 text-primary" />
|
|
<span>File Upload Source #1</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-4 pb-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="file-upload-1">Upload File</Label>
|
|
<div className="flex items-center justify-center p-6 border-2 border-dashed rounded-lg">
|
|
<div className="text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
Drag and drop your file here, or click to browse
|
|
</p>
|
|
<Button variant="outline" className="mt-2">
|
|
Select File
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Supported formats: CSV, JSON, Excel, XML (up to
|
|
50MB)
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Remove Source
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem
|
|
value="source-3"
|
|
className="border rounded-md mb-4 data-source-card"
|
|
>
|
|
<AccordionTrigger className="px-4">
|
|
<div className="flex items-center">
|
|
<DatabaseIcon className="mr-2 h-5 w-5 text-primary" />
|
|
<span>API Source #1</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-4 pb-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="api-url-1">API Endpoint URL</Label>
|
|
<Input
|
|
id="api-url-1"
|
|
placeholder="https://api.example.com/data"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="auth-type-1">
|
|
Authentication Type
|
|
</Label>
|
|
<select
|
|
id="auth-type-1"
|
|
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"
|
|
>
|
|
<option value="none">None</option>
|
|
<option value="basic">Basic Auth</option>
|
|
<option value="bearer">Bearer Token</option>
|
|
<option value="api-key">API Key</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="text-destructive"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Remove Source
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
|
|
<div className="flex flex-col gap-2 mt-4">
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add Website Source
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add File Upload Source
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="w-full justify-start gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
Add API Source
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
|
|
<CardHeader>
|
|
<CardTitle>Schedule & Automation</CardTitle>
|
|
<CardDescription>
|
|
Configure when and how your pipeline should run
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="space-y-4">
|
|
<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"
|
|
>
|
|
<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="timezone">Timezone</Label>
|
|
<select
|
|
id="timezone"
|
|
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"
|
|
>
|
|
<option value="utc">UTC</option>
|
|
<option value="est">Eastern Time (ET)</option>
|
|
<option value="cst">Central Time (CT)</option>
|
|
<option value="mst">Mountain Time (MT)</option>
|
|
<option value="pst">Pacific Time (PT)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="max-records">Collection Limits</Label>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id="limit-records"
|
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
/>
|
|
<div className="flex-1">
|
|
<Label
|
|
htmlFor="limit-records"
|
|
className="text-sm font-normal"
|
|
>
|
|
Limit total records
|
|
</Label>
|
|
<Input
|
|
id="max-records"
|
|
type="number"
|
|
placeholder="e.g., 1000"
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id="stop-no-new"
|
|
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
|
/>
|
|
<Label
|
|
htmlFor="stop-no-new"
|
|
className="text-sm font-normal"
|
|
>
|
|
Stop when no new records found
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="notifications">Notifications</Label>
|
|
<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 className="mt-2">
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Email for notifications"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="retry-settings">Retry Settings</Label>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label
|
|
htmlFor="retry-attempts"
|
|
className="text-sm font-normal"
|
|
>
|
|
Retry Attempts
|
|
</Label>
|
|
<Input
|
|
id="retry-attempts"
|
|
type="number"
|
|
placeholder="e.g., 3"
|
|
defaultValue="3"
|
|
className="w-24"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label
|
|
htmlFor="retry-delay"
|
|
className="text-sm font-normal"
|
|
>
|
|
Delay Between Retries (minutes)
|
|
</Label>
|
|
<Input
|
|
id="retry-delay"
|
|
type="number"
|
|
placeholder="e.g., 5"
|
|
defaultValue="5"
|
|
className="w-24"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-end space-x-4">
|
|
<Button variant="outline">Save as Draft</Button>
|
|
<Button>Create Pipeline</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|