feat(leases): added in leases and move table to reuseable component

2025-11-04 20:16:14 -06:00
parent b1c56ee4bb
commit bd7bea8db6
30 changed files with 5788 additions and 601 deletions
--- a/frontend/src/components/navBar/ForkliftSideBar.tsx
+++ b/frontend/src/components/navBar/ForkliftSideBar.tsx
@@ -29,7 +29,7 @@ export default function ForkliftSideBar() {
 		},
 		{
 			title: "Leases",
-			url: "/lst/app/admin/settings",
+			url: "/lst/app/forklifts/leases",
 			icon: ReceiptText,
 			role: ["systemAdmin", "admin"],
 			module: "forklifts",
--- a/frontend/src/components/navBar/Nav.tsx
+++ b/frontend/src/components/navBar/Nav.tsx
@@ -1,6 +1,7 @@
 import { Link, useRouterState } from "@tanstack/react-router";
 import { useState } from "react";
 import NewCompanyForm from "@/routes/_app/_forklifts/-components/NewCompany";
+import NewLeaseForm from "@/routes/_app/_forklifts/-components/NewLease";
 import { useAuth, useLogout } from "../../lib/authClient";
 import { ModeToggle } from "../mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
@@ -21,6 +22,7 @@ export default function Nav() {
 	const router = useRouterState();
 	const currentPath = router.location.href;
 	const [openDialog, setOpenDialog] = useState(false);
+	const [openLeaseDialog, setOpenLeaseDialog] = useState(false);
 	return (
 		<nav className="flex justify-end w-full shadow ">
 			<div className="m-2 flex flex-row gap-1">
@@ -41,7 +43,7 @@ export default function Nav() {
 					{location.pathname.includes("forklifts") && (
 						<>
 							<DropdownMenu>
-								<DropdownMenuTrigger>
+								<DropdownMenuTrigger asChild>
 									<Button>Forklifts</Button>
 								</DropdownMenuTrigger>
 								<DropdownMenuContent>
@@ -55,9 +57,17 @@ export default function Nav() {
 									>
 										New Company
 									</DropdownMenuItem>
+									<DropdownMenuItem
+										onSelect={() => {
+											// just open the dialog when clicked
+											setOpenLeaseDialog(true);
+										}}
+									>
+										New Lease
+									</DropdownMenuItem>
 								</DropdownMenuContent>
 							</DropdownMenu>
-							{/* Dialog mounted outside the menu */}
+							{/* Company */}
 							{openDialog && (
 								<Dialog open={openDialog} onOpenChange={setOpenDialog}>
 									<DialogContent className="sm:max-w-[425px]">
@@ -65,6 +75,16 @@ export default function Nav() {
 									</DialogContent>
 								</Dialog>
 							)}
+							{openLeaseDialog && (
+								<Dialog
+									open={openLeaseDialog}
+									onOpenChange={setOpenLeaseDialog}
+								>
+									<DialogContent className="sm:max-w-fit">
+										<NewLeaseForm setOpenDialog={setOpenLeaseDialog} />
+									</DialogContent>
+								</Dialog>
+							)}
 						</>
 					)}
 				</div>
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -1,58 +1,60 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"

-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils"

 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    {
-        variants: {
-            variant: {
-                default:
-                    "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-                destructive:
-                    "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-                outline:
-                    "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-                secondary:
-                    "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-                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 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-                lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-                icon: "size-9",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    }
-);
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        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 rounded-md gap-1.5 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",
+    },
+  }
+)

 function Button({
-    className,
-    variant,
-    size,
-    asChild = false,
-    ...props
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
 }: React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-        asChild?: boolean;
-    }) {
-    const Comp = asChild ? Slot : "button";
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"

-    return (
-        <Comp
-            data-slot="button"
-            className={cn(buttonVariants({ variant, size, className }))}
-            {...props}
-        />
-    );
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
 }

-export { Button, buttonVariants };
+export { Button, buttonVariants }
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -1,225 +1,214 @@
-import * as React from "react";
+import * as React from "react"
 import {
-    ChevronDownIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-} from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-import { buttonVariants, Button } from "./button";
-import { cn } from "../../lib/utils";
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"

 function Calendar({
-    className,
-    classNames,
-    showOutsideDays = true,
-    captionLayout = "label",
-    buttonVariant = "ghost",
-    formatters,
-    components,
-    ...props
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
 }: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
 }) {
-    const defaultClassNames = getDefaultClassNames();
+  const defaultClassNames = getDefaultClassNames()

-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn(
-                "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-                className
-            )}
-            captionLayout={captionLayout}
-            formatters={{
-                formatMonthDropdown: (date) =>
-                    date.toLocaleString("default", { month: "short" }),
-                ...formatters,
-            }}
-            classNames={{
-                root: cn("w-fit", defaultClassNames.root),
-                months: cn(
-                    "flex gap-4 flex-col md:flex-row relative",
-                    defaultClassNames.months
-                ),
-                month: cn(
-                    "flex flex-col w-full gap-4",
-                    defaultClassNames.month
-                ),
-                nav: cn(
-                    "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-                    defaultClassNames.nav
-                ),
-                button_previous: cn(
-                    buttonVariants({ variant: buttonVariant }),
-                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-                    defaultClassNames.button_previous
-                ),
-                button_next: cn(
-                    buttonVariants({ variant: buttonVariant }),
-                    "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-                    defaultClassNames.button_next
-                ),
-                month_caption: cn(
-                    "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-                    defaultClassNames.month_caption
-                ),
-                dropdowns: cn(
-                    "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-                    defaultClassNames.dropdowns
-                ),
-                dropdown_root: cn(
-                    "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-                    defaultClassNames.dropdown_root
-                ),
-                dropdown: cn(
-                    "absolute bg-popover inset-0 opacity-0",
-                    defaultClassNames.dropdown
-                ),
-                caption_label: cn(
-                    "select-none font-medium",
-                    captionLayout === "label"
-                        ? "text-sm"
-                        : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-                    defaultClassNames.caption_label
-                ),
-                table: "w-full border-collapse",
-                weekdays: cn("flex", defaultClassNames.weekdays),
-                weekday: cn(
-                    "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-                    defaultClassNames.weekday
-                ),
-                week: cn("flex w-full mt-2", defaultClassNames.week),
-                week_number_header: cn(
-                    "select-none w-(--cell-size)",
-                    defaultClassNames.week_number_header
-                ),
-                week_number: cn(
-                    "text-[0.8rem] select-none text-muted-foreground",
-                    defaultClassNames.week_number
-                ),
-                day: cn(
-                    "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-                    defaultClassNames.day
-                ),
-                range_start: cn(
-                    "rounded-l-md bg-accent",
-                    defaultClassNames.range_start
-                ),
-                range_middle: cn(
-                    "rounded-none",
-                    defaultClassNames.range_middle
-                ),
-                range_end: cn(
-                    "rounded-r-md bg-accent",
-                    defaultClassNames.range_end
-                ),
-                today: cn(
-                    "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-                    defaultClassNames.today
-                ),
-                outside: cn(
-                    "text-muted-foreground aria-selected:text-muted-foreground",
-                    defaultClassNames.outside
-                ),
-                disabled: cn(
-                    "text-muted-foreground opacity-50",
-                    defaultClassNames.disabled
-                ),
-                hidden: cn("invisible", defaultClassNames.hidden),
-                ...classNames,
-            }}
-            components={{
-                Root: ({ className, rootRef, ...props }) => {
-                    return (
-                        <div
-                            data-slot="calendar"
-                            ref={rootRef}
-                            className={cn(className)}
-                            {...props}
-                        />
-                    );
-                },
-                Chevron: ({ className, orientation, ...props }) => {
-                    if (orientation === "left") {
-                        return (
-                            <ChevronLeftIcon
-                                className={cn("size-4", className)}
-                                {...props}
-                            />
-                        );
-                    }
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }

-                    if (orientation === "right") {
-                        return (
-                            <ChevronRightIcon
-                                className={cn("size-4", className)}
-                                {...props}
-                            />
-                        );
-                    }
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }

-                    return (
-                        <ChevronDownIcon
-                            className={cn("size-4", className)}
-                            {...props}
-                        />
-                    );
-                },
-                DayButton: CalendarDayButton,
-                WeekNumber: ({ children, ...props }) => {
-                    return (
-                        <td {...props}>
-                            <div className="flex size-(--cell-size) items-center justify-center text-center">
-                                {children}
-                            </div>
-                        </td>
-                    );
-                },
-                ...components,
-            }}
-            {...props}
-        />
-    );
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
 }

 function CalendarDayButton({
-    className,
-    day,
-    modifiers,
-    ...props
+  className,
+  day,
+  modifiers,
+  ...props
 }: React.ComponentProps<typeof DayButton>) {
-    const defaultClassNames = getDefaultClassNames();
+  const defaultClassNames = getDefaultClassNames()

-    const ref = React.useRef<HTMLButtonElement>(null);
-    React.useEffect(() => {
-        if (modifiers.focused) ref.current?.focus();
-    }, [modifiers.focused]);
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])

-    return (
-        <Button
-            ref={ref}
-            variant="ghost"
-            size="icon"
-            data-day={day.date.toLocaleDateString()}
-            data-selected-single={
-                modifiers.selected &&
-                !modifiers.range_start &&
-                !modifiers.range_end &&
-                !modifiers.range_middle
-            }
-            data-range-start={modifiers.range_start}
-            data-range-end={modifiers.range_end}
-            data-range-middle={modifiers.range_middle}
-            className={cn(
-                "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-                defaultClassNames.day,
-                className
-            )}
-            {...props}
-        />
-    );
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
 }

-export { Calendar, CalendarDayButton };
+export { Calendar, CalendarDayButton }
--- a/frontend/src/components/ui/datePicker.tsx
+++ b/frontend/src/components/ui/datePicker.tsx
@@ -1,31 +1,31 @@
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";

 export function DatePicker({
-    date,
-    onChange,
+	date,
+	onChange,
 }: {
-    date?: Date;
-    onChange?: (d: Date | undefined) => void;
+	date?: Date;
+	onChange?: (d: Date | undefined) => void;
 }) {
-    return (
-        <Popover>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    data-empty={!date}
-                    className="data-[empty=true]:text-muted-foreground w-[200px] justify-start text-left font-normal"
-                >
-                    <CalendarIcon className="mr-2 h-4 w-4" />
-                    {date ? format(date, "PPP") : <span>Pick a date</span>}
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0">
-                <Calendar mode="single" selected={date} onSelect={onChange} />
-            </PopoverContent>
-        </Popover>
-    );
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					data-empty={!date}
+					className="data-[empty=true]:text-muted-foreground w-[200px] justify-start text-left font-normal"
+				>
+					<CalendarIcon className="mr-2 h-4 w-4" />
+					{date ? format(date, "PPP") : <span>Pick a date</span>}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0">
+				<Calendar mode="single" selected={date} onSelect={onChange} />
+			</PopoverContent>
+		</Popover>
+	);
 }
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,263 +1,255 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"

-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils"

 function DropdownMenu({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-    return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }

 function DropdownMenuPortal({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-    return (
-        <DropdownMenuPrimitive.Portal
-            data-slot="dropdown-menu-portal"
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
 }

 function DropdownMenuTrigger({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-    return (
-        <DropdownMenuPrimitive.Trigger
-            data-slot="dropdown-menu-trigger"
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
 }

 function DropdownMenuContent({
-    className,
-    sideOffset = 4,
-    ...props
+  className,
+  sideOffset = 4,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-    return (
-        <DropdownMenuPrimitive.Portal>
-            <DropdownMenuPrimitive.Content
-                data-slot="dropdown-menu-content"
-                sideOffset={sideOffset}
-                className={cn(
-                    "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-                    className
-                )}
-                {...props}
-            />
-        </DropdownMenuPrimitive.Portal>
-    );
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
 }

 function DropdownMenuGroup({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-    return (
-        <DropdownMenuPrimitive.Group
-            data-slot="dropdown-menu-group"
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
 }

 function DropdownMenuItem({
-    className,
-    inset,
-    variant = "default",
-    ...props
+  className,
+  inset,
+  variant = "default",
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
-    return (
-        <DropdownMenuPrimitive.Item
-            data-slot="dropdown-menu-item"
-            data-inset={inset}
-            data-variant={variant}
-            className={cn(
-                "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                className
-            )}
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function DropdownMenuCheckboxItem({
-    className,
-    children,
-    checked,
-    ...props
+  className,
+  children,
+  checked,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-    return (
-        <DropdownMenuPrimitive.CheckboxItem
-            data-slot="dropdown-menu-checkbox-item"
-            className={cn(
-                "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                className
-            )}
-            checked={checked}
-            {...props}
-        >
-            <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuPrimitive.ItemIndicator>
-                    <CheckIcon className="size-4" />
-                </DropdownMenuPrimitive.ItemIndicator>
-            </span>
-            {children}
-        </DropdownMenuPrimitive.CheckboxItem>
-    );
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
 }

 function DropdownMenuRadioGroup({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-    return (
-        <DropdownMenuPrimitive.RadioGroup
-            data-slot="dropdown-menu-radio-group"
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
 }

 function DropdownMenuRadioItem({
-    className,
-    children,
-    ...props
+  className,
+  children,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-    return (
-        <DropdownMenuPrimitive.RadioItem
-            data-slot="dropdown-menu-radio-item"
-            className={cn(
-                "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-                className
-            )}
-            {...props}
-        >
-            <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-                <DropdownMenuPrimitive.ItemIndicator>
-                    <CircleIcon className="size-2 fill-current" />
-                </DropdownMenuPrimitive.ItemIndicator>
-            </span>
-            {children}
-        </DropdownMenuPrimitive.RadioItem>
-    );
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
 }

 function DropdownMenuLabel({
-    className,
-    inset,
-    ...props
+  className,
+  inset,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
+  inset?: boolean
 }) {
-    return (
-        <DropdownMenuPrimitive.Label
-            data-slot="dropdown-menu-label"
-            data-inset={inset}
-            className={cn(
-                "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-                className
-            )}
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function DropdownMenuSeparator({
-    className,
-    ...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-    return (
-        <DropdownMenuPrimitive.Separator
-            data-slot="dropdown-menu-separator"
-            className={cn("bg-border -mx-1 my-1 h-px", className)}
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
 }

 function DropdownMenuShortcut({
-    className,
-    ...props
+  className,
+  ...props
 }: React.ComponentProps<"span">) {
-    return (
-        <span
-            data-slot="dropdown-menu-shortcut"
-            className={cn(
-                "text-muted-foreground ml-auto text-xs tracking-widest",
-                className
-            )}
-            {...props}
-        />
-    );
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 function DropdownMenuSub({
-    ...props
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-    return (
-        <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-    );
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }

 function DropdownMenuSubTrigger({
-    className,
-    inset,
-    children,
-    ...props
+  className,
+  inset,
+  children,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+  inset?: boolean
 }) {
-    return (
-        <DropdownMenuPrimitive.SubTrigger
-            data-slot="dropdown-menu-sub-trigger"
-            data-inset={inset}
-            className={cn(
-                "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-                className
-            )}
-            {...props}
-        >
-            {children}
-            <ChevronRightIcon className="ml-auto size-4" />
-        </DropdownMenuPrimitive.SubTrigger>
-    );
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
 }

 function DropdownMenuSubContent({
-    className,
-    ...props
+  className,
+  ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-    return (
-        <DropdownMenuPrimitive.SubContent
-            data-slot="dropdown-menu-sub-content"
-            className={cn(
-                "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-                className
-            )}
-            {...props}
-        />
-    );
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
 }

 export {
-    DropdownMenu,
-    DropdownMenuPortal,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuGroup,
-    DropdownMenuLabel,
-    DropdownMenuItem,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuSub,
-    DropdownMenuSubTrigger,
-    DropdownMenuSubContent,
-};
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
--- a/frontend/src/lib/formStuff/components/CalenderSelect.tsx
+++ b/frontend/src/lib/formStuff/components/CalenderSelect.tsx
@@ -0,0 +1,53 @@
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Label } from "../../../components/ui/label";
+import { useFieldContext } from "..";
+import { FieldErrors } from "./FieldErrors";
+
+type DateFieldProps = {
+	label: string;
+};
+export const DateField = ({ label }: DateFieldProps) => {
+	const field = useFieldContext<any>();
+	const [open, setOpen] = useState(false);
+	const date = field.state.value;
+
+	return (
+		<div className="grid gap-3">
+			<Label htmlFor={field.name}>{label}</Label>
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<Button
+						variant="outline"
+						id="date"
+						className="w-48 justify-between font-normal"
+					>
+						{date ? date.toLocaleDateString() : "Select date"}
+						<ChevronDownIcon />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto overflow-hidden p-0" align="start">
+					<Calendar
+						mode="single"
+						selected={date}
+						captionLayout="dropdown"
+						startMonth={new Date(new Date().getFullYear() - 10, 0)}
+						endMonth={new Date(new Date().getFullYear() + 20, 0)}
+						onSelect={(selected) => {
+							field.handleChange(selected ?? undefined);
+							setOpen(false);
+						}}
+					/>
+				</PopoverContent>
+			</Popover>
+			<FieldErrors meta={field.state.meta} />
+		</div>
+	);
+};
--- a/frontend/src/lib/formStuff/index.tsx
+++ b/frontend/src/lib/formStuff/index.tsx
@@ -1,21 +1,23 @@
 import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
-import { SubmitButton } from "./components/SubmitButton";
-import { InputField } from "./components/InputField";
-import { SelectField } from "./components/SelectField";
+import { DateField } from "./components/CalenderSelect";
 import { CheckboxField } from "./components/CheckBox";
+import { InputField } from "./components/InputField";
 import { InputPasswordField } from "./components/InputPasswordField";
+import { SelectField } from "./components/SelectField";
+import { SubmitButton } from "./components/SubmitButton";

 export const { fieldContext, useFieldContext, formContext, useFormContext } =
-    createFormHookContexts();
+	createFormHookContexts();

 export const { useAppForm } = createFormHook({
-    fieldComponents: {
-        InputField,
-        InputPasswordField,
-        SelectField,
-        CheckboxField,
-    },
-    formComponents: { SubmitButton },
-    fieldContext,
-    formContext,
+	fieldComponents: {
+		InputField,
+		InputPasswordField,
+		SelectField,
+		CheckboxField,
+		DateField,
+	},
+	formComponents: { SubmitButton },
+	fieldContext,
+	formContext,
 });
--- a/frontend/src/lib/querys/forklifts/getLeases.ts
+++ b/frontend/src/lib/querys/forklifts/getLeases.ts
@@ -0,0 +1,17 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getLeases() {
+	return queryOptions({
+		queryKey: ["getLeases"],
+		queryFn: () => fetch(),
+		staleTime: 5000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetch = async () => {
+	const { data } = await axios.get("/lst/api/forklifts/leases");
+
+	return data.data;
+};
--- a/frontend/src/lib/tableStuff/TableNoExpand.tsx
+++ b/frontend/src/lib/tableStuff/TableNoExpand.tsx
@@ -0,0 +1,112 @@
+import {
+	flexRender,
+	getCoreRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+
+export default function TableNoExpand({
+	data,
+	columns,
+}: {
+	data: any;
+	columns: any;
+}) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
+		//getRowCanExpand: () => true,
+		state: {
+			sorting,
+		},
+	});
+	return (
+		<div className="p-4">
+			<div className="w-fit">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder
+												? null
+												: flexRender(
+														header.column.columnDef.header,
+														header.getContext(),
+													)}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows.map((row) => (
+							<React.Fragment key={row.id}>
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && "selected"}
+								>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext(),
+											)}
+										</TableCell>
+									))}
+								</TableRow>
+
+								{/* {row.getIsExpanded() && (
+									<TableRow>
+										<TableCell colSpan={row.getVisibleCells().length}>
+											{renderSubComponent({ row })}
+										</TableCell>
+									</TableRow>
+								)} */}
+							</React.Fragment>
+						))}
+					</TableBody>
+				</Table>
+				<div className="flex items-center justify-end space-x-2 py-4">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/routes/_app/_forklifts/-components/NewLease.tsx
+++ b/frontend/src/routes/_app/_forklifts/-components/NewLease.tsx
@@ -0,0 +1,128 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { format } from "date-fns";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	DialogClose,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { getCompanies } from "@/lib/querys/forklifts/getCompanies";
+import { getLeases } from "@/lib/querys/forklifts/getLeases";
+import { useAppForm } from "../../../../lib/formStuff";
+
+type CompanyData = {
+	id: string;
+	name: string;
+};
+export default function NewLeaseForm({
+	setOpenDialog,
+}: {
+	setOpenDialog: any;
+}) {
+	//const search = useSearch({ from: "/_app/(auth)/login" });
+	const { data, isLoading } = useQuery(getCompanies());
+	const { refetch } = useQuery(getLeases());
+	const form = useAppForm({
+		defaultValues: {
+			companyId: "",
+			leaseNumber: "",
+			startDate: "",
+			endDate: "",
+		},
+		onSubmit: async ({ value }) => {
+			const data = {
+				leaseNumber: value.leaseNumber.trimStart().trimEnd(),
+				startDate: format(value.startDate, "MM/dd/yyyy"),
+				endDate: format(value.endDate, "MM/dd/yyyy"),
+				companyId: value.companyId,
+			};
+			console.log(data);
+			try {
+				await axios.post("/lst/api/forklifts/leases", data);
+				form.reset();
+				setOpenDialog(false);
+				refetch();
+				toast.success(`${value.leaseNumber} was just created `);
+			} catch (error) {
+				// @ts-ignore
+				if (!error.response.data.success) {
+					// @ts-ignore
+					toast.error(error?.response?.data.message);
+				} else {
+					// @ts-ignore
+					toast.error(error?.message);
+				}
+			}
+		},
+	});
+
+	if (isLoading) return <div>Loading Companies</div>;
+
+	// remap the companies to fit out select field
+	const companyMap = data.map((i: CompanyData) => {
+		return { value: i.id, label: i.name };
+	});
+
+	//const currentYear = new Date().getFullYear();
+
+	return (
+		<>
+			<DialogHeader>
+				<DialogTitle>Create New Lease</DialogTitle>
+				<DialogDescription>
+					Select the company this lease will be for, lease number, start and end
+					date
+				</DialogDescription>
+			</DialogHeader>
+
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					form.handleSubmit();
+				}}
+			>
+				<form.AppField
+					name="companyId"
+					children={(field) => (
+						<field.SelectField
+							label="Select Company"
+							placeholder="Companies"
+							options={companyMap}
+						/>
+					)}
+				/>
+				<form.AppField
+					name="leaseNumber"
+					children={(field) => (
+						<field.InputField
+							label="Lease Number"
+							inputType="string"
+							required={false}
+						/>
+					)}
+				/>
+				<div className="flex flex-row gap-2 mt-2 mb-2">
+					<form.AppField
+						name="startDate"
+						children={(field) => <field.DateField label="Start Date" />}
+					/>
+					<form.AppField
+						name="endDate"
+						children={(field) => <field.DateField label="End Date" />}
+					/>
+				</div>
+
+				<DialogFooter>
+					<DialogClose asChild>
+						<Button variant="outline">Cancel</Button>
+					</DialogClose>
+					<Button type="submit">Submit</Button>
+				</DialogFooter>
+			</form>
+		</>
+	);
+}
--- a/frontend/src/routes/_app/_forklifts/forklifts/companies.tsx
+++ b/frontend/src/routes/_app/_forklifts/forklifts/companies.tsx
@@ -1,17 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import {
-	createColumnHelper,
-	flexRender,
-	getCoreRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	type SortingState,
-	useReactTable,
-} from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 import axios from "axios";
 import { Activity, ArrowDown, ArrowUp } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -22,15 +14,9 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
+
 import { getCompanies } from "@/lib/querys/forklifts/getCompanies";
+import TableNoExpand from "@/lib/tableStuff/TableNoExpand";
 import { cn } from "@/lib/utils";

 type Company = {
@@ -64,7 +50,6 @@ function RouteComponent() {
 		isLoading,
 		refetch,
 	} = useQuery(getCompanies());
-	const [sorting, setSorting] = useState<SortingState>([]);
 	const columnHelper = createColumnHelper<Company>();
 	const submitting = useRef(false);

@@ -192,91 +177,8 @@ function RouteComponent() {
 		}),
 	];

-	const table = useReactTable({
-		data: companyData,
-		columns,
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		onSortingChange: setSorting,
-		getSortedRowModel: getSortedRowModel(),
-		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
-		//getRowCanExpand: () => true,
-		state: {
-			sorting,
-		},
-	});
 	if (isLoading) {
 		return <div className="m-auto">Loading user data</div>;
 	}
-	return (
-		<div className="p-4">
-			<div className="w-fit">
-				<Table>
-					<TableHeader>
-						{table.getHeaderGroups().map((headerGroup) => (
-							<TableRow key={headerGroup.id}>
-								{headerGroup.headers.map((header) => {
-									return (
-										<TableHead key={header.id}>
-											{header.isPlaceholder
-												? null
-												: flexRender(
-														header.column.columnDef.header,
-														header.getContext(),
-													)}
-										</TableHead>
-									);
-								})}
-							</TableRow>
-						))}
-					</TableHeader>
-					<TableBody>
-						{table.getRowModel().rows.map((row) => (
-							<React.Fragment key={row.id}>
-								<TableRow
-									key={row.id}
-									data-state={row.getIsSelected() && "selected"}
-								>
-									{row.getVisibleCells().map((cell) => (
-										<TableCell key={cell.id}>
-											{flexRender(
-												cell.column.columnDef.cell,
-												cell.getContext(),
-											)}
-										</TableCell>
-									))}
-								</TableRow>
-
-								{/* {row.getIsExpanded() && (
-									<TableRow>
-										<TableCell colSpan={row.getVisibleCells().length}>
-											{renderSubComponent({ row })}
-										</TableCell>
-									</TableRow>
-								)} */}
-							</React.Fragment>
-						))}
-					</TableBody>
-				</Table>
-				<div className="flex items-center justify-end space-x-2 py-4">
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => table.previousPage()}
-						disabled={!table.getCanPreviousPage()}
-					>
-						Previous
-					</Button>
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => table.nextPage()}
-						disabled={!table.getCanNextPage()}
-					>
-						Next
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
+	return <TableNoExpand data={companyData} columns={columns} />;
 }
--- a/frontend/src/routes/_app/_forklifts/forklifts/leases.tsx
+++ b/frontend/src/routes/_app/_forklifts/forklifts/leases.tsx
@@ -0,0 +1,124 @@
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { createColumnHelper } from "@tanstack/react-table";
+import { format } from "date-fns";
+import { ArrowDown, ArrowUp } from "lucide-react";
+//import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { getLeases } from "@/lib/querys/forklifts/getLeases";
+import TableNoExpand from "@/lib/tableStuff/TableNoExpand";
+
+type Leases = {
+	id: string;
+	leaseNumber: string;
+	startDate: Date;
+	endDate: Date;
+	leaseLink: string | null;
+	companyName: string;
+	add_user: string;
+	add_date: Date;
+	upd_user: string;
+	upd_date: Date;
+};
+
+export const Route = createFileRoute("/_app/_forklifts/forklifts/leases")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { data: leaseData = [], isLoading } = useQuery(getLeases());
+
+	const columnHelper = createColumnHelper<Leases>();
+	//const submitting = useRef(false);
+
+	const columns = [
+		columnHelper.accessor("companyName", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">Company</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+		}),
+		columnHelper.accessor("leaseNumber", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">Lease Number</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+			cell: ({ getValue }) => {
+				return <span>{getValue()}</span>;
+			},
+		}),
+		columnHelper.accessor("startDate", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">Start Date</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+			cell: ({ getValue }) => {
+				const raw = getValue() as string | Date;
+				const date = typeof raw === "string" ? new Date(raw) : (raw as Date);
+				if (isNaN(date.getTime())) return "Invalid date";
+				return <span>{format(date, "MM/dd/yyyy")}</span>;
+			},
+		}),
+		columnHelper.accessor("endDate", {
+			header: ({ column }) => {
+				return (
+					<Button
+						variant="ghost"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						<span className="flex flex-row gap-2">End Date</span>
+						{column.getIsSorted() === "asc" ? (
+							<ArrowUp className="ml-2 h-4 w-4" />
+						) : (
+							<ArrowDown className="ml-2 h-4 w-4" />
+						)}
+					</Button>
+				);
+			},
+			cell: ({ getValue }) => {
+				const raw = getValue() as string | Date;
+				const date = typeof raw === "string" ? new Date(raw) : (raw as Date);
+				if (isNaN(date.getTime())) return "Invalid date";
+				return <span>{format(date, "MM/dd/yyyy")}</span>;
+			},
+		}),
+	];
+
+	if (isLoading) {
+		return <div className="m-auto">Loading user data</div>;
+	}
+	return <TableNoExpand data={leaseData} columns={columns} />;
+}