✨ feat (employee): add based component & conditional form input

app/components/flow/employee/entry.vue

@@ -5,7 +5,7 @@ const data = ref({
   name: '',
   password: '',
   status: '',
-  type: '',
+  type: 'doctor',
 })
 
 function onClick(type: string) {
@@ -17,16 +17,33 @@ function onClick(type: string) {
     // do something
   }
 }
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
 </script>
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
     <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Dokter
-  </div>
-  <div>
-    <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+    <span class="font-semibold">Tambah</span> Karyawan
   </div>
+
+  <AppEmployeeEntryForm v-model="data" :items="items" />
+
+  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
+  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
+  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
+  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
+
   <AppUserEntryForm v-model="data" />
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />

app/components/flow/employee/list.vue

@@ -56,10 +56,8 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
   </div>
 </template>