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,407 @@
|
||||
<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 type { ActivityDto, ActivityFilter, PaginatedResponse } from '@mento/shared';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const filter = computed<ActivityFilter>(() => {
|
||||
const value = typeof route.query.filter === 'string' ? route.query.filter : 'today';
|
||||
if (['today', 'overdue', 'upcoming', 'done', 'all'].includes(value)) {
|
||||
return value as ActivityFilter;
|
||||
}
|
||||
return 'today';
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const data = ref<PaginatedResponse<ActivityDto> | null>(null);
|
||||
const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
|
||||
|
||||
const typeLabel: Record<ActivityDto['type'], string> = {
|
||||
call: 'تماس',
|
||||
meeting: 'جلسه',
|
||||
task: 'وظیفه',
|
||||
note: 'یادداشت',
|
||||
};
|
||||
|
||||
function formatDue(value: string | null) {
|
||||
if (!value) return 'بدون موعد';
|
||||
try {
|
||||
return new Intl.DateTimeFormat('fa-IR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value));
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data: res } = await api.get<PaginatedResponse<ActivityDto>>('/activities', {
|
||||
params: { filter: filter.value, q: q.value || undefined, limit: 50 },
|
||||
});
|
||||
data.value = res;
|
||||
} catch (e) {
|
||||
if (axios.isAxiosError(e) && !e.response) {
|
||||
error.value = 'اتصال به API برقرار نشد.';
|
||||
} else {
|
||||
error.value = 'بارگذاری فعالیت‌ها ناموفق بود.';
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function setFilter(next: ActivityFilter) {
|
||||
router.replace({
|
||||
name: 'activities',
|
||||
query: {
|
||||
...route.query,
|
||||
filter: next === 'today' ? undefined : next,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
router.replace({
|
||||
name: 'activities',
|
||||
query: {
|
||||
...route.query,
|
||||
q: q.value.trim() || undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function complete(id: string) {
|
||||
try {
|
||||
await api.patch(`/activities/${id}/complete`);
|
||||
await load();
|
||||
} catch {
|
||||
error.value = 'ثبت انجام‌شدن ناموفق بود.';
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [route.query.filter, route.query.q],
|
||||
() => {
|
||||
q.value = typeof route.query.q === 'string' ? route.query.q : '';
|
||||
void load();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<div>
|
||||
<p class="eyebrow">پیگیری</p>
|
||||
<h1>فعالیت‌ها</h1>
|
||||
<p class="lead">تماس، جلسه و وظیفه — امروز و عقب‌افتاده‌ها یکجا.</p>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<RouterLink class="btn btn-ghost" :to="{ name: 'activities-calendar' }">تقویم</RouterLink>
|
||||
<RouterLink class="btn" :to="{ name: 'activity-new' }">فعالیت جدید</RouterLink>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="toolbar">
|
||||
<div class="tabs">
|
||||
<button type="button" :class="{ active: filter === 'today' }" @click="setFilter('today')">
|
||||
امروز
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: filter === 'overdue' }"
|
||||
@click="setFilter('overdue')"
|
||||
>
|
||||
عقب‌افتاده
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: filter === 'upcoming' }"
|
||||
@click="setFilter('upcoming')"
|
||||
>
|
||||
بعداً
|
||||
</button>
|
||||
<button type="button" :class="{ active: filter === 'done' }" @click="setFilter('done')">
|
||||
انجام‌شده
|
||||
</button>
|
||||
<button type="button" :class="{ active: filter === 'all' }" @click="setFilter('all')">
|
||||
همه
|
||||
</button>
|
||||
</div>
|
||||
<form class="search" @submit.prevent="onSearch">
|
||||
<input v-model="q" type="search" placeholder="جستجو در عنوان…" />
|
||||
<button class="btn btn-ghost" type="submit">جستجو</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<div v-else class="list">
|
||||
<article v-for="item in data?.items || []" :key="item.id" class="item">
|
||||
<div class="main">
|
||||
<p class="type">{{ typeLabel[item.type] }}</p>
|
||||
<RouterLink :to="{ name: 'activity-detail', params: { id: item.id } }">
|
||||
<h2>{{ item.title }}</h2>
|
||||
</RouterLink>
|
||||
<p class="meta">
|
||||
<span>{{ formatDue(item.dueAt) }}</span>
|
||||
<span v-if="item.person"> · {{ item.person.fullName }}</span>
|
||||
<span v-if="item.deal"> · {{ item.deal.title }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
v-if="item.status === 'open'"
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
@click="complete(item.id)"
|
||||
>
|
||||
انجام شد
|
||||
</button>
|
||||
<span v-else class="done">انجام‌شده</span>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="!data?.items.length" class="empty">فعالیتی در این فهرست نیست.</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.2rem 0;
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted,
|
||||
.meta,
|
||||
.empty,
|
||||
.done {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
flex-wrap: wrap;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.25rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0.55rem 0.85rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.tabs button.active {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 200px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.7rem 0.9rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 1rem 1.1rem;
|
||||
box-shadow: var(--shadow);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.type {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0.2rem 0;
|
||||
font-size: 1.05rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin: 0.2rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.main a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 0;
|
||||
padding: 1.2rem;
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
h1 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.head-actions .btn {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.tabs button {
|
||||
padding: 0.5rem 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search input {
|
||||
flex: 1 1 auto;
|
||||
height: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
max-height: 2.75rem;
|
||||
padding: 0 0.9rem;
|
||||
}
|
||||
|
||||
.search .btn {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.item .actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user