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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import {
  Alert as AAlert,
  Button as AButton,
  Card as ACard,
  Col as ACol,
  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,
  Statistic as AStatistic,
  Tag as ATag,
  Typography,
  message,
} from 'ant-design-vue';
import { api } from '@/lib/api';
import type { FinancialAccountDto, FinancialAccountType } from '@mento/shared';
import MoneyInput from '@/components/MoneyInput.vue';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import { toman } from './treasury-format';
import { parseMoneyNumber } from '@/lib/money';

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

const accounts = ref<FinancialAccountDto[]>([]);
const error = ref('');
const ok = ref('');
const openForm = ref(false);
const saving = ref(false);
const transferOpen = ref(false);
const form = ref({
  name: '',
  type: 'cash' as FinancialAccountType,
  bankName: '',
  accountRef: '',
  responsibleName: '',
  openingBalance: '',
  openingDate: '',
  notes: '',
});
const transfer = ref({
  fromAccountId: '',
  toAccountId: '',
  amount: '',
  memo: '',
});

const active = computed(() => accounts.value.filter((row) => row.isActive));
const total = computed(() =>
  active.value.reduce((sum, row) => sum + Number(row.balance), 0),
);
const periodIn = computed(() =>
  active.value.reduce((sum, row) => sum + Number(row.periodIn), 0),
);
const periodOut = computed(() =>
  active.value.reduce((sum, row) => sum + Number(row.periodOut), 0),
);

const typeLabel: Record<string, string> = {
  bank: 'حساب بانکی',
  cash: 'صندوق نقدی',
  petty: 'تنخواه',
};

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 { data } = await api.get<FinancialAccountDto[]>('/treasury/accounts');
  accounts.value = data;
}

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

async function createAccount() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const openingBalance = parseMoneyNumber(String(form.value.openingBalance ?? ''), 0) ?? 0;
    await api.post('/treasury/accounts', {
      ...form.value,
      openingBalance,
      openingDate: form.value.openingDate || undefined,
    });
    openForm.value = false;
    form.value = {
      name: '',
      type: 'cash',
      bankName: '',
      accountRef: '',
      responsibleName: '',
      openingBalance: '',
      openingDate: '',
      notes: '',
    };
    ok.value = 'حساب ثبت شد. موجودی اولیه درآمد دوره نیست.';
    await load();
  } catch (e) {
    error.value = apiMessage(e);
  } finally {
    saving.value = false;
  }
}

async function sendTransfer() {
  saving.value = true;
  error.value = '';
  ok.value = '';
  try {
    const amount = parseMoneyNumber(String(transfer.value.amount ?? ''), 0);
    if (amount == null || amount <= 0) {
      error.value = 'مبلغ انتقال معتبر نیست.';
      return;
    }
    await api.post('/treasury/transfers', {
      fromAccountId: transfer.value.fromAccountId,
      toAccountId: transfer.value.toAccountId,
      amount,
      memo: transfer.value.memo || undefined,
      clientKey: crypto.randomUUID(),
    });
    transferOpen.value = false;
    transfer.value = { fromAccountId: '', toAccountId: '', amount: '', memo: '' };
    ok.value = 'انتقال ثبت شد و در درآمد یا هزینه نیامده است.';
    await load();
  } catch (e) {
    error.value = apiMessage(e);
  } finally {
    saving.value = false;
  }
}

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-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false">
            <a-statistic title="مجموع موجودی حساب‌ها" :value="toman(total)" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false">
            <a-statistic
              title="ورودی این فهرست"
              :value="toman(periodIn)"
              :value-style="{ color: 'var(--ant-color-success)' }"
            />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false">
            <a-statistic
              title="خروجی این فهرست"
              :value="toman(periodOut)"
              :value-style="{ color: 'var(--ant-color-error)' }"
            />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :md="6">
          <a-card :bordered="false">
            <a-statistic title="حساب‌های فعال" :value="`${active.length} حساب`" />
          </a-card>
        </a-col>
      </a-row>

      <a-card :bordered="false">
        <a-space>
          <a-button type="primary" @click="openForm = !openForm">افزودن حساب جدید</a-button>
          <a-button @click="transferOpen = !transferOpen">انتقال وجه</a-button>
        </a-space>

        <template v-if="openForm">
          <a-divider orientation="right">حساب جدید</a-divider>
          <a-form
            layout="vertical"
            :model="form"
            @finish="createAccount"
            @finishFailed="onFinishFailed"
          >
            <a-row :gutter="[16, 0]">
              <a-col :xs="24" :md="12">
                <a-form-item
                  label="نام حساب"
                  name="name"
                  :rules="[{ required: true, message: 'نام حساب الزامی است' }]"
                >
                  <a-input v-model:value="form.name" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item label="نوع" name="type" :rules="[{ required: true }]">
                  <a-select v-model:value="form.type" style="width: 100%">
                    <a-select-option value="cash">صندوق نقدی</a-select-option>
                    <a-select-option value="bank">حساب بانکی</a-select-option>
                    <a-select-option value="petty">تنخواه</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col v-if="form.type === 'bank'" :xs="24" :md="8">
                <a-form-item label="نام بانک" name="bankName">
                  <a-input v-model:value="form.bankName" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item label="شماره یا شناسه" name="accountRef">
                  <a-input v-model:value="form.accountRef" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item label="مسئول" name="responsibleName">
                  <a-input v-model:value="form.responsibleName" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item label="موجودی اولیه" name="openingBalance">
                  <MoneyInput v-model="form.openingBalance" :decimals="0" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item label="تاریخ شروع" name="openingDate">
                  <JalaliDateInput v-model="form.openingDate" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="توضیحات" name="notes">
                  <a-input v-model:value="form.notes" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-button type="primary" html-type="submit" :loading="saving">ثبت حساب</a-button>
          </a-form>
        </template>

        <template v-if="transferOpen">
          <a-divider orientation="right">انتقال بین حساب‌ها</a-divider>
          <a-form
            layout="vertical"
            :model="transfer"
            @finish="sendTransfer"
            @finishFailed="onFinishFailed"
          >
            <a-row :gutter="[16, 0]">
              <a-col :xs="24" :md="12">
                <a-form-item
                  label="از حساب"
                  name="fromAccountId"
                  :rules="[{ required: true, message: 'حساب مبدأ الزامی است' }]"
                >
                  <a-select
                    v-model:value="transfer.fromAccountId"
                    allow-clear
                    style="width: 100%"
                    placeholder="انتخاب"
                  >
                    <a-select-option v-for="account in active" :key="account.id" :value="account.id">
                      {{ account.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item
                  label="به حساب"
                  name="toAccountId"
                  :rules="[{ required: true, message: 'حساب مقصد الزامی است' }]"
                >
                  <a-select
                    v-model:value="transfer.toAccountId"
                    allow-clear
                    style="width: 100%"
                    placeholder="انتخاب"
                  >
                    <a-select-option
                      v-for="account in active"
                      :key="`to-${account.id}`"
                      :value="account.id"
                    >
                      {{ account.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="8">
                <a-form-item
                  label="مبلغ"
                  name="amount"
                  :rules="[{ required: true, message: 'مبلغ الزامی است' }]"
                >
                  <MoneyInput v-model="transfer.amount" :decimals="0" />
                </a-form-item>
              </a-col>
              <a-col :xs="24" :md="12">
                <a-form-item label="شرح" name="memo">
                  <a-input v-model:value="transfer.memo" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-typography-text type="secondary">
              این انتقال درآمد یا هزینه نیست. اگر موجودی مبدأ کافی نباشد ثبت نمی‌شود.
            </a-typography-text>
            <div>
              <a-button type="primary" html-type="submit" :loading="saving">تأیید انتقال</a-button>
            </div>
          </a-form>
        </template>

        <a-divider orientation="right">فهرست حساب‌ها</a-divider>
        <a-empty v-if="!accounts.length" description="حسابی ثبت نشده است." />
        <a-list v-else item-layout="horizontal" :data-source="accounts">
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a-typography-text strong>{{ toman(item.balance) }}</a-typography-text>
                <RouterLink :to="`/finance/accounts/${item.id}`">جزئیات حساب</RouterLink>
              </template>
              <a-list-item-meta>
                <template #title>
                  {{ item.name }}
                  <a-tag v-if="!item.isActive">غیرفعال</a-tag>
                </template>
                <template #description>
                  {{ typeLabel[item.type] }} · مشاهده گردش حساب و جزئیات
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-card>
  </a-flex>
</template>