@drax/dashboard-vue 2.4.0 → 2.7.0

package/package.json

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

package/src/components/DashboardConfig/DashboardCardEditor.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, watch,computed, type PropType } from 'vue';
+import type { IDashboardCard } from "@drax/dashboard-share";
+import {useEntityStore} from "@drax/crud-vue";
+
+const props = defineProps({
+  modelValue: { type: Object as PropType<IDashboardCard>, required: true }
+});
+
+const emit = defineEmits(['update:modelValue', 'save', 'cancel']);
+
+// Create a local reactive copy
+const form = ref<IDashboardCard>(JSON.parse(JSON.stringify(props.modelValue)));
+
+watch(() => props.modelValue, (newVal) => {
+  form.value = JSON.parse(JSON.stringify(newVal));
+}, { 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: '' };
+};
+ensureStructure();
+
+const save = () => {
+  emit('update:modelValue', form.value);
+  emit('save');
+};
+
+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){
+      form.value.paginate.columns = []
+    }
+    if(form.value.groupBy){
+      form.value.groupBy.fields = []
+    }
+  }
+}
+
+</script>
+
+<template>
+  <v-card class="d-flex flex-column dashboard-card-editor" height="100%" color="surface" variant="flat">
+    <v-card-title class="d-flex align-center bg-primary text-white py-2">
+      <v-icon icon="mdi-pencil-box-outline" class="mr-2"></v-icon>
+      Configuración de Tarjeta
+      <v-spacer></v-spacer>
+      <v-btn icon="mdi-close" variant="text" size="small" @click="cancel"></v-btn>
+    </v-card-title>
+
+    <v-card-text class="pt-4 flex-grow-1 overflow-y-auto">
+      <v-form @submit.prevent>
+        <v-row 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-col>
+          <v-col cols="12" md="6" lg="4">
+            <v-select :items="entities"
+                      v-model="form.entity"
+                      label="Entidad (ej. User, Country)"
+                      variant="outlined"
+                      density="compact"
+                      hide-details="auto"
+                      class="mb-3"
+                      clearable
+                      @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>
+
+          <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>
+
+          <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>
+            </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>
+            </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-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-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>
+            </v-col>
+            <v-col cols="12">
+              <v-select
+                  item-title="title"
+                  item-value="value"
+                  :items="columns"
+                  v-model="form.groupBy!.fields"
+                  label="Campos de agrupación"
+                  multiple chips variant="outlined"
+                  density="compact" hide-details="auto"
+                  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-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-col>
+          </template>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <v-card-actions class="bg-grey-lighten-4 py-3">
+      <v-spacer></v-spacer>
+      <v-btn color="grey-darken-1" variant="text" @click="cancel">Cancelar</v-btn>
+      <v-btn color="primary" variant="flat" @click="save" class="px-6">Guardar Cambios</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<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;
+}
+</style>

package/src/components/DashboardConfig/DashboardConfig.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import {ref} from "vue";
+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";
+
+const valueModel = defineModel<IDashboardBase>({required: true})
+
+const editingCardIndex = ref<number | null>(null);
+
+// Drag and drop state
+const dragCardIndex = ref<number | null>(null);
+const dropTargetIndex = ref<number | null>(null);
+
+const onDragStart = (e: DragEvent, index: number) => {
+  dragCardIndex.value = index;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+const onDragEnter = (e: DragEvent, index: number) => {
+  e.preventDefault();
+  if (dragCardIndex.value !== index) {
+    dropTargetIndex.value = index;
+  }
+};
+
+const onDragOver = (e: DragEvent) => {
+  e.preventDefault();
+};
+
+const onDrop = (e: DragEvent, index: number) => {
+  e.preventDefault();
+  dropTargetIndex.value = null;
+  if (dragCardIndex.value !== null && dragCardIndex.value !== index) {
+    const cards = valueModel.value.cards || [];
+    const movedItem = cards.splice(dragCardIndex.value, 1)[0] as IDashboardCard;
+    cards.splice(index, 0, movedItem);
+    emit("dashboardUpdated")
+  }
+  dragCardIndex.value = null;
+};
+
+const onDragEnd = () => {
+  dragCardIndex.value = null;
+  dropTargetIndex.value = null;
+};
+
+// Actions
+const editCard = (index: number) => {
+  editingCardIndex.value = index;
+};
+
+const deleteCard = (index: number) => {
+  if (confirm('¿Estás seguro de eliminar esta tarjeta?')) {
+    valueModel.value.cards?.splice(index, 1);
+    if (editingCardIndex.value === index) {
+      editingCardIndex.value = null;
+      emit("dashboardUpdated")
+    }
+  }
+};
+
+const contractCard = (index: number) => {
+  const card = valueModel.value.cards?.[index];
+  if (card && card.layout) {
+    card.layout.md = Math.max(3, (card.layout.md || 12) - 1);
+    card.layout.lg = Math.max(3, (card.layout.lg || 12) - 1);
+    emit("dashboardUpdated")
+  }
+};
+
+const expandCard = (index: number) => {
+  const card = valueModel.value.cards?.[index];
+  if (card && card.layout) {
+    card.layout.md = Math.min(12, (card.layout.md || 12) + 1);
+    card.layout.lg = Math.min(12, (card.layout.lg || 12) + 1);
+    emit("dashboardUpdated")
+  }
+};
+
+const addNewCard = () => {
+  if (!valueModel.value.cards) {
+    valueModel.value.cards = [];
+  }
+  valueModel.value.cards.push({
+    title: 'Nueva Tarjeta',
+    entity: '',
+    type: 'groupBy',
+    layout: {cols: 12, sm: 12, md: 6, lg: 6, height: 450, cardVariant: 'outlined'}
+  });
+  editingCardIndex.value = valueModel.value.cards.length - 1;
+};
+
+const onSaveCard = () => {
+  emit("dashboardUpdated")
+  editingCardIndex.value = null;
+};
+
+const onCancelCard = () => {
+  editingCardIndex.value = null;
+};
+
+const emit = defineEmits(["dashboardUpdated"])
+
+</script>
+
+<template>
+  <v-card v-if="valueModel" class="mt-3 valueModel-config-wrapper" variant="flat" color="transparent">
+    <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-spacer></v-spacer>
+      <v-btn color="primary" prepend-icon="mdi-plus" @click="addNewCard" elevation="2">Añadir Tarjeta</v-btn>
+    </v-card-title>
+
+    <v-card-text class="px-0">
+      <div v-if="!valueModel.cards?.length"
+           class="text-center pa-10 text-grey border-dashed rounded-lg bg-surface mt-4">
+        <v-icon icon="mdi-view-valueModel-variant-outline" size="64" color="grey-lighten-1" class="mb-4"></v-icon>
+        <h3 class="text-h6">Dashboard Vacío</h3>
+        <p class="mb-4">No hay tarjetas configuradas todavía.</p>
+        <v-btn color="primary" variant="tonal" prepend-icon="mdi-plus" @click="addNewCard">Añadir primera tarjeta
+        </v-btn>
+      </div>
+
+      <v-row v-else class="mt-2">
+        <v-col v-for="(card, i) in valueModel.cards" :key="i"
+               :cols="card?.layout?.cols || 12"
+               :sm="card?.layout?.sm || 12"
+               :md="card?.layout?.md || 12"
+               :lg="card?.layout?.lg || 12"
+               class="transition-swing drop-zone"
+               :class="{ 'drop-target': dropTargetIndex === i }"
+               @dragenter="onDragEnter($event, i)"
+               @dragover="onDragOver"
+               @drop="onDrop($event, i)"
+        >
+          <!-- Vista Edición -->
+          <template v-if="editingCardIndex === i">
+            <dashboard-card-editor
+                v-if="valueModel.cards[i]"
+                v-model="valueModel.cards[i]"
+                @save="onSaveCard"
+                @cancel="onCancelCard()"
+            />
+          </template>
+
+          <!-- Vista Card -->
+          <v-card v-else
+                  :variant="card?.layout?.cardVariant || 'outlined'"
+                  :height="card?.layout?.height || 300"
+                  class="hover-card d-flex flex-column"
+                  draggable="true"
+                  @dragstart="onDragStart($event, i)"
+                  @dragend="onDragEnd"
+          >
+            <!-- Toolbar oculta en hover -->
+            <div class="card-toolbar d-flex align-center px-2 py-1 bg-grey-lighten-4">
+              <v-icon icon="mdi-drag" class="cursor-move text-grey" title="Arrastrar para mover"></v-icon>
+              <span class="text-caption text-grey ml-2">{{ card?.layout?.md || 12 }} cols</span>
+              <v-spacer></v-spacer>
+              <v-btn icon="mdi-arrow-collapse-horizontal" variant="text" size="x-small" density="comfortable"
+                     color="grey-darken-1" title="Contraer" @click="contractCard(i)"
+                     :disabled="(card?.layout?.md || 12) <= 3"></v-btn>
+              <v-btn icon="mdi-arrow-expand-horizontal" variant="text" size="x-small" density="comfortable"
+                     color="grey-darken-1" title="Expandir" @click="expandCard(i)"
+                     :disabled="(card?.layout?.md || 12) >= 12"></v-btn>
+              <v-divider vertical class="mx-1"></v-divider>
+              <v-btn icon="mdi-pencil" variant="text" size="x-small" density="comfortable" color="primary"
+                     title="Editar" @click="editCard(i)"></v-btn>
+              <v-btn icon="mdi-delete" variant="text" size="x-small" density="comfortable" color="error"
+                     title="Eliminar" @click="deleteCard(i)"></v-btn>
+            </div>
+
+            <v-card-title class="text-subtitle-1 font-weight-bold pb-1">{{ card?.title }}</v-card-title>
+            <v-card-text class="flex-grow-1 overflow-y-auto pt-0 relative">
+              <paginate-card v-if="card?.type === 'paginate'" :card="card"/>
+              <group-by-card v-else-if="card?.type === 'groupBy'" :card="card"/>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.hover-card {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.hover-card:hover {
+  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;
+  transform: translateY(-2px);
+  border-color: rgba(0, 0, 0, 0.0);
+}
+
+.card-toolbar {
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.hover-card:hover .card-toolbar {
+  opacity: 1;
+}
+
+.cursor-move {
+  cursor: grab;
+}
+
+.cursor-move:active {
+  cursor: grabbing;
+}
+
+.border-dashed {
+  border: 2px dashed rgba(0, 0, 0, 0.12);
+}
+
+.drop-zone {
+  transition: padding 0.2s ease-in-out;
+}
+
+.drop-target {
+  padding-left: 20px;
+  position: relative;
+}
+
+.drop-target::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 12px;
+  bottom: 12px;
+  width: 4px;
+  border-radius: 4px;
+}
+</style>

package/src/components/GroupByCard/GroupByCard.vue

@@ -6,7 +6,7 @@ import GroupByTableRender from "./renders/GroupByTableRender.vue";
 import GroupByPieRender from "./renders/GroupByPieRender.vue";
 import GroupByBarsRender from "./renders/GroupByBarsRender.vue";
 import GroupByGalleryRender from "./renders/GroupByGalleryRender.vue";
-import {ref, onMounted, defineProps } from "vue";
+import {ref, onMounted} from "vue";
 
 
 const {card} = defineProps({

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

@@ -100,7 +100,7 @@ const drawBarChart = () => {
   canvas.width = containerWidth
   canvas.height = containerHeight
 
-  const padding = { top: 20, right: 20, bottom: 60, left: 60 }
+  const padding = { top: 40, right: 20, bottom: 80, left: 60 }
   const chartWidth = containerWidth - padding.left - padding.right
   const chartHeight = containerHeight - padding.top - padding.bottom
 
@@ -162,26 +162,37 @@ const drawBarChart = () => {
     ctx.lineWidth = 2
     ctx.strokeRect(x, y, barWidth - barPadding, barHeight)
 
-    // Dibujar el valor encima de la barra
+    // Dibujar el valor y porcentaje encima de la barra
     ctx.fillStyle = '#333'
-    ctx.font = 'bold 11px sans-serif'
+    ctx.font = 'bold 12px sans-serif'
     ctx.textAlign = 'center'
+
+    // Valor
     ctx.fillText(
         segment.value.toString(),
         x + (barWidth - barPadding) / 2,
+        y - 18
+    )
+
+    // Porcentaje
+    ctx.font = '11px sans-serif'
+    ctx.fillStyle = '#666'
+    ctx.fillText(
+        `(${segment.percentage.toFixed(1)}%)`,
+        x + (barWidth - barPadding) / 2,
         y - 5
     )
 
     // Dibujar etiqueta del eje X (rotada si es necesario)
     ctx.save()
-    ctx.translate(x + (barWidth - barPadding) / 2, padding.top + chartHeight + 10)
+    ctx.translate(x + (barWidth - barPadding) / 2, padding.top + chartHeight + 12)
     ctx.rotate(-Math.PI / 4)
     ctx.fillStyle = '#666'
-    ctx.font = '10px sans-serif'
+    ctx.font = '12px sans-serif'
     ctx.textAlign = 'right'
 
     // Truncar label si es muy largo
-    const maxLabelLength = 15
+    const maxLabelLength = 20
     const label = segment.label.length > maxLabelLength
         ? segment.label.substring(0, maxLabelLength) + '...'
         : segment.label
@@ -212,6 +223,16 @@ onMounted(() => {
     </div>
 
     <template v-else>
+      <div v-if="showLegend" class="total-container-top">
+        <div class="d-flex align-center justify-space-between">
+          <span class="text-h6 font-weight-bold">Total</span>
+          <v-chip color="primary" size="large" variant="flat">
+            {{ totalCount }}
+          </v-chip>
+        </div>
+        <v-divider class="my-2"></v-divider>
+      </div>
+
       <div class="chart-wrapper">
         <canvas ref="canvasRef"></canvas>
       </div>
@@ -234,16 +255,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
-      <div v-if="showLegend" class="total-container">
-        <v-divider class="my-1"></v-divider>
-        <div class="d-flex align-center justify-space-between">
-          <span class="text-subtitle-1 font-weight-medium ml-2">Total</span>
-          <v-chip color="primary" variant="flat">
-            {{ totalCount }}
-          </v-chip>
-        </div>
-      </div>
     </template>
   </div>
 </template>
@@ -317,9 +328,8 @@ onMounted(() => {
   font-size: 13px;
   font-weight: 500;
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-break: break-word;
+  line-height: 1.3;
 }
 
 .legend-stats {
@@ -336,8 +346,11 @@ onMounted(() => {
   text-align: right;
 }
 
-.total-container {
-  margin-top: 8px;
+.total-container-top {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 8px;
 }
 
 /* Scrollbar personalizado para la leyenda */

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

@@ -0,0 +1,181 @@
+<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>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {PropType} from "vue";
-import {computed, ref, onMounted, watch} from "vue";
+import {computed, ref, onMounted, onUnmounted, watch} from "vue";
 import {useDateFormat} from "@drax/common-vue"
 import type {IDraxDateFormatUnit} from "@drax/common-share";
 import type {IEntityCrudField} from "@drax/crud-share";
@@ -23,6 +23,21 @@ const colors = [
   '#36A2EB', '#FFCE56', '#9966FF', '#FF6384', '#4BC0C0'
 ]
 
+const truncateLabel = (label: string, maxLength = 18) => {
+  if (!label) return 'N/A'
+  return label.length > maxLength ? `${label.slice(0, maxLength)}…` : label
+}
+
+const getContrastColor = (hexColor: string) => {
+  const hex = hexColor.replace('#', '')
+  const r = Number.parseInt(hex.substring(0, 2), 16)
+  const g = Number.parseInt(hex.substring(2, 4), 16)
+  const b = Number.parseInt(hex.substring(4, 6), 16)
+  const luminance = (0.299 * r) + (0.587 * g) + (0.114 * b)
+
+  return luminance > 186 ? '#1f2937' : '#ffffff'
+}
+
 // Calcular el total de todos los counts
 const totalCount = computed(() => {
   if (!data || data.length === 0) return 0
@@ -72,6 +87,7 @@ const chartData = computed(() => {
 
     return {
       label,
+      shortLabel: truncateLabel(label),
       value: item.count || 0,
       percentage,
       color: colors[index % colors.length]
@@ -87,58 +103,118 @@ const drawPieChart = () => {
   const ctx = canvas.getContext('2d')
   if (!ctx) return
 
-  // Configurar el tamaño del canvas
-  const size = Math.min(canvas.parentElement?.clientWidth || 400, 400)
-  canvas.width = size
-  canvas.height = size
+  const parentWidth = canvas.parentElement?.clientWidth || 420
+  const width = Math.min(parentWidth, 520)
+  const height = 300
 
-  const centerX = size / 2
-  const centerY = size / 2
-  const radius = (size / 2) * 0.7
+  canvas.width = width
+  canvas.height = height
 
-  // Limpiar el canvas
-  ctx.clearRect(0, 0, size, size)
+  const centerX = width / 2
+  const centerY = height / 2
+  const radius = Math.min(width * 0.24, height * 0.34)
+  const labelRadius = radius + 16
+  const labelOffset = 22
+  const donutRadius = radius * 0.45
 
-  // Dibujar cada segmento
-  let currentAngle = -Math.PI / 2 // Comenzar desde arriba
+  ctx.clearRect(0, 0, width, height)
+  ctx.textBaseline = 'middle'
+
+  let currentAngle = -Math.PI / 2
 
   chartData.value.forEach((segment) => {
     const sliceAngle = (segment.percentage / 100) * 2 * Math.PI
+    const endAngle = currentAngle + sliceAngle
+    const midAngle = currentAngle + (sliceAngle / 2)
 
-    // Dibujar el segmento
+    // Segmento
     ctx.beginPath()
     ctx.moveTo(centerX, centerY)
-    ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle)
+    ctx.arc(centerX, centerY, radius, currentAngle, endAngle)
     ctx.closePath()
     ctx.fillStyle = segment.color
     ctx.fill()
 
-    // Dibujar borde blanco
     ctx.strokeStyle = '#ffffff'
     ctx.lineWidth = 2
     ctx.stroke()
 
-    currentAngle += sliceAngle
+    // Porcentaje dentro del segmento
+    if (segment.percentage >= 4) {
+      const textRadius = radius * 0.68
+      const textX = centerX + Math.cos(midAngle) * textRadius
+      const textY = centerY + Math.sin(midAngle) * textRadius
+
+      ctx.fillStyle = getContrastColor(segment.color)
+      ctx.font = 'bold 12px sans-serif'
+      ctx.textAlign = 'center'
+      ctx.fillText(`${segment.percentage.toFixed(1)}%`, textX, textY)
+    }
+
+    // Label al costado con línea guía
+    const lineStartX = centerX + Math.cos(midAngle) * radius
+    const lineStartY = centerY + Math.sin(midAngle) * radius
+    const lineMidX = centerX + Math.cos(midAngle) * labelRadius
+    const lineMidY = centerY + Math.sin(midAngle) * labelRadius
+    const isRightSide = Math.cos(midAngle) >= 0
+    const lineEndX = lineMidX + (isRightSide ? labelOffset : -labelOffset)
+    const lineEndY = lineMidY
+
+    ctx.beginPath()
+    ctx.moveTo(lineStartX, lineStartY)
+    ctx.lineTo(lineMidX, lineMidY)
+    ctx.lineTo(lineEndX, lineEndY)
+    ctx.strokeStyle = segment.color
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    ctx.beginPath()
+    ctx.arc(lineEndX, lineEndY, 2.5, 0, 2 * Math.PI)
+    ctx.fillStyle = segment.color
+    ctx.fill()
+
+    ctx.fillStyle = '#374151'
+    ctx.font = '500 12px sans-serif'
+    ctx.textAlign = isRightSide ? 'left' : 'right'
+    ctx.fillText(
+      segment.shortLabel,
+      lineEndX + (isRightSide ? 6 : -6),
+      lineEndY
+    )
+
+    currentAngle = endAngle
   })
 
-  // Dibujar círculo blanco en el centro para efecto "donut" (opcional)
+  // Centro blanco para efecto donut
   ctx.beginPath()
-  ctx.arc(centerX, centerY, radius * 0.5, 0, 2 * Math.PI)
+  ctx.arc(centerX, centerY, donutRadius, 0, 2 * Math.PI)
   ctx.fillStyle = '#ffffff'
   ctx.fill()
+
+  // Total al centro
+  ctx.fillStyle = '#6b7280'
+  ctx.font = '500 11px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.fillText('Total', centerX, centerY - 8)
+
+  ctx.fillStyle = '#111827'
+  ctx.font = 'bold 16px sans-serif'
+  ctx.fillText(String(totalCount.value), centerX, centerY + 10)
 }
 
 // Redibujar cuando cambien los datos
-watch(() => data, () => {
+watch(chartData, () => {
   setTimeout(drawPieChart, 100)
 }, { deep: true })
 
 onMounted(() => {
   drawPieChart()
-
-  // Redibujar al cambiar el tamaño de la ventana
   window.addEventListener('resize', drawPieChart)
 })
+
+onUnmounted(() => {
+  window.removeEventListener('resize', drawPieChart)
+})
 </script>
 
 <template>
@@ -152,35 +228,6 @@ onMounted(() => {
       <div class="chart-wrapper">
         <canvas ref="canvasRef"></canvas>
       </div>
-
-      <div class="legend-container">
-        <div
-            v-for="(segment, index) in chartData"
-            :key="index"
-            class="legend-item"
-        >
-          <div class="legend-color" :style="{ backgroundColor: segment.color }"></div>
-          <div class="legend-content">
-            <div class="legend-label">{{ segment.label }}</div>
-            <div class="legend-stats">
-              <v-chip color="primary" size="x-small" variant="flat">
-                {{ segment.value }}
-              </v-chip>
-              <span class="legend-percentage">{{ segment.percentage.toFixed(1) }}%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="total-container">
-        <v-divider class="my-1"></v-divider>
-        <div class="d-flex align-center justify-space-between">
-          <span class="text-subtitle-1 font-weight-medium ml-2">Total</span>
-          <v-chip color="primary" variant="flat">
-            {{ totalCount }}
-          </v-chip>
-        </div>
-      </div>
     </template>
   </div>
 </template>
@@ -203,96 +250,15 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 2px;
-  padding: 2px;
+  padding: 8px 4px;
+  width: 100%;
+  overflow-x: auto;
 }
 
 .chart-wrapper canvas {
-  max-width: 200px;
-  max-height: 180px;
-  height: auto;
-}
-
-.legend-container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 200px;
-  overflow-y: auto;
-  padding: 2px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 2px 4px;
-  border-radius: 6px;
-  transition: background-color 0.2s;
-}
-
-.legend-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.legend-color {
-  width: 12px;
-  height: 12px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-
-.legend-content {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend-label {
-  font-size: 13px;
-  font-weight: 500;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.legend-stats {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend-percentage {
-  font-size: 11px;
-  color: rgba(0, 0, 0, 0.6);
-  font-weight: 500;
-  min-width: 40px;
-  text-align: right;
-}
-
-.total-container {
-  margin-top: 8px;
-}
-
-/* Scrollbar personalizado para la leyenda */
-.legend-container::-webkit-scrollbar {
-  width: 4px;
-}
-
-.legend-container::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 2px;
-}
-
-.legend-container::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-}
-
-.legend-container::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+  width: 100%;
+  max-width: 520px;
+  height: 300px;
+  display: block;
 }
 </style>

package/src/components/PaginateCard/PaginateCard.vue

@@ -3,7 +3,7 @@ import type {PropType} from "vue";
 import type {IDashboardCard} from "@drax/dashboard-share";
 import {useDashboardCard} from "../../composables/UseDashboardCard";
 import PaginateTableRender from "./renders/PaginateTableRender.vue";
-import {ref, onMounted, defineProps } from "vue";
+import {ref, onMounted } from "vue";
 import type {IDraxPaginateResult} from "@drax/crud-share";
 
 
@@ -22,12 +22,11 @@ onMounted(async ()=> {
 </script>
 
 <template>
-  <paginate-table-render  v-if="card?.groupBy?.render === 'table'"
+  <paginate-table-render
                           :data="data"
                           :fields="cardEntityFields"
                           :headers="paginateHeaders"
   />
-
 </template>
 
 <style scoped>

package/src/pages/DashboardConfigPage.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type {IDashboard} from "@drax/dashboard-share";
+import {onMounted, ref} from "vue";
+import DashboardConfig from "../components/DashboardConfig/DashboardConfig.vue";
+import {useRoute} from "vue-router";
+import {DashboardProvider} from "@drax/dashboard-front";
+
+const route = useRoute()
+
+const identifier = route.params.identifier
+
+const dashboardSelected = ref<IDashboard>()
+
+const loading = ref(false)
+
+const findDashboard = async () => {
+  try {
+    loading.value = true
+    const filters = [{field: 'identifier', operator: 'eq', value: identifier}]
+    dashboardSelected.value = await DashboardProvider.instance.findOne({filters})
+  } catch (error) {
+    console.error('Error fetching dashboards:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const updateDashboard = async () => {
+  try {
+    if(dashboardSelected?.value){
+      loading.value = true
+      dashboardSelected.value = await DashboardProvider.instance.update(dashboardSelected.value._id, dashboardSelected?.value)
+      console.log("dashboard updated", dashboardSelected.value)
+    }
+  } catch (error) {
+    console.error('Error fetching dashboards:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  findDashboard()
+})
+</script>
+
+<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>
+
+  </v-container>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/pages/crud/DashboardCrudPage.vue

@@ -8,7 +8,9 @@ import type {IDashboard} from "@drax/dashboard-share";
 <template>
   <crud :entity="DashboardCrud.instance">
     <template v-slot:item.actions="{ item }">
-      <v-btn size="small" icon="mdi-view-dashboard" :href="'/dashboard/identifier/'+ (item as IDashboard)?.identifier">
+      <v-btn class="mx-1" variant="text" color="purple" size="small" 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>
     </template>
   </crud>

package/src/routes/DashboardCrudRoute.ts

@@ -1,6 +1,7 @@
 
 import DashboardCrudPage from "../pages/crud/DashboardCrudPage.vue";
 import DashboardViewPage from "../pages/DashboardViewPage.vue";
+import DashboardConfigPage from "../pages/DashboardConfigPage.vue";
 import DashboardIdentifierPage from "../pages/DashboardIdentifierPage.vue";
 
 
@@ -23,9 +24,18 @@ const DashboardCrudRoute = [
       permission: 'dashboard:manage',
     }
   },
+  {
+    name: 'DashboardConfigPage',
+    path: '/dashboard/config/:identifier',
+    component: DashboardConfigPage,
+    meta: {
+      auth: true,
+      permission: 'dashboard:manage',
+    }
+  },
   {
     name: 'DashboardIdentifierPage',
-    path: '/dashboard/identifier/:identifier',
+    path: '/dashboard/view/:identifier',
     component: DashboardIdentifierPage,
     meta: {
       auth: true,