feat: enhance grouping of purchase items by sorting variants and assigning item numbers

resources/js/pages/admin/manage/purchases/table/PurchaseGroupedTable.vue

@@ -78,27 +78,33 @@ interface GroupedPurchaseItems {
 
 function getGroupedItems(items: PurchaseItemDetail[]): GroupedPurchaseItems[] {
     const groups: Record<number, GroupedPurchaseItems> = {};
-    let itemCounter = 0;
 
     items.forEach((item) => {
         const rawMaterialId = item.raw_material_id ?? 0;
-        const rawMaterialName = item.raw_material_name || 'Bahan Baku Tidak Diketahui';
-        const unitLabel = item.raw_material_unit_label;
 
         if (!groups[rawMaterialId]) {
             groups[rawMaterialId] = {
                 rawMaterialId,
-                rawMaterialName,
-                unitLabel,
+                rawMaterialName: item.raw_material_name || 'Bahan Baku Tidak Diketahui',
+                unitLabel: item.raw_material_unit_label,
                 items: [],
             };
         }
 
-        itemCounter++;
-        groups[rawMaterialId].items.push({ ...item, item_number: itemCounter });
+        groups[rawMaterialId].items.push({ ...item });
     });
 
-    return Object.values(groups);
+    let itemCounter = 0;
+    return Object.values(groups).map((group) => {
+        group.items.sort((a, b) => (a.variant ?? '').localeCompare(b.variant ?? ''));
+        return {
+            ...group,
+            items: group.items.map((item) => {
+                itemCounter++;
+                return { ...item, item_number: itemCounter };
+            }),
+        };
+    });
 }
 
 const verificationModalOpen = ref(false);