CRM_Montzar/apps/web/src/components/person-assets/TahesabInvoiceSettingsModal.vue

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import type { TahesabInvoiceSettingsDto } from '@mento/shared';
import { useEscClose } from '@/lib/modal-stack';

const props = defineProps<{ open: boolean }>();
const emit = defineEmits<{
  'update:open': [value: boolean];
  saved: [value: TahesabInvoiceSettingsDto];
}>();

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');

const logoDataUrl = ref<string | null>(null);
const companyName = ref('');
const companySubtitle = ref('');
const address = ref('');
const phone = ref('');
const headerText = ref('');
const footerText = ref('');

useEscClose(
  () => props.open,
  () => close(),
);

function close() {
  emit('update:open', false);
}

function fill(dto: TahesabInvoiceSettingsDto) {
  logoDataUrl.value = dto.logoDataUrl;
  companyName.value = dto.companyName ?? '';
  companySubtitle.value = dto.companySubtitle ?? '';
  address.value = dto.address ?? '';
  phone.value = dto.phone ?? '';
  headerText.value = dto.headerText ?? '';
  footerText.value = dto.footerText ?? '';
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<TahesabInvoiceSettingsDto>(
      '/integrations/tahesab/invoice-settings',
    );
    fill(data);
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String(
          (e.response?.data as { message?: string })?.message ??
            'بارگذاری تنظیمات ناموفق بود.',
        )
      : 'بارگذاری تنظیمات ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function onLogoFile(ev: Event) {
  const input = ev.target as HTMLInputElement;
  const file = input.files?.[0];
  input.value = '';
  if (!file) return;
  if (!file.type.startsWith('image/')) {
    error.value = 'فقط فایل تصویر مجاز است.';
    return;
  }
  if (file.size > 400_000) {
    error.value = 'حجم تصویر حداکثر حدود ۴۰۰ کیلوبایت باشد.';
    return;
  }
  const reader = new FileReader();
  reader.onload = () => {
    const result = typeof reader.result === 'string' ? reader.result : '';
    if (!result.startsWith('data:image/')) {
      error.value = 'خواندن تصویر ناموفق بود.';
      return;
    }
    logoDataUrl.value = result;
    error.value = '';
  };
  reader.readAsDataURL(file);
}

function clearLogo() {
  logoDataUrl.value = null;
}

async function save() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const { data } = await api.patch<TahesabInvoiceSettingsDto>(
      '/integrations/tahesab/invoice-settings',
      {
        logoDataUrl: logoDataUrl.value,
        companyName: companyName.value,
        companySubtitle: companySubtitle.value,
        address: address.value,
        phone: phone.value,
        headerText: headerText.value,
        footerText: footerText.value,
      },
    );
    fill(data);
    ok.value = 'تنظیمات فاکتور ذخیره شد.';
    emit('saved', data);
  } catch (e) {
    error.value = axios.isAxiosError(e)
      ? String(
          (e.response?.data as { message?: string })?.message ??
            'ذخیره تنظیمات ناموفق بود.',
        )
      : 'ذخیره تنظیمات ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

watch(
  () => props.open,
  (open) => {
    if (open) {
      ok.value = '';
      error.value = '';
      void load();
    }
  },
);

onMounted(() => {
  if (props.open) void load();
});
</script>

<template>
  <div v-if="open" class="backdrop" @click.self="close">
    <div class="sheet" role="dialog" aria-modal="true" aria-label="تنظیمات فاکتور ته‌حساب">
      <header class="sheet-head">
        <div>
          <h3>تنظیمات فاکتور ته‌حساب</h3>
          <p class="muted">لوگو و متن‌های ثابت خروجی PDF اسناد — جدا از فاکتور CRM</p>
        </div>
        <button type="button" class="btn ghost" @click="close">بستن</button>
      </header>

      <p v-if="error" class="err">{{ error }}</p>
      <p v-if="ok" class="ok">{{ ok }}</p>
      <p v-if="loading" class="muted">در حال بارگذاری…</p>

      <div v-else class="grid">
        <label class="field logo-field">
          <span>لوگو</span>
          <div class="logo-row">
            <img v-if="logoDataUrl" :src="logoDataUrl" alt="لوگو" class="logo-preview" />
            <div class="logo-actions">
              <input type="file" accept="image/*" @change="onLogoFile" />
              <button v-if="logoDataUrl" type="button" class="btn ghost" @click="clearLogo">
                حذف لوگو
              </button>
            </div>
          </div>
        </label>

        <label class="field">
          <span>نام شرکت / فروشگاه</span>
          <input v-model="companyName" type="text" maxlength="200" />
        </label>
        <label class="field">
          <span>زیرعنوان</span>
          <input v-model="companySubtitle" type="text" maxlength="200" />
        </label>
        <label class="field">
          <span>آدرس</span>
          <input v-model="address" type="text" maxlength="500" />
        </label>
        <label class="field">
          <span>تلفن</span>
          <input v-model="phone" type="text" maxlength="80" dir="ltr" />
        </label>
        <label class="field full">
          <span>متن بالای فاکتور</span>
          <textarea v-model="headerText" rows="2" maxlength="1000" />
        </label>
        <label class="field full">
          <span>متن پایین فاکتور</span>
          <textarea v-model="footerText" rows="2" maxlength="1000" />
        </label>
      </div>

      <footer class="sheet-foot">
        <button type="button" class="btn" :disabled="saving || loading" @click="save">
          {{ saving ? '…' : 'ذخیره تنظیمات' }}
        </button>
      </footer>
    </div>
  </div>
</template>

<style scoped>
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 16px;
}
.sheet {
  width: min(640px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  background: var(--surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--line, #e5e7eb);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.sheet-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.muted {
  margin: 4px 0 0;
  color: var(--ink-secondary, #6b7280);
  font-size: 0.85rem;
}
.err {
  color: #b91c1c;
  margin: 0;
}
.ok {
  color: #047857;
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}
.field.full,
.logo-field {
  grid-column: 1 / -1;
}
.field input,
.field textarea {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface, #fff);
}
.logo-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.logo-preview {
  max-height: 64px;
  max-width: 140px;
  object-fit: contain;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: 4px;
  background: #fff;
}
.logo-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sheet-foot {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style>