feat: add reports page

client/src/components/Profile/StudentLeaveCourse.tsx

@@ -1,45 +1,96 @@
 import { WarningOutlined } from '@ant-design/icons';
-import { Divider, Modal, theme, Typography } from 'antd';
+import { Divider, Modal, theme, Typography, Checkbox, Space, Form, Input } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
+type SurveyResponses = {
+  reasonForLeaving?: string[];
+  otherComments?: string;
+};
+
+type ReasonOption = {
+  value: string;
+  labelEn: string;
+  labelRu: string;
+};
+
 type StudentLeaveCourseProps = {
   isOpen: boolean;
-  onOk: () => void;
+  onOk: (surveyData: SurveyResponses) => void;
   onCancel: () => void;
+  confirmLoading?: boolean;
+  reasonsOptions: ReasonOption[];
 };
 
 const messages = ['Are you sure you want to leave the course?', 'Your learning will be stopped.'];
 
-const messagesRu = ['Вы уверены, что хотите покинуть курс?', 'Ваше обучение будет прекращено.'];
-
-export default function StudentLeaveCourse({ isOpen, onOk, onCancel }: StudentLeaveCourseProps) {
+export default function StudentLeaveCourse({
+  isOpen,
+  onOk,
+  onCancel,
+  confirmLoading,
+  reasonsOptions,
+}: StudentLeaveCourseProps) {
   const {
     token: { colorError },
   } = theme.useToken();
+  const [form] = Form.useForm();
+
+  const handleOkClick = () => {
+    form
+      .validateFields()
+      .then(values => {
+        onOk(values);
+      })
+      .catch(info => {
+        console.log('Validate Failed:', info);
+      });
+  };
+
   return (
     <Modal
       title={
-        <Title level={4}>
-          <WarningOutlined style={{ color: colorError }} /> Leaving Course ?
+        <Title level={4} style={{ color: colorError, margin: 0 }}>
+          <WarningOutlined style={{ marginRight: 8 }} />
+          Confirm Leaving Course
         </Title>
       }
       open={isOpen}
-      onOk={onOk}
+      onOk={handleOkClick}
       okText="Leave Course"
-      okButtonProps={{ danger: true }}
+      okButtonProps={{ danger: true, loading: confirmLoading }}
       onCancel={onCancel}
       cancelText="Continue studying"
     >
       <>
-        <Divider />
         {messages.map((text, i) => (
           <Paragraph key={i}>{text}</Paragraph>
         ))}
+
         <Divider />
-        {messagesRu.map((text, i) => (
-          <Paragraph key={i}>{text}</Paragraph>
-        ))}
+        <Form form={form} layout="vertical" name="survey_form">
+          <Form.Item
+            name="reasonForLeaving"
+            label="Why are you leaving the course?"
+            rules={[{ required: true, message: 'Please select at least one reason.' }]}
+          >
+            <Checkbox.Group>
+              <Space direction="vertical">
+                {reasonsOptions.map(option => (
+                  <Checkbox key={option.value} value={option.value}>
+                    {option.labelEn}
+                    <br />
+                    {option.labelRu}
+                  </Checkbox>
+                ))}
+              </Space>
+            </Checkbox.Group>
+          </Form.Item>
+
+          <Form.Item name="otherComments" label="Any other comments or suggestions?">
+            <Input.TextArea rows={4} placeholder="Enter your feedback here..." />
+          </Form.Item>
+        </Form>
       </>
     </Modal>
   );

client/src/components/Profile/StudentStatsCard.tsx

@@ -29,10 +29,64 @@ type State = {
   isStudentStatsModalVisible: boolean;
   isExpelConfirmationModalVisible: boolean;
   courseId?: number;
+  isLoading: boolean;
 };
 
 const coursesService = new CoursesApi();
 
+const reasonsOptions = [
+  {
+    value: 'too_difficult',
+    labelEn: 'Course was too difficult',
+    labelRu: 'Курс был слишком сложным',
+  },
+  {
+    value: 'not_useful',
+    labelEn: 'Course was not useful',
+    labelRu: 'Курс был бесполезным',
+  },
+  {
+    value: 'lack_of_time',
+    labelEn: 'Lack of time',
+    labelRu: 'Нехватка времени',
+  },
+  {
+    value: 'other',
+    labelEn: 'Other',
+    labelRu: 'Другое',
+  },
+  {
+    value: 'no_interest',
+    labelEn: 'Lost interest in the subject',
+    labelRu: 'Потерял интерес к предмету',
+  },
+  {
+    value: 'poor_quality',
+    labelEn: 'Course quality was poor',
+    labelRu: 'Низкое качество курса',
+  },
+  {
+    value: 'found_alternative',
+    labelEn: 'Found an alternative course/opportunity',
+    labelRu: 'Нашел альтернативный курс/возможность',
+  },
+  {
+    value: 'personal_reasons',
+    labelEn: 'Personal reasons',
+    labelRu: 'Личные причины',
+  },
+  {
+    value: 'got_job',
+    labelEn: 'Got a job',
+    labelRu: 'Устроился на работу',
+  },
+  {
+    value: 'got_internship',
+    labelEn: 'Got an internship',
+    labelRu: 'Устроился на стажировку',
+  },
+];
+
 class StudentStatsCard extends React.Component<Props, State> {
   state = {
     courseIndex: 0,
@@ -41,11 +95,13 @@ class StudentStatsCard extends React.Component<Props, State> {
     isStudentStatsModalVisible: false,
     isExpelConfirmationModalVisible: false,
     courseId: undefined,
+    isLoading: false,
   };
 
   shouldComponentUpdate = (_nextProps: Props, nextState: State) =>
     !isEqual(nextState.isStudentStatsModalVisible, this.state.isStudentStatsModalVisible) ||
     !isEqual(nextState.isExpelConfirmationModalVisible, this.state.isExpelConfirmationModalVisible) ||
+    !isEqual(nextState.isLoading, this.state.isLoading) ||
     !isEqual(nextState.coursesProgress, this.state.coursesProgress);
 
   private showStudentStatsModal = (courseIndex: number) => {
@@ -70,10 +126,28 @@ class StudentStatsCard extends React.Component<Props, State> {
     });
   };
 
-  private selfExpelStudent = async (courseId?: number) => {
+  private selfExpelStudent = async (courseId: number | undefined, surveyData: any) => {
     if (!courseId) return;
-    await coursesService.leaveCourse(courseId);
-    window.location.reload();
+
+    this.setState({ isLoading: true });
+
+    try {
+      const response = await fetch(`/api/course/${courseId}/leave-survey`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(surveyData),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to submit survey');
+      }
+      window.location.reload();
+    } catch (error) {
+      console.error('Failed to submit survey or leave course:', error);
+      this.setState({ isLoading: false });
+    }
   };
 
   private rejoinAsStudent = async (courseId: number) => {
@@ -107,8 +181,10 @@ class StudentStatsCard extends React.Component<Props, State> {
         ) : null}
         <StudentLeaveCourse
           isOpen={this.state.isExpelConfirmationModalVisible}
-          onOk={this.selfExpelStudent.bind(this, this.state.courseId)}
+          onOk={surveyData => this.selfExpelStudent(this.state.courseId, surveyData)}
           onCancel={this.hideExpelConfirmationModal}
+          confirmLoading={this.state.isLoading}
+          reasonsOptions={reasonsOptions}
         />
         <CommonCard
           title="Student Statistics"

client/src/components/Sider/data/menuItems.tsx

@@ -215,6 +215,12 @@ const courseManagementMenuItems: CourseManagementMenuItemsData[] = [
     getUrl: (course: Course) => `/course/admin/interviews?course=${course.alias}`,
     courseAccess: isCourseManager,
   },
+  {
+    name: 'Reports',
+    key: 'reports',
+    getUrl: (course: Course) => `/course/admin/reports?course=${course.alias}`,
+    courseAccess: some(isAdmin, isCourseManager, isCourseSupervisor),
+  },
   {
     name: 'Mentor Tasks Review',
     key: 'mentorTasksReview',