Improve admin diagnostics controls

- Add a client uploads toggle with status refresh and feedback - Replace native date filters with calendar and time pickers - Improve responsive filter layout and test upload settings
2026-07-22 13:13:52 -04:00
parent 0a914441ea
commit 4e42cb3053
8 changed files with 515 additions and 37 deletions
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { CalendarIcon } from "lucide-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";
+import { formatDateTime } from "@/lib/datetime";
+import { cn } from "@/lib/utils";
+
+/**
+ * Calendar + time-of-day picker that speaks the same `YYYY-MM-DDTHH:mm` local
+ * string format as a native `datetime-local` input, so it can drop into
+ * existing filter state without conversions.
+ */
+export function DateTimePicker({
+  id,
+  value,
+  onChange,
+  placeholder = "Any time",
+  className,
+}: {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = parseLocalDateTime(value);
+  const time = selected ? value.slice(11, 16) : "";
+
+  function handleSelectDay(day: Date | undefined) {
+    if (!day) {
+      onChange("");
+      return;
+    }
+    onChange(`${toLocalDateString(day)}T${time || "00:00"}`);
+  }
+
+  function handleTimeChange(nextTime: string) {
+    const day = selected ?? new Date();
+    onChange(`${toLocalDateString(day)}T${nextTime || "00:00"}`);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          className={cn(
+            "w-full justify-start bg-transparent px-3 font-normal",
+            !selected && "text-muted-foreground",
+            className,
+          )}
+        >
+          <CalendarIcon className="size-4 opacity-60" aria-hidden="true" />
+          <span className="truncate">
+            {selected ? formatDateTime(selected, { seconds: false }) : placeholder}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={selected}
+          defaultMonth={selected}
+          onSelect={handleSelectDay}
+        />
+        <div className="flex items-center gap-2 border-t p-3">
+          <Input
+            type="time"
+            aria-label="Time of day"
+            value={time}
+            onChange={(event) => handleTimeChange(event.target.value)}
+            className="h-8"
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            disabled={!selected}
+            onClick={() => onChange("")}
+          >
+            Clear
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function parseLocalDateTime(value: string) {
+  if (!value) return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}
+
+function toLocalDateString(day: Date) {
+  const pad = (part: number) => String(part).padStart(2, "0");
+  return `${day.getFullYear()}-${pad(day.getMonth() + 1)}-${pad(day.getDate())}`;
+}
@@ -0,0 +1,67 @@
+import type { ComponentProps } from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "relative flex flex-col gap-4 sm:flex-row",
+        month: "flex w-full flex-col gap-4",
+        month_caption: "flex h-7 items-center justify-center",
+        caption_label: "text-sm font-medium",
+        nav: "absolute inset-x-0 top-0 flex items-center justify-between",
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-60 hover:opacity-100",
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-60 hover:opacity-100",
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "text-muted-foreground w-8 text-[0.8rem] font-normal",
+        week: "mt-2 flex w-full",
+        day: "relative size-8 p-0 text-center text-sm",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-8 p-0 font-normal aria-selected:opacity-100",
+        ),
+        selected:
+          "rounded-md [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
+        today: "rounded-md [&>button:not([aria-selected])]:bg-accent",
+        outside: "text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation, className: chevronClassName }) => {
+          const Icon =
+            orientation === "left"
+              ? ChevronLeft
+              : orientation === "right"
+                ? ChevronRight
+                : orientation === "up"
+                  ? ChevronUp
+                  : ChevronDown;
+          return <Icon className={cn("size-4", chevronClassName)} aria-hidden="true" />;
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };