Create Widget Container System for Dashboard Layout

Goal

Implement reusable widget container component for displaying different content types (events, polls, chat, news) in a consistent card-based layout.

Background

Production home page uses widget-based layout where each section (Next Events, Polls, Chat, Latest News) is displayed in a consistent container with:

  • Translated header with icon
  • Content area (slot-based)
  • "View all" link
  • Consistent styling

Component Design

BaseWidget.vue

<script setup lang="ts">
interface Props {
  titleKey: string  // i18n key like "widgets.nextEvents"
  type: "events" | "polls" | "chat" | "news" | "custom"
  viewAllLink?: string
  count?: number  // e.g., "(2)" for event count
}

const props = defineProps<Props>()
const { t } = useI18n()
</script>

<template>
  <BaseCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-semibold">
          {{ t(titleKey) }}
          <span v-if="count" class="text-sm font-normal text-secondary-600 ml-2">
            ({{ count }})
          </span>
        </h2>
        <NuxtLink v-if="viewAllLink" :to="viewAllLink" class="text-sm text-primary-600">
          {{ t("common.viewAll") }}
        </NuxtLink>
      </div>
    </template>
    <slot />  <!-- Content goes here -->
  </BaseCard>
</template>

Usage Example

<BaseWidget 
  title-key="widgets.nextEvents" 
  type="events"
  :count="2"
  view-all-link="/events"
>
  <EventCard v-for="event in upcomingEvents" :key="event.id" :event="event" />
</BaseWidget>

Home Page Refactor

Update pages/index.vue to use widget-based layout:

  1. Next Events Widget - upcoming events
  2. Polls Widget - placeholder "Currently there are no running polls" + "Create a poll" button
  3. Chat Widget - placeholder for future chat feature

Acceptance Criteria

  • BaseWidget component created
  • Supports all widget types (events, polls, chat, news)
  • i18n translations for widget titles
  • View all links work correctly
  • Home page uses widget layout
  • Responsive design
  • Matches production styling

Dependencies

  • Issue #67 (closed) (i18n) - widget titles must be translatable

Benefits

  • Consistent UI across dashboard
  • Easy to add new widget types
  • Reusable pattern for future features