feat: enhance cutting management UI by adding media thumbnails for product variants and raw materials

app/Services/Manage/StockService.php

@@ -5,11 +5,13 @@
 use App\Enums\CuttingStatus;
 use App\Models\Cutting;
 use App\Models\CuttingMaterial;
+use App\Models\CuttingResult;
 use App\Models\CuttingResultPrice;
 use App\Models\ProductPrice;
 use App\Models\ProductVariant;
 use App\Models\User;
 use App\Services\System\PushNotificationService;
+use App\Support\Media\MediaPresenter;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
@@ -28,14 +30,16 @@ public function getPendingVerificationCuttings(User $user): Collection
                 'createdBy.profile',
                 'rejection.rejectedBy.profile',
                 'materials.rawMaterialPrice.rawMaterial:id,name,unit',
+                'materials.rawMaterialPrice.media',
                 'results.productVariant.product:id,name',
-                'results.productVariant:id,product_id,name',
+                'results.productVariant.media',
             ])
             ->completed()
             ->latest()
             ->get()
             ->each(function (Cutting $cutting): void {
                 $this->appendCostPreview($cutting);
+                $this->appendPhotos($cutting);
                 $cutting->materials->each(fn (CuttingMaterial $m) => $this->breakMaterialCircularReference($m));
             });
     }
@@ -48,8 +52,9 @@ public function getPendingApprovalCuttings(User $user): Collection
                 'submittedBy.profile',
                 'rejection.rejectedBy.profile',
                 'materials.rawMaterialPrice.rawMaterial:id,name,unit',
+                'materials.rawMaterialPrice.media',
                 'results.productVariant.product:id,name',
-                'results.productVariant:id,product_id,name',
+                'results.productVariant.media',
                 'resultPrices.productVariant:id,product_id,name',
             ])
             ->pendingVerification()
@@ -57,6 +62,7 @@ public function getPendingApprovalCuttings(User $user): Collection
             ->get()
             ->each(function (Cutting $cutting): void {
                 $this->appendCostPreview($cutting);
+                $this->appendPhotos($cutting);
                 $cutting->materials->each(fn (CuttingMaterial $m) => $this->breakMaterialCircularReference($m));
             });
     }
@@ -346,4 +352,26 @@ private function appendCostPreview(Cutting $cutting): void
         $cutting->setAttribute('estimated_cost_per_unit', $costPerUnit);
         $cutting->setAttribute('estimated_cost_per_unit_formatted', 'Rp '.number_format($costPerUnit, 0, ',', '.'));
     }
+
+    private function appendPhotos(Cutting $cutting): void
+    {
+        $cutting->materials->each(function (CuttingMaterial $material): void {
+            $price = $material->rawMaterialPrice;
+
+            if ($price) {
+                $price->setAttribute('images', MediaPresenter::collection($price, 'images'));
+            }
+        });
+
+        $cutting->results->each(function (CuttingResult $result): void {
+            $variant = $result->productVariant;
+
+            if ($variant) {
+                $variant->setAttribute(
+                    'images',
+                    MediaPresenter::collection($variant, 'images'),
+                );
+            }
+        });
+    }
 }

resources/js/pages/admin/manage/cuttings/table/CuttingCompletedSection.vue

@@ -104,7 +104,7 @@ const totalCompleted = computed(() => props.cuttings.length);
                             <span class="font-medium text-foreground">Hasil Produk:</span>
                             <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
                                 <li v-for="res in cutting.results" :key="res.id">
-                                    {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }}) - {{ res.cutting_result }} pcs
+                                    {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }})<span v-if="res.cutting_result !== null && res.cutting_result !== undefined"> - {{ res.cutting_result }} pcs</span>
                                 </li>
                                 <li v-if="!cutting.results.length">Belum ada hasil produk</li>
                             </ul>

resources/js/pages/admin/manage/cuttings/table/CuttingInProgressSection.vue

@@ -77,7 +77,7 @@ defineProps<{
                     <span class="font-medium text-foreground">Hasil Produk:</span>
                     <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
                         <li v-for="res in cutting.results" :key="res.id">
-                            {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }})
+                            {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }})<span v-if="res.cutting_result !== null && res.cutting_result !== undefined"> - {{ res.cutting_result }} pcs</span>
                         </li>
                         <li v-if="!cutting.results.length">Belum ada hasil produk</li>
                     </ul>

resources/js/pages/admin/manage/stocks/table/StockPendingApprovalSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import OwnerVerificationRowActions from '@/components/owner-verification/OwnerVerificationRowActions.vue';
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import { Badge } from '@/components/ui/badge';
 import {
     Table,
@@ -53,6 +54,7 @@ defineProps<{
                             <TableHeader>
                                 <TableRow>
                                     <TableHead>Varian</TableHead>
+                                    <TableHead>Foto</TableHead>
                                     <TableHead>Hasil</TableHead>
                                     <TableHead>Bagus</TableHead>
                                     <TableHead>Reject</TableHead>
@@ -60,7 +62,7 @@ defineProps<{
                             </TableHeader>
                             <TableBody>
                                 <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
-                                    <TableCell colspan="4" class="text-muted-foreground">
+                                    <TableCell colspan="5" class="text-muted-foreground">
                                         Belum ada hasil verifikasi
                                     </TableCell>
                                 </TableRow>
@@ -68,6 +70,9 @@ defineProps<{
                                     <TableCell class="font-medium">
                                         {{ result.product_variant?.product?.name }} ({{ result.product_variant?.name }})
                                     </TableCell>
+                                    <TableCell>
+                                        <MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
+                                    </TableCell>
                                     <TableCell class="tabular-nums">
                                         {{ result.cutting_result }} pcs
                                     </TableCell>

resources/js/pages/admin/manage/stocks/table/StockPendingSection.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import {
     Table,
     TableBody,
@@ -48,6 +49,7 @@ defineProps<{
                             <TableHeader>
                                 <TableRow>
                                     <TableHead>Varian</TableHead>
+                                    <TableHead>Foto</TableHead>
                                     <TableHead>Hasil</TableHead>
                                     <TableHead>Sample</TableHead>
                                     <TableHead>Diluar Sample</TableHead>
@@ -55,7 +57,7 @@ defineProps<{
                             </TableHeader>
                             <TableBody>
                                 <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
-                                    <TableCell colspan="4" class="text-muted-foreground">
+                                    <TableCell colspan="5" class="text-muted-foreground">
                                         Belum ada hasil produk
                                     </TableCell>
                                 </TableRow>
@@ -63,6 +65,9 @@ defineProps<{
                                     <TableCell class="font-medium">
                                         {{ result.product_variant?.product?.name }} ({{ result.product_variant?.name }})
                                     </TableCell>
+                                    <TableCell>
+                                        <MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
+                                    </TableCell>
                                     <TableCell class="tabular-nums">
                                         {{ result.cutting_result }} pcs
                                     </TableCell>

resources/js/pages/admin/manage/stocks/table/StockVerifiedSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import { Badge } from '@/components/ui/badge';
 import {
     Empty,
@@ -99,6 +100,7 @@ const showingCount = computed(() => props.cuttings.length);
                                 <TableHeader>
                                     <TableRow>
                                         <TableHead>Varian</TableHead>
+                                        <TableHead>Foto</TableHead>
                                         <TableHead>Hasil</TableHead>
                                         <TableHead>Sample</TableHead>
                                         <TableHead>Diluar Sample</TableHead>
@@ -106,14 +108,14 @@ const showingCount = computed(() => props.cuttings.length);
                                 </TableHeader>
                                 <TableBody>
                                     <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
-                                        <TableCell colspan="4" class="text-muted-foreground">
+                                        <TableCell colspan="5" class="text-muted-foreground">
                                             Belum ada hasil produk
                                         </TableCell>
                                     </TableRow>
                                     <template v-else v-for="group in getGroupedResults(cutting.results)"
                                         :key="group.productId">
                                         <TableRow class="bg-muted/20 hover:bg-muted/20">
-                                            <TableCell colspan="4" class="font-semibold text-foreground">
+                                            <TableCell colspan="5" class="font-semibold text-foreground">
                                                 {{ group.productName }}
                                             </TableCell>
                                         </TableRow>
@@ -121,6 +123,9 @@ const showingCount = computed(() => props.cuttings.length);
                                             <TableCell class="pl-6 font-medium">
                                                 {{ result.product_variant?.name }}
                                             </TableCell>
+                                            <TableCell>
+                                                <MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
+                                            </TableCell>
                                             <TableCell class="tabular-nums">
                                                 {{ result.cutting_result }} pcs
                                             </TableCell>

resources/js/pages/admin/manage/stocks/table/StockVerifyDialog.vue

@@ -4,6 +4,7 @@ import { computed, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import { NumberInput } from '@/components/form/number-input';
 import { RupiahInput } from '@/components/form/rupiah-input';
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -177,6 +178,9 @@ function submitVerify() {
                         <div v-for="(result, index) in verifyForm.results" :key="result.product_variant_id"
                             class="flex flex-col gap-1 rounded-lg border p-3">
                             <div class="flex items-center gap-3">
+                                <div class="shrink-0">
+                                    <MediaThumbnailCell :items="cutting.results[index]?.product_variant?.images ?? []" :max-visible="1" />
+                                </div>
                                 <div class="flex-1 min-w-0">
                                     <p class="font-medium text-sm truncate">{{ result.name }}</p>
                                     <p class="text-xs text-muted-foreground">