feat: improving stok-opname form component interactions

resources/js/pages/admin/manage/stok-opnames/Create.vue

@@ -56,9 +56,6 @@ function submitForVerification() {
         <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">Stok Opname</h2>
-                <p class="text-muted-foreground text-sm">
-                    Hitung stok fisik gudang dan bandingkan dengan stok sistem
-                </p>
             </div>
 
             <div class="flex items-center gap-3">

resources/js/pages/admin/manage/stok-opnames/form/StokOpnameInfoSection.vue

@@ -18,18 +18,14 @@ const notes = defineModel<string>('notes', { required: true });
             <CardTitle>Informasi Dasar</CardTitle>
         </CardHeader>
         <CardContent class="space-y-4">
-            <div class="grid gap-4 sm:grid-cols-2">
-                <div class="space-y-2">
-                    <Label for="opname_date">Tanggal Opname</Label>
-                    <DatePicker
-                        id="opname_date"
-                        v-model="opnameDate"
-                        placeholder="Pilih tanggal opname"
-                    />
-                </div>
-            </div>
-
             <div class="space-y-2">
+                <Label for="opname_date">Tanggal Opname</Label>
+                <DatePicker
+                    id="opname_date"
+                    v-model="opnameDate"
+                    placeholder="Pilih tanggal opname"
+                />
+
                 <Label for="notes">Catatan</Label>
                 <Textarea
                     id="notes"
@@ -39,7 +35,10 @@ const notes = defineModel<string>('notes', { required: true });
                 />
             </div>
 
-            <div v-if="verificationNotes" class="rounded-lg border bg-muted/50 p-4">
+            <div
+                v-if="verificationNotes"
+                class="rounded-lg border bg-muted/50 p-4"
+            >
                 <Label class="text-sm font-medium">Catatan Verifikasi</Label>
                 <p class="mt-1 text-sm">{{ verificationNotes }}</p>
             </div>

resources/js/pages/admin/manage/stok-opnames/form/StokOpnameProductTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NumberInput } from '@/components/form/number-input';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { groupedTableRowNumber } from '@/lib/grouped-table';
@@ -56,19 +57,20 @@ const emit = defineEmits<{
                                 class="border-b transition-colors last:border-b-0 hover:bg-muted/30"
                             >
                                 <td class="text-muted-foreground p-3 text-center">
-                                    {{ groupedTableRowNumber(group.startIndex, rIdx) }}
+                                    {{ groupedTableRowNumber(group.startIndex + 1, rIdx) }}
                                 </td>
                                 <td class="p-3">{{ row.variant_name }}</td>
                                 <td class="p-3 text-right tabular-nums">
                                     {{ row.system_stock_formatted ?? row.system_stock }}
                                 </td>
                                 <td class="p-3 text-right">
-                                    <Input
+                                    <NumberInput
-                                        v-model.number="row.physical_stock"
+                                        :model-value="row.physical_stock"
-                                        type="number"
-                                        min="0"
                                         class="ml-auto w-24 text-right tabular-nums"
-                                        @input="emit('row-change')"
+                                        @update:model-value="val => {
+                                            row.physical_stock = val === '' ? 0 : Number(val);
+                                            emit('row-change');
+                                        }"
                                     />
                                 </td>
                                 <td class="p-3 text-right tabular-nums">