diff --git a/src/components/14_report/Expansion.vue b/src/components/14_report/Expansion.vue
new file mode 100644
index 00000000..581c677b
--- /dev/null
+++ b/src/components/14_report/Expansion.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineProps<{
+  defaultOpened?: boolean;
+}>();
+</script>
+
+<template>
+  <q-expansion-item
+    dense
+    class="overflow-hidden bordered full-width"
+    switch-toggle-side
+    style="border-radius: var(--radius-2)"
+    expand-icon="mdi-chevron-down-circle"
+    header-class="surface-1 q-py-sm text-medium text-body1"
+    :default-opened="defaultOpened"
+  >
+    <template #header>
+      <span>
+        <slot name="header" />
+      </span>
+    </template>
+
+    <main class="surface-1 q-pa-md full-width">
+      <slot name="main" />
+    </main>
+  </q-expansion-item>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/14_report/Table/TableReport.vue b/src/pages/14_report/Table/TableReport.vue
new file mode 100644
index 00000000..29214126
--- /dev/null
+++ b/src/pages/14_report/Table/TableReport.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { QTableSlots, QTableProps } from 'quasar';
+
+const prop = withDefaults(
+  defineProps<{
+    row: QTableProps['rows'];
+    columns: QTableProps['columns'];
+  }>(),
+  {
+    row: () => [],
+    columns: () => [],
+  },
+);
+</script>
+<template>
+  <q-table
+    :rows-per-page-options="[5, 0]"
+    :rows="
+      row.map((item, i) => ({
+        ...item,
+        _index: i,
+      }))
+    "
+    :columns
+    bordered
+    flat
+    selection="multiple"
+    class="full-width"
+  >
+    <template v-slot:header="props">
+      <q-tr
+        style="background-color: hsla(var(--info-bg) / 0.07)"
+        :props="props"
+      >
+        <q-th v-for="col in columns" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template
+      v-slot:body="props: {
+        row: any & { _index: number };
+      } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+    >
+      <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
+        <q-td v-for="col in columns" :align="col.align">
+          <!-- NOTE: custom column will starts with # -->
+          <template v-if="!col.name.startsWith('#')">
+            {{
+              typeof col.field === 'string'
+                ? props.row[col.field]
+                : col.field(props.row)
+            }}
+          </template>
+
+          <template v-else>
+            <slot :name="col.name.replace(/^#/, '')" :item="props" />
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>