feat(notes): let organizations define their own note fields

The note form was fixed. Owners can add fields and each note keeps those values.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/notes/NoteCustomFields.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { CustomFieldDefinitionDto } from '@mento/shared';
+import JalaliDateInput from '@/components/JalaliDateInput.vue';
+
+const props = defineProps<{
+  fields: CustomFieldDefinitionDto[];
+  modelValue: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Record<string, unknown>];
+}>();
+
+function setValue(key: string, value: unknown) {
+  emit('update:modelValue', { ...props.modelValue, [key]: value });
+}
+
+function textValue(key: string) {
+  const value = props.modelValue[key];
+  if (value == null) return '';
+  return String(value);
+}
+
+function numberValue(key: string) {
+  const value = props.modelValue[key];
+  if (value == null || value === '') return '';
+  const n = Number(value);
+  return Number.isFinite(n) ? String(n) : '';
+}
+</script>
+
+<template>
+  <div v-if="fields.length" class="note-custom-fields">
+    <p class="note-custom-title">فیلدهای اختصاصی</p>
+    <div v-for="field in fields" :key="field.id" class="field">
+      <span>
+        {{ field.label }}
+        <em v-if="field.required">*</em>
+      </span>
+
+      <select
+        v-if="field.fieldType === 'select'"
+        :value="textValue(field.key)"
+        @change="setValue(field.key, ($event.target as HTMLSelectElement).value)"
+      >
+        <option value="">انتخاب کنید</option>
+        <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+      </select>
+
+      <label v-else-if="field.fieldType === 'boolean'" class="check-line">
+        <input
+          type="checkbox"
+          :checked="props.modelValue[field.key] === true"
+          @change="setValue(field.key, ($event.target as HTMLInputElement).checked)"
+        />
+        <span>بله</span>
+      </label>
+
+      <input
+        v-else-if="field.fieldType === 'number'"
+        type="number"
+        :value="numberValue(field.key)"
+        @input="
+          setValue(
+            field.key,
+            ($event.target as HTMLInputElement).value === ''
+              ? null
+              : Number(($event.target as HTMLInputElement).value),
+          )
+        "
+      />
+
+      <JalaliDateInput
+        v-else-if="field.fieldType === 'date'"
+        :model-value="textValue(field.key)"
+        @update:model-value="setValue(field.key, $event || null)"
+      />
+
+      <input
+        v-else
+        type="text"
+        :value="textValue(field.key)"
+        @input="setValue(field.key, ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.note-custom-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.note-custom-title {
+  margin: 0.2rem 0 0;
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: #0f766e;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  font-size: 0.82rem;
+  color: #64748b;
+}
+.field em {
+  color: #b91c1c;
+  font-style: normal;
+}
+.field select,
+.field input[type='text'],
+.field input[type='number'] {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.9rem;
+  color: #0f172a;
+  background: #fff;
+}
+.check-line {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  color: #0f172a;
+}
+</style>

apps/web/src/components/notes/NoteFieldsManager.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import axios from 'axios';
+import { api } from '@/lib/api';
+import UiIcon from '@/components/UiIcon.vue';
+import type {
+  CreateCustomFieldRequest,
+  CustomFieldDefinitionDto,
+  CustomFieldType,
+} from '@mento/shared';
+
+const emit = defineEmits<{
+  close: [];
+  saved: [];
+}>();
+
+const loading = ref(false);
+const saving = ref(false);
+const error = ref('');
+const fields = ref<CustomFieldDefinitionDto[]>([]);
+const label = ref('');
+const fieldType = ref<CustomFieldType>('text');
+const optionsRaw = ref('');
+const required = ref(false);
+
+const typeLabels: Record<CustomFieldType, string> = {
+  text: 'متن',
+  number: 'عدد',
+  date: 'تاریخ',
+  boolean: 'بله/خیر',
+  select: 'لیست انتخابی',
+};
+
+async function load() {
+  loading.value = true;
+  error.value = '';
+  try {
+    fields.value = (
+      await api.get<CustomFieldDefinitionDto[]>('/custom-fields', {
+        params: { entityType: 'note' },
+      })
+    ).data;
+  } catch {
+    error.value = 'بارگذاری فیلدها ناموفق بود.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function createField() {
+  if (!label.value.trim()) {
+    error.value = 'عنوان فیلد را وارد کنید.';
+    return;
+  }
+  saving.value = true;
+  error.value = '';
+  try {
+    const payload: CreateCustomFieldRequest = {
+      entityType: 'note',
+      label: label.value.trim(),
+      fieldType: fieldType.value,
+      required: required.value,
+      options:
+        fieldType.value === 'select'
+          ? optionsRaw.value
+              .split(/[,،\n]/)
+              .map((item) => item.trim())
+              .filter(Boolean)
+          : undefined,
+    };
+    await api.post('/custom-fields', payload);
+    label.value = '';
+    optionsRaw.value = '';
+    required.value = false;
+    fieldType.value = 'text';
+    await load();
+    emit('saved');
+  } catch (e) {
+    if (axios.isAxiosError(e)) {
+      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;
+  }
+}
+
+async function toggleActive(field: CustomFieldDefinitionDto) {
+  await api.patch(`/custom-fields/${field.id}`, { isActive: !field.isActive });
+  await load();
+  emit('saved');
+}
+
+async function removeField(field: CustomFieldDefinitionDto) {
+  if (!confirm(`فیلد «${field.label}» حذف شود؟ مقدارهای قبلی روی یادداشت‌ها می‌ماند.`)) return;
+  await api.delete(`/custom-fields/${field.id}`);
+  await load();
+  emit('saved');
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div class="fields-root">
+    <div class="fields-backdrop" aria-hidden="true" @click="emit('close')" />
+    <aside class="fields-panel" role="dialog" aria-label="فیلدهای یادداشت">
+      <header class="fields-head">
+        <h2>فیلدهای یادداشت</h2>
+        <button type="button" class="icon-btn" @click="emit('close')">
+          <UiIcon name="x" :size="20" />
+        </button>
+      </header>
+
+      <div class="fields-scroll">
+        <p class="hint">
+          فیلدهایی که اینجا می‌سازید روی فرم هر یادداشت دیده می‌شوند.
+        </p>
+        <p v-if="error" class="banner-error">{{ error }}</p>
+
+        <form class="create-form" @submit.prevent="createField">
+          <label class="field">
+            <span>عنوان</span>
+            <input v-model="label" type="text" placeholder="مثلاً نتیجه تماس" />
+          </label>
+          <label class="field">
+            <span>نوع</span>
+            <select v-model="fieldType">
+              <option value="text">متن</option>
+              <option value="number">عدد</option>
+              <option value="date">تاریخ</option>
+              <option value="boolean">بله/خیر</option>
+              <option value="select">لیست انتخابی</option>
+            </select>
+          </label>
+          <label v-if="fieldType === 'select'" class="field">
+            <span>گزینه‌ها (با کاما جدا کنید)</span>
+            <input v-model="optionsRaw" type="text" placeholder="مثلاً موفق، پیگیری، ناموفق" />
+          </label>
+          <label class="check-line">
+            <input v-model="required" type="checkbox" />
+            <span>اجباری</span>
+          </label>
+          <button type="submit" class="btn-primary" :disabled="saving">
+            {{ saving ? 'در حال ثبت…' : 'افزودن فیلد' }}
+          </button>
+        </form>
+
+        <p v-if="loading" class="hint">در حال بارگذاری…</p>
+        <p v-else-if="!fields.length" class="hint">هنوز فیلد اختصاصی ندارید.</p>
+        <ul v-else class="field-list">
+          <li v-for="field in fields" :key="field.id">
+            <div>
+              <strong>{{ field.label }}</strong>
+              <span>{{ typeLabels[field.fieldType] }}</span>
+              <span v-if="field.required">اجباری</span>
+              <span v-if="!field.isActive">غیرفعال</span>
+            </div>
+            <div class="row-actions">
+              <button type="button" @click="toggleActive(field)">
+                {{ field.isActive ? 'غیرفعال' : 'فعال' }}
+              </button>
+              <button type="button" class="danger" @click="removeField(field)">حذف</button>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.fields-root {
+  position: fixed;
+  inset: 0;
+  z-index: 140;
+}
+.fields-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.35);
+}
+.fields-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: min(420px, 100%);
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
+}
+.fields-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.fields-head h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+.fields-scroll {
+  overflow: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.hint {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.88rem;
+}
+.banner-error {
+  margin: 0;
+  padding: 0.55rem 0.7rem;
+  border-radius: 10px;
+  background: #fef2f2;
+  color: #b91c1c;
+  font-size: 0.88rem;
+}
+.create-form,
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.field span,
+.check-line {
+  font-size: 0.82rem;
+  color: #64748b;
+}
+.field input,
+.field select {
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 0.45rem 0.55rem;
+  font-size: 0.9rem;
+  color: #0f172a;
+  background: #fff;
+}
+.check-line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
+  color: #0f172a;
+}
+.btn-primary,
+.row-actions button,
+.icon-btn {
+  border: 0;
+  cursor: pointer;
+}
+.btn-primary {
+  background: #0f766e;
+  color: #fff;
+  border-radius: 10px;
+  padding: 0.55rem 1rem;
+  font-weight: 700;
+}
+.btn-primary:disabled {
+  opacity: 0.65;
+}
+.icon-btn {
+  background: transparent;
+  color: #64748b;
+}
+.field-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.field-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+  padding: 0.65rem 0.7rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+}
+.field-list strong {
+  display: block;
+  color: #0f172a;
+}
+.field-list span {
+  margin-inline-start: 0.35rem;
+  color: #64748b;
+  font-size: 0.78rem;
+}
+.row-actions {
+  display: flex;
+  gap: 0.35rem;
+}
+.row-actions button {
+  background: #f8fafc;
+  color: #334155;
+  border-radius: 8px;
+  padding: 0.3rem 0.5rem;
+}
+.row-actions .danger {
+  color: #b91c1c;
+}
+</style>