@omnitend/dashboard-for-laravel 0.11.0 → 0.13.1

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-04T13:10:37.448Z",
+  "generated": "2026-07-04T17:33:54.873Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.11.0"
+    "version": "0.13.1"
   },
   "components": {
     "base": [
@@ -1197,6 +1197,61 @@
       }
     ],
     "extended": [
+      {
+        "name": "DXBarChart",
+        "category": "extended",
+        "filePath": "resources/js/components/charts/DXBarChart.vue",
+        "description": "A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the Bootstrap palette applied and dashboard-friendly defaults (no x gridlines, formatted value ticks, responsive, legend hidden for a single series). Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "props": [
+          {
+            "name": "labels",
+            "type": "Array",
+            "required": true,
+            "description": "X-axis category labels."
+          },
+          {
+            "name": "datasets",
+            "type": "Array",
+            "required": true,
+            "description": "Chart.js datasets. Colours are themed when a dataset omits them."
+          },
+          {
+            "name": "options",
+            "type": "Record",
+            "required": false,
+            "description": "Chart.js options; deep-merged over the themed defaults."
+          },
+          {
+            "name": "valueFormat",
+            "type": "ChartValueFormat",
+            "required": false,
+            "description": "Format value-axis ticks and tooltips."
+          },
+          {
+            "name": "currencySymbol",
+            "type": "string",
+            "required": false,
+            "default": "\"£\"",
+            "description": "Currency symbol for valueFormat: \"currency\" (default \"£\")."
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "required": false,
+            "description": "Locale for number formatting."
+          },
+          {
+            "name": "showLegend",
+            "type": "boolean",
+            "required": false,
+            "default": "undefined",
+            "description": "Show the legend (default: only when there is more than one dataset)."
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXBasicForm",
         "category": "extended",
@@ -1562,6 +1617,67 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXDoughnutChart",
+        "category": "extended",
+        "filePath": "resources/js/components/charts/DXDoughnutChart.vue",
+        "description": "A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one Bootstrap palette colour per slice and dashboard-friendly defaults. Pass `labels` + either `data` (a number array) or full `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "props": [
+          {
+            "name": "labels",
+            "type": "Array",
+            "required": true,
+            "description": "Slice labels."
+          },
+          {
+            "name": "data",
+            "type": "Array",
+            "required": false,
+            "description": "Convenience: a single number array (one value per label)."
+          },
+          {
+            "name": "datasets",
+            "type": "Array",
+            "required": false,
+            "description": "Full Chart.js datasets (alternative to `data`)."
+          },
+          {
+            "name": "options",
+            "type": "Record",
+            "required": false,
+            "description": "Chart.js options; deep-merged over the themed defaults."
+          },
+          {
+            "name": "valueFormat",
+            "type": "ChartValueFormat",
+            "required": false,
+            "description": "Format tooltip values."
+          },
+          {
+            "name": "currencySymbol",
+            "type": "string",
+            "required": false,
+            "default": "\"£\"",
+            "description": "Currency symbol for valueFormat: \"currency\" (default \"£\")."
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "required": false,
+            "description": "Locale for number formatting."
+          },
+          {
+            "name": "showLegend",
+            "type": "boolean",
+            "required": false,
+            "default": "undefined",
+            "description": "Show the legend (default: true — slices need identifying)."
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXField",
         "category": "extended",
@@ -1924,6 +2040,61 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXLineChart",
+        "category": "extended",
+        "filePath": "resources/js/components/charts/DXLineChart.vue",
+        "description": "A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the Bootstrap palette applied (themed stroke + translucent fill, smoothed line) and dashboard-friendly defaults. Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "props": [
+          {
+            "name": "labels",
+            "type": "Array",
+            "required": true,
+            "description": "X-axis category labels."
+          },
+          {
+            "name": "datasets",
+            "type": "Array",
+            "required": true,
+            "description": "Chart.js datasets. Colours are themed when a dataset omits them."
+          },
+          {
+            "name": "options",
+            "type": "Record",
+            "required": false,
+            "description": "Chart.js options; deep-merged over the themed defaults."
+          },
+          {
+            "name": "valueFormat",
+            "type": "ChartValueFormat",
+            "required": false,
+            "description": "Format value-axis ticks and tooltips."
+          },
+          {
+            "name": "currencySymbol",
+            "type": "string",
+            "required": false,
+            "default": "\"£\"",
+            "description": "Currency symbol for valueFormat: \"currency\" (default \"£\")."
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "required": false,
+            "description": "Locale for number formatting."
+          },
+          {
+            "name": "showLegend",
+            "type": "boolean",
+            "required": false,
+            "default": "undefined",
+            "description": "Show the legend (default: only when there is more than one dataset)."
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXRepeater",
         "category": "extended",
@@ -2006,6 +2177,126 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXStatCard",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXStatCard.vue",
+        "description": "A KPI / stat tile: a big formatted value with a title, optional subtitle, an optional up/down delta badge (auto-coloured + arrowed) versus a comparison, and an optional trend/sparkline slot. Themed with Bootstrap variables.",
+        "props": [
+          {
+            "name": "title",
+            "type": "string",
+            "required": true,
+            "description": "Metric label, e.g. \"Revenue\"."
+          },
+          {
+            "name": "subtitle",
+            "type": "string",
+            "required": false,
+            "description": "Optional secondary line under the title, e.g. \"This week\"."
+          },
+          {
+            "name": "value",
+            "type": "union",
+            "required": true,
+            "description": "The metric value. Numbers are formatted per `format`; strings pass through."
+          },
+          {
+            "name": "format",
+            "type": "StatFormat",
+            "required": false,
+            "default": "\"number\"",
+            "description": "How to format a numeric `value` (default: plain number with grouping)."
+          },
+          {
+            "name": "currencySymbol",
+            "type": "string",
+            "required": false,
+            "default": "\"£\"",
+            "description": "Currency symbol for `format: \"currency\"` (default \"£\")."
+          },
+          {
+            "name": "precision",
+            "type": "number",
+            "required": false,
+            "description": "Decimal places (default: 2 for currency, 0 otherwise)."
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "required": false,
+            "description": "Locale for number grouping/formatting (default: the runtime's)."
+          },
+          {
+            "name": "delta",
+            "type": "number",
+            "required": false,
+            "description": "Change versus a comparison period. Its sign drives the arrow/colour."
+          },
+          {
+            "name": "deltaFormat",
+            "type": "StatFormat",
+            "required": false,
+            "default": "\"percent\"",
+            "description": "How to format the delta (default \"percent\")."
+          },
+          {
+            "name": "deltaDirection",
+            "type": "DeltaDirection",
+            "required": false,
+            "description": "Force the delta direction instead of deriving it from `delta`'s sign."
+          },
+          {
+            "name": "deltaLabel",
+            "type": "string",
+            "required": false,
+            "description": "Caption beside the delta, e.g. \"vs last week\"."
+          },
+          {
+            "name": "invertDelta",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Invert the delta colour: by default an up delta is positive (success/green)\nand a down delta negative (danger/red). Set for metrics where down is good\n(costs, bounce rate, …)."
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "icon",
+            "description": "Optional icon/visual in the top-right of the card.",
+            "bindings": []
+          },
+          {
+            "name": "value",
+            "description": "Override the rendered value.",
+            "bindings": [
+              {
+                "title": "binding",
+                "type": {
+                  "name": "string"
+                },
+                "name": "formatted",
+                "description": "The value formatted per `format`."
+              },
+              {
+                "title": "binding",
+                "type": {
+                  "name": "string | number"
+                },
+                "name": "value",
+                "description": "The raw value prop."
+              }
+            ]
+          },
+          {
+            "name": "trend",
+            "description": "Trend visual (e.g. a sparkline) shown in the card footer.",
+            "bindings": []
+          }
+        ],
+        "methods": []
+      },
       {
         "name": "DXTable",
         "category": "extended",
@@ -2146,8 +2437,8 @@
             "name": "striped",
             "type": "boolean",
             "required": false,
-            "default": "true",
-            "description": "Striped rows"
+            "default": "false",
+            "description": "Striped (banded) rows. Off by default — banding adds little on short\n tables and can read as noise; opt in with `:striped=\"true\"`."
           },
           {
             "name": "hover",
@@ -2215,6 +2506,12 @@
             "required": false,
             "description": "API endpoint pattern for updates (e.g., \"/api/products/:id\")"
           },
+          {
+            "name": "showUrl",
+            "type": "string",
+            "required": false,
+            "description": "API endpoint pattern to fetch the FULL record for the edit modal\n(e.g., \"/api/products/:id\"). When set, opening a row seeds the form from\nthis fetch (shown with a loading state) instead of the thin list row —\nuse when the list payload omits fields the edit form needs (notes, nested\nrelations, repeater rows, …). The response is unwrapped from `data.data`\n(Laravel API Resource) or used as-is."
+          },
           {
             "name": "deleteUrl",
             "type": "string",
@@ -2501,8 +2798,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 66,
+    "totalComponents": 70,
     "baseComponents": 57,
-    "extendedComponents": 9
+    "extendedComponents": 13
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-04T13:10:37.517Z
+> Last updated: 2026-07-04T17:33:54.935Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -72,12 +72,14 @@ This file provides a complete map of all available documentation for AI agents a
 
 ### Extended
 
+- [Charts](/components/extended/DXChart): Thin, themed wrappers around [Chart.js](https://www.chartjs.org/) via
 - [DXDashboard](/components/extended/DXDashboard): Complete dashboard layout component that combines sidebar navigation, top navbar, and content area. 
 - [DXDashboardNavbar](/components/extended/DXDashboardNavbar): A responsive top navigation bar component for Laravel dashboards with user menu, search functionalit
 - [DXDashboardSidebar](/components/extended/DXDashboardSidebar): A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups
 - [DXField](/components/extended/DXField): The single-field renderer that powers `DXForm` and
 - [DXForm](/components/extended/DXForm): The canonical form renderer. Drive it with field definitions; add `tabs` when
 - [DXRepeater](/components/extended/DXRepeater): A repeatable sub-form (field array) primitive for nested, dynamic collections —
+- [DXStatCard](/components/extended/DXStatCard): A KPI / stat tile: a big formatted value with a title, optional subtitle, an
 - [DXTable](/components/extended/DXTable): A comprehensive data table component with built-in pagination, sorting, filtering, and CRUD operatio
 
 ### Examples
@@ -97,4 +99,4 @@ This file provides a complete map of all available documentation for AI agents a
 
 ---
 
-**Total Pages**: 73
+**Total Pages**: 75

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 66 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 67 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -81,7 +81,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (9 components)
+## Extended Components (10 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -93,6 +93,7 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
 - [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
+- [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
 
 ## Composables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.11.0",
+  "version": "0.13.1",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -47,7 +47,9 @@
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0",
     "axios": "^1.15.3",
-    "vue": "^3.5.13"
+    "chart.js": "^4.4.0",
+    "vue": "^3.5.13",
+    "vue-chartjs": "^5.3.0"
   },
   "peerDependenciesMeta": {
     "axios": {
@@ -55,6 +57,12 @@
     },
     "bootstrap-vue-next": {
       "optional": true
+    },
+    "chart.js": {
+      "optional": true
+    },
+    "vue-chartjs": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -80,6 +88,7 @@
     "@vue/test-utils": "^2.4.6",
     "astro": "^5.15.1",
     "bootstrap": "^5.3.8",
+    "chart.js": "^4.5.1",
     "happy-dom": "^20.0.8",
     "pagefind": "^1.4.0",
     "playwright": "^1.56.1",
@@ -90,6 +99,7 @@
     "vite": "^6.4.1",
     "vitest": "^4.1.8",
     "vitest-browser-vue": "^2.0.0",
+    "vue-chartjs": "^5.3.3",
     "vue-tsc": "^2.2.12"
   },
   "keywords": [

package/resources/js/components/charts/DXBarChart.vue

@@ -0,0 +1,79 @@
+<!--
+  @component
+  A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the
+  Bootstrap palette applied and dashboard-friendly defaults (no x gridlines,
+  formatted value ticks, responsive, legend hidden for a single series). Pass
+  `labels` + `datasets`; `options` deep-merges over the defaults.
+
+  Requires the optional peer deps `chart.js` and `vue-chartjs`.
+-->
+<template>
+  <div class="dx-chart">
+    <Bar :data="chartData" :options="mergedOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Bar } from "vue-chartjs";
+import {
+  registerCharts,
+  baseOptions,
+  applyPalette,
+  mergeOptions,
+  type ChartValueFormat,
+} from "./chartTheme";
+
+registerCharts();
+
+interface Props {
+  /** X-axis category labels. */
+  labels: string[];
+  /** Chart.js datasets. Colours are themed when a dataset omits them. */
+  datasets: any[];
+  /** Chart.js options; deep-merged over the themed defaults. */
+  options?: Record<string, any>;
+  /** Format value-axis ticks and tooltips. */
+  valueFormat?: ChartValueFormat;
+  /** Currency symbol for valueFormat: "currency" (default "£"). */
+  currencySymbol?: string;
+  /** Locale for number formatting. */
+  locale?: string;
+  /** Show the legend (default: only when there is more than one dataset). */
+  showLegend?: boolean;
+}
+
+// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
+// `?? datasets.length > 1` default can actually fire when it isn't passed.
+const props = withDefaults(defineProps<Props>(), {
+  currencySymbol: "£",
+  showLegend: undefined,
+});
+
+const chartData = computed(() => ({
+  labels: props.labels,
+  datasets: applyPalette(props.datasets, "bar", props.labels.length),
+}));
+
+const mergedOptions = computed(() =>
+  mergeOptions(
+    baseOptions({
+      valueFormat: props.valueFormat,
+      currencySymbol: props.currencySymbol,
+      locale: props.locale,
+      showLegend: props.showLegend ?? props.datasets.length > 1,
+      hasValueAxis: true,
+    }),
+    props.options ?? {},
+  ),
+);
+</script>
+
+<style scoped>
+.dx-chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+}
+</style>

package/resources/js/components/charts/DXDoughnutChart.vue

@@ -0,0 +1,85 @@
+<!--
+  @component
+  A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one
+  Bootstrap palette colour per slice and dashboard-friendly defaults. Pass
+  `labels` + either `data` (a number array) or full `datasets`; `options`
+  deep-merges over the defaults.
+
+  Requires the optional peer deps `chart.js` and `vue-chartjs`.
+-->
+<template>
+  <div class="dx-chart">
+    <Doughnut :data="chartData" :options="mergedOptions" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Doughnut } from "vue-chartjs";
+import {
+  registerCharts,
+  baseOptions,
+  applyPalette,
+  mergeOptions,
+  type ChartValueFormat,
+} from "./chartTheme";
+
+registerCharts();
+
+interface Props {
+  /** Slice labels. */
+  labels: string[];
+  /** Convenience: a single number array (one value per label). */
+  data?: number[];
+  /** Full Chart.js datasets (alternative to `data`). */
+  datasets?: any[];
+  /** Chart.js options; deep-merged over the themed defaults. */
+  options?: Record<string, any>;
+  /** Format tooltip values. */
+  valueFormat?: ChartValueFormat;
+  /** Currency symbol for valueFormat: "currency" (default "£"). */
+  currencySymbol?: string;
+  /** Locale for number formatting. */
+  locale?: string;
+  /** Show the legend (default: true — slices need identifying). */
+  showLegend?: boolean;
+}
+
+// `showLegend` defaults to `undefined` (not Vue's Boolean-cast `false`) so the
+// `?? true` default can actually fire when it isn't passed.
+const props = withDefaults(defineProps<Props>(), {
+  currencySymbol: "£",
+  showLegend: undefined,
+});
+
+const resolvedDatasets = computed(() =>
+  props.datasets ?? [{ data: props.data ?? [] }],
+);
+
+const chartData = computed(() => ({
+  labels: props.labels,
+  datasets: applyPalette(resolvedDatasets.value, "doughnut", props.labels.length),
+}));
+
+const mergedOptions = computed(() =>
+  mergeOptions(
+    baseOptions({
+      valueFormat: props.valueFormat,
+      currencySymbol: props.currencySymbol,
+      locale: props.locale,
+      showLegend: props.showLegend ?? true,
+      hasValueAxis: false,
+    }),
+    props.options ?? {},
+  ),
+);
+</script>
+
+<style scoped>
+.dx-chart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+}
+</style>