From ce89b7907446b8cc9a165a9177deab267febb400 Mon Sep 17 00:00:00 2001
From: patrykb <patryk.binkowski21@gmail.com>
Date: Tue, 6 Aug 2024 17:08:07 +0200
Subject: [PATCH] Refactor, improving responsivness

---
 src/App.vue                                   |  10 --
 src/assets/base.css                           |   1 -
 src/assets/style.scss                         |  19 +++
 src/components/ConfirmedForm.vue              |  14 +-
 src/components/MainForm.vue                   |  12 +-
 src/components/NavBar.vue                     |   3 +-
 src/components/OrdersSelector.vue             | 137 ++++++++++--------
 .../SummaryComponent.vue}                     | 137 +++++++++---------
 src/main.ts                                   |   8 +-
 src/router/router.ts                          |   5 +-
 src/stores/orders.store.ts                    |  44 +++---
 src/stores/siteControl.store.ts               |  49 +++----
 src/views/LoginView.vue                       |   7 +-
 src/views/MainView.vue                        |  18 +--
 src/views/OrdersView.vue                      |  12 ++
 src/views/SummaryView.vue                     |   8 +
 src/views/index.ts                            |   3 +-
 17 files changed, 262 insertions(+), 225 deletions(-)
 rename src/{views/SummedOrdersView.vue => components/SummaryComponent.vue} (55%)
 create mode 100644 src/views/OrdersView.vue
 create mode 100644 src/views/SummaryView.vue

diff --git a/src/App.vue b/src/App.vue
index d844d2c..0657a3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,9 +8,7 @@
 import './assets/style.scss'
 import './assets/print.css'
 import { RouterView } from 'vue-router'
-import { getActivePinia } from 'pinia'
 
-const pinia = getActivePinia();
 
 </script>
 
@@ -25,12 +23,4 @@ const pinia = getActivePinia();
     --bulma-box-padding: 0.75rem;
   }
 }
-
-:root {
-  min-height: 100vh;
-}
-
-body {
-  min-height: 100vh;
-}
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..db329bf 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -59,7 +59,6 @@
 }
 
 body {
-  min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition:
diff --git a/src/assets/style.scss b/src/assets/style.scss
index ed744c0..8a18174 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -1,3 +1,22 @@
 @import 'node_modules/bulma/bulma.scss';
+@import '/home/patryk/WebstormProjects/Zamowienia-UI/node_modules/bulma/sass/utilities/mixins';
+
+
+.element {
+  &.is-loading {
+    position: relative;
+    pointer-events: none;
+    opacity: 1;
+    &:after {
+      @include loader;
+      position: absolute;
+      top: calc(50% - 1em);
+      left: calc(50% - 1em);
+      width: 2em;
+      height: 2em;
+      border-width: 0.25em;
+    }
+  }
+}
 
 $primary-color: #111111;
\ No newline at end of file
diff --git a/src/components/ConfirmedForm.vue b/src/components/ConfirmedForm.vue
index a6006d0..29f312a 100644
--- a/src/components/ConfirmedForm.vue
+++ b/src/components/ConfirmedForm.vue
@@ -23,11 +23,11 @@ function cancelOrder(event: Event) {
 </script>
 
 <template>
-  <form class="box" style="min-height: 93.5vh">
+  <form class="box is-shadowless">
     <div class="mb-3">
       <div class="box">
-        <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
-        <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
+        <h1 class="title mb-3 is-6"><b>ZAMÓWIENIE</b></h1>
+        <h1 class="subtitle is-6 mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
         <div class="field mb-3" v-if="contractor != undefined">
           <label class="label is-small">Klient</label>
           <div class="field is-small mb-3">
@@ -68,9 +68,9 @@ function cancelOrder(event: Event) {
     </div>
     <div v-for="category in categories" :key="category.Kod">
       <div class="box mb-3" v-if="category.isVisible">
-        <h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
+        <h1 class="title mb-3 is-6"><b>{{ category.Kod }}</b></h1>
         <div class="field" v-for="(product) in category.Towary" :key="product.Twr_Nazwa">
-          <div v-if="product.Quantity > 0" class="mb-3">
+          <div v-if="Number(product.Quantity) > 0" class="mb-3">
             <label class="label is-small">{{ product.Twr_Nazwa }}</label>
             <div class="columns is-mobile">
               <div class="column">
@@ -108,7 +108,7 @@ function cancelOrder(event: Event) {
                     class="input is-small is-static"
                     type="text"
                     placeholder="Kwota"
-                    :value="(Number(product.Twr_Cena) * product.Quantity).toFixed(2) + ' PLN'"
+                    :value="(Number(product.Twr_Cena) * Number(product.Quantity)).toFixed(2) + ' PLN'"
                     readonly
                   />
                 </div>
@@ -119,7 +119,7 @@ function cancelOrder(event: Event) {
                     class="input is-small is-static"
                     type="text"
                     placeholder="Kwota"
-                    :value="(Number(product.Twr_CenaZ) * product.Quantity).toFixed(2) + ' PLN'"
+                    :value="(Number(product.Twr_CenaZ) * Number(product.Quantity)).toFixed(2) + ' PLN'"
                     readonly
                   />
                 </div>
diff --git a/src/components/MainForm.vue b/src/components/MainForm.vue
index dfca9f2..c62b062 100644
--- a/src/components/MainForm.vue
+++ b/src/components/MainForm.vue
@@ -15,7 +15,7 @@ const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
 
 const { contractor, contractors } = storeToRefs(contractorsStore);
-const { deliveryDate, uuid } = storeToRefs(ordersStore);
+const { deliveryDate, uuid, additionalNotes } = storeToRefs(ordersStore);
 const { categories } = storeToRefs(categoriesStore);
 const { showConfirmationModal, showCancellationModal, isDarkTheme } = storeToRefs(siteControlStore);
 
@@ -170,8 +170,8 @@ onBeforeUnmount( function () {
 </script>
 
 <template>
-  <form class="box" @submit.prevent="createJSON">
-    <div class="mb-3">
+  <form class="box is-shadowless" @submit.prevent="createJSON">
+    <div>
       <div class="box">
         <div class="mb-3">
           <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
@@ -213,14 +213,16 @@ onBeforeUnmount( function () {
                            :clearable="true"
                            input-class-name="input is-small calendar-background"
                            menu-class-name="calendar-background"
-                           v-bind:dark = "isDarkTheme"/>
+                           v-bind:dark = "!!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches"
+            />
           </div>
         </div>
         <div class="field mt-5">
           <label class="label is-small">Uwagi do zamówienia</label>
           <textarea
+            v-model="additionalNotes"
             class="textarea"
-            placeholder="Jeszcze nie połączone z bazą danych"
+            placeholder="Uwagi do zamówienia"
             rows="5"
           ></textarea>
         </div>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 420399c..3921d80 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -70,12 +70,11 @@ function routeLogin() {
         <a class="navbar-item" @click="clickForm">
           Formularz
         </a>
-
         <a class="navbar-item" @click="clickOrders">
           Zamówienia
         </a>
         <a class="navbar-item" @click="clickTable">
-          Tabela
+          Zestawienie
         </a>
       </div>
       <div class="navbar-end">
diff --git a/src/components/OrdersSelector.vue b/src/components/OrdersSelector.vue
index 38af2fb..377ad93 100644
--- a/src/components/OrdersSelector.vue
+++ b/src/components/OrdersSelector.vue
@@ -4,15 +4,21 @@ import { computed, ref, watch } from 'vue'
 import { useOrdersStore } from '@/stores/orders.store'
 import { storeToRefs } from 'pinia'
 import { useSiteControlStore } from '@/stores/siteControl.store'
+import type { Order } from '@/main'
 
 const ordersStore = useOrdersStore();
 const siteControlStore = useSiteControlStore();
-const searchOrderDate = ref<Array<Date>>();
+const searchOrderDate = ref<Array<Date>>([]);
 const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
 const { orders, dates } = storeToRefs(ordersStore);
 const areOrdersLoading = ref<boolean>(false);
-const { isDarkTheme } = storeToRefs(siteControlStore);
+const { isDarkTheme, isLoading } = storeToRefs(siteControlStore);
+
+const date = new Date(Date.now());
+const startDate = new Date(date.getFullYear(), date.getMonth(), (date.getDate() - 2));
+const endDate = new Date(date.getFullYear()+1, date.getMonth(), date.getDay());
+searchOrderDate.value?.push(startDate, endDate);
 
 watch(isInBufor, (val) => {
   if(val && val == isOutOfBuffer.value) {
@@ -36,12 +42,29 @@ const buffer = computed(()=>{
     } else return !!isInBufor.value;
   });
 
-function viewOrder(uuid : string) {
-  siteControlStore.viewOrder(uuid);
+const datesWithOrders = computed( ()=>{
+  const datesWithOrders = new Map<Date, Array<Order>>();
+  if (dates.value == undefined || orders.value == undefined) {
+    return datesWithOrders;
+  }
+  for (const date of dates.value) {
+    datesWithOrders.set(date, []);
+    for (const order of orders.value) {
+      if (order.MZN_DataDos == date.toString()) {
+        datesWithOrders.get(date)?.push(order);
+      }
+    }
+  }
+  return datesWithOrders;
+})
+
+function viewOrder(order : Order) {
+  order.loading = true;
+  siteControlStore.viewOrder(order.MZN_UUID);
 }
 
 async function fetchOrders(event : Event) {
-  event.preventDefault();
+  event?.preventDefault();
   areOrdersLoading.value = true;
   console.log(searchOrderDate.value);
 
@@ -54,6 +77,7 @@ async function fetchOrders(event : Event) {
   areOrdersLoading.value = false;
 }
 
+fetchOrders(null);
 </script>
 
 <template>
@@ -70,7 +94,6 @@ async function fetchOrders(event : Event) {
                            :highlight="dates"
                            input-class-name="input is-small calendar-background"
                            menu-class-name="calendar-background"
-                           v-bind:dark = "isDarkTheme"
                             range/>
           </div>
         </div>
@@ -92,63 +115,61 @@ async function fetchOrders(event : Event) {
     </form>
     <div class="box">
       <h1 class="mb-3 title is-5"><b>ZAMÓWIENIA</b></h1>
-      <div v-for="date in dates" :key="date">
-        <h1 class="mb-3 subtitle is-6">{{ date }}</h1>
-        <div class="columns is-multiline">
-          <template v-for="order in orders" :key="order.MZN_UUID">
-            <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date">
-              <div class="box" :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1, 'cancelled' : order.MZN_Anulowane == 1}">
-                <label class="label is-small">Klient</label>
-                <div class="field is-small mb-3">
-                  <input class="input is-small is-static"
-                         type="text"
-                         :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
-                         readonly/>
-                </div>
-                <div class="columns is-mobile field is-small mb-0">
-                  <div class="column is-6">
-                    <label class="label is-small">Data dostawy</label>
-                    <div class="field is-small">
-                      <input class="input is-small is-static"
-                             type="text"
-                             v-model="order.MZN_DataDos"
-                             readonly/>
+      <div v-for="date in datesWithOrders.keys()" :key="String(date)">
+        <div v-if="datesWithOrders.get(date)?.length != 0">
+          <h1 class="mb-3 subtitle is-6" :class="{'is-skeleton' : areOrdersLoading}">{{ date }}</h1>
+          <div class="columns is-multiline">
+            <template v-for="order in datesWithOrders.get(date)" :key="order.MZN_UUID">
+              <div class="column is-4 mb-3" v-if="order.MZN_DataDos == date.toString()">
+                <div class="box"
+                     :class="{'confirmed' : order.MZN_Bufor == 0 && order.MZN_Anulowane != 1,
+                      'cancelled' : order.MZN_Anulowane == 1,
+                      'is-skeleton' : areOrdersLoading}">
+                  <label class="label is-small" :class="{'is-invisible': areOrdersLoading}">Klient</label>
+                  <div class="field is-small mb-3" :class="{'is-invisible': areOrdersLoading}">
+                    <input class="input is-small is-static"
+                           type="text"
+                           :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
+                           readonly/>
+                  </div>
+                  <div class="columns is-mobile field is-small mb-0">
+                    <div class="column is-6" :class="{'is-invisible': areOrdersLoading}">
+                      <label class="label is-small">Data dostawy</label>
+                      <div class="field is-small">
+                        <input class="input is-small is-static"
+                               type="text"
+                               v-model="order.MZN_DataDos"
+                               readonly/>
+                      </div>
+                    </div>
+                    <div class="column is-6">
+                      <label class="label is-small" :class="{'is-invisible': areOrdersLoading}">Zamówienie potwierdzone?</label>
+                      <div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-if="order.MZN_Bufor==0">
+                        <input class="input is-small is-static"
+                               type="text"
+                               value="Tak"
+                               readonly/>
+                      </div>
+                      <div class="field is-small" :class="{'is-invisible': areOrdersLoading}" v-else>
+                        <input class="input is-small is-static"
+                               type="text"
+                               value="Nie"
+                               readonly/>
+                      </div>
                     </div>
                   </div>
-                  <div class="column is-6">
-                    <label class="label is-small">Data zamówienia</label>
-                    <div class="field is-small">
-                      <input class="input is-small is-static"
-                             type="text"
-                             v-model="order.MZN_DataZam.split('T')[0]"
-                             readonly/>
-                    </div>
+                  <label class="label is-small mb-5" :class="{'is-invisible': areOrdersLoading}">Produkty</label>
+                  <div class="field columns is-multiline is-mobile">
+                    <template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
+                      <div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
+                      <div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
+                    </template>
                   </div>
+                  <button class="button is-info is-small is-expanded" :class="{'is-invisible': areOrdersLoading, 'is-loading': order.loading}" @click="viewOrder(order)">Podgląd</button>
                 </div>
-                <label class="label is-small">Zamówienie potwierdzone?</label>
-                <div class="field is-small mb-3" v-if="order.MZN_Bufor==0">
-                  <input class="input is-small is-static"
-                         type="text"
-                         value="Tak"
-                         readonly/>
-                </div>
-                <div class="field is-small mb-3" v-else>
-                  <input class="input is-small is-static"
-                         type="text"
-                         value="Nie"
-                         readonly/>
-                </div>
-                <label class="label is-small mb-5">Produkty</label>
-                <div class="field columns is-multiline is-mobile">
-                  <template v-for="product in order.MZamElem" :key="product.MZE_TwrKod">
-                    <div class="column is-6 py-0">{{ product.MZE_TwrKod }}</div>
-                    <div class="column is-6 py-0">{{Number(product.MZE_TwrIlosc).toFixed(2) + " " + product.MZE_TwrJm}}</div>
-                  </template>
-                </div>
-                <button class="button is-info is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
               </div>
-            </div>
-          </template>
+            </template>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/views/SummedOrdersView.vue b/src/components/SummaryComponent.vue
similarity index 55%
rename from src/views/SummedOrdersView.vue
rename to src/components/SummaryComponent.vue
index e333247..34ca9e0 100644
--- a/src/views/SummedOrdersView.vue
+++ b/src/components/SummaryComponent.vue
@@ -1,46 +1,45 @@
 <script setup lang="ts">
-import { useOrdersStore } from '@/stores/orders.store'
-import { storeToRefs } from 'pinia'
-import { useRoute } from 'vue-router'
-import NavBar from '@/components/NavBar.vue'
-import VueDatePicker from '@vuepic/vue-datepicker'
-import { useSiteControlStore } from '@/stores/siteControl.store'
-import { ref } from 'vue'
-import { useCategoriesStore } from '@/stores/categories.store'
+  import { useOrdersStore } from '@/stores/orders.store'
+  import { storeToRefs } from 'pinia'
+  import { useRoute } from 'vue-router'
+  import NavBar from '@/components/NavBar.vue'
+  import VueDatePicker from '@vuepic/vue-datepicker'
+  import { useSiteControlStore } from '@/stores/siteControl.store'
+  import { onMounted, ref } from 'vue'
+  import { useCategoriesStore } from '@/stores/categories.store'
 
-const ordersStore = useOrdersStore();
-const siteControlStore = useSiteControlStore();
-const categoriesStore = useCategoriesStore();
+  const ordersStore = useOrdersStore();
+  const siteControlStore = useSiteControlStore();
+  const categoriesStore = useCategoriesStore();
 
-const { orders } = storeToRefs(ordersStore);
-const { categories } = storeToRefs(categoriesStore);
-const { isDarkTheme } = storeToRefs(siteControlStore);
-const searchDate = ref<Date>(new Date(Date.now()));
-const confirmedOrders = ref<boolean>();
-const isSummed = ref<boolean>(true);
-const printMe = ref();
+  const { orders, dates } = storeToRefs(ordersStore);
+  const { categories } = storeToRefs(categoriesStore);
+  const { isDarkTheme } = storeToRefs(siteControlStore);
+  const searchDate = ref<Date>(new Date(Date.now()));
+  const confirmedOrders = ref<boolean>();
+  const isSummed = ref<boolean>(true);
+  const printMe = ref();
+  const isLoading = ref<boolean>(true);
 
+  async function fetchOrders() {
+    isLoading.value=true;
+    console.log((confirmedOrders.value) ? true : null);
+    orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
+      searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
+      (confirmedOrders.value) ? true : null);
+    await categoriesStore.sumProductsFromOrders(orders.value);
+    isLoading.value=false;
+  }
 
-orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
-await categoriesStore.fetchCategories();
-
-const route = useRoute();
-console.log(route);
-
-async function fetchOrders() {
-  console.log((confirmedOrders.value) ? true : null);
-  orders.value = await ordersStore.fetchOrdersByDateStartAndEnd(searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
-    searchDate.value != undefined ? searchDate.value : new Date(Date.now()),
-    (confirmedOrders.value) ? true : null);
-  await categoriesStore.sumProductsFromOrders(orders.value);
-}
-
-categoriesStore.sumProductsFromOrders(orders.value);
+  onMounted(async () => {
+    orders.value = await ordersStore.fetchOrdersByDay(searchDate.value, null);
+    await categoriesStore.sumProductsFromOrders(orders.value);
+    isLoading.value=false;
+  });
 </script>
 
 <template>
-  <NavBar/>
-  <div class="columns box is-shadowless">
+  <div class="columns box is-shadowless" style="margin: 0.5rem 0 0; padding: 0; min-height: 100%">
     <div class="column">
       <div class="box">
         <h1 class="title is-4 mb-3">Opcje</h1>
@@ -50,7 +49,8 @@ categoriesStore.sumProductsFromOrders(orders.value);
                        :clearable="true"
                        input-class-name="input is-small calendar-background"
                        menu-class-name="calendar-background"
-                       v-bind:dark = "isDarkTheme" />
+                       :highlight = "dates"
+        />
 
         <div class="control mt-3">
           <label class="checkbox mr-5">
@@ -67,12 +67,14 @@ categoriesStore.sumProductsFromOrders(orders.value);
         <button class="button is-fullwidth" v-print="'#printMe'">Drukuj</button>
       </div>
     </div>
-    <div class="column is-four-fifths ">
-      <div class="is-flex is-justify-content-center is-flex-direction-row box printMe" style="width: 100%; height: 100%; align-content: center">
-        <div id="printMe">
-          <table class="table blackBorder tableOverflow" v-if="orders != undefined && orders.length != 0 && !isSummed" >
-            <thead>
+    <div class="column is-four-fifths">
+      <div class="is-flex is-justify-content-center is-flex-direction-row box" style="width: 100%; height: 100%; align-content: space-evenly;">
+        <div class="is-flex is-justify-content-center is-flex-direction-row" id="printMe" style="">
+          <div v-if="isLoading == true" class="title is-1 has-text-centered element is-loading" style="height: 25%; align-self: center;"></div>
+          <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && !isSummed">
+            <thead style="width: 100%">
             <tr class="has-background-grey-light">
+              <th>Indeks</th>
               <th>Nazwa produktu</th>
               <th>Ilość</th>
               <th>Jednostka miary</th>
@@ -82,11 +84,12 @@ categoriesStore.sumProductsFromOrders(orders.value);
             </thead>
             <tbody v-for="order in orders" :key="order.MZN_UUID">
             <tr class="has-background-grey-lighter dashedBorder">
-              <td colspan="5">
-                {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 + order.MZN_DataDos.toString()}}
+              <td colspan="6">
+                {{ order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3 }}
               </td>
             </tr>
             <tr v-for="product in order.MZamElem" :key="product.MZE_MZEID">
+              <td>{{product.MZE_TwrKod}}</td>
               <td>{{ product.MZE_TwrNazwa }}</td>
               <td>{{ Number(product.MZE_TwrIlosc).toFixed(2) }}</td>
               <td>{{ product.MZE_TwrJm }}</td>
@@ -98,6 +101,7 @@ categoriesStore.sumProductsFromOrders(orders.value);
           <table class="table blackBorder tableOverflow" v-else-if="orders != undefined && orders.length != 0 && isSummed">
             <thead>
             <tr class="has-background-grey-light">
+              <th>Indeks</th>
               <th>Nazwa produktu</th>
               <th>Ilość</th>
               <th>Jednostka miary</th>
@@ -108,12 +112,14 @@ categoriesStore.sumProductsFromOrders(orders.value);
             <template v-for="category in categories" :key="category.Kod">
               <template v-for="product in category.Towary" :key="product.Twr_Kod">
                 <tr v-if="product.SummedQuantity > 0">
+                  <td>{{product.Twr_Kod}}</td>
                   <td>{{ product.Twr_Nazwa }}</td>
                   <td>{{ product.SummedQuantity.toFixed(2) }}</td>
                   <td>{{ product.Twr_JM }}</td>
                   <td>{{ product.SummedPrice.toFixed(2) }}&nbsp;PLN</td>
                 </tr>
                 <tr v-if="product.SummedQuantityZ > 0">
+                  <td>{{product.Twr_Kod}}</td>
                   <td>{{ product.Twr_Nazwa }}</td>
                   <td>{{ product.SummedQuantityZ.toFixed(2) }}</td>
                   <td>{{ product.Twr_JM }}</td>
@@ -128,34 +134,33 @@ categoriesStore.sumProductsFromOrders(orders.value);
       </div>
     </div>
   </div>
-
 </template>
 
 <style scoped>
-@media screen and (min-width: 500px) {
-  .box {
-    --bulma-box-padding: 1.5rem;
+  @media screen and (min-width: 500px) {
+    .box {
+      --bulma-box-padding: 1.5rem;
+    }
   }
-}
-@media screen and (max-width: 500px) {
-  .box {
-    --bulma-box-padding: 0.75rem;
+  @media screen and (max-width: 500px) {
+    .box {
+      --bulma-box-padding: 0.75rem;
+    }
   }
-}
 
-.blackBorder {
-  --bulma-table-cell-border-color : black;
-}
-
-.tableOverflow {
-  overflow-x: scroll;
-  display: block;
-}
-
-@media print {
-  .dashedBorder{
-    border-style: dotted;
-    border-color: lightgray;
+  .blackBorder {
+    --bulma-table-cell-border-color : black;
+  }
+
+  .tableOverflow {
+    overflow-x: scroll;
+    display: block;
+  }
+
+  @media print {
+    .dashedBorder{
+      border-style: dotted;
+      border-color: lightgray;
+    }
   }
-}
 </style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 1bfdbae..ca51fc9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,13 +13,10 @@ import LoginModal from '@/components/LoginModal.vue'
 import { createPinia, storeToRefs } from 'pinia'
 import VueCookies from 'vue3-cookies'
 import { router } from '@/router/router'
-import { useSiteControlStore } from '@/stores/siteControl.store'
-import { useCategoriesStore } from '@/stores/categories.store'
-import { useOrdersStore } from '@/stores/orders.store'
-import { useContractorsStore } from '@/stores/contractors.store'
 import { useUserStore } from '@/stores/user.store'
 import print from 'vue3-print-nb'
 import CancelationModal from '@/components/CancelationModal.vue'
+import SummaryComponent from '@/components/SummaryComponent.vue'
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -65,6 +62,7 @@ app.component('OrdersSelector', OrdersSelector);
 app.component('ConfirmedForm', ConfirmedForm);
 app.component('LoadingComponent', LoadingComponent);
 app.component('CancelationModal', CancelationModal);
+app.component('SummaryComponent', SummaryComponent);
 app.mount('#app');
 
 export interface Category {
@@ -120,6 +118,7 @@ export interface Contractor {
 }
 
 export interface Order {
+  loading: boolean
   MZN_Bufor: number,
   MZN_Anulowane: number,
   MZN_DataDos: string,
@@ -138,6 +137,7 @@ export interface Order {
   MZN_PodWojewodztwo: string,
   MZN_TypDokumentu: number,
   MZN_UUID: string,
+  MZN_Uwagi: string,
   MZamElem: Array<OrderProduct>
 }
 
diff --git a/src/router/router.ts b/src/router/router.ts
index 823bcc9..b451b37 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-import { MainView, LoginView, SummedOrdersView } from '@/views';
+import { MainView, LoginView, SummaryView, OrdersView } from '@/views'
 
 export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,7 +8,8 @@ export const router = createRouter({
   routes: [
     { path: '/', component: MainView },
     { path: '/login', component: LoginView },
-    { path: '/table', component: SummedOrdersView,  },
+    { path: '/summary', component: SummaryView,  },
+    { path: '/orders', component: OrdersView}
   ]
 });
 
diff --git a/src/stores/orders.store.ts b/src/stores/orders.store.ts
index 4dd22b8..c42dffe 100644
--- a/src/stores/orders.store.ts
+++ b/src/stores/orders.store.ts
@@ -5,18 +5,17 @@ import { axiosInstance } from '@/main'
 
 export const useOrdersStore = defineStore('orders', () => {
   const orders = ref<Array<Order>>();
-  const dates = ref<Array<string>>();
+  const dates = ref<Date[]>();
   const order = ref<Order>();
   const uuid = ref<string>();
   const deliveryDate = ref<Date>();
   const orderDate = ref<Date>();
-
-
+  const additionalNotes = ref<string>();
 
   async function fetchOrders() {
     const response = await axiosInstance.get('/zamowienia', {withCredentials: true});
     const ordersTemp : Array<Order> = response.data;
-    getOrderDates(ordersTemp);
+    await getOrderDates();
     return ordersTemp;
   }
 
@@ -27,7 +26,7 @@ export const useOrdersStore = defineStore('orders', () => {
     }
     const response = await axiosInstance.get(urlString, {withCredentials: true});
     const ordersTemp : Array<Order> = response.data;
-    getOrderDates(ordersTemp);
+    await getOrderDates();
     return ordersTemp;
   }
 
@@ -38,7 +37,7 @@ export const useOrdersStore = defineStore('orders', () => {
     }
     const response = await axiosInstance.get(urlString, {withCredentials: true});
     const ordersTemp : Array<Order> = response.data;
-    getOrderDates(ordersTemp);
+    await getOrderDates();
     return ordersTemp;
   }
 
@@ -50,23 +49,25 @@ export const useOrdersStore = defineStore('orders', () => {
     }
     const response = await axiosInstance.get(urlString, {withCredentials: true});
     const ordersTemp : Array<Order> = response.data;
-    getOrderDates(ordersTemp);
+    await getOrderDates();
     return ordersTemp;
   }
 
-  function getOrderDates(orders : Array<Order>) {
-    dates.value = new Array<string>();
-    if(orders != undefined && orders.length >0) {
-      console.log('watch');
-      for (const order of orders) {
-        console.log(order);
-        if(!dates.value.includes(order.MZN_DataDos)) {
-          dates.value?.push(order.MZN_DataDos);
-        }
-      }
-      dates.value.sort((a, b) => a.localeCompare(b));
-      console.log(dates.value);
-    }
+  async function getOrderDates() {
+    const tempDates = new Array<Date>();
+    tempDates.push(...await fetchDates(0));
+    tempDates.push(...await fetchDates(1));
+    tempDates.push(...await fetchDates(2));
+    dates.value = tempDates;
+    console.log(dates.value);
+  }
+
+  async function fetchDates(offset : number) {
+    const date = new Date(Date.now());
+    const urlString = "/kalendarz/" + date.getFullYear() + '-' + Number(date.getMonth() + offset);
+    const response = await axiosInstance.get(urlString, {withCredentials: true});
+    const datesTemp :Array<Date> = response.data;
+    return datesTemp;
   }
 
   async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) {
@@ -83,6 +84,7 @@ export const useOrdersStore = defineStore('orders', () => {
     orderDate.value = new Date(tempOrder.MZN_DataZam);
     uuid.value = uuidString;
     order.value = tempOrder;
+    additionalNotes.value = tempOrder.MZN_Uwagi;
 
     if(categories.value == undefined) {
       return;
@@ -107,5 +109,5 @@ export const useOrdersStore = defineStore('orders', () => {
     }
   }
 
-  return {orders, order, uuid, deliveryDate, orderDate, dates, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd, getOrderDates}
+  return {orders, order, uuid, deliveryDate, orderDate, dates, additionalNotes, fetchOrders, loadOrder, fetchOrdersByDay, fetchOrdersByBuffer, fetchOrdersByDateStartAndEnd, fetchDates, getOrderDates}
 })
\ No newline at end of file
diff --git a/src/stores/siteControl.store.ts b/src/stores/siteControl.store.ts
index e912b99..0ec2885 100644
--- a/src/stores/siteControl.store.ts
+++ b/src/stores/siteControl.store.ts
@@ -14,34 +14,28 @@ export const useSiteControlStore = defineStore('siteControl', () => {
   const isLoading = ref<boolean>(true);
 
 
-  function switchToForm() {
-    shownComponent.value = "mainForm";
-    if(router.currentRoute.value.fullPath != "/") {
-      newOrder(true);
-      router.push("/");
-    }
+  async function switchToForm() {
+    await router.push("/");
   }
 
   async function switchToOrders() {
-    if(shownComponent.value != 'orderSelector') {
-      const orderStore = useOrdersStore();
-      const { orders } = storeToRefs(orderStore);
-      isLoading.value = true;
-      shownComponent.value = "orderSelector"
-      orders.value = new Array<Order>();
-      orders.value = await orderStore.fetchOrders();
-      isLoading.value = false;
-    }
-    if(router.currentRoute.value.fullPath != "/") {
-      router.push("/");
-    }
+    await router.push("/orders");
+    // const orderStore = useOrdersStore();
+    // const { orders } = storeToRefs(orderStore);
+    // isLoading.value = true;
+    // const date = new Date(Date.now());
+    // const startDate = new Date(date.getFullYear(), date.getMonth(), (date.getDate() - 2));
+    // const endDate = new Date(date.getFullYear()+1, date.getMonth(), date.getDay());
+    // orders.value = await orderStore.fetchOrdersByDateStartAndEnd(startDate, endDate, null);
+    // console.log(orders.value);
+    // isLoading.value = false;
   }
 
   async function switchToTable() {
-    if(router.currentRoute.value.fullPath != "/table") {
-      shownComponent.value = "table"
-      router.push("/table");
-    }
+    // const ordersStore = useOrdersStore();
+    // const { orders } = storeToRefs(ordersStore);
+    // orders.value = await ordersStore.fetchOrdersByDay(new Date(Date.now()), null);
+    await router.push("/summary");
   }
 
   function checkTheme() {
@@ -54,15 +48,15 @@ export const useSiteControlStore = defineStore('siteControl', () => {
     const categoriesStore = useCategoriesStore();
     shownComponent.value = "mainForm";
     isLoading.value = true;
-    window.scrollTo(0, 0);
     await categoriesStore.fetchCategories();
     const { contractor, contractors } = storeToRefs(contractorsStore);
     const { categories } = storeToRefs(categoriesStore);
     await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
     isLoading.value=false;
+    await router.push("/");
   }
 
-  function newOrder(redirect : boolean) {
+  async function newOrder(redirect : boolean) {
     const ordersStore = useOrdersStore();
     const contractorsStore = useContractorsStore();
     const categoriesStore = useCategoriesStore();
@@ -73,11 +67,8 @@ export const useSiteControlStore = defineStore('siteControl', () => {
     uuid.value = undefined;
     deliveryDate.value = undefined;
     orderDate.value = undefined;
-    categoriesStore.fetchCategories();
-    if(shownComponent.value != "mainForm" && redirect) {
-      switchToForm();
-    }
-    window.scrollTo(0, 0);
+    await categoriesStore.fetchCategories();
+    await router.push("/");
   }
 
   return {isLoading, showConfirmationModal, showCancellationModal, isDarkTheme, shownComponent, switchToForm, switchToOrders, switchToTable, checkTheme, viewOrder, newOrder};
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 9dbbaac..d20eb0c 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -4,7 +4,7 @@ import * as Yup from 'yup';
 import { axiosInstance } from '@/main'
 import { router } from '@/router/router'
 import { useUserStore } from '@/stores/user.store'
-import { storeToRefs } from 'pinia'
+import { getActivePinia, storeToRefs } from 'pinia'
 
 const schema = Yup.object().shape({
   username: Yup.string().required('Nazwa użytkownika jest wymagana'),
@@ -24,9 +24,8 @@ async function onSubmit(values : any, { setErrors } : any) {
   });
   if(body != undefined && body.status == 200) {
     const userStore = useUserStore();
-    localStorage.setItem("username", body.data.displayName);
-    storeToRefs(userStore).username = body.data.displayName;
-    storeToRefs(userStore).logoutButtonText = body.data.displayName;
+    const { username } = storeToRefs(userStore);
+    username.value = body.data.displayName;
     await router.push('/');
   }
 
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index aafa155..927a770 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,18 +1,13 @@
 <template class="has-navbar-fixed-top">
   <NavBar/>
-
   <div v-if="isLoading">
     <LoadingComponent/>
   </div>
   <div v-else>
-    <OrdersSelector class="box is-shadowless" v-if="shownComponent == 'orderSelector'"
-    />
-    <div v-else>
-      <MainForm
+    <MainForm
         v-if="order == undefined || order.MZN_Bufor==1"
       />
       <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
-    </div>
 
   </div>
   <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false"></ConfirmationModal>
@@ -50,7 +45,8 @@ async function  fetchData() {
   isLoading.value = false;
 }
 siteControlStore.checkTheme();
-fetchData();
+//fetchData();
+isLoading.value = false;
 </script>
 
 <style>
@@ -64,12 +60,4 @@ fetchData();
     --bulma-box-padding: 0.75rem;
   }
 }
-
-:root {
-  min-height: 100vh;
-}
-
-body {
-  min-height: 100vh;
-}
 </style>
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
new file mode 100644
index 0000000..ebd15de
--- /dev/null
+++ b/src/views/OrdersView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <NavBar/>
+  <OrdersSelector class="box is-shadowless"/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/SummaryView.vue b/src/views/SummaryView.vue
new file mode 100644
index 0000000..4d02140
--- /dev/null
+++ b/src/views/SummaryView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import SummaryComponent from '@/components/SummaryComponent.vue'
+</script>
+
+<template>
+  <NavBar/>
+  <SummaryComponent/>
+</template>
diff --git a/src/views/index.ts b/src/views/index.ts
index 92eaec6..f2107fc 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -1,3 +1,4 @@
 export { default as LoginView } from "./LoginView.vue";
 export { default as MainView } from "./MainView.vue";
-export { default as SummedOrdersView } from "./SummedOrdersView.vue"
+export { default as SummaryView } from "./SummaryView.vue"
+export { default as OrdersView } from "./OrdersView.vue"