From fbd39bb67f25341d0955c5c2ce66e763922767de Mon Sep 17 00:00:00 2001
From: Viktor Barzin <vbarzin@gmail.com>
Date: Sat, 21 Jun 2025 23:43:35 +0000
Subject: [PATCH] replace available from component with a nicer search which
 takes human input

---
 .../frontend/src/components/Parameters.tsx    |  72 +++---
 .../frontend/src/components/ui/DatePicker.tsx | 111 ++++++++++
 .../frontend/src/components/ui/calendar.tsx   | 208 ++++++++++++++++++
 .../frontend/src/components/ui/popover.tsx    |  46 ++++
 4 files changed, 390 insertions(+), 47 deletions(-)
 create mode 100644 crawler/frontend/src/components/ui/DatePicker.tsx
 create mode 100644 crawler/frontend/src/components/ui/calendar.tsx
 create mode 100644 crawler/frontend/src/components/ui/popover.tsx

diff --git a/crawler/frontend/src/components/Parameters.tsx b/crawler/frontend/src/components/Parameters.tsx
index b30439f..1e356ef 100644
--- a/crawler/frontend/src/components/Parameters.tsx
+++ b/crawler/frontend/src/components/Parameters.tsx
@@ -4,11 +4,10 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Button } from "./ui/button";
-import { Calendar } from "./ui/calendar";
+import { Calendar29 } from "./ui/DatePicker";
 import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
 
 
@@ -47,6 +46,7 @@ export function Parameters(
         register,
     } = useForm<ParameterValues>()
     const [action, setAction] = useState<'fetch-data' | 'visualize' | null>(null)
+    const [availableFromRawInput, setAvailableFromRawInput] = useState("now");
 
     const formSchema = z.object({
         metric: z.nativeEnum(Metric, { required_error: "Metric is required" }),
@@ -63,11 +63,12 @@ export function Parameters(
         resolver: zodResolver(formSchema),
         defaultValues: {
             metric: Metric.qmprice,
+            listing_type: ListingType.RENT,
             min_bedrooms: 1,
             max_bedrooms: 3,
             max_price: 3000,
             min_price: 2000,
-            min_sqm: 0,
+            min_sqm: 50,
             last_seen_days: 7,
             available_from: new Date(),
         },
@@ -81,7 +82,6 @@ export function Parameters(
             props.onSubmit(action, values)
         }
     }
-    const now = new Date();
 
 
 
@@ -144,6 +144,19 @@ export function Parameters(
                                 </FormItem>
                             )}
                         />
+                        <FormField
+                            control={form.control}
+                            name="min_sqm"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Min square meters</FormLabel>
+                                    <FormControl >
+                                        <Input type="number" placeholder={"m²"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
                         <FormField
                             control={form.control}
                             name="min_bedrooms"
@@ -198,13 +211,16 @@ export function Parameters(
                         />
                         <FormField
                             control={form.control}
-                            name="min_sqm"
+                            name="available_from"
                             render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Min square meters</FormLabel>
-                                    <FormControl >
-                                        <Input type="number" placeholder={"m²"} {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
+                                <FormItem className="flex flex-col">
+                                    <FormLabel>Available from</FormLabel>
+                                    <FormControl>
+                                        <Calendar29 onSelect={field.onChange} selected={field.value} rawInputValue={availableFromRawInput} onChangeRawInputValue={setAvailableFromRawInput} />
                                     </FormControl>
+                                    <FormDescription>
+                                        Applicable for renting listings only
+                                    </FormDescription>
                                     <FormMessage />
                                 </FormItem>
                             )}
@@ -222,44 +238,6 @@ export function Parameters(
                                 </FormItem>
                             )}
                         />
-                        <FormField
-                            control={form.control}
-                            name="available_from"
-                            render={({ field }) => (
-                                <FormItem className="flex flex-col">
-                                    <FormLabel>Available from</FormLabel>
-                                    <Popover>
-                                        <PopoverTrigger asChild>
-                                            <FormControl>
-                                                <Button
-                                                    variant={"outline"}
-                                                    className={
-                                                        "w-[240px] pl-3 text-left font-normal"
-                                                    }
-                                                >
-                                                    {/* <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> */}
-                                                </Button>
-                                            </FormControl>
-                                        </PopoverTrigger>
-                                        <PopoverContent className="w-auto p-0" align="start">
-                                            <Calendar
-                                                mode="single"
-                                                selected={field.value}
-                                                onSelect={field.onChange}
-                                                disabled={(date) =>
-                                                    date < new Date() || date > new Date(now.setMonth(now.getMonth() + 3))
-                                                }
-                                                captionLayout="dropdown"
-                                            />
-                                        </PopoverContent>
-                                    </Popover>
-                                    <FormDescription>
-                                        Applicable for renting listings only
-                                    </FormDescription>
-                                    <FormMessage />
-                                </FormItem>
-                            )}
-                        />
 
                         <Button type="submit" value={"visualize"} onClick={() => setAction("visualize")}>Visualize</Button>
                         <Button type="submit" value={"fetch-data"} onClick={() => setAction("fetch-data")}>Fetch data</Button>
diff --git a/crawler/frontend/src/components/ui/DatePicker.tsx b/crawler/frontend/src/components/ui/DatePicker.tsx
new file mode 100644
index 0000000..6d592d6
--- /dev/null
+++ b/crawler/frontend/src/components/ui/DatePicker.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { parseDate } from "chrono-node"
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Input } from "@/components/ui/input"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+
+function formatDate(date: Date | undefined) {
+    if (!date) {
+        return ""
+    }
+
+    return date.toLocaleDateString("en-US", {
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+    })
+}
+
+export function Calendar29(
+    props: {
+        onSelect?: (date?: Date) => void,
+        selected?: Date | undefined,
+        rawInputValue?: string | undefined
+        onChangeRawInputValue?: (rawInputValue: string) => void
+    }
+) {
+    const [open, setOpen] = React.useState(false)
+    const [value, setValue] = React.useState(props.rawInputValue ?? "now")
+
+    const [date, setDate] = React.useState<Date | undefined>(
+        parseDate(value) || undefined
+    )
+    const [month, setMonth] = React.useState<Date | undefined>(date)
+
+    return (
+        <div className="flex flex-col gap-3">
+            <div className="relative flex gap-2">
+                <Input
+                    id="date"
+                    value={props.rawInputValue !== undefined ? props.rawInputValue : value}
+                    placeholder="Tomorrow or next week"
+                    className="bg-background pr-10"
+                    onChange={(e) => {
+                        setValue(e.target.value)
+                        if (props.onChangeRawInputValue) {
+                            props.onChangeRawInputValue(e.target.value)
+                        }
+                        const date = parseDate(e.target.value)
+                        if (date) {
+                            setDate(date)
+                            setMonth(date)
+                            if (props.onSelect) {
+                                props.onSelect(date)
+                            }
+                        }
+                    }}
+                    onKeyDown={(e) => {
+                        if (e.key === "ArrowDown") {
+                            e.preventDefault()
+                            setOpen(true)
+                        }
+                    }}
+                />
+                <Popover open={open} onOpenChange={setOpen}>
+                    <PopoverTrigger asChild>
+                        <Button
+                            id="date-picker"
+                            variant="ghost"
+                            className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+                        >
+                            <CalendarIcon className="size-3.5" />
+                            <span className="sr-only">Select date</span>
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+                        <Calendar
+                            mode="single"
+                            selected={date}
+                            captionLayout="dropdown"
+                            month={month}
+                            onMonthChange={setMonth}
+                            onSelect={(date) => {
+                                setDate(date)
+                                setValue(formatDate(date))
+                                if (props.onChangeRawInputValue) {
+                                    props.onChangeRawInputValue(formatDate(date))
+                                }
+                                setOpen(false)
+                                if (props.onSelect) {
+                                    props.onSelect(date)
+                                }
+                            }}
+                        />
+                    </PopoverContent>
+                </Popover>
+            </div>
+            <div className="text-muted-foreground px-1 text-sm">
+                <span className="font-medium">{formatDate(date)}</span>.
+            </div>
+        </div>
+    )
+}
diff --git a/crawler/frontend/src/components/ui/calendar.tsx b/crawler/frontend/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..a0a553d
--- /dev/null
+++ b/crawler/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,208 @@
+import * as React from "react"
+import {
+  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
+}: 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 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 }
diff --git a/crawler/frontend/src/components/ui/popover.tsx b/crawler/frontend/src/components/ui/popover.tsx
new file mode 100644
index 0000000..6d51b6c
--- /dev/null
+++ b/crawler/frontend/src/components/ui/popover.tsx
@@ -0,0 +1,46 @@
+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 }