feat: improve bill flow, user columns, and admin notes UI

Select class before user when creating bills, fix national ID and registered classes display, remove course ratings, fix notification badge, and show Persian datetime in the topbar.

src/components/common/AdminNotesField.vue

@@ -0,0 +1,66 @@
+<!-- Reusable admin notes list (string[]) for users, classes, sessions -->
+<template>
+  <div class="admin-notes-field flex flex-column gap-2">
+    <label v-if="label" class="font-semibold text-sm">{{ label }}</label>
+    <p v-if="hint" class="text-muted text-xs m-0">{{ hint }}</p>
+
+    <div v-for="(note, index) in model" :key="index" class="flex gap-2 align-items-start">
+      <Textarea
+        :modelValue="note"
+        rows="2"
+        class="w-full text-sm flex-grow-1"
+        :placeholder="placeholder"
+        @update:modelValue="updateNote(index, $event)"
+      />
+      <Button
+        icon="pi pi-trash"
+        text
+        rounded
+        size="small"
+        severity="danger"
+        :aria-label="'حذف یادداشت'"
+        @click="removeNote(index)"
+      />
+    </div>
+
+    <Button
+      type="button"
+      label="افزودن یادداشت ادمین"
+      icon="pi pi-plus"
+      text
+      size="small"
+      class="align-self-start"
+      @click="addNote"
+    />
+  </div>
+</template>
+
+<script setup>
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+
+const model = defineModel({ type: Array, default: () => [] });
+
+defineProps({
+  label: { type: String, default: 'یادداشت‌های ادمین' },
+  hint: {
+    type: String,
+    default: 'برای موارد غیرعادی یا نکات داخلی، یادداشت اضافه کنید'
+  },
+  placeholder: { type: String, default: 'یادداشت…' }
+});
+
+const addNote = () => {
+  model.value = [...(model.value || []), ''];
+};
+
+const updateNote = (index, value) => {
+  const next = [...(model.value || [])];
+  next[index] = value;
+  model.value = next;
+};
+
+const removeNote = (index) => {
+  model.value = (model.value || []).filter((_, i) => i !== index);
+};
+</script>

src/components/layout/AppTopbar.vue

@@ -20,6 +20,10 @@
         <i class="pi pi-building text-2xl"></i>
         <span>{{ $t('app.title') }}</span>
       </div>
+      <div class="persian-datetime hidden md:flex flex-column align-items-start line-height-2 mr-2">
+        <span class="text-sm font-semibold text-color">{{ persianDate }}</span>
+        <span class="text-xs text-color-secondary" dir="ltr">{{ persianTime }}</span>
+      </div>
     </div>
 
     <div class="flex align-items-center gap-3">
@@ -63,12 +67,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
+import moment from 'jalali-moment';
 import { useAuthStore } from '@/stores/authStore';
 import { useThemeStore } from '@/stores/themeStore';
 import { useUiStore } from '@/stores/uiStore';
 import { useI18n } from 'vue-i18n';
+import { usePersianDate } from '@/composables/usePersianDate';
+import { notificationApi } from '@/api/notificationApi';
 import Button from 'primevue/button';
 import Avatar from 'primevue/avatar';
 import Menu from 'primevue/menu';
@@ -78,9 +85,30 @@ const themeStore = useThemeStore();
 const uiStore = useUiStore();
 const router = useRouter();
 const { t } = useI18n();
+const { toPersianDigits } = usePersianDate();
 
 const userMenu = ref(null);
-const notificationCount = ref(3);
+const notificationCount = ref(0);
+const persianDate = ref('');
+const persianTime = ref('');
+let clockTimer = null;
+
+const updateClock = () => {
+  const now = moment().locale('fa');
+  persianDate.value = toPersianDigits(now.format('dddd jD jMMMM jYYYY'));
+  persianTime.value = toPersianDigits(now.format('HH:mm:ss'));
+};
+
+const fetchNotificationCount = async () => {
+  try {
+    const res = await notificationApi.getAll({ limit: 1, page: 1 });
+    // axios interceptor returns body: { success, data, meta }
+    const total = res?.meta?.totalCount ?? 0;
+    notificationCount.value = Number(total) || 0;
+  } catch {
+    notificationCount.value = 0;
+  }
+};
 
 const toggleUserMenu = (event) => {
   userMenu.value.toggle(event);
@@ -111,6 +139,16 @@ const menuItems = ref([
     ]
   }
 ]);
+
+onMounted(() => {
+  updateClock();
+  clockTimer = setInterval(updateClock, 1000);
+  fetchNotificationCount();
+});
+
+onUnmounted(() => {
+  if (clockTimer) clearInterval(clockTimer);
+});
 </script>
 
 <style scoped lang="scss">
@@ -121,6 +159,11 @@ const menuItems = ref([
   z-index: 999;
 }
 
+.persian-datetime {
+  padding-inline-start: 0.75rem;
+  border-inline-start: 1px solid var(--surface-border, #e2e8f0);
+}
+
 .notification-trigger {
   position: relative;
   display: inline-flex;

src/views/classes/ClassFormView.vue

@@ -55,6 +55,10 @@
           <label class="font-semibold text-sm">کلاس فعال است</label>
         </div>
 
+        <div class="col-12">
+          <AdminNotesField v-model="form.adminNotes" />
+        </div>
+
         <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
           <Button label="انصراف" text severity="secondary" @click="goBack" />
           <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
@@ -129,6 +133,7 @@ import { userApi } from '@/api/userApi';
 import { usePersianDate } from '@/composables/usePersianDate';
 import { useToast } from '@/composables/useToast';
 import PageHeader from '@/components/common/PageHeader.vue';
+import AdminNotesField from '@/components/common/AdminNotesField.vue';
 import ClassSessionsSection from '@/components/classes/ClassSessionsSection.vue';
 import InputText from 'primevue/inputtext';
 import InputNumber from 'primevue/inputnumber';
@@ -167,7 +172,8 @@ const form = reactive({
   tuitionFee: 0,
   startDate: '',
   endDate: '',
-  isActive: true
+  isActive: true,
+  adminNotes: []
 });
 
 const availableUsers = computed(() => {
@@ -242,7 +248,8 @@ const fetchData = async () => {
         tuitionFee: data.tuitionFee || 0,
         startDate: toJalaliDisplay(data.startDate),
         endDate: toJalaliDisplay(data.endDate),
-        isActive: data.isActive !== false
+        isActive: data.isActive !== false,
+        adminNotes: Array.isArray(data.adminNotes) ? [...data.adminNotes] : []
       });
       students.value = data.students || [];
       if (data.course?.sectionCount) defaultSessionCount.value = data.course.sectionCount;
@@ -277,7 +284,8 @@ const handleSubmit = async () => {
       tuitionFee: form.tuitionFee,
       startDate: toGregorianIso(form.startDate),
       endDate: toGregorianIso(form.endDate),
-      isActive: form.isActive
+      isActive: form.isActive,
+      adminNotes: (form.adminNotes || []).map((n) => String(n).trim()).filter(Boolean)
     };
     if (isEditMode.value) {
       await classApi.update(classId, payload);

src/views/courses/CourseListView.vue

@@ -39,12 +39,6 @@
         </template>
       </Column>
 
-      <Column field="rating" header="امتیاز">
-        <template #body="{ data }">
-          <Rating :modelValue="data.rating || 5" readonly :cancel="false" />
-        </template>
-      </Column>
-
       <Column field="isOfficial" header="مدرک رسمی">
         <template #body="{ data }">
           <Tag :value="data.isOfficial ? $t('courses.official') : $t('courses.unofficial')" :severity="data.isOfficial ? 'success' : 'secondary'" />
@@ -98,7 +92,6 @@ import PermissionGate from '@/components/common/PermissionGate.vue';
 import Button from 'primevue/button';
 import Column from 'primevue/column';
 import Tag from 'primevue/tag';
-import Rating from 'primevue/rating';
 
 const { toPersianDigits } = usePersianDate();
 const { showSuccess, showError } = useToast();

src/views/payments/PaymentListView.vue

@@ -3,7 +3,7 @@
   <div class="payment-list-view">
     <PageHeader :title="$t('payments.title')" :subtitle="$t('payments.subtitle')">
       <PermissionGate permission="payments:create">
-        <Button :label="$t('payments.addPayment')" icon="pi pi-plus" severity="success" @click="showCreateModal = true" />
+        <Button :label="$t('payments.addPayment')" icon="pi pi-plus" severity="success" @click="openCreateModal" />
       </PermissionGate>
     </PageHeader>
 
@@ -80,24 +80,37 @@
     <Dialog v-model:visible="showCreateModal" header="ایجاد صورتحساب جدید" modal :style="{ width: '480px' }">
       <div class="flex flex-column gap-3 py-2">
         <div class="flex flex-column gap-2">
-          <label class="font-semibold text-sm">انتخاب کاربر / دانشجو *</label>
+          <label class="font-semibold text-sm">انتخاب یک یا چند کلاس *</label>
-          <Dropdown v-model="createForm.user" :options="usersList" optionLabel="fullName" optionValue="_id" filter placeholder="کاربر را انتخاب کنید" class="w-full text-sm" />
-        </div>
-
-        <div class="flex flex-column gap-2">
-          <label class="font-semibold text-sm">انتخاب یک یا چند کلاس مربوطه *</label>
           <MultiSelect
             v-model="createForm.classes"
             :options="classesList"
             optionLabel="name"
             optionValue="_id"
             display="chip"
-            placeholder="کلاس‌ها را انتخاب کنید"
+            filter
+            placeholder="ابتدا کلاس‌ها را انتخاب کنید"
             class="w-full text-sm"
             @change="onClassesSelected"
           />
         </div>
 
+        <div class="flex flex-column gap-2">
+          <label class="font-semibold text-sm">انتخاب کاربر / دانشجو *</label>
+          <Dropdown
+            v-model="createForm.user"
+            :options="eligibleUsers"
+            optionLabel="fullName"
+            optionValue="_id"
+            filter
+            :placeholder="createForm.classes?.length ? 'دانشجوی ثبت‌نام‌شده را انتخاب کنید' : 'ابتدا کلاس را انتخاب کنید'"
+            class="w-full text-sm"
+            :disabled="!createForm.classes?.length"
+          />
+          <small v-if="createForm.classes?.length && !eligibleUsers.length" class="text-orange-500">
+            هیچ دانشجوی ثبت‌نام‌شده‌ای در کلاس‌های انتخاب‌شده یافت نشد
+          </small>
+        </div>
+
         <div class="flex flex-column gap-2">
           <label class="font-semibold text-sm">مبلغ کل صورتحساب (تومان) *</label>
           <InputNumber v-model="createForm.amount" class="w-full text-sm" suffix=" تومان" />
@@ -123,7 +136,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 import { useDataTable } from '@/composables/useDataTable';
 import { usePersianDate } from '@/composables/usePersianDate';
 import { useToast } from '@/composables/useToast';
@@ -174,11 +187,43 @@ const deleteDialogVisible = ref(false);
 const selectedPayment = ref(null);
 const isDeleting = ref(false);
 
+const studentIdOf = (student) => String(student?._id || student?.id || student);
+
+const eligibleUsers = computed(() => {
+  if (!createForm.classes?.length) return [];
+
+  const selectedIds = new Set(createForm.classes.map(String));
+  const selectedClasses = classesList.value.filter((c) =>
+    selectedIds.has(String(c._id || c.id))
+  );
+  if (!selectedClasses.length) return [];
+
+  // Intersection: user must be registered in every selected class
+  let eligibleIds = null;
+  selectedClasses.forEach((cls) => {
+    const ids = new Set((cls.students || []).map(studentIdOf));
+    if (eligibleIds === null) {
+      eligibleIds = ids;
+    } else {
+      eligibleIds = new Set([...eligibleIds].filter((id) => ids.has(id)));
+    }
+  });
+
+  return usersList.value.filter((u) => eligibleIds?.has(String(u._id || u.id)));
+});
+
 const onClassesSelected = () => {
-  if (!createForm.classes || createForm.classes.length === 0) return;
+  if (createForm.user && !eligibleUsers.value.some((u) => (u._id || u.id) === createForm.user)) {
+    createForm.user = null;
+  }
+
+  if (!createForm.classes || createForm.classes.length === 0) {
+    createForm.amount = 0;
+    return;
+  }
   let totalFee = 0;
-  createForm.classes.forEach(classId => {
+  createForm.classes.forEach((classId) => {
-    const c = classesList.value.find(item => (item._id || item.id) === classId);
+    const c = classesList.value.find((item) => (item._id || item.id) === classId);
     if (c) {
       totalFee += (c.tuitionFee || c.course?.price || 0);
     }
@@ -188,15 +233,27 @@ const onClassesSelected = () => {
   }
 };
 
+const resetCreateForm = () => {
+  createForm.user = null;
+  createForm.classes = [];
+  createForm.amount = 0;
+  createForm.dueDate = '';
+};
+
+const openCreateModal = () => {
+  resetCreateForm();
+  showCreateModal.value = true;
+};
+
 const fetchDropdownData = async () => {
   try {
     const [uRes, cRes] = await Promise.all([
-      userApi.getAll({ limit: 150 }),
+      userApi.getAll({ limit: 200 }),
       classApi.getAll({ limit: 100 })
     ]);
     const uData = uRes.data || uRes;
     const rawUsers = uData.items || uData.users || uData || [];
-    usersList.value = rawUsers.map(u => ({ ...u, fullName: u.name || '' }));
+    usersList.value = rawUsers.map((u) => ({ ...u, fullName: u.name || '' }));
 
     const cData = cRes.data || cRes;
     classesList.value = cData.items || cData.classes || cData || [];
@@ -206,6 +263,7 @@ const fetchDropdownData = async () => {
 };
 
 const handleCreatePayment = async () => {
+  if (!createForm.classes?.length) { showError('لطفا کلاس را انتخاب کنید'); return; }
   if (!createForm.user) { showError('لطفا کاربر را انتخاب کنید'); return; }
   if (!createForm.amount) { showError('لطفا مبلغ را وارد کنید'); return; }
   if (!createForm.dueDate) { showError('لطفا تاریخ سررسید را وارد کنید'); return; }

src/views/sessions/SessionFormView.vue

@@ -78,6 +78,10 @@
           <Textarea v-model="form.note" rows="3" class="w-full text-sm" placeholder="یادداشت داخلی درباره این جلسه…" />
         </div>
 
+        <div class="col-12">
+          <AdminNotesField v-model="form.adminNotes" />
+        </div>
+
         <div class="col-12 flex justify-content-end gap-2 mt-4 pt-3 border-top-1 border-color">
           <Button label="انصراف" text severity="secondary" @click="$router.push('/sessions')" />
           <Button type="submit" :label="$t('app.save')" icon="pi pi-check" :loading="isSubmitting" />
@@ -98,6 +102,7 @@ import { professorApi } from '@/api/professorApi';
 import { usePersianDate } from '@/composables/usePersianDate';
 import { useToast } from '@/composables/useToast';
 import PageHeader from '@/components/common/PageHeader.vue';
+import AdminNotesField from '@/components/common/AdminNotesField.vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Dropdown from 'primevue/select';
@@ -133,7 +138,8 @@ const form = reactive({
   status: 'scheduled',
   topic: '',
   place: '',
-  note: ''
+  note: '',
+  adminNotes: []
 });
 
 const toGregorianIso = (jalaliValue) => {
@@ -195,7 +201,8 @@ const fetchData = async () => {
         status: data.status || 'scheduled',
         topic: data.topic || '',
         place: data.place || '',
-        note: data.note || ''
+        note: data.note || '',
+        adminNotes: Array.isArray(data.adminNotes) ? [...data.adminNotes] : []
       });
     }
   } catch (err) {
@@ -225,7 +232,8 @@ const handleSubmit = async () => {
       status: form.status,
       topic: form.topic,
       place: form.place,
-      note: form.note
+      note: form.note,
+      adminNotes: (form.adminNotes || []).map((n) => String(n).trim()).filter(Boolean)
     };
 
     if (isEditMode.value) {

src/views/users/UserDetailView.vue

@@ -1,7 +1,7 @@
 <!-- /src/views/users/UserDetailView.vue -->
 <template>
   <div class="user-detail-view" v-if="user">
-    <PageHeader :title="user.name || ''" :subtitle="`کد ملی: ${toPersianDigits(user.nationalId)}`">
+    <PageHeader :title="user.name || ''" :subtitle="`کد ملی: ${toPersianDigits(user.nationalIdCode || user.nationalId)}`">
       <PermissionGate permission="users:update">
         <Button :label="$t('app.edit')" icon="pi pi-pencil" severity="warning" @click="$router.push(`/users/edit/${user._id || user.id}`)" />
       </PermissionGate>
@@ -31,7 +31,7 @@
             </div>
             <div class="col-12 sm:col-6 md:col-4 mb-3">
               <span class="text-muted text-xs block mb-1">کد ملی</span>
-              <span class="font-bold text-color text-base" dir="ltr">{{ toPersianDigits(user.nationalId) }}</span>
+              <span class="font-bold text-color text-base" dir="ltr">{{ toPersianDigits(user.nationalIdCode || user.nationalId) }}</span>
             </div>
             <div class="col-12 sm:col-6 md:col-4 mb-3">
               <span class="text-muted text-xs block mb-1">شماره همراه</span>
@@ -84,6 +84,12 @@
               <span class="text-muted text-xs block mb-1">آدرس سکونت</span>
               <span class="text-color text-sm">{{ user.address || '-' }}</span>
             </div>
+            <div class="col-12 mb-3" v-if="user.adminNotes?.length">
+              <span class="text-muted text-xs block mb-1">یادداشت‌های ادمین</span>
+              <ul class="m-0 pr-3 text-sm line-height-3">
+                <li v-for="(note, i) in user.adminNotes" :key="i">{{ note }}</li>
+              </ul>
+            </div>
           </div>
         </TabPanel>
 

src/views/users/UserFormView.vue

@@ -104,6 +104,10 @@
           <InputText v-model.trim="form.address" class="w-full text-sm" />
         </div>
 
+        <div class="col-12">
+          <AdminNotesField v-model="form.adminNotes" />
+        </div>
+
         <div class="col-12 md:col-6 flex flex-column gap-2" v-if="isEditMode">
           <label class="font-semibold text-sm">{{ $t('auth.username') }}</label>
           <InputText
@@ -166,6 +170,7 @@ import { userApi } from '@/api/userApi';
 import { roleApi } from '@/api/roleApi';
 import { useToast } from '@/composables/useToast';
 import PageHeader from '@/components/common/PageHeader.vue';
+import AdminNotesField from '@/components/common/AdminNotesField.vue';
 import InputText from 'primevue/inputtext';
 import Dropdown from 'primevue/select';
 import MultiSelect from 'primevue/multiselect';
@@ -225,7 +230,8 @@ const form = reactive({
   parentPhoneNumber: '',
   address: '',
   username: '',
-  password: ''
+  password: '',
+  adminNotes: []
 });
 
 const buildPayload = () => {
@@ -243,7 +249,8 @@ const buildPayload = () => {
     postalCode: form.postalCode || undefined,
     education: form.education || undefined,
     parentPhoneNumber: form.parentPhoneNumber || undefined,
-    address: form.address || undefined
+    address: form.address || undefined,
+    adminNotes: (form.adminNotes || []).map((n) => String(n).trim()).filter(Boolean)
   };
 
   if (form.preferredMessenger?.length) {
@@ -295,7 +302,8 @@ const fetchUser = async () => {
       parentPhoneNumber: data.parentPhoneNumber || '',
       address: data.address || '',
       username: data.username || '',
-      password: ''
+      password: '',
+      adminNotes: Array.isArray(data.adminNotes) ? [...data.adminNotes] : []
     });
   } catch (err) {
     showError(err);

src/views/users/UserListView.vue

@@ -27,9 +27,9 @@
         </template>
       </Column>
 
-      <Column field="nationalId" header="کد ملی">
+      <Column field="nationalIdCode" header="کد ملی">
         <template #body="{ data }">
-          {{ toPersianDigits(data.nationalId) || '-' }}
+          {{ toPersianDigits(data.nationalIdCode || data.nationalId) || '-' }}
         </template>
       </Column>
 
@@ -52,9 +52,9 @@
         </template>
       </Column>
 
-      <Column field="activeCoursesCount" header="دوره‌های فعال">
+      <Column field="registeredClassesCount" header="کلاس‌های ثبت‌نامی">
         <template #body="{ data }">
-          {{ toPersianDigits(data.activeCoursesCount || data.enrolledCourses?.length || 0) }}
+          {{ toPersianDigits(data.registeredClassesCount ?? 0) }}
         </template>
       </Column>