From 6151aa392d80eb5058db2d54431514ba0336164e Mon Sep 17 00:00:00 2001
From: Dariiiii <usadariaa@yandex.ru>
Date: Sat, 7 Dec 2024 20:13:35 +0300
Subject: [PATCH] front update

---
 backend/app/routes/auth_routes.py       |   3 +-
 frontend/Dockerfile                     |   4 +-
 frontend/package.json                   |  10 +-
 frontend/src/components/NavBar.vue      |   2 +
 frontend/src/router/index.js            |   2 +
 frontend/src/views/admin/Main.vue       |   1 -
 frontend/src/views/admin/Statistics.vue | 210 ++++++++++++++++++++++++
 frontend/src/views/client/Profile.vue   |  19 ++-
 frontend/src/views/client/Request.vue   |  81 ++++++---
 9 files changed, 293 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/views/admin/Statistics.vue

diff --git a/backend/app/routes/auth_routes.py b/backend/app/routes/auth_routes.py
index 59d3d3b..f05c66d 100644
--- a/backend/app/routes/auth_routes.py
+++ b/backend/app/routes/auth_routes.py
@@ -24,7 +24,8 @@ def login():
         return jsonify({"message": "Admin logged in successfully",
                         "userId": str(admin.id),
                         "userType": "admin",
-                        "token": token}), 200
+                        "token": token,
+                        "userName": admin.name}), 200
     
     print(client.password, password)
     if client and client.password == password:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 0744150..fea05af 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,5 +1,7 @@
 FROM node:14.21.3
 WORKDIR /app
-COPY . .
+COPY package*.json ./
 RUN npm install
+COPY . .
+RUN npm run build
 CMD ["npm", "run", "serve"]
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 3d5119a..ca64db6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,9 +8,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "chart.js": "^3.7.1"
   },
   "devDependencies": {
-    "@vue/cli-service": "~4.5.0"
+    "@vue/cli-service": "~4.5.0",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "babel-loader": "^8.2.2"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index d8f383b..299f5a1 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -5,7 +5,9 @@
       <li v-if="isAdmin"><router-link to="/admin/main">SCAM-BANK</router-link></li>
       <li v-if="isClient"><router-link to="/client/credit">Кредиты</router-link></li>
       <li v-if="isClient"><router-link to="/client/request">Заявки</router-link></li>
+      <li v-if="isAdmin"><router-link to="/admin/statistics">Cтатистика</router-link></li>
       <li v-if="isAdmin"><router-link to="/admin/request">Заявки</router-link></li>
+      <li v-if="isAdmin"><router-link to="/admin/main">История</router-link></li>
       <li v-if="isClient && !isOnProfilePage"><router-link to="/client/profile">{{ userName }}</router-link></li>
       <li v-if="isAdmin && !isOnProfilePage"><router-link to="/admin/profile">{{ userName }}</router-link></li>
       <li v-if="isClient && isOnProfilePage"><a href="#" @click.prevent="logout">Выход</a></li>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index c2a9302..79e9704 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -9,6 +9,7 @@ import AdminRequest from '../views/admin/Request.vue';
 import ClientProfile from '../views/client/Profile.vue';
 import AdminProfile from '../views/admin/Profile.vue';
 import ClientLoanApplication from '../views/client/LoanApplication.vue';
+import Statistics from '../views/admin/Statistics.vue';
 
 const routes = [
   // { path: '/', redirect: '/login' },
@@ -21,6 +22,7 @@ const routes = [
   { path: '/admin/request', component: AdminRequest },
   { path: '/client/profile', component: ClientProfile },
   { path: '/admin/profile', component: AdminProfile },
+  { path: '/admin/statistics', component: Statistics },
   { path: '/client/loan-application', component: ClientLoanApplication },
 ];
 
diff --git a/frontend/src/views/admin/Main.vue b/frontend/src/views/admin/Main.vue
index 7abdc33..b4523b4 100644
--- a/frontend/src/views/admin/Main.vue
+++ b/frontend/src/views/admin/Main.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="main-container">
     <h1>Добро пожаловать, admin!</h1>
-    <h2>Оформление кредита</h2>
     <h2>У вас есть непросмотренные заявки!</h2>
     <h2>Вы можете посмотреть их здесь.</h2>
   </div>
diff --git a/frontend/src/views/admin/Statistics.vue b/frontend/src/views/admin/Statistics.vue
new file mode 100644
index 0000000..5137732
--- /dev/null
+++ b/frontend/src/views/admin/Statistics.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="statistics-container">
+    <main>
+      <h1>Статистика</h1>
+      <div class="filters-and-chart">
+        <div class="filters">
+          <div class="filter">
+            <label for="client">Сотрудник/клиент</label>
+            <select id="client" v-model="selectedClientType">
+              <option value="employee">Сотрудник</option>
+              <option value="client">Клиент</option>
+            </select>
+          </div>
+          <div class="filter">
+            <label for="name">ФИО</label>
+            <input type="text" id="name" v-model="selectedName">
+          </div>
+          <div class="filter">
+            <label for="credit">Название кредита</label>
+            <select id="credit" v-model="selectedCreditType">
+              <option value="credit1">Кредит 1</option>
+              <option value="credit2">Кредит 2</option>
+            </select>
+          </div>
+          <div class="filter">
+            <label for="filter">Фильтр</label>
+            <select id="filter" v-model="selectedFilter">
+              <option value="all">Все</option>
+              <option value="openDate">Дата открытия кредита</option>
+              <option value="creditSum">Сумма кредита</option>
+              <option value="creditTerm">Срок кредита</option>
+              <option value="monthlyPayment">Ежемесячный платеж</option>
+              <option value="creditStatus">Статус кредита</option>
+            </select>
+          </div>
+          <div class="buttons">
+            <Button text="Экспортировать" @click="exportData" />
+            <Button text="Импортировать" @click="importData" />
+            <Button text="Построить" @click="buildChart" />
+          </div>
+        </div>
+        <div class="chart-container">
+          <canvas id="creditChart"></canvas>
+        </div>
+      </div>
+    </main>
+    <Notification
+      :message="notificationMessage"
+      :type="notificationType"
+      :visible="showNotification"
+      @close="closeNotification"
+    />
+  </div>
+</template>
+
+<script>
+import Button from '../../components/Button.vue';
+import Notification from '../../components/Notification.vue';
+import Chart from 'chart.js/auto';
+
+export default {
+  name: 'Statistics',
+  components: {
+    Button,
+    Notification
+  },
+  data() {
+    return {
+      selectedClientType: 'employee',
+      selectedName: '',
+      selectedCreditType: 'credit1',
+      selectedFilter: 'all',
+      notificationMessage: '',
+      notificationType: 'info',
+      showNotification: false,
+      userName: localStorage.getItem('userName') || 'Пользователь'
+    };
+  },
+  methods: {
+    exportData() {
+      // Логика экспорта данных
+      this.showNotification = true;
+      this.notificationMessage = 'Данные экспортированы';
+      this.notificationType = 'success';
+    },
+    importData() {
+      // Логика импорта данных
+      this.showNotification = true;
+      this.notificationMessage = 'Данные импортированы';
+      this.notificationType = 'success';
+    },
+    buildChart() {
+      const ctx = document.getElementById('creditChart').getContext('2d');
+      new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
+          datasets: [{
+            label: 'Сумма кредита',
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4],
+            backgroundColor: [
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)',
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)',
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)',
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)',
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)',
+              'rgba(255, 192, 203, 0.5)',
+              'rgba(139, 0, 139, 0.5)'
+            ],
+            borderColor: [
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)',
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)',
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)',
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)',
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)',
+              'rgba(255, 192, 203, 1)',
+              'rgba(139, 0, 139, 1)'
+            ],
+            borderWidth: 1
+          }]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    },
+    closeNotification() {
+      this.showNotification = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.statistics-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+main {
+  padding: 20px;
+  width: 100%;
+}
+
+h1 {
+  margin-top: 0;
+}
+
+.filters-and-chart {
+  display: flex;
+  width: 100%;
+}
+
+.filters {
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+  margin-right: 20px;
+}
+
+.filter {
+  margin-bottom: 10px;
+}
+
+.filter label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.filter select, .filter input {
+  padding: 5px;
+  width: 100%;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.buttons button {
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+}
+
+.chart-container {
+  width: 70%;
+}
+
+.chart {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+</style>
diff --git a/frontend/src/views/client/Profile.vue b/frontend/src/views/client/Profile.vue
index e4d3fb3..e61417e 100644
--- a/frontend/src/views/client/Profile.vue
+++ b/frontend/src/views/client/Profile.vue
@@ -141,15 +141,19 @@ export default {
     };
   },
   created() {
-    this.fetchProfile();
+    this.getProfile();
   },
   methods: {
-    async fetchProfile() {
+    async getProfile() {
       const userId = localStorage.getItem("userId");
+      const userType = localStorage.getItem("userType");
       try {
-        const response = await axios.get(
-          `http://127.0.0.1:5000/profile?client_id=${userId}`
-        );
+        const response = await axios.get('http://127.0.0.1:5000/get_profile', {
+          params: {
+            userId: userId,
+            userType: userType
+          }
+        });
         this.profile = response.data;
       } catch (error) {
         console.error("Ошибка при получении профиля:", error);
@@ -165,12 +169,13 @@ export default {
       }
       const userId = localStorage.getItem("userId");
       try {
-        await axios.post(`http://127.0.0.1:5000/profile`, {
+        await axios.post(`http://127.0.0.1:5000/client_profile_change`, {
           client_id: userId,
           ...this.profile,
         });
         this.isEditing = false;
         alert("Профиль успешно сохранен!");
+        this.getProfile()
       } catch (error) {
         console.error("Ошибка при сохранении профиля:", error);
         alert("Произошла ошибка при сохранении профиля.");
@@ -236,7 +241,7 @@ h1 {
 .profile-form {
   display: flex;
   justify-content: space-between;
-  gap: 50px; /* Увеличенное расстояние между столбцами */
+  gap: 50px; 
 }
 
 .profile-column {
diff --git a/frontend/src/views/client/Request.vue b/frontend/src/views/client/Request.vue
index 37137a8..890f553 100644
--- a/frontend/src/views/client/Request.vue
+++ b/frontend/src/views/client/Request.vue
@@ -1,34 +1,38 @@
 <template>
   <div class="client-request">
     <h1>Заявки</h1>
+    <div class="button-container">
+      <Button text="Отменить фильтрацию и сортировку" @click="resetFilters" buttonType="button" />
+      <Button text="Применить фильтры" @click="applyFilters" buttonType="button" />
+    </div>
     <table class="extended-table">
       <thead>
         <tr>
           <th>
             <div class="filter-options">
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Молодежный кредит" id="option1" />
-                <label for="option1">Молодежный кредит</label>
+                <input type="checkbox" v-model="loan_name" value="Молодежный кредит" />
+                <label>Молодежный кредит</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Ипотека" id="option2" />
-                <label for="option2">Ипотека</label>
+                <input type="checkbox" v-model="loan_name" value="Ипотека" />
+                <label>Ипотека</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Кредит наличными" id="option3" />
-                <label for="option3">Кредит наличными</label>
+                <input type="checkbox" v-model="loan_name" value="Кредит наличными" />
+                <label>Кредит наличными</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Автокредит" id="option4" />
-                <label for="option4">Автокредит</label>
+                <input type="checkbox" v-model="loan_name" value="Автокредит" />
+                <label>Автокредит</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Рефинансирование" id="option5" />
-                <label for="option5">Рефинансирование</label>
+                <input type="checkbox" v-model="loan_name" value="Рефинансирование" />
+                <label>Рефинансирование</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.loan_name" value="Кредитная карта" id="option6" />
-                <label for="option6">Кредитная карта</label>
+                <input type="checkbox" v-model="loan_name" value="Кредитная карта" />
+                <label>Кредитная карта</label>
               </div>
             </div>
           </th>
@@ -43,16 +47,16 @@
           <th>
             <div class="filter-options">
               <div>
-                <input type="checkbox" v-model="filters.status" value="processing" id="status1" />
-                <label for="status1">processing</label>
+                <input type="checkbox" v-model="status" value="processing" />
+                <label>processing</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.status" value="approved" id="status2" />
-                <label for="status2">approved</label>
+                <input type="checkbox" v-model="status" value="approved" />
+                <label>approved</label>
               </div>
               <div>
-                <input type="checkbox" v-model="filters.status" value="rejected" id="status3" />
-                <label for="status3">rejected</label>
+                <input type="checkbox" v-model="status" value="rejected" />
+                <label>rejected</label>
               </div>
             </div>
           </th>
@@ -134,9 +138,6 @@
         </tr>
       </tbody>
     </table>
-    <div class="button-container">
-      <Button text="Применить фильтры" @click="applyFilters" buttonType="button" />
-    </div>
     <Notification 
       :message="notificationMessage" 
       :type="notificationType" 
@@ -161,11 +162,13 @@ export default {
   data() {
     return {
       requests: [],
+      loan_name: [],
+      status: [],
       filters: {
-        loan_name: [],
+        loan_name: '',
         date_from: '',
         date_to: '',
-        status: [],
+        status: '',
         amount_from: '',
         amount_to: '',
         rate_from: '',
@@ -205,6 +208,24 @@ export default {
       }
     },
 
+    resetFilters() {
+      this.loan_name = [],
+      this.status = [],
+      this.filters = {
+        loan_name: '',
+        date_from: '',
+        date_to: '',
+        status: '',
+        amount_from: '',
+        amount_to: '',
+        rate_from: '',
+        rate_to: '',
+        term_from: '',
+        term_to: ''
+      };
+      this.getRequests();
+    },
+
     validateFilters() {
       if (this.filters.amount_from && this.filters.amount_to && this.filters.amount_from > this.filters.amount_to) {
         this.notificationMessage = 'Сумма "от" не может быть больше суммы "до"!';
@@ -243,12 +264,15 @@ export default {
       if (!this.validateFilters()) {
         return;
       }
+      this.filters.loan_name = this.loan_name.join('@');
+      this.filters.status = this.status.join('@');
+      const filter = this.filters;
       const userId = localStorage.getItem('userId');
       try {
         const response = await axios.get('http://127.0.0.1:5000/filter_credit_request', {
           params: {
             client_id: userId,
-            ...this.filters
+            ...filter
           }
         });
         this.requests = response.data;
@@ -386,8 +410,13 @@ tr:hover {
 }
 
 .button-container {
-  text-align: center;
-  margin-top: 20px;
+  display: flex;
+  justify-content: center; 
+  margin-top: 20px; 
+}
+
+.button-container Button {
+  margin: 0 20px;
 }
 
 .filter-options {