MahdiandCursor
ab538b8304
Keep booked income and expense separate from cash balances, with installments, recurring items, and reports. Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
3.4 KiB
Vue
85 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import axios from 'axios';
|
|
import { api } from '@/lib/api';
|
|
import { UiButton, UiCard, UiField, UiInput, UiPageHeader } from '@/components/ui';
|
|
import TreasuryNav from '@/components/treasury/TreasuryNav.vue';
|
|
import { toman } from './treasury-format';
|
|
import { formatJalaliNumeric } from '@/lib/jalali';
|
|
|
|
type Row = { id: string; title: string; kind: string; amount: string; interval: string; nextDue: string; isActive: boolean };
|
|
const rows = ref<Row[]>([]);
|
|
const error = ref('');
|
|
const ok = ref('');
|
|
const form = ref({ title: '', kind: 'expense', amount: '', interval: 'monthly', startDate: '' });
|
|
|
|
async function load() {
|
|
const { data } = await api.get<Row[]>('/treasury/recurring');
|
|
rows.value = data;
|
|
}
|
|
|
|
async function createItem() {
|
|
error.value = '';
|
|
try {
|
|
await api.post('/treasury/recurring', form.value);
|
|
ok.value = 'الگو ثبت شد. در سررسید فقط سند باز ساخته میشود.';
|
|
await load();
|
|
} catch (e) {
|
|
error.value = axios.isAxiosError(e)
|
|
? String((e.response?.data as { message?: string })?.message ?? 'ثبت ناموفق بود.')
|
|
: 'ثبت ناموفق بود.';
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void load();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="page">
|
|
<UiPageHeader title="درآمد و هزینه تکرارشونده" description="تا تأیید دریافت یا پرداخت، موجودی حساب عوض نمیشود." />
|
|
<TreasuryNav />
|
|
<p v-if="error" class="err">{{ error }}</p>
|
|
<p v-if="ok" class="ok">{{ ok }}</p>
|
|
<UiCard title="الگوی جدید">
|
|
<div class="grid">
|
|
<UiField label="عنوان"><UiInput v-model="form.title" /></UiField>
|
|
<UiField label="نوع">
|
|
<select v-model="form.kind" class="select">
|
|
<option value="expense">هزینه</option>
|
|
<option value="income">درآمد</option>
|
|
</select>
|
|
</UiField>
|
|
<UiField label="مبلغ"><UiInput v-model="form.amount" /></UiField>
|
|
<UiField label="دوره">
|
|
<select v-model="form.interval" class="select">
|
|
<option value="monthly">ماهانه</option>
|
|
<option value="weekly">هفتگی</option>
|
|
<option value="yearly">سالانه</option>
|
|
</select>
|
|
</UiField>
|
|
<UiField label="شروع"><UiInput v-model="form.startDate" type="date" /></UiField>
|
|
</div>
|
|
<UiButton @click="createItem">ثبت الگو</UiButton>
|
|
</UiCard>
|
|
<article v-for="row in rows" :key="row.id" class="row">
|
|
<div>
|
|
<strong>{{ row.title }}</strong>
|
|
<small>{{ row.kind === 'income' ? 'درآمد' : 'هزینه' }} · {{ row.interval }} · بعدی {{ formatJalaliNumeric(new Date(row.nextDue)) }}</small>
|
|
</div>
|
|
<b>{{ toman(row.amount) }}</b>
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page { display: grid; gap: 1rem; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
|
|
.select { width: 100%; min-height: var(--control-h); border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
|
|
.row { display: flex; justify-content: space-between; background: #fff; border: 1px solid #e7eef2; border-radius: 14px; padding: 0.8rem 1rem; }
|
|
.row small { display: block; color: #64748b; }
|
|
.err { color: #b91c1c; font-weight: 700; }
|
|
.ok { color: #0f766e; font-weight: 700; }
|
|
</style>
|