Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify the web UI on shared controls and let pipeline columns be managed on the board.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-09-10 01:22:24 +03:30
co-authored by Cursor
parent f1aba1b386
commit b8ad4037b6
40 changed files with 2334 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/ActivitiesView.vue
+40 -13
View File
@@ -10,7 +10,10 @@ import {
startOfLocalDay,
toFaDigits,
} from '@/lib/jalali';
import UiButton from '@/components/ui/UiButton.vue';
import UiModal from '@/components/ui/UiModal.vue';
import UiIcon from '@/components/UiIcon.vue';
import ActivityFormView from '@/views/ActivityFormView.vue';
import type {
ActivityDto,
ActivityFilter,
@@ -62,6 +65,10 @@ const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
const typeFilter = ref<TypeFilter>('all');
const filterOpen = ref(false);
const ideasOpen = ref(false);
const activityModal = ref<{
type?: ActivityType;
title?: string;
} | null>(null);
const menuId = ref<string | null>(null);
const counts = ref<Record<ActivityFilter, number>>({
today: 0,
@@ -282,10 +289,10 @@ onMounted(() => {
<p class="lead">تماس، جلسه و وظیفه — امروز و عقب‌افتاده‌ها یکجا.</p>
</div>
<div class="head-actions">
<RouterLink class="btn primary" :to="{ name: 'activity-new' }">
<span>+</span>
<UiButton type="button" @click="activityModal = {}">
<UiIcon name="plus" :size="16" />
فعالیت جدید
</RouterLink>
</UiButton>
<RouterLink class="btn ghost" :to="{ name: 'activities-calendar' }">
<UiIcon name="calendar" :size="18" />
تقویم
@@ -360,24 +367,23 @@ onMounted(() => {
: 'فیلتر یا جستجو را عوض کنید، یا یک فعالیت جدید بسازید.'
}}
</p>
<RouterLink class="btn primary wide" :to="{ name: 'activity-new' }">
<span>+</span>
<UiButton block type="button" @click="activityModal = {}">
{{ trulyEmpty ? 'اولین فعالیتت رو ثبت کن' : 'فعالیت جدید' }}
</RouterLink>
</UiButton>
<button class="btn ghost wide" type="button" @click="ideasOpen = !ideasOpen">
<UiIcon name="lightbulb" :size="18" />
ایده‌هایی برای شروع
</button>
<div v-if="ideasOpen" class="idea-list">
<RouterLink :to="{ name: 'activity-new', query: { type: 'call', title: 'تماس پیگیری' } }">
<button type="button" @click="activityModal = { type: 'call', title: 'تماس پیگیری' }">
تماس پیگیری
</RouterLink>
<RouterLink :to="{ name: 'activity-new', query: { type: 'meeting', title: 'جلسه دمو' } }">
</button>
<button type="button" @click="activityModal = { type: 'meeting', title: 'جلسه دمو' }">
جلسه دمو
</RouterLink>
<RouterLink :to="{ name: 'activity-new', query: { type: 'task', title: 'وظیفه یادآوری' } }">
</button>
<button type="button" @click="activityModal = { type: 'task', title: 'وظیفه یادآوری' }">
وظیفه یادآوری
</RouterLink>
</button>
</div>
</div>
@@ -553,6 +559,21 @@ onMounted(() => {
<p class="per">نمایش {{ toFaDigits(PAGE_SIZE) }} در هر صفحه</p>
</footer>
</template>
<UiModal
:open="Boolean(activityModal)"
title="فعالیت جدید"
@close="activityModal = null"
>
<ActivityFormView
v-if="activityModal"
embedded
:initial-type="activityModal.type"
:initial-title="activityModal.title"
@saved="activityModal = null; void load(); void loadCounts()"
@cancel="activityModal = null"
/>
</UiModal>
</section>
</template>
@@ -792,7 +813,13 @@ h1 {
width: min(100%, 320px);
}
.idea-list a {
.idea-list a,
.idea-list button {
border: 0;
width: 100%;
text-align: right;
font: inherit;
cursor: pointer;
background: #f8fafc;
border-radius: 10px;
padding: 0.65rem 0.8rem;
apps/web/src/views/ActivityFormView.vue
+59 -15
View File
@@ -29,11 +29,28 @@ import type {
PipelineBoardDto,
} from '@mento/shared';
const props = withDefaults(
defineProps<{
embedded?: boolean;
entityId?: string;
initialPersonId?: string;
initialType?: ActivityType;
initialTitle?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();
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 === 'activity-new');
const id = computed(() => {
if (props.embedded) return props.entityId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() =>
props.embedded ? !props.entityId : route.name === 'activity-new',
);
const loading = ref(false);
const saving = ref(false);
@@ -190,18 +207,21 @@ async function load() {
isDone.value = data.status === 'done';
} else {
resetForm();
if (typeof route.query.personId === 'string' && route.query.personId) {
personId.value = route.query.personId;
}
const incomingPerson =
props.initialPersonId ||
(typeof route.query.personId === 'string' ? route.query.personId : '');
if (incomingPerson) personId.value = incomingPerson;
const incomingType = props.initialType || route.query.type;
if (
typeof route.query.type === 'string' &&
typeOptions.some((o) => o.value === route.query.type)
typeof incomingType === 'string' &&
typeOptions.some((o) => o.value === incomingType)
) {
type.value = route.query.type as ActivityType;
}
if (typeof route.query.title === 'string' && route.query.title) {
title.value = route.query.title;
type.value = incomingType as ActivityType;
}
const incomingTitle =
props.initialTitle ||
(typeof route.query.title === 'string' ? route.query.title : '');
if (incomingTitle) title.value = incomingTitle;
if (typeof route.query.dueAt === 'string' && route.query.dueAt) {
splitDue(new Date(route.query.dueAt).toISOString());
}
@@ -271,6 +291,10 @@ async function submit(next: 'detail' | 'new' = 'detail') {
status: isDone.value ? 'done' : 'open',
});
}
if (props.embedded) {
emit('saved');
return;
}
if (next === 'new') {
if (!isNew.value) {
await router.push({ name: 'activity-new' });
@@ -299,6 +323,10 @@ function bumpDuration(delta: number) {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
if (!isNew.value && id.value) {
void router.push({ name: 'activity-detail', params: { id: id.value } });
return;
@@ -310,8 +338,14 @@ watch([id, isNew], () => void load(), { immediate: true });
</script>
<template>
<section class="page" @click="typeOpen = assigneeOpen = personOpen = false">
<header class="desktop-head">
<section class="page" :class="{ embedded }" @click="typeOpen = assigneeOpen = personOpen = false">
<div v-if="embedded" class="embed-actions">
<button class="btn primary" type="button" :disabled="saving" @click="submit('detail')">
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
</div>
<header v-if="!embedded" class="desktop-head">
<p class="crumb">
<RouterLink :to="{ name: 'activities' }">فعالیت‌ها</RouterLink>
<span>‹</span>
@@ -333,7 +367,7 @@ watch([id, isNew], () => void load(), { immediate: true });
</div>
</header>
<header class="mobile-head">
<header v-if="!embedded" class="mobile-head">
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit('detail')">
<UiIcon name="check-plain" :size="22" />
</button>
@@ -579,7 +613,7 @@ watch([id, isNew], () => void load(), { immediate: true });
</aside>
</div>
<footer class="mobile-save">
<footer v-if="!embedded" class="mobile-save">
<button class="btn primary" type="button" :disabled="saving || loading" @click="submit('detail')">
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
</button>
@@ -594,6 +628,16 @@ watch([id, isNew], () => void load(), { immediate: true });
padding-bottom: 5.5rem;
}
.page.embedded {
padding-bottom: 0;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.desktop-head {
display: none;
justify-content: space-between;
apps/web/src/views/CompanyFormView.vue
+46 -5
View File
@@ -8,10 +8,22 @@ import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
import EntityTimeline from '@/components/EntityTimeline.vue';
import UiIcon from '@/components/UiIcon.vue';
const props = withDefaults(
defineProps<{
embedded?: boolean;
entityId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();
const route = useRoute();
const router = useRouter();
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
const isNew = computed(() => route.name === 'company-new');
const id = computed(() => {
if (props.embedded) return props.entityId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() => (props.embedded ? !props.entityId : route.name === 'company-new'));
const pageTitle = computed(() => (isNew.value ? 'شرکت جدید' : 'ویرایش شرکت'));
const loading = ref(false);
@@ -71,9 +83,17 @@ async function submit() {
try {
if (isNew.value) {
const { data } = await api.post<CompanyDto>('/companies', payload());
if (props.embedded) {
emit('saved');
return;
}
await router.replace({ name: 'company-detail', params: { id: data.id } });
} else {
await api.patch(`/companies/${id.value}`, payload());
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: 'contacts', query: { tab: 'companies' } });
}
} catch (e) {
@@ -103,6 +123,10 @@ async function remove() {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push({ name: 'contacts', query: { tab: 'companies' } });
}
@@ -110,8 +134,14 @@ onMounted(load);
</script>
<template>
<section class="page">
<header class="desktop-head">
<section class="page" :class="{ embedded }">
<div v-if="embedded" class="embed-actions">
<button class="btn primary" type="button" :disabled="saving" @click="submit">
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
</div>
<header v-if="!embedded" class="desktop-head">
<div class="title-block">
<span class="doc-ico"><UiIcon name="building" :size="22" /></span>
<div>
@@ -135,7 +165,7 @@ onMounted(load);
</div>
</header>
<header class="mobile-head">
<header v-if="!embedded" class="mobile-head">
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
<UiIcon name="check-plain" :size="22" />
</button>
@@ -206,6 +236,17 @@ onMounted(load);
padding-bottom: 1.5rem;
}
.page.embedded {
max-width: none;
padding-bottom: 0;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.desktop-head {
display: none;
justify-content: space-between;
apps/web/src/views/ContactsView.vue
+30 -6
View File
@@ -5,7 +5,11 @@ import axios from 'axios';
import { api } from '@/lib/api';
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
import UiButton from '@/components/ui/UiButton.vue';
import UiModal from '@/components/ui/UiModal.vue';
import UiIcon from '@/components/UiIcon.vue';
import PersonFormView from '@/views/PersonFormView.vue';
import CompanyFormView from '@/views/CompanyFormView.vue';
import type {
CompanyDto,
ImportContactsResult,
@@ -47,6 +51,7 @@ const fileInput = ref<HTMLInputElement | null>(null);
const menuId = ref<string | null>(null);
const sortOpen = ref(false);
const filterOpen = ref(false);
const contactModal = ref<'person' | 'company' | null>(null);
const total = computed(() =>
tab.value === 'people' ? people.value?.total ?? 0 : companies.value?.total ?? 0,
@@ -265,13 +270,13 @@ onMounted(load);
hidden
@change="onImportFile"
/>
<RouterLink
class="add-btn"
:to="tab === 'companies' ? { name: 'company-new' } : { name: 'person-new' }"
:title="tab === 'companies' ? 'شرکت جدید' : 'شخص جدید'"
<UiButton
type="button"
@click="contactModal = tab === 'companies' ? 'company' : 'person'"
>
<UiIcon name="plus" :size="22" />
</RouterLink>
<UiIcon name="plus" :size="16" />
{{ tab === 'companies' ? 'شرکت جدید' : 'شخص جدید' }}
</UiButton>
</div>
</header>
@@ -504,6 +509,25 @@ onMounted(load);
<button type="button" :disabled="page >= pageCount" @click="setPage(page + 1)">›</button>
</div>
</footer>
<UiModal
:open="Boolean(contactModal)"
:title="contactModal === 'company' ? 'شرکت جدید' : 'شخص جدید'"
@close="contactModal = null"
>
<PersonFormView
v-if="contactModal === 'person'"
embedded
@saved="contactModal = null; void load()"
@cancel="contactModal = null"
/>
<CompanyFormView
v-else-if="contactModal === 'company'"
embedded
@saved="contactModal = null; void load()"
@cancel="contactModal = null"
/>
</UiModal>
</section>
</template>
apps/web/src/views/DealFormView.vue
+61 -13
View File
@@ -37,11 +37,29 @@ type MenuKey = 'person' | 'company' | 'owner' | 'currency' | '';
type ContactKind = 'person' | 'company';
type DealHealth = 'normal' | 'stale' | 'rotten';
const props = withDefaults(
defineProps<{
embedded?: boolean;
dealId?: string;
initialPipelineId?: string;
initialStageId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{
saved: [];
cancel: [];
}>();
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 === 'deal-new');
const id = computed(() => {
if (props.embedded) return props.dealId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() => (props.embedded ? !props.dealId : route.name === 'deal-new'));
const pageTitle = computed(() => (isNew.value ? 'ایجاد معامله جدید' : 'ویرایش معامله'));
const loading = ref(false);
@@ -188,7 +206,8 @@ async function load() {
error.value = '';
try {
const queryPipelineId =
typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined;
props.initialPipelineId ||
(typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined);
const [peopleRes, companiesRes, pipelinesRes, productsRes, orgRes, usersRes] =
await Promise.all([
api.get<{ items: PersonDto[] }>('/people', { params: { limit: 100 } }),
@@ -254,12 +273,10 @@ async function load() {
companyId.value = route.query.companyId;
if (!personId.value) contactKind.value = 'company';
}
if (
typeof route.query.stageId === 'string' &&
route.query.stageId &&
stages.value.some((s) => s.id === route.query.stageId)
) {
stageId.value = route.query.stageId;
const incomingStage = props.initialStageId ||
(typeof route.query.stageId === 'string' ? route.query.stageId : '');
if (incomingStage && stages.value.some((s) => s.id === incomingStage)) {
stageId.value = incomingStage;
}
}
} catch {
@@ -318,6 +335,10 @@ function validate() {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push({ name: 'pipeline' });
}
@@ -338,6 +359,10 @@ async function submit() {
} catch {
/* deal saved; follow-up is optional */
}
if (props.embedded) {
emit('saved');
return;
}
await router.replace({ name: 'deal-detail', params: { id: data.id } });
} else {
await api.patch(`/deals/${id.value}`, {
@@ -347,6 +372,10 @@ async function submit() {
if (stageId.value) {
await api.patch(`/deals/${id.value}/move`, { stageId: stageId.value });
}
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: 'pipeline' });
}
} catch (e) {
@@ -374,8 +403,17 @@ onMounted(load);
</script>
<template>
<section class="page" @click="closeMenus">
<header class="desktop-head">
<section class="page" :class="{ embedded }" @click="closeMenus">
<div v-if="embedded" class="embed-actions">
<button class="btn primary" type="button" :disabled="saving" @click="submit">
{{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">
انصراف
</button>
</div>
<header v-if="!embedded" class="desktop-head">
<div class="title-block">
<span class="doc-ico">
<UiIcon name="document" :size="22" />
@@ -414,7 +452,7 @@ onMounted(load);
</div>
</header>
<header class="mobile-head">
<header v-if="!embedded" class="mobile-head">
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
<UiIcon name="check-plain" :size="22" />
</button>
@@ -748,7 +786,7 @@ onMounted(load);
</p>
</form>
<footer class="mobile-save">
<footer v-if="!embedded" class="mobile-save">
<button class="btn outline" type="button" :disabled="saving" @click="cancel">انصراف</button>
<button class="btn primary" type="button" :disabled="saving || loading" @click="submit">
{{ saving ? 'در حال ذخیره…' : 'ذخیره معامله' }}
@@ -765,6 +803,16 @@ onMounted(load);
min-width: 0;
}
.page.embedded {
padding-bottom: 0;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.desktop-head {
display: none;
justify-content: space-between;
apps/web/src/views/InvoiceFormView.vue
+58 -14
View File
@@ -51,11 +51,23 @@ type InstallmentDraft = {
amount: string;
};
const props = withDefaults(
defineProps<{
embedded?: boolean;
entityId?: string;
initialKind?: 'invoice' | 'credit' | 'quote';
initialFromDealId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();
const route = useRoute();
const router = useRouter();
const loadedInvoiceKind = ref<'invoice' | 'credit' | null>(null);
const docMode = computed<DocMode>(() => {
if (props.embedded && props.initialKind) return props.initialKind;
const name = String(route.name || '');
if (name.includes('quote')) return 'quote';
if (route.query.kind === 'credit' || route.query.doc === 'credit') return 'credit';
@@ -64,12 +76,14 @@ const docMode = computed<DocMode>(() => {
return 'invoice';
});
const id = computed(() =>
typeof route.params.id === 'string' ? route.params.id : '',
);
const isNew = computed(
() => route.name === 'invoice-new' || route.name === 'quote-new',
);
const id = computed(() => {
if (props.embedded) return props.entityId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() => {
if (props.embedded) return !props.entityId;
return route.name === 'invoice-new' || route.name === 'quote-new';
});
const isInvoiceDoc = computed(() => docMode.value !== 'quote');
const listRouteName = 'invoices';
@@ -376,11 +390,12 @@ async function prefillFromSources() {
const fromQuoteId =
typeof route.query.fromQuoteId === 'string' ? route.query.fromQuoteId : '';
const fromDealId =
typeof route.query.fromDealId === 'string'
props.initialFromDealId ||
(typeof route.query.fromDealId === 'string'
? route.query.fromDealId
: typeof route.query.dealId === 'string'
? route.query.dealId
: '';
: '');
const qPersonId =
typeof route.query.personId === 'string' ? route.query.personId : '';
@@ -528,8 +543,10 @@ async function load() {
function invoicePayload(): CreateInvoiceRequest {
const fromDealId =
isNew.value && typeof route.query.fromDealId === 'string'
? route.query.fromDealId
isNew.value &&
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
? (props.initialFromDealId ||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
: undefined;
const fromQuoteId =
isNew.value && typeof route.query.fromQuoteId === 'string'
@@ -558,8 +575,10 @@ function invoicePayload(): CreateInvoiceRequest {
function quotePayload(): CreateQuoteRequest {
const fromDealId =
isNew.value && typeof route.query.fromDealId === 'string'
? route.query.fromDealId
isNew.value &&
(props.initialFromDealId || typeof route.query.fromDealId === 'string')
? (props.initialFromDealId ||
(typeof route.query.fromDealId === 'string' ? route.query.fromDealId : ''))
: undefined;
if (validityMode.value === 'days') {
applyValidityDays(validityDays.value);
@@ -619,6 +638,10 @@ async function save() {
} else {
await api.patch(`/invoices/${id.value}`, invoicePayload());
}
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: listRouteName });
} catch (e) {
error.value = axiosMessage(e, 'ذخیره ناموفق بود');
@@ -709,6 +732,10 @@ function printDoc() {
}
function goBack() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push({ name: listRouteName });
}
@@ -742,8 +769,14 @@ onMounted(load);
</script>
<template>
<section class="page">
<header class="page-head no-print">
<section class="page" :class="{ embedded }">
<div v-if="embedded" class="embed-actions no-print">
<button class="btn primary" type="button" :disabled="saving" @click="save">
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="goBack">انصراف</button>
</div>
<header v-if="!embedded" class="page-head no-print">
<div class="head-copy">
<div class="title-row">
<span class="doc-ico">
@@ -1571,6 +1604,17 @@ onMounted(load);
max-width: 1180px;
}
.page.embedded {
--radius: 10px;
max-width: none;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.page-head {
display: flex;
flex-direction: row;
apps/web/src/views/InvoicesView.vue
+38 -15
View File
@@ -9,7 +9,10 @@ import {
toFaDigits,
} from '@/lib/jalali';
import JalaliDateInput from '@/components/JalaliDateInput.vue';
import UiButton from '@/components/ui/UiButton.vue';
import UiModal from '@/components/ui/UiModal.vue';
import UiIcon from '@/components/UiIcon.vue';
import InvoiceFormView from '@/views/InvoiceFormView.vue';
import type {
InvoiceDto,
PaginatedResponse,
@@ -71,6 +74,7 @@ const selected = ref<Set<string>>(new Set());
const menuId = ref<string | null>(null);
const filterSheet = ref(false);
const addOpen = ref(false);
const invoiceModal = ref<{ kind: 'invoice' | 'credit' | 'quote' } | null>(null);
function mapInvoiceStatus(inv: InvoiceDto): { key: PayFilter; label: string } {
if (inv.status === 'paid') return { key: 'paid', label: 'پرداخت شده' };
@@ -349,25 +353,23 @@ onMounted(load);
</div>
<div class="head-actions" @click.stop>
<div class="add-split desk-only">
<RouterLink class="btn primary" :to="{ name: 'invoice-new' }">
<UiIcon name="plus" :size="18" />
<UiButton type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">
<UiIcon name="plus" :size="16" />
افزودن فاکتور
</RouterLink>
</UiButton>
<button type="button" class="btn primary split" aria-label="گزینه‌های افزودن" @click="addOpen = !addOpen">
<UiIcon name="chevron" :size="14" />
</button>
<div v-if="addOpen" class="menu">
<RouterLink :to="{ name: 'invoice-new' }">فاکتور جدید</RouterLink>
<RouterLink :to="{ name: 'quote-new' }">پیش فاکتور جدید</RouterLink>
<RouterLink :to="{ name: 'invoice-new', query: { kind: 'credit' } }">
فاکتور برگشتی
</RouterLink>
<button type="button" @click="invoiceModal = { kind: 'invoice' }; addOpen = false">فاکتور جدید</button>
<button type="button" @click="invoiceModal = { kind: 'quote' }; addOpen = false">پیش فاکتور جدید</button>
<button type="button" @click="invoiceModal = { kind: 'credit' }; addOpen = false">فاکتور برگشتی</button>
</div>
</div>
<RouterLink class="icon-btn add-doc mob-only" :to="{ name: 'invoice-new' }" aria-label="افزودن">
<UiIcon name="document" :size="18" />
<UiIcon name="plus" :size="12" class="plus-badge" />
</RouterLink>
<UiButton class="mob-only" type="button" @click="invoiceModal = { kind: 'invoice' }">
<UiIcon name="plus" :size="16" />
افزودن
</UiButton>
</div>
</header>
@@ -596,7 +598,25 @@ onMounted(load);
</footer>
</template>
<RouterLink class="fab" :to="{ name: 'invoice-new' }">افزودن فاکتور +</RouterLink>
<UiModal
:open="Boolean(invoiceModal)"
:title="
invoiceModal?.kind === 'quote'
? 'پیش فاکتور جدید'
: invoiceModal?.kind === 'credit'
? 'فاکتور برگشتی'
: 'فاکتور جدید'
"
@close="invoiceModal = null"
>
<InvoiceFormView
v-if="invoiceModal"
embedded
:initial-kind="invoiceModal.kind"
@saved="invoiceModal = null; void load()"
@cancel="invoiceModal = null"
/>
</UiModal>
<div v-if="filterSheet" class="sheet-backdrop" @click="filterSheet = false">
<div class="sheet" @click.stop>
@@ -708,11 +728,14 @@ h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
box-shadow: 0 12px 28px rgba(15,23,42,.12); padding: 0.35rem; display: grid;
}
.menu.left { left: auto; right: 0; }
.menu a {
.menu a,
.menu button {
display: block; width: 100%;
border: 0; background: transparent; text-align: right; padding: 0.55rem 0.7rem;
border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer;
}
.menu a:hover { background: var(--teal-soft); color: var(--teal); }
.menu a:hover,
.menu button:hover { background: var(--teal-soft); color: var(--teal); }
.tabs {
display: flex; gap: 0.35rem; overflow-x: auto; border-bottom: 1px solid var(--line);
apps/web/src/views/LeadFormPublicView.vue
+1 -1
View File
@@ -172,7 +172,7 @@ onMounted(load);
display: grid;
place-items: center;
padding: 1.5rem;
background: #f4f7f8;
background: var(--bg);
}
.panel {
width: min(440px, 100%);
apps/web/src/views/PersonFormView.vue
+46 -5
View File
@@ -11,10 +11,22 @@ import EntityTimeline from '@/components/EntityTimeline.vue';
import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
import UiIcon from '@/components/UiIcon.vue';
const props = withDefaults(
defineProps<{
embedded?: boolean;
entityId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();
const route = useRoute();
const router = useRouter();
const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
const isNew = computed(() => route.name === 'person-new');
const id = computed(() => {
if (props.embedded) return props.entityId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isNew = computed(() => (props.embedded ? !props.entityId : route.name === 'person-new'));
const pageTitle = computed(() => (isNew.value ? 'شخص جدید' : 'ویرایش شخص'));
const loading = ref(false);
@@ -94,9 +106,17 @@ async function submit() {
try {
if (isNew.value) {
const { data } = await api.post<PersonDto>('/people', payload());
if (props.embedded) {
emit('saved');
return;
}
await router.replace({ name: 'person-detail', params: { id: data.id } });
} else {
await api.patch(`/people/${id.value}`, payload());
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: 'person-detail', params: { id: id.value } });
}
} catch (e) {
@@ -126,6 +146,10 @@ async function remove() {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push(backTo.value);
}
@@ -133,8 +157,14 @@ onMounted(load);
</script>
<template>
<section class="page">
<header class="desktop-head">
<section class="page" :class="{ embedded }">
<div v-if="embedded" class="embed-actions">
<button class="btn primary" type="button" :disabled="saving" @click="submit">
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
</div>
<header v-if="!embedded" class="desktop-head">
<div class="title-block">
<span class="doc-ico"><UiIcon name="user" :size="22" /></span>
<div>
@@ -158,7 +188,7 @@ onMounted(load);
</div>
</header>
<header class="mobile-head">
<header v-if="!embedded" class="mobile-head">
<button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
<UiIcon name="check-plain" :size="22" />
</button>
@@ -261,6 +291,17 @@ onMounted(load);
padding-bottom: 1.5rem;
}
.page.embedded {
max-width: none;
padding-bottom: 0;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.desktop-head {
display: none;
justify-content: space-between;
apps/web/src/views/PipelineBoardView.vue
+254 -81
View File
@@ -11,10 +11,15 @@ import PipelineList from '@/components/pipeline/PipelineList.vue';
import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
import {
filterStagesByQuery,
filterStages,
mapBoardToStages,
moveStageToIndex,
updateDealStage,
} from '@/lib/pipeline-board';
import UiButton from '@/components/ui/UiButton.vue';
import UiInput from '@/components/ui/UiInput.vue';
import UiModal from '@/components/ui/UiModal.vue';
import DealFormView from '@/views/DealFormView.vue';
import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings } from '@/lib/roles';
@@ -32,10 +37,16 @@ const pipelines = ref<PipelineDto[]>([]);
const boardPipelineId = ref('');
const viewMode = ref<PipelineViewMode>('kanban');
const search = ref('');
const amountMin = ref('');
const amountMax = ref('');
const showCreate = ref(false);
const newName = ref('');
const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
const deleteStageId = ref<string | null>(null);
const stageBusy = ref(false);
const draggingId = ref<string | null>(null);
const draggingColumnId = ref<string | null>(null);
const dropStageId = ref<string | null>(null);
const overlayDeal = ref<PipelineDeal | null>(null);
const overlayAccent = ref<PipelineStage['color']>('green');
@@ -62,7 +73,11 @@ const selectedPipelineId = computed({
});
const visibleStages = computed(() =>
filterStagesByQuery(stages.value, search.value),
filterStages(stages.value, {
query: search.value,
amountMin: amountMin.value === '' ? null : Number(amountMin.value),
amountMax: amountMax.value === '' ? null : Number(amountMax.value),
}),
);
function formatDealDate(iso: string) {
@@ -197,10 +212,21 @@ async function applyUpdateDealStage(
async function onDrop(stageId: string, event: DragEvent, index?: number) {
event.preventDefault();
const dealId = event.dataTransfer?.getData('text/plain') || draggingId.value;
const raw =
event.dataTransfer?.getData('text/plain') ||
draggingColumnId.value ||
draggingId.value ||
'';
dropStageId.value = null;
draggingId.value = null;
overlayDeal.value = null;
if (raw.startsWith('stage:') || draggingColumnId.value) {
const fromId = raw.replace(/^stage:/, '') || draggingColumnId.value;
draggingColumnId.value = null;
if (fromId) await reorderColumn(fromId, stageId);
return;
}
const dealId = raw;
if (!dealId || moving.value) return;
const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
@@ -212,14 +238,128 @@ async function onDrop(stageId: string, event: DragEvent, index?: number) {
await applyUpdateDealStage(dealId, stageId, index);
}
function apiMessage(e: unknown, fallback: string) {
if (axios.isAxiosError(e)) {
const msg = (e.response?.data as { message?: string | string[] })?.message;
if (typeof msg === 'string' && msg) return msg;
if (Array.isArray(msg) && msg[0]) return String(msg[0]);
}
return fallback;
}
function onAddDeal(stageId: string) {
void router.push({
name: 'deal-new',
query: {
pipelineId: selectedPipelineId.value || undefined,
stageId,
},
});
dealModal.value = { stageId };
}
function onColumnDragStart(stageId: string) {
draggingColumnId.value = stageId;
}
function onColumnDragEnd() {
draggingColumnId.value = null;
dropStageId.value = null;
}
async function persistStageOrder(next: PipelineStage[], prev: PipelineStage[]) {
if (!boardPipelineId.value || !canCreatePipeline.value) return;
stages.value = next;
stageBusy.value = true;
error.value = '';
try {
await api.patch(`/pipelines/${boardPipelineId.value}/stages/order`, {
stageIds: next.map((s) => s.id),
});
} catch (e) {
stages.value = prev;
error.value = apiMessage(e, 'جابه‌جایی ستون ناموفق بود.');
} finally {
stageBusy.value = false;
}
}
async function onMoveStage(stageId: string, dir: -1 | 1) {
if (stageBusy.value) return;
const from = stages.value.findIndex((s) => s.id === stageId);
const to = from + dir;
if (from < 0 || to < 0 || to >= stages.value.length) return;
await persistStageOrder(
moveStageToIndex(stages.value, stageId, to),
stages.value,
);
}
async function reorderColumn(fromId: string, toId: string) {
if (stageBusy.value || fromId === toId) return;
const to = stages.value.findIndex((s) => s.id === toId);
if (to < 0) return;
await persistStageOrder(
moveStageToIndex(stages.value, fromId, to),
stages.value,
);
}
async function onRenameStage(stageId: string, title: string) {
if (!boardPipelineId.value || stageBusy.value) return;
const prev = stages.value;
stages.value = prev.map((s) =>
s.id === stageId ? { ...s, title } : s,
);
stageBusy.value = true;
error.value = '';
try {
await api.patch(`/pipelines/${boardPipelineId.value}/stages/${stageId}`, {
name: title,
});
} catch (e) {
stages.value = prev;
error.value = apiMessage(e, 'تغییر نام ستون ناموفق بود.');
} finally {
stageBusy.value = false;
}
}
async function onAddStage(name: string) {
if (!boardPipelineId.value || stageBusy.value) return;
stageBusy.value = true;
error.value = '';
try {
await api.post(`/pipelines/${boardPipelineId.value}/stages`, { name });
await load();
} catch (e) {
error.value = apiMessage(e, 'افزودن ستون ناموفق بود.');
} finally {
stageBusy.value = false;
}
}
function onDeleteStage(stageId: string) {
deleteStageId.value = stageId;
}
const deleteStageTitle = computed(() => {
const id = deleteStageId.value;
return stages.value.find((s) => s.id === id)?.title ?? '';
});
async function confirmDeleteStage() {
const stageId = deleteStageId.value;
if (!stageId || !boardPipelineId.value || stageBusy.value) return;
stageBusy.value = true;
error.value = '';
try {
await api.delete(`/pipelines/${boardPipelineId.value}/stages/${stageId}`);
deleteStageId.value = null;
await load();
} catch (e) {
error.value = apiMessage(e, 'حذف ستون ناموفق بود.');
} finally {
stageBusy.value = false;
}
}
async function onDealSaved() {
dealModal.value = null;
await load();
}
function onOpenDeal(dealId: string) {
@@ -231,10 +371,6 @@ function onMenuDeal(dealId: string) {
menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
}
function onFilter() {
// UI فیلتر — اتصال سیستم فیلتر پیشرفته بعداً
}
watch(
() => route.query.pipelineId,
(id, prev) => {
@@ -262,36 +398,15 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
<PipelineToolbar
pipeline-name="کاریز فروش"
:pipeline-options="pipelineOptions"
:selected-pipeline-id="selectedPipelineId"
:view-mode="viewMode"
:search="search"
v-model:selected-pipeline-id="selectedPipelineId"
v-model:view-mode="viewMode"
v-model:search="search"
v-model:amount-min="amountMin"
v-model:amount-max="amountMax"
:can-create="canCreatePipeline"
@update:view-mode="viewMode = $event"
@update:search="search = $event"
@update:selected-pipeline-id="selectedPipelineId = $event"
@filter="onFilter"
@create="showCreate = !showCreate"
@create="showCreate = true"
/>
<form
v-if="showCreate && canCreatePipeline"
class="create-box"
@submit.prevent="createPipeline"
>
<input
v-model="newName"
type="text"
placeholder="نام کاریز جدید…"
maxlength="120"
required
minlength="2"
/>
<button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
</button>
<button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
</form>
<p v-if="error" class="error">{{ error }}</p>
<p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>
@@ -307,6 +422,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
:stages="visibleStages"
:dragging-id="draggingId"
:drop-stage-id="dropStageId"
:can-manage="canCreatePipeline"
@drag-start="onDragStart"
@drag-end="onDragEnd"
@drag-over="onDragOver"
@@ -314,6 +430,12 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
@add-deal="onAddDeal"
@open-deal="onOpenDeal"
@menu-deal="onMenuDeal"
@rename-stage="onRenameStage"
@delete-stage="onDeleteStage"
@move-stage="onMoveStage"
@column-drag-start="onColumnDragStart"
@column-drag-end="onColumnDragEnd"
@add-stage="onAddStage"
/>
<Teleport to="body">
@@ -330,8 +452,85 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
<button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
مشاهده معامله
</button>
<button
type="button"
role="menuitem"
@click="dealModal = { dealId: menuOpenId ?? undefined }; menuOpenId = null"
>
ویرایش
</button>
<button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
</div>
<UiModal
:open="showCreate && canCreatePipeline"
title="کاریز جدید"
@close="showCreate = false"
>
<form class="create-form" @submit.prevent="createPipeline">
<label class="field">
<span>نام کاریز</span>
<UiInput
v-model="newName"
placeholder="نام کاریز جدید…"
:maxlength="120"
required
:minlength="2"
/>
</label>
</form>
<template #footer>
<UiButton
type="button"
:disabled="saving || newName.trim().length < 2"
@click="createPipeline"
>
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
</UiButton>
<UiButton variant="ghost" type="button" @click="showCreate = false">
انصراف
</UiButton>
</template>
</UiModal>
<UiModal
:open="Boolean(deleteStageId)"
title="حذف ستون"
@close="deleteStageId = null"
>
<p class="delete-copy">
ستون «{{ deleteStageTitle }}» حذف شود؟ اگر معامله‌ای داخل آن باشد باید
اول آن‌ها را جابه‌جا کنید.
</p>
<template #footer>
<UiButton
type="button"
:disabled="stageBusy"
@click="confirmDeleteStage"
>
{{ stageBusy ? 'در حال حذف…' : 'حذف' }}
</UiButton>
<UiButton variant="ghost" type="button" @click="deleteStageId = null">
انصراف
</UiButton>
</template>
</UiModal>
<UiModal
:open="Boolean(dealModal)"
:title="dealModal?.dealId ? 'ویرایش معامله' : 'ایجاد معامله جدید'"
@close="dealModal = null"
>
<DealFormView
v-if="dealModal"
embedded
:deal-id="dealModal.dealId"
:initial-pipeline-id="selectedPipelineId || undefined"
:initial-stage-id="dealModal.stageId"
@saved="onDealSaved"
@cancel="dealModal = null"
/>
</UiModal>
</section>
</template>
@@ -347,46 +546,14 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
container-name: pipeline;
}
.btn-ghost-sm {
border: 1px solid var(--line);
background: #fff;
color: var(--accent);
border-radius: 10px;
padding: 0.4rem 0.75rem;
font-weight: 700;
.create-form .field {
display: grid;
gap: 0.35rem;
}
.create-form .field span {
font-size: 0.85rem;
cursor: pointer;
}
.create-box {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
min-width: 0;
}
.create-box input {
flex: 1 1 180px;
min-width: 0;
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.65rem 0.85rem;
background: #fff;
font: inherit;
}
@container pipeline (max-width: 560px) {
.create-box {
flex-direction: column;
align-items: stretch;
}
.create-box input,
.create-box .btn,
.create-box .btn-ghost-sm {
width: 100%;
}
color: var(--muted);
}
.muted {
@@ -398,6 +565,12 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
font-weight: 600;
}
.delete-copy {
margin: 0;
line-height: 1.7;
color: var(--ink);
}
.menu-pop {
position: fixed;
inset-inline-start: 1rem;
@@ -405,7 +578,7 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
z-index: 40;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 0.35rem;
display: grid;
apps/web/src/views/ProductFormView.vue
+39 -5
View File
@@ -22,11 +22,21 @@ const CATEGORIES = [
const UNITS = ['عدد', 'گرم', 'مثقال', 'سوت', 'کیلوگرم', 'ساعت', 'بسته'];
const props = withDefaults(
defineProps<{
embedded?: boolean;
entityId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{ saved: []; cancel: [] }>();
const route = useRoute();
const router = useRouter();
const editId = computed(() =>
typeof route.params.id === 'string' ? route.params.id : '',
);
const editId = computed(() => {
if (props.embedded) return props.entityId ?? '';
return typeof route.params.id === 'string' ? route.params.id : '';
});
const isEdit = computed(() => Boolean(editId.value));
const loading = ref(false);
@@ -148,6 +158,10 @@ async function submit() {
} else {
await api.post('/products', payload);
}
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: 'products' });
} catch (e) {
if (axios.isAxiosError(e)) {
@@ -164,6 +178,10 @@ async function submit() {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push({ name: 'products' });
}
@@ -178,8 +196,14 @@ onMounted(async () => {
</script>
<template>
<section class="page">
<header class="page-head">
<section class="page" :class="{ embedded }">
<div v-if="embedded" class="embed-actions">
<button class="btn primary" type="button" :disabled="saving" @click="submit">
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
<button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
</div>
<header v-if="!embedded" class="page-head">
<button type="button" class="back mob-only" aria-label="بازگشت" @click="cancel">
<UiIcon name="chevron" :size="20" />
</button>
@@ -401,6 +425,16 @@ onMounted(async () => {
gap: 1rem;
max-width: 1100px;
}
.page.embedded {
max-width: none;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.page-head {
display: flex;
align-items: flex-start;
apps/web/src/views/ProductsSettingsView.vue
+16 -7
View File
@@ -1,11 +1,14 @@
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { formatClockFa, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import { formatMoney } from '@/lib/money';
import UiButton from '@/components/ui/UiButton.vue';
import UiModal from '@/components/ui/UiModal.vue';
import UiIcon from '@/components/UiIcon.vue';
import ProductFormView from '@/views/ProductFormView.vue';
import type { ProductDto } from '@mento/shared';
type SortKey = 'name' | 'newest' | 'price';
@@ -26,6 +29,7 @@ const selected = ref<Set<string>>(new Set());
const menuId = ref<string | null>(null);
const sortOpen = ref(false);
const moreOpen = ref(false);
const productModal = ref(false);
const categories = computed(() => {
const set = new Set<string>();
@@ -204,10 +208,10 @@ onMounted(load);
</div>
</div>
<div class="head-actions" @click.stop>
<RouterLink class="btn primary" :to="{ name: 'product-new' }">
<UiIcon name="plus" :size="18" />
<UiButton type="button" @click="productModal = true">
<UiIcon name="plus" :size="16" />
محصول جدید
</RouterLink>
</UiButton>
<div class="more-wrap">
<button
type="button"
@@ -432,9 +436,14 @@ onMounted(load);
</footer>
</template>
<RouterLink class="fab" :to="{ name: 'product-new' }" aria-label="محصول جدید">
<UiIcon name="plus" :size="24" />
</RouterLink>
<UiModal :open="productModal" title="محصول جدید" @close="productModal = false">
<ProductFormView
v-if="productModal"
embedded
@saved="productModal = false; void load()"
@cancel="productModal = false"
/>
</UiModal>
</section>
</template>
apps/web/src/views/SalesForecastView.vue
+2 -2
View File
@@ -894,8 +894,8 @@ th { background: #f8fafc; color: #64748b; font-weight: 700; white-space: nowrap;
background: #fff; border-top: 1px solid #eef2f7; box-shadow: 0 -8px 24px rgba(15,23,42,.06);
}
.fab {
border: 0; border-radius: 14px; background: var(--teal); color: #fff; font-weight: 800;
padding: 0.85rem 1rem; cursor: pointer;
border: 0; border-radius: 10px; min-height: 36px; background: var(--teal); color: #fff; font-weight: 800;
padding: 0 1rem; cursor: pointer;
}
.side-link {
display: grid; justify-items: center; gap: 0.15rem; text-decoration: none; color: #64748b;