From 10f1ef9185ad5368f851bb304f2b34cef471633c Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 13 Jun 2026 16:49:49 +0330
Subject: [PATCH] edit ios & api

---
 index.html                        |  2 +-
 src/api/types.ts                  |  7 +++
 src/api/users.ts                  |  9 +++-
 src/components/shell/AppShell.vue | 10 ++--
 src/layouts/AdminLayout.vue       |  6 +--
 src/styles/main.css               | 24 ++++++++++
 src/views/UsersView.vue           | 77 +++++++++++++++++++++++++++----
 7 files changed, 118 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 0caae71..2aeecc2 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="fa" dir="rtl">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#d97706" />
     <title>منتایم — پنل مدیریت</title>
     <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png" />
diff --git a/src/api/types.ts b/src/api/types.ts
index 2cd7b0e..01ed1ea 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -11,6 +11,13 @@ export type User = {
   updatedAt?: string;
 };
 
+export type CreateUserPayload = {
+  mobile: string;
+  fullName?: string | null;
+  role?: UserRole;
+  isActive?: boolean;
+};
+
 export type UpdateUserPayload = {
   fullName?: string | null;
   role?: UserRole;
diff --git a/src/api/users.ts b/src/api/users.ts
index 2030bc6..d88e19f 100644
--- a/src/api/users.ts
+++ b/src/api/users.ts
@@ -1,10 +1,17 @@
 import { api } from './client';
-import type { AdminSetUserPasswordPayload, UpdateUserPayload, User } from './types';
+import type { AdminSetUserPasswordPayload, CreateUserPayload, UpdateUserPayload, User } from './types';
 
 export function fetchUsers() {
   return api<User[]>('/users');
 }
 
+export function createUser(payload: CreateUserPayload) {
+  return api<User>('/users', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
 export function fetchUser(id: string) {
   return api<User>(`/users/${id}`);
 }
diff --git a/src/components/shell/AppShell.vue b/src/components/shell/AppShell.vue
index 555785a..f00f660 100644
--- a/src/components/shell/AppShell.vue
+++ b/src/components/shell/AppShell.vue
@@ -1,7 +1,9 @@
 <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 class="app-shell-root min-h-[100dvh] w-full bg-surface-2">
+    <div
+      class="app-shell-frame mx-auto flex h-[100dvh] max-h-[100dvh] w-full min-w-0 max-w-full flex-col overflow-hidden bg-surface shadow-xl shadow-black/5 dark:shadow-black/30 max-w-app"
+    >
+      <slot />
+    </div>
   </div>
 </template>
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 9774d15..655a377 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,7 +1,7 @@
 <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 supports-[backdrop-filter]:bg-surface/80"
+      class="z-10 flex shrink-0 items-center justify-between border-b border-brand-500/30 bg-surface/95 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-surface/80 pt-[max(0.75rem,env(safe-area-inset-top))]"
     >
       <RouterLink :to="{ name: 'dashboard' }" class="flex min-w-0 items-center gap-2">
         <AppLogo variant="horizontal" class="h-10 shrink-0" />
@@ -33,12 +33,12 @@
       </div>
     </header>
 
-    <main class="flex-1 space-y-4 px-4 py-4 pb-6">
+    <main class="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-y-contain px-4 py-4 pb-6 [-webkit-overflow-scrolling:touch]">
       <slot />
     </main>
 
     <nav
-      class="sticky bottom-0 z-10 shrink-0 border-t border-border bg-surface/95 px-1 py-2 backdrop-blur supports-[backdrop-filter]:bg-surface/80"
+      class="z-10 shrink-0 border-t border-border bg-surface/95 px-1 py-2 backdrop-blur supports-[backdrop-filter]:bg-surface/80 pb-[max(0.5rem,env(safe-area-inset-bottom))]"
     >
       <div class="flex gap-0.5">
         <RouterLink
diff --git a/src/styles/main.css b/src/styles/main.css
index 4120355..fe2a4f2 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -26,6 +26,28 @@
   html {
     @apply antialiased font-sans;
     font-family: IRANYekanX, ui-sans-serif, system-ui, sans-serif;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  @supports (-webkit-touch-callout: none) {
+    html,
+    body,
+    #app {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .app-shell-root {
+      min-height: 100%;
+      min-height: -webkit-fill-available;
+    }
+
+    .app-shell-frame {
+      height: 100%;
+      max-height: 100%;
+      min-height: -webkit-fill-available;
+    }
   }
 
   body,
@@ -42,5 +64,7 @@
 
   #app {
     min-height: 100dvh;
+    height: 100%;
+    overflow: hidden;
   }
 }
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index 041fd11..4e18a37 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -1,6 +1,10 @@
 <template>
   <AdminLayout>
-    <PageHeader title="کاربران" subtitle="مدیریت نقش و وضعیت کاربران" />
+    <PageHeader title="کاربران" subtitle="مدیریت نقش و وضعیت کاربران">
+      <template #actions>
+        <AppButton class="!w-auto shrink-0 px-4" @click="openCreate">جدید</AppButton>
+      </template>
+    </PageHeader>
 
     <SearchInput
       v-model="searchQuery"
@@ -49,9 +53,19 @@
       </li>
     </ul>
 
-    <AppModal :open="!!editing" title="ویرایش کاربر" @close="closeEdit">
-      <form v-if="editing" class="space-y-4" @submit.prevent="onSave">
-        <p class="text-sm text-muted" dir="ltr">{{ editing.mobile }}</p>
+    <AppModal :open="creating || !!editing" :title="creating ? 'کاربر جدید' : 'ویرایش کاربر'" @close="closeEdit">
+      <form v-if="creating || editing" class="space-y-4" @submit.prevent="onSave">
+        <AppInput
+          v-if="creating"
+          id="userMobile"
+          v-model="form.mobile"
+          label="شماره موبایل"
+          ltr
+          inputmode="tel"
+          placeholder="09121234567"
+          required
+        />
+        <p v-else class="text-sm text-muted" dir="ltr">{{ editing?.mobile }}</p>
 
         <AppInput id="userFullName" v-model="form.fullName" label="نام" />
 
@@ -67,9 +81,9 @@
           حساب فعال است
         </label>
 
-        <section class="space-y-3 rounded-xl border border-border bg-surface-3 p-3">
+        <section v-if="!creating" class="space-y-3 rounded-xl border border-border bg-surface-3 p-3">
           <h3 class="text-sm font-semibold text-text">
-            {{ editing.hasPassword ? 'تغییر رمز عبور' : 'تنظیم رمز عبور' }}
+            {{ editing?.hasPassword ? 'تغییر رمز عبور' : 'تنظیم رمز عبور' }}
           </h3>
           <p class="text-xs text-muted">
             اختیاری — در صورت پر کردن، رمز کاربر بدون نیاز به رمز قبلی تنظیم می‌شود.
@@ -92,7 +106,9 @@
           />
         </section>
 
-        <AppButton type="submit" :loading="saving">ذخیره</AppButton>
+        <AppButton type="submit" :loading="saving">
+          {{ creating ? 'افزودن کاربر' : 'ذخیره' }}
+        </AppButton>
       </form>
     </AppModal>
   </AdminLayout>
@@ -100,7 +116,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { fetchUsers, setUserPassword, updateUser } from '@/api/users';
+import { createUser, fetchUsers, setUserPassword, updateUser } from '@/api/users';
 import type { User, UserRole } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
@@ -116,6 +132,7 @@ import SearchInput from '@/components/ui/SearchInput.vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { activeLabel, roleLabel } from '@/utils/format';
 import { filterBySearch } from '@/utils/search';
+import { isValidIranMobile, normalizeIranMobile } from '@/utils/mobile';
 
 const users = ref<User[]>([]);
 const searchQuery = ref('');
@@ -130,9 +147,11 @@ const filteredUsers = computed(() =>
 const loading = ref(true);
 const error = ref('');
 const editing = ref<User | null>(null);
+const creating = ref(false);
 const saving = ref(false);
 
 const form = ref({
+  mobile: '',
   fullName: '',
   role: 'customer' as UserRole,
   isActive: true,
@@ -158,9 +177,24 @@ async function load() {
   }
 }
 
+function openCreate() {
+  creating.value = true;
+  editing.value = null;
+  form.value = {
+    mobile: '',
+    fullName: '',
+    role: 'customer',
+    isActive: true,
+    password: '',
+    confirmPassword: '',
+  };
+}
+
 function openEdit(user: User) {
+  creating.value = false;
   editing.value = user;
   form.value = {
+    mobile: user.mobile,
     fullName: user.fullName ?? '',
     role: user.role,
     isActive: user.isActive,
@@ -171,9 +205,36 @@ function openEdit(user: User) {
 
 function closeEdit() {
   editing.value = null;
+  creating.value = false;
 }
 
 async function onSave() {
+  if (creating.value) {
+    const mobile = normalizeIranMobile(form.value.mobile);
+    if (!isValidIranMobile(mobile)) {
+      error.value = 'شماره موبایل معتبر نیست.';
+      return;
+    }
+
+    saving.value = true;
+    error.value = '';
+    try {
+      const created = await createUser({
+        mobile,
+        fullName: form.value.fullName.trim() || null,
+        role: form.value.role,
+        isActive: form.value.isActive,
+      });
+      users.value = [created, ...users.value];
+      closeEdit();
+    } catch (e) {
+      error.value = e instanceof ApiError ? e.message : 'خطا در افزودن کاربر';
+    } finally {
+      saving.value = false;
+    }
+    return;
+  }
+
   if (!editing.value) return;
 
   const wantsPassword = Boolean(