fix: date and time input not opening in search pipe

pipes/search/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.3",
     "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slider": "^1.2.2",

pipes/search/src/components/date-time-picker.tsx

@@ -6,75 +6,143 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
+	Popover,
+	PopoverContentInDialog as PopoverContent,
+	PopoverTrigger,
 } from "@/components/ui/popover";
-import { Input } from "./ui/input";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 export function DateTimePicker({
-  date,
-  setDate,
-  className,
+	date,
+	setDate,
+	className,
 }: {
-  date: Date;
-  setDate: (date: Date) => void;
-  className?: string;
+	date: Date;
+	setDate: (date: Date) => void;
+	className?: string;
 }) {
-  const [selectedDateTime, setSelectedDateTime] = React.useState<Date>(date);
+	const [isOpen, setIsOpen] = React.useState(false);
 
-  React.useEffect(() => {
-    setSelectedDateTime(date);
-  }, [date]);
+	const hours = Array.from({ length: 12 }, (_, i) => i + 1);
+	const handleDateSelect = (selectedDate: Date | undefined) => {
+		if (selectedDate) {
+			setDate(selectedDate);
+		}
+	};
 
-  const handleDateSelect = (selectedDate: Date | undefined) => {
-    if (selectedDate) {
-      const newDateTime = new Date(selectedDateTime);
-      newDateTime.setFullYear(selectedDate.getFullYear());
-      newDateTime.setMonth(selectedDate.getMonth());
-      newDateTime.setDate(selectedDate.getDate());
-      setSelectedDateTime(newDateTime);
-      setDate(newDateTime);
-    }
-  };
+	const handleTimeChange = (
+		type: "hour" | "minute" | "ampm",
+		value: string,
+	) => {
+		if (date) {
+			const newDate = new Date(date);
+			if (type === "hour") {
+				newDate.setHours(
+					(parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0),
+				);
+			} else if (type === "minute") {
+				newDate.setMinutes(parseInt(value));
+			} else if (type === "ampm") {
+				const currentHours = newDate.getHours();
+				newDate.setHours(
+					value === "PM" ? currentHours + 12 : currentHours - 12,
+				);
+			}
+			setDate(newDate);
+		}
+	};
 
-  const handleTimeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const [hours, minutes] = event.target.value.split(":").map(Number);
-    if (!isNaN(hours) && !isNaN(minutes)) {
-      const newDateTime = new Date(selectedDateTime);
-      newDateTime.setHours(hours);
-      newDateTime.setMinutes(minutes);
-      setSelectedDateTime(newDateTime);
-      setDate(newDateTime);
-    }
-  };
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={"outline"}
-          className={cn("w-full justify-start text-left font-normal")}
-        >
-          <CalendarIcon className="mr-2 h-4 w-4 text-gray-400" size={18} />
-          {format(date, "PPP HH:mm").toLowerCase()}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className={cn("w-auto p-0", className)}>
-        <Calendar
-          mode="single"
-          selected={selectedDateTime}
-          onSelect={handleDateSelect}
-          initialFocus
-        />
-        <div className="p-3 border-t border-border">
-          <Input
-            type="time"
-            onChange={handleTimeChange}
-            value={format(selectedDateTime, "HH:mm")}
-          />
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					className={cn(
+						"w-full justify-start text-left font-normal",
+						!date && "text-muted-foreground",
+					)}
+				>
+					<CalendarIcon className="mr-2 h-4 w-4" />
+					{date ? (
+						format(date, "MM/dd/yyyy hh:mm aa")
+					) : (
+						<span>MM/DD/YYYY hh:mm aa</span>
+					)}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className={cn("w-auto p-0", className)}>
+				<div className="sm:flex">
+					<Calendar
+						mode="single"
+						selected={date}
+						onSelect={handleDateSelect}
+						initialFocus
+					/>
+					<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{hours.reverse().map((hour) => (
+									<Button
+										key={hour}
+										size="icon"
+										variant={
+											date && date.getHours() % 12 === hour % 12
+												? "default"
+												: "ghost"
+										}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("hour", hour.toString())}
+									>
+										{hour}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+						<ScrollArea className="w-64 sm:w-auto">
+							<div className="flex sm:flex-col p-2">
+								{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+									<Button
+										key={minute}
+										size="icon"
+										variant={
+											date && date.getMinutes() === minute ? "default" : "ghost"
+										}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() =>
+											handleTimeChange("minute", minute.toString())
+										}
+									>
+										{minute}
+									</Button>
+								))}
+							</div>
+							<ScrollBar orientation="horizontal" className="sm:hidden" />
+						</ScrollArea>
+						<ScrollArea className="">
+							<div className="flex sm:flex-col p-2">
+								{["AM", "PM"].map((ampm) => (
+									<Button
+										key={ampm}
+										size="icon"
+										variant={
+											date &&
+											((ampm === "AM" && date.getHours() < 12) ||
+												(ampm === "PM" && date.getHours() >= 12))
+												? "default"
+												: "ghost"
+										}
+										className="sm:w-full shrink-0 aspect-square"
+										onClick={() => handleTimeChange("ampm", ampm)}
+									>
+										{ampm}
+									</Button>
+								))}
+							</div>
+						</ScrollArea>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
 }

pipes/search/src/components/ui/popover.tsx

@@ -1,31 +1,48 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+const PopoverContentInDialog = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+PopoverContentInDialog.displayName = "PopoverContentInDialog";
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverContentInDialog };

pipes/search/src/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }