feat: add CuttingInProgressSection to display active cuttings on index page

app/Http/Controllers/Admin/Manage/CuttingController.php

@@ -30,6 +30,7 @@ public function index(Request $request): Response
 
         return Inertia::render('admin/manage/cuttings/Index', [
             'cuttings' => $this->cuttingService->paginateForIndex($tableQuery, $request->user()),
+            'inProgressCuttings' => $this->cuttingService->getInProgressCuttings($request->user()),
             'filters' => $this->dataTableFilters($tableQuery),
         ]);
     }

app/Services/Manage/CuttingService.php

@@ -66,6 +66,34 @@ public function paginateForIndex(array $tableQuery, User $user): LengthAwarePagi
             });
     }
 
+    /**
+     * @return Collection<int, Cutting>
+     */
+    public function getInProgressCuttings(User $user): Collection
+    {
+        return Cutting::query()
+            ->with([
+                'createdBy.profile',
+                'rejection.rejectedBy.profile',
+                'materials.rawMaterialPrice.rawMaterial:id,name,unit',
+                'results.productVariant.product:id,name',
+                'results.productVariant:id,product_id,name',
+            ])
+            ->where('status', CuttingStatus::IN_PROGRESS)
+            ->latest()
+            ->get()
+            ->each(function (Cutting $cutting) use ($user): void {
+                $actions = collect($cutting->status->availableActions())
+                    ->filter(fn (array $action) => $user->can($action['permission']))
+                    ->values()
+                    ->all();
+
+                $cutting->setAttribute('available_actions', $actions);
+                $cutting->setAttribute('is_editable', $cutting->status->isEditable());
+            });
+    }
+
+
     /**
      * @return Collection<int, RawMaterial>
      */

resources/js/components/admin/manage/cuttings/CuttingInProgressSection.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ChevronDown, Scissors } from '@lucide/vue';
+import { computed, ref } from 'vue';
+import DataTableActions from '@/components/admin/manage/cuttings/data-table-actions.vue';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+} from '@/components/ui/empty';
+import type { CuttingListItem } from '@/types/cutting';
+
+const props = defineProps<{
+    cuttings: CuttingListItem[];
+}>();
+
+const open = ref(true);
+
+const totalInProgress = computed(() => props.cuttings.length);
+</script>
+
+<template>
+    <Collapsible v-model:open="open">
+        <Card class="!py-0">
+            <CollapsibleTrigger
+                class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
+                <div class="min-w-0 space-y-1">
+                    <div class="flex items-center gap-2">
+                        <Scissors class="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+                        <h3 class="font-semibold leading-tight">
+                            Cutting Sedang Proses
+                        </h3>
+                        <Badge v-if="totalInProgress > 0" variant="outline" class="border-amber-600/30 text-amber-600 dark:text-amber-400">
+                            {{ totalInProgress }}
+                        </Badge>
+                    </div>
+                    <p class="text-xs text-muted-foreground">
+                        Daftar cutting yang sedang dalam pengerjaan. Gunakan tombol aksi untuk mengubah, menyelesaikan, atau menghapus.
+                    </p>
+                </div>
+
+                <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+                    :class="open ? 'rotate-180' : ''" />
+            </CollapsibleTrigger>
+
+            <CollapsibleContent>
+                <CardContent class="pt-0 pb-6">
+                    <div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                        <Card v-for="cutting in cuttings" :key="cutting.id" class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
+                            <div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
+                                <div class="min-w-0">
+                                    <h4 class="font-medium text-sm truncate">
+                                        Cutting #{{ cutting.id }}
+                                    </h4>
+                                    <span class="text-[10px] text-muted-foreground block truncate">
+                                        {{ cutting.created_at_formatted }}
+                                    </span>
+                                </div>
+                                <div class="flex shrink-0 items-center">
+                                    <DataTableActions :cutting="cutting" />
+                                </div>
+                            </div>
+
+                            <div class="p-4 space-y-3 flex-1 text-xs">
+                                <div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
+                                    <span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
+                                </div>
+
+                                <div class="space-y-1">
+                                    <span class="font-medium text-foreground">Bahan Baku:</span>
+                                    <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
+                                        <li v-for="mat in cutting.materials" :key="mat.id">
+                                            {{ mat.raw_material_price?.raw_material?.name }} ({{ mat.raw_material_price?.variant }}) - {{ mat.material_usage_formatted }}
+                                        </li>
+                                        <li v-if="!cutting.materials.length">Belum ada bahan baku</li>
+                                    </ul>
+                                </div>
+
+                                <div class="space-y-1">
+                                    <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
+                                        </li>
+                                        <li v-if="!cutting.results.length">Belum ada hasil produk</li>
+                                    </ul>
+                                </div>
+
+                                <div class="text-[11px] text-muted-foreground pt-2 border-t flex items-center justify-between">
+                                    <span>Pembuat:</span>
+                                    <span class="font-medium text-foreground">
+                                        {{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}
+                                    </span>
+                                </div>
+                            </div>
+                        </Card>
+                    </div>
+
+                    <Empty v-else class="py-8">
+                        <EmptyHeader>
+                            <EmptyTitle>Tidak ada cutting proses</EmptyTitle>
+                            <EmptyDescription>
+                                Semua cutting telah selesai atau belum dimulai.
+                            </EmptyDescription>
+                        </EmptyHeader>
+                    </Empty>
+                </CardContent>
+            </CollapsibleContent>
+        </Card>
+    </Collapsible>
+</template>

resources/js/pages/admin/manage/cuttings/Index.vue

@@ -2,16 +2,18 @@
 import { Head, Link } from '@inertiajs/vue3';
 import { Plus } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
+import CuttingInProgressSection from '@/components/admin/manage/cuttings/CuttingInProgressSection.vue';
 import CuttingGroupedTable from '@/components/admin/manage/cuttings/CuttingGroupedTable.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/composables/useCan';
 import { useDataTableQuery, useDataTableQuerySync } from '@/composables/useDataTableQuery';
 import AdminLayout from '@/layouts/AdminLayout.vue';
-import type { PaginatedCuttings } from '@/types/cutting';
+import type { PaginatedCuttings, CuttingListItem } from '@/types/cutting';
 
 const props = defineProps<{
     cuttings: PaginatedCuttings;
+    inProgressCuttings: CuttingListItem[];
     filters: {
         search: string;
         sort?: string;
@@ -73,6 +75,8 @@ watch(
             </Button>
         </div>
 
+        <CuttingInProgressSection :cuttings="inProgressCuttings" />
+
         <Card class="min-w-0">
             <CardContent class="min-w-0">
                 <CuttingGroupedTable