@antelopejs/dms-saas 0.0.1

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+const { t } = useI18n();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const { workspace, load, rename } = useCurrentWorkspace();
+
+const name = ref("");
+const isLoading = ref(true);
+const isSaving = ref(false);
+const loadError = ref<string | null>(null);
+
+const savedName = computed(() => workspace.value?.name ?? "");
+const isDirty = computed(() => name.value.trim() !== savedName.value);
+const canSave = computed(() => isDirty.value && !!name.value.trim());
+
+watch(savedName, (value) => {
+  name.value = value;
+});
+
+async function initialize(): Promise<void> {
+  try {
+    await load();
+    name.value = savedName.value;
+    loadError.value = null;
+  } catch (error) {
+    loadError.value = resolveApiError(
+      error,
+      "saas.workspace.general.error.load",
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function reset(): void {
+  name.value = savedName.value;
+}
+
+async function save(): Promise<void> {
+  if (!canSave.value || isSaving.value) return;
+  isSaving.value = true;
+  try {
+    await rename(name.value.trim());
+    toast.add({
+      title: t("saas.workspace.general.renamed"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspace.general.error.rename"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isSaving.value = false;
+  }
+}
+
+onMounted(initialize);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="text-muted text-sm">
+      {{ $t("saas.workspace.general.identity_intro") }}
+    </p>
+    <USkeleton v-if="isLoading" class="h-10 w-full" />
+    <p v-else-if="loadError" class="text-error text-sm">{{ loadError }}</p>
+    <template v-else>
+      <UFormField
+        :label="$t('saas.workspace.general.name')"
+        :description="$t('saas.workspace.general.name_hint')"
+      >
+        <UInput v-model="name" class="w-full" />
+      </UFormField>
+      <div class="flex justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="outline"
+          :disabled="!isDirty || isSaving"
+          @click="reset"
+        >
+          {{ $t("saas.workspace.general.reset") }}
+        </UButton>
+        <UButton
+          color="primary"
+          :disabled="!canSave"
+          :loading="isSaving"
+          @click="save"
+        >
+          {{ $t("saas.workspace.general.save") }}
+        </UButton>
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+const { $authFetch } = useAuthFetch();
+const nuxtApp = useDmsApp();
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+
+const props = defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { trigger } = useDetailRefresh(tenantId.value);
+const isJoining = ref(false);
+
+async function joinAsMember(): Promise<void> {
+  isJoining.value = true;
+  try {
+    await $authFetch(`/api/saas/workspaces/${tenantId.value}/join`, {
+      method: "POST",
+    });
+    toast.add({
+      title: nuxtApp.$i18n.t("saas.workspaces.join.success"),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    trigger();
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.join.error"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isJoining.value = false;
+  }
+}
+</script>
+
+<template>
+  <UButton
+    icon="i-ph-user-plus"
+    color="primary"
+    :loading="isJoining"
+    @click="joinAsMember"
+  >
+    {{ $t("saas.workspaces.join.button") }}
+  </UButton>
+</template>

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

@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+interface Props {
+  routeParams?: Record<string, string>;
+}
+
+interface EligibleUpgradePlan {
+  id: string;
+  name: string;
+  price: number;
+  currency: string;
+  interval: string;
+  maxMembers: number;
+}
+
+interface OperatorOptions {
+  currentPlanId: string | null;
+  currentPlanName: string | null;
+  currency: string | null;
+  customerBalanceCents: number | null;
+  hasStripeCustomer: boolean;
+  hasStripeSubscription: boolean;
+  eligibleUpgradePlans: EligibleUpgradePlan[];
+}
+
+const props = defineProps<Props>();
+const { $authFetch } = useAuthFetch();
+const { t } = useDmsApp().$i18n;
+const toast = useToast();
+const { resolveApiError } = useApiErrorMessage();
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { trigger, triggerRef } = useDetailRefresh(tenantId.value);
+
+const options = ref<OperatorOptions | null>(null);
+const isLoading = ref(true);
+const isSubmitting = ref(false);
+const isUpgradeOpen = ref(false);
+const isCreditOpen = ref(false);
+const selectedPlanId = ref<string | undefined>();
+const creditAmountCents = ref<number | undefined>();
+const creditReason = ref("");
+const upgradeOperationId = ref(crypto.randomUUID());
+const creditOperationId = ref(crypto.randomUUID());
+
+const planItems = computed(() =>
+  (options.value?.eligibleUpgradePlans ?? []).map((plan) => ({
+    value: plan.id,
+    label: `${plan.name} · ${formatPlanPrice(plan)}`,
+  })),
+);
+
+const selectedPlan = computed(() =>
+  options.value?.eligibleUpgradePlans.find(
+    (plan) => plan.id === selectedPlanId.value,
+  ),
+);
+
+const availableCredit = computed(() => {
+  const balance = options.value?.customerBalanceCents;
+  return balance === null || balance === undefined
+    ? null
+    : Math.max(0, -balance);
+});
+
+function formatPlanPrice(plan: EligibleUpgradePlan): string {
+  return `${formatCents(plan.price * 100, plan.currency)}/${t(
+    `saas.plans.cycle.${plan.interval}`,
+  )}`;
+}
+
+function formatCents(amountCents: number, currency?: string | null): string {
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: currency ?? "EUR",
+  }).format(amountCents / 100);
+}
+
+async function loadOptions(): Promise<void> {
+  if (!tenantId.value) return;
+  isLoading.value = true;
+  try {
+    options.value = await $authFetch<OperatorOptions>(
+      `/api/saas/workspaces/${tenantId.value}/operator-options`,
+    );
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.operator.error.load"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function openUpgrade(): void {
+  selectedPlanId.value = options.value?.eligibleUpgradePlans[0]?.id;
+  upgradeOperationId.value = crypto.randomUUID();
+  isUpgradeOpen.value = true;
+}
+
+function openCredit(): void {
+  creditAmountCents.value = undefined;
+  creditReason.value = "";
+  creditOperationId.value = crypto.randomUUID();
+  isCreditOpen.value = true;
+}
+
+async function submitUpgrade(): Promise<void> {
+  if (!selectedPlan.value) return;
+  const succeeded = await submitAction(
+    "upgrade",
+    {
+      operationId: upgradeOperationId.value,
+      planId: selectedPlan.value.id,
+    },
+    "saas.workspaces.operator.upgrade.success",
+  );
+  if (succeeded) isUpgradeOpen.value = false;
+}
+
+async function submitCredit(): Promise<void> {
+  if (!creditAmountCents.value || !creditReason.value.trim()) return;
+  const succeeded = await submitAction(
+    "balance-credit",
+    {
+      operationId: creditOperationId.value,
+      amountCents: creditAmountCents.value,
+      reason: creditReason.value.trim(),
+    },
+    "saas.workspaces.operator.credit.success",
+  );
+  if (succeeded) isCreditOpen.value = false;
+}
+
+async function submitAction(
+  path: string,
+  body: Record<string, unknown>,
+  successKey: string,
+): Promise<boolean> {
+  isSubmitting.value = true;
+  try {
+    await $authFetch(`/api/saas/workspaces/${tenantId.value}/${path}`, {
+      method: "POST",
+      body,
+    });
+    toast.add({
+      title: t(successKey),
+      color: "success",
+      icon: "i-ph-check-circle",
+    });
+    trigger();
+    return true;
+  } catch (error) {
+    toast.add({
+      title: resolveApiError(error, "saas.workspaces.operator.error.action"),
+      color: "error",
+      icon: "i-ph-warning-circle",
+    });
+    trigger();
+    return false;
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+onMounted(loadOptions);
+watch(triggerRef, loadOptions);
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div>
+        <h3 class="font-semibold">
+          {{ $t("saas.workspaces.operator.title") }}
+        </h3>
+        <p class="text-muted mt-1 text-sm">
+          {{ $t("saas.workspaces.operator.description") }}
+        </p>
+      </div>
+    </template>
+
+    <div v-if="isLoading" class="flex justify-center py-5">
+      <UIcon name="i-ph-circle-notch" class="size-5 animate-spin" />
+    </div>
+
+    <div v-else-if="options" class="space-y-5">
+      <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-1">
+        <UButton
+          block
+          icon="i-ph-arrow-circle-up"
+          :disabled="!options.eligibleUpgradePlans.length"
+          @click="openUpgrade"
+        >
+          {{ $t("saas.workspaces.operator.upgrade.button") }}
+        </UButton>
+        <UButton
+          block
+          color="neutral"
+          variant="soft"
+          icon="i-ph-coins"
+          :disabled="!options.hasStripeCustomer"
+          @click="openCredit"
+        >
+          {{ $t("saas.workspaces.operator.credit.button") }}
+        </UButton>
+      </div>
+
+      <p v-if="!options.eligibleUpgradePlans.length" class="text-muted text-sm">
+        {{ $t("saas.workspaces.operator.upgrade.unavailable") }}
+      </p>
+
+      <p v-if="!options.hasStripeCustomer" class="text-muted text-sm">
+        {{ $t("saas.workspaces.operator.credit.unavailable") }}
+      </p>
+
+      <p v-if="availableCredit !== null" class="text-muted text-sm">
+        {{
+          $t("saas.workspaces.operator.credit.available", {
+            amount: formatCents(availableCredit, options.currency),
+          })
+        }}
+      </p>
+    </div>
+
+    <UModal
+      :open="isUpgradeOpen"
+      :title="$t('saas.workspaces.operator.upgrade.title')"
+      @update:open="isUpgradeOpen = $event"
+    >
+      <template #body>
+        <form class="space-y-4" @submit.prevent="submitUpgrade">
+          <UFormField
+            name="planId"
+            :label="$t('saas.workspaces.operator.upgrade.plan_label')"
+          >
+            <USelect
+              v-model="selectedPlanId"
+              name="upgrade-plan"
+              :items="planItems"
+              class="w-full"
+            />
+          </UFormField>
+          <UAlert
+            v-if="selectedPlan"
+            color="warning"
+            variant="subtle"
+            icon="i-ph-warning"
+            :title="$t('saas.workspaces.operator.confirm.title')"
+            :description="
+              $t('saas.workspaces.operator.upgrade.confirm', {
+                current: options?.currentPlanName,
+                target: selectedPlan.name,
+                price: formatPlanPrice(selectedPlan),
+              })
+            "
+          />
+        </form>
+      </template>
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton variant="ghost" @click="isUpgradeOpen = false">
+            {{ $t("common.cancel") }}
+          </UButton>
+          <UButton
+            :loading="isSubmitting"
+            :disabled="!selectedPlan"
+            @click="submitUpgrade"
+          >
+            {{ $t("saas.workspaces.operator.confirm.submit") }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <UModal
+      :open="isCreditOpen"
+      :title="$t('saas.workspaces.operator.credit.title')"
+      @update:open="isCreditOpen = $event"
+    >
+      <template #body>
+        <form class="space-y-4" @submit.prevent="submitCredit">
+          <UFormField
+            name="amountCents"
+            :label="$t('saas.workspaces.operator.credit.amount_label')"
+          >
+            <UInput
+              v-model.number="creditAmountCents"
+              name="credit-amount-cents"
+              type="number"
+              min="1"
+              step="1"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            name="reason"
+            :label="$t('saas.workspaces.operator.credit.reason_label')"
+          >
+            <UTextarea
+              v-model="creditReason"
+              name="credit-reason"
+              :maxlength="500"
+              class="w-full"
+            />
+          </UFormField>
+          <UAlert
+            v-if="creditAmountCents && creditReason.trim()"
+            color="warning"
+            variant="subtle"
+            icon="i-ph-warning"
+            :title="$t('saas.workspaces.operator.confirm.title')"
+            :description="
+              $t('saas.workspaces.operator.credit.confirm', {
+                amount: formatCents(creditAmountCents, options?.currency),
+                reason: creditReason.trim(),
+              })
+            "
+          />
+        </form>
+      </template>
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton variant="ghost" @click="isCreditOpen = false">
+            {{ $t("common.cancel") }}
+          </UButton>
+          <UButton
+            :loading="isSubmitting"
+            :disabled="!creditAmountCents || !creditReason.trim()"
+            @click="submitCredit"
+          >
+            {{ $t("saas.workspaces.operator.confirm.submit") }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </UCard>
+</template>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+
+interface WorkspaceSummaryData {
+  _id: string;
+  name: string;
+  status: string | null;
+  planName: string | null;
+  currency: string;
+  mrr: number;
+  membersCount: number;
+  createdAt: string;
+  subscription: { stripeCustomerId: string | null } | null;
+}
+
+type BadgeColor =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "info"
+  | "warning"
+  | "error"
+  | "neutral";
+
+const STATUS_COLOR: Record<string, BadgeColor> = {
+  active: "success",
+  trialing: "info",
+  past_due: "warning",
+  suspended: "error",
+  cancelled: "error",
+};
+
+const props = defineProps<{
+  routeParams?: Record<string, string>;
+}>();
+
+const { $authFetch } = useAuthFetch();
+
+const tenantId = computed(() => props.routeParams?.id ?? "");
+const { triggerRef } = useDetailRefresh(tenantId.value);
+const workspace = ref<WorkspaceSummaryData | null>(null);
+const isLoading = ref(true);
+
+const statusColor = computed(
+  () => STATUS_COLOR[workspace.value?.status ?? ""] ?? "neutral",
+);
+
+const formattedMrr = computed(() => {
+  if (!workspace.value) return "";
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: workspace.value.currency || "EUR",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(workspace.value.mrr);
+});
+
+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 (!tenantId.value) return;
+  isLoading.value = true;
+  try {
+    workspace.value = await $authFetch<WorkspaceSummaryData>(
+      `/api/saas/workspaces/${tenantId.value}`,
+    );
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+onMounted(load);
+watch(triggerRef, () => {
+  void 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="workspace" class="flex flex-col gap-5">
+      <div class="flex items-start gap-4">
+        <div
+          class="flex size-16 items-center justify-center rounded-lg bg-primary/15 text-primary"
+        >
+          <UIcon name="i-ph-building" class="text-3xl" />
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-wrap items-center gap-2">
+            <h2 class="text-xl font-semibold truncate">
+              {{ workspace.name }}
+            </h2>
+            <UBadge
+              v-if="workspace.status"
+              :color="statusColor"
+              variant="subtle"
+            >
+              {{ $t(`saas.workspaces.status.${workspace.status}`) }}
+            </UBadge>
+          </div>
+          <div class="mt-2 flex flex-col gap-1 text-sm text-muted">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-ph-users" />
+              <span>
+                {{
+                  $t("saas.workspaces.summary.members", {
+                    count: workspace.membersCount,
+                  })
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="text-right shrink-0">
+          <UBadge
+            v-if="workspace.planName"
+            color="primary"
+            variant="soft"
+            class="text-base"
+          >
+            {{ workspace.planName }}
+          </UBadge>
+          <p class="mt-2 text-2xl font-bold">
+            {{ formattedMrr }}
+            <span class="text-sm font-normal text-muted">
+              {{ $t("saas.workspaces.summary.per_month") }}
+            </span>
+          </p>
+        </div>
+      </div>
+
+      <USeparator />
+
+      <dl class="grid grid-cols-2 gap-3 text-sm lg:grid-cols-4">
+        <div>
+          <dt class="text-muted">
+            {{ $t("saas.workspaces.column.created_at") }}
+          </dt>
+          <dd class="mt-0.5">{{ formatDate(workspace.createdAt) }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted">
+            {{ $t("saas.workspaces.column.stripe_customer") }}
+          </dt>
+          <dd class="mt-0.5 truncate">
+            {{ workspace.subscription?.stripeCustomerId ?? "—" }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  </DmsCard>
+</template>