feat(vocab): add dashboard learning summary and related endpoints

- Introduced `getDashboardLearningSummary` method in `VocabService` to provide a compact overview of enrolled courses and current lessons for users.
- Updated `vocabController` to include a new route for the dashboard widget, allowing users to access their learning summary.
- Enhanced `vocabRouter` to route requests for the new dashboard widget endpoint.
- Added localization support for the new dashboard features across multiple languages, improving user engagement and accessibility.
- Updated UI components to integrate the new dashboard widget, ensuring a seamless user experience.

frontend/src/components/DashboardWidget.vue

@@ -28,10 +28,12 @@ import ListWidget from './widgets/ListWidget.vue';
 import BirthdayWidget from './widgets/BirthdayWidget.vue';
 import UpcomingEventsWidget from './widgets/UpcomingEventsWidget.vue';
 import MiniCalendarWidget from './widgets/MiniCalendarWidget.vue';
+import VocabCoursesWidget from './widgets/VocabCoursesWidget.vue';
 
 function getWidgetComponent(endpoint) {
   if (!endpoint || typeof endpoint !== 'string') return ListWidget;
   const ep = endpoint.toLowerCase();
+  if (ep.includes('vocab/dashboard-widget')) return VocabCoursesWidget;
   if (ep.includes('falukant')) return FalukantWidget;
   if (ep.includes('news')) return NewsWidget;
   if (ep.includes('calendar/widget/birthdays')) return BirthdayWidget;
@@ -42,7 +44,7 @@ function getWidgetComponent(endpoint) {
 
 export default {
   name: 'DashboardWidget',
-  components: { FalukantWidget, NewsWidget, ListWidget, BirthdayWidget, UpcomingEventsWidget, MiniCalendarWidget },
+  components: { FalukantWidget, NewsWidget, ListWidget, BirthdayWidget, UpcomingEventsWidget, MiniCalendarWidget, VocabCoursesWidget },
   props: {
     widgetId: { type: String, required: true },
     title: { type: String, required: true },

frontend/src/components/widgets/VocabCoursesWidget.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="vocab-courses-widget">
+    <p v-if="!courses.length" class="vocab-courses-widget__empty">
+      {{ $t('widgets.vocabCourses.empty') }}
+      <router-link class="vocab-courses-widget__link" to="/socialnetwork/vocab/courses">
+        {{ $t('widgets.vocabCourses.browseCourses') }}
+      </router-link>
+    </p>
+    <ul v-else class="vocab-courses-widget__list">
+      <li v-for="c in courses" :key="c.courseId" class="vocab-courses-widget__item">
+        <div class="vocab-courses-widget__main">
+          <strong class="vocab-courses-widget__course-title">{{ c.title || $t('widgets.vocabCourses.unnamedCourse') }}</strong>
+          <span v-if="c.currentLesson" class="vocab-courses-widget__lesson">
+            {{ $t('widgets.vocabCourses.lessonLine', { number: c.currentLesson.lessonNumber, title: c.currentLesson.title }) }}
+          </span>
+          <span v-else class="vocab-courses-widget__lesson vocab-courses-widget__lesson--muted">
+            {{ $t('widgets.vocabCourses.noLessons') }}
+          </span>
+          <span v-if="c.allLessonsCompleted && c.currentLesson" class="vocab-courses-widget__badge">
+            {{ $t('widgets.vocabCourses.allDone') }}
+          </span>
+        </div>
+        <button
+          v-if="c.currentLesson"
+          type="button"
+          class="vocab-courses-widget__btn"
+          @click="goToLesson(c.courseId, c.currentLesson.id)"
+        >
+          {{ $t('widgets.vocabCourses.openLesson') }}
+        </button>
+        <button
+          v-else
+          type="button"
+          class="vocab-courses-widget__btn vocab-courses-widget__btn--secondary"
+          @click="goToCourse(c.courseId)"
+        >
+          {{ $t('widgets.vocabCourses.openCourse') }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VocabCoursesWidget',
+  props: {
+    data: { type: Object, default: null }
+  },
+  computed: {
+    courses() {
+      const raw = this.data;
+      if (!raw || typeof raw !== 'object') {
+        return [];
+      }
+      const list = raw.courses ?? raw.Courses;
+      return Array.isArray(list) ? list : [];
+    }
+  },
+  methods: {
+    goToLesson(courseId, lessonId) {
+      this.$router.push({
+        name: 'VocabLesson',
+        params: { courseId: String(courseId), lessonId: String(lessonId) }
+      });
+    },
+    goToCourse(courseId) {
+      this.$router.push({
+        name: 'VocabCourse',
+        params: { courseId: String(courseId) }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.vocab-courses-widget__empty {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary, #555);
+  line-height: 1.45;
+}
+
+.vocab-courses-widget__link {
+  display: inline-block;
+  margin-top: 0.35rem;
+  font-weight: 600;
+  color: var(--color-primary-orange-dark, #c2410c);
+}
+
+.vocab-courses-widget__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.vocab-courses-widget__item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--dashboard-widget-border, #e9ecef);
+}
+
+.vocab-courses-widget__item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.vocab-courses-widget__main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.vocab-courses-widget__course-title {
+  font-size: 0.92rem;
+  color: var(--color-text-primary, #222);
+}
+
+.vocab-courses-widget__lesson {
+  font-size: 0.82rem;
+  color: var(--color-text-secondary, #555);
+  line-height: 1.35;
+}
+
+.vocab-courses-widget__lesson--muted {
+  font-style: italic;
+}
+
+.vocab-courses-widget__badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #198754;
+  margin-top: 2px;
+}
+
+.vocab-courses-widget__btn {
+  flex-shrink: 0;
+  padding: 6px 12px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--color-primary-orange, #f97316);
+  color: #fff;
+}
+
+.vocab-courses-widget__btn:hover {
+  filter: brightness(1.05);
+}
+
+.vocab-courses-widget__btn--secondary {
+  background: var(--color-text-secondary, #6c757d);
+}
+</style>