From f6040140752d8129009f3552ef663f68c3dad2ee Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 13 Jun 2026 12:03:52 +0700
Subject: [PATCH] refactor: standardize code formatting and update catalog
 section descriptions in master inventory pages

---
 .../js/pages/admin/master/products/Index.vue  | 67 ++++++++++++-------
 .../admin/master/raw-materials/Index.vue      | 64 +++++++++++-------
 2 files changed, 83 insertions(+), 48 deletions(-)
diff --git a/resources/js/pages/admin/master/products/Index.vue b/resources/js/pages/admin/master/products/Index.vue
index a0d0ebf..b67379f 100644
--- a/resources/js/pages/admin/master/products/Index.vue
+++ b/resources/js/pages/admin/master/products/Index.vue
@@ -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>
diff --git a/resources/js/pages/admin/master/raw-materials/Index.vue b/resources/js/pages/admin/master/raw-materials/Index.vue
index 804b2dc..fd4ed99 100644
--- a/resources/js/pages/admin/master/raw-materials/Index.vue
+++ b/resources/js/pages/admin/master/raw-materials/Index.vue
@@ -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>
