From 9e7aa905b7834df4d0bacdfbdd01f4fde29d13fc Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Tue, 2 Jun 2026 11:35:29 +0330
Subject: [PATCH] edit business

---
 src/components/admin/BusinessImageUpload.vue  | 10 ++--
 src/components/admin/BusinessListCard.vue     | 24 ++++----
 .../admin/BusinessServicesSection.vue         |  9 +--
 src/components/brand/AppLogo.vue              |  4 +-
 src/components/ui/AppIcon.vue                 | 10 ++++
 src/components/ui/AppIconButton.vue           | 39 +++++++++++++
 src/components/ui/AppInput.vue                | 55 ++++++++++++++++---
 src/layouts/AdminLayout.vue                   |  4 +-
 src/layouts/AuthLayout.vue                    |  6 +-
 src/types/icons.ts                            |  7 ++-
 src/views/BookingsView.vue                    | 36 ++++++------
 src/views/BusinessesView.vue                  | 37 ++++++++-----
 src/views/CategoriesView.vue                  |  7 ++-
 src/views/LoginView.vue                       |  2 +-
 src/views/ProfileView.vue                     | 18 +++---
 src/views/ServiceTemplatesView.vue            |  7 ++-
 src/views/UsersView.vue                       | 33 +++++------
 17 files changed, 203 insertions(+), 105 deletions(-)
 create mode 100644 src/components/ui/AppIconButton.vue

diff --git a/src/components/admin/BusinessImageUpload.vue b/src/components/admin/BusinessImageUpload.vue
index 258443b..593dc88 100644
--- a/src/components/admin/BusinessImageUpload.vue
+++ b/src/components/admin/BusinessImageUpload.vue
@@ -18,11 +18,12 @@
         </span>
         <button
           type="button"
-          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
+          class="absolute left-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-red-600 disabled:opacity-50"
           :disabled="deletingId === img.id"
+          aria-label="حذف تصویر"
           @click="emit('remove-existing', img.id)"
         >
-          حذف
+          <AppIcon name="trash" size="sm" />
         </button>
       </div>
     </div>
@@ -36,10 +37,11 @@
         <img :src="src" alt="" class="h-full w-full object-cover" />
         <button
           type="button"
-          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
+          class="absolute left-1 top-1 flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white transition hover:bg-red-600"
+          aria-label="حذف تصویر"
           @click="removePending(idx)"
         >
-          حذف
+          <AppIcon name="trash" size="sm" />
         </button>
       </div>
     </div>
diff --git a/src/components/admin/BusinessListCard.vue b/src/components/admin/BusinessListCard.vue
index d808566..543950c 100644
--- a/src/components/admin/BusinessListCard.vue
+++ b/src/components/admin/BusinessListCard.vue
@@ -1,15 +1,17 @@
 <template>
   <article
-    class="flex items-center gap-3 rounded-xl border border-border bg-surface-2 p-2.5 transition hover:border-brand-500/40 hover:shadow-sm"
+    class="flex items-start gap-3 rounded-xl border border-border bg-surface-2 p-2.5 transition hover:border-brand-500/40 hover:shadow-sm"
   >
     <div class="min-w-0 flex-1">
-      <div class="flex items-start justify-between gap-2">
-        <div class="min-w-0 flex-1">
-          <h3 class="truncate text-sm font-semibold text-text">{{ business.title }}</h3>
-          <p v-if="business.category" class="mt-0.5 truncate text-xs text-muted">
-            {{ business.category.title }}
-          </p>
-          <p v-if="ownerText" class="mt-0.5 truncate text-xs text-muted">{{ ownerText }}</p>
+      <h3 class="truncate text-sm font-semibold text-text">{{ business.title }}</h3>
+      <p v-if="business.category" class="mt-0.5 truncate text-xs text-muted">
+        {{ business.category.title }}
+      </p>
+      <p v-if="ownerText" class="mt-0.5 truncate text-xs text-muted">{{ ownerText }}</p>
+
+      <div class="mt-2 flex items-center justify-between gap-2">
+        <div v-if="$slots.actions" class="flex shrink-0 items-center gap-1">
+          <slot name="actions" />
         </div>
         <AppBadge
           class="shrink-0 !px-1.5 !py-0.5 text-[10px]"
@@ -18,14 +20,10 @@
           {{ activeLabel(business.isActive) }}
         </AppBadge>
       </div>
-
-      <div v-if="$slots.actions" class="mt-2 flex flex-wrap gap-1">
-        <slot name="actions" />
-      </div>
     </div>
 
     <div
-      class="relative h-14 w-14 shrink-0 overflow-hidden rounded-lg bg-surface-3 sm:h-16 sm:w-16"
+      class="relative h-20 w-20 shrink-0 overflow-hidden rounded-lg bg-surface-3 sm:h-24 sm:w-24"
     >
       <img
         v-if="cover"
diff --git a/src/components/admin/BusinessServicesSection.vue b/src/components/admin/BusinessServicesSection.vue
index 2bd8a40..43248da 100644
--- a/src/components/admin/BusinessServicesSection.vue
+++ b/src/components/admin/BusinessServicesSection.vue
@@ -24,13 +24,7 @@
             <span v-if="svc.durationMinutes"> · {{ svc.durationMinutes }} دقیقه</span>
           </p>
         </div>
-        <button
-          type="button"
-          class="shrink-0 text-xs text-red-600"
-          @click="onDelete(svc)"
-        >
-          حذف
-        </button>
+        <AppIconButton icon="trash" label="حذف خدمت" variant="danger" @click="onDelete(svc)" />
       </li>
     </ul>
 
@@ -76,6 +70,7 @@ import { fetchServiceTemplates } from '@/api/service-templates';
 import type { ServiceTemplate } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
 import PriceInput from '@/components/ui/PriceInput.vue';
 import { formatPriceToman, parsePriceInput } from '@/utils/price';
diff --git a/src/components/brand/AppLogo.vue b/src/components/brand/AppLogo.vue
index 4f41b8d..e577274 100644
--- a/src/components/brand/AppLogo.vue
+++ b/src/components/brand/AppLogo.vue
@@ -7,12 +7,12 @@
   />
   <template v-else>
     <img
-      src="/brand/logo-dark.png"
+      src="/brand/logo-lite.png"
       alt="منتایم"
       :class="['dark:hidden', imgClass]"
     />
     <img
-      src="/brand/logo-lite.png"
+      src="/brand/logo-dark.png"
       alt="منتایم"
       :class="['hidden dark:block', imgClass]"
     />
diff --git a/src/components/ui/AppIcon.vue b/src/components/ui/AppIcon.vue
index 5247f73..f5de20f 100644
--- a/src/components/ui/AppIcon.vue
+++ b/src/components/ui/AppIcon.vue
@@ -16,16 +16,21 @@ import {
   Camera,
   CircleCheck,
   ClipboardList,
+  Eye,
+  EyeOff,
   FolderOpen,
   Home,
   LayoutDashboard,
   MapPin,
   Moon,
   Plus,
+  Pencil,
   Search,
   Store,
   Sun,
+  Trash2,
   User,
+  UserCog,
   Users,
   X,
 } from '@lucide/vue';
@@ -49,6 +54,11 @@ const iconMap: Record<AppIconName, Component> = {
   camera: Camera,
   'circle-check': CircleCheck,
   search: Search,
+  pencil: Pencil,
+  trash: Trash2,
+  'user-cog': UserCog,
+  eye: Eye,
+  'eye-off': EyeOff,
 };
 
 const props = withDefaults(
diff --git a/src/components/ui/AppIconButton.vue b/src/components/ui/AppIconButton.vue
new file mode 100644
index 0000000..399d9c4
--- /dev/null
+++ b/src/components/ui/AppIconButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <button
+    type="button"
+    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 disabled:pointer-events-none disabled:opacity-50"
+    :class="variantClasses"
+    :aria-label="label"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <AppIcon :name="icon" size="sm" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import type { AppIconName } from '@/types/icons';
+
+const props = withDefaults(
+  defineProps<{
+    icon: AppIconName;
+    label: string;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+  }>(),
+  {
+    variant: 'default',
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>();
+
+const variantClasses = computed(() =>
+  props.variant === 'danger'
+    ? 'text-muted hover:bg-red-500/10 hover:text-red-600'
+    : 'text-muted hover:bg-surface-3 hover:text-text',
+);
+</script>
diff --git a/src/components/ui/AppInput.vue b/src/components/ui/AppInput.vue
index 809bc24..45a32d5 100644
--- a/src/components/ui/AppInput.vue
+++ b/src/components/ui/AppInput.vue
@@ -3,22 +3,40 @@
     <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
       {{ label }}
     </label>
-    <input
-      :id="id"
-      v-model="model"
-      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
-      :class="ltr ? 'text-left' : ''"
-      v-bind="$attrs"
-    />
+    <div class="relative">
+      <input
+        :id="id"
+        v-model="model"
+        class="w-full rounded-xl border border-border bg-surface-2 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+        :class="inputPaddingClass"
+        :type="resolvedType"
+        v-bind="inputAttrs"
+      />
+      <button
+        v-if="isPassword"
+        type="button"
+        class="absolute top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg text-muted transition hover:text-text"
+        :class="toggleButtonClass"
+        :aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
+        @click="showPassword = !showPassword"
+      >
+        <AppIcon :name="showPassword ? 'eye-off' : 'eye'" size="sm" />
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, useAttrs } from 'vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+
 defineOptions({ inheritAttrs: false });
 
 const model = defineModel<string>({ default: '' });
+const attrs = useAttrs();
+const showPassword = ref(false);
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     label?: string;
     id?: string;
@@ -26,4 +44,25 @@ withDefaults(
   }>(),
   { ltr: false },
 );
+
+const isPassword = computed(() => attrs.type === 'password');
+
+const resolvedType = computed(() => {
+  if (!isPassword.value) return attrs.type as string | undefined;
+  return showPassword.value ? 'text' : 'password';
+});
+
+const inputAttrs = computed(() => {
+  const { type: _type, ...rest } = attrs;
+  return rest;
+});
+
+const inputPaddingClass = computed(() => {
+  if (isPassword.value) {
+    return props.ltr ? 'pl-4 pr-11 text-left' : 'pl-11 pr-4';
+  }
+  return props.ltr ? 'px-4 text-left' : 'px-4';
+});
+
+const toggleButtonClass = computed(() => (props.ltr ? 'right-1' : 'left-1'));
 </script>
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index d8da1e9..badede1 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -3,8 +3,8 @@
     <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"
     >
-      <RouterLink :to="{ name: 'dashboard' }" class="min-w-0">
-        <AppLogo variant="horizontal" class="h-8" />
+      <RouterLink :to="{ name: 'dashboard' }" class="flex min-w-0 items-center gap-2">
+        <AppLogo variant="horizontal" class="h-10 shrink-0" />
         <p class="truncate text-xs text-brand-600 dark:text-brand-500">پنل مدیریت</p>
       </RouterLink>
       <div class="flex items-center gap-1">
diff --git a/src/layouts/AuthLayout.vue b/src/layouts/AuthLayout.vue
index 1bcae4e..be58c4f 100644
--- a/src/layouts/AuthLayout.vue
+++ b/src/layouts/AuthLayout.vue
@@ -2,9 +2,9 @@
   <AppShell>
     <header class="flex items-center justify-between px-4 py-3">
       <div>
-        <div v-if="brand" class="flex items-center gap-3">
-          <AppLogo variant="horizontal" class="h-7 shrink-0" />
-          <p v-if="subtitle" class="text-sm text-muted">{{ subtitle }}</p>
+        <div v-if="brand" class="flex min-w-0 items-center gap-2">
+          <AppLogo variant="horizontal" class="h-10 shrink-0" />
+          <p class="truncate text-xs text-brand-600 dark:text-brand-500">پنل مدیریت</p>
         </div>
         <template v-else>
           <p v-if="title" class="text-lg font-bold text-text">{{ title }}</p>
diff --git a/src/types/icons.ts b/src/types/icons.ts
index 1beabcc..ce59fea 100644
--- a/src/types/icons.ts
+++ b/src/types/icons.ts
@@ -15,7 +15,12 @@ export type AppIconName =
   | 'x'
   | 'camera'
   | 'circle-check'
-  | 'search';
+  | 'search'
+  | 'pencil'
+  | 'trash'
+  | 'user-cog'
+  | 'eye'
+  | 'eye-off';
 
 export type AdminNavItem = {
   to: string;
diff --git a/src/views/BookingsView.vue b/src/views/BookingsView.vue
index c0ffb93..f079e0b 100644
--- a/src/views/BookingsView.vue
+++ b/src/views/BookingsView.vue
@@ -38,24 +38,22 @@
         :key="b.id"
         class="rounded-2xl border border-border bg-surface-2 p-4"
       >
-        <div class="flex items-start justify-between gap-2">
-          <div class="min-w-0 flex-1">
-            <p class="font-semibold text-text">
-              {{ b.business?.title ?? 'کسب‌وکار' }}
-            </p>
-            <p class="mt-0.5 text-xs text-muted">
-              {{ serviceTitle(b) }} — {{ formatDate(b.scheduledAt) }}
-            </p>
-            <p class="mt-1 text-xs text-muted" dir="ltr">
-              {{ b.customer?.mobile ?? b.customerId }}
-            </p>
-            <AppBadge class="mt-2" :tone="statusTone(b.status)">
-              {{ statusLabel(b.status) }}
-            </AppBadge>
-          </div>
-          <AppButton variant="danger" class="!w-auto shrink-0 px-3" @click="onDelete(b)">
-            حذف
-          </AppButton>
+        <div class="flex items-center justify-between gap-4">
+          <p class="min-w-0 truncate font-semibold text-text">
+            {{ b.business?.title ?? 'کسب‌وکار' }}
+          </p>
+          <p class="shrink-0 text-sm text-muted" dir="ltr">
+            {{ b.customer?.mobile ?? b.customerId }}
+          </p>
+        </div>
+        <p class="mt-1 text-xs text-muted">
+          {{ serviceTitle(b) }} — {{ formatDate(b.scheduledAt) }}
+        </p>
+        <div class="mt-2 flex items-center justify-between gap-2">
+          <AppBadge :tone="statusTone(b.status)">
+            {{ statusLabel(b.status) }}
+          </AppBadge>
+          <AppIconButton icon="trash" label="حذف رزرو" variant="danger" @click="onDelete(b)" />
         </div>
       </li>
     </ul>
@@ -69,7 +67,7 @@ import { fetchBusinesses } from '@/api/businesses';
 import type { Booking, BookingStatus, Business } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
-import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
 import EmptyState from '@/components/ui/EmptyState.vue';
 import PageHeader from '@/components/ui/PageHeader.vue';
diff --git a/src/views/BusinessesView.vue b/src/views/BusinessesView.vue
index c0fedb3..197f6a5 100644
--- a/src/views/BusinessesView.vue
+++ b/src/views/BusinessesView.vue
@@ -48,15 +48,9 @@
         :owner-text="ownerLabel(biz)"
       >
         <template #actions>
-          <AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="openEdit(biz)">
-            ویرایش
-          </AppButton>
-          <AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="openAssign(biz)">
-            مدیر
-          </AppButton>
-          <AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(biz)">
-            حذف
-          </AppButton>
+          <AppIconButton icon="pencil" label="ویرایش" @click="openEdit(biz)" />
+          <AppIconButton icon="user-cog" label="مدیر" @click="openAssign(biz)" />
+          <AppIconButton icon="trash" label="حذف" variant="danger" @click="onDelete(biz)" />
         </template>
       </BusinessListCard>
     </div>
@@ -133,12 +127,24 @@
           v-else-if="assignCurrentOwner"
           class="rounded-xl border border-border bg-surface-3 p-3"
         >
-          <p class="text-xs font-medium text-muted">مدیر فعلی</p>
-          <p class="mt-1 font-semibold text-text">
-            {{ assignCurrentOwner.fullName ?? 'بدون نام' }}
-          </p>
-          <p class="mt-0.5 text-sm text-muted" dir="ltr">{{ assignCurrentOwner.mobile }}</p>
-          <AppBadge class="mt-2">{{ roleLabel(assignCurrentOwner.role) }}</AppBadge>
+          <dl class="space-y-3">
+            <div class="flex items-center justify-between gap-4">
+              <dt class="shrink-0 text-xs text-muted">نام</dt>
+              <dd class="font-semibold text-text">
+                {{ assignCurrentOwner.fullName ?? 'بدون نام' }}
+              </dd>
+            </div>
+            <div class="flex items-center justify-between gap-4">
+              <dt class="shrink-0 text-xs text-muted">موبایل</dt>
+              <dd class="text-sm text-muted" dir="ltr">{{ assignCurrentOwner.mobile }}</dd>
+            </div>
+            <div class="flex items-center justify-between gap-4">
+              <dt class="shrink-0 text-xs text-muted">نقش</dt>
+              <dd>
+                <AppBadge>{{ roleLabel(assignCurrentOwner.role) }}</AppBadge>
+              </dd>
+            </div>
+          </dl>
         </div>
 
         <div
@@ -199,6 +205,7 @@ import BusinessServicesSection from '@/components/admin/BusinessServicesSection.
 import BusinessListCard from '@/components/admin/BusinessListCard.vue';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
diff --git a/src/views/CategoriesView.vue b/src/views/CategoriesView.vue
index 3519626..1c45481 100644
--- a/src/views/CategoriesView.vue
+++ b/src/views/CategoriesView.vue
@@ -48,9 +48,9 @@
               {{ activeLabel(cat.isActive) }}
             </AppBadge>
           </div>
-          <div class="flex shrink-0 flex-col gap-1">
-            <AppButton variant="ghost" class="!w-auto px-3" @click="openEdit(cat)">ویرایش</AppButton>
-            <AppButton variant="danger" class="!w-auto px-3" @click="onDelete(cat)">حذف</AppButton>
+          <div class="flex shrink-0 items-center gap-1">
+            <AppIconButton icon="pencil" label="ویرایش" @click="openEdit(cat)" />
+            <AppIconButton icon="trash" label="حذف" variant="danger" @click="onDelete(cat)" />
           </div>
         </div>
       </li>
@@ -93,6 +93,7 @@ import type { BusinessCategory } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import EmptyState from '@/components/ui/EmptyState.vue';
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 3a880cc..dc16d89 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <AuthLayout brand subtitle="پنل مدیریت — ورود سوپر ادمین">
+  <AuthLayout brand>
     <div class="flex flex-1 flex-col justify-start gap-8 pt-10">
       <section class="flex flex-col items-center text-center">
         <AppLogo variant="vertical" class="mb-3 h-28 w-auto object-contain" />
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 38d8819..2c734c8 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -18,14 +18,16 @@
     <form v-if="auth.user" class="mt-6 space-y-6" @submit.prevent="onSaveProfile">
       <section class="space-y-4 rounded-2xl border border-border bg-surface-2 p-4">
         <h2 class="text-sm font-semibold text-text">اطلاعات حساب</h2>
-        <div>
-          <p class="text-xs text-muted">موبایل</p>
-          <p class="mt-1 font-medium" dir="ltr">{{ auth.user.mobile }}</p>
-        </div>
-        <div>
-          <p class="text-xs text-muted">نقش</p>
-          <p class="mt-1 font-medium">{{ roleLabel(auth.user.role) }}</p>
-        </div>
+        <dl class="space-y-3">
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">موبایل</dt>
+            <dd class="font-medium" dir="ltr">{{ auth.user.mobile }}</dd>
+          </div>
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">نقش</dt>
+            <dd class="font-medium">{{ roleLabel(auth.user.role) }}</dd>
+          </div>
+        </dl>
         <AppInput id="fullName" v-model="fullName" label="نام نمایشی" placeholder="نام شما" />
         <AppButton type="submit" :loading="savingProfile">ذخیره پروفایل</AppButton>
       </section>
diff --git a/src/views/ServiceTemplatesView.vue b/src/views/ServiceTemplatesView.vue
index 2f6cda3..6666855 100644
--- a/src/views/ServiceTemplatesView.vue
+++ b/src/views/ServiceTemplatesView.vue
@@ -59,9 +59,9 @@
               {{ activeLabel(tpl.isActive) }}
             </AppBadge>
           </div>
-          <div class="flex shrink-0 flex-col gap-1">
-            <AppButton variant="ghost" class="!w-auto px-3" @click="openEdit(tpl)">ویرایش</AppButton>
-            <AppButton variant="danger" class="!w-auto px-3" @click="onDelete(tpl)">حذف</AppButton>
+          <div class="flex shrink-0 items-center gap-1">
+            <AppIconButton icon="pencil" label="ویرایش" @click="openEdit(tpl)" />
+            <AppIconButton icon="trash" label="حذف" variant="danger" @click="onDelete(tpl)" />
           </div>
         </div>
       </li>
@@ -105,6 +105,7 @@ import type { BusinessCategory, ServiceTemplate } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';
diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue
index fc41301..6618b4c 100644
--- a/src/views/UsersView.vue
+++ b/src/views/UsersView.vue
@@ -28,23 +28,23 @@
         :key="user.id"
         class="rounded-2xl border border-border bg-surface-2 p-4"
       >
-        <div class="flex items-start justify-between gap-2">
-          <div class="min-w-0 flex-1">
-            <p class="font-semibold text-text">{{ user.fullName ?? 'بدون نام' }}</p>
-            <p class="mt-0.5 text-sm text-muted" dir="ltr">{{ user.mobile }}</p>
-            <div class="mt-2 flex flex-wrap gap-2">
-              <AppBadge>{{ roleLabel(user.role) }}</AppBadge>
-              <AppBadge :tone="user.isActive ? 'success' : 'danger'">
-                {{ activeLabel(user.isActive) }}
-              </AppBadge>
-              <AppBadge :tone="user.hasPassword ? 'default' : 'warning'">
-                {{ user.hasPassword ? 'رمز دارد' : 'بدون رمز' }}
-              </AppBadge>
-            </div>
+        <div class="flex items-center justify-between gap-4">
+          <p class="min-w-0 truncate font-semibold text-text">
+            {{ user.fullName ?? 'بدون نام' }}
+          </p>
+          <p class="shrink-0 text-sm text-muted" dir="ltr">{{ user.mobile }}</p>
+        </div>
+        <div class="mt-2 flex items-center justify-between gap-2">
+          <div class="flex min-w-0 flex-wrap gap-2">
+            <AppBadge>{{ roleLabel(user.role) }}</AppBadge>
+            <AppBadge :tone="user.isActive ? 'success' : 'danger'">
+              {{ activeLabel(user.isActive) }}
+            </AppBadge>
+            <AppBadge :tone="user.hasPassword ? 'default' : 'warning'">
+              {{ user.hasPassword ? 'رمز دارد' : 'بدون رمز' }}
+            </AppBadge>
           </div>
-          <AppButton variant="ghost" class="!w-auto shrink-0 px-3" @click="openEdit(user)">
-            ویرایش
-          </AppButton>
+          <AppIconButton icon="pencil" label="ویرایش کاربر" @click="openEdit(user)" />
         </div>
       </li>
     </ul>
@@ -105,6 +105,7 @@ import type { User, UserRole } from '@/api/types';
 import { ApiError } from '@/api/client';
 import AppBadge from '@/components/ui/AppBadge.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import AppModal from '@/components/ui/AppModal.vue';
 import AppSelect from '@/components/ui/AppSelect.vue';