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 UiIcon from '@/components/UiIcon.vue';
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 class="head-copy">
        <h1>باشگاه مشتریان</h1>
        <p class="lead">امتیاز و سطح وفاداری پایه برای اشخاص.</p>
      </div>
      <button class="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 || '#cbd5e1' }" />
          <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 primary" type="submit" :disabled="saving">
          {{ editingTierId ? 'به‌روزرسانی سطح' : 'سطح جدید' }}
        </button>
        <button
          v-if="editingTierId"
          class="btn ghost"
          type="button"
          @click="resetTierForm"
        >
          انصراف
        </button>
      </form>
    </section>

    <section class="panel">
      <div class="row">
        <h2>اعضا</h2>
        <form class="search" @submit.prevent="load">
          <UiIcon name="search" :size="18" />
          <input v-model="q" type="search" placeholder="جستجو در اعضا…" />
        </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 primary" 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 || '#cbd5e1' }"
                >
                  {{ 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 empty-msg">عضوی نیست.</p>
      </div>
    </section>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
  min-width: 0;
  overflow-x: clip;
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.head-copy {
  min-width: 0;
}

h1 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 800;
}

h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #0f172a;
}

.lead,
.muted {
  margin: 0;
  color: #64748b;
}

.panel {
  border-radius: 18px;
  padding: 1rem 1.05rem;
  background: #fff;
  display: grid;
  gap: 0.85rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 42px;
  padding: 0.55rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
}

.btn.primary {
  background: #14b8a6;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
}

.btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.ghost {
  background: #fff;
  color: #0f766e;
  border-color: #99f6e4;
}

.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.tiers li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border-radius: 12px;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

.tier-form,
.adjust,
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.row {
  justify-content: space-between;
}

.search {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 0.85rem;
  color: #94a3b8;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0.75rem 0;
  font: inherit;
}

input,
select {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  background: #fff;
  min-width: 0;
}

.table-wrap {
  overflow-x: auto;
  min-width: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

th,
td {
  text-align: right;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.92rem;
}

th {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 700;
}

.tier-pill {
  display: inline-block;
  border: 1px solid;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f766e;
  background: #f0fdfa;
}

.link {
  background: none;
  border: none;
  color: #0f766e;
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-weight: 700;
}

.danger {
  color: #b91c1c;
}

.error {
  margin: 0;
  color: #b91c1c;
}

.ok {
  margin: 0;
  color: #047857;
}

.empty-msg {
  padding: 0.75rem 0;
  text-align: center;
}

@media (max-width: 900px) {
  .row {
    flex-direction: column;
    align-items: stretch;
  }

  .search {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .page-head {
    flex-direction: column;
  }

  .page-head .btn.ghost {
    width: 100%;
  }

  .tier-form,
  .adjust {
    flex-direction: column;
    align-items: stretch;
  }

  .tier-form input,
  .tier-form select,
  .adjust input,
  .adjust select,
  .tier-form .btn,
  .adjust .btn {
    width: 100%;
  }
}
</style>