From 668847edc3aeea0f5cf29c4ee61c8ae136008a2b Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Tue, 8 Apr 2025 14:31:30 +0700
Subject: [PATCH] feat: add PipelineStatus component and integrate it into
 PipelineDetailsPage

---
 frontend/app/(sidebar)/data-pipeline/page.tsx |  1 +
 .../data-pipeline/property-listings/page.tsx  | 36 +---------------
 frontend/components/pipeline/status.tsx       | 41 +++++++++++++++++++
 3 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 frontend/components/pipeline/status.tsx

diff --git a/frontend/app/(sidebar)/data-pipeline/page.tsx b/frontend/app/(sidebar)/data-pipeline/page.tsx
index 44d3a88..7e5a135 100644
--- a/frontend/app/(sidebar)/data-pipeline/page.tsx
+++ b/frontend/app/(sidebar)/data-pipeline/page.tsx
@@ -98,6 +98,7 @@ export default function DataPipelinePage() {
                 aiPowered={true}
               />
 
+              {/* mock pipeline card with data */}
               <PipelineCard
                 title="Rental Market Data"
                 description="Collects rental prices and availability"
diff --git a/frontend/app/(sidebar)/data-pipeline/property-listings/page.tsx b/frontend/app/(sidebar)/data-pipeline/property-listings/page.tsx
index 66f1370..93d4f06 100644
--- a/frontend/app/(sidebar)/data-pipeline/property-listings/page.tsx
+++ b/frontend/app/(sidebar)/data-pipeline/property-listings/page.tsx
@@ -8,6 +8,7 @@ import PageHeader from "@/components/page-header"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { PipelineStatus } from "@/components/pipeline/status"
 
 export default function PipelineDetailsPage() {
   return (
@@ -49,40 +50,7 @@ export default function PipelineDetailsPage() {
       </div>
 
       <div className="grid gap-6 md:grid-cols-3 mt-6">
-        <Card className="border-2 border-green-500 dark:border-green-600">
-          <CardHeader>
-            <CardTitle className="text-lg">Pipeline Status</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Status:</span>
-                <Badge
-                  variant="default"
-                  className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
-                >
-                  Active
-                </Badge>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Last Run:</span>
-                <span>2 hours ago</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Next Run:</span>
-                <span>Tomorrow at 9:00 AM</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Run Frequency:</span>
-                <span>Daily</span>
-              </div>
-              <div className="flex justify-between items-center">
-                <span className="text-muted-foreground">Total Records:</span>
-                <span>1,240</span>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <PipelineStatus />
 
         <Card className="border-2 hover:border-highlight-border transition-all duration-200">
           <CardHeader>
diff --git a/frontend/components/pipeline/status.tsx b/frontend/components/pipeline/status.tsx
new file mode 100644
index 0000000..4266684
--- /dev/null
+++ b/frontend/components/pipeline/status.tsx
@@ -0,0 +1,41 @@
+import { Badge } from "../ui/badge";
+import { Card, CardHeader, CardTitle, CardContent } from "../ui/card";
+
+export function PipelineStatus() {
+    return (
+      <Card className="border-2 border-green-500 dark:border-green-600">
+        <CardHeader>
+          <CardTitle className="text-lg">Pipeline Status</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">Status:</span>
+              <Badge
+                variant="default"
+                className="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
+              >
+                Active
+              </Badge>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">Last Run:</span>
+              <span>2 hours ago</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">Next Run:</span>
+              <span>Tomorrow at 9:00 AM</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">Run Frequency:</span>
+              <span>Daily</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-muted-foreground">Total Records:</span>
+              <span>1,240</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+}
\ No newline at end of file