Add column visibility menu to activities and API keys tables, and make related person optional when creating an activity

apps/web/src/views/ActivitiesView.vue

@@ -45,6 +45,34 @@ import { brand } from '@mento/shared';
 import { useAuthStore } from '@/stores/auth';
 import { canViewAllRecords } from '@/lib/roles';
 import { PAGE_SIZE_OPTIONS, usePageSize } from '@/lib/pageSize';
+import { registerTableColumns, useTableColumns } from '@/lib/tableColumns';
+import TableColumnsMenu from '@/components/TableColumnsMenu.vue';
+
+const ACT_TABLE_KEY = 'activities';
+const ACT_COLUMNS = [
+  { key: 'title', label: 'مشتری / عنوان فعالیت', width: 'minmax(0, 2.2fr)' },
+  { 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'];
+registerTableColumns(
+  ACT_TABLE_KEY,
+  ACT_COLUMNS.map((c) => c.label),
+);
+const actCols = useTableColumns(() => ACT_TABLE_KEY);
+function colOn(key: ActColKey) {
+  const col = ACT_COLUMNS.find((c) => c.key === key)!;
+  return actCols.isVisible(col.label);
+}
+const actGridStyle = computed(() => ({
+  gridTemplateColumns: [
+    '2.4rem',
+    ...ACT_COLUMNS.filter((c) => actCols.isVisible(c.label)).map((c) => c.width),
+    '2.4rem',
+  ].join(' '),
+}));
 
 type TypeFilter = 'all' | ActivityType;
 type StatusFilter = 'all' | ActivityStatus;
@@ -698,19 +726,20 @@ onUnmounted(() => {
     <template v-else>
       <div class="list-head">
         <strong>{{ filterLabel }} — {{ toFaDigits(total.toLocaleString('en-US')) }} فعالیت</strong>
-        <RouterLink class="cal-mini" :to="{ name: 'activities-calendar' }" aria-label="تقویم">
-          <UiIcon name="calendar" :size="16" />
-        </RouterLink>
+        <div class="list-head-tools">
+          <TableColumnsMenu class="desktop-only" :table-key="ACT_TABLE_KEY" align="end" />
+          <RouterLink class="cal-mini" :to="{ name: 'activities-calendar' }" aria-label="تقویم">
+            <UiIcon name="calendar" :size="16" />
+          </RouterLink>
+        </div>
       </div>
 
       <div class="table desktop-only" role="table">
-        <div class="thead" role="row">
+        <div class="thead" role="row" :style="actGridStyle">
           <span class="row-num">#</span>
-          <span>مشتری / عنوان فعالیت</span>
-          <span>نوع فعالیت</span>
-          <span>زمان شروع</span>
-          <span>کارشناس</span>
-          <span>وضعیت</span>
+          <template v-for="col in ACT_COLUMNS" :key="col.key">
+            <span v-if="colOn(col.key)">{{ col.label }}</span>
+          </template>
           <span />
         </div>
         <article
@@ -718,9 +747,10 @@ onUnmounted(() => {
           :key="item.id"
           class="trow"
           role="row"
+          :style="actGridStyle"
         >
           <span class="row-num">{{ toFaDigits((page - 1) * pageSize + idx + 1) }}</span>
-          <div class="title-cell">
+          <div v-if="colOn('title')" class="title-cell">
             <UiIcon name="star" :size="16" class="star" />
             <div>
               <RouterLink class="title" :to="{ name: 'activity-detail', params: { id: item.id } }">
@@ -729,17 +759,17 @@ onUnmounted(() => {
               <p v-if="subtitle(item)" class="sub">{{ subtitle(item) }}</p>
             </div>
           </div>
-          <div class="type-cell">
+          <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 class="when" :class="{ late: uiStatus(item) === 'overdue' }">
+          <div v-if="colOn('when')" class="when" :class="{ late: uiStatus(item) === 'overdue' }">
             <strong>{{ clockText(item) }}</strong>
             <span>{{ dayText(item) }}</span>
           </div>
-          <div class="who">
+          <div v-if="colOn('who')" class="who">
             <strong>{{
               item.assignees?.length
                 ? item.assignees.map((a) => a.fullName).join('، ')
@@ -750,7 +780,7 @@ onUnmounted(() => {
               {{ item.company?.name || item.person?.fullName }}
             </span>
           </div>
-          <div>
+          <div v-if="colOn('status')">
             <span class="status" :class="uiStatus(item)">
               <UiIcon :name="statusIcon[uiStatus(item)]" :size="13" />
               {{ statusLabel[uiStatus(item)] }}
@@ -1225,6 +1255,12 @@ h1 {
   color: #0f766e;
 }
 
+.list-head-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
 .table {
   background: #fff;
   border-radius: var(--radius);