@antelopejs/dms-saas 0.0.1

package/frontend-vue/app/components/TenantSupport.vue

@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { sendSupportRequest } from "../composables/useSupportRequest";
+import SupportAttachmentUpload from "./SupportAttachmentUpload.vue";
+import SupportThreadHistory from "./SupportThreadHistory.vue";
+
+const { $authFetch } = useAuthFetch();
+const { t } = useI18n();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+
+const tickets = ref<SupportTicketView[]>([]);
+const selected = ref<SupportThreadView | null>(null);
+const config = ref<SupportConfigView | null>(null);
+const isLoading = ref(true);
+const isSubmitting = ref(false);
+const isReplyUploading = ref(false);
+const isDraftUploading = ref(false);
+const isCreateOpen = ref(false);
+const replyBody = ref("");
+const replyAttachments = ref<string[]>([]);
+const PAGE_SIZE = 20;
+const listPage = ref(1);
+const messagesPage = ref(1);
+const eventsPage = ref(1);
+const ticketTotal = ref(0);
+let selectionRequest = 0;
+let messagesRequest = 0;
+let eventsRequest = 0;
+let listRequest = 0;
+
+const draft = reactive<SupportTicketDraft>({
+  subject: "",
+  category: "question",
+  priority: "normal",
+  body: "",
+  attachments: [],
+});
+
+const categoryItems = [
+  "question",
+  "incident",
+  "billing",
+  "feature_request",
+].map((value) => ({ value, label: t(`saas.support.category.${value}`) }));
+const priorityItems = computed(() =>
+  (config.value?.policy.priorities ?? []).map((value) => ({
+    value,
+    label: t(`saas.support.priority.${value}`),
+  })),
+);
+const attachmentConstraints = computed(() => ({
+  maxSize: config.value?.maxAttachmentSize,
+  allowedMimetypes: config.value?.allowedMimetypes,
+}));
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function resetDraft(): void {
+  draft.subject = "";
+  draft.category = "question";
+  draft.priority = config.value?.policy.priorities[0] ?? "normal";
+  draft.body = "";
+  draft.attachments = [];
+}
+
+function pageQuery(page: number, sortKey: string): string {
+  return new URLSearchParams({
+    offset: String((page - 1) * PAGE_SIZE),
+    limit: String(PAGE_SIZE),
+    sortKey,
+    sortDirection: "desc",
+  }).toString();
+}
+
+async function load(): Promise<void> {
+  const request = ++listRequest;
+  isLoading.value = true;
+  try {
+    const [loadedConfig, loadedTickets] = await Promise.all([
+      $authFetch<SupportConfigView>("/api/saas/support/config"),
+      $authFetch<SupportPageView<SupportTicketView>>(
+        `/api/saas/tenant/tables/support-tickets/list?${pageQuery(listPage.value, "lastMessageAt")}`,
+      ),
+    ]);
+    if (request !== listRequest) return;
+    config.value = loadedConfig;
+    tickets.value = loadedTickets.results;
+    ticketTotal.value = loadedTickets.total;
+    if (!loadedConfig.policy.priorities.includes(draft.priority)) resetDraft();
+  } catch (error) {
+    showError(error, "saas.support.error.load");
+  } finally {
+    if (request === listRequest) isLoading.value = false;
+  }
+}
+
+async function selectTicket(ticketId: string): Promise<void> {
+  messagesPage.value = 1;
+  eventsPage.value = 1;
+  const request = ++selectionRequest;
+  const messageRequest = ++messagesRequest;
+  const eventRequest = ++eventsRequest;
+  const baseUrl = `/api/saas/support/${ticketId}`;
+  try {
+    const [detail, messages, events] = await Promise.all([
+      $authFetch<SupportTicketDetailView>(baseUrl),
+      $authFetch<SupportPageView<SupportMessageView>>(
+        `${baseUrl}/messages/list?${pageQuery(messagesPage.value, "createdAt")}`,
+      ),
+      $authFetch<SupportPageView<SupportTicketEventView>>(
+        `${baseUrl}/events/list?${pageQuery(eventsPage.value, "createdAt")}`,
+      ),
+    ]);
+    if (
+      request === selectionRequest &&
+      messageRequest === messagesRequest &&
+      eventRequest === eventsRequest
+    ) {
+      selected.value = { ticket: detail.ticket, messages, events };
+    }
+  } catch (error) {
+    showError(error, "saas.support.error.load");
+  }
+}
+
+async function createTicket(): Promise<void> {
+  if (!draft.subject.trim() || !draft.body.trim()) return;
+  isSubmitting.value = true;
+  try {
+    const ticket = await sendSupportRequest(
+      `${config.value?.uploadPath}:create`,
+      draft,
+      (body) =>
+        $authFetch<SupportTicketView>("/api/saas/support", {
+          method: "POST",
+          body,
+        }),
+    );
+    isCreateOpen.value = false;
+    resetDraft();
+    listPage.value = 1;
+    await load();
+    await selectTicket(ticket._id);
+    toast.add({
+      title: t("saas.support.tenant.created"),
+      color: "success",
+    });
+  } catch (error) {
+    showError(error, "saas.support.error.create");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+async function sendReply(): Promise<void> {
+  if (!selected.value || !replyBody.value.trim()) return;
+  const ticketId = selected.value.ticket._id;
+  isSubmitting.value = true;
+  try {
+    await sendSupportRequest(
+      `${config.value?.uploadPath}:${ticketId}:reply`,
+      { body: replyBody.value, attachments: replyAttachments.value },
+      (body) =>
+        $authFetch(`/api/saas/support/${ticketId}/messages`, {
+          method: "POST",
+          body,
+        }),
+    );
+    replyBody.value = "";
+    replyAttachments.value = [];
+    if (selected.value?.ticket._id === ticketId) await selectTicket(ticketId);
+    await load();
+  } catch (error) {
+    showError(error, "saas.support.error.reply");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+async function openAttachment(
+  ticketId: string,
+  resourceKey: string,
+): Promise<void> {
+  try {
+    const query = new URLSearchParams({ resourceKey });
+    const file = await $authFetch<SupportAttachmentView>(
+      `/api/saas/support/${ticketId}/attachment?${query}`,
+    );
+    window.open(file.url, "_blank", "noopener,noreferrer");
+  } catch (error) {
+    showError(error, "saas.support.error.attachment");
+  }
+}
+
+function showError(error: unknown, fallback: string): void {
+  toast.add({
+    title: resolveApiError(error, fallback),
+    color: "error",
+    icon: "i-ph-warning-circle",
+  });
+}
+
+onMounted(load);
+
+function changeListPage(page: number): void {
+  listPage.value = page;
+  void load();
+}
+
+function changeThreadPage(kind: "messages" | "events", page: number): void {
+  if (!selected.value) return;
+  const pages = { messages: messagesPage, events: eventsPage };
+  pages[kind].value = page;
+  void loadThreadPage(kind, selected.value.ticket._id);
+}
+
+async function loadThreadPage(
+  kind: "messages" | "events",
+  ticketId: string,
+): Promise<void> {
+  const requests = { messages: messagesRequest, events: eventsRequest };
+  const request = ++requests[kind];
+  if (kind === "messages") messagesRequest = request;
+  else eventsRequest = request;
+  try {
+    const page = await $authFetch<
+      SupportPageView<SupportMessageView | SupportTicketEventView>
+    >(
+      `/api/saas/support/${ticketId}/${kind}/list?${pageQuery(kind === "messages" ? messagesPage.value : eventsPage.value, "createdAt")}`,
+    );
+    const currentRequest =
+      kind === "messages" ? messagesRequest : eventsRequest;
+    if (request !== currentRequest || selected.value?.ticket._id !== ticketId)
+      return;
+    if (kind === "messages") {
+      selected.value.messages = page as SupportPageView<SupportMessageView>;
+    } else {
+      selected.value.events = page as SupportPageView<SupportTicketEventView>;
+    }
+  } catch (error) {
+    showError(error, "saas.support.error.load");
+  }
+}
+</script>
+
+<template>
+  <div class="grid gap-6 xl:grid-cols-[22rem_1fr]">
+    <div class="flex flex-col gap-4">
+      <UAlert
+        v-if="config"
+        color="primary"
+        variant="subtle"
+        icon="i-ph-clock-countdown"
+        :title="$t(`saas.support.sla.${config.policy.level}.title`)"
+        :description="$t(`saas.support.sla.${config.policy.level}.description`)"
+      />
+      <UButton icon="i-ph-plus" block @click="isCreateOpen = true">
+        {{ $t("saas.support.tenant.new") }}
+      </UButton>
+      <USkeleton v-if="isLoading" class="h-32" />
+      <UCard v-else-if="!tickets.length">
+        <p class="text-muted text-center text-sm">
+          {{ $t("saas.support.tenant.empty") }}
+        </p>
+      </UCard>
+      <template v-else>
+        <button
+          v-for="ticket in tickets"
+          :key="ticket._id"
+          class="border-default hover:bg-elevated rounded-lg border p-4 text-left"
+          :class="{
+            'ring-primary ring-2': selected?.ticket._id === ticket._id,
+          }"
+          @click="selectTicket(ticket._id)"
+        >
+          <div class="flex items-start justify-between gap-2">
+            <p class="font-medium">{{ ticket.subject }}</p>
+            <UBadge size="sm" variant="subtle">
+              {{ $t(`saas.support.status.${ticket.status}`) }}
+            </UBadge>
+          </div>
+          <p class="text-muted mt-2 text-xs">
+            {{ formatDate(ticket.lastMessageAt) }}
+          </p>
+        </button>
+        <UPagination
+          v-if="ticketTotal > PAGE_SIZE"
+          :page="listPage"
+          :total="ticketTotal"
+          :items-per-page="PAGE_SIZE"
+          size="sm"
+          class="self-center"
+          @update:page="changeListPage"
+        />
+      </template>
+    </div>
+
+    <UCard v-if="selected">
+      <template #header>
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold">
+              {{ selected.ticket.subject }}
+            </h2>
+            <p class="text-muted text-sm">
+              {{ $t(`saas.support.category.${selected.ticket.category}`) }}
+              ·
+              {{ $t(`saas.support.priority.${selected.ticket.priority}`) }}
+            </p>
+          </div>
+          <UBadge>
+            {{ $t(`saas.support.status.${selected.ticket.status}`) }}
+          </UBadge>
+        </div>
+      </template>
+      <div class="flex flex-col gap-4">
+        <SupportThreadHistory
+          :messages="selected.messages"
+          :events="selected.events"
+          @attachment="openAttachment(selected.ticket._id, $event)"
+          @messages-page="changeThreadPage('messages', $event)"
+          @events-page="changeThreadPage('events', $event)"
+        />
+        <USeparator />
+        <UTextarea
+          v-model="replyBody"
+          :placeholder="$t('saas.support.reply_placeholder')"
+          :rows="4"
+          class="w-full"
+        />
+        <SupportAttachmentUpload
+          v-if="config"
+          v-model="replyAttachments"
+          multiple
+          :constraints="attachmentConstraints"
+          :disabled="isSubmitting"
+          @busy="isReplyUploading = $event"
+        />
+        <div class="flex justify-end">
+          <UButton
+            :loading="isSubmitting"
+            :disabled="isReplyUploading"
+            @click="sendReply"
+          >
+            {{ $t("saas.support.send") }}
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+    <UCard v-else class="min-h-64">
+      <div class="text-muted flex h-full items-center justify-center text-sm">
+        {{ $t("saas.support.tenant.select") }}
+      </div>
+    </UCard>
+  </div>
+
+  <UModal v-model:open="isCreateOpen" :title="$t('saas.support.tenant.new')">
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <UFormField :label="$t('saas.support.subject')" required>
+          <UInput v-model="draft.subject" class="w-full" />
+        </UFormField>
+        <div class="grid gap-4 sm:grid-cols-2">
+          <UFormField :label="$t('saas.support.category.label')" required>
+            <USelect
+              v-model="draft.category"
+              :items="categoryItems"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField :label="$t('saas.support.priority.label')" required>
+            <USelect
+              v-model="draft.priority"
+              :items="priorityItems"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+        <UFormField :label="$t('saas.support.message')" required>
+          <UTextarea v-model="draft.body" :rows="5" class="w-full" />
+        </UFormField>
+        <UFormField :label="$t('saas.support.attachments')">
+          <SupportAttachmentUpload
+            v-if="config"
+            v-model="draft.attachments"
+            multiple
+            :constraints="attachmentConstraints"
+            :disabled="isSubmitting"
+            @busy="isDraftUploading = $event"
+          />
+        </UFormField>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="isCreateOpen = false">
+          {{ $t("common.cancel") }}
+        </UButton>
+        <UButton
+          :loading="isSubmitting"
+          :disabled="isDraftUploading"
+          @click="createTicket"
+        >
+          {{ $t("saas.support.tenant.create") }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/frontend-vue/app/components/UserSummaryCard.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+interface MatchedSegment {
+  _id: string;
+  name: string;
+}
+
+interface UserSummaryData {
+  _id: string;
+  email: string;
+  name: string;
+  owner: boolean;
+  createdAt: string;
+  language: string | null;
+  isValidated: boolean;
+  hasTwoFactor: boolean;
+  lastActiveAt: string | null;
+  segments: MatchedSegment[];
+  workspaces: Array<{ isTenantOwner: boolean }>;
+}
+
+const props = defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+
+const { $authFetch } = useAuthFetch();
+const { t } = useI18n();
+
+const userId = computed(() => props.routeParams?.id ?? "");
+const user = ref<UserSummaryData | null>(null);
+const isLoading = ref(true);
+
+const initials = computed(() => {
+  if (!user.value?.name) return "?";
+  return user.value.name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+});
+
+const ownedCount = computed(
+  () => user.value?.workspaces.filter((w) => w.isTenantOwner).length ?? 0,
+);
+const memberCount = computed(
+  () => user.value?.workspaces.filter((w) => !w.isTenantOwner).length ?? 0,
+);
+
+function formatDate(value: string | null): string {
+  if (!value) return "—";
+  return new Date(value).toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+async function load(): Promise<void> {
+  if (!userId.value) return;
+  isLoading.value = true;
+  try {
+    user.value = await $authFetch<UserSummaryData>(
+      `/api/saas/users/${userId.value}`,
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <DmsCard>
+    <div v-if="isLoading" class="flex justify-center py-6">
+      <UIcon name="i-ph-spinner" class="animate-spin text-2xl" />
+    </div>
+    <div v-else-if="user" class="flex flex-col gap-5">
+      <div class="flex items-start gap-4">
+        <UAvatar
+          :alt="user.name"
+          :text="initials"
+          size="xl"
+          class="bg-primary/15 text-primary"
+        />
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-wrap items-center gap-2">
+            <h2 class="text-xl font-semibold truncate">{{ user.name }}</h2>
+            <UBadge v-if="user.owner" color="primary" variant="subtle">
+              {{ $t("saas.users.platform_owner_badge") }}
+            </UBadge>
+            <UBadge
+              :color="user.isValidated ? 'success' : 'warning'"
+              variant="subtle"
+            >
+              {{
+                user.isValidated
+                  ? $t("saas.users.info.email_verified")
+                  : $t("saas.users.info.email_not_verified")
+              }}
+            </UBadge>
+          </div>
+          <div class="mt-1 flex items-center gap-2 text-sm text-muted">
+            <UIcon name="i-ph-envelope" />
+            <span class="truncate">{{ user.email }}</span>
+          </div>
+        </div>
+      </div>
+
+      <USeparator />
+
+      <dl class="grid grid-cols-2 gap-3 text-sm lg:grid-cols-4">
+        <div>
+          <dt class="text-muted">{{ $t("saas.users.column.created_at") }}</dt>
+          <dd class="mt-0.5">{{ formatDate(user.createdAt) }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted">{{ $t("saas.users.info.last_active") }}</dt>
+          <dd class="mt-0.5">{{ formatDate(user.lastActiveAt) }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted">{{ $t("saas.users.info.language") }}</dt>
+          <dd class="mt-0.5 uppercase">{{ user.language ?? "—" }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted">{{ $t("saas.users.info.two_factor") }}</dt>
+          <dd class="mt-0.5">
+            {{ user.hasTwoFactor ? t("saas.common.yes") : t("saas.common.no") }}
+          </dd>
+        </div>
+        <div>
+          <dt class="text-muted">
+            {{ $t("saas.users.workspaces_section") }}
+          </dt>
+          <dd class="mt-0.5">
+            {{
+              $t("saas.users.summary.workspaces", {
+                count: user.workspaces.length,
+                owned: ownedCount,
+                member: memberCount,
+              })
+            }}
+          </dd>
+        </div>
+        <div class="col-span-2 lg:col-span-3">
+          <dt class="text-muted">{{ $t("saas.users.info.segments") }}</dt>
+          <dd class="mt-0.5">
+            <div v-if="user.segments.length" class="flex flex-wrap gap-1">
+              <UBadge
+                v-for="segment in user.segments"
+                :key="segment._id"
+                color="neutral"
+                variant="soft"
+              >
+                {{ segment.name }}
+              </UBadge>
+            </div>
+            <span v-else>—</span>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </DmsCard>
+</template>

package/frontend-vue/app/components/WorkspaceBillingInfo.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+const { $authFetch } = useAuthFetch();
+
+interface BillingInfo {
+  customerType: string | null;
+  companyName: string | null;
+  vatNumber: string | null;
+}
+
+interface WorkspaceBillingInfoResponse {
+  billingInfo: BillingInfo | null;
+}
+
+const props = defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { triggerRef } = useDetailRefresh(tenantId.value);
+const billing = ref<BillingInfo | null>(null);
+const isLoading = ref(true);
+
+async function load(): Promise<void> {
+  if (!tenantId.value) return;
+  isLoading.value = true;
+  try {
+    const detail = await $authFetch<WorkspaceBillingInfoResponse>(
+      `/api/saas/workspaces/${tenantId.value}`,
+    );
+    billing.value = detail.billingInfo;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+onMounted(load);
+watch(triggerRef, () => {
+  void load();
+});
+</script>
+
+<template>
+  <DmsCard v-if="!isLoading && billing">
+    <div
+      class="-mx-5 sm:-mx-6 -mt-5 sm:-mt-6 mb-5 sm:mb-6 border-b border-default px-5 sm:px-6 py-4"
+    >
+      <h3 class="font-semibold">
+        {{ $t("saas.workspaces.billing_section") }}
+      </h3>
+    </div>
+    <dl class="grid grid-cols-2 gap-3 text-sm">
+      <dt class="text-muted">
+        {{ $t("saas.workspaces.column.customer_type") }}
+      </dt>
+      <dd>{{ billing.customerType ?? "—" }}</dd>
+      <dt class="text-muted">
+        {{ $t("saas.workspaces.column.company_name") }}
+      </dt>
+      <dd>{{ billing.companyName ?? "—" }}</dd>
+      <dt class="text-muted">
+        {{ $t("saas.workspaces.column.vat_number") }}
+      </dt>
+      <dd>{{ billing.vatNumber ?? "—" }}</dd>
+    </dl>
+  </DmsCard>
+</template>