edit business

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>

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"

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';

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]"
     />

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(

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>

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>