mirror of
https://github.com/borbann-platform/backend-api.git
synced 2025-12-18 20:24:05 +01:00
90a3b67cc4
- Implemented PropertyDetailPage component to display detailed information about a selected property, including images, features, amenities, and market trends. - Added SimilarPropertyCard component for showcasing similar properties. - Created loading state for property detail page. - Developed PropertiesPage component with filtering options and property listings in grid and list views. - Introduced PropertyCard and PropertyCardList components for displaying property information in different layouts. - Integrated UI components such as buttons, cards, badges, and tabs for enhanced user experience.
408 lines
20 KiB
TypeScript
408 lines
20 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, 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"
|
|
|
|
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>
|
|
<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>
|
|
</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>
|
|
)
|
|
}
|
|
|