feat: initial admin panel (Vue + Tailwind)

2026-05-18 21:28:43 +03:30
commit 03f3994121
32 changed files with 3535 additions and 0 deletions
@@ -0,0 +1,14 @@
+<template>
+  <AdminLayout>
+    <h1 class="text-xl font-bold text-text">کسب‌وکارها</h1>
+    <div
+      class="mt-4 rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted"
+    >
+      به‌زودی — CRUD و واگذاری مدیر کسب‌وکار
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+</script>
@@ -0,0 +1,20 @@
+<template>
+  <AdminLayout>
+    <h1 class="text-xl font-bold text-text">داشبورد</h1>
+    <p class="mt-2 text-sm text-muted">سوپر ادمین — مون‌تایم</p>
+    <div class="mt-6 grid gap-3 sm:grid-cols-2">
+      <div class="rounded-2xl border border-border bg-surface-2 p-4">
+        <p class="text-xs text-muted">کسب‌وکارها</p>
+        <p class="mt-1 text-2xl font-bold text-text">—</p>
+      </div>
+      <div class="rounded-2xl border border-border bg-surface-2 p-4">
+        <p class="text-xs text-muted">کاربران</p>
+        <p class="mt-1 text-2xl font-bold text-text">—</p>
+      </div>
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+</script>
@@ -0,0 +1,61 @@
+<template>
+  <AuthLayout title="پنل مدیریت" subtitle="ورود سوپر ادمین">
+    <p
+      v-if="error"
+      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+    >
+      {{ error }}
+    </p>
+
+    <form class="mt-auto space-y-4" @submit.prevent="onSubmit">
+      <AppInput
+        id="mobile"
+        v-model="mobile"
+        label="شماره موبایل"
+        type="tel"
+        inputmode="numeric"
+        placeholder="09121234567"
+        autocomplete="tel"
+        ltr
+        required
+      />
+      <AppButton type="submit" :loading="loading">دریافت کد تأیید</AppButton>
+    </form>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { requestOtp } from '@/api/auth';
+import { ApiError } from '@/api/client';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+
+const router = useRouter();
+const mobile = ref('');
+const loading = ref(false);
+const error = ref('');
+
+async function onSubmit() {
+  error.value = '';
+  loading.value = true;
+  try {
+    const res = await requestOtp(mobile.value.trim());
+    await router.push({
+      name: 'verify',
+      query: {
+        mobile: mobile.value.trim(),
+        expires: String(res.expiresInSeconds),
+        ...(res.otpCode ? { devCode: res.otpCode } : {}),
+      },
+    });
+  } catch (e) {
+    error.value =
+      e instanceof ApiError ? e.message : 'خطا در ارسال درخواست. دوباره تلاش کنید.';
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
@@ -0,0 +1,14 @@
+<template>
+  <AdminLayout>
+    <h1 class="text-xl font-bold text-text">کاربران</h1>
+    <div
+      class="mt-4 rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted"
+    >
+      به‌زودی
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup lang="ts">
+import AdminLayout from '@/layouts/AdminLayout.vue';
+</script>
@@ -0,0 +1,120 @@
+<template>
+  <AuthLayout title="کد تأیید" :subtitle="`کد ارسال‌شده به ${mobile}`">
+    <p
+      v-if="devCode"
+      class="mb-4 rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
+    >
+      حالت توسعه — کد: {{ devCode }}
+    </p>
+    <p
+      v-if="error"
+      class="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
+    >
+      {{ error }}
+    </p>
+
+    <form class="space-y-4" @submit.prevent="onSubmit">
+      <AppInput
+        id="code"
+        v-model="code"
+        label="کد ۶ رقمی"
+        type="text"
+        inputmode="numeric"
+        maxlength="8"
+        placeholder="123456"
+        autocomplete="one-time-code"
+        ltr
+        required
+      />
+      <AppButton type="submit" :loading="loading">ورود</AppButton>
+    </form>
+
+    <p v-if="secondsLeft > 0" class="mt-4 text-center text-sm text-muted">
+      ارسال مجدد تا {{ secondsLeft }} ثانیه
+    </p>
+    <AppButton v-else variant="ghost" class="mt-2" :loading="resendLoading" @click="resend">
+      ارسال مجدد کد
+    </AppButton>
+
+    <AppButton variant="ghost" class="mt-2" @click="router.push({ name: 'login' })">
+      تغییر شماره موبایل
+    </AppButton>
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { requestOtp, verifyOtp } from '@/api/auth';
+import { ApiError } from '@/api/client';
+import AppButton from '@/components/ui/AppButton.vue';
+import AppInput from '@/components/ui/AppInput.vue';
+import AuthLayout from '@/layouts/AuthLayout.vue';
+import { useAuthStore } from '@/stores/auth';
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+
+const mobile = computed(() => String(route.query.mobile ?? ''));
+const devCode = computed(() => route.query.devCode as string | undefined);
+
+const code = ref(devCode.value ?? '');
+const loading = ref(false);
+const resendLoading = ref(false);
+const error = ref('');
+const secondsLeft = ref(Number(route.query.expires) || 120);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+onMounted(() => {
+  if (!mobile.value) {
+    router.replace({ name: 'login' });
+    return;
+  }
+  timer = setInterval(() => {
+    if (secondsLeft.value > 0) secondsLeft.value -= 1;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+});
+
+async function onSubmit() {
+  error.value = '';
+  loading.value = true;
+  try {
+    const res = await verifyOtp(mobile.value, code.value.trim());
+    if (res.user.role !== 'admin') {
+      error.value = 'دسترسی سوپر ادمین ندارید.';
+      return;
+    }
+    auth.setSession(res.accessToken, res.user);
+    await router.replace({ name: 'dashboard' });
+  } catch (e) {
+    error.value =
+      e instanceof ApiError ? e.message : 'کد نامعتبر است. دوباره تلاش کنید.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function resend() {
+  error.value = '';
+  resendLoading.value = true;
+  try {
+    const res = await requestOtp(mobile.value);
+    secondsLeft.value = res.expiresInSeconds;
+    if (res.otpCode) {
+      await router.replace({
+        query: { ...route.query, devCode: res.otpCode, expires: String(res.expiresInSeconds) },
+      });
+    }
+  } catch (e) {
+    error.value =
+      e instanceof ApiError ? e.message : 'ارسال مجدد ناموفق بود.';
+  } finally {
+    resendLoading.value = false;
+  }
+}
+</script>