diff --git a/src/pages/14_report/constants.ts b/src/pages/14_report/constants.ts
new file mode 100644
index 00000000..fc2b9883
--- /dev/null
+++ b/src/pages/14_report/constants.ts
@@ -0,0 +1,153 @@
+import { QTableProps } from 'quasar';
+import { Invoice, Receipt } from 'src/stores/payment/types';
+import {
+  Report,
+  ReportProduct,
+  ReportQuotation,
+} from 'src/stores/report/types';
+import { formatNumberDecimal } from 'src/stores/utils';
+import { dateFormatJS } from 'src/utils/datetime';
+
+export enum ViewMode {
+  Document = 'document',
+  Invoice = 'invoice',
+  Receipt = 'receipt',
+  Product = 'product',
+  Sale = 'sale',
+}
+
+type ColumnsSale = {
+  code: string;
+  name: string;
+  _count: number;
+};
+
+type ColumnsBySale = ColumnsSale & {
+  url?: string;
+  id?: string;
+  gender?: string;
+};
+
+export const colReportQuotation = [
+  {
+    name: 'code',
+    align: 'center',
+    label: 'report.document.code',
+    field: (data: ReportQuotation) => data.code,
+  },
+  {
+    name: '#status',
+    align: 'center',
+    label: 'report.document.status',
+    field: '',
+  },
+  {
+    name: 'createAt',
+    align: 'center',
+    label: 'report.document.createAt',
+    field: (data: ReportQuotation) => dateFormatJS({ date: data.createdAt }),
+  },
+  {
+    name: 'updateAt',
+    align: 'center',
+    label: 'report.document.updateAt',
+    field: (data: ReportQuotation) => dateFormatJS({ date: data.updatedAt }),
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colReport = [
+  {
+    name: 'code',
+    align: 'center',
+    label: 'report.table.code',
+    field: (data: Report) => data.code,
+  },
+  {
+    name: '#status',
+    align: 'center',
+    label: 'report.table.status',
+    field: '',
+  },
+  {
+    name: 'createAt',
+    align: 'center',
+    label: 'report.table.createAt',
+    field: (data: Report) => dateFormatJS({ date: data.createdAt }),
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colReportProduct = [
+  {
+    name: 'code',
+    align: 'center',
+    label: 'report.product.code',
+    field: (data: ReportProduct) => data.code,
+  },
+  {
+    name: 'name',
+    align: 'center',
+    label: 'report.product.name',
+    field: (data: ReportProduct) => data.name,
+  },
+  {
+    name: 'sale',
+    align: 'center',
+    label: 'report.product.sale',
+    field: (data: ReportProduct) => data.sale,
+  },
+  {
+    name: 'did',
+    align: 'center',
+    label: 'report.product.did',
+    field: (data: ReportProduct) => data.did,
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colReportSale = [
+  {
+    name: 'code',
+    align: 'left',
+    label: 'report.sale.code',
+    field: (data: ColumnsSale) => data.code,
+  },
+  {
+    name: '#name',
+    align: 'left',
+    label: 'report.sale.name',
+    field: '',
+  },
+  {
+    name: 'count',
+    align: 'center',
+    label: 'report.sale.count',
+    field: (data: ColumnsSale) => data._count,
+  },
+] as const satisfies QTableProps['columns'];
+
+export const colReportBySale = [
+  {
+    name: 'code',
+    align: 'left',
+    label: 'report.sale.code',
+    field: (data: ColumnsBySale) => data.code,
+  },
+  {
+    name: '#name',
+    align: 'left',
+    label: 'report.sale.name',
+    field: '',
+  },
+  {
+    name: 'count',
+    align: 'center',
+    label: 'report.sale.count',
+    field: (data: ColumnsBySale) => data._count,
+  },
+] as const satisfies QTableProps['columns'];
+
+export const pageTabs = [
+  { label: 'Document', value: ViewMode.Document, by: ['user'] },
+  { label: 'Invoice', value: ViewMode.Invoice, by: ['user'] },
+  { label: 'Product', value: ViewMode.Product, by: ['user', 'admin'] },
+  { label: 'Sale', value: ViewMode.Sale, by: ['admin'] },
+];