From 02fb2045d2329b300f1c4cbbaddfafc45f89ff34 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 5 Jul 2026 02:09:17 +0700
Subject: [PATCH] refactor: restructure results section in Share.vue for
 improved clarity; enhance display of cutting results with a new table format
 and computed logic for grouped results

---
 .../js/pages/admin/manage/cuttings/Share.vue  | 196 +++++++++---------
 1 file changed, 98 insertions(+), 98 deletions(-)

diff --git a/resources/js/pages/admin/manage/cuttings/Share.vue b/resources/js/pages/admin/manage/cuttings/Share.vue
index fc51612..8f09caf 100644
--- a/resources/js/pages/admin/manage/cuttings/Share.vue
+++ b/resources/js/pages/admin/manage/cuttings/Share.vue
@@ -154,33 +154,77 @@ const groupedResults = computed<GroupedResults[]>(() => {
                     </div>
                 </div>
 
-                <!-- Summary -->
-                <div class="border-b p-6">
-                    <h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
-                    <div class="grid gap-4 sm:grid-cols-2">
-                        <div class="rounded-lg border p-3">
-                            <p class="text-xs text-muted-foreground">
-                                Total Hasil Cutting
-                            </p>
-                            <p class="mt-1 text-lg font-semibold text-primary">
-                                {{ cutting.total_result_pieces ?? 0 }} pcs
-                            </p>
-                        </div>
-                        <div
-                            v-if="
-                                cutting.total_material_usage_summary_formatted
-                            "
-                            class="rounded-lg border p-3"
-                        >
-                            <p class="text-xs text-muted-foreground">
-                                Total Pemakaian Bahan
-                            </p>
-                            <p class="mt-1 text-lg font-semibold text-primary">
-                                {{
-                                    cutting.total_material_usage_summary_formatted
-                                }}
-                            </p>
-                        </div>
+                <!-- Results Section -->
+                <div v-if="cutting.results.length" class="border-b p-6">
+                    <h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
+                    <div class="overflow-hidden rounded-md border">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Varian</TableHead>
+                                    <TableHead>Foto</TableHead>
+                                    <TableHead class="text-right"
+                                        >Hasil</TableHead
+                                    >
+                                    <TableHead class="text-right"
+                                        >Sample</TableHead
+                                    >
+                                    <TableHead class="text-right"
+                                        >Diluar Sample</TableHead
+                                    >
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                <template
+                                    v-for="group in groupedResults"
+                                    :key="group.key"
+                                >
+                                    <TableRow
+                                        class="bg-muted/20 hover:bg-muted/20"
+                                    >
+                                        <TableCell
+                                            colspan="5"
+                                            class="font-semibold"
+                                        >
+                                            {{ group.name }}
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow
+                                        v-for="result in group.items"
+                                        :key="result.id"
+                                    >
+                                        <TableCell class="pl-6">
+                                            {{ result.product_variant?.name }}
+                                        </TableCell>
+                                        <TableCell>
+                                            <MediaThumbnailCell
+                                                :items="
+                                                    result.product_variant
+                                                        ?.images ?? []
+                                                "
+                                                :max-visible="1"
+                                            />
+                                        </TableCell>
+                                        <TableCell
+                                            class="text-right tabular-nums"
+                                        >
+                                            {{ result.cutting_result }} pcs
+                                        </TableCell>
+                                        <TableCell
+                                            class="text-right tabular-nums"
+                                        >
+                                            {{ result.sample }} pcs
+                                        </TableCell>
+                                        <TableCell
+                                            class="text-right tabular-nums"
+                                        >
+                                            {{ result.original_outside_sample }}
+                                            pcs
+                                        </TableCell>
+                                    </TableRow>
+                                </template>
+                            </TableBody>
+                        </Table>
                     </div>
                 </div>
 
@@ -281,77 +325,33 @@ const groupedResults = computed<GroupedResults[]>(() => {
                     </div>
                 </div>
 
-                <!-- Results Section -->
-                <div v-if="cutting.results.length" class="p-6">
-                    <h3 class="mb-3 text-sm font-semibold">Hasil Produk</h3>
-                    <div class="overflow-hidden rounded-md border">
-                        <Table>
-                            <TableHeader>
-                                <TableRow>
-                                    <TableHead>Varian</TableHead>
-                                    <TableHead>Foto</TableHead>
-                                    <TableHead class="text-right"
-                                        >Hasil</TableHead
-                                    >
-                                    <TableHead class="text-right"
-                                        >Sample</TableHead
-                                    >
-                                    <TableHead class="text-right"
-                                        >Diluar Sample</TableHead
-                                    >
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                <template
-                                    v-for="group in groupedResults"
-                                    :key="group.key"
-                                >
-                                    <TableRow
-                                        class="bg-muted/20 hover:bg-muted/20"
-                                    >
-                                        <TableCell
-                                            colspan="5"
-                                            class="font-semibold"
-                                        >
-                                            {{ group.name }}
-                                        </TableCell>
-                                    </TableRow>
-                                    <TableRow
-                                        v-for="result in group.items"
-                                        :key="result.id"
-                                    >
-                                        <TableCell class="pl-6">
-                                            {{ result.product_variant?.name }}
-                                        </TableCell>
-                                        <TableCell>
-                                            <MediaThumbnailCell
-                                                :items="
-                                                    result.product_variant
-                                                        ?.images ?? []
-                                                "
-                                                :max-visible="1"
-                                            />
-                                        </TableCell>
-                                        <TableCell
-                                            class="text-right tabular-nums"
-                                        >
-                                            {{ result.cutting_result }} pcs
-                                        </TableCell>
-                                        <TableCell
-                                            class="text-right tabular-nums"
-                                        >
-                                            {{ result.sample }} pcs
-                                        </TableCell>
-                                        <TableCell
-                                            class="text-right tabular-nums"
-                                        >
-                                            {{ result.original_outside_sample }}
-                                            pcs
-                                        </TableCell>
-                                    </TableRow>
-                                </template>
-                            </TableBody>
-                        </Table>
+                <!-- Summary -->
+                <div class="p-6">
+                    <h3 class="mb-3 text-sm font-semibold">Ringkasan</h3>
+                    <div class="grid gap-4 sm:grid-cols-2">
+                        <div class="rounded-lg border p-3">
+                            <p class="text-xs text-muted-foreground">
+                                Total Hasil Cutting
+                            </p>
+                            <p class="mt-1 text-lg font-semibold text-primary">
+                                {{ cutting.total_result_pieces ?? 0 }} pcs
+                            </p>
+                        </div>
+                        <div
+                            v-if="
+                                cutting.total_material_usage_summary_formatted
+                            "
+                            class="rounded-lg border p-3"
+                        >
+                            <p class="text-xs text-muted-foreground">
+                                Total Pemakaian Bahan
+                            </p>
+                            <p class="mt-1 text-lg font-semibold text-primary">
+                                {{
+                                    cutting.total_material_usage_summary_formatted
+                                }}
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>