@motor-cms/ui-admin 1.2.0 → 1.4.0

package/app/components/dashboard/DashboardActivity.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { ActivityItem } from '../../composables/useDashboardData'
+
+const props = defineProps<{
+  items: ActivityItem[]
+  loading: boolean
+  loadingMore: boolean
+  hasMore: boolean
+}>()
+
+const emit = defineEmits<{
+  loadMore: []
+}>()
+
+const { t } = useI18n()
+const scrollContainer = ref<HTMLElement | null>(null)
+const sentinel = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  if (!scrollContainer.value || !sentinel.value) return
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry?.isIntersecting && props.hasMore && !props.loadingMore) {
+        emit('loadMore')
+      }
+    },
+    { root: scrollContainer.value, threshold: 0 },
+  )
+  observer.observe(sentinel.value)
+}
+
+onMounted(setupObserver)
+watch([scrollContainer, sentinel], setupObserver)
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <UPageCard :ui="{ root: 'border-0 shadow-none' }">
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <span class="text-sm font-heading font-semibold text-highlighted">{{ t('motor-admin.dashboard.activity.title') }}</span>
+      </div>
+    </template>
+    <div v-if="loading" class="flex items-center justify-center py-12 text-muted">
+      <UIcon name="i-lucide-loader-2" class="size-5 animate-spin" />
+    </div>
+    <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-12 text-muted">
+      <UIcon name="i-lucide-activity" class="size-10 mb-3" />
+      <p class="text-sm">{{ t('motor-admin.dashboard.activity.empty') }}</p>
+    </div>
+    <div v-else class="relative -mx-4 -my-4 sm:-mx-6 sm:-my-6">
+      <div
+        ref="scrollContainer"
+        class="max-h-[420px] overflow-y-auto"
+      >
+        <DashboardActivityItem
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+        />
+        <div ref="sentinel" class="h-px" />
+        <div v-if="loadingMore" class="flex items-center justify-center py-3 text-muted">
+          <UIcon name="i-lucide-loader-2" class="size-4 animate-spin" />
+        </div>
+      </div>
+    </div>
+  </UPageCard>
+</template>

package/app/components/dashboard/DashboardActivityItem.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { formatTimeAgo } from '@vueuse/core'
+import type { ActivityItem } from '../../composables/useDashboardData'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  item: ActivityItem
+}>()
+
+const typeLabels: Record<string, string> = {
+  BuilderPage: 'page',
+  Navigation: 'navigation',
+  NavigationItem: 'navigation',
+  File: 'media',
+  CustomContentType: 'content_type',
+  CustomContentField: 'content_type',
+  Clickpath: 'assistant',
+  ClickpathStep: 'assistant',
+  Topic: 'scoring',
+  PublishingTime: 'scheduled',
+  Approval: 'approval',
+  SeoRedirect: 'seo',
+  SearchConfig: 'search',
+}
+
+const typeIcons: Record<string, string> = {
+  BuilderPage: 'i-lucide-file-text',
+  Navigation: 'i-lucide-menu',
+  NavigationItem: 'i-lucide-menu',
+  File: 'i-lucide-image',
+  CustomContentType: 'i-lucide-layout-grid',
+  CustomContentField: 'i-lucide-layout-grid',
+  Clickpath: 'i-lucide-mouse-pointer-click',
+  ClickpathStep: 'i-lucide-mouse-pointer-click',
+  Topic: 'i-lucide-bar-chart-2',
+  PublishingTime: 'i-lucide-clock',
+  Approval: 'i-lucide-check-circle',
+  SeoRedirect: 'i-lucide-link',
+  SearchConfig: 'i-lucide-search',
+}
+
+function typeLabel(subjectType: string): string {
+  const key = typeLabels[subjectType]
+  return key ? t(`motor-admin.dashboard.activity.types.${key}`) : subjectType
+}
+
+const isDeleted = computed(() => props.item.description === 'deleted')
+
+const config = computed(() => {
+  const icon = isDeleted.value
+    ? 'i-lucide-trash-2'
+    : typeIcons[props.item.subject_type] ?? 'i-lucide-activity'
+  return {
+    icon,
+    label: typeLabel(props.item.subject_type),
+  }
+})
+
+const verb = computed(() => {
+  const key = props.item.description
+  const translated = t(`motor-admin.dashboard.activity.verbs.${key}`)
+  return translated.startsWith('motor-admin.') ? key : translated
+})
+const timestamp = computed(() => new Date(props.item.created_at))
+</script>
+
+<template>
+  <div class="flex items-start gap-3 px-4 py-3 last:pb-0 hover:bg-elevated/50 transition-colors">
+    <div
+      class="flex items-center justify-center size-7 rounded-md flex-shrink-0 mt-0.5"
+      :class="isDeleted ? 'bg-error/10' : 'bg-muted/50'"
+    >
+      <UIcon
+        :name="config.icon"
+        class="size-3.5"
+        :class="isDeleted ? 'text-error' : 'text-dimmed'"
+      />
+    </div>
+    <div class="flex-1 min-w-0">
+      <div class="text-sm text-default">
+        <strong>{{ item.subject_name ?? t('motor-admin.dashboard.activity.unknown') }}</strong> {{ verb }}
+      </div>
+      <div class="text-xs text-dimmed mt-0.5">
+        {{ item.causer_name ?? t('motor-admin.dashboard.activity.system') }} &middot; {{ formatTimeAgo(timestamp) }}
+      </div>
+    </div>
+    <UBadge
+      :color="isDeleted ? 'error' : 'neutral'"
+      variant="subtle"
+      size="xs"
+    >
+      {{ config.label }}
+    </UBadge>
+  </div>
+</template>

package/app/components/dashboard/DashboardAnnouncementModal.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  created: []
+}>()
+
+const { t } = useI18n()
+const client = useSanctumClient()
+const { can } = usePermissions()
+const saving = ref(false)
+
+const canWriteAnnouncements = computed(() => can('dashboard-announcements.write'))
+
+const form = reactive({
+  title: '',
+  body: '',
+  type: 'info',
+  audience: 'self',
+  target_user_ids: [] as number[],
+  linkable_type: '',
+  linkable_id: undefined as number | undefined,
+  starts_at: undefined as string | undefined,
+  expires_at: undefined as string | undefined,
+})
+
+const typeOptions = computed(() => [
+  { label: t('motor-admin.dashboard.announcements.type_info'), value: 'info' },
+  { label: t('motor-admin.dashboard.announcements.type_warning'), value: 'warning' },
+  { label: t('motor-admin.dashboard.announcements.type_error'), value: 'error' },
+])
+
+const allAudienceOptions = computed(() => [
+  { label: t('motor-admin.dashboard.announcements.audience_self'), value: 'self' },
+  { label: t('motor-admin.dashboard.announcements.audience_users'), value: 'users' },
+  { label: t('motor-admin.dashboard.announcements.audience_client'), value: 'client' },
+])
+
+const audienceOptions = computed(() =>
+  canWriteAnnouncements.value
+    ? allAudienceOptions.value
+    : allAudienceOptions.value.filter(o => o.value === 'self')
+)
+
+const linkableTypeOptions = computed(() => [
+  { label: t('motor-admin.dashboard.announcements.linkable_page'), value: 'Motor\\Builder\\Models\\BuilderPage' },
+  { label: t('motor-admin.dashboard.announcements.linkable_navigation'), value: 'Motor\\Builder\\Models\\Navigation' },
+  { label: t('motor-admin.dashboard.announcements.linkable_file'), value: 'Motor\\Media\\Models\\File' },
+  { label: t('motor-admin.dashboard.announcements.linkable_content_type'), value: 'Motor\\ContentType\\Models\\CustomContentType' },
+])
+
+const userOptions = ref<Array<{ label: string; value: number }>>([])
+const usersLoading = ref(false)
+const usersFetched = ref(false)
+
+watch(() => form.audience, async (audience) => {
+  if (audience === 'users' && !usersFetched.value) {
+    usersLoading.value = true
+    try {
+      const response = await client<{ data: Array<{ id: number; name: string }> }>('/api/v2/users?per_page=200')
+      userOptions.value = response.data.map(u => ({
+        label: u.name,
+        value: u.id,
+      }))
+      usersFetched.value = true
+    } finally {
+      usersLoading.value = false
+    }
+  }
+})
+
+const linkableOptions = ref<Array<{ label: string; value: number }>>([])
+const linkableLoading = ref(false)
+const linkableSearchTerm = ref('')
+let linkableSearchTimeout: ReturnType<typeof setTimeout>
+
+const linkableEndpoints: Record<string, { endpoint: string; labelFn: (item: Record<string, any>) => string }> = {
+  'Motor\\Builder\\Models\\BuilderPage': {
+    endpoint: '/api/v2/builder-pages',
+    labelFn: item => item.name ?? `#${item.id}`,
+  },
+  'Motor\\Builder\\Models\\Navigation': {
+    endpoint: '/api/v2/navigation-items',
+    labelFn: item => item.full_slug ? `${item.name} (${item.full_slug})` : item.name ?? `#${item.id}`,
+  },
+  'Motor\\Media\\Models\\File': {
+    endpoint: '/api/v2/files',
+    labelFn: item => item.description || item.file?.file_name || `#${item.id}`,
+  },
+  'Motor\\ContentType\\Models\\CustomContentType': {
+    endpoint: '/api/v2/custom-content-types',
+    labelFn: item => item.name ?? `#${item.id}`,
+  },
+}
+
+async function fetchLinkableOptions(query: string) {
+  const config = linkableEndpoints[form.linkable_type]
+  if (!config) return
+
+  linkableLoading.value = true
+  try {
+    const params = new URLSearchParams({ per_page: '20' })
+    if (query) {
+      params.set('search', query)
+    }
+    const response = await client<{ data: Array<Record<string, any>> }>(`${config.endpoint}?${params}`)
+    linkableOptions.value = response.data.map(item => ({
+      label: config.labelFn(item),
+      value: item.id,
+    }))
+  } catch {
+    linkableOptions.value = []
+  } finally {
+    linkableLoading.value = false
+  }
+}
+
+watch(() => form.linkable_type, (type) => {
+  form.linkable_id = undefined
+  linkableOptions.value = []
+  linkableSearchTerm.value = ''
+  if (!type) return
+  fetchLinkableOptions('')
+})
+
+watch(linkableSearchTerm, (term) => {
+  clearTimeout(linkableSearchTimeout)
+  linkableSearchTimeout = setTimeout(() => fetchLinkableOptions(term), 300)
+})
+
+async function handleSubmit() {
+  saving.value = true
+  try {
+    const data: Record<string, unknown> = {
+      title: form.title,
+      body: form.body || null,
+      type: form.type,
+      audience: form.audience,
+    }
+
+    if (form.audience === 'users') {
+      data.target_user_ids = form.target_user_ids
+    }
+    if (form.linkable_type && form.linkable_id) {
+      data.linkable_type = form.linkable_type
+      data.linkable_id = form.linkable_id
+    }
+    if (form.starts_at) {
+      data.starts_at = form.starts_at
+    }
+    if (form.expires_at) {
+      data.expires_at = form.expires_at
+    }
+
+    await client('/api/v2/dashboard/announcements', {
+      method: 'POST',
+      body: data,
+    })
+
+    Object.assign(form, {
+      title: '',
+      body: '',
+      type: 'info',
+      audience: 'self',
+      target_user_ids: [],
+      linkable_type: '',
+      linkable_id: null,
+      starts_at: null,
+      expires_at: null,
+    })
+
+    emit('created')
+    emit('update:open', false)
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    class="sm:max-w-xl"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #header>
+      <span class="font-heading font-semibold">{{ t('motor-admin.dashboard.announcements.modal_title') }}</span>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-5">
+        <UFormField :label="t('motor-admin.dashboard.announcements.field_title')" required>
+          <UInput v-model="form.title" class="w-full" :placeholder="t('motor-admin.dashboard.announcements.field_title_placeholder')" />
+        </UFormField>
+
+        <UFormField :label="t('motor-admin.dashboard.announcements.field_body')">
+          <UTextarea v-model="form.body" class="w-full" :placeholder="t('motor-admin.dashboard.announcements.field_body_placeholder')" :rows="3" />
+        </UFormField>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormField :label="t('motor-admin.dashboard.announcements.field_type')">
+            <USelectMenu v-model="form.type" :items="typeOptions" value-key="value" class="w-full" />
+          </UFormField>
+
+          <UFormField :label="t('motor-admin.dashboard.announcements.field_audience')">
+            <USelectMenu v-model="form.audience" :items="audienceOptions" value-key="value" class="w-full" />
+          </UFormField>
+        </div>
+
+        <UFormField v-if="form.audience === 'users'" :label="t('motor-admin.dashboard.announcements.field_users')">
+          <USelectMenu
+            v-model="form.target_user_ids"
+            :items="userOptions"
+            value-key="value"
+            multiple
+            :loading="usersLoading"
+            :placeholder="t('motor-admin.dashboard.announcements.field_users_placeholder')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField :label="t('motor-admin.dashboard.announcements.field_link')">
+          <USelectMenu
+            v-model="form.linkable_type"
+            :items="linkableTypeOptions"
+            value-key="value"
+            :placeholder="t('motor-admin.dashboard.announcements.field_link_type_placeholder')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField v-if="form.linkable_type" :label="t('motor-admin.dashboard.announcements.field_link_item')">
+          <USelectMenu
+            v-model="form.linkable_id"
+            v-model:search-term="linkableSearchTerm"
+            :items="linkableOptions"
+            value-key="value"
+            ignore-filter
+            :loading="linkableLoading"
+            :placeholder="t('motor-admin.dashboard.announcements.field_link_item_placeholder')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <div class="grid grid-cols-2 gap-4">
+          <UFormField :label="t('motor-admin.dashboard.announcements.field_starts_at')">
+            <UInput v-model="form.starts_at" type="datetime-local" class="w-full" />
+          </UFormField>
+          <UFormField :label="t('motor-admin.dashboard.announcements.field_expires_at')">
+            <UInput v-model="form.expires_at" type="datetime-local" class="w-full" />
+          </UFormField>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="outline"
+          @click="emit('update:open', false)"
+        >
+          {{ t('motor-admin.dashboard.announcements.cancel') }}
+        </UButton>
+        <UButton
+          color="primary"
+          :loading="saving"
+          :disabled="!form.title"
+          @click="handleSubmit"
+        >
+          {{ t('motor-admin.dashboard.announcements.create') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/dashboard/DashboardAnnouncements.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { formatTimeAgo } from '@vueuse/core'
+import type { AnnouncementItem } from '../../composables/useDashboardData'
+
+const props = defineProps<{
+  items: AnnouncementItem[]
+  loading: boolean
+  canCreate?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: [id: number]
+  create: []
+}>()
+
+const { t } = useI18n()
+
+const borderColors: Record<string, string> = {
+  info: 'border-l-info',
+  warning: 'border-l-warning',
+  error: 'border-l-error',
+}
+</script>
+
+<template>
+  <UPageCard :ui="{ root: 'border-0 shadow-none' }">
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-lucide-megaphone" class="size-4 text-primary" />
+          <span class="text-sm font-heading font-semibold text-highlighted">{{ t('motor-admin.dashboard.announcements.title') }}</span>
+          <UBadge
+            v-if="items.length > 0"
+            color="primary"
+            variant="subtle"
+            size="md"
+          >
+            {{ items.length }}
+          </UBadge>
+        </div>
+        <UButton
+          v-if="canCreate"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          @click="emit('create')"
+        />
+      </div>
+    </template>
+    <div v-if="loading" class="flex items-center justify-center py-6 text-muted">
+      <UIcon name="i-lucide-loader-2" class="size-5 animate-spin" />
+    </div>
+    <div v-else-if="items.length === 0" class="text-sm text-muted py-4 text-center">
+      {{ t('motor-admin.dashboard.announcements.empty') }}
+    </div>
+    <div v-else class="flex flex-col gap-2">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="p-3 rounded-lg bg-muted border-l-3"
+        :class="borderColors[item.type] ?? 'border-l-info'"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="text-sm font-medium text-default">{{ item.title }}</div>
+          <button
+            class="flex-shrink-0 text-dimmed hover:text-default transition-colors"
+            @click="emit('dismiss', item.id)"
+          >
+            <UIcon name="i-lucide-x" class="size-3.5" />
+          </button>
+        </div>
+        <p v-if="item.body" class="text-xs text-muted mt-1">{{ item.body }}</p>
+        <NuxtLink
+          v-if="item.linkable_url"
+          :to="item.linkable_url"
+          class="inline-flex items-center gap-1 text-xs text-primary hover:underline mt-2"
+        >
+          <UIcon name="i-lucide-external-link" class="size-3" />
+          {{ item.linkable_name }}
+        </NuxtLink>
+        <div class="text-xs text-dimmed mt-2">
+          {{ item.created_by_name }} &middot; {{ formatTimeAgo(new Date(item.created_at)) }}
+        </div>
+      </div>
+    </div>
+  </UPageCard>
+</template>

package/app/components/dashboard/DashboardPublishingQueue.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { PublishingQueueItem } from '../../composables/useDashboardData'
+
+const { t, locale } = useI18n()
+
+defineProps<{
+  items: PublishingQueueItem[]
+  loading: boolean
+}>()
+
+function formatDate(isoString: string): string {
+  return new Date(isoString).toLocaleDateString(locale.value, {
+    day: 'numeric',
+    month: 'long',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+</script>
+
+<template>
+  <UPageCard :ui="{ root: 'border-0 shadow-none' }">
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-clock" class="size-4 text-primary" />
+        <span class="text-sm font-heading font-semibold text-highlighted">{{ t('motor-admin.dashboard.publishing_queue.title') }}</span>
+      </div>
+    </template>
+    <div v-if="loading" class="flex items-center justify-center py-6 text-muted">
+      <UIcon name="i-lucide-loader-2" class="size-5 animate-spin" />
+    </div>
+    <div v-else-if="items.length === 0" class="text-sm text-muted py-4 text-center">
+      {{ t('motor-admin.dashboard.publishing_queue.empty') }}
+    </div>
+    <div v-else class="flex flex-col gap-2">
+      <NuxtLink
+        v-for="item in items"
+        :key="item.id"
+        :to="`/motor-builder/builder-pages/${item.publishable_id}/edit`"
+        class="p-3 rounded-lg bg-muted hover:bg-accented transition-colors"
+      >
+        <div class="text-sm font-medium text-default">{{ item.name }}</div>
+        <div class="text-xs text-dimmed mt-1">{{ formatDate(item.to_be_published_at) }}</div>
+      </NuxtLink>
+    </div>
+  </UPageCard>
+</template>

package/app/components/dashboard/DashboardQuickActions.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  'create-page': []
+  'upload-media': []
+}>()
+</script>
+
+<template>
+  <UPageCard>
+    <template #header>
+      <span class="text-sm font-heading font-semibold text-highlighted">{{ t('motor-admin.dashboard.quick_actions.title') }}</span>
+    </template>
+    <div class="flex flex-col gap-2">
+      <UButton
+        icon="i-lucide-plus"
+        color="primary"
+        block
+        @click="emit('create-page')"
+      >
+        {{ t('motor-admin.dashboard.quick_actions.new_page') }}
+      </UButton>
+      <UButton
+        icon="i-lucide-upload"
+        color="neutral"
+        variant="outline"
+        block
+        @click="emit('upload-media')"
+      >
+        {{ t('motor-admin.dashboard.quick_actions.upload_media') }}
+      </UButton>
+      <UButton
+        icon="i-lucide-menu"
+        color="neutral"
+        variant="outline"
+        block
+        to="/motor-builder/navigation-trees"
+      >
+        {{ t('motor-admin.dashboard.quick_actions.navigation') }}
+      </UButton>
+    </div>
+  </UPageCard>
+</template>

package/app/components/dashboard/DashboardStats.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DashboardStats } from '../../composables/useDashboardData'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  stats: DashboardStats
+  loading: boolean
+}>()
+
+const cards = computed(() => [
+  {
+    label: t('motor-admin.dashboard.stats.pages'),
+    value: props.stats.pages_total,
+    subtitle: t('motor-admin.dashboard.stats.pages_total'),
+    icon: 'i-lucide-file-text',
+  },
+  {
+    label: t('motor-admin.dashboard.stats.drafts'),
+    value: props.stats.pages_draft,
+    subtitle: t('motor-admin.dashboard.stats.drafts_subtitle'),
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: t('motor-admin.dashboard.stats.scheduled'),
+    value: props.stats.pages_scheduled,
+    subtitle: t('motor-admin.dashboard.stats.scheduled_subtitle'),
+    icon: 'i-lucide-clock',
+  },
+  {
+    label: t('motor-admin.dashboard.stats.media'),
+    value: props.stats.media_total,
+    subtitle: t('motor-admin.dashboard.stats.media_subtitle'),
+    icon: 'i-lucide-image',
+  },
+])
+</script>
+
+<template>
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    <UPageCard
+      v-for="card in cards"
+      :key="card.label"
+      :ui="{ root: 'border-0 shadow-none' }"
+    >
+      <div class="flex items-center gap-3 mb-2">
+        <div class="flex items-center justify-center size-8 rounded-lg bg-primary/10">
+          <UIcon
+            :name="card.icon"
+            class="size-4 text-primary"
+          />
+        </div>
+        <span class="text-sm text-muted">{{ card.label }}</span>
+      </div>
+      <div class="text-3xl font-heading font-bold text-highlighted">
+        {{ loading ? '—' : card.value }}
+      </div>
+      <div class="text-xs text-dimmed mt-1">
+        {{ card.subtitle }}
+      </div>
+    </UPageCard>
+  </div>
+</template>

package/app/composables/useDashboardData.ts

@@ -0,0 +1,168 @@
+export interface DashboardStats {
+  pages_total: number
+  pages_draft: number
+  pages_published: number
+  pages_scheduled: number
+  media_total: number
+  navigation_trees: number
+}
+
+export interface ActivityItem {
+  id: number
+  description: string
+  subject_type: string
+  subject_id: number
+  subject_name: string | null
+  subject_exists: boolean
+  causer_name: string | null
+  created_at: string
+}
+
+export interface PublishingQueueItem {
+  id: number
+  name: string
+  to_be_published_at: string
+  publishable_type: string
+  publishable_id: number
+}
+
+export interface AnnouncementItem {
+  id: number
+  title: string
+  body: string | null
+  type: 'info' | 'warning' | 'error'
+  audience: 'self' | 'users' | 'client'
+  linkable_type: string | null
+  linkable_id: number | null
+  linkable_name: string | null
+  linkable_url: string | null
+  created_by_name: string | null
+  created_at: string
+}
+
+interface ActivityMeta {
+  current_page: number
+  last_page: number
+  per_page: number
+  total: number
+}
+
+interface DashboardResponse {
+  data: {
+    stats: DashboardStats
+    activity: ActivityItem[]
+    activity_meta: ActivityMeta
+    publishing_queue: PublishingQueueItem[]
+    announcements: AnnouncementItem[]
+  }
+}
+
+const NOTIFIED_STORAGE_KEY = 'dashboard-announcements-notified'
+
+function getNotifiedIds(): Set<number> {
+  try {
+    const raw = localStorage.getItem(NOTIFIED_STORAGE_KEY)
+    return new Set(raw ? JSON.parse(raw) : [])
+  } catch {
+    return new Set()
+  }
+}
+
+function persistNotifiedIds(ids: Set<number>) {
+  localStorage.setItem(NOTIFIED_STORAGE_KEY, JSON.stringify([...ids]))
+}
+
+export function useDashboardData() {
+  const client = useSanctumClient()
+  const { notify } = useNotify()
+
+  const stats = ref<DashboardStats>({
+    pages_total: 0,
+    pages_draft: 0,
+    pages_published: 0,
+    pages_scheduled: 0,
+    media_total: 0,
+    navigation_trees: 0,
+  })
+  const activity = ref<ActivityItem[]>([])
+  const activityMeta = ref<ActivityMeta>({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+  const activityLoadingMore = ref(false)
+  const publishingQueue = ref<PublishingQueueItem[]>([])
+  const announcements = ref<AnnouncementItem[]>([])
+  const loading = ref(true)
+
+  const hasMoreActivity = computed(() => activityMeta.value.current_page < activityMeta.value.last_page)
+
+  async function refresh() {
+    loading.value = true
+    try {
+      const response = await client<DashboardResponse>('/api/v2/dashboard')
+      stats.value = response.data.stats
+      activity.value = response.data.activity
+      activityMeta.value = response.data.activity_meta
+      publishingQueue.value = response.data.publishing_queue
+      announcements.value = response.data.announcements
+
+      const notified = getNotifiedIds()
+      for (const a of response.data.announcements) {
+        if (!notified.has(a.id)) {
+          notify({
+            title: a.title,
+            description: a.body ?? undefined,
+            color: a.type === 'error' ? 'error' : a.type === 'warning' ? 'warning' : 'info',
+            icon: a.type === 'error' ? 'i-lucide-alert-circle' : a.type === 'warning' ? 'i-lucide-alert-triangle' : 'i-lucide-megaphone',
+          })
+          notified.add(a.id)
+        }
+      }
+      persistNotifiedIds(notified)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadMoreActivity() {
+    if (!hasMoreActivity.value || activityLoadingMore.value) return
+    activityLoadingMore.value = true
+    try {
+      const nextPage = activityMeta.value.current_page + 1
+      const response = await client<DashboardResponse>(`/api/v2/dashboard?activity_page=${nextPage}`)
+      activity.value.push(...response.data.activity)
+      activityMeta.value = response.data.activity_meta
+    } finally {
+      activityLoadingMore.value = false
+    }
+  }
+
+  async function dismissAnnouncement(id: number) {
+    await client(`/api/v2/dashboard/announcements/${id}/dismiss`, {
+      method: 'POST',
+    })
+    announcements.value = announcements.value.filter(a => a.id !== id)
+  }
+
+  async function createAnnouncement(data: Record<string, unknown>) {
+    await client('/api/v2/dashboard/announcements', {
+      method: 'POST',
+      body: data,
+    })
+    await refresh()
+  }
+
+  refresh().catch(() => {})
+
+  return {
+    stats,
+    activity,
+    activityMeta,
+    activityLoadingMore,
+    hasMoreActivity,
+    publishingQueue,
+    announcements,
+    loading,
+    refresh,
+    loadMoreActivity,
+    dismissAnnouncement,
+    createAnnouncement,
+  }
+}

package/app/lang/de/motor-admin/dashboard.json

@@ -0,0 +1,81 @@
+{
+  "welcome": "Willkommen, {name}",
+  "announcement_created": "Meldung erstellt",
+  "announcement_dismissed": "Meldung ausgeblendet",
+  "stats": {
+    "pages": "Seiten",
+    "pages_total": "Gesamt",
+    "drafts": "Entwürfe",
+    "drafts_subtitle": "In Bearbeitung",
+    "scheduled": "Geplant",
+    "scheduled_subtitle": "Veröffentlichung",
+    "media": "Medien",
+    "media_subtitle": "Dateien"
+  },
+  "activity": {
+    "title": "Letzte Aktivitäten",
+    "empty": "Noch keine Aktivitäten",
+    "unknown": "Unbekannt",
+    "system": "System",
+    "verbs": {
+      "created": "erstellt",
+      "updated": "aktualisiert",
+      "deleted": "gelöscht",
+      "published": "veröffentlicht",
+      "unpublished": "offline genommen"
+    },
+    "types": {
+      "page": "Seite",
+      "navigation": "Navigation",
+      "media": "Medien",
+      "content_type": "Inhaltstyp",
+      "assistant": "Assistent",
+      "scoring": "Scoring",
+      "scheduled": "Geplant",
+      "approval": "Freigabe",
+      "seo": "SEO",
+      "search": "Suche"
+    }
+  },
+  "announcements": {
+    "title": "Meldungen",
+    "empty": "Keine Meldungen",
+    "modal_title": "Neue Meldung",
+    "field_title": "Titel",
+    "field_title_placeholder": "Meldung eingeben...",
+    "field_body": "Beschreibung",
+    "field_body_placeholder": "Optionale Details...",
+    "field_type": "Typ",
+    "field_audience": "Zielgruppe",
+    "field_users": "Nutzer auswählen",
+    "field_users_placeholder": "Nutzer suchen...",
+    "field_link": "Verknüpfung (optional)",
+    "field_link_type_placeholder": "Typ wählen...",
+    "field_link_item": "Element",
+    "field_link_item_placeholder": "Element suchen...",
+    "field_starts_at": "Sichtbar ab",
+    "field_expires_at": "Sichtbar bis",
+    "cancel": "Abbrechen",
+    "create": "Erstellen",
+    "type_info": "Info",
+    "type_warning": "Warnung",
+    "type_error": "Fehler",
+    "audience_self": "Nur für mich",
+    "audience_users": "Bestimmte Nutzer",
+    "audience_client": "Alle im Mandanten",
+    "linkable_page": "Seite",
+    "linkable_navigation": "Navigationspunkt",
+    "linkable_file": "Datei",
+    "linkable_content_type": "Inhaltstyp"
+  },
+  "quick_actions": {
+    "title": "Schnellaktionen",
+    "new_page": "Neue Seite",
+    "upload_media": "Medien hochladen",
+    "navigation": "Navigation"
+  },
+  "publishing_queue": {
+    "title": "Geplante Veröffentlichungen",
+    "empty": "Keine geplanten Veröffentlichungen"
+  }
+}

package/app/lang/en/motor-admin/dashboard.json

@@ -0,0 +1,81 @@
+{
+  "welcome": "Welcome, {name}",
+  "announcement_created": "Announcement created",
+  "announcement_dismissed": "Announcement dismissed",
+  "stats": {
+    "pages": "Pages",
+    "pages_total": "Total",
+    "drafts": "Drafts",
+    "drafts_subtitle": "In progress",
+    "scheduled": "Scheduled",
+    "scheduled_subtitle": "Publishing",
+    "media": "Media",
+    "media_subtitle": "Files"
+  },
+  "activity": {
+    "title": "Recent Activity",
+    "empty": "No activity yet",
+    "unknown": "Unknown",
+    "system": "System",
+    "verbs": {
+      "created": "created",
+      "updated": "updated",
+      "deleted": "deleted",
+      "published": "published",
+      "unpublished": "unpublished"
+    },
+    "types": {
+      "page": "Page",
+      "navigation": "Navigation",
+      "media": "Media",
+      "content_type": "Content type",
+      "assistant": "Assistant",
+      "scoring": "Scoring",
+      "scheduled": "Scheduled",
+      "approval": "Approval",
+      "seo": "SEO",
+      "search": "Search"
+    }
+  },
+  "announcements": {
+    "title": "Announcements",
+    "empty": "No announcements",
+    "modal_title": "New Announcement",
+    "field_title": "Title",
+    "field_title_placeholder": "Enter announcement...",
+    "field_body": "Description",
+    "field_body_placeholder": "Optional details...",
+    "field_type": "Type",
+    "field_audience": "Audience",
+    "field_users": "Select users",
+    "field_users_placeholder": "Search users...",
+    "field_link": "Link (optional)",
+    "field_link_type_placeholder": "Select type...",
+    "field_link_item": "Item",
+    "field_link_item_placeholder": "Search item...",
+    "field_starts_at": "Visible from",
+    "field_expires_at": "Visible until",
+    "cancel": "Cancel",
+    "create": "Create",
+    "type_info": "Info",
+    "type_warning": "Warning",
+    "type_error": "Error",
+    "audience_self": "Only me",
+    "audience_users": "Specific users",
+    "audience_client": "Everyone in client",
+    "linkable_page": "Page",
+    "linkable_navigation": "Navigation item",
+    "linkable_file": "File",
+    "linkable_content_type": "Content type"
+  },
+  "quick_actions": {
+    "title": "Quick Actions",
+    "new_page": "New Page",
+    "upload_media": "Upload Media",
+    "navigation": "Navigation"
+  },
+  "publishing_queue": {
+    "title": "Scheduled Publications",
+    "empty": "No scheduled publications"
+  }
+}

package/app/pages/index.vue

@@ -1,39 +1,117 @@
 <script setup lang="ts">
 import type { User } from '@motor-cms/ui-core/app/types/auth'
 
+definePageMeta({
+  permission: 'dashboard.read',
+})
+
+const { t, locale } = useI18n()
 const { user } = useSanctumAuth<User>()
-const { clientName } = useRuntimeConfig().public
-const { t } = useI18n()
+const { can } = usePermissions()
 
-// Helper to access user data
-const userData = computed(() => user.value?.data)
+const canCreateAnnouncements = computed(() => can('dashboard-announcements.write'))
 
-definePageMeta({
-  layout: 'default',
-  permission: 'dashboard.read'
+const {
+  stats,
+  activity,
+  activityLoadingMore,
+  hasMoreActivity,
+  publishingQueue,
+  announcements,
+  loading,
+  refresh,
+  loadMoreActivity,
+  dismissAnnouncement,
+} = useDashboardData()
+
+const announcementModalOpen = ref(false)
+
+const currentDate = computed(() => {
+  return new Date().toLocaleDateString(locale.value, {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
 })
+
+function onAnnouncementCreated() {
+  refresh()
+  toast.add({ title: t('motor-admin.dashboard.announcement_created'), icon: 'i-lucide-megaphone', color: 'success' })
+}
+
+const toast = useToast()
+
+async function onDismiss(id: number) {
+  await dismissAnnouncement(id)
+  toast.add({ title: t('motor-admin.dashboard.announcement_dismissed'), icon: 'i-lucide-check', color: 'success' })
+}
 </script>
 
 <template>
   <div class="p-6">
-    <!-- Mobile sidebar toggle -->
-    <div class="lg:hidden mb-3">
-      <UDashboardSidebarToggle />
+    <div class="flex items-start justify-between mb-6">
+      <div>
+        <h1 class="text-xl font-heading font-semibold text-highlighted">
+          {{ t('motor-admin.dashboard.welcome', { name: user?.data?.name ?? '' }) }}
+        </h1>
+        <p class="text-sm text-dimmed mt-1">
+          {{ currentDate }}
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <UButton
+          icon="i-lucide-plus"
+          color="primary"
+          size="sm"
+          :label="t('motor-admin.dashboard.quick_actions.new_page')"
+          @click="navigateTo('/motor-builder/builder-pages/create')"
+        />
+        <UButton
+          icon="i-lucide-upload"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          :label="t('motor-admin.dashboard.quick_actions.upload_media')"
+          @click="navigateTo('/motor-media/files/create')"
+        />
+        <UButton
+          icon="i-lucide-menu"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          :label="t('motor-admin.dashboard.quick_actions.navigation')"
+          to="/motor-builder/navigation-trees"
+        />
+      </div>
     </div>
 
-    <div class="mb-6">
-      <h1 class="text-2xl font-bold">
-        {{ t('motor-core.global.dashboard') }}
-      </h1>
+    <DashboardStats :stats="stats" :loading="loading" class="mb-6" />
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <DashboardActivity
+        :items="activity"
+        :loading="loading"
+        :loading-more="activityLoadingMore"
+        :has-more="hasMoreActivity"
+        @load-more="loadMoreActivity"
+      />
+
+      <div class="flex flex-col gap-4">
+        <DashboardAnnouncements
+          :items="announcements"
+          :loading="loading"
+          :can-create="canCreateAnnouncements"
+          @dismiss="onDismiss"
+          @create="announcementModalOpen = true"
+        />
+        <DashboardPublishingQueue :items="publishingQueue" :loading="loading" />
+      </div>
     </div>
 
-    <UPageCard :title="t('motor-core.global.welcome_back')">
-      <template #description>
-        {{ t('motor-core.global.logged_in_as') }} {{ userData?.name || userData?.email || 'User' }}.
-      </template>
-      <p class="text-sm text-muted">
-        {{ t('motor-core.global.dashboard_description', { clientName }) }}
-      </p>
-    </UPageCard>
+    <DashboardAnnouncementModal
+      v-model:open="announcementModalOpen"
+      @created="onAnnouncementCreated"
+    />
   </div>
 </template>

package/app/pages/search.vue

@@ -123,16 +123,20 @@ async function handleCardAction(key: string, id: number | string | null, meta: R
     quicklinkerPageName.value = (meta.name as string) ?? ''
     quicklinkerOpen.value = true
   } else if (key === 'publish' && id) {
+    const isPublished = !!meta?.is_published
     try {
       await client(`/api/v2/builder-pages/${id}/publication`, {
         method: 'PUT',
-        body: { is_published: true }
+        body: { is_published: !isPublished }
       })
       toast.add({
-        title: t('motor-builder.builder_pages.toast_published'),
+        title: !isPublished
+          ? t('motor-builder.builder_pages.toast_published')
+          : t('motor-builder.builder_pages.toast_unpublished'),
         color: 'success',
-        icon: 'i-lucide-globe'
+        icon: !isPublished ? 'i-lucide-globe' : 'i-lucide-globe-lock'
       })
+      doSearch()
     } catch {
       toast.add({
         title: t('motor-builder.builder_pages.toast_publish_error'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-cms/ui-admin",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -17,7 +17,7 @@
     "@vueuse/core": "^14.0.0",
     "sortablejs": "^1.15.0",
     "zod": "^4.0.0",
-    "@motor-cms/ui-core": "1.2.0"
+    "@motor-cms/ui-core": "1.4.0"
   },
   "peerDependencies": {
     "nuxt": "^4.0.0",

package/app/pages/dashboard.vue

@@ -1,5 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  redirect: '/'
-})
-</script>