Init project

src/routes/components/schedule/preview.svelte

@@ -0,0 +1,88 @@
+<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;
+  }
+</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>
+
+    <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>