Add WooCommerce integration: sync orders to invoices/people with webhook, cron, and settings UI.

apps/web/src/layouts/AppLayout.vue

@@ -68,6 +68,7 @@ const settingsActive = computed(() =>
     '/settings/custom-fields',
     '/settings/currencies',
     '/settings/tahesab',
+    '/settings/woocommerce',
     '/settings/faq',
   ]),
 );

apps/web/src/lib/nav-hubs.ts

@@ -401,6 +401,15 @@ export const NAV_HUBS: NavHubDef[] = [
         tint: 'amber',
         module: 'tahesab',
       },
+      {
+        to: '/settings/woocommerce',
+        title: 'ووکامرس',
+        desc: 'سفارش فروشگاه به فاکتور و مشتری',
+        icon: 'box',
+        tint: 'mint',
+        module: 'woocommerce',
+        admin: true,
+      },
       {
         to: '/settings/faq',
         title: 'FAQ',

apps/web/src/router/index.ts

@@ -306,6 +306,12 @@ export const router = createRouter({
           component: () => import('@/views/TahesabSettingsView.vue'),
           meta: { roles: ['owner', 'admin'] as UserRole[] },
         },
+        {
+          path: 'settings/woocommerce',
+          name: 'woocommerce-settings',
+          component: () => import('@/views/WooCommerceSettingsView.vue'),
+          meta: { roles: ['owner', 'admin'] as UserRole[] },
+        },
         {
           path: 'settings/faq',
           name: 'faq-settings',

apps/web/src/views/WooCommerceSettingsView.vue

@@ -0,0 +1,353 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import type {
+  CreateWooCommerceConnectionRequest,
+  WooCommerceConnectionDto,
+  WooCommerceOrderLinkDto,
+  WooCommerceSyncResultDto,
+} from '@mento/shared';
+import {
+  UiButton,
+  UiCard,
+  UiEmptyState,
+  UiField,
+  UiInput,
+  UiPageHeader,
+} from '@/components/ui';
+import UiIcon from '@/components/UiIcon.vue';
+import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
+
+const loading = ref(false);
+const saving = ref(false);
+const syncing = ref(false);
+const error = ref('');
+const ok = ref('');
+const items = ref<WooCommerceConnectionDto[]>([]);
+const orders = ref<WooCommerceOrderLinkDto[]>([]);
+const lastSync = ref<WooCommerceSyncResultDto | null>(null);
+
+const form = reactive({
+  label: 'فروشگاه اصلی',
+  storeUrl: '',
+  consumerKey: '',
+  consumerSecret: '',
+  webhookSecret: '',
+  enabled: true,
+});
+
+const webhookUrl = computed(() => {
+  if (!items.value[0]) return '';
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  return `${origin}/api/public/integrations/woocommerce/${items.value[0].id}/webhook`;
+});
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    const [connRes, orderRes] = await Promise.all([
+      api.get<WooCommerceConnectionDto[]>('/integrations/woocommerce/connections'),
+      api.get<WooCommerceOrderLinkDto[]>('/integrations/woocommerce/orders'),
+    ]);
+    items.value = connRes.data;
+    orders.value = orderRes.data;
+  } catch (e) {
+    if (axios.isAxiosError(e) && e.response?.status === 403) {
+      error.value = 'ماژول ووکامرس برای این محیط فعال نیست.';
+    } else {
+      error.value = 'بارگذاری ناموفق بود.';
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function create() {
+  if (!form.storeUrl.trim() || !form.consumerKey.trim() || !form.consumerSecret.trim()) {
+    error.value = 'آدرس فروشگاه و کلیدهای API را کامل کنید.';
+    return;
+  }
+  saving.value = true;
+  error.value = '';
+  ok.value = '';
+  try {
+    const payload: CreateWooCommerceConnectionRequest = {
+      label: form.label.trim() || 'فروشگاه',
+      storeUrl: form.storeUrl.trim(),
+      consumerKey: form.consumerKey.trim(),
+      consumerSecret: form.consumerSecret.trim(),
+      webhookSecret: form.webhookSecret.trim() || undefined,
+      enabled: form.enabled,
+    };
+    await api.post('/integrations/woocommerce/connections', payload);
+    form.consumerKey = '';
+    form.consumerSecret = '';
+    form.webhookSecret = '';
+    ok.value = 'اتصال ذخیره شد.';
+    await load();
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? String((e.response?.data as { message?: string })?.message ?? 'ذخیره ناموفق بود.')
+      : 'ذخیره ناموفق بود.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function test(id: string) {
+  try {
+    await api.post(`/integrations/woocommerce/connections/${id}/test`);
+    ok.value = 'اتصال به فروشگاه موفق بود.';
+    await load();
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? String((e.response?.data as { message?: string })?.message ?? 'تست ناموفق بود.')
+      : 'تست ناموفق بود.';
+  }
+}
+
+async function sync(id: string) {
+  syncing.value = true;
+  error.value = '';
+  try {
+    const { data } = await api.post<WooCommerceSyncResultDto>(
+      `/integrations/woocommerce/connections/${id}/sync`,
+    );
+    lastSync.value = data;
+    ok.value = `همگام‌سازی: ${toFaDigits(data.created)} جدید، ${toFaDigits(data.updated)} به‌روز.`;
+    await load();
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? String((e.response?.data as { message?: string })?.message ?? 'همگام‌سازی ناموفق بود.')
+      : 'همگام‌سازی ناموفق بود.';
+  } finally {
+    syncing.value = false;
+  }
+}
+
+async function remove(id: string) {
+  if (!confirm('این اتصال حذف شود؟ لینک سفارش‌های قبلی می‌ماند ولی همگام‌سازی قطع می‌شود.')) {
+    return;
+  }
+  try {
+    await api.delete(`/integrations/woocommerce/connections/${id}`);
+    await load();
+  } catch {
+    error.value = 'حذف ناموفق بود.';
+  }
+}
+
+async function copyWebhook() {
+  if (!webhookUrl.value) return;
+  try {
+    await navigator.clipboard.writeText(webhookUrl.value);
+    ok.value = 'آدرس وب‌هوک کپی شد.';
+  } catch {
+    error.value = 'کپی ممکن نشد.';
+  }
+}
+
+onMounted(() => {
+  void load();
+});
+</script>
+
+<template>
+  <div class="page">
+    <UiPageHeader
+      title="ووکامرس"
+      description="همگام‌سازی سفارش‌های فروشگاه با فاکتور و مشتری در CRM"
+    >
+      <template #actions>
+        <UiButton variant="secondary" :disabled="loading" @click="load">
+          <UiIcon name="refresh" />
+          بروزرسانی
+        </UiButton>
+      </template>
+    </UiPageHeader>
+
+    <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="ok" class="ok">{{ ok }}</p>
+
+    <UiCard title="اتصال جدید">
+      <p class="hint">
+        در ووکامرس: ووکامرس ← تنظیمات ← پیشرفته ← REST API یک کلید بسازید.
+        برای وب‌هوک: ووکامرس ← تنظیمات ← پیشرفته ← وب‌هوک‌ها، موضوع «Order created/updated».
+      </p>
+      <div class="form-grid">
+        <UiField label="نام">
+          <UiInput v-model="form.label" placeholder="فروشگاه اصلی" />
+        </UiField>
+        <UiField label="آدرس فروشگاه">
+          <UiInput v-model="form.storeUrl" placeholder="https://shop.example.com" />
+        </UiField>
+        <UiField label="Consumer Key">
+          <UiInput v-model="form.consumerKey" placeholder="ck_…" />
+        </UiField>
+        <UiField label="Consumer Secret">
+          <UiInput v-model="form.consumerSecret" placeholder="cs_…" />
+        </UiField>
+        <UiField label="Webhook Secret (اختیاری)">
+          <UiInput v-model="form.webhookSecret" placeholder="برای تأیید امضا" />
+        </UiField>
+      </div>
+      <UiButton :loading="saving" @click="create">ذخیره اتصال</UiButton>
+    </UiCard>
+
+    <UiCard title="اتصال‌های ذخیره‌شده">
+      <UiEmptyState
+        v-if="!loading && !items.length"
+        title="اتصالی نیست"
+        description="کلید REST API فروشگاه را وارد کنید."
+      />
+      <div v-else class="list">
+        <article v-for="c in items" :key="c.id" class="item">
+          <div>
+            <strong>{{ c.label }}</strong>
+            <p class="muted">{{ c.storeUrl }}</p>
+            <p class="muted">
+              کلید {{ c.consumerKeyMasked }}
+              · سفارش‌های واردشده {{ toFaDigits(c.importedOrders) }}
+              ·
+              {{
+                c.lastSyncAt
+                  ? `آخرین همگام‌سازی ${formatJalaliNumeric(new Date(c.lastSyncAt))}`
+                  : 'هنوز همگام نشده'
+              }}
+            </p>
+            <p v-if="c.lastError" class="warn">{{ c.lastError }}</p>
+          </div>
+          <div class="actions">
+            <UiButton variant="secondary" @click="test(c.id)">تست</UiButton>
+            <UiButton :loading="syncing" @click="sync(c.id)">همگام‌سازی</UiButton>
+            <UiButton variant="secondary" @click="remove(c.id)">حذف</UiButton>
+          </div>
+        </article>
+      </div>
+
+      <div v-if="webhookUrl" class="webhook">
+        <p class="hint">آدرس وب‌هوک این اتصال:</p>
+        <code>{{ webhookUrl }}</code>
+        <UiButton variant="secondary" @click="copyWebhook">کپی</UiButton>
+      </div>
+    </UiCard>
+
+    <UiCard title="آخرین سفارش‌های واردشده">
+      <UiEmptyState
+        v-if="!orders.length"
+        title="سفارشی نیست"
+        description="همگام‌سازی را بزنید یا وب‌هوک را وصل کنید."
+      />
+      <div v-else class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>سفارش ووکامرس</th>
+              <th>فاکتور</th>
+              <th>وضعیت</th>
+              <th>مبلغ</th>
+              <th>زمان</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="o in orders" :key="o.id">
+              <td>#{{ o.wooOrderNumber || o.wooOrderId }}</td>
+              <td>{{ o.invoiceNumber }}</td>
+              <td>{{ o.status }}</td>
+              <td>{{ toFaDigits(o.total) }} {{ o.currency }}</td>
+              <td>{{ formatJalaliNumeric(new Date(o.syncedAt)) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </UiCard>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  display: grid;
+  gap: 1rem;
+}
+.hint,
+.muted {
+  color: #64748b;
+  font-size: 0.88rem;
+  line-height: 1.7;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin: 0.75rem 0 1rem;
+}
+.list {
+  display: grid;
+  gap: 0.75rem;
+}
+.item {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.85rem;
+  border: 1px solid #eef2f7;
+  border-radius: var(--radius);
+}
+.actions {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  align-items: start;
+}
+.webhook {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: #f8fafc;
+  border-radius: var(--radius);
+  display: grid;
+  gap: 0.5rem;
+}
+.webhook code {
+  word-break: break-all;
+  font-size: 0.85rem;
+}
+.warn {
+  color: #b45309;
+  font-size: 0.85rem;
+}
+.error {
+  color: #b91c1c;
+  font-weight: 600;
+}
+.ok {
+  color: #0f766e;
+  font-weight: 600;
+}
+.table-wrap {
+  overflow: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+th,
+td {
+  text-align: right;
+  padding: 0.55rem;
+  border-bottom: 1px solid #eef2f7;
+}
+th {
+  color: #64748b;
+  font-size: 0.8rem;
+}
+@media (max-width: 800px) {
+  .form-grid,
+  .item {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+  }
+}
+</style>