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

apps/web/src/views/ActivityFormView.vue

@@ -128,6 +128,11 @@ function pickPerson(p: PersonDto) {
   personOpen.value = false;
 }
 
+function clearPerson() {
+  personId.value = '';
+  personOpen.value = false;
+}
+
 function openNewPerson() {
   personOpen.value = false;
   newPersonOpen.value = true;
@@ -389,7 +394,6 @@ function validate() {
   if (title.value.trim().length < 2) return 'عنوان فعالیت را بنویسید.';
   if (!dueDate.value || !dueTime.value) return 'تاریخ و ساعت را مشخص کنید.';
   if (!assigneeIds.value.length) return 'حداقل یک مسئول فعالیت را انتخاب کنید.';
-  if (isNew.value && !personId.value) return 'شخص یا مشتری مرتبط را انتخاب کنید.';
   if (needsNote.value && !description.value.trim()) return 'توضیح این فعالیت را بنویسید.';
   if (reminderAt.value && !reminderNotifyApp.value && !reminderNotifySms.value) {
     return 'برای یادآوری، اعلان یا پیامک را انتخاب کنید.';
@@ -644,7 +648,7 @@ watch([id, isNew], () => void load(), { immediate: true });
           <div class="card">
             <div class="field">
               <div class="label-row">
-                <label>شخص / مشتری مرتبط <i>*</i></label>
+                <label>شخص / مشتری مرتبط <small class="optional">(اختیاری)</small></label>
                 <button type="button" class="person-add" @click.stop="openNewPerson">
                   <UiIcon name="user-plus" :size="14" />
                   افزودن شخص جدید
@@ -655,7 +659,7 @@ watch([id, isNew], () => void load(), { immediate: true });
                   <UiIcon name="user" :size="16" />
                 </span>
                 <span class="who">
-                  <b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'انتخاب کنید' }}</b>
+                  <b :class="{ ghost: !selectedPerson }">{{ selectedPerson?.fullName || 'بدون شخص — انتخاب کنید' }}</b>
                   <small v-if="personSub">{{ personSub }}</small>
                 </span>
                 <UiIcon name="chevron" :size="16" />
@@ -672,6 +676,14 @@ watch([id, isNew], () => void load(), { immediate: true });
                   />
                 </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"
@@ -1179,6 +1191,12 @@ watch([id, isNew], () => void load(), { immediate: true });
   gap: 0.5rem;
 }
 
+.label-row .optional {
+  color: #94a3b8;
+  font-weight: 400;
+  font-size: 0.75rem;
+}
+
 .person-add {
   display: inline-flex;
   align-items: center;