src/components/VnColor.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    colors: {
+        type: Array,
+        required: true,
+        validator: (value) => value.length <= 3,
+    },
+});
+
+const sectionHeight = computed(() => `${100 / props.colors.length}%`);
+
+const divStyle = computed(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+}));
+</script>
+<template>
+    <div class="color-div" :style="divStyle">
+        <div
+            v-for="(color, index) in colors"
+            :key="index"
+            class="color-section"
+            :style="{ backgroundColor: color, height: sectionHeight }"
+        ></div>
+    </div>
+</template>
+
+<style scoped>
+.color-div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.color-section {
+    width: 100%;
+}
+</style>

src/components/VnTable/VnOrder.vue

@@ -51,11 +51,11 @@ defineExpose({ orderBy });
         @mouseenter="hover = true"
         @mouseleave="hover = false"
         @click="orderBy(name, model?.direction)"
-        class="row items-center no-wrap cursor-pointer"
+        class="row items-center no-wrap cursor-pointer title"
     >
-        <span :title="label" class="title">{{ label }}</span>
+        <span :title="label">{{ label }}</span>
+        <sup v-if="name && model?.index">
             <QChip
-            v-if="name && model?.index"
                 :label="!vertical ? model?.index : ''"
                 :icon="
                     (model?.index || hover) && !vertical
@@ -91,6 +91,7 @@ defineExpose({ orderBy });
                     />
                 </div>
             </QChip>
+        </sup>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -102,4 +103,8 @@ defineExpose({ orderBy });
     width: 100%;
     color: var(--vn-label-color);
 }
+sup {
+    vertical-align: super; /* Valor predeterminado */
+    /* También puedes usar otros valores como "baseline", "top", "text-top", etc. */
+}
 </style>

src/components/VnTable/VnTable.vue

@@ -15,6 +15,7 @@ import VnTableChip from 'components/VnTable/VnChip.vue';
 import VnVisibleColumn from 'src/components/VnTable/VnVisibleColumn.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
+import { dashIfEmpty } from 'src/filters';
 
 const $props = defineProps({
     columns: {
@@ -321,6 +322,32 @@ function handleOnDataSaved(_, res) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
+
+const editingRow = ref(null);
+const editingField = ref(null);
+
+const handleClick = (event) => {
+    const clickedElement = event.target.closest('td');
+
+    if (!clickedElement) return;
+
+    const rowIndex = clickedElement.getAttribute('data-row-index');
+    const colField = clickedElement.getAttribute('data-col-field');
+
+    if (rowIndex !== null && colField) {
+        startEditing(Number(rowIndex), colField);
+    }
+};
+
+const startEditing = (rowId, field) => {
+    editingRow.value = rowId;
+    editingField.value = field;
+};
+
+const stopEditing = () => {
+    editingRow.value = null;
+    editingField.value = null;
+};
 </script>
 <template>
     <QDrawer
@@ -407,6 +434,7 @@ function handleOnDataSaved(_, res) {
             <QTable
                 v-bind="table"
                 class="vnTable"
+                wrap-cells
                 :columns="splittedColumns.columns"
                 :rows="rows"
                 v-model:selected="selected"
@@ -424,9 +452,20 @@ function handleOnDataSaved(_, res) {
                 "
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                 @update:selected="emit('update:selected', $event)"
+                @row-contextmenu="
+                    (event, row, index) =>
+                        console.log('event ', event, ' row ', row, ' index ', index)
+                "
+                @click="handleClick"
             >
                 <template #top-left v-if="!$props.withoutHeader">
-                    <slot name="top-left"></slot>
+                    <QIcon
+                        v-if="$props.isEditable"
+                        name="edit"
+                        color="primary"
+                        size="sm"
+                    />
+                    <slot name="top-left"> </slot>
                 </template>
                 <template #top-right v-if="!$props.withoutHeader">
                     <VnVisibleColumn
@@ -451,9 +490,13 @@ function handleOnDataSaved(_, res) {
                     />
                 </template>
                 <template #header-cell="{ col }">
-                    <QTh v-if="col.visible ?? true" class="q-px-xl">
+                    <QTh
+                        v-if="col.visible ?? true"
+                        class="body-cell"
+                        :style="col?.width ? `max-width: ${col?.width}` : ''"
+                    >
                         <div
-                            class="q-pa-xs"
+                            class="no-padding"
                             :style="$props.columnSearch ? 'height: 75px' : ''"
                         >
                             <div class="text-center" style="height: 30px">
@@ -467,7 +510,7 @@ function handleOnDataSaved(_, res) {
                                 />
                             </div>
                             <VnFilter
-                                v-if="$props.columnSearch"
+                                v-if="$props.columnSearch && col.columnSearch !== false"
                                 :column="col"
                                 :show-title="true"
                                 :data-key="$attrs['data-key']"
@@ -491,15 +534,23 @@ function handleOnDataSaved(_, res) {
                     </QTd>
                 </template>
                 <template #body-cell="{ col, row, rowIndex }">
-                    <!-- Columns -->
                     <QTd
-                        auto-width
+                        :style="{
-                        class="no-margin q-px-xs"
+                            maxWidth: col?.width ?? false,
+                            position: 'relative',
+                        }"
+                        class="no-margin body-cell"
                         :class="[getColAlign(col), col.columnClass]"
                         v-if="col.visible ?? true"
-                        @click.ctrl="
+                        :data-row-index="rowIndex"
-                            ($event) =>
+                        :data-col-field="col?.name"
-                                rowCtrlClickFunction && rowCtrlClickFunction($event, row)
+                        :auto-foucs="col?.tabIndex"
+                    >
+                        <div
+                            v-if="
+                                col?.isEditable === false ||
+                                editingRow !== rowIndex ||
+                                editingField !== col?.name
                             "
                         >
                             <slot
@@ -508,14 +559,42 @@ function handleOnDataSaved(_, res) {
                                 :row="row"
                                 :row-index="rowIndex"
                             >
+                                <QIcon
+                                    v-if="col?.component === 'checkbox'"
+                                    :name="
+                                        row[col?.name]
+                                            ? 'check_box'
+                                            : 'check_box_outline_blank' ||
+                                              'indeterminate_check_box'
+                                    "
+                                    size="sm"
+                                    style="color: var(--vn-label-color)"
+                                    :class="col?.isEditable ?? 'editable-text'"
+                                />
+                                <span
+                                    v-else
+                                    :class="col?.isEditable ?? 'editable-text'"
+                                    :style="col?.style ? col.style(row) : null"
+                                >
+                                    {{
+                                        col?.format
+                                            ? col.format(row, dashIfEmpty)
+                                            : dashIfEmpty(row[col?.name])
+                                    }}
+                                </span>
+                            </slot>
+                        </div>
+                        <div v-else>
                             <VnTableColumn
                                 :column="col"
                                 :row="row"
                                 :is-editable="col.isEditable ?? isEditable"
                                 v-model="row[col.name]"
                                 component-prop="columnField"
+                                class="cell-input"
+                                auto-focus
                             />
-                        </slot>
+                        </div>
                     </QTd>
                 </template>
                 <template #body-cell-tableActions="{ col, row }">
@@ -756,6 +835,40 @@ es:
 </i18n>
 
 <style lang="scss">
+.side-padding {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+.editable-text:hover {
+    border: 1px dashed var(--q-primary);
+    cursor: pointer;
+    @extend .side-padding;
+}
+.editable-text {
+    border-radius: 16px;
+    box-shadow: 0 0 1px 1px rgb(56, 56, 56);
+    border: 1px dashed rgba(0, 0, 0, 0.15);
+    @extend .side-padding;
+}
+
+.cell-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding-top: 0px !important;
+}
+.q-field--labeled .q-field__native,
+.q-field--labeled .q-field__prefix,
+.q-field--labeled .q-field__suffix {
+    padding-top: 20px;
+}
+
+.body-cell {
+    padding-left: 2px !important;
+    padding-right: 2px !important;
+}
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
     color: var(--vn-text-color);
@@ -797,7 +910,9 @@ es:
         }
     }
 }
-
+.q-table tbody tr td {
+    position: relative;
+}
 .q-table {
     th {
         padding: 0;

src/components/common/VnInput.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useAttrs } from 'vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useValidator } from 'src/composables/useValidator';
@@ -57,10 +58,6 @@ const focus = () => {
     vnInputRef.value.focus();
 };
 
-defineExpose({
-    focus,
-});
-import { useAttrs } from 'vue';
 const $attrs = useAttrs();
 
 const mixinRules = [
@@ -76,6 +73,10 @@ const mixinRules = [
         }
     },
 ];
+
+defineExpose({
+    focus,
+});
 </script>
 
 <template>

src/components/ui/FetchedTags.vue

@@ -16,7 +16,13 @@ const $props = defineProps({
         required: false,
         default: 'value',
     },
+    columns: {
+        type: Number,
+        required: false,
+        default: null, // Si es null, no se forzarán columnas
+    },
 });
+
 const tags = computed(() => {
     return Object.keys($props.item)
         .filter((i) => i.startsWith(`${$props.tag}`))
@@ -28,10 +34,20 @@ const tags = computed(() => {
             return acc;
         }, {});
 });
+
+const columnStyle = computed(() => {
+    if ($props.columns) {
+        return {
+            'grid-template-columns': `repeat(${$props.columns}, 1fr)`,
+        };
+    }
+    return {};
+});
 </script>
+
 <template>
     <div class="fetchedTags">
-        <div class="wrap">
+        <div class="wrap" :style="columnStyle">
             <div
                 v-for="(val, key) in tags"
                 :key="key"
@@ -39,7 +55,7 @@ const tags = computed(() => {
                 :title="`${key}: ${val}`"
                 :class="{ empty: !val }"
             >
-                {{ val }}
+                <span>{{ val }} </span>
             </div>
         </div>
     </div>
@@ -51,7 +67,7 @@ const tags = computed(() => {
     .wrap {
         width: 100%;
         flex-wrap: wrap;
-        display: flex;
+        display: grid; /* Cambiado a grid para poder controlar las columnas */
     }
 
     .inline-tag {
@@ -61,8 +77,7 @@ const tags = computed(() => {
         text-align: center;
         font-size: smaller;
         padding: 1px;
-        flex: 1;
+        border: 1px solid var(--vn-label-color);
-        border: 1px solid $color-spacer;
         text-overflow: ellipsis;
         overflow: hidden;
         min-width: 4rem;

src/css/app.scss

@@ -2,6 +2,10 @@
 @import './icons.scss';
 @import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
 
+.tbody {
+    --vn-color-negative: $negative;
+}
+
 body.body--light {
     --font-color: black;
     --vn-header-color: #cecece;
@@ -17,6 +21,8 @@ body.body--light {
     .q-header .q-toolbar {
         color: var(--font-color);
     }
+
+    --vn-color-negative: $negative;
 }
 body.body--dark {
     --vn-header-color: #5d5d5d;
@@ -28,6 +34,8 @@ body.body--dark {
     --vn-accent-color: #424242;
 
     background-color: var(--vn-page-color);
+
+    --vn-color-negative: $negative;
 }
 
 a {
@@ -256,7 +264,6 @@ input::-webkit-inner-spin-button {
         }
         td {
             font-size: 11pt;
-            border-top: 1px solid var(--vn-page-color);
             border-collapse: collapse;
         }
     }

src/css/quasar.variables.scss

@@ -45,3 +45,6 @@ $color-font-secondary: #777;
 .bg-alert {
     background-color: $negative;
 }
+.c-negative {
+    color: $negative;
+}

src/pages/Account/AccountAliasList.vue

@@ -1,82 +1,95 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-
-const tableRef = ref();
-const { t } = useI18n();
-const stateStore = useStateStore();
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
-const columns = computed(() => [
-    {
-        align: 'left',
-        name: 'id',
-        label: t('Id'),
-        isId: true,
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        name: 'alias',
-        label: t('Alias'),
-        cardVisible: true,
-        create: true,
-    },
-    {
-        align: 'left',
-        name: 'description',
-        label: t('Description'),
-        cardVisible: true,
-        create: true,
-    },
-]);
-</script>
-
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
+    <q-page class="q-pa-md">
-        <Teleport to="#searchbar">
+        <q-table title="Editable Table" :rows="rows" :columns="columns" row-key="id">
-            <VnSearchbar
+            <template #body-cell="props">
-                data-key="AccountAliasList"
+                <q-td :props="props">
-                url="MailAliases"
+                    <div
-                :expr-builder="exprBuilder"
+                        v-if="
-                :label="t('mailAlias.search')"
+                            editingRow !== props.row.id || editingField !== props.col.name
-                :info="t('mailAlias.searchInfo')"
+                        "
+                        @dblclick="startEditing(props.row.id, props.col.name)"
+                    >
+                        {{ props.row[props.col.name] }}
+                    </div>
+                    <div v-else>
+                        <q-input
+                            v-model="props.row[props.col.name]"
+                            dense
+                            autofocus
+                            @blur="stopEditing"
+                            @keyup.enter="stopEditing"
                         />
-        </Teleport>
+                    </div>
+                </q-td>
             </template>
-    <VnTable
+        </q-table>
-        ref="tableRef"
+    </q-page>
-        data-key="AccountAliasList"
-        url="MailAliases"
-        :create="{
-            urlCreate: 'MailAliases',
-            title: 'Create MailAlias',
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {},
-        }"
-        order="id DESC"
-        :columns="columns"
-        :disable-option="{ card: true }"
-        default-mode="table"
-        redirect="account/alias"
-        :is-editable="true"
-        :use-model="true"
-    />
 </template>
 
-<i18n>
+<script>
-    es:
+import { ref } from 'vue';
-        Id: Id
+
-        Alias: Alias
+export default {
-        Description: Descripción
+    name: 'EditableTable',
-</i18n>
+    setup() {
+        const editingRow = ref(null);
+        const editingField = ref(null);
+
+        const rows = ref([
+            { id: 1, name: 'Apple', quantity: 10, price: 1.99 },
+            { id: 2, name: 'Banana', quantity: 5, price: 0.99 },
+            { id: 3, name: 'Orange', quantity: 8, price: 1.29 },
+        ]);
+
+        const columns = ref([
+            {
+                name: 'name',
+                required: true,
+                label: 'Product Name',
+                align: 'left',
+                field: 'name',
+            },
+            {
+                name: 'quantity',
+                required: true,
+                label: 'Quantity',
+                align: 'left',
+                field: 'quantity',
+            },
+            {
+                name: 'price',
+                required: true,
+                label: 'Price',
+                align: 'left',
+                field: 'price',
+                format: (val) => `$${val.toFixed(2)}`,
+            },
+        ]);
+
+        const startEditing = (rowId, field) => {
+            editingRow.value = rowId;
+            editingField.value = field;
+        };
+
+        const stopEditing = () => {
+            editingRow.value = null;
+            editingField.value = null;
+        };
+
+        return {
+            rows,
+            columns,
+            editingRow,
+            editingField,
+            startEditing,
+            stopEditing,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.q-td {
+    cursor: pointer;
+}
+</style>

src/pages/Entry/Card/EntryBuys.vue

@@ -2,46 +2,71 @@
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnColor from 'src/components/VnColor.vue';
+import { dashIfEmpty } from 'src/filters';
 
+const { t } = useI18n();
+const selectedRows = ref([]);
 const stateStore = useStateStore();
 const route = useRoute();
-const { t } = useI18n();
 const columns = [
     {
+        align: 'center',
         label: 'Nv',
         name: 'isIgnored',
         component: 'checkbox',
+        width: '35px',
+        tabIndex: 1,
     },
     {
+        align: 'center',
         label: 'Id',
         name: 'itemFk',
         component: 'input',
         create: true,
-        inputStyle: 'text-align: right',
+        width: '45px',
+        tabIndex: 2,
     },
     {
+        label: '',
+        name: 'hex',
+        columnSearch: false,
+        width: '5px',
+    },
+    {
+        align: 'center',
         label: t('Article'),
         name: 'name',
+        width: '100px',
+        isEditable: false,
     },
     {
-        align: 'right',
+        align: 'center',
         label: t('Size'),
         name: 'size',
+        width: '35px',
+        isEditable: false,
+        style: () => {
+            return { color: 'var(--vn-label-color)' };
+        },
     },
     {
-        label: t('Stickers'),
+        align: 'center',
+        label: t('Sti.'),
         name: 'stickers',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '50px',
+        tabIndex: 1,
     },
     {
-        label: t('Packaging'),
+        align: 'center',
+        label: t('Bucket'),
         name: 'packagingFk',
         component: 'select',
         attrs: {
@@ -49,85 +74,110 @@ const columns = [
             fields: ['id', 'volume'],
             optionLabel: 'id',
         },
-        inputStyle: 'text-align: right',
+        width: '60px',
     },
     {
-        label: t('Weight'),
+        align: 'center',
+        label: 'Kg',
         name: 'weight',
         component: 'number',
         create: true,
-        inputStyle: 'text-align: right',
+        width: '35px',
     },
     {
-        label: t('Packing'),
+        label: 'Pack',
         name: 'packing',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '35px',
+        style: (row) => {
+            if (row.groupingMode === 'grouping') {
+                return { color: 'var(--vn-label-color)' };
+            }
+        },
     },
     {
-        label: t('Grouping'),
+        label: 'Group',
         name: 'grouping',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '35px',
+        style: (row) => {
+            if (row.groupingMode === 'packing') {
+                return { color: 'var(--vn-label-color)' };
+            }
+        },
     },
     {
         label: t('Quantity'),
         name: 'quantity',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '50px',
+        style: (row) => {
+            if (row?.quantity !== row?.stickers * row?.packing)
+                return { color: 'var(--q-negative)' };
+        },
     },
     {
         label: t('Amount'),
         name: 'amount',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '50px',
     },
     {
-        label: t('price2'),
+        label: t('Package'),
         name: 'price2',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '35px',
     },
     {
-        label: t('price3'),
+        label: t('Box'),
         name: 'price3',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '35px',
     },
     {
+        align: 'center',
         label: 'Min.',
         name: 'minPrice',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '35px',
+        style: (row) => {
+            if (row?.hasMinPrice) {
+                return { backgroundColor: 'var(--q-positive)', color: 'black' };
+            }
+        },
     },
     {
-        label: t('packingOut'),
+        label: t('P.Sen'),
         name: 'packingOut',
         component: 'number',
-        inputStyle: 'text-align: right',
+        width: '40px',
     },
     {
-        label: 'Com.',
+        align: 'center',
+        label: t('Com.'),
         name: 'comment',
         component: 'input',
-        inputStyle: 'text-align: right',
+        width: '55px',
     },
     {
-        label: t('subName'),
+        label: 'Prod.',
         name: 'subName',
-        inputStyle: 'text-align: right',
-    },
-    {
-        label: t('tags'),
-        name: 'tags',
         component: 'input',
-        inputStyle: 'text-align: right',
+        width: '45px',
     },
     {
-        label: t('companyName'),
+        align: 'center',
+        label: 'Tags',
+        name: 'tags',
+        width: '120px',
+        isEditable: false,
+    },
+    {
+        align: 'center',
+        label: 'Comp.',
         name: 'company_name',
         component: 'input',
-        inputStyle: 'text-align: right',
+        width: '35px',
     },
 ];
 onMounted(() => (stateStore.rightDrawer = false));
@@ -139,12 +189,18 @@ onMounted(() => (stateStore.rightDrawer = false));
         ref="tableRef"
         data-key="EntryBuys"
         :url="`Entries/${route.params.id}/getBuys`"
-        :is-editable="true"
         :right-search="false"
+        :row-click="false"
         :columns="columns"
-        auto-load
         :disable-option="{ card: true }"
+        class="buyList"
+        is-editable
+        auto-load
     >
+        <template #column-hex="{ row }">
+            {{ console.log('row?.hex: ', row?.hex) }}
+            <VnColor :colors="['#ff0000']" />
+        </template>
         <template #column-name="{ row }">
             <span class="link">
                 {{ row?.name }}
@@ -152,28 +208,24 @@ onMounted(() => (stateStore.rightDrawer = false));
             </span>
         </template>
         <template #column-tags="{ row }">
-            <FetchedTags :item="row" :max-length="3" />
+            <FetchedTags :item="row" :columns="3" />
+        </template>
+        <template #column-stickers="{ row }">
+            <span>{{ row.stickers }}</span>
+            <span style="color: var(--vn-label-color)">/{{ row.printedStickers }}</span>
         </template>
     </VnTable>
 </template>
-
-<style lang="scss" scoped>
-.q-table--horizontal-separator tbody tr:nth-child(odd) > td {
-    border-bottom-width: 0px;
-    border-top-width: 2px;
-    border-color: var(--vn-text-color);
-}
-.infoRow > td {
-    color: var(--vn-label-color);
-}
-</style>
-
 <i18n>
 es:
-    Import buys: Importar compras
+    Article: Artículo
-    Buy deleted: Compra eliminada
+    Size: Med.
-    Buys deleted: Compras eliminadas
+    Sti.: Eti.
-    Confirm deletion: Confirmar eliminación
+    Bucket: Cubo
-    Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
+    Quantity: Cantidad
-    Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
+    Amount: Importe
+    Package: Paquete
+    Box: Caja
+    P.Sen: P.Env
+    Com.: Ref.
 </i18n>

src/pages/Entry/Card/EntrySummary.vue

@@ -271,7 +271,7 @@ const fetchEntryBuys = async () => {
                     :disable="true"
                 />
             </QCard>
-            <QCard class="vn-two" style="min-width: 100%">
+            <!--  <QCard class="vn-two" style="min-width: 100%">
                 <a class="header header-link">
                     {{ t('entry.summary.buys') }}
                     <QIcon name="open_in_new" />
@@ -326,13 +326,12 @@ const fetchEntryBuys = async () => {
                                 <FetchedTags :item="row.item" />
                             </QTd>
                         </QTr>
-                        <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                         <QTr v-if="rowIndex !== entryBuys.length - 1">
                             <QTd colspan="10" class="vn-table-separation-row" />
                         </QTr>
                     </template>
                 </QTable>
-            </QCard>
+            </QCard> -->
         </template>
     </CardSummary>
 </template>

src/pages/Entry/EntryList.vue

@@ -89,7 +89,7 @@ const columns = computed(() => [
         format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('entry.list.tableVisibleColumns.isBooked'),
         name: 'isBooked',
         cardVisible: true,
@@ -97,7 +97,7 @@ const columns = computed(() => [
         component: 'checkbox',
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('entry.list.tableVisibleColumns.isConfirmed'),
         name: 'isConfirmed',
         cardVisible: true,
@@ -105,7 +105,7 @@ const columns = computed(() => [
         component: 'checkbox',
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('entry.list.tableVisibleColumns.isOrdered'),
         name: 'isOrdered',
         cardVisible: true,
@@ -154,7 +154,7 @@ const columns = computed(() => [
         cardVisible: true,
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
         name: 'isExcludedFromAvailable',
         chip: {
@@ -165,9 +165,10 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        component: 'checkbox',
     },
     {
-        align: 'left',
+        align: 'center',
         label: t('entry.list.tableVisibleColumns.isRaid'),
         name: 'isRaid',
         chip: {
@@ -178,6 +179,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        component: 'checkbox',
     },
     {
         align: 'right',

src/pages/Worker/Card/WorkerFormation.vue

@@ -94,6 +94,7 @@ const columns = computed(() => [
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
+        component: 'checkbox',
         create: true,
     },
 ]);