feat(activities): split customer column, wider search, custom activity types with type-specific fields

- Table: separate assignee and customer columns; search by assignee and activity type - ActivityTypeDef model with per-type field definitions (text, select, checklist, participants, ...) - Default types incl. meeting subject/participants and task checklist; admins manage types - Participants see activities in their lists and get notified Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-07 12:29:23 +03:30
parent aa2f39256a
commit 13668c4ba4
17 changed files with 3371 additions and 147 deletions
@@ -23,7 +23,9 @@ import UiSegmented from '@/components/ui/UiSegmented.vue';
 import ExcelImportFlow from '@/components/ExcelImportFlow.vue';
 import ActivitiesKanban from '@/components/activities/ActivitiesKanban.vue';
 import ActivityStagesManager from '@/components/activities/ActivityStagesManager.vue';
+import ActivityTypesManager from '@/components/activities/ActivityTypesManager.vue';
 import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
+import { activityTypeView, typeColorStyle, useActivityTypes } from '@/lib/activity-types';
 import {
  ACTIVITY_EXCEL_ALIASES,
  ACTIVITY_EXCEL_FIELDS,
@@ -56,10 +58,11 @@ import TableColumnsMenu from '@/components/TableColumnsMenu.vue';

 const ACT_TABLE_KEY = 'activities';
 const ACT_COLUMNS = [
-  { key: 'title', label: 'مشتری / عنوان فعالیت', width: 'minmax(0, 2.2fr)' },
+  { key: 'title', label: 'عنوان فعالیت', width: 'minmax(0, 2fr)' },
+  { key: 'who', label: 'کارشناس', width: 'minmax(7rem, 0.9fr)' },
+  { key: 'customer', label: 'مشتری', width: 'minmax(7rem, 1fr)' },
  { key: 'type', label: 'نوع فعالیت', width: '7.6rem' },
  { key: 'when', label: 'زمان شروع', width: '7.2rem' },
-  { key: 'who', label: 'کارشناس', width: '8.4rem' },
  { key: 'status', label: 'وضعیت', width: '8.6rem' },
 ] as const;
 type ActColKey = (typeof ACT_COLUMNS)[number]['key'];
@@ -80,7 +83,8 @@ const actGridStyle = computed(() => ({
  ].join(' '),
 }));

-type TypeFilter = 'all' | ActivityType;
+/** 'all' یا شناسهٔ نوع فعالیت */
+type TypeFilter = string;
 type StatusFilter = 'all' | ActivityStatus;
 type UiStatus = 'done' | 'progress' | 'planned' | 'overdue' | 'canceled';
 type DeskScope = 'mine' | 'team';
@@ -106,14 +110,6 @@ const DESK_TABS: Array<{ key: DeskScope; label: string }> = [
  { key: 'team', label: 'همه تیم' },
 ];

-const TYPE_FILTERS: Array<{ key: TypeFilter; label: string }> = [
-  { key: 'all', label: 'همه انواع' },
-  { key: 'call', label: 'تماس' },
-  { key: 'meeting', label: 'جلسه' },
-  { key: 'task', label: 'وظیفه' },
-  { key: 'note', label: 'پیام' },
-];
-
 const STATUS_FILTERS: Array<{ key: StatusFilter; label: string }> = [
  { key: 'all', label: 'همه وضعیت‌ها' },
  { key: 'open', label: 'باز / انجام‌نشده' },
@@ -155,6 +151,13 @@ const filter = computed<TimeFilter>(() => {

 const stages = ref<ActivityStageDto[]>([]);
 const stagesManagerOpen = ref(false);
+const typesManagerOpen = ref(false);
+
+async function onTypesChanged() {
+  await activityTypes.load(true);
+  kanbanReload.value += 1;
+  await refreshAll();
+}
 const kanbanReload = ref(0);
 const stageCounts = ref<ActivityStageCountsDto>({ counts: {}, total: 0 });

@@ -185,9 +188,25 @@ const ideasOpen = ref(false);
 const ACTIVITY_TYPES: ActivityType[] = ['call', 'meeting', 'task', 'note'];
 const ACTIVITY_STATUSES: ActivityStatus[] = ['open', 'done', 'canceled'];

+const activityTypes = useActivityTypes();
+const TYPE_FILTERS = computed<Array<{ key: TypeFilter; label: string }>>(() => [
+  { key: 'all', label: 'همه انواع' },
+  ...activityTypes.types.value
+    .filter((t) => t.isActive || t.id === typeFilter.value)
+    .map((t) => ({ key: t.id, label: t.name })),
+]);
+
+/** پارامتر قدیمی ?type=call → نوع اصلیِ همان نوع پایه */
+const legacyBaseType = computed<ActivityType | null>(() => {
+  const value = typeof route.query.type === 'string' ? route.query.type : '';
+  return ACTIVITY_TYPES.includes(value as ActivityType) ? (value as ActivityType) : null;
+});
+
 const typeFilter = computed<TypeFilter>(() => {
-  const value = typeof route.query.type === 'string' ? route.query.type : 'all';
-  return ACTIVITY_TYPES.includes(value as ActivityType) ? (value as ActivityType) : 'all';
+  const id = typeof route.query.typeDefId === 'string' ? route.query.typeDefId.trim() : '';
+  if (id) return id;
+  if (legacyBaseType.value) return activityTypes.systemOf.value[legacyBaseType.value]?.id ?? 'all';
+  return 'all';
 });

 const statusFilter = computed<StatusFilter>(() => {
@@ -217,20 +236,6 @@ const counts = ref<Record<TimeFilter, number>>({
  all: 0,
 });

-const typeLabel: Record<ActivityType, string> = {
-  call: 'تماس',
-  meeting: 'جلسه',
-  task: 'وظیفه',
-  note: 'پیام',
-};
-
-const typeIcon: Record<ActivityType, 'phone' | 'users' | 'check' | 'chat'> = {
-  call: 'phone',
-  meeting: 'users',
-  task: 'check',
-  note: 'chat',
-};
-
 const statusLabel: Record<UiStatus, string> = {
  done: 'انجام شد',
  progress: 'در حال انجام',
@@ -263,7 +268,13 @@ const sharedParams = computed<Record<string, string | undefined>>(() => ({
  filter: filter.value,
  q: typeof route.query.q === 'string' && route.query.q.trim() ? route.query.q.trim() : undefined,
  desk: showDeskTabs.value ? desk.value : undefined,
-  type: typeFilter.value === 'all' ? undefined : typeFilter.value,
+  typeDefId: typeof route.query.typeDefId === 'string' && route.query.typeDefId.trim()
+    ? route.query.typeDefId.trim()
+    : undefined,
+  type:
+    !(typeof route.query.typeDefId === 'string' && route.query.typeDefId.trim()) && legacyBaseType.value
+      ? legacyBaseType.value
+      : undefined,
  status: statusFilter.value === 'all' ? undefined : statusFilter.value,
  assigneeId: assigneeFilter.value || undefined,
 }));
@@ -524,7 +535,7 @@ function patchFacetQuery(patch: Record<string, string | undefined>) {
 }

 function setTypeFilter(next: TypeFilter) {
-  patchFacetQuery({ type: next === 'all' ? undefined : next });
+  patchFacetQuery({ typeDefId: next === 'all' ? undefined : next, type: undefined });
 }

 function setStatusFilter(next: StatusFilter) {
@@ -620,6 +631,7 @@ watch(
    route.query.page,
    route.query.desk,
    route.query.type,
+    route.query.typeDefId,
    route.query.status,
    route.query.assigneeId,
    route.query.stage,
@@ -657,6 +669,7 @@ onMounted(() => {
  syncMobile();
  mobileQuery.addEventListener('change', syncMobile);
  void loadUsers();
+  void activityTypes.load(true);
  void loadStages().then(() => {
    if (migrateLegacyDoneFilter()) return;
    void load();
@@ -745,6 +758,16 @@ onUnmounted(() => {
          <UiIcon name="settings" :size="15" />
          مدیریت ستون‌ها
        </UiButton>
+        <UiButton
+          v-if="canManageStages"
+          variant="ghost"
+          size="sm"
+          type="button"
+          @click="typesManagerOpen = true"
+        >
+          <UiIcon name="sliders" :size="15" />
+          انواع فعالیت و فیلدها
+        </UiButton>
        <UiSegmented v-model="viewModel" :options="VIEW_OPTIONS">
          <template #icon="{ option }">
            <UiIcon :name="option.icon ?? 'list'" :size="15" />
@@ -800,7 +823,7 @@ onUnmounted(() => {
        <input
          v-model="q"
          type="search"
-          placeholder="جستجو در عنوان، مشتری، نوع فعالیت..."
+          placeholder="جستجو در عنوان، مشتری، کارشناس، نوع فعالیت..."
        />
      </form>
      <div class="filter-wrap" @click.stop>
@@ -962,27 +985,41 @@ onUnmounted(() => {
              <p v-if="subtitle(item)" class="sub">{{ subtitle(item) }}</p>
            </div>
          </div>
-          <div v-if="colOn('type')" class="type-cell">
-            <span class="type-pill" :class="item.type">
-              <UiIcon :name="typeIcon[item.type]" :size="13" />
-              {{ typeLabel[item.type] }}
-            </span>
-          </div>
-          <div v-if="colOn('when')" class="when" :class="{ late: uiStatus(item) === 'overdue' }">
-            <strong>{{ clockText(item) }}</strong>
-            <span>{{ dayText(item) }}</span>
-          </div>
          <div v-if="colOn('who')" class="who">
            <strong>{{
              item.assignees?.length
                ? item.assignees.map((a) => a.fullName).join('، ')
                : item.assignee?.fullName || '—'
            }}</strong>
-            <span v-if="item.company || item.person">
-              <UiIcon name="building" :size="12" />
-              {{ item.company?.name || item.person?.fullName }}
+          </div>
+          <div v-if="colOn('customer')" class="customer">
+            <RouterLink
+              v-if="item.company"
+              :to="{ name: 'company-detail', params: { id: item.company.id } }"
+            >
+              <UiIcon name="building" :size="13" />
+              {{ item.company.name }}
+            </RouterLink>
+            <RouterLink
+              v-if="item.person"
+              :to="{ name: 'person-detail', params: { id: item.person.id } }"
+              :class="{ secondary: Boolean(item.company) }"
+            >
+              <UiIcon name="user" :size="13" />
+              {{ item.person.fullName }}
+            </RouterLink>
+            <span v-if="!item.company && !item.person" class="none">—</span>
+          </div>
+          <div v-if="colOn('type')" class="type-cell">
+            <span class="type-pill" :style="typeColorStyle(activityTypeView(item).color)">
+              <UiIcon :name="activityTypeView(item).icon" :size="13" />
+              {{ activityTypeView(item).name }}
            </span>
          </div>
+          <div v-if="colOn('when')" class="when" :class="{ late: uiStatus(item) === 'overdue' }">
+            <strong>{{ clockText(item) }}</strong>
+            <span>{{ dayText(item) }}</span>
+          </div>
          <div v-if="colOn('status')" class="status-cell">
            <span class="status" :class="uiStatus(item)">
              <UiIcon :name="statusIcon[uiStatus(item)]" :size="13" />
@@ -1068,10 +1105,12 @@ onUnmounted(() => {
                  انجام شد
                </button>
              </UiDropdownMenu>
-              <span class="type-ico" :class="item.type">
-                <UiIcon :name="typeIcon[item.type]" :size="18" />
+              <span class="type-ico" :style="typeColorStyle(activityTypeView(item).color)">
+                <UiIcon :name="activityTypeView(item).icon" :size="18" />
+              </span>
+              <span class="type-pill" :style="typeColorStyle(activityTypeView(item).color)">
+                {{ activityTypeView(item).name }}
              </span>
-              <span class="type-pill" :class="item.type">{{ typeLabel[item.type] }}</span>
            </div>
          </div>
          <footer class="card-foot">
@@ -1121,6 +1160,12 @@ onUnmounted(() => {
      @close="stagesManagerOpen = false"
      @changed="onStagesChanged(); kanbanReload += 1"
    />
+    <ActivityTypesManager
+      v-if="canManageStages"
+      :open="typesManagerOpen"
+      @close="typesManagerOpen = false"
+      @changed="onTypesChanged"
+    />
  </section>
 </template>

@@ -1566,7 +1611,7 @@ h1 {
 .thead,
 .trow {
  display: grid;
-  grid-template-columns: 2.4rem minmax(0, 2.2fr) 7.6rem 7.2rem 8.4rem 8.6rem 2.4rem;
+  grid-template-columns: 2.4rem minmax(0, 2fr) minmax(7rem, 0.9fr) minmax(7rem, 1fr) 7.6rem 7.2rem 8.6rem 2.4rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
@@ -1682,6 +1727,40 @@ time.note {
  gap: 0.25rem;
 }

+.customer {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.customer a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 600;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.customer a:hover {
+  color: #0f766e;
+}
+
+.customer a.secondary {
+  color: #94a3b8;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.customer .none {
+  color: #cbd5e1;
+}
+
 .when.late {
  color: #dc2626;
 }