@nnkogift/dhis2-form-utils-devtools 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/index.js

@@ -1,9 +1,10 @@
-import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, IconFullscreen16, SegmentedControl, Button, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, Modal, ModalTitle, ModalContent } from '@dhis2/ui';
+import { IconInfo16, IconLink16, IconMail16, IconMessages16, IconErrorFilled16, IconWarningFilled16, IconStarFilled16, IconEdit16, IconView16, IconViewOff16, Modal, ModalContent, IconFullscreen16, SegmentedControl, Button, CircularLoader, ButtonStrip, NoticeBox, Card, IconChevronDown16, IconChevronRight16, Tag, Divider, Chip, ModalTitle } from '@dhis2/ui';
 import { useFormStore, useFormStateContext } from '@nnkogift/dhis2-form-utils-hooks';
-import { createContext, memo, useState, useMemo, useEffect, useSyncExternalStore, useCallback, useContext } from 'react';
+import { createContext, memo, useState, useMemo, useEffect, useSyncExternalStore, useCallback, useRef, useContext, useLayoutEffect } from 'react';
 import { selectProgramStage } from '@nnkogift/dhis2-form-utils-metadata';
 import i18n from '@dhis2/d2-i18n';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useDataQuery } from '@dhis2/app-runtime';
 import { MarkerType, Handle, Position, getSmoothStepPath, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, useNodesState, useEdgesState, ReactFlow, Background, Controls, useReactFlow } from '@xyflow/react';
 
 // src/RulesPanel.tsx
@@ -517,6 +518,463 @@ function useRuleTraceStore() {
   return store;
 }
 
+// src/programRuleDetailQuery.ts
+var PROGRAM_RULE_ACTION_DETAIL_FIELDS = [
+  "id",
+  "programRuleActionType",
+  "priority",
+  "content",
+  "data",
+  "location",
+  "dataElement[id,displayName]",
+  "trackedEntityAttribute[id,displayName]",
+  "option[id,displayName]",
+  "optionGroup[id,displayName]",
+  "programStageSection[id,displayName]",
+  "programStage[id,displayName]",
+  "programSection[id,displayName]"
+].join(",");
+var PROGRAM_RULE_DETAIL_FIELDS = [
+  "id",
+  "name",
+  "displayName",
+  "code",
+  "description",
+  "condition",
+  "priority",
+  "lastUpdated",
+  "lastUpdatedBy[displayName]",
+  "program[id,displayName]",
+  "programStage[id,displayName]",
+  `programRuleActions[${PROGRAM_RULE_ACTION_DETAIL_FIELDS}]`
+].join(",");
+var programRuleDetailQuery = {
+  programRule: {
+    resource: "programRules",
+    id: (variables) => variables.ruleId,
+    params: {
+      fields: PROGRAM_RULE_DETAIL_FIELDS
+    }
+  }
+};
+
+// src/useProgramRuleDetail.ts
+function isCurrentDetail(ruleId, detail) {
+  return ruleId != null && detail?.id === ruleId;
+}
+function resolveDetailState(ruleId, detail, hasError) {
+  const isCurrent = isCurrentDetail(ruleId, detail);
+  return {
+    detail: isCurrent ? detail : void 0,
+    loading: ruleId != null && !isCurrent && !hasError
+  };
+}
+function useProgramRuleDetail(ruleId) {
+  const { data, error, refetch } = useDataQuery(
+    programRuleDetailQuery,
+    { lazy: true }
+  );
+  useEffect(() => {
+    if (ruleId) {
+      void refetch({ ruleId });
+    }
+  }, [ruleId, refetch]);
+  return { ...resolveDetailState(ruleId, data?.programRule, Boolean(error)), error };
+}
+var EM_DASH = "\u2014";
+function formatTimestamp(value) {
+  if (!value) {
+    return null;
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+  const day = String(date.getDate());
+  const month = date.toLocaleString("en-GB", { month: "short" });
+  const year = String(date.getFullYear());
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${day} ${month} ${year} ${hours}:${minutes}`;
+}
+function resolveStatusChip(status) {
+  switch (status) {
+    case "firing":
+      return {
+        label: translate("Firing"),
+        className: "bg-dhis2-teal-100 text-dhis2-teal-900"
+      };
+    case "idle":
+      return { label: translate("Idle"), className: "bg-dhis2-grey-200 text-dhis2-grey-700" };
+    case "out-of-scope":
+      return {
+        label: translate("Out of scope"),
+        className: "bg-dhis2-grey-200 text-dhis2-grey-600"
+      };
+  }
+}
+var VARIABLE_PATTERNS = [
+  {
+    pattern: /#\{[^}]*\}/g,
+    kind: "Data element",
+    className: "bg-dhis2-blue-100 text-dhis2-blue-900"
+  },
+  {
+    pattern: /A\{[^}]*\}/g,
+    kind: "Tracked entity attribute",
+    className: "bg-dhis2-teal-100 text-dhis2-teal-900"
+  },
+  {
+    pattern: /V\{[^}]*\}/g,
+    kind: "Environment variable",
+    className: "bg-dhis2-grey-200 text-dhis2-grey-900"
+  },
+  {
+    pattern: /d2:\w+(?=\()/g,
+    kind: "Function",
+    className: "bg-dhis2-yellow-100 text-dhis2-yellow-900"
+  }
+];
+var RESOLVABLE_VARIABLE_KINDS = /* @__PURE__ */ new Set([
+  "Data element",
+  "Tracked entity attribute"
+]);
+function resolveVariableDisplayName(name, programRuleVariables) {
+  const variable = programRuleVariables.find((candidate) => candidate.name === name);
+  return variable?.dataElement?.displayName ?? variable?.trackedEntityAttribute?.displayName;
+}
+function resolveVariableToken(token, kind, programRuleVariables) {
+  if (kind === "Function") {
+    return `${token}()`;
+  }
+  if (!RESOLVABLE_VARIABLE_KINDS.has(kind)) {
+    return token;
+  }
+  return resolveVariableDisplayName(token.slice(2, -1), programRuleVariables) ?? token;
+}
+function matchDistinctTokens(condition, pattern, seen) {
+  const matches = condition.match(pattern) ?? [];
+  const distinct = matches.filter((token) => !seen.has(token));
+  for (const token of distinct) {
+    seen.add(token);
+  }
+  return distinct;
+}
+function parseConditionVariables(condition, programRuleVariables) {
+  if (!condition) {
+    return [];
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return VARIABLE_PATTERNS.flatMap(
+    ({ pattern, kind, className }) => matchDistinctTokens(condition, pattern, seen).map((token) => ({
+      token,
+      kind,
+      label: resolveVariableToken(token, kind, programRuleVariables),
+      className
+    }))
+  );
+}
+var ACTION_TARGET_RESOLVERS = [
+  { label: "Data element", getRef: (action) => action.dataElement },
+  { label: "Tracked entity attribute", getRef: (action) => action.trackedEntityAttribute },
+  { label: "Program stage section", getRef: (action) => action.programStageSection },
+  { label: "Program stage", getRef: (action) => action.programStage },
+  { label: "Option", getRef: (action) => action.option },
+  { label: "Option group", getRef: (action) => action.optionGroup }
+];
+function formatActionTargetValue(ref) {
+  return `${ref.displayName ?? ref.id} \xB7 ${ref.id}`;
+}
+function resolveActionTarget(action) {
+  for (const { label, getRef } of ACTION_TARGET_RESOLVERS) {
+    const ref = getRef(action);
+    if (ref?.id) {
+      return { label: translate(label), value: formatActionTargetValue(ref) };
+    }
+  }
+  return null;
+}
+function BasicDetailCell({ label, value, mono }) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-xs text-dhis2-grey-600", children: label }),
+    /* @__PURE__ */ jsx("p", { className: `m-0 mt-[2px] text-sm text-dhis2-grey-900 ${mono ? "font-mono" : ""}`, children: value })
+  ] });
+}
+var FEEDBACK_ACTION_TYPES = /* @__PURE__ */ new Set(["DISPLAYTEXT", "DISPLAYKEYVALUEPAIR"]);
+function resolveDataRow(action) {
+  return action.data ? { label: translate("Data (expression)"), value: action.data, mono: true } : null;
+}
+function resolveContentRow(action) {
+  const showContent = Boolean(action.content) && FEEDBACK_ACTION_TYPES.has(action.programRuleActionType);
+  return showContent ? { label: translate("Content (static text)"), value: action.content ?? "" } : null;
+}
+function resolveLocationRow(action) {
+  return action.location ? { label: translate("Location"), value: action.location, mono: true } : null;
+}
+function resolveActionRows(action) {
+  const rows = [
+    resolveActionTarget(action),
+    resolveDataRow(action),
+    resolveContentRow(action),
+    resolveLocationRow(action)
+  ];
+  return rows.filter((row) => row !== null);
+}
+function ActionCard({ action, index }) {
+  const type = action.programRuleActionType;
+  const visual = getEffectVisual(type);
+  const Icon = EFFECT_ICONS[visual.variant];
+  const rows = resolveActionRows(action);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative rounded-[3px] border border-dhis2-grey-300 bg-white py-dp12 pe-dp16 ps-dp16 shadow-[0_1px_2px_rgb(0_0_0/4%)]",
+      style: { borderInlineStartWidth: 3, borderInlineStartColor: visual.edgeStroke },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-dp12 flex items-center justify-between gap-dp8", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `inline-flex items-center gap-[4px] rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${visual.tagClassName}`,
+              children: [
+                /* @__PURE__ */ jsx(Icon, {}),
+                type
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-dhis2-grey-600", children: translate("Action {{n}}", { n: index + 1 }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-dp10", children: rows.map((row) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[172px_minmax(0,1fr)] gap-dp10", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-dhis2-grey-600", children: row.label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `min-w-0 break-words text-sm ${row.mono ? "font-mono text-[12px]" : ""}`,
+              children: row.value
+            }
+          )
+        ] }, row.label)) })
+      ]
+    }
+  );
+}
+function orDash(value) {
+  return value ?? EM_DASH;
+}
+function resolveDetailDisplayName(rule) {
+  return rule?.displayName;
+}
+function resolveDetailName(rule) {
+  return rule?.name;
+}
+function resolveRuleDisplayName(rule, fallback) {
+  const displayName = resolveDetailDisplayName(rule) ?? resolveDetailName(rule);
+  return displayName ?? fallback;
+}
+function resolveRuleStageName(rule) {
+  return rule?.programStage?.displayName;
+}
+function resolveStageName(rule, programStageName) {
+  if (programStageName === null) {
+    return translate("All stages (registration)");
+  }
+  return orDash(resolveRuleStageName(rule) ?? programStageName);
+}
+function resolveLastUpdatedByName(rule) {
+  return rule?.lastUpdatedBy?.displayName;
+}
+function resolveLastUpdatedValue(rule) {
+  const label = formatTimestamp(rule?.lastUpdated);
+  if (!label) {
+    return EM_DASH;
+  }
+  const by = resolveLastUpdatedByName(rule);
+  return by ? `${label} \xB7 ${by}` : label;
+}
+function resolvePriorityCellValue(rule) {
+  return rule?.priority != null ? String(rule.priority) : EM_DASH;
+}
+function resolveActionsCellValue(rule) {
+  return translate("{{n}} action(s)", { n: rule?.programRuleActions?.length ?? 0 });
+}
+function resolveBasicDetailCells(rule, ruleName, programStageName) {
+  return [
+    { label: translate("Name"), value: resolveRuleDisplayName(rule, ruleName) },
+    { label: translate("Code"), value: orDash(rule?.code), mono: true },
+    { label: translate("Identifier"), value: orDash(rule?.id), mono: true },
+    { label: translate("Program"), value: orDash(rule?.program?.displayName) },
+    { label: translate("Program stage"), value: resolveStageName(rule, programStageName) },
+    { label: translate("Priority"), value: resolvePriorityCellValue(rule) },
+    { label: translate("Actions"), value: resolveActionsCellValue(rule) },
+    { label: translate("Last updated"), value: resolveLastUpdatedValue(rule) }
+  ];
+}
+function BasicDetails({
+  rule,
+  ruleName,
+  programStageName
+}) {
+  const cells = resolveBasicDetailCells(rule, ruleName, programStageName);
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-dp24 gap-y-dp12 rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-050 p-dp16", children: cells.map((cell) => /* @__PURE__ */ jsx(BasicDetailCell, { ...cell }, cell.label)) });
+}
+var SECTION_HEADING_CLASS = "m-0 mb-dp8 text-[13px] font-bold uppercase tracking-wide text-dhis2-grey-700";
+function RuleDetailsHeader({
+  title,
+  chip,
+  description
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "-mx-dp24 -mt-dp24 mb-0 border-b border-dhis2-grey-300 px-dp24 pb-dp16 pe-[44px] pt-[20px]", children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-[11px] font-bold uppercase tracking-[.09em] text-dhis2-grey-600", children: translate("Program rule") }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-[6px] flex flex-wrap items-center gap-dp8", children: [
+      /* @__PURE__ */ jsx("h2", { className: "m-0 text-xl font-medium leading-[1.3] text-dhis2-grey-900", children: title }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `rounded-[4px] px-dp8 py-[2px] text-xs font-semibold ${chip.className}`,
+          children: chip.label
+        }
+      )
+    ] }),
+    description ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "m-0 mt-[6px] text-sm text-dhis2-grey-700",
+        style: { textWrap: "pretty" },
+        children: description
+      }
+    ) : null
+  ] });
+}
+function ConditionSection({
+  condition,
+  variables
+}) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Condition") }),
+    /* @__PURE__ */ jsx("pre", { className: "m-0 whitespace-pre-wrap break-words rounded-[3px] border border-dhis2-grey-300 bg-dhis2-grey-200 px-dp16 py-[14px] font-mono text-[13px] leading-[1.6] text-dhis2-grey-900", children: condition ?? EM_DASH }),
+    variables.length ? /* @__PURE__ */ jsxs("div", { className: "mt-dp12", children: [
+      /* @__PURE__ */ jsx("p", { className: "m-0 mb-dp8 text-xs text-dhis2-grey-600", children: translate("Variables referenced") }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-dp8", children: variables.map((variable) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `inline-flex items-center gap-[4px] rounded-full px-dp8 py-[2px] text-xs ${variable.className}`,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: variable.label }),
+            /* @__PURE__ */ jsx("span", { className: "opacity-70", children: translate(variable.kind) })
+          ]
+        },
+        variable.token
+      )) })
+    ] }) : null
+  ] });
+}
+function ActionsSection({ actions }) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Actions") }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-dp12", children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionCard, { action, index }, action.id)) })
+  ] });
+}
+function RuleDetailsContent({
+  detail,
+  ruleName,
+  programStageName,
+  variables
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-dp24 pt-dp16", children: [
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("h3", { className: SECTION_HEADING_CLASS, children: translate("Basic details") }),
+      /* @__PURE__ */ jsx(
+        BasicDetails,
+        {
+          rule: detail,
+          ruleName,
+          programStageName
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ConditionSection, { condition: detail.condition, variables }),
+    /* @__PURE__ */ jsx(ActionsSection, { actions: detail.programRuleActions ?? [] })
+  ] });
+}
+function RuleDetailsBody({
+  detail,
+  loading,
+  error,
+  ruleName,
+  programStageName,
+  variables
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex min-h-[280px] items-center justify-center", children: /* @__PURE__ */ jsx(CircularLoader, { small: true }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-dhis2-red-700", children: translate("Could not load this rule: {{message}}", { message: error.message }) });
+  }
+  if (!detail) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    RuleDetailsContent,
+    {
+      detail,
+      ruleName,
+      programStageName,
+      variables
+    }
+  );
+}
+function RuleDetailsFooter({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { order: 3 },
+      className: "-mx-dp24 -mb-dp24 mt-dp16 flex items-center justify-between gap-dp12 border-t border-dhis2-grey-300 bg-dhis2-grey-050 px-dp24 py-[14px]",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "m-0 text-sm text-dhis2-grey-600", children: translate("Read-only view. Edit rules in the Maintenance app.") }),
+        /* @__PURE__ */ jsx(ButtonStrip, { children: /* @__PURE__ */ jsx(Button, { secondary: true, onClick: onClose, children: translate("Close") }) })
+      ]
+    }
+  );
+}
+function resolveActiveRuleId(open, ruleId) {
+  return open ? ruleId : null;
+}
+function shouldRenderModal(open, ruleId) {
+  return open && ruleId != null;
+}
+function RuleDetailsModal({
+  open,
+  onClose,
+  ruleId,
+  ruleName,
+  status,
+  programStageName,
+  programRuleVariables
+}) {
+  const { detail, loading, error } = useProgramRuleDetail(resolveActiveRuleId(open, ruleId));
+  if (!shouldRenderModal(open, ruleId)) {
+    return null;
+  }
+  const chip = resolveStatusChip(status);
+  const variables = parseConditionVariables(detail?.condition, programRuleVariables);
+  const title = resolveRuleDisplayName(detail, ruleName);
+  return /* @__PURE__ */ jsxs(Modal, { position: "middle", onClose, children: [
+    /* @__PURE__ */ jsx(RuleDetailsHeader, { title, chip, description: detail?.description }),
+    /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(
+      RuleDetailsBody,
+      {
+        detail,
+        loading,
+        error,
+        ruleName,
+        programStageName,
+        variables
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RuleDetailsFooter, { onClose })
+  ] });
+}
+
 // src/graphLayout.ts
 var ROLE_COLUMNS = {
   source: 0,
@@ -1310,6 +1768,52 @@ function TraceTimeline({
     ) }, entry.id);
   }) });
 }
+var REORDER_DURATION_MS = 220;
+var REORDER_EASING = "ease-out";
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useFlipReorder(orderedIds, containerRef) {
+  const positionsRef = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const previousPositions = positionsRef.current;
+    const items = container.querySelectorAll("[data-rule-id]");
+    if (!prefersReducedMotion()) {
+      items.forEach((item) => {
+        const id = item.dataset.ruleId;
+        if (!id) {
+          return;
+        }
+        const previousRect = previousPositions.get(id);
+        if (!previousRect) {
+          return;
+        }
+        const currentRect = item.getBoundingClientRect();
+        const deltaY = previousRect.top - currentRect.top;
+        if (deltaY === 0) {
+          return;
+        }
+        item.style.transition = "none";
+        item.style.transform = `translateY(${String(deltaY)}px)`;
+        item.getBoundingClientRect();
+        item.style.transition = `transform ${String(REORDER_DURATION_MS)}ms ${REORDER_EASING}`;
+        item.style.transform = "";
+      });
+    }
+    const nextPositions = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const id = item.dataset.ruleId;
+      if (id) {
+        nextPositions.set(id, item.getBoundingClientRect());
+      }
+    });
+    positionsRef.current = nextPositions;
+  }, [orderedIds.join("|")]);
+}
 function resolveScopeStageId(metadata) {
   return metadata.formKind === "event" ? metadata.programStageId : null;
 }
@@ -1331,6 +1835,12 @@ function resolveCardStatus(inScope, firing) {
   }
   return firing ? { label: translate("Firing"), className: "text-dhis2-teal-700" } : { label: translate("Idle"), className: "text-dhis2-grey-600" };
 }
+function resolveDetailsStatus(inScope, firing) {
+  if (!inScope) {
+    return "out-of-scope";
+  }
+  return firing ? "firing" : "idle";
+}
 function formatActionLabel(action) {
   if (action.targetLabel && action.detail) {
     return `${action.type} \xB7 ${action.targetLabel} = ${action.detail}`;
@@ -1373,6 +1883,7 @@ function RulesPanel({ metadata, showConditions = true }) {
   const [highlightRuleId, setHighlightRuleId] = useState(null);
   const [graphModalOpen, setGraphModalOpen] = useState(false);
   const [scopeFilter, setScopeFilter] = useState("scoped");
+  const [detailsRuleId, setDetailsRuleId] = useState(null);
   const labelLookup = useMemo(() => createLabelLookup(metadata), [metadata]);
   const catalog = useMemo(() => resolveProgramRulesList(metadata), [metadata]);
   const scopeStageId = useMemo(() => resolveScopeStageId(metadata), [metadata]);
@@ -1427,6 +1938,15 @@ function RulesPanel({ metadata, showConditions = true }) {
     }
     return null;
   }, [highlightedRuleName, selectedEntry]);
+  const detailsRule = useMemo(
+    () => catalog.find((rule) => rule.id === detailsRuleId) ?? null,
+    [catalog, detailsRuleId]
+  );
+  const detailsStatus = detailsRule ? resolveDetailsStatus(
+    isRuleInScope(detailsRule, scopeStageId),
+    activeRuleIds.has(detailsRule.id)
+  ) : "idle";
+  const detailsProgramStageName = detailsRule ? detailsRule.programStageId === null ? null : labelLookup.resolveStageName(detailsRule.programStageId) : void 0;
   const graphProps = {
     entries,
     fieldState,
@@ -1528,6 +2048,9 @@ function RulesPanel({ metadata, showConditions = true }) {
             onSelectRule: (ruleId) => {
               setHighlightRuleId(ruleId);
               setTab("graph");
+            },
+            onOpenDetails: (ruleId) => {
+              setDetailsRuleId(ruleId);
             }
           }
         ) : tab === "trace" ? /* @__PURE__ */ jsx(
@@ -1569,11 +2092,33 @@ function RulesPanel({ metadata, showConditions = true }) {
             subtitle: graphSubtitle,
             layoutKey: graphModalOpen ? "open" : "closed"
           }
+        ),
+        /* @__PURE__ */ jsx(
+          RuleDetailsModal,
+          {
+            open: detailsRuleId != null,
+            onClose: () => {
+              setDetailsRuleId(null);
+            },
+            ruleId: detailsRuleId,
+            ruleName: detailsRule?.name ?? "",
+            status: detailsStatus,
+            programStageName: detailsProgramStageName,
+            programRuleVariables: metadata.metadata.programRuleVariables
+          }
         )
       ]
     }
   );
 }
+function sortRulesFiringFirst(visibleRules, activeRuleIds) {
+  const firing = [];
+  const idle = [];
+  for (const rule of visibleRules) {
+    (activeRuleIds.has(rule.id) ? firing : idle).push(rule);
+  }
+  return [...firing, ...idle];
+}
 function RulesTab({
   catalog,
   scopeStageId,
@@ -1582,21 +2127,31 @@ function RulesTab({
   selectedRuleId,
   showConditions,
   labelLookup,
-  onSelectRule
+  onSelectRule,
+  onOpenDetails
 }) {
+  const listRef = useRef(null);
+  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
+  const sortedRules = useMemo(
+    () => sortRulesFiringFirst(visibleRules, activeRuleIds),
+    [visibleRules, activeRuleIds]
+  );
+  useFlipReorder(
+    useMemo(() => sortedRules.map((rule) => rule.id), [sortedRules]),
+    listRef
+  );
   if (!catalog.length) {
     return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("This program has no rules.") });
   }
-  const visibleRules = scopeFilter === "all" ? catalog : catalog.filter((rule) => isRuleInScope(rule, scopeStageId));
-  if (!visibleRules.length) {
+  if (!sortedRules.length) {
     return /* @__PURE__ */ jsx("p", { className: "m-0 text-sm leading-normal text-dhis2-grey-600", children: translate("No rules are in scope for this stage.") });
   }
-  return /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-[10px] p-0", children: visibleRules.map((rule) => {
+  return /* @__PURE__ */ jsx("ul", { ref: listRef, className: "m-0 flex list-none flex-col gap-[10px] p-0", children: sortedRules.map((rule) => {
     const inScope = isRuleInScope(rule, scopeStageId);
     const firing = activeRuleIds.has(rule.id);
     const isSelected = selectedRuleId === rule.id;
     const status = resolveCardStatus(inScope, firing);
-    return /* @__PURE__ */ jsx("li", { className: "m-0 shrink-0", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("li", { "data-rule-id": rule.id, className: "m-0 shrink-0", children: /* @__PURE__ */ jsxs(
       "article",
       {
         role: "button",
@@ -1627,13 +2182,29 @@ function RulesTab({
                 children: rule.name
               }
             ),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `shrink-0 text-[11px] font-semibold ${status.className}`,
-                children: status.label
-              }
-            )
+            /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-[6px]", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-[11px] font-semibold ${status.className}`,
+                  children: status.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: translate("Program rule details"),
+                  "aria-label": translate("Program rule details"),
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onOpenDetails(rule.id);
+                  },
+                  className: "inline-flex size-[22px] shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-transparent text-dhis2-grey-600 hover:bg-dhis2-grey-200 hover:text-dhis2-blue-600",
+                  children: /* @__PURE__ */ jsx(IconInfo16, {})
+                }
+              )
+            ] })
           ] }),
           rule.programRuleActions.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-[6px]", children: rule.programRuleActions.map((action, index) => {
             const summary = formatRuleActionSummary(
@@ -1666,6 +2237,6 @@ function RulesTab({
   }) });
 }
 
-export { EFFECT_ICONS, RuleDevtoolsScope, RulesPanel, createLabelLookup, getEffectEdgeStroke, getEffectShortLabel, getEffectTagRenderProps, getEffectTagRenderPropsForVariant, getEffectVariant, getEffectVisual };
+export { EFFECT_ICONS, RuleDetailsModal, RuleDevtoolsScope, RulesPanel, createLabelLookup, getEffectEdgeStroke, getEffectShortLabel, getEffectTagRenderProps, getEffectTagRenderPropsForVariant, getEffectVariant, getEffectVisual };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map