adminforth 1.3.56-next.9 → 1.3.57-next.0

package/dist/spa/src/components/ResourceForm.vue

@@ -1,164 +1,62 @@
 <template>
   <div class="rounded-default">
-    <div 
-      class="relative shadow-resourseFormShadow dark:shadow-darkResourseFormShadow sm:rounded-lg dark:shadow-2xl  rounded-default"
-    >
-      <form autocomplete="off" @submit.prevent>
-        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 ">
-          <thead class="text-xs text-gray-700 uppercase bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 block md:table-row-group">
-            <tr>
-              <th scope="col" class="px-6 py-3 hidden md:table-cell">
-                  Field
-              </th>
-              <th scope="col" class="px-6 py-3 w-5/6 hidden md:table-cell">
-                  Value
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-              <tr v-for="column, i in editableColumns" :key="column.name"
-                  v-if="currentValues !== null"
-                  class="bg-ligftForm dark:bg-gray-800 dark:border-gray-700 block md:table-row"
-                  :class="{ 'border-b': i !== editableColumns.length - 1 }"
-              >
-                    <td class="px-6 py-4 sm:pb-0 whitespace-nowrap flex items-center block md:table-cell"> <!--align-top-->
-                      {{ column.label }}
-                      <span :data-tooltip-target="`tooltip-show-${i}`" class="ml-1 relative inline-block">
-                          <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                          :class="(columnError(column) && validating) ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'"
-                          />
-                      </span>
-                      <div :id="`tooltip-show-${i}`"
-                          role="tooltip" 
-                          class="ml-1 absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                          Required field
-                          <div class="tooltip-arrow" data-popper-arrow></div>
-                      </div>
-                    </td>
-                    <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap relative block md:table-cell">
-                    <template v-if="column?.components?.[props.source]?.file">
-                      <component
-                        :is="getCustomComponent(column.components[props.source])"
-                        :column="column"
-                        :value="currentValues[column.name]"
-                        @update:value="setCurrentValue(column.name, $event)"
-                        :meta="column.components[props.source].meta"
-                        :record="currentValues"
-                        @update:inValidity="customComponentsInValidity[column.name] = $event"
-                        @update:emptiness="customComponentsEmptiness[column.name] = $event"
-                      />
-                    </template>
-                    <template v-else>
-                      <Dropdown
-                          single
-                          v-if="column.foreignResource"
-                          :options="columnOptions[column.name] || []"
-                          :placeholder = "columnOptions[column.name]?.length ?'Select...': 'There are no options available'"
-                          :modelValue="currentValues[column.name]"
-                          @update:modelValue="setCurrentValue(column.name, $event)"
-                      ></Dropdown>
-                      <Dropdown
-                          single
-                          v-else-if="column.enum"
-                          :options="column.enum"
-                          :modelValue="currentValues[column.name]"
-                          @update:modelValue="setCurrentValue(column.name, $event)"
-                      />
-                      <Dropdown
-                          single
-                          v-else-if="column.type === 'boolean'"
-                          :options="[{ label: 'Yes', value: true }, { label: 'No', value: false }, { label: 'Unset', value: null }]"
-                          :modelValue="currentValues[column.name]"
-                          @update:modelValue="setCurrentValue(column.name, $event)"
-                      />
-                      <input 
-                          v-else-if="['integer'].includes(column.type)"
-                          type="number" 
-                          step="1"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                          placeholder="0"
-                          :value="currentValues[column.name]"
-                          @input="setCurrentValue(column.name, $event.target.value)"
-                      >
-                      <CustomDatePicker
-                          v-else-if="['datetime'].includes(column.type)"
-                          :column="column"
-                          :valueStart="currentValues[column.name]"
-                          auto-hide
-                          @update:valueStart="setCurrentValue(column.name, $event)"
-                      />
-                      <input
-                          v-else-if="['decimal', 'float'].includes(column.type)"
-                          type="number"
-                          step="0.1"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                          placeholder="0.0"
-                          :value="currentValues[column.name]"
-                          @input="setCurrentValue(column.name, $event.target.value)"
-                      />
-                      <textarea
-                          v-else-if="['text', 'richtext'].includes(column.type)"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                          placeholder="Text"
-                          :value="currentValues[column.name]"
-                          @input="setCurrentValue(column.name, $event.target.value)"
-                      >
-                      </textarea>
-                      <textarea
-                          v-else-if="['json'].includes(column.type)"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                          placeholder="Text"
-                          :value="currentValues[column.name]"
-                          @input="setCurrentValue(column.name, $event.target.value)"
-                      >
-                      </textarea>
-                      <input
-                          v-else
-                          :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
-                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                          placeholder="Text"
-                          :value="currentValues[column.name]"
-                          @input="setCurrentValue(column.name, $event.target.value)"
-                          autocomplete="false"
-                          data-lpignore="true"
-                          readonly
-                          onfocus="this.removeAttribute('readonly');"
-                      >
-
-                      <button
-                          v-if="column.masked"
-                          type="button"
-                          @click="unmasked[column.name] = !unmasked[column.name]"
-                          class="h-6 absolute inset-y-2 top-6 right-6 flex items-center pr-2 z-index-100 focus:outline-none"
-                      >
-                          <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
-                          <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
-                      </button>
-                    </template>
-                    <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
-                    <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
-
-                </td>
-              </tr>
-              
-          </tbody>
-        </table>
-      </form>
-    </div>
+    <form autocomplete="off" @submit.prevent>
+      <div v-if="!coreStore.resource.options.createEditGroups || coreStore.resource.options.createEditGroups.length === 0">
+        <GroupsTable
+        :group="{groupName: '', columns: editableColumns}"
+        :currentValues="currentValues"
+        :editableColumns="editableColumns"
+        :mode="mode"
+        :unmasked="unmasked"
+        :columnOptions="columnOptions"
+        :validating="validating"
+        :columnError="columnError"
+        :setCurrentValue="setCurrentValue"
+        />
+      </div>
+      <div v-else class="flex flex-col gap-4">
+        <template v-for="group in groupedColumns" :key="group.groupName" class="flex flex-col gap-4"> 
+          <GroupsTable
+          :group="group"
+          :currentValues="currentValues"
+          :editableColumns="editableColumns"
+          :mode="mode"
+          :unmasked="unmasked"
+          :columnOptions="columnOptions"
+          :validating="validating"
+          :columnError="columnError"
+          :setCurrentValue="setCurrentValue"
+          />
+        </template>
+        <div v-if="otherColumns.length > 0">
+          <GroupsTable
+          :group="{groupName: 'Other', columns: otherColumns}"
+          :currentValues="currentValues"
+          :editableColumns="editableColumns"
+          :mode="mode"
+          :unmasked="unmasked"
+          :columnOptions="columnOptions"
+          :validating="validating"
+          :columnError="columnError"
+          :setCurrentValue="setCurrentValue"
+          />
+        </div>
+      </div>
+    </form>
   </div>
 
 </template>
 
 <script setup>
 
-import CustomDatePicker from "@/components/CustomDatePicker.vue";
-import Dropdown from '@/components/Dropdown.vue';
-import { applyRegexValidation, callAdminForthApi, getCustomComponent } from '@/utils';
-import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
+import { applyRegexValidation, callAdminForthApi} from '@/utils';
 import { computedAsync } from '@vueuse/core';
-import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import { useCoreStore } from "@/stores/core";
+import GroupsTable from '@/components/GroupsTable.vue';
+
+const coreStore = useCoreStore();
 
 const router = useRouter();
 const route = useRoute();
@@ -179,7 +77,6 @@ const currentValues = ref(null);
 
 const customComponentsInValidity = ref({});
 const customComponentsEmptiness = ref({});
-  
 
 const columnError = (column) => {
   const val = computed(() => {
@@ -281,9 +178,6 @@ onMounted(() => {
       currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
     }
   });
-  console.log('currentValues', currentValues.value);
-
-  initFlowbite();
   emit('update:isValid', isValid.value);
 });
 
@@ -310,14 +204,34 @@ const columnOptions = computedAsync(async () => {
 
 
 const editableColumns = computed(() => {
-  const mode = props.record ? 'edit' : 'create';
-  return props.resource?.columns?.filter(column => column.showIn.includes(mode));
+  return props.resource?.columns?.filter(column => column.showIn.includes(mode.value));
 });
 
 const isValid = computed(() => {
   return editableColumns.value?.every(column => !columnError(column));
 });
 
+
+const groups = coreStore.resource.options.createEditGroups;
+
+const groupedColumns = computed(() => {
+  if (!groups || groups.length === 0) return [];
+
+  return groups.map(group => ({
+    ...group,
+    columns: props.resource.columns.filter(col => group.columns.includes(col.name) && editableColumns.value.includes(col))
+  }));
+});
+
+const getOtherColumns = () => {
+  if (!groups || groups.length === 0) return;
+
+  const groupedColumnNames = new Set(groupedColumns.value.flatMap(group => group.columns.map(col => col.name)));
+  return editableColumns.value.filter(col => !groupedColumnNames.has(col.name));
+};
+
+const otherColumns = getOtherColumns();
+
 watch(() => isValid.value, (value) => {
   emit('update:isValid', value);
 });

package/dist/spa/src/components/ResourceListTable.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- table -->
-  <div class="relative overflow-x-auto shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-y-hidden"
+  <div class="relative shadow-listTableShadow dark:shadow-darkListTableShadow	overflow-auto "
     :class="{'rounded-default': !noRoundings}"
   >
     <!-- skelet loader -->
@@ -11,53 +11,55 @@
             <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
         </div>      
     </div>
+    <table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
 
-    <table v-else class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-      <thead class="text-xs text-view-table-heading-text bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
-      <tr>
-        <th scope="col" class="p-4">
-          <div v-if="rows && rows.length" class="flex items-center">
-            <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
-                  class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-            <label for="checkbox-all-search" class="sr-only">checkbox</label>
-          </div>
-        </th>
-
-        <th v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
-         
-          <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
-              class="flex items-center " :class="{'cursor-pointer':c.sortable}">
-            {{ c.label }}
-
-            <div v-if="c.sortable"
-                :style="{ 'color':ascArr.includes(c.name)?'green':descArr.includes(c.name)?'red':'currentColor'}">
-              <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
-                  :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
-                <path
-                  d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
-              </svg>
-              <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                  fill='currentColor'
-                  viewBox="0 0 24 24">
-                <path
-                  d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
-              </svg>
-            </div>
-            <span
-             class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-             v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
-            {{ sort.findIndex((s) => s.field === c.name) + 1 }}
-            </span>
-
-          </div>
-        </th>
-
-        <th scope="col" class="px-6 py-3">
-          Actions
-        </th>
-      </tr>
-      </thead>
       <tbody>
+
+        <!-- table header -->
+        <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
+          <td scope="col" class="p-4">
+            <div v-if="rows && rows.length" class="flex items-center">
+              <input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()" 
+                    class="w-4 h-4 cursor-pointer text-blue-600 bg-gray-100 border-gray-300 rounded
+                    focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="checkbox-all-search" class="sr-only">checkbox</label>
+            </div>
+          </td>
+
+          <td v-for="c in columnsListed" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
+          
+            <div @click="(evt) => c.sortable && onSortButtonClick(evt, c.name)" 
+                class="flex items-center " :class="{'cursor-pointer':c.sortable}">
+              {{ c.label }}
+
+              <div v-if="c.sortable">
+                <svg v-if="ascArr.includes(c.name) || descArr.includes(c.name)" class="w-3 h-3 ms-1.5"
+                    fill='currentColor'
+                    :class="{'rotate-180':descArr.includes(c.name)}" viewBox="0 0 24 24">
+                  <path
+                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847"/>
+                </svg>
+                <svg v-else class="w-3 h-3 ms-1.5 opacity-30" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                    fill='currentColor'
+                    viewBox="0 0 24 24">
+                  <path
+                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
+                </svg>
+              </div>
+              <span
+                class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
+                v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
+                {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+              </span>
+
+            </div>
+          </td>
+
+          <td scope="col" class="px-6 py-3">
+            Actions
+          </td>
+        </tr>
+        <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
           :columns="resource?.columns.filter(c => c.showIn.includes('list')).length + 2"
@@ -106,65 +108,57 @@
             />
           </td>
           <td class=" items-center px-2 md:px-3 lg:px-6 py-4 cursor-default" @click="(e)=>{e.stopPropagation()}">
-            <div class="flex">
-              <RouterLink
-                v-if="resource.options?.allowedActions.show"
-                :to="{ 
-                  name: 'resource-show', 
-                  params: { 
-                    resourceId: resource.resourceId, 
-                    primaryKey: row._primaryKeyValue,
-                  }
-                }"
-                class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline"
-                :data-tooltip-target="`tooltip-show-${rowI}`"
-              >
-                <IconEyeSolid class="w-5 h-5 me-2"/>
-              </RouterLink>
-
-              <div :id="`tooltip-show-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Show item
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
-              <RouterLink v-if="resource.options?.allowedActions.edit"
-                :to="{
-                  name: 'resource-edit',
-                  params: { 
-                    resourceId: resource.resourceId,
-                    primaryKey: row._primaryKeyValue 
-                  } 
-                }"
-                class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-                :data-tooltip-target="`tooltip-edit-${rowI}`"
-              >
-                <IconPenSolid class="w-5 h-5 me-2"/>
-              </RouterLink>
-
-              <div :id="`tooltip-edit-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Edit
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
-              <button v-if="resource.options?.allowedActions.delete"
-                      class="font-medium text-lightPrimary dark:text-darkPrimary hover:underline ms-3"
-                      :data-tooltip-target="`tooltip-delete-${rowI}`"
-                      @click="deleteRecord(row)"
-              >
-                <IconTrashBinSolid class="w-5 h-5 me-2"/>
-              </button>
-
-              <div :id="`tooltip-delete-${rowI}`"
-                  role="tooltip"
-                  class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                Delete
-                <div class="tooltip-arrow" data-popper-arrow></div>
-              </div>
-
+            <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
+              <AfTooltip>
+                <RouterLink
+                  v-if="resource.options?.allowedActions.show"
+                  :to="{ 
+                    name: 'resource-show', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+
+                >
+                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                </RouterLink>
+
+                <template v-slot:tooltip>
+                  Show item
+                </template>
+              </AfTooltip>
+
+              <AfTooltip>
+                <RouterLink
+                  v-if="resource.options?.allowedActions.edit"
+                  :to="{ 
+                    name: 'resource-edit', 
+                    params: { 
+                      resourceId: resource.resourceId, 
+                      primaryKey: row._primaryKeyValue,
+                    }
+                  }"
+                >
+                  <IconPenSolid class="w-5 h-5 me-2"/>
+                </RouterLink>
+                <template v-slot:tooltip>
+                  Edit item
+                </template>
+              </AfTooltip>
+
+              <AfTooltip>
+                <button
+                  v-if="resource.options?.allowedActions.delete"
+                  @click="deleteRecord(row)"
+                >
+                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                </button>
+
+                <template v-slot:tooltip>
+                  Delete item
+                </template>
+              </AfTooltip>
                 
               <template v-if="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons">
                 <component 
@@ -185,30 +179,23 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-col items-center mt-4 mb-4 xs:flex-row xs:justify-between xs:items-center"
+  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
     v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
   >
-    <!-- Help text -->
-    <span class="text-sm text-gray-700 dark:text-gray-400">
-          Showing <span class="font-semibold text-gray-900 dark:text-white">
-            {{ ((page || 1) - 1) * pageSize + 1 }}
-          </span> to <span class="font-semibold text-gray-900 dark:text-white">
-            {{ Math.min((page || 1) * pageSize, totalRows) }}
-          </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
-        totalRows
-      }}</span> Entries
-      </span>
-    <div class="inline-flex mt-2 xs:mt-0">
+    
+    <div class="inline-flex ">
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page--" :disabled="page <= 1">
-          <svg class="w-3.5 h-3.5 me-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M13 5H1m0 0 4 4M1 5l4-4"/>
           </svg>
-          Prev
+          <span class="hidden sm:inline">
+            Prev
+          </span>
         </button>
         <button
           class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
@@ -232,11 +219,10 @@
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
-
+          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page++" :disabled="page >= totalPages">
-          Next
-          <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+          <span class="hidden sm:inline">Next</span>
+          <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                   d="M1 5h12m0 0L9 1m4 4L9 9"/>
@@ -244,6 +230,17 @@
         </button>
     </div>
 
+    <!-- Help text -->
+    <span class="text-sm text-gray-700 dark:text-gray-400">
+        <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">Wrong Page </span>
+        <span v-else>Showing </span> 
+        <span class="font-semibold text-gray-900 dark:text-white">
+          {{ ((page || 1) - 1) * pageSize + 1 }}
+        </span> to <span class="font-semibold text-gray-900 dark:text-white">
+          {{ Math.min((page || 1) * pageSize, totalRows) }}
+        </span> of <span class="font-semibold text-gray-900 dark:text-white">{{
+          totalRows }}</span> <span class="hidden sm:inline">Entries</span>
+    </span>
   </div>
 </template>
 
@@ -269,9 +266,11 @@ import {
   IconTrashBinSolid
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
+import AfTooltip from './AfTooltip.vue';
 
 const coreStore = useCoreStore();
 
+
 const props = defineProps([
   'page',
   'resource', 

package/dist/spa/src/renderers/CompactField.vue

@@ -0,0 +1,45 @@
+<template>
+  <AfTooltip>
+    <span class="flex items-center">
+      {{ visualValue }} <IconFileCopyAltSolid @click.stop="copyToCB" class="w-5 h-5 text-lightPrimary dark:text-darkPrimary" v-if="visualValue"/>
+    </span>
+    <template #tooltip v-if="visualValue">
+      {{ props.record[props.column.name] }}
+    </template>
+  </AfTooltip>
+  
+</template>
+
+<script setup>  
+import { computed, ref, onMounted, nextTick } from 'vue';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import AfTooltip from '@/components/AfTooltip.vue';
+
+
+const visualValue = computed(() => {
+  // if lenght is more then 8, show only first 4 and last 4 characters, ... in the middle
+  const val = props.record[props.column.name];
+  if (val && val.length > 8) {
+    return `${val.substr(0, 4)}...${val.substr(val.length - 4)}`;
+  }
+  return val;
+});
+
+const props = defineProps(['column', 'record', 'meta']);
+
+const id = ref();
+
+function copyToCB() {
+  navigator.clipboard.writeText(props.record[props.column.name]);
+  window.adminforth.alert({
+    message: 'ID copied to clipboard',
+    variant: 'success',
+  })
+}
+
+onMounted(async () => {
+  id.value = Math.random().toString(36).substring(7);
+  await nextTick();
+});
+
+</script>