@attabot/complaint-app 1.0.0

package/dist/complaint-app.js

@@ -0,0 +1,2095 @@
+import { jsx as e, jsxs as c, Fragment as Se } from "react/jsx-runtime";
+import ce, { createContext as J, useEffect as U, useMemo as H, useContext as se, useState as E, useCallback as Z } from "react";
+import { useNavigate as oe, useParams as xe, useSearchParams as Ce, BrowserRouter as Ae, Routes as De, Route as G } from "react-router-dom";
+import de from "axios";
+import F from "js-cookie";
+const Te = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 };
+let $ = "";
+try {
+  if (typeof import.meta < "u" && Te?.VITE_API_URL)
+    $ = void 0;
+  else {
+    const t = typeof process < "u" ? process : null;
+    t?.env?.VITE_API_URL && ($ = t.env.VITE_API_URL);
+  }
+} catch {
+}
+const Be = (t) => {
+  $ = t || "", q.defaults.baseURL = $;
+}, Re = (t) => {
+  t ? F.set("token", t, { secure: !0, sameSite: "Strict" }) : F.remove("token");
+}, Ee = () => F.get("token") || null, q = de.create({
+  baseURL: $,
+  transformRequest: [
+    function(t, a) {
+      const n = Ee();
+      return n ? a.Authorization = `Bearer ${n}` : delete a.Authorization, t == null || typeof t == "string" ? t : JSON.stringify(t);
+    }
+  ],
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json"
+  }
+});
+let K = !1, Q = null;
+q.interceptors.response.use(
+  (t) => t,
+  async (t) => {
+    const a = t.config, n = t.response;
+    if (n && (n.status === 401 || n.status === 402)) {
+      const i = F.get("refreshToken");
+      if (i)
+        try {
+          K || (K = !0, Q = de.post(
+            `${$}/api/v1/auth/refresh`,
+            {},
+            {
+              headers: {
+                Authorization: `Bearer ${i}`
+              }
+            }
+          ));
+          const r = await Q, { token: l, refreshToken: u } = r.data;
+          return F.set("token", l, { secure: !0, sameSite: "Strict" }), u && F.set("refreshToken", u), a.headers.Authorization = `Bearer ${l}`, q(a);
+        } catch {
+          F.remove("token"), F.remove("refreshToken");
+        } finally {
+          K = !1, Q = null;
+        }
+    }
+    return Promise.reject(t);
+  }
+);
+const Me = J(null), Le = ({ children: t, apiUrl: a, authToken: n }) => (U(() => {
+  a && Be(a);
+}, [a]), U(() => {
+  Re(n || null);
+}, [n]), /* @__PURE__ */ e(Me.Provider, { value: { apiUrl: a, authToken: n }, children: t })), S = {
+  mode: "light",
+  colors: {
+    primary: "#2D64B8",
+    primaryHover: "#2557A3",
+    text: "#111827",
+    textSecondary: "#6B7280",
+    textMuted: "#9CA3AF",
+    border: "#E5E7EB",
+    borderLight: "#F3F4F6",
+    background: "#F5F5F5",
+    surface: "#FFFFFF",
+    white: "#FFFFFF",
+    onPrimary: "#FFFFFF",
+    activeBg: "#ECFDF5",
+    activeBorder: "#A7F3D0",
+    activeText: "#059669",
+    inactiveBg: "#F3F4F6",
+    inactiveBorder: "#D1D5DB",
+    inactiveText: "#6B7280",
+    link: "#2D64B8",
+    divider: "#E5E7EB",
+    accentBorder: "#C5D7F0",
+    accentBg: "#EEF4FB",
+    stepDone: "#D6E4F7",
+    success: "#22C55E",
+    danger: "#EF4444",
+    secondaryBtn: "#D1D5DB",
+    secondaryBtnHover: "#C4C9D1",
+    inputBg: "#FFFFFF",
+    tableHeadBg: "#EEF4FB",
+    sidebarBg: "#FAFBFD",
+    overlay: "rgba(16, 24, 40, 0.06)"
+  },
+  radii: {
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    pill: "999px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    xxl: "32px"
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    h1Size: "28px",
+    h2Size: "16px",
+    bodySize: "14px",
+    labelSize: "13px",
+    valueSize: "22px",
+    smallSize: "13px"
+  },
+  shadow: {
+    card: "0 1px 2px rgba(16, 24, 40, 0.04)",
+    settings: "0 1px 3px rgba(16, 24, 40, 0.06)"
+  }
+}, V = {
+  mode: "dark",
+  colors: {
+    primary: "#5B8DEF",
+    primaryHover: "#7BA3F3",
+    text: "#F3F4F6",
+    textSecondary: "#A1A1AA",
+    textMuted: "#71717A",
+    border: "#3F3F46",
+    borderLight: "#27272A",
+    background: "#0F1115",
+    surface: "#18181B",
+    white: "#FFFFFF",
+    onPrimary: "#FFFFFF",
+    activeBg: "#052E1C",
+    activeBorder: "#166534",
+    activeText: "#4ADE80",
+    inactiveBg: "#27272A",
+    inactiveBorder: "#3F3F46",
+    inactiveText: "#A1A1AA",
+    link: "#7BA3F3",
+    divider: "#3F3F46",
+    accentBorder: "#2A3A55",
+    accentBg: "#1A2333",
+    stepDone: "#1E3A5F",
+    success: "#22C55E",
+    danger: "#F87171",
+    secondaryBtn: "#3F3F46",
+    secondaryBtnHover: "#52525B",
+    inputBg: "#18181B",
+    tableHeadBg: "#1A2333",
+    sidebarBg: "#12141A",
+    overlay: "rgba(0, 0, 0, 0.35)"
+  },
+  radii: {
+    sm: "6px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    pill: "999px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px",
+    xxl: "32px"
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    h1Size: "28px",
+    h2Size: "16px",
+    bodySize: "14px",
+    labelSize: "13px",
+    valueSize: "22px",
+    smallSize: "13px"
+  },
+  shadow: {
+    card: "0 1px 2px rgba(0, 0, 0, 0.35)",
+    settings: "0 1px 3px rgba(0, 0, 0, 0.4)"
+  }
+}, $e = {
+  light: S,
+  dark: V
+};
+function L(t) {
+  return t != null && typeof t == "object" && !Array.isArray(t);
+}
+function O(t, a) {
+  if (!L(a)) return t;
+  const n = { ...t };
+  return Object.keys(a).forEach((i) => {
+    const r = a[i];
+    L(r) && L(t[i]) ? n[i] = O(t[i], r) : r !== void 0 && (n[i] = r);
+  }), n;
+}
+function Pe(t) {
+  return !t || !L(t) ? { light: S, dark: V } : L(t.light) || L(t.dark) ? {
+    light: O(S, t.light || {}),
+    dark: O(V, t.dark || {})
+  } : {
+    light: O(S, t),
+    dark: O(V, t)
+  };
+}
+function Ie(t, a = !1) {
+  const n = Pe(t);
+  return {
+    ...a ? n.dark : n.light,
+    mode: a ? "dark" : "light",
+    __pack: n
+  };
+}
+const ze = {
+  primary: "--ca-primary",
+  primaryHover: "--ca-primary-hover",
+  text: "--ca-text",
+  textSecondary: "--ca-text-secondary",
+  textMuted: "--ca-text-muted",
+  border: "--ca-border",
+  borderLight: "--ca-border-light",
+  background: "--ca-bg",
+  surface: "--ca-surface",
+  white: "--ca-white",
+  onPrimary: "--ca-on-primary",
+  activeBg: "--ca-active-bg",
+  activeBorder: "--ca-active-border",
+  activeText: "--ca-active-text",
+  inactiveBg: "--ca-inactive-bg",
+  inactiveBorder: "--ca-inactive-border",
+  inactiveText: "--ca-inactive-text",
+  link: "--ca-link",
+  divider: "--ca-divider",
+  accentBorder: "--ca-accent-border",
+  accentBg: "--ca-accent-bg",
+  stepDone: "--ca-step-done",
+  success: "--ca-success",
+  danger: "--ca-danger",
+  secondaryBtn: "--ca-secondary-btn",
+  secondaryBtnHover: "--ca-secondary-btn-hover",
+  inputBg: "--ca-input-bg",
+  tableHeadBg: "--ca-table-head-bg",
+  sidebarBg: "--ca-sidebar-bg",
+  overlay: "--ca-overlay"
+}, Oe = {
+  sm: "--ca-radius-sm",
+  md: "--ca-radius-md",
+  lg: "--ca-radius-lg",
+  xl: "--ca-radius-xl",
+  pill: "--ca-radius-pill"
+}, He = {
+  fontFamily: "--ca-font",
+  h1Size: "--ca-h1-size",
+  h2Size: "--ca-h2-size",
+  bodySize: "--ca-body-size",
+  labelSize: "--ca-label-size",
+  valueSize: "--ca-value-size",
+  smallSize: "--ca-small-size"
+}, We = {
+  card: "--ca-shadow-card",
+  settings: "--ca-shadow-settings"
+};
+function je(t) {
+  const a = {};
+  return t?.colors && Object.entries(ze).forEach(([n, i]) => {
+    t.colors[n] != null && (a[i] = t.colors[n]);
+  }), t?.radii && Object.entries(Oe).forEach(([n, i]) => {
+    t.radii[n] != null && (a[i] = t.radii[n]);
+  }), t?.typography && Object.entries(He).forEach(([n, i]) => {
+    t.typography[n] != null && (a[i] = t.typography[n]);
+  }), t?.shadow && Object.entries(We).forEach(([n, i]) => {
+    t.shadow[n] != null && (a[i] = t.shadow[n]);
+  }), a["--ca-on-primary"] && !a["--ca-white"] && (a["--ca-white"] = a["--ca-on-primary"]), a;
+}
+const ue = J({
+  darkMode: !1,
+  theme: null,
+  themeFile: $e,
+  cssVars: {}
+});
+function Ve({ theme: t, darkMode: a = !1, children: n }) {
+  const i = H(() => {
+    const r = Ie(t, !!a), l = je(r);
+    return {
+      darkMode: !!a,
+      theme: r,
+      themeFile: r.__pack,
+      cssVars: l,
+      mode: r.mode
+    };
+  }, [t, a]);
+  return /* @__PURE__ */ e(ue.Provider, { value: i, children: n });
+}
+function Ue() {
+  return se(ue);
+}
+function k({
+  children: t,
+  variant: a = "primary",
+  size: n = "md",
+  startIcon: i,
+  endIcon: r,
+  className: l = "",
+  type: u = "button",
+  disabled: o = !1,
+  onClick: p,
+  ...m
+}) {
+  const d = [
+    "ca-btn",
+    `ca-btn--${a}`,
+    n === "sm" ? "ca-btn--sm" : "",
+    n === "lg" ? "ca-btn--lg" : "",
+    l
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: u,
+      className: d,
+      disabled: o,
+      onClick: p,
+      ...m,
+      children: [
+        i ? /* @__PURE__ */ e("span", { className: "ca-btn__icon", children: i }) : null,
+        t,
+        r ? /* @__PURE__ */ e("span", { className: "ca-btn__icon", children: r }) : null
+      ]
+    }
+  );
+}
+function pe({ size: t = 16, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...n,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M12 5v14M5 12h14",
+          stroke: a,
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+const te = {
+  h1: "ca-h1",
+  h2: "ca-h2",
+  body: "ca-body",
+  label: "ca-label",
+  value: "ca-value",
+  small: "ca-small",
+  link: "ca-link"
+}, qe = {
+  h1: "h1",
+  h2: "h2",
+  body: "p",
+  label: "span",
+  value: "span",
+  small: "span",
+  link: "button"
+};
+function D({
+  variant: t = "body",
+  as: a,
+  className: n = "",
+  children: i,
+  ...r
+}) {
+  const l = a || qe[t] || "p", u = te[t] || te.body;
+  return /* @__PURE__ */ e(l, { className: `${u} ${n}`.trim(), ...r, children: i });
+}
+function he(t) {
+  return /* @__PURE__ */ e(D, { variant: "h1", ...t });
+}
+function x(t) {
+  return /* @__PURE__ */ e(D, { variant: "h2", ...t });
+}
+function N(t) {
+  return /* @__PURE__ */ e(D, { variant: "body", ...t });
+}
+function X(t) {
+  return /* @__PURE__ */ e(D, { variant: "label", ...t });
+}
+function Ye(t) {
+  return /* @__PURE__ */ e(D, { variant: "value", ...t });
+}
+function Ge(t) {
+  return /* @__PURE__ */ e(D, { variant: "link", type: "button", ...t });
+}
+function Ke({
+  title: t = "Complaint Management",
+  description: a,
+  actionLabel: n = "Create New Form",
+  onAction: i,
+  className: r = ""
+}) {
+  return /* @__PURE__ */ c("header", { className: `ca-page-header ${r}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: "ca-page-header__text", children: [
+      /* @__PURE__ */ e(he, { children: t }),
+      a ? /* @__PURE__ */ e(N, { children: a }) : null
+    ] }),
+    /* @__PURE__ */ e("div", { className: "ca-page-header__actions", children: /* @__PURE__ */ e(k, { startIcon: /* @__PURE__ */ e(pe, {}), onClick: i, children: n }) })
+  ] });
+}
+function me({ status: t = "inactive", label: a, className: n = "" }) {
+  const r = String(t).toLowerCase() === "active", l = a ?? (r ? "Active" : "Inactive");
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: `ca-badge ca-badge--${r ? "active" : "inactive"} ${n}`.trim(),
+      children: l
+    }
+  );
+}
+function Qe({
+  title: t,
+  status: a,
+  statusLabel: n,
+  titleAsLink: i = !1,
+  onTitleClick: r,
+  className: l = ""
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-system-card__header ${l}`.trim(), children: [
+    /* @__PURE__ */ e("div", { className: "ca-system-card__title-wrap", children: i ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "ca-h2 ca-h2--link",
+        onClick: r,
+        children: t
+      }
+    ) : /* @__PURE__ */ e(x, { children: t }) }),
+    /* @__PURE__ */ e(me, { status: a, label: n })
+  ] });
+}
+function Y({ size: t = 16, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...n,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M9 6l6 6-6 6",
+          stroke: a,
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function Ze({
+  updatedOn: t,
+  configureLabel: a = "Configure",
+  onConfigure: n,
+  className: i = ""
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-system-card__footer ${i}`.trim(), children: [
+    /* @__PURE__ */ e(D, { variant: "small", as: "span", children: t ? `Updated on ${t}` : "" }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        size: "sm",
+        onClick: n,
+        endIcon: /* @__PURE__ */ e(Y, { size: 14, color: "#fff" }),
+        children: a
+      }
+    )
+  ] });
+}
+function Je({ label: t, value: a, className: n = "" }) {
+  const i = a == null ? "—" : typeof a == "number" ? String(a).padStart(2, "0") : a;
+  return /* @__PURE__ */ c("div", { className: `ca-data-point ${n}`.trim(), children: [
+    /* @__PURE__ */ e(X, { children: t }),
+    /* @__PURE__ */ e(Ye, { children: i })
+  ] });
+}
+function Xe({ className: t = "" }) {
+  return /* @__PURE__ */ e("div", { className: `ca-divider ${t}`.trim(), role: "separator", "aria-orientation": "vertical" });
+}
+function et({
+  id: t,
+  title: a,
+  status: n = "inactive",
+  statusLabel: i,
+  description: r,
+  descriptionHref: l,
+  departments: u,
+  workflows: o,
+  fields: p,
+  formsFilled: m,
+  updatedOn: d,
+  titleAsLink: s = !1,
+  onTitleClick: h,
+  onDescriptionClick: g,
+  onConfigure: f,
+  className: v = ""
+}) {
+  const b = () => {
+    f?.({
+      id: t,
+      title: a,
+      status: n,
+      departments: u,
+      workflows: o,
+      fields: p,
+      formsFilled: m,
+      updatedOn: d
+    });
+  }, T = () => {
+    if (g) {
+      g({ id: t, title: a, descriptionHref: l });
+      return;
+    }
+    l && typeof window < "u" && window.open(l, "_blank", "noopener,noreferrer");
+  }, B = [
+    { label: "Departments", value: u },
+    { label: "Workflows", value: o },
+    { label: "Fields", value: p },
+    { label: "Forms Filled", value: m }
+  ];
+  return /* @__PURE__ */ c("article", { className: `ca-system-card ${v}`.trim(), children: [
+    /* @__PURE__ */ e(
+      Qe,
+      {
+        title: a,
+        status: n,
+        statusLabel: i,
+        titleAsLink: s,
+        onTitleClick: () => h?.({ id: t, title: a })
+      }
+    ),
+    r ? /* @__PURE__ */ e(Ge, { onClick: T, children: r }) : null,
+    /* @__PURE__ */ e("div", { className: "ca-system-card__stats", children: B.map((w, z) => /* @__PURE__ */ c(ce.Fragment, { children: [
+      z > 0 ? /* @__PURE__ */ e(Xe, {}) : null,
+      /* @__PURE__ */ e(Je, { label: w.label, value: w.value })
+    ] }, w.label)) }),
+    /* @__PURE__ */ e(Ze, { updatedOn: d, onConfigure: b })
+  ] });
+}
+function tt({
+  systems: t = [],
+  onConfigure: a,
+  onTitleClick: n,
+  onDescriptionClick: i,
+  emptyMessage: r = "No systems found.",
+  className: l = ""
+}) {
+  return t.length ? /* @__PURE__ */ e("div", { className: `ca-system-grid ${l}`.trim(), children: t.map((u) => /* @__PURE__ */ e(
+    et,
+    {
+      ...u,
+      onConfigure: a,
+      onTitleClick: n,
+      onDescriptionClick: i
+    },
+    u.id ?? u.title
+  )) }) : /* @__PURE__ */ e("div", { className: `ca-system-grid ${l}`.trim(), children: /* @__PURE__ */ e("div", { className: "ca-empty", children: /* @__PURE__ */ e(N, { children: r }) }) });
+}
+function C({
+  value: t,
+  onChange: a,
+  placeholder: n,
+  type: i = "text",
+  icon: r,
+  className: l = "",
+  inputClassName: u = "",
+  ...o
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-input-wrap ${l}`.trim(), children: [
+    r ? /* @__PURE__ */ e("span", { className: "ca-input-wrap__icon", children: r }) : null,
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: i,
+        className: `ca-input ${r ? "ca-input--with-icon" : ""} ${u}`.trim(),
+        value: t,
+        onChange: a,
+        placeholder: n,
+        ...o
+      }
+    )
+  ] });
+}
+function at({ size: t = 18, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      ...n,
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z",
+            stroke: a,
+            strokeWidth: "1.75"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M16.5 16.5 21 21",
+            stroke: a,
+            strokeWidth: "1.75",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function nt({
+  value: t,
+  onChange: a,
+  onSearch: n,
+  placeholder: i = "Search",
+  className: r = ""
+}) {
+  const l = (u) => {
+    u.key === "Enter" && n && n(t);
+  };
+  return /* @__PURE__ */ e("div", { className: `ca-search ${r}`.trim(), children: /* @__PURE__ */ e(
+    C,
+    {
+      value: t,
+      onChange: a,
+      onKeyDown: l,
+      placeholder: i,
+      icon: /* @__PURE__ */ e(at, {}),
+      "aria-label": i
+    }
+  ) });
+}
+function it({ text: t = "Loading", fullScreen: a = !1 }) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: "ca-loading",
+      style: a ? { minHeight: "calc(100vh - 80px)" } : void 0,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ e("span", { className: "ca-loading__spinner" }),
+        /* @__PURE__ */ c("span", { children: [
+          t,
+          "…"
+        ] })
+      ]
+    }
+  );
+}
+const rt = [
+  {
+    id: "qms",
+    title: "QMS - Query Management System",
+    status: "active",
+    description: "Description of the template",
+    departments: 3,
+    workflows: 12,
+    fields: 55,
+    formsFilled: 234,
+    updatedOn: "12 Mar 2024",
+    titleAsLink: !0
+  },
+  {
+    id: "cms",
+    title: "CMS - Complaint Management System",
+    status: "active",
+    description: "Description of the template",
+    departments: 5,
+    workflows: 8,
+    fields: 42,
+    formsFilled: 189,
+    updatedOn: "08 Mar 2024"
+  },
+  {
+    id: "fms",
+    title: "FMS - Feedback Management System",
+    status: "inactive",
+    description: "Description of the template",
+    departments: 2,
+    workflows: 4,
+    fields: 28,
+    formsFilled: 56,
+    updatedOn: "01 Feb 2024"
+  },
+  {
+    id: "rms",
+    title: "RMS - Request Management System",
+    status: "active",
+    description: "Description of the template",
+    departments: 4,
+    workflows: 10,
+    fields: 61,
+    formsFilled: 312,
+    updatedOn: "20 Mar 2024"
+  }
+], lt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.";
+function ae(t = []) {
+  return t.map((a, n) => ({
+    id: a.id ?? a._id ?? `system-${n}`,
+    title: a.title ?? a.name ?? "Untitled",
+    status: a.status ?? "inactive",
+    statusLabel: a.statusLabel,
+    description: a.description ?? a.templateDescription,
+    descriptionHref: a.descriptionHref ?? a.url,
+    departments: a.departments ?? a.departmentCount ?? 0,
+    workflows: a.workflows ?? a.workflowCount ?? 0,
+    fields: a.fields ?? a.fieldCount ?? 0,
+    formsFilled: a.formsFilled ?? a.formFilledCount ?? a.forms_filled ?? 0,
+    updatedOn: a.updatedOn ?? a.updatedAt ?? a.updated_on,
+    titleAsLink: !!(a.titleAsLink ?? a.isLink)
+  }));
+}
+function ne({
+  title: t = "Complaint Management",
+  description: a = lt,
+  systems: n,
+  systemsEndpoint: i,
+  useDemoData: r = !0,
+  createLabel: l = "Create New Form",
+  onCreateForm: u,
+  onConfigure: o,
+  onTitleClick: p,
+  onDescriptionClick: m,
+  onSearch: d
+}) {
+  const s = oe(), [h, g] = E(""), [f, v] = E(null), [b, T] = E(null), [B, w] = E(
+    i && !n ? "loading" : "idle"
+  );
+  U(() => {
+    if (!i || n)
+      return;
+    const y = new AbortController();
+    return q.get(i, { signal: y.signal }).then((_) => {
+      const R = _?.data, Fe = Array.isArray(R) ? R : R?.data ?? R?.systems ?? R?.results ?? [];
+      v(ae(Fe)), T(null), w("success");
+    }).catch((_) => {
+      y.signal.aborted || (T(_?.message || "Failed to load systems"), v([]), w("error"));
+    }), () => y.abort();
+  }, [i, n]);
+  const z = H(() => n ? ae(n) : f || (r ? rt : []), [n, f, r]), ke = H(() => {
+    const y = h.trim().toLowerCase();
+    return y ? z.filter((_) => `${_.title} ${_.description ?? ""} ${_.status ?? ""}`.toLowerCase().includes(y)) : z;
+  }, [z, h]);
+  return /* @__PURE__ */ c(Se, { children: [
+    /* @__PURE__ */ e(
+      Ke,
+      {
+        title: t,
+        description: a,
+        actionLabel: l,
+        onAction: u
+      }
+    ),
+    /* @__PURE__ */ e(nt, { value: h, onChange: (y) => {
+      const _ = y.target.value;
+      g(_), d?.(_);
+    }, placeholder: "Search" }),
+    B === "loading" ? /* @__PURE__ */ e(it, { text: "Loading systems" }) : b ? /* @__PURE__ */ e("div", { className: "ca-empty", children: /* @__PURE__ */ e("p", { className: "ca-body", children: b }) }) : /* @__PURE__ */ e(
+      tt,
+      {
+        systems: ke,
+        onConfigure: (y) => {
+          o?.(y), s(`/settings/${y.id ?? "new"}?step=1`);
+        },
+        onTitleClick: p,
+        onDescriptionClick: m,
+        emptyMessage: h ? "No systems match your search." : "No systems found."
+      }
+    )
+  ] });
+}
+function fe({
+  steps: t = [],
+  currentStep: a = 1,
+  onStepClick: n,
+  className: i = "",
+  size: r = "md"
+}) {
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      className: `ca-stepper ca-stepper--${r} ${i}`.trim(),
+      "aria-label": "Progress",
+      children: t.map((l, u) => {
+        const o = l.id ?? u + 1, p = o === a, m = o < a, d = !!n && (m || p);
+        return /* @__PURE__ */ c(ce.Fragment, { children: [
+          u > 0 ? /* @__PURE__ */ e(
+            "div",
+            {
+              className: `ca-stepper__line ${m || p ? "ca-stepper__line--active" : ""}`
+            }
+          ) : null,
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: [
+                "ca-stepper__item",
+                p ? "ca-stepper__item--active" : "",
+                m ? "ca-stepper__item--done" : ""
+              ].filter(Boolean).join(" "),
+              onClick: () => d && n?.(o),
+              disabled: !d,
+              "aria-current": p ? "step" : void 0,
+              children: [
+                /* @__PURE__ */ e("span", { className: "ca-stepper__circle", children: o }),
+                /* @__PURE__ */ e("span", { className: "ca-stepper__label", children: l.label })
+              ]
+            }
+          )
+        ] }, o);
+      })
+    }
+  );
+}
+const ge = J(null), ct = {
+  categoryType: "qms",
+  active: !0,
+  description: "",
+  roles: ["Store Staff", "HR Executive", "HR Manager"],
+  departmentRows: [
+    { id: "1", department: "", subDepartment: "", roles: "" }
+  ],
+  priorityDraft: "",
+  priorities: [],
+  defaultPriorityId: null,
+  selectedDeptNode: "payroll",
+  workflow: {
+    name: "",
+    tatMinutes: "",
+    description: "",
+    statuses: [],
+    steps: []
+  },
+  fieldDraft: { name: "", type: "" },
+  formFields: []
+};
+function st({ children: t, initialValues: a }) {
+  const [n, i] = E({ ...ct, ...a }), r = Z((o) => {
+    i((p) => ({ ...p, ...o }));
+  }, []), l = Z((o) => {
+    i((p) => ({
+      ...p,
+      workflow: { ...p.workflow, ...o }
+    }));
+  }, []), u = H(
+    () => ({ state: n, setState: i, update: r, updateWorkflow: l }),
+    [n, r, l]
+  );
+  return /* @__PURE__ */ e(ge.Provider, { value: u, children: t });
+}
+function P() {
+  const t = se(ge);
+  if (!t)
+    throw new Error("useSettingsWizard must be used within SettingsWizardProvider");
+  return t;
+}
+const M = [
+  {
+    id: 1,
+    key: "category",
+    label: "Category Type",
+    title: "Category Type",
+    description: "Define the type and basic details for this category type."
+  },
+  {
+    id: 2,
+    key: "departments",
+    label: "Departments",
+    title: "Departments",
+    description: "----"
+  },
+  {
+    id: 3,
+    key: "priorities",
+    label: "Priorities",
+    title: "Priorities",
+    description: "----"
+  },
+  {
+    id: 4,
+    key: "workflow",
+    label: "Workflow",
+    title: "Workflow",
+    description: "----"
+  },
+  {
+    id: 5,
+    key: "formFields",
+    label: "Form Fields",
+    title: "Form Fields",
+    description: "----"
+  },
+  {
+    id: 6,
+    key: "review",
+    label: "Review & Publish",
+    title: "Review & Publish",
+    description: "Review your configuration and publish."
+  }
+], ie = [
+  { id: 1, label: "Create Workflow" },
+  { id: 2, label: "Statuses" },
+  { id: 3, label: "Workflow Steps" }
+], ot = ["Urgent", "High", "Medium", "Low"], ve = [
+  { id: "short", label: "Textfield / Short Answer", icon: "text" },
+  { id: "long", label: "Description / Long Answer", icon: "doc" },
+  { id: "date", label: "Date", icon: "calendar" },
+  { id: "time", label: "Time", icon: "clock" },
+  { id: "single", label: "Dropdown - Single Select", icon: "chevron" },
+  { id: "multi", label: "Dropdown - Multiple Select", icon: "chevron" }
+], be = [
+  "Store Staff",
+  "HR Executive",
+  "HR Manager",
+  "Store Manager",
+  "Admin"
+], ye = [
+  { value: "qms", label: "QMS - Query Management System" },
+  { value: "cms", label: "CMS - Complaint Management System" },
+  { value: "fms", label: "FMS - Feedback Management System" },
+  { value: "rms", label: "RMS - Request Management System" }
+], dt = [
+  {
+    id: "hr",
+    name: "HR",
+    children: [
+      { id: "payroll", name: "Payroll" },
+      { id: "recruitment", name: "Recruitment" }
+    ]
+  },
+  {
+    id: "finance",
+    name: "Finance",
+    children: [{ id: "ap", name: "Accounts Payable" }]
+  },
+  {
+    id: "it",
+    name: "IT",
+    children: []
+  }
+], ut = [
+  { value: "#EF4444", label: "Red" },
+  { value: "#F59E0B", label: "Orange" },
+  { value: "#EAB308", label: "Yellow" },
+  { value: "#22C55E", label: "Green" },
+  { value: "#3B82F6", label: "Blue" },
+  { value: "#8B5CF6", label: "Purple" }
+];
+function pt({ size: t = 28, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      style: { color: "var(--ca-primary)" },
+      ...n,
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M12 3 3 8l9 5 9-5-9-5Z",
+            stroke: a,
+            strokeWidth: "1.6",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M3 12.5 12 17.5l9-5",
+            stroke: a,
+            strokeWidth: "1.6",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M3 16.5 12 21.5l9-5",
+            stroke: a,
+            strokeWidth: "1.6",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function ht({
+  title: t,
+  description: a,
+  nextLabel: n = "Next",
+  onNext: i,
+  showNext: r = !0,
+  nextDisabled: l = !1,
+  nextVariant: u = "primary",
+  className: o = ""
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-settings-card__header ${o}`.trim(), children: [
+    /* @__PURE__ */ c("div", { className: "ca-settings-card__heading", children: [
+      /* @__PURE__ */ e(pt, {}),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ e(x, { children: t }),
+        a ? /* @__PURE__ */ e(N, { className: "ca-settings-card__desc", children: a }) : null
+      ] })
+    ] }),
+    r ? /* @__PURE__ */ e(
+      k,
+      {
+        variant: u,
+        disabled: l,
+        onClick: i,
+        endIcon: /* @__PURE__ */ e(Y, { size: 14, color: "currentColor" }),
+        children: n
+      }
+    ) : null
+  ] });
+}
+function I({
+  title: t,
+  description: a,
+  onNext: n,
+  nextLabel: i,
+  showNext: r = !0,
+  nextDisabled: l,
+  nextVariant: u,
+  children: o,
+  footer: p,
+  className: m = ""
+}) {
+  return /* @__PURE__ */ c("section", { className: `ca-settings-card ${m}`.trim(), children: [
+    /* @__PURE__ */ e(
+      ht,
+      {
+        title: t,
+        description: a,
+        onNext: n,
+        nextLabel: i,
+        showNext: r,
+        nextDisabled: l,
+        nextVariant: u
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "ca-settings-card__divider" }),
+    /* @__PURE__ */ e("div", { className: "ca-settings-card__body", children: o }),
+    p ? /* @__PURE__ */ e("div", { className: "ca-settings-card__footer", children: p }) : null
+  ] });
+}
+function W({ children: t, hint: a, htmlFor: n, className: i = "" }) {
+  return /* @__PURE__ */ c("div", { className: `ca-field-label ${i}`.trim(), children: [
+    /* @__PURE__ */ e("label", { className: "ca-label", htmlFor: n, children: t }),
+    a != null ? /* @__PURE__ */ e("span", { className: "ca-field-label__hint", children: a }) : null
+  ] });
+}
+function mt({ size: t = 16, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", ...n, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M6 9l6 6 6-6",
+      stroke: a,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function A({
+  value: t,
+  onChange: a,
+  options: n = [],
+  placeholder: i = "Select",
+  className: r = "",
+  disabled: l = !1,
+  ...u
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-select ${r}`.trim(), children: [
+    /* @__PURE__ */ c(
+      "select",
+      {
+        className: "ca-select__control",
+        value: t ?? "",
+        onChange: a,
+        disabled: l,
+        ...u,
+        children: [
+          /* @__PURE__ */ e("option", { value: "", disabled: !0, children: i }),
+          n.map((o) => {
+            const p = typeof o == "string" ? o : o.value, m = typeof o == "string" ? o : o.label;
+            return /* @__PURE__ */ e("option", { value: p, children: m }, p);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "ca-select__chevron", children: /* @__PURE__ */ e(mt, { size: 16 }) })
+  ] });
+}
+function ft({
+  value: t,
+  onChange: a,
+  placeholder: n,
+  maxLength: i,
+  rows: r = 4,
+  className: l = "",
+  ...u
+}) {
+  return /* @__PURE__ */ e(
+    "textarea",
+    {
+      className: `ca-textarea ${l}`.trim(),
+      value: t,
+      onChange: a,
+      placeholder: n,
+      maxLength: i,
+      rows: r,
+      ...u
+    }
+  );
+}
+function ee({
+  label: t,
+  hint: a,
+  children: n,
+  className: i = "",
+  htmlFor: r
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-form-field ${i}`.trim(), children: [
+    t != null ? /* @__PURE__ */ e(W, { htmlFor: r, hint: a, children: t }) : null,
+    n
+  ] });
+}
+function re({ label: t, hint: a, ...n }) {
+  return /* @__PURE__ */ e(ee, { label: t, hint: a, htmlFor: n.id, children: /* @__PURE__ */ e(C, { ...n }) });
+}
+function gt({ label: t, hint: a, ...n }) {
+  return /* @__PURE__ */ e(ee, { label: t, hint: a, htmlFor: n.id, children: /* @__PURE__ */ e(A, { ...n }) });
+}
+function _e({ label: t, hint: a, maxLength: n, value: i = "", ...r }) {
+  const l = a ?? (n != null ? `${String(i).length}/${n}` : void 0);
+  return /* @__PURE__ */ e(ee, { label: t, hint: l, htmlFor: r.id, children: /* @__PURE__ */ e(ft, { value: i, maxLength: n, ...r }) });
+}
+function we({
+  checked: t = !1,
+  onChange: a,
+  disabled: n = !1,
+  "aria-label": i = "Toggle",
+  className: r = ""
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": t,
+      "aria-label": i,
+      disabled: n,
+      className: `ca-toggle ${t ? "ca-toggle--on" : ""} ${r}`.trim(),
+      onClick: () => a?.(!t),
+      children: /* @__PURE__ */ e("span", { className: "ca-toggle__thumb" })
+    }
+  );
+}
+function vt({
+  label: t = "Active",
+  checked: a,
+  onChange: n,
+  className: i = ""
+}) {
+  return /* @__PURE__ */ c("div", { className: `ca-toggle-field ${i}`.trim(), children: [
+    /* @__PURE__ */ e(X, { children: t }),
+    /* @__PURE__ */ e(we, { checked: a, onChange: n, "aria-label": t })
+  ] });
+}
+function bt({ size: t = 12, color: a = "currentColor", ...n }) {
+  return /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", ...n, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M6 6l12 12M18 6L6 18",
+      stroke: a,
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function yt({ label: t, onRemove: a, className: n = "" }) {
+  return /* @__PURE__ */ c("span", { className: `ca-tag ${n}`.trim(), children: [
+    t,
+    a ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "ca-tag__remove",
+        onClick: a,
+        "aria-label": `Remove ${t}`,
+        children: /* @__PURE__ */ e(bt, { size: 10 })
+      }
+    ) : null
+  ] });
+}
+function _t({
+  label: t = "Select Roles",
+  options: a = [],
+  value: n = [],
+  onChange: i,
+  placeholder: r = "Select roles",
+  className: l = ""
+}) {
+  const [u, o] = E(""), p = a.filter((s) => {
+    const h = typeof s == "string" ? s : s.value;
+    return !n.includes(h);
+  }), m = (s) => {
+    const h = s.target.value;
+    h && (i?.([...n, h]), o(""));
+  }, d = (s) => {
+    i?.(n.filter((h) => h !== s));
+  };
+  return /* @__PURE__ */ c("div", { className: `ca-role-select ${l}`.trim(), children: [
+    /* @__PURE__ */ e(W, { children: t }),
+    /* @__PURE__ */ e(
+      A,
+      {
+        value: u,
+        onChange: m,
+        options: p,
+        placeholder: r
+      }
+    ),
+    n.length > 0 ? /* @__PURE__ */ e("div", { className: "ca-tag-list", children: n.map((s) => /* @__PURE__ */ e(yt, { label: s, onRemove: () => d(s) }, s)) }) : null
+  ] });
+}
+function wt({ onNext: t, stepMeta: a }) {
+  const { state: n, update: i } = P();
+  return /* @__PURE__ */ c(
+    I,
+    {
+      title: a.title,
+      description: a.description,
+      onNext: t,
+      children: [
+        /* @__PURE__ */ e("div", { className: "ca-step-section", children: /* @__PURE__ */ c("div", { className: "ca-step-row ca-step-row--category", children: [
+          /* @__PURE__ */ e(
+            gt,
+            {
+              label: "Category Type",
+              className: "ca-step-row__grow",
+              value: n.categoryType,
+              onChange: (r) => i({ categoryType: r.target.value }),
+              options: ye,
+              placeholder: "Select category type"
+            }
+          ),
+          /* @__PURE__ */ e(
+            vt,
+            {
+              checked: n.active,
+              onChange: (r) => i({ active: r })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e("div", { className: "ca-step-section", children: /* @__PURE__ */ e(
+          _e,
+          {
+            label: "Description",
+            placeholder: "Enter description",
+            maxLength: 500,
+            value: n.description,
+            onChange: (r) => i({ description: r.target.value }),
+            rows: 5
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "ca-step-section ca-step-section--last", children: /* @__PURE__ */ e(
+          _t,
+          {
+            options: be,
+            value: n.roles,
+            onChange: (r) => i({ roles: r })
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Nt = ["HR", "Finance", "IT", "Operations", "Sales"];
+function kt() {
+  return {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+    department: "",
+    subDepartment: "",
+    roles: ""
+  };
+}
+function Ft({ onNext: t, stepMeta: a }) {
+  const { state: n, update: i } = P(), r = n.departmentRows, l = (o, p) => {
+    i({
+      departmentRows: r.map((m) => m.id === o ? { ...m, ...p } : m)
+    });
+  }, u = () => {
+    i({ departmentRows: [...r, kt()] });
+  };
+  return /* @__PURE__ */ e(I, { title: a.title, description: a.description, onNext: t, children: /* @__PURE__ */ c("div", { className: "ca-dept-table", children: [
+    /* @__PURE__ */ c("div", { className: "ca-dept-table__head", children: [
+      /* @__PURE__ */ e("div", { children: "Department" }),
+      /* @__PURE__ */ e("div", { children: "Sub-department" }),
+      /* @__PURE__ */ e("div", { children: "Roles" }),
+      /* @__PURE__ */ e("div", {})
+    ] }),
+    r.map((o) => /* @__PURE__ */ c("div", { className: "ca-dept-table__row", children: [
+      /* @__PURE__ */ e(
+        A,
+        {
+          value: o.department,
+          onChange: (p) => l(o.id, { department: p.target.value }),
+          options: Nt,
+          placeholder: "Select or add department"
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "ca-input-with-action", children: [
+        /* @__PURE__ */ e(
+          C,
+          {
+            value: o.subDepartment,
+            onChange: (p) => l(o.id, { subDepartment: p.target.value }),
+            placeholder: "Add sub-department"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ca-input-with-action__btn",
+            "aria-label": "Add sub-department",
+            onClick: () => {
+              o.subDepartment.trim();
+            },
+            children: /* @__PURE__ */ e(pe, { size: 14, color: "currentColor" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        A,
+        {
+          value: o.roles,
+          onChange: (p) => l(o.id, { roles: p.target.value }),
+          options: be,
+          placeholder: "Select roles"
+        }
+      ),
+      /* @__PURE__ */ e(k, { variant: "link", size: "sm", onClick: u, children: "+ Add" })
+    ] }, o.id))
+  ] }) });
+}
+function St({ children: t, onClick: a, className: n = "", active: i = !1 }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: `ca-chip ${i ? "ca-chip--active" : ""} ${n}`.trim(),
+      onClick: a,
+      children: t
+    }
+  );
+}
+function xt({
+  checked: t = !1,
+  onChange: a,
+  name: n,
+  value: i,
+  "aria-label": r,
+  className: l = ""
+}) {
+  return /* @__PURE__ */ c("label", { className: `ca-radio ${l}`.trim(), children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "radio",
+        className: "ca-radio__input",
+        name: n,
+        value: i,
+        checked: t,
+        onChange: a,
+        "aria-label": r
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "ca-radio__mark" })
+  ] });
+}
+function Ne({ size: t = 16, color: a = "#9CA3AF", ...n }) {
+  return /* @__PURE__ */ c("svg", { width: t, height: t, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", ...n, children: [
+    /* @__PURE__ */ e("circle", { cx: "5", cy: "4", r: "1.2", fill: a }),
+    /* @__PURE__ */ e("circle", { cx: "11", cy: "4", r: "1.2", fill: a }),
+    /* @__PURE__ */ e("circle", { cx: "5", cy: "8", r: "1.2", fill: a }),
+    /* @__PURE__ */ e("circle", { cx: "11", cy: "8", r: "1.2", fill: a }),
+    /* @__PURE__ */ e("circle", { cx: "5", cy: "12", r: "1.2", fill: a }),
+    /* @__PURE__ */ e("circle", { cx: "11", cy: "12", r: "1.2", fill: a })
+  ] });
+}
+function le(t) {
+  return {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+    name: t,
+    color: ""
+  };
+}
+function Ct({ onNext: t, stepMeta: a }) {
+  const { state: n, update: i } = P(), { priorityDraft: r, priorities: l, defaultPriorityId: u } = n, o = (d) => {
+    const s = (d ?? r).trim();
+    if (!s) return;
+    if (l.some((g) => g.name.toLowerCase() === s.toLowerCase())) {
+      i({ priorityDraft: "" });
+      return;
+    }
+    const h = [...l, le(s)];
+    i({
+      priorities: h,
+      priorityDraft: "",
+      defaultPriorityId: u ?? h[0].id
+    });
+  }, p = (d, s) => {
+    i({
+      priorities: l.map((h) => h.id === d ? { ...h, ...s } : h)
+    });
+  }, m = ut.map((d) => ({
+    value: d.value,
+    label: d.label
+  }));
+  return /* @__PURE__ */ c(I, { title: a.title, description: a.description, onNext: t, children: [
+    /* @__PURE__ */ c("div", { className: "ca-priority-add", children: [
+      /* @__PURE__ */ e(W, { children: "Priorities" }),
+      /* @__PURE__ */ c("div", { className: "ca-priority-add__row", children: [
+        /* @__PURE__ */ e(
+          C,
+          {
+            value: r,
+            onChange: (d) => i({ priorityDraft: d.target.value }),
+            placeholder: "Add priority",
+            onKeyDown: (d) => {
+              d.key === "Enter" && (d.preventDefault(), o());
+            }
+          }
+        ),
+        /* @__PURE__ */ e(k, { variant: "outline", onClick: () => o(), children: "+ Add" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "ca-chip-row", children: ot.map((d) => /* @__PURE__ */ c(St, { onClick: () => o(d), children: [
+        "+ ",
+        d
+      ] }, d)) })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "ca-priority-table", children: [
+      /* @__PURE__ */ c("div", { className: "ca-priority-table__head", children: [
+        /* @__PURE__ */ e("div", { children: "Priority" }),
+        /* @__PURE__ */ e("div", { children: "Color" }),
+        /* @__PURE__ */ e("div", { children: "Default" })
+      ] }),
+      (l.length ? l : [le("")]).map((d, s) => {
+        const h = !l.length;
+        return /* @__PURE__ */ c("div", { className: "ca-priority-table__row", children: [
+          /* @__PURE__ */ c("div", { className: "ca-priority-table__name", children: [
+            /* @__PURE__ */ e(Ne, {}),
+            /* @__PURE__ */ e(
+              C,
+              {
+                value: h ? r : d.name,
+                onChange: (g) => {
+                  h ? i({ priorityDraft: g.target.value }) : p(d.id, { name: g.target.value });
+                },
+                placeholder: "Add priority"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            A,
+            {
+              value: d.color,
+              onChange: (g) => {
+                h || p(d.id, { color: g.target.value });
+              },
+              options: m,
+              placeholder: "Select color"
+            }
+          ),
+          /* @__PURE__ */ e(
+            xt,
+            {
+              name: "default-priority",
+              value: d.id,
+              checked: !h && u === d.id,
+              onChange: () => !h && i({ defaultPriorityId: d.id }),
+              "aria-label": "Default priority"
+            }
+          )
+        ] }, d.id || s);
+      })
+    ] })
+  ] });
+}
+function At({
+  onNext: t,
+  stepMeta: a,
+  substep: n = 1,
+  onSubstepChange: i
+}) {
+  const { state: r, update: l, updateWorkflow: u } = P(), { selectedDeptNode: o, workflow: p } = r, m = () => {
+    if (n < ie.length) {
+      i?.(n + 1);
+      return;
+    }
+    t?.();
+  };
+  return /* @__PURE__ */ e(
+    I,
+    {
+      title: a.title,
+      description: a.description,
+      onNext: t,
+      nextVariant: "secondary",
+      children: /* @__PURE__ */ c("div", { className: "ca-workflow", children: [
+        /* @__PURE__ */ c("aside", { className: "ca-workflow__sidebar", children: [
+          /* @__PURE__ */ e("h3", { className: "ca-workflow__sidebar-title", children: "Select Department" }),
+          /* @__PURE__ */ e("p", { className: "ca-small", children: "Add workflow for selected department" }),
+          /* @__PURE__ */ e("ul", { className: "ca-dept-tree", children: dt.map((d) => /* @__PURE__ */ c("li", { className: "ca-dept-tree__group", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: `ca-dept-tree__item ${o === d.id ? "ca-dept-tree__item--active" : ""}`,
+                onClick: () => l({ selectedDeptNode: d.id }),
+                children: d.name
+              }
+            ),
+            d.children?.length ? /* @__PURE__ */ e("ul", { className: "ca-dept-tree__children", children: d.children.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+              "button",
+              {
+                type: "button",
+                className: `ca-dept-tree__item ca-dept-tree__item--child ${o === s.id ? "ca-dept-tree__item--active" : ""}`,
+                onClick: () => l({ selectedDeptNode: s.id }),
+                children: [
+                  /* @__PURE__ */ e("span", { className: "ca-dept-tree__branch", "aria-hidden": "true", children: "└" }),
+                  s.name
+                ]
+              }
+            ) }, s.id)) }) : null
+          ] }, d.id)) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "ca-workflow__main", children: [
+          /* @__PURE__ */ e(
+            fe,
+            {
+              steps: ie,
+              currentStep: n,
+              onStepClick: i,
+              size: "sm",
+              className: "ca-workflow__substepper"
+            }
+          ),
+          n === 1 ? /* @__PURE__ */ c("div", { className: "ca-workflow__form", children: [
+            /* @__PURE__ */ c("div", { className: "ca-step-row", children: [
+              /* @__PURE__ */ e(
+                re,
+                {
+                  className: "ca-step-row__grow",
+                  label: "Name",
+                  placeholder: "Enter name",
+                  value: p.name,
+                  onChange: (d) => u({ name: d.target.value })
+                }
+              ),
+              /* @__PURE__ */ e(
+                re,
+                {
+                  className: "ca-step-row__grow",
+                  label: "TAT Minutes",
+                  placeholder: "Enter here",
+                  value: p.tatMinutes,
+                  onChange: (d) => u({ tatMinutes: d.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              _e,
+              {
+                label: "Description",
+                placeholder: "Enter description",
+                value: p.description,
+                onChange: (d) => u({ description: d.target.value }),
+                rows: 5
+              }
+            )
+          ] }) : null,
+          n === 2 ? /* @__PURE__ */ e("div", { className: "ca-workflow__placeholder", children: /* @__PURE__ */ e("p", { className: "ca-body", children: "Configure workflow statuses for the selected department." }) }) : null,
+          n === 3 ? /* @__PURE__ */ e("div", { className: "ca-workflow__placeholder", children: /* @__PURE__ */ e("p", { className: "ca-body", children: "Define ordered workflow steps and assignees." }) }) : null,
+          /* @__PURE__ */ e("div", { className: "ca-workflow__actions", children: /* @__PURE__ */ e(
+            k,
+            {
+              onClick: m,
+              endIcon: /* @__PURE__ */ e(Y, { size: 14, color: "#fff" }),
+              children: "Next Step"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+function Dt({ size: t = 16, color: a = "#9CA3AF", ...n }) {
+  return /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", ...n, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2m2 0v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7h12Z",
+      stroke: a,
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const j = ve.map((t) => ({
+  value: t.id,
+  label: t.label
+}));
+function Tt({ type: t }) {
+  return /* @__PURE__ */ e("span", { className: "ca-field-lib__glyph", children: {
+    text: "A",
+    doc: "¶",
+    calendar: "口",
+    clock: "◷",
+    chevron: "▾"
+  }[t] || "▾" });
+}
+function Bt({ onNext: t, stepMeta: a }) {
+  const { state: n, update: i } = P(), { fieldDraft: r, formFields: l } = n, u = (s) => i({ fieldDraft: { ...r, ...s } }), o = () => {
+    if (!r.name.trim() || !r.type) return;
+    const s = j.find((h) => h.value === r.type)?.label || r.type;
+    i({
+      formFields: [
+        ...l,
+        {
+          id: `${Date.now()}`,
+          name: r.name.trim(),
+          type: r.type,
+          typeLabel: s,
+          required: !1
+        }
+      ],
+      fieldDraft: { name: "", type: "" }
+    });
+  }, p = (s, h) => {
+    i({
+      formFields: l.map((g) => g.id === s ? { ...g, ...h } : g)
+    });
+  }, m = (s) => {
+    i({ formFields: l.filter((h) => h.id !== s) });
+  }, d = (s) => {
+    u({ type: s.id });
+  };
+  return /* @__PURE__ */ e(
+    I,
+    {
+      title: a.title,
+      description: a.description,
+      showNext: !1,
+      footer: /* @__PURE__ */ e(
+        k,
+        {
+          onClick: t,
+          endIcon: /* @__PURE__ */ e(Y, { size: 14, color: "#fff" }),
+          children: "Next"
+        }
+      ),
+      children: /* @__PURE__ */ c("div", { className: "ca-form-fields", children: [
+        /* @__PURE__ */ c("aside", { className: "ca-field-lib", children: [
+          /* @__PURE__ */ e("h3", { className: "ca-field-lib__title", children: "Field Library" }),
+          /* @__PURE__ */ e("p", { className: "ca-small", children: "Drag and drop the fields to add." }),
+          /* @__PURE__ */ e("ul", { className: "ca-field-lib__list", children: ve.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: "ca-field-lib__item",
+              draggable: !0,
+              onDragStart: (h) => {
+                h.dataTransfer.setData("text/plain", s.id);
+              },
+              onClick: () => d(s),
+              children: [
+                /* @__PURE__ */ e(Tt, { type: s.icon }),
+                /* @__PURE__ */ e("span", { children: s.label })
+              ]
+            }
+          ) }, s.id)) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "ca-form-fields__main", children: [
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: "ca-add-fields",
+              onDragOver: (s) => s.preventDefault(),
+              onDrop: (s) => {
+                s.preventDefault();
+                const h = s.dataTransfer.getData("text/plain");
+                h && u({ type: h });
+              },
+              children: [
+                /* @__PURE__ */ c("div", { className: "ca-add-fields__top", children: [
+                  /* @__PURE__ */ e("h3", { className: "ca-add-fields__title", children: "Add Fields" }),
+                  /* @__PURE__ */ e(k, { onClick: o, children: "Add Field" })
+                ] }),
+                /* @__PURE__ */ c("div", { className: "ca-step-row", children: [
+                  /* @__PURE__ */ c("div", { className: "ca-step-row__grow", children: [
+                    /* @__PURE__ */ e(W, { children: "Name of Field" }),
+                    /* @__PURE__ */ e(
+                      C,
+                      {
+                        value: r.name,
+                        onChange: (s) => u({ name: s.target.value }),
+                        placeholder: "Enter name of the field."
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ c("div", { className: "ca-step-row__grow", children: [
+                    /* @__PURE__ */ e(W, { children: "Type of Field" }),
+                    /* @__PURE__ */ e(
+                      A,
+                      {
+                        value: r.type,
+                        onChange: (s) => u({ type: s.target.value }),
+                        options: j,
+                        placeholder: "Select type of the field."
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "ca-fields-table", children: [
+            /* @__PURE__ */ c("div", { className: "ca-fields-table__head", children: [
+              /* @__PURE__ */ e("div", { children: "Field Name" }),
+              /* @__PURE__ */ e("div", { children: "Field Type" }),
+              /* @__PURE__ */ e("div", { children: "Required" }),
+              /* @__PURE__ */ e("div", {})
+            ] }),
+            l.length === 0 ? /* @__PURE__ */ e("div", { className: "ca-fields-table__empty", children: /* @__PURE__ */ e("p", { className: "ca-small", children: "No fields added yet." }) }) : l.map((s) => /* @__PURE__ */ c("div", { className: "ca-fields-table__row", children: [
+              /* @__PURE__ */ c("div", { className: "ca-fields-table__name", children: [
+                /* @__PURE__ */ e(Ne, {}),
+                /* @__PURE__ */ e(
+                  C,
+                  {
+                    value: s.name,
+                    onChange: (h) => p(s.id, { name: h.target.value })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                A,
+                {
+                  value: s.type,
+                  onChange: (h) => {
+                    const g = h.target.value, f = j.find((v) => v.value === g)?.label || g;
+                    p(s.id, { type: g, typeLabel: f });
+                  },
+                  options: j,
+                  placeholder: "Select type"
+                }
+              ),
+              /* @__PURE__ */ e(
+                we,
+                {
+                  checked: s.required,
+                  onChange: (h) => p(s.id, { required: h }),
+                  "aria-label": "Required"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "ca-icon-btn",
+                  "aria-label": "Delete field",
+                  onClick: () => m(s.id),
+                  children: /* @__PURE__ */ e(Dt, {})
+                }
+              )
+            ] }, s.id))
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function Rt({ onPublish: t, stepMeta: a }) {
+  const { state: n } = P(), i = ye.find((r) => r.value === n.categoryType)?.label || n.categoryType;
+  return /* @__PURE__ */ e(
+    I,
+    {
+      title: a.title,
+      description: a.description,
+      nextLabel: "Publish",
+      onNext: t,
+      children: /* @__PURE__ */ c("div", { className: "ca-review", children: [
+        /* @__PURE__ */ c("section", { className: "ca-review__block", children: [
+          /* @__PURE__ */ e(x, { children: "Category Type" }),
+          /* @__PURE__ */ c("div", { className: "ca-review__row", children: [
+            /* @__PURE__ */ e(X, { children: i }),
+            /* @__PURE__ */ e(me, { status: n.active ? "active" : "inactive" })
+          ] }),
+          n.description ? /* @__PURE__ */ e(N, { children: n.description }) : null,
+          n.roles.length ? /* @__PURE__ */ c(N, { children: [
+            "Roles: ",
+            n.roles.join(", ")
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ c("section", { className: "ca-review__block", children: [
+          /* @__PURE__ */ e(x, { children: "Departments" }),
+          /* @__PURE__ */ c(N, { children: [
+            n.departmentRows.filter((r) => r.department).length,
+            " department row(s) configured"
+          ] })
+        ] }),
+        /* @__PURE__ */ c("section", { className: "ca-review__block", children: [
+          /* @__PURE__ */ e(x, { children: "Priorities" }),
+          /* @__PURE__ */ e(N, { children: n.priorities.length ? n.priorities.map((r) => r.name).join(", ") : "No priorities added" })
+        ] }),
+        /* @__PURE__ */ c("section", { className: "ca-review__block", children: [
+          /* @__PURE__ */ e(x, { children: "Workflow" }),
+          /* @__PURE__ */ e(N, { children: n.workflow.name ? `${n.workflow.name} (TAT: ${n.workflow.tatMinutes || "—"} min)` : "No workflow created yet" })
+        ] }),
+        /* @__PURE__ */ c("section", { className: "ca-review__block ca-review__block--last", children: [
+          /* @__PURE__ */ e(x, { children: "Form Fields" }),
+          /* @__PURE__ */ e(N, { children: n.formFields.length ? n.formFields.map((r) => r.name).join(", ") : "No form fields added" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "ca-workflow__actions", children: /* @__PURE__ */ e(k, { onClick: t, children: "Publish" }) })
+      ] })
+    }
+  );
+}
+function Et(t) {
+  const a = Number(t);
+  return !Number.isFinite(a) || a < 1 ? 1 : a > M.length ? M.length : Math.floor(a);
+}
+function Mt(t) {
+  const a = Number(t);
+  return !Number.isFinite(a) || a < 1 ? 1 : a > 3 ? 3 : Math.floor(a);
+}
+function Lt({
+  title: t = "Complaint Management Settings",
+  onPublish: a,
+  onStepChange: n
+}) {
+  const i = oe(), { systemId: r } = xe(), [l, u] = Ce(), o = Et(l.get("step") || 1), p = Mt(l.get("substep") || 1);
+  U(() => {
+    if (!l.get("step")) {
+      const f = new URLSearchParams(l);
+      f.set("step", "1"), u(f, { replace: !0 });
+    }
+  }, [l, u]);
+  const m = H(
+    () => M.find((f) => f.id === o) || M[0],
+    [o]
+  ), d = Z(
+    (f, v) => {
+      const b = new URLSearchParams(l);
+      b.set("step", String(f)), f === 4 ? b.set("substep", String(v ?? (f === o ? p : 1))) : b.delete("substep"), u(b, { replace: !1 }), n?.({ systemId: r, step: f, substep: v });
+    },
+    [l, u, n, r, o, p]
+  ), s = () => {
+    o < M.length && d(o + 1, 1);
+  };
+  return /* @__PURE__ */ e(st, { children: /* @__PURE__ */ c("div", { className: "ca-settings-page", children: [
+    /* @__PURE__ */ e(he, { children: t }),
+    /* @__PURE__ */ e(
+      fe,
+      {
+        steps: M,
+        currentStep: o,
+        onStepClick: (f) => d(f, f === 4 ? 1 : void 0),
+        className: "ca-settings-page__stepper"
+      }
+    ),
+    o === 1 ? /* @__PURE__ */ e(wt, { onNext: s, stepMeta: m }) : null,
+    o === 2 ? /* @__PURE__ */ e(Ft, { onNext: s, stepMeta: m }) : null,
+    o === 3 ? /* @__PURE__ */ e(Ct, { onNext: s, stepMeta: m }) : null,
+    o === 4 ? /* @__PURE__ */ e(
+      At,
+      {
+        onNext: s,
+        stepMeta: m,
+        substep: p,
+        onSubstepChange: (f) => {
+          d(4, f);
+        }
+      }
+    ) : null,
+    o === 5 ? /* @__PURE__ */ e(Bt, { onNext: s, stepMeta: m }) : null,
+    o === 6 ? /* @__PURE__ */ e(Rt, { onPublish: () => {
+      a?.({ systemId: r, step: o });
+    }, stepMeta: m }) : null,
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        className: "ca-back-link",
+        onClick: () => i("/"),
+        children: "← Back to Complaint Management"
+      }
+    )
+  ] }) });
+}
+function $t({ children: t }) {
+  const { cssVars: a, darkMode: n, mode: i } = Ue();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `ca-root ${n ? "ca-root--dark" : "ca-root--light"}`,
+      "data-ca-theme": i,
+      style: a,
+      children: t
+    }
+  );
+}
+const Ut = ({
+  apiUrl: t,
+  authToken: a,
+  basePath: n = "/",
+  theme: i,
+  darkMode: r = !1,
+  title: l,
+  description: u,
+  systems: o,
+  systemsEndpoint: p,
+  useDemoData: m = !0,
+  createLabel: d,
+  onCreateForm: s,
+  onConfigure: h,
+  onTitleClick: g,
+  onDescriptionClick: f,
+  onSearch: v,
+  onPublish: b,
+  onStepChange: T,
+  children: B
+}) => {
+  const w = {
+    title: l,
+    description: u,
+    systems: o,
+    systemsEndpoint: p,
+    useDemoData: m,
+    createLabel: d,
+    onCreateForm: s,
+    onConfigure: h,
+    onTitleClick: g,
+    onDescriptionClick: f,
+    onSearch: v
+  };
+  return /* @__PURE__ */ e(Ve, { theme: i, darkMode: r, children: /* @__PURE__ */ e($t, { children: /* @__PURE__ */ e(Le, { apiUrl: t, authToken: a, children: /* @__PURE__ */ e(Ae, { basename: n, children: /* @__PURE__ */ c(De, { children: [
+    /* @__PURE__ */ e(
+      G,
+      {
+        path: "/",
+        element: B ?? /* @__PURE__ */ e(ne, { ...w })
+      }
+    ),
+    /* @__PURE__ */ e(
+      G,
+      {
+        path: "/settings/:systemId",
+        element: /* @__PURE__ */ e(
+          Lt,
+          {
+            onPublish: b,
+            onStepChange: T
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      G,
+      {
+        path: "*",
+        element: B ?? /* @__PURE__ */ e(ne, { ...w })
+      }
+    )
+  ] }) }) }) }) });
+}, qt = S.colors, Yt = S.radii, Gt = S.spacing, Kt = S.typography;
+export {
+  Le as ApiProvider,
+  N as BodyText,
+  k as Button,
+  Ze as CardFooter,
+  Qe as CardHeader,
+  mt as ChevronDownIcon,
+  Y as ChevronRightIcon,
+  St as Chip,
+  bt as CloseIcon,
+  Ut as ComplaintApp,
+  ne as ComplaintManagementPage,
+  Lt as ComplaintSettingsPage,
+  lt as DEFAULT_PAGE_DESCRIPTION,
+  rt as DEMO_SYSTEMS,
+  Je as DataPoint,
+  Xe as Divider,
+  Ne as DragHandleIcon,
+  W as FieldLabel,
+  ee as FormField,
+  re as FormInput,
+  gt as FormSelect,
+  _e as FormTextarea,
+  he as Heading1,
+  x as Heading2,
+  C as Input,
+  X as LabelText,
+  pt as LayersIcon,
+  Ge as LinkText,
+  it as Loading,
+  Ke as PageHeader,
+  pe as PlusIcon,
+  xt as Radio,
+  _t as RoleMultiSelect,
+  M as SETTINGS_STEPS,
+  nt as SearchBar,
+  at as SearchIcon,
+  A as Select,
+  I as SettingsCard,
+  ht as SettingsCardHeader,
+  st as SettingsWizardProvider,
+  me as StatusBadge,
+  fe as Stepper,
+  et as SystemCard,
+  tt as SystemCardGrid,
+  yt as Tag,
+  ft as Textarea,
+  Ve as ThemeProvider,
+  we as Toggle,
+  vt as ToggleField,
+  Dt as TrashIcon,
+  D as Typography,
+  Ye as ValueText,
+  ie as WORKFLOW_SUBSTEPS,
+  q as api,
+  qt as colors,
+  V as darkTheme,
+  O as deepMerge,
+  Ut as default,
+  $e as defaultThemeFile,
+  S as lightTheme,
+  Pe as normalizeThemeFile,
+  Yt as radii,
+  Ie as resolveActiveTheme,
+  Re as setAuthToken,
+  Be as setBaseUrl,
+  Gt as spacing,
+  je as themeToCssVars,
+  Kt as typography,
+  P as useSettingsWizard,
+  Ue as useTheme
+};
+//# sourceMappingURL=complaint-app.js.map