Init project

src/routes/components/schedule/generate.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+
+  function getResidentName(day: number, slot: number) {
+    const assignedResidents = rota.residents.filter((resident) =>
+      resident.manualShifts.some(
+        (shift) =>
+          shift.day === day &&
+          shift.month === rota.selectedMonth &&
+          shift.year === rota.selectedYear
+      )
+    );
+
+    const resident = assignedResidents[slot - 1];
+    return resident ? resident.name : "-";
+  }
+
+  // 2 slots in odd days, 1 slot in even days
+  function getRequiredSlots(day: number) {
+    return day % 2 === 0 ? 1 : 2;
+  }
+
+  //TODO: invoke rust?
+  // const resident = {
+  //   id: crypto.randomUUID(),
+  //   name: "",
+  //   negativeShifts: [] as CalendarDate[],
+  //   manualShifts: [] as CalendarDate[]
+  // };
+
+  // try {
+  //   let replyFrom = await invoke("add_resident", { resident });
+  //   console.log("Result:", replyFrom);
+  //   residents = [...residents, resident];
+  // } catch (error) {
+  //   console.error("Error:", error);
+  // }
+</script>
+ 
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep -= 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προηγούμενο
+    </Button>
+  </div>
+</div>
+
+<header class="mb-2">
+  <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+</header>
+
+<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white">
+  <div class="grid grid-cols-7 border-b border-zinc-200 bg-zinc-50/50">
+    {#each ["ΔΕΥΤΕΡΑ", "ΤΡΙΤΗ", "ΤΕΤΑΡΤΗ", "ΠΕΜΠΤΗ", "ΠΑΡΑΣΚΕΥΗ", "ΣΑΒΒΑΤΟ", "ΚΥΡΙΑΚΗ"] as dayName}
+      <div class="py-2 text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+        {dayName}
+      </div>
+    {/each}
+  </div>
+  <div class="grid auto-rows-fr grid-cols-7 gap-px bg-zinc-200">
+    {#each rota.emptySlots as _}<div class="bg-zinc-50/30"></div>{/each}
+    {#each rota.daysArray as day (day)}
+      {@const slotCount = getRequiredSlots(day)}
+      <div class="group min-h-25 bg-white p-2 transition-all hover:bg-blue-50/30">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-xs font-black text-zinc-500">{day}</span>
+        </div>
+
+        <div class="space-y-1">
+          {#if slotCount > 0}
+            <button
+              onclick={() => "handleCellClick(day, 1)"}
+              class="w-full overflow-hidden rounded border border-pink-200 bg-pink-50 px-1.5 py-1 text-left text-[10px] font-bold text-pink-600 transition-colors hover:bg-pink-100"
+            >
+              {getResidentName(day, 1)}
+            </button>
+          {/if}
+          {#if slotCount == 2}
+            <button
+              onclick={() => "handleCellClick(day, 2)"}
+              class="w-full overflow-hidden rounded border border-emerald-200 bg-emerald-50 px-1.5 py-1 text-left text-[10px] font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
+            >
+              {getResidentName(day, 2)}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<div class="mt-8 flex justify-center gap-4">
+  <Button
+    variant="outline"
+    class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+  >
+    Ανακατανομή
+  </Button>
+  <Button
+    onclick={() => "export adasds"}
+    variant="outline"
+    class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+  >
+    Εξαγωγή</Button
+  >
+</div>