@drax/dashboard-vue 2.7.0 → 2.9.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.0",
+  "version": "2.9.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@drax/crud-front": "^2.0.0",
-    "@drax/crud-share": "^2.4.0",
-    "@drax/dashboard-front": "^2.6.0"
+    "@drax/crud-share": "^2.8.0",
+    "@drax/dashboard-front": "^2.8.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -46,5 +46,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "6914eb5bfd532fb5e510b95c7d17b5b2ada8b07d"
+  "gitHead": "2bc9b59a45c762bd32403dce14db2693be34dcc7"
 }

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -1,31 +1,108 @@
 <script setup lang="ts">
-import { ref, watch,computed, type PropType } from 'vue';
-import type { IDashboardCard } from "@drax/dashboard-share";
+import {ref, watch, computed, type PropType} from 'vue';
+import type {IDashboardCard} from "@drax/dashboard-share";
 import {useEntityStore} from "@drax/crud-vue";
+import type {
+  IDraxFieldFilter,
+  IEntityCrud,
+  IEntityCrudFieldTypes,
+  IEntityCrudFilter,
+  IEntityCrudFilterOperators
+} from "@drax/crud-share";
+import {useI18n} from "vue-i18n"
+import CrudFormField from "@drax/crud-vue/src/components/CrudFormField.vue";
+import {useFilterIcon} from "@drax/crud-vue";
 
 const props = defineProps({
-  modelValue: { type: Object as PropType<IDashboardCard>, required: true }
+  modelValue: {type: Object as PropType<IDashboardCard>, required: true}
 });
+const {filterIcon} = useFilterIcon()
+const {t, te} = useI18n()
 
 const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
 
 // Create a local reactive copy
 const form = ref<IDashboardCard>(JSON.parse(JSON.stringify(props.modelValue)));
 
+const entityStore = useEntityStore();
+
+const entitySelected = computed<IEntityCrud>(() => {
+  return entityStore.entities.find((entity: any) => entity.name === form.value.entity)
+})
+
+const entityField = computed(() => {
+  return (fieldName: string) => {
+    if(!entitySelected.value){
+      return null
+    }
+    return entitySelected.value.fields.find(f => f.name === fieldName)
+  }
+})
+
+
+const entities = computed(() => {
+  return entityStore.entities.map((entity: any) => entity.name)
+})
+
+const columns = computed(() => {
+  return entitySelected.value ? entitySelected.value.headers.map((h: any) => ({title: h.title, value: h.key})) : []
+})
+
+
+const filters = ref<IEntityCrudFilter[]>(prepareFilters(form.value.filters));
+
+function prepareFilters(filters: IDraxFieldFilter[] = []): IEntityCrudFilter[] {
+
+  return filters.map((filter: IDraxFieldFilter) => {
+    let theField = entityField.value(filter.field)
+
+    let value = filter.value
+    if(value === 'true'){
+      value = true
+    }
+    if(value === 'false'){
+      value = false
+    }
+
+    return {
+      name: filter.field,
+      operator: filter.operator as IEntityCrudFilterOperators,
+      value: value,
+      type: theField?.type || 'string',
+      label: theField?.label || '',
+      default: '',
+      ref: theField?.ref || '',
+      refDisplay: theField?.refDisplay || '',
+      enum: theField?.enum || []
+    }
+
+  })
+}
+
 watch(() => props.modelValue, (newVal) => {
   form.value = JSON.parse(JSON.stringify(newVal));
-}, { deep: true });
+  ensureStructure();
+}, {deep: true});
 
 // Ensure nested objects exist to avoid v-model errors
 const ensureStructure = () => {
-    if (!form.value.layout) form.value.layout = { cols: 12, sm: 12, md: 12, lg: 12, height: 450, cardVariant: 'outlined' };
-    if (!form.value.groupBy) form.value.groupBy = { fields: [], dateFormat: 'day', render: 'pie' };
-    if (!form.value.paginate) form.value.paginate = { columns: [], orderBy: '', order: '' };
+  if (!form.value.layout) form.value.layout = {cols: 12, sm: 12, md: 12, lg: 12, height: 450, cardVariant: 'elevated'};
+  if (!form.value.groupBy) form.value.groupBy = {fields: [], dateFormat: 'day', render: 'pie'};
+  if (!form.value.paginate) form.value.paginate = {columns: [], orderBy: '', order: ''};
+  if (!form.value.filters) form.value.filters = [];
 };
 ensureStructure();
 
 const save = () => {
-  emit('update:modelValue', form.value);
+  const payload = form.value
+  payload.filters = filters.value
+      .filter((filter: IEntityCrudFilter) => filter.name && filter.operator)
+      .map((filter: IEntityCrudFilter) => ({
+        field: filter.name,
+        operator: filter.operator as string,
+        value: filter.value == null ? '' : String(filter.value)
+      }))
+  emit('update:modelValue', payload);
   emit('save');
 };
 
@@ -33,29 +110,105 @@ const cancel = () => {
   emit('cancel');
 };
 
-const entities = computed(() => {
-  const dashboardStore = useEntityStore();
-  return dashboardStore.entities.map((entity: any) => entity.name)
-})
-
-const columns = computed(() => {
-  const dashboardStore = useEntityStore();
-  const entity =  dashboardStore.entities.find((entity: any) => entity.name === form.value.entity)
-  return entity ? entity.headers.map((h:any) => ({title: h.title, value: h.key}) ) : []
-})
 
-function onEntityChange(){
-  console.log('entity change',form.value)
-  if(form.value){
-    if(form.value.paginate){
+function onEntityChange() {
+  if (form.value) {
+    if (form.value.paginate) {
       form.value.paginate.columns = []
     }
-    if(form.value.groupBy){
+    if (form.value.groupBy) {
       form.value.groupBy.fields = []
     }
   }
 }
 
+const fieldI18n = computed(() => {
+  return (field: IEntityCrudFilter) => {
+    return te(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) ? t(entitySelected.value?.name?.toLowerCase() + ".field." + field.name) : field.label
+  }
+})
+
+const selectableFields = computed(() => {
+  return entitySelected.value ?
+      entitySelected.value.fields
+          .filter((f: any) => !['fullFile', 'object', 'array.object'].includes(f.type))
+          .map((f: any) => ({title: fieldI18n.value(f), value: f.name}))
+      : []
+})
+
+const dynamicFilter = computed(() => {
+  return (index: number) => {
+    return filters.value[index]
+  }
+})
+
+const operations = [
+  {title: t('operation.equals'), value: 'eq'},
+  {title: t('operation.notEquals'), value: 'ne'},
+  {title: t('operation.contains'), value: 'like'},
+  {title: t('operation.greaterThan'), value: 'gt'},
+  {title: t('operation.lessThan'), value: 'lt'},
+  {title: t('operation.greaterThanOrEqual'), value: 'gte'},
+  {title: t('operation.lessThanOrEqual'), value: 'lte'},
+]
+
+function removeFilter(index: number) {
+  if (filters.value) {
+    filters.value.splice(index, 1)
+  }
+}
+
+function addFilter() {
+  const filter: IEntityCrudFilter = {
+    default: undefined,
+    label: "",
+    name: '',
+    operator: 'eq',
+    type: 'string',
+    permission: '',
+    value: ''
+  }
+  if (filters.value) {
+    filters.value.push(filter)
+  }
+}
+
+function normalizeFieldType(type: string): IEntityCrudFieldTypes {
+  if (type === 'array.ref') return 'ref';
+  if (type === 'array.string') return 'string';
+  if (type === 'longString') return 'string';
+  if (type === 'array.number') return 'number';
+  if (type === 'array.enum') return 'enum';
+  return type as IEntityCrudFieldTypes;
+}
+
+function onUpdateField(index: number, val: string) {
+  const field = entitySelected.value.fields.find((e: any) => e.name === val)
+  let filter = dynamicFilter.value(index)
+  if (!filter) {
+    return
+  }
+  filter.value = null
+  if (!field) return
+
+  if (field.ref) {
+    filter.ref = field.ref
+  }
+  if (field.refDisplay) {
+    filter.refDisplay = field.refDisplay
+  }
+  if (field.enum) {
+    filter.enum = field.enum
+  }
+  if (field.type) {
+    filter.type = normalizeFieldType(field.type)
+    if(field.type === 'boolean'){
+      filter.value = false
+    }
+  }
+}
+
+
 </script>
 
 <template>
@@ -69,12 +222,13 @@ function onEntityChange(){
 
     <v-card-text class="pt-4 flex-grow-1 overflow-y-auto">
       <v-form @submit.prevent>
-        <v-row dense>
+        <v-row v-if="form" dense>
           <!-- Base Config -->
           <v-col cols="12" md="12">
-            <v-text-field v-model="form.title" label="Título de la tarjeta" variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-text-field>
+            <v-text-field v-model="form.title" label="Título de la tarjeta" variant="outlined" density="compact"
+                          hide-details="auto" class="mb-3"></v-text-field>
           </v-col>
-          <v-col cols="12" md="6" lg="4">
+          <v-col cols="12" md="6" lg="6">
             <v-select :items="entities"
                       v-model="form.entity"
                       label="Entidad (ej. User, Country)"
@@ -86,56 +240,134 @@ function onEntityChange(){
                       @update:modelValue="onEntityChange"
             ></v-select>
           </v-col>
-          <v-col cols="12" md="6" lg="4">
-            <v-select v-model="form.type" :items="['groupBy' , 'paginate']" label="Tipo de tarjeta" variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-select>
+          <v-col cols="12" md="6" lg="6">
+            <v-select v-model="form.type" :items="['groupBy' , 'paginate']" label="Tipo de tarjeta" variant="outlined"
+                      density="compact" hide-details="auto" class="mb-3"></v-select>
+          </v-col>
+
+          <v-col cols="12" md="6" lg="6">
+            <v-select v-model="form.layout!.cardVariant" :items="['elevated', 'outlined',  'flat','text','tonal','plain']" label="Tipo de tarjeta" variant="outlined"
+                      density="compact" hide-details="auto" class="mb-3"></v-select>
           </v-col>
 
-          <v-col cols="12" md="6" lg="4">
-            <v-text-field v-if="form.layout" v-model="form.layout!.height" label="Altura" variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-text-field>
+
+          <v-col cols="12" md="6" lg="6">
+            <v-text-field v-if="form.layout" v-model="form.layout!.height" label="Altura" variant="outlined"
+                          density="compact" hide-details="auto" class="mb-3"></v-text-field>
           </v-col>
 
+
+          <v-divider class="my-2 w-100"></v-divider>
+          <!-- Filters HERE -->
+          <v-row dense class="mt-4">
+            <v-col v-for="(filter,index) in filters"
+                   :key="filter.name"
+                   cols="12"
+            >
+              <v-row>
+                <v-col cols="12" sm="4">
+                  <v-select
+                      :items="selectableFields"
+                      v-model="dynamicFilter(index)!.name"
+                      :label="t('crud.field')"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                      @update:modelValue="(v:string) => onUpdateField(index, v)"
+                  />
+                </v-col>
+                <v-col cols="12" sm="3">
+                  <v-select
+                      :items="operations"
+                      v-model="dynamicFilter(index)!.operator"
+                      :label="t('crud.operator')"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                  />
+                </v-col>
+                <v-col cols="12" sm="4">
+                  <crud-form-field
+                      v-if="entitySelected"
+                      :field="filter"
+                      :entity="entitySelected"
+                      v-model="dynamicFilter(index)!.value"
+                      :clearable="true"
+                      density="compact"
+                      variant="outlined"
+                      :prepend-inner-icon="filterIcon(filter)"
+                      hide-details
+                  />
+                </v-col>
+                <v-col cols="12" sm="1">
+                  <v-btn @click="removeFilter(index)"
+                         icon="mdi-delete"
+                         class="mr-1"
+                         variant="text"
+                         color="red"
+                  >
+                  </v-btn>
+                </v-col>
+              </v-row>
+
+
+            </v-col>
+
+            <v-col cols="12">
+              <v-btn small variant="outlined" color="primary" @click="addFilter">+ {{ t('action.addFilter') }}</v-btn>
+            </v-col>
+
+          </v-row>
+
           <v-divider class="my-2 w-100" v-if="form.type"></v-divider>
 
           <!-- Type specific config -->
           <template v-if="form.type === 'paginate'">
             <v-col cols="12">
-               <div class="text-subtitle-2 mb-2 text-primary d-flex align-center"><v-icon icon="mdi-table" size="small" class="mr-1"></v-icon> Paginate</div>
+              <div class="text-subtitle-2 mb-2 text-primary d-flex align-center">
+                <v-icon icon="mdi-table" size="small" class="mr-1"></v-icon>
+                Paginate
+              </div>
             </v-col>
             <v-col cols="12">
-              <v-select  item-title="title"
-                         item-value="value"
-                         :items="columns"
-                         v-model="form.paginate!.columns"
-                         label="Columnas (presiona enter)"
-                         multiple chips variant="outlined"
-                         density="compact"
-                         hide-details="auto"
-                         class="mb-3">
+              <v-select item-title="title"
+                        item-value="value"
+                        :items="columns"
+                        v-model="form.paginate!.columns"
+                        label="Columnas (presiona enter)"
+                        multiple chips variant="outlined"
+                        density="compact"
+                        hide-details="auto"
+                        class="mb-3">
 
               </v-select>
             </v-col>
             <v-col cols="12" md="6">
-               <v-select
-                   item-title="title"
-                   item-value="value"
-                   :items="columns"
-                   v-model="form.paginate!.orderBy"
-                   label="Ordenar por campo"
-                   variant="outlined"
-                   density="compact"
-                   hide-details="auto"
-                   class="mb-3"
-                   clearable
-               ></v-select>
+              <v-select
+                  item-title="title"
+                  item-value="value"
+                  :items="columns"
+                  v-model="form.paginate!.orderBy"
+                  label="Ordenar por campo"
+                  variant="outlined"
+                  density="compact"
+                  hide-details="auto"
+                  class="mb-3"
+                  clearable
+              ></v-select>
             </v-col>
             <v-col cols="12" md="6">
-               <v-select v-model="form.paginate!.order" clearable :items="['asc', 'desc']" label="Dirección de orden" variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-select>
+              <v-select v-model="form.paginate!.order" clearable :items="['asc', 'desc']" label="Dirección de orden"
+                        variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-select>
             </v-col>
           </template>
 
           <template v-else-if="form.type === 'groupBy'">
             <v-col cols="12">
-               <div class="text-subtitle-2 mb-2 text-primary d-flex align-center"><v-icon icon="mdi-chart-pie" size="small" class="mr-1"></v-icon> Group By</div>
+              <div class="text-subtitle-2 mb-2 text-primary d-flex align-center">
+                <v-icon icon="mdi-chart-pie" size="small" class="mr-1"></v-icon>
+                Group By
+              </div>
             </v-col>
             <v-col cols="12">
               <v-select
@@ -149,10 +381,14 @@ function onEntityChange(){
                   class="mb-3"></v-select>
             </v-col>
             <v-col cols="12" md="6">
-               <v-select v-model="form.groupBy!.dateFormat" :items="['year', 'month', 'day', 'hour', 'minute', 'second']" label="Formato de Fecha (opcional)" variant="outlined" density="compact" hide-details="auto" clearable class="mb-3"></v-select>
+              <v-select v-model="form.groupBy!.dateFormat" :items="['year', 'month', 'day', 'hour', 'minute', 'second']"
+                        label="Formato de Fecha (opcional)" variant="outlined" density="compact" hide-details="auto"
+                        clearable class="mb-3"></v-select>
             </v-col>
             <v-col cols="12" md="6">
-               <v-select v-model="form.groupBy!.render" :items="['pie', 'bars', 'table', 'gallery']" label="Render visual" variant="outlined" density="compact" hide-details="auto" class="mb-3"></v-select>
+              <v-select v-model="form.groupBy!.render" :items="['pie', 'bars', 'table', 'gallery']"
+                        label="Render visual" variant="outlined" density="compact" hide-details="auto"
+                        class="mb-3"></v-select>
             </v-col>
           </template>
         </v-row>
@@ -169,7 +405,7 @@ function onEntityChange(){
 
 <style scoped>
 .dashboard-card-editor {
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
 }
 </style>

package/src/components/DashboardConfig/DashboardConfig.vue

@@ -4,6 +4,7 @@ import type {IDashboardBase, IDashboardCard} from "@drax/dashboard-share";
 import GroupByCard from "../GroupByCard/GroupByCard.vue";
 import PaginateCard from "../PaginateCard/PaginateCard.vue";
 import DashboardCardEditor from "./DashboardCardEditor.vue";
+import {debounce} from "@drax/common-front"
 
 const valueModel = defineModel<IDashboardBase>({required: true})
 
@@ -88,17 +89,22 @@ const addNewCard = () => {
   valueModel.value.cards.push({
     title: 'Nueva Tarjeta',
     entity: '',
+    filters: [],
     type: 'groupBy',
-    layout: {cols: 12, sm: 12, md: 6, lg: 6, height: 450, cardVariant: 'outlined'}
+    layout: {cols: 12, sm: 12, md: 6, lg: 6, height: 450, cardVariant: 'elevated'}
   });
   editingCardIndex.value = valueModel.value.cards.length - 1;
 };
 
+
+
 const onSaveCard = () => {
   emit("dashboardUpdated")
   editingCardIndex.value = null;
 };
 
+const debouncedSave = debounce(onSaveCard, 500)
+
 const onCancelCard = () => {
   editingCardIndex.value = null;
 };
@@ -108,10 +114,16 @@ const emit = defineEmits(["dashboardUpdated"])
 </script>
 
 <template>
-  <v-card v-if="valueModel" class="mt-3 valueModel-config-wrapper" variant="flat" color="transparent">
+  <v-card v-if="valueModel" class="mt-3 valueModel-config-wrapper" variant="flat" >
     <v-card-title class="px-0 d-flex align-center">
-      <span class="text-h5 font-weight-bold">{{ valueModel.title || 'Configuración de Dashboard' }}</span>
+        <v-text-field
+            variant="solo-filled"
+            class="font-weight-semibold"
+            v-model="valueModel.title"
+            @update:modelValue="debouncedSave"
+        ></v-text-field>
       <v-spacer></v-spacer>
+      <slot name="buttons"></slot>
       <v-btn color="primary" prepend-icon="mdi-plus" @click="addNewCard" elevation="2">Añadir Tarjeta</v-btn>
     </v-card-title>
 

package/src/components/DashboardView/DashboardView.vue

@@ -11,8 +11,8 @@ const {dashboard} = defineProps({
 </script>
 
 <template>
-  <v-card v-if="dashboard" class="mt-3" >
-    <v-card-title>{{dashboard.title}}</v-card-title>
+  <v-card v-if="dashboard" class="mt-3" variant="flat" >
+    <v-card-title style="font-size: 2rem">{{dashboard.title}}</v-card-title>
     <v-card-text>
       <v-row>
         <v-col v-for="(card,i) in dashboard.cards" :key="i"
@@ -21,7 +21,7 @@ const {dashboard} = defineProps({
                :md="card?.layout?.md || 12"
                :lg="card?.layout?.lg || 12"
         >
-          <v-card :variant="card?.layout?.cardVariant || 'outlined' " :height="card?.layout?.height || 300" style="overflow-y: auto">
+          <v-card :variant="card?.layout?.cardVariant || 'elevated' " hover :height="card?.layout?.height || 300" style="overflow-y: auto">
             <v-card-title>{{card?.title}}</v-card-title>
             <v-card-text >
               <paginate-card v-if="card?.type === 'paginate'" :card="card" />

package/src/components/GroupByCard/renders/GroupByGalleryRender.vue

@@ -90,10 +90,10 @@ const cardData = computed(() => {
         <v-col
             v-for="(card, index) in cardData"
             :key="index"
-            cols="6"
-            sm="4"
-            md="3"
-            lg="2"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="4"
             class="pa-1"
         >
           <v-card
@@ -112,7 +112,7 @@ const cardData = computed(() => {
                 </div>
                 <v-chip
                     :color="card.color"
-                    size="x-small"
+                    size="small"
                     variant="flat"
                     class="mt-1"
                 >
@@ -126,16 +126,31 @@ const cardData = computed(() => {
 
       <v-divider class="my-2"></v-divider>
 
-      <div class="total-section pa-2">
-        <v-card variant="flat" color="grey-lighten-4">
-          <v-card-text class="pa-2 d-flex align-center justify-space-between">
-            <span class="text-subtitle-2 font-weight-bold">Total</span>
-            <v-chip color="primary" size="small" variant="flat">
+      <v-card
+          color="black"
+          variant="tonal"
+          class="gallery-card"
+          hover
+      >
+        <v-card-text class="pa-2">
+          <div class="d-flex flex-column align-center text-center">
+            <div class="card-value text-h5 font-weight-bold mb-1">
               {{ totalCount }}
+            </div>
+            <div class="card-label text-caption text-truncate" >
+              TOTAL
+            </div>
+            <v-chip
+                color="black"
+                size="small"
+                variant="flat"
+                class="mt-1"
+            >
+              100%
             </v-chip>
-          </v-card-text>
-        </v-card>
-      </div>
+          </div>
+        </v-card-text>
+      </v-card>
     </template>
   </div>
 </template>

package/src/components/GroupByCard/renders/GroupByTableRender.vue

@@ -46,11 +46,17 @@ const getPercentage = (count: number) => {
           v-slot:[`item.${field.name}`]="{ value }"
       >
         <template v-if="['ref','object'].includes(field.type) && field.refDisplay">
-          {{value[field.refDisplay]}}
+          {{value ? value[field.refDisplay] : '-' }}
         </template>
+
         <template v-else-if="field.type === 'date'">
           {{ formatDateByUnit(value, dateFormat) }}
         </template>
+
+        <template v-else-if="field.type === 'number'">
+          {{ value.toLocaleString('es-ar') }}
+        </template>
+
         <template v-else>
           {{ value }}
         </template>

package/src/cruds/DashboardCrud.ts

@@ -89,75 +89,75 @@ class DashboardCrud extends EntityCrud implements IEntityCrud {
         return [
             {name: 'identifier', type: 'string', label: 'identifier', default: ''},
             {name: 'title', type: 'string', label: 'title', default: ''},
-            {
-                name: 'cards',
-                type: 'array.object',
-                label: 'cards',
-                default: [],
-                objectFields: [
-                    {name: 'title', type: 'string', label: 'title', default: ''},
-                    {name: 'entity', type: 'enum', enum: this.entities, label: 'entity', default: ''},
-                    {name: 'type', type: 'enum', label: 'type', default: null, enum: ['paginate', 'groupBy']},
-                    {
-                        name: 'filters',
-                        type: 'array.object',
-                        label: 'filters',
-                        default: [],
-                        objectFields: [
-                            {name: 'field', type: 'string', label: 'field', default: ''},
-                            {name: 'operator', type: 'string', label: 'operator', default: ''},
-                            {name: 'value', type: 'string', label: 'value', default: ''}]
-                    },
-                    {
-                        name: 'layout',
-                        type: 'object',
-                        label: 'layout',
-                        default: {"cols": 12, "sm": 12, "md": 12, "lg": 12, "height": 350, "cardVariant": "elevated"},
-                        objectFields: [
-                            {name: 'cols', type: 'number', label: 'cols', default: 12, sm: 3, md: 3, lg: 3},
-                            {name: 'sm', type: 'number', label: 'sm', default: 12, sm: 3, md: 3, lg: 3},
-                            {name: 'md', type: 'number', label: 'md', default: 12, sm: 3, md: 3, lg: 3},
-                            {name: 'lg', type: 'number', label: 'lg', default: 12, sm: 3, md: 3, lg: 3},
-                            {name: 'height', type: 'number', label: 'height', default: 350},
-                            {
-                                name: 'cardVariant',
-                                type: 'enum',
-                                label: 'cardVariant',
-                                default: 'elevated',
-                                enum: ['text', 'flat', 'elevated', 'tonal', 'outlined', 'plain']
-                            }]
-                    },
-                    {
-                        name: 'groupBy',
-                        type: 'object',
-                        label: 'groupBy',
-                        default: {"fields": [], "dateFormat": "day", "render": "table"},
-                        objectFields: [{name: 'fields', type: 'array.string', label: 'fields', default: []},
-                            {
-                                name: 'dateFormat',
-                                type: 'enum',
-                                label: 'dateFormat',
-                                default: 'day',
-                                enum: ['year', 'month', 'day', 'hour', 'minute', 'second']
-                            },
-                            {
-                                name: 'render',
-                                type: 'enum',
-                                label: 'render',
-                                default: 'table',
-                                enum: ['table', 'gallery', 'pie', 'bars']
-                            }]
-                    },
-                    {
-                        name: 'paginate',
-                        type: 'object',
-                        label: 'paginate',
-                        default: {"columns": [], "orderBy": "", "order": null},
-                        objectFields: [{name: 'columns', type: 'array.string', label: 'columns', default: []},
-                            {name: 'orderBy', type: 'string', label: 'orderBy', default: ''},
-                            {name: 'order', type: 'enum', label: 'order', default: null, enum: ['asc', 'desc']}]
-                    }]
-            }
+            // {
+            //     name: 'cards',
+            //     type: 'array.object',
+            //     label: 'cards',
+            //     default: [],
+            //     objectFields: [
+            //         {name: 'title', type: 'string', label: 'title', default: ''},
+            //         {name: 'entity', type: 'enum', enum: this.entities, label: 'entity', default: ''},
+            //         {name: 'type', type: 'enum', label: 'type', default: null, enum: ['paginate', 'groupBy']},
+            //         {
+            //             name: 'filters',
+            //             type: 'array.object',
+            //             label: 'filters',
+            //             default: [],
+            //             objectFields: [
+            //                 {name: 'field', type: 'string', label: 'field', default: ''},
+            //                 {name: 'operator', type: 'string', label: 'operator', default: ''},
+            //                 {name: 'value', type: 'string', label: 'value', default: ''}]
+            //         },
+            //         {
+            //             name: 'layout',
+            //             type: 'object',
+            //             label: 'layout',
+            //             default: {"cols": 12, "sm": 12, "md": 12, "lg": 12, "height": 350, "cardVariant": "elevated"},
+            //             objectFields: [
+            //                 {name: 'cols', type: 'number', label: 'cols', default: 12, sm: 3, md: 3, lg: 3},
+            //                 {name: 'sm', type: 'number', label: 'sm', default: 12, sm: 3, md: 3, lg: 3},
+            //                 {name: 'md', type: 'number', label: 'md', default: 12, sm: 3, md: 3, lg: 3},
+            //                 {name: 'lg', type: 'number', label: 'lg', default: 12, sm: 3, md: 3, lg: 3},
+            //                 {name: 'height', type: 'number', label: 'height', default: 350},
+            //                 {
+            //                     name: 'cardVariant',
+            //                     type: 'enum',
+            //                     label: 'cardVariant',
+            //                     default: 'elevated',
+            //                     enum: ['text', 'flat', 'elevated', 'tonal', 'outlined', 'plain']
+            //                 }]
+            //         },
+            //         {
+            //             name: 'groupBy',
+            //             type: 'object',
+            //             label: 'groupBy',
+            //             default: {"fields": [], "dateFormat": "day", "render": "table"},
+            //             objectFields: [{name: 'fields', type: 'array.string', label: 'fields', default: []},
+            //                 {
+            //                     name: 'dateFormat',
+            //                     type: 'enum',
+            //                     label: 'dateFormat',
+            //                     default: 'day',
+            //                     enum: ['year', 'month', 'day', 'hour', 'minute', 'second']
+            //                 },
+            //                 {
+            //                     name: 'render',
+            //                     type: 'enum',
+            //                     label: 'render',
+            //                     default: 'table',
+            //                     enum: ['table', 'gallery', 'pie', 'bars']
+            //                 }]
+            //         },
+            //         {
+            //             name: 'paginate',
+            //             type: 'object',
+            //             label: 'paginate',
+            //             default: {"columns": [], "orderBy": "", "order": null},
+            //             objectFields: [{name: 'columns', type: 'array.string', label: 'columns', default: []},
+            //                 {name: 'orderBy', type: 'string', label: 'orderBy', default: ''},
+            //                 {name: 'order', type: 'enum', label: 'order', default: null, enum: ['asc', 'desc']}]
+            //         }]
+            // }
         ]
     }
 
@@ -168,11 +168,11 @@ class DashboardCrud extends EntityCrud implements IEntityCrud {
     }
 
     get isViewable() {
-        return true
+        return false
     }
 
     get isEditable() {
-        return true
+        return false
     }
 
     get isCreatable() {
@@ -223,6 +223,25 @@ class DashboardCrud extends EntityCrud implements IEntityCrud {
         return []
     }
 
+    get listMode(): 'table' | 'gallery' {
+        return 'gallery'
+    }
+
+    get searchEnable(){
+        return false
+    }
+
+    get dynamicFiltersEnable(){
+        return false
+    }
+
+    get filterButtons(){
+        return false
+    }
+
+    redirectOnCreate(item: any){
+        return '/dashboard/config/'+item.identifier
+    }
 
 }
 

package/src/pages/DashboardConfigPage.vue

@@ -46,13 +46,17 @@ onMounted(() => {
 
 <template>
   <v-container fluid>
-    <v-btn size="small" prepend-icon="mdi-view-dashboard" :href="'/dashboard/view/'+identifier">ver</v-btn>
 
     <v-skeleton-loader :loading="loading"/>
     <dashboard-config v-if="dashboardSelected"
                       v-model="dashboardSelected"
                       @dashboardUpdated="updateDashboard"
-    ></dashboard-config>
+    >
+      <template v-slot:buttons>
+        <v-btn class="mx-3" prepend-icon="mdi-view-dashboard" :href="'/dashboard/view/'+identifier">ver</v-btn>
+      </template>
+
+    </dashboard-config>
 
   </v-container>
 

package/src/pages/DashboardIdentifierPage.vue

@@ -31,9 +31,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-container >
-
-    <v-skeleton-loader :loading="loading"  />
+  <v-container fluid >
+   <v-skeleton-loader :loading="loading"  />
    <dashboard-view v-if="dashboardSelected" :dashboard="dashboardSelected"></dashboard-view>
 
   </v-container>

package/src/pages/crud/DashboardCrudPage.vue

@@ -7,10 +7,18 @@ import type {IDashboard} from "@drax/dashboard-share";
 
 <template>
   <crud :entity="DashboardCrud.instance">
+
+    <template v-slot:item="{item}">
+      <v-card class="h-100 pa-2">
+        <v-card-title>{{item.title}}</v-card-title>
+        <v-card-subtitle>{{item.identifier}}</v-card-subtitle>
+      </v-card>
+    </template>
+
     <template v-slot:item.actions="{ item }">
-      <v-btn class="mx-1" variant="text" color="purple" size="small" icon="mdi-view-dashboard" :href="'/dashboard/view/'+ (item as IDashboard)?.identifier">
+      <v-btn class="mx-1" variant="text" color="purple"  icon="mdi-view-dashboard" :href="'/dashboard/view/'+ (item as IDashboard)?.identifier">
       </v-btn>
-      <v-btn class="mx-1" variant="text" color="indigo" size="small" icon="mdi-cogs" :href="'/dashboard/config/'+ (item as IDashboard)?.identifier">
+      <v-btn class="mx-1" variant="text" color="indigo"  icon="mdi-table-edit" :href="'/dashboard/config/'+ (item as IDashboard)?.identifier">
       </v-btn>
     </template>
   </crud>

package/src/components/GroupByCard/renders/GroupByGalleryRenderbkp.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import type {PropType} from "vue";
-import {computed} from "vue";
-import {useDateFormat} from "@drax/common-vue"
-import type {IDraxDateFormatUnit} from "@drax/common-share";
-import type {IEntityCrudField} from "@drax/crud-share";
-
-const {formatDateByUnit} = useDateFormat()
-
-const {data,  fields, dateFormat} = defineProps({
-  data: {type: Array as PropType<any[]>, required: false},
-  headers: {type: Array as PropType<any[]>, required: false},
-  fields: {type: Array as PropType<IEntityCrudField[]>, required: false},
-  dateFormat: {type: String as PropType<IDraxDateFormatUnit>, required: false, default:'day'},
-})
-
-// Paleta de colores para las tarjetas
-const colors = [
-  'purple', 'indigo', 'teal', 'orange', 'pink',
-  'cyan', 'lime', 'amber', 'deep-purple', 'light-blue',
-  'deep-orange', 'blue-grey', 'brown', 'red', 'green'
-]
-
-// Calcular el total de todos los counts
-const totalCount = computed(() => {
-  if (!data || data.length === 0) return 0
-  return data.reduce((sum, item) => sum + (item.count || 0), 0)
-})
-
-// Preparar datos para las tarjetas
-const cardData = computed(() => {
-  if (!data || data.length === 0) return []
-
-  return data.map((item, index) => {
-    const percentage = totalCount.value > 0 ? (item.count / totalCount.value) * 100 : 0
-
-    // Obtener el label combinando todos los campos excepto count
-    const labelParts: string[] = []
-
-    // Iterar sobre las claves del item excepto count
-    Object.keys(item).forEach(key => {
-      if (key === 'count') return
-
-      // Buscar el campo correspondiente en fields
-      const field = fields?.find(f => f.name === key)
-      const value = item[key]
-
-      if (!field || value === null || value === undefined) return
-
-      let formattedValue = ''
-
-      if (['ref','object'].includes(field.type) && field.refDisplay && value) {
-        formattedValue = value[field.refDisplay]
-      } else if (field.type === 'date' && value) {
-        formattedValue = formatDateByUnit(value, dateFormat)
-      } else if (field.type === 'enum' && value) {
-        formattedValue = value.toString()
-      } else if (typeof value === 'object' && !Array.isArray(value)) {
-        formattedValue = JSON.stringify(value)
-      } else {
-        formattedValue = value?.toString() || ''
-      }
-
-      if (formattedValue) {
-        labelParts.push(formattedValue)
-      }
-    })
-
-    const label = labelParts.length > 0 ? labelParts.join(' - ') : 'N/A'
-
-    return {
-      label,
-      value: item.count || 0,
-      percentage,
-      color: colors[index % colors.length]
-    }
-  })
-})
-</script>
-
-<template>
-  <div class="gallery-container">
-    <div v-if="!data || data.length === 0" class="empty-state">
-      <v-icon size="64" color="grey-lighten-1">mdi-view-grid</v-icon>
-      <p class="text-grey-lighten-1 mt-4">No hay datos para mostrar</p>
-    </div>
-
-    <template v-else>
-      <v-row dense class="ma-0">
-        <v-col
-            v-for="(card, index) in cardData"
-            :key="index"
-            cols="6"
-            sm="4"
-            md="3"
-            lg="2"
-            class="pa-1"
-        >
-          <v-card
-              :color="card.color"
-              variant="tonal"
-              class="gallery-card"
-              hover
-          >
-            <v-card-text class="pa-2">
-              <div class="d-flex flex-column align-center text-center">
-                <div class="card-value text-h5 font-weight-bold mb-1">
-                  {{ card.value }}
-                </div>
-                <div class="card-label text-caption text-truncate" :title="card.label">
-                  {{ card.label }}
-                </div>
-                <v-chip
-                    :color="card.color"
-                    size="x-small"
-                    variant="flat"
-                    class="mt-1"
-                >
-                  {{ card.percentage.toFixed(1) }}%
-                </v-chip>
-              </div>
-            </v-card-text>
-          </v-card>
-        </v-col>
-      </v-row>
-
-      <v-divider class="my-2"></v-divider>
-
-      <div class="total-section pa-2">
-        <v-card variant="flat" color="grey-lighten-4">
-          <v-card-text class="pa-2 d-flex align-center justify-space-between">
-            <span class="text-subtitle-2 font-weight-bold">Total</span>
-            <v-chip color="primary" size="small" variant="flat">
-              {{ totalCount }}
-            </v-chip>
-          </v-card-text>
-        </v-card>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.gallery-container {
-  width: 100%;
-  padding: 4px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  min-height: 200px;
-}
-
-.gallery-card {
-  height: 100%;
-  transition: transform 0.2s, box-shadow 0.2s;
-  cursor: pointer;
-}
-
-.gallery-card:hover {
-  transform: translateY(-2px);
-}
-
-.card-value {
-  line-height: 1.2;
-}
-
-.card-label {
-  width: 100%;
-  line-height: 1.2;
-  max-width: 100%;
-}
-
-.total-section {
-  padding: 0 4px;
-}
-</style>