ready to deployment

frontend/src/views/DashboardView.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="dashboard">
+    <div class="card-row">
+      <CardTop :icon="mdiCalendar" label="Dni pracujących" :data="attendanceStore.workingDays" />
+      <CardTop :icon="mdiTent" label="Dni urlopowych" :data="attendanceStore.holidayCount" />
+      <CardTop :icon="mdiNeedle" label="Dni chorobowych" :data="attendanceStore.sickCount" />
+      <CardTop
+        :icon="mdiTimerAlertOutline"
+        label="Dni nieobecnych"
+        :data="attendanceStore.leaveDayCount"
+      />
+      <CardTop
+        :icon="mdiClockOutline"
+        label="Godzin w miesiącu"
+        :data="attendanceStore.workingHours"
+      />
+    </div>
+
+    <HoursSummary v-bind="summary" />
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Wykres godzin</h3>
+      </div>
+      <div class="chart-container">
+        <BarChart v-if="attendanceStore.days.length > 0" :dataset="attendanceStore.days" />
+      </div>
+    </div>
+
+    <div class="card">
+      <div class="card-header">
+        <h3>Tabela godzin</h3>
+      </div>
+      <div class="list-header">
+        <span class="list-grid-dayOfMonth">Dzień</span>
+        <span class="list-grid-dayOfWeek">Dzień tygodnia</span>
+        <span class="list-grid-enter">Wejscie</span>
+        <span class="list-grid-exit">Wyjscie</span>
+        <span class="list-grid-alert">Alert</span>
+        <span class="list-grid-holiday">Urlop</span>
+        <span class="list-grid-sickday">Chorobowe</span>
+        <span class="list-grid-worked">Czas pracy</span>
+        <span class="list-grid-overtime">Bilans dzienny</span>
+        <span class="list-grid-hours">Suma godzin</span>
+        <span class="list-grid-balance">Bilans ogólny</span>
+      </div>
+      <div class="list-body">
+        <DayRow v-for="(_, index) in attendanceStore.days" :key="index" :index="index" />
+      </div>
+    </div>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { onMounted, computed, ref } from 'vue'
+import { useAttendanceStore } from '@/stores/attendanceStore'
+import { mdiCalendar, mdiTent, mdiNeedle, mdiClockOutline, mdiTimerAlertOutline } from '@mdi/js'
+import { getData } from '@/api/dataApi'
+import CardTop from '@/components/CardTop.vue'
+import HoursSummary from '@/components/HoursSummary.vue'
+import BarChart from '@/components/BarChart.vue'
+import DayRow from '@/components/DayRow.vue'
+// import MockApi from '@/api/mock_response.js'
+
+const attendanceStore = useAttendanceStore()
+
+const loading = ref(false)
+const error = ref('')
+
+const summary = computed(() => ({
+  sum_of_hours: attendanceStore.sumOfHours,
+  overtime_hours: attendanceStore.overtimeHours,
+  working_hours: attendanceStore.workedHours,
+  holiday_hours: attendanceStore.holidayHours,
+  sick_hours: attendanceStore.sickHours,
+  to_go_hours: attendanceStore.toGoHours,
+}))
+
+const input = ref('')
+onMounted(async () => {
+  loading.value = true
+  const currentDate = new Date()
+  try {
+    const response = await getData(currentDate.getFullYear(), currentDate.getMonth())
+    input.value = response
+    attendanceStore.loadFromResponse(response)
+  } catch (err) {
+    error.value = err
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+<style scoped></style>