wip

package-lock.json

@@ -22,6 +22,7 @@
                 "flatpickr": "^4.6.11",
                 "laravel-mix": "^6.0.43",
                 "lodash": "^4.17.21",
+                "luxon": "^2.3.1",
                 "postcss": "^8.4.12",
                 "tailwindcss": "^3.0.23",
                 "vue": "^3.2.31",
@@ -6115,6 +6116,14 @@
                 "node": ">=10"
             }
         },
+        "node_modules/luxon": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
+            "integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA==",
+            "engines": {
+                "node": ">=12"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -14182,6 +14191,11 @@
                 "yallist": "^4.0.0"
             }
         },
+        "luxon": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.3.1.tgz",
+            "integrity": "sha512-I8vnjOmhXsMSlNMZlMkSOvgrxKJl0uOsEzdGgGNZuZPaS9KlefpE9KV95QFftlJSC+1UyCC9/I69R02cz/zcCA=="
+        },
         "magic-string": {
             "version": "0.25.7",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",

package.json

@@ -29,6 +29,7 @@
         "flatpickr": "^4.6.11",
         "laravel-mix": "^6.0.43",
         "lodash": "^4.17.21",
+        "luxon": "^2.3.1",
         "postcss": "^8.4.12",
         "tailwindcss": "^3.0.23",
         "vue": "^3.2.31",

resources/js/Pages/Test.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="bg-white shadow-md">
+    <div class="p-4 sm:px-6">
+      <div>
+        <h2 class="text-lg font-medium leading-6 text-gray-900">
+          Podsumowanie roczne
+        </h2>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4">
+      <section
+        v-for="month in months"
+        :key="month.name"
+        class="text-center"
+      >
+        <h2 class="font-semibold text-gray-900 capitalize">
+          {{ month.name }}
+        </h2>
+        <div class="grid grid-cols-7 mt-6 text-xs font-semibold leading-6 text-gray-500">
+          <div>Pn</div>
+          <div>Wt</div>
+          <div>Śr</div>
+          <div>Cz</div>
+          <div>Pt</div>
+          <div>Sb</div>
+          <div>Nd</div>
+        </div>
+        <div class="grid isolate grid-cols-7 gap-px mt-2 text-sm bg-gray-200 ring-1 ring-gray-200 shadow">
+          <Component
+            :is="day.isCurrentMonth ? 'button' : 'div'"
+            v-for="(day, dayIdx) in month.days"
+            :key="dayIdx"
+            :class="[day.isCurrentMonth ? 'bg-white hover:brightness-90' : 'bg-gray-50 text-gray-400', day.isCurrentMonth && day.isToday && 'bg-blumilk-700', 'py-1.5 focus:z-10 font-medium']"
+          >
+            <div :class="[day.isCurrentMonth && (day.isWeekend || day.isHoliday) && 'text-red-600 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']">
+              <time :datetime="day.date">
+                {{ day.date.split('-').pop().replace(/^0/, '') }}
+              </time>
+            </div>
+          </Component>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DateTime } from 'luxon'
+
+const vacations = [
+  '2022-03-21',
+  '2022-03-22',
+  '2022-03-23',
+  '2022-03-24',
+  '2022-03-25',
+  '2022-03-28',
+  '2022-03-29',
+  '2022-03-30',
+  '2022-03-31',
+  '2022-04-01',
+]
+
+const holidays = [
+  '2022-04-17',
+  '2022-04-18',
+  '2022-05-01',
+  '2022-05-03',
+  '2022-01-01',
+  '2022-01-06',
+  '2022-06-16',
+  '2022-08-15',
+  '2022-11-01',
+  '2022-11-11',
+  '2022-12-25',
+  '2022-12-26',
+]
+
+const months = []
+
+for (let i = 1; i < 13; i++) {
+  const currentMonth = DateTime.fromObject({ month: i }).startOf('month')
+  
+  const start = currentMonth.startOf('week')
+  const end = currentMonth.endOf('month').endOf('week')
+
+  const temp = {
+    name: currentMonth.monthLong,
+    days: [],
+  }
+
+  for (let day = start; day < end; day = day.plus({ day: 1 })) {
+    temp.days.push({
+      date: day.toFormat('yyyy-MM-dd'),
+      isCurrentMonth: currentMonth.hasSame(day, 'month'),
+      isToday: DateTime.now().hasSame(day, 'day'),
+      isWeekend: day.weekday === 6 || day.weekday === 7,
+      isVacation: vacations.includes(day.toFormat('yyyy-MM-dd')),
+      isHoliday: holidays.includes(day.toFormat('yyyy-MM-dd')),
+    })
+  }
+
+  months.push(temp)
+}
+
+</script>

routes/web.php

@@ -64,6 +64,9 @@ Route::middleware("auth")->group(function (): void {
         Route::get("/monthly-usage", MonthlyUsageController::class)
             ->name("vacation.monthly-usage");
     });
+
+    Route::get("/test", fn() => inertia("Test"));
+
 });
 
 Route::middleware("guest")->group(function (): void {