@open-mercato/core 0.10.1-develop.7717.1.2befe9c634 → 0.10.1-develop.7721.1.b5c4a00a68

package/dist/modules/staff/widgets/injection/time-tracking-settings-support/widget.client.js

@@ -0,0 +1,870 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { Pencil, Plus, Save, Trash2 } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@open-mercato/ui/primitives/dialog";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
+import { apiCall, readApiResultOrThrow, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { createCrud, deleteCrud, updateCrud } from "@open-mercato/ui/backend/utils/crud";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { surfaceRecordConflict } from "@open-mercato/ui/backend/conflicts";
+import { raiseCrudError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@open-mercato/ui/primitives/select";
+import { ComboboxInput } from "@open-mercato/ui/backend/inputs/ComboboxInput";
+import { useBackendChrome } from "@open-mercato/ui/backend/BackendChromeProvider";
+import { hasFeature } from "@open-mercato/shared/security/features";
+import { StatusBadge } from "@open-mercato/ui/primitives/status-badge";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@open-mercato/ui/primitives/table";
+import { useOrganizationScopeVersion } from "@open-mercato/shared/lib/frontend/useOrganizationScope";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { ICON_SUGGESTIONS } from "@open-mercato/core/modules/dictionaries/components/dictionaryAppearance";
+import {
+  DictionaryForm
+} from "@open-mercato/core/modules/dictionaries/components/DictionaryForm";
+import {
+  DictionaryTable
+} from "@open-mercato/core/modules/dictionaries/components/DictionaryTable";
+import { DEFAULT_SUPPORT_REFERENCE_PREFIX } from "../../../lib/time-tracking/settingKeys.js";
+import {
+  buildRoutingRuleEditDraft,
+  rebaseRoutingRuleDialog,
+  routingRuleVersion
+} from "../../../lib/support/routingRuleDraft.js";
+const CATEGORY_DICTIONARY_KEY = "staff.support_ticket_category";
+const ROUTING_API = "staff/timesheets/support-routing-rules";
+const PREVIEW_URL = "/api/staff/timesheets/support-routing-rules/preview";
+const FALLBACK_PROJECT_URL = "/api/staff/timesheets/support-routing-rules/fallback-project";
+const PROJECTS_URL = "/api/staff/timesheets/time-projects";
+const SETTINGS_URL = "/api/staff/timesheets/settings";
+const UNNOTIFIED_INBOX_URL = "/backend/staff/time-tracking/support?supportUnnotified=true";
+const SAVE_CONTEXT_ID = "staff.support.settings";
+const DICTIONARIES_VIEW_FEATURE = "dictionaries.view";
+const DICTIONARIES_MANAGE_FEATURE = "dictionaries.manage";
+const PROJECT_SEARCH_PAGE_SIZE = 20;
+const PREFIX_PATTERN = /^[A-Z][A-Z0-9]{1,9}$/;
+const EMPTY_PREVIEW = { fallback: null, rules: [], categories: [] };
+const DEFAULT_CATEGORY_VALUES = {
+  value: "",
+  label: "",
+  color: null,
+  icon: null
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function toStringOrNull(value) {
+  return typeof value === "string" && value.length > 0 ? value : null;
+}
+function normalizeEntry(item) {
+  if (!isRecord(item)) return null;
+  const id = toStringOrNull(item.id);
+  const value = toStringOrNull(item.value);
+  if (!id || !value) return null;
+  return {
+    id,
+    value,
+    label: toStringOrNull(item.label) ?? value,
+    color: toStringOrNull(item.color),
+    icon: toStringOrNull(item.icon),
+    organizationId: toStringOrNull(item.organizationId),
+    tenantId: toStringOrNull(item.tenantId),
+    isInherited: item.isInherited === true,
+    createdAt: toStringOrNull(item.createdAt),
+    updatedAt: toStringOrNull(item.updatedAt)
+  };
+}
+function normalizeProject(item) {
+  if (!isRecord(item)) return null;
+  const id = toStringOrNull(item.id);
+  if (!id) return null;
+  return { id, name: toStringOrNull(item.name) ?? id, code: toStringOrNull(item.code) };
+}
+function projectLabel(project) {
+  const name = project.name ?? project.id;
+  return project.code ? `${name} (${project.code})` : name;
+}
+async function searchProjects(query) {
+  const params = new URLSearchParams({
+    page: "1",
+    pageSize: String(PROJECT_SEARCH_PAGE_SIZE),
+    sortField: "name",
+    sortDir: "asc"
+  });
+  const term = query?.trim() ?? "";
+  if (term) params.set("q", term);
+  try {
+    const call = await apiCall(`${PROJECTS_URL}?${params.toString()}`);
+    if (!call.ok) return [];
+    return (call.result?.items ?? []).map(normalizeProject).filter((project) => project !== null).map((project) => ({ value: project.id, label: projectLabel(project) }));
+  } catch {
+    return [];
+  }
+}
+function SupportProjectPicker({ labelId, value, knownProjects, placeholder, disabled, testId, onChange }) {
+  const seedOptions = React.useMemo(
+    () => knownProjects.map((project) => ({ value: project.id, label: projectLabel(project) })),
+    [knownProjects]
+  );
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": labelId, "data-testid": testId, children: /* @__PURE__ */ jsx(
+    ComboboxInput,
+    {
+      value,
+      onChange: (next) => {
+        if (next && next !== value) onChange(next);
+      },
+      seedOptions,
+      loadSuggestions: searchProjects,
+      allowCustomValues: false,
+      placeholder,
+      disabled
+    }
+  ) });
+}
+function SupportSettingsTab({ context }) {
+  const t = useT();
+  const locale = useLocale();
+  const unnotifiedTicketsLabel = React.useCallback(
+    (count) => {
+      let category;
+      try {
+        category = new Intl.PluralRules(locale).select(count);
+      } catch {
+        category = count === 1 ? "one" : "other";
+      }
+      if (category === "one") return t("staff.support.settings.routing.unnotifiedTickets.one", "{count} ticket was not notified to anyone.", { count });
+      if (category === "few") return t("staff.support.settings.routing.unnotifiedTickets.few", "{count} tickets were not notified to anyone.", { count });
+      if (category === "many") return t("staff.support.settings.routing.unnotifiedTickets.many", "{count} tickets were not notified to anyone.", { count });
+      return t("staff.support.settings.routing.unnotifiedTickets.other", "{count} tickets were not notified to anyone.", { count });
+    },
+    [locale, t]
+  );
+  const scopeVersion = useOrganizationScopeVersion();
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const { payload: chromePayload, isReady: chromeReady } = useBackendChrome();
+  const grantedFeatures = chromePayload?.grantedFeatures;
+  const canManageSettings = context.canManage;
+  const canViewCategories = hasFeature(grantedFeatures, DICTIONARIES_VIEW_FEATURE);
+  const canManageCategories = canManageSettings && hasFeature(grantedFeatures, DICTIONARIES_MANAGE_FEATURE);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: SAVE_CONTEXT_ID,
+    blockedMessage: t("staff.support.settings.errors.saveBlocked", "Save blocked by validation")
+  });
+  const routingContext = React.useMemo(() => ({
+    formId: SAVE_CONTEXT_ID,
+    resourceKind: "staff.support.routing_rule",
+    retryLastMutation
+  }), [retryLastMutation]);
+  const categoryContext = React.useMemo(() => ({
+    formId: SAVE_CONTEXT_ID,
+    resourceKind: "staff.support.categories",
+    retryLastMutation
+  }), [retryLastMutation]);
+  const settingsContext = React.useMemo(() => ({
+    formId: SAVE_CONTEXT_ID,
+    resourceKind: "staff.timesheets.settings",
+    retryLastMutation
+  }), [retryLastMutation]);
+  const [categoryEntries, setCategoryEntries] = React.useState([]);
+  const [dictionaryId, setDictionaryId] = React.useState(null);
+  const [categoriesLoading, setCategoriesLoading] = React.useState(true);
+  const [categoriesError, setCategoriesError] = React.useState(null);
+  const [categoryDialog, setCategoryDialog] = React.useState(null);
+  const [categorySubmitting, setCategorySubmitting] = React.useState(false);
+  const [preview, setPreview] = React.useState(EMPTY_PREVIEW);
+  const [routingLoading, setRoutingLoading] = React.useState(true);
+  const [routingError, setRoutingError] = React.useState(null);
+  const [ruleDialog, setRuleDialog] = React.useState(null);
+  const [ruleSubmitting, setRuleSubmitting] = React.useState(false);
+  const [creatingFallback, setCreatingFallback] = React.useState(false);
+  const { settings, onSettingsSaved } = context;
+  const savedPrefix = settings.support?.referencePrefix ?? DEFAULT_SUPPORT_REFERENCE_PREFIX;
+  const [prefix, setPrefix] = React.useState(savedPrefix);
+  const [prefixError, setPrefixError] = React.useState(null);
+  const [prefixSaving, setPrefixSaving] = React.useState(false);
+  const loadCategories = React.useCallback(async () => {
+    if (!chromeReady) return;
+    if (!canViewCategories) {
+      setCategoryEntries([]);
+      setDictionaryId(null);
+      setCategoriesError(null);
+      setCategoriesLoading(false);
+      return;
+    }
+    setCategoriesLoading(true);
+    setCategoriesError(null);
+    try {
+      const dictionaries = await readApiResultOrThrow(
+        "/api/dictionaries",
+        void 0,
+        { fallback: { items: [] }, errorMessage: t("staff.support.settings.errors.load", "Failed to load support settings.") }
+      );
+      const dictionary = (dictionaries.items ?? []).find((item) => item.key === CATEGORY_DICTIONARY_KEY);
+      const id = dictionary?.id ?? null;
+      setDictionaryId(id);
+      if (!id) {
+        setCategoryEntries([]);
+        return;
+      }
+      const entries = await readApiResultOrThrow(
+        `/api/dictionaries/${encodeURIComponent(id)}/entries`,
+        void 0,
+        { fallback: { items: [] }, errorMessage: t("staff.support.settings.errors.load", "Failed to load support settings.") }
+      );
+      setCategoryEntries(
+        (entries.items ?? []).map(normalizeEntry).filter((entry) => entry !== null)
+      );
+    } catch (err) {
+      setCategoriesError(err instanceof Error ? err.message : t("staff.support.settings.errors.load", "Failed to load support settings."));
+    } finally {
+      setCategoriesLoading(false);
+    }
+  }, [canViewCategories, chromeReady, t]);
+  const loadRouting = React.useCallback(async () => {
+    setRoutingLoading(true);
+    setRoutingError(null);
+    try {
+      const errorMessage = t("staff.support.settings.errors.load", "Failed to load support settings.");
+      const previewResult = await readApiResultOrThrow(PREVIEW_URL, void 0, { fallback: EMPTY_PREVIEW, errorMessage }) ?? EMPTY_PREVIEW;
+      setPreview(previewResult);
+      setRuleDialog((current) => rebaseRoutingRuleDialog(current, previewResult));
+    } catch (err) {
+      setRoutingError(err instanceof Error ? err.message : t("staff.support.settings.errors.load", "Failed to load support settings."));
+    } finally {
+      setRoutingLoading(false);
+    }
+  }, [t]);
+  React.useEffect(() => {
+    setPrefix(savedPrefix);
+  }, [savedPrefix]);
+  React.useEffect(() => {
+    void loadCategories();
+  }, [loadCategories, scopeVersion]);
+  React.useEffect(() => {
+    void loadRouting();
+  }, [loadRouting, scopeVersion]);
+  const reloadAll = React.useCallback(async () => {
+    await Promise.all([loadCategories(), loadRouting()]);
+  }, [loadCategories, loadRouting]);
+  const surfaceMutationError = React.useCallback((err, fallbackKey, fallback, onRefresh) => {
+    if (surfaceRecordConflict(err, t, onRefresh ? { onRefresh } : void 0)) return;
+    flash(err instanceof Error ? err.message : t(fallbackKey, fallback), "error");
+  }, [t]);
+  const submitCategory = React.useCallback(async (values) => {
+    if (!categoryDialog || !dictionaryId || categorySubmitting) return;
+    setCategorySubmitting(true);
+    try {
+      if (categoryDialog.mode === "create") {
+        await runMutation({
+          operation: async () => {
+            const call = await apiCall(`/api/dictionaries/${encodeURIComponent(dictionaryId)}/entries`, {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify(values)
+            });
+            if (!call.ok) await raiseCrudError(call.response, t("staff.support.settings.errors.save", "Failed to save."));
+            return call;
+          },
+          context: categoryContext,
+          mutationPayload: { action: "create", ...values }
+        });
+      } else {
+        const entry = categoryDialog.entry;
+        const payload = {};
+        if (values.value !== entry.value) payload.value = values.value;
+        if (values.label !== entry.label) payload.label = values.label;
+        if ((values.color ?? null) !== (entry.color ?? null)) payload.color = values.color ?? null;
+        if ((values.icon ?? null) !== (entry.icon ?? null)) payload.icon = values.icon ?? null;
+        await runMutation({
+          operation: async () => {
+            const call = await withScopedApiRequestHeaders(
+              buildOptimisticLockHeader(entry.updatedAt),
+              () => apiCall(`/api/dictionaries/${encodeURIComponent(dictionaryId)}/entries/${encodeURIComponent(entry.id)}`, {
+                method: "PATCH",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(payload)
+              })
+            );
+            if (!call.ok) await raiseCrudError(call.response, t("staff.support.settings.errors.save", "Failed to save."));
+            return call;
+          },
+          context: categoryContext,
+          mutationPayload: { action: "update", id: entry.id, ...payload }
+        });
+      }
+      flash(t("staff.support.settings.categories.saved", "Category saved."), "success");
+      setCategoryDialog(null);
+      await reloadAll();
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.save", "Failed to save.", () => {
+        void loadCategories();
+      });
+    } finally {
+      setCategorySubmitting(false);
+    }
+  }, [categoryContext, categoryDialog, categorySubmitting, dictionaryId, loadCategories, reloadAll, surfaceMutationError, runMutation, t]);
+  const deleteCategory = React.useCallback(async (entry) => {
+    if (!dictionaryId) return;
+    const confirmed = await confirm({
+      title: t("staff.support.settings.categories.confirmDelete", 'Delete category "{value}"?', { value: entry.label || entry.value }),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    try {
+      await runMutation({
+        operation: async () => {
+          const call = await withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(entry.updatedAt),
+            () => apiCall(`/api/dictionaries/${encodeURIComponent(dictionaryId)}/entries/${encodeURIComponent(entry.id)}`, {
+              method: "DELETE"
+            })
+          );
+          if (!call.ok) await raiseCrudError(call.response, t("staff.support.settings.errors.delete", "Failed to delete."));
+          return call;
+        },
+        context: categoryContext,
+        mutationPayload: { action: "delete", id: entry.id }
+      });
+      flash(t("staff.support.settings.categories.deleted", "Category deleted."), "success");
+      await reloadAll();
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.delete", "Failed to delete.", () => {
+        void loadCategories();
+      });
+    }
+  }, [categoryContext, confirm, dictionaryId, loadCategories, reloadAll, surfaceMutationError, runMutation, t]);
+  const createFallbackProject = React.useCallback(async () => {
+    setCreatingFallback(true);
+    try {
+      await runMutation({
+        operation: async () => {
+          const call = await apiCall(FALLBACK_PROJECT_URL, { method: "POST" });
+          if (!call.ok) await raiseCrudError(call.response, t("staff.support.settings.errors.save", "Failed to save."));
+          return call;
+        },
+        context: routingContext,
+        mutationPayload: { action: "create_fallback_project" }
+      });
+      flash(t("staff.support.settings.routing.fallbackCreated", "Fallback project created."), "success");
+      await loadRouting();
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.save", "Failed to save.");
+    } finally {
+      setCreatingFallback(false);
+    }
+  }, [loadRouting, surfaceMutationError, routingContext, runMutation, t]);
+  const updateRule = React.useCallback(async (ruleId, expectedUpdatedAt, patch) => {
+    try {
+      await runMutation({
+        operation: () => updateCrud(ROUTING_API, { id: ruleId, ...patch }, {
+          headers: buildOptimisticLockHeader(expectedUpdatedAt),
+          errorMessage: t("staff.support.settings.errors.save", "Failed to save.")
+        }),
+        context: routingContext,
+        mutationPayload: { action: "update", id: ruleId, ...patch }
+      });
+      flash(t("staff.support.settings.routing.saved", "Routing saved."), "success");
+      await loadRouting();
+      return true;
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.save", "Failed to save.", () => {
+        void loadRouting();
+      });
+      return false;
+    }
+  }, [loadRouting, surfaceMutationError, routingContext, runMutation, t]);
+  const deleteRule = React.useCallback(async (rule) => {
+    const confirmed = await confirm({
+      title: t("staff.support.settings.routing.confirmDelete", "Delete this rule? The category will use the fallback project."),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    try {
+      await runMutation({
+        operation: () => deleteCrud(ROUTING_API, rule.id, {
+          headers: buildOptimisticLockHeader(routingRuleVersion(rule)),
+          errorMessage: t("staff.support.settings.errors.delete", "Failed to delete.")
+        }),
+        context: routingContext,
+        mutationPayload: { action: "delete", id: rule.id }
+      });
+      flash(t("staff.support.settings.routing.deleted", "Rule deleted."), "success");
+      await loadRouting();
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.delete", "Failed to delete.", () => {
+        void loadRouting();
+      });
+    }
+  }, [confirm, loadRouting, surfaceMutationError, routingContext, runMutation, t]);
+  const submitRuleDialog = React.useCallback(async () => {
+    if (!ruleDialog || !ruleDialog.timeProjectId || ruleSubmitting) return;
+    if (ruleDialog.mode === "create" && !ruleDialog.categoryValue) return;
+    setRuleSubmitting(true);
+    try {
+      if (ruleDialog.mode === "create") {
+        await runMutation({
+          operation: () => createCrud(ROUTING_API, {
+            categoryValue: ruleDialog.categoryValue,
+            timeProjectId: ruleDialog.timeProjectId
+          }, { errorMessage: t("staff.support.settings.errors.save", "Failed to save.") }),
+          context: routingContext,
+          mutationPayload: { action: "create", categoryValue: ruleDialog.categoryValue, timeProjectId: ruleDialog.timeProjectId }
+        });
+        flash(t("staff.support.settings.routing.saved", "Routing saved."), "success");
+        setRuleDialog(null);
+        await loadRouting();
+      } else {
+        const ok = await updateRule(ruleDialog.ruleId, ruleDialog.expectedUpdatedAt, { timeProjectId: ruleDialog.timeProjectId });
+        if (ok) setRuleDialog(null);
+      }
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.save", "Failed to save.", () => {
+        void loadRouting();
+      });
+    } finally {
+      setRuleSubmitting(false);
+    }
+  }, [loadRouting, surfaceMutationError, routingContext, ruleDialog, ruleSubmitting, runMutation, t, updateRule]);
+  const savePrefix = React.useCallback(async () => {
+    const value = prefix.trim().toUpperCase();
+    if (!PREFIX_PATTERN.test(value)) {
+      setPrefixError(t("staff.support.settings.prefix.invalid", "Use 2\u201310 uppercase letters or digits, starting with a letter."));
+      return;
+    }
+    setPrefixError(null);
+    setPrefixSaving(true);
+    try {
+      const next = { ...settings, support: { ...settings.support ?? {}, referencePrefix: value } };
+      const call = await runMutation({
+        operation: async () => {
+          const call2 = await apiCall(SETTINGS_URL, {
+            method: "PUT",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(next)
+          });
+          if (!call2.ok) await raiseCrudError(call2.response, t("staff.support.settings.errors.save", "Failed to save."));
+          return call2;
+        },
+        context: settingsContext,
+        mutationPayload: { support: { referencePrefix: value } }
+      });
+      if (call.result) onSettingsSaved(call.result);
+      flash(t("staff.support.settings.prefix.saved", "Reference prefix saved."), "success");
+    } catch (err) {
+      surfaceMutationError(err, "staff.support.settings.errors.save", "Failed to save.");
+    } finally {
+      setPrefixSaving(false);
+    }
+  }, [onSettingsSaved, prefix, surfaceMutationError, runMutation, settings, settingsContext, t]);
+  const categoryLabels = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const category of preview.categories) map.set(category.value, category.label);
+    for (const entry of categoryEntries) if (!map.has(entry.value)) map.set(entry.value, entry.label);
+    return map;
+  }, [categoryEntries, preview.categories]);
+  const overrides = React.useMemo(() => preview.rules.filter((rule) => !rule.isFallback), [preview.rules]);
+  const categoriesWithoutRule = React.useMemo(() => {
+    const ruled = new Set(overrides.map((rule) => rule.categoryValue));
+    return preview.categories.filter((category) => !ruled.has(category.value));
+  }, [overrides, preview.categories]);
+  const fallbackName = preview.fallback ? projectLabel(preview.fallback.project) : "";
+  const knownProjects = React.useMemo(() => {
+    const byId = /* @__PURE__ */ new Map();
+    const remember = (project) => {
+      if (!byId.has(project.id)) byId.set(project.id, { id: project.id, name: project.name ?? project.id, code: project.code });
+    };
+    if (preview.fallback) remember(preview.fallback.project);
+    for (const rule of preview.rules) remember(rule.project);
+    for (const category of preview.categories) if (category.route) remember(category.route.project);
+    return [...byId.values()];
+  }, [preview]);
+  const problemText = (problem) => {
+    if (problem === "paused") return t("staff.support.settings.routing.problem.paused", "The rule is paused.");
+    if (problem === "category_missing") return t("staff.support.settings.routing.problem.categoryMissing", "The category no longer exists.");
+    return t("staff.support.settings.routing.problem.projectUnusable", "The project is completed, deleted, or has no default status.");
+  };
+  const nobodyNotifiedText = t(
+    "staff.support.settings.routing.nobodyNotified",
+    "No one in this project will be notified about tickets routed here: it has no active assigner, no usable default assignee and no owner. New tickets go to the organization's project managers instead."
+  );
+  const unnotifiedTicketCount = typeof preview.unnotifiedTicketCount === "number" ? preview.unnotifiedTicketCount : 0;
+  const tableTranslations = React.useMemo(() => ({
+    title: t("staff.support.settings.categories.title", "Categories"),
+    valueColumn: t("staff.support.settings.categories.value", "Value"),
+    labelColumn: t("staff.support.settings.categories.label", "Label"),
+    appearanceColumn: t("staff.support.settings.categories.appearance", "Appearance"),
+    addLabel: t("staff.support.settings.categories.add", "Add category"),
+    editLabel: t("staff.support.settings.actions.edit", "Edit"),
+    deleteLabel: t("staff.support.settings.actions.delete", "Delete"),
+    refreshLabel: t("staff.support.settings.actions.refresh", "Refresh"),
+    inheritedLabel: t("staff.support.settings.categories.inherited", "Inherited"),
+    inheritedTooltip: t("staff.support.settings.categories.inheritedTooltip", "Defined by a parent organization."),
+    emptyLabel: t("staff.support.settings.categories.empty", "No categories yet."),
+    searchPlaceholder: t("staff.support.settings.categories.search", "Search categories")
+  }), [t]);
+  const categoryFormValues = React.useMemo(() => {
+    if (categoryDialog?.mode === "edit") {
+      return {
+        value: categoryDialog.entry.value,
+        label: categoryDialog.entry.label,
+        color: categoryDialog.entry.color,
+        icon: categoryDialog.entry.icon
+      };
+    }
+    return DEFAULT_CATEGORY_VALUES;
+  }, [categoryDialog]);
+  const categoryDialogTitle = categoryDialog?.mode === "edit" ? t("staff.support.settings.categories.editTitle", "Edit category") : t("staff.support.settings.categories.createTitle", "Add category");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.description", "Configure support ticket categories, where each category is routed, and the ticket reference prefix.") }),
+      /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-border bg-card text-card-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border px-6 py-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t("staff.support.settings.categories.title", "Categories") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.categories.description", "Categories customers pick when they file a ticket in the portal.") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-4 sm:px-4", children: chromeReady && !canViewCategories ? /* @__PURE__ */ jsx(Alert, { status: "information", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("staff.support.settings.categories.noAccess", "You do not have permission to view the support categories.") }) }) : categoriesError ? /* @__PURE__ */ jsx(
+          ErrorMessage,
+          {
+            label: categoriesError,
+            action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => {
+              void loadCategories();
+            }, children: t("staff.support.settings.actions.retry", "Try again") })
+          }
+        ) : !categoriesLoading && !dictionaryId ? /* @__PURE__ */ jsx(Alert, { status: "warning", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("staff.support.settings.categories.missingDictionary", "The support categories dictionary has not been seeded for this organization yet.") }) }) : /* @__PURE__ */ jsx(
+          DictionaryTable,
+          {
+            entries: categoryEntries,
+            loading: categoriesLoading,
+            canManage: canManageCategories,
+            onCreate: () => setCategoryDialog({ mode: "create" }),
+            onEdit: (entry) => setCategoryDialog({ mode: "edit", entry: categoryEntries.find((row) => row.id === entry.id) ?? entry }),
+            onDelete: (entry) => {
+              void deleteCategory(categoryEntries.find((row) => row.id === entry.id) ?? entry);
+            },
+            onRefresh: () => {
+              void loadCategories();
+            },
+            translations: tableTranslations
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-border bg-card text-card-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border px-6 py-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t("staff.support.settings.routing.title", "Routing") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.routing.description", "Every category without a working rule goes to the fallback project. Add a rule to send a category to its own project.") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-6 px-6 py-4", children: routingLoading ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("staff.support.settings.routing.loading", "Loading routing\u2026") }) : routingError ? /* @__PURE__ */ jsx(
+          ErrorMessage,
+          {
+            label: routingError,
+            action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => {
+              void loadRouting();
+            }, children: t("staff.support.settings.actions.retry", "Try again") })
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          unnotifiedTicketCount > 0 ? /* @__PURE__ */ jsx(Alert, { status: "warning", "data-testid": "support-unnotified-tickets", children: /* @__PURE__ */ jsxs(AlertDescription, { children: [
+            unnotifiedTicketsLabel(unnotifiedTicketCount),
+            " ",
+            /* @__PURE__ */ jsx(Link, { className: "font-medium underline", href: UNNOTIFIED_INBOX_URL, children: t("staff.support.settings.routing.unnotifiedTicketsLink", "Open them in the Support Inbox") })
+          ] }) }) : null,
+          !preview.fallback ? /* @__PURE__ */ jsxs(
+            Alert,
+            {
+              status: "warning",
+              footer: /* @__PURE__ */ jsxs(Button, { type: "button", onClick: () => {
+                void createFallbackProject();
+              }, disabled: creatingFallback || !canManageSettings, children: [
+                /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+                t("staff.support.settings.routing.createFallback", "Create fallback project")
+              ] }),
+              children: [
+                /* @__PURE__ */ jsx(AlertTitle, { children: t("staff.support.settings.routing.noFallbackTitle", "No fallback project") }),
+                /* @__PURE__ */ jsx(AlertDescription, { children: t("staff.support.settings.routing.noFallbackDescription", "Customers cannot file tickets for categories without their own rule until a fallback project exists.") })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            !preview.fallback.project.usable ? /* @__PURE__ */ jsxs(Alert, { status: "error", children: [
+              /* @__PURE__ */ jsx(AlertTitle, { children: t("staff.support.settings.routing.fallbackUnusableTitle", "The fallback project cannot receive tickets") }),
+              /* @__PURE__ */ jsx(AlertDescription, { children: t("staff.support.settings.routing.fallbackUnusableDescription", "It is completed, deleted, or has no default status. Point the fallback rule at another project.") })
+            ] }) : null,
+            preview.fallback.project.nobodyNotified === true ? /* @__PURE__ */ jsx(Alert, { status: "warning", "data-testid": "support-fallback-nobody-notified", children: /* @__PURE__ */ jsx(AlertDescription, { children: nobodyNotifiedText }) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "max-w-md space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { id: "support-fallback-project-label", children: t("staff.support.settings.routing.fallbackProject", "Fallback project") }),
+              /* @__PURE__ */ jsx(
+                SupportProjectPicker,
+                {
+                  labelId: "support-fallback-project-label",
+                  testId: "support-fallback-project",
+                  value: preview.fallback.project.id,
+                  knownProjects,
+                  placeholder: t("staff.support.settings.routing.searchProject", "Search projects"),
+                  disabled: !canManageSettings,
+                  onChange: (projectId) => {
+                    if (preview.fallback) {
+                      void updateRule(preview.fallback.ruleId, routingRuleVersion(preview.fallback), { timeProjectId: projectId });
+                    }
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-medium", children: t("staff.support.settings.routing.overrides", "Category rules") }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  disabled: categoriesWithoutRule.length === 0 || !canManageSettings,
+                  onClick: () => setRuleDialog({
+                    mode: "create",
+                    categoryValue: categoriesWithoutRule[0]?.value ?? "",
+                    timeProjectId: ""
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+                    t("staff.support.settings.routing.addRule", "Add rule")
+                  ]
+                }
+              )
+            ] }),
+            overrides.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.routing.noOverrides", "No category rules. Every category goes to the fallback project.") }) : /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.category", "Category") }),
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.project", "Project") }),
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.active", "Active") }),
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.state", "State") }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-24" })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: overrides.map((rule) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableCell, { children: categoryLabels.get(rule.categoryValue ?? "") ?? rule.categoryValue }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: projectLabel(rule.project) }),
+                  rule.project.nobodyNotified === true ? /* @__PURE__ */ jsx(Alert, { status: "warning", size: "xs", "data-testid": "support-rule-nobody-notified", children: /* @__PURE__ */ jsx(AlertDescription, { children: nobodyNotifiedText }) }) : null
+                ] }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    checked: rule.isActive,
+                    disabled: !canManageSettings,
+                    "aria-label": t("staff.support.settings.routing.active", "Active"),
+                    onCheckedChange: (checked) => {
+                      void updateRule(rule.id, routingRuleVersion(rule), { isActive: checked });
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TableCell, { children: rule.problem ? /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx(StatusBadge, { variant: "warning", dot: true, children: t("staff.support.settings.routing.fallingBack", "Falling back to {project}", { project: fallbackName }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: problemText(rule.problem) })
+                ] }) : /* @__PURE__ */ jsx(StatusBadge, { variant: "success", dot: true, children: t("staff.support.settings.routing.routing", "Routing") }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      "aria-label": t("staff.support.settings.actions.edit", "Edit"),
+                      disabled: !canManageSettings,
+                      onClick: () => setRuleDialog(buildRoutingRuleEditDraft(rule)),
+                      children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      "aria-label": t("staff.support.settings.actions.delete", "Delete"),
+                      disabled: !canManageSettings,
+                      onClick: () => {
+                        void deleteRule(rule);
+                      },
+                      children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                    }
+                  )
+                ] }) })
+              ] }, rule.id)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-base font-medium", children: t("staff.support.settings.preview.title", "Where tickets go now") }),
+            preview.categories.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.preview.empty", "No categories to route.") }) : /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.category", "Category") }),
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.routing.project", "Project") }),
+                /* @__PURE__ */ jsx(TableHead, { children: t("staff.support.settings.preview.via", "Routed by") })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: preview.categories.map((category) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableCell, { children: category.label }),
+                /* @__PURE__ */ jsx(TableCell, { children: category.route ? projectLabel(category.route.project) : /* @__PURE__ */ jsx(StatusBadge, { variant: "error", dot: true, children: t("staff.support.settings.preview.unavailable", "Not available on portal") }) }),
+                /* @__PURE__ */ jsx(TableCell, { children: category.route ? category.route.via === "category" ? t("staff.support.settings.preview.viaCategory", "Category rule") : t("staff.support.settings.preview.viaFallback", "Fallback rule") : "\u2014" })
+              ] }, category.value)) })
+            ] })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("section", { className: "rounded-xl border border-border bg-card text-card-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border px-6 py-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium", children: t("staff.support.settings.prefix.title", "Reference prefix") }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("staff.support.settings.prefix.description", "Customers see ticket references such as SUP-1042. The prefix applies to the whole tenant.") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-md items-end gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "support-reference-prefix", children: t("staff.support.settings.referencePrefix", "Reference prefix") }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "support-reference-prefix",
+                value: prefix,
+                maxLength: 10,
+                disabled: !canManageSettings,
+                onChange: (event) => setPrefix(event.target.value.toUpperCase()),
+                "aria-invalid": prefixError ? true : void 0
+              }
+            ),
+            prefixError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text", children: prefixError }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { type: "button", onClick: () => {
+            void savePrefix();
+          }, disabled: prefixSaving || !canManageSettings, children: [
+            /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
+            t("staff.support.settings.actions.save", "Save")
+          ] })
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: categoryDialog !== null, onOpenChange: (open) => {
+      if (!open) setCategoryDialog(null);
+    }, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "max-w-lg",
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            if (categorySubmitting) return;
+            event.currentTarget.querySelector("form")?.requestSubmit();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: categoryDialogTitle }) }),
+          /* @__PURE__ */ jsx(
+            DictionaryForm,
+            {
+              mode: categoryDialog?.mode === "edit" ? "edit" : "create",
+              initialValues: categoryFormValues,
+              onSubmit: submitCategory,
+              onCancel: () => setCategoryDialog(null),
+              submitting: categorySubmitting,
+              translations: {
+                title: categoryDialogTitle,
+                valueLabel: t("staff.support.settings.categories.value", "Value"),
+                labelLabel: t("staff.support.settings.categories.label", "Label"),
+                saveLabel: t("staff.support.settings.actions.save", "Save"),
+                cancelLabel: t("staff.support.settings.actions.cancel", "Cancel"),
+                appearance: {
+                  colorLabel: t("staff.support.settings.categories.colorLabel", "Color"),
+                  colorHelp: t("staff.support.settings.categories.colorHelp", "Shown as the category badge color."),
+                  colorClearLabel: t("staff.support.settings.categories.colorClear", "Clear color"),
+                  iconLabel: t("staff.support.settings.categories.iconLabel", "Icon"),
+                  iconPlaceholder: t("staff.support.settings.categories.iconPlaceholder", "Icon name"),
+                  iconPickerTriggerLabel: t("staff.support.settings.categories.iconBrowse", "Browse icons"),
+                  iconSearchPlaceholder: t("staff.support.settings.categories.iconSearchPlaceholder", "Search icons"),
+                  iconSearchEmptyLabel: t("staff.support.settings.categories.iconSearchEmpty", "No icons found."),
+                  iconSuggestionsLabel: t("staff.support.settings.categories.iconSuggestions", "Suggestions"),
+                  iconClearLabel: t("staff.support.settings.categories.iconClear", "Clear icon"),
+                  previewEmptyLabel: t("staff.support.settings.categories.previewEmpty", "No appearance")
+                }
+              },
+              iconSuggestions: ICON_SUGGESTIONS
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Dialog, { open: ruleDialog !== null, onOpenChange: (open) => {
+      if (!open) setRuleDialog(null);
+    }, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: "max-w-lg",
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+            event.preventDefault();
+            if (ruleSubmitting) return;
+            void submitRuleDialog();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: ruleDialog?.mode === "edit" ? t("staff.support.settings.routing.editRuleTitle", "Edit rule") : t("staff.support.settings.routing.addRuleTitle", "Add rule") }) }),
+          ruleDialog ? /* @__PURE__ */ jsxs(
+            "form",
+            {
+              className: "space-y-4",
+              onSubmit: (event) => {
+                event.preventDefault();
+                void submitRuleDialog();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "support-rule-category", children: t("staff.support.settings.routing.category", "Category") }),
+                  ruleDialog.mode === "create" ? /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      value: ruleDialog.categoryValue,
+                      onValueChange: (value) => setRuleDialog({ ...ruleDialog, categoryValue: value }),
+                      children: [
+                        /* @__PURE__ */ jsx(SelectTrigger, { id: "support-rule-category", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("staff.support.settings.routing.selectCategory", "Select a category") }) }),
+                        /* @__PURE__ */ jsx(SelectContent, { children: categoriesWithoutRule.map((category) => /* @__PURE__ */ jsx(SelectItem, { value: category.value, children: category.label }, category.value)) })
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx("p", { id: "support-rule-category", className: "text-sm", children: categoryLabels.get(ruleDialog.categoryValue) ?? ruleDialog.categoryValue })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(Label, { id: "support-rule-project-label", children: t("staff.support.settings.routing.project", "Project") }),
+                  /* @__PURE__ */ jsx(
+                    SupportProjectPicker,
+                    {
+                      labelId: "support-rule-project-label",
+                      testId: "support-rule-project",
+                      value: ruleDialog.timeProjectId,
+                      knownProjects,
+                      placeholder: t("staff.support.settings.routing.selectProject", "Select a project"),
+                      onChange: (projectId) => setRuleDialog({ ...ruleDialog, timeProjectId: projectId })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => setRuleDialog(null), children: t("staff.support.settings.actions.cancel", "Cancel") }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "submit",
+                      disabled: ruleSubmitting || !ruleDialog.timeProjectId || ruleDialog.mode === "create" && !ruleDialog.categoryValue,
+                      children: t("staff.support.settings.actions.save", "Save")
+                    }
+                  )
+                ] })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    ConfirmDialogElement
+  ] });
+}
+export {
+  SupportSettingsTab as default
+};
+//# sourceMappingURL=widget.client.js.map