feat: add CuttingInProgressSection to display active cuttings on index page
This commit is contained in:
Yoga Pangestu
parent
e5f2f526c3
commit
1e2d81a86d
@ -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),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
*/
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user