@raclettejs/workbench 0.0.1

package/services/frontend/src/app/components/dynamicForm/validators.ts

@@ -0,0 +1,19 @@
+export const emailValidator = (value: string): string | null => {
+  if (!value) return null
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  return emailRegex.test(value)
+    ? null
+    : "workbench.dynamicInputs.validation.invalidEmail"
+}
+
+export const urlValidator = (value: string): string | null => {
+  const { t } = useI18n()
+
+  if (!value) return null
+  try {
+    new URL(value)
+    return null
+  } catch {
+    return "workbench.dynamicInputs.validation.invalidUrl"
+  }
+}

package/services/frontend/src/app/components/stepNavigator/StepNavigator.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="tw:w-full">
+    <!-- Step Navigator Header -->
+    <v-navigation-drawer
+      v-if="steps.length > 1"
+      location="top"
+      permanent
+      :width="NAVIGATION_HEIGHT"
+    >
+      <div class="tw:size-full tw:flex tw:items-center tw:align-center">
+        <div class="tw:overflow-x-auto tw:w-full">
+          <div
+            class="tw:flex tw:items-center tw:justify-center tw:min-w-max tw:px-4"
+          >
+            <div class="tw:flex tw:items-center tw:space-x-4">
+              <template v-for="(step, index) in steps" :key="step.id">
+                <!-- Step Item -->
+                <div
+                  @click="
+                    allowFreeNavigation ? setCurrentStep(index + 1) : null
+                  "
+                  class="tw:flex tw:items-center tw:cursor-pointer tw:transition-all tw:duration-200 tw:group tw:flex-shrink-0"
+                  :class="{
+                    'tw:opacity-100': currentStepIndex >= index + 1,
+                    'tw:opacity-60':
+                      currentStepIndex < index + 1 &&
+                      !isStepAccessible(index + 1),
+                  }"
+                >
+                  <!-- Step Circle -->
+                  <div
+                    class="tw:w-10 tw:h-10 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:transition-all tw:duration-200 tw:border-2"
+                    :class="{
+                      'tw:bg-[#DD8B41] tw:border-[#DD8B41] tw:text-white':
+                        currentStepIndex === index + 1,
+                      'tw:bg-green-500 tw:border-green-500 tw:text-white':
+                        currentStepIndex > index + 1,
+                      'tw:bg-white tw:border-gray-300 tw:text-gray-500 group-hover:tw:border-blue-300':
+                        currentStepIndex !== index + 1 &&
+                        currentStepIndex < index + 1,
+                    }"
+                  >
+                    <v-icon
+                      v-if="currentStepIndex > index + 1"
+                      class="tw:text-sm"
+                      >mdi-check</v-icon
+                    >
+                    <span v-else class="tw:text-sm tw:font-semibold">
+                      {{ index + 1 }}
+                    </span>
+                  </div>
+
+                  <!-- Step Label -->
+                  <div class="tw:ml-3 tw:min-w-0">
+                    <div
+                      v-if="step.title"
+                      class="tw:text-sm tw:font-medium tw:transition-colors tw:duration-200 tw:whitespace-nowrap"
+                      :class="{
+                        'tw:text-[#DD8B41]': currentStepIndex === index + 1,
+                        'tw:text-green-600': currentStepIndex > index + 1,
+                        'tw:text-gray-600 group-hover:tw:text-blue-600':
+                          currentStepIndex !== index + 1,
+                      }"
+                    >
+                      {{ step.title }}
+                    </div>
+                    <div
+                      v-if="step.subtitle"
+                      class="tw:text-xs tw:text-gray-500 tw:whitespace-nowrap"
+                    >
+                      {{ step.subtitle }}
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Connector Line (not for last step) -->
+                <div
+                  v-if="index < steps.length - 1"
+                  class="tw:w-12 tw:h-0.5 tw:transition-colors tw:duration-200 tw:flex-shrink-0"
+                  :class="{
+                    'tw:bg-green-500': currentStepIndex > index + 1,
+                    'tw:bg-gray-300': currentStepIndex <= index + 1,
+                  }"
+                ></div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </v-navigation-drawer>
+
+    <!-- Step Content Container -->
+    <!-- <div class="tw:min-h-full"> -->
+    <slot v-bind="{ currentStep, currentStepIndex }" />
+    <!-- </div> -->
+
+    <v-navigation-drawer location="bottom" permanent :width="84">
+      <div
+        class="tw:flex tw:h-full tw:items-center tw:justify-between tw:container tw:mx-auto tw:px-4"
+      >
+        <!-- Left side - Back button -->
+        <div>
+          <v-btn
+            v-if="steps.length > 1"
+            @click="previousStep"
+            :disabled="isFirstStep || isSaving"
+            color="primary"
+            prepend-icon="mdi-chevron-left"
+            variant="outlined"
+            :text="$t('workbench.global.back')"
+          />
+        </div>
+
+        <div class="tw:flex tw:items-center tw:gap-3">
+          <v-btn
+            v-if="showSaveButton"
+            @click="save()"
+            :disabled="isSaving"
+            :loading="isSaving"
+            color="success"
+            prepend-icon="mdi-check"
+            :text="$t('workbench.global.save')"
+          />
+
+          <v-btn
+            v-if="!isLastStep"
+            @click="nextStep()"
+            :disabled="isSaving"
+            color="primary"
+            append-icon="mdi-chevron-right"
+            :text="$t('workbench.global.next_step')"
+          />
+
+          <v-btn
+            v-else-if="!showSaveButton"
+            @click="save(true)"
+            :disabled="isSaving"
+            :loading="isSaving"
+            color="success"
+            prepend-icon="mdi-check-circle-outline"
+            :text="$t('workbench.global.save_finish')"
+          />
+        </div>
+      </div>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue"
+import { Step, StepChangeType } from "./StepNavigatorTypes"
+
+const NAVIGATION_HEIGHT = 84
+
+const props = withDefaults(
+  defineProps<{
+    steps: Step[]
+    initialStep?: number
+    allowFreeNavigation?: boolean
+    canProceed?: boolean
+    canFinish?: boolean
+    isSaving?: boolean
+    showSaveButton?: boolean
+    paddingTop?: boolean
+    paddingBottom?: boolean
+  }>(),
+  {
+    initialStep: 1,
+    allowFreeNavigation: true,
+    paddingBottom: true,
+  },
+)
+
+const emit = defineEmits<{
+  "step-changed": [StepChangeType]
+  "step-selected": [StepChangeType]
+  "validation-failed": [{ step: Step; stepIndex: number }]
+  save: [void]
+  "save-and-finish": [void]
+}>()
+
+const currentStepIndex = ref(props.initialStep)
+
+const currentStep = computed(() => props.steps[currentStepIndex.value - 1])
+const isFirstStep = computed(() => currentStepIndex.value === 1)
+const isLastStep = computed(() => currentStepIndex.value === props.steps.length)
+
+const isStepAccessible = (stepNumber: number) => {
+  if (props.allowFreeNavigation) return true
+
+  // Step 1 is always accessible
+  if (stepNumber === 1) return true
+
+  return true
+}
+
+const validateCurrentStep = () => {
+  const step = currentStep.value
+  if (!step?.validator) {
+    return true // No validator means validation passes
+  }
+
+  try {
+    return step.validator()
+  } catch (error) {
+    console.error("Step validation error:", error)
+    return false
+  }
+}
+
+const setCurrentStep = (step: number) => {
+  if (currentStepIndex.value === step) {
+    // Step is already active
+    return
+  }
+
+  // Validate step exists
+  if (step < 1 || step > props.steps.length) {
+    return
+  }
+
+  // // Validate step access
+  // if (!isStepAccessible(step)) {
+  //   return
+  // }
+
+  // If moving forward (not backward), validate current step first
+  if (step > currentStepIndex.value) {
+    const isValid = validateCurrentStep()
+    if (!isValid) {
+      emit("validation-failed", {
+        step: currentStep.value,
+        stepIndex: currentStepIndex.value - 1,
+      })
+      return
+    }
+  }
+
+  currentStepIndex.value = step
+  emit("step-changed", {
+    stepNumber: step,
+    stepData: props.steps[step - 1],
+    stepIndex: step - 1,
+  })
+  emit("step-selected", {
+    stepNumber: step,
+    stepData: props.steps[step - 1],
+    stepIndex: step - 1,
+  })
+}
+
+const save = (finish = false) => {
+  if (validateCurrentStep()) {
+    if (finish) {
+      emit("save-and-finish")
+    } else {
+      emit("save")
+    }
+  }
+}
+
+// Public methods (exposed to parent)
+const goToStep = (step) => {
+  setCurrentStep(step)
+}
+
+const nextStep = () => {
+  if (currentStepIndex.value < props.steps.length) {
+    setCurrentStep(currentStepIndex.value + 1)
+  }
+}
+
+const previousStep = () => {
+  if (currentStepIndex.value > 1) {
+    setCurrentStep(currentStepIndex.value - 1)
+  }
+}
+
+// Add validation method to exposed methods
+const validateStep = () => {
+  return validateCurrentStep()
+}
+
+defineExpose({
+  goToStep,
+  nextStep,
+  previousStep,
+  validateStep,
+  currentStep,
+})
+
+watch(
+  () => props.initialStep,
+  (newStep) => {
+    if (newStep >= 1 && newStep <= props.steps.length) {
+      currentStepIndex.value = newStep
+    }
+  },
+)
+
+watch(
+  () => props.steps,
+  (newSteps) => {
+    if (newSteps.length > 0 && currentStepIndex.value > newSteps.length) {
+      currentStepIndex.value = 1
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+/* Custom scrollbar for step navigator */
+.tw:overflow-x-auto::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tw:overflow-x-auto::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 2px;
+}
+
+.tw:overflow-x-auto::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 2px;
+}
+
+.tw:overflow-x-auto::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+</style>

package/services/frontend/src/app/components/stepNavigator/StepNavigatorTypes.ts

@@ -0,0 +1,12 @@
+export type Step<T = string> = {
+  id: T
+  title?: string
+  subtitle?: string
+  validator?: () => boolean
+}
+
+export type StepChangeType<T = string> = {
+  stepNumber: number
+  stepData: Step<T>
+  stepIndex: number
+}

package/services/frontend/src/app/composables/useUserHelper.ts

@@ -0,0 +1,254 @@
+import type { User } from "@raclettejs/core"
+import { computed, type ComputedRef } from "vue"
+
+// TODO: could be moved to orchestrator once we split the core
+export const useUserHelper = (user: User | ComputedRef<User>) => {
+  // Handle both reactive and non-reactive user objects
+  const userRef = computed(() =>
+    typeof user === "object" && "value" in user ? user.value : user,
+  )
+
+  // Display name with fallback logic
+  const displayName = computed(() => {
+    const u = userRef.value
+    if (!u) return "Unknown User"
+
+    const parts = []
+    if (u.title) parts.push(u.title)
+    if (u.firstname) parts.push(u.firstname)
+    if (u.lastname) parts.push(u.lastname)
+
+    if (parts.length > 0) {
+      return parts.join(" ")
+    }
+
+    return u.email?.split("@")[0] || "Unknown User"
+  })
+
+  // Initials for avatar fallbacks
+  const initials = computed(() => {
+    const u = userRef.value
+    if (!u) return "?"
+
+    if (u.firstname && u.lastname) {
+      return `${u.firstname[0]}${u.lastname[0]}`.toUpperCase()
+    }
+
+    if (u.firstname) return u.firstname[0].toUpperCase()
+    if (u.lastname) return u.lastname[0].toUpperCase()
+    if (u.email) return u.email[0].toUpperCase()
+
+    return "?"
+  })
+
+  // Full name (more formal)
+  const fullName = computed(() => {
+    const u = userRef.value
+
+    if (!u) return ""
+
+    if (u.firstname && u.lastname) {
+      return `${u.firstname} ${u.lastname}`
+    }
+
+    return u.firstname || u.lastname || ""
+  })
+
+  // Full name with title
+  const formalName = computed(() => {
+    const u = userRef.value
+    if (!u) return ""
+
+    const parts = []
+    if (u.title) parts.push(u.title)
+    if (u.firstname) parts.push(u.firstname)
+    if (u.lastname) parts.push(u.lastname)
+
+    return parts.join(" ")
+  })
+
+  // User status
+  const isActive = computed(() => {
+    return userRef.value?.active ?? false
+  })
+
+  const isBlocked = computed(() => {
+    return userRef.value?.blocked ?? false
+  })
+
+  const isDeleted = computed(() => {
+    return userRef.value?.isDeleted ?? false
+  })
+
+  const isEmailVerified = computed(() => {
+    return userRef.value?.email_verified ?? false
+  })
+
+  // User tags
+  const userTags = computed(() => {
+    return userRef.value?.tags || []
+  })
+
+  // Time-based computed properties
+  const memberSince = computed(() => {
+    const u = userRef.value
+    if (!u?.createdAt) return null
+
+    const date = new Date(u.createdAt)
+    return date.toLocaleDateString()
+  })
+
+  const lastUpdated = computed(() => {
+    const u = userRef.value
+    if (!u?.updatedAt) return null
+
+    const date = new Date(u.updatedAt)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+    if (diffDays === 0) return "Today"
+    if (diffDays === 1) return "Yesterday"
+    if (diffDays < 7) return `${diffDays} days ago`
+
+    return date.toLocaleDateString()
+  })
+
+  const passwordLastUpdated = computed(() => {
+    const u = userRef.value
+    if (!u?.passwordUpdatedAt) return null
+
+    const date = new Date(u.passwordUpdatedAt)
+    return date.toLocaleDateString()
+  })
+
+  const hasSignedTerms = computed(() => {
+    return !!userRef.value?.signedTermsAt
+  })
+
+  const termsSignedAt = computed(() => {
+    const u = userRef.value
+    if (!u?.signedTermsAt) return null
+
+    const date = new Date(u.signedTermsAt)
+    return date.toLocaleDateString()
+  })
+
+  // Utility methods
+  const hasTag = (tag: string) => {
+    return userRef.value?.tags?.includes(tag) ?? false
+  }
+
+  const hasAnyTag = (tags: string[]) => {
+    const userTags = userRef.value?.tags || []
+    return tags.some((tag) => userTags.includes(tag))
+  }
+
+  const hasAllTags = (tags: string[]) => {
+    const userTags = userRef.value?.tags || []
+    return tags.every((tag) => userTags.includes(tag))
+  }
+
+  const getContactEmail = () => {
+    return userRef.value?.email || null
+  }
+
+  const canLogin = () => {
+    const u = userRef.value
+    return u?.active && !u?.blocked && !u?.isDeleted
+  }
+
+  const needsPasswordReset = () => {
+    return !!userRef.value?.resetToken
+  }
+
+  const isAccountOwner = () => {
+    const u = userRef.value
+    return u?.owner === u?._id
+  }
+
+  const getAccountStatus = () => {
+    const u = userRef.value
+    if (!u) return "unknown"
+
+    if (u.isDeleted) return "deleted"
+    if (u.blocked) return "blocked"
+    if (!u.active) return "inactive"
+    if (!u.email_verified) return "unverified"
+
+    return "active"
+  }
+
+  const getAccountStatusColor = () => {
+    const status = getAccountStatus()
+    const colors = {
+      active: "#22c55e",
+      inactive: "#eab308",
+      blocked: "#ef4444",
+      deleted: "#6b7280",
+      unverified: "#f97316",
+      unknown: "#6b7280",
+    }
+
+    return colors[status as keyof typeof colors]
+  }
+
+  // Generate a consistent color for the user (useful for avatar backgrounds)
+  const userColor = computed(() => {
+    const u = userRef.value
+    if (!u) return "#gray"
+
+    const colors = [
+      "#ef4444",
+      "#f97316",
+      "#eab308",
+      "#22c55e",
+      "#06b6d4",
+      "#3b82f6",
+      "#8b5cf6",
+      "#ec4899",
+    ]
+
+    const hash = u._id
+      .toString()
+      .split("")
+      .reduce((acc, char) => {
+        return acc + char.charCodeAt(0)
+      }, 0)
+
+    return colors[hash % colors.length]
+  })
+
+  return {
+    // Computed properties
+    displayName,
+    initials,
+    fullName,
+    formalName,
+    isActive,
+    isBlocked,
+    isDeleted,
+    isEmailVerified,
+    userTags,
+    memberSince,
+    lastUpdated,
+    passwordLastUpdated,
+    hasSignedTerms,
+    termsSignedAt,
+    userColor,
+
+    // Methods
+    hasTag,
+    hasAnyTag,
+    hasAllTags,
+    getContactEmail,
+    canLogin,
+    needsPasswordReset,
+    isAccountOwner,
+    getAccountStatus,
+    getAccountStatusColor,
+
+    // Raw user ref for direct access
+    user: userRef,
+  }
+}

package/services/frontend/src/app/composables/useVantaFog.ts

@@ -0,0 +1,37 @@
+import * as THREE from "three"
+import FOG from "vanta/dist/vanta.fog.min.js"
+import { onBeforeUnmount, onMounted, ref, type Ref } from "vue"
+
+export default (elementRef: Ref<any>) => {
+  let vantaEffect: any
+
+  onMounted(async () => {
+    // Now we can access the mounted element
+    const element = elementRef.value?.$el || elementRef.value
+
+    if (!element) {
+      console.error("Element not found for Vanta effect")
+      return
+    }
+
+    const pixelRatio = window.devicePixelRatio || 1
+
+    vantaEffect = FOG({
+      el: element,
+      THREE,
+      highlightColor: 0xe8bc8b,
+      midtoneColor: 0xe6c485,
+      lowlightColor: 0xa5a5c3,
+      baseColor: 0xede5db,
+      blurFactor: 0.4,
+      speed: 0.1,
+      zoom: 0.3 / pixelRatio, // makes it more evenly looking across screens
+    })
+  })
+
+  onBeforeUnmount(() => {
+    if (vantaEffect) {
+      vantaEffect.destroy()
+    }
+  })
+}

package/services/frontend/src/app/composables/useWorkbenchPlugins.ts

@@ -0,0 +1,44 @@
+import type { PluginMetadata } from "@raclettejs/core"
+import { registeredPlugins } from "@raclettejs/core/frontend"
+import { widgetLoader } from "@raclettejs/core/orchestrator/helpers/widgetLoader"
+import { generatePluginKey } from "@shared/helper/pluginHelper"
+import { forEachObjIndexed } from "ramda"
+import { computed } from "vue"
+
+const PLUGIN_SETTINGS_WIDGET_NAME = "PluginSettings"
+
+const PLUGIN_METADATA_FILES: { [key: string]: { default: PluginMetadata } } =
+  import.meta.glob<{ default: PluginMetadata }>(
+    "@racletteCore/../../external-app-plugins/**/raclette.plugin.ts",
+    {
+      eager: true,
+    },
+  )
+
+export default () => {
+  const pluginMetadataFiles = computed(() => {
+    const pluginFiles: PluginMetadata[] = []
+    forEachObjIndexed(({ default: pluginFile }) => {
+      const fileContent = pluginFile
+      fileContent.pluginKey = generatePluginKey(
+        pluginFile.name,
+        pluginFile.author,
+      )
+      pluginFiles.push(fileContent)
+    }, PLUGIN_METADATA_FILES)
+    return pluginFiles
+  })
+
+  const getWorkbenchPlugin = ({ pluginKey }: { pluginKey: string }) => {
+    // Always load "PluginSettingsWidget"
+    return widgetLoader({
+      pluginKey,
+      name: PLUGIN_SETTINGS_WIDGET_NAME,
+    })
+  }
+
+  const hasPluginSettingsWidget = (pluginKey: string) =>
+    !!registeredPlugins?.[pluginKey]?.widgets?.[PLUGIN_SETTINGS_WIDGET_NAME]
+
+  return { pluginMetadataFiles, getWorkbenchPlugin, hasPluginSettingsWidget }
+}