mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 12:14:05 +01:00
feat: add PipelineDetails and PipelineAiAssistant components to CreatePipelinePage for enhanced data pipeline configuration
This commit is contained in:
Pattadon
parent
173defcb44
commit
6443f5e893
@ -1,14 +1,33 @@
|
||||
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, BrainCircuit } 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 { Switch } from "@/components/ui/switch"
|
||||
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 (
|
||||
@ -33,102 +52,29 @@ export default function CreatePipelinePage() {
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Pipeline Details</CardTitle>
|
||||
<CardDescription>Basic information about your data pipeline</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Pipeline Name</Label>
|
||||
<Input id="name" placeholder="e.g., Property Listings Pipeline" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Describe what this pipeline collects and how it will be used"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tags">Tags (optional)</Label>
|
||||
<Input id="tags" placeholder="e.g., real-estate, properties, listings" />
|
||||
<p className="text-xs text-muted-foreground mt-1">Separate tags with commas</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<CardTitle className="text-lg flex items-center">
|
||||
<BrainCircuit className="mr-2 h-5 w-5 text-primary" />
|
||||
AI Assistant
|
||||
</CardTitle>
|
||||
<CardDescription>Customize how AI processes your data</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ai-prompt">Additional Instructions for AI</Label>
|
||||
<Textarea
|
||||
id="ai-prompt"
|
||||
placeholder="E.g., Focus on extracting pricing trends, ignore promotional content, prioritize property features..."
|
||||
rows={4}
|
||||
className="border-primary/20"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Provide specific instructions to guide the AI in processing your data sources
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 pt-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="detect-fields">Auto-detect common fields</Label>
|
||||
<p className="text-xs text-muted-foreground">Automatically identify price, location, etc.</p>
|
||||
</div>
|
||||
<Switch id="detect-fields" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="suggest-mappings">Suggest field mappings</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Get AI suggestions for matching fields across sources
|
||||
</p>
|
||||
</div>
|
||||
<Switch id="suggest-mappings" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="deduplicate">Deduplicate records</Label>
|
||||
<p className="text-xs text-muted-foreground">Remove duplicate entries automatically</p>
|
||||
</div>
|
||||
<Switch id="deduplicate" defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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>
|
||||
<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">
|
||||
<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" />
|
||||
@ -139,12 +85,17 @@ export default function CreatePipelinePage() {
|
||||
<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" />
|
||||
<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>
|
||||
<Label htmlFor="additional-urls-1">
|
||||
Additional URLs (optional)
|
||||
</Label>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Pattern Detection
|
||||
</Badge>
|
||||
@ -155,12 +106,17 @@ export default function CreatePipelinePage() {
|
||||
rows={3}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Add multiple URLs from the same website (one per line)
|
||||
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">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Remove Source
|
||||
</Button>
|
||||
@ -169,7 +125,10 @@ export default function CreatePipelinePage() {
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="source-2" className="border rounded-md mb-4 data-source-card">
|
||||
<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" />
|
||||
@ -191,12 +150,17 @@ export default function CreatePipelinePage() {
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Supported formats: CSV, JSON, Excel, XML (up to 50MB)
|
||||
Supported formats: CSV, JSON, Excel, XML (up to
|
||||
50MB)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" className="text-destructive">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Remove Source
|
||||
</Button>
|
||||
@ -205,7 +169,10 @@ export default function CreatePipelinePage() {
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="source-3" className="border rounded-md mb-4 data-source-card">
|
||||
<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" />
|
||||
@ -216,11 +183,16 @@ export default function CreatePipelinePage() {
|
||||
<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" />
|
||||
<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>
|
||||
<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"
|
||||
@ -233,7 +205,11 @@ export default function CreatePipelinePage() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button variant="outline" size="sm" className="text-destructive">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Remove Source
|
||||
</Button>
|
||||
@ -244,15 +220,24 @@ export default function CreatePipelinePage() {
|
||||
</Accordion>
|
||||
|
||||
<div className="flex flex-col gap-2 mt-4">
|
||||
<Button variant="outline" className="w-full justify-start gap-2">
|
||||
<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">
|
||||
<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">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start gap-2"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Add API Source
|
||||
</Button>
|
||||
@ -263,7 +248,9 @@ export default function CreatePipelinePage() {
|
||||
<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>
|
||||
<CardDescription>
|
||||
Configure when and how your pipeline should run
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
@ -307,10 +294,18 @@ export default function CreatePipelinePage() {
|
||||
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">
|
||||
<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" />
|
||||
<Input
|
||||
id="max-records"
|
||||
type="number"
|
||||
placeholder="e.g., 1000"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -320,7 +315,10 @@ export default function CreatePipelinePage() {
|
||||
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">
|
||||
<Label
|
||||
htmlFor="stop-no-new"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Stop when no new records found
|
||||
</Label>
|
||||
</div>
|
||||
@ -339,7 +337,10 @@ export default function CreatePipelinePage() {
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label htmlFor="notify-complete" className="text-sm font-normal">
|
||||
<Label
|
||||
htmlFor="notify-complete"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Notify when pipeline completes
|
||||
</Label>
|
||||
</div>
|
||||
@ -350,12 +351,19 @@ export default function CreatePipelinePage() {
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
defaultChecked
|
||||
/>
|
||||
<Label htmlFor="notify-error" className="text-sm font-normal">
|
||||
<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" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email for notifications"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -364,7 +372,10 @@ export default function CreatePipelinePage() {
|
||||
<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">
|
||||
<Label
|
||||
htmlFor="retry-attempts"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Retry Attempts
|
||||
</Label>
|
||||
<Input
|
||||
@ -376,7 +387,10 @@ export default function CreatePipelinePage() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="retry-delay" className="text-sm font-normal">
|
||||
<Label
|
||||
htmlFor="retry-delay"
|
||||
className="text-sm font-normal"
|
||||
>
|
||||
Delay Between Retries (minutes)
|
||||
</Label>
|
||||
<Input
|
||||
@ -402,6 +416,5 @@ export default function CreatePipelinePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
76
frontend/components/pipeline/ai-assistant.tsx
Normal file
76
frontend/components/pipeline/ai-assistant.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { Switch } from "../ui/switch";
|
||||
import { BrainCircuit } from "lucide-react";
|
||||
import { Label } from "../ui/label";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
|
||||
export function PipelineAiAssistant(){
|
||||
return (
|
||||
<Card className="mt-6 border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<CardTitle className="text-lg flex items-center">
|
||||
<BrainCircuit className="mr-2 h-5 w-5 text-primary" />
|
||||
AI Assistant
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Customize how AI processes your data
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="ai-prompt">Additional Instructions for AI</Label>
|
||||
<Textarea
|
||||
id="ai-prompt"
|
||||
placeholder="E.g., Focus on extracting pricing trends, ignore promotional content, prioritize property features..."
|
||||
rows={4}
|
||||
className="border-primary/20"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Provide specific instructions to guide the AI in processing your
|
||||
data sources
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 pt-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="detect-fields">
|
||||
Auto-detect common fields
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Automatically identify price, location, etc.
|
||||
</p>
|
||||
</div>
|
||||
<Switch id="detect-fields" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="suggest-mappings">
|
||||
Suggest field mappings
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Get AI suggestions for matching fields across sources
|
||||
</p>
|
||||
</div>
|
||||
<Switch id="suggest-mappings" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="deduplicate">Deduplicate records</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Remove duplicate entries automatically
|
||||
</p>
|
||||
</div>
|
||||
<Switch id="deduplicate" defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
45
frontend/components/pipeline/details.tsx
Normal file
45
frontend/components/pipeline/details.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Label } from "../ui/label";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
|
||||
import { Input } from "../ui/input";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
|
||||
export function PipelineDetails(){
|
||||
return (
|
||||
<Card className="border-2 hover:border-highlight-border transition-all duration-200">
|
||||
<CardHeader>
|
||||
<CardTitle>Pipeline Details</CardTitle>
|
||||
<CardDescription>
|
||||
Basic information about your data pipeline
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Pipeline Name</Label>
|
||||
<Input id="name" placeholder="e.g., Property Listings Pipeline" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="Describe what this pipeline collects and how it will be used"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tags">Tags (optional)</Label>
|
||||
<Input
|
||||
id="tags"
|
||||
placeholder="e.g., real-estate, properties, listings"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Separate tags with commas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user