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,652 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { api } from '@/lib/api';
|
||||
import { canViewAllRecords } from '@/lib/roles';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
import type {
|
||||
CompanyDto,
|
||||
CreateTicketRequest,
|
||||
FaqArticleDto,
|
||||
OrgUserDto,
|
||||
PaginatedResponse,
|
||||
PersonDto,
|
||||
TicketDto,
|
||||
TicketPriority,
|
||||
TicketStatus,
|
||||
} from '@mento/shared';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
const id = computed(() =>
|
||||
typeof route.params.id === 'string' ? route.params.id : '',
|
||||
);
|
||||
const isNew = computed(() => route.name === 'ticket-new');
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const messaging = ref(false);
|
||||
const csatSaving = ref(false);
|
||||
const error = ref('');
|
||||
const number = ref('');
|
||||
const subject = ref('');
|
||||
const description = ref('');
|
||||
const status = ref<TicketStatus>('open');
|
||||
const priority = ref<TicketPriority>('normal');
|
||||
const personId = ref('');
|
||||
const companyId = ref('');
|
||||
const assigneeId = ref('');
|
||||
const people = ref<PersonDto[]>([]);
|
||||
const companies = ref<CompanyDto[]>([]);
|
||||
const users = ref<OrgUserDto[]>([]);
|
||||
const ticket = ref<TicketDto | null>(null);
|
||||
const reply = ref('');
|
||||
const replyInternal = ref(false);
|
||||
const faqHints = ref<FaqArticleDto[]>([]);
|
||||
const csatScore = ref<number | null>(null);
|
||||
const csatComment = ref('');
|
||||
|
||||
const canAssignOthers = computed(() => canViewAllRecords(auth.user?.role));
|
||||
|
||||
const showCsat = computed(() => {
|
||||
if (!ticket.value || isNew.value) return false;
|
||||
const s = status.value;
|
||||
return s === 'resolved' || s === 'closed';
|
||||
});
|
||||
|
||||
const statusLabel: Record<TicketStatus, string> = {
|
||||
open: 'باز',
|
||||
in_progress: 'در حال رسیدگی',
|
||||
waiting: 'در انتظار',
|
||||
resolved: 'حلشده',
|
||||
closed: 'بسته',
|
||||
};
|
||||
|
||||
const priorityLabel: Record<TicketPriority, string> = {
|
||||
low: 'کم',
|
||||
normal: 'عادی',
|
||||
high: 'بالا',
|
||||
urgent: 'فوری',
|
||||
};
|
||||
|
||||
function formatWhen(iso: string) {
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFaqHints() {
|
||||
if (!isNew.value) {
|
||||
faqHints.value = [];
|
||||
return;
|
||||
}
|
||||
const q = subject.value.trim();
|
||||
if (q.length < 2) {
|
||||
faqHints.value = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { data } = await api.get<FaqArticleDto[]>('/faq', {
|
||||
params: { q, publishedOnly: true },
|
||||
});
|
||||
faqHints.value = data.slice(0, 5);
|
||||
} catch {
|
||||
faqHints.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
let faqTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
watch(subject, () => {
|
||||
if (!isNew.value) return;
|
||||
if (faqTimer) clearTimeout(faqTimer);
|
||||
faqTimer = setTimeout(() => void loadFaqHints(), 350);
|
||||
});
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const [peopleRes, companiesRes] = await Promise.all([
|
||||
api.get<PaginatedResponse<PersonDto>>('/people', {
|
||||
params: { limit: 100 },
|
||||
}),
|
||||
api.get<PaginatedResponse<CompanyDto>>('/companies', {
|
||||
params: { limit: 100 },
|
||||
}),
|
||||
]);
|
||||
people.value = peopleRes.data.items;
|
||||
companies.value = companiesRes.data.items;
|
||||
|
||||
if (canAssignOthers.value) {
|
||||
try {
|
||||
users.value = (await api.get<OrgUserDto[]>('/users')).data;
|
||||
} catch {
|
||||
users.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
if (!isNew.value && id.value) {
|
||||
const { data } = await api.get<TicketDto>(`/tickets/${id.value}`);
|
||||
ticket.value = data;
|
||||
number.value = data.number;
|
||||
subject.value = data.subject;
|
||||
description.value = data.description ?? '';
|
||||
status.value = data.status as TicketStatus;
|
||||
priority.value = data.priority as TicketPriority;
|
||||
personId.value = data.person?.id ?? '';
|
||||
companyId.value = data.company?.id ?? '';
|
||||
assigneeId.value = data.assignee?.id ?? '';
|
||||
csatScore.value = data.csatScore;
|
||||
csatComment.value = data.csatComment ?? '';
|
||||
} else {
|
||||
ticket.value = null;
|
||||
assigneeId.value = auth.user?.id ?? '';
|
||||
csatScore.value = null;
|
||||
csatComment.value = '';
|
||||
void loadFaqHints();
|
||||
}
|
||||
} catch {
|
||||
error.value = 'بارگذاری تیکت ناموفق بود.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function payload(): CreateTicketRequest {
|
||||
return {
|
||||
subject: subject.value.trim(),
|
||||
description: description.value || undefined,
|
||||
status: status.value,
|
||||
priority: priority.value,
|
||||
personId: personId.value || null,
|
||||
companyId: companyId.value || null,
|
||||
assigneeId: assigneeId.value || null,
|
||||
};
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!subject.value.trim()) {
|
||||
error.value = 'موضوع را وارد کنید.';
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const { data } = await api.post<TicketDto>('/tickets', payload());
|
||||
await router.replace({ name: 'ticket-detail', params: { id: data.id } });
|
||||
} else {
|
||||
await api.patch(`/tickets/${id.value}`, payload());
|
||||
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 saveCsat() {
|
||||
if (!id.value || csatScore.value == null) {
|
||||
error.value = 'امتیاز رضایت را انتخاب کنید.';
|
||||
return;
|
||||
}
|
||||
csatSaving.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.patch<TicketDto>(`/tickets/${id.value}`, {
|
||||
csatScore: csatScore.value,
|
||||
csatComment: csatComment.value.trim() || null,
|
||||
});
|
||||
ticket.value = data;
|
||||
csatScore.value = data.csatScore;
|
||||
csatComment.value = data.csatComment ?? '';
|
||||
} 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 {
|
||||
csatSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendReply() {
|
||||
if (!id.value || !reply.value.trim()) return;
|
||||
messaging.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.post<TicketDto>(`/tickets/${id.value}/messages`, {
|
||||
body: reply.value.trim(),
|
||||
isInternal: replyInternal.value,
|
||||
});
|
||||
ticket.value = data;
|
||||
reply.value = '';
|
||||
replyInternal.value = false;
|
||||
} 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 {
|
||||
messaging.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!id.value || !confirm('این تیکت حذف شود؟')) return;
|
||||
await api.delete(`/tickets/${id.value}`);
|
||||
await router.push({ name: 'tickets' });
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<RouterLink class="back" :to="{ name: 'tickets' }"
|
||||
>← بازگشت به لیست</RouterLink
|
||||
>
|
||||
<h1>{{ isNew ? 'تیکت جدید' : number || 'تیکت' }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<template v-else>
|
||||
<aside
|
||||
v-if="!isNew && ticket?.slaDueAt"
|
||||
class="sla-box"
|
||||
:class="{ bad: ticket.slaBreached }"
|
||||
>
|
||||
<template v-if="ticket.slaBreached">مهلت پاسخ اول گذشته است.</template>
|
||||
<template v-else-if="ticket.firstRespondedAt">
|
||||
پاسخ اول ثبت شد ({{ formatWhen(ticket.firstRespondedAt) }}).
|
||||
</template>
|
||||
<template v-else>
|
||||
مهلت پاسخ اول: {{ formatWhen(ticket.slaDueAt) }}
|
||||
</template>
|
||||
</aside>
|
||||
|
||||
<form class="form" @submit.prevent="save">
|
||||
<div class="grid">
|
||||
<div class="field wide">
|
||||
<label>موضوع</label>
|
||||
<input v-model="subject" required maxlength="200" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>وضعیت</label>
|
||||
<select v-model="status">
|
||||
<option
|
||||
v-for="(label, key) in statusLabel"
|
||||
:key="key"
|
||||
:value="key"
|
||||
>
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>اولویت</label>
|
||||
<select v-model="priority">
|
||||
<option
|
||||
v-for="(label, key) in priorityLabel"
|
||||
:key="key"
|
||||
:value="key"
|
||||
>
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>شخص</label>
|
||||
<select v-model="personId">
|
||||
<option value="">بدون شخص</option>
|
||||
<option v-for="p in people" :key="p.id" :value="p.id">
|
||||
{{ p.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>شرکت</label>
|
||||
<select v-model="companyId">
|
||||
<option value="">بدون شرکت</option>
|
||||
<option v-for="c in companies" :key="c.id" :value="c.id">
|
||||
{{ c.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="canAssignOthers" class="field">
|
||||
<label>مسئول</label>
|
||||
<select v-model="assigneeId">
|
||||
<option value="">بدون مسئول</option>
|
||||
<option v-for="u in users" :key="u.id" :value="u.id">
|
||||
{{ u.fullName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field wide">
|
||||
<label>{{ isNew ? 'شرح اولیه' : 'شرح' }}</label>
|
||||
<textarea v-model="description" rows="4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isNew && faqHints.length" class="faq-hints">
|
||||
<p class="faq-title">شاید این FAQ کمک کند:</p>
|
||||
<details v-for="f in faqHints" :key="f.id">
|
||||
<summary>{{ f.question }}</summary>
|
||||
<p>{{ f.answer }}</p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<div class="form-actions">
|
||||
<button class="btn" type="submit" :disabled="saving">
|
||||
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!isNew"
|
||||
class="btn btn-danger"
|
||||
type="button"
|
||||
:disabled="saving"
|
||||
@click="remove"
|
||||
>
|
||||
حذف
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<section v-if="showCsat" class="csat">
|
||||
<h2>رضایت مشتری (CSAT)</h2>
|
||||
<div class="csat-scores">
|
||||
<button
|
||||
v-for="n in 5"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="score"
|
||||
:class="{ active: csatScore === n }"
|
||||
@click="csatScore = n"
|
||||
>
|
||||
{{ n }}
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
v-model="csatComment"
|
||||
rows="2"
|
||||
placeholder="نظر اختیاری…"
|
||||
/>
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="csatSaving || csatScore == null"
|
||||
@click="saveCsat"
|
||||
>
|
||||
{{ csatSaving ? '…' : ticket?.csatAt ? 'بهروزرسانی رضایت' : 'ثبت رضایت' }}
|
||||
</button>
|
||||
<p v-if="ticket?.csatAt" class="muted">
|
||||
آخرین ثبت: {{ formatWhen(ticket.csatAt) }}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section v-if="!isNew && ticket" class="thread">
|
||||
<h2>گفتگو</h2>
|
||||
<div v-if="ticket.messages.length" class="messages">
|
||||
<article
|
||||
v-for="msg in ticket.messages"
|
||||
:key="msg.id"
|
||||
class="msg"
|
||||
:class="{ internal: msg.isInternal }"
|
||||
>
|
||||
<header>
|
||||
<strong>{{ msg.author?.fullName || 'سیستم' }}</strong>
|
||||
<span class="muted">{{ formatWhen(msg.createdAt) }}</span>
|
||||
<span v-if="msg.isInternal" class="tag">داخلی</span>
|
||||
</header>
|
||||
<p>{{ msg.body }}</p>
|
||||
</article>
|
||||
</div>
|
||||
<p v-else class="muted">هنوز پیامی نیست.</p>
|
||||
|
||||
<form class="reply" @submit.prevent="sendReply">
|
||||
<textarea
|
||||
v-model="reply"
|
||||
rows="3"
|
||||
placeholder="پاسخ یا یادداشت…"
|
||||
required
|
||||
/>
|
||||
<label class="check">
|
||||
<input v-model="replyInternal" type="checkbox" />
|
||||
یادداشت داخلی (فقط تیم)
|
||||
</label>
|
||||
<button class="btn" type="submit" :disabled="messaging">
|
||||
{{ messaging ? '…' : 'ارسال' }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.form,
|
||||
.thread,
|
||||
.csat {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.sla-box {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
background: color-mix(in srgb, var(--accent) 8%, #fff);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.sla-box.bad {
|
||||
border-color: color-mix(in srgb, #b42318 40%, var(--line));
|
||||
background: color-mix(in srgb, #b42318 8%, #fff);
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.field.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.85rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.faq-hints {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.faq-hints details {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.faq-hints p {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--muted);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.csat,
|
||||
.thread {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.csat-scores {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.score {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.score.active {
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 12%, #fff);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.messages {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.msg {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem 0.9rem;
|
||||
}
|
||||
|
||||
.msg.internal {
|
||||
background: color-mix(in srgb, var(--accent) 6%, #fff);
|
||||
}
|
||||
|
||||
.msg header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.msg p {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reply {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #b42318;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user