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

<script setup lang="ts">
import { computed } from 'vue';
import UiIcon from '@/components/UiIcon.vue';
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
import {
  formatCurrencyParts,
  PIPELINE_ACCENT,
} from '@/lib/pipeline-board';

const props = defineProps<{
  stages: PipelineStage[];
}>();

const emit = defineEmits<{
  openDeal: [dealId: string];
  menuDeal: [dealId: string];
}>();

const rows = computed(() =>
  props.stages.flatMap((stage) =>
    stage.deals.map((deal) => ({
      deal,
      stageTitle: stage.title,
      accent: stage.color,
    })),
  ),
);

function money(deal: PipelineDeal) {
  return formatCurrencyParts(deal.amount, deal.currencyUnit ?? 'تومان');
}
</script>

<template>
  <div class="list" dir="rtl">
    <p v-if="!rows.length" class="empty">معامله‌ای نیست</p>

    <div v-else class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>معامله</th>
            <th>مرحله</th>
            <th>مبلغ</th>
            <th>تاریخ</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.deal.id">
            <td>
              <button
                type="button"
                class="identity"
                @click="emit('openDeal', row.deal.id)"
              >
                <span
                  class="badge"
                  :style="{
                    background: PIPELINE_ACCENT[row.accent].soft,
                    color: PIPELINE_ACCENT[row.accent].text,
                  }"
                >{{ row.deal.initials }}</span>
                <span class="titles">
                  <strong>{{ row.deal.title }}</strong>
                  <em v-if="row.deal.description">{{ row.deal.description }}</em>
                </span>
              </button>
            </td>
            <td>
              <span
                class="stage"
                :style="{
                  background: PIPELINE_ACCENT[row.accent].soft,
                  color: PIPELINE_ACCENT[row.accent].text,
                }"
              >
                <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
                {{ row.stageTitle }}
              </span>
            </td>
            <td>
              <span class="amount" dir="ltr">
                <strong>{{ money(row.deal).number }}</strong>
                <small>{{ money(row.deal).unit }}</small>
              </span>
            </td>
            <td>
              <span class="date">
                <UiIcon name="calendar" :size="14" />
                {{ row.deal.date }}
              </span>
            </td>
            <td class="menu-cell">
              <button
                type="button"
                class="menu"
                aria-label="گزینه‌های معامله"
                @click="emit('menuDeal', row.deal.id)"
              >
                <UiIcon name="dots-v" :size="18" />
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="rows.length" class="cards">
      <article
        v-for="row in rows"
        :key="row.deal.id"
        class="card"
        @dblclick="emit('openDeal', row.deal.id)"
      >
        <button
          type="button"
          class="identity"
          @click="emit('openDeal', row.deal.id)"
        >
          <span
            class="badge"
            :style="{
              background: PIPELINE_ACCENT[row.accent].soft,
              color: PIPELINE_ACCENT[row.accent].text,
            }"
          >{{ row.deal.initials }}</span>
          <span class="titles">
            <strong>{{ row.deal.title }}</strong>
            <em v-if="row.deal.description">{{ row.deal.description }}</em>
          </span>
        </button>
        <span
          class="stage"
          :style="{
            background: PIPELINE_ACCENT[row.accent].soft,
            color: PIPELINE_ACCENT[row.accent].text,
          }"
        >
          <i :style="{ background: PIPELINE_ACCENT[row.accent].solid }" />
          {{ row.stageTitle }}
        </span>
        <div class="card-foot">
          <span class="date">
            <UiIcon name="calendar" :size="14" />
            {{ row.deal.date }}
          </span>
          <span class="amount" dir="ltr">
            <strong>{{ money(row.deal).number }}</strong>
            <small>{{ money(row.deal).unit }}</small>
          </span>
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped>
.list {
  min-width: 0;
}

.empty {
  margin: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.table-wrap {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.data-table th,
.data-table td {
  padding: 0.85rem 1rem;
  text-align: start;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.data-table th {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 700;
  background: #f8fafc;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: #f8fafc;
}

.identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: right;
  font: inherit;
  color: inherit;
}

.badge {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 600;
}

.titles {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.titles strong {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.titles em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.stage i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  display: block;
}

.amount {
  display: grid;
  justify-items: start;
  gap: 0.05rem;
}

.amount strong {
  font-weight: 600;
  color: var(--ink);
}

.amount small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.menu-cell {
  width: 2.5rem;
}

.menu {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0.2rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.menu:hover,
.menu:focus-visible {
  color: var(--ink);
  background: #f1f5f9;
}

.cards {
  display: none;
  gap: 0.7rem;
}

.card {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius);
  padding: 0.95rem 1rem;
  display: grid;
  gap: 0.7rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

@container pipeline (max-width: 720px) {
  .table-wrap {
    display: none;
  }

  .cards {
    display: grid;
  }
}
</style>