Early 0.18 work (#22138)

* Update version

* Create scaffolding for case management (#21293)

* implement case management for export apis (#21295)

* refactor vainfo to search for first GPU (#21296)

use existing LibvaGpuSelector to pick appropritate libva device

* Case management UI (#21299)

* Refactor export cards to match existing cards in other UI pages

* Show cases separately from exports

* Add proper filtering and display of cases

* Add ability to edit and select cases for exports

* Cleanup typing

* Hide if no unassigned

* Cleanup hiding logic

* fix scrolling

* Improve layout

* Camera connection quality indicator (#21297)

* add camera connection quality metrics and indicator

* formatting

* move stall calcs to watchdog

* clean up

* change watchdog to 1s and separately track time for ffmpeg retry_interval

* implement status caching to reduce message volume

* Export filter UI (#21322)

* Get started on export filters

* implement basic filter

* Implement filtering and adjust api

* Improve filter handling

* Improve navigation

* Cleanup

* handle scrolling

* Refactor temperature reporting for detectors and implement Hailo temp reading (#21395)

* Add Hailo temperature retrieval

* Refactor `get_hailo_temps()` to use ctxmanager

* Show Hailo temps in system UI

* Move hailo_platform import to get_hailo_temps

* Refactor temperatures calculations to use within detector block

* Adjust webUI to handle new location

---------

Co-authored-by: tigattack <10629864+tigattack@users.noreply.github.com>

* Camera-specific hwaccel settings for timelapse exports (correct base) (#21386)

* added hwaccel_args to camera.record.export config struct

* populate camera.record.export.hwaccel_args with a cascade up to camera then global if 'auto'

* use new hwaccel args in export

* added documentation for camera-specific hwaccel export

* fix c/p error

* missed an import

* fleshed out the docs and comments a bit

* ruff lint

* separated out the tips in the doc

* fix documentation

* fix and simplify reference config doc

* Add support for GPU and NPU temperatures (#21495)

* Add rockchip temps

* Add support for GPU and NPU temperatures in the frontend

* Add support for Nvidia temperature

* Improve separation

* Adjust graph scaling

* Exports Improvements (#21521)

* Add images to case folder view

* Add ability to select case in export dialog

* Add to mobile review too

* Add API to handle deleting recordings  (#21520)

* Add recording delete API

* Re-organize recordings apis

* Fix import

* Consolidate query types

* Add media sync API endpoint (#21526)

* add media cleanup functions

* add endpoint

* remove scheduled sync recordings from cleanup

* move to utils dir

* tweak import

* remove sync_recordings and add config migrator

* remove sync_recordings

* docs

* remove key

* clean up docs

* docs fix

* docs tweak

* Media sync API refactor and UI (#21542)

* generic job infrastructure

* types and dispatcher changes for jobs

* save data in memory only for completed jobs

* implement media sync job and endpoints

* change logs to debug

* websocket hook and types

* frontend

* i18n

* docs tweaks

* endpoint descriptions

* tweak docs

* use same logging pattern in sync_recordings as the other sync functions (#21625)

* Fix incorrect counting in sync_recordings (#21626)

* Update go2rtc to v1.9.13 (#21648)

Co-authored-by: Eugeny Tulupov <eugeny.tulupov@spirent.com>

* Refactor Time-Lapse Export (#21668)

* refactor time lapse creation to be a separate API call with ability to pass arbitrary ffmpeg args

* Add CPU fallback

* Optimize empty directory cleanup for recordings (#21695)

The previous empty directory cleanup did a full recursive directory
walk, which can be extremely slow. This new implementation only removes
directories which have a chance of being empty due to a recent file
deletion.

* Implement llama.cpp GenAI Provider (#21690)

* Implement llama.cpp GenAI Provider

* Add docs

* Update links

* Fix broken mqtt links

* Fix more broken anchors

* Remove parents in remove_empty_directories (#21726)

The original implementation did a full directory tree walk to find and remove
empty directories, so this implementation should remove the parents as well,
like the original did.

* Implement LLM Chat API with tool calling support (#21731)

* Implement initial tools definiton APIs

* Add initial chat completion API with tool support

* Implement other providers

* Cleanup

* Offline preview image (#21752)

* use latest preview frame for latest image when camera is offline

* remove frame extraction logic

* tests

* frontend

* add description to api endpoint

* Update to ROCm 7.2.0 (#21753)

* Update to ROCm 7.2.0

* ROCm now works properly with JinaV1

* Arcface has compilation error

* Add live context tool to LLM (#21754)

* Add live context tool

* Improve handling of images in request

* Improve prompt caching

* Add networking options for configuring listening ports (#21779)

* feat: add X-Frame-Time when returning snapshot (#21932)

Co-authored-by: Florent MORICONI <170678386+fmcloudconsulting@users.noreply.github.com>

* Improve jsmpeg player websocket handling (#21943)

* improve jsmpeg player websocket handling

prevent websocket console messages from appearing when player is destroyed

* reformat files after ruff upgrade

* Allow API Events to be Detections or Alerts, depending on the Event Label (#21923)

* - API created events will be alerts OR detections, depending on the event label, defaulting to alerts
- Indefinite API events will extend the recording segment until those events are ended
- API event start time is the actual start time, instead of having a pre-buffer of record.event_pre_capture

* Instead of checking for indefinite events on a camera before deciding if we should end the segment, only update last_detection_time and last_alert_time if frame_time is greater, which should have the same effect

* Add the ability to set a pre_capture number of seconds when creating a manual event via the API. Default behavior unchanged

* Remove unnecessary _publish_segment_start() call

* Formatting

* handle last_alert_time or last_detection_time being None when checking them against the frame_time

* comment manual_info["label"].split(": ")[0] for clarity

* ffmpeg Preview Segment Optimization for "high" and "very_high" (#21996)

* Introduce qmax parameter for ffmpeg preview encoding

Added PREVIEW_QMAX_PARAM to control ffmpeg encoding quality.

* formatting

* Fix spacing in qmax parameters for preview quality

* Adapt to new Gemini format

* Fix frame time access

* Remove exceptions

* Cleanup

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Co-authored-by: tigattack <10629864+tigattack@users.noreply.github.com>
Co-authored-by: Andrew Roberts <adroberts@gmail.com>
Co-authored-by: Eugeny Tulupov <zhekka3@gmail.com>
Co-authored-by: Eugeny Tulupov <eugeny.tulupov@spirent.com>
Co-authored-by: John Shaw <1753078+johnshaw@users.noreply.github.com>
Co-authored-by: Eric Work <work.eric@gmail.com>
Co-authored-by: FL42 <46161216+fl42@users.noreply.github.com>
Co-authored-by: Florent MORICONI <170678386+fmcloudconsulting@users.noreply.github.com>
Co-authored-by: nulledy <254504350+nulledy@users.noreply.github.com>

web/src/pages/Exports.tsx

@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import ExportCard from "@/components/card/ExportCard";
+import { CaseCard, ExportCard } from "@/components/card/ExportCard";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -11,64 +11,144 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import Heading from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
+import { useHistoryBack } from "@/hooks/use-history-back";
+import { useApiFilterArgs } from "@/hooks/use-api-filter";
 import { cn } from "@/lib/utils";
-import { DeleteClipType, Export } from "@/types/export";
+import {
+  DeleteClipType,
+  Export,
+  ExportCase,
+  ExportFilter,
+} from "@/types/export";
+import OptionAndInputDialog from "@/components/overlay/dialog/OptionAndInputDialog";
 import axios from "axios";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isMobile } from "react-device-detect";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { isMobile, isMobileOnly } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 
 import { LuFolderX } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";
+import ExportFilterGroup from "@/components/filter/ExportFilterGroup";
+
+// always parse these as string arrays
+const EXPORT_FILTER_ARRAY_KEYS = ["cameras"];
 
 function Exports() {
   const { t } = useTranslation(["views/exports"]);
-  const { data: exports, mutate } = useSWR<Export[]>("exports");
 
   useEffect(() => {
     document.title = t("documentTitle");
   }, [t]);
 
+  // Filters
+
+  const [exportFilter, setExportFilter, exportSearchParams] =
+    useApiFilterArgs<ExportFilter>(EXPORT_FILTER_ARRAY_KEYS);
+
+  // Data
+
+  const { data: cases, mutate: updateCases } = useSWR<ExportCase[]>("cases");
+  const { data: rawExports, mutate: updateExports } = useSWR<Export[]>(
+    exportSearchParams && Object.keys(exportSearchParams).length > 0
+      ? ["exports", exportSearchParams]
+      : "exports",
+  );
+
+  const exportsByCase = useMemo<{ [caseId: string]: Export[] }>(() => {
+    const grouped: { [caseId: string]: Export[] } = {};
+    (rawExports ?? []).forEach((exp) => {
+      const caseId = exp.export_case || "none";
+      if (!grouped[caseId]) {
+        grouped[caseId] = [];
+      }
+
+      grouped[caseId].push(exp);
+    });
+    return grouped;
+  }, [rawExports]);
+
+  const filteredCases = useMemo<ExportCase[]>(() => {
+    if (!cases) {
+      return [];
+    }
+
+    return cases.filter((caseItem) => {
+      const caseExports = exportsByCase[caseItem.id];
+      return caseExports?.length;
+    });
+  }, [cases, exportsByCase]);
+
+  const exports = useMemo<Export[]>(
+    () => exportsByCase["none"] || [],
+    [exportsByCase],
+  );
+
+  const mutate = useCallback(() => {
+    updateExports();
+    updateCases();
+  }, [updateExports, updateCases]);
+
   // Search
 
   const [search, setSearch] = useState("");
 
-  const filteredExports = useMemo(() => {
-    if (!search || !exports) {
-      return exports;
-    }
-
-    return exports.filter((exp) =>
-      exp.name
-        .toLowerCase()
-        .replaceAll("_", " ")
-        .includes(search.toLowerCase()),
-    );
-  }, [exports, search]);
-
   // Viewing
 
   const [selected, setSelected] = useState<Export>();
+  const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
+    undefined,
+  );
   const [selectedAspect, setSelectedAspect] = useState(0.0);
 
+  // Handle browser back button to deselect case before navigating away
+  useHistoryBack({
+    enabled: true,
+    open: selectedCaseId !== undefined,
+    onClose: () => setSelectedCaseId(undefined),
+  });
+
   useSearchEffect("id", (id) => {
-    if (!exports) {
+    if (!rawExports) {
       return false;
     }
 
-    setSelected(exports.find((exp) => exp.id == id));
+    setSelected(rawExports.find((exp) => exp.id == id));
     return true;
   });
 
-  // Deleting
+  useSearchEffect("caseId", (caseId: string) => {
+    if (!filteredCases) {
+      return false;
+    }
+
+    const exists = filteredCases.some((c) => c.id === caseId);
+
+    if (!exists) {
+      return false;
+    }
+
+    setSelectedCaseId(caseId);
+    return true;
+  });
+
+  // Modifying
 
   const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
+  const [exportToAssign, setExportToAssign] = useState<Export | undefined>();
 
   const onHandleDelete = useCallback(() => {
     if (!deleteClip) {
@@ -83,8 +163,6 @@ function Exports() {
     });
   }, [deleteClip, mutate]);
 
-  // Renaming
-
   const onHandleRename = useCallback(
     (id: string, update: string) => {
       axios
@@ -107,7 +185,7 @@ function Exports() {
           });
         });
     },
-    [mutate, t],
+    [mutate, setDeleteClip, t],
   );
 
   // Keyboard Listener
@@ -115,10 +193,27 @@ function Exports() {
   const contentRef = useRef<HTMLDivElement | null>(null);
   useKeyboardListener([], undefined, contentRef);
 
+  const selectedCase = useMemo(
+    () => filteredCases?.find((c) => c.id === selectedCaseId),
+    [filteredCases, selectedCaseId],
+  );
+
+  const resetCaseDialog = useCallback(() => {
+    setExportToAssign(undefined);
+  }, []);
+
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
       <Toaster closeButton={true} />
 
+      <CaseAssignmentDialog
+        exportToAssign={exportToAssign}
+        cases={cases}
+        selectedCaseId={selectedCaseId}
+        onClose={resetCaseDialog}
+        mutate={mutate}
+      />
+
       <AlertDialog
         open={deleteClip != undefined}
         onOpenChange={() => setDeleteClip(undefined)}
@@ -187,47 +282,364 @@ function Exports() {
         </DialogContent>
       </Dialog>
 
-      {exports && (
-        <div className="flex w-full items-center justify-center p-2">
+      <div
+        className={cn(
+          "flex w-full flex-col items-start space-y-2 pr-2 md:mb-2 lg:relative lg:h-10 lg:flex-row lg:items-center lg:space-y-0",
+          isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
+        )}
+      >
+        <div className="w-full">
           <Input
-            className="text-md w-full bg-muted md:w-1/3"
+            className="text-md w-full bg-muted md:w-1/2"
             placeholder={t("search")}
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
         </div>
-      )}
+        <ExportFilterGroup
+          className="w-full justify-between md:justify-start lg:justify-end"
+          filter={exportFilter}
+          filters={["cameras"]}
+          onUpdateFilter={setExportFilter}
+        />
+      </div>
 
-      <div className="w-full overflow-hidden">
-        {exports && filteredExports && filteredExports.length > 0 ? (
-          <div
-            ref={contentRef}
-            className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-          >
-            {Object.values(exports).map((item) => (
-              <ExportCard
-                key={item.id}
-                className={
-                  search == "" || filteredExports.includes(item) ? "" : "hidden"
-                }
-                exportedRecording={item}
-                onSelect={setSelected}
-                onRename={onHandleRename}
-                onDelete={({ file, exportName }) =>
-                  setDeleteClip({ file, exportName })
-                }
-              />
-            ))}
-          </div>
-        ) : exports !== undefined ? (
-          <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
-            <LuFolderX className="size-16" />
-            {t("noExports")}
-          </div>
-        ) : null}
+      {selectedCase ? (
+        <CaseView
+          contentRef={contentRef}
+          selectedCase={selectedCase}
+          exports={exportsByCase[selectedCase.id] || []}
+          search={search}
+          setSelected={setSelected}
+          renameClip={onHandleRename}
+          setDeleteClip={setDeleteClip}
+          onAssignToCase={setExportToAssign}
+        />
+      ) : (
+        <AllExportsView
+          contentRef={contentRef}
+          search={search}
+          cases={filteredCases}
+          exports={exports}
+          exportsByCase={exportsByCase}
+          setSelectedCaseId={setSelectedCaseId}
+          setSelected={setSelected}
+          renameClip={onHandleRename}
+          setDeleteClip={setDeleteClip}
+          onAssignToCase={setExportToAssign}
+        />
+      )}
+    </div>
+  );
+}
+
+type AllExportsViewProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  search: string;
+  cases?: ExportCase[];
+  exports: Export[];
+  exportsByCase: { [caseId: string]: Export[] };
+  setSelectedCaseId: (id: string) => void;
+  setSelected: (e: Export) => void;
+  renameClip: (id: string, update: string) => void;
+  setDeleteClip: (d: DeleteClipType | undefined) => void;
+  onAssignToCase: (e: Export) => void;
+};
+function AllExportsView({
+  contentRef,
+  search,
+  cases,
+  exports,
+  exportsByCase,
+  setSelectedCaseId,
+  setSelected,
+  renameClip,
+  setDeleteClip,
+  onAssignToCase,
+}: AllExportsViewProps) {
+  const { t } = useTranslation(["views/exports"]);
+
+  // Filter
+
+  const filteredCases = useMemo(() => {
+    if (!search || !cases) {
+      return cases || [];
+    }
+
+    return cases.filter(
+      (caseItem) =>
+        caseItem.name.toLowerCase().includes(search.toLowerCase()) ||
+        (caseItem.description &&
+          caseItem.description.toLowerCase().includes(search.toLowerCase())),
+    );
+  }, [search, cases]);
+
+  const filteredExports = useMemo<Export[]>(() => {
+    if (!search) {
+      return exports;
+    }
+
+    return exports.filter((exp) =>
+      exp.name
+        .toLowerCase()
+        .replaceAll("_", " ")
+        .includes(search.toLowerCase()),
+    );
+  }, [exports, search]);
+
+  return (
+    <div className="w-full overflow-hidden">
+      {filteredCases?.length || filteredExports.length ? (
+        <div
+          ref={contentRef}
+          className="scrollbar-container flex size-full flex-col gap-4 overflow-y-auto"
+        >
+          {filteredCases.length > 0 && (
+            <div className="space-y-2">
+              <Heading as="h4">{t("headings.cases")}</Heading>
+              <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {cases?.map((item) => (
+                  <CaseCard
+                    key={item.id}
+                    className={
+                      search == "" || filteredCases?.includes(item)
+                        ? ""
+                        : "hidden"
+                    }
+                    exportCase={item}
+                    exports={exportsByCase[item.id] || []}
+                    onSelect={() => {
+                      setSelectedCaseId(item.id);
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {filteredExports.length > 0 && (
+            <div className="space-y-4">
+              <Heading as="h4">{t("headings.uncategorizedExports")}</Heading>
+              <div
+                ref={contentRef}
+                className="scrollbar-container grid gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+              >
+                {exports.map((item) => (
+                  <ExportCard
+                    key={item.name}
+                    className={
+                      search == "" || filteredExports.includes(item)
+                        ? ""
+                        : "hidden"
+                    }
+                    exportedRecording={item}
+                    onSelect={setSelected}
+                    onRename={renameClip}
+                    onDelete={({ file, exportName }) =>
+                      setDeleteClip({ file, exportName })
+                    }
+                    onAssignToCase={onAssignToCase}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
+          <LuFolderX className="size-16" />
+          {t("noExports")}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type CaseViewProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  selectedCase: ExportCase;
+  exports?: Export[];
+  search: string;
+  setSelected: (e: Export) => void;
+  renameClip: (id: string, update: string) => void;
+  setDeleteClip: (d: DeleteClipType | undefined) => void;
+  onAssignToCase: (e: Export) => void;
+};
+function CaseView({
+  contentRef,
+  selectedCase,
+  exports,
+  search,
+  setSelected,
+  renameClip,
+  setDeleteClip,
+  onAssignToCase,
+}: CaseViewProps) {
+  const filteredExports = useMemo<Export[]>(() => {
+    const caseExports = (exports || []).filter(
+      (e) => e.export_case == selectedCase.id,
+    );
+
+    if (!search) {
+      return caseExports;
+    }
+
+    return caseExports.filter((exp) =>
+      exp.name
+        .toLowerCase()
+        .replaceAll("_", " ")
+        .includes(search.toLowerCase()),
+    );
+  }, [selectedCase, exports, search]);
+
+  return (
+    <div className="flex size-full flex-col gap-8 overflow-hidden">
+      <div className="flex shrink-0 flex-col gap-1">
+        <Heading className="capitalize" as="h2">
+          {selectedCase.name}
+        </Heading>
+        <div className="text-secondary-foreground">
+          {selectedCase.description}
+        </div>
+      </div>
+      <div
+        ref={contentRef}
+        className="scrollbar-container grid min-h-0 flex-1 content-start gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+      >
+        {exports?.map((item) => (
+          <ExportCard
+            key={item.name}
+            className={filteredExports.includes(item) ? "" : "hidden"}
+            exportedRecording={item}
+            onSelect={setSelected}
+            onRename={renameClip}
+            onDelete={({ file, exportName }) =>
+              setDeleteClip({ file, exportName })
+            }
+            onAssignToCase={onAssignToCase}
+          />
+        ))}
       </div>
     </div>
   );
 }
 
-export default Exports;
+type CaseAssignmentDialogProps = {
+  exportToAssign?: Export;
+  cases?: ExportCase[];
+  selectedCaseId?: string;
+  onClose: () => void;
+  mutate: () => void;
+};
+function CaseAssignmentDialog({
+  exportToAssign,
+  cases,
+  selectedCaseId,
+  onClose,
+  mutate,
+}: CaseAssignmentDialogProps) {
+  const { t } = useTranslation(["views/exports"]);
+  const caseOptions = useMemo(
+    () => [
+      ...(cases ?? [])
+        .map((c) => ({
+          value: c.id,
+          label: c.name,
+        }))
+        .sort((cA, cB) => cA.label.localeCompare(cB.label)),
+      {
+        value: "new",
+        label: t("caseDialog.newCaseOption"),
+      },
+    ],
+    [cases, t],
+  );
+
+  const handleSave = useCallback(
+    async (caseId: string) => {
+      if (!exportToAssign) return;
+
+      try {
+        await axios.patch(`export/${exportToAssign.id}/case`, {
+          export_case_id: caseId,
+        });
+        mutate();
+        onClose();
+      } catch (error: unknown) {
+        const apiError = error as {
+          response?: { data?: { message?: string; detail?: string } };
+        };
+        const errorMessage =
+          apiError.response?.data?.message ||
+          apiError.response?.data?.detail ||
+          "Unknown error";
+        toast.error(t("toast.error.assignCaseFailed", { errorMessage }), {
+          position: "top-center",
+        });
+      }
+    },
+    [exportToAssign, mutate, onClose, t],
+  );
+
+  const handleCreateNew = useCallback(
+    async (name: string, description: string) => {
+      if (!exportToAssign) return;
+
+      try {
+        const createResp = await axios.post("cases", {
+          name,
+          description,
+        });
+
+        const newCaseId: string | undefined = createResp.data?.id;
+
+        if (newCaseId) {
+          await axios.patch(`export/${exportToAssign.id}/case`, {
+            export_case_id: newCaseId,
+          });
+        }
+
+        mutate();
+        onClose();
+      } catch (error: unknown) {
+        const apiError = error as {
+          response?: { data?: { message?: string; detail?: string } };
+        };
+        const errorMessage =
+          apiError.response?.data?.message ||
+          apiError.response?.data?.detail ||
+          "Unknown error";
+        toast.error(t("toast.error.assignCaseFailed", { errorMessage }), {
+          position: "top-center",
+        });
+      }
+    },
+    [exportToAssign, mutate, onClose, t],
+  );
+
+  if (!exportToAssign) {
+    return null;
+  }
+
+  return (
+    <OptionAndInputDialog
+      open={!!exportToAssign}
+      title={t("caseDialog.title")}
+      description={t("caseDialog.description")}
+      setOpen={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+      options={caseOptions}
+      nameLabel={t("caseDialog.nameLabel")}
+      descriptionLabel={t("caseDialog.descriptionLabel")}
+      initialValue={selectedCaseId}
+      newValueKey="new"
+      onSave={handleSave}
+      onCreateNew={handleCreateNew}
+    />
+  );
+}
+
+export default Exports;