From cdebdb8995525fd91a8e564ccc9692ae866a5314 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:50:15 +0700
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8=20feat=20(item):=20add=20item=20a?=
 =?UTF-8?q?nd=20item=20price=20modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/app/item-price/entry-form.vue  | 50 +++++++++++++
 app/components/app/item-price/list-cfg.ts     | 46 ++++++++++++
 app/components/app/item-price/list.vue        | 19 +++++
 app/components/app/item-price/picker.vue      |  0
 app/components/app/item-price/search.vue      |  0
 .../app/item-price/status-badge.vue           | 29 ++++++++
 app/components/app/item/entry-form.vue        | 68 ++++++++++++++++++
 app/components/app/item/list-cfg.ts           | 46 ++++++++++++
 app/components/app/item/list.vue              | 19 +++++
 app/components/app/item/picker.vue            |  0
 app/components/app/item/search.vue            |  0
 app/components/app/item/status-badge.vue      | 29 ++++++++
 app/components/flow/item-price/list.vue       | 71 +++++++++++++++++++
 app/components/flow/item/list.vue             | 71 +++++++++++++++++++
 app/components/flow/medicine-group/list.vue   |  5 ++
 app/models/item-price.ts                      | 39 ++++++++++
 app/models/item.ts                            | 48 +++++++++++++
 app/pages/_dev/index.vue                      |  2 +-
 18 files changed, 541 insertions(+), 1 deletion(-)
 create mode 100644 app/components/app/item-price/entry-form.vue
 create mode 100644 app/components/app/item-price/list-cfg.ts
 create mode 100644 app/components/app/item-price/list.vue
 create mode 100644 app/components/app/item-price/picker.vue
 create mode 100644 app/components/app/item-price/search.vue
 create mode 100644 app/components/app/item-price/status-badge.vue
 create mode 100644 app/components/app/item/entry-form.vue
 create mode 100644 app/components/app/item/list-cfg.ts
 create mode 100644 app/components/app/item/list.vue
 create mode 100644 app/components/app/item/picker.vue
 create mode 100644 app/components/app/item/search.vue
 create mode 100644 app/components/app/item/status-badge.vue
 create mode 100644 app/components/flow/item-price/list.vue
 create mode 100644 app/components/flow/item/list.vue
 create mode 100644 app/models/item-price.ts
 create mode 100644 app/models/item.ts

diff --git a/app/components/app/item-price/entry-form.vue b/app/components/app/item-price/entry-form.vue
new file mode 100644
index 00000000..e0c97dc8
--- /dev/null
+++ b/app/components/app/item-price/entry-form.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>Items</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Perusahaan Insuransi</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item-price/list-cfg.ts b/app/components/app/item-price/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/item-price/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/item-price/list.vue b/app/components/app/item-price/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/item-price/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/item-price/picker.vue b/app/components/app/item-price/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/search.vue b/app/components/app/item-price/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item-price/status-badge.vue b/app/components/app/item-price/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item-price/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/app/item/entry-form.vue b/app/components/app/item/entry-form.vue
new file mode 100644
index 00000000..8f6d3abf
--- /dev/null
+++ b/app/components/app/item/entry-form.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup>
+            <Label>Nama</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Kode</Label>
+            <Field>
+              <Input v-model="data.code" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Item Group</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>UOM</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Infra</Label>
+            <Field>
+              <Select :items="items" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup>
+            <Label>Harga</Label>
+            <Field>
+              <Input v-model="data.price" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/app/components/app/item/list-cfg.ts b/app/components/app/item/list-cfg.ts
new file mode 100644
index 00000000..e2c72f9c
--- /dev/null
+++ b/app/components/app/item/list-cfg.ts
@@ -0,0 +1,46 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+const _doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [{}, {}, { width: 50 }]
+
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/item/list.vue b/app/components/app/item/list.vue
new file mode 100644
index 00000000..5b8778d9
--- /dev/null
+++ b/app/components/app/item/list.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>
diff --git a/app/components/app/item/picker.vue b/app/components/app/item/picker.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/search.vue b/app/components/app/item/search.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/components/app/item/status-badge.vue b/app/components/app/item/status-badge.vue
new file mode 100644
index 00000000..32cdfbca
--- /dev/null
+++ b/app/components/app/item/status-badge.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+const statusText = computed(() => {
+  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
+})
+
+const badgeVariant = computed(() => {
+  return props.rec.status_code === 1 ? 'default' : 'destructive'
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant">
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
diff --git a/app/components/flow/item-price/list.vue b/app/components/flow/item-price/list.vue
new file mode 100644
index 00000000..9a5f567b
--- /dev/null
+++ b/app/components/flow/item-price/list.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Modal from '~/components/pub/base/modal/modal.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Golongan Obat',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppMedicineGroupList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <AppMedicineGroupEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/flow/item/list.vue b/app/components/flow/item/list.vue
new file mode 100644
index 00000000..41c7311f
--- /dev/null
+++ b/app/components/flow/item/list.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Modal from '~/components/pub/base/modal/modal.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Item',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppItemList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
+    <AppItemEntryForm v-model="entry" />
+  </Modal>
+</template>
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/flow/medicine-group/list.vue
index 9a5f567b..0885b57f 100644
--- a/app/components/flow/medicine-group/list.vue
+++ b/app/components/flow/medicine-group/list.vue
@@ -2,10 +2,14 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import Modal from '~/components/pub/base/modal/modal.vue'
+import Pagination from '~/components/pub/base/pagination/pagination.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
 const entry = ref<any>({})
+const page = ref(1)
+const rowsPerPage = ref(10)
+const totalPages = 20
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -63,6 +67,7 @@ provide('table_data_loader', isLoading)
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
     <AppMedicineGroupList :data="data" />
+    <Pagination v-model:page="page" v-model:rows-per-page="rowsPerPage" :total-pages="totalPages" />
   </div>
 
   <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
diff --git a/app/models/item-price.ts b/app/models/item-price.ts
new file mode 100644
index 00000000..fb474109
--- /dev/null
+++ b/app/models/item-price.ts
@@ -0,0 +1,39 @@
+export interface ItemPrice {
+  id: string
+  item_id: number
+  price: number
+  insuranceCompany_code: string
+}
+
+export interface CreateDto {
+  item_id: number
+  price: number
+  insuranceCompany_code: string
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): CreateDto {
+  return {
+    item_id: 1,
+    price: 1,
+    insuranceCompany_code: 'test',
+  }
+}
diff --git a/app/models/item.ts b/app/models/item.ts
new file mode 100644
index 00000000..851ff11d
--- /dev/null
+++ b/app/models/item.ts
@@ -0,0 +1,48 @@
+export interface Item {
+  id: string
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+export interface CreateDto {
+  name: string
+  code: string
+  itemGroup_code: string
+  uom_code: string
+  infra_id: number
+  stock: number
+}
+
+export interface GetListDto {
+  page: number
+  size: number
+  name?: string
+  code?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genMedicine(): CreateDto {
+  return {
+    name: 'test',
+    code: 'test',
+    itemGroup_code: 'test',
+    uom_code: 'test',
+    infra_id: 1,
+    stock: 1,
+  }
+}
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index 3f67f9f8..90928bc6 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -49,7 +49,7 @@ const navMenu = ref({
     {
       title: 'Test Medicine List',
       icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/medicine-method/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/flow/item/list.vue')),
     },
   ],
 })

From 263f9dbc7f47a9a03859fa3e6a4e0018c9a6b11b Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:58:18 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20refactor=20(components?=
 =?UTF-8?q?):=20rename=20flow=20components=20to=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/{flow => content}/auth/login.vue                 | 0
 app/components/{flow => content}/dashboard/index.vue            | 0
 app/components/{flow => content}/item-price/list.vue            | 0
 app/components/{flow => content}/item/list.vue                  | 0
 app/components/{flow => content}/medicine-group/list.vue        | 1 -
 app/components/{flow => content}/medicine-method/list.vue       | 0
 app/components/{flow => content}/medicine/entry.vue             | 0
 app/components/{flow => content}/medicine/list.vue              | 0
 app/components/{flow => content}/patient/add.vue                | 0
 app/components/{flow => content}/patient/list.vue               | 0
 app/components/{flow => content}/rehab/registration/home.vue    | 0
 .../{flow => content}/rehab/registration/sep-prosedur/add.vue   | 0
 .../{flow => content}/rehab/registration/sep-prosedur/list.vue  | 0
 app/components/{flow => content}/satusehat/const.ts             | 0
 app/components/{flow => content}/satusehat/list.vue             | 0
 app/components/{flow => content}/satusehat/schema.query.ts      | 0
 app/components/{flow => content}/user/entry.vue                 | 0
 app/components/{flow => content}/user/list.vue                  | 0
 app/pages/(features)/doctor/add.vue                             | 2 +-
 app/pages/(features)/doctor/index.vue                           | 2 +-
 app/pages/(features)/human-src/user/add.vue                     | 2 +-
 app/pages/(features)/human-src/user/index.vue                   | 2 +-
 app/pages/(features)/patient/add.vue                            | 2 +-
 app/pages/(features)/patient/index.vue                          | 2 +-
 .../(features)/rehab/registration-queue/sep-prosedur/add.vue    | 2 +-
 app/pages/(features)/satusehat/add.vue                          | 2 +-
 app/pages/(features)/satusehat/index.vue                        | 2 +-
 .../(features)/tools-equipment-src/medicine-method/index.vue    | 2 +-
 .../(features)/tools-equipment-src/medicine-type/index.vue      | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/add.vue       | 2 +-
 app/pages/(features)/tools-equipment-src/medicine/index.vue     | 2 +-
 app/pages/_dev/index.vue                                        | 2 +-
 app/pages/auth/login.vue                                        | 2 +-
 app/pages/index.vue                                             | 2 +-
 35 files changed, 17 insertions(+), 18 deletions(-)
 rename app/components/{flow => content}/auth/login.vue (100%)
 rename app/components/{flow => content}/dashboard/index.vue (100%)
 rename app/components/{flow => content}/item-price/list.vue (100%)
 rename app/components/{flow => content}/item/list.vue (100%)
 rename app/components/{flow => content}/medicine-group/list.vue (96%)
 rename app/components/{flow => content}/medicine-method/list.vue (100%)
 rename app/components/{flow => content}/medicine/entry.vue (100%)
 rename app/components/{flow => content}/medicine/list.vue (100%)
 rename app/components/{flow => content}/patient/add.vue (100%)
 rename app/components/{flow => content}/patient/list.vue (100%)
 rename app/components/{flow => content}/rehab/registration/home.vue (100%)
 rename app/components/{flow => content}/rehab/registration/sep-prosedur/add.vue (100%)
 rename app/components/{flow => content}/rehab/registration/sep-prosedur/list.vue (100%)
 rename app/components/{flow => content}/satusehat/const.ts (100%)
 rename app/components/{flow => content}/satusehat/list.vue (100%)
 rename app/components/{flow => content}/satusehat/schema.query.ts (100%)
 rename app/components/{flow => content}/user/entry.vue (100%)
 rename app/components/{flow => content}/user/list.vue (100%)

diff --git a/app/components/flow/auth/login.vue b/app/components/content/auth/login.vue
similarity index 100%
rename from app/components/flow/auth/login.vue
rename to app/components/content/auth/login.vue
diff --git a/app/components/flow/dashboard/index.vue b/app/components/content/dashboard/index.vue
similarity index 100%
rename from app/components/flow/dashboard/index.vue
rename to app/components/content/dashboard/index.vue
diff --git a/app/components/flow/item-price/list.vue b/app/components/content/item-price/list.vue
similarity index 100%
rename from app/components/flow/item-price/list.vue
rename to app/components/content/item-price/list.vue
diff --git a/app/components/flow/item/list.vue b/app/components/content/item/list.vue
similarity index 100%
rename from app/components/flow/item/list.vue
rename to app/components/content/item/list.vue
diff --git a/app/components/flow/medicine-group/list.vue b/app/components/content/medicine-group/list.vue
similarity index 96%
rename from app/components/flow/medicine-group/list.vue
rename to app/components/content/medicine-group/list.vue
index 0885b57f..93afabff 100644
--- a/app/components/flow/medicine-group/list.vue
+++ b/app/components/content/medicine-group/list.vue
@@ -2,7 +2,6 @@
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import Modal from '~/components/pub/base/modal/modal.vue'
-import Pagination from '~/components/pub/base/pagination/pagination.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
diff --git a/app/components/flow/medicine-method/list.vue b/app/components/content/medicine-method/list.vue
similarity index 100%
rename from app/components/flow/medicine-method/list.vue
rename to app/components/content/medicine-method/list.vue
diff --git a/app/components/flow/medicine/entry.vue b/app/components/content/medicine/entry.vue
similarity index 100%
rename from app/components/flow/medicine/entry.vue
rename to app/components/content/medicine/entry.vue
diff --git a/app/components/flow/medicine/list.vue b/app/components/content/medicine/list.vue
similarity index 100%
rename from app/components/flow/medicine/list.vue
rename to app/components/content/medicine/list.vue
diff --git a/app/components/flow/patient/add.vue b/app/components/content/patient/add.vue
similarity index 100%
rename from app/components/flow/patient/add.vue
rename to app/components/content/patient/add.vue
diff --git a/app/components/flow/patient/list.vue b/app/components/content/patient/list.vue
similarity index 100%
rename from app/components/flow/patient/list.vue
rename to app/components/content/patient/list.vue
diff --git a/app/components/flow/rehab/registration/home.vue b/app/components/content/rehab/registration/home.vue
similarity index 100%
rename from app/components/flow/rehab/registration/home.vue
rename to app/components/content/rehab/registration/home.vue
diff --git a/app/components/flow/rehab/registration/sep-prosedur/add.vue b/app/components/content/rehab/registration/sep-prosedur/add.vue
similarity index 100%
rename from app/components/flow/rehab/registration/sep-prosedur/add.vue
rename to app/components/content/rehab/registration/sep-prosedur/add.vue
diff --git a/app/components/flow/rehab/registration/sep-prosedur/list.vue b/app/components/content/rehab/registration/sep-prosedur/list.vue
similarity index 100%
rename from app/components/flow/rehab/registration/sep-prosedur/list.vue
rename to app/components/content/rehab/registration/sep-prosedur/list.vue
diff --git a/app/components/flow/satusehat/const.ts b/app/components/content/satusehat/const.ts
similarity index 100%
rename from app/components/flow/satusehat/const.ts
rename to app/components/content/satusehat/const.ts
diff --git a/app/components/flow/satusehat/list.vue b/app/components/content/satusehat/list.vue
similarity index 100%
rename from app/components/flow/satusehat/list.vue
rename to app/components/content/satusehat/list.vue
diff --git a/app/components/flow/satusehat/schema.query.ts b/app/components/content/satusehat/schema.query.ts
similarity index 100%
rename from app/components/flow/satusehat/schema.query.ts
rename to app/components/content/satusehat/schema.query.ts
diff --git a/app/components/flow/user/entry.vue b/app/components/content/user/entry.vue
similarity index 100%
rename from app/components/flow/user/entry.vue
rename to app/components/content/user/entry.vue
diff --git a/app/components/flow/user/list.vue b/app/components/content/user/list.vue
similarity index 100%
rename from app/components/flow/user/list.vue
rename to app/components/content/user/list.vue
diff --git a/app/pages/(features)/doctor/add.vue b/app/pages/(features)/doctor/add.vue
index 987baa28..c0a43c7f 100644
--- a/app/pages/(features)/doctor/add.vue
+++ b/app/pages/(features)/doctor/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowDoctorAdd />
+    <ContentDoctorAdd />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/doctor/index.vue b/app/pages/(features)/doctor/index.vue
index e75a5b89..f0c8ddba 100644
--- a/app/pages/(features)/doctor/index.vue
+++ b/app/pages/(features)/doctor/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowDoctorList />
+      <ContentDoctorList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/human-src/user/add.vue b/app/pages/(features)/human-src/user/add.vue
index 39ba8791..8478c9b2 100644
--- a/app/pages/(features)/human-src/user/add.vue
+++ b/app/pages/(features)/human-src/user/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowUserEntry />
+    <ContentUserEntry />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/human-src/user/index.vue b/app/pages/(features)/human-src/user/index.vue
index 2c0f921f..e8e3647e 100644
--- a/app/pages/(features)/human-src/user/index.vue
+++ b/app/pages/(features)/human-src/user/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowUserList />
+      <ContentUserList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/patient/add.vue b/app/pages/(features)/patient/add.vue
index 813e418b..6532240a 100644
--- a/app/pages/(features)/patient/add.vue
+++ b/app/pages/(features)/patient/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowPatientAdd />
+    <ContentPatientAdd />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/patient/index.vue b/app/pages/(features)/patient/index.vue
index 71d07e43..8f274db1 100644
--- a/app/pages/(features)/patient/index.vue
+++ b/app/pages/(features)/patient/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowPatientList />
+      <ContentPatientList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
index 368b4f40..e4381443 100644
--- a/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
+++ b/app/pages/(features)/rehab/registration-queue/sep-prosedur/add.vue
@@ -34,7 +34,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowDoctorAdd />
+    <ContentDoctorAdd />
   </div>
   <PubBaseError v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/satusehat/add.vue b/app/pages/(features)/satusehat/add.vue
index d1fee557..1de89d94 100644
--- a/app/pages/(features)/satusehat/add.vue
+++ b/app/pages/(features)/satusehat/add.vue
@@ -34,7 +34,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowPatientAdd />
+    <ContentPatientAdd />
   </div>
   <PubBaseError v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/satusehat/index.vue b/app/pages/(features)/satusehat/index.vue
index 2c7bb9f5..69126581 100644
--- a/app/pages/(features)/satusehat/index.vue
+++ b/app/pages/(features)/satusehat/index.vue
@@ -32,7 +32,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowSatusehatList />
+      <ContentSatusehatList />
     </div>
     <PubBaseError v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
index 1b080470..29383fb4 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine-method/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineMethodList />
+      <ContentMedicineMethodList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
index cbeccd42..cc8d6afe 100644
--- a/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine-type/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineGroupList />
+      <ContentMedicineGroupList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
index 9c1697fc..adf77a76 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/[id]/edit.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowMedicineEntry />
+    <ContentMedicineEntry />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/add.vue b/app/pages/(features)/tools-equipment-src/medicine/add.vue
index 9c1697fc..adf77a76 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/add.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/add.vue
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)
 
 <template>
   <div v-if="canCreate">
-    <FlowMedicineEntry />
+    <ContentMedicineEntry />
   </div>
   <Error v-else :status-code="403" />
 </template>
diff --git a/app/pages/(features)/tools-equipment-src/medicine/index.vue b/app/pages/(features)/tools-equipment-src/medicine/index.vue
index 877b5c78..3c8b58da 100644
--- a/app/pages/(features)/tools-equipment-src/medicine/index.vue
+++ b/app/pages/(features)/tools-equipment-src/medicine/index.vue
@@ -33,7 +33,7 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <FlowMedicineList />
+      <ContentMedicineList />
     </div>
     <Error v-else :status-code="403" />
   </div>
diff --git a/app/pages/_dev/index.vue b/app/pages/_dev/index.vue
index 90928bc6..b36abf7e 100644
--- a/app/pages/_dev/index.vue
+++ b/app/pages/_dev/index.vue
@@ -49,7 +49,7 @@ const navMenu = ref({
     {
       title: 'Test Medicine List',
       icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/item/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/content/item/list.vue')),
     },
   ],
 })
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index b2e8f89a..9727a6be 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -11,7 +11,7 @@ definePageMeta({
       <div class="grid gap-2 text-center">
         <h1 class="text-2xl font-semibold tracking-tight">Login RSSA</h1>
       </div>
-      <FlowAuthLogin />
+      <ContentAuthLogin />
     </div>
   </LayoutAuth>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5d6072e5..45476961 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -13,5 +13,5 @@ useHead({
 </script>
 
 <template>
-  <FlowDashboard />
+  <ContentDashboard />
 </template>

From ea2076d0976228166d6c6476ff0e09497f2cc8ff Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Sun, 7 Sep 2025 22:59:57 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=96=20docs=20(readme):=20update=20?=
 =?UTF-8?q?component=20directory=20structure=20and=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 694ddf34..40601187 100644
--- a/README.md
+++ b/README.md
@@ -20,16 +20,20 @@ RSSA - Front End
 
 - `app.vue`: Main layout
 - `components` : Contains all reusable UI components.
-- `components/flow` : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
-- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
+- `components/content` : Entry point for business logic and workflows. Pages or routes call these content components to handle API requests and process application logic
+- `components/app` : View-layer components that manage and present data. These are used within `content/` to render or handle specific parts of the UI, and return results back to the content
 - `components/pub` : Public/shared components used across different parts of the app.
 - `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
 - `layouts` : Reusable UI layout patterns used across pages.
+- `models` : Contains data definitions or interfaces.
+- `schemas` : Contains JSON schemas used for validation.
+- `services` : Contains reusable API calls and business logic.
+
 
 ## Directory Structure for `app/pages`
 
 - `pages/auth` : Authentication related pages.
-- `pages/(features)` : Grouped feature modules that reflect specific business flow or domains.
+- `pages/(features)` : Grouped feature modules that reflect specific business content or domains.
 
 ## Directory Structure for `server/`
 
@@ -50,16 +54,16 @@ The basic development workflow follows these steps:
 - Keep components pure, avoid making HTTP requests directly within them.
 - They receive data via props and emit events upward.
 
-### Business Logic in `components/flow`
+### Business Logic in `components/content`
 
 - This layer connects the UI with the logic (API calls, validations, navigation).
-- It composes components from `components/app/`, `components/pub/`, and other flow.
+- It composes components from `components/app/`, `components/pub/`, and other content.
 - Also responsible for managing state, side effects, and interactions.
 
 ### Create Pages in `pages/`
 
 - Define permissions and guards for each page.
-- Pages load the appropriate flow from `components/flow/`.
+- Pages load the appropriate content from `components/content/`.
 - They do not contain UI or logic directly, just route level layout or guards.
 
 ## Code Conventions