@motor-cms/ui-admin 1.1.0-alpha.4 → 1.1.0-alpha.5

package/app/components/dashboard/DashboardOnboarding.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { useVOnboarding } from 'v-onboarding'
+import type { User } from '@motor-cms/ui-core/app/types/auth'
+
+const { t } = useI18n()
+const { can } = usePermissions()
+const { user } = useSanctumAuth<User>()
+const router = useRouter()
+const { completeOnboarding } = useProfileApi()
+const { commitDone } = useOnboardingDone()
+const { isEnabled } = useOnboardingEnabled()
+
+const { isCompleted: announcementsCompleted, markCompleted: markAnnouncementsDone } = useOnboardingState('dashboard-announcements')
+const { isCompleted: notificationsCompleted, markCompleted: markNotificationsDone } = useOnboardingState('notifications')
+const { isCompleted: searchCompleted, markCompleted: markSearchDone } = useOnboardingState('search')
+const { isCompleted: adminNavCompleted, markCompleted: markAdminNavDone } = useOnboardingState('admin-nav')
+const { resetAll: resetOnboardingState } = useOnboardingResetAll()
+const { setPending } = usePendingOnboarding()
+
+// ── Wrappers ──────────────────────────────────────────────────────────────────
+const announcementsWrapper = ref(null)
+const notificationsWrapper = ref(null)
+const searchWrapper = ref(null)
+const adminNavWrapper = ref(null)
+
+const { start: startAnnouncements, finish: finishAnnouncements } = useVOnboarding(announcementsWrapper)
+const { start: startNotifications, finish: finishNotifications } = useVOnboarding(notificationsWrapper)
+const { start: startSearch, finish: finishSearch } = useVOnboarding(searchWrapper)
+const { start: startAdminNav, finish: finishAdminNav } = useVOnboarding(adminNavWrapper)
+
+// ── Shared options ────────────────────────────────────────────────────────────
+const options = computed(() => ({
+  scrollToStep: { enabled: true, options: { behavior: 'smooth' as ScrollBehavior, block: 'center' as ScrollLogicalPosition } },
+  popper: { strategy: 'fixed' as const },
+  labels: {
+    previousButton: t('motor-admin.onboarding.previous'),
+    nextButton: t('motor-admin.onboarding.next'),
+    finishButton: t('motor-admin.onboarding.finish'),
+  },
+}))
+
+// ── Announcements steps ───────────────────────────────────────────────────────
+const canCreate = computed(() => can('dashboard-announcements.write'))
+
+const announcementSteps = computed(() => {
+  const steps = [
+    {
+      attachTo: { element: '#onboarding-announcements-card' },
+      content: {
+        title: t('motor-admin.onboarding.announcements.step1_title'),
+        description: t('motor-admin.onboarding.announcements.step1_desc'),
+      },
+    },
+    {
+      attachTo: { element: '#onboarding-announcements-body' },
+      content: {
+        title: t('motor-admin.onboarding.announcements.step2_title'),
+        description: t('motor-admin.onboarding.announcements.step2_desc'),
+      },
+    },
+  ]
+
+  if (canCreate.value) {
+    steps.push({
+      attachTo: { element: '#onboarding-announcements-create' },
+      content: {
+        title: t('motor-admin.onboarding.announcements.step3_title'),
+        description: t('motor-admin.onboarding.announcements.step3_desc'),
+      },
+    })
+  }
+
+  return steps
+})
+
+// ── Notifications steps ───────────────────────────────────────────────────────
+// Single step only: opening the slideover during an active v-onboarding tour
+// creates an unresolvable z-index conflict — v-onboarding's own overlay covers
+// the slideover panel, and the slideover teleports to body after the tooltip,
+// making either element hide the other. All relevant info is covered in one step.
+const notificationsSteps = computed(() => [
+  {
+    attachTo: { element: '#onboarding-notification-bell' },
+    content: {
+      title: t('motor-admin.onboarding.notifications.step1_title'),
+      description: t('motor-admin.onboarding.notifications.step1_desc'),
+    },
+    options: {
+      popper: {
+        placement: 'left' as const,
+      },
+    },
+  },
+])
+
+// ── Search steps ──────────────────────────────────────────────────────────────
+const searchSteps = computed(() => [
+  {
+    attachTo: { element: '#onboarding-search-button' },
+    content: {
+      title: t('motor-admin.onboarding.search.step1_title'),
+      description: t('motor-admin.onboarding.search.step1_desc'),
+    },
+    options: { popper: { placement: 'right' as const } },
+  },
+  {
+    attachTo: { element: '#onboarding-search-button' },
+    content: {
+      title: t('motor-admin.onboarding.search.step2_title'),
+      description: t('motor-admin.onboarding.search.step2_desc'),
+    },
+    options: { popper: { placement: 'right' as const } },
+  },
+])
+
+// ── Admin navigation steps ────────────────────────────────────────────────────
+const adminNavSteps = computed(() => [
+  {
+    attachTo: { element: '#onboarding-sidebar-nav' },
+    content: {
+      title: t('motor-admin.onboarding.admin_nav.step1_title'),
+      description: t('motor-admin.onboarding.admin_nav.step1_desc'),
+    },
+  },
+])
+
+// ── Finish handlers ───────────────────────────────────────────────────────────
+
+/**
+ * Announcements tour finished → chain to notifications.
+ */
+async function onAnnouncementsFinish() {
+  markAnnouncementsDone()
+  await nextTick()
+  if (!notificationsCompleted.value) {
+    startNotifications()
+  }
+}
+
+/**
+ * Notifications tour finished → chain to search tour.
+ */
+async function onNotificationsFinish() {
+  markNotificationsDone()
+  await nextTick()
+  if (!searchCompleted.value) {
+    startSearch()
+  }
+  else if (!adminNavCompleted.value) {
+    startAdminNav()
+  }
+}
+
+/**
+ * Search tour finished → chain to admin-nav tour.
+ */
+async function onSearchFinish() {
+  markSearchDone()
+  await nextTick()
+  if (!adminNavCompleted.value) {
+    startAdminNav()
+  }
+}
+
+/**
+ * Admin-nav tour finished → mark done, store pending flag, navigate to users list.
+ * UsersOnboarding on the users page detects the pending flag and auto-starts
+ * the grid explanation tour.
+ */
+function onAdminNavFinish() {
+  markAdminNavDone()
+  setPending('admin-grid')
+  router.push('/motor-admin/users')
+}
+
+// ── Skip handlers ─────────────────────────────────────────────────────────────
+// Pre-mark all remaining tours as done so @finish chain conditions are false,
+// then call finish() to close the wrapper.
+//
+// finish() is required — exit() from the slot only emits @exit without
+// changing the wrapper's internal currentIndex, so the tooltip stays open.
+//
+// completeOnboarding() clears show_onboarding on the backend so the watch
+// does not trigger another resetOnboardingState() on the next dashboard visit.
+// We also set user.value.data.show_onboarding = false immediately so the
+// in-memory auth cache does not cause another reset before the API response
+// arrives.
+
+function skipAll() {
+  // commitDone() must run BEFORE the API call — if the browser cancels the
+  // in-flight request on a hard reload the localStorage flag still survives
+  // and prevents the show_onboarding watch from resetting state.
+  commitDone()
+  markAnnouncementsDone()
+  markNotificationsDone()
+  markSearchDone()
+  markAdminNavDone()
+  if (user.value?.data) user.value.data.show_onboarding = false
+  completeOnboarding().catch(() => {})
+}
+
+function skipAnnouncements() { skipAll(); finishAnnouncements() }
+function skipNotifications() { skipAll(); finishNotifications() }
+function skipSearch() { skipAll(); finishSearch() }
+function skipAdminNav() { skipAll(); finishAdminNav() }
+
+// ── Start logic ───────────────────────────────────────────────────────────────
+// Watch both the 4 wrappers AND user.value.data so the show_onboarding check
+// never runs against a null/stale user — solving the race between wrapper mount
+// and the sanctum /api/user response.
+//
+// After resetting we immediately set user.value.data.show_onboarding = false so
+// that if DashboardOnboarding is unmounted and remounted (navigation away/back)
+// the same session does not trigger a second reset from the in-memory cache.
+// completeOnboarding() would clear the backend flag, but that is fire-and-forget
+// and may resolve after a re-render; the local mutation is the reliable guard.
+const stopWatch = watch(
+  () => [
+    announcementsWrapper.value,
+    notificationsWrapper.value,
+    searchWrapper.value,
+    adminNavWrapper.value,
+    user.value?.data,
+  ] as const,
+  async ([announcementsW, notificationsW, searchW, adminNavW, userData]) => {
+    if (!announcementsW || !notificationsW || !searchW || !adminNavW || !userData) return
+    stopWatch()
+
+    const shouldRun = isEnabled.value
+
+    if (shouldRun) {
+      userData.show_onboarding = false
+      resetOnboardingState()
+    }
+
+    if (shouldRun && !announcementsCompleted.value) {
+      startAnnouncements()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <VOnboardingWrapper
+    ref="announcementsWrapper"
+    :steps="announcementSteps"
+    :options="options"
+    @finish="onAnnouncementsFinish"
+  >
+    <template #default="{ step, next, previous, isFirst, isLast }">
+      <OnboardingStep :step="step" :next="next" :previous="previous" :skip="skipAnnouncements" :is-first="isFirst" :is-last="isLast" />
+    </template>
+  </VOnboardingWrapper>
+  <VOnboardingWrapper
+    ref="notificationsWrapper"
+    :steps="notificationsSteps"
+    :options="options"
+    @finish="onNotificationsFinish"
+  >
+    <template #default="{ step, next, previous, isFirst, isLast }">
+      <OnboardingStep :step="step" :next="next" :previous="previous" :skip="skipNotifications" :is-first="isFirst" :is-last="isLast" />
+    </template>
+  </VOnboardingWrapper>
+  <VOnboardingWrapper
+    ref="searchWrapper"
+    :steps="searchSteps"
+    :options="options"
+    @finish="onSearchFinish"
+  >
+    <template #default="{ step, next, previous, isFirst, isLast }">
+      <OnboardingStep :step="step" :next="next" :previous="previous" :skip="skipSearch" :is-first="isFirst" :is-last="isLast" />
+    </template>
+  </VOnboardingWrapper>
+  <VOnboardingWrapper
+    ref="adminNavWrapper"
+    :steps="adminNavSteps"
+    :options="options"
+    @finish="onAdminNavFinish"
+  >
+    <template #default="{ step, next, previous, isFirst, isLast }">
+      <OnboardingStep :step="step" :next="next" :previous="previous" :skip="skipAdminNav" :is-first="isFirst" :is-last="isLast" />
+    </template>
+  </VOnboardingWrapper>
+</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>