feat: add profile, class unenroll, notify toggles, and keep sidebar width

Give admins a profile password page, class removal, and SMS/email/bot checkboxes, and stop the sidebar from shrinking on edit pages.

src/views/classes/ClassDetailView.vue

@@ -52,6 +52,22 @@
         <Column header="موبایل">
           <template #body="{ data }"><span dir="ltr">{{ data.phoneNumber || '—' }}</span></template>
         </Column>
+        <Column v-if="canManageStudents" header="عملیات" style="width: 90px">
+          <template #body="{ data }">
+            <PermissionGate permission="classes:register_users">
+              <Button
+                icon="pi pi-user-minus"
+                text
+                rounded
+                size="small"
+                severity="danger"
+                v-tooltip.top="'حذف از کلاس'"
+                :loading="removingUserId === String(data._id || data.id)"
+                @click="confirmRemoveStudent(data)"
+              />
+            </PermissionGate>
+          </template>
+        </Column>
       </DataTable>
     </div>
 
@@ -94,19 +110,30 @@
         </Column>
       </DataTable>
     </div>
+
+    <ConfirmDeleteDialog
+      v-model="removeDialogVisible"
+      title="حذف از کلاس"
+      :message="removeDialogMessage"
+      :loading="!!removingUserId"
+      @confirm="handleRemoveStudent"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { classApi } from '@/api/classApi';
 import { sessionApi } from '@/api/sessionApi';
 import { usePersianDate } from '@/composables/usePersianDate';
 import { useToast } from '@/composables/useToast';
+import { usePermission } from '@/composables/usePermission';
 import PageHeader from '@/components/common/PageHeader.vue';
 import StatusTag from '@/components/common/StatusTag.vue';
 import TableSkeleton from '@/components/common/TableSkeleton.vue';
+import ConfirmDeleteDialog from '@/components/common/ConfirmDeleteDialog.vue';
+import PermissionGate from '@/components/common/PermissionGate.vue';
 import Button from 'primevue/button';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
@@ -114,11 +141,23 @@ import Column from 'primevue/column';
 const route = useRoute();
 const classId = route.params.id;
 const { toPersianDigits, formatJalali } = usePersianDate();
-const { showError } = useToast();
+const { showError, showSuccess } = useToast();
+const { hasPermission } = usePermission();
+const canManageStudents = computed(() => hasPermission('classes:register_users'));
 
 const classData = ref(null);
 const sessions = ref([]);
 const loadingSessions = ref(false);
+const removeDialogVisible = ref(false);
+const removingUserId = ref('');
+const studentToRemove = ref(null);
+
+const removeDialogMessage = computed(() => {
+  const name = studentToRemove.value?.name;
+  return name
+    ? `آیا «${name}» از این کلاس حذف شود؟`
+    : 'آیا این دانشجو از کلاس حذف شود؟';
+});
 
 const fetchClass = async () => {
   try {
@@ -159,4 +198,26 @@ onMounted(() => {
   fetchClass();
   fetchSessions();
 });
+
+const confirmRemoveStudent = (student) => {
+  studentToRemove.value = student;
+  removeDialogVisible.value = true;
+};
+
+const handleRemoveStudent = async () => {
+  const userId = studentToRemove.value?._id || studentToRemove.value?.id;
+  if (!userId) return;
+  removingUserId.value = String(userId);
+  try {
+    const res = await classApi.removeUser(classId, userId);
+    classData.value = res.data || res;
+    removeDialogVisible.value = false;
+    studentToRemove.value = null;
+    showSuccess('دانشجو از کلاس حذف شد');
+  } catch (err) {
+    showError(err);
+  } finally {
+    removingUserId.value = '';
+  }
+};
 </script>