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.

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">
+    <div v-if="cuttings.length" class="space-y-4">
-        <Card v-for="cutting in cuttings" :key="cutting.id"
+        <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">
@@ -172,4 +194,9 @@ defineProps<{
             </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>