From 6a48f4f2346afa2d661212761e236dba5096908a Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Fri, 25 Apr 2025 18:39:42 +0700
Subject: [PATCH] feat: add PipelineSummary component and integrate it into the
 multi-step form for enhanced overview of pipeline configuration

---
 .../create/create-pipeline-multiform.tsx      |  14 +--
 frontend/components/pipeline/details.tsx      |  13 +-
 frontend/components/pipeline/summary.tsx      | 118 ++++++++++++++++++
 3 files changed, 133 insertions(+), 12 deletions(-)
 create mode 100644 frontend/components/pipeline/summary.tsx

diff --git a/frontend/app/(sidebar)/data-pipeline/create/create-pipeline-multiform.tsx b/frontend/app/(sidebar)/data-pipeline/create/create-pipeline-multiform.tsx
index ded062e..eade1e1 100644
--- a/frontend/app/(sidebar)/data-pipeline/create/create-pipeline-multiform.tsx
+++ b/frontend/app/(sidebar)/data-pipeline/create/create-pipeline-multiform.tsx
@@ -9,6 +9,7 @@ import { AddDataSource } from "@/components/pipeline/add-data-source";
 import { PipelineAiAssistant } from "@/components/pipeline/ai-assistant";
 import { PipelineDetails } from "@/components/pipeline/details";
 import { ScheduleAndInformation } from "@/components/pipeline/schedule-and-information";
+import { PipelineSummary } from "@/components/pipeline/summary";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
@@ -21,17 +22,8 @@ const stepComponents = [
   <AddDataSource key="datasource" />,
   <PipelineAiAssistant key="ai" />,
   <ScheduleAndInformation key="schedule" />,
-  <div
-    key="inputs"
-    className="border border-dashed rounded-md flex flex-col items-center justify-center h-[8rem]"
-  >
-    <h3 className="text-base font-semibold text-center">
-      No Inputs Added Yet!
-    </h3>
-    <p className="text-xs text-muted-foreground text-center">
-      Start building your form by adding input fields.
-    </p>
-  </div>,
+  <PipelineSummary key="summary" />,
+  ,
 ];
 
 const motionVariants = {
diff --git a/frontend/components/pipeline/details.tsx b/frontend/components/pipeline/details.tsx
index 4349fdf..b97b06f 100644
--- a/frontend/components/pipeline/details.tsx
+++ b/frontend/components/pipeline/details.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
 import {
   Card,
   CardContent,
@@ -10,6 +13,8 @@ import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
 
 export function PipelineDetails() {
+  const { register } = useFormContext();
+
   return (
     <Card className="border-0 hover:border-highlight-border transition-all duration-200">
       <CardHeader>
@@ -22,7 +27,11 @@ export function PipelineDetails() {
         <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" />
+            <Input
+              id="name"
+              placeholder="e.g., Property Listings Pipeline"
+              {...register("name")}
+            />
           </div>
 
           <div className="space-y-2">
@@ -31,6 +40,7 @@ export function PipelineDetails() {
               id="description"
               placeholder="Describe what this pipeline collects and how it will be used"
               rows={4}
+              {...register("description")}
             />
           </div>
 
@@ -39,6 +49,7 @@ export function PipelineDetails() {
             <Input
               id="tags"
               placeholder="e.g., real-estate, properties, listings"
+              {...register("tags")}
             />
             <p className="text-xs text-muted-foreground mt-1">
               Separate tags with commas
diff --git a/frontend/components/pipeline/summary.tsx b/frontend/components/pipeline/summary.tsx
new file mode 100644
index 0000000..8dbb403
--- /dev/null
+++ b/frontend/components/pipeline/summary.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useFormContext } from "react-hook-form";
+
+export const PipelineSummary = () => {
+  const { getValues } = useFormContext();
+  const values = getValues();
+
+  const tags = values.tags
+    ? values.tags
+        .split(",")
+        .map((tag: string) => tag.trim()) // trim each tag
+        .filter(Boolean) // filter out empty strings
+    : [];
+
+  return (
+    <Card className="mt-6 border-0 hover:border-highlight-border transition-all duration-200">
+      <CardHeader>
+        <CardTitle>Pipeline Summary</CardTitle>
+        <CardDescription>
+          A quick overview of the pipeline configuration. Review before
+          launching.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6 pt-6">
+        {/* details */}
+        <section>
+          <h3 className="text-xl font-semibold">Pipeline Details</h3>
+          <div className="space-y-2">
+            <div>
+              <strong>Name:</strong> {values.name || "—"}
+            </div>
+            <div>
+              <strong>Description:</strong> {values.description || "—"}
+            </div>
+            <div>
+              <strong>Tags:</strong>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {tags.length > 0 ? (
+                  tags.map((tag: string, index: number) => (
+                    <Badge key={index} variant="outline">
+                      {tag}
+                    </Badge>
+                  ))
+                ) : (
+                  <div className="text-sm text-muted-foreground">
+                    No tags added
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* data sources */}
+        <section>
+          <h3 className="text-xl font-semibold">Data Sources</h3>
+          {values.dataSources && values.dataSources.length > 0 ? (
+            <ul className="list-disc pl-6 space-y-1">
+              {values.dataSources.map((src: string, index: number) => (
+                <li key={index}>{src}</li>
+              ))}
+            </ul>
+          ) : (
+            <div className="text-sm text-muted-foreground">
+              No data sources added.
+            </div>
+          )}
+        </section>
+
+        {/* AI Assistant */}
+        <section>
+          <h3 className="text-xl font-semibold">AI Assistant</h3>
+          <div className="space-y-2">
+            <div>
+              <strong>Prompt:</strong> {values.aiPrompt || "—"}
+            </div>
+            <div>
+              <strong>Mode:</strong> {values.aiMode || "Default"}
+            </div>
+          </div>
+        </section>
+
+        {/* schedule */}
+        <section>
+          <h3 className="text-xl font-semibold">Schedule</h3>
+          <div className="space-y-2">
+            <div>
+              <strong>Frequency:</strong> {values.schedule || "—"}
+            </div>
+            <div>
+              <strong>Start Date:</strong> {values.startDate || "—"}
+            </div>
+            <div>
+              <strong>Timezone:</strong> {values.timezone || "—"}
+            </div>
+          </div>
+        </section>
+
+        {/* form Inputs */}
+        <section>
+          <h3 className="text-xl font-semibold">Form Inputs</h3>
+          <div className="text-sm text-muted-foreground">
+            No input fields added yet.
+          </div>
+        </section>
+      </CardContent>
+    </Card>
+  );
+};