From 6443f5e8937ddf684a3a69ef2a4a19fcaea20e1d Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Tue, 8 Apr 2025 15:42:00 +0700
Subject: [PATCH] feat: add PipelineDetails and PipelineAiAssistant components
 to CreatePipelinePage for enhanced data pipeline configuration

---
 .../(sidebar)/data-pipeline/create/page.tsx   | 261 +++++++++---------
 frontend/components/pipeline/ai-assistant.tsx |  76 +++++
 frontend/components/pipeline/details.tsx      |  45 +++
 3 files changed, 258 insertions(+), 124 deletions(-)
 create mode 100644 frontend/components/pipeline/ai-assistant.tsx
 create mode 100644 frontend/components/pipeline/details.tsx

diff --git a/frontend/app/(sidebar)/data-pipeline/create/page.tsx b/frontend/app/(sidebar)/data-pipeline/create/page.tsx
index a382632..a920c96 100644
--- a/frontend/app/(sidebar)/data-pipeline/create/page.tsx
+++ b/frontend/app/(sidebar)/data-pipeline/create/page.tsx
@@ -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>
-  )
+  );
 }
-
diff --git a/frontend/components/pipeline/ai-assistant.tsx b/frontend/components/pipeline/ai-assistant.tsx
new file mode 100644
index 0000000..810899d
--- /dev/null
+++ b/frontend/components/pipeline/ai-assistant.tsx
@@ -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>
+    );
+}
\ No newline at end of file
diff --git a/frontend/components/pipeline/details.tsx b/frontend/components/pipeline/details.tsx
new file mode 100644
index 0000000..3db90af
--- /dev/null
+++ b/frontend/components/pipeline/details.tsx
@@ -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>
+    );
+}
\ No newline at end of file