@adminforth/dashboard 1.0.0 → 1.2.0

package/custom/widgets/chart/ChartWidget.vue

@@ -26,7 +26,7 @@
       :rows="rows"
       :x-field="xField"
       :y-field="yField"
-      :series-name="chartConfig.series_name"
+      :series-name="chartConfig.seriesName"
       :color="chartConfig.color"
       :height="chartHeight"
     />
@@ -91,6 +91,7 @@
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+import { normalizeChartWidgetConfig } from './chart.types.js'
 import BarChart from './bar/BarChart.vue'
 import FunnelChart from './funnel/FunnelChart.vue'
 import HistogramChart from './histogram/HistogramChart.vue'
@@ -126,13 +127,45 @@ watch(
 const chartData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const rows = computed(() => chartData.value?.rows ?? [])
 const columns = computed(() => chartData.value?.columns ?? [])
-const chartConfig = computed(() => props.widget.chart)
-const xField = computed(() => chartConfig.value?.x_field || columns.value[0])
-const yField = computed(() => chartConfig.value?.y_field || columns.value[1])
-const labelField = computed(() => chartConfig.value?.label_field || columns.value[0])
-const valueField = computed(() => chartConfig.value?.value_field || columns.value[1])
+const chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+const aggregateGroupField = computed(() => {
+  const dataSource = props.widget.dataSource
+
+  if (dataSource?.type !== 'aggregate' || !dataSource.groupBy) {
+    return undefined
+  }
+
+  return dataSource.groupBy.field
+})
+
+function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
+  const resolvedField = field ?? fallbackField
+
+  if (!resolvedField) {
+    return ''
+  }
+
+  if (columns.value.includes(resolvedField)) {
+    return resolvedField
+  }
+
+  if (
+    aggregateGroupField.value
+    && resolvedField === aggregateGroupField.value
+    && columns.value.includes('group')
+  ) {
+    return 'group'
+  }
+
+  return resolvedField
+}
+
+const xField = computed(() => resolveChartDimensionField(chartConfig.value?.xField, columns.value[0]))
+const yField = computed(() => chartConfig.value?.yField || columns.value[1])
+const labelField = computed(() => resolveChartDimensionField(chartConfig.value?.labelField, columns.value[0]))
+const valueField = computed(() => chartConfig.value?.valueField || columns.value[1])
 const pieRows = computed(() => {
-  if (chartConfig.value?.value_field) {
+  if (chartConfig.value?.valueField) {
     return rows.value
   }
 
@@ -147,10 +180,10 @@ const pieRows = computed(() => {
 
   return Array.from(groupedRows.values())
 })
-const pieLabelField = computed(() => chartConfig.value?.value_field ? labelField.value : 'label')
-const pieValueField = computed(() => chartConfig.value?.value_field ? valueField.value : 'value')
+const pieLabelField = computed(() => chartConfig.value?.valueField ? labelField.value : 'label')
+const pieValueField = computed(() => chartConfig.value?.valueField ? valueField.value : 'value')
 const barRows = computed(() => {
-  const bucketField = chartConfig.value?.bucket_field
+  const bucketField = chartConfig.value?.bucketField
 
   if (!bucketField) {
     return rows.value
@@ -167,8 +200,8 @@ const barRows = computed(() => {
     }).length,
   }))
 })
-const barLabelField = computed(() => chartConfig.value?.bucket_field ? 'label' : labelField.value)
-const barValueField = computed(() => chartConfig.value?.bucket_field ? 'count' : valueField.value)
+const barLabelField = computed(() => chartConfig.value?.bucketField ? 'label' : labelField.value)
+const barValueField = computed(() => chartConfig.value?.bucketField ? 'count' : valueField.value)
 const stackedBarSeries = computed(() => {
   if (chartConfig.value?.series?.length) {
     return chartConfig.value.series

package/custom/widgets/chart/chart.types.ts

@@ -32,3 +32,86 @@ export type ChartWidgetConfig = {
   color?: string
   colors?: string[]
 }
+
+export type NormalizedChartWidgetConfig = {
+  type: ChartWidgetType
+  title?: string
+  xField?: string
+  yField?: string
+  labelField?: string
+  valueField?: string
+  bucketField?: string
+  buckets?: ChartWidgetBucketConfig[]
+  series?: ChartWidgetSeriesConfig[]
+  seriesName?: string
+  color?: string
+  colors?: string[]
+}
+
+export function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined {
+  const config = asChartWidgetConfigRecord(value)
+
+  if (!config) {
+    return undefined
+  }
+
+  const type = normalizeChartWidgetType(config.type)
+
+  if (!type) {
+    return undefined
+  }
+
+  const xField = getStringField(config, 'x_field')
+  const yField = getStringField(config, 'y_field')
+  const labelField = getStringField(config, 'label_field')
+  const valueField = getStringField(config, 'value_field')
+  const bucketField = getStringField(config, 'bucket_field')
+  const seriesName = getStringField(config, 'series_name')
+  const title = getStringField(config, 'title')
+  const color = getStringField(config, 'color')
+  const colors = Array.isArray(config.colors) ? config.colors as string[] : undefined
+  const buckets = Array.isArray(config.buckets) ? config.buckets as ChartWidgetBucketConfig[] : undefined
+  const series = Array.isArray(config.series) ? config.series as ChartWidgetSeriesConfig[] : undefined
+
+  return {
+    type,
+    ...(title !== undefined ? { title } : {}),
+    ...(xField !== undefined ? { xField } : {}),
+    ...(yField !== undefined ? { yField } : {}),
+    ...(labelField !== undefined ? { labelField } : {}),
+    ...(valueField !== undefined ? { valueField } : {}),
+    ...(bucketField !== undefined ? { bucketField } : {}),
+    ...(buckets !== undefined ? { buckets } : {}),
+    ...(series !== undefined ? { series } : {}),
+    ...(seriesName !== undefined ? { seriesName } : {}),
+    ...(color !== undefined ? { color } : {}),
+    ...(colors !== undefined ? { colors } : {}),
+  }
+}
+
+function normalizeChartWidgetType(value: unknown): ChartWidgetType | undefined {
+  switch (value) {
+    case 'line':
+    case 'pie':
+    case 'bar':
+    case 'stacked_bar':
+    case 'funnel':
+    case 'histogram':
+      return value
+    default:
+      return undefined
+  }
+}
+
+function asChartWidgetConfigRecord(value: unknown): Record<string, unknown> | undefined {
+  return isRecord(value) ? value : undefined
+}
+
+function getStringField(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'string' ? value : undefined
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}

package/custom/widgets/chart/chart.utils.ts

@@ -14,8 +14,8 @@ export function toFiniteNumber(value: unknown) {
   return Number.isFinite(numberValue) ? numberValue : 0
 }
 
-export function formatChartValue(value: number) {
-  return new Intl.NumberFormat().format(value)
+export function formatChartValue(value: number, options: Intl.NumberFormatOptions = {}) {
+  return new Intl.NumberFormat(undefined, options).format(value)
 }
 
 export function formatChartLabel(value: unknown) {

package/custom/widgets/gauge-card/GaugeCardWidget.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeGaugeCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { CHART_COLORS, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -18,6 +21,32 @@ const {
   refetch,
 } = useWidgetData(dashboardSlugRef, widgetIdRef)
 
+function parseOptionalNumber(value: unknown): number | undefined {
+  if (value === null || value === undefined || value === '') {
+    return undefined
+  }
+
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+function countFractionDigits(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  const normalizedValue = value.toString().toLowerCase()
+  const [coefficient, exponentValue] = normalizedValue.split('e')
+  const exponent = exponentValue ? Number(exponentValue) : 0
+  const decimalDigits = coefficient.split('.')[1]?.length ?? 0
+
+  return Math.max(decimalDigits - exponent, 0)
+}
+
+function normalizeDisplayValue(value: number, useWholeNumbers: boolean) {
+  return useWholeNumbers ? Math.trunc(value) : value
+}
+
 watch(
   () => props.widget,
   () => {
@@ -26,20 +55,42 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => props.widget.gauge_card as {
-  value_field?: string
-  min?: number
-  max?: number
-  suffix?: string
-  color?: string
-} | undefined)
+const gaugeConfig = computed(() => normalizeGaugeCardWidgetConfig(props.widget.gauge_card))
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => gaugeConfig.value?.value_field || columns.value[0])
-const minValue = computed(() => gaugeConfig.value?.min ?? 0)
-const maxValue = computed(() => gaugeConfig.value?.max ?? 100)
+const valueField = computed(() => gaugeConfig.value?.valueField || columns.value[0])
+const minField = computed(() => gaugeConfig.value?.minField)
+const maxField = computed(() => gaugeConfig.value?.maxField)
+const minValue = computed(() => {
+  const dynamicMin = minField.value ? parseOptionalNumber(firstRow.value[minField.value]) : undefined
+  return dynamicMin ?? parseOptionalNumber(gaugeConfig.value?.min) ?? 0
+})
+const maxValue = computed(() => {
+  const dynamicMax = maxField.value ? parseOptionalNumber(firstRow.value[maxField.value]) : undefined
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.max) ?? 100
+})
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
+const fractionDigits = computed(() => Math.min([
+  value.value,
+  minValue.value,
+  maxValue.value,
+].reduce((maxDigits, currentValue) => Math.max(maxDigits, countFractionDigits(currentValue)), 0), 3))
+const shouldUseWholeNumbers = computed(() => Math.abs(maxValue.value) >= 1000)
+const formattedValue = computed(() => formatChartValue(normalizeDisplayValue(value.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMinValue = computed(() => formatChartValue(normalizeDisplayValue(minValue.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMaxValue = computed(() => {
+  return formatChartValue(normalizeDisplayValue(maxValue.value, shouldUseWholeNumbers.value), {
+    minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+    maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  })
+})
 const progress = computed(() => {
   const range = maxValue.value - minValue.value
   return range > 0 ? Math.min(Math.max((value.value - minValue.value) / range, 0), 1) : 0
@@ -97,10 +148,10 @@ const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
       </svg>
 
       <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ formatChartValue(value) }}{{ gaugeConfig?.suffix ?? '' }}
+        {{ formattedValue }}{{ gaugeConfig?.suffix ?? '' }}
       </div>
       <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ formatChartValue(minValue) }} - {{ formatChartValue(maxValue) }}
+        {{ formattedMinValue }} - {{ formattedMaxValue }}
       </div>
     </div>
   </div>

package/custom/widgets/kpi-card/KpiCardWidget.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeKpiCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -26,17 +29,12 @@ watch(
   { deep: true },
 )
 
-const kpiConfig = computed(() => props.widget.kpi_card as {
-  value_field?: string
-  label_field?: string
-  prefix?: string
-  suffix?: string
-} | undefined)
+const kpiConfig = computed(() => normalizeKpiCardWidgetConfig(props.widget.kpi_card))
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => kpiConfig.value?.value_field || columns.value[0])
-const labelField = computed(() => kpiConfig.value?.label_field)
+const valueField = computed(() => kpiConfig.value?.valueField || columns.value[0])
+const labelField = computed(() => kpiConfig.value?.labelField)
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
 const label = computed(() => labelField.value ? String(firstRow.value[labelField.value]) : props.widget.label)
 const formattedValue = computed(() => `${kpiConfig.value?.prefix ?? ''}${formatChartValue(value.value)}${kpiConfig.value?.suffix ?? ''}`)

package/custom/widgets/pivot-table/PivotTableWidget.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+import {
+  normalizePivotTableWidgetConfig,
+} from '../../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
 import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
 const props = defineProps<{
@@ -26,21 +29,38 @@ watch(
   { deep: true },
 )
 
-const pivotConfig = computed(() => props.widget.pivot_table as {
-  row_field?: string
-  column_field?: string
-  value_field?: string
-  aggregation?: 'count' | 'sum'
-} | undefined)
-const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
+const pivotConfig = computed(() => normalizePivotTableWidgetConfig(props.widget.pivot_table))
+const widgetData = computed(() => data.value?.data as DashboardWidgetData | null)
 const rows = computed(() => widgetData.value?.rows ?? [])
 const columns = computed(() => widgetData.value?.columns ?? [])
-const rowField = computed(() => pivotConfig.value?.row_field || columns.value[0])
-const columnField = computed(() => pivotConfig.value?.column_field || columns.value[1])
-const valueField = computed(() => pivotConfig.value?.value_field || columns.value[2])
+const isAggregateData = computed(() => widgetData.value?.kind === 'aggregate')
+const shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.columnField)
+const rowField = computed(() => pivotConfig.value?.rowField || (isAggregateData.value ? 'group' : columns.value[0]))
+const columnField = computed(() => pivotConfig.value?.columnField || columns.value[1])
+const valueField = computed(() => pivotConfig.value?.valueField || columns.value[2] || columns.value[1])
 const aggregation = computed(() => pivotConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
-const pivotColumnLabels = computed(() => Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value])))))
+const pivotColumnLabels = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return columns.value.filter((column) => column !== rowField.value)
+  }
+
+  return Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value]))))
+})
 const pivotRows = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return rows.value.map((row) => {
+      const item: Record<string, number | string> = {
+        label: formatChartLabel(row[rowField.value]),
+      }
+
+      for (const column of pivotColumnLabels.value) {
+        item[column] = toFiniteNumber(row[column])
+      }
+
+      return item
+    })
+  }
+
   const rowMap = new Map<string, Record<string, number | string>>()
 
   for (const row of rows.value) {

package/custom/widgets/table/TableWidget.vue

@@ -23,37 +23,87 @@
 
     <div
       v-else
-      class="min-h-0 flex-1 overflow-auto"
+      class="flex min-h-0 flex-1 flex-col"
     >
-      <table class="min-w-max w-full border-collapse text-left text-sm">
-        <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
-          <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 font-semibold"
+      <div class="min-h-0 flex-1 overflow-auto">
+        <table class="min-w-max w-full border-collapse text-left text-sm">
+          <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+            <tr>
+              <th
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 font-semibold"
+              >
+                {{ column }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="(row, index) in tableData.rows"
+              :key="`${currentPage}-${index}`"
+              class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
             >
-              {{ column }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="(row, index) in tableData.rows"
-            :key="index"
-            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
+              <td
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+              >
+                {{ formatCell(row[column]) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        v-if="pagination"
+        class="flex flex-wrap items-center justify-between gap-2 border-t border-lightListBorder px-3 py-2 text-sm text-lightListTableText dark:border-darkListBorder dark:text-darkListTableText"
+      >
+        <div>
+          {{ pageStart }}-{{ pageEnd }} of {{ pagination.total }}
+        </div>
+
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage <= 1 || isFetching"
+            @click="currentPage -= 1"
+            aria-label="Previous page"
           >
-            <td
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+            &lt;
+          </button>
+
+          <span class="flex items-center gap-1">
+            <span>Page</span>
+            <input
+              v-model.number="currentPageInput"
+              type="number"
+              min="1"
+              :max="pagination.totalPages"
+              class="dashboard-table-page-input h-8 min-w-8 rounded border border-lightListBorder bg-lightTableBackground px-2 text-center text-sm text-lightListTableText dark:border-darkListBorder dark:bg-darkTableBackground dark:text-darkListTableText"
+              :style="{ width: `${currentPageInputWidth}ch` }"
+              :disabled="isFetching"
+              aria-label="Current page"
+              @blur="applyCurrentPageInput"
+              @keydown.enter="applyCurrentPageInput"
             >
-              {{ formatCell(row[column]) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            <span>of {{ pagination.totalPages }}</span>
+          </span>
+
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage >= pagination.totalPages || isFetching"
+            @click="currentPage += 1"
+            aria-label="Next page"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -61,27 +111,52 @@
 
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 
+type TableWidgetConfig = {
+  columns?: string[]
+  pagination?: boolean
+  pageSize?: number
+}
+
+const DEFAULT_PAGE_SIZE = 10
+
 const props = defineProps<{
   dashboardSlug: string
   widget: DashboardWidgetConfig
 }>()
 
+const currentPage = ref(1)
+const currentPageInput = ref(1)
+const tableConfig = computed(() => props.widget.table as TableWidgetConfig | undefined)
+const isPaginationEnabled = computed(() => tableConfig.value?.pagination !== false)
+const pageSize = computed(() => tableConfig.value?.pageSize ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
+const widgetDataRequest = computed(() => (
+  isPaginationEnabled.value
+    ? {
+        pagination: {
+          page: currentPage.value,
+          pageSize: pageSize.value,
+        },
+      }
+    : {}
+))
 const {
   data,
   isLoading,
+  isFetching,
   error,
   refetch,
-} = useWidgetData(dashboardSlugRef, widgetIdRef)
+} = useWidgetData(dashboardSlugRef, widgetIdRef, widgetDataRequest)
 
 watch(
   () => props.widget,
   () => {
+    currentPage.value = 1
     void refetch()
   },
   { deep: true },
@@ -92,10 +167,47 @@ const tableData = computed(() => {
 })
 
 const columns = computed(() => {
-  const configuredColumns = (props.widget.table as { columns?: string[] } | undefined)?.columns
+  const configuredColumns = tableConfig.value?.columns
   return configuredColumns ?? tableData.value?.columns ?? []
 })
 
+const pagination = computed(() => tableData.value?.pagination)
+const pageStart = computed(() => {
+  if (!pagination.value || pagination.value.total === 0) {
+    return 0
+  }
+
+  return (pagination.value.page - 1) * pagination.value.pageSize + 1
+})
+const pageEnd = computed(() => {
+  if (!pagination.value) {
+    return 0
+  }
+
+  return Math.min(pagination.value.page * pagination.value.pageSize, pagination.value.total)
+})
+const currentPageInputWidth = computed(() => {
+  const digits = String(currentPageInput.value || currentPage.value).length
+  return Math.max(digits + 3, 4)
+})
+
+watch(pagination, (nextPagination) => {
+  if (nextPagination && currentPage.value > nextPagination.totalPages) {
+    currentPage.value = nextPagination.totalPages
+  }
+})
+
+watch(currentPage, (nextPage) => {
+  currentPageInput.value = nextPage
+})
+
+function applyCurrentPageInput() {
+  const totalPages = pagination.value?.totalPages ?? 1
+  const page = Number.isFinite(currentPageInput.value) ? currentPageInput.value : currentPage.value
+  currentPage.value = Math.min(Math.max(Math.trunc(page), 1), totalPages)
+  currentPageInput.value = currentPage.value
+}
+
 function formatCell(value: unknown) {
   if (value === null || value === undefined) {
     return ''
@@ -108,3 +220,16 @@ function formatCell(value: unknown) {
   return String(value)
 }
 </script>
+
+<style scoped>
+.dashboard-table-page-input::-webkit-outer-spin-button,
+.dashboard-table-page-input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.dashboard-table-page-input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+</style>

package/dist/custom/api/dashboardApi.d.ts

@@ -14,6 +14,12 @@ export type DashboardWidgetDataResponse = {
     widget: DashboardWidgetConfig;
     data: unknown;
 };
+export type DashboardWidgetDataRequest = {
+    pagination?: {
+        page: number;
+        pageSize: number;
+    };
+};
 export declare class DashboardApiError extends Error {
     validationErrors: DashboardWidgetConfigValidationError[];
     constructor(message: string, validationErrors?: DashboardWidgetConfigValidationError[]);
@@ -28,5 +34,5 @@ export declare const dashboardApi: {
     moveDashboardWidget(slug: string, widgetId: string, direction: DashboardWidgetMoveDirection): Promise<DashboardResponse>;
     removeDashboardWidget(slug: string, widgetId: string): Promise<DashboardResponse>;
     setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse>;
-    getDashboardWidgetData(slug: string, widgetId: string): Promise<DashboardWidgetDataResponse>;
+    getDashboardWidgetData(slug: string, widgetId: string, request?: DashboardWidgetDataRequest): Promise<DashboardWidgetDataResponse>;
 };

package/dist/custom/api/dashboardApi.js

@@ -168,12 +168,10 @@ exports.dashboardApi = {
             });
         });
     },
-    getDashboardWidgetData(slug, widgetId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
-                slug,
-                widgetId,
-            });
+    getDashboardWidgetData(slug_1, widgetId_1) {
+        return __awaiter(this, arguments, void 0, function* (slug, widgetId, request = {}) {
+            return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', Object.assign({ slug,
+                widgetId }, request));
         });
     },
 };