feat: initial admin panel (Vue + Tailwind)

.env.example

@@ -0,0 +1 @@
+VITE_API_URL=https://api.montime.ir

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.env
+.env.local
+*.log

.npmrc

@@ -0,0 +1,2 @@
+registry=https://mirror-npm.runflare.com
+strict-ssl=false

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="fa" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>مون‌تایم — پنل مدیریت</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "montime-adm",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json"
+  },
+  "dependencies": {
+    "@vueuse/core": "^12.8.2",
+    "pinia": "^2.3.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.7",
+    "vue-tsc": "^2.2.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.vue

@@ -0,0 +1,5 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts"></script>

src/api/auth.ts

@@ -0,0 +1,37 @@
+import { api } from './client';
+
+export type User = {
+  id: string;
+  mobile: string;
+  fullName: string | null;
+  role: string;
+  isActive: boolean;
+};
+
+export type RequestOtpResponse = {
+  expiresInSeconds: number;
+  otpCode?: string;
+};
+
+export type VerifyOtpResponse = {
+  accessToken: string;
+  user: User;
+};
+
+export function requestOtp(mobile: string) {
+  return api<RequestOtpResponse>('/auth/request-otp', {
+    method: 'POST',
+    body: JSON.stringify({ mobile }),
+  });
+}
+
+export function verifyOtp(mobile: string, code: string) {
+  return api<VerifyOtpResponse>('/auth/verify-otp', {
+    method: 'POST',
+    body: JSON.stringify({ mobile, code }),
+  });
+}
+
+export function fetchMe(token: string) {
+  return api<User>('/auth/me', { token });
+}

src/api/client.ts

@@ -0,0 +1,58 @@
+const baseUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
+
+export class ApiError extends Error {
+  constructor(
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+type ApiOptions = RequestInit & {
+  token?: string;
+};
+
+const TOKEN_KEY = 'montime_admin_access_token';
+
+export function getApiToken(): string | null {
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export async function api<T>(path: string, options: ApiOptions = {}): Promise<T> {
+  const token = options.token ?? getApiToken() ?? undefined;
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string> | undefined),
+  };
+
+  if (token) {
+    headers.Authorization = `Bearer ${token}`;
+  }
+
+  const { token: _token, ...fetchOptions } = options;
+
+  const res = await fetch(`${baseUrl}${path}`, {
+    ...fetchOptions,
+    headers,
+  });
+
+  if (!res.ok) {
+    const body = (await res.json().catch(() => null)) as
+      | { message?: string | string[] }
+      | null;
+    const msg = Array.isArray(body?.message)
+      ? body.message.join(', ')
+      : body?.message ?? res.statusText;
+    throw new ApiError(res.status, msg);
+  }
+
+  if (res.status === 204) {
+    return undefined as T;
+  }
+
+  return res.json() as Promise<T>;
+}
+
+export { TOKEN_KEY };

src/components/shell/AppShell.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="mx-auto flex min-h-dvh w-full max-w-app flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/AppButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    :type="type"
+    class="inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50"
+    :class="variantClass"
+    :disabled="disabled || loading"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'primary' | 'ghost' | 'danger';
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    loading?: boolean;
+  }>(),
+  { variant: 'primary', type: 'button', disabled: false, loading: false },
+);
+
+const variantClass = computed(() => {
+  switch (props.variant) {
+    case 'ghost':
+      return 'bg-transparent text-muted hover:bg-surface-3 hover:text-text';
+    case 'danger':
+      return 'bg-red-500/15 text-red-600 dark:text-red-400 hover:bg-red-500/25';
+    default:
+      return 'bg-brand-600 text-white hover:bg-brand-700';
+  }
+});
+</script>

src/components/ui/AppInput.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="space-y-1.5">
+    <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
+      {{ label }}
+    </label>
+    <input
+      :id="id"
+      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+      :class="ltr ? 'text-left' : ''"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    id?: string;
+    ltr?: boolean;
+  }>(),
+  { ltr: false },
+);
+</script>

src/components/ui/ThemeToggle.vue

@@ -0,0 +1,19 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-surface-2 text-muted transition hover:text-text"
+    :aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
+    @click="toggle"
+  >
+    <span v-if="isDark" aria-hidden="true">☀️</span>
+    <span v-else aria-hidden="true">🌙</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from '@/composables/useTheme';
+
+const { isDark: mode, toggle } = useTheme();
+const isDark = computed(() => mode.value === 'dark');
+</script>

src/composables/useTheme.ts

@@ -0,0 +1,18 @@
+import { useColorMode } from '@vueuse/core';
+
+export function useTheme() {
+  const mode = useColorMode({
+    storageKey: 'montime-adm-theme',
+    attribute: 'class',
+    modes: {
+      light: 'light',
+      dark: 'dark',
+    },
+  });
+
+  function toggle() {
+    mode.value = mode.value === 'dark' ? 'light' : 'dark';
+  }
+
+  return { isDark: mode, toggle };
+}

src/layouts/AdminLayout.vue

@@ -0,0 +1,66 @@
+<template>
+  <AppShell>
+    <header
+      class="sticky top-0 z-10 flex items-center justify-between border-b border-brand-500/30 bg-surface/95 px-4 py-3 backdrop-blur"
+    >
+      <div>
+        <p class="font-bold text-text">پنل مدیریت</p>
+        <p class="text-xs text-brand-600 dark:text-brand-500">adm.montime.ir</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <ThemeToggle />
+        <button
+          type="button"
+          class="rounded-xl px-3 py-2 text-sm text-muted hover:bg-surface-3"
+          @click="onLogout"
+        >
+          خروج
+        </button>
+      </div>
+    </header>
+
+    <main class="flex-1 space-y-4 px-4 py-4">
+      <slot />
+    </main>
+
+    <nav class="sticky bottom-0 border-t border-border bg-surface/95 px-2 py-2">
+      <div class="grid grid-cols-3 gap-1">
+        <RouterLink
+          v-for="item in items"
+          :key="item.to"
+          :to="item.to"
+          class="flex flex-col items-center rounded-xl py-2 text-xs"
+          :class="
+            route.name === item.name
+              ? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
+              : 'text-muted hover:bg-surface-3'
+          "
+        >
+          <span class="text-lg">{{ item.icon }}</span>
+          {{ item.label }}
+        </RouterLink>
+      </div>
+    </nav>
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import AppShell from '@/components/shell/AppShell.vue';
+import ThemeToggle from '@/components/ui/ThemeToggle.vue';
+import { useAuthStore } from '@/stores/auth';
+
+const route = useRoute();
+const router = useRouter();
+
+const items = [
+  { to: '/', name: 'dashboard', label: 'داشبورد', icon: '📊' },
+  { to: '/businesses', name: 'businesses', label: 'کسب‌وکار', icon: '🏪' },
+  { to: '/users', name: 'users', label: 'کاربران', icon: '👥' },
+];
+
+function onLogout() {
+  useAuthStore().logout();
+  router.push({ name: 'login' });
+}
+</script>

src/layouts/AuthLayout.vue

@@ -0,0 +1,24 @@
+<template>
+  <AppShell>
+    <header class="flex items-center justify-between px-4 py-3">
+      <div>
+        <p class="text-lg font-bold text-text">{{ title }}</p>
+        <p v-if="subtitle" class="text-sm text-muted">{{ subtitle }}</p>
+      </div>
+      <ThemeToggle />
+    </header>
+    <main class="flex flex-1 flex-col px-4 pb-8">
+      <slot />
+    </main>
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import AppShell from '@/components/shell/AppShell.vue';
+import ThemeToggle from '@/components/ui/ThemeToggle.vue';
+
+defineProps<{
+  title?: string;
+  subtitle?: string;
+}>();
+</script>

src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+import './styles/main.css';
+
+const app = createApp(App);
+app.use(createPinia());
+app.use(router);
+app.mount('#app');

src/router/index.ts

@@ -0,0 +1,61 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/LoginView.vue'),
+      meta: { guest: true },
+    },
+    {
+      path: '/verify',
+      name: 'verify',
+      component: () => import('@/views/VerifyOtpView.vue'),
+      meta: { guest: true },
+    },
+    {
+      path: '/',
+      name: 'dashboard',
+      component: () => import('@/views/DashboardView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
+    {
+      path: '/businesses',
+      name: 'businesses',
+      component: () => import('@/views/BusinessesView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
+    {
+      path: '/users',
+      name: 'users',
+      component: () => import('@/views/UsersView.vue'),
+      meta: { requiresAuth: true, requiresAdmin: true },
+    },
+  ],
+});
+
+router.beforeEach(async (to) => {
+  const auth = useAuthStore();
+
+  if (auth.token && !auth.user) {
+    await auth.loadUser();
+  }
+
+  if (to.meta.requiresAuth && !auth.isLoggedIn) {
+    return { name: 'login' };
+  }
+
+  if (to.meta.requiresAdmin && auth.isLoggedIn && !auth.isAdmin) {
+    auth.logout();
+    return { name: 'login' };
+  }
+
+  if (to.meta.guest && auth.isLoggedIn && auth.isAdmin) {
+    return { name: 'dashboard' };
+  }
+});
+
+export default router;

src/stores/auth.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import type { User } from '@/api/auth';
+import { fetchMe } from '@/api/auth';
+import { TOKEN_KEY } from '@/api/client';
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(localStorage.getItem(TOKEN_KEY));
+  const user = ref<User | null>(null);
+
+  const isLoggedIn = computed(() => Boolean(token.value));
+  const isAdmin = computed(() => user.value?.role === 'admin');
+
+  function setSession(accessToken: string, profile: User) {
+    token.value = accessToken;
+    user.value = profile;
+    localStorage.setItem(TOKEN_KEY, accessToken);
+  }
+
+  function logout() {
+    token.value = null;
+    user.value = null;
+    localStorage.removeItem(TOKEN_KEY);
+  }
+
+  async function loadUser() {
+    if (!token.value) {
+      return;
+    }
+    try {
+      user.value = await fetchMe(token.value);
+    } catch {
+      logout();
+    }
+  }
+
+  return {
+    token,
+    user,
+    isLoggedIn,
+    isAdmin,
+    setSession,
+    logout,
+    loadUser,
+  };
+});

src/styles/main.css

@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-surface: #ffffff;
+  --color-surface-2: #fffbeb;
+  --color-surface-3: #fef3c7;
+  --color-border: #fde68a;
+  --color-text: #0f172a;
+  --color-muted: #64748b;
+}
+
+.dark {
+  --color-surface: #0f1419;
+  --color-surface-2: #1a2332;
+  --color-surface-3: #243044;
+  --color-border: #334155;
+  --color-text: #f1f5f9;
+  --color-muted: #94a3b8;
+}
+
+@layer base {
+  html {
+    @apply antialiased;
+  }
+
+  body {
+    @apply bg-surface-2 font-sans text-text;
+  }
+
+  #app {
+    @apply min-h-dvh;
+  }
+}

src/views/BusinessesView.vue

@@ -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>

src/views/DashboardView.vue

@@ -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>

src/views/LoginView.vue

@@ -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>

src/views/UsersView.vue

@@ -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>

src/views/VerifyOtpView.vue

@@ -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>

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Vazirmatn', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        brand: {
+          50: '#fffbeb',
+          100: '#fef3c7',
+          500: '#f59e0b',
+          600: '#d97706',
+          700: '#b45309',
+        },
+        surface: {
+          DEFAULT: 'var(--color-surface)',
+          2: 'var(--color-surface-2)',
+          3: 'var(--color-surface-3)',
+        },
+        border: 'var(--color-border)',
+        text: 'var(--color-text)',
+        muted: 'var(--color-muted)',
+      },
+      maxWidth: {
+        app: '768px',
+      },
+    },
+  },
+  plugins: [],
+};

tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["dist", "node_modules"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 5174,
+  },
+});