From 0f9865ffb37415d9e8b1791f62e95172cdd5f384 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 14:53:41 +0700
Subject: [PATCH] refactor: simplify selected materials management in
 CuttingPosCombinationDialog; streamline removal logic and enhance layout for
 better responsiveness and user interaction

---
 .../form/CuttingPosCombinationDialog.vue      | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
index 3fe6b9b..27592ac 100644
--- a/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
+++ b/resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
@@ -79,9 +79,7 @@ function toggleVariant(rawMaterial: CuttingRawMaterialCatalogItem, price: Cuttin
     );
 
     if (index !== -1) {
-        if (!selectedMaterials.value[index].is_initial) {
-            selectedMaterials.value.splice(index, 1);
-        }
+        selectedMaterials.value.splice(index, 1);
     } else {
         selectedMaterials.value.push({
             raw_material_price_id: price.id,
@@ -99,7 +97,7 @@ function toggleVariant(rawMaterial: CuttingRawMaterialCatalogItem, price: Cuttin
 
 function removeSelected(priceId: number) {
     selectedMaterials.value = selectedMaterials.value.filter(
-        (item) => item.raw_material_price_id !== priceId || item.is_initial,
+        (item) => item.raw_material_price_id !== priceId,
     );
 }
 
@@ -183,26 +181,32 @@ watch(open, (value) => {
                         <p class="text-sm font-medium">Bahan Baku Terpilih ({{ selectedMaterials.length }})</p>
                         <div class="space-y-2">
                             <div v-for="item in selectedMaterials" :key="item.raw_material_price_id"
-                                class="flex items-center gap-2 rounded-md border p-2"
+                                class="flex flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
                                 :class="item.is_initial ? 'border-primary bg-primary/5' : ''">
-                                <PosCatalogVariantThumb :items="item.images" />
-                                <div class="min-w-0 flex-1">
-                                    <p class="truncate text-sm font-medium">
-                                        {{ item.raw_material_name }} - {{ item.variant }}
-                                    </p>
-                                    <Badge variant="outline" class="text-xs mt-0.5 select-none font-normal">
-                                        Stok: {{ item.stock_formatted }}
-                                    </Badge>
+                                <div class="flex items-center gap-2 flex-1 min-w-0">
+                                    <PosCatalogVariantThumb :items="item.images" />
+                                    <div class="min-w-0 flex-1">
+                                        <p class="truncate text-sm font-medium">
+                                            {{ item.raw_material_name }} - {{ item.variant }}
+                                        </p>
+                                        <Badge variant="outline" class="text-xs mt-0.5 select-none font-normal">
+                                            Stok: {{ item.stock_formatted }}
+                                        </Badge>
+                                    </div>
+                                    <Button type="button" variant="ghost" size="icon-sm"
+                                        class="text-destructive shrink-0 sm:hidden" @click="removeSelected(item.raw_material_price_id)">
+                                        <X class="size-3.5" />
+                                    </Button>
                                 </div>
-                                <div class="flex items-center gap-1" @click.stop>
+                                <div class="flex items-center gap-2 sm:gap-1">
                                     <Label class="text-xs whitespace-nowrap">Pemakaian:</Label>
                                     <DecimalInput v-model="item.material_usage" class="h-7 w-20" />
                                     <span class="text-xs text-muted-foreground">{{ item.unit_abbreviation }}</span>
+                                    <Button type="button" variant="ghost" size="icon-sm"
+                                        class="text-destructive shrink-0 hidden sm:inline-flex" @click="removeSelected(item.raw_material_price_id)">
+                                        <X class="size-3.5" />
+                                    </Button>
                                 </div>
-                                <Button v-if="!item.is_initial" type="button" variant="ghost" size="icon-sm"
-                                    class="text-destructive" @click="removeSelected(item.raw_material_price_id)">
-                                    <X class="size-3.5" />
-                                </Button>
                             </div>
                         </div>
                     </div>
@@ -255,8 +259,8 @@ watch(open, (value) => {
                 </div>
             </div>
 
-            <div class="flex items-center justify-between border-t pt-4">
-                <div class="flex items-center gap-3">
+            <div class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
+                <div class="flex flex-wrap items-center gap-3">
                     <div class="flex items-center gap-2">
                         <Label class="text-sm whitespace-nowrap">Hasil:</Label>
                         <NumberInput v-model="combinationResult" class="h-8 w-20" placeholder="0" />
@@ -267,10 +271,10 @@ watch(open, (value) => {
                     </p>
                 </div>
                 <div class="flex gap-2">
-                    <Button type="button" variant="outline" :disabled="loading" @click="open = false">
+                    <Button type="button" variant="outline" class="flex-1 sm:flex-none" :disabled="loading" @click="open = false">
                         Batal
                     </Button>
-                    <Button type="button" :disabled="loading || selectedMaterials.length < 2" @click="submit">
+                    <Button type="button" class="flex-1 sm:flex-none" :disabled="loading || selectedMaterials.length < 2" @click="submit">
                         <Layers class="size-4 mr-1" />
                         {{ loading ? 'Menyimpan...' : 'Simpan Kombinasi' }}
                     </Button>