Editing of the project's Kariz page

apps/web/src/components/pipeline/AddDealButton.vue

@@ -4,9 +4,13 @@ import UiIcon from '@/components/UiIcon.vue';
 import type { PipelineAccent } from '@/lib/pipeline-board';
 import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
 
-defineProps<{
-  accent: PipelineAccent;
-}>();
+withDefaults(
+  defineProps<{
+    accent: PipelineAccent;
+    label?: string;
+  }>(),
+  { label: 'افزودن معامله' },
+);
 
 const emit = defineEmits<{
   add: [];
@@ -19,10 +23,10 @@ const emit = defineEmits<{
     block
     class="add-deal"
     :style="{ color: PIPELINE_ACCENT[accent].text }"
-    aria-label="افزودن معامله"
+    :aria-label="label"
     @click="emit('add')"
   >
     <UiIcon name="plus" :size="16" />
-    افزودن معامله
+    {{ label }}
   </UiButton>
 </template>

apps/web/src/components/pipeline/DealCard.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
-import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
-import { formatCurrencyParts, PIPELINE_ACCENT } from '@/lib/pipeline-board';
+import type { PipelineAccent, PipelineDeal, PipelineUiCopy } from '@/lib/pipeline-board';
+import {
+  DEAL_BOARD_COPY,
+  formatCurrencyParts,
+  PIPELINE_ACCENT,
+} from '@/lib/pipeline-board';
 
-const props = defineProps<{
-  deal: PipelineDeal;
-  accent: PipelineAccent;
-  dragging?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    deal: PipelineDeal;
+    accent: PipelineAccent;
+    dragging?: boolean;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
@@ -17,8 +25,11 @@ const emit = defineEmits<{
   menu: [dealId: string];
 }>();
 
+const showAmount = computed(
+  () => !props.copy.hideAmount && props.deal.amount != null,
+);
 const money = computed(() =>
-  formatCurrencyParts(props.deal.amount, props.deal.currencyUnit ?? 'تومان'),
+  formatCurrencyParts(props.deal.amount ?? 0, props.deal.currencyUnit ?? 'تومان'),
 );
 const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 </script>
@@ -26,7 +37,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 <template>
   <article
     class="deal-card"
-    :class="{ dragging }"
+    :class="{ dragging, 'no-amount': !showAmount }"
     draggable="true"
     role="listitem"
     :aria-grabbed="dragging ? 'true' : 'false'"
@@ -46,7 +57,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
     <button
       type="button"
       class="menu"
-      aria-label="گزینه‌های معامله"
+      :aria-label="copy.itemMenuAria"
       @click.stop="emit('menu', deal.id)"
     >
       <UiIcon name="dots-v" :size="16" />
@@ -62,7 +73,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
       {{ deal.date }}
       <UiIcon name="calendar" :size="13" />
     </span>
-    <div class="amount">
+    <div v-if="showAmount" class="amount">
       <strong>{{ money.number }}</strong>
       <span>{{ money.unit }}</span>
     </div>
@@ -111,6 +122,10 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
 }
 
+.deal-card.no-amount .date {
+  grid-column: 2 / -1;
+}
+
 .deal-card:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;

apps/web/src/components/pipeline/DealCardOverlay.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import DealCard from './DealCard.vue';
-import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
+import type { PipelineAccent, PipelineDeal, PipelineUiCopy } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY } from '@/lib/pipeline-board';
 
-defineProps<{
-  deal: PipelineDeal;
-  accent: PipelineAccent;
-  x: number;
-  y: number;
-}>();
+withDefaults(
+  defineProps<{
+    deal: PipelineDeal;
+    accent: PipelineAccent;
+    x: number;
+    y: number;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 </script>
 
 <template>
@@ -16,7 +21,7 @@ defineProps<{
     :style="{ transform: `translate3d(${x}px, ${y}px, 0)` }"
     aria-hidden="true"
   >
-    <DealCard :deal="deal" :accent="accent" dragging />
+    <DealCard :deal="deal" :accent="accent" :copy="copy" dragging />
   </div>
 </template>
 

apps/web/src/components/pipeline/PipelineBoard.vue

@@ -2,14 +2,19 @@
 import { nextTick, ref } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
 import PipelineColumn from './PipelineColumn.vue';
-import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY } from '@/lib/pipeline-board';
 
-defineProps<{
-  stages: PipelineStage[];
-  draggingId: string | null;
-  dropStageId: string | null;
-  canManage?: boolean;
-}>();
+withDefaults(
+  defineProps<{
+    stages: PipelineStage[];
+    draggingId: string | null;
+    dropStageId: string | null;
+    canManage?: boolean;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
@@ -62,6 +67,7 @@ function submitAdd() {
       :dragging-id="draggingId"
       :drop-active="dropStageId === stage.id"
       :can-manage="canManage"
+      :copy="copy"
       :is-first="index === 0"
       :is-last="index === stages.length - 1"
       @drag-start="(d, e) => emit('dragStart', d, e)"

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -3,17 +3,21 @@ import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
 import AddDealButton from './AddDealButton.vue';
 import DealCard from './DealCard.vue';
-import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
-import { PIPELINE_ACCENT, toFaDealCount } from '@/lib/pipeline-board';
+import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
+import { DEAL_BOARD_COPY, PIPELINE_ACCENT, toFaItemCount } from '@/lib/pipeline-board';
 
-const props = defineProps<{
-  stage: PipelineStage;
-  draggingId: string | null;
-  dropActive: boolean;
-  canManage?: boolean;
-  isFirst?: boolean;
-  isLast?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    stage: PipelineStage;
+    draggingId: string | null;
+    dropActive: boolean;
+    canManage?: boolean;
+    isFirst?: boolean;
+    isLast?: boolean;
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   dragStart: [deal: PipelineDeal, event: DragEvent];
@@ -150,7 +154,7 @@ onBeforeUnmount(() => {
           {{ stage.title }}
         </h2>
       </div>
-      <span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
+      <span class="count">{{ toFaItemCount(stage.deals.length, copy.itemNoun) }}</span>
       <div v-if="canManage" ref="menuRoot" class="more-wrap">
         <button
           type="button"
@@ -194,7 +198,7 @@ onBeforeUnmount(() => {
       <button
         type="button"
         class="plus"
-        aria-label="افزودن معامله به این مرحله"
+        :aria-label="copy.addItemAria"
         @click="emit('addDeal', stage.id)"
       >
         <UiIcon name="plus" :size="16" />
@@ -213,16 +217,17 @@ onBeforeUnmount(() => {
           :deal="deal"
           :accent="stage.color"
           :dragging="draggingId === deal.id"
+          :copy="copy"
           @drag-start="(d, e) => emit('dragStart', d, e)"
           @drag-end="emit('dragEnd')"
           @open="emit('openDeal', $event)"
           @menu="emit('menuDeal', $event)"
         />
       </div>
-      <p v-if="!stage.deals.length" class="empty">معامله‌ای نیست</p>
+      <p v-if="!stage.deals.length" class="empty">{{ copy.empty }}</p>
     </div>
 
-    <AddDealButton :accent="stage.color" @add="emit('addDeal', stage.id)" />
+    <AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
   </section>
 </template>
 

apps/web/src/components/pipeline/PipelineList.vue

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
-import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
 import {
+  DEAL_BOARD_COPY,
   formatCurrencyParts,
   PIPELINE_ACCENT,
 } from '@/lib/pipeline-board';
 
-const props = defineProps<{
-  stages: PipelineStage[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    stages: PipelineStage[];
+    copy?: PipelineUiCopy;
+  }>(),
+  { copy: () => DEAL_BOARD_COPY },
+);
 
 const emit = defineEmits<{
   openDeal: [dealId: string];
@@ -27,21 +32,23 @@ const rows = computed(() =>
 );
 
 function money(deal: PipelineDeal) {
-  return formatCurrencyParts(deal.amount, deal.currencyUnit ?? 'تومان');
+  return formatCurrencyParts(deal.amount ?? 0, deal.currencyUnit ?? 'تومان');
 }
+
+const hideAmount = computed(() => Boolean(props.copy.hideAmount));
 </script>
 
 <template>
   <div class="list" dir="rtl">
-    <p v-if="!rows.length" class="empty">معامله‌ای نیست</p>
+    <p v-if="!rows.length" class="empty">{{ copy.empty }}</p>
 
     <div v-else class="table-wrap">
       <table class="data-table">
         <thead>
           <tr>
-            <th>معامله</th>
+            <th>{{ copy.listColTitle }}</th>
             <th>مرحله</th>
-            <th>مبلغ</th>
+            <th v-if="!hideAmount">مبلغ</th>
             <th>تاریخ</th>
             <th></th>
           </tr>
@@ -79,7 +86,7 @@ function money(deal: PipelineDeal) {
                 {{ row.stageTitle }}
               </span>
             </td>
-            <td>
+            <td v-if="!hideAmount">
               <span class="amount" dir="ltr">
                 <strong>{{ money(row.deal).number }}</strong>
                 <small>{{ money(row.deal).unit }}</small>
@@ -95,7 +102,7 @@ function money(deal: PipelineDeal) {
               <button
                 type="button"
                 class="menu"
-                aria-label="گزینه‌های معامله"
+                :aria-label="copy.itemMenuAria"
                 @click="emit('menuDeal', row.deal.id)"
               >
                 <UiIcon name="dots-v" :size="18" />
@@ -145,7 +152,7 @@ function money(deal: PipelineDeal) {
             <UiIcon name="calendar" :size="14" />
             {{ row.deal.date }}
           </span>
-          <span class="amount" dir="ltr">
+          <span v-if="!hideAmount" class="amount" dir="ltr">
             <strong>{{ money(row.deal).number }}</strong>
             <small>{{ money(row.deal).unit }}</small>
           </span>

apps/web/src/components/pipeline/PipelineToolbar.vue

@@ -11,8 +11,16 @@ withDefaults(
     pipelineName: string;
     pipelineOptions: Array<{ id: string; name: string }>;
     canCreate?: boolean;
+    icon?: 'briefcase' | 'grid';
+    createOptionLabel?: string;
+    showAmountFilters?: boolean;
   }>(),
-  { canCreate: false },
+  {
+    canCreate: false,
+    icon: 'briefcase',
+    createOptionLabel: 'کاریز جدید…',
+    showAmountFilters: true,
+  },
 );
 
 const emit = defineEmits<{
@@ -43,7 +51,7 @@ function onPick(value: string) {
   <header class="toolbar" dir="rtl">
     <div class="title-block">
       <span class="brand-ico" aria-hidden="true">
-        <UiIcon name="briefcase" :size="18" />
+        <UiIcon :name="icon" :size="18" />
       </span>
       <h1>{{ pipelineName }}</h1>
     </div>
@@ -54,7 +62,7 @@ function onPick(value: string) {
       </template>
     </UiSegmented>
 
-    <UiSelect
+      <UiSelect
       class="pipeline-pick"
       :model-value="selectedPipelineId"
       @update:model-value="onPick"
@@ -66,18 +74,28 @@ function onPick(value: string) {
       >
         {{ opt.name }}
       </option>
-      <option v-if="canCreate" value="__create__">کاریز جدید…</option>
+      <option v-if="canCreate" value="__create__">{{ createOptionLabel }}</option>
     </UiSelect>
 
-    <UiFilterBar v-model:search="search" class="filters">
-      <label class="field">
-        <span>حداقل مبلغ</span>
-        <input v-model="amountMin" type="number" min="0" placeholder="۰" />
-      </label>
-      <label class="field">
-        <span>حداکثر مبلغ</span>
-        <input v-model="amountMax" type="number" min="0" placeholder="—" />
-      </label>
+    <div class="excel-actions">
+      <slot name="excel" />
+    </div>
+
+    <UiFilterBar
+      v-model:search="search"
+      class="filters"
+      :show-filters="showAmountFilters"
+    >
+      <template v-if="showAmountFilters">
+        <label class="field">
+          <span>حداقل مبلغ</span>
+          <input v-model="amountMin" type="number" min="0" placeholder="۰" />
+        </label>
+        <label class="field">
+          <span>حداکثر مبلغ</span>
+          <input v-model="amountMax" type="number" min="0" placeholder="—" />
+        </label>
+      </template>
     </UiFilterBar>
   </header>
 </template>
@@ -127,6 +145,25 @@ h1 {
   min-width: 8.5rem;
 }
 
+.excel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  flex: 0 0 auto;
+}
+
+.excel-actions :deep(.btn-ghost-sm) {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f766e;
+  border-radius: 10px;
+  padding: 0.45rem 0.75rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
+  font: inherit;
+}
+
 .filters {
   flex: 1 1 12rem;
   min-width: 0;
@@ -153,6 +190,7 @@ h1 {
   }
 
   .pipeline-pick,
+  .excel-actions,
   .filters {
     flex: 1 1 100%;
   }

apps/web/src/components/ui/UiFilterBar.vue

@@ -7,8 +7,9 @@ import UiIcon from '@/components/UiIcon.vue';
 withDefaults(
   defineProps<{
     placeholder?: string;
+    showFilters?: boolean;
   }>(),
-  { placeholder: 'جستجو...' },
+  { placeholder: 'جستجو...', showFilters: true },
 );
 
 const search = defineModel<string>('search', { default: '' });
@@ -20,7 +21,7 @@ const open = ref(false);
     <div class="row">
       <slot name="before" />
       <UiSearch v-model="search" :placeholder="placeholder" class="search" />
-      <UiButton type="button" @click="open = !open">
+      <UiButton v-if="showFilters" type="button" @click="open = !open">
         <UiIcon name="filter" :size="16" />
         فیلترها
       </UiButton>

apps/web/src/lib/pipeline-board.ts

@@ -4,7 +4,7 @@ export type PipelineDeal = {
   id: string;
   title: string;
   description: string;
-  amount: number;
+  amount: number | null;
   date: string;
   initials: string;
   /** شناسه مرحله فعلی — هنگام جابه‌جایی به‌روز می‌شود */
@@ -12,6 +12,35 @@ export type PipelineDeal = {
   currencyUnit?: string;
 };
 
+export type PipelineUiCopy = {
+  itemNoun: string;
+  addItem: string;
+  empty: string;
+  addItemAria: string;
+  itemMenuAria: string;
+  listColTitle: string;
+  hideAmount?: boolean;
+};
+
+export const DEAL_BOARD_COPY: PipelineUiCopy = {
+  itemNoun: 'معامله',
+  addItem: 'افزودن معامله',
+  empty: 'معامله‌ای نیست',
+  addItemAria: 'افزودن معامله به این مرحله',
+  itemMenuAria: 'گزینه‌های معامله',
+  listColTitle: 'معامله',
+};
+
+export const PROJECT_BOARD_COPY: PipelineUiCopy = {
+  itemNoun: 'کارت',
+  addItem: 'افزودن کارت',
+  empty: 'کارتی نیست',
+  addItemAria: 'افزودن کارت به این مرحله',
+  itemMenuAria: 'گزینه‌های کارت',
+  listColTitle: 'کارت',
+  hideAmount: true,
+};
+
 export type PipelineStage = {
   id: string;
   title: string;
@@ -152,6 +181,48 @@ export function mapBoardToStages(
   });
 }
 
+export function mapProjectBoardToStages(
+  board: {
+    stages: Array<{
+      id: string;
+      name: string;
+      cards: Array<{
+        id: string;
+        title: string;
+        notes: string | null;
+        stageId: string;
+        createdAt: string;
+        person: { fullName: string } | null;
+        company: { name: string } | null;
+        deal: { title: string } | null;
+      }>;
+    }>;
+  },
+  formatDate: (iso: string) => string,
+): PipelineStage[] {
+  return board.stages.map((stage, index) => ({
+    id: stage.id,
+    title: stage.name,
+    color: ACCENT_CYCLE[index % ACCENT_CYCLE.length]!,
+    deals: stage.cards.map((card) => ({
+      id: card.id,
+      title: card.title,
+      description:
+        card.company?.name ||
+        card.person?.fullName ||
+        card.deal?.title ||
+        card.notes?.trim() ||
+        '',
+      amount: null,
+      date: formatDate(card.createdAt),
+      initials: initialsFromTitle(
+        card.company?.name || card.person?.fullName || card.title,
+      ),
+      stageId: card.stageId,
+    })),
+  }));
+}
+
 
 /**
  * جابه‌جایی معامله بین مراحل یا تغییر ترتیب داخل یک مرحله.
@@ -241,15 +312,23 @@ export function filterStages(
       ) {
         return false;
       }
-      if (min != null && !Number.isNaN(min) && d.amount < min) return false;
-      if (max != null && !Number.isNaN(max) && d.amount > max) return false;
+      if (min != null && !Number.isNaN(min) && (d.amount == null || d.amount < min)) {
+        return false;
+      }
+      if (max != null && !Number.isNaN(max) && (d.amount == null || d.amount > max)) {
+        return false;
+      }
       return true;
     }),
   }));
 }
 
+export function toFaItemCount(n: number, noun = 'معامله'): string {
+  return `${new Intl.NumberFormat('fa-IR').format(n)} ${noun}`;
+}
+
 export function toFaDealCount(n: number): string {
-  return `${new Intl.NumberFormat('fa-IR').format(n)} معامله`;
+  return toFaItemCount(n, 'معامله');
 }
 
 /** جابه‌جایی یک ستون به ایندکس جدید */

apps/web/src/views/PipelineBoardView.vue

@@ -20,7 +20,8 @@ import UiButton from '@/components/ui/UiButton.vue';
 import UiInput from '@/components/ui/UiInput.vue';
 import UiModal from '@/components/ui/UiModal.vue';
 import DealFormView from '@/views/DealFormView.vue';
-import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
+import type { ImportContactsResult, PipelineBoardDto, PipelineDto } from '@mento/shared';
+import { brand } from '@mento/shared';
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
 
@@ -44,6 +45,9 @@ const newName = ref('');
 const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
 const deleteStageId = ref<string | null>(null);
 const stageBusy = ref(false);
+const busy = ref(false);
+const importMsg = ref('');
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const draggingId = ref<string | null>(null);
 const draggingColumnId = ref<string | null>(null);
@@ -367,6 +371,64 @@ function onOpenDeal(dealId: string) {
   void router.push({ name: 'deal-detail', params: { id: dealId } });
 }
 
+async function exportExcel() {
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+  try {
+    const { data } = await api.get<Blob>('/deals/export', { responseType: 'blob' });
+    const url = URL.createObjectURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${brand.filePrefix}-deals.xlsx`;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch {
+    error.value = 'خروجی اکسل ناموفق بود.';
+  } finally {
+    busy.value = false;
+  }
+}
+
+function pickImportFile() {
+  fileInput.value?.click();
+}
+
+async function onImportFile(ev: Event) {
+  const input = ev.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file) return;
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+  try {
+    const form = new FormData();
+    form.append('file', file);
+    const { data } = await api.post<ImportContactsResult>('/deals/import', form, {
+      headers: { 'Content-Type': undefined },
+    });
+    importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
+      data.errors.length ? ` · خطا: ${data.errors.length}` : ''
+    }${data.boards?.length ? ` · کاریز: ${data.boards.join('، ')}` : ''}`;
+    if (data.errors.length) {
+      error.value = data.errors
+        .slice(0, 3)
+        .map((e) => `ردیف ${e.row}: ${e.message}`)
+        .join(' | ');
+    }
+    if (data.boardId && data.boardId !== selectedPipelineId.value) {
+      await router.replace({ name: 'pipeline', query: { pipelineId: data.boardId } });
+    } else {
+      await load();
+    }
+  } catch (e) {
+    error.value = apiMessage(e, 'ایمپورت ناموفق بود');
+  } finally {
+    busy.value = false;
+  }
+}
+
 function onMenuDeal(dealId: string) {
   menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
 }
@@ -405,9 +467,26 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
       v-model:amount-max="amountMax"
       :can-create="canCreatePipeline"
       @create="showCreate = true"
-    />
+    >
+      <template #excel>
+        <button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="exportExcel">
+          خروجی اکسل
+        </button>
+        <button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="pickImportFile">
+          ورود از اکسل
+        </button>
+        <input
+          ref="fileInput"
+          type="file"
+          accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          hidden
+          @change="onImportFile"
+        />
+      </template>
+    </PipelineToolbar>
 
     <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="importMsg" class="ok">{{ importMsg }}</p>
     <p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>
 
     <PipelineList
@@ -565,6 +644,11 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
   font-weight: 600;
 }
 
+.ok {
+  color: #0f766e;
+  font-weight: 600;
+}
+
 .delete-copy {
   margin: 0;
   line-height: 1.7;

apps/web/src/views/ProductsSettingsView.vue

@@ -9,7 +9,8 @@ import UiButton from '@/components/ui/UiButton.vue';
 import UiModal from '@/components/ui/UiModal.vue';
 import UiIcon from '@/components/UiIcon.vue';
 import ProductFormView from '@/views/ProductFormView.vue';
-import type { ProductDto } from '@mento/shared';
+import type { ImportContactsResult, ProductDto } from '@mento/shared';
+import { brand } from '@mento/shared';
 
 type SortKey = 'name' | 'newest' | 'price';
 type StatusFilter = 'all' | 'active' | 'inactive';
@@ -30,6 +31,9 @@ const menuId = ref<string | null>(null);
 const sortOpen = ref(false);
 const moreOpen = ref(false);
 const productModal = ref(false);
+const busy = ref(false);
+const importMsg = ref('');
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const categories = computed(() => {
   const set = new Set<string>();
@@ -161,6 +165,70 @@ async function load() {
   }
 }
 
+async function exportExcel() {
+  closeMenus();
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+  try {
+    const { data } = await api.get<Blob>('/products/export', {
+      params: { q: q.value || undefined },
+      responseType: 'blob',
+    });
+    const url = URL.createObjectURL(data);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${brand.filePrefix}-products.xlsx`;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch {
+    error.value = 'خروجی اکسل ناموفق بود.';
+  } finally {
+    busy.value = false;
+  }
+}
+
+function pickImportFile() {
+  closeMenus();
+  fileInput.value?.click();
+}
+
+async function onImportFile(ev: Event) {
+  const input = ev.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = '';
+  if (!file) return;
+  busy.value = true;
+  importMsg.value = '';
+  error.value = '';
+  try {
+    const form = new FormData();
+    form.append('file', file);
+    const { data } = await api.post<ImportContactsResult>('/products/import', form, {
+      headers: { 'Content-Type': undefined },
+    });
+    importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
+      data.errors.length ? ` · خطا: ${data.errors.length}` : ''
+    }`;
+    if (data.errors.length) {
+      error.value = data.errors
+        .slice(0, 3)
+        .map((e) => `ردیف ${e.row}: ${e.message}`)
+        .join(' | ');
+    }
+    await load();
+  } catch (e) {
+    error.value = axios.isAxiosError(e)
+      ? String(
+          (e.response?.data as { message?: string | string[] })?.message ??
+            'ایمپورت ناموفق بود',
+        )
+      : 'ایمپورت ناموفق بود';
+  } finally {
+    busy.value = false;
+  }
+}
+
 async function toggleActive(product: ProductDto) {
   closeMenus();
   await api.patch(`/products/${product.id}`, { isActive: !product.isActive });
@@ -208,6 +276,19 @@ onMounted(load);
         </div>
       </div>
       <div class="head-actions" @click.stop>
+        <button class="ghost-btn" type="button" :disabled="busy" @click="exportExcel">
+          خروجی اکسل
+        </button>
+        <button class="ghost-btn" type="button" :disabled="busy" @click="pickImportFile">
+          ورود از اکسل
+        </button>
+        <input
+          ref="fileInput"
+          type="file"
+          accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          hidden
+          @change="onImportFile"
+        />
         <UiButton type="button" @click="productModal = true">
           <UiIcon name="plus" :size="16" />
           محصول جدید
@@ -269,6 +350,7 @@ onMounted(load);
     </div>
 
     <p v-if="error" class="error">{{ error }}</p>
+    <p v-if="importMsg" class="ok">{{ importMsg }}</p>
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
 
     <template v-else>
@@ -789,6 +871,10 @@ tr:last-child td {
 .error {
   color: #b91c1c;
 }
+.ok {
+  color: #0f766e;
+  font-weight: 600;
+}
 .fab {
   display: none;
   position: fixed;

apps/web/src/views/ProjectCardFormView.vue

@@ -6,9 +6,28 @@ import { api } from '@/lib/api';
 import type { ProjectCardDto } from '@mento/shared';
 import UiIcon from '@/components/UiIcon.vue';
 
+const props = withDefaults(
+  defineProps<{
+    embedded?: boolean;
+    cardId?: string;
+    initialBoardId?: string;
+    initialStageId?: string;
+  }>(),
+  { embedded: false },
+);
+
+const emit = defineEmits<{
+  saved: [];
+  cancel: [];
+}>();
+
 const route = useRoute();
 const router = useRouter();
-const isNew = computed(() => route.name === 'project-card-new');
+const id = computed(() => {
+  if (props.embedded) return props.cardId ?? '';
+  return String(route.params.id || '');
+});
+const isNew = computed(() => (props.embedded ? !props.cardId : route.name === 'project-card-new'));
 const pageTitle = computed(() => (isNew.value ? 'کارت جدید' : 'ویرایش کارت'));
 
 const loading = ref(false);
@@ -16,17 +35,15 @@ 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;
+  const cardId = id.value;
+  if (!cardId) return;
   loading.value = true;
   error.value = '';
   try {
-    const { data } = await api.get<ProjectCardDto>(`/project-cards/${id}`);
-    cardId.value = data.id;
+    const { data } = await api.get<ProjectCardDto>(`/project-cards/${cardId}`);
     title.value = data.title;
     notes.value = data.notes ?? '';
   } catch (e) {
@@ -46,21 +63,33 @@ async function save() {
   error.value = '';
   try {
     if (isNew.value) {
-      const boardId =
-        typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
+      const boardId = props.embedded
+        ? props.initialBoardId
+        : 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,
+        stageId: props.embedded ? props.initialStageId : undefined,
         personId:
           typeof route.query.personId === 'string' ? route.query.personId : undefined,
       });
+      if (props.embedded) {
+        emit('saved');
+        return;
+      }
       await router.replace({ name: 'project-card-detail', params: { id: data.id } });
     } else {
-      await api.patch(`/project-cards/${cardId.value}`, {
+      await api.patch(`/project-cards/${id.value}`, {
         title: title.value.trim(),
         notes: notes.value.trim() || null,
       });
+      if (props.embedded) {
+        emit('saved');
+        return;
+      }
     }
   } catch {
     error.value = 'ذخیره کارت ناموفق بود.';
@@ -70,10 +99,14 @@ async function save() {
 }
 
 async function removeCard() {
-  if (isNew.value || !cardId.value) return;
+  if (isNew.value || !id.value) return;
   if (!confirm('کارت حذف شود؟')) return;
   try {
-    await api.delete(`/project-cards/${cardId.value}`);
+    await api.delete(`/project-cards/${id.value}`);
+    if (props.embedded) {
+      emit('saved');
+      return;
+    }
     await router.push({ name: 'projects' });
   } catch {
     error.value = 'حذف کارت ناموفق بود.';
@@ -81,6 +114,10 @@ async function removeCard() {
 }
 
 function cancel() {
+  if (props.embedded) {
+    emit('cancel');
+    return;
+  }
   void router.push({ name: 'projects' });
 }
 
@@ -88,8 +125,20 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <header class="desktop-head">
+  <section class="page" :class="{ embedded }">
+    <div v-if="embedded" class="embed-actions">
+      <button
+        class="btn primary"
+        type="button"
+        :disabled="saving || title.trim().length < 2"
+        @click="save"
+      >
+        {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+      </button>
+      <button class="btn cancel" type="button" @click="cancel">انصراف</button>
+      <button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
+    </div>
+    <header v-if="!embedded" class="desktop-head">
       <div class="title-block">
         <span class="doc-ico"><UiIcon name="document" :size="22" /></span>
         <div>
@@ -115,7 +164,7 @@ onMounted(load);
       </div>
     </header>
 
-    <header class="mobile-head">
+    <header v-if="!embedded" class="mobile-head">
       <button
         class="icon-btn"
         type="button"
@@ -143,7 +192,7 @@ onMounted(load);
         <label for="card-notes">یادداشت</label>
         <textarea id="card-notes" v-model="notes" rows="5" maxlength="4000" />
       </div>
-      <div class="mobile-actions">
+      <div v-if="!embedded" class="mobile-actions">
         <button class="btn primary" type="submit" :disabled="saving || title.trim().length < 2">
           {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
         </button>
@@ -162,6 +211,16 @@ onMounted(load);
   width: 100%;
 }
 
+.page.embedded {
+  max-width: none;
+}
+
+.embed-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 .desktop-head {
   display: none;
   justify-content: space-between;