@omnitend/dashboard-for-laravel 0.7.0 → 0.8.0

package/dist/types/navigation.d.ts

@@ -10,7 +10,13 @@ export interface NavigationItem {
 export interface NavigationGroup {
     label?: string;
     items: NavigationItem[];
+    /**
+     * Per-group override for the sidebar's `collapsibleGroups` behaviour.
+     * Set to `false` to keep a group permanently expanded (no toggle header)
+     * even when the sidebar has collapsible groups enabled. Defaults to `true`.
+     */
     collapsible?: boolean;
+    /** Reserved for a future explicit initial-open hint; not currently wired. */
     collapsed?: boolean;
     visible?: boolean;
 }

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-06-30T11:46:51.421Z",
+  "generated": "2026-07-04T04:12:03.097Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.6.0"
+    "version": "0.8.0"
   },
   "components": {
     "base": [
@@ -1264,6 +1264,20 @@
             "default": "'/logout'",
             "description": "Logout URL for navbar dropdown"
           },
+          {
+            "name": "collapsibleGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Turn sidebar group headers into accordion toggles that collapse/expand\ntheir items. When off (default), every group is permanently expanded."
+          },
+          {
+            "name": "autoCollapseInactiveGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Only relevant when `collapsibleGroups` is on. `true` (default): only the\nactive-route group starts open and opening one closes the others\n(single-open accordion). `false`: all groups start open, toggled independently."
+          },
           {
             "name": "storageKey",
             "type": "string",
@@ -1409,6 +1423,20 @@
             "required": false,
             "default": "'Dashboard'",
             "description": ""
+          },
+          {
+            "name": "collapsibleGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Turn group headers into accordion toggles that collapse/expand their items.\nWhen off (default), every group is rendered permanently expanded."
+          },
+          {
+            "name": "autoCollapseInactiveGroups",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Only relevant when `collapsibleGroups` is on.\n`true` (default): only the active-route group starts open, and opening one\ngroup closes the others (single-open accordion).\n`false`: all groups start open and toggle independently."
           }
         ],
         "events": [
@@ -1448,6 +1476,10 @@
               {
                 "name": "collapsed",
                 "title": "binding"
+              },
+              {
+                "name": "is-expanded",
+                "title": "binding"
               }
             ]
           }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-06-30T11:46:51.484Z
+> Last updated: 2026-07-04T04:12:03.185Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@inertiajs/vue3": "^2.0.0",
-    "axios": "^1.6.0",
+    "axios": "^1.15.3",
     "vue": "^3.5.13"
   },
   "peerDependenciesMeta": {
@@ -58,7 +58,7 @@
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.22.0",
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "bootstrap-vue-next": "^0.45.6",
     "highlight.js": "^11.11.1",
     "pluralize": "^8.0.0",
@@ -75,8 +75,8 @@
     "@inertiajs/vue3": "^2.2.15",
     "@types/pluralize": "^0.0.33",
     "@vitejs/plugin-vue": "^5.2.4",
-    "@vitest/browser": "^4.0.3",
-    "@vitest/browser-playwright": "^4.0.3",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
     "@vue/test-utils": "^2.4.6",
     "astro": "^5.15.1",
     "bootstrap": "^5.3.8",
@@ -88,7 +88,7 @@
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^30.0.0",
     "vite": "^6.4.1",
-    "vitest": "^4.0.3",
+    "vitest": "^4.1.8",
     "vitest-browser-vue": "^2.0.0",
     "vue-tsc": "^2.2.12"
   },
@@ -107,7 +107,7 @@
   "author": "Omni Tend",
   "repository": {
     "type": "git",
-    "url": "https://github.com/omnitend/dashboard-for-laravel.git"
+    "url": "git+https://github.com/omnitend/dashboard-for-laravel.git"
   },
   "bugs": {
     "url": "https://github.com/omnitend/dashboard-for-laravel/issues"

package/resources/css/theme.scss

@@ -169,7 +169,8 @@ $dashboard-navbar-height: 64px;
     border-bottom-color: $navbar-dark-toggler-border-color;
   }
 
-  .nav-group-label {
+  .nav-group-label,
+  .nav-group-toggle {
     color: $navbar-dark-color;
   }
 
@@ -197,6 +198,66 @@ $dashboard-navbar-height: 64px;
   height: $dashboard-navbar-height;
 }
 
+// ----------------------------------------------------------------------------
+// Toasts
+// ----------------------------------------------------------------------------
+// Bootstrap Vue Next renders toasts with Bootstrap's `.text-bg-{variant}`
+// utility, which fills the whole toast with a saturated colour and white text —
+// loud "candy" blocks that are wrong for a dashboard. Restyle them as a calm,
+// neutral surface with a subtle semantic tint + a coloured left accent rail and
+// progress bar. Colour still signals the toast type, but the bold palette stays
+// where it belongs (actions, badges, selected states).
+
+.toast {
+  overflow: hidden; // clip the bottom progress bar to the rounded corners
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  background-color: $white;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  // BVN wraps each toast in a <span>, which defeats Bootstrap's built-in
+  // `.toast:not(:last-child)` spacing (toasts are no longer direct children of
+  // the container). Add the gap on the toast itself so it doesn't rely on that.
+  margin-bottom: 0.75rem;
+
+  .toast-header {
+    background-color: transparent;
+    border-bottom: 0; // remove the two-tone header/body split
+    padding-bottom: 0.25rem;
+    color: $dark; // dark, high-contrast title
+    font-weight: 600;
+  }
+
+  .toast-body {
+    padding-top: 0.25rem;
+    color: $secondary; // muted message text
+  }
+
+  // Hide the auto-dismiss countdown bar — the ticking animation reads as
+  // stressful/urgent, which is wrong for a passive notification. Auto-dismiss
+  // still works; only its visual indicator is removed.
+  .progress {
+    display: none;
+  }
+
+  // Semantic variants: subtle tinted surface. Overrides the saturated
+  // `.text-bg-*` fill (compound selector wins on specificity); the dark title /
+  // muted body from the base rules above stay.
+  @each $name, $color in (
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info
+  ) {
+    &.text-bg-#{$name} {
+      // !important overrides Bootstrap's `.text-bg-*` helper, which sets a
+      // saturated background-color !important that BVN applies per variant.
+      background-color: mix($color, $white, 8%) !important;
+    }
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Custom Utilities
 // ----------------------------------------------------------------------------

package/resources/js/components/extended/DXDashboard.vue

@@ -7,6 +7,8 @@
       :title="title"
       :collapsed="collapsed"
       :hidden="hidden"
+      :collapsible-groups="collapsibleGroups"
+      :auto-collapse-inactive-groups="autoCollapseInactiveGroups"
       @toggle="toggleSidebar"
     >
       <!-- Dynamically forward all sidebar-* slots by stripping the prefix -->
@@ -82,6 +84,19 @@ interface Props {
   /** Logout URL for navbar dropdown */
   logoutUrl?: string;
 
+  /**
+   * Turn sidebar group headers into accordion toggles that collapse/expand
+   * their items. When off (default), every group is permanently expanded.
+   */
+  collapsibleGroups?: boolean;
+
+  /**
+   * Only relevant when `collapsibleGroups` is on. `true` (default): only the
+   * active-route group starts open and opening one closes the others
+   * (single-open accordion). `false`: all groups start open, toggled independently.
+   */
+  autoCollapseInactiveGroups?: boolean;
+
   /** LocalStorage key for sidebar state persistence */
   storageKey?: string;
 
@@ -98,6 +113,8 @@ const props = withDefaults(defineProps<Props>(), {
   pageTitle: '',
   user: null,
   logoutUrl: '/logout',
+  collapsibleGroups: false,
+  autoCollapseInactiveGroups: true,
   storageKey: 'dashboard-sidebar-hidden',
   dashboardId: '',
 });

package/resources/js/components/extended/DXDashboardSidebar.vue

@@ -22,52 +22,96 @@
 
     <nav class="sidebar-nav p-3">
       <template v-for="(group, groupIndex) in navigation" :key="groupIndex">
-        <div v-if="group.visible !== false" class="nav-group mb-3">
+        <div
+          v-if="group.visible !== false"
+          class="nav-group mb-3"
+          :class="{ 'nav-group-open': isGroupExpanded(groupIndex, group) }"
+        >
+          <!-- Collapsible group header (accordion toggle) -->
+          <button
+            v-if="isGroupToggle(group)"
+            type="button"
+            class="nav-group-toggle text-uppercase small fw-semibold mb-2 px-2"
+            :aria-expanded="isGroupExpanded(groupIndex, group)"
+            :aria-controls="groupItemsId(groupIndex)"
+            @click="toggleGroup(groupIndex)"
+          >
+            <span class="nav-group-toggle-label">{{ group.label }}</span>
+            <svg
+              class="nav-group-chevron"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              aria-hidden="true"
+            >
+              <!-- Wide, square-capped chevron matching Omni Tend's menu headers.
+                   Points down when closed; rotated 180° when the group is open. -->
+              <path
+                d="M11.375 4.8125L7 9.1875L2.625 4.8125"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="square"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Static group label (non-collapsible, expanded sidebar) -->
           <div
-            v-if="group.label && !collapsed"
+            v-else-if="group.label && !collapsed"
             class="nav-group-label text-uppercase small fw-semibold mb-2 px-2"
           >
             {{ group.label }}
           </div>
 
+          <!-- Divider shown in place of the label when the sidebar rail is collapsed -->
           <div v-if="group.label && collapsed" class="nav-group-divider">
             <hr class="my-2 border-secondary" />
           </div>
 
-          <ul class="nav flex-column gap-1">
-            <li v-for="(item, itemIndex) in group.items" :key="itemIndex" class="nav-item">
-              <slot
-                name="link"
-                :item="item"
-                :is-active="isActive(item.url)"
-                :collapsed="collapsed"
-              >
-                <a
-                  :href="item.url"
-                  class="nav-link d-flex align-items-center gap-2 rounded"
-                  :class="{
-                    'active': isActive(item.url),
-                    'justify-content-center': collapsed
-                  }"
+          <div
+            :id="groupItemsId(groupIndex)"
+            class="nav-group-items"
+            :class="{ 'nav-group-items--collapsible': isGroupToggle(group) }"
+            :inert="isGroupExpanded(groupIndex, group) ? undefined : true"
+          >
+            <ul class="nav flex-column gap-1">
+              <li v-for="(item, itemIndex) in group.items" :key="itemIndex" class="nav-item">
+                <slot
+                  name="link"
+                  :item="item"
+                  :is-active="isActive(item.url)"
+                  :collapsed="collapsed"
+                  :is-expanded="isGroupExpanded(groupIndex, group)"
                 >
-                  <component
-                    v-if="item.icon"
-                    :is="item.icon"
-                    class="nav-icon"
-                    style="width: 20px; height: 20px;"
-                  />
-                  <span v-if="!collapsed" class="nav-label">{{ item.label }}</span>
-                  <span
-                    v-if="item.badge && !collapsed"
-                    class="badge ms-auto"
-                    :class="`bg-${item.badgeColor || 'primary'}`"
+                  <a
+                    :href="item.url"
+                    class="nav-link d-flex align-items-center gap-2 rounded"
+                    :class="{
+                      'active': isActive(item.url),
+                      'justify-content-center': collapsed
+                    }"
                   >
-                    {{ item.badge }}
-                  </span>
-                </a>
-              </slot>
-            </li>
-          </ul>
+                    <component
+                      v-if="item.icon"
+                      :is="item.icon"
+                      class="nav-icon"
+                      style="width: 20px; height: 20px;"
+                    />
+                    <span v-if="!collapsed" class="nav-label">{{ item.label }}</span>
+                    <span
+                      v-if="item.badge && !collapsed"
+                      class="badge ms-auto"
+                      :class="`bg-${item.badgeColor || 'primary'}`"
+                    >
+                      {{ item.badge }}
+                    </span>
+                  </a>
+                </slot>
+              </li>
+            </ul>
+          </div>
         </div>
       </template>
     </nav>
@@ -75,8 +119,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch, nextTick } from 'vue';
-import type { Navigation } from '../../types/navigation';
+import { computed, ref, onMounted, watch, nextTick, useId } from 'vue';
+import type { Navigation, NavigationGroup } from '../../types/navigation';
 
 const props = withDefaults(defineProps<{
   navigation: Navigation;
@@ -84,10 +128,24 @@ const props = withDefaults(defineProps<{
   collapsed?: boolean;
   hidden?: boolean;
   title?: string;
+  /**
+   * Turn group headers into accordion toggles that collapse/expand their items.
+   * When off (default), every group is rendered permanently expanded.
+   */
+  collapsibleGroups?: boolean;
+  /**
+   * Only relevant when `collapsibleGroups` is on.
+   * `true` (default): only the active-route group starts open, and opening one
+   * group closes the others (single-open accordion).
+   * `false`: all groups start open and toggle independently.
+   */
+  autoCollapseInactiveGroups?: boolean;
 }>(), {
   collapsed: false,
   hidden: false,
   title: 'Dashboard',
+  collapsibleGroups: false,
+  autoCollapseInactiveGroups: true,
 });
 
 defineEmits<{
@@ -96,14 +154,115 @@ defineEmits<{
 
 const sidebarRef = ref<HTMLElement | null>(null);
 
+const uid = useId();
+const groupItemsId = (index: number): string => `${uid}-nav-group-${index}`;
+
 const brandInitial = computed(() => {
   return props.title.charAt(0).toUpperCase();
 });
 
-const isActive = (url: string): boolean => {
-  // Normalize URLs for comparison (remove trailing slash, lowercase)
-  const normalizeUrl = (u: string) => u.toLowerCase().replace(/\/$/, '');
-  return normalizeUrl(props.currentUrl) === normalizeUrl(url);
+// Normalize URLs for comparison: drop any query string / hash, lowercase, and
+// remove a single trailing slash. Dropping ?query and #hash means an index page
+// carrying filter/pagination params (e.g. `/rotas?page=2`) still matches its
+// `/rotas` nav item.
+const normalizeUrl = (url: string): string =>
+  url.toLowerCase().replace(/[?#].*$/, '').replace(/\/$/, '');
+
+/**
+ * The single best-matching nav item URL for the current route. Prefers an exact
+ * match; otherwise the longest ancestor path, so a detail page like
+ * `/rotas/507` activates the `/rotas` item. Root `/` only matches exactly — it
+ * is a prefix of every path, so it is never treated as an ancestor.
+ * Returns the normalized URL of the winning item, or null if nothing matches.
+ */
+const activeUrl = computed<string | null>(() => {
+  const current = normalizeUrl(props.currentUrl);
+  let best: string | null = null;
+  for (const group of props.navigation) {
+    if (group.visible === false) continue;
+    for (const item of group.items) {
+      if (item.visible === false) continue;
+      const candidate = normalizeUrl(item.url);
+      const matches =
+        candidate === current ||
+        (candidate !== '' && current.startsWith(candidate + '/'));
+      if (matches && (best === null || candidate.length > best.length)) {
+        best = candidate;
+      }
+    }
+  }
+  return best;
+});
+
+const isActive = (url: string): boolean =>
+  activeUrl.value !== null && normalizeUrl(url) === activeUrl.value;
+
+// Index of the group containing the active route (-1 if none).
+const activeGroupIndex = computed(() =>
+  props.navigation.findIndex(
+    (group) => group.visible !== false && group.items.some((item) => isActive(item.url))
+  )
+);
+
+// A group renders a clickable toggle header only when collapsible groups are
+// enabled, the sidebar rail is expanded, the group has a label, and the group
+// hasn't individually opted out via `collapsible: false`.
+const isGroupToggle = (group: NavigationGroup): boolean =>
+  props.collapsibleGroups &&
+  !props.collapsed &&
+  !!group.label &&
+  group.collapsible !== false;
+
+// Whether a group's items are currently shown. Rail-collapsed sidebars always
+// show items (as icons); non-collapsible groups are always expanded.
+const isGroupExpanded = (index: number, group: NavigationGroup): boolean => {
+  if (props.collapsed) return true;
+  if (!isGroupToggle(group)) return true;
+  return openGroups.value.has(index);
+};
+
+const openGroups = ref<Set<number>>(new Set());
+
+const computeInitialOpenGroups = (): Set<number> => {
+  const next = new Set<number>();
+  if (props.autoCollapseInactiveGroups) {
+    if (activeGroupIndex.value >= 0) next.add(activeGroupIndex.value);
+  } else {
+    props.navigation.forEach((group, index) => {
+      if (group.visible !== false && group.collapsible !== false) next.add(index);
+    });
+  }
+  return next;
+};
+
+// Initialise synchronously so the active group is already open on first paint —
+// no post-mount height measurement, so no open/close flicker on load.
+openGroups.value = computeInitialOpenGroups();
+
+const toggleGroup = (index: number): void => {
+  const wasOpen = openGroups.value.has(index);
+  if (props.autoCollapseInactiveGroups) {
+    openGroups.value = wasOpen ? new Set() : new Set([index]);
+    return;
+  }
+  const next = new Set(openGroups.value);
+  if (wasOpen) next.delete(index);
+  else next.add(index);
+  openGroups.value = next;
+};
+
+// Ensure the active-route group is open. In single-open mode this switches to
+// it (closing others); otherwise it just adds it to the open set. No-op when
+// there is no active group (e.g. a detail page not present in the nav).
+const openActiveGroup = (): void => {
+  if (!props.collapsibleGroups || activeGroupIndex.value < 0) return;
+  if (props.autoCollapseInactiveGroups) {
+    openGroups.value = new Set([activeGroupIndex.value]);
+  } else {
+    const next = new Set(openGroups.value);
+    next.add(activeGroupIndex.value);
+    openGroups.value = next;
+  }
 };
 
 const scrollToActiveItem = async (smooth = false) => {
@@ -131,10 +290,19 @@ onMounted(() => {
   scrollToActiveItem(false);
 });
 
-// Watch for URL changes (client-side routing) and scroll smoothly
+// Client-side route change: open the newly active group, then scroll to it.
 watch(() => props.currentUrl, () => {
+  openActiveGroup();
   scrollToActiveItem(true);
 });
+
+// The active group can change without a currentUrl change — e.g. navigation
+// arrives/repopulates after mount (async data, permission gating), so the active
+// route resolves late. Watch the derived index (not the array identity, which
+// can churn on every parent re-render) and open the active group when it lands.
+watch(activeGroupIndex, () => {
+  openActiveGroup();
+});
 </script>
 
 <style scoped>
@@ -186,6 +354,99 @@ watch(() => props.currentUrl, () => {
   letter-spacing: 0.5px;
 }
 
+/* Collapsible group toggle header */
+.nav-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  /* Comfortable, ergonomic click target (matches the nav links' vertical
+     rhythm). `px-2` on the element sets only left/right padding, so vertical
+     padding here does not fight Bootstrap's utility `!important`. */
+  min-height: 2.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+  background: transparent;
+  border: 0;
+  /* No `color` here on purpose: theme.scss sets `.nav-group-toggle` to
+     $navbar-dark-color so the toggle matches the static .nav-group-label.
+     A scoped `color` would override that (equal specificity, later source order). */
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--bs-border-radius, 0.375rem);
+  transition: background-color 0.2s ease;
+}
+
+.nav-group-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.nav-group-toggle:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+.nav-group-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nav-group-chevron {
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.nav-group-open > .nav-group-toggle .nav-group-chevron {
+  transform: rotate(180deg);
+}
+
+/*
+ * Grid-based collapse: animate rows 0fr -> 1fr so the container height follows
+ * its content with no JS measurement. The active group renders with
+ * `.nav-group-open` already applied, so its open state paints without a
+ * transition (no load flicker). Opacity fades the items in/out alongside the
+ * height change for a smoother reveal.
+ *
+ * This mechanism is applied ONLY to groups that actually collapse
+ * (`--collapsible`). A group that never collapses (feature off, rail-collapsed,
+ * or `collapsible: false`) keeps a plain wrapper, so its `overflow: hidden`
+ * never clips focus outlines / badge shadows for consumers who didn't opt in.
+ */
+.nav-group-items--collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
+}
+
+.nav-group-open > .nav-group-items--collapsible {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.nav-group-items--collapsible > .nav {
+  overflow: hidden;
+  min-height: 0;
+  /*
+   * Bootstrap's `.nav` sets `flex-wrap: wrap`. While the grid row is collapsing
+   * (height near 0), a wrapping flex-column can't stack its items in the tiny
+   * height and wraps them into side-by-side columns instead — a visible reflow
+   * flash. `nowrap` keeps them stacked and simply clipped by `overflow: hidden`.
+   */
+  flex-wrap: nowrap;
+}
+
+/* Respect reduced-motion: collapse instantly, no fade. */
+@media (prefers-reduced-motion: reduce) {
+  .nav-group-items--collapsible,
+  .nav-group-toggle {
+    transition: none;
+  }
+}
+
 :deep(.nav-link) {
   padding: 0.625rem 0.75rem;
   transition: all 0.2s ease;

package/resources/js/types/navigation.ts

@@ -11,7 +11,13 @@ export interface NavigationItem {
 export interface NavigationGroup {
   label?: string;
   items: NavigationItem[];
+  /**
+   * Per-group override for the sidebar's `collapsibleGroups` behaviour.
+   * Set to `false` to keep a group permanently expanded (no toggle header)
+   * even when the sidebar has collapsible groups enabled. Defaults to `true`.
+   */
   collapsible?: boolean;
+  /** Reserved for a future explicit initial-open hint; not currently wired. */
   collapsed?: boolean;
   visible?: boolean;
 }