1877 lines
49 KiB
Vue
1877 lines
49 KiB
Vue
<script setup lang="ts">
|
||
import { computed, nextTick, ref, watch } from 'vue';
|
||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||
import axios from 'axios';
|
||
import { api } from '@/lib/api';
|
||
import { useAuthStore } from '@/stores/auth';
|
||
import {
|
||
formatJalaliDayClock,
|
||
formatJalaliNumeric,
|
||
formatLocalDateInput,
|
||
formatLocalDateTimeInput,
|
||
parseLocalInput,
|
||
toFaDigits,
|
||
} from '@/lib/jalali';
|
||
import JalaliDateInput from '@/components/JalaliDateInput.vue';
|
||
import VoiceToTextButton from '@/components/VoiceToTextButton.vue';
|
||
import { appendSpokenText } from '@/lib/spoken-text';
|
||
import UiIcon from '@/components/UiIcon.vue';
|
||
import { brand } from '@mento/shared';
|
||
import UserAvatar from '@/components/UserAvatar.vue';
|
||
import PersonFormView from '@/views/PersonFormView.vue';
|
||
import {
|
||
UiBadge,
|
||
UiButton,
|
||
UiInput,
|
||
UiModal,
|
||
UiPageHeader,
|
||
UiTextarea,
|
||
} from '@/components/ui';
|
||
import ActivityFieldsEditor from '@/components/activities/ActivityFieldsEditor.vue';
|
||
import { typeColorStyle, useActivityTypes } from '@/lib/activity-types';
|
||
import type {
|
||
ActivityDto,
|
||
ActivityFieldValue,
|
||
ActivityFieldValues,
|
||
ActivityPriority,
|
||
ActivityType,
|
||
ActivityTypeDefDto,
|
||
CreateActivityRequest,
|
||
DealDto,
|
||
OrgUserDto,
|
||
PaginatedResponse,
|
||
PersonDto,
|
||
PipelineBoardDto,
|
||
} from '@mento/shared';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
embedded?: boolean;
|
||
entityId?: string;
|
||
initialPersonId?: string;
|
||
initialType?: ActivityType;
|
||
initialTitle?: string;
|
||
initialStageId?: string;
|
||
}>(),
|
||
{ embedded: false },
|
||
);
|
||
const emit = defineEmits<{ saved: []; cancel: [] }>();
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const auth = useAuthStore();
|
||
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);
|
||
const error = ref('');
|
||
const people = ref<PersonDto[]>([]);
|
||
const deals = ref<DealDto[]>([]);
|
||
const users = ref<OrgUserDto[]>([]);
|
||
|
||
const activityTypes = useActivityTypes();
|
||
const title = ref('');
|
||
const type = ref<ActivityType | ''>('');
|
||
const typeDefId = ref('');
|
||
const fieldValues = ref<ActivityFieldValues>({});
|
||
/** نوع غیرفعالی که فعالیت فعلی دارد — در لیست انتخاب نگه داشته میشود */
|
||
const keepTypeId = ref('');
|
||
const priority = ref<ActivityPriority>('medium');
|
||
const description = ref('');
|
||
const tagsRaw = ref('');
|
||
const dueDate = ref('');
|
||
const dueTime = ref('10:30');
|
||
const durationMinutes = ref(30);
|
||
const personId = ref('');
|
||
const dealId = ref('');
|
||
const assigneeIds = ref<string[]>([]);
|
||
const isDone = ref(false);
|
||
const needsNote = ref(false);
|
||
const reminderAt = ref('');
|
||
const reminderNotifyApp = ref(true);
|
||
const reminderNotifySms = ref(false);
|
||
const loadedReminderAt = ref('');
|
||
const reminderSentAt = ref<string | null>(null);
|
||
const reminderChanged = computed(() => reminderAt.value !== loadedReminderAt.value);
|
||
const reminderSentLabel = computed(() =>
|
||
reminderSentAt.value && !reminderChanged.value
|
||
? formatJalaliDayClock(new Date(reminderSentAt.value))
|
||
: '',
|
||
);
|
||
const smsAssigneesWithoutMobile = computed(() =>
|
||
users.value
|
||
.filter((u) => assigneeIds.value.includes(u.id) && !u.mobile?.trim())
|
||
.map((u) => u.fullName),
|
||
);
|
||
|
||
const typeOpen = ref(false);
|
||
const assigneeOpen = ref(false);
|
||
const personOpen = ref(false);
|
||
const personQuery = ref('');
|
||
const personResults = ref<PersonDto[] | null>(null);
|
||
const personSearching = ref(false);
|
||
const personSearchInput = ref<HTMLInputElement | null>(null);
|
||
const newPersonOpen = ref(false);
|
||
let personSearchTimer: ReturnType<typeof setTimeout> | undefined;
|
||
let personSearchSeq = 0;
|
||
|
||
const personOptions = computed(() => personResults.value ?? people.value);
|
||
|
||
function rememberPerson(p: PersonDto) {
|
||
if (!people.value.some((x) => x.id === p.id)) people.value = [p, ...people.value];
|
||
}
|
||
|
||
async function ensurePersonLoaded(pid: string) {
|
||
if (!pid || people.value.some((p) => p.id === pid)) return;
|
||
try {
|
||
const { data } = await api.get<PersonDto>(`/people/${pid}`);
|
||
rememberPerson(data);
|
||
} catch {
|
||
/* person may have been removed */
|
||
}
|
||
}
|
||
|
||
function togglePersonMenu() {
|
||
personOpen.value = !personOpen.value;
|
||
if (personOpen.value) {
|
||
typeOpen.value = false;
|
||
assigneeOpen.value = false;
|
||
void nextTick(() => personSearchInput.value?.focus());
|
||
}
|
||
}
|
||
|
||
function pickPerson(p: PersonDto) {
|
||
rememberPerson(p);
|
||
personId.value = p.id;
|
||
personOpen.value = false;
|
||
}
|
||
|
||
function clearPerson() {
|
||
personId.value = '';
|
||
personOpen.value = false;
|
||
}
|
||
|
||
function openNewPerson() {
|
||
personOpen.value = false;
|
||
newPersonOpen.value = true;
|
||
}
|
||
|
||
function onPersonCreated(p?: PersonDto) {
|
||
newPersonOpen.value = false;
|
||
if (!p) return;
|
||
personQuery.value = '';
|
||
personResults.value = null;
|
||
pickPerson(p);
|
||
}
|
||
|
||
watch(personQuery, (raw) => {
|
||
if (personSearchTimer) clearTimeout(personSearchTimer);
|
||
const q = raw.trim();
|
||
if (!q) {
|
||
personResults.value = null;
|
||
personSearching.value = false;
|
||
return;
|
||
}
|
||
personSearching.value = true;
|
||
const seq = ++personSearchSeq;
|
||
personSearchTimer = setTimeout(async () => {
|
||
try {
|
||
const { data } = await api.get<PaginatedResponse<PersonDto>>('/people', {
|
||
params: { q, limit: 30 },
|
||
});
|
||
if (seq === personSearchSeq) personResults.value = data.items;
|
||
} catch {
|
||
if (seq === personSearchSeq) personResults.value = [];
|
||
} finally {
|
||
if (seq === personSearchSeq) personSearching.value = false;
|
||
}
|
||
}, 300);
|
||
});
|
||
|
||
const typeOptions = computed<ActivityTypeDefDto[]>(() =>
|
||
activityTypes.types.value.filter((t) => t.isActive || t.id === keepTypeId.value),
|
||
);
|
||
|
||
function pickType(def: ActivityTypeDefDto) {
|
||
typeDefId.value = def.id;
|
||
type.value = def.baseType;
|
||
typeOpen.value = false;
|
||
}
|
||
|
||
function isEmptyValue(v: ActivityFieldValue | undefined): boolean {
|
||
if (v == null || v === '') return true;
|
||
if (Array.isArray(v)) return v.length === 0;
|
||
if (typeof v === 'object') {
|
||
return !v.userIds?.length && !v.people?.length && !v.guests?.length;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
const priorityOptions: Array<{ value: ActivityPriority; label: string; tone: string }> = [
|
||
{ value: 'very_high', label: 'خیلی زیاد', tone: 'very-high' },
|
||
{ value: 'high', label: 'زیاد', tone: 'high' },
|
||
{ value: 'medium', label: 'متوسط', tone: 'medium' },
|
||
{ value: 'low', label: 'کم', tone: 'low' },
|
||
{ value: 'very_low', label: 'خیلی کم', tone: 'very-low' },
|
||
];
|
||
|
||
const typeMeta = computed(() => activityTypes.byId.value.get(typeDefId.value) ?? null);
|
||
const typeFields = computed(() => typeMeta.value?.fields ?? []);
|
||
const selectedPerson = computed(() => people.value.find((p) => p.id === personId.value) ?? null);
|
||
const selectedAssignees = computed(() =>
|
||
assigneeIds.value
|
||
.map((id) => users.value.find((u) => u.id === id))
|
||
.filter((u): u is (typeof users.value)[number] => Boolean(u)),
|
||
);
|
||
const assigneePickerLabel = computed(() => {
|
||
const list = selectedAssignees.value;
|
||
if (!list.length) return 'انتخاب مسئول';
|
||
if (list.length === 1) return list[0]!.fullName;
|
||
return `${list[0]!.fullName} و ${toFaDigits(list.length - 1)} نفر دیگر`;
|
||
});
|
||
const selectedDeal = computed(() => deals.value.find((d) => d.id === dealId.value) ?? null);
|
||
const personDeals = computed(() =>
|
||
deals.value.filter((d) => !personId.value || d.person?.id === personId.value),
|
||
);
|
||
const personSub = computed(
|
||
() => selectedDeal.value?.title || selectedPerson.value?.company?.name || '',
|
||
);
|
||
|
||
const duePreview = computed(() => {
|
||
if (!dueDate.value) return '—';
|
||
const d = parseLocalInput(`${dueDate.value}T${dueTime.value || '00:00'}`);
|
||
if (!d) return '—';
|
||
return `${formatJalaliNumeric(d)} ${toFaDigits((dueTime.value || '00:00').replace(':', ':'))}`;
|
||
});
|
||
|
||
const statusText = computed(() => (isDone.value ? 'انجام شده' : 'انجام نشده'));
|
||
const priorityText = computed(
|
||
() => priorityOptions.find((p) => p.value === priority.value)?.label || '—',
|
||
);
|
||
const pageTitle = computed(() => (isNew.value ? 'ایجاد فعالیت جدید' : 'ویرایش فعالیت'));
|
||
const summaryReady = computed(() => Boolean(title.value.trim() || type.value || selectedPerson.value));
|
||
|
||
function pad(n: number) {
|
||
return String(n).padStart(2, '0');
|
||
}
|
||
|
||
function splitDue(iso: string | null) {
|
||
if (!iso) return;
|
||
const d = new Date(iso);
|
||
if (Number.isNaN(d.getTime())) return;
|
||
dueDate.value = formatLocalDateInput(d);
|
||
dueTime.value = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||
}
|
||
|
||
function defaultDue() {
|
||
const d = new Date();
|
||
d.setHours(10, 30, 0, 0);
|
||
dueDate.value = formatLocalDateInput(d);
|
||
dueTime.value = '10:30';
|
||
}
|
||
|
||
function resetForm() {
|
||
title.value = '';
|
||
type.value = '';
|
||
typeDefId.value = '';
|
||
fieldValues.value = {};
|
||
keepTypeId.value = '';
|
||
priority.value = 'medium';
|
||
description.value = '';
|
||
tagsRaw.value = '';
|
||
defaultDue();
|
||
durationMinutes.value = 30;
|
||
personId.value = '';
|
||
dealId.value = '';
|
||
assigneeIds.value = auth.user?.id ? [auth.user.id] : [];
|
||
isDone.value = false;
|
||
needsNote.value = false;
|
||
reminderAt.value = '';
|
||
loadedReminderAt.value = '';
|
||
reminderSentAt.value = null;
|
||
reminderNotifyApp.value = true;
|
||
reminderNotifySms.value = false;
|
||
error.value = '';
|
||
}
|
||
|
||
watch(personId, () => {
|
||
if (dealId.value && !personDeals.value.some((d) => d.id === dealId.value)) {
|
||
dealId.value = personDeals.value[0]?.id ?? '';
|
||
} else if (!dealId.value && personDeals.value.length === 1) {
|
||
dealId.value = personDeals.value[0].id;
|
||
}
|
||
});
|
||
|
||
const noteCard = ref<HTMLElement | null>(null);
|
||
const tagPreview = computed(() => parseTags(tagsRaw.value).map((t) => t.replace(/^#/, '')));
|
||
|
||
function focusNote() {
|
||
void nextTick(() => {
|
||
noteCard.value?.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
noteCard.value?.querySelector<HTMLTextAreaElement>('textarea')?.focus({ preventScroll: true });
|
||
});
|
||
}
|
||
|
||
watch(needsNote, (on) => {
|
||
if (on && !loading.value) focusNote();
|
||
});
|
||
|
||
async function load() {
|
||
loading.value = true;
|
||
error.value = '';
|
||
try {
|
||
const [peopleRes, boardRes, usersRes] = await Promise.all([
|
||
api.get<PaginatedResponse<PersonDto>>('/people', { params: { limit: 100 } }),
|
||
api.get<PipelineBoardDto>('/pipelines/board'),
|
||
api.get<OrgUserDto[]>('/users').catch(() => ({ data: [] as OrgUserDto[] })),
|
||
activityTypes.load(true),
|
||
]);
|
||
people.value = peopleRes.data.items;
|
||
deals.value = boardRes.data.stages.flatMap((s) => s.deals);
|
||
users.value = usersRes.data;
|
||
|
||
if (!isNew.value && id.value) {
|
||
const { data } = await api.get<ActivityDto>(`/activities/${id.value}`);
|
||
title.value = data.title;
|
||
type.value = data.type;
|
||
typeDefId.value =
|
||
data.typeDef?.id ?? activityTypes.systemOf.value[data.type]?.id ?? '';
|
||
keepTypeId.value = typeDefId.value;
|
||
fieldValues.value = { ...(data.fields ?? {}) };
|
||
priority.value = data.priority ?? 'medium';
|
||
description.value = data.description ?? '';
|
||
needsNote.value = Boolean(data.description?.trim());
|
||
tagsRaw.value = (data.tags ?? []).join('، ');
|
||
splitDue(data.dueAt);
|
||
durationMinutes.value = data.durationMinutes ?? 30;
|
||
reminderAt.value = data.reminderAt
|
||
? formatLocalDateTimeInput(new Date(data.reminderAt))
|
||
: '';
|
||
loadedReminderAt.value = reminderAt.value;
|
||
reminderSentAt.value = data.reminderSentAt ?? null;
|
||
reminderNotifyApp.value = data.reminderNotifyApp ?? true;
|
||
reminderNotifySms.value = data.reminderNotifySms ?? false;
|
||
if (data.person?.id) await ensurePersonLoaded(data.person.id);
|
||
personId.value = data.person?.id ?? '';
|
||
dealId.value = data.deal?.id ?? '';
|
||
assigneeIds.value = data.assignees?.length
|
||
? data.assignees.map((a) => a.id)
|
||
: data.assignee?.id
|
||
? [data.assignee.id]
|
||
: auth.user?.id
|
||
? [auth.user.id]
|
||
: [];
|
||
isDone.value = data.status === 'done';
|
||
} else {
|
||
resetForm();
|
||
const incomingPerson =
|
||
props.initialPersonId ||
|
||
(typeof route.query.personId === 'string' ? route.query.personId : '');
|
||
if (incomingPerson) {
|
||
await ensurePersonLoaded(incomingPerson);
|
||
personId.value = incomingPerson;
|
||
}
|
||
const incomingDef =
|
||
typeof route.query.typeDefId === 'string'
|
||
? activityTypes.byId.value.get(route.query.typeDefId)
|
||
: undefined;
|
||
const incomingType = props.initialType || route.query.type;
|
||
const baseDef =
|
||
typeof incomingType === 'string'
|
||
? activityTypes.systemOf.value[incomingType as ActivityType]
|
||
: undefined;
|
||
const def = incomingDef?.isActive ? incomingDef : baseDef;
|
||
if (def) pickType(def);
|
||
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());
|
||
}
|
||
}
|
||
} catch {
|
||
error.value = 'بارگذاری فرم فعالیت ناموفق بود.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function parseTags(raw: string): string[] {
|
||
return [
|
||
...new Set(
|
||
raw
|
||
.split(/[,،#\n]/)
|
||
.map((t) => t.trim())
|
||
.filter(Boolean),
|
||
),
|
||
].slice(0, 40);
|
||
}
|
||
|
||
function payload(): CreateActivityRequest {
|
||
const due =
|
||
dueDate.value && dueTime.value ? new Date(`${dueDate.value}T${dueTime.value}:00`) : null;
|
||
const reminder = parseLocalInput(reminderAt.value);
|
||
const keys = new Set(typeFields.value.map((f) => f.key));
|
||
return {
|
||
title: title.value,
|
||
type: type.value || 'task',
|
||
typeDefId: typeDefId.value || null,
|
||
fields: Object.fromEntries(
|
||
Object.entries(fieldValues.value).filter(([k, v]) => keys.has(k) && !isEmptyValue(v)),
|
||
),
|
||
priority: priority.value,
|
||
description: description.value || undefined,
|
||
tags: parseTags(tagsRaw.value),
|
||
dueAt: due && !Number.isNaN(due.getTime()) ? due.toISOString() : null,
|
||
durationMinutes: durationMinutes.value || null,
|
||
reminderAt: reminder && !Number.isNaN(reminder.getTime()) ? reminder.toISOString() : null,
|
||
reminderNotifyApp: reminder ? reminderNotifyApp.value : false,
|
||
reminderNotifySms: reminder ? reminderNotifySms.value : false,
|
||
personId: personId.value || null,
|
||
companyId: selectedPerson.value?.company?.id ?? null,
|
||
dealId: dealId.value || null,
|
||
assigneeIds: [...assigneeIds.value],
|
||
assigneeId: assigneeIds.value[0] || null,
|
||
};
|
||
}
|
||
|
||
function toggleAssignee(userId: string) {
|
||
const idx = assigneeIds.value.indexOf(userId);
|
||
if (idx >= 0) {
|
||
if (assigneeIds.value.length <= 1) return;
|
||
assigneeIds.value = assigneeIds.value.filter((id) => id !== userId);
|
||
return;
|
||
}
|
||
assigneeIds.value = [...assigneeIds.value, userId];
|
||
}
|
||
|
||
function validate() {
|
||
if (!type.value) return 'نوع فعالیت را انتخاب کنید.';
|
||
if (title.value.trim().length < 2) return 'عنوان فعالیت را بنویسید.';
|
||
const missing = typeFields.value.find(
|
||
(f) => f.required && f.type !== 'checkbox' && isEmptyValue(fieldValues.value[f.key]),
|
||
);
|
||
if (missing) return `فیلد «${missing.label}» را تکمیل کنید.`;
|
||
if (!dueDate.value || !dueTime.value) return 'تاریخ و ساعت را مشخص کنید.';
|
||
if (!assigneeIds.value.length) return 'حداقل یک مسئول فعالیت را انتخاب کنید.';
|
||
if (needsNote.value && !description.value.trim()) return 'توضیح این فعالیت را بنویسید.';
|
||
if (reminderAt.value && reminderChanged.value) {
|
||
const when = parseLocalInput(reminderAt.value);
|
||
if (when && when.getTime() < Date.now() - 60_000) {
|
||
return 'زمان یادآوری گذشته است؛ زمانی در آینده انتخاب کنید.';
|
||
}
|
||
}
|
||
if (reminderAt.value && !reminderNotifyApp.value && !reminderNotifySms.value) {
|
||
return 'برای یادآوری، اعلان یا پیامک را انتخاب کنید.';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
async function submit(next: 'detail' | 'new' = 'detail') {
|
||
const message = validate();
|
||
if (message) {
|
||
error.value = message;
|
||
if (needsNote.value && !description.value.trim()) focusNote();
|
||
return;
|
||
}
|
||
saving.value = true;
|
||
error.value = '';
|
||
try {
|
||
let savedId = id.value;
|
||
if (isNew.value) {
|
||
const { data } = await api.post<ActivityDto>('/activities', {
|
||
...payload(),
|
||
...(props.initialStageId ? { stageId: props.initialStageId } : {}),
|
||
});
|
||
savedId = data.id;
|
||
if (isDone.value) {
|
||
await api.patch(`/activities/${savedId}/complete`);
|
||
}
|
||
} else {
|
||
await api.patch(`/activities/${id.value}`, {
|
||
...payload(),
|
||
status: isDone.value ? 'done' : 'open',
|
||
});
|
||
}
|
||
if (props.embedded) {
|
||
emit('saved');
|
||
return;
|
||
}
|
||
if (next === 'new') {
|
||
if (!isNew.value) {
|
||
await router.push({ name: 'activity-new' });
|
||
}
|
||
resetForm();
|
||
return;
|
||
}
|
||
await router.replace({ name: 'activity-detail', params: { id: savedId } });
|
||
} catch (e) {
|
||
if (axios.isAxiosError(e)) {
|
||
if (!e.response) error.value = 'اتصال به سرور برقرار نشد.';
|
||
else {
|
||
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;
|
||
}
|
||
}
|
||
|
||
function bumpDuration(delta: number) {
|
||
durationMinutes.value = Math.min(24 * 60, Math.max(5, durationMinutes.value + delta));
|
||
}
|
||
|
||
function cancel() {
|
||
if (props.embedded) {
|
||
emit('cancel');
|
||
return;
|
||
}
|
||
if (!isNew.value && id.value) {
|
||
void router.push({ name: 'activity-detail', params: { id: id.value } });
|
||
return;
|
||
}
|
||
void router.push({ name: 'activities' });
|
||
}
|
||
|
||
watch([id, isNew], () => void load(), { immediate: true });
|
||
</script>
|
||
|
||
<template>
|
||
<section class="crm-page" :class="{ embedded }" @click="typeOpen = assigneeOpen = personOpen = false">
|
||
<UiPageHeader
|
||
v-if="!embedded"
|
||
:title="pageTitle"
|
||
:back-to="{ name: 'activities' }"
|
||
>
|
||
<template #lead>
|
||
<span class="crumb">
|
||
<RouterLink :to="{ name: 'activities' }">فعالیتها</RouterLink>
|
||
<span>›</span>
|
||
<strong>{{ pageTitle }}</strong>
|
||
</span>
|
||
</template>
|
||
<template #actions>
|
||
<UiButton
|
||
variant="primary"
|
||
type="button"
|
||
:disabled="saving"
|
||
:loading="saving"
|
||
@click="submit('detail')"
|
||
>
|
||
<UiIcon name="check" :size="16" />
|
||
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
|
||
</UiButton>
|
||
<UiButton
|
||
variant="outline"
|
||
type="button"
|
||
:disabled="saving"
|
||
@click="submit('new')"
|
||
>
|
||
<UiIcon name="plus" :size="16" />
|
||
ذخیره و ایجاد جدید
|
||
</UiButton>
|
||
<UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">
|
||
انصراف
|
||
</UiButton>
|
||
</template>
|
||
</UiPageHeader>
|
||
|
||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||
|
||
<div v-else class="layout">
|
||
<form class="form" @submit.prevent="submit('detail')">
|
||
<div class="stack">
|
||
<div class="card pair">
|
||
<div class="field">
|
||
<label>نوع فعالیت <i>*</i></label>
|
||
<button class="picker type-pick" type="button" @click.stop="typeOpen = !typeOpen">
|
||
<span
|
||
class="type-ico"
|
||
:style="typeMeta ? typeColorStyle(typeMeta.color) : undefined"
|
||
>
|
||
<UiIcon :name="typeMeta?.icon || 'phone'" :size="16" />
|
||
</span>
|
||
<span :class="{ ghost: !typeMeta }">{{ typeMeta?.name || 'انتخاب کنید' }}</span>
|
||
<UiIcon name="chevron" :size="16" />
|
||
</button>
|
||
<ul v-if="typeOpen" class="menu">
|
||
<li v-for="opt in typeOptions" :key="opt.id">
|
||
<button type="button" :class="{ on: opt.id === typeDefId }" @click="pickType(opt)">
|
||
<span class="type-ico" :style="typeColorStyle(opt.color)">
|
||
<UiIcon :name="opt.icon" :size="14" />
|
||
</span>
|
||
{{ opt.name }}
|
||
<small v-if="opt.fields.length" class="type-fields-count">
|
||
{{ toFaDigits(opt.fields.length) }} فیلد
|
||
</small>
|
||
</button>
|
||
</li>
|
||
<li v-if="!typeOptions.length" class="menu-empty">نوع فعالیتی تعریف نشده است.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="field">
|
||
<label for="title">عنوان فعالیت <i>*</i></label>
|
||
<UiInput
|
||
id="title"
|
||
v-model="title"
|
||
required
|
||
minlength="2"
|
||
placeholder="مثلاً: تماس پیگیری جهت ارائه پیشفاکتور"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="typeFields.length" class="card type-fields">
|
||
<p class="type-fields-title">
|
||
<span class="type-ico sm" :style="typeColorStyle(typeMeta!.color)">
|
||
<UiIcon :name="typeMeta!.icon" :size="13" />
|
||
</span>
|
||
اطلاعات {{ typeMeta!.name }}
|
||
</p>
|
||
<ActivityFieldsEditor v-model="fieldValues" :fields="typeFields" :users="users" />
|
||
</div>
|
||
|
||
<div class="card toggles">
|
||
<label class="switch">
|
||
<span>این فعالیت انجام شده</span>
|
||
<input v-model="isDone" type="checkbox" />
|
||
<i />
|
||
</label>
|
||
<label class="switch">
|
||
<span>این فعالیت نیاز به توضیح دارد</span>
|
||
<input v-model="needsNote" type="checkbox" />
|
||
<i />
|
||
</label>
|
||
</div>
|
||
|
||
<div class="card trio">
|
||
<div class="field">
|
||
<label>تاریخ <i>*</i></label>
|
||
<JalaliDateInput v-model="dueDate" required />
|
||
</div>
|
||
<div class="field">
|
||
<label>ساعت <i>*</i></label>
|
||
<JalaliDateInput v-model="dueTime" mode="time" required />
|
||
</div>
|
||
<div class="field">
|
||
<label>مدت فعالیت (دقیقه) <i>*</i></label>
|
||
<div class="stepper">
|
||
<button type="button" aria-label="افزایش" @click="bumpDuration(5)">
|
||
<UiIcon name="plus" :size="16" />
|
||
</button>
|
||
<strong>{{ toFaDigits(durationMinutes) }}</strong>
|
||
<button type="button" aria-label="کاهش" @click="bumpDuration(-5)">
|
||
<UiIcon name="minus" :size="16" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="field">
|
||
<label>مسئولان انجام این فعالیت <i>*</i></label>
|
||
<button class="picker person-pick" type="button" @click.stop="assigneeOpen = !assigneeOpen">
|
||
<div class="assignee-avatars">
|
||
<UserAvatar
|
||
v-for="user in selectedAssignees.slice(0, 3)"
|
||
:key="user.id"
|
||
:name="user.fullName"
|
||
:user-id="user.id"
|
||
:has-avatar="user.hasAvatar"
|
||
:size="28"
|
||
/>
|
||
<UserAvatar
|
||
v-if="!selectedAssignees.length"
|
||
name="مسئول"
|
||
:size="28"
|
||
/>
|
||
</div>
|
||
<span :class="{ ghost: !selectedAssignees.length }">
|
||
{{ assigneePickerLabel }}
|
||
</span>
|
||
<UiIcon name="chevron" :size="16" />
|
||
</button>
|
||
<ul v-if="assigneeOpen" class="menu multi-menu" @click.stop>
|
||
<li v-for="user in users" :key="user.id">
|
||
<button
|
||
type="button"
|
||
class="multi-option"
|
||
:class="{ on: assigneeIds.includes(user.id) }"
|
||
@click="toggleAssignee(user.id)"
|
||
>
|
||
<span class="check" :class="{ on: assigneeIds.includes(user.id) }">
|
||
<UiIcon v-if="assigneeIds.includes(user.id)" name="check-plain" :size="12" />
|
||
</span>
|
||
<UserAvatar :name="user.fullName" :user-id="user.id" :has-avatar="user.hasAvatar" :size="28" />
|
||
{{ user.fullName }}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
<small class="hint">میتوانید چند نفر را بهعنوان مسئول انتخاب کنید.</small>
|
||
<div v-if="selectedAssignees.length" class="assignee-chips">
|
||
<span v-for="user in selectedAssignees" :key="user.id" class="chip">
|
||
{{ user.fullName }}
|
||
<button
|
||
v-if="assigneeIds.length > 1"
|
||
type="button"
|
||
aria-label="حذف مسئول"
|
||
@click="toggleAssignee(user.id)"
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="field">
|
||
<div class="label-row">
|
||
<label>شخص / مشتری مرتبط <small class="optional">(اختیاری)</small></label>
|
||
<button type="button" class="person-add" @click.stop="openNewPerson">
|
||
<UiIcon name="user-plus" :size="14" />
|
||
افزودن شخص جدید
|
||
</button>
|
||
</div>
|
||
<button class="picker person-pick" type="button" @click.stop="togglePersonMenu">
|
||
<span class="person-ico" :class="{ on: selectedPerson }">
|
||
<UiIcon name="user" :size="16" />
|
||
</span>
|
||
<span class="who">
|
||
<b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'بدون شخص — انتخاب کنید' }}</b>
|
||
<small v-if="personSub">{{ personSub }}</small>
|
||
</span>
|
||
<UiIcon name="chevron" :size="16" />
|
||
</button>
|
||
<div v-if="personOpen" class="menu person-menu" @click.stop>
|
||
<label class="person-search">
|
||
<UiIcon name="search" :size="15" />
|
||
<input
|
||
ref="personSearchInput"
|
||
v-model="personQuery"
|
||
type="search"
|
||
placeholder="جستجوی نام، موبایل یا کد…"
|
||
@keydown.esc="personOpen = false"
|
||
/>
|
||
</label>
|
||
<ul class="person-list">
|
||
<li v-if="personId">
|
||
<button type="button" class="person-row" @click="clearPerson">
|
||
<span class="row-text">
|
||
<b>بدون شخص</b>
|
||
<small>حذف شخص انتخابشده</small>
|
||
</span>
|
||
</button>
|
||
</li>
|
||
<li v-for="p in personOptions" :key="p.id">
|
||
<button
|
||
type="button"
|
||
class="person-row"
|
||
:class="{ on: p.id === personId }"
|
||
@click="pickPerson(p)"
|
||
>
|
||
<span class="row-text">
|
||
<b>{{ p.fullName }}</b>
|
||
<small v-if="p.company?.name">{{ p.company.name }}</small>
|
||
</span>
|
||
<span v-if="p.mobile || p.phone" class="row-phone" dir="ltr">
|
||
{{ p.mobile || p.phone }}
|
||
</span>
|
||
<UiIcon v-if="p.id === personId" name="check-plain" :size="14" class="row-check" />
|
||
</button>
|
||
</li>
|
||
<li v-if="personSearching" class="person-empty">در حال جستجو…</li>
|
||
<li v-else-if="!personOptions.length" class="person-empty">
|
||
شخصی پیدا نشد.
|
||
<button
|
||
v-if="personQuery.trim()"
|
||
type="button"
|
||
class="empty-add"
|
||
@click="openNewPerson"
|
||
>
|
||
افزودن «{{ personQuery.trim() }}» بهعنوان شخص جدید
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div v-if="personDeals.length > 1" class="field deal-field">
|
||
<label>فرصت مرتبط</label>
|
||
<select v-model="dealId">
|
||
<option value="">بدون معامله</option>
|
||
<option v-for="d in personDeals" :key="d.id" :value="d.id">{{ d.title }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<p class="pri-label">اولویت</p>
|
||
<div class="priorities">
|
||
<label v-for="opt in priorityOptions" :key="opt.value" :class="['pri', opt.tone, { on: priority === opt.value }]">
|
||
<input v-model="priority" type="radio" :value="opt.value" />
|
||
<UiIcon name="flag" :size="16" />
|
||
<span>{{ opt.label }}</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card reminder">
|
||
<JalaliDateInput
|
||
v-model="reminderAt"
|
||
mode="datetime"
|
||
icon="bell"
|
||
placeholder="یادآوری تنظیم نشده است"
|
||
/>
|
||
<div v-if="reminderAt" class="reminder-channels">
|
||
<p class="channel-title">چگونه یادآوری شود؟</p>
|
||
<label class="channel">
|
||
<input v-model="reminderNotifyApp" type="checkbox" />
|
||
<span>
|
||
<strong>اعلان داخل پنل</strong>
|
||
<small>در زنگوله اعلانهای {{ brand.nameFa }} نشان داده میشود</small>
|
||
</span>
|
||
</label>
|
||
<label class="channel">
|
||
<input v-model="reminderNotifySms" type="checkbox" />
|
||
<span>
|
||
<strong>پیامک به مسئول</strong>
|
||
<small>به شماره موبایل مسئول فعالیت ارسال میشود</small>
|
||
</span>
|
||
</label>
|
||
<p
|
||
v-if="reminderAt && !reminderNotifyApp && !reminderNotifySms"
|
||
class="channel-warn"
|
||
>
|
||
حداقل یکی از روشهای یادآوری را انتخاب کنید.
|
||
</p>
|
||
<p
|
||
v-if="reminderNotifySms && smsAssigneesWithoutMobile.length"
|
||
class="channel-warn"
|
||
>
|
||
شمارهٔ موبایل برای {{ smsAssigneesWithoutMobile.join('، ') }} ثبت نشده؛ پیامک برایشان ارسال نمیشود.
|
||
</p>
|
||
<p v-if="reminderSentLabel" class="channel-sent">
|
||
این یادآوری در {{ reminderSentLabel }} ارسال شد. برای یادآوری دوباره، زمان جدیدی انتخاب کنید.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div ref="noteCard" class="card note-card">
|
||
<div class="note-head">
|
||
<label for="description">
|
||
توضیحات و یادداشت
|
||
<i v-if="needsNote" class="req-star">*</i>
|
||
</label>
|
||
<VoiceToTextButton
|
||
@transcript="(text) => (description = appendSpokenText(description, text))"
|
||
/>
|
||
</div>
|
||
<UiTextarea
|
||
id="description"
|
||
v-model="description"
|
||
:rows="4"
|
||
placeholder="جزئیات تماس، نتیجه جلسه یا یادداشت مرتبط را بنویسید…"
|
||
/>
|
||
<label for="activity-tags" class="tags-label">هشتگ / برچسب</label>
|
||
<UiInput
|
||
id="activity-tags"
|
||
v-model="tagsRaw"
|
||
placeholder="پیگیری، فوری (با کاما یا #)"
|
||
/>
|
||
<div v-if="tagPreview.length" class="tag-preview">
|
||
<span v-for="t in tagPreview" :key="t" class="tag-chip">#{{ t }}</span>
|
||
</div>
|
||
<small class="hint">
|
||
چند برچسب را با کاما (،) یا # جدا کنید؛ برچسبها در جزئیات و لیست فعالیتها نمایش داده میشوند و با
|
||
جستجوی همان کلمه پیدا میشوند.
|
||
</small>
|
||
</div>
|
||
|
||
<p v-if="error" class="error">{{ error }}</p>
|
||
</form>
|
||
|
||
<aside class="summary">
|
||
<h2>
|
||
<UiIcon name="document" :size="18" />
|
||
خلاصه فعالیت
|
||
</h2>
|
||
<div v-if="!summaryReady" class="empty">
|
||
<UiIcon name="calendar" :size="28" />
|
||
<p>با تکمیل اطلاعات، خلاصه فعالیت در اینجا نمایش داده میشود.</p>
|
||
</div>
|
||
<dl>
|
||
<div>
|
||
<dt>نوع فعالیت</dt>
|
||
<dd>{{ typeMeta?.name || '—' }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>تاریخ و ساعت</dt>
|
||
<dd>{{ duePreview }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>مدت فعالیت</dt>
|
||
<dd>{{ toFaDigits(durationMinutes) }} دقیقه</dd>
|
||
</div>
|
||
<div>
|
||
<dt>مسئولان</dt>
|
||
<dd>
|
||
{{
|
||
selectedAssignees.length
|
||
? selectedAssignees.map((u) => u.fullName).join('، ')
|
||
: '—'
|
||
}}
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>مشتری مرتبط</dt>
|
||
<dd>{{ selectedPerson?.fullName || '—' }}</dd>
|
||
</div>
|
||
<div>
|
||
<dt>وضعیت انجام</dt>
|
||
<dd>
|
||
<UiBadge :variant="isDone ? 'success' : 'neutral'" size="sm">
|
||
{{ statusText }}
|
||
</UiBadge>
|
||
</dd>
|
||
</div>
|
||
<div>
|
||
<dt>اولویت</dt>
|
||
<dd>
|
||
<UiBadge
|
||
:variant="priority === 'very_high' || priority === 'high' ? 'danger' : priority === 'medium' ? 'warning' : 'neutral'"
|
||
size="sm"
|
||
>
|
||
{{ priorityText }}
|
||
</UiBadge>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
</aside>
|
||
</div>
|
||
|
||
<footer v-if="!embedded" class="mobile-save">
|
||
<UiButton
|
||
variant="primary"
|
||
type="button"
|
||
:disabled="saving || loading"
|
||
:loading="saving"
|
||
@click="submit('detail')"
|
||
>
|
||
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
|
||
</UiButton>
|
||
</footer>
|
||
|
||
<!-- Embedded Modal Actions (Fixed at bottom) -->
|
||
<div v-if="embedded" class="embed-actions">
|
||
<UiButton
|
||
variant="primary"
|
||
type="button"
|
||
:disabled="saving"
|
||
:loading="saving"
|
||
@click="submit('detail')"
|
||
>
|
||
<UiIcon name="check" :size="16" />
|
||
{{ saving ? 'در حال ذخیره…' : 'ذخیره فعالیت' }}
|
||
</UiButton>
|
||
<UiButton variant="ghost" type="button" :disabled="saving" @click="cancel">انصراف</UiButton>
|
||
</div>
|
||
|
||
<UiModal :open="newPersonOpen" title="شخص جدید" nest @close="newPersonOpen = false">
|
||
<PersonFormView
|
||
v-if="newPersonOpen"
|
||
embedded
|
||
:initial-query="personQuery"
|
||
@saved="onPersonCreated"
|
||
@cancel="newPersonOpen = false"
|
||
/>
|
||
</UiModal>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.crm-page:not(.embedded) {
|
||
padding-bottom: 5rem;
|
||
}
|
||
|
||
.crm-page.embedded {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.embed-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--sp-2);
|
||
margin-bottom: var(--sp-3);
|
||
}
|
||
|
||
.crumb {
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-2);
|
||
color: var(--color-text-muted);
|
||
font-size: var(--fs-xs);
|
||
}
|
||
|
||
.crumb a {
|
||
color: var(--color-primary-dark);
|
||
font-weight: 700;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.tag-preview {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.tag-chip {
|
||
background: #f0fdfa;
|
||
color: #0f766e;
|
||
border-radius: 999px;
|
||
padding: 0.15rem 0.55rem;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.req-star {
|
||
color: var(--color-danger);
|
||
font-style: normal;
|
||
}
|
||
|
||
.layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--sp-3);
|
||
}
|
||
|
||
.summary {
|
||
display: none;
|
||
}
|
||
|
||
.form,
|
||
.stack {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: var(--sp-3);
|
||
}
|
||
|
||
.card {
|
||
position: relative;
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--sp-4);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.field {
|
||
display: grid;
|
||
gap: var(--sp-1);
|
||
min-width: 0;
|
||
}
|
||
|
||
.field label,
|
||
.pri-label {
|
||
margin: 0;
|
||
color: var(--color-text-muted);
|
||
font-size: var(--fs-xs);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.field i {
|
||
color: var(--color-danger);
|
||
font-style: normal;
|
||
}
|
||
|
||
.field input,
|
||
.field select,
|
||
.field textarea,
|
||
.note-card textarea {
|
||
width: 100%;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: var(--radius);
|
||
min-height: var(--control-h);
|
||
padding: 0 0.85rem;
|
||
font: inherit;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.field textarea,
|
||
.note-card textarea {
|
||
min-height: 5.5rem;
|
||
padding: 0.65rem 0.85rem;
|
||
}
|
||
|
||
.picker {
|
||
width: 100%;
|
||
min-height: var(--control-h);
|
||
height: var(--control-h);
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: var(--radius);
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
padding: 0.4rem 0.7rem;
|
||
font: inherit;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.picker .ghost,
|
||
.who .ghost {
|
||
color: #94a3b8;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.picker :deep(.ico:last-child) {
|
||
margin-inline-start: auto;
|
||
color: #94a3b8;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.assignee-avatars {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.assignee-avatars :deep(.avatar),
|
||
.assignee-avatars > * {
|
||
margin-inline-end: -0.35rem;
|
||
box-shadow: 0 0 0 2px #fff;
|
||
}
|
||
|
||
.hint {
|
||
display: block;
|
||
margin-top: 0.35rem;
|
||
color: #94a3b8;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.assignee-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.35rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.assignee-chips .chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
background: #f0fdfa;
|
||
color: #0f766e;
|
||
border-radius: 999px;
|
||
padding: 0.2rem 0.55rem;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.assignee-chips .chip button {
|
||
border: 0;
|
||
background: transparent;
|
||
color: #64748b;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
line-height: 1;
|
||
padding: 0 0.1rem;
|
||
}
|
||
|
||
.multi-menu .multi-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.55rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.multi-menu .check {
|
||
width: 18px;
|
||
height: 18px;
|
||
border: 1.5px solid #cbd5e1;
|
||
border-radius: 5px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
}
|
||
|
||
.multi-menu .check.on {
|
||
background: #14b8a6;
|
||
border-color: #14b8a6;
|
||
}
|
||
|
||
.multi-menu .multi-option.on {
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.type-ico {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 999px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: #ecfdf5;
|
||
color: #0d9488;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.type-ico.sm {
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
|
||
.menu button.on {
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.type-fields-count {
|
||
margin-inline-start: auto;
|
||
color: #94a3b8;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
.menu-empty {
|
||
padding: 0.6rem;
|
||
color: #94a3b8;
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.type-fields {
|
||
display: grid;
|
||
gap: 0.85rem;
|
||
}
|
||
|
||
.type-fields-title {
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.45rem;
|
||
font-weight: 700;
|
||
font-size: 0.92rem;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.who {
|
||
display: grid;
|
||
min-width: 0;
|
||
text-align: start;
|
||
}
|
||
|
||
.who b {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.who small {
|
||
color: #94a3b8;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.menu {
|
||
position: absolute;
|
||
inset-inline: 0.95rem;
|
||
top: calc(100% - 0.35rem);
|
||
z-index: 5;
|
||
margin: 0;
|
||
padding: 0.35rem;
|
||
list-style: none;
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
|
||
max-height: 16rem;
|
||
overflow: auto;
|
||
}
|
||
|
||
.menu button {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.55rem;
|
||
border: 0;
|
||
background: none;
|
||
padding: 0.55rem 0.5rem;
|
||
border-radius: var(--radius);
|
||
font: inherit;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.menu button:hover {
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.label-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.label-row .optional {
|
||
color: #94a3b8;
|
||
font-weight: 400;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.person-add {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
border: 0;
|
||
background: none;
|
||
padding: 0.15rem 0.35rem;
|
||
border-radius: 6px;
|
||
font: inherit;
|
||
font-size: var(--fs-xs);
|
||
font-weight: 700;
|
||
color: #0f766e;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.person-add:hover {
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.person-ico {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 999px;
|
||
display: grid;
|
||
place-items: center;
|
||
flex-shrink: 0;
|
||
background: #f1f5f9;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.person-ico.on {
|
||
background: #ccfbf1;
|
||
color: #0f766e;
|
||
}
|
||
|
||
.person-menu {
|
||
max-height: none;
|
||
overflow: visible;
|
||
display: grid;
|
||
gap: 0.35rem;
|
||
padding: 0.45rem;
|
||
z-index: 30;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.person-search {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.45rem;
|
||
height: 2.4rem;
|
||
padding: 0 0.7rem;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: var(--radius);
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.person-search:focus-within {
|
||
border-color: #5eead4;
|
||
}
|
||
|
||
.person-search input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
border: 0;
|
||
outline: none;
|
||
background: transparent;
|
||
font: inherit;
|
||
font-size: 0.88rem;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.person-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: 15rem;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.menu .person-row {
|
||
gap: 0.6rem;
|
||
padding: 0.5rem 0.6rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.menu .person-row.on {
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.row-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: grid;
|
||
gap: 0.1rem;
|
||
}
|
||
|
||
.row-text b {
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.row-text small {
|
||
font-size: 0.74rem;
|
||
color: #94a3b8;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.row-phone {
|
||
flex-shrink: 0;
|
||
font-size: 0.78rem;
|
||
color: #64748b;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.row-check {
|
||
flex-shrink: 0;
|
||
color: #0d9488;
|
||
}
|
||
|
||
.person-list li + li {
|
||
border-top: 1px solid #f8fafc;
|
||
}
|
||
|
||
.person-empty {
|
||
padding: 0.8rem;
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
justify-items: center;
|
||
text-align: center;
|
||
color: #94a3b8;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.menu .empty-add {
|
||
width: auto;
|
||
justify-content: center;
|
||
border: 1px dashed #5eead4;
|
||
border-radius: 999px;
|
||
padding: 0.4rem 0.9rem;
|
||
color: #0f766e;
|
||
font-weight: 700;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.menu .empty-add:hover {
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.toggles {
|
||
display: grid;
|
||
gap: 0.85rem;
|
||
}
|
||
|
||
.switch {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.8rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.switch input {
|
||
display: none;
|
||
}
|
||
|
||
.switch i {
|
||
width: 44px;
|
||
height: 26px;
|
||
border-radius: 999px;
|
||
background: #e2e8f0;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.switch i::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset-inline-start: 3px;
|
||
top: 3px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 999px;
|
||
background: #fff;
|
||
transition: 0.18s;
|
||
}
|
||
|
||
.switch input:checked + i {
|
||
background: #14b8a6;
|
||
}
|
||
|
||
.switch input:checked + i::after {
|
||
inset-inline-start: 21px;
|
||
}
|
||
|
||
.trio {
|
||
display: grid;
|
||
gap: 0.85rem;
|
||
}
|
||
|
||
.stepper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: var(--control-h);
|
||
height: var(--control-h);
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: var(--radius);
|
||
padding: 0.15rem;
|
||
}
|
||
|
||
.stepper button {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 0;
|
||
border-radius: var(--radius);
|
||
background: #f0fdfa;
|
||
color: #0f766e;
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stepper strong {
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.deal-field {
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
.priorities {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.45rem;
|
||
margin-top: 0.45rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.pri {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.28rem;
|
||
font-size: 0.72rem;
|
||
color: #64748b;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.pri input {
|
||
accent-color: #14b8a6;
|
||
width: 13px;
|
||
height: 13px;
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pri.very-high {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.pri.high {
|
||
color: #ea580c;
|
||
}
|
||
|
||
.pri.medium {
|
||
color: #0d9488;
|
||
}
|
||
|
||
.pri.low {
|
||
color: #2563eb;
|
||
}
|
||
|
||
.pri.very-low {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.pri.on span {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.reminder :deep(.trigger) {
|
||
border: 0;
|
||
min-height: var(--control-h);
|
||
height: var(--control-h);
|
||
padding-inline: 0.15rem;
|
||
}
|
||
|
||
.reminder-channels {
|
||
display: grid;
|
||
gap: 0.55rem;
|
||
margin-top: 0.75rem;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px dashed #e2e8f0;
|
||
}
|
||
|
||
.channel-title {
|
||
margin: 0;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.channel {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.55rem;
|
||
cursor: pointer;
|
||
padding: 0.55rem 0.65rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid #e2e8f0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.channel:has(input:checked) {
|
||
border-color: #99f6e4;
|
||
background: #f0fdfa;
|
||
}
|
||
|
||
.channel input {
|
||
margin-top: 0.2rem;
|
||
accent-color: #0d9488;
|
||
}
|
||
|
||
.channel span {
|
||
display: grid;
|
||
gap: 0.15rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.channel strong {
|
||
font-size: 0.9rem;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.channel small {
|
||
color: #64748b;
|
||
font-size: 0.78rem;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.channel-warn {
|
||
margin: 0;
|
||
color: #b45309;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.channel-sent {
|
||
margin: 0;
|
||
color: #0f766e;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.note-card {
|
||
display: grid;
|
||
gap: 0.45rem;
|
||
}
|
||
|
||
.note-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.note-card textarea {
|
||
min-height: 7rem;
|
||
resize: vertical;
|
||
}
|
||
|
||
.muted,
|
||
.error {
|
||
margin: 0;
|
||
}
|
||
|
||
.error {
|
||
color: #b91c1c;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.35rem;
|
||
min-height: var(--control-h);
|
||
border-radius: var(--radius);
|
||
padding: 0 0.95rem;
|
||
font: inherit;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn.primary {
|
||
border: 0;
|
||
background: #14b8a6;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn.outline {
|
||
border: 1.5px solid #14b8a6;
|
||
background: #fff;
|
||
color: #0f766e;
|
||
}
|
||
|
||
.btn.cancel {
|
||
border: 1.5px solid #f87171;
|
||
background: #fff;
|
||
color: #dc2626;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.mobile-save {
|
||
position: fixed;
|
||
inset-inline: 0.85rem;
|
||
bottom: calc(0.55rem + var(--mobile-tabbar-h));
|
||
z-index: 8;
|
||
}
|
||
|
||
.mobile-save .btn {
|
||
width: 100%;
|
||
min-height: var(--control-h);
|
||
height: var(--control-h);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
@media (min-width: 960px) {
|
||
.crm-page:not(.embedded),
|
||
.page {
|
||
padding-bottom: 1rem;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.desktop-head {
|
||
display: flex;
|
||
}
|
||
|
||
.mobile-head,
|
||
.mobile-save {
|
||
display: none;
|
||
}
|
||
|
||
.layout {
|
||
grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
|
||
align-items: start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.summary {
|
||
display: block;
|
||
position: sticky;
|
||
top: 0.8rem;
|
||
background: #fff;
|
||
border-radius: var(--radius);
|
||
padding: 1rem 1.05rem 0.7rem;
|
||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
|
||
}
|
||
|
||
.summary h2 {
|
||
margin: 0 0 0.8rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
font-size: 0.95rem;
|
||
color: #0f766e;
|
||
}
|
||
|
||
.empty {
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 0.45rem;
|
||
padding: 1rem 0.6rem;
|
||
border-radius: var(--radius);
|
||
background: #f8fafc;
|
||
color: #94a3b8;
|
||
text-align: center;
|
||
font-size: 0.78rem;
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
|
||
.empty p {
|
||
margin: 0;
|
||
}
|
||
|
||
.summary dl {
|
||
margin: 0;
|
||
}
|
||
|
||
.summary dl > div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 0.6rem;
|
||
padding: 0.62rem 0;
|
||
border-top: 1px solid #f1f5f9;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.summary dt {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.summary dd {
|
||
margin: 0;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.pair,
|
||
.toggles,
|
||
.trio {
|
||
grid-template-columns: 1fr 1fr;
|
||
align-items: end;
|
||
}
|
||
|
||
.trio {
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
|
||
.toggles {
|
||
align-items: center;
|
||
}
|
||
|
||
.toggles .switch {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.priorities {
|
||
justify-content: flex-start;
|
||
gap: 1.15rem;
|
||
}
|
||
|
||
.pri {
|
||
gap: 0.32rem;
|
||
}
|
||
}
|
||
</style>
|