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

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>
+	);
+}