@adminforth/dashboard 1.0.0

package/custom/widgets/table/TableWidget.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-lightListBorder bg-lightTableBackground dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="p-4 text-sm text-lightInputErrorColor"
+    >
+      Failed to load table data
+    </div>
+
+    <div
+      v-else-if="!tableData?.rows.length"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      No data available
+    </div>
+
+    <div
+      v-else
+      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="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>
+</template>
+
+
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useWidgetData } from '../../queries/useWidgetData.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+
+const props = defineProps<{
+  dashboardSlug: string
+  widget: DashboardWidgetConfig
+}>()
+
+const dashboardSlugRef = computed(() => props.dashboardSlug)
+const widgetIdRef = computed(() => props.widget.id)
+const {
+  data,
+  isLoading,
+  error,
+  refetch,
+} = useWidgetData(dashboardSlugRef, widgetIdRef)
+
+watch(
+  () => props.widget,
+  () => {
+    void refetch()
+  },
+  { deep: true },
+)
+
+const tableData = computed(() => {
+  return data.value?.data as DashboardWidgetTableData | null
+})
+
+const columns = computed(() => {
+  const configuredColumns = (props.widget.table as { columns?: string[] } | undefined)?.columns
+  return configuredColumns ?? tableData.value?.columns ?? []
+})
+
+function formatCell(value: unknown) {
+  if (value === null || value === undefined) {
+    return ''
+  }
+
+  if (typeof value === 'object') {
+    return JSON.stringify(value)
+  }
+
+  return String(value)
+}
+</script>

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

@@ -0,0 +1,32 @@
+import type { DashboardConfig, DashboardGroupConfig, DashboardGroupMoveDirection, DashboardWidgetConfig, DashboardWidgetMoveDirection } from '../model/dashboard.types.js';
+export type DashboardWidgetConfigValidationError = {
+    field: string;
+    message: string;
+};
+export type DashboardResponse = {
+    id: string;
+    slug: string;
+    label: string;
+    revision: number;
+    config: DashboardConfig;
+};
+export type DashboardWidgetDataResponse = {
+    widget: DashboardWidgetConfig;
+    data: unknown;
+};
+export declare class DashboardApiError extends Error {
+    validationErrors: DashboardWidgetConfigValidationError[];
+    constructor(message: string, validationErrors?: DashboardWidgetConfigValidationError[]);
+}
+export declare const dashboardApi: {
+    getDashboardConfig(slug: string): Promise<DashboardResponse>;
+    addDashboardGroup(slug: string): Promise<DashboardResponse>;
+    moveDashboardGroup(slug: string, groupId: string, direction: DashboardGroupMoveDirection): Promise<DashboardResponse>;
+    removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse>;
+    setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse>;
+    addDashboardWidget(slug: string, groupId: string): Promise<DashboardResponse>;
+    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>;
+};

package/dist/custom/api/dashboardApi.js

@@ -0,0 +1,179 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dashboardApi = exports.DashboardApiError = void 0;
+class DashboardApiError extends Error {
+    constructor(message, validationErrors = []) {
+        super(message);
+        this.name = 'DashboardApiError';
+        this.validationErrors = validationErrors;
+    }
+}
+exports.DashboardApiError = DashboardApiError;
+function normalizeValidationErrors(response) {
+    if (Array.isArray(response === null || response === void 0 ? void 0 : response.validationErrors)) {
+        return response.validationErrors;
+    }
+    if (Array.isArray(response === null || response === void 0 ? void 0 : response.details)) {
+        return response.details.map((detail) => ({
+            field: Array.isArray(detail.instancePath)
+                ? detail.instancePath.join('.')
+                : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.'),
+            message: String(detail.message || 'Invalid value'),
+        }));
+    }
+    return [];
+}
+function parseDashboardResponse(rawResponse) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const responseText = yield rawResponse.text();
+        if (!responseText) {
+            return null;
+        }
+        try {
+            return JSON.parse(responseText);
+        }
+        catch (_a) {
+            return {
+                error: responseText,
+            };
+        }
+    });
+}
+function callDashboardApi(path, body) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const rawResponse = yield fetch(path, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'accept-language': localStorage.getItem('af_lang') || 'en',
+            },
+            body: JSON.stringify(body),
+        });
+        const response = yield parseDashboardResponse(rawResponse);
+        if (!rawResponse.ok) {
+            throw new DashboardApiError((response === null || response === void 0 ? void 0 : response.error) || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`, normalizeValidationErrors(response));
+        }
+        if (!response || response.error) {
+            throw new DashboardApiError((response === null || response === void 0 ? void 0 : response.error) || 'Dashboard request failed', normalizeValidationErrors(response));
+        }
+        return {
+            id: response.id,
+            slug: response.slug,
+            label: response.label,
+            revision: response.revision,
+            config: response.config,
+        };
+    });
+}
+function callDashboardWidgetDataApi(path, body) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const rawResponse = yield fetch(path, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'accept-language': localStorage.getItem('af_lang') || 'en',
+            },
+            body: JSON.stringify(body),
+        });
+        const response = yield parseDashboardResponse(rawResponse);
+        if (!rawResponse.ok) {
+            throw new DashboardApiError((response === null || response === void 0 ? void 0 : response.error) || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`, normalizeValidationErrors(response));
+        }
+        if (!response || response.error) {
+            throw new DashboardApiError((response === null || response === void 0 ? void 0 : response.error) || 'Dashboard request failed', normalizeValidationErrors(response));
+        }
+        return {
+            widget: response.widget,
+            data: response.data,
+        };
+    });
+}
+exports.dashboardApi = {
+    getDashboardConfig(slug) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug });
+        });
+    },
+    addDashboardGroup(slug) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug });
+        });
+    },
+    moveDashboardGroup(slug, groupId, direction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_group', {
+                slug,
+                groupId,
+                direction,
+            });
+        });
+    },
+    removeDashboardGroup(slug, groupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_group', {
+                slug,
+                groupId,
+            });
+        });
+    },
+    setDashboardGroupConfig(slug, groupId, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_group_config', {
+                slug,
+                groupId,
+                config,
+            });
+        });
+    },
+    addDashboardWidget(slug, groupId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_widget', {
+                slug,
+                groupId,
+            });
+        });
+    },
+    moveDashboardWidget(slug, widgetId, direction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_widget', {
+                slug,
+                widgetId,
+                direction,
+            });
+        });
+    },
+    removeDashboardWidget(slug, widgetId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_widget', {
+                slug,
+                widgetId,
+            });
+        });
+    },
+    setWidgetConfig(slug, widgetId, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/set_widget_config', {
+                slug,
+                widgetId,
+                config,
+            });
+        });
+    },
+    getDashboardWidgetData(slug, widgetId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
+                slug,
+                widgetId,
+            });
+        });
+    },
+};

package/dist/custom/api/dashboardApi.ts

@@ -0,0 +1,213 @@
+import type {
+  DashboardConfig,
+  DashboardGroupConfig,
+  DashboardGroupMoveDirection,
+  DashboardWidgetConfig,
+  DashboardWidgetMoveDirection,
+} from '../model/dashboard.types.js'
+
+export type DashboardWidgetConfigValidationError = {
+  field: string
+  message: string
+}
+
+export type DashboardResponse = {
+  id: string
+  slug: string
+  label: string
+  revision: number
+  config: DashboardConfig
+}
+
+export type DashboardWidgetDataResponse = {
+  widget: DashboardWidgetConfig
+  data: unknown
+}
+
+export class DashboardApiError extends Error {
+  validationErrors: DashboardWidgetConfigValidationError[]
+
+  constructor(message: string, validationErrors: DashboardWidgetConfigValidationError[] = []) {
+    super(message)
+    this.name = 'DashboardApiError'
+    this.validationErrors = validationErrors
+  }
+}
+
+function normalizeValidationErrors(response: any): DashboardWidgetConfigValidationError[] {
+  if (Array.isArray(response?.validationErrors)) {
+    return response.validationErrors
+  }
+
+  if (Array.isArray(response?.details)) {
+    return response.details.map((detail: any) => ({
+      field: Array.isArray(detail.instancePath)
+        ? detail.instancePath.join('.')
+        : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.'),
+      message: String(detail.message || 'Invalid value'),
+    }))
+  }
+
+  return []
+}
+
+async function parseDashboardResponse(rawResponse: Response) {
+  const responseText = await rawResponse.text()
+
+  if (!responseText) {
+    return null
+  }
+
+  try {
+    return JSON.parse(responseText)
+  } catch {
+    return {
+      error: responseText,
+    }
+  }
+}
+
+async function callDashboardApi(path: string, body: Record<string, unknown>): Promise<DashboardResponse> {
+  const rawResponse = await fetch(path, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'accept-language': localStorage.getItem('af_lang') || 'en',
+    },
+    body: JSON.stringify(body),
+  })
+
+  const response = await parseDashboardResponse(rawResponse)
+
+  if (!rawResponse.ok) {
+    throw new DashboardApiError(
+      response?.error || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`,
+      normalizeValidationErrors(response),
+    )
+  }
+
+  if (!response || response.error) {
+    throw new DashboardApiError(response?.error || 'Dashboard request failed', normalizeValidationErrors(response))
+  }
+
+  return {
+    id: response.id,
+    slug: response.slug,
+    label: response.label,
+    revision: response.revision,
+    config: response.config,
+  }
+}
+
+async function callDashboardWidgetDataApi(
+  path: string,
+  body: Record<string, unknown>,
+): Promise<DashboardWidgetDataResponse> {
+  const rawResponse = await fetch(path, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'accept-language': localStorage.getItem('af_lang') || 'en',
+    },
+    body: JSON.stringify(body),
+  })
+
+  const response = await parseDashboardResponse(rawResponse)
+
+  if (!rawResponse.ok) {
+    throw new DashboardApiError(
+      response?.error || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`,
+      normalizeValidationErrors(response),
+    )
+  }
+
+  if (!response || response.error) {
+    throw new DashboardApiError(response?.error || 'Dashboard request failed', normalizeValidationErrors(response))
+  }
+
+  return {
+    widget: response.widget,
+    data: response.data,
+  }
+}
+
+export const dashboardApi = {
+  async getDashboardConfig(slug: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
+  },
+
+  async addDashboardGroup(slug: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug })
+  },
+
+  async moveDashboardGroup(
+    slug: string,
+    groupId: string,
+    direction: DashboardGroupMoveDirection,
+  ): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_group', {
+      slug,
+      groupId,
+      direction,
+    })
+  },
+
+  async removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_group', {
+      slug,
+      groupId,
+    })
+  },
+
+  async setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_group_config', {
+      slug,
+      groupId,
+      config,
+    })
+  },
+
+  async addDashboardWidget(slug: string, groupId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_widget', {
+      slug,
+      groupId,
+    })
+  },
+
+  async moveDashboardWidget(
+    slug: string,
+    widgetId: string,
+    direction: DashboardWidgetMoveDirection,
+  ): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_widget', {
+      slug,
+      widgetId,
+      direction,
+    })
+  },
+
+  async removeDashboardWidget(slug: string, widgetId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_widget', {
+      slug,
+      widgetId,
+    })
+  },
+
+  async setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_widget_config', {
+      slug,
+      widgetId,
+      config,
+    })
+  },
+
+  async getDashboardWidgetData(
+    slug: string,
+    widgetId: string,
+  ): Promise<DashboardWidgetDataResponse> {
+    return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
+      slug,
+      widgetId,
+    })
+  },
+}

package/dist/custom/composables/useElementSize.d.ts

@@ -0,0 +1,8 @@
+import type { Ref, ShallowRef } from 'vue';
+type ElementSizeState<T extends HTMLElement> = {
+    el: ShallowRef<T | null>;
+    width: Ref<number>;
+    height: Ref<number>;
+};
+export declare function useElementSize<T extends HTMLElement>(): ElementSizeState<T>;
+export {};

package/dist/custom/composables/useElementSize.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElementSize = useElementSize;
+const vue_1 = require("vue");
+function useElementSize() {
+    const el = (0, vue_1.shallowRef)(null);
+    const width = (0, vue_1.ref)(0);
+    const height = (0, vue_1.ref)(0);
+    let observer;
+    (0, vue_1.onMounted)(() => {
+        observer = new ResizeObserver(([entry]) => {
+            if (!entry) {
+                return;
+            }
+            width.value = Math.floor(entry.contentRect.width);
+            height.value = Math.floor(entry.contentRect.height);
+        });
+        if (el.value) {
+            observer.observe(el.value);
+        }
+    });
+    (0, vue_1.onBeforeUnmount)(() => {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+    });
+    return {
+        el: el,
+        width,
+        height,
+    };
+}

package/dist/custom/composables/useElementSize.ts

@@ -0,0 +1,41 @@
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
+
+type ElementSizeState<T extends HTMLElement> = {
+  el: ShallowRef<T | null>
+  width: Ref<number>
+  height: Ref<number>
+}
+
+export function useElementSize<T extends HTMLElement>(): ElementSizeState<T> {
+  const el = shallowRef<T | null>(null)
+  const width = ref(0)
+  const height = ref(0)
+
+  let observer: ResizeObserver | undefined
+
+  onMounted(() => {
+    observer = new ResizeObserver(([entry]) => {
+      if (!entry) {
+        return
+      }
+
+      width.value = Math.floor(entry.contentRect.width)
+      height.value = Math.floor(entry.contentRect.height)
+    })
+
+    if (el.value) {
+      observer.observe(el.value)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+  })
+
+  return {
+    el: el as ShallowRef<T | null>,
+    width,
+    height,
+  }
+}

package/dist/custom/model/dashboard.types.d.ts

@@ -0,0 +1,45 @@
+import type { ChartWidgetConfig } from '../widgets/chart/chart.types.js';
+export type DashboardConfig = {
+    version: number;
+    groups: DashboardGroupConfig[];
+    widgets: DashboardWidgetConfig[];
+};
+export type DashboardGroupConfig = {
+    id: string;
+    label: string;
+    order: number;
+};
+export type DashboardGroupMoveDirection = 'up' | 'down';
+export type DashboardWidgetMoveDirection = 'up' | 'down';
+export type DashboardWidgetTarget = 'empty' | 'table' | 'chart' | 'kpi_card' | 'pivot_table' | 'gauge_card';
+export type DashboardWidgetSize = 'small' | 'medium' | 'large' | 'wide' | 'full';
+export type WidgetLayout = {
+    size?: DashboardWidgetSize;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number | null;
+    height?: number;
+};
+export type DashboardWidgetConfig = {
+    id: string;
+    group_id: string;
+    label?: string;
+    size?: DashboardWidgetSize;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number | null;
+    order: number;
+    target: DashboardWidgetTarget;
+    chart?: ChartWidgetConfig;
+    table?: unknown;
+    kpi_card?: unknown;
+    pivot_table?: unknown;
+    gauge_card?: unknown;
+    query?: unknown;
+};
+export type DashboardWidgetTableData = {
+    columns: string[];
+    rows: Record<string, unknown>[];
+};
+export declare function normalizeDashboardConfig(config: unknown): DashboardConfig;

package/dist/custom/model/dashboard.types.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeDashboardConfig = normalizeDashboardConfig;
+function normalizeDashboardConfig(config) {
+    const value = isRecord(config) ? config : {};
+    return {
+        version: typeof value.version === 'number' ? value.version : 1,
+        groups: Array.isArray(value.groups) ? value.groups : [],
+        widgets: Array.isArray(value.widgets) ? value.widgets : [],
+    };
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}