Merge pull request #42 from maikusobu/feature/issue-#29

feat: added finance department views

src/index.css

@@ -5,26 +5,24 @@
 @tailwind utilities;
 
 @layer utilities {
-    /* font */
-    * {
-        font-family: 'Inter', sans-serif;
-    }
+  /* font */
+  * {
+    font-family: 'Inter', sans-serif;
+  }
 
-    /* background */
-    body {
-        @apply bg-[#fcfafa];
-    }
+  /* background */
+  body {
+    @apply bg-[#fcfafa];
+  }
 
-    /* form elements */
-    input {
-        @apply placeholder:text-[#8a8a8a] placeholder:text-[14px] placeholder:font-medium !rounded-[4px];
-    }
+  /* form elements */
+  input {
+    @apply placeholder:text-[#8a8a8a] placeholder:text-[14px] placeholder:font-medium !rounded-[4px];
+  }
 
-    button,
-    select,
-    input {
-        @apply !outline-none !ring-0;
-    }
-
-
+  button,
+  select,
+  input {
+    @apply !outline-none !ring-0;
+  }
 }

src/renderer/router/index.ts

@@ -9,6 +9,8 @@ import StudentDepartment from '../views/student-department/StudentDepartment.vue
 import Student from '../views/student-department/student/Student.vue';
 import Program from '../views/training-department/program/Program.vue';
 import AvailableCourse from '../views/training-department/availableCourse/AvailableCourse.vue';
+import Payment from '../views/finance-department/payment/Payment.vue';
+import Report from '../views/finance-department/report/Report.vue';
 import CourseRegistration from '../views/student-department/student/CourseRegistration.vue';
 import resolveDepartmentRoute from '../../utils/resolveDepartmentRoute';
 import getSession from '../../utils/getSession';
@@ -59,7 +61,16 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/finance-department', // phòng kế hoạch tài chính
     component: FinanceDepartment,
-    children: [],
+    children: [
+      {
+        path: 'payment',
+        component: Payment,
+      },
+      {
+        path: 'report',
+        component: Report,
+      },
+    ],
   },
   {
     path: '/student-department', // phòng công tác sinh viên

src/renderer/views/finance-department/FinanceDepartment.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="flex">
-    <SideBar title="phòng kế hoạch tài chính" />
+  <div class="flex overflow-x-scroll">
+    <SideBar
+      :routes="[
+        { name: 'Bảng điều khiển', path: '/finance-department' },
+        { name: 'Biên lai học phí', path: '/finance-department/payment' },
+        { name: 'Báo cáo học phí', path: '/finance-department/report' },
+      ]"
+      title="phòng kế hoạch tài chính"
+    />
     <div class="flex flex-col grow">
       <Topbar />
       <RouterView />

src/renderer/views/finance-department/payment/Payment.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="grow flex flex-col gap-8 items-center p-[40px]">
+    <FunctionBar />
+    <Table />
+  </div>
+</template>
+
+<script setup>
+import FunctionBar from './components/FunctionBar.vue';
+import Table from './components/Table.vue';
+</script>

src/renderer/views/finance-department/payment/components/FunctionBar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="flex items-center gap-[50px]">
+    <label>
+      Năm học:
+      <select
+        class="select select-bordered"
+        v-model="paymentStore.year"
+        @change="paymentStore.getPayments"
+      >
+        <option
+          v-for="year in getYears()"
+          :key="year"
+          :value="year"
+          :selected="year === new Date().getFullYear()"
+        >
+          {{ year }}
+        </option>
+      </select>
+    </label>
+
+    <label>
+      Học kì:
+      <select
+        class="select select-bordered"
+        v-model="paymentStore.term"
+        @change="paymentStore.getPayments"
+      >
+        <option value="first">Học kì 1</option>
+        <option value="second">Học kì 2</option>
+        <option value="third">Học kì 3</option>
+      </select>
+    </label>
+
+    <div class="flex">
+      <img
+        :src="searchIcon"
+        alt="search icon"
+        class="bg-base-silver pl-4 rounded-l"
+      />
+      <input
+        type="search"
+        placeholder="Tìm kiếm họ tên sinh viên"
+        class="input bg-base-silver max-w-[500px] placeholder:text-black focus:border-transparent"
+        v-model="paymentStore.studentName"
+        @input="paymentStore.getPayments"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import searchIcon from '../../../../../assets/images/searchIcon.svg';
+import { usePaymentStore } from '../stores/payment.ts';
+
+const paymentStore = usePaymentStore();
+
+const getYears = () => {
+  const years = [];
+
+  const currentYear = new Date().getFullYear();
+
+  for (let i = 4; i >= 0; i--) {
+    years.push(currentYear - i);
+  }
+
+  return years;
+};
+</script>

src/renderer/views/finance-department/payment/components/Table.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
+    <table class="table table-zebra">
+      <thead>
+        <tr>
+          <th>Mã biên lai</th>
+          <th>Mã số sinh viên</th>
+          <th>Họ tên</th>
+          <th>Ngày lập biên lai</th>
+          <th>Số tiền thu</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="payment in paymentStore.payments"
+          :key="payment.id"
+          class="hover:!bg-secondary-100"
+        >
+          <td>{{ payment?.id }}</td>
+          <td>{{ payment?.studentId }}</td>
+          <td>{{ payment?.studentName }}</td>
+          <td>{{ formateDateString(payment?.paymentDate) }}</td>
+          <td>{{ payment?.ammount.toLocaleString() }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { usePaymentStore } from '../stores/payment.ts';
+import formateDateString from '../../../../../utils/formatDateString';
+
+const paymentStore = usePaymentStore();
+
+paymentStore.getPayments();
+</script>

src/renderer/views/finance-department/payment/stores/payment.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { axiosClient } from '../../../../../api/axiosClient';
+
+enum Term {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+}
+
+type Payment = {
+  id: number;
+  ammount: number;
+  paymentDate: string;
+  year: number;
+  term: Term;
+  studentId: number;
+  studentName: string;
+};
+
+type State = {
+  payments: Payment[];
+  year: number;
+  term: Term;
+  studentName: string;
+};
+
+const usePaymentStore = defineStore('payment', {
+  state: (): State => ({
+    payments: [],
+    year: new Date().getFullYear(),
+    term: Term.FIRST,
+    studentName: '',
+  }),
+
+  actions: {
+    async getPayments() {
+      const response = await axiosClient.get(
+        `/payment/history?year=${this.year}&term=${this.term}&studentName=${this.studentName}`,
+        {
+          id: `list-payment`,
+          cache: {
+            update: {
+              [`list-payment`]: 'delete',
+            },
+          },
+        }
+      );
+
+      this.payments = response.data;
+    },
+  },
+});
+
+export { usePaymentStore };

src/renderer/views/finance-department/report/Report.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="grow flex flex-col gap-8 items-center p-[40px]">
+    <FunctionBar />
+    <Table />
+  </div>
+</template>
+
+<script setup>
+import FunctionBar from './components/FunctionBar.vue';
+import Table from './components/Table.vue';
+</script>

src/renderer/views/finance-department/report/components/FunctionBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex items-center gap-[50px]">
+    <label>
+      Năm học:
+      <select
+        class="select select-bordered"
+        v-model="reportStore.year"
+        @change="reportStore.getReports"
+      >
+        <option
+          v-for="year in getYears()"
+          :key="year"
+          :value="year"
+          :selected="year === new Date().getFullYear()"
+        >
+          {{ year }}
+        </option>
+      </select>
+    </label>
+
+    <label>
+      Học kì:
+      <select
+        class="select select-bordered"
+        v-model="reportStore.term"
+        @change="reportStore.getReports"
+      >
+        <option value="first">Học kì 1</option>
+        <option value="second">Học kì 2</option>
+        <option value="third">Học kì 3</option>
+      </select>
+    </label>
+
+    <label>
+      Trạng thái:
+      <select
+        class="select select-bordered"
+        v-model="reportStore.status"
+        @change="reportStore.getReports"
+      >
+        <option value="ALL">Tất cả</option>
+        <option value="PAID">Đã đóng đủ</option>
+        <option value="PENDING">Chưa đóng đủ</option>
+      </select>
+    </label>
+
+    <div class="flex">
+      <img
+        :src="searchIcon"
+        alt="search icon"
+        class="bg-base-silver pl-4 rounded-l"
+      />
+      <input
+        type="search"
+        placeholder="Tìm kiếm họ tên sinh viên"
+        class="input bg-base-silver max-w-[500px] placeholder:text-black focus:border-transparent"
+        v-model="reportStore.studentName"
+        @input="reportStore.getReports"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import searchIcon from '../../../../../assets/images/searchIcon.svg';
+import { useReportStore } from '../stores/report.ts';
+
+const reportStore = useReportStore();
+
+const getYears = () => {
+  const years = [];
+
+  const currentYear = new Date().getFullYear();
+
+  for (let i = 4; i >= 0; i--) {
+    years.push(currentYear - i);
+  }
+
+  return years;
+};
+</script>