feat: platform backbone and field capture, first part (checkpoint)

Platform backbone (plan 2026-10-13-plattform-rueckgrat), reviewed tasks: - run roles api/worker/job/all with shared startup checks (Task 1) - schema and migration for DomainEvent, deliveries, JobRun, ThrottlerHit (Task 2) - audit, notifications and domain events written in the same transaction (Task 3) - dispatcher with SKIP LOCKED claims, retries and stale release (Task 4) - worker building blocks: tick, LISTEN/NOTIFY wake-up, health (Task 5) - worker process and entry points (Task 6) - throttler counters in Postgres (Task 19) - separate keys per purpose with key ring (Task 20) - public origin page without exact location (Task 22) - shop keys split into read and write (Task 23) - Kustomize base, components, overlay encry, CI validation (Task 26) Field capture T3 (plan 2026-10-13-t3-erfassung-am-stand), reviewed tasks: - brood frames, read endpoints, apiary overview and offline pack - network basics, offline queue v3, navigation sheets, form building blocks - new inspection with last-time hints and weather, varroa per day, treatment prefill, apiary page with round - inspection photo (Task 10) is implemented, review pending Not rolled out. Remaining tasks follow in later commits. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
2026-10-13 17:57:54 +02:00
1 parent 10cbe9bf2d
commit c01a38835a
@@ -0,0 +1,256 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import { AlertTriangle, Camera, Clock, RotateCw } from "lucide-react";
+import { toast } from "sonner";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { NavSheet } from "@/components/nav/nav-sheet";
+import { ConfirmDialog } from "@/components/confirm-dialog";
+import { PhotoThumbnail } from "@/components/photos/photo-capture-field";
+import { Button } from "@/components/ui/button";
+import { discardQueueItem, listQueue, type QueueError, type QueueItem } from "@/lib/offline/db";
+import { entriesSynced, foreignEntriesWaiting, photosAttached } from "@/lib/offline/queue-texts";
+import { syncPendingEntries } from "@/lib/offline/sync";
+import { OFFLINE_QUEUE_QUERY_KEY } from "@/lib/offline/use-capture-mutation";
+import { listPendingPhotos, removePhoto, resetPhotoError } from "@/lib/photos/store";
+
+interface PendingQueueSheetProps {
+  userId: string;
+  /** Entries of another account on this device - shown only as a count. */
+  foreignCount: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The `SheetTrigger` that opens the sheet, or null when opened elsewhere. */
+  trigger: ReactNode;
+  /** Where focus goes on close; by default back to the trigger. */
+  finalFocus?: ComponentProps<typeof NavSheet>["finalFocus"];
+}
+
+interface Named {
+  label: string;
+  queuedAt: string;
+}
+
+const PHOTO_LABEL = "Foto";
+
+function queuedAtLabel(queuedAt: string): string {
+  return new Date(queuedAt).toLocaleString("de-DE", { dateStyle: "short", timeStyle: "short" });
+}
+
+/**
+ * „Durchsicht vom 13.10.26, 10:15:05" - a name per entry for its buttons and
+ * dialog. Seconds tell apart entries of the same minute; a running number
+ * „(2)" those queued in the same second.
+ */
+function entryNames(items: readonly Named[]): string[] {
+  const seen = new Map<string, number>();
+  return items.map((item) => {
+    const time = new Date(item.queuedAt).toLocaleString("de-DE", {
+      dateStyle: "short",
+      timeStyle: "medium",
+    });
+    const name = `${item.label} vom ${time}`;
+    const occurrence = (seen.get(name) ?? 0) + 1;
+    seen.set(name, occurrence);
+    return occurrence === 1 ? name : `${name} (${occurrence})`;
+  });
+}
+
+/** A queued inspection takes its photos along when it is discarded. */
+function discardDescription(item: QueueItem): string {
+  if (!item.photoCount) {
+    return "Der Eintrag wird von diesem Gerät gelöscht und nicht mehr gesendet.";
+  }
+  const photos = item.photoCount === 1 ? "sein Foto" : `seine ${item.photoCount} Fotos`;
+  return `Der Eintrag und ${photos} werden von diesem Gerät gelöscht und nicht mehr gesendet.`;
+}
+
+/** Rejected with the server's reason, or waiting - in words, never by colour alone. */
+function QueueStatus({ lastError }: { lastError?: QueueError }) {
+  return lastError ? (
+    <p className="flex items-start gap-2 text-sm text-destructive">
+      <AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden />
+      <span>Abgelehnt: {lastError.message}</span>
+    </p>
+  ) : (
+    <p className="flex items-start gap-2 text-sm text-muted-foreground">
+      <Clock className="mt-0.5 size-4 shrink-0" aria-hidden />
+      <span>Wartet auf Senden</span>
+    </p>
+  );
+}
+
+/**
+ * What this device still has to send for the signed-in user: each entry with
+ * its state, a rejected one with the server's reason, and a way to discard it.
+ * Photos whose inspection is already on the server are listed on their own;
+ * a rejected one can be sent again.
+ */
+export function PendingQueueSheet({
+  userId,
+  foreignCount,
+  open,
+  onOpenChange,
+  trigger,
+  finalFocus,
+}: PendingQueueSheetProps) {
+  const queryClient = useQueryClient();
+  const { data: items = [], isSuccess } = useQuery({
+    queryKey: [...OFFLINE_QUEUE_QUERY_KEY, userId, "items"],
+    queryFn: () => listQueue(userId),
+    enabled: open,
+    // Reads this device's storage, never the network.
+    networkMode: "always",
+  });
+  const { data: photos = [] } = useQuery({
+    queryKey: [...OFFLINE_QUEUE_QUERY_KEY, userId, "photos"],
+    queryFn: () => listPendingPhotos(userId),
+    enabled: open,
+    networkMode: "always",
+  });
+
+  const discard = useMutation({
+    mutationFn: (item: QueueItem) => discardQueueItem(item),
+    networkMode: "always",
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: OFFLINE_QUEUE_QUERY_KEY });
+      toast.success("Eintrag verworfen");
+    },
+    onError: () => toast.error("Eintrag konnte nicht verworfen werden."),
+  });
+
+  const discardPhoto = useMutation({
+    mutationFn: (photoId: string) => removePhoto(photoId),
+    networkMode: "always",
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: OFFLINE_QUEUE_QUERY_KEY });
+      toast.success("Foto verworfen");
+    },
+    onError: () => toast.error("Foto konnte nicht verworfen werden."),
+  });
+
+  // „Erneut senden": clear the rejection, then a normal sync run sends it.
+  const retryPhoto = useMutation({
+    mutationFn: async (photoId: string) => {
+      await resetPhotoError(photoId);
+      return syncPendingEntries(userId);
+    },
+    networkMode: "always",
+    onSuccess: (result) => {
+      if (result.synced > 0) {
+        toast.success(entriesSynced(result.synced));
+        // New files on the server: document lists may be stale now.
+        void queryClient.invalidateQueries();
+        return;
+      }
+      void queryClient.invalidateQueries({ queryKey: OFFLINE_QUEUE_QUERY_KEY });
+    },
+    onError: () => toast.error("Foto konnte nicht erneut gesendet werden."),
+  });
+
+  const names = entryNames(items);
+  const photoNames = entryNames(
+    photos.map((photo) => ({ label: PHOTO_LABEL, queuedAt: photo.createdAt })),
+  );
+
+  return (
+    <NavSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      title="Wartende Einträge"
+      finalFocus={finalFocus}
+    >
+      <div className="flex flex-col gap-3 px-4 pb-4">
+        {isSuccess && items.length === 0 && photos.length === 0 ? (
+          <p className="text-sm text-muted-foreground">Von dir wartet nichts mehr.</p>
+        ) : null}
+        <ul className="flex flex-col gap-2">
+          {items.map((item, index) => (
+            <li
+              key={`${item.store}-${item.id}`}
+              className="flex flex-col gap-2 rounded-xl border border-border/60 p-3"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="font-medium">{item.label}</p>
+                  <p className="text-sm text-muted-foreground">
+                    Erfasst am {queuedAtLabel(item.queuedAt)}
+                  </p>
+                  {item.photoCount ? (
+                    <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                      <Camera className="size-4 shrink-0" aria-hidden />
+                      {photosAttached(item.photoCount)}
+                    </p>
+                  ) : null}
+                </div>
+                <ConfirmDialog
+                  triggerLabel="Verwerfen"
+                  triggerAriaLabel={`Verwerfen: ${names[index]}`}
+                  triggerVariant="ghost"
+                  triggerSize="touch"
+                  title={`${names[index]} verwerfen?`}
+                  description={discardDescription(item)}
+                  confirmLabel="Verwerfen"
+                  onConfirm={() => discard.mutate(item)}
+                  isPending={discard.isPending}
+                />
+              </div>
+              <QueueStatus lastError={item.lastError} />
+            </li>
+          ))}
+          {photos.map((photo, index) => (
+            <li
+              key={`photo-${photo.id}`}
+              className="flex flex-col gap-2 rounded-xl border border-border/60 p-3"
+            >
+              <div className="flex items-start gap-3">
+                <PhotoThumbnail
+                  blob={photo.blob}
+                  alt=""
+                  className="size-14 shrink-0 rounded-lg border border-border/60 object-cover"
+                />
+                <div className="min-w-0">
+                  <p className="font-medium">Foto zur Durchsicht</p>
+                  <p className="text-sm text-muted-foreground">
+                    Aufgenommen am {queuedAtLabel(photo.createdAt)}
+                  </p>
+                </div>
+              </div>
+              <QueueStatus lastError={photo.lastError} />
+              <div className="flex flex-wrap gap-2">
+                {photo.lastError ? (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="touch"
+                    aria-label={`Erneut senden: ${photoNames[index]}`}
+                    disabled={retryPhoto.isPending}
+                    onClick={() => retryPhoto.mutate(photo.id)}
+                  >
+                    <RotateCw aria-hidden />
+                    Erneut senden
+                  </Button>
+                ) : null}
+                <ConfirmDialog
+                  triggerLabel="Verwerfen"
+                  triggerAriaLabel={`Verwerfen: ${photoNames[index]}`}
+                  triggerVariant="ghost"
+                  triggerSize="touch"
+                  title={`${photoNames[index]} verwerfen?`}
+                  description="Das Foto wird von diesem Gerät gelöscht und nicht mehr gesendet."
+                  confirmLabel="Verwerfen"
+                  onConfirm={() => discardPhoto.mutate(photo.id)}
+                  isPending={discardPhoto.isPending}
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+        {foreignCount > 0 ? (
+          <p className="text-sm text-muted-foreground">{foreignEntriesWaiting(foreignCount)}</p>
+        ) : null}
+      </div>
+    </NavSheet>
+  );
+}