398 lines
17 KiB
Vue
398 lines
17 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import DataTableActions from './data-table-actions.vue';
|
|
import { DataTableEmpty } from '@/components/data-table';
|
|
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
|
|
import GroupedTableFooter from '@/components/data-table/GroupedTableFooter.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { usePaginationSummary } from '@/composables/usePaginationSummary';
|
|
import { cuttingStatusBadgeVariant } from '@/constants/cutting-status';
|
|
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
|
|
import { groupedTableRowNumber } from '@/lib/grouped-table';
|
|
import type { CuttingListItem } from '@/types/cutting';
|
|
import type {
|
|
DataTablePagination,
|
|
DataTablePaginationLink,
|
|
} from '@/types/data-table';
|
|
|
|
const props = defineProps<{
|
|
cuttings: CuttingListItem[];
|
|
firstItem?: number;
|
|
pagination?: DataTablePagination;
|
|
paginationLinks?: DataTablePaginationLink[];
|
|
}>();
|
|
|
|
const search = defineModel<string>('search', { default: '' });
|
|
|
|
const emit = defineEmits<{
|
|
'filters-reset': [];
|
|
}>();
|
|
|
|
const showingCount = computed(() => props.cuttings.length);
|
|
const paginationSummary = usePaginationSummary(
|
|
() => props.pagination,
|
|
showingCount,
|
|
'cutting',
|
|
);
|
|
|
|
function rowNumber(index: number): number {
|
|
return groupedTableRowNumber(props.firstItem, index);
|
|
}
|
|
|
|
interface GroupedCuttingMaterials {
|
|
rawMaterialId: number;
|
|
rawMaterialName: string;
|
|
unitLabel?: string;
|
|
items: any[];
|
|
}
|
|
|
|
interface GroupedCuttingResults {
|
|
productId: number;
|
|
productName: string;
|
|
items: any[];
|
|
}
|
|
|
|
function getGroupedMaterials(materials: any[]): GroupedCuttingMaterials[] {
|
|
const groups: Record<number, GroupedCuttingMaterials> = {};
|
|
|
|
materials.forEach((item) => {
|
|
const rawMaterialId = item.raw_material_id ?? 0;
|
|
const rawMaterialName =
|
|
item.raw_material_name || 'Bahan Baku Tidak Diketahui';
|
|
const unitLabel = item.raw_material_unit_label;
|
|
|
|
if (!groups[rawMaterialId]) {
|
|
groups[rawMaterialId] = {
|
|
rawMaterialId,
|
|
rawMaterialName,
|
|
unitLabel,
|
|
items: [],
|
|
};
|
|
}
|
|
|
|
groups[rawMaterialId].items.push(item);
|
|
});
|
|
|
|
return Object.values(groups);
|
|
}
|
|
|
|
function getGroupedResults(results: any[]): GroupedCuttingResults[] {
|
|
const groups: Record<number, GroupedCuttingResults> = {};
|
|
|
|
results.forEach((item) => {
|
|
const product = item.product_variant?.product;
|
|
const productId = product?.id ?? 0;
|
|
const productName = product?.name ?? 'Produk Tidak Diketahui';
|
|
|
|
if (!groups[productId]) {
|
|
groups[productId] = {
|
|
productId,
|
|
productName,
|
|
items: [],
|
|
};
|
|
}
|
|
|
|
groups[productId].items.push(item);
|
|
});
|
|
|
|
return Object.values(groups);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<DataTableToolbar
|
|
v-model:search="search"
|
|
@filters-reset="emit('filters-reset')"
|
|
/>
|
|
|
|
<div v-if="cuttings.length" class="space-y-4">
|
|
<div
|
|
v-for="(cutting, index) in cuttings"
|
|
:key="cutting.id"
|
|
class="overflow-hidden rounded-md border"
|
|
>
|
|
<div
|
|
class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<div class="flex min-w-0 items-start gap-3">
|
|
<span
|
|
class="w-8 shrink-0 pt-0.5 text-center text-sm text-muted-foreground tabular-nums"
|
|
>
|
|
{{ rowNumber(index) }}
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h3 class="leading-tight font-medium">
|
|
Cutting #{{ cutting.id }}
|
|
</h3>
|
|
<Badge
|
|
:variant="
|
|
cuttingStatusBadgeVariant(
|
|
cutting.status,
|
|
)
|
|
"
|
|
>
|
|
{{ cutting.status_label }}
|
|
</Badge>
|
|
</div>
|
|
<div
|
|
class="space-y-1 text-sm text-muted-foreground"
|
|
>
|
|
<p>{{ cutting.created_at_formatted }}</p>
|
|
<p>
|
|
Oleh
|
|
{{
|
|
cutting.created_by?.profile
|
|
?.full_name ??
|
|
cutting.created_by?.username
|
|
}}
|
|
</p>
|
|
</div>
|
|
<p
|
|
v-if="cutting.description"
|
|
class="text-sm text-muted-foreground"
|
|
>
|
|
{{ cutting.description }}
|
|
</p>
|
|
<div
|
|
v-if="
|
|
cutting.images && cutting.images.length > 0
|
|
"
|
|
class="flex flex-wrap gap-2 pt-1"
|
|
>
|
|
<MediaThumbnailCell
|
|
:items="cutting.images"
|
|
:max-visible="10"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
|
|
<span
|
|
>Total Hasil Cutting
|
|
<strong class="text-primary"
|
|
>{{
|
|
cutting.total_result_pieces ?? 0
|
|
}}
|
|
pcs</strong
|
|
></span
|
|
>
|
|
<span
|
|
v-if="
|
|
cutting.total_material_usage_summary_formatted
|
|
"
|
|
>Total Pemakaian Bahan
|
|
<strong class="text-primary">{{
|
|
cutting.total_material_usage_summary_formatted
|
|
}}</strong></span
|
|
>
|
|
<span
|
|
>Biaya Bahan
|
|
<strong class="text-primary">{{
|
|
cutting.total_material_cost_formatted ??
|
|
'Rp 0'
|
|
}}</strong></span
|
|
>
|
|
<span
|
|
>Biaya per Produk
|
|
<strong class="text-primary">{{
|
|
cutting.material_cost_per_product_formatted ??
|
|
'Rp 0'
|
|
}}</strong></span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5"
|
|
>
|
|
<DataTableActions :cutting="cutting" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 p-4">
|
|
<div class="space-y-2">
|
|
<h4
|
|
class="text-sm font-semibold tracking-tight text-foreground"
|
|
>
|
|
Bahan Baku
|
|
</h4>
|
|
<div class="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Varian</TableHead>
|
|
<TableHead>Foto</TableHead>
|
|
<TableHead>Pemakaian</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow
|
|
v-if="!cutting.materials.length"
|
|
:key="`${cutting.id}-material-empty`"
|
|
>
|
|
<TableCell
|
|
colspan="3"
|
|
class="text-muted-foreground"
|
|
>
|
|
Belum ada bahan baku
|
|
</TableCell>
|
|
</TableRow>
|
|
<template
|
|
v-else
|
|
v-for="group in getGroupedMaterials(
|
|
cutting.materials,
|
|
)"
|
|
:key="group.rawMaterialId"
|
|
>
|
|
<TableRow
|
|
class="bg-muted/20 hover:bg-muted/20"
|
|
>
|
|
<TableCell
|
|
colspan="3"
|
|
class="font-semibold text-foreground"
|
|
>
|
|
{{ group.rawMaterialName }}
|
|
<Badge
|
|
v-if="group.unitLabel"
|
|
variant="secondary"
|
|
class="ml-2 font-normal"
|
|
>
|
|
{{ group.unitLabel }}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow
|
|
v-for="material in group.items"
|
|
:key="material.id"
|
|
>
|
|
<TableCell class="pl-6 font-medium">
|
|
{{ material.variant }}
|
|
</TableCell>
|
|
<TableCell>
|
|
<MediaThumbnailCell
|
|
:items="
|
|
material.images ?? []
|
|
"
|
|
:max-visible="1"
|
|
/>
|
|
</TableCell>
|
|
<TableCell class="tabular-nums">
|
|
{{
|
|
material.material_usage_formatted
|
|
}}
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h4
|
|
class="text-sm font-semibold tracking-tight text-foreground"
|
|
>
|
|
Hasil Produk
|
|
</h4>
|
|
<div class="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Varian</TableHead>
|
|
<TableHead>Foto</TableHead>
|
|
<TableHead>Hasil</TableHead>
|
|
<TableHead>Sample</TableHead>
|
|
<TableHead>Diluar Sample</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow
|
|
v-if="!cutting.results.length"
|
|
:key="`${cutting.id}-result-empty`"
|
|
>
|
|
<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="5"
|
|
class="font-semibold text-foreground"
|
|
>
|
|
{{ group.productName }}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow
|
|
v-for="result in group.items"
|
|
:key="result.id"
|
|
>
|
|
<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>
|
|
<TableCell class="tabular-nums">
|
|
{{ result.sample }} pcs
|
|
</TableCell>
|
|
<TableCell class="tabular-nums">
|
|
{{
|
|
result.original_outside_sample
|
|
}}
|
|
pcs
|
|
</TableCell>
|
|
</TableRow>
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTableEmpty
|
|
v-else
|
|
description="Silakan lakukan pencarian untuk menemukan data yang Anda cari."
|
|
/>
|
|
|
|
<GroupedTableFooter
|
|
:summary="paginationSummary"
|
|
:pagination="pagination"
|
|
:pagination-links="paginationLinks"
|
|
/>
|
|
</div>
|
|
</template>
|