Dashboard final version, TODO: update main sidebar menu

resources/js/Components/DocumentsTable/DocumentsTable.vue

@@ -45,6 +45,7 @@ const props = defineProps({
 
 // Define columns for DataTable
 const columns = [
+  { key: "key", label: "#", sortable: false, align: "center" },
   { key: "name", label: "Naziv", sortable: false },
   { key: "type", label: "Vrsta", sortable: false },
   { key: "size", label: "Velikost", align: "right", sortable: false },
@@ -292,23 +293,27 @@ function closeActions() {
       <template #toolbar-actions>
         <slot name="add" />
       </template>
+      <!-- Key column -->
+      <template #cell-key="{ row }">
+        <Badge
+          v-if="row.is_public"
+          variant="secondary"
+          class="bg-green-100 text-green-700 hover:bg-green-200 shrink-0"
+          >Public</Badge
+        >
+      </template>
       <!-- Name column -->
       <template #cell-name="{ row }">
         <div>
           <div class="flex items-center gap-2">
             <button
               type="button"
-              class="text-indigo-600 hover:underline"
+              class="text-indigo-600 hover:underline max-w-xs truncate"
+              :title="row.name"
               @click.stop="$emit('view', row)"
             >
-              {{ row.name }}
+              {{ row.name.length > 15 ? row.name.substring(0, 15) + "..." : row.name }}
             </button>
-            <Badge
-              v-if="row.is_public"
-              variant="secondary"
-              class="bg-green-100 text-green-700 hover:bg-green-200"
-              >Public</Badge
-            >
           </div>
           <!-- Expanded description -->
           <div