feat/tidy-up:

- mengurangi elm yg tidak diperlukan
- menyesuaikan font-size sesuai breakpoint

app/components/content/tools/list.vue

@@ -131,52 +131,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="p-4">
-    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <div class="rounded-md border p-4">
-      <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
-    <Dialog
-      v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? title : 'Tambah Peralatan'"
-      size="lg"
-      prevent-outside
-    >
-      <AppToolsEntryForm
-        :schema="DeviceSchema"
-        :values="recItem"
-        :uoms="uoms"
-        :is-loading="isProcessing"
-        :is-readonly="isReadonly"
-        @submit="
-          (values: DeviceFormData, resetForm: any) => {
-            if (recId > 0) {
-              handleActionEdit(recId, values, getToolsList, resetForm, toast)
-              return
-            }
-            handleActionSave(values, getToolsList, resetForm, toast)
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Peralatan'"
+    size="lg"
+    prevent-outside
+  >
+    <AppToolsEntryForm
+      :schema="DeviceSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DeviceFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getToolsList, resetForm, toast)
+            return
           }
-        "
-        @cancel="handleCancelForm"
-      />
-    </Dialog>
+          handleActionSave(values, getToolsList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
 
-    <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="() => handleActionRemove(recId, getToolsList, toast)"
-      @cancel=""
-    >
-      <template #default="{ record }">
-        <div class="text-sm">
-          <p><strong>ID:</strong> {{ record?.id }}</p>
-          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
-          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
-        </div>
-      </template>
-    </RecordConfirmation>
-  </div>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>