Booking page - Migrated from Shadcn Form to Shadcn Field components

package-lock.json

@@ -19,11 +19,11 @@
         "react": "^18.2.0",
         "react-day-picker": "^9.13.0",
         "react-dom": "^18.2.0",
-        "react-hook-form": "^7.70.0",
+        "react-hook-form": "^7.71.0",
-        "react-router-dom": "^6.30.2",
+        "react-router": "^7.12.0",
         "swr": "^2.3.8",
         "tailwind-merge": "^3.4.0",
-        "zod": "^3.25.76",
+        "zod": "^4.3.5",
         "zustand": "^5.0.9"
       },
       "devDependencies": {
@@ -35,7 +35,6 @@
         "@types/node": "^22.15.30",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
-        "@types/react-router-dom": "^5.3.3",
         "@typescript-eslint/eslint-plugin": "^8.52.0",
         "@typescript-eslint/parser": "^8.52.0",
         "@vitejs/plugin-react-swc": "^4.2.2",
@@ -2788,15 +2787,6 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
-      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.47",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.47.tgz",
@@ -3573,12 +3563,6 @@
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "license": "MIT"
     },
-    "node_modules/@types/history": {
-      "version": "4.7.11",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
-      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
-      "dev": true
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3623,27 +3607,6 @@
         "@types/react": "^18.0.0"
       }
     },
-    "node_modules/@types/react-router": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
-      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-router-dom": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
-      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
-      "dev": true,
-      "dependencies": {
-        "@types/history": "^4.7.11",
-        "@types/react": "*",
-        "@types/react-router": "*"
-      }
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.52.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.52.0.tgz",
@@ -4126,6 +4089,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5728,9 +5704,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.70.0",
+      "version": "7.71.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.70.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.0.tgz",
-      "integrity": "sha512-COOMajS4FI3Wuwrs3GPpi/Jeef/5W1DRR84Yl5/ShlT3dKVFUfoGiEZ/QE6Uw8P4T2/CLJdcTVYKvWBMQTEpvw==",
+      "integrity": "sha512-oFDt/iIFMV9ZfV52waONXzg4xuSlbwKUPvXVH2jumL1me5qFhBMc4knZxuXiZ2+j6h546sYe3ZKJcg/900/iHw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -5791,35 +5767,25 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.2",
+      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
-      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.1"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
-      }
+        "react-dom": ">=18"
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
-      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@remix-run/router": "1.23.1",
-        "react-router": "6.30.2"
       },
-      "engines": {
+      "peerDependenciesMeta": {
-        "node": ">=14.0.0"
+        "react-dom": {
-      },
+          "optional": true
-      "peerDependencies": {
+        }
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
       }
     },
     "node_modules/react-style-singleton": {
@@ -5914,6 +5880,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6315,9 +6287,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
+      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"

package.json

@@ -22,11 +22,11 @@
     "react": "^18.2.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.70.0",
+    "react-hook-form": "^7.71.0",
-    "react-router-dom": "^6.30.2",
+    "react-router": "^7.12.0",
     "swr": "^2.3.8",
     "tailwind-merge": "^3.4.0",
-    "zod": "^3.25.76",
+    "zod": "^4.3.5",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
@@ -38,7 +38,6 @@
     "@types/node": "^22.15.30",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.52.0",
     "@typescript-eslint/parser": "^8.52.0",
     "@vitejs/plugin-react-swc": "^4.2.2",

src/components/Dialogs/ContactUsDialog.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
   AlertDialog,
   AlertDialogAction,

src/components/Rooms/room-booking.tsx

@@ -39,15 +39,6 @@ function RoomBooking({
     newCount: number,
     price: number,
   ) {
-    console.log(
-      "Room " +
-        roomCategoryId +
-        " Guestnumber: " +
-        guestNumber +
-        " Count: " +
-        newCount,
-    );
-
     const newRoom: NewBookingRoom = {
       roomCategory: roomCategoryId,
       guestNumber: guestNumber,

src/components/Search/SearchFilterCard.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { SearchFilter } from "@/model/InternalTypes";
 import { DateRange } from "react-day-picker";
 import { isValidSearchFilter } from "@/utils/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ConstsNav, ConstsTexts } from "@/utils/Consts";
 import { ContactUsDialog } from "../Dialogs/ContactUsDialog";
 import { useCheckForNightCount } from "@/utils/hooks";

src/components/app-footer.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/utils/Consts";
 import { Skeleton } from "./ui/skeleton";
 import { Mail, Phone } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useConfigVariable } from "@/utils/apiHooks";
 
 function AppFooter() {

src/components/app-header.tsx

@@ -2,7 +2,7 @@ import { ModeToggle } from "./mode-toggle";
 import { Button } from "./ui/button";
 import { Card, CardContent } from "./ui/card";
 import { Typography } from "./ui/typography";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Bed, BookAIcon, HomeIcon } from "lucide-react";
 import { eConfigVarKeys } from "@/model/ConfigVar";
 import { Skeleton } from "./ui/skeleton";
@@ -29,7 +29,7 @@ function AppHeader() {
 
   const getElementLogo = () => {
     if (isLoading) {
-      return <Skeleton className="w-[64px]" />;
+      return <Skeleton className="w-16" />;
     }
 
     const logoSizeClass = "w-[" + varCompanyLogoSize + "]";

src/components/booking/booking-details.tsx

@@ -9,7 +9,7 @@ import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import { UserIcon } from "lucide-react";
 import { useCheckForGuestNumber } from "@/utils/hooks";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ConstsNav, ConstsTexts } from "@/utils/Consts";
 import { ContactUsDialog } from "../Dialogs/ContactUsDialog";
 

src/components/ui/field.tsx

@@ -0,0 +1,246 @@
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+};

src/components/ui/form.tsx

@@ -1,169 +0,0 @@
-import * as React from "react";
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
-
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form";
-
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  );
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-}
-
-function FormControl({
-  ...props
-}: React.ComponentProps<typeof SlotPrimitive.Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
-
-  return (
-    <SlotPrimitive.Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField();
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  );
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message ?? "") : props.children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-sm text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-}
-
-export {
-  // eslint-disable-next-line react-refresh/only-export-components
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { RouterProvider, createBrowserRouter } from "react-router";
 import Root from "./routes/Root";
 import ErrorPage from "./routes/error-page";
 import Homepage from "./routes/home-page";

src/model/FormSchema.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { z } from "zod/v4";
+import { z } from "zod";
 
 export const BookingFormSchema = z.object({
   name: z.string().min(2).max(50),

src/routes/Root.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import "./Root.css";
 import AppHeader from "../components/app-header";
 import AppFooter from "../components/app-footer";

src/routes/book-page.tsx

@@ -1,28 +1,29 @@
 import { APISendCreateBooking } from "@/api/api-booking";
 import { BookingDetails } from "@/components/booking/booking-details";
 import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Typography } from "@/components/ui/typography";
 import { BookingFormSchema } from "@/model/FormSchema";
 import { useAppStore } from "@/store";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
-import { z } from "zod/v4";
+import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { eBookingState } from "@/utils/AppStateManager";
 import { useBookingStateDispacher } from "@/utils/hooks";
 import { ConstsNav } from "@/utils/Consts";
 import { NewBookingCustomerDetails } from "@/model/Bookings";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 enum PageState {
   showForm,
@@ -40,6 +41,7 @@ function BookPage() {
   const navigate = useNavigate();
   const { setBookingStateBooked } = useBookingStateDispacher();
 
+  const bookingFormId = "booking-form";
   const bookingForm = useForm<z.infer<typeof BookingFormSchema>>({
     resolver: zodResolver(BookingFormSchema),
     defaultValues: {
@@ -50,6 +52,37 @@ function BookPage() {
     },
   });
 
+  //Redirect to home if no booking is active.
+  useEffect(() => {
+    if (
+      !appBookingState ||
+      !bookingData ||
+      (appBookingState.state != eBookingState.Booking &&
+        appBookingState.state != eBookingState.Booked)
+    ) {
+      navigate(ConstsNav.page_Home);
+    }
+  }, [appBookingState, bookingData, navigate]);
+
+  //Send booking request to API
+  useEffect(() => {
+    async function sendCreateRequestAsync() {
+      const rs = await APISendCreateBooking(bookingData);
+      if (rs.isError) {
+        setPageState(PageState.error);
+      } else {
+        setBookingStateBooked();
+        navigate(ConstsNav.page_Success, { state: rs.bookingResponse });
+      }
+    }
+
+    if (pageState != PageState.sending) {
+      return;
+    }
+
+    sendCreateRequestAsync();
+  }, [pageState, bookingData, navigate, setBookingStateBooked]);
+
   function onSubmit(values: z.infer<typeof BookingFormSchema>) {
     if (bookingData == null) {
       return;
@@ -64,29 +97,6 @@ function BookPage() {
     setCustomerData(newCustomerData);
 
     setPageState(PageState.sending);
-    console.log(bookingData);
-
-    sendCreateRequest();
-  }
-
-  const sendCreateRequest = async () => {
-    const rs = await APISendCreateBooking(bookingData);
-    if (rs.isError) {
-      setPageState(PageState.error);
-    } else {
-      setBookingStateBooked();
-      navigate(ConstsNav.page_Success, { state: rs.bookingResponse });
-    }
-  };
-
-  //Redirect to home if no booking is active.
-  if (
-    !appBookingState ||
-    !bookingData ||
-    (appBookingState.state != eBookingState.Booking &&
-      appBookingState.state != eBookingState.Booked)
-  ) {
-    navigate(ConstsNav.page_Home);
   }
 
   const errorMsg = (
@@ -100,78 +110,108 @@ function BookPage() {
   return (
     <>
       <Typography variant={"h1"}>Booking Details</Typography>
-      <Separator className="my-10" />
+      <Separator className="my-8" />
       <div className="lg:grid lg:grid-cols-40/60 lg:gap-x-10">
-        <div>
+        <Card>
-          <Typography variant={"h3"} className="my-4">
+          <CardHeader>
-            Personal Details
+            <Typography variant={"h2"}>Personal Details</Typography>
-          </Typography>
+          </CardHeader>
-          <Form {...bookingForm}>
+          <CardContent>
             <form
+              id={bookingFormId}
               onSubmit={bookingForm.handleSubmit(onSubmit)}
               className="space-y-8"
             >
-              <div className="flex w-full flex-row gap-x-3">
+              <FieldSet>
-                <FormField
+                <FieldLegend>Customer Details</FieldLegend>
-                  control={bookingForm.control}
+                <FieldGroup className="flex flex-row">
-                  name="name"
+                  <Controller
-                  render={({ field }) => (
+                    name="name"
-                    <FormItem className="flex-1">
+                    control={bookingForm.control}
-                      <FormLabel>Name</FormLabel>
+                    render={({ field, fieldState }) => (
-                      <FormControl>
+                      <Field data-invalid={fieldState.invalid}>
-                        <Input {...field} />
+                        <FieldLabel htmlFor={field.name}>Name</FieldLabel>
-                      </FormControl>
+                        <Input
-                      <FormMessage />
+                          {...field}
-                    </FormItem>
+                          id={field.name}
-                  )}
+                          aria-invalid={fieldState.invalid}
-                ></FormField>
+                        />
-                <FormField
+                        {fieldState.invalid && (
-                  control={bookingForm.control}
+                          <FieldError errors={[fieldState.error]} />
-                  name="surname"
+                        )}
-                  render={({ field }) => (
+                      </Field>
-                    <FormItem className="flex-1">
+                    )}
-                      <FormLabel>Surname</FormLabel>
+                  />
-                      <FormControl>
+                  <Controller
-                        <Input {...field} />
+                    name="surname"
-                      </FormControl>
+                    control={bookingForm.control}
-                      <FormMessage />
+                    render={({ field, fieldState }) => (
-                    </FormItem>
+                      <Field data-invalid={fieldState.invalid}>
-                  )}
+                        <FieldLabel htmlFor={field.name}>Surname</FieldLabel>
-                ></FormField>
+                        <Input
-              </div>
+                          {...field}
-              <FormField
+                          id={field.name}
-                control={bookingForm.control}
+                          aria-invalid={fieldState.invalid}
-                name="email"
+                        />
-                render={({ field }) => (
+                        {fieldState.invalid && (
-                  <FormItem>
+                          <FieldError errors={[fieldState.error]} />
-                    <FormLabel>Email</FormLabel>
+                        )}
-                    <FormControl>
+                      </Field>
-                      <Input {...field} />
+                    )}
-                    </FormControl>
+                  />
-                    <FormMessage />
+                </FieldGroup>
-                  </FormItem>
+                <FieldGroup className="flex flex-col">
-                )}
+                  <Controller
-              ></FormField>
+                    name="email"
-              <FormField
+                    control={bookingForm.control}
-                control={bookingForm.control}
+                    render={({ field, fieldState }) => (
-                name="phone"
+                      <Field data-invalid={fieldState.invalid}>
-                render={({ field }) => (
+                        <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                  <FormItem>
+                        <Input
-                    <FormLabel>Phone</FormLabel>
+                          {...field}
-                    <FormControl>
+                          id={field.name}
-                      <Input {...field} />
+                          aria-invalid={fieldState.invalid}
-                    </FormControl>
+                        />
-                    <FormMessage />
+                        {fieldState.invalid && (
-                  </FormItem>
+                          <FieldError errors={[fieldState.error]} />
-                )}
+                        )}
-              ></FormField>
+                      </Field>
-              <Button type="submit" disabled={pageState == PageState.sending}>
+                    )}
-                Submit
+                  />
-              </Button>
+                  <Controller
+                    name="phone"
+                    control={bookingForm.control}
+                    render={({ field, fieldState }) => (
+                      <Field data-invalid={fieldState.invalid}>
+                        <FieldLabel htmlFor={field.name}>
+                          Phone Number
+                        </FieldLabel>
+                        <Input
+                          {...field}
+                          id={field.name}
+                          aria-invalid={fieldState.invalid}
+                        />
+                        {fieldState.invalid && (
+                          <FieldError errors={[fieldState.error]} />
+                        )}
+                      </Field>
+                    )}
+                  />
+                </FieldGroup>
+              </FieldSet>
+              <Field orientation="vertical">
+                <Button
+                  type="submit"
+                  form={bookingFormId}
+                  disabled={pageState == PageState.sending}
+                >
+                  Submit
+                </Button>
+              </Field>
             </form>
-          </Form>
+            {pageState == PageState.error && errorMsg}
-          {pageState == PageState.error ? errorMsg : null}
+          </CardContent>
-        </div>
+        </Card>
         <Separator className="my-10 lg:hidden" />
         <BookingDetails mode="View"></BookingDetails>
       </div>

src/routes/contact-page.tsx

@@ -5,7 +5,7 @@ import { Typography } from "@/components/ui/typography";
 import { eConfigVarKeys } from "@/model/ConfigVar";
 import { useConfigVariable } from "@/utils/apiHooks";
 import { Mail, Phone } from "lucide-react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 function ContactPage() {
   const location = useLocation();
@@ -23,7 +23,7 @@ function ContactPage() {
 
   const mainText = location.state ?? "Contact us for a personalized quote!";
 
-  const LoadingContent = <Skeleton className="h-[100px] w-full" />;
+  const LoadingContent = <Skeleton className="h-25 w-full" />;
 
   const MainContent = (
     <div className="mx-auto">

src/routes/error-page.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from "react-router-dom";
+import { useRouteError } from "react-router";
 
 export default function ErrorPage() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/routes/home-page.tsx

@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Typography } from "@/components/ui/typography";
 import { RoomCategory } from "@/model/RoomCategory";
 import { SearchFilter } from "@/model/InternalTypes";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { LoaderIcon } from "lucide-react";
 import "./home-page.css";
 import { useAppStore } from "@/store";
@@ -52,7 +52,7 @@ function Homepage() {
       <div className="homePageRoomGrid grid gap-4">{roomList}</div>
       {isLoadingCategories && (
         <>
-          <Skeleton className="mx-auto flex h-[200px] w-full flex-col items-center justify-center">
+          <Skeleton className="mx-auto flex h-50 w-full flex-col items-center justify-center">
             <LoaderIcon />
             <Typography variant={"h3"} as="h2">
               Loading...

src/routes/search-page.tsx

@@ -10,7 +10,7 @@ import { SearchFilter } from "@/model/InternalTypes";
 import { eBookingState } from "@/utils/AppStateManager";
 import { useAppStore } from "@/store";
 import { makeSearchPeriodRequestFromSearchFilter } from "@/utils/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useBookingStateDispacher } from "@/utils/hooks";
 import { ConstsNav } from "@/utils/Consts";
 
@@ -75,7 +75,7 @@ function SearchPage() {
       <Typography variant={"h3"} as="h2">
         Loading...
       </Typography>
-      <Skeleton className="mx-auto h-[200px] w-full" />
+      <Skeleton className="mx-auto h-50 w-full" />
     </>
   );
   const pageContentLoaded = (

src/routes/success-page.tsx

@@ -5,7 +5,7 @@ import { NewBookingResponse } from "@/model/Bookings";
 import { useAppStore } from "@/store";
 import { ConstsNav } from "@/utils/Consts";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 
 function SuccessPage() {
   const [pageState, setPageState] = useState<NewBookingResponse | null>(null);

src/store.ts

@@ -74,7 +74,6 @@ function addNewBookingRoom(
     }
     return false;
   });
-  console.log(filteredRooms);
 
   if (newRoom.amount > 0) {
     filteredRooms.push(newRoom);
@@ -85,9 +84,6 @@ function addNewBookingRoom(
     rooms: filteredRooms ?? [],
   };
 
-  console.log("Updated 'currentBooking' state:");
-  console.log(newState);
-
   return newState;
 }