Init project

src/routes/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { Calendar, Popover } from "bits-ui";
+  import { CalendarDate, getDayOfWeek } from "@internationalized/date";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { warn, debug, trace, info, error } from "@tauri-apps/plugin-log";
+
+  import Basic from "./components/configurations/basic.svelte";
+  import Residents from "./components/configurations/residents.svelte";
+  import Advanced from "./components/configurations/advanced.svelte";
+  import Preview from "./components/schedule/preview.svelte";
+
+  import { rota, steps } from "./state.svelte.js";
+  import Generate from "./components/schedule/generate.svelte";
+
+  $inspect(rota.selectedMonth).with((type, value) => {
+    trace(`[Month: ${type}]: ${value}`);
+  });
+  $inspect(rota.selectedYear).with((type, value) => {
+    trace(`[Year: ${type}]: ${value}`);
+  });
+
+  $inspect(rota.holidays).with((type, value) => {
+    const readableHolidays = JSON.stringify($state.snapshot(value));
+    trace(`[Holidays: ${type}]: ${readableHolidays}`);
+  });
+</script>
+
+<main class="grid h-screen w-full grid-cols-5 overflow-hidden bg-zinc-200/50 tracking-tight">
+  <aside class="col-span-1 flex flex-col border-r bg-zinc-100">
+    <div class="border-b border-zinc-200 bg-white p-4">
+      <p class="mt-2 mb-2 text-center text-xl font-bold tracking-widest text-zinc-800 uppercase">
+        Rota
+      </p>
+    </div>
+
+    <nav class="flex flex-1 flex-col">
+      {#each steps as step}
+        <button
+          onclick={() => (rota.currentStep = step.id)}
+          class="flex flex-1 flex-col justify-center border-b border-zinc-800/20 px-8 transition-all last:border-b-0
+        {rota.currentStep === step.id
+            ? 'bg-blue-900/50 text-white'
+            : 'text-zinc-500 hover:bg-zinc-800/50'}"
+        >
+          <span class="text-xs font-bold uppercase">ΒΗΜΑ {step.id}</span>
+          <span class="font-medium">{step.title}</span>
+        </button>
+      {/each}
+      <div class="border-t border-zinc-200 bg-white p-4">
+        <p class="text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+          v1.0.0-Beta
+        </p>
+      </div>
+    </nav>
+  </aside>
+
+  <section class="col-span-4 flex flex-col overflow-y-auto p-12">
+    <div class="mx-auto w-full max-w-2xl">
+      {#if rota.currentStep === 1}
+        <Basic />
+      {:else if rota.currentStep === 2}
+        <Residents />
+      {:else if rota.currentStep === 3}
+        <Advanced />
+      {:else if rota.currentStep === 4}
+        <Preview />
+      {:else if rota.currentStep === 5}
+        <Generate />
+      {/if}
+    </div>
+  </section>
+</main>