stefiosif/rota
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init project

Browse Source
This commit is contained in:
stefiosif
2025-12-26 11:25:45 +02:00
commit 8f8fc50310
79 changed files with 9970 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/app.css Normal file
View File

@@ -0,0 +1,121 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.13 0.028 261.692);
--card: oklch(1 0 0);
--card-foreground: oklch(0.13 0.028 261.692);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.13 0.028 261.692);
--primary: oklch(0.21 0.034 264.665);
--primary-foreground: oklch(0.985 0.002 247.839);
--secondary: oklch(0.967 0.003 264.542);
--secondary-foreground: oklch(0.21 0.034 264.665);
--muted: oklch(0.967 0.003 264.542);
--muted-foreground: oklch(0.551 0.027 264.364);
--accent: oklch(0.967 0.003 264.542);
--accent-foreground: oklch(0.21 0.034 264.665);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--ring: oklch(0.707 0.022 261.325);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0.002 247.839);
--sidebar-foreground: oklch(0.13 0.028 261.692);
--sidebar-primary: oklch(0.21 0.034 264.665);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.967 0.003 264.542);
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
--sidebar-border: oklch(0.928 0.006 264.531);
--sidebar-ring: oklch(0.707 0.022 261.325);
}
.dark {
--background: oklch(0.13 0.028 261.692);
--foreground: oklch(0.985 0.002 247.839);
--card: oklch(0.21 0.034 264.665);
--card-foreground: oklch(0.985 0.002 247.839);
--popover: oklch(0.21 0.034 264.665);
--popover-foreground: oklch(0.985 0.002 247.839);
--primary: oklch(0.928 0.006 264.531);
--primary-foreground: oklch(0.21 0.034 264.665);
--secondary: oklch(0.278 0.033 256.848);
--secondary-foreground: oklch(0.985 0.002 247.839);
--muted: oklch(0.278 0.033 256.848);
--muted-foreground: oklch(0.707 0.022 261.325);
--accent: oklch(0.278 0.033 256.848);
--accent-foreground: oklch(0.985 0.002 247.839);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.034 264.665);
--sidebar-foreground: oklch(0.985 0.002 247.839);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
--sidebar-accent: oklch(0.278 0.033 256.848);
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

13
src/app.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tauri + SvelteKit + Typescript App</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

82
src/lib/components/ui/button/button.svelte Normal file
View File

@@ -0,0 +1,82 @@
<script lang="ts" module>
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants";
export const buttonVariants = tv({
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
destructive:
"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
outline:
"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-sm": "size-8",
"icon-lg": "size-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
});
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant;
size?: ButtonSize;
};
</script>
<script lang="ts">
let {
class: className,
variant = "default",
size = "default",
ref = $bindable(null),
href = undefined,
type = "button",
disabled,
children,
...restProps
}: ButtonProps = $props();
</script>
{#if href}
<a
bind:this={ref}
data-slot="button"
class={cn(buttonVariants({ variant, size }), className)}
href={disabled ? undefined : href}
aria-disabled={disabled}
role={disabled ? "link" : undefined}
tabindex={disabled ? -1 : undefined}
{...restProps}
>
{@render children?.()}
</a>
{:else}
<button
bind:this={ref}
data-slot="button"
class={cn(buttonVariants({ variant, size }), className)}
{type}
{disabled}
{...restProps}
>
{@render children?.()}
</button>
{/if}

17
src/lib/components/ui/button/index.ts Normal file
View File

@@ -0,0 +1,17 @@
import Root, {
type ButtonProps,
type ButtonSize,
type ButtonVariant,
buttonVariants
} from "./button.svelte";
export {
Root,
type ButtonProps as Props,
//
Root as Button,
buttonVariants,
type ButtonProps,
type ButtonSize,
type ButtonVariant
};

76
src/lib/components/ui/calendar/calendar-caption.svelte Normal file
View File

@@ -0,0 +1,76 @@
<script lang="ts">
import type { ComponentProps } from "svelte";
import type Calendar from "./calendar.svelte";
import CalendarMonthSelect from "./calendar-month-select.svelte";
import CalendarYearSelect from "./calendar-year-select.svelte";
import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
let {
captionLayout,
months,
monthFormat,
years,
yearFormat,
month,
locale,
placeholder = $bindable(),
monthIndex = 0
}: {
captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
months: ComponentProps<typeof CalendarMonthSelect>["months"];
monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
years: ComponentProps<typeof CalendarYearSelect>["years"];
yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
month: DateValue;
placeholder: DateValue | undefined;
locale: string;
monthIndex: number;
} = $props();
function formatYear(date: DateValue) {
const dateObj = date.toDate(getLocalTimeZone());
if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
}
function formatMonth(date: DateValue) {
const dateObj = date.toDate(getLocalTimeZone());
if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
}
</script>
{#snippet MonthSelect()}
<CalendarMonthSelect
{months}
{monthFormat}
value={month.month}
onchange={(e) => {
if (!placeholder) return;
const v = Number.parseInt(e.currentTarget.value);
const newPlaceholder = placeholder.set({ month: v });
placeholder = newPlaceholder.subtract({ months: monthIndex });
}}
/>
{/snippet}
{#snippet YearSelect()}
<CalendarYearSelect {years} {yearFormat} value={month.year} />
{/snippet}
{#if captionLayout === "dropdown"}
{@render MonthSelect()}
{@render YearSelect()}
{:else if captionLayout === "dropdown-months"}
{@render MonthSelect()}
{#if placeholder}
{formatYear(placeholder)}
{/if}
{:else if captionLayout === "dropdown-years"}
{#if placeholder}
{formatMonth(placeholder)}
{/if}
{@render YearSelect()}
{:else}
{formatMonth(month)} {formatYear(month)}
{/if}

19
src/lib/components/ui/calendar/calendar-cell.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.CellProps = $props();
</script>
<CalendarPrimitive.Cell
bind:ref
class={cn(
"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
className
)}
{...restProps}
/>

35
src/lib/components/ui/calendar/calendar-day.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import { buttonVariants } from "$lib/components/ui/button/index.js";
import { cn } from "$lib/utils.js";
import { Calendar as CalendarPrimitive } from "bits-ui";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.DayProps = $props();
</script>
<CalendarPrimitive.Day
bind:ref
class={cn(
buttonVariants({ variant: "ghost" }),
"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
// Outside months
"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
// Disabled
"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
// Unavailable
"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
// hover
"dark:hover:text-accent-foreground",
// focus
"focus:border-ring focus:ring-ring/50 focus:relative",
// inner spans
"[&>span]:text-xs [&>span]:opacity-70",
className
)}
{...restProps}
/>

12
src/lib/components/ui/calendar/calendar-grid-body.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.GridBodyProps = $props();
</script>
<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

12
src/lib/components/ui/calendar/calendar-grid-head.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.GridHeadProps = $props();
</script>
<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

12
src/lib/components/ui/calendar/calendar-grid-row.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.GridRowProps = $props();
</script>
<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />

16
src/lib/components/ui/calendar/calendar-grid.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.GridProps = $props();
</script>
<CalendarPrimitive.Grid
bind:ref
class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
{...restProps}
/>

19
src/lib/components/ui/calendar/calendar-head-cell.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.HeadCellProps = $props();
</script>
<CalendarPrimitive.HeadCell
bind:ref
class={cn(
"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
className
)}
{...restProps}
/>

19
src/lib/components/ui/calendar/calendar-header.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.HeaderProps = $props();
</script>
<CalendarPrimitive.Header
bind:ref
class={cn(
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
className
)}
{...restProps}
/>

16
src/lib/components/ui/calendar/calendar-heading.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
...restProps
}: CalendarPrimitive.HeadingProps = $props();
</script>
<CalendarPrimitive.Heading
bind:ref
class={cn("px-(--cell-size) text-sm font-medium", className)}
{...restProps}
/>

44
src/lib/components/ui/calendar/calendar-month-select.svelte Normal file
View File

@@ -0,0 +1,44 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
let {
ref = $bindable(null),
class: className,
value,
onchange,
...restProps
}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
</script>
<span
class={cn(
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
className
)}
>
<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
{#snippet child({ props, monthItems, selectedMonthItem })}
<select {...props} {value} {onchange}>
{#each monthItems as monthItem (monthItem.value)}
<option
value={monthItem.value}
selected={value !== undefined
? monthItem.value === value
: monthItem.value === selectedMonthItem.value}
>
{monthItem.label}
</option>
{/each}
</select>
<span
class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
aria-hidden="true"
>
{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
<ChevronDownIcon class="size-4" />
</span>
{/snippet}
</CalendarPrimitive.MonthSelect>
</span>

15
src/lib/components/ui/calendar/calendar-month.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import { type WithElementRef, cn } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
{@render children?.()}
</div>

19
src/lib/components/ui/calendar/calendar-months.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>
<div
bind:this={ref}
class={cn("relative flex flex-col gap-4 md:flex-row", className)}
{...restProps}
>
{@render children?.()}
</div>

19
src/lib/components/ui/calendar/calendar-nav.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<nav
{...restProps}
bind:this={ref}
class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
>
{@render children?.()}
</nav>

31
src/lib/components/ui/calendar/calendar-next-button.svelte Normal file
View File

@@ -0,0 +1,31 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
variant = "ghost",
...restProps
}: CalendarPrimitive.NextButtonProps & {
variant?: ButtonVariant;
} = $props();
</script>
{#snippet Fallback()}
<ChevronRightIcon class="size-4" />
{/snippet}
<CalendarPrimitive.NextButton
bind:ref
class={cn(
buttonVariants({ variant }),
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
className
)}
children={children || Fallback}
{...restProps}
/>

31
src/lib/components/ui/calendar/calendar-prev-button.svelte Normal file
View File

@@ -0,0 +1,31 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
import { cn } from "$lib/utils.js";
let {
ref = $bindable(null),
class: className,
children,
variant = "ghost",
...restProps
}: CalendarPrimitive.PrevButtonProps & {
variant?: ButtonVariant;
} = $props();
</script>
{#snippet Fallback()}
<ChevronLeftIcon class="size-4" />
{/snippet}
<CalendarPrimitive.PrevButton
bind:ref
class={cn(
buttonVariants({ variant }),
"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
className
)}
children={children || Fallback}
{...restProps}
/>

43
src/lib/components/ui/calendar/calendar-year-select.svelte Normal file
View File

@@ -0,0 +1,43 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
let {
ref = $bindable(null),
class: className,
value,
...restProps
}: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
</script>
<span
class={cn(
"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
className
)}
>
<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
{#snippet child({ props, yearItems, selectedYearItem })}
<select {...props} {value}>
{#each yearItems as yearItem (yearItem.value)}
<option
value={yearItem.value}
selected={value !== undefined
? yearItem.value === value
: yearItem.value === selectedYearItem.value}
>
{yearItem.label}
</option>
{/each}
</select>
<span
class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
aria-hidden="true"
>
{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
<ChevronDownIcon class="size-4" />
</span>
{/snippet}
</CalendarPrimitive.YearSelect>
</span>

115
src/lib/components/ui/calendar/calendar.svelte Normal file
View File

@@ -0,0 +1,115 @@
<script lang="ts">
import { Calendar as CalendarPrimitive } from "bits-ui";
import * as Calendar from "./index.js";
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
import type { ButtonVariant } from "../button/button.svelte";
import { isEqualMonth, type DateValue } from "@internationalized/date";
import type { Snippet } from "svelte";
let {
ref = $bindable(null),
value = $bindable(),
placeholder = $bindable(),
class: className,
weekdayFormat = "short",
buttonVariant = "ghost",
captionLayout = "label",
locale = "en-US",
months: monthsProp,
years,
monthFormat: monthFormatProp,
yearFormat = "numeric",
day,
disableDaysOutsideMonth = false,
...restProps
}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
buttonVariant?: ButtonVariant;
captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
months?: CalendarPrimitive.MonthSelectProps["months"];
years?: CalendarPrimitive.YearSelectProps["years"];
monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
} = $props();
const monthFormat = $derived.by(() => {
if (monthFormatProp) return monthFormatProp;
if (captionLayout.startsWith("dropdown")) return "short";
return "long";
});
</script>
<!--
Discriminated Unions + Destructing (required for bindable) do not
get along, so we shut typescript up by casting `value` to `never`.
-->
<CalendarPrimitive.Root
bind:value={value as never}
bind:ref
bind:placeholder
{weekdayFormat}
{disableDaysOutsideMonth}
class={cn(
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
className
)}
{locale}
{monthFormat}
{yearFormat}
{...restProps}
>
{#snippet children({ months, weekdays })}
<Calendar.Months>
<Calendar.Nav>
<Calendar.PrevButton variant={buttonVariant} />
<Calendar.NextButton variant={buttonVariant} />
</Calendar.Nav>
{#each months as month, monthIndex (month)}
<Calendar.Month>
<Calendar.Header>
<Calendar.Caption
{captionLayout}
months={monthsProp}
{monthFormat}
{years}
{yearFormat}
month={month.value}
bind:placeholder
{locale}
{monthIndex}
/>
</Calendar.Header>
<Calendar.Grid>
<Calendar.GridHead>
<Calendar.GridRow class="select-none">
{#each weekdays as weekday (weekday)}
<Calendar.HeadCell>
{weekday.slice(0, 2)}
</Calendar.HeadCell>
{/each}
</Calendar.GridRow>
</Calendar.GridHead>
<Calendar.GridBody>
{#each month.weeks as weekDates (weekDates)}
<Calendar.GridRow class="mt-2 w-full">
{#each weekDates as date (date)}
<Calendar.Cell {date} month={month.value}>
{#if day}
{@render day({
day: date,
outsideMonth: !isEqualMonth(date, month.value)
})}
{:else}
<Calendar.Day />
{/if}
</Calendar.Cell>
{/each}
</Calendar.GridRow>
{/each}
</Calendar.GridBody>
</Calendar.Grid>
</Calendar.Month>
{/each}
</Calendar.Months>
{/snippet}
</CalendarPrimitive.Root>

40
src/lib/components/ui/calendar/index.ts Normal file
View File

@@ -0,0 +1,40 @@
import Root from "./calendar.svelte";
import Cell from "./calendar-cell.svelte";
import Day from "./calendar-day.svelte";
import Grid from "./calendar-grid.svelte";
import Header from "./calendar-header.svelte";
import Months from "./calendar-months.svelte";
import GridRow from "./calendar-grid-row.svelte";
import Heading from "./calendar-heading.svelte";
import GridBody from "./calendar-grid-body.svelte";
import GridHead from "./calendar-grid-head.svelte";
import HeadCell from "./calendar-head-cell.svelte";
import NextButton from "./calendar-next-button.svelte";
import PrevButton from "./calendar-prev-button.svelte";
import MonthSelect from "./calendar-month-select.svelte";
import YearSelect from "./calendar-year-select.svelte";
import Month from "./calendar-month.svelte";
import Nav from "./calendar-nav.svelte";
import Caption from "./calendar-caption.svelte";
export {
Day,
Cell,
Grid,
Header,
Months,
GridRow,
Heading,
GridBody,
GridHead,
HeadCell,
NextButton,
PrevButton,
Nav,
Month,
YearSelect,
MonthSelect,
Caption,
//
Root as Calendar
};

13
src/lib/utils.ts Normal file
View File

@@ -0,0 +1,13 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

5
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script>
import "../app.css";
</script>
<slot />

5
src/routes/+layout.ts Normal file
View File

@@ -0,0 +1,5 @@
// Tauri doesn't have a Node.js server to do proper SSR
// so we use adapter-static with a fallback to index.html to put the site in SPA mode
// See: https://svelte.dev/docs/kit/single-page-apps
// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
export const ssr = false;

73
src/routes/+page.svelte Normal file
View File

@@ -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>

127
src/routes/components/configurations/advanced.svelte Normal file
View File

@@ -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>

176
src/routes/components/configurations/basic.svelte Normal file
View File

@@ -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>

378
src/routes/components/configurations/residents.svelte Normal file
View File

@@ -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>

112
src/routes/components/schedule/generate.svelte Normal file
View File

@@ -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>

88
src/routes/components/schedule/preview.svelte Normal file
View File

@@ -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>

90
src/routes/state.svelte.ts Normal file
View File

@@ -0,0 +1,90 @@
// state.svelte.ts
import { CalendarDate, getDayOfWeek } from "@internationalized/date";
import { trace } from "@tauri-apps/plugin-log";
export interface Resident {
id: string;
name: string;
negativeShifts: CalendarDate[];
manualShifts: CalendarDate[];
maxShifts: number | undefined;
allowedTypes: string[];
hasReducedLoad: boolean;
}
export interface ForbiddenPair {
id1: string;
id2: string;
}
export class RotaState {
currentStep = $state(1);
residents = $state<Resident[]>([]);
selectedMonth = $state(2);
selectedYear = $state(2026);
holidays = $state<CalendarDate[]>([]);
forbiddenPairs = $state<ForbiddenPair[]>([]);
projectMonth = $derived(new CalendarDate(this.selectedYear, this.selectedMonth, 1));
projectMonthDays = $derived(this.projectMonth.calendar.getDaysInMonth(this.projectMonth));
daysArray = $derived(Array.from({ length: this.projectMonthDays }, (_, i) => i + 1));
emptySlots = $derived(Array.from({ length: getDayOfWeek(this.projectMonth, "en-GB") }));
addResident() {
this.residents.push({
id: crypto.randomUUID(),
name: "",
negativeShifts: [],
manualShifts: [],
maxShifts: undefined,
allowedTypes: ["OpenAsFirst", "OpenAsSecond", "Closed"],
hasReducedLoad: false,
});
}
removeResident(id: string) {
this.residents = this.residents.filter((p) => p.id !== id);
}
addForbiddenPair() {
if (this.residents.length < 2) return;
this.forbiddenPairs.push({
id1: this.residents[0].id,
id2: this.residents[1].id
});
}
removeForbiddenPair(index: number) {
this.forbiddenPairs.splice(index, 1);
}
}
export const rota = new RotaState();
export const steps = [
{
id: 1,
title: "Βασικές Ρυθμίσεις",
description: "Καθόρισε την περίοδο και τις αργίες του μήνα."
},
{
id: 2,
title: "Ρύθμιση Προσωπικού",
description: "Δημιούργησε νέα εγγραφή ειδικευόμενου."
},
{
id: 3,
title: "Προχωρημένες Ρυθμίσεις",
description: "Επίλεξε ζευγάρια ατόμων που δεν μπορούν να κάνουν μαζί εφημερία."
},
{
id: 4,
title: "Επισκόπηση Προγράμματος",
description: "Έλεγξε το πρόγραμμα με τις υποχρεωτικές υπάρχουσες εφημερίες."
},
{
id: 5,
title: "Δημιουργία Προγράμματος",
description: "Τρέξε τον αλγόριθμο ανάθεσης εφημεριών, εξήγαγε τα αποτελέσματα."
}
];