store/resources/js/components/raw-materials/RawMaterialGroupedTable.vue

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { computed } from 'vue';
import DataTableActions from '@/components/raw-materials/data-table-actions.vue';
import RawMaterialStatusToggle from '@/components/raw-materials/raw-material-status-toggle.vue';
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { groupRawMaterialRows } from '@/lib/raw-materials';
import type {
    DataTableFilterDef,
    DataTablePagination,
    DataTablePaginationLink,
} from '@/types/data-table';
import type { RawMaterialTableRow } from '@/types/raw-material';

const props = defineProps<{
    rows: RawMaterialTableRow[];
    pagination?: DataTablePagination;
    paginationLinks?: DataTablePaginationLink[];
    paginationDisplayedCount?: number;
    filterDefs?: DataTableFilterDef[];
    filterValues?: Record<string, string>;
}>();

const search = defineModel<string>('search', { default: '' });

const emit = defineEmits<{
    'filter-change': [key: string, value: string];
    'filters-reset': [];
}>();

const materialGroups = computed(() => groupRawMaterialRows(props.rows));

const showingCount = computed(() => props.paginationDisplayedCount ?? materialGroups.value.length);

const paginationSummary = computed(() => {
    if (!props.pagination) {
        return null;
    }

    const { total } = props.pagination;

    if (total === 0) {
        return 'Menampilkan 0 bahan baku';
    }

    return `Menampilkan ${showingCount.value} bahan baku dari ${total}`;
});

function groupHeaderRow(group: ReturnType<typeof groupRawMaterialRows>[number]): RawMaterialTableRow {
    return group.variants[0];
}
</script>

<template>
    <div class="space-y-4">
        <DataTableToolbar
            v-model:search="search"
            :filter-defs="filterDefs"
            :filter-values="filterValues"
            @filter-change="(key, value) => emit('filter-change', key, value)"
            @filters-reset="emit('filters-reset')"
        />

        <div v-if="materialGroups.length" class="space-y-4">
            <div
                v-for="group in materialGroups"
                :key="group.raw_material_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="text-muted-foreground w-8 shrink-0 pt-0.5 text-center text-sm tabular-nums">
                            {{ group.raw_material_row_number }}
                        </span>
                        <div class="min-w-0 space-y-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <h3 class="font-medium leading-tight">
                                    {{ group.raw_material_name }}
                                </h3>
                                <Badge variant="secondary">
                                    {{ group.unit_label }}
                                </Badge>
                            </div>
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
                        <RawMaterialStatusToggle :row="groupHeaderRow(group)" />
                        <DataTableActions :row="groupHeaderRow(group)" />
                    </div>
                </div>

                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Varian</TableHead>
                            <TableHead>Stok</TableHead>
                            <TableHead>Harga</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow
                            v-for="variant in group.variants"
                            :key="variant.row_id"
                        >
                            <TableCell class="font-medium">
                                {{ variant.variant ?? '-' }}
                            </TableCell>
                            <TableCell class="tabular-nums">
                                {{ variant.stock_formatted ?? '-' }}
                            </TableCell>
                            <TableCell class="tabular-nums">
                                {{ variant.price_formatted ?? '-' }}
                            </TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </div>
        </div>

        <div
            v-else
            class="rounded-md border px-6 py-10"
        >
            <Empty>
                <EmptyHeader>
                    <EmptyTitle>Data tidak ditemukan</EmptyTitle>
                    <EmptyDescription>
                        Silakan lakukan pencarian atau filter untuk menemukan data yang Anda cari.
                    </EmptyDescription>
                </EmptyHeader>
            </Empty>
        </div>

        <div
            v-if="pagination"
            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
        >
            <p class="text-muted-foreground text-sm">
                {{ paginationSummary }}
            </p>

            <div
                v-if="paginationLinks?.length && pagination.lastPage > 1"
                class="flex flex-wrap items-center justify-center gap-1 sm:justify-end"
            >
                <Button
                    v-for="link in paginationLinks"
                    :key="`${link.label}-${link.url}`"
                    variant="outline"
                    size="sm"
                    :disabled="!link.url || link.active"
                    as-child
                >
                    <Link v-if="link.url" :href="link.url" preserve-scroll>
                        <span v-html="link.label" />
                    </Link>
                    <span v-else v-html="link.label" />
                </Button>
            </div>
        </div>
    </div>
</template>