dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: standardize code formatting and update catalog section descriptions in master inventory pages

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-13 12:03:52 +07:00
parent d1db1a304b
commit f604014075
2 changed files with 83 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
resources/js/pages/admin/master/products/Index.vue
View File

@ -1,16 +1,23 @@
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import MasterOutOfStockCatalogSection from '@/components/admin/master/MasterOutOfStockCatalogSection.vue';
import ProductGroupedTable from '@/components/admin/master/products/ProductGroupedTable.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 {
useDataTableQuery,
useDataTableQuerySync,
} from '@/composables/useDataTableQuery';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type { DataTableFilterDef } from '@/types/data-table';
import type { PaginatedProducts, ProductOutOfStockGroup, ProductStockWarningGroup } from '@/types/product';
import type {
PaginatedProducts,
ProductOutOfStockGroup,
ProductStockWarningGroup,
} from '@/types/product';
import { Head, Link } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
const props = defineProps<{
products: PaginatedProducts;
@ -27,11 +34,12 @@ const props = defineProps<{
const { can } = useCan();
const search = ref(props.filters.search ?? '');
const { query, setSearch, setFilter, resetFilters, syncFromServer } = useDataTableQuery({
url: '/admin/master/products',
initial: { ...props.filters },
filterKeys: ['is_active'],
});
const { query, setSearch, setFilter, resetFilters, syncFromServer } =
useDataTableQuery({
url: '/admin/master/products',
initial: { ...props.filters },
filterKeys: ['is_active'],
});
useDataTableQuerySync(() => props.filters, syncFromServer);
@ -58,11 +66,11 @@ const tablePagination = computed(() => ({
total: props.products.total,
}));
const firstItem = computed(() => (
const firstItem = computed(() =>
props.products.data.length > 0
? (props.products.current_page - 1) * props.products.per_page + 1
: 0
));
: 0,
);
watch(search, (value) => {
setSearch(value);
@ -77,18 +85,21 @@ watch(
</script>
<template>
<Head title="Produk" />
<AdminLayout>
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div
class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
>
<div class="space-y-1">
<h2 class="text-2xl font-bold tracking-tight">
Produk
</h2>
<h2 class="text-2xl font-bold tracking-tight">Produk</h2>
</div>
<Button v-if="can('products.create')" as-child class="shrink-0 self-start sm:self-center">
<Button
v-if="can('products.create')"
as-child
class="shrink-0 self-start sm:self-center"
>
<Link href="/admin/master/products/create">
<Plus class="size-4" />
Tambah
@ -99,7 +110,7 @@ watch(
<MasterOutOfStockCatalogSection
severity="warning"
title="Produk Stok Menipis"
description="Hanya produk aktif · stok masih ada, tapi di bawah batas minimum · klik kartu atau varian untuk edit"
description="Hanya produk aktif · stok masih ada, tapi di bawah batas minimum · Klik kartu untuk melihat data."
empty-title="Tidak ada peringatan stok"
empty-description="Semua varian masih berada di atas batas stok minimum."
:groups="stockWarningGroups"
@ -107,15 +118,23 @@ watch(
<MasterOutOfStockCatalogSection
title="Produk Stok Habis"
description="Hanya produk aktif · klik kartu atau varian untuk edit"
description="Hanya produk aktif · Klik kartu untuk melihat data."
:groups="outOfStockGroups"
/>
<Card class="min-w-0">
<CardContent class="min-w-0">
<ProductGroupedTable v-model:search="search" :products="products.data" :first-item="firstItem"
:pagination="tablePagination" :pagination-links="products.links" :filter-defs="filterDefs"
:filter-values="filterValues" @filter-change="setFilter" @filters-reset="resetFilters" />
<ProductGroupedTable
v-model:search="search"
:products="products.data"
:first-item="firstItem"
:pagination="tablePagination"
:pagination-links="products.links"
:filter-defs="filterDefs"
:filter-values="filterValues"
@filter-change="setFilter"
@filters-reset="resetFilters"
/>
</CardContent>
</Card>
</AdminLayout>

64
resources/js/pages/admin/master/raw-materials/Index.vue
View File

@ -1,17 +1,20 @@
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
import MasterOutOfStockCatalogSection from '@/components/admin/master/MasterOutOfStockCatalogSection.vue';
import RawMaterialGroupedTable from '@/components/admin/master/raw-materials/RawMaterialGroupedTable.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 {
useDataTableQuery,
useDataTableQuerySync,
} from '@/composables/useDataTableQuery';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type { DataTableFilterDef } from '@/types/data-table';
import type { MasterOutOfStockGroup } from '@/types/master-inventory';
import type { PaginatedRawMaterials } from '@/types/raw-material';
import { Head, Link } from '@inertiajs/vue3';
import { Plus } from '@lucide/vue';
import { computed, ref, watch } from 'vue';
const props = defineProps<{
rawMaterials: PaginatedRawMaterials;
@ -28,11 +31,12 @@ const props = defineProps<{
const { can } = useCan();
const search = ref(props.filters.search ?? '');
const { query, setSearch, setFilter, resetFilters, syncFromServer } = useDataTableQuery({
url: '/admin/master/raw-materials',
initial: { ...props.filters },
filterKeys: ['is_active'],
});
const { query, setSearch, setFilter, resetFilters, syncFromServer } =
useDataTableQuery({
url: '/admin/master/raw-materials',
initial: { ...props.filters },
filterKeys: ['is_active'],
});
useDataTableQuerySync(() => props.filters, syncFromServer);
@ -59,11 +63,12 @@ const tablePagination = computed(() => ({
total: props.rawMaterials.total,
}));
const firstItem = computed(() => (
const firstItem = computed(() =>
props.rawMaterials.data.length > 0
? (props.rawMaterials.current_page - 1) * props.rawMaterials.per_page + 1
: 0
));
? (props.rawMaterials.current_page - 1) * props.rawMaterials.per_page +
1
: 0,
);
watch(search, (value) => {
setSearch(value);
@ -78,18 +83,21 @@ watch(
</script>
<template>
<Head title="Bahan Baku" />
<AdminLayout>
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div
class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
>
<div class="space-y-1">
<h2 class="text-2xl font-bold tracking-tight">
Bahan Baku
</h2>
<h2 class="text-2xl font-bold tracking-tight">Bahan Baku</h2>
</div>
<Button v-if="can('raw-materials.create')" as-child class="shrink-0 self-start sm:self-center">
<Button
v-if="can('raw-materials.create')"
as-child
class="shrink-0 self-start sm:self-center"
>
<Link href="/admin/master/raw-materials/create">
<Plus class="size-4" />
Tambah
@ -100,7 +108,7 @@ watch(
<MasterOutOfStockCatalogSection
severity="warning"
title="Bahan Baku Stok Menipis"
description="Stok masih ada, tapi di bawah batas minimum satuan · klik kartu atau varian untuk edit"
description="Stok masih ada, tapi di bawah batas minimum satuan · Klik kartu untuk melihat data."
empty-title="Tidak ada peringatan stok"
empty-description="Semua varian masih berada di atas batas stok minimum."
:groups="stockWarningGroups"
@ -108,15 +116,23 @@ watch(
<MasterOutOfStockCatalogSection
title="Bahan Baku Stok Habis"
description="Klik kartu atau varian untuk membuka halaman edit"
description="Klik kartu untuk melihat data."
:groups="outOfStockGroups"
/>
<Card class="min-w-0">
<CardContent class="min-w-0">
<RawMaterialGroupedTable v-model:search="search" :materials="rawMaterials.data" :first-item="firstItem"
:pagination="tablePagination" :pagination-links="rawMaterials.links" :filter-defs="filterDefs"
:filter-values="filterValues" @filter-change="setFilter" @filters-reset="resetFilters" />
<RawMaterialGroupedTable
v-model:search="search"
:materials="rawMaterials.data"
:first-item="firstItem"
:pagination="tablePagination"
:pagination-links="rawMaterials.links"
:filter-defs="filterDefs"
:filter-values="filterValues"
@filter-change="setFilter"
@filters-reset="resetFilters"
/>
</CardContent>
</Card>
</AdminLayout>