Init project

src/routes/components/configurations/advanced.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+</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>
+
+<div class="space-y-4">
+  <header class="mb-2">
+    <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+  </header>
+
+  {#if rota.forbiddenPairs.length === 0}
+    <div class="rounded-3xl border-2 border-dashed border-zinc-200 bg-white/50 py-16 text-center">
+      <div class="mx-auto mb-3 flex size-12 items-center justify-center rounded-full bg-zinc-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-zinc-500"
+          ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path
+            d="M22 21v-2a4 4 0 0 0-3-3.87"
+          /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
+        >
+      </div>
+      <p class="text-sm font-medium text-zinc-500">Δεν έχουν οριστεί περιορισμοί.</p>
+    </div>
+  {:else}
+    <div class="space-y-3">
+      {#each rota.forbiddenPairs as pair, i (pair)}
+        <div
+          class="group flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 transition-all hover:border-blue-200 hover:bg-white"
+        >
+          <div class="flex flex-1 flex-col gap-1">
+            <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+              Resident A
+            </p>
+            <select
+              bind:value={pair.id1}
+              class="w-full rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2 text-sm font-semibold text-zinc-700 outline-none focus:ring-2"
+            >
+              {#each rota.residents as r}
+                <option value={r.id}>{r.name || "Unnamed Resident"}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="flex flex-1 flex-col gap-1">
+            <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+              Resident B
+            </p>
+            <select
+              bind:value={pair.id2}
+              class="w-full rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2 text-sm font-semibold text-zinc-700 outline-none focus:ring-2"
+            >
+              {#each rota.residents as r}
+                {#if r.id !== pair.id1}
+                  <option value={r.id}>{r.name || "Unnamed Resident"}</option>
+                {/if}
+              {/each}
+            </select>
+          </div>
+
+          <button
+            onclick={() => rota.removeForbiddenPair(i)}
+            class="mt-5 rounded-lg p-2 text-zinc-300 transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              ><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
+                d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+              /><line x1="10" x2="10" y1="11" y2="17" /><line
+                x1="14"
+                x2="14"
+                y1="11"
+                y2="17"
+              /></svg
+            >
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="mt-8 flex justify-center">
+    <Button
+      onclick={() => rota.addForbiddenPair()}
+      variant="outline"
+      disabled={rota.residents.length < 2}
+      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>

src/routes/components/configurations/basic.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { CalendarDate } from "@internationalized/date";
+  import { trace } from "@tauri-apps/plugin-log";
+  import { Calendar, Popover } from "bits-ui";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+
+  const monthOptions = [
+    { value: 1, label: "Ιανουάριος" },
+    { value: 2, label: "Φεβρουάριος" },
+    { value: 3, label: "Μάρτιος" },
+    { value: 4, label: "Απρίλιος" },
+    { value: 5, label: "Μάιος" },
+    { value: 6, label: "Ιούνιος" },
+    { value: 7, label: "Ιούλιος" },
+    { value: 8, label: "Αύγουστος" },
+    { value: 9, label: "Σεπτέμβιος" },
+    { value: 10, label: "Οκτώβριος" },
+    { value: 11, label: "Νοέμβριος" },
+    { value: 12, label: "Δεκέμβιος" }
+  ];
+
+  const yearOptions = [2026, 2027];
+</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="grid grid-cols-2 gap-4 rounded-2xl border border-zinc-200 bg-white p-6">
+  <div class="space-y-2">
+    <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Month</p>
+    <select
+      bind:value={rota.selectedMonth}
+      class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
+    >
+      {#each monthOptions as month}
+        <option value={month.value}>{month.label}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="space-y-2">
+    <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Year</p>
+    <select
+      bind:value={rota.selectedYear}
+      class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
+    >
+      {#each yearOptions as year}
+        <option value={year}>{year}</option>
+      {/each}
+    </select>
+  </div>
+</div>
+
+<div class="col-span-4 mt-8 space-y-2">
+  <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Holidays</p>
+
+  <Popover.Root>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          variant="outline"
+          class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:bg-zinc-50"
+        >
+          <span class="mr-2 text-zinc-500"
+            ><svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-3 text-teal-800"
+            >
+              <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                width="18"
+                height="18"
+                x="3"
+                y="4"
+                rx="2"
+              /><path d="m3 10 18 18" /><path d="m21 10-18 18" />
+            </svg></span
+          >
+          {#if rota.holidays.length > 0}
+            <span class="font-bold text-teal-800">
+              Επιλέχθηκαν {rota.holidays.length}
+            </span>
+          {:else}
+            <span class="text-zinc-500">Αργίες</span>
+          {/if}
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+
+    <Popover.Content
+      class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+      sideOffset={8}
+    >
+      <Calendar.Root
+        type="multiple"
+        placeholder={rota.projectMonth}
+        bind:value={rota.holidays}
+        numberOfMonths={1}
+        class="select-none"
+      >
+        {#snippet children({ months, weekdays })}
+          <Calendar.Heading
+            class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+          />
+
+          <div class="flex flex-col gap-4 sm:flex-row">
+            {#each months as month}
+              <Calendar.Grid>
+                <Calendar.GridHead>
+                  <Calendar.GridRow class="flex pb-2">
+                    {#each weekdays as day}
+                      <Calendar.HeadCell class="w-9 text-[10px] font-bold text-zinc-500 uppercase">
+                        {day.slice(0, 2)}
+                      </Calendar.HeadCell>
+                    {/each}
+                  </Calendar.GridRow>
+                </Calendar.GridHead>
+                <Calendar.GridBody>
+                  {#each month.weeks as week}
+                    <Calendar.GridRow class="flex">
+                      {#each week as date}
+                        <Calendar.Cell {date} month={month.value} class="p-0.5">
+                          <Calendar.Day>
+                            {#snippet child({ props })}
+                              <div
+                                {...props}
+                                class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+                hover:bg-teal-100 hover:text-teal-800
+                data-outside-month:opacity-20 data-selected:bg-teal-800 data-selected:font-bold
+              data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                              >
+                                {date.day}
+                              </div>
+                            {/snippet}
+                          </Calendar.Day>
+                        </Calendar.Cell>
+                      {/each}
+                    </Calendar.GridRow>
+                  {/each}
+                </Calendar.GridBody>
+              </Calendar.Grid>
+            {/each}
+          </div>
+        {/snippet}
+      </Calendar.Root>
+    </Popover.Content>
+  </Popover.Root>
+</div>

src/routes/components/configurations/residents.svelte

@@ -0,0 +1,378 @@
+<script lang="ts">
+  import type { DateValue } from "@internationalized/date";
+
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { Calendar, Popover } from "bits-ui";
+  import { rota, steps } from "../../state.svelte.js";
+</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>
+
+<div class="space-y-4">
+  <header class="mb-2">
+    <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+  </header>
+  {#each rota.residents as resident, residentIndex (resident.id)}
+    <div
+      class="group relative flex flex-col gap-6 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 transition-all hover:border-blue-200 hover:bg-white"
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+            Resident {residentIndex + 1}
+          </span>
+        </div>
+        <button
+          onclick={() => rota.removeResident(resident.id)}
+          class="text-zinc-500 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            ><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
+              d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+            /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg
+          >
+        </button>
+      </div>
+
+      <div class="grid grid-cols-12 items-end gap-6">
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Full Name</p>
+          <input
+            bind:value={resident.name}
+            placeholder="π.χ. Τάκης Τσουκαλάς"
+            class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-2.5 text-sm outline-none hover:border-blue-200 hover:bg-white"
+          />
+        </div>
+
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Negative Shifts</p>
+          <Popover.Root>
+            <Popover.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:border-blue-200 hover:bg-white"
+                >
+                  <span class="mr-2 text-zinc-500"
+                    ><svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="mr-3 text-red-800"
+                    >
+                      <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                        width="18"
+                        height="18"
+                        x="3"
+                        y="4"
+                        rx="2"
+                      /><path d="m3 10 18 18" /><path d="m21 10-18 18" />
+                    </svg></span
+                  >
+                  {#if resident.negativeShifts.length > 0}
+                    <span class="font-bold text-red-800">
+                      Επιλέχθηκαν {resident.negativeShifts.length}
+                    </span>
+                  {:else}
+                    <span class="text-zinc-500">Αρνητικές</span>
+                  {/if}
+                </Button>
+              {/snippet}
+            </Popover.Trigger>
+
+            <Popover.Content
+              class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+              sideOffset={8}
+            >
+              <Calendar.Root
+                type="multiple"
+                isDateUnavailable={(date) => {
+                  return resident.manualShifts.some(
+                    (s: { compare: (arg0: DateValue) => number }) => s.compare(date) === 0
+                  );
+                }}
+                bind:value={resident.negativeShifts}
+                bind:placeholder={rota.projectMonth}
+                numberOfMonths={1}
+                class="select-none"
+              >
+                {#snippet children({ months, weekdays })}
+                  <Calendar.Heading
+                    class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+                  />
+
+                  <div class="flex flex-col gap-4 sm:flex-row">
+                    {#each months as month}
+                      <Calendar.Grid>
+                        <Calendar.GridHead>
+                          <Calendar.GridRow class="flex pb-2">
+                            {#each weekdays as day}
+                              <Calendar.HeadCell
+                                class="w-9 text-[10px] font-bold text-zinc-500 uppercase"
+                              >
+                                {day.slice(0, 2)}
+                              </Calendar.HeadCell>
+                            {/each}
+                          </Calendar.GridRow>
+                        </Calendar.GridHead>
+                        <Calendar.GridBody>
+                          {#each month.weeks as week}
+                            <Calendar.GridRow class="flex">
+                              {#each week as date}
+                                <Calendar.Cell {date} month={month.value} class="p-0.5">
+                                  <Calendar.Day>
+                                    {#snippet child({ props })}
+                                      <div
+                                        {...props}
+                                        class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+                hover:bg-red-100 hover:text-red-800
+                data-outside-month:opacity-20 data-selected:bg-red-800 data-selected:font-bold
+              data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                                      >
+                                        {date.day}
+                                      </div>
+                                    {/snippet}
+                                  </Calendar.Day>
+                                </Calendar.Cell>
+                              {/each}
+                            </Calendar.GridRow>
+                          {/each}
+                        </Calendar.GridBody>
+                      </Calendar.Grid>
+                    {/each}
+                  </div>
+                {/snippet}
+              </Calendar.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Manual Shifts</p>
+          <Popover.Root>
+            <Popover.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:border-blue-200 hover:bg-white"
+                >
+                  <span class="mr-2 text-zinc-500"
+                    ><svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="mr-3 text-green-800"
+                    >
+                      <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                        width="18"
+                        height="18"
+                        x="3"
+                        y="4"
+                        rx="2"
+                      /><path d="M3 10h18" /><path d="m9 16 2 2 4-4" />
+                    </svg></span
+                  >
+                  {#if resident.manualShifts.length > 0}
+                    <span class="font-bold text-green-800">
+                      Επιλέχθηκαν {resident.manualShifts.length}
+                    </span>
+                  {:else}
+                    <span class="text-zinc-500">Εφημερίες</span>
+                  {/if}
+                </Button>
+              {/snippet}
+            </Popover.Trigger>
+
+            <Popover.Content
+              class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+              sideOffset={8}
+            >
+              <Calendar.Root
+                type="multiple"
+                isDateUnavailable={(date) => {
+                  return resident.negativeShifts.some((s) => s.compare(date) === 0);
+                }}
+                bind:value={resident.manualShifts}
+                bind:placeholder={rota.projectMonth}
+                numberOfMonths={1}
+                class="select-none"
+              >
+                {#snippet children({ months, weekdays })}
+                  <Calendar.Heading
+                    class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+                  />
+
+                  <div class="flex flex-col gap-4 sm:flex-row">
+                    {#each months as month}
+                      <Calendar.Grid>
+                        <Calendar.GridHead>
+                          <Calendar.GridRow class="flex pb-2">
+                            {#each weekdays as day}
+                              <Calendar.HeadCell
+                                class="w-9 text-[10px] font-bold text-zinc-500 uppercase"
+                              >
+                                {day.slice(0, 2)}
+                              </Calendar.HeadCell>
+                            {/each}
+                          </Calendar.GridRow>
+                        </Calendar.GridHead>
+                        <Calendar.GridBody>
+                          {#each month.weeks as week}
+                            <Calendar.GridRow class="flex">
+                              {#each week as date}
+                                <Calendar.Cell {date} month={month.value} class="p-0.5">
+                                  <Calendar.Day>
+                                    {#snippet child({ props })}
+                                      <div
+                                        {...props}
+                                        class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+              hover:bg-green-100 hover:text-green-800
+                data-outside-month:opacity-20 data-selected:bg-green-800 data-selected:font-bold
+                data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                                      >
+                                        {date.day}
+                                      </div>
+                                    {/snippet}
+                                  </Calendar.Day>
+                                </Calendar.Cell>
+                              {/each}
+                            </Calendar.GridRow>
+                          {/each}
+                        </Calendar.GridBody>
+                      </Calendar.Grid>
+                    {/each}
+                  </div>
+                {/snippet}
+              </Calendar.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+      </div>
+
+      <div
+        class="grid grid-cols-3 divide-x divide-zinc-200 rounded-xl border border-zinc-200 bg-white py-3"
+      >
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">Max Shifts</p>
+          <div class="flex items-center gap-2">
+            <input
+              type="number"
+              bind:value={resident.maxShifts}
+              placeholder="-"
+              class="w-16 rounded-lg border border-zinc-100 bg-zinc-50 py-1 text-center text-sm font-bold text-zinc-700 outline-none placeholder:text-zinc-300"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">Shift Types</p>
+          <div class="flex gap-1">
+            {#each ["OpenAsFirst", "OpenAsSecond", "Closed"] as type}
+              {@const active = resident.allowedTypes.includes(type)}
+              <button
+                type="button"
+                onclick={() => {
+                  if (active && resident.allowedTypes.length > 1) {
+                    resident.allowedTypes = resident.allowedTypes.filter((t) => t !== type);
+                  } else {
+                    resident.allowedTypes.push(type);
+                  }
+                }}
+                class="rounded-md border px-2 py-1 text-[8px] font-black transition-all
+          {active
+                  ? 'border-zinc-800 bg-zinc-800 text-white'
+                  : 'border-zinc-200 bg-white text-zinc-500 hover:bg-zinc-50 hover:text-zinc-600'}"
+              >
+                {type.replace("OpenAs", "")}
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+            Reduced Workload
+          </p>
+          <button
+            onclick={() => (resident.hasReducedLoad = !resident.hasReducedLoad)}
+            class="flex items-center gap-2 rounded-lg border px-3 py-1 transition-all hover:border-blue-200 hover:bg-white
+          {resident.hasReducedLoad
+              ? 'border-green-200 bg-green-50 text-green-700'
+              : 'border-zinc-200 bg-white text-zinc-500'}"
+          >
+            <div
+              class="size-2 rounded-full {resident.hasReducedLoad
+                ? 'animate-pulse bg-green-500'
+                : 'bg-zinc-300'}"
+            ></div>
+            <span class="text-[10px] font-bold uppercase">-1</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  {/each}
+
+  <div class="mt-8 flex justify-center">
+    <Button
+      onclick={() => rota.addResident()}
+      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>

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>

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>