test(dock schedule fail): failed attempt ad doing a dock schedule but leaving in here

2025-10-15 14:52:48 -05:00
parent 705f29e908
commit 817a5c6876
44 changed files with 10377 additions and 161 deletions
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,225 @@
+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";
+
+function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    formatters,
+    components,
+    ...props
+}: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+    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}
+                            />
+                        );
+                    }
+
+                    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}
+        />
+    );
+}
+
+function CalendarDayButton({
+    className,
+    day,
+    modifiers,
+    ...props
+}: React.ComponentProps<typeof DayButton>) {
+    const defaultClassNames = getDefaultClassNames();
+
+    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}
+        />
+    );
+}
+
+export { Calendar, CalendarDayButton };
--- a/frontend/src/components/ui/datePicker.tsx
+++ b/frontend/src/components/ui/datePicker.tsx
@@ -0,0 +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";
+
+export function DatePicker({
+    date,
+    onChange,
+}: {
+    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>
+    );
+}
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../lib/utils";
+
+function Popover({
+    ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+    ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+    className,
+    align = "center",
+    sideOffset = 4,
+    ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+    return (
+        <PopoverPrimitive.Portal>
+            <PopoverPrimitive.Content
+                data-slot="popover-content"
+                align={align}
+                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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+                    className
+                )}
+                {...props}
+            />
+        </PopoverPrimitive.Portal>
+    );
+}
+
+function PopoverAnchor({
+    ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+    return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -4,117 +4,117 @@
@custom-variant dark (&:is(.dark *));

@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }

 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
 }

@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
 }
--- a/frontend/src/lib/socket.io/socket.tsx
+++ b/frontend/src/lib/socket.io/socket.tsx
@@ -0,0 +1,59 @@
+import { io } from "socket.io-client";
+
+export const coreSocket = io(
+    window.location.origin || "http://localhost:3000",
+    {
+        path: "/lst/api/ws",
+        autoConnect: true,
+        // transports: ["websocket", "polling"],
+        withCredentials: true,
+        reconnectionAttempts: 5,
+        timeout: 10_000,
+    }
+);
+
+// --- Core events ---
+coreSocket.on("connect", () => {
+    console.log("✅ Core connected:", coreSocket.id);
+    console.log("🔗 Transport:", coreSocket.io.engine.transport.name);
+});
+
+coreSocket.on("disconnect", (reason) => {
+    console.warn("🔴 Core disconnected:", reason);
+    if (reason === "io server disconnect") coreSocket.connect();
+});
+
+coreSocket.on("connect_error", (err) => {
+    console.error("❌ Core connect error:", err.message);
+});
+
+coreSocket.io.on("reconnect_attempt", (attempt) => {
+    console.log("♻️  Core reconnect attempt:", attempt);
+});
+
+coreSocket.io.on("reconnect_failed", () => {
+    console.error("💀 Core reconnect failed after max attempts");
+});
+
+coreSocket.io.engine.on("upgrade", (transport) => {
+    console.log("🚀 Core upgraded to:", transport.name);
+});
+
+coreSocket.io.engine.on("close", (reason) => {
+    console.warn("🧨 Core engine closed:", reason);
+});
+
+setInterval(() => {
+    //console.log(window.location.origin);
+    if (coreSocket.connected) {
+        coreSocket.emit("keepalive");
+        console.log("🏓 Ping sent to server");
+    } else {
+        //console.warn("⚠️ Socket not connected, skipping ping");
+    }
+}, 30 * 1000);
+
+// Optional: listen for server acknowledgment
+coreSocket.on("pongCheck", (data) => {
+    console.log("🏓 Pong received from server:", data);
+});
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -14,16 +14,27 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as AdminLayoutRouteRouteImport } from './routes/_adminLayout/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
+import { Route as mobileStuffMobileLayoutRouteRouteImport } from './routes/(mobileStuff)/_mobileLayout/route'
 import { Route as AdminLayoutAdminSettingsRouteImport } from './routes/_adminLayout/admin/settings'
 import { Route as AdminLayoutAdminServersRouteImport } from './routes/_adminLayout/admin/servers'
+import { Route as logisticsLogisticsDeliveryScheduleRouteImport } from './routes/(logistics)/logistics/deliverySchedule'
 import { Route as authUserSignupRouteImport } from './routes/(auth)/user/signup'
 import { Route as authUserResetpasswordRouteImport } from './routes/(auth)/user/resetpassword'
 import { Route as AdminLayoutAdminUsersRouteRouteImport } from './routes/_adminLayout/admin/_users/route'
+import { Route as mobileStuffMobileLayoutMIndexRouteImport } from './routes/(mobileStuff)/_mobileLayout/m/index'
 import { Route as AdminLayoutAdminUsersUsersRouteImport } from './routes/_adminLayout/admin/_users/users'
 import { Route as AdminLayoutAdminUsersProdUsersRouteImport } from './routes/_adminLayout/admin/_users/prodUsers'
+import { Route as mobileStuffMobileLayoutMRelocateRouteImport } from './routes/(mobileStuff)/_mobileLayout/m/relocate'
+import { Route as mobileStuffMobileLayoutMDeliveryRouteImport } from './routes/(mobileStuff)/_mobileLayout/m/delivery'
+import { Route as mobileStuffMobileLayoutMCyclecountsRouteImport } from './routes/(mobileStuff)/_mobileLayout/m/cyclecounts'

+const mobileStuffRouteImport = createFileRoute('/(mobileStuff)')()
 const AdminLayoutAdminRouteImport = createFileRoute('/_adminLayout/admin')()

+const mobileStuffRoute = mobileStuffRouteImport.update({
+  id: '/(mobileStuff)',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AdminLayoutRouteRoute = AdminLayoutRouteRouteImport.update({
  id: '/_adminLayout',
  getParentRoute: () => rootRouteImport,
@@ -43,6 +54,11 @@ const authLoginRoute = authLoginRouteImport.update({
  path: '/login',
  getParentRoute: () => rootRouteImport,
 } as any)
+const mobileStuffMobileLayoutRouteRoute =
+  mobileStuffMobileLayoutRouteRouteImport.update({
+    id: '/_mobileLayout',
+    getParentRoute: () => mobileStuffRoute,
+  } as any)
 const AdminLayoutAdminSettingsRoute =
  AdminLayoutAdminSettingsRouteImport.update({
    id: '/settings',
@@ -54,6 +70,12 @@ const AdminLayoutAdminServersRoute = AdminLayoutAdminServersRouteImport.update({
  path: '/servers',
  getParentRoute: () => AdminLayoutAdminRoute,
 } as any)
+const logisticsLogisticsDeliveryScheduleRoute =
+  logisticsLogisticsDeliveryScheduleRouteImport.update({
+    id: '/(logistics)/logistics/deliverySchedule',
+    path: '/logistics/deliverySchedule',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const authUserSignupRoute = authUserSignupRouteImport.update({
  id: '/(auth)/user/signup',
  path: '/user/signup',
@@ -69,6 +91,12 @@ const AdminLayoutAdminUsersRouteRoute =
    id: '/_users',
    getParentRoute: () => AdminLayoutAdminRoute,
  } as any)
+const mobileStuffMobileLayoutMIndexRoute =
+  mobileStuffMobileLayoutMIndexRouteImport.update({
+    id: '/m/',
+    path: '/m/',
+    getParentRoute: () => mobileStuffMobileLayoutRouteRoute,
+  } as any)
 const AdminLayoutAdminUsersUsersRoute =
  AdminLayoutAdminUsersUsersRouteImport.update({
    id: '/users',
@@ -81,42 +109,77 @@ const AdminLayoutAdminUsersProdUsersRoute =
    path: '/prodUsers',
    getParentRoute: () => AdminLayoutAdminUsersRouteRoute,
  } as any)
+const mobileStuffMobileLayoutMRelocateRoute =
+  mobileStuffMobileLayoutMRelocateRouteImport.update({
+    id: '/m/relocate',
+    path: '/m/relocate',
+    getParentRoute: () => mobileStuffMobileLayoutRouteRoute,
+  } as any)
+const mobileStuffMobileLayoutMDeliveryRoute =
+  mobileStuffMobileLayoutMDeliveryRouteImport.update({
+    id: '/m/delivery',
+    path: '/m/delivery',
+    getParentRoute: () => mobileStuffMobileLayoutRouteRoute,
+  } as any)
+const mobileStuffMobileLayoutMCyclecountsRoute =
+  mobileStuffMobileLayoutMCyclecountsRouteImport.update({
+    id: '/m/cyclecounts',
+    path: '/m/cyclecounts',
+    getParentRoute: () => mobileStuffMobileLayoutRouteRoute,
+  } as any)

 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
+  '/': typeof mobileStuffMobileLayoutRouteRouteWithChildren
  '/login': typeof authLoginRoute
  '/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
  '/user/resetpassword': typeof authUserResetpasswordRoute
  '/user/signup': typeof authUserSignupRoute
+  '/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
  '/admin/servers': typeof AdminLayoutAdminServersRoute
  '/admin/settings': typeof AdminLayoutAdminSettingsRoute
+  '/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
+  '/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
+  '/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
  '/admin/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
  '/admin/users': typeof AdminLayoutAdminUsersUsersRoute
+  '/m': typeof mobileStuffMobileLayoutMIndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
+  '/': typeof mobileStuffMobileLayoutRouteRouteWithChildren
  '/login': typeof authLoginRoute
  '/admin': typeof AdminLayoutAdminUsersRouteRouteWithChildren
  '/user/resetpassword': typeof authUserResetpasswordRoute
  '/user/signup': typeof authUserSignupRoute
+  '/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
  '/admin/servers': typeof AdminLayoutAdminServersRoute
  '/admin/settings': typeof AdminLayoutAdminSettingsRoute
+  '/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
+  '/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
+  '/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
  '/admin/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
  '/admin/users': typeof AdminLayoutAdminUsersUsersRoute
+  '/m': typeof mobileStuffMobileLayoutMIndexRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/_adminLayout': typeof AdminLayoutRouteRouteWithChildren
+  '/(mobileStuff)': typeof mobileStuffRouteWithChildren
+  '/(mobileStuff)/_mobileLayout': typeof mobileStuffMobileLayoutRouteRouteWithChildren
  '/(auth)/login': typeof authLoginRoute
  '/_adminLayout/admin': typeof AdminLayoutAdminRouteWithChildren
  '/_adminLayout/admin/_users': typeof AdminLayoutAdminUsersRouteRouteWithChildren
  '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
  '/(auth)/user/signup': typeof authUserSignupRoute
+  '/(logistics)/logistics/deliverySchedule': typeof logisticsLogisticsDeliveryScheduleRoute
  '/_adminLayout/admin/servers': typeof AdminLayoutAdminServersRoute
  '/_adminLayout/admin/settings': typeof AdminLayoutAdminSettingsRoute
+  '/(mobileStuff)/_mobileLayout/m/cyclecounts': typeof mobileStuffMobileLayoutMCyclecountsRoute
+  '/(mobileStuff)/_mobileLayout/m/delivery': typeof mobileStuffMobileLayoutMDeliveryRoute
+  '/(mobileStuff)/_mobileLayout/m/relocate': typeof mobileStuffMobileLayoutMRelocateRoute
  '/_adminLayout/admin/_users/prodUsers': typeof AdminLayoutAdminUsersProdUsersRoute
  '/_adminLayout/admin/_users/users': typeof AdminLayoutAdminUsersUsersRoute
+  '/(mobileStuff)/_mobileLayout/m/': typeof mobileStuffMobileLayoutMIndexRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
@@ -126,10 +189,15 @@ export interface FileRouteTypes {
    | '/admin'
    | '/user/resetpassword'
    | '/user/signup'
+    | '/logistics/deliverySchedule'
    | '/admin/servers'
    | '/admin/settings'
+    | '/m/cyclecounts'
+    | '/m/delivery'
+    | '/m/relocate'
    | '/admin/prodUsers'
    | '/admin/users'
+    | '/m'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
@@ -137,35 +205,56 @@ export interface FileRouteTypes {
    | '/admin'
    | '/user/resetpassword'
    | '/user/signup'
+    | '/logistics/deliverySchedule'
    | '/admin/servers'
    | '/admin/settings'
+    | '/m/cyclecounts'
+    | '/m/delivery'
+    | '/m/relocate'
    | '/admin/prodUsers'
    | '/admin/users'
+    | '/m'
  id:
    | '__root__'
    | '/'
    | '/_adminLayout'
+    | '/(mobileStuff)'
+    | '/(mobileStuff)/_mobileLayout'
    | '/(auth)/login'
    | '/_adminLayout/admin'
    | '/_adminLayout/admin/_users'
    | '/(auth)/user/resetpassword'
    | '/(auth)/user/signup'
+    | '/(logistics)/logistics/deliverySchedule'
    | '/_adminLayout/admin/servers'
    | '/_adminLayout/admin/settings'
+    | '/(mobileStuff)/_mobileLayout/m/cyclecounts'
+    | '/(mobileStuff)/_mobileLayout/m/delivery'
+    | '/(mobileStuff)/_mobileLayout/m/relocate'
    | '/_adminLayout/admin/_users/prodUsers'
    | '/_adminLayout/admin/_users/users'
+    | '/(mobileStuff)/_mobileLayout/m/'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  AdminLayoutRouteRoute: typeof AdminLayoutRouteRouteWithChildren
+  mobileStuffRoute: typeof mobileStuffRouteWithChildren
  authLoginRoute: typeof authLoginRoute
  authUserResetpasswordRoute: typeof authUserResetpasswordRoute
  authUserSignupRoute: typeof authUserSignupRoute
+  logisticsLogisticsDeliveryScheduleRoute: typeof logisticsLogisticsDeliveryScheduleRoute
 }

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+    '/(mobileStuff)': {
+      id: '/(mobileStuff)'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof mobileStuffRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/_adminLayout': {
      id: '/_adminLayout'
      path: ''
@@ -194,6 +283,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof authLoginRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/(mobileStuff)/_mobileLayout': {
+      id: '/(mobileStuff)/_mobileLayout'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof mobileStuffMobileLayoutRouteRouteImport
+      parentRoute: typeof mobileStuffRoute
+    }
    '/_adminLayout/admin/settings': {
      id: '/_adminLayout/admin/settings'
      path: '/settings'
@@ -208,6 +304,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AdminLayoutAdminServersRouteImport
      parentRoute: typeof AdminLayoutAdminRoute
    }
+    '/(logistics)/logistics/deliverySchedule': {
+      id: '/(logistics)/logistics/deliverySchedule'
+      path: '/logistics/deliverySchedule'
+      fullPath: '/logistics/deliverySchedule'
+      preLoaderRoute: typeof logisticsLogisticsDeliveryScheduleRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/(auth)/user/signup': {
      id: '/(auth)/user/signup'
      path: '/user/signup'
@@ -229,6 +332,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AdminLayoutAdminUsersRouteRouteImport
      parentRoute: typeof AdminLayoutAdminRoute
    }
+    '/(mobileStuff)/_mobileLayout/m/': {
+      id: '/(mobileStuff)/_mobileLayout/m/'
+      path: '/m'
+      fullPath: '/m'
+      preLoaderRoute: typeof mobileStuffMobileLayoutMIndexRouteImport
+      parentRoute: typeof mobileStuffMobileLayoutRouteRoute
+    }
    '/_adminLayout/admin/_users/users': {
      id: '/_adminLayout/admin/_users/users'
      path: '/users'
@@ -243,6 +353,27 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AdminLayoutAdminUsersProdUsersRouteImport
      parentRoute: typeof AdminLayoutAdminUsersRouteRoute
    }
+    '/(mobileStuff)/_mobileLayout/m/relocate': {
+      id: '/(mobileStuff)/_mobileLayout/m/relocate'
+      path: '/m/relocate'
+      fullPath: '/m/relocate'
+      preLoaderRoute: typeof mobileStuffMobileLayoutMRelocateRouteImport
+      parentRoute: typeof mobileStuffMobileLayoutRouteRoute
+    }
+    '/(mobileStuff)/_mobileLayout/m/delivery': {
+      id: '/(mobileStuff)/_mobileLayout/m/delivery'
+      path: '/m/delivery'
+      fullPath: '/m/delivery'
+      preLoaderRoute: typeof mobileStuffMobileLayoutMDeliveryRouteImport
+      parentRoute: typeof mobileStuffMobileLayoutRouteRoute
+    }
+    '/(mobileStuff)/_mobileLayout/m/cyclecounts': {
+      id: '/(mobileStuff)/_mobileLayout/m/cyclecounts'
+      path: '/m/cyclecounts'
+      fullPath: '/m/cyclecounts'
+      preLoaderRoute: typeof mobileStuffMobileLayoutMCyclecountsRouteImport
+      parentRoute: typeof mobileStuffMobileLayoutRouteRoute
+    }
  }
 }

@@ -288,12 +419,51 @@ const AdminLayoutRouteRouteChildren: AdminLayoutRouteRouteChildren = {
 const AdminLayoutRouteRouteWithChildren =
  AdminLayoutRouteRoute._addFileChildren(AdminLayoutRouteRouteChildren)

+interface mobileStuffMobileLayoutRouteRouteChildren {
+  mobileStuffMobileLayoutMCyclecountsRoute: typeof mobileStuffMobileLayoutMCyclecountsRoute
+  mobileStuffMobileLayoutMDeliveryRoute: typeof mobileStuffMobileLayoutMDeliveryRoute
+  mobileStuffMobileLayoutMRelocateRoute: typeof mobileStuffMobileLayoutMRelocateRoute
+  mobileStuffMobileLayoutMIndexRoute: typeof mobileStuffMobileLayoutMIndexRoute
+}
+
+const mobileStuffMobileLayoutRouteRouteChildren: mobileStuffMobileLayoutRouteRouteChildren =
+  {
+    mobileStuffMobileLayoutMCyclecountsRoute:
+      mobileStuffMobileLayoutMCyclecountsRoute,
+    mobileStuffMobileLayoutMDeliveryRoute:
+      mobileStuffMobileLayoutMDeliveryRoute,
+    mobileStuffMobileLayoutMRelocateRoute:
+      mobileStuffMobileLayoutMRelocateRoute,
+    mobileStuffMobileLayoutMIndexRoute: mobileStuffMobileLayoutMIndexRoute,
+  }
+
+const mobileStuffMobileLayoutRouteRouteWithChildren =
+  mobileStuffMobileLayoutRouteRoute._addFileChildren(
+    mobileStuffMobileLayoutRouteRouteChildren,
+  )
+
+interface mobileStuffRouteChildren {
+  mobileStuffMobileLayoutRouteRoute: typeof mobileStuffMobileLayoutRouteRouteWithChildren
+}
+
+const mobileStuffRouteChildren: mobileStuffRouteChildren = {
+  mobileStuffMobileLayoutRouteRoute:
+    mobileStuffMobileLayoutRouteRouteWithChildren,
+}
+
+const mobileStuffRouteWithChildren = mobileStuffRoute._addFileChildren(
+  mobileStuffRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  AdminLayoutRouteRoute: AdminLayoutRouteRouteWithChildren,
+  mobileStuffRoute: mobileStuffRouteWithChildren,
  authLoginRoute: authLoginRoute,
  authUserResetpasswordRoute: authUserResetpasswordRoute,
  authUserSignupRoute: authUserSignupRoute,
+  logisticsLogisticsDeliveryScheduleRoute:
+    logisticsLogisticsDeliveryScheduleRoute,
 }
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
--- a/frontend/src/routes/(logistics)/-components/DragCell.tsx
+++ b/frontend/src/routes/(logistics)/-components/DragCell.tsx
@@ -0,0 +1,24 @@
+// src/routes/traffic/DropCell.tsx
+import { useDroppable } from "@dnd-kit/core";
+
+export function DropCell({ day, hour, children }: any) {
+    const { setNodeRef, isOver } = useDroppable({
+        id: `${day.toDateString()}-${hour}`,
+        data: { day, hour },
+    });
+
+    return (
+        <div
+            ref={setNodeRef}
+            className={`relative border h-20 p-1 ${
+                isOver ? "bg-blue-400" : ""
+            } overflow-visible`}
+            style={{
+                maxWidth: 340, // your allotted width
+                alignContent: "flex-start",
+            }}
+        >
+            {children}
+        </div>
+    );
+}
--- a/frontend/src/routes/(logistics)/-components/Grid.tsx
+++ b/frontend/src/routes/(logistics)/-components/Grid.tsx
@@ -0,0 +1,69 @@
+// src/routes/traffic/Grid.tsx
+import { format } from "date-fns";
+import React from "react";
+import { ScrollArea, ScrollBar } from "../../../components/ui/scroll-area";
+
+export const days = Array.from(
+	{ length: 5 },
+	(_, i) => new Date(Date.now() + i * 24 * 60 * 60 * 1000),
+);
+
+// the layout of the hours
+const hoursBefore = 3;
+const totalHours = 24;
+
+// get the current hour
+const currentHour = new Date().getHours();
+const startHour = (currentHour - hoursBefore + 24) % 24;
+
+// generate the hours array
+const hours = Array.from(
+	{ length: totalHours },
+	(_, i) => (startHour + i) % 24,
+);
+
+export function Grid({
+	days,
+	children,
+}: {
+	days: any;
+	children?: (day: Date, hour: number) => React.ReactNode;
+}) {
+	return (
+		<ScrollArea className={`h-[80vh]`}>
+			<div
+				className="grid"
+				style={{
+					display: "grid",
+					gridTemplateColumns: `100px repeat(${days.length}, 350px)`, // each day = 180 px wide
+					//minWidth: `${100 + days.length * 350}px`,
+				}}
+			>
+				{/* Empty top-left corner */}
+				<div className="sticky top-0 left-0 bg-background z-30"></div>
+
+				{/* Date headers */}
+				{days.map((d: any) => (
+					<div
+						key={d.toDateString()}
+						className="sticky top-0 bg-background z-20 p-2 font-semibold text-center"
+					>
+						{format(d, "EEEE M/d/yyyy")}
+					</div>
+				))}
+
+				{hours.map((hour) => (
+					<React.Fragment key={hour}>
+						<div className="border p-1 text-right text-sm">{hour}:00</div>
+						{days.map((d: any) => (
+							<div key={`${d}-${hour}`} className="relative border h-20">
+								{children && children(d, hour)}
+							</div>
+						))}
+					</React.Fragment>
+				))}
+			</div>
+			<ScrollBar orientation="horizontal" />
+		</ScrollArea>
+	);
+}
--- a/frontend/src/routes/(logistics)/-components/GridBody.tsx
+++ b/frontend/src/routes/(logistics)/-components/GridBody.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+// GridBody.tsx
+export function GridBody({ days, children }: { days: Date[]; children: any }) {
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+
+    return (
+        <div
+            className="grid overflow-x-auto"
+            style={{
+                display: "grid",
+                gridTemplateColumns: `100px repeat(${days.length},340px)`,
+            }}
+        >
+            {hours.map((hour) => (
+                <React.Fragment key={hour}>
+                    {/* time label, sticky left */}
+                    <div className="sticky left-0 bg-background border p-1 text-right text-sm z-10">
+                        {hour}:00
+                    </div>
+
+                    {days.map((day) => (
+                        <div
+                            key={`${day}-${hour}`}
+                            className="border h-20 relative"
+                        >
+                            {children && children(day, hour)}
+                        </div>
+                    ))}
+                </React.Fragment>
+            ))}
+        </div>
+    );
+}
--- a/frontend/src/routes/(logistics)/-components/GridHeader.tsx
+++ b/frontend/src/routes/(logistics)/-components/GridHeader.tsx
@@ -0,0 +1,24 @@
+// GridHeader.tsx
+import { format } from "date-fns";
+
+export function GridHeader({ days }: { days: Date[] }) {
+    return (
+        <div
+            className="grid sticky top-0 z-30 bg-background"
+            style={{
+                display: "grid",
+                gridTemplateColumns: `100px repeat(${days.length},340px)`,
+            }}
+        >
+            <div /> {/* Empty corner for time labels */}
+            {days.map((d) => (
+                <div
+                    key={d.toDateString()}
+                    className="p-2 font-semibold text-center border-b"
+                >
+                    {format(d, "EEE M/d/yyyy")}
+                </div>
+            ))}
+        </div>
+    );
+}
--- a/frontend/src/routes/(logistics)/-components/Shipments.tsx
+++ b/frontend/src/routes/(logistics)/-components/Shipments.tsx
@@ -0,0 +1,44 @@
+// ShipmentItem.tsx
+import { useDraggable } from "@dnd-kit/core";
+
+interface ShipmentItemProps {
+	shipment: any;
+	index?: number;
+	perm?: boolean;
+}
+
+export function ShipmentItem({
+	shipment,
+	index = 0,
+	perm = true,
+}: ShipmentItemProps) {
+	const { setNodeRef, listeners, attributes, transform } = useDraggable({
+		id: shipment.orderNumber,
+		data: shipment,
+	});
+
+	const offsetX = index * 10;
+
+	const style: React.CSSProperties = {
+		transform: transform
+			? `translate(${transform.x}px, ${transform.y}px)`
+			: `translateX(${offsetX}px)`,
+		transition: transform ? "none" : "transform 0.2s ease",
+		zIndex: 10 + index,
+		position: "absolute",
+		top: 0,
+		left: 0,
+		cursor: "grab",
+	};
+	return (
+		<div
+			ref={setNodeRef}
+			{...listeners}
+			{...attributes}
+			style={style}
+			className="w-[160px] p-2 text-xs rounded shadow select-none "
+		>
+			{shipment.orderNumber}
+		</div>
+	);
+}
--- a/frontend/src/routes/(logistics)/-components/style.css
+++ b/frontend/src/routes/(logistics)/-components/style.css
@@ -0,0 +1,125 @@
+.react-calendar-timeline * {
+	box-sizing: border-box;
+}
+.react-calendar-timeline .rct-outer {
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.react-calendar-timeline .rct-scroll {
+	display: inline-block;
+	white-space: normal;
+	vertical-align: top;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.react-calendar-timeline .rct-item:hover {
+	z-index: 88;
+}
+
+.react-calendar-timeline .rct-item .rct-item-content {
+	position: sticky;
+	position: -webkit-sticky; /* still fine — helps with drag display */
+	left: 0;
+
+	/* Let multiple lines render */
+	display: block;
+	white-space: normal; /* ⬅ allow wrapping */
+	overflow: visible; /* ⬅ don't clip longer content */
+	height: auto; /* ⬅ expand with content */
+	padding: 4px 6px; /* ⬅ spacing inside item */
+	line-height: 1.3; /* ⬅ readable multi-line spacing */
+	border-radius: 2px;
+	box-sizing: border-box; /* consistent height/padding */
+}
+
+.react-calendar-timeline .rct-sidebar {
+	overflow: hidden;
+	white-space: normal;
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	box-sizing: border-box;
+	border-right: 1px solid #bbb;
+}
+.react-calendar-timeline .rct-sidebar.rct-sidebar-right {
+	border-right: 0;
+	border-left: 1px solid #bbb;
+}
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row {
+	padding: 0 4px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	box-sizing: border-box;
+	margin: 0;
+	border-bottom: 1px solid #bbb;
+}
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
+	background: #0000000d;
+}
+.react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
+	background: transparent;
+}
+.react-calendar-timeline .rct-vertical-lines .rct-vl {
+	position: absolute;
+	border-left: 1px solid #bbb;
+	z-index: 30;
+}
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
+	border-left-width: 2px;
+}
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-6,
+.react-calendar-timeline .rct-vertical-lines .rct-vl.rct-day-0 {
+	background: #faf6e180;
+}
+.react-calendar-timeline .rct-horizontal-lines {
+	-webkit-user-select: none;
+	-moz-user-select: -moz-none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+	border-bottom: 1px solid #bbb;
+	box-sizing: border-box;
+	z-index: 40;
+}
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
+	background: #0000000d;
+}
+.react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
+	background: transparent;
+}
+.react-calendar-timeline .rct-cursor-line {
+	position: absolute;
+	width: 2px;
+	background: #2196f3;
+	z-index: 51;
+}
+.react-calendar-timeline .rct-dateHeader {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	border-bottom: 1px solid #bbb;
+	cursor: pointer;
+	font-size: 14px;
+	background-color: #f0f0f0;
+	border-left: 2px solid #bbb;
+}
+.react-calendar-timeline .rct-dateHeader-primary {
+	background-color: initial;
+	border-left: 1px solid #bbb;
+	border-right: 1px solid #bbb;
+	color: #fff;
+}
+.react-calendar-timeline .rct-header-root {
+	background: #c52020;
+	border-bottom: 1px solid #bbb;
+}
+.react-calendar-timeline .rct-calendar-header {
+	border: 1px solid #bbb;
+}
--- a/frontend/src/routes/(logistics)/-hooks/useDateWindow.tsx
+++ b/frontend/src/routes/(logistics)/-hooks/useDateWindow.tsx
@@ -0,0 +1,35 @@
+import { useMemo, useState } from "react";
+
+export function useDateWindow(initialStart = new Date()) {
+	const [startDate, setStartDate] = useState(initialStart);
+	const [endDayCount, setEndDayCount] = useState<string>(
+		localStorage.getItem("endDayCount") || "5",
+	);
+	const [startDayCount, startEndDayCount] = useState<string>(
+		localStorage.getItem("startDayCount") || "0",
+	);
+
+	const days = useMemo(() => {
+		const startOffset = parseInt(startDayCount, 10);
+		const endOffset = parseInt(endDayCount, 10);
+
+		const start = new Date(startDate);
+		start.setDate(start.getDate() - startOffset);
+
+		return Array.from({ length: endOffset + startOffset + 1 }, (_, i) => {
+			const d = new Date(start);
+			d.setDate(start.getDate() + i);
+			return d;
+		});
+	}, [startDate, startDayCount, endDayCount]);
+
+	return {
+		days,
+		startDate,
+		setStartDate,
+		endDayCount,
+		setEndDayCount,
+		startDayCount,
+		startEndDayCount,
+	};
+}
--- a/frontend/src/routes/(logistics)/logistics/deliverySchedule.tsx
+++ b/frontend/src/routes/(logistics)/logistics/deliverySchedule.tsx
@@ -0,0 +1,66 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { coreSocket } from "../../../lib/socket.io/socket";
+import "../-components/style.css";
+import moment from "moment";
+import Timeline from "react-calendar-timeline";
+
+export const Route = createFileRoute("/(logistics)/logistics/deliverySchedule")(
+	{
+		beforeLoad: async () => {
+			coreSocket.emit("joinScheduler", "scheduler");
+			// coreSocket.on("scheduler", (p) => {
+			//     console.log(`[scheduler] received:`, p);
+			// });
+		},
+		component: RouteComponent,
+	},
+);
+
+function RouteComponent() {
+	// connect to the channel
+	const [shipments, setShipments] = useState([]) as any;
+	//const [perm] = useState(true); // will check this for sure with a user permissions
+	const [loaded, setLoaded] = useState(false);
+
+	// useEffect(() => {
+	// 	const handleConnect = () => {
+	// 		console.log("✅ Socket connected, joining scheduler");
+	// 		coreSocket.emit("joinScheduler");
+	// 	};
+
+	// 	coreSocket.on("connect", handleConnect);
+
+	// 	//const handler = (msg: any) => console.log("💓", msg);
+	// 	const onUpdate = (msg: any) => {
+	// 		console.log(msg.data);
+	// 		setShipments(() => {
+	// 			return msg.data.map((i: any) => ({
+	// 				id: i.schedule_id,
+	// 				title: i.orderNumber,
+	// 				group: i.dock === "" ? 1 : 1, // this will just toss everything here for now will go to the actual dock id later
+	// 				start_time: moment(parseISO(i.lstDateCheck)),
+	// 				end_time: moment(addHours(parseISO(i.lstDateCheck), 1)),
+	// 				data: i,
+	// 			}));
+	// 		});
+	// 		if (!loaded) setLoaded(true);
+	// 	};
+
+	// 	//coreSocket.on("data", onData);
+	// 	coreSocket.on("scheduler:update", onUpdate);
+
+	// 	return () => {
+	// 		// cleanup on unmount
+	// 		//coreSocket.off("data", onData);
+	// 		coreSocket.off("scheduler:update", onUpdate);
+	// 		coreSocket.off("connect", handleConnect);
+	// 	};
+	// }, []);
+
+	// if (shipments.length === 0) {
+	// 	return <div>Loading.....</div>;
+	// }
+
+	return <div className="p-4 "></div>;
+}
--- a/frontend/src/routes/(mobileStuff)/_mobileLayout/m/cyclecounts.tsx
+++ b/frontend/src/routes/(mobileStuff)/_mobileLayout/m/cyclecounts.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/(mobileStuff)/_mobileLayout/m/cyclecounts',
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(mobileStuff)/_mobileLayout/m/cyclecounts"!</div>
+}
--- a/frontend/src/routes/(mobileStuff)/_mobileLayout/m/delivery.tsx
+++ b/frontend/src/routes/(mobileStuff)/_mobileLayout/m/delivery.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(mobileStuff)/_mobileLayout/m/delivery')(
+  {
+    component: RouteComponent,
+  },
+)
+
+function RouteComponent() {
+  return <div>Hello "/(mobileStuff)/_mobileLayout/m/delivery"!</div>
+}
--- a/frontend/src/routes/(mobileStuff)/_mobileLayout/m/index.tsx
+++ b/frontend/src/routes/(mobileStuff)/_mobileLayout/m/index.tsx
@@ -0,0 +1,78 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { LstCard } from "../../../../components/ui/lstCard";
+import {
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "../../../../components/ui/card";
+import { Button } from "../../../../components/ui/button";
+import { cn } from "../../../../lib/utils";
+
+export const Route = createFileRoute("/(mobileStuff)/_mobileLayout/m/")({
+    component: RouteComponent,
+});
+
+const commands = [
+    {
+        title: "Relocate",
+        description: "Moves a pallet from one location to another",
+        link: "/lst/app/m/relocate",
+    },
+    {
+        title: "Cycle Counts",
+        description: "Will do a cycle count on a specific lane",
+        link: "/lst/app/m/cyclecounts",
+    },
+    {
+        title: "Delivery",
+        description:
+            "Scan pallets to a delivery that has already been drag down in stock",
+        link: "/lst/app/m/delivery",
+    },
+];
+
+function RouteComponent() {
+    return (
+        <div className="p-3 space-y-3">
+            <LstCard>
+                <CardHeader>
+                    <CardTitle className="flex justify-center">
+                        Commands
+                    </CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="flex flex-wrap justify-center gap-3">
+                        {commands.map((cmd) => {
+                            return (
+                                <Link
+                                    key={cmd.title}
+                                    to={cmd.link}
+                                    className="block"
+                                >
+                                    <Button
+                                        variant="outline"
+                                        className={cn(
+                                            "flex flex-col justify-center items-center",
+                                            "w-36 h-28 p-3 text-center", // fixed width/height for uniform grid
+                                            "border-muted bg-background hover:bg-accent/40",
+                                            "transition-all active:scale-95"
+                                        )}
+                                    >
+                                        <span className="text-base font-semibold leading-tight">
+                                            {cmd.title}
+                                        </span>
+                                        {/* <div className="max-w-[75px]">
+                                            <span className="text-xs text-wrap">
+                                                {cmd.description}
+                                            </span>
+                                        </div> */}
+                                    </Button>
+                                </Link>
+                            );
+                        })}
+                    </div>
+                </CardContent>
+            </LstCard>
+        </div>
+    );
+}
--- a/frontend/src/routes/(mobileStuff)/_mobileLayout/m/relocate.tsx
+++ b/frontend/src/routes/(mobileStuff)/_mobileLayout/m/relocate.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(mobileStuff)/_mobileLayout/m/relocate')(
+  {
+    component: RouteComponent,
+  },
+)
+
+function RouteComponent() {
+  return <div>Hello "/(mobileStuff)/_mobileLayout/m/relocate"!</div>
+}
--- a/frontend/src/routes/(mobileStuff)/_mobileLayout/route.tsx
+++ b/frontend/src/routes/(mobileStuff)/_mobileLayout/route.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/(mobileStuff)/_mobileLayout")({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <div>
+            <Outlet />
+        </div>
+    );
+}
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,4 +1,8 @@
-import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
+import {
+    createRootRouteWithContext,
+    Outlet,
+    useRouter,
+} from "@tanstack/react-router";

 import type { QueryClient } from "@tanstack/react-query";
 import { Toaster } from "sonner";
@@ -10,6 +14,9 @@ import { SidebarProvider } from "../components/ui/sidebar";
 import SideBarNav from "../components/navBar/SideBarNav";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { userAccess } from "../lib/authClient";
+import mobile from "is-mobile";
+import { useEffect } from "react";
+import { coreSocket } from "../lib/socket.io/socket";

 interface RootRouteContext {
    queryClient: QueryClient;
@@ -21,6 +28,29 @@ interface RootRouteContext {
 const RootLayout = () => {
    //const { logout, login } = Route.useRouteContext();
    const defaultOpen = Cookies.get("sidebar_state") === "true";
+    const router = useRouter();
+    // console.log(mobile({ featureDetect: true, tablet: true }));
+
+    // if mobile lets move to the mobile section.
+    useEffect(() => {
+        if (mobile({ featureDetect: true, tablet: true })) {
+            router.navigate({ to: "/m" });
+        }
+
+        coreSocket.on("connect", () => {
+            console.log("✅ Connected:", coreSocket.id);
+        });
+
+        coreSocket.on("disconnect", () => {
+            console.log("🔴 Disconnected");
+        });
+
+        return () => {
+            coreSocket.off("connect");
+            coreSocket.off("disconnect");
+        };
+    }, []);
+
    return (
        <div>
            <SessionGuard>