CRM_Montzar/apps/web/src/views/CurrencySettingsView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import { CURRENCY_OPTIONS, formatMoney } from '@/lib/money';
import type { OrganizationDto, UpdateOrgCurrenciesRequest } from '@mento/shared';

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const org = ref<OrganizationDto | null>(null);

const baseCurrency = ref('IRR');
const enabled = ref<string[]>(['IRR', 'USD', 'EUR']);
const rates = ref<Record<string, string>>({});

const rateCurrencies = computed(() =>
  enabled.value.filter((c) => c !== baseCurrency.value),
);

function toggleCurrency(code: string) {
  if (code === baseCurrency.value) return;
  if (enabled.value.includes(code)) {
    enabled.value = enabled.value.filter((c) => c !== code);
  } else {
    enabled.value = [...enabled.value, code];
    if (!rates.value[code]) rates.value[code] = '';
  }
}

function onBaseChange() {
  if (!enabled.value.includes(baseCurrency.value)) {
    enabled.value = [baseCurrency.value, ...enabled.value];
  }
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<OrganizationDto>('/organizations/current');
    org.value = data;
    baseCurrency.value = data.baseCurrency || 'IRR';
    enabled.value = data.enabledCurrencies?.length
      ? [...data.enabledCurrencies]
      : ['IRR'];
    const next: Record<string, string> = {};
    for (const r of data.exchangeRates ?? []) {
      next[r.currency] = String(r.rateToBase);
    }
    rates.value = next;
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری تنظیمات ارز ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function save() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const body: UpdateOrgCurrenciesRequest = {
      baseCurrency: baseCurrency.value,
      enabledCurrencies: enabled.value,
      rates: rateCurrencies.value
        .filter((c) => rates.value[c] && Number(rates.value[c]) > 0)
        .map((c) => ({
          currency: c,
          rateToBase: Number(rates.value[c]),
        })),
    };
    const { data } = await api.patch<OrganizationDto>(
      '/organizations/current/currencies',
      body,
    );
    org.value = data;
    ok.value = 'تنظیمات ارز ذخیره شد.';
  } catch (e) {
    if (axios.isAxiosError(e)) {
      const msg = (e.response?.data as { message?: string | string[] })?.message;
      error.value = Array.isArray(msg)
        ? msg.join('، ')
        : (msg ?? 'ذخیره ناموفق بود');
    } else {
      error.value = 'ذخیره ناموفق بود';
    }
  } finally {
    saving.value = false;
  }
}

onMounted(load);
</script>

<template>
  <section class="page">
    <header>
      <p class="eyebrow">تنظیمات</p>
      <h1>ارزها و نرخ تبدیل</h1>
      <p class="lead">
        ارز پایه برای جمع‌ها و پیش‌بینی استفاده می‌شود. نرخ یعنی چند واحد ارز پایه
        برابر با ۱ واحد ارز خارجی است.
      </p>
    </header>

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

    <form v-if="!loading" class="card" @submit.prevent="save">
      <div class="field">
        <label>ارز پایه</label>
        <select v-model="baseCurrency" @change="onBaseChange">
          <option
            v-for="c in CURRENCY_OPTIONS"
            :key="c.code"
            :value="c.code"
          >
            {{ c.labelFa }} ({{ c.code }})
          </option>
        </select>
      </div>

      <div class="field">
        <label>ارزهای فعال</label>
        <div class="chips">
          <label
            v-for="c in CURRENCY_OPTIONS"
            :key="c.code"
            class="chip"
            :class="{ on: enabled.includes(c.code), locked: c.code === baseCurrency }"
          >
            <input
              type="checkbox"
              :checked="enabled.includes(c.code)"
              :disabled="c.code === baseCurrency"
              @change="toggleCurrency(c.code)"
            />
            {{ c.labelFa }}
          </label>
        </div>
      </div>

      <div v-if="rateCurrencies.length" class="rates">
        <h2>نرخ به {{ baseCurrency }}</h2>
        <div v-for="code in rateCurrencies" :key="code" class="rate-row">
          <span>۱ {{ code }} =</span>
          <input
            v-model="rates[code]"
            type="number"
            min="0.000001"
            step="any"
            :placeholder="`نرخ به ${baseCurrency}`"
          />
          <span>{{ baseCurrency }}</span>
        </div>
        <p v-if="rates.USD" class="muted example">
          مثال: ۱ دلار ≈
          {{ formatMoney(Number(rates.USD) || 0, baseCurrency) }}
        </p>
      </div>

      <button class="btn" type="submit" :disabled="saving">
        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
      </button>
    </form>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
  max-width: 640px;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}

h1 {
  margin: 0.2rem 0;
}

.lead,
.muted {
  color: var(--muted);
}

.card {
  display: grid;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

label {
  color: var(--muted);
  font-size: 0.9rem;
}

select,
input[type='number'] {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  background: #fff;
  width: 100%;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  color: inherit;
  font-size: 0.9rem;
}

.chip.on {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.chip.locked {
  opacity: 0.85;
}

.rates {
  display: grid;
  gap: 0.55rem;
}

.rates h2 {
  margin: 0;
  font-size: 1rem;
}

.rate-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.error {
  color: #b42318;
}

.ok {
  color: var(--accent);
  font-weight: 600;
}
</style>