CRM_Montzar/apps/web/src/views/treasury/TreasuryReportsView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import {
  Alert as AAlert,
  Button as AButton,
  Card as ACard,
  Divider as ADivider,
  Empty as AEmpty,
  Flex as AFlex,
  List as AList,
  Table as ATable,
  Typography,
} from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import { DownloadOutlined } from '@ant-design/icons-vue';
import { api } from '@/lib/api';
import { toman } from './treasury-format';

const { Text: ATypographyText } = Typography;
const AListItem = AList.Item;
const AListItemMeta = AList.Item.Meta;

type Period = {
  bookedIncome: string;
  bookedExpense: string;
  operatingProfit: string;
  cashIn: string;
  cashOut: string;
  cashNet: string;
  expenseCategories: Array<{ name: string; amount: string; share: string }>;
};

type MetricRow = {
  key: string;
  label: string;
  current: string;
  previous: string;
};

const current = ref<Period | null>(null);
const previous = ref<Period | null>(null);
const payablesByMonth = ref<Array<{ month: string; amount: string }>>([]);
const receivablesByParty = ref<Array<{ name: string; amount: string }>>([]);
const error = ref('');

const lines = [
  ['درآمد ثبت‌شده', 'bookedIncome'],
  ['هزینه ثبت‌شده', 'bookedExpense'],
  ['سود عملیاتی', 'operatingProfit'],
  ['ورود وجه', 'cashIn'],
  ['خروج وجه', 'cashOut'],
  ['خالص جریان نقدی', 'cashNet'],
] as const;

const metricColumns: TableColumnsType<MetricRow> = [
  { title: 'شاخص', dataIndex: 'label', key: 'label' },
  { title: 'این دوره', dataIndex: 'current', key: 'current' },
  { title: 'دوره قبل', dataIndex: 'previous', key: 'previous' },
];

const metricRows = computed<MetricRow[]>(() => {
  if (!current.value || !previous.value) return [];
  return lines.map(([label, key]) => ({
    key,
    label,
    current: toman(current.value![key]),
    previous: toman(previous.value![key]),
  }));
});

async function load() {
  const { data } = await api.get<{
    current: Period;
    previous: Period;
    payablesByMonth: Array<{ month: string; amount: string }>;
    receivablesByParty: Array<{ name: string; amount: string }>;
  }>('/treasury/reports');
  current.value = data.current;
  previous.value = data.previous;
  payablesByMonth.value = data.payablesByMonth;
  receivablesByParty.value = data.receivablesByParty;
}

async function download() {
  const { data } = await api.get<Blob>('/treasury/reports/export', { responseType: 'blob' });
  const url = URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'treasury-report.xlsx';
  link.click();
  URL.revokeObjectURL(url);
}

onMounted(() => {
  void load().catch(() => {
    error.value = 'گزارش بارگذاری نشد.';
  });
});
</script>

<template>
  <a-flex vertical :gap="16">
      <a-flex justify="flex-end">
        <a-button @click="download">
          <template #icon><DownloadOutlined /></template>
          خروجی اکسل
        </a-button>
      </a-flex>

      <a-alert v-if="error" type="error" show-icon :message="error" />

      <a-card :bordered="false">
        <a-divider orientation="right">مقایسه دوره‌ها</a-divider>
        <a-table
          v-if="metricRows.length"
          :columns="metricColumns"
          :data-source="metricRows"
          :pagination="false"
          row-key="key"
        />
        <a-empty v-else description="داده‌ای برای نمایش نیست." />

        <a-divider orientation="right">مطالبات به تفکیک طرف حساب</a-divider>
        <a-empty v-if="!receivablesByParty.length" description="مورد بازی نیست." />
        <a-list v-else item-layout="horizontal" :data-source="receivablesByParty">
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a-typography-text strong>{{ toman(item.amount) }}</a-typography-text>
              </template>
              <a-list-item-meta>
                <template #title>{{ item.name }}</template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>

        <a-divider orientation="right">تعهدات به تفکیک ماه</a-divider>
        <a-empty v-if="!payablesByMonth.length" description="تعهد بازی نیست." />
        <a-list v-else item-layout="horizontal" :data-source="payablesByMonth">
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a-typography-text strong>{{ toman(item.amount) }}</a-typography-text>
              </template>
              <a-list-item-meta>
                <template #title>{{ item.month }}</template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>

        <template v-if="current">
          <a-divider orientation="right">سهم هزینه‌ها</a-divider>
          <a-empty v-if="!current.expenseCategories.length" description="دسته‌ای نیست." />
          <a-list v-else item-layout="horizontal" :data-source="current.expenseCategories">
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a-typography-text strong>
                    {{ toman(item.amount) }} · {{ item.share }}٪
                  </a-typography-text>
                </template>
                <a-list-item-meta>
                  <template #title>{{ item.name }}</template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </template>
      </a-card>
  </a-flex>
</template>