Hours tab on the user detail with void

apps/admin/package.json

@@ -15,7 +15,7 @@
     "clean": "rimraf .next out *.tsbuildinfo"
   },
   "dependencies": {
-    "@civfix/shared": "^0.57.0",
+    "@civfix/shared": "0.58.0-b-feat-admin-user-hours-contract.g47d8a38",
     "@tanstack/react-query": "^5.62.7",
     "clsx": "^2.1.1",
     "leaflet": "^1.9.4",

apps/admin/src/components/shared/dialog.test.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from "node:fs"
+
+import { describe, expect, it } from "vitest"
+
+const source = readFileSync(new URL("./dialog.tsx", import.meta.url), "utf8")
+
+describe("dialog host", () => {
+  it("bounds the prompt textarea by the request's maxLength", () => {
+    const textarea = source.match(/<textarea[\s\S]*?\/>/)?.[0] ?? ""
+    expect(textarea).toContain("maxLength={current.maxLength}")
+  })
+
+  it("drops the cancel button only for an acknowledge-only confirm", () => {
+    expect(source).toMatch(
+      /\{!\(current\.kind === "confirm" && current\.acknowledgeOnly\) && \(\s*<button className="btn ghost" onClick=\{cancel\}>/,
+    )
+  })
+
+  it("renders confirm details as a list under the body", () => {
+    expect(source).toMatch(/current\.kind === "confirm" && current\.details[\s\S]*?<ul className="dialog-list">/)
+  })
+})

apps/admin/src/components/shared/dialog.tsx

@@ -13,6 +13,8 @@ interface ConfirmRequest {
   confirmLabel?: string
   cancelLabel?: string
   danger?: boolean
+  details?: string[]
+  acknowledgeOnly?: boolean
   resolve: (ok: boolean) => void
 }
 
@@ -25,6 +27,7 @@ interface PromptRequest {
   defaultValue?: string
   confirmLabel?: string
   required?: boolean
+  maxLength?: number
   danger?: boolean
   resolve: (value: string | null) => void
 }
@@ -121,6 +124,15 @@ export function DialogHost() {
         </div>
         <div className="dialog-body">
           {current.body && <p className="dialog-text">{current.body}</p>}
+          {current.kind === "confirm" && current.details && current.details.length > 0 && (
+            <ul className="dialog-list">
+              {current.details.map((line) => (
+                <li key={line} className="mono">
+                  {line}
+                </li>
+              ))}
+            </ul>
+          )}
           {current.kind === "prompt" && (
             <>
               {current.label && <label className="dialog-label">{current.label}</label>}
@@ -130,15 +142,18 @@ export function DialogHost() {
                 rows={3}
                 value={value}
                 placeholder={current.placeholder}
+                maxLength={current.maxLength}
                 onChange={(e) => setValue(e.target.value)}
               />
             </>
           )}
         </div>
         <div className="modal-foot dialog-foot">
-          <button className="btn ghost" onClick={cancel}>
-            {current.kind === "confirm" ? (current.cancelLabel ?? "Cancel") : "Cancel"}
-          </button>
+          {!(current.kind === "confirm" && current.acknowledgeOnly) && (
+            <button className="btn ghost" onClick={cancel}>
+              {current.kind === "confirm" ? (current.cancelLabel ?? "Cancel") : "Cancel"}
+            </button>
+          )}
           <button
             className={`btn ${current.danger ? "danger" : "primary"}`}
             onClick={accept}

apps/admin/src/features/events/use-events.ts

@@ -1,6 +1,12 @@
 "use client"
 
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
 import type {
   AdminEventListQuery,
   AdminEventListResponse,
@@ -16,10 +22,11 @@ import { api } from "@/lib/api"
 import { queryKeys } from "@/lib/query"
 
 
-export function useEventList(params: AdminEventListQuery) {
+export function useEventList(params: AdminEventListQuery, opts: { keepPreviousData?: boolean } = {}) {
   return useQuery<AdminEventListResponse>({
-    queryKey: queryKeys.events.list(params),
+    queryKey: queryKeys.events.page(params),
     queryFn: () => api.listAdminEvents(params),
+    ...(opts.keepPreviousData ? { placeholderData: keepPreviousData } : {}),
   })
 }
 

apps/admin/src/features/users/event-picker.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+
+import { Icons } from "@/components/icons"
+import { LoadingState } from "@/components/shared/data-states"
+import { useEventList } from "@/features/events/use-events"
+import type { PickedEvent } from "@/features/users/user-hours"
+import { useDebounced } from "@/hooks/use-debounced"
+import { toAppError } from "@/lib/api"
+
+const RESULT_LIMIT = 8
+
+function EventPickIcon() {
+  return (
+    <span className="prow-ico hue-moss">
+      <Icons.Calendar size={14} />
+    </span>
+  )
+}
+
+/**
+ * Search-and-pick an event that can take hours. The `completed` facet is exactly the ended,
+ * non-cancelled events, so an event the server would refuse for not having ended never appears.
+ * Once picked, the control collapses to the chosen event with a "Change" affordance.
+ */
+export function EventPicker({
+  value,
+  onChange,
+  disabled,
+}: {
+  value: PickedEvent | null
+  onChange: (event: PickedEvent | null) => void
+  disabled?: boolean
+}) {
+  const [query, setQuery] = React.useState("")
+  const debounced = useDebounced(query, 200)
+  const q = debounced.trim()
+  const list = useEventList(
+    { q: q === "" ? undefined : q, filter: "completed", limit: RESULT_LIMIT },
+    { keepPreviousData: true },
+  )
+  const results = list.data?.items ?? []
+
+  if (value) {
+    return (
+      <div className="user-pick picked">
+        <EventPickIcon />
+        <div className="user-pick-text">
+          <span className="user-pick-name">{value.title}</span>
+          <span className="user-pick-handle">
+            {value.place} · {value.when}
+          </span>
+        </div>
+        <button
+          type="button"
+          className="btn sm ghost"
+          disabled={disabled}
+          onClick={() => onChange(null)}
+        >
+          Change
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="user-pick">
+      <div className="searchbox user-pick-search">
+        <Icons.Search size={14} />
+        <input
+          type="text"
+          aria-label="Search ended events by title or place"
+          autoComplete="off"
+          placeholder="Search ended events by title or place…"
+          value={query}
+          disabled={disabled}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </div>
+      {list.isLoading ? (
+        <div className="user-pick-results">
+          <LoadingState label="Searching…" />
+        </div>
+      ) : list.isError ? (
+        <div className="user-pick-results">
+          <div className="user-pick-note tone-alert">{toAppError(list.error).message}</div>
+        </div>
+      ) : results.length === 0 ? (
+        <div className="user-pick-results">
+          <div className="user-pick-note" role="status">
+            {q === "" ? "No ended events yet." : `No ended event matches “${q}”.`}
+          </div>
+        </div>
+      ) : (
+        <ul className="user-pick-results" aria-label="Matching events">
+          {results.map((event) => (
+            <li key={event.id}>
+              <button
+                type="button"
+                className="user-pick-row"
+                disabled={disabled}
+                onClick={() =>
+                  onChange({
+                    id: event.id,
+                    title: event.title,
+                    place: event.place,
+                    when: event.date.abs,
+                  })
+                }
+              >
+                <EventPickIcon />
+                <span className="user-pick-text">
+                  <span className="user-pick-name">{event.title}</span>
+                  <span className="user-pick-handle">
+                    {event.place} · {event.date.abs}
+                  </span>
+                </span>
+                {event.flagged && <span className="pill status-flag tight">flagged</span>}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}