From 7c452c923a6f75bb77ab86e6e2acde06856594ce Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 24 Sep 2025 11:58:01 +0700
Subject: [PATCH] chore: refactor entry for equipment and tools

---
 app/components/app/equipment/entry-form.vue | 115 +++++++++-----------
 app/components/app/tools/entry-form.vue     |  89 +++++++--------
 2 files changed, 92 insertions(+), 112 deletions(-)

diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index d3ee0569..2485022a 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -56,76 +56,65 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-equipment" class="grid gap-2">
-    <div class="grid gap-2">
-      <label for="code">Kode</label>
-      <Input
-        id="code"
-        v-model="code"
-        v-bind="codeAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.code }"
-      />
-      <span v-if="errors.code" class="text-sm text-red-500">
-        {{ errors.code }}
-      </span>
-    </div>
-    <div class="grid gap-2">
-      <label for="name">Nama</label>
-      <Input
-        id="name"
-        v-model="name"
-        v-bind="nameAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.name }"
-      />
-      <span v-if="errors.name" class="text-sm text-red-500">
-        {{ errors.name }}
-      </span>
-    </div>
-    <div class="grid gap-2">
-      <label for="uom">Satuan</label>
-      <Select
-        id="uom"
-        v-model="uom"
-        icon-name="i-lucide-chevron-down"
-        placeholder="Pilih satuan"
-        v-bind="uomAttrs"
-        :items="uoms"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.uom_code }"
-      />
-      <span v-if="errors.uom_code" class="text-sm text-red-500">
-        {{ errors.uom_code }}
-      </span>
-    </div>
-    <div class="grid gap-2">
-      <label for="stock">Stok</label>
-      <Input
-        id="stock"
-        v-model="stock"
-        type="number"
-        v-bind="stockAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.stock }"
-      />
-      <span v-if="errors.stock" class="text-sm text-red-500">
-        {{ errors.stock }}
-      </span>
-    </div>
+  <form id="form-equipment">
+    <Block labelSize="thin" class="!mb-2.5 xl:!mb-3 !pt-0" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            v-model="stock"
+            type="number"
+            v-bind="stockAttrs"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+    </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
         type="button"
         class="w-[120px]"
         :disabled="isLoading"
-        @click="
-          () => {
-            handleSubmit(onSubmitForm)()
-          }
-        "
+        @click="handleSubmit(onSubmitForm)"
       >
-        <!-- <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" /> -->
         Simpan
       </Button>
     </div>
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index b8e3fe89..6612cc78 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -55,62 +55,53 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-tools" class="grid gap-2">
-    <div class="grid gap-2">
-      <label for="code">Kode</label>
-      <Input
-        id="code"
-        v-model="code"
-        v-bind="codeAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.code }"
-      />
-      <span v-if="errors.code" class="text-sm text-red-500">
-        {{ errors.code }}
-      </span>
-    </div>
-    <div class="grid gap-2">
-      <label for="name">Nama</label>
-      <Input
-        id="name"
-        v-model="name"
-        v-bind="nameAttrs"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.name }"
-      />
-      <span v-if="errors.name" class="text-sm text-red-500">
-        {{ errors.name }}
-      </span>
-    </div>
-    <div class="grid gap-2">
-      <label for="uom">Satuan</label>
-      <Select
-        id="uom"
-        icon-name="i-lucide-chevron-down"
-        placeholder="Pilih satuan"
-        v-model="uom"
-        v-bind="uomAttrs"
-        :items="uoms"
-        :disabled="isLoading"
-        :class="{ 'border-red-500': errors.uom_code }"
-      />
-      <span v-if="errors.uom_code" class="text-sm text-red-500">
-        {{ errors.uom_code }}
-      </span>
-    </div>
+  <form id="form-tools">
+    <Block labelSize="thin" class="!mb-2.5 xl:!mb-3 !pt-0" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Satuan</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-model="uom"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading"
+          />
+        </Field>
+      </Cell>
+    </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
         type="button"
         class="w-[120px]"
         :disabled="isLoading"
-        @click="
-          () => {
-            handleSubmit(onSubmitForm)()
-          }
-        "
+        @click="handleSubmit(onSubmitForm)"
       >
-        <!-- <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" /> -->
         Simpan
       </Button>
     </div>