From 052a896c8f563cd83bc8bd92d4ac16e95aa4e90c Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 21:21:28 +0700
Subject: [PATCH] feat: add numerical indexing to cutting material and result
 groups in tables

---
 .../js/pages/admin/manage/cuttings/Share.vue  | 10 ++++-----
 .../table/CuttingCompletedSection.vue         | 21 +++++++++++--------
 .../cuttings/table/CuttingGroupedTable.vue    | 20 ++++++++----------
 .../table/CuttingInProgressSection.vue        | 21 +++++++++++--------
 4 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/Share.vue b/resources/js/pages/admin/manage/cuttings/Share.vue
index 2307e15..0d779c7 100644
--- a/resources/js/pages/admin/manage/cuttings/Share.vue
+++ b/resources/js/pages/admin/manage/cuttings/Share.vue
@@ -168,7 +168,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
                             </TableHeader>
                             <TableBody>
                                 <template
-                                    v-for="group in groupedResults"
+                                    v-for="(group, groupIndex) in groupedResults"
                                     :key="group.key"
                                 >
                                     <TableRow
@@ -178,7 +178,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
                                             colspan="5"
                                             class="font-semibold"
                                         >
-                                            {{ group.name }}
+                                            {{ groupIndex + 1 }}. {{ group.name }}
                                         </TableCell>
                                     </TableRow>
                                     <TableRow
@@ -239,7 +239,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
                             </TableHeader>
                             <TableBody>
                                 <template
-                                    v-for="group in groupedMaterials"
+                                    v-for="(group, groupIndex) in groupedMaterials"
                                     :key="group.key"
                                 >
                                     <TableRow
@@ -250,7 +250,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
                                             class="font-semibold"
                                         >
                                             <template v-if="group.isCombination">
-                                                <span class="text-primary">{{ group.name }}</span>
+                                                <span class="text-primary">{{ groupIndex + 1 }}. {{ group.name }}</span>
                                                 <Badge
                                                     variant="default"
                                                     class="ml-2 font-normal"
@@ -266,7 +266,7 @@ const groupedResults = computed<GroupedResults[]>(() => {
                                                 </Badge>
                                             </template>
                                             <template v-else>
-                                                {{ group.name }}
+                                                {{ groupIndex + 1 }}. {{ group.name }}
                                                 <Badge
                                                     v-if="group.unitLabel"
                                                     variant="secondary"
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
index b380257..2bb26e1 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue
@@ -130,7 +130,7 @@ const totalCompleted = computed(() => props.cuttings.length);
                             <template v-if="cutting.materials.length">
                                 <div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1">
                                     <div v-if="group.type === 'combination'" class="mb-1">
-                                        <span class="text-primary font-medium text-[11px]">{{ group.name }} ({{ group.items.length }} bahan)</span>
+                                        <span class="text-primary font-medium text-[11px]">{{ gi + 1 }}. {{ group.name }} ({{ group.items.length }} bahan)</span>
                                         <span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1">
                                             - Hasil: {{ group.items[0].combination_material_result }} pcs
                                         </span>
@@ -140,14 +140,17 @@ const totalCompleted = computed(() => props.cuttings.length);
                                             </li>
                                         </ul>
                                     </div>
-                                    <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">
-                                        <li v-for="mat in group.items" :key="mat.id">
-                                            {{ mat.raw_material_name }} ({{ mat.variant }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
-                                            <template v-if="mat.material_result !== null && mat.material_result !== undefined">
-                                                → {{ mat.material_result }} pcs
-                                            </template>
-                                        </li>
-                                    </ul>
+                                    <div v-else>
+                                        <span class="font-medium text-[11px]">{{ gi + 1 }}. {{ group.items[0]?.raw_material_name }}</span>
+                                        <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
+                                            <li v-for="mat in group.items" :key="mat.id">
+                                                {{ mat.variant }} - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
+                                                <template v-if="mat.material_result !== null && mat.material_result !== undefined">
+                                                    → {{ mat.material_result }} pcs
+                                                </template>
+                                            </li>
+                                        </ul>
+                                    </div>
                                 </div>
                             </template>
                             <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
index 5fff3fc..db2bf9e 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingGroupedTable.vue
@@ -235,13 +235,13 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
                                             Belum ada bahan baku
                                         </TableCell>
                                     </TableRow>
-                                    <template v-else v-for="group in getGroupedMaterials(
+                                    <template v-else v-for="(group, groupIndex) in getGroupedMaterials(
                                         cutting.materials,
                                     )" :key="group.rawMaterialId">
                                         <TableRow class="bg-muted/20 hover:bg-muted/20">
                                             <TableCell colspan="4" class="font-semibold text-foreground">
                                                 <template v-if="group.isCombination">
-                                                    <span class="text-primary">{{ group.rawMaterialName }}</span>
+                                                    <span class="text-primary">{{ groupIndex + 1 }}. {{ group.rawMaterialName }}</span>
                                                     <Badge variant="default" class="ml-2 font-normal">
                                                         {{ group.items.length }} bahan
                                                     </Badge>
@@ -252,7 +252,7 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
                                                     </Badge>
                                                 </template>
                                                 <template v-else>
-                                                    {{ group.rawMaterialName }}
+                                                    {{ groupIndex + 1 }}. {{ group.rawMaterialName }}
                                                     <Badge v-if="group.unitLabel" variant="secondary"
                                                         class="ml-2 font-normal">
                                                         {{ group.unitLabel }}
@@ -260,9 +260,9 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
                                                 </template>
                                             </TableCell>
                                         </TableRow>
-                                        <TableRow v-for="(material, index) in group.items" :key="material.id">
+                                        <TableRow v-for="material in group.items" :key="material.id">
                                             <TableCell class="pl-6 font-medium">
-                                                {{ index + 1 }}. {{ material.variant }}
+                                                {{ material.variant }}
                                             </TableCell>
                                             <TableCell>
                                                 <MediaThumbnailCell :items="material.images ?? []
@@ -310,19 +310,17 @@ function getGroupedResults(results: any[]): GroupedCuttingResults[] {
                                             Belum ada hasil produk
                                         </TableCell>
                                     </TableRow>
-                                    <template v-else v-for="group in getGroupedResults(
+                                    <template v-else v-for="(group, groupIndex) in getGroupedResults(
                                         cutting.results,
                                     )" :key="group.productId">
                                         <TableRow class="bg-muted/20 hover:bg-muted/20">
                                             <TableCell colspan="5" class="font-semibold text-foreground">
-                                                {{ group.productName }}
+                                                {{ groupIndex + 1 }}. {{ group.productName }}
                                             </TableCell>
                                         </TableRow>
-                                        <TableRow v-for="(result, index) in group.items" :key="result.id">
+                                        <TableRow v-for="result in group.items" :key="result.id">
                                             <TableCell class="pl-6 font-medium">
-                                                {{ index + 1 }}. {{
-                                                    result.product_variant?.name
-                                                }}
+                                                {{ result.product_variant?.name }}
                                             </TableCell>
                                             <TableCell>
                                                 <MediaThumbnailCell :items="result.product_variant
diff --git a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
index c62ea25..4dcf910 100644
--- a/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
+++ b/resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue
@@ -102,7 +102,7 @@ defineProps<{
                     <template v-if="cutting.materials.length">
                         <div v-for="(group, gi) in getMaterialGroups(cutting.materials)" :key="gi" class="mt-1">
                             <div v-if="group.type === 'combination'" class="mb-1">
-                                <span class="text-primary font-medium text-[11px]">{{ group.name }} ({{ group.items.length }} bahan)</span>
+                                <span class="text-primary font-medium text-[11px]">{{ gi + 1 }}. {{ group.name }} ({{ group.items.length }} bahan)</span>
                                 <span v-if="group.items[0]?.combination_material_result !== null && group.items[0]?.combination_material_result !== undefined" class="text-primary font-medium text-[11px] ml-1">
                                     - Hasil: {{ group.items[0].combination_material_result }} pcs
                                 </span>
@@ -112,14 +112,17 @@ defineProps<{
                                     </li>
                                 </ul>
                             </div>
-                            <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">
-                                <li v-for="mat in group.items" :key="mat.id">
-                                    {{ mat.raw_material_name }} ({{ mat.variant }}) - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
-                                    <template v-if="mat.material_result !== null && mat.material_result !== undefined">
-                                        → {{ mat.material_result }} pcs
-                                    </template>
-                                </li>
-                            </ul>
+                            <div v-else>
+                                <span class="font-medium text-[11px]">{{ gi + 1 }}. {{ group.items[0]?.raw_material_name }}</span>
+                                <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
+                                    <li v-for="mat in group.items" :key="mat.id">
+                                        {{ mat.variant }} - {{ formatMaterialUsage(mat) }} {{ getMaterialUnit(mat) }}
+                                        <template v-if="mat.material_result !== null && mat.material_result !== undefined">
+                                            → {{ mat.material_result }} pcs
+                                        </template>
+                                    </li>
+                                </ul>
+                            </div>
                         </div>
                     </template>
                     <ul v-else class="list-disc pl-4 space-y-0.5 text-muted-foreground">