Add project board, loyalty club, and if/then automations.

Separate modules for post-sales kanban, person points/tiers, and deal-won/ticket-resolved rules without overlapping the sales pipeline.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/layouts/AppLayout.vue

@@ -190,6 +190,8 @@ onUnmounted(() => {
         <RouterLink to="/activities">فعالیت‌ها</RouterLink>
         <RouterLink to="/activities/calendar">تقویم فعالیت‌ها</RouterLink>
         <RouterLink to="/pipeline">کاریز فروش</RouterLink>
+        <RouterLink to="/projects">کاریز پروژه</RouterLink>
+        <RouterLink to="/loyalty">باشگاه مشتریان</RouterLink>
         <RouterLink to="/sales/forecast">هدف و پیش‌بینی</RouterLink>
         <RouterLink to="/reports">گزارشات</RouterLink>
         <RouterLink to="/tickets">تیکت‌ها</RouterLink>
@@ -199,6 +201,7 @@ onUnmounted(() => {
         <RouterLink to="/notes">یادداشت‌ها</RouterLink>
         <template v-if="canSettings">
           <RouterLink to="/settings/team">تیم و نقش‌ها</RouterLink>
+          <RouterLink to="/settings/automations">اتوماسیون</RouterLink>
           <RouterLink to="/settings/lead-forms">فرم‌ساز سرنخ</RouterLink>
           <RouterLink to="/settings/custom-fields">فیلدهای سفارشی</RouterLink>
           <RouterLink to="/settings/products">محصولات</RouterLink>

apps/web/src/router/index.ts

@@ -118,6 +118,26 @@ export const router = createRouter({
           name: 'pipeline',
           component: () => import('@/views/PipelineBoardView.vue'),
         },
+        {
+          path: 'projects',
+          name: 'projects',
+          component: () => import('@/views/ProjectBoardView.vue'),
+        },
+        {
+          path: 'project-cards/new',
+          name: 'project-card-new',
+          component: () => import('@/views/ProjectCardFormView.vue'),
+        },
+        {
+          path: 'project-cards/:id',
+          name: 'project-card-detail',
+          component: () => import('@/views/ProjectCardFormView.vue'),
+        },
+        {
+          path: 'loyalty',
+          name: 'loyalty',
+          component: () => import('@/views/LoyaltyClubView.vue'),
+        },
         {
           path: 'deals/new',
           name: 'deal-new',
@@ -138,6 +158,12 @@ export const router = createRouter({
           name: 'notes',
           component: () => import('@/views/NotesView.vue'),
         },
+        {
+          path: 'settings/automations',
+          name: 'automations',
+          component: () => import('@/views/AutomationsSettingsView.vue'),
+          meta: { roles: ['owner', 'admin'] as UserRole[] },
+        },
         {
           path: 'settings/lead-forms',
           name: 'lead-forms',

apps/web/src/views/AutomationsSettingsView.vue

@@ -0,0 +1,347 @@
+<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>

apps/web/src/views/LoyaltyClubView.vue

@@ -0,0 +1,341 @@
+<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>

apps/web/src/views/PersonFormView.vue

@@ -51,6 +51,8 @@ const notes = ref('');
 const companyId = ref('');
 
 const customFields = ref<Record<string, unknown>>({});
+const loyaltyPoints = ref(0);
+const loyaltyTierName = ref('');
 
 
 
@@ -72,6 +74,8 @@ function fill(p: PersonDto) {
 
   companyId.value = p.company?.id ?? '';
   customFields.value = { ...(p.customFields ?? {}) };
+  loyaltyPoints.value = p.loyaltyPoints ?? 0;
+  loyaltyTierName.value = p.loyaltyTier?.name ?? '';
 
 }
 
@@ -318,6 +322,15 @@ onMounted(load);
 
         </div>
 
+        <div v-if="!isNew" class="field wide loyalty-box">
+          <p class="muted">باشگاه مشتریان</p>
+          <p>
+            {{ loyaltyPoints }} امتیاز
+            <span v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</span>
+          </p>
+          <RouterLink :to="{ name: 'loyalty' }">مدیریت باشگاه</RouterLink>
+        </div>
+
       </div>
 
 

apps/web/src/views/ProjectBoardView.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import { useAuthStore } from '@/stores/auth';
+import type {
+  ProjectBoardBoardDto,
+  ProjectBoardDto,
+  ProjectCardDto,
+} from '@mento/shared';
+import { canManageSettings } from '@/lib/roles';
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+const canCreateBoard = computed(() => canManageSettings(auth.user?.role));
+const loading = ref(false);
+const saving = ref(false);
+const error = ref('');
+const board = ref<ProjectBoardBoardDto | null>(null);
+const boards = ref<ProjectBoardDto[]>([]);
+const draggingId = ref<string | null>(null);
+const dropStageId = ref<string | null>(null);
+const showCreate = ref(false);
+const newName = ref('');
+
+const selectedBoardId = computed(() => {
+  const q = route.query.boardId;
+  if (typeof q === 'string' && q) return q;
+  return board.value?.board.id ?? '';
+});
+
+const cardCount = computed(
+  () => board.value?.stages.reduce((n, s) => n + s.cards.length, 0) ?? 0,
+);
+
+async function loadBoards() {
+  const { data } = await api.get<ProjectBoardDto[]>('/project-boards');
+  boards.value = data;
+}
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    await loadBoards();
+    const boardId =
+      typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
+    const { data } = await api.get<ProjectBoardBoardDto>('/project-boards/board', {
+      params: boardId ? { boardId } : undefined,
+    });
+    board.value = data;
+    if (!boardId || boardId !== data.board.id) {
+      await router.replace({
+        name: 'projects',
+        query: { boardId: data.board.id },
+      });
+    }
+  } catch (e) {
+    if (axios.isAxiosError(e) && !e.response) {
+      error.value = 'اتصال به API برقرار نشد.';
+    } else {
+      error.value = 'بارگذاری برد پروژه ناموفق بود.';
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onSelectBoard(event: Event) {
+  const id = (event.target as HTMLSelectElement).value;
+  void router.replace({ name: 'projects', query: { boardId: id } });
+}
+
+async function createBoard() {
+  const name = newName.value.trim();
+  if (name.length < 2 || saving.value) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.post<ProjectBoardDto>('/project-boards', { name });
+    newName.value = '';
+    showCreate.value = false;
+    await router.replace({ name: 'projects', query: { boardId: data.id } });
+  } catch {
+    error.value = 'ساخت برد ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+function onDragStart(card: ProjectCardDto, event: DragEvent) {
+  draggingId.value = card.id;
+  event.dataTransfer?.setData('text/plain', card.id);
+  event.dataTransfer!.effectAllowed = 'move';
+}
+
+function onDragEnd() {
+  draggingId.value = null;
+  dropStageId.value = null;
+}
+
+function onDragOver(stageId: string, event: DragEvent) {
+  event.preventDefault();
+  dropStageId.value = stageId;
+  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+}
+
+async function onDrop(stageId: string, event: DragEvent) {
+  event.preventDefault();
+  const cardId = event.dataTransfer?.getData('text/plain') || draggingId.value;
+  dropStageId.value = null;
+  draggingId.value = null;
+  if (!cardId || !board.value) return;
+
+  const current = board.value.stages.find((s) =>
+    s.cards.some((c) => c.id === cardId),
+  );
+  if (current?.id === stageId) return;
+
+  try {
+    await api.patch(`/project-cards/${cardId}/move`, { stageId });
+    await load();
+  } catch {
+    error.value = 'جابه‌جایی کارت ناموفق بود.';
+  }
+}
+
+function openCard(id: string) {
+  void router.push({ name: 'project-card-detail', params: { id } });
+}
+
+watch(
+  () => route.query.boardId,
+  (id, prev) => {
+    if (id === prev) return;
+    void load();
+  },
+);
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page">
+    <header class="page-head">
+      <div>
+        <p class="eyebrow">پس‌ازفروش</p>
+        <h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
+        <p class="lead">
+          کارهای داخلی و تحویل را روی برد جابه‌جا کنید.
+          <span v-if="board">{{ cardCount }} کارت</span>
+        </p>
+      </div>
+      <div class="actions">
+        <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
+          بروزرسانی
+        </button>
+        <RouterLink
+          class="btn"
+          :to="{
+            name: 'project-card-new',
+            query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
+          }"
+        >
+          کارت جدید
+        </RouterLink>
+      </div>
+    </header>
+
+    <div class="pipeline-bar">
+      <label class="picker">
+        <span>برد</span>
+        <select
+          :value="selectedBoardId"
+          :disabled="loading || !boards.length"
+          @change="onSelectBoard"
+        >
+          <option v-for="b in boards" :key="b.id" :value="b.id">
+            {{ b.name }}{{ b.isDefault ? ' (پیش‌فرض)' : '' }}
+          </option>
+        </select>
+      </label>
+      <button
+        v-if="canCreateBoard"
+        class="btn btn-ghost"
+        type="button"
+        @click="showCreate = !showCreate"
+      >
+        برد جدید
+      </button>
+    </div>
+
+    <form
+      v-if="showCreate && canCreateBoard"
+      class="create-box"
+      @submit.prevent="createBoard"
+    >
+      <input
+        v-model="newName"
+        type="text"
+        placeholder="نام برد جدید…"
+        maxlength="120"
+        required
+        minlength="2"
+      />
+      <button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
+        {{ saving ? 'در حال ساخت…' : 'ساخت' }}
+      </button>
+      <button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</button>
+    </form>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading && !board" class="muted">در حال بارگذاری…</p>
+
+    <div v-if="board" class="board">
+      <div
+        v-for="stage in board.stages"
+        :key="stage.id"
+        class="column"
+        :class="{ drop: dropStageId === stage.id }"
+        @dragover="onDragOver(stage.id, $event)"
+        @dragleave="dropStageId = null"
+        @drop="onDrop(stage.id, $event)"
+      >
+        <div class="column-head">
+          <h2>{{ stage.name }}</h2>
+          <span>{{ stage.cards.length }}</span>
+        </div>
+        <div class="cards">
+          <article
+            v-for="card in stage.cards"
+            :key="card.id"
+            class="card"
+            :class="{ dragging: draggingId === card.id }"
+            draggable="true"
+            @dragstart="onDragStart(card, $event)"
+            @dragend="onDragEnd"
+            @dblclick="openCard(card.id)"
+          >
+            <h3 @click="openCard(card.id)">{{ card.title }}</h3>
+            <p v-if="card.person || card.company" class="meta">
+              <span v-if="card.person">{{ card.person.fullName }}</span>
+              <span v-if="card.person && card.company"> · </span>
+              <span v-if="card.company">{{ card.company.name }}</span>
+            </p>
+            <p v-if="card.deal" class="meta">معامله: {{ card.deal.title }}</p>
+            <p v-if="card.owner" class="meta">مسئول: {{ card.owner.fullName }}</p>
+          </article>
+          <p v-if="!stage.cards.length" class="empty">خالی</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.eyebrow {
+  margin: 0;
+  color: var(--accent);
+  font-weight: 700;
+}
+h1 {
+  margin: 0.2rem 0;
+  font-size: 1.85rem;
+}
+.lead,
+.muted {
+  color: var(--muted);
+}
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pipeline-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  align-items: center;
+}
+.picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1 1 200px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+.picker select {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.65rem 0.85rem;
+  background: #fff;
+  font: inherit;
+}
+.create-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+.create-box input {
+  flex: 1 1 180px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.65rem 0.85rem;
+  font: inherit;
+}
+.error {
+  color: #b42318;
+}
+.board {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 280px);
+  gap: 0.85rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+}
+.column {
+  background: #f6f7f9;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 0.75rem;
+  min-height: 320px;
+}
+.column.drop {
+  outline: 2px dashed var(--accent);
+}
+.column-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.65rem;
+}
+.column-head h2 {
+  margin: 0;
+  font-size: 1rem;
+}
+.column-head span {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+.cards {
+  display: grid;
+  gap: 0.55rem;
+}
+.card {
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.7rem 0.8rem;
+  cursor: grab;
+}
+.card.dragging {
+  opacity: 0.55;
+}
+.card h3 {
+  margin: 0 0 0.35rem;
+  font-size: 0.98rem;
+  cursor: pointer;
+}
+.meta {
+  margin: 0.15rem 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+.empty {
+  margin: 0.5rem 0 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+  text-align: center;
+}
+</style>

apps/web/src/views/ProjectCardFormView.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import type { ProjectCardDto } from '@mento/shared';
+
+const route = useRoute();
+const router = useRouter();
+const isNew = computed(() => route.name === 'project-card-new');
+
+const loading = ref(false);
+const saving = ref(false);
+const error = ref('');
+const title = ref('');
+const notes = ref('');
+const cardId = ref('');
+
+async function load() {
+  if (isNew.value) return;
+  const id = String(route.params.id || '');
+  if (!id) return;
+  loading.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.get<ProjectCardDto>(`/project-cards/${id}`);
+    cardId.value = data.id;
+    title.value = data.title;
+    notes.value = data.notes ?? '';
+  } catch (e) {
+    if (axios.isAxiosError(e) && !e.response) {
+      error.value = 'اتصال به API برقرار نشد.';
+    } else {
+      error.value = 'بارگذاری کارت ناموفق بود.';
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function save() {
+  if (title.value.trim().length < 2 || saving.value) return;
+  saving.value = true;
+  error.value = '';
+  try {
+    if (isNew.value) {
+      const boardId =
+        typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
+      const { data } = await api.post<ProjectCardDto>('/project-cards', {
+        title: title.value.trim(),
+        notes: notes.value.trim() || undefined,
+        boardId,
+      });
+      await router.replace({ name: 'project-card-detail', params: { id: data.id } });
+    } else {
+      await api.patch(`/project-cards/${cardId.value}`, {
+        title: title.value.trim(),
+        notes: notes.value.trim() || null,
+      });
+    }
+  } catch {
+    error.value = 'ذخیره کارت ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function removeCard() {
+  if (isNew.value || !cardId.value) return;
+  if (!confirm('کارت حذف شود؟')) return;
+  try {
+    await api.delete(`/project-cards/${cardId.value}`);
+    await router.push({ name: 'projects' });
+  } catch {
+    error.value = 'حذف کارت ناموفق بود.';
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <section class="page">
+    <header class="page-head">
+      <div>
+        <RouterLink class="back" :to="{ name: 'projects' }">← بازگشت به برد</RouterLink>
+        <h1>{{ isNew ? 'کارت جدید' : 'ویرایش کارت' }}</h1>
+      </div>
+    </header>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
+
+    <form v-else class="form" @submit.prevent="save">
+      <label>
+        عنوان
+        <input v-model="title" type="text" required minlength="2" maxlength="200" />
+      </label>
+      <label>
+        یادداشت
+        <textarea v-model="notes" rows="5" maxlength="4000" />
+      </label>
+      <div class="actions">
+        <button class="btn" type="submit" :disabled="saving || title.trim().length < 2">
+          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+        </button>
+        <button
+          v-if="!isNew"
+          class="btn btn-ghost danger"
+          type="button"
+          @click="removeCard"
+        >
+          حذف
+        </button>
+      </div>
+    </form>
+  </section>
+</template>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 1rem;
+  max-width: 640px;
+}
+.back {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+h1 {
+  margin: 0.35rem 0 0;
+}
+.form {
+  display: grid;
+  gap: 0.85rem;
+}
+label {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+input,
+textarea {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.7rem 0.85rem;
+  font: inherit;
+  color: var(--ink);
+}
+.actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.error {
+  color: #b42318;
+}
+.muted {
+  color: var(--muted);
+}
+.danger {
+  color: #b42318;
+}
+</style>