From c2bb9a9b77deee5063840434366cc0d85a1caf0e Mon Sep 17 00:00:00 2001
From: AfonsoCMSousa <afonsoclerigomendesousa@gmail.com>
Date: Thu, 22 Jan 2026 15:34:33 +0000
Subject: [PATCH] feat: admin panel

---
 app/pages/index.vue         | 963 +++++++++++++++++++++++-------------
 app/pages/profile/index.vue | 136 ++++-
 2 files changed, 719 insertions(+), 380 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 08c384b..1030ea1 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,225 +1,404 @@
 <template>
-  <div
-    class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
-    <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
+    <div
+        class="min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+        <div class="max-w-6xl mx-auto flex gap-6 py-8 px-4">
 
-      <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
-        <div class="sticky top-8">
-          <div class="flex flex-col gap-2">
-            <button v-for="tag in availableTags" :key="tag.id" :class="[
-              'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
-              subscribedTags.includes(tag.id)
-                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
-                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
-            ]" @click="toggleTagSubscription(tag)">
-              <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
-              {{ tag.name }}
-            </button>
-          </div>
-        </div>
-      </aside>
-
-      <main :class="[
-        'py-8 flex-1 transition-all duration-500 ease-in-out',
-        selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
-      ]">
-
-        <div v-show="!selectedPost" class="space-y-4">
-          <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
-            <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
-              <div class="relative flex-1 sm:flex-none">
-                <input v-model="searchQuery" type="text" placeholder="Search posts..."
-                  class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
-              </div>
-              <div class="flex items-center">
-                <select v-model="sortBy"
-                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
-                  <option value="date">Date</option>
-                  <option value="votes">Rating</option>
-                  <option value="comments">Comments</option>
-                </select>
-                <button
-                  class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                  :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
-                  <span class="inline-block transition-transform duration-200" :class="{ 'rotate-180': !sortDesc }">
-                    ▼
-                  </span>
-                </button>
-              </div>
-
-              <select v-model="filterType"
-                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
-                <option value="ALL">All Types</option>
-                <option value="CONFERENCE_PAPER">Conference Paper</option>
-                <option value="RESEARCH_POST">Research Post</option>
-              </select>
-            </div>
-
-            <button
-              class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
-              title="New Post" @click="isModalOpen = true">
-              <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
-                xmlns="http://www.w3.org/2000/svg">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-            </button>
-          </div>
-          <div v-if="filteredPosts.length === 0 && !loading"
-            class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
-
-            <div
-              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
-
-            <div class="relative z-10 flex flex-col items-center">
-              <div
-                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
-                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
-                  stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                </svg>
-              </div>
-
-              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
-                No publications yet
-              </h3>
-
-              <button
-                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
-                @click="isModalOpen = true">
-                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-                </svg>
-                Submit your first post
-              </button>
-            </div>
-          </div>
-          <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
-            enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
-            <div v-for="post in filteredPosts" :key="post.id"
-              class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
-              @click="fetchPostDetail(post.id)">
-              <div class="flex gap-4">
-                <div
-                  class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
-                  <button class="hover:text-blue-500 transition-colors text-lg" @click.stop="post.rating++">▲</button>
-                  <span class="text-xs font-bold">{{ post.rating }}</span>
-                  <button class="hover:text-red-500 transition-colors text-lg" @click.stop="post.rating--">▼</button>
-                </div>
-
-                <div class="flex-1">
-                  <div class="flex items-center gap-2 mb-1">
-                    <span
-                      class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
-                      {{ post.type.replace('_', ' ') }}
-                    </span>
-                    <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
-                  </div>
-                  <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}</h2>
-                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{ post.authors.join(', ') }}
-                  </p>
-                  <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
-                    <span>💬 {{ post.comment_count }} Comments</span>
-                    <div class="flex gap-2">
-                      <span v-for="tag in post.tags" :key="tag.id" class="text-blue-600 dark:text-blue-400">#{{ tag.name
-                      }}</span>
+            <aside v-if="!selectedPost" class="hidden lg:block w-fit min-w-[160px] py-24">
+                <div class="sticky top-8">
+                    <div class="flex flex-col gap-2">
+                        <button v-for="tag in availableTags" :key="tag.id" :class="[
+                            'px-3 py-2 rounded-lg text-xs font-bold transition-all text-left shadow-sm cursor-pointer',
+                            subscribedTags.includes(tag.id)
+                                ? `${tag.color} border-current ring-1 ring-inset ring-black/5`
+                                : 'bg-gray-50 dark:bg-gray-800 dark:border-gray-800 border opacity-60 hover:opacity-100'
+                        ]" @click="toggleTagSubscription(tag)">
+                            <span class="opacity-70 mr-1">{{ subscribedTags.includes(tag.id) ? '✓' : '#' }}</span>
+                            {{ tag.name }}
+                        </button>
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
-          </TransitionGroup>
+            </aside>
 
-          <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
-            <div v-for="i in 6" :key="i"
-              class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
-              <div class="flex gap-4">
-                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
-                <div class="flex-1 space-y-3">
-                  <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
-                  <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
-                  <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
-                </div>
-              </div>
-            </div>
-          </div>
+            <main :class="[
+                'py-8 flex-1 transition-all duration-500 ease-in-out',
+                selectedPost ? 'max-w-3xl mx-auto' : 'max-w-2xl'
+            ]">
 
-          <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
-            <div v-if="loading"
-              class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
-          </div>
+                <div v-show="!selectedPost" class="space-y-4">
+                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+                        <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+                            <div class="relative flex-1 sm:flex-none">
+                                <input v-model="searchQuery" type="text" placeholder="Search posts..."
+                                    class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                            </div>
+                            <div class="flex items-center">
+                                <select v-model="sortBy"
+                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                                    <option value="date">Date</option>
+                                    <option value="votes">Rating</option>
+                                    <option value="comments">Comments</option>
+                                </select>
+                                <button
+                                    class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                                    :title="sortDesc ? 'Descending' : 'Ascending'" @click="sortDesc = !sortDesc">
+                                    <span class="inline-block transition-transform duration-200"
+                                        :class="{ 'rotate-180': !sortDesc }">
+                                        ▼
+                                    </span>
+                                </button>
+                            </div>
 
-        </div>
-        <div v-if="selectedPost" class="animate-fade-in-up">
-          <button
-            class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
-            @click="selectedPost = null">
-            ← BACK TO FEED
-          </button>
+                            <select v-model="filterType"
+                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                                <option value="ALL">All Types</option>
+                                <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                <option value="RESEARCH_POST">Research Post</option>
+                            </select>
+                        </div>
 
-          <article class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-8 shadow-lg">
-            <header class="mb-6">
-              <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight">{{ selectedPost.title
-              }}</h1>
-              <div class="flex items-center gap-3 text-sm">
-                <span class="bg-blue-600 text-white px-3 py-1 rounded-md font-bold text-xs uppercase">{{
-                  selectedPost.type
-                }}</span>
-                <span class="text-gray-500 font-medium">By <span class="text-blue-500">{{ selectedPost.submitter.name
-                    }}</span></span>
-              </div>
-            </header>
-
-            <div class="prose dark:prose-invert max-w-none mb-8">
-              <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-2">Abstract</h4>
-              <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg">{{ selectedPost.abstract }}</p>
-            </div>
-
-            <hr class="border-gray-100 dark:border-gray-800 mb-8">
-
-            <section class="mb-10">
-              <h3 class="text-xl font-bold mb-4">Comments ({{ selectedPost.comments.length }})</h3>
-              <div class="space-y-3">
-                <textarea v-model="newCommentContent" rows="3"
-                  class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
-                  placeholder="What are your thoughts?" />
-                <div class="flex justify-end">
-                  <button :disabled="!newCommentContent.trim()"
-                    class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
-                    @click="submitComment">
-                    COMMENT
-                  </button>
-                </div>
-              </div>
-
-              <div class="mt-8 space-y-6">
-                <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
-                  <div class="w-0.5 bg-gray-200 dark:bg-gray-800 rounded-full ml-2" />
-                  <div class="flex-1">
-                    <div class="flex items-center gap-2 mb-1">
-                      <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{ comment.author.name }}</span>
-                      <span class="text-[10px] text-gray-500 font-bold uppercase">{{ new
-                        Date(comment.created_at).toLocaleDateString() }}</span>
+                        <button
+                            class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all active:scale-95 flex items-center justify-center group"
+                            title="New Post" @click="isModalOpen = true">
+                            <svg viewBox="0 0 24 24" class="w-5 h-5 fill-none stroke-current stroke-[2.5]"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <line x1="12" y1="5" x2="12" y2="19" />
+                                <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
+                        </button>
                     </div>
-                    <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
-                      {{ comment.content }}
-                    </p>
-                  </div>
+                    <div v-if="filteredPosts.length === 0 && !loading"
+                        class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
+
+                        <div
+                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-blue-500/10 dark:bg-blue-400/10 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
+
+                        <div class="relative z-10 flex flex-col items-center">
+                            <div
+                                class="mb-4 p-4 bg-white dark:bg-slate-800 rounded-full shadow-sm ring-1 ring-slate-100 dark:ring-slate-700 group-hover:scale-110 group-hover:ring-blue-200 dark:group-hover:ring-blue-800 transition-all duration-300">
+                                <svg class="w-8 h-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
+                                    stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                            </div>
+
+                            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">
+                                No publications yet
+                            </h3>
+
+                            <button
+                                class="inline-flex items-center gap-2 px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30 transform active:scale-95 transition-all duration-200 cursor-pointer"
+                                @click="isModalOpen = true">
+                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M12 4v16m8-8H4" />
+                                </svg>
+                                Submit your first post
+                            </button>
+                        </div>
+                    </div>
+                    <TransitionGroup v-else appear enter-active-class="transition duration-500 ease-out"
+                        enter-from-class="translate-y-4 opacity-0" enter-to-class="translate-y-0 opacity-100">
+                        <div v-for="post in filteredPosts" :key="post.id"
+                            class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+                            @click="fetchPostDetail(post.id)">
+                            <div class="flex gap-4">
+                                <div
+                                    class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+
+                                    <button class="hover:text-blue-500 transition-colors text-lg"
+                                        :class="{ 'text-orange-500': post.my_vote === 'UP' }"
+                                        @click.stop="votePost(post, 1)">▲</button>
+
+                                    <span class="text-xs font-bold">{{ post.rating }}</span>
+
+                                    <button class="hover:text-red-500 transition-colors text-lg"
+                                        :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
+                                        @click.stop="votePost(post, -1)">▼</button>
+                                </div>
+
+                                <div class="flex-1">
+                                    <div class="flex items-center gap-2 mb-1">
+                                        <span
+                                            class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                                            {{ post.type.replace('_', ' ') }}
+                                        </span>
+                                        <span class="text-xs text-gray-500">{{ post.publication_date }}</span>
+                                    </div>
+                                    <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{ post.title }}
+                                    </h2>
+                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By {{
+                                        post.authors.join(', ') }}
+                                    </p>
+                                    <div class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
+                                        <span>💬 {{ post.comment_count }} Comments</span>
+                                        <div class="flex gap-2">
+                                            <span v-for="tag in post.tags" :key="tag.id"
+                                                class="text-blue-600 dark:text-blue-400">#{{ tag.name
+                                                }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </TransitionGroup>
+
+                    <div v-if="loading && filteredPosts.length === 0" class="space-y-4">
+                        <div v-for="i in 6" :key="i"
+                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 animate-pulse">
+                            <div class="flex gap-4">
+                                <div class="w-10 h-16 bg-gray-100 dark:bg-gray-800 rounded-lg" />
+                                <div class="flex-1 space-y-3">
+                                    <div class="h-3 w-24 bg-gray-100 dark:bg-gray-800 rounded" />
+                                    <div class="h-5 w-3/4 bg-gray-100 dark:bg-gray-800 rounded" />
+                                    <div class="h-3 w-full bg-gray-100 dark:bg-gray-800 rounded" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div ref="loadMoreTrigger" class="h-20 w-full flex flex-col items-center justify-center gap-2">
+                        <div v-if="loading"
+                            class="animate-spin h-6 w-6 border-2 border-blue-600 border-t-transparent rounded-full" />
+                    </div>
+
                 </div>
-              </div>
-            </section>
-          </article>
+                <div v-if="selectedPost" class="animate-fade-in-up">
+                    <button
+                        class="mb-6 flex items-center gap-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:underline"
+                        @click="selectedPost = null">
+                        ← BACK TO FEED
+                    </button>
+
+                    <article
+                        class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden">
+
+                        <div
+                            class="relative bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 p-8 border-b dark:border-gray-800">
+                            <div
+                                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4">
+                                <span
+                                    class="bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-blue-200 dark:border-blue-800">
+                                    {{ selectedPost.type.replace('_', ' ') }}
+                                </span>
+                                <span
+                                    class="text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                    </svg>
+                                    {{ new Date(selectedPost.publicationDate).toLocaleDateString('en-US', {
+                                        year:
+                                            'numeric', month: 'long', day: 'numeric'
+                                    }) }}
+                                </span>
+                            </div>
+
+                            <h1
+                                class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
+                                {{ selectedPost.title }}
+                            </h1>
+
+                            <div
+                                class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 bg-white/50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
+
+                                <div>
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Authors
+                                    </h4>
+                                    <div class="flex flex-wrap gap-2">
+                                        <span v-for="(author, idx) in selectedPost.authors" :key="idx"
+                                            class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200">
+                                            <span
+                                                class="w-6 h-6 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-300 flex items-center justify-center text-xs">
+                                                {{ author.charAt(0) }}
+                                            </span>
+                                            {{ author }}
+                                        </span>
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Submitted
+                                        By</h4>
+                                    <div class="flex items-center gap-3">
+                                        <div
+                                            class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold text-xs">
+                                            {{ selectedPost.submitter.name.charAt(0) }}
+                                        </div>
+                                        <div>
+                                            <div class="text-sm font-bold text-gray-900 dark:text-white">{{
+                                                selectedPost.submitter.name }}</div>
+                                            <div class="text-xs text-gray-500">{{ selectedPost.submitter.role }} • {{
+                                                selectedPost.submitter.email }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="p-8">
+                            <div class="mb-10">
+                                <h3
+                                    class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                                    <svg class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24"
+                                        stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M4 6h16M4 12h16M4 18h7" />
+                                    </svg>
+                                    Abstract
+                                </h3>
+                                <p
+                                    class="text-gray-700 dark:text-gray-300 leading-relaxed text-lg text-justify whitespace-pre-line">
+                                    {{ selectedPost.abstractText }}
+                                </p>
+                            </div>
+
+                            <div
+                                class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8 pb-8 border-b dark:border-gray-800">
+                                <div v-if="selectedPost.tags && selectedPost.tags.length > 0">
+                                    <h4 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">Tags</h4>
+                                    <div class="flex flex-wrap gap-2">
+                                        <span v-for="tag in selectedPost.tags" :key="tag.id"
+                                            class="px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-sm font-medium border border-gray-200 dark:border-gray-700">
+                                            #{{ tag.name }}
+                                        </span>
+                                    </div>
+                                </div>
+                                <div v-else class="text-sm text-gray-400 italic">No tags assigned</div>
+
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        class="flex items-center bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-1.5 shadow-sm">
+
+                                        <button @click="votePost(selectedPost, 1)"
+                                            class="p-2 rounded-lg transition-all active:scale-90"
+                                            :class="selectedPost.my_vote === 'UP' ? 'text-orange-600 bg-orange-100 dark:bg-orange-900/30' : 'text-slate-400 hover:text-orange-500 hover:bg-white dark:hover:bg-slate-700'"
+                                            title="Upvote">
+                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                                stroke-width="2.5">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M5 15l7-7 7 7" />
+                                            </svg>
+                                        </button>
+
+                                        <div class="min-w-[40px] text-center">
+                                            <span class="text-2xl font-black tracking-tight" :class="{
+                                                'text-orange-600': selectedPost.my_vote === 'UP',
+                                                'text-blue-600': selectedPost.my_vote === 'DOWN',
+                                                'text-slate-900 dark:text-white': !selectedPost.my_vote || selectedPost.my_vote === 'NONE'
+                                            }">
+                                                {{ selectedPost.rating }}
+                                            </span>
+                                        </div>
+
+                                        <button @click="votePost(selectedPost, -1)"
+                                            class="p-2 rounded-lg transition-all active:scale-90"
+                                            :class="selectedPost.my_vote === 'DOWN' ? 'text-blue-600 bg-blue-100 dark:bg-blue-900/30' : 'text-slate-400 hover:text-blue-500 hover:bg-white dark:hover:bg-slate-700'"
+                                            title="Downvote">
+                                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                                                stroke-width="2.5">
+                                                <path stroke-linecap="round" stroke-linejoin="round"
+                                                    d="M19 9l-7 7-7-7" />
+                                            </svg>
+                                        </button>
+                                    </div>
+
+                                </div>
+
+
+                            </div>
+
+                            <div v-if="selectedPost.attachedFile"
+                                class="mb-10 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:border-blue-400 transition-colors group">
+                                <div class="flex items-center justify-between">
+                                    <div class="flex items-center gap-4">
+                                        <div
+                                            class="p-3 bg-red-100 text-red-600 rounded-lg group-hover:scale-110 transition-transform">
+                                            <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                    d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <div class="font-bold text-gray-900 dark:text-white mb-0.5">Attachment
+                                                Available</div>
+                                            <div
+                                                class="text-xs text-gray-500 font-mono truncate max-w-[200px] md:max-w-md">
+                                                {{ getFileName(selectedPost.attachedFile) }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button @click="downloadFile(selectedPost)"
+                                        class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-lg shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all">
+                                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                                        </svg>
+                                        Download
+                                    </button>
+                                </div>
+                            </div>
+
+                            <hr class="border-gray-100 dark:border-gray-800 mb-8">
+
+                            <section>
+                                <h3 class="text-xl font-bold mb-6 flex items-center gap-2">
+                                    Comments
+                                    <span
+                                        class="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs px-2 py-1 rounded-full">{{
+                                            selectedPost.comments.length }}</span>
+                                </h3>
+                                <div class="space-y-3">
+                                    <textarea v-model="newCommentContent" rows="3"
+                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none transition-all text-sm"
+                                        placeholder="What are your thoughts?" />
+                                    <div class="flex justify-end">
+                                        <button :disabled="!newCommentContent.trim()"
+                                            class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-2 rounded-lg shadow transition-all active:scale-95"
+                                            @click="submitComment">
+                                            COMMENT
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div class="mt-8 space-y-6">
+                                    <div v-if="selectedPost.comments.length === 0"
+                                        class="text-center py-8 text-gray-400 italic">
+                                        Be the first to comment!
+                                    </div>
+
+                                    <div v-for="comment in selectedPost.comments" :key="comment.id" class="flex gap-4">
+                                        <div
+                                            class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 flex-shrink-0" />
+                                        <div class="flex-1">
+                                            <div
+                                                class="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-xl rounded-tl-none border border-gray-100 dark:border-gray-800">
+                                                <div class="flex items-center justify-between mb-2">
+                                                    <span class="font-bold text-sm text-blue-600 dark:text-blue-400">{{
+                                                        comment.author.name }}</span>
+                                                    <span class="text-[10px] text-gray-400 uppercase">{{ new
+                                                        Date(comment.created_at).toLocaleDateString() }}</span>
+                                                </div>
+                                                <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                                                    {{ comment.content }}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </article>
+                </div>
+                <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
+                    @refresh="handleRefresh" />
+            </main>
         </div>
-        <CreatePostModal :is-open="isModalOpen" :api="api" :token="token" @close="closeModal()"
-          @refresh="handleRefresh" />
-      </main>
     </div>
-  </div>
 </template>
 
 
-<script setup>
+<script setup lang="ts">
 import { useAuthStore } from "~/stores/auth-store.js";
 import { storeToRefs } from "pinia";
 import { useRoute } from 'vue-router';
@@ -239,6 +418,7 @@ const loadMoreTrigger = ref(null);
 const isModalOpen = ref(false);
 const searchQuery = ref('');
 const page = ref(1);
+const hasMore = ref(true);
 
 const sortBy = ref('date');
 const sortDesc = ref(true);
@@ -253,225 +433,296 @@ const newCommentContent = ref('');
 // Form States
 
 const checkQueryForModal = () => {
-  if (route.query.openCreatePostModal === 'true') {
-    isModalOpen.value = true;
-  }
+    if (route.query.openCreatePostModal === 'true') {
+        isModalOpen.value = true;
+    }
 }
 
 const closeModal = () => {
-  const router = useRouter();
-  isModalOpen.value = false;
-  router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
+    const router = useRouter();
+    isModalOpen.value = false;
+    router.replace({ query: { ...route.query, openCreatePostModal: undefined } });
 };
 
 const fetchTags = async () => {
-  try {
-    const allTags = await $fetch(`${api}/tags`, {
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+    try {
+        const allTags = await $fetch(`${api}/tags`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-    const colors = [
-      "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
-      "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
-      "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
-      "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
-      "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
-    ];
+        const colors = [
+            "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400",
+            "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400",
+            "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400",
+            "bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-400",
+            "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+        ];
 
-    availableTags.value = allTags.map((tag, index) => ({
-      ...tag,
-      color: colors[index % colors.length]
-    }));
+        availableTags.value = allTags.map((tag, index) => ({
+            ...tag,
+            color: colors[index % colors.length]
+        }));
 
 
-    const myTags = await $fetch(`${api}/tags/me`, {
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+        const myTags = await $fetch(`${api}/tags/me`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-    subscribedTags.value = myTags.map(t => t.id);
-  } catch (err) {
-    console.error("Error fetching tags:", err);
-  }
+        subscribedTags.value = myTags.map(t => t.id);
+    } catch (err) {
+        console.error("Error fetching tags:", err);
+    }
 
 };
 
 
 const toggleTagSubscription = async (tag) => {
-  const index = subscribedTags.value.indexOf(tag.id);
-  const isSubscribing = index === -1;
+    const index = subscribedTags.value.indexOf(tag.id);
+    const isSubscribing = index === -1;
 
-  if (isSubscribing) subscribedTags.value.push(tag.id);
-  else subscribedTags.value.splice(index, 1);
+    if (isSubscribing) subscribedTags.value.push(tag.id);
+    else subscribedTags.value.splice(index, 1);
 
-  try {
-    const endpoint = isSubscribing
-      ? `${api}/tags/${tag.id}/subscribe`
-      : `${api}/tags/${tag.id}/unsubscribe`;
+    try {
+        const endpoint = isSubscribing
+            ? `${api}/tags/${tag.id}/subscribe`
+            : `${api}/tags/${tag.id}/unsubscribe`;
 
-    await $fetch(endpoint, {
-      method: 'POST',
-      headers: { Authorization: `Bearer ${token.value}` }
-    });
+        await $fetch(endpoint, {
+            method: 'POST',
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
 
-  } catch (err) {
-    if (isSubscribing) subscribedTags.value.pop();
-    else subscribedTags.value.push(tag.id);
+    } catch (err) {
+        if (isSubscribing) subscribedTags.value.pop();
+        else subscribedTags.value.push(tag.id);
 
-    console.error("Sync failed:", err);
-  }
+        console.error("Sync failed:", err);
+    }
 
 };
 
 
 const handleRefresh = () => {
-  isModalOpen.value = false;
-  loadPosts();
+    isModalOpen.value = false;
+    loadPosts();
 };
 
 
 const submitComment = () => {
-  if (!newCommentContent.value.trim()) return;
+    if (!newCommentContent.value.trim()) return;
 
-  const comment = {
-    id: Date.now(),
-    content: newCommentContent.value,
-    author: { name: user.value?.name || "Guest" },
-    created_at: new Date().toISOString()
-  };
+    const comment = {
+        id: Date.now(),
+        content: newCommentContent.value,
+        author: { name: user.value?.name || "Guest" },
+        created_at: new Date().toISOString()
+    };
 
-  selectedPost.value.comments.unshift(comment);
-  newCommentContent.value = '';
+    selectedPost.value.comments.unshift(comment);
+    newCommentContent.value = '';
 
 };
 
 const loadPosts = async () => {
-  if (loading.value || !hasMore.value) return;
-  loading.value = true;
+    if (loading.value || !hasMore.value) return;
+    loading.value = true;
 
-  try {
-    const data = await $fetch(`${api}/posts`, {
-      method: 'GET',
-      headers: { Authorization: `Bearer ${token.value}` },
-      params: {
-        page: page.value,
-        sort: sortBy.value,
-        order: sortDesc.value ? 'desc' : 'asc',
-        type: filterType.value !== 'ALL' ? filterType.value : undefined
-      }
-    });
+    try {
+        const data = await $fetch(`${api}/publications`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` },
+            params: {
+                page: page.value,
+                sort: sortBy.value,
+                order: sortDesc.value ? 'desc' : 'asc',
+                type: filterType.value !== 'ALL' ? filterType.value : undefined
+            }
+        });
 
-    if (data && data.length > 0) {
-      posts.value = [...posts.value, ...data];
-      page.value++;
-    } else {
-      hasMore.value = false;
+        if (data && data.length > 0) {
+            posts.value = [...posts.value, ...data];
+            page.value++;
+        } else {
+            hasMore.value = false;
+        }
+    } catch (err) {
+        console.error("Failed to fetch posts:", err);
+    } finally {
+        loading.value = false;
     }
-  } catch (err) {
-    console.error("Failed to fetch posts:", err);
-  } finally {
-    loading.value = false;
-  }
 };
 
-
 const fetchPostDetail = async (id) => {
-  loading.value = true;
-  await new Promise(r => setTimeout(r, 400));
-  selectedPost.value = {
-    id,
-    title: posts.value.find(p => p.id === id)?.title || "A New Technique for Data Science",
-    authors: ["Joana B", "External Researcher"],
-    publication_date: "2025-11-01",
-    type: "CONFERENCE_PAPER",
-    abstract: "This breakthrough research explores the boundaries of predictive modeling and machine learning in academic environments. By leveraging sparse data sets, we achieve higher accuracy in student retention predictions.",
-    submitter: { id: 2, name: "Joana B" },
-    comments: [
-      { id: 101, content: "This technique could revolutionize our approach to Project X!", author: { name: "Joana B" }, created_at: "2025-11-10T10:30:00Z" },
-    ]
-  };
-  loading.value = false;
-  window.scrollTo({ top: 0, behavior: 'smooth' });
+    loading.value = true;
+    try {
+        const postDetail = await $fetch(`${api}/publications/${id}`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        selectedPost.value = postDetail;
+    } catch (err) {
+        console.error("Failed to fetch post detail:", err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const votePost = async (targetPost, direction) => {
+    if (!targetPost) return;
+
+    let voteTypeToSend = 'NONE';
+    const currentVote = targetPost.my_vote || 'NONE';
+
+    if (direction === 1) { 
+        voteTypeToSend = currentVote === 'UP' ? 'NONE' : 'UP';
+    } else if (direction === -1) { 
+        voteTypeToSend = currentVote === 'DOWN' ? 'NONE' : 'DOWN';
+    }
+
+    try {
+        const response = await $fetch(`${api}/publications/${targetPost.id}/vote`, {
+            method: 'PUT',
+            headers: { Authorization: `Bearer ${token.value}` },
+            body: { vote_type: voteTypeToSend }
+        });
+
+        targetPost.rating = response.score;
+        targetPost.my_vote = response.my_vote;
+
+        if (selectedPost.value && selectedPost.value.id === targetPost.id) {
+            selectedPost.value.rating = response.score;
+            selectedPost.value.my_vote = response.my_vote;
+        }
+
+    } catch (error) {
+        console.error("Vote failed", error);
+        alert("Failed to submit vote.");
+    }
+};
+
+const getFileName = (fullPath) => {
+    if (!fullPath) return null;
+    return fullPath.split(/[/\\]/).pop();
+};
+
+const downloadFile = async (post) => {
+    if (!post.attachedFile) return;
+
+    const filename = getFileName(post.attachedFile);
+    
+    const downloadUrl = `${api}/publications/download/${filename}`;
+    
+    try {
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.setAttribute('download', filename);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // Opção B: Se o endpoint for PRIVADO (@Authenticated), tens de fazer fetch com o token:
+        /*
+        const response = await fetch(downloadUrl, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        
+        if (!response.ok) throw new Error('Download failed');
+        
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        window.URL.revokeObjectURL(url);
+        */
+
+    } catch (e) {
+        console.error("Download error:", e);
+        alert("Could not download file.");
+    }
 };
 
 const filteredPosts = computed(() => {
-  const result = posts.value.filter(p => {
-    const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
-    const matchesTags = subscribedTags.value.length === 0 ||
-      p.tags.some(t => subscribedTags.value.includes(t.id));
-    return matchesType && matchesTags;
-  });
+    const result = posts.value.filter(p => {
+        const matchesType = filterType.value === 'ALL' || p.type === filterType.value;
+        const matchesTags = subscribedTags.value.length === 0 ||
+            p.tags.some(t => subscribedTags.value.includes(t.id));
+        return matchesType && matchesTags;
+    });
 
-  return result.sort((a, b) => {
-    const modifier = sortDesc.value ? 1 : -1;
+    return result.sort((a, b) => {
+        const modifier = sortDesc.value ? 1 : -1;
 
-    if (sortBy.value === 'votes') {
-      return (b.rating - a.rating) * modifier;
-    } else if (sortBy.value === 'comments') {
-      return (b.comment_count - a.comment_count) * modifier;
-    } else {
-      return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
-    }
-  });
+        if (sortBy.value === 'votes') {
+            return (b.rating - a.rating) * modifier;
+        } else if (sortBy.value === 'comments') {
+            return (b.comment_count - a.comment_count) * modifier;
+        } else {
+            return (new Date(b.publication_date).getTime() - new Date(a.publication_date).getTime()) * modifier;
+        }
+    });
 });
 
 watch(posts, () => {
-  if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
-    loadPosts();
-  }
+    if (filteredPosts.value.length < 3 && !loading.value && !selectedPost.value) {
+        loadPosts();
+    }
 }, { deep: true });
 
 watch([sortBy, sortDesc, filterType], () => {
-  posts.value = [];
-  page.value = 1;
-  hasMore.value = true;
-  loadPosts();
+    posts.value = [];
+    page.value = 1;
+    hasMore.value = true;
+    loadPosts();
 });
 
 onMounted(async () => {
-  checkQueryForModal();
+    checkQueryForModal();
 
-  await Promise.all([
-    loadPosts(),
-    fetchTags()
-  ]);
+    await Promise.all([
+        loadPosts(),
+        fetchTags()
+    ]);
 
-  const observer = new IntersectionObserver((entries) => {
-    if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
-      loadPosts();
+    const observer = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && !loading.value && !selectedPost.value) {
+            loadPosts();
+        }
+    }, {
+        rootMargin: '300px',
+        threshold: 0.1
+    });
+
+    if (loadMoreTrigger.value) {
+        observer.observe(loadMoreTrigger.value);
     }
-  }, {
-    rootMargin: '300px',
-    threshold: 0.1
-  });
-
-  if (loadMoreTrigger.value) {
-    observer.observe(loadMoreTrigger.value);
-  }
 });
 </script>
 
 <style scoped>
 @keyframes fadeInUp {
 
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .animate-fade-in-up {
-  animation: fadeInUp 0.5s ease-out forwards;
+    animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/profile/index.vue b/app/pages/profile/index.vue
index 8021a32..6eec2d4 100644
--- a/app/pages/profile/index.vue
+++ b/app/pages/profile/index.vue
@@ -140,6 +140,41 @@
                             </div>
 
                             <div class="flex flex-col gap-4">
+
+                                <div
+                                    class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
+                                    <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+                                        <div class="relative flex-1 sm:flex-none">
+                                            <input v-model="searchQuery" type="text" placeholder="Search posts..."
+                                                class="w-full sm:w-48 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg pl-3 pr-3 py-2 text-xs font-bold outline-none focus:ring-2 focus:ring-blue-500">
+                                        </div>
+                                        <div class="flex items-center">
+                                            <select v-model="sortBy"
+                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-l-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer border-r-0">
+                                                <option value="date">Date</option>
+                                                <option value="votes">Rating</option>
+                                                <option value="comments">Comments</option>
+                                            </select>
+                                            <button
+                                                class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-r-lg px-3 py-2 text-xs font-bold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                                                :title="sortDesc ? 'Descending' : 'Ascending'"
+                                                @click="sortDesc = !sortDesc">
+                                                <span class="inline-block transition-transform duration-200"
+                                                    :class="{ 'rotate-180': !sortDesc }">
+                                                    ▼
+                                                </span>
+                                            </button>
+                                        </div>
+
+                                        <select v-model="filterType"
+                                            class="bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg px-3 py-2 text-xs font-bold uppercase outline-none focus:ring-1 focus:ring-blue-500 cursor-pointer">
+                                            <option value="ALL">All Types</option>
+                                            <option value="CONFERENCE_PAPER">Conference Paper</option>
+                                            <option value="RESEARCH_POST">Research Post</option>
+                                        </select>
+                                    </div>
+                                </div>
+
                                 <div v-if="userProfile.publications.length === 0"
                                     class="relative overflow-hidden rounded-2xl border-2 border-dashed border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50 p-12 text-center hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 group">
 
@@ -177,25 +212,50 @@
                                     </div>
                                 </div>
 
-                                <div v-for="pub in userProfile.publications" :key="pub.id"
-                                    class="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 group relative">
-                                    <div class="flex justify-between items-start gap-4 mb-2">
-                                        <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">{{ pub.title
-                                        }}</h3>
-                                        <span
-                                            class="shrink-0 px-2.5 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 text-xs font-bold border border-slate-200 dark:border-slate-700">
-                                            {{ pub.publishedYear }}
-                                        </span>
-                                    </div>
-                                    <p class="text-slate-600 dark:text-slate-400 text-sm leading-relaxed line-clamp-2">
-                                        {{ pub.abstract }}</p>
-                                    <div
-                                        class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium">
-                                        <span
-                                            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
-                                            {{ pub.field }}
-                                        </span>
-                                        <span>{{ pub.citations }} Citations</span>
+                                <div v-for="post in userProfile.publicationsData" :key="post.id"
+                                    class="group bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-xl p-5 shadow-sm hover:border-blue-500/50 transition-all cursor-pointer mb-4"
+                                    @click="fetchPostDetail(post.id)">
+                                    <div class="flex gap-4">
+                                        <div
+                                            class="flex flex-col items-center gap-1 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 p-2 rounded-lg h-fit">
+
+                                            <button class="hover:text-blue-500 transition-colors text-lg"
+                                                :class="{ 'text-orange-500': post.my_vote === 'UP' }"
+                                                @click.stop="votePost(post, 1)">▲</button>
+
+                                            <span class="text-xs font-bold">{{ post.rating }}</span>
+
+                                            <button class="hover:text-red-500 transition-colors text-lg"
+                                                :class="{ 'text-blue-500': post.my_vote === 'DOWN' }"
+                                                @click.stop="votePost(post, -1)">▼</button>
+                                        </div>
+
+                                        <div class="flex-1">
+                                            <div class="flex items-center gap-2 mb-1">
+                                                <span
+                                                    class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">
+                                                    {{ post.type.replace('_', ' ') }}
+                                                </span>
+                                                <span class="text-xs text-gray-500">{{ post.publication_date
+                                                    }}</span>
+                                            </div>
+                                            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-2">{{
+                                                post.title }}
+                                            </h2>
+                                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">By
+                                                {{
+                                                    post.authors.join(', ') }}
+                                            </p>
+                                            <div
+                                                class="flex items-center gap-4 text-xs font-bold text-gray-500 uppercase">
+                                                <span>💬 {{ post.comment_count }} Comments</span>
+                                                <div class="flex gap-2">
+                                                    <span v-for="tag in post.tags" :key="tag.id"
+                                                        class="text-blue-600 dark:text-blue-400">#{{ tag.name
+                                                        }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -282,6 +342,14 @@ const authStore = useAuthStore();
 const { token } = storeToRefs(authStore);
 const router = useRouter();
 
+// --- Reactive Variables ---
+const availableTags = ref<Tag[]>([]); // For tag select viewBox
+const searchQuery = ref('');
+const sortBy = ref('date'); // 'date' | 'votes' | 'comments'
+const sortDesc = ref(true);
+const filterType = ref('ALL'); // 'ALL' | 'CONFERENCE_PAPER' | 'RESEARCH_POST'
+const page = ref(1);
+
 // --- Interfaces ---
 
 interface Tag {
@@ -348,6 +416,20 @@ async function fetchTags() {
     }
 }
 
+const fetchPostDetail = async (id) => {
+    loading.value = true;
+    try {
+        const postDetail = await $fetch(`${api}/publications/${id}`, {
+            headers: { Authorization: `Bearer ${token.value}` }
+        });
+        selectedPost.value = postDetail;
+    } catch (err) {
+        console.error("Failed to fetch post detail:", err);
+    } finally {
+        loading.value = false;
+    }
+};
+
 // --- Computed ---
 const totalCitations = computed(() =>
     userProfile.value.publications.reduce((sum, pub) => sum + (pub.citations || 0), 0)
@@ -390,11 +472,17 @@ async function fetchProfileData() {
             headers: { Authorization: `Bearer ${token.value}` }
         });
 
-        // Fetch Publications
-        // const publicationsData = await $fetch(`${api}/publications/my-submissions`, {
-        //    method: 'GET',
-        //    headers: { Authorization: `Bearer ${token.value}` }
-        // });
+        // Fetch User Publications 
+        const publicationsData = await $fetch(`${api}/publications/me`, {
+            method: 'GET',
+            headers: { Authorization: `Bearer ${token.value}` },
+            params: {
+                page: page.value,
+                sort: sortBy.value,
+                order: sortDesc.value ? 'desc' : 'asc',
+                type: filterType.value !== 'ALL' ? filterType.value : undefined
+            }
+        });
 
         // Map Data
         userProfile.value = {