From 9cbf841feb0e6084c05c79ddca790494326d6a1b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 29 Jul 2026 10:16:03 +0700
Subject: [PATCH] feat: add search functionality to CuttingInProgressSection
 for filtering cuttings by product name

- Implemented a search input to filter cuttings based on the product name.
- Introduced computed property for managing filtered cuttings.
- Enhanced the UI to display a message when no cuttings match the search criteria.
---
 .../table/CuttingInProgressSection.vue        | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
index c7e5e3f..b4fdce4 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { Search } from '@lucide/vue';
+import { computed, ref } from 'vue';
 import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import type { CuttingListItem } from '@/types/cutting';
 import DataTableActions from './data-table-actions.vue';
@@ -69,15 +72,34 @@ function getMaterialGroups(materials: any[]): MaterialGroup[] {
     return result;
 }
 
-defineProps<{
+const props = defineProps<{
     cuttings: CuttingListItem[];
 }>();
 
+const search = ref('');
+
+const filteredCuttings = computed(() => {
+    const keyword = search.value.toLowerCase().trim();
+    if (!keyword) return props.cuttings;
+
+    return props.cuttings.filter((cutting) =>
+        cutting.results.some((res) =>
+            (res.product_name ?? '').toLowerCase().includes(keyword),
+        ),
+    );
+});
+
 </script>
 
 <template>
-    <div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <Card v-for="cutting in cuttings" :key="cutting.id"
+    <div v-if="cuttings.length" class="space-y-4">
+        <div class="relative max-w-sm">
+            <Search class="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2 pointer-events-none" />
+            <Input v-model="search" type="search" placeholder="Cari nama produk..." class="pl-9" />
+        </div>
+
+        <div v-if="filteredCuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <Card v-for="cutting in filteredCuttings" :key="cutting.id"
             class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
             <div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
                 <div class="min-w-0">
@@ -171,5 +193,10 @@ defineProps<{
                 </div>
             </div>
         </Card>
+        </div>
+
+        <div v-else class="text-center text-muted-foreground text-sm py-8">
+            Tidak ada cutting dengan nama produk "{{ search }}"
+        </div>
     </div>
 </template>