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

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { api } from '@/lib/api';
import type {
  AutomationAction,
  AutomationRuleDto,
  AutomationTrigger,
  CreateAutomationRuleRequest,
} from '@mento/shared';

const AUTOMATION_TRIGGER_LABELS: Record<AutomationTrigger, string> = {
  deal_won: 'معامله برنده شد',
  ticket_resolved: 'تیکت حل شد',
};

const AUTOMATION_ACTION_LABELS: Record<AutomationAction, string> = {
  create_activity: 'ساخت فعالیت',
  create_notification: 'ارسال اعلان',
  add_loyalty_points: 'افزودن امتیاز باشگاه',
};

const loading = ref(false);
const saving = ref(false);
const error = ref('');
const ok = ref('');
const items = ref<AutomationRuleDto[]>([]);

const editingId = ref<string | null>(null);
const name = ref('');
const trigger = ref<AutomationTrigger>('deal_won');
const action = ref<AutomationAction>('create_activity');
const isActive = ref(true);
const title = ref('');
const body = ref('');
const points = ref(100);

const triggers = Object.keys(AUTOMATION_TRIGGER_LABELS) as AutomationTrigger[];
const actions = Object.keys(AUTOMATION_ACTION_LABELS) as AutomationAction[];

function resetForm() {
  editingId.value = null;
  name.value = '';
  trigger.value = 'deal_won';
  action.value = 'create_activity';
  isActive.value = true;
  title.value = '';
  body.value = '';
  points.value = 100;
}

function startEdit(row: AutomationRuleDto) {
  editingId.value = row.id;
  name.value = row.name;
  trigger.value = row.trigger;
  action.value = row.action;
  isActive.value = row.isActive;
  title.value = row.config.title ?? '';
  body.value = row.config.body ?? '';
  points.value = row.config.points ?? 100;
  ok.value = '';
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<AutomationRuleDto[]>('/automations');
    items.value = data;
  } catch (e) {
    if (axios.isAxiosError(e) && !e.response) {
      error.value = 'اتصال به API برقرار نشد.';
    } else {
      error.value = 'بارگذاری اتوماسیون ناموفق بود.';
    }
  } finally {
    loading.value = false;
  }
}

async function save() {
  if (name.value.trim().length < 2) {
    error.value = 'نام قانون را وارد کنید.';
    return;
  }
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const payload: CreateAutomationRuleRequest = {
      name: name.value.trim(),
      trigger: trigger.value,
      action: action.value,
      isActive: isActive.value,
      config: {
        title: title.value.trim() || undefined,
        body: body.value.trim() || undefined,
        points:
          action.value === 'add_loyalty_points'
            ? Math.max(1, Math.floor(points.value))
            : undefined,
      },
    };
    if (editingId.value) {
      await api.patch(`/automations/${editingId.value}`, payload);
      ok.value = 'قانون به‌روز شد.';
    } else {
      await api.post('/automations', payload);
      ok.value = 'قانون ساخته شد.';
    }
    resetForm();
    await load();
  } catch {
    error.value = 'ذخیره قانون ناموفق بود.';
  } finally {
    saving.value = false;
  }
}

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

async function toggleActive(row: AutomationRuleDto) {
  try {
    await api.patch(`/automations/${row.id}`, { isActive: !row.isActive });
    await load();
  } catch {
    error.value = 'تغییر وضعیت ناموفق بود.';
  }
}

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>

    <form class="panel form" @submit.prevent="save">
      <h2>{{ editingId ? 'ویرایش قانون' : 'قانون جدید' }}</h2>
      <label>
        نام
        <input v-model="name" type="text" required minlength="2" maxlength="120" />
      </label>
      <div class="grid2">
        <label>
          اگر (محرک)
          <select v-model="trigger">
            <option v-for="t in triggers" :key="t" :value="t">
              {{ AUTOMATION_TRIGGER_LABELS[t] }}
            </option>
          </select>
        </label>
        <label>
          آنگاه (عمل)
          <select v-model="action">
            <option v-for="a in actions" :key="a" :value="a">
              {{ AUTOMATION_ACTION_LABELS[a] }}
            </option>
          </select>
        </label>
      </div>
      <label>
        عنوان / متن عمل
        <input v-model="title" type="text" maxlength="200" placeholder="اختیاری" />
      </label>
      <label>
        توضیح
        <textarea v-model="body" rows="3" maxlength="1000" placeholder="اختیاری" />
      </label>
      <label v-if="action === 'add_loyalty_points'">
        امتیاز
        <input v-model.number="points" type="number" min="1" />
      </label>
      <label class="check">
        <input v-model="isActive" type="checkbox" />
        فعال
      </label>
      <div class="actions">
        <button class="btn" type="submit" :disabled="saving">
          {{ saving ? 'در حال ذخیره…' : editingId ? 'به‌روزرسانی' : 'ساخت' }}
        </button>
        <button
          v-if="editingId"
          class="btn btn-ghost"
          type="button"
          @click="resetForm"
        >
          انصراف
        </button>
      </div>
    </form>

    <section class="panel">
      <h2>قوانین</h2>
      <ul class="list">
        <li v-for="row in items" :key="row.id">
          <div>
            <strong>{{ row.name }}</strong>
            <p class="muted">
              اگر {{ AUTOMATION_TRIGGER_LABELS[row.trigger] }} →
              {{ AUTOMATION_ACTION_LABELS[row.action] }}
              <span v-if="!row.isActive"> · غیرفعال</span>
            </p>
          </div>
          <div class="row-actions">
            <button class="link" type="button" @click="toggleActive(row)">
              {{ row.isActive ? 'غیرفعال' : 'فعال' }}
            </button>
            <button class="link" type="button" @click="startEdit(row)">ویرایش</button>
            <button class="link danger" type="button" @click="removeRule(row.id)">
              حذف
            </button>
          </div>
        </li>
      </ul>
      <p v-if="!items.length && !loading" class="muted">هنوز قانونی نیست.</p>
    </section>
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
  max-width: 860px;
}
.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;
}
.form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}
input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--ink);
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.check {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
}
.actions,
.row-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.65rem;
}
.link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.danger {
  color: #b42318;
}
.error {
  color: #b42318;
}
.ok {
  color: #067647;
}
@media (max-width: 640px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}
</style>