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>