webMontime/src/views/app/AppOwnerView.vue

<template>
  <WebAppLayout>
    <h1 class="mb-4 text-xl font-bold text-text">مدیریت کسب‌وکار</h1>

    <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"
    >
      {{ error }}
    </p>
    <p
      v-if="message"
      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"
    >
      {{ message }}
    </p>

    <div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>

    <div v-else-if="!business" class="rounded-2xl border border-dashed border-border p-6 text-center text-sm text-muted">
      کسب‌وکاری به حساب شما وصل نیست.
    </div>

    <form v-else class="space-y-4" @submit.prevent="onSave">
      <div class="rounded-2xl border border-border bg-surface-2 p-4">
        <p class="text-xs text-muted">دسته</p>
        <p class="mt-0.5 font-medium text-text">{{ business.category?.title ?? '—' }}</p>
        <span
          class="mt-2 inline-block rounded-lg px-2 py-0.5 text-xs"
          :class="business.isActive ? 'bg-green-500/15 text-green-700' : 'bg-amber-500/15 text-amber-700'"
        >
          {{ business.isActive ? 'فعال' : 'غیرفعال' }}
        </span>
      </div>

      <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />

      <div class="space-y-1.5">
        <label for="ownerDesc" class="block text-sm font-medium text-muted">توضیحات</label>
        <textarea
          id="ownerDesc"
          v-model="form.description"
          rows="3"
          class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
        />
      </div>

      <AppInput
        id="ownerPhone"
        v-model="form.contactPhone"
        label="تلفن"
        type="tel"
        inputmode="tel"
        ltr
      />
      <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />

      <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
    </form>
  </WebAppLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
import type { Business } from '@/api/types';
import { ApiError } from '@/api/client';
import AppButton from '@/components/ui/AppButton.vue';
import AppInput from '@/components/ui/AppInput.vue';
import WebAppLayout from '@/layouts/WebAppLayout.vue';

const business = ref<Business | null>(null);
const loading = ref(true);
const saving = ref(false);
const error = ref('');
const message = ref('');

const form = ref({
  title: '',
  description: '',
  contactPhone: '',
  address: '',
});

onMounted(async () => {
  loading.value = true;
  error.value = '';
  try {
    const list = await fetchMyBusinesses();
    business.value = list[0] ?? null;
    if (business.value) {
      form.value = {
        title: business.value.title,
        description: business.value.description ?? '',
        contactPhone: business.value.contactPhone ?? '',
        address: business.value.address ?? '',
      };
    }
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'خطا در بارگذاری';
  } finally {
    loading.value = false;
  }
});

async function onSave() {
  if (!business.value) return;
  saving.value = true;
  error.value = '';
  message.value = '';
  try {
    business.value = await updateBusiness(business.value.id, {
      title: form.value.title.trim(),
      description: form.value.description.trim() || null,
      contactPhone: form.value.contactPhone.trim() || null,
      address: form.value.address.trim() || null,
    });
    message.value = 'ذخیره شد.';
  } catch (e) {
    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
  } finally {
    saving.value = false;
  }
}
</script>