Fixed creation of users + better frontend handling of permissions

2025-03-06 17:34:52 +01:00
parent 3c6038bce1
commit 7cb633b4c6
46 changed files with 1511 additions and 909 deletions
--- a/frontend/components/ui/calendar.tsx
+++ b/frontend/components/ui/calendar.tsx
@@ -1,76 +1,82 @@
-"use client"
+"use client";

-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";

-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";

-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;

 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
 }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
-        ),
-      }}
-      {...props}
-    />
-  )
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+			}}
+			{...props}
+		/>
+	);
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";

-export { Calendar }
+export { Calendar };
--- a/frontend/components/ui/hover-card.tsx
+++ b/frontend/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ComponentRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/frontend/components/ui/scroll-area.tsx
+++ b/frontend/components/ui/scroll-area.tsx
@@ -24,7 +24,7 @@ const ScrollArea = React.forwardRef<
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

 const ScrollBar = React.forwardRef<
-	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
 	React.ComponentPropsWithoutRef<
 		typeof ScrollAreaPrimitive.ScrollAreaScrollbar
 	>
--- a/frontend/components/ui/toast.tsx
+++ b/frontend/components/ui/toast.tsx
@@ -41,7 +41,7 @@ const toastVariants = cva(
 );

 const Toast = React.forwardRef<
-	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentRef<typeof ToastPrimitives.Root>,
 	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
--- a/frontend/components/ui/toggle-group.tsx
+++ b/frontend/components/ui/toggle-group.tsx
@@ -15,7 +15,7 @@ const ToggleGroupContext = React.createContext<
 });

 const ToggleGroup = React.forwardRef<
-	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
 		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
--- a/frontend/components/ui/toggle.tsx
+++ b/frontend/components/ui/toggle.tsx
@@ -29,7 +29,7 @@ const toggleVariants = cva(
 );

 const Toggle = React.forwardRef<
-	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentRef<typeof TogglePrimitive.Root>,
 	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
 		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (