From 70131ecd2d28968bfe6f43c4df15cf0a84e6fbe6 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sat, 20 Sep 2025 15:03:36 +0200
Subject: [PATCH] feat: add status filter to ExtractionsHeader and update
 SchedulersHeader layout

---
 .../extractions/ExtractionsHeader.tsx         | 36 +++++++++----------
 .../schedulers/SchedulersHeader.tsx           | 36 +++++++++++--------
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/components/extractions/ExtractionsHeader.tsx b/src/components/extractions/ExtractionsHeader.tsx
index 6cce580..f929dde 100644
--- a/src/components/extractions/ExtractionsHeader.tsx
+++ b/src/components/extractions/ExtractionsHeader.tsx
@@ -93,11 +93,28 @@ export function ExtractionsHeader({
         </div>
 
         <div className="flex gap-2">
+          <Select
+            value={statusFilter}
+            onValueChange={value => onStatusFilterChange(value as ExtractionStatus | 'all')}
+          >
+            <SelectTrigger className="w-[160px]">
+              <Filter className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="processing">Processing</SelectItem>
+              <SelectItem value="completed">Completed</SelectItem>
+              <SelectItem value="failed">Failed</SelectItem>
+            </SelectContent>
+          </Select>
+
           <Select
             value={sortBy}
             onValueChange={value => onSortByChange(value as ExtractionSortField)}
           >
-            <SelectTrigger className="w-[180px]">
+            <SelectTrigger className="w-[150px]">
               <SelectValue placeholder="Sort by" />
             </SelectTrigger>
             <SelectContent>
@@ -122,23 +139,6 @@ export function ExtractionsHeader({
             )}
           </Button>
 
-          <Select
-            value={statusFilter}
-            onValueChange={value => onStatusFilterChange(value as ExtractionStatus | 'all')}
-          >
-            <SelectTrigger className="w-[120px]">
-              <Filter className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Status</SelectItem>
-              <SelectItem value="pending">Pending</SelectItem>
-              <SelectItem value="processing">Processing</SelectItem>
-              <SelectItem value="completed">Completed</SelectItem>
-              <SelectItem value="failed">Failed</SelectItem>
-            </SelectContent>
-          </Select>
-
           <Button
             variant="outline"
             size="icon"
diff --git a/src/components/schedulers/SchedulersHeader.tsx b/src/components/schedulers/SchedulersHeader.tsx
index d18a19d..6b5e458 100644
--- a/src/components/schedulers/SchedulersHeader.tsx
+++ b/src/components/schedulers/SchedulersHeader.tsx
@@ -14,7 +14,8 @@ import {
   getTaskTypeLabel,
 } from '@/lib/api/services/schedulers'
 import {
-  CalendarPlus,
+  Filter,
+  Plus,
   RefreshCw,
   Search,
 } from 'lucide-react'
@@ -64,18 +65,9 @@ export function SchedulersHeader({
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onRefresh}
-            disabled={loading}
-          >
-            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
-            Refresh
-          </Button>
-          <Button onClick={onCreateClick} size="sm">
-            <CalendarPlus className="h-4 w-4" />
-            Create Task
+          <Button onClick={onCreateClick}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Extraction
           </Button>
         </div>
       </div>
@@ -96,7 +88,8 @@ export function SchedulersHeader({
             value={statusFilter}
             onValueChange={onStatusFilterChange}
           >
-            <SelectTrigger className="w-[140px]">
+            <SelectTrigger className="w-[160px]">
+              <Filter className="h-4 w-4 mr-2" />
               <SelectValue placeholder="All Status" />
             </SelectTrigger>
             <SelectContent>
@@ -113,7 +106,8 @@ export function SchedulersHeader({
             value={taskTypeFilter}
             onValueChange={onTaskTypeFilterChange}
           >
-            <SelectTrigger className="w-[140px]">
+            <SelectTrigger className="w-[200px]">
+              <Filter className="h-4 w-4 mr-2" />
               <SelectValue placeholder="All Types" />
             </SelectTrigger>
             <SelectContent>
@@ -125,6 +119,18 @@ export function SchedulersHeader({
               ))}
             </SelectContent>
           </Select>
+
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={onRefresh}
+            disabled={loading}
+            title="Refresh extractions"
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`}
+            />
+          </Button>
         </div>
       </div>