@nuxt-customer-portal/organizations 0.3.0

package/app/components/OrganizationSettings.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+import type { ApiError, Organization } from '@nuxt-customer-portal/core/shared/types/index'
+
+const emit = defineEmits<{
+  updated: []
+  canceled: []
+}>()
+
+const loading = ref(true)
+const updating = ref(false)
+const error = ref('')
+const memberRole = ref<string | null>(null)
+const originalSlug = ref('')
+const slugStatus = ref<'idle' | 'checking' | 'available' | 'unavailable' | 'error'>('idle')
+const slugMessage = ref('')
+const fileRef = ref<HTMLInputElement>()
+const selectedFile = ref<File | null>(null)
+const formState = reactive({
+  id: '',
+  name: '',
+  slug: '',
+  logo: ''
+})
+
+const { t } = useI18n()
+
+const normalizeSlug = (value: string) =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+const formSchema = computed(() =>
+  z.object({
+    name: z.string().min(1, t('organization.settings.validation.nameRequired')),
+    slug: z
+      .string()
+      .min(1, t('organization.settings.validation.slugRequired'))
+      .transform((value) => normalizeSlug(value))
+      .refine((value) => /^[a-z0-9-]+$/.test(value), {
+        message: t('organization.settings.validation.slugInvalid')
+      }),
+    logo: z.string().url(t('organization.settings.validation.logoInvalid')).optional().or(z.literal(''))
+  })
+)
+
+const userStore = useUserStore()
+
+const loadOrganization = async () => {
+  try {
+    loading.value = true
+    const { data: member } = await authClient.organization.getActiveMember()
+    const { data: roleData } = await authClient.organization.getActiveMemberRole()
+    memberRole.value = roleData?.role ?? null
+    if (member?.organizationId) {
+      // Fetch organization details using organizationId
+      const organization = await $fetch<Organization>(`/api/organizations/${member.organizationId}`)
+      if (organization) {
+        formState.id = organization.id
+        formState.name = organization.name
+        formState.slug = organization.slug
+        formState.logo = organization.logo || ''
+        originalSlug.value = organization.slug
+        slugStatus.value = 'idle'
+        slugMessage.value = ''
+        selectedFile.value = null
+      }
+    }
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || t('organization.settings.errors.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+await loadOrganization()
+
+const isOwner = computed(() => memberRole.value === 'owner')
+const slugChanged = computed(() => normalizeSlug(formState.slug) !== normalizeSlug(originalSlug.value))
+
+const checkSlugAvailability = async (slug: string, { updateStatus = true } = {}) => {
+  if (!slug.trim() || !slugChanged.value) {
+    if (updateStatus) {
+      slugStatus.value = 'idle'
+      slugMessage.value = ''
+    }
+    return true
+  }
+
+  if (updateStatus) {
+    slugStatus.value = 'checking'
+    slugMessage.value = ''
+  }
+
+  try {
+    const { data } = await authClient.organization.checkSlug({ slug })
+    const available = data?.status || false
+    if (updateStatus) {
+      slugStatus.value = available ? 'available' : 'unavailable'
+      slugMessage.value = available
+        ? t('organization.settings.slugAvailable')
+        : t('organization.settings.slugUnavailable')
+    }
+    return available
+  } catch {
+    if (updateStatus) {
+      slugStatus.value = 'error'
+      slugMessage.value = t('organization.settings.slugError')
+    }
+    return false
+  }
+}
+
+const debouncedSlugCheck = useDebounceFn((slug: string) => {
+  void checkSlugAvailability(slug)
+}, 400)
+
+watch(
+  () => formState.slug,
+  (newSlug) => {
+    const normalized = normalizeSlug(newSlug)
+    if (normalized !== newSlug) {
+      formState.slug = normalized
+      return
+    }
+    if (!slugChanged.value) {
+      slugStatus.value = 'idle'
+      slugMessage.value = ''
+      return
+    }
+
+    debouncedSlugCheck(newSlug)
+  }
+)
+
+const updateOrganization = async (event: FormSubmitEvent<z.output<typeof formSchema.value>>) => {
+  try {
+    if (!isOwner.value) {
+      error.value = t('organization.settings.ownerOnly')
+      return
+    }
+
+    updating.value = true
+    error.value = ''
+
+    if (slugChanged.value) {
+      const available = await checkSlugAvailability(event.data.slug, { updateStatus: false })
+      if (!available) {
+        error.value = t('organization.settings.errors.slugTaken')
+        return
+      }
+    }
+
+    let logoUrl = event.data.logo ?? ''
+    if (selectedFile.value) {
+      const reader = new FileReader()
+      logoUrl = await new Promise<string>((resolve, reject) => {
+        reader.onload = () => resolve(reader.result as string)
+        reader.onerror = reject
+        reader.readAsDataURL(selectedFile.value!)
+      })
+    }
+
+    await authClient.organization.update({
+      organizationId: formState.id,
+      data: {
+        name: event.data.name,
+        slug: event.data.slug,
+        logo: logoUrl
+      }
+    })
+    // Show success message
+    error.value = ''
+    originalSlug.value = event.data.slug
+    slugStatus.value = 'idle'
+    slugMessage.value = ''
+    selectedFile.value = null
+    await userStore.refreshOrganizations()
+    emit('updated')
+  } catch (err) {
+    const apiError = err as ApiError
+    error.value = apiError.message || t('organization.settings.errors.updateFailed')
+  } finally {
+    updating.value = false
+  }
+}
+
+function onLogoFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  if (!input.files?.length) {
+    return
+  }
+
+  const file = input.files[0]!
+
+  if (formState.logo && formState.logo.startsWith('blob:')) {
+    URL.revokeObjectURL(formState.logo)
+  }
+
+  selectedFile.value = file
+  formState.logo = URL.createObjectURL(file)
+}
+
+function onLogoFileClick() {
+  fileRef.value?.click()
+}
+
+onUnmounted(() => {
+  if (formState.logo && formState.logo.startsWith('blob:')) {
+    URL.revokeObjectURL(formState.logo)
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div v-if="loading" class="text-center py-8">
+      <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin mx-auto" />
+      <p class="text-gray-600 dark:text-gray-400 mt-2">{{ t('common.loading') }}</p>
+    </div>
+
+    <UAlert v-else-if="error" color="error" :title="error" variant="outline" />
+
+    <UForm v-else class="space-y-4" :state="formState" :schema="formSchema" @submit="updateOrganization">
+      <UAlert v-if="!isOwner" color="warning" :title="t('organization.settings.ownerOnly')" variant="outline" />
+      <UFormField name="name" :label="t('organization.settings.nameLabel')" required>
+        <UInput
+          v-model="formState.name"
+          type="text"
+          :placeholder="t('organization.settings.namePlaceholder')"
+          required
+          :disabled="!isOwner"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField name="slug" :label="t('organization.settings.slugLabel')" required>
+        <UInput
+          v-model="formState.slug"
+          type="text"
+          :placeholder="t('organization.settings.slugPlaceholder')"
+          required
+          :disabled="!isOwner"
+          class="w-full"
+        />
+        <template #hint>
+          <div class="flex flex-col gap-1">
+            <span>{{ t('organization.settings.slugHint') }}</span>
+            <span v-if="slugStatus === 'checking'" class="text-sm text-gray-500">{{
+              t('organization.settings.slugChecking')
+            }}</span>
+            <span v-else-if="slugStatus === 'available'" class="text-sm text-green-600">{{ slugMessage }}</span>
+            <span v-else-if="slugStatus === 'unavailable'" class="text-sm text-red-600">{{ slugMessage }}</span>
+            <span v-else-if="slugStatus === 'error'" class="text-sm text-red-600">{{ slugMessage }}</span>
+          </div>
+        </template>
+      </UFormField>
+
+      <UFormField name="logo" :label="t('organization.settings.logoLabel')">
+        <div class="flex flex-col gap-3">
+          <div class="flex flex-wrap items-center gap-3">
+            <div
+              class="flex items-center justify-center w-28 h-16 rounded-md ring-2 ring-gray-200 dark:ring-gray-700 bg-gray-50 dark:bg-gray-900 overflow-hidden"
+            >
+              <img
+                v-if="formState.logo"
+                :src="formState.logo"
+                :alt="formState.name || 'Organization'"
+                class="w-full h-full object-contain"
+              />
+              <span v-else class="text-sm font-semibold text-gray-500">
+                {{ formState.name ? formState.name.charAt(0).toUpperCase() : 'O' }}
+              </span>
+            </div>
+            <UButton
+              :label="t('organization.settings.logoChoose')"
+              color="primary"
+              variant="outline"
+              :disabled="!isOwner"
+              @click="onLogoFileClick"
+            />
+            <input
+              ref="fileRef"
+              type="file"
+              class="hidden"
+              accept=".jpg, .jpeg, .png, .gif"
+              @change="onLogoFileChange"
+            />
+          </div>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ t('organization.settings.logoHint') }}
+          </p>
+        </div>
+      </UFormField>
+      <!-- Form Actions -->
+      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <UButton type="button" variant="ghost" color="neutral" @click="emit('canceled')">
+          {{ $t('common.cancel') }}
+        </UButton>
+        <UButton
+          type="submit"
+          :loading="updating"
+          :disabled="updating || !isOwner || (slugChanged && slugStatus !== 'available')"
+        >
+          {{ $t('common.save') }}
+        </UButton>
+      </div>
+    </UForm>
+  </div>
+</template>

package/app/components/OrganizationSwitcher.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+import type { SelectItem } from '@nuxt/ui'
+
+interface Props {
+  /** Whether to show in compact/header mode without card wrapper */
+  compact?: boolean
+  /** Whether to show the create button */
+  showCreateButton?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  compact: false,
+  showCreateButton: true
+})
+
+const emit = defineEmits<{
+  switched: []
+}>()
+
+const toast = useToast()
+const { t } = useI18n()
+const userStore = useUserStore()
+const { activeOrganizationId } = storeToRefs(userStore)
+const selectedOrg = ref('')
+const error = ref('')
+const organizations = authClient.useListOrganizations()
+
+// Sync selectedOrg with activeOrganizationId from store
+watch(
+  activeOrganizationId,
+  (newOrgId) => {
+    if (newOrgId && newOrgId !== selectedOrg.value) {
+      selectedOrg.value = newOrgId
+    }
+  },
+  { immediate: true }
+)
+
+// Also watch for when organizations load and set initial value
+watch(
+  () => organizations.value.data,
+  (orgs) => {
+    if (orgs && activeOrganizationId.value && !selectedOrg.value) {
+      selectedOrg.value = activeOrganizationId.value
+    }
+  },
+  { immediate: true }
+)
+
+// Check if user has any organizations
+const hasOrgs = computed(() => {
+  return organizations.value.data && organizations.value.data.length > 0
+})
+
+const selectItems = computed<SelectItem[]>(() => {
+  if (!organizations.value.data) {
+    return []
+  }
+  return organizations.value.data.map((org) => ({
+    label: org.name,
+    value: org.id
+  }))
+})
+
+const switchOrganization = async (value: unknown) => {
+  if (!value || typeof value !== 'string') {
+    return
+  }
+
+  try {
+    // Update the store's activeOrganizationId (this also calls authClient.organization.setActive)
+    await userStore.setActiveOrganizationId(value)
+    emit('switched')
+    navigateTo('/dashboard')
+  } catch (err: unknown) {
+    const errorMessage = err instanceof Error ? err.message : 'Failed to switch organization'
+    error.value = errorMessage
+    toast.add({
+      title: t('common.error'),
+      description: errorMessage,
+      color: 'error'
+    })
+  }
+}
+
+const createNewOrg = () => {
+  // Navigate to organization creation page or show modal
+  navigateTo('/organizations/create')
+}
+</script>
+
+<template>
+  <div :class="compact ? '' : 'organization-switcher-wrapper'">
+    <!-- Full version (for modal or standalone use) -->
+    <div v-if="!compact">
+      <div v-if="organizations.isPending || organizations.isRefetching" class="space-y-2">
+        <USkeleton class="h-10 w-full" />
+        <USkeleton v-if="showCreateButton" class="h-10 w-full" />
+      </div>
+      <div v-else-if="organizations.error" class="space-y-4">
+        <UAlert
+          color="error"
+          :title="t('common.error')"
+          :description="organizations.error?.message || 'Failed to load organizations'"
+          icon="i-lucide-alert-circle"
+          variant="outline"
+        />
+      </div>
+      <div v-else class="flex flex-col gap-4">
+        <UFormField label="Select Organization" name="organization">
+          <USelect
+            id="org-select"
+            v-model="selectedOrg"
+            :items="selectItems"
+            placeholder="Select Organization"
+            value-key="value"
+            class="w-full"
+            @update:model-value="switchOrganization"
+          />
+        </UFormField>
+        <UButton
+          v-if="showCreateButton"
+          color="primary"
+          variant="solid"
+          block
+          icon="i-lucide-plus"
+          @click="createNewOrg"
+        >
+          Create New Organization
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Compact version for header -->
+    <div v-else>
+      <div v-if="organizations.isPending || organizations.isRefetching">
+        <USkeleton class="h-9 w-48" />
+      </div>
+      <div v-else-if="organizations.error" class="hidden">
+        <!-- Silently fail in compact mode -->
+      </div>
+      <div v-else-if="hasOrgs" class="flex items-center gap-2">
+        <USelect
+          id="org-select-header"
+          v-model="selectedOrg"
+          :items="selectItems"
+          placeholder="Organization"
+          value-key="value"
+          size="sm"
+          class="min-w-[160px]"
+          @update:model-value="switchOrganization"
+        />
+        <UButton
+          v-if="showCreateButton"
+          color="primary"
+          variant="ghost"
+          size="sm"
+          icon="i-lucide-plus"
+          :ui="{ base: 'p-1.5' }"
+          @click="createNewOrg"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/organization/DetailsCard.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { Organization } from '@nuxt-customer-portal/core/shared/types/index'
+
+const props = withDefaults(
+  defineProps<{
+    canEdit?: boolean
+    editing?: boolean
+    organization: Organization
+    role?: string | null
+  }>(),
+  {
+    canEdit: false,
+    editing: false,
+    role: null
+  }
+)
+
+const emit = defineEmits(['edit'])
+const { t } = useI18n()
+const officialCompanyName = computed(() => {
+  if (!props.organization.metadata) {
+    return props.organization.name
+  }
+  try {
+    const metadata = JSON.parse(props.organization.metadata) as Record<string, unknown>
+    return typeof metadata.officialCompanyName === 'string' ? metadata.officialCompanyName : props.organization.name
+  } catch {
+    return props.organization.name
+  }
+})
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between gap-4">
+        <h2 class="text-xl font-semibold">{{ t('organization.details.title') }}</h2>
+        <UButton
+          v-if="canEdit && !editing"
+          icon="i-lucide-pencil"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          :aria-label="t('organization.settings.editButton')"
+          @click="emit('edit')"
+        />
+      </div>
+    </template>
+    <slot v-if="editing" name="edit" />
+    <div v-else class="space-y-2">
+      <img
+        v-if="organization.logo"
+        :src="organization.logo"
+        :alt="officialCompanyName"
+        class="mb-4 max-h-20 max-w-56 object-contain object-left"
+      />
+      <div>
+        <span class="text-sm text-muted">{{ t('organization.details.name') }}</span>
+        <div class="flex items-center gap-2">
+          <p class="font-semibold">{{ organization.name }}</p>
+          <UBadge
+            v-if="role"
+            :color="role === 'owner' ? 'primary' : role === 'admin' ? 'info' : 'neutral'"
+            variant="soft"
+          >
+            {{ role.charAt(0).toUpperCase() + role.slice(1) }}
+          </UBadge>
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted">{{ t('organization.details.slug') }}</span>
+        <p class="font-mono text-sm">{{ organization.slug }}</p>
+      </div>
+      <div>
+        <span class="text-sm text-muted">{{ t('organization.settings.officialCompanyNameLabel') }}</span>
+        <p>{{ officialCompanyName }}</p>
+      </div>
+      <div>
+        <span class="text-sm text-muted">{{ t('organization.details.created') }}</span>
+        <p>{{ new Date(organization.createdAt).toLocaleDateString() }}</p>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/organization/InvitationsCard.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type {
+  ApiError,
+  Invitation,
+  OrganizationInvitationsResponse
+} from '@nuxt-customer-portal/core/shared/types/index'
+
+const props = withDefaults(
+  defineProps<{
+    organizationId: string
+    invitations: OrganizationInvitationsResponse
+    loading?: boolean
+    canManage?: boolean
+  }>(),
+  {
+    loading: false,
+    canManage: false
+  }
+)
+
+const emit = defineEmits<{ refresh: [] }>()
+const { t, locale } = useI18n()
+const toast = useToast()
+const showInviteModal = ref(false)
+const busyInvitationId = ref<string | null>(null)
+
+const resend = async (invitation: Invitation) => {
+  try {
+    busyInvitationId.value = invitation.id
+    await $fetch(`/api/organizations/${props.organizationId}/invitations/${invitation.id}/resend`, { method: 'POST' })
+    toast.add({
+      title: t('common.success'),
+      description: t('organization.members.invitations.resendSuccess'),
+      color: 'success'
+    })
+    emit('refresh')
+  } catch (error) {
+    const apiError = error as ApiError
+    toast.add({
+      title: t('common.error'),
+      description: apiError.message || t('organization.members.errors.resendFailed'),
+      color: 'error'
+    })
+  } finally {
+    busyInvitationId.value = null
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <h2 class="text-xl font-semibold">
+          {{ t('organization.members.invitations.title') }} ({{ invitations.length }})
+        </h2>
+        <UButton v-if="canManage" icon="i-lucide-user-plus" variant="outline" @click="showInviteModal = true">
+          {{ t('organization.members.invitations.inviteButton') }}
+        </UButton>
+      </div>
+    </template>
+
+    <div v-if="loading" class="py-8 text-center text-muted">{{ t('organization.members.loading') }}</div>
+    <div v-else-if="invitations.length === 0" class="py-8 text-center text-muted">
+      {{ t('organization.members.invitations.empty') }}
+    </div>
+    <div v-else class="divide-y divide-default">
+      <div
+        v-for="invitation in invitations"
+        :key="invitation.id"
+        class="flex flex-wrap items-center justify-between gap-3 py-4 first:pt-0 last:pb-0"
+      >
+        <div>
+          <p class="font-medium">{{ invitation.email }}</p>
+          <p class="text-sm text-muted">
+            {{ t('organization.members.invitations.expires') }}:
+            {{ new Date(invitation.expiresAt).toLocaleDateString(locale) }}
+          </p>
+        </div>
+        <div class="flex items-center gap-2">
+          <UBadge color="warning" variant="soft">{{ invitation.role || 'member' }}</UBadge>
+          <template v-if="canManage">
+            <UButton
+              icon="i-lucide-send"
+              variant="ghost"
+              size="sm"
+              :loading="busyInvitationId === invitation.id"
+              :aria-label="t('organization.members.invitations.resend')"
+              @click="resend(invitation)"
+            />
+            <InvitationActions
+              v-if="invitation.status === 'pending'"
+              :endpoint="`/api/organizations/${organizationId}/invitations/${invitation.id}`"
+              :email="invitation.email"
+              :role="invitation.role ?? null"
+              can-edit
+              can-revoke
+              @refresh="emit('refresh')"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <OrganizationInviteMemberModal
+      v-if="showInviteModal"
+      v-model:open="showInviteModal"
+      :organization-id="organizationId"
+      @success="emit('refresh')"
+    />
+  </UCard>
+</template>