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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings } from '@/lib/roles';
import type {
  CreateLoyaltyTierRequest,
  LoyaltyMemberDto,
  LoyaltyTierDto,
} from '@mento/shared';

const auth = useAuthStore();
const canManage = computed(() => canManageSettings(auth.user?.role));

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const q = ref('');
const tiers = ref<LoyaltyTierDto[]>([]);
const members = ref<LoyaltyMemberDto[]>([]);

const tierName = ref('');
const tierMin = ref(0);
const tierColor = ref('');
const editingTierId = ref<string | null>(null);

const adjustPersonId = ref('');
const adjustDelta = ref(100);

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const [tRes, mRes] = await Promise.all([
      api.get<LoyaltyTierDto[]>('/loyalty/tiers'),
      api.get<LoyaltyMemberDto[]>('/loyalty/members', {
        params: q.value.trim() ? { q: q.value.trim() } : undefined,
      }),
    ]);
    tiers.value = tRes.data;
    members.value = mRes.data;
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری باشگاه ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

function startEditTier(t: LoyaltyTierDto) {
  editingTierId.value = t.id;
  tierName.value = t.name;
  tierMin.value = t.minPoints;
  tierColor.value = t.color ?? '';
  ok.value = '';
}

function resetTierForm() {
  editingTierId.value = null;
  tierName.value = '';
  tierMin.value = 0;
  tierColor.value = '';
}

async function saveTier() {
  if (!canManage.value || tierName.value.trim().length < 2) return;
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const body: CreateLoyaltyTierRequest = {
      name: tierName.value.trim(),
      minPoints: Math.max(0, Math.floor(tierMin.value)),
      color: tierColor.value.trim() || null,
    };
    if (editingTierId.value) {
      await api.patch(`/loyalty/tiers/${editingTierId.value}`, body);
      ok.value = 'سطح به‌روز شد.';
    } else {
      await api.post('/loyalty/tiers', body);
      ok.value = 'سطح ساخته شد.';
    }
    resetTierForm();
    await load();
  } catch {
    error.value = 'ذخیره سطح ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

async function removeTier(id: string) {
  if (!canManage.value || !confirm('سطح حذف شود؟')) return;
  try {
    await api.delete(`/loyalty/tiers/${id}`);
    await load();
  } catch {
    error.value = 'حذف سطح ناموفق بود.';
  }
}

async function adjustPoints() {
  if (!adjustPersonId.value || !adjustDelta.value) return;
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    await api.post(`/loyalty/members/${adjustPersonId.value}/adjust`, {
      delta: adjustDelta.value,
    });
    ok.value = 'امتیاز به‌روز شد.';
    await load();
  } catch {
    error.value = 'تغییر امتیاز ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

onMounted(load);
</script>

<template>
  <section class="page">
    <header class="page-head">
      <div>
        <p class="eyebrow">مشتریان</p>
        <h1>باشگاه مشتریان</h1>
        <p class="lead">امتیاز و سطح وفاداری پایه برای اشخاص.</p>
      </div>
      <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
        بروزرسانی
      </button>
    </header>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-if="ok" class="ok">{{ ok }}</p>

    <section class="panel">
      <h2>سطوح</h2>
      <ul class="tiers">
        <li v-for="t in tiers" :key="t.id">
          <span class="swatch" :style="{ background: t.color || '#ccc' }" />
          <strong>{{ t.name }}</strong>
          <span class="muted">از {{ t.minPoints }} امتیاز</span>
          <span class="muted">{{ t.memberCount ?? 0 }} عضو</span>
          <template v-if="canManage">
            <button class="link" type="button" @click="startEditTier(t)">ویرایش</button>
            <button class="link danger" type="button" @click="removeTier(t.id)">حذف</button>
          </template>
        </li>
      </ul>

      <form v-if="canManage" class="tier-form" @submit.prevent="saveTier">
        <input v-model="tierName" type="text" placeholder="نام سطح" required minlength="2" />
        <input v-model.number="tierMin" type="number" min="0" placeholder="حداقل امتیاز" />
        <input v-model="tierColor" type="text" placeholder="رنگ (مثلاً #d4af37)" />
        <button class="btn" type="submit" :disabled="saving">
          {{ editingTierId ? 'به‌روزرسانی سطح' : 'سطح جدید' }}
        </button>
        <button
          v-if="editingTierId"
          class="btn btn-ghost"
          type="button"
          @click="resetTierForm"
        >
          انصراف
        </button>
      </form>
    </section>

    <section class="panel">
      <div class="row">
        <h2>اعضا</h2>
        <form class="search" @submit.prevent="load">
          <input v-model="q" type="search" placeholder="جستجو…" />
          <button class="btn btn-ghost" type="submit">جستجو</button>
        </form>
      </div>

      <form class="adjust" @submit.prevent="adjustPoints">
        <select v-model="adjustPersonId" required>
          <option value="" disabled>انتخاب شخص</option>
          <option v-for="m in members" :key="m.id" :value="m.id">
            {{ m.fullName }} ({{ m.loyaltyPoints }})
          </option>
        </select>
        <input v-model.number="adjustDelta" type="number" step="1" />
        <button class="btn" type="submit" :disabled="saving">تغییر امتیاز</button>
      </form>

      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>نام</th>
              <th>امتیاز</th>
              <th>سطح</th>
              <th>شرکت</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="m in members" :key="m.id">
              <td>{{ m.fullName }}</td>
              <td>{{ m.loyaltyPoints }}</td>
              <td>
                <span
                  v-if="m.loyaltyTier"
                  class="tier-pill"
                  :style="{ borderColor: m.loyaltyTier.color || '#ccc' }"
                >
                  {{ m.loyaltyTier.name }}
                </span>
                <span v-else class="muted">—</span>
              </td>
              <td>{{ m.company?.name || '—' }}</td>
            </tr>
          </tbody>
        </table>
        <p v-if="!members.length && !loading" class="muted">عضوی نیست.</p>
      </div>
    </section>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
}
.page-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}
h1 {
  margin: 0.2rem 0;
}
.lead,
.muted {
  color: var(--muted);
}
.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  background: #fff;
  display: grid;
  gap: 0.75rem;
}
h2 {
  margin: 0;
  font-size: 1.1rem;
}
.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.tiers li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}
.tier-form,
.adjust,
.search,
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.row {
  justify-content: space-between;
}
input,
select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  font: inherit;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: right;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.tier-pill {
  display: inline-block;
  border: 1px solid;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.82rem;
}
.link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.danger {
  color: #b42318;
}
.error {
  color: #b42318;
}
.ok {
  color: #067647;
}
</style>