Initial Mento CRM: portal OTP, reports, SMS, and deploy for crm.montzar.ir.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,438 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import { canReassignRecords, canViewAllRecords } from '@/lib/roles';
|
||||
import { formatMoney as formatMoneyLib } from '@/lib/money';
|
||||
import type {
|
||||
CreateSalesGoalRequest,
|
||||
OrgUserDto,
|
||||
SalesForecastDto,
|
||||
SalesGoalDto,
|
||||
} from '@mento/shared';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const forecast = ref<SalesForecastDto | null>(null);
|
||||
const users = ref<OrgUserDto[]>([]);
|
||||
|
||||
const title = ref('هدف فروش ماه جاری');
|
||||
const targetAmount = ref('');
|
||||
const notes = ref('');
|
||||
const userId = ref('');
|
||||
const periodStart = ref('');
|
||||
const periodEnd = ref('');
|
||||
|
||||
const canManageTeamGoals = computed(() => canReassignRecords(auth.user?.role));
|
||||
const showAllHint = computed(() => canViewAllRecords(auth.user?.role));
|
||||
|
||||
function monthBounds() {
|
||||
const now = new Date();
|
||||
const start = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1));
|
||||
const end = new Date(
|
||||
Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 0),
|
||||
);
|
||||
return {
|
||||
start: start.toISOString().slice(0, 10),
|
||||
end: end.toISOString().slice(0, 10),
|
||||
};
|
||||
}
|
||||
|
||||
function formatMoney(amount: number) {
|
||||
return formatMoneyLib(amount, forecast.value?.currency || 'IRR');
|
||||
}
|
||||
|
||||
function formatDate(iso: string) {
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fa-IR').format(new Date(iso));
|
||||
} catch {
|
||||
return iso.slice(0, 10);
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get<SalesForecastDto>('/sales/forecast');
|
||||
forecast.value = data;
|
||||
if (canManageTeamGoals.value && !users.value.length) {
|
||||
try {
|
||||
const res = await api.get<OrgUserDto[]>('/users');
|
||||
users.value = res.data;
|
||||
} catch {
|
||||
// optional
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && !e.response) {
|
||||
error.value = 'اتصال به API برقرار نشد.';
|
||||
} else {
|
||||
error.value = 'بارگذاری پیش‌بینی ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createGoal() {
|
||||
if (!title.value.trim() || !targetAmount.value) {
|
||||
error.value = 'عنوان و مبلغ هدف را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const bounds = monthBounds();
|
||||
const body: CreateSalesGoalRequest = {
|
||||
title: title.value.trim(),
|
||||
periodStart: new Date(periodStart.value || bounds.start).toISOString(),
|
||||
periodEnd: new Date(
|
||||
(periodEnd.value || bounds.end) + 'T23:59:59.000Z',
|
||||
).toISOString(),
|
||||
targetAmount: Number(targetAmount.value),
|
||||
notes: notes.value || undefined,
|
||||
userId: canManageTeamGoals.value
|
||||
? userId.value === ''
|
||||
? null
|
||||
: userId.value
|
||||
: undefined,
|
||||
currency: 'IRR',
|
||||
};
|
||||
await api.post<SalesGoalDto>('/sales/goals', body);
|
||||
targetAmount.value = '';
|
||||
notes.value = '';
|
||||
await load();
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
error.value = Array.isArray(msg)
|
||||
? msg.join('، ')
|
||||
: (msg ?? 'ثبت هدف ناموفق بود');
|
||||
} else {
|
||||
error.value = 'ثبت هدف ناموفق بود';
|
||||
}
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeGoal(id: string) {
|
||||
if (!confirm('این هدف حذف شود؟')) return;
|
||||
await api.delete(`/sales/goals/${id}`);
|
||||
await load();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const b = monthBounds();
|
||||
periodStart.value = b.start;
|
||||
periodEnd.value = b.end;
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">فروش</p>
|
||||
<h1>هدف و پیش‌بینی</h1>
|
||||
<p class="lead">
|
||||
هدف ماهانه را بگذارید و تحقق، کاریز باز و پیش‌بینی ساده را ببینید.
|
||||
<span v-if="!showAllHint"> اعداد بر اساس پرونده‌های شماست.</span>
|
||||
</p>
|
||||
</div>
|
||||
<RouterLink class="btn btn-ghost" :to="{ name: 'home' }">خانه</RouterLink>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<div v-if="forecast" class="metrics">
|
||||
<article>
|
||||
<p class="label">هدف دوره</p>
|
||||
<strong>{{ formatMoney(forecast.targetAmount) }}</strong>
|
||||
</article>
|
||||
<article>
|
||||
<p class="label">تحقق (برنده)</p>
|
||||
<strong>{{ formatMoney(forecast.wonAmount) }}</strong>
|
||||
<span class="muted">{{ forecast.wonDealsCount }} معامله</span>
|
||||
</article>
|
||||
<article>
|
||||
<p class="label">کاریز باز</p>
|
||||
<strong>{{ formatMoney(forecast.openPipelineAmount) }}</strong>
|
||||
<span class="muted">{{ forecast.openDealsCount }} معامله</span>
|
||||
</article>
|
||||
<article class="accent">
|
||||
<p class="label">پیش‌بینی ساده</p>
|
||||
<strong>{{ formatMoney(forecast.forecastAmount) }}</strong>
|
||||
<span class="muted">تحقق + ۴۰٪ کاریز باز</span>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-if="forecast" class="progress-block">
|
||||
<div class="progress-head">
|
||||
<span>پیشرفت نسبت به هدف</span>
|
||||
<strong>
|
||||
{{
|
||||
forecast.progressPercent == null
|
||||
? '—'
|
||||
: `${new Intl.NumberFormat('fa-IR').format(forecast.progressPercent)}٪`
|
||||
}}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div
|
||||
class="fill"
|
||||
:style="{
|
||||
width: `${Math.min(100, forecast.progressPercent ?? 0)}%`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<p class="muted period">
|
||||
{{ formatDate(forecast.periodStart) }}
|
||||
تا
|
||||
{{ formatDate(forecast.periodEnd) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form-card" @submit.prevent="createGoal">
|
||||
<h2>هدف جدید</h2>
|
||||
<div class="grid">
|
||||
<div class="field wide">
|
||||
<label>عنوان</label>
|
||||
<input v-model="title" required maxlength="200" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>مبلغ هدف (ریال)</label>
|
||||
<input v-model="targetAmount" type="number" min="0" step="1" required />
|
||||
</div>
|
||||
<div v-if="canManageTeamGoals" class="field">
|
||||
<label>برای</label>
|
||||
<select v-model="userId">
|
||||
<option value="">کل سازمان</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>از تاریخ</label>
|
||||
<input v-model="periodStart" type="date" required />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>تا تاریخ</label>
|
||||
<input v-model="periodEnd" type="date" required />
|
||||
</div>
|
||||
<div class="field wide">
|
||||
<label>یادداشت</label>
|
||||
<input v-model="notes" maxlength="2000" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" type="submit" :disabled="saving">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ثبت هدف' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="goals">
|
||||
<h2>اهداف این دوره</h2>
|
||||
<div v-if="forecast?.goals.length" class="goal-list">
|
||||
<div v-for="g in forecast.goals" :key="g.id" class="goal-row">
|
||||
<div>
|
||||
<strong>{{ g.title }}</strong>
|
||||
<p class="muted">
|
||||
{{ formatMoney(g.targetAmount) }}
|
||||
· {{ formatDate(g.periodStart) }} تا {{ formatDate(g.periodEnd) }}
|
||||
<span v-if="g.user"> · {{ g.user.fullName }}</span>
|
||||
<span v-else> · سازمانی</span>
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn btn-ghost" type="button" @click="removeGoal(g.id)">
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="empty">هنوز هدفی برای این دوره ثبت نشده.</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
max-width: 920px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.metrics article {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 1rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.metrics .accent {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
|
||||
.label {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.progress-block {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.progress-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--line) 80%, #fff);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.period {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-card,
|
||||
.goals {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.7rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.field.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goal-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.goal-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
padding: 0.7rem 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.goal-row p {
|
||||
margin: 0.2rem 0 0;
|
||||
}
|
||||
|
||||
.empty,
|
||||
.error {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.metrics,
|
||||
.grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.metrics,
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user