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

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import {
  Alert as AAlert,
  Button as AButton,
  Card as ACard,
  Checkbox as ACheckbox,
  Col as ACol,
  Descriptions as ADescriptions,
  DescriptionsItem as ADescriptionsItem,
  Divider as ADivider,
  Empty as AEmpty,
  Flex as AFlex,
  Form as AForm,
  FormItem as AFormItem,
  Input as AInput,
  List as AList,
  Row as ARow,
  Select as ASelect,
  Space as ASpace,
  Table as ATable,
  Tag as ATag,
  Typography,
  message,
} from 'ant-design-vue';
import type { TableColumnsType } from 'ant-design-vue';
import { api } from '@/lib/api';
import type { FinancialAccountDto, FinancialReceivableDto } from '@mento/shared';
import MoneyInput from '@/components/MoneyInput.vue';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import { toman } from './treasury-format';
import { useTreasuryMobile } from './useTreasuryMobile';
import { formatJalaliNumeric } from '@/lib/jalali';
import { parseMoneyNumber } from '@/lib/money';

const { Text: ATypographyText } = Typography;
const ASelectOption = ASelect.Option;

type InstallmentRow = FinancialReceivableDto['installments'][number];

const rows = ref<FinancialReceivableDto[]>([]);
const accounts = ref<FinancialAccountDto[]>([]);
const error = ref('');
const ok = ref('');
const saving = ref(false);
const form = ref({
  title: '',
  partyName: '',
  totalAmount: '',
  prepaidAmount: '',
  accountId: '',
  count: '3',
  interval: 'monthly',
  startDate: '',
});
const collect = ref({ installmentId: '', receivableId: '', amount: '', accountId: '' });
const custom = ref(false);
const customLines = ref([{ amount: '', dueDate: '' }]);

const statusLabel: Record<string, string> = {
  open: 'باز',
  partial: 'جزئی',
  settled: 'تسویه‌شده',
  overdue: 'معوق',
  void: 'باطل',
};

const installmentColumns: TableColumnsType<InstallmentRow> = [
  { title: 'قسط', dataIndex: 'position', key: 'position' },
  {
    title: 'سررسید',
    key: 'dueDate',
    customRender: ({ record }) => formatJalaliNumeric(new Date(record.dueDate)),
  },
  {
    title: 'مبلغ',
    key: 'amount',
    customRender: ({ record }) => toman(record.amount),
  },
  {
    title: 'مانده',
    key: 'remaining',
    customRender: ({ record }) => toman(record.remaining),
  },
  {
    title: 'وضعیت',
    key: 'status',
    customRender: ({ record }) => statusLabel[record.status] ?? record.status,
  },
  { title: '', key: 'actions' },
];

const isMobile = useTreasuryMobile();
const AListItem = AList.Item;

function apiMessage(e: unknown) {
  if (!axios.isAxiosError(e)) return 'عملیات ناموفق بود.';
  const msg = (e.response?.data as { message?: string | string[] })?.message;
  return Array.isArray(msg) ? msg.join('، ') : msg || 'عملیات ناموفق بود.';
}

async function load() {
  const [list, acc] = await Promise.all([
    api.get<FinancialReceivableDto[]>('/treasury/receivables'),
    api.get<FinancialAccountDto[]>('/treasury/accounts'),
  ]);
  rows.value = list.data;
  accounts.value = acc.data.filter((row) => row.isActive);
}

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

function onFinishFailed() {
  message.warning('لطفاً فیلدهای الزامی را کامل کنید.');
}

async function createContract() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const totalAmount = parseMoneyNumber(String(form.value.totalAmount ?? ''), 0);
    if (totalAmount == null || totalAmount <= 0) {
      error.value = 'مبلغ کل معتبر نیست.';
      return;
    }
    const prepaidAmount = parseMoneyNumber(String(form.value.prepaidAmount ?? ''), 0) ?? 0;
    const installments = custom.value
      ? customLines.value.map((line) => ({
          amount: parseMoneyNumber(String(line.amount ?? ''), 0) ?? 0,
          dueDate: line.dueDate,
        }))
      : undefined;
    await api.post('/treasury/receivables', {
      title: form.value.title,
      partyName: form.value.partyName || null,
      totalAmount,
      prepaidAmount,
      accountId: form.value.accountId || null,
      ...(custom.value
        ? { installments }
        : {
            count: Number(form.value.count),
            interval: form.value.interval,
            startDate: form.value.startDate || undefined,
          }),
    });
    ok.value = 'قرارداد و برنامه اقساط ثبت شد.';
    form.value.title = '';
    form.value.totalAmount = '';
    form.value.prepaidAmount = '';
    await load();
  } catch (e) {
    error.value = apiMessage(e);
  } finally {
    saving.value = false;
  }
}

async function collectInstallment() {
  if (!collect.value.installmentId) return;
  saving.value = true;
  error.value = '';
  try {
    const amount = parseMoneyNumber(String(collect.value.amount ?? ''), 0);
    if (amount == null || amount <= 0) {
      error.value = 'مبلغ دریافت معتبر نیست.';
      return;
    }
    await api.post(`/treasury/installments/${collect.value.installmentId}/collect`, {
      amount,
      accountId: collect.value.accountId,
      clientKey: crypto.randomUUID(),
    });
    ok.value = 'دریافت قسط در همان حساب ثبت شد.';
    collect.value = { installmentId: '', receivableId: '', amount: '', accountId: '' };
    await load();
  } catch (e) {
    error.value = apiMessage(e);
  } finally {
    saving.value = false;
  }
}

function startCollect(row: FinancialReceivableDto, item: InstallmentRow) {
  collect.value = {
    installmentId: item.id,
    receivableId: row.id,
    amount: item.remaining,
    accountId: accounts.value[0]?.id || '',
  };
}

onMounted(() => {
  void load().catch(() => {
    error.value = 'بارگذاری مطالبات ناموفق بود.';
  });
});
</script>

<template>
  <a-flex vertical :gap="16">
      <a-alert v-if="error" type="error" show-icon :message="error" />
      <a-alert v-if="ok" type="success" show-icon :message="ok" />

      <a-card :bordered="false">
        <a-divider orientation="right">قرارداد جدید</a-divider>
        <a-form
          layout="vertical"
          :model="form"
          @finish="createContract"
          @finishFailed="onFinishFailed"
        >
          <a-row :gutter="[16, 0]">
            <a-col :xs="24" :md="12">
              <a-form-item
                label="عنوان"
                name="title"
                :rules="[{ required: true, message: 'عنوان الزامی است' }]"
              >
                <a-input v-model:value="form.title" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="12">
              <a-form-item label="طرف حساب" name="partyName">
                <a-input v-model:value="form.partyName" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item
                label="مبلغ کل"
                name="totalAmount"
                :rules="[{ required: true, message: 'مبلغ کل الزامی است' }]"
              >
                <MoneyInput addon-after="تومان" v-model="form.totalAmount" :decimals="0" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item label="پیش‌پرداخت" name="prepaidAmount">
                <MoneyInput addon-after="تومان" v-model="form.prepaidAmount" :decimals="0" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item label="حساب پیش‌پرداخت" name="accountId">
                <a-select show-search option-filter-prop="label"
                  v-model:value="form.accountId"
                  allow-clear
                  style="width: 100%"
                  placeholder="انتخاب"
                >
                  <a-select-option v-for="account in accounts" :key="account.id" :value="account.id" :label="account.name">
                    {{ account.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item label="تعداد قسط" name="count">
                <a-input v-model:value="form.count" :disabled="custom" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item label="دوره" name="interval">
                <a-select show-search option-filter-prop="label" v-model:value="form.interval" style="width: 100%" :disabled="custom">
                  <a-select-option value="monthly" label="ماهانه">ماهانه</a-select-option>
                  <a-select-option value="weekly" label="هفتگی">هفتگی</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :md="8">
              <a-form-item label="شروع" name="startDate">
                <JalaliDateInput v-model="form.startDate" :disabled="custom" />
              </a-form-item>
            </a-col>
            <a-col :xs="24">
              <a-form-item>
                <a-checkbox v-model:checked="custom">اقساط نامساوی</a-checkbox>
              </a-form-item>
            </a-col>
          </a-row>

          <template v-if="custom">
            <a-row v-for="(line, index) in customLines" :key="index" :gutter="[16, 0]">
              <a-col :xs="24" :md="12">
                <a-form-item :label="`مبلغ قسط ${index + 1}`">
                  <MoneyInput addon-after="تومان" v-model="line.amount" :decimals="0" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="سررسید">
                  <JalaliDateInput v-model="line.dueDate" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item>
              <a-button @click="customLines.push({ amount: '', dueDate: '' })">قسط دیگر</a-button>
            </a-form-item>
          </template>

          <a-space>
            <a-button type="primary" html-type="submit" :loading="saving">ساخت اقساط</a-button>
            <a-button @click="downloadExcel">خروجی اکسل</a-button>
          </a-space>
        </a-form>

        <template v-if="collect.installmentId">
          <a-divider orientation="right">دریافت قسط</a-divider>
          <a-form
            layout="vertical"
            :model="collect"
            @finish="collectInstallment"
            @finishFailed="onFinishFailed"
          >
            <a-row :gutter="[16, 0]">
              <a-col :xs="24" :md="8">
                <a-form-item
                  label="مبلغ"
                  name="amount"
                  :rules="[{ required: true, message: 'مبلغ الزامی است' }]"
                >
                  <MoneyInput addon-after="تومان" v-model="collect.amount" :decimals="0" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item
                  label="حساب مقصد"
                  name="accountId"
                  :rules="[{ required: true, message: 'حساب الزامی است' }]"
                >
                  <a-select show-search option-filter-prop="label"
                    v-model:value="collect.accountId"
                    allow-clear
                    style="width: 100%"
                    placeholder="انتخاب حساب"
                  >
                    <a-select-option
                      v-for="account in accounts"
                      :key="account.id"
                      :value="account.id"
                      :label="account.name"
                    >
                      {{ account.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-button type="primary" html-type="submit" :loading="saving">ثبت دریافت</a-button>
          </a-form>
        </template>

        <a-divider orientation="right">قراردادها</a-divider>
        <a-empty v-if="!rows.length" description="قراردادی ثبت نشده است." />
        <template v-else>
          <div v-for="row in rows" :key="row.id">
            <a-flex justify="space-between" align="flex-start" wrap="wrap" :gap="8">
              <div>
                <a-typography-text strong>{{ row.title }}</a-typography-text>
                <br />
                <a-typography-text type="secondary">
                  {{ row.partyName || 'بدون طرف حساب' }} · مانده {{ toman(row.remaining) }}
                </a-typography-text>
              </div>
              <a-typography-text strong>{{ toman(row.totalAmount) }}</a-typography-text>
            </a-flex>
            <a-list v-if="isMobile" :data-source="row.installments">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-card :title="`قسط ${item.position}`" style="width: 100%">
                    <a-descriptions :column="1" bordered>
                      <a-descriptions-item label="سررسید">
                        {{ formatJalaliNumeric(new Date(item.dueDate)) }}
                      </a-descriptions-item>
                      <a-descriptions-item label="مبلغ">{{ toman(item.amount) }}</a-descriptions-item>
                      <a-descriptions-item label="مانده">{{ toman(item.remaining) }}</a-descriptions-item>
                      <a-descriptions-item label="وضعیت">
                        {{ statusLabel[item.status] ?? item.status }}
                      </a-descriptions-item>
                    </a-descriptions>
                    <a-button
                      v-if="item.status !== 'settled'"
                      type="link"
                      @click="startCollect(row, item)"
                    >
                      دریافت
                    </a-button>
                  </a-card>
                </a-list-item>
              </template>
            </a-list>
            <a-table
              v-else
              :columns="installmentColumns"
              :data-source="row.installments"
              :pagination="false"
              row-key="id"
              :scroll="{ x: true }"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag>{{ statusLabel[record.status] ?? record.status }}</a-tag>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <a-button
                    v-if="record.status !== 'settled'"
                    type="link"
                    @click="startCollect(row, record as InstallmentRow)"
                  >
                    دریافت
                  </a-button>
                </template>
              </template>
            </a-table>
            <a-divider />
          </div>
        </template>
      </a-card>
  </a-flex>
</template>